/**
 * Header Modules
 */

/* ====== Navigation Module (nav) incl. Sub Modules ====== */
.hdMenu ul {
    
}
.nav {
    position: relative;
}
.nav > li,
.nav-sub > li {
    float: left;
    display: block;
    
    /*
    display: inline-block;
    /* IE7 hack to mimic inline-block /
    *display: inline;
    *zoom: 1;
    */
}
.nav > li {
    margin-right: 1px;
    margin-bottom: -3px;
    height: 29px;

}
.nav > li > a {
    display: block;
    padding: 0 8px;
   
    height: 27px;
    line-height: 27px; 
    
    /*margin-top: 2px;
    border: 1px solid;*/
    color: #fff;
    


    
}
.nav > li.home > a {
    padding: 0;
}
.nav > li.home .i-home {
    display: block;
    width: 39px;
    height: 100%;
}
.nav > li.active,
.nav > li:hover,
.nav > li.hover {
    /* padding-bottom: 1px; */
}
.nav > li.active > a,
.nav > li > a:hover {
    margin-top: 0;
    height: 27px;
}
.nav > li.active > a,
.nav > li > a:hover,
.nav-sub > li > a:hover {
    text-decoration: none;
   
}
.nav > li.active > a,
.nav > li > a:hover,
.nav-sub > li > a:hover{
    text-decoration: none;
    
}
.nav-subGradient {
    position: absolute;
    top: 28px;
    left: 0;
    /*display: none;*/
    width: 100%;
    /*-webkit-border-radius: 0 4px 4px 4px;
       -moz-border-radius: 0 4px 4px 4px;
            border-radius: 0 4px 4px 4px;*/
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
            background-clip: padding-box;
}
.gradient {
    display: none;
}
.nav > li.active .nav-sub,
.nav > li:hover .nav-sub,
.nav > li.hover .nav-sub {
    display: block;
}
/**
 * Additional gradient layer for < IE9
 *
 * There is an additional html element with class name .nav-subGradient which is only available in <IE9 browsers.
 * Becauso of the propritary microsoft filter for the gradient the :hover effekt for the fly-out nav-layer would not work.
 * Instead of applying the gradient to the <ul class="nav-sub"/> element we insert that <span class="nav-subGradient"/> element
 * into the page and apply the gradient to it.
 */
.nav-subGradient {
    display: none;
    height: 32px;
    z-index: -2;
}
/* special z-index handling for < IE9 */
.oldie .nav > li.active .nav-sub {
    z-index: -1;
}
.nav > li.active .nav-subGradient,
.nav > li:hover .nav-subGradient,
.nav > li.hover .nav-subGradient {
    display: block;
}
/* ebable the following block if you want to show the sub-navigation for each top category on :hover */
/*
.nav > li:hover .nav-subGradient,
.nav > li.hover .nav-subGradient {
    z-index: 7;
}
.nav > li.active:hover .nav-subGradient {
    z-index: -2;
}
*/
.oldie .nav > li.active .nav-sub {
    z-index: 6;
}
/* end special oldie handling */
.nav > li:hover .nav-sub,
.nav > li.hover .nav-sub {
    z-index: 1000;
}
.nav-sub > li {
    height: 24px;
    line-height: 24px;
    /*
    border-left: 1px solid #496581;
    border-right: 1px solid #1E3F62;
    */
}
/*
.nav-sub > li:first-child {
    border-left: 0;
}
.nav-sub > li:last-child {
    border-right: 0;
}
*/
.nav-sub > li > a {
    display: block;
    padding: 0 20px 0 0;
}
.nav-sub .nav-subTxt {
    border-bottom: 2px solid transparent;
}
/* Hide the fly-out layer only visually, but have it available for screenreaders */
.nav-layer {
    position: absolute;
    display: block;
    opacity: 0;
    margin: 0;
    width: auto;
    max-width: 700px;
    height: 0;
    line-height: 150%;
    margin-top: -1px;
    margin-left: -60px;
    z-index: -1; /* to get the transition working */
    /* styling see theme.css */
}
.ie7 .nav-layer,
.ie8 .nav-layer {
    display: none;
    margin-top: 2px;
}
/* sets nav-layer to 100% width */
.nav-layerFull {
    width: 100%;
    left: 0;
}

.nav-layerSpec{
    min-width:350px;
    /* width:350px; */
}

/* fly-out layer on mouseover */
.nav-sub > li:hover .nav-layer,
.nav-sub > li.hover .nav-layer {
    display: block;
    height: auto;
    opacity: 1;
    z-index: 1000; /* to get the transition working */
}
.nav-layer-bd {
    padding: 20px;
    border: 1px solid;
    border-top: 0;
}

.submenu_container .prl div.h4,.submenu_container .prl div.h4 a{
    font-family: "Museo Sans", Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    color: #3d3d3d !important;
    background: none;
    padding-left: 0;
}
.nav-layer .h4{
    border-bottom: 1px solid #CCC;
    font-weight: bold;
    font-size: 12px;
}

.subnavigation-pane a {
    color: #091d61;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-transform: none;
}


.i-tooltip-up-arrow {
    width: 11px;
    height: 6px;
    display: inline-block;
    vertical-align: text-top; 
}
#headerCartList{
    top: 35px;
    left: -130px;
}
#headerCartList .i-tooltip-up-arrow {
    vertical-align: text-bottom;
    margin-bottom: -1px;
}
.subnavigation-arrow {
    display: none;
    margin: 0 auto; 
    top: -6px;
    z-index: 1000;
    position: relative;
    margin-bottom: -6px;
}
.nav-sub li.active .subnavigation-arrow,
.nav-sub li:hover .subnavigation-arrow{
    display: block;
}
.nav li.active .subnavigation-arrow,
.nav li:hover .subnavigation-arrow{
    display: block;
    top: -6px;
}

.submenu_container .prl h4 a:last-child,.submenu_container .prl h4:last-child{
    border:0;
}

/* SubMenu Media */
div.submenuMedia {
    width: 200px;
    margin: 20px auto;
}
div.submenuMedia a img, div.submenuMedia a span {
    width: 200px;
    display: inline-block;
    text-align: center;
}

div.submenuMedia a span.submenuTitle {
    font-size: 13px;
    font-weight: bold;
    margin: 15px 0 10px 0;

}