﻿/* all categories menu */
#menu
{
    /*overflow: auto;*/
    position:absolute;
    z-index: 2000;
    /*height:400px;*/
    height: 0px;
    overflow: hidden;
    width:100%;
}
        
.parent-menu
{
    background-color: #f9f9f9;
    min-width: 233px;
    float: left;
    height: 100%;
}
        
#menu ul, #menu ul li
{
    list-style-type: none;
    padding:0;
    margin:0;
}
        
#menu ul li a
{
    padding: 10px 15px;
    display: block;
    color: #000;
    text-decoration: none;
}
        
#menu ul li ul li a
{
    padding: 5px 10px;
}
        
#menu ul li a:hover
{
    font-weight: bold;
}
        
#menu ul li:hover > ul
{
    left: 233px;
    /*min-width: 250px;*/
    width: 250px;
    -webkit-transition: left 200ms ease-in;
    -moz-transition: left 200ms ease-in;
    -ms-transition: left 200ms ease-in;
    transition: left 200ms ease-in;
}
        
#menu ul li > ul
{
    position: absolute;
    background-color: #f9f9f9;
    /*background-color: Silver;*/
    top: 0;
    left: 0px;
    /*min-width: 150px;*/
    max-width: 232px;
    z-index: -1;
    height: 100%;
    -webkit-transition: left 200ms ease-in;
    -moz-transition: left 200ms ease-in;
    -ms-transition: left 200ms ease-in;
    transition: left 200ms ease-in;
    border-left: solid 2px #EBEBEB;
}
        
#menu ul li > ul li a:hover
{
    font-weight: bold;
}
        
#menu ul li .navcontent
{
    position: absolute;
    width: 150px;
    top: 0;
    left: 0px;
    height: 100%;
    z-index: -1;
    font-family:Arial Black;
    font-size:28px;
    padding:5px 10px;
    background-repeat:no-repeat;
}

.overlay
{
    position: absolute;
    display: none; /*overlay element is hidden until jquery shows it*/
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0; /*absolutely position element covers entire page*/
    background: #939598;
    opacity: .5;
    height:100%;
    z-index:5;
}
        
#allcats.arrowclosed:before 
{
    content:"►";
    font-size:14px;
}
        
#allcats.arrowopen:before 
{
    content:"▼";
    font-size:14px;
}
        
#allcats 
{
    cursor:pointer;
    float:left;
}
/* end all categories menu */

/* all customer tools menu */
#custmenu
{
    /*overflow: auto;*/
    position:absolute;
    z-index: 2000;
    /*height:400px;*/
    height: 0px;
    overflow: hidden;
    width:100%;
    left:24%;
}
        
.parent-menu
{
    background-color: #f9f9f9;
    min-width: 233px;
    float: left;
    height: 100%;
}
        
#custmenu ul, #custmenu ul li
{
    list-style-type: none;
    padding:0;
    margin:0;
}
        
#custmenu ul li a
{
    padding: 10px 15px;
    display: block;
    color: #000;
    text-decoration: none;
}
        
#custmenu ul li ul li a
{
    padding: 5px 10px;
}
        
#custmenu ul li a:hover
{
    font-weight: bold;
}
        
#custmenu ul li:hover > ul
{
    left: 233px;
    min-width: 240px;
    -webkit-transition: left 200ms ease-in;
    -moz-transition: left 200ms ease-in;
    -ms-transition: left 200ms ease-in;
    transition: left 200ms ease-in;
}
        
#custmenu ul li > ul
{
    position: absolute;
    background-color: #f9f9f9;
    /*background-color: Silver;*/
    top: 0;
    left: 0px;
    min-width: 150px;
    z-index: -1;
    height: 100%;
    -webkit-transition: left 200ms ease-in;
    -moz-transition: left 200ms ease-in;
    -ms-transition: left 200ms ease-in;
    transition: left 200ms ease-in;
    border-left: solid 2px #EBEBEB;
}
        
#custmenu ul li > ul li a:hover
{
    font-weight: bold;
}
        
#custmenu ul li .navcontent
{
    position: absolute;
    width: 150px;
    top: 0;
    left: 0px;
    height: 100%;
    z-index: -1;
    font-family:Arial Black;
    font-size:28px;
    padding:5px 10px;
    background-repeat:no-repeat;
}

.overlay
{
    position: absolute;
    display: none; /*overlay element is hidden until jquery shows it*/
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0; /*absolutely position element covers entire page*/
    background: #939598;
    opacity: .5;
    height:100%;
    z-index:5;
}
        
#custtools.arrowclosed:before 
{
    content:"►";
    font-size:14px;
}
        
#custtools.arrowopen:before 
{
    content:"▼";
    font-size:14px;
}
        
#custtools
{
    cursor:pointer;
    float:left;
    margin-left:7em;
}
/* end customer tools menu */




/* mobil menu */

.panel, .subPanel
{
    width: 100%;
    background: #F8F7F2;
    position: absolute;
    /*height: 100%;*/
    top: 0;
    bottom: 0;
    /*right: -200px;*/
    right:0px;
    -webkit-transition: ease 0.5s;
    -moz-transition: ease 0.5s;
    -o-transition: ease 0.5s;
    transition: ease 0.5s;
    overflow: hidden;
    height:0px;
    text-align:left;
}
        
.panel
{
    z-index: 10;
    /*border-left: 1px solid #F2F0E8;*/
    font-size:0; /* this removes spaces that was above panel */
    border-top:4px solid #b70005;
    background-color:#E8E8E8;
}
        
.panel a 
{
    color:Black;
}
        
.panel ul 
{
    list-style:none;
    padding:0;
}
        
.panel ul li
{
    width: 100%;
    padding: 10px;
    font-size: 1.2rem;
    border-bottom: 1px solid Silver;
    /*color: #F15F48;*/
    color:Black;
    cursor: pointer;
    font-weight:bold;
    background-color:#F8F7F2;
}
        
.panel ul li:hover
{
    background: #FFB305;
    color: #fff;
}
        
.panel ul li ul li
{
    color: Black;
}
        
.panel ul li ul li:hover
{
    background: #00B4AB;
    color: #fff;
}

.panel ul li.link 
{
    border-bottom:none;
    background-color:#E8E8E8;
    font-size:16px;
    font-weight:normal;
}        
        
.panel.isOpen, .subPanel.isOpen
{
    /*-webkit-transform: translateX(-200px);
    -moz-transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    -o-transform: translateX(-200px);
    transform: translateX(-200px);*/
    height:100%;
}
        
.subPanel
{
    z-index: 20;
    margin:0;
}
    
.subPanel .heading::before 
{
    content:'\25c0';
    font-weight:bold;
    margin-right:.5em;
    font-size:85%;
}
    
.subPanel .heading
{
    background: #B70005 !important;
    color: #fff !important;
    font-weight: bold;
}
        
.closeSubPanel, .closePanel, .openSubPanel
{
    cursor: pointer;
}

/* end of mobile menu */