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

.TextBox 
	{ 
	margin: 0em 0em 0em 20em;
	}

#LeftMenuBox
	{
	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.*/

	/*Keeping the LeftMenu in view, never wasting space while scrolling effectively is best done
	in Javascript.*/ 
	/*Method 1 Javascript nice*/
	position: fixed;
	z-index: 970; /*Determines what is on top of what*/
	/*Method 2 sticky position, not nice*/
	/*position: sticky;
	top: 0px;*/

	margin:0 2em 0 0; padding: 1.8em 0 1.4em 0; 

	width:15em;

	color: var(--foreground-text);
	background: var(--background-text);
	}

#LeftMenuBox ul
	{
	list-style: none;
  padding-left: 0;
	margin: 0.5em 0em -0.5em 0em;
 	}

#LeftMenuBox li 
	{
	/*display: block;*/
	border-top:1px solid; 
	border-top-color: #ccc;  /*LOOK*/
  margin-left: 0em;
	
  text-indent: 0em;
	color: var(--foreground-text);
	}


#LeftMenuBox li {padding: 0.5em 0em 0.5em 0em;}
#LeftMenuBox li:before {padding: 0 0.5em 0 0.5em;content: "\00bb";}
#LeftMenuBox li>ul>li:before {padding: 0 0.5em 0 1.5em;content: "\00bb";}

#LeftMenuBox li>ul>li>ul>li:before {padding: 0 0.5em 0 2.5em;content: "\00bb";}

#LeftMenuBox li:last-child{border-bottom:1px solid;border-bottom-color: #ccc;  /*LOOK*/}
#LeftMenuBox li>ul>li:last-child {border-bottom:0px solid;}
#LeftMenuBox li>ul>li>ul>li:last-child {border-bottom:0px solid;}




/*Overlay the base link styles because we want the LeftMenu to 
handle normal, visited and hover differently.*/
#LeftMenuBox a {color: var(--foreground-text);text-decoration: none;}
#LeftMenuBox a:visited {color: var(--foreground-text);text-decoration: none;}
#LeftMenuBox a:hover {color: var(--foreground-text-link);text-decoration: none;}


@media all and (max-width: 990px) /*When the width is not over 990px*/
	{
	#LeftMenuBox {display: none;} /*Don't display the left menu at all*/
	.TextBox {margin: 0em 0em 0em 0em;} /*The TextBox can now expand across all the PageBox*/
	#PageBox {margin: 0.5em 4em 0.5em 4em;}
	#PathBox {margin: 0 4em 0 4em;}
	}