/* .controlBtn .btntxt, .btnView .btntxt {color:#886; color:#BBB999;} */
#syntaxButtons h3, #chordGroupButtons h3  {color:#665;}
.keyBtn, .keyBtnSharp, .keyBtnFlat, .chordTypeBtn, .chordGroupBtn, .btnLastChord {color:#AA7; color:#CCC9A9;} 


.keyBtn { background:#2F2E2A;}
.keyBtnSharp, .keyBtnFlat {background:#20201C;} 
.chordTypeBtn  {background:#1D1C18; background:#262520; }
.btnLastChord {background:#1D1C18; background:none;}
#group1  .chordGroupBtn { background:#224961;}
#group2  .chordGroupBtn { background:#254C15;background:#134; }
#chordGroupButtons #group1 .on {background:#462; background:#351; color:#FFF}
#chordGroupButtons #group2 .on {background:#351; background:#351; color:#FFF}
/* --- touched --- */
#chordTypeButtons .touched {background:#323229; color:#AA7;}
#chordGroupButtons .touched {background:#363630; color:#AA7;}
.keyBtn.touched {background:#464639; }
.keyBtnSharp.touched, .keyBtnFlat.touched {background:#383829; }


/* ############# COLORS DAY ##################### */

/* .day .controlBtn .btntxt, .day .btnView .btntxt {color:#443;} */
.day #syntaxButtons h3, .day #chordGroupButtons h3  {color:#554;}
/* .day .keyBtn, .day .keyBtnSharp, .day .keyBtnFlat, .day .chordTypeBtn, .day .chordGroupBtn, .day .yes {font-weight:bold} */

.day .keyBtn, .day .keyBtnSharp, .day .keyBtnFlat, .day .chordTypeBtn {color:#331;}
.day .keyBtn { background:#D9D9D3;}
.day .keyBtnSharp, .day .keyBtnFlat {background:#BBBBB6;} 
.day .chordTypeBtn  {background:#DBDCD8;} 
.day .btnLastChord {background:#CBCCC8; background:none;}

.blue .keyBtn { background:#367;}
.blue .keyBtnSharp, .blue .keyBtnFlat {background:#256;} 
.blue .chordTypeBtn  {background:#256e;}  

.day #group1 .chordGroupBtn {background:#CCA; }
.day #group2 .chordGroupBtn {background:#DC9; } 
.day #chordGroupButtons #group1 .on {background:#898D70; color:#FFD; background:#C50; color:#FFF} 
.day #chordGroupButtons #group2 .on {background:#8D886C;  color:#FFC; background:#C50; color:#FFF} 
/* --- touched --- */
.day #chordTypeButtons .touched {background:#EEEEEC; color:#AA8;}
.day #chordGroupButtons .touched {background:#EEEEEC; color:#AA8;}
.day .keyBtn.touched {background:#EEEEEC;}
.day .keyBtnSharp.touched, .day .keyBtnFlat.touched {background:#EEEEEC; }


#fretboardarea, #fretboard {background:none;}

#chordLabel {color:#FFF;}
.controlBtn .btntxt {color:#BBB999;}
#syntaxButtons h3  {color:#665;}

.day #chordLabel {color:#543; font-weight:bold;}
.day .controlBtn .btntxt {color:#443;}
.day #syntaxButtons h3  {color:#554;}


/* ############# TUNING ##################### */

.tuningPresetBtn, .tuningEditBtn, #tuningok, #tuningResetBtn, .tunedown, .tuneup  {background:#221; background:#1b1e1c; border:1px solid #332; color:#BBA;}
.day .tuningPresetBtn, .day .tuningEditBtn, .day #tuningok, .day #tuningResetBtn, .day .tunedown, .day .tuneup  {background:none; border:1px solid #999990; color:#332;} 
.blue .tuningPresetBtn, .blue .tuningEditBtn, .blue #tuningok, .blue #tuningResetBtn, .blue .tunedown, .blue .tuneup  {background:#134; border:1px solid #466; color:#CDD;} 

#btnTuningTxt {color:#BBB999;}
#btnTuningName {color:#BBB999;}
#btnTuningTxt.warning {color:#C43;}

.day #btnTuningTxt {color:#665;}
.day #btnTuningName {color:#332;}
.day #btnTuningTxt.warning {color:#D00;}

.blue #btnTuningTxt {color:#DDDAAA;}
.blue #btnTuningName {color:#BBB999;}
.blue #btnTuningTxt.warning {color:#E43;}

/* #tuningScreen, #descrScreen {background: none;}  */
#tuningResetTxt {color:#998;}
.edittxt {background:#000; border: 1px solid #110; color:#CCB;}
.enh {border: 1px solid #221; background:#000;}
.cbox .tunedown, .cbox .tuneup {color:#554;}

/* .day #tuningScreen, .day #descrScreen {background:#FFF;} */
.day #tuningResetTxt {color:#776;}
.day .edittxt {background:#FFF; border: 1px solid #EEE; color:#332;}
.day .enh {background:#FFF; border: 1px solid #AA9; border: 1px solid #CCB;}
.day .cbox .tunedown, .day .cbox .tuneup {color:#998;}

.blue .edittxt {background:#664; border: 1px solid #AA9; color:#EED;}

.tuningPresetBtn span:nth-child(2) {color:#887;}
.day .tuningPresetBtn span:nth-child(2) {color:#BBA;}
.blue .tuningPresetBtn span:nth-child(2) {color:#AA8;}


/* #### vTools ###### */
.controlBtn, #vTools .controlBtn, #vControls .controlBtn, #vTools #tunings button, #staffbox, #vTools .optionlist {background:#191915; border:1px solid #3A3A2A;border-radius:5px;}
.day .controlBtn, .day #vTools .controlBtn, .day #vControls .controlBtn, .day #vTools #tunings button, .day #staffbox, .day #vTools .optionlist {background:#E9E9E9; background:#F5F5F5 !important; border:1px solid #BBA; color:#FFF; color:#156; border-radius:6px;}
.blue .controlBtn, .blue #vTools .controlBtn, .blue #vControls .controlBtn, .blue #vTools #tunings button, .blue #staffbox, .blue #vTools .optionlist {background:#134 !important; border:1px solid #256; color:#FFF; border-radius:8px;}


.useyes-check {fill:#707970;}
.useyes-box, .useno-box {fill:#111; stroke:#404940;}
.day .useyes-check {fill:#554;}
.day .useyes-box, .day .useno-box {fill:#FFF; stroke:#887;}
.blue .useyes-check {fill:#478;}
.blue .useyes-box, .blue .useno-box {fill:#023; stroke:#367;}

.yes {color:#996; color:#808980;}
.no {color:#505950;}
.day .yes {color:#332;}
.day .no {color:#998;}
.blue .yes {color:#EEC;}
.blue .no {color:#776;}

/* #### Control Btns Flat/Sharp Uni (Super Correct ## bb )###### */

#btnFlatSharp.btnflat #usearrflat, #btnFlatSharp.btnsharp #usearrsharp {stroke:none}
#btnFlatSharp.btnflat #useflat, #btnFlatSharp.btnsharp #usesharp {stroke:#D32}
#btnFlatSharp.btnflat #usesharp, #btnFlatSharp.btnflat #usearrsharp {stroke:#9B1} 
#btnFlatSharp.btnsharp #useflat, #btnFlatSharp.btnsharp #usearrflat {stroke:#9B1} 

.day #usesharp, .day #useflat { stroke:#774; }
.day #btnFlatSharp.btnflat #useflat, .day #btnFlatSharp.btnsharp #usesharp {stroke:#110}
.day #btnFlatSharp.btnflat #usesharp, .day #btnFlatSharp.btnflat #usearrsharp {stroke:#680} 
.day #btnFlatSharp.btnsharp #useflat, .day #btnFlatSharp.btnsharp #usearrflat {stroke:#680} 

#useuni, #useslash {stroke:#821 }
#btnCorrect.correct #useuni, #btnInvSlash.slash #useslash {stroke:#890;}
.day #useuni, .day #useslash {stroke:#A32 }
.day #btnCorrect.correct #useuni, .day #btnInvSlash.slash #useslash {stroke:#890;}




/* #### vTools special color ###### */
/*
.day .useyes-check {fill:#DDC;}
.day .useyes-box, .day .useno-box {fill:#443; stroke:#BBA;}
.day .yes {color:#FFF;}
.day .no {color:#BBA;}

.day #usesharp, .day #useflat {stroke:#FFF;}
.day #btnFlatSharp.btnflat #useflat, .day #btnFlatSharp.btnsharp #usesharp {stroke:#FFF !important;}
.day #btnFlatSharp.btnflat #usesharp, .day #btnFlatSharp.btnflat #usearrsharp {stroke:#CE4 !important;} 
.day #btnFlatSharp.btnsharp #useflat, .day #btnFlatSharp.btnsharp #usearrflat {stroke:#CE4 !important;} 

.day #vTools {background:#D9D9D8; background:#AAA8A3; border:1px solid #AAA7A0;}
.day #vTools .accClose .accElemH:first-child, .day #vTools .controlBtn, .day #vTools #tunings button, .day #vTools .optionlist {
    background:#66645E !important; border-color:#66645E !important; color:#FFF !important;
}
.day #vTools .accOpen > .accElemH {border-color:#E9E8E5; border-color:#66645E !important; color:#332; border-width:1.5px 1.5px 0 1.5px;}

.day #vTools .useopenclose {stroke:#FFF;}
.day #vTools .pinned .useopenclose {stroke:#BBA !important;}
.day #vTools .usepin {stroke:#888; stroke:#FFF; fill:none;}
.day #vTools .pinned .usepin {stroke:#C00; fill:#C00;}
.day .controlBtn .btntxt {color:#FFF;}
.day #vTools button svg {stroke:#FFF; fill:#FFF;}
.day #staffbox {background:#FFF !important; border:1px solid #787670}

.day .cell.free {background:#E5E5E4; border:1px solid #E5E5E4 !important; color:#BBA;}
.day .cell.busy {background:#66665C !important; border:1px solid #66665C !important; color:#FFF !important;}
.day .cell.selected {background:#C70; border:1px dotted #C70; color:#FFF;}
*/

#mobileTop .controlBtn { background:#1F1E1D}
.day #mobileTop .controlBtn { background:#EEE}
.blue #mobileTop .controlBtn { background:#0B2B3B}




/* --- touched --- */
/*
.tuningPresetBtn.touched, .tuningEditBtn.touched, #tuningok.touched, #tuningResetBtn.touched {background:#292920; background:#2b2e2c; border:1px solid #393929; color:#CCB;}
.tunedown.touched, .tuneup.touched {background:#292920;  background:#2b2e2c; border:1px solid #393929; color:#665;}

.day .tuningPresetBtn.touched, .day .tuningEditBtn.touched, .day #tuningok.touched, .day #tuningResetBtn.touched {background:#DDDDD9; border:1px solid #777770; color:#221;}
.day .tunedown.touched, .day .tuneup.touched {background:#DDDDD9; border:1px solid #777770; color:#776;}
*/

.theorylink {background:#452; color:#FFF !important; }
.theorylink:hover {background:#563;}

#related { padding:5px; margin:0 0 10px 0; border-radius:4px; font-size:0.80em;}
.theorylink { display:block; width:100%; min-height:25px; border-radius:5px; padding:10px; margin:5px 0 0 0;}

/* ######### border-radius #########  */
.chordGroupBtn {border-radius:3px;}
.thumbactive, .keyBtn, .keyBtnSharp, .keyBtnFlat, .chordTypeBtn, .keySelectBox, .chordGroupBtn, .btnLastChord  {border-radius:4px}
#chordTypeButtons, .thumbactive, .thumbpassive {border-radius:5px;}
.vBox {border-radius:10px;}
/* ########## */

#addendum {padding:0; }
#addTools {position:relative; }
#preface {display:none;}
#descrHead {display:none;} 
#viewButtons, .screenHead {display:none;}

#cfAd1, #cfAd2 { margin: 0 auto; min-height:60px; text-align:center; overflow: hidden;}

#ad300 { position:relative; left:20px; }
@media screen and (max-width:1200px) {
	#ad300 {left:0}
}

.vBox {position:relative; display:block; margin:10px 0 0 10px; padding:10px 0;} /*width:32.7%; */
#vDescr { float:left; width:calc(36% - 10px); padding:10px 0.5%; overflow-y:auto; }
#vDescr.full { position:relative; float:none; width:calc(100% - 20px); overflow-y:hidden}

#vNeck  { position:relative; float:left; width:calc(64% - 20px); }
#vTools { width:100%; padding:0 5px; margin:10px 0 20px 0; height:auto; }
#controls {padding-top:10px}
#controls h2 {display:none;}

#fretboardarea {position:relative; width:100%; height:220px; left:0; top:0; overflow:hidden;}
#fretboard {width:99%; height:100%; left:1%; top:0;}
.fb-wrapper {width:100%; height:100%; left:0; top:0;}    
#chordLabel {position:relative; width:50%; height:50px; left:7%; top:0; font-size:1.2em; margin:0; padding:10px 0 0 0;}

#controlsWrapper {position:relative; width:86%; left:8%; margin:0 0 10px 0; }
#controlButtons {width:300px; width:100%; left:0; top:0; padding:0;}
#controlButtons .controlBtn {width:15.0665%; width:15%; height:50px; padding:0; margin:5px 0 5px 0.2%;}


/* ### Chord Search ### */
#keyPicker {position:relative;  }
#keyButtons {position:relative; width:100%;  height:68px; }
#spanner {width:100%; }

#chordPicker {position:relative; width:100%; margin:15px 0}
#chordTypeButtons {position:relative; height:auto; overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling:touch}

/* --- Key Select Box --- */
.keySelectBox {display:none; }

/* --- Key Buttons --- */
#keyButtons span.black, #keyButtons span.white {display:block; float:left; width:7.9%; height:62px; margin:0 0.2%; padding:0; }
/* #keyButtons span.white {top:5px; top:0; } */
#keyButtons span.black {width:7.1%; font-size:0.9em }
#keyButtons span.white {width:8.5%; font-size:1.12em }
.keyBtn, .keyBtnSharp, .keyBtnFlat {width:100%; border:0; } 
.keyBtn { height:60px; }
.keyBtnSharp, .keyBtnFlat { height:29px; margin-bottom:2px;}

/* --- Chord Type Buttons --- */
.chordTypeBtn  {  width:24.4%; height:28px; margin:0px 0.3% 2px 0.3%; padding-top:3px; border:0;} /*width:15.6666665%; width:24.7%; width:32.73332%; */
.bigger .chordTypeBtn{ width:32.666666%; height:36px; font-size:1.2em}
/* --- Chord Group & Syntax Buttons --- */

#syntaxFilterContent {font-size:1em; position:relative; width:100%; height:200px; margin:0}
#syntaxFilterContent h3 {border:0 !important}
#syntaxFilterContent ul, #syntaxFilterContent li {margin:0; padding:0;}
#syntaxFilterHeader {height:40px; position:relative; font-size:1.2em; padding:11px 10px; margin:0; cursor:pointer}


#chordGroupButtons, #syntaxButtons {position:absolute; height:100%; top:0; }
#chordGroupButtons { width:58%; right:0; overflow:visible; }
#syntaxButtons { line-height:1em; width:40%; left:0; }


#syntaxButtons h3, #chordGroupButtons h3 {font-size:0.8em; font-weight:normal; font-family: sans-serif; text-align:right;}
#syntaxButtons h3, #chordGroupButtons h3 { position:relative; height:6%; margin:0; padding:0; }
#syntaxButtons h3 > span, #chordGroupButtons h3 > span {position:absolute; right:0; bottom:0}

#group1, #group2 {position:absolute; width:49%; height:94%; bottom:0; }
#group1 {left:0}
#group2 {right:0}

.chordGroupBtn {float:left; height:calc(25% - 2px); width:100%; margin:0 0 2px 0; padding: 2px 6px; border:0;  line-height:1.3em}
#group1 .chordGroupBtn:last-child, #group2 .chordGroupBtn:last-child {height:25%; margin:0}
.chordGroupBtn small {display:none}

/* #syntaxShort, #syntaxIcon, #syntaxPunct  { height:27.3332%; } */
.optionlist { padding:0; height:27.3332%; font-size:0.9em;} /* font-size:0.9em; */
.optionlist li {position:relative; display:block; width:100%; height:45%; overflow:hidden; margin:0; list-style-type:none;  } /*  border:1px dotted #456 */
.optionlist li > span {position:absolute; left:25%; top:calc(55% - 0.4em);  }
.optionlist li > .svgyes, .optionlist li > .svgno {position:absolute; width:15%; height:65%; left:5%; top:28%;}
.yes .svgno, .no .svgyes {display:none}



/* ####################################################### */
/* ############# @ MEDIA @ MEDIA @ MEDIA ################# */
/* ####################################################### */

#btnNeck, #btnDescr {position:absolute; visibility:hidden; z-index:3;}

@media screen and (max-width:1200px) {
    #vDescr { width:calc(36% - 5px); }
    #vDescr.full { width:calc(100% - 10px);}
    #vNeck  { width:calc(64% - 10px); }
    
    .vBox { margin:10px 0 0 5px;}
    #vTools {margin:10px 0 20px 0;}
}


@media screen and (max-width:1150px) {
    #vDescr, #vNeck { width:calc(100% - 10px)}
    #btnDescr, #btnNeck {visibility:visible; position:absolute; width:30px; height:30px; right:20px; top:15px; background:none}
    #btnDescr svg, #btnNeck svg {position:absolute; width:100%; height:100%; top:0; left:0; }
}

@media screen and (max-width:900px) {
    #keyButtons { height:134px}
    #keyButtons span.black, #keyButtons span.white { width:16.2%;}
    .chordTypeBtn  {  width:32.666666%;} 
    .bigger .chordTypeBtn{ width:49.4%; }
    /* #controlButtons .controlBtn {width:15.0665%; width:31%;} */
}


@media screen and (max-width:640px) {
    .vBox { width:100%; margin:10px 0 0 0;}
    #vDescr, #vDescr.full { float:none; width:100%; left:0; }
    #vNeck  { float:none; width:100%; left:0; }
    .chordTypeBtn{ font-size:1.3em;  height:32px;}
    /* #controlButtons .controlBtn {width:15.1%; height:50px; padding:0; margin:5px 0.15% 5px 0% !important;} */
    #vTools {margin:10px 0 10px 0;}

    #fretboardarea {height:200px;}
    #fretboard {width:100%; }

}