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

// ===========================================================================
// BANNER



$banner-background-color: $background-alt-color !default;



.banner {
  background: $banner-background-color;

  h1 a {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.accessibility {
  @extend %content-list;

  li:last-child {
    padding-bottom: 0;
  }
}

.skip-navigation { display: none; }



// ---------------------------------------------------------------------------
// iPhone

@mixin banner-iPhone {
  .banner {
    text-align: left;

    h1 {
      @include span-columns(3);
      @include font-size($font-size-large);
    }
  }

  .skip-navigation {
    @include span-columns(1 omega);
    padding-top: 1em;

    .button {
      @include float-right;
      padding: 0;
      width: auto;
    }
  }

  .skip-content {
    @extend %hidden-iPhone;
  }
}



// ---------------------------------------------------------------------------
// iPad

@mixin banner-iPad {
  .skip-navigation { @extend %hidden-iPad; }
}