// Bootstrap mixins
@import "../asset/bootstrap/less/mixins.less";

// Template variables
@import "../asset/bootstrap/less/variables.less";
@import "color/variables_color.less";

// Menu CSS base : LTR Menu Style
// --------------------------------------------------

// Root ul element
#yt_menuposition{
   
    /*------------------
     CSS Menu & Moo Menu
    -------------------*/
    ul.navi {margin: 0 ;padding: 0;list-style: none;
        > li.level1 {float: left;position: relative;padding: 0;border-right: 1px solid #575757;position: relative;
            &.first {}
            &.last {}
            &.havechild{
                &:after{content: "\f0d7";font-size: 12px; font-family: "FontAwesome";position: absolute;top: 28%;right: 22px;z-index: 5;color: @white;}
                .level1  {padding: 12px 35px 12px 25px ;}
            }
            .item-link  {margin: 0 ;line-height: 30px;padding: 12px 35px ;color:@white;font-size:118%;display: block;}
            
            // Add description and show icons
            .showdesc{text-align: center;
                span.menu-title{line-height: 100%;padding-bottom: 3px;margin-top: -1px;display: block;}
                span.menu-desc{display: block;font-size: 11px;color: #ccc;line-height: 100%;}
            }
            
            //Hover and Active (:hover of cssmenu, .hover of moomenu)
            &:hover,&.hover,&.active{background: lighten(@linkColor,5%);}
            &.active{.box-shadow(~"1px 1px 2px 0 rgba(0, 0, 0, 0.3) inset");}
            &:hover ul.level2 ,&.hover ul.level2 {left: 0;}
            
        }
        
        // Show All Submenu
        // Menu level2
        ul {left: -999em;position: absolute;z-index: 10;margin: 0;padding: 0;list-style: none;width: 210px;}
        ul.level2 {box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); #translucent .background(@linkColor,0.9);
            &:before{content: "";width:100%;height: 5px;position: absolute;left: 0;top:-5px;}
            li {position: relative;padding: 1px 0 1px 0;
                &.first{border-top: none;}
                .item-link {display: block;margin: 0;padding: 6px 12px 6px 23px;color: @paginationBorder;font-size: 100%;text-transform: none;line-height: 22px; 
                   &.havechild:after{font-family: 'FontAwesome';content: "\f0da";font-size: 14px;position: absolute;right: 10px;z-index: 1;}
                    .menu-title {display: inline-block;}    
                }
                
                // Add description and show icons
                .showdesc{text-align: left;
                    span.menu-title{padding-bottom: 5px;}
                    span.menu-desc{font-family: "arial";padding-bottom: 3px;}
                }
                
                // Hover and Active menu
                &:hover,&.hover,&.active{
                    .level2{color:@white; background-color: darken(@linkColor,10%); .box-shadow(~"0px 1px 0 rgba(255,255,255,0.2) ,0px -1px 0 rgba(0, 0, 0, 0.35),0px 1px 1px  rgba(0,0,0,0.12) inset");}
                }
                &:hover ul.level3,
                li.level3:hover ul.level4,
                li.level4:hover ul.level5{left: 100%;top:0px;}
            }
            // Menu level3, level4 & level5
            ul{ ul.level2();  #translucent .background(@linkColor,0.9);}
            ul.level3 li { 
                .item-link{  }
                
                // Hover and Active menu
                &:hover,&.hover,&.active{
                    > .item-link{background-color: darken(@linkColor,10%);.box-shadow(~"0px 1px 0 rgba(255,255,255,0.2) ,0px -1px 0 rgba(0, 0, 0, 0.35),0px 1px 1px  rgba(0,0,0,0.12) inset");}
                }
            }
        }
    }
    
    /*------------------
    Dropline Menu
    -------------------*/
    #droplinenavigator{position: relative;
         li.level1{position: static;
            &.havechild:after{display: none;}
            >.item-link{padding: 12px 35px ;}
        }
        ul.level2{margin: 0;width: 100%;padding: 5px;
            li.level2{float: left;border: none;
                a.level2 {
                    &.havechild:after{content: "";display: none;}
                }
                &:hover{position: relative;
                    ul.level3{left: 0;top: 100%;}
                }
            }
        }
    }
    
    /*------------------
    Mega Menu
    -------------------*/
    #meganavigator{
        li.level1{
            .mega-content{position: absolute;left: -999em;z-index: 10; #translucent .background(@linkColor,0.9);box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); 
                //Mega colums
                .mega-col {float: left;
                    &.one div.mega-module{padding: 10px 12px;overflow: hidden;}
                    &.more{margin:12px 0;padding: 0 12px;.box-sizing(border-box); border-right: 1px solid lighten(@linkColor,15%);
                        
                        > ul.subnavi{box-shadow: none;width:auto;background: transparent;}
                    }
                    &.more.first{padding-left: 12px;}
                    &.more.last{padding-right: 12px; border-right: none;  }
                    
                    //Mega Item
                    .mega-group {display: block;
                        div.mega-group-title{
                            .item-link{font-size: 150%;padding: 0 10px  10px;background: transparent;
                                .menu-title{line-height: 100%;}
                            }
                            .showdesc{
                                .menu-title{padding: 0 0 5px;}
                                .menu-desc{font-family: "arial";}
                            }
                        }
                        div.mega-group-content{position: relative;color: @white;overflow: hidden;
                            ul{position: static;width: auto;}
                            a{color:@paginationBorder;
                                &:hover{color: @white;}
                            }
                        }
                    }
                 
                }
            }
        }
    }
    
    
}

//
// Menu CSS base : RTL Menu Style
// --------------------------------------------------
.rtl{
    #yt_menuposition{
        /*------------------
        CSS Menu & Moo Menu
        -------------------*/
        ul.navirtl{
            li.level1{float: right;margin: 0 0 0 1px;
                &:hover ul.level2,&.hover ul.level2{left: auto;right: 0;}
            }
            ul {left: auto;right: -999em;}
            ul.level2 {
                li {
                    .item-link{padding: 6px 23px 6px 12px;
                        &.havechild:after{right: auto;left: 10px;content: "\f0d9";}
                    }
                     // Add description and show icons
                    .showdesc{text-align: right;}
                    
                    // Hover and Active menu
                    &:hover,&.hover,&.active{
                        .level2{}
                    }
                    &:hover ul.level3,
                    li.level3:hover ul.level4,
                    li.level4:hover ul.level5{left: auto;right: 100%;}
                }
                
                // Menu level3, level4 & level5
                ul.level3 li{
                    // Hover and Active menu
                    &:hover,&.hover,&.active{
                        > .item-link{}
                    }
                    .item-link{padding: 6px 23px 6px 10px;}
                    
                }
            }
        }
        
        /*------------------
        Dropline Menu
        -------------------*/
        #droplinenavigator{
            ul.level2 li.level2{float: right;
                &:hover{
                    ul.level3{left: auto;right: 0;}
                }
            }
        }
        
        /*------------------
        Mega Menu
        -------------------*/
        #meganavigator{
            li.level1{
                .mega-content{ .box-shadow(-1px 1px 2px rgba(0, 0, 0, 0.4));
                    //Mega colums
                    .mega-col {float: right;
                        &.more{border: none;border-left: 1px solid #36A7FF;}
                        &.more.first{padding-right: 10px;
                            .mega-group div.mega-group-title{margin-right: -10px;}
                        }
                        &.more.last{padding-left: 10px;border: none;
                            .mega-group div.mega-group-title{margin-left: -10px;}
                        }
                        
                        //Mega Item
                        .mega-group {
                            div.mega-group-title .item-link{}
                        }
                    }
                }
            }
        }
    }
}
