diff --git a/dev/scss/matchinfo.scss b/dev/scss/matchinfo.scss
new file mode 100644
index 0000000..4341f23
--- /dev/null
+++ b/dev/scss/matchinfo.scss
@@ -0,0 +1,241 @@
+@charset "utf-8";
+@import "util";
+
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
+@mixin cell-info {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 1px 6px;
+  margin: 0px;
+}
+
+/**
+ * Table view
+ *
+ * The table view is complicated, as the
+ * first column has to be static.
+ */
+@mixin matchinfo-head {
+  border-width: 0px;
+  border-top: $border-size solid #ff8000;
+  width: $left-width / 2;
+}
+
+div.matchinfo {
+  position: relative;
+  width: 100%;
+  padding-top: $border-size;
+  background-color: $dark-orange;
+  height: auto;
+  font-size: 10pt;
+  text-align: left;
+  > p.addtree {
+    position: relative;
+    @include choose-item;
+    border: {
+      width: $border-size;
+      style: solid;
+      radius: $standard-border-radius;
+    }
+
+    font-size: inherit;
+    margin: $border-size $border-size 0 $border-size !important;
+    width: $left-width;
+    text-align: center;
+    cursor: pointer;
+    padding: 0 !important;
+
+    &:hover {
+      cursor:pointer;
+      @include choose-hover;
+    }
+
+    *.menu {
+      border-top-right-radius: 8px;
+      position: absolute;
+      width: $left-width;
+      left: 0;
+      bottom: 0;
+      text-align: left;
+      margin: -1* $border-size;
+      margin-top: 0;
+      > li:first-of-type {
+	border-top-right-radius: 5px;
+      }
+    }
+  }
+}
+
+div.matchtable {
+  z-index: 20;
+  margin-left: $left-distance - ($border-size / 2);
+  margin-right: $right-match-distance;
+  padding: 0;
+  overflow-x: auto;
+  overflow-y: visible;
+  width: auto;
+  table {
+    display: table;
+    border-collapse: separate;
+    border-spacing: 0px;
+  }
+  th {
+    color: $nearly-white;
+  }
+  thead {
+    tr th {
+      background-color: $darker-orange;
+      border-top-width: 0px !important;
+    }
+  }
+  tbody {
+    > tr:nth-of-type(1) > th {
+      border-top-color: transparent;
+    }
+    /**
+     * Click on a row and it's highlighted.
+     */
+    > tr:focus {
+      outline: none;
+      /*
+	outline:  (2 * $border-size) solid $light-green;
+	-moz-outline-radius: $border-size;
+	outline-radius: $border-size;
+	*/
+      background-color: $light-green;
+      border-color: $light-green;
+      td {
+        background-color: inherit;
+        color: $nearly-white;
+        border-color: $light-green;
+      }
+    }
+  }
+  tr {
+    /**
+     * The first two columns.
+     */
+    > th:nth-of-type(1),
+    > th:nth-of-type(2) {
+      position: absolute;
+      z-index: 80;
+      vertical-align: middle;
+      left: 0px;
+      @include matchinfo-head;
+    }
+    > th:nth-of-type(2) {
+      left: ($left-width / 2) + $border-size;
+    }
+    > * {
+      @include cell-info;
+      border: ($border-size / 2) solid $dark-orange;
+    }
+  }
+  tr > td {
+    background-color: $middle-orange; // $nearly-white;
+    white-space: nowrap;
+    vertical-align: top;
+    text-align: center;
+  }
+  tr:nth-child(even) > td {
+    background-color: $light-orange;
+  }
+}
+
+/**
+  * Tree view
+  */
+div.matchtree {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: visible;
+  padding: 0;
+  margin-top: 1pt;
+
+  /**
+   * Label
+   */
+  h6 {
+    display: inline;
+    font-size: inherit;
+    color: $nearly-white;
+    margin: 0;
+    padding: 0 !important;
+    float: left;
+    > span {
+      @include matchinfo-head;
+      @include cell-info;
+      display: inline-block;
+      margin: 0;
+      &:nth-of-type(2) {
+	margin-left: $border-size;
+      }
+    }
+  }
+  > div {
+    overflow-x: auto;
+    margin: $border-size;
+    margin-left: $left-distance;
+    margin-right: $right-match-distance;
+
+    background-color: $light-orange; // $nearly-white; // $light-orange;
+    > em {
+      color: $nearly-white;
+      cursor: pointer;
+      display: block;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: $right-match-distance;
+      border-width: 0;
+      z-index: 8;
+      text-decoration:none;
+      text-align: center;
+      font-weight: bold;
+      font-style: normal;
+
+      &::after {
+	font-family: 'FontAwesome';
+	content: '\f00d';
+      }
+    }
+  }
+}
+
+/**
+ * SVG tree
+ */
+path.edge {
+  stroke: $darker-orange;
+  stroke-width: 2px;
+  fill: none;
+}
+
+g.root rect.empty {
+  stroke: $darker-orange;
+  fill: $darker-orange;
+  stroke-width: 2px;
+}
+
+g.middle rect {
+  stroke: $darker-orange;
+  stroke-width: 2px;
+  fill: $middle-orange;
+}
+
+g.leaf > rect {
+  display: none;
+}
+
+g > text {
+  text-anchor: middle;
+  font-size: 9pt;
+}
+
+g.leaf > text {
+  font-size: 10pt;
+  overflow: visible;
+}