/* 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. 
	2021-03-24 Wed - Changed all class and id names to lower case, and inserted dashes when appropriate.  
	2022-02-03 Thu - Increased the height of the bottom navigation elements (#bot-nav li) from 15px to 24px, 
						to address the "clickable elements too close together" problem.  Also, changed those elements 
						from display:inline to display:inline-block.

	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; 
	}  

	#outer-wrapper	
	{
		display:inline-block; 
		max-width: 700px; 
		text-align: center; 
		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. */
	#header-area	
	{
		text-align: center; 
	}
	#header-area	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;
	}
	#header-area	a:hover img
	{
		border: 1px solid #ccc;
	}
	#head-line 
	{
		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.  
*/
	#footer-area	
	{
		width: 100%;  
		background-color: white;
		float: left;
	}
	#bottom-left
	{
		display: inline-block;
		padding-left: 10px;
		white-space: nowrap; 
		float: left;
		text-align: left;
		color: black;
		font-size: 0.6em;
		font-weight: normal;
	}
	#bottom-center
	{
		display: inline-block;
		text-align: center;
		white-space: nowrap; 
		color: black;
		font-size: 0.6em;
		font-weight: normal;
		margin-left: auto;
		margin-right: auto;
	}
	#bottom-right
	{
		display: inline-block;
		padding-right: 10px;
		white-space: nowrap; 
		float: right;
		text-align: right;
		color: black;
		font-size: 0.6em;
		font-weight: normal;
	}
	#bottom-right a
	{
		color: black;
		text-decoration: none; 
	}
	#bottom-right a:hover
	{
		color: black;
		text-decoration: underline; 
	}


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

	#bot-nav ul
	{
		list-style-type: none; 
		margin: 0px; 
		padding-top: 10px;
		padding-left: 20px;
		padding-right: 20px;
	}
	#bot-nav li
	{
		display:inline-block; 
		text-align: center; 
		margin: 0px; 
		height: 24px;
		padding-left: 0; 
		padding-right: 0.4em; 
		border-right: 1px solid black;
		white-space: nowrap;
	}
	#bot-nav li:last-child
	{
		padding-right: 0; 
		border-right: none;
	}
	#bot-nav a, a:visited
	{
		color: black; 
		text-decoration: none; 
		font-size: 0.75em;
		font-weight: normal;
	}
	#bot-nav 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 .page-title
	{
		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; }

	
/* The code below 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;
	}