:root {
    --body: #161616;
    --background-light: #202020;
    --background-dark: #0c0c0c;

    --background-red: #671414;
    --background-red-light: #7a1919;
    --background-red-dark: #5c1010;

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

    --toggle_green: #15a315;

    --border-color: #000000;
}

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

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

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

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

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

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

.pageContent .staffMenu {
    border-color: var(--border-color) !important;
}
.pageContent .staffMenu .header {
    background: var(--background-red-light) linear-gradient(to bottom, var(--background-red), var(--background-red-dark));
    border-color: var(--border-color) !important;
}
.pageContent .staffMenu a {
    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;
}
.pageContent .staffMenu a:hover {
    background: var(--background-red-light);
}

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

#footer {
    background-color: var(--background-light);

    border-color: var(--border-color) !important;
}

a, a:visited {
    color: var(--link-color);
}
a:hover {
    color: var(--link-highlight);
}
input[type='submit'].redButton, button.redButton {
    background-color: var(--background-red);
    color: #ffffff;
    border-color: var(--border-color) !important;
}

/** TOGGLE SWITCH **/
.slider {
    background-color: #ccc;
}

.slider:before {
    background-color: #ffffff;
}

input:checked + .slider {
    background-color: var(--toggle_green);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--toggle_green);
}