:root {
    /* The VS validator complains about putting this in rgba(), but it works. */
    --heading-back-color: 0, 24, 128;
    --heading-fore-color: 255, 255, 255;
    --link-color: 0, 64, 176;
    --hover-link-color: 255, 96, 0;
    --red: 255, 0, 0;
    --green: 48, 192, 36;
    --yellow: 255, 255, 0;
    --gray: 128, 128, 128;
}

body {
    background-color: #e8f4ff;
}

    body.main {
        background-image: url(/logowhite.png);
    }

input, select, textarea, .like-input {
    color: #000000;
    background-color: #ffffff;
}

div#user-menu {
    background-color: #f4ffff;
}

button, input[type=button], input[type=submit], input[type=reset], .button, a.primary {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(var(--heading-back-color), 0.75);
    color: #000000;
    box-shadow: inset -2px -2px 5px rgba(0,0,0,0.25);
}

    button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, .button:hover {
        background-color: rgba(var(--heading-back-color), 0.1);
        box-shadow: inset -2px -2px 5px rgba(0,0,0,0.25);
        color: #000000;
    }

    button.primary, input[type=button].primary, input[type=submit].primary, input[type=reset].primary, a.primary {
        background-color: rgba(var(--heading-back-color), 0.5);
        border-color: rgba(var(--heading-back-color), 0.75);
        color: #ffffff;
    }

        button.primary:hover, input[type=button].primary:hover, input[type=submit].primary:hover, input[type=reset].primary:hover, a.primary:hover {
            background-color: rgba(var(--heading-back-color), 0.75);
            color: #ffffff;
        }

.key {
    box-shadow: inset -2px -2px 5px rgba(0,0,0,0.25);
}

    .key:hover {
        box-shadow: inset -2px -2px 5px rgba(0,0,0,0.4);
    }