/* produtcs
styles for product output split into listing and showpage
--------------------------------------------------------------*/

/* mastheadImage
this little lot here builds the masthead of the category page

--------------------------------------------------------------*/
#mastheadImage{
	background-position:top left;
	background-repeat:no-repeat;
	margin:0;
	width:664px;
	height:275px;
	overflow:hidden;
	position:relative;
}

/* NOTE
transparancy will invalidate css, plan to review using PNG
should then be able to have category header dictate width of this element
--------------------------------------------------------------*/
#mastheadImage div.transparent{
	width:200px;
	height:275px;
	background-color:#f4f4f3;
	filter:alpha(opacity=90);   /* Internet Explorer       */
	-moz-opacity:0.9;           /* Mozilla 1.6 and below   */
	opacity: 0.9;               /* newer Mozilla and CSS-3 */
}

#mastheadImage div.categoryHeader{
	position:absolute;
	top: 17px;
	left:10px;
	width:100%;
}

#mastheadImage div.salePrices{
	clear:both;
	width:179px;
	height:18px;
	background:transparent url(images/hdr-at-sale-prices.png) no-repeat left bottom;
}

#mastheadImage div.categoryHeader h1{
	color:#5f5f5f;
	text-transform:uppercase;
	float:left;
}

/* NOTE
by floating these spans left I am able to break the h1 up
scripting would be needed to split these headers dynamically
--------------------------------------------------------------*/
#mastheadImage div.categoryHeader span{
	float:left;
}

#mastheadImage div.categoryHeader span.remainder{
	clear:left;
	color:#f14c1d;
	font-size:1.2em;
	line-height:1.2em;
}

#mastheadImage div.thumbContainer{
	position:absolute;
	bottom:50px;
	left:10px;
}

#mastheadImage div.mastheadThumbnail{
	float:left;
	margin-right:30px;
	width:100px;
	height:100px;
	background:transparent url(images/masthead-thumb-shadow.png) no-repeat bottom right;
}

/* NOTE
this method has the image inline, we could add another div to
the markup and set the image as the background if required
--------------------------------------------------------------*/
#mastheadImage div.mastheadThumbnail img{
	border:3px solid #333;
}


/* listing styles
--------------------------------------------------------------*/
#productBlockContainer{
	clear:both;
	margin:3px 0 0 0;
	overflow:hidden;
	padding:0;
	width:670px;
}

.productBlock{
	width:154px;
	height:153px;
	float:left;
	margin:0 10px 10px 0;
	position:relative;
	padding:0;
	border:1px solid #d8d8d8;

}

.productItemText{
	width:154px;
	position:absolute;
	text-align:center;
	bottom: 20px;
	left:0;
	margin:0;
	font-size:0.9em;
	padding:3px 0 3px 0px;
	background-color:#f6f6f6;
}

.productItemText h4 a{
	color:#e11780;
	padding:4px 0 0 0;
	margin:0 0 0 5px;
}

.productItemText h4 a:hover{
	text-decoration:underline;
}

.productItemText span{
	color:#4b4c4f;
}

.productItemText p{
	color:#e11780;
}


/* showpage styles
--------------------------------------------------------------*/
#mastheadImageSub{
	background-position:top left;
	background-repeat:no-repeat;
	margin:20px 0 0 0;
	width:489px;
	height:247px;
}

.wasPriceHeader{
	color:#555658;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:13px 0 0 0;
	font-size:1em;
}

.nowPriceHeader{
	color:#f14c1d;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:5px 0 0 0;
	font-size:1.4em;
}

.prodDetails{
	/*width:660px;*/
	padding:18px 0 10px 0;
	border-top:#ccc dotted 1px;
	overflow:hidden;
}

.prodDetailsText{
	/*width:448px;*/
	float:left;
}

.prodDetailsFurtherDetails{
	width:141px;
	padding-left: 20px;
	padding-right: 0;
	float:right;
	height: 100%;
	vertical-align: bottom;
	
}

.prodDetailsFurtherDetails img{
	float:right;
	margin:0 0 10px 0;
}

.prodDetailsFurtherDetails p{
	clear:both;
	margin:0 0 0 2px;
}

.productInteraction{
	overflow:hidden;
	clear:both;
	width:660px;
	margin:10px 0 0 0;
	padding:5px 0 5px 0;
	border-bottom:#ccc dotted 1px;
	border-top:#ccc dotted 1px;
}

.productInteraction p{
	float:left;
	margin:7px 20px 0 5px;
	padding-top:5px;
	font-weight:bold;
}

.productInteraction img{
	float:left;
}

.print{
	background:#fff url(images/print.gif) top left no-repeat;
	padding:0px 0 10px 30px;
	margin:0;
}

.review{
	background:#fff url(images/review.gif) top left no-repeat;
	padding:0 0 10px 30px;
	margin:0;
}

.email{
	background:#fff url(images/email.gif) top left no-repeat;
	padding:0 0 10px 30px;
	margin:0;
}

.viewTheProduct{
	background:#fff url(images/heart.gif) top left no-repeat;
	padding:2px 0 10px 30px;
	margin:0;
}

.closerLook{
	background:#fff url(images/heart.gif) top left no-repeat;
	padding:2px 0 10px 30px;
	margin:4px 0 10px 5px;
}

.bigHeart{
	background:#fff url(images/outstanding-value.gif) top right no-repeat;
	position:absolute;
	width:110px;
	height:100px;
	text-indent:-9999px;
	top:0;
	right:0;
}

.thumbNow{
	clear:both;
	font-size:1.3em;
	width:120px;
	color:#f14c1d;
	float:right;
	padding:7px 0 10px 0;
}

.productThumb{
	background:#fff url(images/product-thumb.gif) top left no-repeat;
	width:141px;
	height:86px;
	margin:0 0 10px 0px;
}

.thumbWasPrice{
	width:120px;
	float:right;
	padding:20px 0 0 0;
	margin:0;
}

.relatedBundles{
	padding:0;
	margin:15px 0 0 0;
}

.prodItemContainer{
	float:left;
	width:155px;
}

.prodItemContainer img{
	float:left;
}

.prodItemContainer p{
	margin:0;
	font-weight:bold;
	clear:both;
	width:140px;
	text-align:center;
	padding:0;
}