/* 
    Document   : sampleTrack
    Created on : 07.10.2012, 23:28:34
    Author     : Andreas
    Description:
        Purpose of the stylesheet follows.
*/

.sampleTrack {
    transition: height 0.3s;
    -o-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -webkit-transition: height 0.3s;
    position: relative;
}

/*.sampleTrack:hover {
    height: 2.4cm;
}*/

.sampleTrack div[class^="beat_"] {
    height: 100%;
    position: relative;
}

.sampleTrack .upperControls {
    z-index: 2;
    position: relative;
}

.sampleTrack .upperControls[class*="beat_"] {
    box-shadow: 0mm 1.3mm 3mm -2mm #222;
}

.sampleTrack .lowerControls {
    z-index: 1;
    position: absolute;
    bottom: 0.5mm;
}

.sampleTrack .delteTrack {
    cursor: default;
    font-size: 7mm;
    position: absolute;
    bottom: 0;
    right: 0;
}

.sampleTrack .beat_0 {
    background-color: #cccccc;
}

.sampleTrack .beat_1 {
    background-color: #999999;
}

.sampleTrack .btnExpand span {
    display: block;
    transition: transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -ms-transition: -ms-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
}

.sampleTrack .rotateSpan0 span {
    transform: none;
    -o-transform: none;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
}

.sampleTrack .rotateSpan180 span {
    transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}

.sampleTrack .mute {
    cursor: default;
}

.sampleTrack .inactiveMute {
    background-color: #AAAA44;
}

.sampleTrack .activeMute {
    background-color: #FFFF33;
}

.sampleTrack .solo {
    cursor: default;
}

.sampleTrack .inactiveSolo {
    background-color: #AA4444;
}

.sampleTrack .activeSolo {
    background-color: #FF3333;
}

.sampleTrack .inactiveStep {
    background-color: #e0ddd2;
}

.sampleTrack .activeStep {
    background-color: #FFAAAA;                
    box-shadow: 0.3mm 0.3mm 0.1mm #444444, 0mm 0mm 4mm #AAAAAA inset, 0mm 0mm 1mm #FFAAAA;
}

.sampleTrack .activeStep:hover,
.sampleTrack .inactiveStep:hover{
    box-shadow: 0.3mm 0.3mm 0.1mm #444444, 0mm 0mm 4mm #AAAAAA inset, 0mm 0mm 4mm #FFFFFF inset, 0mm 0mm 3mm #FFFFFF;
}