.subnav
  width: 100%
  height: 36px
  background-color: #eeeeee
  //Old browsers
  background-repeat: repeat-x
  // Repeat the gradient
  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%)
  // FF3.6+
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee))
  // Chrome,Safari4+
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%)
  // Chrome 10+,Safari 5.1+
  background-image: -ms-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%)
  // IE10+
  background-image: -o-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%)
  // Opera 11.10+
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 )
  // IE6-9
  background-image: linear-gradient(top, #f5f5f5 0%, #eeeeee 100%)
  // W3C
  border: 1px solid #e5e5e5
  -webkit-border-radius: 4px
  -moz-border-radius: 4px
  border-radius: 4px
  .nav
    margin-bottom: 0
    >
      li > a
        margin: 0
        padding-top: 11px
        padding-bottom: 11px
        border-left: 1px solid #f5f5f5
        border-right: 1px solid #e5e5e5
        -webkit-border-radius: 0
        -moz-border-radius: 0
        border-radius: 0
      .active > a
        padding-left: 13px
        color: #777
        background-color: #e9e9e9
        border-right-color: #ddd
        border-left: 0
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05)
        -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05)
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05)
        &:hover
          padding-left: 13px
          color: #777
          background-color: #e9e9e9
          border-right-color: #ddd
          border-left: 0
          -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05)
          -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05)
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05)
        .caret, &:hover .caret
          border-top-color: #777
      li
        &:first-child > a
          border-left: 0
          padding-left: 12px
          -webkit-border-radius: 4px 0 0 4px
          -moz-border-radius: 4px 0 0 4px
          border-radius: 4px 0 0 4px
          &:hover
            border-left: 0
            padding-left: 12px
            -webkit-border-radius: 4px 0 0 4px
            -moz-border-radius: 4px 0 0 4px
            border-radius: 4px 0 0 4px
        &:last-child > a
          border-right: 0
  .dropdown-menu
    -webkit-border-radius: 0 0 4px 4px
    -moz-border-radius: 0 0 4px 4px
    border-radius: 0 0 4px 4px

// Fixed subnav on scroll, but only for 980px and up (sorry IE!)
@media (min-width: 980px)
  .subnav-fixed
    position: fixed
    top: 40px
    left: 0
    right: 0
    z-index: 999
    border-color: #d5d5d5
    border-width: 0 0 1px
    // drop the border on the fixed edges
    -webkit-border-radius: 0
    -moz-border-radius: 0
    border-radius: 0
    -webkit-box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, 0.1)
    -moz-box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, 0.1)
    box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, 0.1)
    .nav
      width: 938px
      margin: 0 auto
      padding: 0 1px
  .subnav .nav > li:first-child > a
    -webkit-border-radius: 0
    -moz-border-radius: 0
    border-radius: 0
    &:hover
      -webkit-border-radius: 0
      -moz-border-radius: 0
      border-radius: 0

// LARGE DESKTOP SCREENS
@media (min-width: 1210px)
  // Update subnav container
  .subnav-fixed .nav
    width: 1168px
    // 2px less to account for left/right borders being removed when in fixed mode

@media (max-width: 768px)
  .subnav
    margin: 5px
    position: static
    top: auto
    z-index: auto
    width: auto
    height: auto
    background: #fff /* whole background property since we use a background-image for gradient */
    -webkit-box-shadow: none
    -moz-box-shadow: none
    box-shadow: none
    .nav > li
      float: none
      a
        border: 0
      &:first-child > a, &:first-child > a:hover
        -webkit-border-radius: 4px 4px 0 0
        -moz-border-radius: 4px 4px 0 0
        border-radius: 4px 4px 0 0

  .responsive_nav
    &.nav > li
      float: none
      a
        border: 0
      &:first-child > a, &:first-child > a:hover
        -webkit-border-radius: 4px 4px 0 0
        -moz-border-radius: 4px 4px 0 0
        border-radius: 4px 4px 0 0