diff --git a/public/Gruntfile.js b/public/Gruntfile.js
new file mode 100644
index 0000000..f625e2d
--- /dev/null
+++ b/public/Gruntfile.js
@@ -0,0 +1,87 @@
+/**
+ */
+/*
+ * http://gruntjs.com/getting-started
+ *
+ * TODO: Use https://www.npmjs.com/package/grunt-contrib-compress
+ * for assets.
+ * http://yui.github.io/yuidoc/
+ * use it with https://www.npmjs.com/package/grunt-contrib-yuidoc
+ *
+ * RequireJS
+ * http://addyosmani.com/writing-modular-js/
+ * http://qnundrum.com/question/393866
+ */
+
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    concat: {
+      dist: {
+	src : [
+	  'js/lib/dagre/dagre.min.js',
+	  'js/src/menu.js',
+	  'js/src/matchInfo.js',
+	  'js/src/hint.js',
+	  'js/src/vc.js'
+	],
+	dest: 'js/build/kalamar.js'
+      }
+    },
+    uglify : {
+      build : {
+	src: 'js/build/kalamar.js',
+	dest: 'js/build/kalamar.min.js'
+      }
+    },
+    imagemin: {
+      dynamic: {
+	files: [{
+	  expand: true,
+	  cwd: 'img/',
+	  src: ['**/*.{png,gif,jpg,svg}'],
+	  dest: 'img/build/'
+	}]
+      }
+    },
+    sass: {
+      dist: {
+        options: {
+          style: 'compressed'
+        },
+        files: {
+          'css/build/kalamar.css': 'scss/kalamar.scss'
+        }
+      }
+    },
+    watch: {
+/*
+      options: {
+	livereload: true
+      },
+      scripts: {
+        files: ['js/*.js'],
+        tasks: ['concat', 'uglify'],
+        options: {
+          spawn: false
+        },
+      },
+*/
+      css: {
+	files: ['scss/{colors,base,matchinfo,menu,pagination,kalamar}.scss'],
+	tasks: ['sass'],
+	options: {
+	  spawn: false
+	}
+      }
+    }    
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-imagemin');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.registerTask('css', ['sass']);
+  grunt.registerTask('default', ['concat', 'uglify', 'imagemin', 'sass']);
+};
diff --git a/public/css/menu.css b/public/css/menu.css
index 1ab5162..0417fd1 100644
--- a/public/css/menu.css
+++ b/public/css/menu.css
@@ -1,29 +1,5 @@
 /* List view */
 
-ul.menu {
-  position: absolute;
-  text-indent: 0;
-  list-style-type: none;
-  list-style-position: outside;
-  padding-left: 0;
-  padding-bottom: 3px;
-  background-color: #ddd; /* $pagination-bg */
-}
-
-ul.menu,
-ul.menu > span.pref:not(:empty) {
-  text-shadow: none;
-/*
-  background-color: #7ba400;
-*/
-  font-weight: normal;
-  border: 2px solid #688704; /* $middle-green */
-  box-shadow: 2px 2px 2px rgba(0,0,0,0.2); /* $pagination-box-shadow */
-  z-index: 16;
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
 /*
   .hint {
     max-width: 23em;
@@ -34,54 +10,6 @@
   }
 */
 
-ul.menu > li,
-ul.menu > span.pref:not(:empty) {
-  cursor: pointer;
-  padding: 3px 8pt;
-  white-space: normal;
-}
-
-ul.menu > li,
-ul.menu > span.pref:not(.active) {
-  background-color: #ddd; /* $pagination-bg */
-  color: #7ba400; /* $light-green */
-}
-
-ul.menu > li:first-of-type {
-  border-top: 3px solid transparent;
-}
-
-ul.menu > li:last-of-type {
-  border-bottom: 3px solid transparent;
-}
-
-ul.menu > li:first-of-type:not(.no-more) {
-  border-top-color: #ffa500; /* $dark-orange */
-}
-
-ul.menu > li:last-of-type:not(.no-more) {
-  border-bottom-color: #ffa500; /* $dark-orange */
-}
-
-ul.menu > li mark {
-  text-decoration: underline;
-  background-color: transparent;
-  color: inherit;
-  font-weight: bold; /* #496000; */
-}
-
-ul.menu > span.pref:not(:empty) {
-  position: absolute;
-  min-width: 2px;
-  border-bottom-right-radius: 10px;
-  left: 0;
-  bottom: 0;
-  display: block;
-  margin-bottom: -2.1em;
-  padding: .1em .3em;
-  margin-left: -2px;
-  border-radius: 6px;
-}
 
 /*
   border: 2px solid white;
@@ -95,17 +23,6 @@
     border-bottom: 5px solid transparent;
   }
 */
-ul.menu > *.active {
-  background-color: #7ba400; /* $light-green; */
-  color: #496000; /* $dark-green; */
-}
 
-ul.menu > li:hover,
-ul.menu > span.pref:hover {
-/*
-  background-color: rgba(255,255,255,.25);
-  color: #496000;
-*/
-  background-color: #ffa500; /* $dark-orange; */
-  color: white;
-}
+
+
diff --git a/public/js/demo/matchInfo.html b/public/js/demo/matchInfo.html
index 11ba7eb..c79642b 100644
--- a/public/js/demo/matchInfo.html
+++ b/public/js/demo/matchInfo.html
@@ -7,8 +7,7 @@
     <script src="../src/menu.js"></script>
     <script src="../src/matchInfo.js"></script>
     <link type="text/css" rel="stylesheet" href="../../css/font-awesome.min.css"></link>
-    <link type="text/css" rel="stylesheet" href="../../css/matchinfo.css"></link>
-    <link type="text/css" rel="stylesheet" href="../../css/menu.css"></link>
+    <link type="text/css" rel="stylesheet" href="../../css/build/kalamar.css"></link>
     <style type="text/css" rel="stylesheet">
 
 body {
@@ -161,8 +160,12 @@
   }
 };
 
-var e = KorAP.MatchInfo.create(match, available).element();
-document.getElementsByTagName('body')[0].appendChild(e);
+var e = KorAP.MatchInfo.create(match, available);
+
+document.getElementsByTagName('body')[0].appendChild(e.element());
+
+
+e.addTree('cnx', 'c');
 
 /*
 var t = KorAP.MatchInfo.create(match, available).getTable();
diff --git a/public/package.json b/public/package.json
new file mode 100755
index 0000000..a632a94
--- /dev/null
+++ b/public/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "kalamar-static",
+  "version": "0.1.0",
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-concat": "^0.5.1",
+    "grunt-contrib-imagemin": "^0.9.4",
+    "grunt-contrib-sass": "^0.9.2",
+    "grunt-contrib-uglify": "^0.8.0",
+    "grunt-contrib-watch": "^0.6.1"
+  }
+}
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;
+      }
+    }
+  }
+}