diff --git a/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/Task.java b/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/Task.java
index 1b8144783..234c67413 100755
--- a/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/Task.java
+++ b/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/Task.java
@@ -143,6 +143,15 @@ public class Task extends Div implements AfterCompose {
         setId(UUID.randomUUID().toString());
     }
 
+    protected String calculateClass() {
+        return "box";
+    }
+
+    protected void updateClass() {
+        response(null, new AuInvoke(this, "setClass",
+                new Object[] { calculateClass() }));
+    }
+
     public void afterCompose() {
         updateProperties();
         if (propertiesListener == null) {
@@ -158,6 +167,7 @@ public class Task extends Div implements AfterCompose {
         }
         this.taskBean
                 .addFundamentalPropertiesChangeListener(propertiesListener);
+        updateClass();
     }
 
     private String _color;
diff --git a/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/TaskContainer.java b/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/TaskContainer.java
index 681c0cfe2..60cbcb29f 100644
--- a/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/TaskContainer.java
+++ b/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/TaskContainer.java
@@ -39,6 +39,7 @@ public class TaskContainer extends Task implements AfterCompose {
                 } else {
                     close();
                 }
+                updateClass();
             }
         };
         taskContainerBean.addExpandListener(expandListener);
@@ -71,6 +72,14 @@ public class TaskContainer extends Task implements AfterCompose {
         return (TaskContainerBean) getTaskBean();
     }
 
+    @Override
+    protected String calculateClass() {
+        return super.calculateClass() +" "+ (getTaskContainerBean().isExpanded()?
+                "expanded":"closed");
+    }
+
+
+
     private void close() {
         for (Task subtask : subtasks) {
             if (subtask instanceof TaskContainer) {
diff --git a/navalplanner-gantt-zk/src/main/resources/web/ganttz/task.dsp b/navalplanner-gantt-zk/src/main/resources/web/ganttz/task.dsp
index bb8f2b0bb..7d0e16038 100755
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/task.dsp
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/task.dsp
@@ -7,7 +7,7 @@
 
 <div id="row${self.uuid}" class="row" z.valor="boxid="${self.uuid}">
     <div id="${self.uuid}" z.type="ganttz.task.Task" idTask="${self.id}"
-        z.autoz="true"${self.outerAttrs}" class="box">
+        z.autoz="true"${self.outerAttrs}">
         <div id="completion${self.uuid}" class="completion"></div>
     </div>
 </div>
diff --git a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/task.js b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/task.js
index f9b483ffa..31d99f27b 100755
--- a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/task.js
+++ b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/task.js
@@ -126,6 +126,11 @@ YAHOO.util.Event.on(document.body, 'mousemove', function(e) {
 	zkTask.yMouse = arrPos[1];
 });
 
+zkTask.setClass = function(cmp, newclass) {
+    cmp.className = newclass;
+};
+
+
 zkTask.setAttr = function(cmp, nm, val) {
 
     switch (nm) {
diff --git a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/taskcontainer.js b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/taskcontainer.js
index a0d1e5454..8eadf1948 100644
--- a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/taskcontainer.js
+++ b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/taskcontainer.js
@@ -68,6 +68,9 @@ zkTaskContainer.getElementsByAttribute = function(oElm, strTagName, strAttribute
     zkTask.getElementsByAttribute(oElm, strTagName, strAttributeName, strAttributeValue);
 }
 
+zkTaskContainer.setClass = function(cmp, newclass) {
+    cmp.className = newclass;
+};
 
 /* We will not allow taskcontainer move or resize untill its behaviour its
  * clearly specified
diff --git a/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css b/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
index c1acb45f6..4b490b1fd 100644
--- a/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
+++ b/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
@@ -117,28 +117,6 @@ zkTasklist.GANTT_PANEL_LEFT = 300
     width: 10000px; /* Defined to be larger than the maximum scroll_inner_x */
 }
 
-/* -------------- TaskGroup -------------- */
-.taskgroup_start {
-    background-image: url("/navalplanner-webapp/zkau/web/ganttz/img/group_left.png");
-    height: 10px;
-    width: 10px;
-    float:left;
-}
-
-.taskgroup_end {
-    background-image: url("/navalplanner-webapp/zkau/web/ganttz/img/group_right.png");
-    height: 10px;
-    width: 10px;
-    float:right;
-}
-
-.taskgroup {
-    border-top: solid black 2px;
-    border-bottom: 0px;
-    border-left: 0px;
-    border-right: 0px;
-    background-color: transparent !important;
-}
 
 /* -------------- Dependencies -------------- */
 #listdependencies {
@@ -185,6 +163,34 @@ zkTasklist.GANTT_PANEL_LEFT = 300
     white-space:nowrap;
 }
 
+/* -------------- TaskGroup -------------- */
+.taskgroup_start {
+    background-image: url("/navalplanner-webapp/zkau/web/ganttz/img/group_left.png");
+    height: 10px;
+    width: 10px;
+    float:left;
+}
+
+.taskgroup_end {
+    background-image: url("/navalplanner-webapp/zkau/web/ganttz/img/group_right.png");
+    height: 10px;
+    width: 10px;
+    float:right;
+}
+
+.taskgroup, .row .expanded {
+    border-top: solid black 2px;
+    border-bottom: 0px;
+    border-left: 0px;
+    border-right: 0px;
+    background-color: transparent !important;
+}
+
+.row .closed {
+    border-top: solid black 2px;
+}
+
+
 
 
 .zk #ganttpanel .z-button-cm {