/*

   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:0px 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:none;
        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;
        -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:none;
        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:0px none;
        background:transparent url(../img/handle.horizontal.png) no-repeat 0px 0px;
        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:0 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(../img/handle.horizontal.png) no-repeat 0px 0px;
        }
/* blue handle, no glow */
.focused .fd-slider-handle
        {
        background:transparent url(../img/handle.horizontal.png) no-repeat 0px 0px;
        }
/* blue handle glow */
.focused.fd-slider-hover .fd-slider-handle
        {
        background:transparent url(../img/handle.horizontal.hover.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;
        }
				
/* Generic CSS used for the slider */
body
        {
        background:#fff;
        color:#333;
        text-align:center;
        font-size:12px;
        font-family: verdana,arial,sans-serif;
        color:#000;
        padding:0;
        margin:0;
        border:0;
        line-height:1.4;
        }
h1
        {
        font-weight:lighter;
        font-family:georgia, times new roman, times, georgia, palatino, serif;
        text-align:center;
        margin-top:0.6em;
        color:#111;
        font-size:2em;
        }
h2
        {
        font-weight:lighter;
        font-family:verdana,arial,sans-serif;
        text-align:center;
        margin:1em 0;
        color:#333;
        text-transform:uppercase;
        letter-spacing:1px;
        font-size:1.2em;
        }
kbd
        {
        background-color:#eeeeee;
        padding:2px;
        border:1px solid #dddddd;
        border-bottom-color:#999999;
        border-left-color:#999999;
        }
kbd, code
        {
        font-family:'andale mono','lucida console','courier new',monospace;
        font-size:1em;
        }
p
        {
        line-height:1.6em;
        margin:0 0 1.6em 0;
        text-align:left;
        }
#article-wrapper
        {
        text-align:center;
        border:0px double #ccc;
        background:#fcfcfc;
        width:95%;
        margin:0 auto;
        padding:0;
        }
fieldset
        {
        margin:0;
        padding:1em;
        text-align:left;
        }
form > fieldset
        {
        border:1px solid #ccc;
        }
form
        {
        margin:0 auto 1.4em 0;
        padding:0;
        text-align:center;
        margin:0 auto;
        }
input
        {
        border:1px solid #ccc;
        border-top:1px solid #888;
        border-left:1px solid #888;
        width:3em;
        margin-left:0.2em;
        }
				
input[type=submit]
        {
				height: 44px;
				width: 213px;
				background-image:url(../img/btn_scan.jpg);
				background-repeat:no-repeat;
        border:0px;
        margin:0px;
				padding:0px;
        }
				
label
        {
        display:block;
        padding:0;
        margin-right:0.2em;
        text-align:right;
        font-style:oblique;
        font-weight:bold;
        color:#5c5c5c;
        }
code
        {
        font-family:'andale mono', 'lucida console', 'courier new', monospace;
        font-size:12px;
        color:#222;
        }
a
        {
        font-weight:normal;
        outline:none;
        }
a:link,
a:visited
        {
        color:#333;
        text-decoration:underline;
        }
a:hover
        {
        color:#fff;
        text-decoration:none;
        background:#000;
        }
a:active
        {
        color:#000;
        text-decoration:underline;
        }
#fd_slider_describedby
        {
        padding:1em;
        border:3px solid #a84444;
        background:#fff;
        }