Trial with Tree builder
diff --git a/public/sass/matchinfo.scss b/public/sass/matchinfo.scss
new file mode 100644
index 0000000..ac5830e
--- /dev/null
+++ b/public/sass/matchinfo.scss
@@ -0,0 +1,107 @@
+@charset "utf-8";
+
+@import "colors";
+
+ol > li:not(.active) {
+ .tokenInfo, .treeInfo {
+ display: none;
+ }
+}
+
+.tokenInfo, .treeInfo {
+ display: none;
+ background-color: $dark-orange;
+ margin-right: 26px;
+ overflow: auto;
+ &.active {
+ display: block;
+ }
+}
+
+.tokenInfo {
+ table {
+ font-size: 10pt;
+ padding: 3pt 10pt; /* wie in ol > li.active p */
+ /* All cells */
+ > tr {
+ > * {
+ padding: 1pt 6pt;
+ vertical-align: top;
+ }
+ > td {
+ text-align: center;
+ background-color: $light-orange;
+ }
+ /* header */
+ > th{
+ &:not([rowspan]) {
+ color: white;
+ text-shadow: none;
+ }
+ &[rowspan]:first-child {
+ background-color: $light-orange;
+ }
+ span.switchSort {
+ cursor: pointer;
+ position: absolute;
+ display: inline-block;
+ right: 0;
+ margin-right: -11pt;
+ width: 20pt;
+ }
+ }
+ &:first-child th {
+ text-align: center;
+ background-color: $darker-orange;
+ /* first column header */
+ &:first-child {
+ position: relative;
+ padding-right: 20pt;
+ padding-left: 5pt;
+ }
+ /* second column header */
+ &:nth-child(2) {
+ text-align: left;
+ padding-left: 20pt;
+ padding-right: 5pt;
+ }
+ }
+ }
+ }
+}
+
+g.root > rect {
+ fill: none;
+ stroke-width: 5px;
+ stroke: $darker-orange;
+}
+
+g.middle > rect {
+ fill: $light-orange;
+ stroke: $darker-orange;
+ color: white;
+ stroke-width: 2px;
+ padding: 2px;
+}
+
+g.leaf > rect {
+ display: none;
+}
+
+svg {
+ background-color: $dark-orange;
+ overflow: hidden;
+}
+
+text {
+ font-family: verdana, tahoma, arial;
+ font-size: 9pt;
+ color: $dark-grey;
+ text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
+}
+
+.edgePath path {
+ stroke: white;
+ stroke-width: 2px;
+ fill: none;
+}