diff --git a/public/scss/base.scss b/public/scss/base.scss
new file mode 100644
index 0000000..8337b78
--- /dev/null
+++ b/public/scss/base.scss
@@ -0,0 +1,8 @@
+@charset "utf-8";
+@import "colors";
+
+body, html, select {
+  color: $dark-grey;
+  font-family: verdana, tahoma, arial;
+  margin: 0;
+}
diff --git a/public/scss/colors.scss b/public/scss/colors.scss
new file mode 100644
index 0000000..40082e1
--- /dev/null
+++ b/public/scss/colors.scss
@@ -0,0 +1,61 @@
+/*
+ * Orange
+ */
+// $light-orange-2: #f4eebb;
+$light-orange:   #ffe56a;
+// #ffd080;
+$dark-orange:    #ffa500;
+$darker-orange:  #ff8000;
+$darkest-orange: darken($dark-orange, 20%);
+
+// Yellow: #fff48d
+
+/*
+ * Blue
+ */
+$light-blue:     #cfe6f4;
+$dark-blue:      #73b2f4;
+$darkest-blue:   darken($dark-blue, 40%);
+
+/*
+ * Green
+ */
+$dark-green:    #496000;
+$middle-green:  #688704;
+$light-green:   #7ba400;
+
+/*
+ * Grey
+ */
+$light-grey:   #ddd;
+$middle-grey:  #999;
+$dark-grey:    #333;
+// $nearly-white: #f5f5f5;
+$nearly-white: #fff;
+
+$light-shadow: 3px 3px 3px rgba(0,0,0,0.3);
+
+/**
+ * KWIC colors
+ */
+$kwic-border:       $middle-grey;
+$kwic-line-noneven: $nearly-white;
+$kwic-line-even:    $light-grey;
+$kwic-match-color:  $dark-grey;
+$kwic-match-shadow: $light-shadow;
+
+$kwic-highlight-1:  #c1002b;
+$kwic-highlight-2:  $dark-blue;   // #009ee0;
+$kwic-highlight-3:  $dark-orange; // #f29400;
+$kwic-highlight-4:  $light-green;
+
+$pagination-bg:     $light-grey;
+$pagination-border: $middle-grey;
+$pagination-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+
+$standard-border-radius: 6px;
+
+@mixin standard-text-padding {
+  padding-left: .4em;
+  padding-right: .4em;
+}
\ No newline at end of file
diff --git a/public/scss/kalamar.scss b/public/scss/kalamar.scss
new file mode 100644
index 0000000..7526d92
--- /dev/null
+++ b/public/scss/kalamar.scss
@@ -0,0 +1,8 @@
+@charset "utf-8";
+
+@import "colors";    // Color varia
+
+@import "base";       // Base values
+@import "menu";       // Menu list
+@import "matchinfo";  // Match table and tree
+@import "pagination"; // Pagination
diff --git a/public/scss/matchinfo.scss b/public/scss/matchinfo.scss
new file mode 100644
index 0000000..0ddea47
--- /dev/null
+++ b/public/scss/matchinfo.scss
@@ -0,0 +1,221 @@
+@charset "utf-8";
+@import "colors";
+
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
+/**
+ * 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%;
+  height: auto;
+  font-size: 10pt;
+  > p {
+    position: relative;
+    background-color: $darker-orange;
+    box-sizing: border-box;
+    color: $nearly-white;
+    font-size: inherit;
+    margin: $border-size 0 0 0 !important;
+    font-weight: bold;
+    width: $left-width;
+    text-align: left !important;
+    cursor: pointer;
+    padding-left: $border-size * 2 !important;
+    *.menu {
+      border-top-right-radius: 8px;
+      position: absolute;
+      top: 0;
+      left: $left-distance;
+      margin-top: 0;
+      > li:first-of-type {
+	border-top-right-radius: 5px;
+      }
+    }
+    &:before {
+      content: '+ '; // FontAwesome
+    }
+  }
+}
+
+div.matchtable {
+  z-index: 20;
+  margin-left: $left-distance - ($border-size / 2);
+  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 {
+    th {
+      text-overflow: ellipsis;
+    }
+    > 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;
+    }
+    > * {
+      box-sizing: border-box;
+      padding: 1px 6px;
+      margin: 0px;
+      border: ($border-size / 2) solid $dark-orange;
+    }
+  }
+  tr > td {
+    background-color: $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;
+    text-align: center;
+    margin: 0;
+    padding: 0 !important;
+    float: left;
+    > span {
+      @include matchinfo-head;
+      display: inline-block;
+      margin: 0;
+      &:nth-of-type(2) {
+	margin-left: $border-size;
+      }
+    }
+  }
+  > div {
+    overflow-x: auto;
+    margin: $border-size;
+    box-sizing: border-box;
+    margin-left: $left-distance;
+    background-color: $nearly-white; // $light-orange;
+    > em {
+      background-color: $dark-orange;
+      display: block;
+      width: 1.5em;
+      height: 1.5em;
+      line-height: 1.2em;
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      border-radius: 5px;
+      border: $border-size solid $darker-orange;
+      cursor: pointer;
+      text-align: center;
+      color: $nearly-white;
+      font-weight: bold;
+      font-style: normal;
+      &:after {
+	// FontAwesome
+	content: 'x';
+      }
+    }
+  }
+}
+
+/**
+ * SVG tree
+ */
+
+path.edge {
+  stroke: $darker-orange;
+  stroke-width: 2px;
+  fill: none;
+}
+
+g.middle > rect {
+  stroke: $darker-orange;
+  stroke-width: 2px;
+  fill: $light-orange; // $nearly-white;
+}
+
+g.leaf > rect {
+  display: none;
+}
+
+g > text {
+  text-anchor: middle;
+  font-size: 9pt;
+}
+
+g.leaf > text {
+  font-size: 10pt;
+  overflow: visible;
+}
diff --git a/public/scss/menu.scss b/public/scss/menu.scss
new file mode 100644
index 0000000..43fab57
--- /dev/null
+++ b/public/scss/menu.scss
@@ -0,0 +1,97 @@
+@charset "utf-8";
+@import "colors";
+
+
+/**
+ * Menu list - used nearly everywhere
+ */
+ul.menu {
+  position: absolute;
+  margin: 0;
+  text-indent: 0;
+  list-style-type: none;
+  list-style-position: outside;
+  padding-left: 0;
+  padding-bottom: 3px;
+  background-color: $pagination-bg;
+}
+
+ul.menu,
+ul.menu > span.pref:not(:empty) {
+  box-sizing: border-box;
+  text-shadow: none;
+  font-weight: normal;
+  // Pagination border?
+  border: 2px solid $middle-green;
+  box-shadow: $pagination-box-shadow;
+  z-index: 16;
+  border-radius: $standard-border-radius;
+}
+
+ul.menu > li,
+ul.menu > span.pref:not(:empty) {
+  cursor: pointer;
+  padding: 3px 10px;
+  white-space: normal;
+}
+
+ul.menu > li,
+ul.menu > span.pref:not(.active) {
+  background-color: $pagination-bg;
+  color: $light-green
+}
+
+/**
+ * List items
+ */
+ul.menu {
+  > li {
+    &:first-of-type {
+      border-top: 3px solid transparent;
+      &:not(.no-more) {
+	border-top-color: $dark-orange;
+      }
+    }
+    &:last-of-type {
+      border-bottom: 3px solid transparent;
+      &:not(.no-more) {
+	border-bottom-color: $dark-orange;
+      }
+    }
+    mark {
+      text-decoration: underline;
+      background-color: transparent;
+      color: inherit;
+      font-weight: bold;
+    }
+  }
+  > *.active {
+    background-color: $light-green;
+    color: $dark-green;
+  }
+  > li:hover,
+  > span.pref:hover {
+    background-color: $dark-orange;
+    color: $nearly-white;
+  }
+}
+
+
+/**
+ * Default prefix view
+ */
+ul.menu > span.pref:not(:empty) {
+  position: absolute;
+  min-width: 5px;
+/*
+  border-bottom-right-radius: 10px;
+*/
+  font-size: 80%;
+  left: 0;
+  bottom: 0;
+  display: block;
+  margin-bottom: -2.1em;
+  padding: 2px 6px;
+  margin-left: -2px;
+  border-radius: $standard-border-radius;
+}
diff --git a/public/scss/pagination.scss b/public/scss/pagination.scss
new file mode 100644
index 0000000..c0cfdd1
--- /dev/null
+++ b/public/scss/pagination.scss
@@ -0,0 +1,85 @@
+@charset "utf-8";
+@import "colors";
+
+/**
+ * The pagination view
+ */
+/*
+<div id="pagination">
+  <a rel="prev"><span><i class="fa fa-caret-left"></i></span></a>
+  <a rel="self"><span>1</span></a>
+  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span>2</span></a>
+  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=3"><span>3</span></a>
+  <span><i class="fa fa-ellipsis-h"></i></span>
+  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=67"><span>67</span></a>
+  <a rel="next" href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span><i class="fa fa-caret-right"></i></span></a>
+</div>
+*/
+#pagination {
+  /**
+   * Always in fixed position.
+   * This may need to be overwritten in case multiple
+   * paginations have to be activated.
+   */
+  position: fixed;
+  right: 20px;
+
+  bottom: 10px;
+  z-index: 400;
+
+  span {
+    display: inline-block;
+    background-color: $pagination-bg;
+    height: 1.5em;
+    line-height: 1.5em;
+    @include standard-text-padding;
+    text-align: center;
+    border: {
+      top-width: 2px;
+      top-style: solid;
+      bottom-width:  2px;
+      bottom-style: solid;
+      color: $pagination-border;
+    }
+    box-shadow: $pagination-box-shadow;
+  }
+  a {
+    text-shadow: $light-shadow;
+    &[rel=self] span {
+      border: {
+	color: $dark-orange;
+	left-style: solid;
+	right-style: solid;
+	left-width: 2px;
+	right-width: 2px;
+      }
+      background-color: $light-orange;
+      color: $darkest-orange;
+    }
+    &[rel=next] span {
+      border: {
+	right-width: 2px;
+	right-style: solid;
+	top-right-radius: 12px;
+	bottom-right-radius: 12px;
+      }
+    }
+    &[rel=prev] span {
+      border: {
+	left-width: 2px;
+	left-style: solid;
+	top-left-radius: 12px;
+	bottom-left-radius: 12px;
+      }      
+    }
+    &[href] {
+      color: $light-green;
+      span:hover {
+        background-color: $light-green;
+        border-color: $dark-green;
+        color: $dark-green;
+        text-shadow: none;
+      }
+    }
+  }
+}