/********** Start RESET ***********/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url( '/theme/js/boxsizing.htc' ); -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); -webkit-overflow-scrolling: touch;} html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sup, sub, tt, var, b, u, i, center, ul, ol, li, dl, dt, dd, table, tr, th, td, thead, tbody, tfoot, caption, form, fieldset, legend, input, textarea, select, label, applet, object, iframe, audio, video, canvas, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { font-size: 100%; font-family: "Century Gothic", Arial; font-weight: inherit;font-style: inherit; line-height: auto; vertical-align: baseline; border: 0; outline: 0; padding: 0; margin: 0;} body {font-family: "Century Gothic", Arial; line-height: 1; color: #000; background-color: #fff;} article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block; } audio, canvas, video {display: inline-block; *display: inline; *zoom: 1;} audio:not([controls]) { display: none;} canvas {-ms-touch-action: double-tap-zoom;} [hidden] {display: none;} a { text-decoration: underline; color: #000;} a:hover { text-decoration: none;} em { font-style: italic;} strong {font-weight: bold;} ins {text-decoration: none;} del {text-decoration: line-through;} sup, sub {line-height: 0;} sup {vertical-align: super;} sub {vertical-align: sub;} pre {display: block; overflow: auto;} code {font-family: 'Courier New', Courier, monospace;} ul, ol {list-style: none;} table { table-layout: auto; border-collapse: separate; border-spacing: 0; empty-cells: hide;} img { vertical-align: middle; -ms-interpolation-mode: bicubic;} svg:not(:root) {overflow: hidden;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;} input, textarea { -webkit-appearance: none;} button, input, select, textarea { vertical-align: baseline; *vertical-align: middle; -webkit-border-radius: 0;} button, input { line-height: normal; *overflow: visible;} table button, table input { *overflow: auto;} button, input[type='button'], input[type='reset'], input[type='submit'] { cursor: pointer; -webkit-appearance: button; } textarea { overflow: auto; vertical-align: top;} input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-results-button, input[type='search']::-webkit-search-results-decoration {display: none;} input[type='search'] { -webkit-appearance: textfield;} input[type='radio'] { -webkit-appearance: radio;} input[type='checkbox'] { -webkit-appearance: checkbox;} input::-ms-clear {display: none;} input[type='password']::-ms-reveal {display: none;} .clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;} * html .clearfix { zoom: 1;} *:first-child+html .clearfix { zoom: 1;} .cleaner { height: 0; line-height: 0; clear: both;} /********** End RESET **********/ body { font-family: 'Noticia Text', serif; font-weight: 400; -webkit-font-smoothing: antialiased;} body, a, a:hover {color: #111;} a { -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -ms-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease;} a, a:hover { text-decoration: none;} #nav {font-family:"Century Gothic", Arial; font-size: 10px; width: 70%; font-family: 'Open Sans', sans-serif; font-weight: 400; top: 25%; float:left;} #nav > a { display: none;} #nav li { position: relative;} #nav li a { color: #fff; display: block;} #nav li a:active { background-color: #25445b!important;} #nav span {font-size: 11px;} #nav span:after {width: 0; height: 0; content: ''; vertical-align: middle; display: inline-block; position: relative; right: -0.313em; /* 5 */} /* first level drop down nav chrisstokes */ #nav > ul { height: 3.75em; background-color: #2b5e89; margin: 0 0 0 1.5%;} .dropdown-content {display: none; width: 200%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-content a {display: block; width: 100%; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598;} .dropdown-content .arrow {border-style: solid; position: absolute; left: 20%;} .bottom { border-color: transparent transparent #f9f9f9 transparent; border-width: 0px 10px 10px 10px; top: -8px;} .dropdown-fiber {display: none; width: 160%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-fiber a {display: block; width: 100%; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598;} .dropdown-fiber .arrow {border-style: solid; position: absolute; left: 30%;} .dropdown-datacom {display: none; width: 180%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-datacom a {display: block; width: 100%; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598;} .dropdown-datacom .arrow {border-style: solid; position: absolute; left: 25%;} .dropdown-racks {display: none; width: 180%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-racks a {display: block; width: 100%; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598;} .dropdown-racks .arrow {border-style: solid; position: absolute; left: 25%;} .dropdown-company {display: none; width: 140%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-company a {display: block; width: 100%; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598;} .dropdown-company .arrow {border-style: solid; position: absolute; left: 35%;} .dropdown-learning {display: none; width: 140%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-learning a {display: block; width: 100%; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598;} .dropdown-learning .arrow {border-style: solid; position: absolute; left: 29%;} .bottom { border-color: transparent transparent #f9f9f9 transparent; border-width: 0px 10px 10px 10px; top: -7px;} .span { font-size: 11px;} #nav > ul > li { font-family:"Century Gothic", Arial; font-size: 10px; width: 14.3%; height: 100%; float: left;} #nav > ul > li:hover {background-color: #25445b;} #nav > ul > li > a { height: 100%; font-size: 1.5em; line-height: 2.5em; text-align: center;} #nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {background-color: #25445b;} /* second level navigation */ #nav li ul { background-color: #f9f9f9; display: none; position: absolute; top: 100%;} #nav li:hover ul { display: block; left: 0; right: 0;} #nav li:not( :first-child ):hover ul { left: -1px;} #nav li ul a { background-color: #f9f9f9; color: #000000; font-size: 1.25em; padding: 0.75em;} #nav li ul li a:hover, #nav li ul:not( :hover ) li.active a { background-color: #e7e7e7;} article {width: 76%; height: 100%; min-height: 950px; float: right; padding-top: 0px; margin: 0 1% 1% 1%;} aside { width: 22%; height: 100%; position: absolute; min-height: 950px; float: left; margin-top: 0%; background-color: #25445b;} .header-logo {width: 25%; height: auto; padding: 10px 0 5px 10px; float: left;} .search-bar-nav {width: 21%; height: auto; padding: 5px; margin: 10px 0 0 10px; float: left; background-color: #25445b; border-radius: 20px;} .form-control-new { background-color: #f9f9f9; border: solid 1px #949598; border-radius: 20px; height: 30px; width: 70%; padding: 0 10px 0 8px; font-family:"Century Gothic", Arial; font-size: 12px; float: left;} .img-size { width: 100%; height: auto;} .img-size-contacts { width: 100%; height: auto; border-radius: 100%; border: 2px solid #999999; margin: 0 0 7% 0;} .img-size-static-labels { width: 80%; height: auto; border-radius: 20px; border: solid 2px #000000; box-shadow: 1px 1px 12px rgba(0,0,0,0.4);} .new-nav-button { width: 50px; background: none; font-family:"Century Gothic", Arial; font-size: 12px; font-weight: 600; color: #FFFFFF; border:none; float: left; padding: 5px 0 0 0%; position: relative; left: 5%;} .free-shipping { width: 25%; margin: 15px 20px 10px 10px; padding: 8px 0 8px 0; background-color: #25445b; font-family: "Century Gothic", Arial; font-size:12px; font-weight: 600; color: #f6ee2a; text-align:center; float: right;} .nav-bar {background-color: #2b5e89; width: 100%; height: auto; z-index: 4; position: fixed; border-bottom: 4px solid #000000;} .nav-bar-desktop {background-color: #2b5e89;} .my-account, .my-account:active, .my-account:visited { width: 10%; height: auto; float: right; font-family:"Century Gothic", Arial; font-size: 11px; color: #FFFFFF; text-decoration: none; text-align:center; padding: 12px 0 13px 0;} .my-account-link, .my-account-link:active, .my-account-link:visited, .my-account-link:hover { color: #ffffff; text-decoration:none; font-weight: 600;} .my-account:hover {background-color: #25445b;} .view-my-cart, .view-my-cart:active, .view-my-cart:visited { width: 10%; height: auto; float: right; font-family:"Century Gothic", Arial; font-size: 11px; color: #FFFFFF; text-decoration: none; text-align:center; padding: 12px 0 13px 0;} .contact-us-mobile { width: 0; height: 0; visibility: hidden;} .view-my-cart-link, .view-my-cart-link:visited, .view-my-cart-link:active, .view-my-cart-link:hover { color: #ffffff; text-decoration:none; font-weight: 600;} .view-my-cart:hover {background-color: #25445b;} .shop-nav { visibility:hidden; width: 0px; height: 0px; font-size: 0px;} .shop-nav-link { visibility:hidden; width: 0px; height: 0px; font-size: 0px;} .person { visibility:hidden;} .shopping-cart-icon { visibility:hidden;} .contact-us-mobile-icon { visibility:hidden;} .new-table-padding { width: 100%; margin: 0 0% 0 0%;} .left-nav-padding { width: 80%; margin: 7% 10% 0 10%;} .left-nav-header { font-size: 16px; font-family: "Century Gothic", Arial; color: #ffffff; font-weight: 600; margin: 20% 0 3% 0; padding: 0 0 3% 0; border-bottom: 2px solid #ffffff; } .left-nav-header-second { font-size: 16px; font-family: "Century Gothic", Arial; color: #ffffff; font-weight: 600; margin: 7% 0 3% 0; padding: 0 0 3% 0; border-bottom: 2px solid #ffffff; } .left-nav-links, .left-nav-links a { font-size: 14px; font-family: "Century Gothic", Arial; color: #c5c5c5; margin: 2% 0 2% 0; line-height: 13px;} .left-nav-links a:hover { font-size: 14px; font-family: "Century Gothic", Arial; color: #FFFFFF; margin: 4% 0 4% 0;} .white-seperator {position:absolute; bottom:-30px; width:100%; height:50px; background-color: #FFFFFF;} .call-us-number { background:url(https://images-ideal.datacomtools.com/images3/nav/call-now.png) center top no-repeat; width :100px; height: 37px; float: left; padding: 0 0 0 5%; margin: 12px 0 0 15px; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); border-radius: 10px;} .facebook-larger-icon { background:url(https://www.datacomtools.com/images4/nav/facebook-icon.png) top no-repeat; width: 50px; height: 50px; margin: 2% 3% 0 3%; float: left;} .details-font { font-family:"Century Gothic", Arial; font-size: 12px; line-height: 16px; padding: 0.5% 0 0.5% 0;} .search_field { font-family: "Century Gothic", Arial !important; font-size: 12px !important; background-color: #FEFEFE !important; border: 1px solid #000000!important;} .background-height-index { height: 47px; background-color: #FFFFFF; padding: 10px 0px 0px 0px; font-family: Biondi, Arial; font-weight: 600; font-size: 16px; text-transform: uppercase; margin: 3% 0 0 0;} .search-spacer { margin: 0 0 5% 0;} .arial-normal { font-size: 12px; color: #000000; font-family: "Century Gothic", Arial;} .labels-product-container { width: 100%; float: left;} /* index banner*/ .top-left-banner { background:url(https://images-ideal.datacomtools.com/images3/flukenetworks/ms-poe/ms-poe.png) center top no-repeat; width: 49.25%; height: 420px; background-size: cover; margin: 1.5% 1.5% 0 0; border: 1px solid #000000; float: left;} .top-left-banner1 { background:url(https://images-ideal.datacomtools.com/images3/flukenetworks/ms-poe/ms-poe.png) center top no-repeat; width: 49.25%; height: 420px; background-size: cover; margin: 1.5% 1.5% 0 0; border: 1px solid #000000; float: left;} .top-right-banner {background:url(https://images-ideal.datacomtools.com/images3/brady/Brady-m210/m211-ind.jpg) center top no-repeat; width: 49.25%; height: 420px; background-size: cover; margin: 1.5% 0 0 0; border: 1px solid #000000; float: left;} .bottom-left-banner { background:url(https://www.datacomtools.com/images4/nav/FASTCONNECT.gif) center top no-repeat; width: 49.25%; height: 420px; background-size: cover; margin: 1.5% 1.5% 1% 0; border: 1px solid #000000; float: left;} .bottom-right-banner {background:url(https://www.datacomtools.com/images4/nav/wire-managers.gif) center top no-repeat; width: 49.25%; height: 420px; background-size: cover; margin: 1.5% 0 1% 0; border: 1px solid #000000; float: left;} .index-banner-writing-tl { width: 100%; height: 100%; background-color: #FFFFFF; opacity: 0.9; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000; line-height: 18px; padding: 5%; animation-name: index-banner-writing-tl; animation-duration: 3s; animation-timing-function: linear;} .index-banner-writing-tr { width: 100%; height: 100%; background-color: #FFFFFF; opacity: 0.9; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000; line-height: 18px; padding: 5%; animation-name: index-banner-writing-tr; animation-delay: 3s; animation-duration: 3s; animation-timing-function: linear;} .index-banner-writing-bl { width: 100%; height: 100%; background-color: #FFFFFF; opacity: 0.9; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000; line-height: 18px; padding: 5%; animation-name: index-banner-writing-bl; animation-delay: 6s; animation-duration: 3s; animation-timing-function: linear;} .index-banner-writing-br { width: 100%; height: 100%; background-color: #FFFFFF; opacity: 0.9; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000; line-height: 18px; padding: 5%; animation-name: index-banner-writing-br; animation-delay: 9s; animation-duration: 3s; animation-timing-function: linear;} @keyframes index-banner-writing-tl {0% {opacity: 0;} 25% { opacity: 0.3;} 50% { opacity: 0.5;} 75% { opacity: 0.7;} 100% { opacity: 0.9;}} @keyframes index-banner-writing-tr {0% {opacity: 0;} 25% { opacity: 0.3;} 50% { opacity: 0.5;} 75% { opacity: 0.7;} 100% { opacity: 0.9;}} @keyframes index-banner-writing-bl {0% {opacity: 0;} 25% { opacity: 0.3;} 50% { opacity: 0.5;} 75% { opacity: 0.7;} 100% { opacity: 0.9;}} @keyframes index-banner-writing-br {0% {opacity: 0;} 25% { opacity: 0.3;} 50% { opacity: 0.5;} 75% { opacity: 0.7;} 100% { opacity: 0.9;}} .list-style { padding: 5%;} .list-style li { list-style: disc;} .header-width-index { width: 100%; padding: 3% 0 5% 0; float: none; font-family:"Century Gothic", Arial; font-size: 24px; font-weight: 600; color: #000000;} .header-width-index-link { font-family:"Century Gothic", Arial; font-size: 24px; font-weight: 600; color: #000000;} .header-logo-images-tr { width: 28%; height: auto;} .header-link-box-top { width: 30%; height: 25px; background-color: #2b5e89; font-family:"Century Gothic", Arial; font-size: 12px; text-align: center; display: block; color: #FFFFFF; padding: 5px 0 0 0; margin: 1% 0 0 0; border-radius: 20px;} .header-link-box-top:hover { background-color: #25445b; transition: 1s ease;} .header-link-box-index { width: 30%; height: 25px; background-color: #2b5e89; font-family:"Century Gothic", Arial; font-size: 12px; text-align: center; display: block; color: #FFFFFF; padding: 5px 0 0 0; margin: 5% 0 0 0; border-radius: 20px;} .header-link-box-index:hover { background-color: #25445b; transition: 1s ease;} /* page content */ .grey-background { background-color: #DFDFDF; padding: 4% 0 4% 0;} .product-image img {width: 100%; height: auto;} .order-status-box { font-size: 14px; font-family: "Century Gothic", Arial; margin: 4% 0 0 0;} .order-status-box input[type='submit'] { border: 1px solid #999999; margin: 5% 0 2% 4%; background-color: #666666; color: #FFFFFF; padding: 4%; border-radius: 15px;} .order-status-box input[type='submit']:hover { background-color: #25445b; transition: 2s ease;} .order-status-box input { border: 1px solid #999999; margin: 2% 0 2% 4%; padding: 2%;} .order-status-box td p { padding: 0 12% 10% 12%;} #reorder_prompt { font-family: "Century Gothic", Arial; font-size: 14px;} .order-status-box td { padding: 1.5%;} .h1-height { font-family:"Century Gothic", Arial!important; font-size: 24px!important; font-weight: 600; color: #000000!important; margin: 4.5% 0 0 0;} .h1-height-404 { font-family:"Century Gothic", Arial!important; font-size: 24px!important; font-weight: 600; color: #000000!important; margin: 2% 0 0 0;} #div-tag-testing span {} .more-info-h2 {font-family: "Century Gothic", Arial; font-size: 18px; color: #2b5e89; margin: 0 0 3% 0; float: left;} .more-info-sku { font-family: "Century Gothic", Arial; font-size: 18px; font-weight: 600; color: #2b5e89; margin: 0 1% 3% 0; float: left;} #product-quantity {text-align:left;} .fb-like { width: 100%; float: left;} .add { height: 35px; padding: 1% 5% 1% 5%; font-family:"Century Gothic", Arial; color: #FFFFFF; font-size: 14px; background-color: #009900; margin: 1.5% 0 1.5% 0; border-radius: 20px; float: left;}.add:hover { background-color: #2b5e89; transition: 2s ease;} .view-cart { height: 35px; padding: 2% 5% 1% 5%; font-family:"Century Gothic", Arial; color: #FFFFFF; font-size: 14px; background-color: #999999; margin: 1.5% 0 1.5% 1%; border-radius: 20px; float: left;}.view-cart:hover { background-color: #2b5e89; color: #ffffff; transition: 2s ease;} .jqzoom {text-decoration:none; float:left; display: block; width: 100%; border-radius: 20px!important; overflow: hidden!important; box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.4)!important;} ul#thumblist li a {display:inline-block; width: 100%!important; min-width: 100%!important; max-width: 100%!important; min-height: 100%!important; max-height: 100%!important; height: 100%!important; border: 1px solid #EFEFEF; border-radius: 10px!important; overflow: hidden!important; background: #FFFFFF; margin: 10% 0 0 0!important; padding: 0px; vertical-align: middle;} .more-info-tabs { width: 100%; float: left;} #mi-zoommain { width: 100%!important; height: auto!important; border-color: #666666!important;} .more-info-header { width: 100%; float: none; font-family: "Century Gothic", Arial!important; font-size: 16px!important; color: #000000!important; font-weight: 600; margin: 2.5% 0 0 0; padding: 0 0 4% 0;} .more-info-price { width: 100%; font-family:"Century Gothic", Arial; font-size: 24px; color: #993300; font-weight: 600; padding: 0 0 3% 0; margin: 0 0 2% 0; border-bottom: 1px solid #000000; float: left;} .button-contact-us, .button-contact-us:active, .button-contact-us:visited { width: 100px; background-color: #F4A82B; height: 35px; transition: 0.3s ease; padding: 0px 0 0 0; margin: 0 0 0 0; border: none; font-family:"Century Gothic", Arial; font-size: 14px; color: #FFFFFF; border-radius: 20px;} .button-contact-us:hover { background-color: #3ca9a8;} .typing-bar-text-message { width: 100%; float: none; font-family:"Century Gothic", Arial; font-size: 14px; color: #999; margin: 0 0 3% 0;} .content-form-message {width: 100%; height: 160px; max-height: auto; max-width: 100%; min-width: 100%; border: 1px solid #CCC; margin: 0 0 4% 0; font-family:"Century Gothic", Arial; font-size: 14px; color: #999999; padding: 3%;} .typing-bar-text { width: 20%; height: 30px; min-width: 20%; float: left; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000; margin: 0 2% 3% 0; padding: 3% 0 0 0;} .content-form { width: 78%; height: 30px; background-color: #FFFFFF; border-top:none; border: 1px solid #CCC; float: left; margin: 0 0 3% 0; font-family:"Century Gothic", Arial; font-size: 14px; color: #999; padding: 0 2% 0 2%;} .left-side-contacts { width: 60%; height: auto; float: left; padding: 0 5% 0 3%; margin: 4% 0 5% 0; border-right: 1px dashed #000000;} .right-side-contacts { width: 40%; height: auto; float: left; padding: 0 5% 0 5%; margin: 4% 0 0 0; text-align:center;} .more-info-right { width: 60%; height: auto; float: left; padding: 0 5% 0 3%; margin: 4% 0 5% 0;} .more-info-left { width: 40%; height: auto; float: left; padding: 0 5% 0 5%; margin: 4% 0 0 0; text-align:center;} .free-shipping-more-info { width: 100%; float: left; font-family:"Century Gothic", Arial; font-size: 16px; text-decoration: underline; color: #000000; margin: 1% 0 4% 0;} .page-link-padding { padding: 2% 0 0 0; width: 100%; float: none;} .new-one, .new-two, .new-three, .new-four { width: 24%; height: auto; float: left; margin: 0 1% 2% 0;} .new-one-final-bottom, .new-two-final-bottom, .new-three-final-bottom, .new-four-final-bottom {width: 24%; height: auto; float: left; margin: 0 1% 0 0;} .new-one-final, .new-two-final, .new-three-final, .new-four-final { width: 24%; height: auto; float: left; margin: 6% 1% 2% 0;} .new-four-bottom, .new-one-bottom, .new-two-bottom, .new-three-bottom { width: 24%; height: auto; float: left; margin: 0 1% 5% 0;} .new-img-size { min-width: 100%; height: auto;} .new-img-size:hover { transform: scale(1.1); transition: 0.5s ease-in;} .one-labels { width: 15%; height: auto; float: left; padding: 10px 0 0 0;} .two-labels { width: 48%; height: auto; float: left; padding: 10px 5% 0 0;} .three-labels { width: 15%; height: auto; float: left; padding: 10px 0 0 0;} .four-labels { width: 8%; height: auto; float: left; padding: 10px 0 0 0;} .labels-graphic { width: 12%; height: auto; float: left; padding: 10px 5% 0 0;} .custom-logo-sizes {width: 25%; padding: 1% 0 3% 2%; float: none;} .divider { width: 99%; float: left; margin: 0 0 2% 0; border-top: 1px solid #000000;} .divider-no-line { width: 99%; float: left; margin: 0 0 2% 0;} .divider-no-line-bottom { width: 99%; float: left; margin: 0 0 0 0;} .prevnext { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #949598;} .currentpage { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600;} .product {margin: 1% 0 1% 0!important;} .static-header { width: 100%; float: left; margin: 2% 0 2% 0; font-family: "Century Gothic", Arial; font-size: 12px; color: #FF0000;} .labels-static-padding { width: 100%; height: auto; margin: 4% 0 0 0;} .labels-header { width: 100%; font-family: "Century Gothic", Arial; float: left; font-size: 14px; font-weight: 600; color: #000000; margin: 0 0 2% 0;} .labels-header-static { width: 100%; font-family: "Century Gothic", Arial; float: left; font-size: 14px; font-weight: 600; color: #000000; margin: 5% 0 2% 0;} .labels-sub-header {width: 100%; font-family: "Century Gothic", Arial; float: left; font-size: 12px; font-weight: 600; color: #000000; margin: 0 0 3% 0;} .labels-body {width: 100%; font-family: "Century Gothic", Arial; float: left; font-size: 12px; color: #000000; margin: 0 0 5% 0;} .li-label-styles { font-family: "Century Gothic", Arial; font-size: 12px; list-style:disc;} .ul-label-styles { margin: 2% 0 0 0;} .new-img-size-labels { max-width: 50%; height: auto; margin: 0 0 0 0;} .product { border-radius: 15px!important; border-color: #949598!important;} #contact-font li { text-indent: -1em; padding-left: 0;} #contact-font li:before { content: "•"; color: red; padding: 0 5px 0 0;} /* banner content */ .banner-position { margin: 3.5% 0 0 0; width: 100%; height: auto;} .banner-writing { width: 40%; height: auto; background: #FFFFFF; opacity: 1; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598; position:relative; margin: 0% 0 0 2%; padding: 2% 2% 1% 2%; border-radius: 10px; box-shadow: 4px 4px 7px 0px rgba(0,0,0,0.7); animation-name: banner-writing; animation-duration: 3s; animation-timing-function: linear;} .banner-writing-cable-certifiers{ width: 40%; height: auto; background: #FFFFFF; opacity: 1; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598; position:relative; margin: 0% 0 0 2%; padding: 2% 2% 2% 2%; border-radius: 10px; box-shadow: 4px 4px 7px 0px rgba(0,0,0,0.7); animation-name: banner-writing; animation-duration: 3s; animation-timing-function: linear;} .banner-writing-cable-testers{ width: 50%; height: auto; background: #FFFFFF; opacity: 1; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598; position:relative; margin: 0% 0 0 2%; padding: 2% 2% 2% 2%; border-radius: 10px; box-shadow: 4px 4px 7px 0px rgba(0,0,0,0.7); animation-name: banner-writing; animation-duration: 3s; animation-timing-function: linear;} @keyframes banner-writing {0% {opacity: 0;} 25% { opacity: 0.3;} 50% { opacity: 0.5;} 75% { opacity: 0.8;} 100% { opacity: 1;}} .header-link-box { width: 30%; height: 25px; background-color: #2b5e89; font-family:"Century Gothic", Arial; font-size: 12px; text-align: center; display: block; color: #FFFFFF; padding: 5px 0 0 0; margin: 7% 0 0 0; border-radius: 20px;} .header-link-box:hover { background-color: #25445b; transition: 1s ease;} .header-logo-images { width: 55%; height: auto;} .header-logo-images-cable-certifiers { width: 25%; height: auto;} .header-width { width: 100%; padding: 0 0 5% 0; float: none;} .header-width-cable-testers { width: 80%; padding: 0 0 2% 0; float: none;} .header-width-cutters { width: 80%; margin: 0 0 5% 0; float: none;} .header-width-blocks { width: 65%; padding: 0 0 4% 0; float: none;} .header-width-coaxial { width: 50%; padding: 0 0 2% 0; float: none;} /* banners */ .about-us-banner { width: 100%; height: 500px; background:url(https://www.datacomtools.com/images4/nav/about-us.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89;} .contact-us-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/contact-us.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89; animation-name: about-us-banner; animation-duration: 3s; animation-timing-function: linear;} .order-status-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/order-status.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: -1.8% 0 0 0; border: 2px solid #2b5e89; animation-name: about-us-banner; animation-duration: 3s; animation-timing-function: linear;} .fluke-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/butt-sets.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .cable-certifiers-new-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/cable-certifiers.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .cable-testers-new-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/cable-testers.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .coaxial-new-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/coaxial-products.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .blocks-new-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/blocks.png) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .wire-managers-new-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/wire-managers.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .fiber-products-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/fiber-products.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .fusion-splicers-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/fusion-splicers.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .crimp-tools-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/crimp-tools.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .cutters-scissors-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/cutters-scissors.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .fishing-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/fishing-pulling.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .holster-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/holster-kits.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .hand-tools-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/hand-tools.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .punchdown-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/punchdown-tools.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .test-adapters-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/test-adapters.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .tone-probe-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/tone-and-probe.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .tool-kits-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/tool-kits.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .wire-strippers-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/wire-strippers.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .wire-tools-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/wire-wrap-tools.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .racks-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/racks-shelves.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .connectivity-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/connectivity.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .printers-banner-new { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/printers.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .fiber-testing-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/fiber-testing.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .fiber-connectivity-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/fiber-connectivity.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .fiber-cleave-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/fiber-cleave.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .cable-assemblies-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/cable-assemblies.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .multimeter-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/multimeters.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .tool-bags-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/tool-bags.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .download-banner { width: 100%; height: 400px; background:url(https://www.datacomtools.com/images4/nav/catalog.jpg) center no-repeat; background-size: cover; padding: 2% 0 0 0; border: 2px solid #2b5e89;} .img-size-banner { min-width: 100%; height: auto;} /* Header tags */ .banner-title { width: 100%; float: none; font-family: "Century Gothic", Arial!important; font-size: 18px!important; color: #949598!important; font-weight: 600; border-bottom: 1px solid #949598; margin: 2% 0 0% 0; padding: 0 0 1% 0;} .banner-title-404 { width: 100%; float: none; font-family: "Century Gothic", Arial!important; font-size: 18px!important; color: !important; font-weight: 600; margin: 3% 0 0% 0; padding: 0 0 0 0;} .banner-title-header { width: 100%; float: none; font-family: "Century Gothic", Arial!important; font-size: 14px!important; color: #949598!important; font-weight: 600; margin: 2% 0 2% 0; padding: 2% 0 1% 0;} .banner-title-no-banner { width: 100%; float: none; font-family: "Century Gothic", Arial!important; font-size: 18px!important; color: #949598!important; font-weight: 600; border-bottom: 1px solid #949598; margin: 2.5% 0 2% 0; padding: 0 0 1% 0;} .banner-title-about-us { width: 99%; float: none; font-family: "Century Gothic", Arial!important; font-size: 18px!important; color: #949598!important; font-weight: 600; border-bottom: 1px solid #949598; margin: 2% 0 0 1%; padding: 0 0 1% 0;} .list-style { padding: 5%;} .banner-title-contact-us { width: 99%; float: none; font-family: "Century Gothic", Arial!important; font-size: 16px!important; color: #000000!important; font-weight: 600; margin: 0 0 5% 0; padding: 0 0 1% 0;} .list-style { padding: 5%;} .banner-title-no-banner-labels { width: 100%; float: none; font-family: "Century Gothic", Arial!important; font-size: 18px!important; color: #949598!important; font-weight: 600; border-bottom: 1px solid #949598; margin: 4.5% 0 2% 0; padding: 0 0 1% 0;} .list-style { padding: 5%;} .list-style li { list-style: disc; line-height: 16px;} .header-link-box-cable-certifiers { width: 30%; height: 25px; background-color: #2b5e89; font-family:"Century Gothic", Arial; font-size: 12px; text-align: center; display: block; color: #FFFFFF; padding: 5px 0 0 0; margin: 2% 0 0 0; border-radius: 20px;} .header-link-box-cable-certifiers:hover { background-color: #25445b; transition: 1s ease;} .banner-title-printers { width: 100%; float: none; font-family: "Century Gothic", Arial!important; font-size: 18px!important; color: #949598!important; font-weight: 600; border-bottom: 1px solid #949598; margin: 2% 0 2% 0; padding: 0 0 1% 0;} /* footer content */ #footer-bottom-shopsite {position:absolute; bottom:-90px; width:100%; height:100px; background-color: #c5c5c5; border-top: 4px solid #000000;} .small-icon-space { width: 35px; height: 35px; margin: 1% 0% 0 2%; float: left;} .small-icon-space-after { width: 35px; height: 35px; margin: 1% 0% 0 1%; float: left;} .paypal-logo {margin: 1.6% 0% 0 1%; float: left;} .geotrust-logo {margin: 1.75% 0% 0 1%; float: left;} .google-translate {margin: 1.75% 0% 0 1%; float: left;} .credit-cards-icon {margin: 10px 0% 0 2%; float: left;} .img-opacity { opacity: 1;} .img-opacity:hover { opacity: 0.5; transition: 2s all ease;} .icon-border {width: 100%; visibility:hidden;} .logos-cards {float: left; width: 200px; margin: .25% 0 0 2%;} .logo-footer { float: none; margin: 3% 0 5% 0; height: 30px;} .credit-card-footer { float: none; padding: 5px 0 0 0%;} /* ajax */ .modal-open {overflow: hidden;} div#cart-popup, div#giftModal, div#contactModal {background: #ffffff none repeat scroll 0 0; border-radius: 25px; border: solid 4px; border-color: #999999; bottom: auto; margin: auto; max-width: 500px; top: 5%; width: 90%; text-align: left;} .modal-open .modal {overflow-x: hidden; overflow-y: auto;} .fade.in {opacity: 0.5;} .modal-backdrop.fade.in {opacity: 0.8;} .modal {bottom: 0; display: none; left: 0; outline: 0 none; overflow: hidden; position: fixed; right: 0; top: 0; z-index: 1050;} .fade {opacity: 0; transition: opacity 0.15s linear 0s;} .modal-header {border-bottom: 1px solid #e5e5e5; min-height: 16.43px; padding: 15px;} .modal-header .close {margin-top: -2px;} span#cart-popup-prod-price {float: right; color: #993300; padding: 0 2% 0 0; font-family: "Century Gothic", Arial; font-size: 14px; font-weight: bold; margin: 3% 0 0 0;} button.close {background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 0 none; cursor: pointer; padding: 0;} .close {color: #000; float: right; font-size: 21px; font-weight: 700; line-height: 1; opacity: 0.2; text-shadow: 0 1px 0 #fff;} .modal-title {line-height: 1.42857; margin: 0; padding: 0 0 0 2%; font-family: "Century Gothic", Arial; font-weight: 600; color: #000000; font-size: 18px; } .modal-body {padding: 15px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; position: relative;} div#messages {clear: both; padding: 0; text-align: center;} div#messages > table, div#messages > div {margin-bottom: 15px !important;} div#cart-popup-prod-img { clear: none; display: inline-block; float: left; text-align: center; width: 50%; margin: 0 0 3% 0;} span#cart-popup-prod-name { font-family:"Century Gothic", Arial; font-size: 14px; color: #000000;} span#cart-popup-prod-quantity {font-family:"Century Gothic", Arial; font-size: 14px; color: #666666; margin: 3% 0 0 0;} div#cart-popup-prod-img img {max-width: 100%; height: auto;} div#cart-popup-prod-info {clear: none; display: inline-block; float: right; width: 50%; padding: 0 2% 0 2%;} div#cart-popup-prod-info > span {display: block;} span#cart-popup-name-price {clear: both; display: block; text-align: left;} div#cart-popup-prod-info > span#cart-popup-prod-sku {font-size: 14px; font-weight: bold; font-family:"Century Gothic", Arial; color: #2b5e89; margin: 3% 0 0 0;} .text-muted {color: #777;} .modal-footer { display: inline-block; width: 100%; border-top: 1px solid #999999; padding: 20px; text-align: right;} div#cart-popup-totals {padding: 0 2px 15px 0;} div#cart-popup-totals {text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold;} span#cart-popup-total-quantity {clear: none; display: inline-block; padding-right: 4%; font-weight: bold; font-family:"Century Gothic", Arial; color: #666666;} .modal-backdrop.in {opacity: 0.5;} .modal-backdrop.fade {opacity: 0;} .fade.in {opacity: 1;} .modal-backdrop {background-color: #000; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 1040;} .fade {opacity: 0; transition: opacity 0.15s linear 0s;} a.btn, a.btn:link, a.btn:visited, a.btn:active, button {background: #c4e2fb; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color: #000000; vertical-align: bottom; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none;} .button {padding: 4px, 10px;} a. {color: #FFFFFF !important;} .view-button2 { background-color: #999999; font-family: "Century Gothic", Arial; font-size: 14px; color:#FFFFFF; padding: 2% 5% 2% 5%; height: 35px; margin: 0 0 0 2%; transition:all 1s .2s; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; -khtml-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px; float: right;} .view-button2:hover {background-color: #2b5e89; color: #ffffff;} .shopping-button { background-color: #009900; font-family: "Century Gothic", Arial; font-size: 14px; color:#FFFFFF; height: 35px; margin: 0 0 0 1%; padding: 1.2% 5% 2% 5%; transition:all 1s .2s; border: none; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; -khtml-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px;} .shopping-button:hover {background-color: #2b5e89; color:#FFFFFF;} .total { font-family: "Century Gothic", Arial; font-size: 24px; font-weight: 600; color: #993300;} .more-info-hidden { width: 0; height: 0; font-family: "Century Gothic", Arial; font-size: 0; visibility:hidden;} .more-info-hidden img { width: 0; height: 0; visibility:hidden;} /* tabs */ .tabContainer {margin: 0px 0px 0px 0px; padding: 0px;} .tabs {height: 40px; margin-bottom: 2px;} .tabs > ul {list-style: none; padding: 0px; max-height: 40px;} .tabs > ul > li {margin: 0px 0px 0px 0px; padding: 0px 5px; font-size: 90%; color: #888; float: left; line-height: 40px; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border: 1px solid #000000; border-top-left-radius:8px; border-top-right-radius: 8px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background: #CCCCCC; background: -moz-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#CCCCCC));} .tabs > ul > li.tabActiveHeader {background: #FFFFFF; font-size: 12px; font-family: Arial, Helvetica, sans-serif; border-bottom: 1px solid #FFFFFF; cursor: pointer; color: #000000; position: relative; z-index: 3;} .tabscontent {-moz-border-radius: 4px; -webkit-border-top-right-radius: 8px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; border-radius: 0px 8px 8px 8px; border: 1px solid #000000; font-size: 12px; background: #FFFFFF; padding: 10px 16px 20px 16px; margin: 0px; font-family: "Century Gothic", Arial; line-height: 16px;} .tabs-moreinfo {height: 40px; margin-bottom: 1px;} /* responsive stuff */ .about-us-writing { width: 98%; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598; margin: 2% 0 0 1%; line-height: 16px;} .font { color:#000000; font-size: 12px; font-family: "Century Gothic", Arial; line-height: 16px;} .contacts-font {color:#000000; font-size: 14px; font-family: "Century Gothic", Arial; line-height: 20px;} .contacts-font-bold {color:#000000; width: 100%; font-size: 14px; font-family: "Century Gothic", Arial; line-height: 20px; font-weight: 600;} .contacts-title {color:#000000; font-size: 20px; font-family: "Century Gothic", Arial; font-weight: 600; padding: 0 0 4% 0; text-decoration: underline;} .contacts-links {color:#999999; font-size: 14px; font-family: "Century Gothic", Arial; line-height: 20px; font-weight: 600;} .contacts-links:hover { color: #000000; transition: 1s ease;} .font-page-links {color:#000000; font-size: 14px; font-family: "Century Gothic", Arial;} .font-page-links:hover { color: #949598; transition: 1s ease;} .font-tabs {color:#000000; font-size: 12px; font-family: "Century Gothic", Arial; margin: 0 0 -1px 0;} .font-normal-bold { color:#000000; font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; margin: 3% 0 0 0;} .font-normal-red { color:#000000; font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #FF0000;} .font-bold { color:#000000; font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } .font-bold-larger { color:#000000; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;} .font-bold-white { color:#ffffff; font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } .font-small { color:#000000; font-size: 10px; font-family: Arial, Helvetica, sans-serif; } .font-really-small { color:#000000; font-size: 8px; font-family: Arial, Helvetica, sans-serif; } .font-small-white { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; } .shopping-cart-border { font-size: 12px; font-family: Arial, Helvetica, sans-serif; border: 1px; border-color: #000000; background-color: #EAEAEA;} .font-white { color:#FFFFFF; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } .hidden {display: none; white-space: nowrap;} #tabContainer { float: left; min-width: 98%; margin: 4% 0 0 0; padding: 0px; margin-left: 10px; margin-right: 10px;} #tabs {height: 39px;} #tabs > ul {list-style: none; padding: 0px; max-height: 40px;} #tabs > ul > li {margin: 0px 0px 0px 0px; padding: 0 4% 0 4%; font-size: 14px; color: #000000; float: left; line-height: 40px; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer;} #tabs > ul > li.tabActiveHeader {background: #25445b; font-size: 14px; font-family: "Century Gothic", Arial; cursor: pointer; color: #FFFFFF; position: relative;} #tabscontent {width: 98%; height: auto; border-top: 1px solid #000000; font-size: 12px; background: #FFFFFF; padding: 2% 16px 20px 16px; margin: 0px; font-size: 14px; font-family: "Century Gothic", Arial; float: left;} #container-shopsite {min-height:100%; position:relative;} .in-stock { height: 35px; padding: 1.5% 5% 0 5%; margin: 1.5% 0 0 2%; font-size: 18px; background-color: #FF9900; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; text-transform: capitalize; border-radius: 20px; float: left;} .view-cart-new {float:left; position:relative; margin: -46px 0 0 130px;} .label-borders { border: solid 1px #CCCCCC; padding: 20px; margin-bottom: 15px; border-radius: 20px; } .page-text-spacing { margin-bottom: 20px; width: 100%; padding-left: 10px;} .font-blue { font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #000000;} .font-red { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#840003;} .padding-email { margin-top: 20px; margin-bottom: 20px; border: solid 1px #000000;} .inside-padding-email { margin-bottom: 20px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px;} #background-email { background: #FFFFFF; background: -webkit-linear-gradient(-90deg, #1e2d5c, #375681); background: -o-linear-gradient(-90deg, #1e2d5c, #375681); background: -moz-linear-gradient(-90deg, #1e2d5c, #375681); background: linear-gradient(-90deg, #1e2d5c, #375681); height: 110px;} #datacom-logo-background { background: url(/images4/emailer/BMP21-Plus/Datacomtools-Final-Logo-whi.png) no-repeat right; height: 110px; margin-right: 50px;} #people-logo-background { background: url(https://www.datacomtools.com/images4/emailer/BMP21-Plus/people.png) no-repeat left bottom; height: 110px; margin-left: 20px;} .left-nav-font-light {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF;} .left-nav-font-light:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF;} .left-nav-font {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600; color: #FFFFFF; text-transform: uppercase!important;} .left-nav-font:hover {font-family: Arial, Helvetica, sans-serif; font-weight: 600; font-size: 12px; color: #FFFFFF;} .green-rollover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; background-color: #258842; width: 100%; padding-top: 7px; Padding-bottom: 7px; text-transform: uppercase;} .green-rollover:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; background-color: #8fd187;} #map-image { background: url(https://images-ideal.datacomtools.com/images3/misc/fed-ex-map.jpg) no-repeat left top; height: 400px; width: 546px;} .image-border {border: 1px solid #000000;} .font-bold-uppercase { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-transform: uppercase; font-weight: 600; border-bottom: solid 1px #000000;} .zoomThumbActive { border: solid 1px !important; color: #000000 !important;} .jqzoom {border: solid 1px !important; color: #000000 !important; margin-bottom: -10px !important; margin-top: 10px !important;} #mi-zoomthumbs {margin-top: 0px!important; width: 257px; padding: 0px!important;} .bg-img { width: 100%; height: auto; position: absolute; background-position: center;} #bg-img { width: 100%; height: auto;} .bg-img img { width: 100%; height: auto; background-position: center;} .bg-img2 { width: 180px; height: 180px; position: absolute; background-position: center;} .bg-img, .text-over {transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease;-o-transition: all .2s ease; -ms-transition: all .2s ease;} .wrap-img { width: 99%; height: auto; float: left; cursor: pointer; border: 1px solid #949598; margin: 0 0 5% 0; overflow: hidden;} .wrap-img img { width: 100%; height: auto; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; transition: all 0.5s ease-in;} .wrap-img img:hover { transform: scale(1.1);} .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both;} #links-wrapper { width: 100%;} /* shopsite stuff */ h1, h2, h3, h4, h5, h6 {margin: 0px; padding: 0px 0px;} h3, h4, h6 {font-weight: normal;} h1 {font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-bottom: 10px;} h2 {font-size: 12px; font-weight: bold;} h3 {font-size: 12px;} h4 {font-size: 12px;} h5 {font-size: 12px;} h6 {font-size: 12px;} p {line-height: 160%; padding: 4px 0px 16px 0px; margin: 0px;} h1 small, td.addr_foot, span.showbasket {opacity: 0.6; filter: opacity(60); padding-left: 10px; font-family: Arial, Helvetica, sans-serif} .red {color: red;} .green {color: green;} div.single {clear: both; margin: 0px; padding-left: 0px; padding-right: 0px;} div.half {width: 49%; float: left; clear: none; padding-left: 0px; padding-right: 0px; margin: 0px 0.9% 0px 0px;} div.borders div.half {width: 46%;} div.third {width: 33%; float: left; clear: none; padding-left: 0px; padding-right: 0px; margin: 0px 0.3% 0px 0px;} div.borders div.third {width: 32%;} div.fourth {width: 24%; float: left; clear: none; padding-left: 0px; padding-right: 0px; margin: 0px 0.9% 0px 0px;} div.borders div.fourth {width: 21%;} div.fifth {width: 19%; float: left; clear: none; padding-left: 0px; padding-right: 0px; margin: 0px 0.9% 0px 0px;} div.borders div.fifth {width: 16%;} div.borders div.product, div.borders div.link {border: 1px solid #000000; margin: 0px 0.5% 10px 0.5%; padding: 0px 1% 10px 1%;} div.link {padding-bottom: 20px;} div.product-col-div, div.link-col-div {padding: 0px; margin: 0px; clear: both; max-height: 1px; height: 0px;} .link span, .link a, .product span, .product a {text-align: center;} .rightOff {display: block; text-align: right;} .leftOff {display: block; text-align: left;} div.product .centerOff, div.product .centerOn, div.product .CenterOff, div.product .CenterOn {display: block; text-align: center;} .leftOn {display: inline-block; max-width: 50%; float: left;} .rightOn {display: inline-block; max-width: 50%; float: right; padding: 0px 0px 10px 14px;} .product-quantity { width: 100%; display: block; padding: 1% 0 0 0; margin: 0 0 2% 0; color: #000000; font-weight: 600; font-family:"Century Gothic", Arial; font-size: 14px; float: left;} #product-quantity input[type='text'] { font-family:"Century Gothic", Arial; font-size: 14px; border: 1px solid #999999; padding: 1%; text-align: center; margin: 0 0 0 2%; border-radius: 10px; font-weight: normal;} @media only screen and ( max-width: 62.5em ) /* 1000 */ { } @media only screen and ( max-width: 800px ) { html { font-size: 75%; /* 12 */ } .order-status-box { width: 95%; padding: 0 0 0 3%; font-size: 14px; font-family: "Century Gothic", Arial; margin: 4% 0 0 0;} .person { background:url(https://www.datacomtools.com/images4/nav/person.jpg) no-repeat; width: 40px; height: 40px; visibility:visible; border: 1px solid #25445b; border-radius: 100%; margin: 0 0 6% 16%;} .contact-us-mobile-icon { background:url(https://www.datacomtools.com/images4/nav/phone.jpg) no-repeat; width: 40px; height: 40px; visibility:visible; margin: 0 0 6% 15%;} .shopping-cart-icon { background:url(https://www.datacomtools.com/images4/nav/shopping-cart.jpg) no-repeat; width: 40px; height: 40px; visibility:visible; margin: 0 0 6% 16%;} /* page context */ .fb-like { padding: 0 34% 3% 34%;} .sku-spacing { padding: 0 30% 0 30%;} .add { height: 50px; padding: 5% 10% 5% 10%; font-family:"Century Gothic", Arial; color: #FFFFFF; font-size: 14px; background-color: #009900; margin: 1.5% 0 6% 0; border-radius: 20px; float: left;}.add:hover { background-color: #2b5e89; transition: 2s ease;} .view-cart { height: 50px; padding: 7% 10% 3% 10%; font-family:"Century Gothic", Arial; color: #FFFFFF; font-size: 14px; background-color: #000000; margin: 1.5% 0 6% 4%; border-radius: 20px; float: left;}.view-cart:hover { background-color: #2b5e89; color: #ffffff; transition: 2s ease;} .button-spacing { padding: 0 9% 0 9%;} #product-quantity {text-align:center;} .free-shipping-more-info { width: 100%; float: left; font-family:"Century Gothic", Arial; font-size: 18px; text-decoration: underline; color: #000000; margin: 3% 0 5% 0; text-align:center; line-height: 24px;} .more-info-header { width: 100%; float: none; font-family: "Century Gothic", Arial!important; font-size: 16px!important; color: #000000!important; text-align:center!important; font-weight: 600; margin: 2.5% 0 3% 0; padding: 0 0 1% 0;} .more-info-h2 { width: 100%; font-family: "Century Gothic", Arial; font-size: 18px; color: #2b5e89; margin: 6% 0 0 0; float: left; text-align:center;} .more-info-sku { width: 100%; font-family: "Century Gothic", Arial; font-size: 18px; font-weight: 600; color: #2b5e89; margin: 0 0 0 0; float: left; text-align: center; padding: 0 0 0 0;} .more-info-price { font-family:"Century Gothic", Arial; font-size: 26px; color: #993300; font-weight: 600; padding: 4% 0 7% 0; margin: 0 0 3% 0; border-bottom: 2px solid #CCCCCC; text-align: center;} .more-info-right { width: 98%; height: auto; float: left; padding: 0 5% 0 3%; margin: 4% 0 5% 0;} .more-info-left { width: 98%; height: auto; float: left; padding: 0 3% 0 3%; margin: 11% 0 4% 0; text-align:center;} .policies-one { width: 90%; float: left; margin: 0 0 0 6%; padding: 0 0 0 0;} .policies-two { width: 90%; float: left; margin: -5% 0 0 6%;} .left-side-contacts { width: 98%; height: auto; float: left; padding: 0 5% 0 5%; margin: 9% 0 9% 0; border-right: 0px dashed #000000;} .right-side-contacts { width: 98%; height: auto; float: right; padding: 0 5% 0 5%; margin: 4% 0 0 0; text-align:center;} .typing-bar-text-message { width: 100%; float: none; font-family:"Century Gothic", Arial; font-size: 14px; color: #999; margin: 0 0 3% 0;} .content-form-message{ width: 100%; height: 160px; max-height: auto; max-width: 100%; min-width: 100%; border: 1px solid #CCC; margin: 0 0 4% 0; font-family:"Century Gothic", Arial; font-size: 14px; color: #999999; padding: 3%;} .typing-bar-text { width: 98%; height: 30px; min-width: 20%; float: left; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000; margin: 0 2% 3% 0; padding: 3% 0 0 0;} .content-form { width: 98%; height: 30px; background-color: #FFFFFF; border-top:none; border: 1px solid #CCC; float: left; margin: 0 0 3% 0; font-family:"Century Gothic", Arial; font-size: 14px; color: #999; padding: 0 2% 0 2%;} .button-contact-us, .button-contact-us:active, .button-contact-us:visited { width: 100px; background-color: #F4A82B; height: 35px; transition: 0.3s ease; padding: 0 0 0 0; margin: 5% 35% 5% 35%; border: none; font-family:"Century Gothic", Arial; font-size: 14px; color: #FFFFFF; border-radius: 20px;} .button-contact-us:hover { background-color: #3ca9a8;} .banner-title-contact-us { width: 99%; float: none; font-family: "Century Gothic", Arial!important; font-size: 16px!important; color: #000000!important; font-weight: 600; margin: 7% 0 5% 0; padding: 0 0 1% 0;} .new-one, .new-two, .new-three, .new-four { width: 99%; height: auto; float: none; margin: 0 0 7% 0;} .new-one-final, .new-two-final, .new-three-final, .new-four-final { width: 99%; height: auto; float: none; margin: 0 0 7% 0;} .new-four-bottom, .new-one-bottom, .new-two-bottom, .new-three-bottom { width: 99%; height: auto; float: none; margin: 0 0 10% 0;} .new-one-final-bottom, .new-two-final-bottom, .new-three-final-bottom, .new-four-final-bottom {width: 99%; height: auto; float: none; margin: 0 0 10% 0;} .custom-logo-sizes {width: 65%; padding: 5% 0 7% 2%; float: none;} .one-labels { width: 99%; float: left; margin: 0.3% 0 0.3% 0; padding: 3% 2% 0 2%;} .two-labels { width: 99%; float: left; margin: 0.3% 0 0.3% 0; padding: 0 2% 0 2%;} .three-labels { width: 99%; float: left; margin: 0.3% 0 0.3% 0; padding: 0 2% 0 2%;} .four-labels { width: 99%; float: left; margin: 0.3% 0 0.3% 0; padding: 0 2% 0 2%;} .labels-graphic { width: 99%; float: left; margin: 0.3% 0 0.3% 0; padding: 0 2% 0 2%;} /* index banner */ .top-left-banner { background:url(https://images-ideal.datacomtools.com/images3/flukenetworks/ms-poe/ms-poe.png) center top no-repeat; width: 98%; height: 400px; background-size: cover; margin: 1.5% 0% 0 0; border: 1px solid #000000; float: none;} .top-left-banner1 { background:url(https://images-ideal.datacomtools.com/images3/flukenetworks/ms-poe/ms-poe.png) center top no-repeat; width: 98%; height: 400px; background-size: cover; margin: 1.5% 0% 0 0; border: 1px solid #000000; float: none;} .top-right-banner {background:url(https://images-ideal.datacomtools.com/images3/brady/Brady-m210/m211-ind.jpg) center top no-repeat; width: 98%; height: 400px; background-size: cover; margin: 1.5% 0 0 0; border: 1px solid #000000; float: none;} .bottom-left-banner { background:url(https://www.datacomtools.com/images4/nav/FASTCONNECT.gif) center top no-repeat; width: 98%; height: 400px; background-size: cover; margin: 1.5% 0% 1% 0; border: 1px solid #000000; float: none;} .bottom-right-banner {background:url(https://www.datacomtools.com/images4/nav/wire-managers.gif) center top no-repeat; width: 98%; height: 400px; background-size: cover; margin: 1.5% 0 0% 0; border: 1px solid #000000; float: none;} .index-banner-writing-tl { width: 100%; height: 100%; background-color: #FFFFFF; opacity: 0.9; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000; line-height: 18px; padding: 5%; animation-name: index-banner-writing-tl; animation-duration: 3s; animation-timing-function: linear;} .index-banner-writing-tr { width: 100%; height: 100%; background-color: #FFFFFF; opacity: 0.9; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000; line-height: 18px; padding: 5%; animation-name: index-banner-writing-tr; animation-delay: 3s; animation-duration: 3s; animation-timing-function: linear;} .index-banner-writing-bl { width: 100%; height: 100%; background-color: #FFFFFF; opacity: 0.9; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000; line-height: 18px; padding: 5%; animation-name: index-banner-writing-bl; animation-delay: 6s; animation-duration: 3s; animation-timing-function: linear;} .index-banner-writing-br { width: 100%; height: 100%; background-color: #FFFFFF; opacity: 0.9; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000; line-height: 18px; padding: 5%; animation-name: index-banner-writing-br; animation-delay: 9s; animation-duration: 3s; animation-timing-function: linear;} .header-link-box-index { width: 40%; height: 25px; background-color: #2b5e89; font-family:"Century Gothic", Arial; font-size: 12px; text-align: center; display: block; color: #FFFFFF; padding: 5px 0 0 0; margin: 7% 0 0 0; border-radius: 20px;} .header-link-box-index:hover { background-color: #25445b; transition: 1s ease;} .header-link-box-top { width: 40%; height: 25px; background-color: #2b5e89; font-family:"Century Gothic", Arial; font-size: 12px; text-align: center; display: block; color: #FFFFFF; padding: 5px 0 0 0; margin: 1% 0 0 0; border-radius: 20px;} .header-link-box-top:hover { background-color: #25445b; transition: 1s ease;} .header-width-index { width: 100%; padding: 3% 0 5% 0; float: none; font-family:"Century Gothic", Arial; font-size: 24px; font-weight: 600; line-height: 26px; color: #000000;} .h1-height { margin: 12% 0 0 0;} /* footer content */ .logos-cards {float: none; margin: 0 0 0% 0%; padding: 0 0 0 10%; width: 100%;} .logo-footer { float: none; margin: 0% 0 0% 0; width: 100%; height: 30px;} .credit-card-footer { float: none; width: 100%; padding: 10% 0 0 18%;} .small-icon-space { width: 35px; height: 35px; margin: 4% 0% 0 3%; float: left;} .small-icon-space-after { width: 35px; height: 35px; margin: 4% 0% 0 8%; float: left;} .paypal-logo {margin: 5% 0% 0 0%; float: left; width: 100%; padding: 0 0 0 20%;} .geotrust-logo {margin: 5% 0% 0% 0%; float: left; width: 100%; padding: 0 0 0 35%;} .google-translate {margin: 3% 0% 28% 0%; float: left; width: 100%; padding: 0 0 0 0;} .credit-cards-icon {margin: 4% 0% 0 1%; float: left;} .img-opacity { opacity: 1;} .img-opacity:hover { opacity: 0.5; transition: 2s all ease;} #footer-bottom-shopsite {position:absolute; bottom: auto; width:100%; height: auto; background-color: #c5c5c5; border-top: 4px solid #000000; margin: 5% 0 0 0;} #wrap-labels img { width: 80%; height: auto;} /* banner content */ .banner-position { margin: 3.5% 0 0 0; width: 100%; height: auto;} .banner-writing { width: 100%; height: 100%; background: #FFFFFF; opacity: .9; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598; position:relative; margin: 0% 0 0 0%; padding: 5%; border-radius: 0px; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.7); animation-name: banner-writing-smaller; animation-duration: 3s; animation-timing-function: linear;} .banner-writing-cable-certifiers{ width: 100%; height: 100%; background: #FFFFFF; opacity: 0.9; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598; position:relative; margin: 0 0 0 0; padding: 5%; border-radius: 0px; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.7); animation-name: banner-writing-smaller; animation-duration: 3s; animation-timing-function: linear;} .banner-writing-cable-testers{ width: 100%; height: 100%; background: #FFFFFF; opacity: 0.9; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598; position:relative; margin: 0% 0 0 0; padding: 5%; border-radius: 0px; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.7); animation-name: banner-writing-smaller; animation-duration: 3s; animation-timing-function: linear;} @keyframes banner-writing-smaller {0% {opacity: 0;} 25% { opacity: 0.3;} 50% { opacity: 0.5;} 75% { opacity: 0.7;} 100% { opacity: 0.9;}} .header-link-box { width: 40%; height: 25px; background-color: #2b5e89; font-family:"Century Gothic", Arial; font-size: 12px; text-align: center; display: block; color: #FFFFFF; padding: 5px 0 0 0; margin: 7% 0 0 0; border-radius: 20px;} .header-link-box:hover { background-color: #25445b; transition: 1s ease;} .header-logo-images { width: 55%; height: auto;} .header-width { width: 100%; padding: 0 0 5% 0; float: none;} .fluke-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/butt-sets-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89; margin: 10% 0 10% 0;} .about-us-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/about-us-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89; margin: 10% 0 10% 0;} .new-registration-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/new-registration-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89; margin: 10% 0 10% 0;} .order-status-banner { width: 98%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/order-status-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89; margin: -7% 0 10% 0;} .contact-us-banner { width: 100%; height: 200px; background:url(https://www.datacomtools.com/images4/nav/contact-us.jpg) center no-repeat; margin: 0 0 7% 0; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89; animation-name: about-us-banner; animation-duration: 3s; animation-timing-function: linear;} .cable-certifiers-new-banner { width: 100%; height: 350px; background:url(https://www.datacomtools.com/images4/nav/cable-certifiers-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89; margin: 10% 0 10% 0;} .cable-testers-new-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/cable-testers-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89; margin: 10% 0 10% 0;} .coaxial-new-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/coaxial-products-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89;} .blocks-new-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/blocks-smaller.png) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89;} .wire-manager-new-banner { width: 100%; height: 350px; background:url(https://www.datacomtools.com/images4/nav/wire-managers-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; border: 2px solid #2b5e89; margin: 10% 0 10% 0;} .fiber-products-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/fiber-products-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .fusion-splicers-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/fusion-splicers-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .crimp-tools-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/crimp-tools-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .cutters-scissors-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/cutters-scissors-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .fishing-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/fishing-pulling-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .holster-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/holster-kits-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .hand-tools-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/hand-tools-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .punchdown-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/punchdown-tools-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .test-adapters-banner-new { width: 100%; height: 300px; background:url(/images4/nav/test-adapters-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .tone-probe-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/tone-and-probe-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .tool-kits-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/tool-kits-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .wire-strippers-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/wire-strippers-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .wire-tools-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/wire-wrap-tools-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .racks-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/racks-shelves-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .connectivity-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/connectivity-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .printers-banner-new { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/printers-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .fiber-testing-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/fiber-testing-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .fiber-connectivity-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/fiber-connectivity-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .fiber-cleave-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/fiber-cleave-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .cable-assemblies-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/cable-assemblies-small.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .multimeter-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/multimeters-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .tool-bags-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/tool-bags-smaller.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .download-banner { width: 100%; height: 300px; background:url(https://www.datacomtools.com/images4/nav/catalog.jpg) center no-repeat; background-size: cover; padding: 0 0 0 0; margin: 0 0 7% 0; border: 2px solid #2b5e89;} .img-size-banner { min-width: 100%; height: auto;} .banner-title { width: 100%; float: none; font-family: "Century Gothic", Arial; font-size: 18px; color: #949598; font-weight: 600; border-bottom: 1px solid #949598; margin: 2% 0 0% 0; padding: 0 0 1% 0;} .header-link-box-cable-certifiers { width: 40%; height: 25px; background-color: #2b5e89; font-family:"Century Gothic", Arial; font-size: 12px; text-align: center; display: block; color: #FFFFFF; padding: 5px 0 0 0; margin: 2% 0 0 0; border-radius: 20px;} .header-link-box-cable-certifiers:hover { background-color: #25445b; transition: 1s ease;} .header-width-cable-testers { width: 100%; padding: 0 0 2% 0; float: none;} .header-width-blocks { width: 100%; padding: 0 0 5% 0; float: none;} .banner-title-no-banner { width: 95%; float: none; font-family: "Century Gothic", Arial!important; font-size: 18px!important; color: #949598!important; font-weight: 600; border-bottom: 1px solid #949598; margin: 7% 0 5% 0; padding: 0 0 2% 0;} /* nav */ #nav > ul { height: 3.75em; background-color: #2b5e89; margin: 0 0 0 0%;} .new-table-padding { margin: 0 0 0 2%; padding: 22% 0 0 0;} #nav { top: auto; left: auto; height: 65px; background-color: #FFFFFF; padding: 5px 0 5px 10px; border-top: 2px solid #000000;} #nav > a { width: 40px; height: 40px; left: 3%; margin: 3% 0 3% 0; text-align: left; text-indent: -9999px; border: solid 2px #25445b; border-radius: 5px; position: relative;} #nav > a:before, #nav > a:after { position: absolute; border: 2px solid #25445b; top: 33%; left: 25%; right: 25%; content: ''; } #nav > a:after {top: 60%;} #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display: block;} /* first level */ #nav > ul {height: auto; display: none; position: absolute; left: 0; right: 0; margin: 2.5% 0 0 0;} #nav:target > ul {display: block;} #nav > ul > li {width: 100%; float: none;} #nav > ul > li:not( :last-child ) > a { border-right: none; border-bottom: 1px solid #000000;} /* second level */ #nav li ul { position: static; padding: 1.25em; padding-top: 0;} .header-logo {width: 100%; height: auto; padding: 10px 0 0px 5px; float: none;} .search-bar-nav {width: 91%; height: 35px; padding: 5px; margin: 8px 0 10px 15px; float: none; background-color: #25445b; border-radius: 20px;} .form-control-new { background-color: #f9f9f9; border: solid 1px #949598; border-radius: 20px; height: 30px; width: 70%; padding: 0 10px 0 10px; font-family:"Century Gothic", Arial; font-size: 12px; float: left;} .new-nav-button { width: 17%; background: none; font-family:"Century Gothic", Arial; font-size: 12px; font-weight: 600; color: #FFFFFF; border:none; float: left; padding: 4px 0% 0 0%; left: 0;} .free-shipping { width: 0%; margin: 0px 0px 0px 0px; padding: 0px 0 0px 0; background-color: #25445b; font-family: "Century Gothic", Arial; font-size:0px; font-weight: 600; color: #f6ee2a; text-align:center; float: none;} .nav-bar {background: none; width: 100%; height: auto; position: absolute; border-bottom: 2px solid #000000; padding: 0 0 4% 0;} #nav span {font-size: 13px;} #nav > ul > li > a { height: 100%; font-size: 1.8em; line-height: 2.5em; text-align: center;} #nav li ul a { background-color: #f9f9f9; color: #949598; font-size: 16px; text-align:center;} .form-control-new { background-color: #f9f9f9; border: solid 1px #949598; border-radius: 20px; height: 25px; width: 83%; padding: 0 10px 0 10px; font-family:"Century Gothic", Arial; font-size: 12px; float: left;} .new-nav-text { font-family: "Century Gothic", Arial!important; letter-spacing: 1px; font-size: 14px!important; padding: 3% 0 3% 0!important;} .dropdown-content {display: none; width: 100%; padding: 30% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-fiber {display: none; width: 100%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-datacom {display: none; width: 100%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-racks {display: none; width: 100%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-company {display: none; width: 100%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-learning {display: none; width: 100%; padding: 12% 4% 10% 4%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);} .dropdown-content a {display: block; width: 100%; font-family:"Century Gothic", Arial; font-size: 14px; color: #000000;} .dropdown-fiber .arrow { width: 5%; border-style: solid; position: absolute; top: -74%; left: 47%;} .dropdown-content .arrow { width: 5%; border-style: solid; position: absolute; top: -66%; left: 47%;} .dropdown-racks .arrow {width: 5%; border-style: solid; position: absolute; top: -154%; left: 47%;} .dropdown-datacom .arrow { width: 5%; border-style: solid; position: absolute; top: -45%; left: 47%;} .dropdown-company .arrow {width: 5%; border-style: solid; position: absolute; top: -74%; left: 47%;} .bottom { border-color: transparent transparent #f9f9f9 transparent; border-width: 0px 10px 10px 10px;} .my-account, .my-account:active, .my-account:visited { width: 30%; height: 0; float: left; font-family:"Century Gothic", Arial; font-size: 13px; color: #000000; text-decoration: none; text-align:center; padding: 0px 0 0px 0; position:relative; top: -50px; left: 25%;} .my-account-link, .my-account-link:active, .my-account-link:visited, .my-account-link:hover { color: #25445b; font-size: 11px; text-decoration:none; font-weight: 600; float: left;} .my-account:hover {background: none;} .view-my-cart, .view-my-cart:active, .view-my-cart:visited { width: 30%; height: 0; float: right; font-family:"Century Gothic", Arial; font-size: 13px; color: #000000; text-decoration: none; text-align:center; padding: 0px 0 0px 0; top: -50px; right: 6%;} .contact-us-mobile, .contact-us-mobile:active, .contact-us-mobile:visited { width: 30%; height: 0; float: right; font-family:"Century Gothic", Arial; font-size: 13px; position:relative; color: #000000; text-decoration: none; text-align:center; padding: 0px 0 0px 0; visibility:visible; right: 18%; top: -50px;} .contact-us-mobile-link, .contact-us-mobile-link:active, .contact-us-mobile-link:visited, .contact-us-mobile-link:hover { color: #25445b; font-size: 11px; text-decoration:none; font-weight: 600; float: left;} .view-my-cart-link, .view-my-cart-link:visited, .view-my-cart-link:active, .view-my-cart-link:hover { color: #25445b; text-decoration:none; font-weight: 600; float: right; font-size: 11px;} .view-my-cart:hover {background: none;} .view-my-cart, .view-my-cart:active, .view-my-cart:visited { width: 45%; height: 0px; float: right; font-family:"Century Gothic", Arial; font-size: 11px; color: #FFFFFF; text-decoration: none; text-align:center; padding: 0px 0 0px 0; position:relative; } .view-my-cart-link { color: #25445b; text-decoration:none; font-weight: 600;} .shop-nav, .shop-nav:active, .shop-nav:visited { width: 12%; height: 0; float: left; font-family:"Century Gothic", Arial; font-size: 12px; color: #FFFFFF; text-decoration: none; text-align:center; padding: 0px 0 0px 7%; visibility:visible; position:relative; top: -60px;} .shop-link { color: #2b5e89; text-decoration:none; font-weight: 600; visibility:visible;} #nav > ul > li:hover {background: none; display: block;} .call-us-number { background: none; width:0px; height: 0px; float: left; padding: 0 0 0 0%; margin: 0px 0 0 0px; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5); border-radius: 0px; visibility:hidden;} .banner-title-about-us { width: 95%; float: none; font-family: "Century Gothic", Arial!important; font-size: 18px!important; color: #949598!important; font-weight: 600; border-bottom: 1px solid #949598; margin: 2% 0 7% 1%; padding: 0 0 2% 0;} .about-us-writing { width: 95%; font-family:"Century Gothic", Arial; font-size: 14px; color: #949598; margin: 2% 0 0 2%; line-height: 16px;} .banner-position { margin: 10% 0 0 0; width: 100%; height: auto;} div.half, div.fourth {clear: both; margin: 0px; padding-left: 0px; padding-right: 0px; width: 100%;} div.borders div.half, div.borders div.fourth {clear: both; margin: 0px 0px 8px 0px; padding-left: 0px; padding-right: 0px; width: 100%;} #tabscontent {width: 93%; height: auto; border-top: 1px solid #000000; font-size: 12px; background: #FFFFFF; padding: 10% 5% 20px 0; margin: 0px; font-size: 14px; font-family: "Century Gothic", Arial; float: left;} #tabs > ul > li {margin: 0px 0px 0px 0px; padding: 0 3.2% 0 3.2%; font-size: 14px; color: #000000; float: left; line-height: 40px; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; background-color: #CCCCCC;} #tabs > ul > li.tabActiveHeader {background: #25445b; font-size: 14px; font-family: "Century Gothic", Arial; cursor: pointer; color: #FFFFFF; position: relative;} #tabscontent {width: 92%; height: auto; border-top: 1px solid #000000; font-size: 12px; background: #FFFFFF; padding: 6% 0 20px 0; margin: 0px; font-size: 14px; font-family: "Century Gothic", Arial; float: left;} .product-quantity { width: 100%; display: block; padding: 1% 0 0 0; margin: 0 0 6% 0; color: #000000; font-weight: 600; font-family:"Century Gothic", Arial; font-size: 18px; float: left;} #product-quantity input[type='text'] { width: 20%; font-family:"Century Gothic", Arial; font-size: 18px; border: 1px solid #999999; padding: 2%; text-align: center; margin: 0 0 0 2%; border-radius: 10px; font-weight: normal;} #tabContainer { float: left; min-width: 98%; margin: 3% 0px 3% 0px; padding: 0px; margin-left: 10px; margin-right: 10px;} .in-stock { width: 80%; height: 35px; padding: 3% 5% 0 5%; margin: 4% 10% 3% 10%; font-size: 18px; background-color: #FF9900; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; text-transform: capitalize; border-radius: 20px; float: left; text-align:center;} #mi-add-to-cart table { border: solid 1px #999999; font-family:"Century Gothic", Arial; font-size: 14px; margin: 1% 0 6% 0;} .font-page-links {color:#949598; font-size: 18px; font-family: "Century Gothic", Arial;} .font-page-links:hover { color: #949598; transition: 1s ease;} #links-wrapper { width: 100%; margin: 0 0 4% 0;}} @media screen and (max-width : 1000px) { .cart-half, div#left-crosssell {display: none;} .shipping-half {width: 96%; margin: 0px auto; float: none; clear: none;} .new-table-padding { width: 100%; margin: 0 0% 0 0%;} article {width: 98%; clear: both; position: relative; margin-top: 0; margin: 5% 0 0 2%; padding: 0 2% 0% 2%; height: auto;} aside {width: 0%; position: relative; min-height: 0; margin-top: 0; padding: 0% 0 0% 0; height: 0; visibility: hidden;} #nav { width: 100%; position: static; margin: 0;} .button-spacing { padding: 0 24% 0 24%;} .add { height: 50px; padding: 4% 10% 5% 10%; font-family:"Century Gothic", Arial; color: #FFFFFF; font-size: 14px; background-color: #009900; margin: 1.5% 0 6% 0; border-radius: 20px; float: left;}.add:hover { background-color: #2b5e89; transition: 2s ease;} .view-cart { height: 50px; padding: 5% 10% 3% 10%; font-family:"Century Gothic", Arial; color: #FFFFFF; font-size: 14px; background-color: #000000; margin: 1.5% 0 6% 4%; border-radius: 20px; float: left;}.view-cart:hover { background-color: #2b5e89; color: #ffffff; transition: 2s ease;} } @media only screen and ( max-width: 640px ) { .add { height: 50px; padding: 5% 10% 5% 10%; font-family:"Century Gothic", Arial; color: #FFFFFF; font-size: 14px; background-color: #009900; margin: 1.5% 0 6% 0; border-radius: 20px; float: left;}.add:hover { background-color: #2b5e89; transition: 2s ease;} .view-cart { height: 50px; padding: 7% 10% 3% 10%; font-family:"Century Gothic", Arial; color: #FFFFFF; font-size: 14px; background-color: #000000; margin: 1.5% 0 6% 4%; border-radius: 20px; float: left;}.view-cart:hover { background-color: #2b5e89; color: #ffffff; transition: 2s ease;} .button-spacing { padding: 0 9% 0 9%;} }