/* CSS Document */

/* Size and center the page inside the body tag */
html, body {width:100%; text-align:center; background:url(img/bg.jpg) 50% 0 #FFFFFF fixed; margin:0; padding:0;}
div#page {margin:0 auto; width:900px; text-align:left; position:relative;}

/* Font preferences */
* {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666;}
p, td, div {font-size:12px; line-height:18px;}

/* Header and bold tags */
h1 {line-height:21px; padding:4px 0; color:#000; font-weight:900; font-size:19px;}
h2 {line-height:19px; padding:4px 0; color:#000; font-weight:900; font-size:17px; border-bottom:#08e 1px dotted;}
h3 {line-height:17px; padding:4px 0; color:#000; font-weight:900; font-size:15px;}
h4 {line-height:17px; padding:4px 0; color:#000; font-weight:900; font-size:15px;}
strong {color:#f33; font-weight:900;}

/* Defualt unordered lists */

ul li {background:url(img/bullet.gif) no-repeat 0 6px; padding-left:15px; list-style:none; padding-bottom:10px;}
ul {margin-left:0px; padding-left:20px;}

/* Defualt definition lists */

dt {color:#CC0000;font-weight:900;margin:10px 0pt; border-bottom: #CCCCCC 1px solid;}
dd {text-indent:0pt; padding-bottom:30px;}

/* Default link and hover preferences */

a {color:#FFF; text-decoration:underline;}
a:hover {color:#039; text-decoration:underline;}

/* Main block elements */

#left {width:200px; vertical-align:top;}
#right {width:623px; vertical-align:top}
#footer {height:16px; line-height:10px; font-size:10px; padding:3px 3px 50px 3px; text-align:right; color:#F00; line-height:10px; border-top:#999999 1px dotted; width:823px; margin:38px 0 0 38px;}
#footer a {color:#000; text-decoration:none; font-size:10px;}
#footer a:hover {color:#FFFFFF; text-decoration:underline;}
#mainTable {display:block; width:823px; margin-left:38px;}
#flash {}
#seo {width:823px; margin:10px auto; text-align:center; font-size:10px; color:#777; display:none;} /* Turn Display to block after optimization */

#header {width:900px; background:url(img/header.png) no-repeat; height:250px; position:relative;}
#logo {position:absolute; top:5px; left:40px; height:100px; width:217px; background:url(js/blank.gif); z-index:100;}
#logo h1, #nav li a h1 {font-size:14px; text-indent:-999em; border:none; margin:0; padding:0; line-height:14px; height:100%;}
#contact {position:absolute; top:21px; left:582px; height:67px; width:277px; text-align:right; line-height:20px; z-index:100;}
#contact div {font-size:12px;}
#contact b, #contact h1 {color:#FF3333;}
#contact h1 {font-size:16px; padding:0; margin:0;}
#nav {position:absolute; top:106px; left:44px; height:34px; width:821px; margin:0; display:block; padding-left:37px; z-index:100;}
#nav li {margin:0; display:block; list-style:none; float:left; width:auto; padding:6px 44px 0 0;}
#nav li a {margin:0; display:block; list-style:none; float:left; width:auto; height:22px;}
#nav li a:hover {height:21px; border-bottom:2px #F33 solid;}
#nav li a h1 {margin:0; text-indent:-999em; font-size:14px;}
h1.page {font-size:16px; text-indent:-999em; position:absolute; top:164px; left:39px; height:43px; width:821px; /* 821x43 */}


#left ul.nav {display:block; margin:0; padding:0;}
#left ul.nav li {display:block; margin:0; padding:0;}
#left ul.nav a {display:block; color:#FFF; text-decoration:none; font-size:12px; height:12px; line-height:14px; padding:4px 10px; font-weight:900; color:#000;}
#left ul.nav a:hover {color:#666;}
/* Paragraph classes (use sparingly - use tag globals whenever possible) */
p.caption {font-size:10px; color:#999999; line-height:normal;}
strong.red {color:#CC0000;}
em.red {color:#CC0000;}

/* Category Main - preferences here need to be customized for your needs */

/* category structure:
	<div class="category">
		<img>
		<h1>
		<p> - for secondary text, not used in example below
	</div>
*/

div.category {border-bottom:#999999 1px dashed; position:relative; padding:15px; height:250px; width:163px; float:left;}
div.category img {border:none; background:url(img/no-image.jpg) no-repeat; width:163px;}
div.category h1 {position:absolute; left:15px; top:185px; width:163px; height:42px; line-height:14px; padding:4px 0; color:#666; font-weight:900; font-size:14px; overflow:hidden;}

/* adjust div.category height if you use this:
div.category h2 {position:absolute; left:15px; top:250px; width:163px; height:42px; line-height:14px; padding:4px 0; color:#ccc; font-weight:500; font-size:12px; overflow:hidden;}



/* Products Main */
/* This is set up as 1-wide, set width and float left to make columns. */

/* product structure:
	<div class="product">
		<a><img>
		<h1>
		<h2> or <ul>
		<a.prodButton> needs "view" or "buy" button
	</div>
*/

div.product {border-bottom:#999 1px dashed; position:relative; padding:15px 0; height:200px;}
div.product img {border:none; background:url(img/no-image.jpg) no-repeat; width:100px;}
div.product h1 {position:absolute; left:175px; top:15px; width:420px; height:14px; line-height:14px; padding:4px 0; color:#000; font-weight:900; font-size:14px; border-bottom:#ccc 1px dotted; overflow:hidden;}
div.product h2, div.product ul {position:absolute; left:175px; top:45px; width:420px; height:120px; line-height:normal; padding:0; color:#ccc; font-weight:normal; font-size:11px; overflow:hidden;}
div.product ul li {padding-bottom:5px;}
div.product a.prodButton {position:absolute; left:488px; top:145px; background:url(img/view-button.jpg) no-repeat; display:block; height:30px; width:117px;}

/* Products Details */
/* To be elaborated... */

div.detail img {width:300px; border:none;}
div.detail {border-right:#999999 1px dashed; position:relative; width:300px; padding-right:14px;}
div.detail label {display:block; height:auto; line-height:14px; padding:4px 0; color:#800000; font-weight:900; font-size:14px; border-bottom:#800000 1px solid; margin-bottom:15px;}
div.detail p {line-height:normal; padding:0; color:#888; font-weight:normal; font-size:11px; overflow:hidden;}
div.detail form {display:block; padding:0; margin:0; position:relative; height:90px;}
div.detail input.submit 
{background:url(img/buy-now.jpg) no-repeat; display:block; height:30px; width:117px; position:absolute; top:45px; left:163px; border:none;}

div.detail select.ddl, div.detail select.ddm, div.detail select.ddr 
{width:80px;position:absolute; top:16px;}

div.detail label.ddl, div.detail label.ddm, div.detail label.ddr
{width:90px;position:absolute; top:0; display:block; font-size:12px; height:12px;}


/* Affiliated products */
/* use for related products on detail page */

#aff {float:right; width:265px; padding-right:15px;}
div.aff img {height:75px; width:75px; border:none;}
div.aff {border-bottom:#999999 1px dashed; position:relative; padding:15px 0; height:100px; margin:20px 0;}
div.aff label {display:block; height:auto; line-height:12px; padding:4px 0; color:#800000; font-weight:900; font-size:12px; border-bottom:#800000 1px dotted; margin-bottom:10px;}
#aff a {text-decoration:none; display:block; width:180px; height:14px; position:absolute; left:85px; top:107px; background:#FFFFFF url(img/view-more.jpg) no-repeat;}
#aff h1 {height:14px; line-height:14px; padding:4px 0; color:#800000; font-weight:900; font-size:14px; border-bottom:#800000 1px solid; margin:0 0 10px 0;}
div.aff p {position:absolute; left:85px; top:45px; width:180px; padding:0; margin:0; height:42px; line-height:14px; overflow:hidden;}

/* FORMS */
#form, #form li {display:block; list-style:none; margin:0; padding:0; position:relative; background:none;}
#form li label {display:block; width:200px; background:#E9E9E9; line-height:16px; padding:2px 5px; text-align:right;}
#form li input, #form li textarea {position:relative; left:215px; width:380px; top:-21px;}

/* Top H1 element */

h1#title  {display:none; text-align:center; width:900px; margin:1px auto; border:none; font-size:6px; color:#666666; padding:0; text-transform:none; position:absolute; top:0; left:0; z-index:2; line-height:6px;}

/*Flavia's stuff*/

#page_title {position:absolute; top:175px; left:47px; z-index:100; width:800px; height:30px;}
#page_title h1, #page_title h2 {color:#FFFFFF;font-family: "Century Gothic", Arial, Helvetica, sans-serif;font-weight:bold; display:inline; padding-top:10px; text-transform:capitalize;}
#page_title h1 {font-size:30px; padding-right:5px; }
#page_title h2 {font-size:14px; border:none;}
#search {position:absolute; top:165px; left:715px; z-index:1000; width:135px; background:url(js/blank.gif); display:block;}

/*products page*/
.product_listed div{border-bottom:1px dotted #666666; width:822px; margin-bottom:10px;}
.product_listed h1 {color:#ff3333; font-size:14px; font-weight:bold; border-bottom:1px solid #fff; margin-top:0px; padding-top:0px;}
.product_listed p {color:#000;}
.product_listed img {border:none; margin:0; padding:0;}
.product_listed a {border:none; margin:0; padding:0;}
.product_listed .thumbnail {float:left; border:1px solid #ff3333;}
.product_listed .description {width:650px; float:right; border:none;}
.product_listed .description div {text-align:right;}

/*manufactures page*/
.manufactures div {border-bottom:1px dotted #666666; width:822px; margin-bottom:10px;}
.manufactures .thumbnail {border:none; float:left; margin-bottom:10px;}
.manufactures .description {width:650px; float:right;}
.manufactures a {color:#ff3333; font-size:14px; text-decoration:none;}
.manufactures a:hover {text-decoration:underline;}
.manufactures h1 {padding:0; margin:0; }
.manufactures div div{border:0;}

/*category page*/
.category div {border-bottom:1px dotted #666666; width:822px; margin-bottom:10px;}
.category .thumbnail {border:none; float:left; margin-bottom:10px;}
.category .description {width:650px; float:right;}
.category a {color:#ff3333; font-size:14px; text-decoration:none;}
.category a:hover {text-decoration:underline;}
.category h1 {padding:0; margin:0; }
.category div div{border:0;}

/*view_item page*/
.featured {padding-bottom: 10px; border-bottom:1px dotted #666666; margin-bottom:10px;}
.featured div {width:822px;}
.featured div.highslide-gallery {width:400px; float:right;}
.featured .images .main { width:400px; padding-bottom:30px; border-bottom:1px solid #fff; margin-bottom: 15px;}
.featured .images {float:right; width:400px; text-align:center;}
.featured .images img {border:1px solid #333333;}
.featured .description {width:400px; float:left;}
.featured .description img {border:none;}
.featured a {color:#ff3333; font-size:14px; text-decoration:none;}
.featured a:hover {text-decoration:underline;}
.featured h1 {padding-top:0px; margin-top:0px; color:#ff3333; border-bottom:1px solid #fff;}
.featured p {color:#000;}

/*Advanced Search*/
#advanced_search {width:400px;}
#advanced_search label {font-weight:bold; color:#ff3333;}
#advanced_search input {position:absolute; left:100px; width:200px; display:block; margin-top:15px;}
#advanced_search select {position:absolute; left:100px; width:200px;}

/*contact form*/
#contact_form {width:400px;}
#contact_form label {font-weight:bold; color:#ff3333; display:block; padding-top:5px;}
#contact_form input {display:block;}
#contact_form .full {width:100%;}
#contact_form .half {width:50%;}
#contact_form .quarter {width:25%;}

/* Image hovers over main */
#typeDisplay {width:400px; height:390px; padding:0; position:relative;} /* need exception for IE here */

#typeDisplay div.blowup {height:300px; width:400px; position:absolute; top:0; left:0; background:#FFFFFF 50% 50% no-repeat; border:#333333 solid 1px; text-align:center;}
#typeDisplay div.blowup img, #typeDisplay ul li div img {border:#333333 solid 0; margin:auto; display:block;}
#typeDisplay ul {position:absolute; left:0px; width:400px; display:block; margin:0; padding:0; list-style:none; top:310px; height:30px; z-index:10;}
#typeDisplay ul li {line-height:60px; display:inline; margin:0px; padding:0px; list-style:none; line-height:70px; text-align:center;}
#typeDisplay ul li img.thumb {height:60px; padding:0; margin:5px; border:0; border:1px solid #000;}
#typeDisplay ul li div {position:absolute; top:-310px; left:0px; width:400px; height:300px; display:none; margin:0; list-style:none; z-index:100; border:#333333 solid 1px; background:#FFFFFF 50% 50% no-repeat}
#typeDisplay li:hover div,
#typeDisplay li.sfhover div {display:block;}