div#gradeExample {
	position: relative;
	width: 450px;
	margin: 1.5em auto 1em auto;
}
div#gradeExample div#minmax {
	text-align: left;
	font-size: 14px;
	font-weight: bold;
}

div#gradeExample div#minmax div#left {
	float:left;
}
div#gradeExample div#minmax div#right {
	float: right;
}

div#gradeDisplay {
	position: relative;
	width: 370px;
	margin: 0 auto;
	padding-top: 10px;
	border-left: 2px dashed #000;
	border-right: 2px dashed #000;
}

div#gradeDisplay h3 {
	color: #000;
	background: #99CCFF;
	margin: 0;
	padding: 3px;
	font-size: 11px;
}

div#gradeDisplay p {
	text-align: center;
	margin-top: 1.5em;
}

div#titleA, div#titleB, div#titleC, div#titleD, div#titleE {
	position: relative;
	width: 216px;
	text-align: center;
	font-weight: bold;
	padding: 3px 0;
	border-left: 3px solid #000099;
	border-right: 3px solid #FF0000;
}

div#titleA {
	background: #FFD988;
}
div#titleB {
	background:#66FF66;
	left: 10%;
}

div#titleC {
	background:#FFFF66;
	left: 20%;
}

div#titleD {
	background: #CC99FF;
	left: 30%;
}

div#titleE {
	background: #00FFFF;
	left: 40%;
}
	
span#salMin {
	height: 1em;
	border-left: 1px solid #000099;
	border-right: 2px solid #000099;
}

span#salMax {
	width: 3px;
	height: 2em;
	border-left: 1px solid #ff0000;
	border-right: 2px solid #ff0000;
}