/********************************************************
	MAIN BODY COMPONENT STYLES for colorAssistan.htm

	These styles are used to dimension and position 
	elements in the main body of the page.  It also 
	defines the font size, color, and family to use 
	for various elements
********************************************************/
	
#pageTitle{
	float:left;
	clear:both;
	width:500px;
	text-align:left;
	padding-left:30px;
	margin-top:30px;
	xborder:solid 1px black;}	

#selectionPreviewContainer{
	float:left;
	clear:both;
	width:510px;
	padding-left:50px;
	margin-top:15px;
	text-align:left;
	xborder:solid 1px blue;}

#athenaSelectionsContainer{
	float:left;
	width:170px;
	padding-left:30px;
	margin-top:30px;
	xborder:solid 1px green;}

#stoneSelectionsContainer{
	float:left;
	width:170px;
	margin-top:30px;
	border-left:dashed 1px #333333;
	border-right:dashed 1px #333333;
	xborder-top:solid 1px red;
	xborder-bottom:solid 1px red;}

#cabinetSelectionsContainer{
	float:left;
	width:170px;
	margin-top:30px;
	xborder:solid 1px purple;}
	
	

/********************************************************
	selectionPreviewContainer component styles

	These styles are used to dimension and position 
	elements in the selectionPreviewContainer.  The 
	components in the selectionPreviewContainer vary 
	based on need, so classes are defined mixing explicit
	classes and HTML tags.
********************************************************/
	
#selectionImagesContainer{
	float:left;
	clear:both;
	width:504px;
	margin-bottom:5px;}

#stoneImage{
	float:left;
	width:252px;
	height:194px;
	xborder:solid 1px black;}

#cabinetImage{
	float:right;
	width:252px;
	height:194px;
	xborder:solid 1px black;}

#selectionTitlesContainer{
	float:left;
	clear:both;
	width:100%;
	padding-top:5px;
	padding-bottom:5px;
	border-top:dashed 1px #333333;
	border-bottom:dashed 1px #333333;}
	
#stoneTitle{
	float:left;
	width:50%;
	text-align:center;}

#cabinetTitle{
	float:left;
	width:50%;
	text-align:center;}


	
	

/********************************************************
	selectionsContainer component styles

	These styles are used to dimension and position 
	elements in the selectionsContainer.  The 
	components in the selectionsContainer vary 
	based on need, so classes are defined mixing explicit
	classes and HTML tags.
********************************************************/

.selectionsContainerTitle{
	float:left;
	clear:both;
	text-align:left;
	padding-left:40px;
	margin-bottom:10px;}

.selection{
	float:left;
	clear:left;
	width:140px;
	padding-left:30px;
	margin-bottom:5px;}

.selectionHover{
	float:left;
	clear:left;
	width:138px;
	padding-left:30px;
	margin-bottom:3px;
	border:solid 1px #0099FF;
	cursor:pointer;}

.stone{
	float:left;
	padding-right: 10px;}

.cabinet{
	float:left;}