.DA-Keyboardcontainer {
    font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
    color: #000;
    padding: 20px;
}

ul.DA-PianoKeyboard {
    position: relative;
    display: inline-block;
    height:160px;
    padding: 0;
    cursor: pointer;
    list-style-type: none;
}

ul.DA-PianoKeyboard li {
    box-sizing: content-box;
    position: relative;
    float: left;
    border-style: solid;
    border-color: #000;
    border-width: 2px 1px 2px 1px;
    border-radius: 0 0 4px 4px;
    color: #ccc;
    text-align: center;
    padding: 0;
}

.whiteKey>p {
    margin-top: 120px;
}

ul.DA-PianoKeyboard li:first-of-type {
    border-left-width: 2px;
    border-top-left-radius: 4px;
}

ul.DA-PianoKeyboard li:last-of-type {
    border-right-width: 2px;
    border-top-right-radius: 4px;
}

.whiteKey {
    width: 28px;
    height: 150px;
    background: #fff;
}

.whiteKey:hover:active {
    background: #eee;
}

.whiteKey:hover {
    background: #f9f9f9;
}

.blackKeySharp {
    background: #000;
    z-index: 10;
    width: 20px;
    height: 50px;
    margin: 0 0 0 -10px;
}

.blackKeySharp:hover:active {
    background: #555;
}

.blackKeySharp:hover {
    background: #444;
}

.blackKeyFlat {
    top: 50px;
    background: #111;
    z-index: 10;
    width: 20px;
    height: 50px;
    margin: 0 0 0 -10px;
}

.blackKeyFlat:hover:active {
    background: #555;
}

.blackKeyFlat:hover {
    background: #444;
}

/* positioning */

.blackKeyFlat + .whiteKey {
    margin-left: -12px;
}

.blackKeySharp + .blackKeyFlat{
    margin-left: -22px;
}


/* Octave shift */

.DA-Keyboardcontainer button {
    display: inline-block;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.0);
    margin: 10px;
    border-style: none;
    padding: 10px;
    text-align: center;
    vertical-align: top;
    font-size: 50px;
    height: 160px;
    color: #999;
}

.DA-Keyboardcontainer button:hover {
    background-color: #eeeeee;
}


.DA-Keyboardcontainer button:disabled {
    color: #fff;
    cursor: default;
}

.DA-Keyboardcontainer button:disabled:hover {
    background-color: #fff;
}


/* Notes Selection */

#DA-NoteSelection {
    display: inline-block;
    margin-left: 50px;
    height: 40px;
}

.DA-NoteClefSelection input[type=radio] {
    display: none;
    margin: 0px
}

.DA-NoteClefSelection input[type=radio] + label {
    font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
    display: inline-block;
    background: #fff;
    color: #000;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 2px;
    margin-left: -6px; /* There is some margin, which I don't know where it comes from... */
}

.DA-NoteClefSelection input[type=radio]:checked + label {
    background: #666666;
    color: #eeeeee;
}


/* Clef Selection */

#DA-ClefSelection {

    display: inline-block;
    margin-left: 200px;
    height: 40px;
}