/*!*! Copyright (c) 2013 - Peter Coles (mrcoles.com)*/
/* *  Licensed under the MIT license: http://mrcoles.com/media/mit-license.txt*/

#input-score-sample {
    height:100px;
    overflow:hidden
}

#keyboard-area {
      height:100px;
      overflow:hidden
  }
#octave-button-group {
    margin:0 auto
}
#piano {
    position:relative;
    margin:0 auto;
    overflow:hidden
}
#piano {
    width:332px
}
.key {
    width:20px
}
#piano .keys {
    padding:2px 0 0 2px;
    overflow:hidden;
    background:#000;
    border-radius:0 0 6px 6px
}
.key {
    float:left;
    position:relative;
    height:82px;
    margin:0 2px 2px 0;
    background:#fff;
    border-radius:0 0 4px 4px
}
.keytext {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    text-align:center;
    color:#111;
    user-select:none;
    -moz-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -o-user-select:none
}
.keytext.black {
    z-index:2;
    height:65px;
    color:#fff
}
.keyshortcutHint {
    visibility:hidden;
    width:inherit;
    background-color:#e13934;
    color:#fff;
    text-align:center;
    border-radius:6px;
    padding:5px 0;
    overflow:visible;
    position:absolute;
    top:-10px;
    left:0px
}
.key:hover .keyshortcutHint {
    visibility:visible;
    z-index:3
}
.key.pressed,
.key:active {
    background:#f4f3f3;
    box-shadow:inset 3px 2px 3px #999,inset -3px 2px 3px #999
}
.key.black {
    width:0;
    margin:0;
    z-index:1
}
.key.black:after {
    content:"";
    position:absolute;
    top:-2px;
    left:-16px;
    display:block;
    width:22px;
    height:45px;
    background:#000;
    border-radius:0 0 4px 4px;
    box-shadow:0px 0px 0 #555,0px 3px 0 #555
}
.key.black1:after {
    left:-16px
}
.key.black2:after {
    left:-14px
}
.key.black3:after {
    left:-12px
}
.keytext.black1 {
    left:-12px
}
.keytext.black2 {
    left:-10px
}
.keytext.black3 {
    left:-8px
}
.keyshortcutHint.black {
    width:22px;
    z-index:3
}
.keyshortcutHint.black1 {
    left:-16px
}
.keyshortcutHint.black2 {
    left:-14px
}
.keyshortcutHint.black3 {
    left:-12px
}
.key.black.pressed:after,
.key.black:active:after {
    box-shadow:0px 0px 0 #777,0px 3px 0 #777;
    background-color:#555
}



#piano_div .input-group .input-group-btn, #notes_div .input-group .input-group-btn {
    height: 100px;
}

#piano_div .input-group .btn, #notes_div .input-group .btn {
    height: 100px;
    width: 2em;
    text-align: center;
    padding: 40px 0 0 0;
}