/* 
    Document   : knobControl
    Created on : 04.10.2012, 21:09:38
    Author     : Andreas
    Description:
        Purpose of the stylesheet follows.
*/

.knobControl {
    width: 1cm;
    height: 1cm;
    position: relative;
    float: left;
    margin: 1mm;
}

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

.knobControl .knob {
    position: absolute;
    top: 2mm;
    left: 2mm;
    border-radius: 4mm;
    width: 6mm;
    background-color: #444;
    height: 6mm;
    box-shadow: 1.3mm 1mm 2.4mm -1.3mm #222;
/*    background: -webkit-radial-gradient(circle, #444444 44%, #9BCE5C 47%, #9BCE5C 59%, #444444 60%);
    background:    -moz-radial-gradient(circle, #444444 44%, #9BCE5C 47%, #9BCE5C 59%, #444444 60%);
    background:     -ms-radial-gradient(circle, #444444 44%, #9BCE5C 47%, #9BCE5C 59%, #444444 60%);
    background:      -o-radial-gradient(circle, #444444 44%, #9BCE5C 47%, #9BCE5C 59%, #444444 60%);
    background:         radial-gradient(circle, #444444 44%, #9BCE5C 47%, #9BCE5C 59%, #444444 60%);*/
}

.knobControl .knob .colorCode {
    background-color: transparent;
    border-radius: 2.5mm 2.5mm 2.5mm 2.5mm;
    height: 5mm;
    left: 0.5mm;
    position: absolute;
    top: 0.5mm;
    width: 5mm;
}

.knobControl .knob .colorCode .inner {
     background-color: #444444;
    border-radius: 2mm 2mm 2mm 2mm;
    height: 4mm;
    left: 0.5mm;
    position: absolute;
    top: 0.5mm;
    width: 4mm;
}

.knobControl .knobPointer {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: transparent;
    border-left: 4mm solid #222222;
    border-radius: 6mm 6mm 6mm 6mm / 2mm 2mm 2mm 2mm;
    height: 1mm;
    left: 0.75mm;
    position: absolute;
    top: 4.5mm;
    width: 8.5mm;
}

.knobControl .knob .inner .knobPointer {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: transparent;
    border-left: 3.5mm solid #DDDDDD;
    border-radius: 6mm 6mm 6mm 6mm / 1mm 1mm 1mm 1mm;
    height: 0.3mm;
    left: -1.75mm;
    position: absolute;
    top: 1.85mm;
    width: 7.5mm;    
}


.knobControl .scale {
    position: relative;
    width: 1cm;
    height: 1cm;
    top: 0mm;
    left: 0mm;
}

.knobControl .scale .mark {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: transparent;
    border-left: 1.5mm solid #222222;
    height: 0.3mm;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 4.85mm;
    width: 1cm;
}

.knobControl .scale .textMark {
    bottom: -1mm;
    color: #222222;
    font-family: sans-serif;
    font-size: 2mm;
    position: absolute;
}

.knobControl .scale .left {
    left: -0.5mm;
    text-align: left;
}

.knobControl .scale .right {
    right: -0.5mm;
    text-align: right;
}