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;
}

#Sequence col {
  width:1em;
}

table.score td {
  text-align:center;
}

table.score tbody td:nth-child(3) {
  text-align:left;
}

table.score tbody td:nth-child(4) {
  font-size: smaller;
  text-align:left;
}

#Sequence #PartNameCol,
#Sequence #InstrumentNameCol {
  width:inherit;
}

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

#KeyInfo h1 {
  font-size: 20px;
}

#KeyInfo h2 {
  font-size: 18px;
}

#PitchDistribution, #Controls {
  font-size:smaller;
}

#PitchDistribution a {
  color:lightblue;
}

#PitchDistribution a:visited {
  color:rgba(192,192,0,1);
}

#PitchDistribution a:hover {
  color:orange;
}

#Controls td:nth-child(2) {
  text-align: center;
  border: lightblue solid 1px;
}

#PitchDistribution td {
  text-align: center;
  margin: 0px;
  width: 1.5em;
}

#PitchDistribution tr.pitch td:first-child {
  width:4em;
  padding:0em 0.25em;
  text-align:right;
}

#PitchDistribution tr.pitch td {
  background:rgba(32,32,32,1);
  /* border-right: 1px dotted grey; */
}

#PitchDistribution td.type {
  text-align: left;
}

#PitchDistribution td.instrument {
  border:lightblue solid 1px;
}

#PitchDistribution .kbd {
  border:lightblue solid 1px;
}

#PitchDistribution td.instrument.gongs,
#PitchDistribution td.instrument.jublag,
#PitchDistribution .kbd.gongs,
#PitchDistribution .kbd.jublag {
  border:lightgreen solid 1px;
  background-color:#030;
}

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

.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;
}

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