/* topnav drop menu styles
** the styles will require tweaking for each implementation
**
** The following must be defined on the main stylesheet:
** #topnav
** ul, ul.submenu li, a and a:hover (if required) 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 {

  /* <A> styling inherited by all topnavs */
  display: block;
}

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

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

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

}

#topnav li {

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

#topnav ul.submenu li {

  /* second level <LI> styling */
  margin: 0;
  line-height: 2em;
  padding: 0;
  width: 12em;

  text-align: left;


  display: block;
  color: black;
  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 */

  margin: 0;
  padding: 0;
  list-style-type: none;
}

#topnav li ul.submenu {

  /* second level <UL> styling */
  position: absolute;

  left: -999em;

  width: 12em;

	height: auto;

  margin: 0 0 0 -10px;

  padding: 0 0 0 0;
  background: #005d83;
  border-top: 1px solid white;
}

#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: white;
}

#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: white;

}


#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;
}


/************ left nav - expands vertically *******************/

#leftnav a {

  /* <A> styling inherited by all topnavs */
  display: block;
}

#leftnav ul.topmenu li a:hover {
  color: white;
  text-decoration: underline;
}

#leftnav ul.topmenu li li a:hover {
  /* hover style */
  color: black;
  text-decoration: underline;
}

#leftnav ul.topmenu li li a {
  /* <A> styling for second level onwards */
  color: black;
  font-weight: bold;
  text-decoration: none;
  margin: 0;
  padding:0 0 0 5px;
  display: block;
}

#leftnav ul.topmenu li li a:hover {
  background: #dddddd;
  text-decoration: none;
}

#leftnav li.leftnavhilight { /* called from the javascript to highlight the current item */
  background: #dddddd;
}

#leftnav ul.topmenu li li li a {
  /* <a> third level styling */
  color: #666666;
  font-weight: normal;
  margin: 0;
  padding: 0 0 0 10px;
}

#leftnav li {

  /* styling for level 1 <LI> */
  float: left; /* usually need to leave this in */
  display: block;
}

#leftnav ul.submenu li, #leftnav ul.submenuopen li {

  /* second level <LI> styling */
  padding: 0;
  margin: 0;
  line-height: 2em;

  font-size: 0.85em;
  width: 100px;

  display: block;
  color: black;
  font-weight: bold;
}

#leftnav ul ul ul.submenu li, #leftnav ul ul ul.submenuopen li {
  /* third level <li> styling */
  padding: 0;
  margin: 0;
  line-height: 1.5em;
  font-size: 85%;
  display: block;
  color: #666666;
  font-weight: normal;
}


#leftnav ul.topmenu {
  /* top level <UL> styling */
  /*width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
*/
}

#leftnav li ul.submenu, #leftnav li ul.submenuopen {

  /* second level <UL> styling */
  /*position: absolute;

*/
  display: none;

  width: 100px;

	height: auto;

  margin: 0;

  padding: 0;
  background: white;
  border: 1px solid #00283B;
  float: left;
}

#leftnav li ul.submenuopen {
  display: block;

}

#leftnav li li ul.submenu, #leftnav li li ul.submenuopen {
  /* third level <ul> styling */
  display: none;
  width: 97px;
  height: auto;
  margin: 0;
  padding: 0;
  background: white;
  border: none;
  float: left;
}

#leftnav li li ul.submenuopen {
  display: block;
}


/*#leftnav li:hover ul , #leftnav li.ieHover ul {

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

  /* change this to a click action js */
  /*display: block;

*/
/*}
*/

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

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

}

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

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

}