@navigation-bar-height: 60px;
@navigation-line-height: 20px;

.navigation-bar {
    @media screen and (min-width: @screen-sm-min) {
        .clearfix;
    
        margin-bottom: @line-height-computed;
    
        .navigation-top-menu {
            float: left;
            
            background-color: @navigation-bg;
        }
        
        .navigation-search {
            float: right;
            height: @navigation-bar-height;
            
            background-color: @brand-primary;
            
            & > * {
                height: @navigation-bar-height - @navigation-line-height;
                padding-top: @padding-small-vertical;
                padding-left: @padding-large-horizontal;
    
                background-color: @body-bg;
            }
            
            .form-inline .form-group .input-group {
                width: 180px;
            }
        }
        
        .navigation-line {
            .clearfix;
            
            margin-top: @navigation-bar-height - @navigation-line-height;
            
            background-color: @navigation-bg;
        }
    }
    
    #navigation-menu nav.menu-horizontal {
        ul {
            width: 100%; 
            margin: 0;
            
            li {
                float: left;
                padding: 0;
                overflow: hidden;
                
                a {
                    display: block;
                    height: @navigation-bar-height;
                    line-height: @navigation-line-height;
                    font-size: @font-size-large;
                    margin-bottom: 0;
                    padding: 0;
                    
                    text-align: center;
                    text-decoration: none;
                    text-transform: uppercase;
                    white-space: nowrap;
    
                    &.active, &:hover {
                        background-color: @navigation-active-bg;
                        background-image: url("../img/arrow.png");
                        background-repeat: no-repeat;
                        background-position: center bottom;
                        color: @active-text;
                    }
                    
                    & > * {
                        display: block;
                        top: 0;
                        padding: @padding-large-vertical @padding-large-horizontal;
                        line-height: @navigation-line-height;
                        
                        background-color: @body-bg;
                    }
                    
                    @media screen and (max-width: @screen-sm-max) {
                        font-size: @font-size-base;
                        
                        & > * {
                            padding: @padding-large-vertical @padding-small-horizontal;
                        }
                    }
                }
            }
            
            @media screen and (max-width: @screen-xs-max) {
                display: block;
                width: auto;
                
                background-color: @navigation-bg;

                li {
                    display: block;
                    float: none;
                    
                    a {
                        height: auto;
                        
                        padding-left: @padding-xs-horizontal;

                        text-align: left;
                    }
                    
                    ul {
                        margin-bottom: @padding-small-vertical;
                        margin-left: @padding-base-horizontal;
                        
                        a {
                            font-size: @font-size-small;
                            
                            & > * {
                                padding: @padding-small-vertical @padding-small-horizontal;
                            }
                        }
                    }
                }
            }
        }
    }

    .portlet-container {
        margin: 0;
    }
}