/* 
    Document   : mobileFrameScroller
    Created on : Nov 19, 2013, 3:37:52 PM
    Author     : mercredo
    Description:
        Purpose of the stylesheet follows.
*/

.scrollWrapper
{
    /*height: 300px;*/
    width: 110px;
    position: absolute;
    z-index: 2000;
    float:left;
    margin-top: 25px;
    margin-left: -110px;
}

/* slider root element */
.slider {
    /*background:#3C72E6 url(/media/img/gradient/h30.png) repeat-x 0 0;*/
    
    position:relative;
    cursor:pointer;
    border:1px solid #333;
    float:left;
    clear:right;
    height:450px;
    width:9px;
    margin:0 0 0 60px;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -moz-box-shadow: 0 0 8px #C3D3EA inset;
    box-shadow: 0 0 8px #C3D3EA inset;
}

/* progress bar (enabled with progress: true) */
.progress {
    height:9px;
    background-color:#C5FF00;
    display:none;
    opacity:0.6;
}

/* drag handle */
.handle {
    background:#fff url("../../../images/sliderButtonWhite.jpg") no-repeat 0 0;
    background-size: 147px;
    height:28px;
    width:38px;
    top:0;
    left:-16px;
    position:absolute;
    display:block;
    margin-top:1px;
    border:1px solid #000;
    cursor:move;
    box-shadow: 1px 1px 2px 0px #000000;
    -moz-box-shadow: 1px 1px 2px 0px #000000;
    -webkit-box-shadow: 1px 1px 2px 0px #000000;
/*    border-radius: 14px;
    -moz-border-radius:14px;
    -webkit-border-radius:14px;*/

}

/* the input field */
.range {
    border:1px inset #ddd;
    float:left;
    font-size:20px;
    margin:0 0 0 15px;
    padding:3px 0;
    text-align:center;
    width:9px;
    position:absolute;
    bottom:0;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}