stylesheet.css

html, body {
    height: 100%;
    background-color: #fafafa;
    font-family: 'RobotoDraft', sans-serif;
}

p {
    padding: 0;
    margin-bottom: 1px;
}

.shrink {
    margin: auto;
    width: 645px;
    background-color: #82b1ff;
    padding: 15px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

.left {
    float: left;
}

.text {
    font-weight: normal;
    width: 400px;
    padding-left: 20px;
    text-align: left;
}

.small {
    font-size: small;
}

.shrink:hover {
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);

}

html, body {
    height: 100%;
    margin: 0;
    background-color: #fafafa;
    font-family: 'RobotoDraft', sans-serif;
}

.contain {
    margin: auto;
    width: 644px;
    background-color: #82b1ff;
    padding: 15px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

h1 {
    text-align: center;
}

p {
    margin: 0px;
}

.center {

    text-align: center;
}

.subhead {
    font-size: 22px;
}

.subsub {
    font-size: 10px;
}

.items {
    font-size: 13px;
    font-style: italic;
    text-align: left;
    margin-bottom: 10px;

}

.skillstbl {
    width: 644px;
    border-collapse: collapse;
    font-size: 14px;
    font-weight: normal;
    font-family: 'RobotoDraft', sans-serif;
    text-align: left;

}

.courses{
    width: 644px;
    border-collapse: collapse;
}

tr:nth-child(even) {
    background-color: #82b1ff;
}

.right {
    float: right;
}

.left {
    float: left;
}

input {
    display: none;
    visibility: hidden;
}

label {
    display: block;
    padding: 0.5em;
    border-bottom: 1px solid #CCC;
    color: #666;
}

label:hover {
    color: #000;
    cursor: pointer;
}

label::before {
    font-weight: bold;
    font-size: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.checkpointlbl::before {
    content: "+";
}

.outpostlbl::before {
    content: "+";
}

.firefighterlbl::before {
    content: "+";
}

#expandcheckpoint {
    height: 0px;
    overflow: hidden;
    transition: height 0.5s;
    color: #000;
    width: 600px;
}

#expandoutpost {
    height: 0px;
    overflow: hidden;
    transition: height 0.5s;
    color: #000;
    width: 600px;
}

#expandfirefighter {
    height: 0px;
    overflow: hidden;
    transition: height 0.5s;
    color: #000;
    width: 600px;
}

section {
    padding: 0 20px;
}

#togglecheckpoint:checked ~ #expandcheckpoint {
    height: 500px;
}

#toggleoutpost:checked ~ #expandoutpost {
    height: 420px;
}

#togglefirefighter:checked ~ #expandfirefighter {
    height: 450px;
}

#togglecheckpoint:checked ~ .checkpointlbl::before {
    content: "-";
}

#toggleoutpost:checked ~ .outpostlbl::before {
    content: "-";
}

#togglefirefighter:checked ~ .firefighterlbl::before {
    content: "-";
}

.scrollable {
    overflow-y: auto;
    overflow-x: auto;
}
.scrollable:first-child{
    height: 500px;
}
.scrollable:nth-child(2){
    height: 420px;
}
.scrollable:nth-child(3){
    height :400px;
}

.small {
    font-size: 12.5px;
    padding-bottom: 20px;
}

.checkpointimg{
    height: 351.5px;
    width: 200px;
}

.outpostimg{
    height: 315px;
    width: 200px;
}
.firefighterimg{
    height: 325px;
    width: 450px;
}