@notificationsBg: #C9403A;

.account-masthead {
  .clearfix();
  min-height: 30px;
  color: @mastheadTextColor;
  background: darken(@mastheadBackgroundColor, 10%) url("@{bgPath}");
  .account {
    float: right;
    ul {
      .clearfix();
      li {
        display: block;
        float: left;
        border-left: 1px solid darken(@mastheadBackgroundColor, 15%);
        a {
          display: block;
          color: mix(@mastheadBackgroundColor, @mastheadLinkColor, 25%);
          font-size: 13px;
          font-weight: bold;
          padding: 0 10px;
          line-height: 31px;
          span.username {
            margin: 0 2px 0 4px;
          }
          &:hover {
            color: mix(@mastheadBackgroundColor, @mastheadLinkColor, 15%);
            background-color: darken(@mastheadBackgroundColor, 15%);
            text-decoration: none;
          }
          &.sub {
            font-weight: 300;
          }
          .btn {
            vertical-align: 1px;
            margin-left: 3px;
          }
        }
      }
    }
    .notifications {
      a {
        span {
          font-size: 12px;
          margin-left: 3px;
          padding: 1px 6px;
          background-color: darken(@mastheadBackgroundColor, 15%);
          .border-radius(4px);
        }
        &:hover span {
          color: @mastheadLinkColor;
          background-color: darken(@mastheadBackgroundColor, 20%);
        }
      }
      &.notifications-important a {
        span {
          color: @mastheadLinkColor;
          background-color: @notificationsBg;
        }
      }
    }
    &.authed {
      .image {
        padding: 0 6px;
        img {
          vertical-align: -6px;
          .border-radius(4px);
        }
      }
    }
  }
}

.masthead {
  .clearfix();
  min-height: 55px;
  color: @mastheadTextColor;
  background: @mastheadBackgroundColor url("@{bgPath}");

  .container {
    position: relative;
  }

  a {
    color: @mastheadLinkColor;
  }

  hgroup {
    h1,
    h2 {
      float: left;
      font-size: 30px;
      line-height: 1.5;
    }
    h1 {
      font-weight: 900;
      letter-spacing: -1px;
      margin: 3px 0;
    }
    h2 {
      position: absolute;
      bottom: -3px;
      left: 0;
      margin: 0;
      font-size: 15px;
      font-weight: normal;
      line-height: 1.2;
      white-space: nowrap;
    }
  }

  .content {
    position: absolute;
    top: 10px;
    right: 0;
  }

  .section {
    float: left;
  }

  input[type="text"] {
    border-color: darken(@mastheadBackgroundColor, 5);
  }

  .navigation {
    margin-right: 20px;
    .nav-pills {
      margin-bottom: 0;
      li {
        a:hover,
        &.active a {
          background-color: darken(@mastheadBackgroundColor, 10%);
        }
      }
    }
  }

  .site-search {
    margin: 2px 8px 2px 0;
    input {
      width: 200px;
      padding: 4px 10px;
    }
  }

  .debug {
    position: absolute;
    top: 37px;
    left: 10px;
    color: rgba(255, 255, 255, 0.5);
  }
}