/* La2Top black experiment. Load after new.css and header.css.
   Enabled only by the black-preview body class on main/category/tag pages. */

body.black-preview {
    color: #d8dddf;
}

body.black-preview #header,
body.black-preview #left {
    background: #212425;
}

body.black-preview #right,
body.black-preview #chronicle-menu {
    background: #35393b;
}

body.black-preview #chronicletitle,
body.black-preview #righttitle,
body.black-preview #bookmark-button,
body.black-preview #chronicle-menu .short a,
body.black-preview #chronicle-menu .long a {
    background: #2c3032;
    color: #edf0f1;
}

body.black-preview #chronicle-menu .short a:hover,
body.black-preview #chronicle-menu .long a:hover,
body.black-preview #chronicle-menu .short a:focus,
body.black-preview #chronicle-menu .long a:focus {
    background: #454b4d;
    color: #ffbd55;
}

body.black-preview #serv,
body.black-preview #servVIP-RED,
body.black-preview #servVIP-GREEN,
body.black-preview .notfixed #servVIP-GOLD {
    background: #212425;
}

body.black-preview #serv,
body.black-preview #servVIP-RED,
body.black-preview #servVIP-GREEN,
body.black-preview #servVIP-GOLD {
    border-bottom-color: #383d3f;
}

body.black-preview #serv:hover,
body.black-preview #servVIP-RED:hover,
body.black-preview #servVIP-GREEN:hover,
body.black-preview .notfixed #servVIP-GOLD:hover {
    background: #2c3133;
}

/* The fixed GOLD row keeps its original red/orange gradient. */
body.black-preview #statusserv,
body.black-preview .date-header-wrapper #statusserv {
    background: transparent;
}

body.black-preview #done {
    background: #737d81;
}

body.black-preview #statusservVIP-GREEN,
body.black-preview .notfixed #statusservVIP-GREEN,
body.black-preview .notfixed #statusservVIP-RED,
body.black-preview .notfixed #statusservVIP-GOLD {
    background: #50595d;
    color: #fff;
}

body.black-preview #donmainopen a,
body.black-preview #donmainserv a {
    color: #bdc5c9;
}

body.black-preview #donmainopenVIP-RED a,
body.black-preview #donmainservVIP-RED a,
body.black-preview #donmainopenVIP-GREEN a,
body.black-preview #donmainservVIP-GREEN a {
    color: #ffffff;
}

body.black-preview .notfixed #donmainopenVIP-GOLD a {
    color: #ff7955;
}

body.black-preview #donmainopen a:hover,
body.black-preview #donmainserv a:hover,
body.black-preview #donmainopenVIP-RED a:hover,
body.black-preview #donmainservVIP-RED a:hover,
body.black-preview #donmainopenVIP-GREEN a:hover,
body.black-preview #donmainservVIP-GREEN a:hover,
body.black-preview .notfixed #donmainopenVIP-GOLD a:hover {
    color: #ffcf76;
}

body.black-preview #ratesserv,
body.black-preview #chronicleserv,
body.black-preview #dateserv,
body.black-preview #ratesservVIP-RED,
body.black-preview #chronicleservVIP-RED,
body.black-preview #dateservVIP-RED,
body.black-preview #ratesservVIP-GREEN,
body.black-preview #chronicleservVIP-GREEN,
body.black-preview #dateservVIP-GREEN,
body.black-preview .notfixed #ratesservVIP-GOLD,
body.black-preview .notfixed #chronicleservVIP-GOLD,
body.black-preview .notfixed #dateservVIP-GOLD,
body.black-preview .l2top-image.l2top-image-obt {
    color: #c2cace;
}

body.black-preview #left .date-label-yesterday,
body.black-preview #left .date-label-today,
body.black-preview #left .date-label-tomorrow {
    background: #424a4e;
    color: #f0f3f4;
}

body.black-preview .date-header-wrapper {
    background: #212425;
}

body.black-preview .date-header,
body.black-preview #newtitle,
body.black-preview #newtitle2,
body.black-preview #openedtitle {
    background: linear-gradient(to right, #2b2f32, #3b5c45);
    color: #eaf6ed;
    text-shadow: none;
}

body.black-preview .tab {
    background: #292e30;
    border-color: #697378;
    color: #e2e7e9;
}

body.black-preview .tab.active,
body.black-preview .tab:hover {
    background: #373023;
    border-color: #f3a100;
    color: #ffbd55;
}

body.black-preview .navigation a,
body.black-preview .navigation span {
    background: #394145;
    color: #e1e6e8;
}

body.black-preview .navigation a:hover {
    background: #515b60;
    color: #ffbd55;
}

body.black-preview #footer-top {
    background: #292e30;
    color: #d4dcdf;
}

body.black-preview #footer-top h1,
body.black-preview #footer-top h2,
body.black-preview #footer-top h3 {
    color: #f0f3f4;
}

body.black-preview #footer-top a {
    color: #ffbd55;
}

body.black-preview #footer-top hr {
    border: 0;
    border-top: 1px solid #505a5e;
}

body.black-preview #footer {
    background: #24292b;
}

body.black-preview #rights,
body.black-preview #copy {
    color: #c2cace;
}

body.black-preview #rights a {
    color: #e3e8ea;
}

@media (max-width: 460px) {
    /* new.css declares the mobile border with !important. */
    body.black-preview #serv,
    body.black-preview #servVIP-RED,
    body.black-preview #servVIP-GREEN,
    body.black-preview #servVIP-GOLD {
        border-bottom-color: #383d3f !important;
    }
}