body{
  margin: 0;
}

div.menu{
  background-color: black;
  color: white;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 48px;
}

div.menu ul{
  list-style-type:none;
  margin:0;
  padding:1em;
}

div.menu li{
  vertical-align:top;
  display:inline-block;
}

div.menu a{
  color: #aaaaff;
}

div.menu span{
  color: black;
}

div.page{
  overflow: auto;
  position: absolute;
  top: 64px;
  bottom: 0;
  width: 100%;
}

iframe{
  background:white;
  border:none;
  width:100%;
}

.button,.thumb{
  box-shadow:inset 2px 2px 0 0 #5bf;
  background-color:#39f;
  border-radius:4px;
  border:1px solid black;
  cursor:pointer;
  text-decoration:none;
}
.button:hover,.thumb:hover{
  background-color:#4af;
}
.button:active,.thumb:active{
  box-shadow:inset 2px 2px 0 0 #28f;
}

.trough{
  border:1px solid black;
  background:#963;
  border-radius:4px;
}
.trough .bar{
  background:black;
  border-color:#963;
  border-style:solid;
}

.thumb{
  padding-top:3px;
}
.horizontal .thumb:after{
  content:url("vgrip.png");
  opacity:0.3;
}

#finkplay{
  position:fixed;
  bottom:0;
  left:0;
  background-color:#fc8;
  color:black;
  margin:0;
  border-width:3px 3px 0 0;
  border-style:solid;
  border-color:#ff55aa;
  border-radius:0 8px 0 0;
  box-shadow:0 1px black inset;
  padding:4px;
  width:400px;
}

#finkplay .info{
  display:block;
  margin-bottom:4px;
}

#finkplay .controls > *{
  text-align:center;
  margin-left:4px;
  height:24px;
}

#finkplay .first{
  margin-left:0;
}

#finkplay .button{
  width:96px;
}

#finkplay .play:before{
  content:url("play.png");
}

#finkplay .pause:before{
  content:url("pause.png");
}

#finkplay .time{
  line-height:24px;
  width:6em;
}

#finkplay .mute:before{
  content:"🔊";
}
#finkplay .unmute:before{
  content:"🔇";
}
#finkplay .mute,#finkplay .unmute{
  border-radius:4px 0 0 4px;
  width:32px;
}
#finkplay .volume{
  margin-left:0;
  border-left:0;
  border-radius:0 4px 4px 0;
}

#finkplay .close{
  width:32px;
}
#finkplay .close:before{
  content:"❌";
}

#finkplay .trough{
  padding:0 8px 0 8px;
  box-sizing:border-box;
}

#finkplay .volume{
  width:160px;
}

#finkplay .bar{
  border-width:10px 0 10px 0;
  height:22px;
  box-sizing:border-box;
}

#finkplay .loaded,#finkplay .played{
  height:2px;
}

#finkplay .loaded{
  background:#5a2;
}

#finkplay .played{
  background:#c95;
}

#finkplay .thumb{
  margin-top:-11px;
  margin-right:-9px;
  height:24px;
  width:18px;
  box-sizing:border-box;
}