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


.spotnotes .txtintervals {display:none;}
.spotintervals .txtnotes {display:none;}


.on #usefavscompare {stroke:#C70;}
.day .on #usefavscompare {stroke:#FFF; }
.blue .on #usefavscompare {stroke:#C70; }

svg.yellow { stroke:#950;} 
svg.red { stroke:#A21;}
.day svg.yellow { stroke:#F60;} 
.day svg.red { stroke:#C00;}
.blue svg.yellow { stroke:#F60;} 
.blue svg.red { stroke:#E31;}


/* ############# COLOR BACKGROUNDS BORDER ##################### */
/* ############# COLOR BACKGROUNDS BORDER ##################### */
/* ############# COLOR BACKGROUNDS BORDER ##################### */


#allchordsymbols button { background:#191915; border:1px solid #2C2C28;}
.day #allchordsymbols button { border:0px solid #BBA; background:#B5B4B0; background:none; border:1px solid #FFF; }
.blue #allchordsymbols button { background:#134; border:1px solid #256; border-radius:8px} 

#clickHere { color:#998; border:2px solid #700; border-radius:7px;}
.blue #clickHere { border:1px solid #E24; }
.day #clickHere { color:#554; border:1px solid #C12;}

.csBtn {color:#998;}
.csBtn:hover, .csBtn-active {color:#FFF; }
.day .csBtn { color:#554; border:0}
.day .csBtn:hover {color:#000; border:1px dashed #BC6 !important; } 
.day .csBtn-active {color:#110; border:1px solid #BC6 !important;} 
.blue .csBtn { color:#CCB;}
.blue .csBtn:hover {color:#FFF;} 
.blue .csBtn-active {color:#FFF; } 

/* ----- #favsBox ------ Analyzer Store Chords --------- */
/* --- #btnFavsSave, #btnFavsDelete, #btnFavsCompare ----*/
/*
#favsBox { background:none; } 
#btnFavsSave, #btnFavsDelete, #btnFavsCompare { background:#161917; border:1px solid #443; }
.day #btnFavsSave, .day #btnFavsDelete, .day #btnFavsCompare { background:#F5F5F5; border:1px solid #887; }
.day #btnFavsCompare.on {background:#C70 !important;}
.blue #btnFavsSave, .blue #btnFavsDelete, .blue #btnFavsCompare { background:none; border:1px solid #356; }

.cell.free {background:#141616; border:2px dotted #221; color:#221;}
.cell.busy {background:#181919; border:2px dotted #554; color:#776;}
.cell.selected {background:#181919; border:2px dotted #C70; color:#D70;}
.day .cell.free {background:#E5E5E4; border:1px solid #BBA; color:#BBA;}
.day .cell.busy {background:#F5F5F5; border:1px solid #887; color:#221;}
.day .cell.selected {background:#C70; border:1px solid #665 !important; color:#FFF;}
.blue .cell.free {background:none; border:1px solid #245; color:#567;}
.blue .cell.busy {background:#245; border:1px dotted #689; color:#9AB;}
.blue .cell.selected {background:#B60; border:1px dotted #330; color:#FFF;}
*/

/* ################# */

#fretboarder h1 {color:#A9A08B; color:#99907B } 
#vBuilder h3, #externalAccContent h3 { border-bottom:1px dotted #764} 
#download h2 {color:#D9D0BB}
.day #download h2 {color:#332}
.blue #download h2 {color:#D9D0BB}

#btnApplyNamefield {  color:#CCC; }
.day #btnApplyNamefield {  color:#221; }

#vNeck { background: #5D5B59; border-radius:9px; border:1px solid #665}
.day #vNeck { background: #FAF9F7; }
.blue #vNeck { background: #EBEAE8; }

#chordLabel, .day #chordLabel, .blue #chordLabel {color:#000;}
#btnTuning { background:none !important; border:0 !important; }
#btnTuningTxt, .day #btnTuningTxt, .blue #btnTuningTxt {color:#764;}
#btnTuningName, .day #btnTuningName, .blue #btnTuningName {color:#AA9;}

/* ----- #allchordsymbols --- Analyzer Chord Names ----- */

/* #selectImgType {color:#443; } */
#namefield  {background:#221; border:1px solid #443; color:#DDD; }
.blue #namefield {background:#052030; border:1px solid #344;}
.day #namefield {background:#FFF; border:1px solid #777; color:#221}




.day #vControls .controlBtn {background:none !important;}

.importBtn, .btnCube, .btnYN svg, .optionlist  {background:#221; background:#1b1e1c; border:1px solid #332; color:#BBA;}
.day .importBtn, .day .btnCube, .day .btnYN svg, .day .optionlist {background:none; border:1px solid #776; color:#332;} 
.blue .importBtn, .blue .btnCube, .blue .btnYN svg, .blue .optionlist {background:#134; border:1px solid #466; color:#CDD;} 

.btnRadio, .btnRadio:hover, .btnYN, .btnYN:hover {background:none !important;}
.btnRadio #svgcbbox {fill:none; stroke:#665}

.btnRadio.yes, .btnYN.yes  {color:#DE5;}
.btnRadio.yes #svgcbcheck { fill:#DE5}
.btnRadio:hover #svgcbcheck { stroke:#DE5 !important}

.day .btnRadio.yes #svgcbcheck { fill:#570;}
.day .btnYN.yes, .day .btnRadio.yes {color:#570}

.btnYN.yes #svgy {stroke:#9C0}
.day .btnYN.yes #svgy {stroke:#480}

.btnRadio.no, .btnYN.no {color:#B9B5A5;}
.day .btnRadio.no, .day .btnYN.no {color:#776;}
.blue .btnRadio.no, .blue .btnYN.no {color:#B9B5A5;}

.btnYN.no #svgn {stroke:#C33; } 
.day .btnYN.no #svgn {stroke:#E36}
.blue .btnYN.no #svgn {stroke:#E36}


#fileNameField {background:#FFF; color:#560; border:3px solid #AB0; }
#btnDownload { background: #07A; background: #782; color:#FFF; padding:3px 20px; margin:8px auto 15px auto; font-size:1.4em}

.optionlist, #namefield, #btnApplyNamefield, #fileNameField, .controlBtn {border-radius:5px;} 
#allchordsymbols, #customNaming, #writing {border-radius:8px;}

 /* ###################################################  */
/* ################### FONTS SCHRIFT #################  */
/* ###################################################  */


/* Oolimo Chords */
@font-face {
    font-family: 'Oolimo';
    /*src: local('Oolimo'), url('../fonts/OoChords1.otf') format('opentype');*/
    src: local('Oolimo'), url('../fonts/OolimoChordsBasic.otf') format('opentype'); 
}
/* format('truetype-opentype'); */


/* ###################################################### */
/* ######## LAYOUT  ###### LAYOUT ####### LAYOUT  ####### */
/* ###################################################### */

#nav2app {display:none;}
#leftbar {display:none;}
#vTools { display:none}

#vBuilder h2, #externalAccContent h2 {margin: 0 0 5px 0;}  
#vBuilder h3 {margin: 8px 3.5% 5px 4%; } 
#externalAccContent h3 {margin: 10px 3.5% 6px 4%; } 
#vDownload h2 {margin: 20px 0;}   

#controls, #controls2 { padding-top:8px; }
#controls { float:left; width:350px; }
#controls2 { float:right; width:calc(100% - 355px); text-align:right;}
#controls .controlBtn {width:50px; height:50px; padding:0; margin:0 0 0 3px;}
#controls2 .controlBtn {width:50px; height:50px; padding:0; margin:0 3px 0 0;}
.controlBtn .btntxt {display:block; position:absolute; width:100%; left:0; bottom:2%; }
.controlBtn svg {position:absolute; width:70%; height:60%; top:5%; left:15%; right: auto;}
#btnClear svg { height:50%; width:60%; top:10%; left:20%;}  
#btnTuning { position:absolute; width:120px !important; height:50px; left:calc(70% - 30px); top:14px; padding:0;}

#btnTuning, #btnTuning *, #tuningboxtitle, #tuningScreen button, #tuningScreen * {user-select: none; -webkit-user-select: none;}
#btnTuningName, #btnTuningTxt {position:absolute; width:100%; height:40%;  left:0;}
#btnTuningName { bottom:2px; }
#btnTuningTxt { top:8px; }


.spotnotes #btnNotesIntTxt2 {display:none;}
.spotintervals #btnNotesIntTxt1 {display:none;}

#stump { transform:rotate(0); -webkit-transform:rotate(0); transform-origin:center; -webkit-transform-origin:center;}
/* svg#useup { transform:rotate(90deg);}
svg#usedown { transform:rotate(90deg);} */

#allchordsymbols, #customNaming, #writing { padding:0 0.5%; overflow:hidden; }
#allchordsymbols {float:left; margin:5px 1% 0 0; width:58%; min-height:300px;}
#customNaming, #writing {float:right; margin:5px 0 0 1%; width:40%; }
#customNaming {text-align:center}

#vNaming.vertical #customNaming, #vNaming.vertical #allchordsymbols, #vNaming.vertical #writing {width:100%; margin:5px 0 0 0;}
#allchordsymbols h2, #customNaming h2, #writing h2 {margin:10px 1%; padding:0; }
#allchordsymbols button { width:49%; height:36px; margin:2px 0.5%; padding:5px 5px 0 5px; overflow:visible; }
#allchordsymbols.allScales .csBtnSlash { display:none; }
#allchordsymbols.allScales .csBtnRoot { width:99% }
button#btnInv0a {width:99%}
#clickHere { position:relative; padding:50px 5% 50px 5%; margin:50px 20px; white-space: pre-line; opacity:0.7;  line-height:1.6em;  text-align:center;}

.csBtn-off {display:none;}
.csBtn-active, .csBtn-off, .csBtn {position:relative; }
.csBtn-active svg, .csBtn-off svg, .csBtn svg {display:none}
.csBtn-active svg.yellow, .csBtn-off svg.yellow, .csBtn svg.yellow, .csBtn-active svg.red, .csBtn-off svg.red, .csBtn svg.red {display:block}
.csBtn-active svg, .csBtn-off svg, .csBtn svg { position:absolute; width:20px; height:18px; left:auto; right:3px; top:9px; }


#syntaxButtons { position:relative; width:100%; height:200px; margin:0;} 
#syntaxButtons ul, #syntaxButtons li, #syntaxButtons h3 {margin:0 1%; padding:0; }
#syntaxButtons h3 {height:5px}
#syntaxButtons h3 > span { position:absolute; right:5px; top:8px;}

.optionlist { padding:5px; cursor:pointer }
.optionlist li > span {left:14%; line-height:1em; top:calc(50% - 0.2em); }
.optionlist li > .svgyes, .optionlist li > .svgno { width:10%; left:0; }


/* ################# */


#pagenav, #staves, #save {display:none;}
#allWarnings, #chordLabel { display:none;}

#fretboardarea { border:0; border-radius:3px; border-radius:0; overflow:hidden !important; } 
#fretboardarea { position:relative; width:360px; left:calc(50% - 180px); height:220px; margin:30px 0;  }
#fretboardarea.bgimg {background-image: url("../../images/startseite/oolimo-guitar-chords-intro.jpg");background-size: 240%;background-position: 25% 0;}
#fretboardarea.vertical { width:220px; left:calc(50% - 120px); height:360px; background-size: 500%;background-position: 40% 0;}

.fb-wrapper { border:0; border-radius:3px; overflow:hidden !important; } 
.fb-wrapper canvas, #fretboard canvas { width:100%; height:100%;}


#fretboarder {margin:0 5px; }
#fretboarder h1 {font-weight: bolder; font-size:1.85em; text-align:center; margin:0; padding:0; border:0}
#fretboarder p {font-family:Oolimo; font-size:0.8em; text-align:center; margin:0 0 10px 0;  padding:0; border:0}



/* #savebox select {width:70px; height:28px; margin:10px 4px; padding:3px 3px} */

.center { margin:1em 0 0.5em 0}
#namefield  {width:100%; margin:5px 0; padding:3px 5px; font-size:0.9em !important;}
#fileNameField {width:94%; margin:5px 3% 5px 3%; padding:3px 5px; }
#btnApplyNamefield {padding:2px 18px !important; margin:10px auto ; font-size:1em !important;  }

.importBtn { display:inline-block;  padding:5px}
#btnImportCA { margin:3px 0 3px 4%; width:47%;}
#btnImportCF { margin:3px  0 3px 0; width:44%;}

.btnRadio { width:94%; height:26px; margin:2px 3%}
.btnRadio small { font-size: 0.7em}
.btnRadio svg { position:absolute; width:9%; height:75%; left:0; top:10%;}
.btnRadio .btntxt {display:block !important; position:relative; text-align:left; width:85%; left:15%}
.btnRadio #svgcbcheck {display:none}
.btnRadio:hover #svgcbcheck, .btnRadio.yes #svgcbcheck {display:block}

.btnCube {width:30px; height:30px; margin:3px 1%; padding:5px}
.btnCube .btntxt {display:none !important}
.btnDefault svg { width:60% !important; height:60% !important; left:20% !important; top:20%;}

.btnYN {width:92%; height:32px; margin:2px 0 2px 4%}
.btnYN .btntxt {display:block !important; text-align:left }
.btnYN #svgq, .btnYN #svgn {display:none}
.btnYN svg { position:absolute; width:30px; height:30px; left:auto;right:0; top:0; padding:6px; border-radius:50%}
.btnYN.yes #svgy  {display:block;}
.btnYN.yes #svgn {display:none;}
.btnYN.no #svgn {display:block;}
.btnYN.no #svgy {display:none;}

.tableAB, .tableIO, .tableSC {width:94%; margin:5px 3%;} 
.tableAB td:nth-child(1), .tableIO td:nth-child(1) {padding:0 0 0 5px}
.tableAB td:nth-child(2), .tableIO td:nth-child(2), .tableAB td:nth-child(3) {width:30px; padding:0 0 0 8px}
.tableSC td:nth-child(1) {width:30px; padding:0 10px 0 0}

#tuningpresetsbox {position:relative; } 
#editbox {position:relative; width:100%; height:165px; margin:5px 0 15px 0; display:none;}
#customtuningbox { position:relative; top:0; height:110px; }
#tuningResetTxt {border:0; border:0; position:absolute; width: 60%; height:24%; bottom: 10px; left:6%;  text-align:center; font-size:0.75em; user-select: none; -webkit-user-select: none}
#tuningResetTxt #resetCountZ {font-size:1.3em}
.tuningDiv {position:relative; height:60px; }
.tuningPresetBtn, .tuningEditBtn, #tuningok, #tuningResetBtn { height:50px; top:5px; border-radius:5px; }
.tuningPresetBtn {position:absolute; width: 70%; left:1%; }
.tuningEditBtn, #tuningok, #tuningResetBtn {position:absolute; width: 21%; right:1%; font-size:0.9em;}
#tuningok {  top:18%;}
#tuningResetBtn { bottom: 2px; top:auto}
.tuningPresetBtn span:nth-child(1) {position:absolute; display:block; width:100%; height:50%; top:25%; left:0; margin:0}
.tuningPresetBtn span:nth-child(2) {position:absolute; display:block; width:100%; height:28%; top:72%; left:0; font-size:0.6em; }

.tuningEditBtn span {position:absolute; width:100%; height:50%; top:20%; left:0; }
.cbox {position: relative; display:inline-block; width:11%; height:100%; margin:0 0 0 1%; }
/* .cbox:last-child {margin:0} */
.cbox button {width:100%; }
.cbox .edittxt { position:absolute; height:30%; width:100%; left:0; top:35%; font-weight:bold; border-radius:5px;}
.cbox .tunedown, .cbox .tuneup {position:absolute; height:30%; width:100%; left:0; border-radius:5px; font-size:0.8em; }
.cbox .tuneup {top:0}
.cbox .tunedown {top:70%}

/* ############## TEXT ############ */
/* ############# TEXT ############ */
/* ############ TEXT ############ */

#vBuilder h2, #externalAccContent h2, #allchordsymbols h2, #customNaming h2, #writing h2, #allchordsymbols button {font-size:1em; text-align:left; }
#clickHere {font-size:1.2em;}
#syntaxButtons h3 {font-size:0.7em; text-align:right;}
.optionlist li > span {font-size:0.9em;}
#vBuilder h3  { font-size:0.8em; }  
#externalAccContent h3 { font-size:1em !important; } 
#download h2 { font-size:1.45vw; text-align:center; } 
.controlBtn .btntxt { font-size:0.55em; text-align:center;}
#btnTuningName { font-size:0.65em; text-align:center;}
#btnTuningTxt  { font-size:0.8em; font-weight:bold; text-align:center;}
#vDownload #fileQ {margin: 10px 0px 10px 15px}


/* ############## MEDIA QUERIES ############ */
/* ############# MEDIA QUERIES ############ */
/* ############ MEDIA QUERIES ############ */

/*  border:1px dotted green */

#content {width:calc(100% - 330px);  width:100%; left:0px;} 
.vBox  { margin:0; padding:0; }

#vBuilder { position:relative; float:left; width:310px; height:755px; margin:10px 0 0 10px; padding:10px 5px;  overflow-y:scroll}
#vDownload { position:relative; float:right; width:310px; height:755px; padding:0; margin:10px 15px 0 0; }
#layoutCenter { position:relative; float:left; width:calc(100% - 665px); margin: 0 0 0 10px; min-height:667px;  } 
#vControls { position:relative; width:calc(100% - 335px); width:calc(100% - 685px); width:100%; height:75px; margin:10px 0 0 0; padding: 3px 10px; }
#vNeck  {  position:relative; float:none; width:99.4%;  margin:10px 0.3% 0 0.3%; padding:5px 0; }
#vNaming { width:100%; margin:10px 0 0 0; padding:0 5px; min-height:367px;}

#vNeck.vertical { float:left; width:52%; min-height:667px}
#vNaming.vertical { float:right; width:46%; min-height:667px} 


@media screen and (max-width:1300px) {
    #vBuilder { width:280px; }
    #vDownload {width:200px; padding:0 5px; margin:10px 15px 0 0;}
    #layoutCenter { width:calc(100% - 525px); }
    #vDownload h2 { font-size:1.75vw;}
    #vDownload .btnRadio {height:auto; min-height:25px; font-size:14px}
    #ad300 {display:none}
}
@media screen and (max-width:1200px) {
    #vBuilder {margin:10px 0 0 5px; }
    #vDownload {width:200px; padding:0 5px; margin:10px 5px 0 0;}
    #layoutCenter { width:calc(100% - 510px); }
}
@media screen and (min-width:1051px) and (max-width:1200px) {
    #controls .controlBtn {width:45px; height:50px; padding:0; margin:0 0 0 3px;}
    #controls2 .controlBtn {width:45px; height:50px; padding:0; margin:0 3px 0 0;}
}

@media screen and (max-width:1050px) {
    #vBuilder { height:955px; }
    #layoutCenter { width:calc(100% - 305px); }
    #vDownload { width:calc(100% - 305px); height:190px; margin:10px 10px 0 0;}
    
}
@media screen and (min-width:901px) and (max-width:1050px) {
    #fileQ, #fileD {display:inline-block; width:44%; margin:0 2.5%;}
    #vDownload h2 { font-size:3vw; margin: 10px 0 0 0;}
}

#externalAccContent, #tabletBtnsNameDownload, #vTwo {display:none;}
@media screen and (max-width:900px) {
    #upperAdBar {width:97%; margin: 5px 1.5%}
    #layoutCenter { width:calc(100% - 10px); min-width:500px; margin: 0 0 0 5px; padding: 0; }

    #vControls { height:130px; margin: 10px 1%}
    #vNeck { margin: 15px 1% 10px 1%}
    
    #vControls, #vNeck {width:98%; }
    #vBuilder, #vNaming, #vDownload { width:98%;  margin:10px 1%;}

    #allchordsymbols, #customNaming, #writing { float:none; width:98%; margin:10px 1%;}

    #vBuilder {height:auto;}
    #vDownload {  min-height:300px; }

    #vDownload h2 { font-size:2.7vw;} 
    #vBuilder h3, #vNaming h2 { font-size:2.7vw;} 

    #vTwo {display:block; clear:both; margin:10px 1%; min-height:400px}
    #vTwoBtns, #vTwoContent { margin:10px 1%; display:block; }
    #vTwoBtns { float:left; width:41%;}
    #vTwoContent { float:right; width:54%; padding:15px 0}

    #controls,  #controls2 {height:60px; padding-top:0; padding:0;}
    #controls .controlBtn {width:45px; height:50px; padding:0; margin:5px 0 0 3px;}
    #controls2 .controlBtn {width:45px; height:50px; padding:0; margin:5px 3px 0 0;}

    #vNeck.vertical, #vNaming.vertical { width:48%; min-height:667px;  margin:10px 1%;}
    #vControls.vertical {width:48%; height:240px; padding:0}
    #vControls.vertical #fretboarder {margin:10px 5px; }
    #vControls.vertical #controls, #vControls.vertical #controls2 { position:relative; width:98%; margin:15px 0; left:1.5%; padding:0; float:none; }
    #vControls.vertical #controls .controlBtn { width:14.5% !important; margin:5px 0.5% !important;}
    #vControls.vertical #controls2 .controlBtn { width:22% !important; margin:5px 7% 0 0 !important;}
    #vControls.vertical #btnTuning { left:3% !important; top:5%}
    #vTwo.vertical  {clear:none; float:right; width:48%; top:-260px; min-height:930px}
    #vTwo.vertical #vTwoBtns, #vTwo.vertical #vTwoContent { float:none; width:96%; margin:0 1% 10px 1%;}
    
    #vTwo.vertical #v2ContentBuilder, #vTwo.vertical #v2ContentNaming, #vTwo.vertical #v2ContentDownload {
        width:98%; margin:0 0 0 2%;
    }

    #v2ContentBuilder .accElemContent { display:none; }
    #v2ContentBuilder .accElemContent.open { display:block !important; }
    #v2ContentNaming #vNaming {float:none; width:100%; margin:0; padding:0; } /* border:1px dotted #689 */

    #v2ContentNaming.closed,  #v2ContentDownload.closed {display:none;}
    #v2ContentNaming.open,  #v2ContentDownload.open {display:block;}
    .accOpen { padding:0;}

    .accOpen .accElemH, #btnShowNaming {border-width:1px; border-radius:7px !important;}
    .keepopen, .openclose  {display:none}
    .accOpen .openclose { transform: rotate(-270deg);} 
    
    .vBox .vBox { all:unset }

    #btnShowNaming, #btnShowDownload {width:98%; height:60px; margin:0 0 20px 2%; text-align:left; padding:0 10px; border-width:1px; border-style:solid}
    #vTwo.vertical #btnShowNaming, #vTwo.vertical #btnShowDownload { height:40px; margin:0 0 15px 2%;}
    #btnShowNaming, #btnShowDownload {font-size:1em; background: #1C1C19; border-color: #3A3A2A !important; color:#986}
    .day #btnShowNaming, .day #btnShowDownload {background: #F5F5F5; border-color: #AAA !important;}
    .blue #btnShowNaming, .blue #btnShowDownload {background: #134; border-color: #456 !important; border-width:1px;}
    
    #vTwo .active { background: #393935; border-width:1px; }
    .blue #vTwo .active {background: #245 !important; border-width:1px; }
    .day #vTwo .active { background: #E5E5E5 !important; border-width:1px; }
}


/* ############### MOBILE ################ */

.show640 {display:none}
#mobileTop {display:none;}

@media screen and (max-width:640px) {
    /* #controlButtons .controlBtn {width:14.5% !important; margin:5px 0.5%;} */
	.show640 {display:block !important;}
	.hide640 {display:none !important;}
}

/* ############### BANNER ADS ################ */

/* adaddendum, #ad300, #ad160 {display:none; } */
#ad300 div { max-width:300px; }
#fuse-slot-22902728113-1 { max-width:300px; }
#ad300 { margin: 30px auto 10px auto;}
#caAd1, #caAd2 { margin: 0; text-align:center; min-height:60px}
#caAd1 {display:none}