#nav {
  height:       50px;                                       /* Height of BLOCK */
  margin-left:  23%;
  width:        60%;                                     /* Width of BLOCK. MUST change "Resize" AND "TableStart" in include_js.js if ALTERED*
  list-style:   none;                                       /* NEEDED: Shows background apparently! */
  background:   rgb(240,240,255);                         /* Background colour of this BLOCK */
  font-family:  "courier new", courier, monospace;          /* Monospace for accurate spacing */
}

#nav li.top {display:block; float:left; border: 1px solid rgb(110, 106, 111); font-weight:bold; font-size:1.2em; padding: 0.8vh 0.6vw 0.8vh 0.6vw; background: rgb(25, 25, 112);}

#nav li a.top_link {
  display:block; 
  float:left;  
  color: rgb(255,255,0); 
  text-decoration: none;                                    /* Needed - otherwise puts a line under as a web ref */
  cursor:pointer; 
  background: rgb(25, 25, 112);
}


#nav li a.top_link span
#nav li a.top_link span.down

#nav li a.top_link:hover {color: rgb(255,255,255);}
#nav li a.top_link:hover span {color: rgb(255,255,255);  background: rgb(25, 25, 112);}
#nav li a.top_link:hover span.down {background: rgb(25, 25, 112);}

#nav li:hover > a.top_link {color: rgb(255,255,255);}
#nav li:hover > a.top_link span {color: rgb(255,255,255);  background: rgb(25, 25, 112);}
#nav li:hover > a.top_link span.down {background: rgb(25, 25, 112); }



/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */

#nav ul, 

#nav li:hover ul ul,

#nav li:hover ul li:hover ul ul,

#nav li:hover ul li:hover ul li:hover ul ul,
h
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul.sub
{left:0; top:3vh; background: rgb(240,240,255); padding:3px ; border:1px solid rgb(25, 25, 112); white-space:nowrap; width:180px; height:auto; z-index:300;}

#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:180px; font-weight:normal;}

#nav li:hover ul.sub li a
{display:block; font-size:14px; height:20px; width:hpx; line-height:20px; text-indent:5px; color: rgb(45, 26, 11); text-decoration:none; font-weight:bold;}

#nav li ul.sub li a.fly
{background: rgb(245, 238, 225) url('http://www.mopeks.org/images/arrow.gif') 99px 7px no-repeat; font-weight:bold;}

#nav li:hover ul.sub li a:hover 
{background: rgb(45, 26, 11); color:rgb(255,255,255);}

#nav li:hover ul.sub li a.fly:hover
{background: rgb(45, 26, 11) url('http://www.mopeks.org/images/arrow_over.gif') 99px 7px no-repeat; color:rgb(255,255,255); font-weight:bold;}

#nav li:hover ul li:hover > a.fly {background: rgb(45, 26, 11) url('http://www.mopeks.org/images/arrow_over.gif') 99px 7px no-repeat; color: rgb(45, 26, 11);    width:275px}

#nav li:hover ul li:hover ul,

#nav li:hover ul li:hover ul li:hover ul,

#nav li:hover ul li:hover ul li:hover ul li:hover ul,

#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: rgb(245, 238, 225); padding:3px; border:1px solid rgb(45, 26, 11); white-space:nowrap; width:275px; z-index:400; height:auto;}