/* CSS Document */

body {
    padding: 0;
    }

.toggle,
[id^=drop] {
    display: none;
}

.menu {
	position: relative;
	z-index: 99999;
}

/* Giving a background-color to the nav container. */
nav { 
	width: 100%;
	display: inline-block; /* AW 2018-01-30 table was  */
	float: left;
    margin:0;
    padding: 0;
    background-color: #FFFFFF; /* AW colour 2019-03 */
	margin-top: -25px; /* AW added 2018-08-20 for positioning under logo */
	position: relative; /* AW added 2018-08-20 for positioning nav under logo */
	z-index: 10; /* AW added 2018-08-20 for positioning nav over logo */
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
    content:"";
    display:table;
    clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
    /* float: right; */
	/* display: table-row; AW 2018-01-30 new */
	display: flex; /* AW 2018-01-30 new */
	align-items: stretch; /* AW 2018-01-30 new */
    justify-content: space-between; /* AW 2018-01-30 new */
    width: 100%; /* AW 2018-01-30 new */
	padding:0;
    margin:0;
    list-style: none;
    position: relative;
    }
    
/* Positioning the navigation items inline */
nav ul li {
    margin: 0px;
    display: inline-block; /* AW 2018-01-30 table-cell was */
    float: left; /* AW 2018-01-30 removed */
    background-color: #FFFFFF; /* main colour */ /* AW colour 2019-03 */
    }
	
/* Styling the links */
nav a {
    display: block;
    padding: 14px 15px;  /* AW spacing of top nav however these carry through to toggle, so need to change later */
    font-size: 17px; /* AW colour 2019-03 */
    text-decoration:none;
	line-height: 19px; /* AW to solve Edge bug */
}

nav a:link, a:visited {
    color:#000000; /* AW colour 2019-03 */
	text-decoration:none;
}

/* AW Padding the drop down menu */
nav ul li ul li a {
    padding: 4px 14px;  /* amended from 15px to 14 px AW colour 2019-03 */ /* AW spacing second tier links however these carry through to toggle, so need to change later */ 
	line-height: 18px; /* AW to solve Edge bug */
}

/* Background color change on Hover */
nav a:hover { 
    color: #009833;
	background-color: #FFFFFF; /* AW colour 2019-03 */
}

/* Background color change on Hover for drop downs only */
nav li li a:hover { 
    color: #009833;
}

nav ul li ul li:hover { /* Background of selected hover when 3rd level */
	background: #FFFFFF;  /* AW colour 2019-03 */
} 

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
    display: none;
    position: absolute; 
    /* has to be the same number as the "line-height" of "nav a" */
    top: 47px; 
}
    
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;
}
    
/* First Tier Dropdown */
nav ul ul li {
    width:190px;
    float:none;
    display:list-item;
    position: relative;
	text-align: left;
	/* box-shadow: 1px 1px 0px 0px rgb(243, 235, 226); /* AW shadow */
	border-left-style: solid; /* AW colour 2019-03 */
	border-left-color: #EDEDED; /* AW colour 2019-03 */
	border-left-width: 1px; /* AW colour 2019-03 */
	border-right-style: solid; /* AW colour 2019-03 */
	border-right-color: #EDEDED; /* AW colour 2019-03 */
	border-right-width: 1px; /* AW colour 2019-03 */
	border-bottom-style: solid; /* AW colour 2019-03 */
	border-bottom-color: #EDEDED; /* AW colour 2019-03 */
	border-bottom-width: 1px; /* AW colour 2019-03 */
}

/* Second, Third and more Tiers 
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
    position: relative;
    top:-47px;
	min-width: 230px;
    /* has to be the same number as the "width" of "nav ul ul li" */ 
    left:190px; 
}

    
/* Change ' +' in order to change the Dropdown symbol */
/* li > a:after { content:  ' +'; } AW tried to change to an image Before */
/* li > a:only-child:after { content: ''; } AW tried to change to an image Before */
li > a:after { content: url('chevron.png'); float: right;} 
li > a:only-child:after { content: ''; }
a.productsMenuItem:after { content: ''; } /* AW added so that not show chevron on Main menu */

li > label:after { content: url('chevron.png'); float: right;} 
li > label:only-child:after { content: ''; }

.hiddenNav {
	display:none; /* AW hide some elements Search & Join */
}

/* AW hide all new dropdown menu until ready 2017-11-30 */
.toggle + a,
.menu {
	/* display: none; */
}

.productsMenuItem { /* AW added to style top level menu 2018-08-20*/
	font-weight: bold;
}

/* Media Queries
--------------------------------------------- */

@media all and (max-width : 850px) {  /* was 768px */

    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
		position: relative; 
		top: 12px; 
    }
	
	#topNav { /* AW added for top nav */
		/* AW display: none; */
	}

    nav {
        margin: 0;
		/* border-bottom-style: solid; AW colour 2019-03 */
		/* border-bottom-color: #009833; AW colour 2019-03 */
		/* border-bottom-width: 1px;	AW colour 2019-03 */
		border-top-style: solid; 
		border-top-color: #009833;
		border-top-width: 1px;		
		margin-top: 10px;
		/* background-color: #171717 AW colour 2019-03 */
    }
	
	nav a {
		padding: 10px 15px;
	}

    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle + a,
    .menu {
        display: none;
    }

    /* Styling the toggle lable */
    .toggle {
		display: block; 
        /* background-color: #1f1f1f;  AW colour 2019-03 AW affect anything in top 2 levels that has further options incl Menu */
        padding: 8px 15px;
        font-size: 16px;
        text-decoration:none;
        border:none;
		text-align: left;
		font-weight: bold !important; /* AW colour 2019-03 */
    }

    .toggle:hover {
		color: #009833;
		/* background-color: #333333; AW colour 2019-03 */
    }

	.toggle:link {
		color: #000066;
	}	
	
    /* Display Dropdown when clicked on Parent Label */
    [id^=drop]:checked + ul {
        display: block;
    }

	#menuTopLevel { 
		font-size: 18px;
		width: 195px;
		float: left;
		/* background-color: #171717; AW colour 2019-03 */
	}

	#searchTopLevel { 
		margin-top: 5px;
		width: 65px;
		text-align: right;		
		float: right;
		/* background-color: #171717 AW colour 2019-03 */
	}

	#searchTopLevel a:link, #searchTopLevel a:visited { 
		float: right;
		font-size: 14px;
		padding: 0px; 
		display: initial;
		color: #000000; /* AW colour 2019-03 */
		/* background-color: #171717 AW colour 2019-03 */
	}

	#searchTopLevel img { 
		padding-top: 3px;
		padding-right: 2px;		
		width: 16px;
	}
	
	#searchTopLevel a:hover { 
		color: #FF6600; 
	}
	
	#headerNavContainer { 
		padding: 0px; 
	}

    /* Change menu item's width to 100% */
    nav ul li {
        display: block;
        width: 100%;
        }

    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }

    nav ul ul ul a {
        padding: 0 80px;
    }

    nav a:hover,
    nav ul ul ul a {
        /* background-color: #333333;  AW colour 2019-03 AW color of anything that does not toggle */
    }
  
    nav ul li ul li .toggle, /* AW THIRD LEVEL TOGGLE */
    nav ul ul a,
	nav ul ul ul a{
        padding-top: 8px;  
		padding-bottom: 8px;
		padding-left: 17px; 
		padding-right: 15px;
        font-size: 16px; 
		/* background-color: #999999; AW colour 2019-03 */
    }
  
  
    nav ul li ul li .toggle, /* AW SECOND LEVEL TOGGLE COLOUR */
    nav ul ul a {
        /* background-color: #666666; AW colour 2019-03 */
    }

    /* Hide Dropdowns by Default */
    nav ul ul {
        float: none;
        position:static;
    }
        
    /* Hide menus on hover */
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }
        
    /* First Tier Dropdown */
    nav ul ul li {
        display: block;
        width: 100%;
    }

    nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */ 

    }

	.hiddenNav {
		display:inline; /* AW show some elements Search & Join */
	}
	
	.TestShow { 
		display: inline;
	} 
	.TestHide { 
		display: none;
	} 
	
}

@media all and (max-width : 330px) {

    nav ul li {
        display:block;
        width: 94%;
    }

}