html{margin:0; padding:0; height:100%; background:#fff url(/css/contimg/html-bg.png) repeat top left;}
body {margin:0; padding:0; height:100%; font:0.75em/1.5em Verdana, sans-serif; color:#000; background:transparent url(/css/contimg/body-bg.png) repeat-x top left;}
body#home-page #container {margin: 0 auto; padding: 0; width: 980px; min-height:100%; height:auto !important; height:100%; background:transparent url(/css/contimg/home-container-bg.jpg) no-repeat top left;}
#container {margin: 0 auto; padding: 0; width: 980px; min-height:100%; height:auto !important; height:100%; background:transparent url(/css/contimg/container-bg.jpg) no-repeat top left;}
#content { float:left; width:948px; min-height:400px; height:auto !important; height:400px; margin:0; padding:18px 21px 20px 27px; background:transparent url(/css/contimg/content-bg.png) repeat-y center left; position:relative; display:inline;}
* html #content { height: 400px; }
body#home-page #content {padding-top: 0px;}
#content-pane {min-height:400px; height:auto !important; height:400px;}

/* Header */
#header{float:left; width:980px; height:220px; margin:0; padding:0; position:relative; display:inline; }
body#home-page #header{float:left; width:980px; height:425px; margin:0; padding:0; position:relative; display:inline; }
#topcart {float:right; margin: 0; padding:0; margin-right: 68px; height: 25px; clear:both; font-size:10px; line-height:20px; width: 66px;}
#topcart a {text-decoration:none; display:block; background: url(/css/contimg/topcart.png) no-repeat top left; float:left; width: 66px; height: 20px;}
#topcart a:hover {text-decoration:none; background-position: bottom left;}
#topcart span {display:none;}
#tagouter {float:right; width:625px; height:80px; margin:0; padding:0; margin-right:10px; display:inline; clear:both; }
#tagline {width:625px; height:80px; margin:0; padding:0; display:inline;}
#bannerouter {float:right; width:625px; height:217px; margin:0; padding:0; margin-right: 10px; display:inline; clear:both;}
#banner {width:625px; height:217px; margin:0; padding:0; display:inline;}
#welcome {float:left; overflow:hidden; background:none; padding:0; margin:0; color:#fff; width:335px; position:absolute; display:inline; top:255px; left:10px; font-size: 12px; line-height:18px;}
#welcome h1 {margin: -5px 40px 50px 50px; padding:0; font:1em/1.5em Verdana, sans-serif; }

/* Columns */
.col-306 {float:left; width: 306px; margin:0 7px 0 0; padding:0; display:inline;}
.col-613 {float:left; width: 613px; margin:0 7px 0 0; padding:0; display:inline;}

/* Primary navigation */
#primary-nav {float:right; width:588px; height: 102px; margin:1px 30px 0 0; padding:0; clear:both;}
#primary-nav ul {margin:0; padding:0; list-style:none; float:right;}
#primary-nav li {margin:0; padding:0; list-style:none; display:inline;}
#primary-nav a {margin:0 2px; padding: 0; float:left; width:70px; height:85px; display:block; background-position: 0 0; background-repeat: no-repeat;}
a#home {background: #fff url(/css/contimg/home_btn.jpg); margin-left: 0;} 
a#products {background: url(/css/contimg/products_btn.jpg);} 
a#eco {background: url(/css/contimg/eco_btn.jpg); height:95px;} 
a#specials {background: url(/css/contimg/specials_btn.jpg);} 
a#featured {background: url(/css/contimg/featured_btn.jpg); height:95px;} 
a#printed {background: url(/css/contimg/print_btn.jpg); height:95px;} 
a#news {background: url(/css/contimg/news_btn.jpg);} 
a#about {background: url(/css/contimg/about_btn.jpg);} 
a#search {background: url(/css/contimg/search_btn.jpg);} 
a#contact {background: url(/css/contimg/contact_btn.jpg); margin-right: 0;} 
#primary-nav a:hover {background-position: 0 -110px;}
#primary-nav a span {display: none;}
body#home-page a#home, body#products-page a#products, body#eco-page a#eco, body#specials-page a#specials, body#featured-page a#featured, body#news-page a#news, body#about-page a#about, body#faq-page a#faq, body#cart-page a#cart, body#contact-page a#contact, body#printed-page a#printed {background-position: 0 -220px;}

/* Footer */
#footer {float:left; width:980px; height: 130px; margin: 0; padding:10px 0 0 0; background: transparent url(/css/contimg/footer-bg.jpg) 0 0 no-repeat; font: 0.9em/1.5em Verdana, sans-serif; color:#fff;  display:inline;}
#footer ul {margin:0 auto; padding:0; text-align:center; list-style:none;}
#footer li {margin:0; padding:0; display: inline;}
#footer a {color: #fff; text-decoration:none; margin: 0 8px 0 3px; padding:0; display:inline;}
#footer a:hover { color:#999999; text-decoration:underline;}
#footer p { padding:0.5em 0 0 0; text-align:center; }

/* Links */ 
a {text-decoration:none; color: #990000;}
a:hover {text-decoration:none; color: #000;}
#welcome a {color:#fff; text-decoration:underline;}
#welcome a:hover {color:#999999; text-decoration:none;}
.box p.more {position:absolute; bottom:17px; right:16px; margin:0; padding:4px 5px; background: transparent url(/css/contimg/input-bg.png) repeat top left;}
.box p.more a {float:left; padding-right:10px; font-size:0.9em; font-weight:bold; line-height:10px; height:10px; background:url(/css/contimg/more-arrows.png) top right no-repeat; color:#990000; text-transform:uppercase; text-decoration:none;}
.box p.more a:hover {background-position:bottom right; color:#000;}
.details p.more, .main p.more {float:left; width:auto; font-weight:bold; margin:10px 0 0 0; /*padding:4px 5px; background: transparent url(/css/contimg/input-bg.png) repeat top left;*/}
.details p.more a, .main p.more a {float:left; padding-right:10px; font-size:0.9em; font-weight:bold; line-height:10px; height:10px; background:transparent url(/css/contimg/more-arrows.png) top right no-repeat; color:#990000; text-transform:uppercase; text-decoration:none;}
.details p.more a:hover, .main p.more a:hover {background-position:bottom right; color:#000;}
.top {float:right; margin:20px 15px; font-weight:bold; /*padding:4px 5px; background: transparent url(/css/contimg/input-bg.png) repeat top left;*/}
.top a {float:left; padding-left:14px; font-size:0.9em; font-weight:bold; line-height:10px; height:10px; background:transparent url(/css/contimg/top-arrows.png) no-repeat top left; color:#990000; text-transform:uppercase; text-decoration:none;}
.top a:hover {background-position:bottom left; color:#000;}
#print-page {position:absolute; top:10px; right:40px; text-align:right; float:left; height: 20px;}
#print-page a {padding-left: 19px; background: transparent url(/css/contimg/print-icon.gif) no-repeat center left; color:#000; text-decoration:none; font-size:0.9em; line-height:1em; display:block;}
#print-page a:hover {color: #990000; text-decoration:underline;}
a.viewcart {float:right; padding-right:10px; margin: 5px 0; font-size:0.9em; font-weight:bold; line-height:10px; height:10px; background:transparent url(/css/contimg/more-arrows.png) top right no-repeat; color:#990000; text-transform:uppercase; text-decoration:none;}
a.viewcart a:hover {background-position:bottom right; color:#000;}


/* Boxes */

.box {float:left; width:300px; margin:0 0 4px 0; padding:0 6px 50px 0; display:inline; position:relative;}
*html .box {padding: 0 0 50px 0;}
.box p {margin:5px 30px 0 30px; display:block;}
.box input {border:1px #000 solid; padding:0; margin:0; background:transparent url(/css/contimg/input-bg.png) repeat top left; line-height: 1em; vertical-align:middle;}
.box input.submit-button {border:none; padding:0; margin:0; background:none; height:18px; vertical-align:middle;}
.box form {margin:0; padding:0;}
.box label {width: 5em; float:left; text-align:right; margin-right:1em; display:block; line-height:20px; }
ul.side-menu {margin:5px 30px 0 30px; padding:0; list-style:none; float:left; width: 240px;}
ul.side-menu li{margin:0; padding:0; list-style:none; font-weight:bold;}
ul.side-menu a {text-decoration:none; color:#000; padding:0 5px; margin: 3px 1px; display:block;}
ul.side-menu a:hover, ul.side-menu a.current{text-decoration:none; color:#990000; background:transparent url(/css/contimg/input-bg.png) repeat top left;}
.box-item {margin: 10px 15px;}
.box-item h4 {margin: 0;}
.box-item p {margin:0;}
.box-item a {text-decoration:none; color: #990000;}
.box-item a:hover {text-decoration:none; color: #000;}



/* Headings */
h2 {float:left; height: 53px; width: 306px; background-position: top left; background-repeat: no-repeat; background-color: transparent; margin: 0px; padding:0 0 5px 0; }
h2 span {display:none;}
h2.heading {text-transform:uppercase; margin: 23px 5px 0px 15px; font-size: 1.2em; height:auto; width:auto;}
h2.heading .crumbs {display:inline;}
h2.heading .crumbs a { color: #990000; text-decoration:none; margin: 0 0.5em;}
h2.heading .crumbs a:hover {color: #000; text-decoration:none; }
h3 {font: 1em/1.25em Verdana, sans-serif; color: #000; text-transform:uppercase; font-weight: bold; margin: 0 0 5px 0; padding: 0px 0 0px 0; float:left; width:583px; border-bottom: #000 1px solid;}
h3 a {text-decoration:none; color: #000; display:block; float:left; cursor:pointer;} 
h3 a:hover {text-decoration:none; color: #990000;}
.main h3 {margin: 5px 0px 10px 0px; }
h4 {font: 1em/1.25em Verdana, sans-serif; color: #000; text-transform:uppercase; font-weight: bold; margin: 0 0 5px 0; padding: 0px 0 0px 0; float:left; width:583px;}
h4 a {text-decoration:none; color: #000; display:block; float:left;} 
h4 a:hover {text-decoration:none; color: #990000;}
.details h4 {width:550px;}
.col-613 h2 {margin-top:10px; margin-left:10px;}
.box h2 {height: 53px; float:left;background-image: url(/css/contimg/h2-bg.png); margin: 0 10px 0 0; }
.box h2 a {float:left; width: 280px; height: 50px; margin: 10px; display:block;  background-position: top left; background-repeat: no-repeat; background-color: transparent; }
.box h2 a:hover {background-position: bottom left;}







.item {float:left; margin:35px 15px 0px 15px; padding:0px 0px 35px 0px; width:583px; position:relative; border-bottom: 1px dashed #333;}

.item-title {float:left; width:580px; margin-bottom: 5px;}
.h3-title {float:left; width: 400px;}
.h3-code {float:right; width: 180px; text-align:right;}
.item-details {float:left; width: 400px;}
p.eco {float:left; width: 370px; margin:5px 0 0 0; padding:0; padding-left:33px; line-height: 30px;background:url(/css/contimg/eco-product.png) no-repeat center left;}
p.printable {float:left; width: 370px; margin:5px 0 0 0; padding:0; padding-left:33px; line-height:1.2em; background:url(/css/contimg/printable-product.png) no-repeat center left; }
.item-preview {float:left; margin:0 10px 10px 0; padding:0; border:none; clear:both; border: 4px #C4C7BD solid;}
.item-preview img {float:left; border:none; padding:0; margin:0;}
.item-description {float:left; line-height:1.2em; width: 400px; margin-top: 1em;}
.item-description p {margin:0; padding:0;}
.item-info {float:left; width:400px; margin-top: 1em;}
.item-info p {margin:0; padding:0; }
.item-price {float:right; text-align:right; position: relative; margin-bottom: 10px; }
.price {float:right; margin:0; padding:0; color:#3D5039; text-align:right; margin:0px 0 0px 0; position:relative;}
.price p.number {float:none; display:block; font:2.5em/0.8em Arial, Helvetica, sans-serif; font-weight:bold; width:auto; padding:0; margin:0;}
.price p.pack {float:none; display:block; font-weight:bold; width:auto; padding:0; margin:1px 0; text-transform:uppercase; font-size: 0.8em; line-height:1em;}
.price p.old-price {float:none; display:block; font-weight:bold; width:auto; padding:0; margin:3px 0; text-transform:uppercase; font-size: 1em; line-height:1em;}
.item-cart {float:right; width: 180px; text-align:right;}
.add-cart {float:right; width: 180px; text-align:right;}
input.cart-input { border:1px #990000 solid; padding:0; margin:0; background:transparent url(/css/contimg/input-bg.png) repeat top left; line-height: 1em; vertical-align:middle;}
input.cart-button { width: 91px; border:none; padding:0; margin:0; background: url(/css/contimg/add-item-icon.png) no-repeat center left; height:18px; vertical-align:middle;}
.view-cart {float:right; clear:both; width: 91px; height:18px; background:transparent url(/css/contimg/view-cart.png) no-repeat top left; margin-top: 5px; text-align:left; text-indent: -9999px;}
.view-cart:hover { background-position: bottom left;}
.item-message {float:right; width:500px; text-align:right;}
p.bonus { font-size: 1em; line-height: 1.2em; margin: 15px 0; }
.cart-div {clear:both; float:right; margin:5px 0 0 0; padding:0; text-align:right;}
.cart-div input.cart-button { width: 63px; background: url(/css/contimg/update-item-icon.png) no-repeat center left; }
.total {font-weight:bold;}


/* Mains */
.main {float:left; margin:0px 15px 10px 15px; padding:0 0 20px 0; width:580px; position:relative; border-bottom: 1px dashed #333;}
.main p {margin:0px 0px 1em 0px; padding:0; float:left; width: 450px;}
.main ol, .main ul {list-style:outside;}
.main ol li, .main ul li {margin: 5px 0;}
.main img {float:left; display:inline; margin: 0 10px 10px 0;}

/* Scrolling menu*/
.scrollOuter {padding:30px 0 30px 7px; margin:5px auto 0 auto; z-index:1; position:relative;}
.scroll-pane {width:303px; overflow:auto; }
#pane {float:left; height:348px; padding:0; margin:0;}
.jScrollPaneContainer {position:relative; overflow:hidden; z-index:1; margin:0; padding:0; height:335px;}
.jScrollPaneTrack {position:absolute; cursor:pointer; left:0; top:0; height:350px; padding:0; /*border:1px #000 solid;*/ background:transparent url(/css/contimg/input-bg.png) repeat top left;}
.jScrollPaneDrag {position:absolute; background:#666 url(/css/contimg/handle.gif) no-repeat center left; cursor:pointer;overflow:hidden;}
.jScrollPaneDragTop {position:absolute; top:0; left:0;overflow:hidden;}
.jScrollPaneDragBottom {position:absolute; bottom:0; left:0;overflow: hidden;}
a.jScrollArrowUp {background:transparent url(/css/contimg/up_arrow.png) no-repeat center 0; display:inline; position:absolute; z-index:1; top:0px; left:0;  height:20px; width:20px; text-indent: -9999px;}
a.jScrollArrowUp:hover {background-position: center -20px; }
a.jScrollArrowDown {background:transparent url(/css/contimg/down_arrow.png) no-repeat center 0; display:inline; position:absolute; z-index:1; bottom:0px; left:0; height:20px; width:20px; text-indent: -9999px;}
a.jScrollArrowDown:hover {background-position: center -20px;}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {background-position:center -20px;}
.scrollHover {background:transparent url(/css/contimg/input-bg.png) repeat top left}
.scroll-pane li { float:left; clear:both;list-style:none; width:265px; height:auto; margin:1px 0; padding:0;}
.scroll-pane ul {margin:0; padding:0; }
.scroll-pane span {display:block; margin:0; padding:0;}
.scroll-pane li a {float:left; width:251px; height:auto; position:relative; color:#333; cursor:pointer; }
.scroll-pane li.collapsable ul {margin:5px 0; float:left;}
.scroll-pane ul span {margin-left:25px; margin-right:10px;}
.scroll-pane ul ul span {margin-left:50px; margin-right:10px;  }
.scroll-pane li a.bg {height:65px; width:265px; background-position:top left; background-repeat:no-repeat; position:relative; margin-top:1px; display:inline;}
.scroll-pane a.bg span {display:none; } 
.scroll-pane a.bg:hover{background-position:bottom left; color:#fff; cursor:pointer;}






/* pagination */
.paginate {padding:2px 0 2px 2px; text-align:right; margin:0; margin-right:15px; float:right; width:583px;}
#paginate-top {margin-top:1em; margin-bottom:1em;}
#paginate-bottom {margin-top:1em;}
.paginate a {display:inline; padding-bottom:1px; cursor:pointer; margin-left:4px;}
*:first-child+html .paginate a { /*IE7 only CSS hack*/margin-left:4px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE7 */}
* html .paginate a { /*IE6 and below CSS hack*/margin-left:4px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE6 and below browsers*/}
.paginate a, .paginate a:visited, .paginate a:active{padding: 0 5px; border:1px solid #666; text-decoration:none; color:#666;}
.paginate a:hover {border:1px solid #000; color:#fff; background-color:#000;}
.paginate a.current {background-color:#990000; color:#FFF; border-color:#990000; font-weight:bold; cursor:default; }
.paginate a.prev, .paginate a.next {color:#FFF; border-color:#990000; background:#990000; font-weight: bold;}
.paginate a.prev:hover, .paginate a.next:hover {color:#FFF; border-color:#000; background:#000; font-weight: bold;}
.paginate a.current.prev, .paginate a.current.next {color:#666; border:none; background:none;}


/* contact form */
.contact p {margin:5px 0px; padding: 0; float:left; clear:both; width: auto;}
.contact strong {float:left; width:10em; text-align:right;}
.contact span {float:left; margin-left: 1em;}
.contact a {text-decoration:none; color: #990000;}
.contact a:hover {text-decoration:none; color: #000;}
.contact-field label {width: 10em; float: left; text-align:right; margin-right: 1em; display: block; line-height:20px; font-weight:bold;}
.contact-field input, .contact-field textarea {border:none; margin: 1px 0; border: #000 1px solid; padding:1px 2px; background:transparent url(/css/contimg/input-bg.png) repeat top left; }
.contact-field .submit {margin:1px 0px 0 1px; margin-left: 10em; height: 18px; background:none; border:none;}
.contact-field { margin: 1em 0;}

/* cart */
#cart-process { height:40px; width:225px; margin: 25px auto; position:relative;}
a#cart-review, a#cart-details, a#cart-order {float:left; height: 40px; width:80px; position:absolute;}
a#cart-review {background: url(/css/contimg/review-cart.png) no-repeat top right;  z-index:500; right:146px;}
a#cart-details {background: url(/css/contimg/details-cart.png) no-repeat top right; z-index:501; right: 73px}
a#cart-order {background: url(/css/contimg/order-cart.png) no-repeat top right; z-index:502; right: 0px;}
#cart-process a:hover {background-position: bottom right;}
a#next-view-cart {float:right; width:105px; height:23px; background: url(/css/contimg/view-cart-icon.png) top right no-repeat;}
a#next-order-cart {float:right; width:117px; height:23px; background: url(/css/contimg/order-cart-icon.png) top right no-repeat;}
input#next-order-cart {float:right; width:117px; height:23px;}
.field {float:left; width: 590px; margin: 0.5em 0;}
.field label {float:left; width: 170px; text-align:right;}
.field input, .field textarea {float:left; margin-left: 1em; border:none; padding: 1px 2px; border: #000 1px solid; background:transparent url(/css/contimg/input-bg.png) repeat top left; }
.required {color:#990000;}
.field .required {margin: 0 0.5em;}
input.fieldError, textarea.fieldError {background:#CC7F7F;}