/* Don't display bullets. */
.css-treeview
{
    list-style: none;
}

/* Align the label and provide a pointer cursor. */
.css-treeview label
{
    display: inline;
    vertical-align: middle;
    cursor: pointer;
}

/* Highlight selected nodes. */
.css-treeview label.selected
{
    background-color: #08C;
    color: white;
    padding: 2px;
}

/* Hide child nodes of an unchecked expander. */
.css-treeview input.expander ~ ul
{
    display: none;
}

/* Show child nodes of a checked expander. */
.css-treeview input.expander:checked ~ ul
{
    display: block;
}

/* Hide the expander checkbox. */
.css-treeview input.expander
{
    position: absolute;
    opacity: 0;
}

/* Don't change the cursor for disabled expanders. */
.css-treeview input.expander:disabled
{
    cursor: default;
}

/* Remove the margin from actual checkboxes. */
.css-treeview input.check
{
    margin: 0;
}

/* Before a disabled node's expander span, add a blank 20px padding */
.css-treeview input.expander:disabled + span.expander::before
{
    content: '';
    padding-right: 20px;
}

/* Before an unexpanded node's expander span, display the '>' expand icon */
.css-treeview input.expander:enabled + span.expander::before
{
    background: url(../images/tree.png);
    background-position: 0 0;
    content: '';
    padding-right: 20px;
}

/* Before an expanded node's expander span, display the 'V' expanded icon */
.css-treeview input.expander:checked:enabled + span.expander::before
{
    background-position: 1px 16px;
}