/*

   Slider CSS, style as you please.

   Note: The png images used for this demo were originally located at http://www.schillmania.com/

   Remove the -moz & -khtml styles if you want the css to validate.
   
   Change the image paths to suit you installation.

*/

/* Styles for the horizontal slider */
.fd-slider {
position: relative;
width: 100%;
height: 20px;
text-align: center;
border: 0 none;
text-decoration: none;
display: block;
cursor: pointer;
}
.fd-slider-inner {
position: relative;
display: block;
z-index: 1;
height: 18px;
text-align: left;
background: #fcfcfc;
border: 1px solid #ccc;
}
.fd-slider-bar {
position: absolute;
display: block;
z-index: 2;
height: 2px;
border: 1px solid #bbb;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
background: #ddd;
margin: 0;
padding: 0;
overflow: hidden;
line-height: 4px;
top: 8px;
bottom: 0;
left: 10px;
right: 10px;
}
/* Styles for the vertical slider */
.fd-slider-vertical {
position: relative;
border: 0 none;
text-decoration: none;
display: block;
width: 20px;
height: 100%;
text-align: center;
cursor: pointer;
}
.fd-slider-vertical .fd-slider-inner {
display: block;
width: 18px;
height: 100%;
text-align: left;
background: #fcfcfc;
border: 1px solid #ccc;
}
.fd-slider-vertical .fd-slider-bar {
width: 2px;
top: 10px;
bottom: 10px;
left: 8px;
right: 0;
height: auto;
}
.fd-slider-vertical .fd-slider-handle {
cursor: N-resize;
}
.focused .fd-slider-inner {
background: #eee !important;
border: 1px solid #aaa !important;
}
/* black handle, no glow */
.fd-slider-handle {
position: absolute;
display: block;
padding: 0;
border: 0 none;
margin: 0;
z-index: 3;
top: 0;
left: 0;
width: 20px;
height: 20px;
outline: none;
background: transparent url(../images/slider/slider-disabled.png) no-repeat 0px 0px;
cursor: W-resize;
line-height: 20px;
font-size: 20px;
}
.fd-slider-handle:focus {
outline: none;
border: 0 none;
}
button.fd-slider-handle:focus {
border-color: transparent;
}

/* black handle, glow */
.fd-slider-hover .fd-slider-handle {
background: transparent url(../images/slider/slider-disabled-1.png) no-repeat 0px 0px;
}
/* blue handle, no glow */
.focused .fd-slider-handle {
background: transparent url(../images/slider/slider.png) no-repeat 0px 0px;
}
/* blue handle glow */
.focused.fd-slider-hover .fd-slider-handle {
background: transparent url(../images/slider/slider-1.png) no-repeat 0px 0px;
}
body.slider-drag-vertical {
cursor: N-resize !important;
}
body.slider-drag-horizontal {
cursor: W-resize !important;
}
.fd_hide_slider_input {
display: none;
}