terom@1: /*
terom@1:  * Structured tree-form lists
terom@1:  */
terom@1: 
terom@1: ul.treelist,
terom@1: .treelist ul
terom@1: {
terom@1:     list-style-type: none;
terom@1: 
terom@1:     padding: 0px;
terom@1: 
terom@1:     /* Lists of items are vertically separated, visually more so than plain list items */
terom@1:     margin: 10px 0px;
terom@1: }
terom@1: 
terom@1: .treelist li
terom@1: {
terom@1:     /* Items in a list are vertically separated */
terom@1:     margin-top: 5px;
terom@1: }
terom@1: 
terom@1: .treelist li ul
terom@1: {
terom@1:     /* A nested list is indented */
terom@1:     padding-left: 2em;
terom@1: }
terom@1: 
terom@1: .treelist li > div
terom@1: {
terom@1:     /* The handle fits to the left of the text block */
terom@1:     padding-left: 28px;
terom@1: 
terom@1:     /* The item description need to be full-width */
terom@1:     width: 50%;
terom@1: }
terom@1: 
terom@1: .treelist li > div a
terom@1: {
terom@1:     /* The text inside the li consitutes the clickable part */
terom@1:     display: block;
terom@1:     
terom@1:     /* The contents are adequately spaced */
terom@1:     padding: 10px;
terom@1: }
terom@1: 
terom@1: /* 
terom@1:  * Treelist item states 
terom@1:  */
terom@1: .treelist li > ul
terom@1: {
terom@1:     /* Nested lists are closed per default */
terom@1:     display: none;
terom@1: }
terom@1: 
terom@1: .treelist li.open > ul
terom@1: {
terom@1:     /* The sub-list inside an open item is displayed */
terom@1:     display: block;
terom@1: }
terom@1: 
terom@1: .treelist li > div a
terom@1: {
terom@1:     /* A normal treelist item does not look special */
terom@1:     background-color: #ffffff;
terom@1:     border: thin solid #e8e8e8;
terom@1: }
terom@1: 
terom@1: .treelist li.more > div
terom@1: {
terom@1:     background: transparent url(icons/treelist-more.png) no-repeat center left;
terom@1: }
terom@1: 
terom@1: .treelist li.open > div
terom@1: {
terom@1:     background: transparent url(icons/treelist-open.png) no-repeat center left;
terom@1: }
terom@1: 
terom@1: /*
terom@1:  * Checkbox styles
terom@1:  */
terom@1: .treelist li > div input[type=checkbox]
terom@1: {
terom@1:     background: #ffffff;
terom@1:     border: 1px solid green;
terom@1: }