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

/***********************************************/
/* Minnesota_Seasons_04.css                    */
/* First used 8/31/2025                        */
/* Eventually switching from all table layout  */
/* to all div layout                           */
/***********************************************/

/* Base styles for the new div layout */

.about-media-button-div {
    position: relative;
    padding-top: 3px;
    cursor: pointer;
}

.aboutMediaButton:hover .aboutMediaPopup {
    display: block;
}
	
.about-media-popup-div {
    display: none;
    animation: ease-in;
    animation-duration: 2s;
    width: 400px;
    margin-left: 80px;
    padding: 5px 10px; /* Shorthand padding */
    background-color: #FFF;
    border: 2px solid #0000CC;
    text-align: left;
    position: absolute; /* Positions the popup relative to the button */
    top: 20px; /* Adjust this value to place it correctly */
    left: 200px; /* This will make it pop up to the right */
    z-index: 10; /* Ensures the popup appears on top of other content */
}

.alpha-button-list {
    margin-top: 15px; /* This will always be applied to the button list */
}

.alpha-flex {
    display: flex;
    flex-wrap: wrap; /* Allows the buttons to wrap to the next line */
    justify-content: flex-start; /* Aligns buttons to the left */
    width: 590px; /* This width will force the buttons to wrap just like the table */
}

/* You can use this to add space between the buttons if needed */
.alpha-flex button {
    margin-right: 5px; 
    margin-bottom: 5px;
}

.alphaButton{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFFFFF;
	background-color: #1957FF;
	border: none;
	width: 57px;
	padding: 0px 0px 0px 0px;
}

.alphaButtonSelected{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color:#FFFFFF;
	background-color:#8AA9FF;
	border: none;
	width: 57px;
	padding: 0px 0px 0px 0px;
}

.blue-box {
    border-style: solid;
    border-color: #F4F4FF;
    border-width: 5px;
    background-color: #F4F4FF;
    box-sizing: border-box;
    margin-bottom: 15px; /* Adds space below the entire blue box container */
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.contributor-flex {
    display: flex;
    justify-content: space-between; /* Creates a gap between the two columns */
    align-items: center; /* Aligns items vertically */
    width: 788px; /* Same width as your old table */
}

.contributor-photo {
    width: 368px; /* Matches the old table column width */
}

.contributor-slideshow {
    width: 410px; /* Matches the old table column width */
    background-image: url("Images/Loading_400x400.jpg");
    text-align: center; /* Centers the slideshow */
}

figcaption {
    text-align: left;
    font-size: 12px;
    font-style: italic;
    color: #666;
}

.footer-wrapper {
    /* Styles for your outer container if needed */
}

.footer-text-wrapper {
    width: 590px;
    margin-left: 138px;
    margin-right: auto;
}

.footer-flex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 20px 0; /* Add some top and bottom padding */
}

.footer-spacer {
    flex-grow: 1;
    /* This empty div will take up the available space on the left */
}

.footer-info,
.footer-links {
    padding: 0 50px; /* Add some padding to separate the content */
}

.header-with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.indent-1 {
  padding-left: 0.25in;
}

.indent-2 {
  padding-left: 0.50in;
}

.indent-3 {
  padding-left: 0.75in;
}

.indent-4 {
  padding-left: 1.0in;
}

.indent-5 {
  padding-left: 1.25in;
}

.indent-6 {
  padding-left: 1.5in;
}


.inline-icon {
	vertical-align:text-top 
}

.main-head-div {
	background-color: #BFBFF1;
	padding: 5px;
	margin-bottom: 15px;
	text-align: center;
    box-sizing: border-box;
}

.main-subhead-div {
    border-style: solid;
    border-color: #F4F4FF;
    border-width: 5px;
	background-color: #BFBFF1;
	padding: 5px;
	margin-bottom: 5px;
	text-align: center;
	color: #000000;
    box-sizing: border-box;
}

.main-subhead-div a{
	color: #000000;
}

.media-card {
    width: 100%;
    position: relative; /* This is crucial for positioning the popup */
}
.no-bottom-margin {
	margin-bottom: 0 !important;
}

.no-left-margin {
	margin-left: 0;
}

.photo-card {
    border-style: solid;
    border-color: #F4F4FF;
    border-width: 5px;
    background-color: #F4F4FF;
    margin-bottom: 15px;
}

.photo-card-header {
    padding: 10px; /* Adjust padding as needed */
}

.photo-card-content {
    text-align: center;
    padding: 10px; /* Adjust padding as needed */
}

.photo-card-content p {
    text-align: left;
}

.photo-card-caption {
    padding: 10px; /* Adjust padding as needed */
}

.photo-card-photo {
    text-align: center;
}

.photo-card-flex-container {
    display: flex;
    flex-wrap: wrap; /* Allows the units to wrap onto the next line */
    justify-content: flex-start; /* Aligns them to the left side */
    gap: 10px; /* Provides space between each unit */
}

/* This is the new CSS you need to add */
.photo-card-flex-container .half-width {
    float: none; /* Remove float from half-width cards inside the Flexbox container */
    width: calc(50% - 5px); /* Let the Flexbox container manage the width */
    margin-right: 0;
}

.photo-card.full-width {
    flex-grow: 1;
}

.photo-credit {
    text-align: left;
    font-size: 12px;
    font-style: italic;
    color: #666;
}

.photo-unit {
    width: calc(50% - 5px); /* This makes each unit exactly half the width minus the gap */
    box-sizing: border-box;
}

.photo-unit-wrapper {
    display: flex;
    flex-direction: column;
    width: 200px; /* Adjust as needed */
    margin: 10px;
}

.photo-wrap {
    float: right;
    margin-left: 20px; /* Space between text and image block */
    margin-right: 0px; /* Space between text and image block */
    margin-bottom: 20px; /* Space below the image block */
}

.photographer-wrap {
    float: right;
    margin-left: 20px; /* Space between text and image block */
    margin-bottom: 20px; /* Space below the image block */
}

.recent-addition-card {
    width: 100%;
	margin-bottom: 15px; /* Adds the white space below the header */
}

.report-header {
	padding: 10px 10px 0px 10px;
}

.report-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 0px 10px 10px 10px;
}

.report-button {
	margin-right: 20px; /* Adjust this value as needed */
    /* Set a fixed width for the button's container if needed, otherwise Flexbox will handle it. */
    /* width: 200px; */
}

.section-wrapper {
	margin-bottom: 15px;
	width: 100%;
	box-sizing: border-box; /* Ensures padding and border are included in the width */
}

.section-header {
	background-color: #F4F4FF; /* The blue background color */
	padding: 5px; /* Replaces the padding from the old table cell */
	margin-bottom: 15px; /* Adds the white space below the header */
}

.sighting-card {
	display: flex;
	border-style: solid;
	border-color: #F4F4FF;
	border-width: 5px;
	background-color: #F4F4FF;
	margin-bottom: 15px;
	width: 100%;
	box-sizing: border-box; /* Ensures padding and border are included in the width */
}

/* Base styles for the content divs */
.sighting-info, .sighting-location, .sighting-location-no-pic, .sighting-pic {
	box-sizing: border-box;
}

.sighting-info {
	width: 120px;
}

.sighting-location {
	width: 350px;
}

.sighting-location-no-pic {
	width: 465px;
}

.sighting-pic {
	width: 110px;
	text-align: right;
}

.sighting-MS {
	margin-bottom: 15px;
	width: 100%;
	column-count: 2;
	column-gap: 30px;
	column-rule: 1px solid #000;
}

.taxonomy-list {
  display: grid;
  grid-template-columns: 8em 1fr; 
	/* Defines two columns: a fixed one and a flexible one */
  gap: 0.5em; /* Creates a small gap between the columns */
  margin-top: 1em;
}

.wrapped-image {
    float: right;
    margin-left: 20px; /* Adds space between the image and the text */
    margin-bottom: 20px; /* Adds space below the image */
}