/* Site Layout Styles * Updated: 23 Feb 09 @ 3.45pm * Author: Matthew Holmes * ---------------------------------------------*/ /* -- TOC --------------------------------------- 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure 7. Forms */ /* -- COLORS ---------------------------------------*/ /* red = #ee3224 */ /* purple = #333374 */ /* blue = #0071bc */ /* dark grey = #231f20 */ /* -- 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: #0071bc; text-decoration: underline; outline: none; } a:hover { text-decoration: none; } /* -- TYPOGRAPHY ---------------------------------------*/ h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } h2 { margin: 0 0 10px 50px; color: #fff; font-size: 5.0em; font-family: Palatino, Times, sans-serif; font-weight: normal; } h3 { font-size: 1.1em; font-family: Verdana, Times, sans-serif; font-weight: bold; margin: 0 0 .5em; color: #ee3224; } h4 { color: #231f58; font-size: 1.2em; } div.content { font-size: 1.1em; } p { margin: 0 0 .8em; } /* -- STRUCTURE ---------------------------------------*/ body { color: #444; font: 62.5%/1.6 Verdana, Arial, Helvetica; } /* -- container -- */ #container { width: 1055px; margin: 0 auto; } /* >>>> header */ #header { position: relative; height: 121px; background: url(../images/bg.gif) 0 0 no-repeat; } /* logo */ #header h1 { float: left; } #header h1 a { display: block; width: 640px; height: 121px; text-indent: -999em; } /* contactus */ a#contactus { float: left; width: 91px; height: 21px; } /* buttons */ #buttons { float: right; clear: right; width: 285px; margin: 8px 55px 0; } #buttons li { float: left; } #buttons li.signup { width: 149px; margin: 0 16px 0 0; } #buttons li.donation { width: 120px; } /* >>>> navigation */ #nav li:hover { visibility: inherit; } /* ie7 sticking menu fix */ #nav { height: 28px; background: url(../images/bg.gif) 0 -121px no-repeat; font-family: Arial, Helvetica, sans-serif; } #nav ul { height: 28px; } #nav li { position: relative; float: left; height: 28px; z-index: 99; } #nav li a { display: block; height: 28px; background-image: url(../images/nav-btn.gif); text-indent: -999em; cursor: pointer; } #nav li.aboutus a { width: 132px; background-position: 0 0; } #nav li.foundations a { width: 179px; background-position: -132px 0; } #nav li.bleeding a { width: 166px; background-position: -311px 0; } #nav li.publications a { width: 124px; background-position: -477px 0; } #nav li.kids a { width: 122px; background-position: -601px 0; } #nav li.events a { width: 148px; background-position: -723px 0; } #nav li.involved a { width: 184px; background-position: -871px 0; } /* dropdown navigation */ #nav li ul { position: absolute; left: -999em; height: auto; background: #696090; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #nav li li { height: auto; background: url(../images/nav-divider.gif) left bottom repeat-x; } #nav li li.end { background: none; } #nav li li a { height: auto; padding: 5px 10px; background: none; color: #fff; font-size: 1.1em; text-indent: 0; text-decoration: none; } /* set width for each dropdown */ #nav li.aboutus ul, #nav li.aboutus li { width: 13.2em; } #nav li.aboutus li a { width: 10.2em; } #nav li.foundations ul, #nav li.foundations li { width: 17.9em; } #nav li.foundations li a { width: 14.9em; } #nav li.bleeding ul, #nav li.bleeding li { width: 16.6em; } #nav li.bleeding li a { width: 13.6em; } #nav li.publications ul, #nav li.publications li { width: 12.4em; } #nav li.publications li a { width: 9.4em; } #nav li.kids ul, #nav li.kids li { width: 12.2em; } #nav li.kids li a { width: 9.2em; } #nav li.events ul, #nav li.events li { width: 14.8em; } #nav li.events li a { width: 11.8em; } #nav li.involved ul, #nav li.involved li { width: 18.4em; } #nav li.involved li a { width: 15.4em; } /* first sub level drop down */ #nav ul li:hover ul ul, #nav ul li.sfhover ul ul { top: 28px; left: -999em; z-index: 99; } #nav ul li:hover ul .icon_arrow, #nav ul li.sfhover ul .icon_arrow { display: block; background: url(../images/icon-arrow.gif) 95% 10px no-repeat; width: auto; } #nav ul li li:hover ul { top: 0; } #nav ul li li.sfhover ul { top: 0; } #nav ul li.aboutus li:hover ul, #nav ul li.aboutus li.sfhover ul { left: 17.9em; } #nav ul li.foundations li:hover ul, #nav ul li.foundations li.sfhover ul { top: 0; left: 17.9em; } #nav ul li.bleeding li:hover ul, #nav ul li.bleeding li.sfhover ul { top: 0; left: 16.6em; } #nav ul li.publications li:hover ul { top: 0; left: 12.4em; } #nav ul li.kids li:hover ul, #nav ul li.kids li.sfhover ul { top: 0; left: 12.2em; } #nav ul li.events li:hover ul, #nav ul li.events li.sfhover ul { top: 0; left: 14.8em; } #nav ul li.involved li:hover ul, #nav ul li.involved li.sfhover ul { top: 0; left: 12.4em; } /* seccond sub level drop down */ #nav ul li:hover ul ul ul { visibility: hidden; } #nav ul li:hover ul ul li:hover ul { visibility: inherit; } /* >>>> banner */ #banner { height: 100px; background: url(../images/bg.gif) 0 -149px no-repeat; } /* >>>> sidemenu */ #content .sidebar { float: left; width: 200px; padding: 0 0 0 45px; } #content .sidebar ul { height: auto; background: #696090; margin: 0; padding: 0; } #content .sidebar li { height: auto; background: url(../images/nav-divider.gif) left bottom repeat-x; padding: 5px 0; margin: 0px; width: 200px; list-style: none; } #content .sidebar li a { display: block; height: auto; padding: 0px 15px; margin: 0px; background: none; color: #fff; font-size: 1.1em; text-indent: 0; text-decoration: none; } #content .sidebar li li { padding: 0 0 0 15px; background: url(../images/icon-arrow.gif) 16px 9px no-repeat; width: 185px; } #content .sidebar li li a { padding: 3px 0 0 15px; width: 150px; } #content .sidebar li li li a { padding: 3px 0 3px 15px; width: 150px; } #content .sidebar li li li { padding: 0 0 0 15px; background: url(../images/icon-arrow.gif) 16px 9px no-repeat; width: 155px; } #content .sidebar ul ul { background: none; padding: 5px 0; margin: 0; } /* >>>> content */ #content { position: relative; background: url(../images/bg.gif) 0 -248px no-repeat; z-index: 1; margin-bottom: 15px; } #content .inner_content { position: relative; float: right; width: 785px; } #content .hfa_logo { position: absolute; top: 5px; right: 40px; } #content li { margin-left: 15px; list-style: disc; } /* >>>> parent category template content */ #content .inner_header { width: 769px; margin: 0px; padding: 0px; line-height: normal; } #content .inner_header h2 { color: #444; margin: 0px; padding: 0px; height: 60px; font-size: 4.0em; } /* >>>> record template content */ #content .inner_left { float: left; width: 470px; font-size: 1.2em; padding: 0 25px; } #content .inner_left .last_updated { font-style: italic; color: rgb(170, 170, 170); font-size: 1em; margin-top: 15px; } #content .inner_right { float: right; width: 208px; padding: 50px 57px 0 0; } #content .inner_right img { float: right; } /* files list */ #content ul.files_list a { text-decoration: none; } #content ul.files_list { margin: 15px 0 0; padding: 0; font-size: 1.1em; } #content ul.files_list li { margin: 0 0 5px; padding: 0; list-style: none; } #content ul.files_list li img { margin-right: 5px; vertical-align: middle; } /* >>>> footer */ #footer { height: 27px; margin: 20px 0 10px; background: #333374; } #footer ul { padding: 5px 0 0 30px; } #footer li.home { border: none; } #footer li { float: left; border-left: 2px solid #fff; } #footer li a { padding: 6px 15px; color: #fff; font-size: 1.1em; text-transform: uppercase; text-decoration: none; } p.copyright { float: left; } p.external-link { float: right; } /* -- FORMS ---------------------------------------*/ /* >>>> Login */ form#login { float: right; width: 285px; height: 21px; margin: 32px 55px 5px; background: url(../images/login-form.gif) no-repeat; } form#login input, form#login button { float: left; margin: 0; padding: 0; border: 0; background: none; } form#login input { width: 66px; margin: 0 6px 0 0; padding: 5px 3px 0; color: #999; font-size: 1em; } form#login button { display: block; width: 120px; height: 21px; margin: 0 0 0 8px; text-indent: -999em; cursor: pointer; } /* >>>> Logout */ #logout { float: right; width: 340px; height: 21px; margin: 32px 55px 5px 0px; font-size: 1.1em; } #logout p { position: absolute; top: 30px; right: 190px; padding: 5px 3px 0; color: #999; width: 450px; text-align: right; } #logout span { font-weight: bold; } #logout img { float: right; width: 91px; height: 21px; } /* >>>> Search */ form#search { float: right; clear: right; width: 285px; height: 21px; margin: 0 55px 0; background: url(../images/search-form.gif) no-repeat; } form#search input, form#search button { float: left; margin: 0; padding: 0; border: 0; background: none; } form#search input { width: 143px; padding: 5px 3px 0; color: #999; font-size: 1em; } form#search button { display: block; width: 45px; height: 21px; margin: 0; text-indent: -999em; cursor: pointer; }