diff --git a/public/fontawesome/font-awesome.min.css b/public/css/font-awesome.min.css
similarity index 100%
rename from public/fontawesome/font-awesome.min.css
rename to public/css/font-awesome.min.css
diff --git a/public/css/highlight.css b/public/css/highlight.css
new file mode 100644
index 0000000..1e61e83
--- /dev/null
+++ b/public/css/highlight.css
@@ -0,0 +1,124 @@
+/*
+
+Based on github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  padding: 0.5em;
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #998;
+  font-style: italic
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #333;
+  font-weight: bold
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #099;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula {
+  color: #d14
+}
+
+.hljs-title,
+.hljs-id,
+.coffeescript .hljs-params,
+.scss .hljs-preprocessor {
+  color: #900;
+  font-weight: bold
+}
+
+.javascript .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-title,
+.hljs-subst {
+  font-weight: normal
+}
+
+.hljs-class .hljs-title,
+.haskell .hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #458;
+  font-weight: bold
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: #008080
+}
+
+.hljs-regexp {
+  color: #009926
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073
+}
+
+.hljs-built_in,
+.lisp .hljs-title,
+.clojure .hljs-built_in {
+  color: #0086b3
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999;
+  font-weight: bold
+}
+
+.hljs-deletion {
+  background: #fdd
+}
+
+.hljs-addition {
+  background: #dfd
+}
+
+.diff .hljs-change {
+  background: #0086b3
+}
+
+.hljs-chunk {
+  color: #aaa
+}
diff --git a/public/css/media.css b/public/css/media.css
new file mode 100644
index 0000000..6eb7283
--- /dev/null
+++ b/public/css/media.css
@@ -0,0 +1,34 @@
+@media (orientation: portrait), (max-width: 42.5em) {
+  #sidebar {
+    margin-left: -230px;
+  }
+  h1 {
+    margin-left: 3px;
+    width: 4em;
+    height: 1.8em;
+    background-size: 90%;
+    z-index: 300;
+  }
+  main {
+    margin-left: 14px;
+  }
+  #top form {
+    padding-left: 0px;
+    padding-top: 2.9em;
+  }
+  #sidebar {
+    padding-top: 22px;
+  }
+  #tutorial {
+    border-radius: 0;
+    border-width: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    padding: 0;
+  }
+  #tutorial iframe {
+    border-radius: 0;
+  }
+}
\ No newline at end of file
diff --git a/public/hint.css b/public/hint.css
deleted file mode 100644
index b323523..0000000
--- a/public/hint.css
+++ /dev/null
@@ -1,57 +0,0 @@
-#searchMirror {
-  position: absolute;
-  height: 0px;
-  margin-top: 1px;
-  white-space:nowrap;
-  overflow: show;
-}
-
-#searchMirror > span {
-  opacity: 0;
-  white-space:nowrap;
-  overflow: hidden;
-}
-
-#searchMirror > ul {
-  color: white;
-  margin: 0;
-  text-indent: 0;
-  display: inline-block;
-  background-color: #496000;
-  opacity: 0;
-  padding: 0;
-  padding-top: 5px;
-  padding-bottom: 10px;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-}
-
-#searchMirror > ul > li {
-  list-style-type: none;
-  list-style-position: outside;
-  padding: 3pt 10pt;
-  text-shadow: none;
-}
-
-#searchMirror > ul > li {
-  white-space: normal;
-}
-
-#searchMirror > ul > li > span {
-  float: right;
-  margin-left: 30pt;
-  text-align: right;
-  font-style: italic;
-  color: #7ba400;
-}
-
-/* like sidebar ul li.active */
-#searchMirror > ul > li.active {
-  background-color: #7ba400;
-  text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-#searchMirror > ul > li.active > span {
-  color: #496000;
-  text-shadow: none;
-}
\ No newline at end of file
diff --git a/public/img/korap-logo-solo.svg b/public/img/korap-logo-solo.svg
index 0478e5a..73b7c58 100644
--- a/public/img/korap-logo-solo.svg
+++ b/public/img/korap-logo-solo.svg
@@ -8,8 +8,8 @@
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
-   width="292.90839"
-   height="104.8784"
+   width="297"
+   height="108"
    id="svg2">
   <defs
      id="defs4" />
diff --git a/public/js/highlight.pack.js b/public/js/highlight.pack.js
new file mode 100644
index 0000000..6c71f03
--- /dev/null
+++ b/public/js/highlight.pack.js
@@ -0,0 +1 @@
+var hljs=new function(){function k(v){return v.replace(/&/gm,"&amp;").replace(/</gm,"&lt;").replace(/>/gm,"&gt;")}function t(v){return v.nodeName.toLowerCase()}function i(w,x){var v=w&&w.exec(x);return v&&v.index==0}function d(v){return Array.prototype.map.call(v.childNodes,function(w){if(w.nodeType==3){return b.useBR?w.nodeValue.replace(/\n/g,""):w.nodeValue}if(t(w)=="br"){return"\n"}return d(w)}).join("")}function r(w){var v=(w.className+" "+(w.parentNode?w.parentNode.className:"")).split(/\s+/);v=v.map(function(x){return x.replace(/^language-/,"")});return v.filter(function(x){return j(x)||x=="no-highlight"})[0]}function o(x,y){var v={};for(var w in x){v[w]=x[w]}if(y){for(var w in y){v[w]=y[w]}}return v}function u(x){var v=[];(function w(y,z){for(var A=y.firstChild;A;A=A.nextSibling){if(A.nodeType==3){z+=A.nodeValue.length}else{if(t(A)=="br"){z+=1}else{if(A.nodeType==1){v.push({event:"start",offset:z,node:A});z=w(A,z);v.push({event:"stop",offset:z,node:A})}}}}return z})(x,0);return v}function q(w,y,C){var x=0;var F="";var z=[];function B(){if(!w.length||!y.length){return w.length?w:y}if(w[0].offset!=y[0].offset){return(w[0].offset<y[0].offset)?w:y}return y[0].event=="start"?w:y}function A(H){function G(I){return" "+I.nodeName+'="'+k(I.value)+'"'}F+="<"+t(H)+Array.prototype.map.call(H.attributes,G).join("")+">"}function E(G){F+="</"+t(G)+">"}function v(G){(G.event=="start"?A:E)(G.node)}while(w.length||y.length){var D=B();F+=k(C.substr(x,D[0].offset-x));x=D[0].offset;if(D==w){z.reverse().forEach(E);do{v(D.splice(0,1)[0]);D=B()}while(D==w&&D.length&&D[0].offset==x);z.reverse().forEach(A)}else{if(D[0].event=="start"){z.push(D[0].node)}else{z.pop()}v(D.splice(0,1)[0])}}return F+k(C.substr(x))}function m(y){function v(z){return(z&&z.source)||z}function w(A,z){return RegExp(v(A),"m"+(y.cI?"i":"")+(z?"g":""))}function x(D,C){if(D.compiled){return}D.compiled=true;D.k=D.k||D.bK;if(D.k){var z={};function E(G,F){if(y.cI){F=F.toLowerCase()}F.split(" ").forEach(function(H){var I=H.split("|");z[I[0]]=[G,I[1]?Number(I[1]):1]})}if(typeof D.k=="string"){E("keyword",D.k)}else{Object.keys(D.k).forEach(function(F){E(F,D.k[F])})}D.k=z}D.lR=w(D.l||/\b[A-Za-z0-9_]+\b/,true);if(C){if(D.bK){D.b=D.bK.split(" ").join("|")}if(!D.b){D.b=/\B|\b/}D.bR=w(D.b);if(!D.e&&!D.eW){D.e=/\B|\b/}if(D.e){D.eR=w(D.e)}D.tE=v(D.e)||"";if(D.eW&&C.tE){D.tE+=(D.e?"|":"")+C.tE}}if(D.i){D.iR=w(D.i)}if(D.r===undefined){D.r=1}if(!D.c){D.c=[]}var B=[];D.c.forEach(function(F){if(F.v){F.v.forEach(function(G){B.push(o(F,G))})}else{B.push(F=="self"?D:F)}});D.c=B;D.c.forEach(function(F){x(F,D)});if(D.starts){x(D.starts,C)}var A=D.c.map(function(F){return F.bK?"\\.?\\b("+F.b+")\\b\\.?":F.b}).concat([D.tE]).concat([D.i]).map(v).filter(Boolean);D.t=A.length?w(A.join("|"),true):{exec:function(F){return null}};D.continuation={}}x(y)}function c(S,L,J,R){function v(U,V){for(var T=0;T<V.c.length;T++){if(i(V.c[T].bR,U)){return V.c[T]}}}function z(U,T){if(i(U.eR,T)){return U}if(U.eW){return z(U.parent,T)}}function A(T,U){return !J&&i(U.iR,T)}function E(V,T){var U=M.cI?T[0].toLowerCase():T[0];return V.k.hasOwnProperty(U)&&V.k[U]}function w(Z,X,W,V){var T=V?"":b.classPrefix,U='<span class="'+T,Y=W?"":"</span>";U+=Z+'">';return U+X+Y}function N(){var U=k(C);if(!I.k){return U}var T="";var X=0;I.lR.lastIndex=0;var V=I.lR.exec(U);while(V){T+=U.substr(X,V.index-X);var W=E(I,V);if(W){H+=W[1];T+=w(W[0],V[0])}else{T+=V[0]}X=I.lR.lastIndex;V=I.lR.exec(U)}return T+U.substr(X)}function F(){if(I.sL&&!f[I.sL]){return k(C)}var T=I.sL?c(I.sL,C,true,I.continuation.top):g(C);if(I.r>0){H+=T.r}if(I.subLanguageMode=="continuous"){I.continuation.top=T.top}return w(T.language,T.value,false,true)}function Q(){return I.sL!==undefined?F():N()}function P(V,U){var T=V.cN?w(V.cN,"",true):"";if(V.rB){D+=T;C=""}else{if(V.eB){D+=k(U)+T;C=""}else{D+=T;C=U}}I=Object.create(V,{parent:{value:I}})}function G(T,X){C+=T;if(X===undefined){D+=Q();return 0}var V=v(X,I);if(V){D+=Q();P(V,X);return V.rB?0:X.length}var W=z(I,X);if(W){var U=I;if(!(U.rE||U.eE)){C+=X}D+=Q();do{if(I.cN){D+="</span>"}H+=I.r;I=I.parent}while(I!=W.parent);if(U.eE){D+=k(X)}C="";if(W.starts){P(W.starts,"")}return U.rE?0:X.length}if(A(X,I)){throw new Error('Illegal lexeme "'+X+'" for mode "'+(I.cN||"<unnamed>")+'"')}C+=X;return X.length||1}var M=j(S);if(!M){throw new Error('Unknown language: "'+S+'"')}m(M);var I=R||M;var D="";for(var K=I;K!=M;K=K.parent){if(K.cN){D=w(K.cN,D,true)}}var C="";var H=0;try{var B,y,x=0;while(true){I.t.lastIndex=x;B=I.t.exec(L);if(!B){break}y=G(L.substr(x,B.index-x),B[0]);x=B.index+y}G(L.substr(x));for(var K=I;K.parent;K=K.parent){if(K.cN){D+="</span>"}}return{r:H,value:D,language:S,top:I}}catch(O){if(O.message.indexOf("Illegal")!=-1){return{r:0,value:k(L)}}else{throw O}}}function g(y,x){x=x||b.languages||Object.keys(f);var v={r:0,value:k(y)};var w=v;x.forEach(function(z){if(!j(z)){return}var A=c(z,y,false);A.language=z;if(A.r>w.r){w=A}if(A.r>v.r){w=v;v=A}});if(w.language){v.second_best=w}return v}function h(v){if(b.tabReplace){v=v.replace(/^((<[^>]+>|\t)+)/gm,function(w,z,y,x){return z.replace(/\t/g,b.tabReplace)})}if(b.useBR){v=v.replace(/\n/g,"<br>")}return v}function p(z){var y=d(z);var A=r(z);if(A=="no-highlight"){return}var v=A?c(A,y,true):g(y);var w=u(z);if(w.length){var x=document.createElementNS("http://www.w3.org/1999/xhtml","pre");x.innerHTML=v.value;v.value=q(w,u(x),y)}v.value=h(v.value);z.innerHTML=v.value;z.className+=" hljs "+(!A&&v.language||"");z.result={language:v.language,re:v.r};if(v.second_best){z.second_best={language:v.second_best.language,re:v.second_best.r}}}var b={classPrefix:"hljs-",tabReplace:null,useBR:false,languages:undefined};function s(v){b=o(b,v)}function l(){if(l.called){return}l.called=true;var v=document.querySelectorAll("pre code");Array.prototype.forEach.call(v,p)}function a(){addEventListener("DOMContentLoaded",l,false);addEventListener("load",l,false)}var f={};var n={};function e(v,x){var w=f[v]=x(this);if(w.aliases){w.aliases.forEach(function(y){n[y]=v})}}function j(v){return f[v]||f[n[v]]}this.highlight=c;this.highlightAuto=g;this.fixMarkup=h;this.highlightBlock=p;this.configure=s;this.initHighlighting=l;this.initHighlightingOnLoad=a;this.registerLanguage=e;this.getLanguage=j;this.inherit=o;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE]};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE]};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.REGEXP_MODE={cN:"regexp",b:/\//,e:/\/[gim]*/,i:/\n/,c:[this.BE,{b:/\[/,e:/\]/,r:0,c:[this.BE]}]};this.TM={cN:"title",b:this.IR,r:0};this.UTM={cN:"title",b:this.UIR,r:0}}();hljs.registerLanguage("xml",function(a){var c="[A-Za-z0-9\\._:-]+";var d={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"};var b={eW:true,i:/</,r:0,c:[d,{cN:"attribute",b:c,r:0},{b:"=",r:0,c:[{cN:"value",v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s\/>]+/}]}]}]};return{aliases:["html"],cI:true,c:[{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{title:"style"},c:[b],starts:{e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{title:"script"},c:[b],starts:{e:"<\/script>",rE:true,sL:"javascript"}},{b:"<%",e:"%>",sL:"vbscript"},d,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ /><]+",r:0},b]}]}});hljs.registerLanguage("markdown",function(a){return{c:[{cN:"header",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"blockquote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"`.+?`"},{b:"^( {4}|\t)",e:"$",r:0}]},{cN:"horizontal_rule",b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].+?[\\)\\]]",rB:true,c:[{cN:"link_label",b:"\\[",e:"\\]",eB:true,rE:true,r:0},{cN:"link_url",b:"\\]\\(",e:"\\)",eB:true,eE:true},{cN:"link_reference",b:"\\]\\[",e:"\\]",eB:true,eE:true,}],r:10},{b:"^\\[.+\\]:",e:"$",rB:true,c:[{cN:"link_reference",b:"\\[",e:"\\]",eB:true,eE:true},{cN:"link_url",b:"\\s",e:"$"}]}]}});hljs.registerLanguage("css",function(a){var b="[a-zA-Z-][a-zA-Z0-9_-]*";var c={cN:"function",b:b+"\\(",e:"\\)",c:["self",a.NM,a.ASM,a.QSM]};return{cI:true,i:"[=/|']",c:[a.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:true,eE:true,r:0,c:[c,a.ASM,a.QSM,a.NM]}]},{cN:"tag",b:b,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[a.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[c,a.NM,a.QSM,a.ASM,a.CBLCLM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});hljs.registerLanguage("json",function(a){var e={literal:"true false null"};var d=[a.QSM,a.CNM];var c={cN:"value",e:",",eW:true,eE:true,c:d,k:e};var b={b:"{",e:"}",c:[{cN:"attribute",b:'\\s*"',e:'"\\s*:\\s*',eB:true,eE:true,c:[a.BE],i:"\\n",starts:c}],i:"\\S"};var f={b:"\\[",e:"\\]",c:[a.inherit(c,{cN:null})],i:"\\S"};d.splice(d.length,0,b,f);return{c:d,k:e,i:"\\S"}});
\ No newline at end of file
diff --git a/public/hint.js b/public/js/hint.js
similarity index 96%
rename from public/hint.js
rename to public/js/hint.js
index a6beda6..4324c1e 100644
--- a/public/hint.js
+++ b/public/js/hint.js
@@ -22,8 +22,7 @@
   mirror.setAttribute("id", "searchMirror");
   mirror.appendChild(document.createElement("span"));
   mirror.appendChild(hint);
-  search.parentNode.insertBefore(mirror, search);
-
+  document.getElementsByTagName("body")[0].appendChild(mirror);
   // Default active state
   this.active = -2;
 
@@ -103,7 +102,8 @@
   // Choose next item in list
   this.next = function () {
     if (this.active === -2)
-      return;
+      return false;
+
     var lis = hint.getElementsByTagName("li");
     if (this.active === -1) {
       lis[0].setAttribute("class", "active");
@@ -118,6 +118,8 @@
       lis[this.active].removeAttribute("class");
       lis[++this.active].setAttribute("class", "active");
     };
+
+    return true;
   };
 
   // Choose previous item in list
@@ -163,6 +165,8 @@
 
     if (foundryRegex.exec(begin + action))
       this.show(RegExp.$1 + (RegExp.$2 ? '/' + RegExp.$2 : ''));
+
+    return true;
   };
 
   function changed (e) {
@@ -199,17 +203,17 @@
     if (that.active === -2)
       return;
     if (e.key === 'Down') {
-      that.next();
+      return that.next();
     }
     else if (e.key === 'Up') {
-      that.previous();
+      return that.previous();
     }
-    else if (e.key === 'Enter') {
-      that.choose();
+    else if (e.key === 'Enter' && that.choose()) {
       e.stopPropagation();
       e.preventDefault();
       return false;
-    }
+    };
+    that.hide();
   };
 
   function qlSelect () {
diff --git a/public/jquery-2.0.0.min.js b/public/js/jquery-2.0.0.min.js
similarity index 100%
rename from public/jquery-2.0.0.min.js
rename to public/js/jquery-2.0.0.min.js
diff --git a/public/translateTable.js b/public/js/translateTable.js
similarity index 100%
rename from public/translateTable.js
rename to public/js/translateTable.js
diff --git a/public/translateTree.js b/public/js/translateTree.js
similarity index 100%
rename from public/translateTree.js
rename to public/js/translateTree.js
diff --git a/public/kwic-3.0.css b/public/kwic-3.0.css
deleted file mode 100644
index 0aac61e..0000000
--- a/public/kwic-3.0.css
+++ /dev/null
@@ -1,220 +0,0 @@
-@charset "utf-8";
-
-/*
-  light orange: #f4eebb;
-  dark orange: #ffa500;
-  dark green: #496000;
-  light green: #7ba400;
-
-  Search for: [orth=erstens]
-*/
-
-ol {
-  width: auto;
-  overflow: hidden;
-  list-style-type: none;
-  font-size: 10pt;
-  margin: 0;
-  padding: 0;
-  text-indent: 0;
-  border: 1px solid #ccc;
-  font-family: verdana, tahoma, arial;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
-}
-
-ol > li {
-  border-style: solid;
-  border-color: #ffa500;
-  border-width: 0;
-}
-
-ol > li:not(.active) {
-  width: 999999%;
-  margin-left: -499999.5%;
-  background-color: #f5f5f5;
-  overflow: hidden;
-  white-space: no-wrap;
-  cursor: pointer;
-  padding: 10px 0;
-  text-indent: 0;
-}
-
-ol > li:nth-of-type(even) {
-  background-color: #ddd;
-}
-
-ol > li > div.snippet > span,
-ol > li > div.snippet > span > span {
-  white-space: no-wrap !important;
-}
-
-ol.free-aligned > li:not(.active) > div.snippet > span.left {
-  display: inline-block;
-  text-align: right;
-  width: 50.0046%;
-}
-
-ol.free-aligned > li:not(.active) > div.snippet > span.separator {
-  width: 0px;
-  height: 1em;
-  margin-bottom: -2px;
-  display: inline-block;
-  line-height: 100%;
-  border: 1px solid #009EE0;
-  margin-left: 2px;
-  margin-right: 2px;
-}
-
-ol.free-aligned > li > div.snippet > span.right {
-  text-align: left;
-}
-
-ol.left-aligned > li > div.snippet > span.context-left {
-  display: inline-block;
-  text-align: right;
-  width: 50.001%;
-}
-
-ol.right-aligned {
-  text-align: right;
-}
-
-ol.right-aligned > li:not(.active) > div.snippet > span.context-right {
-  display: inline-block;
-  text-align: left;
-  width: 49.9915%;
-}
-
-li > div.snippet > span {
-  color: #666;
-}
-
-.match {
-  font-weight: bold;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-  color: #111;
-  padding-left: 4pt;
-  padding-right: 2pt;
-}
-
-em, em.level-0 {
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  padding-bottom: 0px;
-  font-style: normal;
-}
-
-em > em, em.level-1 {
-  padding-bottom: 3px;
-}
-
-em > em > em, em.level-2 {
-  padding-bottom: 6px;
-}
-
-.class-0 { border-color: #c1002b; }
-.class-1 { border-color: #009ee0; }
-.class-2 { border-color: #f29400; }
-
-span.more:before {
-  content: "…";
-  padding-left: 2pt;
-  padding-right: 2pt;
-}
-
-/* active view */
-ol > li.active {
-  text-align: left;
-  width: auto;
-  cursor: normal;
-  white-space: wrap;
-  height: auto;
-  border-width: 2px;
-  background-color: #f4eebb;
-  position: relative;
-  min-height: 68pt;
-}
-
-ol > li.active > div.snippet {
-  margin: 5pt 10pt;
-  margin-right: 3em;
-  margin-bottom: 24pt;
-}
-
-ol > li.active > div.snippet > span {
-  line-height: 1.4em;
-  width: auto;
-}
-
-ol > li.active > div.snippet > span.context-left {
-  margin-left: 0;
-  display: inline;
-  overflow: visible;
-  text-align: left;
-  width: auto;
-}
-
-/* Korap-Actions: */
-ol > li ul.action {
-  display: none;
-}
-
-ol > li ul.action li {
-  cursor: pointer;
-  color: white;
-  text-decoration: none;
-}
-
-ol > li.active ul.action {
-  background-color: #ffa500;
-  font-size: 12pt;
-  color: white;
-  text-shadow: none;
-  display: block;
-  margin: 0;
-  padding: 0;
-  z-index: 4;
-  text-indent: 0;
-  list-style-type: none;
-  list-style-position: inline;
-}
-
-/*
-ol > li.active ul.action.right {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  height: 1.2em;
-}
-
-ol > li.active ul.action.right li {
-  float: left;
-  padding-left: 1em;
-}
-*/
-
-ol > li.active ul.action.right {
-  position: absolute;
-  float: right;
-  text-align: center;
-  padding: 0pt 3pt;
-  height: 100%;
-  width: 1.2em;;
-  right: 0;
-  top: 0;
-}
-
-ol > li:not(.active) p {
-  display: none;
-}
-
-ol > li.active p {
-  background-color: #ffa500;
-  color: white;
-  text-shadow: none;
-  padding: 3pt 10pt;
-  margin: 5pt 0pt 0pt 0pt;
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-}
\ No newline at end of file
diff --git a/public/kwic-4.0.css b/public/kwic-4.0.css
deleted file mode 100644
index bad538c..0000000
--- a/public/kwic-4.0.css
+++ /dev/null
@@ -1,221 +0,0 @@
-@charset "utf-8";
-/*
-  light orange: #f4eebb;
-  dark orange: #ffa500;
-  dark green: #496000;
-  light green: #7ba400;
-
-  Search for: [orth=erstens]
-*/
-
-ol {
-  width: auto;
-  overflow: hidden;
-  list-style-type: none;
-  font-size: 10pt;
-  margin: 0;
-  padding: 0;
-  text-indent: 0;
-  border: 1px solid #ccc;
-  font-family: verdana, tahoma, arial;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
-}
-
-ol > li {
-  border-style: solid;
-  border-color: #ffa500;
-  border-width: 0;
-}
-
-ol > li:not(.active) {
-  width: 99999%;
-  margin-left: -49999.5%;
-  background-color: #f5f5f5;
-  overflow: hidden;
-  white-space: no-wrap;
-  cursor: pointer;
-  padding: 5pt 0 6pt 0;
-  text-indent: 0;
-}
-
-ol > li:nth-of-type(even) {
-  background-color: #ddd;
-}
-
-ol > li > div > div.snippet > span,
-ol > li > div > div.snippet > span > span {
-  white-space: no-wrap !important;
-}
-
-ol.free-aligned > li:not(.active) > div > div.snippet > span.left {
-  display: inline-block;
-  text-align: right;
-  width: 50.046%;
-}
-
-ol.free-aligned > li:not(.active) > div > div.snippet > span.separator {
-  width: 0px;
-  height: 1em;
-  margin-bottom: -2px;
-  display: inline-block;
-  line-height: 100%;
-  border: 1px solid #009EE0;
-  margin-left: 2px;
-  margin-right: 2px;
-}
-
-ol.free-aligned > li > div > div.snippet > span.right {
-  text-align: left;
-}
-
-ol.left-aligned > li > div > div.snippet > span.context-left {
-  display: inline-block;
-  text-align: right;
-  width: 50.01%;
-}
-
-ol.right-aligned {
-  text-align: right;
-}
-
-ol.right-aligned > li:not(.active) > div > div.snippet > span.context-right {
-  display: inline-block;
-  text-align: left;
-  width: 49.915%;
-}
-
-li > div > div.snippet > span {
-  color: #666;
-}
-
-.match {
-  font-weight: bold;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-  color: #111;
-  padding-left: 4pt;
-  padding-right: 2pt;
-}
-
-em, em.level-0 {
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  padding-bottom: 0px;
-  font-style: normal;
-}
-
-em > em, em.level-1 {
-  padding-bottom: 3px;
-}
-
-em > em > em, em.level-2 {
-  padding-bottom: 6px;
-}
-
-.class-0 { border-color: #c1002b; }
-.class-1 { border-color: #009ee0; }
-.class-2 { border-color: #f29400; }
-
-span.more:before {
-  content: "…";
-  padding-left: 2pt;
-  padding-right: 2pt;
-}
-
-/* active view */
-ol > li.active {
-  text-align: left;
-  width: auto;
-  cursor: normal;
-  white-space: wrap;
-  height: auto;
-  border-width: 2px;
-  background-color: #f4eebb;
-  position: relative;
-}
-
-ol > li.active > div > div.snippet {
-  margin: 5pt 10pt;
-  margin-right: 3em;
-}
-
-ol > li.active > div {
-  min-height: 42pt;
-}
-
-ol > li.active > div > div.snippet > span {
-  line-height: 1.4em;
-  width: auto;
-}
-
-ol > li.active > div > div.snippet > span.context-left {
-  margin-left: 0;
-  display: inline;
-  overflow: visible;
-  text-align: left;
-  width: auto;
-}
-
-/* Korap-Actions: */
-ol > li ul.action {
-  display: none;
-}
-
-ol > li ul.action li {
-  cursor: pointer;
-  color: white;
-  text-decoration: none;
-}
-
-ol > li.active ul.action {
-  background-color: #ffa500;
-  font-size: 12pt;
-  color: white;
-  text-shadow: none;
-  display: block;
-  margin: 0;
-  padding: 0;
-  z-index: 4;
-  text-indent: 0;
-  list-style-type: none;
-  list-style-position: inline;
-}
-
-/*
-ol > li.active ul.action.right {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  height: 1.2em;
-}
-
-ol > li.active ul.action.right li {
-  float: left;
-  padding-left: 1em;
-}
-*/
-
-ol > li.active ul.action.right {
-  position: absolute;
-  float: right;
-  text-align: center;
-  padding: 0pt 3pt;
-  height: 100%;
-  width: 1.2em;;
-  right: 0;
-  top: 0;
-}
-
-ol > li:not(.active) p {
-  display: none;
-}
-
-ol > li.active p {
-  background-color: #ffa500;
-  color: white;
-  text-shadow: none;
-  padding: 3pt 10pt;
-  margin: 0pt;
-  width: 100%;
-  bottom: 0;
-  z-index: 300;
-}
\ No newline at end of file
diff --git a/public/sass/.sass-cache/600d657f6ac2358f30ba6bc0ab4cd7ffb6194ced/flymake10181orG.rbc b/public/sass/.sass-cache/600d657f6ac2358f30ba6bc0ab4cd7ffb6194ced/flymake10181orG.rbc
new file mode 100644
index 0000000..6c2e1c5
--- /dev/null
+++ b/public/sass/.sass-cache/600d657f6ac2358f30ba6bc0ab4cd7ffb6194ced/flymake10181orG.rbc
Binary files differ
diff --git a/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc
new file mode 100644
index 0000000..da6a64a
--- /dev/null
+++ b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc
Binary files differ
diff --git a/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/kwic-4.0.scssc b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/kwic-4.0.scssc
new file mode 100644
index 0000000..a3aab1f
--- /dev/null
+++ b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/kwic-4.0.scssc
Binary files differ
diff --git a/public/sass/colors.scss b/public/sass/colors.scss
new file mode 100644
index 0000000..bee457c
--- /dev/null
+++ b/public/sass/colors.scss
@@ -0,0 +1,23 @@
+$light-orange:  #f4eebb;
+$dark-orange:   #ffa500;
+$darker-orange: #ff8000;
+$darkest-orange: darken($dark-orange, 20%);
+$dark-green:    #496000;
+$light-green:   #7ba400;
+$total-results: $light-green; // #c1002b;
+
+$light-shadow: 1px 1px rgba(255, 255, 255, 0.9);
+
+$kwic-border:       #999;
+$kwic-line-noneven: #f5f5f5;
+$kwic-line-even:    #ddd;
+$kwic-match-color:  #333;
+$kwic-match-shadow: $light-shadow;
+
+$kwic-highlight-0: #c1002b;
+$kwic-highlight-1: #009ee0;
+$kwic-highlight-2: #f29400;
+
+$pagination-bg: #ddd;
+$pagination-border: $kwic-border;
+$pagination-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
\ No newline at end of file
diff --git a/public/sass/hint.scss b/public/sass/hint.scss
new file mode 100644
index 0000000..c19b508
--- /dev/null
+++ b/public/sass/hint.scss
@@ -0,0 +1,52 @@
+@charset "utf-8";
+
+@import "colors";
+
+#searchMirror {
+  position: absolute;
+  margin-top: 1px;
+  white-space: nowrap;
+  overflow: show;
+  height: 0;
+  > span {
+    opacity: 0;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  > ul {
+    color: white;
+    margin: 0;
+    text-indent: 0;
+    display: inline-block;
+    background-color: $dark-green;
+    opacity: 0;
+    padding: 0;
+    padding-top: 5px;
+    padding-bottom: 10px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    > li {
+      list-style-type: none;
+      list-style-position: outside;
+      padding: 3pt 10pt;
+      text-shadow: none;
+      white-space: normal;
+      > span {
+        float: right;
+        margin-left: 30pt;
+        text-align: right;
+        font-style: italic;
+        color: #7ba400;
+      }
+      /* like sidebar ul li.active */
+      &.active {
+        background-color: #7ba400;
+        text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+        > span {
+          color: #496000;
+          text-shadow: none;
+        }
+      }
+    }
+  }
+}
diff --git a/public/sass/kwic-4.0.scss b/public/sass/kwic-4.0.scss
new file mode 100644
index 0000000..8a16289
--- /dev/null
+++ b/public/sass/kwic-4.0.scss
@@ -0,0 +1,220 @@
+@charset "utf-8";
+
+$fonts: verdana, tahoma, arial;
+
+@import "colors";
+
+@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+ */
+}
+
+
+/*
+  Search for: [orth=erstens]
+*/
+
+ol {
+  width: auto;
+  overflow: hidden;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+  border: 1px solid $kwic-border;
+  font: {
+    family: $fonts;
+    size: 10pt;
+  }
+  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
+  > li {
+    border: {
+      style: solid;
+      color: #ffa500;
+      width: 0;
+    }
+    &:not(.active):not(:target) {
+      width: 99999%;
+      margin-left: -49999.5%;
+      background-color: $kwic-line-noneven;
+      overflow: hidden;
+      white-space: no-wrap;
+      cursor: pointer;
+      padding: 5pt 0 6pt 0;
+      text-indent: 0;
+      &:nth-of-type(even) {
+        background-color: $kwic-line-even;
+      }
+    }
+    > div {
+      > div.snippet > span {
+        white-space: no-wrap !important;
+        > span {
+          white-space: no-wrap !important;
+        }
+        color: #666;
+        &.match {
+          font-weight: bold;
+          text-shadow: $kwic-match-shadow;
+          color: $kwic-match-color;
+          padding-left: 4pt;
+          padding-right: 2pt;
+        }
+      }
+    }
+  }
+}
+
+ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.left {
+  display: inline-block;
+  text-align: right;
+  width: 50.046%;
+}
+
+ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.separator {
+  width: 0px;
+  height: 1em;
+  margin-bottom: -2px;
+  display: inline-block;
+  line-height: 100%;
+  border: 1px solid #009EE0;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+ol.free-aligned > li > div > div.snippet > span.right {
+  text-align: left;
+}
+
+ol.left-aligned > li > div > div.snippet > span.context-left {
+  display: inline-block;
+  text-align: right;
+  width: 50.01%;
+}
+
+ol.right-aligned {
+  text-align: right;
+  > li:not(.active):not(:target) > div > div.snippet > span.context-right {
+    display: inline-block;
+    text-align: left;
+    width: 49.915%;
+  }
+}
+
+/* Highlights */
+em, em.level-0 {
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  padding-bottom: 0px;
+  font-style: normal;
+}
+
+em > em, em.level-1 {
+  padding-bottom: 3px;
+}
+
+em > em > em, em.level-2 {
+  padding-bottom: 6px;
+}
+
+.class-0 { border-color: $kwic-highlight-0; }
+.class-1 { border-color: $kwic-highlight-1; }
+.class-2 { border-color: $kwic-highlight-2; }
+
+
+span.more:before {
+  content: "…";
+  padding-left: 2pt;
+  padding-right: 2pt;
+}
+
+/* active view */
+ol > li.active,
+ol > li:target {
+  text-align: left;
+  width: auto;
+  cursor: normal;
+  white-space: wrap;
+  height: auto;
+  border-width: 2px;
+  background-color: $light-orange;
+  position: relative;
+  > div {
+    min-height: 42pt;
+    > div.snippet {
+      margin: 5pt 10pt;
+      margin-right: 3em;
+      > span {
+        line-height: 1.4em;
+        width: auto;
+        &.context-left {
+          margin-left: 0;
+          display: inline;
+          overflow: visible;
+          text-align: left;
+          width: auto;
+        }
+      }
+    }
+  }
+}
+
+/* Actions */
+ol > li {
+  ul.action {
+    display: none;
+    > li {
+      cursor: pointer;
+      color: white;
+      text-decoration: none;
+    }
+  }
+  /* active actions */
+  &.active, &:target {
+    ul.action {
+      background-color: $dark-orange;
+      font-size: 12pt;
+      color: white;
+      text: {
+        shadow: none;
+        indent: 0;
+      }
+      display: block;
+      margin: 0;
+      padding: 0;
+      z-index: 4;
+      list-style: {
+        type: none;
+        position: inline;
+      }
+      &.right {
+        position: absolute;
+        float: right;
+        text-align: center;
+        padding: 0pt 3pt;
+        height: 100%;
+        width: 1.2em;;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+  &:not(.active):not(:target) p {
+    display: none;
+  }
+  &.active p, &:target p {
+    @include box-sizing-box();
+    padding-right: 2em;
+    background-color: $dark-orange;
+    color: white;
+    text-shadow: none;
+    padding: 3pt 10pt;
+    margin: 0pt;
+    width: 100%;
+    bottom: 0;
+    z-index: 300;
+  }
+}
+
+
diff --git a/public/sass/pagination.scss b/public/sass/pagination.scss
new file mode 100644
index 0000000..d847f6f
--- /dev/null
+++ b/public/sass/pagination.scss
@@ -0,0 +1,78 @@
+@import "colors";
+
+/*
+<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="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span>2</span></a>
+  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=3"><span>3</span></a>
+  <span><i class="fa fa-ellipsis-h"></i></span>
+  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=67"><span>67</span></a>
+  <a rel="next" href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span><i class="fa fa-caret-right"></i></span></a>
+</div>
+*/
+
+#pagination {
+  position: fixed;
+  right: 20px;
+  bottom: 10px;
+  z-index: 400;
+  span {
+    display: inline-block;
+    background-color: $pagination-bg;
+    height: 1.5em;
+    line-height: 1.5em;
+    padding: {
+      left: .4em;
+      right: .4em;
+    }
+    text-align: center;
+    border: {
+      top-width: 2px;
+      top-style: solid;
+      bottom-width:  2px;
+      bottom-style: solid;
+      color: $pagination-border;
+    }
+    box-shadow: $pagination-box-shadow;
+  }
+  a {
+    text-shadow: $light-shadow;
+    &[rel=self] span {
+      border: {
+	color: $dark-orange;
+	left-style: solid;
+	right-style: solid;
+	left-width: 2px;
+	right-width: 2px;
+      }
+      background-color: $light-orange;
+      color: $darkest-orange;
+    }
+    &[rel=next] span {
+      border: {
+	right-width: 2px;
+	right-style: solid;
+	top-right-radius: 12px;
+	bottom-right-radius: 12px;
+      }
+    }
+    &[rel=prev] span {
+      border: {
+	left-width: 2px;
+	left-style: solid;
+	top-left-radius: 12px;
+	bottom-left-radius: 12px;
+      }      
+    }
+    &[href] {
+      color: $light-green;
+      span:hover {
+        background-color: $light-green;
+        border-color: $dark-green;
+        color: $dark-green;
+        text-shadow: none;
+      }
+    }
+  }
+}
diff --git a/public/sass/query.scss b/public/sass/query.scss
new file mode 100644
index 0000000..591f458
--- /dev/null
+++ b/public/sass/query.scss
@@ -0,0 +1,48 @@
+@charset "utf-8";
+
+@import "colors";
+
+/* code data - clickable */
+pre.query {
+  overflow-x: hidden;
+  background-color: $light-orange;
+  white-space: normal;
+  cursor: pointer;
+  display: block;
+  font: {
+    size: 11pt;
+    weight: bold;
+  }
+  padding: 2pt;
+  margin: 0;
+  margin-bottom: 5pt;
+  color: $darkest-orange;
+  text-shadow: $light-shadow;
+  border: {
+    color: $dark-orange;
+    style: solid;
+    width: 3px;
+    radius: 6px;
+  }
+  code {
+    white-space: pre;
+    display: block;
+    padding: 2px 5px;
+    margin: 0;
+  }
+  &.serial {
+    overflow-x: auto;
+    &:not(.active) {
+      overflow-x: hidden;
+      > span {
+        padding: 2pt;
+      }
+      code {
+        display: none;
+      }
+    }
+    &.active > span {
+      display: none;
+    }
+  }
+}
diff --git a/public/responsive.css b/public/sass/responsive.scss
similarity index 67%
rename from public/responsive.css
rename to public/sass/responsive.scss
index 65096d3..ee5b4fc 100644
--- a/public/responsive.css
+++ b/public/sass/responsive.scss
@@ -18,22 +18,24 @@
   border-width: 0;
   padding: 0;
   font-size: 9pt;
-}
-
-#tutorial > iframe {
-  border-radius: 0;
+  > iframe {
+    border-radius: 0;
+  }
 }
 
 #top {
   padding: 0 0 0 0;
   height: 80px;
-}
-
-#top h1 {
-  margin: 5px;
-  height: 30px;
-  width: 80px;
-  background-size: 98% auto;
+  h1 {
+    margin: 5px;
+    height: 30px;
+    width: 80px;
+    background-size: 98% auto;
+  }
+  /* Temporary */
+  form button {
+    display: none;
+  }
 }
 
 #sidebar {
@@ -41,8 +43,10 @@
 }
 
 #search {
-  margin-left: 0;
-  margin-right: 0;
+  margin {
+    left: 0;
+    right: 0;
+  }
 }
 
 form {
@@ -64,21 +68,14 @@
   right: 7px;
 }
 
-/* Temporary */
-#top form button {
-  display: none;
-}
-
 #search > ol > li {
   font-size: 9pt;
-}
-
-#search > ol > li:not(.active) {
-  padding: 4pt 0 5pt 0;
-}
-
-#search > ol > li.active {
-  padding: 0 0 0 0;
+  &:not(.active) {
+    padding: 4pt 0 5pt 0;
+  }
+  &.active {
+    padding: 0 0 0 0;
+  }
 }
 
 code.query.serial {
diff --git a/public/sass/sidebar.scss b/public/sass/sidebar.scss
new file mode 100644
index 0000000..05aa942
--- /dev/null
+++ b/public/sass/sidebar.scss
@@ -0,0 +1,99 @@
+@import "colors";
+
+#sidebar {
+  color: #fff;
+  text-shadow: none;
+  transition: all .3s ease-in-out;
+  position: fixed;
+  z-index: 500;
+  height: 105%;
+  margin-top: -10px;
+  background-color: #496000;
+  width: 230px;
+  margin-left: -215px;
+  padding-top: 80px;
+  left: 0;
+  top: 0;
+  &.active {
+    box-shadow: 2px 2px 5px darken($dark-green, 15%);
+    margin-left: 0px;
+    left: 0;
+    top: 0;
+  }
+  > * {
+    opacity: 0;
+// TODO
+    transition: {
+      property: opacity;
+      duration: .3s;
+    }
+  }
+  &.active {
+    > * {
+      opacity: 1;
+    }
+    > i.fa-bars {
+      opacity: 0;
+    }
+  }
+  &:not(.active) > i.fa-bars {
+    opacity: 1;
+    cursor: pointer;
+    background-color: #496000;
+    position: fixed;
+    font-size: 16pt;
+    width: 16pt;  
+    height: 17pt;
+    padding: 6pt;
+    bottom: 0;
+    left: 0;
+    border-top-right-radius: 5pt;
+  }
+  h2 {
+    font: {
+      size: 100%;
+      weight: bold;
+    }
+    text-align: center;
+    padding: 0;
+    margin: 0 0 5pt 0;
+  }
+  ul {
+    list-style-type: none;
+    margin: 0;
+    font-size: 10pt;
+    text-indent: 0;
+    padding: 0;
+    li {
+      padding: 4pt 10pt;
+      h3 {
+        font: {
+	  weight: bold;
+	  size: 100%;
+	}	  
+	padding: 0;
+	margin: 0;
+      }
+      &.active {
+	background-color: $light-green;
+	text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+	h3 {
+	  margin-bottom: 2pt;
+	  padding-bottom: 2pt;
+	  border-bottom: 1px solid black;
+	}
+      }
+    }
+  }
+  dl.info {
+    font-size: 9pt;
+    padding: 0 10pt;
+    > dt {
+      font-weight: bold;
+      float: left;
+    }
+    > dd {
+      text-align: right;
+    }
+  }
+}
diff --git a/public/sass/style.scss b/public/sass/style.scss
new file mode 100644
index 0000000..f42070a
--- /dev/null
+++ b/public/sass/style.scss
@@ -0,0 +1,289 @@
+@charset "utf-8";
+
+@import "colors";
+
+@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+ */
+}
+
+@mixin no-appearance() {
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+}
+
+body, html, select {
+  color: #666;
+  font-family: verdana, tahoma, arial;
+  margin: 0;
+}
+
+body, html, #searchbar button {
+  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#top {
+  background-color: #7ba400;
+  @include box-sizing-box();
+  padding: 8px;
+  padding-bottom: 0;
+  position: relative;
+  font-size: 10pt;
+  color: white;
+  text-shadow: none;
+  button {
+    color: $light-green;
+    background-color: transparent;
+    border-width: 0;
+    font-weight: normal;
+    margin: 0;
+    padding: 0;
+  }
+  form {
+    display: block;
+    padding-left: 230px;
+    margin: 0px;
+    position: relative;
+    > div.select, > span.location {
+      line-height: 1.8em;
+      border: {
+	width: 0;
+	bottom-width: 3px;
+	style: solid;
+	color: transparent;
+      }
+      display: inline-block;
+      &:hover {
+	border-color: $dark-green;
+      }
+    }
+    > span.location {
+      padding: 0 2px;
+      cursor:pointer;
+    }
+    > div.select {      
+      position: relative;
+      padding: 0;
+      margin: 0;
+      &:after {
+	content: "";
+	font-family: FontAwesome;
+	font-style: normal;
+	font-weight: normal;
+	right: 0px;
+	top: 0px;
+	width: 18px;
+	text-align: center;
+	position: absolute;
+	pointer-events: none;
+	background-color: $light-green;
+      }
+      > * {
+	cursor: pointer;
+	padding: 0pt;
+	line-height: 1.8em;
+	outline: none;
+      }
+    }
+  }
+}
+
+
+
+/*
+http://cssdeck.com/labs/styling-select-box-with-css3
+*/
+
+#ql-field {
+  margin: 0;
+  outline: none;
+  border: none;
+  display: inline-block;
+  position: relative;
+  color: white;
+  background-color: transparent;
+  -webkit-appearance: none;
+  border-width: 0;
+  border-radius: 0;
+  @include no-appearance();
+  &:checked {
+    outline: none;
+  }
+  > option {
+    padding: 0pt 2pt;
+    outline: none;
+  }
+}
+
+/* funny hack */
+#ql-field:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 white;
+}
+
+
+#searchbar {
+  position: relative;
+  @include box-sizing-box();
+  width: 100%;
+  padding-right: 60px;
+  button {
+    position: absolute;
+    font-weight: normal;
+    background-color: $pagination-bg;
+    padding: 0;
+    height: 100%;
+    top: 0;
+    right: 30px;
+    width: 30px;
+    border: {
+      top-width: 2px;
+      top-style: solid;
+      bottom-width:  2px;
+      bottom-style: solid;
+      color: white;
+    }
+    &:hover {
+      cursor:pointer;
+      color: white;
+    }
+    &:first-of-type {
+      border: {
+	left-width: 1px;
+	left-style: solid;
+	left-color: $pagination-border;
+      }
+    }
+    &:last-of-type {
+      @include box-sizing-box();
+      border: {
+	right-width: 2px;
+	right-style: solid;
+	top-right-radius: 12px;
+	bottom-right-radius: 12px;
+      }
+    }
+    &:hover {
+      background-color: $light-green;
+      border-color: $dark-green;
+      color: $dark-green;
+      text-shadow: none;
+    }
+  }
+  button + button {
+    right: 0;
+  }
+}
+
+#q-field {
+  border: 2px solid white;
+  padding: 3px;
+  font-size: 11pt;
+  width: 100%;
+  margin: 0;
+  @include box-sizing-box();
+  display: block;
+}
+
+#button-right {
+  display: inline-block;
+  float: right;
+  color: white;
+  line-height: 2em;
+  > button {
+    border-bottom: 3px solid transparent;
+    font-size: 120%;
+    cursor: pointer;
+    color: white;
+    line-height: 14pt;
+    padding: 0;
+    &:hover {
+      border-bottom-color: $dark-green;
+    }
+  }
+}
+/*
+#button-right {
+  position: absolute;
+  @include box-sizing-box();
+  right: 0px;
+  bottom: 0px;
+  height: 2em;
+  width: 6em;
+  > button {
+    cursor: pointer;
+    color: white;
+    right: 5px;
+    width: 2em;
+    bottom: 0;
+    &:hover {
+      border-bottom: 2px solid green;
+    }
+    &[name=alignment] {
+    }
+    &[name=tutorial] {
+    }
+  }
+}
+*/
+
+p.found {
+  font-size: 10pt;
+  padding: 0;
+  margin: 0;
+  text-align: right;
+}
+
+#total-results {
+  color: $total-results;
+  font-weight: bold;
+}
+
+/* KorAP header logo */
+h1 {
+  margin: 0;
+  margin-left:15px;
+  left: 0;
+  top: 0;
+  position: absolute;
+  width: 7.8em;
+  height: 2.6em;
+  z-index: 999;
+  background: {
+    repeat: no-repeat;
+    position: center center;
+    size: 65%;
+    image: url('/img/korap-logo-solo.svg');
+  }
+  span {
+    margin-left: -3000px;
+  }
+}
+
+#search {
+  margin-bottom: 44px;
+  &.match {
+    margin-top: 14pt;
+  }
+}
+
+main {
+  margin: {
+    left: 30px;
+    right: 14px;
+  }
+  &.embedded {
+    margin: {
+      left: 14px;
+      right: 14px;
+    }
+  }
+}
+
diff --git a/public/sass/table.scss b/public/sass/table.scss
new file mode 100644
index 0000000..48f1799
--- /dev/null
+++ b/public/sass/table.scss
@@ -0,0 +1,64 @@
+@charset "utf-8";
+
+ol > li:not(.active) .tokenInfo {
+  display: none;
+}
+
+.tokenInfo {
+  display: none;
+  background-color: #ffa500;
+  margin-right: 26px;
+  overflow: auto;
+  &.active {
+    display: block;
+  }
+  table {
+    font-size: 10pt;
+    padding: 3pt 10pt; /* wie in ol > li.active p */
+    /* All cells */
+    > tr {
+      > * {
+	padding: 1pt 6pt;
+	vertical-align: top;
+      }
+      > td {
+	text-align: center;
+	background-color: #f4eebb;
+      }
+      /* header */
+      > th{
+	&:not([rowspan]) {
+	  color: white;
+	  text-shadow: none;
+	}
+	&[rowspan]:first-child {
+	  background-color: #f4eebb;
+	}
+	span.switchSort {
+	  cursor: pointer;
+	  position: absolute;
+	  display: inline-block;
+	  right: 0;
+	  margin-right: -11pt;
+	  width: 20pt;
+	}
+      }
+      &:first-child th {
+	text-align: center;
+	background-color: #ff8000;
+	/* first column header */
+	&:first-child {
+	  position: relative;
+	  padding-right: 20pt;
+	  padding-left: 5pt;
+	}
+	/* second column header */
+	&:nth-child(2) {
+	  text-align: left;
+	  padding-left: 20pt;
+	  padding-right: 5pt;
+	}
+      }
+    }
+  }
+}
diff --git a/public/sass/tutorial.scss b/public/sass/tutorial.scss
new file mode 100644
index 0000000..80e92a1
--- /dev/null
+++ b/public/sass/tutorial.scss
@@ -0,0 +1,49 @@
+@import "colors";
+
+#tutorial {
+  position: fixed;
+  display: block;
+  z-index: 9999;
+  background-color: $dark-green;
+  border-radius: 15px;
+  padding: 5px;
+  top:    2%;
+  bottom: 2%;
+  left:   5%;
+  right:  5%;
+  &:not(.active) {
+    display: none;
+  }
+  &.active {
+    display: block;
+  }
+  > i,
+  > a > i {
+    font-size: 20pt;
+    color: $dark-green;
+    position: absolute;
+    z-index: 100;
+    top: 10pt;
+    right: 20pt;
+    cursor: pointer;
+  }
+  > a > i {
+    right: 40pt;
+  }
+  iframe {
+    width: 100%;
+    min-height: 100%;
+    border: {
+      width: 0;
+      radius: 10px;
+    }
+    background: {
+      image: url('img/crab.svg');
+      size: 10%;
+      repeat: no-repeat;
+      position: center center;
+      color: white;
+    }
+  }
+}
+
diff --git a/public/style.css b/public/style.css
deleted file mode 100644
index 3964bbb..0000000
--- a/public/style.css
+++ /dev/null
@@ -1,329 +0,0 @@
-@charset "utf-8";
-
-body, html {
-  color: #666;
-  font-family: verdana, tahoma, arial;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
-  margin: 0;
-}
-
-a {
-  color: inherit;
-}
-
-#top {
-  background-color: #7ba400;
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
-  padding: 0pt;
-  padding-top: 5px;
-  position: relative;
-  height: 70px;
-  padding-left: 30px;
-}
-
-#q-field {
-  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-  box-sizing: border-box;         /* Opera/IE 8+ */
-}
-
-#button-right {
-  position: absolute;
-  right: 15px;
-  top: 15px;
-}
-
-input, button {
-  border: 2px solid white;
-  padding: 3px;
-  font-size: 11pt;
-}
-
-form {
-  margin-left: 235px;
-  margin-top:0px
-}
-
-form input[type=search] {
-  width: 50%;
-}
-
-a {
-  text-decoration: none;
-}
-
-p.found {
-  font-size: 10pt;
-  padding: 0;
-  margin: 0;
-}
-
-p.found {
-  text-align: right;
-}
-
-#pagination {
-  position: fixed;
-  right: 20px;
-  bottom: 10px;
-  z-index: 800;
-}
-
-#pagination span {
-  display: inline-block;
-  background-color: #ddd;
-  margin: 2pt;
-  height: 1.5em;
-  padding-left: .5em;
-  padding-right: .5em;
-  line-height: 1.5em;
-  text-align: center;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #999;
-  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-}
-
-#pagination a {
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-}
-
-#pagination a[rel=self] span {
-  border-color: #ffa500;
-  background-color: #f4eebb;
-  color: #ff8000;
-}
-
-#pagination a[href] {
-  color: #7ba400;
-}
-
-#pagination a[href] span:hover {
-  background-color: #7ba400;
-  border-color: #496000;
-  color: #496000;
-  text-shadow: none;
-}
-
-#total-results {
-  color: #c1002b;
-}
-
-code.query {
-  background-color: #f4eebb;
-  display: block;
-  border-style: solid;
-  border-color: #ffa500;
-  font-size: 12pt;
-  padding: 2pt;
-  color: #ff8000;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-  border-width: 2px;
-  margin: 0;
-  margin-bottom: 5pt;
-  cursor: pointer;
-}
-
-code.query.serial:not(.active) span {
-  padding: 2pt;
-}
-
-code.query pre {
-  display: block;
-  padding: 2px 5px;
-  margin: 0;
-}
-
-code.query.serial:not(.active) pre {
-  display: none;
-}
-
-code.query.serial.active span {
-  display: none;
-}
-
-#sidebar.active {
-  margin-left: 0px;
-  left: 0;
-  top: 0;
-}
-
-#sidebar {
-  color: #fff;
-  text-shadow: none;
-  transition: all .3s ease-in-out;
-  position: fixed;
-  z-index: 500;
-  height: 100%;
-  background-color: #496000;
-  width: 260px;
-  margin-left: -245px;
-  left: 0;
-  top: 0;
-}
-
-#sidebar > * {
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: .3s;
-}
-
-#sidebar:not(.active) > i.fa-bars {
-  opacity: 1;
-  cursor: pointer;
-  background-color: #496000;
-  position: fixed;
-  font-size: 16pt;
-  width: 16pt;  
-  height: 17pt;
-  padding: 6pt;
-  bottom: 0;
-  left: 0;
-  border-top-right-radius: 5pt;
-}
-
-#sidebar.active > * {
-  opacity: 1;
-}
-
-#sidebar.active > i.fa-bars {
-  opacity: 0;
-}
-
-#sidebar h2 {
-  font-size: 100%;
-  font-weight: bold;
-  text-align: center;
-  padding: 0;
-  margin: 0 0 5pt 0;
-}
-
-#sidebar ul {
-  list-style-type: none;
-  margin: 0;
-  font-size: 10pt;
-  text-indent: 0;
-  padding: 0;
-}
-
-#sidebar ul li {
-  padding: 4pt 10pt;
-}
-
-#sidebar ul li h3 {
-  font-weight: bold;
-  font-size: 100%;
-  padding: 0;
-  margin: 0;
-}
-
-#sidebar ul li.active h3 {
-  margin-bottom: 2pt;
-  padding-bottom: 2pt;
-  border-bottom: 1px solid black;
-}
-
-#sidebar ul li.active {
-  background-color: #7ba400;
-  text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-dl.info {
-  font-size: 9pt;
-  padding: 0 10pt;
-}
-
-dl.info dt {
-  font-weight: bold;
-  float: left;
-}
-
-dl.info dd {
-  text-align: right;
-}
-
-#tutorial {
-  position: fixed;
-  display: block;
-  z-index: 9999;
-  background-color: #496000;
-  border-radius: 15px;
-  padding: 5px;
-  top: 2%;
-  bottom: 2%;
-  left: 5%;
-  right: 5%;
-}
-
-#tutorial:not(.active) {
-  display: none;
-}
-
-#tutorial.active {
-  display: block;
-}
-
-#tutorial > i,
-#tutorial > a > i {
-  font-size: 20pt;
-  color: #496000;
-  position: absolute;
-  z-index: 100;
-  top: 10pt;
-  right: 20pt;
-  cursor: pointer;
-}
-
-#tutorial > a > i {
-  right: 40pt;
-}
-
-#tutorial iframe {
-  width: 100%;
-  min-height: 100%;
-  border-width: 0;
-  border-radius: 10px;
-  background-image: url('img/crab.svg');
-  background-size: 10%;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-color: white;
-}
-
-h1 {
-    margin: 0;
-    left: 0;
-    top: 0;
-    background-image: url('/img/korap-logo-solo.svg');
-    position: absolute;
-    width: 260px; /* like sidebars*/
-    height: 68px; /* like #top */
-    z-index: 999;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 65%;
-}
-
-h1 span {
-  margin-left: -3000px;
-}
-
-#search {
-  margin-bottom: 44px;
-}
-
-#search.match {
-  margin-top: 14pt;
-}
-
-main {
-  margin-left: 30px;
-  margin-right: 14px;
-}
-
-main.embedded {
-  margin-left: 14px;
-  margin-right: 14px;
-}
\ No newline at end of file
diff --git a/public/table.css b/public/table.css
deleted file mode 100644
index 4a4ac27..0000000
--- a/public/table.css
+++ /dev/null
@@ -1,77 +0,0 @@
-@charset "utf-8";
-
-ol > li:not(.active) .tokenInfo {
-  display: none;
-}
-
-.tokenInfo {
-  display: none;
-}
-
-.tokenInfo.active {
-  display: block;
-}
-
-.tokenInfo {
-  background-color: #ffa500;
-  margin-right: 26px;
-  overflow: auto;
-}
-
-.tokenInfo table {
-  font-size: 10pt;
-  padding: 3pt 10pt; /* wie in ol > li.active p */
-}
-
-.tokenInfo table tr {
-}
-
-/* All cells */
-.tokenInfo table tr > * {
-  padding: 1pt 6pt;
-  vertical-align: top;
-}
-
-.tokenInfo table tr td {
-  text-align: center;
-  background-color: #f4eebb;
-}
-
-/* header */
-.tokenInfo table tr th:not([rowspan]) {
-  color: white;
-  text-shadow: none;
-}
-
-.tokenInfo table tr:first-child th {
-  text-align: center;
-  background-color: #ff8000;
-}
-
-/* first column header */
-.tokenInfo table tr:first-child th:first-child {
-  position: relative;
-  padding-right: 20pt;
-  padding-left: 5pt;
-}
-
-/* second column header */
-.tokenInfo table tr:first-child th:nth-child(2) {
-  text-align: left;
-  padding-left: 20pt;
-  padding-right: 5pt;
-}
-
-.tokenInfo th[rowspan]:first-child {
-  background-color: #f4eebb;
-}
-
-.tokenInfo table th span.switchSort {
-  cursor: pointer;
-  position: absolute;
-  display: inline-block;
-  right: 0;
-  margin-right: -11pt;
-  width: 20pt;
-};
-