element of the page, it is used to constrain our content to 800 pixels wide centered in the browser. We apply a background image to it, and left align the text */ #mainWrapper { margin: 0 auto; /* margin 0 for top and bottom so it sticks to the very top of the browser, side margins to auto so it centers itself in the page */ width: 950px; background: url(images/bg_home_center.png) top center repeat-y; text-align: left; padding: 0 8px; } #mainContent { margin: 0 auto; /* margin 0 for top and bottom so it sticks to the very top of the browser, side margins to auto so it centers itself in the page */ width: 950px; min-height:1189px; background: #FFF url(images/bg_beach_3.jpg) center 510px no-repeat; text-align: left; padding: 0 0px; } #logo { width:950px; height:510px; position:relative; /*top:0px; left:86px;*/ margin: 0 auto; z-index:10; background: #FFF url(images/logo_3.jpg) top center no-repeat; } /* Content */ #contentWrapper /* this element will contain two elements that each float */ { width: 890px; min-height: 300px; /* with no content a

will have a default height of 0, so tell the browser to keep it at a certain height regardless */ padding: 10px 30px 20px 30px; } #contentWrapper #leftContent { width: 318px; /* our main content area needs to be this wide */ padding-right:10px; } #contentWrapper #rightContent { width: 562px; /* this is what we get after subtracting margins, borders, and padding from mainwrapper, contentwrapper, and content */ margin:0px; color:#666666; font-size: 0.8em; } #promo1Wrapper { width: 562px; /* this is what we get after subtracting margins, borders, and padding from mainwrapper, contentwrapper, and content */ height: 184px; margin-bottom:20px; background: url(images/promo_bg_yellow.png) top center no-repeat; position:relative; left:0px; top:0px; z-index:10; } #promo1Content { width: 537px; /* this is what we get after subtracting margins, borders, and padding from mainwrapper, contentwrapper, and content */ font-size: 1.8em; line-height:1.3em; text-align:center; position:absolute; left:-100px; top:50px; z-index:999; } #promo1Content p { padding-bottom: 5px; } #promo2Wrapper { width: 562px; /* this is what we get after subtracting margins, borders, and padding from mainwrapper, contentwrapper, and content */ margin-bottom:20px; height: 184px; background: url(images/promo_bg_blue.png) top center no-repeat; position:relative; left:0px; top:0px; z-index:10; } #promo2Content { width: 537px; /* this is what we get after subtracting margins, borders, and padding from mainwrapper, contentwrapper, and content */ font-size: 1.8em; line-height:1.3em; text-align:center; position:absolute; left:-100px; top:50px; z-index:999; } #promo2Content p { padding-bottom: 5px; } #promo3Wrapper { width: 562px; /* this is what we get after subtracting margins, borders, and padding from mainwrapper, contentwrapper, and content */ margin-bottom:20px; height: 184px; background: url(images/promo_bg_green.png) top center no-repeat; position:relative; left:0px; top:0px; z-index:10; } #promo3Content { width: 537px; /* this is what we get after subtracting margins, borders, and padding from mainwrapper, contentwrapper, and content */ font-size: 1.8em; line-height:1.3em; text-align:center; position:absolute; left:-100px; top:50px; z-index:999; } #promo3Content p { padding-bottom: 5px; } /* Footer positioned so as to always remain on top */ #footerWrapper { margin: 0 auto; /* margin 0 for top and bottom so it sticks to the very top of the browser, side margins to auto so it centers itself in the page */ width: 950px; height:78px; background: #FFF url(images/bg_footer1.jpg) top center no-repeat; text-align: left; padding: 0 0px; } #footer { font-family: Helvetica, arial, Verdana, sans-serif; color:#000; line-height:1.3em; font-size: 0.875em; padding:12px 30px 5px 30px; } #footer > ul { padding: 0 0 0 38px; margin: 0; } #footer li { padding: 0; display: inline; } .copyright { font-family: Helvetica, arial, Verdana, sans-serif; color:#666; line-height:1.3em; font-size: 0.875em; padding:12px 30px 5px 0px; } /* Clear Floats */ /* these are the clearfix rules for elements whose children float */ .clearfix:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } .clearboth {clear:both;} .floatleft {float: left; } .floatright {float: right; } .header_globalnav_container { background: none; width: 900px; height: 60px; /* text-align: center;*/ margin: 24px auto 0 auto; padding-left: 30px;/* border: solid 1px #000;*/ } .header_globalnav_container ul { height: 60px; } #globalNav { } #globalNav a:link, #globalNav a:visited, #globalNav a:hover, #globalNav a:active, #globalNav a:visited:hover { text-decoration: none; } #globalNav span { visibility: hidden; } .header_globalnav_container ul { height: 60px; } .header_globalnav_container li { display: inline; height: 60px; /*border: solid 1px #900;*/ } li#nav_home, li#nav_products, li#nav_retailers, li#nav_company, li#nav_contact { height: 60px !important; width: 240px; /*background-image: url(images/nav_sprite.png); */ padding: 0 } li#nav_home { } li#nav_products { } li#nav_home a:link, li#nav_home a:visited, li#nav_home a:hover, li#nav_home a:active, li#nav_home a:visited:hover, li#nav_products a:link, li#nav_products a:visited, li#nav_products a:hover, li#nav_products a:active, li#nav_products a:visited:hover, li#nav_retailers a:link, li#nav_retailers a:visited, li#nav_retailers a:hover, li#nav_retailers a:active, li#nav_retailers a:visited:hover, li#nav_company a:link, li#nav_company a:visited, li#nav_company a:hover, li#nav_company a:active, li#nav_company a:visited:hover, li#nav_contact a:link, li#nav_contact a:visited, li#nav_contact a:hover, li#nav_contact a:active, li#nav_contact a:visited:hover { position: relative; background-image: url(images/nav_sprite.png); height: 60px; text-decoration: none; } li#nav_home a:link, li#nav_home a:visited { padding: 20px 54px 15px 64px !important; background-position: 6px top; } li#nav_home a:hover, li#nav_home a:active, li#nav_home a:visited:hover { background-position: 6px -69px; } li#nav_products a:link, li#nav_products a:visited { padding: 20px 40px 15px 50px !important; background-position: -195px top; } li#nav_products a:hover, li#nav_products a:active, li#nav_products a:visited:hover { background-position: -195px -69px; } li#nav_retailers a:link, li#nav_retailers a:visited { padding: 20px 40px 15px 50px !important; background-position: -350px top; } li#nav_retailers a:hover, li#nav_retailers a:active, li#nav_retailers a:visited:hover { background-position: -350px -69px; } li#nav_company a:link, li#nav_company a:visited { padding: 20px 60px 15px 70px !important; background-position: -500px top; } li#nav_company a:hover, li#nav_company a:active, li#nav_company a:visited:hover { background-position: -500px -69px; } li#nav_contact a:link, li#nav_contact a:visited { padding: 20px 24px 15px 34px !important; background-position: -720px top; } li#nav_contact a:hover, li#nav_contact a:active, li#nav_contact a:visited:hover { background-position: -720px -69px; } /*li#nav_retailers a:link, li#nav_company a:link, li#nav_contact a:link { height: 60px; border: solid 1px #fc0; }*/