/**
 * This file containts the CSS Styles for the header
 * with it's toolbar, the userbar and the whole main navigation
 *
 * @project     OTRS (http://www.otrs.org) - Agent Frontend
 * @version     $Revision$
 * @copyright   OTRS AG
 * @license     AGPL (http://www.gnu.org/licenses/agpl.txt)
 */

/**
 * @package     Skin "Default"
 * @section     Header
 */

@media screen,projection,tv,handheld {

/**
 * @subsection  Header
 */
    #Header {
        height: 68px;
        padding: 8px 0px;
        background:
            url(../img/header_background_knee.png),
            url(../img/header_background.png);
        background-repeat:
            no-repeat,
            repeat-x;
        background-position:
            right bottom,
            left bottom;
        color: #FFFFFF;
        position:   relative;
        z-index: 10;
        border-bottom: 0px;
        box-shadow: none;
    }

    /**
     * @subsection  Toolbar
     */

    #ToolBar a i {
        color: #555555;
        text-shadow: 1px 1px 2px rgb(245, 133, 0);
    }

    #ToolBar a span.Counter {
        color: #000;
    }

    /**
     * @subsection      Navigation Level-0
     */

    #NavigationContainer {
        top: 60px;
        height: 35px;
    }

    /**
     * @subsection      Main hover effect
     */

    #Navigation > li {
        line-height:        12px;

        border-top:         0px solid #000;
        border-right:       1px solid #000;
        border-bottom:      0px solid #000;
        border-left:        0px solid #000;
        -moz-border-image:  url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
        -webkit-border-image:  url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
        -o-border-image:    url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
        border-image:       url(../img/menu_separator.png) 0 1 0 0 stretch repeat;

        background:         none;

        color:              #333333;
        text-transform:     none;
        font-weight:        normal;
        font-size:          12px;
        padding-left:       10px;
        padding-right:      10px;

        float:              left;
        position:           relative;
        margin-right:       0px;
    }

    #Navigation > li > a {
        display:            block;
        height:             14px;
        padding:            6px 10px 3px 10px;
        line-height:        12px;
        display:            block;
        background:         none;
        color:              #333333;
        font-weight:        normal;
        font-size:          12px;
    }

    #Navigation > li:hover {
        color:              #FFCC65;
        background:         #FFCC65;
        background-position: left -38px;
        cursor: pointer;
        box-shadow:         none;

        border-top:         0px solid #000;
        border-right:       1px solid #000;
        border-bottom:      0px solid #000;
        border-left:        0px solid #000;
        -moz-border-image:  url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
        -webkit-border-image:  url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
        -o-border-image:    url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
        border-image:       url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
    }


    #Navigation > li:hover > a {
        color: #000;
        box-shadow:         none;
    }

    #Navigation > .Active > ul > li:hover > a {
        border-bottom: 1px solid transparent;
    }

    #Navigation > .Active > ul > li:last-child > a {
        border-bottom: medium none;
    }

    #Navigation > li:active {
        background: none;
    }

    #Navigation > .Selected, #Navigation > .Selected:hover {
        background-position: left -76px;
        background-color:   #FFCC65;
        z-index:            90;
        box-shadow:         none;

        border-top:         0px solid #000;
        border-right:       1px solid #000;
        border-bottom:      0px solid #000;
        border-left:        1px solid #000;
        -moz-border-image:  url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
        -webkit-border-image:  url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
        -o-border-image:    url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
        border-image:       url(../img/menu_separator.png) 0 1 0 0 stretch repeat;
    }

    #Navigation > .Selected > a {
        color: #333333;
        background-position: right -76px;
        background-color: transparent;
    }

    #Navigation > li:hover > span {
        display: none !important;
    }

    #Navigation a i {
        top: 3px;
        left: 25px;
    }

    #Navigation > li > a#GlobalSearchNav i {
        margin-top: 0;
    }

    /**
     * @subsection      Navigation Second level
     */

    #Navigation > .Active > ul {
        position: absolute;
        top: 22px;
        display: block;
        z-index: 99;
        background: #F5F5F5;
    }

    #Navigation > .Active > ul > li {
        font-size: 12px;
        line-height: 14px;
        margin-top: -1px;
        position: relative;
        padding: 0px 2px 0px 2px;
        border: 1px solid #CCC;
    }

    #Navigation > .Active > ul > li > a {
        color:      #333333;
        padding: 4px 10px 4px 8px;
        border-bottom: 1px solid #F5F5F5;
    }

    /**
     * @subsection      Navigation Third and Fourth level
     */

    #Navigation > .Active > ul > li.Last > a {
        border-bottom-width: 0px;
        border-bottom-style: none;
    }

    #Navigation > .Active > ul > li:hover, #Navigation > .Active > ul > li:hover > a {
        background: none;
        background-color: #FFCC65;
        color:      #000;
    }

    #Navigation a span.SearchIcon {
        display: none;
    }

    #Navigation > #nav-search:hover {
        background-color: #FFCC65;
        background-position: 20px bottom;
    }

    #UserInfo {
        color: #000;
    }

    li.SearchProfile a.ShowTreeSelection {
        color: #000;
    }

    .ResponsiveSidebarContainer #NavigationContainer {
        background: #fff;
    }

    .ResponsiveSidebarContainer .SidebarColumn {
        background: #fff !important;
    }

    .ResponsiveHandle {
        top: 40px !important;
    }
} /* end @media */