/* step 1: basic lay-out of all the items */

a.button {
  display: block;
  width: 113px;
  height: 21px;
  background: url('/external/includes/buttons.jpeg') 0 0;
  color: white;
  margin-bottom: 7px;
  font-weight: bold;
  padding-top: 3px;
  text-align: center;
}

#header a.button {
  margin-bottom: 3px;
}

a.button:hover, li.sfhover>a.button {
  background: url('/external/includes/buttons.jpeg') 0 40px;
  text-decoration: none;
}

#menulist {
  text-align: left;
}

#menulist li {
  position: relative;
}

#menulist, #menulist li ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#menulist a {
  font-variant: normal
}

#menulist li ul {
  position: absolute;
  width: 160px;
}
  
#sidebar #menulist li ul, #header #menulist li ul ul {
  margin-top: -30px;
  margin-left: 113px;
}

#header #menulist li ul {
  margin-top: 0px;
}

#menulist li ul a {
  background-color: #7289a0;
  color: #eeeeee;
  background-image: none;
  border-color: #7289a0;
  border-style: outset;
  border-width: 1px;
  padding: 2px 0px;
  display: block;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-weight: bold;
  min-height: 18px;
  width: 160px;
  overflow: visible;
}

#menulist li ul a span {
  padding-left: 5px;
  padding-right: 5px;
}

#menulist li ul a.supermenu {
  background-image: url(/external/images/discworld_l.gif);
  background-repeat: no-repeat;
  background-position: right;
}

#menulist li ul a:hover, li ul a:active, #menulist li li.sfhover>a { 
  background-color: #fb7e0b;
  color: #444444;
  border-color: #cccccc;
  border-style: inset;
  text-decoration: none;
}

#sidebar #menulist li ul ul {
  position: absolute;
  margin-left: 160px;
  margin-top: -24px;
}
#header #menulist li ul ul {
  position: absolute;
  margin-left: 160px;
  margin-top: -24px;
}

#header #menulist {
  padding-top: 35px;
}

/* step 2: fix for internet explorer, make the LIs float, while the UL is so small floating won't actually happen */

#sidebar #menulist {
  width: 113px;
}

#menulist li {
  float: left;
  width: 113px;
}

/* step 3: rollout functionality */

#menulist li ul {
  left: -999em;
}

#menulist li:hover ul, #menulist li.sfhover ul {
  left: auto;
}

#menulist li:hover ul ul, #menulist li.sfhover ul ul {
  left: -999em;
}

#menulist li li:hover ul, #menulist li li.sfhover ul {
  left: auto;
}