@charset "utf-8";
@font-face {
	font-family: 'MusiSync'; /*a name to be used later*/
	src: url("../font/MusiSync.ttf"); /*URL to font*/
}

@font-face {
	font-family: 'Entypo'; /*a name to be used later*/
	src: url("../font/Entypo.otf"); /*URL to font*/
}

html, body {
	margin: 0px;
	padding: 0px;
	border: 0px;
	color: #000;
	background: #fff;
}
html, body, p, th, td, li, dd, dt {
	font: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em ; }
h4 { font-size: 1.0em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.8em; }
/*
a:link { color: #00f; }
a:visited { color: #009; }
a:hover { color: #06f; }
a:active { color: #0cf; }
*/
label{
	font-size: 24px;
}

.btn{
	border: 5px solid #000065;
	background-color: #8263FF;
	padding: 10px;
	font-family: 'Entypo';
	font-size: 64px;
	color: #EAEAEA;
}
.btn:hover{
	background-color: #5A47B7;
	color: #CACACA;	
}
.btn:active{
	background-color: #473891;
	color: #B3B3B3;	
}
.btn.disabled{
	background-color: #473891;
	color: #B3B3B3;	
}
.btn.round{
	position: relative;
	border-radius: 50%;
	width:64px;
	height:64px;	
	font-size: 64px;
	text-align: center;
	padding-top: 0px;
	bottom: 20px;	
}
.innerButton{
   position: relative;
	top:-20px;
}

.popup{
	border: 5px solid #000065;
	background-color: #8263FF;
	color: #EAEAEA;
	padding: 10px;
	position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
	display: none;
	padding-top:20px;
	z-index:999;
}
	.popup.start{
		border: 5px solid green;
		background-color: lightgreen;
		color: black;
		position: fixed;
		top: 400px;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 500px;
		height: 250px;
	}

.btclose{
	position:absolute;
	top: 4px;
    right: 3px;
    background: none;
    border: none;
	color: #EAEAEA;	
}
	.btclose.start{
		color: black;
	}
.btclose:hover{
	color: #CACACA;	
}
.btclose:active{
	color: #B3B3B3;	
}

#lb_percentage{
	position: relative;
	top: -27px;
    left: 127px;
}
#lb_greenLine{
	display: inline-block;
	background: green;
	top: 5px;
	left:5px;
	width: 50px;
	height:10px;
    margin-left: -35px;	
}
#lb_redline{
	display: inline-block;
	background: red;
	top: 5px;
	left:5px;
	width: 250px;
	height:10px;
    margin-left: -35px;
    z-index: 100;
    margin-right: 10px;
	z-index: 100;
}
#lb_invisibleLine{
	display: inline-block;
    background: yellow;
    top: 5px;
    left: 5px;
    width: 0px;
    height: 10px; 
	margin-left: 30px;
}

.right{
    text-align: right;
}

.header{ 
	height: 1em;   
	font-size:2em;
	display: flex;
	align-items:center;
    justify-content:center;
	margin-bottom: 60px;
}
 
.gameselectblock{
	 /*padding: 75px;*/
	 Margin-top: 5px;
	 /*outline: solid 1px black;*/
}
.container-center{
    align-items: center;
    align-content: center;
    text-align: center;
}
.notenameplay{
	font-size: 48px;
	font-weight: 150;
}

#lb_correct{
	border: 1px solid green;
	padding: 10px;
}
#lb_incorrect{
	border: 1px solid red;
	padding: 10px;
}

.notebarG{
	position: relative;
	height: 200px;
	width: 500px;
	background-image: url("../img/NotebarG.png");
	background-repeat: no-repeat;	
    display: inline-block;
    line-height: normal;
    vertical-align: middle;	
}

.notebarGLarge{
	position: relative;
	height: 200px;
	width: 1200px;
	background-image: url("../img/NotebarG - long.png");
	background-repeat: no-repeat;				
}

.notebarGF{
	position: relative;
	height: 400px;
	width: 500px;
	background-image: url("../img/NotebarGF.png");
	background-repeat: no-repeat;
    display: inline-block;
    line-height: normal;
    vertical-align: middle;		
}

.notebarGFLarge{
	position: relative;
	height: 400px;
	width: 1200px;
	background-image: url("../img/NotebarGF - long.png");
	background-repeat: no-repeat;				
}

.note{
	position: absolute;
	font-family: 'MusiSync';
	font-size: 120px;
	left: 200;
	top: 90;
	font-weight: 200;
}
.notename{
	position: absolute;				
	font-size: 24px;
	left: 200;
	top: 90;
	font-weight: 200;
}

.fill{ 
	height: 100px;   
	width: 47%;
    margin: 5px;
}
.quizButton{ 
	font-size: 24px;
}
.quarter{ 
	width: 25%;  
}

.noteContainer{}


.piano{
	position: absolute;
	bottom: 10px;
}
.whiteKey{	
	display: inline-block;
	width: 15px;
	height: 50px;
	border: 1px solid black;
	background: white;
	margin-left: -5px;
	width: 28px;
    height: 65px;
    padding-top: 40px;
    font-size: 20px;
}	
	.whiteKey.show{	
		background: green;
	}
	.whiteKey.played{	
		background: blue;
	}
.blackKey{
	display: inline-block;
	position: fixed;
	width: 18px;
	height: 40px;
	border: 1px solid black;
	background: black;
	margin-left: -14px;
}	
	.blackKey.show{	
		background: green;
	}
	.blackKey.played{	
		background: blue;
	}
[id*="keys-"] {
    display: contents;
}



@media only screen and (max-width: 1480px) {
	#keys-intro{ display: none; }
	#keys-outro{ display: none; }
	#keys-C1{ display: none; }
	#keys-C7{ display: none; }
	
	/* body { */
		/* background-color: yellow; */
	/* } */
}

@media only screen and (max-width: 987px) {
	#keys-intro{ display: none; }
	#keys-outro{ display: none; }
	#keys-C1{ display: none; }
	#keys-C7{ display: none; }
	
	#keys-C6{ display: none; }
	
	
	/* body { */
		/* background-color: lightblue; */
	/* } */
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
	.header{ 
		height: 1em;   
		font-size:2em;
		display: flex;
		align-items:center;
		justify-content:center;
		margin-bottom: 25px;
	}
	.innerButton{
	   top: -5px;
	}
}

@media only screen and (max-width: 795px) {
	#keys-intro{ display: none; }
	#keys-outro{ display: none; }
	#keys-C1{ display: none; }
	#keys-C7{ display: none; }
	
	#keys-C2{ display: none; }
	
	#keys-C5{ display: none; }
	#keys-C6{ display: none; }	
	
	/* body { */
		/* background-color: green; */
	/* } */
}