/** File: layout.css Validates: CSS Level 2.1 Project: M-Corp Business Solutions Author: Ian Silvester Date Created: 2009 07 22 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 02a secondaryNavigation.css - styling for the secondary navigation 03 content.css - Styles for general content 04 elements.css - Styles for specific page elements 04a form3.css - styles for version 3 of the formbuilder 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 { overflow-y: scroll; } /* END html */ /* START body */ body { background: #FCFCFC url(/template-images/mcorp-business-solutions/layout/body/background.jpg) repeat-y scroll center center; color: #616467; font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; line-height: 1.5em; text-align: center; } /* END body */ /* START ACCESSIBILITY */ .access { left: -1000px; position: absolute; top: 0; width: 100px; } /* END ACCESSIBILITY */ /* START #page-wrap */ #page-wrap { margin: 0 auto; padding: 0 20px; text-align: left; width: 920px; } /* END #page-wrap */ /* START #header */ #header { background: #FFFFFF; min-height: 75px; margin: 0 0 20px 0; padding: 0; } #logo { float: left; padding: 0; } #logo a { display: block; } /* END #header */ /* START #primary-nav */ #primary-nav { background: #FFFFFF url(/template-images/mcorp-business-solutions/layout/header/primary-nav/background-lower.jpg) no-repeat 0 0; float: left; line-height: normal; list-style: none; margin: 0 0 0 0px; min-width: 578px; padding: 35px 30px 5px 36px; } #primary-nav ol { list-style: none; margin: 0; overflow: hidden; padding: 0; } #primary-nav li { background: transparent url(/template-images/mcorp-business-solutions/layout/header/primary-nav/right-grad.jpg) no-repeat bottom right; float: left; list-style: none; margin: 0; padding: 0; } #primary-nav a { color: #74787C; display: block; font-size: 1.1667em; font-weight: bold; margin: 0 2px 0 0; padding: 7px 14px 13px 14px; text-decoration: none; } #primary-nav a:hover, #primary-nav .selected a { background: transparent url(/template-images/mcorp-business-solutions/layout/header/primary-nav/selected.jpg) repeat-x bottom right; color: #558EBE; } /* END #primary-nav */ /* START #secondary-nav */ #secondary-nav ol { margin: 10px 16px;} #secondary-nav ol li { background: transparent url(/template-images/mcorp-business-solutions/layout/secondary-nav/header/top.jpg) no-repeat top left; list-style-image:none; list-style-position:outside; list-style-type:none; margin: 0; padding: 2px 0 0 0;} #secondary-nav ol li h2 { background: #75AAD6 url(/template-images/mcorp-business-solutions/layout/secondary-nav/header/bottom.jpg) no-repeat bottom left; color: #FFFFFF; font-size: 1.1667em; font-weight: normal; margin: 0; padding: 4px 40px 5px 9px; text-transform: uppercase; } #secondary-nav ol li h2 a { color: #FFFFFF; text-decoration: none; } #secondary-nav ol ol { background: none; list-style-image:none; list-style-position:outside; list-style-type:none; margin: 0; padding: 0;} #secondary-nav ol ol li { background: #FFFFFF url(/template-images/mcorp-business-solutions/layout/secondary-nav/line.jpg) no-repeat bottom left; color: #74787C; font-size: 1em; margin: 0; padding: 0 15px 0 0; } #secondary-nav ol ol li a { background: transparent url(/template-images/mcorp-business-solutions/layout/secondary-nav/grey-arrow.gif) no-repeat center right; display: block; color: #616467; padding: 9px 9px 3px 9px; text-decoration: none; } #secondary-nav ol ol li a:hover, #secondary-nav ol ol li .selected { background: transparent url(/template-images/mcorp-business-solutions/layout/secondary-nav/blue-arrow.gif) no-repeat center right; color: #558EBE; } /* END #secondary-nav */ /* START #content-wrap*/ #content-wrap { background: #FFFFFF; padding: 0; } #content { float: left; margin-right: -648px; width: 100%; } #secondary-nav { margin-right: 648px; } #main-content { background: #FFFFFF ; float: right; width: 635px; } /* START #content-wrap*/ /* START #column-wrap layout */ #column-wrap { background: #FFFFFF; padding: 0; } #column-one { float: left; margin-right: -338px; width: 100%; } #content-column-one { background: #FFFFFF url(/template-images/mcorp-business-solutions/layout/checker-pattern.gif) repeat-x 0 0; margin-right: 338px; padding: 20px 0; } #content-column-two { background: #FFFFFF url(/template-images/mcorp-business-solutions/layout/checker-pattern.gif) repeat-x 0 0; float: right; width: 302px; padding: 20px 0; } /* END #column-wrap layout */ /* START #homepage-column-wrap layout */ #column-wrap { background: #FFFFFF; padding: 0; } #column-one { float: left; margin-right: -338px; width: 100%; } #content-column-one { background: #FFFFFF url(/template-images/mcorp-business-solutions/layout/checker-pattern.gif) repeat-x 0 0; margin-right: 338px; padding: 20px 0; } #content-column-two { background: #FFFFFF url(/template-images/mcorp-business-solutions/layout/checker-pattern.gif) repeat-x 0 0; float: right; width: 302px; padding: 20px 0; } #homepage-column-wrap { border-top: solid 15px #FFFFFF; } #content-wrap { float:left; margin-right:-201px; width:100%; } #wrapper { margin-right:201px; } #intro-text-container { float:left; padding: 0 10px 0 0; width:374px; } #events-list-container { margin-left:384px; padding: 0 10px 0 10px; } #support-login-container { float:right; padding:0 6px; width:189px; } /* END #homepage-column-wrap layout */ /* START #footer layout */ #footer { background: #FFFFFF url(/template-images/mcorp-business-solutions/layout/checker-pattern.gif) repeat-x 0 0; clear: both; display: block; font-size: 0.8462em; margin: 0; padding: 25px 0 0 0; } #footer ol { margin: 0; padding: 0; } #footer #business-solutions-info { float: right; margin: 0; padding: 0; } #footer li { float:left; font-size:1.0833em; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0 0 0 5px; text-align: right; } /* END #footer layout */