
/* styles.css - main stylesheet
 *
 * Copyright, 2007 Toilid, Inc. All Rights Reserved.                         
 * Author: Tom Lwis (www.lwis.net)
 *
 */

@import "reset.css";
@import "forms.css";

body { background-color: #f2f2f2; color: #666; font: .76em/1.5em Verdana, Geneva, Arial, Helvetica, sans-serif; }

a,a:link,a:visited { color: #0066cc; }
a:hover { color: Black; }

a.nav { color: #999; }
a.nav:hover { color: #000; }

p { margin-bottom: 1em; }

ul { list-style: disc; padding: .5em 0 .5em 2em; }
ol { list-style: decimal; padding: .5em 0 .5em 2em; }
ul.reset, ul.reset ul, ul.reset ol, ol.reset, ol.reset ol, ol.reset ul { list-style: none; margin: 0; padding: 0; }

big { font-size: 1.15em; }
small { font-size: .85em; }

p.more { padding-left: 20px; background: url(../images/arrow-right2.gif) center left no-repeat; }
p.secure { padding-left: 20px; background: url(../images/icon-lock.png) center left no-repeat; text-transform: uppercase; }

img.rflt { display: inline; float: right; margin: 0 0 1em 10px; }
img.lflt { display: inline; float: left; margin: 0 10px 1em 0; }

.important { color: #0066cc; }
.edge { float: right; }
.clear { clear:both; }
.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }


/* Paging */

.paging { color: #999; font-size: 1.5em; font-weight: normal; }
.paging span.on { color: #999; padding: 1px 3px; }



/* Titles */

h1,h2,h3,h4,h5,h6 { color: #333; line-height: normal; }
h2 { margin-bottom: .5em; color: #333; font-size: 1.52em; font-weight: normal; }
h3 { margin: 1em 0; color: #333; font-size: 14px; }

h2.section { padding: .3em 10px; background: url(../images/bg1.png) top center no-repeat; }

#logo { display: inline; float: left; width: 184px; height: 44px; margin: 18px 0 0 15px; font-size: 300%; text-transform: uppercase; }
#logo a, #logo a:visited { color: #fff; }
#logo a:hover { color: #0077bf; }
#logo img { display: block; }

#pagetitle { padding: 40px 0 0 25px; font-size: 250%; }
#outline { padding: 34px 0 0 14px; }


/* Layout  */

body div.wrap { width: 800px; margin: 0 auto; text-align: left; }
#container { text-align: center; }
#header { min-height: 80px; background: #020a11 url(../images/grad1.gif) top left repeat-x; color: #fff; }
#banner { background: #1d65af url(../images/grad2.gif) top left repeat-x; color: #fff; }
#banner .inner { height: 118px; background: #0161c4 url(../images/bg-header.jpg) bottom center no-repeat; }
#home #banner .inner { height: 187px !important; }
#content { background-color: #fff; }
#content .inner { padding: 25px 15px 208px; }
#sidebar { float: right; width: 174px; margin-bottom: 2em; }
#mainbar { float: left; width: 580px; margin-bottom: 2em; }
#footer { position: relative; z-index: 1; margin-top: -208px; clear: both; }
div.col { float: left; width: 49.9%; }

* html #header { height: 80px; }


/* Navigation */

#nav { display: inline; float: right; margin: 30px 8px 0 0; }
#nav li { display: inline; margin: 0 7px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; }
#nav li a, #nav li a:visited { color: #999; }
#nav li a:hover { color: #0066cc; }
#nav li .on { color: #fff !important; }


/* Box type 1 */

.box { min-height: 1%; }

.box1 { margin-bottom: 2em; background: url(../images/grad5.gif) bottom left repeat-x; }
.box1 .before { padding-top: 10px; background: url(../images/bg-corners1.png) top center no-repeat; }
.box1 .after { padding: 0 12px 10px; background: url(../images/bg-corners1.png) bottom center no-repeat; }

* html .box .after { height: 1%; }

/* Models */

#models ul li { float: left; width: 33%; }

/* Manufacturers */

#manufacturers { background-image: url(../images/grad4.gif);}
#manufacturers ul { font-size: 1.2em; line-height: 1.5em; }


/* Welcome pic */

#welcomePic { text-align: center; }
#welcomePic img { display: block; margin: 0 auto; }




/* Generic list types */

ul.sublinks { font-family: Tahoma, Arial, Helvetica, sans-serif; }
ul.sublinks li a { color: #666; }
ul.sublinks li a:hover, ul.sublinks li a.on { color: #0066cc; }

ul.highlights { margin: 1em 0 1em 20px; }
ul.highlights li { padding-left: 12px; background: url(../images/arrow-right2.gif) center left no-repeat; }

ul.features { margin: 1em 0; }
ul.features li { padding-left: 12px; background: url(../images/bullet1.gif) center left no-repeat; }


/* Distributors */

#distributors li { width: 50%; padding: 20px 0; text-align: center; }
#distributors li.odd { float: left; }
#distributors li.even { float: right; }


#partners { clear: both; margin: 1em 0; text-align: center; }
#partners li { display: inline; }
#partners li img { margin: 0 8px; vertical-align: middle; }


/* Home buttons */

.featurette { width: 237px; float: left; height: 82px; margin-bottom: 2em; background: url(../images/bg-button.png) no-repeat; text-align: center; }
.featurette h2 { margin-bottom: .3em; padding-top: 10px; font-family: Verdana, sans-serif; font-size: 20px; color: #0066cc; font-weight: normal; letter-spacing: -1px; }
.featurette a { padding-bottom: 15px; font-family: Verdana, sans-serif; font-size: 15px; color: #999; background: url(../images/arrow-right.gif) bottom center no-repeat; }
.featurette a:hover { color: #000; }
.featurette.on * { color: #000 !important; }

#acquaint { margin-left: 10px; }
#acquaint, #find { margin-right: 20px; }




/* Products */

#products .row { clear: both; float: left; width: 100%; padding: 50px 0; background: url(../images/separator2.gif) bottom center no-repeat; }
#products .row.first { padding-top: 15px; }
#products .row.last { padding-bottom: 15px; background-image: none; }
#products .row li { float: left; width: 270px; }
#products .row li.even { float: right; padding-left: 21px; background: url(../images/separator1.gif) left center no-repeat; }
#products .row li h3 { margin: .5em 0 .2em; font-size: 18px; font-weight: bold; }
#products .row li h3 a, #products .row li h3 a:visited { color: #000; }
#products .row li h3 a:hover { color: #0066cc; }
#products .row li img { float: left; margin-right: 5px; }
#products .row li dl dd { font-size: 12px; line-height: 1.5em; letter-spacing: -.5px; }
#products .row li .retail { margin: 1em 0 1em; color: #000; }
#products .row li .retail strong { font-size: 14px; }

/* Product */

#product { font-size: 14px; }
#product h2 { font-size: 26px; }
#product h3 { margin: .5em 0; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; }
#product .retail { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; text-align: right; }
#product .preview { text-align: center; }
#product .more { margin-top: 2em; }


.contactDetails { margin-top: 3em; }
.contactDetails dl { display: inline; width: 170px; float: left; margin: 0 25px 30px 0; }
.contactDetails dl dt { color: #333; font-family: Verdana, sans-serif; font-size: 14px; font-weight: bold; }
.contactDetails .phone dt { visibility: hidden; }
.contactDetails .plant { margin-right: 0; }



/* Tables */

table th { color: #0066cc; }


/* Cart list */

table#cart tr.totals th { text-align: right; }
table#cart tr.subtotal td, table#cart tr.shipping td { color: #0066cc; }
table#cart .total, table#cart tr.totals td { width: 20%; text-align: center; }
table#cart .remove, table#cart .quantity { text-align: center; }
table#cart td.item h2 { margin-bottom: 0; }


/* Checkout */

#checkout { font-size: 1.32em; }
#checkout .inner { padding: .7em 10px; }
#checkout h3 { margin: 0 0 1em; color: #0066cc; font-size: 1em; }
#addresses fieldset { margin-bottom: 1em; }
#addresses .star { float: right; width: 45%; }


/* Thankyou */

#thankyou { min-height: 360px; border-top: solid 2px #ccc; background: url(images/bg2.png) top right no-repeat; font-size: 1.22em; }
#thankyou h2 { margin: 1em 0 .5em; font-size: 28px; color: #0066cc; }



/* Global footer */

#footer { height: 208px; background: url(../images/grad3.gif) top left repeat-x; }
#footer .inner { padding-top: 50px; }
#footer .contactDetails { margin-top: 0; }
#footer .logo { float: right; }

#pagemeta { clear: both; color: #999; }
