/** File: layout.css Validates: CSS Level 2.1 Project: Evangelical Library Author: Ian Silvester Date Created: 2009 06 07 About: Contains styles for the main layout and framework of the site Notes: Place second in the cascade. Seperate styling blocks with 6 carriage returns. Indent child blocks by one extra tabs each time to give a visual representation of the cascade and specificity. Wrap styling block with a comment in the following format: START/END plus the selector, id, class or combination of. Cascade index: 01 undo.css - Resets browser default styles 02 layout.css - Styles for the main layout and framework of the site 03 content.css - Styles for general content 04 elements.css - Styles for specific page elements 05 ie6.css - IE6 specific styles. 06 ie7.css - IE7 specific styles. 07 clearing.css - Enables the use of .clearfix across the site. 08 main.css - Continuity generated stylesheet 09 print.css - Print specific styles */ html { min-height: 100%; margin-bottom: 1px; } /* min-height + margin-bottom added to force vertical scroll bar */ body { background-color: #F4F4F4; color:#000000; font-family:Arial,Helvetica,sans-serif; font-size:0.75em; /*WARNING DO NOT CHANGE*/ font-style:normal; font-variant:normal; font-weight:normal; line-height:1.3em; } #container { margin: 0 auto; overflow:auto; padding: 20px 0; width: 800px; } #content-wrap { float:right; margin-left: -200px; width:100%; } #main-content { margin: 0 0 0 200px; } #sidebar { float:left; width:190px; } #sidebar h2 { background-color: #DFDFDF; font-size:1.2em; margin:0 0 5px 0; padding: 5px 10px; } #sidebar ol { background: #FDFDFC url(/_images/assets/sidebar/bottom.gif) no-repeat bottom left; margin: 0 0 10px 0; padding: 0 0 10px 0; } #sidebar ol li { list-style-image:none; list-style-position: outside; list-style-type: none; margin: 0; padding: 0; } #sidebar ol li ol li{ display: block; padding: 3px 5px; } #sidebar ol li ol li a { display: block; padding: 0 0 0 17px; } #sidebar li a:hover, #sidebar li.active a { background: #FDFDFC url(/_images/assets/sidebar/arrow.gif) no-repeat top left; } #sidebar ol ol { background: none; margin: 0; padding: 0; } /*----- START --- ALT-CONTENT Template ---*/ #alt-content { float:left; margin-right: -400px; width:100%; } #alt-left-col { margin: 0 400px 0 0; } #alt-right-col { float:right; width:400px; } .alt-content { float:left; margin-right: -400px; width:100%; } .alt-left-col { margin: 0 400px 0 0; } .alt-right-col { float:right; width:400px; } /*----- END --- ALT-CONTENT Template ---*/ #welcome-banner-wrapper { background: #570D1D url(/_images/assets/welcome-banner/background.gif) repeat top left; padding: 20px 0; width: 100%;} #welcome-banner { margin: 0 auto; width: 800px; } #welcome-banner-content { } .welcome-text { margin: 15px 410px 0 0; } .welcome-text h1 { color: #FFFFFF; font-size: 1.6em; margin: 0 0 13px 0; } .welcome-text h2 { color: #FFFFFF; font-size: 1em; margin: 0 0 13px 0; } .welcome-text h3 { color: #FFFFFF; font-size: 1em; font-weight: normal; margin: 0; } .welcome-image { } .column-layout { padding:0.5em 0; margin-bottom: 10px; float:left; border-top:1px dotted #CCCCCC; } .column-layout img { float: left; margin-right: 10px; } .main-image { border:1px solid #8F8F8F; float: right; margin: 0 0 10px 10px; } .mini-image, .feature-image { border:1px solid #8F8F8F; float:left; margin: 3px 5px 5px 0; } ul li { background:transparent url(/_images/assets/bullet_black.png) no-repeat scroll left top; margin:0.4em 0.5em; padding:0 0 0.1em 1.2em; list-style-image:none; list-style-position:outside; list-style-type:none; } /* ----- START FOOTER ------*/ #footer-container { background-color: #12242D; bottom:0px; border-top: 3px solid #091217; padding: 10px 0; margin : 0; width:100%; } #footer { font-size: 0.9em; overflow: auto; margin:0 auto; width:800px; } #footer_contact {font-size:0.85em;} #footer-contact { color: #F4F4F4; float: left; width:265px } #footer-contact a { color: #F4F4F4; } #footer-docs { color: #F4F4F4; float: left; width:265px } #footer-docs ol { margin: 0 0 10px 0; } #footer-docs li { list-style-image:none; list-style-position: outside; list-style-type: none; margin: 0; padding: 2px; } #footer-docs li a { color: #F4F4F4; } #footer-nav { color: #F4F4F4; float: left; width: 265px; } #footer-nav ol { margin: 0; } #footer-nav li { float: left; list-style-image:none; list-style-position: outside; list-style-type: none; margin: 0; padding: 3px 0; width: 95px;} #footer-nav li a { color: #F4F4F4; } /* ----- END FOOTER ------*/ /* ----- START MASTHEAD ------*/ #masthead_wrapper { background: #12242D; border-bottom: 2px solid #091217; border-top: 5px solid #570D1D; padding:0; width: 100%; } #masthead { overflow:auto; width: 800px; margin: 0 auto; } #macro-search { float:right; width: 302px; } #masthead-search { color: #FFFFFF; display: block; float: right; margin: 0; padding: 0; width: auto; } #masthead-search li { list-style-image:none; list-style-position:outside; list-style-type:none; margin: 0; padding: 0;} #masthead-search #search-bar { background: #570D1D url(/_images/assets/masthead/search/background/left.gif) no-repeat bottom left; display: block; text-align: right; margin: 0; padding: 0; } #masthead-search #search-bar fieldset { background: transparent url(/_images/assets/masthead/search/background/right.gif) no-repeat bottom right; padding: 5px; width: auto; } #masthead-search #search-bar input { margin: 0; padding: 0; vertical-align:middle; width: 150px; } #masthead-search #search-bar input[type="image"] { border: 0;margin: 0; padding: 0; width: auto; } #masthead-search #search-bar label.keywords { display: inline; margin: 0; padding: 0; } #masthead-search #search-bar .search-for-title { color: #FFFFFF; font-size: 0.8333em; margin: 0; padding: 0;} #masthead-search #search-bar .search-submit { background: transparent url(/_images/assets/masthead/search/button.gif) no-repeat top left; border: 0; color: #000000; cursor:pointer; display: inline-block; font-size: 0.9em; height: 16px; margin: 0; padding: 0 0 5px 0; text-align: center; width: 39px; } #masthead-nav ol { display: inline; float: right; font-size: 0.9167em; margin: 0; padding: 30px 0 0 0; } #masthead-nav li { border-left: 1px gray solid; color: #FFFFFF; display: inline; float: left; margin: 0; padding: 0 5px; } #masthead-nav li.first { border-left: none; } /* We don't want a separator (left border) on the first navigation link */ #masthead-nav li a { color: #FFFFFF; text-decoration: none; } #masthead-nav li a:link { } #masthead-nav li a:hover { text-decoration: underline; } #logo {display:block;} #logo { color: #C7C7C0; display:block; float: left; font-family:Verdana,sans serif; font-size: 0.75em; font-style: italic; font-weight:bold; height: 72px; margin: 25px 5px 5px 0; } #primary-nav{ background: #FFFFFF url(/_images/assets/masthead/primary-nav/background.gif) repeat-x top left; border-bottom: 5px solid #570D1D; padding:0; } #primary-nav.home { border: 0; } #primary-nav ol { margin:0 auto; overflow: hidden; width:800px; } #primary-nav li { background: none; float:left; font-size: 1.0833em; list-style-image:none; list-style-position: outside; list-style-type: none; margin: 0; padding: 3px 5px 0 0; } #primary-nav a { color: #000000; display: block; font-weight: bold; text-decoration: none; } #primary-nav a.selected, #primary-nav a:hover { background: #570D1D url(/_images/assets/primary-nav/left.gif) no-repeat top left; color: #FFFFFF;} #primary-nav span { display: block; padding: 5px 8px; } #primary-nav .selected span, #primary-nav span:hover { background: transparent url(/_images/assets/primary-nav/right.gif) no-repeat top right; } /* ----- END MASTHEAD ------*/