File: htmltree.css

/*container do tree*/
.ht{
    position: relative;
    top: 0;
    bottom: 0;
    margin: 0;
    height: 100%;
}

/*itens expans?veis e n?o expans?veis em qualquer n?vel*/
.ht .ht-node,
.ht .ht-node-root{
    margin-left: 0.5em;
}

/*itens expans?veis e n?o expans?veis de primeiro n?vel*/
.ht > .ht-node,
.ht > .ht-node-root{
    margin-left: 0;
}

/*label*/
.ht .ht-label{
    cursor: pointer;
}

/*controlador do tree*/
.ht .ht-control{
    display: none;
}

/*quando o controlador n?o estiver marcado, o elemento posterior ao label fica oculto*/
.ht .ht-control:not(:checked) + .ht-label + .ht-nodes{
    display: none;
}

/*formata o label quando retra?do*/
.ht .ht-control:not(:checked) + .ht-label::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 0; 
    height: 0; 

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid grey;
}

/*formata o label quando expandido*/
.ht .ht-control:checked + .ht-label::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 0; 
    height: 0; 

    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid grey;
}

.ht .ht-node.ht-label{
    /*mostra o cursor padr?o para para itens n?o expans?veis*/
    cursor: default;
}