sass-site/source/assets/stylesheets/regions/_navigation.scss

// ===========================================================================
// NAVIGATION



.navigation {
  background: $navigation-background-color;
  color: $navigation-text-color;
  @include text-shadow;

  a { @include link(lighten($navigation-text-color, 5%), lighten($navigation-text-color, 15%), lighten($navigation-text-color, 25%)); }

  @include at-breakpoint($break-iPhone) {
    display: none;
    
    ul {
      padding: 0;
      list-style: none;
    }

    li {
      border-bottom: 1px solid $navigation-border-color;

      &:last-child { border-bottom: 0; }
    }

    a {
      @include tappable-link;
      display: block;
    }
  }

  @include at-breakpoint($break-iPhone-wide) {
    ul {
      @extend %clearfix-iPhone-wide;
      list-style: none;

      li {        
        @include span-columns(2.5, $break-iPhone); 
        margin-right: 0;
      }
      
      a {
        padding: {
          right: 0;
          left: 0;
        }
      }
    }
  }

  @include at-breakpoint($break-iPad) {
    position: relative;
    top: -7em;
    display: block;
    margin-bottom: -3em;
    background: none;
    
    a {
      @include link;
      text-shadow: 0 1px 1px $highlight-color;
    }
    
    ul {
      float: right;
      
      li {
        margin-right: 2em;
        border: 0;
        width: auto;
      
        &:last-child { margin-right: 0; }
      }
    }
  }
}