diff --git a/demo.html b/demo.html
index 935e302..9fdc571 100644
--- a/demo.html
+++ b/demo.html
@@ -71,6 +71,12 @@ textarea {
     <div class="column right">
       <div style="margin-left: 10px;">
 
+        <p><b>Demo</b></p>
+        <p>
+          <button onclick="ClearAll()">Clear</button>
+          <button onclick="LoadProjectRand()">Load Project</button>
+        </p>
+
         <p><b>Project (Engine)</b></p>
         <p>
           <button onclick="Clear()">Clear</button>
@@ -254,6 +260,13 @@ textarea {
       window.projectPlanner1.Load(taskData);
     }
 
+    function ClearAll()
+    {
+      window.project1.Clear();
+      window.ganttChart1.Clear();
+      window.projectPlanner1.Clear();
+    }
+
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/project/gantt-chart.js b/src/project/gantt-chart.js
index 0ae529c..4413493 100644
--- a/src/project/gantt-chart.js
+++ b/src/project/gantt-chart.js
@@ -56,6 +56,11 @@ class GanttChart {
           BorderColour: "#555555",
           FillColour: "#9CC2E6"
         },
+        ChildTask: {
+          Height: 14,
+          BorderColour: "#555555",
+          FillColour: "#FFF5C1"
+        },
         CollatedTask: {
           Height: 6,
           BorderColour: "#555555",
@@ -291,6 +296,8 @@ class GanttChart {
 
       if (a.Tasks[i].IsCollated == true) {
         style = a.Options.Row.CollatedTask;
+      } else if (a.Tasks[i].CollatedTaskID != null) {
+        style = a.Options.Row.ChildTask;
       } else if (a.Tasks[i].PredecessorTaskNo == null) {
         style = a.Options.Row.OrphanTask;
       }