Turn pagination into button group

Change-Id: I73e7b1355baf7e6b7da63e917eceb8346e405b0f
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 0d0fee3..f103cda 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -92,7 +92,7 @@
 
     <main>
       <div id="resultinfo" class="found">
-	<div id="pagination">
+	<div id="pagination" class="button-group button-panel">
 	  <a rel="prev"><span><span>&lt;</span></span></a>
 	  <a rel="self"><span>1</span></a>
 	  <a href="#2" tabindex="4"><span>2</span></a>
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index 75e9458..d41fb73 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -20,107 +20,55 @@
    * This may need to be overwritten in case multiple
    * paginations have to be activated.
    */
-  position:    fixed;
-  font-size:   0;
-  right:       ($standard-margin / 4);
-  bottom:      ($standard-margin / 2);
-  z-index:     35;
-  padding:     0;
-  height:      auto;
-  line-height: 0;
+    position:    fixed;
+    font-size:   0;
+    right:       ($standard-margin / 4);
+    bottom:      ($standard-margin / 2);
+    z-index:     35;
+    padding:     0;
+    height:      auto;
+    line-height: 0;
+    
+    > * {
+        font-size: 10pt;
+        line-height: 2em;
 
-  > a {
-    margin:    0;
-    font-size: 10pt;
-    padding:   0;
+        &:not(:link):not([rel=self]) {
+            color: $choose-blind-color;
+        }
 
-    > span {
-      @include standard-text-padding;
-      @include choose-item;
-      box-shadow:  $choose-box-shadow;
-      display:     inline-block;
-      line-height: 2em;
-      text-align:  center;
+        &.ellipsis, &[rel=prev], &[rel=next] {
+            > span {
+	        @include blind;
+            }
+        }
+    
+        &.ellipsis::after {
+	    @include icon-font;
+	    content:     $fa-elipsis;
+	    line-height: 1em;
+        }
 
-      border: {
-	      top-width:    $border-size;
-	      bottom-width: $border-size;
-	      top-style:    solid;
-	      bottom-style: solid;
-      }
+        &[rel=self] {
+            @include choose-active;
+            border: {
+	        left-width:  $border-size;
+	        right-width: $border-size;
+	        left-style:  solid;
+	        right-style: solid;
+            }
+        }
+
+        &[rel=prev]::after {
+            @include icon-font;
+	    content:     $fa-previous;
+	    line-height: 1em;
+        }
+
+        &[rel=next]::after {
+            @include icon-font;
+	    content:     $fa-next;
+	    line-height: 1em;
+        }
     }
-
-    &:not(:link):not([rel=self]) span {
-      color: $choose-blind-color;
-    }
-
-    &.ellipsis > span {
-      > span {
-	      @include blind;
-      }
-
-      &::after {
-	      @include icon-font;
-	      content:     $fa-elipsis;
-	      line-height: 1em;
-      }
-    }
-
-    &[rel=self] > span {
-      @include choose-active;
-
-      border: {
-	      left-width:  $border-size;
-	      right-width: $border-size;
-	      left-style:  solid;
-	      right-style: solid;
-      }
-    }
-
-    &[rel=prev] > span {
-      border: {
-	      top-left-radius:    $standard-border-radius;
-	      bottom-left-radius: $standard-border-radius;
-	      left-width:         $border-size;
-	      left-style:         solid;
-      }
-
-      > span {
-	      @include blind;
-      }
-
-      &::after {
-        @include icon-font;
-	      content:     $fa-previous;
-	      line-height: 1em;
-      }
-    }
-
-    &[rel=next] > span {
-      border: {
-	      top-right-radius:    $standard-border-radius;
-	      bottom-right-radius: $standard-border-radius;
-	      right-width:         $border-size;
-	      right-style:         solid;
-      }
-
-      > span {
-	      @include blind;
-      }
-
-      &::after {
-        @include icon-font;
-	      content:     $fa-next;
-	      line-height: 1em;
-      }
-    }
-
-    &:link:hover,
-    &:link:focus {
-      outline: none;
-      span {
-	      @include choose-hover;
-      }
-    }
-  }
-}
\ No newline at end of file
+}
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 0ad8f2d..f065293 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -1,7 +1,7 @@
 % layout 'main', schematype => 'SearchResultsPage';
 
 <div id="resultinfo" <% if (stash('results')->size) { %> class="found"<%} %>>
-  <div id="pagination"><%= pagination(stash('start_page'), stash('total_pages'), url_with->query({'p' => '{page}'})) =%></div>
+  <div id="pagination" class="button-group button-panel"><%= pagination(stash('start_page'), stash('total_pages'), url_with->query({'p' => '{page}'})) =%></div>
 % my $found = stash('total_results') // 0;
   <p class="found">\
 % if ($found != -1) {