Index: trunk/templates/dns.css
===================================================================
--- trunk/templates/dns.css	(revision 67)
+++ trunk/templates/dns.css	(revision 69)
@@ -156,44 +156,62 @@
 }
 
-ul {
-	margin-left: 10px;
-	padding: 0px;
-	list-style: none outside none;
-}
-/* F*** ME BUT THIS LOOKS LIKE CRAP! */
-/* Need to find a way to vertically centre the plus image on the text.  >:(  */
+
+/*
+  Pure CSS collapseable tree for groups
+  Adapted (mostly trimmed down) from http://www.thecssninja.com/css/css-tree-menu
+  Fails variously in IE
+*/
+
 li.hassub {
-	background-image: url('../images/plus.png');
-	background-repeat: no-repeat;
-	background-position: 0px 1px;
-	padding-left: 14px;
-	//list-style: none outside url('../images/fwd.png');
-	margin-left: -12px;
+	position: relative;
+	margin: 0 0 0 -40px;
+	padding: 0;
+	list-style: none;
 }
 li.leaf {
-	//list-style: none outside none;
-	//margin-left: 0px;
-	background-image: url('../images/midleaf.png');
-	background-repeat: no-repeat;
-	background-position: 0px 1px;
-	padding-left: 14px;
-	margin-left: -12px;
-}
-li.lastinlvl {
-	background-image: url('../images/lastleaf.png');
-	background-repeat: no-repeat;
-	background-position: 0px 1px;
-	padding-left: 14px;
-	//list-style: none outside url('../images/lastleaf.png');
-	margin-left: -12px;
-}
-ul.grptree {
-	list-style-type: none;
-	padding: 0px;
-	margin-left: 14px;
-}
-#grptree {
-	//margin-left: 10px;
-}
+	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;
+}
+
+
 /* general classes */
 .errmsg {
Index: trunk/templates/grptree.tmpl
===================================================================
--- trunk/templates/grptree.tmpl	(revision 67)
+++ trunk/templates/grptree.tmpl	(revision 69)
@@ -1,4 +1,6 @@
-<ul>
-<TMPL_LOOP NAME=treelvl><li class="<TMPL_IF last>lastinlvl </TMPL_IF><TMPL_IF NAME=subs>hassub<TMPL_ELSE>leaf</TMPL_IF>"><TMPL_VAR NAME=grpname>
-<TMPL_VAR NAME=subs></li>
-</TMPL_LOOP></ul>
+<TMPL_VAR NAME=indent><ul class="grptree">
+<TMPL_LOOP NAME=treelvl><TMPL_VAR NAME=indent>  <li class="<TMPL_IF NAME=subs>hassub<TMPL_ELSE>leaf</TMPL_IF>">
+<TMPL_IF name=subs><TMPL_VAR NAME=indent>    <label for="<TMPL_VAR NAME=grpname>"><TMPL_VAR NAME=grpdisp></label>
+<TMPL_VAR NAME=indent>    <input type="checkbox" class="grptreebox" checked id="<TMPL_VAR NAME=grpname>" /><TMPL_ELSE><TMPL_VAR NAME=indent>    <TMPL_VAR NAME=grpdisp></TMPL_IF>
+<TMPL_VAR NAME=subs><TMPL_VAR NAME=indent>  </li>
+</TMPL_LOOP><TMPL_VAR NAME=indent></ul>
Index: trunk/templates/menu.tmpl
===================================================================
--- trunk/templates/menu.tmpl	(revision 67)
+++ trunk/templates/menu.tmpl	(revision 69)
@@ -23,9 +23,14 @@
 <a href="dns.cgi?sid=<TMPL_VAR NAME=sid>&amp;page=grpman">Manage groups</a><br />
 <div id="grptree">
+
 <ul class="grptree">
-<li class="<TMPL_IF NAME=subs>hassub<TMPL_ELSE>leaf</TMPL_IF>"><TMPL_IF inlogingrp><b><TMPL_VAR NAME=logingrp></b><TMPL_ELSE><TMPL_VAR NAME=logingrp></TMPL_IF>
+  <li class="<TMPL_IF NAME=subs>hassub<TMPL_ELSE>leaf</TMPL_IF>">
+<TMPL_IF name=subs>    <label for="<TMPL_VAR NAME=logingrp>"><TMPL_IF inlogingrp><b><TMPL_VAR NAME=logingrp></b><TMPL_ELSE><TMPL_VAR NAME=logingrp></TMPL_IF></label>
+    <input type="checkbox" checked id="<TMPL_VAR NAME=logingrp>" /><TMPL_ELSE>
+    <TMPL_IF inlogingrp><b><TMPL_VAR NAME=logingrp></b><TMPL_ELSE><TMPL_VAR NAME=logingrp></TMPL_IF></TMPL_IF>
 <TMPL_VAR NAME=grptree>
-</li>
+  </li>
 </ul>
+
 </div>
 <!-- hmm:  <TMPL_VAR NAME=groupname> -->