/* Site Layout Styles * Updated: Date @ Time * Author: Firstname Lastname * ---------------------------------------------*/ /* -- TOC --------------------------------------- 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure */ /* -- COLORS ---------------------------------------*/ /* color name = hex value */ /* -- RESET ---------------------------------------*/ html, body, div, span, applet, object, iframe, 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, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: inherit; font-family: inherit; list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* -- FIX FLOATS ---------------------------------------*/ .clearfix:after { display: block; clear: both; height: 0; content: "."; visibility: hidden; } * html .clearfix { height: 1%; } *+ html .clearfix { height: 1%; } /* -- LINKS ---------------------------------------*/ /* -- TYPOGRAPHY ---------------------------------------*/ .subheadclass { color: #fff; font-size: 1.2em; font-weight: bold; line-height: 1.2; } .txtclass { color: #fff; line-height: 1.2; } /* -- STRUCTURE ---------------------------------------*/ body { margin: 0; padding: 0; color: #000; font: 62.5%/1.2 Verdana, Arial, Helvetica, sans-serif; } /* -- container */ #container { } /* header ----------------------------------*/ #header { height: 113px; } /* logo */ #header h1 { float: left; padding: 32px 0 0 75px; } /* search */ #header form { float: right; width: 161px; height: 17px; margin: 49px 0 0; padding: 0 75px 0 0; background: url(../images/search.gif) no-repeat; } #header form input, #header form button { float: left; } #header form input { width: 108px; height: 11px; margin: 0; padding: 3px; border: 0; background: none; font-size: 11px; } #header form button { width: 47px; height: 17px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-indent: -999em; } /* nav */ #header ul { clear: both; width: 900px; height: 20px; margin: 0 auto; padding: 0 0 10px; } #header li { position: relative; float: left; width: 180px; height: 20px; z-index: 99; } #header li a { display: block; width: 180px; height: 20px; background-image: url(../images/btn-nav.gif); text-indent: -999em; } #header ul ul { position: absolute; top: -999em; left: 0; width: 180px; height: auto; background: #fff; padding: 0; } #header li:hover ul, #header li.hover ul { top: 20px; left: 0; } #header ul li li:hover ul, #header ul li li.hover ul { left: -999em; } #header ul li:hover { visibility: inherit; } /* off state */ #header li a.products { background-position: 0 0; } #header li a.latestrelease { background-position: -180px 0; } #header li a.news { background-position: -360px 0; } #header li a.aboutus { background-position: -540px 0; } #header li a.contactus { background-position: -720px 0; } /* over state */ #header li a.products:hover, #header li a.products-on, #header li:hover a.products, #header li.hover a.products { background-position: 0 -20px; } #header li a.latestrelease:hover, #header li a.latestrelease-on { background-position: -180px -20px; } #header li a.news:hover, #header li a.news-on, #header li:hover a.news, #header li.hover a.news { background-position: -360px -20px; } #header li a.aboutus:hover, #header li a.aboutus-on { background-position: -540px -20px; } #header li a.contactus:hover, #header li a.contactus-on { background-position: -720px -20px; } #header li li { width: 180px; height: auto; } #header li li a { width: 158px; height: auto; margin: 1px; padding: 2px 10px; background: #e7e8f4; text-indent: 0; text-align: center; text-decoration: none; color: #1655a6; font-size: 1em; } #header li li a:hover { color: #fff; font-style: italic; } #header li li a.emergency-lighting:hover { background: #5f3283; } #header li li a.driving-fog-lamps:hover { background: #944398; } #header li li a.globes-incandescent-halogen:hover { background: #0066cc; } #header li li a.fuses-fuse-accessories:hover { background: #888309; } #header li li a.terminals:hover, #header li li a.cable:hover { background: #009d8d; } #header li li a.switches:hover { background: #e23d39; } #header li li a.flashers-relays:hover { background: #e23d39; } #header li li a.reversing-alarms-horns:hover { background: #e23d39; } #header li li a.power-accessories:hover { background: #e23d39; } #header li li a.trailer-connectors:hover { background: #f5a32e; } #header li li a.conventionaltrucktrailerlighting:hover { background: #ea7021; } #header li li a.rv-interior-lighting:hover { background: #b8c3b9; } #header li li a.truck-trailer:hover { background: #d6481a; } #header li li a.ledtrucktrailerlighting:hover { background: #a1283c; } #header li li a.merchandisers:hover { background: #73619e; } #header ul.news_menu li a:hover { background: #1d3f96; color: #fff; font-style: italic; } /* banner ----------------------------------*/ #banner { width: 900px; height: 282px; margin: 0 auto; background: #1c3f93; } /* content ----------------------------------*/ #content { position: relative; width: 940px; margin: 0; padding: 0; z-index: 1; } div.searchContent { width: 870px; padding: 15px; background: #fff; } div.searchContent h2 { margin: 0 0 15px; padding: 0 0 5px; border-bottom: 2px solid #1c3f94; } div.searchContent legend { padding: 0 0 15px; } div.searchContent div.search_form { padding: 0 0 25px; } p.search_returned { padding: 0 0 15px; } ul.search_list li { padding: 0 0 15px; } ul.search_list li a { font-size: 1.2em; } p.search_pages { text-align: right; } p.search_pages a { color: #000; } /* top banner graphic */ #content .category_parent { position: relative; margin: 0 0 20px; min-height: 282px; height: auto !important; height: 282px; } /* category menu */ #content .parent_menu h3 { padding: 2px 3px; color: #1c3f94; font-size: 1em; font-style: italic; text-transform: uppercase; } #content .parent_menu { position: absolute; top: 0; left: 0; width: 160px; background: url(../images/bg-menu.png) repeat; } #content .parent_menu li { position: relative; width: 160px; } #content .parent_menu li a { display: block; width: 150px; padding: 3px 5px; color: #1c3f94; font-size: 1em; line-height: 1.2; text-decoration: none; } #content .parent_menu li:hover, .parent_menu li.hover, .parent_menu li a.on, .parent_menu li.on { background: #fff; font-style: italic; font-weight: bold; } #content .parent_menu li:hover li, .parent_menu li.hover li .parent_menu li.on li { font-weight: normal; } #content .parent_menu li:hover li a:hover, .parent_menu li.hover li a:hover, .parent_menu li li a.on { background: #d1d3e4; font-weight: bold; } #content .parent_menu li li a.off { font-weight: normal; } #content .parent_menu li ul { position: absolute; top: 0; left: -999em; width: 160px; } #content .parent_menu li:hover ul, .parent_menu li.hover ul { left: 160px; z-index: 99; background: #fff; } /* category list */ #content .category_list { float: left; width: 210px; height: 128px; margin: 0 20px 20px 0; } #content .category_list h3 a { display: block; width: 210px; height: 128px; margin: 0; padding: 0; text-indent: -999em; font-size: 1.1em; } /* product list */ #content .product_list { float: left; width: 440px; height: 144px; margin: 0 20px 20px 0; background-color: #fff; border: 1px solid #000; } #content .product_list .product_list_content { padding: 10px; } #content .product_list .product_list_content h2 { color: #1c3f94; font-size: 1.6em; } #content .product_list .product_list_content h3 { font-size: 1.2em; line-height: 1.2; } #content .product_list .product_list_short { padding: 10px 0 0; } #content .product_list .product_list_link { float: right; padding: 10px 10px 0; } #content .product_list .product_list_link a { display: block; width: 60px; height: 16px; border: 5px solid #c4c5e1; background: url(../images/info_button.gif) 0 0 no-repeat; text-indent: -999em; } #content .product_list .product_list_link a:hover { background: url(../images/info_button.gif) 0 -16px no-repeat; } #content .product_list .product_list_image { float: left; padding: 2px 15px 0 5px; } /* product list backgrounds */ #content .product_list.driving-fog-lamps { background-image: url(../images/Driving-stipple-panel.gif); background-repeat: no-repeat; } #content .product_list.emergency-lighting, #content .product_list2.emergency-lighting { background-image: url(../images/Emerg-Panel-2.jpg); background-repeat: no-repeat; } #content .product_list.globes-incandescent-halogen { background-image: url(../images/globes-panel.jpg); background-repeat: no-repeat; } #content .product_list.fuses-fuse-accessories { background-image: url(../images/Fuses-Panel.jpg); background-repeat: no-repeat; } #content .product_list.switches, #content .product_list.flashers-relays, #content .product_list.reversing-alarms-horns, #content .product_list.power-accessories { background-image: url(../images/switches-panel.jpg); background-repeat: no-repeat; } #content .product_list.trailer-connectors { background-image: url(../images/trailer-panel.png); background-repeat: no-repeat; } #content .product_list.rv-interior-lighting { background-image: url(../images/RV-Panel.jpg); background-repeat: no-repeat; } #content .product_list.truck-trailer { background-image: url(../images/TT-Panel.jpg); background-repeat: no-repeat; } #content .product_list.merchandisers { background-image: url(../images/Merch-Panel.jpg); background-repeat: no-repeat; } /* product list 2 layout */ #content .product_list2 { position: relative; float: left; width: 440px; height: 144px; margin: 0 20px 20px 0; background-color: #fff; } #content .product_list2 .product_list_content { padding: 10px; } #content .product_list2 .product_list_content h2 { color: #1c3f94; font-size: 1.6em; } #content .product_list2 .product_list_content h3 { font-size: 1.2em; line-height: 1.2; } #content .product_list2 .product_list_short { padding: 10px 0 0; } #content .product_list2 .product_list_link { position: absolute; top: 0; right: 0; width: 70px; } #content .product_list2 .product_list_link a { display: block; width: 60px; height: 16px; border: 5px solid #c4c5e1; background: url(../images/info_button.gif) 0 0 no-repeat; text-indent: -999em; } #content .product_list2 .product_list_link a:hover { background: url(../images/info_button.gif) 0 -16px no-repeat; } #content .product_list2 .product_list_image { width: 360px; margin: 0 55px 0 0; text-align: center; display: block; padding: 0; } /* tabulated product */ table.tabulatedProduct, table.tabulatedProductData { width: 100%; } table.tabulatedProduct th { padding: 5px; color: #06c; font-size: 1.1em; font-weight: normal; text-transform: none; vertical-align: bottom; } table.tabulatedProduct td { padding: 5px; } td.tabulatedProductImage { width: 314px; } table.tabulatedProductData td, table.tabulatedProductData th { border-bottom: 1px solid #06c; } table.tabulatedProduct td.tabulatedProductTitle, table.tabulatedProduct th.titlePosition, table.tabulatedProduct td.dataPosition { } table.tabulatedProduct td.dataPosition { color: #06c; font-weight: bold; font-size: 1.3em; } table.tabulatedProductData td.tabulatedProductTitle { border-bottom: 2px solid #06c; } table.tabulatedProduct h2 { color: #06c; font-size: 1.7em; text-transform: uppercase; } table.tabulatedProduct td.tabulatedProductTitle { padding: 20px 0 0; } /* tabulated product backgrounds */ #content .single_product { width: 870px; background-color: #fff; background-image: url(../images/Globes-bkg.jpg); background-repeat: no-repeat; padding: 15px; } #content .single_product.fuses-fuse-accessories { background-image: url(../images/Fuse-Bkg.jpg); } #content .single_product.flashers-relays { background-image: url(../images/relays-bkg.jpg); } #content .single_product.terminals { background-image: url(../images/terminals-bkg.jpg); } #content #driving-fog-lamps, #content single_product.driving-fog-lamps { width: 870px; background-color: #fff; background-image: url(../images/Driving-bkg.jpg); background-repeat: no-repeat; } #content #emergency-lighting { width: 870px; background-color: #fff; background-image: url(../images/Emerg-bkg.jpg); background-repeat: no-repeat; } #content #trailer-connectors { width: 870px; background-color: #fff; background-image: url(../images/Trailers-bkg.jpg); background-repeat: no-repeat; } /* static html layout styles */ .txtclass { color: white; font-size: 7.5pt; font-family: Verdana, Arial, Helvetica, sans-serif; } .headclass { color: black; font-size: 13pt; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 15pt; } .txt2class { color: black; font-size: 7.5pt; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 9pt; } .partnoclass { color: black; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; } .txt3class { color: black; font-size: 8pt; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 10pt; } .subheadclass { color: black; font-size: 9pt; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 11pt; } /* popup styles */ #TB_window #TB_title { height: 35px; } /* emergency lighting */ #TB_window.driving-fog-lamps-popup-layout #TB_title, #TB_window.emergency-lighting-popup-layout #TB_title { background: url(../images/popup_banner.gif) no-repeat; } /* globes */ #TB_window.globes-incandescent-halogen-popup-layout #TB_title { background: url(../images/globes_popup_banner.gif) no-repeat; } #TB_window.globes-incandescent-halogen-popup-layout { border: 1px solid #0066cb; } #TB_window.globes-incandescent-halogen-popup-layout { background: #fff url(../images/globes_popup_bg.gif) top right no-repeat; } /* fuses and accessories */ #TB_window.fuses-fuse-accessories-popup-layout #TB_title { background: url(../images/fuses_popup_banner.gif) no-repeat; } #TB_window.fuses-fuse-accessories-popup-layout { border: 1px solid #888409; } #TB_window.fuses-fuse-accessories-popup-layout { background: #fff url(../images/fuses_popup_bg.gif) top right no-repeat; } /* switches */ #TB_window.switches-popup-layout #TB_title, #TB_window.flashers-relays-popup-layout #TB_title, #TB_window.reversing-alarms-horns-popup-layout #TB_title, #TB_window.power-accessories-popup-layout #TB_title { background: url(../images/switches_popup_banner.gif) no-repeat; } #TB_window.switches-popup-layout, #TB_window.flashers-relays-popup-layout, #TB_window.reversing-alarms-horns-popup-layout, #TB_window.power-accessories-popup-layout { border: 1px solid #ee3a43; } #TB_window.switches-popup-layout, #TB_window.flashers-relays-popup-layout, #TB_window.reversing-alarms-horns-popup-layout, #TB_window.power-accessories-popup-layout { background: #fff url(../images/switches_popup_bg.gif) top right no-repeat; } /* trailer */ #TB_window.trailer-connectors-popup-layout #TB_title { background: url(../images/trailer_popup_banner.gif) no-repeat; } #TB_window.trailer-connectors-popup-layout { border: 1px solid #fdb930; } #TB_window.trailer-connectors-popup-layout { background: #fff url(../images/trailer_popup_bg.gif) top right no-repeat; } /* rv */ #TB_window.rv-interior-lighting-popup-layout #TB_title { background: url(../images/rv_popup_banner.gif) no-repeat; } #TB_window.rv-interior-lighting-popup-layout { border: 1px solid #a6b3aa; } #TB_window.rv-interior-lighting-popup-layout { background: #fff url(../images/rv_popup_bg.gif) top right no-repeat; } /* truck & trailer */ #TB_window.truck-trailer-popup-layout #TB_title { background: url(../images/trucktrailer_popup_banner.gif) no-repeat; } #TB_window.truck-trailer-popup-layout { border: 1px solid #c70b46; } #TB_window.truck-trailer-popup-layout { background: #fff url(../images/trucktrailer_popup_bg.gif) top right no-repeat; } /* merchandisers */ #TB_window.merchandisers-popup-layout #TB_title { background: url(../images/merch_popup_banner.gif) no-repeat; } #TB_window.merchandisers-popup-layout { border: 1px solid #8077b8; } #TB_window.merchandisers-popup-layout { background: #fff url(../images/merch_popup_bg.gif) top right no-repeat; } #content #content_block { width: 900px; background-color: #1d3f96; margin: 0 0 15px; } #content #content_block ul { width: 900px; overflow: hidden; padding: 0 0 0 1px; } #content #content_block ul li { float: left; width: 443px; padding: 0 12px 5px 0; line-height: 0; } #content #content_block ul li.end { padding: 0; } #content ul#banners { width: 900px; overflow: hidden; } #content #banners li { float: left; width: 220px; padding: 0 6px 0 0; line-height: 0; } #content #banners li.end { padding: 0 0 0 1px; } #content .narvanews { min-height: 370px; background-image: url(../images/bg-narva-news.jpg); background-repeat: no-repeat; background-position: 0 21px; } #content #content_block ul.items { padding: 120px 0 0; text-align: center; } #content #content_block ul.items li { float: left; width: 210px; line-height: 1.6; } #content #content_block ul.items li a { color: #fff; text-decoration: none; } #content .contactus { background-image: url(../images/bg-contactus.jpg); background-repeat: no-repeat; background-position: 0 21px; } #content .contactus table { margin: 10px 0 0; } /* footer ----------------------------------*/ #footer { width: 900px; margin: 0 auto; } #footer a { color: #fff; } #footer p { float: left; padding: 20px 0; color: #fff; font-size: 1.1em; } #footer p#copyright { text-align: left; } /* -- thickbox styles */ #TB_overlay { position: fixed; z-index: 100; top: 0; left: 0; height: 100%; width: 100%; } .TB_overlayMacFFBGHack { background: url(../images/macFFBgHack.png) repeat; } .TB_overlayBG { background: #fff; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } #TB_window { position: fixed; z-index: 102; color: #000; display: none; text-align: left; top: 50%; left: 50%; margin: 0; padding: 0; background: #fff; border: 1px solid #944398; } #TB_load { position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ } #TB_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%; } #TB_iframeContent { clear:both; border:none; } * html #TB_overlay { position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } * html #TB_window { position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } * html #TB_load { position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } * html #TB_HideSelect { position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } /* -- hide various parts from the site */ form, #nav, .category_parent, .product_list_link, #footer p { display: none; } #footer p#copyright { display: block; }