/* Complete Supply Co. Stylesheet */
* {margin: 0; padding: 0;} span, label, address {display: none;} a img, fieldset {border: none;} a {color: #f00; text-decoration: none;} a:hover {color: #000;} body {font-family: arial, sans; color: #333; background: url('images/bg.jpg'); font-size: 12px;} h1 {text-transform: uppercase; font-size: 26px; letter-spacing: -1px;} h2 {color: #f00; text-transform: uppercase; letter-spacing: -1px; font-size: 20px; margin: 0 0 5px 0;} h3 {text-transform: uppercase; font-size: 14px; color: #f00;}
p {line-height: 22px; margin: 0 0 20px 0;} hr {margin: 20px 0; border: none; height: 1px; background: #111; height: 1px;}
.field, #contactdiv input, #contactdiv textarea {font-family: arial; color: #000; border: 1px solid #ccc; padding: 14px;}
/* Wraps */
#page {width: 960px; margin: 20px auto; background: #fff;} #pagePadding {padding: 20px;}
/* Header Elements */
#header{margin: 0 0 10px 0;} #header h1 a, #header h2 a {width: 420px; height: 70px; background: url('images/header.gif') no-repeat; display: block;} #header h1 a {float: left; background-position: 0 0;} #header h2 a {background-position: -477px 0; float: right;}

#banner ul {width: 330px; height: 140px; list-style: none; margin: 0 1px 0 0; float: left; background: url('images/links.gif');} #banner ul li {margin: 0 10px;} .homeLink {margin-top: 10px;} #banner ul li a {font-size: 11px; text-transform: uppercase; color: #fff; font-weight: bold; height: 30px; display: block; text-indent: 10px; line-height: 30px;}
#banner ul li a:hover {background: #f00;}
/* Slideshow */
#slideshow {width: 589px; height: 140px; float: left; position:relative;} #slideshow div {position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 140px;} #slideshow div.active {z-index:10; opacity:1.0;} #slideshow div.last-active {z-index:9;} #slideshow div img {width: 589px; height: 140px; display: block; border: 0;}
/* Main Content / Pages */
#content {padding: 20px 0;} #content.noBg {background: none;} #content .s {width: 270px;} #content .b {width: 550px;} #content .l {width: 670px;} #content .cL {width: 460px; float: left; margin: 0 90px 0 0;} #content .cR {width: 300px; float: left;}

.home , .about, .products, .contact, .online {width: 550px; height: 30px; background: url('images/h1.gif') 0 0; margin: 0 0 10px 0;} .home {background-position: 0 0;} .about {background-position: 0 -90px;} .products {background-position: 0 -30px;} .contact {background-position: 0 -60px;} .online {background-position: 0 -120px;}
#aboutUs {width: 260px; height: 150px; background: url('images/about.jpg'); float: right; display: block;} #aboutUs:hover {background-position: 0 -150px;} #shopOnline {width: 260px; height: 150px; background: url('images/shop.jpg'); float: left; display: block;} #shopOnline:hover {background-position: 0 -150px;} #contactUs {width: 428px; height: 121px; margin: 5px 0 0 0; background: url('images/contact.jpg'); float: right; display: block;} #contactUs:hover {background-position: 0 -121px;}
#splash {width: 920px; height: 195px; background: url('images/splash.gif'); margin: 40px 0;}

#content .cL {width: 500px; float: left;} #content .cR {width: 440px; float: left; margin: 0 0 0 50px;} #content .cS {width: 400px; float: left;} .padding_20 {padding: 20px;}
/* Contact */
#contactdiv {width: 500px; float: left;} #contactdiv input {margin: 5px 0; width: 280px;} #contactdiv #message {width: 280px; height: 100px;} #send {width: 180px; height: 50px; background: url('images/send.gif'); display: block; float: right;} #send:hover {background-position: 0 -50px;} #map {width: 330px; height: 326px; margin: 0 0 10px 0; background: url('images/map.jpg'); display: block; float: right;} #map:hover {background-position: 0 326px;} #contactInfo {width: 328px; float: right; border: 1px solid #ccc; } #contactInfo div {padding: 7px;} #contactInfo ul {list-style: none;} #contactInfo ul li {margin: 5px 0;} #contactInfo ul li b {float: left; width: 70px;} .phone {font-size: 16px;}

/* Ordering System */

.field {margin: 5px 0; width: 600px;} .formMessage {font-family: arial; color: #000; border: 1px solid #ccc; padding: 14px; width: 600px; height: 100px; clear: both;} .checkoutButton {margin: 10px 0;}
.formLabel {float: left; width: 150px; margin: 0 40px 0 0; padding: 20px 0 0 0; font-weight: bold;}

.breadCrumb {background: #f1f1f1; margin: 0 0 20px 0; height: 40px; line-height: 40px; text-indent: 10px; list-style: none;} .gst {font-size: 11px; color: #333; letter-spacing: normal;}

.categories {width: 600px; float: left;} .newProduct {float: left;}
.categories li {float:left; margin:5px; list-style:none; padding:3px; text-align:center; width:100px; height:130px; line-height:1em;}
.category_image {height:100px; width:100px; border:1px solid #000;  text-align:center; margin:auto;}
.category_image img {border:none; margin:auto; float:none;}
#productTitle {font-size: 14px; font-weight: bold;}
#orderPriceDiv {margin: 10px 0;} #orderQty {padding: 7px; border: 1px solid #ccc; width: 100px;}
#orderProductDiv img {float: left; margin: 0 20px 100px 0; border: 1px solid #ccc; padding: 2px;}
#orderProductDiv b {width: 140px; float: left;}

/* Footer */
#footer {width: 940px; height: 80px; background: url('images/footer.gif') #fff no-repeat; margin: 0 auto; font-size: 11px; color: #fff; line-height: 16px;} #footerPadding {padding: 20px;} #footer a {color: #fff;} #footer a:hover {text-decoration: underline;} .fL {float: left;} .fR {float: right;} #content .noHeading {background: none; margin: 0 0 10px 0;} #packages .noM {margin: 0 0 20px 0;} h2.pH {font-size: 16px; text-transform: uppercase; color: #000; margin: 10px 0;} .register {width: 102px; height: 102px; background: url('images/register.gif'); display: block; position: absolute; margin: 0 0 0 600px;} .register:hover {background-position: 0 -110px;}
/* Classes */
.clear {clear: both;} .imgR {float: right; border: 1px solid #ccc; padding: 2px; margin: 0 0 0 10px;} .imgL {float: left; margin: 0 10px 0 0;} .imgM {margin-bottom: 8px;} .pL {float: left; margin: 0 10px 100px 0;} .display {display: inline;}