/** styling for Erwin Diamond - claritycolor.html **/
.sep2 {
	display: none;
}

/* Rollover images */
#graphics-container {
	width: 900px;
	position: absolute; 
	top: 390px;
	left: 0px;
}
*html #graphics-container { top: 380px; /* this will only work in IE6 ... account for the Microsoft top banner  */ }

#color-mouseover, #clarity-mouseover {
	display: none;
}

.half-graphic { 
	display: inline; 
	margin: 0; 
}




#back-button {
	float: left;
	display: block;
	background: url('images/know-nav-buttons/difference-back.png');
	color: #3a3a3a; 
	width: 175px; 
	padding: 6px;
	padding-left: 30px; 
	padding-right: 25px;
	font-size: 18px; 
	font-weight: bold;
	font-family: Times, serif;
	text-decoration: none;
}

#forward-button {
	float: right;
	display: block;
	background: url('images/know-nav-buttons/cut-forward.png');
	color: #3a3a3a; 
	width: 140px; 
	padding: 6px;
	padding-left: 72px; 
	padding-right: 5px;
	font-size: 18px; 
	font-weight: bold;
	font-family: Times, serif;
	text-decoration: none;
}









/* Grading Scales */
#color {
	width: 644px;
}


#clarity {
	width: 682px;
}


table {
	border-collapse: collapse;
	margin: 5px;
}


table, tr, td {
	border: 1px solid #827259;
	padding: 2px;
}


td {
	color: #111111;
}


p {
	width: 520px;
}


.highlighted {
	color: #111111;
	background-color: #ecc87a;
}


#colorchart {
	width: 100%;
	text-align: center;
	background-image: url('images/color-gradient.jpg');
}


#colorletters td {
	width: 28px;
}


#claritychart {
	width: 100%;
	text-align: center;
	background-image: url('images/clarity-gradient.jpg');
}


#claritycodes td {
	width: 62px;
}


.chart-description {
	text-align: left; 
	width: 100%;
}


.chart-description ul {
	margin-left: 15px; 
	list-style-image: url('images/list_diamond.gif');
}







/* Mobile Rules */
@media screen and (max-width: 900px) {
	#content {
		padding: 8px 0px;
	}

	#clarity, #color {
		width: 100%;
	}

	h3 {
		font-size: 14px;
		padding: 0px 10px;
	}

	.chart-description {
		text-align: left; 
		width: 94%;
		padding: 3%
	}
}