body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; color: #111; background-color: #E42642; font-size: 80%; font-weight: normal; background-image: url(img/HV-bg.jpg); background-repeat: repeat; line-height: 1.6em; } /* this is for sites that have a designed background to keep it from pushing up under the adminbar */ #body { } /* put .xxxColumn in the to specify which layout you want */ /* column layouts with top navigation */ /* three column */ .navigationTopStatic .threeColumn #mainColumn, .navigationTopFlyout .threeColumn #mainColumn { float: left; width: 320px; } .navigationTopStatic .threeColumn #contentContainer #subColumn, .navigationTopFlyout .threeColumn #contentContainer #subColumn { float: left; width: 280px; padding-left: 20px; padding-right: 0px; padding-top: 10px; padding-bottom: 20px; } .navigationTopStatic .threeColumn #contentContainer #extraColumn, .navigationTopFlyout .threeColumn #contentContainer #extraColumn { width: 280px; float: left; padding-left: 0px; padding-right: 20px; padding-top: 10px; padding-bottom: 20px; } /* three column with ADS*/ .navigationTopStatic .threeColumnAd #mainColumn, .navigationTopFlyout .threeColumnAd #mainColumn { float: left; width: 440px; } .navigationTopStatic .threeColumnAd #contentContainer #subColumn, .navigationTopFlyout .threeColumnAd #contentContainer #subColumn { float: left; width: 200px; padding-left: 20px; padding-right: 0px; padding-top: 10px; padding-bottom: 20px; } .navigationTopStatic .threeColumnAd #contentContainer #extraColumn, .navigationTopFlyout .threeColumnAd #contentContainer #extraColumn { width: 240px; float: left; padding-left: 0px; padding-right: 20px; padding-top: 10px; padding-bottom: 20px; } /* two column layout */ .navigationTopStatic .twoColumn #mainColumn, .navigationTopFlyout .twoColumn #mainColumn { float: left; width: 660px; } .navigationTopStatic .twoColumn #contentContainer #subColumn, .navigationTopFlyout .twoColumn #contentContainer #subColumn { width: 240px; float: left; padding-left: 0px; padding-right: 20px; padding-top: 10px; padding-bottom: 20px; } /* two column LEFT */ .navigationTopStatic .twoColumnLeft #mainColumn, .navigationTopFlyout .twoColumnLeft #mainColumn { float: left; width: 700px; } .navigationTopStatic .twoColumnLeft #contentContainer #subColumn, .navigationTopFlyout .twoColumnLeft #contentContainer #subColumn { width: 200px; float: left; padding-left: 20px; padding-right: 0px; padding-top: 10px; padding-bottom: 20px; } /* two column EVEN layout */ .navigationTopStatic .twoColumnE #mainColumn, .navigationTopFlyout .twoColumnE #mainColumn { float: left; width: 450px; } .navigationTopStatic .twoColumnE #contentContainer #subColumn, .navigationTopFlyout .twoColumnE #contentContainer #subColumn { width: 450px; padding-left: 0px; padding-right: 20px; padding-top: 10px; padding-bottom: 20px; float: left; } .navigationTopStatic .oneColumn #mainColumn, .navigationTopFlyout .oneColumn #mainColumn { width: 920px; float: left; clear: both; } #wideColumn{ width: 920px; float: left; clear: both; padding: 10px 20px 20px 20px; } /* skip to content hidden button, for minor accessibility reasons */ #skipTo { display: none; } /* putting everything in a container to keep html code down */ #pageContainer { width: 960px; margin: 0 auto; min-height: 320px; height: auto !important; height: 320px; } /* HEADER */ #header { background-image: url(img/HVheader_02.png); height: 205px; background-repeat: no-repeat; background-position: left; } #header2 { height: 60px; background-position: left; } /* supplementary navigation in the header */ #header .headerNav { float: right; padding-right: 15px; padding-top: 5px; } #header .headerNav li { display: inline; padding-right: 5px; } #header .headerNav li a { color: #C0D546; text-decoration: none; } /* NAVIGATION SCHEMES */ /* TOP NAVIGATION SCHEMES */ /* main navigation, top with flyout */ .navigationTopFlyout #navigation { height: 42px; background-image: url(img/HV-nav-bar.jpg); background-repeat: repeat-x; } .navigationTopFlyout .mainNav { clear: both; } .navigationTopFlyout .mainNav li { /* #see style-ie.css as well for changes */ float: left; position: relative; font-size: 1.05em; } .navigationTopFlyout .mainNav li a { color: #000000; display: block; text-decoration: none; text-transform: lowercase; padding: 8px 10px; font-weight: normal; } .navigationTopFlyout .mainNav li a:hover, .navigationTopFlyout .mainNav li a.selectedPage, .navigationTopFlyout .mainNav li.selectedPageRoot a { color: #FFF; background-repeat: repeat-x; background-color: #FA1925; background-image: url(img/HV-over.jpg); text-decoration: none; font-weight: normal; } /* mouseover navigation. for level 2 flyout navigation */ .navigationTopFlyout .mainNav li:hover ul.level2, .navigationTopFlyout .mainNav li:focus ul.level2, .navigationTopFlyout .mainNav li.sfhover ul.level2 { display: block; border-bottom: none !important; } .navigationTopFlyout .mainNav li ul.level2 { display: none; position: absolute; width: 120px; z-index: 3; left: 10; font-size: 0.9em; border: none; height: 38px; } .navigationTopFlyout .mainNav li ul.level2 li { padding: 0; } .navigationTopFlyout .mainNav li ul.level2 li a { color: #000000; padding: 8px 15px; width: 120px; background-color: #C0D546; background-image: none; } .navigationTopFlyout .mainNav li ul.level2 li a:hover { border-bottom: none !important; background-color: #28C6A0; color: #FFFFFF; } /* level 3 flyout navigation */ .navigationTopFlyout .mainNav li ul.level2 li:hover ul.level3, .navigationTopFlyout .mainNav li ul.level2 li:focus ul.level3, .navigationTopFlyout .mainNav li ul.level2 li.sfhover ul.level3 { display: block; } .navigationTopFlyout .mainNav li ul.level2 li ul.level3 { display: none; position: absolute; width: 120px; z-index: 3; left: 8px; font-size: 0.7em; border: none; margin-left: 140px; padding-left: 2px; top: 0px; } .navigationTopFlyout .mainNav li ul.level2 li ul.level3 a { color: #FFFFFF; padding: 2px 10px; width: 150px; border-bottom: none !important; background-color: #F25C43; } .navigationTopFlyout .mainNav li ul.level2 li ul.level3 a:hover { color: #231F20; border-bottom: none !important; background-color: #E1ECA8; } /* PAGE CONTENT AREA */ #contentContainer { min-height: 320px; height: auto !important; height: 320px; background: #fff; } #contentContainer #mainColumn { padding: 10px 20px 20px 20px; } /* bread crumb trail */ #breadCrumb { font-size: 0.9em; color: #666; padding: 4px 20px; float: left; width: 680px; height: 20px; background-color: #FFF; } #siteSwitch { padding: 0px; float: left; width: 680px; height: 40px; } a.huttKidsSwitch { width: 218px; height: 40px; float: right; margin-right: 10px; background-color: #CCC; background-image: url(img/HK-Switch.png); background-position: top; } a.huttKidsSwitch:hover { background-position: bottom; } /* SITE FOOTER/NAVIGATION */ #footer { clear: both; font-size: 0.9em; background-color: #C0D546; padding: 5px 20px; min-height: 280px; margin-top: 2px; } /* main navigation, top no flyout */ #footer .bottomNav { clear: both; padding: 5px 0; } #footer .bottomNav li { float: left; padding-right: 10px; width: 82px; } #footer .bottomNav li a { color: #333; display: block; text-align: left; font-weight: bold; border-bottom: solid 1px #333; text-transform: capitalize; padding-bottom: 2px; margin-bottom: 4px; line-height: 1.2em; } #footer .bottomNav li a:hover, #footer .bottomNav li a:focus, #footer .bottomNav li a.selectedPage, #footer .bottomNav li a.selectedPageRoot a{ color: #FFF; } /* hiding subnavs */ #footer .bottomNav li ul.level2, #footer .bottomNav li ul.level2 a{ clear: both; float: left; color: #333; display: block; font-weight: normal; border-bottom: none; } #footer .bottomNav li ul.level2 a:hover, #footer .bottomNav li ul.level2 a.selectedPage, #footer .bottomNav li ul.level2 a.selectedPageRoot { color: #FFF; } #footer .bottomNav li ul.level3, #footer .bottomNav li ul.level4 { display: none;} /* SUBNAVIGATION SCHEMES */ /* sub navigation, top, static (no flyout) */ #footer .subNavigation { background: #c7c7c7; padding: 5px 10px 5px 0; border: 1px solid #fff; border-width: 1px 0; clear: both; float: left; } #footer .subNavigation ul li { display: block; padding: 0 15px; font-size: .9em; width: 100px; float: left: } /* copyright info */ #copyright { text-align: center; font-size: 0.8em; padding: 2px 0 2px 0; color: #FFF; background-color: #E22342; }