/*
 * CSS for narrow mobile screen; 999px or less.
 */

/*
 * FIXME: at some point it would be nice to use nested CSS to clean this up. All of the rules here
 *   need to be prefixed with "#navigationMainMenu nav" so that they don't clash with the sitemap 
 *   pages which use the same HTML include fragment.
 * 
 * FIXME: This whole content should be wrapped inside @media. There's a 'media' attribute on
 *   the <link> that controls which CSS file is loaded, but this doesn't account for when a
 *   browser page is resized, so begins in one @media state but switches to another without
 *   reloading the page.
 *
 * FIXME: The CSS spec has recently introduced something called env(), which acts like var()
 *   but for environment data, like screen size, rather than property value. Use this instead
 *   of hardcoding 999px and 1000px everywhere.
 */

/* ---------------------------------------------------------------------------- 
 * Margin, padding, whitespace...
 * ---------------------------------------------------------------------------- */

.container-generalLinks,
.container-search {
	display: None !important;
}

#navigationMainMenu nav {
	display: Block;
	width: Auto;
	clear: Both;
}

/* ---------------------------------------------------------------------------- 
 * Drop down menus, when on a narrow mobile screen.
 * ---------------------------------------------------------------------------- */

/* 
 * Top menu button in the header, that shows of hides the <nav> itself. Note: this is outside the <nav> DOM.
 */
span.activate-menu {
	display: Inline-Flex;  align-items: Center;
	position: Absolute;  top: 0px;  right: 0px;  bottom: 0px;
	padding-left: 1em;  padding-right: 1em;
	height: 100%;
	color: var(--themeColour0);
	background-color: var(--themeColour1);
	font-size: 1.5em;
}
span.activate-menu:hover {
	color: var(--themeColour1);
	background-color: var(--themeColour2High);
}
span.activate-menu::after {
	font-family: 'FontAwesome';
	content: "\f0c9";
	width: 1em;  /* Font icons should be same width. */
}
span.activate-menu.active::after {
	font-family: 'FontAwesome';
	content: "\f00d";
	width: 1em;  /* Font icons should be same width. */
}

div.container-header {
	position: Relative;
	overflow: Hidden;
}
div.image-container img {  /* FIXME: is this ever used? */
	width: 95%;
}

/*
 * Menus themselves.
 */
#navigationMainMenu nav {
	--menuBorderColour: var(--themeColour1);
	--menuBackgroundColour: var(--themeColour0High);
	--menuBackgroundColour2: #e6e6e6;
	--menuBackgroundColour3: var(--themeColour0Mid3);
	--menuTextColour: var(--themeColour1);
	--menuTextHeaderColour: var(--themeColour1);
	--menuTextHighlightColour:  var(--themeColour1);
	--menuBackgroundHighlightColour: var(--themeColour2High);
	--menuBackgroundHighlightColour2: Inherit;
	--menuPaddingLR: 1rem;
	--menuPaddingTB: 0.5rem;
}

/* Menus. */
#navigationMainMenu nav ul,
#navigationMainMenu nav ul li {
	list-style-type: None;
	padding: 0px;  margin: 0px;
	position: Relative;
	clear: Both;
	width: 100%;
}
#navigationMainMenu nav ul ,
#navigationMainMenu nav ul.menu {
	display: None;
}
#navigationMainMenu nav ul li a {
	display: Block;
	font-size: 15pt;
	color: var(--menuTextColour);  background-color: var(--menuBackgroundColour);
	padding: var(--menuPaddingTB) var(--menuPaddingLR);
}
/*#navigationMainMenu nav ul li:nth-child(even) a,
#navigationMainMenu nav ul li:nth-child(odd) ul a,
#navigationMainMenu nav ul li:nth-child(even) ul ul a { 
	color: var(--menuTextColour); 
	background-color: var(--menuBackgroundColour); 
}
#navigationMainMenu nav ul li:nth-child(odd) a,
#navigationMainMenu nav ul li:nth-child(even) ul a,
#navigationMainMenu nav ul li:nth-child(odd) ul ul a { 
	color: var(--menuTextColour); 
	background-color: var(--menuBackgroundColour2); 
}*/
#navigationMainMenu nav ul ul li a {
	padding-left: calc( var(--menuPaddingLR) * 2 );
	background-color: var(--menuBackgroundColour2);
}
#navigationMainMenu nav ul ul ul li a {
	padding-left: calc( var(--menuPaddingLR) * 3 );
	background-color: var(--menuBackgroundColour3);
}
#navigationMainMenu nav ul li a:hover,
#navigationMainMenu nav ul ul li a:hover,
#navigationMainMenu nav ul ul ul li a:hover,
#navigationMainMenu nav ul li a:active,
#navigationMainMenu nav ul ul li a:active,
#navigationMainMenu nav ul ul ul li a:active,
#navigationMainMenu nav ul li a:focus ,
#navigationMainMenu nav ul ul li a:focus ,
#navigationMainMenu nav ul ul ul li a:focus {
	color: var(--menuTextColour);
	background-color: var(--menuBackgroundHighlightColour);
	text-decoration: None;
}

#navigationMainMenu nav span.expand {
	display: Inline-Block;
	position: Absolute;  top: 0px;  right: 0px;  z-index: 5;
	/* top: 0px;  right: 0px;  height: 50px;  width: 35px; */
	font-family: 'FontAwesome';  font-size: 15pt;
	color: var(--menuTextColour);
	padding: 0.5em 1em;
	cursor: Pointer;
}
#navigationMainMenu nav span.expand::after {
	content: "\f100";
}
#navigationMainMenu nav span.expand.active::after {
	content: "\f103";
}
/*#navigationMainMenu nav li a:not(:hover) + span.expand {
	background-color: var(--menuBackgroundHighlightColour2);
}*/
#navigationMainMenu nav li:hover > span.expand:hover ,
#navigationMainMenu nav li:hover > span.expand.active:hover {
	color: var(--menuTextColour);
	background-color: var(--menuBackgroundHighlightColour);
}

/*  FIXME: Why is this here? What does it do?!
@media screen and (max-width: 800px) {
	th,
	thead {
		display: none;
	}
	table,
	thead,
	tbody,
	td,
	tr {
		display: Block;
		width: Auto !important;
		margin: Auto;
	}
	table tr:nth-child(even) {
		background-color: #fff !important;
	}
	table tr:nth-child(odd) {
		background-color: #f2f2f2 !important;
	}
}
*/