/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Specific layout related CSS definitions (body, header, content, footer).
 *
 * Most of these main layout sections have an ID to better facilitate dropping 
 * in an adopters specific header/banner/content/footer definitions.  These 
 * definitions also align with the recommended/standard HTML 5 type layouts.
 *
 * z-index: only works for non opaque, positioned, or floated elements.  z-index
 * also is context based so it is relative to the main container with the main
 * container being subject to peer z-index settings.
 * See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ O V E R A L L   L A Y O U T */
html 
{
	margin: 			0 auto;   /* center */
	border:				0;        /* IE defaults to 1px - so turn this off */

	/* Do footer color and image here so short pages will fill browser window */
	background:			#003366 url("../image/footer-background.png") no-repeat bottom right fixed;
/*
	background: 		rgba(112, 160, 208, 0.35) none; light blue
rgba(255, 122, 0, 0.78) none;   orange
background: rgba(173, 11, 11, 0.78) none; lighter red
background: #8A0A0A none;  dark red
*/
	position: 			relative; /* Fix for absolute positioning and for z-index */
	z-index:			1;        /* Need to be explicit for for IE 7 */
}

body
{
	position: 			relative;	/* z-index only works if position is set. */
	z-index: 			0;			/* set to low value so menus etc go over top */
	width: 				100%;
	height: 			100%;
	margin: 			0;
	padding:			0;	/* can't set for NN 4.x tables and assoc elements - messes things up */
	font-size:			100%;	
	/* Font Size Info.  100% = 1em = 16px = 12pt.  Use % as base then em after to 
		get consist results.  If em is the base font size then when the user sets
		their browser to smaller/larger font the page will not scale as well as 
		when % is used as the base font.  Could also simply do % for all font
		sizes but web designers like em's better than simple % for some reason.
		Note that em and % are very similar.  Both are % based on parent container
		definition or css def.  "rem" is a new % type operator that is based on
		the "root" element (in this case html) and does not inherit the container's
		css font-size definition.  Problem is that not all browsers support rem.
		em's are better/more properly supported vs %.  With handhelds browsers 
		resize so absolute px sizing works well.  Only issue is sometimes doing
		printed output.  PTs are problematic everywhere except print.
	*/
}

#page
{
/* These values can be used when width is specified as a % 
	width:				755px;
	min-width:			800px;
	max-width:			800px;
*/
	margin: 			auto;	/* centers block on page - whole point of this container */
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ H E A D E R */
#banner
{
	-moz-box-shadow: 	0 8px 6px -6px #888;
	-webkit-box-shadow: 0 8px 6px -6px #888;
	box-shadow:			0 8px 6px -6px #888;
}

#banner .StateBanner 
{
	margin: 			0 auto; 
	padding: 			5px 0 2px 0; 
	background-color:	#ccc;
}
#banner .StateBanner a
{
	padding: 			0px 3px 0 3px; 
	text-decoration:	none;
}

#banner .DOHBanner 
{
	border-bottom: 		0px solid #333; 
	margin: 			0 auto; 
	display:			block;

	padding:			0;
	background-color: 	#003366;  /* orange: FFA402 #F68428 FF8330, purple: 7C5D8D */
	height: 			6px;
	overflow: 			hidden;

	-webkit-transition: height 0.8s ease;
	   -moz-transition: height 0.8s ease;
	     -o-transition: height 0.8s ease;
	    -ms-transition: height 0.8s ease;
	        transition: height 0.8s ease;
}
#banner .DOHBanner:hover
{
	height: 			44px;
}

#banner .DOHBanner .ContentWidthContainer
{
	position: 			relative;
	margin: 			0 auto;
}
#banner .DOHBanner > a
{
	background: 		transparent url("../image/doh_horz.png") no-repeat 0 0;
	position: 			absolute;
	right: 				0px;
	width: 				175px;
	height: 			50px;
	z-index: 			100;
}

#banner .DOHBanner ul
{
	float: 				left;
	list-style:			none;
	padding-top:		15px;
	margin:				0; 
	text-align:			left; 
}
#banner .DOHBanner ul li 
{
	display:			inline;
	padding:			0 15px 0 15px; 
	border-left: 		1px solid #bbb;
}
#banner .DOHBanner > ul > li:first-child
{
	border-left: 		none;
}

#banner .DOHBanner ul li a,
#banner .DOHBanner ul li a:visited
{
	color:				white;
	font-size:			15px; 
	text-decoration:	none; 
}
#banner .DOHBanner ul li a:hover 
{
	background-color:	transparent;
	text-decoration: 	underline;
}


#header 
{
	height:				170px;

	position:			relative;	/* so that the pf and menu will be relative */
	padding-top:		0.75em;

	background-color:	white;
	background: 		-ms-linear-gradient(left, white 12%, #A0CEF5 100%);
	background: 		-moz-linear-gradient(left, white 12%, #A0CEF5 100%);  /* Mozilla Firefox */
	background: 		-o-linear-gradient(left, white 12%, #A0CEF5 100%);    /* Opera */ 
	background: 		-webkit-linear-gradient(left, white 12%, #A0CEF5 100%);
	background: 		-webkit-gradient(linear, left top, right top, color-stop(.12, white), color-stop(1, #A0CEF5)); /* Webkit (Safari/Chrome 10) */
	background: 		linear-gradient(to right, white 12%, #A0CEF5 100%);

	z-index:			1;
	/* Need to be explicit with z-index for for IE 7.  Needs to be put here  
		because this is the menu's first container with position specified.  
	*/
}
#header a img 
{ 
	display: 			block;
	object-fit: 		cover;
}
#header .TitleContainer
{
	/* vertical centering trick: http://www.w3.org/Style/Examples/007/center.en.html */
	position: 			absolute;
	margin: 			0;
	top: 				calc(50% - 16px);   /* 16px is 1/2 the site nav height */
	transform: 			translate(0, -50%);
    -ms-transform:		translate(0, -50%); /* IE 9 */
    -webkit-transform:	translate(0, -50%); /* Chrome, Safari, Opera */

}

#header .TitleContainer .Title
{
	border-bottom: 		1px dotted #777;
	padding-top:		0.1em;
	color:				#003366;
	font-family:		tahoma, geneva, verdana, arial, helvetica, sans-serif;
	font-size:			2em;
	margin-bottom: 		0;
/*

	font-style:			italic;
	letter-spacing:		2px;
	text-shadow: 		2px 0 0 #114477;
	text-shadow: 		1px 1px 1px #99ccee;
	text-shadow: 		1px 1px 1px #555;
	text-shadow:
		-1px -1px 0 #888,
		1px -1px 0 #888,
		-1px 1px 0 #888,
		1px 1px 0 #888;  
*/
}
#header .TitleContainer .Title *
{
	color:				inherit;
	line-height:		0.8em;
	text-shadow:		none;
	font-size:			0.7em;
	font-family:		serif;
	font-style: 		italic;
	padding:			0 0 0.25em 0;
}


#navigationPath
{
	display: 			inline-block;
	font-size:			0.85em;
	color:				#777777;
}
#navigationPath li a
{
	text-decoration:	underline;
}

#navigationPath ul
{
	display: 			inline-block;
	margin: 			0;
	padding: 			0;
	list-style: 		none;
}
#navigationPath li
{
	display: 			inline-block;
	margin-left: 		0.25em;
}
#navigationPath li:not(:first-child):before 
{
	content: 			"\0BB";
	padding-right: 		0.5em;
}


#siteNavigation
{
	position:			relative;  /* enable relative sub container abs position and full width */
	clear:				right;
	-moz-box-shadow: 	0 3px 5px -0px #888;
	-webkit-box-shadow: 0 3px 5px -0px #888;
	box-shadow:			0 3px 5px -0px #888;
}


#siteSearch
{
	position: 			absolute;
	right: 				2px;
	top: 				-55px;
}
#siteSearch label
{
	position: 			absolute;
	left: 				-3000px;
	top: 				-3000px;
}
#siteSearchInput
{
	width: 				16em;
	font-size: 			1.5em;
	margin-right:		3px;
	padding-left:		3px; 
}
#siteSearchSubmitButton
{
	position: 			relative;
	top: 				8px;
	height: 			35px;
	border:				none;
	padding: 			0px 1px 3px 3px;
	margin: 			0;
	background-image:	url('../image/icon/search_circle-blue.png');
	background-size:	contain;
	vertical-align: 	baseline;
}


#userMenu
{
	position: 			absolute;
	right:				2px;
	top: 				4px;
}
#userMenu:hover
{
	background-color:	#003366;
}
#userMenu > input
{
	display:			none;
}
#userMenu:hover > input.Control + label
{
	font-weight:		normal;
}

#userMenu.Popup .Container
{
	max-width:			none;
	max-height: 		none;
}

:not(#userMenu.Click):hover  .Container,
:not(#userMenu.Click):active .Container,
:not(#userMenu.Click):focus  .Container
{
	top:				25px;
	left:				-220px;
}

#userMenu > input + label
{
	padding: 			3px 5px 3px 35px;
	background: 		#225588 url('../image/icon/32/user-white.png') left 2px top -1px no-repeat;
}
#userMenu.Secure > input + label
{
	background-image:		url('../image/icon/32/user-secure.png');
	background-position:	3px 2px;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ C O N T E N T */
#content					/* needed for table but messes error jsp's div element */
{
	position: 			relative;	/* z-index only works if position is set. */
	background-color:	white;
	z-index: 			0;			/* set to low value so menus etc go over top */
	padding:			10px 10px 5px 0px;
}

#content #contextNavigation
{
	display:			inline-block;
	position:			relative;	/* needed for menu to be able get local relative position info */
    width:				180px;		/*to position the content area to the right of the navigation*/
	vertical-align: 	top;

	border:				1px solid #336699;
	border-left:		none;

	-moz-border-radius:	0px 5px 5px 0px;  
	-webkit-border-radius: 0px 5px 5px 0px;  
	border-radius:		0px 5px 5px 0px;

	box-shadow: 		6px 6px 6px -6px #464135;/* 8c8270;*/
}
#content #contextNavigation #contextNavigationMenuControl
{
	display: 			none;
}


#content .Sections
{
	display:			inline-block;
	padding:			0px 0px 8px 1em;
    color:				black;
	width:				calc(99% - 180px);
/* this effects the H type elements.  Makes font look larger...
	line-height: 		1.3em;
	width: 700px;
*/
}
#content .Sections > h2:first-of-type,
#content .Sections > div:first-of-type h2,
#content .Sections h2 + ul
{
	margin-top:			0;
}

#content .Sections .Header
{
	padding-top:		0.2em;
	margin-bottom:		0.3em;
	border:				none;
}


/* 
	Controls the extra wide tables to fit within the content - auto adds scroll 
	bar.  Note the table width can NOT be 100% or inherit as this will cause the
	horz scroll bar to be auto added IF the table above/below is wider.
*/
#content .Sections .ScrollableContainer 
{
	width:				100%;
	overflow:			auto;
}
#content .Sections .ScrollableContainer table
{
	width: 				99.5%;
}

#content .TwitterContainer
{
	float:				right; 
	width: 				20em;
	margin: 			0 1em 1.5em 1.5em; 
	border: 			2px solid #999;
	border-radius:		4px;
	text-align: 		center;

	-webkit-box-shadow: 8px 9px 26px -2px rgba(0,0,0,0.77);
	-moz-box-shadow: 	8px 9px 26px -2px rgba(0,0,0,0.77);
	box-shadow: 		8px 9px 26px -2px rgba(0,0,0,0.77);
}


/* Bottom content's org unit footer container */
#content .Sections .Footer
{
	margin:				0.7em 0 0 0;
	border-top:			2px solid #aaaaaa;
	padding:			2px 0 0 0;
	font-weight:		bold;
	color:				#336699;
	text-align:			center;
	clear:				both;
}


#content .DataDate
{
	font-weight:		bold;
	font-style:			italic;
	color:				#336699;
	text-align:			center;
	margin-bottom:		-4px;
}


#content .Aside
{
	display:			inline-block;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ F O O T E R */
#footer
{
	/* Do footer color and image in the HTML definition so short pages will fill browser window */
	background-color:	transparent;

	padding:			6px 0px 5px 1em;
	min-height: 		375px;
	height:				auto;
	border-top: 		5px solid #336699;
	color:				#bbbbbb;
	text-align:			left;
	font-size: 			1.2em;
	clear:				both;
}

#footer h3
{
	font-family: 		"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 		300;
	color: 				#eee;
	border-bottom: 		2px solid #ccc;
	padding:			6px 0px 5px 0px;
}

#footer li
{
	color: 				#aaa;
	padding-top:		0.75em;
}

#footer a
{
	background-color:	transparent;
	/* have to have margins different due to cr/lf line white space */
	margin:				0 8px 0 6px; 
	font-family: 		inherit;
	font-size: 			1em;
	font-weight:		normal;
	color:				#ddd;
	text-decoration:	none;
}
#footer a:hover, 
#footer a:active, 
#footer a:focus
{ 
	font-weight:		normal;
	color: 				#eee;
	text-decoration:	underline;
}

/* Definitions needed for the javascript based footer */
#footer .JavascriptFooterWrapper table
{
	width:				650px;
}
#footer .JavascriptFooterWrapper table table
{
	width:				auto;
}

#footer .JavascriptFooterWrapper *
{
	color:				white;
}

#footer .SocialMedia
{
	border-bottom: 		none;
}
#footer .SocialMedia a
{
	margin: 			0;
}

#footer .Section
{
	background: 		transparent;
	padding-left: 		1em;
	padding-right:		1em;
	float: 				left;
}

#footer .Bottom
{
	clear:				both;
	padding:			0.5em 0 0 1em;
}
#footer .Bottom img
{
	margin:				0.25em 1em 0 0;
	padding: 			5px 1em 5px 5px;
	background-color: 	white;
	border: 			4px solid #aaa;
}
#footer .Bottom div
{
	width: 				60%; 
	width: 				calc(95% - 200px); 
	max-width: 			80em;
	min-width: 			20em;

	display: 			inline-block;
	vertical-align: 	top;
	font-size:			0.9em;
	color: 				#ddd;
}
#footer .Bottom .LastModified
{	
	display: 			block;
	text-align: 		center;
	border-top: 		1px solid #ddd;
	margin-left: 		0;
	font-size: 			small;
	width: 				100%;
}

#copyrightNotice
{
	color:				#bbbbbb;
}
#printPageFooter 		{display: none;}

/*============================ End of Style Sheet ============================*/