/**************Site layout**************/
	* {
		box-sizing: border-box;
	}

	html { 
		height:100%; 
	}

	body
	{
		margin:0px;
		padding:0px;
		border:0px;
		overflow:auto;
		font-family:Arial, Helvetica, sans-serif;
		
		background-color:#F4F4F1;
	
		display:flex;
			flex-direction:column;
			height:100vh;
		position:relative;
		z-index:-1;
	}

	header {
		border-bottom:0px solid black;
		display:flex;
			justify-content:center;
		flex-grow:0;
		font-size:12px;
		position:relative;
		z-index:10;
	}
	
	header, footer {
		background-color: rgb(207,208,191);
	}
	
		header #header_container {
			display:flex;
				align-items:center;
				flex-direction:row;
				justify-content:center;
			width:100%;
			max-width:750px;
			
		}
	
		header #logo
		{
			flex-grow:0;
			padding-top:3px;
			padding-left:3px;
			text-align:center;
		}
	
			header #logo_img
			{

				/*max-width:145px;*/
				
				max-height:55px;
			}
			
			header #logo::after {
				clear:both;
				content:"";
			}
	
		header #loginbar {
			flex-grow:1;
			padding-right:10px;
			text-align:right;
			
			width:100%;
		}
		
			header #loginbar button,
			header #loginbar .abtn {
				padding:1px 5px;
			}
			
			header #loginbar #loginintro {
				color:#333333;		
			}
			
			header #loginbar #loginlogin {
				display:flex;
					align-items:flex-end;
					flex-direction:column;
					justify-content:flex-end;
				font-size:14px;
			}
			
				#loginbar #loginlogin .loginrow {
					display:flex;
						align-items:center;
						flex-direction:row;
				}
		
				#loginbar #loginlogin .value {
					margin-right:5px;
				}
			
					#loginbar #loginlogin .value button,
					#loginbar #loginlogin .value .abtn {
					
					}
			
					#loginbar #loginlogin .value input {
						width:125px;
					}

			header #loginbar #loginrem {
				color:#333333;
				display:flex;
					flex-direction:row;
				font-size:11px;
				margin-right:55px;
				margin-top:3px;
			}
		
		header #loginbar::after {
			clear:both;
			content:"";
			display:block;
		}
	
	#main 
	{
		display:flex;
			flex-direction:column;		
		flex-grow:1;
		flex-shrink:1;
		position:relative;
		z-index:-1;
	}

	footer
	{
		border-top:0px solid black;	
		flex-shrink:0;
	}
	
		#footer_container
		{
			text-align:center;
			font-size:13px;
			color:#333333;
			background-color:transparent;
			height:30px;
			margin-left:auto;
			margin-right:auto;
		}
	
			#footer_container span
			{
				display:inline-block;
				padding-top:5px;
			}
			
			#footer_container a {
				color:#333333;
			}

	#wrap {
		min-height:100%;
	}
	
		nav {
			background-color:#E9E9E2;
			display:flex;
				align-items:center;
				flex-wrap:wrap;
				justify-content:center;
			height:30px;			
			position:-webkit-sticky;
			position:sticky;
				top:0px;
			width:100%;
			z-index:350;
		}
		
			nav button,
			nav .abtn {
				margin-right:4px;
				min-width:75px;
				
				height:22px;
			}
			
				nav .abtn .menu_new {
					color:purple;
			
					border:0px solid purple;
					margin:0px;
					margin-right:2px;
					padding:0px;
			
					animation: blink-animation 2s steps(5, start) infinite;
					/*animation: glow 1.2s ease infinite;*/
					
					font-size:6px;
					align-self:center;
				}
		
					@keyframes blink-animation {
						to {
						  visibility: hidden;
						}
					}
			
		#back {
			background-color:#E9E9E2;
			display:flex;
				align-items:center;
				justify-content:center;
			height:30px;
			position:-webkit-sticky;
			position:sticky;
				top:29px;
			width:100%;
			z-index:350;
		}
	
			#buttonback {
				background-color:steelblue;
				border-radius: 0px 4px 4px 0px;
				height: 20px;
				margin-left:auto;
				margin-right:auto;
				position: relative;
				width:150px;
					max-width:200px;
			}

			#buttonback:before {
				border-style: solid;
				border-width: 10px 10px 10px 0;
				border-color: transparent steelblue transparent transparent;
				content: "";
				position: absolute;
					top: 0px;
					left: -9px;
			}
		
			#buttonback > a {
				color:white;
				display:flex;
					align-items:center;
					justify-content:center;
				font-size:12px;
				height:20px;
				text-align: center;
				text-decoration: none;
			}
			
				#buttonback > a:active {
					color:lightgrey;
				}

	.submenu {
		display:flex;
			flex-wrap:wrap;
			justify-content:center;
		margin-bottom:5px;
		margin-top:7px;
	}
		
		.submenu button,
		.submenu .abtn {
			margin-right:4px;
			min-width:80px;
			
			border-color:steelblue;
			color:darkblue !important;
		}
	
		.submenu .selected {
			background-color:#c9d7e8;
			color:darkblue !important;
			
		}
	
	@media screen and (max-width: 700px) {

		header {
		
		}
		
			header #header_container {
				flex-direction:column;
			}
		
			header #loginbar {
				padding-right:0px;
				padding:5px 0px;
				text-align:center;
			}
		
				header #loginbar button,
				header #loginbar .abtn {

				}
			
				header #loginintro {

				}
				
				header #loginbar #loginlogin {

				}
					
					#loginbar #loginlogin .loginrow {
						flex-direction:column;
						width:100%;
					}
		
					header #loginbar #loginlogin .value {
						margin:3px 0px;
						padding:0px 8px;
						width:100%;
					}
			
						header #loginbar #loginlogin .value button,
						header #loginbar #loginlogin .value .abtn {
							height:25px;
							width:90%;
						}
			
						header #loginbar #loginlogin .value input {
							width:100%;
						}
						
				header #loginbar #loginrem {
					flex-direction:row !important;
					justify-content:center;
					margin-right:0px;
				}
	
		nav {
			display:block;
			height:auto;
			padding:3px 10px;	
			position:relative;
		}
	
			nav button,
			nav .abtn {
				margin-bottom:3px;
				margin-right:0px;
				width:100%;
					min-width:0px;
			}
			
		#back {
			top:0px;
		}
			
		#back_mobile {
			display:flex;
			position:-webkit-sticky;
			position:sticky;
				top:0;

			z-index:1000;

		}
		
		#main {
			display:block;
		}

	}
	
/**********Responsive Web Design**********/
	.row {

	}

	.row::after {
		content:"";
		clear:both;
		display:block;
	}

	[class*="col-"] {
		float:left;
		padding:10px 15px;
	}

	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
		
	
	@media screen and (max-width: 700px) {
		
		[class*="col-"] {
			padding:5px 0px;
			width:100%;
		}
	
	}

/**********General Formatting/Page Layout**********/

	#anchorbar {
		display:none;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:center;
		font-size:12px;
		margin-bottom:5px;
		margin-top:15px;
		padding:3px 0px;
	}
	
		#anchorbar .anc {
			margin-left:3px;
			margin-bottom:5px;
				overflow-wrap:anywhere;
				word-break:break-word;
				word-wrap: break-word;
			white-space:nowrap;
		}

	#more {
		margin-bottom:10px;
		text-align:center;
	}
	
		#more button,
		#more .abtn {
			min-width:150px;
			padding:5px 0px;
		}
	
	#page_container
	{
		display:flex;
			flex-direction:column;
			height:calc(100% - 31px);  /*reduce by height of footer*/
		margin-left:auto;
		margin-right:auto;
		max-width:768px;
		min-width:675px;
		padding:0px;
		position:relative;
		z-index:-2;
	}

	#page_content
	{
		display:flex;
		flex-direction:column;
		margin-top:0px;
		margin-bottom:10px;
		
		flex-grow:1;
		flex-shrink:1;
		flex-basis:auto;
		
		position:relative;
		z-index:-1;

	}
	
		#message_affirm {
			color:green;
			font-size:13px;
			margin-left:auto;
			margin-right:auto;
			margin-top:15px;
			max-width:90%;
			text-align:center;
		}
		
		#message_alert {
			color:red;
			font-size:13px;
			margin-left:auto;
			margin-right:auto;
			margin-top:15px;
			max-width:90%;
			text-align:center;
		}
		
		#message_alertsub {
			font-size:12px;
		}

		/*modal css and html from https://iiiji.com/css-only-modal-lightbox-pop-up-on-page-load/*/
		/*above website is gone; utilized https://www.w3schools.com/howto/howto_css_modals.asp (How TO - CSS/JS Modal)*/
		.modal {
			z-index: -1;
			display: block;
			padding-top: 100px;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgb(0,0,0);
			background-color: rgba(0,0,0,0.5);
			
			opacity:0;
			
			/*transition:opacity 0.4s, z-index 0.6s;*/
			transition-property:opacity, z-index;
			transition-duration:0.4s;
			transition-timing-function:ease;
			transition-delay:0s;
		}
		
			.modalshow {
				z-index:10000 !important;
				opacity:1;
			}
		
		.modal-content {
			background-color: #fff;
			border-radius:8px;
			font-size:15px;
			margin: auto;
			max-width: 500px;
			outline: 0;
			padding: 0;
			position: relative;
		}
		
		.modal-inner { padding: 20px 30px; }
		
		.modal-close {
			background: #ccc;
			border-radius:0px 8px 0px 8px;
			cursor:pointer;
			padding: 6px 10px;
			position: absolute;
				right: 0;
				top: 0;
			user-select: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
			-webkit-touch-callout: none;
		}
		
		.modal-note {
			color:grey;
			font-size:13px;
			margin-left:10px;
		}
		
		/*.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}*/

		
		.msg_affirm, .msg_alert {
			font-size:13px;
			margin-left:auto;
			margin-right:auto;
			margin-bottom:0px;
			margin-top:0px;
			width:90%;
			text-align:center;
		}
		
			.msg_affirm { color:green; }
			.msg_alert { color:red; }
		
		.subtitle {
			display:flex;
				align-items:center;
			font-size:14px;
			font-weight:bold;
		}
	
			.subtitle_btns {
				display:inline-flex;
					flex-grow:2;
					justify-content:flex-end;
				font-size:10px;
				height:100%;
			}

			.subtitle_btn {
				font-weight:normal;
				margin:0px;
					margin-left:4px;
				padding:2px 6px;
	
				float:right;	
			}
		
			.subtitle_count { /*display a number next to subtitle*/
				color:grey;
				font-size:12px;
				margin-left:5px;
			}

	#page_header
	{
		margin-top:0px;
		margin-bottom:10px;
		z-index:-1;
	}
	
		#page_alert {
			background-color:red;
			border-radius:8px;
			box-shadow:3px 3px 3px grey;
			color:white;
			font-family:Copperplate, Papyrus, fantasy;
			font-size:16px;
			margin-left:auto;
			margin-right:auto;
			margin-top:5px;
			margin-bottom:15px;
			padding:5px;
			text-align:center;
				overflow-wrap:anywhere;
				word-break:break-word;
				word-wrap: break-word;
			white-space:pre-line;
			max-width:500px;
			min-width:0%;
		}
		
		#page_subtitle {
			color:grey;
			font-size:12px;
			margin-top:10px;
			text-align:center;
		}

		#page_title
		{
			font-size:22px;
			font-weight:bold;
			margin-top:10px;
			text-align:center;
		}
		
		#page_title_trail
		{
			font-size:22px;
			font-weight:bold;
			text-align:center;
		}
		
		#page_desc
		{
			border:0px dotted blue;
			color:grey;
			font-size:13px;
			margin-left:auto;
			margin-right:auto;
			margin-top:5px;
			margin-bottom:5px;
			text-align:center;
			width:80%;
		}

		#trail
		{
			font-size:12px;
			margin-left:0px;
			margin-bottom:10px;
		}
		
		.filter_row {
			display:flex;
				justify-content:flex-end;
				flex-direction:row;
			margin-bottom:10px;
		}
		
			.filter_row select {
				min-width:50px;
			}
		
	@media screen and (max-width: 700px) {	
		
		#anchorbar {
			display:flex;
		}
	
			#anchorbar .anc {
			
			}

		#more {
		
		}
		
			#more button,
			#more .abtn {
				min-width:100%;
			}
		
		#page_alert {
			width:100%;
				max-width:100%;
			/*width:60%;
				max-width:500px;*/
		}
		
		#page_container {
			/*max-width:100%;
			min-width:100%;		
			*/
			width:100%;
			max-width:none;
			min-width:0;
			padding:0px 10px;
		
			height:auto;
		}
		
		#page_content {
			flex-grow:0;
		}
		
		#page_desc
		{
			width:100%;
		}
		
		.modal-content {
			max-width: 90%;
		}
		
		.modal-inner { padding: 15px 15px; }
		
		.modal-note {margin-left:0px;}

	}
	
/**********General Formatting**********/
	a { text-decoration:none; }
	a:visited {color: royalblue; }
	a:link {color: royalblue; }
	a:active {color: royalblue; }
	a:hover {color: midnightblue; }

	button,
	.abtn
	{
		background-color:white;
		border:1px solid lightgrey;
		border-radius:4px;
		color:black !important;
		cursor:pointer;
		font-size:11px;
		
		font-family:Arial, Helvetica, sans-serif;
		font-weight:normal;
		padding:4px 8px;
		text-align:center !important;
		text-decoration:none;
		
		display:inline-flex;
			align-items:center;
			justify-content:center;
			
		z-index:1;  /*added 2022/9/20 - keeping buttons above anchors*/
	}

		button:active,
		.abtn:active
		{
			background-color:#5882FA;
			color:white !important;
			border-color:lightgrey;
		}
		
		button:disabled,
		.abtn:disabled {
			background-color:white;
			color:grey !important;
			cursor:not-allowed;
		}
		
	form
	{
		margin-bottom:0px;
		padding:0px;
		display:inline;
	}
	
	input { font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:3px; text-indent:1px;}
	
	select {
		font-size:12px;	
	}

	textarea { font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:3px; }

	.a_none {
		color:inherit;
		text-decoration:none;
	}

	.anchor {
		display:block !important;
		min-height:75px !important;
		margin-top:-75px !important;
		position:relative;
		visibility:hidden !important;
		width:0px;
		z-index:-10;
	}
	
	.anchor_bottom {
		min-height:5px !important;
		margin-top:0px !important;
		margin-bottom:-75px !important;
		visibility:hidden !important;
		width:0px;
		z-index:-10;
		
		border:1px solid blue !important;
	}
	
	.bold {font-weight:bold;}
	.italic {font-style:italic;}
	.normal {font-weight:normal;}
	
	/*Colors*/
	.cBlue {color:blue !important;}
	.cGrey {color:grey !important;}
	.cPurple {color:purple !important;}
	.cRed {color:red !important}
	.cDarkPurple {color:#5F04B4 !important;}
	.cMaroon {color:maroon !important;}
	.cAdmLock {color:crimson !important;}
	.cFlag {color:maroon !important;}
	.cRemove {color:purple !important;}
	.cReinstate {color:rebeccapurple !important;}
	
	.center {
		margin-left:auto;
		margin-right:auto;
		text-align:center !important;
	}
		
	.right {
		text-align:right !important;
	}
	
	/*font-sizes*/
	.font10 {font-size:10px;}
	.font12 {font-size:12px;}
	.font14 {font-size:14px;}

/**********Expanding textarea**********/
	/*https://alistapart.com/article/expanding-text-areas-made-elegant*/
	
	textarea, 
	pre {
	  margin: 0;
	  padding: 0;
	  outline: 0;
	  border: 0;
	}
	
	.expandingArea {
	  position: relative;
	  border: 1px solid lightgrey;
	  background-color: #fff;
	  
	  width:100%;
	}
	
	.expandingArea > textarea,
	.expandingArea > pre {
	  	padding: 5px;
	  	background-color: transparent;
	  	font-size:12px;
	  	font-family:Arial, Helvetica, sans-serif;
	  	
	  	/* Make the text soft-wrap */
		overflow-wrap:anywhere;
	  	white-space: pre-wrap;
		word-break:break-word;
	 	word-wrap: break-word;

	  
  	  	min-height:50px;
	}
	
	.expandingArea > textarea {
	  /* The border-box box model is used to allow
	   * padding whilst still keeping the overall width
	   * at exactly that of the containing element.
	   */
	  -webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
		  -ms-box-sizing: border-box;
			  box-sizing: border-box;
	  width: 100%;
	  /* This height is used when JS is disabled */
	  height: 100px;
	}
	
	.expandingArea.active > textarea {
	  /* Hide any scrollbars */
	  overflow:hidden;
	  position:absolute;
	  	top:0;
	  	left:0;
	  height: 100%;
	  /* Remove WebKit user-resize widget */
	  resize:none;
	}
	
	.expandingArea > pre {
	  display: none;
	}
	
	.expandingArea.active > pre {
	  display: block;
	  /* Hide the text; just using it for sizing */
	  visibility: hidden;
	}
	
/**********Tooltip (w3schools)**********/
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  	visibility: hidden;
  	min-width: 120px;
  	background-color: black;
  	color: #fff;
  	text-align: center;
  	border-radius: 6px;
  	padding: 5px 0;
  	
  	/*position the tooltip*/
  	position: absolute;
  	z-index: 1;
  	bottom: 100%;
  	left: 50%;
  	margin-left: -60px;
  
	/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  	opacity: 0;
  	transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  	visibility: visible;
  	opacity: 1;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

/**********Popup (w3schools)**********/
	.popup {
	  position: relative;
	  display: inline-block;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}
	
	.popup_quest {
		background-color:black;
		border:1px solid black;
		border-radius:12px;
		color:white;
		font-size:9px;
		margin-left:3px;
		padding:1px 1px;
	}

	/* The actual popup */
	.popup .popuptext {
	  visibility: hidden;
	  width: 180px;
	  background-color: #555;
	  color: #fff;
	  text-align: center;
	  border-radius: 6px;
	  padding: 8px 3px;
	  position: absolute;
	  z-index: 1000;
	  bottom: 125%;
	  left: 50%;
	  margin-left: -90px;
	  
	  font-size:12px;
	}
	
	/* Specify position on the screen - especially, for display on smaller screens*/
	.popup .pu_lt {
		margin-left:-45px;
	}
	
	.popup .pu_rt {
		margin-left:-135px;
	}

	/* Popup arrow */
	.popup .popuptext::after {
	  content: "";
	  position: absolute;
	  top: 100%;
	  left: 50%;
	  margin-left: -5px;
	  border-width: 5px;
	  border-style: solid;
	  border-color: #555 transparent transparent transparent;
	}
	
	.popup .pu_lt::after {
		left:25%;
	}
	
	.popup .pu_rt::after {
		left:75%;
	}

	/* Toggle this class - hide and show the popup */
	.popup .show {
	  visibility: visible;
	  -webkit-animation: fadeIn 1s;
	  animation: fadeIn 1s;
	}

	/* Add animation (fade in the popup) */
	@-webkit-keyframes fadeIn {
	  from {opacity: 0;} 
	  to {opacity: 1;}
	}

	@keyframes fadeIn {
	  from {opacity: 0;}
	  to {opacity:1 ;}
	}
	
	@media screen and (max-width: 700px) {	
		.popup .pu_lt {
			margin-left:0px;
		}
	
		.popup .pu_rt {
			margin-left:-180px;
		}

		.popup .pu_lt::after {
			border-style:none;
		}
	
		.popup .pu_rt::after {
			border-style:none;
		}
	
	
	}

	/* Example
	<div class="popup" onclick="myFunction('id')">Click me to toggle the popup!
	  <span class="popuptext" id="myPopup">A Simple Popup!</span>
	</div>
	*/

	
/**********Specific Formatting**********/
	/*login page*/
	.captcha {
	
	}
		.captcha a {
			display:inline-block;
			font-size:10px;
			text-align:left;
			vertical-align:top;
		}
		
		.captcha input {
			width:150px;
		}
	
		.captcha #captcha {
			border:1px solid black;
			height:50px;
			width:150px;
		}
		
		.captcha #captcha_code {
			display:block;
		}
	
	.login {

	}		
	
		.login .row {
			display:flex;
				align-items:center;
				flex-direction:row;
				justify-content:center;
			font-size:14px;
			margin-bottom:5px;
			width:100%;
		}

			.login .row label {
				padding-right:5px;
				text-align:right;
				width:50%;
			}

			.login .row .forgot {
				font-size:12px;
				margin-top:15px;
			}
			
			.login .remember {
				display:flex;
					align-items:center;
					flex-direction:row;
					justify-content:center;
				color:#333333;
				font-size:12px;
				margin-top:10px;
			}
			
				.login .remember label {
					margin-right:5px;
				}
		
			.login .row .value {
				width:50%;
			}
			
				.login .row button,
				.login .row .abtn {
					display:block;
					margin-left:auto;
					margin-right:auto;
					margin-top:15px;
					width:100px; 
				}
			
				.login .row .value input { 
					width:200px;
				}
	
		@media screen and (max-width: 700px) {
			.captcha {
	
			}
					
				.captcha input {
					width:100%;
				}


			.login {

			}		
	
				.login .row {
					flex-direction:column;
					margin-bottom:10px;
					padding:0px 10px;
				}

					.login .row label {
						margin-bottom:5px;
						text-align:left;
						width:100%;
					}

					.login .row .forgot {
						font-size:12px;
					}
			
					.login .remember {
						justify-content:center;
						margin-left:0%;
						margin-top:15px;
						width:100%;
					}
		
					.login .row .value {
						width:100%;
					}
			
						.login .row .value button,
						.login .row .value .abtn {

						}
			
						.login .row .value input { 
							width:100%;
						}
		}
		
	/*login bar in header*/