:root {
    --body: #161616;
    --background-light: #202020;
    --background-dark: #0c0c0c;
    
    --background-red: #671414;
    --background-red-light: #7a1919;
    --background-red-dark: #5c1010;

    --border-color: #000000;
    --text-color: #c0c0c0;
    --text-dark: #060606;
    --link-color: #9c0d0b;
    --link-highlight: #b80d0d;
    --system-message: #8b0a0a;

    --modal-backdrop: rgba(0, 0, 0, 0.75);
    --modal-background: #141317;
    --modal-border: #000000;
    --modal-outline: #25232d;
    --modal-text-color: #c0c0c0;
    --modal-text-border: #1e1d23;

    --modal-cancel-background-light: #7a2828;
    --modal-cancel-background: #9e2d2d;
    --modal-cancel-background-dark: #7e1f1f;

    --modal-confirm-background-light: #382ba8;
    --modal-confirm-background: #361f8a;
    --modal-confirm-background-dark: #361f8a;
}

body {
    background-color: var(--body);
    color: var(--text-color);
}

#topMenu .leftMenu li, #topMenu .rightMenu li {
    background: var(--background-red)
        linear-gradient(to bottom, var(--background-red-light), var(--background-red), var(--background-red-dark));
    border-color: var(--border-color) !important;
}
#topMenu .leftMenu li:hover, #topMenu .rightMenu li:hover {
    background: var(--background-red-light);
}
#topMenu a {
    color: var(--text-color);
}

#container {
    background-color: var(--background-dark);
    border-color: var(--border-color) !important;
}

#systemMessage {
    color: var(--system-message);
}

#content .pageContent {
    background-color: var(--background-light);
    border-color: var(--border-color) !important;
}
#content .pageContent.small {
    width: var(--page-content-small-width);
}
#content .pageContent .header {
    background: var(--background-red-light) linear-gradient(to bottom, var(--background-red), var(--background-red-dark));
    border-color: var(--border-color) !important;
}
#content .pageContent hr {
    border-color: var(--border-color) !important;
}

.gameDescription {
    background-color: var(--background-light);
}
.gameDescription .quote {
    border-color: var(--background-red-light) !important;
}

.newsPost {
    background-color: var(--background-light);
    border-color: var(--border-color) !important;
}
.newsPost .header {
    background: var(--background-red-light) linear-gradient(to bottom, var(--background-red), var(--background-red-dark));
    border-color: var(--border-color) !important;
}

.basicForm input[type=submit] {
    background-color: var(--background-red);
    color: #ffffff;
    border-color: var(--border-color) !important;
}

.characterSelect {
    background-color: var(--background-light);
    border-color: var(--border-color) !important;
}

#sideMenu .menuSection {
    background-color: var(--background-light);
    border-color: var(--border-color) !important;
}
#sideMenu .menuSection .header {
    background-color: var(--background-red-dark);
}
#sideMenu .menuSection li {
    border-color: var(--border-color) !important;
}
#sideMenu .menuSection li:hover {
    background-color: var(--background-red-light);
}
#sideMenu .menuSection a {
    color: inherit;
}

#sideMenu .loginMenu .header {
    background-color: var(--background-red-dark);
}
#sideMenu .loginMenu {
    border-color: var(--border-color) !important;
    background-color: var(--background-light);
}
#sideMenu .loginMenu input[type=submit] {
    background-color: var(--background-red);
    color: #ffffff;
    border-color: var(--border-color) !important;
}
#sideMenu .loginMenu hr {
    border-color: var(--background-dark);
}
#sideMenu .loginMenu a, #sideMenu .loginMenu a:visited {
    color: var(--link-color);
}
#sideMenu .loginMenu a:hover {
    text-decoration: underline;
    color: var(--link-highlight);
}

#footer {
    background-color: var(--background-light);
    border-color: var(--border-color) !important;
}

/** Red Button Link **/
input[type=submit].redButton, button.redButton {
    background-color: var(--background-red);
    color: #ffffff !important;
    border-color: var(--border-color) !important;
}

/** Generic **/
a, a:visited {
    color: var(--link-color);
}
a:hover {
    color: var(--link-highlight);
}

/** modal **/
.modal_backdrop {
    background-color: var(--modal-backdrop);
}

.modal {
    border-color: var(--modal-border) !important;
    outline-color: var(--modal-outline) !important;
    background-color: var(--modal-background);
}

.modal_header {
    border-color: var(--modal-text-border) !important;
}

.modal_text {
    border-color: var(--modal-text-border) !important;
    color: var(--modal-text-color, #eee1c8);
}

.modal_cancel_button, .modal_close_button {
    background: linear-gradient(to bottom, var(--modal-cancel-background-light), var(--modal-cancel-background), var(--modal-cancel-background-dark)), var(--modal-cancel-background);
    color: var(--modal-text-color, #f3c4bc);
}

.modal_confirm_button {
    background: linear-gradient(to bottom, var(--modal-confirm-background-light), var(--modal-confirm-background), var(--modal-confirm-background-dark)), var(--modal-confirm-background);
    color: var(--modal-text-color);
}


.modal_cancel_button:hover, .modal_close_button:hover,
.modal_confirm_button:hover
{
    color: #ffffff;
}

/** Table **/
table.table, table.table td {
    background-color: var(--background-light);
    border-color: var(--border-color) !important;
}
table.table th {
    color: inherit;
    background: var(--background-red)
    linear-gradient(to bottom, var(--background-red-light), var(--background-red), var(--background-red-dark));
    border-color: var(--border-color) !important;
}