#left .header, #left .footer {
    background: darkseagreen;
    border: 6px solid seagreen;
}

#left .headette, #left .footette {
    background: #BEBEBE;
    border-left: 6px solid seagreen;
    border-right: 6px solid seagreen;
}

#left .content .activity {
    width: 100%;

    box-sizing: border-box;
    border: 6px solid seagreen;
    overflow: auto;
}

#left .content .reference {
    width: 100%;

    box-sizing: border-box;
    border-bottom: 6px solid seagreen;
    border-left: 6px solid seagreen;
    border-right: 6px solid seagreen;
    overflow: auto;
}

#left .prev {
    float: left;

    width: 50%;
    height: 100%;

    box-sizing: border-box;
    border-right: 3px solid seagreen;
}

#left .next {
    float: right;

    width: 50%;
    height: 100%;

    box-sizing: border-box;
    border-left: 3px solid seagreen;
}

#left table {
    width: 100%;

    text-align: center;
    vertical-align: middle;

    font-family: "Courier New";
    color: ghostwhite;
    font-weight: bolder;
    font-size: 14pt;
}

#left .content table {
    text-align: left;
}

#left .content th,
#left .content td, {
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#left .content th {
    color: black;
}

#left .content td {
    color: black;
    font-weight: normal;
    padding-bottom: 5px;
}

#left .prev:hover, #left .next:hover {
    background: darkgrey;
    cursor: pointer;
}