Optimized embedded tutorial for mobile

Change-Id: I0b345c75cbd68bd1f1205a313ddbb7ecd94b58c3
diff --git a/templates/de/doc/api/koralquery.html.ep b/templates/de/doc/api/koralquery.html.ep
index 0df876a..2348cf9 100644
--- a/templates/de/doc/api/koralquery.html.ep
+++ b/templates/de/doc/api/koralquery.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: KoralQuery';
 
-<h2>KoralQuery</h2>
+<h2 id="tutorial-top">KoralQuery</h2>
 
 <p><strong>Hauptentwickler:</strong> Nils Diewald, Joachim Bingel</p>
 
diff --git a/templates/de/doc/data/annotation.html.ep b/templates/de/doc/data/annotation.html.ep
index 4fcb2a1..4a7c2d7 100644
--- a/templates/de/doc/data/annotation.html.ep
+++ b/templates/de/doc/data/annotation.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Annotationen';
 
-<h2>Annotationen</h2>
+<h2 id="tutorial-top">Annotationen</h2>
 
 <p>KorAP bietet Zugriff auf mehrere Ebenen von Annotationen, die aus mehreren Ressourcen stammen, so genannten <em>foundries</em>.</p>
 
diff --git a/templates/de/doc/korap/kalamar.html.ep b/templates/de/doc/korap/kalamar.html.ep
index b43d522..93f34c5 100644
--- a/templates/de/doc/korap/kalamar.html.ep
+++ b/templates/de/doc/korap/kalamar.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Kalamar';
 
-<h2>Kalamar</h2>
+<h2 id="tutorial-top">Kalamar</h2>
 
 %= korap_overview 'kalamar'
 
diff --git a/templates/de/doc/korap/karang.html.ep b/templates/de/doc/korap/karang.html.ep
index 84dc66d..345b417 100644
--- a/templates/de/doc/korap/karang.html.ep
+++ b/templates/de/doc/korap/karang.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Karang';
 
-<h2>Karang</h2>
+<h2 id="tutorial-top">Karang</h2>
 
 %= korap_overview 'karang'
 
diff --git a/templates/de/doc/korap/koral.html.ep b/templates/de/doc/korap/koral.html.ep
index ea90c03..5273106 100644
--- a/templates/de/doc/korap/koral.html.ep
+++ b/templates/de/doc/korap/koral.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Koral';
 
-<h2>Koral</h2>
+<h2 id="tutorial-top">Koral</h2>
 
 %= korap_overview 'koral'
 
diff --git a/templates/de/doc/korap/krill.html.ep b/templates/de/doc/korap/krill.html.ep
index 39b6aec..ca497b4 100644
--- a/templates/de/doc/korap/krill.html.ep
+++ b/templates/de/doc/korap/krill.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Krill';
 
-<h2>Krill</h2>
+<h2 id="tutorial-top">Krill</h2>
 
 %= korap_overview 'krill'
 
diff --git a/templates/de/doc/korap/kustvakt.html.ep b/templates/de/doc/korap/kustvakt.html.ep
index 8cc2d81..ab60f33 100644
--- a/templates/de/doc/korap/kustvakt.html.ep
+++ b/templates/de/doc/korap/kustvakt.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Kustvakt';
 
-<h2>Kustvakt</h2>
+<h2 id="tutorial-top">Kustvakt</h2>
 
 %= korap_overview 'kustvakt'
 
diff --git a/templates/de/doc/ql/poliqarp-plus.html.ep b/templates/de/doc/ql/poliqarp-plus.html.ep
index 827ae01..757c407 100644
--- a/templates/de/doc/ql/poliqarp-plus.html.ep
+++ b/templates/de/doc/ql/poliqarp-plus.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Poliqarp+';
 
-<h2>Poliqarp+</h2>
+<h2 id="tutorial-top">Poliqarp+</h2>
 
 <p>Das folgende Tutorial präsentiert alle Features, die unsere Version der Poliqarp Abfragesprache zur Verfügung stellt und enthält zusätzlich einige spezifische KorAP Erweiterungen.</p>
 
diff --git a/templates/doc/api.html.ep b/templates/doc/api.html.ep
index ea9c594..3b8842b 100644
--- a/templates/doc/api.html.ep
+++ b/templates/doc/api.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Application Programming Interface';
 
-<h2>Application Programming Interface</h2>
+<h2 id="tutorial-top">Application Programming Interface</h2>
 
 <p>Internally the communication between the KorAP components is done using the <%= doc_link_to('KoralQuery', 'api', 'koralquery') %> protocol. The following endpoints make use of this protocol or establish additional mechanisms. All described endpoints are (more or lest) REST-ful web APIs.</p>
 
diff --git a/templates/doc/api/koralquery.html.ep b/templates/doc/api/koralquery.html.ep
index d29bc94..9d7640f 100644
--- a/templates/doc/api/koralquery.html.ep
+++ b/templates/doc/api/koralquery.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: KoralQuery';
 
-<h2>KoralQuery</h2>
+<h2 id="tutorial-top">KoralQuery</h2>
 
 <p><strong>Main developer:</strong> Nils Diewald, Joachim Bingel</p>
 
diff --git a/templates/doc/api/match.html.ep b/templates/doc/api/match.html.ep
index 5de2210..5cd21b4 100644
--- a/templates/doc/api/match.html.ep
+++ b/templates/doc/api/match.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: Match API';
 
-<h2>Match API</h2>
+<h2 id="tutorial-top">Match API</h2>
 
 %= doc_uc
diff --git a/templates/doc/api/search.html.ep b/templates/doc/api/search.html.ep
index 5fc864d..6a83ce6 100644
--- a/templates/doc/api/search.html.ep
+++ b/templates/doc/api/search.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: Search API';
 
-<h2>Search API</h2>
+<h2 id="tutorial-top">Search API</h2>
 
 %= doc_uc
diff --git a/templates/doc/api/user.html.ep b/templates/doc/api/user.html.ep
index 12fa82e..0967a6d 100644
--- a/templates/doc/api/user.html.ep
+++ b/templates/doc/api/user.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: User API';
 
-<h2>User API</h2>
+<h2 id="tutorial-top">User API</h2>
 
 %= doc_uc
diff --git a/templates/doc/contact.html.ep b/templates/doc/contact.html.ep
index 0874acc..411a8f8 100644
--- a/templates/doc/contact.html.ep
+++ b/templates/doc/contact.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: Contact us!';
 
-<h2>KorAP: Contact us</h2>
+<h2 id="tutorial-top">KorAP: Contact us</h2>
 
 <p>You can send us an email at <code>korap</code> at the domain <code>ids-mannheim.de</code>!</p>
diff --git a/templates/doc/data.html.ep b/templates/doc/data.html.ep
index 1892a3a..b589435 100644
--- a/templates/doc/data.html.ep
+++ b/templates/doc/data.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: Data';
 
-<h2>Data</h2>
+<h2 id="tutorial-top">Data</h2>
 
 <p>Under Construction</p>
diff --git a/templates/doc/data/annotation.html.ep b/templates/doc/data/annotation.html.ep
index 032375c..dbbd534 100644
--- a/templates/doc/data/annotation.html.ep
+++ b/templates/doc/data/annotation.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Annotations';
 
-<h2>Annotations</h2>
+<h2 id="tutorial-top">Annotations</h2>
 
 <p>KorAP provides access to multiple levels of annotations originating from multiple resources, so called <em>foundries</em>.</p>
 
diff --git a/templates/doc/data/corpus.html.ep b/templates/doc/data/corpus.html.ep
index 17dbda0..973b728 100644
--- a/templates/doc/data/corpus.html.ep
+++ b/templates/doc/data/corpus.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: Corpora';
 
-<h2>Corpora</h2>
+<h2 id="tutorial-top">Corpora</h2>
 
 %= doc_uc
diff --git a/templates/doc/faq.html.ep b/templates/doc/faq.html.ep
index 72b9f22..e03ed3d 100644
--- a/templates/doc/faq.html.ep
+++ b/templates/doc/faq.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Frequently Asked Questions';
 
-<h2>Frequently Asked Questions</h2>
+<h2 id="tutorial-top">Frequently Asked Questions</h2>
 
 <p>This document puts together the most frequent questions and issues that we have encountered so far. Please feel welcome to ask further questions via <%= mail_to_chiffre join('@', 'korap', 'ids-mannheim.de'), subject => 'Question via Kalamar', begin %>e-mail<% end %>.
 
diff --git a/templates/doc/korap.html.ep b/templates/doc/korap.html.ep
index 2f2a186..3219803 100644
--- a/templates/doc/korap.html.ep
+++ b/templates/doc/korap.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Overview';
 
-<h2>KorAP: An Overview</h2>
+<h2 id="tutorial-top">KorAP: An Overview</h2>
 
 %= korap_overview 'korap'
 
diff --git a/templates/doc/korap/kalamar.html.ep b/templates/doc/korap/kalamar.html.ep
index 7c83214..f1f6256 100644
--- a/templates/doc/korap/kalamar.html.ep
+++ b/templates/doc/korap/kalamar.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Kalamar';
 
-<h2>Kalamar</h2>
+<h2 id="tutorial-top">Kalamar</h2>
 
 %= korap_overview 'kalamar'
 
diff --git a/templates/doc/korap/karang.html.ep b/templates/doc/korap/karang.html.ep
index 67772a6..5c60d48 100644
--- a/templates/doc/korap/karang.html.ep
+++ b/templates/doc/korap/karang.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Karang';
 
-<h2>Karang</h2>
+<h2 id="tutorial-top">Karang</h2>
 
 %= korap_overview 'karang'
 
diff --git a/templates/doc/korap/koral.html.ep b/templates/doc/korap/koral.html.ep
index d97e458..54539df 100644
--- a/templates/doc/korap/koral.html.ep
+++ b/templates/doc/korap/koral.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Koral';
 
-<h2>Koral</h2>
+<h2 id="tutorial-top">Koral</h2>
 
 %= korap_overview 'koral'
 
diff --git a/templates/doc/korap/krill.html.ep b/templates/doc/korap/krill.html.ep
index 9e10159..c6898fc 100644
--- a/templates/doc/korap/krill.html.ep
+++ b/templates/doc/korap/krill.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Krill';
 
-<h2>Krill</h2>
+<h2 id="tutorial-top">Krill</h2>
 
 %= korap_overview 'krill'
 
diff --git a/templates/doc/korap/kustvakt.html.ep b/templates/doc/korap/kustvakt.html.ep
index 5b084ae..a6be167 100644
--- a/templates/doc/korap/kustvakt.html.ep
+++ b/templates/doc/korap/kustvakt.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Kustvakt';
 
-<h2>Kustvakt</h2>
+<h2 id="tutorial-top">Kustvakt</h2>
 
 %= korap_overview 'kustvakt'
 
diff --git a/templates/doc/ql.html.ep b/templates/doc/ql.html.ep
index a3ba1f9..ad1b176 100644
--- a/templates/doc/ql.html.ep
+++ b/templates/doc/ql.html.ep
@@ -6,7 +6,7 @@
 %# This should be stored when clicking on a specific query
 %# but the remembered section contains the id - not the query
 
-<h2>Query Languages</h2>
+<h2 id="tutorial-top">Query Languages</h2>
 
 <section id="intro">
   <h3>Frontend Features</h3>
diff --git a/templates/doc/ql/annis.html.ep b/templates/doc/ql/annis.html.ep
index f0198ef..376d450 100644
--- a/templates/doc/ql/annis.html.ep
+++ b/templates/doc/ql/annis.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: Annis QL';
 
-<h2>Annis QL</h2>
+<h2 id="tutorial-top">Annis QL</h2>
 
 %= doc_uc
diff --git a/templates/doc/ql/cosmas-2.html.ep b/templates/doc/ql/cosmas-2.html.ep
index 7ec7135..d358d21 100644
--- a/templates/doc/ql/cosmas-2.html.ep
+++ b/templates/doc/ql/cosmas-2.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: Cosmas II';
 
-<h2>Cosmas II</h2>
+<h2 id="tutorial-top">Cosmas II</h2>
 
 %= doc_uc
diff --git a/templates/doc/ql/cql.html.ep b/templates/doc/ql/cql.html.ep
index 4a14ef1..56c33cb 100644
--- a/templates/doc/ql/cql.html.ep
+++ b/templates/doc/ql/cql.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: CQL';
 
-<h2>CQL</h2>
+<h2 id="tutorial-top">CQL</h2>
 
 %= doc_uc
diff --git a/templates/doc/ql/poliqarp-plus.html.ep b/templates/doc/ql/poliqarp-plus.html.ep
index 6aef4de..884f21a 100644
--- a/templates/doc/ql/poliqarp-plus.html.ep
+++ b/templates/doc/ql/poliqarp-plus.html.ep
@@ -1,6 +1,6 @@
 % layout 'main', title => 'KorAP: Poliqarp+';
 
-<h2>Poliqarp+</h2>
+<h2 id="tutorial-top">Poliqarp+</h2>
 
 <p>The following tutorial introduces all features provided by our version of the Poliqarp Query Language and some KorAP specific extensions.</p>
 
diff --git a/templates/doc/ql/regexp.html.ep b/templates/doc/ql/regexp.html.ep
index efbd41d..c92b158 100644
--- a/templates/doc/ql/regexp.html.ep
+++ b/templates/doc/ql/regexp.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: Regular Expressions';
 
-<h2>Regular Expressions</h2>
+<h2 id="tutorial-top">Regular Expressions</h2>
 
 %= doc_uc
diff --git a/templates/doc/ql/wildcards.html.ep b/templates/doc/ql/wildcards.html.ep
index 4ab29e2..3b4d80a 100644
--- a/templates/doc/ql/wildcards.html.ep
+++ b/templates/doc/ql/wildcards.html.ep
@@ -1,5 +1,5 @@
 % layout 'main', title => 'KorAP: Wildcards';
 
-<h2>Wildcards</h2>
+<h2 id="tutorial-top">Wildcards</h2>
 
 %= doc_uc
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index a81aebc..7deae57 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -33,5 +33,6 @@
       <label for="q-cutoff-field" title="<%= loc('glimpse_desc') %>"><span></span><%= loc('glimpse') %></label>
       <%= link_to 'doc_start', title => loc('tutorial'), class => "tutorial", id => "view-tutorial", tabindex => '-1', begin %><span><%= loc 'tutorial' %></span><% end %>
     </div>
+    <div class="clear"></div>
   </form>
 </header>