/* ooColors.css + ooLayout.css */

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



/* varela-round-regular - latin */
@font-face {
  font-family: 'Varela Round';
  font-style: normal; 
  font-weight: 400;
  src: url('../fonts/varela-round-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Varela Round Regular'), local('VarelaRound-Regular'),
       url('../fonts/varela-round-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/varela-round-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/varela-round-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/varela-round-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/varela-round-v11-latin-regular.svg#VarelaRound') format('svg'); /* Legacy iOS */
}
/* handlee-regular - latin */
@font-face {
  font-family: 'Handlee';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/handlee-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Handlee Regular'), local('Handlee-Regular'),
       url('../fonts/handlee-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/handlee-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/handlee-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/handlee-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/handlee-v7-latin-regular.svg#Handlee') format('svg'); /* Legacy iOS */
}
/* sniglet-regular - latin */
@font-face {
  font-family: 'Sniglet';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/sniglet-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Sniglet Regular'), local('Sniglet-Regular'),
       url('../fonts/sniglet-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/sniglet-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/sniglet-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/sniglet-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/sniglet-v10-latin-regular.svg#Sniglet') format('svg'); /* Legacy iOS */
}

body, body * {font-family: 'Varela Round',sans-serif;} 
cite, table.cite-style { 
	font-family: 'Handlee', sans-serif; letter-spacing: 0.05em;} 
.seitennavigation a, .seiteNr-inaktiv, .seiteNr-aktiv, .seiteNext-aktiv, .seiteNext-inaktiv, .seiteBack-aktiv, .seiteBack-inaktiv  { 
	font-family: 'Varela Round','Sniglet', 'Handlee', sans-serif; letter-spacing: 0.05em;} 
.staffboard { 
	font-family: 'Varela Round','Sniglet', 'Handlee', sans serif; font-size:1.15em}
.chordchart .beat {
	font-family: 'Varela Round','Sniglet', 'Handlee', sans serif; font-size:1.6em; letter-spacing:0.05em;}
#chordLabel { font-family: 'Varela Round','Sniglet','Handlee','Trebuchet MS', sans-serif; font-size:1.9em; letter-spacing:0.03em;}

h1 {font-family: 'Varela Round','Sniglet','Trebuchet MS',sans serif; font-weight:normal; }
h2,h3,h4{ font-family: 'Varela Round','Handlee','Sniglet','Trebuchet MS',sans serif; font-weight:normal;}	
h1 {font-size: 29px; font-size: 1.6em;}
h2 {font-size: 25px; font-size: 1.5em;}
h3 {font-size: 22px; font-size: 1.3em; letter-spacing:0.03em;}
h4 {font-size: 19px; font-size: 1.2em; letter-spacing:0.05em;}	

.seitennavigation a, .seiteNr-inaktiv, .seiteNr-aktiv, .seiteNext-aktiv, .seiteNext-inaktiv, .seiteBack-aktiv, .seiteBack-inaktiv {
	font-size:0.9em; text-decoration:none; font-weight:bold; 
	}
li {line-height:1.3em}
sup {font-size:0.85em;}
/*#chordLabel {line-height:1.3em; }*/

#vSearch {font-size:0.8em}


/* ############################# ooColors.css ################################# */
/* ############################# ooColors.css ################################# */

#limo {fill:#FFF}

.day #limo, .day .menudots {fill:#444440;}
.day #limo-l, .day #limo-imo {fill:url(#gradient-lgbtq-imo); fill:#332; stroke:#443} 
/* .day #limo {fill:#FFF;  stroke:#555550} */
.blue #limo {fill:#FFF}
.blue #limo-l {fill:url(#gradient-ukr-l); stroke:#EB0}
.blue #limo-imo {fill:url(#gradient-ukr-imo); stroke:#EB0} 

#logo_O { stroke:#F90; fill:#B50; fill:url(#gradient-dot-fill); stroke:url(#gradient-dot-stroke)}
#logo_o2 {stroke:#BC0; fill:#572; fill:url(#gradient-square-fill);  stroke:url(#gradient-square-stroke)}
/* .blue #logo_O {fill:url(#gradient-ukr-O); stroke:#ffd700}
.blue #logo_o2 {fill:url(#gradient-ukr-o2); stroke:#ffd700} */

#logo_ipunkt, #ooi_ipunkt { stroke:#F90; fill:#993300; }
#sc1-df { stop-color:#CC4400; }
#sc2-df { stop-color:#442200; }
#sc1-ds { stop-color:#FF9900; }
#sc2-ds { stop-color:#EE8800; }
#sc1-sf { stop-color:#118800; }
#sc2-sf { stop-color:#114400; }
#sc1-ss { stop-color:#DDD500; }
#sc2-ss { stop-color:#BBB500; }

/* .day #logo_ipunkt, .day #ooi_ipunkt { stroke:#444440 !important; fill:#D64 !important; } */
.day #logo_ipunkt, .day #ooi_ipunkt { stroke:#909 !important;; fill:#FC0 !important; }
.day #sc1-ds { stop-color:#432 !important; }
.day #sc2-ds { stop-color:#321 !important; }
.day #sc1-df { stop-color:#F85 !important; }
.day #sc2-df { stop-color:#842 !important; }
.day #sc1-ss { stop-color:#340 !important; }
.day #sc2-ss { stop-color:#120 !important; }
.day #sc1-sf { stop-color:#DDDD55 !important; }
.day #sc2-sf { stop-color:#999555 !important; }

.blue #logo_ipunkt, .blue #ooi_ipunkt { stroke:#ffd700; stroke:#EC0; fill:#024; }

button svg { stroke:#BB9; fill:#BB9; }
.day button svg { stroke:#443; fill:#443; }
.blue button svg { stroke:#DCA; fill:#DCA; }


#topnavbtns svg {fill:#CCB; stroke:#CCB;}
#topnavbtns button.active svg {fill:#DDB; stroke:#DDB;}
.day #topnavbtns svg {fill:#443; stroke:#443;}
.blue #topnavbtns svg {fill:#EED; stroke:#EED;}

button:hover svg { opacity:1;}



#cssmodebtn svg {fill:#FFF; stroke:#EED; }
#cssmodebtn #suncircle {stroke:#FFF;}
#cssmodebtn #sundisk  {fill:#FFF;}
#lefthandbtn #svghand {stroke:#FFF;}
#cfbtn #svgcf, #cabtn #svgca, #ccbtn #svgcc, #cpbtn #svgcp {stroke:#FFF;}

.day #cssmodebtn svg {fill:#221; stroke:#665; }
.day #cssmodebtn #sundisk {fill:#665}
.day #cssmodebtn #suncircle,
.day #lefthandbtn #svghand,
.day #cfbtn #svgcf, .day #cabtn #svgca, .day #ccbtn #svgcc, .day #cpbtn #svgcp {stroke:#221;}

#ccbtn #ccchs {stroke:#CCB; fill:none;}
.day #ccbtn #ccchs {stroke:#554; fill:none;}
.blue #ccbtn #ccchs {stroke:#DDC; fill:none;}

.mx1 {fill:#999; }
.mx2 {fill:#666660; }
#cpbtn .lght, #ootools .lght {fill:#F90  !important; }
#cpbtn .slct, #ootools .slct {fill:#F60  !important; }
.blue .mx2 {fill:#C9C9C9; }

.day #language-button #langbubble {stroke:#221;}
.blue #language-button #langbubble {stroke:#FFF;}


.fbsquare {stroke:#BC0; fill:#572;}
.fbdot { stroke:#F90; fill:#B50;}

.day .fbsquare {fill:#AB0; stroke:#240}
.day .fbdot { fill:#D61; stroke:#720}


#ccchs {fill:none; stroke:#998;}
.blue #ccchs {fill:none; stroke:#BB9;}
.day #ccchs {fill:none; stroke:#888;}

#cpBtnMan {fill:#FFF; stroke:#FFF;}
#cpBtnManShadow {fill:#000; stroke:#2A2922;}
/* .day #cpBtnMan {fill:#FFF; stroke:#2A2922;}
.day #cpBtnManShadow {fill:#FFF; stroke:#FFF;} */
.blue #cpBtnMan {fill:#FFF; stroke:#554;}
.blue header #cpBtnManShadow {fill:#FFF; stroke:#356;}

#cpBtnMan {fill:#000; stroke:#FFF;}
#cpBtnManShadow {fill:#000; stroke:#2A2922;}
.day #cpBtnMan {fill:#FFF; stroke:#2A2922;}
.day #cpBtnManShadow {fill:#FFF; stroke:#FFF;}
.blue header #cpBtnMan {fill:#356; stroke:#FFF;}
.blue header #cpBtnManShadow {fill:#FFF; stroke:#356;}
.blue main #cpBtnManShadow {fill:#FFF; stroke:#FFF;}

#cpBtnMan {fill:#FFF; stroke:#FFF;}
.day #cpBtnMan {fill:#2A2922; stroke:#2A2922;}
.blue header #cpBtnMan {fill:#FFF; stroke:#FFF;}
.blue main #cpBtnMan {fill:#FFF; stroke:#344;}
.blue main #cpBtnMan {fill:#344; stroke:#344;}



#loadsounds-button svg, #soundsAlert svg {stroke:#FFF;}
.day #soundsAlert svg {stroke:#554;}
#loadsounds-button.on #svgsoundarrow, #loadsounds-button.always #sound3arrows, .soundsYes #svgsoundarrow, .soundsAlways #sound3arrows {stroke:#CF6}
#loadsounds-button.off #sound3trays, #loadsounds-button.off #sound3arrows, 
#loadsounds-button.on #sound3trays,  #loadsounds-button.on #sound3arrows, #loadsounds-button.on #svgsoundline, 
#loadsounds-button.always #svgsoundline, #loadsounds-button.always #soundone,
.soundsNo #sound3arrows, .soundsNo #sound3trays,
.soundsYes #svgsoundline, .soundsYes #sound3trays, .soundsYes #sound3arrows, .soundsAlways #soundone {stroke:none}
#loadsounds-button.off #svgsoundarrow, .soundsNo #svgsoundarrow {stroke:#ACA7A0;}
#loadsounds-button.off #svgsoundline, .soundsNo #svgsoundline {stroke:#F20}

.day #loadsounds-button svg, .day #soundsAlert svg {stroke:#221}
.day #loadsounds-button.on #svgsoundarrow, .day #loadsounds-button.always #sound3arrows, .day .soundsYes #svgsoundarrow, .day .soundsAlways #sound3arrows {stroke:#480}
.day #loadsounds-button.off #svgsoundline, .day .soundsNo #svgsoundline {stroke:#C20;}

 
#lefthandbtn #svghandR  {stroke:#CF6}
#lefthandbtn #svghandL  {stroke:#F6F}
.blue #lefthandbtn #svghandR  {stroke:#CF6}
.blue #lefthandbtn #svghandL {stroke:#F8C}
.day #lefthandbtn #svghandR  {stroke:#170}
.day #lefthandbtn #svghandL {stroke:#C0C}

#lefthandbtn #svghandsaiten {stroke:#CC9}

#btnCorrect.yes #svguni {stroke:#890 !important;}
#btnCorrect #svguni {stroke:#E42 !important;} 

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

/*.cdExtendBtn svg { stroke:#909; fill:#C09; }*/
.svgpianobtn-black { fill:#554; stroke:none; }
.svgpianobtn-white { fill:#776; stroke:none; }
.svgstavesbtn-staves { stroke:#998; }
.svgstavesbtn-notes { fill:#BBA; }

.day .svgpianobtn-white { fill:#BBA; stroke:none; }
.day .svgstavesbtn-staves { stroke:#554; }
.day .svgstavesbtn-notes { fill:#776; }

.blue .svgpianobtn-black { fill:#ABA; stroke:none; }
.blue .svgpianobtn-white { fill:#DDC; stroke:none; }
.blue .svgstavesbtn-staves { stroke:#BDC; }
.blue .svgstavesbtn-notes { fill:#CDC; }

.cdExtendBtn {background:none;  border:1px solid #151510}
.cdExtendBtn:hover {background:#1C1C18; border:1px solid #332}
.cdExtendBtn.active {background:none; border:1px solid #443}
.day .cdExtendBtn {background:none; border:1px solid #FFF}
.day .cdExtendBtn:hover {background:#EEE; border:1px solid #DDD}
.day .cdExtendBtn.active {background:none; border:1px solid #DDD}
.blue .cdExtendBtn {background:none; border:1px solid #092835}
.blue .cdExtendBtn:hover {background:#134; border:1px solid #245;}
.blue .cdExtendBtn.active {background:none; border:1px solid #356}


/* ##### Accordion ###### */ 
.openclose {stroke:#999;}
.day .openclose {stroke:#777;}
.pinned .openclose {stroke:#343430 !important;}
.day .pinned .openclose {stroke:#BBB; ;}
.blue .pinned .openclose {stroke:#245 !important;}

.usepin {stroke:#888; fill:none;}
.day .usepin {stroke:#888; fill:none;}
.blue .usepin {stroke:#888; fill:none;}
.pinned .usepin {stroke:#A30; fill:#A30;}
.day .pinned .usepin {stroke:#D40; fill:#D40;}
.blue .pinned .usepin {stroke:#D50; fill:#D50;}
/* .usepin .pinball {stroke:#888; fill:#555;} */
/* .pinned .usepin .pinball {stroke:#A30; fill:#A30;} */


/* ###### COLORS BACKGROUNDS BORDERS ############ */ 
/* ###### COLORS BACKGROUNDS BORDERS ############ */ 
/* ###### COLORS BACKGROUNDS BORDERS ############ */ 

#upperAdBar {border-radius:9px; background:#0C0C09; border:1px solid #332;}
.day #upperAdBar {background: #FFF; border: 1px solid #FFF;}
.blue #upperAdBar {background:#092330; border: 1px solid #345}


body { background:#191915; background:#292820; color:#EED; }
body.day {background:#FFF;  background:#ECEBE9; background:#EEE; color:#443;}
body.blue {background:#092835; background:#245; background:#153140; color:#CCB;}

header {border-bottom:1px solid #554; opacity:0.94}
.day header {border-bottom:1px solid #998; opacity:1; } /* box-shadow: 0px 0px 5px #998 */
.blue header {border-bottom:1px solid #456;}

#topnavcontent {background:#242420; border-bottom:1px solid #554;}
.day #topnavcontent {background:#FCFBF9; background:#CCCBC8; border-bottom:1px solid #998;}
.day #topnavcontent button { color:#FFF !important}
.blue #topnavcontent { background:#023;  border-bottom:1px solid #456;}


/* ########  vBox  vBox  vBox  ######### */
.vBox {background:#191912; background: #0C0C09; border: 1px solid #22221C; border: 1px solid #3A3A2A;}
.day .vBox {background: #FFF; border: 1px solid #CCB; border: 1px solid #FFF;}
.blue .vBox {background: #103040; background:#092330; border: 1px solid #012; border: 1px solid #345}






header, #nav2app, footer, .chordProgression, .chordsingle, .chordblender, .chordUpDownArrows, .cdextention,
#saBox, .fb-box, .youtube, .video-container iframe {
  background:#151510;
}


.day header, .day #nav2app, .day footer {
  background: #EEE; background:#FFF; 
}
.day .chordProgression, .day .chordDiagram, .day .cdextention,
.day #saBox, .day .fb-box, .day .youtube, .day .video-container iframe {
  background:#E9E9E5; background:#FFF;  color:#221; 
}
.day .chordProgression, .day .chordDiagram, .day .cdextention, .day #saBox {
  border: 1px solid #DDC;
}
.day .chordUpDownArrows.extended {border-width: 1px 1px 0 1px;}
.day .cdextention {border-width: 0 1px 1px 1px;}
.day .chordsmall {border:0}


.blue header, .blue #nav2app, .blue footer, .blue .chordProgression, .blue .chordDiagram, .blue .cdextention,
 .blue #saBox, .blue .fb-box, .blue .youtube, .blue .video-container iframe {
  background:#092835; color:#FFF;
}

#topnav-theory {border-color:#665E49}
#topnav-chordtypes {border-color:#395911}
#topnav-practice {border-color:#982}
#topnav-quiz {border-color:#C61} 

.day #topnav-theory {border-color:#987}


/* ######## Accordion ### vTools ######### */

/* #vTools {border:1px solid #443} */

/* ######## BUTTONS, STAFFBOARD ######### */
.staffboard, .cc-box, #blackboard {background: #454540; background:#252520 } 
button {background:#3C3B36; border:0px solid #543; color:#CCA;} /* color:#CCA !important; */
button:hover, button.active {background:#555045; color:#EEC;} 

.day .staffboard, .day .cc-box, .day  #blackboard {background: #FFF;}
.day button {background:#C5C5C0;background:#D5D5D0; color:#221;} /* color:#221 !important; */
.day button:hover, .day button.active {background:#C0C0BB; }

.blue .staffboard, .blue .cc-box, .blue  #blackboard {background: #092835;}
.blue button {background:#245; color:#FFF;} /* color:#FFF !important; */
.blue button:hover, .blue button.active {background:#589; color:#FFF;}



/* .txt {background:#221; color:#CCA;} */

.day .txt, .day .allgemein, .day .klein  {background:#FFF; color:#332;} 
.blue .txt  {background:#E5E5E0;background:#E0E9E9; color:#332;} 

#topnavbtns button { background:none; color:#DDC; border-bottom-width:5px; height:calc(100% + 1px); padding:8px 8px 0px 8px;}
#topnavbtns button.active {background:#2E2D26; color:#EED}

.day #topnavbtns button { color:#221;  }
.day #topnavbtns button.active {background:#EEEDEB;}
.day #topnavbtns button.active svg {fill:#221; stroke:#221;}

.blue #topnavbtns button { color:#EED; }
.blue #topnavbtns button.active {background:#145;}

.day #language-button span {color:#332}
/* ###### ###### */

#language-button {background:none;}
#ladebalken {background:#CC0;}
#soundsAlert {background-color:#191509; border:5px solid #C20; box-shadow:3px 3px 8px #000;}
.blue #soundsAlert { background-color:#256; border:5px solid #D20; box-shadow:0px 0px 30px #FFF; color:#FFF }
.day #soundsAlert { background-color:#FFF; border:5px solid #F20; box-shadow:3px 3px 8px #000; }

#pagenav h3 {color:#272510; color:#AA9}
.blue #pagenav h3, .day #pagenav h3 {color:#373520;}

a.cfa, button.cfa {background:#736; color:#EDD;}
a.cfa:hover, button.cfa:hover {background:#847; color:#FFF;}
a.chordtypes, button.chordtypes {background: #495921;}
a.chordtypes:hover, button.chordtypes:hover {background:#496421;}
a.theory, button.theory { background:#6C5A49; background:#665E49; }
a.theory.this { background:#867E69; color:#DDD9D0 !important;} /*  background:#EDEBE9; color:#665E49 !important; */
a.theory:hover, button.theory:hover {background:#867E63;}
a.practice, button.practice  {background:#872;}
a.practice:hover, button.practice:hover {background:#A93;}
a.quiz, button.quiz {background:#B61;}
a.quiz:hover, button.quiz:hover {background:#D82;}
#pagenav a, #topnavcontent a {color:#FFF}
#pagenav .cf, #pagenav .ca {background:#736; color:#EDD;}
#pagenav .cf:hover, #pagenav .ca:hover {background:#636;}

footer, footer .spalte a {color:#BBB5A0}
.day footer, .day footer #nav2app p, .day footer .spalte a {color:#532}
.day #nav2app h2 a {color:#638}

footer h2 {color:#876 !important; border-bottom:1px solid #555045;}
.blue footer h2 {color:#F80 !important; border-bottom:3px dotted #578;}
footer a.copyright {color:#857055 !important;}




a:link, a:visited {color:#C40;}
a:hover {color:#D60;}
.day a:link, .day a:visited {color:#C40;}
.day a:hover {color:#A30;}
.blue a:link, .blue a:visited {color:#FA2;}
.blue a:hover {color:#FC0;}


cite, table.cite-style {color:#CBD;}
.blue cite, .blue table.cite-style {color:#926;}
.day cite, .day table.cite-style {color:#926;}


h1 {color:#DDB; border-bottom: 1px solid #886;}
h2 {color:#A97;}
h3 {color:#C96;}
h4 {color:#A63;}
h5 {color:#952;}

.day h1 {color:#443;}
.day h2 {color:#C53;}
.day h3 {color:#B56;}

.blue h1 {color:#BBB999;}
.blue h2 {color:#C53;}
.blue h3 {color:#D45;}
.blue .related h3 {color:#CC9 !important}

/* ######## Article ######### */

article { background: #EDEBE9; background: #FFF; border-radius:4px; }
.day article { background: #FAF9F7; background: #FFF;  }
.blue article { background: #EBEAE8; background: #FFF;  }

article p, article li, article small, article th, article td { color:#332; }
article button small {color:#D9D5C0}
.blue article button small {color:#CCC}
.day article button small {color:#443}

article h1 {color:#443; border-bottom: 1px dotted #998;}
article h2 {color:#432; color:#C42; } 
article h3 {color:#935;}
/* article h2 small {color:#C64;} */

.blue article h1 {color:#145;}
.blue article h2 {color:#A33;}
 
article cite, article table.cite-style {color:#926;}

article a:link, article a:visited {color:#C40; border-bottom:1px dotted #C40; border-radius:0 }
article a:hover {color:#F00; border-bottom:1px solid #F63; }
.day article a:link, .day article a:visited {color:#C30; border-bottom:1px dotted #C30; border-radius:0}
.day article a:hover {color:#C00; border-bottom:1px solid #D00;}
.blue article a:link, .blue article a:visited {color:#C00; border-bottom:1px dotted #C00; border-radius:0}
.blue article a:hover {color:#C3C; border-bottom:1px solid #D0F;}

/* ######## Toc Box ######### */
.tocBox { font-size: 0.85em; border-radius:6px; }
.btnTocScrollMode {font-size: 0.85em; }

/*
.tocBox { border:1px solid #776; color:#CCA}
.day .tocBox {background:#FAF9F7; background:#FFF; border:0px solid #CCA; color:#221}
.blue .tocBox {background:#EBEAE8; border:0px solid #776; color:#034}
 .tocBox .actTocLi > span {color:#D93;  }
.day .tocBox .actTocLi > span {color:#A05; }
.blue .tocBox .actTocLi > span {color:#907;  }
*/


.tocBox {  background:#EDEBE9; color:#332;} /* border:1px solid #776; color:#CCA; */
.day .tocBox { background:#FAF9F7; color:#221} /* border:1px solid #997; */
.blue .tocBox {background:#EBEAE8; color:#332;} /* border:1px solid #776; color:#EDB */
 .tocBox .actTocLi > span {color:#D93; color:#C42;  }
.day .tocBox .actTocLi > span {color:#A05; color:#B31; }
.blue .tocBox .actTocLi > span {color:#E77; color:#942; }



/* ### CONTENT-SLIDER ##### */
/* #slider1 {height:420px; } */
@media screen and (max-width:619px) {
	/* #slider1 {height:800px; } */
}
/* #slider1 svg {border-radius:9px} */

.mini { background:#E70; transition: all 0.5s;}
.slideExtBtn.active { background:#D60; transition: background 0.3s, color 0.3s }

.slidebtn { background:#E70; }
.slidebtn:hover { background:#F70; }

.day .mini {background:#C9C9C0; border:1px solid #887; border-radius:10px !important }
.day .slideExtBtn { border:1px solid #887; }
.day .slideExtBtn.active { background:#FFF;  }
.day .slidebtn { background:#A9A9A0;  }
.day .slidebtn:hover { background:#B9B9B0; }

.blue .mini {background:#C9C9C0; background:#478;  border-radius:10px !important }
.blue .activeMini { background:#A33; }
.blue .slideExtBtn { border:0 }
.blue .slideExtBtn.active { background:#FFF; background:#A33; }
.blue .slidebtn { background:#A9A9A0; background:#478; }
.blue .slidebtn:hover { background:#B9B9B0; background:#589;} 



/* CompareChords (Tafel mit Noten) */
.cc-btnType { background:#353530; } 
.cc-btnType:hover, .blue .cc-btnType:hover { background:#496421; }
.cc-btnDown, .cc-btnUp, .cc-btnPlay { background-color:#303029;} /* background:none; */
.cc-btnDown:hover, .cc-btnUp:hover { background-color:#821;}
.blue .cc-btnDown:hover, .blue .cc-btnUp:hover { background-color:#921;}
.cc-txtField { color:#DDC;} 
.cc-labelField{ color:#EED;}
.day .cc-txtField { color:#221;} 
.day .cc-labelField{ color:#221;}

/* kleine Tafel mit Stufenakkorden */
.mc-txt1 {color:#DDB;}
.mc-txt2 {color:#BA9;}
.day .mc-txt1 {color:#443;}
.day .mc-txt2 {color:#A42;}

.day .label {color:#221}

.spotViewText {color:#FA0}
.day .spotViewText {color:#554}

.chordchart {  background:#666660; color:#FFF;}
.blue .chordchart {  background:#D9D9CC; color:#443;}
.day .chordchart {  background:#FCFCF9; color:#443; border:1px solid #E5E5E5}

.chordchart .bar { border-right: 2px solid #DDC;}
.chordchart .bar:first-child { border-left: 6px double #DDC; }
.chordchart .bar:nth-child(4n+5) { border-left: 2px solid #DDC;}
.chordchart .bar:nth-last-child(2) { border-right: 6px double #DDC;}
.blue .chordchart .bar { border-right: 2px solid #775;}
.blue .chordchart .bar:first-child { border-left: 6px double #775; }
.blue .chordchart .bar:nth-child(4n+5) { border-left: 2px solid #775;}
.blue .chordchart .bar:nth-last-child(2) { border-right: 6px double #775;}
.day .chordchart .bar { border-right: 2px solid #776;}
.day .chordchart .bar:first-child { border-left: 6px double #776; }
.day .chordchart .bar:nth-child(4n+5) { border-left: 2px solid #776;}
.day .chordchart .bar:nth-last-child(2) { border-right: 6px double #776;}

/* Slider */
.slider { background:#2E2D26; border:1px solid #554;}
.slider::-webkit-slider-thumb { background: #BB9; border:4px solid #2E2D26;}
.slider::-moz-range-thumb { background: #BB9;  border:4px solid #2E2D26;}
.blue .slider { background: #256; border:0;}
.blue .slider::-webkit-slider-thumb {background: #DDC; border:4px solid #256;}
.blue .slider::-moz-range-thumb {background: #DDC; border:4px solid #256;}
.day .slider { background: #CCC9C5; border:0;}
.day .slider::-webkit-slider-thumb {background: #777; border:4px solid #CCC9C5;}
.day .slider::-moz-range-thumb {background: #777; border:4px solid #CCC9C5;}

/* .video-container iframe { border: 2px solid #202019; } 
.blue .video-container iframe { border: 2px solid #887; }  */

/* ############# Chord Diagram PIANO Extension #################  */
.day .cdpianobox canvas { background:#332;}
.blue .cdpianobox canvas { background:#092835;}




/* ############################# ooLayout.css ################################# */
/* ############################# ooLayout.css ################################# */
/* ############################# ooLayout.css ################################# */
/* ############################# ooLayout.css ################################# */
/* ############################# ooLayout.css ################################# */
/* ############################# ooLayout.css ################################# */



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

/* ### NORMALIZE:CSS minified ###  */
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

#svgbox {position:absolute; left:-500px; top:-300; width:300px; height:300px; overflow:hidden; z-index:0} /* bei display:none und visibility:hidden funktioniert mask in geklonten svg's nicht mehr */
#svgbox svg {margin:10px; width:20px; height:20px; }
button svg {position:absolute; width:70%; height:70%;left:15%;top:15%;}

a, button, #language-button { border:0; border-radius:5px;} 
button {position:relative; outline:none}
#topnavbtns {position:absolute; width:450px; height:100%; left:calc(230px + 8%); top:0; } 
#topnavbtns button { border-style:solid; width:29%; margin:0; border-radius:0px; font-size:0.7em; }
#topnavbtns button:nth-child(1), #topnavbtns button:nth-child(4) {width:21%}
#topnav-cfa {display:none;}
#topnavcontent {display:none; position:fixed; padding:0 4%; width:100%; height:300px; top:50px; z-index:22} /*  min-width:600px; */
.topnavlinkbtn { font-size:0.85em; padding:0 4px;}
/* #topnavcontent a {width:24%; height:45px; display:table-cell; vertical-align:middle; border: 5px solid transparent; font-size:0.9em} */
.topnavlinkbox {padding:10px 4% 0 4%;}

#cfbtn svg, #cabtn svg, #ccbtn svg, #cpbtn svg {width:100%; height:70%; left:0%; top:15%; }
.cfapBtns .btntxt {display:none;}
#topnavbtns svg { width:33%; height:19px; left:2%; top:15px;}
#topnavbtns span {position:absolute; width:80%;left:20%;top:42%;height:60%}
 
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

body {position:relative}
body * {margin:0; padding:0;} 
header {position:fixed; width:100%; height:50px; z-index:100; }
header .container {position:relative; width:100%; height:100%; margin:0 auto; }
main {margin:50px auto 0 auto; padding:0 0 20px 0; width:100%; min-height:640px; overflow:visible; }  /*  min-width:600px; */
header .container, main { max-width:1600px; }
#maincontainer {position:relative; width:100%; margin:0 auto; padding:0; } /*   max-width:1366px; */
#content { position:relative; float:left; width:calc(100% - 565px); left:200px; padding:0;  border-radius:0;}
#content { overflow-y: auto; scroll-behavior: smooth;}
#mobileBottom {display:none}

footer { position:relative; min-height:140px; z-index:20; } 
footer .container { position:relative; width:70%; max-width:980px; margin:0 auto; padding: 10px 0px; }
nav { display:none; }

/* header, main, footer {min-width:600px;}  */

#ladeanzeige {position:relative; margin:0; width:100%; height:3px; transition: opacity 0.5s;}
#ladebalken {position:fixed; top:50px; height:3px; width:0;}
#ladetext {display:none;}
#logo { display:block; position:absolute; left:12px; top:7px; width:96px; height:50px; margin:0; padding:0;} 

#svglogo {position:absolute; width:100%; height:70%; left:0; top:12%; }

#loadsounds-button, #language-button, #cssmodebtn, #lefthandbtn, #cfbtn, #cabtn, #ccbtn, #cpbtn { background:none; display:block; position:absolute; top:8px; width:40px; height:35px; text-align:center;  border-radius:3px;}

#language-button svg {width:90%; height:90%; left:5%; top:5%;}
.langflag {height:12px; display:inline-block}
#language-button span {color:#EED;  display:block; position:absolute; width:100%; height:50%; top:30%; left:0; font-size:0.64em; font-weight:bold; text-align:center;}
 #language-select { right:1%; top:10px; background:none; display:block; position:absolute; width:60px; height:33px; text-align:center; border:1px solid #554; border-radius:6px;}
#language-select option { background:#332 !important; }

#lefthandbtn svg { width:100%; height:70%; left:0%; top:17%; }
.rh #svglefthand { transform:scaleX(-1);}
.rh #svghandL { display:none;}
.rh #svghandR { display:block;}
.lh #svglefthand { transform:scaleX(1);}
.lh #svghandL { display:block;}
.lh #svghandR { display:none;}

#loadsounds-button span {display:none}

#cfbtn {left:calc(80px + 4%)}
#ccbtn {left:calc(125px + 4%)}
#cabtn {left:calc(170px + 4%)}
#cpbtn {left:calc(215px + 4%)}
#language-button {right:2%; top:8px;}
#cssmodebtn { right:calc(48px + 2%); padding:0;}
#lefthandbtn {right:calc(96px + 2%);}
#loadsounds-button {right:calc(150px + 2%);}


#soundsAlert {display:none; position:fixed; z-index:100; width:420px; height:270px; left:calc(50% - 200px); top:100px; border-radius:15px; padding:20px; font-size:0.9em; line-height:1.3em;}
.soundsYes, .soundsNo, .soundsAlways { border:0; position:absolute; z-index:11; width:116px; height:116px; bottom:20px; border-radius:9px; padding:0px; font-size:0.8em; text-align:center; line-height:1.3em}
.soundsNo, .soundsNo:hover {left:calc(19% - 58px); }
.soundsYes, .soundsYes:hover {left:calc(50% - 58px); }
.soundsAlways, .soundsAlways:hover {left:calc(81% - 58px); }
.soundsYes svg, .soundsNo svg, .soundsAlways svg { position:absolute; width:100%;height:50%;left:0;top:8%}
.soundsYes span, .soundsNo span, .soundsAlways span {position:absolute; width:100%; height:30%;left:0;top:70%} 

#nav2app {margin:8px 20px 20px 20px; text-align:center}
#pagenav {border-radius: 5px; margin:10px 0 0 0; padding:0px 0 10px 0; }

#pagenav h3 {margin:10px 5px 5px 5px; font-family: 'Handlee'; text-align:center; font-size:0.8em;}
#pagenav a { display:block; width:100%; font-size:0.85em; text-align:left; min-height:28px; padding:8px 0 8px 15px; margin:3px 0;}

#nav2app p {text-align:center;color:#C7C5B0; font-size:0.9em; }
#nav2app h2 a {font-size:0.6em; }
#nav2app > a {position:relative; display:inline-block; margin:3px 20px; vertical-align:middle; }
#nav2app img { height:50px; width:auto; display:block; }

.grid12 { clear:both; width:98%; margin: 0 1%; padding:0;}

.grid3, .grid4, .grid8, .grid6 { margin: 0 1%; float:left; padding:0;}
.grid4r , .grid8r, .grid6r  { margin: 0 1%; float:right; padding:0;}
.grid6, .grid6r {  width:46%;}
.grid8, .grid8r { width:60%;}
.grid4, .grid4r { width:31%}
.grid3 {width:21%}
.left-half, .right-half { width:50%; margin:0; padding:0;}
.left-half {float:left;}
.right-half {float:right;}
.left-half p, .right-half p {padding:5px 10px;} 

footer .spalte {min-height:180px; width:31.3%; margin:0 1%; padding:5px; float:left;}
footer .spalte h2 {font-size:1.2em; font-family: 'Varela Round'; font-weight:normal; text-indent: 10px;}
footer ul {list-style-type:none; margin:0; padding:0}
footer li {margin:10px; padding:0; font-size:0.82em;}
footer .copyright {font-size:0.9em; }

/* ####################### CONTENT ####################### */ 

.antifloat { clear:both;}

.hinweis {font-size:0.86em}
.center {text-align:center; margin:1em 0}
.versteckt {display:none !important;}
.outside {position:absolute !important; width:800px; height:800px; left:-5000px !important; top:-5000px !important; overflow:hidden}
.outleft {left:-110% !important}
#adblockingalert {position:absolute; top:80px; left:50px; width:calc(100% - 50px);padding:0px; background:none;}

p {margin: 0 0 0.8em 0; line-height:1.4em; text-align:justify}
p.small, li.small {font-size:85%}
h1 {clear:both; margin:20px 0 25px 0; padding:0 0 6px 0}
h2, h3, h4, h5 {clear:both; margin:10px 10px 15px 10px;}
h2 > h3, h3 > h4, h4 > h5 {clear:both; margin:20px 1% 15px 1%;}
#vTools h2 {font-size:1em;} 

div[class*="grid"] h1, div[class*="grid"] h2, div[class*="grid"] h3, div[class*="grid"] h4, div[class*="grid"] h5 {
  margin-left:0; margin-right:0;
}

ul, ol {margin: 0.8em 0;}
ul {padding:0px 15px 5px 50px; list-style:square;}
ol {padding:0px 15px 5px 20px;}
li {padding:2px 0 4px 0;}
sub {font-size:1em;}
span.h1sub {font-size:0.65em; font-weight:normal;  }
span.h1sub { display:block; padding:0px 0 10px 0; margin:5px 0 0 0;}

.clickthroughtext ul, .clickthroughtext ol {margin: 0.4em 0; padding:0px 5px 5px 25px;}
.clickthroughtext li {padding:0 0 2px 0; font-size:0.95em}


img {border:0; margin:0; padding:0}
.bildlinks {float:left; padding:0.3em 10px 10px 0px;}
.bildrechts {float:right; padding:0.3em 0px 10px 10px;}

a:link, a:visited {text-decoration:none;} 
cite, table.cite-style { font-size:1.25em; line-height:1.4em;}
table.cite-style {margin:auto;}
table.cite-style td  {padding:2px 5px}

article {  padding:30px 20px 100px 20px; margin:20px 0; border-radius:4px;}
article h1 {margin:0px 0 25px 0;}

.related {margin:0 0 20px 0;}
.tocBox {margin:20px 0 10px 0}
.addendum .tocBox {margin:0 0 30px 0}

.tocBox {position:relative; padding:0; text-align:left; width:100%;}
.tocBox ul {list-style-type:square; margin:0; padding:6px 5px 6px 15px; font-size: 0.96em;}
.tocBox > ul  {list-style-type: none;}
.tocBox > ul > ul {list-style-type: circle !important;}
.tocBox li {margin:0; padding:3px 0 3px 0; cursor:pointer; }
.tocBox li small, .tocBox .noToc {display:none}
.btnTocScrollMode {width:42.5%; padding:6px 0 4px 0; margin:5px 0 0 5%; border-radius:5px 5px 0 0}


.seitennavigation {margin:5px; height:60px; padding:7px 0px 20px 10px; text-align:center;}
.seiteNext-aktiv, .seiteNext-inaktiv, .seiteBack-aktiv, .seiteBack-inaktiv, .seiteNr-aktiv, .seiteNr-inaktiv {
	display:inline-block; height:42px; padding:10px 0 0 0; margin:3px; border:2px solid #FFF; border-radius:5px; 
	}
.seiteNext-aktiv, .seiteNext-inaktiv, .seiteBack-aktiv, .seiteBack-inaktiv { width:90px;}
.seiteNr-aktiv, .seiteNr-inaktiv { width:46px;}



/* ########### ACCORDION ########### */

.accClose .accElemH {background: #1C1C19; border-color: #3A3A2A !important;}
.day .accClose .accElemH {background: #F5F5F5; border-color: #AAA !important;}
.blue .accClose .accElemH {background: #134; border-color: #456 !important; border-width:1px;}

.accOpen .accElemH {border-color: #3A3A2A !important;}
.day .accOpen .accElemH {border-color: #999 !important;}
.blue .accOpen .accElemH {border-color:#456 !important;}


.accElemH { border-style:solid; padding:8px 0 8px 10px; margin:10px 0;}

.accOpen .accElemH {border-width:1px 1px 0 1px; border-radius:7px 7px 0 0;}
.day .accOpen .accElemH {border-width:1px 1px 0 1px;}
.blue .accOpen .accElemH {border-width:1px 1px 0 1px;}

.accClose .accElemH {border-width:1px; border-radius:7px !important;}
.day .accClose .accElemH { border-width:1px;}
.blue .accClose .accElemH { border-width:1px;}

.accClose .accElemContent {display:none;}
.accOpen { padding:0px 0px 20px 0px;}

.openclose, .keepopen {
    position:absolute; display:inline-block; width:20px; height:20px; top:9px;
;}
.openclose {right:10px; transition: transform 0.4s ease-in-out;}
.keepopen {right:40px;}

h4 .openclose {
	width:12px; height:12px; right:14px; top:13px;
;}
.openclose svg, .keepopen svg {position:absolute; width:100%; height:100%;}
.accClose .openclose  {transform: rotate(-180deg);}
.keepopen svg {transform: rotate(-45deg);}
.accClose .keepopen {display:none;}


/* ########## Videos ############# */

/* Folgendes von http://www.geiststreicher.org/2013/11/tipps-tricks-youtube-videos-in-responsive-sites-einbetten/ */
.youtube {text-align: center; margin:10px; border-radius:9px; margin:10px;}
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin:10px 0;}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.video-container iframe {border-radius:7px; }
/*  Ende */ 

/* ################################## */
/* ########## Chord Diagrams ######## */
* { -webkit-tap-highlight-color:rgba(0,0,0,0);}

/* Chord Diagrams */
.chordsingle { height:250px;} 
.chordblender, .chordUpDownArrows { height:290px; } 
.chordsingle, .chordblender, .chordUpDownArrows { position:relative; border-radius:7px; margin-top:0px; margin-bottom:20px;} 

.chordsingle.extended, .chordblender.extended, .chordUpDownArrows.extended {border-radius:7px 7px 0 0; margin-bottom:0px; }  /* border:0 !important */
.cdextention {margin:0 0 20px 0; border-radius:0 0 7px 7px;  margin-top:-1px; } /* border:0 !important; */
.cdextention.middle {margin:0; border-radius:0; margin-top:-1px}

.cdstavesbox {height:150px;  position:relative;} 
.cdpianobox {height:110px; position:relative; }
.cdextention .staff-wrapper {width:92%; height:150px; left:4% } 

/* .staff-canvas { position:absolute; width:100%; height:100%; top:0%; left:0%; margin:0; border:0; border-radius:7px}  */
.cdpianobox canvas { position:absolute; width:90%; height:60%; top:25%; left:5%; margin:0; border:0; border-radius:3px; } 
.pianokeys canvas { position:absolute; width:100%; height:100%; top:0; left:0; border-radius:5px }

/* Fretboards */

.fb-wrapper {width:96%; left:3%;}
.chordsingle .fb-wrapper  {height:85%; top:13%}
.chordsmall  .fb-wrapper {height:85%; top:13%}
.chordUpDownArrows .fb-wrapper, .chordblender .fb-wrapper {height:72%; top:12%} 

/* Progressions */
.chordProgression { position:relative; border-radius:7px; margin: 0 10px 10px 10px;} 
div[class*="grid"] .chordProgression { margin: 0 0 10px 0;} 
/* Progression Control Box */
.progControlBox { min-height:180px; position:relative; padding:5px;  margin:5px 0.5%; float:right;} 
div[class*="grid6"] .progControlBox {margin:5px 0px;}
/* .chordsmall */
.chordsmall { position:relative; margin:5px 0.5%; min-width:150px; height:180px; float:left;}
.chordProgression.two .chordsmall, .chordProgression.two .progControlBox {width:49%}
.chordProgression.three .chordsmall, .chordProgression.three .progControlBox {width:32.332%}
.chordProgression.four .chordsmall, .chordProgression.four .progControlBox {width:24%}
.chordProgression.five .chordsmall, .chordProgression.five .progControlBox {width:19%}
.progControlBox.full {width:95% !important; min-height:68px; margin:0px 0.5%}

/* Buttons */ 
.multiCdBtn {margin: 0 0.5% 3px 0.5%; padding: 2px 5px; width:49%; height:40px; border-radius:5px; }
.cdBtnDown {left:5%; width:25%; bottom:7px; font-size:0.80em !important;}
.cdBtnUp { left:33%; width:25%; bottom:7px; font-size:0.80em !important;}

.cdExtendBtn { position:absolute; z-index:20; width:10%; height:12%; height:30px; bottom:6px; border-radius:4px } /* .cdpianobtn, .cdstavesbtn */
.cdstavesbtn { right:2%; }
.cdpianobtn { right:14%; }

.cdExtendBtn svg { position:absolute; width:76%; height:76%; top:12%; left:12%; }

/* Spot Info */
.spotViewBtn span {display:none}
.spotViewBtn, .cdBtnPlay, .cdBtnPlay2, .cdBtnUp, .cdBtnDown { position:absolute; height:12%; height:28px; border-radius:4px; }
.spotViewBtn:focus, .cdBtnPlay:focus, .cdBtnPlay2:focus {outline: none;}

.spotViewText {position:absolute; height:12%; top:5%; font-size: 0.8em;}
.spotViewBtn { top:3%; }
.chordDiagram .spotViewBtn { right:14%; width:10%; }
.chordDiagram .spotViewText { right:26%;} 
.chordblender .spotViewBtn { right:10px; width:44px; }
.chordblender .spotViewText { right:75px;} 

/* Play */
.cdBtnPlay span, .cdBtnPlay1 span, .cdBtnPlay2 span {display:none}

.cdBtnPlay {width:10%; right:2%; top:3%; }
.chordblender .cdBtnPlay {width:12%;} 

.cdBtnPlay1, .cdBtnPlay2 {  bottom:0; height:100% }
.cdBtnPlay1 { left:1%; right:auto;}
.cdBtnPlay2 { right:1%; bottom:0; height:100%}

.chordsmall .cdBtnPlay, .chordsmall .spotViewBtn { width:28px; height:25px; top:3px; }
.chordsmall .cdBtnPlay { right:3px; }
.chordsmall .spotViewBtn { right:35px; }
.chordsmall .spotViewText { right:66px; top:4.8%; font-size: 0.75em;}


/* Label / Chord Symbol */
.chordDiagram .label {  position:absolute; left:14%; top:4%; height:30px; font-size:1.2em;}
.chordsmall .label  { left:13%; top:3.5%; font-size:1em;}

/* Slider */
.slideAndPlayContainer {position:absolute; width:70%; height:9%; height:24px; left:2%; bottom:10px; }
.sliderbox { position:absolute; width: 66%; height:30px; top:2%; left:17%;}
.slider { 
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 84%;
  border-radius: 30px;
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 23px;
  border-radius: 15px;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  
  
  
  border-radius: 15px;
  cursor: pointer;
}
input[type=range]::-moz-focus-outer { border:0; }
input[type=range]:focus { outline: none; }


.controlGroupSpot, .controlGroupKey, .controlGroupVar { position:relative; width:160px; height:50px; margin:5px 0 2px 0; float:right}
.controlGroupSpot {width:115px;}
.controlGroupVar  {width:135px;}
.controlGroupKey .btnKeyUp, .controlGroupKey .btnKeyDown, .controlGroupVar .btnVariation, .controlGroupVar .btnVariationDimmed, .controlGroupSpot .spotViewBtn { 
  border-radius:5px; position:absolute; height:40px; }

.controlGroupKey .btnKeyDown { width:38px; right:45px; }
.controlGroupKey .btnKeyUp { width:38px; right:0px; }
.controlGroupKey .keyText { width:70px; left:0px;}

.controlGroupVar .btnVariation, .controlGroupVar .btnVariationDimmed {width:80px; right:0px; font-size:1em;}
.controlGroupVar .variationText { width:60px; left:0px;}

.controlGroupSpot .spotViewBtn {width:40px; right:0px; background-size: 45%}
.controlGroupSpot .spotViewText {width:80px; left:5px;}

.controlGroupKey .keyText, .controlGroupVar .variationText, .controlGroupSpot .spotViewText {position:absolute; height:30px; top:12px; font-size:0.9em; text-align:center}

.progControlBox .btnVariationDimmed {opacity: 0.4;}


/* Staff Boards */
.staffboard { position:relative; width:100%; height:200px;border-radius:7px; margin: 0 0 10px 0; }
.staffboard .staff-wrapper { position:absolute; width:100%; height:90%; left:0; top:0}
.staffboard-btnUp, .staffboard-btnDown {  position:absolute; height:38px; width:70px; top:205px; font-size:1em; opacity:0.7; border-radius:7px; font-size:1.24em;}
.staffboard-btnUp  { left:10px; top:132px;} 
.staffboard-btnDown { left:10px; top:170px;} 
/* modalChords */
.mc-txt1, .mc-txt2 { position:absolute; width:60px; height:25px; font-size:0.72em; text-align:center}
.mc-txt1 { bottom:25px;}
.mc-txt2 { bottom:3px;}
/* CompareChords (Tafel mit Noten) */ 
.cc-btnType, .cc-btnUp, .cc-btnDown, .cc-btnPlay, .cc-labelField, .cc-txtField { font-family:'Varela Round', 'Sniglet';}
.cc-box {position:relative; width:100%; height:220px; border-radius:7px; margin: 0 0 10px 0;} 
.cc-box .staff-wrapper { position:absolute; width:40%; height:150px; left:38%; top:60px;}
.cc-btnType, .cc-btnUp, .cc-btnDown, .cc-btnPlay { position:absolute;  height:35px; font-size:1.2em; border-radius:5px;}
.cc-btnType { position:absolute; left:2%; width:30%; font-size:0.98em;} 
.cc-btnDown { top:175px; left:2%; width:14%;}
.cc-btnUp { top:175px; left:18%; width:14%;}
.cc-btnPlay, .cc-btnPlay:hover { right:10px; top:10px; width:50px; background-repeat: no-repeat; background-position:center; background-size: 35%;}
.cc-btnPlay span {display:none}
.cc-txtField { position:absolute; right:5%; width:30%; height:25px; font-size:1em; text-align:right;}
.cc-labelField{ position:absolute; left:40%; top:30px; width:150px; height:50px; font-size:1.4em; text-align:left;}
/* Chord Symbol Elements */
.csRoot {display:inline-block; padding-right:2px;}
.csTriadExt {display:inline-block; font-size:0.75em;}
.csSus {display:inline-block; font-size:0.75em; position:relative; left:-0.1em}
.csType, .csExtNum, .csTensions {display:inline-block; font-size:0.7em; position:relative; top:-0.5em}
.csSlash {display:inline-block; position:relative;}
.csBass {display:inline-block; position:relative;}
/* Chord Chart  */
.chordchart {  margin:10px 10px 20px 10px; padding:10px; border-radius:4px;font-size:0.9em}
.chordchart .bar { width:24.9%; height:30px;  float:left; margin:10px 0; padding-left:8px; position:relative;}
div[class*="grid"] .chordchart { margin:10px 0; padding:5px;}
div[class*="grid6"] .chordchart .bar,  div[class*="half"]  .chordchart .bar { width:50%;}
.chordchart .bar:first-child { padding-left:4px;}
.chordchart .bar:nth-last-child(2) {  padding-left:1%;}
.chordchart .beat {	width:25%; height:30px; display:inline-block; text-align:center; vertical-align:bottom; overflow:visible; white-space: nowrap;} 



/* ################################################ */
/* ############ GOOGLE ADSENSE etc... #############  */
/* ################################################ */
#upperAdBar {position:relative; display:block; height:105px; top:5px; margin:0px 15px 5px 10px; padding:7px 0; text-align:center;} 
#leftbar { position:absolute;  height:600px; width:190px; margin:20px 0 0 0; padding:0 20px; }
#addendum, #preface  { position:relative; float:right; width:340px; padding:0 20px; margin:0px 15px 0 0; }

.adcontainer {position:relative; padding:0; text-align:center; }
#adpagetop {display:none; margin:10px 0 15px 0; }
#bannerLeft160 {position:relative; width:160px; height:620px; }
#adaddendum { position:relative; width:100%; text-align:center;}

#adaddendum.scrolling {position:fixed !important; }
/* #leftbar.scrolling {position:fixed !important;} */
#bannerLeft160.scrolling {position:fixed !important;}

#adaddendum.scrollEnd {position:absolute;}
/* #leftbar.scrollEnd {position:absolute;} */
#bannerLeft160.scrollEnd {position:absolute;}

#adbeforeaddendum {text-align:center}
#ad300 { display:block; width:300px !important; margin:0 0; overflow:hidden; padding: 0 0 20px 0; text-align:center;}
#ad160 { display:none; width:160px;  margin:20px;} /* height:600px; */
#adfooter { display:block; width:100%; min-height:260px; padding:5px; margin:5px auto; text-align:center; overflow:hidden}

@media screen and (max-width:1200px) {
  #upperAdBar {margin: 5px 10px 5px 5px;}
} 

@media screen and (max-width:900px) {
  #upperAdBar {margin: 5px 10px 5px 10px;}
  #ad300 {display:none; }
  #ad160 {display:block; }
  /* #adprefacetop { display:none; } */
}

@media screen and (max-width:640px) {
  #upperAdBar {min-height:60px; height:auto; border:0; border-radius:0; margin:0; padding:3px 0} 
  #upperAdBar, .day #upperAdBar, .blue #upperAdBar {background:none; border:0;}
  /* #ad300 {display:block; margin:10px 0;} */

}



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

@media screen and (max-width:1200px) {
  body { font-size:0.92em}

  #leftbar { display:none;}
  #content { width:calc(100% - 335px); left:15px; }
  #addendum, #preface {width:300px; margin:0 10px 0 0; padding:0; }
}
@media screen and (max-width:900px) {
  #content { width:calc(100% - 225px); left:10px; }
  #addendum, #preface {width:200px; } /* margin:10px 10px 0 0; border:1px dotted green*/
  .chordsingle { height:230px;} 
  .chordblender, .chordUpDownArrows { height:270px; }
  .staffboard {height:170px;}
  #pagenav a { font-size:0.75em; min-height:24px; padding:8px 0 8px 10px;}
}
@media screen and (max-width:800px) {
  header {height:90px; position:relative;} 
  main {margin:0px;}
  .chordchart { font-size:0.7em; margin:8px; padding:8px;}
  .beat {padding-top:5px}
}
@media screen and (max-width:760px) {
  .grid12, .grid6, .grid6r, .grid4, .grid4r, .grid8, .grid8r {  width:98%; margin:0 auto; float:none;}
  .left-half, .right-half { width:100%; float:none;}
  ul {padding:0px 15px 5px 20px;}
  footer .container {width:94%; margin:5px auto;}
  footer .spalte1, footer .spalte2, footer .spalte3 {width:100%;  float:none; margin: 0;} 
  article p {font-size:1.1em}
}

@media screen and (max-width:640px) {
  #content { float:none; width:96%; left:2%; padding:0;  border-radius:0;}
  .tocBox {display:none}
  #addendum, #preface { float:none; width:96%; padding:0 20px; margin:0px 15px 0 2%; }
  .chordsmall {  margin:5px 0.5%; min-width:100px; height:100px;}
}

@media screen and (max-width:600px) {
  #menu-button {right:65px;}
  .soundsAlert {width:300px; height:320px; left:calc(50% - 150px); top:80px; border-radius:5px; box-shadow:none;}
  .chordchart { font-size:0.5em; font-weight:bold; margin:10px 3px; padding:5px;}
  .chordProgression {margin: 10px 3px}
  .beat {padding-top:5px}
}
@media screen and (max-width:380px) {
  #maincontainer { width:100%;}
  .staffboard { height:160px;}
}




@media screen and (max-width:1200px) {
  #topnavbtns { width:420px;}  
}

@media screen and (min-width:860px) and (max-width:950px) {
  #topnavbtns { width:40%; left:calc(220px + 8%); left:34.3% }
  #topnavbtns svg { width:32%; height:19px; left:34%; top:18%; ;}
  #topnavbtns span {position:absolute; width:100%;left:0;top:68%; height:20%; }
}
@media screen and (min-width:801px) and (max-width:859px) {
  /*#topnavbtns { width:300px; left:calc(192px + 10%); }*/
  #topnavbtns { width:37%; left:calc(210px + 8%); left:36% }
  #topnavbtns button { width:25%; }
  #topnavbtns button:nth-child(1), #topnavbtns button:nth-child(4) {width:25%}
  #topnavbtns svg { width:60%; height:25px; left:20%; top:13px; stroke:#EEE; fill:#EEE}
  #topnavbtns span {display:none }
}
@media screen and (max-width:800px) {  
  #cfbtn, #cabtn, #ccbtn, #cpbtn {  top:8px; width:40px; height:35px;}

  #cfbtn {left:calc(90px + 4%)}
  #ccbtn {left:calc(135px + 4%)}
  #cabtn {left:calc(180px + 4%)}
  #cpbtn {left:calc(225px + 4%)}
  #topnavbtns { width:100%; height:35px; left:0%; top:53px;}
  #topnavbtns svg { top:5px; }
  #topnavbtns span {top:38%;}
  .blue #topnavbtns {height:35px; top:50px;}
  #topnavcontent {position:absolute;top:90px;padding:0 1%;} /* height:420px; */

  #topnavbtns button { width:18%; }
  #topnavbtns button:nth-child(1), #topnavbtns button:nth-child(4) {width:18%}
  #topnavbtns button:nth-child(1) { margin-left:14%}
}

@media screen and (max-width:640px) {
  #logo { display:block; position:absolute; left:8px; top:7px; width:100px; height:52px;}

  header {height:214px; border-bottom:0}
  #topnavcontent {top:214px;}
  #topnavbtns, .blue #topnavbtns { width:96%; left:2%; top:143px; height:70px;}
  main {margin:10px auto 0 auto; }
  #ladebalken { position:absolute; top:214px;}
  footer .spalte {min-height:20px; width:98%; margin:5px 1%; padding:5px; float:none; }

  h1, h3, h4, h5 {margin-left: 10px; margin-right: 10px;}
  footer h2 {margin-left: 0%; margin-right: 0%;}
  h1 {font-size: 1.4em;}
  h2 {font-size: 1.35em;}
  h3 {font-size: 1.25em;}
  #pagenav a { font-size:1em; }
  footer a { font-size:1.1em; }
  article p {font-size:1.25em; line-height:1.25em; text-align:left}
  p.small, li.small {font-size:1.1em !important}

  #soundsAlert { width:370px; height:280px; top:220px; left:calc(50% - 185px); padding:10px; font-size:1em; line-height:1.1em;}
  .soundsYes, .soundsNo, .soundsAlways { width:110px !important; height:160px; bottom:10px; font-size:0.9em; line-height:1.3em}
  .soundsAlways, .soundsAlways:hover {left:calc(50% + 60px);}
  .soundsNo, .soundsNo:hover {left:calc(50% - 170px); }
  .soundsYes, .soundsYes:hover {left:calc(50% - 55px); }
  


  #loadsounds-button, #language-button, #cssmodebtn, #lefthandbtn {  top:5px; width:44px; height:40px;}
  #language-button {right:2%; top:9px;}
  #cssmodebtn { right:calc(55px + 2%); padding:0;}
  #lefthandbtn {right:calc(108px + 2%);}
  #loadsounds-button {right:calc(161px + 2%);}

  #cfbtn, #cabtn, #ccbtn, #cpbtn { display:table-cell; top:63px; width:23%; height:70px; border-radius:5px}
  #cfbtn, #cabtn, #ccbtn, #cpbtn {background:#222219}
  .day #cfbtn, .day #cabtn, .day #ccbtn, .day #cpbtn {background:#E9E9E7}
  .blue #cfbtn, .blue #cabtn, .blue #ccbtn, .blue #cpbtn {background:#103040; }

  #cfbtn {left:2%}
  #ccbtn {left:calc(26%)}
  #cabtn {left:calc(50%)}
  #cpbtn {left:calc(74%)}

  /* #cfbtn svg, #cabtn svg, #ccbtn svg, #cpbtn svg {width:100%; height:70%; left:0%; top:15%; } */
  #cfbtn svg, #cabtn svg, #ccbtn svg, #cpbtn svg {width:100%; height:48%; left:0%; top:8%; }
  .cfapBtns .btntxt {display:block; position:absolute; width:100%; left:0%; top:70%; height:30%; font-size:0.8em}
  #topnavbtns svg { display:block; width:100%; height:43%; left:0%; top:10%;}
  #topnavbtns .btntxt {position:absolute; width:100%; left:0%; top:70%; height:30%}


  #topnavbtns button { width:26%; font-size:0.8em;}
  #topnavbtns button:nth-child(1), #topnavbtns button:nth-child(4) {width:24%}
  #topnavbtns button:nth-child(1) { margin-left:0%}
  #topnavbtns span {top:29%;}
  .topnavlinkbtn { font-size:1.05em; }
  .topnavlinkbtn small { font-size:0.9em !important; }

  .openclose {right:20px;} 
  .keepopen {right:80px;}


}


/* ###### TESTING ####### */
#mydevice {display:none; position:fixed; z-index:100; width:90px; height:55px; background:#C31; opacity:0.9; right:50px; bottom:50px; font-size:0.75em; color:#FFF; padding:5px; border-radius:5px;}
#maintainance {display:none; background:#C00; color:#FFF; font-size:0.9em; text-align:center; padding:10px 50px;}

/* 
#pagenav { border:1px dotted violet; }
#addTools { border:1px dotted green; }
#leftbar, #addendum, #preface {  border:1px dotted orange; }
#adaddendum, #bannerLeft160 { border:1px dotted red; border-radius:5px; }
#stickyBoxRight { border:1px dotted greenyellow; border-radius:5px;} 
#maincontainer { border:1px dotted blue}
#content  { border:1px dashed green} 
.accClose  {border:1px dotted red}
.accOpen  {border:1px dotted green}  */