/* 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 ---------------------------------------*/ /* -- STRUCTURE ---------------------------------------*/ body { color: #000; font: 62.5%/1.2 Verdana, Arial, Helvetica, sans-serif; background: url(../images/Narva_bkg_NEW.jpg) top center no-repeat; } /* -- container */ #container { width: 1050px; margin: 0 auto; } /* header ----------------------------------*/ #header { height: 113px; } /* logo */ #header #logo { float: left; padding: 18px 0 0 60px; } #header h1 { position: absolute; left: -999em; } /* 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: left; 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-2:hover { background: #0066cc; } #header li li a.fuses-accessories:hover { background: #888309; } #header li li a.terminals:hover, #header li li a.cables:hover { background: #009d8d; } #header li li a.switches:hover { background: #e23d39; } #header li li a.relays-flashers: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.led-truck-trailer:hover, #header li li a.sealed-truck-trailer:hover, #header li li a.conventional-truck-trailer: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; } /* content ---------------------------------*/ #content ul#banners { width: 900px; margin: 15px auto 0; overflow: hidden; } #bannerimage { width: 900px; height: 282px; overflow: hidden; } #content #banners li { float: left; width: 210px; padding: 0 20px 0 0; line-height: 0; } #content #banners li.end { padding: 0; } /* banner ----------------------------------*/ #banner { width: 900px; height: 282px; margin: 0 auto; background: #1c3f93; } /* 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 { float: right; }