@charset "UTF-8";
/* CSS Document */

img, object, embed, video {max-width: 100%;}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {width:100%;}
body{color:#585858;}
p, ul{font-size:15px; line-height:1.5;}
h1, h2, h3, p{padding:0 5.0%;}
.image{ display:block; margin:0 auto;}
li{padding-right:5%;}
.title{font-family:Verdana, Geneva, sans-serif;}
.line{margin:10px 20px; border:2px solid #CCC;}
.gridContainer {position:relative; clear:left; margin-left: auto; margin-right: auto; width:100%; margin-top:0px; }
#content {clear:both; float:left; margin-left:0; margin-bottom:0px; display:block; }
/*****************************************/
/* Small Mobile Layout: 340px and below. */
/****** Header *****/
#blackheader { clear: both; float: left; padding-top:5px; margin-bottom:11px; display: block; width: 100%; background-color: black; /*background-image:url(../Template/PCB-bg.gif); background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;*/ border-bottom:4px solid white; -webkit-box-shadow: 0px 4px 4px rgba(0,0,0,0.4); -moz-box-shadow: 0px 4px 4px rgba(0,0,0,0.4); box-shadow: 0px 4px 4px rgba(0,0,0,0.4);}
.fixed{position: relative; z-index: 10; right: 0; left: 0; top: 0;}
.wrap {display: block; margin: 0 auto; max-width: 480px; padding: 0 0px; position:relative;}
#logo-container{max-width:320px; width:100%; color:#DDD; margin-bottom:3px;}
#cami-logo{background:url(../Home_Page_Art/cami-logo.svg) center center no-repeat, url(../Home_Page_Art/white-background-300.png) center center no-repeat; background-size:80%, 100%; max-width:320px; width:100%; height:96px;}
#cableeye-logo{display:none; z-index:-1;}
#search-container{ height:31px; float:right; margin:0px 5px 10px 5px;}
#searchbox{width:200px; float:right; margin-top:2px; display:none;}
#search-bn{ width:45px; height:31px; background-image:url(../Tab_Graphics/icons/search-bn-red.svg); background-size:100% 100%; float:right;}
#search-bn:hover{ background-image:url(../Tab_Graphics/icons/search-bn-blue.svg);}
.gsc-search-button{ display:none;}
#resultsbox{width:85%; max-width:600px; height:400px; border:3px solid black; background-color:#e6e6e6; overflow:auto; position:absolute; top:45px; right:10px; display:none; z-index:5; box-shadow:-5px 5px 5px rgba(0,0,0,0.4); -moz-box-shadow:-5px 5px 5px rgba(0,0,0,0.4); -webkit-box-shadow:-5px 5px 5px rgba(0,0,0,0.4);}
#results-close{position:absolute; width:30px; height:30px; background:#C00; color:#CCC; text-align:center; font-size:20px; font-weight:bold; right:10px; top:10px; cursor:pointer;}
#header-middle, #header-middle-es{margin:0px 5px 10px 10px; position:relative; clear:none; float:right; width:45px; height:31px; padding:0px; display:block;}
#header-menu-image{cursor: pointer; width:45px; height:31px; float:right; clear:right;}
#header-menu-image:hover{background-image:url(../Tab_Graphics/icons/menu-button-blue.svg);}
#header-menu-image.unclicked{background-image:url(../Tab_Graphics/icons/menu-button.svg);}
#header-menu-image.clicked{background-image:url(../Tab_Graphics/icons/menu-button-blue.svg);}
#box-frame{width:200px; z-index:1; height:280px; padding:3px; background-color:#222; position:absolute; top:-303px; right:10px;  -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.4); -moz-box-shadow: 1px 2px 4px rgba(0,0,0,0.4); box-shadow: 1px 2px 4px rgba(0,0,0,0.4);}
.header-frame-big, .header-frame-big-es, .header-frame-small, .header-frame-small-es {display:none;}
#header-intl-flags{ display:none;}

.callout{ width:80%; border-left:5px solid #C00; clear:both; padding-left:10px; margin-left:10%;} /* Quote's Red Vertical Line */
.fa-quote-left{ color:#C00; margin-right:10px;} /* Red Quotes */


/******* grid container ******/
/* left side links */
#links_box{width:250px; height:800px; margin-top:10px; margin-bottom:16px; position:absolute; left:-275px; top:3px; background:#D1D1D1; border:2px solid #000; color:black; -webkit-box-shadow: 0px 0px 10px 5px #888; -moz-box-shadow: 0px 0px 5px 5px #888; box-shadow: 0px 0px 5px 5px #888; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; z-index:1;}
.flip{ cursor:pointer; border-bottom:1px solid gray; }
.flip h3{margin:0; padding:10px 0 10px 15px;}
.flip:hover{background-color:#D9D9D9;}
.first-flip:hover{border-radius:25px 25px 0 0; -moz-border-radius:25px 25px 0 0; -webkit-border-radius:25px 25px 0 0;}
.flip div{background-color:#4B4949; padding:20px 0 15px 0; background:url(../Home_Page_Art/links-arrow-bg.png) no-repeat top center;  }
.flip div:hover{ background:url(../Home_Page_Art/links-arrow-bg-hover.png) no-repeat top center;  }
.flip div a{color:white; display:block; padding:5px 15px 5px 20px;  text-decoration:none; font-size:14px;}
.flip div a:hover{color:#0200FF; background-color:#888;}
.menu-slide, .slide1{display:none;}
#questions{ position:absolute; bottom:10px; width:100%; text-align:center; border-top:5px solid gray; z-index:-1;}
#questions p,a{ font-size:16px; margin:0px; padding:0px; line-height:18px;}
#questions h3{margin:5px 0 10px 0;}
#left-menu-bn{cursor:pointer; position:absolute; right:-70px; top:55px; width:45px; height:31px; background-size:100% 100%; float:right;}
#left-menu-bn.unclicked{background-image:url(../Tab_Graphics/icons/bn-right.svg);}
#left-menu-bn.clicked{background-image:url(../Tab_Graphics/icons/bn-left.svg);}

/* central tabs */
#folders{ display:none;}
#slide-tabs-container{ width:100%; overflow:hidden;}
#slide-tabs{height:60px; width:100%; background-color:rgba(255,255,255,0.5); margin-top:3px; margin-bottom:5px; -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4); box-shadow: 0px 0px 5px rgba(0,0,0,0.4);}
.tab{float:left; width:19.5%; height:45px; text-align:center; padding-top:15px; font-weight:bold; font-family: Verdana, Geneva, sans-serif; font-size:10px; line-height:12px; cursor:pointer; border-left:1px solid gray; text-decoration:none; color:#585858;}
.tab:hover{background-color:#00B; color:white;}
#slide-tabs a{color:#585858;}
#slide-tabs a:hover{color:white;}
/*.tab a{font-size:12px; text-decoration:none; color:#585858;}*/
.check{ background-color:#DDD;}

/**** Pre-Footer ****/
#pre-footer{ clear:left; float:left; margin-top:10px; width:98%; padding:1%; background-color:#F8F8F8; border-top:1px solid #222;
-webkit-box-shadow: 0px -4px 4px rgba(0,0,0,0.3); -moz-box-shadow: 0px -4px 4px rgba(0,0,0,0.3); box-shadow: 0px -4px 4px rgba(0,0,0,0.3);}
#pre-footer-container{ max-width:1200px; margin:0 auto;}
/* box-below */
.box-below {clear:both; float:left; margin-left:0; margin-top:10px; width:100%; display:block;}
.footer-image{ float:left; max-width:200px; width:200px; margin-right:10px;}
.footer-title{color:#555; font-size:20px; text-align:center;}
#main-footer {clear:both; float:left; padding:20px 10%; width:80%; display:block; background-color:#333; color:white;}
.box-footer{ width:100%; clear:both; margin-bottom:10px; float:left;}
.box-footer a{color:#C00;}
/** headroom.js animated styles **/
.slide{  -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out;}
.slide--reset{ -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0);}
.slide--up{ -webkit-transform:translateY(-100%); -ms-transform:translateY(-100%); transform:translateY(-100%);}

/**** Template-Footer ****/
#footer-frame{ height:490px;}
#footer a{color:#C00;}
#footer a:visited{color:#C00;}
#footer a:visited:hover{color:#07F;}
#footer{clear:both; width:95%; margin:0; padding:10px 2.5%; float:left; display:block; background-color:#333; color:white; text-align:center;}

/***********************************************************************/
/* Mobile Layout: 320px to 480px. Inherits style from smaller screen */
@media only screen and (min-width: 320px) {
#logo-container{ float:left;}
#box-frame{}
}
/***********************************************************************/
/* Tablet Layout: 481px to 700px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
#blackheader {height: 115px;}
.fixed{position: relative;}
.wrap {max-width: 900px;padding:0px; position:relative;}
#search-container{ clear:left; margin-top:-38px;}
#header-middle, #header-middle-es{ clear:left; margin-top:-38px;}
.gridContainer {width: 100%; margin-top:135px;}
#content {display:block;}
#slide-tabs{width:100%; max-width:820px; margin:3px auto 5px auto;}
.tab{ width:19.7%; font-size:12px;}
#footer-frame{ height:430px;}
}
/* Tablet Layout: 620px or more. Inherits styles from previous. */
@media only screen and (min-width:620px) {
#footer-frame{ height:370px;}
}
/***********************************************************************/
/* Tablet Layout: 701px to 900px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 700px) {
#cableeye-logo{display:block; float:none; width:354px; height:60px; margin:0 auto; padding-top:5px; overflow:hidden;}
#search-container{ clear:left; margin-top:-38px;}
#header-middle{ clear:left; margin-top:-38px;}
.box-below {width:48%; clear:none; margin:10px 1%; float:left; }
#main-footer {padding:20px 5%; width:90%;}
.box-footer{ width:45%; margin-right:5%; height:60px; margin-bottom:10px; clear:none; float:left;}
}
@media only screen and (min-width: 821px) {
.gridContainer {width:100%; max-width:1200px; margin:auto; margin-top:135px;}
#slide-tabs-container,#slide-tabs{ display:none;}
/**** Folder Tabs ******/
#folders{ display:block; float:none; width:821px; margin:10px auto; position:relative;}
#hr2{position:absolute; top:26px; left:0px; z-index:-1;}
.folder{ float:left;}
#folders a{background:url(../Home_Page_Art/Tab.png) no-repeat; float:left; height:32px; text-decoration:none; padding-top:5px; text-align:center; opacity:0.4; color:blue; font-family:charcoal; font-size:15px;}
#cable-tab a{width:160px; background-size:160px 30px;}
#harness-tab a{width:160px; background-size:160px 30px;}
#hipot-tab a{width:150px; background-size:150px 30px;}
#guided-tab a{width:170px; background-size:170px 30px;}
#custom-tab a{width:180px; background-size:180px 30px;}
#folders a:hover{opacity:1.0;}
#folders a:visited{color:blue;} 
#cable-tab a.active{ background:url(../Home_Page_Art/Tab-Active5.png) no-repeat; opacity:1.0; background-size:160px 40px; outline: none;}
#harness-tab a.active{ background:url(../Home_Page_Art/Tab-Active5.png) no-repeat; opacity:1.0; background-size:160px 40px; outline: none;}
#hipot-tab a.active{ background:url(../Home_Page_Art/Tab-Active5.png) no-repeat; opacity:1.0; background-size:150px 40px; outline: none;}
#guided-tab a.active{ background:url(../Home_Page_Art/Tab-Active5.png) no-repeat; opacity:1.0; background-size:170px 40px; outline: none;}
#custom-tab a.active{ background:url(../Home_Page_Art/Tab-Active5.png) no-repeat; opacity:1.0; background-size:180px 40px; outline: none;}
#content {float:none; width:821px; margin:0 auto;}
#content-iframe{width:821px;height:630px;}
#main-footer {padding:20px 5%; width:90%;}
.box-footer{ width:30%; margin-right:3%; height:60px; margin-bottom:10px; clear:none; float:left;}
}
@media only screen and (min-width: 841px) {
#footer-frame{ height:230px;}
}
/**************************************************************************/
/* Desktop Layout: 900px to 1200px. Inherits styles from: Previous Layout. */
@media only screen and (min-width: 900px) {
.wrap {max-width:1150px; padding:0px; position:relative;}
#cableeye-logo{display:block; position:absolute; left:48%; top:40px; float:none; width:354px;  height:60px; margin:0 auto; padding-top:5px; overflow:hidden;}
#header-middle{width:566px; height:35px; clear:none; float:none; margin:0 auto; padding:0px; overflow:hidden; text-align:center;}
#header-menu-image{ display:none;}
.header-frame-big{display:block;}
.header-frame-small{display:block; }
#header-intl-flags{display:block; width:65px; position:absolute; top:10px; right:10px;}
#english-flag{float:left; background-image:url(../Home_Page_Art/us_flag.png); display:block; width:30px; height:20px;}
#spanish-flag{background-image:url(../Home_Page_Art/mexican_flag.png); display:block; width:30px; height:20px; float:left; margin-left:5px;}
.tab{width:163px; font-size:15px; padding-top:10px; height:50px;}
.slide--up{ -webkit-transform:translateY(-100%); -ms-transform:translateY(-100%); transform:translateY(-100%);}
}

@media only screen and (min-width: 960px) {
#header-middle-es{width:640px; height:35px; clear:none; float:none; margin:0 auto; padding:0px; overflow:hidden; text-align:center;}
.header-frame-big-es{display:block;}
.header-frame-small-es{display:block; }
}
/**************************************************************************/
/* Desktop Layout: 1200px and up. Inherits styles from: Previous Layout. */
@media only screen and (min-width: 1201px) {
.fixed{position: fixed;}
#links_box{ width:250px; margin-left:20px; margin-right:50px; position:relative; float:left; clear:none; left:0px;}
#left-menu-bn{ display:none;}
#slide-tabs{ display:none;}
/*#slide-tabs{ float:left; clear:none; display:block; margin-left:20px;}*/
#folders{ float:left; margin-left:20px; margin-top:10px; position:relative;}
#content {float:left; width: 821px; clear:none; margin-left:20px;}
}
@media only screen and (min-width: 1400px) {
#main-footer {padding:20px 5%; width:90%;}
.box-footer{ width:22%; margin-right:3%; height:60px; margin-bottom:10px; clear:none; float:left;}
}