header.less

@headerHeight: 50px;
.header {
  background: #FFF;
  top: 0;
  z-index: 900;
  width: 100%;
  margin: 0 0 @halfGutter 0;
  h1 {
    a {
      display: block;
      .border-radius(0 0 5px 5px);
      @shadow: 0 1px 3px fade(@colorAccentDark, 60%), inset 0 -1px 3px fade(@colorLight, 40%);
      .box-shadow(@shadow);
      border: 1px solid #000;
      border-top: 0;
      padding: 0 @halfGutter;
      color: @colorLight;
      text-shadow: 0 1px 2px @colorAccentDark;
      font-weight: normal;
      font-size: @fontSize * 2;
      #gradient .radial(@colorNeutralDark, @colorAccentDark);
      &:hover {
        #gradient .radial(lighten(@colorNeutralDark, 10%), lighten(@colorAccentDark, 10%));
        @shadow: 0 1px 3px fade(@colorAccentDark, 80%), inset 0 -1px 3px fade(@colorLight, 50%);
        .box-shadow(@shadow);
      }
    }
  }
  h2 {
    font-size: @fontSize;
    color: @colorNeutralLight;
  }
  h1,
  h2 {
    line-height: @headerHeight;
    display: inline-block;
    margin-right: @quarterGutter;
  }
}

.mainNav {
  list-style: none;
  text-align: right;
  margin: 0;
  li {
    display: inline-block;
    width: auto;
  }
  a {
    display: block;
    width: auto;
    line-height: @headerHeight;
    padding: 0 @quarterGutter;
  }
}

@media @mq-phone {
  .mainNav {
    text-align: left;
  }
}