/** File: layout.css Validates: CSS Level 2.1 Project: LV= Liverpool Victoria Author: Kristina Floyd Date Created: 2009 01 19 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 { margin-bottom: 0.1em; height: 100%; } /* END html */ /* START body */ body { background: #024354; color: #586163; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.75em; line-height: normal; text-align: center; } /* END body */ /* START ACCESSIBILITY */ .access { position: absolute; left: -1000px; width: 100px; top: 0; } /* END ACCESSIBILITY */ /* START .container */ .container { margin: 0 auto; text-align: left; width: 943px; } /* END .container */ /* START .bottomContentContainer */ .bottomContentContainer { margin: 10px auto 0 auto; text-align: left; width: 943px; } /* END .bottomContentContainer */ /* START #header */ #header { background: #01627E url(/template-images/lv-rebrand-2009/layout/header/repeater.jpg) repeat-x bottom left; display: block; min-height: 100px; } #logos { display: block; float: left; width: 165px; } #logos #LVLogo img { margin-top: 14px; } #logos img { color: #BBCF53; display: block; } /* END #header */ /* START #extraContent */ #extraContent { display: block; float: right; text-align: right; width: 700px; } #extraContent ol { list-style: none; margin: 25px 0 0 0; padding: 0; } #extraContent li { display: inline; list-style: none; margin: 0; padding: 0; } #extraContent a { background: transparent url(/template-images/lv-rebrand-2009/layout/extraContent/divider.jpg) no-repeat center right; color: #FFFFFF; font-size: 0.9167em; font-weight: normal; padding: 0 8px; text-decoration: none; text-transform: uppercase; } #extraContent a:hover { text-decoration: underline; } #extraContent a:visited { color: #FFFFFF; } #extraContent a.selected { text-decoration: underline; } #extraContent li.last a { background: transparent; padding-right: 0; } #extraContent form { margin: 0; text-align: right; } #extraContent label { } #extraContent select { width: 150px; } /* END #extraContent */ /* START #exploreLVJS */ form#exploreLVForm { margin-top: 10px; } #exploreLVForm button { background: none; border: none; color: #BED259; cursor: pointer; font-weight: bold; } #exploreLVJS { display: block; float: right; padding-top: 10px; position: relative; text-align: left; z-index: 1; } #exploreLVJS div { background: url(/template-images/lv-rebrand-2009/layout/extraContent/dropdown.jpg) transparent no-repeat top right; cursor: pointer; height: 19px; padding: 2px 31px 0 10px; width: 157px; } #exploreLVJS ol { background: #E8EEF0; border: #0D718E solid 1px; border-top: 0; cursor: pointer; display: none; margin: 1px 0 0 0; padding: 0; position: absolute; width: 198px; z-index: 10010; } #exploreLVJS li { display: block; list-style-position: outside; padding: 0; } #exploreLVJS a { background: #E8EEF0; color: #586163; display: block; padding: 4px 10px; text-transform: none; } #exploreLVJS a:visited { color: #586163; } #exploreLVJS a:hover { background: #2D768A; color: #FFFFFF; } /* END #exploreLVJS */ /* START #primaryNav */ #primaryNav { margin: 18px auto 0 auto; } /* tab strip */ #primaryNav ol { list-style: none; margin: 0; padding: 0; } /* tab */ #primaryNav ol li { display: block; float: left; list-style: none; margin: 0 2px 0 0; padding: 0; } #primaryNav ol li a { background: transparent url(/template-images/lv-rebrand-2009/layout/primaryNav/tabOff.jpg) no-repeat top left; color: #FFFFFF; display: block; text-decoration: none; } #primaryNav ol li a span { background: transparent url(/template-images/lv-rebrand-2009/layout/primaryNav/tabOffEnd.jpg) no-repeat top right; display: block; padding: 19px 18px 9px 18px; } #primaryNav ol li a span:hover { background: transparent url(/template-images/lv-rebrand-2009/layout/primaryNav/tabOnEnd.jpg) no-repeat top right; } /* active/hovered tab */ #primaryNav ol li a:hover, #primaryNav ol li.hover a, #primaryNav ol li.selected a { background: transparent url(/template-images/lv-rebrand-2009/layout/primaryNav/tabOn.jpg) no-repeat top left; color: #003B4C; } #primaryNav ol li a:hover span, #primaryNav ol li.selected a span, #primaryNav ol li.hover a span { background: transparent url(/template-images/lv-rebrand-2009/layout/primaryNav/tabOnEnd.jpg) no-repeat top right; padding: 11px 18px 17px 18px; } /* drop down menu */ #primaryNav ol li ol { background-color: #bbd54e; display: none; margin: 0; padding: 0; position: absolute; width: auto; z-index: 10000; } #primaryNav ol li:hover ol { display: block; } /* menu items */ #primaryNav ol li ol li { border-bottom: 1px solid #FFFFFF; float: none; margin: 0; padding: 0; width: auto; } /* menu links */ #primaryNav ol li ol li a, #primaryNav ol li.hover ol li a, #primaryNav ol li.hover ol li a:hover, #primaryNav ol li.selected ol li a, #primaryNav ol li.selected ol li a:hover { background: none; color: #003B4C; padding: 6px 12px 6px 12px; } /* hovered menu links */ #primaryNav ol li.hover ol li a:hover { color: #FFFFFF; } /* END #primaryNav */ /* START #contentArea layout */ #contentArea { background: #BBCF53 url(/template-images/lv-rebrand-2009/layout/contentArea/repeater.jpg) repeat-x top left; min-height: 200px; padding: 6px 0 10px 0; } #contentContainer { position: relative; } #secondaryNav { float: left; position: relative; width: 218px; } #content { float: right; margin-left: -218px; width: 100%; } #mainContent { background: #FFFFFF url(/template-images/lv-rebrand-2009/layout/contentArea/mainContent/repeater.gif) repeat-y top right; margin-left: 218px; min-height: 500px; position: relative; } #mainContentHCE { background: #FFFFFF url(/template-images/lv-rebrand-2009/layout/contentArea/mainContent/repeater.gif) repeat-y top right; margin-left: 218px; position: relative; } #mainContentTop { background: transparent url(/template-images/lv-rebrand-2009/layout/contentArea/mainContent/top.gif) no-repeat top right; height: 14px; left: 0; position: absolute; top: 0; width: 706px; } #mainContentBottom { background: transparent url(/template-images/lv-rebrand-2009/layout/contentArea/mainContent/bottom.jpg) no-repeat bottom right; bottom: 0; height: 95px; left: 0; position: absolute; width: 706px; } #gutter, .gutter { line-height: 150%; padding: 10px 12px; position: relative; } #mainContentHCE #gutter {min-height: 20px;} /* END #contentArea layout */ /* START #contentArea .container */ #contentArea .container { background: #D7E0AB url(/template-images/lv-rebrand-2009/layout/contentArea/container/repeater.gif) repeat-y top left; min-height: 500px; padding: 20px 10px 10px 9px; position: relative; width: 924px; } #containerTop { background: transparent url(/template-images/lv-rebrand-2009/layout/contentArea/container/topCorners.jpg) no-repeat top left; height: 194px; left: 0; position: absolute; top: 0; width: 943px; } #containerBottom { background: transparent url(/template-images/lv-rebrand-2009/layout/contentArea/container/bottomCorners.gif) no-repeat bottom left; bottom: 0; height: 12px; left: 0; position: absolute; width: 943px; } /* END #contentArea */ /* START #footer */ #footer { background: #024354 url(/template-images/lv-rebrand-2009/layout/footer/repeater.jpg) repeat-x top left; color: #FFFFFF; min-height: 32px; overflow: hidden; padding: 10px 0; } #footer #address-nav { clear: left; float: left; } #footer ol { list-style: none; margin: 0 0 0 8px; padding: 0; } #footer li { display: inline; list-style: none; margin: 0; padding: 0; } #footer a { color: #FFFFFF; font-size: 0.8333em; font-weight: normal; text-decoration: none; text-transform: uppercase; } #footer #address-nav a { background: transparent url(/template-images/lv-rebrand-2009/layout/footer/divider.jpg) no-repeat center right; padding: 0 8px; } #footer a:hover { text-decoration: underline; } #footer a:visited { color: #FFFFFF; } #footer a.selected { text-decoration: underline; } #footer li.first a { padding-left: 0; } #footer #address-nav li.last a { background: transparent; } #footer address { color: #FFFFFF; font-size: 0.8333em; margin: 1em 0 1em 16px; padding-bottom: 1em; text-transform: uppercase; } #footer #social-media-nav { clear: right; float: right; font-size: 0.8333em; padding-right: 16px; } #footer #social-media-nav a { padding: 0 0 0 12px; } #financial-use { clear: right; float: right; font-size: 0.8333em; padding-right: 16px; } /* END #footer */