/* CSS Document */

/* 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></h1>
		<p> - for secondary text, not used in example below </p>
	</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;}


#left div.twoCol {width:120px; float:left;}
#left div.twoCol p {margin:0; padding:0;}
div#left {padding:14px; width:271px; border:none;}

#logo {height:188px;}
#logo a {position: absolute; top:44px; left:6px; height:120px; width:390px; display:block;}
#logo p {display:block; text-align:right; padding:14px; color:#FFFFFF; margin:0;}
#logo p strong {display:block; font-size:14px; color:#FFFFFF; text-decoration:none;}

#rightContent {padding:20px;}

#flash {display:none;}
#home #flash {display:block;}

#member {display:none;}
#home #member {display:block;}

#contact {display:block;}
#home #contact {display:none;}