Some canges in the tutorial section
diff --git a/Changes b/Changes
index 171e46b..185b3bb 100755
--- a/Changes
+++ b/Changes
@@ -1,3 +1,7 @@
+0.05 2014-07-15
+        - Improved tutorial support
+	- Added Exception mail system
+
 0.04 2014-07-08
         - Fixed template view
    	- Preliminary match view
diff --git a/Makefile.PL b/Makefile.PL
index 16a3cb0..f80f72c 100644
--- a/Makefile.PL
+++ b/Makefile.PL
@@ -17,6 +17,7 @@
     'Mojolicious' => '4.92',
     'Mojolicious::Plugin::TagHelpers::Pagination' => 0.01,
     'Mojolicious::Plugin::Notifications' => 0.03,
+    'Mojolicious::Plugin::MailException' => 0.18,
     'Mojolicious::Plugin::CHI' => 0.09,
     'Cache::FastMmap' => 0,
     'Mojolicious::Plugin::Number::Commify' => '0.022',
diff --git a/korap.conf b/korap.conf
index e1fb78f..fb5d9f0 100644
--- a/korap.conf
+++ b/korap.conf
@@ -29,5 +29,10 @@
     separator => '',
     current => '<span>{current}</span>',
     page => '<span>{page}</span>'
+  },
+  MailException => {
+    from => 'korap@ids-mannheim.de',
+    to => 'diewald@ids-mannheim.de',
+    subject => '[KorAP] Testbed crashed'
   }
 }
diff --git a/lib/Korap.pm b/lib/Korap.pm
index f0115ae..0dc9655 100644
--- a/lib/Korap.pm
+++ b/lib/Korap.pm
@@ -1,7 +1,7 @@
 package Korap;
 use Mojo::Base 'Mojolicious';
 
-our $VERSION = '0.04';
+our $VERSION = '0.05';
 
 # Start dev with
 # morbo -w lib -w templates -w public/sass -w public/js script/korap
@@ -36,6 +36,7 @@
   });
 
   $self->plugin('AssetPack::LibSass');
+  $self->plugin('MailException' => $self->config('MailException'));
 
   $self->asset(
     'korap.css' => (
@@ -56,6 +57,7 @@
   $self->asset(
     'korap.js' => (
       '/js/jquery-2.0.0.min.js',
+      '/js/tutorialCookie.js',
       '/js/translateTable.js',
       '/js/hint.js',
       '/js/highlight.pack.js'
@@ -76,8 +78,8 @@
   $r->get('/')->to('search#remote')->name('index');
 
   # Tutorial data
-  $r->get('/tutorial/(*tutorial)', { tutorial => 'start' })
-    ->to('tutorial#page')->name('tutorial');
+  $r->get('/tutorial')->to('tutorial#page', tutorial => 'index');
+  $r->get('/tutorial/(*tutorial)')->to('tutorial#page')->name('tutorial');
 
   # Collection data
   my $collection = $r->bridge('/collection');
diff --git a/lib/Korap/Info.pm b/lib/Korap/Info.pm
index b4c5d91..2780ebb 100644
--- a/lib/Korap/Info.pm
+++ b/lib/Korap/Info.pm
@@ -19,7 +19,9 @@
 
   return $c->respond_to(
     json => sub {
-      $c->render(json => $c->notifications(json => $c->match_info($corpus_id, $doc_id, $match_id, %query)))
+      $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);
@@ -40,7 +42,6 @@
 # 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(
diff --git a/lib/Korap/Plugin/KorapInfo.pm b/lib/Korap/Plugin/KorapInfo.pm
index 946c997..4de0406 100644
--- a/lib/Korap/Plugin/KorapInfo.pm
+++ b/lib/Korap/Plugin/KorapInfo.pm
@@ -26,7 +26,7 @@
   state $json = decode_json(b(join('', <DATA>))->encode);
 
   # Get the API endpoint
-  my $api = $param->{api};
+  my $api = $param->{'api-0.1'};
 
   # Todo: Make this recognize the user!
   $mojo->helper(
@@ -42,9 +42,11 @@
       };
 
       # Rename info endpoints and build URL
-      $src = 'VirtualCollection' if $src eq 'collection';
-      $src = 'Corpus' if $src eq 'corpus';
-      my $url = Mojo::URL->new($api)->path('resource/' . $src);
+      $src = 'virtualcollection' if $src eq 'collection';
+      $src = 'corpus' if $src eq 'corpus';
+      my $url = Mojo::URL->new($api)->path($src);
+
+      $c->app->log->debug($url);
 
       # Check for cached information
       if (my $json = $c->chi->get($url->to_string)) {
@@ -156,7 +158,7 @@
       "id":1,
       "managed":true,
       "created":1401193381119,
-      "stats":{
+      "statistics":{
         "documents":196510,
         "tokens":51545081,
         "sentences":4116282,
diff --git a/lib/Korap/Plugin/KorapTagHelpers.pm b/lib/Korap/Plugin/KorapTagHelpers.pm
index b2b9a4e..25ca691 100644
--- a/lib/Korap/Plugin/KorapTagHelpers.pm
+++ b/lib/Korap/Plugin/KorapTagHelpers.pm
@@ -9,12 +9,30 @@
   $mojo->helper(
     korap_tut_query => sub {
       my ($c, $ql, $q) = @_;
+      my $onclick = 'top.useQuery(this)';
+      if ($c->param('embedded')) {
+	$onclick = 'setTutorialPage(this);' . $onclick;
+      };
       $q = xml_escape $q;
-      b('<pre class="query tutorial" onclick="top.useQuery(this)" ' .
+      b('<pre class="query tutorial" onclick="' . $onclick . '" ' .
 	  qq!data-query="$q" data-query-language="$ql"><code>! .
 	    $q . '</code></pre>');
     }
   );
+
+  $mojo->helper(
+    korap_tut_link_to => sub {
+      my $c = shift;
+      my $title = shift;
+      my $link = shift;
+      my $url = Mojo::URL->new($link);
+      if ($c->param('embedded')) {
+	$url->query({ embedded => 1 });
+	return $c->link_to($title, $url, onclick => 'setTutorialPage("' . $url . '")');
+      };
+      return $c->link_to($title, $url);
+    }
+  );
 };
 
 1;
diff --git a/lib/Korap/Tutorial.pm b/lib/Korap/Tutorial.pm
index 3da233a..f9d99da 100644
--- a/lib/Korap/Tutorial.pm
+++ b/lib/Korap/Tutorial.pm
@@ -14,10 +14,10 @@
   $c->title('KorAP');
 
   my $page = $c->stash('tutorial');
-
-  $c->render(template => 'tutorial');
+  return $c->render(template => 'tutorial/' . $page);
 };
 
+
 1;
 
 
diff --git a/public/css/media.css b/public/css/media.css
index 6eb7283..6f44905 100644
--- a/public/css/media.css
+++ b/public/css/media.css
@@ -1,11 +1,18 @@
 @media (orientation: portrait), (max-width: 42.5em) {
+  body {
+    font-size: 10pt;
+  }
   #sidebar {
     margin-left: -230px;
   }
   h1 {
     margin-left: 3px;
+/*
     width: 4em;
     height: 1.8em;
+*/
+    width: 80px;
+    height: 40px;
     background-size: 90%;
     z-index: 300;
   }
@@ -14,7 +21,10 @@
   }
   #top form {
     padding-left: 0px;
+/*
     padding-top: 2.9em;
+*/
+    padding-top: 33px;
   }
   #sidebar {
     padding-top: 22px;
@@ -31,4 +41,22 @@
   #tutorial iframe {
     border-radius: 0;
   }
+  #sidebar:not(.active) > i.fa-bars {
+    font-size: 12pt;
+    width: 10pt;
+    height: 11pt;
+  }
+  #searchbar, #searchbar input {
+    font-size: 9pt;
+  }
+  ol {
+    font-size: 9pt;
+  }
+  ol > li:target > div > div.snippet,
+  ol > li.active > div > div.snippet {
+    margin: 2px 3em 2px 4px;
+  }
+  pre.query {
+    font-size: 9.5pt;
+  }
 }
\ No newline at end of file
diff --git a/public/js/hint.js b/public/js/hint.js
index 4324c1e..786c185 100644
--- a/public/js/hint.js
+++ b/public/js/hint.js
@@ -3,6 +3,10 @@
   - Limit the size to a certain number of elements
   - addEventListener("click", ... , false);
   - addEventListener("paste", ... , false);
+  - Make this a general purpose hint-System with left-context-suport
+  - Die Funktion, wann was angezeigt werden soll, sollte extern
+    definiert sein (der Kontext / changed)
+  - Die Werteliste sollte weitere Attribute enthalten, wie title und class
 */
 
 var Hint = function (param) {
diff --git a/public/js/tutorialCookie.js b/public/js/tutorialCookie.js
new file mode 100644
index 0000000..0ae1b1d
--- /dev/null
+++ b/public/js/tutorialCookie.js
@@ -0,0 +1,46 @@
+function setTutorialPage(obj) {
+  var page = obj;
+  if (typeof page != 'string') {
+    page = window.location.pathname + window.location.search;
+    for (i = 1; i < 5; i++) {
+      if (obj.nodeName === 'SECTION') {
+	if (obj.hasAttribute('id'))
+	  page += '#' + obj.getAttribute('id');
+	break;
+      }
+      else if (obj.nodeName === 'PRE' && obj.hasAttribute('id')) {
+	page += '#' + obj.getAttribute('id');
+	break;
+      }
+      else {
+	obj = obj.parentNode;
+      };
+    };
+  };
+  document.cookie = 'tutorial_page=' + page + '; path=/'; 
+};
+
+function getTutorialPage() {
+  var pc = 'tutorial_page';
+  var c_value = document.cookie;
+  console.log("Found cookie " + c_value);
+
+  var c_start = c_value.indexOf(" " + pc + "=");
+  if (c_start == -1)
+    c_start = c_value.indexOf(pc + "=");
+  
+  if (c_start == -1) {
+    c_value = '/tutorial?embedded=1';
+  }
+  else {
+    c_start = c_value.indexOf("=", c_start) + 1;
+    var c_end = c_value.indexOf(";", c_start);
+
+    if (c_end == -1)
+      c_end = c_value.length;
+
+    c_value = unescape(c_value.substring(c_start,c_end));
+  };
+console.log("got tutpage " + c_value);
+  return c_value;
+};
diff --git a/public/sass/colors.scss b/public/sass/colors.scss
index bee457c..1b9deb4 100644
--- a/public/sass/colors.scss
+++ b/public/sass/colors.scss
@@ -2,22 +2,30 @@
 $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;
+$light-grey: #ddd;
+$middle-grey: #999;
+$dark-grey: #333;
+
+$nearly-white: #f5f5f5;
+
+$kwic-border:       $middle-grey;
+$kwic-line-noneven: $nearly-white;
+$kwic-line-even:    $light-grey;
+$kwic-match-color:  $dark-grey;
 $kwic-match-shadow: $light-shadow;
 
 $kwic-highlight-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
+$pagination-bg: $light-grey;
+$pagination-border: $middle-grey;
+$pagination-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
diff --git a/public/sass/responsive.scss b/public/sass/responsive.scss
deleted file mode 100644
index ee5b4fc..0000000
--- a/public/sass/responsive.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
-<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
-@media tv and (min-width: 700px) and (orientation: landscape) { ... }
-*/
-
-html, body {
-  font-size: 10pt;
-  margin: 0;
-  padding: 0;
-}
-
-#tutorial {
-  border-radius: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-  border-width: 0;
-  padding: 0;
-  font-size: 9pt;
-  > iframe {
-    border-radius: 0;
-  }
-}
-
-#top {
-  padding: 0 0 0 0;
-  height: 80px;
-  h1 {
-    margin: 5px;
-    height: 30px;
-    width: 80px;
-    background-size: 98% auto;
-  }
-  /* Temporary */
-  form button {
-    display: none;
-  }
-}
-
-#sidebar {
-  margin-left: -260px;
-}
-
-#search {
-  margin {
-    left: 0;
-    right: 0;
-  }
-}
-
-form {
-  margin-left: 0px;
-}
-
-#ql-field {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  margin-left: 100px;
-}
-
-#q-field {
-  width: 100%;
-}
-
-#button-right {
-  top: 7px;
-  right: 7px;
-}
-
-#search > ol > li {
-  font-size: 9pt;
-  &:not(.active) {
-    padding: 4pt 0 5pt 0;
-  }
-  &.active {
-    padding: 0 0 0 0;
-  }
-}
-
-code.query.serial {
-  font-size: 10pt;
-}
\ No newline at end of file
diff --git a/public/sass/style.scss b/public/sass/style.scss
index f42070a..c386588 100644
--- a/public/sass/style.scss
+++ b/public/sass/style.scss
@@ -254,7 +254,7 @@
   top: 0;
   position: absolute;
   width: 7.8em;
-  height: 2.6em;
+  height: 2.4em;
   z-index: 999;
   background: {
     repeat: no-repeat;
@@ -287,3 +287,38 @@
   }
 }
 
+main {
+  > section > p,
+  > p {
+    a {
+      border-radius: 6px;
+      padding: 0 .3em;
+      background-color: $pagination-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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/public/sass/tutorial.scss b/public/sass/tutorial.scss
index 80e92a1..9ce65e0 100644
--- a/public/sass/tutorial.scss
+++ b/public/sass/tutorial.scss
@@ -22,6 +22,7 @@
     font-size: 20pt;
     color: $dark-green;
     position: absolute;
+    background-color: rgba(255,255,255,0.5);
     z-index: 100;
     top: 10pt;
     right: 20pt;
@@ -38,7 +39,7 @@
       radius: 10px;
     }
     background: {
-      image: url('img/crab.svg');
+      image: url('/img/crab.svg');
       size: 10%;
       repeat: no-repeat;
       position: center center;
diff --git a/templates/collections.html.ep b/templates/collections.html.ep
index 3f73e96..42ac9b3 100644
--- a/templates/collections.html.ep
+++ b/templates/collections.html.ep
@@ -2,7 +2,7 @@
 <ul>
 % foreach my $vc (@{resource_info('collection')}) {
   <li class="active" title="<%= $vc->{description} // '' %>"><h3><%= $vc->{name} %></h3>
-% my $stats = $vc->{stats};
+% my $stats = $vc->{statistics};
     <dl class="info">
       <dt>Documents</dt>  <dd><%= commify $stats->{documents} %></dd>
       <dt>Paragraphs</dt> <dd><%= commify $stats->{paragraphs} %></dd>
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 492acdf..09af4f4 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -7,15 +7,24 @@
 % my $search_route;
 % unless (current_route 'tutorial') {
 <div id="tutorial">
-%   my $tut_page = url_for(session('tutorial') || 'tutorial');
-  <a href="<%= $tut_page %>"
-     target="_blank"><i title="Open in new tab"
-                        class="fa fa-external-link-square"></i></a>
+%#   my $tut_page = url_for(session('tutorial') || 'tutorial');
+%#  <a href="<%= $tut_page %>"
+%#     target="_blank"><i title="Open in new tab"
+%#                        class="fa fa-external-link-square"></i></a>
+%#
+%#  <a href="javascript:window.open(getTutorialPage())"
+%#     target="_blank"><i title="Open in new tab"
+%#                        class="fa fa-external-link-square"></i></a>
+%= javascript begin
+document.write('<a href="' + getTutorialPage().replace(/\?embedded=1/, '') + '" ');
+document.write('target="_blank"><i title="Open in new tab" ');
+document.write('class="fa fa-external-link-square"></i></a>');
+% end
   <i onclick="closeTutorial()"
      title="close"
      class="fa fa-toggle-up"></i>
-  <iframe src="about:blank"
-          data-src="<%= $tut_page->query([embedded => 1]) %>"></iframe>
+  <iframe src="about:blank"></iframe>
+%#          data-src="<%= $tut_page->query([embedded => 1]) %>"></iframe>
 </div>
 %   if (current_route eq 'match') {
 %     $search_route = url_for('search_corpus');
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 850e77b..2422819 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -3,5 +3,5 @@
 %= asset 'korap.css'
 %= asset 'korap.js'
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width;initial-scale=1.0;" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=false, user-scalable=no" />
 </head>
diff --git a/templates/partial/javascript.html.ep b/templates/partial/javascript.html.ep
index 81c7519..422a29e 100644
--- a/templates/partial/javascript.html.ep
+++ b/templates/partial/javascript.html.ep
@@ -65,8 +65,11 @@
   var tut = $("#tutorial");
   tut.addClass("active");
   var iframe = tut.children("iframe");
+/*
   var src = iframe.attr("data-src");
   iframe.attr("src", src);
+*/
+  iframe.attr("src", getTutorialPage());
 };
 
 function closeTutorial (o) {
diff --git a/templates/tutorial.html.ep b/templates/tutorial.html.ep
deleted file mode 100644
index c2f7c8a..0000000
--- a/templates/tutorial.html.ep
+++ /dev/null
@@ -1,93 +0,0 @@
-% content main => begin
-
-%# Store the id of an active section in the session, so the system is able to directly scroll to the relevant section
-%# This should be stored when clicking on a specific query
-%# but the remembered section contains the id - not the query
-
-<h2>KorAP-Tutorial</h2>
-
-<!--
-<p>Links to Blog, FAQ, About, Contact ...</p>
-<ul>
-  <li>Introduction to KorAP</li>
-  <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 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'
-
-
-<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>
-</section>
-
-<section name="cheatsheet">
-  <h3>Cheatsheet</h3>
-  <ul>
-    <li><strong>base</strong>
-      <ul>
-	<li>Supports two types of spans: <strong>&lt;s&gt;</strong> for sentences and <strong>&lt;p&gt;</strong> for paragraphs - this will likely change in the next index version. These spans lack prefix information!</li>
-      </ul>
-    </li>
-    <li><strong>cnx</strong>
-      <ul>
-	<li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita are split, e.g. the token &quot;Leitfähigkeit&quot; is matched by the lemmas &quot;leit&quot; and &quot;fähigkeit&quot; - not by the lemma &quot;leitfähigkeit&quot;</li>
-	<li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
-	<li><strong>syn</strong> (Token:Syntactical information): Includes token based information like @PREMOD, @NH, @MAIN ...</li>
-	<li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense (&quot;PRES&quot; ...), mode (&quot;IND&qut;), number (&quot;PL&quot; ...) etc.</li>
-	<li><strong>c</strong> (Span:Phrases): Only nominal phrases are available and all nominal phrases are written in lower case (&quot;np&quot;)</li>
-      </ul>
-    </li>
-    <li><strong>corenlp</strong>
-      <ul>
-	<li><strong>ne_hgc_175m_600</strong> (Token:Named Entity): Contains named entities like &quot;I-PER&quot;, &quot;I-ORG&quot; etc. </li>
-	<li><strong>ne_dewac_175_175m_600</strong> (Token:Named Entity): see above</li>
-      </ul>
-    </li>
-    <li><strong>tt</strong>
-      <ul>
-	<li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita stay intact (e.g. &quot;Normalbedingung&quot;)</li>
-	<li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
-      </ul>
-    </li>
-    <li><strong>mate</strong>
-      <ul>
-	<li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita stay intact (e.g. &quot;buchstabenbezeichnung&quot;)</li>
-	<li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
-	<li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense (&quot;tense:pres&quot; ...), mode (&quot;mood:ind&qut;), number (&quot;number:pl&quot; ...), gender (&quot;gender:masc&quot; etc.</li>
-      </ul>
-    </li>
-    <li><strong>opennlp</strong>
-      <ul>
-	<li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
-      </ul>
-    </li>
-    <li><strong>xip</strong>
-      <ul>
-	<li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita are split, e.g. the token &quot;Leitfähigkeit&quot; is matched by the lemmas &quot;leiten&quot; and &quot;Fähigkeit&quot; - and by a merged and pretty useless &quot;leitenfähigkeit&quot; (This is going to change)</li>
-	<li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
-	<li><strong>c</strong> (Span:Phrases): Some phrases to create sentences, all upper case (&quot;NP&quot;, &quot;NPA&quot;, &quot;NOUN&quot;, &quot;VERB&quot;, &quot;PREP&quot;, &quot;AP&quot; ...)</li>      
-      </ul>
-    </li>
-  </ul>
-</section>
-
-% end
diff --git a/templates/tutorial/foundries.html.ep b/templates/tutorial/foundries.html.ep
index 8e2b5cc..4c6427d 100644
--- a/templates/tutorial/foundries.html.ep
+++ b/templates/tutorial/foundries.html.ep
@@ -1 +1,73 @@
-default foundries
+% content main => begin
+
+<h2>KorAP-Tutorial: Foundries and Layers</h2>
+
+<p><%= korap_tut_link_to 'Back to Index', '/tutorial' %></p>
+
+<p>KorAP provides access to multiple levels of annotations originating from multiple resources, so called <i>foundries</i>.</p>
+
+<section name="cheatsheet">
+  <ul>
+    <li><strong>base</strong>
+      <ul>
+	<li>Supports two types of spans: <strong>&lt;s&gt;</strong> for sentences and <strong>&lt;p&gt;</strong> for paragraphs - this will likely change in the next index version. These spans lack prefix information!</li>
+      </ul>
+    </li>
+    <li><strong>cnx</strong>
+      <ul>
+	<li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita are split, e.g. the token &quot;Leitfähigkeit&quot; is matched by the lemmas &quot;leit&quot; and &quot;fähigkeit&quot; - not by the lemma &quot;leitfähigkeit&quot;</li>
+	<li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+	<li><strong>syn</strong> (Token:Syntactical information): Includes token based information like @PREMOD, @NH, @MAIN ...</li>
+	<li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense (&quot;PRES&quot; ...), mode (&quot;IND&qut;), number (&quot;PL&quot; ...) etc.</li>
+	<li><strong>c</strong> (Span:Phrases): Only nominal phrases are available and all nominal phrases are written in lower case (&quot;np&quot;)</li>
+      </ul>
+    </li>
+    <li><strong>corenlp</strong>
+      <ul>
+	<li><strong>ne_hgc_175m_600</strong> (Token:Named Entity): Contains named entities like &quot;I-PER&quot;, &quot;I-ORG&quot; etc. </li>
+	<li><strong>ne_dewac_175_175m_600</strong> (Token:Named Entity): see above</li>
+      </ul>
+    </li>
+    <li><strong>tt</strong>
+      <ul>
+	<li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita stay intact (e.g. &quot;Normalbedingung&quot;)</li>
+	<li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+      </ul>
+    </li>
+    <li><strong>mate</strong>
+      <ul>
+	<li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita stay intact (e.g. &quot;buchstabenbezeichnung&quot;)</li>
+	<li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+	<li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense (&quot;tense:pres&quot; ...), mode (&quot;mood:ind&qut;), number (&quot;number:pl&quot; ...), gender (&quot;gender:masc&quot; etc.</li>
+      </ul>
+    </li>
+    <li><strong>opennlp</strong>
+      <ul>
+	<li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+      </ul>
+    </li>
+    <li><strong>xip</strong>
+      <ul>
+	<li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita are split, e.g. the token &quot;Leitfähigkeit&quot; is matched by the lemmas &quot;leiten&quot; and &quot;Fähigkeit&quot; - and by a merged and pretty useless &quot;leitenfähigkeit&quot; (This is going to change)</li>
+	<li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+	<li><strong>c</strong> (Span:Phrases): Some phrases to create sentences, all upper case (&quot;NP&quot;, &quot;NPA&quot;, &quot;NOUN&quot;, &quot;VERB&quot;, &quot;PREP&quot;, &quot;AP&quot; ...)</li>      
+      </ul>
+    </li>
+  </ul>
+</section>
+
+<h3>Default Foundries</h3>
+
+<p>For queries on specific layers without given foundries, KorAP provides default foundries, that can be overwritten by user configurations. The default foundries apply to the following layers:</p>
+
+<ul>
+  <li><strong>orth</strong>: opennlp </li>
+  <li><strong>lemma</strong>: opennlp </li>
+  <li><strong>pos</strong>: mate</li>
+</ul>
+
+<blockquote>
+  <p>In the Lucene backend, the <strong>orth</strong> layer can be bound to a specific foundry, as only one tokenization is supported.</p>
+</blockquote>
+
+% end
diff --git a/templates/tutorial/index.html.ep b/templates/tutorial/index.html.ep
new file mode 100644
index 0000000..ca8f1ea
--- /dev/null
+++ b/templates/tutorial/index.html.ep
@@ -0,0 +1,42 @@
+% content main => begin
+
+%# Store the id of an active section in the session, so the system is able to directly scroll to the relevant section
+%# This should be stored when clicking on a specific query
+%# but the remembered section contains the id - not the query
+
+<h2>KorAP-Tutorial</h2>
+
+<p><%= korap_tut_link_to 'Poliqarp+-Tutorial', '/tutorial/poliqarp-plus' %> <%= korap_tut_link_to 'Foundry Overview', '/tutorial/foundries' %> <%= korap_tut_link_to 'Regular Expressions', '/tutorial/regular-expressions' %></p>
+
+<!--
+<p>Links to Blog, FAQ, About, Contact ...</p>
+<ul>
+  <li>Introduction to KorAP</li>
+  <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="tut-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'
+
+<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]})'
+
+</section>
+
+% end
diff --git a/templates/tutorial/poliqarp-plus.html.ep b/templates/tutorial/poliqarp-plus.html.ep
index e310769..d8340a7 100644
--- a/templates/tutorial/poliqarp-plus.html.ep
+++ b/templates/tutorial/poliqarp-plus.html.ep
@@ -2,7 +2,11 @@
 
 <h2>KorAP-Tutorial: Poliqarp+</h2>
 
-<section name="segments">
+<p><%= korap_tut_link_to 'Back to Index', '/tutorial' %></p>
+
+<p>The following tutorial introduces all features provided by our version of the Poliqarp Query Language and some KorAP specific extensions.</p>
+
+<section id="tut-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>
@@ -21,10 +25,10 @@
 <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">
+<section id="tut-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>
+<p>Segments can also be queried using <%= korap_tut_link_to 'regular expressions', '/tutorial/regular-expressions' %> - by surrounding the segment with double quotes.</p>
 
 %= korap_tut_query poliqarp => '"l(au|ie)fen"'
 
@@ -42,8 +46,8 @@
 
 <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 class="warning">
+  <p>Beware: These kinds of queries (with prepended <code>.*</code> expressions) are extremely slow!</p>
 </blockquote>
 
 <p>You can again apply the <code>/i</code> flag to search case insensitive.</p>
@@ -52,10 +56,10 @@
 
 </section>
 
-<section name="complex">
+<section id="tut-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>Complex segments are expressed in square brackets and contain additional information on the resource of the term under scrutiny by providing 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>
 
@@ -71,37 +75,48 @@
 
 %= 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>
+<p>Another special key is <code>base</code>, refering to the lemma annotation of the <%= korap_tut_link_to 'default foundry', '/tutorial/foundries' %>. 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]'
+%= 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>
+<p>The third special key is <code>pos</code>, refering to the part-of-speech annotation of the <%= korap_tut_link_to 'default foundry', '/tutorial/foundries' %>. 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>
+<p>Complex segments requesting further token annotations can have keys following the <code>foundry/layer</code> notation. For example to find all occurrences of plural words in the mate foundry, you can search using the following query:</p>
 
 %= korap_tut_query poliqarp => '[mate/m=number:pl]'
 
+<blockquote class="warning">
+  <p>There is currently a bug in the serialization of this query.</p>
+  <p><strong>The following stuff in the tutorial is not yet tested.</strong></p>
+</blockquote>
+
 </section>
 
-<section name="spans">
+<section id="tut-spans">
 <h3>Span Segments</h3>
 
 %= korap_tut_query poliqarp => '<s>'
 
 </section>
 
-<section name="paradigmatic-operators">
+<section id="tut-paradigmatic-operators">
 <h3>Paradigmatic Operators</h3>
-%= korap_tut_query poliqarp => '[orth=bäume & base=bäumen]'
+%= korap_tut_query poliqarp => '[orth=laufe/i & base=lauf]'
 
-%= korap_tut_query poliqarp => '[orth=bäume & base!=bäumen]'
+%= korap_tut_query poliqarp => '[orth=laufe/i & base!=lauf]'
+
+<blockquote class="warning">
+  <p>There is a bug in the Lucene backend regarding the negation of matches</p>
+</blockquote>
 
 <p>The following query is equivalent</p>
 
 %= korap_tut_query poliqarp => '[orth=bäume & !base=bäumen]'
 
+<p>Some more ...</p>
+
 %= korap_tut_query poliqarp => '[base=laufen | base=gehen]'
 
 %= korap_tut_query poliqarp => '[(base=laufen | base=gehen) & tt/pos=VVFIN]'
@@ -110,7 +125,7 @@
 
 </section>
 
-<section name="syntagmatic-operators">
+<section id="tut-syntagmatic-operators">
 <h3>Syntagmatic Operators</h3>
 
 <h4>Sequences</h4>
@@ -131,21 +146,20 @@
 
 <h4>Position Operators</h4>
 
-contains()
-startsWith()
-endsWith()
+<p>contains()</p>
+<p>startsWith()</p>
+<p>endsWith()</p>
+<p>overlaps()</p>
 
 <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.
+  <p>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.</p>
 </blockquote>
 
 <h4>Class Operators</h4>
 
-{}
-focus()
-
-
-
+<p>{}</p>
+<p>focus()</p>
+<p>...</p>
 
 </section>
 
diff --git a/templates/tutorial/regular-expressions.html.ep b/templates/tutorial/regular-expressions.html.ep
index 1cce875..3f15598 100644
--- a/templates/tutorial/regular-expressions.html.ep
+++ b/templates/tutorial/regular-expressions.html.ep
@@ -1,10 +1,18 @@
-% contain main => begin
+% content 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>
+<p><%= korap_tut_link_to 'Back to Index', '/tutorial' %></p>
 
-<section name="lucene">
+<p>The support for regular expressions in KorAP may be backend dependend. Below you can find the description for the respective backends.</p>
+
+<section id="tut-lucene">
 <h3>Lucene</h3>
+
+<blockquote>
+  <p>Description still missing.</p>
+</blockquote>
+
 </section>
 
 % end