/* ========================================================================= */ /* UNIVERSAL STYLES */ /* ========================================================================= */ * { margin: 0; padding: 0; } html, body { font: normal 12px/150% 'Lucida Grande', Helvetica, Arial, sans-serif; color: #444; } /* ========================================================================= */ /* LAYOUT STYLES */ /* ========================================================================= */ #wrapper { width: 920px; margin: 0 auto; } #header { overflow: hidden; margin: 20px 0; } #banner { clear: both; overflow: hidden; } #contentarea { overflow: hidden; } #contentarea.index { background: url(../images/bg_border-vertical.gif) repeat-y 50% 0; } #content-main { float: left; width: 500px; border-right: 3px double #e3e3e3; padding: 1px 40px 0 0; margin: 20px 0 0 0; } #content-sub { float: right; padding: 20px 0 0 0; } #footer { margin: 20px 0; padding-bottom: 40px; border-top: 3px double #E3E3E3; font-size: 10px; clear: both; } /* ========================================================================= */ /* ELEMENT STYLES */ /* ========================================================================= */ h1 { font-size: 30px; margin: 0 0 20px 0; font-family: Helvetica, Arial, sans-serif; text-transform: uppercase; color: #90BF33; line-height: 120%; } h2 { font-size: 24px; margin: 20px 0 10px 0; font-family: Helvetica, Arial, sans-serif; text-transform: uppercase; line-height: 130%; color: #90BF33;} h3 { font-size: 16px; margin: 20px 0 10px 0; font-family: Helvetica, Arial, sans-serif; line-height: 130%; } h4 { font-size: 14px; margin: 20px 0 10px 0; font-family: Helvetica, Arial, sans-serif; line-height: 130%; } p { margin: 10px 0; } ul { margin: 10px 20px 10px 0; } ul li { list-style: none; padding: 7px 10px; border-bottom: 1px solid #eaeaea; border-left: 3px solid #eaeaea; } ol { margin: 20px 20px 20px 25px; } a { text-decoration: none; color: #90BF33; } a:hover { text-decoration: underline; } a:focus { border: none; outline: none; } blockquote { margin: 20px 20px 0 20px; } cite { margin: 0 20px 20px 20px; } hr { border: 1px solid #e3e3e3; border-right: none; border-left: none; background: transparent; height: 3px; margin: 20px 0; } /* = ELEMENT STYLES: Classes and ID's ====================================== */ h1.logo { float: left; margin: 0 20px 0 0; } h1.logo a { display: block; text-indent: -9000px; background: url(../images/logo.jpg) no-repeat 0 0; width: 161px; height: 97px; } p.tag { color: #aaa; text-transform: uppercase; font: normal 14px Helvetica, Arial, sans-serif; padding: 20px 0 0 0; } p.tag span { font-size: 10px; } #slideshow { float: left; } img.float-right { float: right; margin: 0 0 20px 20px; } #banner-nav { float: right; } #banner-nav ul { margin: 0; list-style: none; } #banner-nav ul li { padding: 0; border: none; } #banner-nav ul li a { display: block; width: 270px; height: 57px; padding: 15px; color: #fff; text-shadow: #000 0 1px 0; font: normal 10px 'Lucida Grande', Helvetica, Arial, sans-serif; } #banner-nav ul li a:hover { text-decoration: none; text-shadow: #587321 0 1px 0; } #banner-nav ul li.banner-nav_1 a { background: url(../images/bg_nav-banner.gif) no-repeat 0 0; } #banner-nav ul li.banner-nav_1 a:hover { background: url(../images/bg_nav-banner.gif) no-repeat 0 -500px; } #banner-nav ul li.banner-nav_2 a { background: url(../images/bg_nav-banner.gif) no-repeat 0 -87px; } #banner-nav ul li.banner-nav_2 a:hover { background: url(../images/bg_nav-banner.gif) no-repeat 0 -587px; } #banner-nav ul li.banner-nav_3 a { background: url(../images/bg_nav-banner.gif) no-repeat 0 -174px; } #banner-nav ul li.banner-nav_3 a:hover { background: url(../images/bg_nav-banner.gif) no-repeat 0 -674px; } #banner-nav ul li.banner-nav_4 a { background: url(../images/bg_nav-banner.gif) no-repeat 0 -261px; } #banner-nav ul li.banner-nav_4 a:hover { background: url(../images/bg_nav-banner.gif) no-repeat 0 -761px; } #banner-nav ul li a strong { font: bold 16px/24px Helvetica, Arial, sans-serif; text-transform: uppercase; } #highlight { margin: 20px 0; background: #7BA920 url(../images/bg_highlight.gif) repeat-x 0 0; padding: 5px; text-shadow: #587321 0 1px 0; border: 1px solid #D0E971; border-right: 1px solid #407218; border-bottom: 1px solid #407218; } #highlight h1 { padding: 0; margin: 0; font: bold 14px/21px Helvetica, Arial, sans-serif; color: #fff; text-align: center; text-transform: uppercase; } #content-1 { float: left; width: 260px; margin: 0 60px 0 0; } #content-2 { float: left; width: 280px; } #content-3 { float: right; width: 260px; } #slides { position: relative; } .mask { width: 340px; height: 240px; position: absolute; top: 0; left: 0; background: url(../images/image-mask.png) no-repeat 0 0; z-index: 1000; } #footer a { color: #bbb; } #footer a:hover { color: #90BF33; text-decoration: none; } p.footer-nav { float: right; margin: 5px 0; color: #bbb; } p.copyright { float: left; margin: 5px 0; color: #bbb; } /* ========================================================================= */ /* NAV STYLES */ /* ========================================================================= */ ul#nav { float: left; margin: 20px 0 0 0; list-style: none; clear: both; width: 920px; font: normal 12px/150% Helvetica, Arial, sans-serif; } ul#nav li { float: left; height: 51px; background: url(../images/bg_nav.gif) no-repeat 50% 0; padding: 0; border: 0; } ul#nav li.home { background: url(../images/bg_nav.gif) no-repeat 0 0; } ul#nav li.contact { background: url(../images/bg_nav.gif) no-repeat 100% 0; } ul#nav li a { display: block; text-transform: uppercase; text-align: center; color: #fff; line-height: 49px; padding-top: 2px; } ul#nav li a:hover { text-decoration: none; } ul#nav li.home a { width: 98px; border-right: 1px solid #929292; } ul#nav li.home a.on, ul#nav li.home a:hover { background: url(../images/bg_nav.gif) no-repeat 0 -200px; border-right: 1px solid #C2E383; } ul#nav li.about a { width: 105px; border-right: 1px solid #929292; border-left: 1px solid #242424; } ul#nav li.about a.on, ul#nav li.about a:hover { background: url(../images/bg_nav.gif) no-repeat 50% -200px; border-right: 1px solid #C2E383; border-left: 1px solid #407218; } ul#nav li.printing a { width: 265px; border-right: 1px solid #929292; border-left: 1px solid #242424; } ul#nav li.printing a.on, ul#nav li.printing a:hover { background: url(../images/bg_nav.gif) no-repeat 50% -200px; border-right: 1px solid #C2E383; border-left: 1px solid #407218; } ul#nav li.retail a { width: 202px; border-right: 1px solid #929292; border-left: 1px solid #242424; } ul#nav li.retail a.on, ul#nav li.retail a:hover { background: url(../images/bg_nav.gif) no-repeat 50% -200px; border-right: 1px solid #C2E383; border-left: 1px solid #407218; } ul#nav li.catalog a { width: 121px; border-right: 1px solid #929292; border-left: 1px solid #242424; } ul#nav li.catalog a.on, ul#nav li.catalog a:hover { background: url(../images/bg_nav.gif) no-repeat 50% -200px; border-right: 1px solid #C2E383; border-left: 1px solid #407218; } ul#nav li.contact a { width: 118px; border-left: 1px solid #242424; } ul#nav li.contact a.on, ul#nav li.contact a:hover { background: url(../images/bg_nav.gif) no-repeat 100% -200px; border-left: 1px solid #407218; } /* ========================================================================= */ /* FORM STYLES */ /* ========================================================================= */ form ul { margin: 0; padding: 0; } form li { list-style: none; } form li ul { margin: 0; } label.description { display: block; font-weight: bold; } label.choice { padding-left: 5px; } input.text { width: 300px; } input.checkbox { } input.radio { } textarea { width: 300px; height: 100px; font: normal 12px/150% Helvetica, Arial, sans-serif; } select { width: 300px; }