diff --git a/public/Gruntfile.js b/Gruntfile.js
similarity index 67%
rename from public/Gruntfile.js
rename to Gruntfile.js
index 940d8e7..b7cf080 100644
--- a/public/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,10 +1,8 @@
-/**
- */
 /*
  * http://gruntjs.com/getting-started
  *
  * Todo: Move all source files outside the public folder!
-
+ *
  * TODO: Use https://www.npmjs.com/package/grunt-contrib-compress
  * for assets.
  * http://yui.github.io/yuidoc/
@@ -13,41 +11,39 @@
  * 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/match.js',
-	  'js/src/hint.js',
-	  'js/src/vc.js',
-	  'js/src/api.js',
-	  'js/src/session.js',
-	  'js/src/tutorial.js',
-	  'js/src/util.js'
+	  'dev/js/lib/dagre/dagre.min.js',
+	  'dev/js/src/menu.js',
+	  'dev/js/src/match.js',
+	  'dev/js/src/hint.js',
+	  'dev/js/src/vc.js',
+	  'dev/js/src/api.js',
+	  'dev/js/src/session.js',
+	  'dev/js/src/tutorial.js',
+	  'dev/js/src/util.js'
 	],
-	dest: 'js/build/kalamar.js'
+	dest: 'dev/js/build/kalamar.js'
       }
     },
     uglify : {
       build : {
-	src: 'js/build/kalamar.js',
-	dest: 'js/build/kalamar.min.js'
+	src: 'dev/js/build/kalamar.js',
+	dest: 'public/js/kalamar-<%= pkg.version %>.js'
       }
     },
     imagemin: {
       dynamic: {
 	files: [{
 	  expand: true,
-	  cwd: 'img/',
+	  cwd: 'dev/img/',
 	  src: ['*.{png,gif,jpg,svg}'],
-	  dest: 'img/build/'
+	  dest: 'public/img/'
 	}]
       }
     },
@@ -57,20 +53,20 @@
           style: 'compressed'
         },
         files: {
-          'css/build/kalamar.css': 'scss/kalamar.scss'
+          'public/css/kalamar-<%= pkg.version %>.css' : 'dev/scss/kalamar.scss'
         }
       }
     },
     jasmine: {
       pivotal: {
 	src: [
-	  'js/src/menu.js',
-	  'js/src/match.js',
-	  'js/src/match.js',
-	  'js/src/vc.js'
+	  'dev/js/src/menu.js',
+	  'dev/js/src/match.js',
+	  'dev/js/src/match.js',
+	  'dev/js/src/vc.js'
 	],
 	options: {
-	  specs: 'js/spec/*Spec.js'
+	  specs: 'dev/js/spec/*Spec.js'
 	}
       }
     },
@@ -88,7 +84,7 @@
       },
 */
       css: {
-	files: ['scss/{util,fonts,base,header,searchbar,matchinfo,resultinfo,kwic,menu,hint,pagination,logos,alertify,vc,media,kalamar,tutorial,query,sidebar}.scss'],
+	files: ['dev/scss/{util,fonts,base,header,searchbar,matchinfo,resultinfo,kwic,menu,hint,pagination,logos,alertify,vc,media,kalamar,tutorial,query,sidebar}.scss'],
 	tasks: ['sass'],
 	options: {
 	  spawn: false
diff --git a/public/img/ids-institute-for-the-german-language.svg b/dev/img/ids-institute-for-the-german-language.svg
similarity index 100%
rename from public/img/ids-institute-for-the-german-language.svg
rename to dev/img/ids-institute-for-the-german-language.svg
diff --git a/public/img/korap-bg-kalamar.svg b/dev/img/korap-bg-kalamar.svg
similarity index 100%
rename from public/img/korap-bg-kalamar.svg
rename to dev/img/korap-bg-kalamar.svg
diff --git a/public/img/korap-logo-kalamar.svg b/dev/img/korap-logo-kalamar.svg
similarity index 100%
rename from public/img/korap-logo-kalamar.svg
rename to dev/img/korap-logo-kalamar.svg
diff --git a/public/img/member-of-the-leibniz-association.svg b/dev/img/member-of-the-leibniz-association.svg
similarity index 100%
rename from public/img/member-of-the-leibniz-association.svg
rename to dev/img/member-of-the-leibniz-association.svg
diff --git a/dev/js/demo/about.html b/dev/js/demo/about.html
new file mode 100644
index 0000000..39afb46
--- /dev/null
+++ b/dev/js/demo/about.html
@@ -0,0 +1,108 @@
+ <!DOCTYPE html>
+<html>
+  <head>
+    <title>Tutorial demo</title>
+    <link type="text/css" rel="stylesheet" href="../../css/build/kalamar.css" />
+    <script src="../src/session.js"></script>
+    <script src="../src/tutorial.js"></script>
+  </head>
+  <body class="embedded">
+    <div id="sidebar" tabindex="0" class="active">
+      <div>
+<!-- Not embedded:
+	<h2>Tutorial</h2>
+-->
+	<nav>
+	  <ul>
+	    <li><a href="/doc/korap">KorAP</a>
+	      <ul>
+		<li><a href="/doc/kalamar" class="active">Kalamar</a></li>
+		<li><a href="/doc/koral">Koral</a></li>
+		<li><a href="/doc/kustvakt">Kustvakt</a></li>
+		<li><a href="/doc/krill">Krill</a></li>
+		<!-- <li>Karang</li> -->
+	      </ul>
+	    </li>
+	    <li><a href="/doc/ql">Query Languages</a>
+	      <ul>
+		<li><a href="/doc/ql/cosmas-2">Cosmas II</a></li>
+		<li><a href="/doc/ql/poliqarp-plus">Poliqarp+</a></li>
+		<li><a href="/doc/ql/annis">Annis QL</a></li>
+		<li><a href="/doc/ql/cql">CQL</a></li>
+		<li><a href="/doc/ql/regexp">RegExp</a></li>
+	      </ul>
+	    </li>
+	    <li><a href="/doc/data">Data</a>
+	      <ul>
+		<li><a href="/doc/data/corpus">Corpora</a>
+		  <ul>
+		    <li><a href="/doc/data/corpus/dereko">DeReKo</a></li>
+		  </ul>
+		</li>
+		<li><a href="/doc/data/annotation">Annotations</a>
+		  <ul>
+		    <li><a href="/doc/data/annotation/connexor">Connexor</a></li>
+		    <li><a href="/doc/data/annotation/mate">Mate</a></li>
+		    <li><a href="/doc/data/annotation/treetagger">TreeTagger</a></li>
+		  </ul>
+		</li>
+	      </ul>
+	    </li>
+	    <li><a href="/doc/api">API</a>
+<!--
+	      <ul>
+		<li><a href="/doc/api/koralquery">KoralQuery</a></li>
+		<li><a href="/doc/api/search">Search API</a></li>
+		<li><a href="/doc/api/match">Match Information API</a></li>
+		<li><a href="/doc/api/user">User API</a></li>
+	      </ul>
+-->
+	    </li>
+	  </ul>
+	</nav>
+      </div>
+    </div>
+    <main class="tutorial">
+      <h2>KorAP-Tutorial</h2>
+      <section id="tut-intro">
+	<h3>Frontend Features</h3>
+	<p>This frontend ...</p>
+      </section>
+
+      <section id="tut-examples">
+	<h3>Example Queries</h3>
+	<p><strong>Poliqarp</strong>: Find all occurrences of the lemma &quot;baum&quot; as annotated by the <a href="#">default foundry</a>.</p>
+	<pre class="query tutorial" data-query="[base=Baum]" data-query-language="poliqarp"><code>[base=Baum]</code></pre>
+      </section>
+
+      <section id="tut-caveats">
+	<h3>Caveats</h3>
+	<p>Memcheck is not perfect; it occasionally produces false positives, and there are mechanisms for suppressing these (see Suppressing errors in the Valgrind User Manual). However, it is typically right 99% of the time, so you should be wary of ignoring its error messages. After all, you wouldn’t ignore warning messages produced by a compiler, right?</p>
+	<p>The suppression mechanism is also useful if Memcheck is reporting errors in library code that you cannot change. The default suppression set hides a lot of these, but you may come across more. Memcheck cannot detect every memory error your program has. For example, it can’t detect out-of-range reads or writes to arrays that are allocated statically or on the stack. But it should detect many errors that could crash your program (eg. cause a segmentation fault).</p>
+	<p>Try to make your program so clean that Memcheck reports no errors. Once you achieve this state, it is much easier to see when changes to the program cause Memcheck to report new errors. Experience from several years of Memcheck use shows that it is possible to make even huge programs run Memcheck-clean. For example, large parts of KDE, OpenOffice.org and Firefox are Memcheck-clean, or very close to it.</p>
+      </section>
+      <section id="tut-more-information">
+	<h3>More information</h3>
+	<p>Please consult the Valgrind FAQ and the Valgrind User Manual, which have much more information. Note that the other tools in the Valgrind distribution can be invoked with the <code>--tool</code> option.</p>
+      </section>
+      <section id="tut-overview">
+	<h3>An Overview of Valgrind</h3>
+	  <p>Valgrind is an instrumentation framework for building dynamic analysis tools. It comes with a set of tools each of which performs some kind of debugging, profiling, or similar task that helps you improve your programs. Valgrind’s architecture is modular, so new tools can be created easily and without disturbing the existing structure.</p>
+	  <p>A number of useful tools are supplied as standard.</p>
+	  <ol>
+	    <li><strong>Memcheck</strong> is a memory error detector. It helps you make your programs, particularly those written in C and C++, more correct.</li>
+	    <li><strong>Cachegrind</strong> is a cache and branch-prediction profiler. It helps you make your programs run faster.</li>
+	    <li><strong>Callgrind</strong> is a call-graph generating cache profiler. It has some overlap with Cachegrind, but also gathers some information that Cachegrind does not.</li>
+	    <li><strong>Helgrind</strong> is a thread error detector. It helps you make your multi-threaded programs more correct.</li>
+	    <li><strong>DRD</strong> is also a thread error detector. It is similar to Helgrind but uses different analysis techniques and so may find different problems.</li>
+	    <li><strong>Massif</strong> is a heap profiler. It helps you make your programs use less memory.</li>
+	    <li><strong>DHAT</strong> is a different kind of heap profiler. It helps you understand issues of block lifetimes, block utilisation, and layout inefficiencies.</li>
+	    <li><strong>SGcheck</strong> is an experimental tool that can detect overruns of stack and global arrays. Its functionality is complementary to that of Memcheck: SGcheck finds problems that Memcheck can’t, and vice versa.</li>
+	    <li><strong>BBV</strong> is an experimental SimPoint basic block vector generator. It is useful to people doing computer architecture research and development.</li>
+	  </ol>
+	  <p>There are also a couple of minor tools that aren’t useful to most users: Lackey is an example tool that illustrates some instrumentation basics; and Nulgrind is the minimal Valgrind tool that does no analysis or instrumentation, and is only useful for testing purposes. Valgrind is closely tied to details of the CPU and operating system, and to a lesser extent, the compiler and basic C libraries. Nonetheless, it supports a number of widely-used platforms, listed in full at <a href="http://www.valgrind.org/">valgrind.org</a>.</p>
+	  <p>Valgrind is built via the standard Unix ./configure, make, make install process; full details are given in the README file in the distribution.</p>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/dev/js/demo/all.html b/dev/js/demo/all.html
new file mode 100644
index 0000000..ec6d017
--- /dev/null
+++ b/dev/js/demo/all.html
@@ -0,0 +1,156 @@
+ <!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS demo</title>
+    <meta charset="utf-8" />
+    <link type="text/css" rel="stylesheet" href="../../css/build/kalamar.css" />
+  </head>
+  <body>
+    <div id="kalamar-bg"></div>
+    <header>
+      <a href="/" class="logo"><h1><span>KorAP - Corpus Analysis Platform</span></h1></a>
+      <form autocomplete="off" action="/kalamar">
+	<div id="searchbar">
+	  <input type="search"
+		 placeholder="Find ..."
+		 name="q"
+		 id="q-field"
+		 autofocus="autofocus" />
+	  <button type="submit"><span>Go</span></button>
+	  <!-- <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i> -->
+	</div>
+	<div id="vc-view"></div>
+	in <input type="hidden" id="vc-name" name="vc-name" value="Wikipedia" />
+	<input type="text" name="vc" id="vc" value="corpusID = Wikipedia" />
+	with <span class="select">
+	  <!-- Change this to js-menu -->
+	  <select name="ql" id="ql-field">
+	    <option value="poliqarp">Poliqarp</option>
+	    <option value="cosmas2">Cosmas II</option>
+	    <option value="annis">Annis</option>
+	    <option value="cql">CQL v1.2</option>
+	  </select>
+	</span>
+	<div id="button-right">
+	  <input type="checkbox"
+		 value="1"
+		 name="cutoff"
+		 class="checkbox"
+		 id="q-cutoff-field" />
+	  <label for="q-cutoff-field"><span></span>Glimpse</label>
+
+	  <!-- Todo: open tutorial - like openTutorial() -->
+	  <a href="about.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
+	</div>
+      </form>
+    </header>
+
+    <div id="sidebar" tabindex="0">
+      <h2>Tutorial</h2>
+      <p>Hui</p>
+    </div>
+
+    <main>
+      <div class="resultinfo">
+	<div id="pagination">
+	  <a rel="prev"><span><span>&lt;</span></span></a>
+	  <a rel="self"><span>1</span></a>
+	  <a href="#2"><span>2</span></a>
+	  <a href="#3"><span>3</span></a>
+	  <a class="ellipsis"><span><span>...</span></span></a>
+	  <a href="#52230"><span>52230</span></a>
+	  <a rel="next" href="#2"><span><span>&gt;</span></span></a>
+	</div>
+	<p class="found">Found <span id="total-results">unknown amount of matches</span> in 59.93ms</p>
+      </div>
+
+      <div id="search">
+	<ol class="align-left">
+	  <li data-corpus-id="WPD"
+	      data-doc-id="WWW"
+	      data-text-id="03313"
+	      data-match-id="p102-103"
+	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
+	      id="WPD-WWW.03313-p102-103">
+	    <div>
+	      <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><mark><mark class="class-2 level-1">Dies </mark><mark class="class-1 level-0"><mark class="class-2 level-1"><mark class="class-3 level-2">ist</mark> ein</mark> Test</mark></mark><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	      <!-- only inject via javascript! -->
+	    </div>
+	    <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	    <!-- only inject via javascript! -->
+	    <!--
+	    <ul class="action right">
+	      <li class="close" title="Close"><a href="#">Close hit<i class="fa fa-toggle-up"></i></a></li>
+	      <li class="open" title="Open in new tab"><a href="#WPD-WWW.03313-p102-103" target="_blank"><i class="fa fa-external-link-square"></i></a></li>
+	      <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
+	    </ul>
+-->
+	  </li>
+	  <li data-corpus-id="WPD"
+	      data-doc-id="FFF"
+	      data-text-id="01460"
+	      data-match-id="p119-120"
+	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
+	      id="WPD-FFF.01460-p119-120">
+	    <div>
+	      <div class="snippet startMore endMore"><span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple </span><span class="match">test</span><span class="context-right"> problem.</span></div>
+	      <div class="tokenInfo"></div>
+	    </div>
+	    <p class="ref"><strong>Fehlbezogenes Adjektiv</strong> by Joni2,Peterlustig,BWBot; published on 2005-03-28 as FFF.01460 (WPD)</p>
+	    <ul class="action right">
+	      <li class="close" title="Close"><a href="#"><i class="fa fa-toggle-up"></i></a></li>
+	      <li class="open" title="Open in new tab"><a href="#WPD-FFF.01460-p119-120" target="_blank"><i class="fa fa-external-link-square"></i></a></li>
+	      <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
+	    </ul>
+	  </li>
+
+	  <li data-corpus-id="WPD"
+	      data-doc-id="HHH"
+	      data-text-id="06056"
+	      data-match-id="p2564-2565"
+	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
+	      id="WPD-HHH.06056-p2564-2565">
+	    <div>
+	      <div class="snippet startMore endMore"><span class="context-left">HDTV Samples from European (and other) broadcasters and </span><span class="match">test</span><span class="context-right"> transmissions in Europe</span></div>
+	      <div class="tokenInfo"></div>
+	    </div>
+	    <p class="ref"><strong>High Definition Television</strong> by ArtMechanic,TheK,Andreas -horn- Hornig; published on 2005-03-28 as HHH.06056 (WPD)</p>
+	    <ul class="action right">
+	      <li class="close" title="Close"><a href="#"><i class="fa fa-toggle-up"></i></a></li>
+	      <li class="open" title="Open in new tab"><a href="#WPD-HHH.06056-p2564-2565" target="_blank"><i class="fa fa-external-link-square"></i></a></li>
+	      <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
+	    </ul>
+	  </li>
+      </div>
+      <div id="menu"></div>
+
+      <div class="intro">
+	<p><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiple annotated corpora and complex search queries independent of particular research questions.</p>
+	<p>This is the new frontend for KorAP, with currently no access to restricted corpora. For full access, please visit the <a href="http://korap.ids-mannheim.de/app">first frontend</a>.</p>
+
+	<p><strong>New to KorAP?</strong> Please check out our <a href="#">tutorial</a>!</p>
+
+	<p>KorAP is developed at the <a href="http://www.ids-mannheim.de">Institute for the German Language</a> and funded by the <a href="http://www.leibniz-gemeinschaft.de/en/about-us/leibniz-competition/projekte-2011/2011-funding-line-2/">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
+      </div>
+      <div id="logos">
+	<div>
+	  <a href="http://www.ids-mannheim.de/" class="logo"><p id="ids-logo"><span>Developed at the Institute for the German Language (IDS)</span></p></a>
+	  <a href="http://www.leibniz-gemeinschaft.de/" class="logo"><p id="leibniz-logo"><span>Member of the Leibniz Association</span></p></a>
+	</div>
+      </div>
+    </main>
+    <script src="../lib/dagre/dagre.min.js"></script>
+    <script src="../src/api.js"></script>
+    <script src="../src/hint.js"></script>
+    <script src="../src/match.js"></script>
+    <script src="../src/menu.js"></script>
+    <script src="../src/vc.js"></script>
+    <script src="../src/session.js"></script>
+    <script src="../src/tutorial.js"></script>
+    <script src="../src/util.js"></script>
+    <script>
+      KorAP.URL = 'http://localhost:3000';
+    </script>
+    <script src="./all.js"></script>
+  </body>
+</html>
diff --git a/dev/js/demo/all.js b/dev/js/demo/all.js
new file mode 100644
index 0000000..b29b0b5
--- /dev/null
+++ b/dev/js/demo/all.js
@@ -0,0 +1,455 @@
+var snippet = "<span title=\"cnx/l:meist\">" +
+  "  <span title=\"cnx/p:ADV\">" +
+  "    <span title=\"cnx/syn:@PREMOD\">" +
+  "      <span title=\"mate/l:meist\">" +
+  "        <span title=\"mate/p:ADV\">" +
+  "          <span title=\"opennlp/p:ADV\">meist</span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>" +
+  "<span title=\"cnx/l:deutlich\">" +
+  "  <span title=\"cnx/p:A\">" +
+  "    <span title=\"cnx/syn:@PREMOD\">" +
+  "      <span title=\"mate/l:deutlich\">" +
+  "        <span title=\"mate/m:degree:pos\">" +
+  "          <span title=\"mate/p:ADJD\">" +
+  "            <span title=\"opennlp/p:ADJD\">deutlich</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>" +
+  "<span title=\"cnx/l:fähig\">" +
+  "  <span title=\"cnx/l:leistung\">" +
+  "    <span title=\"cnx/p:A\">" +
+  "      <span title=\"cnx/syn:@NH\">" +
+  "        <span title=\"mate/l:leistungsfähig\">" +
+  "          <span title=\"mate/m:degree:comp\">" +
+  "            <span title=\"mate/p:ADJD\">" +
+  "              <span title=\"opennlp/p:ADJD\">leistungsfähiger</span>" +
+  "            </span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>";
+
+var treeSnippet =
+  "<span class=\"context-left\"></span>" +
+  "<span class=\"match\">" +
+  "  <span title=\"xip/c:MC\">" +
+  "    <span title=\"xip/c:TOP\">" +
+  "      <span title=\"xip/c:PP\">" +
+  "        <span title=\"xip/c:PREP\">Mit</span>" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:DET\">dieser</span>" +
+  "          <span title=\"xip/c:NPA\">" +
+  "            <span title=\"xip/c:NOUN\">Methode</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:VERB\">ist</span>" +
+  "      <span title=\"xip/c:NP\">" +
+  "        <span title=\"xip/c:PRON\">es</span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:AP\">" +
+  "        <span title=\"xip/c:ADV\">nun</span>" +
+  "        <span title=\"xip/c:ADJ\">möglich</span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:ADV\">z. B.</span>" +
+  "      <span title=\"xip/c:NPA\">" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:NOUN\">Voice</span>" +
+  "        </span>" +
+  "      </span>" + "(" +
+  "      <span title=\"xip/c:INS\">" +
+  "        <span title=\"xip/c:NPA\">" +
+  "          <span title=\"xip/c:NP\">" +
+  "            <span title=\"xip/c:NOUN\">Sprache</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" + ")" +
+  "      <span title=\"xip/c:VERB\">bevorzugt</span>" +
+  "      <span title=\"xip/c:PP\">" +
+  "        <span title=\"xip/c:PREP\">in</span>" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:PRON\">der</span>" +
+  "        </span>" +
+  "        <span title=\"xip/c:NPA\">" +
+  "          <span title=\"xip/c:NP\">" +
+  "            <span title=\"xip/c:NOUN\">Bridge</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:INFC\">" +
+  "        <span title=\"xip/c:INS\">" +
+  "          <span title=\"xip/c:VERB\">weiterzugeben</span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>" +
+  "<span class=\"context-right\"></span>";
+
+var treeSnippet2 =
+  "<span class=\"context-left\"><\/span>"+
+  "<span class=\"match\">"+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">HDTV<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:NPA\">" +
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">Samples<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:ADV\">from<\/span> "+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">European<\/span>"+
+  "<\/span>"+
+  "<\/span> ("+
+  "<span title=\"xip\/c:INS\">"+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">and<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:ADV\">other<\/span>"+
+  "<\/span>) "+
+  "<span title=\"xip\/c:ADV\">broadcasters<\/span> "+
+  "<span title=\"xip\/c:NPA\">"+
+  "<span title=\"xip\/c:NP\">"+
+  "<span title=\"xip\/c:NOUN\">and<\/span>"+
+  "<\/span>"+
+  "<\/span> "+
+  "<span title=\"xip\/c:VERB\">test<\/span> "+
+  "<span title=\"xip\/c:ADV\">transmissions<\/span> "+
+  "<span title=\"xip\/c:PREP\">in<\/span> "+
+  "<span title=\"xip\/c:NOUN\">Europe<\/span>"+
+  "<\/span>"+
+  "<span class=\"context-right\"><\/span>";
+
+var menuContent = [
+    ['cnx/c', 'cnx', 'c'],
+    ['mate/c', 'mate', 'c'],
+    ['base/c', 'base', 'c'],
+    ['xip/c', 'xip', 'c'],
+    ['tt/c', 'tt', 'c']
+];
+
+var namedEntities = [
+  ["I-LOC",  "I-LOC ",  "Location"],
+  ["I-MISC", "I-MISC ", "Miscellaneous"],
+  ["I-ORG",  "I-ORG ",  "Organization"],
+  ["I-PER",  "I-PER ",  "Person"]
+];
+
+// http://www.ids-mannheim.de/cosmas2/projekt/referenz/stts/morph.html
+// http://nachhalt.sfb632.uni-potsdam.de/owl-docu/stts.html
+var sttsArray = [
+  // "$.", "$(", "$,"
+  ["ADJA","ADJA ", "Attributive Adjective"],
+  ["ADJD","ADJD ", "Predicative Adjective"],
+  ["ADV","ADV ", "Adverb"],
+  ["APPO","APPO ", "Postposition"],
+  ["APPR","APPR ", "Preposition"],
+  ["APPRART","APPRART ", "Preposition with Determiner"],
+  ["APZR","APZR ","Right Circumposition"],
+  ["ART","ART ", "Determiner"],
+  ["CARD","CARD ", "Cardinal Number"],
+  ["FM","FM ", "Foreign Material"],
+  ["ITJ","ITJ ", "Interjection"],
+  ["KOKOM","KOKOM ", "Comparison Particle"],
+  ["KON","KON ", "Coordinating Conjuncion"],
+  ["KOUI","KOUI ", "Subordinating Conjunction with 'zu'"],
+  ["KOUS","KOUS ", "Subordinating Conjunction with Sentence"],
+  ["NE","NE ", "Named Entity"],
+  ["NN","NN ", "Normal Nomina"],
+  ["PAV", "PAV ", "Pronominal Adverb"],
+  ["PDAT","PDAT ","Attributive Demonstrative Pronoun"],
+  ["PDS","PDS ", "Substitutive Demonstrative Pronoun"],
+  ["PIAT","PIAT ", "Attributive Indefinite Pronoun without Determiner"],
+  ["PIDAT","PIDAT ", "Attributive Indefinite Pronoun with Determiner"],
+  ["PIS","PIS ", "Substitutive Indefinite Pronoun"],
+  ["PPER","PPER ", "Personal Pronoun"],
+  ["PPOSAT","PPOSAT ", "Attributive Possessive Pronoun"],
+  ["PPOSS","PPOSS ", "Substitutive Possessive Pronoun"],
+  ["PRELAT","PRELAT ", "Attributive Relative Pronoun"],
+  ["PRELS","PRELS ", "Substitutive Relative Pronoun"],
+  ["PRF","PRF ", "Reflexive Pronoun"],
+  ["PROAV","PROAV ", "Pronominal Adverb"],
+  ["PTKA","PTKA ","Particle with Adjective"],
+  ["PTKANT","PTKANT ", "Answering Particle"],
+  ["PTKNEG","PTKNEG ", "Negation Particle"],
+  ["PTKVZ","PTKVZ ", "Separated Verbal Particle"],
+  ["PTKZU","PTKZU ", "'zu' Particle"],
+  ["PWAT","PWAT ", "Attributive Interrogative Pronoun"],
+  ["PWAV","PWAV ", "Adverbial Interrogative Pronoun"],
+  ["PWS","PWS ", "Substitutive Interrogative Pronoun"],
+  ["TRUNC","TRUNC ","Truncated"],
+  ["VAFIN","VAFIN ", "Auxiliary Finite Verb"],
+  ["VAINF","VAINF ", "Auxiliary Infinite Verb"],
+  ["VAIMP","VAIMP ", "Auxiliary Finite Imperative Verb"],
+  ["VAPP","VAPP ", "Auxiliary Perfect Participle"],
+  ["VMFIN","VMFIN ", "Modal Finite Verb"],
+  ["VMINF","VMINF ", "Modal Infinite Verb"],
+  ["VMPP","VMPP ", "Modal Perfect Participle"],
+  ["VVFIN","VVFIN ","Finite Verb"],
+  ["VVIMP","VVIMP ", "Finite Imperative Verb"],
+  ["VVINF","VVINF ", "Infinite Verb"],
+  ["VVIZU","VVIZU ", "Infinite Verb with 'zu'"],
+  ["VVPP","VVPP ", "Perfect Participle"],
+  ["XY", "XY ", "Non-Word"]
+];
+
+var mateSttsArray = sttsArray.slice(0);
+mateSttsArray.push(
+  ["<root-POS>","<root-POS>","Root Part of Speech"]
+);
+
+
+var vcExample = {
+  "@type":"koral:docGroup",
+  "operation":"operation:or",
+  "operands":[
+    {
+      "@type":"koral:docGroup",
+      "operation":"operation:and",
+      "operands":[
+        {
+          "@type":"koral:doc",
+          "key":"Titel",
+          "value":"Der Birnbaum",
+          "match":"match:eq"
+        },
+        {
+          "@type":"koral:doc",
+          "key":"Veröffentlichungsort",
+          "value":"Mannheim",
+          "match":"match:eq"
+        },
+        {
+          "@type":"koral:docGroup",
+          "operation":"operation:or",
+          "operands":[
+            {
+              "@type":"koral:doc",
+              "key":"Untertitel",
+              "value":"Aufzucht und Pflege",
+              "match":"match:eq"
+            },
+            {
+              "@type":"koral:doc",
+              "key":"Untertitel",
+              "value":"Gedichte",
+              "match":"match:eq",
+              "rewrites" : [
+                {
+                  "@type": "koral:rewrite",
+                  "src" : "policy",
+                  "operation" : "operation:injection",
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "@type":"koral:doc",
+      "key":"Veröffentlichungsdatum",
+      "type":"type:date",
+      "value":"2015-03-05",
+      "match":"match:geq"
+    }
+  ]
+};
+
+
+KorAP.hintArray = {
+  "-" : [
+    ["Connexor",   "cnx/",     "Constituency, Lemma, Morphology, Part-of-Speech, Syntax"],
+    ["CoreNLP",    "corenlp/", "Named Entities"],
+    ["Mate",       "mate/",     "Lemma, Morphology, Part-of-Speech"],
+    ["OpenNLP",    "opennlp/", "Part-of-Speech"],
+    ["TreeTagger", "tt/",      "Lemma, Part-of-Speech"],
+    ["Xerox Parser", "xip/",   "Constituency, Lemma, Part-of-Speech"]
+  ],
+  "corenlp/" : [
+    ["Named Entity", "ne=" , "Combined"],
+    ["Named Entity", "ne_dewac_175m_600=" , "ne_dewac_175m_600"],
+    ["Named Entity", "ne_hgc_175m_600=",    "ne_hgc_175m_600"]
+  ],
+  "corenlp/ne=" : namedEntities,
+  "corenlp/ne_dewac_175m_600=" : namedEntities,
+  "corenlp/ne_hgc_175m_600=" : namedEntities,
+  "cnx/" : [
+    ["Constituency", "c="],
+    ["Lemma", "l="],
+    ["Morphology", "m="],
+    ["Part-of-Speech", "p="],
+    ["Syntax", "syn="]
+  ],
+  "cnx/c=" : [
+    ["np", "np ", "Nominal Phrase"]
+  ],
+  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/morph.html
+  "cnx/m=" : [
+    ["Abbr","Abbr ", "Nouns: Abbreviation"],
+    ["CMP","CMP ", "Adjective: Comparative"],
+    ["IMP", "IMP ", "Mood: Imperative"],
+    ["IND", "IND ", "Mood: Indicative"],
+    ["INF", "INF ", "Infinitive"],
+    ["ORD","ORD ", "Numeral: Ordinal"],
+    ["PAST", "PAST ", "Tense: past"],
+    ["PCP", "PCP ", "Participle"],
+    ["PERF", "PERF ", "Perfective Participle"],
+    ["PL","PL ", "Nouns: Plural"],
+    ["PRES", "PRES ", "Tense: present"],
+    ["PROG", "PROG ", "Progressive Participle"],
+    ["Prop","Prop ", "Nouns: Proper Noun"],
+    ["SUB", "SUB ", "Mood: Subjunctive"],
+    ["SUP","SUP ", "Adjective: Superlative"]
+  ],
+  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/morph.html
+  "cnx/p=" : [
+    ["A", "A ", "Adjective"],
+    ["ADV", "ADV ", "Adverb"],
+    ["CC", "CC ", "Coordination Marker"],
+    ["CS", "CS ", "Clause Marker"],
+    ["DET", "DET ", "Determiner"],
+    ["INTERJ", "INTERJ ", "Interjection"],
+    ["N", "N ", "Noun"],
+    ["NUM", "NUM ", "Numeral"],
+    ["PREP", "PREP ", "Preposition"],
+    ["PRON", "PRON ", "Pro-Nominal"],
+    ["V", "V ", "Verb"]
+  ],
+  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/syntax.html
+  "cnx/syn=" : [
+    ["@ADVL", "@ADVL ", "Adverbial Head"],
+    ["@AUX", "@AUX ", "Auxiliary Verb"],
+    ["@CC", "@CC ", "Coordination"]
+    ["@MAIN", "@MAIN ", "Main Verb"],
+    ["@NH", "@NH ", "Nominal Head"],
+    ["@POSTMOD", "@POSTMOD ", "Postmodifier"],
+    ["@PREMARK", "@PREMARK ", "Preposed Marker"],
+    ["@PREMOD", "@POSTMOD ", "Premodifier"]
+  ],
+  "opennlp/" : [
+    ["Part-of-Speech", "p="]
+  ],
+  "opennlp/p=" : sttsArray,
+  "xip/" : [
+    ["Constituency", "c="],
+    // Inactive: ["Dependency", "d="],
+    ["Lemma", "l="],
+    ["Part-of-Speech", "p="],
+  ],
+  // "xip/c=" : [],
+  // Inactive: "xip/d=" : [],
+  // "xip/p=" : [],
+  "tt/" : [
+    ["Lemma", "l="],
+    ["Part-of-Speech", "p="]
+  ],
+  "tt/p=" : sttsArray,
+  "mate/" : [
+    // Inactive: "d" : ["d=", "Dependency"],
+    ["Lemma", "l="],
+    ["Morphology", "m="],
+    ["Part-of-Speech", "p="]
+  ],
+  // Inactive: mate/d=
+  "mate/p=" : mateSttsArray,
+  "mate/m=" : [
+    ["Case", "case:"],
+    ["Degree", "degree:"],
+    ["Gender", "gender:"],
+    ["Mood", "mood:"],
+    ["Number", "number:"],
+    ["Person", "person:"],
+    ["Tense","tense:"],
+    ["No type", "<no-type> "]
+  ],
+  "mate/m=case:" : [
+    ["acc", "acc ", "Accusative"],
+    ["dat","dat ", "Dative"],
+    ["gen", "gen ","Genitive"],
+    ["nom","nom ", "Nominative"],
+    ["*","* ", "Undefined"]
+  ],
+  "mate/m=degree:" : [
+    ["comp","comp ", "Comparative"],
+    ["pos","pos ", "Positive"],
+    ["sup","sup ", "Superative"]
+  ],
+  "mate/m=gender:" : [
+    ["fem", "fem ", "Feminium"],
+    ["masc", "masc ", "Masculinum"],
+    ["neut","neut ", "Neuter"],
+    ["*","* ","Undefined"]
+  ],
+  "mate/m=mood:" : [
+    ["imp","imp ", "Imperative"],
+    ["ind","ind ", "Indicative"],
+    ["subj","subj ", "Subjunctive"]
+  ],
+  "mate/m=number:" : [
+    ["pl","pl ","Plural"],
+    ["sg","sg ","Singular"],
+    ["*","* ","Undefined"]
+  ],
+  "mate/m=person:" : [
+    ["1","1 ", "First Person"],
+    ["2","2 ", "Second Person"],
+    ["3","3 ", "Third Person"]
+  ],
+  "mate/m=tense:" : [
+    ["past","past ", "Past"],
+    ["pres","pres ", "Present"]
+  ]
+};
+
+// Parse and show the table
+// Override getMatchInfo API call
+KorAP.API.getMatchInfo = function(match, callObj, cb) {
+  if (callObj["spans"] !== undefined && callObj["spans"] === true) {
+    cb({ "snippet": treeSnippet2 });
+  }
+  else {
+    cb({ "snippet": snippet });
+  }
+};
+
+
+/**
+ * Do some things at the beginning.
+ */
+document.addEventListener('DOMContentLoaded', function () {
+
+  // Decorate actions
+  var init = KorAP.init();
+
+  var menu = KorAP.MatchTreeMenu.create(
+    undefined,
+    menuContent
+  );
+
+  // document.getElementById('vc-choose').click();
+
+  // init.tutorial.show();
+
+  // Don't hide!!!
+  menu.hide = function () {};
+  document.getElementById('menu').appendChild(menu.element());
+  menu.limit(3);
+  menu.show();
+  menu.focus();
+});
diff --git a/dev/js/demo/hint.html b/dev/js/demo/hint.html
new file mode 100644
index 0000000..154bcaf
--- /dev/null
+++ b/dev/js/demo/hint.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hint demo</title>
+    <meta charset="utf-8" />
+    <script src="../src/menu.js"></script>
+    <script src="../src/hint.js"></script>
+    <link type="text/css" rel="stylesheet" href="../../css/build/kalamar.css" />
+    <script>
+// http://www.nlpado.de/~sebastian/software/ner_german.shtml
+// http://www.cnts.ua.ac.be/conll2003/ner/
+var namedEntities = [
+  ["I-LOC",  "I-LOC ",  "Location"],
+  ["I-MISC", "I-MISC ", "Miscellaneous"],
+  ["I-ORG",  "I-ORG ",  "Organization"],
+  ["I-PER",  "I-PER ",  "Person"]
+];
+
+// http://www.ids-mannheim.de/cosmas2/projekt/referenz/stts/morph.html
+// http://nachhalt.sfb632.uni-potsdam.de/owl-docu/stts.html
+var sttsArray = [
+  // "$.", "$(", "$,"
+  ["ADJA","ADJA ", "Attributive Adjective"],
+  ["ADJD","ADJD ", "Predicative Adjective"],
+  ["ADV","ADV ", "Adverb"],
+  ["APPO","APPO ", "Postposition"],
+  ["APPR","APPR ", "Preposition"],
+  ["APPRART","APPRART ", "Preposition with Determiner"],
+  ["APZR","APZR ","Right Circumposition"],
+  ["ART","ART ", "Determiner"],
+  ["CARD","CARD ", "Cardinal Number"],
+  ["FM","FM ", "Foreign Material"],
+  ["ITJ","ITJ ", "Interjection"],
+  ["KOKOM","KOKOM ", "Comparison Particle"],
+  ["KON","KON ", "Coordinating Conjuncion"],
+  ["KOUI","KOUI ", "Subordinating Conjunction with 'zu'"],
+  ["KOUS","KOUS ", "Subordinating Conjunction with Sentence"],
+  ["NE","NE ", "Named Entity"],
+  ["NN","NN ", "Normal Nomina"],
+  ["PAV", "PAV ", "Pronominal Adverb"],
+  ["PDAT","PDAT ","Attributive Demonstrative Pronoun"],
+  ["PDS","PDS ", "Substitutive Demonstrative Pronoun"],
+  ["PIAT","PIAT ", "Attributive Indefinite Pronoun without Determiner"],
+  ["PIDAT","PIDAT ", "Attributive Indefinite Pronoun with Determiner"],
+  ["PIS","PIS ", "Substitutive Indefinite Pronoun"],
+  ["PPER","PPER ", "Personal Pronoun"],
+  ["PPOSAT","PPOSAT ", "Attributive Possessive Pronoun"],
+  ["PPOSS","PPOSS ", "Substitutive Possessive Pronoun"],
+  ["PRELAT","PRELAT ", "Attributive Relative Pronoun"],
+  ["PRELS","PRELS ", "Substitutive Relative Pronoun"],
+  ["PRF","PRF ", "Reflexive Pronoun"],
+  ["PROAV","PROAV ", "Pronominal Adverb"],
+  ["PTKA","PTKA ","Particle with Adjective"],
+  ["PTKANT","PTKANT ", "Answering Particle"],
+  ["PTKNEG","PTKNEG ", "Negation Particle"],
+  ["PTKVZ","PTKVZ ", "Separated Verbal Particle"],
+  ["PTKZU","PTKZU ", "'zu' Particle"],
+  ["PWAT","PWAT ", "Attributive Interrogative Pronoun"],
+  ["PWAV","PWAV ", "Adverbial Interrogative Pronoun"],
+  ["PWS","PWS ", "Substitutive Interrogative Pronoun"],
+  ["TRUNC","TRUNC ","Truncated"],
+  ["VAFIN","VAFIN ", "Auxiliary Finite Verb"],
+  ["VAINF","VAINF ", "Auxiliary Infinite Verb"],
+  ["VAIMP","VAIMP ", "Auxiliary Finite Imperative Verb"],
+  ["VAPP","VAPP ", "Auxiliary Perfect Participle"],
+  ["VMFIN","VMFIN ", "Modal Finite Verb"],
+  ["VMINF","VMINF ", "Modal Infinite Verb"],
+  ["VMPP","VMPP ", "Modal Perfect Participle"],
+  ["VVFIN","VVFIN ","Finite Verb"],
+  ["VVIMP","VVIMP ", "Finite Imperative Verb"],
+  ["VVINF","VVINF ", "Infinite Verb"],
+  ["VVIZU","VVIZU ", "Infinite Verb with 'zu'"],
+  ["VVPP","VVPP ", "Perfect Participle"],
+  ["XY", "XY ", "Non-Word"]
+];
+
+var mateSttsArray = sttsArray.slice(0);
+mateSttsArray.push(
+  ["<root-POS>","<root-POS>","Root Part of Speech"]
+);
+
+
+var hintArray = {
+  "-" : [
+    ["Connexor",   "cnx/",     "Constituency, Lemma, Morphology, Part-of-Speech, Syntax"],
+    ["CoreNLP",    "corenlp/", "Named Entities"],
+    ["Mate",       "mate/",     "Lemma, Morphology, Part-of-Speech"],
+    ["OpenNLP",    "opennlp/", "Part-of-Speech"],
+    ["TreeTagger", "tt/",      "Lemma, Part-of-Speech"],
+    ["Xerox Parser", "xip/",   "Constituency, Lemma, Part-of-Speech"]
+  ],
+  "corenlp/" : [
+    ["Named Entity", "ne=" , "Combined"],
+    ["Named Entity", "ne_dewac_175m_600=" , "ne_dewac_175m_600"],
+    ["Named Entity", "ne_hgc_175m_600=",    "ne_hgc_175m_600"]
+  ],
+  "corenlp/ne=" : namedEntities,
+  "corenlp/ne_dewac_175m_600=" : namedEntities,
+  "corenlp/ne_hgc_175m_600=" : namedEntities,
+  "cnx/" : [
+    ["Constituency", "c="],
+    ["Lemma", "l="],
+    ["Morphology", "m="],
+    ["Part-of-Speech", "p="],
+    ["Syntax", "syn="]
+  ],
+  "cnx/c=" : [
+    ["np", "np ", "Nominal Phrase"]
+  ],
+  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/morph.html
+  "cnx/m=" : [
+    ["Abbr","Abbr ", "Nouns: Abbreviation"],
+    ["CMP","CMP ", "Adjective: Comparative"],
+    ["IMP", "IMP ", "Mood: Imperative"],
+    ["IND", "IND ", "Mood: Indicative"],
+    ["INF", "INF ", "Infinitive"],
+    ["ORD","ORD ", "Numeral: Ordinal"],
+    ["PAST", "PAST ", "Tense: past"],
+    ["PCP", "PCP ", "Participle"],
+    ["PERF", "PERF ", "Perfective Participle"],
+    ["PL","PL ", "Nouns: Plural"],
+    ["PRES", "PRES ", "Tense: present"],
+    ["PROG", "PROG ", "Progressive Participle"],
+    ["Prop","Prop ", "Nouns: Proper Noun"],
+    ["SUB", "SUB ", "Mood: Subjunctive"],
+    ["SUP","SUP ", "Adjective: Superlative"]
+  ],
+  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/morph.html
+  "cnx/p=" : [
+    ["A", "A ", "Adjective"],
+    ["ADV", "ADV ", "Adverb"],
+    ["CC", "CC ", "Coordination Marker"],
+    ["CS", "CS ", "Clause Marker"],
+    ["DET", "DET ", "Determiner"],
+    ["INTERJ", "INTERJ ", "Interjection"],
+    ["N", "N ", "Noun"],
+    ["NUM", "NUM ", "Numeral"],
+    ["PREP", "PREP ", "Preposition"],
+    ["PRON", "PRON ", "Pro-Nominal"],
+    ["V", "V ", "Verb"]
+  ],
+  // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/syntax.html
+  "cnx/syn=" : [
+    ["@ADVL", "@ADVL ", "Adverbial Head"],
+    ["@AUX", "@AUX ", "Auxiliary Verb"],
+    ["@CC", "@CC ", "Coordination"]
+    ["@MAIN", "@MAIN ", "Main Verb"],
+    ["@NH", "@NH ", "Nominal Head"],
+    ["@POSTMOD", "@POSTMOD ", "Postmodifier"],
+    ["@PREMARK", "@PREMARK ", "Preposed Marker"],
+    ["@PREMOD", "@POSTMOD ", "Premodifier"]
+  ],
+  "opennlp/" : [
+    ["Part-of-Speech", "p="]
+  ],
+  "opennlp/p=" : sttsArray,
+  "xip/" : [
+    ["Constituency", "c="],
+    // Inactive: ["Dependency", "d="],
+    ["Lemma", "l="],
+    ["Part-of-Speech", "p="],
+  ],
+  // "xip/c=" : [],
+  // Inactive: "xip/d=" : [],
+  // "xip/p=" : [],
+  "tt/" : [
+    ["Lemma", "l="],
+    ["Part-of-Speech", "p="]
+  ],
+  "tt/p=" : sttsArray,
+  "mate/" : [
+    // Inactive: "d" : ["d=", "Dependency"],
+    ["Lemma", "l="],
+    ["Morphology", "m="],
+    ["Part-of-Speech", "p="]
+  ],
+  // Inactive: mate/d=
+  "mate/p=" : mateSttsArray,
+  "mate/m=" : [
+    ["Case", "case:"],
+    ["Degree", "degree:"],
+    ["Gender", "gender:"],
+    ["Mood", "mood:"],
+    ["Number", "number:"],
+    ["Person", "person:"],
+    ["Tense","tense:"],
+    ["No type", "<no-type> "]
+  ],
+  "mate/m=case:" : [
+    ["acc", "acc ", "Accusative"],
+    ["dat","dat ", "Dative"],
+    ["gen", "gen ","Genitive"],
+    ["nom","nom ", "Nominative"],
+    ["*","* ", "Undefined"]
+  ],
+  "mate/m=degree:" : [
+    ["comp","comp ", "Comparative"],
+    ["pos","pos ", "Positive"],
+    ["sup","sup ", "Superative"]
+  ],
+  "mate/m=gender:" : [
+    ["fem", "fem ", "Feminium"],
+    ["masc", "masc ", "Masculinum"],
+    ["neut","neut ", "Neuter"],
+    ["*","* ","Undefined"]
+  ],
+  "mate/m=mood:" : [
+    ["imp","imp ", "Imperative"],
+    ["ind","ind ", "Indicative"],
+    ["subj","subj ", "Subjunctive"]
+  ],
+  "mate/m=number:" : [
+    ["pl","pl ","Plural"],
+    ["sg","sg ","Singular"],
+    ["*","* ","Undefined"]
+  ],
+  "mate/m=person:" : [
+    ["1","1 ", "First Person"],
+    ["2","2 ", "Second Person"],
+    ["3","3 ", "Third Person"]
+  ],
+  "mate/m=tense:" : [
+    ["past","past ", "Past"],
+    ["pres","pres ", "Present"]
+  ]
+};
+
+    </script>
+  </head>
+  <body>
+    <header>
+      <form autocomplete="off" action="/kalamar">
+	<div id="searchbar">
+	  <input type="search"
+		 placeholder="Find ..."
+		 name="q"
+		 id="q-field"
+		 autofocus="autofocus" />
+	  <button type="submit"><span>Go</span></button>
+	</div>
+      </form>
+    </header>
+    <script>
+KorAP.hintArray = hintArray;
+var input = KorAP.Hint.create();
+    </script>
+  </body>
+</html>
diff --git a/dev/js/demo/match.html b/dev/js/demo/match.html
new file mode 100644
index 0000000..7b51996
--- /dev/null
+++ b/dev/js/demo/match.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Match demo</title>
+    <meta charset="utf-8" />
+    <script src="../lib/dagre/dagre.min.js"></script>
+    <script src="../src/util.js"></script>
+    <script src="../src/menu.js"></script>
+    <script src="../src/match.js"></script>
+    <link type="text/css"
+	  rel="stylesheet"
+	  href="../../css/font-awesome.min.css"></link>
+    <link type="text/css"
+	  rel="stylesheet"
+	  href="../../css/build/kalamar.css"></link>
+    <style type="text/css"
+	   rel="stylesheet">
+
+body {
+  background-color: #ffa500;
+}
+
+body, text {
+  font-family: tahoma, verdana, arial;
+  color: #444;
+}
+
+text {
+  fill: #444;
+}
+
+    </style>
+  </head>
+  <body>
+    <div id="search">
+      <ol class="align-left">
+	<li data-corpus-id="WPD"
+	    data-doc-id="WWW"
+	    data-text-id="03313"
+	    data-match-id="p102-103"
+	    data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	    id="WPD-WWW.03313-p102-103">
+	  <div>
+	    <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	  </div>
+	  <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	</li>
+      </ol>
+    </div>
+
+    <script>
+var snippet = "<span title=\"cnx/l:meist\">" +
+  "  <span title=\"cnx/p:ADV\">" +
+  "    <span title=\"cnx/syn:@PREMOD\">" +
+  "      <span title=\"mate/l:meist\">" +
+  "        <span title=\"mate/p:ADV\">" +
+  "          <span title=\"opennlp/p:ADV\">meist</span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>" +
+  "<span title=\"cnx/l:deutlich\">" +
+  "  <span title=\"cnx/p:A\">" +
+  "    <span title=\"cnx/syn:@PREMOD\">" +
+  "      <span title=\"mate/l:deutlich\">" +
+  "        <span title=\"mate/m:degree:pos\">" +
+  "          <span title=\"mate/p:ADJD\">" +
+  "            <span title=\"opennlp/p:ADJD\">deutlich</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>" +
+  "<span title=\"cnx/l:fähig\">" +
+  "  <span title=\"cnx/l:leistung\">" +
+  "    <span title=\"cnx/p:A\">" +
+  "      <span title=\"cnx/syn:@NH\">" +
+  "        <span title=\"mate/l:leistungsfähig\">" +
+  "          <span title=\"mate/m:degree:comp\">" +
+  "            <span title=\"mate/p:ADJD\">" +
+  "              <span title=\"opennlp/p:ADJD\">leistungsfähiger</span>" +
+  "            </span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>";
+
+var treeSnippet =
+  "<span class=\"context-left\"></span>" +
+  "<span class=\"match\">" +
+  "  <span title=\"xip/c:MC\">" +
+  "    <span title=\"xip/c:TOP\">" +
+  "      <span title=\"xip/c:PP\">" +
+  "        <span title=\"xip/c:PREP\">Mit</span>" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:DET\">dieser</span>" +
+  "          <span title=\"xip/c:NPA\">" +
+  "            <span title=\"xip/c:NOUN\">Methode</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:VERB\">ist</span>" +
+  "      <span title=\"xip/c:NP\">" +
+  "        <span title=\"xip/c:PRON\">es</span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:AP\">" +
+  "        <span title=\"xip/c:ADV\">nun</span>" +
+  "        <span title=\"xip/c:ADJ\">möglich</span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:ADV\">z. B.</span>" +
+  "      <span title=\"xip/c:NPA\">" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:NOUN\">Voice</span>" +
+  "        </span>" +
+  "      </span>" + "(" +
+  "      <span title=\"xip/c:INS\">" +
+  "        <span title=\"xip/c:NPA\">" +
+  "          <span title=\"xip/c:NP\">" +
+  "            <span title=\"xip/c:NOUN\">Sprache</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" + ")" +
+  "      <span title=\"xip/c:VERB\">bevorzugt</span>" +
+  "      <span title=\"xip/c:PP\">" +
+  "        <span title=\"xip/c:PREP\">in</span>" +
+  "        <span title=\"xip/c:NP\">" +
+  "          <span title=\"xip/c:PRON\">der</span>" +
+  "        </span>" +
+  "        <span title=\"xip/c:NPA\">" +
+  "          <span title=\"xip/c:NP\">" +
+  "            <span title=\"xip/c:NOUN\">Bridge</span>" +
+  "          </span>" +
+  "        </span>" +
+  "      </span>" +
+  "      <span title=\"xip/c:INFC\">" +
+  "        <span title=\"xip/c:INS\">" +
+  "          <span title=\"xip/c:VERB\">weiterzugeben</span>" +
+  "        </span>" +
+  "      </span>" +
+  "    </span>" +
+  "  </span>" +
+  "</span>" +
+  "<span class=\"context-right\"></span>";
+
+// Parse and show the table
+// Override getMatchInfo API call
+KorAP.API.getMatchInfo = function(match, callObj) {
+  if (callObj["spans"] !== undefined && callObj["spans"] === true) {
+    return { "snippet": treeSnippet };
+  }
+  else {
+    return { "snippet": snippet };
+  }
+};
+
+KorAP.init();
+    </script>
+
+    <!--
+    <div class="matchinfo">
+      <div class="matchtable">
+	<table>
+	  <thead>
+            <tr>
+	      <th>Foundry</th>
+	      <th>Layer</th>
+	      <th>Ich</th>
+	      <th>Du</th>
+	      <th>Er</th>
+	    </tr>
+	  </thead>
+	  <tbody>
+	    <tr tabindex="0">
+	      <th>Hallo</th>
+	      <th>X</th>
+	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+	    </tr>
+	    <tr tabindex="0">
+	      <th>geht</th>
+	      <th>y</th>
+	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+	    </tr>
+	    <tr tabindex="0">
+	      <th>es</th>
+	      <th>z</th>
+	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+	      <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+	    </tr>
+	  </tbody>
+	</table>
+      </div>
+    </div>
+    -->
+
+  </body>
+</html>
diff --git a/dev/js/demo/matchSort.html b/dev/js/demo/matchSort.html
new file mode 100644
index 0000000..860560e
--- /dev/null
+++ b/dev/js/demo/matchSort.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Match demo</title>
+    <meta charset="utf-8" />
+    <link type="text/css"
+	  rel="stylesheet"
+	  href="../../css/build/kalamar.css"></link>
+    <style type="text/css"
+	   rel="stylesheet">
+body {
+  background-color: #ffa500;
+}
+    </style>
+  </head>
+  <body>
+    <div id="search">
+      <ol class="align-left">
+	<li data-corpus-id="WPD"
+	    data-doc-id="WWW"
+	    data-text-id="03313"
+	    data-match-id="p102-103"
+	    data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	    id="WPD-WWW.03313-p102-103">
+	  <div>
+	    <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	  </div>
+	  <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	</li>
+	<li data-corpus-id="WPD"
+	    data-doc-id="WWW"
+	    data-text-id="03313"
+	    data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans"
+	    id="WPD-WWW.03313-p102-103">
+	  <ol>
+	    <li data-match-id="p102-103">
+	      <div>
+		<div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	      </div>
+	      <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	    </li>
+	    <li data-match-id="p108-109">
+	      <div>
+		<div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><span class="match">test</span><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
+	      </div>
+	      <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+	    </li>
+	  </ol>
+	  <span class="matchMore">+5</span>
+	</li>
+      </ol>
+    </div>
+
+
+    <p>Sort by</p>
+    <p>click auf ein Item gibt ihm höchste Priorität, Klick auf asc/desc ändert die Sortierung, Klick auf ein aktives Feld deaktiviert. Sortiert wird nur nach Klick auf (okay) if prefix feld</p>
+    <ul class="menu sort">
+      <li class="active">CorpusID (asc|desc)</li>
+      <li class="active">Author (asc|desc)</li>
+      <li>Date</li>
+      <span class="pref right" style="right: 0; left: auto;">Sortieren</span>
+    </ul>
+
+  </body>
+</html>
diff --git a/dev/js/demo/menu.html b/dev/js/demo/menu.html
new file mode 100644
index 0000000..985be65
--- /dev/null
+++ b/dev/js/demo/menu.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Menu demo</title>
+    <meta charset="utf-8" />
+    <script src="../src/menu.js"></script>
+<!--
+    <link href="../../css/vc.css" rel="stylesheet" type="text/css"></link>
+-->
+    <link href="../../css/build/kalamar.css" rel="stylesheet" type="text/css"></link>
+    <style type="text/css" rel="stylesheet">
+.info {
+  background-color: #ddd;
+  color: black;
+  padding: 1em;
+  font-family: mono;
+}
+body {
+  margin: 0;
+  background-color: #ddd;
+}
+    </style>
+  </head>
+  <body>
+    <div style="position: absolute; background-color: #7ba400; height: 50px; width: 100%;"></div>
+
+    <div id="menu" class="vc"></div>
+
+    <main>
+      <div>
+	<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="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=2"><span>2</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=3"><span>3</span></a><span><i class="fa fa-ellipsis-h"></i></span><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=52230"><span>52230</span></a><a rel="next" href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=2"><span><i class="fa fa-caret-right"></i></span></a></div>
+      </div>
+    </main>
+
+    <script>
+KorAP.OwnMenuItem = {
+  create : function (params) {
+    return Object.create(KorAP.MenuItem).upgradeTo(KorAP.OwnMenuItem)._init(params);
+  },
+  content : function (content) {
+    if (arguments.length === 1) {
+      this._content = content;
+    };
+    return this._content;
+  },
+
+  // enter or click
+  onclick : function () {
+    console.log(this._name);
+  },
+
+  // right arrow
+  further : function () {
+    console.log("Further: " + this._name);
+  },
+  _init : function (params) {
+    if (params[0] === undefined)
+      throw new Error("Missing parameters");
+
+    this._name = params[0];
+    this._content = document.createTextNode(this._name);
+    this._lcField = ' ' + this.content().textContent.toLowerCase();
+
+    return this;
+  }
+};
+
+KorAP.OwnPrefix = {
+  create : function () {
+    return Object.create(KorAP.MenuPrefix)
+      .upgradeTo(KorAP.OwnPrefix)
+      ._init();
+  },
+  onclick : function () {
+    console.log('Prefix: ' + this.value());
+  }
+}
+
+KorAP.OwnMenu = {
+  create : function (params) {
+    return Object.create(KorAP.Menu)
+      .upgradeTo(KorAP.OwnMenu)
+      ._init(KorAP.OwnMenuItem, KorAP.OwnPrefix, params);
+  }
+};
+
+var menu = KorAP.OwnMenu.create([
+  ['Titel', 'title', 'string'],
+  ['Untertitel', 'subTitle', 'string'],
+  ['Veröffentlichungsdatum', 'pubDate', 'date'],
+  ['Länge', 'length', 'integer'],
+  ['Autor', 'author', 'string'],
+  ['Genre', 'genre', 'string'],
+  ['corpusID', 'corpusID', 'string'],
+  ['docID', 'docID', 'string'],
+  ['textID', 'textID', 'string']
+]);
+
+    document.getElementById('menu').appendChild(menu.element());
+
+    menu.limit(3);
+    menu.show('');
+    menu.focus();
+
+    </script>
+  </body>
+</html>
diff --git a/dev/js/demo/session.html b/dev/js/demo/session.html
new file mode 100644
index 0000000..59cfe4f
--- /dev/null
+++ b/dev/js/demo/session.html
@@ -0,0 +1,44 @@
+ <!DOCTYPE html>
+<html>
+  <head>
+    <title>Cookie demo</title>
+    <script src="../src/session.js"></script>
+    <script>
+
+var cookey;
+
+function add (val) {
+  var list = document.getElementById('number');
+  list.textContent += '-' + val;
+  cookey.set('n', list.textContent);
+};
+
+function removeCookie () {
+  cookey.clear();
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+  cookey = KorAP.Session.create('peter');
+  document.getElementById('number').textContent = cookey.get('n') || '';
+
+  var elements =   document.getElementsByClassName('num');
+  for (var i = 0; i < elements.length; i++) {
+    elements[i].addEventListener(
+      'click',
+      function (e) {
+        add(this.textContent);
+      }
+    );
+  };
+});
+
+    </script>
+  </head>
+  <body>
+    <div id="number"></div>
+    <span class="num">1</span>
+    <span class="num">2</span>
+    <span class="num">3</span>
+    <div onclick="removeCookie()">remove</div>
+  </body>
+</html>
diff --git a/dev/js/demo/vc.html b/dev/js/demo/vc.html
new file mode 100644
index 0000000..ae6aef1
--- /dev/null
+++ b/dev/js/demo/vc.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Virtual Collection demo</title>
+    <meta charset="utf-8" />
+    <script src="../src/menu.js"></script>
+    <script src="../src/vc.js"></script>
+    <link href="../../css/build/kalamar.css" rel="stylesheet" type="text/css"></link>
+    <style type="text/css" rel="stylesheet">
+
+body {
+  background-color: #7ba400;
+  color: white;
+  font-family: tahoma, verdana, arial;
+  font-size: 10pt;
+  margin: 20px;
+}
+
+.info {
+  background-color:white;
+  color: black;
+  padding: 1em;
+  font-family: mono;
+}
+    </style>
+  </head>
+  <body>
+    <div id="vc"></div>
+    <div id="menu" class="vc"></div>
+
+    <script>
+    var json = {
+      "@type":"koral:docGroup",
+      "operation":"operation:or",
+      "operands":[
+        {
+          "@type":"koral:docGroup",
+          "operation":"operation:and",
+          "operands":[
+            {
+              "@type":"koral:doc",
+              "key":"Titel",
+              "value":"Der Birnbaum",
+              "match":"match:eq"
+            },
+            {
+              "@type":"koral:doc",
+              "key":"Veröffentlichungsort",
+              "value":"Mannheim",
+              "match":"match:eq"
+            },
+            {
+              "@type":"koral:docGroup",
+              "operation":"operation:or",
+              "operands":[
+                {
+                  "@type":"koral:doc",
+                  "key":"Untertitel",
+                  "value":"Aufzucht und Pflege",
+                  "match":"match:eq"
+                },
+                {
+                  "@type":"koral:doc",
+                  "key":"Untertitel",
+                  "value":"Gedichte",
+                  "match":"match:eq",
+                  "rewrites" : [
+                    {
+                      "@type": "koral:rewrite",
+                      "src" : "policy",
+                      "operation" : "operation:injection",
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "@type":"koral:doc",
+          "key":"Veröffentlichungsdatum",
+          "type":"type:date",
+          "value":"2015-03-05",
+          "match":"match:geq"
+        }
+      ]
+    };
+    KorAP.Locale.AND = 'und';
+    KorAP.Locale.OR  = 'oder';
+
+    var vc = KorAP.VirtualCollection.render(json);
+    document.getElementById('vc').appendChild(vc.element());
+
+    function showJSON() {
+      document.getElementById("json").innerHTML = JSON.stringify(vc.root().toJson());
+    };
+
+    function showQuery() {
+      document.getElementById("query").innerHTML = vc.root().toQuery();
+    };
+
+    </script>
+
+    <hr />
+
+    <p><a onclick="showJSON()" style="cursor:pointer">show JSON!</a></p>
+    <div id="json" class="info"></div>
+
+    <hr />
+
+    <p><a onclick="showQuery()" style="cursor:pointer">show Query!</a></p>
+    <div id="query" class="info"></div>
+
+  </body>
+</html>
diff --git a/public/js/lib/dagre/dagre.js b/dev/js/lib/dagre/dagre.js
similarity index 100%
rename from public/js/lib/dagre/dagre.js
rename to dev/js/lib/dagre/dagre.js
diff --git a/public/js/lib/dagre/dagre.min.js b/dev/js/lib/dagre/dagre.min.js
similarity index 100%
rename from public/js/lib/dagre/dagre.min.js
rename to dev/js/lib/dagre/dagre.min.js
diff --git a/public/js/lib/highlight/highlight.pack.js b/dev/js/lib/highlight/highlight.pack.js
similarity index 100%
rename from public/js/lib/highlight/highlight.pack.js
rename to dev/js/lib/highlight/highlight.pack.js
diff --git a/public/js/lib/jasmine-2.1.1/boot.js b/dev/js/lib/jasmine-2.1.1/boot.js
similarity index 100%
rename from public/js/lib/jasmine-2.1.1/boot.js
rename to dev/js/lib/jasmine-2.1.1/boot.js
diff --git a/public/js/lib/jasmine-2.1.1/console.js b/dev/js/lib/jasmine-2.1.1/console.js
similarity index 100%
rename from public/js/lib/jasmine-2.1.1/console.js
rename to dev/js/lib/jasmine-2.1.1/console.js
diff --git a/public/js/lib/jasmine-2.1.1/jasmine-html.js b/dev/js/lib/jasmine-2.1.1/jasmine-html.js
similarity index 100%
rename from public/js/lib/jasmine-2.1.1/jasmine-html.js
rename to dev/js/lib/jasmine-2.1.1/jasmine-html.js
diff --git a/public/js/lib/jasmine-2.1.1/jasmine.css b/dev/js/lib/jasmine-2.1.1/jasmine.css
similarity index 100%
rename from public/js/lib/jasmine-2.1.1/jasmine.css
rename to dev/js/lib/jasmine-2.1.1/jasmine.css
diff --git a/public/js/lib/jasmine-2.1.1/jasmine.js b/dev/js/lib/jasmine-2.1.1/jasmine.js
similarity index 100%
rename from public/js/lib/jasmine-2.1.1/jasmine.js
rename to dev/js/lib/jasmine-2.1.1/jasmine.js
diff --git a/public/js/lib/jasmine-2.1.1/jasmine_favicon.png b/dev/js/lib/jasmine-2.1.1/jasmine_favicon.png
similarity index 100%
rename from public/js/lib/jasmine-2.1.1/jasmine_favicon.png
rename to dev/js/lib/jasmine-2.1.1/jasmine_favicon.png
Binary files differ
diff --git a/public/js/runner/hint.html b/dev/js/runner/hint.html
similarity index 100%
rename from public/js/runner/hint.html
rename to dev/js/runner/hint.html
diff --git a/public/js/runner/match.html b/dev/js/runner/match.html
similarity index 100%
rename from public/js/runner/match.html
rename to dev/js/runner/match.html
diff --git a/public/js/runner/menu.html b/dev/js/runner/menu.html
similarity index 100%
rename from public/js/runner/menu.html
rename to dev/js/runner/menu.html
diff --git a/public/js/runner/vc.html b/dev/js/runner/vc.html
similarity index 100%
rename from public/js/runner/vc.html
rename to dev/js/runner/vc.html
diff --git a/public/js/spec/hintSpec.js b/dev/js/spec/hintSpec.js
similarity index 100%
rename from public/js/spec/hintSpec.js
rename to dev/js/spec/hintSpec.js
diff --git a/public/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
similarity index 100%
rename from public/js/spec/matchSpec.js
rename to dev/js/spec/matchSpec.js
diff --git a/public/js/spec/menuSpec.js b/dev/js/spec/menuSpec.js
similarity index 100%
rename from public/js/spec/menuSpec.js
rename to dev/js/spec/menuSpec.js
diff --git a/public/js/spec/vcSpec.js b/dev/js/spec/vcSpec.js
similarity index 100%
rename from public/js/spec/vcSpec.js
rename to dev/js/spec/vcSpec.js
diff --git a/public/js/src/api.js b/dev/js/src/api.js
similarity index 100%
rename from public/js/src/api.js
rename to dev/js/src/api.js
diff --git a/public/js/src/hint.js b/dev/js/src/hint.js
similarity index 100%
rename from public/js/src/hint.js
rename to dev/js/src/hint.js
diff --git a/public/js/src/match.js b/dev/js/src/match.js
similarity index 100%
rename from public/js/src/match.js
rename to dev/js/src/match.js
diff --git a/public/js/src/menu.js b/dev/js/src/menu.js
similarity index 100%
rename from public/js/src/menu.js
rename to dev/js/src/menu.js
diff --git a/public/js/src/session.js b/dev/js/src/session.js
similarity index 100%
rename from public/js/src/session.js
rename to dev/js/src/session.js
diff --git a/public/js/src/tutorial.js b/dev/js/src/tutorial.js
similarity index 100%
rename from public/js/src/tutorial.js
rename to dev/js/src/tutorial.js
diff --git a/public/js/src/util.js b/dev/js/src/util.js
similarity index 100%
rename from public/js/src/util.js
rename to dev/js/src/util.js
diff --git a/public/js/src/vc.js b/dev/js/src/vc.js
similarity index 100%
rename from public/js/src/vc.js
rename to dev/js/src/vc.js
diff --git a/dev/scss/alertify.scss b/dev/scss/alertify.scss
new file mode 100644
index 0000000..ee83a5d
--- /dev/null
+++ b/dev/scss/alertify.scss
@@ -0,0 +1,11 @@
+@import "util";
+
+/*
+article.alertify-log {
+  text-shadow:none;
+}
+*/
+
+article.alertify-log-warn {
+  background-color: $dark-orange;
+}
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
new file mode 100644
index 0000000..da95c81
--- /dev/null
+++ b/dev/scss/base.scss
@@ -0,0 +1,101 @@
+@charset "utf-8";
+@import "util";
+
+body, html, select, g > text {
+  color: $dark-grey;
+  font-family: verdana, tahoma, arial;
+  margin: 0;
+}
+
+g > text {
+  fill: $dark-grey;
+}
+
+* {
+  @include box-sizing-box;
+}
+
+body {
+  font-size: 12pt;
+}
+
+.intro p {
+  text-shadow: $light-shadow
+}
+
+a {
+  &[href^="http://"]:after {
+    font-family: "FontAwesome";
+    content: " \f08e";
+    font-size: 75%;
+  }
+  &:link {
+    color: $dark-orange;
+    text-decoration: none;
+  }
+  &:link:hover:hover {
+    color: $light-green; // $darkest-orange;
+    @include color-transition;
+  }
+  &:active, &:visited {
+    color: $darkest-orange;
+  }
+}
+
+main {
+  margin: {
+    left: $standard-margin; 
+    right: $standard-margin; // Todo: -16px
+  }
+  &.embedded {
+    margin: {
+      left: 14px;
+      right: 14px;
+    }
+  }
+  p {
+    text-align: justify;
+    hyphens: auto;
+  }
+/*
+  > section > p, > p {
+    a {
+      border-radius: 6px;
+      padding: 0 .3em;
+      background-color: $choose-bg;
+      text-shadow: light-shadow;
+      color: $light-green;
+      &:hover {
+        color: $dark-green;
+	text-shadow: none;
+	background-color: $light-green;
+      }
+    }
+  }
+*/
+}
+/*
+blockquote {
+  border-radius: 12px;
+  margin: 0;
+  text-indent: 0;
+  padding: 1em;
+  border-left: {
+    color: $dark-grey;
+    style: solid;
+    width: 1em;
+  }
+  background-color: $light-grey;
+  &.warning {
+    border-left-color: $dark-orange;
+  }
+  &.exception {
+    border-left-color: red;
+  }
+}
+*/
+
+div.intro {
+  width: 70%;
+  min-width: 600px;
+}
\ No newline at end of file
diff --git a/dev/scss/fonts.scss b/dev/scss/fonts.scss
new file mode 100644
index 0000000..be46ba2
--- /dev/null
+++ b/dev/scss/fonts.scss
@@ -0,0 +1,10 @@
+@charset "utf-8";
+@import "util";
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('#{$font-path}/fontawesome-webfont.eot?v=4.3.0');
+  src: url('#{$font-path}/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('#{$font-path}/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('#{$font-path}/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('#{$font-path}/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('#{$font-path}/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file
diff --git a/dev/scss/header.scss b/dev/scss/header.scss
new file mode 100644
index 0000000..f3f995a
--- /dev/null
+++ b/dev/scss/header.scss
@@ -0,0 +1,89 @@
+@charset "utf-8";
+@import "util";
+
+header {
+  position: relative;
+  background-color: $light-green;
+//  background-color: $ids-grey-1;
+  @include box-sizing-box();
+  padding: 8px;
+  padding-bottom: 0;
+  font-size: 10pt;
+  color: $nearly-white;
+  // text-shadow: none;
+  button {
+    color: $light-green;
+    background-color: transparent;
+    border-width: 0;
+    font-weight: normal;
+    margin: 0;
+    padding: 0;
+    outline: none;
+  }
+  span.select, #vc-choose { /* Formally vc.location */
+    cursor: pointer;
+    line-height: 1.8em;
+    border: {
+      width: 0;
+      bottom-width: 3px;
+      style: solid;
+      color: transparent;
+    }
+    display: inline-block;
+    &:hover {
+      color: $dark-green;
+      border-color: $dark-green;
+    }
+    &::after {
+      pointer-events: none;
+      font-family: FontAwesome;
+      text-align: center;
+      background-color: $light-green;
+    }
+  }
+  span.select::after {
+    content: "\f0dd";
+  }
+
+  form {
+    padding-left: $logo-left-distance;
+    min-height: 2.7em;
+    display: block;
+    margin: 0px;
+    position: relative;
+  }
+}
+
+
+/**
+ * Temporary hack for language chooser
+ * http://cssdeck.com/labs/styling-select-box-with-css3
+ */
+#ql-field {
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+  border: none;
+  display: inline-block;
+  position: relative;
+  color: white;
+  background-color: $light-green;
+  border-width: 0;
+  border-radius: 0;
+  @include no-appearance;
+  &:checked {
+    outline: none;
+  }
+  > option {
+    padding: 0pt 2pt;
+    outline: none;
+  }
+}
+
+/**
+ * funny hack for firefox
+ */
+#ql-field:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 white;
+}
diff --git a/dev/scss/hint.scss b/dev/scss/hint.scss
new file mode 100644
index 0000000..470cd17
--- /dev/null
+++ b/dev/scss/hint.scss
@@ -0,0 +1,69 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+
+ul.menu.hint {
+  text-align:left;
+//  margin-left: -1 * $border-size;
+  max-width: 23em !important;
+  min-width: 7em;
+
+  > li:first-of-type {
+    border-top: {
+      width: 1px;
+      left-radius: 0;
+      right-radius: 0;
+    }
+  }
+  span.desc {
+    display: block;
+    font-size: 75%;
+  }
+}
+
+#searchMirror {
+  position: absolute;
+  left: 0;
+  top: 0;
+  white-space: pre-wrap;
+  overflow: show;
+  height: 0;
+  > span {
+    display: block;
+    opacity: 0;
+    white-space: pre-wrap;
+    overflow: hidden;
+  }
+  // Todo: Besser nur, wenn im Focus
+  > div {
+    cursor: pointer;
+    transition: left 0.3s ease 0s;
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-align: center;
+    padding: 0;
+    border-top: 5px solid $dark-orange;
+
+    height: 10px;
+    width: 1.2em;
+
+    &:hover {
+/*
+      border: {
+	width: $border-size;
+	style: solid;
+	radius: $standard-border-radius;
+	top: {
+	  left-radius: 0;
+	  right-radius: 0;
+	  width: 0px;
+	}
+      }
+      @include choose-hover;
+*/
+      border-top: 10px solid $dark-orange;
+    }
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
new file mode 100644
index 0000000..582fe9b
--- /dev/null
+++ b/dev/scss/kalamar.scss
@@ -0,0 +1,21 @@
+@charset "utf-8";
+
+// Global variables and mixins
+@import "fonts";      // Font families
+
+@import "base";       // Base styles
+@import "logos";      // Logo images
+@import "header";     // Top
+@import "searchbar";  // The search bar
+@import "menu";       // Menu list
+@import "hint";       // Hint specific menu list
+@import "pagination"; // Pagination
+@import "resultinfo"; // Information on results
+@import "matchinfo";  // Match table and tree
+@import "kwic";       // Kwic view information
+@import "vc";         // Virtual collection builder
+@import "tutorial";   // Embedded and non-embedded tutorial
+@import "query";      // View query
+@import "sidebar";    // Navigation on the left side
+
+@import "media";      // Media queries
diff --git a/dev/scss/kwic.scss b/dev/scss/kwic.scss
new file mode 100644
index 0000000..c55c00a
--- /dev/null
+++ b/dev/scss/kwic.scss
@@ -0,0 +1,278 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+
+#search {
+  position: relative;
+  margin-bottom: 44px;
+  overflow: visible;
+
+  &.match {
+    margin-top: 14pt;
+  }
+
+  ol {
+    width: auto;
+    overflow-x: hidden;
+    overflow-y: visible;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    text-indent: 0;
+    border: 1px solid $kwic-border;
+    font-size: 10pt;
+    > li {
+      border: {
+	style: solid;
+	color: $dark-orange;
+	width: 0;
+      }
+      &:not(.active):not(:target) {
+	width: 99999%;
+	margin-left: -49999.5%;
+	background-color: $kwic-line-noneven;
+	overflow-x: hidden;
+	overflow-y: visible;
+	white-space: no-wrap;
+	cursor: pointer;
+	padding: 5pt 0 6pt 0;
+	&:nth-of-type(even) {
+          background-color: $kwic-line-even;
+	}
+	.matchinfo {
+	  display: none;
+	}
+	> div > div.snippet {
+	  text-overflow: ellipsis;
+	  text-indent: 0;
+	  text-shadow: $light-shadow;
+	}
+      }
+      > div {
+	> div.snippet {
+          > span,
+          > mark {
+            white-space: no-wrap !important;
+            > span {
+              white-space: no-wrap !important;
+            }
+            color: #666;
+          }
+          > mark,
+	  > span.match {
+            font-weight: bold;
+            /* text-shadow: $kwic-match-shadow; */
+            color: $kwic-match-color;
+            padding-left: 4pt;
+            padding-right: 2pt;
+          }
+	}
+      }
+    }
+
+    /* active view */
+    > li.active,
+    > li:target {
+      text-align: left;
+      width: auto;
+      cursor: normal;
+      white-space: wrap;
+      height: auto;
+      border-width: 2px;
+      background-color: $light-orange;
+      position: relative;
+      > div {
+	min-height: 42pt;
+	> div.snippet {
+	  margin: 5pt 10pt;
+	  margin-right: 3em;
+	  > span {
+            line-height: 1.4em;
+            width: auto;
+            &.context-left {
+              margin-left: 0;
+              display: inline;
+              overflow: visible;
+              text-align: left;
+              width: auto;
+            }
+	  }
+	}
+      }
+    }
+
+    /* Actions */
+    > li {
+      ul.action {
+	display: none;
+      }
+
+      /* active actions */
+      &.active, &:target {
+	ul.action {
+	  display: block;
+	}
+      }
+      &:not(.active):not(:target) p.ref {
+	display: none;
+      }
+      &.active p.ref,
+      &:target p.ref {
+	background-color: $dark-orange;
+	color: white;
+	padding: 3pt 10pt;
+	padding-right: $right-match-distance;
+	margin: 0pt;
+	width: 100%;
+	bottom: 0;
+	z-index: 30;
+      }
+    }
+  }
+}
+
+ul.action {
+  background-color: $dark-orange;
+  font-size: 12pt;
+  color: white;
+  text: {
+    shadow: none;
+    indent: 0;
+  }
+  margin: 0;
+  padding: 0;
+  z-index: 5;
+  
+  list-style: {
+    type: none;
+    position: inline;
+  }
+  &.right {
+    position: absolute;
+    width: $right-match-distance;
+    float: right;
+    text-align: center;
+    padding: 0pt 3pt;
+    height: 100%;
+    right: 0;
+    top: 0;
+    li {
+      cursor: pointer;
+      color: white;
+      text-decoration: none;
+
+      > span {
+	@include blind;
+      }
+      &.close::after {
+	font-family: "FontAwesome";
+	content: "\f00d";
+      }
+      &.info::after {
+	font-family: "FontAwesome";
+	content: "\f05a";
+      }
+    }
+  }
+}
+
+/*
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.left {
+  display: inline-block;
+  text-align: right;
+  width: 50.046%;
+}
+
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.separator {
+  width: 0px;
+  height: 1em;
+  margin-bottom: -2px;
+  display: inline-block;
+  line-height: 100%;
+  border: 1px solid #009EE0;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+ol.align-free > li > div > div.snippet > span.right {
+  text-align: left;
+}
+*/
+
+ol.align-left > li > div > div.snippet > span.context-left {
+  display: inline-block;
+  text-align: right;
+  width: 50.01%;
+}
+
+ol.align-right {
+  text-align: right;
+  > li:not(.active):not(:target) > div > div.snippet > span.context-right {
+    display: inline-block;
+    text-align: left;
+    width: 49.915%;
+  }
+}
+
+/**
+ * Highlights
+ */
+mark {
+  background-color: inherit;
+  color: inherit;
+}
+
+mark > mark,
+em,
+.level-0 {
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  padding-bottom: 0px;
+  font-style: normal;
+}
+
+mark > mark > mark,
+em > em,
+.level-1 {
+  padding-bottom: 3px;
+}
+
+mark > mark > mark > mark,
+em > em > em,
+.level-2 {
+  padding-bottom: 6px;
+}
+
+li {
+  &:not(.active) mark > mark > mark > mark,
+  &:not(.active) em > em > em {
+    line-height: 180%;
+  }
+  &.active mark > mark > mark > mark,
+  &.active em > em > em {
+    line-height: 250%;
+  }
+}
+
+.class-1 { border-color: $kwic-highlight-1; }
+.class-2 { border-color: $kwic-highlight-2; }
+.class-3 { border-color: $kwic-highlight-3; }
+.class-4 { border-color: $kwic-highlight-4; }
+
+/*
+span.more:before {
+  content: "…";
+  padding-left: 2pt;
+  padding-right: 2pt;
+}
+*/
+
+div.snippet.startMore:before,
+div.snippet.endMore:after {
+  content: "…";
+  padding-left: 2pt;
+  padding-right: 2pt;
+}
+
+
diff --git a/dev/scss/logos.scss b/dev/scss/logos.scss
new file mode 100644
index 0000000..e9058ae
--- /dev/null
+++ b/dev/scss/logos.scss
@@ -0,0 +1,107 @@
+@charset "utf-8";
+@import "util";
+
+.logo {
+  &::after {
+    content: "" !important;
+  }
+  > * {
+    background: {
+      repeat: no-repeat;
+      size: 90%;
+      position: 50% 50%;
+    }
+    > span {
+      margin-left: -3000px;
+    }
+  }
+}
+
+/**
+ * Background image for the front page
+ */
+#kalamar-bg {
+  position: fixed;
+  height: 110%;
+  width: 175%;
+  top: 0;
+  z-index: -5000;
+  opacity: .1;
+  background: {
+    image:url('#{$img-path}/korap-bg-kalamar.svg');
+    size: 50%;
+    repeat: no-repeat;
+    position: 50% 50%;
+  }
+}
+
+/**
+ * Logo table of the front page
+ */
+#logos {
+  position: relative;
+  text-align: right;
+  font-size: 85%;
+  right: 0;
+  width: 100%;
+  margin-left: $standard-margin;
+  padding-left: 60%;
+  > div {
+    border-top: 26px solid $dark-orange;
+    padding-right: 2em;
+  }
+  p {
+    text-align: left;
+    display: inline-block;
+  }
+}
+
+
+/**
+ * Logo: Institute for German Language
+ */
+#ids-logo {
+  display: block;
+  width: (910 / 60) + em;
+  height: (176 / 60) + em;
+  background: {
+    image:url('#{$img-path}/ids-institute-for-the-german-language.svg');
+  }
+}
+
+/**
+ * Logo: Member of the Leibniz Association
+ */
+#leibniz-logo {
+  display: block;
+  width: (199 / 20) + em;
+  height: (130 / 20) + em;
+  background: {
+    image:url('#{$img-path}/member-of-the-leibniz-association.svg');
+  }
+}
+
+/**
+ * Logo: KorAP
+ */
+h1 {
+  position: absolute;
+  margin: 0;
+  margin-left:15px;
+  left: 0;
+  top: 0;
+  width: 7.8em;
+  height: 2.4em;
+  z-index: 7200;
+  background: {
+    size: 72%;
+    image: url('#{$img-path}/korap-logo-kalamar.svg');
+  }
+}
+
+/*
+#leibniz-logo, #ids-logo {
+  height: (130 / 20) + em;
+}
+
+*/
\ No newline at end of file
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;
+}
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
new file mode 100644
index 0000000..cef3fed
--- /dev/null
+++ b/dev/scss/media.scss
@@ -0,0 +1,118 @@
+@charset "utf-8";
+@import "util";
+
+$standard-margin: 4px;
+
+@media (orientation: portrait), (max-width: 42.5em) {
+  body, #search ol, header, header input {
+    font-size: 9pt;
+  }
+  header form {
+    padding-left: 0px;
+    padding-top: 33px;
+  }
+  .vc {
+    font-size: 9pt;
+  }
+  h1 {
+    margin-left: 10px;
+    width: 130px;
+    height: 40px;
+    background-size: 100%;
+    background-position: 50% 0;
+    z-index: 300;
+  }
+
+  #searchbar {
+    padding-right: 30px;
+    input {
+      font-size: 9pt;
+    }
+    button[type=submit] {
+      right: 0;
+    }
+  }
+
+  .level-1 {
+    padding-bottom: 2px;
+  }
+
+  .level-2 {
+    padding-bottom: 4px;
+  }
+
+  main {
+    margin-left: $standard-margin;
+    margin-right: $standard-margin;
+  }
+
+  #search ol {
+    > li:target, > li.active {
+      > div > div.snippet {
+	margin: 2px 2em 2px 4px;
+      }
+    }
+    > li:not(:target):not(.active) {
+      padding: 3pt 0 3pt 0;
+    }
+  }
+
+  div.matchinfo {
+    font-size: 9pt;
+  }
+
+  div.matchtable tr > * {
+    padding: 1pt 3pt;
+  }
+
+  div.matchtree {
+    h6 {
+      display: block;
+      float: none;
+    }
+    > div {
+      margin-left: 2px;
+    }
+  }
+
+  div.resultinfo p.found,
+  #pagination > a {
+    font-size: 9pt;
+  }
+
+  #logos {
+    margin-left: 0;
+    margin-right: 0;
+
+    > div {
+      border-top-width: 14px;
+    }
+  }
+
+/*
+
+  #sidebar {
+    padding-top: 22px;
+  }
+  #tutorial {
+    border-radius: 0;
+    border-width: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    padding: 0;
+  }
+  #tutorial iframe {
+    border-radius: 0;
+  }
+  #sidebar:not(.active) > i.fa-bars {
+    font-size: 12pt;
+    width: 10pt;
+    height: 11pt;
+  }
+  pre.query {
+    font-size: 9.5pt;
+  }
+*/
+}
\ No newline at end of file
diff --git a/dev/scss/menu.scss b/dev/scss/menu.scss
new file mode 100644
index 0000000..5e2d084
--- /dev/null
+++ b/dev/scss/menu.scss
@@ -0,0 +1,140 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+
+/**
+ * Menu list - used nearly everywhere
+ */
+ul.menu,
+ul.menu > span.pref:not(:empty) {
+  box-sizing: border-box;
+  text-shadow: none;
+  font-weight: normal;
+  // Pagination border?
+
+  z-index: 7000;
+}
+
+ul.menu > li,
+ul.menu > span.pref:not(:empty) {
+  box-shadow: $choose-box-shadow;
+  border: {
+    width: $border-size;
+    bottom-width: 0px;
+    top-width: 0px;
+    style: solid;
+  }
+  @include choose-item;
+  cursor: pointer;
+  padding: $item-padding;
+  white-space: normal;
+}
+
+ul.menu > li,
+ul.menu > span.pref:not(.active) {
+  @include choose-item;
+}
+
+ul.menu {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  text-indent: 0;
+  list-style-type: none;
+  list-style-position: outside;
+
+  /**
+   * List items
+   */
+  > li {
+    padding-right: 1.6em;
+
+    &:first-of-type {
+      border-top: {
+	width: $border-size;
+	left-radius: $standard-border-radius;
+	right-radius: $standard-border-radius;
+      }
+    }
+    &:last-of-type {
+      border-bottom: {
+	width: $border-size;
+	left-radius: $standard-border-radius;
+	right-radius: $standard-border-radius;
+      }
+    }
+    mark {
+      text-decoration: underline;
+      background-color: transparent;
+      color: inherit;
+      font-weight: bold;
+    }
+  }
+  > li.active,
+  > span.pref.active {
+    @include choose-active;
+  }
+  > li:hover,
+  > span.pref:hover {
+    @include choose-hover;
+  }
+
+  /**
+   * Default prefix view
+   */
+  > span.pref:not(:empty) {
+    position: absolute;
+    min-width: 5px;
+    font-size: 80%;
+    left: 0;
+    bottom: 0;
+    display: block;
+    margin-bottom: -2.1em;
+    padding: 2px 6px;
+    border: {
+      radius: $standard-border-radius;
+      width: $border-size;
+    }
+  }
+}
+
+/**
+ * Rolling menu
+ */
+ul.menu.roll {
+  > li:first-of-type {
+    &:not(.no-more):before {
+      position: absolute;
+      font-family: "FontAwesome";
+      content: '\f0de';
+      right: .5em;
+      top: .4em;
+    }
+  }
+  > li:last-of-type {
+    &:not(.no-more):before {
+      position: absolute;
+      font-family: "FontAwesome";
+      content: '\f0dd';
+      right: .5em;
+      bottom: .4em;
+    }
+  }
+}
+
+
+/**
+ * Sorting menu
+ */
+ul.menu.sort {
+  position: relative;
+  display: inline-block;
+  > li::before {
+    content: '';
+  }
+  > li.active:hover {
+    @include choose-remove;
+  }
+
+}
\ No newline at end of file
diff --git a/dev/scss/pagination.scss b/dev/scss/pagination.scss
new file mode 100644
index 0000000..0e099ac
--- /dev/null
+++ b/dev/scss/pagination.scss
@@ -0,0 +1,114 @@
+@charset "utf-8";
+@import "util";
+
+$border-size : 2px;
+
+/**
+ * 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="#p=2"><span>2</span></a>
+  <a href="#3"><span>3</span></a>
+  <span><i class="fa fa-ellipsis-h"></i></span>
+  <a href="#67"><span>67</span></a>
+  <a rel="next" href="#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.
+   */
+  font-size: 0;
+  position: fixed;
+  right: 20px;
+  bottom: 10px;
+  z-index: 400;
+  padding: 0;
+  height: auto;
+  line-height: 0;
+
+  > a {
+    margin: 0;
+    font-size: 10pt;
+    padding: 0;
+
+    > span {
+      box-shadow: $choose-box-shadow;
+      @include standard-text-padding;
+      @include choose-item;
+      display: inline-block;
+      line-height: 2em;
+      text-align: center;
+      border: {
+	top-width: $border-size;
+	bottom-width:  $border-size;
+	top-style: solid;
+	bottom-style: solid;
+      }
+    }
+
+    &:not(:link):not([rel=self]) span {
+      color: $choose-blind-color;
+    }
+
+    &.ellipsis > span {
+      > span {
+	@include blind;
+      }
+      &::after {
+	font-family: 'FontAwesome';
+	content: '\f141';
+      }
+    }
+
+    &[rel=self] > span {
+      @include choose-active;
+      border {
+	left-width: $border-size;
+	right-width: $border-size;
+	left-style: solid;
+	right-style: solid;
+      }
+    }
+
+    &[rel=prev] > span {
+      border: {
+	top-left-radius: $standard-border-radius;
+	bottom-left-radius: $standard-border-radius;
+	left-width: $border-size;
+	left-style: solid;
+      }
+      > span {
+	@include blind;
+      }
+      &::after {
+	font-family: 'FontAwesome';
+	content: '\f0d9';
+      }
+    }
+
+    &[rel=next] > span {
+      border: {
+	top-right-radius: $standard-border-radius;
+	bottom-right-radius: $standard-border-radius;
+	right-width: $border-size;
+	right-style: solid;
+      }
+      > span {
+	@include blind;
+      }
+      &::after {
+	font-family: 'FontAwesome';
+	content: '\f0da';
+      }
+    }
+    &:link:hover span {
+      @include choose-hover;
+    }
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/query.scss b/dev/scss/query.scss
new file mode 100644
index 0000000..4167059
--- /dev/null
+++ b/dev/scss/query.scss
@@ -0,0 +1,24 @@
+@import "util";
+@charset "utf-8";
+
+
+pre.query {
+  overflow-x: hidden; 
+  cursor: pointer;
+  padding: .5em;
+  @include choose-item;
+  position:relative;
+  border: {
+    width: 2px;
+    style: solid;
+    radius: $standard-border-radius;
+  }
+  box-shadow: $choose-box-shadow;
+  
+  &:hover {
+    @include choose-hover;
+  }
+  &:active {
+    @include choose-active;
+  }
+}
diff --git a/dev/scss/resultinfo.scss b/dev/scss/resultinfo.scss
new file mode 100644
index 0000000..1f1097f
--- /dev/null
+++ b/dev/scss/resultinfo.scss
@@ -0,0 +1,19 @@
+@charset "utf-8";
+@import "util";
+
+div.resultinfo {
+  clear: both;
+
+  p.found {
+    font-size: 10pt;
+    padding: 0;
+    margin: 0;
+    text-align: right;
+  }
+}
+
+#total-results {
+  color: $total-results;
+  font-weight: bold;
+}
+
diff --git a/dev/scss/searchbar.scss b/dev/scss/searchbar.scss
new file mode 100644
index 0000000..098eacd
--- /dev/null
+++ b/dev/scss/searchbar.scss
@@ -0,0 +1,139 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+$right-distance: 30px;
+
+/**
+ * Input field
+ */
+#q-field {
+  width: 100%;
+  margin: 0;
+  margin-bottom: 3px;
+  display: block;
+}
+
+header input {
+  outline: none;
+  font-size: 11pt;
+  border: $border-size solid $nearly-white;
+  padding: 2px;
+}
+
+#searchbar {
+  position: relative;
+  width: 100%;
+  padding-right: 60px;
+  button[type=submit] {
+    position: absolute;
+    font-weight: normal;
+    @include choose-item;
+    padding: 0;
+    height: 100%;
+    top: 0;
+    right: $right-distance;
+    width: 30px;
+    cursor:pointer;
+    > span:nth-of-type(1) {
+      @include blind;
+    }
+    &::after {
+      font-family: "FontAwesome";
+      content: "\f002";
+    }
+    border: {
+      width: $border-size;
+      style: solid;
+      color: $nearly-white;
+    }
+    &:hover {
+      @include choose-hover;
+    }
+    &:active {
+      @include choose-active;
+    }
+
+    /**
+     * This is just for styling the last button,
+     * in case there are more than one buttons.
+     */
+    &:last-of-type {
+      @include box-sizing-box();
+      border: {
+	right-width: $border-size;
+	right-style: solid;
+	top-right-radius: $standard-border-radius;
+	bottom-right-radius: $standard-border-radius;
+      }
+    }
+  }
+  button + button {
+    right: 0;
+  }
+}
+
+/**
+ * Checkbox styling
+ * http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
+*/
+.checkbox {
+  display: none;
+  + label {
+    cursor: pointer;
+    span { 
+      border-radius: 4px;
+      display: inline-block;
+      width: 1em; // 12px
+      height: 1em;
+      line-height: 1em; // 12px;
+      vertical-align: middle;
+      padding: 0;
+      margin-right: .2em;
+/*
+    background-color: $nearly-white;
+    &:hover {
+      border-color: $nearly-white;
+    }
+*/
+      &::after {
+	font-family: "FontAwesome"; 
+	content: '\f096';
+      }
+    }
+  }
+  &:checked + label span { 
+    &:after {
+      content:"\f046";
+    }
+  }
+}
+
+#button-right {
+  display: inline-block;
+  float: right;
+  color: $nearly-white;
+  line-height: 2em;
+  margin-right: $right-distance;
+  > a {
+    color: $nearly-white;
+    cursor:pointer;
+    position: relative;
+    font-size: 120%;
+    > span {
+      @include blind;
+    }
+  }
+  > a::after {
+    font-family: 'FontAwesome';
+  }
+  > a.tutorial::after {
+    content: '\f19d';
+  }
+  > a.align.left::after {
+    content: '\f036';
+  }
+  > a.align.right::after {
+    content: '\f038';
+  }
+}
diff --git a/dev/scss/sidebar.scss b/dev/scss/sidebar.scss
new file mode 100644
index 0000000..5829600
--- /dev/null
+++ b/dev/scss/sidebar.scss
@@ -0,0 +1,183 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+
+#sidebar {
+  // box-shadow: 2px 2px 5px darken($dark-green, 15%);
+  // box-shadow: $choose-box-shadow;
+  outline: none;
+  display: block;
+  background-color: $dark-green;
+  position: fixed;
+  z-index: 7100;
+  color: $nearly-white;
+  width: $logo-left-distance;
+  top: 0;
+  left: 0;
+  height: 100%;
+  padding-top: 80px;
+  transition: all .3s ease-in-out;
+  > div {
+    overflow-y: auto;
+    overflow-x: visible;
+    max-height: 100%;
+  }
+  > * {
+    opacity: 1;
+  }
+  &::after {
+    display: block;
+    opacity: 0;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin-right: -30px;
+    background-color: $dark-green;
+    content: '#';
+    font-size: 16pt;
+    width: 16pt;  
+    height: 17pt;
+    padding: 6pt;
+    border-top-right-radius: $standard-border-radius;
+  }
+  h2 {
+    font: {
+      size: 100%;
+      weight: bold;
+    }
+    line-height: 2em;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+  }
+
+  ul {
+    list-style-type: none;
+/*
+    background-color: $light-green;
+*/
+    margin: 0;
+    font-size: 10pt;
+    text-indent: 0;
+    padding: 0;
+    li {
+      padding: 0;
+      > a {
+	@include choose-item;
+	padding: $item-padding;
+
+	border-right: {
+	  width: $border-size;
+	  style: solid;
+	}
+
+	display: block;
+	&:link, &:visited {
+	  color: inherited;
+	}
+	&:hover {
+	  color: inherit;
+	  transition: none;
+	  @include choose-hover;
+	}
+	&.active, &:active {
+	  @include choose-active;
+	}
+      }
+      h3 {
+        font: {
+	  weight: bold;
+	  size: 100%;
+	}	  
+	padding: 0;
+	margin: 0;
+      }
+/*
+      &.active {
+	text-shadow: none;
+	h3 {
+	  margin-bottom: 2pt;
+	  padding-bottom: 2pt;
+	  border-bottom: 1px solid black;
+	}
+      }
+*/
+      > a {
+	padding-left: 6pt;
+      }
+      li > a {
+	padding-left: 18pt;
+      }
+      li li > a {
+	padding-left: 36pt;
+      }
+    }
+  }
+  nav > ul > li > a {
+    font-weight: bold;
+  }
+}
+
+
+#sidebar:not(:focus):not(.active) {
+  margin-left: -1 * ($logo-left-distance - 15px);
+//  box-shadow: none;
+/*
+  overflow-y: hidden;
+  overflow-x: visible;
+*/
+  &::after {
+    opacity: 1;
+  }
+  > * {
+    opacity: 0;
+    // TODO
+    transition: {
+      property: opacity;
+      duration: .3s;
+    }
+  }
+}
+
+/*
+#sidebar {
+  text-shadow: none;
+  height: 105%;
+  margin-top: -10px;
+  background-color: #496000;
+  left: 0;
+  top: 0;
+  &.active {
+    box-shadow: 2px 2px 5px darken($dark-green, 15%);
+    margin-left: 0px;
+    left: 0;
+    top: 0;
+  }
+  &:not(.active) > i.fa-bars {
+    opacity: 1;
+    cursor: pointer;
+    background-color: #496000;
+    position: fixed;
+    font-size: 16pt;
+    width: 16pt;  
+    height: 17pt;
+    padding: 6pt;
+    bottom: 0;
+    left: 0;
+    border-top-right-radius: 5pt;
+  }
+  dl.info {
+    font-size: 9pt;
+    padding: 0 10pt;
+    > dt {
+      font-weight: bold;
+      float: left;
+    }
+    > dd {
+      text-align: right;
+    }
+  }
+}
+*/
\ No newline at end of file
diff --git a/dev/scss/tutorial.scss b/dev/scss/tutorial.scss
new file mode 100644
index 0000000..0b03cd0
--- /dev/null
+++ b/dev/scss/tutorial.scss
@@ -0,0 +1,132 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+
+#tutorial {
+  position: fixed;
+  z-index: 9999;
+  top:    5%;
+  bottom: 5%;
+  left:   2%;
+  right:  2%;
+  padding-right: $right-match-distance;
+/*
+  padding: 0;
+  margin: 0;
+*/
+  background-color: $nearly-white;
+  ul.action {
+    background-color: $middle-grey;
+    display: block;
+  }
+  border: {
+    width: 2 * $border-size;
+//    color: $dark-orange;
+    color: $dark-grey;
+    style: solid;
+    radius: $standard-border-radius;
+  }
+  box-shadow: $choose-box-shadow;
+  iframe {
+    border-width: 0;
+    width: 100%;
+    // Hack for a Firefox bug
+    min-height: 100.1%;
+    background: {
+      image:url('#{$img-path}/korap-bg-kalamar.svg');
+      repeat: no-repeat;
+      position: center center;
+      size: 20%;
+    }
+  }
+}
+
+body.embedded {
+  background-color: $nearly-white;
+  #sidebar {
+/*
+    border-right: {
+      width: $border-size;
+      style: solid;
+    }
+*/
+    padding-top: 0;
+    // @include choose-item;
+    background-color: $middle-grey;
+    > div {
+      position: relative;
+      top: 50%;
+      -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      // margin-right: -1 * $border-size;
+    }
+  }
+}
+
+main.tutorial {
+  margin-left: $logo-left-distance + 15px;
+}
+
+/*
+#tutorial {
+  iframe {
+    width: 100%;
+    min-height: 100%;
+    border: {
+      width: 0;
+      radius: 10px;
+    }
+    background: {
+      image:url('#{$basepath}/img/korap-bg-kalamar.svg');
+      size: 10%;
+      repeat: no-repeat;
+      position: center center;
+      color: white;
+    }
+  }
+
+  display: block;
+  background-color: $dark-green;
+  border-radius: 15px;
+  &:not(.active) {
+    display: none;
+  }
+  &.active {
+    display: block;
+  }
+  > i,
+  > a > i {
+    font-size: 20pt;
+    color: $dark-green;
+    position: absolute;
+    background-color: rgba(255,255,255,0.5);
+    z-index: 100;
+    top: 10pt;
+    right: 20pt;
+    cursor: pointer;
+  }
+  > a > i {
+    right: 40pt;
+  }
+}
+
+div.test {
+  display: block;
+  border-left: 10px solid $dark-green;
+  margin: 1em;
+  padding-left: 5px;
+  p {
+    color: black;
+    &.fail {
+      font-weight: bold;
+      color: red;
+    }
+    &.pass {
+      font-weight: bold;
+      color: green;
+    }
+  }
+}
+*/
\ No newline at end of file
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
new file mode 100644
index 0000000..a4971c4
--- /dev/null
+++ b/dev/scss/util.scss
@@ -0,0 +1,150 @@
+/**
+ * Official IDS colors
+ */
+$ids-orange-1: rgb(246, 168,   0);
+$ids-orange-2: rgb(242, 148,   0);
+$ids-grey-1:   rgb(135, 136, 138);
+$ids-grey-2:   rgb(217, 218, 219);
+$ids-blue-1:   rgb(  0, 158, 224); // Pragmatik
+$ids-blue-2:   rgb(188, 228, 247); // Pragmatik
+$ids-green-1:  rgb( 99, 111,   7); // Grammatik
+$ids-green-2:  rgb(227, 232, 163); // Grammatik
+$ids-pink-1:   rgb(193,   0,  43); // Lexik
+$ids-pink-2:   rgb(250, 243, 222); // Lexik
+
+/**
+ * Orange Colors
+ */
+$light-orange:   #f4eebb; // #ffe56a;
+$middle-orange:  #ffd080;
+$dark-orange:    $ids-orange-1; // #ffa500;
+$darker-orange:  #ff8000;
+$darkest-orange: darken($dark-orange, 20%);
+// $light-orange-2: #f4eebb;, #ffd080;
+// Yellow: #fff48d
+
+/**
+ * Green Colors
+ */
+$dark-green:    $ids-green-1; // #496000;
+$middle-green:  lighten($ids-green-1, 5%); // $ids-green-1; // #688704;
+$light-green:   lighten($ids-green-1, 13%); // #7ba400;
+
+/**
+ * Blue Colors
+ */
+$light-blue:     $ids-blue-2; // #cfe6f4;
+$dark-blue:      $ids-blue-1; // #73b2f4;
+$darkest-blue:   darken($dark-blue, 40%);
+
+
+/*
+ * Grey
+ */
+$middle-grey:  $ids-grey-1; // #999;
+$light-grey:   $ids-grey-2; // #ddd;
+// $dark-grey:    darken($light-grey, 55%); // #555;
+$dark-grey:    darken($middle-grey, 15%); // #555;
+// $nearly-white: #f5f5f5;
+$nearly-white: #fff;
+
+$middle-red: #c1002b;
+$light-red: lighten($middle-red, 40%);
+$dark-red: darken($middle-red, 40%);
+
+$dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
+$light-shadow: 1px 1px rgba(255,255,255,0.5);
+
+$total-results: $light-green;
+
+/**
+ * KWIC colors
+ */
+$kwic-border:       $middle-grey;
+$kwic-line-noneven: $light-grey;
+$kwic-line-even:    $nearly-white;
+$kwic-match-color:  $dark-grey;
+$kwic-match-shadow: $light-shadow;
+
+$kwic-highlight-1:  $middle-red;
+$kwic-highlight-2:  $dark-blue;   // #009ee0;
+$kwic-highlight-3:  $dark-orange; // #f29400;
+$kwic-highlight-4:  $light-green;
+
+$choose-bg:     $light-grey;
+$choose-border-color: $middle-grey;
+$choose-border: 2px solid $choose-border-color;
+$choose-color:  $dark-grey;
+$choose-blind-color:  $middle-grey;
+$choose-box-shadow: 2px 2px 2px  rgba(0,0,0,0.2);
+$standard-border-radius: 6px;
+$item-padding: 3pt 6pt;
+
+/**
+ * Path information
+ */
+$img-path: '../../img/build';
+$font-path: '../../font';
+
+/**
+ * Margins
+ */
+$standard-margin: 30px;
+$right-match-distance: 20px;
+$logo-left-distance: 230px;
+
+@mixin blind {
+  position: absolute;
+  margin-left: -3000px;
+}
+
+@mixin choose-item {
+  color: $choose-color;
+  background-color: $choose-bg;
+  border-color: $choose-border-color;
+  text-shadow: $light-shadow;
+}
+
+@mixin choose-hover {
+  color: $nearly-white;
+  text-shadow: none;
+  background-color: $dark-orange;
+  border-color: $darker-orange;
+}
+
+@mixin choose-active {
+  color: $dark-green;
+  text-shadow: none;
+  background-color: $light-green;
+  border-color: $dark-green;
+}
+
+@mixin choose-remove {
+  color: $nearly-white;
+  text-shadow: none;
+  background-color: $middle-red;
+  border-color: $dark-red;
+}
+
+@mixin color-transition {
+  transition: color 0.3s ease 0s;
+}
+
+@mixin standard-text-padding {
+  padding-left: .4em;
+  padding-right: .4em;
+}
+
+@mixin box-sizing-box() {
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+  box-sizing: border-box;         /* Opera/IE 8+ */
+}
+
+
+// https://css-tricks.com/almanac/properties/a/appearance/
+@mixin no-appearance {
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+}
diff --git a/dev/scss/vc.scss b/dev/scss/vc.scss
new file mode 100644
index 0000000..1ed7959
--- /dev/null
+++ b/dev/scss/vc.scss
@@ -0,0 +1,250 @@
+@charset "utf-8";
+@import "util";
+
+$left-padding: 28pt; // 2.8em;
+$border-size: 2px;
+
+.vc {
+  background-color: $light-green;
+  margin-top: 10px;
+  .docGroup {
+    position: relative;
+    display: inline-block;
+    color: $nearly-white;
+
+    margin-left: $left-padding; // 2.8em
+
+    // .6em .5em
+    border-width: 0 (2 * $border-size);
+
+    padding: {
+      top: 10pt;
+      bottom: 2pt;
+      left: 0pt;
+      right: 6pt;
+    }
+
+    border: {
+      radius: $standard-border-radius * 2;
+      style: solid;
+    }
+
+    .docGroup {
+      display: block;
+    }
+
+    > .operators {
+      position: absolute;
+      display: block;
+      top: 10px;
+      vertical-align: middle;
+      left: 3px;
+      border-width: 2px 2px 2px 0;
+      border-top-right-radius: 7px;
+      border-bottom-right-radius: 7px;
+      margin-left: 100%;
+      padding: 0;
+    }
+
+    &:hover {
+      background-color: rgba(255,255,255,.05);
+    }
+
+    &[data-operation=or] {
+      border-color: $dark-orange;
+      > .doc::before,
+      > .docGroup::before {
+	content: "oder";
+      }
+      > .operators {
+	border-color: $dark-orange;
+	background-color: $dark-orange;
+	color: $nearly-white;
+      }
+    }
+
+    &[data-operation=and] {
+      > .doc::before,
+      > .docGroup::before {
+	content: "und";
+      }
+    }
+
+    &[data-operation] {
+      > .doc:first-child::before,
+      > .docGroup:first-child::before {
+	content: '';
+      }
+      > .doc::before,
+      > .docGroup::before {
+	display: inline-block;
+	text-align: right;
+//	width: 2.2em;
+	width: $left-padding;
+	color: $dark-green;
+      }
+      > .doc::before {
+	padding-right: 1.2em;
+	margin-right: .1em;
+      }
+      > .docGroup::before {
+	position: absolute;
+      }
+    }
+  }
+
+  .doc {
+    > span + span {
+      margin-left: 5pt;
+    }
+    > span.key,
+    > span.value {
+      font-weight: bold;
+    }
+    > .operators {
+      display: inline-block;
+      border-color: $dark-orange;
+      border-width: 2px 2px 2px 2px;
+      border-radius: 7px;
+
+      margin-left: 10px;
+      > span {
+	&.and {
+	  border: {
+	    radius: inherit;
+	    top-right-radius: 0;
+	    bottom-right-radius: 0;
+	  }
+	  &.delete {
+	    border: {
+	      top-left-radius: 0;
+	      bottom-left-radius: 0;
+	    }
+	  }
+	}
+      }
+    }
+    > span.key {
+      position: relative;
+      > ul {
+	margin: 0;
+	margin-left: 3.3em;
+      }
+    }
+  }
+
+  .rewritten {
+    .rewrite {
+      margin-left: 4pt;
+      display: inline-block;
+      color: $dark-orange;
+      &::after {
+	font-family: FontAwesome;
+	font-style: normal;
+	font-weight: normal;
+	content: "\f040"; // "\f14b";
+	text-decoration: underline;
+      }
+      span {
+	display: none;
+      }
+    }
+  }
+
+  .operators {
+    opacity: 0;
+    white-space: nowrap;
+    padding: 0;
+    font-size: 0;
+    line-height: 0;
+    color: $light-green;
+    border-color: $nearly-white;
+    text-align: center;
+    font-weight: bold;
+    border-style: solid;
+
+    > span {
+      cursor: pointer;
+      font-size: 9pt;
+      line-height: 1.3em;
+      padding: 0 4px;
+      display: inline-block;
+      &.and {
+	background-color: $nearly-white;
+	color: $light-green;
+      }
+      &.or {
+	background-color: $dark-orange;
+	color: $nearly-white;
+      }
+      &.delete {
+	background-color: red;
+	border-radius: inherit;
+	color: $nearly-white;
+      }
+    }
+  }
+
+  > .docGroup {
+    margin-left: 0;
+  }
+
+
+  .docGroup > .docGroup::before {
+    background-color: red;
+    margin-left: -1 * $left-padding; // -3.4em;
+  }
+
+  .doc, .docGroup {
+    &:hover > .operators {
+      opacity: 1;
+    }
+  }
+
+}
+
+
+/*
+.vc .docGroup[data-operation=and]::before,
+.vc .docGroup[data-operation=and] .operators {
+  background-color: white;
+}
+*/
+
+$dg-index : 30;
+
+.docGroup {
+  > .operators {
+    z-index: $dg-index;
+  }
+  .docGroup {
+    > .operators {
+      z-index: $dg-index + 1;
+    }
+    .docGroup {
+      > .operators {
+	z-index: $dg-index + 2;
+      }
+      .docGroup {
+	> .operators {
+	  z-index: $dg-index + 3;
+	}
+	.docGroup {
+	  > .operators {
+	    z-index: $dg-index + 4;
+	  }
+	  .docGroup {
+	    > .operators {
+	      z-index: $dg-index + 5;
+	    }
+	    .docGroup {
+	      > .operators {
+		z-index: $dg-index + 6;
+	      }
+	    }
+	  }
+	}
+      }
+    }
+  }
+}
diff --git a/lib/Kalamar.pm b/lib/Kalamar.pm
index 902934b..c9cb201 100644
--- a/lib/Kalamar.pm
+++ b/lib/Kalamar.pm
@@ -1,13 +1,18 @@
 package Kalamar;
 use Mojo::Base 'Mojolicious';
 use Mojo::ByteStream 'b';
+use Mojo::JSON 'decode_json';
 
-our $VERSION = '0.14';
+our $VERSION;
 
 # Start the application and register all routes and plugins
 sub startup {
   my $self = shift;
 
+  # Set version based on package file
+  my $pkg = b($self->home . '/package.json')->slurp;
+  $Kalamar::VERSION = decode_json($pkg)->{version};
+
   # Set default totle
   $self->defaults(
     layout => 'default',
@@ -19,13 +24,14 @@
     b($self->home . '/kalamar.secret')->slurp->split("\n")
   ]);
 
-  $self->hook(before_dispatch => sub {
+  $self->hook(
+    before_dispatch => sub {
       my $c = shift;
       my $host = $c->req->headers->header('X-Forwarded-Host');
       if ($host && $host eq 'korap.ids-mannheim.de') {
 	$c->req->url->base->path('/kalamar/');
       };
-  }) if $self->mode eq 'production';
+    }) if $self->mode eq 'production';
 
   $self->hook(before_dispatch => sub {
       my $c = shift;
@@ -36,7 +42,6 @@
       $h->header( 'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With' );
     });
 
-
   # Add additional plugin path
   push(@{$self->plugins->namespaces}, __PACKAGE__ . '::Plugin');
 
diff --git a/public/package.json b/package.json
similarity index 84%
rename from public/package.json
rename to package.json
index 97e262d..b21011c 100755
--- a/public/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "kalamar-static",
-  "version": "0.14.0",
+  "name": "kalamar",
+  "version": "0.14.1",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-concat": "^0.5.1",
diff --git a/templates/collections.html.ep b/templates/collections.html.ep
index 3beeba3..3c217bc 100644
--- a/templates/collections.html.ep
+++ b/templates/collections.html.ep
@@ -1,6 +1,9 @@
+% my $res = stash('search.resource');
+% if (ref($res) eq 'ARRAY') {
+
 <h2>Virtual Collections</h2>
 <ul>
-% foreach my $vc (@{stash('search.resource') // []}) {
+% foreach my $vc (@$res) {
   <li class="active" title="<%= $vc->{description} // '' %>"><h3><%= $vc->{name} %></h3>
 % my $stats = $vc->{statistics};
     <dl class="info">
@@ -12,6 +15,9 @@
   </li>
 % };
 </ul>
+% }
+
+
 % if (kalamar_test_port()) {
 <p style="font-size: 9pt; padding-left: 1em">Index port: <%= $c->url_for($c->config('Kalamar')->{'api-0.1'})->port %></p>
 % };