diff --git a/dev/demo/all.html b/dev/demo/all.html
index c46dd69..a1a4cae 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -139,6 +139,11 @@
 	</div>
       </div>
     </main>
+
+    <footer>
+      <a href="/doc/KorAP">About</a>
+    </footer>
+
     <script src="../js/lib/dagre/dagre.min.js"></script>
     <script src="../js/src/api.js"></script>
     <script src="../js/src/hint.js"></script>
diff --git a/dev/img/noise.png b/dev/img/noise.png
new file mode 100644
index 0000000..12ca37d
--- /dev/null
+++ b/dev/img/noise.png
Binary files differ
diff --git a/dev/js/runner/hint.html b/dev/js/runner/hint.html
index 81f0422..b9028b9 100644
--- a/dev/js/runner/hint.html
+++ b/dev/js/runner/hint.html
@@ -10,8 +10,8 @@
   <script src="../lib/jasmine-2.1.1/boot.js"></script>
   <script src="../src/menu.js"></script>
   <script src="../src/hint.js"></script>
-  <script src="../spec/hintSpec.js"></script>
 </head>
 <body>
 </body>
+  <script src="../spec/hintSpec.js"></script>
 </html>
diff --git a/dev/js/spec/hintSpec.js b/dev/js/spec/hintSpec.js
index bb736ce..45457b4 100644
--- a/dev/js/spec/hintSpec.js
+++ b/dev/js/spec/hintSpec.js
@@ -29,18 +29,24 @@
 
   beforeEach(function () {
     input = document.createElement("input");
-    input.setAttribute("type", "text");
+    input.setAttribute('type', "text");
     input.setAttribute("value", "abcdefghijklmno");
     input.style.position = 'absolute';
+    document.getElementsByTagName('body')[0].appendChild(input);
     input.style.top  = "20px";
     input.style.left = "30px";
     input.focus();
     input.selectionStart = 5;
   });
 
+  afterEach(function () {
+    document.getElementsByTagName("body")[0].removeChild(
+      input
+    );    
+  });
+
   afterAll(function () {
     try {
-      // document.getElementsByTagName("body")[0].removeChild(input);
       document.getElementsByTagName("body")[0].removeChild(
 	document.getElementById("searchMirror")
       );
@@ -60,6 +66,7 @@
 
     expect(inputField.value()).toEqual("abcdefghijklmno");
 
+    expect(input.selectionStart).toEqual(5);
     expect(inputField.element().selectionStart).toEqual(5);
     expect(inputField.split()[0]).toEqual("abcde");
     expect(inputField.split()[1]).toEqual("fghijklmno");
@@ -75,7 +82,8 @@
     var inputField = KorAP.InputField.create(input);
     document.getElementsByTagName("body")[0].appendChild(input);
     inputField.reposition();
-    expect(inputField.mirror().style.left).toEqual("30px");
+    expect(input.style.left).toEqual("30px");
+    expect(inputField.mirror().style.left.match(/^(\d+)px$/)[1]).toBeGreaterThan(29);
     expect(inputField.mirror().style.top.match(/^(\d+)px$/)[1]).toBeGreaterThan(20);
   });
 
@@ -153,225 +161,215 @@
   });
 });
 
-
-
-
-
-
-
-
-
-
-
-xdescribe('KorAP.MenuItem', function () {
+describe('KorAP.HintMenuItem', function () {
   it('should be initializable', function () {
-
     expect(
-      function() { KorAP.MenuItem.create([]) }
+      function() { KorAP.HintMenuItem.create([]) }
     ).toThrow(new Error("Missing parameters"));
 
     expect(
-      function() { KorAP.MenuItem.create(['CoreNLP']) }
+      function() { KorAP.HintMenuItem.create(['CoreNLP']) }
     ).toThrow(new Error("Missing parameters"));
 
-    var menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
-    expect(menuItem.name).toEqual('CoreNLP');
-    expect(menuItem.action).toEqual('corenlp/');
-    expect(menuItem.desc).toBeUndefined();
-    expect(menuItem.lcfield).toEqual(' corenlp');
+    var menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
+    expect(menuItem.name()).toEqual('CoreNLP');
+    expect(menuItem.action()).toEqual('corenlp/');
+    expect(menuItem.desc()).toBeUndefined();
 
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/', 'It\'s funny']);
-    expect(menuItem.name).toEqual('CoreNLP');
-    expect(menuItem.action).toEqual('corenlp/');
-    expect(menuItem.desc).not.toBeUndefined();
-    expect(menuItem.desc).toEqual('It\'s funny');
-    expect(menuItem.lcfield).toEqual(' corenlp it\'s funny');
+    menuItem = KorAP.HintMenuItem.create(
+      ['CoreNLP', 'corenlp/', 'It\'s funny']
+    );
+    expect(menuItem.name()).toEqual('CoreNLP');
+    expect(menuItem.action()).toEqual('corenlp/');
+    expect(menuItem.desc()).not.toBeUndefined();
+    expect(menuItem.desc()).toEqual('It\'s funny');
   });
 
   it('should have an element', function () {
-    var menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
-    expect(menuItem.element).not.toBe(undefined);
-    expect(menuItem.element.nodeName).toEqual("LI");
-    expect(menuItem.element.getAttribute("data-action")).toEqual("corenlp/");
+    var menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
+    expect(menuItem.element()).not.toBe(undefined);
+    expect(menuItem.element().nodeName).toEqual("LI");
 
-    var title = menuItem.element.firstChild;
-    expect(title.nodeName).toEqual("STRONG");
+    var title = menuItem.element().firstChild;
+    expect(title.nodeName).toEqual("SPAN");
     expect(title.firstChild.nodeType).toEqual(3);
     expect(title.firstChild.nodeValue).toEqual("CoreNLP");
+    expect(menuItem.element().childNodes[0]).not.toBe(undefined);
+    expect(menuItem.element().childNodes[1]).toBe(undefined);
 
-    expect(menuItem.element.childNodes[0]).not.toBe(undefined);
-    expect(menuItem.element.childNodes[1]).toBe(undefined);
+    menuItem = KorAP.HintMenuItem.create(
+      ['CoreNLP', 'corenlp/', 'my DescRiption']
+    );
+    expect(menuItem.element()).not.toBe(undefined);
+    expect(menuItem.element().nodeName).toEqual("LI");
 
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/', 'my DescRiption']);
-    expect(menuItem.element).not.toBe(undefined);
-    expect(menuItem.element.nodeName).toEqual("LI");
-    expect(menuItem.element.getAttribute("data-action")).toEqual("corenlp/");
-
-    title = menuItem.element.firstChild;
-    expect(title.nodeName).toEqual("STRONG");
+    title = menuItem.element().firstChild;
+    expect(title.nodeName).toEqual("SPAN");
     expect(title.firstChild.nodeType).toEqual(3); // TextNode
     expect(title.firstChild.nodeValue).toEqual("CoreNLP");
 
-    expect(menuItem.element.childNodes[0]).not.toBe(undefined);
-    expect(menuItem.element.childNodes[1]).not.toBe(undefined);
+    expect(menuItem.element().childNodes[0]).not.toBe(undefined);
+    expect(menuItem.element().childNodes[1]).not.toBe(undefined);
 
-    var desc = menuItem.element.lastChild;
+    var desc = menuItem.element().lastChild;
     expect(desc.nodeName).toEqual("SPAN");
     expect(desc.firstChild.nodeType).toEqual(3); // TextNode
     expect(desc.firstChild.nodeValue).toEqual("my DescRiption");
-
-    expect(menuItem.lcfield).toEqual(' corenlp my description');
   });
 
+
   it('should be activatable and deactivateable by class', function () {
-    var menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
+    var menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
     expect(menuItem.active()).toBe(false);
-    expect(menuItem.element.getAttribute("class")).toBe(null);
+    expect(menuItem.element().getAttribute("class")).toBe(null);
     menuItem.active(true);
     expect(menuItem.active()).toBe(true);
-    expect(menuItem.element.getAttribute("class")).toEqual("active");
+    expect(menuItem.element().getAttribute("class")).toEqual("active");
     menuItem.active(false); // Is active
     expect(menuItem.active()).toBe(false);
-    expect(menuItem.element.getAttribute("class")).toEqual("");
+    expect(menuItem.element().getAttribute("class")).toEqual("");
     menuItem.active(true);
     expect(menuItem.active()).toBe(true);
-    expect(menuItem.element.getAttribute("class")).toEqual("active");
+    expect(menuItem.element().getAttribute("class")).toEqual("active");
 
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
     expect(menuItem.active()).toBe(false);
-    expect(menuItem.element.getAttribute("class")).toBe(null);
+    expect(menuItem.element().getAttribute("class")).toBe(null);
     menuItem.active(false); // Is not active
     expect(menuItem.active()).toBe(false);
-    expect(menuItem.element.getAttribute("class")).toBe(null);
+    expect(menuItem.element().getAttribute("class")).toBe(null);
   });
 
   it('should be set to boundary', function () {
-    var menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
+    var menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
     expect(menuItem.active()).toBe(false);
-    expect(menuItem.element.getAttribute("class")).toBe(null);
+    expect(menuItem.element().getAttribute("class")).toBe(null);
 
     // Set active
     menuItem.active(true);
     expect(menuItem.active()).toBe(true);
     expect(menuItem.noMore()).toBe(false);
-    expect(menuItem.element.getAttribute("class")).toEqual("active");
+    expect(menuItem.element().getAttribute("class")).toEqual("active");
 
     // Set no more
     menuItem.noMore(true);
     expect(menuItem.active()).toBe(true);
     expect(menuItem.noMore()).toBe(true);
-    expect(menuItem.element.getAttribute("class")).toEqual("active no-more");
+    expect(menuItem.element().getAttribute("class")).toEqual("active no-more");
 
     // No no more
     menuItem.noMore(false);
     expect(menuItem.active()).toBe(true);
     expect(menuItem.noMore()).toBe(false);
-    expect(menuItem.element.getAttribute("class")).toEqual("active");
-
+    expect(menuItem.element().getAttribute("class")).toEqual("active");
 
     // Set no more, deactivate
     menuItem.noMore(true);
     menuItem.active(false);
     expect(menuItem.active()).toBe(false);
     expect(menuItem.noMore()).toBe(true);
-    expect(menuItem.element.getAttribute("class")).toEqual("no-more");
+    expect(menuItem.element().getAttribute("class")).toEqual("no-more");
 
     // Set active
     menuItem.active(true);
     expect(menuItem.active()).toBe(true);
     expect(menuItem.noMore()).toBe(true);
-    expect(menuItem.element.getAttribute("class")).toEqual("no-more active");
+    expect(menuItem.element().getAttribute("class")).toEqual("no-more active");
   });
 
-
-  it('should be highlightable', function () {
+  xit('should be highlightable', function () {
     // Highlight in the middle
-    var menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
+    var menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
     menuItem.highlight("ren");
-    expect(menuItem.element.innerHTML).toEqual("<strong>Co<em>reN</em>LP</strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span>Co<mark>reN</mark>LP</span>");
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span>");
 
     // Starting highlight
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
     menuItem.highlight("cor");
-    expect(menuItem.element.innerHTML).toEqual("<strong><em>Cor</em>eNLP</strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span><mark>Cor</mark>eNLP</span>");
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span>");
+/*
 
     // Starting highlight - short
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
     menuItem.highlight("c");
-    expect(menuItem.element.innerHTML).toEqual("<strong><em>C</em>oreNLP</strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span><mark>C</mark>oreNLP</span>");
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span>");
 
     // Highlight at the end
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
     menuItem.highlight("nlp");
-    expect(menuItem.element.innerHTML).toEqual("<strong>Core<em>NLP</em></strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span>Core<mark>NLP</mark></span>");
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span>");
 
     // Highlight at the end - short
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
     menuItem.highlight("p");
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNL<em>P</em></strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNL<mark>P</mark></span>");
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span>");
 
     // No highlight
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/']);
     menuItem.highlight("xp");
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span>");
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span>");
+
 
     // Highlight in the middle - first
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
     menuItem.highlight("ren");
-    expect(menuItem.element.innerHTML).toEqual("<strong>Co<em>reN</em>LP</strong><span>This is my Example</span>");
+    expect(menuItem.element().innerHTML).toEqual("<span>Co<mark>reN</mark>LP</span><span class=\"desc\">This is my Example</span>");
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong><span>This is my Example</span>");
+    expect(menuItem.element().innerHTML).toEqual('<span>CoreNLP</span><span class="desc">This is my Example</span>');
 
     // Highlight in the middle - second
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
     menuItem.highlight("ampl");
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong><span>This is my Ex<em>ampl</em>e</span>");
+    expect(menuItem.element().innerHTML).toEqual('<span>CoreNLP</span><span class="desc">This is my Ex<mark>ampl</mark>e</span>');
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong><span>This is my Example</span>");
+    expect(menuItem.element().innerHTML).toEqual('<span>CoreNLP</span><span class="desc">This is my Example</span>');
 
     // Highlight in the middle - both
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+
     menuItem.highlight("e");
-    expect(menuItem.element.innerHTML).toEqual("<strong>Cor<em>e</em>NLP</strong><span>This is my <em>E</em>xample</span>");
+    expect(menuItem.element().innerHTML).toEqual('<span>Cor<mark>e</mark>NLP</span><span class="desc">This is my <mark>E</mark>xampl<mark>e</mark></span>');
+
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong><span>This is my Example</span>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span><span>This is my Example</span>");
 
     // Highlight in the end - second
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
     menuItem.highlight("le");
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong><span>This is my Examp<em>le</em></span>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span><span>This is my Examp<mark>le</mark></span>");
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong><span>This is my Example</span>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span><span>This is my Example</span>");
 
     // Highlight at the beginning - second
-    menuItem = KorAP.MenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
+    menuItem = KorAP.HintMenuItem.create(['CoreNLP', 'corenlp/', 'This is my Example']);
     menuItem.highlight("this");
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong><span><em>This</em> is my Example</span>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span><span><mark>This</mark> is my Example</span>");
 
     menuItem.lowlight();
-    expect(menuItem.element.innerHTML).toEqual("<strong>CoreNLP</strong><span>This is my Example</span>");
+    expect(menuItem.element().innerHTML).toEqual("<span>CoreNLP</span><span>This is my Example</span>");
+*/
   });
 });
 
diff --git a/dev/js/src/hint.js b/dev/js/src/hint.js
index 474948a..11c3e1e 100644
--- a/dev/js/src/hint.js
+++ b/dev/js/src/hint.js
@@ -366,12 +366,6 @@
 	.upgradeTo(KorAP.HintMenuItem)
 	._init(params);
     },
-    content : function (content) {
-      if (arguments.length === 1) {
-	this._content = content;
-      };
-      return this._content;
-    },
     _init : function (params) {
       if (params[0] === undefined ||
 	  params[1] === undefined)
@@ -388,6 +382,12 @@
 
       return this;
     },
+    content : function (content) {
+      if (arguments.length === 1) {
+	this._content = content;
+      };
+      return this._content;
+    },
     onclick : function () {
       var m = this.menu();
       var h = m.hint();
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 1ba3213..d5a1eac 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -15,7 +15,13 @@
   @include box-sizing-box;
 }
 
+html {
+  height: 100%;
+}
+
 body {
+  position: relative;
+  min-height: 100%;
   font-size: 12pt;
 }
 
@@ -32,13 +38,13 @@
   &:link {
     color: $dark-orange;
     text-decoration: none;
-  }
-  &:link:hover:hover {
-    color: $light-green; // $darkest-orange;
-    @include color-transition;
-  }
-  &:active, &:visited {
-    color: $darkest-orange;
+    &:hover {
+      color: $light-green; // $darkest-orange;
+      @include color-transition;
+    }
+    &:active, &:visited {
+      color: $darkest-orange;
+    }
   }
 }
 
diff --git a/dev/scss/header.scss b/dev/scss/header.scss
index 4189b6a..f2d1279 100644
--- a/dev/scss/header.scss
+++ b/dev/scss/header.scss
@@ -4,6 +4,7 @@
 header {
   position: relative;
   background-color: $light-green;
+  @include light-noise;
 //  background-color: $ids-grey-1;
   @include box-sizing-box();
   padding: 8px;
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index f09f0f0..677a58a 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -6,6 +6,7 @@
 @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
diff --git a/dev/scss/kwic.scss b/dev/scss/kwic.scss
index 8108f98..a58c23e 100644
--- a/dev/scss/kwic.scss
+++ b/dev/scss/kwic.scss
@@ -80,13 +80,28 @@
       white-space: wrap;
       height: auto;
       border-width: 2px;
-      background-color: $light-orange;
+      background-color: $dark-orange;
+      @include light-noise;
       position: relative;
       > div {
 	min-height: 42pt;
 	> div.snippet {
-	  margin: 5pt 10pt;
-	  margin-right: 3em;
+	  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;
@@ -119,7 +134,7 @@
       }
       &.active p.ref,
       &:target p.ref {
-	background-color: $dark-orange;
+//	background-color: $dark-orange;
 	color: white;
 	padding: 3pt 10pt;
 	padding-right: $right-match-distance;
@@ -133,7 +148,7 @@
 }
 
 ul.action {
-  background-color: $dark-orange;
+//  background-color: $dark-orange;
   font-size: 12pt;
   color: white;
   text: {
diff --git a/dev/scss/matchinfo.scss b/dev/scss/matchinfo.scss
index 0bcb50d..937a022 100644
--- a/dev/scss/matchinfo.scss
+++ b/dev/scss/matchinfo.scss
@@ -20,7 +20,7 @@
  */
 @mixin matchinfo-head {
   border-width: 0px;
-  border-top: $border-size solid #ff8000;
+  border-top: $border-size solid $darker-orange; // #ff8000;
   width: $left-width / 2;
 }
 
@@ -28,7 +28,7 @@
   position: relative;
   width: 100%;
   padding-top: $border-size;
-  background-color: $dark-orange;
+//  background-color: $dark-orange;
   height: auto;
   font-size: 10pt;
   text-align: left;
diff --git a/dev/scss/pagination.scss b/dev/scss/pagination.scss
index fc3ff4a..5ceca89 100644
--- a/dev/scss/pagination.scss
+++ b/dev/scss/pagination.scss
@@ -26,7 +26,7 @@
   font-size: 0;
   position: fixed;
   right: 20px;
-  bottom: 10px;
+  bottom: 24px;
   z-index: 400;
   padding: 0;
   height: auto;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index b132519..86bfb34 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -141,6 +141,9 @@
   box-sizing: border-box;         /* Opera/IE 8+ */
 }
 
+@mixin light-noise {
+  background-image:url('#{$img-path}/noise.png');
+}
 
 // https://css-tricks.com/almanac/properties/a/appearance/
 @mixin no-appearance {