/***  ESSENTIAL  STYLES  ***/
.sf-menu,
.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-menu {
  line-height: 1.0;
  position: relative; 
  z-index: 100;
}

.sf-menu ul {
  position: absolute;
  top: -999em;
  width: 15em;  /*  left  offset  of  submenus  need  to  match  (see  below)  */
  z-index: 100 ;
}

.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: 3.2em;  /*  match  top  ul  list  item  height  */
}

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: 14em;  /*  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: 14em;  /*  match  ul  width  */
  bottom: 10em;
  top: 0;
}

/***  DEMO  SKIN  ***/
.sf-menu  {
  float: left;
  padding-left: 15px;
  margin-bottom: 0;
  margin-right: -1em;
}

.sf-menu  a  {
  padding: 0.8em 1.0em;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 14px;
}

.sf-menu a,
.sf-menu a:visited  {  /*  visited  pseudo  selector  so  IE6  applies  text  colour*/
  color: #BBB;
  text-decoration: none;
}
.sf-menu li ul {
  background: #00111d;
}

.sf-menu li li {
  border-top: 1px solid #444444;
}

.sf-menu  li:hover,
.sf-menu  li.sfHover,
.sf-menu  a:focus,
.sf-menu  a:hover,
.sf-menu  a:active  {
  color: #FFF;  
  outline:  0;
}

.sf-menu  li  li:hover,
.sf-menu  li  li.sfHover,
.sf-menu  li  li  a:focus,
.sf-menu  li  li  a:hover,
.sf-menu  li  li  a:active  {
  color: #FFF;  
  outline: 0;
}

.sf-menu  li  ul  {
  border: 1px solid #062439;
  border-bottom: 0px solid #ccc;  
  border-top: none;
}
  
.sf-menu  li  ul  li  ul  {
  border:  1px  solid  #062439;
  border-bottom:  0px  solid  #ccc;  
  border-top:none;
}

.sf-menu li.current a {
  font-weight:bold;
}

/***  arrows  **/
.sf-menu  a.sf-with-ul  {
  padding-right:  2.25em;
  min-width:  1px;  /*  trigger  IE7  hasLayout  so  spans  position  accurately  */
}
.sf-sub-indicator  {
  position:  absolute;
  display:  block;
  right:  .75em;
  top:  1.3em;  /*  IE6  only  */
  width:  10px;
  height:  10px;
  text-indent:  -999em;
  overflow:  hidden;
}
a  >  .sf-sub-indicator  {  /*  give  all  except  IE6  the  correct  values  */
  top:  1.1em;
  background-position:  0  -100px;  /*  use  translucent  arrow  for  modern  browsers*/
}
/*  apply  hovers  to  modern  browsers  */
a:focus  >  .sf-sub-indicator,
a:hover  >  .sf-sub-indicator,
a:active  >  .sf-sub-indicator,
li:hover  >  a  >  .sf-sub-indicator,
li.sfHover  >  a  >  .sf-sub-indicator  {
  background-position:  -10px  -100px;  /*  arrow  hovers  for  modern  browsers*/
}

/*  point  right  for  anchors  in  subs  */
.sf-menu  ul  .sf-sub-indicator  {  background-position:  -10px  0;  }
.sf-menu  ul  a  >  .sf-sub-indicator  {  background-position:  0  0;  }
/*  apply  hovers  to  modern  browsers  */
.sf-menu  ul  a:focus  >  .sf-sub-indicator,
.sf-menu  ul  a:hover  >  .sf-sub-indicator,
.sf-menu  ul  a:active  >  .sf-sub-indicator,
.sf-menu  ul  li:hover  >  a  >  .sf-sub-indicator,
.sf-menu  ul  li.sfHover  >  a  >  .sf-sub-indicator  {
  background-position:  -10px  0;  /*  arrow  hovers  for  modern  browsers*/
}

/***  shadows  for  all  but  IE6  ***/
.sf-shadow  ul  {
  background:  url('../images/shadow.png')  no-repeat  bottom  right;
  padding:  0  8px  9px  0;
  -moz-border-radius-bottomleft:  17px;
  -moz-border-radius-topright:  17px;
  -webkit-border-top-right-radius:  17px;
  -webkit-border-bottom-left-radius:  17px;
  }
.sf-shadow  ul.sf-shadow-off  {
  background:  transparent;
  }
.sf-menu  li.current  a:link,  .sf-menu  li.current  a:visited,  .sf-menu  li.current  a:active  {
  color:#ffffff;
  }
