.sf-menu, .sf-menu *
{
   margin: 0;
   padding: 0;
   list-style: none;
}
.sf-menu /* MODIFIED LINE HEIGHT ONLY */
{
   line-height: 1.4;
}
.sf-menu ul
{
   position: absolute;
   top: -999em;
   width: 8em; /* left offset of submenus need to match (see below) */
}
.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: 0em;
   top: 2.5em; /* match top ul list item height */
   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: 5em; /* 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: 10em; /* match ul width */
   top: 0;
}

/** -------- Modify color of nav here  ------ **/
.sf-menu
{
   float: left;
}
.sf-menu a
{
   text-decoration: none;
}

.sf-menu a, .sf-menu a:visited
{
   /* visited pseudo selector so IE6 applies text colour*/
   /* Menu Font Color*/
   color: #999999 ;
}
.sf-menu a:hover
{
   color: #666666 ;   /*#987F4F;*/

}

.sf-menu li
{
}

.sf-menu li.current a
{
   color:#999999 ;      /*#5B4C2F;*/
}

.sf-menu li.current ul li a
{
   color: #999999 ;
}

.sf-menu li.current ul li a:hover
{
   color: #999999 ;
}

.sf-menu li li
{
}
.sf-menu li li li
{
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active
{
   outline: 0;
}


/** VERTICAL MENU HERE **/
/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li
{
   font-family:Century Gothic; /*Helvetica*/
   font-size:13px;
   width: 280px;
   text-transform:none;
   font-weight:normal;
}

.sf-vertical ul, .sf-vertical ul li
{
   margin-left:0px;
   width: 280px;
   text-transform:none;
}

/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul, .sf-vertical li.sfHover ul
{
   /*difference between 1 and 2 menu*/
   left: 8em; /* match ul width */
   top: 0;
  
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator
{
   background-position: -10px 0;
}
/* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator
{
   background-position: 0 0;
}
/* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator, .sf-vertical a:hover > .sf-sub-indicator, .sf-vertical a:active > .sf-sub-indicator, .sf-vertical li:hover > a > .sf-sub-indicator, .sf-vertical li.sfHover > a > .sf-sub-indicator
{
   background-position: -10px 0; /* arrow hovers for modern browsers*/
}