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

#modalClose {

    color: #fff8e8; 
    float:right;
    font-size: 2em;
    text-decoration: none;
    font-family: verdana;
    padding: 5px;

}

.modalButton {

    background-color: #8F1717;
    border: 0;
    color: white;
    font-size: 1.5em;
    padding: 10px 20px;
    cursor: pointer;
    margin-left: 0px;
    border-radius: 2px;

}

.jegogContainer {
    display: none;
    position: absolute;
    padding: 40px;
    left: -138px;
    top: -8px;
    z-index: 99;
    background: #171616;
    color: #fff8e8;
    width: 1200px;
    height: 100%;
    border-radius: 10px;
    -webkit-box-shadow: 10px 10px 51px 0px rgba(0,0,0,0.43);
    -moz-box-shadow: 10px 10px 51px 0px rgba(0,0,0,0.43);
    box-shadow: 10px 10px 51px 0px rgba(0,0,0,0.43);
}

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

#TopViewImage {
  position:absolute;
  width:100%;;
  height:100%;
  background-image:url('https://dev.interactivegamelan.arts.unsw.edu.au/sites/dev.interactivegamelan.arts.unsw.edu.au/files-gamelan/Jegog/topview.png');
  background-repeat:no-repeat
}

#InstrumentInfo {
  display: block;
  position: relative;
  font-family: sans-serif;
  text-align: left;
  padding: 40px;
  float: right;
  right: 40px;
}

#InstrumentTitle {
  font-size:64px;
  display: inline-block;
}

#InstrumentDescription {
  display: block;
  margin-top:20px;
}

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

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