/* ================================================================ 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_variable4.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
=================================================================== */
#nav {
  padding:0; 
  margin:0 auto; 
  list-style:none; 
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 12px; 
  position:relative; 
  z-index:200; 
  height:36px; 
  width:900px;
}
 
  #nav ul {
    padding:0; 
    margin:0; 
    list-style:none; 
    float:left; 
    background:#575757; 
    border-top:1px solid #ffffff; 
    border-color:#ffffff;
  }

    #nav li {
      float:left;
    }

      #nav li li {
        float:none; 
        border-left:1px solid #ffffff; 
        border-right:1px solid #ffffff;
      }
      
        #nav li li.last {
          border-bottom: 1px solid #ffffff;
        }

/* a hack for  IE6 */
* html #nav li li {
  float:left;
}

#nav li a {
  font-family: "Trebuchet MS", Arial, sans-serif;
  display:block; 
  float:left; 
  color:#fff; 
  height:34px;  
  padding:0 8px 0 10px;
  line-height:34px; 
  text-decoration:none; 
  white-space:nowrap; 
  font-weight:bold;
}

  #nav li a.active {
    background:url(../images/layout/menu-active.gif) left bottom repeat-x;
    border-left: 1px solid #212121;
    border-right: 1px solid #212121;
  }

  #nav li li a {
    display:block;
    font-size: 11px;
    height:20px; 
    line-height:20px; 
    float:none; 
    padding:3px 19px 3px 7px; 
    font-weight:normal; 
  }
    
    #nav li li a.fly {
      background: url(../images/layout/menu-fly.gif) no-repeat right center;
    }   

  #nav li:hover {
    position:relative; 
    z-index:300;
    background:url(../images/layout/menu-active.gif) left bottom repeat-x;
  }
  
  #nav li.cssplay_hover {
    position:relative; 
    z-index:300;
  }
  
  #nav li.cssplay_hover a {
    color:#fff;
  }
  
    #nav li li a {
      color:#fff;
    }

      #nav li li.cssplay_hover a {
        color:#fff; 
        background-color:red;
      }

  #nav li:hover ul {
    left:0; 
    top:33px; 
    z-index:500;
  }

    #nav li.cssplay_hover ul {
      left:0; 
      top:33px; 
      z-index:500;
    }

#nav ul {
  position:absolute; 
  left:-9999px; 
  top:-9999px;
}

* html #nav ul {
  width:2px;
}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {
  left:-5px; 
  margin-left:100%; 
  top:-1px; 
  z-index:500;
}

/* keep further levels hidden */
#nav li:hover > ul ul {
  position:absolute; 
  left:-9999px; 
  top:-9999px; 
  width:auto; 
}

/* show path followed */
#nav li:hover > a {
  color:#ffffff;
}

  #nav li li:hover > a {
    color:#ffffff;
    background-color:#383838;
  }

/* but IE5.x and IE6 need this lot to style the flyouts*/
#nav li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a
{color:#fff; background-color:#383838;}

#nav li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a
{color:#fff; background-color:#575757;}

/* show next level */
#nav li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul
{left:100%; margin-left:-5px; top:-1px;}

/* keep further levels hidden */
#nav li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
