@import "../includes/v_linear_grad"
@import "../includes/round_corners"
@import "../includes/transition"
@import "../includes/box_shadow"

header
  nav
    ul
      font-size: 1em
      @include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2))
      @include box-shadow("0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.5)")
      background-color: #DDD
      border-style: solid
      border-width: 0 0 1px 0
      border-color: #999
      color: white
      margin: 0 0 1em
      padding: 0 1em
      list-style: none
      height: 35px
      position: relative
      z-index: 100
      li a
        @include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2))
        @include box-shadow("0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.5)")
        background-color: #DDD
        color: #444
        text-decoration: none
        display: block
        height: 21px
        float: left
        padding: 7px 1em 7px
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
        @include transition(all 0.15s 0s ease)
        &:hover, &:focus
          @include v-linear-grad(rgba(0,0,0,0), rgba(0,0,0,0.2))
          @include box-shadow("0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.5)")
          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
          color: #444
          background-color: white
        &:active
          background-color: #ccc
        &.selected
          @include v-linear-grad(rgba(0,0,0,0.4), rgba(0,0,0,0))
          @include box-shadow("0 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.2), inset 0 0 6px rgba(0, 0, 0, 0.4)")
          text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5)
          background-color: #999
          color: white
          &:hover
            background-color: #aaa