+/********************************************************************/
/* Shows all the product ranges */
/********************************************************************/
.ranges-browser{
    /* background-color: #efefef; */
    margin: 10px 10px 10px 10px;
    padding: 5px;
    min-height:220px;
    
}

#rangePhotos
{
    margin-left: 4px;
}

.top-row{
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#0670D0;
	
}

.data{
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#6A6A6A;
	text-decoration:none;
}

.data a{
	color:#66CD42;
	text-decoration:none;
}

.data a:hover{
	color:#66CD42;
	text-decoration:underline;
	background-color:#ffffff;
}

.ranges-browser h2{
    /* background-color: #cccccc; */
    margin: 0px;
    padding: 0px;
    font-size: 12pt;
}
.ranges-browser h2 a{
    text-decoration: none;
    display: block;
    padding-left: 50%;
    color: #555555;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.ranges-browser h2 a:hover{
	color: #66CD42;
    background-color: #ffffff;
    text-decoration: none;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}


.ranges-browser img{
    float: left;
	padding: 10px 0px 0px 0px;
	margin: 15px 0px 15px 0px;
    width: 40%;
    

}
.ranges-browser .divet{
    margin-left: 50%;
    font-size: 9pt;
    
}

/********************************************************************/
/* Product Range */
/********************************************************************/
.range{
	background-color: white;
	
}
.range h1{
    margin: 0px;
    padding: 0px;
    font-size: 12pt;
}
/* Category */
.range .category{
	color: #444444;
	background-color: white;
	border-bottom: 1px solid #aaaaaa;
}
/* Products Container */
.range .products{
	color: #444444;

}

.range h6.cluster a {
	float:left;
	background-color: #ffffff;
	color:#066FD0;
	border-bottom: 1px dashed #0670D0;
	margin: 0px;
	padding: 5px;
	font-size:12px;
	text-decoration:none;
		
}

 .prods-table{
	font-size: 10pt;
	/* width: 75%; */
	margin: 0px 0px 0px 10px;	
}

/********************************************************************/
/* Product Range BOX */
/********************************************************************/
.product-range-box{
     float: left; 
    margin-top: 20px;
     margin-right: 20px;
    padding:0px;
    text-align: center;
    border: 1px solid #eeeeee;
     width: 210px;
     height: 130px;
      
}
.product-range-box:hover{
    border: 1px solid #66CD42;
}    
.pic{
	border:1px solid #eeeeee;    
}

.product-range-box a{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	size: 12px;
	padding:0px;
    text-decoration: none;
    color: #1070CF;
    width: 100%;
}

.product-range-box a:hover{
    text-decoration: none;
    color: #66CD42;
    width: 100%;
}
.product-range-box:hover{
    text-decoration: none;
	padding: 0px;
    color: #333333;
}
.product-range-box-selected{
    /*background-color: #eeeeee;*/
}   

.product-range-box a.edit:hover{
	background-color: #eeeeee;
}



/*#######################
##### SWATCH STYLES #####
#######################*/ 

.swatch{
	float						: left;
	width						: 70px;
	height						: 70px;
	font-size					: 12px;
	background-color			: #ffffff;
	padding						: 3px;
	text-align					: center;
	margin						: 0px 5px 5px 0px;
}

.swatch p{
	padding						: 2px 0px 2px 0px;
	margin						: 0px 0px 0px 0px;
	font-size					: 85%;
	line-height					: 1.2em;
	color						: #999999;
}



/*#################################
##### PRODUCT TABLE (CLUSTER) #####
#################################*/ 


.clusterHolder{
	clear						: both;
	padding						: 0px 0px 0px 0px;
	margin						: 0px 0px 0px 0px;
	display						: block;
}

.cluster{
	display						: block;
	min-height					: 90px;
	padding						: 0px 0px 0px 0px;
	margin						: 0px 0px 0px 0px;	

}

*html .cluster{
	height						: 90px;

}

.clusterImage{
	float						: left;
	width						: 80px;
	min-height					: 80px;
	border						: 1px solid #CCCCCC;
	padding						: 0px 20px 0px 20px;
	margin						: 0px 17px 0px 0px;
	cursor						: pointer;
	background-image			: url(../images/zoom.gif);
	background-position			: top right;
	background-repeat			: no-repeat;

}

*html .clusterImage{
	height						: 80px;

}

.clusterImage:hover{
	background-image			: url(../images/zoomOver.gif);
	border						: 1px solid #666666;

}

.clusterExpand{
	float						: right ;
	width						: 61px;
	height						: 18px;
	padding						: 0px 0px 0px 0px;
	margin						: 0px 0px 0px 0px;
	cursor						: pointer;

}


.clusterTable{
	width						: 396px;
	float						: right;
	padding						: 0px 0px 0px 0px;
	margin						: 15px 0px 0px 0px;

}


.clusterTable td{
	vertical-align				: top;
	padding						: 5px 0px 5px 0px;
	margin						: 0px 0px 0px 0px;	

}

.clusterCode{
	font-size					: 11px;	
	color						: #2FA011;
	font-weight					: bold;
}

.clusterDesc{
	font-size					: 11px;	

}
.clusterPrice{
    font-size					: 11px;	
}
.productSpec{
	float						: right;
	display						: block;
	width						: 396px;
	height						: auto;
	padding						: 0px 0px 0px 0px;
	margin						: 10px 0px 0px 0px;

}

.productSpec img{
	border						: none;
	padding						: 0px 5px 5px 0px;
	margin						: 0px 0px 0px 0px;

}


/*#####################################
##### PRODUCT TABLE (NON-CLUSTER) #####
#####################################*/ 


.nonclusterHolder{
	clear						: both;

}

.nonclusterImage{
	float						: left;
	width						: 80px;
	height						: 80px;
	border						: 1px solid #CCCCCC;
	padding						: 0px 20px 0px 20px;
	margin						: 0px 17px 0px 0px;

}

.nonclusterTable{
	width						: 532px;
	padding						: 0px 0px 0px 0px;
	margin						: 15px 0px 0px 0px;

}


.nonclusterTable td{
	vertical-align				: top;
	padding						: 5px 0px 5px 0px;
	margin						: 0px 0px 0px 0px;	

}

.nonclusterCode{
	font-size					: 11px;	
	color						: #2FA011;
	font-weight					: bold;
}

.nonclusterDesc{
	font-size					: 11px;	

}



/*########################
##### RANGE PREVIEWS #####
########################*/ 

.rangePreview{
    float                   : left;
	display					: block;
    margin					: 0px 0px 16px 16px; 
	padding					: 5px 5px 5px 7px;
	width                   : 150px;
	min-height              : 190px;
	text-align				: center;
	background-image		: url(../images/rangeBkgrnd.jpg);
	background-position		: top left;
	background-repeat		: no-repeat;
}

*html .rangePreview{
	height     		        : 190px;
    margin					: 0px 0px 16px 12px; 
}

.rangePreview h4{
    padding					: 5px 0px 5px 5px;
    margin					: 0px 0px 0px 0px;
	float					: left;
	text-align				: left;
	font-weight				: normal;
	font-size				: 16px;

}


.rangePreview ul{
	list-style				: none !important;
	clear					: both;
	float					: left;
    margin					: 0px 0px 6px 2px !important;
    padding					: 0px 0px 0px 0px !important;
}

.rangePreview ul li{
    margin					: 0px 0px 0px 3px !important;
    padding					: 0px 0px 3px 10px !important;
	color					: #999999;
	color					: #555555;
	font-size				: 11px;
	text-align				: left;
	background-image		: url(../images/bullet.gif);
	background-position		: top left;
	background-repeat		: no-repeat;
}



.rangePreviewBtn{
	float					: left;
    padding					: 7px 0px 0px 5px;
    margin					: 0px 0px 0px 0px;
	border					: none;

}

.rangePreviewImg{
	border                  : none;
	margin					: 0px 0px 0px -2px; 
	padding					: 5px 0px 0px 0px; 
}

.rangePreview a{
	text-decoration         : none;
}

.clear{
	clear					: both;
	height					: 0px;
}