diff --git a/dev/scss/main/alertify.scss b/dev/scss/main/alertify.scss
new file mode 100644
index 0000000..0eb3194
--- /dev/null
+++ b/dev/scss/main/alertify.scss
@@ -0,0 +1,11 @@
+@import "../util";
+
+/*
+article.alertify-log {
+  text-shadow:none;
+}
+*/
+
+article.alertify-log-warn {
+  background-color: $dark-orange;
+}
diff --git a/dev/scss/main/highlight.scss b/dev/scss/main/highlight.scss
new file mode 100644
index 0000000..1c3cb99
--- /dev/null
+++ b/dev/scss/main/highlight.scss
@@ -0,0 +1,121 @@
+/*
+ * Based on github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+ */
+.hljs {
+  display: block;
+  padding: 0.5em;
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #998;
+  font-style: italic
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #333;
+  font-weight: bold
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #099;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula {
+  color: #d14
+}
+
+.hljs-title,
+.hljs-id,
+.coffeescript .hljs-params,
+.scss .hljs-preprocessor {
+  color: #900;
+  font-weight: bold
+}
+
+.javascript .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-title,
+.hljs-subst {
+  font-weight: normal
+}
+
+.hljs-class .hljs-title,
+.haskell .hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #458;
+  font-weight: bold
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: #008080
+}
+
+.hljs-regexp {
+  color: #009926
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073
+}
+
+.hljs-built_in,
+.lisp .hljs-title,
+.clojure .hljs-built_in {
+  color: #0086b3
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999;
+  font-weight: bold
+}
+
+.hljs-deletion {
+  background: #fdd
+}
+
+.hljs-addition {
+  background: #dfd
+}
+
+.diff .hljs-change {
+  background: #0086b3
+}
+
+.hljs-chunk {
+  color: #aaa
+}
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
new file mode 100644
index 0000000..f04cf9b
--- /dev/null
+++ b/dev/scss/main/kwic.scss
@@ -0,0 +1,293 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+#search {
+  position: relative;
+  margin-bottom: 44px;
+  overflow: visible;
+
+  &.match {
+    margin-top: 14pt;
+  }
+
+  ol {
+    width: auto;
+    overflow-x: hidden;
+    overflow-y: visible;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    text-indent: 0;
+    border: 1px solid $kwic-border;
+    font-size: 10pt;
+    > li {
+      border: {
+	style: solid;
+	color: $dark-orange;
+	width: 0;
+      }
+      &:not(.active):not(:target) {
+	width: 99999%;
+	margin-left: -49999.5%;
+	background-color: $kwic-line-noneven;
+	overflow-x: hidden;
+	overflow-y: visible;
+	white-space: no-wrap;
+	cursor: pointer;
+	padding: 5pt 0 6pt 0;
+	&:nth-of-type(even) {
+          background-color: $kwic-line-even;
+	}
+	.matchinfo {
+	  display: none;
+	}
+	> div > div.snippet {
+	  text-overflow: ellipsis;
+	  text-indent: 0;
+	  text-shadow: $light-shadow;
+	}
+      }
+      > div {
+	> div.snippet {
+          > span,
+          > mark {
+            white-space: no-wrap !important;
+            > span {
+              white-space: no-wrap !important;
+            }
+            color: #666;
+          }
+          > mark,
+	  > span.match {
+            font-weight: bold;
+            /* text-shadow: $kwic-match-shadow; */
+            color: $kwic-match-color;
+            padding-left: 4pt;
+            padding-right: 2pt;
+          }
+	}
+      }
+    }
+
+    /* active view */
+    > li.active,
+    > li:target {
+      text-align: left;
+      width: auto;
+      cursor: normal;
+      white-space: wrap;
+      height: auto;
+      border-width: 2px;
+      background-color: $dark-orange;
+//      @include light-noise;
+      position: relative;
+      > div {
+	min-height: 42pt;
+	> div.snippet {
+	  background-color: $light-orange;
+	  > * {
+	    background-color: transparent;
+	  }
+	  padding: {
+	    top: 0;
+	    right: 0;
+	    bottom: 5pt;
+	    left: 5pt;
+	  };
+	  margin: {
+	    top: 0;
+	    right: $right-match-distance; // 3em;
+	    bottom: 0;
+	    left: 0; // 5pt margin-top
+	  }
+	  > span {
+            line-height: 1.4em;
+            width: auto;
+            &.context-left {
+              margin-left: 0;
+              display: inline;
+              overflow: visible;
+              text-align: left;
+              width: auto;
+            }
+	  }
+	}
+      }
+    }
+
+    /* Actions */
+    > li {
+      ul.action {
+	display: none;
+      }
+
+      /* active actions */
+      &.active, &:target {
+	ul.action {
+	  display: block;
+	}
+      }
+      &:not(.active):not(:target) p.ref {
+	display: none;
+      }
+      &.active p.ref,
+      &:target p.ref {
+//	background-color: $dark-orange;
+	color: white;
+	padding: 3pt 10pt;
+	padding-right: $right-match-distance;
+	margin: 0pt;
+	width: 100%;
+	bottom: 0;
+	z-index: 30;
+      }
+    }
+  }
+}
+
+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: $fa-close;
+      }
+      &.info::after {
+	font-family: "FontAwesome";
+	content: $fa-info;
+      }
+    }
+  }
+}
+
+/*
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.left {
+  display: inline-block;
+  text-align: right;
+  width: 50.046%;
+}
+
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.separator {
+  width: 0px;
+  height: 1em;
+  margin-bottom: -2px;
+  display: inline-block;
+  line-height: 100%;
+  border: 1px solid #009EE0;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+ol.align-free > li > div > div.snippet > span.right {
+  text-align: left;
+}
+*/
+
+ol.align-left > li > div > div.snippet > span.context-left {
+  display: inline-block;
+  text-align: right;
+  width: 50.01%;
+}
+
+ol.align-right {
+  text-align: right;
+  > li:not(.active):not(:target) > div > div.snippet > span.context-right {
+    display: inline-block;
+    text-align: left;
+    width: 49.915%;
+  }
+}
+
+/**
+ * Highlights
+ */
+mark {
+  background-color: inherit;
+  color: inherit;
+}
+
+mark > mark,
+em,
+.level-0 {
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  padding-bottom: 0px;
+  font-style: normal;
+}
+
+mark > mark > mark,
+em > em,
+.level-1 {
+  padding-bottom: 3px;
+}
+
+mark > mark > mark > mark,
+em > em > em,
+.level-2 {
+  padding-bottom: 6px;
+}
+
+li {
+  &:not(.active) mark > mark > mark > mark,
+  &:not(.active) em > em > em {
+    line-height: 180%;
+  }
+  &.active mark > mark > mark > mark,
+  &.active em > em > em {
+    line-height: 250%;
+  }
+}
+
+.class-1 { border-color: $kwic-highlight-1; }
+.class-2 { border-color: $kwic-highlight-2; }
+.class-3 { border-color: $kwic-highlight-3; }
+.class-4 { border-color: $kwic-highlight-4; }
+
+/*
+span.more:before {
+  content: "…";
+  padding-left: 2pt;
+  padding-right: 2pt;
+}
+*/
+
+div.snippet.startMore:before,
+div.snippet.endMore:after {
+  content: "…";
+  padding-left: 2pt;
+  padding-right: 2pt;
+}
+
+
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
new file mode 100644
index 0000000..1512a56
--- /dev/null
+++ b/dev/scss/main/logos.scss
@@ -0,0 +1,112 @@
+@charset "utf-8";
+@import "../util";
+
+.logo {
+  &::after {
+    content: "" !important;
+  }
+  > * {
+    background: {
+      repeat: no-repeat;
+      size: 90%;
+      position: 50% 50%;
+    }
+    > span {
+      margin-left: -3000px;
+    }
+  }
+}
+
+/**
+ * Background image for the front page
+ */
+#kalamar-bg {
+  position: fixed;
+  height: 110%;
+  width: 175%;
+  top: 0;
+  z-index: -5000;
+  opacity: .1;
+  background: {
+    image:url('#{$img-path}/korap-bg-kalamar.svg');
+    size: 50%;
+    repeat: no-repeat;
+    position: 50% 50%;
+  }
+}
+
+/**
+ * Logo table of the front page
+ */
+#logos {
+  position: relative;
+  text-align: right;
+  font-size: 85%;
+  right: 0;
+  width: 100%;
+  margin-left: $standard-margin;
+  padding-left: 60%;
+  > div {
+    border-top: 26px solid $dark-orange;
+    padding-right: 2em;
+  }
+  p {
+    text-align: left;
+    display: inline-block;
+  }
+}
+
+
+/**
+ * Logo: Institute for German Language
+ */
+#ids-logo {
+  display: block;
+  width: (910 / 60) + em;
+  height: (176 / 60) + em;
+  background: {
+    image:url('#{$img-path}/ids-institute-for-the-german-language.svg');
+  }
+}
+
+/**
+ * Logo: Member of the Leibniz Association
+ */
+#leibniz-logo {
+  display: block;
+  width: (199 / 20) + em;
+  height: (130 / 20) + em;
+  background: {
+    image:url('#{$img-path}/member-of-the-leibniz-association.svg');
+  }
+}
+
+/**
+ * Logo: KorAP
+ */
+h1 {
+  position: absolute;
+  margin: 0;
+  margin-left:15px;
+  left: 0;
+  top: 0;
+  width: 7.8em;
+  height: 2.4em;
+  z-index: 7200;
+  background: {
+    size: 72%;
+    image: url('#{$img-path}/korap-logo-kalamar.svg');
+  }
+}
+
+#overview {
+  text-align: center;
+  width: 100%;
+}
+
+/*
+#leibniz-logo, #ids-logo {
+  height: (130 / 20) + em;
+}
+
+*/
\ No newline at end of file
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
new file mode 100644
index 0000000..ea569fa
--- /dev/null
+++ b/dev/scss/main/main.scss
@@ -0,0 +1,12 @@
+@import "highlight";  // Navigation on the left side
+@import "kwic";       // Kwic view information
+@import "logos";      // Logo images
+@import "matchinfo";  // Match table and tree
+@import "pagination"; // Pagination
+@import "query";      // View query
+@import "resultinfo"; // Information on results
+@import "sidebar";    // Navigation on the left side
+@import "tutorial";   // Embedded and non-embedded tutorial
+@import "alertify";
+@import "alertify/alertify.core.css";
+@import "alertify/alertify.default.css";
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
new file mode 100644
index 0000000..a0be411
--- /dev/null
+++ b/dev/scss/main/matchinfo.scss
@@ -0,0 +1,241 @@
+@charset "utf-8";
+@import "../util";
+
+$left-width: 176px;
+$border-size: 2px;
+$left-distance: $left-width + ($border-size * 2);
+
+@mixin cell-info {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 1px 6px;
+  margin: 0px;
+}
+
+/**
+ * Table view
+ *
+ * The table view is complicated, as the
+ * first column has to be static.
+ */
+@mixin matchinfo-head {
+  border-width: 0px;
+  border-top: $border-size solid $darker-orange; // #ff8000;
+  width: $left-width / 2;
+}
+
+div.matchinfo {
+  position: relative;
+  width: 100%;
+  padding-top: $border-size;
+//  background-color: $dark-orange;
+  height: auto;
+  font-size: 10pt;
+  text-align: left;
+  > p.addtree {
+    position: relative;
+    @include choose-item;
+    border: {
+      width: $border-size;
+      style: solid;
+      radius: $standard-border-radius;
+    }
+
+    font-size: inherit;
+    margin: $border-size $border-size 0 $border-size !important;
+    width: $left-width;
+    text-align: center;
+    cursor: pointer;
+    padding: 0 !important;
+
+    &:hover {
+      cursor:pointer;
+      @include choose-hover;
+    }
+
+    *.menu {
+      border-top-right-radius: 8px;
+      position: absolute;
+      width: $left-width;
+      left: 0;
+      bottom: 0;
+      text-align: left;
+      margin: -1* $border-size;
+      margin-top: 0;
+      > li:first-of-type {
+	border-top-right-radius: 5px;
+      }
+    }
+  }
+}
+
+div.matchtable {
+  z-index: 20;
+  margin-left: $left-distance - ($border-size / 2);
+  margin-right: $right-match-distance;
+  padding: 0;
+  overflow-x: auto;
+  overflow-y: visible;
+  width: auto;
+  table {
+    display: table;
+    border-collapse: separate;
+    border-spacing: 0px;
+  }
+  th {
+    color: $nearly-white;
+  }
+  thead {
+    tr th {
+      background-color: $darker-orange;
+      border-top-width: 0px !important;
+    }
+  }
+  tbody {
+    > tr:nth-of-type(1) > th {
+      border-top-color: transparent;
+    }
+    /**
+     * Click on a row and it's highlighted.
+     */
+    > tr:focus {
+      outline: none;
+      /*
+	outline:  (2 * $border-size) solid $light-green;
+	-moz-outline-radius: $border-size;
+	outline-radius: $border-size;
+	*/
+      background-color: $light-green;
+      border-color: $light-green;
+      td {
+        background-color: inherit;
+        color: $nearly-white;
+        border-color: $light-green;
+      }
+    }
+  }
+  tr {
+    /**
+     * The first two columns.
+     */
+    > th:nth-of-type(1),
+    > th:nth-of-type(2) {
+      position: absolute;
+      z-index: 80;
+      vertical-align: middle;
+      left: 0px;
+      @include matchinfo-head;
+    }
+    > th:nth-of-type(2) {
+      left: ($left-width / 2) + $border-size;
+    }
+    > * {
+      @include cell-info;
+      border: ($border-size / 2) solid $dark-orange;
+    }
+  }
+  tr > td {
+    background-color: $middle-orange; // $nearly-white;
+    white-space: nowrap;
+    vertical-align: top;
+    text-align: center;
+  }
+  tr:nth-child(even) > td {
+    background-color: $light-orange;
+  }
+}
+
+/**
+  * Tree view
+  */
+div.matchtree {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: visible;
+  padding: 0;
+  margin-top: 1pt;
+
+  /**
+   * Label
+   */
+  h6 {
+    display: inline;
+    font-size: inherit;
+    color: $nearly-white;
+    margin: 0;
+    padding: 0 !important;
+    float: left;
+    > span {
+      @include matchinfo-head;
+      @include cell-info;
+      display: inline-block;
+      margin: 0;
+      &:nth-of-type(2) {
+	margin-left: $border-size;
+      }
+    }
+  }
+  > div {
+    overflow-x: auto;
+    margin: $border-size;
+    margin-left: $left-distance;
+    margin-right: $right-match-distance;
+
+    background-color: $light-orange; // $nearly-white; // $light-orange;
+    > em {
+      color: $nearly-white;
+      cursor: pointer;
+      display: block;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: $right-match-distance;
+      border-width: 0;
+      z-index: 8;
+      text-decoration:none;
+      text-align: center;
+      font-weight: bold;
+      font-style: normal;
+
+      &::after {
+	font-family: 'FontAwesome';
+	content: $fa-close;
+      }
+    }
+  }
+}
+
+/**
+ * SVG tree
+ */
+path.edge {
+  stroke: $darker-orange;
+  stroke-width: 2px;
+  fill: none;
+}
+
+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;
+}
+
+g.leaf > rect {
+  display: none;
+}
+
+g > text {
+  text-anchor: middle;
+  font-size: 9pt;
+}
+
+g.leaf > text {
+  font-size: 10pt;
+  overflow: visible;
+}
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
new file mode 100644
index 0000000..d057dd0
--- /dev/null
+++ b/dev/scss/main/pagination.scss
@@ -0,0 +1,114 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size : 2px;
+
+/**
+ * The pagination view
+ */
+/*
+<div id="pagination">
+  <a rel="prev"><span><i class="fa fa-caret-left"></i></span></a>
+  <a rel="self"><span>1</span></a>
+  <a href="#p=2"><span>2</span></a>
+  <a href="#3"><span>3</span></a>
+  <span><i class="fa fa-ellipsis-h"></i></span>
+  <a href="#67"><span>67</span></a>
+  <a rel="next" href="#2"><span><i class="fa fa-caret-right"></i></span></a>
+</div>
+*/
+#pagination {
+  /**
+   * Always in fixed position.
+   * This may need to be overwritten in case multiple
+   * paginations have to be activated.
+   */
+  font-size: 0;
+  position: fixed;
+  right: 20px;
+  bottom: 24px;
+  z-index: 400;
+  padding: 0;
+  height: auto;
+  line-height: 0;
+
+  > a {
+    margin: 0;
+    font-size: 10pt;
+    padding: 0;
+
+    > span {
+      box-shadow: $choose-box-shadow;
+      @include standard-text-padding;
+      @include choose-item;
+      display: inline-block;
+      line-height: 2em;
+      text-align: center;
+      border: {
+	top-width: $border-size;
+	bottom-width:  $border-size;
+	top-style: solid;
+	bottom-style: solid;
+      }
+    }
+
+    &:not(:link):not([rel=self]) span {
+      color: $choose-blind-color;
+    }
+
+    &.ellipsis > span {
+      > span {
+	@include blind;
+      }
+      &::after {
+	font-family: 'FontAwesome';
+	content: $fa-elipsis;
+      }
+    }
+
+    &[rel=self] > span {
+      @include choose-active;
+      border {
+	left-width: $border-size;
+	right-width: $border-size;
+	left-style: solid;
+	right-style: solid;
+      }
+    }
+
+    &[rel=prev] > span {
+      border: {
+	top-left-radius: $standard-border-radius;
+	bottom-left-radius: $standard-border-radius;
+	left-width: $border-size;
+	left-style: solid;
+      }
+      > span {
+	@include blind;
+      }
+      &::after {
+	font-family: 'FontAwesome';
+	content: $fa-previous;
+      }
+    }
+
+    &[rel=next] > span {
+      border: {
+	top-right-radius: $standard-border-radius;
+	bottom-right-radius: $standard-border-radius;
+	right-width: $border-size;
+	right-style: solid;
+      }
+      > span {
+	@include blind;
+      }
+      &::after {
+	font-family: 'FontAwesome';
+	content: $fa-next;
+      }
+    }
+    &:link:hover span {
+      @include choose-hover;
+    }
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/main/query.scss b/dev/scss/main/query.scss
new file mode 100644
index 0000000..ab45238
--- /dev/null
+++ b/dev/scss/main/query.scss
@@ -0,0 +1,24 @@
+@charset "utf-8";
+@import "../util";
+
+
+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/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
new file mode 100644
index 0000000..8717f72
--- /dev/null
+++ b/dev/scss/main/resultinfo.scss
@@ -0,0 +1,19 @@
+@charset "utf-8";
+@import "../util";
+
+div.resultinfo {
+  clear: both;
+
+  p.found {
+    font-size: 10pt;
+    padding: 0;
+    margin: 0;
+    text-align: right;
+  }
+}
+
+#total-results {
+  color: $total-results;
+  font-weight: bold;
+}
+
diff --git a/dev/scss/main/sidebar.scss b/dev/scss/main/sidebar.scss
new file mode 100644
index 0000000..7c74912
--- /dev/null
+++ b/dev/scss/main/sidebar.scss
@@ -0,0 +1,185 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+aside {
+  // 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;
+  > div {
+    overflow-y: auto;
+    overflow-x: visible;
+    max-height: 100%;
+  }
+  > * {
+    opacity: 1;
+  }
+  &::after {
+    display: block;
+    opacity: 0;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin-right: -30px;
+    background-color: $dark-green;
+    font-family: FontAwesome;
+    content: $fa-bars;
+    font-size: 16pt;
+    width: 16pt;  
+    height: 17pt;
+    padding: 6pt;
+    border-top-right-radius: $standard-border-radius;
+  }
+  h2 {
+    font: {
+      size: 100%;
+      weight: bold;
+    }
+    line-height: 2em;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+  }
+
+  ul {
+    list-style-type: none;
+/*
+    background-color: $light-green;
+*/
+    margin: 0;
+    font-size: 10pt;
+    text-indent: 0;
+    padding: 0;
+    li {
+      padding: 0;
+      > a {
+	padding: $item-padding;
+      }
+      > a:link {
+	@include choose-item;
+	border-right: {
+	  width: $border-size;
+	  style: solid;
+	}
+
+	display: block;
+	&:visited {
+	  color: inherited;
+	}
+	&:hover {
+	  // color: inherit;
+	  transition: none;
+	  @include choose-hover;
+	}
+	&.active, &:active {
+	  @include choose-active;
+	}
+      }
+      h3 {
+        font: {
+	  weight: bold;
+	  size: 100%;
+	}	  
+	padding: 0;
+	margin: 0;
+      }
+/*
+      &.active {
+	text-shadow: none;
+	h3 {
+	  margin-bottom: 2pt;
+	  padding-bottom: 2pt;
+	  border-bottom: 1px solid black;
+	}
+      }
+*/
+      > a {
+	padding-left: 6pt;
+      }
+      li > a {
+	padding-left: 18pt;
+      }
+      li li > a {
+	padding-left: 36pt;
+      }
+    }
+  }
+  nav > ul > li > a {
+    font-weight: bold;
+  }
+}
+
+
+aside:not(:focus):not(.active) {
+  margin-left: -1 * ($logo-left-distance - 15px);
+//  box-shadow: none;
+/*
+  overflow-y: hidden;
+  overflow-x: visible;
+*/
+  &::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;
+  }
+  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/dev/scss/main/tutorial.scss b/dev/scss/main/tutorial.scss
new file mode 100644
index 0000000..3aeebb3
--- /dev/null
+++ b/dev/scss/main/tutorial.scss
@@ -0,0 +1,132 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+
+#tutorial {
+  position: fixed;
+  z-index: 9999;
+  top:    5%;
+  bottom: 5%;
+  left:   2%;
+  right:  2%;
+  padding-right: $right-match-distance;
+/*
+  padding: 0;
+  margin: 0;
+*/
+  background-color: $nearly-white;
+  ul.action {
+    background-color: $middle-grey;
+    display: block;
+  }
+  border: {
+    width: 2 * $border-size;
+//    color: $dark-orange;
+    color: $dark-grey;
+    style: solid;
+    radius: $standard-border-radius;
+  }
+  box-shadow: $choose-box-shadow;
+  iframe {
+    border-width: 0;
+    width: 100%;
+    // Hack for a Firefox bug
+    min-height: 100.1%;
+    background: {
+      image:url('#{$img-path}/korap-bg-kalamar.svg');
+      repeat: no-repeat;
+      position: center center;
+      size: 20%;
+    }
+  }
+}
+
+body.embedded {
+  background-color: $nearly-white;
+  aside {
+/*
+    border-right: {
+      width: $border-size;
+      style: solid;
+    }
+*/
+    padding-top: 0;
+    @include choose-item;
+    background-color: $middle-grey;
+    > div {
+      position: relative;
+      top: 50%;
+      -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      // margin-right: -1 * $border-size;
+    }
+  }
+}
+
+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