.page {
    display: block;

    margin: 1rem 0 2rem;
    padding: 0 1rem;

    color: #000000;
    font: 1em / 1.4 sans-serif;
}

.page-header {
    display: block;

    margin: -1rem -1rem 1rem;
    padding: 0.5rem 1rem;

    background: #F2F2F2;
    border-bottom: 4px double rgba(0, 0, 0, 0.2);
}

.page-aside {
    display: block;

    margin: 1em -1rem;
    padding: 0 1rem;

    background: #002856;
    border-top: 1px solid rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);

    color: #FFFFFF;
    font: 0.9em / 1.4 sans-serif;
}

.page-main {
    display: block;
}

@media screen and (min-width: 48rem) {

    .page {
        margin: 1rem 0 2rem 12rem;
        padding: 0 2rem;

        background: linear-gradient(90deg, #002856 12rem, #FFFFFF 12rem);
    }

    .page-header {
        margin: -1rem -2rem 1rem -14rem;
        padding: 0.5rem 1rem;
    }

    .page-aside {
        float: left;
        clear: left;

        width: 10rem;

        margin: 1em 0 1em -13rem;
        padding: 0;
    }

    .page-main {
        max-width: 58rem;
    }
}

@media screen and (min-width: 100rem) {

    .general-status {
        position: absolute;

        width: 20rem;

        margin: -1em 0 0 58rem;
        padding: 0 0 0 4rem;
    }
}

.navigation {
    margin: 1em 0;
    padding: 0;

    list-style: none;
}

.navigation li {
    margin: 0.5em 0;
    padding: 0;
}

.navigation li .link {
    display: block;
    position: relative;

    margin: 0;
    padding: 0 0 0 1em;
}

.navigation li .link::before {
    position: absolute;
    left: 0;
}

.description-list {
    display: flex;
    flex-flow: row wrap;

    margin: 0.5em -0.5em 1em 0;
    padding: 0;
}

.description-list div {
    flex: 14em;

    margin: 0.5em 0.5em 0 0;
    padding: 0.5em 1em;

    background: #F2F2F2;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.description-list div dt {
    margin: 0;
    padding: 0;

    font-weight: bold;
}

.description-list div dd {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 0.5rem;
    padding: 0;

    color: #002856;
}

p {
    margin: 1em 0;
    padding: 0;
}

.link, .button {
    background: none;
    border: none;

    cursor: pointer;

    color: inherit;
    font: bold 1em / 1.4 sans-serif;

    text-decoration: none;
}

.link:hover, .link.highlighted, .button:hover, .button:focus, .button.highlighted {
    color: #F39300;
}

.link:active, .button:active {
    color: #EC4C11;
}

.link::before {
    content: "\00BB\0020";
}

.button {
    display: inline-block;

    margin: 0 0;
    padding: 0.25em 1em;

    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), transparent), #F2F2F2;
    border: 1px solid #002856;
    border-bottom-width: 2px;
}

.button:hover, .button:focus, .button.highlighted {
    border-color: #F39300;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);

    outline: none;
}

.button:active {
    border-color: #EC4C11;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

.input-field {
    display: block;

    max-width: 42em;

    margin: 1em 0;
    padding: 1em;

    background: #F2F2F2;
    border-bottom: 2px solid #CCCCCC;
}

input[type="text"], input[type="password"] {
    display: block;
    box-sizing: border-box;

    width: 100%;

    margin: 0.5em 0 0;
    padding: 0.25em 1em;

    background: #FFFFFF;
    border: 1px solid #000000;

    color: inherit;
    font: 1em / 1.2 sans-serif;
}

input[type="text"]:focus, input[type="password"]:focus {
    border-color: #F39300;
    box-shadow: 0 2px #F39300;

    outline: none;
}

img {
    display: block;

    margin: 1em auto;
    padding: 0;
}

.scrollable {
    display: block;

    margin: 1em 0;
    padding: 0;

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);

    overflow: auto;
}

.scrollable iframe {
    display: block;

    margin: 0;
    padding: 0;

    border: none;

}