/* SFD33 6/6/25 */
/* All pages use these CSS settings*/
* {
    box-sizing: border-box;
}

/* START: BODY section */
body {
    font-family: Verdana, Arial, sans-serif;
    color: #FFFFFF;
    background-color: #231F20;
    margin: 0;
    min-width: 250px;
    max-width: 1520px;
}
/* END: BODY section */

/* START: MAIN section */
main {
    grid-area: main;
    background-color: #FFFFFF;
    color: #231F20;
    /*top right bottom left*/
    padding: 0 0 1em 0;
    min-width: 250px;
    max-width: 1020px;
    justify-self: center;
}

main h1, h2, h3, h4, h5, h6 {
    color: #991B1E;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    width: 90%;
}
/* END: MAIN section */

/* START: HEADER section */
header {
    grid-area: logo;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2em;
    text-align: center;
    color: #3C0B07;
    background-color: #FFFFFF;
    height: 250px;
    /*border-bottom: 1px solid #3C0B07;*/
}

    /* Display the logo with a link to the home page in the header */
    header a {
        text-decoration: none;
        color: #000000;
        position: relative;
        display: block;
        width: 250px;
        height: 250px;
        margin: auto;
    }

    header span {
        background-image: url(../images/Logo250px.png);
		/*background-image: url(/SmokNPi/images/Logo250px.png);*/
        top: 0;
        position: absolute;
        display: block;
        width: 250px;
        height: 250px;
        /*background-repeat: no-repeat;*/
    }
/* END: HEADER section */

/* START: NAV section */
nav {
    grid-area: nav;
    text-align: center;
    font-size: 1.25em;
}

    nav a {
        display: block;
        background-color: #231F20;
        text-decoration: none;
        text-transform: uppercase;
        /*top right bottom left*/
        padding: .5em 1.75em .5em 1.75em;
    }

        nav a:link {
            color: #FFFFFF;
        }

        nav a:visited {
            color: #FFFFFF;
        }

        nav a:hover {
            color: #231F20;
            background-color: #FFFFFF;
        }

    nav ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

        nav ul li {
            /*padding: .5em 1em .5em 1em;*/
            border-bottom: 1px solid #991B1E;
            border-right: 1px solid #991B1E;
			border-left: 1px solid #991B1E;
        }

/*nav ul li:not(:last-child) {
                border-bottom: 1px solid #991B1E;
            }*/
/* END: NAV section */

/* START: Nav Button */
[aria-controls="nav_menu-list"] {
    display: none;
}

/* Collapse the nav menu into a button for screens less than 520px wide*/
@media (max-width: 520px) {
    .nav_menu {
        /*order: -1;*/
        perspective: 800px;
    }

        .nav_menu button {
            background: #991B1E;
            color: #FFFFFF;
            text-align: center;
            font-size: 1em;
            text-transform: uppercase;
            border: 0;
            /*top/bottom right/left*/
            padding: 10px 0;
            width: 250px;
        }

        .nav_menu ul {
            max-height: 0;
            overflow: hidden;
            transform: rotateX(90deg);
            transition: all 0.5s;
        }

    [aria-controls="nav_menu-list"] {
        display: inline-block;
        margin-bottom: 10px;
    }

    [aria-expanded="true"] ~ ul {
        display: grid;
        max-height: 500px;
        transform: rotateX(0);
    }

    [aria-expanded="false"] .close {
        display: none;
    }

    [aria-expanded="true"] .close {
        display: inline-block;
    }

    [aria-expanded="true"] .open {
        display: none;
    }
} /* End @media (max-width: 520px) */
/* END: Nav Button */

/* START: ASIDE section */
aside {
    grid-area: events;
	border: 1px solid #991B1E;
}

    aside a:link {
        color: #FFFFFF;
    }

    aside a:visited {
        color: #FFFFFF;
    }

    aside a:hover {
        color: #231F20;
        background-color: #FFFFFF;
        padding: .25em;
    }

    aside table {
        margin: auto;
        min-width: 250px;
        max-width: 350px;
        padding-bottom: .25em;
    }

        aside table caption {
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.5em;
            font-weight: bold;
            font-style: italic;
            /*top right bottom left*/
            padding: .5em 0 .05em 0;
        }

        aside table th {
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.5em;
            font-weight: bold;
            font-style: italic;
            /*top right bottom left*/
            padding: 1em 0 .05em 0;
        }
		
        aside table td {
		    font-style: italic;
			text-align: center;
			/*top right bottom left*/
            padding: 0 0 1em 0;
        }
/* END: ASIDE section */

/* START: FOOTER section */
footer {
    grid-area: footer;
    font-style: italic;
    /*padding-bottom: 1em;
    border-right: 2px solid #3C0B07;
    border-left: 2px solid #3C0B07;
    border-top: 2px solid #3C0B07;
    border-bottom: 2px solid #3C0B07;*/
    display: grid;
    grid-template:
        "hours"
        "address"
        / 1fr;
}

    footer table {
        grid-area: hours;
        margin: auto;
        min-width: 250px;
        max-width: 300px;
        border: 1px solid #991B1E;
        padding-bottom: .25em;
    }

        footer table caption {
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.75em;
            font-weight: bold;
            padding-top: .5em;
        }

        footer table td {
            /*top right bottom left*/
            padding: .25em 0 0 .5em;
        }

            footer table td:first-child {
                /*top right bottom left*/
                padding: .25em 0 0 0;
                text-align: right;
            }

    footer address {
        grid-area: address;
        /*color: #F4CA8B;*/
        font-size: .9em;
        font-style: normal;
        text-align: center;
        padding-bottom: .25em;
    }

        footer address a:link {
            color: #FFFFFF;
        }

        footer address a:visited {
            color: #FFFFFF;
        }

        footer address a:hover {
            color: #231F20;
            background-color: #FFFFFF;
            padding: .25em;
        }
/* END: FOOTER section */

/* START: GRID section */
.gridContainer {
    display: grid;
    grid-template:
        "logo"
        "nav"
        "main"
        "events"
        "footer"
        "map"
        "copyright"
        / 1fr;
}

.asideContainer {
    display: grid;
    grid-template:
        "specials"
        "music"
        / 1fr;
}

.liveMusic {
    grid-area: music;
}

.specials {
    grid-area: specials;
}

.desktop {
    display: none;
}

.copyright {
    grid-area: copyright;
    font-size: .60em;
    text-align: center;
}

    .copyright a:link {
        color: #FFFFFF;
    }

    .copyright a:visited {
        color: #FFFFFF;
    }

    .copyright a:hover {
        color: #231F20;
        background-color: #FFFFFF;
        padding: 1px;
    }
/* END: GRID section */

/* START: CLASS section */
.map {
    grid-area: map;
    /*border: 1px solid #991B1E;*/
    padding: 0;
    margin: 0;
}

    .map iframe {
        width: 100%;
    }

.noPadding {
	padding: 0;
}

.bold {
	font-weight: bold;
}

.ital {
	font-style: italic;
}
/* END: CLASS section */

/* START: ID section */
#mobile {
    display: inline;
}

/* END: ID section */

/******** START: Media query settings for small tablets */
@media (min-width: 600px) {
    #mobile {
        display: none;
    }

    .desktop {
        display: inline;
    }

    footer {
        grid-template:
            "hours address"
            / 1fr 1fr;
        padding-bottom: .5em;
    }

		footer table {
            border: 0;
        }
		
        footer address {
            align-self: center;
        }
}

@media (min-width: 720px) {
    .asideContainer {
        grid-template:
            "music specials"
            / 1fr 1fr;
    }
}

/******** END: Media query settings for small tablets */

/******** START: Media query settings for large tablets & laptops */
/* Two column grid display is turned on at this level */
@media (min-width: 1000px) {
    .gridContainer {
        grid-template:
            "logo events"
            "nav main"
            "footer main"
            "map main"
            ". copyright"
            / 250px 1fr;
    }

    footer {
        grid-template:
            "hours"
            "address"
            / 1fr;
    }
		
		footer table {
            border-right: 1px solid #991B1E;
            border-top: 1px solid #991B1E;
            border-bottom: 1px solid #991B1E;
        }
		
		footer address {
            align-self: start;
        }
}
/******** END: Media query settings for large tablets & laptops */

/******** Start: Media query settings for desktops */
@media (min-width: 1270px) {
    .gridContainer {
        grid-template:
            "logo events map"
            "nav main footer"
            ". main ."
            ". copyright ."
            / 250px 1fr 250px;
    }

    /*footer {
        grid-template:
            "address"
            "hours"
            / 1fr;
    }*/

        footer table {
            border-left: 0;
            align-self: start;
        }

        footer address {
            border-right: 1px solid #991B1E;
            border-top: 1px solid #991B1E;
            border-bottom: 1px solid #991B1E;
        }
}
/******** END: Media query settings for desktops */

/******** Start: Media query settings for large monitors */
@media (min-width: 1520px) {
    body {
        margin: auto;
    }

    nav ul li {
        border-left: 1px solid #991B1E;
    }
}
/******** END: Media query settings for large monitors */