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;
+}