     .#{@idClass} ul {
       list-style-type: none;
     }
-    .#{@idClass} ul li.#{@nodeClass()} {
+    .#{@idClass} ul li.#{@_nodeClass()} {
       cursor: pointer;
     }
-    .#{@idClass} ul li.#{@nodeClass()}:before {
+    .#{@idClass} ul li.#{@_nodeClass()}:before {
       width: 1em;
       text-align: center;
       display: inline-block;

    makeElement = (node) =>
      $li = $("<li/>")
      $li.text(node.name)
      $li.addClass(@nodeClass())
      $li.addClass(@typeClass(node.type ? 'default'))
      $li.attr("data-#{k}", v) for k, v of node.attributes
      if (node.children ? []).length == 0
        $li.addClass(@stateClass('leaf'))
      else
        expandedClass = @stateClass('expanded')
        $li.click (e) ->
          if this == e.target
            $(this).toggleClass(expandedClass)

    style = (typeName, type) =>
      # Make the default state being the absence of a state class
      stateSelector = (state) =>
        if state == 'default' then '' else '.'+@_stateClass(state)
      typeSelector = (t) =>
        if t == 'default' then '' else '.'+@_typeClass(t)
      # Setup icons for each of the states. 
      # Any missing will have the default state icon.
      ("""
      .#{@idClass} ul li.#{@_nodeClass()}#{stateSelector(state)}#{typeSelector(typeName)}:before {
        font-family: #{type.icon[state].font};
        content: '#{type.icon[state].content}';
      }
      """ for state in ['default', 'leaf', 'expanded'] when type.icon[state]).join("\n")+
      # Hide children except when expanded
      """
      .#{@idClass} ul li.#{@_nodeClass()}#{stateSelector('default')}#{typeSelector(typeName)} > ul.#{@_treeClass()} {
        display: none;
      }
      .#{@idClass} ul li.#{@_nodeClass()}#{stateSelector('expanded')}#{typeSelector(typeName)} > ul.#{@_treeClass()} {
        display: block;
      }
      """
