/*
 & dopetoys
 & This is where the Drake rant came form.
 */

.slider {
	background-position: 0px 44px;

	width: 100%;
	height: 44px;
	position: relative;
}

.slider-container h2 {
	letter-spacing: -1px;
	font-weight: normal;
	font-size: 24px;
	color: black;
}

.slider .left,
.slider .right {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 23px;
	height: 44px;
	
	background-position: 0px 0px;
}

.slider .right {
	left: auto;
	right: 0px;
	
	background-position: 0px 88px;
}

.slider,
.slider .left,
.slider .right {
	background-image: url('images/sliders.png');
}

.slider .guide {
	position: absolute;
	top: 0px;
}

/*
 & jQuery UI
 */
.ui-slider-horizontal .ui-slider-handle.ui-state-default {
	background-image: url('images/buttons.png');
	background-position: 0px 0px;
	
	display: block;

	position: absolute;
	top: 3px;
	width: 37px;
	height: 37px;
	margin-left: -18px;
	
	z-index: 1000;
}

.ui-slider-horizontal .ui-slider-handle.ui-state-hover {
	background-position: 37px 0px;
}

.ui-slider-horizontal .ui-slider-handle.ui-state-active {
	background-position: 74px 0px;
}

.ui-slider-horizontal .ui-slider-range.ui-widget-header {
	position: absolute;
	background: url('images/range-bg.png');
	height: 36px;
	top: 3px;
}

/*
 & Range selector
 */

.slider-min-max .ui-slider-horizontal .ui-slider-handle.ui-state-default {
	background-image: url('images/range.png');
	background-position: 0px ;
	width: 20px;
	margin-left: -17px;
	height: 36px;
}

.slider-min-max .ui-slider-horizontal .ui-slider-handle.ui-state-default.slider-0 {
	background-position: 0px 0px;
}

.slider-min-max .ui-slider-horizontal .ui-slider-handle.ui-state-default.slider-1 {
	background-position: 21px -41px;
	margin-left: -3px;

	width: 21px;
}

.slider-min-max .ui-slider-horizontal .ui-slider-handle.ui-state-hover.slider-0,
.slider-min-max .ui-slider-horizontal .ui-slider-handle.ui-state-active.slider-0 {
	background-position: 21px 0px;
}

.slider-min-max .ui-slider-horizontal .ui-slider-handle.ui-state-hover.slider-1,
.slider-min-max .ui-slider-horizontal .ui-slider-handle.ui-state-active.slider-1 {
	background-position: 0px -41px;
}

/*
 & Ruler
 */
.ruler.container {
	padding: 0px;
	margin: 0px;
	
	min-width: auto;
	max-width: auto;

	position: relative;
}

.ruler.container ul li {
	margin-top: 15px;
	font-weight: bold;

	position: absolute;	
	width: 20px;
	text-align: center;
	margin-left: -10px;
	
	padding-top: 60px;
	background: url('images/ruler-mark.png') no-repeat top center;
	display: block;
}

/*
 & Ruler
 & slider-columns
 & slider-percentage
 & slider-min-max
 &
 & we got javascript to do this for us.
 */
/*
.slider-columns .ruler.container ul li.first {left:0%;}
.slider-columns .ruler.container ul li.second {left:50%;}
.slider-columns .ruler.container ul li.third {left:100%;}

.slider-percentage .ruler.container ul li.first {left: 0%;}
.slider-percentage .ruler.container ul li.second {left: 33.3333333%;}
.slider-percentage .ruler.container ul li.third {left: 66.6666666%;}
.slider-percentage .ruler.container ul li.fourth {left: 100%;}
*/