/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2018 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     http://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

:host-context .nav-container {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: url(/content/dam/we-retail-journal/brand/journal_branding.png) no-repeat;
    background-size: 350px;
    background-position: 80px 80px;
    padding: 60px 0 80px 80px;
}

@media (max-width: 800px) {
    :host-context .nav-container::before {
        content: ' ';
        width: 25px !important;
    }
}

:host-context .nav-container::before {
    content: ' ';
    width: 460px;
    min-height: 160px;
    height: 100%;
    float: left;
    display: block;
}

:host-context .nav-container li {
    float: left;
}

:host-context .nav-container > li {
    margin-right: 15px;
}

:host-context .nav-container > li > .nav-item {
    border-bottom: 1px solid red;
}

:host-context .nav-container .nav-item.active {
    background-color: #222;
}

:host-context .nav-container ul {
    list-style-type: none;
    padding: 0;
    margin-top: 1px;
}

:host-context .nav-container ul li {
    float: initial;
}

:host-context .nav-item {
    display: block;
    color: white;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
}

:host-context .nav-item:hover {
    background-color: #444;
}
