/**********************************************
    ProductPanel Styles

The following divs create the two columns in
the product panel for images and text content.

http://www.alistapart.com/articles/holygrail
http://www.alistapart.com/d/holygrail/example_3.html

**********************************************/

div.productpanel {
 margin: 10px auto;
 padding-left: 200px;      /* LC fullwidth */
 overflow: hidden;         /* For equal height columns */
 border: solid 1px White;
}
		
div.column {
 position: relative;
 float: left;
 padding-bottom: 1001em;     /* X + padding-bottom  For equal height columns */
 margin-bottom: -1000em;     /* X                   For equal height columns */
}
		
.info {
 width: 90%;              /* This must be less than 100% or the content can dissappear */
 padding: 5px 20px;       /* CC padding */
 background-color: Transparent; /* Right hand column background colour */
}
		
.images {
 width: 180px;             /* LC width */
 padding: 0 10px;          /* LC padding */
 right: 240px;             /* LC fullwidth + CC padding */
 margin-left: -90%;         /* This needs to match width of .info div */
 background-color: Transparent;    /* Left hand column background colour */
}
		
/* the following are for appearance */

.ProductImage {
 width: 100px; /* required for auto centre to work */
 margin: 10px auto;
 padding: 10px;
}

h1.ProductName {
 margin: 0;
 padding: 4px;
 text-align: left;
 font-size: 16px;
}

.ProductDesc {
}

.ProductLongDesc {
}

.ProductPrice {
 margin: 0;
 padding: 4px;
 text-align: left;
}

.Converter {
}

.StockLevel {
}

.AddButton {
 margin: 0;
 padding: 4px;
 text-align: left;
}

/***************************
 End of ProductPanel styles
****************************/

/***************************
 Cross selling styles
****************************/

p.CrossSellHeader {
 clear: both;
 margin: 2px 0 2px 0;
 padding: 2px 0 2px 4px;
 font-size: 12px;
 background-color: #8B4513;
 color: #FFEFD5;
}

div.ProductCrossSellPanel {
 clear: both;
}

div.ProductCrossSellImage {
 float: left;
}

h1.ProductCrossSellName {
 margin: 2px 0 2px 2px;
 padding: 22px 0 2px 4px;
 font-size: 12px;
}

div.ProductCrossSellPrice {
 margin: 2px 0 2px 0;
 padding: 2px 0 2px 4px;
 font-size: 12px;
}

/****************************
 End of Cross selling styles
*****************************/