/********************************* SOS Site - Layout Version 2 05/10/2010 *********************************/ /* Import */ @import url(reset.css); /* Elements */ /* Classes */ p.notice { background: url('../images/gui/icon_info.png') no-repeat left center; padding: 2px 2px 2px 20px; } h4.section { color: #0089da; font-size: 1.4em; margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 5px; font-weight: normal; } /* Forms etc */ fieldset ul { margin-bottom: 10px; } fieldset ul li { float: left; } fieldset ul li.label { width: 100px; } fieldset ul li.label { text-align: left; } /* Headings */ h3 { font-size: 1.8em; margin-bottom: 10px; font-weight: normal; } h4 { font-size: 1.4em; margin-bottom: 10px; font-weight: normal; } /* Normal text */ p { line-height: 20px; margin-bottom: 10px; } em { font-style: italic; } sub { position: relative; top: 4px; } /* Generic Classes */ /* Clear fix */ .clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clear { display: inline-block; } html[xmlns] .clear { display: block; } * html .clear { height: 1%; } .hide { display: none; } /* Tooltips */ .qtip-content { line-height: 22px; } .tooltip { cursor: help; } /* Floats */ .float-left { float: left; } .float-right { float: right; text-align: left; } /* Text classes for entity / comparisons */ .main { color: #25a9e2; } .compared { color: #8cbf02; } .remove-compare { font-size: 10px; color: #000; font-weight: normal !important; } /* Text classes for sorting */ .sort-item { color: #fc6402; } .sort-order { color: #006600; } /* Generic text */ .text-right { text-align: right; } .email { display: inline-block; background: url('../images/gui/icon_email.png') no-repeat left center; padding-left: 20px; } .url { display: inline-block; background: url('../images/gui/icon_world.png') no-repeat left center; padding-left: 20px; } .heading { font-size: 1.2em; font-weight: bold; } .blue { color: #0089da; } .cursor { cursor: pointer; } /* Layout */ html { text-align: center; background: #c6c3c6; } body { position: relative; text-align: center; font-family: Arial, Verdana, Tahoma; font-size: 0.75em; background: #c6c3c6; } /* Layout wrapper - make IE5.5 behave and center the content correctly */ #layout-wrapper { width: 1020px; margin: 0 auto; text-align: left; background: #fff; border-top: 20px solid #ddd; padding-top: 70px; } /* Header */ #header { width: 960px; margin: 0 auto; margin-bottom: 10px; } #header h1 { float: left; } #header h1 a { background: url('../images/redesign/sos_logo.png'); display: block; width: 283px; height: 69px; text-indent: -10000px; } /* Top navigation */ #top-navigation { width: 100%; float: left; } #top-navigation ul { float: left; width: 69px; height: 26px; margin-right: 10px; } #top-navigation li { position: relative; } #top-navigation a { display: block; margin: 0; color: #000; text-decoration: none; position: relative; top: 7px; height: 26px; color: #fff; padding-left: 23px; } /* Sub nav */ #top-navigation ul li ul { position: absolute; z-index: 500; width: 219px; margin: 0 !important; margin-top: 3px !important; padding: 0 !important; } #top-navigation ul li ul li { padding: 0px 15px 4px 15px !important; background: #2a2727; height: 20px !important; margin-bottom: -1px !important; } #top-navigation ul li ul li a { display: block; padding-left: 0 !important; height: 15px; border-bottom: 1px solid #534C4C; font-family: "Helvetica Neue","Lucida Grande","Segoe UI",Arial,Helvetica,Verdana,sans-serif; } #top-navigation ul li ul li a:hover { text-decoration: underline; } #top-navigation ul li ul li.rounded-top { background: url('../images/redesign/navigation/top_nav_rounded_top.png') no-repeat top left; height: 15px !important; padding: 0 !important; } #top-navigation ul li ul li.rounded-bottom { background: url('../images/redesign/navigation/top_nav_rounded_bottom.png') no-repeat top left; height: 15px !important; padding: 0 !important; } /* Hiding */ #top-navigation ul ul { display: none; } #top-navigation ul li:hover ul { display: block; } li.nav-home { background: url('../images/redesign/navigation/top_nav_home.png') no-repeat; width: 69px;} li.nav-home:hover, li.nav-home-selected { background: url('../images/redesign/navigation/top_nav_home.png') no-repeat 50% 100%; } li.nav-about { background: url('../images/redesign/navigation/top_nav_about.png') no-repeat; width: 71px; } li.nav-about:hover, li.nav-about-selected { background: url('../images/redesign/navigation/top_nav_about.png') no-repeat 50% 100%; } li.nav-tools { background: url('../images/redesign/navigation/top_nav_tools.png') no-repeat; width: 124px; } li.nav-tools:hover, li.nav-tools-selected { background: url('../images/redesign/navigation/top_nav_tools.png') no-repeat 50% 100%; width: 124px; } /* Supporters */ #supporters { text-align: right; float: right; } /* Banner */ #banner { width: 960px; height: 101px; background: url('../images/redesign/data_banner_generic.jpg'); margin: 0 auto; margin-bottom: 10px; } #banner h2 { font-size: 2.4em; color: #fff; padding: 35px 10px 10px 30px; font-weight: normal; } /* Content wrapper */ #content-wrapper { margin: 0 auto; margin-bottom: 15px; width: 940px; padding-bottom: 4px; background: url('../images/redesign/content_bottom_rounded.png') no-repeat bottom; } /* Placeholder */ #placeholder { height: 30px; } /* Tabs */ div.tabs { background: url('../images/redesign/content_top_rounded.png') no-repeat bottom; padding-bottom: 4px; } div.tabs ul li { font-size: 1.2em; height: 34px; float: left; padding-left: 10px; background: url('../images/redesign/tabs/tab_off_left.png') no-repeat; text-align: center; width: 100px; } div.tabs ul li span { height: 34px; display: block; background: url('../images/redesign/tabs/tab_off_right.png') no-repeat right; padding-right: 10px; } div.tabs ul li span a { display: inline-block; position: relative; top: 4px; border-top: 1px solid #ccc; padding-top: 8px; text-decoration: none; color: #000; padding-bottom: 10px; width: 90px; } /* Tab hover / selected */ div.tabs ul li:hover, div.tabs ul li.selected { height: 34px; background: url('../images/redesign/tabs/tab_on_left.png') no-repeat; } div.tabs ul li:hover span, div.tabs ul li.selected span { background: url('../images/redesign/tabs/tab_on_right.png') no-repeat right; } div.tabs ul li:hover span a, div.tabs ul li.selected span a { background: #cccccc; color: #fff; } /* Sub navigation / page options */ div.sub-navigation { background: #ccc; font-size: 1.1em; height: 24px; } div.sub-navigation ul.sections { padding: 5px 0px 10px 10px; float: left; } div.sub-navigation ul.sections li { display: inline; margin-right: 10px; } div.sub-navigation ul.context-views { padding: 5px 10px 10px 0px; float: right; } div.sub-navigation ul.context-views li { display: inline; margin-left: 10px; } div.sub-navigation ul li a { color: #000; text-decoration: none; } div.sub-navigation ul li a.selected, div.sub-navigation ul li a:hover { color: #fff; } /* Content */ #content { border: 1px solid #ccc; border-bottom: 16px solid #ccc; padding: 10px; } #content ul { margin-bottom: 10px; list-style-type: disc; } #content ul li { margin-bottom: 10px; line-height: 20px; margin-left: 20px; } /* Enhanced views */ div.enhanced-views { margin: 0 auto; width: 930px; text-align: center; } div.enhanced-views a { color: #999; text-decoration: none; } div.enhanced-views a:hover { text-decoration: underline; } div.enhanced-views a.current-setting { font-weight: bold; color: #000; } /* Footer */ #footer { background: #ddd; padding-top: 30px; padding: 30px 10px 25px 10px; margin-top: 15px; } #footer div.inner-footer { width: 960px; margin: 0 auto; } #footer div.inner-footer div.powered-by { float: left; } #footer div.inner-footer div.site-info { float: right; color: #999999; } #footer div.inner-footer div.site-info ul { text-align: right; margin-top: 15px; } #footer div.inner-footer div.site-info ul li { display: inline; } #footer div.inner-footer div.site-info ul li a { color: #25a9e2; text-decoration: none; } /* Generic sections */ #controls { margin-bottom: 15px !important; } #controls div.comparisons { float: left; } #controls div p { margin-bottom: 5px; } #controls div p.heading { margin-bottom: 2px; color: #0089da; } #controls div.options { float: right; } #controls div.options ul { padding-bottom: 0 !important; margin-bottom: 0 !important; } #controls div.options ul li { display: inline; } /* Breadcrumb trail */ #breadcrumb { margin: 5px 0px 10px 0px; } #breadcrumb ul li { display: inline; margin-left: 0px !important; } #breadcrumb ul li a { } /* Paging */ div.site-paging { margin-top: 10px; } div.site-paging p { float: left; margin-right: 10px; } div.site-paging ul li { float: left; display: inline; margin-right: 5px; margin-left: 0 !important; } /* Context / Data */ #info-context h4, #info-data h4 { color: #0089da; margin-bottom: 15px; } /* Data */ #info-data div.info-wrapper { } #info-data div.info-wrapper div.downloads { float: left; width: 200px; } #info-data div.info-wrapper div.downloads dt { font-size: 1.2em; font-weight: bold; margin-bottom: 3px; border-bottom: 1px solid #ccc; padding-bottom: 3px; } #info-data div.info-wrapper div.downloads dd li { margin-bottom: 5px; } #info-data div.info-wrapper div.information { float: right; width: 680px; } #info-data div.info-wrapper div.information ul { list-style-type: disc; } #info-data div.info-wrapper div.information li { margin-left: 30px; } /* Spend explanation */ #simplemodal-container { line-height: 20px; } #spend-explanation ol { list-style-type: decimal !important; margin-bottom: 20px; margin-left: 30px; } #spend-explanation ol li { margin-top: 5px; } /* Silverlight */ #silverlight { height: 630px; width: 920px; } #silverlight div.no-silverlight { } /* TreeView */ div.file-treeview { margin-bottom: 20px; } div.file-treeview img, div.file-treeview a { vertical-align: middle; } /* Simplemodal Overlay */ #simplemodal-overlay { background: #000; } /* Container */ #simplemodal-container { background: #fbfafa; border: 1px solid #ccc; text-align: left !important; padding: 20px !important; } /* Close button */ #simplemodal-container a.modalCloseImg { background: url(../images/gui/ui_modal_close.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-18px; cursor:pointer; }