/****************** BEGIN - Product Grid Header ******************/
#product_attributes_header{
	width:775px;
	position:relative;
}

#product_attributes_header td{
	background-color:#cccccc;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	padding:12px 0;
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
}

#product_attributes_header.motor_controllers td{
	/* This value needs to be changed based on the number of attributes. */
	/* The value is 775/n = width */
	/* Ad you add new Product Families, you'll need to add a new header class. */
	width:129px;
}

#product_attributes_header td a{
	color:#000;
	text-decoration:none;
}

#product_attributes_header td a:hover{
	text-decoration:none;
}

#product_attributes_header td a span{
	display:none;
}

#product_attributes_header td a:hover span{
	display:block;
	position: absolute;
	left:50%;
	margin-left: -388px;
	margin-top:14px;
	width:773px;
	height:459px;
	background-color:#ccc;
	z-index:99999;
}

#product_attributes_header td a:hover span{
	/*need a hack to move the IE content down a bit*/
	*margin-top:28px;	
}

#product_attributes_header td a:hover span div{
	width:723px;
	height:409px;
	margin:5px auto;
	padding:20px;
	background-color:#fff;
	text-align:left;
	font-weight:normal;
	z-index:1;
}

#product_attributes_header td a:hover span div h1{
	font-size: 14px;
}
/****************** //END - Product Grid Header ******************/



/****************** BEGIN - Scrolling Container ******************/
 div.scrollable {  
    position:relative; 
    overflow-x:auto; 
    overflow-y:hidden;
    width: 447px; 
    height:430px; /* If you need to add more product attributes, increase this number and .items div below */ 
	border-right: 1px solid #ccc;
} 
 
div.scrollable div.items {  
    width:200em; /* If items start to wrap to another line, increase this number. 200em should handle about 12 products */
    position:absolute; 
} 

div.scrollable div.items div { 
    float:left; 
	width: 148px; /* width of the individual product grid divs */
	height: 412px; /* If you need to add more product attributes, increase this number and .scrollable above */ 
	border-left: 1px solid #ccc;
} 
/****************** //END - Scrolling Container ******************/ 




#product_grid{
	/* The product_grid contains all content below the header. Including the Scrolling Container (see above) */
	width:775px;
	position:relative;
}

#product_grid td{
	vertical-align:top;
}




/****************** BEGIN - Product Family descripton cell ******************/ 
#product_grid td.description{
	/* This is the left most table cell in the product_grid. It contains the Product Family description */
	width:178px;
	padding: 10px 12px;
	color:#fff;
	background-color:#045bab;
	line-height:13px; /* If the text doesn't fit well, you can try adjusting the line-height */
}

#product_grid td.description h1{
	font-size:14px;
	margin:8px 0;
}
/****************** //END - Product Family descripton cell ******************/ 




/****************** BEGIN - Product attribute labels ******************/ 
#product_grid td.models{
	padding:0 0 0 2px;
	width:120px;
	background-color:#fff;
}

#product_grid td.models table{
	width:100%;
}

#product_grid table.productlabel_table{
	padding-bottom:41px;
	padding-bottom:3px !IE;
	background-color:#01b393;
}

#product_grid table.productlabel_table td{
	width:100%;
	padding:5px 3px;
	text-align:right;
	color:#fff;
	font-weight: bold;
}

#product_grid table.productlabel_table td.models_cell{
	background-color:#F3F9F7;
}

#product_grid table.productlabel_table td.models_cell div.hint{
	font-weight:normal;
	font-size:10px; 
	text-align:left;
	margin-bottom:25px;
	color: #045bab;
}

#product_grid table.productlabel_table td.bg_lite{
	background-color:#3abea7;
}

#product_grid table.productlabel_table td.bg_dark{
	background-color:#01b393;
}
/****************** //END - Product attribute labels ******************/ 




/****************** BEGIN - Product table grids ******************/ 
#product_grid table.product_table{
	width:100%;
	padding:0;
}

#product_grid table.product_table td{
	text-align:center;
	padding:5px 3px;	
}

#product_grid table.product_table td img{
	display:block; /* this allows the clear to work */
	margin:0 auto; /* this centers the block within the div*/
	margin-bottom:5px;
	clear:right;
}

#product_grid table.product_table td.bg_lite{
	background-color:#fff;
}

#product_grid table.product_table td.bg_dark{
	background-color:#F3F9F7;
}
/****************** BEGIN - Product table grids ******************/ 




/****************** BEGIN - Shared design for Product Labels (productlabel_table) and Product Tables (product_table) ******************/ 
#product_grid table.product_table td.models_cell,
#product_grid table.productlabel_table td.models_cell{
	font-size:13px;
	font-weight:bold;
	height: 118px;/*If the label column and product grid rows don't align, this value is too small*/
	vertical-align:bottom;
	padding-bottom:3px;
	color:#000;
}
/****************** //END - Shared design for Product Labels (productlabel_table) and Product Tables (product_table) ******************/