#limo, .blue #limo {fill:#FFF}
.day #limo {fill:#555550}

#limo {fill:#FFF; }
.day #limo, .day .menudots {fill:#444440;}
#logo_O { stroke:#F90; fill:#B50; fill:url(#gradient-dot-fill); stroke:url(#gradient-dot-stroke)}
#logo_o {stroke:#BC0; fill:#572; fill:url(#gradient-square-fill);  stroke:url(#gradient-square-stroke)}
#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 #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; }

button svg {fill:#DDB; stroke:#DDB;}
.blue button svg {fill:#FFF; stroke:#FFF;}
.day #main svg {fill:#554; stroke:#554;}

#topnavbtns svg {fill:#CCB; stroke:#CCB;}
#topnavbtns button.active svg {fill:#DDB; stroke:#DDB;}
.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;}
#ccbtn #ccchs {stroke:#CCB; fill:none;}
.blue #ccbtn #ccchs {stroke:#DDC; fill:none;}
.day #ccbtn #ccchs {stroke:#554; 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; }

.blue #language-button #langbubble {stroke:#FFF;}
.fbsquare {stroke:#BC0; fill:#572;}
.fbdot { stroke:#F90; fill:#B50;}



#ccchs {fill:none; stroke:#998;}
.blue #ccchs {fill:none; stroke:#ABB;}
.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 #cpBtnMan {fill:#FFF; stroke:#344;}
.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:#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.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}

#topnav-cfa {border-color:#625;}
#topnav-theory {border-color:#652}
#topnav-chordtypes {border-color:#394911}
#topnav-practice {border-color:#982}
#topnav-quiz {border-color:#B61}

body { background:#2A2922; color:#EED;}
body.blue {background:#FFF; color:#443;}
body.day {background:#F5F5F4; color:#443;}

header, #topnavcontent, #nav2app, footer, .chordProgression, .chordsingle, .chordblender, .chordUpDownArrows,
#stufenakkorde, .fb-box, .youtube, .video-container iframe,  
.seiteNr-inaktiv, .seiteBack-aktiv, .seiteNext-aktiv, .seiteNr-aktiv,	.seiteBack-inaktiv, .seiteNext-inaktiv {
  background:#1D1D17;
}
.staffboard, .cc-box {background: #454540;  } 
button {background:#3C3B36; border:0px solid #543;} 
button:hover, button.active {background:#555045; color:#EEC;} 

.blue header, .blue #nav2app, .blue footer, .blue .chordProgression, .blue .chordsingle, .blue .chordblender, .blue .chordUpDownArrows,
 .blue #stufenakkorde, .blue .fb-box, .blue .youtube, .blue .video-container iframe, 
 .blue .seiteNr-inaktiv, .blue .seiteBack-aktiv, .blue .seiteNext-aktiv, .blue .seiteNr-aktiv,	.blue .seiteBack-inaktiv, .blue .seiteNext-inaktiv {
  background:#267; background:#256; color:#FFF;
}
.blue .staffboard, .blue .cc-box, .blue  #blackboard {background: #256;}
.blue button {background:#478; color:#FFF;}
.blue button:hover, .blue button.active {background:#589; color:#FFF;}

.day .chordProgression, .day .chordsingle, .day .chordblender, .day .chordUpDownArrows,
.day #stufenakkorde, .day .fb-box, .day .youtube, .day .video-container iframe,
.day .seiteNr-inaktiv, .day .seiteBack-aktiv, .day .seiteNext-aktiv, .day .seiteNr-aktiv,	.day .seiteBack-inaktiv, .day .seiteNext-inaktiv {
  background:#E9E9E5; background:#FFF;  color:#221; }
.day .seiteNr-inaktiv, .day .seiteBack-aktiv, .day .seiteNext-aktiv, .day .seiteNr-aktiv,	.day .seiteBack-inaktiv, .day .seiteNext-inaktiv {
    border:1px solid #998 }
.day .chordProgression, .day .chordsingle, .day .chordblender, .day .chordUpDownArrows,
.day #stufenakkorde {border: 1px solid #DDD;}
.day .chordsmall {border:0}

.day header, .day #nav2app, .day footer {background:#333;}

.day .staffboard, .day .cc-box, .day  #blackboard {background: #FFF;; border: 1px solid #DDD;}
.day button {background:#C5C5C0;background:#D5D5D0; color:#221;}
.day button:hover, .day button.active {background:#C0C0BB; }

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

header {border-bottom:2px solid #554; opacity:0.94}
.blue header {border-bottom:5px solid #589;}
.day header {border-bottom:5px solid #665;}

#topnavbtns button { background:none; border-bottom-width:2px; color:#A7A590; color:#DDC; height:calc(100% + 2px); padding:8px 8px 0px 8px;}
#topnavbtns button.active {background:#2E2D26; color:#EED}
#topnavcontent { border-bottom:2px solid #443;}
.blue #topnavbtns button { border-bottom-width:5px; color:#FFF; height:calc(100% + 5px); padding:11px 8px 0px 8px;}
.blue #topnavbtns button.active {background:#478; }
.blue #topnavcontent { background:#E0E9E9; background:#FFF; border-bottom:2px solid #BCC;}

.day #topnavbtns button { border-bottom-width:5px; color:#FFF; height:calc(100% + 5px); padding:11px 8px 0px 8px;}
.day #topnavcontent { background:#FFF; border-bottom:1px solid #BBB;}
.day #topnavcontent button {color:#FFF}

/* ### WHITE HEADER ### */
.day #topnavbtns svg {fill:#443; stroke:#443;}
.day .fbsquare {fill:#AB0; stroke:#240}
.day .fbdot { fill:#D61; stroke:#720}

.day header, .day #nav2app, .day footer {background:#FFF; }
.day header {border-bottom:1px solid #CCC;}
.day #topnavbtns button { border-bottom-width:3px; height:calc(100% + 3px);}
.day #topnavbtns button.active {background:#EEE; border-bottom-width:5px; height:calc(100% + 5px);}
.day #topnavbtns button.active svg {fill:#221; stroke:#221;}

.day #topnav-theory {border-color:#765}
.day #topnav-chordtypes {border-color:#460}
.day #topnav-practice {border-color:#A94}
.day #topnav-quiz {border-color:#C60}

.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 #language-button #langbubble {stroke:#221;}

.day #topnavbtns button {color:#221}
.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 #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:#665E49;}
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:#765; border-bottom:1px solid #555045;}
.blue footer h2 {color:#F80; border-bottom:3px dotted #578;}
footer a.copyright {color:#857055;}

.blue td .tone {color:#937}
.day td .tone {color:#932}

a:link, a:visited {color:#C40;}
a:hover {color:#D60;}
.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:#EEC;}
.blue h1, .day h1 {color:#665;}

h2 {color:#D52;color:#A97;}
.blue h2, .day h2 {color:#C53;}

h3 {color:#C96;}
.blue h3, .day h3 {color:#467;color:#B56;}
h4 {color:#A63;}
h5 {color:#952;}

.seiteNr-inaktiv, .seiteBack-aktiv, .seiteNext-aktiv  {color:#eed !important;}
.seiteNr-aktiv,	.seiteBack-inaktiv, .seiteNext-inaktiv {color:#776; 
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  cursor:default; }
  .blue .seiteNr-aktiv,	.blue .seiteBack-inaktiv, .blue .seiteNext-inaktiv {color:#9AA;  }
  .day .seiteNr-aktiv,	.day .seiteBack-inaktiv, .day .seiteNext-inaktiv {color:#777;  }
  .day .seiteNr-inaktiv,	.day .seiteBack-aktiv, .day .seiteNext-aktiv {color:#221 !important;  }
  .seiteNr-inaktiv:hover, .seiteBack-aktiv:hover, .seiteNext-aktiv:hover {color:#fff !important; background:#E90;	}
  .day .seiteNr-inaktiv:hover, .day .seiteBack-aktiv:hover, .day .seiteNext-aktiv:hover {color:#221 !important; background:#FC0;	}

/* 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;}
.slider::-webkit-slider-thumb {background: #985; border:0;}
.slider::-moz-range-thumb {background: #985; border:0;} /*  border-right:3px solid #554; border-left:3px solid #554; */
.blue .slider { background: #589;}
.blue .slider::-webkit-slider-thumb {background: #EED; border:0;}
.blue .slider::-moz-range-thumb {background: #EED; border:0;}
.day .slider { background: #BBB;}
.day .slider::-webkit-slider-thumb {background: #777; border:0;}
.day .slider::-moz-range-thumb {background: #777; border:0;}

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


/* ###################################################  */
/* ################### 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.8em;}
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; }*/