/* Main menu with dropdown child menus
-------------------------------------------------------------- */

/* -- start desktop menu styles - needs to be desktop first with 
no media query otherwise IE8 won't recognise styles -- */

/* ----- Set links widths - other dimensions are below ----- */
nav[role="navigation"] li {
	width: auto; /* -- sets width for top level links -- */
}
nav[role="navigation"] ul ul a {
	width: 8em; /* -- sets width for sub-menu links -- */
}
nav[role="navigation"] ul ul ul {
	left: 9.5em; /* -- positions third level, adjust this depending on the width set for the sub-menus -- */
}
/* ----- end links widths ----- */

nav[role="navigation"] {
	background: #fff;
	display: block;
	float: left;
	width: 66%;
	border: 0px solid #333;
	padding-left: 50px;
	
}
nav[role="navigation"] ul {
	list-style: none;
	margin-left: 0px ;
	padding-left: 0;
}
nav[role="navigation"] li {
	float: left;
	position: relative;
}
nav[role="navigation"] a {
	display: block;
	line-height: 2em;
	padding: .06em .6em;
	text-decoration: none;
	color: #999;
	font : 14px/24px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400;
}
nav[role="navigation"] ul ul {
	display: none;
	float: left;
	position: absolute;
	top: 2.3em;
	left: -250px;
	z-index: 99999;
}
nav[role="navigation"] ul ul ul {
	top: 0;
}
nav[role="navigation"] ul ul a {
	background: #000;
	color: #fff;
	line-height: 1em;
	padding: .5em .5em .5em 1em;
	height: auto;
	font : 16px/20px "arial",sans-serif; font-weight: 500;
}
nav[role="navigation"] li:hover > a,
nav[role="navigation"] ul ul :hover > a {
	background: #000;
	color: #fff;
}
nav[role="navigation"] ul ul a:hover {
	background: #c2c2c2;
}
nav[role="navigation"] ul li:hover > ul {
	display: block;
}
button#togglebutt {display: none;}

/* -- end desktop menu styles -- */

/* -- Tablet devices (Layout, modifications, etc) -- use width: 700px is not full screen */
@media only screen and (min-width: 720px) and (max-width: 959px) {
	
nav[role="navigation"] a {
	display: block;
	line-height: 2em;
/* 	padding: .06em .4em; */
	text-decoration: none;
/* 	color: #999; */
	font : 14px/24px "arial",sans-serif; /* font-weight: 600; */
}
	
}
/* End tablet media query */

@media only screen and (max-width: 770px) {

	header#masthead nav * { /* -- reset all menu styles -- */
		position: relative; padding: 0; margin: 0; border: none; background: none; float: none; width: auto; height: auto; top: 0; left: 0; display: block; width: 100%; clear: both; line-height: normal;z-index: 10000;
	}
	button#togglebutt {
		display: block;
		background-color: #fff;
		padding: 6px; color: #333;
		width: 100%;
		margin: 100px 10px 10px 0px ;
		z-index: 10000;
		border: 0;
		
		
	}
	nav[role="navigation"] {
		display: none !important;
		overflow: hidden;
		margin-top: 51px;
		
	}
	header#masthead nav[role="navigation"] ul a {
		border-bottom: 1px solid #fff;
		line-height: 2em;
		padding: 0 1em;
		background-color: #e1e1e1;
/* 		color: #454545; */
		z-index: 10000;
		
	}
	header#masthead nav[role="navigation"] ul a:hover  {background-color: #c2c2c2;}
	header#masthead nav[role="navigation"] ul ul a {
		background: #e1e1e1;
	}
	header#masthead nav[role="navigation"] ul ul ul a {
		background: #e1e1e1;
	}
	
	
	
} /* -- end mobile device menu style -- */