//
// Proto CNS - Custom properties
// --------------------------------------------------


// Core variables and mixins
@import "bootstrap/bootstrap.less";

// Menu
@import "proto-cns/menu.less";
// Picturebook
@import "proto-cns/picturebook.less";



// Header

header {
    @header-height: floor(@font-size-h3 * @headings-line-height) + @line-height-computed + (@line-height-computed / 2);

    min-height: @header-height + @line-height-computed;

    margin-bottom: @line-height-computed;
    
    background-color: desaturate(@brand-primary, 20%);
        
    #gradient .vertical(@start-color: lighten(desaturate(@brand-primary, 20%), 10%); @end-color: desaturate(@brand-primary, 20%));
    
    .banner {
        position: relative;

        > .logo {
            h1 {
                a {
                    color: #fff;
                    text-decoration: none;
                    
                    .user-select(@select: none);
                }
                
                img {
                    max-height: (@header-height - 10);
                    
                    margin-top: -@line-height-computed + 5 ;
                    margin-bottom: -(@line-height-computed / 2) + 5;
                    
                    vertical-align: top;
                }
                
                span {
                    margin-left: @padding-large-horizontal;
                }
            }
        }

        > .search {
            form {
                margin-top: @header-height - (@line-height-computed / 2) - @input-height-small;
                margin-bottom: (@line-height-computed / 2);
                margin-left: @padding-large-horizontal;
            }
        }
    }
    
    
    
    .tabs-default {
        min-height: @line-height-computed;
        
        margin: 0 floor(@grid-gutter-width / -2);
        padding: 0 floor(@grid-gutter-width / 2);
        
        border-color: darken(@brand-primary, 10%);
        
        ul li {
            &.active {
                a {
                    border-color: darken(@brand-primary, 10%) darken(@brand-primary, 10%) transparent;
                }
            }
            
            &:not(.active) {
                a {
                    color: #f8f8f8;

                    &:hover, &:focus {
                        color: #fff;
                    }
                }
            }
        }
    }
}



// Drawer

@media screen and (max-width: @screen-xs-max) {
    #drawer-toolbar {
        .drawer-toolbar-header {
            background-color: desaturate(@brand-primary, 20%);
            
            #gradient .vertical(@start-color: lighten(desaturate(@brand-primary, 20%), 10%); @end-color: desaturate(@brand-primary, 20%));
        }   
    }
}



// Footer

footer {
    margin-bottom: @line-height-computed;    
}