body { font-family: 'Open Sans', helvetica, arial, sans-serif; font-weight: 400; color: #666; background-color: #E0E0E0; font-size: 75%; line-height: 1.8em; } /* this is for sites that have a designed background to keep it from pushing up under the adminbar */ #body { background-image: url(img/B-Background.png); background-position: top center; background-repeat: repeat-x; } .insideMargin { margin-left:10px; } /* 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: 920px; } .navigationTopStatic .threeColumn #contentContainer #ColumnOne, .navigationTopFlyout .threeColumn #contentContainer #ColumnOne { float: left; width: 280px; padding: 20px; } .navigationTopStatic .threeColumn #contentContainer #ColumnTwo, .navigationTopFlyout .threeColumn #contentContainer #ColumnTwo { float: left; width: 280px; padding: 20px; } .navigationTopStatic .threeColumn #contentContainer #ColumnThree, .navigationTopFlyout .threeColumn #contentContainer #ColumnThree { float: left; width: 280px; padding: 20px; } /* product layout */ .navigationTopStatic .product #mainColumn, .navigationTopFlyout .product #mainColumn { float: left; width: 920px; } .navigationTopStatic .product #contentContainer #ColumnOne, .navigationTopFlyout .product #contentContainer #ColumnOne { float: left; width: 280px; padding: 20px; } .navigationTopStatic .product #contentContainer #ColumnTwo, .navigationTopFlyout .product #contentContainer #ColumnTwo { float: left; width: 280px; padding: 20px; } .navigationTopStatic .product #contentContainer #ColumnThree, .navigationTopFlyout .product #contentContainer #ColumnThree { float: left; width: 280px; padding: 20px; } .navigationTopStatic .product #contentContainer #ColumnFour, .navigationTopFlyout .product #contentContainer #ColumnFour { float: left; width: 280px; padding: 20px; } .navigationTopStatic .product #contentContainer #ColumnFive, .navigationTopFlyout .product #contentContainer #ColumnFive { float: left; width: 280px; padding: 20px; } .navigationTopStatic .product #contentContainer #ColumnSix, .navigationTopFlyout .product #contentContainer #ColumnSix { float: left; width: 280px; padding: 20px; } .navigationTopStatic .product #contentContainer #ColumnSeven, .navigationTopFlyout .product #contentContainer #ColumnSeven { float: left; width: 280px; padding: 20px; } .navigationTopStatic .product #contentContainer #ColumnEight, .navigationTopFlyout .product #contentContainer #ColumnEight { float: left; width: 280px; padding: 20px; } .navigationTopStatic .product #contentContainer #ColumnNine, .navigationTopFlyout .product #contentContainer #ColumnNine { float: left; width: 280px; padding: 20px; } /* two column layout */ .navigationTopStatic .twoColumn #mainColumn, .navigationTopFlyout .twoColumn #mainColumn { float: left; width: 570px; } .navigationTopStatic .twoColumn #contentContainer #subColumn, .navigationTopFlyout .twoColumn #contentContainer #subColumn { float: left; width: 310px; padding: 20px; } /* two column home */ .navigationTopStatic .twoColumnHome #mainColumn, .navigationTopFlyout .twoColumnHome #mainColumn { float: left; width: 560px; } .navigationTopStatic .twoColumnHome #sidebarLeft #subColumn, .navigationTopFlyout .twoColumnHome #sidebarLeft #subColumn { float: left; width: 310px; padding: 20px; background-color: #C10909; min-height: 320px; } .navigationTopStatic .twoColumnHome #ColumnOne, .navigationTopFlyout .twoColumnHome #ColumnOne { float: left; padding: 20px 10px 20px 20px; width: 170px; } .navigationTopStatic .twoColumnHome #ColumnTwo, .navigationTopFlyout .twoColumnHome #ColumnTwo { float: left; padding: 20px 10px 20px 10px; width: 180px; } .navigationTopStatic .twoColumnHome #ColumnThree, .navigationTopFlyout .twoColumnHome #ColumnThree { float: left; padding: 20px 20px 20px 10px; width: 170px; } /* two column Even */ .navigationTopStatic .twoColumnEven #mainColumn, .navigationTopFlyout .twoColumnEven #mainColumn { float: left; width: 440px; } .navigationTopStatic .twoColumnEven #contentContainer #subColumn, .navigationTopFlyout .twoColumnEven #contentContainer #subColumn { float: left; width: 440px; padding: 20px; } /* one column layout */ #wideColumn { float: left; width: 920px; padding: 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 { min-height: 120px; } /* supplementary navigation in the header */ #header .headerNav { float: right; } #header .headerNav li { display: inline; padding: 5px; } #header .headerNav li a { color: #666; } /* site logo */ #header #logo { background-color: #C10909; width: 310px; background-image: url(img/B-BernetteLogo.png); background-position: top center; background-repeat: no-repeat; padding: 0 20px; float: left; min-height: 120px; } #header #logo a { } #shoppingBar { float: left; width: 580px; padding: 10px; background-color: #CCC; min-height: 20px; } /* NAVIGATION SCHEMES */ /* TOP NAVIGATION SCHEMES */ /* main navigation, top with flyout */ .navigationTopFlyout #navigation { padding: 10px; float: left; width: 580px; background-image: url(img/B-NavBG.png); background-position: bottom; background-repeat:no-repeat; } .navigationTopFlyout .mainNav { clear: both; padding: 5px 0; font-size: 1.1em; font-family: Arial, Helvetica, sans-serif; } .navigationTopFlyout .mainNav li { /* #see style-ie.css as well for changes */ float: left; padding: 0 10px; position: relative; } .navigationTopFlyout .mainNav li a { color: #333; display: block; text-decoration: none; } .navigationTopFlyout .mainNav li a:hover, .navigationTopFlyout .mainNav li a.selectedPage, .navigationTopFlyout .mainNav li.selectedPageRoot a { color: #C10909; } /* 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; } .navigationTopFlyout .mainNav li ul.level2 { display: none; position: absolute; width: 120px; color: #EFEFEF; padding: 5px 5px; z-index: 3; left: 0; margin: 0 0 0 10px; /* #see style-ie.css as well for changes */ font-size: 0.9em; border: none; } .navigationTopFlyout .mainNav li ul.level2 li { padding: 0; } .navigationTopFlyout .mainNav li ul.level2 li a { color: #EFEFEF; padding: 2px 10px; width: 120px; border-top: #FFF solid 1px; background: #C10909; } .navigationTopFlyout .mainNav li ul.level2 li a:hover { color: #000; background-color: #FFF; } /* 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; background: #b5b5b5; position: absolute; margin-left: 125px; left: 0; top: 3px; padding: 2px; } .navigationTopFlyout .mainNav li ul.level2 li ul.level3 a { color: #000; } .navigationTopFlyout .mainNav li ul.level2 li ul.level3 a:hover { color: #999; } /* PAGE CONTENT AREA */ #contentContainer { min-height: 360px; height: auto !important; height: 320px; background: #fff; float: left; clear: both; margin-bottom: 10px; } #contentContainer #mainColumn { padding: 20px; } #sidebarLeft { width: 350px; float: left; margin-bottom:10px; } #sidebarLeftBottom { width: 350px; background-image:url(img/B-LeftBG.png); height: 25px; float: left; } #sidebarRight { width: 600px; margin-left: 10px; float: left; } #contentTop { background-image: url(img/B-InsideContBG.png); background-position: top; background-repeat: no-repeat; min-height: 50px; } .twoColumnHome #contentTop { background-position: top; background-repeat: no-repeat; float: left; clear: both; margin-top: 20px; background-image: url(img/B-InsideContBG2.png); } /* bread crumb trail */ #breadCrumb { font-size: 0.9em; color: #666; padding: 5px 20px; float: left; width: 340px; margin-top: 10px; } .threeColumn #breadCrumb, .twoColumn #breadCrumb, .twoColumnEven #breadCrumb, .product #breadCrumb { width: 700px; ; } /* SITE FOOTER/NAVIGATION */ #footer { background: #C10909; padding: 10px; font-size: 0.9em; text-align: center; color: #FFF; clear: both; } #footer .bottomNav li { display: inline; padding: 0 15px; } #footer .bottomNav li a { color: #FFF; } /* copyright info */ #copyright { text-align: center; font-size: 0.8em; padding: 5px 0; } /* Cart */ #cart { float: right; display: block; font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; line-height: 19.5px; clear: both; min-height: 30px; width: 450px; } #cart p { display: block; overflow: hidden;} a.checkout {background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, #C10909), color-stop(0.55, #C00)); background-image: -moz-linear-gradient( center bottom, #C10909 10%, #C00 55%); background-color:#990000; padding: 1px 5px; -border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: block; float: left; border: 1px solid #990000; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .4); margin: 0 5px 0 0; font-weight: normal; text-decoration: none;} a.checkout span { background: url(template/bg-checkout.png) no-repeat left center; padding: 0 0 0 15px;} a.checkout:hover { background-image: none; background-color: #990000;} a.viewCart {background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, #999), color-stop(0.55, #CCC) ); background-image: -moz-linear-gradient( center bottom, #999 10%, #CCC 55% ); background-color: #666; padding: 1px 5px; -border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: block; float: left; border: 1px solid #215a65; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .4); font-weight: normal; text-decoration: none;} a.viewCart span { background: url(template/bg-cart.png) no-repeat left center; padding: 0 0 0 20px;} a.viewCart:hover { background-image: none; background-color: #999;} .overview { display: block; text-align: left; color: #333; text-shadow: 0 1px 0 rgba(25, 25, 25, .25); clear: both; margin: 3px 0 0 0; } #cart a { text-decoration: none;} .itemCart { padding: 0 10px; float:left; display: block; width: 270px; text-align:right; } p.nzStore { padding: 10px; background: #efefef; color: #444; text-shadow: 0 1px 0 #fff; text-align: center; border: 1px solid #999; border-radius: 4px; } p.paypal { padding: 10px; color: #444; text-shadow: 0 1px 0 #fff; text-align: center; border: 1px solid #999; border-radius: 4px; }