body {
    color: #fff;
    background: #383838;
    margin: 1em auto;
    padding: 1em;
    max-width: 50em;
    font: 14px Verdana;
    /* Backstop: only breaks a token when it genuinely cannot fit
       (long URLs, email addresses, part numbers). No effect on normal text. */
    overflow-wrap: break-word;
}

footer {
    clear: both;
    margin-top: 2em;
}

/* <pre> defaults to white-space: pre, which preserves your line breaks
   but refuses to wrap long lines. pre-wrap keeps the breaks AND wraps. */
footer pre {
    white-space: pre-wrap;
}

footer img {
    height: 16px;
    vertical-align: middle;
    margin-bottom: 3px;
}

a {
    color: #57b984;
    text-decoration: none;
}

a:hover, .active-page {
    color: #c68960;
}

nav {
    font-size: 17px;
}

code, dt {
    color: #6c6;
}

#list th, tr:nth-child(even) {
    background: #222a31;
}

dt {
    position: relative;
    display: inline-block;
}

dd {
    padding-bottom: 2px;
}

/* white-space: nowrap removed — it was inheriting into every dt and dd
   and preventing the service descriptions from wrapping.
   To actually get multiple columns, raise column-count here (e.g. 2);
   the media query below will collapse back to 1 on narrow screens. */
.multicol {
    column-count: 1;
}

@media all and (max-width: 900px) {
    .multicol {
        column-count: 1;
    }
}