/* Site Layout Styles * Updated: 21 Oct 2008 @ 11.00am * Author: Joshua Deidun * Home * ---------------------------------------------*/ /* -- TOC ------------------------------------------ 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure */ /* -- COLORS ------------------------------------------- /* green = #316b40 */ /* -- 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: #000; text-decoration: underline; outline: none; } a:hover { text-decoration: none; } /* -- TYPOGRAPHY ---------------------------------------*/ h1, h2, h3, h4, h5, h6 { color: #316b40; font: normal 3em/1.5 "Trebuchet MS", Helvetica, Arial, sans-serif; } h2 { font-size: 1.8em; margin: 0 0 .5em; } h3 { font-size: 1.2em; margin: 0 0 .5em; } h4 { font-size: 1.1em; margin: 0 0 .5em; } h5 { font-size: 1.0em; margin: 0 0 .5em; } h6 { font-size: 0.9em; margin: 0 0 .5em; } p { margin: 0 0 1em; } /* -- LISTS ---------------------------------------*/ ul { margin: 0 0 0 2em; } li { list-style: disc; line-height: 1.5; padding: 0 0 5px; } /* -- STRUCTURE ---------------------------------------*/ body { font: 62.5%/1.6 "Trebuchet MS", Helvetica, Arial, sans-serif; } /* -- container */ #container { padding: 10px; width: 960px; margin: 0 auto; } /* -- header */ #header { position: relative; height: 125px; background: url(../images/bg-body.gif) no-repeat; z-index: 99; } #header h1 { position: absolute; top: 20px; left: 20px; } /* -- search */ #search form { position: absolute; top: 45px; right: 20px; width: 150px; } #search form input { float: left; width: 150px; color: #316b40; font-size: 1.1em; font-style: italic; } /* -- nav */ #nav { width: 570px; position: absolute; top: 85px; right: 0px; } #nav ul { height: 30px; margin: 0; padding: 0; } #nav li { position: relative; float: left; list-style: none; height: 30px; margin: 0; padding-bottom: 10px; } #nav li a { display: block; width: 128px; height: 30px; background-image: url(../images/main-nav.gif); text-indent: -999em; } /* off state */ #nav li a.home { background-position: 0 -30px; width: 92px; } #nav li a.people { background-position: -92px 0; width: 107px; } #nav li a.services { background-position: -199px 0; width: 116px; } #nav li a.projects { background-position: -315px 0; width: 124px; } #nav li a.resources { background-position: -439px 0; width: 130px; } /* over state */ #nav li a.home:hover, #nav li.sfHover a.home { background-position: 0 -30px; width: 92px; } #nav li a.people:hover, #nav li.sfHover a.people, #nav li a.people-on { background-position: -92px -30px; width: 107px; } #nav li a.services:hover, #nav li.sfHover a.services, #nav li a.services-on { background-position: -199px -30px; width: 116px; } #nav li a.projects:hover, #nav li.sfHover a.projects, #nav li a.projects-on { background-position: -315px -30px; width: 124px; } #nav li a.resources:hover, #nav li.sfHover a.resources, #nav li a.resources-on { background-position: -439px -30px; width: 130px; } #header ul.sf-menu ul { position: absolute; top: -999em; width: 198px; height: auto; padding: 0 0 5px; background: url(../images/bg-menu.png) left bottom no-repeat; } #header ul.sf-menu li:hover ul, #header ul.sf-menu li.sfHover ul { top: 30px; left: 0; z-index: 99; } #header ul.sf-menu li li:hover ul, #header ul.sf-menu li li.sfHover ul { top: 0; left: 198px; } /* other */ #header ul.sf-menu li li { width: 198px; height: auto; border-bottom: 1px solid #fff; background: #316B40; padding: 0; } #header ul.sf-menu li li a { float: none; height: auto; padding: 5px 20px; color: #fff; font-size: 1.2em; background: #316B40; text-decoration: none; text-indent: 0; width: 158px; } #header ul.sf-menu li li:hover a, #header ul.sf-menu li.sfHover li a:hover, #header ul.sf-menu li li.sfHover a { color: #000; background: #316B40; } #header ul.sf-menu li li:hover li a, #header ul.sf-menu li li.sfHover li a { color: #000; } #header ul.sf-menu li li li:hover a, #header ul.sf-menu li li li.sfHover a { color: #000; } #header ul.sf-menu li li span.sf-sub-indicator { display: block; position: absolute; top: 1em; /* ie6 */ right: 1em; width: 6px; height: 7px; text-indent: -999em; overflow: hidden; background: url(../images/btn-nav-icon-arrow.gif) no-repeat; } /* -- banner */ #banner { position: relative; width: 940px; height: 350px; padding: 9px 10px; overflow: hidden; background: url(../images/bg-body.gif) 0 -125px no-repeat; } #banner div { width: 940px; height: 350px; overflow: hidden; } /* -- content */ #content { width: 960px; background: url(../images/bg.gif) 0 -593px no-repeat; font-size: 1.1em; } #content h2 { font-size: .8em; } /* -- welcome */ #left { float: left; width: 280px; padding: 20px; } #welcome { position: relative; width: 79px; height: 12px; padding-bottom: 10px; } #welcome span { position: absolute; width: 100%; height: 100%; background: url(../images/h2-welcome.gif) no-repeat; } /* -- feature */ #middle { float: left; width: 280px; padding: 20px; } #feature { position: relative; width: 154px; height: 12px; padding-bottom: 10px; } #feature span { position: absolute; width: 100%; height: 100%; background: url(../images/h2-feature-project.gif) no-repeat; } #all { float: left; } #more { float: right; } /* -- contact */ #right { float: left; width: 280px; padding: 20px; } #contact { position: relative; width: 107px; height: 12px; padding-bottom: 10px; } #contact span { position: absolute; width: 100%; height: 100%; background: url(../images/h2-contact-us.gif) no-repeat; } .table_content_data td { vertical-align: baseline; padding: 5px 0; } /* -- footer */ #footer { height: 42px; background: url(../images/bg-body.gif) 0 -1855px no-repeat; color: #fff; font-size: 1.1em; color: #316B40; } #copyright { float: left; padding: 11px 20px; } #copyright a { color: #316B40; } #ivt { float: right; padding: 2px 15px 0 0;}