/* Common Library Music Reading Game - by Joseph Allan copyright 2014-2026 */
/* music.school.nz 2.65+ */

:root {--cssPatch: 3; }

@font-face {
    font-family: 'M1 School'; font-display: block; src: url('M1School.ttf');}

/* responsive design */
/* default values */

/*#region ------------------ organised css ---------------------- */

/*#endregion*/

body { font-family: Verdana, Calibri, Georgia, Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5; text-align:center; padding:0 ; align-items: center;
	display:flex; flex-direction:column; justify-content:center;
  	min-width: 220px;
}

#conWrap {width:100%;margin-top:35px;display: flex; justify-content: center; align-items: center; text-align: center;}



#conStave	{width:100%; display:inline-block;margin-top:4%; margin-bottom:8.5%; margin-left:4pt;margin-right:4pt;}

#conStave		   {margin-top: 4% !important;margin-bottom: 3% !important;}  /* default position, others must add to 7%, see noteLowG */
#conStave.noteHigh {margin-top:14% !important;margin-bottom:-7% !important;}  /* same for both orientations */
#conStave.noteLowC {margin-top:-7% !important;margin-bottom:14% !important;}  /* cancelled in high resolution landscape */
#conStave.noteLow  {margin-top:-11% !important;margin-bottom:18% !important;}

#sShift		{position:absolute; left:40%;bottom:78%; display:block; }
#conModal {position:fixed;top:0px;width:100vw;height:100vh;display:none;}

#conCert, #conCoda {position:absolute;top: 42px;left:4px; width:calc(100% - 48px); text-align: left; background-color: white; vertical-align: top;
	border-color:black;border-width:5px;border-style:solid; border-radius: 10px; margin-bottom: 10px; min-height:10pt;
	line-height:1.5;padding:15px; }

#conCert {opacity: 0;background-color:#94C2F3;}
#conCoda {display:none;background-color:#E6BCFF;}


/* ------------ nota table ----------  */
	
	#notaTable {display: inline-block;padding-top:12px;border:none;background-color:transparent;font-size:100%;cursor: default;}
	#notaTable td {text-align: left;line-height: 1.2;padding:7px 4px;border:none;}

	#notaTable button {background: lightgray; color:black;
		font-size:28pt; font-family:'M1 School'; 
		width:50pt;
		aspect-ratio:1.1;   /* 93% browser support, works ok without */
		border: 0; line-height: 1;
		margin:1% 1% 3% 1%; padding-top:2%; padding-bottom: 2%;
		padding-left:0%; padding-right: 0%; /* required for ipad */
		border-radius: 10px;
	}
	
	#trNota1.classNota button, #selectNota.classNota1 {background-color:#390175;color:white;	}
	#trNota2.classNota button, #selectNota.classNota2 {background-color:black;color:rgba(255,214,0,1.00) !important;
									background-repeat: no-repeat; background-attachment: fixed;
									background: linear-gradient(180deg, rgb(0,0,0) 45%, rgba(255,214,0,1.00) 45%, rgba(255,214,0,1.00) 55%, rgba(234, 0, 0,1) 55%);	}
	#trNota3.classNota button, #selectNota.classNota3 {background-color:rgba(184, 23, 6,1);color:white; }
	
	#notaTable td {color:lightgrey;}

	#selectNota.classNota2 {font-size:20pt; padding-top:6px; padding-bottom:4px;
			background: linear-gradient(180deg, rgb(0,0,0) 43%, rgba(255,214,0,1.00) 43%, rgba(255,214,0,1.00) 57%, rgba(234,0, 0,1) 57%); }
	
	#trNota1.classNota td, #trNota2.classNota td, #trNota3.classNota td {color:black;}


	#conCert > input {font-size:18pt; margin-top: 5px;}
	#username, #school, #LOGIN_KEY, #REPORT_KEY { width:calc(100% - 20px);}
	#username, #school {margin-bottom:15px;max-width:360pt;}
	#LOGIN_KEY, #REPORT_KEY {max-width:240pt;}
	#REPORT_KEY { color:gray;}

	.dgH1 {font-weight: bold;font-size: xx-large; padding-bottom: 15px;display: inline-block;}
	.dgH2 {font-weight: bold;}
	.dgH3 {font-size: smaller;}	

/* ------------ nota table ----------  */

#conCertX, #conCodaB {font-family:'M1 School';position:relative;float:right; font-size:larger; cursor:default;
	background-color:black;top:-18px;right:-18px;border-top-right-radius:10px;border-bottom-left-radius:10px;
	padding:0px 11px 0px 12px;}

#conCodaB {color:#E6BCFF;}
#conCertX {color:#94C2F3;}

#conMine  {position:relative;}
#conMulti {position:relative;}
#conWave  {position:absolute;right:0px;opacity:0;display:none;}
#conBooks {margin-top:25pt;}

#conMulti button, #bRow button {
	font-size:24pt; font-family:'M1 School'; 
	width:21%;
	aspect-ratio:1.1;   /* 93% browser support, works ok without */
	color: white;
	position:relative;
	border: 0; line-height: 1;
	margin:1% 1% 3% 1%; padding-top:2%; padding-bottom: 2%;
	padding-left:0%; padding-right: 0%; /* required for ipad */
	border-radius: 10px; opacity: 0;
}

#conStave div {position:absolute; }
#conStave > span {font-family:'M1 School';line-height: 1;font-size:100px;}
#sShift  {font-size:20px !important;}
#conMain {position:relative; width:100%; margin-top:5px; max-width:1900px;}

#conBars {margin-left:5px;margin-right:10px;}
.cLines, #sLineA, #sLineB {background-color:black; }
.cLines, .cLedger > div { height:0px !important; width:100%; border-bottom:black solid 1px;}

#waveHelper::first-letter {color:black;}
#waveHelper {opacity: 0;position:absolute; line-height: 2pt; color:white;transform:rotate(90deg);}

.waveOnFlag0 #waveHelper::first-letter {color:inherit;}
.waveOnFlag0 #waveHelper {opacity:0.3;color:rgb(160, 160, 160); transform: translateX(-102%) scale(2);}

#pFinger,#pFlip {position:absolute;left:0;font-family:'M1 School';color:gray; opacity:0;}
#pFinger {top:15%;font-size:max(20px,min(22vw,12vh)) !important; font-weight: bold;}
#pFlip {margin-left:3%;bottom:4%;font-size:max(10px,min(11vw,6vh)) !important; opacity: 0;color:#A3A3A3; -webkit-tap-highlight-color:  rgba(0,0,0,0);}

#pFlip.pFlipEnable { cursor:pointer; }
#pFlip.pFlipDisable { cursor:default; }

/* portrait screen 590x500  */
/* max(100px,min(54vw,30vh) */

@media only screen and (max-width:140vh) {

	@media only screen and (max-height:550px) {	#waveTuningFork {transform:rotate(37deg) !important; top:calc(50% - 41px) !important;} }
	@media only screen and (max-width:550px)  {	#conStave.noteLowG {margin-top: -1% !important; margin-bottom: 8% !important;}}

	@media only screen and (min-width:90vh) and (min-height:500px) {	
		#conStave.noteLowC {margin-top: 4% !important; margin-bottom: 3% !important;}
		#conStave.noteLow  {margin-top:0% !important;margin-bottom:7% !important;}  /* not so much */
	}

	#conCoda  {font-size: max(12px,min(5.4vw,3vh));}
	
	#conStave > span {font-size:max(100px,min(54vw,30vh));}
	#waveHelper {font-size:calc(max(100px,min(54vw,30vh))*0.22) !important;}

	.iClassChords #conStave > span {font-size:calc(max(100px,min(54vw,30vh))*1.1);}
	.iClassChords #waveHelper {font-size:calc(max(100px,min(54vw,30vh))*1.1*0.13) !important;}

	.iClassChords #conMulti {margin-top:min(-10px,max(-6vw, -3vh))  !important;}
	.iClassChords #conStave > span.cNote,
	.iClassChords #conStave > #guitarBarre {font-size:max(13.2px,min(7.2vw, 3.96vh));}

	/*#conStave > span {font-size:calc(max(100px,min(54vw,30vh))*0.8);} /*---------------- MULTI NOTE QUESTIONS ------------- #conWrap class */



	#sShift  {font-size:max(20px,min(11vw,6vh)) !important;}

	#conMine {margin-right:3px;margin-left:6px;}
	#conMain {max-width:min(calc(65vh - 80px),100%); min-width:220px;}
	#conMulti button {font-size:max(24px,min(8.75vw,6.1vh)) !important; }
	.Wind > #conMine > #conMulti.cFingerCharts > button {font-size:max(50px,min(23vw,17vh)) !important; margin-left:2%;  margin-right:2%;}
	.Brass > #conMine > #conMulti.cFingerCharts > button {font-size:max(62px,min(35vw,20vh)) !important; margin-left:2%;  margin-right:2%; }
	

	#conMulti {padding-top:calc(min(5vw,3vh) - 5px); min-height:calc(max(100px,min(48vw,36vh)) - min(5vw,3vh) + 5px) !important;}	
	#conMulti.cFingerCharts  {padding-top:0px;  min-height:calc(max(100px,min(48vw,36vh)) + 20px) !important;
								margin-top:-20px;}
	
	#conStave.noteLowFC1  {margin-top:-11%!important;margin-bottom:18% !important;}

	body.iClassUkulele #conWrap,
	body.iClassChords  #conWrap {transition: all 0.2s ; margin-left:auto;margin-right: auto; width: 70%;}
	
	body.iClassUkulele #conMain.waveCompact #conWrap {transform: translateY(30%) scale(1.3); transition: all 0.15s linear 0.2s;}
	body.iClassChords  #conMain.waveCompact #conWrap {transform: translateY(20%) scale(1.4); transition: all 0.15s linear 0.2s;}
	
	body.iClassUkulele #conStave, body.iClassChords #conStave  { margin-top: 3% !important;margin-bottom:7% !important;}  /* addition 3% required for 70% width */
	

	#conMulti button { padding-top:max(2px,min(3vw,1.6vh));  padding-bottom:max(2px,min(3vw,1.6vh)) ; }

	#sLineA  { width:max(5px,min(3.6vw,2vh)); 	 right:0px; }
	#sLineB  { width:max(2px,min(1.44vw,0.8vh)); right:max(9px,min(6.12vw,3.4vh));}

	.cLedger { width:max(25px,min(14.4vw,8vh)); }
	.cLedger > div { border-width:2px; }
	
	@media only screen and (min-width:280px) and (min-height:504px) {.cLines {border-width:2px;} .cLedger > div {border-width:3px;}}
	@media only screen and (min-width:500px) and (min-height:900px) {.cLines {border-width:3px;} .cLedger > div {border-width:5px;}}

	#conWave { bottom:-30px;bottom:0px; width:calc(100% - 10px) !important;}
	
}

/* landscape */

@media only screen and (min-width:140vh) {

	@media only screen and (min-height:550px)  {
		#conStave.noteLowC,	#conStave.noteLow {margin-top: 4% !important;margin-bottom: 3% !important;}
	}

	#conMain {max-width: 190vh; min-width:360px;}
	#conWrap {position: absolute; max-width:50%;margin-top: calc(20px + 5vh);}
	#waveGameButton {right:calc(50% + 7px) !important;}
	#conNotes  {align-self:flex-end; margin-right:max(calc( 50vw - 95vh ),0px)!important; text-align: left;}
	#conNotes  {border-left:5px solid rgba(0,0,0,0.2); padding-left:15px;}

	#conBooks {margin-top:min(max(200px,calc(100vh - 80px)),82vh) !important;text-align: right;padding: 0px 8px;clear:both;}
	
	#conCoda,#conCert	{width:calc(50% - 70px);}
	#conCoda	{font-size: max(14px,4vh); max-width:600px;}
	#conCert	{min-width:250px; max-width:450px;}
	
	#conBars {position:absolute; width:45%; right:5px;top:calc(30px + 2vh);line-height: 1;}
	#conBooks > a {  margin-right:max( 4px, min(calc(10vw - 80px) , 8px))  !important;
					 padding-left:max(10px, min(calc(10vw - 80px) , 15px)) !important;
					padding-right:max(10px, min(calc(10vw - 80px) , 15px)) !important;
					margin-bottom:max(10px, min(calc(10vw - 80px) , 15px)) !important;}
	
	#conMine {float:right; width:calc(46% - 7px) !important;margin-top:calc(45px + 9vh);}
	#conBars, #conMine {margin-right:max( 6px, min(calc(10vw - 80px) , 10px)) ;}

	#conWave {top:calc( max(6px,4vh) - 10px);}
	.Wind > #conMine > #conMulti.cFingerCharts {margin-top:-20px;}
	.Brass > #conMine > #conMulti.cFingerCharts {margin-top:calc(10vh - 20px);}
	
	#conStave > span {font-size:max(90px,min(27vw, 54vh));}
	#waveHelper {font-size:calc(max(90px,min(27vw, 54vh))*0.22) !important;}

	.iClassChords #conStave > span {font-size:calc(max(90px,min(27vw, 54vh))*4/3);}
	.iClassChords #waveHelper {font-size:calc(max(90px,min(27vw, 54vh))*4/3*0.13) !important;}
	.iClassChords #conStave > span.cNote,
	.iClassChords #conStave > #guitarBarre {font-size:max(14.4px,min(4.32vw, 8.64vh));}
	
	#sShift {font-size:max(20px,12vh) !important;}

	#conMulti button {font-size:max(17px,min(8.8vh,4.5vw)) !important; margin:1% 0.7% 3% 0.7%; }
	.Wind > #conMine > #conMulti.cFingerCharts > button {font-size:max(54px,21.8vh) !important; margin-left:2%;  margin-right:2%; }
	.Brass > #conMine > #conMulti.cFingerCharts > button {font-size:max(54px,29vh) !important; margin-left:2%;  margin-right:2%; }
	.Brass > #conMine > #conMulti.cFingerCharts {margin-right: 10px !important;}
	#pFinger, #pFlip {left:5%;}
	#conMulti button { padding-top:max(2px,3vh);  padding-bottom:max(2px,3vh) ; }
	
	#sLineA  { width:max(5px,3.6vh);  right:0px; }
	#sLineB  { width:max(2px,1.2vh);  right:max(9px,6vh);}

	.cLedger	{ width:max(25px,min(7vw,13.5vh)); }
	.cLedger > div 	{ border-width:2px;}	
	
	@media only screen and (min-height:200px) {.cLines {border-width:2px;} .cLedger > div {border-width:3px;}}
	@media only screen and (min-height:400px) {.cLines {border-width:3px;} .cLedger > div {border-width:5px;}}
	
	#navUser {right:calc(50% + 54px) !important;}
	
	#barLevel,#barTime,#barTimeOutline,#barLevelOutline {height:calc(8px + 1vh) !important; border-radius:0px !important; padding:0px !important;}
	#barTimeOutline {margin-top:calc(-35px - 3vh) !important;}
	#barLevelOutline {margin-top:0px !important;}
	#barLevel {background-color:#A500DB !important;}
	#pLevel,#mScore {font-size:calc(9pt + 1vh);}
	#mScore {padding-left:0px !important;}
	#pLevel {padding-right:0px !important;}
	
	#conWave { margin-left:-15px; }
		
	#conWrap {transition: transform 0.5s;transform-origin: 0% 30%;}
	#conMain.waveCompact #conWrap {transform: scale(1.5);}
	
	body.iClassUkulele #conWrap {transition: transform 0.5s ;}
	body.iClassChords  #conWrap {transition: transform 0.5s ;}
	body.iClassUkulele #conMain.waveCompact #conWrap {transform: translateX(15%);}
	body.iClassChords  #conMain.waveCompact #conWrap {transform: translateX(15%);}	
	
	#conBooks {transition: padding 0.5s ; }
	#conMain.waveCompact #conBars {width:30%;min-width:180px;}
	#conBars {transition: width 0.5s;}
	
	#conMain.waveCompact #waveGameButton {display:none;}
	#conMain.waveCompact #navUser {display:none;}
	#waveCompactMode {transform:rotate(180deg);}
	
	@media only screen and (max-height:400px) {
		#conMain.waveCompact #conBooks {padding-top:100px;}	
	}

}

@media only screen and (max-width: 300px) {#waveTuningFork {transform:rotate(37deg) !important; top:calc(50% - 41px) !important;} }
@media only screen and (max-height:300px) {#waveTuningFork {transform:rotate(37deg) !important; top:calc(50% - 41px) !important;} }

#conWave {transition: all 0.5s !important; }
#waveTuningFork {transition: transform 0.4s, top 0.2s !important; }

#conMain.waveCompact #sNote {display:none;}
#conMain.waveCompact #waveCompactMode {z-index: 100;top:0;left:0;width:100%;height:100%;opacity:0;}
#conMain.waveCompact #conWave {width:100px !important; }
#conMain.waveCompact #waveLiveMonitor {opacity:0 !important;transition: none;}
#conMain.waveCompact #waveMicrophoneGain {display:none;}
#conMain.waveCompact #waveTuningFork {display:none;}
#conMain.waveCompact #waveClose {display:none;}
#conMain.waveCompact #waveBarLevelOutline {display:none;}
#conMain.waveCompact #conMulti {pointer-events:none;}
#conMain.waveCompact #waveSelector {display:none;}
#conMain.waveCompact #waveOptions {display:none;}
#conMain.waveCompact #waveInstrument {display:none;}

.cLedger {position:absolute; height:100%;overflow:hidden;}

#sSharp1,#sSharp2, #sSharp3, #sFlat1, #sFlat2, #sFlat3 {position:absolute; left:4%;top:0px;opacity:0;}

#navHam,#navHome {position: absolute; left:5px; top: 3px;text-align: left;color: black;}
#navHome {left:55px;line-height: 1;color: black;position: absolute;top:3px;}
#navMenu {left:4px; position: absolute; top: 42px;text-align: left; clip-path: inset(0% 0% 50% 0%); opacity:1;}
#navUser {right:50px;line-height: 1;position: absolute;top:10px;font-size:small;width:auto;text-align:right;
	margin-left:80pt;opacity:1;color:#555555;font-weight:bold;cursor:default;}

/* nav ---------------------------------- */

#navHam, #navHome {border: none;font-size:18pt; font-family: 'M1 School'; background-color:white; border-radius: 10px; text-decoration: none;}
#navHome {padding: 3px 8px;}
#navHam {padding: 1px 6px;}

#navMenu span {display:inline-block; min-width:100px; background-color: ivory; line-height: 1; vertical-align: top;
	border-color:black;border-width:5px;border-style:solid; border-radius: 10px; padding: 6px 0px; margin-bottom: 10px; min-height:10pt;}

#xnavMenu span:nth-of-type(1) {border-color:rgba(159,0,2,1.00);background-color:rgb(255, 251, 233) !important;}
#xnavMenu span:nth-of-type(2) {background-color:#3E77C1; color:white;}
#xnavMenu span:nth-of-type(3) {background-color:rgba(255,225,0,1.00);color:black;}
#xnavMenu span:nth-of-type(4) {background-color:darkgreen; color:white;}

.menuSelect {background-color:#555555; color:white !important;}

#navMenu span.navHighlight {border-color:#5b0081;background-color:#5b0081;color:white;}

#navMenu a {
	font-size:15px; color: inherit; outline: 0 none; text-decoration:none; 
	border-bottom: thick; border-style: solid; border-color: black;
	padding: 8px; border: 0; 
	margin:0px 0px 0px 0px; display: block;  }

#navMenu a:hover {
	box-shadow: 2px 3px 3px rgba(0,0,0,0.3);
	background: radial-gradient(orange, #FB0027); }		

#navMenu > a::after{
    content: "\a";
    white-space: pre; }

#conMulti.cFingerCharts > button > span {position: absolute;top:25%; }       /* wind instrument fingering chart line */

.Wind > #conMine > #conMulti.cFingerCharts  > button {font-size:65pt;}
.Brass > #conMine > #conMulti.cFingerCharts > button {font-size:100pt; }

#conMulti.cFingerCharts > #bRow {display:none;}

#conMulti.cFingerCharts > button {
	border-radius: 20px; color: black; background-color:white;
	margin: 10px; padding:0px; width:auto; aspect-ratio: auto;
}

.Wind > div.cFingerCharts  > button:focus { outline-color:rgba(0, 0, 0, .2)!important; }

#conMulti.cFingerCharts > button:focus {
	box-shadow: none;
	outline-width: 5px;
	outline-style: solid; 
	outline-color: #C8C8C8;
}

button:focus, #navHome:hover {
	/*box-shadow: 2px 3px 3px rgba(0,0,0,0.3); none;*/
	outline-width: 5px;
	outline-style: solid; 
	outline-color: #C8C8C8; 
}

.active  {background-color:orangered;     background: linear-gradient(red, orange ); }
.correct {background-color:yellowgreen;color:green !important; 	background: yellowgreen !important ;  }
.wrong   {background-color:#970709;	color:#7c0507 !important;	background: #970709 !important; }	

.wrong {transition-delay: 200ms;}

#barTimeOutline,#barLevelOutline {
	background-color: black;
	width: 100%;
	border-radius: 13px; /* (height of inner div) / 2 + padding */
	padding: 3px;
}

#barTime, #barLevel {
   height: 20px;
   border-radius: 10px;
   min-width: 20px;
}

#barLevel	{background-color:rgba(115,8,160,1.00);}  /* purple */

#conBars {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* book buttons */

#conBooks a[onclick], .cButton {
	font-size:15px; color: #ffffff;	outline: 0 none; text-decoration:none;
	position:relative; background-color: #3E77C1;
	padding: 5px 15px 7px 15px; border: 0;
	margin:0px 8px 15px 0px; border-radius: 10px; display:inline-block; }

#conBooks a[onclick]:hover, .cButton:hover {
	box-shadow: 2px 3px 3px rgba(0,0,0,0.3);
	background: radial-gradient(orange, #FB0027); }

#sNote {
	color:#545454; position: absolute; display:block; margin-left: auto; margin-right: auto;
	left: 6px; right: 0px; top:calc(75% - 18px); width:100%; max-width:380px; }

.sNoteVideo {z-index:100;color:black;background-color:white !important; min-width:84pt; }
.sNoteVideo .sNoteChar  {color:rgba(255,0,4,1.00);}

.sNoteWave  {z-index:100;background-color:rgba(141,235,0,1.00) !important;color:black;white-space: nowrap; padding: 2px 16px 4px 12px;}
.sNoteShare {z-index:100;white-space: nowrap; padding: 0px 0px 0px 0px; cursor:pointer;background-color: transparent !important;font-weight: bold; color:black;margin-top: -10px;}
.sNoteChar  {font-family: 'M1 School'; font-size:25pt; }
.sNoteShare .sNoteChar  {font-size:60pt; line-height: 1; font-weight: normal ;}
.sNoteShare:hover {background: transparent;box-shadow: none;color:rgb(7, 34, 187);} 

.sNoteVideo span, .sNoteWave span, .sNoteShare span {vertical-align: middle; }
.sNoteVideo:hover {background: radial-gradient(white,lightgrey); } 

.thisBook {background-color:#000CED !important; }

/* Transitions - Firefox, WebKit, Opera, Standard */

.cNote {position: absolute; left: 186px; top: 0px; clip-path:inset(100% 0 0 0);opacity:0%;}
body.iClassSaxophone .waveOnFlag6 #iNote3 {transform: translateX(-90%) !important;}
#iNote {opacity: 100%;}

#iNote3 {transform-origin: 50% 95%; }

.waveOnFlag0.TheseCards4 .cLedger,
.waveOnFlag2.TheseCards4 .cLedger,
.waveOnFlag4.TheseCards4 .cLedger {transform: scaleX(0.9);}

.cNote, #iNote, #navMenu, #sShift, .cLedger, #waveHelper,
   #conCert	{ transition: all 0.5s ease; } /* consider 0.35 for faster game play */
#conStave	{ transition: all 0.5s; }

#accident0, #accident1, #accident2, #accident3 { position:absolute; transition: all 0.5s ease;} 

#selectNota	{ transition: opacity 0.5s ease; opacity: 0; }


#sSharp1, #sSharp2, #sSharp3, #navUser,
#sFlat1, #sFlat2, #sFlat3, #navHome { transition: opacity 0.3s; }
button,#pFinger	{transition: opacity 1.0s ease; }
#barLevel		{transition: width 0.5s ease; }
#pFlip { transition: opacity 0.7s;	transition-delay: 0.5s;}

#tableContainer {transition: max-height 0.5s linear;}

/* Animations - for the time and progress bars */

div.barStart { width:5%; }

div.barMoveClass10 { animation: moveBar 10s linear;  }

div.barMoveClass10 { animation: moveBar 10s linear; } /* testing */
div.barMoveClass60 { animation: moveBar 60s linear; }
div.barMoveClass90 { animation: moveBar 90s linear; }

div.barMoveClass180 { animation: moveBar 180s linear; }
div.barMoveClass240 { animation: moveBar 240s linear; }
div.barMoveClass300 { animation: moveBar 300s linear; }
div.barMoveClass360 { animation: moveBar 360s linear; }
div.barMoveClass420 { animation: moveBar 420s linear; }
div.barMoveClass480 { animation: moveBar 480s linear; }
div.barMoveClass540 { animation: moveBar 540s linear; }
div.barMoveClass600 { animation: moveBar 600s linear; }

@keyframes moveBar {
	0%		{width:5%; }
	100%	{width:100%; } }

/* z-index */

#sA0, #sA1, #sA2, #sA3 {z-index: 60; }  /* allow click on long buttons in first row */
#sA4, #sA5, #sA6 {z-index: 50; }        /* on top of circles for modes */
.cNote, #sClick,#sClickBack,#waveGameButton {z-index: 100; }
#conModal {z-index: 150; }
#navHam,#navHome {z-index: 200; }
#navUser {z-index: 140; }
#conCoda, #conCert {z-index: 400;}
#navMenu {z-index: 500; }
#conBooks a {z-index:175;}
#conThumb {z-index: 100;}
#conNotes {z-index: 50;}
#conWrap,#conStave, #conBars {z-index: 50;}
#conWave {z-index: 40;}

#waveMicrophoneGain {z-index: 20;}

#conMulti > button  {background-color:blue;overflow: visible;}

#selectNota {
	position: absolute; right:0px; top: 80%;
	font-size:14pt; font-family:'M1 School'; border: none;
	width:34px; 
	aspect-ratio:1.1;   /* 93% browser support, works ok without */
	line-height: 0.8 !important; text-align: center;
	margin:0% 0% 1% 0%; padding-top:5px; padding-bottom: 5px;
	padding-left:0%; padding-right: 0%; /* required for ipad */
	border-radius: 10px; 
}

#selectNota:focus { outline: none;}


/* tables */

table, td, th {border: 1px solid;}
table {border-collapse: collapse;text-align:center;font-size:75%;background-color:#F1DAFF;clear:both;}
td {padding-left:3pt;padding-right:3pt;}
#conCoda table tr:hover {background-color: #F696FF;}
th {background-color:#590E87;color:white;border-color:black;}
.cRow {background-color:#D6B5FF !important;}

p.RPT {text-align:center; padding:0 ; align-items: center;	 justify-content:center; }

.RPT table tr:hover {background-color: inherit !important;}

.RPT table {display: inline-block;font-size:100%;line-height: 1.5;margin:10pt;background-color:#CAE9FF;outline: solid 4px; border:none; border-radius:6px;}
.RPT table, .RPT td, .RPT th {border: none;}
.RPT th {background-color:#3E77C1; color:white;word-wrap: normal;border-bottom: black solid 4px;line-height: 1;}
.RPT td, .RPT th {padding:4pt;}
.RPT tr:last-child > td {border-top:black solid 4px; background-color:greenyellow; padding-bottom: 5pt; }

.L1 td:nth-child(1),
.L2 td:nth-child(2),
.L3 td:nth-child(3),
.L4 td:nth-child(4) {text-align: left;  }  /* may not be required - could be used for stats page (and styles already in there) */

.R1 td:nth-child(1),
.R2 td:nth-child(2),
.R3 td:nth-child(3),
.R4 td:nth-child(4) {text-align: right; }   /* may not be required */

.X1 td:nth-child(1)::first-letter {color: blue;display:none;font-size:0px;} /* may not be required */

.BDR td:nth-child(2) {border-right: black solid 4px;  }  /* may not be required */

.RPT tr,.RPT th {padding-top:3pt;}

.cHigh {background-color:greenyellow !important;}


#conNotes {max-width:450px;text-align:left;overflow:hidden; transition: max-height 0.4s ease-out; padding-bottom: 0pt!important; }


#upDown,#upReturn {font-family: 'M1 School'; cursor:default; font-size:35pt;color:#333333;}

#upDown::first-letter {color:#BBBBBB;}
#upDown {transform:rotate(0deg); transition: transform 0.2s ease-out; display:inline-block;line-height: 2pt; margin-bottom:30pt;
	position: relative; top:12px;}


#upReturn::first-letter {color:#BBBBBB;}
#upReturn {float: right;transform:rotate(180deg);margin-top: -20px;}

.iClassBassoon .cFingerCharts div {display: inline-block;color:rgb(194, 194, 194);}
.iClassBassoon .cFingerCharts .wrong div {color:transparent;}
.iClassBassoon .cFingerCharts #sA3 {display: none;}
.iClassBassoon #conMulti.cFingerCharts  {padding-left:15%;}
.bassoonHide   .cFingerCharts div {opacity: 0;}
.iClassBassoon #conMulti.cFingerCharts #pFinger {font-weight: normal; font-size:max(15px,min(16vw,9vh)) !important}


#meCredit {font-size: 70%;margin-bottom: 0pt;}


.customImages {position:absolute;top:0px;left:0px;width:100%;height:100vh; opacity:0%;
	transition: opacity 0.5s linear; background-color:none;  overflow: hidden; overflow: clip; }  /* iOS 13 overflow hidden... everyone else clip */

.customImages > img {object-fit: cover;min-width:100%;min-height:100%;}
.customImages  {z-index: -2;}

/* Piano Keys */

	#conPianoKeys {width:100%;position: absolute;top:0;left:0;z-index: -1;opacity: 0%; overflow: hidden; 						/* piano container */
		transition: aspect-ratio 300ms, transform 300ms; text-align: left;  white-space: nowrap;}
	#conPianoKeys > div {position:relative;width: 100%;height: 100%;overflow-x: visible;}
	#conPianoKeys > div > div {position: relative; top:0;left:0; display:inline-block;height:calc(95% - 12px);					/* white keys */
		border: 3px solid;width:calc(20% - 5px);margin-right:-3px;border-radius:0 0 7pt 7pt;
		background-color:ivory;transition: all 300ms;line-height: 4;} /* aspect-ratio */  
	#conPianoKeys > div > div > div {background:#222;position: absolute;top:0px;left:0;height:42%;width: 60%;					/* black keys */
		text-align: center;padding-top:50%;cursor: default;z-index: 250;border-radius:0 0 4px 4px;
		transition: background-color 300ms;}

	#conPianoKeys span { position: absolute; bottom:4px;left:50%;cursor: default; 												/* buttons stickers  (all keys) */
		transform: translateX(-50%);line-height: 1;font-family: 'M1 School';min-width: 80%; color:black;
		text-align: center; padding-top:30% !important; border-radius: 4pt; width:auto; 
		transition: color 0.3s ease, text-shadow 0.3s ease, opacity 1.0s ease, font-size 0.3s ease; 
		outline:none;color:black;padding:0;background-color: transparent;
		margin-bottom: 0pt !important; padding-bottom: 0pt !important; opacity:0;}
	#conPianoKeys > div > div > div > span {text-shadow: 0px 0px 5px black;												   /* black button specifics */
		padding-bottom:5px;color:white; min-width:150%;}	

	#conPianoKeys > div {transition: margin-left 300ms;}

				 #conPianoKeys div {font-size:min(12vw, 7vh);}
	.cPianoKeys5 #conPianoKeys div {font-size:min(12vw, 7vh);}
	.cPianoKeys7 #conPianoKeys div {font-size:min(8vw, 5vh);}
	.cPianoKeys8 #conPianoKeys div {font-size:min(8vw, 5vh);}
	.cPianoKeysD #conPianoKeys div {font-size:min(8vw, 5vh);}
	
				 #conPianoKeys {aspect-ratio: 1.8;}		/* aspect-ratio support 93.75% as of 2025-MAY */
	.cPianoKeys7 #conPianoKeys {aspect-ratio: 2.3;}		/* fallback; conPianoKeys <BR> in piano\index.html with 'line-height: 4' above */
	.cPianoKeys8 #conPianoKeys,
	.cPianoKeysD #conPianoKeys {aspect-ratio: 2.5;}
	
	.cPianoKeys7 #conPianoKeys > div > div {width:calc(14.2% - 4px) !important;}
	.cPianoKeys8 #conPianoKeys > div > div,
	.cPianoKeysD #conPianoKeys > div > div {width:calc(12.5% - 4px) !important;}

	@media only screen and (max-width:140vh) { .cPianoKeysD #conPianoKeys  {transform: translateY(15%);}}

	.cPianoKeysB #conPianoKeys > div {margin-left:calc(8px - 60%);}					/* not used bass keys option */
	.cPianoKeysB #conPianoKeys > div > div:nth-child(3) {opacity: 0;}

	#p16, #p19 {opacity: 0;}
	.cPianoKeys7 #p16 {opacity: 1;}
	.cPianoKeys8 #p16,	.cPianoKeys8 #p19,
	.cPianoKeysB #p16,	.cPianoKeysB #p19,
	.cPianoKeysD #p16,	.cPianoKeysD #p19 {opacity: 1;}
	
	.pianoHideLetters #conPianoKeys span {color:transparent !important;opacity: 0;}
	.pianoHideLetters #conPianoKeys > div > div > div > span {color:transparent !important; text-shadow: 0px 0px 5px transparent !important;}
	.pianoHideLetters #conPianoKeys span.correct { color:black !important;}

	#p8 {transform: translateX(-55%);}
	#p10 {transform: translateX(-45%);}
	#p13 {transform: translateX(-65%);}
	#p15 {transform: translateX(-50%);}
	#p17 {transform: translateX(-35%);}

	#conPianoKeys .correct {color:#2D6B3C !important;	background-color: none !important; background: none !important;text-shadow: none;}
	#conPianoKeys .wrong   {color:#970709 !important;	background-color: transparent !important; background: transparent !important;}

	#conPianoKeys span:focus {color:#84bcd6;outline:none;background-color: rgba(0, 0, 0, .2);}
	#conPianoKeys > div > div > div > span:focus {color:#9adfff;outline:none;background-color: rgba(0, 0, 0, .3);}

	#conPianoKeys div.correct_p	{background-color:yellowgreen;}
	#conPianoKeys div.wrong_p 	{background-color:#970709;}
	#conPianoKeys span.wrong 	{color:transparent !important;text-shadow:none !important;}


	.iClassPiano #sNote {text-align: right;width:1px;left:auto;right:-10px !important;width:auto;margin-right:0px;margin-left:0;top:auto;bottom:calc(5vh - 35pt); line-height: 1; }
	.iClassPiano #sNote .sNoteWave,
	.iClassPiano #sNote .sNoteVideo  {background-color: transparent !important;}
	
	.iClassPiano #sNote .sNoteChar {font-size: 40pt;text-shadow: 0px 0px 5px white !important;}

	.iClassPiano #sNote > a  {background:radial-gradient(rgba(255,255,255,0.7) 20%, transparent 45%);padding:10pt;}
	.iClassPiano #sNote > a:hover {box-shadow: none; color:rgb(31, 31, 187) !important;}
	.iClassPiano #sNote > a:hover > .sNoteChar {color:purple !important;}
	.iClassPiano #sNote > a > span:nth-child(2) {display:none !important;}
	.iClassPiano #sNote > a {width:auto;min-width: 0;}

	.iClassPiano #conBooks #iBook5 {margin-right: 0px;border-top-right-radius: 0;border-bottom-right-radius: 0;padding-left:12px;padding-right:10px;}
	.iClassPiano #conBooks #iBook6,
	.iClassPiano #conBooks #iBook7  {margin-right: 0px;margin-left:0;border-radius: 0;padding-right:10px;padding-left: 10px;}
	.iClassPiano #conBooks #iBook8 {margin-left: 0;border-top-left-radius: 0;border-bottom-left-radius: 0;padding-left: 10px;padding-right: 12px;}


	@media only screen and (max-width:140vh) {#conPianoKeys {margin-top:calc(20px - 2.3vh);}}

/* waveGame */


#conWave {position:absolute; padding-right:10px;width:100%; }
#conWave, #waveGameButton {cursor:default; 
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
#waveGameButton { font-family: "M1 School"; font-size:25pt;position:absolute; right:5px; top: -5px;color: black;}

#conWave > div {position: absolute;	color:rgba(69,118,128,1.00); }

#waveDetailContainer, #waveSpectrumContainer {position: relative;padding-bottom: 8px;}
#waveDetailNote, #waveSpectrumData {position: absolute;font-family: "Courier New";}

#waveNote { font-family: "M1 School"; font-size:22pt;}

#waveNote,#waveDetailNote, #waveSpectrumData { left:10px;top:0px;}

#waveClose { right:13px;top:1px;font-family: "M1 School"; font-size:22pt;}
#waveCompactMode { right:36px;top:0px;font-family: "M1 School"; font-size:22pt;}
#waveOptions { right:13px;bottom:4px;font-family: "M1 School"; font-size:25pt;}

#detector { border: 4px solid gray; border-radius: 8px; text-align: center; padding: 10px;
	background-color: burlywood;display: inline-block;width:140px;}

#meCentsUp, #meCentsDown { height:30%; width:34px; position:absolute; transition: height 0.5s, background-color 1.5s; right:10px;}
#meCentsUp   {background-color:#970709;bottom:calc(50% + 3px);}
#meCentsDown {background-color:#1012b4;top:calc(50% - 2px);}
.meCentsGreen {background-color:#17a50a !important;}


.meTuneUp, .meTuneDown {height:30%; position:absolute; transition: height 0.5s, background-color 1.5s, opacity 1s; display:none;}
.meTuneUp   {background-color: white;  border-radius: 100px 100px 0px 0px; bottom:calc(50% + 3px); }
.meTuneDown {background-color: rgb(206, 206, 206);height:30%; border-radius: 0px 0px 10px 10px; top:calc(50% - 3px); }

.waveTuner .meTuneUp, .waveTuner .meTuneDown {display:inline;}

#meCentsOK   {background-color:rgba(0,0,0,0.30);bottom:calc(30% + 2px);position: absolute;right:2px;width:50px;height: calc(40% );
	z-index: 99; }

#waveTarget {background-color:rgba(255,255,255,0.70);bottom:calc(50% - 1px);position: absolute;left:0px;width:0%;height: calc(7px );margin-left:4px;
	max-width:calc(100% - 10px);}

#waveLiveMonitor	{position: absolute; font-family:'M1 School'; bottom:4px;left:30%; font-size:45pt; transform: translateY(17%); transition:opacity 0.5s ease 0.3s; opacity:0;}
#waveMicrophoneGain	{position: absolute; font-family:'M1 School'; bottom:4px;left:10px; font-size:30pt;	}
#waveTuningFork		{position: absolute; font-family:'M1 School'; top:calc(50% - 27pt);left:14px; font-size:40pt; }

#waveCanvas { border:solid 4px;border-radius: 10px; width: 100%;}
#waveDetailCanvas, #waveSpectrumCanvas { width: 1024px; border:solid 4px;border-radius: 10px;}

#waveDetailCanvas {background-color: rgba(221,144,255,1.00);}
#waveSpectrumCanvas {background-color:bisque;}
#waveCanvas {background-color: skyblue;}

#conWave.waveFree  #waveCanvas {background-color: rgba(141,235,0, 1);}
#conWave.waveTuner #waveCanvas {background-color: rgba(68, 0, 100, 1);}
#conWave.waveTuner > div {color:white;}
#conWave.waveTuner #waveBarLevel {background-color:white;}
#conWave.waveTuner #waveBarLevelOutline {background-color:rgba(0, 0, 0, 0);}
#conWave.waveTuner #waveCompactMode, #conWave.waveTuner #meCentsUp, #conWave.waveTuner #meCentsDown, #conWave.waveTuner #meCentsOK {display: none;}


#waveSelector   {position: absolute;top:0;left:0;z-index: -20; border:solid 4px;border-radius: 10px; width: calc(100% - 10px);}
#waveInstrument {position: absolute;top:50%  ; transform: translate(0, -50%); padding-bottom:10px; left:0;z-index: 100; width: calc(100% - 10px);
	font-size:max(10pt,min(6vw,5vh)); font-weight: bold;letter-spacing: 0.5em ;padding-left: 0.5em; color:rgba(255, 255, 255, 0.9) !important;pointer-events: none;}

.waveSelector {position: absolute;top:7%; height: 90%;z-index: -20;opacity: 0.5;}

#waveSaxSoprano {left:8%;width:15%;}
#waveSaxAlto    {left:25%;width:15%;}
#waveSaxTenor   {left:45%;width:17%;}
#waveSaxBari    {left:70%;width:18%;}

#waveTrumpet    {left:8%;width:32%;}
#waveBariHorn   {left:45%;width:40%;}

.iSelect #waveSelector {z-index: 120; }
.iSelect .waveSelector {z-index: 130; }

#waveInstrument {opacity: 0;transition: opacity 3s ;transition-delay: 3s;}
.iSelect #waveInstrument {opacity: 1; transition:none; }

#waveBarLevelOutline {
	opacity: 0;
	width:20px;
	left:43px; bottom:20px;			
	background-color: rgba(69,118,128,0.40);
	border-radius: 13px; /* (height of inner div) / 2 + padding */
	padding: 3px;
}

#waveBarLevel {	height: 20px; border-radius: 10px;
	min-width: 20px; background-color:rgba(69,118,128,1.00);}

#waveBarLevel  { transition: width 0.5s ease; }	

#waveBarLevelOutline { transition: all 0.5s ease; }	

body.iClassUkulele .cLedger {display: none;}
body.iClassUkulele #conStave > div {opacity: 0;}
body.iClassUkulele #ukeChord {position: absolute;left:50%;transform: translateX(-50%);top:5%;z-index: 200;cursor: default;user-select: none;}
body.iClassUkulele #sClef {opacity: 0;}
body.iClassUkulele .cNote {position:absolute; left:50%; top: 25%; clip-path:none;opacity:1;height:auto; transform-origin: 50% 50% !important;}
body.iClassUkulele #iNote {top:23%; transform: translateX(-90%) translateY(-50%) scale(0.18) !important;}
body.iClassUkulele #iNote1 {top:44%; transform: translateX(-64%) translateY(-50%) scale(0.18) !important; }
body.iClassUkulele #iNote2 {top:64%; transform: translateX(-38%) translateY(-50%) scale(0.18); }
body.iClassUkulele #iNote3 {top:85%; transform: translateX(-13%) translateY(-50%) scale(0.18); transform-origin: 50% 50%;}
body.iClassUkulele .cNote.cHide {opacity: 0 !important; }
body.iClassUkulele #waveHelper { top:0% !important; left:50% !important; color:white !important;transition: transform 1s, opacity 0.5s;}
body.iClassUkulele #conWrap.waveOnFlag2 #waveHelper {opacity: 1 !important;}

body.iClassChords .cLedger {display: none;}
body.iClassChords #conStave > div {opacity: 0;}
body.iClassChords #guitarChord,
body.iClassChords #guitarXO  {position: absolute;left:50%;transform: translateX(-50%);top:5%;z-index: 80;cursor: default;user-select: none;}
body.iClassChords #guitarBarre  {position: absolute;top:18%;transform: translateX(-100%);z-index: 80;cursor: default;user-select: none;}
body.iClassChords #sClef {opacity: 0;}
body.iClassChords .cNote {position:absolute; left:50%; top: 25%; clip-path:none;opacity:1;height:auto; transform-origin: 50% 50% !important;
	background-color:black;border-radius: 50%/50%; transform: translateX(-50%) translateY(-50%); line-height: 0.82 !important;}
body.iClassChords .cNote.cHide {opacity: 0 !important; }
body.iClassChords #waveHelper { top:0% !important; left:50% !important; color:white !important;transition: transform 1s, opacity 0.5s; transform: translateY(-107%) translateX(85%);}
body.iClassChords #conWrap.waveOnFlag2 #waveHelper {opacity: 1 !important;}
body.iClassChords #conWrap.waveOnFlag6 #waveHelper { top:5% !important; }
body.iClassChords .cLedger {display: none;}