/** File: layout.css Validates: CSS Level 2.1 Project: BSO live Author: Kristina Floyd / Ian Silvester Date Created: 2009 05 27 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: #000000 url(/template-images/rebrand-2009/layout/body/body-background.gif) repeat-y scroll center center; color: #000000; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 0.6875em; 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 6px 0 7px; text-align: left; width: 780px; } /* END #page-wrap */ /* START #header */ #header { background: #FFFFFF url(/template-images/rebrand-2009/layout/header/header-image.gif) no-repeat 50% 0%; min-height: 143px; padding: 0; } #logo { float: left; padding: 7px 4px 0 9px; } #logo a { display: block; } #macros-search { display: block; line-height: normal; float: right; margin: 0; padding: 0; text-align: right; width: 50%; } #macros-search ol { list-style: none; padding: 13px 8px 12px 8px; margin: 0; } #macros-search li { display: inline; list-style: none; margin: 0; padding: 0; } #macros-search a { color: #616161; font-size: 1.0909em; padding: 0 9px; text-decoration: none; } #macros-search a:hover { text-decoration: underline; } #macros-search .basket { display: block; margin: 15px 10px 0 0; } #macros-search .basket a { background: transparent url(/template-images/rebrand-2009/elements/icons/basket.gif) no-repeat 100% 0px; padding: 2px 20px 2px 2px; } #search-pane { background: #D7D7CA url(/template-images/rebrand-2009/layout/search-pane/round-bottom.gif) no-repeat bottom left; float: right; margin-right: 5px; padding: 0; text-align: left; width: 189px; } #search-pane form { background: transparent url(/template-images/rebrand-2009/layout/search-pane/round-top.gif) no-repeat top left; margin: 0; padding: 0 6px 6px 6px; } #search-pane fieldset { background: none; border: 0; padding: 0; } #search-pane ol { list-style: none; margin: 0; padding: 0; } #search-pane ol li { display: block; list-style: none; margin: 0; padding: 0; } #search-pane input { border: 1px solid #CCCCC1; width: 16.0909em; margin: 5px 0; padding: 0; } #search-pane .search-button { background: #D7D7CA url(/template-images/rebrand-2009/layout/search-pane/search-button/start.gif) no-repeat 0 0; display: block; float: right; margin: 0; } #search-pane .search-button input { background: transparent url(/template-images/rebrand-2009/layout/search-pane/search-button/end.gif) no-repeat 100% 0%; border: none; color: #676500; cursor: pointer; display: block; font-size: 0.9091em; font-weight: bold; margin: 0; min-height: 17px; padding: 0 10px 1px 10px; width: auto; } #search-pane label { color: #676500; display: block; font-size: 1.2727em; font-weight: bold; margin: 0; padding: 3px 0 0 0; } /* END #header */ /* START #primary-nav */ #primary-nav { background: #D7D7CA; line-height: normal; list-style: none; margin: 0; padding: 5px 2px 0 6px; } #primary-nav ol { list-style: none; margin: 0; padding: 0; } #primary-nav li { float: left; list-style: none; margin: 0 1px 0 0; padding: 0; } #primary-nav a { color: #4E4C00; display: block; font-size: 1.4545em; font-weight: normal; text-decoration: none; } #primary-nav span { display: block; padding: 10px 31px 10px 8px; } #primary-nav a:hover, #primary-nav .selected a { background: #000000 url(/template-images/rebrand-2009/layout/primary-nav/left-round.gif) no-repeat 0 0; color: #ADAA00; } #primary-nav span:hover, #primary-nav .selected span { background: transparent url(/template-images/rebrand-2009/layout/primary-nav/right-round.gif) no-repeat 100% 0%; } /* END #primary-nav */ /* START #promotion-calendar-wrap */ #promotion-calendar-wrap { background: #000000 url(/template-images/rebrand-2009/layout/promotion-calendar-wrap/bg.gif) no-repeat bottom right; border-bottom: 6px solid #000000; border-top: 6px solid #000000; padding: 0 6px; } #promotion-calendar-content { float: left; margin-right: -201px; width: 100%; } #promotion-pane { line-height: 0; margin-right: 201px; } #calendar-pane { float: right; margin-bottom: 6px; width: 189px; } /* END #promotion-calendar-wrap */ /* START #default-template #main-area-wrap layout */ #default-template #main-area-wrap { background: #000000; border-bottom: 25px solid #000000; } #default-template #content-wrap { float: left; margin-right: -201px; width: 100%; } #default-template #wrapper { margin-right: 201px; } #default-template #secondary-nav-container { float: left; width: 188px; padding: 0 6px; } #default-template #main-content-container { margin-left: 200px; padding: 0 0 0 0; } #default-template #main-content { background: #FFFFFF url(/template-images/rebrand-2009/layout/main-content/repeater.gif) repeat-y top left; min-height: 300px; padding: 10px; position: relative; } #default-template #main-content-top { background: transparent url(/template-images/rebrand-2009/layout/main-content/top.gif) no-repeat top left; height: 3px; left: 0; position: absolute; top: 0; width: 379px; } #default-template #main-content-bottom { background: transparent url(/template-images/rebrand-2009/layout/main-content/bottom.gif) no-repeat bottom left; bottom: 0; height: 3px; left: 0; position: absolute; width: 379px; } #default-template #sub-content { float: right; width: 189px; padding: 0 6px; } /* END #default-template #main-area-wrap layout */ /* START #two-column-template #main-area-wrap layout */ #two-column-template #main-area-wrap { background: #000000; border-bottom: 25px solid #000000; } #two-column-template #content-wrap { float: left; width: 100%; } #two-column-template #wrapper { } #two-column-template #secondary-nav-container { float: left; width: 188px; padding: 0 6px; } #two-column-template #main-content-container { margin-left: 200px; padding: 0 0 0 0; } #two-column-template #main-content { background: #FFFFFF url(/template-images/rebrand-2009/layout/two-column/main-content/repeater.gif) repeat-y top left; margin-right: 6px; min-height: 300px; padding: 10px; position: relative; } #two-column-template #main-content-top { background: transparent url(/template-images/rebrand-2009/layout/two-column/main-content/top.gif) no-repeat top left; height: 3px; left: 0; position: absolute; top: 0; width: 574px; } #two-column-template #main-content-bottom { background: transparent url(/template-images/rebrand-2009/layout/two-column/main-content/bottom.gif) no-repeat bottom left; bottom: 0; height: 3px; left: 0; position: absolute; width: 574px; } /* END #two-column-template #main-area-wrap layout */ /* START #homepage-template #main-area-wrap layout */ #homepage-template #main-area-wrap { background: #000000; border-bottom: 25px solid #000000; } #homepage-template #content-wrap { float: left; margin-right: -201px; width: 100%; } #homepage-template #wrapper { margin-right: 201px; } #homepage-template #highlights-panel-container { float: left; padding-left: 6px; width: 378px; } #homepage-template #player-quicklinks-container { margin-left: 384px; padding-left: 6px; } #homepage-template #player-quicklinks { } #homepage-template #sub-content { float: right; padding: 0 6px 0 6px; width: 189px; } /* END #homepage-template #main-area-wrap layout */ /* START #full-width #main-area-wrap layout */ #full-width #main-area-wrap { background: #000000; border-bottom: 25px solid #000000; } #full-width #main-content-container { padding: 0 6px 0 6px; } #full-width #main-content { background: #FFFFFF url(/template-images/rebrand-2009/layout/full-width/repeater.gif) repeat-y top left; min-height: 300px; padding: 10px; position: relative; width: 748px; } #full-width #main-content-top { background: transparent url(/template-images/rebrand-2009/layout/full-width/top.gif) no-repeat top left; height: 3px; left: 0; position: absolute; top: 0; width: 768px; } #full-width #main-content-bottom { background: transparent url(/template-images/rebrand-2009/layout/full-width/bottom.gif) no-repeat bottom left; bottom: 0; height: 3px; left: 0; position: absolute; width: 768px; } /* END #full-width #main-area-wrap layout */ /* START #secondary-nav */ #secondary-nav { margin: 0 0 25px 0; padding: 0; } #secondary-nav li { list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0; padding: 0; } #secondary-nav li a { background: #696700 url(/template-images/rebrand-2009/layout/secondary-nav/gradient-top.gif) no-repeat top left; color: #FFFFFF; display: block; font-size: 1.2727em; font-weight: bold; margin: 0; min-height: 23px; padding: 7px 8px; text-decoration: none; } #secondary-nav li a:hover { text-decoration: none; } #secondary-nav ol { background: transparent url(/template-images/rebrand-2009/layout/secondary-nav/round-bottom.gif) no-repeat bottom left; margin: 0; padding: 0 0 11px 0; } #secondary-nav ol li { background: none; border-top: 1px solid #C2C2B8; margin: 0; padding: 0; } #secondary-nav ol li a { background: none; border: 0; color: #616161; display: block; font-size: 1.0909em; font-weight: normal; line-height: 1.1em; min-height: 0; padding: 7px 8px 8px 26px; margin: 0; text-decoration: none; } #secondary-nav ol .selected a, #secondary-nav ol li a:hover { background: transparent url(/template-images/rebrand-2009/layout/secondary-nav/active-arrow.gif) no-repeat center left; } /* END #secondary-nav */ /* START #footer layout */ #footer { background: #000000 url(/template-images/rebrand-2009/layout/footer/bottom-left.gif) no-repeat bottom left; float: right; } #footer ol { background: transparent url(/template-images/rebrand-2009/layout/footer/bottom-right.gif) no-repeat bottom right; padding: 2px 12px 11px 17px; margin: 0 } #footer li { background: transparent url(/template-images/rebrand-2009/layout/footer/pipe.gif) no-repeat center left; color: #FFFFFF; display: inline; font-size: 0.9091em; margin: 0; padding: 0 8px; } #footer .first { background: transparent; } #footer a { color: #ADAA00; font-size: 1.0909em; text-decoration: none; } #footer a:hover { text-decoration: underline; } /* END #footer layout */