/* main menu styles */
.MainMenu {
	position:relative; float:left; width:100%; 
	border-top: solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF;
	font-size:100%;
}
#navMenubar, #navMenubar ul {
	background-image: url(../images/menu-background.png); background-repeat:repeat; 
  list-style:none; margin:0; padding:0;
}
.gradientYellow {
	border-width:0;
	/* yellow colour gradient */
	background: #ffff32; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffff71 0%, #ffe53d 5%, #ffff32 70%, #ffff7f 90%, #ffffc1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffff71), color-stop(5%,#ffe53d), color-stop(70%,#ffff32), color-stop(90%,#ffff7f), color-stop(100%,#ffffc1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffff71 0%,#ffe53d 5%,#ffff32 70%,#ffff7f 90%,#ffffc1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffff71 0%,#ffe53d 5%,#ffff32 70%,#ffff7f 90%,#ffffc1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffff71 0%,#ffe53d 5%,#ffff32 70%,#ffff7f 90%,#ffffc1 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffff71 0%,#ffe53d 5%,#ffff32 70%,#ffff7f 90%,#ffffc1 100%); /* W3C */
}
.MainMenu, #navMenubar, #navMenubar ul, #navMenubar ul li, .gradientGold {
	background: #fcfc4e; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iI2Y0ZTg1ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE0JSIgc3RvcC1jb2xvcj0iI2Y0ZTIxZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU2JSIgc3RvcC1jb2xvcj0iI2Y0ZTIxZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkxJSIgc3RvcC1jb2xvcj0iI2ZjZmM0ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top,  #f4e85f 5%, #f4e21d 14%, #f4e21d 56%, #fcfc4e 91%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#f4e85f), color-stop(14%,#f4e21d), color-stop(56%,#f4e21d), color-stop(91%,#fcfc4e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f4e85f 5%,#f4e21d 14%,#f4e21d 56%,#fcfc4e 91%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f4e85f 5%,#f4e21d 14%,#f4e21d 56%,#fcfc4e 91%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f4e85f 5%,#f4e21d 14%,#f4e21d 56%,#fcfc4e 91%); /* IE10+ */
	background: linear-gradient(to bottom,  #f4e85f 5%,#f4e21d 14%,#f4e21d 56%,#fcfc4e 91%); /* W3C */
	/* the following filter line prevents the css dropdown menu from working in IE9 and below - apparently it triggers overflow:hidden  */
/*	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4e85f', endColorstr='#fcfc4e',GradientType=0 ); /* IE6-8 */
}

#navMenubar {
	position:relative; /* float:left; width:100%; causes menu wrap around to stop */
	height:28px; padding-left:1px; padding-right:25px; padding-top:0px;
	z-index:2;
}
#navMenubar ul {
	position:absolute;
	top:30px; left:0px; width:auto;
	display:none; /*left:-9999px;*/
	z-index:3;
}
#navMenubar ul ul {
	position:absolute;
	top:0; left:200px; width:auto;
	display:none; /*left:-9999px;*/
	z-index:4;
}
#navMenubar li {
  position:relative; float:left; margin-right:4px;
	-moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; border-radius:6px; /* ??? */
}
#navMenubar li a {
  float:left; 
	padding:7px 12px 7px 10px; /* << if adjust this - also adjust #navMenubar ul li a.mParent & #navMenubar ul li a.current */
	color:#060; text-decoration:none;
	-moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; border-radius:6px; /* ??? */
	display:block;
}
#navMenubar > li > a {
	-moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; border-radius:6px;
	overflow:hidden;
}
#navMenubar li a.mParent {
	background-image: url(../images/arrow.gif); background-repeat:no-repeat; background-position:right center;
	padding-right:7px;
}
#navMenubar ul li { margin:0; border: solid 1px #fff;}
#navMenubar ul li a { width:180px; }
#navMenubar ul li a.mParent { padding-right:12px; }

/*hover styles*/
#navMenubar li:hover > a { 	background-color:#fA0; color:#fff; }
}
/*focus styles*/
#navMenubar li a:focus { outline-width:0; }

/*popups*/
#navMenubar li a:active + ul.mDropdown,
#navMenubar li a:focus + ul.mDropdown, #navMenubar li ul.mDropdown:hover { display:block;}

#navMenubar ul.mDropdown li a:active + ul,
#navMenubar ul.mDropdown li a:focus + ul, #navMenubar ul.mDropdown li ul:hover { display:block;}

/* current menu */
#navMenubar li a.current, #navMenubar ul li a.current {
	color: #000000;	background-color: #ffff00;
	border-color: rgb(255, 204, 0) !important; 
	border-style:solid !important; 
	border-width:2px 2px 2px 2px !important;
	padding:5px 10px 5px 8px; /* take 2px off all padding to allow for border */
}

@media only screen and (max-device-width: 765px), only screen and (max-width: 765px) {
	#navMenubar ul { top:28px; }
}
@media only screen and (max-device-width: 639px), only screen and (max-width: 639px) {
	#navMenubar ul { top:28px; }
	#navMenubar ul li a { width:105px; padding-right:6px; padding-left:6px; }
	#navMenubar ul ul { left:112px; }
	#navMenubar ul.mDropdown li a:focus + ul, #navMenubar ul.mDropdown li ul:hover { left:112px; }
	#navMenubar ul li a.current { padding-right:4px; padding-left:4px; }
	#navMenubar ul li a.mParent { padding-right:6px; padding-left:6px; }
}