SpikeNight

/*
 * Layout: SpikeNight
 * Erstellt von: aniSearch.com
 * Version 1.2.8.1
 * 2017-08-28
 */

/* Farben definieren */

$COLOR_A : #1a282c; // Hintergrund (Footer)
$COLOR_C : #3e434b;/*#292D33;*/ // Hauptmenü Popupeintrag (hover) + Seitenauswahl
$COLOR_B : darken(#292D33, 7%); // Hauptmenü (hover) + Button (hover) + Abschlussstrich Header
$COLOR_D : #FFFFFF; // Hauptmenü Schriftfarbe
$COLOR_E : #000000; // Allgemeine Schriftfarbe
$COLOR_F : grey;
$COLOR_G : silver;
$COLOR_H : #f6f6f6;
$COLOR_J : #616077; // Bewertungsstatstik

$COLOR_TEXT_DETAILS: white;
$COLOR_TEXT_EMPTY: #aaa;
$COLOR_TEXT_ACTIVE: white;
$COLOR_TEXT_HOVER: white;

$COLOR_M : #E0E0E0; // Table-Menu Textfarbe
$COLOR_N : #223035; // Table-Menu ausgewählt (hover)
$COLOR_O : #5A606B; // Button Erweiterte Suche

$COLOR_SEARCH_EVEN : #26292f; // Button Erweiterte Suche
$COLOR_SEARCH_ODD : lighten($COLOR_SEARCH_EVEN, 3%); // Button Erweiterte Suche

$COLOR_LINK : #bf4825; // ;#bf4825; // #bc4646; /* #ddc6a0 #7B9AB1  #bc4646*/
$COLOR_LINK_HEADER: #376599; //#2c4c71; // #9e564e;
$COLOR_MAINNAV : rgba(#525868, 0.5);
$COLOR_CONTENT : #141414;
$COLOR_CONTENT_TRANS : rgba(12,19,21, 0.5);
$COLOR_LOGOUT : #383838;    // #30393c; // Ausloggen Hintergrund
$COLOR_HOVER_OVERLAY : #333333;
$COLOR_COVERS : #192326 !important; // Hintergrund Galerie + Covers
$COLOR_COVERS_SHADOWS : $COLOR_F;
$COLOR_GRID : #5A606B;

$COLOR_HEADER_BORDER : #737882;
$COLOR_HEADER_BACKGROUND : #212121; // #bf4825;   // #e56038;
$COLOR_HEADER_EMPTY : #888;
$COLOR_HEADER_TEXT : $COLOR_TEXT_EMPTY;
$COLOR_HEADER_TEXT2 : silver;
$COLOR_HEADER_TEXT3 : black;

$COLOR_COVER_SHADOWS : lighten($COLOR_E, 20%);
$COLOR_IMAGE_BORDER : #000000;

$COLOR_START_BACKGROUND : #bf4825;
$COLOR_START_BOX_NAV : rgba(40, 48, 53, 0.9);;

$COLOR_DETAILS_PAGE_ACTION : white;
$COLOR_DETAILS_SUB2 : $COLOR_START_BACKGROUND;

$COLOR_EVEN :  #292929;
$COLOR_ODD : lighten($COLOR_EVEN, 3%);

$COLOR_SIDEBAR_BOX_BACKGROUND : $COLOR_EVEN;
$COLOR_SIDEBAR_BOX_SPACER : $COLOR_G;

$COLOR_RLIST : #EFEFEF;
$COLOR_RLIST_MODIFY : #E8D9BD;

$COLOR_COMMENTS_TIME : $COLOR_F;
$COLOR_COMMENTS_COMMENTS_HEADER : #656f83;

$COLOR_COMMENTS_EVEN_BACKGROUND : $COLOR_EVEN;
$COLOR_COMMENTS_ODD_BACKGROUND : lighten($COLOR_COMMENTS_EVEN_BACKGROUND, 3%);

$COLOR_COMMENTS_COMMENTS_ODD_BACKGROUND : darken($COLOR_COMMENTS_ODD_BACKGROUND, 3%);
$COLOR_COMMENTS_COMMENTS_EVEN_BACKGROUND : darken($COLOR_COMMENTS_ODD_BACKGROUND, 7%);

$COLOR_COMMENTS_PLUS : #D9EAAF;
$COLOR_COMMENTS_MINUS : #FFD8C1;
$COLOR_COMMENTS_READED : #D1E4FF;

$COLOR_FOOTER_TEXT : $COLOR_D;
$COLOR_FOOTER_BACKGROUND : darken($COLOR_HEADER_BACKGROUND, 7%);

$COLOR_THREAD_EVEN : $COLOR_EVEN;
$COLOR_THREAD_ODD : darken($COLOR_THREAD_EVEN, 3%);
$COLOR_THREAD_READED : transparent;
$COLOR_FORUM_TEXTMARKER_TEXT : #FFF;
$COLOR_FORUM_TEXTMARKER_BACKGROUND : #A53030;

$COLOR_ACCORDION : #4b4e4b;
$COLOR_SPOILER:  #4b4e4b;
$COLOR_QUOTE: #4b4e4b;

/*
    1 => Anime
    2 => Manga
    3 => Filme
    4 => Spiele
    5 => Plauderecke
    6 => Clubs
    7 => Hentai
    8 => Support
    9 => Lokalisierung
    10=>Entwicklung
    11=>Verwaltung
    57=> News
*/

$COLOR_FORUM_ID_0 : lighten($COLOR_CONTENT_TRANS, 5%);
$COLOR_FORUM_ID_1 : lighten($COLOR_CONTENT_TRANS, 6%);
$COLOR_FORUM_ID_2 : lighten($COLOR_CONTENT_TRANS, 7%);
$COLOR_FORUM_ID_3 : lighten($COLOR_CONTENT_TRANS, 8%);
$COLOR_FORUM_ID_4 : lighten($COLOR_CONTENT_TRANS, 9%);
$COLOR_FORUM_ID_5 : lighten($COLOR_CONTENT_TRANS, 10%);
$COLOR_FORUM_ID_6 : lighten($COLOR_CONTENT_TRANS, 11%);
$COLOR_FORUM_ID_7 : lighten($COLOR_CONTENT_TRANS, 12%);
$COLOR_FORUM_ID_8 : lighten($COLOR_CONTENT_TRANS, 13%);
$COLOR_FORUM_ID_9 : lighten($COLOR_CONTENT_TRANS, 14%);
$COLOR_FORUM_ID_10 : lighten($COLOR_CONTENT_TRANS, 15%);
$COLOR_FORUM_ID_11 : lighten($COLOR_CONTENT_TRANS, 16%);
$COLOR_FORUM_ID_57 : lighten($COLOR_CONTENT_TRANS, 17%);
$COLOR_FORUM_ID_495 : lighten($COLOR_CONTENT_TRANS, 18%);

$COLOR_FORUM_ID2_1 : rgba(226,93,107, 0.2);
$COLOR_FORUM_ID2_2 : rgba(119,171,119, 0.2);
$COLOR_FORUM_ID2_3 : rgba(157,175,91, 0.2);
$COLOR_FORUM_ID2_4 : rgba(122,163,160, 0.2);
$COLOR_FORUM_ID2_5 : rgba(119,119,195, 0.2);
$COLOR_FORUM_ID2_6 : rgba(241,185,118, 0.2);
$COLOR_FORUM_ID2_7 : rgba(191,122,191, 0.2);
$COLOR_FORUM_ID2_8 : rgba(113,99,99, 0.2);
$COLOR_FORUM_ID2_9 : rgba(239,150,150, 0.2);
$COLOR_FORUM_ID2_57 : rgba(237,211,75, 0.2);

$COLOR_POLL_ODD : lighten($COLOR_THREAD_READED, 7%);
$COLOR_POLL_EVEN : lighten($COLOR_THREAD_READED, 3%);
$COLOR_POLL_BACK : $COLOR_THREAD_READED;
$COLOR_POLLBAR1 : #63293C;
$COLOR_POLLBAR2 : #664121;
$COLOR_POLLBAR3 : #344E34;
$COLOR_POLLBAR4 : #3E5418;

/*
    1 => 'Bug',
    2 => 'Fixed',
    3 => 'Question',
    4 => 'Needs information',
    5 => 'Improvements',
    6 => 'Enhancement',
    7 => 'Future',
    8 => 'Maybe',
    9 => 'Refuse',
    10=> 'Spam'
*/
$COLOR_FORUM_TAG_1 : #FF4500;
$COLOR_FORUM_TAG_2 : #6B8E23;
$COLOR_FORUM_TAG_3 : #DAA520;
$COLOR_FORUM_TAG_4 : #FF7F50;
$COLOR_FORUM_TAG_5 : #8FBC8F;
$COLOR_FORUM_TAG_6 : #6495ED;
$COLOR_FORUM_TAG_7 : #4682B4;
$COLOR_FORUM_TAG_8 : #FF8C00;
$COLOR_FORUM_TAG_9 : #FF6347;
$COLOR_FORUM_TAG_10 : #696969;

$COLOR_THREAD_SUBSCRIPTION : #41C130;

$COLOR_EPISODES_STREAMS : #CE96C7;

$COLOR_MESSAGE_NOTICE : #313b38;
$COLOR_MESSAGE_ERROR : #6B2F22;
$COLOR_MESSAGE_SUCCESSSFUL : #375411;

$COLOR_PAGENAV_TEXT : $COLOR_F;
$COLOR_PAGENAV_TEXT2 : $COLOR_D;
$COLOR_PAGENAV_DEFAULT : $COLOR_C;
$COLOR_PAGENAV_ACTIVE : $COLOR_B;
$COLOR_PAGENAV_HOVER : darken($COLOR_C, 5%);

$COLOR_BUTTON_DEFAULT : lightgray;
$COLOR_BUTTON_HOVER :  lighten($COLOR_BUTTON_DEFAULT, 10%);
$COLOR_BUTTON_TEXT : darken($COLOR_BUTTON_DEFAULT, 50%);

$COLOR_CONTESTS_BACKGROUND : #DAB590;

$COLOR_PERSONALRATING_BACKGROUND : #ECEBEB;
$COLOR_PERSONALRATING_BORDER : $COLOR_G;

$COLOR_PRIORITY_1 : #EAC500;
$COLOR_PRIORITY_3 : $COLOR_F;
$COLOR_PRIORITY_5 : green;

$COLOR_GENRE : green;
$COLOR_SUBSIDIARY : #1BBD21;
$COLOR_TAGS : #8A762C;
$COLOR_TAGS_HENTAI : #E750E8;
$COLOR_CHARACTER_TAGS : #EEDEA1;
/*
    0 => Keine Auswahl
    1 => Angefangen
    2 => Abgeschlossen
    3 => Pausiert
    4 => Abgebrochen
    5 => Desinteressiert
    6 => Lesezeichen
*/
$COLOR_RATING_TYPE_0_BACKGROUND : $COLOR_COVERS;
$COLOR_RATING_TYPE_1_BACKGROUND : #73A973;
$COLOR_RATING_TYPE_2_BACKGROUND : #60789A;
$COLOR_RATING_TYPE_3_BACKGROUND : #B99F2D;
$COLOR_RATING_TYPE_4_BACKGROUND : #B33A3A;
$COLOR_RATING_TYPE_5_BACKGROUND : #A59999;
$COLOR_RATING_TYPE_6_BACKGROUND : #C37BE4;

$COLOR_RATING_TYPE_0_TEXT : #E5E2DA;
$COLOR_RATING_TYPE_1_TEXT : #4AA54A;
$COLOR_RATING_TYPE_2_TEXT : #3070C8;
$COLOR_RATING_TYPE_3_TEXT : #B79500;
$COLOR_RATING_TYPE_4_TEXT : #981717;
$COLOR_RATING_TYPE_5_TEXT : #7E7E7E;
$COLOR_RATING_TYPE_6_TEXT : #D57CFF;

$COLOR_PERSONAL_RATING_TYPE_1_FROM : #9ACE9A;
$COLOR_PERSONAL_RATING_TYPE_1_TO : #739073;
$COLOR_PERSONAL_RATING_TYPE_2_FROM : #82A1CE;
$COLOR_PERSONAL_RATING_TYPE_2_TO : #6B85A8;
$COLOR_PERSONAL_RATING_TYPE_3_FROM : #D8C165;
$COLOR_PERSONAL_RATING_TYPE_3_TO : #B7A256;
$COLOR_PERSONAL_RATING_TYPE_4_FROM : #DB7F7F;
$COLOR_PERSONAL_RATING_TYPE_4_TO : #BF4949;
$COLOR_PERSONAL_RATING_TYPE_5_FROM : #82A1CE;
$COLOR_PERSONAL_RATING_TYPE_5_TO : #B7ACAC;
$COLOR_PERSONAL_RATING_TYPE_6_FROM : #E6BAFF;
$COLOR_PERSONAL_RATING_TYPE_6_TO : #A889BC;

$COLOR_FAVORITES : #62AB62;

$COLOR_TOTOP : #423E3A;

#top {
    background-color: $COLOR_A;
}
a {
    color: $COLOR_LINK;
    font-size: 0.9375em;
}
body {
    color: $COLOR_TEXT_ACTIVE;
}
/***** HEADER ******************************************************************/

.menuitem > li {
    &:hover span, &.hover span {
        color: $COLOR_TEXT_EMPTY;
    }

    a {
        color: $COLOR_TEXT_ACTIVE;
    }

    span {
        color: lighten($COLOR_F, 2%);
    }
}

#header {
    background-color: $COLOR_HEADER_BACKGROUND;
    border-bottom: none;

    &:before {
        background: url(/media/styles/colors/0/1-header.jpg) repeat-x 50% 0;
        background-position: center;
        background-size: cover;
    }
}

#logo {
    background-image: none;

    &:before {
        content: "aniSearch";
        color: #ff7e00;
        font-size: 42px;
        mix-blend-mode: difference;
        float: left; /* TODO no underline*/
    }
}

#mainnav {
    @media screen and (min-width: $WIDTH_E) {
        background-color: transparent;
        background: linear-gradient(to top, $COLOR_HEADER_BACKGROUND 5%, transparent);
        color: $COLOR_D;

        .menu {
            padding-left: 10px;
            > li {
                &.hover {
                    background-color: rgba(255, 255, 255, 0.2);
                    @include box-shadow(unset);
                    border-radius: 0px;

                    .menuitem {
                        background-color: $COLOR_CONTENT;
                        @include box-shadow(-1px -1px 0px 0px $COLOR_B, 1px -1px 0px 0px $COLOR_B, 1px 1px 0px 0px $COLOR_B, -1px 1px 0px 0px $COLOR_B);
                    }
                }

                &.active {
                    background-color: transparent;
                    border-top-right-radius: 0px;
                    border-top-left-radius: 0px;

                    > h3 {
                        color: $COLOR_D;
                    }
                    &.hover {
                        background-color: rgba(255, 255, 255, 0.2);
                    }
                    &::after {
                        position: absolute;
                        content: '\25b2';
                        left: 40%;
                        bottom: 0px;
                        color: transparent;
                        width: 0;
                        height: 0;
                        border-style: solid;
                        border-width: 0 7px 5px 7px;
                        border-color: transparent transparent $COLOR_START_BACKGROUND transparent;
                    }
                }

                .menuitem {
                    background-color: $COLOR_CONTENT;
                    // background-image: linear-gradient(to bottom right, #0e0c0b 0, darkgrey 300%);
                    border-bottom-right-radius: 0px;
                    border-bottom-left-radius: 0px;
                    > li:hover, > li.hover {
                        background-color: darken($COLOR_CONTENT, 10%);
                    }
                }
                > a {
                    font-size: 19px;
                }

                &.hover{
                    .menuitem {
                        margin-top: 5px;
                    }
                    &::after {
                        content: "";
                        position: absolute;
                        left: 40%;
                        bottom: -5px;
                        color: transparent;
                        width: 0;
                        height: 0;
                        border-style: solid;
                        border-width: 0 7px 5px 7px;
                        border-color: transparent transparent $COLOR_CONTENT transparent;
                    }
                }
            }
        }
    }
}

#subnav {
    color: $COLOR_D;
    background-color: rgba($COLOR_B, .3);
}

#forumnav {
    > li {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        padding-right: 10px;
        padding-left: 0px;

        a {
            background-color: $COLOR_CONTENT; // $COLOR_START_BOX_NAV;/* $COLOR_MAINNAV */
            margin: 0px 0;
            color: $COLOR_TEXT_ACTIVE;
            font-size: 1.1em;
            text-transform: uppercase;
        }
        > ul > li {
            margin-bottom: 0px;
            > ul > li > a {
                color: $COLOR_LINK;
                font-size: 0.9em;
                text-transform: none;
            }
            > a {
                color: $COLOR_LINK;
                font-size: 0.9em;
                text-transform: none;
                padding-right: 25px;
            }
            > span {
                background-color: transparent;
                width: 25%;

                &:after{
                    content: "\25C0";
                    color: $COLOR_TEXT_EMPTY;
                }
                &.active::after {
                    content: "\25bc";
                }
            }
        }
        > span {
            background: transparent !important;
            width: 25%;

            &:after {
                content: none;
                color: $COLOR_TEXT_EMPTY;
            }
            &:hover::after
            {
                content: "\25C0";
            }
            &.active::after {
                content: "\25bc";
            }
        }
        .lasttime { /* personal no last time */
            display: none;
        }
    }
    li {
        &.active  > a {
            background: linear-gradient(to left, #141414, transparent 170%);
        }
    }
}

#topnav > li:first-child > a {
    color: $COLOR_D;
    background-color: transparent;
}

#avatar {
    background-color: $COLOR_D;

    > span {
        color: $COLOR_D;
        background-color: $COLOR_B;
        border-color: $COLOR_D;
    }

    .logout {
        background-color: $COLOR_LOGOUT;
    }

    .menuitem > li {
        a {
            color: $COLOR_TEXT_ACTIVE;
        }
        &:hover {
            background-color: $COLOR_C;
            background-color: darken($COLOR_CONTENT, 10%);
        }
    }

    &.hover {
        box-shadow: unset;
        background-color: rgba(255, 255, 255, 0.2);
        .menuitem {
            // background-image: linear-gradient(to left, #0e0c0b 0, darkgrey 300%);
            background-color: $COLOR_CONTENT;
            outline-color: $COLOR_B;
            margin-top: 6px;
        }
        &::after {
            content: "";
            position: absolute;
            right: 15px;
            bottom: -5px;
            color: transparent;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 7px 5px 7px;
            border-color: transparent transparent $COLOR_CONTENT transparent;
        }
    }
}

#usercp {
    box-shadow: none;
    background-color: transparent;

    &:after {
        color: $COLOR_D;
    }
    .menuitem {
        background-color: $COLOR_CONTENT;
        // background-image: linear-gradient(to left, #0e0c0b 0, darkgrey 300%);

        > li:hover {
            background-color: darken($COLOR_CONTENT, 10%);
        }
    }

    &.hover {
        background-color: transparent;
        box-shadow: unset;

        .menuitem {
            background-color: $COLOR_CONTENT;
            outline-color: $COLOR_B;
            margin-top: 6px;
        }
        &::before {
            content: "";
            position: absolute;
            right: 15px;
            top: unset;
            left: unset;
            bottom: -5px;
            color: transparent;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 7px 5px 7px;
            border-color: transparent transparent $COLOR_CONTENT transparent;
        }
    }
}

#sidenav-main {
    background-color: $COLOR_B;
    color: $COLOR_D;

    > .menu > li .menuitem > li {
        a {
            color: $COLOR_D;
        }

        &:hover {
            background-color: $COLOR_C;
            a > span {
                color: #858585;
            }
        }
    }
}

#menunav {
    @media screen and (max-width: $WIDTH_E) {
        color: $COLOR_D;
    }
}
#searchbox {
    background-color: $COLOR_C;
    border-bottom-color: $COLOR_B;

    #searchbar {
        border-color: $COLOR_J;
        background-color: $COLOR_H;

        > li {
            &:last-child {
                color: $COLOR_J;

                > select {
                    color: grey;

                    > option[selected] {
                        color: #FFF;
                    }
                }
            }
        }
    }

    #qadvsearch {
        color: #FFF;
    }
}

#qsearchA {
    border-color: $COLOR_D;
    color: $COLOR_D;
    left: 5px;
}

#qsearchB {
    border-color: $COLOR_D;
    color: $COLOR_D;
}

#home {
    color: $COLOR_D;
}

#icon-home  {
    background-color: $COLOR_D;
    color: $COLOR_E;
}
#icon-helpus  {
    background-color: $COLOR_D;
    color: red;
}
#icon-facebook {
    background-color: $COLOR_D;
    color: $COLOR_E;
}
#icon-instagram {
    background-color: $COLOR_D;
    color: $COLOR_E;
}
#icon-twitter {
    background-color: $COLOR_D;
    color: $COLOR_E;
}
#icon-google {
    background-color: $COLOR_D;
    color: $COLOR_E;
}

/***** CONTENT ******************************************************************/

#content {
    background-color: $COLOR_CONTENT;
    padding-top: 0px;
    overflow: hidden; /* TODO HOTFIX */
}

/***** BUTTONS ******************************************************************/

.selectbox > li > a {
    background-color: $COLOR_C;
    color: $COLOR_D;

    &:hover, &.active {
        background-color: $COLOR_B;
        color: $COLOR_D;
    }

    &.empty {
        background-color: grey;
    }
}

.sbuttonA, .sbuttonB {
    color: $COLOR_BUTTON_TEXT;
    border-radius: 0px;
    background-color: $COLOR_BUTTON_DEFAULT;

    &:hover {
        background-color: $COLOR_BUTTON_HOVER;
        color: COLOR_D;
    }
}
.bcolorC {
    background-color: $COLOR_B;
}
.bcolorD, .sbuttonA:hover.bcolorD {
    background-color: $COLOR_G;
}

.pbutton {
    color: $COLOR_D;
    background-color: $COLOR_SEARCH_EVEN;
}
.pbutton-container {
    border-color: $COLOR_O;
    border: none;
}

input.spoiler_button[type="button"], input[type="submit"], input[type="button"] {
    color: $COLOR_BUTTON_TEXT;
    border-radius: 0px;
    background-color: $COLOR_BUTTON_DEFAULT;
    box-shadow: none;
    border: none;
    &:hover {
        background-color: $COLOR_BUTTON_HOVER;
        color: COLOR_D;
    }
}
/***** TABS ******************************************************************/

.tabs {
    background-color: $COLOR_SEARCH_EVEN;
    color: $COLOR_D;

    > li {
        border-color: transparent;

        &.hover {
            border-color: $COLOR_D;
        }
    }
}
.tabs-content {
    background-color: $COLOR_SEARCH_ODD;
    color: $COLOR_D;
}

#tabs-content-filters {
    background-color: $COLOR_SEARCH_EVEN;

    #tabs-content-reset {
        color: $COLOR_E;
    }
}

#filters-items > li {
    background-color: $COLOR_A;
    color: $COLOR_D;

    &:hover {
        color: white;
    }

    &:hover {
        background-color: $COLOR_D !important;
        color: $COLOR_A !important;
    }
}

/***** HOME ******************************************************************/

.home-images > li > a {
    @include box-shadow(1px 1px 2px 0px $COLOR_COVER_SHADOWS);

    .title {
        @include gradient-linear($COLOR_HOVER_OVERLAY, $COLOR_HOVER_OVERLAY);
        color: $COLOR_D;

        > div {
            color: $COLOR_D;
        }
    }
}

ul.coversB {
    &.full > li > article > p:after {
        @include gradient-linear-fadeLR(#FFF, $COLOR_CONTENT);
    }

    > li > a {
        @include box-shadow(1px 1px 2px 0px $COLOR_COVER_SHADOWS);

        > .type {
            color: $COLOR_D;
            background-color: rgba($COLOR_E, .3);
        }

        .title {
            @include gradient-linear($COLOR_HOVER_OVERLAY, $COLOR_HOVER_OVERLAY);

            > h2 {
                color: $COLOR_D;
            }
        }
    }
}

/***** DETAILS ******************************************************************/

#start {
    background-color: $COLOR_START_BACKGROUND;
    // background-image: linear-gradient(to right, $COLOR_START_BACKGROUND 0, lighten($COLOR_START_BACKGROUND, 5%) 100%);
    background: linear-gradient(to top, #a1391b, transparent 700%);
    border-color: $COLOR_HEADER_BORDER;
    border-radius: 0px;
    border: none;
    margin-top: 0;
    color: $COLOR_D;

    #details-subs, #details-subsB {
        background-color: transparent;

        > li {
            padding-bottom: 0;
            border: none;
            background-color: transparent;

            > a {
                color: $COLOR_TEXT_DETAILS;
                border-color: transparent;

                &.active {
                    background-color: $COLOR_CONTENT;
                    border-color: transparent;
                    color: $COLOR_TEXT_ACTIVE;
                }

                &:hover {
                    color: $COLOR_TEXT_HOVER;
                    background-color: $COLOR_CONTENT;
                }
            }

            &.empty > a {
                color: $COLOR_TEXT_EMPTY;
            }
            &.active > a {
                    background-color: $COLOR_CONTENT;
                    border-color: transparent;
                    color: $COLOR_TEXT_ACTIVE;
            }
        }
    }
    #details-subsB {
        background-color: transparent;
        border-top: none;

        > li.empty {
            background-color: $COLOR_DETAILS_SUB2;
            > a {
                color: $COLOR_TEXT_EMPTY;
            }
        }
    }
    > div {
        > h1{
            font-size: 27px;
            > a {
                font-size: 27px;
                color: #04090A; // temp
            }
            &.actions {
                padding-bottom: 10px;
                padding-top: 5px;

                > span.subheader {
                    font-size: 27px;
                    color: white;
                }
                #htitle {
                    font-size: 27px;
                    color: $COLOR_HEADER_BACKGROUND;
                }
            }
        }
        > div, p {
            position: relative;
        }
    }
    &.start_page, &.start_details{
        border-bottom: none;
    }
}
#details-subsB {
    background-color: transparent;
     > li {
        background-color: $COLOR_DETAILS_SUB2;

        > a{
            color: $COLOR_TEXT_ACTIVE;
        }
        &.active > a {
            background-color: $COLOR_CONTENT;
            color: $COLOR_TEXT_ACTIVE;
        }
        &.empty {
            background-color: $COLOR_DETAILS_SUB2;
            > a {
                color: darken($COLOR_TEXT_EMPTY, 5%);
            }
        }
     }
}
#details-outer {
    #details-inner {
        > section {
            border-radius: 0px !important;
            border: none !important;
            background-color: transparent !important;

            &.empty > h2 {
                color: $COLOR_HEADER_EMPTY;
            }

            &.modified > h2 {
                color: red;
            }

            &.accordion > h2:after {
                color: $COLOR_HEADER_TEXT;
                background-color: transparent;
            }

            &.rpopup > h2 > div.rpopup-button {
                background-color: $COLOR_START_BOX_NAV;
                border-left: 1px dotted $COLOR_HEADER_BORDER;
                height: 14px;
                &:hover{
                    background-color: darken($COLOR_START_BOX_NAV, 5%);
                }
            }

            > h2 {
                background-color: transparent !important;
                border-bottom: 1px solid $COLOR_HEADER_BORDER;
                border-top: none;
                font-size: 1.4em;
                color: $COLOR_TEXT_ACTIVE !important;

                > a {
                    color: $COLOR_TEXT_EMPTY !important;
                    background-color: transparent !important;
                }
            }

            #cover {
                border-color: $COLOR_E;
                @include box-shadow(1px 1px 2px 0px $COLOR_COVER_SHADOWS);
            }

            .plist {
                > li {
                    border-bottom-color: $COLOR_SIDEBAR_BOX_SPACER;
                    background-color: $COLOR_EVEN;

                    &:nth-child(even) {
                        background-color: $COLOR_ODD;
                    }

                    > img.cover {
                        border-color: $COLOR_IMAGE_BORDER;
                    }

                    span.episodes {
                        color: $COLOR_F;
                    }

                    > div.kanji {
                        color: $COLOR_F;
                    }
                }
            }

            &#description {
                background-color: transparent;
            }
            #screens > a {
                border-color: $COLOR_IMAGE_BORDER;
                @include box-shadow(1px 1px 2px 0px $COLOR_COVER_SHADOWS);
            }
            .fseiyuu {
                > li {
                    background-color: darken($COLOR_EVEN, 3%);

                    > a.cover {
                        border-color: $COLOR_IMAGE_BORDER;
                    }

                    > div > span {
                        color: $COLOR_F;
                    }

                    &:nth-child(odd) {
                        background-color: $COLOR_ODD;
                    }
                }
            }

            table.rstats {
                td:nth-child(3) {
                    color: $COLOR_F;
                }

                td:last-of-type > div {
                    background-color: $COLOR_G;
                }
            }

            div.itemsbox > a {
                @include box-shadow(1px 1px 2px 0px $COLOR_COVER_SHADOWS);
            }
            &.sitemapbox > h2 {
                > a {
                    color: $COLOR_TEXT_EMPTY;
                }
                &::after{
                    color: $COLOR_TEXT_EMPTY;
                }
            }
        }
        .rpopup > h2 {
            font-size: 1em;
        }
        > header {
            margin-top: 0;
        }
    }

    #music tr {
        border-bottom-color: $COLOR_SIDEBAR_BOX_SPACER;
    }
}

.sbox1, .sbox2 {
    background-color: $COLOR_D;
    border-color: $COLOR_HEADER_BORDER;

    > h2 {
        color: $COLOR_HEADER_TEXT;
        background-color: $COLOR_HEADER_BORDER;
    }
}
.sbox2 {
    background-color: $COLOR_SIDEBAR_BOX_BACKGROUND;
}

#details-right {
    background-color: transparent;
    padding: 0px;
    > section {
        border-color: $COLOR_HEADER_BORDER;
        margin-bottom: 10px;
        border-radius: 0px;
        border: transparent;

        &.accordion {
            &.empty {
                border-color: $COLOR_HEADER_EMPTY;

                > h2 {
                    background-color: transparent;

                    > a {
                        background-color: $COLOR_HEADER_EMPTY;
                    }
                }
            }

            > h2:after {
                color: $COLOR_HEADER_TEXT;
            }
        }

        > h2 {
            color: $COLOR_TEXT_ACTIVE;
            background-color: transparent;
            border-bottom: 1px solid $COLOR_HEADER_BORDER;
            padding: 3px 10px;

            > a {
                color: $COLOR_HEADER_TEXT;
            }
        }
        > h2 + div{ /* Rechts Inhalt */
            font-size: 0.9375em;
        }

        div.itemsbox > a {
            @include box-shadow(1px 1px 2px 0px $COLOR_COVER_SHADOWS);
        }

        ul.streams-info > li {
            border-bottom-color: $COLOR_SIDEBAR_BOX_SPACER;

            > a {
                color: $COLOR_TEXT_EMPTY;

                > h3 {
                    color: $COLOR_TEXT_EMPTY;
                }

                > div.language {
                    color: $COLOR_F;
                }

                &:hover {
                    background-color: $COLOR_ODD;
                }
            }
        }

        #infos > li {
            border-bottom-color: $COLOR_SIDEBAR_BOX_SPACER;

            > div.header {
                color: $COLOR_F;
            }
        }

        ul.listsA > li {
            border-bottom-color: $COLOR_SIDEBAR_BOX_SPACER;

            > span {
                color: $COLOR_F;
            }
        }
    }
}

#page-action{
    > li {
        border: 1px solid $COLOR_DETAILS_PAGE_ACTION;
        border-radius: 0px;
        color: $COLOR_HEADER_TEXT;
        background-color: transparent;

        &:before {
            color: $COLOR_DETAILS_PAGE_ACTION;
        }

        &:hover {
            background-color: $COLOR_DETAILS_PAGE_ACTION;
            color: $COLOR_HEADER_TEXT3;

            &:before {
                color: $COLOR_HEADER_TEXT3;
            }
        }
    }
}
@media screen and (max-width: $WIDTH_E) {
    #page-action {
        right: 10px;
        top: -5px;
    }
}
#raterlist {
    &.full > li:nth-child(odd) {
        background-color: $COLOR_ODD;
    }

    > li {
        background-color: $COLOR_EVEN;
        border-bottom-color: $COLOR_SIDEBAR_BOX_SPACER;

        &:nth-child(odd) {
            background-color: $COLOR_ODD;
        }

        > i {
            color: silver;
        }

        > time {
            color: $COLOR_F;
        }
    }
}

.poll-option {
    background-color: $COLOR_POLL_EVEN;
}

.poll-option.odd {
    background-color: $COLOR_POLL_ODD;
}

.f10 {
    background-color: $COLOR_POLL_EVEN;
}

.f10.odd {
    background-color: $COLOR_POLL_ODD;
}

ul.rlist > li {
    background-color: $COLOR_RLIST;
    border-color: darken($COLOR_RLIST, 35%);
    color: $COLOR_E;

    &.modify {
        background-color: $COLOR_RLIST_MODIFY;
    }
    > label {
        color: $COLOR_E;
    }
    &.favorites > .rank {
        color: $COLOR_E;
    }
}

/***** COMMENTS ******************************************************************/

article.comment {
    border-radius: 0px;

    > .textblock{
        font-size: 0.9375em;
    }
    &:nth-child(odd) {
        background-color: $COLOR_COMMENTS_ODD_BACKGROUND;
        border-color: transparent; // lighten($COLOR_COMMENTS_ODD_BACKGROUND, 15%);

        > h2:first-of-type {
            color: $COLOR_HEADER_TEXT;
            background-color: rgba(128, 128, 128, .2);
        }
        > header {
            background-color: darken($COLOR_COMMENTS_ODD_BACKGROUND, 1%);
            border-color: lighten($COLOR_COMMENTS_ODD_BACKGROUND, 15%);
        }
        .page-share {
            background-color: $COLOR_BUTTON_DEFAULT;
            color: $COLOR_BUTTON_TEXT;
            &:hover {
                color: $COLOR_D;
            }
        }
    }

    &:nth-child(even) {
        background-color: $COLOR_COMMENTS_EVEN_BACKGROUND;
        border-color: transparent; // lighten($COLOR_COMMENTS_EVEN_BACKGROUND, 15%);

        > h2:first-of-type {
            color: $COLOR_HEADER_TEXT;
            background-color: rgba(128, 128, 128, .2);
        }
        > header {
            background-color: darken($COLOR_COMMENTS_EVEN_BACKGROUND, 1%);
            border-color: lighten($COLOR_COMMENTS_EVEN_BACKGROUND, 15%);
        }
        .page-share {
            background-color: $COLOR_BUTTON_DEFAULT;
            color: $COLOR_BUTTON_TEXT;
            &:hover {
                color: $COLOR_D;
            }
        }
    }

    &.plus {
        background-color: $COLOR_COMMENTS_PLUS !important;
    }
    &.minus {
        background-color: $COLOR_COMMENTS_MINUS !important;
    }
    &.readed {
        background-color: $COLOR_COMMENTS_READED !important;
    }

    // Forum: Kommentare in Kommentare
    > div.comments {
        > h3 {
            color: $COLOR_D;
            background-color: $COLOR_COMMENTS_COMMENTS_HEADER;
        }

        &[data-popup="true"] > h2:after {
            color: $COLOR_HEADER_TEXT;
            background-color: $COLOR_HEADER_BORDER;
        }

        > article {
            &:nth-child(odd) {
                background-color: $COLOR_COMMENTS_COMMENTS_ODD_BACKGROUND;
                border-color: lighten($COLOR_COMMENTS_COMMENTS_ODD_BACKGROUND, 10%);
                > header {
                    background-color: darken($COLOR_COMMENTS_COMMENTS_ODD_BACKGROUND, 1%);
                    border-color: lighten($COLOR_COMMENTS_COMMENTS_ODD_BACKGROUND, 10%);
                }
            }

            &:nth-child(even) {
                background-color: $COLOR_COMMENTS_COMMENTS_EVEN_BACKGROUND;
                border-color: lighten($COLOR_COMMENTS_COMMENTS_EVEN_BACKGROUND, 10%);
                > header {
                    background-color: darken($COLOR_COMMENTS_COMMENTS_EVEN_BACKGROUND, 1%);
                    border-color: lighten($COLOR_COMMENTS_COMMENTS_EVEN_BACKGROUND, 10%);
                }
            }
        }
    }

    > header {
        padding-bottom: 5px;
        border-bottom: 1px solid;

        time:before {
            color: $COLOR_COMMENTS_TIME;
        }

        > div.cpanel {

            > span:before {
                background-color: $COLOR_O;
            }

            > ul {
                background-color: $COLOR_O;

                > li:hover {
                    color: $COLOR_D;
                    background-color: darken($COLOR_O, 20%);
                }
            }
        }
    }

    > .rating {
        color: $COLOR_COMMENTS_TIME;
    }

    > div.fsig {
        border-top-color: $COLOR_COMMENTS_COMMENTS_HEADER;
        color: $COLOR_COMMENTS_TIME;
    }

    // Kategorien: "Story", "Animation", ...
    > ul.cstars  > li {
        color: $COLOR_A;
    }

    > div.updated {
        color: $COLOR_COMMENTS_TIME;
    }

    > footer {

        > span {
            color: $COLOR_COMMENTS_TIME;

            &:hover {
                color: $COLOR_E;
            }
        }

        > ul.crating {
            color: $COLOR_COMMENTS_TIME;
        }
    }
}

article.comment, article.news-details {
    > ul.badges  > li  > a {
        color: $COLOR_TEXT_ACTIVE;
        background-color: $COLOR_O !important;
    }
}
article.comment ul.badges > li > a, article.news-details ul.badges > li > a {
     background-color: $COLOR_BUTTON_DEFAULT !important;
}

#preview.textblock, #previewB.textblock {
    background-color: $COLOR_COMMENTS_ODD_BACKGROUND;
    border-color: darken($COLOR_COMMENTS_ODD_BACKGROUND, 50%);
}

div.source {
    color: $COLOR_COMMENTS_TIME;

    > a {
        color: $COLOR_COMMENTS_TIME;
    }
}

/***** PREMIUM ******************************************************************/

#premiumBox > li {
    background-color: #FFE;
    border-color: #D8BEB5;

    &.active {
        background-color: #D2F5A5;
        border-color: #97B274;
    }

    > .price {
        color: grey;

        > strong {
            color: #FFF;
        }
    }

    > .payment {
        color: grey;

        > img {
            border-color: #404;
        }
    }

    > .special {
        color: red;
    }
}

/***** FORUM ******************************************************************/

.forumindex > li {
    color: $COLOR_TEXT_EMPTY;
    background-color: $COLOR_THREAD_EVEN;
    border-left: none;
    border-right-width: 8px;
    border-right-style: solid;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;

    &.readed {
        background-color: $COLOR_THREAD_READED !important;
    }

    > div {
        color: $COLOR_TEXT_EMPTY;
        border-radius: 0px;
        background-color: $COLOR_CONTENT_TRANS !important;
        right: 0px;
    }

    &:nth-child(odd) {
        background-color: $COLOR_THREAD_ODD;
    }

    .itemQuestion:before, .itemAnswered:before, .itemPoll:before, .itemSticky:before {
        color: $COLOR_O;
    }

    > h3 > a {
        color: $COLOR_LINK_HEADER;
    }

    .FirstUnreadPost {
            &::before {
                color: $COLOR_LINK;
            }
        }
}

.textmarker {
    background-color: $COLOR_FORUM_TEXTMARKER_BACKGROUND;
    color: $COLOR_FORUM_TEXTMARKER_TEXT;
}

Element {
}
#forumnav > li > span {
    background: transparent !important;
    width: 25%;
}
#forumnav > li > span, #forumnav > li > ul > li > span {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 30px;
    cursor: pointer;
}

.forumC1 { background-color: darken(#e25d6b, 40%);}
.forumC2 { background-color: darken(#4b88e4, 40%);}
.forumC3 { background-color: darken(#9daf5b, 25%);}
.forumC4 { background-color: darken(#7aa3a0, 35%);}
.forumC5 { background-color: darken(#7777c3, 35%);}
.forumC6 { background-color: darken(#f1b976, 40%);}
.forumC7 { background-color: darken(#bf7abf, 40%);}
.forumC57 { background-color: darken(#edd34b, 40%);}
.forumC8 { background-color: darken(#716363, 30%);}

.forumB1 { border-color: darken(#e25d6b, 40%);}
.forumB2 { border-color: darken(#4b88e4, 40%);}
.forumB3 { border-color: darken(#9daf5b, 25%);}
.forumB4 { border-color: darken(#7aa3a0, 35%);}
.forumB5 { border-color: darken(#7777c3, 35%);}
.forumB6 { border-color: darken(#f1b976, 40%);}
.forumB7 { border-color: darken(#bf7abf, 40%);}
.forumB57 { border-color: darken(#edd34b, 40%);}
.forumB8 { border-color: darken(#716363, 30%);}

.itemCounter.forumC0 { border-right: 7px solid  $COLOR_FORUM_ID_0;}
.itemCounter.forumC1 { border-right: 7px solid  $COLOR_FORUM_ID2_1;}
.itemCounter.forumC2 { border-right: 7px solid  $COLOR_FORUM_ID2_2;}
.itemCounter.forumC3 { border-right: 7px solid  $COLOR_FORUM_ID2_3;}
.itemCounter.forumC4 { border-right: 7px solid  $COLOR_FORUM_ID2_4;}
.itemCounter.forumC5 { border-right: 7px solid  $COLOR_FORUM_ID2_5;}
.itemCounter.forumC6 { border-right: 7px solid  $COLOR_FORUM_ID2_6;}
.itemCounter.forumC7 { border-right: 7px solid  $COLOR_FORUM_ID2_7;}
.itemCounter.forumC8 { border-right: 7px solid  $COLOR_FORUM_ID2_8;}
.itemCounter.forumC9 { border-right: 7px solid  $COLOR_FORUM_ID2_9;}
.itemCounter.forumC10 { border-right: 7px solid  $COLOR_FORUM_ID_10;}
.itemCounter.forumC11 { border-right: 7px solid  $COLOR_FORUM_ID_11;}
.itemCounter.forumC57 { border-right: 7px solid  $COLOR_FORUM_ID2_57;}

ul.mtags > li {
    color: $COLOR_D;

    &.mtag1 { background-color: $COLOR_FORUM_TAG_1; }
    &.mtag2 { background-color: $COLOR_FORUM_TAG_2; }
    &.mtag3 { background-color: $COLOR_FORUM_TAG_3; color:#FFF; }
    &.mtag4 { background-color: $COLOR_FORUM_TAG_4; }
    &.mtag5 { background-color: $COLOR_FORUM_TAG_5; }
    &.mtag6 { background-color: $COLOR_FORUM_TAG_6; }
    &.mtag7 { background-color: $COLOR_FORUM_TAG_7; }
    &.mtag8 { background-color: $COLOR_FORUM_TAG_8; }
    &.mtag9 { background-color: $COLOR_FORUM_TAG_9; }
    &.mtag10 { background-color: $COLOR_FORUM_TAG_10; }
}

.newreply {
    color: $COLOR_D;
}

ul.post-panel {
    width: auto;
    float: right;
    > li {
        &.newreply {
            display: none;
            float: left;
        }
        &.quote {
            display: inline-block;
        }
        &.add-comment {
            display: inline-block;
        }
    }
    &:hover > li {
        &.quote, &.add-comment, &.report, &.addemicon1, &.addemicon2, &.addemicon3, &.edit, &.delete, &.newreply {
            display: inline-block;
            background-color: darken($COLOR_BUTTON_DEFAULT, 10%);
        }
        &.menu {
            display: none;
        }
    }
}

ul.post-panel > li, ul.review-panel > li, ul.gbook-panel > li, ul.poll-panel > li {
    background-color: $COLOR_BUTTON_DEFAULT;
}

#itemSubscriptionBox {
    background-color: $COLOR_THREAD_SUBSCRIPTION;

    > ul > li {
        > div {
            border-left-color: $COLOR_E;
        }

        &.selected {
            background-color: darken($COLOR_THREAD_SUBSCRIPTION, 8%);

            > div {
                border-left-color: $COLOR_D;
            }
        }

        &:hover {
            background-color: lighten($COLOR_THREAD_SUBSCRIPTION, 20%);
        }
    }
}

#forumCategories > li {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;

    a {
        background-color: lighten($COLOR_ODD, 5%);
        opacity: 0.9;
        color: $COLOR_D;

        &.bold {
            background-color: $COLOR_ODD;
        }
    }

    .lasttime {
        color: $COLOR_E;
        background-color: $COLOR_G;
    }

    &.forumC1 a.bold {
        background-color: $COLOR_FORUM_ID2_1;
    }
    &.forumC2 a.bold {
        background-color: $COLOR_FORUM_ID2_2;
    }
    &.forumC3 a.bold {
        background-color: $COLOR_FORUM_ID2_3;
    }
    &.forumC4 a.bold {
        background-color: $COLOR_FORUM_ID2_4;
    }
    &.forumC5 a.bold {
        background-color: $COLOR_FORUM_ID2_5;
    }
    &.forumC6 a.bold {
        background-color: $COLOR_FORUM_ID2_6;
    }
    &.forumC7 a.bold {
        background-color: $COLOR_FORUM_ID2_7;
    }
    &.forumC8 a.bold {
        background-color: $COLOR_FORUM_ID2_8;
    }
    &.forumC9 a.bold {
        background-color: $COLOR_FORUM_ID2_9;
    }
    &.forumC57 a.bold {
        background-color: $COLOR_FORUM_ID2_57;
    }
}

#newthread {
    color: $COLOR_D;
    border-radius: 0px;
    background-color: lighten($COLOR_B, 5%);
    &:hover {
        background-color: $COLOR_B;
    }
}

#pollFrame {
    background-color: $COLOR_THREAD_READED;
    border-color: darken($COLOR_THREAD_READED, 30%);
}

#answer, .fcategory {
    background-color: transparent;

    > h2:first-of-type {
        color: $COLOR_D;
    }
}

.pollbar1 { background-color: $COLOR_POLLBAR1; }
.pollbar2 { background-color: $COLOR_POLLBAR2; }
.pollbar3 { background-color: $COLOR_POLLBAR3; }
.pollbar4 { background-color: $COLOR_POLLBAR4; }

.prominent {
    background-color: rgba(125, 125, 125, 0.1);
}

#thread-controls {
    background-color: transparent;
    .mpopup > li {
        > div {
            background-color: $COLOR_BUTTON_DEFAULT;
            color: $COLOR_BUTTON_TEXT;
        }
        > ul.mitems {
            background-color: $COLOR_CONTENT;
            border: 1px solid $COLOR_BUTTON_DEFAULT;
            > li {
                > span {
                    color: $COLOR_TEXT_EMPTY;
                }
                > a {
                    color: $COLOR_TEXT_ACTIVE;
                    &:hover {
                        background-color: rgba(255, 255, 255, 0.2);
                    }
                }
            }
        }
    }
    #newestpost {
        color: $COLOR_TEXT_ACTIVE;
    }
}
#threads-navigation > a {
    background-color: $COLOR_BUTTON_DEFAULT;
    color: $COLOR_BUTTON_TEXT;
    &:hover {
        background-color: $COLOR_BUTTON_HOVER;
    }
}
/***** COVERS + GALERIE + TABLE ******************************************************************/

.responsive-table {
    &.episodes tbody td:nth-child(4) ul.cloud > li > a {
        background-color: COLOR_EPISODES_STREAMS !important;
    }

    @media (min-width: $WIDTH_F) {
        &.episodes tbody td:nth-child(2) {
            color: $COLOR_TEXT_EMPTY;
        }
    }

    thead th {
        background-color: rgba($COLOR_GRID ,1);
        border-color: rgba($COLOR_GRID,1);
        color: $COLOR_D;

        > a {
            color: $COLOR_D;
        }
    }

    td.rating > .quick:hover {
        color: $COLOR_E;
    }

    tbody {
        tr {
            background-color: $COLOR_EVEN;
            border-color: rgba($COLOR_GRID,1);

            > th, td {
                background-color: unset !important;
            }

            @media (min-width: $WIDTH_F) {
                &:nth-child(odd) {
                    background-color: $COLOR_ODD;
                }
                &.even {
                    > tr, td, th {
                        background-color: unset !important;
                    }
                }
            }
        }

        th[scope="row"] {
            background-color: rgba($COLOR_GRID,1);
            border-bottom-color: rgba($COLOR_GRID,1);

            > a {
                color: $COLOR_D;
            }

            div {
                color: $COLOR_E;
            }

            @media (min-width: $WIDTH_F) {
                background-color: transparent;
                color: $COLOR_TEXT_EMPTY;
                > a {
                    color: $COLOR_LINK;
                }
            }
        }

        td {
            @media (min-width: $WIDTH_F) {
                border-bottom-color: rgba($COLOR_GRID,1);
            }
        }

        td[data-title]:before {
            color: $COLOR_F !important;
        }
    }
}

/***** GALLERY ******************************************************************/

.gallery > li {
    background-color: $COLOR_COVERS;
    @include box-shadow(1px 1px 2px 0px $COLOR_COVERS_SHADOWS);

    > a {
        > .rank {
            color: $COLOR_D;
            background-color: rgba($COLOR_E, .3);
        }

        .title {
            @include gradient-linear($COLOR_HOVER_OVERLAY, $COLOR_HOVER_OVERLAY);

            > h2 {
                color: $COLOR_D;

                > .date {
                    color: $COLOR_D;
                }
            }

            > div {
                color: $COLOR_B;
            }
        }
    }

    > .rating {
        > .quick {
            color: rgba($COLOR_D, .7);

            &:hover {
                color: $COLOR_D;
            }
        }
    }

    > .genre {
        color: $COLOR_D;
    }

    > .episodes {
        color: $COLOR_D;
    }

    > .text {
        color: $COLOR_D;

        > span {
            color: $COLOR_E;
        }

        > a {
            color: $COLOR_D;
        }
    }
}

/***** COVERS ******************************************************************/

.covers, .gallery {
    &.header > li > a > .header {
        color: $COLOR_E;
        background-color: rgba($COLOR_D, .7);
    }

    > li {
        background-color: $COLOR_COVERS;

        > a {
            > .rank {
                color: $COLOR_D;
                background-color: rgba($COLOR_E, .3);
            }

            .title {
                // @include gradient-linear($COLOR_HOVER_OVERLAY, $COLOR_HOVER_OVERLAY);
                background: none;   // fix

                > h2 {
                    color: $COLOR_D;

                    > .date {
                        color: $COLOR_D;
                    }
                }

                > div {
                    color: inherit;
                }
            }
        }

        > .rating {
            > .quick {
                color: rgba($COLOR_D, .7);

                &:hover {
                    color: $COLOR_D;
                }
            }
        }

        > .genre {
            color: $COLOR_D;
        }
    }
}

/***** THUMBS ******************************************************************/

.thumbs > li {
    background-color: $COLOR_COVERS;
    @include box-shadow(1px 1px 2px 0px $COLOR_COVERS_SHADOWS);

    > a > .rank {
        color: $COLOR_D;
        background-color: rgba($COLOR_E, .3);
    }
}

/***** LOGIN ******************************************************************/

#errors {
    color: red;
}

#loginbox > li {
    > h2 {
        border-bottom-color: $COLOR_F;
    }

    > div:first-of-type {
        border-color: $COLOR_G;
        background-color: $COLOR_D;
        color: $COLOR_E;
    }
}

ul.checklist > li > div {
    color: $COLOR_F;
}

/***** FOOTER ******************************************************************/
#footer {
    background-color: $COLOR_FOOTER_BACKGROUND;
    background: linear-gradient(to top, #212121, transparent 700%), url(/media/styles/colors/0/1-header.jpg);
    background-position: center top;
    border-top: none;
    background-repeat: repeat;
    background-size: cover;
    h4 {
        color: $COLOR_FOOTER_TEXT;
        border-bottom-color: $COLOR_FOOTER_TEXT;
        mix-blend-mode: difference;
    }

    a {
        color: darken($COLOR_FOOTER_TEXT, 30%);
        mix-blend-mode: difference;
    }
    #footer-languages > a {
        mix-blend-mode: initial;
    }
}


#footer-info {
    color: $COLOR_TEXT_DETAILS;
}
/***** MEMBER-STATS ******************************************************************/

.members-stats > li {
    background-color: $COLOR_COMMENTS_EVEN_BACKGROUND;
    border-color: darken($COLOR_COMMENTS_EVEN_BACKGROUND, 20%);

    &:nth-child(odd) {
        background-color: $COLOR_COMMENTS_ODD_BACKGROUND;
        border-color: darken($COLOR_COMMENTS_ODD_BACKGROUND, 20%);
    }

    td > span {
        color: $COLOR_F;
    }
}

/***** MESSAGES ******************************************************************/

.msgBox {
    color: $COLOR_D;

    > div {
        &.notice {
            background-color: $COLOR_MESSAGE_NOTICE;
            border-color: darken($COLOR_MESSAGE_NOTICE, 20%);
        }

        &.successful {
            background-color: $COLOR_MESSAGE_SUCCESSSFUL;
            border-color: darken($COLOR_MESSAGE_SUCCESSSFUL, 20%);
        }

        &.error {
            background-color: $COLOR_MESSAGE_ERROR;
            border-color: darken($COLOR_MESSAGE_ERROR, 20%);
        }
    }
}

.urgent-msg {
    background-color: lighten($COLOR_THREAD_READED, 5%);
    border-bottom-color: $COLOR_B;
    color: $COLOR_E;
}
#contests-msg {
    background-color: $COLOR_CONTESTS_BACKGROUND;
    border-bottom-color: $COLOR_B;

    #contestsBox > li {
        > img {
            border-color: $COLOR_E;
        }

        .contestClose {
            color: $COLOR_F;

            &:hover {
                color: $COLOR_D;
            }
        }
    }
}

/***** NEWS-PAGE ******************************************************************/

#start.news-details {
    color: $COLOR_TEXT_ACTIVE;
    margin-top: 10px;
    > header > h1 > a {
        color: $COLOR_TEXT_EMPTY;
    }
    &::before{
        content: none;
    }
}

/***** PAGENAV ******************************************************************/

.pagenav {
    > span, > a {
        border-color: $COLOR_PAGENAV_TEXT;
    }
    >li > a {
        border-color: $COLOR_PAGENAV_DEFAULT;
        background-color: $COLOR_PAGENAV_DEFAULT;
        color: $COLOR_PAGENAV_TEXT2;

        &:hover {
            background-color: $COLOR_PAGENAV_HOVER;
            border-color: $COLOR_PAGENAV_HOVER;
        }
        &.pagenav-current {
            background-color: $COLOR_PAGENAV_ACTIVE;
            border-color: $COLOR_PAGENAV_ACTIVE;
            color: $COLOR_PAGENAV_TEXT2;
        }
    }
}
.pagenav-info {
    color: $COLOR_PAGENAV_TEXT;
}

/***** PARTNERS ******************************************************************/

#partnerlist > li {
    border-color: $COLOR_J;
}

/***** SHOP ******************************************************************/

#productlist > li {
    &:nth-child(even) {
        background-color: $COLOR_ODD;
    }

    > div.details {
        color: $COLOR_F;
    }
}

/***** TABLE-MENU ******************************************************************/

#table-menu > li {
    color: $COLOR_M;
    background-color: $COLOR_SEARCH_EVEN;

    > h4 {
        color: $COLOR_M;
    }

    &.hover {
        border: none;
        background-color: $COLOR_SEARCH_ODD;
        color: $COLOR_D;

        > h4 {
            color: $COLOR_D;
        }
    }
}
#table-menu-content > div {
    background-color: $COLOR_SEARCH_ODD;
    color: $COLOR_D;
}

/***** ABC ******************************************************************/

#indexABC {
    > li {
        background-color: $COLOR_C;

        &.active, &:hover {
            background-color: $COLOR_B;
        }
    }

    a {
        color: $COLOR_D;
    }
}

/***** RATINGS ******************************************************************/

div.quick {
    color: $COLOR_F;

    &:hover {
        color: $COLOR_E;
    }
}

#ratingBox > div {
    background-color: $COLOR_D;
    border-color: $COLOR_A;

    > header {
        background-color: $COLOR_A;
        color: $COLOR_D;

        #ratingQuestion {
            color: $COLOR_F;

            &:hover {
                color: $COLOR_B;
            }
        }

        #ratingClose {
            color: $COLOR_F;

            &:hover {
                color: $COLOR_D;
            }
        }
    }

    > footer {
        color: $COLOR_E;
        #ratingMode {
            color: $COLOR_B;
        }

        #box_delete {
            color: red;
        }

        #submit-button {
            border-top-color: $COLOR_A;
            color: $COLOR_E;
        }
        #submit-button-right > label {
             color: $COLOR_E;
        }
    }
    #ratingSettings {
            > tbody > tr > td {
                color: $COLOR_E;
            }
            > tbody > tr > td:first-child {
                color: $COLOR_E;
            }
            tr > td {
            &:first-child > span {
                color: $COLOR_F;
            }

            &:last-child {
                > .setDateToday {
                    color: $COLOR_B;
                }

                #question {
                    color: $COLOR_F;
                }
            }

            #eplus {
                background-color: $COLOR_C;
                color: $COLOR_D ;

                &:hover {
                    background-color: $COLOR_B;
                }
            }
        }

        #maxEpisodes {
            background-color: $COLOR_C;
            color: $COLOR_D;

            &:hover {
                background-color: $COLOR_B;
            }
        }
    }
}

#cstar-rating > div {
    color: $COLOR_B;
}
.cstar-reset {
    color: $COLOR_B;
}

#ratings ul#rating-stats {
    width: 100%;
    padding-left: 10px;

    > li {
        background-color: silver;

        &:hover, &.max {
            border-color: $COLOR_J;
        }

        > a > div {
            background-color: $COLOR_J;
        }

        > div.value {
            color: $COLOR_F;
        }

        #fromStar, #toStar {
            color: $COLOR_G;
        }
    }
}

// Personalisierte Bewertung
.rating0 {
    border-color: $COLOR_PERSONALRATING_BORDER;
    background-color: $COLOR_PERSONALRATING_BACKGROUND;

    > div {
        border-right-color: $COLOR_PERSONALRATING_BORDER;
    }
}
.rating1 { @include gradient-linear-LefttoRight($COLOR_PERSONAL_RATING_TYPE_1_FROM, $COLOR_PERSONAL_RATING_TYPE_1_TO); }
.rating2 { @include gradient-linear-LefttoRight($COLOR_PERSONAL_RATING_TYPE_2_FROM, $COLOR_PERSONAL_RATING_TYPE_2_TO); }
.rating3 { @include gradient-linear-LefttoRight($COLOR_PERSONAL_RATING_TYPE_3_FROM, $COLOR_PERSONAL_RATING_TYPE_3_TO); }
.rating4 { @include gradient-linear-LefttoRight($COLOR_PERSONAL_RATING_TYPE_4_FROM, $COLOR_PERSONAL_RATING_TYPE_4_TO); }
.rating5 { @include gradient-linear-LefttoRight($COLOR_PERSONAL_RATING_TYPE_5_FROM, $COLOR_PERSONAL_RATING_TYPE_5_TO); }
.rating6 { @include gradient-linear-LefttoRight($COLOR_PERSONAL_RATING_TYPE_6_FROM, $COLOR_PERSONAL_RATING_TYPE_6_TO); }

li.ftype1 { outline-color: $COLOR_FAVORITES !important; }
a.ftype1 { color: $COLOR_FAVORITES !important; }

.rtype0 { color: $COLOR_RATING_TYPE_0_TEXT !important; }
.rtype1 { color: $COLOR_RATING_TYPE_1_TEXT !important; }
.rtype2 { color: $COLOR_RATING_TYPE_2_TEXT !important; }
.rtype3 { color: $COLOR_RATING_TYPE_3_TEXT !important; }
.rtype4 { color: $COLOR_RATING_TYPE_4_TEXT !important; }
.rtype5 { color: $COLOR_RATING_TYPE_5_TEXT !important; }
.rtype6 { color: $COLOR_RATING_TYPE_6_TEXT !important; }

.btype0 { background-color: $COLOR_RATING_TYPE_0_BACKGROUND !important; }
.btype1 { background-color: $COLOR_RATING_TYPE_1_BACKGROUND !important; }
.btype2 { background-color: $COLOR_RATING_TYPE_2_BACKGROUND !important; }
.btype3 { background-color: $COLOR_RATING_TYPE_3_BACKGROUND !important; }
.btype4 { background-color: $COLOR_RATING_TYPE_4_BACKGROUND !important; }
.btype5 { background-color: $COLOR_RATING_TYPE_5_BACKGROUND !important; }
.btype6 { background-color: $COLOR_RATING_TYPE_6_BACKGROUND !important; }

.addEpisode {
    border-color: $COLOR_A;
    background-color: $COLOR_D;

    &:after {
        background-color: $COLOR_A;
        color: $COLOR_D;
    }
}

.secret {
    color: red;
}
.priority-5, .priority-1 {
    color: red;
}
.priority-1 {
    color: $COLOR_PRIORITY_1;
}
.rewatch-3 {
    color: $COLOR_PRIORITY_3;
}
.rewatch-5 {
    color: $COLOR_PRIORITY_5;
}

ul.cloud > li {
    > a {
        color: #FFF;
        background-color: silver;
    }

    .plus { background-color:#8FA063 !important; }
    .minus { background-color:#DC7373 !important; }
    .read { background-color:#90B4D2 !important; }
}

a, li {
    &.gg { background-color: $COLOR_GENRE !important; }
    &.gc { background-color: $COLOR_SUBSIDIARY !important; }
    &.gt { background-color: $COLOR_TAGS !important; }
    &.gh { background-color: $COLOR_TAGS_HENTAI !important; }
    &.ct { background-color: $COLOR_CHARACTER_TAGS !important; }
}

span {
    &.gg { color: $COLOR_GENRE !important; }
    &.gc { color: $COLOR_SUBSIDIARY !important; }
    &.gt { color: $COLOR_TAGS !important; }
    &.gh { color: $COLOR_TAGS_HENTAI !important; }
    &.ct { color: $COLOR_CHARACTER_TAGS !important; }
}

/***** INPUTS ******************************************************************/

input[type=text], input[type=password] {
    border-color: silver;
}
input[type=text]:focus, input[type=password]:focus {
    @include box-shadow(0 0 5px rgba(0,0,0,.3));
    border-color: grey;
}
.clearable-icon {
    color: grey;
}
.clearable-icon:hover {
    color: #FFF;
}

select, input {
    background-color: #f6f6f6;
    border-color: silver;
}
select:focus {
    @include box-shadow(0 0 5px rgba(0,0,0,.3));
    border-color: grey;
}

input[type="submit"], input[type="button"] {
    color: #636363;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #fafafa;
    @include gradient-linear-image(#ffffff, #e6e6e6);
    border-color: #CCC;
    border-bottom-color:#BBB;
    -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
input[type="button"].red {
    color: red;
}
input[type="submit"] {

    &.red {
        color: red;
    }
    &.green {
        color: green;
    }
}
input[type="submit"]:hover,input[type="button"]:hover {
    color: #333;
    background-color: #e6e6e6;
}
input[type=submit]:disabled, button[disabled]:hover {
    color: silver;
}

/*
    USERCP/INPUT
*/

.ricon {
    color: grey;

    &:hover {
        color: #FFF;
    }
}

.inputBox-Header {
    background-color: $COLOR_THREAD_READED;
    border-color: darken($COLOR_THREAD_READED, 10%);

    > .inputBox-List {
        background-color: $COLOR_THREAD_ODD;
    }
}

#database {
    .input, label {
        &.changed {
            background-color: #FFFF66;
        }
    }

    .rlist > li {
        &.append {
            background-color:#BEF3A5;
        }
        &.modify {
            background-color:#C9DDD0;
        }
        &.selected {
            border-color: green;
        }
        &.deleted {
            background-color: #CCC184;
        }
    }
}

#imagelist > li {
    background-color: #F3ECE4;
}

#seiyuulists span.fa-close {
    color: grey;
}

/***** DATABASE: QUEUE ******************************************************************/

.qbox0, .qbox1, .qbox2, .qbox3 {
    color: black;
}
.qbox1 strong,
.qbox2 strong,
.qbox3 strong {
    color: white;
}
.qbox1 span,
.qbox2 span,
.qbox3 span {
    color: #DC4141;
}
.qbox0 { background-color: #DDD; }
.qbox1 { background-color: #8EC8F1; }
.qbox2 { background-color: #A3DF8A; }
.qbox3 { background-color: #F19D9D; }

/****** UI WIDGET ******************************************************************/

.ui-widget-content {
    background-color: #F2F2F2;
    border-color: $COLOR_J;
    color: #222222;
}

/***** AUTOCOMPLETE ******************************************************************/

.ui-menu .ui-menu-item {
    border-bottom-color: #E4E4E4;
}
.ui-menu-item.ui-state-focus,
.ui-menu-item.ui-state-active {
    background-color:#EFEADC;
}
.lastitem {
    background-color:#E4E4E4;
}
.ui-menu .ui-menu-item > span {
    color: $COLOR_TEXT_EMPTY;

    > span {
        color: grey;
    }
}
.ui-menu .ui-menu-item > span.black {
    color: $COLOR_E;
}

/***** SORTABLE ******************************************************************/

.rlist li.ui-sortable-handle:before {
    color: grey;
}
.ui-sortable li.highlighter {
    background-color: silver;
}

/***** SELECTMENU ******************************************************************/

.ui-selectmenu-button {
    background-color: #f6f6f6;
    border-color: silver;

    &.ui-state-focus {
        @include box-shadow(0 0 5px rgba(0,0,0,.3));
        border: 1px solid grey;
    }
}
.ui-selectmenu-open {
    background-color: #f6f6f6;
    border-color: grey;

    li.ui-state-focus {
        background-color: Highlight;
    }
}

/***** TOOLTIP ******************************************************************/

.ui-tooltip {
    color: $COLOR_D;
    background-color: $COLOR_A;
    border-color: $COLOR_A;
}
.tooltip-g, .tooltip-c, .tooltip-t, .tooltip-h, .tooltip-o {
    background-color: darken($COLOR_GENRE, 5%);
    @include box-shadow(2px 2px 6px #666);
}
.tooltip-c {
    background-color: darken($COLOR_SUBSIDIARY, 5%);
}
.tooltip-t {
    background-color: darken($COLOR_TAGS, 5%);
}
.tooltip-h {
    background-color: darken($COLOR_TAGS_HENTAI, 5%);
}
.tooltip-o {
    background-color: silver;
}
/* ADDED no hover tooltip*/
.tooltip.tooltip-o {
    display: none !important;
}
/***** SLIDER ******************************************************************/

.ui-slider {
    border-color: $COLOR_B;

    .ui-slider-handle {
        border-color: $COLOR_B;
        background-color: $COLOR_B;
    }
    .ui-slider-horizontal .ui-slider-range {
        background-color: $COLOR_D;
    }
}

/***** DATEPICKER ******************************************************************/

.ui-datepicker {
    background-color: lighten($COLOR_HEADER_BORDER, 10%);
    border-color: lighten($COLOR_HEADER_BORDER, 10%) !important;

    .ui-datepicker-header {
        background-color: $COLOR_HEADER_BORDER !important;
    }
    a.ui-state-active {
        border-color: $COLOR_B;
    }
    a.ui-state-hover {
        background-color: $COLOR_D;
        color: $COLOR_E;
    }
    .ui-datepicker-prev-hover,
    .ui-datepicker-next-hover {
        background-color: $COLOR_A;
    }
    th {
        color: $COLOR_D;
    }
    .ui-datepicker-unselectable {
        color: silver;
    }
    .ui-datepicker-week-col {
        background-color: lighten($COLOR_HEADER_BORDER, 30%);
        color: grey;
    }
    .specialDate a {
        border-color: black;
        background-color: grey;
        color: white;
    }
    .ui-widget-header {
        border-color: #aaaaaa;
        background-color: #cccccc;
    }
    .ui-widget-header a {
        color: #222222;
    }
}
.select_event {
    background-color: #E2D5D5;
}

/***** TOTOP ******************************************************************/

#toTop {
    background-color: $COLOR_TOTOP;
    color: white;
}
#toTopHover {
    background-color: darken($COLOR_TOTOP, 30%);
}

/***** QUOTES ******************************************************************/

.chara-quotes > li > div {
    &.cquote, &.cquote2 {
        background-color: $COLOR_EVEN;
        border-color: lighten($COLOR_EVEN, 15%);
    }
}

/***** ADDED ******************************************************************/
// Umfragen»Communityt
.pbox {
    background-color: transparent;
}
/* Beförderungen */
.headerA {
    background-color: transparent;
    border-top: none;
    border-bottom: 1px solid $COLOR_HEADER_BORDER;
    color: $COLOR_TEXT_EMPTY;
}
/**/
.newthread{
    font-size: 0.9em;

    &:hover {
        background-color: transparent;
    }
}
#forum-menu-header {
    display: none;
}
div.quote {
    background-color: $COLOR_QUOTE;
    &::before {
        color: $COLOR_TEXT_EMPTY;
    }
    &::after {
        color: $COLOR_TEXT_EMPTY;
    }
}
.spoiler {      /* Spoiler*/
    border: 1px solid $COLOR_G;
    border-radius: 0;
    background: none;
    background-color: $COLOR_SPOILER;
}
.spoiler::before {  /* Spoiler Text*/
    color: $COLOR_D;
}
.spoiler::after {   /* Spoiler Plus*/
    color: $COLOR_D;
    top: 3px;
}
.spoiler:hover {        /* Spoiler Hover*/
    background-color: lighten($COLOR_SPOILER, 5%);
}
.accordion {
    > h3 {
        background: $COLOR_ACCORDION;
        color: $COLOR_TEXT_EMPTY;
        border-radius: 0;
        border: 1px solid lighten($COLOR_ACCORDION, 30%);
    }
    > h3 + div {
        background-color: lighten($COLOR_ACCORDION, 5%);
        margin: 0 1px;
    }
    > h3.active {
        background-image: none;
        background-color: $COLOR_ACCORDION;
    }
    > h3:hover {
        background-image: none;
        background-color: darken($COLOR_ACCORDION, 5%);
    }
}

#infodetails > li, .sectiondetails > li {
        color: $COLOR_TEXT_EMPTY;
}

table.dbstats {
    > thead > tr > th, #infodetails > thead > tr > th{
        background-color: lighten($COLOR_SIDEBAR_BOX_BACKGROUND, 5%);
    }
    > tbody tr > td, #infodetails > tbody tr > td {
        color: $COLOR_TEXT_EMPTY;
        > a {
            color: $COLOR_TEXT_EMPTY;
        }
    }
    > tbody tr > td > a:hover, #infodetails > tbody tr > td > a:hover {
        color: $COLOR_E;
    }
    > td, table.dbstats #infodetails > tbody tr > td {
        color: $COLOR_TEXT_EMPTY;
    }
}
.grey {
    color: $COLOR_TEXT_EMPTY;
}
.select2-container {
    color: $COLOR_E;
}
.textblock{ /* Beschreibungstext */
    font-size: 0.9375em;
}
.cbox1 {
    background-color: $COLOR_POLL_BACK;
    border: 1px solid lighten($COLOR_POLL_BACK, 10%);
}
.ibox {
    background-color: transparent;
    border: 1px solid $COLOR_HEADER_BORDER;
}
.styleA > tbody > tr { /* tabel  music */
    background-color: $COLOR_ODD;
    border-color: rgba($COLOR_GRID,1);

    &:nth-of-type(2n) {
        background-color: $COLOR_EVEN;
    }
}

.swiper-button-prev::before, .swiper-container-rtl .swiper-button-next::before, .swiper-button-next::before, .swiper-container-rtl .swiper-button-prev::before {
    color: white;
}

/* Nav button show/hide */
#sidebar-button {
    position: absolute;
    top: -32px;
    right: 35px;
    background-color: $COLOR_CONTENT;
    font-size: 0px;
    height: 22px;
    border-radius: 1px;
    &:hover {
        background-color: $COLOR_BUTTON_DEFAULT;
    }
    &::before{
        left: 10px;
        top: 3px;
        font-size: 20px;
        color: $COLOR_TEXT_ACTIVE;
    }
}
/* TITEL details inner resize */
@media screen and (min-width: 600px){
    #details-inner #information #infos {
        display: flex;
        flex-flow: row wrap;
         > li {
             flex-basis: calc(50% - 5px);
         }
    }
}
@media screen and (min-height: 930px){
    #forumnav > li {
        &.forumC1, &.forumC2 {          // NAV visible , &.forumC8, &.forumC3
            > span + ul {
                display: block;
            }
        }
    }
}
@media screen and (min-width: 800px){
    #pageload { // FOOTER SMALER
        position: absolute;
        top: 10px;
        right: 17%;
    }
}

/***** Personal *********************************************************************************/
.pagewidth {
    max-width: 1350px !important; // FIX logout same width
}
#start.start_details span.subheader, span.subheader2 {  // jap Namesame row
    display: inline;
    padding: 5px;
}
#rating-button {
    display: none;
}

#start.start_page span.subheader {          // Info TEXT remove
    font-size: 0;
    margin: 0;
}
#select-media {                         // Steams button over info
    display: none;
}

/* cover overlap */
@media screen and (min-width: 1000px) {

    /* infodetails inner*/
    #infodetails {
        width: calc(105% - 320px);
        padding-top: 10px;
    }
    #start #details-subs, #start #details-subsB, #details-subsB {
        margin-right: 220px;
    }
    /* cover overlap */
    #details-right #itemsR {
        margin-top: -120px;
        margin-bottom: -10px;
        > h2, div.missing, div > div {
            display: none;
        }
    }
    /* names cover overlap */
    /*#details-right #information, #details-right #name0 { TODO
        margin-top: -60px;
        > h2 {
            display: none;
        }
    }*/
    /* profile cover overlap */
    #details-right #about-me {
        margin-top: -120px;
        > h2 {
            display: none;
        }
    }
}

/* buttons right */
#details-inner #forum .pcenter {
    padding-right: 10px;    /* HOTFIX */
    height: 20px;
}
.pcenter {
        .sbuttonA, .sbuttonB {
        float: right;
    }
}

/***** NAV REMAKE *************************************************************/
@media screen and (min-width: 800px) {
    #mainnav {
        .menu > li{
            &.hover {
                .menuitem {
                    box-shadow: none;
                    width: 1000px; // TODO
                    margin-top: 0px;
                    background-color: transparent;
                    margin-left: -50px;
                    > li {
                        a {
                            width: auto;
                            height: auto;
                            &::before {
                                content: none;
                            }
                        }
                        span {
                            display: none;
                        }
                    }
                }
                &::after {
                    content: none;
                }
            }
            &.active::after {
                content: none;
            }
        }
    }
    // header remake
    #mainnav {
        margin-top: 0px !important;
        top: -30px;
        max-width: 1350px;
        margin: 0 auto;
        background: unset;
        .pagewidth {
            margin-left: 200px !important; // FIX logout same width
        }
        .menuitem > li > a {
            color: $COLOR_TEXT_DETAILS;
        }
    }
    #topnav, #logo { // FIX
        z-index: 1;
    }
    @media screen and (max-width: 1000px) {
        #mainnav {
            .pagewidth {
                margin-left: 55px !important; // FIX logout same width
            }
            .menu > li {
                padding: 0 5px;
            }
        }
        #logo{
            width: 50px;
            &::before {
                content: "aS";
            }
        }
    }

    #usercp {
        width: 0px;
        &::after, &.hover::before {
            content: none;
        }
        .menuitem {
            display: block;
            background-color: transparent;
            width: 400px;
            right: 0px;
            top: -25px;
            > li {
                a {
                    width: auto;
                    height: auto;
                    color: darken($COLOR_TEXT_HOVER, 15%);
                    &::before {
                        content: none;
                    }
                }
                span {
                    display: none;
                }

                &:hover {
                    background-color: darken($COLOR_CONTENT, 10%);
                }
            }
        }

        &.hover .menuitem {
            outline: none;
            margin-top: 0px;
            background-color: transparent;
        }
    }
    #topnav {
        margin-top: 5px;
    }
}

/***** BACKGROUND HEADER START COMB *******************************************/
@media screen and (min-width: 800px) {
    #header {
        z-index: unset;

        &:before {
            background: url(/media/styles/colors/0/1-header.jpg) repeat-x 50%;
            height: calc(100% + 82px);
            z-index: 1;
            background-position: center;
            background-size: cover;
        }
        &:after {
            content: ' ';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0.9;
            background: linear-gradient(to top left, $COLOR_HEADER_BACKGROUND, transparent 400%);
            z-index: 1;
        }
    }
    #start {
        background-image: linear-gradient(to top left,#a1391b, transparent 700%);
        background-color: transparent;
        z-index: 1;

        h1.actions {
            min-height: 35px;
        }
        h1 {
            min-height: 50px;
        }
    }
    #mainnav {
        z-index: 2;
    }
    #logo {
        z-index: 3;
    }
    #topnav {
        z-index: 9999;
    }
}
/***** #details-subs *************************************************************/
#start #details-subs, #start #details-subsB, #details-subsB {
    display: flex;              // FLEX LINE SPREAD
    flex-wrap: wrap;                // FLEX LINE SPREAD
    > li {
        border-right: 1px solid $COLOR_CONTENT;
        flex: 1 0 auto;         // FLEX LINE SPREAD
        margin-right: 0px;
        &.empty {
            border-right: 1px solid $COLOR_CONTENT;
        }
        &:nth-last-child(1) {
            border-right: none !important;
            margin-right: 1px;
        }
        &:nth-child(4n){
            break-after: auto;
        }
    }
}

/***** FORUM *************************************************************/
@media screen and (min-width: 1200px) {
    .forumindex > li {
        .DiscussionAuthor {
            right: 30px;
            z-index: 1;
        }
        .CommentCount {
            position: absolute;
            right: 290px;
            padding-right: 0px;
        }
        .LastComment {
            margin-left: 45px;
            z-index: 1;
        }
        .LastCommentBy {
            position: absolute;
            padding: 0;
            left: 0;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-align: right;
            > a:first-of-type {
                left: 5px;
                background-color: lightgray; // HOTFIX TODO
                > img {
                    height: 40px;
                    width: 40px;
                }
            }
            > span {
                position: absolute;
                right: 290px;
                top: 10px;
                > a {
                    display: none;
                }
            }

        }
        > h3 {
            padding-right: 370px;
            z-index: 1;

            > a {
                margin-left: 45px;
            }
             > span {
                left: 45px;
            }
        }
        .FirstUnreadPost
        {
            position: absolute;
            width: 40px;
            height: 40px;
            left: -20px;
            top: 4px;
            margin-left: 0px;
            z-index: 1;
            &::before {
                color: $COLOR_LINK;
                font-size: 0.75em;
                content: "";
            }
        }
        &.header {
            display: none;
        }
        &::before {
            content: '';
            position: absolute;
            background-image: url(https://cdn.anisearch.de/images/404.gif);
            height: 40px;
            width: 40px;
            background-size: 40px 40px;
        }
        .itemPoll {
            left: 45px;
            top: 2px;
        }
    }
}

.forumindex > li > img.itemSubscription {
    width: 12px;
    height: 12px;
    top: 5px;
}
.itemSubscription[data-mode|="1"] {
    background: url("https://cdn.anisearch.de/images/member/upload/37/37016/images/itemSubscription_1.png") left top no-repeat;
    box-sizing: border-box;
    padding-left: 12px;
    background-size: contain;
}

.itemSubscription[data-mode|="0"] {
    background: url("https://cdn.anisearch.de/images/member/upload/37/37016/images/itemSubscription_0.png") left top no-repeat;
    box-sizing: border-box;
    padding-left: 12px;
    background-size: contain;
}
/***** right width *************************************************************/
@media screen and (min-width: 800px) {
    #details-right{ /* block rechts*/
        width: 250px; /* size rechts*/
        float: right;
    }
    #details-right > section dl.listsA{ /* block rechts titel bld*/
        width: 230px; /* size rechts*/
    }

    #ratings ul#rating-stats > li{ /* Balkendiagramme*/
        width: 40px; /* size rechts*/
    }
    #details-outer #details-inner   {
        border-radius: 4px;
        margin-right: 260px; /* size rechts*/
    }
    #details-right > section > div > span > .img {
        max-width: 100%;
    }
    #details-right > section > div > #newestPoll > img {
        max-width: 100%;
    }
    #details-right > section > div > div > img {
        max-width: 100%;
    }
}
#forumnav > li a {
    overflow: hidden;
    white-space: nowrap;
}

.menuitem > li a::before {
            content: "\00bb";
            padding-right: 5px;
}