/* NEW WEBSITE DESIGN */


        body {
            font-family: 'Arial', sans-serif;
            background-color: #fff;
            margin: 0;
            padding: 0;
        }

        p {
            color: #666;
        }

        ul, ol {
            list-style-type: none;
            padding: 0 0px 0 36px;
        }

        li {
            margin-bottom: 10px;
        }


/* CSS for the wrapper */
        #wrapper {
        	max-width: 1440px; /* Set your desired maximum width */
            margin: 0 auto;   /* Center the wrapper */
            padding: 0px; /* Adjust the padding as needed for content*/
            background-color: #fff; /* Add background color if desired */
        }     
        
        #wrapper-content {
        	max-width: 1000px; /* Set your desired maximum width */
            margin: 0 auto;   /* Center the wrapper */
            padding: 20px 0 0 0; /* Adjust the padding as needed for content*/
            background-color: #fff; /* Add background color if desired */
        }
        
/* CSS for the content areas */
        
        #header {
            margin: 0px; /* Adjust the margin as needed */
            padding:7px 0px 0px 0px; /* Adjust the padding as needed */
            height:65px;
            background-color:rgb(65,104,170); /* Add background color if desired       
            */
       		color:#fff;
       		border-bottom: 1px solid #ccc
        }
               
        #header-image {
            margin: -40px 0 0 0px; /* Adjust the margin as needed */
            padding: 0px; /* Adjust the padding as needed */
            background-color: #fff; /* Add background color if desired */
            border: px solid #000;
            background-image: url("../images/WP-washed-adj-crop.png");
			background-repeat: no-repeat;
			background-position: 0px 0px;
        }
        
        
         #main-content {
            margin: 0px; /* Adjust the margin as needed */
            padding: 0px; /* Adjust the padding as needed */
            background-color: #fff; /* Add background color if desired */
            border:0px solid #000;
        }

 /* CSS for the footer */
        #footer {
            margin-top: 20px; /* Adjust the margin as needed */
            padding: 10px 0px 100px 0px; /* Adjust the padding as needed */
            background-color: #555; /* Add background color if desired */
            color: #fff; /* Text color for the footer */
            text-align: center;
            border-top: 1px solid #ccc
        }       

        
        
/*------------IMAGE PLACEMENT AND CAPTION------------------------- */
/* CSS for floating the image to the right */
        .right-floated-image {
            float: right;
            margin: 0 0 10px 18px; /* Adjust the margin as needed */
        }

/* CSS for the right-floated image caption */
        .right-image-caption {
            clear: left;
            text-align: right;
            font-weight: bold;
            font-size: 90%;
        }

/* CSS for floating the image to the left */
        .left-floated-image {
            float: left;
            margin: 0 18px 10px 0; /* Adjust the margin as needed */
        }

/* CSS for the left-floated image caption */
        .left-image-caption {
            clear: left;
            text-align: left;
            font-weight: bold;
            font-size: 90%;
        }  
        
        
/*------------IMAGE SHADOWS------------------------- */
/* CSS for shadow on left and top side of an image */
        .shadow-left-top {
            box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.3);
        }

/* CSS for shadow on right and bottom side of an image */
        .shadow-right-bottom {
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        }
        
      
        
        




/* CSS for the horizontal rule at the top of the footer */
        #main-content hr {
            color: maroon; /* Color of the line */
            background-color: maroon; /* Background color behind the line (not visible in a solid line) */
            height: .5px; /* Thickness of the line */
            width: 100%; /* Length of the line */
            margin: 0px auto; /* Adjust margin to center the line and provide space around it */
            padding: 0px 0px
        }

 


/* CSS for the centered text in the footer */
        .centered-text {
            text-align: center;
            color:#fff
        }



   
        
        
/*------------BUTTONS------------------------- */        
/* CSS for the close button */
        #close-button {
            background-color: #f44336;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

/* CSS for the "Previous" button */
        #previous-button {
            background-color: #2196F3;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 12px; /* Adjust the margin as needed */
        }
/* CSS for the "Go to Top" button */
        #go-to-top-button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right:10px
        }
        
        
         .clear-both {
            clear: both;
        }
        



/*-----------MEDIA PRESERVATION------------------------- */        
/* Preserves layout for smaller screens*/
        @media screen and (max-width: 600px) {
        /* Media query for mobile devices */
            #wrapper {
                max-width: 100%; /* Allow the wrapper to take full width on small screens */
                padding: 10px;   /* Adjust padding for smaller screens */
            }
        }





/* Create the semi-transparent horizontal band */
.horizontal-band {
    position: absolute;
    top: 70px; /* Adjust the position as needed */
    left: 0;
    width: 100%;
    height: 340px; /* Adjust height as needed */
    /*background-color: rgba(0, 0, 0, 0.5);  Black with 50% opacity */
    background-color:rgb(65,104,170,.2);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Text color */
    font-family: Arial, sans-serif;
    text-align: center;
    border-bottom: 1px solid #ccc
}

/* Optional: Style the text */
.horizontal-band h1 {
    margin: 0;
    padding: 0;
}       
     
     
     .text-box-container {
    display: flex;
    gap: 48px; /* 48px gap between each text box */
    padding: 48px 0 0px 0
}

.text-box {
    width: 300px; /* fixed width */
    height: 160px; /* fixed height */
    padding: 5px; /* padding inside the text box */
    border: 1px solid maroon;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 3px #333;
    background-color:
}


.text-box-wide {
    margin:0px 175px;
    width: 600px; /* fixed width */
    height: 150px; /* fixed height */
    padding: 5px; /* padding inside the text box */
    border: 1px solid #ccc;
    font-family: Arial, sans-serif;
}