diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index dcc7250..13cec6f 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,7 +1,14 @@
 @charset "utf-8";
 @import "util";
 
-body, html, select, g > text {
+/**
+ * Basic global CSS rules for Kalamar
+ */
+
+body,
+html,
+select,
+g > text {
   color: $dark-grey;
   font-family: verdana, tahoma, arial;
   margin: 0;
@@ -27,17 +34,6 @@
 
 
 a {
-  &[href^="http://"]::after,
-  &[href^="https://"]::after {
-    font-family: FontAwesome;
-    content: " " + $fa-extlink;
-    font-size: 75%;
-  }
-  &.doc-link::after {
-    font-family: FontAwesome;
-    content: " " + $fa-tutorial;
-    font-size: 75%;
-  }
   &:link {
     color: $dark-orange;
     text-decoration: none;
@@ -46,20 +42,39 @@
       @include color-transition;
     }
   }
+
+  // Visited links
   &:visited {
     color: $darkest-orange;
   }
+
+  // External links
+  &[href^="http://"]::after,
+  &[href^="https://"]::after {
+    font-family: FontAwesome;
+    content: " " + $fa-extlink;
+    font-size: 75%;
+  }
+
+  // Link to documentation
+  &.doc-link::after {
+    font-family: FontAwesome;
+    content: " " + $fa-tutorial;
+    font-size: 75%;
+  }
 }
 
-// MailToChiffre
+// Styles for Mojolicious::Plugin::TagHelpers::MailToChiffre
 a[onclick$='return PArok(this,false)'] {
   direction:rtl;
   unicode-bidi:bidi-override;
-  text-align:left
+  text-align:left;
+  & > span {
+    &:nth-child(1n+2){
+      display:none
+    }
+    &:nth-child(1)::after{
+      content:'@'
+    }
+  }
 }
-a[onclick$='return PArok(this,false)']>span:nth-child(1n+2){
-  display:none
-}
-a[onclick$='return PArok(this,false)']>span:nth-child(1)::after{
-  content:'@'
-}
\ No newline at end of file
diff --git a/dev/scss/fonts.scss b/dev/scss/fonts.scss
index be46ba2..d0349a4 100644
--- a/dev/scss/fonts.scss
+++ b/dev/scss/fonts.scss
@@ -1,6 +1,10 @@
 @charset "utf-8";
 @import "util";
 
+/**
+ * Load web fonts for Kalamar
+ */
+
 @font-face {
   font-family: 'FontAwesome';
   src: url('#{$font-path}/fontawesome-webfont.eot?v=4.3.0');
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 0ce1ae4..a8a5d02 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -1,6 +1,9 @@
 @charset "utf-8";
 @import "../util";
 
+/**
+ * Rules for the footer section of Kalamar
+ */
 footer {
   position: absolute;
   background-color: $dark-grey;
@@ -11,11 +14,12 @@
   a:link {
     margin: 0 .5em;
     color: $light-grey;
-    &:hover {
-      color: $nearly-white;
-    }
-    &:active, &:visited {
-      color: $dark-grey;
-    }
+  }
+  &:hover {
+    color: $nearly-white;
+  }
+  &:active,
+  &:visited {
+    color: $dark-grey;
   }
 }
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index 806ca1e..79640b6 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -1,15 +1,24 @@
 @charset "utf-8";
 @import "../util";
 
+/**
+ * Rules for the datepicker widget
+ * (used in the Virtual Collection creator)
+ * in Kalamar.
+ */
+
 $border-size: 2px;
 
 div.datepicker {
   display: inline-block;
   position: absolute;
   z-index: 8000;
+
   font-size: 80%;
   padding: 4pt;
+  @include choose-item;
   box-shadow: $choose-box-shadow;
+
   border: {
     width: $border-size;
     style: solid;
@@ -18,57 +27,58 @@
   > div {
     font-size: 120%;
     width: 45%;
-  }
-  > div.month {
-    float: right;
-  }
+    &.month {
+      float: right;
+    }
 
-  @include choose-item;
-  > div > span {
-    display: inline-block;
-    &:first-child,
-    &:last-child {
-      width: 15%;
-      &::before {
-	display: inline-block;
-	text-align: center;
-	cursor: pointer;
-	font-family: 'FontAwesome';
-	min-width: 14px;
-      }
-    }
-    &:first-child::before {
-      content: $fa-previous;
-    }
-    &:last-child::before {
-      content: $fa-next;
-    }
-    overflow: hidden;
-    white-space: nowrap;
-    &:nth-child(2) {
-      cursor: pointer;
+    > span {
       display: inline-block;
-      width: 70%;
-      text-align: center;
-      text-overflow: ellipsis;
-      border: {
-	radius: $standard-border-radius;
-	style: solid;
-	width: $border-size;
-	color: transparent;
+      &:first-child,
+      &:last-child {
+	width: 15%;
+	&::before {
+	  display: inline-block;
+	  text-align: center;
+	  cursor: pointer;
+	  font-family: 'FontAwesome';
+	  min-width: 14px;
+	}
       }
-      &:hover {
-	@include choose-hover;
+      &:first-child::before {
+	content: $fa-previous;
       }
-      &.selected {
-	@include choose-active;
+      &:last-child::before {
+	content: $fa-next;
+      }
+      overflow: hidden;
+      white-space: nowrap;
+      &:nth-child(2) {
+	cursor: pointer;
+	display: inline-block;
+	width: 70%;
+	text-align: center;
+	text-overflow: ellipsis;
+	border: {
+	  radius: $standard-border-radius;
+	  style: solid;
+	  width: $border-size;
+	  color: transparent;
+	}
+	&:hover {
+	  @include choose-hover;
+	}
+	&.selected {
+	  @include choose-active;
+	}
       }
     }
   }
+  
   table {
     border-collapse: separate;
     border-spacing: 1px;
   }
+
   td {
     @include standard-text-padding;
     text-align: center;
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index a373abc..7e15d18 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -1,6 +1,10 @@
 @charset "utf-8";
 @import "../util";
 
+/**
+ * Rules for the Kalamar hint helper.
+ */
+
 $border-size: 2px;
 
 ul.menu.hint {
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index ad7fc9d..18da240 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -1,5 +1,9 @@
 @charset "utf-8";
 
+/**
+ * Aggregate separated Sass files for Kalamar
+ */
+
 // Global variables and mixins
 @import "fonts";         // Font families
 @import "base";          // Base styles
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 43122bc..f3b296c 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -1,25 +1,40 @@
 @charset "utf-8";
 @import "util";
 
+/**
+ * Media rules for different screen sizes.
+ * This will override some basic rules.
+ */
+
 $standard-margin: 4px;
 
 @media (orientation: portrait), (max-width: 42.5em) {
-  body, #search ol, header, header input {
+  body,
+  #search ol,
+  header,
+  header input,
+  div.resultinfo p.found,
+  #pagination > a {
     font-size: 9pt;
   }
+
   header form {
-    padding-left: 0px;
+    padding-left: 0;
     padding-top: 33px;
   }
+
   .vc {
     font-size: 9pt;
   }
+
   h1 {
     margin-left: 10px;
     width: 130px;
     height: 40px;
-    background-size: 100%;
-    background-position: 50% 0;
+    background: {
+      size: 100%;
+      position: 50% 0;
+    }
     z-index: 300;
   }
 
@@ -75,11 +90,6 @@
     }
   }
 
-  div.resultinfo p.found,
-  #pagination > a {
-    font-size: 9pt;
-  }
-
   #logos {
     margin-left: 0;
     margin-right: 0;
@@ -124,10 +134,4 @@
   main.tutorial {
     margin-right: 30px;
   }
-
-/*
-  pre.query {
-    font-size: 9.5pt;
-  }
-*/
 }
\ No newline at end of file
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index a349bd4..37afaf6 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -1,4 +1,9 @@
 /**
+ * Some variables and mixins for Kalamar,
+ * other Sass styles will use.
+ */
+
+/**
  * Official IDS colors
  */
 $ids-orange-1: rgb(246, 168,   0);
@@ -34,30 +39,32 @@
 /**
  * Blue Colors
  */
-$light-blue:     $ids-blue-2; // #cfe6f4;
-$dark-blue:      $ids-blue-1; // #73b2f4;
+$light-blue:     $ids-blue-2;
+$dark-blue:      $ids-blue-1;
 $darkest-blue:   darken($dark-blue, 40%);
 
-
 /**
  * Grey Colors
  */
 $middle-grey:  $ids-grey-1; // #999;
 $light-grey:   $ids-grey-2; // #ddd;
-// $dark-grey:    darken($light-grey, 55%); // #555;
-$dark-grey:    darken($middle-grey, 15%); // #555;
-// $nearly-white: #f5f5f5;
-$nearly-white: #fff;
+$dark-grey:    darken($middle-grey, 15%);
+$nearly-white: #fefefe;
 
+/**
+ * Red Colors (no IDS relation)
+ */
 $middle-red: #c1002b;
 $light-red: lighten($middle-red, 40%);
 $dark-red: darken($middle-red, 40%);
 
+
+/**
+ * Basic shadows
+ */
 $dark-shadow: 1px 1px 1px rgba(0,0,0,0.3);
 $light-shadow: 1px 1px rgba(255,255,255,0.5);
 
-$total-results: $light-green;
-
 /**
  * KWIC colors
  */
@@ -81,26 +88,35 @@
 $standard-border-radius: 6px;
 $item-padding: 3pt 6pt;
 
+$total-results: $light-green;
+
 /**
- * Path information
+ * Path information - relative to css!
  */
-$img-path: '../img';
+$img-path:  '../img';
 $font-path: '../font';
 
 /**
  * Margins
  */
 $standard-margin: 40px;
-$right-distance: 40px;
+$right-distance: $standard-margin;
 $right-match-distance: $standard-margin / 2;
 $logo-left-distance: 230px;
 
-
+/**
+ * Mixin for blind elements
+ * (e.g., spans in elements with an icon background)
+ */
 @mixin blind {
   position: absolute;
   margin-left: -3000px;
 }
 
+
+/**
+ * Chooseable items (default)
+ */
 @mixin choose-item {
   color: $choose-color;
   background-color: $choose-bg;
@@ -108,6 +124,9 @@
   text-shadow: $light-shadow;
 }
 
+/**
+ * Chooseable items (mouse over)
+ */
 @mixin choose-hover {
   color: $nearly-white;
   text-shadow: none;
@@ -115,6 +134,9 @@
   border-color: $darker-orange;
 }
 
+/**
+ * Chooseable items (not available)
+ */
 @mixin choose-inactive {
   color: lighten($choose-color, 20%);
   background-color: lighten($choose-bg, 20%);
@@ -122,6 +144,9 @@
   text-shadow: none;
 }
 
+/**
+ * Chooseable items (active)
+ */
 @mixin choose-active {
   color: $dark-green;
   text-shadow: none;
@@ -129,6 +154,9 @@
   border-color: $dark-green;
 }
 
+/**
+ * Chooseable items (action: remove something)
+ */
 @mixin choose-remove {
   color: $nearly-white;
   text-shadow: none;
@@ -136,25 +164,41 @@
   border-color: $dark-red;
 }
 
+/**
+ * Mixin for basic color transition
+ */
 @mixin color-transition {
   transition: color 0.3s ease 0s;
 }
 
+/**
+ * Mixing for basic text padding
+ */
 @mixin standard-text-padding {
   padding-left: .4em;
   padding-right: .4em;
 }
 
+
+/**
+ * Mixing for correct box sizing (probably not necessary)
+ */
 @mixin box-sizing-box() {
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
 }
 
+/**
+ * Noisy background (probably not necessary)
+ */
 @mixin light-noise {
   background-image:url('#{$img-path}/noise.png');
 }
 
+/**
+ * Mixin for no-appearance rules
+ */
 // https://css-tricks.com/almanac/properties/a/appearance/
 @mixin no-appearance {
   -webkit-appearance:none;
@@ -164,7 +208,7 @@
 
 
 /**
- * Font Awesome symbols
+ * Font Awesome symbol table
  */
 $fa-bars:        "\f0c9";
 $fa-extlink:     "\f08e";
@@ -176,12 +220,12 @@
 $fa-previous:    "\f0d9";
 $fa-next:        "\f0da";
 $fa-search:      "\f002";
-$fa-rewrite:     "\f040"; // "\f14b"
+$fa-rewrite:     "\f040";
 $fa-login:       "\f090";
 $fa-logout:      "\f08b";
 $fa-tutorial:    "\f19d";
 $fa-left-align:  "\f036";
 $fa-right-align: "\f038";
-$fa-question:    "\f128"; // "\f059";
+$fa-question:    "\f128";
 $fa-checked:     "\f046";
 $fa-check:       "\f096";
\ No newline at end of file