/* style-20-layout.css */


.wrapper {
    margin: var(--space-zero);
    padding: var(--space-zero);
    overflow: hidden;
    background: var(--color-calendar-a);
}

.header {
    margin: var(--space-zero);
    padding: var(--space-zero);
    overflow: hidden;

    a {
        img {
            width: var(--logo-width);
            display: block;
            margin: var(--space-050em) auto;
        }
    }
}

.wrapper2 {
    margin: var(--space-zero);
    padding: var(--space-zero);
    overflow: hidden;
    background: var(--color-calendar-a);
}

.bcList {
    margin: 0 var(--bc-margin-x);
    padding: var(--bc-padding-y) 0;
    list-style-type: none;
    float: left;

    li {
        display: inline;
        color: var(--new-color-gray-800);
        font-size: var(--font-size-footer);

        a {
            color: var(--new-color-gray-600);
            font-size: 1em;
        }
    }

    .crumb {
        &:after {
            border-right: 0.125em solid var(--new-color-gray-800);
            border-top: 0.125em solid var(--new-color-gray-800);
            content: "";
            display: inline-block;
            height: 0.375em;
            margin-left: 0.45em;
            transform: rotate(45deg) translateX(-40%) translateY(-20%);
            width: 0.375em;
        }
    }
}

.main {
    margin: var(--space-zero);
    padding: var(--space-100em);
    overflow: hidden;

    &,
    .footer {
        clear: both;
    }

    h1 {
        padding: var(--space-050em) var(--space-025em) var(--space-100em);
        clear: both;
        color: var(--new-color-gray-800);
        font-weight: 900;
        font-size: var(--font-size-h1);
    }

    .last_update {
        border-top: var(--border-last-update);
        border-bottom: var(--border-last-update);
        text-align: center;
        margin: 0;

        .create_new {
            font-size: 0.9em;
            color: var(--new-color-gray-600);
            margin-right: var(--space-100em);
        }

        .create_change {
            font-size: 0.9em;
            color: var(--new-color-gray-600);
        }
    }

    h2 {
        color: var(--color-calendar-a);
        position: relative;
        background: var(--new-color-gray-600);
        clear: both;
        font-size: var(--font-size-h2);
        margin: var(--space-150em) 0 var(--space-100em);
        padding: var(--space-050em) var(--space-100em);
        font-weight: normal;
        line-height: 1.4;

        &:after {
            position: absolute;
            content: '';
            top: 100%;
            left: 50%;
            border: var(--h2-after-border) solid transparent;
            border-top: var(--h2-after-border) solid var(--new-color-gray-600);
            width: 0;
            height: 0;
            margin-left: var(--h2-after-offset);
        }

        &:first-child {
            margin-top: var(--space-200em);
        }
    }

    h3 {
        font-size: var(--font-size-h3);
        border-bottom: var(--border-h3);
        position: relative;
        clear: both;
        margin: var(--space-150em) 0 var(--space-100em);
        padding: var(--space-025em) 0;

        &:after {
            position: absolute;
            content: " ";
            display: block;
            border-bottom: var(--border-h3-accent);
            bottom: var(--h3-after-bottom);
            width: var(--h3-after-width);
        }
    }

    p {
        margin-top: var(--space-100em);
        margin-bottom: var(--space-100em);
        text-align: left;
    }

    ul {
        margin: var(--space-050em) 0;
        text-align: left;
    }
}

.side-bar {
    margin: var(--space-zero);
    padding: var(--space-150em) var(--space-100em);
    overflow: hidden;
}

.footer {
    margin: var(--space-zero);
    padding: var(--space-zero);
    overflow: hidden;
    clear: both;

    p {
        text-align: center;
        font-size: var(--font-size-footer);
    }

    a {
        padding: 0 var(--space-050em);
        font-size: var(--font-size-footer);
        color: var(--new-color-gray-800);
    }

    #to_toppage {
        p {
            background: var(--new-color-gray-300);
            margin: 0;
            padding: 0;
        }

        a {
            padding-top: var(--space-050em);
            padding-bottom: var(--space-050em);
            text-align: center;
            display: block;
            font-size: var(--font-size-footer);
            color: var(--new-color-gray-800);
        }
    }

    #fnv {
        p {
            margin: var(--space-100em);
            padding: 0;
        }
    }

    #copyright {
        p {
            color: var(--new-color-gray-800);
            margin: var(--space-100em);
            padding: 0;
        }
    }
}

.header,
.main,
.side-bar,
.footer {
    background: var(--color-calendar-a);
}