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

.fb-box, .day .fb-box, .blue .fb-box {background:none; }
.cdBtnPlay, .day .cdBtnPlay, .blue .cdBtnPlay {background:none; }

/*
#adcontenttop {background:#202019; border-radius:5px;}
.day #adcontenttop {background:#FFF; }
.blue #adcontenttop {background:#E2E9E9; }
*/

h1 {color:#554;}
h3 {color:#665;}
#chartlinks h3 { color:#998}
#printonly {background:#FFF;}
#printdescription {color:#000;}
#printheader {color:#543;}

#sheetheader { color:#EED;}
#description {color:#EED;}
/* #description.wide { background:#E5E4E3; border:1px solid #665; color:#332; } */
.blue #sheetheader {color:#DDB;}
.blue #description {color:#EED;}
/*.blue #description.wide { background:#E0E9E9; }*/
.blue #sheet {background:#F0F4F7;background:#E2E9E9;}

.day #sheetheader { color:#443;}
.day #description {color:#221;}
.day .cdbox {border:0}

#chartlinks a {background:#797669; color:#FFF; }
#chartlinks a:hover { background:#989080;}
.blue #chartlinks a {background:#367; color:#FFF; }
.blue #chartlinks a:hover { background:#478;}


/* .keyBtn, .keyBtnSharp, .keyBtnFlat {color:#FFF; }
.keyBtnSharp, .keyBtnFlat { background:#443} 
.keyBtn {background:#554 } 
.keyBtn:hover {background:#888070; }
.keyBtnSharp:hover, .keyBtnFlat:hover {background:#7C6B5A; }  */

.day #chordTypeBtns a {color:#221; background:#FFF; border:1px solid #CCC}

/*
#btnCorrect.correct #svguni {stroke:#890 !important;}
#btnCorrect #svguni {stroke:#E42 !important;} 
*/
/* .off */

/* .blue .keyBtnSharp, .blue .keyBtnFlat {background:#256; color:#FFF; }
.blue .keyBtn {background:#478; color:#FFF; }
.day .keyBtnSharp, .day .keyBtnFlat {background:#B9B9B9; color:#221; }
.day .keyBtn {background:#CCC; color:#221; } */

.btnSizePrint, #outNumRowPrint{background:#876; color:#433; border:0px solid #654; }
#outNumRowPrint { color:#fff; }
.cdBtnPlay svg {stroke:#996; fill:#996}
.blue .cdBtnPlay svg {stroke:#BBA; fill:#BBA}
.blue .cdBtnPlay:hover svg {stroke:#FFF; fill:#FFF}

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


/* #content {width:calc(100% - 555px); left:190px;} */
@media screen and (max-width:900px) {
    #content { width:calc(100% - 222px); left:8px;}
}
@media screen and (max-width:640px) {
    #content { width:96%; left:2%; }
}

#vSheet {width:100%; height:auto; min-height:1400px; margin:10px 0 0 0;}
#sheetheader { width:96%; clear:none; margin:15px 2% 2px 2%; font-size:2em; border:0;}
#vSheet .thumbheader h2 {font-size:1.1em; text-transform: capitalize; margin:20px 2% 10px 2%; border-bottom:1px dotted #886 }
.cdbox {display:inline-block; position:relative; width:29%; height:180px; margin:10px 1% 10px 3%; margin:10px 14px 10px 16px; }
.cdprintbox {display:inline-block; position:relative; margin:10px 1% 10px 3%; }

.fb-wrapper { position:absolute; width:100%; height:100%; left:0; top:0;}
.label {display:none}


.cdBtnPlay.bottomRightH {position:absolute; width:9%; height:11%; left:96.5%; top:86.5%;}
/* .cdBtnPlay.bottomLeftH {position:absolute; width:9%; height:11%; left:0.5%; top:87.5%; } */
.cdBtnPlay.bottomLeftH {position:absolute; width:9%; height:11%; left:96.5%; top:87.5%; }
.cdBtnPlay.bottomLeftV {width:11%; height:7%; left:0; top:90%;  left:96.5%; top:93%; } 

#printheader {text-align:center; font-size:18pt; }
h1 {margin: 12px 0; text-align:center; font-size:1.3em}
h3 {font-family:'Varela Round'; margin:0; font-size:1.2em;}
#printonly {display:block; position:absolute; left:-5000px; top:-5000px; height:29cm; margin:0.5cm 0 0.5cm 1.8cm; padding:0; width:21cm;  }
#printdiagrams {position:relative; margin:0;padding:0;}
#printdescription {margin:2em auto; width:90%; font-size:0.8em}

/* #btnsScreen {text-align:right; width:50%; float:right; margin:0; padding:20px 30px 0 0; } */
#chorddiagrams {float:right; width:58%; }
#description {float:left; width:38%; margin:20px 2%; font-size:0.9em; }
#chorddiagrams.wide {width:100%; float:none;}
#description.wide {float:none; clear:both; width:96%; font-size:1em; margin:25px 2%; padding:15px 2%; border-radius:5px;}

.btnSizePrint, #outNumRowPrint {width:60px;  text-align:center; }
#outNumRowPrint { width:40px; height:40px; border:0; padding: 0 5px 0 0; margin: 0 0 0 0; font-family: 'Sniglet'; font-size:1.9em; line-height:1.6em; vertical-align:bottom}



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

#chartlinks {padding:20px 0px; clear:both; border-radius:5px; }
#chartlinks ul {padding:0; margin:0; display:none}
#chartlinks li {list-style:none; display:block; height:30px; width:19.6%; width:32.9%; margin:2px 0.2%; padding:0; float:left; }
#chartlinks a { border-radius:5px; display:block; height:30px; width:100%; text-align:center; padding-top:7px; font-size:0.7em}
#chartlinks a span {display:none}

/* #keyButtons {width:100%; margin:5px 0; height:64px; font-family:'Varela Round','Sniglet'; }
#keyButtons span {width:16.46666666%; width:8.13333333%; margin:1px 0.1%;}
#keyButtons span { height:62px; padding:0; display:block; float:left; }
.keyBtn, .keyBtnSharp, .keyBtnFlat {width:100%;  border:0; margin-bottom:2px; font-size:0.9em }
.keyBtnSharp, .keyBtnFlat {height:30px; } 
.keyBtn {height:62px;} 
.keyBtn, .keyBtnSharp, .keyBtnFlat, .chordTypeBtn {border-radius:3px;} */


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


@media screen and (min-width:901px) and (max-width:1200px) {
	#chartlinks li {width:49.6%; margin:2px 0.2%; }
	#keyButtons span {width:16.46666666%;width:24.8%;}
	#upperAdBar {margin: 5px 10px 5px 15px;}
}
@media screen and (max-width:900px) {
	#chartlinks li {width:24.6%; width:19.6%; margin:2px 0.2%; }
	#upperAdBar {margin: 5px 10px 5px 10px;}
}
@media screen and (max-width:640px) {
	#upperAdBar {margin: 5px 0 5px 0;}
	/* #vSheet {width:100%; height:auto; margin:0;} */

	.cdBtnPlay.bottomRightH {width:12%; height:15%; left:96.5%; top:84.5%;}
	.cdBtnPlay.bottomLeftH {width:12%; height:15%; left:96.5%; top:84.5%; }
	.cdBtnPlay.bottomLeftV {width:12%; height:10%; left:96.5%; top:91%; } 

	
	
}


@media print {
#vSheet {display:block; position:absolute; left:0; top:0; width:21cm; height:29cm; margin:0.5cm 0 0.5cm 1.8cm; padding:0; }
#description {margin: 1cm 0.3cm 0 0.5cm; padding:0; font-size:10pt; }
#vSheet h2 {margin-bottom:1.5cm; }

#addendum, footer, header, #nav2app {display:none !important;}
#pagenav, #ad1,#ad2, #seitenkopf, #seitenfuss, #chartlinks, 
#related, #ad-responsiv, .adfield, .adcontainer, .adfield1, .adcontainer1 {
	display:none !important; }
iframe, div[class*="banner"] {display:none}
}

/* ##### GOOGLE ADSENSE etc... #####  */
/*
@media screen and (min-width:901px) and (max-width:1200px) {
	#adpagetop {display:block }
}
*/