html{
font-family:'Open Sans',sans-serif;
}
body{
font-family:'Open Sans',sans-serif;
}
#gamebg{
position:absolute;
width:100%;
height:100%;
}
#bganims{
position:absolute;
z-index:20;
left:0px;
top:0px;
width:640px;
height:480.00px;
}
#staffimg{
position:absolute;
z-index:425;
left:156px;
top:70px;
width:344px;
height:192.00px;
display:none;
}
#notemarker{
position:absolute;
z-index:430;
left:156px;
top:70px;
width:344px;
height:192.00px;
display:none;
}
#notemarkerimg1{position:absolute;z-index:1;}
#notemarkerimg2{position:absolute;z-index:2;}
#notemarkerimg3{position:absolute;z-index:3;}
#notemarkerimg4{position:absolute;z-index:4;}
#welcometxt1{
position:absolute;
z-index:210;
left:28px;
top:26px;
width:424px;
height:20.00px;
text-align:left;
font-weight:700;
color:#000099;
font-size:17px;
letter-spacing:-.25px;
line-height:17px;
cursor:default;
}
#anim1{
position:absolute;
z-index:35;
left:220px;
top:142px;
width:12px;
height:14.00px;
display:none;
}
#gametitle{
position:absolute;
z-index:490;
left:0px;
top:0px;
width:640px;
height:170.00px;
}
#tnextbut{
position:absolute;
z-index:570;
left:270px;
top:200px;
width:100px;
height:30.00px;
color:#ffff00;
font-weight:600;
text-align:center;
cursor:pointer;
display:none;
background:radial-gradient(ellipse at center, #0000ff 0%, #000066 77%,#000000 100%);
border-radius:5px;
font-size:18px;
line-height:28px;
}
#tnextbut:hover{
color:#ff9900}
#tnextbut:active{
color:#ff9900}
#dynbut1{
position:absolute;
z-index:570;
left:260px;
top:200px;
width:120px;
height:30.00px;
color:#ffff00;
font-weight:600;
text-align:center;
cursor:pointer;
background:radial-gradient(ellipse at center, #0000ff 0%, #000066 77%,#000000 100%);
border-radius:5px;
font-size:18px;
line-height:28px;
}
#dynbut1:hover{
color:#ff9900}
#dynbut1:active{
color:#ffffff}
#sequencetrigger{
position:absolute;
z-index:505;
left:340px;
top:288px;
width:120px;
height:35.00px;
background-image:url('../img/but/hearpattern/d.png'); background-repeat:no-repeat;cursor:pointer;
display:none;
font-size:20px;
line-height:40px;
}
#sequencetrigger:hover{
background-image:url('../img/but/hearpattern/h.png'); background-repeat:no-repeat;cursor:pointer;}
#sequencetrigger:active{
background-image:url('../img/but/hearpattern/c.png'); background-repeat:no-repeat;cursor:pointer;}
#audiotrigger{
position:absolute;
z-index:505;
left:180px;
top:288px;
width:120px;
height:35.00px;
background-image:url('../img/but/heartriad/d.png'); background-repeat:no-repeat;cursor:pointer;
display:none;
font-size:18px;
line-height:30px;
}
#audiotrigger:hover{
background-image:url('../img/but/heartriad/h.png'); background-repeat:no-repeat;cursor:pointer;}
#audiotrigger:active{
background-image:url('../img/but/heartriad/c.png'); background-repeat:no-repeat;cursor:pointer;}
#dynbut3{
position:absolute;
z-index:570;
left:260px;
top:200px;
width:120px;
height:30.00px;
color:#ffff00;
font-weight:600;
text-align:center;
cursor:pointer;
display:none;
background:radial-gradient(ellipse at center, #0000ff 0%, #000066 77%,#000000 100%);
border-radius:5px;
font-size:18px;
line-height:28px;
}
#dynbut3:hover{
color:#ff9900}
#dynbut3:active{
color:#ffffff}
#qnextbut{
position:absolute;
z-index:570;
left:508px;
top:212px;
width:100px;
height:30.00px;
color:#ffff00;
font-weight:600;
text-align:center;
cursor:pointer;
display:none;
background:radial-gradient(ellipse at center, #0000ff 0%, #000066 77%,#000000 100%);
border-radius:5px;
font-size:18px;
line-height:28px;
}
#qnextbut:hover{
color:#ff9900}
#qnextbut:active{
color:#ff9900}
#startbut{
position:absolute;
z-index:570;
left:270px;
top:200px;
width:100px;
height:30.00px;
color:#ffff00;
font-weight:600;
text-align:center;
cursor:pointer;
display:none;
background:radial-gradient(ellipse at center, #0000ff 0%, #000066 77%,#000000 100%);
border-radius:5px;
font-size:18px;
line-height:28px;
}
#startbut:hover{
color:#ff9900}
#startbut:active{
color:#ff9900}
#gamescore{
position:absolute;
z-index:350;
left:20px;
top:224px;
width:100px;
height:16.00px;
color:#990000;
font-weight:700;
text-align:left;

display:none;
font-size:16px;
line-height:16px;
cursor:default;
}
#gamescoretit{float:left;}
#gamescoretxt{float:right;}
#questioncounter{
position:absolute;
z-index:350;
left:20px;
top:200px;
width:100px;
height:16.00px;
color:#990000;
font-weight:700;
text-align:center;

display:none;
font-size:16px;
letter-spacing:.5px;
line-height:16px;
cursor:default;
}
#questioncountertit{float:left;}
#questioncountertxt{float:right;}
#instructionstxt1{
position:absolute;
z-index:345;
left:204px;
top:327px;
width:72px;
height:18.00px;
text-align:left;
font-weight:600;
color:#FAC200;
display:none;
font-size:15px;
line-height:15px;
cursor:default;
}
#instructionstxt3{
position:absolute;
z-index:246;
left:488px;
top:94px;
width:142px;
height:96.00px;
text-align:left;
font-weight:600;
color:#000066;
display:none;
font-size:17px;
line-height:23px;
cursor:default;
}
#instructionstxt2{
position:absolute;
z-index:246;
left:20px;
top:16px;
width:492px;
height:44.00px;
text-align:left;font-weight:700;color:#000099;
display:none;
font-size:16px;
line-height:22px;
cursor:default;
}
#instr1{
position:absolute;
z-index:300;
left:0px;
top:254px;
width:640px;
height:104.00px;
}
#tutorimg0{
position:absolute;
z-index:355;
left:0px;
top:0px;
width:640px;
height:480.00px;
border-radius:5px;
font-size:20px;
line-height:20px;
cursor:default;
}
#tutorimg1{
position:absolute;
z-index:355;
left:0px;
top:0px;
width:640px;
height:480.00px;
display:none;
border-radius:5px;
font-size:20px;
line-height:20px;
cursor:default;
}
#tutorimg2{
position:absolute;
z-index:355;
left:0px;
top:0px;
width:640px;
height:480.00px;
display:none;
border-radius:5px;
font-size:20px;
line-height:20px;
cursor:default;
}
#againbut{
position:absolute;
z-index:515;
left:260px;
top:168px;
width:120px;
height:30.00px;
color:#ffff00;
font-weight:600;
text-align:center;
cursor:pointer;
display:none;
background:radial-gradient(ellipse at center, #0000ff 0%, #000066 77%,#000000 100%);
border-radius:5px;
font-size:18px;
line-height:28px;
}
#againbut:hover{
color:#ff9900}
#againbut:active{
color:#ffffff}
#quitbut{
position:absolute;
z-index:515;
left:260px;
top:211px;
width:120px;
height:30.00px;
color:#ffff00;
font-weight:600;
text-align:center;
cursor:pointer;
display:none;
background:radial-gradient(ellipse at center, #0000ff 0%, #000066 77%,#000000 100%);
border-radius:5px;
font-size:18px;
line-height:28px;
}
#quitbut:hover{
color:#ff9900}
#quitbut:active{
color:#ffffff}
#completetxt1{
position:absolute;
z-index:410;
left:175px;
top:104px;
width:290px;
height:52.00px;
color:#000099;
font-weight:700;
text-align:center;
margin:0 auto;
display:none;
font-size:20px;
line-height:26px;
cursor:default;
}
#completeimg2{
position:absolute;
z-index:515;
left:0px;
top:0px;
width:640px;
height:80.00px;
color:#000099;
font-weight:700;
text-align:center;
margin:0 auto;
display:none;
cursor:default;
}
#quitimg1{
position:absolute;
z-index:515;
left:0px;
top:0px;
width:640px;
height:480.00px;
color:#000099;
font-weight:700;
text-align:center;
margin:0 auto;
display:none;
cursor:default;
}
#answerbuts{
position:absolute;
z-index:500;
left:0px;
top:40px;
width:640px;
height:300.00px;
text-align:center;

display:none;
}
#qdataQ{
position:absolute;
z-index:551;
left:156px;
top:70px;
width:344px;
height:192.00px;
border-radius:5px;
}
#qdataQimg1{position:absolute;z-index:901;}
#qdataQimg2{position:absolute;z-index:902;}
#qdataQimg3{position:absolute;z-index:903;}
#qdataQimg4{position:absolute;z-index:904;}
#qdataQimg5{position:absolute;z-index:905;}
#qdataQimg6{position:absolute;z-index:906;}
#qdataQimg7{position:absolute;z-index:907;}
#qdataQimg8{position:absolute;z-index:908;}
#qdataQimg9{position:absolute;z-index:909;}
#qdataQimg10{position:absolute;z-index:910;}
#qdataQimg11{position:absolute;z-index:911;}
#qdataQimg12{position:absolute;z-index:912;}
#qdataQimg13{position:absolute;z-index:913;}
#qdataQimg14{position:absolute;z-index:914;}
#qdataQimg15{position:absolute;z-index:915;}
#qdataQimg16{position:absolute;z-index:916;}
#qdataQimg17{position:absolute;z-index:917;}
#qdataQimg18{position:absolute;z-index:918;}
#qdataQimg19{position:absolute;z-index:919;}
#qdataQimg20{position:absolute;z-index:920;}
#qdataA{
position:absolute;
z-index:551;
left:156px;
top:70px;
width:344px;
height:192.00px;
border-radius:5px;
}
#qdataAimg1{position:absolute;z-index:901;}
#qdataAimg2{position:absolute;z-index:902;}
#qdataAimg3{position:absolute;z-index:903;}
#qdataAimg4{position:absolute;z-index:904;}
#qdataAimg5{position:absolute;z-index:905;}
#qdataAimg6{position:absolute;z-index:906;}
#qdataAimg7{position:absolute;z-index:907;}
#qdataAimg8{position:absolute;z-index:908;}
#qdataAimg9{position:absolute;z-index:909;}
#qdataAimg10{position:absolute;z-index:910;}
#qdataAimg11{position:absolute;z-index:911;}
#qdataAimg12{position:absolute;z-index:912;}
#qdataAimg13{position:absolute;z-index:913;}
#qdataAimg14{position:absolute;z-index:914;}
#qdataAimg15{position:absolute;z-index:915;}
#qdataAimg16{position:absolute;z-index:916;}
#qdataAimg17{position:absolute;z-index:917;}
#qdataAimg18{position:absolute;z-index:918;}
#qdataAimg19{position:absolute;z-index:919;}
#qdataAimg20{position:absolute;z-index:920;}
#midistatus{
position:absolute;
z-index:590;
right:0px;
top:341px;
width:120px;
height:16.00px;
color:#00ff00;
font-family:sans-serif;
font-weight:700;
text-align:center;
margin:0 auto;
background-color:#000000;
display:none;
font-size:12px;
line-height:16px;
cursor:default;
}

.fly{
position:absolute;
width:20px;
height:25px;
}
.notebut{
cursor:pointer !important;
outline:none;
-webkit-tap-highlight-color:transparent;
}
.butkw{
width:30px;
height:115px;
}
.butkb{
width:22px;
height:70px;
}
#keyholder{
position:relative;
z-index:2;
left:0px;
top:104px;
height:114px;
}
#instr1img1{position:absolute;z-index:1;}
#k41{position:absolute;z-index:51;left:-3px;top:0.0px;}
#k42{position:absolute;z-index:61;left:13.5px;top:0.0px;}
#k43{position:absolute;z-index:51;left:25px;top:0.0px;}
#k44{position:absolute;z-index:61;left:41.5px;top:0.0px;}
#k45{position:absolute;z-index:51;left:53px;top:0.0px;}
#k46{position:absolute;z-index:71;left:69.5px;top:0.0px;}
#k47{position:absolute;z-index:51;left:81px;top:0.0px;}
#k48{position:absolute;z-index:51;left:109px;top:0.0px;}
#k49{position:absolute;z-index:61;left:126.5px;top:0.0px;}
#k50{position:absolute;z-index:51;left:137px;top:0.0px;}
#k51{position:absolute;z-index:61;left:154.5px;top:0.0px;}
#k52{position:absolute;z-index:51;left:165px;top:0.0px;}
#k53{position:absolute;z-index:51;left:193px;top:0.0px;}
#k54{position:absolute;z-index:61;left:209.5px;top:0.0px;}
#k55{position:absolute;z-index:51;left:221px;top:0.0px;}
#k56{position:absolute;z-index:61;left:237.5px;top:0.0px;}
#k57{position:absolute;z-index:51;left:249px;top:0.0px;}
#k58{position:absolute;z-index:71;left:265.5px;top:0.0px;}
#k59{position:absolute;z-index:51;left:277px;top:0.0px;}
#k60{position:absolute;z-index:51;left:305px;top:0.0px;}
#k61{position:absolute;z-index:61;left:322.5px;top:0.0px;}
#k62{position:absolute;z-index:51;left:333px;top:0.0px;}
#k63{position:absolute;z-index:61;left:350.5px;top:0.0px;}
#k64{position:absolute;z-index:51;left:361px;top:0.0px;}
#k65{position:absolute;z-index:51;left:389px;top:0.0px;}
#k66{position:absolute;z-index:61;left:405.5px;top:0.0px;}
#k67{position:absolute;z-index:51;left:417px;top:0.0px;}
#k68{position:absolute;z-index:61;left:433.5px;top:0.0px;}
#k69{position:absolute;z-index:51;left:445px;top:0.0px;}
#k70{position:absolute;z-index:71;left:461.5px;top:0.0px;}
#k71{position:absolute;z-index:51;left:473px;top:0.0px;}
#k72{position:absolute;z-index:51;left:501px;top:0.0px;}
#k73{position:absolute;z-index:61;left:518.5px;top:0.0px;}
#k74{position:absolute;z-index:51;left:529px;top:0.0px;}
#k75{position:absolute;z-index:61;left:546.5px;top:0.0px;}
#k76{position:absolute;z-index:51;left:557px;top:0.0px;}
#k77{position:absolute;z-index:51;left:585px;top:0.0px;}
#k78{position:absolute;z-index:61;left:601.5px;top:0.0px;}
#k79{position:absolute;z-index:51;left:613px;top:0.0px;}

.notebut img{
position:absolute;
}
.notebut img.notehint{
display:none !important;
}
.notebut.hint img.notehint{
display:block !important;
}
.notebut img:nth-child(1){
display:block !important;
}
.notebut.hover img:nth-child(1),
.notebut.click img:nth-child(1){
display:block !important;
}
.notebut.hover img:nth-child(2),
.notebut.click img:nth-child(2){
display:none !important;
}
.notebut.hover:hover img:nth-child(1),
.notebut.click:active img:nth-child(1){
display:none !important;
}
.notebut.hover:hover img:nth-child(2),
.notebut.click:active img:nth-child(2){
display:block !important;
}
.notebut.hoverclick img:nth-child(1){
display:block !important;
}
.notebut.hoverclick img:nth-child(2){
display:none !important;
}
.notebut.hoverclick img:nth-child(3){
display:none !important;
}
.notebut.hoverclick:hover img:nth-child(1){
display:none !important;
}
.notebut.hoverclick:hover img:nth-child(2){
display:block !important;
}
.notebut.hoverclick:hover img:nth-child(3){
display:none !important;
}
.notebut.hoverclick:active img:nth-child(1){
display:none !important;
}
.notebut.hoverclick:active img:nth-child(2){
display:none !important;
}
.notebut.hoverclick:active img:nth-child(3){
display:block !important;
}
.notebut.hoverclick.midiinput img:nth-child(1){
display:none !important;
}
.notebut.hoverclick.midiinput img:nth-child(2){
display:none !important;
}
.notebut.hoverclick.midiinput img:nth-child(3){
display:block !important;
}
#midistatus{
text-transform:capitalize;}
#fwbut{
position:absolute;
z-index:999;
width:40px;
height:40px;
left:0px;
top:440px;
background-color:rgba(255,255,255,0.5);
display:none;
}