// START FRONTEND
body#categories{ 

    .mainbar{

        h2{
            background: none repeat scroll 0 0 #93D7D7;
            border-bottom: 8px solid #ABE0E0;
            color: #286F6F;
            font-size: 24px;
            margin-bottom: 0;
            margin-top: 0;
            padding: 4px;
            span{
                float:right;
                font-size:14px;
                height: 30px;
                line-height: 30px;
                font-weight:normal;
            }
        }
    }
  
    #wrapper{           
        > section {

            ul.categoryList{
                padding:20px;
                list-style:none;

                > li{
                    font-weight:bold;
                }

                li{
                    padding:4px;        
                }

                ul{
                    margin-left:20px;
                    border-left:solid 1px gray;
                    list-style:none;
                }

            }

        }
    }
}
// END FRONTEND



//BACKEND
body#backend{   

    .categoriesTree{
        padding:0 20px;
        float:left;
        width:46%;

        >p{
            margin:0 0 20px 8px;
        }
    }

    .editCategory{
        float:left;
        width:46%;

        form{
            font-size:12px;

            fieldset{
                margin-bottom:10px;
                label{
                    display:block;
                    font-weight:bold;
                    margin-bottom:4px;
                }
                input[type=text],textarea{
                    padding:6px;
                    width:100%;
                }
            }
        }

    }

    .box{
        background:white;
        padding:8px;
        .rounded-corners(8px);
        margin:0 0 8px 8px;

        .info{
            color:gray;
            font-size:11px;
            padding:0 0 10px 10px;
        }

        .button{
            margin:0;
        }

        label + p{
            font-size:12px;
            margin-bottom:4px;
        }

        select[name="category_id"], select[name="parent"], select[name="family_id"]{
            width:auto;
        }

    }

    ul.categoryList{
        padding:0 20px;
        list-style:none;        

        li{            
            
            a{          
                position:relative;
                color:#fff;
                margin:2px 0;
                display:inline-block;
                padding:0 24px 0 6px;   
                height:20px;
                line-height:20px;
                text-decoration:none;
                .rounded-corners(4px);
            }

            a.markToDeactivate{
                background:red;
            }

            .deactivate{
                position:absolute;
                top:0;
                right:3px;
                display:none;
                
            }
        }

        li > a:hover .deactivate{ 
            display:inline-block;
            float:right;
            margin:2px 0 0 8px;
        }

        li > span{
            background: none repeat scroll 0 0 #71B6FD;
            border-radius: 10px;
            color: #FFFFFF;
            font-size: 10px;
            margin-right: 2px;
            padding: 3px 8px;
        }

        ul{
            margin-left:20px;
            list-style:none; 
            li{            

                a{                    
                    background:gray;
                }    
            }
        }

        li{a{background:#000;}ul{li{a{background:#464646;}ul{li{a{background:#868686;}ul{li{a{background:#BFBFBF;}ul{li{a{background:#E2E2E2;}ul{li{a{background:#FBFBFB;color:gray;}}}}}}}}}}}}

    }

    ul.familyList{
        margin-left:40px;
        
        li{
            margin-bottom:10px;
        }
    }

}