/* 
========================================================================
PRODUCTS.CSS
========================================================================
*/


/* ------------PRODUCTS  styles controlling how Products are displayed ---------------------------- */


/* ------ TABLES - holding product prices tax / add to basket / out of stock etc  ALSO Shipping info Pages ------ */


table 
{
width: 590px;
margin-bottom:5px;
border:none;
background-color:#fdfbfb
}


th 
{
text-align: left;
color:#fdfbfb;
font-size:13px;
font-weight:bold;
border:none;
}


td, select, input 
{
font-size: 10px; 
font-weight: normal; 
background-color: #fdfbfb;
border:none;
padding-left:1em;
padding-right:1em;
}

table tr 
{

background-position: top left;
background-repeat: repeat-x;
border:none;
background-color: #fdfbfb;
}

table tr.header
{
background-color:#fdfbfb;
border:none;
}

table tr.header th 
{
font-size: 10px;
font-weight: bold;
background-color: #fdfbfb;
color:#333333;
border:none;
}



table caption 
{
font-size: 10px;
color: #DD7700;
}


table tr.alt 
{
background-position: top left;
background-repeat: repeat-x;
}

table tr.highlight 
{
background-color: #fdfbfb;
}

.versions tr.highlight td 
{
background-color: #fdfbfb;
color:#3293e4;
}


table tr.subheader td 
{

}

table td, table th
{
padding: 3px;
border:none;
}

table th 
{
background-color: white;
border:none;
}


.orderstable td
{
color:#666666;
}


/*  controls product info like dimensions, materials extra product info */

pre 
{
width:540px;
font-size:12px;
clear:both;
margin:2px 0px 5px 0px;
padding:5px 10px 5px 10px;
border:1px dotted #cccccc;
background-color: #F5F5F5;
color: #333333;
width/**/:/**/ 540px;
}

/* ------------------------ */


/* Product Heading within product boxes etc. also controls Customer Review & Carry On Shopping  */

.product h2 
{
color:#ffffff;
height:53px;
background-image:url(../templateimages/prod_bg.gif);
background-repeat:no-repeat;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 45px;
text-align: left;
}

/* Outer wrapper div for products displayed in short format - for example Featured Products on homepage  */

.products_shortened 
{
margin:0 auto;
padding:0;
width:590px;
text-align:center;

}	





/* Homepage Featured Products */



.products_shortened .box 
{
width: 188px;
height: 330px;
margin: 0px 0px 0px 0px;
font-size: 10px;
text-align:center;
padding:10px 0px 5px 0px;
float:left;
border:3px dashed #efefef; 
width/**/:/**/ 188px;
}

/* Covers info on all 'product' views - including product.asp */

.product em.strapline 
{
text-transform:lowercase;
color: #C91C9E;
text-size:13px;
font-weight:bold;
}

.generalspace 
{
display: block;
height: 1px;
}

.generalspace 
{
display: block;
height: 1px;
}

.product p 
{
margin: 0 10px 5px 10px;
}


#productdescription
{
border:1px solid #66cc00
}




/* MAIN SINGLE PRODUCT DISPLAY  */


/* Homepage Featured Products  */

.product 
{
padding:5px 0px 0px 0px;
margin:0px 1px 2px 1px; 
overflow:hidden;
}

.main 
{
width:590px;
margin:0px 10px 0px 10px;
padding:5px;
height:auto;
width/**/:/**/ 580px;
}

.main p
{
border:0px solid #cccccc;
width:92%;
margin:0px 30px 0px 0px;
padding:5px;
background-color:#fdfbfb;
height:auto;
clear:both;
}

#prodimage
{
padding:1px;
margin:0px;
}


.product img.thumb 
{
float: left;
margin: 0px 10px 5px 10px;
border:1px solid #cccccc;
margin: 0px 10px 2px 0px;
padding:2px;

}

/* --- closes the main single product display - includes box bottom and large view link  ------- */





.dualimagecontainer
{
padding:10px;

}

.dualimageleft
{
width:200px;
float:left;
margin-right:5px;
text-align:center;
}

.dualimageright
{width:200px;
float:left;
margin-left:15px;
}






.pextrainfolinks .moreinfo
{
margin: 5px 0px 5px 0px;
background-image:none;
border:0px solid #cccccc;
}



/* END SINGLE PRODUCT DISPLAY  */

.quantitydiscount .link 
{
clear:both;
padding: 5px 0px 5px 0px;
}

.products .minprice 
{
color: #333333;
}

.products .minprice 
{
display: block;
font-weight: bold;
padding-top: 10px;
}

/* Wrapper for all products displayed on the page - product list (everything beneath PRODUCTS H5) */
.products 
{
margin-bottom: 0px;
padding-bottom: 10px;
overflow: hidden;
}

/* Closing product Pages */

.products_end 
{
clear: both;
}




/* MAIN PRODUCT IMAGE STYLING */
.products .product img 
{
float: left;
margin: 0px 2px 2px 0px;
border:1px solid #cccccc;
padding:2px;
}


.products .product .pad 
{
margin-bottom: 2px;
padding: 0px;
zoom: 100%; /* To fix IE 'invisible text' rendering bug (http://archivist.incutio.com/viewlist/css-discuss/57305) */
overflow: hidden; /* To fix image flow in extended view, mozz/opera */	
}

.products .product .product_end 
{
clear: both;
}

/* Specific to the shortened display - note: the width of .product is set programmatically
based on the numShortenedFormatCols config setting */
.products_shortened .product img 
{
display: block;
float: none;
margin: 8px auto;
text-align: center;
}	

/* outer wrapper for INDIVIDUAL products in short format - for example featured products Homepage  */


.products_shortened
{
text-align:center;
}



.products_shortened .product 
{
display: block;
float: left;
margin-bottom: 0px;
text-align:center;
}

.products_shortened .product .box .pad h2

{
font-size:13px;
color:#3293e4;
margin:0px;
padding:0px;
text-align:center;
background-image:none;
}


/* Price displayed for INDIVIDUAL products in short format - for example from £6.99  */

.products_shortened .minprice 
{
margin-top:5px;
padding:3px;
font-weight:bold;
font-size:13px;
color:#666666;
text-align: center;
}

.products_shortened em {
	padding: 0px 0px 0px 0px;
}


/* Specific to the 'classic' search display type - no styling, just text and description */
.products_classicsearch .product .pad 
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.products_classicsearch .product .pad p 
{
margin: 4px 0 8px 0;
}


/* INDIVIDUAL products in short format - eg featured products - padding around main text - heading em & min price etc - no styling necessary - adjust padding only */


.products_shortened .product .moredetails 
{
display: none;
visibility: hidden;
}

/* Boxes for general display - generally leave this set to none as will clash with outer box stylings */

.box 
{
border:none;
}



.boxinset 
{
clear:both;
background-position: top left;
background-repeat: repeat-x;
}



.subcategories_shortened .box 
{
width: 175px;
height: 260px;
margin: 0px 5px 5px 0px;
background-position: top left;
background-repeat: repeat-x;
border-top: solid 1px #CBD5DB;
border-left: solid 1px #CBD5DB;
border-bottom: solid 1px #E2EAEF;
border-right: solid 1px #E2EAEF;
font-size: 7.5pt;
padding:0px;
}

/* MAIN PRODUCT BOX FORMATTING */

.products_extended .product 
{
width:590px;
padding:10px 0px 0px 15px;
margin:0px 15px 20px 1px; 
overflow:hidden;
width/**/:/**/ 575px;
}

.products_extended .product p
{
width:400px;
float:left;
border:0px solid #cccccc;
padding:5px;
margin:0px 0px 10px 0px;
background-color:#FDFBFB;
width/**/:/**/ 390px;

}


.products_extended h2
{

}

.products_normal .product 
{
background-position: top left;
background-repeat: no-repeat;
margin-bottom: 0px;
padding-top: 15px;
padding-bottom: 10px;
}

/* --- additional extrainfo links  ------- */
		
/* --- esp. for position of moreinfo button beneath product description in a category page ------- */		

.topmoreinfo
{
text-align:left;
padding:0px 0px 0px 0px;
margin:0px 0px 2px 0px; 
}


.topmoreinfo .img
{
text-align:center;
border:none;
}

.topmoreinfo .submit
{
float:left;
margin:2px 0px 0px 0px;
width:156px;
padding:0px 0px 0px 20px;
background-image:url(../templateimages/arrow_green.gif);
background-repeat:no-repeat;
color:#66cc00;
text-transform:lowercase;
clear:both;
cursor:pointer;
}

.topmoreinfo .submit:hover
{
float:left;
margin:2px 0px 0px 0px;
width:156px;
padding:0px 0px 0px 20px;
background-image:url(../templateimages/arrow_green.gif);
background-repeat:no-repeat;
color:#3293e4;
text-transform:lowercase;
clear:both;
cursor:pointer;
}

.topmoreinfo a
{
font-size:1px;
color: #ffffff;
font-weight:bold;
text-decoration:none;
text-align:center;
}


.topmoreinfo a:hover
{
font-size:1px;
color: #ffffff;
font-weight:bold;
text-decoration:none;
text-align:center;
}


.topmoreinfo .largeview 
{
margin: 5px 0px 0px 0px;
display: inline;
border:none;
clear:both;
}


.topextrainfolinks 
{
text-align:left;
padding:0px 0px 0px 0px;
margin:0px 0px 2px 0px; 
}


.topextrainfolinks .img
{
text-align:center;
border:none;
}

.topextrainfolinks .submit
{
float:left;
margin:2px 0px 0px 0px;
width:156px;
padding:0px 0px 0px 20px;
background-image:url(../templateimages/arrow_green.gif);
background-repeat:no-repeat;
color:#66cc00;
text-transform:lowercase;
clear:both;
cursor:pointer;
}

.topextrainfolinks .submit:hover
{
float:left;
margin:2px 0px 0px 0px;
width:156px;
padding:0px 0px 0px 20px;
background-image:url(../templateimages/arrow_green.gif);
background-repeat:no-repeat;
color:#3293e4;
text-transform:lowercase;
clear:both;
cursor:pointer;
}

.topextrainfolinks a
{
font-size:1px;
color: #ffffff;
font-weight:bold;
text-decoration:none;
text-align:center;
}


.topextrainfolinks a:hover
{
font-size:1px;
color: #ffffff;
font-weight:bold;
text-decoration:none;
text-align:center;
}


.topextrainfolinks .largeview 
{
margin: 5px 0px 0px 0px;
display: inline;
border:none;
clear:both;
}


.extrainfolinksprod 
{
text-align:center;
padding:0px 0px 0px 0px;
margin:0px 0px 20px 30px;
padding: 0px 0px 0px 0px;
}


.extrainfolinks 
{
text-align:center;
padding:0px 0px 0px 0px;
margin:0px 0px 2px 0px;
padding: 0px 0px 0px 0px;
}


.extrainfolinks .img
{
text-align:center;
border:none;
}


.extrainfolinksprod .img
{
text-align:center;
border:none;
}


.extrainfolinks .submit
{
text-align:left;
width:130px;
font-size:12px;
font-weight:bold;
background-image:url(../templateimages/arrow_green.gif);
color:#66cc00;
margin:5px 0px 0px 0px;
padding:5px 0px 0px 20px;
text-decoration:none;
text-transform:lowercase;
background-color:#FDFBFB;
background-repeat:no-repeat;
border:none;
cursor:pointer;
clear:both;
float:left;
}


.extrainfolinksprod .submit
{
text-align:left;
width:130px;
font-size:12px;
font-weight:bold;
background-image:url(../templateimages/arrow_green.gif);
color:#66cc00;
margin:5px 0px 0px 0px;
padding:5px 0px 0px 20px;
text-decoration:none;
text-transform:lowercase;
background-color:#FDFBFB;
background-repeat:no-repeat;
border:none;
cursor:pointer;
clear:both;
float:left;
}


.extrainfolinks .submit:hover
{
text-align:left;
width:130px;
font-size:12px;
font-weight:bold;
background-image:url(../templateimages/arrow_green.gif);
color:#3293e4;
margin:5px 0px 0px 0px;
padding:5px 0px 0px 20px;
text-decoration:none;
text-transform:lowercase;
background-color:#FDFBFB;
background-repeat:no-repeat;
border:none;
cursor:pointer;
clear:both;
float:left;
}


.extrainfolinksprod .submit:hover
{
text-align:left;
width:130px;
font-size:12px;
font-weight:bold;
background-image:url(../templateimages/arrow_green.gif);
color:#3293e4;
margin:5px 0px 0px 0px;
padding:5px 0px 0px 20px;
text-decoration:none;
text-transform:lowercase;
background-color:#FDFBFB;
background-repeat:no-repeat;
border:none;
cursor:pointer;
clear:both;
float:left;
}


.extrainfolinks a
{
font-size:1px;
color: #ffffff;
font-weight:bold;
text-decoration:none;
text-align:center;
}


.extrainfolinksprod a
{
font-size:1px;
color: #ffffff;
font-weight:bold;
text-decoration:none;
text-align:center;
}


.extrainfolinks a:hover
{
font-size:1px;
color: #ffffff;
font-weight:bold;
text-decoration:none;
text-align:center;
}


.extrainfolinksprod a:hover
{
font-size:1px;
color: #ffffff;
font-weight:bold;
text-decoration:none;
text-align:center;
}


.extrainfolinks .largeview 
{
margin: 5px 0px 0px 0px;
display: inline;
border:none;
clear:both;
}


.extrainfolinksprod .largeview 
{
margin: 5px 0px 0px 0px;
display: inline;
border:none;
clear:both;
}


.extrainfolinks .moreinfo
{
margin: 5px 0px 5px 0px;
background-image:none;
}


.extrainfolinksprod .moreinfo
{
margin: 5px 0px 5px 0px;
background-image:none;
}


.moreinfo 
{
background-image:none;
}


.extrainfolinks .compare {
	margin: 5px 0px 0px 0px;
}

.extrainfolinks .compare a {
	font-weight: normal;
}

.extrainfolinks img {
	float: none;
	margin: 0;
	border:none;
max-width:130px;
width: expression(this.width > 130? 130: true);
}



/* ------------ Categories ------------------------------------------- */
.category h2 {
	margin: 0px 0px 8px 0px;
}

.subcategories {
	margin-bottom: 0px;
}

.subcategories_normal {
	background-position: top left;
	background-repeat: no-repeat;
	padding-bottom: 10px;
}

.subcategories_extended {
	background-position: top left;
	background-repeat: no-repeat;
	padding-bottom: 10px;
}

/* ------------ Main category: category description - text at top of a category page eg art & artists -------------- */

.maincategory 

{
padding: 10px;
width: 590px;
border: 0;
overflow:hidden;
}

.subcategory 
{
width:590px;
color:#666666;
font-size:11px;
background-image:url(../templateimages/subcat_bg.gif);
background-repeat:no-repeat;
}

.subcategory a
{
width:590px;
color:#3293e4;
font-size:13px;
text-decoration:underline;
text-transform:lowercase;
font-weight:bold;
}

.subcategory a:hover
{
width:590px;
color:#C91C9E;
font-size:13px;
text-decoration:underline;
text-transform:lowercase;
font-weight:bold;
}



.subcategories_normal .subcategory 

{
	margin: 0;
	padding: 34px 0px 17px 0px;
}

.subcategories_extended .subcategory {
	margin: 0;
	padding: 34px 0px 17px 0px;
}

.subcategory strong {
	display: block;
	margin-bottom: 4px;
	margin:0px;
}

.subcategories_extended .subcategory img, .maincategory img {
	float: right;
	margin: 0px 0px 2px 10px;
}

.subcategories_shortened .subcategory_image {
	display: block;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}

.subcategories .subcategory .pad, .maincategory .pad {
	margin: 0 0 0 0;
	zoom: 100%; /* To fix IE 'invisible text' rendering bug (http://archivist.incutio.com/viewlist/css-discuss/57305) */
	overflow: hidden; /* To fix image flow in extended view, mozz/opera */
}

/* For the shortened design */
.subcategories_shortened .subcategory {
	display: block;
	float: left;
	margin-bottom: 0px;
	
}

.subcategories_shortened .subcategory .pad {
	padding: 10px;
}

/* Style specifically for the 'link'. We remove most of the box styling for link mode */
.subcategories_link .subcategory .pad {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
}




/* ------------ Top lists -------------------------------------------- */

.boundary
{
width:510px;
height:auto;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 20px;
text-align:center;
width/**/:/**/ 490px;
}

.boundary h4 
{
font-size:18px;
color: #789297;
margin:0px 0px 5px 0px;
}

.boundbox
{
margin:0;
padding:0;
}

#toproducts

{
width:510x;
height:auto;
margin:5px 7px 0px 0px;
padding:0px 5px 0px 5px;
}

.topbox
{
width:160px;
height:230px;
margin:0px 8px 8px 0px; 
padding:0px;
float:left;
border:1px dotted #ffffff;
width/**/:/**/ 150px;
}

.rim
{
width:510px;
background-color:yellow;
}

.topbox h2
{
text-align:center;
}

.topbox a
{
text-align:center;
text-decoration:none;
font-size:14px;
font-weight:bold;
color:#ff9900;
}


.topbox a:hover
{
text-align:center;
text-decoration:none;
font-size:14px;
font-weight:bold;
color:#ff9900;
}



.topbox img
{
max-height:144px;
max-width:144px;
width: expression(this.width > 144? 144: true);
height: expression(this.height > 144? 144: true); 
}

.radio
{
border:none;
}

.price1
{
border:none;
}

.header
{border:none;
}

.subheader
{border:none;
}

.box 
{
{border:none;
}

.price2
{
border:none;
}