diff --git a/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/ListDetails.java b/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/ListDetails.java
index 9d18d003b..71d5dd7f6 100644
--- a/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/ListDetails.java
+++ b/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/ListDetails.java
@@ -22,6 +22,7 @@ import org.zkoss.zul.SimpleTreeModel;
 import org.zkoss.zul.SimpleTreeNode;
 import org.zkoss.zul.Tree;
 import org.zkoss.zul.TreeModel;
+import org.zkoss.zul.Treecell;
 import org.zkoss.zul.Treeitem;
 import org.zkoss.zul.TreeitemRenderer;
 
@@ -34,6 +35,7 @@ public class ListDetails extends HtmlMacroComponent {
             item.setOpen(isOpened(taskBean));
             final int[] path = tasksTreeModel.getPath(tasksTreeModel.getRoot(),
                     node);
+            String cssClass = "depth_"+path.length;
             TaskDetail taskDetail = TaskDetail.create(taskBean,
                     new TreeNavigator(tasksTreeModel, path));
             if (taskBean instanceof TaskContainerBean) {
@@ -42,6 +44,11 @@ public class ListDetails extends HtmlMacroComponent {
             Component row = Executions.getCurrent().createComponents(
                     "~./ganttz/zul/taskdetail.zul", item, null);
             taskDetail.doAfterCompose(row);
+            List<Object> rowChildren =  row.getChildren();
+            List<Treecell> treeCells = Planner.findComponentsOfType(Treecell.class, rowChildren);
+            for(Treecell cell : treeCells){
+                cell.setSclass(cssClass);
+            }
             detailsForBeans.put(taskBean, taskDetail);
         }
 
diff --git a/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/listdetails.zul b/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/listdetails.zul
index 6bf9fdcb4..3343777f4 100644
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/listdetails.zul
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/listdetails.zul
@@ -1,15 +1,15 @@
 <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
 <zk xmlns:n="http://www.zkoss.org/2005/zk/native">
-            <button label="${c:l('listdetails.add_task')}"
-                        onClick="self.getParent().addTask();" />
-       <button label="Engadir Contedor"
-                        onClick="self.getParent().addTaskContainer();" />
+    <button label="${c:l('listdetails.add_task')}"
+        onClick="self.getParent().addTask();" />
+    <button label="Engadir Contedor"
+        onClick="self.getParent().addTaskContainer();" />
     <n:div id="listdetails_container">
         <tree id="tasksTree">
             <treecols sizable="false">
-                <treecol label="Name" />
-                <treecol label="Start Date" />
-                <treecol label="End Date" />
+                <treecol label="Name"/>
+                <treecol label="Start"/>
+                <treecol label="End"/>
             </treecols>
         </tree>
     </n:div>
diff --git a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js
index 521375aa5..3198b781e 100644
--- a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js
+++ b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js
@@ -13,7 +13,7 @@ MIN_RESOLUTION_X = 600;          // Minimun horizontal autoresizable window
 MIN_RESOLUTION_Y = 600;          // Minimun vertical autoresizable window
 
 TASKDETAILS_WIDTH = 300;         // Taskdetails column fixed width (300)
-TASKDETAILS_HEIGHT = 300;        // Design-relative reservated height for taskdetails (300)
+TASKDETAILS_HEIGHT = 260;        // Design-relative reservated height for taskdetails (300)
 TIMETRACKER_OFFSET_TOP = 200     // Design-relative height above timetracker
 
 FOOTER_HEIGHT = 40;             // Design-relative footer height
diff --git a/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css b/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
index f3c135aa2..9083a9103 100644
--- a/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
+++ b/navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css
@@ -13,7 +13,9 @@ zkTasklist.SCROLLBAR_WIDTH = 15
 
 */
 
-/****** Tasks and dependencies ******/
+/* -------------- Listdetails -------------- */
+
+/* External listdetails box */
 .listdetails {
     width:280px;  /* Ganntz.ListdetailsWidth */
     float:left;
@@ -23,32 +25,60 @@ zkTasklist.SCROLLBAR_WIDTH = 15
     margin-top:0px;
 }
 
-.listdetails img {
-    display:none;
+#listdetails_container {
+    float:left;
+    overflow:hidden;
+    height:300px;
+    position:relative;
+    top:20px;
+    overflow: hidden;
+    border-bottom: 1px solid #86A4BE;
+    border-right: 1px solid #86A4BE;
 }
 
-.listdetails td {
-    padding-left:0px;
+/*.listdetails img {
+    display:none;
+} */
+
+#listdetails_container td {
+    border-bottom:1px solid #86A4BE;
+    border-left:1px solid #86A4BE;
+border:0px;
+}
+
+#listdetails_container td {
+    padding:0px;
 }
 
 .listdetails input {
-    width: 80px;
+    width: 65px;
     font-size:10px !important;
     border-bottom:0px;
     border-right:0px;
     height:17px;
 }
 
-.listdetails .z-datebox-inp {
+#listdetails_container .z-datebox-inp,
+#listdetails_container div.z-tree-col-cnt {
     font-family:"Verdana,Tahoma,Arial,Helvetica,sans-serif";
     font-size:10px !important;
     border-bottom:0px;
     border-right:0px;
 }
 
-.task_title {
-    width: 120px !important;
+.depth_1 .task_title {
+    width: 121px !important;
 }
+.depth_2 .task_title {
+    width: 104px !important;
+}
+.depth_3 .task_title {
+    width: 85px;
+}
+.depth_4 .task_title {
+    width: 64px;
+}
+
 
 .taskdetail_grid table {
     height:30px;
@@ -56,6 +86,7 @@ zkTasklist.SCROLLBAR_WIDTH = 15
 }
 
 
+
 #listtasks {
     position:relative;
     width:600px;
@@ -209,20 +240,6 @@ table {
     border:0px;
 }
 
-
-#listdetails_container {
-    float:left;
-    overflow:hidden;
-    height:300px;
-    position:relative;
-    top:50px;
-    overflow: hidden;
-    border-bottom: 1px solid #86A4BE;
-    border-right: 1px solid #86A4BE;
-}
-
-
-
 #scroll_container {
     margin-top:70px;
     /*    border:solid green 1px; */
@@ -262,7 +279,7 @@ tr.z-vbox-sep {
 
 #ganttpanel_scroller_x {
     top: 600px;  /* Calculate initial settings */
-    left: 280px;
+    left: 290px;
     width:635px;
     height:15px;
 }
@@ -274,7 +291,7 @@ tr.z-vbox-sep {
 }
 
 #ganttpanel_scroller_y {
-    top: 230px; /* Calculate initial settings */
+    top: 200px; /* Calculate initial settings */
     left: 920px;
     width:15px;
     height:330px;