/* Main style sheet for the 2016 version of the HPS website.  
	It was last updated 
	2019-04-01 Mon - Paragraphs inside of lists, but outside of list items, for articles only.
	2019-03-25 Mon - Simplify font-family property
	2020-09-25 Fri - Reduce the white space between the main content and the footer area, via min-height. 
	by C Ingalls
*/

/* The Body is set to always show the vertical scroll bar, but horizontal only when needed. */
	body
	{
		width: 100%; 
		text-align: center; 
		font-size: 100%;
		font-family: Verdana, Arial, "Lucida Sans Unicode", sans-serif; 
		background-color: white; 
		padding: 0;
		margin: 0;
		overflow-y: scroll; 
		overflow-x: auto; 
	}  

	#OuterWrapper	
	{
		display:inline-block; 
		max-width: 700px; 
		text-align: center; 
/*		font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif; */
		margin-bottom:30px;	/*This creates white space at the bottom of the page, below the footer.*/
	}

/* The Header Area contains the company Head Line and the Top Navigation menu. */
	#HeaderArea	
	{
		text-align: center; 
	}
	#HeaderArea	img
	{
		width: 58%;
		padding-top: 5px;
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	#HeaderArea	a:hover img
	{
		border: 1px solid #ccc;
	}
	#HeadLine 
	{
		font-size: 2em;
		margin-bottom:10px;
		text-align: center; 
	}

/* Footer Area contains the Bottom Navigation menu, the Updated paragraph, 
	the company name and postal address, plus some basic contact info.  
*/
	#FooterArea	
	{
		width: 100%;  
		background-color: white;
		float: left;
	}
	#BottomLeft
	{
		display: inline-block;
		padding-left: 10px;
		white-space: nowrap; 
		float: left;
		text-align: left;
		color: black;
		font-size: 0.6em;
		font-weight: normal;
	}
	#BottomCenter
	{
		display: inline-block;
		text-align: center;
		white-space: nowrap; 
		color: black;
		font-size: 0.6em;
		font-weight: normal;
		margin-left: auto;
		margin-right: auto;
	}
	#BottomRight
	{
		display: inline-block;
		padding-right: 10px;
		white-space: nowrap; 
		float: right;
		text-align: right;
		color: black;
		font-size: 0.6em;
		font-weight: normal;
	}
	#BottomRight a
	{
		color: black;
		text-decoration: none; 
	}
	#BottomRight a:hover
	{
		color: black;
		text-decoration: underline; 
	}


/* Navigation Menus */
	#TopNav ul
	{
		list-style-type: none; 
		margin: 0px; padding: 0px; 
	}
	#TopNav li
	{
		display:inline-block; width: 100px; 
		text-align: center; 
		text-transform: capitalize; /* Proper Case */
		min-height: 21px;
	}
	#TopNav a, a:visited
	{
		color: black; 
		text-decoration: none; 
		font-size: 1em;
		font-weight: normal;
	}
	#TopNav a:hover
	{
		color: black; 
		font-weight: bold;
		text-decoration: underline; 
	}

	#BotNav ul
	{
		list-style-type: none; 
		margin: 0px; 
		padding-top: 10px;
		padding-left: 20px;
		padding-right: 20px;
	}
	#BotNav li
	{
		display:inline; 
		text-align: center; 
		margin: 0px; 
		padding-left: 0; 
		padding-right: 0.4em; 
		border-right: 1px solid black;
		white-space: nowrap;
	}
	#BotNav li:last-child
	{
		padding-right: 0; 
		border-right: none;
	}
	#BotNav a, a:visited
	{
		color: black; 
		text-decoration: none; 
		font-size: 0.75em;
		font-weight: normal;
	}
	#BotNav a:hover
	{
		color: black; 
		font-weight: normal;
		text-decoration: underline; 
	}
	

/* Main content area, includes any H1 title that may appear in this area. */	
	#main 
	{
		display: block;
		width: 100%;
		min-height: 300px;
		background-color: white;
		text-align: left;
/*		font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif; */
	}
	#main h1
	{
		text-align: left; 
/*		font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif; */
		font-size: 1em;  
		font-weight: bold; 
		color: black; 
		margin-left: 10px; 
		margin-top: 10px; 
		margin-bottom: 0px; 
	}
/*
	#main h1:first-child
	{
		margin-top: 10px; 
	}
*/
	#main .PageTitle
	{
		text-align: center; 
/*		font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif; */
		font-size: 1.2em;  
		font-weight: bold; 
		color: black; 
		margin-left: 10px; 
		margin-top: 10px; 
		margin-bottom: 30px; 
	}
	#main h1 span
	{
		font-size: 1em;  
		font-weight: normal; 
	}
	#main h1 div
	{
		display: inline-block; 
		vertical-align: top; 
		text-align: center;
	}
	#main h2
	{
		text-align: left; 
/*		font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif; */
		font-size: 0.9em;  
		font-weight: bold; 
		color: black; 
		margin-left: 10px; 
		margin-top: 50px; 
		margin-bottom: 0px; 
	}
	#main h2:first-child
	{
		margin-top: 10px; 
	}
	#article #main h2
	{
		margin-top: 10px;	
	}
	#article #main ol p, #article #main ul p
	{
		margin-left: 0px;	
	}
	#main h1 a, h1 a:visited
	#main h1 a, h1 a:visited
	{
		color: black; 
		text-decoration: none; 
	}
	#main h1 a:hover
	{
		color: black; 
		text-decoration: underline; 
	}
	#main p
	{
		text-align: left; 
/*		font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif; */
		font-size: 0.9em;  
		font-weight: normal; 
		color: black; 
		margin: 10px 10px 20px 10px; /* Top right bottom left. */
	}
	#main li
	{
		text-align: left; 
/*		font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif; */
		font-size: 0.9em;  
		font-weight: normal; 
		color: black; 
		margin: 5px 5px 5px 0px; /* Top right bottom left. */
	}
	#main ul
	{
		margin-top: 5px;
	}
	#main a.more
	{
		text-decoration:none; 
	}
	#main a.more:hover
	{
		text-decoration:underline; 
	}
	#main .author
	{
		margin-left: 12px; 
		font-size: 0.7em;
	}
	#main .button
	{
		display: inline; 
		background-color: #7db461; 
		border-radius: 5px;
		color: white; 
		margin-left: 10px; 
		padding: 5px; 
		white-space: nowrap; 
	}
	#main .button a
	{
		text-decoration: none; 
		color: white; 
	}
	#main div:target, p:target, li:target
	{
		background-color:rgb(255,255,220);
	}
	
	#Webform div {max-width:600px; padding-right:10px; }
	#Webform textarea	{width:100%; }
	#Webform input.text {width:100%; }
	#Webform input.button {width:60px; padding:0; margin-left:calc(33% - 60px); margin-top:10px; }


	
/* This modifies (overrides) the appearance of the hyperlink in the top navigation menu 
	 when viewing the same page that the link goes to.  
	 It applies whenever the .Class of the hyperlink matches the #ID in the Body tag. 
	 Make sure this appears in this CSS file after all styles that affect those hyperlinks. */
	 
	#about a.about, #training a.training, #materials a.materials, #contact a.contact
	{
		color: black; 
		text-decoration: none; 
		font-weight: bold;
	}
	#about a:hover.about, #training a:hover.training, #materials a:hover.materials, #contact a:hover.contact
	{
		color: black; 
		text-decoration: none; 
		font-weight: bold;
	}