
.MenuContainer {
    float:left;
    max-width: 900px;
	margin:10px 0px 0px 10px;
	width:82%;
}

/* top level menu 'on' state */
.nav .on {
	border-bottom:7px solid #ff8c30;
}


.toggleMenu {
    display:  none;
    background: #0073cf;
    padding: 11px 10px;
    color: #fff;
	width:100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: 'Quicksand', sans-serif;
	font-size:1.2em;
	background-image: url("/images/downArrow.png");
	background-repeat: no-repeat;
	background-position: 96% 50%;c
}
.nav {
    list-style: none;
     *zoom: 1;
     background:transparent;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 12em;
}
.nav a {
    padding: 11px 8px;
    color:#0073cf;
	font-family: 'Quicksand', sans-serif;
	font-size:1.2em;
	line-height:1.3em;
}

.nav a:hover, .hover {
    background:#f2f5f8;
}

.nav li {
    position: relative;
}
.nav > li {
    float: left;  
}

.nav > li > a {
    display: block;
}
.nav li ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 99%;
    top: 0;
}
.nav li li a {
    display: block;
    background: #0073cf;
    position: relative;
    z-index:100;
    border-bottom: 1px solid #65a9e0;
	color:white;
	font-family:Arial, Helvetica, sans-serif;
	font-size:90%;
	width:180px;
}

.nav li li .parent, .nav li li .parent:hover {
	background-image: url("/images/rightArrow.png");
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/* sub menu 'on' states */
.nav ul .on {
	border-bottom:none;	
}

.nav ul .on a {
	border-left:3px solid #ff8c30;
	width:177px;	
}
/* END sub menu 'on' states */


/*----3rd level rollover----------*/
.nav ul ul li a:hover {
	background-color:#034474!important;
}

.nav ul li li  ul  {
	left: -9999px!important;
}

.nav ul li li.hover ul {
	left:200px!important;
}

.nav li ul li a:hover {    
    background: #012c4b;
}

.nav ul li .parent:hover {
	background-color:#012c4b!important;
}

/* keep background color of parents rolloved over item*/
.nav ul ul li:hover > a {
	background-color:#012c4b!important;

}

.nav li li li a {
    background:#003c69;
    z-index:200;
    border-bottom: 1px solid #1a5480;
}

.nav ul li:hover > a {
	background-color:#003c69!important;
}

/*-------------------Mobile version-------------------------------*/

@media screen and (max-width: 1005px) {

.MenuContainer {
	width:100%;
	margin:10px 0px 10px 0px;
}
}


@media screen and (max-width: 717px) {

.MenuContainer {
	width:100%;
	margin:10px 0px 10px 0px;
}
}
@media screen and (max-width: 717px) {

.MenuContainer {
	float:none;
    max-width: 100%;
}

.nav .on {
	border-bottom:0px;
}
	
.nav a {
	background:#ccc;
}
	
.active {
	display: block;
}

.nav li li a, .nav ul .on a  {
	width:auto;
}

.nav > li {
	float: none;
	border-top: 1px solid #65a9e0;
}

.nav a:hover {    
    background: #b6b6b6;
}

.nav li ul li a:hover {    
    background: #003c69;
}

.nav > li > .parent {
	background-image: url("/images/downArrow.png");
	background-repeat: no-repeat;
	background-position: 95% 50%;
}


.nav li li .parent, .nav li li .parent:hover {
	background-image: url("/images/downArrow.png");
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

.nav ul {
	display: block;
	width: 100%;
}

/*show parent items a different colour*/
.nav ul ul .parent  {
	background-color:#226ca3;
}

.nav > li.hover > ul , .nav li li.hover ul {
	position: static;
    }
}