keyboard-style.css

body {
    background-color: #cfc;
    font-family: sans-serif;
    text-align: center;
}

tr.keyboard {
    height: 2em;
}

th.whitehk:hover { background: gold; }
th.white:hover { background: gold; }
td.black:hover { background-color: darkgoldenrod; }

td.black {
    background-color: black;
    text-align: center;
    color: white
}

td.white {
    border: 1px;
    border-style: solid solid none solid;
    border-color: black;
    color: transparent;
    text-align: center;
}

th.white {
    border: 1px;
    border-style: none solid solid solid;
    background-color: white;
    text-align: center;
}

th.whitehk {
    border: 1px;
    border-style: none solid solid solid;
    background-color: white;
    text-align: center;
    text-decoration: underline;
}


table.keyboard {
    border: 1px;
    border-collapse: collapse;
    border-style: solid solid solid solid;
    table-layout: fixed;
    background: white;
    width: 100%;
}

tt {
    color: red; font-size: 14pt;
}

.lobe {
    width: 300px;
    border: 1px solid;
    padding: 1em;
    border-radius: 3em 1em;
    position: absolute;
}

.player {
    background: #ffc;
}

.theory {
    background: #fdc;
}

.boring {
    background: #dfc;
}

span.button:hover { background: gold; }
span.button {
    border: 1px solid;
    padding: .5ex;
    margin: .5ex;
    border-radius: .5em;
    background: #ccf;
}