/** File: layout.css Validates: CSS Level 2.1 Project: What about us - MHP Author: Kristina Floyd Date Created: 2008 05 12 About: Contains styles for the main layout and framework of the site Elements index: html body ID index: #pageWrap #header #footer #mainMenu #constraint #subNav #largeTemplate #smallTemplate Class index: .access 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 */ /* START html */ /* this ensures FF always has a scrollbar */ html { margin-bottom: 0.1em; height: 100%; } /* END html */ /* START body */ body { background: #000000; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 1em; /*font-weight: bold;*/ line-height: 1.5; padding: 0 17px; text-align: center; } /* END body */ /* START ACCESSIBILITY */ .access { position: absolute; left: -1000px; width: 100px; top: 0; } /* END ACCESSIBILITY */ /* START #pageWrap */ #pageWrap { background: #FCF8D8; border-bottom: 14px solid #262626; color: #000000; font-size: 0.875em; margin: 0 auto; text-align: left; width: 937px; } /* END #pageWrap */ /* START #header */ #header { background: #000000; } #header #logo { float: left; margin: 0; margin-top: 4px; margin-right: 2px; padding: 0; } #header img { display: block; padding: 0; } /* END #header */ /* START #mainMenu */ #mainMenu { margin: 0; padding: 0; } #mainMenu li { display: block; float: left; margin: 0; padding: 0; } #mainMenu a { background-color: #FCF8D8; color: #000000; display: block; font-weight: bold; margin: 4px 2px 0 2px; min-height: 56px; padding: 93px 2px 0 2px; text-align: center; text-decoration: none; width: 8.1428em; } #mainMenu a:hover { } #mainMenu #menu_1 a { background: #FCF8D8 url(../images/layout/mainMenu/off/about.gif) no-repeat top left; } #mainMenu #menu_1 a:hover, #mainMenu #menu_1.selected a { background: #FCF8D8 url(../images/layout/mainMenu/selected/about.gif) no-repeat top left; } #mainMenu #menu_2 a { background: #FCF8D8 url(../images/layout/mainMenu/off/what.gif) no-repeat top left; } #mainMenu #menu_2 a:hover, #mainMenu #menu_2.selected a { background: #FCF8D8 url(../images/layout/mainMenu/selected/what.gif) no-repeat top left; } #mainMenu #menu_3 a { background: #FCF8D8 url(../images/layout/mainMenu/off/young.gif) no-repeat top left; } #mainMenu #menu_3 a:hover, #mainMenu #menu_3.selected a { background: #FCF8D8 url(../images/layout/mainMenu/selected/young.gif) no-repeat top left; } #mainMenu #menu_4 a { background: #FCF8D8 url(../images/layout/mainMenu/off/feeling.gif) no-repeat top left; } #mainMenu #menu_4 a:hover, #mainMenu #menu_4.selected a { background: #FCF8D8 url(../images/layout/mainMenu/selected/feeling.gif) no-repeat top left; } #mainMenu #menu_5 a { background: #FCF8D8 url(../images/layout/mainMenu/off/make.gif) no-repeat top left; } #mainMenu #menu_5 a:hover, #mainMenu #menu_5.selected a { background: #FCF8D8 url(../images/layout/mainMenu/selected/make.gif) no-repeat top left; } #mainMenu #menu_6 a { background: #FCF8D8 url(../images/layout/mainMenu/off/useful.gif) no-repeat top left; margin-right: 0; } #mainMenu #menu_6 a:hover, #mainMenu #menu_6.selected a { background: #FCF8D8 url(../images/layout/mainMenu/selected/useful.gif) no-repeat top left; } /* END #mainMenu */ /* START #subMenu */ #subMenu { padding-bottom: 10px; } #subMenu ol { list-style: none; margin: 0; padding: 0; } #subMenu li { list-style: none; margin: 0; padding: 0; } #subMenu a { background: transparent url(../images/layout/subMenu/level1off.gif) no-repeat top left; border-bottom: 1px solid #EDE9CD; color: #000000; display: block; padding-left: 19px; padding-right: 10px; text-decoration: none; width: 176px; } #subMenu .open a { background: #000000 url(../images/layout/subMenu/level1on.gif) no-repeat top left; color: #FFFFFF; } .Aboutourproject #subMenu a { background: transparent url(../images/layout/subMenu/green/level1off.gif) no-repeat top left; } .Aboutourproject #subMenu .open a { background: #000000 url(../images/layout/subMenu/green/level1on.gif) no-repeat top left; } .Whatwefoundout #subMenu a { background: transparent url(../images/layout/subMenu/red/level1off.gif) no-repeat top left; } .Whatwefoundout #subMenu .open a { background: #000000 url(../images/layout/subMenu/red/level1on.gif) no-repeat top left; } .Youngpeoplesstories #subMenu a { background: transparent url(../images/layout/subMenu/blue/level1off.gif) no-repeat top left; } .Youngpeoplesstories #subMenu .open a { background: #000000 url(../images/layout/subMenu/blue/level1on.gif) no-repeat top left; } .Feelinggoodaboutyourself #subMenu a { background: transparent url(../images/layout/subMenu/yellow/level1off.gif) no-repeat top left; } .Feelinggoodaboutyourself #subMenu .open a { background: #000000 url(../images/layout/subMenu/yellow/level1on.gif) no-repeat top left; } .Makeadifference #subMenu a { background: transparent url(../images/layout/subMenu/pink/level1off.gif) no-repeat top left; } .Makeadifference #subMenu .open a { background: #000000 url(../images/layout/subMenu/pink/level1on.gif) no-repeat top left; } .Usefulresources #subMenu a { background: transparent url(../images/layout/subMenu/purple/level1off.gif) no-repeat top left; } .Usefulresources #subMenu .open a { background: #000000 url(../images/layout/subMenu/purple/level1on.gif) no-repeat top left; } #contentWrap #subMenu ol ol a { font-weight: normal; } #contentWrap #subMenu .open li a { background: #FCF8D8 url(../images/layout/subMenu/level2off.gif) no-repeat top left; border-bottom: 1px solid #000000; color: #000000; padding-left: 27px; width: 168px; } #contentWrap #subMenu ol ol a:hover, #contentWrap #subMenu .open .open a { background: #000000 url(../images/layout/subMenu/level2on.gif) no-repeat top left; color: #FFFFFF; font-weight: bold; } #contentWrap #subMenu a:hover { background-color: #000000; color: #FFFFFF; } /* END #subMenu */ /* START #homeTemplate layout */ #homeTemplate #contentWrap { background: transparent url(../images/layout/contentWrap/home/bg.gif) repeat-y top right; border-top: 4px solid #000000; } #homeTemplate #container { float: left; margin-right: -244px; width: 100%; } #homeTemplate #content { margin-right: 244px; } #homeTemplate #main { } #homeTemplate #main img { border-top: 4px solid #000000; display: block; padding: 0; } #homeTemplate #subContent { float: right; position: relative; padding: 0 16px; width: 212px; } /* END #homeTemplate layout */ /* START #landingTemplate layout */ #landingTemplate #contentWrap { background: transparent url(../images/layout/contentWrap/bg.gif) repeat-y top left; border-top: 4px solid #000000; } #landingTemplate #subMenu { float: left; position: relative; width: 209px; } #landingTemplate #container { float: right; margin-left: -209px; width: 100%; } #landingTemplate #content { margin-left: 209px; } #landingTemplate #main { } #landingTemplate #main img { border-top: 4px solid #000000; display: block; padding: 0; } /* END #landingTemplate layout */ /* START #largeTemplate layout */ /* base font size for large template is 24px this has been set in #main */ #largeTemplate #contentWrap { background: transparent url(../images/layout/contentWrap/bg.gif) repeat-y top left; border-top: 4px solid #000000; } #largeTemplate #subMenu { float: left; position: relative; width: 209px; } #largeTemplate #container { float: right; margin-left: -209px; width: 100%; } #largeTemplate #content { margin-left: 209px; } #largeTemplate #main { background: transparent url(../images/layout/main/bg.gif) no-repeat top left; font-size: 1.7142em; padding: 10px 19px 19px 19px; } /* END #largeTemplate layout */ /* START #smallTemplate layout */ #smallTemplate #contentWrap { background: transparent url(../images/layout/contentWrap/bg.gif) repeat-y top left; border-top: 4px solid #000000; } #smallTemplate #subMenu { float: left; position: relative; width: 209px; } #smallTemplate #container { float: right; margin-left: -209px; width: 100%; } #smallTemplate #content { margin-left: 209px; } #smallTemplate #main { background: transparent url(../images/layout/main/bg.gif) no-repeat top left; padding: 19px; } /* START #smallTemplate layout */ /* START #sitemapTemplate layout */ #sitemapTemplate #contentWrap { background: transparent url(../images/layout/contentWrap/bg.gif) repeat-y top left; border-top: 4px solid #000000; } #sitemapTemplate #subMenu { float: left; position: relative; width: 209px; } #sitemapTemplate #container { float: right; margin-left: -209px; width: 100%; } #sitemapTemplate #content { margin-left: 209px; } #sitemapTemplate #main { background: transparent url(../images/layout/main/bg.gif) no-repeat top left; padding: 19px; } /* START #sitemapTemplate layout */ /* START #logos */ #logos { border-top: 4px solid #000000; } #logos ol { margin: 0; padding: 0 27px 0 21px; } #logos li { display: block; float: left; margin: 0; padding: 0; width: 296px; } #logos #UOC { } #logos #BLF { text-align: center; } #logos #FPLD { text-align: right; } /* END #logos */ /* START #footer */ #footer { background: #686868; border-bottom: 4px solid #000000; border-top: 4px solid #000000; } #footer ol { margin: 0; padding: 0; } #footer li { display: block; float: left; margin: 0; padding: 0; } #footer a { background: transparent url(../images/layout/footer/divider.gif) no-repeat center right; color: #FFFFFF; display: block; font-size: 0.7857em; padding: 9px 11px; text-decoration: none; } #footer .last a { background: transparent; } #footer a:hover { text-decoration: underline; } /* END #footer */