/* 
    Document   : menu_style
    Created on : 08-Jan-2014, 09:36:50
    Author     : Julian
    Description:
        Purpose of the stylesheet follows.
*/
/*
root { 
        display: block;
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}
body {
	background: #909eab url(bg.png);
	font-family: Arial, Helvetica, sans-serif; font-size: small; line-height: 24px;
}

*/

p, ul, ol, li  {
	/*margin: 0; padding: 10px; border: 0px;*/
	/*font-size: 1.2em;*/
	/* font-size: 3vw; /* percentage of viewport width */
	font-size: 24px; /* pixel size (default 16?) */
}
ul {
    /*list-style: outside disc;*/
    /*margin-left: 1em;  /* */
    overflow:hidden;  /* Strangely, this is required to prevent li bullets being hidden behind images floated left!*/
}
/*ul li {
    position: relative;
    left: 1em;
}*/

/* JCA - New logo colours
gn	#289806
bn	#726809
back	#edf9cb
*/


.responsive {
	/* text-align: center; */
	margin-left:auto; 
	margin-right:auto;
	/*width: auto;*/
	height: auto;
	max-width: 800px;
}
.narrow {
	width: auto;
}
.width_1000 { width: auto; }
.width_600 { width: auto; }
.width_700 { width: auto; }
/*.width_200 { width: auto; }*/
.width_200 { width: 100px; }
.width_170 { width: auto; vertical-align : top;}
/*.width_145 {
  width: auto;
  vertical-align : top;
  background-image : url("https://www30.epa.org.uk/images/epa_logo_sm.gif"); 
   /* height: 96px; /* You must set a specified height */
/*  background-position: center; /* Center the image */
/*  background-repeat: no-repeat; /* Do not repeat the image */
/*  background-size: contain; /* Resize the background image to fit the container */
/* } */
.width_145 { width: auto; vertical-align : top; }
.width_25 { width: auto; }

/* object fit options (eg resize images responsively) 

The object-fit property can have the following values:

    fill - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit
    contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
    cover - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
    none - The replaced content is not resized
    scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)
*/
.cover {
	object-fit: cover;
	width: 300px;
/*	height: 200px; */
}
.fill {object-fit: fill;}
.contain {object-fit: contain;}
/*.cover {object-fit: cover;}*/
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

.contain_ad {object-fit: contain; width: 100px;}
.cover_ad {object-fit: cover; width: 100px;}
.scale-down_ad {object-fit: scale-down; width: 100px;}
/*.contain_logo {object-fit: contain; width: 48px;}*/
/*.contain_title {object-fit: contain; width: 300px;}*/
/*.contain_title {display: none; width: 300px;}*/

div.sticky {
	/* NOTE with vertical menue as defined here, using 'sticky' 
	switches to 'ficed' when page is scolled down, the problem then is when
	menue extend below the bottom of the screen, the lower items cannot
	be reached by scrolling so DO NOT ALLOW STICKY HERE 
	as an alternative, we could have a sticky or fixed
	link to page top */
/*  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  left: 50px;
  padding: 5px;*/

}

/* ######## NAVIGATION SECTION ######## */

nav {
	/*margin: 0px auto;*/ 
	/*text-align: center;*/
	font-weight: bold;
	max-width: 800px;
	

}

/*
	Position Options
	    static	Normal flow of page
	    relative	offsets from normal position eg top: 100px; left:30px; (  inserts )
	    fixed	positin with top, left, bottom, right relative to viewport
	    absolute	positioned relative to the nearest positioned ancestor
	    sticky	VERY USEFUL eg to keep a menu visible
			A sticky element toggles between relative and fixed, 
			depending on the scroll position. It is positioned 
			relative until a given offset position is met in the 
			viewport - then it "sticks" in place (like position:fixed).
		Note: Internet Explorer does not support sticky positioning.
		Safari requires a -webkit- prefix (see example below).
		You must also specify at least one of top, right,
		bottom or left for sticky positioning to work.
		Example:
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
*/

/*##############################################*/
/* div {background-color: green;}
div a {
    text-decoration: none;
    color: white;
    font-size: 20px;
    padding: 15px;
    display:inline-block;
} */


/* Set position of nav button and reserve space */
nav.relative {
position:relative;
top: 0px;
left: 0px;
  /*width: 250px;*/
  width: auto;
  height: 0px;
  /*border: 3px solid blue;*/

}
/* Create and position an overlay (absolute) box relative to the parent <nav> */
nav.absolute {
position: absolute;
  /*bottom: 0px;*/
  top: -70px;
left: 10px;
  /*border: 3px solid #73AD21;*/

}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0 10px; /* vertical  horizontal */
	/* overflow: hidden; */
	overflow: visible; 
	background-color: #edf9cb;
	display: block;  
	border-radius: 15px;
	border: 4px solid #289806;
	/*  	 position: absolute; 
	top: 0px; */
}
/* Sete default ul li not displayed */
nav ul li {
	display: none;
	/* display: inline-block; */ 
	color: white; /* no effect? (overridden later)*/
	text-align: left;
	padding: 3px 10px;
	/*padding: 5px 10px;*/
	text-decoration: none;
		font-size: 1.6em;

}
/* Override to allow display of first item in list */
nav ul li:first-child { display: block; color: black; }

/* Set background color of ul li on hover */
nav ul li:hover { 
	background: #726809;
	display: list-item; /* needed? */
	color: white;
}
/* set color of text for a links when hovering on li */
nav ul li:hover a { 
	color: white;
}
/* Hover over ul to override 'display none' to display hidden list items
   Also set width of menu on hover */
nav ul:hover li {
	display: list-item; /* needed? YES makes other li visible */
	width: 250px;
}

/* Set a link font colour, padding etc */
nav ul li a, .dropbtn {
	/*    display: block;  */
	display: inline-block;  
	/*color: blue;*/
	color: #0000c8;
	/* text-align: center; /* no effect */
	/*padding: 5px 10px;*/
	padding: 0px 10px;
	text-decoration: none;
}

/* Set a background colour for links when hovering over (required?)) */
nav ul li a:hover, .dropdown:hover .dropbtn {
	/*background-color: red;*/
	color: yellow;
}


/* #################### Adjustments for sub menus #################### */
/* A first level sub-menu container is 'ul li ul' */

/* Set default sub-menu not displayed
   Offset to the right (gets inherited by sub-sub-menus) */
nav ul li ul {
	display: none;
	/* position: relative; /* enable sub-menu to overlay page */
	/*////position: absolute; /* enable sub-menu to overlay page */
	/*////left: 100px; /* shift sub-menu right */
	/*top:20px;*/
		/*color: green;*/
}

/* enable sub-menu display when hovering over parent li 
NOTE use of '>' meaning only apply to immediate descendants
ie do NOT apply toi sub sub menu at this stage
*/
nav ul li:hover > ul {
	display: block;
		/*color: green;*/
	position: absolute; /* enable sub-menu to overlay page */
	left: 100px; /* shift sub-menu right */
}

/* This is only displayed during 'ul li:hover'
  Hover is still oprating so ALL 'a' text retains that color (set above)
  need to reset here to endsure color is set correctly */
nav ul li:hover ul li a {
		color: #0000c8;
}
/* and set the hover color of an a link to white */
nav ul li:hover ul li:hover a {
		color: white;
}




/* #################### Adjustments for sub sub menus #################### */
/* A second level level sub-menu container is 'ul li ul li ul' */

nav ul li ul li ul {
	position: absolute; /* enable sub-menu to overlay page */
	/*display: none;*/
}*
/* enable sub-menu display when hovering over parent li */
/*nav ul li ul li:hover ul {
	display: block;
}*/





/* ################ NOT USED may be some useful code? ################ */
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {background-color: #f1f188;}
.dropdown:hover .dropdown-content {
  display: block;
}

/*li {
  float: left;
} */

/* ######################################## OLD VERSION ###################################### */
/*nav ul {
	display: inline;
	margin: 0;
	position: relative;  inserts within page 
	 position: absolute;	/* makes menu overlay the page (hides stuff behind)) 
	position: -webkit-sticky;
	position: sticky;
	top: 0;
 h2 color from orig #e37514 
	background: #edf9cb;
	background: #ccffff; 
	display: list-item;	 moves menu to left of header cell 
	list-style: none;	 removes the 'bullets' 
	text-align: left;
	padding: 0px 10px;  v and h padding for whole list 
	border-radius: 10px;  
	z-index: 200;  

		font-size: 1.5em; 
}

nav ul li {
	 display: inline-list; /* was inline-block, puts items line by line 
		display: none;
 	padding: 5px 10px;	 increase indent (padding) 
	font-size: 1.2em; 

	     position: relative;  reinatete left 0 (made 1em further up for ul li) 
	    position: absolute; /* reinatete left 0 (made 1em further up for ul li) 
	    left: 0;
	color: #8f8;  color of non 'a'-link text'

}

 testing nth-child(x) 
nav ul li:nth-child(2) {
		display: none; 
}
nav ul:hover li {
		display: list-item;  needed? 
	 color: #8f8; /* color of non 'a'-link text'
	position: absolute;
	position: relative;
}
 test end 

nav ul li:first-child {
	display: list-item;
}
nav ul li:hover {
	background: #600;
	background: #726809;  brownn (see above) colour on whole line of li element
	color: 8ff;
	 display: list-item; /* still testing child 
}
nav ul li:hover a {
	color: #fff;	 'a' link color 
	 background: #cccccc; /* grey behind text ('a' linke) 

}
nav ul li:hover ul {
	display: block;
}
nav ul li ul {
   position: absolute;  overlays 
   position: relative; /* inserts 
  width: auto;
  display: none;
  display: block;

  left: 100px;
  height: 300px;
    white-space: nowrap; 
    overflow: hidden;
    overflow: visible;
		z-index: 220;   to bring this ul in front of parent ul 
     text-overflow: ellipsis; /* eg text he... 
  
}
nav ul li ul li { 
  background: #555; 
  display: block; 
  display: list-item; 
  	font-size: 1em;  else this inherits the font-size increase and increases further 

}
nav ul li ul li a {
	display:block !important;
	padding: 5px 10px;	 increase indent (padding) for links 
} 
nav ul li ul li:hover {background: #600;}

 20.12.2021 JCA added sub sub menu style 
nav ul li ul li ul li:hover {background: #bb0;}*/





/*##############################################*/

nab_bak ul li ul {
	display: none;
}

	nab_bak ul li:hover > ul {
		display: block;
	}


nab_bak ul {
	background: #8888ff; 
/*	background: linear-gradient(top, #00ffff 0%, #00bbbb 100%);  
/*	background: -moz-linear-gradient(top, #00ffff 0%, #00bbbb 100%); 
	background: -webkit-linear-gradient(top, #00ffff 0%,#00bbbb 100%); */
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 10px;
	border-radius: 10px;  
	list-style: none;
/*	position: relative; */
position: absolute; /* makes top lev menu appear over part of page rather than stretch the page (nsert within) */

/*	display: inline-table;*/
	display: list-item;
	text-align: left;
	z-index: 200;
}
	nab_bak ul:after {
		content: ""; clear: both; display: list-item;
	}

	nab_bak ul li {
		/* float: left; */
		float: none;
		display: inline-list;
 	}
		nab_bak ul li:hover {
			background: #800000;
			background: linear-gradient(top, #0000b0 0%, #000050 40%);
/*			background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
			background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);*/
				display: list-item;

		}
			nab_bak ul li:hover a {
				color: #fff;
			}
		
		nab_bak ul li a {
/*			display: block; padding: 2px 10px; */
			display: list-item; padding: 2px 10px;
			color: #757575; text-decoration: none;
		}
			
		
	nab_bak ul li ul {
		background: #5f6975; border-radius: 0px; padding: 0;
		 position: absolute;   /* add 2nd lev menue below top lev menu */
		/* position: relative; /* injects 2nd menu within top menu */
		z-index: 210;
		float: none;
		 top: 100%;
		 left: 40%;
	}
	nab_bak ul ul li {
		float: none; 
		/* float: left;   prevent list being complete vertical list, layed horizontally with wrapping at margin? */
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		 position: relative; 
		z-index: 220;
		/*display: block;
		/*left: 100%;
		/*top: 0;*/
	}
		nab_bak ul ul li a {
			padding: 1px 20px;
			color: #fff;
		}	
		nab_bak ul ul li a:hover {
			background: #000080;
		}




		
	nab_bak ul ul ul {
		position: absolute;
		 left: 95%; top:0;
	}