/**
 * 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: 1.16 $
 * @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 {
    top: 14px;
    left: 14px;
    position: absolute;
}

#ToolBar select#ToolBarSearchProfile, #ToolBar input#Fulltext {
    border-style: solid;
    border-width: 1px;
    border-color: #333333;
    border-radius: 0px;
    margin-top: 0px;
}

#ToolBar select#ToolBarSearchProfile {
    height: 25px;
    padding: 2px;
    margin-left: 10px;
}

#ToolBar a span.Counter {
    bottom: -14px;
    color: #000;
    display: block;
    font-size: 11px;
    left: 50%;
    margin-left: -12px;
    position: absolute;
    text-align: center;
    text-indent: 0 !important;
    width: 24px;
}

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

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

/**
 * @subsection  UserInfo
 */
#UserInfo {
    top: 64px;
    right: 20px;
    padding: 4px 70px 0 0;
    color: #333333;
    font-size: 11px;
    position: absolute;
    cursor: default;
}

.RTL #UserInfo {
    right: auto;
    left: 17px;
    padding: 4px 0 0 70px;
}

#UserInfo a {
    text-transform: none;
    font-weight:    normal;
    font-size:      11px;
    height:         21px;
    padding:        0px;
    margin:         0px;
}

#UserInfo a.SwitchButton {
    position:       absolute;
    top:            0px;
    right:          25px;
    width:          20px;
    height:         20px;
    font-size:      18px;
    text-shadow:    1px 1px 2px #555555;

    padding-left:   0px;
    padding-bottom: 0px;
}

#UserInfo a.LogoutButton {
    top: 0px;
    right: 0;
    width: 20px;
    height: 20px;
    position: absolute;
    font-size:      18px;
    text-shadow:    1px 1px 2px #555555;
}

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

#Navigation {
    top: 61px;
    left: 10px;
    position: absolute;
    z-index: 21;
}

/**
 * @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;

}

#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;
}


/**
 * @subsection      Search icon
 */
#Navigation .Search {
    top: 17px;
    width: 16px;
}

/**
 * @subsection      Navigation Second level
 */

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

#Navigation > .Active .Shadow > ul {
    position: relative;
    top: -8px;
    width: 240px;
    margin-left: 5px;
    margin-top: 1px;
    background: none repeat scroll 0 0 #F5F5F5;
    border: 1px 0px 1px 0px solid #F5F5F5;
}

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

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

#Navigation > .Active .Shadow > ul > li > a {
    display: block;
    position: relative;
    color:               #333333;
    background:          none;
    padding: 4px 10px 4px 8px;
    border-bottom-width: 1px;
    border-bottom-color: #E3E3E3;
    border-bottom-style: solid;
}

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

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

#Navigation > .Active .Shadow > ul > li:hover, #Navigation > .Active .Shadow > 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;
}


} /* end @media */