/* Site Layout Styles * Updated: 20 Jan 09 @ 1.05pm * Author: Matthew Holmes * ---------------------------------------------*/ /* -- TOC --------------------------------------- 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure */ /* -- COLORS ---------------------------------------*/ /* green = #056b46 */ /* grey = #9b9d9c */ /* black = #000 */ /* -- 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 { color: #056b46; text-decoration: underline; } a:hover { text-decoration: none; } /* -- TYPOGRAPHY ---------------------------------------*/ h2 { font-size: 1em; } h3 { margin: 0 0 1em; color: #000; font-size: 1.2em; } h4 { color: #056b46; font-size: 1em; } p { margin: 0 0 1em; } /* -- STRUCTURE ---------------------------------------*/ body { background: #f4f4f4; color: #777; font: 62.5%/1.6 "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; } /* -- wrapper */ .wrapper { width: 980px; margin: 0 auto; } /* -- container */ #container { background: #fff; padding: 0; } /* -- header */ #header { position: relative; height: 142px; z-index: 99; } #header h1 { position: absolute; top: 80px; left: -37px; } /* nav */ #header ul { position: absolute; top: 107px; right: 15px; width: 584px; } #header li { position: relative; float: left; height: 35px; } #header li a { float: left; display: block; height: 35px; background-image: url(../images/btn-nav.gif); text-indent: -999em; } #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: 35px; 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; } /* off state */ #header li a.home { width: 64px; background-position: 0 -35px; } #header li a.aboutus { width: 88px; background-position: -64px 0; } #header li a.services { width: 87px; background-position: -152px 0; } #header li a.projects { width: 90px; background-position: -239px 0; } #header li a.rd { width: 55px; background-position: -329px 0; } #header li a.community { width: 101px; background-position: -384px 0; } #header li a.contactus { width: 99px; background-position: -483px 0; } /* over state */ #header li a.home:hover { background-position: 0 -35px; } #header li a.aboutus:hover { width: 88px; background-position: -64px -35px; } #header li a.services:hover { width: 87px; background-position: -152px -35px; } #header li a.projects:hover { width: 90px; background-position: -239px -35px; } #header li a.rd:hover { width: 55px; background-position: -329px -35px; } #header li a.community:hover { width: 101px; background-position: -384px -35px; } #header li a.contactus:hover { width: 99px; background-position: -485px -35px; } /* hover state */ #header ul.sf-menu li:hover a.aboutus, #header ul.sf-menu li.sfHover a.aboutus { background-position: -64px -35px; } #header ul.sf-menu li:hover a.services, #header ul.sf-menu li.sfHover a.services { background-position: -152px -35px; } #header ul.sf-menu li:hover a.projects, #header ul.sf-menu li.sfHover a.projects { background-position: -239px -35px; } #header ul.sf-menu li:hover a.rd, #header ul.sf-menu li.sfHover a.rd { background-position: -329px -35px; } #header ul.sf-menu li:hover a.community, #header ul.sf-menu li.sfHover a.community { background-position: -384px -35px; } #header ul.sf-menu li:hover a.contactus, #header ul.sf-menu li.sfHover a.contactus { background-position: -485px -35px; } /* other */ #header ul.sf-menu li li { width: 198px; height: auto; border-bottom: 1px solid #2e9d74; background: #098c5c; } #header ul.sf-menu li li a { float: none; height: auto; padding: 4px 13px; color: #fff; font-size: 1.1em; background: #098c5c; text-decoration: none; text-indent: 0; } #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; } #header ul.sf-menu li li:hover li a, #header ul.sf-menu li li.sfHover li a { color: #fff; } #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; } /* search */ #header form { position: absolute; top: 50px; right: 20px; width: 257px; height: 34px; background: url(../images/search.gif) no-repeat; } #header form input, #header form button { float: left; } #header form input { width: 204px; margin: 0; padding: 12px 5px 0; border: 0; background: none; color: #056b46; font-size: 11px; font-weight: bold; font-style: italic; } #header form button { width: 43px; height: 34px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-indent: -999em; } /* -- banner */ #banner { postion: relative; z-index: 1; height: 200px; background: #ddd; overflow: hidden; } /* -- content */ #content { margin: 15px 0 0; background: url(../images/bg-content.gif) no-repeat; } #content .col { float: left; width: 276px; padding: 25px; font-size: 1.1em; } #content .col ul li { padding: 0 0 5px 22px; background: url(../images/bullet-point.gif) 5px 6px no-repeat; } /* headings */ #content h2 { position: relative; width: 170px; height: 15px; margin: 0 0 1.5em; } #content h2 span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #content .welcome h2 span { background: url(../images/h2-welcome.gif) no-repeat; } #content .services h2 span { background: url(../images/h2-services.gif) no-repeat; } #content .project h2 span { background: url(../images/h2-featured-project.gif) no-repeat; } p.blurb { color: #5f9984; font-size: 1.3em; } p.more { text-align: right; } p.more a { padding: 0 0 0 16px; background: url(../images/bullet-point.gif) 0 4px no-repeat; } /* project */ img.project_thumb { float: right; border: 1px solid #ccc; padding: 1px; } /* -- footer */ #footer { background: url(../images/bg-footer.gif) repeat-x; } #footer p { padding: 25px; font-size: 1.1em; } #footer p#developed { float: right; }