/* The page is assumed to have three parts: header, tree, and footer.  The tree 
itself is defined using the XOXO (hugs and kisses) microformat
(http://en.wikipedia.org/wiki/XOXO).  XOXO use ul and li elements to describe an 
outline (also works for describing a tree with its top at the left side of the 
page and the leaves on the right).  To make the tree fold up compactly, each ul 
and li element is either expanded or compacted.  The expanded and compacted CSS 
classes are used to indicate these states.  The outermost ul, which contains 
the entire tree belongs to neither the expanded or contracted classe.  Same goes 
for li elements that do not have a nested ul (i.e. leafs on the tree).
*/

body {
  font-size: 100%;
  font-family: Verdana, sans-serif;
}

#header {
  /*section before the tree*/
  margin-bottom: 20px;
  font-size: large;
  font-weight: bold;
}

#tree {
    /*the tree itself*/
}

#footer {
    /*section after the tree*/
  margin-top: 30px;
  border-top: 1px solid #c8c8c8;
  font-size: x-small;
}

#footer p {
  background: none;
  padding: 0;
  height: auto;
}


ul { 
    list-style: disc;
}

ul.compacted { 
    display:none; 
	border:1px dotted black;
}

ul.expanded { 
    display:block; 
	border:1px dotted black;
}

li {
    list-style-position:inside; 
}

li.compacted { 
    list-style-image:url('./collapsed.png'); 
}

li.expanded { 
    list-style-image:url('./expanded.png'); 
}

li.compacted:hover {
    cursor: pointer;
    /* background-color:yellow; */
}

li.expanded:hover {
    cursor: pointer;
    /* background-color:yellow; */
}