navigation.css

#navigation .pageContent
{
    background: transparent;
    height: {xen:calc '@headerTabHeight * 2'}px;
    position: relative;
}

    .navTabs
    {
        padding: 0 25px;
        height: @headerTabHeight;
        /*background-color: @primaryDark;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border: 1px solid @primaryLightish;
        border-bottom: 1px solid @primaryDarker;*/
    }

        .navTabs .publicTabs
        {
            float: left;
        }

        .navTabs .visitorTabs
        {
            float: right;
        }

            .navTabs .navTab
            {
                float: left;
                white-space: nowrap;
                word-wrap: normal;

                <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
            }


/* ---------------------------------------- */
/* Links Inside Tabs */

.navTabs .navLink,
.navTabs .SplitCtrl
{
    /* basic */
    font-size: 14px;

    display: block;
    float: left;
    font-weight: bold;
    height: @headerTabHeight;
    line-height: @headerTabHeight;
    vertical-align: text-bottom;

    text-shadow: 0px 1px 0px @veryDarkMonochrome;
    text-align: center;

    outline: 0 none;

    <xen:if is="{$pageIsRtl}">*float: none; *display: inline; *zoom: 1;</xen:if>
}

    .navTabs .publicTabs .navLink
    {
        padding: 0 15px;
    }

    .navTabs .visitorTabs .navLink
    {
        padding: 0 10px;
    }

    .navTabs .navLink:hover
    {
        text-decoration: none;
    }

    /* ---------------------------------------- */
    /* unselected tab, popup closed */

    .navTabs .navTab.PopupClosed .navLink
    {
        color: @primaryLighter;
    }

        .navTabs .navTab.PopupClosed:hover
        {
            /*background-color: @primaryMedium;*/
        }

            .navTabs .navTab.PopupClosed .navLink:hover
            {
                color: @lightTextColor;
            }

            .navTabs .navTab.Popup .PopupControl:hover, .navTabs .navTab.Popup.PopupContainerControl:hover {
                background: none;
            }

            .navTabs .navTab.Popup .PopupControl.PopupOpen:hover,
            .navTabs .navTab.Popup.PopupContainerControl.PopupOpen:hover
            {
                background: @primaryLight url('@imagePath/xenforo/gradients/user-bar-hover.png') repeat-x top;
            }
                .navTabs .navTab.Popup .PopupControl.PopupOpen .navLink,
                .navTabs .navTab.Popup.PopupContainerControl.PopupOpen .navLink
                {
                    text-shadow: 0 0 5px @primaryLightest;
                }

    .navTabs .navTab.PopupClosed .arrowWidget
    {
        /* circle-arrow-down-light */
        background-position: -64px 0;
    }

    .navTabs .navTab.PopupClosed .SplitCtrl
    {
        margin-left: -14px;
        width: 14px;
    }

        .navTabs .navTab.PopupClosed:hover .SplitCtrl
        {
            /* nav_menu_gadget, height: 17px */
            background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -128px {xen:calc '(@headerTabHeight - 17) / 2 + 1'}px;
        }

    /* ---------------------------------------- */
    /* selected tab */

    .navTabs .navTab.selected .navLink
    {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;

        /*margin-top: -2px;
        padding-top: 2px;*/

        background: @primaryLightish url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x top;
        color: @lightTextColor;
        font-weight: bold;

        /*position: relative;*/
        padding-bottom: 1px;
        /*z-index: 2;*/
    }

    .navTabs .navTab.selected .SplitCtrl
    {
        display: none;
    }

    .navTabs .navTab.selected .arrowWidget
    {
        /* background-image: @popupArrowClosed.background-image; 11/23/2011 */
        /* circle-arrow-down */
        background-position: -32px 0;
    }

        .navTabs .navTab.selected.PopupOpen .arrowWidget
        {
            /* circle-arrow-up */
            background-position: -16px 0;
        }

    /* ---------------------------------------- */
    /* unselected tab, popup open */

    .navTabs .navTab.PopupOpen .navLink
    {
    }


    /* ---------------------------------------- */
    /* selected tab, popup open (account) */

    .navTabs .navTab.selected.PopupOpen .navLink
    {
        @property "popupControl";
        color: @primaryDark;
        background: @primaryLight url('@imagePath/xenforo/gradients/user-bar-hover.png') repeat-x top;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        text-shadow: 1px 1px 2px white;
        @property "/popupControl";
    }

/* ---------------------------------------- */
/* Second Row */

.navTabs .navTab.selected .tabLinks
{
    height: @headerTabHeight;
    width: 100%;

    padding-top: 1px;
    /*border-top: 1px solid rgba(252,252,252,0.42);*/

    /*background: @primaryLightish url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x 0px -@headerTabHeight;*/

    *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
    overflow: hidden; zoom: 1;

    position: absolute;
    top: @headerTabHeight;
    left: 0px;
}

    .navTabs .navTab.selected .blockLinksList
    {
        background: none;
        padding: 0;
        border: none;
    }

    .navTabs .navTab.selected .tabLinks .menuHeader
    {
        display: none;
    }

    .navTabs .navTab.selected .tabLinks li
    {
        float: left;
        padding: 6px 0;
    }

        .navTabs .navTab.selected .tabLinks li:first-child
        {
            margin-left: 8px;
        }

        .navTabs .navTab.selected .tabLinks a
        {
            display: block;
            padding: 1px 10px;
            line-height: {xen:calc '@headerTabHeight - 14'}px;
            color: white;
            font-size: 11px;
        }

            .navTabs .navTab.selected .tabLinks a:hover,
            .navTabs .navTab.selected .tabLinks a:focus
            {
                text-decoration: none;
                padding: 0 10px;
                border-bottom: 1px solid rgba(255,255,255,.2);
                border-top: 1px solid rgba(0,0,0,.2);
                background: rgba(0,0,0,.1);
                /*color: @lightTextColor;*/
                border-radius: 5px;
                text-shadow: 0px 1px 0px rgba(0,0,0,.6);
                outline: 0;
            }

/* ---------------------------------------- */
/* Alert Balloons */

.navTabs .navLink .itemCount
{
    position: absolute;
    right: 2px;
    top: -12px;

    height: 16px;
    line-height: 16px;
    min-width: 12px;
    _width: 12px;
    padding: 0 2px;
    text-align: center;

    background: #e03030;
    color: white;
    text-shadow: none;
    font-size: 9px;
    font-weight: bold;

    white-space: nowrap;
    word-wrap: normal;

    border-radius: 2px;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
}

    .navTabs .navLink .itemCount .arrow
    {
        border: 3px solid transparent;
        border-top-color: #e03030;
        border-bottom: none;
        position: absolute;
        bottom: -3px;
        right: 4px;
        line-height: 0px;
        width: 0px;
        height: 0px;
        text-shadow: none;
        /* Hide from IE6 */
        _display: none;
    }

.visitorTabs .navLink .itemCount.Zero
{
    display: none !important;
}

/* ---------------------------------------- */
/* Account Popup Menu */

.navTabs .navTab.account .navLink
{
    font-weight: bold;
}

#AccountMenu
{
    width: 274px;
}

#AccountMenu .menuHeader
{
    position: relative;
}

    #AccountMenu .menuHeader .avatar
    {
        float: left;
        margin-right: 10px;
    }

    #AccountMenu .menuHeader .visibilityForm
    {
        margin-top: 10px;
        color: @primaryMedium;
    }

    #AccountMenu .menuHeader .links .fl
    {
        position: absolute;
        bottom: 10px;
        left: {xen:calc '10 + 10 + 96'}px;
    }

    #AccountMenu .menuHeader .links .fr
    {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

#AccountMenu .menuColumns
{
    overflow: hidden; zoom: 1;
    padding: 2px;
}

    #AccountMenu .menuColumns ul
    {
        float: left;
        padding: 0;
        max-height: none;
        overflow: hidden;
    }

        #AccountMenu .menuColumns a,
        #AccountMenu .menuColumns label
        {
            width: 115px;
        }

#AccountMenu .statusPoster textarea
{
    width: 245px;
    margin: 0;
    resize: vertical;
    overflow: hidden;
}

#AccountMenu .statusPoster .submitUnit
{
    margin-top: 5px;
    text-align: right;
}

    #AccountMenu .statusPoster .submitUnit .statusEditorCounter
    {
        float: left;
        line-height: 23px;
        height: 23px;
    }

/* ---------------------------------------- */
/* Inbox, Alerts Popups */

.navPopup
{
    width: 260px;
}

.navPopup a:hover,
.navPopup .listItemText a:hover
{
    background: none;
    text-decoration: underline;
}

    .navPopup .menuHeader .InProgress
    {
        float: right;
        display: block;
        width: 20px;
        height: 20px;
    }

.navPopup .listPlaceholder
{
    max-height: 350px;
    overflow: auto;
}

    .navPopup .listPlaceholder ol.secondaryContent
    {
        padding: 0 10px;
    }

        .navPopup .listPlaceholder ol.secondaryContent.Unread
        {
            background-color: @inlineModChecked.background-color;
        }

.navPopup .listItem
{
    overflow: hidden; zoom: 1;
    padding: 5px 0;
    border-bottom: 1px solid @primaryLighterStill;
}

.navPopup .listItem:last-child
{
    border-bottom: none;
}

.navPopup .PopupItemLinkActive:hover
{
    margin: 0 -8px;
    padding: 5px 8px;
    border-radius: 5px;
    background-color: @primaryLighterStill;
    cursor: pointer;
}

.navPopup .avatar
{
    float: left;
}

    .navPopup .avatar img
    {
        width: 32px;
        height: 32px;
    }

.navPopup .listItemText
{
    margin-left: 37px;
}

    .navPopup .listItemText .muted
    {
        font-size: 9px;
    }

    .navPopup .unread .listItemText .title,
    .navPopup .listItemText .subject
    {
        font-weight: bold;
    }

.navPopup .sectionFooter .floatLink
{
    float: right;
}
.secondaryBar {
    height: @headerTabHeight;
    background-color: @primaryLightish;
    border-top: 1px solid rgba(252,252,252,0.42);
    border-bottom: 1px solid @primaryDarker;
    position: absolute;
    margin-bottom: -1px; /* temporary fix - meh */
    bottom: 0;
    width: 100%;
}