/* Itheon */


/* topnav drop menu styles
** the styles will require tweaking for each implementation
**
** The following styles must be defined on the main stylesheet:
** #topnav
** ul, ul.submenu li, a and a:hover, a:active etc (if required) styles for #topnav
**
** an example (assumes font-size is 1em in the body tag):
** #topnav ul.topmenu      { margin: 0; padding: 0; list-style-type: none; font-size: 0.75em; color: white; font-weight: bold; line-height: 22px; display: block;}
** #topnav ul.submenu      { font-size: 100%; }
** #topnav ul.topmenu li   { display: inline; border-right: 1px solid white; padding: 0 10px 0 10px; }
** #topnav li a            { color: white; text-decoration: none; display: block;}
** #topnav li a:hover      { color: #ff9900; text-decoration: none; }
**
** The following code needs to be inserted in the template to enable the drop downs to work in ie6:
**
** <script type="text/javascript" language="JavaScript">
** <!-- //
**  // script to deal with the drop downs in IE
**  // adapted from sucker fish drop downs
**  ieHover = function() {
**  var theLis = document.getElementById("topnav").getElementsByTagName("li");
**  for (var i=0; i<theLis.length; i++) {
**      theLis[i].onmouseover=function() {
**      this.className+=" ieHover";
**    }
**    theLis[i].onmouseout=function() {
**      this.className=this.className.replace(new RegExp(" ieHover\\b"), "");
**    }
**  }
**}
**if (window.attachEvent) window.attachEvent("onload", ieHover);
** // -->
** </script>
**
*/


#topnav a {

  /* top level <a> styling */
  display: block;
}

#topnav ul.topmenu li a:hover {
  color: #ff9900;
}

#topnav ul.topmenu li li a:hover {
  /* hover style */
  color: #ff9900;
  background-color: #001384;
}

#topnav li li a {
  /* <A> styling for second level onwards */
  color: white;
  text-decoration: none;
  margin-top: 7px;
  padding: 0 0 0 10px;
  display: block;

}

#topnav li {

  /* styling for level 1 <LI> */
  float: left; /* leave this in */
 }

#topnav ul.topmenu ul.submenu li {

  /* second level <LI> styling */
  margin: 0;
  line-height: 1.3em;
  padding: 0;
  width: 14em;
  background: none;
  text-align: left;
  display: block;
  color: white;
  font-weight: normal;
  border: none;
}

#topnav li li li {

  /* third level <LI> styling */
}

#topnav li li li {
  /* fourth level <LI> styling */
}

#topnav ul.topmenu {
  /* top level <UL> styling */

  /* defined on main stylesheet */
}

#topnav li ul.submenu {

  /* second level <UL> styling */
  position: absolute;
  left: -999em;
  width: 14em;
  height: auto;
  margin: 0;
  padding: 10px;
  background: #001384;
  border-left: 1px solid white;
  border-top: none;
  border-right: 1px solid black;
  border-bottom: 1px solid black;

}

#topnav li:hover ul , #topnav li.ieHover ul {

  /* show the second level topnav when user hovers over first level li */

  left: auto;

}

#topnav li li:hover ul , #topnav li li.ieHover ul  {
  /* show the third level topnav when the user hovers over the second level li */
  left: auto;
}



#topnav li:hover a, #topnav li.ieHover a {
  /* hover styling for level 1 <A> */
  color: #ffffff;
}

#topnav li:hover li a, #topnav li.ieHover li a {
  /* prevent all <A> tags highlighting when top level highlighted only use if a tags on top levels with dropdowns*/

}

#topnav li li:hover a, #topnav li li.ieHover a {

 /* hover styling for level 2 <A> */
 color: #ff9900;

}


#topnav li li:hover li a, #topnav li li.ieHover li a {
  /* prevent all <A> tags highlighting when second level highlighted */
  color: black;
}

#topnav li li li:hover a, #topnav li li li.ieHover a {
  /* hover styling for level 3 <A> */
  color: white;
}

#topnav li li li:hover li a, #topnav li li li.ieHover li a {
  /* prevent all <A> tags highlighting when third level highlighted */
  color: black;
}

#topnav li li li li:hover a, #topnav li li li li.ieHover a {
  /* hover styling for level 4 <A> */
  color: white;
}