@charset "UTF-8";

@media all {

    .dropdown {
        width: 100%;
        overflow: visible;
        float: left;
        display: block;
        position: relative;
        line-height: 0;
        text-align: left;
        font-size: 1em;

        z-index: 800;
    }

    .dropdown:hover {
        z-index: 801;
    }

    .dropdown ul,
    .dropdown li {
        /* reset */
        list-style: none;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .dropdown,
    .dropdown ul,
    .dropdown li,
    .dropdown a {
        /* fix some hover issues for all browsers (lost background focus on absolute elements) */
        background: #fff url(../images/blank.gif);
    }

    .dropdown ul {
        display: inline;
        float: left;
    }

    .dropdown li {
        display: block;
        position: relative; /* important for having right dimensions from beginning */

        float: left; /* LTR */
        font-size: 1.0em;
        line-height: 1em;
    }

    .dropdown-vertical ul,
    .dropdown-vertical li {
        display: block;
        float: none;
    }

    .dropdown li.hover,
    .dropdown li:hover {
        /* position: relative; */
        z-index: 857;
        cursor: default;
    }

    .dropdown li a {
        display: block;
        width: 100%;
        float: left;
        font-size: 1em;
        cursor: pointer;
    }

    .dropdown li span.item-title {
        display: block;
        width: auto;
    }

    .dropdown .drop-item {
        position: absolute;
        visibility: hidden;

        /* optional fallback? width: 150px; */

        /* defaults (open right) */
        top: 0;
        bottom: auto;
        left: 100%;
        right: auto;

        z-index: 856;
        min-width: 100%;
    }

    .dropdown .drop-item .drop-item,
    .dropdown-vertical .drop-item {
        min-width: inherit;
        width: auto; /* from view level 2 or vertical always auto width */
    }

    .dropdown .drop-item ul {
        width: 100%;
    }

    .dropdown-horizontal .viewLevel0 .drop-item {
        /* horizontal level0 (open down by default) */
        top: 100%;
        bottom: auto;
        left: 0;
        right: auto;
    }

    .dropdown-horizontal .viewLevel1 .drop-item {
        /* horizontal level0 (open right by default) */
        top: 0;
        bottom: auto;
        left: 100%;
        right: auto;
    }

    .dropdown li:hover > .drop-item,
    .dropdown li a:focus + .drop-item {
        visibility: visible;
    }

    .dropdown .drop-item-content {
        position: absolute;
        top: -32768px;
        left: -32768px;
    }

    .dropdown li:hover > .drop-item > .drop-item-content,
    .dropdown li.hover > .drop-item > .drop-item-content,
    .dropdown li a:focus + .drop-item > .drop-item-content,
    .dropdown-linear .viewLevel1 .drop-item .drop-item-content,
    .js .dropdown .drop-item-content {
        position: static;
        top: auto;
        left: auto;
    }

    .dropdown li li .drop-item {
        top: 0;
        bottom: auto;
        left: 100%;
        right: auto;
    }

    .dropdown-linear li,
    .dropdown-linear li.hover,
    .dropdown-linear li:hover {
        position: static !important;
    }

    .dropdown-linear .viewLevel1 .drop-item {
        position: relative;
        visibility: visible;
        left: 0;
        top: 0;
    }

    .dropdown-linear .viewLevel1 .drop-item li {
        width: 100%;
    }

    /**
     * @Experimental: Special mix with important rules and specificity to Inherit parent direction
     */
    .dropdown .drop-item-up {
        top: auto !important;
        bottom: 100% !important;
        left: 0 !important;
        right: auto !important;
    }

    .dropdown .drop-item-right {
        top: 0 !important;
        bottom: auto !important;
        left: 100% !important;
        right: auto !important;
    }

    .dropdown .drop-item-left {
        top: 0 !important;
        bottom: auto !important;
        left: auto !important;
        right: 100% !important;
    }

    .dropdown .drop-item-down {
        top: 100% !important;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    }

}