@mixin runo-slider($primaryStyleName : v-slider) {

.#{$primaryStyleName} {
	border-top: 1px solid #cccfd0;
	border-bottom: 1px solid #cccfd0;
	margin: 5px 0;
}
.#{$primaryStyleName}-base {
	/* changing the borders will require adjustments to ISlider.java */
	height: 2px;
	background: #f3f3f4;
	border-top: 1px solid #cbcdce;
	border-left: 1px solid #cccfd0;
	border-right: 1px solid #cccfd0;
}
.#{$primaryStyleName}-handle {
	background: transparent url(img/handle-horizontal.png);
	width: 12px;
	height: 12px;
	margin-top: -5px;
	cursor: pointer;
}
.#{$primaryStyleName}-handle:hover {
	background-position: left bottom;
}
.#{$primaryStyleName}-scrollbar .#{$primaryStyleName}-handle,
.#{$primaryStyleName}-scrollbar.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle {
	background: #ffffff;
	border: 1px solid #cccfd0;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

.#{$primaryStyleName}-vertical {
	width: 3px;
	margin: 0 5px;
	border: none;
	border-left: 1px solid #cccfd0;
	border-right: 1px solid #cccfd0;
}
.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base {
	width: 2px;
	border-left: 1px solid #cbcdce;
	border-right: none;
	background: #f3f3f4;
	border-top: 1px solid #cccfd0;
	border-bottom: 1px solid #cccfd0;	
}
.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle {
	background: transparent url(img/handle-vertical.png);
	width: 12px;
	height: 12px;
	margin-left: -5px;
}
.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle-active {
	background-position: left bottom;
}

/* Disabled by default
.#{$primaryStyleName}-error .#{$primaryStyleName}-base {
	background:transparent;
	background-color: #FFE0E0;
}
*/

/* Disabled by default
.#{$primaryStyleName}-required .#{$primaryStyleName}-base {
	background:transparent;
	background-color: #FFE0E0;
}
*/
}