body {
  font-family: Arial, Helvetica, sans-serif;
  background-color:black;
  color:#ccc;
}

#Content {
  width:1000px;
  margin:0 auto;
  clear: both;
}

#TopViewImage {
  position:absolute;
  width:1000px;
  height:100%;
  background-image:url('topview.png');
  background-repeat:no-repeat;
}

#InstrumentInfo {
  display:block;
  font-family:sans-serif;
  text-align:left;
  margin:10px 0px;
}

#InstrumentTitle {
  font-size:64px;
}

#Hint {
  font-family:sans-serif;
  font-size:12px;
  border:10px;
  margin:10px;
  float: left;
}

#InstrumentNavigation ul {
  padding-bottom: 2em;
  height: 4em;
}

#InstrumentNavigation li {
  float: left;
  margin:0;
  padding:0;
  list-style:none;
  margin:1em;
}

/*---------------------------------------------------------------------------*/

.note_play {
  border: 1px solid green;
  background-color: rgba(0,255,0,0.1);
  position:absolute;
}

.note_stop {
  border: 1px solid blue;
  background-color: rgba(0,0,255,0.1);
  position:absolute;
}

.note_invisible {
  border: 0px;
  background-color: transparent;
  position:absolute;
}

.label {
  color:orange;
  font-size:16pt;
  text-align:center;
  position: absolute;
}

.label_invisible {
  border: 0px;
  visibility:hidden;
  position: absolute;
}

.key {
  color:rgba(127,255,255,0.75);
  font-size:16pt;
  text-align:center;
  vertical-align:bottom;
  position:absolute;
}

.key_invisible {
  border:0px;
  color:transparent;
  position: absolute;
}

/*---------------------------------------------------------------------------*/