#myContainer {
  width: 336px;
  height: 80px;
  position: relative;
  background: #cccccc;
  border: solid black 1px;
  left: 0px;
}
#middleC {
	width: 10px;
	height: 10px;
	position: absolute;
	left: 236px;
	top: 85 px;
	background: red;
	border-radius: 100%;
}
#Answer {
  width: 336px;
  height: 80px;
  position: relative;
  background: #cccccc;
  border: solid black 1px;
  left: 0px;
}
#Question {
  width: 336px;
  height: 80px;
  position: relative;
  background: #cccccc;
  font-weight: bold;
  /**border: solid black 1px;**/
  text-align: center;
  left: 0px;
}
.whitekey {
  width: 16px;
  height: 80px;
  position: absolute;
  background-color: white;
  border: solid black 1px;  
}
.red {
  width: 16px;
  height: 80px;
  position: absolute;
  background-color: #ff6666;
  border: solid black 1px;
}

.blackkey {
  width: 10px;
  height: 50px;
  position: absolute;
  background-color: black;
  border: solid black 1px;  
}
.darkred {
  width: 10px;
  height: 50px;
  position: absolute;
  background-color: #990000;
  border: solid black 1px;
}

.texts {
  width: 336px;
  height: 50px;
  position: relative;
  left: 0px;
}

#buttons {
  width: 336px;
  height: 50px;
  position: relative;
  left: 0px;
}

.choices {
  width: 336px;
  height: 160px;
  position:relative;
  left: 10px;
  text-align: center;
}

#choice1 {
  width: 260px;
  height: 150px;
  position: absolute;
  left: 10px;
  border: solid black 1px;
  background-color: #cccccc;
}

#choice1 a {
  text-decoration: none;
}

#choice1:hover {
  background-color:#eeeeee;
  font-weight: bold;
}

#choice1 p {
  color: black;
  position: relative;
  top:50%; height:3em; margin-top:-1.5em;
}

#choice2 {
  width: 260px;
  height: 150px;
  position: absolute;
  left: 300px;
  border: solid black 1px;
  background-color: #cccccc;

}

#choice2 a {
  text-decoration: none;
}

#choice2:hover {
  background-color:#eeeeee;
  font-weight: bold;
}


#choice2 p {
  color: black;
  position: absolute;
  top:50%; height:3em; margin-top:-1.5em;
}

#C {
 left:0px;
}
#D {
  left: 16px;
}
#E {
  left: 32px;
}
#F {
  left: 48px;
}
#G {
  left: 64px;
}
#A {
  left: 80px;
}
#B {
  left: 96px;
}
#C1 {
  left: 112px;
}
#D1 {
  left: 128px;
}
#E1 {
  left: 144px;
}
#F1 {
  left: 160px;
}
#G1 {
  left: 176px;
}
#A1 {
  left: 192px;
}
#B1 {
  left: 208px;
}
#C2 {
  left: 224px;
}
#D2 {
  left: 240px;
}
#E2 {
  left: 256px;
}
#F2 {
  left: 272px;
}
#G2 {
  left: 288px;
}
#A2 {
  left: 304px;
}
#B2 {
  left: 320px;
}
#Csharp {
  left: 11px;
}
#Dsharp {
  left: 27px;
}
#Fsharp {
  left: 59px;
}
#Gsharp {
  left: 75px;
}
#Asharp {
  left: 91px;
}
#C1sharp {
  left: 123px;
}
#D1sharp {
  left: 139px;
}
#F1sharp {
  left: 172px;
}
#G1sharp {
  left: 188px;
}
#A1sharp {
  left: 204px;
}
#C2sharp {
  left: 236px;
}
#D2sharp {
  left: 252px;
}
#F2sharp {
  left: 284px;
}
#G2sharp {
  left: 300px;
}
#A2sharp {
  left: 316px;
}
#myLevel {
  width: 80px;
  height: 20px;
  position: absolute;
  left: 210px;
  top: 20px;
  background-color: green;
  opacity: 0.7;
  text-align: center;
}
#myBat {
  width: 5px;
  height: 25px;
  position: absolute;
right:0;
top:188px;
  background-color: black;
}
#myPoints {
  width: 140px;
  height: 20px;
  position: absolute;
  left: 180px;
  top: 370px;
  background: green;
  opacity: 0.7;
  text-align: center;
}