<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/******************************************************************************
* TopMenu styles
*
* This file is referenced from topmenu.js and so
* does not need to be referenced from the html file
*/


/*This is used for disabling a links so as to make menus work with mobile
phones, where you want to open a submenu and choose from that*/
.disabled-link {pointer-events: none;}

/*
html
	{
	*Fifth I like to define the font stuff*
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	font-size:1em;
	letter-spacing: 0em;
	line-height: 1.5em;
	*I just happen to like this order of doing things*
	}
*/


#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 0em 0em 0em; /*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: 100%;
	}




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


/*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;}
#TopMenuBox a:visited {color: var(--main-foreground-visited);text-decoration: none;}
#TopMenuBox a:hover {color: var(--main-foreground-hover);text-decoration: none;}


/*Additions*/
#TopMenuBox input {color: var(--main-foreground);transition: color 0.5s;/*text-transform:uppercase;*/font-size: 1.1em;}
#TopMenuBox a b {color: var(--main-foreground);transition: color 0.5s;/*text-transform:uppercase;*/font-weight: bold;}


/*Sometimes a top menu element in the list is a button input, not a link*/
#TopMenuBox input
	{
	/*display: inline;*/
	padding: 0 0 0 0;
	border: 0px solid black;
	margin: 0 2em 0 2em;
	}




/***************************************
* Below are all the list styles to make
* the subordinate menues appear as
* necessary
*/


/*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&gt;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&gt;li&gt;a, ul&gt;li&gt;input
	{
	padding: 0.5em 2em 0.5em 2em; /**/

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




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


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


#TopMenuBox ul&gt;li&gt;ul&gt;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&gt;li&gt;ul&gt;li&gt;a, ul&gt;li&gt;ul&gt;li&gt;input
	{
	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&gt;li:hover &gt; ul,       /*When you hover over a list item that contains a sub-list then make it visible*/
#TopMenuBox ul&gt;li&gt;ul:hover,         /*When you hover over a visible sub-list keep it visible*/
#TopMenuBox ul&gt;li:focus-within &gt; 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-menus***********/


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

/**/
#TopMenuBox ul&gt;li&gt;ul&gt;li&gt;ul&gt;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&gt;li&gt;ul&gt;li&gt;ul&gt;li&gt;a, ul&gt;li&gt;ul&gt;li&gt;ul&gt;li&gt;input
	{
	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&gt;li&gt;ul&gt;li:hover &gt; ul,       /*When you hover over a list item that contains a sub-list then make it visible*/
#TopMenuBox ul&gt;li&gt;ul&gt;li&gt;ul:hover,         /*When you hover over a visible sub-list keep it visible*/
#TopMenuBox ul&gt;li&gt;ul&gt;li:focus-within &gt; 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
*/

/*
@media (min-resolution: 1dppx) and (max-width: 1024px),
       (min-resolution: 1.5dppx) and (max-width: 1536px),
       (min-resolution: 2dppx) and (max-width: 2048px),
       (min-resolution: 3dppx) and (max-width: 3072px),
       (min-resolution: 4dppx) and (max-width: 4096px),
	{
	/ * Things to think about adjusting
	font-size:16px;
	line-height: 1.5;
	padding:10px;
	border-width: 1px;
	background-image: url('icon.png');
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	svg { width: 100px; height: 100px; }
	text-shadow: 1px 1px 2px #000;
	* /

	#TopMenuBox
		{
		padding: 0em 0em 0em 0em;
		width: 100vw;
		font-size:1.4em;
		width: 100%; / *Cross the entire browser window 100% DON'Tsubtract 12em because of extra padding above* /
		/ *border: 4px solid cyan;* /
		}
	}
*/


/*@media all and (max-width: 512px)*/
/*This switches to the hamburger for the top menu when the screen becomes narrow*/
@media 	(min-resolution: 0.9dppx) and  (max-width: 682px),
		(min-resolution: 1.4dppx) and  (max-width: 1024px),
		(min-resolution: 1.9dppx) and  (max-width: 1365px),
		(min-resolution: 2.9dppx) and  (max-width: 2048px),
		(min-resolution: 3.9dppx) and  (max-width: 2730px)
	{

	.menutip
		{
		position: sticky;
		position: -webkit-sticky; /*Just for the Mac*/
		z-index: 990; /*Determines what is on top of what A position: is essential line for z-index to work!!*/
		top: 20px;
		float:right;
		margin:40px;
		cursor: pointer;
	 	display: block; /* Needed so it can contain absolutely-positioned children was inline-block!*/
	/*z-index: 0;/ *color: #3498db;*/
		}

	.menutip .menutiptext
		{
	/*position: absolute;*/

		visibility: hidden;
		color: var(--main-foreground);
		background: var(--main-background);
		text-align: left;
		padding: 14px 18px;
		border-radius: 12px;
		position: absolute;
		top: 20px;
		right: 20px;
		z-index: 999;      /* stack on top */
		opacity: 0;
		transition: opacity 0.3s;
		}

	.menutip:hover .menutiptext
		{
	/*position: absolute;*/
		visibility: visible;
		overflow: visible;
		opacity: 1;
		z-index: 999;  /* Ensures it sits on top */
		transition: opacity 1s;
		font-size:1.2em;
		font-style: normal;
		line-height: 1.2em;

		  /* Use a custom property for flipping */
		/*transform: translate(var(--menutip-shiftx),var(--menutip-shifty));*/
		}

	@media 	(min-resolution: 0.9dppx) {.menutip:hover .menutiptext {width: 256px;font-size:1.2em;}}
	@media 	(min-resolution: 1.4dppx) {.menutip:hover .menutiptext {width: 768px;font-size:1em;}}
	@media 	(min-resolution: 1.9dppx) {.menutip:hover .menutiptext {width: 768px;font-size:1em;}}
	@media 	(min-resolution: 2.9dppx) {.menutip:hover .menutiptext {width: 768px;font-size:1em;}}
	@media 	(min-resolution: 3.9dppx) {.menutip:hover .menutiptext {width: 768px;font-size:1em;}}

	p.clear {clear: both;display: none;}

	.clear-both 
		{
	 	clear: both;
	  	display: none; /*This prevents the problem of unexplained gaps appearing when with the burger 
						 menu you click a tooltip!*/
	  	}


	/* iPhone / touch support*/
/*.tooltip {pointer-events: auto;}*/
	/*.tooltip .tooltiptext {pointer-events: none;} / * prevent hover activation by phantom events for iphones*/
	/*But unfortunately does the same as soon as burger menu appears*/
		

	#TopMenuBox ul&gt;li {padding: 0.5em 0 0.5em 0.5em;width:calc(100% - 1em);}
	#TopMenuBox ul&gt;li&gt;a {padding: 0;}
	}
</pre></body></html>