/******************************************************************************
* Here are the top level styles that 
* cover everything we do.
*
*
*/


/*
Here using the universal selector * we define every html block as having this 
style by default, unless something else later in this file overrides it.
Defining a sort of base style means we know where we are and don't get lumbered
with the browser's default styles.    
*/

*
	{
	display: block;
	position: static;
	padding: 0;
	border: 0px solid green;
	border-radius: 0px;
	margin: 0;
	}

head {display: none;}


body
	{
	/*margin: 4em 4em 4em 4em; LOOK removed this*/
	color: #888;	
	background: #fff;
	font-family: sans-serif;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	font-size:1em;
	letter-spacing: 0em;
	line-height: 1.5em;
	}




/***************************************
* Below are all the heading styles
*/


h1, h2, h3, h4, h5, h6 
	{font-weight: bold; color: #388;line-height:normal; font-weight:normal;}

h1 {margin:1em 0 0.5em 0; font-size:2em;text-transform: uppercase;letter-spacing: 0.1em;}
h2 {margin:1em 0 0.5em 0; font-size:1.8em;letter-spacing: 0.1em;}
h3 {margin:1em 0 0.5em 0; font-size:1.6em;}
h4 {margin:1em 0 0.5em 0; font-size:1.4em;}
h5 {margin:1em 0 0.5em 0; font-size:1.2em;}
h6 {margin:0 0 12px 0; font-size:1em;}


p {margin: 0.5em 0 0.5em 0;}




/***************************************
* Inline text styles
*/


i {display: inline; font-style: italic; color:inherit; background: inherit;}

b {display: inline; font-weight: bold; color:inherit; background: inherit;}

u {display: inline; text-decoration: underline; color:inherit; background: inherit;}




/***************************************
* HTML link styles
*/
	

a
	{
	display: inline;
	color: #08f;
	text-decoration: none;
	}


a:visited
	{
	color: #00f;
	text-decoration: underline;
	}


a:hover
	{
	color: #0f0;
	text-decoration: underline;
	}




/***************************************
* Below are all the list styles
*/


ul
	{
	margin: 0.5em 0 0.5em 4em;
	list-style-type: disc;
	}


ol
	{
	margin: 0.5em 0 0.5em 4em;
	list-style-type: arabic-numbers;
	}


li {display: list-item;}




/***************************************
* Below are all the image styles
*/


p img
	{
	float: left;
	padding: 0;
	border: 0px solid black;
	margin: 1em 1.5em 0.5em 0;
	width: 200px;
	}




/******************************************************************************
* Header, Page, Text and Footer Box <div>
*
* These are styles for the divisions we have chosen to create.
*/


#HeaderBox
	{ 
	padding: 1.2em 1.2em 1.2em 2.4em;

	color: #fff;
	background: #345;
	background-image: url("images/banner2.jpg");  
	background-repeat:no-repeat; background-position: center;

	font-family: sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 3em; 
	font-stretch: 100%;
	letter-spacing: 0.3em;
	line-height: 1em;
	}


#PageBox
	{
  display: block;
	position: relative;
	z-index: 970;
	margin: 4em 8em 8em 8em;
	}




/******************************************************************************
* TopMenu styles LOOK
*
* The list and link styles are handled differently in the TopMenu so they are
* overlaid below.
*/


#TopMenuBox
	{ 
	/*grid-area: menu; */
	/*Method 1 Javascript
	position: fixed;
	*/
	/*Method 2 sticky*/
	position: sticky;
   position: -webkit-sticky; /*Just for the Mac*/
	top: 0px;
	z-index: 990; /*Determines what is on top of what A position: is essential line for z-index to work!!*/
	
	padding: 0 6em 0 6em; /*The body margins are 8em
	but there is also the padding of each link of 2em to consider, to get the HOME item
	to line up with the body text*/

	color: #fff;
	background: #345;
	width: calc(100% - 12em); /*Cross the entire browser window 100% subtract 12em because of extra padding above*/
	}


/*Overlay the base link styles because we want the TopMenu to 
handle normal, visited and hover differently.*/
#TopMenuBox a {color: #fff;transition: color 0.5s;font-weight: bold;text-transform:uppercase;}
#TopMenuBox a:visited {color: #ddd;text-decoration: none;}
#TopMenuBox a:hover {color: #0f0;text-decoration: none;}




/*Overlay the base list styles because we want the TopMenu to 
handle them differently.*/


#TopMenuBox ul 
	{
	margin: 0; /*To override the normal ul style which has a margin*/

	width: 100%;
	height: auto;

	color: #fff;
	background: #345;
  list-style: none;
	}

#TopMenuBox ul>li 
	{
	display: inline-block;  /*inline makes this type of element wrap like text but block
	makes sure that it isn't only about wrapping the text in the element but the whole li block.*/
	position: relative; /*This element and it's sub-element’s positions are relative to the flow of the document*/

	padding: 1em 0em 1em 0em;

  background: #345;
	}


  
#TopMenuBox ul>li>a 
	{
	padding: 1em 2em 1em 2em;

	color: #fff;
	background: #345;
	}