@media all and (min-device-width: 1025px) {
    a {
        color: greenyellow;
    }

    blockquote {
        font-style: italic;
    }

    body {
        margin: 0;
        padding: 0;
        padding-bottom: 4em;
        font-family: sans-serif;
        color: rgb(0, 191, 0);
        background-color: black;
    }


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

    /* ids generally in document order */

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

    }

    #phone-side-bar {
        display: none;
    }

    /* 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 {
        color: yellowgreen;
        text-decoration: none;
        font-weight: bold;
        padding: 0.1em 0.75em;
        margin: 0;
    }

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

    li.nav-item a:hover {
        background: goldenrod;
    }

    li.nav-item a:active {
        background: darkgreen;
        color: yellowgreen;
    }

    /* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
    #main-container {}


    /* header for all pages in the Wiki - editable, provided by users. Within main-container */
    #header {
        margin-top: 0;
        width: 100%;
        background-color: darkgreen;
        color: yellowgreen;
    }

    #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;
    }

    /* content of the current in the Wiki - editable, provided by users. Within main-container */
    #content {
        border: thin solid #0c0;
        width: 80%;
        float: right;
        padding-bottom: 5em;
    }

    /* cookies information box, fixed, in right margin, just above footer */
    #cookies {
        width: 30%;
        float: right;
        position: fixed;
        bottom: 1.5em;
        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;
        color: yellowgreen;
        background: rgba(0, 64, 0, 0.75);
    }

    /* more-about-cookies box, normally hidden */
    #more-about-cookies {
        display: none;
        padding: 0.25em 2em;
        color: yellowgreen;
        background: rgba(0, 64, 0, 0.75);
        border-bottom: thin solid yellowgreen;
    }

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

    /* footer of the page - not-editable, provided by Smeagol */
    #footer {
        clear: both;
        font-size: smaller;
        text-align: center;
        color: yellowgreen;
        background: rgba(0, 64, 0, 0.75);
        width: 100%;
        margin: 0;
        padding: 0.25em 0;
        bottom: 0;
        position: fixed;
        vertical-align: top;
        z-index: 150;
        _position: absolute;
        _top: expression(eval(document.documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight)));
    }


    .change {
        background-color: rgb(223, 223, 223);
        border: thin solid #0c0;
    }


    .error {
        width: 100%;
        background-color: red;
        color: yellowgreen;
    }

    .message {
        border: thin solid red;
    }

    .minor-controls {
        width: 10em;
        float: right;
        padding: 0.25em 2em;
        color: yellowgreen;
        background: rgba(0, 64, 0, 0.75);
        font-size: 66%;
    }

    .minor-controls a {
        float: right;
        color: yellowgreen;
    }

    .warn {
        color: maroon;
    }

    .widget {
        background-color: darkgreen;
        border: thin solid #0c0;
        margin-top: 0;
        margin-bottom: 0;
        width: 100%;
    }

    .wiki {
        margin: 0;
    }

    form {
        border: thin solid #0c0;
    }

    del {
        color: red;
    }

    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 {
        background-color: yellowgreen;
    }

    input.action {
        background-color: green;
    }

    input.action-dangerous {
        color: yellowgreen;
        background-color: red;
    }

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

    header h1 {
        padding: 0.25em 18%;
    }

    ins {
        color: green;
    }

    label {
        width: 20%;
        min-width: 20em;
        border-right: thin solid darkgreen;
    }

    menu li {
        display: inline;
    }

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

    table {
        border: 2px solid darkgreen;
        border-collapse: collapse;
    }

    table.music-ruled tr:nth-child(odd) {
        background-color: #0c0;
    }

    th,
    td {
        text-align: left;
        vertical-align: top;
        padding: 0.15em 1.5em;
        border: 1px solid darkgreen;
    }

    th {
        background-color: darkgreen;
        color: yellowgreen;
    }
}

/* tablets, primarily. Adapted to touch; targets are larger */
@media all and (min-device-width: 769px) and (max-device-width: 1024px) {
    #nav {
        margin: 0;
        padding: 0;
        position: fixed;
        z-index: 149;
        color: #0c0;
        background: rgba(0, 64, 0, 0.75);
    }

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

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

    #nav-icon {
        padding: 0;
    }

    #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 li a {}

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

    li.nav-item a:hover {
        background: rgb(240, 240, 240)
    }

    li.nav-item a:active {
        background: darkgreen;
        color: yellowgreen;
    }

    #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;
    }

    #nav {
        margin: 0;
        padding: 0;
        position: fixed;
        z-index: 149;
        color: #0c0;
        background: rgba(0, 64, 0, 0.75);
    }

    #nav a {
        color: yellowgreen;
        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%;
    }

    #nav menu li a {}

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

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

    li.nav-item a:hover {
        background: rgb(240, 240, 240)
    }

    li.nav-item a:active {
        background: darkgreen;
        color: yellowgreen;
    }

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