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

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	background-color: #FFFFFF;
}
.twoColHybRtHdr #container {
	width: 830px;
	max-width: 100%;
	background: #FFFFFF;
	border: 1px solid #000000;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.twoColHybRtHdr #header {
	height: 200px;
	width: 830px;
	max-width: 100%;
	border-top-width: 15px;
	border-top-style: solid;
	border-top-color: #1C6B8F;
	background-image: url(Images/headbanner.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}
.twoColHybRtHdr #header h1 {
	margin: 0;
	padding: 10px 0;
}

.twoColHybRtHdr #sidebar1 {
	width: 25%;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 15px;
	padding-left: 10px;
	border-left-width: 1px;
	border-left-color: #CCC;
	margin-top: 25px;
	text-align: left;
	margin-bottom: 30px;
	font-size: 12px;
	float: right;
	border-left-style: none;
	height: 100%;
}
.twoColHybRtHdr #sidebar1 h3, .twoColHybRtHdr #sidebar1 p {
	margin-left: 10px;
	margin-right: 10px;
}

.twoColHybRtHdr #mainContent {
	width: auto;
	margin-left: 10px;
	margin-top: 30px;
	text-align: left;
	font-size: 12px;
}
.twoColHybRtHdr #footer {
	padding: 0 10px;
	background-color: #19577c;
	color: #E1E31B;
	font-size: 85%;
	text-align: center;
}
.twoColHybRtHdr #footer p {
	margin: 0;
	padding: 10px 0;
}
.twoColHybRtHdr #footer a { color: #D4DB22; }

.fltrt { float: right; margin-left: 8px; }
.fltlft { float: left; margin-right: 8px; }
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px; }

/* Original styles by Mio Suzuki, last modified December 23, 2009 */

.divider {
	color: #FFF;
	height: 1px;
	width: 600px;
	max-width: 100%;
	background-color: #CFD825;
}

.gray_divider {
	height: 1px;
	width: 600px;
	max-width: 100%;
	background-color: #CCC;
}

.no_indent {
	margin-left: -30px;
	margin-right: 0px;
	list-style: square;
}

#maintable {
	width: 200px;
	padding: 10px;
	border: 1px solid #CCC;
}

#maintable_2 {
	width: 200px;
	padding: 10px;
	border: 1px solid #F90;
}

.row1 {
	width: 276px;
	height: 20px;
	background-color: #454545;
	color: #FFF;
	text-align: left;
	font-size: 10px;
}

.border_row {
	text-align: left;
	border-bottom: 1px solid #CCC;
}

.article {
	border-right: thin;
	border-right-color: #999;
}
.indented {
	padding-left: 30pt;
	padding-right: 0pt;
}

.readmore {
	font-style: italic;
	font-size: 10px;
	color: #F60;
}

.smallfont { font-size: 10px; }
.bigfont   { font-size: 16px; }
.boldtype  { font-weight: bold; }

.menubardiv {
	background-color: #1C6B8F;
	height: 35px;
}

.quotemark {
	font-size: 14px;
	font-family: "Times New Roman", Times, serif;
	color: #000;
}

.sideheader {
	text-align: left;
	color: #454545;
}

a {
	text-decoration: none;
	color: #30809E;
}
a:hover {
	border-bottom: 1px dotted #F60;
	color: #F60;
}

/* Top navigation */
#topnav {
	font-size: 90%;
	border-top: 1px solid #ffffff;
	text-align: left;
	word-spacing: 1px;
	padding: 10px 5px 5px 10px;
	background-color: #1C6B8F;
	color: #D4DB22;
	letter-spacing: 1px;
	text-decoration: none;
}

/* Hamburger toggle - hidden on desktop, surfaced in the mobile media query below */
.nav-toggle-label { display: none; }
#topnav a:link,
#topnav a:visited {
	color: #D4DB22;
	text-decoration: none;
	padding: 10px 5px 5px 10px;
	display: inline-block;
}
#topnav a:hover {
	color: #CCC;
	text-decoration: none;
	padding: 10px 5px 5px 10px;
}
#topnav a:active { color: #D4DB22; }

/* Legacy compatibility: tags retired in HTML5 still appear in inline copy */
font { font-family: inherit; }

/* Images authored at fixed widths should not overflow narrow viewports */
img {
	max-width: 100%;
	height: auto;
}

/* Authors used inline-attribute tables for layout; let those collapse on narrow screens */
table { max-width: 100%; }

/* =========================================================================
   Mobile usability layer
   Activates only below 768px so the 830px desktop layout is unchanged
   ========================================================================= */
@media (max-width: 767px) {
	body { font-size: 100%; }

	/* Flexbox lets us reorder so the sidebar (DOM-positioned before main)
	   appears AFTER main on phones, without touching desktop layout. */
	.twoColHybRtHdr #container {
		width: 100%;
		border: none;
		margin-top: 0;
		display: flex;
		flex-direction: column;
	}
	.twoColHybRtHdr #container > #header           { order: 1; }
	.twoColHybRtHdr #container > .nav-toggle       { order: 2; }
	.twoColHybRtHdr #container > .nav-toggle-label { order: 2; }
	.twoColHybRtHdr #container > #topnav           { order: 3; }
	.twoColHybRtHdr #container > #mainContent      { order: 4; }
	.twoColHybRtHdr #container > main              { order: 4; }
	.twoColHybRtHdr #container > figure            { order: 4; }
	.twoColHybRtHdr #container > #sidebar1         { order: 5; }
	.twoColHybRtHdr #container > .clearfloat       { order: 6; }
	.twoColHybRtHdr #container > #footer           { order: 7; }

	.twoColHybRtHdr #header {
		width: 100%;
		height: 0;
		padding-bottom: 24%; /* preserves the 830:200 banner ratio */
		background-size: cover;
		background-position: center;
	}

	/* Hamburger button - one line at top, taps to reveal the menu */
	.nav-toggle-label {
		display: block;
		background-color: #1C6B8F;
		color: #D4DB22;
		padding: 12px 16px;
		font-size: 16px;
		font-weight: bold;
		line-height: 22px;
		cursor: pointer;
		border-top: 1px solid #ffffff;
		user-select: none;
		text-align: left;
	}
	.nav-toggle-label::after {
		content: "\25BE"; /* ▾ */
		float: right;
		transition: transform 0.15s ease;
	}
	.nav-toggle:checked ~ .nav-toggle-label::after {
		transform: rotate(180deg);
	}
	.nav-toggle-icon {
		display: inline-block;
		margin-right: 8px;
		font-size: 20px;
		vertical-align: -2px;
	}

	/* Hide the nav by default on mobile; show only when the checkbox flips */
	#topnav {
		display: none;
		padding: 4px 4px 8px;
		text-align: left;
		line-height: 1.2;
		border-top: 1px solid rgba(255,255,255,0.25);
	}
	.nav-toggle:checked ~ #topnav { display: block; }

	#topnav a,
	#topnav a:link,
	#topnav a:visited,
	#topnav a:hover {
		display: block;
		padding: 12px 16px;
		margin: 0;
		font-size: 16px;
		min-height: 44px;
		line-height: 22px;
		border-top: 1px solid rgba(255,255,255,0.15);
	}

	/* Sidebar stacks below main content */
	.twoColHybRtHdr #sidebar1 {
		float: none;
		width: auto;
		padding: 16px 12px 12px;
		margin: 0;
		font-size: 14px;
		border-top: 2px solid #CCC;
	}

	.twoColHybRtHdr #mainContent {
		margin: 16px 12px;
		font-size: 15px;
		line-height: 1.45;
	}

	/* Sidebar tables: stop forcing 200px, let them fill the column */
	#maintable,
	#maintable_2 {
		width: 100%;
	}

	/* Layout tables in body copy: stack cells to a single column */
	#mainContent table,
	#sidebar1 table {
		width: 100% !important;
		height: auto !important;
	}
	#mainContent table td,
	#mainContent table th,
	#sidebar1 table td,
	#sidebar1 table th {
		display: block;
		width: 100% !important;
		height: auto !important;
		padding: 6px 0;
	}
	#mainContent table img,
	#sidebar1 table img {
		display: block;
		margin: 0 auto;
	}

	/* Indented bullet block was padded with 30pt - reclaim that space */
	.indented { padding-left: 18px; }

	/* Pre-2020 inline alignment attributes float images off the page edge */
	[align="right"], [align="left"] { float: none; display: block; margin: 0 auto; }

	/* Footer spacing */
	.twoColHybRtHdr #footer p { padding: 14px 6px; font-size: 12px; }

	.divider, .gray_divider { width: 100%; }
}

/* Slightly tighter on very small phones */
@media (max-width: 380px) {
	.nav-toggle-label { padding: 12px 12px; }
	#topnav a,
	#topnav a:link,
	#topnav a:visited { padding: 12px 12px; font-size: 15px; }
}