/*

DEFAULT MAIN COLORS:

BODY GRADIENT (blue): #8daba8 and #5b98a0
BLACK: #000000
WHITE: #ffffff

======================

    === IMPORTANT! ===
    If you're keeping the overlay effects on the overall layout, you'll only need to change the following to match the content background with your header area.
*/

    main {
	    background-image:  url("../images/bg-lines.png"), linear-gradient(0deg, #fcfcfc 0%, #fcfcfc 100%); /* don't edit the bg-line.png part and just change the linear-gradient values */
    }

    #main-site { 
        background-color: #000000; 
    } /* main background color */

    #main-site #main-site-inner { 
        color: #d9d9d9; 
    } /* text color */

    #main-site #main-site-inner #visit { 
        color: #d9d9d9; 
    } /* text color of "Visit our main site.." */

    #main-site #main-site-inner #home { 
        color: #d9d9d9; 
    } /* text color of home icon */

    #main-site #main-site-inner #links ul li a { 
        color: #d9d9d9; 
    } /* text color of site links */

    #main-site #main-site-inner #links ul li a:hover { 
        color: #d9d9d9; 
    } /* text color of site links on hover */

    #main-site #main-site-inner #visit::before { 
        background: linear-gradient(90deg,rgba(0,0,0,0) 0%, #d9d9d9 100%); 
    } /* linear gradient on left side, only change the #d9d9d9 value */

    #main-site #main-site-inner #links::after { 
        background: linear-gradient(90deg,#d9d9d9 0%, rgba(0,0,0,0) 100%); 
    } /* linear gradient on right side, only change the #d9d9d9 value */

    .thumbnails .image {
    border-color: #d6d6d6;
    } /* image borders */

    .thumbnails .image:hover {
    border-color: #141414;
    } /* image borders on hover */

    footer {
        background-color: #000000; 
    } /* footer area */

    footer ul#cred {
        color: #ffffff;
        border-bottom-color: #d6d6d6;
    } /* links' bottom border */

    footer ul#cred li a {
        color: #ffffff;
    } /* links color */

    footer ul#cred li a:hover {
        color: #d28784;
    } /* links color on hover */
    
    footer ul#cred li::after {
        background: #ffffff;
    } /* slash separators between links */

    footer .footer-inner .fcontent .disc {
        color: #d6d6d6;
    } /* disclaimer */
    
    /* === !!! STOP HERE !!! === */ 
/*

======================

    === IMPORTANT! ===
    Only change the rest of these values if you prefer to display colors as is with no blend effects. The most important things to do are change the mix-blend-mode from overlay or soft-light to normal, and change the opacity values to 1.

    I made this part as extensive as possible, keeping in mind that you are getting rid of the blend effects.
*/

    .topbar::after, nav .brs hr, nav ul.menu li a, nav ul.menu li::before, nav ul.menu li::after, .social a,
    .hero .site .site-inner h1::after, .hero .site .site-inner h1 span::after,
    .hero .site .site-inner .welcome, .hero .site .site-inner .welcome::after,
    .hero .site .site-inner ul.latest li::before,
    .tableh1 span::before, .statlink h2 span::before,
    .thumbnails .thumb_title::after, main .catrow .catdesc::before, main .catrow_noalb .catdesc::before, article .top {
        mix-blend-mode: normal;
        opacity: 1;
    }

    /* === MAIN COLOUR SCHEME === */
    body { color: #5e5e5e; } /* main text color */

    .tableb::before, .tablef::before, #smenu a,
    .thumbnails::before, main .catrow::before, main .catrow_noalb::before, main .img_nav::before,
    .thumbnails .thumb_title_views::before, .thumbnails .thumb_resolution::before, .thumbnails .thumb_caption_ctime::before, main .admin_menu_wrapper::before, .breadh1::before {
        mix-blend-mode: normal;
    }

    #smenu a:hover {
        mix-blend-mode: normal;
    }

    /* === MAIN LINES (PRIMARY BORDERS) === */
    nav .brs hr, nav ul.menu li::after, footer ul#cred li::after,
    .topbar::after, .hero .site .site-inner h1::after, .hero .site .site-inner h1 span::after,
    .hero .site .site-inner .welcome:after {
        background: #ffffff;
    }
    
    article .top {
        background: #d6d6d6;
    }

    .tableh1 span::before, .statlink h2 span::before {
        background: #5e5e5e;
    }

    /* === MENU === */
    nav ul.menu li a, .social a { color: #ffffff; } /* text color; overlays with the background */
    nav ul.menu li a:hover, .social a:hover { color: #ffffff; opacity: 0.95 } /* text color on hover; also overlays with the background */

    /* === SITE NAME & WELCOME MESSAGE === */
    .hero .site .site-inner h1 { color: #ffffff; opacity: 0.85; } /* site name */
    .hero .site .site-inner h1::after { opacity: 0.85; } /* bottom border of site name */
    .hero .site .site-inner .welcome { color: #ffffff; } /* welcome message */

    /* === GALLERY MENU === */
    #smenu a { color: #5e5e5e; opacity: 1; }
    #smenu a:hover { color: #141414; } /* links on hover */
    
    /* === ADMIN MENU === */
    main .admin_menu_wrapper a, main a.admin_menu { color: #5e5e5e; } /* links */
    main .admin_menu_wrapper a:hover, main a.admin_menu:hover { color: #141414; } /* links on hover */

    /* === MAIN TABLES === */
    .tableh1, #voting_title h2, #comments h2 { color: #141414; opacity: 1; } /* table titles */

    /* === TABLE ELEMENTS === */
    .tableb a, .tablef a { color: #41a686; } /* links */
    .tableb a:hover, .tablef a:hover { color: #141414; } /* links on hover */

    /* === THUMBNAILS === */
    .thumbnails::before, main .catrow::before, main .catrow_noalb::before, main .img_nav::before,
    .tableb::before, .tablef::before, main .admin_menu_wrapper::before, .breadh1::before { background: #141414; opacity: 0.05; } /* table background; overlays with body background */
    .thumbnails .thumb_title { color: #5e5e5e; } /* album title */
    .thumbnails .thumb_title::after { background: #d6d6d6; } /* bottom border of album title */
    .thumbnails .thumb_title_views::before, .thumbnails .thumb_resolution::before, .thumbnails .thumb_caption_ctime::before { background: #000000; color: #ffffff; opacity: 0.15; } /* album views, image resolution (if applicable), date */
    .thumbnails .thumb_resolution::before { opacity: 0.4; } /* image resolution (if applicable) */
    .thumbnails .thumb_caption_ctime::before { opacity: 0.75; } /* date */
    .thumbnails .thumb_title_views, .thumbnails .thumb_resolution, .thumbnails .thumb_caption_ctime { color: #fcfcfc; }

    /* === CATEGORIES === */
    main .catrow .catlink, main .catrow_noalb .catlink { color: #141414; } /* category links */
    main .catrow .catlink:hover, main .catrow_noalb .catlink:hover { color: #41a686; } /* category links on hover */
    main .catrow .catlink::before, main .catrow_noalb .catlink::before, .alblink::before, main .catrow .catdesc::before, main .catrow_noalb .catdesc::before { background: #d6d6d6; } /* square bullet point and small border before category */
    main .catrow .catdesc, main .catrow_noalb .catdesc { opacity: 0.85; } /* category descriptions */
    main .catrow .count, main .catrow_noalb .count { opacity: 0.85; } /* Albums and Files numbers on the right side */

    /* === OTHER ELEMENTS (TEXT BOXES, DROPDOWNS, ETC.) == */
    main input, main textarea, main select { background: #d6d6d6; } /* text fields */
    main input:focus, main textarea:focus { background: #fcfcfc; } /* text fields on focus */
    main button.button, main .buttonlist ul li a { background: #141414; color: #fcfcfc; opacity: 0.65; } /* buttons */
    main button.button:hover, main .buttonlist ul li a:hover { background: #d28784; color: #fcfcfc; opacity: 1; } /* buttons on hover */

    /* === FOOTER === */
    footer ul#cred li { opacity: 1; } /* links */