Index: trunk/web-app/css/main.css
===================================================================
--- trunk/web-app/css/main.css	(revision 304)
+++ trunk/web-app/css/main.css	(revision 306)
@@ -584,4 +584,8 @@
 }
 
+div.tree_button {
+    text-align: left;
+    padding-top: 4px;
+}
 div.tree {
 }
Index: trunk/web-app/js/overlayPane.js
===================================================================
--- trunk/web-app/js/overlayPane.js	(revision 304)
+++ trunk/web-app/js/overlayPane.js	(revision 306)
@@ -1,11 +1,19 @@
-function toggleBranch(divId, imageId) {
+function toggleDiv(id) {
+            $(divId).toggle();
+}
+
+function showDiv(id) {
+            Effect.Appear(id,{duration:0.4,queue:'end'});
+}
+
+function toggleBranch(divId, imageId, openImgUrl, closedImgUrl) {
 
         $(divId).toggle();
 
         if( $(divId).visible() ) {
-            $(imageId).src= '../images/skin/bullet_tree_minus.png';
+            $(imageId).src= openImgUrl;
         }
         else {
-            $(imageId).src= '../images/skin/bullet_tree_plus.png';
+            $(imageId).src= closedImgUrl;
         }
 
@@ -17,5 +25,5 @@
         if (typeof Effect != "undefined" && typeof Effect.Appear != "undefined") {
                     if ($(id) && Element.visible(id) == false)
-            Effect.Appear(id,{duration:0.5,queue:'end'});
+            Effect.Appear(id,{duration:0.4,queue:'end'});
         } else {
             var el = document.getElementById(id)
@@ -31,5 +39,5 @@
     if (typeof Effect != "undefined" && typeof Effect.Fade != "undefined") {
             if ($(id) && Element.visible(id))
-        Effect.Fade(id,{duration:0.5,queue:'end'});
+        Effect.Fade(id,{duration:0.4,queue:'end'});
     } else {
         var el = document.getElementById(id)