masthead.less

@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,
                    span.text {
                        margin: 0 2px 0 4px;
                    }
                    span.text {
                        position: absolute;
                        top: -9999px;
                        left: -9999px;
                    }
                    &: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.badge {
                    font-size: 12px;
                    margin-left: 3px;
                    padding: 1px 6px;
                    background-color: darken(@mastheadBackgroundColor, 15%);
                    .border-radius(4px);
                    text-shadow: none;
                    color: mix(@mastheadBackgroundColor, @mastheadLinkColor, 25%);
                }
                &:hover span {
                    color: @mastheadLinkColor;
                    background-color: darken(@mastheadBackgroundColor, 20%);
                }
            }
            &.notifications-important a {
                span.badge {
                    color: @mastheadLinkColor;
                    background-color: @notificationsBg;
                }
            }
        }
        &.authed {
            .image {
                padding: 0 6px;
                img {
                    vertical-align: -6px;
                    .border-radius(4px);
                }
            }
        }
    }
}

.masthead {
    .clearfix(); //min-height: 55px;
    margin-bottom: initial;
    padding: @grid-gutter-width/3 0;
    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;
        }
    }
    .navbar-collapse {
        padding: @grid-gutter-width/3 0;
    }
    .section {
        float: left;
    }
    .navigation {
        &.section {
            @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
                float: right;
            }
        }
        .nav-pills {
            margin-bottom: 0;
            li {
                a:hover,
                a:focus,
                &.active a {
                    background-color: darken(@mastheadBackgroundColor, 10%);
                }
            }
        }
    }
    .nav>li>a,
    .nav>li>a:focus,
    .nav>li>a:hover,
    .nav>.active>a,
    .nav>.active>a:hover,
    .nav>.active>a:focus {
        color: #fff;
        text-shadow: none;
    }
    .site-search {
        @media (min-width: @screen-md-min) {
            margin-left: @grid-gutter-width/2;
        }
        margin: (@grid-gutter-width/6 - 1) @grid-gutter-width/3 - 2 (@grid-gutter-width/6 - 1) 0;
        input {
            width: 200px;
            padding: @grid-gutter-width/6 @grid-gutter-width/3;
        }
    }
    .btn-navbar-btn,
    .btn-navbar-btn:hover,
    .btn-navbar-btn:focus,
    .btn-navbar-btn:active,
    .btn-navbar-btn.active,
    .btn-navbar-btn.disabled,
    .btn-navbar-btn[disabled] {
        background-color: darken(@mastheadBackgroundColor, 10%);
        background-image: none;
        border: none;
        .box-shadow(none);
        text-shadow: none;
        margin-top: 15px;
        .icon-bar {
            margin-right: 0;
        }
    }
    .debug {
        position: absolute;
        top: 37px;
        left: 10px;
        color: rgba(255, 255, 255, 0.5);
    }
}

@media (min-width: @screen-md-min) {
    .masthead .navbar-collapse {
        float: right;
    }
}

@media (max-width: @screen-sm-max) {
    .navbar-toggle{
      margin-right: 0;
    }
    .masthead {
        .section {
            float: none;
            .navbar-collapse {
                margin-bottom: @gutterX;
            }
        }
        .container {
            padding-left: @grid-gutter-width/2;
            padding-right: @grid-gutter-width/2;
        }
        .site-search {
            display: none;
        }
    }
}

@media (max-width: @screen-xs-max){
  .masthead {
    .navbar-collapse{
      clear: both;
      margin-left: 0;
      margin-right: 0;
    }
  }
}