diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index d5a1eac..42aba2c 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -7,14 +7,14 @@
   margin: 0;
 }
 
-g > text {
-  fill: $dark-grey;
-}
-
 * {
   @include box-sizing-box;
 }
 
+g > text {
+  fill: $dark-grey;
+}
+
 html {
   height: 100%;
 }
@@ -63,6 +63,7 @@
     text-align: justify;
     hyphens: auto;
   }
+
 /*
   > section > p, > p {
     a {
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
new file mode 100644
index 0000000..2cfd773
--- /dev/null
+++ b/dev/scss/footer/footer.scss
@@ -0,0 +1,19 @@
+@charset "utf-8";
+@import "../util";
+
+footer {
+  position: absolute;
+  background-color: $dark-grey;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  a:link {
+    color: $light-grey;
+    &:hover {
+      color: $nearly-white;
+    }
+    &:active, &:visited {
+      color: $dark-grey;
+    }
+  }
+}
diff --git a/dev/scss/header.scss b/dev/scss/header/header.scss
similarity index 92%
rename from dev/scss/header.scss
rename to dev/scss/header/header.scss
index 2a49312..60a3bf4 100644
--- a/dev/scss/header.scss
+++ b/dev/scss/header/header.scss
@@ -1,5 +1,9 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
+@import "hint";       // Hint specific menu list
+@import "menu";       // Menu list
+@import "searchbar";  // The search bar
+@import "vc";         // Virtual collection builder
 
 header {
   position: relative;
diff --git a/dev/scss/hint.scss b/dev/scss/header/hint.scss
similarity index 97%
rename from dev/scss/hint.scss
rename to dev/scss/header/hint.scss
index 18000a1..a373abc 100644
--- a/dev/scss/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 $border-size: 2px;
 
diff --git a/dev/scss/menu.scss b/dev/scss/header/menu.scss
similarity index 98%
rename from dev/scss/menu.scss
rename to dev/scss/header/menu.scss
index a8e0306..46529bd 100644
--- a/dev/scss/menu.scss
+++ b/dev/scss/header/menu.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 $border-size: 2px;
 
diff --git a/dev/scss/searchbar.scss b/dev/scss/header/searchbar.scss
similarity index 98%
rename from dev/scss/searchbar.scss
rename to dev/scss/header/searchbar.scss
index 00c65e2..883f003 100644
--- a/dev/scss/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 $border-size: 2px;
 
diff --git a/dev/scss/vc.scss b/dev/scss/header/vc.scss
similarity index 99%
rename from dev/scss/vc.scss
rename to dev/scss/header/vc.scss
index 3a989ec..992fac0 100644
--- a/dev/scss/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 $left-padding: 28pt; // 2.8em;
 $border-size: 2px;
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 677a58a..ad7fc9d 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -1,23 +1,9 @@
 @charset "utf-8";
 
 // Global variables and mixins
-@import "fonts";      // Font families
-
-@import "base";       // Base styles
-@import "logos";      // Logo images
-@import "header";     // Top
-@import "footer";     // Bottom
-@import "searchbar";  // The search bar
-@import "menu";       // Menu list
-@import "hint";       // Hint specific menu list
-@import "pagination"; // Pagination
-@import "resultinfo"; // Information on results
-@import "matchinfo";  // Match table and tree
-@import "kwic";       // 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 "highlight";  // Navigation on the left side
-
-@import "media";      // Media queries
+@import "fonts";         // Font families
+@import "base";          // Base styles
+@import "main/main";     // Main frame styles
+@import "header/header"; // Top frame styles
+@import "footer/footer"; // Bottom frame styles
+@import "media";         // Media queries
diff --git a/dev/scss/alertify.scss b/dev/scss/main/alertify.scss
similarity index 85%
rename from dev/scss/alertify.scss
rename to dev/scss/main/alertify.scss
index ee83a5d..0eb3194 100644
--- a/dev/scss/alertify.scss
+++ b/dev/scss/main/alertify.scss
@@ -1,4 +1,4 @@
-@import "util";
+@import "../util";
 
 /*
 article.alertify-log {
diff --git a/dev/scss/highlight.scss b/dev/scss/main/highlight.scss
similarity index 100%
rename from dev/scss/highlight.scss
rename to dev/scss/main/highlight.scss
diff --git a/dev/scss/kwic.scss b/dev/scss/main/kwic.scss
similarity index 99%
rename from dev/scss/kwic.scss
rename to dev/scss/main/kwic.scss
index 0c91c7b..f04cf9b 100644
--- a/dev/scss/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 $border-size: 2px;
 
diff --git a/dev/scss/logos.scss b/dev/scss/main/logos.scss
similarity index 98%
rename from dev/scss/logos.scss
rename to dev/scss/main/logos.scss
index eb91e5e..1512a56 100644
--- a/dev/scss/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 .logo {
   &::after {
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/matchinfo.scss b/dev/scss/main/matchinfo.scss
similarity index 99%
rename from dev/scss/matchinfo.scss
rename to dev/scss/main/matchinfo.scss
index 937a022..a0be411 100644
--- a/dev/scss/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 $left-width: 176px;
 $border-size: 2px;
diff --git a/dev/scss/pagination.scss b/dev/scss/main/pagination.scss
similarity index 98%
rename from dev/scss/pagination.scss
rename to dev/scss/main/pagination.scss
index 5ceca89..d057dd0 100644
--- a/dev/scss/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 $border-size : 2px;
 
diff --git a/dev/scss/query.scss b/dev/scss/main/query.scss
similarity index 94%
rename from dev/scss/query.scss
rename to dev/scss/main/query.scss
index 4167059..ab45238 100644
--- a/dev/scss/query.scss
+++ b/dev/scss/main/query.scss
@@ -1,5 +1,5 @@
-@import "util";
 @charset "utf-8";
+@import "../util";
 
 
 pre.query {
diff --git a/dev/scss/resultinfo.scss b/dev/scss/main/resultinfo.scss
similarity index 91%
rename from dev/scss/resultinfo.scss
rename to dev/scss/main/resultinfo.scss
index 1f1097f..8717f72 100644
--- a/dev/scss/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 div.resultinfo {
   clear: both;
diff --git a/dev/scss/sidebar.scss b/dev/scss/main/sidebar.scss
similarity index 97%
rename from dev/scss/sidebar.scss
rename to dev/scss/main/sidebar.scss
index 3adc1b4..7c74912 100644
--- a/dev/scss/sidebar.scss
+++ b/dev/scss/main/sidebar.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 $border-size: 2px;
 
@@ -66,20 +66,21 @@
     li {
       padding: 0;
       > a {
-	@include choose-item;
 	padding: $item-padding;
-
+      }
+      > a:link {
+	@include choose-item;
 	border-right: {
 	  width: $border-size;
 	  style: solid;
 	}
 
 	display: block;
-	&:link, &:visited {
+	&:visited {
 	  color: inherited;
 	}
 	&:hover {
-	  color: inherit;
+	  // color: inherit;
 	  transition: none;
 	  @include choose-hover;
 	}
diff --git a/dev/scss/tutorial.scss b/dev/scss/main/tutorial.scss
similarity index 97%
rename from dev/scss/tutorial.scss
rename to dev/scss/main/tutorial.scss
index 4b4345b..3aeebb3 100644
--- a/dev/scss/tutorial.scss
+++ b/dev/scss/main/tutorial.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "util";
+@import "../util";
 
 $border-size: 2px;
 
@@ -52,7 +52,7 @@
     }
 */
     padding-top: 0;
-    // @include choose-item;
+    @include choose-item;
     background-color: $middle-grey;
     > div {
       position: relative;
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index cef3fed..45e3bee 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -89,11 +89,15 @@
     }
   }
 
-/*
-
-  #sidebar {
-    padding-top: 22px;
+  div.intro {
+    width: 100%;
   }
+
+  aside ul {
+    font-size: 9pt;
+    line-height: 1em;
+  }
+
   #tutorial {
     border-radius: 0;
     border-width: 0;
@@ -102,9 +106,19 @@
     bottom: 0;
     top: 0;
     padding: 0;
+    iframe {
+      border-radius: 0;
+    }
   }
-  #tutorial iframe {
-    border-radius: 0;
+
+  main.tutorial {
+    margin-right: 30px;
+  }
+
+/*
+
+  #sidebar {
+    padding-top: 22px;
   }
   #sidebar:not(.active) > i.fa-bars {
     font-size: 12pt;