// Header
@header-height:                       40px;
@header-color:                        hsl(194, 5%, 52%);
@header-background:                   #f5f5f5;
@header-border:                       rgba(0, 0, 0, 0.07);
@header-button-color:                 #aaa;
@header-button-hover-color:           #444;
@header-button-hover-background:      none;
// Font sizes
@font-size-base:          14px;
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
@font-size-small:         ceil(@font-size-base * 0.85); // ~12px
@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor(@font-size-base * @line-height-base);

.navigation {
    top: 90px;
}

.book-summary nav.autoshow {
    a, a:hover {
        color: inherit;
        text-decoration: none;
    }  
    @media (min-width: 800px) {
        display: none;
    }       
}

.cocos-navbar {
    overflow: visible;
    height: @header-height;
    padding: 0px 8px;
    z-index: 2;

    font-size: 0.85em;
    color: @header-color;
    background: @header-background;

    display: flex;

    a, a:hover {
        color: inherit;
        text-decoration: none;
    }    

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: absolute;
        li {
            margin-right: 1px;            
            position: relative;
            float: left;
            a:hover + .hovershow, .hovershow:hover, .hovershow li:hover {
                display:block;
            }                  
            img {
                margin-top: 3px;
            }
            ul {
                margin: -3px 0 0 0;
                background: #f5f5f5;
                display:none;
                width: 100%;
                z-index:999;
                li {
                    display: block;
                    float: none;
                    a {
                        width: auto;
                        min-width: 100px;
                        padding: 0 20px;

                    }
                }
            }
            @media screen and (max-width: 800px){
                /*Make dropdown links appear inline*/
                ul {
                    position: static;
                    display: none;
                }
                /*Create vertical spacing*/
                li {
                    margin-bottom: 1px;
                }
                /*Make all menu links full width*/
                ul li, li a {
                    width: 100%;
                }
            }            
        }
    }

    .btn {
        display: inline-block;
        height: @header-height;
        padding: 0px 15px;
        border-bottom: none;
        color: @header-button-color;
        text-transform: none;
        line-height: @header-height;
        position:relative;
        font-size: @font-size-base;

        &:hover {
            position: relative;
            text-decoration: none;
            color: @header-button-hover-color;
            background: @header-button-hover-background;
        }

        &:focus {
            outline: none;
        }
    }

    .autohide{
        @media (max-width: 800px) {
            display: none;
        }        
    }

    &:hover {
        h1 {
            opacity: 1;
        }
    }
}