#length, #octave {
    color: #444;
    margin-bottom: 4px;
}

.checkbox {
    border-left: 4px solid #DDD;
    padding-left: 8px;
    margin-bottom: 4px;
}

.checkbox:hover {
    border-left: 4px solid #CCC;
}

#keyboard {
    position: relative;
}

#keyboard div {
    display: inline-block;
    width: 32px;
    height: 120px;
    border: 1px solid #000;
    margin-right: -1px;
}

#keyboard div:active {
    height: 118px;
}

#keyboard div span {
    color: #666;
    font-size: 12px;
    user-select: none;
    text-align: center;
    display: inline-block;
    width: 32px;
    margin-top: 96px;
}

#keyboard div span.hidden {
    visibility: hidden;
}

#keyboard div.black {
    position: absolute;
    width: 22px;
    height: 72px;
    border: none;
    margin-bottom: 40px;
    background-color: #000;
    border-bottom: 8px solid #333;
}

#keyboard div.black:active {
    height: 76px;
    border-bottom: 4px solid #333;
}