/* 
------------------------------------------------------------------------
menu.css
------------------------------------------------------------------------
*/

.sf-menu,
.sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none
}

.sf-menu {
    line-height: 1.0
}

.sf-menu ul {
    position: absolute;
    top: -999em;
    width: 10em
}

.sf-menu ul li {
    width: 100%
}

.sf-menu li:hover {
    visibility: inherit
}

.sf-menu li {
    float: left;
    position: relative
}

.sf-menu a {
    display: block;
    position: relative
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left: 0;
    top: 2.5em;
    z-index: 90
}

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top: -999em
}

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left: 10em;
    top: 0
}

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top: -999em
}

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left: 10em;
    top: 0
}

#menu {
    height: 40px;
    font-size: .9em;
    background: inherit;
    cursor: pointer;
    z-index: 95
}

.waerlite #menu {
    background: #afd0f1
}

#menu a {
    color: #697d91;
    padding: 0 1em;
    xheight: 40px;
    line-height: 40px;
    text-decoration: none
}

#menu li li a {
    color: #697d91;
    xheight: 2em;
    height: 2em;
    line-height: 2em
}

#menu li li {
    background: #ddd
}

#menu>ul>li.group>a {
    background: transparent url(../images/menu_icons/Nav_bar_vertical_divider.jpg) no-repeat scroll right center
}

.waerlite #menu>ul>li.group>a {
    background: transparent url(../images/menu_icons/Nav_bar_vertical_divider_wl.jpg) no-repeat scroll right center
}

#menu>ul>li.sfHover {
    background: black
}

#menu>ul>li.sfHover.group>a {
    color: #ffdc00
}

#menu>ul>li.sfHover a {
    color: #58585a
}

#menu ul li ul li.sfHover>a,
#menu li:hover>a {
    background: #ffdc00;
    color: #58585a
}

div#menu>ul.sf-menu.sf-js-enabled>li.group:hover>a {
    color: #ffdc00
}

#menu ul ul {
    top: 40px
}

#menu ul ul ul {
    top: .3em
}

#menu .arrow {
    display: block;
    position: absolute;
    right: 3px;
    top: 0;
    height: 100%;
    width: 22px;
    background: transparent url(../images/submenu-arrow.png) no-repeat scroll right center
}

#menu .sfHover>.arrow {
    background: transparent url(../images/submenu-arrow_on.png) no-repeat scroll right center
}

#myWaerlinx,
#settings,
#logout,
#help {
    float: right
}

#myWaerlinx a,
#settings a,
#logout a,
#help a {
    display: block;
    width: 21px;
    height: 21px;
    padding: 0;
    margin-top: 5px;
    margin-right: 16px
}

#ghost a {
    display: block;
    width: 26px;
    height: 26px
}

#logout a {
    margin-right: 26px
}

#myWaerlinx a span,
#settings a span,
#logout a span,
#help a span,
#ghost a span {
    position: absolute;
    top: -999em
}

#myWaerlinx a {
    background: url(../images/menu_icons/menu-sprite.png) -21px 0 no-repeat
}

li#myWaerlinx>a:hover,
li#myWaerlinx:hover>a {
    background: url(../images/menu_icons/menu-sprite.png) 0 0 no-repeat
}

#settings a {
    background: url(../images/menu_icons/Admin_off.jpg) no-repeat center center
}

li#settings>a:hover {
    background: url(../images/menu_icons/Admin_on.jpg) no-repeat center center
}

#logout a {
    background: url(../images/menu_icons/menu-sprite.png) -105px 0 no-repeat
}

li#logout>a:hover,
li#logout:hover>a {
    background: url(../images/menu_icons/menu-sprite.png) -84px 0 no-repeat
}

#help a {
    background: url(../images/menu_icons/menu-sprite.png) -63px 0 no-repeat
}

li#help>a:hover,
li#help:hover>a {
    background: url(../images/menu_icons/menu-sprite.png) -42px 0 no-repeat
}

#header-menu,
#header-menu * {
    list-style: none
}

#header-menu li,
span#waerlinxLogo {
    position: absolute;
    z-index: 10
}

#header-menu.zoomed li,
#header-menu.navigate li,
#waerlinxLogo.navigate,
#waerlinxLogo.zoomed {
    z-index: 0
}

#menu.zoomed,
#menu.navigate {
    z-index: 0
}

#supplyChain a,
#work a,
#products a,
#console a,
#waerlinxLogo a,
#operatorName {
    display: block;
    height: 46px;
    padding: 0
}

#supplyChain a span,
#work a span,
#products a span,
#console a span,
#waerlinxLogo a span {
    position: absolute;
    top: -999em
}

#supplyChain {
    width: 73px;
    top: 29px;
    right: 390px
}

#supplyChain a {
    background: url(../images/header_icons/header-icons-sprite.png) -39px -46px no-repeat
}

li#supplyChain>a:hover,
li#supplyChain.active a {
    background: url(../images/header_icons/header-icons-sprite.png) -39px 0 no-repeat
}

#work {
    width: 39px;
    top: 29px;
    right: 346px
}

#work a {
    background: url(../images/header_icons/header-icons-sprite.png) 0 -46px no-repeat
}

li#work>a:hover,
li#work.active a {
    background: url(../images/header_icons/header-icons-sprite.png) 0 0 no-repeat
}

#products {
    width: 30px;
    top: 29px;
    right: 290px
}

#products a {
    background: url(../images/header_icons/header-icons-sprite.png) -112px -46px no-repeat
}

li#products>a:hover,
li#products.active a {
    background: url(../images/header_icons/header-icons-sprite.png) -112px 0 no-repeat
}

#console {
    width: 46px;
    top: 29px;
    right: 230px
}

#console a {
    background: url(../images/header_icons/header-icons-sprite.png) -205px -46px no-repeat
}

li#console>a:hover,
li#console.active a {
    background: url(../images/header_icons/header-icons-sprite.png) -205px 0 no-repeat
}

#waerlinxLogo {
    width: 180px;
    top: 15px;
    right: 25px
}

#operatorName {
    width: 300px;
    height: 20px;
    top: 58px;
    right: 25px;
    color: #fff;
    text-align: right
}

#waerlinxLogo a {
    background: url(../images/header_icons/WaerLinxlogo.png) no-repeat center center
}

.sf-menu.load-hide {
    visibility: hidden
}