/*
 * Structured tree-form lists
 */

ul.treelist,
.treelist ul
{
    list-style-type: none;

    padding: 0px;

    /* Lists of items are vertically separated, visually more so than plain list items */
    margin: 10px 0px;
}

.treelist li
{
    /* Items in a list are vertically separated */
    margin-top: 5px;
}

.treelist li ul
{
    /* A nested list is indented */
    padding-left: 2em;
}

.treelist li > div
{
    /* The handle fits to the left of the text block */
    padding-left: 28px;

    /* The item description need to be full-width */
    width: 50%;
}

.treelist li > div a
{
    /* The text inside the li consitutes the clickable part */
    display: block;
    
    /* The contents are adequately spaced */
    padding: 10px;
}

/* 
 * Treelist item states 
 */
.treelist li > ul
{
    /* Nested lists are closed per default */
    display: none;
}

.treelist li.open > ul
{
    /* The sub-list inside an open item is displayed */
    display: block;
}

.treelist li > div a
{
    /* A normal treelist item does not look special */
    background-color: #ffffff;
    border: thin solid #e8e8e8;
}

.treelist li.more > div
{
    background: transparent url(icons/treelist-more.png) no-repeat center left;
}

.treelist li.open > div
{
    background: transparent url(icons/treelist-open.png) no-repeat center left;
}

/*
 * Checkbox styles
 */
.treelist li > div input[type=checkbox]
{
    background: #ffffff;
    border: 1px solid green;
}