diff --git a/Makefile.PL b/Makefile.PL
index b7c1fb1..1945f11 100644
--- a/Makefile.PL
+++ b/Makefile.PL
@@ -21,6 +21,9 @@
     'Cache::FastMmap' => 0,
     'Mojolicious::Plugin::Number::Commify' => '0.022',
     'JSON::XS' => 0.0,
+    'Mojolicious::Plugin::AssetPack' => 0.14,
+    'JavaScript::Minifier::XS' => 0.09,
+    'CSS::Minifier::XS' => 0.09
 #    'Mojolicious::Plugin::Search' => 0.01,
   },
   test => {
diff --git a/lib/Korap.pm b/lib/Korap.pm
index 259383b..04f0014 100644
--- a/lib/Korap.pm
+++ b/lib/Korap.pm
@@ -22,9 +22,20 @@
 	      KorapSearch
 	      KorapInfo
 	      KorapTagHelpers/) {
+    # AssetPack
     $self->plugin($_);
   };
 
+#  $self->asset(
+#    'korap.css' => (
+#      'style.css',
+#      'sass/hint.scss',
+#      'table.css',
+#      'sass/kwic-4.0.scss',
+#      'fontawesome/font-awesome.min.css'
+#    )
+#  );
+
   $self->helper(
     date_format => sub {
       my ($c, $date) = @_;
@@ -53,7 +64,7 @@
   $corpus->route('/:corpus_id')->search;
   $corpus->route('/:corpus_id/#doc_id')->search;
   $corpus->route('/:corpus_id/#doc_id/:match_id')
-         ->to('info#about_match');
+         ->to('info#about_match')->name('match');
 
   # Utilities
   $r->get('/util/query')->to('search#query');
diff --git a/lib/Korap/Info.pm b/lib/Korap/Info.pm
index d090a88..50396bf 100644
--- a/lib/Korap/Info.pm
+++ b/lib/Korap/Info.pm
@@ -3,11 +3,23 @@
 
 sub about_match {
   my $c = shift;
-  my $corpus_id = $c->stash('corpus_id');
-  my $doc_id = $c->stash('doc_id');
-  my $match_id = $c->stash('match_id');
 
-  return $c->render(json => $c->notifications(json => $c->match_info($corpus_id, $doc_id, $match_id)));
+  my $corpus_id = $c->stash('corpus_id');
+  my $doc_id    = $c->stash('doc_id');
+  my $match_id  = $c->stash('match_id');
+
+  return $c->respond_to(
+    json => sub {
+      $c->render(json => $c->notifications(json => $c->match_info($corpus_id, $doc_id, $match_id)))
+    },
+    html => sub {
+      $c->render(
+	layout => 'default',
+	template => 'match_info',
+	match => $c->match_info($corpus_id, $doc_id, $match_id, foundry => '')
+      )
+    }
+  );
 };
 
 1;
diff --git a/lib/Korap/Plugin/KorapInfo.pm b/lib/Korap/Plugin/KorapInfo.pm
index 5ef48d3..4ee8612 100644
--- a/lib/Korap/Plugin/KorapInfo.pm
+++ b/lib/Korap/Plugin/KorapInfo.pm
@@ -5,6 +5,13 @@
 
 # Todo: Make the requests non-blocking
 
+sub map_match {
+  my $x = shift or return;
+  $x->{ID} =~ s/^match\-[^!]+![^-]+-// if $x->{ID};
+  $x->{docID} =~ s/^[^_]+_// if $x->{docID};
+  $x;
+};
+
 # Register plugin
 sub register {
   my ($plugin, $mojo, $param) = @_;
@@ -60,24 +67,32 @@
   $mojo->helper(
     match_info => sub {
       my $c = shift;
-      my ($corpus, $doc, $match) = @_;
 
-      return $json->{matchInfo} if $c->app->mode eq 'test';
+      return map_match($json->{matchInfo2}) if $c->app->mode eq 'test';
+
+      my $corpus = shift;
+      my $doc = shift;
+      my $match = shift;
 
       # Build url
-      my $url = Mojo::URL->new($api)->path('resource/matchInfo');
+      my $temp_api = 'http://10.0.10.13:8070/api/v0.1/';
+      my $url = Mojo::URL->new($temp_api)->path('matchInfo');
 
       # Build match id
       $match = 'match-' . $corpus . '!' . $corpus . '_' . $doc . '-' . $match;
 
-      $url->query({
-	id => $match,
-	f => 'mate',
-	l => ''
-      });
+      my %param = @_;
+      my %query = ( id => $match );
+      $query{foundry} = $param{foundry} // '*';
+      $query{layer} = $param{layer} if defined $param{layer};
+
+      # Add query
+      $url->query(\%query);
+
+      $c->app->log->debug($url);
 
       if (my $response = $c->ua->get($url)->success) {
-	return $response->json;
+	return map_match($response->json);
       };
       $c->notify(error => 'Unable to retrieve resource');
       return {};
@@ -135,5 +150,17 @@
       "name":"Wikipedia",
       "foundries":"base;corenlp;mate;mpt;opennlp;tt;xip"
     }
-  ]
+  ],
+  "matchInfo2" : {
+    "author":"AHZ,AkaBot,Zwobot",
+    "textClass":"freizeit-unterhaltung reisen",
+    "corpusID":"WPD",
+    "title":"Okres Hodonín",
+    "foundries":"opennlp opennlp/morpho base base/sentences base/paragraphs mate mate/morpho mate/dependency corenlp corenlp/namedentities corenlp/namedentities/ne_dewac_175m_600 corenlp/namedentities corenlp/namedentities/ne_hgc_175m_600 treetagger treetagger/morpho connexor connexor/morpho connexor/syntax connexor/phrase xip xip/morpho xip/constituency xip/dependency",
+    "tokenization":"opennlp#tokens",
+    "field":"tokens",
+    "startMore":false,
+    "endMore":false,
+    "docID":"WPD_OOO.01534",
+    "snippet":"<span class=\"context-left\"></span><span class=\"match\"><span title=\"mate/l:archlebov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Archlebov</span></span></span></span> - <span title=\"mate/l:blatnice\"><span title=\"mate/p:FM\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Blatnice</span></span></span></span> <span title=\"mate/l:pod\"><span title=\"mate/p:FM\"><span title=\"tt/l:pod\"><span title=\"tt/p:NE\">pod</span></span></span></span> <span title=\"mate/l:svatým\"><span title=\"mate/p:FM\"><span title=\"tt/p:NE\">Svatým</span></span></span> <span title=\"mate/l:antonínkem\"><span title=\"mate/p:FM\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Antonínkem</span></span></span></span> - <span title=\"mate/l:blatni\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Blatni</span></span></span></span><span title=\"mate/l:?ka\"><span title=\"mate/p:NE\">čka</span></span> - <span title=\"mate/l:bukovany\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Bukovany</span></span></span></span> - <span title=\"mate/l:bzenec\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Bzenec</span></span></span></span> - <span title=\"mate/l:?ej\"><span title=\"mate/p:NE\">Čej</span></span>č - <span title=\"mate/l:?ejkovice\"><span title=\"mate/p:NE\">Čejkovice</span></span> - <span title=\"mate/l:?elo\"><span title=\"mate/p:NE\">Čelo</span></span><span title=\"mate/l:?nice\"><span title=\"mate/p:NE\">žnice</span></span> - <span title=\"mate/l:dambo\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Dambo</span></span></span></span><span title=\"mate/l:?ice\"><span title=\"mate/p:NE\">řice</span></span> - <span title=\"mate/l:doln\"><span title=\"mate/p:NE\">Doln</span></span><span title=\"mate/l:í\"><span title=\"mate/p:NE\">í</span></span> <span title=\"mate/l:bojanovice\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Bojanovice</span></span></span></span> - <span title=\"mate/l:domanín\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Domanín</span></span></span></span> - <span title=\"mate/l:dra\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Dra</span></span></span><span title=\"mate/p:NE\">ž</span><span title=\"mate/l:?vky\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">ůvky</span></span></span></span> - <span title=\"mate/l:dub\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Dub</span></span></span><span title=\"mate/l:?any\"><span title=\"mate/p:NE\">ňany</span></span> - <span title=\"mate/l:hodonín\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Hodonín</span></span></span> - <span title=\"mate/l:hovorany\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Hovorany</span></span></span></span> - <span title=\"mate/l:hroznová\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Hroznová</span></span></span> <span title=\"mate/l:lhota\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Lhota</span></span></span> - <span title=\"mate/l:hrubá\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Hrubá</span></span></span> <span title=\"mate/l:vrbka\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Vrbka</span></span></span> - <span title=\"mate/l:hýsly\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Hýsly</span></span></span></span> - <span title=\"mate/l:javorník\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Javorník</span></span></span></span> - <span title=\"mate/l:je\"><span title=\"mate/p:NE\"><span title=\"tt/l:Je\"><span title=\"tt/p:KOUS\">Je</span></span></span></span><span title=\"mate/l:?ov\"><span title=\"mate/p:NE\">žov</span></span> - <span title=\"mate/l:josefov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Josefov</span></span></span> - <span title=\"mate/l:karlín\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Karlín</span></span></span></span> - <span title=\"mate/l:kel\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Kel</span></span></span><span title=\"mate/l:?any\"><span title=\"mate/p:NE\">čany</span></span> - <span title=\"mate/l:kn\"><span title=\"mate/p:NN\"><span title=\"tt/p:NE\">Kn</span></span></span>ě<span title=\"mate/l:?dub\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">ždub</span></span></span></span> - <span title=\"mate/l:kostelec\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Kostelec</span></span></span> - <span title=\"mate/l:kozojídky\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Kozojídky</span></span></span></span> - <span title=\"mate/l:ku\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Ku</span></span></span><span title=\"mate/l:?elov\"><span title=\"mate/p:NE\">želov</span></span> - <span title=\"mate/l:kyjov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Kyjov</span></span></span> - <span title=\"mate/l:labuty\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Labuty</span></span></span></span> - <span title=\"mate/l:lipov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Lipov</span></span></span> - <span title=\"mate/l:louka\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Louka</span></span></span> - <span title=\"mate/l:lov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Lov</span></span></span><span title=\"mate/l:?ice\"><span title=\"mate/p:NE\">čice</span></span> - <span title=\"mate/l:lu\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/l:Lu\">Lu</span></span></span></span><span title=\"mate/l:?ice\"><span title=\"mate/p:NE\">žice</span></span> - <span title=\"mate/l:malá\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Malá</span></span></span> <span title=\"mate/l:vrbka\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Vrbka</span></span></span> - <span title=\"mate/l:mikul\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Mikul</span></span></span><span title=\"mate/l:?ice\"><span title=\"mate/p:NE\">čice</span></span> - <span title=\"mate/l:milotice\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Milotice</span></span></span></span> - <span title=\"mate/l:moravany\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Moravany</span></span></span></span> - <span title=\"mate/l:moravský\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Moravský</span></span></span> <span title=\"mate/l:písek\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Písek</span></span></span> - <span title=\"mate/l:mut\"><span title=\"mate/p:NN\"><span title=\"tt/l:Mut\"><span title=\"tt/p:NN\">Mut</span></span></span></span><span title=\"mate/l:?nice\"><span title=\"mate/p:NE\">ěnice</span></span> - <span title=\"mate/l:násedlovice\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Násedlovice</span></span></span></span> - <span title=\"mate/l:nechvalín\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Nechvalín</span></span></span></span> - <span title=\"mate/l:nenkovice\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Nenkovice</span></span></span></span> - <span title=\"mate/l:nová\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Nová</span></span></span> <span title=\"mate/l:lhota\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Lhota</span></span></span> - <span title=\"mate/l:nový\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Nový</span></span></span> <span title=\"mate/l:poddvorov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Poddvorov</span></span></span> - <span title=\"mate/l:ostrovánky\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Ostrovánky</span></span></span></span> - <span title=\"mate/l:petrov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Petrov</span></span></span> - <span title=\"mate/l:pru\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Pru</span></span></span><span title=\"mate/l:?ánky\"><span title=\"mate/p:NE\">šánky</span></span> - <span title=\"mate/l:rad\"><span title=\"mate/p:NE\"><span title=\"tt/l:Rad\"><span title=\"tt/p:NN\">Rad</span></span></span></span><span title=\"mate/l:?jov\"><span title=\"mate/p:NE\">ějov</span></span> - <span title=\"mate/l:ratí\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Ratí</span></span></span></span><span title=\"mate/l:?kovice\"><span title=\"mate/p:NE\">škovice</span></span> - <span title=\"mate/l:rohatec\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Rohatec</span></span></span></span> - <span title=\"mate/l:skalka\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Skalka</span></span></span> - <span title=\"mate/l:skoronice\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Skoronice</span></span></span></span> - <span title=\"mate/l:sob\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Sob</span></span></span><span title=\"mate/l:?lky\"><span title=\"mate/p:NE\">ůlky</span></span> - <span title=\"mate/l:starý\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Starý</span></span></span></span> <span title=\"mate/l:poddvorov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Poddvorov</span></span></span> - <span title=\"mate/l:stav\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Stav</span></span></span><span title=\"mate/p:NE\">ě</span><span title=\"mate/l:?ice\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">šice</span></span></span></span> - <span title=\"mate/l:strá\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Strá</span></span></span><span title=\"mate/l:?nice\"><span title=\"mate/p:NE\">žnice</span></span> - <span title=\"mate/l:strá\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Strá</span></span></span><span title=\"mate/l:?ovice\"><span title=\"mate/p:NE\">žovice</span></span> - <span title=\"mate/l:sudom\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Sudom</span></span></span></span><span title=\"mate/p:NE\">ě</span><span title=\"mate/l:?ice\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">řice</span></span></span></span> - <span title=\"mate/l:suchov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Suchov</span></span></span> - <span title=\"mate/l:svatobo\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Svatobo</span></span></span></span><span title=\"mate/l:?ice-mist\"><span title=\"mate/p:NE\">řice-Mist</span></span><span title=\"mate/l:?ín\"><span title=\"mate/p:NE\">řín</span></span> - <span title=\"mate/l:syrovín\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Syrovín</span></span></span></span> - <span title=\"mate/l:?ardice\"><span title=\"mate/p:NE\">Šardice</span></span> - <span title=\"mate/l:tasov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Tasov</span></span></span></span> - <span title=\"mate/l:t?mice\"><span title=\"mate/p:NE\">Těmice</span></span> - <span title=\"mate/l:terezín\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Terezín</span></span></span> - <span title=\"mate/l:tvaro\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Tvaro</span></span></span></span><span title=\"mate/l:?ná\"><span title=\"mate/p:NE\">žná</span></span> <span title=\"mate/l:lhota\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Lhota</span></span></span> - <span title=\"mate/l:uh\"><span title=\"mate/p:NE\"><span title=\"tt/l:uh\"><span title=\"tt/p:ITJ\">Uh</span></span></span></span><span title=\"mate/l:?ice\"><span title=\"mate/p:NE\">řice</span></span> - <span title=\"mate/l:vacenovice\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Vacenovice</span></span></span></span> - <span title=\"mate/l:velká\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Velká</span></span></span> <span title=\"mate/l:nad\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/l:nad\">nad</span></span></span></span> <span title=\"mate/l:veli\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Veli</span></span></span><span title=\"mate/l:?kou\"><span title=\"mate/p:NE\">čkou</span></span> - <span title=\"mate/l:veselí\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Veselí</span></span></span> <span title=\"mate/l:nad\"><span title=\"mate/p:NE\"><span title=\"tt/l:nad\"><span title=\"tt/p:NE\">nad</span></span></span></span> <span title=\"mate/l:moravou\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\">Moravou</span></span></span> - <span title=\"mate/l:v\"><span title=\"mate/p:CARD\"><span title=\"tt/l:V\"><span title=\"tt/p:NN\">V</span></span></span></span><span title=\"mate/l:?t\"><span title=\"mate/p:XY\">ěte</span></span><span title=\"mate/l:?ov\"><span title=\"mate/p:XY\">řov</span></span> - <span title=\"mate/p:FM\"><span title=\"mate/l:vlko\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Vlko</span></span></span></span>š - <span title=\"mate/l:vnorovy\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Vnorovy</span></span></span></span> - <span title=\"mate/l:vracov\"><span title=\"mate/p:NE\"><span title=\"tt/p:NE\"><span title=\"tt/p:NN\">Vracov</span></span></span></span> - <span title=\"mate/l:v\"><span title=\"mate/p:NE\"><span title=\"tt/l:V\"><span title=\"tt/p:NN\">V</span></span></span></span><span title=\"mate/l:?esovice\"><span title=\"mate/p:NE\">řesovice</span></span> - <span title=\"mate/l:?ádovice\"><span title=\"mate/p:NE\">Žádovice</span></span> - <span title=\"mate/l:?aro\"><span title=\"mate/p:NE\">Žaro</span></span><span title=\"mate/l:?ice\"><span title=\"mate/p:NE\">šice</span></span> - <span title=\"mate/l:?dánice\"><span title=\"mate/p:NE\">Ždánice</span></span> - <span title=\"mate/l:?eletice\"><span title=\"mate/p:NE\">Želetice</span></span> - <span title=\"mate/l:?eravice\"><span title=\"mate/p:NE\">Žeravice</span></span> - <span title=\"mate/p:NE\"><span title=\"mate/l:?eraviny\">Žeraviny</span></span></span><span class=\"context-right\"></span>","ID":"match-WPD!WPD_OOO.01534-p328-462","pubDate":"2005-03-28","context":{"left":["token",0],"right":["token",0]}}
 }
diff --git a/lib/Korap/Plugin/KorapSearch.pm b/lib/Korap/Plugin/KorapSearch.pm
index 015a1a8..0940cf0 100644
--- a/lib/Korap/Plugin/KorapSearch.pm
+++ b/lib/Korap/Plugin/KorapSearch.pm
@@ -7,6 +7,17 @@
 # cutoff has to be true or false
 # TODO: Write search snippet
 
+sub map_matches {
+  my $matches = shift;
+  [
+    map {
+      $_->{ID} =~ s/^match\-[^!]+![^-]+-//;
+      $_->{docID} =~ s/^[^_]+_//;
+      $_;
+    } @$matches
+  ];
+};
+
 sub register {
   my ($plugin, $mojo, $param) = @_;
   $param ||= {};
@@ -18,26 +29,6 @@
 
   my $api = $param->{api};
 
-  $mojo->helper(
-    korap_match_id => sub {
-      my $c = shift;
-      my $match = shift;
-      my $mid = $match->{ID};
-      $mid =~ s/^match\-[^!]+![^-]+-//;
-      return $mid // '';
-    }
-  );
-
-  $mojo->helper(
-    korap_doc_id => sub {
-      my $c = shift;
-      my $match = shift;
-      my $did = $match->{docID};
-      $did =~ s/^[^_]+_//;
-      return $did // '';
-    }
-  );
-
   # Create search endpoint
   $mojo->routes->add_shortcut(
     search => sub {
@@ -160,7 +151,7 @@
 	  $_->{'search.bm.result'}    = $b_search;
 	  $_->{'search.itemsPerPage'} = $json->{itemsPerPage};
 	  $_->{'search.query'}        = $json->{request}->{query};
-	  $_->{'search.hits'}         = $json->{matches};
+	  $_->{'search.hits'}         = map_matches($json->{matches});
 	};
 
 	if ($json->{totalResults} > -1) {
diff --git a/lib/Korap/Tutorial.pm b/lib/Korap/Tutorial.pm
index 2b54e77..3da233a 100644
--- a/lib/Korap/Tutorial.pm
+++ b/lib/Korap/Tutorial.pm
@@ -4,8 +4,9 @@
 sub page {
   my $c = shift;
 
-  if ($c->param('snippet')) {
+  if ($c->param('embedded')) {
     $c->layout('snippet');
+    $c->stash(embedded => 1);
   }
   else {
     $c->layout('default');
diff --git a/public/fontawesome/fontawesome-webfont.eot b/public/font/fontawesome-webfont.eot
similarity index 100%
rename from public/fontawesome/fontawesome-webfont.eot
rename to public/font/fontawesome-webfont.eot
Binary files differ
diff --git a/public/fontawesome/fontawesome-webfont.svg b/public/font/fontawesome-webfont.svg
similarity index 100%
rename from public/fontawesome/fontawesome-webfont.svg
rename to public/font/fontawesome-webfont.svg
diff --git a/public/fontawesome/fontawesome-webfont.ttf b/public/font/fontawesome-webfont.ttf
similarity index 100%
rename from public/fontawesome/fontawesome-webfont.ttf
rename to public/font/fontawesome-webfont.ttf
Binary files differ
diff --git a/public/fontawesome/fontawesome-webfont.woff b/public/font/fontawesome-webfont.woff
similarity index 100%
rename from public/fontawesome/fontawesome-webfont.woff
rename to public/font/fontawesome-webfont.woff
Binary files differ
diff --git a/public/fontawesome/font-awesome.min.css b/public/fontawesome/font-awesome.min.css
index f39d134..184618c 100644
--- a/public/fontawesome/font-awesome.min.css
+++ b/public/fontawesome/font-awesome.min.css
@@ -1,4 +1,4 @@
 /*!
  *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */@font-face{font-family:'FontAwesome';src:url('fontawesome-webfont.eot?v=4.1.0');src:url('fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'),url('fontawesome-webfont.woff?v=4.1.0') format('woff'),url('fontawesome-webfont.ttf?v=4.1.0') format('truetype'),url('fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-square:before,.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}
\ No newline at end of file
+ */@font-face{font-family:'FontAwesome';src:url('/font/fontawesome-webfont.eot?v=4.1.0');src:url('/font/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'),url('/font/fontawesome-webfont.woff?v=4.1.0') format('woff'),url('/font/fontawesome-webfont.ttf?v=4.1.0') format('truetype'),url('/font/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-square:before,.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}
\ No newline at end of file
diff --git a/public/hint.css b/public/hint.css
index 34ff9d9..b323523 100644
--- a/public/hint.css
+++ b/public/hint.css
@@ -33,6 +33,10 @@
   text-shadow: none;
 }
 
+#searchMirror > ul > li {
+  white-space: normal;
+}
+
 #searchMirror > ul > li > span {
   float: right;
   margin-left: 30pt;
diff --git a/public/style.css b/public/style.css
index 16a36e3..3964bbb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -7,6 +7,10 @@
   margin: 0;
 }
 
+a {
+  color: inherit;
+}
+
 #top {
   background-color: #7ba400;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
@@ -171,10 +175,10 @@
   cursor: pointer;
   background-color: #496000;
   position: fixed;
-  font-size: 12pt;
-  width: 11pt;  
-  height: 12pt;
-  padding: 4pt;
+  font-size: 16pt;
+  width: 16pt;  
+  height: 17pt;
+  padding: 6pt;
   bottom: 0;
   left: 0;
   border-top-right-radius: 5pt;
@@ -240,12 +244,6 @@
   text-align: right;
 }
 
-#search {
-  margin-left: 30px;
-  margin-right: 15px;
-  margin-bottom: 40px;
-}
-
 #tutorial {
   position: fixed;
   display: block;
@@ -309,9 +307,23 @@
 }
 
 h1 span {
-    margin-left: -3000px;
+  margin-left: -3000px;
+}
+
+#search {
+  margin-bottom: 44px;
+}
+
+#search.match {
+  margin-top: 14pt;
 }
 
 main {
-  padding: 20px;
+  margin-left: 30px;
+  margin-right: 14px;
+}
+
+main.embedded {
+  margin-left: 14px;
+  margin-right: 14px;
 }
\ No newline at end of file
diff --git a/public/translateTable.js b/public/translateTable.js
index ec8b00a..e45266b 100644
--- a/public/translateTable.js
+++ b/public/translateTable.js
@@ -1,6 +1,6 @@
 // Store Table object in global object
 
-var splitRegex = /^([^\/]+?)(?:\/(.+?))?:([^:]+?)$/;
+var splitRegex = /^([^\/]+?)(?:\/([^:]+?))?:(.+?)$/;
 
 var textFoundry = "Foundry";
 var textLayer = "Layer";
@@ -17,6 +17,12 @@
     for (var i in children) {
       var c = children[i];
 
+      // Create object on position unless it exists
+      if (this.info[this.pos] === undefined)
+	this.info[this.pos] = {};
+
+      var found = this.info[this.pos];
+
       // element with title
       if (c.nodeType === 1) {
 	if (c.getAttribute("title")) {
@@ -33,11 +39,10 @@
 	      layer = RegExp.$1
 	    };
 
-	    // Create object on position unless it exists
-	    if (!this.info[this.pos])
-	      this.info[this.pos] = {};
+	    if (found[foundry + "/" + layer] === undefined)
+	      found[foundry + "/" + layer] = [];
 
-	    this.info[this.pos][foundry + "/" + layer] = RegExp.$3;
+	    found[foundry + "/" + layer].push(RegExp.$3);
 
 	    // Set foundry
 	    if (!this.foundry[foundry])
@@ -57,10 +62,12 @@
       }
 
       // Leaf node - store string on position and go to next string
-      else if (c.nodeType === 3)
-	if (c.nodeValue.match(/[-a-z0-9]/i))
+      else if (c.nodeType === 3) {
+	if (c.nodeValue.match(/[a-z0-9]/i))
 	  this.info[this.pos++]["-s"] = c.nodeValue;
+      };
     };
+    delete this.info[this.pos];
     return this;
   };
 
@@ -157,8 +164,15 @@
 	  var td = d.createElement('td');
 	  tr.appendChild(td);
 
-	  if (this.info[t][infoString] !== undefined)
-	    td.appendChild(d.createTextNode(this.info[t][infoString]));
+	  var surfaces = this.info[t][infoString];
+	  if (surfaces !== undefined) {
+	    for (i in surfaces) {
+	      td.appendChild(d.createTextNode(surfaces[i]));
+	      if (i !== surfaces.length -1) {
+		td.appendChild(d.createElement("br"));
+	      };
+	    };
+	  };
 	};
 	rowSpan++;
       };
@@ -177,3 +191,30 @@
 };
 
 
+function showTable (o) {
+  var match = o.parentNode.parentNode;
+  var table = $(match).children("div").children("div.tokenInfo").first();
+
+  if (table.hasClass("active")) {
+    table.removeClass("active");
+    return;
+  }
+  else if (table.children("table").length > 0) {
+    table.addClass("active");
+    return;
+  };
+
+  var corpusID = match.getAttribute('data-corpus-id');
+  var docID    = match.getAttribute('data-doc-id');
+  var matchID  = match.getAttribute('data-match-id');
+  var url      = '/corpus/' + corpusID + '/' + docID + '/' + matchID;
+  var snippet;
+
+  jQuery.getJSON(url, function (res) {
+    var snippet = new SnippetTable(res['snippet']);
+    table.addClass("active");
+    table.append(snippet.toTable());
+  });
+};
+
+
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
deleted file mode 100644
index bcf4117..0000000
--- a/templates/intro.html.ep
+++ /dev/null
@@ -1,5 +0,0 @@
-<div id="intro">
-  <p>This is the alternative KorAP Frontend.</p>
-  <p>The primary goal is to serve as a testbed for the query serialization and for different flavours of user interfaces.</p>
-  <p>Search capabilities are limited to the demo user.</p>
-</div>
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index d605649..36db1fb 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -1,27 +1,20 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title><%= title %></title>
-%= stylesheet '/style.css'
-%= stylesheet '/hint.css'
-%= stylesheet '/table.css'
-%= stylesheet '/kwic-4.0.css'
-%= stylesheet '/fontawesome/font-awesome.min.css'
-%= stylesheet '/responsive.css', media => '(orientation: portrait) and (max-device-width: 800px)'
-%= javascript '/jquery-2.0.0.min.js'
-%= javascript '/translateTable.js'
-%= javascript '/hint.js'
-<meta charset="utf-8" />
-  </head>
+%= include 'partial/header'
   <body>
 
 % my $search_route = url_for;
 % unless (current_route 'tutorial') {
 <div id="tutorial">
-  % my $tut_page = url_for(session('tutorial') || 'tutorial');
-  <a href="<%= $tut_page %>" target="_blank"><i title="Open in new tab" class="fa fa-external-link-square"></i></a>
-  <i onclick="closeTutorial()" title="close" class="fa fa-toggle-up"></i>
-  <iframe src="about:blank" data-src="<%= $tut_page->query([snippet => 1]) %>"></iframe>
+%   my $tut_page = url_for(session('tutorial') || 'tutorial');
+  <a href="<%= $tut_page %>"
+     target="_blank"><i title="Open in new tab"
+                        class="fa fa-external-link-square"></i></a>
+  <i onclick="closeTutorial()"
+     title="close"
+     class="fa fa-toggle-up"></i>
+  <iframe src="about:blank"
+          data-src="<%= $tut_page->query([embedded => 1]) %>"></iframe>
 </div>
 % }
 % else {
@@ -31,72 +24,10 @@
 <div id="top">
   <a href="<%= url_for 'index' %>"><h1><span>KorAP- Korpusanalyseplattform der nächsten Generation</span></h1></a>
 
-
 %= form_for $search_route => begin
 %= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']], id => 'ql-field'
 <br />
 %= search_field 'q', id => 'q-field', autofocus => 'autofocus'
-%= javascript begin
-new Hint({
-  "ref" : "q-field",
-  "qlRef" : "ql-field",
-  "hintSize" : 10,
-  "hints" : {
-    "-foundries" : {
-      "corenlp" : ["corenlp/", "CoreNLP"],
-      "cnx" : ["cnx/", "Connexor"],
-      "opennlp" : ["opennlp/", "OpenNLP"],
-      "xip" : ["xip/", "Xerox"],
-      "tt"  : ["tt/", "TreeTagger"],
-      "mate" : ["mate/", "Mate"]
-    },
-    "corenlp" : {
-      "ne_dewac_175m_600" : ["ne_dewac_175m_600=", "Named Entity"],
-      "ne_hgc_175m_600" : ["ne_hgc_175m_600=", "Named Entity"]
-    },
-    "corenlp/ne_dewac_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
-    "corenlp/ne_hgc_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
-    "cnx" : {
-      "c" : ["c=", "Constituency"],
-      "l" : ["l=", "Lemma"],
-      "m" : ["m=", "Morpho Syntax"],
-      "p" : ["p=", "Part of Speech"],
-      "syn" : ["syn=", "Syntax"]
-    },
-    "cnx/m" : ["Abbr","CMP","IMP","IND","INF","ORD","PAST","PCP","PERF","PL","PRES","PROG","Prop","SUB","SUP"],
-    "cnx/p" : ["A","ADV","CC","CS","DET","INTERJ","N","NUM","PREP","PRON","V"],
-    "cnx/syn" : ["@ADVL","@AUX","@CC","@MAIN","@NH","@POSTMOD","@PREMARK","@PREMOD"],
-    "opennlp" : {
-      "p" : ["p=", "Part of Speech"]
-    },
-    "opennlp/p" : ["$(","$,","$.","ADJA","ADJD","ADV","APPR","APPRART","ART","CARD","FM","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
-    "xip" : {
-      "c" : ["c=", "Constituency"],
-      "d" : ["d=", "Dependency"],
-      "l" : ["l=", "Lemma"],
-      "p" : ["p=", "Part of Speech"]
-    },
-    "xip/c" : ["ADJ","ADV","AP","CONJ","DET","INFC","INS","ITJ","MC","NEGAT","NOUN","NP","NPA","NUM","POSTP","PP","PREP","PRON","PTCL","PUNCT","SC","SYMBOL","TOP","TRUNC","VERB"],
-    "xip/d" : ["ADJMOD","AUXIL","CONNECT","COORD","DATE","DETERM","EXPL","LOC","MODAL","NEGAT","NMOD","NMOD2","NUMMOD","OBJ","ORG","PERSON","PLINK","PRED","REFLEX","SUBJ","THEMA","TIME","TRUNC","VMAIN","VMOD","VPREF"],
-    "xip/p" : ["ADJ","ADV","CONJ","DET","ITJ","NEGAT","NOUN","NUM","POSTP","PREP","PRON","PTCL","PUNCT","SYMBOL","TRUNC","VERB"],
-    "tt" : {
-      "l" : ["l=", "Lemma"],
-      "p" : ["p=", "Part of Speech"]
-    },
-    "tt/p" : ["$.","ADJA","ADJD","ADV","APPO","APPR","APPRART","APZR","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VMINF","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
-    "mate" : {
-      "d" : ["d=", "Dependency"],
-      "l" : ["l=", "Lemma"],
-      "m" : ["m=", "Morpho Syntax"],
-      "p" : ["p=", "Part of Speech"]
-    },
-    "mate/d" : ["--","AG","AMS","APP","CC","CD","CJ","CM","CP","CVC","DA","DM","EP","JU","MNR","MO","NG","NK","NMC","OA","OC","OG","OP","PAR","PD","PG","PH","PM","PNC","RC","RE","RS","SB","SBP","SVP","UC"],
-    "mate/m" : ["<no-type>","case:*","case:acc","case:dat","case:gen","case:nom","degree:comp","degree:pos","degree:sup","gender:*","gender:fem","gender:masc","gender:neut","mood:imp","mood:ind","mood:subj","number:*","number:pl","number:sg","person:1","person:2","person:3","tense:past","tense:pres"],
-    "mate/p" : ["$(","$,","$.","<root-POS>","ADJA","ADJD","ADV","APPO","APPR","APPRART","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PPOSS","PRELAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"]
-  }}
-);
-
-% end
 <button type="submit" name="action" value="ok"><i class="fa fa-search"></i></button>
 %   if (stash('test_port')) {
 <button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
@@ -114,81 +45,23 @@
 
 </div>
 
+%= content 'sidebar' => begin
 <div id="sidebar" style="padding-top: 90px">
 %= include 'collections'
-<i class="fa fa-bars"></i>
+  <i class="fa fa-bars"></i>
 </div>
-
-<div id="search">
-%= content
-</div>
-
-%= javascript begin
-
-$("#search > ol > li:not(.active)").on("click", function (e) {
-  $(this).addClass('active');
-  e.stopPropagation();
-});
-
-$("#search > ol > li:not(.active) > ul > li.close").on("click", function (e) {
-  $(this.parentNode.parentNode).removeClass('active');
-  e.stopPropagation();
-});
-
-
-function showTable (o) {
-  var match = o.parentNode.parentNode;
-  var table = $(match).children("div").children("div.tokenInfo").first();
-
-  if (table.hasClass("active")) {
-    table.removeClass("active");
-    return;
-  }
-  else if (table.children("table").length > 0) {
-    table.addClass("active");
-    return;
-  };
-
-  var corpusID = match.getAttribute('data-corpus-id');
-  var docID    = match.getAttribute('data-doc-id');
-  var matchID  = match.getAttribute('data-match-id');
-  var url      = '/corpus/' + corpusID + '/' + docID + '/' + matchID;
-  var snippet;
-
-  jQuery.getJSON(url, function (res) {
-    var snippet = new SnippetTable(res['snippet']);
-    table.addClass("active");
-    table.append(snippet.toTable());
-  });
-};
-
-function openTutorial (o) {
-  var tut = $("#tutorial");
-  tut.addClass("active");
-  var iframe = tut.children("iframe");
-  var src = iframe.attr("data-src");
-  iframe.attr("src", src);
-};
-
-function closeTutorial (o) {
-  $("#tutorial").removeClass("active");
-};
-
-function useQuery (o) {
-  var q = o.getAttribute("data-query");
-  var ql = o.getAttribute("data-query-language");
-  $("#ql-field").val(ql);
-  $("#q-field").val(q);
-  closeTutorial();
-};
-
-$("code.query.serial, #sidebar").on("click", function () {
-  $(this).toggleClass('active');
-});
-
 % end
 
+<main>
+%= content main => begin
+  <p>This is the alternative KorAP Frontend.</p>
+  <p>The primary goal is to serve as a testbed for the query serialization and for different flavours of user interfaces.</p>
+  <p>Search capabilities are limited to the demo user.</p>
+% end
+</main>
 
+%= content 'javascript'
+%= include 'partial/javascript'
 %= notifications 'Alertify'
   </body>
 </html>
diff --git a/templates/layouts/snippet.html.ep b/templates/layouts/snippet.html.ep
index bfe0017..ee3f09a 100644
--- a/templates/layouts/snippet.html.ep
+++ b/templates/layouts/snippet.html.ep
@@ -1,21 +1,20 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title><%= title %></title>
-%= stylesheet '/style.css'
-%= stylesheet '/kwic-4.0.css'
-%= stylesheet '/responsive.css', media => '(orientation: portrait) and (max-device-width: 800px)'
-%= stylesheet '/fontawesome/font-awesome.min.css'
-%= javascript '/jquery-2.0.0.min.js'
-<meta charset="utf-8" />
-  </head>
+%= include 'partial/header'
   <body style="background-color:white">
+<main<% if (stash('embedded')) { %> class="embedded"<% } %>>
+%= content 'main' => begin
+    <p>Welcome to the tutorial</p>
+% end
+</main>
+
 %= notifications 'Alertify'
-%= content
+
 %= javascript begin
 $("li,code,#sidebar").on("click", function () {
   $(this).toggleClass('active');
 });
 % end
+
   </body>
 </html>
diff --git a/templates/match.html.ep b/templates/match.html.ep
new file mode 100644
index 0000000..2ec5a44
--- /dev/null
+++ b/templates/match.html.ep
@@ -0,0 +1,26 @@
+%# ID, title, corpusID, author, pubDate, textClass
+<li data-corpus-id="<%= $match->{corpusID} %>"
+    data-doc-id="<%= $match->{docID} %>"
+    data-match-id="<%= $match->{ID} %>"
+<% if (current_route eq 'match') { %>class="active"<% } %>
+    >
+  <div>
+    <div class="snippet"><%== $match->{snippet} %></div>
+    <div class="tokenInfo"></div>
+  </div>
+  <p>
+    <strong><%= $match->{title} %></strong>
+    <%= $match->{author} ? ' by ' . $match->{author}  : '' %>;
+    published on <%= date_format $match->{pubDate} %>
+    as <%= $match->{docID} %> (<%= $match->{corpusID} %>)
+  </p>
+  <ul class="action right">
+% if (current_route ne 'match') {
+    <li class="close" title="Close"><i class="fa fa-toggle-up"></i></li>
+%#    <li class="open" title="Open in new tab"><%= link_to 'match', { corpus_id => $match->{corpusID}, doc_id => $match->{docID}, match_id => $match->{ID} }, target => '_blank', begin %><i class="fa fa-external-link-square"></i><% end %></li>
+% }
+    <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
+%#    <li title="Tree Visualizations"><i class="fa fa-sitemap"></i></li>
+%#    <li title="Remember"><i class="fa fa-star-o"></i></li>
+  </ul>
+</li>
diff --git a/templates/match_info.html.ep b/templates/match_info.html.ep
new file mode 100644
index 0000000..5fa0ddf
--- /dev/null
+++ b/templates/match_info.html.ep
@@ -0,0 +1,7 @@
+% content main => begin
+<div id="search" class="match">
+  <ol class="left-aligned">
+%= include 'match'
+  </ol>
+</div>
+% end
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
new file mode 100644
index 0000000..542ef30
--- /dev/null
+++ b/templates/partial/header.html.ep
@@ -0,0 +1,14 @@
+<head>
+  <title><%= title %></title>
+%#= asset 'korap.css'
+%= stylesheet '/style.css'
+%= stylesheet '/hint.css'
+%= stylesheet '/table.css'
+%= stylesheet '/kwic-4.0.css'
+%= stylesheet '/fontawesome/font-awesome.min.css'
+%= stylesheet '/responsive.css', media => '(orientation: portrait) and (max-device-width: 800px)'
+%= javascript '/jquery-2.0.0.min.js'
+%= javascript '/translateTable.js'
+%= javascript '/hint.js'
+  <meta charset="utf-8" />
+</head>
diff --git a/templates/partial/javascript.html.ep b/templates/partial/javascript.html.ep
new file mode 100644
index 0000000..3c44167
--- /dev/null
+++ b/templates/partial/javascript.html.ep
@@ -0,0 +1,88 @@
+%= javascript begin
+
+new Hint({
+  "ref" : "q-field",
+  "qlRef" : "ql-field",
+  "hintSize" : 10,
+  "hints" : {
+    "-foundries" : {
+      "corenlp" : ["corenlp/", "CoreNLP"],
+      "cnx" : ["cnx/", "Connexor"],
+      "opennlp" : ["opennlp/", "OpenNLP"],
+      "xip" : ["xip/", "Xerox"],
+      "tt"  : ["tt/", "TreeTagger"],
+      "mate" : ["mate/", "Mate"]
+    },
+    "corenlp" : {
+      "ne_dewac_175m_600" : ["ne_dewac_175m_600=", "Named Entity"],
+      "ne_hgc_175m_600" : ["ne_hgc_175m_600=", "Named Entity"]
+    },
+    "corenlp/ne_dewac_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
+    "corenlp/ne_hgc_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
+    "cnx" : {
+      "c" : ["c=", "Constituency"],
+      "l" : ["l=", "Lemma"],
+      "m" : ["m=", "Morpho Syntax"],
+      "p" : ["p=", "Part of Speech"],
+      "syn" : ["syn=", "Syntax"]
+    },
+    "cnx/c" : ["np"],
+    "cnx/m" : ["Abbr","CMP","IMP","IND","INF","ORD","PAST","PCP","PERF","PL","PRES","PROG","Prop","SUB","SUP"],
+    "cnx/p" : ["A","ADV","CC","CS","DET","INTERJ","N","NUM","PREP","PRON","V"],
+    "cnx/syn" : ["@ADVL","@AUX","@CC","@MAIN","@NH","@POSTMOD","@PREMARK","@PREMOD"],
+    "opennlp" : {
+      "p" : ["p=", "Part of Speech"]
+    },
+    "opennlp/p" : ["$(","$,","$.","ADJA","ADJD","ADV","APPR","APPRART","ART","CARD","FM","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
+    "xip" : {
+      "c" : ["c=", "Constituency"],
+      "d" : ["d=", "Dependency"],
+      "l" : ["l=", "Lemma"],
+      "p" : ["p=", "Part of Speech"]
+    },
+    "xip/c" : ["ADJ","ADV","AP","CONJ","DET","INFC","INS","ITJ","MC","NEGAT","NOUN","NP","NPA","NUM","POSTP","PP","PREP","PRON","PTCL","PUNCT","SC","SYMBOL","TOP","TRUNC","VERB"],
+    "xip/d" : ["ADJMOD","AUXIL","CONNECT","COORD","DATE","DETERM","EXPL","LOC","MODAL","NEGAT","NMOD","NMOD2","NUMMOD","OBJ","ORG","PERSON","PLINK","PRED","REFLEX","SUBJ","THEMA","TIME","TRUNC","VMAIN","VMOD","VPREF"],
+    "xip/p" : ["ADJ","ADV","CONJ","DET","ITJ","NEGAT","NOUN","NUM","POSTP","PREP","PRON","PTCL","PUNCT","SYMBOL","TRUNC","VERB"],
+    "tt" : {
+      "l" : ["l=", "Lemma"],
+      "p" : ["p=", "Part of Speech"]
+    },
+    "tt/p" : ["$.","ADJA","ADJD","ADV","APPO","APPR","APPRART","APZR","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VMINF","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
+    "mate" : {
+      "d" : ["d=", "Dependency"],
+      "l" : ["l=", "Lemma"],
+      "m" : ["m=", "Morpho Syntax"],
+      "p" : ["p=", "Part of Speech"]
+    },
+    "mate/d" : ["--","AG","AMS","APP","CC","CD","CJ","CM","CP","CVC","DA","DM","EP","JU","MNR","MO","NG","NK","NMC","OA","OC","OG","OP","PAR","PD","PG","PH","PM","PNC","RC","RE","RS","SB","SBP","SVP","UC"],
+    "mate/m" : ["<no-type>","case:*","case:acc","case:dat","case:gen","case:nom","degree:comp","degree:pos","degree:sup","gender:*","gender:fem","gender:masc","gender:neut","mood:imp","mood:ind","mood:subj","number:*","number:pl","number:sg","person:1","person:2","person:3","tense:past","tense:pres"],
+    "mate/p" : ["$(","$,","$.","<root-POS>","ADJA","ADJD","ADV","APPO","APPR","APPRART","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PPOSS","PRELAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"]
+  }}
+);
+
+
+function openTutorial (o) {
+  var tut = $("#tutorial");
+  tut.addClass("active");
+  var iframe = tut.children("iframe");
+  var src = iframe.attr("data-src");
+  iframe.attr("src", src);
+};
+
+function closeTutorial (o) {
+  $("#tutorial").removeClass("active");
+};
+
+function useQuery (o) {
+  var q = o.getAttribute("data-query");
+  var ql = o.getAttribute("data-query-language");
+  $("#ql-field").val(ql);
+  $("#q-field").val(q);
+  closeTutorial();
+};
+
+$("code.query.serial, #sidebar").on("click", function () {
+  $(this).toggleClass('active');
+});
+
+% end
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 091fd39..92aadce 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -1,54 +1,44 @@
 % if (param 'q') {
-%= search begin
-
-% unless (param 'snippet') {
+% content 'main' => begin
+%=  search begin
+%     unless (param 'snippet') {
 <div style="clear: both">
-% my $url = url_with->query(['p' => '{page}']);
-% my $pages = (stash('search.totalResults') / (stash('search.itemsPerPage') || 1));
-% $pages = $pages < 0 ? 0 : $pages;
+%       my $url = url_with->query(['p' => '{page}']);
+%       my $pages = (stash('search.totalResults') / (stash('search.itemsPerPage') || 1));
+%       $pages = $pages < 0 ? 0 : $pages;
   <div id="pagination"><%= pagination(stash('search.startPage'), $pages, $url) =%></div>
   <p class="found">Found
     <span id="total-results"><%= commify(stash('search.totalResults')) %> matches</span>
     <% if (stash 'search.bm.hit') { %> in <%= stash 'search.bm.hit' %> (<%= stash 'search.bm.result' %>)<% } %>
   </p>
 </div>
-
 %= include 'query'
-% };
+%     };
 
-
-
+<div id="search">
 <ol class="left-aligned">
-%=  search_hits begin
-%# ID, title, corpusID, author, pubDate, textClass
-  <li data-corpus-id="<%= $_->{corpusID} %>"
-      data-doc-id="<%= korap_doc_id($_) %>"
-      data-match-id="<%= korap_match_id($_) %>">
-    <div>
-      <div class="snippet"><%== $_->{snippet} %></div>
-      <div class="tokenInfo"></div>
-    </div>
-    <p>
-      <strong><%= $_->{title} %></strong>
-      <%= $_->{author} ? ' by ' . $_->{author}  : '' %>;
-      published on <%= date_format $_->{pubDate} %>
-      as <%= $_->{docID} %> (<%= $_->{corpusID} %>)
-    </p>
-    <ul class="action right">
-      <li class="close" title="close"><i class="fa fa-toggle-up"></i></li>
-      <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
-<!--
-      <li title="Tree Visualizations"><i class="fa fa-sitemap"></i></li>
-      <li title="Remember"><i class="fa fa-star-o"></i></li>
--->
-    </ul>
-  </li>
-%   end
+%=    search_hits begin
+%=      include 'match', match => $_
+%     end
 </ol>
+</div>
 
+%   end
 % end
 
-% }
-% else {
-%= include 'intro'
+% content 'javascript' => begin
+%=   javascript begin
+
+$("#search > ol > li:not(.active)").on("click", function (e) {
+  $(this).addClass('active');
+  e.stopPropagation();
+});
+
+$("#search > ol > li:not(.active) > ul > li.close").on("click", function (e) {
+  $(this.parentNode.parentNode).removeClass('active');
+  e.stopPropagation();
+});
+
+%   end
+% end
 % };
diff --git a/templates/tutorial.html.ep b/templates/tutorial.html.ep
index 9caa15b..b7d280e 100644
--- a/templates/tutorial.html.ep
+++ b/templates/tutorial.html.ep
@@ -1,4 +1,4 @@
-<main>
+% content main => begin
 
 %# Store the id of an active section in the session, so the system is able to directly scroll to the relevant section
 %# This should be stored when clicking on a specific query
@@ -25,6 +25,10 @@
 
 %= korap_tut_query cosmas2 => 'der /w5 Baum'
 
+%= korap_tut_query poliqarp => 'contains(<cnx/c=np>,[opennlp/p=KOUS])'
+
+%= korap_tut_query poliqarp => 'startswith(<s>, {1:[cnx/m=PRES]}{2:[base=der]})'
+
 <p>And here is a short cheat sheet for foundries and layers</p>
 </section>
 
@@ -79,4 +83,4 @@
   </ul>
 </section>
 
-</main>
+% end