body {
  background-color: #2e9afe;
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None; 
}

a {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: inherit;
  color: white;
  text-decoration: none;
}
a:active {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: inherit;
  color: white;
  text-decoration: none;
}
a:visited {
  color: white;
  font-family: Arial,Helvetica,sans-serif;
  text-decoration: none;
  font-weight: inherit;
}
a:hover {
  color: #ffff00;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: inherit;
  text-decoration: none;
}

button {
  all: unset;
  cursor: pointer;
}

#save_btn {
  position:absolute;
  width:41px;
  height:41px;
  margin-left: 552px;
  margin-top:490px;
  background-image: url(img/save_btn.png);
      z-index:15;
}
#save_btn:hover {
  background-image: url(img/save_btn_a.png);
}

#save_btn:active {     
 transform: scale(0.95);
}

#open_btn {
  position:absolute;
  width:41px;
  height:41px;
  margin-left: 601px;
  margin-top:490px;
  background-image: url(img/open_btn.png);
      z-index:15;
}
#open_btn:hover {
  background-image: url(img/open_btn_a.png);
}

#open_btn:active {     
 transform: scale(0.95);
}



#midibutton {
  position:absolute;
  width:41px;
  height:41px;
  margin-left: 650px;
  margin-top:490px;
  background-image: url(img/midi_btn.png);
      z-index:15;
}
#midibutton:hover {
  background-image: url(img/midi_btn_a.png);
}

#midibutton:active {     
 transform: scale(0.95);
}

#sonicpitaste {
  position: absolute;
  width:41px;
  height:41px;
  margin-top: 490px;
  margin-left: 698px;
  background-color:green;
  background-image: url(img/sonic.png);
    z-index:15;
}
#sonicpitaste:hover {
  background-image: url(img/sonic_a.png);
}

#sonicpitaste:active {     
 transform: scale(0.95);
}

#sonicpi {
	  -ms-user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
  user-select: text; /* Für moderne Browser */
  position: absolute;
  width: 653px;
  height: 25px;
  margin-top: 250px;
  margin-left: 60px;
  padding:10px;
  font-size:20px;
  background-color:white;
  border:2px solid black;
  z-index:12;
}


#kopierentaste {
	  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None; 
  
  position: absolute;
  width: 25px;
  height: 25px;
  margin-top: 262px;
  margin-left: 700px;
  z-index:15;
}

#violinschluessel {
  position: absolute;
  width:705px;
  height:125px;
  margin-top: 0px;
  margin-left: 50px;
  background-image: url(img/violinschluessel.png);
}




#notengrafik {
  position: absolute;
  width:2000px;
  height:125px;
  margin-top: 0px;
  margin-left: 110px;
    z-index:3;
}

#kreuzbanzeige {
  position: absolute;
  margin-top: -60px;
  margin-left: 710px;
  font-size: 40px;
  font-weight: bold;
  z-index:10;
}

#kreuztaste {
  position: absolute;
  width:43px;
  height:41px;
  margin-top: 380px;
  margin-left: 60px;
  background-image: url(img/kreuz_btn.png);
}
#kreuztaste:hover {
  background-image: url(img/kreuz_btn_a.png);
}

#kreuztaste:active {     
 transform: scale(0.95);
}

#btaste {
  position: absolute;
  width:43px;
  height:41px;
  margin-top: 380px;
  margin-left: 110px;
  background-image: url(img/b_btn.png);
}
#btaste:hover {
  background-image: url(img/b_btn_a.png);
}

#btaste:active {     
 transform: scale(0.95);
}

#leerentaste {
  position: absolute;
  width:74px;
  height:41px;
  margin-top: 380px;
  margin-left: 195px;
  background-image: url(img/leeren_btn.png);
}
#leerentaste:hover {
  background-image: url(img/leeren_btn_a.png);
}

#leerentaste:active {     
 transform: scale(0.95);
}

#melodiebutton {
  position: absolute;
  width:41px;
  height:41px;
  margin-top: 490px;
  margin-left: 502px;
  background-image: url(img/play_btn.png);
    z-index:10;
}
#melodiebutton:hover {
  background-image: url(img/play_btn_a.png);
}

#melodiebutton:active {     
 transform: scale(0.95);
}

#melodiebutton_end {
  position: absolute;
  width:41px;
  height:41px;
  margin-top: 490px;
  margin-left: 502px;
  background-image: url(img/stopp_btn.png);
    z-index:10;
}
#melodiebutton_end:hover {
  background-image: url(img/stopp_btn_a.png);
}

#melodiebutton_end:active {     
 transform: scale(0.95);
}



#loeschentaste {
  position: absolute;
  width:41px;
  height:41px;
  margin-top: 380px;
  margin-left: 419px;
  color:white;
  font-weight:bolder;
  font-size:30px;
  line-height:35px;
  text-align:center;
  background-image: url(img/klein_btn.png);
}
#loeschentaste:hover {
  background-image: url(img/klein_btn_a.png);
}

#loeschentaste:active {     
 transform: scale(0.95);
}




#viertel_btn {
  position: absolute;
  width:41px;
  height:41px;
  margin-top: 50px;
  margin-left: 345px;
  background-image: url(img/btn_viertel_a.png);
}
#viertel_btn:hover {
  background-image: url(img/btn_viertel_a.png);
}
#viertel_btn:active {     
 transform: scale(0.95);
}

#achtel_btn {
  position: absolute;
  width:41px;
  height:41px;
  margin-top: 50px;
  margin-left: 390px;
  background-image: url(img/btn_achtel.png);
}
#achtel_btn:hover {
  background-image: url(img/btn_achtel_a.png);
}
#achtel_btn:active {     
 transform: scale(0.95);
}


#sechzehntel_btn {
  position: absolute;
  width:41px;
  height:41px;
  margin-top: 50px;
  margin-left: 435px;
  background-image: url(img/btn_sechzehntel.png);
}
#sechzehntel_btn:hover {
  background-image: url(img/btn_sechzehntel_a.png);
}
#sechzehntel_btn:active {     
 transform: scale(0.95);
}

#halbe_btn {
  position: absolute;
  width:41px;
  height:41px;
  margin-top: 50px;
  margin-left: 480px;
  background-image: url(img/btn_halbe.png);
}
#halbe_btn:hover {
  background-image: url(img/btn_halbe_a.png);
}
#halbe_btn:active {     
 transform: scale(0.95);
}

#punktierte_btn {
  position: absolute;
  width:41px;
  height:41px;
  margin-top: 50px;
  margin-left: 525px;
  background-image: url(img/btn_punktierte.png);
}
#punktierte_btn:hover {
  background-image: url(img/btn_punktierte_a.png);
}
#punktierte_btn:active {     
 transform: scale(0.95);
}


#pianonotennamenan {
  position: absolute;
  width:134px;
  height:41px;
  margin-top: 380px;
  margin-left: 277px;
  background-image: url(img/notennamen_btn.png);
}
#pianonotennamenan:hover {
  background-image: url(img/notennamen_btn_a.png);
}

#pianonotennamenan:active {     
 transform: scale(0.95);
}


#pianonotennamenverbergen {
  position: absolute;
  margin-top: 217px;
  width: 2050px;
  height: 20px;
  background-color:#2e9afe;
  z-index:8;
}


#pianohintergrund {
  position: absolute;
    margin-top: 110px;
  width: 800px;
  height: 450px;
  background-color:#0066ff;
  z-index:2;
}





#piano {
  position: absolute;
  margin-top: 130px;
  margin-left: 50px;
  z-index:3;
}
.weissetaste {
  float:left;
  width:48px;
  height:230px;
  background-color:white;
  border: 1px solid black;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.schwarzetaste {
  position: absolute;
  width:27px;
  height:160px;
  background-color:black;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

#c4ktaste {
  margin-left: 35px;
}
#d4ktaste {
  margin-left: 85px;
}
#f4ktaste {
  margin-left: 185px;	
}
#g4ktaste {
  margin-left: 235px;
}
#a4ktaste {
  margin-left: 285px;
}
#c5ktaste {
  margin-left: 385px;
}
#d5ktaste {
  margin-left: 436px;
}
#f5ktaste {
  margin-left: 535px;
}
#g5ktaste {
  margin-left: 586px;
}
#a5ktaste {
  margin-left: 636px;
}

#uebung {
  font-family: Arial;
  margin-left: 14px;
  position: absolute;
  width: 800px;
  height: 600px;
  background-color: #0066ff;
  left: 50%;
  margin-top: 50px;
  margin-left: -400px;
}

#titel {
  font-weight: bold;
  color:#ffff00;
  font-size: 2.5em;
  position: absolute;
  margin-top: 45px;
  margin-left: 50px;
}





#copyright {
  position: absolute;
  width: 200px;
  margin-top: 570px;
  margin-left: 300px;
  font-size: 0.9em;
  text-align: center;
}