diff --git a/dev/scss/main/alertify.scss b/dev/scss/main/alertify.scss
index 55f6c59..be2f656 100644
--- a/dev/scss/main/alertify.scss
+++ b/dev/scss/main/alertify.scss
@@ -2,11 +2,9 @@
 @import "alertify/alertify-core";
 @import "alertify/alertify-default";
 
-/*
-article.alertify-log {
-  text-shadow:none;
-}
-*/
+/**
+ * Alertify styles.
+ */
 
 article.alertify-log-warn {
   background-color: $dark-orange;
@@ -19,4 +17,8 @@
   display: block;
   color: $dark-red;
   font-size: 70%;
+}
+
+.alertify-log-error {
+  background-color: $alert-red;
 }
\ No newline at end of file
diff --git a/dev/scss/main/alertify/alertify-default.scss b/dev/scss/main/alertify/alertify-default.scss
index 97a1232..82637d4 100644
--- a/dev/scss/main/alertify/alertify-default.scss
+++ b/dev/scss/main/alertify/alertify-default.scss
@@ -72,11 +72,13 @@
   color: #FFF;
   // text-shadow: -1px -1px 0 rgba(0,0,0,.5);
 }
+/*
 .alertify-log-error {
   background: #FE1A00;
   //  background: rgba(254,26,0,.9);
     background: rgb(254,26,0);
 }
+*/
 .alertify-log-success {
   background: #5CB811;
 //  background: rgba(92,184,17,.9);
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
index 55bd6b9..49df159 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/main/buttongroup.scss
@@ -8,58 +8,61 @@
   > span {
     cursor: pointer;
   }
-
-  span.button-icon {
-    font-family: 'FontAwesome';
-    > span {
-      @include blind;
-    }
-  }
   
-  &.button-panel, &.operators {
-    > span, a {
-      box-shadow: $choose-box-shadow;
-      font-size: 9pt;
-      font-weight: normal;
-      line-height: 1.5em;
-      padding: 0 4px;
-      display: inline-block;
+  &.button-panel,
+  &.operators {
+    > span,
+    a {
       @include choose-item;
+      box-shadow:   $choose-box-shadow;
+      font-size:    9pt;
+      font-weight:  normal;
+      line-height:  1.5em;
+      padding:      0 4px;
+      display:      inline-block;
       border-style: solid;
       border-width: $border-size 0;
+
       &:hover {
 	      @include choose-hover;
       }
+
       &:first-child {
 	      border: {
-	      left-width: $border-size;
-	      top-left-radius: $standard-border-radius;
-	      bottom-left-radius: $standard-border-radius;
-	    }
+	        left-width:          $border-size;
+	        top-left-radius:     $standard-border-radius;
+	        bottom-left-radius:  $standard-border-radius;
+	      }
       }
+
       &:last-child {
 	      border: {
-	      right-width: $border-size;
-	      top-right-radius: $standard-border-radius;
-	      bottom-right-radius: $standard-border-radius;
-      }
+	        right-width:         $border-size;
+	        top-right-radius:    $standard-border-radius;
+	        bottom-right-radius: $standard-border-radius;
+        }
       }
     }
   }
 
   &.button-panel {
-    > span, a {
+    > span,
+    a {
+
       > span.check {
-        font-family: 'FontAwesome';
-        width: 1.2em;
-        display: inline-block;
+        @include icon-font;
+        width:      1.2em;
+        display:    inline-block;
         text-align: left;
+
         &:not(.checked)::after {
           content: $fa-check;
         }
+
         &.checked::after {
           content: $fa-checked;
         }
+
         > span {
           @include blind;
         }
@@ -68,23 +71,27 @@
   }
 
   &.button-view {
-    display: block;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 20;
-    margin: 0;
-    padding: 0;
-    width: $right-view-distance;
+    position:  absolute;
+    display:   block;
+    right:     0;
+    top:       0;
+    z-index:   20;
+    margin:    0;
+    padding:   0;
+    width:     $right-view-distance;
+    font-size: 10pt;
+    color:     $nearly-white;
+
     > span:first-child {
       margin-top: $border-size
     }
+
     > span {
-      display: block !important;
-      border-width: 0;
-      text-decoration:none;
-      text-align: center;
-      font-style: normal;
+      display:         block !important;
+      border-width:    0;
+      text-decoration: none;
+      text-align:      center;
+      font-style:      normal;
       
       &.download::after {
 	      content: $fa-download;
@@ -105,22 +112,24 @@
   }
 }
 
-.button-group.button-view {
-  font-size: 10pt;
-  color: $nearly-white;
-}
-
 
 ul.menu.button-group-list {
   border-top-right-radius: 8px;
-  font-size: 10pt;
-  position: fixed;
-  left: 0;
+  position:   fixed;
+  font-size:  10pt;
+  left:       0;
   text-align: left;
-  margin: -1 * $border-size;
+  margin:     -1 * $border-size;
   margin-top: 0;
+
   > li:first-of-type {
 	  border-top-right-radius: 5px;
   }
 }
 
+.button-icon {
+  @include icon-font;
+  > span {
+    @include blind;
+  }
+}
diff --git a/dev/scss/main/helper.scss b/dev/scss/main/helper.scss
index ec33901..31b07fa 100644
--- a/dev/scss/main/helper.scss
+++ b/dev/scss/main/helper.scss
@@ -1,5 +1,8 @@
+@import "../util"
+
 // Make cursor helper
-body.helper, body.helper a {
+body.helper,
+body.helper a {
   cursor: help !important;
 }
 
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index 7c71e1b..8f83175 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -1,4 +1,10 @@
+@import "../util";
+
+/**
+ * Styles for the intro page
+ */
 div.intro {
+
   // Visited links
   a:visited {
     color: $darkest-orange
@@ -6,11 +12,11 @@
 
   div.announcement {
     background-color: $light-orange;
-    padding: $base-padding;
-    border: 5px dashed $dark-orange;
-    border-radius: 1em;
-    width: 90%;
-    margin: auto;
+    padding:          $base-padding;
+    border:           5px dashed $dark-orange;
+    border-radius:    1em;
+    width:            90%;
+    margin:           auto;
   }
 }
 
diff --git a/dev/scss/main/introjs-ids.scss b/dev/scss/main/introjs-ids.scss
index 01c751e..d97013a 100644
--- a/dev/scss/main/introjs-ids.scss
+++ b/dev/scss/main/introjs-ids.scss
@@ -1,28 +1,32 @@
 @import "../util";
 
+/**
+ * Styles overriding introJS styles
+ */
+
 .introjs-helperLayer {
-    background-color:transparent;
-    }
+  background-color: transparent;
+}
  
-.introjs-tooltip.gTstartSearch{
-    max-width: 500px;
-    }
+.introjs-tooltip.gTstartSearch {
+  max-width: 500px;
+}
 
 
 .tgreeting {
-    font-weight: bold;
-    color: $darkest-orange;
-    }
+  font-weight: bold;
+  color:       $darkest-orange;
+}
 
-.pfirstStep{
-    width: 500px;
-    }
+.pfirstStep {
+  width: 500px;
+}
 
 .introjs-donebutton {
-    float: right;
-    margin-left: 5px;
-    }
+  float:       right;
+  margin-left: 5px;
+}
  
-.introjs-skipbutton{
-    color: $black;
-    }
+.introjs-skipbutton {
+  color: $black;
+}
diff --git a/dev/scss/main/koralquery.scss b/dev/scss/main/koralquery.scss
index d6d4818..53dd64d 100644
--- a/dev/scss/main/koralquery.scss
+++ b/dev/scss/main/koralquery.scss
@@ -1,7 +1,9 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size: 2px;
+/**
+ * Styles for the KoralQuery view.
+ */
 
 #koralquery {
   white-space: pre;
@@ -9,13 +11,14 @@
     // TODO:
     //   Mark this with result-view
     background-color: $nearly-white;
-    overflow-x: auto;
-    font-size: 85%;
+    overflow-x:       auto;
+    font-size:        85%;
+
     margin: {
-      top: 2pt;
-      right: $right-view-distance; // 3em;
+      top:    2pt;
+      right:  $right-view-distance;
       bottom: 2pt;
-      left: 2pt;
+      left:  2pt;
     }
   }
 }
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index 4a3ecce..f207045 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -1,389 +1,373 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size: 2px;
+/**
+ * Styles for the KWIC view.
+ */
+
 $font-size: 10pt;
 
 #search {
-  position: relative;
+  position:      relative;
   margin-bottom: 30px;
-  overflow: visible;
-//  margin-top: 14pt;
-}
+  overflow:      visible;
 
-#search > ol {
-  overflow-x: hidden;
-  overflow-y: visible;
-  width: auto;
-  text-indent: 0;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  border: $result-border-size solid $kwic-border;
-  font-size: $font-size;
+  div.matchinfo {
+    display: none;
+  }
 
-  > li {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: stretch;
-    align-content: stretch;
+  > ol {
+    overflow-x:      hidden;
+    overflow-y:      visible;
+    width:           auto;
+    text-indent:     0;
+    list-style-type: none;
+    margin:          0;
+    padding:         0;
+    border:          $result-border-size solid $kwic-border;
+    font-size:       $font-size;
 
-    div.meta {
-      position: relative;
-      flex: 1 0;
-      min-width: 12em;
-      max-width: 15em;
+    > li {
+      display:        flex;
+      flex-direction: row;
+      flex-wrap:      nowrap;
+      align-items:    stretch;
+      align-content:  stretch;
+      
+      border: {
+        style: solid;
+        color: $dark-orange;
+        width: 0;
+      }
 
-      // Tiny hack
-      &:before {
-        content:" ";
-        display:inline-block;
-        height:100%;
-        vertical-align:middle;
+      // Actions
+      .button-group.button-view {
+        display: none;
+      }
+
+      // Zebra style
+      &:nth-of-type(even) div.match-main div.match-wrap {
+        background-color: $kwic-line-even;
+      }
+
+      // References
+      p.ref {
+        display: none;
       }
       
-      text-align: left;
-      // cursor: initial;
-      width: 2px;
-      z-index: 5;
-      overflow-y: hidden;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      background-color: lighten($middle-grey, 5%);
-      // @include light-noise;
-      border: {
-        color: $dark-grey;
-        style: solid;
-        width: 2px 1px 0 0;
+      div.meta,
+      div.match-main {
+        position: relative;
+	      cursor:   pointer;
       }
-      &:empty {
-        border-width: 0 1px 0 0;
+
+      div.match-main {
+        display:  block;
+        flex:     7 0;
+        z-index:  4;
+        overflow: hidden;
+
+        > div.match-wrap {
+          width:            99999%;
+	        margin-left:      -49999.5%;
+	        background-color: $kwic-line-noneven;
+	        overflow-x:       hidden;
+	        overflow-y:       visible;
+	        white-space:      normal;
+        }
       }
-      &.flip {
-        background-color: lighten($middle-grey, 17%);
+
+      div.meta {
+        flex:             1 0;
+        min-width:        12em;
+        max-width:        15em;
+        text-align:       left;
+        width:            2px;
+        z-index:          5;
+        overflow-y:       hidden;
+        overflow-x:       hidden;
+        text-overflow:    ellipsis;
+        white-space:      nowrap;
+        background-color: lighten($middle-grey, 5%);
+        color:            $nearly-white;
+        font-size:        75%;
+        padding:          0 5pt;
+
+        border: {
+          color: $dark-grey;
+          style: solid;
+          width: 2px 1px 0 0;
+        }
+
+        // Tiny hack
+        &:before {
+          content:        " ";
+          display:        inline-block;
+          height:         100%;
+          vertical-align: middle;
+        }
+        
+        &:empty {
+          border-width: 0 1px 0 0;
+        }
+
+        &.flip {
+          background-color: lighten($middle-grey, 17%);
+        }
       }
-      color: $nearly-white;
-      font-size: 75%;
-      padding: 0 5pt;
-    }
-    &:first-of-type div.meta {
-      border-top-width: 0;
-    }
-    &:last-of-type div.meta {
-      border-bottom-width: 0;
+
+      &:first-of-type div.meta {
+        border-top-width: 0;
+      }
+
+      &:last-of-type div.meta {
+        border-bottom-width: 0;
+      }
     }
   }
 }
 
-#search > ol > li {
-  border: {
-    style: solid;
-    color: $dark-orange;
-    width: 0;
-  }
-}
 
-#search {
-  div.meta, div.match-main {
-    position: relative;
-	  cursor: pointer;
-  }
-  /*
-	    &:not(.active):not(:target) {
-        &:nth-of-type(even) div.main-col {
+/**
+ * Snippet rules
  */
-  div.match-main {
-    display: block;
-    flex: 7 0;
-    z-index: 4;
-    overflow: hidden;
-
-    > div.match-wrap {
-      width: 99999%;
-	    margin-left: -49999.5%;
-	    background-color: $kwic-line-noneven;
-	    overflow-x: hidden;
-	    overflow-y: visible;
-	    white-space: normal;
-    }
-  }
-}
-
-#search ol li:nth-of-type(even) div.match-main div.match-wrap {
-  background-color: $kwic-line-even;
-}
-
-
 div.snippet {
 	text-overflow: ellipsis;
-	text-indent: 0;
-	text-shadow: $light-shadow;
-  font-size: 0;
-  white-space: nowrap !important;
+	text-indent:   0;
+	text-shadow:   $light-shadow;
+  font-size:     0;
+  white-space:   nowrap !important;
 
   > span, mark {
-	  padding: 5pt 0 6pt 0;
+	  padding:   5pt 0 6pt 0;
     font-size: $font-size;
-    // white-space: nowrap;
-    // > span {
-      // white-space: nowrap;
-    // }
   }
-  > mark, > span.match {
+
+  > mark,
+  > span.match {
     font-weight: bold;
     color: $black;
     text-shadow: none;
     padding-left: 4pt;
     padding-right: 2pt;
   }
+
   > span.match > span.cutted::after {
+    @include icon-font;
     content: $fa-cut;
-    font-family: FontAwesome;
+    color:   $light-green;
+
     padding: {
-      left: 4pt;
+      left:  4pt;
       right: 4pt;
     }
-    color: $light-green;
-  }
-}
-
-
-
-#search div.matchinfo {
-  display: none;
-}
-
-#search {
-  li.active div.matchinfo {
-    display: block;
   }
 
-  li.active + li.active {
-    border-top: $border-size solid $light-grey;
-    padding-top: 3 * $border-size;
-    // > ul.action.right {
-    .button-group.button-view {
-      padding-top: 3 * $border-size;
-    }
+  &.startMore:before,
+  &.endMore:after {
+    content:       "…";
+    padding-left:  2pt;
+    padding-right: 2pt;
   }
-}
 
-
-
-/*
-#search div.match-main {
-  position: relative;
-  z-index: 4;
-  > div.match-wrap {
-    margin-left: -49999.5%;
-    width: 99999%;
-    overflow-x: hidden;
-    overflow-y: visible;
-    position: relative;
-    box-sizing: border-box;
+  // Flags
+  div.flag {
+    position:           absolute;
+    height:             100%;
+    top:                0;
+    left:               0;
+    width:              11px;
+    background-color:   $dark-orange;
+    border-right:       1px solid $darkest-orange;
   }
 }
-*/
-
-div.snippet.startMore:before,
-div.snippet.endMore:after {
-  content: "…";
-  padding-left: 2pt;
-  padding-right: 2pt;
-}
-
-/**
- * flag
- */
-div.snippet div.flag {
-  position: absolute;
-  height: 100%;
-  top: 0;
-  left: 0;
-  width: 11px;
-  background-color: $dark-orange;
-  border-right-color: $nearly-white;
-  border-right: 1px solid $darkest-orange;
-}
-
-/**
- * References
- */
-
-#search > ol > li p.ref {
-  display: none;
-}
 
 
 /**
- * Active
+ * Active rules
  */
 body.no-js #search > ol > li:active,
 #search > ol > li.active,
 #search > ol > li:target {
+  position:         relative;
+  display:          block;
   background-color: $dark-orange;
-  display: block;
-  text-align: left;
-  position: relative;
-  border-width: 2px;
-  white-space: wrap;
-  height: auto;
-  width: auto;
+  text-align:       left;
+  border-width:     2px;
+  white-space:      wrap;
+  height:           auto;
+  width:            auto;
+  overflow:         hidden;
 
-  div.match-main > div.match-wrap {
-    cursor: default;
+  div.matchinfo {
+    display: block;
   }
-  .snippet {
-    white-space: normal !important;
+
+  + li.active {
+    border-top:  $border-size solid $light-grey;
+    padding-top: 3 * $border-size;
+
+    .button-group.button-view {
+      padding-top: 3 * $border-size;
+    }
   }
   
-  .snippet span {
-    display: inline !important;
+  .snippet {
+    white-space:      normal !important;
+	  padding:          2pt 0 5pt 5pt;
+    background-color: $light-orange;
+
+    span {
+      display: inline !important;
+    }
+
+	  > * {
+	    background-color: transparent;
+	  }
+
+    div.flag {
+      display: none;
+    }
+
+	  margin: {
+	    top:    0;
+	    right:  $right-view-distance;
+	    bottom: 0;
+	    left:   0;
+	  }
+
+	  > span {
+      line-height: 1.4em;
+      width:       auto;
+
+      &.context-left {
+        margin-left: 0;
+        display:     inline;
+        overflow:    visible;
+        text-align:  left;
+        width:       auto;
+      }
+	  }
   }
+  
   .button-group.button-view {
     display: block;
   }
-  div.match-wrap {
-    min-height: 20pt;
-    div.snippet {
-      
-	    background-color: $light-orange;
-	    > * {
-	      background-color: transparent;
-	    }
-      div.flag {
-        display: none;
-      }
-	    padding: 2pt 0 5pt 5pt;
-	    margin: {
-	      top: 0;
-	      right: $right-view-distance;
-	      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;
-        }
-	    }
+
+  div.match-main {
+    display: block;
+    width:   100%;  
+
+    div.match-wrap {
+      cursor:           default;
+      min-height:       20pt;
+      background-color: $dark-orange;
+      width:            100%;
+      margin-left:      0;
+      overflow-x:       visible;
+      white-space:      wrap;
     }
   }
 
-  overflow: hidden;
-
   div.meta {
     display: none;
-    // visibility: hidden;
   }
-  div.match-main {
-    display: block;
-    width: 100%;
-  
-    div.match-wrap {
-      background-color: $dark-orange;
-      width: 100%;
-      margin-left: 0;
-      overflow-x: visible;
-      white-space: wrap;
-    }
-  }
+
   p.ref {
-    display: block;
-	  color: $nearly-white;
-	  padding: 3pt 10pt 3pt 3pt;
+    display:       block;
+	  color:         $nearly-white;
+	  padding:       3pt 10pt 3pt 3pt;
 	  padding-right: $right-view-distance;
-	  margin: 0pt;
-	  width: 100%;
-	  bottom: 0;
-	  z-index: 30;
+	  margin:        0pt;
+	  width:         100%;
+	  bottom:        0;
+	  z-index:       30;
+
 	  > span.sigle {
-	    font-size: 75%;
+	    font-size:      75%;
 	    vertical-align: top;
-	    color: $light-orange;
-	    float: right;
+	    color:          $light-orange;
+	    float:          right;
 	  }
   }
 }
-    
-#search ol span.context-left {
-  display: inline-block;
-  width: 50.01%;
-  text-align: right;
-}
 
 
 /**
- * Right aligned
+ * Alignment rules
  */
-
-#search ol.align-right {
-  text-align: right;
-
-  div.match-main span.context-right {
-    display: inline-block;
-    width: 49.915%;
-    text-align: left;
-  }
-}
-
-/**
- * Center aligned
- */
-#search ol.align-center {
-  div.match-main {
-    width: 100% !important;
-
-    > .match-wrap {
-      margin-left: 0;
-      position: relative;
-    }
+#search ol {
+  span.context-left {
+    display:    inline-block;
+    width:      50.01%;
+    text-align: right;
   }
 
-  li:not(.active) div.snippet {
-    white-space: normal;
-    text-align: center;
-    width: 100000pt;
-    margin-left: -50000pt;
+  // Right aligned
+  &.align-right {
+    text-align: right;
 
-    span.context-left {
-      display: inline-block;
-      text-align: right;
-      width: 40000pt;
-      margin-left: 70vw;
-    }
-
-    span.context-right {
-      display: inline-block;
+    div.match-main span.context-right {
+      display:    inline-block;
+      width:      49.915%;
       text-align: left;
-      width: 40000pt;
+    }
+  }
+
+  // Center aligned
+  &.align-center {
+    div.match-main {
+      width: 100% !important;
+
+      > .match-wrap {
+        position:    relative;
+        margin-left: 0;
+      }
+    }
+
+    li:not(.active) div.snippet {
+      white-space: normal;
+      text-align:  center;
+      width:       100000pt;
+      margin-left: -50000pt;
+
+      span.context-left {
+        display:     inline-block;
+        text-align:  right;
+        width:       40000pt;
+        margin-left: 70vw;
+      }
+
+      span.context-right {
+        display:     inline-block;
+        text-align:  left;
+        width:       40000pt;
+      }
     }
   }
 }
 
 
-// fix empty contexts
-#search ol span.context-left,
-#search ol span.context-right {
-  &:empty::after {
-    content: " ";
-    display: inline-block;
+/**
+ * Fix empty contexts
+ */
+#search ol span {
+  &.context-left,
+  &.context-right {
+    &:empty::after {
+      content: " ";
+      display: inline-block;
+    }
   }
 }
 
+
 /**
- * Highlights
+ * Highlight rules
  */
 mark {
   background-color: inherit;
-  color: inherit;
+  color:            inherit;
 }
 
 mark > mark,
@@ -391,8 +375,8 @@
 .level-0 {
   border-bottom-width: 2px;
   border-bottom-style: solid;
-  padding-bottom: 0px !important;
-  font-style: normal;
+  padding-bottom:      0px !important;
+  font-style:          normal;
 }
 
 mark > mark > mark,
@@ -423,11 +407,3 @@
 .class-2 { border-color: $kwic-highlight-2; }
 .class-3 { border-color: $kwic-highlight-3; }
 .class-4 { border-color: $kwic-highlight-4; }
-
-
-/**
- * Actions
- */
-#search > ol > li .button-group.button-view {
-  display: none;
-}
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 705ea43..3b87e96 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -1,59 +1,66 @@
 @charset "utf-8";
 @import "../util";
 
+/**
+ * Rules for logos.
+ */
 .logo {
   &::after {
     content: "" !important;
   }
+
   > * {
     background: {
-      repeat: no-repeat;
-      size: 90%;
+      repeat:   no-repeat;
+      size:     90%;
       position: 50% 50%;
     }
+
     > span {
-      margin-left: -30000px;
+      @include blind;
     }
   }
 }
 
+
 /**
  * Background image for the front page
  */
 #kalamar-bg {
   position: fixed;
-  height: 110%;
-  width: 175%;
-  top: 0;
-  z-index: -5000;
-  opacity: .1;
+  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;
+    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%;
+  position:    relative;
+  text-align:  right;
+  font-size:   85%;
+  right:       0;
+  width:       100%;
   margin-left: ($standard-margin / 2);
-
   padding-left: 60%;
+
   > div {
-    border-top: 26px solid $dark-orange;
+    border-top:    26px solid $dark-orange;
     padding-right: 2em;
   }
   p {
     text-align: left;
-    display: inline-block;
+    display:    inline-block;
   }
 }
 
@@ -62,12 +69,10 @@
  * Logo: Institute for German Language
  */
 #ids-logo {
-  display: block;
-  width: (631 / 30) + em;
-  height: (200 / 30) + em;
-  background: {
-    image:url('#{$img-path}/ids-leibniz-institute-for-the-german-language.svg');
-  }
+  display:          block;
+  width:            (631 / 30) + em;
+  height:           (200 / 30) + em;
+  background-image: url('#{$img-path}/ids-leibniz-institute-for-the-german-language.svg');
 }
 
 
@@ -75,21 +80,21 @@
  * Logo: KorAP
  */
 h1 {
-  position: absolute;
-  margin: 0;
-  margin-left:15px;
-  left: 0;
-  top: 0;
-  width: 7.8em;
-  height: 2.4em;
-  z-index: 105;
+  position:    absolute;
+  margin:      0;
+  margin-left: 15px;
+  left:        0;
+  top:         0;
+  width:       7.8em;
+  height:      2.4em;
+  z-index:     105;
   background: {
-    size: 72%;
+    size:  72%;
     image: url('#{$img-path}/korap-logo-kalamar.svg');
   }
 }
 
 #overview {
   text-align: center;
-  width: 100%;
+  width:      100%;
 }
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 67b48fa..c49ceb1 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -2,74 +2,65 @@
 @import "kwic";        // Kwic view information
 @import "logos";       // Logo images
 @import "matchinfo";   // Match table
-@import "tree";        // Tree view
 @import "pagination";  // Pagination
 @import "query";       // View query
 @import "resultinfo";  // Information on results
 @import "tutorial";    // Embedded and non-embedded tutorial
 @import "koralquery";  // KoralQuery
-@import "tagger";      // Tagger
 @import "alertify";    // Styling alerts
 @import "intro";       // Intro page
 @import "buttongroup"; // Button groups
 @import "panel";       // Base panel system
-@import "plugin";      // Plugin mechanism
 @import "introjs";     // Guided Tour
 @import "introjs-ids"; // Guided Tour: IDS specific 
 @import "oauth";       // OAuth Management styles
+// @import "tagger";   // Tagger
+
+@import "../util";
 
 
 main {
+  padding-bottom: 20pt;
+
   margin: {
-    left: $standard-margin; 
+    left:  $standard-margin; 
     right: ($standard-margin / 2);
   }
-  padding-bottom: 20pt;
+
   &.embedded {
     margin: {
-      left: 14px;
+      left:  14px;
       right: 14px;
     }
   }
+
   p {
     text-align: justify;
-    hyphens: auto;
+    hyphens:    auto;
   }
 
   h2#page-top {
-    margin-top: 0;
+    margin-top:  0;
     padding-top: 1em;
   }
 
   &.page {
     margin-left: $logo-left-distance + 15px;
-    p,li, dd, dt {
+    p,
+    li,
+    dd,
+    dt {
       code {
         background-color: $ids-grey-2;
-        color: $ids-grey-1;
-        padding: 0 .5em;
-        border-radius: $standard-border-radius;
+        color:            $ids-grey-1;
+        padding:          0 .5em;
+        border-radius:    $standard-border-radius;
       }
     }
   }
 
   p.hint {
-    margin: 0 auto;
+    margin:     0 auto;
     text-align: center;
   }
 }
-
-blockquote {
-  border-radius: $standard-border-radius;
-  padding: 2pt 5pt 2pt 20pt;
-  margin: 0;
-  border-left: 5px solid $ids-blue-1;
-  background-color: $ids-blue-2;
-  color: $ids-blue-1;
-
-  &.bug, &.missing {
-    border-left-color: $dark-red;
-    background-color: $middle-red;
-    color: $nearly-white;
-  }
-}
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 3039d03..a0f98c4 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -1,286 +1,47 @@
 @charset "utf-8";
 @import "../util";
+@import "view/matchtable";
+@import "view/matchtree";
+@import "view/metatable";
 
-$left-width: 176px;
-$border-size: 2px;
-$left-distance: $left-width + ($border-size * 2);
 
 /**
- * Table view
- *
- * The table view is complicated, as the
- * first column has to be static.
+ * General matchinfo styles.
  */
-@mixin matchinfo-head {
-  // border-width: 0px;
-  border-top: $border-size solid $darker-orange; // #ff8000;
-  width: $left-width / 2;
-}
 
-div.matchinfo:empty {
-  display: none !important;
-}
+// TODO: This should be moved to panel/match
 
 div.matchinfo {
-  position: relative;
-  width: 100%;
+  position:    relative;
+  width:       100%;
   padding-top: $border-size;
-  //  background-color: $dark-orange;
-  height: auto;
-  font-size: 10pt;
-  text-align: left;
-}
+  height:      auto;
+  font-size:   10pt;
+  text-align:  left;
 
-  
-div.matchtable > div {
-  z-index: 20;
-  margin-left: $left-distance - ($border-size / 2);
-  margin-right: $right-view-distance;
-  padding: 0;
-  overflow-x: auto;
-  overflow-y: visible;
-  width: auto;
-  
-  table {
-    display: table;
-    border-collapse: separate;
-    border-spacing: 0px;
-  }
-  th {
-    color: $nearly-white;
+  &:empty {
+    display: none !important;
   }
 
-  // Use matchinfo cells for query creation
-  td,
-  tbody th,
-  thead th:not(:nth-child(1)):not(:nth-child(2)):not(.cutted) {
-    cursor: pointer;
-  }
-  td:empty {
-    cursor: default;
-    // Fix for empty annotation lines:
-    &::after {
-      content: " ";
-      white-space: pre;
-    }
-  }
-  tr {
-    outline: none;
-    // equal to dd.chosen
-    td.chosen,
-    th.chosen,
-    div.chosen {
-      background-color: $light-green !important;
-      color: $nearly-white;
-      // transition: color 0.1s, background-color 0.15s ease-out;
-    }
-  }
-
-  thead {
-    tr th {
-      background-color: $darker-orange;
-      border-top-width: 0px !important;
-      text-align: center;
-      &:nth-of-type(1), &:nth-of-type(2) {
-	                        text-align: left;
-                        }
-      &.mark {
-        background-color: $darkest-orange; // #f6a800;
-      }
-
-      &.cutted {
-        background-color: $light-orange;
-        &::after {
-          content: $fa-cut;
-          font-family: FontAwesome;
-          padding: {
-            left: 4pt;
-            right: 4pt;
-          }
-          color: $light-green;
-        }
-      }
-    }
-  }
-  
-  tbody {
-    > tr:nth-of-type(1) > th {
-      border-top-color: transparent;
-    }
-  }
-  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;
-    }
-
-    // Includes header line as well
-    > * {
-      @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;
-    &.mark {
-      background-color: $light-orange;
-    }
-  }
-  tr:nth-child(even) > td {
-    background-color: $light-orange;
-    &.mark {
-      background-color: $middle-orange;
-    }
-  }
-
-  // table for key-value pairs
-  td.matchkeyvalues {
-    padding: 0;
-    > div {
-      @include cell-info;
-      > span {
-        color: $darkest-orange;
-        text-align: right;
-        &::after {
-          content: ":"
-        }
-        padding-right: .5em;
-      }
-    }
+  .view + .view {
+    margin-top: 4 * $border-size !important;
   }
 }
 
 
-div.metatable, div.matchtable {    
-    background-color: $dark-orange;
-    position: relative;
-}
-
-/**
- * Label
- */
-// The metatable branch was experimental
+div.metatable,
+div.matchtable,
 div.matchtree {
-  h6 {
-    display: inline;
-    font-size: inherit;
-    color: $nearly-white;
-    margin: 0;
-    padding: 0 !important;
-    float: left;
-    > span { // , > div {
-      @include matchinfo-head;
-      @include cell-info;
-      display: inline-block !important;
-      margin: 0;
-      &:nth-of-type(2) {
-	      margin-left: $border-size;
-      }
-    }
-  }
-}
-
-/**
-  * Tree view
-  */
-div.matchtree {
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: visible;
-  padding: 0;
-  margin-top: 1pt;
+  position:         relative;
   background-color: $dark-orange;
-
-  > div {
-    position: unset;
-    z-index: 4;
-    overflow-x: auto;
-    margin: $border-size;
-    margin-left: $left-distance;
-    margin-right: $right-view-distance;
-
-    background-color: $light-orange;
-  }
 }
 
 div.button-group.button-panel.button-matchinfo {
-  display: inline-block;
+  display:      inline-block;
   margin-right: .5em;
+
   > span {
-    position: relative;
+    position:   relative;
     box-shadow: none;
   }
 }
-
-div.matchinfo .view + .view {
-  margin-top: 4 * $border-size !important;
-}
-
-
-// Metatable
-div.metatable > dl {
-  margin-right: $right-view-distance;
-  margin-top: $border-size;
-
-  > div {
-    border-color: $dark-orange;
-    > * {
-      padding: .2em;
-    }
-    > dt {
-      background: $darker-orange;
-      color: $nearly-white;
-      width: 12.5em;
-    }
-    > dd {
-      background-color: $light-orange;
-      cursor: pointer;
-    }
-    > dd[data-type="type:store"],
-    > dd[data-type="type:attachement"]{
-      background-color: $middle-orange;
-      cursor: default;
-
-      a {
-        color: inherit;
-      }
-    }
-    
-    > dd.metakeyvalues {
-      padding:0;
-      > div {
-        padding: .2em;
-        &::before {
-          content: "\2022\00A0";
-          color: $dark-orange
-        }
-      }
-    }
-
-    // equal to td.chosen
-    > dd.chosen, > dd > div.chosen {
-      background-color: $light-green !important;
-      color: $nearly-white;
-    }
-  }
-}
-
-// This is a temporary feature to disable
-// corpusByMatch assistant. See corpusByMatch.js
-// for reasons.
-div.metatable > dl.cbm-disabled > div > dd {
-  cursor: default !important;
-}
diff --git a/dev/scss/main/oauth.scss b/dev/scss/main/oauth.scss
index 0b37285..9dca691 100644
--- a/dev/scss/main/oauth.scss
+++ b/dev/scss/main/oauth.scss
@@ -1,28 +1,35 @@
+@import "../util";
+
+/**
+ * Styles for OAuth management form.
+ */
+
 ul.client-list {
   padding-left: 1.5em;
+
   li.client {
     list-style-type: none;
-    span.client-name {
-      &::before {
-        margin-left: -1.5em;
-      }
-      font-weight: bold;
+
+    span.client-name::before {
+      margin-left: -1.5em;
     }
+
     span.client-desc {
       font-size: 70%;
-      display: block;
+      display:   block;
     }
   }
 }
 
 span.client-name {
+  font-weight: bold;
+
   &::before {
-    display: inline-block;
-    width: 1.5em;
-    content: $fa-plugin;
-    font-family: 'FontAwesome';
-    color: $ids-blue-1;
+    @include icon-font;
+    display:   inline-block;
+    width:     1.5em;
+    content:   $fa-plugin;
+    color:     $ids-blue-1;
     font-size: 100%;
   }
-  font-weight: bold;
 }
\ No newline at end of file
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index 9704638..daa9bd9 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -1,54 +1,52 @@
 @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>
  */
-/*
-<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: ($standard-margin / 4);
-  bottom: ($standard-margin / 2);
-  z-index: 35;
-  padding: 0;
-  height: auto;
+  position:    fixed;
+  font-size:   0;
+  right:       ($standard-margin / 4);
+  bottom:      ($standard-margin / 2);
+  z-index:     35;
+  padding:     0;
+  height:      auto;
   line-height: 0;
 
   > a {
-    margin: 0;
+    margin:    0;
     font-size: 10pt;
-    padding: 0;
+    padding:   0;
 
     > span {
-      box-shadow: $choose-box-shadow;
       @include standard-text-padding;
       @include choose-item;
-      display: inline-block;
+      box-shadow:  $choose-box-shadow;
+      display:     inline-block;
       line-height: 2em;
-      text-align: center;
+      text-align:  center;
+
       border: {
-	top-width: $border-size;
-	bottom-width:  $border-size;
-	top-style: solid;
-	bottom-style: solid;
+	      top-width:    $border-size;
+	      bottom-width: $border-size;
+	      top-style:    solid;
+	      bottom-style: solid;
       }
     }
 
@@ -58,63 +56,70 @@
 
     &.ellipsis > span {
       > span {
-	@include blind;
+	      @include blind;
       }
+
       &::after {
-	font-family: 'FontAwesome';
-	content: $fa-elipsis;
-	line-height: 1em;
+	      @include icon-font;
+	      content:     $fa-elipsis;
+	      line-height: 1em;
       }
     }
 
     &[rel=self] > span {
       @include choose-active;
+
       border {
-	left-width: $border-size;
-	right-width: $border-size;
-	left-style: solid;
-	right-style: solid;
+	      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;
+	      top-left-radius:    $standard-border-radius;
+	      bottom-left-radius: $standard-border-radius;
+	      left-width:         $border-size;
+	      left-style:         solid;
       }
+
       > span {
-	@include blind;
+	      @include blind;
       }
+
       &::after {
-	font-family: 'FontAwesome';
-	content: $fa-previous;
-	line-height: 1em;
+        @include icon-font;
+	      content:     $fa-previous;
+	      line-height: 1em;
       }
     }
 
     &[rel=next] > span {
       border: {
-	top-right-radius: $standard-border-radius;
-	bottom-right-radius: $standard-border-radius;
-	right-width: $border-size;
-	right-style: solid;
+	      top-right-radius:    $standard-border-radius;
+	      bottom-right-radius: $standard-border-radius;
+	      right-width:         $border-size;
+	      right-style:         solid;
       }
+
       > span {
-	@include blind;
+	      @include blind;
       }
+
       &::after {
-	font-family: 'FontAwesome';
-	content: $fa-next;
-	line-height: 1em;
+        @include icon-font;
+	      content:     $fa-next;
+	      line-height: 1em;
       }
     }
+
     &:link:hover,
     &:link:focus {
       outline: none;
       span {
-	@include choose-hover;
+	      @include choose-hover;
       }
     }
   }
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
index 55d0c9c..adddf71 100644
--- a/dev/scss/main/panel.scss
+++ b/dev/scss/main/panel.scss
@@ -1,14 +1,18 @@
 @import "../util";
 
+/**
+ * Base styles for all panels and views
+ */
+
 div.panel {
   position: relative;
-  width: 100%;
-  display: block;
+  width:    100%;
+  display:  block;
 }
 
 div.view {
-  position: relative;
+  position:    relative;
   padding-top: $border-size;
-  display: block;
-  width: 100%;
+  display:     block;
+  width:       100%;
 }
diff --git a/dev/scss/main/plugin.scss b/dev/scss/main/plugin.scss
deleted file mode 100644
index 42867f6..0000000
--- a/dev/scss/main/plugin.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "../util";
-
-div.view.widget {
-  padding-right: $right-view-distance;
-  > iframe {
-    margin: 0;
-    box-sizing: border-box;
-    padding: 0;
-    width: 100%;
-    overflow-x: auto;
-  }
-}
\ No newline at end of file
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index d767d19..67b4157 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -1,102 +1,113 @@
 @charset "utf-8";
 @import "../util";
 
+/**
+ * Rules applicable for the result panel
+ */
+
+// TODO: This should be moved to panel/result
 
 #resultinfo {
-  clear: both;
-  text-align: right;
+  clear:       both;
+  text-align:  right;
   line-height: 1.5em;
-  min-height: 1.5em;
-  margin-top:.4em;
-  font-size: 10pt;
+  min-height:  1.5em;
+  margin-top:  .4em;
+  font-size:   10pt;
+
   p.found {
-    display: inline;
-    padding: 0;
-    margin: 0;
+    display:    inline;
+    padding:    0;
+    margin:     0;
     text-align: right;
   }
+
+  /*
+   * TODO:
+   *   This rule should not be dependent on
+   *   whether something is found or not,
+   *   but whether #search contains a result,
+   *   e.g. when a result view is open in the
+   *   result panel. This should probably be
+   *   indicated by a class on the button group
+   *   rather than a class on the resultinfo.
+   */
+  &.found {
+    position:      relative;
+    margin-bottom: 0px;
+
+    .button-group > span {
+      margin-bottom:       0;
+      border-bottom-width: 0;
+      box-shadow:          none;
+
+      &:first-child {
+        border-bottom-left-radius: 0;
+      }
+
+      &:last-child {
+        border-bottom-right-radius: 0;
+      }   
+    }
+  }
 }
 
+
 div.result.panel .view {
-  border: 1px solid $kwic-border;
+  border:           1px solid $kwic-border;
   background-color: $dark-orange;
 }
 
+
 // Specify result button group layout
 .result.button-group.button-panel {
-  width: auto;
+  display:        inline-block;
+  width:          auto;
   vertical-align: bottom;
-  display: inline-block;
-  line-height: 1.3em;
+  line-height:    1.3em;
 
   > span {
-    line-height: 1.3em;
+    line-height:  1.3em;
     border-width: $result-border-size 0;
+
     &:first-child {
       border-left-width: $result-border-size;
     }
+
     &:last-child {
       border-right-width: $result-border-size;
     }
   }
-
-  // Define icons for result buttons
-  .button-icon {
-    &.align.left::after {
-      content: $fa-left-align;
-    }
-    &.align.right::after {
-      content: $fa-right-align;
-    }
-    &.align.center::after {
-      content: $fa-center-align;
-    }
-    &.show-kq::after {
-      content: $fa-code;
-    }
-  }
 }
 
-/*
- * TODO:
- *   This rule should not be dependent on
- *   whether something is found or not,
- *   but whether #search contains a result,
- *   e.g. when a result view is open in the
- *   result panel. This should probably be
- *   indicated by a class on the button group
- *   rather than a class on the resultinfo.
- */
-#resultinfo.found {
-  position: relative;
-  // z-index: 20;
-  margin-bottom: 0px;
-
-  .button-group > span {
-    margin-bottom: 0;
-    border-bottom-width: 0;
-    box-shadow: none;
-    &:first-child {
-      border-bottom-left-radius: 0;
-    }
-    &:last-child {
-      border-bottom-right-radius: 0;
-    }   
-  }
-}
-
-
 
 #total-results {
-  color: $total-results;
+  color:       $light-green;
   font-weight: bold;
 }
 
+
 .no-results {
-  margin: 0 auto;
+  margin:     0 auto;
   text-align: center;
   code {
     font-weight: bold;
   }
 }
 
+
+// Define icons for result buttons
+.button-icon {
+  &.align.left::after {
+    content: $fa-left-align;
+  }
+  &.align.right::after {
+    content: $fa-right-align;
+  }
+  &.align.center::after {
+    content: $fa-center-align;
+  }
+  &.show-kq::after {
+    content: $fa-code;
+  }
+}
diff --git a/dev/scss/main/tagger.scss b/dev/scss/main/tagger.scss
index c3a08be..d7ba90f 100644
--- a/dev/scss/main/tagger.scss
+++ b/dev/scss/main/tagger.scss
@@ -1,62 +1,70 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size: 1px;
+/**
+ * Styles for tags.
+ */
+
+// Currently not used
+
 $tagcolor: rgba(0,0,0,0.5);
 
 .tagger {
-  display: table;
+  display:         table;
   border-collapse: collapse;
-  width: 100%;
-  font-size: 100%;
+  width:           100%;
+  font-size:       100%;
 
   // The tag list
   > div  {
-    display: table-cell;
-    font-size: inherit;
+    display:     table-cell;
+    font-size:   inherit;
     white-space: nowrap;
-    width: 0;
+    width:       0;
 
     // The tag
     > span {
-      font-size: 80%;
-      display: inline-block;
-      white-space: nowrap;
+      display:          inline-block;
+      font-size:        80%;
+      white-space:      nowrap;
       background-color: $dark-orange;
-      padding: 2px 6px;
-      color: $tagcolor;
-      text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
-      margin-right: 2px;
-      box-shadow: $choose-box-shadow;
-      cursor: pointer;
+      padding:          2px 6px;
+      color:            $tagcolor;
+      text-shadow:      $light-shadow;
+      margin-right:     2px;
+      box-shadow:       $choose-box-shadow;
+      cursor:           pointer;
+
       border: {
-	width: $border-size;
-	style:solid;
-	color: rgba(0,0,0,0.3);
-	radius: $standard-border-radius;
+	      width:  $border-size;
+	      style:  solid;
+	      color:  rgba(0,0,0,0.3);
+	      radius: $standard-border-radius;
       }
+
       > span {
-	cursor: crosshair;
-	&::after {
-	  font-size: 70%;
-	  vertical-align: top;
-	  padding-left: 3px;
-	  color: $tagcolor;
-	  text-shadow: none;
-	  font-family: 'FontAwesome';
-	  content: $fa-close;
-	}
+	      cursor: crosshair;
+
+        &::after {
+          @include icon-font;
+	        font-size:      70%;
+	        vertical-align: top;
+	        padding-left:   3px;
+	        color:          $tagcolor;
+	        text-shadow:    none;
+	        content:        $fa-close;
+	      }
       }
     }
   }
 
   // The tag input field
   input[type=text] {
-    display: table-cell;
-    width: 100%;
-    border: none;
+    display:          table-cell;
+    width:            100%;
+    border:           none;
     background-color: $light-grey;
-    font-size: inherit;
+    font-size:        inherit;
   }
 }
 
diff --git a/dev/scss/main/tutorial.scss b/dev/scss/main/tutorial.scss
index 526a190..6ccc32e 100644
--- a/dev/scss/main/tutorial.scss
+++ b/dev/scss/main/tutorial.scss
@@ -1,45 +1,45 @@
 @charset "utf-8";
 @import "../util";
 
-$border-size: 2px;
+/**
+ * Rules for the embedded documentation.
+ */
 
 #tutorial {
-  position: fixed;
-  z-index: 9999;
-  top:    5%;
-  bottom: 5%;
-  left:   2%;
-  right:  2%;
-  padding-right: $right-view-distance;
-/*
-  padding: 0;
-  margin: 0;
-*/
+  position:         fixed;
+  z-index:          9999;
+  top:              5%;
+  bottom:           5%;
+  left:             2%;
+  right:            2%;
+  padding-right:    $right-view-distance;
   background-color: $nearly-white;
+  box-shadow:       $choose-box-shadow;
 
   .button-group.button-view {
     background-color: $middle-grey;
-    display: block;
-    height: 100%;
+    display:          block;
+    height:           100%;
   }
+
   border: {
-    width: 2 * $border-size;
-//    color: $dark-orange;
-    color: $dark-grey;
-    style: solid;
+    width:  2 * $border-size;
+    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;
+      image:    url('#{$img-path}/korap-bg-kalamar.svg');
+      repeat:   no-repeat;
       position: center center;
-      size: 20%;
+      size:     20%;
     }
   }
 }
@@ -47,59 +47,23 @@
 body.embedded {
   background-color: $nearly-white;
   aside {
-/*
-    border-right: {
-      width: $border-size;
-      style: solid;
-    }
-*/
-    padding-top: 0;
     @include choose-item;
+    padding-top: 0;
     background-color: $middle-grey;
+
     > div {
-      position: relative;
-      top: 50%;
+      position:         relative;
+      top:               50%;
       -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-      transform: translateY(-50%);
-      // margin-right: -1 * $border-size;
+      -ms-transform:     translateY(-50%);
+      transform:         translateY(-50%);
     }
   }
 }
 
-main.tutorial {
-  // Link to documentation
-  a.embedded-link::after {
-    font-family: FontAwesome;
-    white-space: nowrap;
-    content: " " + $fa-tutorial;
-    font-size: 75%;
-  }
-}
-
-dl {
-  margin: 0;
-  padding-bottom: .5em;
-  dt {
-    font-weight: bold;
-    abbr {
-      border-width: 0;
-      &[data-type=token]::after {
-	      color: $ids-blue-1;
-      }
-      &[data-type=span]::after {
-	      color: $ids-pink-1;
-      }
-      &::after {
-	      content: ' (' attr(title) ')';
-	      vertical-align: bottom;
-	      font-style: italic;
-	      font-weight: normal;
-	      font-size: 80%;
-      }
-    }
-  }
-}
-
-
-
+// Link to documentation
+main.tutorial a.embedded-link::after {
+  @include icon-font;
+  content:   " " + $fa-tutorial;
+  font-size: 75%;
+}
\ No newline at end of file
diff --git a/dev/scss/main/view/matchtable.scss b/dev/scss/main/view/matchtable.scss
new file mode 100644
index 0000000..6239c61
--- /dev/null
+++ b/dev/scss/main/view/matchtable.scss
@@ -0,0 +1,148 @@
+@import "../../util";
+
+/**
+ * Table view
+ *
+ * The table view is complicated, as the
+ * first column has to be static.
+ */
+div.matchtable {
+
+  > div {
+    z-index:      20;
+    margin-left:  $left-distance - ($border-size / 2);
+    margin-right: $right-view-distance;
+    padding:      0;
+    overflow-x:   auto;
+    overflow-y:   visible;
+    width:        auto;
+  }
+
+  table {
+    display:         table;
+    border-collapse: separate;
+    border-spacing:  0px;
+  }
+
+  th {
+    color: $nearly-white;
+  }
+
+  // Use matchinfo cells for query creation
+  td,
+  tbody th,
+  thead th:not(:nth-child(1)):not(:nth-child(2)):not(.cutted) {
+    cursor: pointer;
+  }
+
+  td {
+    &:empty {
+      cursor: default;
+      // Fix for empty annotation lines:
+      &::after {
+        content:     " ";
+        white-space: pre;
+      }
+    }
+
+    // table for key-value pairs
+    &.matchkeyvalues {
+      padding: 0;
+      > div {
+        @include cell-info;
+        > span {
+          color:         $darkest-orange;
+          text-align:    right;
+          padding-right: .5em;
+          &::after {
+            content: ":"
+          }
+        }
+      }
+    }
+  }
+
+  tr {
+    outline: none;
+
+    // equal to dd.chosen
+    td.chosen,
+    th.chosen,
+    div.chosen {
+      background-color: $light-green !important;
+      color:            $nearly-white;
+    }
+
+    /**
+     * The first two columns.
+     */
+    > th:nth-of-type(1),
+    > th:nth-of-type(2) {
+      @include matchinfo-head;
+      position:       absolute;
+      z-index:        80;
+      vertical-align: middle;
+      left:           0px;
+    }
+
+    > th:nth-of-type(2) {
+      left: ($left-width / 2) + $border-size;
+    }
+
+    // Includes header line as well
+    > * {
+      @include cell-info;
+      border: ($border-size / 2) solid $dark-orange;
+    }
+
+    > td {
+      background-color: $middle-orange;
+      white-space:      nowrap;
+      vertical-align:   top;
+      text-align:       center;
+      &.mark {
+        background-color: $light-orange;
+      }
+    }
+
+    &:nth-child(even) > td {
+      background-color: $light-orange;
+      &.mark {
+        background-color: $middle-orange;
+      }
+    }
+  }
+
+  thead th {
+    background-color: $darker-orange;
+    border-top-width: 0px !important;
+    text-align:       center;
+
+    &:nth-of-type(1),
+    &:nth-of-type(2) {
+	    text-align: left;
+    }
+
+    &.mark {
+      background-color: $darkest-orange;
+    }
+
+    &.cutted {
+      background-color: $light-orange;
+
+      &::after {
+        @include icon-font;
+        content: $fa-cut;
+        color:   $light-green;
+        padding: {
+          left:  4pt;
+          right: 4pt;
+        }
+      }
+    }
+  }
+  
+  tbody > tr:nth-of-type(1) > th {
+    border-top-color: transparent;
+  }
+}
diff --git a/dev/scss/main/view/matchtree.scss b/dev/scss/main/view/matchtree.scss
new file mode 100644
index 0000000..96fb86a
--- /dev/null
+++ b/dev/scss/main/view/matchtree.scss
@@ -0,0 +1,44 @@
+@import "../../util";
+@import "tree";
+
+/**
+ * Matchtree view
+ */
+
+div.matchtree {
+  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 !important;
+      margin: 0;
+
+      &:nth-of-type(2) {
+	      margin-left: $border-size;
+      }
+    }
+  }
+  
+  > div {
+    position:         unset;
+    z-index:          4;
+    overflow-x:       auto;
+    margin:           $border-size;
+    margin-left:      $left-distance;
+    margin-right:     $right-view-distance;
+    background-color: $light-orange;
+  }
+}
diff --git a/dev/scss/main/view/metatable.scss b/dev/scss/main/view/metatable.scss
new file mode 100644
index 0000000..8be5679
--- /dev/null
+++ b/dev/scss/main/view/metatable.scss
@@ -0,0 +1,64 @@
+@charset "utf-8";
+@import "../../util";
+
+// Metatable
+div.metatable > dl {
+  margin-right: $right-view-distance;
+  margin-top:   $border-size;
+
+  > div {
+    border-color: $dark-orange;
+
+    > * {
+      padding: .2em;
+    }
+
+    > dt {
+      background: $darker-orange;
+      color:      $nearly-white;
+      width:      12.5em;
+    }
+
+    > dd {
+      background-color: $light-orange;
+      cursor: pointer;
+
+      &.metakeyvalues {
+        padding: 0;
+
+        > div {
+          padding: .2em;
+
+          &::before {
+            content: "\2022\00A0";
+            color:   $dark-orange
+          }
+        }
+      }
+
+      // equal to td.chosen
+      &.chosen,
+      > div.chosen {
+        background-color: $light-green !important;
+        color:            $nearly-white;
+      }
+
+      &[data-type="type:store"],
+      &[data-type="type:attachement"] {
+        background-color: $middle-orange;
+        cursor:           default;
+
+        a {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  // This is a temporary feature to disable
+  // corpusByMatch assistant. See corpusByMatch.js
+  // for reasons.
+  &.cbm-disabled > div > dd {
+    cursor: default !important;
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/main/tree.scss b/dev/scss/main/view/tree.scss
similarity index 60%
rename from dev/scss/main/tree.scss
rename to dev/scss/main/view/tree.scss
index 088690f..c7e064b 100644
--- a/dev/scss/main/tree.scss
+++ b/dev/scss/main/view/tree.scss
@@ -1,13 +1,13 @@
 @charset "utf-8";
-@import "../util";
+@import "../../util";
 
 /**
  * SVG tree
  */
 path.edge {
-  stroke: $darker-orange;
+  stroke:       $darker-orange;
   stroke-width: 2px;
-  fill: none;
+  fill:         none;
 }
 
 g.arc.infocus > path.edge {
@@ -17,37 +17,38 @@
 marker#arr {
   overflow: visible;
   path {
-    stroke: $darkest-orange;
-    fill: $darkest-orange;
-    fill-opacity:1;
+    stroke:       $darkest-orange;
+    fill:         $darkest-orange;
+    fill-opacity: 1;
     stroke-width: 2; 
   }
 }
 
 path.anchor {
-  stroke: $darkest-orange;
-  stroke-width: 3;
+  stroke:         $darkest-orange;
+  stroke-width:   3;
   stroke-linecap: round;
-  z-index: 20;
+  z-index:        20;
 }
 
 g.root rect.empty {
-  stroke: $darker-orange;
-  fill: $darker-orange;
+  stroke:       $darker-orange;
+  fill:         $darker-orange;
   stroke-width: 2px;
 }
 
-g.middle, g.label {
+g.middle,
+g.label {
   rect {
-    stroke: $darker-orange;
+    stroke:       $darker-orange;
     stroke-width: 2px;
-    fill: $middle-orange;
+    fill:         $middle-orange;
   }
 }
 
 g.label.infocus rect {
   stroke: $dark-green;
-  fill: $lightest-green;
+  fill:   $lightest-green;
 }
 
 g.middle.mark {
@@ -56,6 +57,7 @@
   }
   > text {
     fill: $light-orange;
+
     > tspan {
       stroke: $light-orange;
     }
@@ -72,13 +74,13 @@
 
 g > text > tspan {
   text-anchor: middle;
-  font-size: 9pt;
+  font-size:   9pt;
 }
 
 g.leaf > text,
 text.leaf {
   > tspan {
     font-size: 10pt;
-    overflow: visible;
+    overflow:  visible;
   }
 }