/* adding sf-vertical class in addition to sf-menu creates a vertical menu */
/* eg. <ul class="sf-menu sf-vertical"> ... */
.sf-vertical {
  /*
    width: 12em;
  */
  /* If you want the width of the closed menu to expand to its
    widest top-level menu item (like its "Supersubs" submenus do),
    replace the width rule above with the following two rules. */
  min-width: 12em;
  *width: 12em;
  top: 1px;
  width: 98%; }

.nav-menu .sf-vertical ul {
  box-shadow: none;
  left: 100%;
  top: -1px; }

.sf-vertical li {
  float: none; }

.nav-menu .sf-vertical li {
  background: #f4f4f4;
  margin-top: -1px;
  padding: 4px 0px 6px 4px;
  margin-right: -1px;
  border: #c0c0c0 1px solid;
  width: 100%; }

.nav-menu .sf-vertical li:hover,
.nav-menu .sf-vertical li.sfHover {
  color: #A80E29;
  background: #d0d0d0;
  /* only transition out, not in */
  -webkit-transition: none;
  transition: none; }

/* styling for both css and generated arrows */
.nav-menu .sf-arrows .sf-with-ul:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.4em;
  margin-top: -3px;
  height: 0;
  width: 0;
  /* order of following 3 rules important for fallbacks to work */
  border: 5px solid transparent;
  border-top-color: #999999;
  /* edit this to suit design (no rgba in IE8) */
  border-top-color: #999999; }

.nav_menu .sf-arrows > li > .sf-with-ul:focus:after,
.nav-menu .sf-arrows > li:hover > .sf-with-ul:after,
.nav-menu .sf-arrows > .sfHover > .sf-with-ul:after {
  border-top-color: #999999;
  /* IE8 fallback colour */ }

/* styling for right-facing arrows */
.nav-menu .sf-arrows ul .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -3px;
  border-color: transparent;
  border-left-color: #999999;
  /* edit this to suit design (no rgba in IE8) */
  border-left-color: #999999; }

.nav-menu .sf-arrows ul li > .sf-with-ul:focus:after,
.nav-menu .sf-arrows ul li:hover > .sf-with-ul:after,
.nav-menu .sf-arrows ul .sfHover > .sf-with-ul:after {
  border-left-color: #999999; }

/*** alter arrow directions ***/
.nav-menu .sf-vertical.sf-arrows > li > .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -0.5em;
  border-color: transparent;
  border-left-color: #999999;
  /* edit this to suit design (no rgba in IE8) */
  border-left-color: #999999; }

.nav-menu .sf-vertical.sf-arrows li > .sf-with-ul:focus:after,
.nav-menu .sf-vertical.sf-arrows li:hover > .sf-with-ul:after,
.nav-menu .sf-vertical.sf-arrows .sfHover > .sf-with-ul:after {
  border-left-color: #999999; }