.panel
{
    padding: 0.5em;
    margin-bottom: 2em;
    border: solid;
    border-width: 4px;
    border-color: #00F;
    border-radius: 6px;
}

.panel .row
{
     margin-bottom: 0.25em;
     padding-bottom: 0.25em;
}

.panel .row:not(:last-child)
{
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #008;
}

.panel .block
{
    display: inline-block;
}

.panel .block:not(:last-child)
{
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #008;
    padding-right: 1em;
}

.panel .block:not(:first-child)
{
    padding-left: 1em;
}

.fretboard
{
    position: absolute;
    left: 3%;
    width: 95%;
}

.fret
{
    position: absolute;
    height: 100%;
    background-color: #000;
}

.string
{
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #000;
}

.dot
{
    position: absolute;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-bottom: -8px;
    border: solid;
    border-radius: 8px;
    border-color: #000;
    border-width: 1px;
}

.note
{
    position: absolute;
    width: 24px;
    height: 24px;
    margin-left: -24px;
    margin-bottom: -12px;
    border-radius: 6px;
    color: #FFF;
    text-align: center;
    font-weight: bold;
}