/* CSS Document */

/* HORIZONTAL DROP DOWN MENU */

#menu-mb { display: none; }
#menu { display: block; }

#menustrip {
	position: absolute;
	top: 155px;
	width: 100%;
	height: 23px;
	border-top: 2px solid #d1c000;
	background-color: #09164d;	
}

#menu {
position: relative;
width: 800px;
height: 30px;
padding-left: 300px;
margin: 0 auto;
background-color: transparent;
z-index: 20;
	
}



#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}

#menu ul ul {
padding-top: 5px;
padding-bottom: 5px;
margin-top: -5px;
-moz-border-radius-bottomleft: 7px 7px;
border-bottom-left-radius:  7px 7px;
-moz-border-radius-bottomright: 7px 7px;
border-bottom-right-radius:  7px 7px;
background-color: #09164d;	
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
opacity:0.70;
}

/*  COLOURING ETC */

#menu a {
text-decoration: none;
display: block;
}


#menu h2, #menu h3 {
margin: 0;
}

#menu h2 a, #menu h3 a {
	display: block;
	font-size: 9pt;
	line-height: 12pt;
	margin: 0;
	padding: 4px 6px;
	color: #ffffff;
	text-decoration: none;
	text-transform: lowercase;
	font-weight: normal;
}

#menu h2 a {
background-color: #09164d;	
-moz-border-radius-bottomleft: 7px 7px;
border-bottom-left-radius:  7px 7px;
-moz-border-radius-bottomright: 7px 7px;
border-bottom-right-radius:  7px 7px;
border: 5px solid #09164d;
border-top: 0;
}


#menu h3 a {

}

#menu h2 a:hover, #menu h2 .down {
	color: #ffffff;
	text-decoration: none;
	background-color: #d1c000;
	border: 5px solid #09164d;
	border-top: 0;
}


#menu h3 a:hover, #menu h3 .down {
	color: #d1c000;
	text-decoration: none;

}


/*   -------- positioning the SUBMENUS --------------

The position: relative; on the <li> elements establish containing blocks for the descendant <ul> elements.

All secondary levels and deeper are given position: absolute; and a high z-index in order to make them appear, drop down above following content. the third level and deeper lists are the ones we want to move so "offset" positioning co-ordinates only required to be input onto them.
*/

#menu li {
position: relative; }

#menu ul ul {
position: absolute;
z-index: 500;
width: 120px;
}

#menu ul ul li {
margin: 0;
}

#menu ul ul ul {
top: 0;
left: 98%;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
margin-top: -7px;
}

/*   -------- HIDING AND REVEALING --------------*/

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}




/*-------------- MOBILE --------------------- */


@media only screen and (max-width: 900px)  { 
#menu-mb { display: block; }
#menu { display: none; }
#menustrip { display: none; }


}


#menu-mb {
	position: absolute;
	width: 208px;
	left: 28px;
	top: 135px;
	z-index: 500;
	}

#menu-mb ul.accordion {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	overflow: hidden;

}
#menu-mb ul ul {
	margin:15px;
	margin-top: 0;
		margin-right: 0;

	padding: 20px 0 10px 0;
	z-index: 500;
	background-color: #1272AF;
}
#menu-mb ul ul ul {
	margin: 0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	margin-bottom: -5px;
	padding: 0;
	margin-top: 10px;
	padding-left: 30px;
}


#menu-mb a {
	display: block; 
	margin:0; 
	padding:0;
}

#menu-mb li {
  float: left;
  color: #ffffff;
  padding: 0;
  margin: 0;
   list-style-type: none;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;



}
#menu-mb li li a { display: inline !important;   }
#menu-mb li li a.more { 
background-image: url('../elements/more.png');
background-repeat: no-repeat;
position: relative;
float: right;
width: 20px;
right: 15px;
top: 4px;
padding: 0;
 }
 
#menu-mb li li a.more.open { 
background-image: url('../elements/more2.png');
}

#menu-mb img {
	width: 30px;
	height: 30px;	
}
#menu-mb li a.heading1 { 
	text-align: right;
	padding-bottom: 16px;
	padding-top: 0px;
	margin-top: -10px;

	 }

#menu-mb li li {
	float: none;
	border-bottom: 1px solid #fff;
}
#menu-mb li li.last {
	border-bottom: none;
}


#menu-mb li a {
  color: #ffffff;
  font-size: 10pt;
  line-height:14pt;
  text-transform: lowercase;
   text-decoration: none;
  margin: 0;
  font-weight: 300;
  padding: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
}

#menu-mb li li li {
	float: none;
	border-bottom: none;
	padding: 4px 0;
}
#menu-mb li li li a {
	padding: 5px;
	padding-left: 0px;
	font-size: 9pt;
	line-height: 10pt;
}
#menu-mb li li li li a {
	padding-left: 70px;
}

#menu-mb li li:hover {
		 background-color: #69C4F0;
}
#menu-mb li li li:hover {
	background-color: #1272AF;
}

#menu-mb li li a:hover  {
		color: #20295D;
}
#menu-mb li a.down{
		font-weight: bold;
}