1

/*

     2

 * Structured tree-form lists

     3

 */

     4

     5

ul.treelist,

     6

.treelist ul

     7

{

     8

    list-style-type: none;

     9

    10

    padding: 0px;

    11

    12

    /* Lists of items are vertically separated, visually more so than plain list items */

    13

    margin: 10px 0px;

    14

}

    15

    16

.treelist li

    17

{

    18

    /* Items in a list are vertically separated */

    19

    margin-top: 5px;

    20

}

    21

    22

.treelist li ul

    23

{

    24

    /* A nested list is indented */

    25

    padding-left: 2em;

    26

}

    27

    28

.treelist li > div

    29

{

    30

    /* The handle fits to the left of the text block */

    31

    padding-left: 28px;

    32

    33

    /* The item description need to be full-width */

    34

    width: 50%;

    35

}

    36

    37

.treelist li > div a

    38

{

    39

    /* The text inside the li consitutes the clickable part */

    40

    display: block;

    41

    42

    /* The contents are adequately spaced */

    43

    padding: 10px;

    44

}

    45

    46

/* 

    47

 * Treelist item states 

    48

 */

    49

.treelist li > ul

    50

{

    51

    /* Nested lists are closed per default */

    52

    display: none;

    53

}

    54

    55

.treelist li.open > ul

    56

{

    57

    /* The sub-list inside an open item is displayed */

    58

    display: block;

    59

}

    60

    61

.treelist li > div a

    62

{

    63

    /* A normal treelist item does not look special */

    64

    background-color: #ffffff;

    65

    border: thin solid #e8e8e8;

    66

}

    67

    68

.treelist li.more > div

    69

{

    70

    background: transparent url(icons/treelist-more.png) no-repeat center left;

    71

}

    72

    73

.treelist li.open > div

    74

{

    75

    background: transparent url(icons/treelist-open.png) no-repeat center left;

    76

}

    77

    78

/*

    79

 * Checkbox styles

    80

 */

    81

.treelist li > div input[type=checkbox]

    82

{

    83

    background: #ffffff;

    84

    border: 1px solid green;

    85

}