@import 'elements.less';
@import 'clear.less';
(~'div@{id}'){
    .clear;
}

(~'div@{id}'){
    margin: @margin;
    
    .nextend-accordion-menu-inner{
        overflow: hidden;
        width: 100%;
        margin-top:0;
    }
    
    .nextend-productnum{
    border: 1px solid #EAEAEA;
    box-shadow: none;
    font-size: 11px !important;
    line-height: 15px !important;
    margin-top: 1px;
    padding: 0 6px;
    }
    
    .nextend-accordion-menu-inner-container{
        overflow: hidden;
        position: relative;
    }
    
    dl,
    dt,
    dd{
        display: block;
        position: relative;
    }
    
    dl.level1 dt .inner{
      margin: 0;
    }
    
    div div.title{
        h3{
            margin: 0;
            padding-top: 8px !important;
            padding-bottom: 5px !important;
            min-height: 26px;
            background: transparent;
            d: e(~"@{titlefont}");
        }
    }
    
    .outer,
    .inner{
        display: block;
    }
    
    .outer{
        background: none repeat-x 0 100%;
    }
    
    .levels (@index) when (@index < 6){
        
        &.noscript{
            (~"dl.level@{index}") {
                dt.parent .inner{
                    background-image: colorizeimage(~"@{level@{index}minuscolorize}", ~"@{level@{index}minusimage}", ~"@{level@{index}minuscolor}");
                }
            }
        }
        
        (~"dl.level@{index}") {
            dt.parent{
                .inner{
                    background-image: colorizeimage(~"@{level@{index}pluscolorize}", ~"@{level@{index}plusimage}", ~"@{level@{index}pluscolor}");
                    background-repeat: no-repeat;
                    background-position: (~"@{level@{index}plusposition}") center;
                    cursor: pointer;
                }
                &.opened,
                &.opening{
                    .inner{
                        background-image: colorizeimage(~"@{level@{index}minuscolorize}", ~"@{level@{index}minusimage}", ~"@{level@{index}minuscolor}");
                    }
                }
            }
            
            dt{ 

                span{
                    d: e(~"@{level@{index}font-text}");
                }
                
                a{
                    padding-left: 0px !important;
                    &,
                    span{
                        d: e(~"@{level@{index}font-link}");
                    }
                }
                
                .inner{
                    background: none repeat 0 0;
                    border-style: ~"@{level@{index}borderstyle}";
                    border-color: ~"@{level@{index}bordercolor}";
                    @borderwidth : "level@{index}borderwidth";
                    border-width: @@borderwidth;
                }
                
                &.opening,
                &.opened,
                &.active{
                    span.inner span,
                    a{
                        &,
                        span{
                            d: e(~"@{level@{index}font-active}");
                        }
                    }
                }
                
                &:HOVER{
                    span.inner span,
                    a{
                        &,
                        span{
                            d: e(~"@{level@{index}font-hover}");
                        }
                    }
                }
            }
            
            .outer{
                padding: e(~"@{level@{index}margin}");
                background-image: transparentcolor(~"@{level@{index}border}");
            }
            
            .inner{
                padding: e(~"@{level@{index}padding}");
                margin: 0 0 0 8px;
            }
        }
        
        .levels(@index + 1);
    }
    
    .levels (5) {}
    
    .levels(1);
}