@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	width: 100%;
	/*background: url(../../Images/background_fadeWhite.png) no-repeat;*/
	/*background: url(../../Images/common/Falls-After-RainBackground2.png) no-repeat;*/
	/*background: url(../../Images/common/<?php echo $selectedBg; ?>) no-repeat;*/
	background-position: fixed;	
	background-attachment: fixed;
	/*position: relative;
	z-index: 5;*/
}

/* 1. Visually hide the link while keeping it in the accessibility tree */
.skip-main {
    position: absolute;
    top: -1000px;
    left: -1000px;
    height: 1px;
    width: 1px;
    overflow: hidden;
    background: #367da8; /* Match your menu's blue */
    color: #ffffff;
    padding: 15px 25px;
    z-index: 10000; /* Ensure it appears above everything else */
    text-decoration: none;
    font-weight: bold;
    border: 3px solid #FFBF47; /* High contrast border */
    border-radius: 0 0 5px 0; /* Optional: rounded bottom-right corner */
}

/* 2. Make the link visible when it receives keyboard focus */
.skip-main:focus {
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
    outline: none; /* We use the border instead for a cleaner look */
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Change color after the link has been visited, but only when focused */
.skip-main:visited:focus {
    color: #FFBF47; /* High-contrast yellow/gold */
}


.Award {
	color: #981717;
	font-weight: bold;
		
}

/* Phones Landscape Layout: 482px to 767px. Inherits styles from: Mobile Layout. */

@media only screen and (max-width: 767px) {
#headerBackground {
	width: 100%;
	height: 220px;
	/*background-image: url(../../Images/background_header_mobile_fw.jpg);*/
	background-color: #000;
}
#headerBackground p {
	padding: 0 5px; 
	font-family: "Times New Roman";
	font-size: 22px;
	color: #FFF;
	font-style:italic;
	
}
#header {
	
	}



/* begin hlink group */
#hlink {
	
	margin-top: 0; /*this doesn't seem to change anything */
	margin-left: 0;
	background-color: #003;
}
#hlink ul {
	/*margin-top: 6px; /*moves it down*/
	/*padding-left: 0;
	margin-left: 0;*/
	padding: 10px;
	
}
#hlink li {
	display: inline;
	/* Add a right border to act as the spacer */
    border-right: 2px solid #0056b3; /* Match your "blue spacer" color */
    padding-right: 8px;
    margin-right: 4px;
    vertical-align: middle;
}
	
/* Remove the border from the very last item (Accessibility) */
#hlink li:last-child {
    border-right: none;
}
	
/* Shared styles for both links and the accessibility button */
#hlink li a,
#hlink li button {
	color: #FFFFFF;
    font-size: 1.15em;
    font-weight: normal;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: middle;
    padding: 0 0;
    background-color: #000000; 
    
    /* Reset native button styling so it looks exactly like a link */
    border: none;
    cursor: pointer;
    display: inline;
}

/* Hover effects for both links and the button */
#hlink li a:hover,
#hlink li button:hover {
	color: #EBEBF8;
	text-decoration: underline;
}

/* Keyboard accessibility: Highlight elements when tabbed into */
#hlink li a:focus-visible,
#hlink li button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* Dynamic current-page state style */
#hlink li a[aria-current="page"] {
    font-weight: bold;
    text-decoration: underline;
    color: #EBEBF8; /* Gives the active page the highlight color */
}
/* end hlink group */

#mobileSeal {
    display: flex;         /* Turns the div into a flex container */
    align-items: center;    /* Vertically centers the logo and text */
    gap: 10px;             /* Adds space between the logo and text */
    width: 100%;
    height: 45px;          /* Adjust height as needed for your logo size */
    padding: 5px;
    box-sizing: border-box; 
	
} 

.minnCoSD {
	background-color: #000000;
    color: #FFF;           /* Ensures text is visible on black */
    margin: 0;             /* Removes default paragraph spacing */
    font-family: "Times New Roman", serif;
    font-size: 22px;
    font-style: italic;
}
	
/* begin search group */
/* 1. Container - Simplified */
#searchContainer {
    display: inline-flex; /* Use inline-flex so it only takes up as much space as needed */
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #0d1117 0%, #1b263b 50%, #2c446d 100%);
/*    border-radius: 0px 10px 20px 20px;*/
    padding: 8px 15px;    /* Slightly tighter padding */
    max-width: 305px;      /* Limits total width to prevent pushing images */
    width: 100%;           /* Allows it to be smaller than 350px if needed */
}

/* 2. Form Layout */
.search-form {
    display: flex;
    align-items: center; 
    gap: 12px;
}

/* 3. Visible Label */
.search-label {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

/* 4. Input Group */
.input-group {
    display: flex;
    align-items: center;
    background-color: #E4E4E4 !important;
    border: 1px solid #767676;
    border-radius: 2px;
    height: 30px;
    flex-grow: 1;          /* Tells the input box to fill the remaining container space */
    overflow: hidden;
    margin: 0;             /* Remove margins to keep it tight */
}
/* 5. Input Field */
.custom-search-input {
    border: none;
    background: transparent !important;
    height: 100%;
    padding: 0 10px;
    font-size: 14px;
    width: 100%;           /* Fills the input-group */
    min-width: 0;          /* Technical fix to allow flex-items to shrink */
    color: #000;
}

/* Remove outline only because focus is handled by the parent group */
.custom-search-input:focus {
    outline: none;
}

/* 6. Accessible Focus (SC 2.4.7) */
.input-group:focus-within {
    outline: 3px solid #FFDD00; /* Use a high-contrast color like Gold for better visibility */
    outline-offset: 2px;
}

/* 7. Button */
.custom-search-button {
    height: 30px;
    border: none;
    background-color: #005a9c;
    color: white;
    padding: 0 12px;
    cursor: pointer;
    font-weight: bold;
}

/* 8. Placeholder Contrast (SC 1.4.3) - Passed! */
.custom-search-input::placeholder {
    color: #444;
    opacity: 1;
}
	
	/* Mobile Adjustments (SC 1.4.10 Reflow) */
  /* 2. Keep label and input on the same line */
    .search-form {
        display: flex;
        flex-direction: row; /* Forces side-by-side */
        align-items: center;
        width: 85%;
        gap: 10px;
    }

    /* 2. Make the container and search bar full width */
    #searchContainer {
        width: 100%;
        max-width: 100%; 
        margin: 0;
        padding: 15px 0;    /* Vertical padding for breathing room */
        float: none;
        top: 0;
        display: flex;
        justify-content: center; /* Centers the 80-90% form inside the 100% container */
    }

   /* 3. Ensure the input group grows to fill the 90% width */
    .input-group {
        flex: 1;            /* Takes up all space not used by the label */
        height: 40px;       /* Slightly taller for touch targets */
        margin: 0;          /* Clean up any desktop margins */
		border-radius: 4px; /* Slightly rounded for mobile feel */
    }

    /* 4. Mobile Text Scaling */
    .search-label {
        font-size: 1rem;    /* Keeps "Search" legible */
		margin: 0 auto;
    }

    .custom-search-input {
        font-size: 16px !important; /* Prevents iOS auto-zoom on click */
    }

    .custom-search-button {
        height: 44px;
        padding: 0 15px;
		font-weight: bold;
    	font-size: 16px;
    }
/* end search group */
	
	
#navBackground {
	/*padding-top: 60px;*/
	 clear: both;
  /* margin-top: 10px;*/
}

#navDeptBackground {  /*I TOOK THIS OUT BECAUSE IT WAS THROWING OFF THE 1060 RESOLUTION - WILL NEED TO BE DELETED OR CHANGED*/
	height: 54px; /*this was 554 just fyi */
	/*background-image: url(../../Images/background_menu.jpg);*/
	background: #37658F;
background: linear-gradient(180deg, rgba(55, 101, 143, 1) 0%, rgba(62, 112, 156, 1) 50%, rgba(61, 60, 60, 1) 100%);
	/*background-color: #89C2E0;*/
	/*background-color:#03153F;*/
	width: 100%;
}
#navDeptMenu {
	/*width: 1060px;*/
	margin: auto;
	/*width: 1060px;
	margin-left: 440px;*/
	width: 100%;
}
#navMenu {
	/*background-image: url(../../Images/background_menu.jpg);
	background-repeat: repeat-x;*/
	background-color:#03153F;
}

#page {
	display: none;
}

/* begin seal group */
#seal {
	margin-top: 0;
	position: relative;
	z-index: 2;
	display: none;
}
#seal img { 
	width: 65px;
	margin-left: 2%; /* moves img left and right */
	margin-top: -25%; /* moves img up and down */
	background-image: url(../../Images/common/mc_mobile_logo_small.png);
	display: none;
}
/* end seal group */

.gridContainer {
	background-color: #DDDDDD;
	/*box-shadow: 9px 9px 6px #888888;*/
}


#importantNotice {
	background-color: #EEEEEE;	
}

#quickLinks {
	margin-top: 3px;
	background-color: #EEEEEE;
	padding: 0;
}
#quickLinks h3 { 
	font: bold 2em "Goudy Old Style";
	color: #661900;
	margin-top: 0;
	margin-bottom: 2px;
	padding: 0 5px 0 10px;
	border-bottom: 2px solid #fff;
}
#quickLinks table {
	width: 100%;
}
#quickLinks td {
	padding: 8px 8px;
	text-align: center;
}
#quickLinks a {
	font-family: Calibri, "Calibri Light";
	font-size: 1em;
	font-weight: bold;
	color: #5482AB;
	text-decoration: underline;
}
#quickLinks a:hover {
	color: #fff;
	text-decoration: none;
	background-color: #BFBFBF;
}

/* Layout for the entire footer area */
.site-footer {
    width: 100%;
    font-family: Calibri, sans-serif;
    line-height: 1.15;
}

/* Section 1: Blue Footer Styling */
#blueFooter {
    background-color: #37658F;
    color: #FFF;
    padding: 30px 20px;
    border-bottom: 5px solid #647DA8;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Space between Address, Links, and Copyright */
}

#blueFooter address {
    font-style: normal;
	font-size: 1.1rem;
}

#blueFooter ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
}

#blueFooter a {
    color: #FFF;
    text-decoration: underline;
    font-size: 1.1rem;
    padding: 3px;
}
	
#blueFooter a:hover {
    color: #FFF;
    text-decoration: none;
	background-color: #393939;
	padding: 3px;
}

/* Section 2: White Branding Styling */
#brandingFooter {
    background-color: #FFF;
    padding: 40px 20px;
	display: flex;
    flex-direction: column; 
    align-items: center;
    flex-shrink: 0; /* Prevents the section from collapsing on small screens */
    width: 100%;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /*gap: 50px;*/
	flex-direction: column; /* Stacks logos vertically on small phones */
    gap: 30px;
}

.logo-container img {
    width: auto;
	max-width: 100%; /* Prevents images from exceeding the screen width */
    height: auto;    /* Maintains the original aspect ratio */
    max-height: 80px;
    display: block;
}

.copyright {
    font-size: 1rem;
    margin-top: 12px;
}
	
	
	
#endLink {
	background-color: #03153F;
	color: white;
	text-align: center;

}
	
#endLink li {
	text-decoration-style: none;
	list-style-type: none;
	padding: 3%;
	}
	
#endLink li a {
   font: bold 1.5em Calibri, "Calibri Light";
   padding: 2%;
   background-color: #265c7c;
   border-radius: 15px;
   color: #ffffff;
   text-decoration: none;
} 
	
#endLink li a:hover {
   background-color: #0A4A70;
   color: #ffffff;
   text-decoration: none;
}
}


/* Ipad 1st gen Layout: 768px x 1075px	*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {

}


/* Tablet Layout: 768px to 1075px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 768px) and (max-width: 1075px) {

#headerBackground {
	height: 97px;
	background-image: url(../../Images/background_header.jpg);
	width: 1075px;
}
#header {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;     /* Absolute rule: stay on one line */
    align-items: center;   /* Vertical centering */
    justify-content: flex-start; /* Keeps everything pushed to the left */
    width: 1075px;
    height: 97px!important;
    margin-top: 0;     /* Moves the entire header area UP */
    padding-left: 10px;    /* Moves links closer to the left edge */
	background: url(../../Images/common/sealBackground.jpg);	
	/*height: 97px;
	width: 1075px;
	margin-top: -15px;*/
}

#mobileSeal {
	display: none;
} 

/* begin hlink group */
#hlink {
	/*margin-top: -1.00%; *//*this doesn't seem to change anything */
	/*margin-left: 3.5%;*/
	/*margin-top:.5%;*/
	/*width: 40%;*/
	/*width: 90%;*/ /*not sure if I should keep this*/
	/*margin-top: -.75%;*/  /*this moves hlinks up and down */
	/*margin-left: -3%;*/   /* this moves hlinks links left and right */
	/*padding: 0;
	margin: auto;*/
	margin-left: 0;
    flex-shrink: 0;         /* Allows links to squeeze slightly if needed */
}
#hlink ul {
	display: flex;
    white-space: nowrap;   /* Forces text to stay on one line */
    padding-top: 0;
	margin-top: -40px;
}
	
#hlink li {
	display: inline;
	/* Add a right border to act as the spacer */
    border-right: 2px solid #0056b3; /* Match your "blue spacer" color */
    padding-right: 8px;
    margin-right: 4px;
    vertical-align: middle;
	
}
	
/* Remove the border from the very last item (Accessibility) */
#hlink li:last-child {
    border-right: none;
}
	
/* Shared styles for both links and the accessibility button */
#hlink li a,
#hlink li button {
	color: #FFFFFF;
    font-size: 1.15em;
    font-weight: normal;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: middle;
    padding: 0 0;
    background-color: #000000; 
    
    /* Reset native button styling so it looks exactly like a link */
    border: none;
    cursor: pointer;
    display: inline;
}

/* Hover effects for both links and the button */
#hlink li a:hover,
#hlink li button:hover {
	color: #EBEBF8;
	text-decoration: underline;
}

/* Keyboard accessibility: Highlight elements when tabbed into */
#hlink li a:focus-visible,
#hlink li button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* Dynamic current-page state style */
#hlink li a[aria-current="page"] {
    font-weight: bold;
    text-decoration: underline;
    color: #EBEBF8; /* Gives the active page the highlight color */
}
/* end hlink group */


.minnCoSD {
		display: none;
}

	
/* begin search group */
/* 1. Container - Simplified */
#searchContainer {
    display: inline-flex; /* Use inline-flex so it only takes up as much space as needed */
    justify-content: center;
    align-items: center;
    /*background: linear-gradient(to bottom, #0d1117 0%, #1b263b 50%, #2c446d 100%);
    border-radius: 0px 10px 20px 20px;
    padding: 8px 15px;*/    /* Slightly tighter padding */
    /*max-width: 305px;*/      /* Limits total width to prevent pushing images */
    /*width: 100%;*/           /* Allows it to be smaller than 350px if needed */
margin: 0;
    
	display: inline-flex;
    flex-basis: 300px;     /* Sets a comfortable, wider base width */
    flex-shrink: 0;        /* Prevents it from getting squished by links */
    margin-left: 20px;     /* Control the gap between links and search */
    margin-right: auto;    /* Pushes the Seal to the far right */
    background: linear-gradient(to bottom, #0d1117 0%, #1b263b 50%, #2c446d 100%);
    border-radius: 0px 10px 20px 20px;
    padding: 8px 15px;
	margin-top: -45px;
}

/* 2. Form Layout */
.search-form {
    display: flex;
	width: 100%;
    align-items: center; 
    gap: 8px;
}

/* 3. Visible Label */
.search-label {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

/* 4. Input Group */
.input-group {
    display: flex;
    align-items: center;
    background-color: #E4E4E4 !important;
    border: 1px solid #767676;
    border-radius: 2px;
    height: 30px;
    flex-grow: 1;          /* Tells the input box to fill the remaining container space */
    overflow: hidden;
    margin: 0;             /* Remove margins to keep it tight */
	min-width: 0;  
}
/* 5. Input Field */
.custom-search-input {
    border: none;
    background: transparent !important;
    height: 100%;
    padding: 0 10px;
    font-size: 14px;
    width: 100%;           /* Fills the input-group */
    min-width: 0;          /* Technical fix to allow flex-items to shrink */
    color: #000;
}

/* Remove outline only because focus is handled by the parent group */
.custom-search-input:focus {
    outline: none;
}

/* 6. Accessible Focus (SC 2.4.7) */
.input-group:focus-within {
    outline: 3px solid #FFDD00; /* Use a high-contrast color like Gold for better visibility */
    outline-offset: 2px;
}

/* 7. Button */
.custom-search-button {
    height: 30px;
    border: none;
    background-color: #005a9c;
    color: white;
    padding: 0 12px;
    cursor: pointer;
    font-weight: bold;
}

/* 8. Placeholder Contrast (SC 1.4.3) - Passed! */
.custom-search-input::placeholder {
    color: #444;
    opacity: 1;
}
/* end search group */


#navDeptBackground {  /*I TOOK THIS OUT BECAUSE IT WAS THROWING OFF THE 1060 RESOLUTION - WILL NEED TO BE DELETED OR CHANGED*/
	height: 54px;
	background-image: url(../../Images/background_menu.jpg);
	width: 1075px;
}
#navDeptMenu {
	/*width: 1060px;*/
	margin: auto;
	/*width: 1060px;
	margin-left: 440px;*/
	width: 100%;
}
#navMenu {
	/*background-image: url(../../Images/background_menu.jpg);
	background-repeat: repeat-x;*/
	height: 54px;
	background: #37658F;
background: linear-gradient(180deg, rgba(55, 101, 143, 1) 0%, rgba(62, 112, 156, 1) 50%, rgba(61, 60, 60, 1) 100%);
}

#dl-menu {
	display: none;
}
#page {
	display: none;
}

/* begin seal group */
#seal {
	/*margin-top: 0;
	position: relative;
	z-index: 2;*/
	margin-right: 15px;    /* Keeps it from touching the very edge */
    flex-shrink: 0;
}
#seal img { 
	/*width: 80px;
	margin-left: 90%;*/ /* moves img left and right */
	/*margin-top: -9.5%; *//* moves img up and down */
	width: 75px;           /* Balanced size for tablet */
    margin: 0;             /* Reset all previous percentages/negative margins */
    position: static;
}
/* end seal group */



.gridContainer {
	background-color: #DDDDDD;
	box-shadow: 9px 9px 6px #888888;
}


#social {
	background: #7C97AB;
	margin: 0 auto;
}

#social img {
	padding: 0;
}

#socialBottom {
	background: #7C97AB;
	margin: 0 auto;
}

#socialBottom img {
	padding: 0;
}

/* Layout for the entire footer area */
.site-footer {
    width: 100%;
    font-family: Calibri, sans-serif;
    line-height: 1.15;
}

/* Section 1: Blue Footer Styling */
#blueFooter {
    background-color: #37658F;
    color: #FFF;
    padding: 30px 20px;
    border-bottom: 5px solid #647DA8;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Space between Address, Links, and Copyright */
}

#blueFooter address {
    font-style: normal;
	font-size: 1.1rem;
}

#blueFooter ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
}

#blueFooter a {
    color: #FFF;
    text-decoration: underline;
    font-size: 1.1rem;
    padding: 3px;
}
	
#blueFooter a:hover {
    color: #FFF;
    text-decoration: none;
	background-color: #393939;
	padding: 3px;
}

/* Section 2: White Branding Styling */
#brandingFooter {
    background-color: #FFF;
    padding: 40px 20px;
	display: flex;
    flex-direction: column; 
    align-items: center;
    flex-shrink: 0; /* Prevents the section from collapsing on small screens */
    width: 100%;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
}

.logo-container img {
    width: auto;
	max-width: 100%; /* Prevents images from exceeding the screen width */
    height: auto;    /* Maintains the original aspect ratio */
    max-height: 80px;
    display: block;
}

.copyright {
    font-size: 1rem;
    margin-top: 12px;
}

#endLink {
	left: 0;
    bottom: 0;
    width: 100%;
	background-color: #03153F;
	color: white;
	text-align: center;
    margin-top: 0;
	border-color: 2px solid #00DBFF;
}
	
#endLink li {
	text-decoration-style: none;
	list-style-type: none;
	padding: 2%;

}
	
#endLink li a {
   font: bold 1.5em Calibri, "Calibri Light";
   padding: 2%;
   background-color: #265c7c;
   border-radius: 15px;
   color: #ffffff;
   text-decoration: none;
} 
#endLink li a:hover {
   background-color: #0A4A70;
   color: #ffffff;
   text-decoration: none;
} 
}



/* Laptop Layout: Min width 1075px - max width 1400px*/
@media only screen and (min-width: 1076px) and (max-width: 1400px) {
#headerBackground {
	height: 97px;
	background-image: url(../../Images/background_header.jpg);
	margin-top: 0; /* keep for media queries issues*/
}

#header {
	width: 1060px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	background: url(../../Images/common/sealBackground.jpg);
	height: 97px;	
}

#mobileSeal {
	display: none;
}

/* begin hlink group */
#hlink nav {
	/*margin-top: 13px;*/  /*this moves hlinks up and down */
	/*margin-left: 35px;*/   /* this moves hlinks links left and right */
	padding-right: 10px;
}
#hlink ul {
	/*margin-top: 6px;*/ /*moves it down*/
    padding-left: 0;      /* removes default browser list indentation */
    margin-left: 0;
}
#hlink li {
	display: inline-block; /* changed to inline-block for better alignment */
	/* Add a right border to act as the spacer */
    border-right: 2px solid #0056b3; /* Match your "blue spacer" color */
    padding-right: 8px;
    margin-right: 4px;
    vertical-align: middle;
}
	
/* Remove the border from the very last item (Accessibility) */
#hlink li:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}
	
/* Shared styles for both links and the accessibility button */
#hlink li a,
#hlink li button {
	color: #FFFFFF;
    font-size: 1.15em;
    font-weight: normal;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: middle;
    padding: 0 0;
    background-color: #000000; 
    
    /* Reset native button styling so it looks exactly like a link */
    border: none;
    cursor: pointer;
    display: inline;
}

/* Hover effects for both links and the button */
#hlink li a:hover,
#hlink li button:hover {
	color: #EBEBF8;
	text-decoration: underline;
}

/* Keyboard accessibility: Highlight elements when tabbed into */
#hlink li a:focus-visible,
#hlink li button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* Dynamic current-page state style */
#hlink li a[aria-current="page"] {
    font-weight: bold;
    text-decoration: underline;
    color: #EBEBF8; /* Gives the active page the highlight color */
}
/* end hlink group */

.minnCoSD {
		display: none;
}

	
/* begin search group */
/* 1. Container - Simplified */
#searchContainer {
    display: inline-flex; /* Use inline-flex so it only takes up as much space as needed */
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #0d1117 0%, #1b263b 50%, #2c446d 100%);
    border-radius: 0px 10px 20px 20px;
    padding: 8px 15px;    /* Slightly tighter padding */
    max-width: 305px;      /* Limits total width to prevent pushing images */
    width: 100%;           /* Allows it to be smaller than 350px if needed */
}

/* 2. Form Layout */
.search-form {
    display: flex;
    align-items: center; 
    gap: 12px;
}

/* 3. Visible Label */
.search-label {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

/* 4. Input Group */
.input-group {
    display: flex;
    align-items: center;
    background-color: #E4E4E4 !important;
    border: 1px solid #767676;
    border-radius: 2px;
    height: 30px;
    flex-grow: 1;          /* Tells the input box to fill the remaining container space */
    overflow: hidden;
    margin: 0;             /* Remove margins to keep it tight */
}
/* 5. Input Field */
.custom-search-input {
    border: none;
    background: transparent !important;
    height: 100%;
    padding: 0 10px;
    font-size: 14px;
    width: 100%;           /* Fills the input-group */
    min-width: 0;          /* Technical fix to allow flex-items to shrink */
    color: #000;
}

/* Remove outline only because focus is handled by the parent group */
.custom-search-input:focus {
    outline: none;
}

/* 6. Accessible Focus (SC 2.4.7) */
.input-group:focus-within {
    outline: 3px solid #FFDD00; /* Use a high-contrast color like Gold for better visibility */
    outline-offset: 2px;
}

/* 7. Button */
.custom-search-button {
    height: 30px;
    border: none;
    background-color: #005a9c;
    color: white;
    padding: 0 12px;
    cursor: pointer;
    font-weight: bold;
}

/* 8. Placeholder Contrast (SC 1.4.3) - Passed! */
.custom-search-input::placeholder {
    color: #444;
    opacity: 1;
}
/* end search group */


#navDeptBackground {
	/*height: 54px;
	background-image: url(../../Images/background_menu.jpg);*/
}

#navDeptMenu {
	margin: 0 auto;
}

#navMenu {
	/*background-image: url(../../Images/background_menu.jpg);
	background-repeat: repeat-x;*/
	height: 54px;
	/*background-image: url(../../Images/background_menu.jpg);*/
	background: #37658F;
background: linear-gradient(180deg, rgba(55, 101, 143, 1) 0%, rgba(62, 112, 156, 1) 50%, rgba(61, 60, 60, 1) 100%);
}

#dl-menu {
	display: none;
}

/* begin seal group */
#seal {
	
}

#seal img { 
	width: 185px;
	margin-left: 91%; /* moves img left and right */
	margin-top: .65%; /* moves img up and down */
	position: relative;
	z-index: 102; /* keep for tomorrow */
}
/* end seal group */

.gridContainer {
	background-color: #DDDDDD;
	/*box-shadow: 9px 9px 6px #888888;*/
}

#social {
	background: #7C97AB;
}

#social img {
	padding-right: 5px;
}

/* Layout for the entire footer area */
.site-footer {
    width: 100%;
    font-family: Calibri, sans-serif;
    line-height: 1.15;
}

/* Section 1: Blue Footer Styling */
#blueFooter {
    background-color: #37658F;
    color: #FFF;
    padding: 30px 20px;
    border-bottom: 5px solid #647DA8;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Space between Address, Links, and Copyright */
}

#blueFooter address {
    font-style: normal;
	font-size: 1.1rem;
}

#blueFooter ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
}

#blueFooter a {
    color: #FFF;
    text-decoration: underline;
    font-size: 1.1rem;
    padding: 3px;
}
	
#blueFooter a:hover {
    color: #FFF;
    text-decoration: none;
	background-color: #393939;
	padding: 3px;
}

/* Section 2: White Branding Styling */
#brandingFooter {
    background-color: #FFF;
    padding: 40px 20px;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
}

.logo-container img {
    max-height: 80px;
    width: auto;
}

.copyright {
    font-size: 1rem;
    margin-top: 12px;
}

#endLink {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #03153F;
   color: white;
   text-align: center;
   
}
	
#endLink li {
	display: inline;
	}
	
#endLink li a {
   font: 1.25em Calibri, "Calibri Light";
   padding: 1%;
   background-color: #265c7c;
   border-radius: 15px;
   color: #ffffff;
   text-decoration: none;
} 
#endLink li a:hover {
   
   background-color: #0A4A70;
   
   color: #ffffff;
   text-decoration: none;
} 
}


/* Desktop Layout: min-width of 1401px and greater.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 1401px) {
#headerBackground {
	height: 97px;
	background-image: url(../../Images/background_header.jpg);
	margin-top: 0px; /* keep for media queries issues*/
}

#header {
	width: 1060px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	background: url(../../Images/common/sealBackground.jpg);
	height: 97px;
}

#mobileSeal {
	display: none;
}

/* begin hlink group */
#hlink nav {
	margin-top: 13px;  /*this moves hlinks up and down */
	margin-left: 35px;   /* this moves hlinks links left and right */
	padding-right: 10px;
}
#hlink ul {
	/*margin-top: 6px;*/ /*moves it down*/
    padding-left: 0;      /* removes default browser list indentation */
    margin-left: 0;
}
#hlink li {
	display: inline-block; /* changed to inline-block for better alignment */
	/* Add a right border to act as the spacer */
    border-right: 2px solid #0056b3; /* Match your "blue spacer" color */
    padding-right: 8px;
    margin-right: 4px;
    vertical-align: middle;
}
	
/* Remove the border from the very last item (Accessibility) */
#hlink li:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}
	
/* Shared styles for both links and the accessibility button */
#hlink li a,
#hlink li button {
	color: #FFFFFF;
    font-size: 1.15em;
    font-weight: normal;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: middle;
    padding: 0 0;
    background-color: #000000; 
    
    /* Reset native button styling so it looks exactly like a link */
    border: none;
    cursor: pointer;
    display: inline;
}

/* Hover effects for both links and the button */
#hlink li a:hover,
#hlink li button:hover {
	color: #EBEBF8;
	text-decoration: underline;
}

/* Keyboard accessibility: Highlight elements when tabbed into */
#hlink li a:focus-visible,
#hlink li button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* Dynamic current-page state style */
#hlink li a[aria-current="page"] {
    font-weight: bold;
    text-decoration: underline;
    color: #EBEBF8; /* Gives the active page the highlight color */
}
/* end hlink group */
	
.minnCoSD {
		display: none;
}

/* begin search group */
/* 1. Container - Simplified */
#searchContainer {
    display: inline-flex; /* Use inline-flex so it only takes up as much space as needed */
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #0d1117 0%, #1b263b 50%, #2c446d 100%);
    border-radius: 0px 10px 20px 20px;
    padding: 8px 15px;    /* Slightly tighter padding */
    max-width: 305px;      /* Limits total width to prevent pushing images */
    width: 100%;           /* Allows it to be smaller than 350px if needed */
}

/* 2. Form Layout */
.search-form {
    display: flex;
    align-items: center; 
    gap: 12px;
}

/* 3. Visible Label */
.search-label {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

/* 4. Input Group */
.input-group {
    display: flex;
    align-items: center;
    background-color: #E4E4E4 !important;
    border: 1px solid #767676;
    border-radius: 2px;
    height: 30px;
    flex-grow: 1;          /* Tells the input box to fill the remaining container space */
    overflow: hidden;
    margin: 0;             /* Remove margins to keep it tight */
}
/* 5. Input Field */
.custom-search-input {
    border: none;
    background: transparent !important;
    height: 100%;
    padding: 0 10px;
    font-size: 14px;
    width: 100%;           /* Fills the input-group */
    min-width: 0;          /* Technical fix to allow flex-items to shrink */
    color: #000;
}

/* Remove outline only because focus is handled by the parent group */
.custom-search-input:focus {
    outline: none;
}

/* 6. Accessible Focus (SC 2.4.7) */
.input-group:focus-within {
    outline: 3px solid #FFDD00; /* Use a high-contrast color like Gold for better visibility */
    outline-offset: 2px;
}

/* 7. Button */
.custom-search-button {
    height: 30px;
    border: none;
    background-color: #005a9c;
    color: white;
    padding: 0 12px;
    cursor: pointer;
    font-weight: bold;
}

/* 8. Placeholder Contrast (SC 1.4.3) - Passed! */
.custom-search-input::placeholder {
    color: #444;
    opacity: 1;
}
/* end search group */

#navDeptBackground {
	height: 54px;
	
}

/*#navDeptMenu {
	margin: 0 auto;
}
	*/
#navMenu {
	margin: 0 auto;
	/*width: 1080px;*/
	/*background-image: url(../../Images/background_menu.jpg);
	background-repeat: repeat-x;*/
	height: 54px;
	/*background-image: url(../../Images/background_menu.jpg);*/
	/*background-color: #37658F;*/
	background: #37658F;
background: linear-gradient(180deg, rgba(55, 101, 143, 1) 0%, rgba(62, 112, 156, 1) 50%, rgba(61, 60, 60, 1) 100%);
}


#dl-menu {
	display: none;
}

/* begin seal group */
#seal {
	
}

#seal img { 
	width: 185px;
	margin-left: 91%; /* moves img left and right */
	margin-top: .65%; /* moves img up and down */
	position: relative;
	z-index: 102; /* keep for tomorrow */
}
/* end seal group */

.gridContainer {
	background-color: #DDDDDD;
	/*box-shadow: 9px 9px 6px #888888;*/
}


#social {
	background: #7C97AB;
}

#social img {
	padding-right: 5px;
}


/* Layout for the entire footer area */
/* Layout for the entire footer area */
.site-footer {
    width: 100%;
    font-family: Calibri, sans-serif;
    line-height: 1.15;
}

/* Section 1: Blue Footer Styling */
#blueFooter {
    background-color: #37658F;
    color: #FFF;
    padding: 30px 20px;
    border-bottom: 5px solid #647DA8;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Space between Address, Links, and Copyright */
}

#blueFooter address {
    font-style: normal;
	font-size: 1.1rem;
}

#blueFooter ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
}

#blueFooter a {
    color: #FFF;
    text-decoration: underline;
    font-size: 1.1rem;
    padding: 3px;
}
	
#blueFooter a:hover {
    color: #FFF;
    text-decoration: none;
	background-color: #393939;
	padding: 3px;
}
/* Section 2: White Branding Styling */
#brandingFooter {
    background-color: #FFF;
    padding: 40px 20px;
	display: flex;
    flex-direction: column; 
    align-items: center;
    flex-shrink: 0; /* Prevents the section from collapsing on small screens */
    width: 100%;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /*gap: 50px;*/
	flex-direction: column; /* Stacks logos vertically on small phones */
    gap: 30px;
}

.logo-container img {
    width: auto;
	max-width: 100%; /* Prevents images from exceeding the screen width */
    height: auto;    /* Maintains the original aspect ratio */
    max-height: 80px;
    display: block;
}

.copyright {
    font-size: 1rem;
    margin-top: 12px;
}

#endLink {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #03153F;
   color: white;
   text-align: center;
   
}
	
#endLink li {
	display: inline;
	}
	
#endLink li a {
   font: 1.65em Calibri, "Calibri Light";
   padding: 1%;
   background-color: #265c7c;
   border-radius: 15px;
   color: #ffffff;
   text-decoration: none;
} 
#endLink li a:hover {
   background-color: #0A4A70;
   color: #ffffff;
   text-decoration: none;
} 
}