html, body {
    height: 100%;
    margin: 0;
}

div#header, div#footer {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    background-color: #CCCC99;
    color: #990000;
    padding: 2px;
    font-size: 0.8em;
}

div#header {
    clear: both;
    height: 150px;
}

div#header {
    display: flex;
    justify-content: space-around; /* This will evenly space the images within the header */
    align-items: center; /* This will center the items vertically */
    width: 85%;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    background-color: #CCCC99;
    color: #990000;
}

#nav {
    flex: 0 0 18%; /* Adjust nav to take up 18% of the wrapper's width */
    display: flex;
    flex-direction: column;
    background-color: #990000;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    
    color: #FFFFCC;
}

    #nav h4 {
        margin:  10px 10px 0 ;
    }

        #nav h4.highlight {
            text-decoration: underline;
            color: #CCCC99;
            font-size: 1.5em; /* Make font size larger */
            font-weight: bold; /* Make font weight bold */
        }

    #nav a {
        text-decoration: none;
        color: #FFFFCC;
        display: block;
        padding: 5px 0;
    }

        #nav a:hover {
           background-color: #CCCC99; 
           color: #FFFFCC;
        }

        #nav a.active {
            text-decoration: underline;
            /* color: #CCCC99;*/
            color: #FFFFCC;
            font-size: 1.4em; /* Make font size larger */
            font-weight: bold; /* Make font weight bold */
        }

div#wrapper {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    background-color: #FFFFCC;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

div#content {
    flex: 1; /* Allow content to fill the remaining space */
    padding: 10px 50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #990000;
    background-color: #FFFFCC;
}

div#footer {
    clear: both;
    width: 85%;
    margin: 0 auto;
    background-color: #CCCC99;
    color: #990000;
    padding: 2px;
    font-size: 0.8em;
}

#footer a {
    color: #990000;
}

#footer table {
    width: 100%;
    color: #990000;
}

.director-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    grid-gap: 20px;
    padding: 20px;
}

.director-tile {
    background-color: #fff; /* or any color that matches your page style */
    border: 1px solid #ddd; /* subtle border, adjust as needed */
    padding: 15px;
    text-align: center;
}

    .director-tile img {
        max-width:100%;
        height: auto;
        border-radius: 50%; /* circular images */
    }

    .director-tile h4 {
        margin: 15px 0 5px; /* spacing adjustments */
        color: #333; /* text color, adjust as needed */
    }

    .director-tile p {
        font-size: 0.9em; /* smaller font size for the bio */
        color: #666; /* lighter text color for the bio */
    }

.contact-columns {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-left:50px;
}

.contact-column {
    flex: 1; /* Each column takes up equal space */
    padding: 0 20px; /* Add some padding for spacing between the columns */
}

    /* Optional: Add some styling to make it visually appealing */
    .contact-column p, .contact-column strong {
        margin: 0; /* Remove default margins */
        padding: 5px 0; /* Add some padding */
    }

    .contact-column strong {
        display: block; /* Make the strong tag block-level for better control */
        margin-bottom: 10px; /* Add some space below the strong tag */
        text-decoration: underline;
    }

.container {
    display: flex;
    flex-direction: row; /* Ensure content is laid out in a row */
    align-items: center; /* Align items vertically */
    justify-content: space-between; /* Add space between the text and image */
}

.text-content {
    flex: 1; /* Allows text to fill available space */
}

.container img {
    flex: 0 0 auto; /* Prevents the image from growing or shrinking */
    margin-left: 20px; /* Adds space between the text and the image */
}


.custom-table {
    width: 80%; /* Adjust as needed for table width */
    margin: 0 auto; /* Centers the table */
    border: 1px solid black; /* 1px border */
    background-color: white; /* White background */
    border-collapse: collapse; /* Ensures borders do not overlap */
}

    .custom-table td {
        padding: 10px;
        vertical-align: middle;
        border: 1px solid #ccc;
    }
        .custom-table td.photo_bullet {
            width: 200px;
            
        }

    .custom-table img {
        width: 200px;
        height: 200px;
        border-radius: 5px;
        object-fit: cover; /* Ensures the image covers the area without stretching */
    }

    .custom-table a {
        text-decoration: none;
        color: inherit;
        font-size: 20px;
        font-weight: bold;
        display: block;
        padding: 20px; /* Ensures a larger clickable area */
    }


    .thumbnail {
        /* set on the page script, this has no effect: width: 200px; */
        /* set on the page script, this has no effect: height: 200px; */
        margin: 10px;
        display: inline-block;
        border: 1px solid #990000;
    }
    
    .thumbnail img {
        /* set on the page script, this has no effect: width: 200px;  */
        /* set on the page script, this has no effect: height: 200px; */
        object-fit: cover;
    }
    
    .pic_large {
        width: 90%; 
        margin: 10px;
        display: inline-block;

    }