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


.disabled-link 
	{pointer-events: none;}


#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: 0em 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: var(--main-foreground);
	background: var(--main-background);
	width: calc(100% - 12em); /*Cross the entire browser window 100% subtract 12em because of extra padding above*/
	}




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

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




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


/*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: var(--main-foreground);
	background: var(--main-background);
	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;

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


  
#TopMenuBox ul>li>a 
	{
	padding: 0.5em 2em 0.5em 2em; /**/

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




/********The sub-menus***********/


#TopMenuBox ul>li>ul 
	{
  display: none; /*Removes element (html block) from the page*/
	}


#TopMenuBox ul>li>ul>li 
	{
  clear: both; /*This makes sure that two menu choices never end up on the same line see https://css-tricks.com/almanac/properties/c/clear/*/
	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*/

  width: 100%; /*Make sure each menu item expands to fill the width of the list*/

	padding: 1em 0em 1em 0em;

	/*Just to make sub-menus a slightly different color*/
  background: var(--background-sub-menu);
	}
  

#TopMenuBox ul>li>ul>li>a 
	{
	padding: 0.5em 2em 0.5em 2em; /**/

	color: var(--main-foreground);
	/*Just to make sub-menus a slightly different color*/
	background: var(--background-sub-menu);
	}


#TopMenuBox ul>li:hover > ul,       /*When you hover over a list item that contains a sub-list then make it visible*/
#TopMenuBox ul>li>ul:hover,         /*When you hover over a visible sub-list keep it visible*/
#TopMenuBox ul>li:focus-within > ul /*Allowes navigation through sub-menu with TAB key*/
	{
  display: block;  /*Displays below the current line*/
  position: absolute; /*the element is removed from the flow of the document*/
  left: 0;
	z-index: 991; /*Determines what is on top of what*/

  opacity: 0.85;

	padding: 0;
	margin: 1em 0 0 0;
  width: auto;
	}


/********The sub-sub-menu***********/


#TopMenuBox ul>li>ul>li>ul 
	{
  display: none; /*Removes element (html block) from the page*/
	}

/**/
#TopMenuBox ul>li>ul>li>ul>li 
	{
  clear: both; /*This makes sure that two menu choices never end up on the same line see https://css-tricks.com/almanac/properties/c/clear/*/
	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*/
  width: 100%;

	padding: 1em 0em 1em 0em;

	/*Just to make sub-menus a slightly different color*/
  background: var(--background-sub-sub-menu);
	}
  
#TopMenuBox ul>li>ul>li>ul>li>a 
	{
	padding: 0.5em 2em 0.5em 2em; /**/

	color: var(--main-foreground);
	/*Just to make sub-menus a slightly different color*/
	background: var(--background-sub-sub-menu);

	text-align: center;
	}


#TopMenuBox ul>li>ul>li:hover > ul,       /*When you hover over a list item that contains a sub-list then make it visible*/
#TopMenuBox ul>li>ul>li>ul:hover,         /*When you hover over a visible sub-list keep it visible*/
#TopMenuBox ul>li>ul>li:focus-within > ul /*Allowes navigation through sub-menu with TAB key*/
	{
  display: block;  /*Displays below the current line*/
  position: absolute; /*the element is removed from the flow of the document*/
  left: 100%;
	top: -1em;
	z-index: 992; /*Determines what is on top of what*/

  opacity: 1.0;

	padding: 0;
	margin: 1em 0 0 0;
  width: auto;
	}




/******************************************************************************
* Media Queries
*
* When the width of the browser changes significantly than changes of style 
* are overlaid to handle it.
*/


@media all and (max-width: 990px) /*When the width is not over 990px*/
	{


	#TopMenuBox
		{
		padding: 1em 2em 1em 2em;
		width: calc(100% - 4em); /*Cross the entire browser window 100% subtract 4em because of extra padding above*/
		}
	#TopMenuBox ul>li 
		{
		display: block;  /*Changing this from inline-block to block makes the menu a vertical column*/
		padding: 0.6em 0em 0.6em 0em;
		border: 0px solid purple;
		margin:0em; 
		}
	#TopMenuBox ul>li>ul>li 
		{
		clear: both; /*This makes sure that two menu choices never end up on the same line see https://css-tricks.com/almanac/properties/c/clear/*/
		display: block;  /*Changing this from inline-block to block makes the menu a vertical column*/
		position: relative; /*This element and it's sub-element’s positions are relative to the flow of the document*/

		width: 100%; /*Make sure each menu item expands to fill the width of the list*/

		padding: 0.6em 0em 0.6em 0em;
		border: 0px solid purple;
		margin:0em; 

		/*Just to make sub-menus a slightly different color*/
		background: var(--background-sub-menu);
		}
	#TopMenuBox ul>li:hover > ul,       /*When you hover over a list item that contains a sub-list then make it visible*/
	#TopMenuBox ul>liul:hover,         /*When you hover over a visible sub-list keep it visible*/
	#TopMenuBox ul>li:focus-within > ul /*Allowes navigation through sub-menu with TAB key*/
		{
		left: 2em;
		top: 1.5em;
		opacity: 1.0;
		}


	#TopMenuBox ul>li>ul>li>ul>li 
		{
		clear: both; /*This makes sure that two menu choices never end up on the same line see https://css-tricks.com/almanac/properties/c/clear/*/
		display: block;  /*Changing this from inline-block to block makes the menu a vertical column*/
		position: relative; /*This element and it's sub-element’s positions are relative to the flow of the document*/

		width: 100%;

		padding: 0.6em 0em 0.6em 0em;
		border: 0px solid purple;
		margin:0em; 

		/*Just to make sub-menus a slightly different color*/
		background: var(--background-sub-sub-menu);
		}
	#TopMenuBox ul>li>ul>li:hover > ul,       /*When you hover over a list item that contains a sub-list then make it visible*/
	#TopMenuBox ul>li>ul>li>ul:hover,         /*When you hover over a visible sub-list keep it visible*/
	#TopMenuBox ul>li>ul>li:focus-within > ul /*Allowes navigation through sub-menu with TAB key*/
		{
		left: 2em;
		top: 1.5em;
		opacity: 1.0;
		}

	} /*end media*/



/*
@media (min-resolution: 1.5dppx)  / *When the resolution increases Samsung A12 my phone* /
	{
	}

@media (min-resolution: 2dppx)  / *When the resolution increases* /
	{
	}

@media (min-resolution: 3dppx)  / *When the resolution increases Samsung A52S Chiara* /
	{
	}

@media (min-resolution: 4dppx)  / *When the resolution increases* /
	{
	}
*/