/* Meyer's Browser Default Reset (http://meyerweb.com/eric/tools/css/reset/) - v1.0 | 20080212 -------------------------------------------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* Foundation ------------------------------------------------------*/ body { color: #666; font: 0.9em/1.34 arial, helvetica, sans-serif; background: #9cf url(../_img/bgtile.jpg) repeat-x; } textarea, input { font-family:arial, helvetica, sans-serif; font-size:11px; margin:0; padding:0; } a { color: #00958E; } a:hover { text-decoration: none; } #container { width: 980px; margin: 0 auto 20px auto; } #content-container { clear: both; float:left; background: #fff; } #content { width: 100%; float: left; display: inline; margin:0 0 20px 0; } #product-header { margin:0 0 5px 10px; } #content-header { border-bottom: 2px solid #00958E; } input { font-family:Arial, Helvetica, sans-serif; } #newsletter { width:230px; height:210px; background:url(../_img/newsletterbg.jpg) top left no-repeat; } #newsletter form { margin:50px 30px 0 33px; padding:0; float:left; display:inline; } #newsletter input { margin:0; padding:0; } #newsletter input.form-text {float:left; width:155px; padding:2px; color:#268CBF; background:#fff; border:1px solid #9cf; font-size:10px; margin:5px 0 0 0; } #newsletter input.form-submit { margin:5px 0 0 0; } #newsletter p { font-size:10px; color:#fff; } #newsletter label { margin:3px 0 0 0; float:left; display:inline; font-size:10px; color:#268CBF; } #newsletter input.checkbox { margin:3px 3px 0 3px; } /* Header ------------------------------------------------------*/ #header { width: 980px; background: #fff url(../_img/headerbg.jpg) no-repeat; overflow: hidden; } #header-top { width:980px; height:60px; } #header-top h3 { display:none; } #call-us { margin:27px 0 0 0; width:343px; height:27px; float:left; background:url(../_img/callus.jpg) no-repeat; } #search { width:230px; height:60px; float:left; display:inline; } #search .form-text { float:left; width:145px; padding:2px; color:#268CBF; background:#E5F2FF; border:1px solid #9cf; font-size:10px; margin:20px 0 0 0; } #search .form-submit { float:left; margin:19px 0 0 5px; } #global-nav { font-size:10px; color:#e6e6e6; } #global-nav p { float:right; margin:35px 20px 0 0; } #global-nav a { color:#6D92B4; text-decoration:none; } #global-nav a:hover { color:#6D92B4; text-decoration:underline; } /* Navigation ------------------------------------------------------*/ #navigation { width: 960px; margin:0 10px; padding:0; float: left; display: inline; border-top: 2px solid #184D7F; background: #fff url(../_img/navbg.jpg) repeat-x; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; } #navigation ul { font-size: 1.1em; margin: 0 0 0 7px; } #navigation ul li { float: left; border-left: 1px solid #184D7F; position: relative; } #navigation ul li.first { border: none; } #navigation ul li a { display: block; float: left; padding: 9px 12px; color: #fff; text-decoration: none; } #navigation ul li a:hover { background: #184D7F; } /* Suckerfish */ #navigation ul li ul { position: absolute; background: #184D7F url(../_img/subnavbg.jpg) repeat-x; border: 1px solid #5b5b5b; border-top: none !important; width: 170px; top: 38px; left: -999em; clear: left; z-index: 999; font-size: 0.8em; margin: 0; padding: 0; } #navigation ul li ul ul, #navigation ul li:hover ul ul, #navigation ul li.sfhover ul ul { position: absolute; top: 0; left: -999em; z-index: 999; font-size: 0.9em; margin-left: 170px; } #navigation ul li ul li { border: none !important; } #navigation ul li ul a { display: block; text-align: left; width: 160px; text-transform: capitalize; padding: 5px; background: none; border-top: 1px solid #069; color: #ffc; } /* Make Top-level styles stick on hover */ #navigation li:hover ul, #navigation li.sfhover ul { left: auto; } #navigation li li:hover ul, #navigation li li.sfhover ul, #navigation li:hover li:hover ul, #navigation li.sfhover li.sfhover ul { left: auto; } #navigation ul li:hover a, #navigation ul li:hover a:hover, #navigation ul li.sfhover a:hover { background: #184D7F; } #navigation ul li:hover li a, #navigation ul li.sfhover li a { } #navigation ul li:hover li a:hover, #navigation ul li.sfhover li a:hover { background: #069; color: #fff; } /* Home-Flash ------------------------------------------------------*/ #home-flash { float: left; display: inline; width: 960px; border-top: 2px solid #184D7F; margin:0 10px; } #home-flash img { float: left; display: inline; padding:0; } /* Home-Content ------------------------------------------------------*/ #home-left { width:640px; float:left; display:inline; overflow:hidden; margin:0; padding:0; } #home-left h1 { margin:20px 0 10px 20px; width: 600px; height:30px; background:url(../_img/start-here.jpg) top center no-repeat; } #home-left h1 span { display:none; } #start-blocks { float:left; width:630px; display:block; margin:0; min-height:120px; } div.start-block { width:190px; height:120px; float:left; margin:0 0 10px 15px; padding:0; } div.start-block img { float:right; display:inline; } div.start-block h2 { color:#1B5081; font-size:1em; font-weight:normal; font-family:Helvetica, arial, sans-serif; margin:10px 70px 5px 10px; } div.start-block p { font-size:.8em; margin:0 70px 0 10px; } div.start-block p a { -moz-border-radius:5px; -webkit-border-radius:5px; background:#00958E; color:#fff; padding:2px 5px; text-decoration:none; } div.start-block p a:hover { background:#1B5081; color:#fff; } #home-left div.block { border-top:2px solid #C5E3FF; width:375px; float:left; margin:10px 15px 0 15px; padding:15px 0 5px 0; } #home-left div.block img { float:left; display:inline; padding:5px; background:#C5E3FF; margin:0 15px 0 0; } #home-left div.block h2 { color:#1B5081; font-size:1.2em; } #home-left div.block h3 { color:#333; font-size:.95em; } #home-left div.block p { font-size:.9em; } #home-left #newsletter { float:left; margin:0; display:inline; } #home-right { float:right; display:inline; margin:10px 10px 0 40px; overflow:hidden; margin:0; padding:0; } #eco-difference { margin:10px; } /* Right-Column ------------------------------------------------------*/ #right-column { float: left; display: inline; width: 740px; margin: 0 2px 0 0; padding: 0; } #right-column div.text-column { width: 357px; float: left; display: inline; margin: 32px 20px 20px 22px; } #right-column div.text-column img { float:right; border:5px solid #ccc; margin:0 0 5px 5px; } #right-column div.text-column img.left { float:left; margin:0 5px 5px 0; } #right-column h1 { float:left; width:730px; background:url(../_img/int-h1bg.jpg) no-repeat; color:#00958E; padding: 7px 0 7px 10px; clear:right; font-size: 1.4em; font-weight: normal; letter-spacing:1px; margin: 0 0 12px 0; } #right-column h1 strong { float:left; font-weight:normal; } #right-column h1 em { float:right; display:inline; font-size:10px; letter-spacing:0; font-style:normal; margin: 5px 10px 0 0; } #right-column h1 em a { float:left; background:#fff; padding:7px 10px 7px 5px; border-top:1px solid #9cf; border-right:1px solid #9cf; border-left:1px solid #9cf; } #right-column p { font-size: 0.875em; margin: 5px 200px 15px 10px; line-height:1.6em; } #right-column h3 { font-size: 1.1em; margin: 5px 0 5px 10px; color:#333; } #right-column img { float:right; margin:0 0 20px 20px; display:inline; } #right-column img.header { margin:0; } #right-column .block { float:left; display:block; padding:20px 20px 0 20px; } #right-column .block img { float:right; margin:0 0 10px 10px; /*border:5px solid #ccc;*/ } #right-column .block p { margin:0 0 10px 0; } #right-column .block h3 { margin:0; } #right-column ul { list-style:disc; font-size: 0.875em; margin: 5px 50px 15px 50px; } #right-column ul li { list-style:disc; } #right-column div#forms { width:670px; margin:0 4px; padding:0 30px; } #right-column form { float:left; margin:0 10px 0 10px; padding:0; } #right-column form div.form { float:left; width:300px; margin:0 0 10px 10px; padding:0; } #right-column form div.formc { float:left; clear:both; display:block; margin:0 0 5px 10px; padding:0; } #right-column label { float:left; clear:left; margin:0 0 2px 0; } #right-column input.text { float:left; display:inline; clear:left; background:#eee; width:250px; margin:0 0 10px 0; border:1px solid #999; border-top:none; border-left:none; padding:4px; } #right-column input:focus { background:#ffc; } #right-column select { float:left; clear:left; background:#eee; margin:0 0 10px 3px; } #right-column textarea { float:left; clear:both; display:inline; background:#eee; height:120px; width:400px; margin:0 0 10px 0; border:1px solid #999; border-top:none; border-left:none; padding:rpx; } #right-column textarea:focus { background:#ffc; } #right-column input.form-button { padding:5px 20px; margin: 5px 0 0 3px; float:left; clear:left; } #right-column input.form-button:hover { } #right-column #captcha { float:left; clear:left; } #right-column #captcha img { margin:0 0 0 3px; } #right-column p.error { color:red; } #product-form { background:#fff url(../_img/formbg.jpg) top left no-repeat; font-size:.8em; width:718px; float:left; display:inline; overflow:hidden; border:1px solid #9cf; border-top:none; margin:-20px 0 20px 10px; padding:0; } #product-form h3 { clear:both; } /* Breadcrumbs ------------------------------------------------------*/ #breadcrumbs { background: #DDEFFF; padding: 5px 10px; font-family:Arial, Geneva, sans-serif; margin:0 10px; border-top:1px solid #9cf; } #breadcrumbs p { font-size: 0.75em; color: #666; } #breadcrumbs p strong { display: block; float: left; width: 14px; height: 14px; text-indent: -20000px; background: url(../_img/breadcrumb_arrow.gif) no-repeat; margin-right: 10px; } #breadcrumbs p a { color: #666; } #breadcrumbs p span { margin: 0 4px; } #breadcrumbs p a.active { text-decoration: none; font-weight: bold; } /* Left-Column ------------------------------------------------------*/ #left-column { width: 230px; float: left; display: inline; margin:0; padding:0; } #left-column div.side-block { width:170px; float:left; margin:5px 0 0 20px; padding:0; border-bottom: 2px solid #C5E3FF; } #left-column div.side-block img { float:right; display:inline; } #left-column div.side-block h4 { color:#1B5081; font-size:.9em; font-weight:normal; font-family:Helvetica, arial, sans-serif; margin:0; } #left-column div.side-block p { font-size:.8em; margin:0 0 5px 0; } /* Sub-Navigation ------------------------------------------------------*/ #sub-navigation { margin:0 0 0 10px; } #sub-navigation h2 { width:190px; font-size: 1.3em; text-align:center; font-family: Helvetica, Arial, san-serif; letter-spacing: 1px; color:#184D7F; padding:12px 21px 12px 12px; } #sub-navigation ul { background: #fff url(../_img/sideblockbg.jpg) no-repeat; padding: 10px 8px; min-height: 100px; height: auto !important; height: 100px; } #sub-navigation ul li { font-size: 0.85em; font-weight: bold; } #sub-navigation ul li a { color: #184D7F; display: block; padding: 5px 2px; width: 190px; text-decoration: none; border-bottom: 1px solid #C5E3FF; } #sub-navigation ul li a:hover { color: #00958E; } #sub-navigation ul ul { background:none; margin:0; margin:-10px 0 0 0; min-height: 2px; height: auto !important; height: 2px; } #sub-navigation ul ul li { width:180px; } #sub-navigation ul ul li a { width:180px; border:0; color:#069; } /* Footer ------------------------------------------------------*/ #footer { width: 980px; float: left; color: #666; margin: 0 0 40px 0; background: #fff url(../_img/footerbg.jpg) left bottom no-repeat; } #footer p { float:left; width:960px; font-size: 0.75em; border-top: 2px solid #C5E3FF; margin: 0 10px; padding:10px 0; background:url(../_img/ecofooter.jpg) 700px 10px no-repeat; } #footer p a { color: #666; text-decoration: underline; } #footer p span { display:none; }