diff --git a/public/scss/header.scss b/public/scss/header.scss
index 522be5e..f3f995a 100644
--- a/public/scss/header.scss
+++ b/public/scss/header.scss
@@ -4,6 +4,7 @@
 header {
   position: relative;
   background-color: $light-green;
+//  background-color: $ids-grey-1;
   @include box-sizing-box();
   padding: 8px;
   padding-bottom: 0;
@@ -19,9 +20,8 @@
     padding: 0;
     outline: none;
   }
-  span.select, span.location {
+  span.select, #vc-choose { /* Formally vc.location */
     cursor: pointer;
-    font-weight: bold;
     line-height: 1.8em;
     border: {
       width: 0;
@@ -35,16 +35,20 @@
       border-color: $dark-green;
     }
     &::after {
-      content: "\f0dd";
       pointer-events: none;
       font-family: FontAwesome;
       text-align: center;
       background-color: $light-green;
     }
   }
+  span.select::after {
+    content: "\f0dd";
+  }
+
   form {
+    padding-left: $logo-left-distance;
+    min-height: 2.7em;
     display: block;
-    padding-left: 230px;
     margin: 0px;
     position: relative;
   }
diff --git a/public/scss/kalamar.scss b/public/scss/kalamar.scss
index 1ffb671..582fe9b 100644
--- a/public/scss/kalamar.scss
+++ b/public/scss/kalamar.scss
@@ -13,4 +13,9 @@
 @import "resultinfo"; // Information on results
 @import "matchinfo";  // Match table and tree
 @import "kwic";       // Kwic view information
-@import "vc";       // Kwic view information
+@import "vc";         // Virtual collection builder
+@import "tutorial";   // Embedded and non-embedded tutorial
+@import "query";      // View query
+@import "sidebar";    // Navigation on the left side
+
+@import "media";      // Media queries
diff --git a/public/scss/kwic.scss b/public/scss/kwic.scss
index e768e5a..c55c00a 100644
--- a/public/scss/kwic.scss
+++ b/public/scss/kwic.scss
@@ -106,56 +106,12 @@
     > 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;
-	  }
-	  margin: 0;
-	  padding: 0;
-	  z-index: 5;
-
 	  display: block;
-	  list-style: {
-            type: none;
-            position: inline;
-	  }
-	  &.right {
-            position: absolute;
-	    width: $right-match-distance;
-            float: right;
-            text-align: center;
-            padding: 0pt 3pt;
-            height: 100%;
-            right: 0;
-            top: 0;
-	    li {
-	      > span {
-		@include blind;
-	      }
-	      &.close::after {
-		font-family: "FontAwesome";
-		content: "\f00d";
-	      }
-	      &.info::after {
-		font-family: "FontAwesome";
-		content: "\f05a";
-	      }
-	    }
-	  }
 	}
       }
       &:not(.active):not(:target) p.ref {
@@ -176,6 +132,51 @@
   }
 }
 
+ul.action {
+  background-color: $dark-orange;
+  font-size: 12pt;
+  color: white;
+  text: {
+    shadow: none;
+    indent: 0;
+  }
+  margin: 0;
+  padding: 0;
+  z-index: 5;
+  
+  list-style: {
+    type: none;
+    position: inline;
+  }
+  &.right {
+    position: absolute;
+    width: $right-match-distance;
+    float: right;
+    text-align: center;
+    padding: 0pt 3pt;
+    height: 100%;
+    right: 0;
+    top: 0;
+    li {
+      cursor: pointer;
+      color: white;
+      text-decoration: none;
+
+      > span {
+	@include blind;
+      }
+      &.close::after {
+	font-family: "FontAwesome";
+	content: "\f00d";
+      }
+      &.info::after {
+	font-family: "FontAwesome";
+	content: "\f05a";
+      }
+    }
+  }
+}
+
 /*
 ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.left {
   display: inline-block;
@@ -217,6 +218,11 @@
 /**
  * Highlights
  */
+mark {
+  background-color: inherit;
+  color: inherit;
+}
+
 mark > mark,
 em,
 .level-0 {
diff --git a/public/scss/logos.scss b/public/scss/logos.scss
index 0141bf6..715bf71 100644
--- a/public/scss/logos.scss
+++ b/public/scss/logos.scss
@@ -85,13 +85,13 @@
  */
 h1 {
   position: absolute;
-  margin-left:15px;
   margin: 0;
+  margin-left:15px;
   left: 0;
   top: 0;
   width: 7.8em;
   height: 2.4em;
-  z-index: 999;
+  z-index: 7200;
   background: {
     size: 72%;
     image: url('#{$img-path}/korap-logo-kalamar.svg');
diff --git a/public/scss/matchinfo.scss b/public/scss/matchinfo.scss
index d26c6e5..4341f23 100644
--- a/public/scss/matchinfo.scss
+++ b/public/scss/matchinfo.scss
@@ -208,14 +208,19 @@
 /**
  * SVG tree
  */
-
 path.edge {
   stroke: $darker-orange;
   stroke-width: 2px;
   fill: none;
 }
 
-g.middle > rect {
+g.root rect.empty {
+  stroke: $darker-orange;
+  fill: $darker-orange;
+  stroke-width: 2px;
+}
+
+g.middle rect {
   stroke: $darker-orange;
   stroke-width: 2px;
   fill: $middle-orange;
diff --git a/public/scss/media.scss b/public/scss/media.scss
new file mode 100644
index 0000000..cef3fed
--- /dev/null
+++ b/public/scss/media.scss
@@ -0,0 +1,118 @@
+@charset "utf-8";
+@import "util";
+
+$standard-margin: 4px;
+
+@media (orientation: portrait), (max-width: 42.5em) {
+  body, #search ol, header, header input {
+    font-size: 9pt;
+  }
+  header form {
+    padding-left: 0px;
+    padding-top: 33px;
+  }
+  .vc {
+    font-size: 9pt;
+  }
+  h1 {
+    margin-left: 10px;
+    width: 130px;
+    height: 40px;
+    background-size: 100%;
+    background-position: 50% 0;
+    z-index: 300;
+  }
+
+  #searchbar {
+    padding-right: 30px;
+    input {
+      font-size: 9pt;
+    }
+    button[type=submit] {
+      right: 0;
+    }
+  }
+
+  .level-1 {
+    padding-bottom: 2px;
+  }
+
+  .level-2 {
+    padding-bottom: 4px;
+  }
+
+  main {
+    margin-left: $standard-margin;
+    margin-right: $standard-margin;
+  }
+
+  #search ol {
+    > li:target, > li.active {
+      > div > div.snippet {
+	margin: 2px 2em 2px 4px;
+      }
+    }
+    > li:not(:target):not(.active) {
+      padding: 3pt 0 3pt 0;
+    }
+  }
+
+  div.matchinfo {
+    font-size: 9pt;
+  }
+
+  div.matchtable tr > * {
+    padding: 1pt 3pt;
+  }
+
+  div.matchtree {
+    h6 {
+      display: block;
+      float: none;
+    }
+    > div {
+      margin-left: 2px;
+    }
+  }
+
+  div.resultinfo p.found,
+  #pagination > a {
+    font-size: 9pt;
+  }
+
+  #logos {
+    margin-left: 0;
+    margin-right: 0;
+
+    > div {
+      border-top-width: 14px;
+    }
+  }
+
+/*
+
+  #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;
+  }
+  #sidebar:not(.active) > i.fa-bars {
+    font-size: 12pt;
+    width: 10pt;
+    height: 11pt;
+  }
+  pre.query {
+    font-size: 9.5pt;
+  }
+*/
+}
\ No newline at end of file
diff --git a/public/scss/menu.scss b/public/scss/menu.scss
index e8b9f41..2c3f24d 100644
--- a/public/scss/menu.scss
+++ b/public/scss/menu.scss
@@ -56,13 +56,6 @@
 	left-radius: $standard-border-radius;
 	right-radius: $standard-border-radius;
       }
-      &:not(.no-more):before {
-	position: absolute;
-	font-family: "FontAwesome";
-	content: '\f0de';
-	right: .5em;
-	top: .4em;
-      }
     }
     &:last-of-type {
       border-bottom: {
@@ -70,14 +63,6 @@
 	left-radius: $standard-border-radius;
 	right-radius: $standard-border-radius;
       }
-
-      &:not(.no-more):before {
-	position: absolute;
-	font-family: "FontAwesome";
-	content: '\f0dd';
-	right: .5em;
-	bottom: .4em;
-      }
     }
     mark {
       text-decoration: underline;
@@ -114,4 +99,42 @@
   }
 }
 
+/**
+ * Rolling menu
+ */
+ul.menu.roll {
+  > li:first-of-type {
+    &:not(.no-more):before {
+      position: absolute;
+      font-family: "FontAwesome";
+      content: '\f0de';
+      right: .5em;
+      top: .4em;
+    }
+  }
+  > li:last-of-type {
+    &:not(.no-more):before {
+      position: absolute;
+      font-family: "FontAwesome";
+      content: '\f0dd';
+      right: .5em;
+      bottom: .4em;
+    }
+  }
+}
 
+
+/**
+ * Sorting menu
+ */
+ul.menu.sort {
+  position: relative;
+  display: inline-block;
+  > li::before {
+    content: '';
+  }
+  > li.active:hover {
+    @include choose-remove;
+  }
+
+}
\ No newline at end of file
diff --git a/public/scss/query.scss b/public/scss/query.scss
new file mode 100644
index 0000000..4167059
--- /dev/null
+++ b/public/scss/query.scss
@@ -0,0 +1,24 @@
+@import "util";
+@charset "utf-8";
+
+
+pre.query {
+  overflow-x: hidden; 
+  cursor: pointer;
+  padding: .5em;
+  @include choose-item;
+  position:relative;
+  border: {
+    width: 2px;
+    style: solid;
+    radius: $standard-border-radius;
+  }
+  box-shadow: $choose-box-shadow;
+  
+  &:hover {
+    @include choose-hover;
+  }
+  &:active {
+    @include choose-active;
+  }
+}
diff --git a/public/scss/searchbar.scss b/public/scss/searchbar.scss
index 2b54e01..098eacd 100644
--- a/public/scss/searchbar.scss
+++ b/public/scss/searchbar.scss
@@ -8,24 +8,21 @@
  * Input field
  */
 #q-field {
-  @include box-sizing-box();
-  outline: none;
-  font-size: 11pt;
-  border: $border-size solid $nearly-white;
-  padding: 2px;
   width: 100%;
   margin: 0;
   margin-bottom: 3px;
   display: block;
 }
 
-header > form {
-  min-height: 2.7em;
+header input {
+  outline: none;
+  font-size: 11pt;
+  border: $border-size solid $nearly-white;
+  padding: 2px;
 }
 
 #searchbar {
   position: relative;
-  @include box-sizing-box();
   width: 100%;
   padding-right: 60px;
   button[type=submit] {
@@ -99,7 +96,7 @@
       border-color: $nearly-white;
     }
 */
-      &:after {
+      &::after {
 	font-family: "FontAwesome"; 
 	content: '\f096';
       }
diff --git a/public/scss/sidebar.scss b/public/scss/sidebar.scss
new file mode 100644
index 0000000..3920ef5
--- /dev/null
+++ b/public/scss/sidebar.scss
@@ -0,0 +1,135 @@
+@charset "utf-8";
+@import "util";
+
+#sidebar {
+/*
+  box-shadow: 2px 2px 5px darken($dark-green, 15%);
+*/
+//  box-shadow: $choose-box-shadow;
+  outline: none;
+  display: block;
+  background-color: $dark-green;
+  position: fixed;
+  z-index: 7100;
+  color: $nearly-white;
+  width: $logo-left-distance;
+  top: 0;
+  left: 0;
+  height: 100%;
+  padding-top: 80px;
+  transition: all .3s ease-in-out;
+
+  > * {
+    opacity: 1;
+  }
+  &::after {
+    display: block;
+    opacity: 0;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin-right: -30px;
+    background-color: $dark-green;
+    content: '#';
+    font-size: 16pt;
+    width: 16pt;  
+    height: 17pt;
+    padding: 6pt;
+    border-top-right-radius: $standard-border-radius;
+  }
+}
+
+#sidebar:not(:focus):not(.active) {
+  margin-left: -1 * ($logo-left-distance - 15px);
+//  box-shadow: none;
+  &::after {
+    opacity: 1;
+  }
+  > * {
+    opacity: 0;
+    // TODO
+    transition: {
+      property: opacity;
+      duration: .3s;
+    }
+  }
+}
+
+/*
+#sidebar {
+  text-shadow: none;
+  height: 105%;
+  margin-top: -10px;
+  background-color: #496000;
+  left: 0;
+  top: 0;
+  &.active {
+    box-shadow: 2px 2px 5px darken($dark-green, 15%);
+    margin-left: 0px;
+    left: 0;
+    top: 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);
+	text-shadow: none;
+	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;
+    }
+  }
+}
+*/
\ No newline at end of file
diff --git a/public/scss/tutorial.scss b/public/scss/tutorial.scss
new file mode 100644
index 0000000..74937fc
--- /dev/null
+++ b/public/scss/tutorial.scss
@@ -0,0 +1,107 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 3px;
+
+body.embedded {
+  background-color: $nearly-white;
+}
+
+#tutorial {
+  position: fixed;
+  z-index: 9999;
+  top:    5%;
+  bottom: 5%;
+  left:   2%;
+  right:  2%;
+  padding-right: $right-match-distance;
+  background-color: $nearly-white;
+  ul.action {
+    display: block;
+  }
+  border: {
+    width: $border-size;
+    color: $dark-orange;
+    style: solid;
+    radius: $standard-border-radius;
+  }
+  box-shadow: $choose-box-shadow;
+  iframe {
+    margin: 0;
+    width: 100%;
+    min-height: 100%;
+    border-width: 0;
+    background: {
+      image:url('#{$img-path}/korap-bg-kalamar.svg');
+      repeat: no-repeat;
+      position: center center;
+      size: 20%;
+    }
+  }
+}
+
+main.tutorial {
+  margin-left: $logo-left-distance + 15px;
+}
+
+/*
+#tutorial {
+  iframe {
+    width: 100%;
+    min-height: 100%;
+    border: {
+      width: 0;
+      radius: 10px;
+    }
+    background: {
+      image:url('#{$basepath}/img/korap-bg-kalamar.svg');
+      size: 10%;
+      repeat: no-repeat;
+      position: center center;
+      color: white;
+    }
+  }
+
+  display: block;
+  background-color: $dark-green;
+  border-radius: 15px;
+  &:not(.active) {
+    display: none;
+  }
+  &.active {
+    display: block;
+  }
+  > i,
+  > a > i {
+    font-size: 20pt;
+    color: $dark-green;
+    position: absolute;
+    background-color: rgba(255,255,255,0.5);
+    z-index: 100;
+    top: 10pt;
+    right: 20pt;
+    cursor: pointer;
+  }
+  > a > i {
+    right: 40pt;
+  }
+}
+
+div.test {
+  display: block;
+  border-left: 10px solid $dark-green;
+  margin: 1em;
+  padding-left: 5px;
+  p {
+    color: black;
+    &.fail {
+      font-weight: bold;
+      color: red;
+    }
+    &.pass {
+      font-weight: bold;
+      color: green;
+    }
+  }
+}
+*/
\ No newline at end of file
diff --git a/public/scss/util.scss b/public/scss/util.scss
index 7c3f056..d81b7f9 100644
--- a/public/scss/util.scss
+++ b/public/scss/util.scss
@@ -1,9 +1,23 @@
 /**
+ * Official IDS colors
+ */
+$ids-orange-1: rgb(246, 168,   0);
+$ids-orange-2: rgb(242, 148,   0);
+$ids-grey-1:   rgb(135, 136, 138);
+$ids-grey-2:   rgb(217, 218, 219);
+$ids-blue-1:   rgb(  0, 158, 224); // Pragmatik
+$ids-blue-2:   rgb(188, 228, 247); // Pragmatik
+$ids-green-1:  rgb( 99, 111,   7); // Grammatik
+$ids-green-2:  rgb(227, 232, 163); // Grammatik
+$ids-pink-1:   rgb(193,   0,  43); // Lexik
+$ids-pink-2:   rgb(250, 243, 222); // Lexik
+
+/**
  * Orange Colors
  */
 $light-orange:   #f4eebb; // #ffe56a;
 $middle-orange:  #ffd080;
-$dark-orange:    #ffa500;
+$dark-orange:    $ids-orange-1; // #ffa500;
 $darker-orange:  #ff8000;
 $darkest-orange: darken($dark-orange, 20%);
 // $light-orange-2: #f4eebb;, #ffd080;
@@ -12,9 +26,9 @@
 /**
  * Green Colors
  */
-$dark-green:    #496000;
-$middle-green:  #688704;
-$light-green:   #7ba400;
+$dark-green:    $ids-green-1; // #496000;
+$middle-green:  lighten($ids-green-1, 5%); // $ids-green-1; // #688704;
+$light-green:   lighten($ids-green-1, 10%); // #7ba400;
 
 /**
  * Blue Colors
@@ -27,12 +41,16 @@
 /*
  * Grey
  */
-$light-grey:   #ddd;
+$light-grey:   $ids-grey-2; // #ddd;
 $dark-grey:    #555;
 $middle-grey:  #999;
 // $nearly-white: #f5f5f5;
 $nearly-white: #fff;
 
+$middle-red: #c1002b;
+$light-red: lighten($middle-red, 40%);
+$dark-red: darken($middle-red, 40%);
+
 $dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
 $light-shadow: 1px 1px rgba(255,255,255,0.5);
 
@@ -47,7 +65,7 @@
 $kwic-match-color:  $dark-grey;
 $kwic-match-shadow: $light-shadow;
 
-$kwic-highlight-1:  #c1002b;
+$kwic-highlight-1:  $middle-red;
 $kwic-highlight-2:  $dark-blue;   // #009ee0;
 $kwic-highlight-3:  $dark-orange; // #f29400;
 $kwic-highlight-4:  $light-green;
@@ -57,7 +75,7 @@
 $choose-border: 2px solid $choose-border-color;
 $choose-color:  $dark-grey;
 $choose-blind-color:  $middle-grey;
-$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+$choose-box-shadow: 2px 2px 2px  rgba(0,0,0,0.2);
 $standard-border-radius: 6px;
 
 /**
@@ -71,6 +89,7 @@
  */
 $standard-margin: 30px;
 $right-match-distance: 20px;
+$logo-left-distance: 230px;
 
 @mixin blind {
   position: absolute;
@@ -98,6 +117,13 @@
   border-color: $dark-green;
 }
 
+@mixin choose-remove {
+  color: $nearly-white;
+  text-shadow: none;
+  background-color: $middle-red;
+  border-color: $dark-red;
+}
+
 @mixin color-transition {
   transition: color 0.3s ease 0s;
 }
diff --git a/public/scss/vc.scss b/public/scss/vc.scss
index 4d759ef..1ed7959 100644
--- a/public/scss/vc.scss
+++ b/public/scss/vc.scss
@@ -2,11 +2,11 @@
 @import "util";
 
 $left-padding: 28pt; // 2.8em;
-$border-size: 4px;
+$border-size: 2px;
 
 .vc {
   background-color: $light-green;
-
+  margin-top: 10px;
   .docGroup {
     position: relative;
     display: inline-block;
@@ -15,7 +15,7 @@
     margin-left: $left-padding; // 2.8em
 
     // .6em .5em
-    border-width: 0 $border-size;
+    border-width: 0 (2 * $border-size);
 
     padding: {
       top: 10pt;
@@ -23,10 +23,7 @@
       left: 0pt;
       right: 6pt;
     }
-/*
 
-    background-color: yellow;
-*/
     border: {
       radius: $standard-border-radius * 2;
       style: solid;