/* 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: 2em; } h3 { font-size: 1.1em; } h4 { margin: 0 0 .8em; color: #009ddc; font-size: 1.2em; } p { margin: 0 0 .8em; } /* -- custom */ h4.news { margin: .8em 0 0; } 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; } #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 -32px; } /* over state */ #nav li a.about:hover, #nav li a.about-on { width: 96px; background-position: 0 -32px; } #nav li a.funding:hover, #nav li a.funding-on { width: 206px; background-position: -96px -32px; } #nav li a.research:hover, #nav li a.research-on { width: 132px; background-position: -302px -32px; } #nav li a.capacity:hover, #nav li a.capacity-on { width: 195px; background-position: -434px -32px; } #nav li a.news:hover, #nav li a.news-on { width: 96px; background-position: -629px -32px; } #nav li a.events:hover, #nav li a.events-on { width: 101px; background-position: -725px -32px; } #nav li a.home:hover { width: 134px; background-position: -826px 0px; } #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-off1.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-over1.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-off1.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-over1.gif) no-repeat; } /* -- content */ #content { min-height: 400px; margin: 25px 0; } /* sidebar */ #sidebar { float: left; width: 204px; } /* internal links */ ul.sidenav { margin: 0 0 10px; } .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, .sidenav li a.accomplishments-on { background-position: -202px 0; } .sidenav li a.contact:hover, .sidenav li a.contact-on { background-position: -202px -34px; } #subnav li { width: 202px; border-bottom: 3px solid #fff; } #subnav li li { width: 202px; border: none; } #subnav li a { display: block; width: 185px; padding: 2px 2px 2px 15px; background: #cee3f6 url(../images/icon-arrow-off.gif) 3px 7px no-repeat; color: #00467f; font-size: 1.1em; text-transform: uppercase; text-decoration: none; } #subnav li.on a, #subnav li a:hover { background: #00467f url(../images/icon-arrow-on.gif) 3px 7px no-repeat; color: #fff; } #subnav li.on li a { width: 175px; background: #e6e7e8 url(../images/sub-icon-arrow-off.gif) 13px 7px no-repeat; color: #009ddc; text-transform: none; padding: 2px 2px 2px 25px; font-weight: bold; } #subnav li.on li.on a, #subnav li li a:hover { background: #e6e7e8 url(../images/sub-icon-arrow-on.gif) 13px 7px no-repeat; color: #00467f; } #subnav li.on li.on li a { width: 165px; padding: 2px 2px 2px 35px; color: #000; font-weight: normal; background: #e6e7e8 url(../images/icon-dot.gif) 24px 7px no-repeat; } #subnav li.on li.on li.on a, #subnav li li.on li a:hover { font-weight: bold; } /* mainbar */ #mainbar { float: right; width: 707px; font-size: 1.3em; } #mainbar a { color: #00477f; font-size: 1em; text-decoration: underline; } #mainbar ul { padding: 0 0 .8em 25px; } #mainbar li { list-style: disc; } #mainbar ul.files_list { padding: 0; } #mainbar ul.files_list li { padding: 0 0 .8em; } #mainbar ul.files_list li img { vertical-align: middle; margin-right: 8px; } #mainbar div#events_list { border-bottom: 1px solid #ccc; padding: .8em 0; } .date { color: #00477f; font-size: 1em; font-weight: bold; } .noshow { display: none; } /* -- 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; }