html,body,ul,li
{
  margin:auto;
  padding:0px;
}
body
{
  font-family:Cambria,Times New Roman,serif;
}
#notenname
{
  font-weight:bold;
  font-size:60px;
  text-align:center;
}

#piano
{
  width:90%;
  height:150px;
  white-space:nowrap;
  z-index:10;
  display:table;
  left:5%;
  top:100px;
  position:absolute;
  box-shadow:4px 4px 10px rgba(0,0,0,0.5);
  background-color:rgba(0,0,0,0.5);
  border-radius:4px;
}
#piano div
{
  display:table-cell;
  position:relative;
  vertical-align:bottom;
  white-space:nowrap;
  height:100%;
  text-align:center;
  z-index:11;
  font-weight:bold;
  font-size:18px;
  padding-bottom:15px;
  box-shadow:1px 1px 3px rgba(0,0,0,0.6),
  inset 0px -6px 2px 0px rgba(0,0,0,0.6),
  inset 1px -1px 4px rgba(0,0,0,0.6),
  inset 20px -20px 40px rgba(255,255,255,0.5);
  border-radius:4px;
}
#piano .halbton
{
  position:absolute;
  background-color:black;

  z-index:12;
  color:white;
  box-shadow:1px 2px 4px rgba(0,0,0,0.8),
  inset 2px -16px 2px 10px rgba(0,0,0,0.8),
  inset 20px -20px 40px rgba(255,255,255,0.5);
  border-radius:5px;
  padding-bottom:0px; 
}
#piano em
{
  display:block;
  font-size:12px;
}
#piano .halbton em
{
  display:none;
}
#piano span
{
  width:100%;
  height:100%;
  display:block;
  position:absolute; 
  border-radius:4px; 
}
#piano .halbton span
{
  border-radius:5px;
}
#piano span:hover, #piano span.active
{
  box-shadow:1px 1px 3px rgba(0,200,255,0.8),
  inset 0px 0px 100px rgba(0,200,255,0.8);
}
ul#options li
{
  float:left;
  list-style-type:none;
  margin:0px;
  padding:0px;
  margin-right:10px; 
}
.clear
{
  clear:both;
}

#layer
{
  position:fixed;
  top:0px;
  width:100%;
  z-index:50;
  font-family:Calibri,Verdana,Arial,sans-serif;
}
#settings
{
  background-color:#EEEEEE;
  position:relative;
  top:0px;
  width:100%;
  z-index:50;
  padding:5px;
  line-height:25px;
  box-shadow:0px 3px 2px rgba(0,0,0,0.4);
}
#buttons
{
  position:relative;
  top:0px;
  left:10px;
  width:55px;
  z-index:90;
  background-color:#EEEEEE;
  border-radius:0px 0px 5px 5px;  
  box-shadow:0px 3px 2px rgba(0,0,0,0.4);  
  padding:5px 5px 5px 5px;
}
#buttons span
{
  width:16px;
  height:16px;
  display:block;

  background-repeat:no-repeat;
  background-position:top left;
  float:left;
  cursor:pointer;
  text-indent:2000px;
  margin:5px;
}
#toggleoptions
{
  background-image:url("up.png");
}
#playpause
{
  background-image:url("play.png");
}