/* structure stylesheet without colour information. */
blockquote {
    font-style: italic;
}

body {
    margin: 0;
    padding: 0;
    padding-bottom: 4em;
    font-family: sans-serif;
}


#main-container img {
    clear: both;
    padding: 0.5em 2em 0.5em 0;
}

#nav-icon {
    margin: 0;
    padding: 0;
}

footer {
    clear: both;
    font-size: smaller;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0.25em 0 1em 0;
    bottom: 0;
    position: fixed;
    vertical-align: top;
    z-index: 150;
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight)));
}

@media all and (min-device-width: 1025px) {

    /* ids generally in document order */

    /* top-of-page navigation, not editable, provided by Smeagol */
    #nav {
        margin: 0;
        padding: 0 18%;
        top: 0;
        width: 100%;
        z-index: 149;
        _position: absolute;
        _top: expression(document.documentElement.scrollTop);
    }

    /* only needed for fly-out menu effect on tablet and phone stylesheets */
    #nav-icon {
        display: none;
    }

    #nav-menu {
        margin: 0;
        padding: 0;
    }

    #nav ul li {
        padding: 0;
        margin: 0;
        display: inline;
    }

    #nav ul li a {
        text-decoration: none;
        font-weight: bold;
        padding: 0.1em 0.75em;
        margin: 0;
    }

    #nav ul li.active a {
        background: #0c0;
    }

    /* header for all pages. Within main-container */
    #header {
        margin-top: 0;
        width: 100%;
    }

    #header h1 {
        margin-top: 0;
    }

    /* left bar for all pages in the Wiki - editable, provided by users. Within main-container */
    #side-bar {
        width: 17%;
        height: 100%;
        padding-bottom: 5em;
        float: left;
    }

    /* cookies information box, fixed, in right margin, just above footer */
    #cookies {
        width: 30%;
        float: right;
        position: fixed;
        bottom: 2.25em;
        right: 0;
        z-index: 150;
        background: transparent;
    }

    /* about-cookies box: permanently visible part of cookies information box */
    #about-cookies {
        clear: right;
        width: 10em;
        font-size: 66%;
        float: right;
        text-align: right;
        padding: 0.25em 2em;
    }

    /* more-about-cookies box, normally hidden */
    #more-about-cookies {
        display: none;
        padding: 0.25em 2em;
    }

    /* but magically appears on mouseover */
    #cookies:hover #more-about-cookies {
        display: block;
    }

    /* I suspect neither 'error' nor 'message' are relevant now I've moved to static compilation. */
    .error {
        width: 100%;
    }

    .widget {
        margin-top: 0;
        margin-bottom: 0;
        width: 100%;
    }

    div.content,
    div.container,
    form,
    p,
    pre,
    h1,
    h2,
    h3,
    h4,
    h5,
    iframe {
        padding: 0.25em 10%;
    }

    dl,
    menu,
    ol,
    table,
    ul {
        padding: 0.25em 1em;
        margin: 0 10%;
    }

    ol ol {
        padding: 0.25em 2em;
        margin: 0 0;
    }

    input.required:after {
        content: " \*";
    }

    header h1 {
        padding: 0.25em 18%;
    }

    label {
        width: 20%;
        min-width: 20em;
    }

    menu li {
        display: inline;
    }

    menu li::before {
        content: "|| ";
    }

    table {
        border-collapse: collapse;
    }

    th,
    td {
        text-align: left;
        vertical-align: top;
        padding: 0.15em 1.5em;
    }
}

/* tablets, primarily. Adapted to touch; targets are larger */
@media all and (min-device-width: 769px) and (max-device-width: 1024px) {
    h1 {
        padding-top: 50px;
        /* to allow for absolutely-positioned nav-icon */
    }

    #cookies {
        display: none;
    }

    /* footer of the page - not-editable, provided by Smeagol */
    #footer {
        clear: both;
        font-size: smaller;
        text-align: center;
        width: 100%;
        margin: 0;
        padding: 0.25em 0;
        bottom: 0;
        position: fixed;
        vertical-align: top;
    }

    #nav {
        margin: 0;
        padding: 0;
        position: fixed;
        z-index: 149;
    }

    #nav a {
        text-decoration: none;
        font-weight: bold;
    }

    #nav:hover #nav-menu {
        display: block;
        list-style-type: none;
        width: 100%;
    }

    #nav-menu,
    #phone-side-bar,
    #side-bar {
        display: none;
    }

    #nav menu li {
        padding: 0.5em 2em 0.5em 0.5em;
        margin: 0.5 em;
        font-size: 150%;
    }

    #nav menu #user {
        text-decoration: none;
        font-weight: bold;
        margin: 0;
    }
}

/* phones, and, indeed, smaller phones. Adapted to touch; display radically
     * decluttered */
@media all and (max-device-width: 768px) {
    footer {
        display: none;
    }

    h1 {
        padding-top: 50px;
        /* to allow for absolutely-positioned nav-icon */
    }

    #nav {
        margin: 0;
        padding: 0;
        position: fixed;
        z-index: 149;
    }

    #nav a {
        text-decoration: none;
        font-weight: bold;
    }

    #nav:hover #nav-menu {
        display: block;
        list-style-type: none;
        width: 100%;
    }

    #nav-icon {
        display: block;
        padding: 0;
    }

    #nav-menu {
        list-style-type: none;
        display: none;
    }

    #nav menu li {
        padding: 0.5em 2em 0.5em 0.5em;
        margin: 0.5 em;
        font-size: 150%;
    }

    #side-bar,
    #cookies {
        display: none;
    }

    #nav menu #user {
        text-decoration: none;
        font-weight: bold;
        margin: 0;
    }
}