/******************************************************************************
 * TheDailyZilch/public/css/layout.css
 */

    *,
    body
    {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }


/******************************************************************************
 * The outer and inner wrapper elements.
 */
    #outer,
    #inner
    {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        overflow: hidden;
    }

    #outer {
        height: 100%;
        overflow-y: auto;
        background-color: #FFFAFB;
        color: #0A101F;
    }

    #inner {
        width: calc(100% - 12px);
        height: auto;
        padding: 6px;
        min-height: 100%;
    }


/******************************************************************************
 * Header/title section.
 */
    #title {
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        aspect-ratio: 3.5 / 1;
    }

        #title_image {
            position: relative;
            float: left;
            width: 100%;
            height: calc(100% - 30px);
            color: #FFFAFB;
            background-color: rgb(240, 96, 96);
            font-family: "Anton", sans-serif;
            font-size: 3em;
            background-image: url(/public/images/assets/ZilchTitleLogo.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        #title_banner {
            position: relative;
            float: left;
            margin-top: 4px;
            width: 100%;
            height: 24px;
            border-top: solid 2px rgb(240, 96, 96);
            border-bottom: solid 2px rgb(240, 96, 96);
            font-family: "Merriweather", serif;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .title_banner_inner {
                width: auto;
                height: 24px;
                display: flex;
                align-items: center;
                color: #1E90FF;
                /* text-shadow: 1px 1px #000; */
                padding: 6px;
            }

            #title_banner_left {
                text-align: left;
            }

            #title_banner_center {
                text-align: center;
            }

            #title_banner_left {
                text-align: right;
            }


/******************************************************************************
 * Banner ads - the lower one is only shown on smaller devices, the upper
 * ad on larger devices.
 */

    .banner_ad {
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        aspect-ratio: 3.5 / 1;
        background-color: none;
        background-size: 100% 100%;
    }

    #banner_ad_upper {
        display: none;
        width: calc(50% - 6px);
        height: 100%;
        margin-left: 6px;
    }

    #banner_ad_lower {
        margin-top: 6px;
        display: block;
    }

 
/******************************************************************************
 * The nav bar.
 */

    nav {
        position: relative;
        float: left;
        width: 100%;
        height: 32px;
        color: #FFFAFB;
        background-color: rgb(240, 96, 96);
        margin-top: 4px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

        .nav_link {
            width: auto;
            height: auto;
            color: #FFFAFB;
            font-family: "Roboto", sans-serif;
            font-size: 14px;
            font-weight: bolder;
            text-decoration: none;
            padding: 0px 6px;
            /* margin-right: 12px; */
        }

        nav a:link,
        nav a:visited,
        nav a:hover
        {
            color: #FFFAFB !important;
            text-decoration: none;
        }


/******************************************************************************
 * The content section.
 */
    .content {
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        min-height: 50%;
        margin-top: 6px;
    }

        .page_content {
            position: relative;
            float: left;
            width: 100%;
            height: auto;
        }

        .headline,
        .subheadline
        {
            margin-top: -4px;
            position: relative;
            font-family: "Anton", sans-serif;
            font-size: 4em;
            color: #0A101F;
            line-height: 1;
        }

        .subheadline {
            margin-top: 2px;
            font-size: 2em;
        }

        .small_headline {
            float: left;
            width: auto;
            font-size: 2em;
            margin-top: 0px;
        }

        .small_author {
            margin: 0px;
            float: right;
            width: auto;
            height: 2.5em;
            background-color:#FFFAFB;
            border: solid 1px #000;
            text-decoration: none;
            display: flex;
            align-items: center;
            padding: 0px 8px;
            font-size: 12px;
        }

        .text_regular {
            position: relative;
            font-family: "Merriweather", serif;
            font-size: 14px;
            color: #0A101F;
            line-height: 1.25;
            text-indent: 16px;
            margin-top: 3px;
        }

            .link_regular {
                color: #1E90FF;
                text-decoration: none;
                font-weight: bold;
            }

        .text_subheading {
            width: 100%;
            text-align: center;
            height: auto;
            font-size: 16px;
            font-weight: bold;
            text-decoration: underline;
            font-family: "Roboto", sans-serif;
            margin: 6px 0px;
        }

        .image_regular
        {
            display: none;
            visibility: hidden;
            height: auto;
        }

        .image_small
        {
            display: block;
            visibility: visible;
            width: 100% !important;
            height: auto;
        }

        .image_regular div,
        .image_small div
        {
            position: relative;
            width: 100%;
            height: auto;
            margin-top: 2px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .image_regular p,
        .image_small p
        {
            width: 100%;
            height: auto;
            font-family: "Merriweather", serif;
            font-size: 12px;
            font-style: italic;
            color: #0A101F;
            text-align: center;
        }

        .image_left,
        .image_caption_left
        {
            float: left;
            margin-right: 6px;
            margin-bottom: 6px;
        }

        .image_right,
        .image_caption_right
        {
            float: right;
            margin-left: 6px;
            margin-bottom: 6px;
        }

        .author_info {
            height: 56px;
            color: #0A101F;
            margin: 6px 6px 12px 6px;
            display: flex;
            align-items: center;
            background-color: rgba(240, 240, 240, 0.7);
            box-shadow: 2px 2px #DDD;
        }

        .author_info_image {
            position: relative;
            float: left;
            width: auto;
            height: 48px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: 4px;
        }

        .author_info_section {
            position: relative;
            float: right;
            width: calc(100% - 12px);
            height: 56px;
            display: flex;
            flex-direction: column;
            padding: 0px 0px;
            text-align: center;
            padding-right: 4px;
        }

        .author_info_name {
            position: relative;
            clear: both;
            float: right;
            width: 100%;
            height: 20px;
            font-size: 18px;
        }

        .author_info_category {
            position: relative;
            float: right;
            width: 100%;
            margin-top: 2px;
            height: 14px;
            font-size: 14px;
        }

        .author_info_date {
            position: relative;
            float: right;
            width: 100%;
            margin-top: 4px;
            height: 12px;
            font-size: 12px;
        }

        .article_column {
            position: relative;
            float: left;
            width: 100%;
            height: auto;
            margin-top: 6px;
        }

        .article_column:first-child {
            padding-right: 6px;
        }

/******************************************************************************
 * Stocks and shares.
 */

    .stocks_and_shares {
        position: relative;
        float: left;
        width: auto;
        height: auto;
        background-color: rgba(240, 240, 240, 0.7);
        box-shadow: 2px 2px #DDD;
        margin-top: 6px;
        padding: 6px;
        clear: both;
    }

        .stocks_and_shares h1 {
            position: relative;
            float: left;
            font-family: "Roboto", sans-serif;
            font-size: 1.5em;
            color: #0A101F;
            /* width: calc(50% - 6px); */
            width: 100%;
        }
        
        .stocks_and_shares p {
            position: relative;
            float: left;
            clear: both;
            font-family: "Roboto", sans-serif;
            font-size: 14px;
            color: #0A101F;
            /* width: calc(50% - 6px); */
            width: 100%;
            padding-right: 6px;
            padding-bottom: 6px;
        }

        .stocks_and_shares div {
            position: relative;
            float: right;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            /* width: calc(50% - 6px); */
            width: 100%;
            height: auto;
        }


/******************************************************************************
 * Maggie Mage stuff...
 */
    .maggie_mage,
    .friktata
    {
        position: relative;
        width: 100%;
        height: auto;
        color: #FFFAFB;
        background-color: rgb(220, 200, 220);
        padding: 6px;
        overflow: hidden;
    }

    .friktata {
        margin: 0px;
        padding: 0px;
        background-color: #000;
        background-size: 100% 225px;
        background-repeat: no-repeat;
    }

        .friktata_gradient {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 225px;
            background-size: 100% 100%;
            background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 50%,rgba(0, 0, 0, 0.90) 75%, rgba(0, 0, 0, 1));
        }

        .maggie_mage_title {
            position: relative;
            float: left;
            width: 100%;
            height: auto;
        }

        .maggie_mage_title_text {
            position: relative;
            float: left;
            /* width: calc(75% - 6px); */
            width: 100%;
            height: auto;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            aspect-ratio: 5 / 1;
        }

        .maggie_mage_logo {
            position: relative;
            float: right;
            /* width: calc(25% - 6px); */
            width: 50%;
            height: auto;
            /* margin-right: 10%; */
            aspect-ratio: 1 / 1;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .maggie_mage_image {
            position: relative;
            float: left;
            width: 50%;
            height: auto;
            aspect-ratio: 1 / 1.05;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            -webkit-mask-image: radial-gradient(ellipse, black 40%, transparent 70%); /* Softer fade: starts earlier, ends quicker for more blur */
            mask-image: radial-gradient(ellipse, black 40%, transparent 70%);
            filter: brightness(1.05) contrast(1.1); /* Optional subtle enhancement */
        }

        .maggie_mage_letters,
        .friktata_letters
        {
            position: relative;
            float: right;
            width: 100%;
            height: auto;
            border-radius: 16px;
            background-color: #FFF4F8;
            padding: 6px;
            margin-top: 6px;
        }

            .friktata_letters {
                background-color: rgba(0, 0, 0, 0);
                color: #FFFAFB;
            }

        .maggie_mage_column {
            position: relative;
            float: left;
            width: 100%;
            height: auto;
            margin-top: 6px;
        }

        .maggie_mage_column:first-child {
            margin-top: 0px;
        }

        .maggie_mage_letter,
        .friktata_letter
        {
            position: relative;
            float: left;
            width: 100%;
            height: auto;
            border: solid 2px rgb(220, 200, 220);
            /* box-shadow: 2px 2px rgb(160, 140, 160); */
            border-radius: 12px;
            margin-bottom: 6px;
            /* overflow: hidden; */
            /* background-color: rgba(0, 0, 0, 0); */
            background-color: #FFFAFB;
        }

            .friktata_letter {
                border: solid 2px rgb(100, 100, 100, 1);
                background-color: rgba(0, 0, 0, 0.25) !important;
                border-radius: 0px;
            }

        .maggie_mage_letter:last-child {
            margin-bottom: 0px;
        }

        .maggie_mage h2,
        .friktata_header
        {
            font-family: "Roboto", sans-serif;
            font-size: 16px;
            font-weight: bold;
            background-color: rgb(220, 200, 220);
            color: #FFFAFB;
            text-shadow: 1px 1px #000;
            padding: 0px 6px;
            height: 24px;
            display: flex;
            align-items: center;
            border-radius: 12px 12px 0px 0px;
        }

            .friktata_header {
                background-color: rgba(0, 0, 0, 0.25);
                border-radius: 0px;
                color: #CCF;
            }

        .maggie_mage_star_letter {
            position: relative;
            float: right;
            width: auto;
            height: 56px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-color: none;
            aspect-ratio: 2.5 / 1;
            margin-top: -38px;
            margin-right: -12px;
            transform: rotate(15deg);
        }

        .maggie_mage p,
        .friktata_text
        {
            font-family: "Merriweather", serif;
            font-size: 12px;
            color: #502070;
            background-color: #FFFAFB;
            padding: 6px;
            border-radius: 0px 0px 12px 12px;
        }

            .friktata_text {
                background-color: rgba(32, 32, 32, 0.1);
                color: #FFFAFB;
                border-radius: 0px;
            }

        .maggie_mage_from,
        .friktata_from
        {
            width: auto;
            text-align: right;
            font-family: "Roboto", sans-serif;
            font-size: 12px;
            color: #502070;
            font-style: italic;
            margin: 6px 6px 6px 0px;
        }

            .friktata_from {
                color: #FFFAFB;
            }

        .maggie_mage_response,
        .friktata_response
        {
            margin: 0px;
            font-size: 12px;
            background-color: #FFFAFB;
            /* background-color: rgb(220, 200, 220); */
            color: #502070;
            padding: 6px;
            border-radius: 12px;
        }

            .friktata_response {
                background-color: rgba(0, 0, 0, 0);
                color: #AAF;
                border-radius: 0px;
            }

        .maggie_mage_response p,
        .friktata_response_text
        {
            background-color: #FFF4F8;
            font-family: "Roboto", sans-serif;
            border-radius: 10px;
            border: solid 2px rgb(64, 64, 64);
            border-radius: 12px;
        }

            .friktata_response_text {
                background-color: rgba(0, 0, 0, 0);
                color: #CCF;
                padding: 6px;
                border-radius: 0px;
            }


/******************************************************************************
 * Archives stuff.
 */

    .archive_year {
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        margin-bottom: 6px;
        background-color: rgb(240, 96, 96);
        color:#FFFAFB;
        padding: 0px 12px 0px 12px;
    }

    .archive_year:last-child {
        margin-bottom: 0px;
    }

        .archive_year_header {
            position: relative;
            float: left;
            width: auto;
            height: 32px;
            font-family: "Roboto", sans-serif;
            font-size: 22px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .archive_year_down_arrow,
        .archive_year_up_arrow
        {
            position: relative;
            float: right;
            width: 32px;
            height: 32px;
            font-family: "Roboto", sans-serif;
            font-size: 18px;
            font-weight: bold;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            cursor: pointer;
        }

        .archive_issue_down_arrow,
        .archive_issue_up_arrow
        {
            position: relative;
            float: right;
            width: 24px;
            height: 24px;
            font-family: "Roboto", sans-serif;
            font-size: 18px;
            font-weight: bold;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            cursor: pointer;
        }

        .archive_year_up_arrow,
        .archive_issue_up_arrow
        {
            display: none;
            visibility: hidden;
        }

        .archive_year_issues {
            position: relative;
            float: left;
            width: 100%;
            height: auto;
            background-color: rgb(240, 96, 96);
            color: #0A101F;
            /* padding: 6px; */
            display: none;
            visibility: hidden;
        }

        .archive_year_issue {
            position: relative;
            float: left;
            width: 100%;
            height: auto;
            /* min-height: 32px; */
            margin-bottom: 12px;
            background-color: #FFFAFB;
            padding: 0px 6px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
        }

        .archive_year_issue:first-child {
            margin-top: 6px;
        }

        .archive_year_issue_header {
            width: 100%;
            height: 32px;
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
        }

        .archive_issue_title,
        .archive_issue_month,
        .archive_issue_pages
        {
            position: relative;
            float: left;
            width: auto;
            color: rgb(240, 96, 96);
            font-size: 20px;
            font-weight: bold;
        }

        .archive_page {
            width: calc(100% - 12px);
            margin-bottom: 6px;
            padding: 6px;
            height: auto;
            background-color: #E0E0E0;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            display: none;
            visibility: hidden;
        }
        
        .archive_page_info {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            flex-direction: row;
            /* justify-content: space-between; */
        }

        .archive_page:last-child {
            margin-bottom: 12px;
        }

        .archive_page_date,
        .archive_page_author,
        .archive_page_category,
        .archive_page_description
        {
            position: relative;
            float: left;
            width: 20%;
            height: auto;
            text-shadow: 1px 1px #000;
            font-family: "Roboto", sans-serif;
            font-size: 12px;
        }

        .archive_page_date {
            color: #1E90FF;
        }

        .archive_page_author {
            font-size: 10px;
        }

        .archive_page_category {
            color: rgb(240, 96, 96);
            font-size: 10px;
        }

        .archive_page_description {
            width: 40%;
            font-size: 10px;
        }


/******************************************************************************
 * Cludge.
 */
        .cludge_header {
            position: relative;
            float: left;
            width: 30%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: rgba(0, 0, 0, 0.25);
            border: solid 1px #000;
            margin: 0px 6px 6px 0px;
        }

            .cludge_header_left {
                position: relative;
                float: left;
                width: calc(100% - 24px);
                height: auto;
                aspect-ratio: 6 / 1;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin: 6px 0px 0px 12px;
            }

            .cludge_header_center {
                position: relative;
                float: left;
                width: auto;
                height: auto;
                aspect-ratio: 1 / 1.1;
                background-position: 10%;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .cludge_header_right {
                position: relative;
                float: right;
                width: calc(100% - 24px);
                height: auto;
                margin-left: 12px;
                margin-top: 4px;
                margin-bottom: 6px;
                aspect-ratio: 6 / 1;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                /* margin: 0px 12px 12px 0px; */
            }