/****************************************************

Styles for sliders that the user can drag (Tools)

/****************************************************/

/* Input conected with a dragable region */
.draggable input {
	/* class placed on the label */
	border: solid 1px #519aff;
	color: #3c6db0;
	font-weight: bold;
}

.slider {
	/* Whole section (div) */
	background: #f0f2f3;
	height: 90px;
	margin: 6px 0px 0px;
	width: 100%;
}

.slider p {
	font-size: 10pt;
	font-family: GishaBold, Gisha, Arial, Helvetica, sans-serif;
	margin: 10px 20px;
	font-weight: bold;
	text-transform: uppercase;
	padding-top: 15px;
}

.continuum {
	/* notched slider area */
	width: 610px; /* needed for ie draggable slider */
	margin: 5px auto 0px;
	border: ridge 2px #42474a;
	border-top: none;
	position: relative;
	height: 3px;
}

.slider.bmi .continuum {
	background: url("../images/continuum_bmi.jpg") repeat-y;
}

.slider .continuum div {
	/* notches, sliding arrows and indicators */
	position: absolute;
	top: 3px;
	border-left: ridge 2px #42474a;
	width: 30px;
	text-align: center;
	height: 5px;
	margin-left: 0px;
}

.continuum span {
	/* notche and arrow indicators */
	position: absolute;
	top: 5px;
	left: 0px;
	margin-left: -17px;
	line-height: 1em;
	width: 30px;
}

.slider .continuum .pointer {
	/* indicators and sliding arrows */
	height: 26px;
	top: -29px;
	border: none;
	width: 0px;
}

.slider .continuum .pointer span {
	/* indicators */
	background: url("../images/slider_stationary.gif") bottom center no-repeat;
	padding-bottom: 12px;
	font-weight: bold;
	font-size: 10pt;
	cursor: default;
	left: 0px;
	padding-left: 2px;
}

.slider .continuum .draggable span {
	/* slidding arrow */
	background: url("../images/slider_draggable.gif") bottom center no-repeat;
	color: #3c6db0;
	cursor: pointer;
}

/* Each of the 12 notches on the continuum */
.continuum0 { left: -2px; }
.continuum1 { left: 8.33%; }
.continuum2 { left: 16.66%; }
.continuum3 { left: 25%; }
.continuum4 { left: 33.33%; }
.continuum5 { left: 41.66%; }
.continuum6 { left: 50%; }
.continuum7 { left: 58.33%; }
.continuum8 { left: 66.66%; }
.continuum9 { left: 75%; }
.continuum10 { left: 83.33%; }
.continuum11 { left: 91.66%; }
.continuum12 { left: 100%; }

/* Accordian Styles ( uses the classes applied by the jquery ui ) */
.accordian h4.ui-state-active {
	background: url("../images/accordian_open.jpg") no-repeat top left;
	line-height: 20px;
	height: 20px;
	cursor: pointer;
	clear: both;
	text-transform: none;
	font-weight: normal;
	padding: 0px;
	padding-top: 2px;
	padding-left: 28px;
	margin: 0px;
}

.accordian h4.ui-state-default {
	background: url("../images/accordian_closed.jpg") no-repeat top left;
	line-height: 23px;
	height: 23px;
	cursor: pointer;
	clear: both;
	text-transform: none;
	font-weight: normal;
	padding-left: 28px;
	margin: 2px 0px;
}

.accordian h4.ui-state-default:hover {
	background: url("../images/accordian_hover.jpg") no-repeat top left;
}

.accordian .slider {
	/* Adjustment to slider */
	margin-left: 0px;
	margin-bottom: 20px;
}

.accordian .section {
	margin: 0px;
	padding-left: 20px;
	position: relative;
	height: 287px;
	background: url("../images/accordian_open_bottom.jpg") no-repeat bottom left;
}

/* Adjustments for things inside of the accordian that elsewhere are outside of it */
.accordian .middle {
	width: 300px;
}

.accordian .slider {
	width: 640px;
}

.accordian .continuum {
	width: 590px;
}

/* For a 45% max circle indicator */
.gradeIndicator {
	position: absolute;
	top: 50px;
	left: 400px;
	width: 180px;
	height: 128px;
	overflow: hidden;
	border-bottom: solid 1px #3c6db0;
}

.gradeIndicator img {
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 5;
}

.gradeIndicator div {
	border-top: solid 0px #FFF;
	border-right: solid 180px #3c6db0;
	height: 14px;
	width: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	bottom: -14px;
	right: 0px;
	z-index: 1;
}