/* =========================================================================
/* ====== SITE'S MOBILE CAT TREE ELEMENTS & STYLES (FB STYLE SLIDE-OUT)
/* =======================================================================*/

body {
    padding-left: 0;
}

.cat-trigger {
    height: 35px;
    margin-left: 10px;
    padding: 0;
    width: 35px;
    float: left;
}

.cat-trigger .icon-stack .icon-reorder {
    margin-left: 3px;
}

body.dashOpen {
    padding-left: 270px;
    position: fixed;
}

body.dashOpen #mobile-tree.active {
    overflow: scroll;
}

#mobile-tree {
    background: #3E4555;
    display: block;
    position: fixed; top: 0; left: -270px; bottom: 0;
    width: 270px;
}

#mobile-tree.active {
    left: 0;
}

#mobile-tree h3 {
    background: #242A37;
    border-bottom: #3E4555;
    color: #C4CCDA;
    font-size: 18px;
    font-weight: 400;
    height: 70px;
    line-height: 70px;
    margin: 0;
    padding: 0 10px;
}

.category-tree .toggle {
    float: right;
    line-height: 30px;
}

@media (max-width: 979px) {

    .collapsed ul { display: none; }

    .category-tree {
        display: none;
        margin: 0;
        padding:0;
    }

    #mobile-tree.active .category-tree{
        display:block;
    }

    .category-tree li {
        background-color: #32394A;
        display: block;
        line-height: 30px;
        list-style: none;
        margin:0;
        padding: 0;
    }

    .category-tree .depth-1 {
        background: #32394A;
        border-bottom: 1px solid #242A37;
        border-top: 1px solid #3E4555;
        /* position: relative; */
    }

    .category-tree .depth-2 {
        background: #212839;
        border-bottom: 1px solid #131926;
        border-top: 1px solid #2D3444;
        /* position: relative; */
    }

    .category-tree .depth-3 {
        background: #101728;
        border-bottom: 1px solid #020815;
        border-top: 1px solid #1C2333;
    }

    .category-tree li a {
        color: #C4CCDA;
        display: block;
        font-weight: lighter;
        padding: 8px 15px;
    }

    .category-tree a:hover {
        text-decoration:none;
    }

    .category-tree li .sub-category-tree {
        margin: 0;
        padding: 0;
    }

    .category-tree li > .sub-category-tree {
        display: none;
    }

    .category-tree li .sub-category-tree.active {
        display: block;
    }



}



/* =========================================================================
/* ====== DESKTOP CATEGORY TREE ELEMENTS & STYLES	 
/* =======================================================================*/

@media (min-width: 980px) {

    .collapsed ul { display: none; }

    .category-tree {
        margin: 0;
        padding:0;
        position: relative;
        z-index: 4;
    }

    .category-tree li {
        background-color: #32394A;
        display: block;
        line-height: 30px;
        list-style: none;
        margin:0;
        padding: 0;
    }

    .category-tree > li:hover {
        background: #212839;
    }

    .category-tree li a {
        color: #C4CCDA;
        display: block;
        padding: 8px 15px;
        height: 50px;
    }

    .category-tree li a:hover {
        text-decoration:none;
    }

    .category-tree li a .category-name {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-tree li a .category-name.parent {
        display: inline-block;
        width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-tree .depth-1 {
        background: #101728;
        border-bottom: 1px solid #020815;
        border-top: 1px solid #1C2333;
        position: relative;
    }

    .category-tree .depth-2 {
        background: #212839;
        border-bottom: 1px solid #131926;
        border-top: 1px solid #2D3444;
        display: block;
        float: left;
        position: relative;
        width: 240px;
    }

    .category-tree .depth-3 {
        background: #32394A;
        border-bottom: 1px solid #242A37;
        border-top: 1px solid #3E4555;
        display: block;
        float: left;
        width: 240px;
    }

    .category-tree .sub-category-tree {
        display: none;
        margin: 0;
        padding: 0;
    }

    .category-tree .depth-1 > .sub-category-tree {
        background: #212839;
        border: none;
        position: absolute;
        top: -1px;
        left: 100%;
        width: 720px;
        z-index: 20;
    }

    .category-tree .depth-1:hover > .sub-category-tree {
        display: block;

        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
        -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
    }

    .category-tree .depth-1 > .sub-category-tree > .sub-category-tree {
        background: #32394A;
        border: none;
        float: left;
    }

    .category-tree .depth-2 > .sub-category-tree {
        display: none;
    }

    .category-tree .sub-category-tree.expanded {
        display: block;
    }

    .category-tree .placeholder {
        background:#32394A;
        border: none;
        display: none;
        float: left;
        overflow: hidden;
        width: 720px;
    }

    #cat-tree-container .depth-1.nonleaf-category > a:after{
        content:'\25B6';
        font-size:.7em;
        padding-left:3px;
        vertical-align: middle;
    }

    #cat-tree-container .depth-2.nonleaf-category > a:after{
        content:'\25BC';
        font-size:.7em;
        padding-left:3px;
        vertical-align: middle;
    }

}