/* Based on http://www.seoconsultants.com/css/menus/tutorial/ */

/* Get rid of default bullets for all lists, set background */
ul.menu, ul.menu ul {
  list-style-type: none;
  margin: 0;
  z-index: 0;
}

/* Define a common style for all menu elements */
ul.menu li {
  /* Padding and margin must be set to 0 for proper cascading positioning */
  padding: 0;
  margin: 0;
  width: auto;
}

/* Top level menu elements flow horizontally from left to right */
ul.menu li {
  position: relative;
  float: left;
  text-align: center;
  margin: 0 2px;
  background-color: #ccc;
  border: solid #fff 1px;
}

ul.menu li.version {
	background-color: transparent;
	border: 0;
}

ul.menu li:hover {
  background-color: #e14b0b;
}

/* First level elements flow normally (ie. vertically) */
ul.menu li ul li {
  float: none;
  text-align: left;
  margin: 0;
  margin-top: -1px;
  background-color: #aaa;
  border: solid #ccc 1px;
  min-width: 100px;
}
ul.menu li ul li:hover {
  background-color: #e87400;
}

/* These are contained by 'ul.menu li' which are position: relative */
ul.menu ul {
  position: absolute;
  padding: 0;
  margin-top: 1px;
  margin-left: -1px;
  z-index: 2;
}

/* Tweak link styles in menu items */
ul.menu a {
  color: white;
  font-weight: bold;
  text-decoration: none;

  display: block;
  padding: 4px;
  margin: 0px;
  white-space: nowrap;
}

/* Magic to display first-level items when hovering on top-levels */
ul.menu li ul {
  display: none;
}
ul.menu li:hover ul {
  display: block;
}