@charset "utf-8";
body, ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper{
	
}
.whiteKey{
	display:inline-block;
	width:4%;
	height:160px;
	background-color:rgba(255,255,255,1.00);
	color:rgba(0,0,0,1.00);
}
.blackKey{
	display:inline-block;
	width:3%;
	height:80px;
	background-color:rgba(0,0,0,1.00);
	color:rgba(255,255,255,1.00);
}
.game-container{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
.playArea{
	padding:8px;
	height:760px;
	overflow:hidden;
}
.status-panel{
	position:relative;
	z-index:900;
	height:110px;
	margin-bottom:8px;
}
.overlayResults{
	position:relative;
	margin-top:-790px;
	width:360px;
	margin-right:auto;
	margin-left:auto;
  	min-height:760px;
	padding-top:16px;
	text-shadow:0px 0px rgba(0,0,0,1.00);
	-webkit-transition:margin-top 1s;
	-moz-transition:margin-top 1s;
	-o-transition:margin-top 1s;
	transition:margin-top 1s;
}
.overlayResults-change{
	margin-top:0px;
}
.congratulationPanel{
	width:580px;
	height:100px;
	background-color:rgba(83,208,137,1.00);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-width:11px;
	border-style:solid;
	border-color:rgba(255,255,255,1.00);
	border-radius:8px;
	padding:8px;
	margin-top:-20px;
	margin-bottom:18px;
}
.currentResults{
	width:350px;
	height:114px;
	background-color:rgba(93,153,209,1.00);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-width:11px;
	border-style:solid;
	border-color:rgba(255,255,255,1.00);
	border-radius:8px;
	padding:8px;
	margin-bottom:18px;
}
.resultsSub{
	position:relative;
	display:inline-block;
	width:180px;
}
.bestResults{
	width:350px;
	height:114px;
	background-color:rgba(246,142,86,1.00);
	background-image:url(../images/trophy.png);
	background-position:right;
	background-repeat:no-repeat;
	background-size:114px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-width:11px;
	border-style:solid;
	border-color:rgba(255,255,255,1.00);
	border-radius:8px;
	padding:8px;
}
.resultsHeaderLeft{
	position:relative;
	display:inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:36px;
	line-height:40px;
	vertical-align:top;
	font-weight:700;
	padding-bottom:10px;
	color:rgba(0,0,0,1.00);
}
.resultsText{
	position:relative;
	display:inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:24px;
	line-height:36px;
	vertical-align:top;
	font-weight:500;
	color:rgba(0,0,0,1.00);
	margin-left:10px;
}
.resultsScoreText{
	text-align:left;
	font-family: 'Roboto', sans-serif;
	font-size:48px;
	font-weight:900;
	color:rgba(0,0,0,1.00);
	margin-top:-68px;
	margin-right:20px;
}
.resultsRegText{
	text-align:left;
	font-family: 'Roboto', sans-serif;
	font-size:22px;
	font-weight:500;
	color:rgba(0,0,0,1.00);
	padding-bottom:6px;
}
.resultsMedText{
	text-align:left;
	font-family: 'Roboto', sans-serif;
	font-size:22px;
	font-weight:700;
	color:rgba(0,0,0,1.00);
	padding-top:6px;
}
.resultsBlkText{
	text-align:left;
	font-family: 'Roboto', sans-serif;
	font-size:22px;
	font-weight:900;
	color:rgba(0,0,0,1.00);
	padding-bottom:6px;
}
.spanPadding{
	padding-right:20px;
}
.displayGroup{
	z-index:6;
	position:relative;
	width:100%;
    margin-left: auto;
    margin-right: auto;
	background-color:rgba(255,255,255,1.00);
	border-bottom:inset rgba(163,163,163,1.00) 2px;
	padding:8px;
}
.scoreBox{
	border-top:rgba(0,0,0,1.00) 3px solid;
	border-right:rgba(0,0,0,1.00) 3px solid;
	border-bottom:rgba(0,0,0,1.00) 3px solid;
	height:80px;
	vertical-align:middle;
}
.overlayTesting{
	margin-top:40px;
}
.overlayStart{
	position:relative;
	margin-top:60px;
	height:600px;
	background-color:rgba(197,126,127,0.0);
	-webkit-transition:margin-top 1s;
	-moz-transition:margin-top 1s;
	-o-transition:margin-top 1s;
	transition:margin-top 1s;
}
.overlatStartCleff{
	width:100%;
	height:500px;
	background-image:url(../images/clave-music-note-dark.svg);
	background-position:200px 10px;
	background-repeat:no-repeat;
	background-size:160px;
}
.overlayStartBold{
	position:absolute;
	width:200px;
	height:80px;
	top:96px;
	left:380px;
	font-family: 'Roboto', sans-serif;
	font-size:76px;
	font-weight:900;
	color:rgba(0,0,0,.65);
}
.overlayStartMed{
	position:absolute;
	width:200px;
	height:80px;
	top:153px;
	left:544px;
	font-family: 'Roboto', sans-serif;
	font-size:76px;
	font-weight:500;
	color:rgba(0,0,0,.65);
}
.overlayStart-change{
	margin-top:-600px;
}
.questionAnswerArea{
	width:100%;
	margin-right:auto;
	margin-left:auto;
}
.answer-text-cursor{
	cursor:pointer;
}
.answer-text-cursor-disabled{
	cursor:default;
}
.questionAnswerArea{
	width:80%;
	margin-right:auto;
	margin-left:auto;
}
.question-standard-text{
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight:400;
	color:rgba(0,0,0,1.00);
	margin-bottom:14px;
}
.answerSelected{
	border:rgba(96,203,135,1.00);
	border-width:medium;
	border-style:solid;
	border-radius:6px;
	font-size:16px;
	margin-top:4px;
}
.answerChosen{
	border:rgba(0,0,0,1.00);
	border-width:medium;
	border-style:solid;
	border-radius:6px;
	font-size:16px;
	margin-top:4px;
}
.answerCorrect{
	border:rgba(186,61,23,1.00);
	border-width:medium;
	border-style:solid;
	border-radius:6px;
	font-size:16px;
	margin-top:4px;
}
.answerFeedback{
	font-size:10px;
}
.question-header-text{
	font-family: 'Roboto', sans-serif;
	font-size:30px;
	font-weight:500;
	color:rgba(0,0,0,1.00);
	margin-bottom:14px;
}
.question-header-correct{
	font-family: 'Roboto', sans-serif;
	font-size:30px;
	font-weight:500;
	color:rgba(0,146,69,1.00);
	margin-bottom:14px;
	margin-left:24px;
}
.question-header-incorrect{
	font-family: 'Roboto', sans-serif;
	font-size:30px;
	font-weight:500;
	color:rgba(193,39,45,1.00);
	margin-bottom:14px;
	margin-left:24px;
}
.basicButtonSize{
    width: 200px;
    height: 51px;
	line-height:50px;
	text-align:center;
	vertical-align:middle;
	font-family: 'Roboto', sans-serif;
	font-size:24px;
	font-weight:400;
	color:rgba(0,0,0,.5);
	background-color:rgba(255,255,255,0);
	border-width:2px;
	border-style:solid;
	border-color:rgba(0,0,0,.5);
	border-radius:6px;
}
.nextQuestionButton{
	cursor:pointer;
}
.nextQuestionButton:hover, nextQuestionButton:focus{
	
}
.nextQuestionButton:active{
	
}
.nextQuestionButton-disabled{
	cursor:default;
}
.viewResultsButton{
	cursor:pointer;
}
.nextSongButton{
	cursor:pointer;
}
.answerButton{
	cursor:pointer;
}
.answerButton:hover, .answerButton:focus{
	
}
.answerButton:active{
	
}
.answerButton-disabled{
	cursor:default;
}

.nextButton{
	cursor:pointer;
}
.nextButton:hover, .nextButton:focus{
	
}
.nextButton:active{
	
}
.nextButton-disabled{
	cursor:default;
}
.startButton{
	cursor:pointer;
}
.quizButton{
	cursor:pointer;
}
.quizButton-start{
	cursor:pointer;
}
.infoButtonPosition{
	position:absolute;
	left:26px;
	top:4px;
	z-index:1000;
}
.audioSelectButton, .theCoin{
    background-image: url('../images/audioSprites.png');
	background-repeat:no-repeat;
}
.audioSelectButton{
    width: 36px;
    height: 34px;
	background-position:-10px -10px;
	cursor:pointer;
	z-index:1000;
	margin-top:4px;
	left:30px;
	top:10px;
	position:absolute;
}
.audioSelectButton-change{
    width: 34px;
    height: 34px;
	background-position:-50px -10px;
}
.scoreText{
	font-family: 'Roboto', sans-serif;
	font-size:18px;
	font-weight:500;
	position:absolute;
	right:10px;
	top:20px;
}
.pointsInPlayBlock{
	width:220px;
	margin-left:668px;
	margin-top:-100px;
	margin-bottom:30px;
}
.pointsText{
	font-family: 'Roboto', sans-serif;
	font-size:20px;
	font-weight:900;
	text-align:left;
	color:#555555;
}
.pointsTextSub{
	font-family: 'Roboto', sans-serif;
	font-size:40px;
	font-weight:500;
	text-align:left;
	color:#555555;
}
.pointsTextBold{
	font-family: 'Roboto', sans-serif;
	font-size:48px;
	font-weight:900;
	text-align:left;
	color:#555555;
}
.blinkingText{
	animation: blinkText .5s linear 2;
}
.scoreGroup{
	position:absolute;
	width:100px;
	margin-left:452px;
	top:18px;
}
.playButtonLayout{
	position:absolute;
	right:20px;
	top:21px;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}
.quizButtonLayout{
	position:absolute;
	right:440px;
	top:460px;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}
.wrongTextBox{
	margin-top:-42px;
}
.play-button {
    height: 90px;
    width: 90px;    
    background-color: rgba(0, 0, 0, 0.0);
    border-radius: 10px;
	border-style:solid;
	border-width:2px;
    border-color: rgba(0, 0, 0, .5);
    position: relative;
}

.play-button:hover {
	border-width:4px;
    height: 89px;
    width: 89px;
}

.play-button:after {
    content: "";
    margin-left:29px;
    border-style: solid;
    border-width: 42px 0 42px 36px;
    border-color: transparent transparent transparent rgba(0, 0, 0, .5);
}

.note_ring{
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: 3; 
    animation: pulsate 1.0s ease-out;
    animation-iteration-count: 1;
    opacity: 0.0
}
/* webkit - safari, chrome */
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    12% {opacity: 1.0;}
    24% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
    25% {-webkit-transform: scale(04, 0.4); opacity: 0.0;}
    37% {opacity: 1.0;}
    49% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
    50% {-webkit-transform: scale(0.4, 0.4); opacity: 0.0;}
    75% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.0, 1.0); opacity: 1.0;}
}
/* no vendor prefix - firefox */
@keyframes pulsate {
    0% { transform: scale(0.4, 0.4); opacity: 0.0; }
    12% { opacity: 1.0; }
    24% { transform: scale(1.5, 1.5); opacity: 0.0; }
    25% { transform: scale(0.4, 0.4); opacity: 0.0; }
    37% { opacity: 1.0; }
    49% { transform: scale(1.5, 1.5); opacity: 0.0; }
    50% { transform: scale(0.4, 0.4); opacity: 0.0; }
    75% { opacity: 1.0; }
    100% { transform: scale(1.0, 1.0); opacity: 1.0; }
}
@keyframes blinkText {
	30% { opacity: 0; }
	50% { opacity: 0; }
	51% { opacity: 1; }
	100% { opacity: 1; }
}

@media (min-width:768px) {
.overlayStartBold{
	top:88px;
	left:220px;
}
.overlayStartMed{
	top:148px;
	left:386px;
}
.quizButtonLayout{
	right:340px;
	top:430px;
}
.basicButtonSize{
    width: 140px;
    height: 40px;
	line-height:38px;
	text-align:center;
	vertical-align:middle;
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight:400;
	color:rgba(0,0,0,.5);
	background-color:rgba(255,255,255,0);
	border-width:2px;
	border-style:solid;
	border-color:rgba(0,0,0,.5);
	border-radius:6px;
}
.scoreGroup{
	position:absolute;
	width:100px;
	margin-left:344px;
	top:18px;
}
.pointsInPlayBlock{
	width:220px;
	margin-left:516px;
	margin-top:-100px;
	margin-bottom:30px;
}
}

@media (min-width:992px) {
.playButtonLayoutStart{
	right:390px;
	top:380px;
}
.quizButtonLayout{
	right:390px;
	top:440px;
}
.game-container{
	width:920px;
	margin-left:auto;
	margin-right:auto;
}
.scoreGroup{
	position:absolute;
	width:100px;
	margin-left:360px;
	top:18px;
}
.basicButtonSize{
    width: 140px;
    height: 40px;
	line-height:38px;
	text-align:center;
	vertical-align:middle;
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight:400;
	color:rgba(0,0,0,.5);
	background-color:rgba(255,255,255,0);
	border-width:2px;
	border-style:solid;
	border-color:rgba(0,0,0,.5);
	border-radius:6px;
}
.pointsInPlayBlock{
	width:220px;
	margin-left:540px;
	margin-top:-100px;
	margin-bottom:30px;
}
}

@media (min-width:1200px) {
.game-container{
	width:1140px;
	margin-left:auto;
	margin-right:auto;
}
.overlayStartBold{
	top:96px;
	left:380px;
}
.overlayStartMed{
	top:153px;
	left:544px;
}
.basicButtonSize{
    width: 200px;
    height: 51px;
	line-height:50px;
	text-align:center;
	vertical-align:middle;
	font-family: 'Roboto', sans-serif;
	font-size:24px;
	font-weight:400;
	color:rgba(0,0,0,.5);
	background-color:rgba(255,255,255,0);
	border-width:2px;
	border-style:solid;
	border-color:rgba(0,0,0,.5);
	border-radius:6px;
}
.playButtonLayoutStart{
	right:440px;
	top:380px;
}
.quizButtonLayout{
	right:440px;
	top:460px;
}
.pointsInPlayBlock{
	width:220px;
	margin-left:668px;
	margin-top:-100px;
	margin-bottom:30px;
}
.scoreGroup{
	position:absolute;
	width:100px;
	margin-left:780px;
	top:18px;
}
}