/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_4level.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.menu {
  height: 200px;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
  position:relative;
  z-index:500;
  padding:0;
  margin:0;
  list-style-type: none;
  width:152px;
}
/* style the list items */
.menu li {
  background: #fff;
  height: 26px;
  /* for IE7 */
  float: left;
}
.menu li.sub {
  background: #fff;} 

/* get rid of the table */
.menu table {
  position:absolute; 
  border-collapse:collapse; 
  top:0; 
  left:0; 
  z-index:100; 
  font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
  display: block; 
  text-decoration: none;
  height: 25px;
  line-height: 25px;
  width: 151px;
  color: #666;
  text-indent: 5px;
  border: 1px solid #ccc;

}

/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:152px; w\idth:151px;}

.menu ul li ul li a, .menu ul li ul li a:visited {
  width: 230px;
  border-left: 1px dotted #8d6a68;
}

/* hack for IE5.5 */
* html .menu ul li ul li a, * html .menu ul li ul li a:visited {width:230px; w\idth:229px;}


/* style the link hover */
* html .menu a:hover {
  color: #f60; 
  background: #eee; 
  position: relative;}

.menu li:hover {
  position: relative;
}

/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {
  color: #f60; 
  background: #eee;
}

/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color: #f60; background: #eee;}
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
  visibility: hidden;
  position: absolute;
  top: -30px;
/* set up the overlap (minus the overrun) */
  left: 122px;
/* set up the overrun area */
  padding: 30px;
/* this is for IE to make it interpret the overrrun padding */
  background:transparent url(transparent.gif);
}

/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}


/* for IE5.5 and IE6 you need to style each level hover */


/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
  visibility:visible;
}