body.wood {
    background-color: #84624b;
    background-image:url(wood_bg.jpeg);
    background-size: 376px auto;    
}

.wood #bg {
    background: linear-gradient(180deg, rgba(0,0,0, 0.15) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.wood .btn_background {
    
    background: none;
    background-color: rgba(0,0,0, 0.25);
    border-bottom:1px rgba(255,255,255, 0.4) solid;
    
}

.wood .knob_background {
    background: linear-gradient(180deg, rgba(0,0,0, 0.5) 0%, rgba(0, 0, 0, 0.15) 100%);
}


.wood .button {
    background: linear-gradient(180deg, #2f2f2f 0%, #282828 100%);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(237,209,187, 0.6);
    border-bottom:1px black solid; 
}



.wood .knob_inner {
    background-image:url(wood_bg.jpeg);
    background-size: 376px auto; 
    background: linear-gradient(180deg, rgba(0,0,0, 0.5) 0%, rgba(0, 0, 0, 0.15) 100%);
    background-size: 376px auto;
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);

}

.wood .dot {
    background-color: rgba(30, 30, 30, 0.2);
}

.wood .section .header {
    transform:translateZ(1px);
    z-index: 20;
    text-transform: none;
    font-family: Inter;
    letter-spacing: 0px;
    font-size: 14px;
    font-weight: 700;
    color:rgba(237,209,187, 0.9);
    opacity:1;
    text-shadow: 0px 2px 2px rgba(0,0,0, 0.6), inset 0px 1px 0px white;
}




body.cyber {
    background: none; 
    background-color:rgb(20, 36, 44);
}

.cyber #bg {
    background: none; /*linear-gradient(180deg, rgba(0,0,0, 0.0) 0%, rgba(0, 0, 0, 0.25) 100%);*/
}

.cyber .btn_background {
    box-shadow:none;
    background:none;
    background-color:transparent;
    outline:1px rgba(0, 230, 255, 0.3) solid;
}

.cyber .section .header {
    color:rgba(0, 230, 255, 0.9);
    
    text-shadow: 0px 0px 3px rgba(0, 230, 255, 0.5);
}

.cyber .button {
    outline:1px rgba(0, 230, 255, 0.3) solid;
    background-color:transparent;
    background:none;
    box-shadow:none;
}

.cyber .button.on {
    outline:1px rgba(0, 230, 255, 0.9) solid;
    box-shadow: 0px 0px 3px rgba(0, 230, 255, 0.5), inset 0px 0px 3px rgba(0, 230, 255, 0.5);
}

.cyber .button .label {
    color:rgba(168, 240, 255, 0.9);
}

.cyber .button .quick_icon {
    color:rgba(168, 240, 255, 0.9);
}

.cyber .knob_background {
    background:none;
    background-color: none;
}

.cyber .knob {
    background:none;
    background-color: rgba(0, 230, 255, 0.05);
    outline:1px rgba(0, 230, 255, 0.3) solid;
}

.cyber .knob_inner {
    background:none;
    background-color: rgb(20, 36, 44);
    box-shadow: none;
    outline:1px rgba(0, 230, 255, 0.3) solid;
}

.cyber .line {
    
    height:1px;
    border:none;
    box-shadow: none;;
    background-color: rgba(0, 230, 255, 0.5);
}






body.synth {
    background-color: white;
    background-image:none;
    background-size: 376px auto;    
}

.synth #bg {
    background: linear-gradient(180deg, rgba(0,0,0, 0.15) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.synth .btn_background {
    
    background: none;
    background-color: rgba(0,0,0, 0.25);
    border-bottom:1px rgba(255,255,255, 0.4) solid;
    
}

.synth .knob_background {
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2);
    background: linear-gradient(180deg, rgba(0,0,0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
}


.synth .button {
    background: linear-gradient(180deg, #2f2f2f 0%, #282828 100%);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(237,209,187, 0.6);
    border-bottom:1px black solid; 
}



.synth .knob_inner {
    background-image:url(wood_bg.jpeg);
    background-size: 376px auto; 
    background: linear-gradient(180deg, rgba(0,0,0, 0.5) 0%, rgba(0, 0, 0, 0.15) 100%);
    background-size: 376px auto;
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);

}

.synth .dot {
    background-color: rgba(30, 30, 30, 0.2);
}

.synth .section .header {
    text-shadow: none;
    color:black;
    /*
    transform:translateZ(1px);
    z-index: 20;
    text-transform: none;
    font-family: Inter;
    letter-spacing: 0px;
    font-size: 14px;
    font-weight: 700;
    color:rgba(237,209,187, 0.9);
    opacity:1;
    text-shadow: 0px 2px 2px rgba(0,0,0, 0.6), inset 0px 1px 0px white;
    */
}



body.brushed {
    background-color: white;
    background-image:url(brushed_metal.png);
    background-size: 376px auto;    
}

.brushed #bg {
    background: linear-gradient(155deg, 
        rgba(0, 0, 0, 0.10) 0%, 
        rgba(0, 0, 0, 0.0) 15%, 
        rgba(0, 0, 0, 0.25) 30%, 
        rgba(0, 0, 0, 0.0) 40%,
        rgba(0, 0, 0, 0.35) 60%, 
        
        
        rgba(0, 0, 0, 0.55) 81%,
        rgba(0, 0, 0, 0.45) 100%);
}

.brushed .btn_background {
    
    background: none;
    background-color: rgba(0,0,0, 0.25);
    border-bottom:1px rgba(255,255,255, 0.4) solid;
    
}

.brushed .knob_background {
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2);
    background: linear-gradient(180deg, rgba(0,0,0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
}


.brushed .button {
    background: linear-gradient(180deg, #2f2f2f 0%, #282828 100%);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(237,209,187, 0.6);
    border-bottom:1px black solid; 
}



.brushed .knob_inner {
    background-image:url(wood_bg.jpeg);
    background-size: 376px auto; 
    background: linear-gradient(180deg, rgba(0,0,0, 0.5) 0%, rgba(0, 0, 0, 0.15) 100%);
    background-size: 376px auto;
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);

}

.brushed .dot {
    background-color: rgba(30, 30, 30, 0.2);
}

.brushed .section .header {
    text-shadow: none;
    color:black;
    /*
    transform:translateZ(1px);
    z-index: 20;
    text-transform: none;
    font-family: Inter;
    letter-spacing: 0px;
    font-size: 14px;
    font-weight: 700;
    color:rgba(237,209,187, 0.9);
    opacity:1;
    text-shadow: 0px 2px 2px rgba(0,0,0, 0.6), inset 0px 1px 0px white;
    */
}