/* Pure CSS collapseable tree for groups, for all browsers but IE Adapted (mostly trimmed down) from http://www.thecssninja.com/css/css-tree-menu Fails variously in IE < 9, may or may not work in IE 9 */ ul.grptree { padding-left: 40px; /* hack pthui */ } li.hassub { position: relative; margin: 0 0 0 -40px; padding: 0; list-style: none; background: none; /* hack pthui */ } li.leaf { margin: 0; padding: 0 0 0 15px; /* in px since this is to adjust for a fixed-size image */ } li.hassub input { position: absolute; left: 0; margin: 0; opacity: 0; filter:alpha(opacity=0); /* IE > 6, maybe */ z-index: 2; cursor: pointer; height: 1em; width: 1em; top: 0; } li.hassub input + ul { background: url('../images/tree_closed.png') 0px -2px no-repeat; margin-top: -0.95em; /* esplain to me, why this not 1em? O_o */ padding-top: 0.1em; padding-left: 2.25em; /* ah-HA! use this to adjust the indent! watch for neg margin from li.hassub */ xdisplay: block; height: 1em; } li.hassub input + ul > li { height: 0; overflow: hidden; margin-left: -14px !important; } li.hassub label { cursor: pointer; display: block; padding-left: 15px; /* in px as it ajusts for fixed-size image */ } li.hassub input:checked + ul { background: url('../images/tree_open.png') 0px 0px no-repeat; margin-top: -1.2em; padding-top: 1.1em; height: auto; } li.hassub input:checked + ul > li { height: auto; }