//
// Account Bar - Above the header
//

.top-menu {
    background-color: #fff;
    padding: 6px 0;

    .userinfo {
        margin-top: 7px;
        p {
            font-size: 12px;
            line-height: 1.2;
            margin-bottom: 0;
            color: $agave-dark;
            font-weight: 700;
        }
    }

    .menu-top-menu-container {
        .menu > li {
            // margin-top: 10px;

            > a {
                padding: 0 7px;
                color: $agave-dark;
                font-weight: bold;
                font-size: 12px;
                line-height: 1.2;
                margin-bottom: 0;
                text-decoration:none;
                float:left;
                
                transition: all 0.2s linear;
                
                &:hover {
                    color: $agave-light-blue;
                }
            }
        }

        ul {
            text-align: center;
            // margin-top:7px;

            /* Medium and up */
            @media screen and (min-width: 40em) {
                text-align: right;
            }
        }

        .user-notifications {
            // padding-right: 15px;
            padding: 0;

            &.has_notifications {
                a {
                    position:relative;
                    color:#f00;

                    // &:before{
                    //     // animation-duration: 2s;
                    //     // animation-iteration-count: infinite;
                    //     // animation-name: notificationbeacon;
                    //     content: '';
                    //     display: block;
                    //     background: #f00;
                    //     width: 18px;
                    //     height: 18px;
                    //     position: absolute;
                    //     top: -17px;
                    //     right: -4px;
                    //     color: #fff;
                    //     border-radius: 9px;
                    //     z-index: 0;
                    //     border:0;
                    // }

                    span{
                        // content: '';
                        display: inline-block;
                        background: #f00;
                        width: auto;
                        min-width: 18px;
                        height: 18px;
                        color: #fff;
                        line-height: 18px;
                        font-size: 10px;
                        text-align: center;
                        font-family: 'Open Sans';
                        font-weight: 700;
                        padding: 0 5px;
                        border-radius: 9px;
                        margin: -3px 0 0 5px;
                        vertical-align: middle;
                    }
                }
            }
        } // .user-notifications
    } // .menu-top-menu-container
    
} // .top-menu