.piano-keyboard .keyboard {
  margin: 0 auto -20px auto;
  width: 790px;
  height: 240px;
  background: #99B;
  -moz-border-radius-topleft: 15px 21px;
  -moz-border-radius-topright: 15px 21px;
  border-top-left-radius: 15px 21px;
  border-top-right-radius: 15px 21px;
  -moz-border-radius-bottomleft: 10px 15px;
  -moz-border-radius-bottomright: 10px 15px;
  border-bottom-left-radius: 10px 15px;
  border-bottom-right-radius: 10px 15px;
  padding: 10px 0 0 0;
}

.piano-keyboard .keyboard ul {list-style-type: none; width: 784px; margin: 0 auto;}
.piano-keyboard .keyboard li {float: left;}

.piano-keyboard .keyboard .key {
  cursor: pointer;
  display: block;
  color: #111;
  font: bold 13pt arial;
  text-decoration: none;
  text-align: center;
  width: 44px;
  height: 40px;
  padding: 0 0 3px 0;
  margin: 0px;
  background: #eff0f2;
  -moz-border-radius: 4px;
  border-radius: 8px;
  border: 5px solid #99B;
  background: #fff;
}


.piano-keyboard .keyboard .black-key {
  color: #FFF;
  background: #555;
}
.piano-keyboard .keyboard .grey-key {
  background: #99B;
}
.piano-keyboard .keyboard .grey-key span, .grey-key b {
  color: #bbb;
}

.piano-keyboard .keyboard .key.keydown, .guitar-keyboard .keyboard .key.keydown {
  font-size: 19pt;
  
  -webkit-box-shadow:
    inset 0 0 25px #ddd,
    0 0 25px #333;
  -moz-box-shadow: 
    inset 0 0 25px #ddd,
    0 0 25px #333;
  box-shadow: 
    inset 0 0 25px #ddd,
    0 0 25px #333;
  border-top: 1px solid #eee;
}

.piano-keyboard .keyboard .key.computer-key-down {
  background: #AA6;
}

.piano-keyboard .keyboard .key.computer-note {
  background: #AA6;
}

/*.keyboard .key :active, .keydown {
  color: #888;
  background: #ebeced;
  margin: 7px 5px 3px;
  -webkit-box-shadow:
    inset 0 0 25px #ddd,
    0 0 3px #333;
  -moz-box-shadow: 
    inset 0 0 25px #ddd,
    0 0 3px #333;
  box-shadow: 
    inset 0 0 25px #ddd,
    0 0 3px #333;
  border-top: 1px solid #eee;}*/
  
#numbers li a span {
  display: block;
  margin: 13px 0 0;
  text-transform: uppercase;}

#numbers li a b {
  margin: 3px 0 3px;
  display: block;}

#numbers li .alt b {display: block;margin: 0 0 3px;}

/* Backspace key */
#numbers li #delete span {
  text-align: right;
  margin: 23px 10px 0 0;
  /*font-size: 9.5pt;*/
}
  
#qwerty li a span {
  display: block;
  margin: 13px 0 0;
  text-transform: uppercase;}
  
#qwerty li #tab span {
  text-align: left;
  margin: 23px 0 0 10px;
  font-size: 9.5pt;
  text-transform: lowercase;
} 

#qwerty li .alt b {display: block; margin: 3px 0 0;}
#qwerty li .alt span {margin: 2px 0 0;}


#asdfg li a span {
  display: block;
  margin: 13px 0 0;
  text-transform: uppercase;}

#asdfg li .alt span {margin: 0; text-transform: lowercase;}
#asdfg li .alt b {display: block; margin: 3px 0 0;}
#asdfg li #caps b {
  display: block;
  background: #999;
  width: 4px;
  height: 4px;
  border-radius: 10px;
  margin: 9px 0 0 10px;
  /*-webkit-box-shadow: inset 0 1px 0 #666;
  -moz-box-shadow:inset 0 1px 0 #666;
  box-shadow:inset 0 1px 0 #666;*/
}
#asdfg li #caps span {
  text-align: left;
  margin: 10px 0 0 10px;
  font-size: 9.5pt;}
#asdfg li #enter span {
  text-align: right;
  margin: 23px 10px 0 0;
  font-size: 9.5pt;}


#zxcvb li a span {
  display: block;
  margin: 13px 0 0;
  text-transform: uppercase;}
#zxcvb li .shiftleft span {
  text-align: left;
  margin: 23px 0 0 10px;
  font-size: 9.5pt;
  text-transform: lowercase;}
#zxcvb li .shiftright span {
  text-align: right;
  margin: 23px 10px 0 0;
  font-size: 9.5pt;
  text-transform: lowercase;}
#zxcvb li .alt b {display: block;margin: 4px 0 0;}
#zxcvb li .alt span {margin: 0;}

.keyboard #delete {width: 72px;}
.keyboard #tab {width: 72px;}
.keyboard #caps {width: 85px;}
.keyboard #enter {width: 85px;}
.piano-keyboard .keyboard .shiftleft, .piano-keyboard .keyboard .shiftright {width: 112px;}
    
.keyboard h1 {
  color: #888;
  text-align: center;
  font: bold 25pt/25pt arial;
  margin: 30px 0 60px;}
  
.keyboard h2 {
  color: #666;
  font: 13pt/0pt arial;}
  
.keyboard p {
  color: #999;
  font: 9pt/17pt arial;
  margin: 0 0 50px;}
  
.keyboard small {
  font: italic 8pt/12pt arial;
  color: #aaa;
  padding: 0 130px 0 0;
  display: block;}
  
.keyboard cite {
  display: block;
  padding: 0 0 30px;
  margin: 0 auto;
  text-align: center;
  color: #999;
  font: italic bold 8pt arial;}

.keyboard ul, ol {padding: 0px; margin: 0;}

.keyboard a {
  cursor: pointer;
}
  
/* Micro Clearfix by Nicolas Gallagher - http://nicolasgallagher.com/micro-clearfix-hack */
        /* For modern browsers */
        .cf:before, .cf:after {content:""; display:table;}
        .cf:after {clear:both;}

        /* For IE 6/7 (trigger hasLayout) */
        .cf {zoom:1;}