/*
 * Drop down menus.
 */


nav ul#main-menu li span.expand {
	display: None;
}
.sm , .sm ul , .sm li{display:block;list-style:none;padding:0;margin:0;line-height:normal;direction:ltr;}
ul.sm li{position:relative;}
ul.sm a{position:relative;display:block; text-decoration: none;}
ul.sm a.disabled{cursor:default;}
ul.sm ul{position:absolute;top:-999999px;left:-800px;width:100px;}
ul.sm li{float:left;}
ul.sm-rtl{direction:rtl;}
ul.sm-rtl li{float:right;}
ul.sm ul li,ul.sm-vertical li{float:none;}
ul.sm a{white-space:nowrap;}
/* SEM edit start */
ul.sm li.root > a { white-space:Normal; max-width:6rem; }
ul.sm li.root > a span.title { display:Inline-Block; line-height:1.2em; min-height:2.4em; }
/* SEM edit end */
ul.sm ul a , ul.sm-vertical a{white-space:normal;}
* html ul.sm-vertical li{float:left;width:100%;}
* html ul.sm-vertical ul li{float:none;width:auto;}
*:first-child+html ul.sm-vertical>li{float:left;width:100%;}
ul.sm ul.sm-nowrap>li>a{white-space:nowrap;}
ul.sm:after{content:"\00a0";display:block;height:0;font:0/0 serif;clear:both;visibility:hidden;overflow:hidden;}
* html ul.sm{height:1px;}
*:first-child+html ul.sm{min-height:1px;}
ul.sm li * , ul.sm li *::before , ul.sm li *::after{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
ul.sm{-webkit-tap-highlight-color:rgba(0,0,0,0);}

/* nav   div.inner   #main-menu.sm.menu */
ul.menu {
	--menuBorderColour: var(--themeColour1);
	--menuBackgroundColour: var(--themeColour0);
	--menuTextColour: var(--themeColour1);
	--menuTextHeaderColour: var(--themeColour1);
	--menuTextHighlightColour:  var(--themeColour1);
	--menuBackgroundHighlightColour: var(--themeColour2High);
	--menuPaddingLR: 0.5rem;
	--menuPaddingTB: 1rem;
	
	padding: 0px var(--headerLRPadding);
	/* background-color: var(--buttonBackgroundColour); */
}
/* FIXME never used?
.menu-vertical {
	padding: 1rem 0px;
	border-radius: 0.5rem;
}*/
ul.menu ul {
	border: 1px Solid var(--menuBorderColour);
	padding: 0.5rem 0px;
	background: var(--menuBackgroundColour);
	border-radius: 0.5rem;
	box-shadow: 0px 0.25rem 0.5rem rgba(0,0,0 , 0.2);
}
/* first sub level carets */
ul.menu > li > ul::before {
	content: '';
	position: Absolute;
	top: -18px;  left: 30px;  /* FIXME pixel units! */
	width: 0px;  height: 0px;
	overflow: Hidden;
	border-width: 9px; /* tweak size of the arrow */
	border-style: Dashed Dashed Solid Dashed;
	border-color: Transparent Transparent var(--menuBorderColour) Transparent;
}
ul.menu > li > ul::after {
	content: '';
	position: Absolute;
	top: -16px;  left: 31px;
	width: 0px;  height: 0px;
	overflow: Hidden;
	border-width: 8px;
	border-style: Dashed Dashed Solid Dashed;
	border-color: Transparent Transparent var(--menuBackgroundColour) Transparent;
}
/* no carets for vertical main */
/* FIXME, never used?
.menu-vertical > li > ul::before ,
.menu-vertical > li > ul::after {
	display: None;
}*/

/* Menu items */
@media screen and (min-width: 1030px) { 
	ul.menu a {
		font-size: 0.85rem;
	}
}

@media screen and (max-width: 1029px) { 
	ul.menu a {
		font-size: 0.8rem;
	}
}

/* ------------------------------------------------------------------------
 * Menubar buttons
 * ------------------------------------------------------------------------ */

ul.menu a {
	color: var(--menuTextColour); /*#193177;*/
	padding: var(--menuPaddingTB) var(--menuPaddingLR);
	line-height: 1rem;
	font-family: var(--fontList);
	text-decoration: None;
}
ul.menu a:hover , 
ul.menu a:focus , 
ul.menu a:active ,
ul.menu a.highlighted {
	color: var(--themeColour1); /*#2196da;*/
	background: var(--menuBackgroundHighlightColour);
}
/* FIXME never used?
.menu-vertical a:hover , 
.menu-vertical a:focus , 
.menu-vertical a:active ,
.menu-vertical a.highlighted {
	background:var(--themeColour0);
}*/
ul.menu a.has-submenu {
	padding-right: 2rem; /*35px;*/
}


/* ------------------------------------------------------------------------
 * Sub menu items 
 * ------------------------------------------------------------------------ */

/* FIXME never used?  .menu-vertical a, */
ul.menu ul a {
	padding: 0.5rem 1rem /*10px 20px;*/
}
/* FIXME never used?  .menu-vertical a.has-submenu, */
ul.menu ul a.has-submenu {
	padding-right: 2rem; /*40px;*/
}
ul.menu ul a {
}
ul.menu ul a:hover ,
ul.menu ul a:focus ,
ul.menu ul a:active,
ul.menu ul a.highlighted {
	color: var(--menuTextHighlightColour); /*#2196da;*/
	background: var(--menuBackgroundHighlightColour); /*#eee;*/
}
/* current items - add the class manually to some item or check the "markCurrentItem" script option */
ul.menu a.current ,
ul.menu a.current:hover ,
ul.menu a.current:focus ,
ul.menu a.current:active {
	color: var(--menuTextColour);
}
ul.menu li b {  /* Bold title, eg. "Section A". */
	display: Block;
	font-size: 0.8rem;
	color: var(--menuTextHeaderColour);
}


/* ------------------------------------------------------------------------
 * Sub menu indicators
 * ------------------------------------------------------------------------ */

ul.menu a span.sub-arrow {  /* All menus with submenus, including top-level menubar buttons. */
	position: Absolute;  display: Block;
	padding-right: var(--menuPaddingLR);  padding-top: 2rem;
	right: 0px;  top: 0px;
	/*color: rgba(0,0,0,0);*/  /* Transparent, hide actual text and use ::after instead. */
	/*font-size: 1.5rem;*/
}
ul.menu a span.sub-arrow::after {  /* This is the actual arrow. */
	font-family: FontAwesome;  font-size: Inherit;
	content: "\f107";  /* Down arrow */
	color: var(--menuTextColour);
}
/* FIXME never used ?  .menu-vertical a span.sub-arrow, */ 
ul.menu ul a span.sub-arrow {  /* Menu items with sub menus, move arrow vertically. */
	padding-top: 0.5rem;
}
/* FIXME never used?  .menu-vertical a span.sub-arrow::after, */
ul.menu ul a span.sub-arrow::after {  /* This is the actual arrow. */
	font-family: FontAwesome;  font-size: Inherit;
	content: "\f105";  /* Right arrow */
	color: var(--menuTextColour);
}
/* FIXME, no longer needed now we're not using background images for arrows.
.menu a:hover span.sub-arrow,
.menu a:active span.sub-arrow,
.menu a:focus span.sub-arrow {
		background-position: center bottom;
}*/

/* Scrolling arrows containers for tall sub menus - test sub menu: 
   "Sub test" -> "more..." -> "more..." in the default download package */
ul.menu span.scroll-up ,
ul.menu span.scroll-down {
	position:absolute;
	display:none;
	visibility:hidden;
	overflow:hidden;
	background: var(--menuBackgroundColour);
	height:20px;
	/* width and position will be automatically set by the script */
}
ul.menu span.scroll-up:hover ,
ul.menu span.scroll-down:hover {
	background: var(--themeColour0Mid3);
}
ul.menu span.scroll-up-arrow ,
ul.menu span.scroll-down-arrow {
	position:absolute;
	top:0;
	left:50%;
	margin-left:-6px;
	/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
	width:0;
	height:0;
	overflow:hidden;
	border-width:6px; /* tweak size of the arrow */
	border-style:dashed dashed solid dashed;
	border-color:transparent transparent var(--themeColour0Mid) transparent;
}
ul.menu span.scroll-up:hover span.scroll-up-arrow {
	border-color:transparent transparent var(--menuTextHighlightColour) transparent;
}
ul.menu span.scroll-down-arrow {
	top:8px;
	border-style:solid dashed dashed dashed;
	border-color: var(--themeColour0Mid) transparent transparent transparent;
}
ul.menu span.scroll-down:hover span.scroll-down-arrow {
	border-color: var(--menuTextHighlightColour) transparent transparent transparent;
}



/*
---------------------------------------------------------------
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
---------------------------------------------------------------
*/


/*
 * Less than 850px width.
 */
/* decrease horizontal main menu items left/right padding to avoid wrapping */
@media screen and (max-width: 850px) {
	ul.menu:not(.menu-vertical) > li > a {
		padding-left:8px;
		padding-right:8px;
	}
	ul.menu:not(.menu-vertical) > li > a.has-submenu {
		padding-right:25px;
	}
}

/* 
 * Less than 750px width.
 */
@media screen and (max-width: 750px) {
	ul.menu:not(.menu-vertical) > li > a {
		padding-left:3px;
		padding-right:3px;
	}
	ul.menu:not(.menu-vertical) > li > a.has-submenu {
		padding-right:25px;
	}
}

/*
 * Less than 700px width.
 */
@media screen and (max-width: 700px) {
	/* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
	ul.menu{width:auto !important;}
	ul.menu ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;}
	ul.menu>li{float:none;}
	ul.menu>li>a,ul.menu ul.sm-nowrap>li>a{white-space:normal;}
	ul.menu iframe{display:none;}

	/* Uncomment this rule to disable completely the sub menus for small screen devices */
	/*.menu ul, .menu span.sub-arrow, .menu iframe {
		display:none !important;
	}*/

	/* Menu box */
	ul.menu {
		padding:0;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius:5px;
		border: 1px Solid Red;
	}
	ul.menu ul {
		border:0;
		padding:0;
		/* darken the background of the sub menus */
		background:rgba(130,130,130,0.1);
		border-radius:0;
		box-shadow:none;
	}
	/* no carets */
	ul.menu > li > ul:before, .menu > li > ul:after {
		display:none;
	}

	/* Menu items */
	ul.menu a {
		padding:13px 5px 13px 28px !important;
		color:#555 !important;
		background:transparent !important;
	}
	ul.menu a.current {
		color:#2196da !important;
	}
	/* add some text indentation for the 2+ level sub menu items */
	ul.menu ul a {
		border-left:8px solid transparent;
	}
	ul.menu ul ul a {
		border-left:16px solid transparent;
	}
	ul.menu ul ul ul a {
		border-left:24px solid transparent;
	}
	ul.menu ul ul ul ul a {
		border-left:32px solid transparent;
	}
	ul.menu ul ul ul ul ul a {
		border-left:40px solid transparent;
	}

	/* Sub menu indicators */
	ul.menu a span.sub-arrow ,
	ul.menu ul a span.sub-arrow {
		top:50%;
		margin-top:-9px;
		right:auto;
		left:6px;
		margin-left:0;
		width:17px;
		height:17px;
		font:normal 16px/16px monospace !important;
		text-align:center;
		border:0;
		text-shadow:none;
		background:rgba(255,255,255,0.6);
		border-radius:50px;
	}
	/* Hide sub indicator when item is expanded - we enable the item link when it's expanded */
	ul.menu a.highlighted span.sub-arrow {
		display:none !important;
	}

	/* Items separators */
	ul.menu li {
		border-top:1px solid rgba(0,0,0,0.05);
	}
	ul.menu > li:first-child {
		border-top:0;
	}
}

/* END NAVIGATION */