/*--- Styles for menu dropdown ---*/
.sf-menu,.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-menu {
  line-height: 1.0;
}
.sf-menu ul {
  position: absolute;
  top: -999em;
  width: 190px; /* left offset of submenus need to match (see below) */
  z-index:101;
}
.sf-menu ul li {
  width: 100%;
}
.sf-menu li:hover {
  visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
  float: left;
  position: relative;
}
.sf-menu a {
  display: block;
  position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
  left: 0;
  top: 32px; /* match top ul list item height */
  z-index: 102;
}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {
  top: -999em;
}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {
  left: 190px; /* match ul width */
  top: 0;
}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {
  top: -999em;
}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {
  left: 190px; /* match ul width */
  top: 0;
}

.sf-menu {
  float: left;
}

.sf-menu a {
  font-size: 1.1em;
}

.sf-menu a,
.sf-menu a:hover,
.sf-menu a:active,
.sf-menu a:focus {
  text-decoration: none;
}

/* top level menu */
.sf-menu li.first-level {
  margin: 0 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
}
.sf-menu li.first-level a span.menu-left {  /* left hand side of button */
  float: left;
  display: block;
  padding-right: 12px;
  margin-top: -8px;
  height: 32px;
}
.sf-menu li.first-level a {  /* right hand side of button */
  padding: 8px 12px 8px 0;
}

/* normal hover */
.sf-menu li.first-level a:hover {
  color: #fff;
  background: #fff url(/images/menu-bg-no-dropdown.gif) no-repeat right 0px;
}

.sf-menu li.first-level a:hover span.menu-left {
  background: #fff url(/images/menu-bg-no-dropdown.gif) no-repeat left 0px;
}

/* active state */
.sf-menu li.active-trail a.active {
  color: #27333a;
  background: #fff url(/images/menu-bg.gif) no-repeat right -64px;
}
.sf-menu li.active-trail a.active span.menu-left {
  background: #fff url(/images/menu-bg.gif) no-repeat left -64px;
}

  /* with submenu hover */
.sf-menu li.first-level a.aHover,
.sf-menu li.first-level a.aHover:hover {
  color: #fff;
  background: #fff url(/images/menu-bg.gif) no-repeat right -32px;
}
.sf-menu li.first-level a.aHover span.menu-left,
.sf-menu li.first-level a.aHover:hover  span.menu-left {
  background: #fff url(/images/menu-bg.gif) no-repeat left -32px;
}
.sf-menu li.first-level.expanded > a:hover {
  color: #fff;
  background: #fff url(/images/menu-bg.gif) no-repeat right -32px;
}
.sf-menu li.first-level.expanded > a:hover span.menu-left {
  background: #fff url(/images/menu-bg.gif) no-repeat left -32px;
}


/* sublevel */
.sf-menu ul {
  background: transparent url(/images/menu-dropdown-bg.png) no-repeat center bottom;
  border-top: 6px solid #27333a;
  padding: 0 0 18px 0;
  margin: 0;
}
.sf-menu ul ul {
  margin: -6px 0 0 0;   /* so that top of sub sub menu align with the parent minus the top border*/
}

.sf-menu li.sublevel {
  margin: 0;
  padding: 0;
  height: 32px;
  font-size: 14px;
  list-style: none;
}
.sf-menu li.sublevel a {
  padding: 0 12px;
  white-space: nowrap;
  display: block;
  position: relative;
  line-height: 32px;
  height: 32px;
  overflow: hidden;
  color: #ccc;
}

  /* hover */
.sf-menu li.sublevel a:focus,
.sf-menu li.sublevel a:hover,
.sf-menu li.sublevel a:active,
.sf-menu li.sublevel:hover {
  background: #cde3f1;
  outline: 0;
  color: #27333a;
}
  /* highlight the parent li */
.sf-submenu li.sfHover a.aHover,
.sf-submenu li.sfHover a.aHover:hover {
  background: #cde3f1;
  outline: 0;
  color: #27333a;
}
.sf-submenu li.sfHover > a {    /* does not work in ie6 */
  background: #cde3f1;
  outline: 0;
  color: #27333a;
}
/* active state */
.sf-submenu li.active-trail a.active {
  background: #cde3f1;
  color: #27333a;
}

/*--- arrows ---*/
/* for top level menu */
.sf-menu li.first-level .sf-sub-indicator {
  display: none;
}
/* for other level menu */
.sf-submenu li.sublevel .sf-sub-indicator {
  position: absolute;
  display: block;
  right: .75em;
  top: 12px;
  width: 10px;
  height: 10px;
  text-indent: -999em;
  overflow: hidden;
  background: transparent url(/images/arrows-fff.png) no-repeat -10px 0px;
}