/**
 * Gears Value Range Slider jQuery plugin (CSS)
 *
 * @author Michael Stamm, KWP Communications <m.stamm@kwp-communications.com>
 * @version 1.0
 * @timestamp 2015-04-12
 * @requires jQuery 1.8
 */


.gValueSliderBox {
	/*margin-top: 10px;
	margin-bottom: 10px;*/
	
	/*-webkit-border-radius: 7px;
	   -moz-border-radius: 7px;
	        border-radius: 7px;*/

	padding: 33px 36px 0px 36px;

	/*-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
	   -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
	        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);*/

	/*background-color: #ffffff;*/

	-webkit-touch-callout: none;
	
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.gBarFrame {	
	/*border: 1px solid #ffffff;*/

	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;

	-webkit-box-shadow: 0px 1px 1px 0 rgba(255, 255, 255, 1);
	   -moz-box-shadow: 0px 1px 1px 0 rgba(255, 255, 255, 1);
	        box-shadow: 0px 1px 1px 0 rgba(255, 255, 255, 1);
	
	/*padding: 0 10px 0 10px;	*/
	height: 4px;
	background-color: #434343;
	/*background: #f5f5f5;
	background: -moz-linear-gradient(top, #f5f5f5 0%, #ebebeb 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#ebebeb));
	background: -webkit-linear-gradient(top, #f5f5f5 0%,#ebebeb 100%);
	background: -o-linear-gradient(top, #f5f5f5 0%,#ebebeb 100%);
	background: -ms-linear-gradient(top, #f5f5f5 0%,#ebebeb 100%);
	background: linear-gradient(to bottom, #f5f5f5 0%,#ebebeb 100%);*/
}

.gBarFrameAnchor {
	position: relative;
	width: 100%;
	height: 100%;
}

.gMarkList {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.gMarkBar {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
}

.gMarkItem {
	position: absolute;
	right: -8px;
	top: -6px;

	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
	        border-radius: 8px;

	width: 16px;
	height: 16px;

	background-color: #434343;
}

.gBarSlider {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	
	/*-webkit-transition: 0.25s width ease-in-out;
	        transition: 0.25s width ease-in-out;*/
}

.gBarSliderHandle {
	position: absolute;
	right: -16px;
	top: -14px;

	-webkit-border-radius: 16px;
	   -moz-border-radius: 16px;
	        border-radius: 16px;

	/*-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
	   -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
	        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);*/

	width: 32px;
	height: 32px;
	
	background-color: #66a4da;

	/*background: #ffb301;
	background: -moz-linear-gradient(top, #ffb301 0%, #ffc233 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb301), color-stop(100%,#ffc233));
	background: -webkit-linear-gradient(top, #ffb301 0%,#ffc233 100%);
	background: -o-linear-gradient(top, #ffb301 0%,#ffc233 100%);
	background: -ms-linear-gradient(top, #ffb301 0%,#ffc233 100%);
	background: linear-gradient(to bottom, #ffb301 0%,#ffc233 100%);*/
	
	cursor: pointer;
}

.gBarHandleDeco {
	position: absolute;
	left: 9px;
	top: 9px;

	-webkit-border-radius: 7px;
	   -moz-border-radius: 7px;
	        border-radius: 7px;

	-webkit-box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.25);
	   -moz-box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.25);
	        box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.25);

	width: 14px;
	height: 14px;

	background: #ebeaea;
	background: -moz-linear-gradient(top, #ebeaea 0%, #ffffff 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebeaea), color-stop(50%,#ffffff));
	background: -webkit-linear-gradient(top, #ebeaea 0%,#ffffff 50%);
	background: -o-linear-gradient(top, #ebeaea 0%,#ffffff 50%);
	background: -ms-linear-gradient(top, #ebeaea 0%,#ffffff 50%);
	background: linear-gradient(to bottom, #ebeaea 0%,#ffffff 50%);
}

.gBarSliderHandleLabel {
	position: absolute;
	right: -40px;
	top: -32px;
	padding-left: 12px;
	width: 68px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	line-height: 14px;
	font-family: Verdana, sans-serif;
}


.gLabelFrame {
	margin-top: 10px;
	padding: 0 11px 0 11px;
	height: 16px;
}

.gLabelAnchor {
	position: relative;
	left: 0;
	top: 0;
	height: 100%;
}

.gLabelBar {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
}

.gLabelItem {
	position: absolute;
	right: -30px;
	top: 0;
	width: 60px;
	height: 100%;
	
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 0.875rem;
	line-height: 1rem;
	text-align: center;
	color: #454545;
}

.gValueSliderBox.bigLabels .gLabelBar .gLabelItem {
	right: -50px;
	width: 100px;
}

.gValueSliderBox.bigLabels .gLabelBar.first .gLabelItem {
	right: auto;
	left: -11px;
	text-align: left;
}

.gValueSliderBox.bigLabels .gLabelBar.last .gLabelItem {
	right: -11px;
	text-align: right;
}

.gValueSliderInput {
	display: none;
}