#cf, #ca {border-radius:6px;}
#fretboardarea, .fb-box, #chordthumbs, #description, #staff, #allchordsymbols, #syntaxButtons, #syntaxButtonsCA, 
.optionlist, .controlBtn, .btnView, .btnView-off, .keyBtn, .keyBtnSharp, .keyBtnFlat, .chordTypeBtn {border-radius:5px;}

#svgcbbox {stroke:#AA7; fill:#221}
#svgcbcheck {fill:#DCA}
.blue #svgcbbox {stroke:#9AA; fill:#256}
.blue #svgcbcheck {fill:#FFF}
.day #svgcbbox {stroke:#887; fill:#FFF}
.day #svgcbcheck {fill:#332}

.day #cf .fbsquare, .day #ca .fbsquare {stroke:#572; fill:#BC0;}
.day #cf .fbdot, .day #ca .fbdot { stroke:#B50; fill:#F90;}


#svgarrsharp, #svgarrflat {stroke:none}
#btnFlatSharp.btnflat #svgarrsharp, #btnFlatSharp.btnsharp #svgarrflat {stroke:#BD0}
#btnFlatSharp.btnflat #svgsharp, #btnFlatSharp.btnflat #svgsflat {stroke:#BD0} 
#btnFlatSharp.btnsharp #scgflat, #btnFlatSharp.btnsharp #svgflat {stroke:#BD0} 
.day #btnFlatSharp.btnflat #svgarrsharp, .day #btnFlatSharp.btnsharp #svgarrflat {stroke:#370}
.day #btnFlatSharp.btnflat #svgsharp, .day #btnFlatSharp.btnflat #svgsflat {stroke:#370} 
.day #btnFlatSharp.btnsharp #scgflat, .day #btnFlatSharp.btnsharp #svgflat {stroke:#370} 


#svgclear {stroke:#996; }
#btnClear:hover #svgclear {stroke:#CCA; }
.blue #svgclear {stroke:#DDC; }
.blue #btnClear:hover #svgclear {stroke:#FFF; }
#btnClear {background:none; }
 
#cf, #ca  {background:#110; }
.blue #cf, .blue #ca   {background:#bcc; }
.day #cf, .day #ca   {background:#EEE; border: 1px solid #D5D5D5}
#fretboardarea, #staff, #allchordsymbols, #syntaxButtons, #syntaxButtonsCA {background:#202019}
#chordthumbs, #description {background:#191910}
#chordLabel {color:#FFF;}
.day #chordLabel {color:#000;}

.controlBtn {background:#202019; color:#BB8;}
.controlBtn:hover {background:#373530;color:#CC9; }
.btnView { background:#202019; color:#BB8; } 
.btnView-off {background:#272720; color:#373730;}

.keyBtn, .keyBtnSharp, .keyBtnFlat {color:#BB8; } 
.keyBtnSharp, .keyBtnFlat {background:#202019; } 
.keyBtn {background:#3C3B30;} 
.blue .keyBtn {background:#478 !important;} 
.day .keyBtn {background:#FFF !important;}
.day .keyBtnSharp, .day .keyBtnFlat {background:#F5F5F5 !important; } 

#btnCorrect, #btnInvSlash {color:#B21;}
#btnCorrect.yes, #btnInvSlash.yes {color:#9B0;}
.blue #btnCorrect, .blue #btnInvSlash {color:#E63;}
.blue #btnCorrect.yes, .blue #btnInvSlash.yes {color:#AE3;}
.day #btnCorrect.yes, .day #btnInvSlash.yes {color:#380;}

/* #btnInv span, */
.csBtn-active > span { border-bottom: 2px dotted #CC0;}
.csBtn {color:#D9D5C9;}
.blue .csBtn {color:#D0D9D5;}
.csBtn-active {color:#FFF; }
.csBtn:hover {color:#FFF; }

.keyBtn:hover, .keyBtnSharp:hover, .keyBtnFlat:hover {background:#555539; color:#EEC;  } 
.blue .keyBtn:hover {background:#367 !important;   }
.day .keyBtn:hover {background:#F9F9F9 !important;   }
.day .keyBtnSharp:hover, .day .keyBtnFlat:hover {background:#E9E9E9 !important;  } 
.keyBtn:active, .keyBtnSharp:active, .keyBtnFlat:active {background:#656549; color:#DDA} 
.chordTypeBtn  {background:#222219; color:#BB8; } 
.chordTypeBtn:hover {background:#53493D; color:#CC9; } 
.chordTypeBtn:active  {background:#53493D; color:#CC9}
#syntaxButtons > h2, #syntaxButtonsCA > h2, #clickHere {color:#888070; }
.optionlist { background:#2C2A25;}
.optionlist:hover {background:#393732;}
.yes { color:#997; }
.no { color:#555544; }
.thumbactive {border:1px solid #653; }
.blue .thumbactive {border:1px solid #F90; }
#description p {color:#BB8;}
#description .tone {color:#CC8; }
 
.blue #fretboard, .blue #fretboardarea, .blue #staff, .blue #allchordsymbols, .blue #syntaxButtons, .blue #syntaxButtonsCA, .blue #chordthumbs, .blue #description, .blue #cf button, .blue #ca button {background:#256}
.blue #syntaxButtons h2, .blue #syntaxButtonsCA h2, .blue #clickHere {color:#FFF; }
.blue #cf button:hover, .blue #ca button:hover {background:#367}
.blue .optionlist { background:#367;}
.blue .optionlist:hover { background:#478}
.blue .yes { color:#FFF;}
.blue .no { color:#BBA;color:#D0D9D5}
.blue #description p {color:#FFF;}
.blue #description .tone {color:#FD3;}

.day #fretboard, .day #allchordsymbols,  .day #staff, .day #cf button, .day #ca button {background:#FFF; border:1px solid #E5E5E5}
.day #fretboardarea, .day #allchordsymbols button, .day #syntaxButtons, .day #syntaxButtonsCA {background:#EBEBE9;background:#FFF; border:0}
.day #chordthumbs, .day #description {background:#FFF}
.day #syntaxButtons h2, .day #syntaxButtonsCA h2, .day #clickHere {color:#443; }
.day #cf button:hover, .day #ca button:hover {background:#F5F5F4; color:#110; }
.day .optionlist { background:#EEE; border:1px solid #D5D5D5}
.day .optionlist:hover { background:#DDD}
.day .yes { color:#221;}
.day .no { color:#776;}
.day #description p {color:#221;}
.day #description .tone {color:#240;}


#cf, #ca  {position:relative; padding:8px 0; margin:0}
#fretboardarea {position:absolute; width:77%; height:241px; left:0.5%;}
#controlButtons {position:absolute; width:21.5%; height:242px; left:78%;}

#fretboard {position:absolute; width:100%; height:100%}
.fb-wrapper  { position:absolute; width:99%; height:88%; left:1%; top:12% } 
#chordLabel { position:absolute; width:92%; height:30px; left:7%; top:3px; font-size:1.35em; z-index:2 }
#btnClear { position:absolute; width:24px;height:24px;right:16px;top:8px;z-index:3}

.controlBtn { height:58px; border:0; margin:0 0 3px 0; padding: 2px 6px; font-size:0.65em; } 
.controlBtn span, .btnView span, .btnView-off span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#syntaxButtons h2, #syntaxButtonsCA h2 {padding: 0; margin:10px 0 0 2px; font-size:0.7em; font-weight:normal;}

/* Chord Finder only */
#syntaxButtons { position:relative; float:right; width:21.5%; height:403px; right:0.5%; top:188px; padding:80px 1% 0 1%; }
#chordbuttons, #chordthumbs, #description  { float:left; min-height:380px; width:77%; margin:248px 0 0 0.5%;}
#chordthumbs {padding-top:15px}
#chordthumbs, #description { display:none}
#viewButtons {position:relative; float:right; width:21.5%; right:0.5%; top:182px; }

#btnAnalyzer {width:50%; margin-right:0;  padding: 2px 2px; float:right;}
#btnChart {width:49%; margin-right:1%; padding: 2px 2px; float:left;}
#btnNotesInt {width:32%; margin-right:1%; padding: 2px 2px;}
#ca #btnNotesInt {width:49%; margin-right:1%; padding: 2px 2px; float:left;}
#btnCorrect { width:32%; margin-right:1%; }
#btnFootprints {width:34%; margin-right:0; padding: 2px 2px;}
#btnPrev {width:32%; margin-right:1%; padding: 2px 2px;}
#btnNext {width:32%; margin-right:1%; padding: 2px 2px;}
#btnPlay {width:34%;}

#btnNotesIntTxt2, .notes #btnNotesIntTxt2, .intervals #btnNotesIntTxt1  {display:none}
.notes #btnNotesIntTxt1, .intervals #btnNotesIntTxt2  {display:block}

.keySelectBox {display:none;}
#keyButtons {width:100%; height:64px; margin:0;}
#keyButtons span {float:left; width:8.13333333%; height:62px; margin:1px 0.1%; padding:0; display:block; }
.keyBtn, .keyBtnSharp, .keyBtnFlat {width:100%; border:0; margin-bottom:2px; font-size:1.12em } 
.keyBtnSharp, .keyBtnFlat {height:30px; } 
.keyBtn {height:62px;} 

#chordTypeButtons {width:100%; min-height:300px; margin:3px 0; }
.chordTypeBtn  { width:16.46666666%; height:32px; margin:1px 0.1%; padding-top:3px; border:0; }

.btnView, .btnView-off { height:60px; border:0;  margin-bottom:2px; padding: 2px 6px; font-size:0.65em; line-height:1em; } 
.controlBtn svg, .btnView svg, .btnView-off svg {height:50%; top:12%}
.controlBtn > span, .btnView span, .btnView-off span {position:absolute; width:100%; height:25%; top:75%; left:0; text-align:center}
.btnView-off svg {opacity:0.3}

#btnSearch, #btnThumbs {width:32%; margin-right:1%; }
#btnDescr {width:34%; }

#chordthumbs canvas:hover {cursor: pointer;}
.thumbempty {display:none }
.thumbactive { display:inline-block; padding:0; }
.thumbpassive {display:inline-block;  padding:1px; }
.thumbactive, .thumbpassive {border-radius:4px; margin:2px 0 2px calc((100% - 480px)/6);}
#description p {padding:8px 15px 4px 15px; font-size:0.94em; line-height:1.50em}
#description .tone {font-weight:bold; }

.optionlist { margin:2px 0 10px 0; padding: 8px 0 4px 0;}
.optionlist:hover { cursor:pointer}
.optionlist li { margin:0; padding:1px 0 4px 15px; list-style-type:none; line-height:0.95em; font-size:0.8em}
.optionlist svg {position:relative; top:2px; width:16px; height:13px; margin-right:15px}
.yes #svgcbcheck {visibility:visible}
.no #svgcbcheck {visibility:hidden}

li.yes, li.no {font-size:0.8em; } 
.optionlist li { /* Text selektieren verhindern */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
/* Chord Analyzer only */
#ca {min-height:550px}
#allchordsymbols {position:absolute; width:50.5%; height:280px; left:27%; top:254px; padding:1%; overflow:hidden}
#staff{ position:absolute; width:26%; height:280px; left:0.5%; top:254px; text-align:center; }
.staff-wrapper {position:absolute; width:80%; height:70%; left:10%; top:10% }
.staff-canvas {position:absolute; width:100%; height:100%; left:0; top:0}
#syntaxButtonsCA {position:absolute; width:21.5%; height:280px; left:78%; top:254px; padding: 5px 1% 0 1%;}

#btnInv {width:49%; margin-right:1%;}
#btnInvSlash {width:50%; margin-right:0; }
#btnFlatSharp {width:49%; margin-right:1%; }
#ca #btnCorrect { width:50%; margin-right:0; }
#btnTransDown  {width:33.5%; margin-right:1%; }
#btnTransUp {width:30.5%; padding: 2px 12px; margin-right:1%;}
#clickHere {  white-space: pre-line; position:relative; width:100%; padding:4%; height:200px; margin-top:20px; font-family:'Varela Round'; font-size:1.5em; text-align:center; -moz-user-select: none; -khtml-user-select: none; user-select: none;}

#allchordsymbols button { width:49%; height:42px;  border:0; font-size:1.2em; background:transparent; line-height:0.8em; font-family:'Sniglet';} 
button#btnInv0a {width:100%}
#allchordsymbols button span {overflow:visible}
.csBtn > span { margin-bottom: 2px}

#cfa-help { background:#504339; display:none; margin:5px 0.5%; padding:2px; clear:both; border-radius:4px;  opacity:0.97; }
#cfa-help h2 {color:#875; background:#E9E4DC; background:#352F29; font-family:'Varela Round'; font-weight:normal; height:37px; margin:2px 2px;  cursor:pointer;  padding:8px 10px; border-radius:3px; font-size: 1.1em; }
#cfa-help h2 a {color:#875;}
h3, h4  {color:#F0F9C9}

@media screen and (max-width:800px) { 

#content, #addendum, #preface  {width:100%; margin:0}
#cf, #ca  { padding:10px 1.5%; background:#191910; border-radius:0}

#controlButtons, #fretboardarea, #syntaxButtons, #syntaxButtonsCA  {position:relative; width:100%; left:0; margin:0; float:none; clear:both; }
#controlButtons {height:60px; margin:5px 0}
.controlBtn { height:58px; font-size:0.55em} 
#syntaxButtons, #syntaxButtonsCA {height:130px; top:0; margin:8px 0; padding:0;} 
#syntaxButtons .subdiv, #syntaxButtonsCA .subdiv {float:left; width:31%; margin:5px 1%}
#syntaxButtons ul, #syntaxButtonsCA ul {height:80px}

#viewButtons {width:14%; top:2px; right:0; margin:0;}
.btnView, .btnView-off { height:62px; border:0;  margin-bottom:2px; padding: 2px 6px; font-size:0.65em; line-height:1em; } 
#btnSearch, #btnThumbs, #btnDescr  {width:100%; margin:0 0 5px 0; }
.chordTypeBtn  { font-size:0.85em; width:19.8%;}

/* Chord Finder only */
#cf #chordbuttons, #cf #chordthumbs, #cf #description  {width:85%; margin:1px 0;}
#cf #btnAnalyzer, #cf #btnChart, #cf #btnNotesInt, #cf #btnCorrect, #cf #btnFootprints, #cf #btnPrev, #cf #btnNext, #cf #btnPlay {float:left; width:12%; margin:0 0.57% 0 0}
#cf #btnPlay {margin:0}

.btnView, .btnView-off{ font-size:0.6em; }
.keyBtn, .keyBtnSharp, .keyBtnFlat, .chordTypeBtn {font-size:1em } 

/* Chord Analyzer only */
#staff, #allchordsymbols {position:relative; top:0; left:0}
#staff {width:30%;}
#allchordsymbols {width:69%; float:right;}

#ca #btnAnalyzer, #ca #btnNotesInt, #ca #btnInv, #ca #btnInvSlash, #ca #btnFlatSharp, 
#ca #btnCorrect, #ca #btnTransDown, #ca #btnTransUp, #ca #btnPlay {float:left; width:10.6%; margin:0 0.57% 0 0}
#ca #btnPlay {margin:0}

}


/* ##### GOOGLE ADSENSE etc... ##### */
@media screen and (min-width:901px) {
    #adcontenttop, #adpagetop {display:none;}
}