/* Main style sheet for the 2016 version of the Certified Softness website.  
	It was last updated 
	2016-05-31
	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%;
		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 
	{
		margin-bottom:0px;
		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;
		width: 31%;  
		float: left;
		text-align: left;
		color: black;
		font-size: 0.6em;
		font-weight: normal;
	}
	#BottomCenter
	{
		display: inline-block;
		text-align: center;
		color: black;
		font-size: 0.6em;
		font-weight: normal;
	}
	#BottomRight
	{
		display: inline-block;
		padding-right: 10px;
		width: 31%;  
		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 */
	}
	#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: 400px;
		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: 1.1em;  
		font-weight: normal; 
		color: black; 
		margin-left: 10px; 
		margin-top: 30px; 
		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: 20px; 
	}
	#main h1.PageTitle span
	{
		font-size: 1em;  
		font-weight: normal; 
	}
	#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; 
	}
	#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: 8px 10px 8px 10px; /* Top right bottom left. */
	}
	#main blockquote
	{
		text-align: left; 
		font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif; 
		font-size: 0.9em;  
		font-weight: normal; 
		color: black; 
		margin-top: 0; 
		margin-bottom: 0; 
	}
/*
	#main blockquote::before
	{
		content: "“" ;
	}
	#main blockquote::after
	{
		content: "”" ;
	}
*/
	#main li
	{
		text-align: left; 
		font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif; 
		font-size: 0.9em;  
		font-weight: normal; 
		color: black; 
		margin: 0px 5px 2px 0px; /* Top right bottom left. */
	}
	#main ul
	{
		margin-top: 5px;
	}
	#main div:target
	{
		background-color:rgb(255,255,220);
	}

	
/* 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. */
	 
	#intro a.intro, #training a.training, #measuring a.measuring, #contact a.contact
	{
		color: black; 
		text-decoration: none; 
		font-weight: bold;
	}
	#intro a:hover.intro, #training a:hover.training, #measuring a:hover.measuring, #contact a:hover.contact
	{
		color: black; 
		text-decoration: none; 
		font-weight: bold;
	}