/* Site Layout Styles * Created: 16 Dec 08 @ 11.00 am * Author: Matthew Holmes * ---------------------------------------------*/ @import "thickbox.css"; /* -- TOC --------------------------------------- 1. Colors 2. Global Reset 3. Fix Floats 4. Links 5. Typography 6. Structure a. Body b. Header c. Content d. Footer 7. Navigation a. Main b. Secondary 8. Misc -- COLORS ---------------------------------------- black #000000 orange #f6871c light grey #bbbcbf dark grey #333339 */ /* -- GLOBAL 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 ---------------------------------------*/ a, a:visited { color: #f6871c; text-decoration: none; outline: none; } /* -- TYPOGRAPHY ---------------------------------------*/ h1 { line-height: 0; } p small { color: #666666; font-size: .9em; } /* -- STRUCTURE ---------------------------------------*/ body { margin: 55px 0; background: #454545 url(../images/bg-body.gif) fixed repeat-x; color: #666666; font: 62.5%/1.6 Verdana, Geneva, sans-serif; } /* ---- container */ #container { width: 1060px; margin: 0 auto; background: #fff url(../images/bg.gif) no-repeat; } /* columns */ #container .column { float: left; width: 234px; } #container .middle { float: left; width: 674px; } #container .right { float: right; width: 152px; } #container .right ul li { padding: 0 0 10px; } #container .right ul li a { display: block; padding: 0 25px; background: url(../images/bullet-point.gif) 15px 4px no-repeat; color: #666666; } /* random banner */ .middle #banner { height: 150px; width: 673px; overflow: hidden; background-color: #000000; } /* newsletter */ .middle p#newsletter { float: left; line-height: 0; } /* middle content table */ .middle table td { vertical-align: top; margin: 0; padding: 0; } .middle table p { padding: 0 10px 8px; } .middle table ul { padding: 5px 10px; } .middle table ul { clear: none; padding: 0 0 8px 12px; } .middle table li { float: none; width: auto; margin: 0; padding: 0 8px 0 15px; background: url(../images/inner-bullet-point.gif) 0 5px no-repeat;} /* search */ .middle form { float: right; display: block; width: 229px; height: 23px; margin: 9px 12px 0 0; background: url(../images/search.gif) left top no-repeat; } .middle form label, .middle form input, .middle form button { float: left; } .middle form label { width: 68px; text-indent: -999em; } .middle form input { width: 119px; padding: 5px; border: 0; background: none; color: #333; font-size: 10px; } .middle form button { width: 32px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-indent: -999em; } /* categories */ ul#categories { clear: both; margin: 0 0 25px; padding: 0px; } ul#categories li { float: left; padding: 0px; margin: 0px; } ul#categories li a { padding: 0px; margin: 0px; } ul#categories li a img { padding: 0px; margin: 0px; border: none; } ul#categories li.training { width: 169px; } ul#categories li.rental { width: 167px; } ul#categories li.repair { width: 169px; } ul#categories li.professional { width: 167px; } ul#categories li.repair p img { margin: 0 30px; } ul#categories li p { padding: 8px 18px 0; } ul#categories ul { clear: none; padding: 8px 0 0 20px; } ul#categories li li { float: none; width: auto; margin: 0; padding: 0 8px 0 15px; background: url(../images/inner-bullet-point.gif) 0 5px no-repeat;} /* logos */ ul#logos { padding: 0 0 25px; } ul#logos li { float: left; width: 168px; } /* banners */ #sec_nav_footer { float: left; width: 124px; height: 35px; margin: 0px; padding: 0px; background: url(../images/bg-banner1.gif) repeat-x; } #banner1 { float: left; line-height: 0; width: 80px; height: 124px; clear: both; } #banner2 { height: 192px; width: 152px; } /* events */ #events { position: relative; width: 152px; height: 121px; color: #e7e8e9; } #events span { position: absolute; width: 100%; height: 100%; background: url(../images/h4-upcoming-events.gif) no-repeat; } #events a { cursor: pointer; } /* news */ #news { position: relative; width: 152px; height: 107px; color: #e7e8e9; } #news span { position: absolute; width: 100%; height: 100%; background: url(../images/h4-recent-news.gif) no-repeat; } #news a { cursor: pointer; } #members { display: none; } /* click to call button */ #container .right .click_to_call { border-top: 1px solid #bbbcbf; } #container .right .click_to_call ol li a { display: block; background: url(../images/btn-click-to-call.gif) 0 0 no-repeat; width: 125px; height: 50px; text-indent: -999em; margin: 15px 12px; } #container .right .click_to_call ol li a:hover { display: block; background: url(../images/btn-click-to-call-over.gif) 00 no-repeat; width: 125px; height: 50px; text-indent: -999em; } /* ---- footer */ #footer { position: relative; width: 1060px; height: 22px; margin: 0 auto; background: url(../images/bg.gif) 0 -2378px no-repeat; text-align: center; } #footer p { padding: 4px 0; } /* -- NAVIGATION ---------------------------------------*/ ul#nav li:hover, ul#sec_nav li:hover { visibility: inherit; } /* ie7 / vista / sticking menu fix */ /* main */ ul#nav { width: 124px; } ul#nav li { position: relative; display: block; float: left; width: 124px; height: 27px; } ul#nav li a { display: block; width: 124px; height: 27px; background-image: url(../images/btn-main-nav.gif); text-indent: -999em; } /* off state */ ul#nav li a.training { background-position: 0 0; } ul#nav li a.rental { background-position: 0 -27px; } ul#nav li a.professional { background-position: 0 -54px; } ul#nav li a.repair { background-position: 0 -81px; } /* over state */ ul#nav li a.training:hover, ul#nav li:hover a.training, ul#nav li.hover a.training { background-position: -248px 0; } ul#nav li a.rental:hover, ul#nav li:hover a.rental, ul#nav li.hover a.rental { background-position: -248px -27px; } ul#nav li a.professional:hover, ul#nav li:hover a.professional, ul#nav li.hover a.professional { background-position: -248px -54px; } ul#nav li a.repair:hover, ul#nav li:hover a.repair, ul#nav li.hover a.repair { background-position: -248px -81px; } /* drop down */ ul#nav ul { position: absolute; top: 0; left: -999em; width: 110px; } ul#nav li:hover ul, ul#nav li.hover ul { left: 124px; } ul#nav li { width: 110px; height: auto; } ul#nav li li { border-bottom: 1px solid #444; background-color: #313031; } ul#nav li li a { width: 94px; height: auto; background-image: none; text-indent: 0; padding: 6px 8px; color: #fff; } ul#nav li li a:hover { background-color: #666; } ul#nav ul ul { background: none; } /* secondary */ ul#sec_nav { position: relative; float: left; width: 124px; padding: 15px 0 0 0; background: url(../images/bg-sub-nav.gif) repeat-x; } ul#sec_nav li a { display: inline-block; width: 100px; background: none; padding: 5px 12px; color: #fff; font-size: 1.1em; font-weight: bold; text-indent: 0; } ul#sec_nav li { border-bottom: 1px solid #444; } ul#sec_nav li.end { border: none; } ul#sec_nav li a:hover, #sec_nav li .home, #sub_nav li a.on { background-color: #666; } ul#sec_nav li:hover a, ul#sec_nav li.hover a { color: #fff; background-color: #313031; } /* secondary drop down */ ul#sec_nav li a:hover, #sec_nav li .home, ul#sec_nav li:hover a.aboutus, ul#sec_nav li.hover a.aboutus, ul#sec_nav li:hover a.tech, ul#sec_nav .aboutus-on, ul#sec_nav .contactus-on, ul#sec_nav .payaccount-on, ul#sec_nav .edit-on, ul#sec_nav .tech-on, ul#sec_nav .faqs-on, ul#sec_nav .password-on { background: #666; } ul#sec_nav .about_sub { position: absolute; /* top: 90px;*/ top: 43px; left: -999em; width: 110px; margin: 0px; padding: 0px; height: auto; } ul#sec_nav li:hover ul, ul#sec_nav li.hover ul { left: 124px; } ul#sec_nav li.hover .about_sub { left: 124px; z-index: 99; } ul#sec_nav li { height: auto; } ul#sec_nav li li { background: #313031; width: 110px; } ul#sec_nav li li a { padding: 5px 8px; width: 95px; color: #fff; font-weight: normal; } /* -- MISC ---------------------------------------*/ /* thickbox for members login */ #TB_ajaxContent { width: 430px; height: 270px; background: #fff url(../images/bg-login.jpg) no-repeat; margin: 0px; } #TB_window div div form { position: absolute; top: 120px; left: 20px; } #TB_window div div form ol li { list-style: none; margin: 0 0 .75em; padding: 0; } #TB_window div div form ol li label { float: left; display: block; width: 70px; margin: 0 10px 0 0; font-size: 1.1em; text-align: right; } #TB_window div div form input { width: 180px; border: 1px solid #ddd; padding: 1px 0; } #TB_window div div form button { width: 184px; margin: 10px 0 0 77px; border: 0; background: none; cursor: pointer; } #TB_window div div #forgotten_password { position: absolute; top: 270px; left: 0; width: 180px; height: 40px; margin: 0; padding: 0; display: block; text-indent: -999em; } *+ html .ie_flash_filter { background-color: #000; filter: alpha(opacity=0); }