/*



   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;

        -moz-user-select:none;

        -khtml-user-select:none

        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:0px;
        padding-left:4px;
        padding-right:4px;

        padding:0px;

        overflow:hidden;

        line-height:4px;

        top:8px;

        bottom:0px;

        left:0px;

        right:10px;
        width:99%;

        }

/* Styles for the vertical slider */

.fd-slider-vertical

        {

        position:relative;

        border:0px none;

        text-decoration:none;

        display:block;

        width:20px;

        height:100%;

        text-align:center;

        -moz-user-select:none;

        -khtml-user-select:none

        cursor:pointer;

        /* cursor:hand; */

        }

.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:0px;

        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:0px;

        border:0px none;

        margin:0px;

        z-index:3;

        top:0px;

        left:0px;

        width:20px;

        height:20px;

        outline:0px none;

        background:transparent url(/survey_templates/slider/sliderhollow.gif) no-repeat 0px 0px;
        margin-top:2px;

        cursor:W-resize;  

        line-height:20px;

        font-size:20px;

        -webkit-user-select: none;

        -moz-user-select:none;

        -moz-user-focus:none;

        -moz-outline:0px none;

        }

.fd-slider-handle:focus

        {

        outline:0px none;

        border:0px none;

        -moz-user-focus:normal;

        }

button.fd-slider-handle:focus::-moz-focus-inner { border-color: transparent; }



/* black handle, glow */

.fd-slider-hover .fd-slider-handle

        {

        background:transparent url(/survey_templates/slider/sliderred.gif) no-repeat 0px 0px;
        margin-top:2px;

        }

/* blue handle, no glow */

.focused .fd-slider-handle

        {

        background:transparent url(/survey_templates/slider/sliderred.gif) no-repeat 0px 0px;
        margin-top:2px;

        }

/* blue handle glow */

.focused.fd-slider-hover .fd-slider-handle

        {

        background:transparent url(/survey_templates/slider/sliderred.gif) no-repeat 0px 0px;
        margin-top:2px;

        }

body.slider-drag-vertical

        {

        cursor:N-resize !important;

        }

body.slider-drag-horizontal

        {

        cursor:W-resize !important;

        }

.fd_hide_slider_input

        {

        display:none;

        }

.mt
        {
        margin-top:1em;
        }
.halfSize
        {
        width:50%;
        }
.quarterSize
        {
        width:25%;
        }

.slider-disabled .fd-slider-handle { display:none; visibility:hidden; }
.slider-enabled .fd-slider-handle { display:inline; visibility:visible; }