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