@charset "UTF-8";
/* CSS Document */
/**********************************************/
/*					FONTS					  */
/**********************************************/
@font-face{font-family: newErasDemi;src:url('../Fonts/ITCErasStd-Bold-Exp2.ttf') format("truetype");}
@font-face{font-family: charcoal_exp;src:url('../Fonts/Charcoal-Exp.ttf') format("truetype");}
@font-face{font-family: charcoal;src:url('../Fonts/Charcoal.ttf') format("truetype");}
@font-face{font-family: newErasMed0; src: url('../Fonts/ITCErasStd-Med-0.ttf')  format("truetype");}
@font-face{font-family: newErasDem0; src: url('../Fonts/ITCErasStd-Dem-0.ttf')  format("truetype"); font-weight:600; font-style:normal;}


body{ margin:0px; padding:0px;font-family: newErasMed0; height:100%; max-height:630px; width:100%; max-width:821px;}
html{ height:100%; width:100%;}
#cable_container{background-color:#e6e6e6; width:100%; overflow:hidden; max-width:821px; height:100%; max-height:630px; text-align:center; position:relative; min-width:320px; min-height:400px;}
h2{margin:0px; padding:0px;}
a:hover {color:#9B242D;}
a:visited {color:#c00;}
img{border:0;}
#dark_wall{position:absolute; width:821px; height:630px; background-image:url(../home_cable_features/dark_wall.png);} 
#outside_link{padding-left:290px;}
.title{font-family:newErasDemi; font-size:20px;}


/**********************************************/
/*			 	Light Director 				  */
/**********************************************/
#tester_probe{position:absolute; left:12.18%; display:none; width:66.99%}
#tester_no_probe{position:absolute; left:12.18%; display:none; width:66.99%}
#ld_text1{position:absolute; top:22.22%; left:48.72%; display:none; width:42.87%}
#ld_text2{position:absolute; top:22.22%; left:48.72%; display:none; width:42.87%}
#ld_text3{position:absolute; top:22.22%; left:48.72%; display:none; width:36.66%}
#ld_text4{position:absolute; top:14.28%; left:42.02%; display:none; width:56.63%}
#left_hand{position:absolute; top:22.22%; left:13.39%; display:none; width:73.08%}
#left_hand_red{position:absolute; top:22.22%;left:13.39%; display:none; width:73.08%}
#right_hand{position:absolute; top:100.66%;left:42.63%; width:73.08%}
#connector{position:absolute; top:1.58%; left:4.87%; display:none; width:36.54%}
#pin{position:absolute; top:101.58%; left:34.10%; width:25.70%}
#light{position:absolute; top:1.58%; left:4.87%; display:none; width:36.54%}
#yellow_cable{position:absolute; top:1.58%; left:4.87%; display:none; width:36.54%}
#light_director_text{position:absolute; top:63.49%; left:2.43%; display:none; width:60.90%}
#ld_more_info{position:absolute; top:46.82%; left:11.57%; display:none; }


#replay{position:absolute; bottom:4.76%; right:4.87%; text-decoration:none; display:none;}


/**********************************************/
/*			 Autobuild Software 				  */
/**********************************************/
#ld_software_text{ margin:15px 0px 10px 20px; text-align:left;}
li{text-align:left;}
ul{padding-top:10px; padding-left:45px; margin-top:-5px; width:90%;}

#screenshot{ position:absolute; bottom:20px; height:68%; left:45px; width:73%;}
#software_screenshot{ position:absolute; width:100%; left:0px; top:0px; font-size:14px; color:#555; font-weight:bold;}
#red_ring{ position:absolute; left:0px; top:0px; width:100%;}

#software_connector{ position:absolute; bottom:0%; right:30px;  display:none; width:36.5%;}
#software_light{ position:absolute; bottom:0%; right:30px; display:none; width:36.5%;}

/**********************************************/
/*			 Autobuild Audio 				  */
/**********************************************/
#ld_audio_text{ width:30.45%; margin:12% 0px 10px 7.3%; text-align:left;}
#speaker{position:absolute; top:20%; right:12.18%; }
#balloon{position:absolute; top:10.6%; left:37.75%; width:37.88%; z-index:1; display:none;}
#click{color:red; float:left; margin:-20px 0 0 80px;}
#left_hand_orange{position:absolute; top:15.87%; left:7.3%; width:80%}

/**********************************************/
/*			 Moisture Plugs 				  */
/**********************************************/
#moisture_text{ width:30.45%; margin:60px 0px 10px 7.3%; text-align:left;}
#ballon2{position:absolute; top:30px; right:70px; width:50%;}

#conn-container{ width:50%; position:absolute; bottom:20px; left:20px; overflow:visible; max-width:400px;}
#connector_no_plugs{float:left; width:100%; top:0px; left:0px;}
#plug_l1{position:absolute; top:29%; left:54%; display:none;}
#plug_l2{position:absolute; top:36%; left:43%; display:none;}
#plug_l3{position:absolute; top:42%; left:47%; display:none;}
#plug_l4{position:absolute; top:47%; left:64%; display:none;}
#plug_l5{position:absolute; top:53.5%; left:40.5%; display:none;}
#plug_l6{position:absolute; top:62.5%; left:43%; display:none;}
.plug{position:absolute; top:0px; left:0px; width:100%; display:none;}
.lightpin{ width:5%;}
.pinout{ position:absolute; bottom:50px; right:180px; width:30%;}




/**********************************************/
/*				ARROWS & DOTS				  */
/**********************************************/
#left_arrow{position:absolute;left:0px;top:45%;}
#right_arrow{position:absolute;right:0px;top:45%;}

#left_arrow a{width:43px; height:45px; float:left; background: url(../home_hvx_features/arrows.png) no-repeat -3px -44px;}
#left_arrow a:hover{background: url(../home_hvx_features/arrows.png) no-repeat -3px 0;}
#left_arrow a:focus{outline-color:invert; outline-style:none; outline-width:medium;}

#right_arrow a{width:43px; height:45px; float:left; background: url(../home_hvx_features/arrows.png) no-repeat -45px -44px;}
#right_arrow a:hover{background: url(../home_hvx_features/arrows.png) no-repeat -45px 0px;}
#right_arrow a:focus{outline-color:invert; outline-style:none; outline-width:medium;}

#scroll_dots{position:absolute; top:600px; left:365px; width:85px; overflow:hidden;}


@media only screen and (max-width: 820px) {
#screenshot{ width:65%;}
#ballon2{ width:40%; right:60px; top:70px;  }
#moisture_text{ width:80%; margin-left:10%; text-align:left; margin-top:20px;}
#conn-container{ width:50%; bottom:20px; left:60px;}
.pinout{right:80px;}

}

@media only screen and (max-width: 599px) {
.title{font-size:18px;}
#light_director_text{top:63.49%; left:10%; display:none; width:80%}
#ld_more_info{top:83%; left:8.57%;}
#right_hand,#left_hand_orange{ display:none;}
#screenshot{ width:65%; height:50%;}
#conn-container{ width:60%; bottom:40px; left:40px;}	
#ballon2{ width:50%; right:40px; top:90px;  }
.pinout{right:40px;}


}

@media only screen and (max-width: 399px) {
.title{font-size:16px;}
#conn-container{ bottom:30px; left:30px;}	
#ballon2{ width:50%; right:60px; top:105px;  }
.pinout{right:25px;}

}