diff --git a/dev/demo/all.html b/dev/demo/all.html
index 85d4d2e..ff21908 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -47,7 +47,7 @@
 
 	  <!-- Todo: open tutorial - like openTutorial() -->
 	  <a href="doc/faq" class="question"><span>Question</span></a>
-	  <a href="about.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
+	  <a href="tutorial.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
 	</div>
       </form>
     </header>
diff --git a/dev/demo/tutorial.html b/dev/demo/tutorial.html
index c7aea38..7c4a87f 100644
--- a/dev/demo/tutorial.html
+++ b/dev/demo/tutorial.html
@@ -3,7 +3,7 @@
   <head>
     <title>Tutorial demo</title>
     <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
-    <script data-main="all.js" src="../js/lib/require.js" async="async"></script>
+    <script data-main="alldemo.js" src="../js/lib/require.js" async="async"></script>
   </head>
   <body class="embedded">
     <aside tabindex="0" class="active">
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index cd0adfc..cd99df1 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -108,11 +108,21 @@
     /**
      * Init Tutorial view
      */
-    obj.tutorial = tutClass.create(
-      document.getElementById('view-tutorial')
-    );
+    if (document.getElementById('view-tutorial')) {
+      window.tutorial = tutClass.create(
+	document.getElementById('view-tutorial')
+      );
+      obj.tutorial = window.tutorial;
+    }
 
-  
+    // Tutorial is in parent
+    else if (window.parent) {
+      obj.tutorial = window.parent.tutorial;
+    };
+
+    // Initialize queries for document
+    obj.tutorial.initQueries(document);
+
     /**
      * Init hint helper
      * has to be final because of
diff --git a/dev/js/src/tutorial.js b/dev/js/src/tutorial.js
index 4f00ee1..cacbe21 100644
--- a/dev/js/src/tutorial.js
+++ b/dev/js/src/tutorial.js
@@ -27,25 +27,64 @@
     _init : function (obj) {
 
       this._session = sessionClass.create();
-      this._show = obj;
-      this.start = obj.getAttribute('href');
-      obj.removeAttribute('href');
-      var that = this;
-      obj.onclick = function () {
-	that.show();
+
+      if (obj) {
+	this._show = obj;
+	this.start = obj.getAttribute('href');
+	obj.removeAttribute('href');
+	var that = this;
+	obj.onclick = function () {
+	  that.show();
+	};
+
+	// Injects a tutorial div to the body
+	var div = document.createElement('div');
+	div.setAttribute('id', 'tutorial');
+	div.style.display = 'none';
+	document.getElementsByTagName('body')[0].appendChild(div);
+	this._iframe = null;
+	this._element = div;
+
+	// Some fields
+	this._ql     = document.getElementById("ql-field");
+	this._q      = document.getElementById("q-field")
+	this._cutoff = document.getElementById("q-cutoff-field");
       };
 
-      // Injects a tutorial div to the body
-      var div = document.createElement('div');
-      div.setAttribute('id', 'tutorial');
-      div.style.display = 'none';
-      document.getElementsByTagName('body')[0].appendChild(div);
-      this._iframe = null;
-
-      this._element = div;
       return this;
     },
 
+    useQuery : function (e) {
+      var q  = e.getAttribute("data-query");
+      var ql = e.getAttribute("data-query-language");
+      var qc = e.getAttribute("data-query-cutoff");
+      if (qc !== 0 && qc !== "0" && qc !== "off" && qc !== null) {
+	this._cutoff.checked = true;
+      };
+
+      var qlf = this._ql.options;
+      for (var i in qlf) {
+	if (qlf[i].value == ql) {
+	  qlf[i].selected = true;
+	};
+      };
+
+      this._q.value = q;
+      this.setPage(e);
+      this.hide();
+    },
+
+    initQueries : function (d) {
+      var qs = d.querySelectorAll('pre.query.tutorial');
+      var that = this;
+      for (var i = 0; i < qs.length; i++) {
+	qs[i].onclick = function (e) {
+	  that.useQuery(this,e);
+	};
+      };
+    },
+
+
     show : function () {
       var element = this._element;
       if (element.style.display === 'block')
@@ -94,7 +133,7 @@
      * Close tutorial window.
      */
     hide : function () {
-      this._element.display.style = 'none';
+      this._element.style.display = 'none';
     },
 
     /**
@@ -105,7 +144,7 @@
       var page = obj;
       if (typeof page != 'string') {
 	page = window.location.pathname + window.location.search;
-	for (i = 1; i < 5; i++) {
+	for (var i = 1; i < 5; i++) {
 	  if (obj.nodeName === 'SECTION') {
 	    if (obj.hasAttribute('id'))
 	      page += '#' + obj.getAttribute('id');
@@ -128,6 +167,7 @@
      */
     getPage : function () {
       this._session.get('tutpage');
-    },
+    }
   };
 });
+
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 1d3d26a..ca1029e 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -37,7 +37,7 @@
     color: $dark-orange;
     text-decoration: none;
     &:hover {
-      color: $light-green; // $darkest-orange;
+      color: $darkest-orange;
       @include color-transition;
     }
     &:active, &:visited {
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index e63283a..8b4e0a5 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -105,6 +105,10 @@
       content: $fa-login;
     }
   }
+
+  #vc-view > div {
+    margin: 1.3em 0 .5em 0;
+  }
 }
 
 
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 883f003..6411d87 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -97,13 +97,13 @@
 */
       &::after {
 	font-family: "FontAwesome"; 
-	content: '\f096';
+	content: $fa-check;
       }
     }
   }
   &:checked + label span { 
     &:after {
-      content:"\f046";
+      content: $fa-checked;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index d6650a4..12071db 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -249,3 +249,17 @@
     }
   }
 }
+
+
+#vc-choose {
+  &::after {
+    content: $fa-down;
+    padding: {
+      left: 2pt;
+      right: 4pt;
+    }
+  }
+  &.active::after {
+    content: $fa-up;
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index f0e10de..8b91f22 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -181,4 +181,6 @@
 $fa-tutorial:    "\f19d";
 $fa-left-align:  "\f036";
 $fa-right-align: "\f038";
-$fa-question:    "\f128"; // "\f059";
\ No newline at end of file
+$fa-question:    "\f128"; // "\f059";
+$fa-checked:     "\f046";
+$fa-check:       "\f096";
\ No newline at end of file