/* Put only .cssmenu items in this CSS */
.cssmenu,
.cssmenu ul,
.cssmenu li,
.cssmenu span,
.cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
.cssmenu {
  line-height: 1;
  background-color: #015b99; /*if no img */
  background-image:url(../gfx/button40B.png);background-position:center;background-repeat:repeat-x;
  border-bottom: 4px solid #fbae3d;
  width: 100%;
  float:left;
  z-index:1; /* menus drop -over- the body text */
}
/*
 Clearing float so that the menu has non zero height; 'after' insists on having content so we provide a null value. 
 Without this the height becomes zero ( and bottom border goes to the 'top' ) because we have floated the content - this dummy item forces the height. 
*/
.cssmenu:after {
  content: '';
  display: block;
  clear: both;
}

.cssmenu li {
  list-style: none;
}
.cssmenu a {
  display: block;  
  background-color: #015b99;/* if no image */
  background-image:url(../gfx/button40B.png);background-position:center;background-repeat:repeat-x;
  color: #ffffff;
  font-family: Verdana,Helvetica, Arial, sans-serif;
  font-size:small;
  padding: 10px;
  text-decoration: none;
}
/* add indication that there is a sub menu  -- assumes the  "li a span " structure of each entry also applies to lower menus */
.cssmenu .has-sub > a > span:after { 
  content: ' >';
}
.cssmenu > ul > li {
  display: block;/* first level li are horizontal */
  float: left;
}

.cssmenu li:hover > a { /* all levels */
  color: #ffffff;
  background-color: #fbae3d; /* used if image fails */  
  background-image:url(../gfx/button40.png);background-position:center;background-repeat:repeat-x;

}

.cssmenu li:hover > ul { /* expose the sub menu */
  display: block;
}
.cssmenu li ul { /* any sub menu - pull to front of siblings in upper list */
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
  z-index:2;
}
.cssmenu li ul ul { /* third level */
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
.cssmenu li li li a { /* thrid level */
  border-bottom: 1px dotted #000000;
}

/* 
  GW flag menugroup if in page of that menu group 
  colour change of anchor same as hover 
  */ 
.mgp-home    #mgp-home    > a, 
.mgp-about   #mgp-about   > a, 
.mgp-helpyou #mgp-helpyou > a, 
.mgp-helpus  #mgp-helpus  > a, 
.mgp-news    #mgp-news    > a, 
.mgp-employ  #mgp-employ  > a, 
.mgp-contact #mgp-contact > a,
.mgp-login   #mgp-login   > a 
{ color: #ffffff;
  background-image:url(../gfx/button40.png);background-position:center;background-repeat:repeat-x;
  /*background: #fbae3d;*/
} 


@media only screen and (max-width: 40em ) {
/* border on detail menu items if on mobile as blue overlaps rest of screen  */
.cssmenu > ul > li > ul, 
.cssmenu > ul > li > ul > li, 
.cssmenu > ul > li > ul > li > ul > li
{ border-left: 1px solid #fbae3d; 
  border-right: 1px solid #fbae3d; 
  border-bottom: 1px solid #fbae3d; 
}

} /* media 40em*/