     baseBranchProp
 
   # add vertical line ( :before pseudoelement) to panel which has children
-  addVerticalLine = (node) ->
-    id        = $(node).attr 'id'
-    lastChild = $(node).parent().find ".panel-container[data-last-child=#{id}]"
+  addVerticalLine = (node, purposeNode) ->
+    distance = verticalBranchDist(node, purposeNode)
+    id       = $(node).attr('id')
 
-    if $(lastChild).length
-      distance = verticalBranchDist(node, lastChild)
-      document.styleSheets[0].addRule(
-        "[id='#{id}']::before",
-        "#{veticalBranchProp(id, distance)}"
-        )
+    addCSSRule(
+      "[id='#{id}']::before",
+      veticalBranchProp(distance)
+      )
 
   # add horizontal line (:after pseudoelement) to all panels except root
   addHorizontalLine = (node) ->
-    if $(node).hasClass('panel-root')
+    id = $(node).attr('id')
+    height = middleOfHeight(node)
+    addCSSRule(
+      "[id='#{id}']::after",
+      horizontalBranchProp(height)
+      )
+
+  $('.panel-parent').each ->
+    nodeId    = $(this).attr('id')
+    lastChild = $(this).parent().find(
+      ".panel-container[data-last-child=#{nodeId}]")
+
+    addVerticalLine(this, lastChild) if $(lastChild).length
+
+  $('.panel-container').each ->
+    if $(this).hasClass('panel-root')
       true
     else
-      id = $(node).attr('id')
-      height = middleOfHeight(node)
-      document.styleSheets[0].addRule(
-        "[id='#{id}']::after",
-        "#{horizontalBranchProp(height)}"
-        )
-
-  $('.panel-parent').each ->
-    addVerticalLine(this)
-
-  $('.panel-container').each ->
-    addHorizontalLine(this)
-
-  getCSSRule = (ruleName, deleteFlag) ->
-    ruleName = ruleName.toLowerCase()
-    if document.styleSheets
-      i = 0
-      while i < document.styleSheets.length
-        styleSheet = document.styleSheets[i]
-        ii = 0
-        cssRule = false
-        loop
-          if styleSheet.cssRules
-            cssRule = styleSheet.cssRules[ii]
-          else
-            cssRule = styleSheet.rules[ii]
-          if cssRule
-            if cssRule.selectorText.toLowerCase() == ruleName
-              if deleteFlag == 'delete'
-                if styleSheet.cssRules
-                  styleSheet.deleteRule ii
-                else
-                  styleSheet.removeRule ii
-                return true
-              else
-                return cssRule
-          ii++
-          unless cssRule
-            break
-        i++
-    false
-
-  killCSSRule = (ruleName) ->
-    getCSSRule ruleName, 'delete'
-
-  addCSSRule = (ruleName) ->
-    if document.styleSheets
-      if !getCSSRule(ruleName)
-        if document.styleSheets[0].addRule
-          document.styleSheets[0].addRule ruleName, null, 0
-        else
-          document.styleSheets[0].insertRule ruleName + ' { }', 0
-    getCSSRule ruleName+      addHorizontalLine(this)
$(document).on 'ready page:load turbolinks:load', ->
  findPanelHeader = (object) ->
    object.find('.panel').find('.panel-header')


    $('.panel-header').each ->
      if $(this).hasClass('selectable')
        $(this).removeClass('selectable')

  changePseudoHeight = (node, oldHeight, pseudoElement) ->
    additionalVal = $(node).height() - oldHeight
    currentHeight = parseInt pseudoElement.style.height.replace('px','')
    purposeHeight = (currentHeight + additionalVal).toString()

    pseudoElement.style.height = purposeHeight.concat('px')

  # inherit color from parent panel on load
  # if parent has no color, inherit from parent of parent
