table.details {
    width: 100%;
}

    table.details a {
        text-decoration: underline;
    }

    table.details .date-style {
        width: 20%;
    }

    table.details .route-crag-area {
        width: 62%;
    }

    table.details .type-grade-rock {
        width: 18%;
    }

img.aside {
    display: block;
    margin: auto;
    margin-bottom: 10px;
}

.comparison {
    background-color: transparent;
}

    .comparison .grade-m {
        background-color: #5cb85c !important;
    }

    .comparison .grade-d,
    .comparison .grade-3a,
    .comparison .grade-3b,
    .comparison .grade-3c,
    .comparison .style-toprope {
        background-color: #81b558 !important;
    }

    .comparison .grade-vd,
    .comparison .grade-4a,
    .comparison .grade-4b,
    .comparison .grade-4c,
    .comparison .style-second {
        background-color: #a6b255 !important;
    }

    .comparison .grade-hvd,
    .comparison .grade-5a,
    .comparison .grade-5b,
    .comparison .grade-5c,
    .comparison .style-leadalternate {
        background-color: #cbb052 !important;
    }

    .comparison .grade-s,
    .comparison .grade-6a,
    .comparison .grade-6aplus,
    .comparison .style-lead {
        background-color: #f0ad4e !important;
    }

    .comparison .grade-hs,
    .comparison .grade-6b,
    .comparison .grade-6bplus,
    .comparison .style-solo {
        background-color: #ea964e !important;
    }

    .comparison .grade-vs,
    .comparison .grade-6c,
    .comparison .grade-6cplus,
    .comparison .style-scramble {
        background-color: #e4804e !important;
    }

    .comparison .grade-hvs {
        background-color: #df6a4f !important;
    }

    .comparison .grade-e1 {
        background-color: #d9534f !important;
    }

.details {
    color: #000000;
}

    .details .grade-m {
        color: #5cb85c;
    }

    .details .grade-d,
    .details .grade-3a,
    .details .grade-3b,
    .details .grade-3c,
    .details .style-toprope {
        color: #81b558;
    }

    .details .grade-vd,
    .details .grade-4a,
    .details .grade-4b,
    .details .grade-4c,
    .details .style-second {
        color: #a6b255;
    }

    .details .grade-hvd,
    .details .grade-5a,
    .details .grade-5b,
    .details .grade-5c,
    .details .style-leadalternate {
        color: #cbb052;
    }

    .details .grade-s,
    .details .grade-6a,
    .details .grade-6aplus,
    .details .style-lead {
        color: #f0ad4e;
    }

    .details .grade-hs,
    .details .grade-6b,
    .details .grade-6bplus,
    .details .style-solo {
        color: #ea964e;
    }

    .details .grade-vs,
    .details .grade-6c,
    .details .grade-6Cplus,
    .details .style-scramble {
        color: #e4804e;
    }

    .details .grade-hvs {
        color: #df6a4f;
    }

    .details .grade-e1 {
        color: #d9534f;
    }

@media screen and (min-width: 1200px) {
    table.details {
        float: left;
        width: 70%;
    }

    img.aside {
        float: right;
        display: initial;
        width: 28%;
    }
}