/* -----------------------------------------------------------------------------------------------------------------
Mobile header globals
----------------------------------------------------------------------------------------------------------------- */
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

.mobileHeader * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;  
}
.mobileHeader span {
    display: inline-block;
}
.mobileHeader .button {
    cursor:pointer;
    display: inline-block;
    vertical-align: middle;
}
.mobileHeader .icon {
    font-size: 120%;
    display: inline-block;

}
.mobileHeader .icon::before  {
    width: 1em;
    display: inline-block;
    text-align: center;
        margin-left: .2em;
    margin-right: .2em;
}
/* -----------------------------------------------------------------------------------------------------------------
Top bar
----------------------------------------------------------------------------------------------------------------- */

.mobileHeaderTop  {
    /*display: table;*/
    width: 100%;
    padding-top:7px;
    padding-bottom:7px;
}
.mobileHeaderTop, .mobileHeaderTop a {  color:#999; }
.mobileHeaderTop > .dnsCell {
    display: table-cell;
    /*float: none;*/
    vertical-align: middle;
}
.mobileHeader .mobileHeaderTop .dnsCell:last-child {
    float:none;
}
.mobileHeaderTop .mobileTitle { line-height: 110%; }

.mobileHeaderTop .button {
    border:0;
    padding:4px 8px 4px 4px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #fff 0%, #eee 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #eee));
    background: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
    background: -o-linear-gradient(top, #fff 0%, #eee 100%);
    /*background: -ms-linear-gradient(top, #fff 0%, #eee 100%);*/
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.15);
    box-shadow: 0 0 3px rgba(0,0,0,0.15);
}

.mobileHeaderTop .mobileContentMenuToggle {
    font-size: 140%;
    padding:4px;
}

.mobileHeaderTop .mobileContentMenuToggle {
    font-size: 140%;
    padding:4px;
}

/* -----------------------------------------------------------------------------------------------------------------
Hover panels
----------------------------------------------------------------------------------------------------------------- */

.mobileHeader .mobilePanel { 
    -o-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 1001;
    position: relative;
    top:0;
    left:0;
    right:auto;
    width: 100%;
    /*height: auto;*/
}
.mobilePanel .dnsRow.first { border-bottom:solid 1px #000; }
.mobilePanel .dnsRow.second, .mobileContentMenu .dnsRow.third { border-top:solid 1px #444; }
.mobilePanel .dnsRow.third, .mobileContentMenu .dnsRow.third > .dnsCell { margin-top: -14px; }
.mobileContentMenu .dnsRow.third { margin-top:0; }
.mobilePanel .dnsRow {
    padding-top: 14px;
    padding-bottom: 14px;
}
.mobilePanel .dnsRow:last-child { padding-bottom: 21px; }
.mobileShopMenu  .dnsRow.first > .dnsCell > div { display: inline-block; }
.mobileContentMenu  .langMenu .lang { margin-right:14px; }

@media screen and (max-width: 32em) {
    .mobilePanel .dnsRow.first .icon {
        width: 100%;
    }
    .mobileShopMenu .dnsRow.first a {
        font-size: 14px;
    }
}
@media screen and (max-width: 32em) {
    .mobilePanel .dnsRow.first .icon {
        width: 100%;
    }
}


/* -----------------------------------------------------------------------------------------------------------------
Hover panel themes
----------------------------------------------------------------------------------------------------------------- */

.mobileHeader.theme-light { background:#ececec; }
.mobileHeader.theme-dark, .theme-light .mobilePanel { background:#333; }
.theme-dark .mobilePanel { background:#f0f0f0; }
.theme-light .mobileMenu li > a { color:#a8a8a8; }
.theme-dark .mobileMenu li > a { color:#555; }
.theme-light .mobileMenu .current > a { color:#fff; }
.theme-dark .mobileMenu .current > a { color:#111; }
.theme-dark .mobileMenu ul > li  { border-bottom:solid 1px #ccc; }
.theme-light .mobilePanel .dnsRow.first a {
    color:#94b9d9;
    text-transform: uppercase;
}
.theme-light .mobilePanel .dnsRow.first .icon { color:#999; }
.theme-dark .mobilePanel .dnsRow.first .icon { color:#595959; }
.theme-dark .mobileHeaderTop .button { color:#444; }
.theme-light .mobileHeaderTop .button.active {
    background: #3d3d3d;
    color:#ececec;
    background: -moz-linear-gradient(top, #222 0%, #3e3e3e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222), color-stop(100%, #3e3e3e));
    background: -webkit-linear-gradient(top, #222 0%, #3e3e3e 100%);
    background: -o-linear-gradient(top, #222 0%, #3e3e3e 100%);
    /*background: -ms-linear-gradient(top, #222 0%, #3e3e3e 100%);*/
    background: linear-gradient(to bottom, #222 0%, #3e3e3e 100%);
}
.theme-dark .mobileHeaderTop .button.active {
    background: #404040;
    color:#bbb;
    background: -moz-linear-gradient(top, #424242 0%, #505050 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #505050));
    background: -webkit-linear-gradient(top, #424242 0%, #505050 100%);
    background: -o-linear-gradient(top, #424242 0%, #505050 100%);
    /*background: -ms-linear-gradient(top, #424242 0%, #505050 100%);*/
    background: linear-gradient(to bottom, #424242 0%, #505050 100%);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.45);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.45);
    box-shadow: 0 0 3px rgba(0,0,0,0.45);
}


/* -----------------------------------------------------------------------------------------------------------------
Menus
----------------------------------------------------------------------------------------------------------------- */
.mobileMenu ul, .mobileMenu li, .mobileMenu li > a {
    display: block;
    width: 100%;
    list-style:none;
    line-height: 1.1;
    font-weight: 300;
    font-size: 20px;
    padding: 0;
    margin: 0;
}
.mobileMenu  ul ul { display:none; }
/*.mobileMenu  li.active > ul, */
.mobileMenu li.current > ul {
    display:block;
}
.mobileMenu ul > li  {
    text-align: left;
    border-bottom:solid 1px #5e5e5e;
    padding-bottom:14px;
    padding-top:14px;
    position: relative;
    padding-right: 1em;
}
.mobileMenu ul > .last  {
    border-bottom:0;
}
.mobileMenu ul > li > a {
    text-transform: uppercase;
    line-height: 130%;
}
.mobileMenu ul > .has-menu > a:after {
    font-family: "dns-icons";
    content: '\e81a';
    font-style: normal;
    font-weight: normal;
    position: absolute;
    right:0;
}
.mobileMenu ul > .has-menu.current > a:after { content: '\e81d'; }
.mobileMenu ul > .alActive > a { font-weight: 700; }
.mobileMenu ul ul {
    margin-top:7px;
    margin-bottom:7px;
    min-width: 100%;
    position: relative;
}
.mobileMenu ul ul > li {
    border:0;
    padding-top:6px;
    padding-bottom:6px;
    text-transform: none;
}
.mobileMenu ul ul > li > a {
    text-transform: none;
    padding-left: 1em;
    font-size: 19px;
}
.mobileMenu ul ul > .has-menu > a:after {
    content: '\e833';
    left:0;
}

.mobileMenu ul ul > .has-menu.current > a:after { content: '\e83e'; }
/*.mobileMenu ul ul ul > li { padding: 0; }*/
.mobileMenu ul ul ul > li > a {
    line-height: 150%;
    padding-left: 2em;
    font-size: 17px;
}
    

/* -----------------------------------------------------------------------------------------------------------------
Search
----------------------------------------------------------------------------------------------------------------- */
.mobileSearch * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    margin:0;
    border:0;
    width: 100%;
    padding:0;
    height: 38px;
}
.mobileSearch > form {
    position: relative;
}
.mobileSearch > form > .form_input {
    font-weight: 300;
    font-size: 18px;
    border: 1px solid #e0e0e0;
    background: #fff;
    margin-top:7px;
    line-height: 38px;
    padding: 0 7px;
}
.mobileSearch > form > .form_button_send {
    width: 15%;
    text-align: left;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    padding: 0;
    margin: 0;
    right:0;
    top:0;
    background: url('//images.salattu.fi/system/images/icon-search-small.png') no-repeat center;
}


/* -----------------------------------------------------------------------------------------------------------------
IEMobile on Windows Phone 7.5
----------------------------------------------------------------------------------------------------------------- */

.winPhone .mobileMenu a::after, 
.winPhone [class^="icon-"]::before, 
.winPhone [class*=" icon-"]::before {
    display: none !important;
}

.winPhone .tuotteetMenuMobile .menu-item::after {
    content:'\25ba';
    font-family: sans-serif;
    font-size: 1rem;
}
.winPhone .tuotteetMenuMobile .menu-item.active::after {
    content:'\25bc';

}
.winPhone .mobileHeaderTop .button {
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
}
.winPhone .mobileHeaderTop .button .icon {
    width: 40px;
    height: 40px;
    padding:4px;
    margin: 0;

}
.winPhone .mobileHeaderTop .icon-menu {
    background: url('//images.salattu.fi/system/images/icon-iemobile-menu.png') no-repeat center;
}
.winPhone .mobileHeaderTop .icon-shop {
    background: url('//images.salattu.fi/system/images/icon-iemobile-cart.png') no-repeat center;
}