// ============================================================
//          Navigation                                  
// ------------------------------------------------------------*/

+route(style,base)
  .nav
    list-style: none
    margin-left: 0
    margin-bottom: 0
    +cf
    > li
      margin-bottom: 0
      &, > a
        display: inline-block
        @if $comp-ie7
          .ie7 &
            zoom: 1
            display: inline

  .nav_stacked
    @extend .nav
    > li
      display: list-item
      > a
        display: block

  .nav_banner
    @extend .nav
    text-align: center

  .nav_block
    @extend .nav
    line-height: 1
    letter-spacing: -0.31em
    word-spacing: -0.43em
    > li
      letter-spacing: normal
      word-spacing: normal

  .nav_leftpull
    @extend .nav
    float: left
    > li
      float: left
      a
        display: block
    @if nth($layout-fluid-behavior,2) != false
      @media (max-width: nth($layout-second-grid,1) + 0px)
        &.opposite_n
          float: right
        &.stacked_n
          float: none
          width: auto
          li
            float: none
            width: auto
            +block

      @media (max-width: $bp-mobile  - 1px) 
        &.opposite_s
          float: right
        &.stacked_s
          float: none
          width: auto
          li
            float: none
            width: auto
            +block
    
  .nav_rightpull
    @extend .nav
    float: right
    > li
      float: left
      a
        display: block
    @if nth($layout-fluid-behavior,2) != false
      @media (max-width: nth($layout-second-grid,1) + 0px)
        &.opposite_n
          float: left
        &.stacked_n
          float: none
          width: auto
          li
            float: none
            width: auto
            +block

      @media (max-width: $bp-mobile  - 1px) 
        &.opposite_s
          float: left
        &.stacked_s
          float: none
          width: auto
          li
            float: none
            width: auto
            +block

  .nav_fit
    @extend .nav
    display: table
    width: 100%
    > li
      display: table-cell
      > a
        display: block
    @if nth($layout-fluid-behavior,2) != false
      @media (max-width: nth($layout-second-grid,1) + 0px)
        &.stacked_n
          display: block
          li
            float: none
            width: auto
            +block

      @media (max-width: $bp-mobile  - 1px) 
        &.stacked_s
          display: block
          li
            float: none
            width: auto
            +block

  .nav_comma
    @extend .nav
    li
      &:after
        content: ', '
      &:last-child:after
        content: ''

  .nav_content
    @extend .nav
    li
      &:after
        content: attr(data-list-item)
      &:last-child:after
        content: ''