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;