/* Site Layout Styles * Updated: 10 Dec 08 @ 8.40am * Author: Matthew Holmes * ---------------------------------------------*/ /* -- TOC --------------------------------------- 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure */ /* -- COLORS ---------------------------------------*/ /* light blue = #009ddc */ /* dark blue = #00477f */ /* dark grey = #c7c8ca */ /* light grey = #ebeced */ /* -- 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: #009ddc; text-decoration: none; } a:hover { text-decoration: underline; } /* -- TYPOGRAPHY ---------------------------------------*/ h2 { color: #009ddc; font-size: 2.5em; } h3 { font-size: 1.1em; } h4 { color: #009ddc; font-size: 1.2em; } /* -- custom */ p.blurb { font-size: 1.5em; } /* -- STRUCTURE ---------------------------------------*/ body { margin: 10px 0; color: #000; font: 62.5%/1.6 Arial, Helvetica, sans-serif; } /* -- container -- */ #container { width: 960px; margin: 0 auto; } /* -- header */ #header { height: 82px; background: url(../images/bg.gif) 0 0 no-repeat; } /* logo */ #header h1 { padding: 0; line-height: 0; } /* -- banner */ #banner { height: 155px; background: url(../images/bg.gif) 0 -82px no-repeat; } /* -- nav */ #nav { height: 32px; background: url(../images/bg.gif) 0 -237px no-repeat; } #nav li { position: relative; float: left; height: 32px; background: url(../images/btn-nav.gif) no-repeat; z-index: 99; } #nav li a { display: block; height: 32px; text-indent: -999em; background-image: url(../images/btn-nav.gif); } /* off state */ #nav li a.about { width: 96px; background-position: 0 0; } #nav li a.funding { width: 206px; background-position: -96px 0; } #nav li a.research { width: 132px; background-position: -302px 0; } #nav li a.capacity { width: 195px; background-position: -434px 0; } #nav li a.news { width: 96px; background-position: -629px 0; } #nav li a.events { width: 101px; background-position: -725px 0; } #nav li a.home { width: 134px; background-position: -826px 0; } /* over state */ #nav li a.about:hover { width: 96px; background-position: 0 -32px; } #nav li a.funding:hover { width: 206px; background-position: -96px -32px; } #nav li a.research:hover { width: 132px; background-position: -302px -32px; } #nav li a.capacity:hover { width: 195px; background-position: -434px -32px; } #nav li a.news:hover { width: 96px; background-position: -629px -32px; } #nav li a.events:hover { width: 101px; background-position: -725px -32px; } #nav li a.home:hover { width: 134px; background-position: -826px -32px; } #nav ul.sf-menu ul { position: absolute; top: -999em; width: 240px; z-index: 99; } #nav ul.sf-menu li li:hover ul, #nav ul.sf-menu li li.sfHover ul { top: 0; left: 242px; } #nav ul.sf-menu ul li { float: left; width: 100%; height: auto; } #nav ul.sf-menu li:hover { visibility: inherit; } #nav ul.sf-menu li:hover ul, #nav ul.sf-menu li.sfHover ul { top: 32px; left: 0; height: auto; z-index: 99; } #nav ul.sf-menu li li { border-bottom: 1px solid #fff; } #nav ul.sf-menu li li a { width: 226px; height: auto; padding: 3px 7px; font-size: 1.2em; text-decoration: none; text-indent: 0; } #nav ul.sf-menu li:hover a.about, #nav ul.sf-menu li.sfHover a.about { background-position: 0 -32px; } #nav ul.sf-menu li:hover a.funding, #nav ul.sf-menu li.sfHover a.funding { background-position: -96px -32px; } #nav ul.sf-menu li:hover a.research, #nav ul.sf-menu li.sfHover a.research { background-position: -302px -32px; } #nav ul.sf-menu li:hover a.capacity, #nav ul.sf-menu li.sfHover a.capacity { background-position: -434px -32px; } #nav ul.sf-menu li:hover li a, #nav ul.sf-menu li.sfHover li a { width: 226px; background: #009bda; color: #fff; } #nav ul.sf-menu li:hover li a:hover, #nav ul.sf-menu li li:hover a, #nav ul.sf-menu li.sfHover li a:hover, #nav ul.sf-menu li li.sfHover a { width: 226px; background: #b2e1f4; color: #003f7c; } #nav ul.sf-menu li li:hover li a, #nav ul.sf-menu li li.sfHover li a { width: 226px; background: #009bda; color: #fff; } #nav ul.sf-menu li li:hover li a:hover, #nav ul.sf-menu li li li:hover a, #nav ul.sf-menu li li.sfHover li a:hover, #nav ul.sf-menu li li li.sfHover a { width: 226px; background: #b2e1f4; color: #003f7c; } #nav ul.sf-menu li li li:hover li a, #nav ul.sf-menu li li li.sfHover li a { width: 226px; background: #009bda; color: #fff; } #nav ul.sf-menu li:hover li a span.sf-sub-indicator, #nav ul.sf-menu li.sfHover li a span.sf-sub-indicator { display: block; position: absolute; top: 8px; /* ie6 */ right: 7px; width: 8px; height: 9px; text-indent: -999em; overflow: hidden; background: url(../images/icon-arrow-off.gif) no-repeat; } #nav ul.sf-menu li:hover li a:hover span.sf-sub-indicator, #nav ul.sf-menu li li:hover a span.sf-sub-indicator, #nav ul.sf-menu li.sfHover li a:hover span.sf-sub-indicator, #nav ul.sf-menu li li.sfHover a span.sf-sub-indicator { background: url(../images/icon-arrow-over.gif) no-repeat; } #nav ul.sf-menu li li:hover li a span.sf-sub-indicator, #nav ul.sf-menu li li.sfHover li a span.sf-sub-indicator { background: url(../images/icon-arrow-off.gif) no-repeat; } #nav ul.sf-menu li li:hover li a:hover span.sf-sub-indicator, #nav ul.sf-menu li li li:hover a span.sf-sub-indicator, #nav ul.sf-menu li li.sfHover li a:hover span.sf-sub-indicator, #nav ul.sf-menu li li li.sfHover a span.sf-sub-indicator { background: url(../images/icon-arrow-over.gif) no-repeat; } /* -- content */ #content { margin: 25px 0; } /* sidebar */ #sidebar { float: left; width: 204px; } /* internal links */ .sidenav li a { display: block; width: 202px; height: 34px; text-indent: -999em; background-image: url(../images/btn-sidenav.gif); } .sidenav li a.accomplishments { background-position: 0 0; } .sidenav li a.contact { background-position: 0 -34px; } .sidenav li a.accomplishments:hover { background-position: -202px 0; } .sidenav li a.contact:hover { background-position: -202px -34px; } /* mainbar */ #mainbar { float: right; width: 707px; } /* news */ #news { float: left; width: 326px; margin: 25px 0; } #news_title { position: relative; width: 114px; height: 32px; z-index: 1; } #news_title span { position: absolute; width: 100%; height: 100%; z-index: 1; background: url(../images/h3-news.gif) no-repeat; } /* events */ #events { float: right; width: 326px; margin: 25px 0; } #events_title { position: relative; width: 114px; height: 32px; z-index: 1; } #events_title span { position: absolute; width: 100%; height: 100%; z-index: 1; background: url(../images/h3-events.gif) no-repeat; } .content { padding: 10px 15px; background: #ebeced; font-size: 1.2em; } .content li { padding: 10px 0; } .date { color: #00477f; font-size: 1em; font-weight: bold; } .more { position: relative; bottom: -10px; right: -15px; text-align: right; line-height: 0; } /* -- footer */ #footer { padding: 8px 0 15px; background: url(../images/bg.gif) 0 -2399px no-repeat; } #footer p { position: relative; left: -15px; float: left; font-size: 1.2em; color: #808285; } #footer p.tac { position: relative; left: 0; float: right; color: #00477f; font-size: 1em; font-weight: bold; } #footer a { color: #808285; text-transform: uppercase; padding: 0 15px; } #footer p.tac a { padding: 0 0 0 15px; }