diff --git a/example/css/jquery.jOrgChart.css b/example/css/jquery.jOrgChart.css
index 7c0c248..5c41d03 100644
--- a/example/css/jquery.jOrgChart.css
+++ b/example/css/jquery.jOrgChart.css
@@ -36,6 +36,7 @@
   width                 : 96px;
   height                : 60px;
   z-index 				: 10;
+  margin:               : 0 2px;
 }
 
 /* jQuery drag 'n drop */
diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js
index f1df0cb..daec657 100644
--- a/jquery.jOrgChart.js
+++ b/jquery.jOrgChart.js
@@ -133,6 +133,7 @@
     var $nodeRow = $("<tr/>").addClass("node-cells");
     var $nodeCell = $("<td/>").addClass("node-cell").attr("colspan", 2);
     var $childNodes = $node.children("ul:first").children("li");
+    var $nodeDiv;
 	
     if($childNodes.length > 1) {
       $nodeCell.attr("colspan", $childNodes.length * 2);
@@ -210,8 +211,17 @@
       $tbody.append($childNodesRow);
     }
 
-    if ($node.hasClass('collapsed')) {
-        $nodeRow.nextAll('tr').css('display', 'none');
+    // any classes on the LI element get copied to the relevant node in the tree
+    // apart from the special 'collapsed' class, which collapses the sub-tree at this point
+    if ($node.attr('class') != undefined) {
+        var classList = $node.attr('class').split(/\s+/);
+        $.each(classList, function(index,item) {
+            if (item == 'collapsed') {
+                $nodeRow.nextAll('tr').css('display', 'none');
+            } else {
+                $nodeDiv.addClass(item);
+            }
+        });
     }
 
     $table.append($tbody);
diff --git a/readme.markdown b/readme.markdown
index 015dec6..01f8fc7 100644
--- a/readme.markdown
+++ b/readme.markdown
@@ -69,7 +69,7 @@ You'll need to construct a nest unordered list that represents your node nesting
 	</li>
 	</ul>
 
-If you want a sub-tree to start off hiden, just add `class="collapsed"` to a list item (`<li>`). That list item will appear, but everything below it won't. For example:
+If you want a sub-tree to start off hidden, just add `class="collapsed"` to a list item (`<li>`). That list item will appear, but everything below it won't. For example:
 
 	<ul id="org" style="display:none">
       <li>Food:
@@ -86,7 +86,7 @@ If you want a sub-tree to start off hiden, just add `class="collapsed"` to a lis
       </li>
     </ul>
 
-*Note that you can include any amount of HTML markup in your `<li>` **except** for other `<ul>` or `<li>` elements.*
+This plugin works by generating the tree as a series of nested tables. Each node in the tree is represented with `<div class="node">`. You can include any amount of HTML markup in your `<li>` **except** for other `<ul>` or `<li>` elements. Your markup will be used within the node's `<div>` element. Any classes you attach to the `<li>` elements will be copied to the associated node, allowing you to highlight particular parts of the tree. The special `collapsed` class described above doesn't get copied to the node.
 
 
 -----