/* PowerSite 2.93 - Client: MARR - Screen Layout CSS */
/* Last Updated: 2025.07.09 ET */

body {
	background-color: white;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
}

main {
	/* background-image: url('/images/marr_bkgd_layoutgrid.png'); */
	background-repeat: repeat-y;
	background-position: center top;
    flex: 1 1 auto;
}

main > header {
	background-color: rgb(237,239,248);
	text-align: center;
	padding: 3.2rem 3.7rem;
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
}

main > header h1,
main > header p.headline {
	max-width: 58rem;
	font-size: 3rem; /* 42px ÷ 14px */
	line-height: 1.1;
	margin: 0;
}

main > header h1::after {
	display: none;
}

main > header h1 + p,
main > header p.headline + p {
	color: rgb(96,113,159);
	font-style: italic;
	font-weight: bold;
	font-size: 1.71rem; /* 24px ÷ 14px */
	margin: 0;
}

main > section {
	padding: 2rem 3.7rem 4rem;
}

main > section + section {
	padding-top: 3rem;
}

main > section + section > article:not(.feature) h1:first-child {
	margin-top: 2rem;
}

/* main > section:nth-child(even) {
	background-color: rgb(237,239,248);
} */

main > section > article {
	max-width: 47.1rem;
	margin-left: auto;
	margin-right: auto;
}

nav {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

section.withnav,
section.afternav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

section.withnav > article {
	max-width: 40.7rem;
	margin-right: 1.7rem;
}

section.withnav > nav {
	flex: 0 0 12.86rem;
	border-left: 1px solid rgb(178,196,229);
	margin-top: 5.3rem;
}

section.withnav > nav > h3 {
	color: rgb(42,60,104);
	text-transform: uppercase;
	margin: 0 auto 2em;
}

section.search {
	background: rgb(31,49,89) url('/images/marr_bkgd_search.png') no-repeat center center !important;
	background-size: cover !important;
	color: white;
	text-align: center !important;
	padding-top: 3rem;
	padding-bottom: 2rem;
}

section.search h2 {
	text-transform: none;
	margin-bottom: 0.86rem;
}

section.search h2::after {
	display: none;
}

section.search h2 + p {
	font-style: italic;
	margin-top: 0;
}

section.search form {
	margin-bottom: 2.71rem;
}

section.search input[type="text"] {
	display: inline-block;
	width: 30rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	border: 5px solid rgb(178,196,229);
	border-radius: 1rem;
	margin-bottom: 0.25rem;
}

section.search input[type="text"]::placeholder {
	text-align: center;
}

section.search input[type="submit"] {
	color: rgb(178,196,229) !important;
	border-color: rgb(178,196,229);
}

ul.subnav {
	list-style: none;
	font-weight: bold;
	font-style: italic;
	padding: 0 0 5.3rem 1.43rem;
	margin: 0;
}

ul.subnav > li {
	padding: 0;
	margin: 0 0 1em 0;
}

ul.subnav a,
ul.subnav a:visited {
	color: rgb(96,113,159);
	text-decoration: none;
}

ul.subnav a:hover,
ul.subnav li.active a,
ul.subnav li.active a:visited {
	color: rgb(31,49,89);
}

nav.adminlinks {
	position: sticky;
	bottom: 0;
	background-color: rgb(237,239,248);
	padding: 0.7rem 3.7rem;
	border-top: 1px solid white;
	z-index: 11000;
}

nav.adminlinks > ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

nav.adminlinks > ul > li {
	display: inline-block;
	padding: 0;
	margin: 0;
}

nav.adminlinks > ul > li + li {
	margin-left: 1.5em;
}

input.menu-cb {
	display: none;
}

/* Specific ID'd Elements */

#siteheader {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 2rem 3.7rem 1rem; /* 28px ÷ 14px, 52px ÷ 14px */
}

#sitelogo {
	height: 3.3rem;
	width: auto;
}

#nav-control {
	display: none;
}

#sitenav a,
#sitenav a:visited,
#sitenav ul label {
	display: block;
	color: rgb(42,60,104);
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
	padding: 0.35rem 0 0.25rem;
	cursor: pointer;
}

#sitenav li.featured > a,
#sitenav li.featured > label {
	padding: 0.35rem 0.86rem 0.25rem;
	border: 2px solid rgb(178,196,229);
	border-radius: 9999px;
}

#sitenav li.featured > a:hover,
#sitenav li.featured > label:hover {
	border-color: rgb(42,60,104);
}

#sitenav > ul {
	position: relative;
	z-index: 9000;
}

#sitenav > ul > li {
	position: relative;
	padding: 0;
	margin: 0;
}

#sitenav > ul {
	position: relative;
	list-style: none;
	padding: 0;
}

#sitenav > ul > li {
	margin-left: 1.6rem;
}

#sitenav > ul > li > ul {
	display: none;
	list-style: none;
	max-height: 60vh;
	padding: 0.7rem 0 0 0;
	margin: 0 0 0 -0.7rem;
	overflow-y: auto;
}

#sitenav > ul > li > ul > li,
#sitenav > ul > li.featured > ul {
	margin: 0;
}

#sitenav > ul > li > a,
#sitenav > ul > li > label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

#sitenav > ul > li > ul a,
#sitenav > ul > li > ul a:visited {
	color: rgb(96,113,159);
	padding: 0.5rem 1.5rem; /* 7px ÷ 14px, 21px ÷ 14px */
}

#sitenav > ul > li > ul a:hover,
#sitenav > ul > li > ul > li.active > a,
#sitenav > ul > li > ul > li.active > label {
	color: rgb(31,49,89);
}

@media (min-width: 940px) {

	#sitenav {
		font-size: 0.86rem; /* 12px ÷ 14px */
	}

	#sitenav a:hover {
		color: rgb(31,49,89);
	}

	#sitenav > ul > li {
		display: inline-block;
		vertical-align: top;
	}

	#sitenav > ul > li.featured {
		margin: 0 0.5rem 0 1.2rem;
	}

	#sitenav > ul > li.active > a,
	#sitenav > ul > li.active > a:visited,
	#sitenav > ul > li.active > label {
		/* text-decoration: underline; */
		border-bottom: 1px solid rgb(42,60,104);
	}

	#sitenav > ul > li > ul {
		position: absolute;
		left: -0.5rem;
		width: 11.28rem;
		background-color: white;
		padding-bottom: 2rem;
	}

	#sitenav > ul > li:hover > ul {
		display: block;
	}

}

@media (max-width: 939px) {

	#nav-control {
		display: block;
		position: absolute;
		top: 2rem;
		right: 1.4rem;
		font-size: 3rem;
		z-index: 10000;
		cursor: pointer;
	}

	#sitenav {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: rgba(42,60,104,0.8);
		z-index: 8000;
	}

	#nav-checkbox:checked ~ #sitenav {
		display: block;
	}
	
	#nav-checkbox:checked ~ #nav-control {
		top: 0.8rem;
		right: 0.7rem;
		font-size: 2.6rem;
	}

	#nav-checkbox:checked ~ #nav-control::after {
		position: absolute;
		top: 0;
		right: 0;
		content: 'close';
		background-color: white;
	}
	
	#sitenav > ul {
		height: 100vh;
		width: 20rem;
		background-color: white;
		padding: 6rem 0.86rem;
		margin: 0 0 0 auto;
	}

	#sitenav li.featured:first-child {
		margin-bottom: 1rem;
		text-align: center;
	}

	#sitenav li.featured:last-child {
		margin-top: 1.5rem;
		text-align: center;
	}

	#sitenav > ul > li > a,
	#sitenav > ul > li > label {
		font-size: 1.15rem;
		padding-right: 0;
	}

	#sitenav > ul > li > label::after {
		content: 'expand_more';
		float: right;
		font-size: 2.3rem;
		margin-top: -0.4rem;
	}

	#sitenav > ul > li > input.menu-cb:checked ~ label::after {
		content: 'expand_less';
	}

	#sitenav > ul > li > input.menu-cb:checked ~ ul {
		display: block;
	}

	#sitenav > ul > li > ul {
		width: 13rem;
		margin-left: 0.5rem;
		margin-bottom: 1rem;
	}

}

#sitefooter {
	position: relative;
	overflow: hidden;
	background: rgb(42,60,104) url('/images/marr_bkgd_circles.svg') no-repeat right -230px bottom -250px;
	background-size: 480px 480px;
	color: white;
	padding: 2rem 3.7rem 3.7rem; /* 52px ÷ 14px */
}

#sitefooter a,
#sitefooter a:visited {
	color: white;
	font-weight: normal;
	text-decoration: none;
}

#sitefooter a:hover {
	text-decoration: underline;
}

#footernav {
	float: left;
}

#footernav a,
#footernav a:visited {
	font-weight: bold;
}

#footernav > ul {
	list-style: none;
	font-weight: bold;
	font-style: italic;
	padding: 0;
}

#footernav > ul > li {
	padding: 0;
	margin: 0 0 0.3em 0;
}

#footernav > ul > li.altsite {
	margin-top: 1.5em;
}

#footernav > ul > li.altsite a,
#footernav > ul > li.altsite a:visited {
	text-decoration: underline;
}

#contactinfo {
	float: right;
	max-width: 14.6rem;
}

#copyright {
	width: 100%;
	float: left;
	clear: both;
	color: rgb(178,196,229);
	font-size: 0.79rem; /* 11px ÷ 14px */
	padding-top: 1rem;
	border-top: 1px solid rgb(178,196,229);
	margin-top: 1.5rem;
}

#copyright a,
#copyright a:visited {
	color: rgb(178,196,229);
}

@media (min-width: 62rem) {

	#siteheader {
		padding-left: calc(50vw - 32rem);
		padding-right: calc(50vw - 32rem);
	}

}

@media (min-width: 50rem) {

	nav.adminlinks,
	#sitefooter {
		padding-left: calc(50vw - 24.3rem);
		padding-right: calc(50vw - 24.3rem);
	}

}

@media (min-width: 1024px) {

	main > section {
		padding-left: calc(50vw - 32.14rem);
		padding-right:  calc(50vw - 32.14rem);
	}

	section.afternav > article {
		max-width: 40.7rem;
		margin-right: 14.6rem;
		/* border: 1px dashed red; */
	}

}

@media (max-width: 768px) {

	main > header h1,
	main > header p.headline {
		font-size: 5.3vw;
	}
	
	main > header h1 + p,
	main > header p.headline + p {
		font-size: 3vw;
	}

}

@media (max-width: 640px) {

	main > section {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	section.withnav > article {
		margin-right: 0;
	}

	section.withnav > nav {
		display: none;
	}

	main > header {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	nav.adminlinks,
	main > header,
	#sitefooter,
	#siteheader {
		padding-left: 1.3rem;
		padding-right: 1.3rem;
	}

	#sitefooter {
		background: rgb(42,60,104) url('/images/marr_bkgd_circles.svg') no-repeat right -160px bottom -155px;
		background-size: 320px 320px;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	
	#copyright {
		padding-top: 0.5rem;
		margin-top: 9rem;
	}

}


/* jQuery UI */
/* Required to hide the initial container, otherwise it appears empty at a random point across the page */

#ui-datepicker-div { display: none; }

div.ui-datepicker {
	background-color: white;
	padding: 5px;
	box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
	margin-top: 5px;
}

a.ui-datepicker-prev {
	float: left;
	cursor: pointer;
}

a.ui-datepicker-prev > span.ui-icon-circle-triangle-w::before {
	content: '\276E';
	margin-right: 0.3em;
}

a.ui-datepicker-next {
	float: right;
	cursor: pointer;
}

a.ui-datepicker-next > span.ui-icon-circle-triangle-e::after {
	content: '\276F';
	margin-left: 0.3em;
}

div.ui-datepicker-title {
	font-weight: bold;
	text-align: center;
	width: 50%;
	margin: 0 25%;
}

table.ui-datepicker-calendar th {
	background-color: rgb(184,197,204);
	padding: 0.25em 0.5em;
	width: 14.3%;
	text-align: center;
}

table.ui-datepicker-calendar td {
	padding: 0em;
	width: 14.3%;
	text-align: right;
}

table.ui-datepicker-calendar tr:nth-child(odd) td {
	background-color: rgb(245,245,245);
}

table.ui-datepicker-calendar tr:nth-child(even) td {
	background-color: rgb(225,225,225);
}

table.ui-datepicker-calendar td > a {
	display: block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: black;
}

table.ui-datepicker-calendar td > a.ui-state-active {
	background-color: rgb(114,145,161);
}

table.ui-datepicker-calendar td > a:hover {
	color: white;
	background-color: rgb(114,145,161);
}

table.ui-datepicker-calendar td.ui-datepicker-unselectable {
	color: rgb(200,200,200);
	padding: 0.25em 0.5em;
	cursor: not-allowed;
}

input.datepicker {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAMAAAAR8Wy4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphN2JiZjg5OS0wZGIwLTRkZDQtOTFhMy1lN2M3MzkxNmE4ZTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkJFNkRDNkFGRUFCMTFFNTg4OUJDMTUxOEYxN0E4NkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkJFNkRDNjlGRUFCMTFFNTg4OUJDMTUxOEYxN0E4NkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphN2JiZjg5OS0wZGIwLTRkZDQtOTFhMy1lN2M3MzkxNmE4ZTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6YTdiYmY4OTktMGRiMC00ZGQ0LTkxYTMtZTdjNzM5MTZhOGU3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Jv8LsAAAACFQTFRF/89/ADWt/58A+/v75eXl09PTqqqqvr6+4+PjZmZm////ri6EaAAAADhJREFUeNpi4EIDDFyMjFxcnGDABWIzYKpgYmJAQkABDg5mJAQUYGNjRUJAAXZ2FiRENy1oACDAAOt0BjlSSq8iAAAAAElFTkSuQmCC');
	background-repeat: no-repeat;
	background-position: center right 3px;
	padding-right: 26px;
}
