/*** ESSENTIAL STYLES ***/
.sf-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-menu {
  line-height: 1.0;
  text-transform: uppercase;
}
.sf-menu ul {
  position: absolute;
  top: -999em;
  width: 340px;
}

.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: 2.5em;
  z-index: 99;
}
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: 224px;
  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: 224px;
  top: 0;
}

/*** VERTICAL ***/
.sf-vertical, .sf-vertical li {
  width: 223px;
}
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
  left: 224px; /* match ul width */
  top: -6px;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; }
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; }



/*** DEMO SKIN ***/
.sf-menu {
  float: left;
  margin-bottom: 1em;
}
.sf-menu a {
  background-color: #ffffff;
  border-top: 1px solid #cccccc;
  padding: 6px 19px 6px 24px;
  text-decoration: none;
}

.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active {
  background: #f2f2f2;
  color: #ff3b04;
  outline: 0;
}


/*** arrows **/

.sf-sub-indicator {
  position: absolute;
  display: block;
  right: 6px;
  top: 1.05em; /* IE6 only */
  width: 10px;
  height: 10px;
  text-indent: -999em;
  overflow: hidden;
  background: url(../images/arrows.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
  top: .6em;
  background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
  background-color: transparent !important;
  background: url(../images/gray-60.png) !important;
  margin: 0;
  padding: 6px 6px 6px 6px;
  width: 340px;
}
.sf-shadow ul.sf-shadow-off {
  background: transparent;
}

.sf-submenu,
.sf-submenu li {
  width: 340px !important;
}

.sf-menu a.current {
  color: #ff0000;
}

.sf-selected:hover,
.sf-selected li:hover,
.sf-selected span:hover,
.sf-selected span a:hover,
.sf-selected a:hover {
  background-color: #ffffff !important;
}