@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
	font-family: 'Open Sans', sans-serif;
	color: #000;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5rem;
	background-color: #FAFAFA;
	width: 100%;
	margin-top: 0;
}

main {
	width: 90%;
	margin: 0.5em auto;
}

p {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	margin-top: 0;
	margin-bottom: 0;
	color: #000;
}

h1 {
	font-size: 1.875rem;
	line-height: 2.0rem;
	font-weight: bold;
	color: #333;
}

h2 {
	font-size: 1.5rem;
	line-height: 1.7rem;
	font-weight: bold;
	color: #000;
	padding-top: 1.5rem;
}

h3 {
	font-size: 1.25rem;
	line-height: 2.5rem;
	font-weight: bold;
	color: #333;
	margin-bottom: 2px;
}

h4 {
	font-weight: 100;
	font-size: 1rem;
	color: #333;
}

h5 {
	font-size: .75rem;
	color: #333;
	padding: 0px;
	margin: 10px;
}

h6 {
	font-size: 1.25rem;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	color: #FFFFFF;
}

/* BPLD standard blue link with green hover */
a {
	color: #323CEC;
	background-color: transparent;
	text-decoration: none;
}

a:hover {
	color: #4E8605;
	background-color: transparent;
	text-decoration: none;
}

li {
	text-align: left;
	font-weight: normal;
}

img {
	max-width: 100%;
	height: auto;
}

/* Table formatting */
table {
	border: none;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
}

th,
td {
	border: none;
	border-collapse: collapse;
	padding: .5rem 1rem;
}

th {
	background-color: #8cc63f;
}

tbody tr:nth-child(odd) {
	background-color: #E6E5EF;
}

tbody tr:nth-child(even) {
	background-color: #f1f1f1;
}

.center {
	text-align: center;
}

.deptimage,
.deptheadimage {
	max-width: 100%;
	text-align: center;
}

.uppercase {
	text-transform: uppercase;
	font-weight: bold;
}

.special,
.special2 {
	text-align: center;
	padding: 15px;
	margin-bottom: 5px;
}

.special h3,
.special2 h3 {
	font-size: 1.25rem;
}

.special a,
.special2 a {
	text-decoration-line: underline;
}


/* Start of search bar styling */
.polaris {
	/* span that allows bar to overlay hero image */

	/* variables for search bar styling */
	--srchHeight: 4rem;
	--srchbtn-width: 8rem;
	--srchFontSize: 1.5rem;
	--bez: cubic-bezier(0, 0, 0.43, 1.49);
	/* for transition styling */

	width: 100%;
	opacity: 1.0;
	float: left;
	text-align: left;
	padding-top: 220px;
	padding-right: 10px;
	position: relative;
	z-index: 100;
}

.polaris>form {
	/* controls the size and position of the search bar */
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	max-width: 700px;
	min-width: 265px;
	position: relative;
	background: #FCB034;
	border-radius: .7rem;
}

#searchField,
#searchButton {
	border: 0;
	color: #2f2f2f;
	font-size: var(--srchFontSize);
}

#searchField {
	height: var(--srchHeight);
	outline: 0;
	width: 100%;
	background: #fff;
	padding: 0 1.6rem;
	border-radius: .7rem;
	appearance: none;
	transition: all .3s var(--bez);
	transition-property: width, border-radius;
	z-index: 1;
	position: relative;
}

#searchButton {
	/* Cannot be accessed until text entry begins in the search field */
	height: var(--srchHeight);
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: var(--srchbtn-width);
	background: #FCB034;
	border-radius: 0 .7rem .7rem 0;
	cursor: pointer;
}

#searchField:not(:placeholder-shown) {
	border-radius: .7rem 0 0 .7rem;
	width: calc(100% - var(--srchbtn-width));

	+#searchButton {
		display: block;
	}
}

#searchLabel {
	/* hidden from view at all times but is accessible for assistive technology */
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* End search bar styling */

.mainindex {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3em;
	padding-top: 10px;
	display: flex;
}

.maintemplate>h1 {
	margin: 2em auto;
}

.mainonecol {
	width: 85%;
	margin: auto;
}

.maintwocol {
	width: 95%;
	position: relative;
}

.mainthreecol {
	width: 100%;
	position: relative;
}

.mainimage {
	width: 100%;
	height: 470px;
	padding-top: 15px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background-image: url("../images/header_main.png");
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -100;
}

#buttons {
	vertical-align: bottom;
	background-color: #000;
	border: none;
	color: white;
	font-weight: 500;
	padding: 8px 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
}

.indexphoto,
.maintwocoltext,
.mainthreecoltext {
	box-sizing: border-box;
	width: auto;
	height: auto;
	padding: 1%;
}

.indexphoto {
	max-width: 600px;
	margin: inherit;
}

.indexphoto img {
	box-shadow: rgba(0, 0, 0, .25) 0 8px 15px;
	transition: transform 0.1s ease;
}

.indexphoto img:hover {
	transform: scale(1.02);
}

.indexboxes {
	width: 90%;
	height: auto;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.maintwocolboxes,
.mainthreecolboxes {
	width: auto;
	height: auto;
	text-align: justify-all;
}

/* aesthetic spacing for text/mixed content in main columns */
.mainColSpacing {
	margin: 1em 0em 0em 0em;
}

.mainColSpacing>div {
	margin: 1em 0em;
}

.mainColSpacing>p {
	margin: 0em 0em 1em 0em;
}

.blockIndent {
	padding: 1em 2em;
}

.footer {
	width: 100%;
	height: auto;
	padding-top: 15px;
	padding-bottom: 50px;
	text-align: center;
	/* Footer background color is the same regardless of dark mode */
	background-color: #D7D3D3;
}

/* Stops FullCalendar widget content scrolling "through" the DOW by removing the DOW */
.fc-list-day-text {
	display: none;
}

.redbold {
	color: #c0392b;
	font-weight: bold;
}

div.listContainer {

	text-align: center;
}

ul.listgroup {
	text-align: left;
	display: inline-block;

}

li.listitem {
	display: inline-block;
	margin-top: 10px;
	font-size: 16px;
}

li.listitem:hover {
	font-weight: 400;
	color: aqua;
}

.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.noList {
	list-style-type: none;
}

#managerContactList {
	padding-left: 4em;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.flexMobileWrap {
	display: flex;
	flex-wrap: nowrap;
	gap: 30px;
}

.flexCenterY {
	align-content: center;
}

.flexCenterX {
	justify-content: center;
}

.one-thirdFlex {
	flex: 1 1 33%;
}

.two-thirdFlex {
	flex: 1 1 66%;
}

.ovalButton {
	box-shadow: rgba(0, 0, 0, .25) 0 2px 3px;
	border-radius: 50px;
	/* button is an image, this removes the white border caused by the box-shadow */
	transition: transform 0.1s ease;
}

.ovalButton:hover {
	transform: translateY(0.1em);
}

/* Subscribe button for eNewsletter */
.subscribeButton {
	--button_radius: 0.75em;
	--button_color: #FCB034;
	--button_color_hover: #fcb848;
	width: 150px;
	font-size: 22px;
	border: none;
	background: none;
	cursor: pointer;
	border-radius: var(--button_radius);
	padding: 0;
	display: block;
	box-shadow: rgba(0, 0, 0, .2) 0 3px 6px;
}

.subscribeButton_top {
	display: block;
	box-sizing: border-box;
	border-radius: var(--button_radius);
	padding: 0.6em 1em;
	background: var(--button_color);
	color: #000;
	transition: transform 0.1s ease;
}

.subscribeButton:hover .subscribeButton_top {
	background: var(--button_color_hover);
}

.subscribeButton:active .subscribeButton_top {
	transform: translateY(0.2em);
}

.newsLetterImg {
	box-shadow: rgba(0, 0, 0, .4) 0 8px 25px;
	width: 100%;
	max-width: 600px;
	transition: transform 0.3s ease;

	&:hover {
		transform: scale(1.02);
	}
}

#museumPassImg {
	box-shadow: rgba(0, 0, 0, .25) 0 4px 15px;
	border-radius: 50%;
}

/* Table divs, responsive and rounded corners */
/* Sets minimum table width to 250px. Override as necessary */
.tableWrapper {
	display: flex;
	justify-content: center;
	padding: 1rem;
}

.tableWrapper th {
	color: #1D2B0C;
}

.tableWrapper .innerWrapper {
	border-radius: 12px;
	overflow: hidden;
	max-width: 100%;
}

.tableWrapper .scrollWrapper {
	overflow-x: auto;
	width: 100%;
}

.tableWrapper table {
	border-collapse: collapse;
	width: 100%;
	min-width: 250px;
	background-color: transparent;
}

/* Styling for cards generated by tableToCards.js */
.tableCard {
	background-color: #E5F6DF;
	color: #1D2B0C;
	padding: 1em;
	margin: 1em auto;
	border-radius: 8px;
	border: 1px solid #ccc;
	max-width: 600px;
	text-align: left;
}

th {
	color: #1D2B0C;
}

.tableCardRow {
	display: flex;
	flex-direction: column;
	/* Stack label and value vertically */
	margin-bottom: 0.75em;
}

.tableCardRow .label {
	font-weight: bold;
	margin-bottom: 0.25em;
}

#exploreIllinoisImg {
	max-width: 300px;
	margin-bottom: 2em;
}

/* Buttons are centered on both axes and spaced such that the space between all buttons and container boundaries are equal.
	Buttons will automatically wrap to the next row for smaller screens.
	By default, all img elements that are direct children will not resize with the screen. */
.flexButtonContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	align-content: center;
}
.flexButtonContainer > img {
	flex-grow: 0;
	flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
	.tableCard {
		background-color: #4d4d4d;
		color: #FBEADA;
	}
}

/* End tableToCards styling */

@media screen and (min-width: 1200px) {
	.footer {
		width: 100%;
		margin: auto;
		justify-content: center;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.address,
	.hours,
	.social {
		width: 33.33333%;
		justify-content: space-between;
	}
}

@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}

@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}

/* Changes page based on browser color theme choice */
@media (prefers-color-scheme: dark) {
	body {
		background-color: #303030;
	}

	.ButtonContainer {
		background-color: #999999;
	}

	td,
	th {
		color: #FBEADA;
		/* Beige */
	}

	th {
		background-color: #404040;
		;
	}

	tbody tr:nth-child(odd) {
		background-color: #4d4d4d;
	}

	tbody tr:nth-child(even) {
		background-color: #595959;
	}

	/* Set base text color */
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	li {
		color: #FBEADA;
		/* Beige */
	}

	/* Change main page background */
	.mainimage {
		background-image: url("../images/header_main_darkmode.png");
	}

	.indexphoto img {
		box-shadow: rgba(0, 0, 0, .8) 0 8px 15px;
	}

	/* Lighten links for readability */
	a {
		color: #00bfff;
		/* Aqua */
	}

	a:hover {
		color: #C36900;
		/* Dark orange */
	}

	/* Lighter links in tables for ADA compliance */
	table a {
		color: #80e0ff;
		/* Lighter Blue  */
	}

	.ovalButton {
		box-shadow: rgba(0, 0, 0, .6) 0 4px 4px;
	}

	/* For eNewsletter */
	.subscribeButton {
		--button_color: #DC7700;
		--button_color_hover: #c66b00;
		box-shadow: rgba(0, 0, 0, .6) 0 4px 4px;
	}

	.newsLetterImg {
		box-shadow: rgba(0, 0, 0, .8) 0 12px 65px;
	}

	#museumPassImg {
		box-shadow: rgba(0, 0, 0, .6) 0 4px 15px;
	}

	.tableWrapper th {
		color: #FBEADA;
	}

	/* Yellow for visibility in dark mode */
	.redbold {
		color: #f4d03f;
	}
}

/* End Dark Mode */

/* Footer text & link colors are the same regardless of dark mode */
.footer p,
.footer h3,
.footer h5 {
	color: #000000;
}

.footer a {
	color: #323CEC;
}

.footer a:hover {
	color: #4E8605;
}

/* Special DIV colors are the same regardless of dark mode */
.special {
	background-color: #AC0A0A;
}

.special2 {
	background-color: #3B09AC;
}

.special p,
.special h3,
.special a,
.special2 p,
.special2 h3,
.special2 a {
	color: #fff;
}


@media screen and (min-width: 1200px) {

	.mainindex,
	.footer {
		width: 100%;
		justify-content: center;
	}

	.maintwocol,
	.mainthreecol {
		margin: auto;
		justify-content: center;
	}

	.footer {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.indexphoto,
	.address,
	.hours,
	.social {
		width: 33.33333%;
		justify-content: space-between;
	}

	.indexboxes,
	.mainthreecolboxes,
	.maintwocolboxes {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.maintwocoltext {
		width: 50%;
		justify-content: space-between;
	}

	.mainthreecoltext {
		width: 33.333334%;
		justify-content: space-between;
	}

	.searchsmall,
	.space {
		display: none;
	}

	.special {
		display: block;
	}

	.special2 {
		display: none;
	}
}

@media screen and (max-width: 1199px) {
	.body {
		width: 100%;
	}

	/*.search {
		width: 100%;
		margin-left: 0%;
		border-radius: 0px;
	}*/
	.special {
		margin-bottom: 20px;
		display: block;
	}

	.special2 {
		display: none;
	}

	#managerContactList {
		padding-left: 0;
	}

	.flexMobileWrap {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 1420px) {

	.maintwocol,
	.mainthreecol {
		width: 100%;
		margin: auto;
		justify-content: center;
	}

	.special {
		display: block;
	}

	.special2 {
		display: none;
	}
}

@media screen and (max-width: 735px) {
	:root {
		--srchHeight: 3rem;
		--srchbtn-width: 6rem;
		/* Breaks on safari if made smaller */
		--srchFontSize: 1.2rem;
	}

	body {
		margin-top: 0;
	}

	#textboxTerm {
		width: 90%;
	}

	.mainimage {
		height: 400px;
		/*		Added to keep background image from being covered    */
		/*padding-top: 1000px;*/
	}

	/*.deptimage,*/
	.deptheadimage {
		max-width: 100%;
		text-align: center;
		/*padding-top: 125px;*/
	}

	#dHeaderImg {
		object-position: center;
		object-fit: cover;
		height: 80px;
	}

	.search {
		display: none;
	}

	/*
	.search {
		height: 95px;
		margin-top: 45px;
		Until hamburger menu fixed
		display:flex;
		padding-top: 600px;
		margin-top: 230px;
	}
*/
	.polaris {
		padding: 100px 0px 40px;
	}

	.polaris>form {
		margin-left: 8%;
		margin-right: 8%;
	}

	.special {
		display: block;
	}

	.special2 {
		display: none;
	}
}

@media print {

	.navigation,
	.maintemplate,
	.deptimage {
		display: none;
	}
}

/* Because navstyles.css is imported after, those styles take precedence over these */