$menu_color: #cccccc
$menu_down_color: white
$txt_color: #333333
$txt_color_hover: grey
$hover1_color: #4C4C4C
$hover2_color: #eff3fb
$top_border_selected: yellow
toto
  color: #333333
/*** ESSENTIAL STYLES **
#menu
  .sf-menu
    margin: 0
    padding: 0
    list-style: none
    *
      margin: 0
      padding: 0
      list-style: none
    line-height: 1.0
    ul
      position: absolute
      top: -999em
      width: 10em
      /* left offset of submenus need to match (see below)
      li
        width: 100%
    li
      &:hover
        visibility: inherit
        /* fixes IE7 'sticky bug'
      float: left
      position: relative
    a
      display: block
      position: relative
      color: #CCCCCC
    li
      &:hover ul, &.sfHover ul
        left: 0
        top: 2.45em
        /* match top ul list item height
        z-index: 99

  ul.sf-menu li
    &:hover li ul, &.sfHover li ul
      top: -999em
    li
      &:hover ul, &.sfHover ul
        left: 10em
        /* match ul width
        top: 0
      &:hover li ul, &.sfHover li ul
        top: -999em
      li
        &:hover ul, &.sfHover ul
          left: 10em
          /* match ul width
          top: 0

  /*** DEMO SKIN **


  /*** arrows *

  .sf-sub-indicator
    position: absolute
    display: block
    right: .75em
    top: 1.05em
    /* IE6 only
    width: 10px
    height: 10px
    text-indent: -999em
    overflow: hidden
    background: url('/images/superfish/arrows-ffffff.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: .8em
      background-position: 0 -100px
      /* use translucent arrow for modern browsers
    &:focus > .sf-sub-indicator, &:hover > .sf-sub-indicator, &:active > .sf-sub-indicator
      background-position: -10px -100px
      /* arrow hovers for modern browsers

  /* apply hovers to modern browsers

  li
    &:hover > a > .sf-sub-indicator, &.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
    a
      > .sf-sub-indicator
        background-position: 0 0
      &:focus > .sf-sub-indicator, &:hover > .sf-sub-indicator, &:active > .sf-sub-indicator
        background-position: -10px 0
        /* arrow hovers for modern browsers
    li
      &:hover > a > .sf-sub-indicator, &.sfHover > a > .sf-sub-indicator
        background-position: -10px 0
        /* arrow hovers for modern browsers

  /* apply hovers to modern browsers

  /*** shadows for all but IE6 **

  .sf-shadow ul
    background: url('/images/superfish/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-off
      background: transparent


  ul.sf-menu>li>ul>li
    a:visited
      color: $txt_color
    a:hover
      color: $txt_color_hover
      background: #eff3fb

  ul.sf-menu>li>a.selected
    border-top: 2px solid $top_border_selected
    padding-top: 0.59em
    .sf-with-ul
      background: yellow
  .sf-menu
    float: left
    margin-bottom: 0 em
    a
      padding: .75em 1em
      text-decoration: none
      /* visited pseudo selector so IE6 applies text colour
      color: $txt_color
      &:visited
        /* visited pseudo selector so IE6 applies text colour
        color: $txt_color
    a.selected
      font-weight: bold
      color: $txt_color

    li
      background: $menu_color
      &:hover
        background: $hover1_color
        outline: 0
      li
        &:hover
          background: $hover2_color
          outline: 0
    a
      color: white
      //&:focus
      //  color: yellow
      &:hover
        color: $txt_color_hover
      //&:active
      //  //background: blue
      //  color: red
      //  outline: 0
      &.sf-with-ul
        padding-right: 2.25em
        min-width: 1px
        /* trigger IE7 hasLayout so spans position accurately

  li.sfHover
    a
      background: $menu_down_color