/* minneopa.css - 2 Column Layout with a Dark and Light Green Color Scheme
   Sarah Behrns
   Peter K. Johnson
   WenclTech Solutions
   Written: SB  11-02-06
	Revised: PKJ 01-29-07 fix jitter on menu nav bar items 
	         PKJ 08-07-07 add submenus for history and financials
	         PKJ 08-22-18 Updated CSS
             WTS 09-10-24 Add flexbox columns to footer
*/

/* Style the body element */
html {
    font-size: 18px;
}
body {
    background-color: #ffffff; /* White */
    font-family: "Helvetica", "Arial", "Sans-serif";
    margin:0px;
}

/* Style the header element*/
h1, h2, h3, h4, h5, h6 {
}

/* Style the Container Element */
#container {
    background-color: #9aab796c; /* Light Green */
    min-height: 99.8vh;
    display: flex;
    flex-direction: column;
}

/* = = = = = = = = = = = = = = = = =
Content Area
= = = = = = = = = = = = = = = = = */
#content,
.contentLeft{
    border: none;
    background-color: #f8fdf3;
    text-align: center;
    flex: 1;
}

#content img {
    display: block;
    margin: 0 auto;
}


#content .subMenu img.close{
    display: none;
}
#content .subMenu:hover img.close, #content .subMenu:focus-within img.close{
    display: block;
}  

#content .subMenu:hover img.open, #content .subMenu:focus-within img.open{
    display: none;
}   
#content .subMenu img{
    width: 20px;
    margin: auto; 
    margin-right: 0px;
}
#content .subMenu a{
    display: flex;
}


/* PKJ Put an upper/lower rule around headings */
#content h2, #contentLeft h2 {
    font-size: 160%;
    border-top: 1px #CECECE solid;
    border-bottom: 1px #CECECE solid;
    text-align: center;
}

#content h3, #contentLeft h3 {
    font-size: 140%;
    border-top: 1px #CECECE solid;
    border-bottom: 1px #CECECE solid;
    text-align: center;
}

/* set up a second content area that goes all the way to the
   left margin to utilize the page better.
	 Use this under the left menu bar */
.contentLeft {
    text-align: left;
    clear: both;
}

.contentLeft h2 {
    font-size: 1.50rem;
    border-top: 0px #CECECE solid;
    border-bottom: 0px #CECECE solid;
    text-align: center;
}

section {
    display: flex;
}

section .menu {
    max-width: 20%;
    width: 312px;
    text-align: center;
    background-color: #1B3D20;
}

section .bodyCopy {
    /* flex-grow: 4; */
    margin: 0 4rem 0 75px;
    width: 78%;
}

section .bodyCopy p {
    text-align: left;
    line-height: 1.20rem;
}

.bodyCopy li {
    text-align: left;
    margin: 1rem 0 0 0;
}

.bodyCopy img#homePageImage {
    width:  300px;
}

/* setup some classes to format photos for news stories */
/* put a white outline around each photo/caption */
.graphicOutline {
    margin: 0px 6rem 0px 3rem;
    border: 1px white solid;
}

/* Center the photo in the column */
p.graphicCenter {
    text-align: center; /* center the photo in the box */
}

/* center the caption and change texzt to italic */
p.graphicCaption {
    text-align: center; /* make text flush left */
    font-style: italic;
    font-size: 90%;
}

/* Style the Header Element */
header {
    display: grid;
    grid-template-columns: [logo] 1fr [text] 10fr;
    padding: 10px;
    background-color: #1A3D1F; /* Dark Green */
    border: none;
    color: #ffffff; /* White Text */
    background-image: none;
    /* must be higher than image so menu does not move to right */
    text-align: center;
}

#headerImage img {
    border-radius: 2px;
    margin: 0 20px;
    height: 85px;
}
#headerImage{
    max-width: 20%;
    width: 312px;
}
#headerText h1 {
    padding: 0;
    margin: 0 auto;
    display: inline;
}
#headerText h2{
    display: inline;
}
#headerText h4{
        margin: 0px;
        font-weight: normal;
        margin-top: 7px;
}
#headerText h5 {
	margin-top: 7px;
	margin-bottom: 0px;
	font-weight: normal;
}
#headerText h1,
#headerText h2,
#headerText h3, 
#headerText h4, 
#headerText h5, {
    text-align: center;
}

/* Zebra-stripe all tables */
table {
    border-collapse: collapse;
    width: 90%;
}

tr:nth-child(odd) {
        background: #d1e2a6;
}

tr:nth-child(even) {
    background: #dff0b4;
}

/* = = = = = = = = = = = = = = = = =
Navigation Menu
ref: https://css-tricks.com/solved-with-css-dropdown-menus/
= = = = = = = = = = = = = = = = = */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

nav ul li {
    display: block;
    transition-duration: 0.5s;
    width: 100%;
}

nav ul li:hover {
    cursor: pointer;
}

nav ul li a {
    display: block;
    padding: 10px;
    font-size: 1.05rem;
    text-decoration: none;
    color: white;
    background: #1B3D20; /* dark header green */
     /* #1B3D20; */
    text-align: left;
    padding-left: 35px;
    padding-right: 30px;
}

nav ul li a:hover,
nav ul li a:focus-within {
    color: #1B3D20;
    background: #f8fdf3; /* light green */
    /*! border: 1px solid #1B3D20; */
}

/* submenu */
nav ul li ul {
    visibility: hidden;
    opacity: 0;
    /*! position: absolute; */
    transition: all 1s ease;
    /*! margin-top: -2rem; */
    left: 0;
    display: none;
}
nav ul li ul li a{
    padding-left:60px;
}
nav ul li:hover > ul,
nav ul li:hover > a,
nav ul li:focus-within >ul,
nav li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
    background: #f8fdf3; /* light green */
    color: #1B3D20;
}

#backArrow img{
  width: 45px;
  margin-left: 0px;
  transform: scaleX(-1);
}


/* items in the submenu */
nav ul li ul li {
/* clear: both; */
width: 100%;
}


/* Style the Footer Element */
#footer {
    clear: both;
    margin: 0;
    padding: .5rem;
    color: #ffffff;
    background-color: #1A3D1F;
    border: none;
    text-align: center;
    display: flex;
    flex-direction: row;
}
#footer .small{
    width: 25%;
}
#footer .large{
    width: 50%;
}

/* = = = = = = = = = = = = = = = = =
Records and Satellite View
= = = = = = = = = = = = = = = = = */
img.satView {
    width:  70%;
    display: block;
    margin: 0 auto;
}
/* = = = = = = = = = = = = = = = = =
Photo Gallery
= = = = = = = = = = = = = = = = = */
.photoGallery {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.photoGallery a {
    display: block;
    margin: 1rem 2rem 0 0;
}

.photoGallery a img {
    border-radius: 10px;
    text-align: left;
    max-width: 256px;
}

audio {
    border: 1px black solid;
}

/* Style the Link Element */
.link {
    color: #1A3D1F;
}

/* = = = = = = = = = = = = = = = = =
Financial Table Data
= = = = = = = = = = = = = = = = = */
table.financial {
    width: 100%;
    margin: 1rem auto;
    border-collapse: collapse;
}

table.financial tr.total {
    background-color: white;
    font-weight: 800;
    text-align: right;
    border-bottom: 1px #1B3D20 solid;
    border-top: 6px #1B3D20 double;
    border-left: none;
    border-right: none;
}

table.financial th {
    text-align: center;
    font-size: 1.25rem;
    padding: .25rem;
    margin: 0;
    font-weight: 600;
    background: #1B3D20; /* dark green */
    color: white;
}

table.financial th,
table.financial td {
    padding: .35rem .750rem;
}

table.financial td {
    text-align: right;
}

table.financial td.left {
    text-align: left;
    font-weight: 500;
}

table.financial td.spacer
 {
    width: 25px;
    max-width: 25px;
}

/* = = = = = = = = = = = = = = = = =
Contact Table Data
= = = = = = = = = = = = = = = = = */
table.contact th,
table.contact td{
    padding: .75rem;
}


/* = = = = = = = = = = = = = = = = =
Gravesites of Interest Table
= = = = = = = = = = = = = = = = = */

table#interest {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid black;
}

table#interest td {
    padding: .5rem;
    text-align: left;
}

/* set width of first column */
table#interest td:nth-child(1) {
    font-weight: 600;
    width: 25%;
}

#headerText{
    position: relative;
}
/* ====================================================
=======================================================
@media queries
=======================================================
======================================================*/

@media only screen and (max-width: 768px) 
{ 
    header {
        display: flex;
        padding: .25rem;
        background-color: #1A3D1F; /* Dark Green */
        border: none;
        color: #ffffff; /* White Text */
        background-image: none;
        text-align: center;
    }
    
    #headerText h4{
        display: none;
    }

    #headerText h1 {
        font-size: 1.2rem;
    }
    #headerText h2 {
       display: none;
    }
    #headerText h3 {
        font-size: 1.0rem;
        font-weight: 400;
    }
    #headerText h5 {
        /* position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin-left: auto;
        margin-right: auto; */
        display: none;
    }
    #headerText{
        margin-top: auto;
        margin-bottom: auto;
        flex-grow: 1;
    }

    #container {
        width: 100%; 
        margin: 0;
    }

    section {
        display: block;
    }
    
    section .menu {
        width: 100%;
        text-align: center;
        display: block;
        background-color: #f3ffda6c;
    }
    nav ul li a {
        font-size: .95rem;
        font-weight: 700;
        color: white;
        background: #1B3D20; /* dark header green */
        border: .2px solid #f8fdf3; /* #1B3D20; */
    }
        
    .bodyCopy img {
        width:  75%;
    }

    #content .bodyCopy {
        width: 100%;
        margin: 0;
        padding: 15px;
        box-sizing: border-box;
    }

    #content h3 {
        font-size: 1.0rem;
        font-weight: 600;
        text-align: left;
    }

    #content h4 {
        font-size: .95rem;
        font-weight: 300;
    }

    #content p {
    font-size: .90rem;
    padding: 0 5px;
    }

    #content li {
        font-size: .90rem;
    }

    #footer {
    padding: 7px 3px;
    color: black;
    background-color: #c7dd9a6c;
    font-size: .75rem;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#footer .small, #footer .large{
    width: 100%;
}

.photoGallery {
    width: 100%;
}

.photoGallery a {
    display: block;
    width: 100%;
    margin: 10px auto;
}
} /* end of (max-width: 768px)


/* Medium devices (tablets, less than 992px) */
@media (max-width: 992px) 
{  
    #content h3 {
        font-size: 1.0rem;
        font-weight: 600;
        text-align: left;
    }

    .photoGallery {
        width: 100%;
    }
    
    .photoGallery a {
        display: block;
        width: 100%;
        margin: 10px auto;
    }   
}/* end of (max-width: 992px)*/

.mobile{
    display: none;
}

@media (max-width: 768px){
    .donateButton{
        font-size: 1.25rem;
        height: 45px;
    }

    
    #mainMenu.collapsed{
        display: none;
    }
    

    #mainMenu {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        position: relative;
        min-height: unset;
        display: none;
    }

    section .menu{
        max-width: unset;
    }
   
    #mobileMenuCont{
        justify-content: right;
        width: 95px;
        display: flex;
    }
    #mobileMenuCont button{
        width: 95px;
        background-color: transparent;
        border: none;
        padding: 30px;
        padding-top: 0px;
        margin-top: auto;
        padding-bottom: 0px;
        margin-bottom: auto;
        box-sizing: border-box;
    }
    #mobileMenuCont button:hover{
        background-color: #374153
    }
    

    #mainMenu.expanded{
        position: absolute;
        background: #f8fdf3;
        margin: 0px;
        top: 100px;
        width: 100%;
        padding-bottom: 20px;
        display: block;
    }
    #mainMenu div {
        color: var(--black);
    }
    #headerImage img{
        margin: 0px;
        width: 95px;
    }
    #headerImage{
        width: unset;
        max-width: unset;
    }
}
.donateButton{
    position: fixed;
    bottom: 10px;
    right: 2vw;
    max-height: 60px;
    max-width: 250px;
    z-index: 10;
}

.info-item.gender, .info-item.birth-date{
    display: none;
}

#content img.plus, #content img.minus{
    width: 1.4rem;
    position: absolute;
    right: 10px;
    margin:0px;
    transform: translateY(-3px);
}

#content img.minus, #content .expanded img.plus{
    display: none;
}
#content .expanded img.minus{
    display: initial;
}

@media (max-width: 1100px){
    /*4 column layout. 
        menu out 951-1100px 
        menu in  801-950px*/
    .expandable-rows .row{
        grid-template-columns: repeat(4, minmax(max-content, 1fr));
    }
    .expandable-rows .column.birth-date{
        display: none;
    }
    .expandable-rows .info-item.birth-date{
        display: initial;
    }

}
@media (max-width: 950px){
    /*3 column layout. 
        Mobile (any screen under 800px)
        menu out 801px - 950px
        menu in  N/A */
    .expandable-rows .row{
        grid-template-columns: repeat(3, minmax(max-content, 1fr));
    }
    .expandable-rows .column.gender{
        display: none;
    }
    .expandable-rows .info-item.gender{
        display: initial;
    }
}