Refactoring of style files

Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/dev/scss/main/view/tree.scss b/dev/scss/main/view/tree.scss
new file mode 100644
index 0000000..c7e064b
--- /dev/null
+++ b/dev/scss/main/view/tree.scss
@@ -0,0 +1,86 @@
+@charset "utf-8";
+@import "../../util";
+
+/**
+ * SVG tree
+ */
+path.edge {
+  stroke:       $darker-orange;
+  stroke-width: 2px;
+  fill:         none;
+}
+
+g.arc.infocus > path.edge {
+  stroke: $dark-green;
+}
+
+marker#arr {
+  overflow: visible;
+  path {
+    stroke:       $darkest-orange;
+    fill:         $darkest-orange;
+    fill-opacity: 1;
+    stroke-width: 2; 
+  }
+}
+
+path.anchor {
+  stroke:         $darkest-orange;
+  stroke-width:   3;
+  stroke-linecap: round;
+  z-index:        20;
+}
+
+g.root rect.empty {
+  stroke:       $darker-orange;
+  fill:         $darker-orange;
+  stroke-width: 2px;
+}
+
+g.middle,
+g.label {
+  rect {
+    stroke:       $darker-orange;
+    stroke-width: 2px;
+    fill:         $middle-orange;
+  }
+}
+
+g.label.infocus rect {
+  stroke: $dark-green;
+  fill:   $lightest-green;
+}
+
+g.middle.mark {
+  rect {
+    fill: $darker-orange;
+  }
+  > text {
+    fill: $light-orange;
+
+    > tspan {
+      stroke: $light-orange;
+    }
+  }
+}
+
+g.leaf.mark text > tspan {
+  font-weight: bold;
+}
+
+g.leaf > rect {
+  display: none;
+}
+
+g > text > tspan {
+  text-anchor: middle;
+  font-size:   9pt;
+}
+
+g.leaf > text,
+text.leaf {
+  > tspan {
+    font-size: 10pt;
+    overflow:  visible;
+  }
+}