﻿/*
---------------------------------------------------------------------------------------------------------
    PRODUCT LIST
---------------------------------------------------------------------------------------------------------
*/

/*
	Parent element for the entire product list
*/
ul#ProductList {
	margin:0;padding:0;
}
#ProductListTitle
{
	margin:0;
}
/*
	Container for each product list item
*/
ul#ProductList li {
	list-style-type:none;
	/*margin:20px 0;*/
	padding:9px 10px 9px 10px;
	border-bottom:1px solid #ccc;
	font-size:.85em;
}
ul#ProductList li.AlternateProductList
{
	background-color:#e8eff6;
}
ul#ProductList li li {
	border-bottom:none;/*we don't want the above rule to put bottom borders on ALL our li children, now do we*/
	margin:0;padding:0;
	margin:0px 5px 0px 5px;
}

/*
	div.Product contains the product information and purchase information
*/
ul#ProductList li div.Product {
	position:relative;
}
ul#ProductList li div.Product div.PurchaseInfo {
	text-align:right;
	width:250px;
	position:absolute;
	top:16px;
	margin-left:510px;
}

/*Product Image*/
ul#ProductList li div.Product a.ProductImg {
	display:block;
	/*position:absolute;
	left:10px; top:10px;*/
	float:left;
	left:0px; top:0px;
	height:90px;width:90px;/*dimensions are for thumb image*/
	background-color:#fff;
	overflow:hidden;
	margin:0 10px 0 0;
	border:1px solid #000;
}


/*
	Create the right-hand column.
	All the right-column items are handled here, except the price info UL element,
	which is handled below
*/
/*a.ProductName, div.ListContainer {margin-left:100px;}*/
.ProductName { font-weight:bold; _margin-left:-3px;  }

div.ProductInfo div.ListContainer {float:left;}
div.ProductInfo div.ListContainer ul {
	margin:0;padding:0;
	width:400px;
	line-height:1.1em;
}
div.ProductInfo div.ListContainer li {
	list-style:disc !important;
	margin-left:20px !important;
}
div.ProductInfo div.ListContainer a {padding:2px 0;display:block;}
div.ProductInfo div.ListContainer a:hover {
	text-decoration:none;
}

/*the PriceInfo UL element is part of the right column, but is handled here 'cause it needs "special attention"*/
ul#ProductList li div.Product ul.PriceInfo {
	margin:5px 0;padding:0;
	/*margin-left:100px;*/
}
ul#ProductList li div.Product ul.PriceInfo li {
	display:block;
}
ul#ProductList li div.Product ul.PriceInfo li.OnlinePrice {color:#600;font-weight:bold;font-size:21px;}
ul#ProductList li div.Product ul.PriceInfo li.RetailPrice {color:#333;}
ul#ProductList li div.Product ul.PriceInfo li.RetailPrice span {}
ul#ProductList li div.Product ul.PriceInfo li.Savings {color:#060;}
div.AlternateProductList{background-color:#eee;}


