DIV.tree-container {
    padding: 0;
    margin: 0;
}

DIV.tree-container UL {
    list-style-type: none;
    background-image: url("/assets/meta/2e0d18b0/tapestry5/tree-vpipe.png");
    background-repeat: repeat-y;
    margin: 0 0 0 12px;
    padding: 0;
}

DIV.tree-container UL UL {
    /* Line up the nested list's vertical bar under the element's folder icon. */
    margin: 0 0 0 24px;
}

DIV.tree-container LI {
    margin: 0;
    padding: 0 0 0 16px;
    background-image: url("/assets/meta/4ab323e0/tapestry5/tree-branch.png");
    background-repeat: no-repeat;
    line-height: 1.5;
}

/* The last one needs a special tweak to keep the vertical bar from extending down too far. */
DIV.tree-container LI.last {
    background-color: white;
    background-image: url("/assets/meta/af332216/tapestry5/tree-branchend.png");
}

/* Assume its a collapsed, but expandable, tree node. Later CSS rules overwrite this. */

SPAN.tree-icon {
    display: inline-block;
    width: 32px;
    height: 16px;
    cursor: pointer;
    background-image: url("/assets/meta/9922ab53/tapestry5/tree-sprites.png");
    background-position: 0px 0px;
}

/* Fiddle with it so that leaf nodes do not appear clickable. The label is clickable, the document
   icon is not. */
LI.leaf-node > SPAN.tree-icon {
    cursor: default;
    background-position: -32px -16px;
}

/* When the Tree is configured for selection, then it is the label, only on leaf nodes, that is
    clickable. */
DIV[data-tree-node-selection-enabled] LI.leaf-node > .tree-label {
    cursor: pointer;
    padding-left: 16px;
    background: url("/assets/meta/9922ab53/tapestry5/tree-sprites.png") no-repeat;
}

DIV[data-tree-node-selection-enabled] LI.leaf-node > .tree-label {
    background-position: -64px 0px;
}

/* Marking selection leaf nodes in bold if selected will hopefully change soon. We may even be smart
   enough to render a checkbox. */
DIV[data-tree-node-selection-enabled] LI.leaf-node > .tree-label.selected-leaf-node {
    background-position: -64px -16px;
}

SPAN.tree-icon.empty-node {
    cursor: default;
    background-position: -32px 0px;
}

SPAN.tree-expanded {
    background-position: 0px -16px;
}

SPAN.tree-ajax-wait {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("/assets/meta/a8a1939/tapestry5/ajax-loader.gif");
}