/* Site Header */ .site-header {

font-family: $banner-font-family;
max-width: $content-width; 
background-color: $header-bg-color;
margin-left: auto;
margin-right: auto;
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;

@include media-query($on-laptop) {
}

@include media-query($on-palm) {
}

.grid-container-top {
    height: 32px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 100%;
}

.banner-logo-title-slogan {
    grid-column-start: 1;
    grid-column-end: 1;
    justify-self: start;
    align-self: center;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 100%;
    grid-column-gap: 4px;

    .banner-logo {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 1;
        justify-self: start;
    }

    .banner-title {
        grid-column-start: 2;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 1;
        justify-self: start;
        align-self: end;
        .site-title {
            color: $title-color;
            font-size: $font-size-title;
            font-weight: $base-font-weight;
        }
    }

    .banner-slogan {
        grid-column-start: 3;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 1;
        justify-self: start;
        align-self: end;
        color: $slogan-color;
        .site-slogan { 
            font-style: italic;
            font-size: $font-size-slogan;
            @include media-query($on-palm) {
                display: none;
            }
            padding-right: 4px;
        }
        .slogan-extension {
            display: inline;
            font-size: $large-font-size;
            font-weight: $base-font-weight;
            margin-bottom: 0;
            //font-style: italic;
            //font-size: $font-size-slogan;
            @include media-query($on-palm) {
                display: none;
            }
        }
    }
}

.banner-icons {
    grid-column-start: 2;
    grid-column-end: 2;
    justify-self: end;
    align-self: center;
    display: grid;
    grid-auto-columns: auto;
    grid-auto-rows: 100%;
    grid-column-gap: 4px;

    .banner-icon {
        grid-column-start: auto;
        grid-column-end: auto;
        grid-row-start: 1;
        grid-row-end: 1;
        justify-self: start;
        align-self: center;
        width: 22px;
        height: 22px;
    }
}

}

/* Middle Section - Menu / Content */ .grid-container-middle {

max-width: $content-width; 
height: 100%;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 16% 84%;
grid-template-rows: 100%;
//grid-column-gap: $spacing-unit;
background-color: $middle-bg-color;
background: $middle-bg-final;
box-sizing: border-box;
border-bottom: 1px solid $border-color;

border-left: 1px solid $border-color;
border-right: 1px solid $border-color;

@include media-query($on-laptop) {
    border-left: none;
    border-right: none;
}

@include media-query($on-palm) {
    border-left: none;
    border-right: none;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}

}

.classic-menu {

height: 100%;
font-family: $menu-font-family;
grid-column-start: 1;
grid-column-end: 1;
justify-self: stretch;
align-self: stretch;
word-wrap: break-word;
width: 100%;
box-sizing: border-box;
border-right: 1px solid black; 

@include media-query($on-palm) {
    display: none;
}

.menu-title {
    font-size: $large-font-size;
    box-sizing: border-box;
    border-bottom: 1px dashed $border-color;
    margin-bottom: 1px;
    padding-left: 4px;
    padding-right: 4px;
}

.menu-links {
    list-style: none;
    margin-left: 0px;
    margin-bottom: 8px;
    //padding-left: 4px;
    //padding-right: 4px;
    text-indent: 4px;
}

.menu-links-history {
    text-indent: 0px;
    padding-left: 4px;
    padding-right: 4px;
}

.menu-link {
    display: block;
    line-height: 1.2;
    color: $text-color;
    &:visited {
        color: $text-color;
    }
    &:hover {
        color: $text-color;
        background: $menu-link-hover-bgcolor;
    }
}

.menu-history {
    font-size: $history-font-size;
    font-family: Verdana;
    width: 100%;
    min-height: 40px;
    max-height: 100px;
    text-align: left;
    background: $history-bg-color;
    box-sizing: border-box;
    word-wrap: break-word;
    color: $history-txt-color;
    //padding: 0.5%;
    overflow: auto;
    margin-top: -1px;

    .history-date {
        font-weight: 700;
    }
    .history-link {
        &:hover {
            color: $link-color-hover;
        }
        &:visited {
            color: $link-color;
        }
    }

}

}

.content-area {

height: 100%;
grid-column-start: 2;
grid-column-end: 2;
justify-self: start;
align-self: start;
width: 100%;
word-wrap: break-word;
box-sizing: border-box;
padding-left: $spacing-unit;
padding-right: $spacing-unit;

@include media-query($on-palm) {
    grid-column-start: 1;
    grid-column-end: 1;
    padding-left: 4px;
    padding-right: 4px;
}

.post-list {
    list-style: none;
    margin-left: 0px;
    //padding-left: 4px;
    //padding-right: 4px;
}

.post-meta {
    font-size: $small-font-size;
    font-weight: $base-font-weight;
    font-family: $base-font-family;
}

.post-link {
    font-size: $large-font-size;
    &:visited {
        color: $link-color;
    }
}

.page {
    padding-top: $spacing-unit / 2.5;
}

.post-header {
}

.post-title {
    display: none;
    @include media-query($on-palm) {
        display: block;
        font-size: $large-font-size;
        font-weight: $base-font-weight;
        margin-bottom: 0;
    }
}

.post-content {

}

}

/* Footer */ .site-footer {

max-width: $content-width; 
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
margin-left: auto;
margin-right: auto;
padding-right: 4px;
padding-left: 4px;

}

.to-top {

grid-column-start: 1;
grid-column-end: 1;
justify-self: start;
align-self: start;
font-family: $menu-font-family;
font-size: $small-font-size;
&:visited {
    color: $link-color;
}

}

.copyright {

grid-column-start: 2;
grid-column-end: 2;
justify-self: end;
align-self: start;
font-family: $menu-font-family;
font-size: $cpr-font-size;

}

/* Mobile Menu */ .mobile-menu {

display: none;

@include media-query($on-palm) {
    display: block;
    width: 100%;
}

.mob-menu-grid {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-auto-rows: auto;
    grid-column-gap: 4px;
    background: black;

    .menu-btn {
        font-family: $menu-font-family;
        color: $button-txt-color;
        display: block;
        grid-column-start: auto;
        grid-column-end: auto;
        grid-row-start: auto;
        grid-row-end: auto;
        justify-self: start;
        align-self: center;
        padding: 2px;
        margin-top: 1px;
        margin-bottom: 1px;
        box-sizing: border-box;
        border: 2px solid $button-border-color;
        border-radius: 5px;
        background: $button-bg-color;
        margin-left: auto;
        margin-right: auto;
        &:visited {
            color: $button-txt-color;
        }
        &:hover {
            color: $button-txt-color;
            background: $menu-link-hover-bgcolor;
        }

    }
}

}