/* =========================================================
   AHSTORY.ORG
   AMERICAN HORROR STORY FAN GALLERY
   ========================================================= */


/* ---------------------------------------------------------
   VARIABLES
--------------------------------------------------------- */

:root {

    --ah-black: #070707;
    --ah-dark: #0d0d0f;
    --ah-panel: #111113;
    --ah-panel-2: #171719;

    --ah-red: #9e1018;
    --ah-red-light: #c51b25;
    --ah-red-dark: #5d080e;

    --ah-white: #eeeeee;
    --ah-grey: #a2a2a2;
    --ah-border: #29292c;

    --ah-shadow:
        0 12px 40px rgba(0,0,0,.65);
}


/* ---------------------------------------------------------
   GLOBAL
--------------------------------------------------------- */

html,
body {

    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            #1b0c0e 0%,
            #090909 35%,
            #050505 100%
        );

    color: var(--ah-white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    min-height: 100%;
}


body {

    background-attachment: fixed;

}


* {

    box-sizing: border-box;

}


img {

    max-width: 100%;

}


a {

    color: #c9c9c9;

    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


a:hover {

    color:
        var(--ah-red-light);

    text-decoration: none;

}


/* ---------------------------------------------------------
   MAIN WRAPPER
--------------------------------------------------------- */

#ahstory-wrapper {

    width:
        calc(100% - 30px);

    max-width:
        1280px;

    margin:
        25px auto 50px;

}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

#ahstory-header {

    background:
        linear-gradient(
            145deg,
            #141416 0%,
            #080809 100%
        );

    border:
        1px solid
        #29292b;

    border-top:
        2px solid
        var(--ah-red);

    box-shadow:
        var(--ah-shadow);

}


/* ---------------------------------------------------------
   LOGO
--------------------------------------------------------- */

.ahstory-brand {

    text-align:
        center;

    padding:
        38px 20px 30px;

}


.ahstory-logo {

    display:
        inline-block;

    color:
        #ffffff;

}


.ahstory-logo:hover {

    color:
        #ffffff;

}


.ahstory-logo-main {

    display:
        block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        55px;

    font-weight:
        normal;

    letter-spacing:
        2px;

    text-shadow:
        0 3px 15px
        rgba(0,0,0,.9);

}


.ahstory-logo-sub {

    display:
        block;

    margin-top:
        10px;

    color:
        #858585;

    font-size:
        10px;

    letter-spacing:
        5px;

}


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

#ahstory-menu {

    padding:
        13px 20px 17px;

    border-top:
        1px solid
        #242426;

    text-align:
        center;

    background:
        rgba(0,0,0,.25);

}


#ahstory-menu a {

    display:
        inline-block;

    margin:
        3px;

    padding:
        8px 15px;

    border:
        1px solid
        #343438;

    background:
        #101012;

    color:
        #c5c5c5;

    text-transform:
        uppercase;

    font-size:
        11px;

    letter-spacing:
        1px;

}


#ahstory-menu a:hover {

    border-color:
        var(--ah-red);

    background:
        var(--ah-red-dark);

    color:
        #ffffff;

}


/* ---------------------------------------------------------
   GALLERY TITLE
--------------------------------------------------------- */

#ahstory-title {

    margin-top:
        20px;

    padding:
        25px 30px;

    background:
        linear-gradient(
            135deg,
            #111113,
            #0b0b0c
        );

    border:
        1px solid
        var(--ah-border);

    border-left:
        3px solid
        var(--ah-red);

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.5);

}


#ahstory-title h1 {

    margin:
        0;

    color:
        #eeeeee;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        30px;

    font-weight:
        normal;

}


.ahstory-description {

    margin-top:
        7px;

    color:
        #858585;

}


/* ---------------------------------------------------------
   SUB MENU
--------------------------------------------------------- */

#ahstory-submenu {

    margin:
        12px 0;

    padding:
        8px;

    text-align:
        center;

}


#ahstory-submenu a {

    color:
        #999999;

}


#ahstory-submenu a:hover {

    color:
        var(--ah-red-light);

}


/* ---------------------------------------------------------
   MAIN CONTENT
--------------------------------------------------------- */

#ahstory-content {

    padding:
        22px;

    background:
        linear-gradient(
            145deg,
            #111113,
            #0b0b0c
        );

    border:
        1px solid
        var(--ah-border);

    box-shadow:
        var(--ah-shadow);

}


.ahstory-content-inner {

    width:
        100%;

}


/* ---------------------------------------------------------
   COPPERMINE TABLES
--------------------------------------------------------- */

#ahstory-content table {

    max-width:
        100%;

}


#ahstory-content .tableh1 {

    background:
        #19191c;

    color:
        #eeeeee;

    border-bottom:
        2px solid
        var(--ah-red);

}


#ahstory-content .tableh1 a {

    color:
        #eeeeee;

}


#ahstory-content .catrow {

    background:
        #111113;

}


#ahstory-content .catrow:hover {

    background:
        #18181b;

}


/* ---------------------------------------------------------
   THUMBNAILS
--------------------------------------------------------- */

#ahstory-content .thumbnail {

    background:
        #0c0c0e;

    border:
        1px solid
        #303034;

    padding:
        7px;

    margin:
        7px;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.6);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


#ahstory-content .thumbnail:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--ah-red);

    box-shadow:
        0 12px 30px
        rgba(120,0,0,.25);

}


#ahstory-content .thumbnail img {

    border:
        0;

}


/* ---------------------------------------------------------
   PHOTO TITLES
--------------------------------------------------------- */

#ahstory-content .pic_title {

    color:
        #dddddd;

}


#ahstory-content .pic_title a {

    color:
        #dddddd;

}


#ahstory-content .pic_title a:hover {

    color:
        var(--ah-red-light);

}


/* ---------------------------------------------------------
   FORMS
--------------------------------------------------------- */

#ahstory-content input[type="text"],
#ahstory-content input[type="password"],
#ahstory-content input[type="email"],
#ahstory-content select,
#ahstory-content textarea {

    padding:
        9px 11px;

    background:
        #09090a;

    border:
        1px solid
        #353539;

    color:
        #eeeeee;

}


#ahstory-content input:focus,
#ahstory-content select:focus,
#ahstory-content textarea:focus {

    outline:
        none;

    border-color:
        var(--ah-red);

    box-shadow:
        0 0 0 2px
        rgba(158,16,24,.15);

}


#ahstory-content input[type="submit"],
#ahstory-content button {

    padding:
        9px 18px;

    background:
        var(--ah-red);

    border:
        1px solid
        var(--ah-red);

    color:
        #ffffff;

    cursor:
        pointer;

}


#ahstory-content input[type="submit"]:hover,
#ahstory-content button:hover {

    background:
        var(--ah-red-light);

}


/* ---------------------------------------------------------
   MESSAGE BOXES
--------------------------------------------------------- */

#ahstory-content .cpg_message {

    background:
        #151517;

    border:
        1px solid
        #333337;

}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

#ahstory-footer {

    margin-top:
        20px;

    padding:
        35px 15px;

    text-align:
        center;

    color:
        #666666;

}


.ahstory-footer-logo {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        28px;

    color:
        #cfcfcf;

    letter-spacing:
        1px;

}


.ahstory-footer-sub {

    margin-top:
        6px;

    font-size:
        9px;

    letter-spacing:
        4px;

    color:
        #666666;

}


.ahstory-footer-line {

    width:
        70px;

    height:
        1px;

    margin:
        17px auto;

    background:
        var(--ah-red);

    opacity:
        .7;

}


/* ---------------------------------------------------------
   ADMIN MENU
--------------------------------------------------------- */

#ahstory-content .admin_menu {

    background:
        #151517;

    border:
        1px solid
        #2c2c30;

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media screen and (max-width: 700px) {

    #ahstory-wrapper {

        width:
            calc(100% - 14px);

        margin:
            8px auto 25px;

    }


    .ahstory-brand {

        padding:
            28px 12px 23px;

    }


    .ahstory-logo-main {

        font-size:
            38px;

        letter-spacing:
            1px;

    }


    .ahstory-logo-sub {

        font-size:
            8px;

        letter-spacing:
            3px;

    }


    #ahstory-menu {

        padding:
            10px;

    }


    #ahstory-menu a {

        padding:
            7px 10px;

        font-size:
            10px;

    }


    #ahstory-title {

        padding:
            20px;

    }


    #ahstory-title h1 {

        font-size:
            25px;

    }


    #ahstory-content {

        padding:
            10px;

    }


    #ahstory-content .thumbnail {

        margin:
            4px;

        padding:
            5px;

    }

}


/* ---------------------------------------------------------
   SMALL PHONES
--------------------------------------------------------- */

@media screen and (max-width: 420px) {

    .ahstory-logo-main {

        font-size:
            31px;

    }


    .ahstory-logo-sub {

        letter-spacing:
            2px;

    }


    #ahstory-menu a {

        font-size:
            9px;

        padding:
            6px 8px;

    }

}