diff --git a/Changes b/Changes
index 7b27252..171e46b 100755
--- a/Changes
+++ b/Changes
@@ -1,3 +1,10 @@
+0.04 2014-07-08
+        - Fixed template view
+   	- Preliminary match view
+	- Switched to asset pipeline wth sass
+	- Added syntax highlighting to JSON
+	- Update to Api 0.1.
+
 0.03 2014-06-20
         - Added preliminary autocompletion support (freetime project)
 
diff --git a/Makefile.PL b/Makefile.PL
index 1945f11..16a3cb0 100644
--- a/Makefile.PL
+++ b/Makefile.PL
@@ -23,7 +23,8 @@
     'JSON::XS' => 0.0,
     'Mojolicious::Plugin::AssetPack' => 0.14,
     'JavaScript::Minifier::XS' => 0.09,
-    'CSS::Minifier::XS' => 0.09
+    'CSS::Minifier::XS' => 0.09,
+    'CSS::Sass' => '0.8.1'
 #    'Mojolicious::Plugin::Search' => 0.01,
   },
   test => {
diff --git a/korap.conf b/korap.conf
index 7a3a73b..e1fb78f 100644
--- a/korap.conf
+++ b/korap.conf
@@ -1,6 +1,7 @@
 {
   KorAP => {
-    api => 'http://10.0.10.13:8070/api/v1/'
+    'api' => 'http://10.0.10.13:8070/api/v1/',
+    'api-0.1' => 'http://10.0.10.13:8888/api/v0.1/'
   },
   Notifications => {
     Alertify => 1,
diff --git a/lib/Korap.pm b/lib/Korap.pm
index 04f0014..f0115ae 100644
--- a/lib/Korap.pm
+++ b/lib/Korap.pm
@@ -1,12 +1,17 @@
 package Korap;
 use Mojo::Base 'Mojolicious';
 
-our $VERSION = '0.03';
+our $VERSION = '0.04';
+
+# Start dev with
+# morbo -w lib -w templates -w public/sass -w public/js script/korap
 
 # Start the application and register all routes and plugins
 sub startup {
   my $self = shift;
 
+  $self->defaults(layout => 'default');
+
   # Set secret for signed cookies
   $self->secrets(['fmhsfjgfchgsdbfgshfxztsbt32477eb45veu4vubrghfgghbtv']);
 
@@ -21,20 +26,41 @@
 	      Number::Commify
 	      KorapSearch
 	      KorapInfo
-	      KorapTagHelpers/) {
-    # AssetPack
+	      KorapTagHelpers
+              /) {
     $self->plugin($_);
   };
 
-#  $self->asset(
-#    'korap.css' => (
-#      'style.css',
-#      'sass/hint.scss',
-#      'table.css',
-#      'sass/kwic-4.0.scss',
-#      'fontawesome/font-awesome.min.css'
-#    )
-#  );
+  $self->plugin(AssetPack => {
+    minify => 1
+  });
+
+  $self->plugin('AssetPack::LibSass');
+
+  $self->asset(
+    'korap.css' => (
+      '/sass/style.scss',
+      '/sass/sidebar.scss',
+      '/sass/tutorial.scss',
+      '/sass/hint.scss',
+      '/sass/query.scss',
+      '/sass/table.scss',
+      '/sass/pagination.scss',
+      '/sass/kwic-4.0.scss',
+      '/css/media.css',
+      '/css/font-awesome.min.css',
+      '/css/highlight.css'
+    )
+  );
+
+  $self->asset(
+    'korap.js' => (
+      '/js/jquery-2.0.0.min.js',
+      '/js/translateTable.js',
+      '/js/hint.js',
+      '/js/highlight.pack.js'
+    )
+  );
 
   $self->helper(
     date_format => sub {
@@ -54,20 +80,30 @@
     ->to('tutorial#page')->name('tutorial');
 
   # Collection data
-  my $collection = $r->route('/collection');
-  $collection->to('search#info');
-  $collection->search;
+  my $collection = $r->bridge('/collection');
+  $collection->to('info#about_collection');
+  my $collection_id = $collection->bridge('/:collection_id');
+  # stats
+  # $collection_id->;
+  $collection_id->search;
 
   # Corpus data
-  my $corpus = $r->route('/corpus');
-  $corpus->search;
-  $corpus->route('/:corpus_id')->search;
-  $corpus->route('/:corpus_id/#doc_id')->search;
-  $corpus->route('/:corpus_id/#doc_id/:match_id')
-         ->to('info#about_match')->name('match');
+  my $corpus_res = $r->route('/corpus');
+  my $corpus = $corpus_res->route('/:corpus_id');
+  # Todo: Stats
+  $corpus->search->name('search_corpus');
+  my $doc = $corpus->route('/#doc_id');
+  $doc->search->name('search_document');
+
+  # Match data
+  my $match = $doc->route('/:match_id');
+  $match->route->to('info#about_match')->name('match');
+  my $match_layer = $match->route('/:layer');
+  $match_layer->route->to('info#about_match');
+  $match_layer->route('/:foundry')->to('info#about_match');
 
   # Utilities
-  $r->get('/util/query')->to('search#query');
+  # $r->get('/util/query')->to('search#query');
 };
 
 
diff --git a/lib/Korap/Info.pm b/lib/Korap/Info.pm
index 50396bf..b4c5d91 100644
--- a/lib/Korap/Info.pm
+++ b/lib/Korap/Info.pm
@@ -8,20 +8,49 @@
   my $doc_id    = $c->stash('doc_id');
   my $match_id  = $c->stash('match_id');
 
+  my $foundry = '*';
+  my %query = (foundry => '*');
+  if ($c->stash('foundry')) {
+    $query{foundry} = $c->stash('foundry');
+    if ($c->stash('layer')) {
+      $query{layer} = $c->stash('layer');
+    };
+  };
+
   return $c->respond_to(
     json => sub {
-      $c->render(json => $c->notifications(json => $c->match_info($corpus_id, $doc_id, $match_id)))
+      $c->render(json => $c->notifications(json => $c->match_info($corpus_id, $doc_id, $match_id, %query)))
     },
     html => sub {
+      my $match = $c->match_info($corpus_id, $doc_id, $match_id);
+      if ($match->{error}) {
+	$c->notify(error => $match->{error});
+	return $c->render_exception('error');
+      };
+
       $c->render(
 	layout => 'default',
 	template => 'match_info',
-	match => $c->match_info($corpus_id, $doc_id, $match_id, foundry => '')
+	match => $match
       )
     }
   );
 };
 
+# Todo: Return info for all collections
+sub about_collection {
+  my $c = shift;
+  my $api = $c->config('KorAP')->{'api0.1'};
+  my $src = $c->stash('collection_id');
+  if ($src) {
+    $c->render(
+      json => $c->notifications(
+	json => $c->info_on($src)
+      )
+    );
+  };
+};
+
 1;
 
 __END__
diff --git a/lib/Korap/Plugin/KorapInfo.pm b/lib/Korap/Plugin/KorapInfo.pm
index 4ee8612..946c997 100644
--- a/lib/Korap/Plugin/KorapInfo.pm
+++ b/lib/Korap/Plugin/KorapInfo.pm
@@ -68,23 +68,29 @@
     match_info => sub {
       my $c = shift;
 
-      return map_match($json->{matchInfo2}) if $c->app->mode eq 'test';
-
       my $corpus = shift;
       my $doc = shift;
       my $match = shift;
+      my %param = @_;
+
+      if ($c->app->mode eq 'test') {
+	return map_match($json->{treeInfo}) if $param{spans};
+	return map_match($json->{matchInfo2});
+      };
 
       # Build url
-      my $temp_api = 'http://10.0.10.13:8070/api/v0.1/';
-      my $url = Mojo::URL->new($temp_api)->path('matchInfo');
+      my $temp_api = $c->config('KorAP')->{'api-0.1'};
+      my $url = Mojo::URL->new($temp_api)->path(
+	join('/', 'corpus', $corpus, $doc, $match, 'matchInfo')
+      );
 
       # Build match id
-      $match = 'match-' . $corpus . '!' . $corpus . '_' . $doc . '-' . $match;
+      # $match = 'match-' . $corpus . '!' . $corpus . '_' . $doc . '-' . $match;
 
-      my %param = @_;
-      my %query = ( id => $match );
-      $query{foundry} = $param{foundry} // '*';
-      $query{layer} = $param{layer} if defined $param{layer};
+      my %query;
+      $query{foundry} = $param{foundry} if defined $param{foundry};
+      $query{layer}   = $param{layer}   if defined $param{layer};
+      $query{spans}   = $param{spans} ? 'true' : 'false';
 
       # Add query
       $url->query(\%query);
@@ -94,6 +100,7 @@
       if (my $response = $c->ua->get($url)->success) {
 	return map_match($response->json);
       };
+
       $c->notify(error => 'Unable to retrieve resource');
       return {};
     }
@@ -105,6 +112,25 @@
 
 __DATA__
 {
+  "treeInfo": {
+    "author":"Filzstift,Alexander Sommer,TheK",
+    "textClass":"freizeit-unterhaltung reisen",
+    "corpusID":"WPD",
+    "title":"Neuseeland",
+    "foundries":"xip xip/morpho xip/constituency xip/dependency corenlp corenlp/namedentities corenlp/namedentities/ne_dewac_175m_600 corenlp/namedentities corenlp/namedentities/ne_hgc_175m_600 mate mate/morpho mate/dependency connexor connexor/morpho connexor/syntax connexor/phrase treetagger treetagger/morpho base base/sentences base/paragraphs opennlp opennlp/morpho",
+    "tokenization":"opennlp#tokens",
+    "field":"tokens",
+    "startMore":false,
+    "endMore":false,
+    "docID":"WPD_NNN.02848",
+    "snippet" : "<span class=\"context-left\"><span class=\"more\"></span></span><span class=\"match\"><span title=\"xip/c:VERB\">enthält</span>, <span title=\"xip/c:CONJ\">aber</span> <span title=\"xip/c:PTCL\">an</span> <span title=\"xip/c:CONJ\">und</span> <span title=\"xip/c:PP\"><span title=\"xip/c:PREP\">für</span> <span title=\"xip/c:NP\"><span title=\"xip/c:PRON\">sich</span></span></span> <span title=\"xip/c:NP\"><span title=\"xip/c:DET\">keinen</span> <span title=\"xip/c:NPA\"><span title=\"xip/c:AP\"><span title=\"xip/c:ADJ\">weiteren</span></span> <span title=\"xip/c:NOUN\">Sinn</span></span></span> <span title=\"xip/c:VERB\">enthält</span></span><span class=\"context-right\"><span class=\"more\"></span></span>",
+    "ID":"match-WPD!WPD_NNN.02848-p1213-1224",
+    "pubDate":"2005-03-28",
+    "context":{
+      "left":["token",0],
+      "right":["token",0]
+    }
+  },
   "matchInfo": {
     "author":"Filzstift,Alexander Sommer,TheK",
     "textClass":"freizeit-unterhaltung reisen",
diff --git a/lib/Korap/Plugin/KorapSearch.pm b/lib/Korap/Plugin/KorapSearch.pm
index 0940cf0..a2c22bd 100644
--- a/lib/Korap/Plugin/KorapSearch.pm
+++ b/lib/Korap/Plugin/KorapSearch.pm
@@ -8,13 +8,12 @@
 # TODO: Write search snippet
 
 sub map_matches {
-  my $matches = shift;
   [
     map {
       $_->{ID} =~ s/^match\-[^!]+![^-]+-//;
       $_->{docID} =~ s/^[^_]+_//;
       $_;
-    } @$matches
+    } @{ shift() }
   ];
 };
 
@@ -27,12 +26,13 @@
     $param = { %$param, %$config_param };
   };
 
-  my $api = $param->{api};
+  my $api = $param->{'api-0.1'};
 
   # Create search endpoint
   $mojo->routes->add_shortcut(
     search => sub {
-      shift->route('/search')->to('search#remote')
+      # Todo: Support TRACE
+      return shift->route('/search')->to('search#remote')
     }
   );
 
@@ -55,7 +55,7 @@
 	$c->stash('search.bm.hit' => 20);
 	$c->stash('search.bm.result' => 10);
 	$c->stash('search.query' => $json->{request}->{query});
-	$c->stash('search.hits' => $json->{matches});
+	$c->stash('search.hits' => map_matches $json->{matches});
 	return $cb->();
       };
 
@@ -85,7 +85,17 @@
       };
 
       my $url = Mojo::URL->new($api);
-      $url->path('resource/search');
+
+      if ($c->stash('corpus_id')) {
+	$url->path('corpus/' . $c->stash('corpus_id') . '/search');
+      }
+      elsif ($c->stash('collection_id')) {
+	$url->path('virtualcollection/' . $c->stash('collection_id') . '/search');
+      }
+      else {
+	$url->path('search');
+      };
+
       #if ($c->stash('resource')) {
       #$url->path($c->stash('resource'));
       #if ($c->stash('cid')) {
@@ -100,7 +110,7 @@
       $url->query(\%query);
       my $cache_url = $url->to_string;
 
-      $url->query({ctx => 'paragraph'});
+      $url->query({context => 'paragraph'});
 
       # Check cache for total results
       my $total_results = $c->chi->get('total-' . $cache_url);
@@ -108,7 +118,6 @@
 	$c->stash('search.totalResults' => $total_results);
 	$c->app->log->warn('Get total result from cache');
 	$url->query({cutoff => 'true'});
-	$url->query({cutOff => 'true'});
       }
       else {
 	$c->stash('search.totalResults' => 0);
@@ -118,10 +127,9 @@
 
       $c->stash('search.itemsPerPage' => $count);
 
-      my $ua = Mojo::UserAgent->new($url);
       $c->app->log->debug($url->to_string);
 
-      $c->app->log->debug("Start tx");
+      my $ua = Mojo::UserAgent->new($url);
 
       # Blocking request
       # TODO: Make non-blocking
@@ -139,10 +147,10 @@
 	# Reformat benchmark counter
 	my $b_hit    = $json->{benchmarkHitCounter};
 	my $b_search = $json->{benchmarkSearchResults};
-	if ($b_hit =~ s/\s+(m)?s$//) {
+	if ($b_hit & $b_hit =~ s/\s+(m)?s$//) {
 	  $b_hit = sprintf("%.2f", $b_hit) . ($1 ? $1 : '') . 's';
 	};
-	if ($b_search =~ s/\s+(m)?s$//) {
+	if ($b_search && $b_search =~ s/\s+(m)?s$//) {
 	  $b_search = sprintf("%.2f", $b_search) . ($1 ? $1 : '') . 's';
 	};
 
diff --git a/lib/Korap/Plugin/KorapTagHelpers.pm b/lib/Korap/Plugin/KorapTagHelpers.pm
index b54161c..b2b9a4e 100644
--- a/lib/Korap/Plugin/KorapTagHelpers.pm
+++ b/lib/Korap/Plugin/KorapTagHelpers.pm
@@ -10,9 +10,9 @@
     korap_tut_query => sub {
       my ($c, $ql, $q) = @_;
       $q = xml_escape $q;
-      b('<code class="query tutorial" onclick="top.useQuery(this)" ' .
-	  qq!data-query="$q" data-query-language="$ql"><pre>! .
-	    $q . '</pre></code>');
+      b('<pre class="query tutorial" onclick="top.useQuery(this)" ' .
+	  qq!data-query="$q" data-query-language="$ql"><code>! .
+	    $q . '</code></pre>');
     }
   );
 };
diff --git a/lib/Korap/Search.pm b/lib/Korap/Search.pm
index 9166130..a656635 100644
--- a/lib/Korap/Search.pm
+++ b/lib/Korap/Search.pm
@@ -7,24 +7,28 @@
   $c->layout('default');
   $c->title('KorAP');
 
+  my $api = $c->config('KorAP')->{'api-0.1'};
+
+  # Todo: Support query building directly
+
   $c->stash(test_port => (
     $c->req->url->to_abs->port == 6666 ||
-      $c->app->mode eq 'development') ? 1 : 0);
+      $c->app->mode =~ m/^development|test$/) ? 1 : 0);
 
   if ((scalar $c->param('action') // '') eq 'inspect') {
-    my $api = $c->config('KorAP')->{api};
-    my $url = Mojo::URL->new($api)->path('resource/query');
+    my $url = Mojo::URL->new($api)->path('search');
 
     $url->query({
       q => scalar $c->param('q') // '',
       ql => scalar $c->param('ql') // 'poliqarp'
     });
 
-    if (my $response = $c->ua->get($url)->success) {
+    my $tx = $c->ua->build_tx(TRACE => $url);
+    if (my $response = $c->ua->start($tx)->success) {
       $c->stash('search.query' => $response->json);
     }
     else {
-      $c->notify(error => 'Unable to retrieve serialized query');
+      $c->notify(error => 'Unable to trace query');
     };
 
     $c->param(cutoff => 1);
@@ -38,13 +42,6 @@
   $c->render(template => 'search');
 };
 
-sub info {
-  my $c = shift;
-  my $api = $c->config('KorAP')->{api};
-  my $src = $c->stash('resource');
-  $c->render(json => $c->notifications(json => $c->info_on($src)));
-};
-
 
 1;
 
@@ -54,9 +51,6 @@
 [{"shared":false,"id":1,"managed":true,"created":1401193381119,"stats":{"documents":196510,"tokens":51545081,"sentences":4116282,"paragraphs":2034752},"query":[{"@type":"korap:meta-filter","@value":{"@type":"korap:term","@field":"korap:field#corpusID","@value":"WPD"}}],"description":"Die freie Enzyklopädie","name":"Wikipedia","foundries":"base;corenlp;mate;mpt;opennlp;tt;xip"}]
 
 
-
-
-
 http://10.0.10.13:8070/api/v1/resource/matchInfo?id=match-WPD!WPD_NNN.02848-p1223-1224&f=mate&l=
 
 {"author":"Filzstift,Alexander Sommer,TheK","textClass":"freizeit-unterhaltung reisen","corpusID":"WPD","title":"Neuseeland","foundries":"xip xip/morpho xip/constituency xip/dependency corenlp corenlp/namedentities corenlp/namedentities/ne_dewac_175m_600 corenlp/namedentities corenlp/namedentities/ne_hgc_175m_600 mate mate/morpho mate/dependency connexor connexor/morpho connexor/syntax connexor/phrase treetagger treetagger/morpho base base/sentences base/paragraphs opennlp opennlp/morpho","tokenization":"opennlp#tokens","field":"tokens","startMore":false,"endMore":false,"docID":"WPD_NNN.02848","snippet":"<span class=\"context-left\"></span><span class=\"match\"><span title=\"mate/l:besonders\"><span title=\"mate/p:ADV\">Besonders</span></span> <span title=\"mate/l:auffällig\"><span title=\"mate/m:degree:pos\"><span title=\"mate/p:ADJD\">auffällig</span></span></span> <span title=\"mate/l:sein\"><span title=\"mate/m:mood:ind\"><span title=\"mate/m:number:pl\"><span title=\"mate/m:person:3\"><span title=\"mate/m:tense:pres\"><span title=\"mate/p:VAFIN\">sind</span></span></span></span></span></span> <span title=\"mate/l:schließlich\"><span title=\"mate/p:ADV\">schließlich</span></span> <span title=\"mate/l:noch\"><span title=\"mate/p:ADV\">noch</span></span> <span title=\"mate/l:der\"><span title=\"mate/m:case:nom\"><span title=\"mate/m:gender:masc\"><span title=\"mate/m:number:sg\"><span title=\"mate/p:ART\">der</span></span></span></span></span> <span title=\"mate/l:pohutukawa\"><span title=\"mate/m:case:nom\"><span title=\"mate/m:gender:masc\"><span title=\"mate/m:number:sg\"><span title=\"mate/p:NE\">Pohutukawa</span></span></span></span></span> <span title=\"mate/l:und\"><span title=\"mate/p:KON\">und</span></span> <span title=\"mate/l:der\"><span title=\"mate/m:case:nom\"><span title=\"mate/m:gender:masc\"><span title=\"mate/m:number:sg\"><span title=\"mate/p:ART\">der</span></span></span></span></span> <span title=\"mate/l:cabbage\"><span title=\"mate/m:case:nom\"><span title=\"mate/m:gender:masc\"><span title=\"mate/m:number:sg\"><span title=\"mate/p:NE\">Cabbage</span></span></span></span></span> <span title=\"mate/l:tree\"><span title=\"mate/m:gender:masc\"><span title=\"mate/m:number:sg\"><span title=\"mate/p:NE\"><span title=\"mate/m:case:nom\">Tree</span></span></span></span></span></span><span class=\"context-right\"></span>","ID":"match-WPD!WPD_NNN.02848-p1213-1224","pubDate":"2005-03-28","context":{"left":["token",0],"right":["token",0]}}
diff --git a/lib/Mojolicious/Plugin/AssetPack/LibSass.pm b/lib/Mojolicious/Plugin/AssetPack/LibSass.pm
new file mode 100644
index 0000000..6a082a4
--- /dev/null
+++ b/lib/Mojolicious/Plugin/AssetPack/LibSass.pm
@@ -0,0 +1,27 @@
+package Mojolicious::Plugin::AssetPack::LibSass;
+use Mojo::Base 'Mojolicious::Plugin';
+use CSS::Sass;
+use CSS::Minifier::XS;
+
+sub register {
+  my ($plugin, $mojo) = @_;
+
+  my $sass = CSS::Sass->new;
+
+  # Todo: Check if AssetPack is loaded
+  # Todo: Only minify if necessary
+
+  my $proc = $mojo->asset->preprocessors;
+
+  $proc->remove('scss');
+  $proc->add(
+    scss => sub {
+      my ($as, $text, $file) = @_;
+      $$text = CSS::Minifier::XS::minify($sass->compile($$text));
+    });
+  $proc->map_type(scss => 'css');
+};
+
+1;
+
+__END__
diff --git a/public/fontawesome/font-awesome.min.css b/public/css/font-awesome.min.css
similarity index 100%
rename from public/fontawesome/font-awesome.min.css
rename to public/css/font-awesome.min.css
diff --git a/public/css/highlight.css b/public/css/highlight.css
new file mode 100644
index 0000000..1e61e83
--- /dev/null
+++ b/public/css/highlight.css
@@ -0,0 +1,124 @@
+/*
+
+Based on github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  padding: 0.5em;
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #998;
+  font-style: italic
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #333;
+  font-weight: bold
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #099;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula {
+  color: #d14
+}
+
+.hljs-title,
+.hljs-id,
+.coffeescript .hljs-params,
+.scss .hljs-preprocessor {
+  color: #900;
+  font-weight: bold
+}
+
+.javascript .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-title,
+.hljs-subst {
+  font-weight: normal
+}
+
+.hljs-class .hljs-title,
+.haskell .hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #458;
+  font-weight: bold
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: #008080
+}
+
+.hljs-regexp {
+  color: #009926
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073
+}
+
+.hljs-built_in,
+.lisp .hljs-title,
+.clojure .hljs-built_in {
+  color: #0086b3
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999;
+  font-weight: bold
+}
+
+.hljs-deletion {
+  background: #fdd
+}
+
+.hljs-addition {
+  background: #dfd
+}
+
+.diff .hljs-change {
+  background: #0086b3
+}
+
+.hljs-chunk {
+  color: #aaa
+}
diff --git a/public/css/media.css b/public/css/media.css
new file mode 100644
index 0000000..6eb7283
--- /dev/null
+++ b/public/css/media.css
@@ -0,0 +1,34 @@
+@media (orientation: portrait), (max-width: 42.5em) {
+  #sidebar {
+    margin-left: -230px;
+  }
+  h1 {
+    margin-left: 3px;
+    width: 4em;
+    height: 1.8em;
+    background-size: 90%;
+    z-index: 300;
+  }
+  main {
+    margin-left: 14px;
+  }
+  #top form {
+    padding-left: 0px;
+    padding-top: 2.9em;
+  }
+  #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;
+  }
+}
\ No newline at end of file
diff --git a/public/hint.css b/public/hint.css
deleted file mode 100644
index b323523..0000000
--- a/public/hint.css
+++ /dev/null
@@ -1,57 +0,0 @@
-#searchMirror {
-  position: absolute;
-  height: 0px;
-  margin-top: 1px;
-  white-space:nowrap;
-  overflow: show;
-}
-
-#searchMirror > span {
-  opacity: 0;
-  white-space:nowrap;
-  overflow: hidden;
-}
-
-#searchMirror > ul {
-  color: white;
-  margin: 0;
-  text-indent: 0;
-  display: inline-block;
-  background-color: #496000;
-  opacity: 0;
-  padding: 0;
-  padding-top: 5px;
-  padding-bottom: 10px;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-}
-
-#searchMirror > ul > li {
-  list-style-type: none;
-  list-style-position: outside;
-  padding: 3pt 10pt;
-  text-shadow: none;
-}
-
-#searchMirror > ul > li {
-  white-space: normal;
-}
-
-#searchMirror > ul > li > span {
-  float: right;
-  margin-left: 30pt;
-  text-align: right;
-  font-style: italic;
-  color: #7ba400;
-}
-
-/* like sidebar ul li.active */
-#searchMirror > ul > li.active {
-  background-color: #7ba400;
-  text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-#searchMirror > ul > li.active > span {
-  color: #496000;
-  text-shadow: none;
-}
\ No newline at end of file
diff --git a/public/img/korap-logo-solo.svg b/public/img/korap-logo-solo.svg
index 0478e5a..73b7c58 100644
--- a/public/img/korap-logo-solo.svg
+++ b/public/img/korap-logo-solo.svg
@@ -8,8 +8,8 @@
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
-   width="292.90839"
-   height="104.8784"
+   width="297"
+   height="108"
    id="svg2">
   <defs
      id="defs4" />
diff --git a/public/js/highlight.pack.js b/public/js/highlight.pack.js
new file mode 100644
index 0000000..6c71f03
--- /dev/null
+++ b/public/js/highlight.pack.js
@@ -0,0 +1 @@
+var hljs=new function(){function k(v){return v.replace(/&/gm,"&amp;").replace(/</gm,"&lt;").replace(/>/gm,"&gt;")}function t(v){return v.nodeName.toLowerCase()}function i(w,x){var v=w&&w.exec(x);return v&&v.index==0}function d(v){return Array.prototype.map.call(v.childNodes,function(w){if(w.nodeType==3){return b.useBR?w.nodeValue.replace(/\n/g,""):w.nodeValue}if(t(w)=="br"){return"\n"}return d(w)}).join("")}function r(w){var v=(w.className+" "+(w.parentNode?w.parentNode.className:"")).split(/\s+/);v=v.map(function(x){return x.replace(/^language-/,"")});return v.filter(function(x){return j(x)||x=="no-highlight"})[0]}function o(x,y){var v={};for(var w in x){v[w]=x[w]}if(y){for(var w in y){v[w]=y[w]}}return v}function u(x){var v=[];(function w(y,z){for(var A=y.firstChild;A;A=A.nextSibling){if(A.nodeType==3){z+=A.nodeValue.length}else{if(t(A)=="br"){z+=1}else{if(A.nodeType==1){v.push({event:"start",offset:z,node:A});z=w(A,z);v.push({event:"stop",offset:z,node:A})}}}}return z})(x,0);return v}function q(w,y,C){var x=0;var F="";var z=[];function B(){if(!w.length||!y.length){return w.length?w:y}if(w[0].offset!=y[0].offset){return(w[0].offset<y[0].offset)?w:y}return y[0].event=="start"?w:y}function A(H){function G(I){return" "+I.nodeName+'="'+k(I.value)+'"'}F+="<"+t(H)+Array.prototype.map.call(H.attributes,G).join("")+">"}function E(G){F+="</"+t(G)+">"}function v(G){(G.event=="start"?A:E)(G.node)}while(w.length||y.length){var D=B();F+=k(C.substr(x,D[0].offset-x));x=D[0].offset;if(D==w){z.reverse().forEach(E);do{v(D.splice(0,1)[0]);D=B()}while(D==w&&D.length&&D[0].offset==x);z.reverse().forEach(A)}else{if(D[0].event=="start"){z.push(D[0].node)}else{z.pop()}v(D.splice(0,1)[0])}}return F+k(C.substr(x))}function m(y){function v(z){return(z&&z.source)||z}function w(A,z){return RegExp(v(A),"m"+(y.cI?"i":"")+(z?"g":""))}function x(D,C){if(D.compiled){return}D.compiled=true;D.k=D.k||D.bK;if(D.k){var z={};function E(G,F){if(y.cI){F=F.toLowerCase()}F.split(" ").forEach(function(H){var I=H.split("|");z[I[0]]=[G,I[1]?Number(I[1]):1]})}if(typeof D.k=="string"){E("keyword",D.k)}else{Object.keys(D.k).forEach(function(F){E(F,D.k[F])})}D.k=z}D.lR=w(D.l||/\b[A-Za-z0-9_]+\b/,true);if(C){if(D.bK){D.b=D.bK.split(" ").join("|")}if(!D.b){D.b=/\B|\b/}D.bR=w(D.b);if(!D.e&&!D.eW){D.e=/\B|\b/}if(D.e){D.eR=w(D.e)}D.tE=v(D.e)||"";if(D.eW&&C.tE){D.tE+=(D.e?"|":"")+C.tE}}if(D.i){D.iR=w(D.i)}if(D.r===undefined){D.r=1}if(!D.c){D.c=[]}var B=[];D.c.forEach(function(F){if(F.v){F.v.forEach(function(G){B.push(o(F,G))})}else{B.push(F=="self"?D:F)}});D.c=B;D.c.forEach(function(F){x(F,D)});if(D.starts){x(D.starts,C)}var A=D.c.map(function(F){return F.bK?"\\.?\\b("+F.b+")\\b\\.?":F.b}).concat([D.tE]).concat([D.i]).map(v).filter(Boolean);D.t=A.length?w(A.join("|"),true):{exec:function(F){return null}};D.continuation={}}x(y)}function c(S,L,J,R){function v(U,V){for(var T=0;T<V.c.length;T++){if(i(V.c[T].bR,U)){return V.c[T]}}}function z(U,T){if(i(U.eR,T)){return U}if(U.eW){return z(U.parent,T)}}function A(T,U){return !J&&i(U.iR,T)}function E(V,T){var U=M.cI?T[0].toLowerCase():T[0];return V.k.hasOwnProperty(U)&&V.k[U]}function w(Z,X,W,V){var T=V?"":b.classPrefix,U='<span class="'+T,Y=W?"":"</span>";U+=Z+'">';return U+X+Y}function N(){var U=k(C);if(!I.k){return U}var T="";var X=0;I.lR.lastIndex=0;var V=I.lR.exec(U);while(V){T+=U.substr(X,V.index-X);var W=E(I,V);if(W){H+=W[1];T+=w(W[0],V[0])}else{T+=V[0]}X=I.lR.lastIndex;V=I.lR.exec(U)}return T+U.substr(X)}function F(){if(I.sL&&!f[I.sL]){return k(C)}var T=I.sL?c(I.sL,C,true,I.continuation.top):g(C);if(I.r>0){H+=T.r}if(I.subLanguageMode=="continuous"){I.continuation.top=T.top}return w(T.language,T.value,false,true)}function Q(){return I.sL!==undefined?F():N()}function P(V,U){var T=V.cN?w(V.cN,"",true):"";if(V.rB){D+=T;C=""}else{if(V.eB){D+=k(U)+T;C=""}else{D+=T;C=U}}I=Object.create(V,{parent:{value:I}})}function G(T,X){C+=T;if(X===undefined){D+=Q();return 0}var V=v(X,I);if(V){D+=Q();P(V,X);return V.rB?0:X.length}var W=z(I,X);if(W){var U=I;if(!(U.rE||U.eE)){C+=X}D+=Q();do{if(I.cN){D+="</span>"}H+=I.r;I=I.parent}while(I!=W.parent);if(U.eE){D+=k(X)}C="";if(W.starts){P(W.starts,"")}return U.rE?0:X.length}if(A(X,I)){throw new Error('Illegal lexeme "'+X+'" for mode "'+(I.cN||"<unnamed>")+'"')}C+=X;return X.length||1}var M=j(S);if(!M){throw new Error('Unknown language: "'+S+'"')}m(M);var I=R||M;var D="";for(var K=I;K!=M;K=K.parent){if(K.cN){D=w(K.cN,D,true)}}var C="";var H=0;try{var B,y,x=0;while(true){I.t.lastIndex=x;B=I.t.exec(L);if(!B){break}y=G(L.substr(x,B.index-x),B[0]);x=B.index+y}G(L.substr(x));for(var K=I;K.parent;K=K.parent){if(K.cN){D+="</span>"}}return{r:H,value:D,language:S,top:I}}catch(O){if(O.message.indexOf("Illegal")!=-1){return{r:0,value:k(L)}}else{throw O}}}function g(y,x){x=x||b.languages||Object.keys(f);var v={r:0,value:k(y)};var w=v;x.forEach(function(z){if(!j(z)){return}var A=c(z,y,false);A.language=z;if(A.r>w.r){w=A}if(A.r>v.r){w=v;v=A}});if(w.language){v.second_best=w}return v}function h(v){if(b.tabReplace){v=v.replace(/^((<[^>]+>|\t)+)/gm,function(w,z,y,x){return z.replace(/\t/g,b.tabReplace)})}if(b.useBR){v=v.replace(/\n/g,"<br>")}return v}function p(z){var y=d(z);var A=r(z);if(A=="no-highlight"){return}var v=A?c(A,y,true):g(y);var w=u(z);if(w.length){var x=document.createElementNS("http://www.w3.org/1999/xhtml","pre");x.innerHTML=v.value;v.value=q(w,u(x),y)}v.value=h(v.value);z.innerHTML=v.value;z.className+=" hljs "+(!A&&v.language||"");z.result={language:v.language,re:v.r};if(v.second_best){z.second_best={language:v.second_best.language,re:v.second_best.r}}}var b={classPrefix:"hljs-",tabReplace:null,useBR:false,languages:undefined};function s(v){b=o(b,v)}function l(){if(l.called){return}l.called=true;var v=document.querySelectorAll("pre code");Array.prototype.forEach.call(v,p)}function a(){addEventListener("DOMContentLoaded",l,false);addEventListener("load",l,false)}var f={};var n={};function e(v,x){var w=f[v]=x(this);if(w.aliases){w.aliases.forEach(function(y){n[y]=v})}}function j(v){return f[v]||f[n[v]]}this.highlight=c;this.highlightAuto=g;this.fixMarkup=h;this.highlightBlock=p;this.configure=s;this.initHighlighting=l;this.initHighlightingOnLoad=a;this.registerLanguage=e;this.getLanguage=j;this.inherit=o;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE]};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE]};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.REGEXP_MODE={cN:"regexp",b:/\//,e:/\/[gim]*/,i:/\n/,c:[this.BE,{b:/\[/,e:/\]/,r:0,c:[this.BE]}]};this.TM={cN:"title",b:this.IR,r:0};this.UTM={cN:"title",b:this.UIR,r:0}}();hljs.registerLanguage("xml",function(a){var c="[A-Za-z0-9\\._:-]+";var d={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"};var b={eW:true,i:/</,r:0,c:[d,{cN:"attribute",b:c,r:0},{b:"=",r:0,c:[{cN:"value",v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s\/>]+/}]}]}]};return{aliases:["html"],cI:true,c:[{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{title:"style"},c:[b],starts:{e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{title:"script"},c:[b],starts:{e:"<\/script>",rE:true,sL:"javascript"}},{b:"<%",e:"%>",sL:"vbscript"},d,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ /><]+",r:0},b]}]}});hljs.registerLanguage("markdown",function(a){return{c:[{cN:"header",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"blockquote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"`.+?`"},{b:"^( {4}|\t)",e:"$",r:0}]},{cN:"horizontal_rule",b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].+?[\\)\\]]",rB:true,c:[{cN:"link_label",b:"\\[",e:"\\]",eB:true,rE:true,r:0},{cN:"link_url",b:"\\]\\(",e:"\\)",eB:true,eE:true},{cN:"link_reference",b:"\\]\\[",e:"\\]",eB:true,eE:true,}],r:10},{b:"^\\[.+\\]:",e:"$",rB:true,c:[{cN:"link_reference",b:"\\[",e:"\\]",eB:true,eE:true},{cN:"link_url",b:"\\s",e:"$"}]}]}});hljs.registerLanguage("css",function(a){var b="[a-zA-Z-][a-zA-Z0-9_-]*";var c={cN:"function",b:b+"\\(",e:"\\)",c:["self",a.NM,a.ASM,a.QSM]};return{cI:true,i:"[=/|']",c:[a.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:true,eE:true,r:0,c:[c,a.ASM,a.QSM,a.NM]}]},{cN:"tag",b:b,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[a.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[c,a.NM,a.QSM,a.ASM,a.CBLCLM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});hljs.registerLanguage("json",function(a){var e={literal:"true false null"};var d=[a.QSM,a.CNM];var c={cN:"value",e:",",eW:true,eE:true,c:d,k:e};var b={b:"{",e:"}",c:[{cN:"attribute",b:'\\s*"',e:'"\\s*:\\s*',eB:true,eE:true,c:[a.BE],i:"\\n",starts:c}],i:"\\S"};var f={b:"\\[",e:"\\]",c:[a.inherit(c,{cN:null})],i:"\\S"};d.splice(d.length,0,b,f);return{c:d,k:e,i:"\\S"}});
\ No newline at end of file
diff --git a/public/hint.js b/public/js/hint.js
similarity index 96%
rename from public/hint.js
rename to public/js/hint.js
index a6beda6..4324c1e 100644
--- a/public/hint.js
+++ b/public/js/hint.js
@@ -22,8 +22,7 @@
   mirror.setAttribute("id", "searchMirror");
   mirror.appendChild(document.createElement("span"));
   mirror.appendChild(hint);
-  search.parentNode.insertBefore(mirror, search);
-
+  document.getElementsByTagName("body")[0].appendChild(mirror);
   // Default active state
   this.active = -2;
 
@@ -103,7 +102,8 @@
   // Choose next item in list
   this.next = function () {
     if (this.active === -2)
-      return;
+      return false;
+
     var lis = hint.getElementsByTagName("li");
     if (this.active === -1) {
       lis[0].setAttribute("class", "active");
@@ -118,6 +118,8 @@
       lis[this.active].removeAttribute("class");
       lis[++this.active].setAttribute("class", "active");
     };
+
+    return true;
   };
 
   // Choose previous item in list
@@ -163,6 +165,8 @@
 
     if (foundryRegex.exec(begin + action))
       this.show(RegExp.$1 + (RegExp.$2 ? '/' + RegExp.$2 : ''));
+
+    return true;
   };
 
   function changed (e) {
@@ -199,17 +203,17 @@
     if (that.active === -2)
       return;
     if (e.key === 'Down') {
-      that.next();
+      return that.next();
     }
     else if (e.key === 'Up') {
-      that.previous();
+      return that.previous();
     }
-    else if (e.key === 'Enter') {
-      that.choose();
+    else if (e.key === 'Enter' && that.choose()) {
       e.stopPropagation();
       e.preventDefault();
       return false;
-    }
+    };
+    that.hide();
   };
 
   function qlSelect () {
diff --git a/public/jquery-2.0.0.min.js b/public/js/jquery-2.0.0.min.js
similarity index 100%
rename from public/jquery-2.0.0.min.js
rename to public/js/jquery-2.0.0.min.js
diff --git a/public/translateTable.js b/public/js/translateTable.js
similarity index 100%
rename from public/translateTable.js
rename to public/js/translateTable.js
diff --git a/public/translateTree.js b/public/js/translateTree.js
similarity index 100%
rename from public/translateTree.js
rename to public/js/translateTree.js
diff --git a/public/kwic-3.0.css b/public/kwic-3.0.css
deleted file mode 100644
index 0aac61e..0000000
--- a/public/kwic-3.0.css
+++ /dev/null
@@ -1,220 +0,0 @@
-@charset "utf-8";
-
-/*
-  light orange: #f4eebb;
-  dark orange: #ffa500;
-  dark green: #496000;
-  light green: #7ba400;
-
-  Search for: [orth=erstens]
-*/
-
-ol {
-  width: auto;
-  overflow: hidden;
-  list-style-type: none;
-  font-size: 10pt;
-  margin: 0;
-  padding: 0;
-  text-indent: 0;
-  border: 1px solid #ccc;
-  font-family: verdana, tahoma, arial;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
-}
-
-ol > li {
-  border-style: solid;
-  border-color: #ffa500;
-  border-width: 0;
-}
-
-ol > li:not(.active) {
-  width: 999999%;
-  margin-left: -499999.5%;
-  background-color: #f5f5f5;
-  overflow: hidden;
-  white-space: no-wrap;
-  cursor: pointer;
-  padding: 10px 0;
-  text-indent: 0;
-}
-
-ol > li:nth-of-type(even) {
-  background-color: #ddd;
-}
-
-ol > li > div.snippet > span,
-ol > li > div.snippet > span > span {
-  white-space: no-wrap !important;
-}
-
-ol.free-aligned > li:not(.active) > div.snippet > span.left {
-  display: inline-block;
-  text-align: right;
-  width: 50.0046%;
-}
-
-ol.free-aligned > li:not(.active) > 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.free-aligned > li > div.snippet > span.right {
-  text-align: left;
-}
-
-ol.left-aligned > li > div.snippet > span.context-left {
-  display: inline-block;
-  text-align: right;
-  width: 50.001%;
-}
-
-ol.right-aligned {
-  text-align: right;
-}
-
-ol.right-aligned > li:not(.active) > div.snippet > span.context-right {
-  display: inline-block;
-  text-align: left;
-  width: 49.9915%;
-}
-
-li > div.snippet > span {
-  color: #666;
-}
-
-.match {
-  font-weight: bold;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-  color: #111;
-  padding-left: 4pt;
-  padding-right: 2pt;
-}
-
-em, em.level-0 {
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  padding-bottom: 0px;
-  font-style: normal;
-}
-
-em > em, em.level-1 {
-  padding-bottom: 3px;
-}
-
-em > em > em, em.level-2 {
-  padding-bottom: 6px;
-}
-
-.class-0 { border-color: #c1002b; }
-.class-1 { border-color: #009ee0; }
-.class-2 { border-color: #f29400; }
-
-span.more:before {
-  content: "…";
-  padding-left: 2pt;
-  padding-right: 2pt;
-}
-
-/* active view */
-ol > li.active {
-  text-align: left;
-  width: auto;
-  cursor: normal;
-  white-space: wrap;
-  height: auto;
-  border-width: 2px;
-  background-color: #f4eebb;
-  position: relative;
-  min-height: 68pt;
-}
-
-ol > li.active > div.snippet {
-  margin: 5pt 10pt;
-  margin-right: 3em;
-  margin-bottom: 24pt;
-}
-
-ol > li.active > div.snippet > span {
-  line-height: 1.4em;
-  width: auto;
-}
-
-ol > li.active > div.snippet > span.context-left {
-  margin-left: 0;
-  display: inline;
-  overflow: visible;
-  text-align: left;
-  width: auto;
-}
-
-/* Korap-Actions: */
-ol > li ul.action {
-  display: none;
-}
-
-ol > li ul.action li {
-  cursor: pointer;
-  color: white;
-  text-decoration: none;
-}
-
-ol > li.active ul.action {
-  background-color: #ffa500;
-  font-size: 12pt;
-  color: white;
-  text-shadow: none;
-  display: block;
-  margin: 0;
-  padding: 0;
-  z-index: 4;
-  text-indent: 0;
-  list-style-type: none;
-  list-style-position: inline;
-}
-
-/*
-ol > li.active ul.action.right {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  height: 1.2em;
-}
-
-ol > li.active ul.action.right li {
-  float: left;
-  padding-left: 1em;
-}
-*/
-
-ol > li.active ul.action.right {
-  position: absolute;
-  float: right;
-  text-align: center;
-  padding: 0pt 3pt;
-  height: 100%;
-  width: 1.2em;;
-  right: 0;
-  top: 0;
-}
-
-ol > li:not(.active) p {
-  display: none;
-}
-
-ol > li.active p {
-  background-color: #ffa500;
-  color: white;
-  text-shadow: none;
-  padding: 3pt 10pt;
-  margin: 5pt 0pt 0pt 0pt;
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-}
\ No newline at end of file
diff --git a/public/kwic-4.0.css b/public/kwic-4.0.css
deleted file mode 100644
index bad538c..0000000
--- a/public/kwic-4.0.css
+++ /dev/null
@@ -1,221 +0,0 @@
-@charset "utf-8";
-/*
-  light orange: #f4eebb;
-  dark orange: #ffa500;
-  dark green: #496000;
-  light green: #7ba400;
-
-  Search for: [orth=erstens]
-*/
-
-ol {
-  width: auto;
-  overflow: hidden;
-  list-style-type: none;
-  font-size: 10pt;
-  margin: 0;
-  padding: 0;
-  text-indent: 0;
-  border: 1px solid #ccc;
-  font-family: verdana, tahoma, arial;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
-}
-
-ol > li {
-  border-style: solid;
-  border-color: #ffa500;
-  border-width: 0;
-}
-
-ol > li:not(.active) {
-  width: 99999%;
-  margin-left: -49999.5%;
-  background-color: #f5f5f5;
-  overflow: hidden;
-  white-space: no-wrap;
-  cursor: pointer;
-  padding: 5pt 0 6pt 0;
-  text-indent: 0;
-}
-
-ol > li:nth-of-type(even) {
-  background-color: #ddd;
-}
-
-ol > li > div > div.snippet > span,
-ol > li > div > div.snippet > span > span {
-  white-space: no-wrap !important;
-}
-
-ol.free-aligned > li:not(.active) > div > div.snippet > span.left {
-  display: inline-block;
-  text-align: right;
-  width: 50.046%;
-}
-
-ol.free-aligned > li:not(.active) > 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.free-aligned > li > div > div.snippet > span.right {
-  text-align: left;
-}
-
-ol.left-aligned > li > div > div.snippet > span.context-left {
-  display: inline-block;
-  text-align: right;
-  width: 50.01%;
-}
-
-ol.right-aligned {
-  text-align: right;
-}
-
-ol.right-aligned > li:not(.active) > div > div.snippet > span.context-right {
-  display: inline-block;
-  text-align: left;
-  width: 49.915%;
-}
-
-li > div > div.snippet > span {
-  color: #666;
-}
-
-.match {
-  font-weight: bold;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-  color: #111;
-  padding-left: 4pt;
-  padding-right: 2pt;
-}
-
-em, em.level-0 {
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  padding-bottom: 0px;
-  font-style: normal;
-}
-
-em > em, em.level-1 {
-  padding-bottom: 3px;
-}
-
-em > em > em, em.level-2 {
-  padding-bottom: 6px;
-}
-
-.class-0 { border-color: #c1002b; }
-.class-1 { border-color: #009ee0; }
-.class-2 { border-color: #f29400; }
-
-span.more:before {
-  content: "…";
-  padding-left: 2pt;
-  padding-right: 2pt;
-}
-
-/* active view */
-ol > li.active {
-  text-align: left;
-  width: auto;
-  cursor: normal;
-  white-space: wrap;
-  height: auto;
-  border-width: 2px;
-  background-color: #f4eebb;
-  position: relative;
-}
-
-ol > li.active > div > div.snippet {
-  margin: 5pt 10pt;
-  margin-right: 3em;
-}
-
-ol > li.active > div {
-  min-height: 42pt;
-}
-
-ol > li.active > div > div.snippet > span {
-  line-height: 1.4em;
-  width: auto;
-}
-
-ol > li.active > div > div.snippet > span.context-left {
-  margin-left: 0;
-  display: inline;
-  overflow: visible;
-  text-align: left;
-  width: auto;
-}
-
-/* Korap-Actions: */
-ol > li ul.action {
-  display: none;
-}
-
-ol > li ul.action li {
-  cursor: pointer;
-  color: white;
-  text-decoration: none;
-}
-
-ol > li.active ul.action {
-  background-color: #ffa500;
-  font-size: 12pt;
-  color: white;
-  text-shadow: none;
-  display: block;
-  margin: 0;
-  padding: 0;
-  z-index: 4;
-  text-indent: 0;
-  list-style-type: none;
-  list-style-position: inline;
-}
-
-/*
-ol > li.active ul.action.right {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  height: 1.2em;
-}
-
-ol > li.active ul.action.right li {
-  float: left;
-  padding-left: 1em;
-}
-*/
-
-ol > li.active ul.action.right {
-  position: absolute;
-  float: right;
-  text-align: center;
-  padding: 0pt 3pt;
-  height: 100%;
-  width: 1.2em;;
-  right: 0;
-  top: 0;
-}
-
-ol > li:not(.active) p {
-  display: none;
-}
-
-ol > li.active p {
-  background-color: #ffa500;
-  color: white;
-  text-shadow: none;
-  padding: 3pt 10pt;
-  margin: 0pt;
-  width: 100%;
-  bottom: 0;
-  z-index: 300;
-}
\ No newline at end of file
diff --git a/public/sass/.sass-cache/600d657f6ac2358f30ba6bc0ab4cd7ffb6194ced/flymake10181orG.rbc b/public/sass/.sass-cache/600d657f6ac2358f30ba6bc0ab4cd7ffb6194ced/flymake10181orG.rbc
new file mode 100644
index 0000000..6c2e1c5
--- /dev/null
+++ b/public/sass/.sass-cache/600d657f6ac2358f30ba6bc0ab4cd7ffb6194ced/flymake10181orG.rbc
Binary files differ
diff --git a/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc
new file mode 100644
index 0000000..da6a64a
--- /dev/null
+++ b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc
Binary files differ
diff --git a/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/kwic-4.0.scssc b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/kwic-4.0.scssc
new file mode 100644
index 0000000..a3aab1f
--- /dev/null
+++ b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/kwic-4.0.scssc
Binary files differ
diff --git a/public/sass/colors.scss b/public/sass/colors.scss
new file mode 100644
index 0000000..bee457c
--- /dev/null
+++ b/public/sass/colors.scss
@@ -0,0 +1,23 @@
+$light-orange:  #f4eebb;
+$dark-orange:   #ffa500;
+$darker-orange: #ff8000;
+$darkest-orange: darken($dark-orange, 20%);
+$dark-green:    #496000;
+$light-green:   #7ba400;
+$total-results: $light-green; // #c1002b;
+
+$light-shadow: 1px 1px rgba(255, 255, 255, 0.9);
+
+$kwic-border:       #999;
+$kwic-line-noneven: #f5f5f5;
+$kwic-line-even:    #ddd;
+$kwic-match-color:  #333;
+$kwic-match-shadow: $light-shadow;
+
+$kwic-highlight-0: #c1002b;
+$kwic-highlight-1: #009ee0;
+$kwic-highlight-2: #f29400;
+
+$pagination-bg: #ddd;
+$pagination-border: $kwic-border;
+$pagination-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
\ No newline at end of file
diff --git a/public/sass/hint.scss b/public/sass/hint.scss
new file mode 100644
index 0000000..c19b508
--- /dev/null
+++ b/public/sass/hint.scss
@@ -0,0 +1,52 @@
+@charset "utf-8";
+
+@import "colors";
+
+#searchMirror {
+  position: absolute;
+  margin-top: 1px;
+  white-space: nowrap;
+  overflow: show;
+  height: 0;
+  > span {
+    opacity: 0;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  > ul {
+    color: white;
+    margin: 0;
+    text-indent: 0;
+    display: inline-block;
+    background-color: $dark-green;
+    opacity: 0;
+    padding: 0;
+    padding-top: 5px;
+    padding-bottom: 10px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    > li {
+      list-style-type: none;
+      list-style-position: outside;
+      padding: 3pt 10pt;
+      text-shadow: none;
+      white-space: normal;
+      > span {
+        float: right;
+        margin-left: 30pt;
+        text-align: right;
+        font-style: italic;
+        color: #7ba400;
+      }
+      /* like sidebar ul li.active */
+      &.active {
+        background-color: #7ba400;
+        text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+        > span {
+          color: #496000;
+          text-shadow: none;
+        }
+      }
+    }
+  }
+}
diff --git a/public/sass/kwic-4.0.scss b/public/sass/kwic-4.0.scss
new file mode 100644
index 0000000..8a16289
--- /dev/null
+++ b/public/sass/kwic-4.0.scss
@@ -0,0 +1,220 @@
+@charset "utf-8";
+
+$fonts: verdana, tahoma, arial;
+
+@import "colors";
+
+@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+ */
+}
+
+
+/*
+  Search for: [orth=erstens]
+*/
+
+ol {
+  width: auto;
+  overflow: hidden;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+  border: 1px solid $kwic-border;
+  font: {
+    family: $fonts;
+    size: 10pt;
+  }
+  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
+  > li {
+    border: {
+      style: solid;
+      color: #ffa500;
+      width: 0;
+    }
+    &:not(.active):not(:target) {
+      width: 99999%;
+      margin-left: -49999.5%;
+      background-color: $kwic-line-noneven;
+      overflow: hidden;
+      white-space: no-wrap;
+      cursor: pointer;
+      padding: 5pt 0 6pt 0;
+      text-indent: 0;
+      &:nth-of-type(even) {
+        background-color: $kwic-line-even;
+      }
+    }
+    > div {
+      > div.snippet > span {
+        white-space: no-wrap !important;
+        > span {
+          white-space: no-wrap !important;
+        }
+        color: #666;
+        &.match {
+          font-weight: bold;
+          text-shadow: $kwic-match-shadow;
+          color: $kwic-match-color;
+          padding-left: 4pt;
+          padding-right: 2pt;
+        }
+      }
+    }
+  }
+}
+
+ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.left {
+  display: inline-block;
+  text-align: right;
+  width: 50.046%;
+}
+
+ol.free-aligned > 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.free-aligned > li > div > div.snippet > span.right {
+  text-align: left;
+}
+
+ol.left-aligned > li > div > div.snippet > span.context-left {
+  display: inline-block;
+  text-align: right;
+  width: 50.01%;
+}
+
+ol.right-aligned {
+  text-align: right;
+  > li:not(.active):not(:target) > div > div.snippet > span.context-right {
+    display: inline-block;
+    text-align: left;
+    width: 49.915%;
+  }
+}
+
+/* Highlights */
+em, em.level-0 {
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  padding-bottom: 0px;
+  font-style: normal;
+}
+
+em > em, em.level-1 {
+  padding-bottom: 3px;
+}
+
+em > em > em, em.level-2 {
+  padding-bottom: 6px;
+}
+
+.class-0 { border-color: $kwic-highlight-0; }
+.class-1 { border-color: $kwic-highlight-1; }
+.class-2 { border-color: $kwic-highlight-2; }
+
+
+span.more:before {
+  content: "…";
+  padding-left: 2pt;
+  padding-right: 2pt;
+}
+
+/* active view */
+ol > li.active,
+ol > 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 */
+ol > li {
+  ul.action {
+    display: none;
+    > li {
+      cursor: pointer;
+      color: white;
+      text-decoration: none;
+    }
+  }
+  /* active actions */
+  &.active, &:target {
+    ul.action {
+      background-color: $dark-orange;
+      font-size: 12pt;
+      color: white;
+      text: {
+        shadow: none;
+        indent: 0;
+      }
+      display: block;
+      margin: 0;
+      padding: 0;
+      z-index: 4;
+      list-style: {
+        type: none;
+        position: inline;
+      }
+      &.right {
+        position: absolute;
+        float: right;
+        text-align: center;
+        padding: 0pt 3pt;
+        height: 100%;
+        width: 1.2em;;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+  &:not(.active):not(:target) p {
+    display: none;
+  }
+  &.active p, &:target p {
+    @include box-sizing-box();
+    padding-right: 2em;
+    background-color: $dark-orange;
+    color: white;
+    text-shadow: none;
+    padding: 3pt 10pt;
+    margin: 0pt;
+    width: 100%;
+    bottom: 0;
+    z-index: 300;
+  }
+}
+
+
diff --git a/public/sass/pagination.scss b/public/sass/pagination.scss
new file mode 100644
index 0000000..d847f6f
--- /dev/null
+++ b/public/sass/pagination.scss
@@ -0,0 +1,78 @@
+@import "colors";
+
+/*
+<div id="pagination">
+  <a rel="prev"><span><i class="fa fa-caret-left"></i></span></a>
+  <a rel="self"><span>1</span></a>
+  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span>2</span></a>
+  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=3"><span>3</span></a>
+  <span><i class="fa fa-ellipsis-h"></i></span>
+  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=67"><span>67</span></a>
+  <a rel="next" href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span><i class="fa fa-caret-right"></i></span></a>
+</div>
+*/
+
+#pagination {
+  position: fixed;
+  right: 20px;
+  bottom: 10px;
+  z-index: 400;
+  span {
+    display: inline-block;
+    background-color: $pagination-bg;
+    height: 1.5em;
+    line-height: 1.5em;
+    padding: {
+      left: .4em;
+      right: .4em;
+    }
+    text-align: center;
+    border: {
+      top-width: 2px;
+      top-style: solid;
+      bottom-width:  2px;
+      bottom-style: solid;
+      color: $pagination-border;
+    }
+    box-shadow: $pagination-box-shadow;
+  }
+  a {
+    text-shadow: $light-shadow;
+    &[rel=self] span {
+      border: {
+	color: $dark-orange;
+	left-style: solid;
+	right-style: solid;
+	left-width: 2px;
+	right-width: 2px;
+      }
+      background-color: $light-orange;
+      color: $darkest-orange;
+    }
+    &[rel=next] span {
+      border: {
+	right-width: 2px;
+	right-style: solid;
+	top-right-radius: 12px;
+	bottom-right-radius: 12px;
+      }
+    }
+    &[rel=prev] span {
+      border: {
+	left-width: 2px;
+	left-style: solid;
+	top-left-radius: 12px;
+	bottom-left-radius: 12px;
+      }      
+    }
+    &[href] {
+      color: $light-green;
+      span:hover {
+        background-color: $light-green;
+        border-color: $dark-green;
+        color: $dark-green;
+        text-shadow: none;
+      }
+    }
+  }
+}
diff --git a/public/sass/query.scss b/public/sass/query.scss
new file mode 100644
index 0000000..591f458
--- /dev/null
+++ b/public/sass/query.scss
@@ -0,0 +1,48 @@
+@charset "utf-8";
+
+@import "colors";
+
+/* code data - clickable */
+pre.query {
+  overflow-x: hidden;
+  background-color: $light-orange;
+  white-space: normal;
+  cursor: pointer;
+  display: block;
+  font: {
+    size: 11pt;
+    weight: bold;
+  }
+  padding: 2pt;
+  margin: 0;
+  margin-bottom: 5pt;
+  color: $darkest-orange;
+  text-shadow: $light-shadow;
+  border: {
+    color: $dark-orange;
+    style: solid;
+    width: 3px;
+    radius: 6px;
+  }
+  code {
+    white-space: pre;
+    display: block;
+    padding: 2px 5px;
+    margin: 0;
+  }
+  &.serial {
+    overflow-x: auto;
+    &:not(.active) {
+      overflow-x: hidden;
+      > span {
+        padding: 2pt;
+      }
+      code {
+        display: none;
+      }
+    }
+    &.active > span {
+      display: none;
+    }
+  }
+}
diff --git a/public/responsive.css b/public/sass/responsive.scss
similarity index 67%
rename from public/responsive.css
rename to public/sass/responsive.scss
index 65096d3..ee5b4fc 100644
--- a/public/responsive.css
+++ b/public/sass/responsive.scss
@@ -18,22 +18,24 @@
   border-width: 0;
   padding: 0;
   font-size: 9pt;
-}
-
-#tutorial > iframe {
-  border-radius: 0;
+  > iframe {
+    border-radius: 0;
+  }
 }
 
 #top {
   padding: 0 0 0 0;
   height: 80px;
-}
-
-#top h1 {
-  margin: 5px;
-  height: 30px;
-  width: 80px;
-  background-size: 98% auto;
+  h1 {
+    margin: 5px;
+    height: 30px;
+    width: 80px;
+    background-size: 98% auto;
+  }
+  /* Temporary */
+  form button {
+    display: none;
+  }
 }
 
 #sidebar {
@@ -41,8 +43,10 @@
 }
 
 #search {
-  margin-left: 0;
-  margin-right: 0;
+  margin {
+    left: 0;
+    right: 0;
+  }
 }
 
 form {
@@ -64,21 +68,14 @@
   right: 7px;
 }
 
-/* Temporary */
-#top form button {
-  display: none;
-}
-
 #search > ol > li {
   font-size: 9pt;
-}
-
-#search > ol > li:not(.active) {
-  padding: 4pt 0 5pt 0;
-}
-
-#search > ol > li.active {
-  padding: 0 0 0 0;
+  &:not(.active) {
+    padding: 4pt 0 5pt 0;
+  }
+  &.active {
+    padding: 0 0 0 0;
+  }
 }
 
 code.query.serial {
diff --git a/public/sass/sidebar.scss b/public/sass/sidebar.scss
new file mode 100644
index 0000000..05aa942
--- /dev/null
+++ b/public/sass/sidebar.scss
@@ -0,0 +1,99 @@
+@import "colors";
+
+#sidebar {
+  color: #fff;
+  text-shadow: none;
+  transition: all .3s ease-in-out;
+  position: fixed;
+  z-index: 500;
+  height: 105%;
+  margin-top: -10px;
+  background-color: #496000;
+  width: 230px;
+  margin-left: -215px;
+  padding-top: 80px;
+  left: 0;
+  top: 0;
+  &.active {
+    box-shadow: 2px 2px 5px darken($dark-green, 15%);
+    margin-left: 0px;
+    left: 0;
+    top: 0;
+  }
+  > * {
+    opacity: 0;
+// TODO
+    transition: {
+      property: opacity;
+      duration: .3s;
+    }
+  }
+  &.active {
+    > * {
+      opacity: 1;
+    }
+    > i.fa-bars {
+      opacity: 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;
+  }
+  h2 {
+    font: {
+      size: 100%;
+      weight: bold;
+    }
+    text-align: center;
+    padding: 0;
+    margin: 0 0 5pt 0;
+  }
+  ul {
+    list-style-type: none;
+    margin: 0;
+    font-size: 10pt;
+    text-indent: 0;
+    padding: 0;
+    li {
+      padding: 4pt 10pt;
+      h3 {
+        font: {
+	  weight: bold;
+	  size: 100%;
+	}	  
+	padding: 0;
+	margin: 0;
+      }
+      &.active {
+	background-color: $light-green;
+	text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+	h3 {
+	  margin-bottom: 2pt;
+	  padding-bottom: 2pt;
+	  border-bottom: 1px solid black;
+	}
+      }
+    }
+  }
+  dl.info {
+    font-size: 9pt;
+    padding: 0 10pt;
+    > dt {
+      font-weight: bold;
+      float: left;
+    }
+    > dd {
+      text-align: right;
+    }
+  }
+}
diff --git a/public/sass/style.scss b/public/sass/style.scss
new file mode 100644
index 0000000..f42070a
--- /dev/null
+++ b/public/sass/style.scss
@@ -0,0 +1,289 @@
+@charset "utf-8";
+
+@import "colors";
+
+@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+ */
+}
+
+@mixin no-appearance() {
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+}
+
+body, html, select {
+  color: #666;
+  font-family: verdana, tahoma, arial;
+  margin: 0;
+}
+
+body, html, #searchbar button {
+  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#top {
+  background-color: #7ba400;
+  @include box-sizing-box();
+  padding: 8px;
+  padding-bottom: 0;
+  position: relative;
+  font-size: 10pt;
+  color: white;
+  text-shadow: none;
+  button {
+    color: $light-green;
+    background-color: transparent;
+    border-width: 0;
+    font-weight: normal;
+    margin: 0;
+    padding: 0;
+  }
+  form {
+    display: block;
+    padding-left: 230px;
+    margin: 0px;
+    position: relative;
+    > div.select, > span.location {
+      line-height: 1.8em;
+      border: {
+	width: 0;
+	bottom-width: 3px;
+	style: solid;
+	color: transparent;
+      }
+      display: inline-block;
+      &:hover {
+	border-color: $dark-green;
+      }
+    }
+    > span.location {
+      padding: 0 2px;
+      cursor:pointer;
+    }
+    > div.select {      
+      position: relative;
+      padding: 0;
+      margin: 0;
+      &:after {
+	content: "";
+	font-family: FontAwesome;
+	font-style: normal;
+	font-weight: normal;
+	right: 0px;
+	top: 0px;
+	width: 18px;
+	text-align: center;
+	position: absolute;
+	pointer-events: none;
+	background-color: $light-green;
+      }
+      > * {
+	cursor: pointer;
+	padding: 0pt;
+	line-height: 1.8em;
+	outline: none;
+      }
+    }
+  }
+}
+
+
+
+/*
+http://cssdeck.com/labs/styling-select-box-with-css3
+*/
+
+#ql-field {
+  margin: 0;
+  outline: none;
+  border: none;
+  display: inline-block;
+  position: relative;
+  color: white;
+  background-color: transparent;
+  -webkit-appearance: none;
+  border-width: 0;
+  border-radius: 0;
+  @include no-appearance();
+  &:checked {
+    outline: none;
+  }
+  > option {
+    padding: 0pt 2pt;
+    outline: none;
+  }
+}
+
+/* funny hack */
+#ql-field:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 white;
+}
+
+
+#searchbar {
+  position: relative;
+  @include box-sizing-box();
+  width: 100%;
+  padding-right: 60px;
+  button {
+    position: absolute;
+    font-weight: normal;
+    background-color: $pagination-bg;
+    padding: 0;
+    height: 100%;
+    top: 0;
+    right: 30px;
+    width: 30px;
+    border: {
+      top-width: 2px;
+      top-style: solid;
+      bottom-width:  2px;
+      bottom-style: solid;
+      color: white;
+    }
+    &:hover {
+      cursor:pointer;
+      color: white;
+    }
+    &:first-of-type {
+      border: {
+	left-width: 1px;
+	left-style: solid;
+	left-color: $pagination-border;
+      }
+    }
+    &:last-of-type {
+      @include box-sizing-box();
+      border: {
+	right-width: 2px;
+	right-style: solid;
+	top-right-radius: 12px;
+	bottom-right-radius: 12px;
+      }
+    }
+    &:hover {
+      background-color: $light-green;
+      border-color: $dark-green;
+      color: $dark-green;
+      text-shadow: none;
+    }
+  }
+  button + button {
+    right: 0;
+  }
+}
+
+#q-field {
+  border: 2px solid white;
+  padding: 3px;
+  font-size: 11pt;
+  width: 100%;
+  margin: 0;
+  @include box-sizing-box();
+  display: block;
+}
+
+#button-right {
+  display: inline-block;
+  float: right;
+  color: white;
+  line-height: 2em;
+  > button {
+    border-bottom: 3px solid transparent;
+    font-size: 120%;
+    cursor: pointer;
+    color: white;
+    line-height: 14pt;
+    padding: 0;
+    &:hover {
+      border-bottom-color: $dark-green;
+    }
+  }
+}
+/*
+#button-right {
+  position: absolute;
+  @include box-sizing-box();
+  right: 0px;
+  bottom: 0px;
+  height: 2em;
+  width: 6em;
+  > button {
+    cursor: pointer;
+    color: white;
+    right: 5px;
+    width: 2em;
+    bottom: 0;
+    &:hover {
+      border-bottom: 2px solid green;
+    }
+    &[name=alignment] {
+    }
+    &[name=tutorial] {
+    }
+  }
+}
+*/
+
+p.found {
+  font-size: 10pt;
+  padding: 0;
+  margin: 0;
+  text-align: right;
+}
+
+#total-results {
+  color: $total-results;
+  font-weight: bold;
+}
+
+/* KorAP header logo */
+h1 {
+  margin: 0;
+  margin-left:15px;
+  left: 0;
+  top: 0;
+  position: absolute;
+  width: 7.8em;
+  height: 2.6em;
+  z-index: 999;
+  background: {
+    repeat: no-repeat;
+    position: center center;
+    size: 65%;
+    image: url('/img/korap-logo-solo.svg');
+  }
+  span {
+    margin-left: -3000px;
+  }
+}
+
+#search {
+  margin-bottom: 44px;
+  &.match {
+    margin-top: 14pt;
+  }
+}
+
+main {
+  margin: {
+    left: 30px;
+    right: 14px;
+  }
+  &.embedded {
+    margin: {
+      left: 14px;
+      right: 14px;
+    }
+  }
+}
+
diff --git a/public/sass/table.scss b/public/sass/table.scss
new file mode 100644
index 0000000..48f1799
--- /dev/null
+++ b/public/sass/table.scss
@@ -0,0 +1,64 @@
+@charset "utf-8";
+
+ol > li:not(.active) .tokenInfo {
+  display: none;
+}
+
+.tokenInfo {
+  display: none;
+  background-color: #ffa500;
+  margin-right: 26px;
+  overflow: auto;
+  &.active {
+    display: block;
+  }
+  table {
+    font-size: 10pt;
+    padding: 3pt 10pt; /* wie in ol > li.active p */
+    /* All cells */
+    > tr {
+      > * {
+	padding: 1pt 6pt;
+	vertical-align: top;
+      }
+      > td {
+	text-align: center;
+	background-color: #f4eebb;
+      }
+      /* header */
+      > th{
+	&:not([rowspan]) {
+	  color: white;
+	  text-shadow: none;
+	}
+	&[rowspan]:first-child {
+	  background-color: #f4eebb;
+	}
+	span.switchSort {
+	  cursor: pointer;
+	  position: absolute;
+	  display: inline-block;
+	  right: 0;
+	  margin-right: -11pt;
+	  width: 20pt;
+	}
+      }
+      &:first-child th {
+	text-align: center;
+	background-color: #ff8000;
+	/* first column header */
+	&:first-child {
+	  position: relative;
+	  padding-right: 20pt;
+	  padding-left: 5pt;
+	}
+	/* second column header */
+	&:nth-child(2) {
+	  text-align: left;
+	  padding-left: 20pt;
+	  padding-right: 5pt;
+	}
+      }
+    }
+  }
+}
diff --git a/public/sass/tutorial.scss b/public/sass/tutorial.scss
new file mode 100644
index 0000000..80e92a1
--- /dev/null
+++ b/public/sass/tutorial.scss
@@ -0,0 +1,49 @@
+@import "colors";
+
+#tutorial {
+  position: fixed;
+  display: block;
+  z-index: 9999;
+  background-color: $dark-green;
+  border-radius: 15px;
+  padding: 5px;
+  top:    2%;
+  bottom: 2%;
+  left:   5%;
+  right:  5%;
+  &:not(.active) {
+    display: none;
+  }
+  &.active {
+    display: block;
+  }
+  > i,
+  > a > i {
+    font-size: 20pt;
+    color: $dark-green;
+    position: absolute;
+    z-index: 100;
+    top: 10pt;
+    right: 20pt;
+    cursor: pointer;
+  }
+  > a > i {
+    right: 40pt;
+  }
+  iframe {
+    width: 100%;
+    min-height: 100%;
+    border: {
+      width: 0;
+      radius: 10px;
+    }
+    background: {
+      image: url('img/crab.svg');
+      size: 10%;
+      repeat: no-repeat;
+      position: center center;
+      color: white;
+    }
+  }
+}
+
diff --git a/public/style.css b/public/style.css
deleted file mode 100644
index 3964bbb..0000000
--- a/public/style.css
+++ /dev/null
@@ -1,329 +0,0 @@
-@charset "utf-8";
-
-body, html {
-  color: #666;
-  font-family: verdana, tahoma, arial;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
-  margin: 0;
-}
-
-a {
-  color: inherit;
-}
-
-#top {
-  background-color: #7ba400;
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
-  padding: 0pt;
-  padding-top: 5px;
-  position: relative;
-  height: 70px;
-  padding-left: 30px;
-}
-
-#q-field {
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
-}
-
-#button-right {
-  position: absolute;
-  right: 15px;
-  top: 15px;
-}
-
-input, button {
-  border: 2px solid white;
-  padding: 3px;
-  font-size: 11pt;
-}
-
-form {
-  margin-left: 235px;
-  margin-top:0px
-}
-
-form input[type=search] {
-  width: 50%;
-}
-
-a {
-  text-decoration: none;
-}
-
-p.found {
-  font-size: 10pt;
-  padding: 0;
-  margin: 0;
-}
-
-p.found {
-  text-align: right;
-}
-
-#pagination {
-  position: fixed;
-  right: 20px;
-  bottom: 10px;
-  z-index: 800;
-}
-
-#pagination span {
-  display: inline-block;
-  background-color: #ddd;
-  margin: 2pt;
-  height: 1.5em;
-  padding-left: .5em;
-  padding-right: .5em;
-  line-height: 1.5em;
-  text-align: center;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #999;
-  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-}
-
-#pagination a {
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-}
-
-#pagination a[rel=self] span {
-  border-color: #ffa500;
-  background-color: #f4eebb;
-  color: #ff8000;
-}
-
-#pagination a[href] {
-  color: #7ba400;
-}
-
-#pagination a[href] span:hover {
-  background-color: #7ba400;
-  border-color: #496000;
-  color: #496000;
-  text-shadow: none;
-}
-
-#total-results {
-  color: #c1002b;
-}
-
-code.query {
-  background-color: #f4eebb;
-  display: block;
-  border-style: solid;
-  border-color: #ffa500;
-  font-size: 12pt;
-  padding: 2pt;
-  color: #ff8000;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-  border-width: 2px;
-  margin: 0;
-  margin-bottom: 5pt;
-  cursor: pointer;
-}
-
-code.query.serial:not(.active) span {
-  padding: 2pt;
-}
-
-code.query pre {
-  display: block;
-  padding: 2px 5px;
-  margin: 0;
-}
-
-code.query.serial:not(.active) pre {
-  display: none;
-}
-
-code.query.serial.active span {
-  display: none;
-}
-
-#sidebar.active {
-  margin-left: 0px;
-  left: 0;
-  top: 0;
-}
-
-#sidebar {
-  color: #fff;
-  text-shadow: none;
-  transition: all .3s ease-in-out;
-  position: fixed;
-  z-index: 500;
-  height: 100%;
-  background-color: #496000;
-  width: 260px;
-  margin-left: -245px;
-  left: 0;
-  top: 0;
-}
-
-#sidebar > * {
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: .3s;
-}
-
-#sidebar: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;
-}
-
-#sidebar.active > * {
-  opacity: 1;
-}
-
-#sidebar.active > i.fa-bars {
-  opacity: 0;
-}
-
-#sidebar h2 {
-  font-size: 100%;
-  font-weight: bold;
-  text-align: center;
-  padding: 0;
-  margin: 0 0 5pt 0;
-}
-
-#sidebar ul {
-  list-style-type: none;
-  margin: 0;
-  font-size: 10pt;
-  text-indent: 0;
-  padding: 0;
-}
-
-#sidebar ul li {
-  padding: 4pt 10pt;
-}
-
-#sidebar ul li h3 {
-  font-weight: bold;
-  font-size: 100%;
-  padding: 0;
-  margin: 0;
-}
-
-#sidebar ul li.active h3 {
-  margin-bottom: 2pt;
-  padding-bottom: 2pt;
-  border-bottom: 1px solid black;
-}
-
-#sidebar ul li.active {
-  background-color: #7ba400;
-  text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-dl.info {
-  font-size: 9pt;
-  padding: 0 10pt;
-}
-
-dl.info dt {
-  font-weight: bold;
-  float: left;
-}
-
-dl.info dd {
-  text-align: right;
-}
-
-#tutorial {
-  position: fixed;
-  display: block;
-  z-index: 9999;
-  background-color: #496000;
-  border-radius: 15px;
-  padding: 5px;
-  top: 2%;
-  bottom: 2%;
-  left: 5%;
-  right: 5%;
-}
-
-#tutorial:not(.active) {
-  display: none;
-}
-
-#tutorial.active {
-  display: block;
-}
-
-#tutorial > i,
-#tutorial > a > i {
-  font-size: 20pt;
-  color: #496000;
-  position: absolute;
-  z-index: 100;
-  top: 10pt;
-  right: 20pt;
-  cursor: pointer;
-}
-
-#tutorial > a > i {
-  right: 40pt;
-}
-
-#tutorial iframe {
-  width: 100%;
-  min-height: 100%;
-  border-width: 0;
-  border-radius: 10px;
-  background-image: url('img/crab.svg');
-  background-size: 10%;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-color: white;
-}
-
-h1 {
-    margin: 0;
-    left: 0;
-    top: 0;
-    background-image: url('/img/korap-logo-solo.svg');
-    position: absolute;
-    width: 260px; /* like sidebars*/
-    height: 68px; /* like #top */
-    z-index: 999;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 65%;
-}
-
-h1 span {
-  margin-left: -3000px;
-}
-
-#search {
-  margin-bottom: 44px;
-}
-
-#search.match {
-  margin-top: 14pt;
-}
-
-main {
-  margin-left: 30px;
-  margin-right: 14px;
-}
-
-main.embedded {
-  margin-left: 14px;
-  margin-right: 14px;
-}
\ No newline at end of file
diff --git a/public/table.css b/public/table.css
deleted file mode 100644
index 4a4ac27..0000000
--- a/public/table.css
+++ /dev/null
@@ -1,77 +0,0 @@
-@charset "utf-8";
-
-ol > li:not(.active) .tokenInfo {
-  display: none;
-}
-
-.tokenInfo {
-  display: none;
-}
-
-.tokenInfo.active {
-  display: block;
-}
-
-.tokenInfo {
-  background-color: #ffa500;
-  margin-right: 26px;
-  overflow: auto;
-}
-
-.tokenInfo table {
-  font-size: 10pt;
-  padding: 3pt 10pt; /* wie in ol > li.active p */
-}
-
-.tokenInfo table tr {
-}
-
-/* All cells */
-.tokenInfo table tr > * {
-  padding: 1pt 6pt;
-  vertical-align: top;
-}
-
-.tokenInfo table tr td {
-  text-align: center;
-  background-color: #f4eebb;
-}
-
-/* header */
-.tokenInfo table tr th:not([rowspan]) {
-  color: white;
-  text-shadow: none;
-}
-
-.tokenInfo table tr:first-child th {
-  text-align: center;
-  background-color: #ff8000;
-}
-
-/* first column header */
-.tokenInfo table tr:first-child th:first-child {
-  position: relative;
-  padding-right: 20pt;
-  padding-left: 5pt;
-}
-
-/* second column header */
-.tokenInfo table tr:first-child th:nth-child(2) {
-  text-align: left;
-  padding-left: 20pt;
-  padding-right: 5pt;
-}
-
-.tokenInfo th[rowspan]:first-child {
-  background-color: #f4eebb;
-}
-
-.tokenInfo table th span.switchSort {
-  cursor: pointer;
-  position: absolute;
-  display: inline-block;
-  right: 0;
-  margin-right: -11pt;
-  width: 20pt;
-};
-
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 36db1fb..492acdf 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -3,7 +3,8 @@
 %= include 'partial/header'
   <body>
 
-% my $search_route = url_for;
+% my $location;
+% my $search_route;
 % unless (current_route 'tutorial') {
 <div id="tutorial">
 %   my $tut_page = url_for(session('tutorial') || 'tutorial');
@@ -16,6 +17,22 @@
   <iframe src="about:blank"
           data-src="<%= $tut_page->query([embedded => 1]) %>"></iframe>
 </div>
+%   if (current_route eq 'match') {
+%     $search_route = url_for('search_corpus');
+%     $location = 'in corpus <span class="location">' . stash('corpus_id') . '</span>';
+%   }
+%   else {
+%     $search_route = url_for;
+%     if (stash('doc_id')) {
+%       $location = ' in document <span class="location">' . stash('corpus_id') . '/' . stash('doc_id') . '</span>';
+%     }
+%     elsif (stash('corpus_id')) {
+%       $location = ' in corpus <span class="location">' . stash('corpus_id') . '</span>';
+%     }
+%     elsif (stash('collection_id')) {
+%       $location = ' in collection <span class="location">' . stash('collection_id') . '</span>';
+%     };
+%   }
 % }
 % else {
 %   $search_route = url_for('index');
@@ -25,28 +42,35 @@
   <a href="<%= url_for 'index' %>"><h1><span>KorAP- Korpusanalyseplattform der nächsten Generation</span></h1></a>
 
 %= form_for $search_route => begin
-%= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']], id => 'ql-field'
-<br />
-%= search_field 'q', id => 'q-field', autofocus => 'autofocus'
-<button type="submit" name="action" value="ok"><i class="fa fa-search"></i></button>
+  <div id="searchbar">
+%= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => 'Find ...'
+    <button type="submit"><i class="fa fa-search"></i></button>
 %   if (stash('test_port')) {
-<button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
+    <button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
 %   };
-% end
+  </div>
+  <% if ($location) { %><%== $location %><% } %>
+  with
+  <div class="select">
+    %= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']], id => 'ql-field'
+  </div>
+
 
 <div id="button-right">
-% if (param('q')) {
-<button type="button" onclick="$('#search > ol').toggleClass('left-aligned right-aligned'); $(this).children('i').toggleClass('fa-align-right fa-align-left')"><i class="fa fa-align-right"></i></button>
-% }
 % unless (current_route 'tutorial') {
-<button type="button" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
+<button type="button" title="Tutorial" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
 % };
+% if (param('q')) {
+<button type="button" title="Alignment" onclick="$('#search > ol').toggleClass('left-aligned right-aligned'); $(this).children('i').toggleClass('fa-align-right fa-align-left')"><i class="fa fa-align-right"></i></button>
+% }
 </div>
 
+% end
+
 </div>
 
 %= content 'sidebar' => begin
-<div id="sidebar" style="padding-top: 90px">
+<div id="sidebar">
 %= include 'collections'
   <i class="fa fa-bars"></i>
 </div>
diff --git a/templates/match.html.ep b/templates/match.html.ep
index 2ec5a44..d85eeee 100644
--- a/templates/match.html.ep
+++ b/templates/match.html.ep
@@ -2,6 +2,7 @@
 <li data-corpus-id="<%= $match->{corpusID} %>"
     data-doc-id="<%= $match->{docID} %>"
     data-match-id="<%= $match->{ID} %>"
+    id="<%= $match->{ID} %>"
 <% if (current_route eq 'match') { %>class="active"<% } %>
     >
   <div>
@@ -16,8 +17,10 @@
   </p>
   <ul class="action right">
 % if (current_route ne 'match') {
-    <li class="close" title="Close"><i class="fa fa-toggle-up"></i></li>
+    <li class="close" title="Close"><a href="#"><i class="fa fa-toggle-up"></a></i></li>
 %#    <li class="open" title="Open in new tab"><%= link_to 'match', { corpus_id => $match->{corpusID}, doc_id => $match->{docID}, match_id => $match->{ID} }, target => '_blank', begin %><i class="fa fa-external-link-square"></i><% end %></li>
+    <li class="open" title="Open in new tab"><a href="#<%= $match->{ID} %>" 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>
 %#    <li title="Tree Visualizations"><i class="fa fa-sitemap"></i></li>
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 542ef30..850e77b 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -1,14 +1,7 @@
 <head>
   <title><%= title %></title>
-%#= asset 'korap.css'
-%= stylesheet '/style.css'
-%= stylesheet '/hint.css'
-%= stylesheet '/table.css'
-%= stylesheet '/kwic-4.0.css'
-%= stylesheet '/fontawesome/font-awesome.min.css'
-%= stylesheet '/responsive.css', media => '(orientation: portrait) and (max-device-width: 800px)'
-%= javascript '/jquery-2.0.0.min.js'
-%= javascript '/translateTable.js'
-%= javascript '/hint.js'
+%= asset 'korap.css'
+%= asset 'korap.js'
   <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width;initial-scale=1.0;" />
 </head>
diff --git a/templates/partial/javascript.html.ep b/templates/partial/javascript.html.ep
index 3c44167..81c7519 100644
--- a/templates/partial/javascript.html.ep
+++ b/templates/partial/javascript.html.ep
@@ -81,8 +81,12 @@
   closeTutorial();
 };
 
-$("code.query.serial, #sidebar").on("click", function () {
+$("#sidebar").on("click", function () {
   $(this).toggleClass('active');
 });
 
+$("span.location").on("click", function () {
+  $("#sidebar").toggleClass('active');
+});
+
 % end
diff --git a/templates/query.html.ep b/templates/query.html.ep
index c6c17d5..0eebd0c 100644
--- a/templates/query.html.ep
+++ b/templates/query.html.ep
@@ -1,11 +1,23 @@
 % use JSON::XS;
 
 % if (stash('search.query') && stash('test_port')) {
-%   state $json = JSON::XS->new->allow_blessed->pretty;
-<code class="query serial<% if (param('action') eq 'inspect') { %> active<% } %>">
+%   my $action;
+%   if (param('action') && param('action') eq 'inspect') {
+%     $action = ' active" style="cursor: default';
+%   };
+%   state $json = JSON::XS->new->allow_blessed->pretty->canonical(1);
+<pre class="query serial<%== $action // '' %>">
   <span>JSON-LD Serialization for <%= param 'q' %> (<%= param 'ql' %>)</span>
-  <pre>
+  <code>
 <%= $json->encode(stash('search.query')) =%>
-  </pre>
-</code>
+  </code>
+</pre>
+%= javascript begin
+hljs.initHighlightingOnLoad();
+%   unless ($action) {
+$("pre.query.serial").on("click", function () {
+  $(this).toggleClass('active');
+});
+%   };
+% end
 % };
diff --git a/templates/query_info.html.ep b/templates/query_info.html.ep
index c9a5167..02710ce 100644
--- a/templates/query_info.html.ep
+++ b/templates/query_info.html.ep
@@ -1,3 +1,4 @@
 % content main => begin
+<p class="found">&nbsp;</p>
 %= include 'query'
 % end
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 92aadce..0cc4a90 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -15,6 +15,7 @@
 %= include 'query'
 %     };
 
+% unless (stash('search.totalResults') == 0) {
 <div id="search">
 <ol class="left-aligned">
 %=    search_hits begin
@@ -22,6 +23,7 @@
 %     end
 </ol>
 </div>
+% };
 
 %   end
 % end
diff --git a/templates/tutorial.html.ep b/templates/tutorial.html.ep
index b7d280e..c2f7c8a 100644
--- a/templates/tutorial.html.ep
+++ b/templates/tutorial.html.ep
@@ -13,26 +13,33 @@
   <li>How to use Poliqarp+ QL?</li>
   <li>How to use Cosmas-II QL?</li>
   <li>How to use CQL?</li>
+  <li>API</li>
+  <li>Search</li>
 </ul>
 -->
 
-<section id="intro">
-<h3>Introduction</h3>
-<p>This is a Tutorial to KorAP. It may be maintained separately (as a Wiki?) and
-has some nice features - like embedded example queries - just click on the queries below:</p>
+<section name="intro">
+<h3>Example Queries</h3>
+%# <p>This is a Tutorial to KorAP. It may be maintained separately (as a Wiki?) and has some nice features - like embedded example queries - just click on the queries below:</p>
 
+<p><strong>Poliqarp</strong>: Find all occurrences of the lemma &quot;baum&quot; as annotated by the default foundry.</p>
 %= korap_tut_query poliqarp => '[base=baum]'
 
+<p><strong>Cosmas-II</strong>: Find all occurrences of the words &quot;der&quot; and &quot;Baum&quot;, in case they are in a maximum distance of 5 tokens. The order is not relevant.</p>
 %= korap_tut_query cosmas2 => 'der /w5 Baum'
 
-%= korap_tut_query poliqarp => 'contains(<cnx/c=np>,[opennlp/p=KOUS])'
 
+<p><strong>Poliqarp+</strong>: Find all nominal phrases as annotated using Connexor, that contain an adverb as annotated by OpenNLP.</p>
+%= korap_tut_query poliqarp => 'contains(<cnx/c=np>,[opennlp/p=ADV])'
+
+<p><strong>Poliqarp+</strong>: Find all sentences as annotated by the base foundry that start with a sequence of one token in present tense as annotated by Connexor and the lemma &quot;der&quot; annotated by the default foundry. Highlight both terms of the sequence.</p>
 %= korap_tut_query poliqarp => 'startswith(<s>, {1:[cnx/m=PRES]}{2:[base=der]})'
 
-<p>And here is a short cheat sheet for foundries and layers</p>
+
+%# <p>And here is a short cheat sheet for foundries and layers</p>
 </section>
 
-<section id="cheatsheet">
+<section name="cheatsheet">
   <h3>Cheatsheet</h3>
   <ul>
     <li><strong>base</strong>
diff --git a/templates/tutorial/foundries.html.ep b/templates/tutorial/foundries.html.ep
new file mode 100644
index 0000000..8e2b5cc
--- /dev/null
+++ b/templates/tutorial/foundries.html.ep
@@ -0,0 +1 @@
+default foundries
diff --git a/templates/tutorial/poliqarp-plus.html.ep b/templates/tutorial/poliqarp-plus.html.ep
new file mode 100644
index 0000000..e310769
--- /dev/null
+++ b/templates/tutorial/poliqarp-plus.html.ep
@@ -0,0 +1,152 @@
+% content main => begin
+
+<h2>KorAP-Tutorial: Poliqarp+</h2>
+
+<section name="segments">
+<h3>Simple Segments</h3>
+
+<p>The atomic elements of Poliqarp queries are segments. Most of the time segments represent words and can be simply queried:</p>
+%# footnote: In the polish national corpus, Poliqarp can join multiple segments when identifying a single word.
+
+%= korap_tut_query poliqarp => 'Baum'
+
+<p>Sequences of simple segments are expressed using a space delimiter:</p>
+
+%= korap_tut_query poliqarp => 'der Baum'
+
+<p>Simple segments always refer to the surface form of a word. To search for surface forms without case sensitivity, you can use the <code>/i</code> flag.</p>
+
+%= korap_tut_query poliqarp => 'laufen/i'
+
+<p>The query above will find all occurrences of <code>laufen</code> irrespective of the capitalization of letters, so <code>wir laufen</code> will be find as well as <code>das Laufen</code> and even <code>&quot;GEH LAUFEN!&quot;</code>.
+</section>
+
+<section name="regexp">
+  <h3>Regular Expressions</h3>
+
+<p>Segments can also be queried using <%= link_to 'tut-regex', 'regular expressions' %> - by surrounding the segment with double quotes.</p>
+
+%= korap_tut_query poliqarp => '"l(au|ie)fen"'
+
+<p>Regular expression segments will always match the whole segment, meaning the above query will find words starting with <code>l</code> and ending with <code>n</code>. To support subqueries, you can use the <code>/x</code> flag.
+
+%= korap_tut_query poliqarp => '"l(au|ie)fen"/x', cutoff => 1
+
+<p>The <code>/x</code> will search for all segments that contain a sequence of characters the regular expression matches. That means the above query is equivalent to:</p>
+
+%= korap_tut_query poliqarp => '.*?"l(au|ie)fen.*?"', cutoff => 1
+
+<p>The <code>/x</code> flag can also be used in conjuntion with strict expressions to search for substrings:</p>
+
+%= korap_tut_query poliqarp => 'trenn/xi', cutoff => 1
+
+<p>The above query will find all occurrences of segments including the string <code>trenn</code> case insensitive, like &quot;Trennung&quot;, &quot;unzertrennlich&quot;, or &quot;Wettrennen&quot;.</p>
+
+<blockquote>
+  <p>These kinds of queries are extremely slow!</p>
+</blockquote>
+
+<p>You can again apply the <code>/i</code> flag to search case insensitive.</p>
+
+%= korap_tut_query poliqarp => '"l(au|ie)fen"/xi', cutoff => 1
+
+</section>
+
+<section name="complex">
+  <h3>Complex Segments</h3>
+
+<p>Complex segments are expressed in square brackets and contain additional information on the resource of the term under scrutiny by prividing key/value pairs, separated by a <code>=</code> symbol.</p>
+
+<p>The KorAP implementation of Poliqarp provides three special segment keys: <code>orth</code> for surface forms, <code>base</code> for lemmata, and <code>pos</code> for Part-of-Speech. The following complex query finds all surface forms of <code>Baum</code>.</p>
+
+%# There are more special keys in Poliqarp, but KorAP doesn't provide them.
+
+%= korap_tut_query poliqarp => '[orth=Baum]'
+
+<p>The query is thus equivalent to:</p>
+
+%= korap_tut_query poliqarp => 'Baum'
+
+<p>Complex segments expect simple expressions as a values, meaning that the following expression is valid as well:</p>
+
+%= korap_tut_query poliqarp => '[orth="l(au|ie)fen"/xi]', cutoff => 1
+
+<p>Another special key is <code>base</code>, refering to the lemma annotation of the <%= link_to 'tut-foundries', 'default foundry' %>. The following query finds all occurrences of segments annotated as the lemma <code>Baum</code> by the default foundry.</p>
+
+%= korap_tut_query poliqarp => '[base=Baum]'
+
+<p>The third special key is <code>pos</code>, refering to the part-of-speech annotation of the <%= link_to 'tut-foundries', 'default foundry' %>. The following query finds all attributive adjectives:</p>
+
+%= korap_tut_query poliqarp => '[pos=ADJA]'
+
+<p>Complex segments requesting further token annotations can have keys following the <code>foundry/layer</code> notation. For example to find all occurrences of <span style="color: red">plural words in the mate foundry, you can search using the following query:</span></p>
+
+%= korap_tut_query poliqarp => '[mate/m=number:pl]'
+
+</section>
+
+<section name="spans">
+<h3>Span Segments</h3>
+
+%= korap_tut_query poliqarp => '<s>'
+
+</section>
+
+<section name="paradigmatic-operators">
+<h3>Paradigmatic Operators</h3>
+%= korap_tut_query poliqarp => '[orth=bäume & base=bäumen]'
+
+%= korap_tut_query poliqarp => '[orth=bäume & base!=bäumen]'
+
+<p>The following query is equivalent</p>
+
+%= korap_tut_query poliqarp => '[orth=bäume & !base=bäumen]'
+
+%= korap_tut_query poliqarp => '[base=laufen | base=gehen]'
+
+%= korap_tut_query poliqarp => '[(base=laufen | base=gehen) & tt/pos=VVFIN]'
+
+%= korap_tut_query poliqarp => '[]'
+
+</section>
+
+<section name="syntagmatic-operators">
+<h3>Syntagmatic Operators</h3>
+
+<h4>Sequences</h4>
+
+<h4>Repetition</h4>
+%= korap_tut_query poliqarp => '[base=der][][base=Baum]'
+
+%= korap_tut_query poliqarp => '[base=der][]{2}[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][]{2,3}[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][]{2,}[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][]{,3}[base=Baum]'
+
+%= korap_tut_query poliqarp => '[base=der][tt/pos=ADJA]?[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][tt/pos=ADJA]*[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][tt/pos=ADJA]+[base=Baum]'
+
+<h4>Alternation</h4>
+
+<h4>Position Operators</h4>
+
+contains()
+startsWith()
+endsWith()
+
+<blockquote>
+  The KorAP implementation of Poliqarp also support the postfix <code>within</code> operator, that works similar to the <code>contains()</code>, but is not nestable.
+</blockquote>
+
+<h4>Class Operators</h4>
+
+{}
+focus()
+
+
+
+
+</section>
+
+% end
diff --git a/templates/tutorial/regular-expressions.html.ep b/templates/tutorial/regular-expressions.html.ep
new file mode 100644
index 0000000..1cce875
--- /dev/null
+++ b/templates/tutorial/regular-expressions.html.ep
@@ -0,0 +1,10 @@
+% contain main => begin
+<h2>KorAP-Tutorial: Regular Expressions</h2>
+
+The support for regular expressions in KorAP may be backend dependend. Below you can find the description for the respective backends.</p>
+
+<section name="lucene">
+<h3>Lucene</h3>
+</section>
+
+% end