From bcceb5cb5ab3ec55013c7109dd72a042656cae5f Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Wed, 19 Mar 2014 15:30:35 +0100
Subject: [PATCH 01/11] Fixed pagination, buttons, a table in documents view
 and scss-lint warning

---
 .../system/aardvark/frontend/css/logsView.css |   7 -
 .../frontend/js/lib/bootstrap-pagination.js   |   2 +-
 .../frontend/js/templates/documentsView.ejs   |   4 +-
 .../frontend/js/templates/logsView.ejs        |   4 +-
 .../frontend/js/views/documentsView.js        |   4 +-
 .../aardvark/frontend/js/views/logsView.js    |   4 +-
 .../aardvark/frontend/scss/_buttons.scss      |   4 +-
 .../aardvark/frontend/scss/_colors.scss       |   6 +-
 .../frontend/scss/_documentsView.scss         |  17 +-
 .../aardvark/frontend/scss/_pagination.scss   | 156 +++++++++++-------
 .../aardvark/frontend/scss/generated.css      | 145 ++++++++--------
 11 files changed, 198 insertions(+), 155 deletions(-)

diff --git a/js/apps/system/aardvark/frontend/css/logsView.css b/js/apps/system/aardvark/frontend/css/logsView.css
index 4fb8955834..7e6a1799a0 100644
--- a/js/apps/system/aardvark/frontend/css/logsView.css
+++ b/js/apps/system/aardvark/frontend/css/logsView.css
@@ -70,13 +70,6 @@
   border-spacing:0 5px;
 }
 
-#logPaginationDiv a {
-  border-radius: 0 !important;
-}
-
-#logPaginationDiv {
-  padding-bottom: 5px !important;
-}
 
 #logContent .arango-tab {
   border-bottom: 0 !important;
diff --git a/js/apps/system/aardvark/frontend/js/lib/bootstrap-pagination.js b/js/apps/system/aardvark/frontend/js/lib/bootstrap-pagination.js
index dda1cdb129..cf30c02169 100644
--- a/js/apps/system/aardvark/frontend/js/lib/bootstrap-pagination.js
+++ b/js/apps/system/aardvark/frontend/js/lib/bootstrap-pagination.js
@@ -38,7 +38,7 @@
       return li;
     }
     function newUL() {
-      var ul = $('<ul class="arangoPagination"/>'), i;
+      var ul = $('<ul class="arango-pagination"/>'), i;
       ul.append(newLI(options.prev, options.page - 1));
       for (i = begin; i <= end; i += 1) { ul.append(newLI(i, i)); }
       return ul.append(newLI(options.next, options.page + 1));
diff --git a/js/apps/system/aardvark/frontend/js/templates/documentsView.ejs b/js/apps/system/aardvark/frontend/js/templates/documentsView.ejs
index 8fa53ef6ab..8fbb5151ff 100644
--- a/js/apps/system/aardvark/frontend/js/templates/documentsView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/documentsView.ejs
@@ -289,8 +289,8 @@
 </table>
 
     <div id="documentsToolbarFL">
-        <div id="documentsToolbarF" class="pagination pagination-small pagination-centered">
-        </div>
+      <div id="documentsToolbarF" class="pagination-line">
+      </div>
     </div>
 
 <!-- Delete Modal -->
diff --git a/js/apps/system/aardvark/frontend/js/templates/logsView.ejs b/js/apps/system/aardvark/frontend/js/templates/logsView.ejs
index f6e8034a30..d831ae2439 100644
--- a/js/apps/system/aardvark/frontend/js/templates/logsView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/logsView.ejs
@@ -77,7 +77,7 @@
 
     </div>
 
-    <div id="logPaginationDiv" class="pagination pagination-small pagination-centered"></div>
-  </div>
+    <div id="logPaginationDiv" class="pagination-line">
+    </div>
   </div>
 </script>
diff --git a/js/apps/system/aardvark/frontend/js/views/documentsView.js b/js/apps/system/aardvark/frontend/js/views/documentsView.js
index a37ecbd8a1..ab1c58d5ed 100644
--- a/js/apps/system/aardvark/frontend/js/views/documentsView.js
+++ b/js/apps/system/aardvark/frontend/js/views/documentsView.js
@@ -638,10 +638,10 @@
       };
       target.pagination(options);
       $('#documentsToolbarF').prepend(
-        '<ul class="prePagi"><li><a id="documents_first" class="paginationButton">'+
+        '<ul class="pre-pagi"><li><a id="documents_first" class="pagination-button">'+
         '<span class="glyphicon glyphicon-step-backward"></span></a></li></ul>');
         $('#documentsToolbarF').append(
-          '<ul class="lasPagi"><li><a id="documents_last" class="paginationButton">'+
+          '<ul class="las-pagi"><li><a id="documents_last" class="pagination-button">'+
           '<span class="glyphicon glyphicon-step-forward"></span></a></li></ul>');
           var total = $('#totalDocuments');
           if (total.length > 0) {
diff --git a/js/apps/system/aardvark/frontend/js/views/logsView.js b/js/apps/system/aardvark/frontend/js/views/logsView.js
index 7dedab8f9d..66bbd6d2d1 100644
--- a/js/apps/system/aardvark/frontend/js/views/logsView.js
+++ b/js/apps/system/aardvark/frontend/js/views/logsView.js
@@ -164,11 +164,11 @@
       target.html("");
       target.pagination(options);
       $('#logPaginationDiv').prepend(
-        '<ul class="prePagi"><li><a id="logTableID_first" class="paginationButton">'+
+        '<ul class="pre-pagi"><li><a id="logTableID_first" class="pagination-button">'+
         '<span class="glyphicon glyphicon-step-backward"></span></a></li></ul>'
       );
       $('#logPaginationDiv').append(
-        '<ul class="lasPagi"><li><a id="logTableID_last" class="paginationButton">'+
+        '<ul class="las-pagi"><li><a id="logTableID_last" class="pagination-button">'+
         '<span class="glyphicon glyphicon-step-forward"></span></a></li></ul>'
       );
     },
diff --git a/js/apps/system/aardvark/frontend/scss/_buttons.scss b/js/apps/system/aardvark/frontend/scss/_buttons.scss
index 0cea68ee03..346c1dbfec 100644
--- a/js/apps/system/aardvark/frontend/scss/_buttons.scss
+++ b/js/apps/system/aardvark/frontend/scss/_buttons.scss
@@ -324,8 +324,8 @@ button.gv-zoom-btn {
   }
 }
 
-a.paginationButton,
-ul.arangoPagination a {
+a.pagination-button,
+ul.arango-pagination a {
   @include border-radius(2px);
 }
 
diff --git a/js/apps/system/aardvark/frontend/scss/_colors.scss b/js/apps/system/aardvark/frontend/scss/_colors.scss
index 3301fe5d4f..9a8e207597 100644
--- a/js/apps/system/aardvark/frontend/scss/_colors.scss
+++ b/js/apps/system/aardvark/frontend/scss/_colors.scss
@@ -1,4 +1,4 @@
- $c-positive: #8aa051;
+$c-positive: #8aa051;
 $c-positive-hover: #788f3d;
 
 $c-negative: #da4f49;
@@ -44,6 +44,7 @@ $c-very-transp: rgba(0, 0, 0, .05);
 $c-content-transp: rgba(0, 0, 0, .0675);
 $c-scenario-border-transp: rgba(0, 0, 0, .19);
 $c-scenario-bg-transp: rgba(0, 0, 0, .075);
+$c-arangodb-locked: rgba(0, 0, 0, .5);
 
 $c-content-row-active: #bdcc92;
 
@@ -86,3 +87,6 @@ $c-tab-inactive: #f1f0ee;
 $c-tab-active: #fff;
 $c-tab-bottom-border: #ddd;
 $c-tab-border: #888;
+
+$c-pag-disabled-fg: #666;
+$c-pag-disabled-bg: #777;
diff --git a/js/apps/system/aardvark/frontend/scss/_documentsView.scss b/js/apps/system/aardvark/frontend/scss/_documentsView.scss
index aa472141a0..d9b278eec6 100644
--- a/js/apps/system/aardvark/frontend/scss/_documentsView.scss
+++ b/js/apps/system/aardvark/frontend/scss/_documentsView.scss
@@ -25,23 +25,23 @@
   min-width: auto !important;
 
   th {
-    padding-top: 5px;
     padding-bottom: 5px;
     padding-left: 5px;
+    padding-top: 5px;
   }
 
   .icon_arangodb_locked {
+    color: $c-arangodb-locked;
+    cursor: default;
     font-size: 20px;
     margin-left: 10px;
-    color: rgba(0,0,0,0.5);
-    cursor: default;
   }
 
   .icon_arangodb_roundminus {
+    @extend %clickable;
+    @extend %icon-negative;
     font-size: 20px;
-    color: #BE342E;
     margin-left: 10px;
-    cursor: pointer;
   }
 
 }
@@ -66,21 +66,24 @@
   }
 }
 
-.docsFirstCol, .docsSecCol, .docsThirdCol {
+%docs-col-no-border {
   border: 0 !important;
 }
 
 .docsFirstCol {
+  @extend %docs-col-no-border;
   width: 70%;
 }
 
 .docsSecCol {
+  @extend %docs-col-no-border;
   min-width: 400px !important;
   width: 20%;
 }
 
 .docsThirdCol {
-  float: right;
+  @extend %docs-col-no-border;
+  @extend %pull-right;
 }
 
 .add-filter-item {
diff --git a/js/apps/system/aardvark/frontend/scss/_pagination.scss b/js/apps/system/aardvark/frontend/scss/_pagination.scss
index dc4d878cc6..fb7643e733 100644
--- a/js/apps/system/aardvark/frontend/scss/_pagination.scss
+++ b/js/apps/system/aardvark/frontend/scss/_pagination.scss
@@ -5,68 +5,106 @@
   opacity: .5 !important;
 }
 
-.pagination-mini ul > li.disabled:last-child > a,
-.pagination-small ul > li.disabled:last-child > a,
-.pagination-mini ul > li.disabled:last-child > span,
-.pagination-small ul > li.disabled:last-child > span,
-.pagination-mini ul > li.disabled:first-child > a,
-.pagination-small ul > li.disabled:first-child > a,
-.pagination-mini ul > li.disabled:first-child > span,
-.pagination-small ul > li.disabled:first-child > span {
-   pointer-events: none;
-   cursor: default;
-   background-color: #777;
-   color:#666666;
+.pagination-line {
+  margin: 20px 0;
+  padding-bottom: 5px;
+  text-align: center;
+
+  %pg-active {
+    background-color: $c-neutral;
+    color: $c-white;
+  }
+
+  %pg-inner {
+    @extend %pull-left;
+    background-color: $c-white;
+    border: 1px solid $c-header-btn-bg;
+    border-left-width: 0;
+    font-size: 11.9px;
+    line-height: 20px;
+    padding: 2px 10px;
+    text-decoration: none;
+  }
+
+  ul {
+    @include border-radius(4px);
+    @include box-shadow(0 1px 2px $c-very-transp);
+    display: inline-block;
+    margin-bottom: 0;
+    margin-left: 0;
+  }
+
+  li {
+    @extend %clear-float;
+    display: inline-block;
+    margin-left: 11px;
+    
+    a {
+      @extend %clickable; 
+      @extend %pg-inner;
+      border-width: 0;
+
+      &:hover {
+        @extend %pg-active;
+      }
+    }
+
+    span {
+      color: $c-black;
+      font-size: 14px;
+      position: relative;
+      top: 2px;
+    }
+
+    &:last-child,
+    &:first-child {
+      a,
+      span {
+        @include box-shadow(0);
+        background: $c-neutral;
+        border: 0;
+        color: $c-black;
+        height: 20px;
+        position: relative;
+        width: 14px;
+      }
+    }
+
+    &.active {
+      a,
+      span {
+        @extend %pg-active;
+      }
+    }
+
+    
+    &.disabled {
+      &:last-child,
+      &:first-child {
+        a,
+        span {
+          background-color: $c-pag-disabled-bg;
+          color: $c-pag-disabled-fg;
+          cursor: default;
+          pointer-events: none;
+        }
+      }
+    }
+  }
 }
 
-.pagination ul > li > a:hover, .pagination ul > .active > a, .pagination ul > .active > span {
-  background-color: #8f8d8c;
-  color:#FFFFFF;
+.arango-pagination {
+  li {
+    &:first-child {
+      margin-right: 20px;
+    }
+
+    &:last-child {
+      margin-left: 30px;
+    }
+  }
 }
 
-.pagination-mini ul > li:last-child > a, .pagination-small ul > li:last-child > a, .pagination-mini ul > li:last-child > span, .pagination-small ul > li:last-child > span,
-.pagination-mini ul > li:first-child > a, .pagination-small ul > li:first-child > a, .pagination-mini ul > li:first-child > span, .pagination-small ul > li:first-child > span {
- 	box-shadow: none;
-	background: #8f8d8c;
-	border: none;
-	color:#FFFFFF;
-	position:relative;
-	width:14px;
-	height:20px;
-}
-
-.arangoPagination li:first-child a {
-  margin-right: 20px !important;
-}
-
-.arangoPagination li:last-child a {
-  margin-left: 30px !important;
-}
-
-.pagination ul > li > a, .pagination ul > li > span {
-	cursor:pointer;
-	border-width:0 0 0 0px;
-}
-
-#documentsToolbarF .prePagi {
+.pre-pagi {
   margin-right: -5px !important;
 }
-
-
-#documentsToolbarF a,
-#logPaginationDiv a {
-  margin-left: 11px;
-}
-
-#documentsToolbarF {
-  padding-bottom: 5px;
-  margin-top: 20px;
-}
-
-#documentsToolbarF span, #logPaginationDiv span {
-  position: relative;
-  top: 2px;
-  font-size: 14px;
-  color: black;
-}
-
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index dcdcbd718a..278275c19b 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -36,13 +36,13 @@ textarea,
   font-style: italic;
   font-weight: 700;
   src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("../fonts/opensans/OpenSansBoldItalic.woff") format("woff"); }
-ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, a.headerButton, a.button-gui, div.tile, div.bigtile, div.tile a span.add-Icon, div.bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboardModal {
+ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, a.headerButton, a.button-gui, div.tile, div.bigtile, div.tile a span.add-Icon, div.bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboardModal, .pagination-line li a {
   float: left; }
 
-div.navmenu, div.footer-right, ul.headerButtonList li, div.tile div.iconSet span, div.bigtile div.iconSet span, div.headerBar > div.headerButtonBar, .fixedDropdown button, .query-button, .arango-tab li, .show-save-state {
+div.navmenu, div.footer-right, ul.headerButtonList li, div.tile div.iconSet span, div.bigtile div.iconSet span, div.headerBar > div.headerButtonBar, .fixedDropdown button, .query-button, .arango-tab li, .show-save-state, .docsThirdCol {
   float: right; }
 
-div.tileList:after, div.resizecontainer:after, div.headerBar > div.headerButtonBar:after, #distributionChartDiv:after, .lineChartDiv:after, .arango-tab:after {
+div.tileList:after, div.resizecontainer:after, div.headerBar > div.headerButtonBar:after, #distributionChartDiv:after, .lineChartDiv:after, .arango-tab:after, .pagination-line li:after {
   clear: both;
   content: '.';
   display: block;
@@ -50,7 +50,7 @@ div.tileList:after, div.resizecontainer:after, div.headerBar > div.headerButtonB
   height: 0;
   visibility: hidden; }
 
-.addButton, .deleteButton, a.headerButton, a.button-gui, div.toolbox > div.gv_action_button, .clusterDownBtn button, div.tile a span.icon, div.bigtile a span.icon, div.tile a svg, div.bigtile a svg, div.tile div.iconSet span, div.bigtile div.iconSet span, div.bigtile, .contentDiv .icon, div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label, .search-submit-icon, .fixedDropdown .notificationItem i, .fullNotification:hover, .contentTables tr.contentRowInactive a, .arango-tab a, .arango-tab li {
+.addButton, .deleteButton, a.headerButton, a.button-gui, div.toolbox > div.gv_action_button, .clusterDownBtn button, div.tile a span.icon, div.bigtile a span.icon, div.tile a svg, div.bigtile a svg, div.tile div.iconSet span, div.bigtile div.iconSet span, div.bigtile, .contentDiv .icon, div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label, .search-submit-icon, .fixedDropdown .notificationItem i, .fullNotification:hover, .contentTables tr.contentRowInactive a, .arango-tab a, .arango-tab li, .pagination-line li a, .edit-index-table .icon_arangodb_roundminus {
   cursor: pointer; }
 
 nav.navbar, footer.footer {
@@ -67,9 +67,9 @@ nav.navbar, footer.footer {
   .button-danger:hover {
     background-color: #be342e; }
 
-.deleteButton, .contentTables td span {
+.deleteButton, .contentTables td span, .edit-index-table .icon_arangodb_roundminus {
   color: #da4f49; }
-  .deleteButton:hover, .contentTables td span:hover {
+  .deleteButton:hover, .contentTables td span:hover, .edit-index-table .icon_arangodb_roundminus:hover {
     color: #be342e; }
 
 .button-success {
@@ -470,8 +470,8 @@ button.gv-zoom-btn {
   button.gv-zoom-btn.pan-bottom {
     background-image: url("../img/gv_arrow_bottom.png"); }
 
-a.paginationButton,
-ul.arangoPagination a {
+a.pagination-button,
+ul.arango-pagination a {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px; }
@@ -1549,59 +1549,69 @@ div img.searchSubmitIcon {
   cursor: default !important;
   opacity: .5 !important; }
 
-.pagination-mini ul > li.disabled:last-child > a,
-.pagination-small ul > li.disabled:last-child > a,
-.pagination-mini ul > li.disabled:last-child > span,
-.pagination-small ul > li.disabled:last-child > span,
-.pagination-mini ul > li.disabled:first-child > a,
-.pagination-small ul > li.disabled:first-child > a,
-.pagination-mini ul > li.disabled:first-child > span,
-.pagination-small ul > li.disabled:first-child > span {
-  pointer-events: none;
-  cursor: default;
-  background-color: #777;
-  color: #666666; }
-
-.pagination ul > li > a:hover, .pagination ul > .active > a, .pagination ul > .active > span {
-  background-color: #8f8d8c;
-  color: #FFFFFF; }
-
-.pagination-mini ul > li:last-child > a, .pagination-small ul > li:last-child > a, .pagination-mini ul > li:last-child > span, .pagination-small ul > li:last-child > span,
-.pagination-mini ul > li:first-child > a, .pagination-small ul > li:first-child > a, .pagination-mini ul > li:first-child > span, .pagination-small ul > li:first-child > span {
-  box-shadow: none;
-  background: #8f8d8c;
-  border: none;
-  color: #FFFFFF;
-  position: relative;
-  width: 14px;
-  height: 20px; }
-
-.arangoPagination li:first-child a {
-  margin-right: 20px !important; }
-
-.arangoPagination li:last-child a {
-  margin-left: 30px !important; }
-
-.pagination ul > li > a, .pagination ul > li > span {
-  cursor: pointer;
-  border-width: 0 0 0 0px; }
-
-#documentsToolbarF .prePagi {
-  margin-right: -5px !important; }
-
-#documentsToolbarF a,
-#logPaginationDiv a {
-  margin-left: 11px; }
-
-#documentsToolbarF {
+.pagination-line {
+  margin: 20px 0;
   padding-bottom: 5px;
-  margin-top: 20px; }
+  text-align: center; }
+  .pagination-line li a:hover, .pagination-line li.active a,
+  .pagination-line li.active span {
+    background-color: #8f8d8c;
+    color: white; }
+  .pagination-line li a {
+    background-color: white;
+    border: 1px solid #dddddd;
+    border-left-width: 0;
+    font-size: 11.9px;
+    line-height: 20px;
+    padding: 2px 10px;
+    text-decoration: none; }
+  .pagination-line ul {
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    display: inline-block;
+    margin-bottom: 0;
+    margin-left: 0; }
+  .pagination-line li {
+    display: inline-block;
+    margin-left: 11px; }
+    .pagination-line li a {
+      border-width: 0; }
+    .pagination-line li span {
+      color: black;
+      font-size: 14px;
+      position: relative;
+      top: 2px; }
+    .pagination-line li:last-child a,
+    .pagination-line li:last-child span, .pagination-line li:first-child a,
+    .pagination-line li:first-child span {
+      -webkit-box-shadow: 0;
+      -moz-box-shadow: 0;
+      box-shadow: 0;
+      background: #8f8d8c;
+      border: 0;
+      color: black;
+      height: 20px;
+      position: relative;
+      width: 14px; }
+    .pagination-line li.disabled:last-child a,
+    .pagination-line li.disabled:last-child span, .pagination-line li.disabled:first-child a,
+    .pagination-line li.disabled:first-child span {
+      background-color: #777777;
+      color: #666666;
+      cursor: default;
+      pointer-events: none; }
 
-#documentsToolbarF span, #logPaginationDiv span {
-  position: relative;
-  top: 2px;
-  font-size: 14px;
-  color: black; }
+.arango-pagination li:first-child {
+  margin-right: 20px; }
+.arango-pagination li:last-child {
+  margin-left: 30px; }
+
+.pre-pagi {
+  margin-right: -5px !important; }
 
 table.dataTable thead th {
   font-weight: 400 !important;
@@ -1656,19 +1666,17 @@ table.dataTable thead th {
   margin-top: 5px;
   min-width: auto !important; }
   .edit-index-table th {
-    padding-top: 5px;
     padding-bottom: 5px;
-    padding-left: 5px; }
+    padding-left: 5px;
+    padding-top: 5px; }
   .edit-index-table .icon_arangodb_locked {
-    font-size: 20px;
-    margin-left: 10px;
     color: rgba(0, 0, 0, 0.5);
-    cursor: default; }
+    cursor: default;
+    font-size: 20px;
+    margin-left: 10px; }
   .edit-index-table .icon_arangodb_roundminus {
     font-size: 20px;
-    color: #BE342E;
-    margin-left: 10px;
-    cursor: pointer; }
+    margin-left: 10px; }
 
 .contentIn > div {
   padding: 10px; }
@@ -1692,9 +1700,6 @@ table.dataTable thead th {
   min-width: 400px !important;
   width: 20%; }
 
-.docsThirdCol {
-  float: right; }
-
 .add-filter-item {
   margin-left: 5px; }
   .add-filter-item i {

From b544c69f93016a5083d91d07041a84a48c963ae7 Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Wed, 19 Mar 2014 16:10:42 +0100
Subject: [PATCH 02/11] Fixed scss-lint warnings

---
 .../aardvark/frontend/scss/_dataTables.scss   | 26 +++++++++++--------
 .../frontend/scss/_documentsView.scss         |  2 +-
 .../aardvark/frontend/scss/generated.css      | 25 +++++++++++-------
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/js/apps/system/aardvark/frontend/scss/_dataTables.scss b/js/apps/system/aardvark/frontend/scss/_dataTables.scss
index 1ca3594c21..6f95a5b6f1 100644
--- a/js/apps/system/aardvark/frontend/scss/_dataTables.scss
+++ b/js/apps/system/aardvark/frontend/scss/_dataTables.scss
@@ -4,46 +4,50 @@ table.dataTable thead th {
 }
 
 // TODO Hard cleanup
-#documentsTableID_length, #documentsTableID_filter {
+#documentsTableID_length,
+#documentsTableID_filter {
   display: none;
 }
 
 #documentsTableID_wrapper {
   min-height: 513px !important;
-  padding-bottom: 0px !important;
+  padding-bottom: 0 !important;
 }
 
 #documentsTableID_wrapper .fg-toolbar {
   visibility: hidden;
 }
 
-#documentsTableID_paginate, #documentsTableID_filter, #documentsTableID_length {
+#documentsTableID_paginate,
+#documentsTableID_filter,
+#documentsTableID_length {
   visibility: hidden;
 }
 
 .snippet-no-num {
+  font-family: 'Open Sans', sans-serif;
   font-size: 1em;
   font-weight: 400;
-  font-family: 'Open Sans', sans-serif;
-  margin-bottom:0px;
+  margin-bottom: 0;
 }
 
-.cuttedContent, .prettify ul li, .writeable a {
-  white-space: nowrap !important;
+.cuttedContent,
+.prettify ul li,
+.writeable a {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
+  white-space: nowrap !important;
 }
 
 .prettify {
   border: 0 !important;
-  padding: 0 !important;
-  margin: 0 !important;
   font-size: 1em !important;
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
 // i think it is removed
 .sorting_asc,
 .sorting_desc {
-  background:#e4e0dd;
+  background: #e4e0dd;
 }
-
diff --git a/js/apps/system/aardvark/frontend/scss/_documentsView.scss b/js/apps/system/aardvark/frontend/scss/_documentsView.scss
index d9b278eec6..0d5263c930 100644
--- a/js/apps/system/aardvark/frontend/scss/_documentsView.scss
+++ b/js/apps/system/aardvark/frontend/scss/_documentsView.scss
@@ -46,7 +46,7 @@
 
 }
 
-.contentIn  {
+.contentIn {
   & > div {
     padding: 10px;
   }
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index 946e92d288..02cfd3f0f2 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -1704,35 +1704,40 @@ table.dataTable thead th {
   font-weight: 400 !important;
   padding: 10px 14px; }
 
-#documentsTableID_length, #documentsTableID_filter {
+#documentsTableID_length,
+#documentsTableID_filter {
   display: none; }
 
 #documentsTableID_wrapper {
   min-height: 513px !important;
-  padding-bottom: 0px !important; }
+  padding-bottom: 0 !important; }
 
 #documentsTableID_wrapper .fg-toolbar {
   visibility: hidden; }
 
-#documentsTableID_paginate, #documentsTableID_filter, #documentsTableID_length {
+#documentsTableID_paginate,
+#documentsTableID_filter,
+#documentsTableID_length {
   visibility: hidden; }
 
 .snippet-no-num {
+  font-family: 'Open Sans', sans-serif;
   font-size: 1em;
   font-weight: 400;
-  font-family: 'Open Sans', sans-serif;
-  margin-bottom: 0px; }
+  margin-bottom: 0; }
 
-.cuttedContent, .prettify ul li, .writeable a {
-  white-space: nowrap !important;
+.cuttedContent,
+.prettify ul li,
+.writeable a {
   overflow: hidden !important;
-  text-overflow: ellipsis !important; }
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important; }
 
 .prettify {
   border: 0 !important;
-  padding: 0 !important;
+  font-size: 1em !important;
   margin: 0 !important;
-  font-size: 1em !important; }
+  padding: 0 !important; }
 
 .sorting_asc,
 .sorting_desc {

From 815112bc7a6275a9cb34152586d41feeafbcd7bf Mon Sep 17 00:00:00 2001
From: scottashton <f.bartels@triagens.de>
Date: Wed, 19 Mar 2014 16:12:58 +0100
Subject: [PATCH 03/11] scss css refactoring

---
 .../system/aardvark/frontend/css/layout.css   |   4 -
 .../aardvark/frontend/css/navigationView.css  |  63 ------
 .../aardvark/frontend/js/lib/splitter.js      | 213 ------------------
 .../frontend/js/templates/shellView.ejs       |   2 +-
 .../aardvark/frontend/scss/_checkbox.scss     |   4 +-
 .../aardvark/frontend/scss/_headerBar.scss    |  34 +--
 .../aardvark/frontend/scss/_navbar.scss       |  37 +++
 js/apps/system/aardvark/manifest.json         |   2 -
 8 files changed, 57 insertions(+), 302 deletions(-)
 delete mode 100644 js/apps/system/aardvark/frontend/css/navigationView.css
 delete mode 100644 js/apps/system/aardvark/frontend/js/lib/splitter.js

diff --git a/js/apps/system/aardvark/frontend/css/layout.css b/js/apps/system/aardvark/frontend/css/layout.css
index cda8d83091..2faba95b0e 100644
--- a/js/apps/system/aardvark/frontend/css/layout.css
+++ b/js/apps/system/aardvark/frontend/css/layout.css
@@ -1,7 +1,3 @@
-.arango-logo img {
-  margin-left: 22px;
-}
-
 .arangoBtn, .arangoBtnSuccess {
   float: left;
   font-family: 'Open Sans', sans-serif;
diff --git a/js/apps/system/aardvark/frontend/css/navigationView.css b/js/apps/system/aardvark/frontend/css/navigationView.css
deleted file mode 100644
index 3df7ccdb01..0000000000
--- a/js/apps/system/aardvark/frontend/css/navigationView.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.navbar .nav > .active > a,
-.navbar .nav > .active > a:hover,
-.navbar .nav > .active > a:focus {
-  background-color: #8AA051 !important;
-  color: white !important;
-  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0) inset !important;
-}
-.navbar .nav > li > a:focus {
-  background-color: #333232 !important;
-}
-
-.navbar .nav a.tab {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.navbar .nav > li > a:hover {
-  background-color: #8AA051 !important;
-  color: white !important
-}
-
-.arango-nav .dropdown-toggle, .arango-nav .dropdown-toggle:hover, .arango-nav .dropdown:hover, .arango-nav .dropdown:active {
-  background-color: rgba(0, 0, 0, 0) !important;
-  color: white !important;
-  margin-bottom: -8px !important;
-}
-
-body, input, textarea, .page-title span, .pingback a.url {
-  /*font-family: "Helvetica",sans-serif;*/
-  font-family: 'Open Sans', sans-serif !important;
-  font-weight: 400;
-}
-
-.arango-top-nav {
-  background-color: #333232;
-}
-
-.arango-nav {
-  height: 34px;
-  min-height: 34px;
-  background-color: #333232;
-}
-
-.arango-logo {
-  height: 34px;
-  padding: 0 !important;
-}
-
-.applications-menu {
-  display: block;
-}
-
-#arangoCollectionSelect {
-  display: none;
-  float: right;
-  padding-bottom: 0;
-  margin-bottom: 0;
-  margin-right: 15px;
-}
-
-.fixedDropdown {
-  margin: 34px 0 0 !important;
-}
diff --git a/js/apps/system/aardvark/frontend/js/lib/splitter.js b/js/apps/system/aardvark/frontend/js/lib/splitter.js
deleted file mode 100644
index eb5da9ff7f..0000000000
--- a/js/apps/system/aardvark/frontend/js/lib/splitter.js
+++ /dev/null
@@ -1,213 +0,0 @@
-/*
- * jQuery.splitter.js - two-pane splitter window plugin
- *
- * version 1.51 (2009/01/09) 
- * 
- * Dual licensed under the MIT and GPL licenses: 
- *   http://www.opensource.org/licenses/mit-license.php 
- *   http://www.gnu.org/licenses/gpl.html 
- */
-
-/**
- * The splitter() plugin implements a two-pane resizable splitter window.
- * The selected elements in the jQuery object are converted to a splitter;
- * each selected element should have two child elements, used for the panes
- * of the splitter. The plugin adds a third child element for the splitbar.
- * 
- * For more details see: http://methvin.com/splitter/
- *
- *
- * @example $('#MySplitter').splitter();
- * @desc Create a vertical splitter with default settings 
- *
- * @example $('#MySplitter').splitter({type: 'h', accessKey: 'M'});
- * @desc Create a horizontal splitter resizable via Alt+Shift+M
- *
- * @name splitter
- * @type jQuery
- * @param Object options Options for the splitter (not required)
- * @cat Plugins/Splitter
- * @return jQuery
- * @author Dave Methvin (dave.methvin@gmail.com)
- */
- ;(function($){
- 
- $.fn.splitter = function(args){
-	args = args || {};
-	return this.each(function() {
-		var zombie;		// left-behind splitbar for outline resizes
-		function startSplitMouse(evt) {
-			if ( opts.outline )
-				zombie = zombie || bar.clone(false).insertAfter(A);
-			panes.css("-webkit-user-select", "none");	// Safari selects A/B text on a move
-			bar.addClass(opts.activeClass);
-			A._posSplit = A[0][opts.pxSplit] - evt[opts.eventPos];
-			$(document)
-				.bind("mousemove", doSplitMouse)
-				.bind("mouseup", endSplitMouse);
-		}
-		function doSplitMouse(evt) {
-			var newPos = A._posSplit+evt[opts.eventPos];
-			if ( opts.outline ) {
-				newPos = Math.max(0, Math.min(newPos, splitter._DA - bar._DA));
-				bar.css(opts.origin, newPos);
-			} else 
-				resplit(newPos);
-		}
-		function endSplitMouse(evt) {
-			bar.removeClass(opts.activeClass);
-			var newPos = A._posSplit+evt[opts.eventPos];
-			if ( opts.outline ) {
-				zombie.remove(); zombie = null;
-				resplit(newPos);
-			}
-			panes.css("-webkit-user-select", "text");	// let Safari select text again
-			$(document)
-				.unbind("mousemove", doSplitMouse)
-				.unbind("mouseup", endSplitMouse);
-		}
-		function resplit(newPos) {
-			// Constrain new splitbar position to fit pane size limits
-			newPos = Math.max(A._min, splitter._DA - B._max, 
-					Math.min(newPos, A._max, splitter._DA - bar._DA - B._min));
-			// Resize/position the two panes
-			bar._DA = bar[0][opts.pxSplit];		// bar size may change during dock
-			bar.css(opts.origin, newPos).css(opts.fixed, splitter._DF);
-			A.css(opts.origin, 0).css(opts.split, newPos).css(opts.fixed,  splitter._DF);
-			B.css(opts.origin, newPos+bar._DA)
-				.css(opts.split, splitter._DA-bar._DA-newPos).css(opts.fixed,  splitter._DF);
-			// IE fires resize for us; all others pay cash
-			if ( !$.browser.msie )
-				panes.trigger("resize");
-		}
-		function dimSum(jq, dims) {
-			// Opera returns -1 for missing min/max width, turn into 0
-			var sum = 0;
-			for ( var i=1; i < arguments.length; i++ )
-				sum += Math.max(parseInt(jq.css(arguments[i])) || 0, 0);
-			return sum;
-		}
-		
-		// Determine settings based on incoming opts, element classes, and defaults
-		var vh = (args.splitHorizontal? 'h' : args.splitVertical? 'v' : args.type) || 'v';
-		var opts = $.extend({
-			activeClass: 'active',	// class name for active splitter
-			pxPerKey: 8,			// splitter px moved per keypress
-			tabIndex: 0,			// tab order indicator
-			accessKey: ''			// accessKey for splitbar
-		},{
-			v: {					// Vertical splitters:
-				keyLeft: 39, keyRight: 37, cursor: "e-resize",
-				splitbarClass: "vsplitbar", outlineClass: "voutline",
-				type: 'v', eventPos: "pageX", origin: "left",
-				split: "width",  pxSplit: "offsetWidth",  side1: "Left", side2: "Right",
-				fixed: "height", pxFixed: "offsetHeight", side3: "Top",  side4: "Bottom"
-			},
-			h: {					// Horizontal splitters:
-				keyTop: 40, keyBottom: 38,  cursor: "n-resize",
-				splitbarClass: "hsplitbar", outlineClass: "houtline",
-				type: 'h', eventPos: "pageY", origin: "top",
-				split: "height", pxSplit: "offsetHeight", side1: "Top",  side2: "Bottom",
-				fixed: "width",  pxFixed: "offsetWidth",  side3: "Left", side4: "Right"
-			}
-		}[vh], args);
-
-		// Create jQuery object closures for splitter and both panes
-		var splitter = $(this).css({position: "relative"});
-		var panes = $(">*", splitter[0]).css({
-			position: "absolute", 			// positioned inside splitter container
-			"z-index": "1",					// splitbar is positioned above
-			"-moz-outline-style": "none"	// don't show dotted outline
-		});
-		var A = $(panes[0]);		// left  or top
-		var B = $(panes[1]);		// right or bottom
-
-		// Focuser element, provides keyboard support; title is shown by Opera accessKeys
-		var focuser = $('<a href="javascript:void(0)"></a>')
-			.attr({accessKey: opts.accessKey, tabIndex: opts.tabIndex, title: opts.splitbarClass})
-			.bind($.browser.opera?"click":"focus", function(){ this.focus(); bar.addClass(opts.activeClass) })
-			.bind("keydown", function(e){
-				var key = e.which || e.keyCode;
-				var dir = key==opts["key"+opts.side1]? 1 : key==opts["key"+opts.side2]? -1 : 0;
-				if ( dir )
-					resplit(A[0][opts.pxSplit]+dir*opts.pxPerKey, false);
-			})
-			.bind("blur", function(){ bar.removeClass(opts.activeClass) });
-			
-		// Splitbar element, can be already in the doc or we create one
-		var bar = $(panes[2] || '<div></div>')
-			.insertAfter(A).css("z-index", "100").append(focuser)
-			.attr({"class": opts.splitbarClass, unselectable: "on"})
-			.css({position: "absolute",	"user-select": "none", "-webkit-user-select": "none",
-				"-khtml-user-select": "none", "-moz-user-select": "none"})
-			.bind("mousedown", startSplitMouse);
-		// Use our cursor unless the style specifies a non-default cursor
-		if ( /^(auto|default|)$/.test(bar.css("cursor")) )
-			bar.css("cursor", opts.cursor);
-
-		// Cache several dimensions for speed, rather than re-querying constantly
-		bar._DA = bar[0][opts.pxSplit];
-		splitter._PBF = $.boxModel? dimSum(splitter, "border"+opts.side3+"Width", "border"+opts.side4+"Width") : 0;
-		splitter._PBA = $.boxModel? dimSum(splitter, "border"+opts.side1+"Width", "border"+opts.side2+"Width") : 0;
-		A._pane = opts.side1;
-		B._pane = opts.side2;
-		$.each([A,B], function(){
-			this._min = opts["min"+this._pane] || dimSum(this, "min-"+opts.split);
-			this._max = opts["max"+this._pane] || dimSum(this, "max-"+opts.split) || 9999;
-			this._init = opts["size"+this._pane]===true ?
-				parseInt($.curCSS(this[0],opts.split)) : opts["size"+this._pane];
-		});
-		
-		// Determine initial position, get from cookie if specified
-		var initPos = A._init;
-		if ( !isNaN(B._init) )	// recalc initial B size as an offset from the top or left side
-			initPos = splitter[0][opts.pxSplit] - splitter._PBA - B._init - bar._DA;
-		if ( opts.cookie ) {
-			if ( !$.cookie )
-				alert('jQuery.splitter(): jQuery cookie plugin required');
-			var ckpos = parseInt($.cookie(opts.cookie));
-			if ( !isNaN(ckpos) )
-				initPos = ckpos;
-			$(window).bind("unload", function(){
-				var state = String(bar.css(opts.origin));	// current location of splitbar
-				$.cookie(opts.cookie, state, {expires: opts.cookieExpires || 365, 
-					path: opts.cookiePath || document.location.pathname});
-			});
-		}
-		if ( isNaN(initPos) )	// King Solomon's algorithm
-			initPos = Math.round((splitter[0][opts.pxSplit] - splitter._PBA - bar._DA)/2);
-
-		// Resize event propagation and splitter sizing
-		if ( opts.anchorToWindow ) {
-			// Account for margin or border on the splitter container and enforce min height
-			splitter._hadjust = dimSum(splitter, "borderTopWidth", "borderBottomWidth", "marginBottom");
-			splitter._hmin = Math.max(dimSum(splitter, "minHeight"), 20);
-			$(window).bind("resize", function(){
-				var top = splitter.offset().top;
-				var wh = $(window).height();
-				splitter.css("height", Math.max(wh-top-splitter._hadjust, splitter._hmin)+"px");
-				if ( !$.browser.msie ) splitter.trigger("resize");
-			}).trigger("resize");
-		}
-		else if ( opts.resizeToWidth && !$.browser.msie )
-			$(window).bind("resize", function(){
-				splitter.trigger("resize"); 
-			});
-
-		// Resize event handler; triggered immediately to set initial position
-		splitter.bind("resize", function(e, size){
-			// Custom events bubble in jQuery 1.3; don't get into a Yo Dawg
-			if ( e.target != this ) return;
-			// Determine new width/height of splitter container
-			splitter._DF = splitter[0][opts.pxFixed] - splitter._PBF;
-			splitter._DA = splitter[0][opts.pxSplit] - splitter._PBA;
-			// Bail if splitter isn't visible or content isn't there yet
-			if ( splitter._DF <= 0 || splitter._DA <= 0 ) return;
-			// Re-divvy the adjustable dimension; maintain size of the preferred pane
-			resplit(!isNaN(size)? size : (!(opts.sizeRight||opts.sizeBottom)? A[0][opts.pxSplit] :
-				splitter._DA-B[0][opts.pxSplit]-bar._DA));
-		}).trigger("resize" , [initPos]);
-	});
-};
-
-})(jQuery);
diff --git a/js/apps/system/aardvark/frontend/js/templates/shellView.ejs b/js/apps/system/aardvark/frontend/js/templates/shellView.ejs
index 76236f0221..3e2300f483 100644
--- a/js/apps/system/aardvark/frontend/js/templates/shellView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/shellView.ejs
@@ -3,7 +3,7 @@
     <a class="arangoHeader">JS Shell</a>
   </div>
   <div id="shell_workspace_header"/>
-  <div id="shell_workspace">
+  <div id="shell_workspace" class="shell_workspace">
     <div id="replShell" />
   </div>
 </script>
diff --git a/js/apps/system/aardvark/frontend/scss/_checkbox.scss b/js/apps/system/aardvark/frontend/scss/_checkbox.scss
index 8593f64997..014d43c218 100644
--- a/js/apps/system/aardvark/frontend/scss/_checkbox.scss
+++ b/js/apps/system/aardvark/frontend/scss/_checkbox.scss
@@ -4,9 +4,9 @@
 }
 
 .css-label {
-  background-image:url(../img/dark-check-green.png);
+  background-image: url('../img/dark-check-green.png');
 }
 
 .css-label-round {
-  background-image:url(../img/dark-check-green-round.png);
+  background-image: url('../img/dark-check-green-round.png');
 }
\ No newline at end of file
diff --git a/js/apps/system/aardvark/frontend/scss/_headerBar.scss b/js/apps/system/aardvark/frontend/scss/_headerBar.scss
index 5bbda77bc9..179c98495f 100644
--- a/js/apps/system/aardvark/frontend/scss/_headerBar.scss
+++ b/js/apps/system/aardvark/frontend/scss/_headerBar.scss
@@ -43,15 +43,15 @@ div.headerBar {
     display: none;
 
     & + label.css-label {
-      padding-left: 20px;
-      margin-top: 0px;
-      height: 15px;
-      display: inline-block;
-      background-repeat: no-repeat;
       background-position: 0 0;
+      background-repeat: no-repeat;
+      cursor: pointer;
+      display: inline-block;
       font-size: 15px;
+      height: 15px;
+      margin-top: 0;
+      padding-left: 20px;
       vertical-align: middle;
-      cursor:pointer;
     }
   }
 
@@ -60,21 +60,21 @@ div.headerBar {
   }
 
   input[type="radio"] {
-    display:none;
+    display: none;
 
     & + label span {
-      display:inline-block;
-      width:19px;
-      height:19px;
-      margin:-1px 4px 0 0;
-      vertical-align:middle;
-      background:url(../img/check_radio_sheet.png) -38px top no-repeat;
-      cursor:pointer;
+      background: url(../img/check_radio_sheet.png) -38px top no-repeat;
+      cursor: pointer;
+      display: inline-block;
+      height: 19px;
+      margin: -1px 4px 0 0;
+      vertical-align: middle;
+      width: 19px;
     }
   }
-  
+
   input[type="radio"]:checked + label span {
-    background:url(../img/check_radio_sheet.png) -57px top no-repeat;
+    background: url(../img/check_radio_sheet.png) -57px top no-repeat;
   }
 }
 
@@ -117,5 +117,5 @@ div.breadcrumb a.disabledBread {
 }
 
 #transparentHeader input[type=checkbox].css-checkbox {
-  display:none;
+  display: none;
 }
diff --git a/js/apps/system/aardvark/frontend/scss/_navbar.scss b/js/apps/system/aardvark/frontend/scss/_navbar.scss
index 9a675728b9..4b113f7e3e 100644
--- a/js/apps/system/aardvark/frontend/scss/_navbar.scss
+++ b/js/apps/system/aardvark/frontend/scss/_navbar.scss
@@ -3,6 +3,30 @@ nav.navbar {
   height: 38px;
   margin-bottom: 3px;
   top: 0;
+
+  .nav {
+
+    & > .active {
+
+      & > a {
+        background-color: $c-positive;
+        color: $c-white;
+        @include box-shadow(0 0 0 $c-transp inset);
+      }
+    }
+
+    & > li {
+
+      & > a:focus {
+        background-color: $c-nav-bg;
+      }
+
+      & > a:hover {
+        background-color: $c-positive;
+        color: $c-white;
+      }
+    }
+  }
 }
 
 div.navlogo {
@@ -140,3 +164,16 @@ ul.gv-dropdown-menu {
   vertical-align: top;
   width: 0;
 }
+
+.applications-menu {
+  display: block;
+}
+
+.arango-logo {
+  height: 34px;
+  padding: 0 !important;
+
+  img {
+    margin-left: 22px;
+  }
+}
diff --git a/js/apps/system/aardvark/manifest.json b/js/apps/system/aardvark/manifest.json
index 4b592c6bf3..7b546ddd9b 100644
--- a/js/apps/system/aardvark/manifest.json
+++ b/js/apps/system/aardvark/manifest.json
@@ -102,7 +102,6 @@
         "frontend/js/lib/ColVis.js",
         "frontend/js/lib/bootstrap-pagination.js",
         "frontend/js/lib/jqconsole.min.js",
-        "frontend/js/lib/splitter.js",
         "frontend/js/lib/swagger.js",
         "frontend/js/lib/swagger-ui.js",
         "frontend/js/lib/highlight.7.3.pack.js",
@@ -136,7 +135,6 @@
         "frontend/css/swaggerView.css",
         "frontend/css/foxxView.css",
         "frontend/css/graphView.css",
-        "frontend/css/dbSelectionView.css",
         "frontend/css/jquery.snippet.css",
         "frontend/css/modal.css",
         "frontend/css/ansi.css",

From cf5c1538b684249fcd5f5cfa673e8d0713942591 Mon Sep 17 00:00:00 2001
From: scottashton <f.bartels@triagens.de>
Date: Wed, 19 Mar 2014 16:32:47 +0100
Subject: [PATCH 04/11] scss-css, removes shellView.css

---
 .../aardvark/frontend/css/shellView.css       |  97 ----------------
 .../frontend/js/templates/shellView.ejs       |   2 +-
 .../aardvark/frontend/scss/_colors.scss       |  10 ++
 .../aardvark/frontend/scss/_shellView.scss    |  72 ++++++++++++
 .../aardvark/frontend/scss/generated.css      | 107 +++++++++++++++---
 .../system/aardvark/frontend/scss/style.scss  |   3 +
 js/apps/system/aardvark/manifest.json         |   1 -
 7 files changed, 178 insertions(+), 114 deletions(-)
 delete mode 100644 js/apps/system/aardvark/frontend/css/shellView.css
 create mode 100644 js/apps/system/aardvark/frontend/scss/_shellView.scss

diff --git a/js/apps/system/aardvark/frontend/css/shellView.css b/js/apps/system/aardvark/frontend/css/shellView.css
deleted file mode 100644
index 0be809d367..0000000000
--- a/js/apps/system/aardvark/frontend/css/shellView.css
+++ /dev/null
@@ -1,97 +0,0 @@
-/* REPL SHELL */
-
-.shellul {
-  border-bottom: 20px solid rgba(0, 0, 0, 0.00);
-  padding-bottom: 20px;
-}
-
-#shell_workspace {
-  margin-top: 13px;
-}
-
-.vsplitbar {
-  border: 0;
-  width: 10px;
-  background-color: #F0F0F0;
-  border-top: 1px solid #A0A0A0;
-  border-bottom: 1px solid #A0A0A0;
-  border-left: 1px solid #A0A0A0;
-  border-right: 1px solid #A0A0A0;
-  background-image: url(../img/stripes90.gif);
-  background-repeat:no-repeat;
-  background-position: 50% 50%;
-}
-
-.vsplitbar:hover {
-  cursor: col-resize !important;
-}
-
-#replShell {
-  float:left;
-  min-width: 100px;
-  width: 100%;
-  background-color: white;
-  position: relative;
-  height: 100%;
-}
-
-#replShell pre {
-  border-top: 1px solid #A0A0A0 !important;
-  border-right: 1px solid #A0A0A0 !important;
-  border-left: 0 !important;
-  border-bottom: 0 !important;
-}
-/* The inner console element. */
-.jqconsole {
-  background-color: black;
-  padding: 10px;
-  border-radius: 0;
-}
-.jqconsole-header {
-  color: white;
-}
-
-.jserror {
-  color: #FF0066;
-  margin-left: -10px;
-}
-
-.jssuccess {
-  color: #66FF00;
-}
-
-
-/* The cursor. */
-.jqconsole-cursor {
-  background-color: gray;
-}
-/* The cursor color when the console looses focus. */
-.jqconsole-blurred .jqconsole-header .jqconsole-cursor {
-      color: #C4CCCC;
-}
-/* The current prompt text color */
-.jqconsole-prompt {
-  color: #BB9911;
-}
-/* The command history */
-.jqconsole-old-prompt {
-  color: #FF6600;
-  font-weight: normal;
-}
-/* The text color when in input mode. */
-.jqconsole-input {
-  color: #dd0;
-}
-/* Previously entered input. */
-.jqconsole-old-input {
-  color: #bb0;
-  font-weight: normal;
-}
-/* The text color of the output. */
-.jqconsole-output {
-  color: white;
-}
-
-#queryOutput .ace_gutter-cell {
-  background-color: #F0F0F0 !important;
-}
diff --git a/js/apps/system/aardvark/frontend/js/templates/shellView.ejs b/js/apps/system/aardvark/frontend/js/templates/shellView.ejs
index 3e2300f483..ed94635749 100644
--- a/js/apps/system/aardvark/frontend/js/templates/shellView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/shellView.ejs
@@ -4,6 +4,6 @@
   </div>
   <div id="shell_workspace_header"/>
   <div id="shell_workspace" class="shell_workspace">
-    <div id="replShell" />
+    <div id="replShell" class="replShell"/>
   </div>
 </script>
diff --git a/js/apps/system/aardvark/frontend/scss/_colors.scss b/js/apps/system/aardvark/frontend/scss/_colors.scss
index 080d4161e0..cb7a6ccbb6 100644
--- a/js/apps/system/aardvark/frontend/scss/_colors.scss
+++ b/js/apps/system/aardvark/frontend/scss/_colors.scss
@@ -56,6 +56,16 @@ $c-navbar-spacer-shadow : #c8c8c8;
 
 $c-btn-inverse : #736b68;
 
+$c-shell-error : #ff0066;
+$c-shell-success : #66ff00;
+$c-shell-bg : #808080;
+$c-shell-losing-focus: #c4cccc;
+
+$c-shell-prompt: #bb9911;
+$c-shell-old-prompt: #ff6600;
+$c-shell-input: #dd0;
+$c-shell-old-input: #bb0;
+
 $c-notification-red: #c00;
 
 $c-cluster-button-green: #617e2b;
diff --git a/js/apps/system/aardvark/frontend/scss/_shellView.scss b/js/apps/system/aardvark/frontend/scss/_shellView.scss
new file mode 100644
index 0000000000..c8230aa4a9
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/_shellView.scss
@@ -0,0 +1,72 @@
+.shell_workspace {
+  margin-top: 13px;
+}
+
+.replShell {
+  background-color: $c-white;
+  float: left;
+  height: 100%;
+  min-width: 100px;
+  position: relative;
+  width: 100%;
+
+  pre {
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 1px solid $c-navbar-spacer;
+    border-top: 1px solid $c-navbar-spacer;
+  }
+}
+
+.jqconsole {
+  background-color: $c-black;
+  border-radius: 0;
+  padding: 10px;
+}
+
+.jqconsole-header {
+  color: $c-white;
+}
+
+.jserror {
+  color: $c-shell-error;
+  margin-left: -10px;
+}
+
+.jssuccess {
+  color: $c-shell-success;
+}
+
+.jqconsole-cursor {
+  background-color: $c-shell-bg;
+}
+
+.jqconsole-blurred .jqconsole-header .jqconsole-cursor {
+  color: $c-shell-losing-focus;
+}
+
+.jqconsole-prompt {
+  color: $c-shell-prompt;
+}
+
+.jqconsole-old-prompt {
+  color: $c-shell-old-prompt;
+  font-weight: normal;
+}
+
+.jqconsole-input {
+  color: $c-shell-input;
+}
+
+.jqconsole-old-input {
+  color: $c-shell-old-input;
+  font-weight: normal;
+}
+
+.jqconsole-output {
+  color: $c-white;
+}
+
+.query-output .ace_gutter-cell {
+  background-color: $c-toolbar-bg;
+}
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index 02cfd3f0f2..eedf33b67a 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -111,9 +111,9 @@ nav.navbar, footer.footer {
     background-color: #f87c0f; }
 
 .button-inactive {
-  background-color: lightgrey; }
+  background-color: lightgray; }
   .button-inactive:hover {
-    background-color: grey; }
+    background-color: gray; }
 
 ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu {
   -moz-border-radius: 3px;
@@ -176,6 +176,17 @@ nav.navbar {
   height: 38px;
   margin-bottom: 3px;
   top: 0; }
+  nav.navbar .nav > .active > a {
+    background-color: #8aa051;
+    color: white;
+    -webkit-box-shadow: 0 0 0 transparent inset;
+    -moz-box-shadow: 0 0 0 transparent inset;
+    box-shadow: 0 0 0 transparent inset; }
+  nav.navbar .nav > li > a:focus {
+    background-color: #333232; }
+  nav.navbar .nav > li > a:hover {
+    background-color: #8aa051;
+    color: white; }
 
 div.navlogo {
   margin-left: 5px;
@@ -260,6 +271,15 @@ ul.gv-dropdown-menu {
   vertical-align: top;
   width: 0; }
 
+.applications-menu {
+  display: block; }
+
+.arango-logo {
+  height: 34px;
+  padding: 0 !important; }
+  .arango-logo img {
+    margin-left: 22px; }
+
 .footer {
   background-color: #333232;
   bottom: 0;
@@ -985,27 +1005,27 @@ div.headerBar {
   div.headerBar input[type=checkbox].css-checkbox {
     display: none; }
     div.headerBar input[type=checkbox].css-checkbox + label.css-label {
-      padding-left: 20px;
-      margin-top: 0px;
-      height: 15px;
-      display: inline-block;
-      background-repeat: no-repeat;
       background-position: 0 0;
+      background-repeat: no-repeat;
+      cursor: pointer;
+      display: inline-block;
       font-size: 15px;
-      vertical-align: middle;
-      cursor: pointer; }
+      height: 15px;
+      margin-top: 0;
+      padding-left: 20px;
+      vertical-align: middle; }
   div.headerBar input[type=checkbox].css-checkbox:checked + label.css-label {
     background-position: 0 -15px; }
   div.headerBar input[type="radio"] {
     display: none; }
     div.headerBar input[type="radio"] + label span {
+      background: url(../img/check_radio_sheet.png) -38px top no-repeat;
+      cursor: pointer;
       display: inline-block;
-      width: 19px;
       height: 19px;
       margin: -1px 4px 0 0;
       vertical-align: middle;
-      background: url(../img/check_radio_sheet.png) -38px top no-repeat;
-      cursor: pointer; }
+      width: 19px; }
   div.headerBar input[type="radio"]:checked + label span {
     background: url(../img/check_radio_sheet.png) -57px top no-repeat; }
 
@@ -1038,10 +1058,10 @@ div.breadcrumb a.disabledBread {
   padding-left: 0; }
 
 .css-label {
-  background-image: url(../img/dark-check-green.png); }
+  background-image: url("../img/dark-check-green.png"); }
 
 .css-label-round {
-  background-image: url(../img/dark-check-green-round.png); }
+  background-image: url("../img/dark-check-green-round.png"); }
 
 .navlogo .stat_cpu {
   height: 26px;
@@ -1177,7 +1197,7 @@ div.breadcrumb a.disabledBread {
   width: 100%; }
 
 .user-menu-img {
-  background-color: lightgrey;
+  background-color: lightgray;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -1700,6 +1720,63 @@ div img.searchSubmitIcon {
   font-weight: 400;
   width: 397px !important; }
 
+.shell_workspace {
+  margin-top: 13px; }
+
+.replShell {
+  background-color: white;
+  float: left;
+  height: 100%;
+  min-width: 100px;
+  position: relative;
+  width: 100%; }
+  .replShell pre {
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 1px solid #a0a0a0;
+    border-top: 1px solid #a0a0a0; }
+
+.jqconsole {
+  background-color: black;
+  border-radius: 0;
+  padding: 10px; }
+
+.jqconsole-header {
+  color: white; }
+
+.jserror {
+  color: #ff0066;
+  margin-left: -10px; }
+
+.jssuccess {
+  color: #66ff00; }
+
+.jqconsole-cursor {
+  background-color: gray; }
+
+.jqconsole-blurred .jqconsole-header .jqconsole-cursor {
+  color: #c4cccc; }
+
+.jqconsole-prompt {
+  color: #bb9911; }
+
+.jqconsole-old-prompt {
+  color: #ff6600;
+  font-weight: normal; }
+
+.jqconsole-input {
+  color: #dddd00; }
+
+.jqconsole-old-input {
+  color: #bbbb00;
+  font-weight: normal; }
+
+.jqconsole-output {
+  color: white; }
+
+.query-output .ace_gutter-cell {
+  background-color: #f0f0f0; }
+
 table.dataTable thead th {
   font-weight: 400 !important;
   padding: 10px 14px; }
diff --git a/js/apps/system/aardvark/frontend/scss/style.scss b/js/apps/system/aardvark/frontend/scss/style.scss
index 05e1f187f9..212c242e81 100644
--- a/js/apps/system/aardvark/frontend/scss/style.scss
+++ b/js/apps/system/aardvark/frontend/scss/style.scss
@@ -41,6 +41,9 @@
 @import 'pagination';
 // accordion
 @import 'accordion';
+// shell view
+@import 'shellView';
+
 
 // Data Tables, TODO: might all be superflous
 @import 'dataTables';
diff --git a/js/apps/system/aardvark/manifest.json b/js/apps/system/aardvark/manifest.json
index 7b546ddd9b..dec1edf374 100644
--- a/js/apps/system/aardvark/manifest.json
+++ b/js/apps/system/aardvark/manifest.json
@@ -128,7 +128,6 @@
         "frontend/css/layout.css",
         "frontend/css/jquery.dataTables.css",
         "frontend/css/nv.d3.css",
-        "frontend/css/shellView.css",
         "frontend/css/logsView.css",
         "frontend/css/documentsView.css",
         "frontend/css/documentView.css",

From 61dac9b2ce9e02492ebdcde9d638c3df04f2f2de Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Wed, 19 Mar 2014 16:38:21 +0100
Subject: [PATCH 05/11] Fixed scss-lint warnings

---
 js/apps/system/aardvark/frontend/scss/_colors.scss   |  8 ++++----
 .../system/aardvark/frontend/scss/_headerBar.scss    |  4 ++--
 js/apps/system/aardvark/frontend/scss/generated.css  | 12 ++++++------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/js/apps/system/aardvark/frontend/scss/_colors.scss b/js/apps/system/aardvark/frontend/scss/_colors.scss
index cb7a6ccbb6..24e71ff240 100644
--- a/js/apps/system/aardvark/frontend/scss/_colors.scss
+++ b/js/apps/system/aardvark/frontend/scss/_colors.scss
@@ -56,13 +56,13 @@ $c-navbar-spacer-shadow : #c8c8c8;
 
 $c-btn-inverse : #736b68;
 
-$c-shell-error : #ff0066;
-$c-shell-success : #66ff00;
+$c-shell-error : #f06;
+$c-shell-success : #6f0;
 $c-shell-bg : #808080;
 $c-shell-losing-focus: #c4cccc;
 
-$c-shell-prompt: #bb9911;
-$c-shell-old-prompt: #ff6600;
+$c-shell-prompt: #b91;
+$c-shell-old-prompt: #f60;
 $c-shell-input: #dd0;
 $c-shell-old-input: #bb0;
 
diff --git a/js/apps/system/aardvark/frontend/scss/_headerBar.scss b/js/apps/system/aardvark/frontend/scss/_headerBar.scss
index 179c98495f..23202a014a 100644
--- a/js/apps/system/aardvark/frontend/scss/_headerBar.scss
+++ b/js/apps/system/aardvark/frontend/scss/_headerBar.scss
@@ -63,7 +63,7 @@ div.headerBar {
     display: none;
 
     & + label span {
-      background: url(../img/check_radio_sheet.png) -38px top no-repeat;
+      background: url('../img/check_radio_sheet.png') -38px top no-repeat;
       cursor: pointer;
       display: inline-block;
       height: 19px;
@@ -74,7 +74,7 @@ div.headerBar {
   }
 
   input[type="radio"]:checked + label span {
-    background: url(../img/check_radio_sheet.png) -57px top no-repeat;
+    background: url('../img/check_radio_sheet.png') -57px top no-repeat;
   }
 }
 
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index eedf33b67a..a91858c6fe 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -111,9 +111,9 @@ nav.navbar, footer.footer {
     background-color: #f87c0f; }
 
 .button-inactive {
-  background-color: lightgray; }
+  background-color: lightgrey; }
   .button-inactive:hover {
-    background-color: gray; }
+    background-color: grey; }
 
 ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu {
   -moz-border-radius: 3px;
@@ -1019,7 +1019,7 @@ div.headerBar {
   div.headerBar input[type="radio"] {
     display: none; }
     div.headerBar input[type="radio"] + label span {
-      background: url(../img/check_radio_sheet.png) -38px top no-repeat;
+      background: url("../img/check_radio_sheet.png") -38px top no-repeat;
       cursor: pointer;
       display: inline-block;
       height: 19px;
@@ -1027,7 +1027,7 @@ div.headerBar {
       vertical-align: middle;
       width: 19px; }
   div.headerBar input[type="radio"]:checked + label span {
-    background: url(../img/check_radio_sheet.png) -57px top no-repeat; }
+    background: url("../img/check_radio_sheet.png") -57px top no-repeat; }
 
 div.headerBar a.arangoHeader,
 .modal-header .arangoHeader {
@@ -1197,7 +1197,7 @@ div.breadcrumb a.disabledBread {
   width: 100%; }
 
 .user-menu-img {
-  background-color: lightgray;
+  background-color: lightgrey;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -1752,7 +1752,7 @@ div img.searchSubmitIcon {
   color: #66ff00; }
 
 .jqconsole-cursor {
-  background-color: gray; }
+  background-color: grey; }
 
 .jqconsole-blurred .jqconsole-header .jqconsole-cursor {
   color: #c4cccc; }

From d5003db6b8a2ddc1dab842d6f990d1a289e98b04 Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Wed, 19 Mar 2014 16:52:14 +0100
Subject: [PATCH 06/11] Fixed js-lint

---
 .../aardvark/clusterFrontend/js/views/showClusterView.js  | 8 +++++---
 .../graphViewer/specGraphViewer/graphViewerUISpec.js      | 1 -
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js b/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
index 3d84b3660c..d03ba2f77d 100644
--- a/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
+++ b/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
@@ -232,9 +232,10 @@
                 }
                 self.hist[dbserver.id].lastTime = time;
                 if (e.client.totalTime.count === 0) {
-                    self.hist[dbserver.id][time] = 0;
+                  self.hist[dbserver.id][time] = 0;
                 } else {
-                    self.hist[dbserver.id][time] = e.client.totalTime.sum / e.client.totalTime.count;
+                  self.hist[dbserver.id][time] = e.client.totalTime.sum
+                    / e.client.totalTime.count;
                 }
             });
         });
@@ -272,7 +273,8 @@
                 if (e.client.totalTime.count === 0) {
                     self.hist[coordinator.id][time] = 0;
                 } else {
-                    self.hist[coordinator.id][time] = e.client.totalTime.sum / e.client.totalTime.count;
+                  self.hist[coordinator.id][time] = e.client.totalTime.sum
+                    / e.client.totalTime.count;
                 }
             });
         });
diff --git a/js/apps/system/aardvark/test/specs/graphViewer/specGraphViewer/graphViewerUISpec.js b/js/apps/system/aardvark/test/specs/graphViewer/specGraphViewer/graphViewerUISpec.js
index 46c2c76bd1..b4ae99d86b 100644
--- a/js/apps/system/aardvark/test/specs/graphViewer/specGraphViewer/graphViewerUISpec.js
+++ b/js/apps/system/aardvark/test/specs/graphViewer/specGraphViewer/graphViewerUISpec.js
@@ -185,7 +185,6 @@
         var buttonBar = $("#contentDiv #menubar #modifiers");
         expect(buttonBar.length).toEqual(1);
         expect(buttonBar).toBeOfClass("headerButtonBar");
-        expect(buttonBar).toBeOfClass("pull-right");
       });
       
       it('should contain a general configure menu', function() {

From 299e8485679299b49a5c28db46098af3a1408add Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Wed, 19 Mar 2014 17:03:45 +0100
Subject: [PATCH 07/11] Moved font-awesome from css to scss

---
 .../aardvark/frontend/css/font-awesome.css    | 1338 -----------------
 .../system/aardvark/frontend/scss/_fonts.scss |    3 +
 .../aardvark/frontend/scss/_shared.scss       |    1 -
 .../scss/font-awesome/_bordered-pulled.scss   |   16 +
 .../frontend/scss/font-awesome/_core.scss     |   12 +
 .../scss/font-awesome/_fixed-width.scss       |    6 +
 .../scss/font-awesome/_font-awesome.scss      |   17 +
 .../frontend/scss/font-awesome/_icons.scss    |  412 +++++
 .../frontend/scss/font-awesome/_larger.scss   |   13 +
 .../frontend/scss/font-awesome/_list.scss     |   19 +
 .../frontend/scss/font-awesome/_mixins.scss   |   20 +
 .../frontend/scss/font-awesome/_path.scss     |   14 +
 .../scss/font-awesome/_rotated-flipped.scss   |    9 +
 .../frontend/scss/font-awesome/_spinning.scss |   30 +
 .../frontend/scss/font-awesome/_stacked.scss  |   20 +
 .../scss/font-awesome/_variables.scss         |  381 +++++
 .../aardvark/frontend/scss/generated.css      | 1323 ++++++++++++++++
 js/apps/system/aardvark/manifest.json         |    1 -
 18 files changed, 2295 insertions(+), 1340 deletions(-)
 delete mode 100644 js/apps/system/aardvark/frontend/css/font-awesome.css
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_bordered-pulled.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_core.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_fixed-width.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_font-awesome.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_icons.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_larger.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_list.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_mixins.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_path.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_rotated-flipped.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_spinning.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_stacked.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/font-awesome/_variables.scss

diff --git a/js/apps/system/aardvark/frontend/css/font-awesome.css b/js/apps/system/aardvark/frontend/css/font-awesome.css
deleted file mode 100644
index 46958c5a03..0000000000
--- a/js/apps/system/aardvark/frontend/css/font-awesome.css
+++ /dev/null
@@ -1,1338 +0,0 @@
-/*!
- *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */
-/* FONT PATH
- * -------------------------- */
-@font-face {
-  font-family: 'FontAwesome';
-  src: url('../fonts/fontawesome/fontawesome-webfont.eot?v=4.0.3');
-  src: url('../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome/fontawesome-webfont.svg?v=4.0.3#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;
-}
-/* makes the font 33% larger relative to the icon container */
-.fa-lg {
-  font-size: 1.3333333333333333em;
-  line-height: 0.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.2857142857142858em;
-  text-align: center;
-}
-.fa-ul {
-  padding-left: 0;
-  margin-left: 2.142857142857143em;
-  list-style-type: none;
-}
-.fa-ul > li {
-  position: relative;
-}
-.fa-li {
-  position: absolute;
-  left: -2.142857142857143em;
-  width: 2.142857142857143em;
-  top: 0.14285714285714285em;
-  text-align: center;
-}
-.fa-li.fa-lg {
-  left: -1.8571428571428572em;
-}
-.fa-border {
-  padding: .2em .25em .15em;
-  border: solid 0.08em #eeeeee;
-  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);
-  }
-}
-@-ms-keyframes spin {
-  0% {
-    -ms-transform: rotate(0deg);
-  }
-  100% {
-    -ms-transform: rotate(359deg);
-  }
-}
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    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: #ffffff;
-}
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-   readers do not read off random characters that represent icons */
-.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-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-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-asc:before {
-  content: "\f0dd";
-}
-.fa-sort-up:before,
-.fa-sort-desc: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-reply-all:before {
-  content: "\f122";
-}
-.fa-mail-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";
-}
diff --git a/js/apps/system/aardvark/frontend/scss/_fonts.scss b/js/apps/system/aardvark/frontend/scss/_fonts.scss
index d7655b1cd1..1e053eb125 100644
--- a/js/apps/system/aardvark/frontend/scss/_fonts.scss
+++ b/js/apps/system/aardvark/frontend/scss/_fonts.scss
@@ -41,3 +41,6 @@ textarea,
 @font-face {
   @include sans(italic, 700, ' Bold Italic', '-BoldItalic', 'BoldItalic');
 }
+
+// Font Awesome
+@import 'font-awesome/font-awesome'
diff --git a/js/apps/system/aardvark/frontend/scss/_shared.scss b/js/apps/system/aardvark/frontend/scss/_shared.scss
index 7d6a9d5ec1..5856289cb5 100644
--- a/js/apps/system/aardvark/frontend/scss/_shared.scss
+++ b/js/apps/system/aardvark/frontend/scss/_shared.scss
@@ -22,4 +22,3 @@
 @import 'headerBar';
 // Checkbox
 @import 'checkbox';
-
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_bordered-pulled.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_bordered-pulled.scss
new file mode 100644
index 0000000000..9d3fdf3a0b
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_bordered-pulled.scss
@@ -0,0 +1,16 @@
+// Bordered & Pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid .08em $fa-border-color;
+  border-radius: .1em;
+}
+
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.#{$fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_core.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_core.scss
new file mode 100644
index 0000000000..861ccd9dcb
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_core.scss
@@ -0,0 +1,12 @@
+// Base Class Definition
+// -------------------------
+
+.#{$fa-css-prefix} {
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_fixed-width.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_fixed-width.scss
new file mode 100644
index 0000000000..b221c98133
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_fixed-width.scss
@@ -0,0 +1,6 @@
+// Fixed Width Icons
+// -------------------------
+.#{$fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_font-awesome.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_font-awesome.scss
new file mode 100644
index 0000000000..96d2f22254
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_font-awesome.scss
@@ -0,0 +1,17 @@
+/*!
+ *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "spinning";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_icons.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_icons.scss
new file mode 100644
index 0000000000..7490cf3611
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_icons.scss
@@ -0,0 +1,412 @@
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
+
+.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
+.#{$fa-css-prefix}-music:before { content: $fa-var-music; }
+.#{$fa-css-prefix}-search:before { content: $fa-var-search; }
+.#{$fa-css-prefix}-envelope-o:before { content: $fa-var-envelope-o; }
+.#{$fa-css-prefix}-heart:before { content: $fa-var-heart; }
+.#{$fa-css-prefix}-star:before { content: $fa-var-star; }
+.#{$fa-css-prefix}-star-o:before { content: $fa-var-star-o; }
+.#{$fa-css-prefix}-user:before { content: $fa-var-user; }
+.#{$fa-css-prefix}-film:before { content: $fa-var-film; }
+.#{$fa-css-prefix}-th-large:before { content: $fa-var-th-large; }
+.#{$fa-css-prefix}-th:before { content: $fa-var-th; }
+.#{$fa-css-prefix}-th-list:before { content: $fa-var-th-list; }
+.#{$fa-css-prefix}-check:before { content: $fa-var-check; }
+.#{$fa-css-prefix}-times:before { content: $fa-var-times; }
+.#{$fa-css-prefix}-search-plus:before { content: $fa-var-search-plus; }
+.#{$fa-css-prefix}-search-minus:before { content: $fa-var-search-minus; }
+.#{$fa-css-prefix}-power-off:before { content: $fa-var-power-off; }
+.#{$fa-css-prefix}-signal:before { content: $fa-var-signal; }
+.#{$fa-css-prefix}-gear:before,
+.#{$fa-css-prefix}-cog:before { content: $fa-var-cog; }
+.#{$fa-css-prefix}-trash-o:before { content: $fa-var-trash-o; }
+.#{$fa-css-prefix}-home:before { content: $fa-var-home; }
+.#{$fa-css-prefix}-file-o:before { content: $fa-var-file-o; }
+.#{$fa-css-prefix}-clock-o:before { content: $fa-var-clock-o; }
+.#{$fa-css-prefix}-road:before { content: $fa-var-road; }
+.#{$fa-css-prefix}-download:before { content: $fa-var-download; }
+.#{$fa-css-prefix}-arrow-circle-o-down:before { content: $fa-var-arrow-circle-o-down; }
+.#{$fa-css-prefix}-arrow-circle-o-up:before { content: $fa-var-arrow-circle-o-up; }
+.#{$fa-css-prefix}-inbox:before { content: $fa-var-inbox; }
+.#{$fa-css-prefix}-play-circle-o:before { content: $fa-var-play-circle-o; }
+.#{$fa-css-prefix}-rotate-right:before,
+.#{$fa-css-prefix}-repeat:before { content: $fa-var-repeat; }
+.#{$fa-css-prefix}-refresh:before { content: $fa-var-refresh; }
+.#{$fa-css-prefix}-list-alt:before { content: $fa-var-list-alt; }
+.#{$fa-css-prefix}-lock:before { content: $fa-var-lock; }
+.#{$fa-css-prefix}-flag:before { content: $fa-var-flag; }
+.#{$fa-css-prefix}-headphones:before { content: $fa-var-headphones; }
+.#{$fa-css-prefix}-volume-off:before { content: $fa-var-volume-off; }
+.#{$fa-css-prefix}-volume-down:before { content: $fa-var-volume-down; }
+.#{$fa-css-prefix}-volume-up:before { content: $fa-var-volume-up; }
+.#{$fa-css-prefix}-qrcode:before { content: $fa-var-qrcode; }
+.#{$fa-css-prefix}-barcode:before { content: $fa-var-barcode; }
+.#{$fa-css-prefix}-tag:before { content: $fa-var-tag; }
+.#{$fa-css-prefix}-tags:before { content: $fa-var-tags; }
+.#{$fa-css-prefix}-book:before { content: $fa-var-book; }
+.#{$fa-css-prefix}-bookmark:before { content: $fa-var-bookmark; }
+.#{$fa-css-prefix}-print:before { content: $fa-var-print; }
+.#{$fa-css-prefix}-camera:before { content: $fa-var-camera; }
+.#{$fa-css-prefix}-font:before { content: $fa-var-font; }
+.#{$fa-css-prefix}-bold:before { content: $fa-var-bold; }
+.#{$fa-css-prefix}-italic:before { content: $fa-var-italic; }
+.#{$fa-css-prefix}-text-height:before { content: $fa-var-text-height; }
+.#{$fa-css-prefix}-text-width:before { content: $fa-var-text-width; }
+.#{$fa-css-prefix}-align-left:before { content: $fa-var-align-left; }
+.#{$fa-css-prefix}-align-center:before { content: $fa-var-align-center; }
+.#{$fa-css-prefix}-align-right:before { content: $fa-var-align-right; }
+.#{$fa-css-prefix}-align-justify:before { content: $fa-var-align-justify; }
+.#{$fa-css-prefix}-list:before { content: $fa-var-list; }
+.#{$fa-css-prefix}-dedent:before,
+.#{$fa-css-prefix}-outdent:before { content: $fa-var-outdent; }
+.#{$fa-css-prefix}-indent:before { content: $fa-var-indent; }
+.#{$fa-css-prefix}-video-camera:before { content: $fa-var-video-camera; }
+.#{$fa-css-prefix}-picture-o:before { content: $fa-var-picture-o; }
+.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; }
+.#{$fa-css-prefix}-map-marker:before { content: $fa-var-map-marker; }
+.#{$fa-css-prefix}-adjust:before { content: $fa-var-adjust; }
+.#{$fa-css-prefix}-tint:before { content: $fa-var-tint; }
+.#{$fa-css-prefix}-edit:before,
+.#{$fa-css-prefix}-pencil-square-o:before { content: $fa-var-pencil-square-o; }
+.#{$fa-css-prefix}-share-square-o:before { content: $fa-var-share-square-o; }
+.#{$fa-css-prefix}-check-square-o:before { content: $fa-var-check-square-o; }
+.#{$fa-css-prefix}-arrows:before { content: $fa-var-arrows; }
+.#{$fa-css-prefix}-step-backward:before { content: $fa-var-step-backward; }
+.#{$fa-css-prefix}-fast-backward:before { content: $fa-var-fast-backward; }
+.#{$fa-css-prefix}-backward:before { content: $fa-var-backward; }
+.#{$fa-css-prefix}-play:before { content: $fa-var-play; }
+.#{$fa-css-prefix}-pause:before { content: $fa-var-pause; }
+.#{$fa-css-prefix}-stop:before { content: $fa-var-stop; }
+.#{$fa-css-prefix}-forward:before { content: $fa-var-forward; }
+.#{$fa-css-prefix}-fast-forward:before { content: $fa-var-fast-forward; }
+.#{$fa-css-prefix}-step-forward:before { content: $fa-var-step-forward; }
+.#{$fa-css-prefix}-eject:before { content: $fa-var-eject; }
+.#{$fa-css-prefix}-chevron-left:before { content: $fa-var-chevron-left; }
+.#{$fa-css-prefix}-chevron-right:before { content: $fa-var-chevron-right; }
+.#{$fa-css-prefix}-plus-circle:before { content: $fa-var-plus-circle; }
+.#{$fa-css-prefix}-minus-circle:before { content: $fa-var-minus-circle; }
+.#{$fa-css-prefix}-times-circle:before { content: $fa-var-times-circle; }
+.#{$fa-css-prefix}-check-circle:before { content: $fa-var-check-circle; }
+.#{$fa-css-prefix}-question-circle:before { content: $fa-var-question-circle; }
+.#{$fa-css-prefix}-info-circle:before { content: $fa-var-info-circle; }
+.#{$fa-css-prefix}-crosshairs:before { content: $fa-var-crosshairs; }
+.#{$fa-css-prefix}-times-circle-o:before { content: $fa-var-times-circle-o; }
+.#{$fa-css-prefix}-check-circle-o:before { content: $fa-var-check-circle-o; }
+.#{$fa-css-prefix}-ban:before { content: $fa-var-ban; }
+.#{$fa-css-prefix}-arrow-left:before { content: $fa-var-arrow-left; }
+.#{$fa-css-prefix}-arrow-right:before { content: $fa-var-arrow-right; }
+.#{$fa-css-prefix}-arrow-up:before { content: $fa-var-arrow-up; }
+.#{$fa-css-prefix}-arrow-down:before { content: $fa-var-arrow-down; }
+.#{$fa-css-prefix}-mail-forward:before,
+.#{$fa-css-prefix}-share:before { content: $fa-var-share; }
+.#{$fa-css-prefix}-expand:before { content: $fa-var-expand; }
+.#{$fa-css-prefix}-compress:before { content: $fa-var-compress; }
+.#{$fa-css-prefix}-plus:before { content: $fa-var-plus; }
+.#{$fa-css-prefix}-minus:before { content: $fa-var-minus; }
+.#{$fa-css-prefix}-asterisk:before { content: $fa-var-asterisk; }
+.#{$fa-css-prefix}-exclamation-circle:before { content: $fa-var-exclamation-circle; }
+.#{$fa-css-prefix}-gift:before { content: $fa-var-gift; }
+.#{$fa-css-prefix}-leaf:before { content: $fa-var-leaf; }
+.#{$fa-css-prefix}-fire:before { content: $fa-var-fire; }
+.#{$fa-css-prefix}-eye:before { content: $fa-var-eye; }
+.#{$fa-css-prefix}-eye-slash:before { content: $fa-var-eye-slash; }
+.#{$fa-css-prefix}-warning:before,
+.#{$fa-css-prefix}-exclamation-triangle:before { content: $fa-var-exclamation-triangle; }
+.#{$fa-css-prefix}-plane:before { content: $fa-var-plane; }
+.#{$fa-css-prefix}-calendar:before { content: $fa-var-calendar; }
+.#{$fa-css-prefix}-random:before { content: $fa-var-random; }
+.#{$fa-css-prefix}-comment:before { content: $fa-var-comment; }
+.#{$fa-css-prefix}-magnet:before { content: $fa-var-magnet; }
+.#{$fa-css-prefix}-chevron-up:before { content: $fa-var-chevron-up; }
+.#{$fa-css-prefix}-chevron-down:before { content: $fa-var-chevron-down; }
+.#{$fa-css-prefix}-retweet:before { content: $fa-var-retweet; }
+.#{$fa-css-prefix}-shopping-cart:before { content: $fa-var-shopping-cart; }
+.#{$fa-css-prefix}-folder:before { content: $fa-var-folder; }
+.#{$fa-css-prefix}-folder-open:before { content: $fa-var-folder-open; }
+.#{$fa-css-prefix}-arrows-v:before { content: $fa-var-arrows-v; }
+.#{$fa-css-prefix}-arrows-h:before { content: $fa-var-arrows-h; }
+.#{$fa-css-prefix}-bar-chart-o:before { content: $fa-var-bar-chart-o; }
+.#{$fa-css-prefix}-twitter-square:before { content: $fa-var-twitter-square; }
+.#{$fa-css-prefix}-facebook-square:before { content: $fa-var-facebook-square; }
+.#{$fa-css-prefix}-camera-retro:before { content: $fa-var-camera-retro; }
+.#{$fa-css-prefix}-key:before { content: $fa-var-key; }
+.#{$fa-css-prefix}-gears:before,
+.#{$fa-css-prefix}-cogs:before { content: $fa-var-cogs; }
+.#{$fa-css-prefix}-comments:before { content: $fa-var-comments; }
+.#{$fa-css-prefix}-thumbs-o-up:before { content: $fa-var-thumbs-o-up; }
+.#{$fa-css-prefix}-thumbs-o-down:before { content: $fa-var-thumbs-o-down; }
+.#{$fa-css-prefix}-star-half:before { content: $fa-var-star-half; }
+.#{$fa-css-prefix}-heart-o:before { content: $fa-var-heart-o; }
+.#{$fa-css-prefix}-sign-out:before { content: $fa-var-sign-out; }
+.#{$fa-css-prefix}-linkedin-square:before { content: $fa-var-linkedin-square; }
+.#{$fa-css-prefix}-thumb-tack:before { content: $fa-var-thumb-tack; }
+.#{$fa-css-prefix}-external-link:before { content: $fa-var-external-link; }
+.#{$fa-css-prefix}-sign-in:before { content: $fa-var-sign-in; }
+.#{$fa-css-prefix}-trophy:before { content: $fa-var-trophy; }
+.#{$fa-css-prefix}-github-square:before { content: $fa-var-github-square; }
+.#{$fa-css-prefix}-upload:before { content: $fa-var-upload; }
+.#{$fa-css-prefix}-lemon-o:before { content: $fa-var-lemon-o; }
+.#{$fa-css-prefix}-phone:before { content: $fa-var-phone; }
+.#{$fa-css-prefix}-square-o:before { content: $fa-var-square-o; }
+.#{$fa-css-prefix}-bookmark-o:before { content: $fa-var-bookmark-o; }
+.#{$fa-css-prefix}-phone-square:before { content: $fa-var-phone-square; }
+.#{$fa-css-prefix}-twitter:before { content: $fa-var-twitter; }
+.#{$fa-css-prefix}-facebook:before { content: $fa-var-facebook; }
+.#{$fa-css-prefix}-github:before { content: $fa-var-github; }
+.#{$fa-css-prefix}-unlock:before { content: $fa-var-unlock; }
+.#{$fa-css-prefix}-credit-card:before { content: $fa-var-credit-card; }
+.#{$fa-css-prefix}-rss:before { content: $fa-var-rss; }
+.#{$fa-css-prefix}-hdd-o:before { content: $fa-var-hdd-o; }
+.#{$fa-css-prefix}-bullhorn:before { content: $fa-var-bullhorn; }
+.#{$fa-css-prefix}-bell:before { content: $fa-var-bell; }
+.#{$fa-css-prefix}-certificate:before { content: $fa-var-certificate; }
+.#{$fa-css-prefix}-hand-o-right:before { content: $fa-var-hand-o-right; }
+.#{$fa-css-prefix}-hand-o-left:before { content: $fa-var-hand-o-left; }
+.#{$fa-css-prefix}-hand-o-up:before { content: $fa-var-hand-o-up; }
+.#{$fa-css-prefix}-hand-o-down:before { content: $fa-var-hand-o-down; }
+.#{$fa-css-prefix}-arrow-circle-left:before { content: $fa-var-arrow-circle-left; }
+.#{$fa-css-prefix}-arrow-circle-right:before { content: $fa-var-arrow-circle-right; }
+.#{$fa-css-prefix}-arrow-circle-up:before { content: $fa-var-arrow-circle-up; }
+.#{$fa-css-prefix}-arrow-circle-down:before { content: $fa-var-arrow-circle-down; }
+.#{$fa-css-prefix}-globe:before { content: $fa-var-globe; }
+.#{$fa-css-prefix}-wrench:before { content: $fa-var-wrench; }
+.#{$fa-css-prefix}-tasks:before { content: $fa-var-tasks; }
+.#{$fa-css-prefix}-filter:before { content: $fa-var-filter; }
+.#{$fa-css-prefix}-briefcase:before { content: $fa-var-briefcase; }
+.#{$fa-css-prefix}-arrows-alt:before { content: $fa-var-arrows-alt; }
+.#{$fa-css-prefix}-group:before,
+.#{$fa-css-prefix}-users:before { content: $fa-var-users; }
+.#{$fa-css-prefix}-chain:before,
+.#{$fa-css-prefix}-link:before { content: $fa-var-link; }
+.#{$fa-css-prefix}-cloud:before { content: $fa-var-cloud; }
+.#{$fa-css-prefix}-flask:before { content: $fa-var-flask; }
+.#{$fa-css-prefix}-cut:before,
+.#{$fa-css-prefix}-scissors:before { content: $fa-var-scissors; }
+.#{$fa-css-prefix}-copy:before,
+.#{$fa-css-prefix}-files-o:before { content: $fa-var-files-o; }
+.#{$fa-css-prefix}-paperclip:before { content: $fa-var-paperclip; }
+.#{$fa-css-prefix}-save:before,
+.#{$fa-css-prefix}-floppy-o:before { content: $fa-var-floppy-o; }
+.#{$fa-css-prefix}-square:before { content: $fa-var-square; }
+.#{$fa-css-prefix}-bars:before { content: $fa-var-bars; }
+.#{$fa-css-prefix}-list-ul:before { content: $fa-var-list-ul; }
+.#{$fa-css-prefix}-list-ol:before { content: $fa-var-list-ol; }
+.#{$fa-css-prefix}-strikethrough:before { content: $fa-var-strikethrough; }
+.#{$fa-css-prefix}-underline:before { content: $fa-var-underline; }
+.#{$fa-css-prefix}-table:before { content: $fa-var-table; }
+.#{$fa-css-prefix}-magic:before { content: $fa-var-magic; }
+.#{$fa-css-prefix}-truck:before { content: $fa-var-truck; }
+.#{$fa-css-prefix}-pinterest:before { content: $fa-var-pinterest; }
+.#{$fa-css-prefix}-pinterest-square:before { content: $fa-var-pinterest-square; }
+.#{$fa-css-prefix}-google-plus-square:before { content: $fa-var-google-plus-square; }
+.#{$fa-css-prefix}-google-plus:before { content: $fa-var-google-plus; }
+.#{$fa-css-prefix}-money:before { content: $fa-var-money; }
+.#{$fa-css-prefix}-caret-down:before { content: $fa-var-caret-down; }
+.#{$fa-css-prefix}-caret-up:before { content: $fa-var-caret-up; }
+.#{$fa-css-prefix}-caret-left:before { content: $fa-var-caret-left; }
+.#{$fa-css-prefix}-caret-right:before { content: $fa-var-caret-right; }
+.#{$fa-css-prefix}-columns:before { content: $fa-var-columns; }
+.#{$fa-css-prefix}-unsorted:before,
+.#{$fa-css-prefix}-sort:before { content: $fa-var-sort; }
+.#{$fa-css-prefix}-sort-down:before,
+.#{$fa-css-prefix}-sort-asc:before { content: $fa-var-sort-asc; }
+.#{$fa-css-prefix}-sort-up:before,
+.#{$fa-css-prefix}-sort-desc:before { content: $fa-var-sort-desc; }
+.#{$fa-css-prefix}-envelope:before { content: $fa-var-envelope; }
+.#{$fa-css-prefix}-linkedin:before { content: $fa-var-linkedin; }
+.#{$fa-css-prefix}-rotate-left:before,
+.#{$fa-css-prefix}-undo:before { content: $fa-var-undo; }
+.#{$fa-css-prefix}-legal:before,
+.#{$fa-css-prefix}-gavel:before { content: $fa-var-gavel; }
+.#{$fa-css-prefix}-dashboard:before,
+.#{$fa-css-prefix}-tachometer:before { content: $fa-var-tachometer; }
+.#{$fa-css-prefix}-comment-o:before { content: $fa-var-comment-o; }
+.#{$fa-css-prefix}-comments-o:before { content: $fa-var-comments-o; }
+.#{$fa-css-prefix}-flash:before,
+.#{$fa-css-prefix}-bolt:before { content: $fa-var-bolt; }
+.#{$fa-css-prefix}-sitemap:before { content: $fa-var-sitemap; }
+.#{$fa-css-prefix}-umbrella:before { content: $fa-var-umbrella; }
+.#{$fa-css-prefix}-paste:before,
+.#{$fa-css-prefix}-clipboard:before { content: $fa-var-clipboard; }
+.#{$fa-css-prefix}-lightbulb-o:before { content: $fa-var-lightbulb-o; }
+.#{$fa-css-prefix}-exchange:before { content: $fa-var-exchange; }
+.#{$fa-css-prefix}-cloud-download:before { content: $fa-var-cloud-download; }
+.#{$fa-css-prefix}-cloud-upload:before { content: $fa-var-cloud-upload; }
+.#{$fa-css-prefix}-user-md:before { content: $fa-var-user-md; }
+.#{$fa-css-prefix}-stethoscope:before { content: $fa-var-stethoscope; }
+.#{$fa-css-prefix}-suitcase:before { content: $fa-var-suitcase; }
+.#{$fa-css-prefix}-bell-o:before { content: $fa-var-bell-o; }
+.#{$fa-css-prefix}-coffee:before { content: $fa-var-coffee; }
+.#{$fa-css-prefix}-cutlery:before { content: $fa-var-cutlery; }
+.#{$fa-css-prefix}-file-text-o:before { content: $fa-var-file-text-o; }
+.#{$fa-css-prefix}-building-o:before { content: $fa-var-building-o; }
+.#{$fa-css-prefix}-hospital-o:before { content: $fa-var-hospital-o; }
+.#{$fa-css-prefix}-ambulance:before { content: $fa-var-ambulance; }
+.#{$fa-css-prefix}-medkit:before { content: $fa-var-medkit; }
+.#{$fa-css-prefix}-fighter-jet:before { content: $fa-var-fighter-jet; }
+.#{$fa-css-prefix}-beer:before { content: $fa-var-beer; }
+.#{$fa-css-prefix}-h-square:before { content: $fa-var-h-square; }
+.#{$fa-css-prefix}-plus-square:before { content: $fa-var-plus-square; }
+.#{$fa-css-prefix}-angle-double-left:before { content: $fa-var-angle-double-left; }
+.#{$fa-css-prefix}-angle-double-right:before { content: $fa-var-angle-double-right; }
+.#{$fa-css-prefix}-angle-double-up:before { content: $fa-var-angle-double-up; }
+.#{$fa-css-prefix}-angle-double-down:before { content: $fa-var-angle-double-down; }
+.#{$fa-css-prefix}-angle-left:before { content: $fa-var-angle-left; }
+.#{$fa-css-prefix}-angle-right:before { content: $fa-var-angle-right; }
+.#{$fa-css-prefix}-angle-up:before { content: $fa-var-angle-up; }
+.#{$fa-css-prefix}-angle-down:before { content: $fa-var-angle-down; }
+.#{$fa-css-prefix}-desktop:before { content: $fa-var-desktop; }
+.#{$fa-css-prefix}-laptop:before { content: $fa-var-laptop; }
+.#{$fa-css-prefix}-tablet:before { content: $fa-var-tablet; }
+.#{$fa-css-prefix}-mobile-phone:before,
+.#{$fa-css-prefix}-mobile:before { content: $fa-var-mobile; }
+.#{$fa-css-prefix}-circle-o:before { content: $fa-var-circle-o; }
+.#{$fa-css-prefix}-quote-left:before { content: $fa-var-quote-left; }
+.#{$fa-css-prefix}-quote-right:before { content: $fa-var-quote-right; }
+.#{$fa-css-prefix}-spinner:before { content: $fa-var-spinner; }
+.#{$fa-css-prefix}-circle:before { content: $fa-var-circle; }
+.#{$fa-css-prefix}-mail-reply:before,
+.#{$fa-css-prefix}-reply:before { content: $fa-var-reply; }
+.#{$fa-css-prefix}-github-alt:before { content: $fa-var-github-alt; }
+.#{$fa-css-prefix}-folder-o:before { content: $fa-var-folder-o; }
+.#{$fa-css-prefix}-folder-open-o:before { content: $fa-var-folder-open-o; }
+.#{$fa-css-prefix}-smile-o:before { content: $fa-var-smile-o; }
+.#{$fa-css-prefix}-frown-o:before { content: $fa-var-frown-o; }
+.#{$fa-css-prefix}-meh-o:before { content: $fa-var-meh-o; }
+.#{$fa-css-prefix}-gamepad:before { content: $fa-var-gamepad; }
+.#{$fa-css-prefix}-keyboard-o:before { content: $fa-var-keyboard-o; }
+.#{$fa-css-prefix}-flag-o:before { content: $fa-var-flag-o; }
+.#{$fa-css-prefix}-flag-checkered:before { content: $fa-var-flag-checkered; }
+.#{$fa-css-prefix}-terminal:before { content: $fa-var-terminal; }
+.#{$fa-css-prefix}-code:before { content: $fa-var-code; }
+.#{$fa-css-prefix}-reply-all:before { content: $fa-var-reply-all; }
+.#{$fa-css-prefix}-mail-reply-all:before { content: $fa-var-mail-reply-all; }
+.#{$fa-css-prefix}-star-half-empty:before,
+.#{$fa-css-prefix}-star-half-full:before,
+.#{$fa-css-prefix}-star-half-o:before { content: $fa-var-star-half-o; }
+.#{$fa-css-prefix}-location-arrow:before { content: $fa-var-location-arrow; }
+.#{$fa-css-prefix}-crop:before { content: $fa-var-crop; }
+.#{$fa-css-prefix}-code-fork:before { content: $fa-var-code-fork; }
+.#{$fa-css-prefix}-unlink:before,
+.#{$fa-css-prefix}-chain-broken:before { content: $fa-var-chain-broken; }
+.#{$fa-css-prefix}-question:before { content: $fa-var-question; }
+.#{$fa-css-prefix}-info:before { content: $fa-var-info; }
+.#{$fa-css-prefix}-exclamation:before { content: $fa-var-exclamation; }
+.#{$fa-css-prefix}-superscript:before { content: $fa-var-superscript; }
+.#{$fa-css-prefix}-subscript:before { content: $fa-var-subscript; }
+.#{$fa-css-prefix}-eraser:before { content: $fa-var-eraser; }
+.#{$fa-css-prefix}-puzzle-piece:before { content: $fa-var-puzzle-piece; }
+.#{$fa-css-prefix}-microphone:before { content: $fa-var-microphone; }
+.#{$fa-css-prefix}-microphone-slash:before { content: $fa-var-microphone-slash; }
+.#{$fa-css-prefix}-shield:before { content: $fa-var-shield; }
+.#{$fa-css-prefix}-calendar-o:before { content: $fa-var-calendar-o; }
+.#{$fa-css-prefix}-fire-extinguisher:before { content: $fa-var-fire-extinguisher; }
+.#{$fa-css-prefix}-rocket:before { content: $fa-var-rocket; }
+.#{$fa-css-prefix}-maxcdn:before { content: $fa-var-maxcdn; }
+.#{$fa-css-prefix}-chevron-circle-left:before { content: $fa-var-chevron-circle-left; }
+.#{$fa-css-prefix}-chevron-circle-right:before { content: $fa-var-chevron-circle-right; }
+.#{$fa-css-prefix}-chevron-circle-up:before { content: $fa-var-chevron-circle-up; }
+.#{$fa-css-prefix}-chevron-circle-down:before { content: $fa-var-chevron-circle-down; }
+.#{$fa-css-prefix}-html5:before { content: $fa-var-html5; }
+.#{$fa-css-prefix}-css3:before { content: $fa-var-css3; }
+.#{$fa-css-prefix}-anchor:before { content: $fa-var-anchor; }
+.#{$fa-css-prefix}-unlock-alt:before { content: $fa-var-unlock-alt; }
+.#{$fa-css-prefix}-bullseye:before { content: $fa-var-bullseye; }
+.#{$fa-css-prefix}-ellipsis-h:before { content: $fa-var-ellipsis-h; }
+.#{$fa-css-prefix}-ellipsis-v:before { content: $fa-var-ellipsis-v; }
+.#{$fa-css-prefix}-rss-square:before { content: $fa-var-rss-square; }
+.#{$fa-css-prefix}-play-circle:before { content: $fa-var-play-circle; }
+.#{$fa-css-prefix}-ticket:before { content: $fa-var-ticket; }
+.#{$fa-css-prefix}-minus-square:before { content: $fa-var-minus-square; }
+.#{$fa-css-prefix}-minus-square-o:before { content: $fa-var-minus-square-o; }
+.#{$fa-css-prefix}-level-up:before { content: $fa-var-level-up; }
+.#{$fa-css-prefix}-level-down:before { content: $fa-var-level-down; }
+.#{$fa-css-prefix}-check-square:before { content: $fa-var-check-square; }
+.#{$fa-css-prefix}-pencil-square:before { content: $fa-var-pencil-square; }
+.#{$fa-css-prefix}-external-link-square:before { content: $fa-var-external-link-square; }
+.#{$fa-css-prefix}-share-square:before { content: $fa-var-share-square; }
+.#{$fa-css-prefix}-compass:before { content: $fa-var-compass; }
+.#{$fa-css-prefix}-toggle-down:before,
+.#{$fa-css-prefix}-caret-square-o-down:before { content: $fa-var-caret-square-o-down; }
+.#{$fa-css-prefix}-toggle-up:before,
+.#{$fa-css-prefix}-caret-square-o-up:before { content: $fa-var-caret-square-o-up; }
+.#{$fa-css-prefix}-toggle-right:before,
+.#{$fa-css-prefix}-caret-square-o-right:before { content: $fa-var-caret-square-o-right; }
+.#{$fa-css-prefix}-euro:before,
+.#{$fa-css-prefix}-eur:before { content: $fa-var-eur; }
+.#{$fa-css-prefix}-gbp:before { content: $fa-var-gbp; }
+.#{$fa-css-prefix}-dollar:before,
+.#{$fa-css-prefix}-usd:before { content: $fa-var-usd; }
+.#{$fa-css-prefix}-rupee:before,
+.#{$fa-css-prefix}-inr:before { content: $fa-var-inr; }
+.#{$fa-css-prefix}-cny:before,
+.#{$fa-css-prefix}-rmb:before,
+.#{$fa-css-prefix}-yen:before,
+.#{$fa-css-prefix}-jpy:before { content: $fa-var-jpy; }
+.#{$fa-css-prefix}-ruble:before,
+.#{$fa-css-prefix}-rouble:before,
+.#{$fa-css-prefix}-rub:before { content: $fa-var-rub; }
+.#{$fa-css-prefix}-won:before,
+.#{$fa-css-prefix}-krw:before { content: $fa-var-krw; }
+.#{$fa-css-prefix}-bitcoin:before,
+.#{$fa-css-prefix}-btc:before { content: $fa-var-btc; }
+.#{$fa-css-prefix}-file:before { content: $fa-var-file; }
+.#{$fa-css-prefix}-file-text:before { content: $fa-var-file-text; }
+.#{$fa-css-prefix}-sort-alpha-asc:before { content: $fa-var-sort-alpha-asc; }
+.#{$fa-css-prefix}-sort-alpha-desc:before { content: $fa-var-sort-alpha-desc; }
+.#{$fa-css-prefix}-sort-amount-asc:before { content: $fa-var-sort-amount-asc; }
+.#{$fa-css-prefix}-sort-amount-desc:before { content: $fa-var-sort-amount-desc; }
+.#{$fa-css-prefix}-sort-numeric-asc:before { content: $fa-var-sort-numeric-asc; }
+.#{$fa-css-prefix}-sort-numeric-desc:before { content: $fa-var-sort-numeric-desc; }
+.#{$fa-css-prefix}-thumbs-up:before { content: $fa-var-thumbs-up; }
+.#{$fa-css-prefix}-thumbs-down:before { content: $fa-var-thumbs-down; }
+.#{$fa-css-prefix}-youtube-square:before { content: $fa-var-youtube-square; }
+.#{$fa-css-prefix}-youtube:before { content: $fa-var-youtube; }
+.#{$fa-css-prefix}-xing:before { content: $fa-var-xing; }
+.#{$fa-css-prefix}-xing-square:before { content: $fa-var-xing-square; }
+.#{$fa-css-prefix}-youtube-play:before { content: $fa-var-youtube-play; }
+.#{$fa-css-prefix}-dropbox:before { content: $fa-var-dropbox; }
+.#{$fa-css-prefix}-stack-overflow:before { content: $fa-var-stack-overflow; }
+.#{$fa-css-prefix}-instagram:before { content: $fa-var-instagram; }
+.#{$fa-css-prefix}-flickr:before { content: $fa-var-flickr; }
+.#{$fa-css-prefix}-adn:before { content: $fa-var-adn; }
+.#{$fa-css-prefix}-bitbucket:before { content: $fa-var-bitbucket; }
+.#{$fa-css-prefix}-bitbucket-square:before { content: $fa-var-bitbucket-square; }
+.#{$fa-css-prefix}-tumblr:before { content: $fa-var-tumblr; }
+.#{$fa-css-prefix}-tumblr-square:before { content: $fa-var-tumblr-square; }
+.#{$fa-css-prefix}-long-arrow-down:before { content: $fa-var-long-arrow-down; }
+.#{$fa-css-prefix}-long-arrow-up:before { content: $fa-var-long-arrow-up; }
+.#{$fa-css-prefix}-long-arrow-left:before { content: $fa-var-long-arrow-left; }
+.#{$fa-css-prefix}-long-arrow-right:before { content: $fa-var-long-arrow-right; }
+.#{$fa-css-prefix}-apple:before { content: $fa-var-apple; }
+.#{$fa-css-prefix}-windows:before { content: $fa-var-windows; }
+.#{$fa-css-prefix}-android:before { content: $fa-var-android; }
+.#{$fa-css-prefix}-linux:before { content: $fa-var-linux; }
+.#{$fa-css-prefix}-dribbble:before { content: $fa-var-dribbble; }
+.#{$fa-css-prefix}-skype:before { content: $fa-var-skype; }
+.#{$fa-css-prefix}-foursquare:before { content: $fa-var-foursquare; }
+.#{$fa-css-prefix}-trello:before { content: $fa-var-trello; }
+.#{$fa-css-prefix}-female:before { content: $fa-var-female; }
+.#{$fa-css-prefix}-male:before { content: $fa-var-male; }
+.#{$fa-css-prefix}-gittip:before { content: $fa-var-gittip; }
+.#{$fa-css-prefix}-sun-o:before { content: $fa-var-sun-o; }
+.#{$fa-css-prefix}-moon-o:before { content: $fa-var-moon-o; }
+.#{$fa-css-prefix}-archive:before { content: $fa-var-archive; }
+.#{$fa-css-prefix}-bug:before { content: $fa-var-bug; }
+.#{$fa-css-prefix}-vk:before { content: $fa-var-vk; }
+.#{$fa-css-prefix}-weibo:before { content: $fa-var-weibo; }
+.#{$fa-css-prefix}-renren:before { content: $fa-var-renren; }
+.#{$fa-css-prefix}-pagelines:before { content: $fa-var-pagelines; }
+.#{$fa-css-prefix}-stack-exchange:before { content: $fa-var-stack-exchange; }
+.#{$fa-css-prefix}-arrow-circle-o-right:before { content: $fa-var-arrow-circle-o-right; }
+.#{$fa-css-prefix}-arrow-circle-o-left:before { content: $fa-var-arrow-circle-o-left; }
+.#{$fa-css-prefix}-toggle-left:before,
+.#{$fa-css-prefix}-caret-square-o-left:before { content: $fa-var-caret-square-o-left; }
+.#{$fa-css-prefix}-dot-circle-o:before { content: $fa-var-dot-circle-o; }
+.#{$fa-css-prefix}-wheelchair:before { content: $fa-var-wheelchair; }
+.#{$fa-css-prefix}-vimeo-square:before { content: $fa-var-vimeo-square; }
+.#{$fa-css-prefix}-turkish-lira:before,
+.#{$fa-css-prefix}-try:before { content: $fa-var-try; }
+.#{$fa-css-prefix}-plus-square-o:before { content: $fa-var-plus-square-o; }
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_larger.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_larger.scss
new file mode 100644
index 0000000000..41e9a8184a
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_larger.scss
@@ -0,0 +1,13 @@
+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.#{$fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.#{$fa-css-prefix}-2x { font-size: 2em; }
+.#{$fa-css-prefix}-3x { font-size: 3em; }
+.#{$fa-css-prefix}-4x { font-size: 4em; }
+.#{$fa-css-prefix}-5x { font-size: 5em; }
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_list.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_list.scss
new file mode 100644
index 0000000000..7d1e4d54d6
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_list.scss
@@ -0,0 +1,19 @@
+// List Icons
+// -------------------------
+
+.#{$fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: $fa-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.#{$fa-css-prefix}-li {
+  position: absolute;
+  left: -$fa-li-width;
+  width: $fa-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.#{$fa-css-prefix}-lg {
+    left: -$fa-li-width + (4em / 14);
+  }
+}
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_mixins.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_mixins.scss
new file mode 100644
index 0000000000..9f555963f8
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_mixins.scss
@@ -0,0 +1,20 @@
+// Mixins
+// --------------------------
+
+@mixin fa-icon-rotate($degrees, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
+  -webkit-transform: rotate($degrees);
+     -moz-transform: rotate($degrees);
+      -ms-transform: rotate($degrees);
+       -o-transform: rotate($degrees);
+          transform: rotate($degrees);
+}
+
+@mixin fa-icon-flip($horiz, $vert, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
+  -webkit-transform: scale($horiz, $vert);
+     -moz-transform: scale($horiz, $vert);
+      -ms-transform: scale($horiz, $vert);
+       -o-transform: scale($horiz, $vert);
+          transform: scale($horiz, $vert);
+}
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_path.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_path.scss
new file mode 100644
index 0000000000..fd21c3515e
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_path.scss
@@ -0,0 +1,14 @@
+/* FONT PATH
+ * -------------------------- */
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
+    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
+    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
+    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+  //src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_rotated-flipped.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_rotated-flipped.scss
new file mode 100644
index 0000000000..343fa5507b
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_rotated-flipped.scss
@@ -0,0 +1,9 @@
+// Rotated & Flipped Icons
+// -------------------------
+
+.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
+.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
+.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
+
+.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
+.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_spinning.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_spinning.scss
new file mode 100644
index 0000000000..ba1e4f1623
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_spinning.scss
@@ -0,0 +1,30 @@
+// Spinning Icons
+// --------------------------
+
+.#{$fa-css-prefix}-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); }
+}
+@-ms-keyframes spin {
+  0% { -ms-transform: rotate(0deg); }
+  100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_stacked.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_stacked.scss
new file mode 100644
index 0000000000..aef7403660
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_stacked.scss
@@ -0,0 +1,20 @@
+// Stacked Icons
+// -------------------------
+
+.#{$fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.#{$fa-css-prefix}-stack-1x { line-height: inherit; }
+.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
+.#{$fa-css-prefix}-inverse { color: $fa-inverse; }
diff --git a/js/apps/system/aardvark/frontend/scss/font-awesome/_variables.scss b/js/apps/system/aardvark/frontend/scss/font-awesome/_variables.scss
new file mode 100644
index 0000000000..2d6e076a70
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/font-awesome/_variables.scss
@@ -0,0 +1,381 @@
+// Variables
+// --------------------------
+
+$fa-font-path:        "../fonts" !default;
+//$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts" !default; // for referencing Bootstrap CDN font files directly
+$fa-css-prefix:       fa !default;
+$fa-version:          "4.0.3" !default;
+$fa-border-color:     #eee !default;
+$fa-inverse:          #fff !default;
+$fa-li-width:        (30em / 14) !default;
+
+$fa-var-glass: "\f000";
+$fa-var-music: "\f001";
+$fa-var-search: "\f002";
+$fa-var-envelope-o: "\f003";
+$fa-var-heart: "\f004";
+$fa-var-star: "\f005";
+$fa-var-star-o: "\f006";
+$fa-var-user: "\f007";
+$fa-var-film: "\f008";
+$fa-var-th-large: "\f009";
+$fa-var-th: "\f00a";
+$fa-var-th-list: "\f00b";
+$fa-var-check: "\f00c";
+$fa-var-times: "\f00d";
+$fa-var-search-plus: "\f00e";
+$fa-var-search-minus: "\f010";
+$fa-var-power-off: "\f011";
+$fa-var-signal: "\f012";
+$fa-var-cog: "\f013";
+$fa-var-trash-o: "\f014";
+$fa-var-home: "\f015";
+$fa-var-file-o: "\f016";
+$fa-var-clock-o: "\f017";
+$fa-var-road: "\f018";
+$fa-var-download: "\f019";
+$fa-var-arrow-circle-o-down: "\f01a";
+$fa-var-arrow-circle-o-up: "\f01b";
+$fa-var-inbox: "\f01c";
+$fa-var-play-circle-o: "\f01d";
+$fa-var-repeat: "\f01e";
+$fa-var-refresh: "\f021";
+$fa-var-list-alt: "\f022";
+$fa-var-lock: "\f023";
+$fa-var-flag: "\f024";
+$fa-var-headphones: "\f025";
+$fa-var-volume-off: "\f026";
+$fa-var-volume-down: "\f027";
+$fa-var-volume-up: "\f028";
+$fa-var-qrcode: "\f029";
+$fa-var-barcode: "\f02a";
+$fa-var-tag: "\f02b";
+$fa-var-tags: "\f02c";
+$fa-var-book: "\f02d";
+$fa-var-bookmark: "\f02e";
+$fa-var-print: "\f02f";
+$fa-var-camera: "\f030";
+$fa-var-font: "\f031";
+$fa-var-bold: "\f032";
+$fa-var-italic: "\f033";
+$fa-var-text-height: "\f034";
+$fa-var-text-width: "\f035";
+$fa-var-align-left: "\f036";
+$fa-var-align-center: "\f037";
+$fa-var-align-right: "\f038";
+$fa-var-align-justify: "\f039";
+$fa-var-list: "\f03a";
+$fa-var-outdent: "\f03b";
+$fa-var-indent: "\f03c";
+$fa-var-video-camera: "\f03d";
+$fa-var-picture-o: "\f03e";
+$fa-var-pencil: "\f040";
+$fa-var-map-marker: "\f041";
+$fa-var-adjust: "\f042";
+$fa-var-tint: "\f043";
+$fa-var-pencil-square-o: "\f044";
+$fa-var-share-square-o: "\f045";
+$fa-var-check-square-o: "\f046";
+$fa-var-arrows: "\f047";
+$fa-var-step-backward: "\f048";
+$fa-var-fast-backward: "\f049";
+$fa-var-backward: "\f04a";
+$fa-var-play: "\f04b";
+$fa-var-pause: "\f04c";
+$fa-var-stop: "\f04d";
+$fa-var-forward: "\f04e";
+$fa-var-fast-forward: "\f050";
+$fa-var-step-forward: "\f051";
+$fa-var-eject: "\f052";
+$fa-var-chevron-left: "\f053";
+$fa-var-chevron-right: "\f054";
+$fa-var-plus-circle: "\f055";
+$fa-var-minus-circle: "\f056";
+$fa-var-times-circle: "\f057";
+$fa-var-check-circle: "\f058";
+$fa-var-question-circle: "\f059";
+$fa-var-info-circle: "\f05a";
+$fa-var-crosshairs: "\f05b";
+$fa-var-times-circle-o: "\f05c";
+$fa-var-check-circle-o: "\f05d";
+$fa-var-ban: "\f05e";
+$fa-var-arrow-left: "\f060";
+$fa-var-arrow-right: "\f061";
+$fa-var-arrow-up: "\f062";
+$fa-var-arrow-down: "\f063";
+$fa-var-share: "\f064";
+$fa-var-expand: "\f065";
+$fa-var-compress: "\f066";
+$fa-var-plus: "\f067";
+$fa-var-minus: "\f068";
+$fa-var-asterisk: "\f069";
+$fa-var-exclamation-circle: "\f06a";
+$fa-var-gift: "\f06b";
+$fa-var-leaf: "\f06c";
+$fa-var-fire: "\f06d";
+$fa-var-eye: "\f06e";
+$fa-var-eye-slash: "\f070";
+$fa-var-exclamation-triangle: "\f071";
+$fa-var-plane: "\f072";
+$fa-var-calendar: "\f073";
+$fa-var-random: "\f074";
+$fa-var-comment: "\f075";
+$fa-var-magnet: "\f076";
+$fa-var-chevron-up: "\f077";
+$fa-var-chevron-down: "\f078";
+$fa-var-retweet: "\f079";
+$fa-var-shopping-cart: "\f07a";
+$fa-var-folder: "\f07b";
+$fa-var-folder-open: "\f07c";
+$fa-var-arrows-v: "\f07d";
+$fa-var-arrows-h: "\f07e";
+$fa-var-bar-chart-o: "\f080";
+$fa-var-twitter-square: "\f081";
+$fa-var-facebook-square: "\f082";
+$fa-var-camera-retro: "\f083";
+$fa-var-key: "\f084";
+$fa-var-cogs: "\f085";
+$fa-var-comments: "\f086";
+$fa-var-thumbs-o-up: "\f087";
+$fa-var-thumbs-o-down: "\f088";
+$fa-var-star-half: "\f089";
+$fa-var-heart-o: "\f08a";
+$fa-var-sign-out: "\f08b";
+$fa-var-linkedin-square: "\f08c";
+$fa-var-thumb-tack: "\f08d";
+$fa-var-external-link: "\f08e";
+$fa-var-sign-in: "\f090";
+$fa-var-trophy: "\f091";
+$fa-var-github-square: "\f092";
+$fa-var-upload: "\f093";
+$fa-var-lemon-o: "\f094";
+$fa-var-phone: "\f095";
+$fa-var-square-o: "\f096";
+$fa-var-bookmark-o: "\f097";
+$fa-var-phone-square: "\f098";
+$fa-var-twitter: "\f099";
+$fa-var-facebook: "\f09a";
+$fa-var-github: "\f09b";
+$fa-var-unlock: "\f09c";
+$fa-var-credit-card: "\f09d";
+$fa-var-rss: "\f09e";
+$fa-var-hdd-o: "\f0a0";
+$fa-var-bullhorn: "\f0a1";
+$fa-var-bell: "\f0f3";
+$fa-var-certificate: "\f0a3";
+$fa-var-hand-o-right: "\f0a4";
+$fa-var-hand-o-left: "\f0a5";
+$fa-var-hand-o-up: "\f0a6";
+$fa-var-hand-o-down: "\f0a7";
+$fa-var-arrow-circle-left: "\f0a8";
+$fa-var-arrow-circle-right: "\f0a9";
+$fa-var-arrow-circle-up: "\f0aa";
+$fa-var-arrow-circle-down: "\f0ab";
+$fa-var-globe: "\f0ac";
+$fa-var-wrench: "\f0ad";
+$fa-var-tasks: "\f0ae";
+$fa-var-filter: "\f0b0";
+$fa-var-briefcase: "\f0b1";
+$fa-var-arrows-alt: "\f0b2";
+$fa-var-users: "\f0c0";
+$fa-var-link: "\f0c1";
+$fa-var-cloud: "\f0c2";
+$fa-var-flask: "\f0c3";
+$fa-var-scissors: "\f0c4";
+$fa-var-files-o: "\f0c5";
+$fa-var-paperclip: "\f0c6";
+$fa-var-floppy-o: "\f0c7";
+$fa-var-square: "\f0c8";
+$fa-var-bars: "\f0c9";
+$fa-var-list-ul: "\f0ca";
+$fa-var-list-ol: "\f0cb";
+$fa-var-strikethrough: "\f0cc";
+$fa-var-underline: "\f0cd";
+$fa-var-table: "\f0ce";
+$fa-var-magic: "\f0d0";
+$fa-var-truck: "\f0d1";
+$fa-var-pinterest: "\f0d2";
+$fa-var-pinterest-square: "\f0d3";
+$fa-var-google-plus-square: "\f0d4";
+$fa-var-google-plus: "\f0d5";
+$fa-var-money: "\f0d6";
+$fa-var-caret-down: "\f0d7";
+$fa-var-caret-up: "\f0d8";
+$fa-var-caret-left: "\f0d9";
+$fa-var-caret-right: "\f0da";
+$fa-var-columns: "\f0db";
+$fa-var-sort: "\f0dc";
+$fa-var-sort-asc: "\f0dd";
+$fa-var-sort-desc: "\f0de";
+$fa-var-envelope: "\f0e0";
+$fa-var-linkedin: "\f0e1";
+$fa-var-undo: "\f0e2";
+$fa-var-gavel: "\f0e3";
+$fa-var-tachometer: "\f0e4";
+$fa-var-comment-o: "\f0e5";
+$fa-var-comments-o: "\f0e6";
+$fa-var-bolt: "\f0e7";
+$fa-var-sitemap: "\f0e8";
+$fa-var-umbrella: "\f0e9";
+$fa-var-clipboard: "\f0ea";
+$fa-var-lightbulb-o: "\f0eb";
+$fa-var-exchange: "\f0ec";
+$fa-var-cloud-download: "\f0ed";
+$fa-var-cloud-upload: "\f0ee";
+$fa-var-user-md: "\f0f0";
+$fa-var-stethoscope: "\f0f1";
+$fa-var-suitcase: "\f0f2";
+$fa-var-bell-o: "\f0a2";
+$fa-var-coffee: "\f0f4";
+$fa-var-cutlery: "\f0f5";
+$fa-var-file-text-o: "\f0f6";
+$fa-var-building-o: "\f0f7";
+$fa-var-hospital-o: "\f0f8";
+$fa-var-ambulance: "\f0f9";
+$fa-var-medkit: "\f0fa";
+$fa-var-fighter-jet: "\f0fb";
+$fa-var-beer: "\f0fc";
+$fa-var-h-square: "\f0fd";
+$fa-var-plus-square: "\f0fe";
+$fa-var-angle-double-left: "\f100";
+$fa-var-angle-double-right: "\f101";
+$fa-var-angle-double-up: "\f102";
+$fa-var-angle-double-down: "\f103";
+$fa-var-angle-left: "\f104";
+$fa-var-angle-right: "\f105";
+$fa-var-angle-up: "\f106";
+$fa-var-angle-down: "\f107";
+$fa-var-desktop: "\f108";
+$fa-var-laptop: "\f109";
+$fa-var-tablet: "\f10a";
+$fa-var-mobile: "\f10b";
+$fa-var-circle-o: "\f10c";
+$fa-var-quote-left: "\f10d";
+$fa-var-quote-right: "\f10e";
+$fa-var-spinner: "\f110";
+$fa-var-circle: "\f111";
+$fa-var-reply: "\f112";
+$fa-var-github-alt: "\f113";
+$fa-var-folder-o: "\f114";
+$fa-var-folder-open-o: "\f115";
+$fa-var-smile-o: "\f118";
+$fa-var-frown-o: "\f119";
+$fa-var-meh-o: "\f11a";
+$fa-var-gamepad: "\f11b";
+$fa-var-keyboard-o: "\f11c";
+$fa-var-flag-o: "\f11d";
+$fa-var-flag-checkered: "\f11e";
+$fa-var-terminal: "\f120";
+$fa-var-code: "\f121";
+$fa-var-reply-all: "\f122";
+$fa-var-mail-reply-all: "\f122";
+$fa-var-star-half-o: "\f123";
+$fa-var-location-arrow: "\f124";
+$fa-var-crop: "\f125";
+$fa-var-code-fork: "\f126";
+$fa-var-chain-broken: "\f127";
+$fa-var-question: "\f128";
+$fa-var-info: "\f129";
+$fa-var-exclamation: "\f12a";
+$fa-var-superscript: "\f12b";
+$fa-var-subscript: "\f12c";
+$fa-var-eraser: "\f12d";
+$fa-var-puzzle-piece: "\f12e";
+$fa-var-microphone: "\f130";
+$fa-var-microphone-slash: "\f131";
+$fa-var-shield: "\f132";
+$fa-var-calendar-o: "\f133";
+$fa-var-fire-extinguisher: "\f134";
+$fa-var-rocket: "\f135";
+$fa-var-maxcdn: "\f136";
+$fa-var-chevron-circle-left: "\f137";
+$fa-var-chevron-circle-right: "\f138";
+$fa-var-chevron-circle-up: "\f139";
+$fa-var-chevron-circle-down: "\f13a";
+$fa-var-html5: "\f13b";
+$fa-var-css3: "\f13c";
+$fa-var-anchor: "\f13d";
+$fa-var-unlock-alt: "\f13e";
+$fa-var-bullseye: "\f140";
+$fa-var-ellipsis-h: "\f141";
+$fa-var-ellipsis-v: "\f142";
+$fa-var-rss-square: "\f143";
+$fa-var-play-circle: "\f144";
+$fa-var-ticket: "\f145";
+$fa-var-minus-square: "\f146";
+$fa-var-minus-square-o: "\f147";
+$fa-var-level-up: "\f148";
+$fa-var-level-down: "\f149";
+$fa-var-check-square: "\f14a";
+$fa-var-pencil-square: "\f14b";
+$fa-var-external-link-square: "\f14c";
+$fa-var-share-square: "\f14d";
+$fa-var-compass: "\f14e";
+$fa-var-caret-square-o-down: "\f150";
+$fa-var-caret-square-o-up: "\f151";
+$fa-var-caret-square-o-right: "\f152";
+$fa-var-eur: "\f153";
+$fa-var-gbp: "\f154";
+$fa-var-usd: "\f155";
+$fa-var-inr: "\f156";
+$fa-var-jpy: "\f157";
+$fa-var-rub: "\f158";
+$fa-var-krw: "\f159";
+$fa-var-btc: "\f15a";
+$fa-var-file: "\f15b";
+$fa-var-file-text: "\f15c";
+$fa-var-sort-alpha-asc: "\f15d";
+$fa-var-sort-alpha-desc: "\f15e";
+$fa-var-sort-amount-asc: "\f160";
+$fa-var-sort-amount-desc: "\f161";
+$fa-var-sort-numeric-asc: "\f162";
+$fa-var-sort-numeric-desc: "\f163";
+$fa-var-thumbs-up: "\f164";
+$fa-var-thumbs-down: "\f165";
+$fa-var-youtube-square: "\f166";
+$fa-var-youtube: "\f167";
+$fa-var-xing: "\f168";
+$fa-var-xing-square: "\f169";
+$fa-var-youtube-play: "\f16a";
+$fa-var-dropbox: "\f16b";
+$fa-var-stack-overflow: "\f16c";
+$fa-var-instagram: "\f16d";
+$fa-var-flickr: "\f16e";
+$fa-var-adn: "\f170";
+$fa-var-bitbucket: "\f171";
+$fa-var-bitbucket-square: "\f172";
+$fa-var-tumblr: "\f173";
+$fa-var-tumblr-square: "\f174";
+$fa-var-long-arrow-down: "\f175";
+$fa-var-long-arrow-up: "\f176";
+$fa-var-long-arrow-left: "\f177";
+$fa-var-long-arrow-right: "\f178";
+$fa-var-apple: "\f179";
+$fa-var-windows: "\f17a";
+$fa-var-android: "\f17b";
+$fa-var-linux: "\f17c";
+$fa-var-dribbble: "\f17d";
+$fa-var-skype: "\f17e";
+$fa-var-foursquare: "\f180";
+$fa-var-trello: "\f181";
+$fa-var-female: "\f182";
+$fa-var-male: "\f183";
+$fa-var-gittip: "\f184";
+$fa-var-sun-o: "\f185";
+$fa-var-moon-o: "\f186";
+$fa-var-archive: "\f187";
+$fa-var-bug: "\f188";
+$fa-var-vk: "\f189";
+$fa-var-weibo: "\f18a";
+$fa-var-renren: "\f18b";
+$fa-var-pagelines: "\f18c";
+$fa-var-stack-exchange: "\f18d";
+$fa-var-arrow-circle-o-right: "\f18e";
+$fa-var-arrow-circle-o-left: "\f190";
+$fa-var-caret-square-o-left: "\f191";
+$fa-var-dot-circle-o: "\f192";
+$fa-var-wheelchair: "\f193";
+$fa-var-vimeo-square: "\f194";
+$fa-var-try: "\f195";
+$fa-var-plus-square-o: "\f196";
+
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index a91858c6fe..cf986e5f8b 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -36,6 +36,1329 @@ textarea,
   font-style: italic;
   font-weight: 700;
   src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("../fonts/opensans/OpenSansBoldItalic.woff") format("woff"); }
+/*!
+ *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+/* FONT PATH
+ * -------------------------- */
+@font-face {
+  font-family: 'FontAwesome';
+  src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
+  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.0.3#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; }
+
+/* makes the font 33% larger relative to the icon container */
+.fa-lg {
+  font-size: 1.33333em;
+  line-height: 0.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.28571em;
+  text-align: center; }
+
+.fa-ul {
+  padding-left: 0;
+  margin-left: 2.14286em;
+  list-style-type: none; }
+  .fa-ul > li {
+    position: relative; }
+
+.fa-li {
+  position: absolute;
+  left: -2.14286em;
+  width: 2.14286em;
+  top: 0.14286em;
+  text-align: center; }
+  .fa-li.fa-lg {
+    left: -1.85714em; }
+
+.fa-border {
+  padding: .2em .25em .15em;
+  border: solid 0.08em #eeeeee;
+  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); } }
+@-ms-keyframes spin {
+  0% {
+    -ms-transform: rotate(0deg); }
+
+  100% {
+    -ms-transform: rotate(359deg); } }
+@keyframes spin {
+  0% {
+    transform: rotate(0deg); }
+
+  100% {
+    transform: rotate(359deg); } }
+.fa-rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
+  -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=$rotation);
+  -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=$rotation);
+  -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=$rotation);
+  -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=$rotation);
+  -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: white; }
+
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
+.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-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-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-asc:before {
+  content: "\f0dd"; }
+
+.fa-sort-up:before,
+.fa-sort-desc: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-reply-all:before {
+  content: "\f122"; }
+
+.fa-mail-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"; }
+
 ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div.tile, div.bigtile, div.tile a span.add-Icon, div.bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboardModal, .pagination-line li a {
   float: left; }
 
diff --git a/js/apps/system/aardvark/manifest.json b/js/apps/system/aardvark/manifest.json
index dec1edf374..b2f4bb31c7 100644
--- a/js/apps/system/aardvark/manifest.json
+++ b/js/apps/system/aardvark/manifest.json
@@ -120,7 +120,6 @@
         "frontend/css/swagger/hightlight.default.css",
         "frontend/css/bootstrap.css",
         "frontend/css/arangodbIcons.css",
-        "frontend/css/font-awesome.css",
         "frontend/css/bootstrap-glyphicons.css",
         "frontend/css/jquery-ui-1.9.2.custom.css",
         "frontend/css/jquery.contextmenu.css",

From 9603efa7cb1471d0c29172438be769ef7a150c88 Mon Sep 17 00:00:00 2001
From: scottashton <f.bartels@triagens.de>
Date: Wed, 19 Mar 2014 17:27:13 +0100
Subject: [PATCH 08/11] got rid of api.css

---
 js/apps/system/aardvark/frontend/css/api.css  | 81 ------------------
 .../aardvark/frontend/scss/_colors.scss       |  3 +
 .../system/aardvark/frontend/scss/api.scss    | 82 +++++++++++++++++++
 .../aardvark/frontend/scss/generated.css      | 53 ++++++++++++
 .../system/aardvark/frontend/scss/style.scss  |  2 +
 js/apps/system/aardvark/manifest.json         |  1 -
 6 files changed, 140 insertions(+), 82 deletions(-)
 delete mode 100644 js/apps/system/aardvark/frontend/css/api.css
 create mode 100644 js/apps/system/aardvark/frontend/scss/api.scss

diff --git a/js/apps/system/aardvark/frontend/css/api.css b/js/apps/system/aardvark/frontend/css/api.css
deleted file mode 100644
index 46f9f4e5cd..0000000000
--- a/js/apps/system/aardvark/frontend/css/api.css
+++ /dev/null
@@ -1,81 +0,0 @@
-.swagger-ui-wrap ul#resources li.resource {
-  background-color: #F4F3F3;
-}
-
-.api-actions {
-  margin: 0 !important;
-  padding: 0;
-}
-
-.api-actions .container {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  margin-left: 5px !important;
-  margin-right: 5px !important;
-  padding-top: 13px !important;
-  padding-bottom: 10px !important;
-}
-
-.api-actions .resource {
-  padding-left: 5px !important;
-  border-bottom: 0 !important;
-}
-
-.api-actions .resource .heading h2 a {
-  color: #000000 !important;
-  font-weight: 300 !important;
-}
-
-.api-actions .active .heading h2 a {
-  color: #000000 !important;
-}
-
-.api-actions .endpoints {
-  margin-right: 5px !important;  
-}
-
-.api-actions .endpoints .endpoint:last-child {
-  padding-bottom: 5px !important;
-}
-
-.api-actions .endpoint .operations .heading,
-.api-actions .endpoint .operations .content {
-  border-radius: 0 !important;
-  font-weight: 300 !important;
-}
-
-.api-actions .endpoint .operations .content {
-  margin: 0 !important;
-}
-
-.api-actions .endpoint .operations .content h4 {
-  font-weight: 700 !important;
-}
-
-.api-actions .toggleOperation,
-.api-actions .http_method {
-  border-radius: 0 !important;
-}
-
-.api-actions .required, 
-.api-actions em,
-.api-actions strong {
-  font-weight: 400 !important;
-}
-
-.api-actions input[type="button"] {
-  background: none repeat scroll 0 0 #8F8D8C !important;
-  border: medium none !important;
-  box-shadow: none !important;
-  color: #FFFFFF !important;
-  font-size: 14px !important;
-  font-weight: 300 !important;
-  padding: 8px 16px !important;
-  float: right !important;
-  margin-top: 10px !important;
-}
-
-.api-actions .resource > .heading > .options {
-  margin: 11px 10px 0 0 !important;
-}
-
diff --git a/js/apps/system/aardvark/frontend/scss/_colors.scss b/js/apps/system/aardvark/frontend/scss/_colors.scss
index cb7a6ccbb6..cf79a9ac42 100644
--- a/js/apps/system/aardvark/frontend/scss/_colors.scss
+++ b/js/apps/system/aardvark/frontend/scss/_colors.scss
@@ -104,3 +104,6 @@ $c-pag-disabled-bg: #777;
 $c-accordion-heading: #ccc;
 
 $c-icon-with-opacity: #333;
+
+$c-api-docs-bg: #f4f3f3;
+$c-api-docs-bg-input: #8f8d8c;
\ No newline at end of file
diff --git a/js/apps/system/aardvark/frontend/scss/api.scss b/js/apps/system/aardvark/frontend/scss/api.scss
new file mode 100644
index 0000000000..04a15b4b13
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/api.scss
@@ -0,0 +1,82 @@
+.swagger-ui-wrap ul#resources li.resource {
+  background-color: $c-api-docs-bg;
+}
+
+.centralContent {
+    .api-actions {
+      margin: 0 !important;
+      padding: 0;
+    }
+
+    .api-actions .container {
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+      margin-left: 5px !important;
+      margin-right: 5px !important;
+      padding-top: 13px !important;
+      padding-bottom: 10px !important;
+    }
+
+    .api-actions .resource {
+      border-bottom: 0 !important;
+      padding-left: 5px !important;
+    }
+
+    .api-actions .resource .heading h2 a {
+      color: $c-black !important;
+      font-weight: 300 !important;
+    }
+
+    .api-actions .active .heading h2 a {
+      color: $c-black !important;
+    }
+
+    .api-actions .endpoints {
+      margin-right: 5px !important;
+    }
+
+    .api-actions .endpoints .endpoint:last-child {
+      padding-bottom: 5px !important;
+    }
+
+    .api-actions .endpoint .operations .heading,
+    .api-actions .endpoint .operations .content {
+      border-radius: 0 !important;
+      font-weight: 300 !important;
+    }
+
+    .api-actions .endpoint .operations .content {
+      margin: 0 !important;
+    }
+
+    .api-actions .endpoint .operations .content h4 {
+      font-weight: 700 !important;
+    }
+
+    .api-actions .toggleOperation,
+    .api-actions .http_method {
+      border-radius: 0 !important;
+    }
+
+    .api-actions .required,
+    .api-actions em,
+    .api-actions strong {
+      font-weight: 400 !important;
+    }
+
+    .api-actions input[type="button"] {
+      background: none repeat scroll 0 0 $c-api-docs-bg-input !important;
+      border: medium none !important;
+      box-shadow: none !important;
+      color: $c-white !important;
+      float: right !important;
+      font-size: 14px !important;
+      font-weight: 300 !important;
+      margin-top: 10px !important;
+      padding: 8px 16px !important;
+    }
+
+    .api-actions .resource > .heading > .options {
+      margin: 11px 10px 0 0 !important;
+    }
+}
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index eedf33b67a..f8bf915a94 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -1777,6 +1777,59 @@ div img.searchSubmitIcon {
 .query-output .ace_gutter-cell {
   background-color: #f0f0f0; }
 
+.swagger-ui-wrap ul#resources li.resource {
+  background-color: #f4f3f3; }
+
+.centralContent .api-actions {
+  margin: 0 !important;
+  padding: 0; }
+.centralContent .api-actions .container {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  margin-left: 5px !important;
+  margin-right: 5px !important;
+  padding-top: 13px !important;
+  padding-bottom: 10px !important; }
+.centralContent .api-actions .resource {
+  border-bottom: 0 !important;
+  padding-left: 5px !important; }
+.centralContent .api-actions .resource .heading h2 a {
+  color: black !important;
+  font-weight: 300 !important; }
+.centralContent .api-actions .active .heading h2 a {
+  color: black !important; }
+.centralContent .api-actions .endpoints {
+  margin-right: 5px !important; }
+.centralContent .api-actions .endpoints .endpoint:last-child {
+  padding-bottom: 5px !important; }
+.centralContent .api-actions .endpoint .operations .heading,
+.centralContent .api-actions .endpoint .operations .content {
+  border-radius: 0 !important;
+  font-weight: 300 !important; }
+.centralContent .api-actions .endpoint .operations .content {
+  margin: 0 !important; }
+.centralContent .api-actions .endpoint .operations .content h4 {
+  font-weight: 700 !important; }
+.centralContent .api-actions .toggleOperation,
+.centralContent .api-actions .http_method {
+  border-radius: 0 !important; }
+.centralContent .api-actions .required,
+.centralContent .api-actions em,
+.centralContent .api-actions strong {
+  font-weight: 400 !important; }
+.centralContent .api-actions input[type="button"] {
+  background: none repeat scroll 0 0 #8f8d8c !important;
+  border: medium none !important;
+  box-shadow: none !important;
+  color: white !important;
+  float: right !important;
+  font-size: 14px !important;
+  font-weight: 300 !important;
+  margin-top: 10px !important;
+  padding: 8px 16px !important; }
+.centralContent .api-actions .resource > .heading > .options {
+  margin: 11px 10px 0 0 !important; }
+
 table.dataTable thead th {
   font-weight: 400 !important;
   padding: 10px 14px; }
diff --git a/js/apps/system/aardvark/frontend/scss/style.scss b/js/apps/system/aardvark/frontend/scss/style.scss
index 212c242e81..7a659b3f04 100644
--- a/js/apps/system/aardvark/frontend/scss/style.scss
+++ b/js/apps/system/aardvark/frontend/scss/style.scss
@@ -43,6 +43,8 @@
 @import 'accordion';
 // shell view
 @import 'shellView';
+// api docs
+@import 'api';
 
 
 // Data Tables, TODO: might all be superflous
diff --git a/js/apps/system/aardvark/manifest.json b/js/apps/system/aardvark/manifest.json
index dec1edf374..b4cfe2f8af 100644
--- a/js/apps/system/aardvark/manifest.json
+++ b/js/apps/system/aardvark/manifest.json
@@ -139,7 +139,6 @@
         "frontend/css/ansi.css",
         "frontend/css/graphlayout.css",
         "frontend/css/datatables.css",
-        "frontend/css/api.css",
         "frontend/css/screenSizes.css",
         "frontend/css/jsoneditor.css",
         "frontend/ttf/arangofont/style.css"

From 1d2c7fa6b54e0c6fdc2133e18e5d4de54f3af1d1 Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Wed, 19 Mar 2014 17:30:50 +0100
Subject: [PATCH 09/11] Moved foxxView.css to scss: reduction 100% ...all
 unused

---
 .../system/aardvark/frontend/css/foxxView.css | 93 -------------------
 .../js/templates/applicationsView.ejs         |  2 -
 .../frontend/js/views/applicationsView.js     | 23 +----
 3 files changed, 1 insertion(+), 117 deletions(-)

diff --git a/js/apps/system/aardvark/frontend/css/foxxView.css b/js/apps/system/aardvark/frontend/css/foxxView.css
index cd54df126d..e69de29bb2 100644
--- a/js/apps/system/aardvark/frontend/css/foxxView.css
+++ b/js/apps/system/aardvark/frontend/css/foxxView.css
@@ -1,93 +0,0 @@
-.foxxList {
-  padding-top: 8px;
-}
-
-.foxxList i:hover {
-  cursor: pointer;
-}
-
-.foxxElement {
-  cursor: pointer;
-}
-
-.foxxElement .icon_arangodb_info {
-  font-size: 18px;
-  margin-right: 3px;
-  position: absolute;
-  top: 32px;
-  right: 1px;
-  opacity: 0.7;
-}
-
-.foxxElement .icon_arangodb_info:hover {
-  opacity: 1;
-}
-
-.foxxDescription {
-  margin-top: 5px;
-  width:140px;
-  height: 90px;
-  float: left;
-  text-align: left;
-  word-wrap: break-word;
-}
-
-#availableList .foxxDescription {
-  margin-top: 8px !important;
-  height: 60px !important;
-}
-
-.foxxIcon {
-  width:64px;
-  height:64px;
-  float:left;
-  padding:10px;
-}
-
-.badge-foxx {
-  bottom: 0px;
-}
-
-li.applicationList {
-  width: 100% !important;
-  margin-left: -17px;
-  background-color: transparent;
-  border: none;
-}
-
-.applicationListHeader {
-  margin-bottom: 5px;
-  margin-top: 5px;
-  color: #FFF;
-  height: 36px !important;
-  text-align: center;
-  padding: 1px 0px;
-}
-
-.toggle-icon {
-  margin: 10px;
-}
-
-.foxxList .boxHeader {
-  background-color: #686766;
-  opacity: 1;
-  margin-left: 12px;
-  margin-right: -2px;
-  width: auto;
-}
-
-.foxxList i {
-  visibility: hidden;
-}
-
-.applicationList {
-  width: 100% !important;
-  padding-left: 10px;
-  margin-bottom: 0px !important;
-}
-
-.applicationList .span3 {
-  padding-bottom: 0 !important;
-  margin-bottom: 10px !important;
-  margin-left: 12px !important;
-}
diff --git a/js/apps/system/aardvark/frontend/js/templates/applicationsView.ejs b/js/apps/system/aardvark/frontend/js/templates/applicationsView.ejs
index ff673f94c7..4d3ab49f8d 100644
--- a/js/apps/system/aardvark/frontend/js/templates/applicationsView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/applicationsView.ejs
@@ -63,14 +63,12 @@
   <div class="contentDiv">
     <div id="installed">
       <div class="headerBar">
-        <!-- <i id="toggleInstalled" class="pull-right icon-minus icon-white toggle-icon"></i> -->
         <a class="arangoHeader">Active</a>
       </div>
       <div id="installedList" class="tileList"></div>
     </div>
     <div id="available">
       <div class="headerBar">
-        <!-- <i id="toggleAvailable" class="pull-right icon-minus icon-white toggle-icon"></i> -->
         <a class="arangoHeader">Available</a>
       </div>
       <div id="availableList" class="tileList"></div>
diff --git a/js/apps/system/aardvark/frontend/js/views/applicationsView.js b/js/apps/system/aardvark/frontend/js/views/applicationsView.js
index b3fd3603de..9ff4c9cd86 100644
--- a/js/apps/system/aardvark/frontend/js/views/applicationsView.js
+++ b/js/apps/system/aardvark/frontend/js/views/applicationsView.js
@@ -7,7 +7,6 @@ window.ApplicationsView = Backbone.View.extend({
   template: templateEngine.createTemplate("applicationsView.ejs"),
 
   events: {
-    "click .toggle-icon"        : "toggleView",
     "click #checkDevel"         : "toggleDevel",
     "click #checkActive"        : "toggleActive",
     "click #checkInactive"      : "toggleInactive",
@@ -55,7 +54,7 @@ window.ApplicationsView = Backbone.View.extend({
                     filename: res.filename
                   }),
                   processData: false
-                }).done(function (res) {
+                }).done(function () {
                   self.reload();
                 }).fail(function (err) {
                   self.hideSpinner();
@@ -135,26 +134,6 @@ window.ApplicationsView = Backbone.View.extend({
     this.hideImportModal();
   },
 
-  toggleView: function(event) {
-    var target = $(event.currentTarget);
-    var type = target.attr("id");
-    var close = target.hasClass("icon-minus");
-    var selector = "";
-    if (type === "toggleInstalled") {
-      selector = "#installedList";
-    } else if (type === "toggleAvailable") {
-      selector = "#availableList";
-    }
-    if (close) {
-      $(selector).hide();
-    } else {
-      $(selector).show();
-    }
-    target.toggleClass("icon-minus");
-    target.toggleClass("icon-plus");
-    event.stopPropagation();
-  },
-  
   reload: function() {
     var self = this;
 

From 9bc623ff3adc83164df1a9ab40c405a87f7340ff Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Wed, 19 Mar 2014 17:31:49 +0100
Subject: [PATCH 10/11] Removed now empty foxxView.css

---
 js/apps/system/aardvark/frontend/css/foxxView.css | 0
 js/apps/system/aardvark/manifest.json             | 1 -
 2 files changed, 1 deletion(-)
 delete mode 100644 js/apps/system/aardvark/frontend/css/foxxView.css

diff --git a/js/apps/system/aardvark/frontend/css/foxxView.css b/js/apps/system/aardvark/frontend/css/foxxView.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/js/apps/system/aardvark/manifest.json b/js/apps/system/aardvark/manifest.json
index b2f4bb31c7..492726edc4 100644
--- a/js/apps/system/aardvark/manifest.json
+++ b/js/apps/system/aardvark/manifest.json
@@ -131,7 +131,6 @@
         "frontend/css/documentsView.css",
         "frontend/css/documentView.css",
         "frontend/css/swaggerView.css",
-        "frontend/css/foxxView.css",
         "frontend/css/graphView.css",
         "frontend/css/jquery.snippet.css",
         "frontend/css/modal.css",

From 33a9bcfb5a3be41fa29acb4bc3e28af16329d980 Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Thu, 20 Mar 2014 08:55:12 +0100
Subject: [PATCH 11/11] Moved content from graphView to graphlayout.css,
 cleanup will be done in one flow

---
 js/apps/system/aardvark/frontend/css/graphView.css   | 11 -----------
 js/apps/system/aardvark/frontend/css/graphlayout.css | 11 +++++++++++
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/js/apps/system/aardvark/frontend/css/graphView.css b/js/apps/system/aardvark/frontend/css/graphView.css
index 81974298fc..e69de29bb2 100644
--- a/js/apps/system/aardvark/frontend/css/graphView.css
+++ b/js/apps/system/aardvark/frontend/css/graphView.css
@@ -1,11 +0,0 @@
-.gv_manageButtonContainer {
-  margin-top: 10px;
-}
-
-input.gv_searchInput {
-  border: 1px solid #cccccc;
-}
-
-.btn-group {
-  border-radius: 2px 2px 2px 2px !important;
-}
diff --git a/js/apps/system/aardvark/frontend/css/graphlayout.css b/js/apps/system/aardvark/frontend/css/graphlayout.css
index 4c317359eb..045f640dc9 100644
--- a/js/apps/system/aardvark/frontend/css/graphlayout.css
+++ b/js/apps/system/aardvark/frontend/css/graphlayout.css
@@ -1,3 +1,14 @@
+.gv_manageButtonContainer {
+  margin-top: 10px;
+}
+
+input.gv_searchInput {
+  border: 1px solid #cccccc;
+}
+
+.btn-group {
+  border-radius: 2px 2px 2px 2px !important;
+}
 svg.graphViewer {
   position: absolute;
   left: 74px;