/* 
    Document   : slidercontrol
    Created on : 17.09.2012, 18:37:22
    Author     : Andreas
    Description:
        Purpose of the stylesheet follows.
*/

.slidercontrol {
    width: 2cm;
    height: 9cm;
    text-align: center;
    vertical-align: middle;
    position: relative;
    float: left;
    border-radius: 2mm;
}

.slidercontrol .label {
    background-color: #555555;
    bottom: 0mm;
    color: #FFFFFF;
    font-size: 3mm;
    font-weight: bold;
    height: 1cm;
    line-height: 1cm;
    position: absolute;
    width: 2cm;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.slidercontrol .scale {
    background-color: #666666;
    border-radius: 0.7mm;
    box-shadow: 0.5mm 0.5mm 0.5mm #222222 inset;
    height: 6cm;
    left: 7mm;
    position: relative;
    top: 1cm;
    width: 1.4mm;
}

.slidercontrol .scale .mark {
    height: 1mm;
    left: 5mm;
    position: absolute;
    width: 2mm;
    cursor: pointer;
}

.slidercontrol .scale .mark:hover {
    box-shadow: 0mm 0mm 1mm #000000;
}

.slidercontrol .scale .textMark {
    color: #222222;
    font-family: sans-serif;
    font-size: 2.2mm;
    height: 4mm;
    right: -10mm;
    line-height: 4mm;
    position: absolute;
    text-align: right;
    width: 6mm;
    padding-right: 0.5mm;
    white-space: nowrap;
    cursor: pointer;
}

.slidercontrol .scale .textMark:hover {
    text-shadow: 0mm 0mm 1mm #000000;
}

.slidercontrol .scale .top {
    border-top: 0.3mm solid #666666;
}

.slidercontrol .scale .bottom {
    border-bottom: 0.3mm solid #666666;
}

.slidercontrol .knob {
    background-color: #DD3333;
    background: -webkit-linear-gradient(bottom, #EE4444 0%, #DD3333 27%, #880000 30%, #DD3333 35%, #880000 40%, #DD3333 45%, #FFDDDD 50%, #DD3333 55%, #880000 60%, #DD3333 65%, #880000 70%, #DD3333 73%) repeat scroll 0 0 transparent;
    background:    -moz-linear-gradient(to bottom, #EE4444 0%, #DD3333 27%, #880000 30%, #DD3333 35%, #880000 40%, #DD3333 45%, #FFDDDD 50%, #DD3333 55%, #880000 60%, #DD3333 65%, #880000 70%, #DD3333 73%) repeat scroll 0 0 transparent;
    background:     -ms-linear-gradient(to bottom, #EE4444 0%, #DD3333 27%, #880000 30%, #DD3333 35%, #880000 40%, #DD3333 45%, #FFDDDD 50%, #DD3333 55%, #880000 60%, #DD3333 65%, #880000 70%, #DD3333 73%) repeat scroll 0 0 transparent;
    background:      -o-linear-gradient(to bottom, #EE4444 0%, #DD3333 27%, #880000 30%, #DD3333 35%, #880000 40%, #DD3333 45%, #FFDDDD 50%, #DD3333 55%, #880000 60%, #DD3333 65%, #880000 70%, #DD3333 73%) repeat scroll 0 0 transparent;
    background:         linear-gradient(-90deg, #EE4444 0%, #DD3333 27%, #880000 30%, #DD3333 35%, #880000 40%, #DD3333 45%, #FFDDDD 50%, #DD3333 55%, #880000 60%, #DD3333 65%, #880000 70%, #DD3333 73%) repeat scroll 0 0 transparent;
    border-radius: 2mm 2mm 2mm 2mm / 8mm 8mm 8mm 8mm;
    box-shadow: 0 0 2mm #666666 inset, -0.5mm -0.5mm 0.7mm #111111 inset, 0.4mm 0.2mm 0.3mm #444444, 1.3mm 1mm 2.4mm -1.3mm #222;
    height: 16mm;
    position: absolute;
    bottom: 12mm;
    left: 3.5mm;
    width: 8mm;
}

.slidercontrol .knob:hover {
    box-shadow: 0mm 0mm 2mm #AAA inset, 0mm 0mm 1mm white inset, 0mm 0mm 3mm white !important;
}