You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@warble.apache.org by hu...@apache.org on 2018/06/26 22:06:00 UTC

[incubator-warble-server] 05/05: Initial stab at a UI, borrowing heavily from Kibble

This is an automated email from the ASF dual-hosted git repository.

humbedooh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-warble-server.git

commit d0b64a7019b6ddfd6be1180054f966de2202225d
Author: Daniel Gruno <hu...@apache.org>
AuthorDate: Tue Jun 26 17:05:39 2018 -0500

    Initial stab at a UI, borrowing heavily from Kibble
    
    We can decide we don't like this in the future, but we need a basic UI
    to get started working with nodes...and stuff.
---
 api/yaml/widgets.yaml                              |   44 +
 ui/clients.html                                    |   81 +
 ui/css/c3.css                                      |  279 +
 ui/css/chosen-sprite@2x.png                        |  Bin 0 -> 738 bytes
 ui/css/chosen.css                                  |  490 ++
 ui/css/daterangepicker.css                         |  232 +
 ui/css/main.css                                    | 2535 +++++++
 ui/css/theme.css                                   |   27 +
 ui/css/warble.min.css                              | 3075 ++++++++
 ui/dashboard.html                                  |   69 +
 ui/images/background-bright.png                    |  Bin 0 -> 1298 bytes
 ui/images/background.png                           |  Bin 0 -> 1462 bytes
 ui/images/diagram-unit-agent.png                   |  Bin 0 -> 7432 bytes
 ui/images/diagram-unit-node.png                    |  Bin 0 -> 7451 bytes
 ui/images/favicon.ico                              |  Bin 0 -> 16958 bytes
 ui/images/warble-logo-navbar.png                   |  Bin 0 -> 251955 bytes
 ui/images/warble-logo.png                          |  Bin 0 -> 267056 bytes
 ui/index.html                                      |   44 +
 ui/js/app.js                                       | 1085 +++
 ui/js/c3.min.js                                    |    1 +
 ui/js/coffee/account.coffee                        |  103 +
 ui/js/coffee/charts_donut.coffee                   |   38 +
 ui/js/coffee/charts_gauge.coffee                   |   40 +
 ui/js/coffee/charts_linechart.coffee               |  124 +
 ui/js/coffee/charts_linked_map.coffee              |  219 +
 ui/js/coffee/charts_radar.coffee                   |  250 +
 ui/js/coffee/charts_wrapper.coffee                 |  361 +
 ui/js/coffee/colors.coffee                         |  114 +
 ui/js/coffee/combine.sh                            |    3 +
 ui/js/coffee/datepicker.coffee                     |  127 +
 ui/js/coffee/error_modal.coffee                    |   21 +
 ui/js/coffee/explorer.coffee                       |  779 ++
 ui/js/coffee/misc.coffee                           |  566 ++
 ui/js/coffee/pageloader.coffee                     |  164 +
 ui/js/coffee/warble_account.coffee                 |   33 +
 ui/js/coffee/warble_clientlist.coffee              |  168 +
 ui/js/coffee/widget.coffee                         |  310 +
 ui/js/coffee/widget_admin.coffee                   |  113 +
 ui/js/coffee/widget_affiliations.coffee            |  181 +
 ui/js/coffee/widget_bio.coffee                     |   91 +
 ui/js/coffee/widget_comstat.coffee                 |  225 +
 ui/js/coffee/widget_donut.coffee                   |   81 +
 ui/js/coffee/widget_factors.coffee                 |   42 +
 ui/js/coffee/widget_jsondump.coffee                |    5 +
 ui/js/coffee/widget_linechart.coffee               |  179 +
 ui/js/coffee/widget_map.coffee                     |   82 +
 ui/js/coffee/widget_messages.coffee                |  161 +
 ui/js/coffee/widget_mvp.coffee                     |   71 +
 ui/js/coffee/widget_paragraph.coffee               |   17 +
 ui/js/coffee/widget_preferences.coffee             |   84 +
 ui/js/coffee/widget_publisher.coffee               |   55 +
 ui/js/coffee/widget_radar.coffee                   |   63 +
 ui/js/coffee/widget_relation.coffee                |   36 +
 ui/js/coffee/widget_report.coffee                  |  158 +
 ui/js/coffee/widget_top5.coffee                    |   99 +
 ui/js/coffee/widget_treemap.coffee                 |  125 +
 ui/js/coffee/widget_trend.coffee                   |   62 +
 ui/js/coffee/widget_views.coffee                   |  250 +
 ui/js/core.js                                      |  205 +
 ui/js/d3.min.js                                    |    2 +
 ui/js/datepicker/daterangepicker.js                |    1 +
 ui/js/moment/moment.min.js                         |    7 +
 ui/js/warble.v1.js                                 | 7837 ++++++++++++++++++++
 ui/login.html                                      |  146 +
 ui/vendors/font-awesome/css/font-awesome.css       | 2178 ++++++
 ui/vendors/font-awesome/css/font-awesome.min.css   |    4 +
 ui/vendors/font-awesome/fonts/FontAwesome.otf      |  Bin 0 -> 123112 bytes
 .../font-awesome/fonts/fontawesome-webfont.eot     |  Bin 0 -> 75220 bytes
 .../font-awesome/fonts/fontawesome-webfont.svg     |  685 ++
 .../font-awesome/fonts/fontawesome-webfont.ttf     |  Bin 0 -> 150920 bytes
 .../font-awesome/fonts/fontawesome-webfont.woff    |  Bin 0 -> 89076 bytes
 .../font-awesome/fonts/fontawesome-webfont.woff2   |  Bin 0 -> 70728 bytes
 72 files changed, 24627 insertions(+)

diff --git a/api/yaml/widgets.yaml b/api/yaml/widgets.yaml
new file mode 100644
index 0000000..535b718
--- /dev/null
+++ b/api/yaml/widgets.yaml
@@ -0,0 +1,44 @@
+widgets:
+### DASHBOARD
+    frontpage:
+        title: "Dashboard"
+        rows:
+            -
+                name: "Client statuses"
+                children:
+                    -
+                        type: trend
+                        blocks: 12
+                        name: "Client activity"
+                        source: org/trends
+            -
+                name: "Overall status"
+                children:
+                    -
+                        type: status
+                        blocks: 12
+                        name: "Overall status"
+                        source: org/trends
+                        
+            -
+                name: "Latest errors"
+                children:
+                    -
+                        type: list
+                        blocks: 12
+                        name: "Latest errors"
+                        source: org/list
+
+    clients:
+        title: "Agents and Nodes"
+        rows:
+            -
+                name: "Warble Nodes"
+                children:
+                    -
+                        type: clientlist
+                        method: get
+                        blocks: 12
+                        name: "Warble Nodes"
+                        source: node/list
+
diff --git a/ui/clients.html b/ui/clients.html
new file mode 100644
index 0000000..8bc68c0
--- /dev/null
+++ b/ui/clients.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Clients - Apache Kibble</title>
+    <meta name="msapplication-TileColor" content="#5bc0de" />
+    <meta name="msapplication-TileImage" content="images/background.png" />
+    <link rel="icon" type="image/png" sizes="48x48" href="images/kibble-favicon.png">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
+    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- Metis core stylesheet -->
+    <link rel="stylesheet" href="css/warble.min.css">
+    <link rel="stylesheet" href="css/daterangepicker.css">
+    <link href="css/c3.css" rel="stylesheet">
+    <link href="css/chosen.css" rel="stylesheet">
+  </head>
+  <body class="dashboard" onload="loadPageWidgets(window.location.search.substr(1), 3);">
+    <nav class="topbar">
+      <img class="logo" src="images/warble-logo-navbar.png"/>
+      <ul>
+        <a href="dashboard.html?page=frontpage"><li><i class="fa fa-home"></i> Dashboard</li></a>
+        <a href="clients.html?page=clients" class="selected"><li><i class="fa fa-bar-chart-o"></i> Nodes / Agents</li></a>
+        <a href="status.html?page=overview"><li><i class="fa fa-cubes"></i> Host Status</li></a>
+        <a href="settings.html"><li><i class="fa fa-cog"></i> Server Settings</li></a>
+        <a href="users.html"><li><i class="fa fa-group"></i> Users</li></a>
+        <a href="dashboard.html?page=publish"><li><i class="fa fa-cloud-download"></i> Exports</li></a>
+        <a href="apidoc.html"><li><i class="fa fa-book"></i> API Docs</li></a>
+        <a href="javascript:void(signout());"><li><i class="fa fa-sign-out"></i> Log Off</li></a>
+      </ul>
+    </nav>
+    <nav class="titlebar">
+      <div class="searchbar">
+        &nbsp;
+      </div>
+      Dashboard
+    </nav>
+    <div>
+    
+    
+    <nav class="menu">
+      <div class="sidemenu">
+        <p class="sidetitle">Clients:</p>
+      <ul>
+        <a href="clients.html?page=nodes"><li>Testing Nodes</li></a>
+        <a href="clients.html?page=agents"><li>Host Agents</li></a>
+        <a href="clients.html?page=map"><li>Client Map</li></a>
+      </ul>
+      </div>
+    </nav>
+    
+    <div class="wrapper">
+      <div class="wrap1">
+        <div class="wrap2">
+          <div class="wrap3" id="innercontents">
+            Loading, please wait...
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+    <div id="chartWrapperHiddenMaster" style="display:none;"></div>
+    <!--jQuery -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+    <!--Bootstrap -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
+    
+    
+    <!-- Snoot4 stuff, to be removed -->
+    <script src="https://d3js.org/d3.v3.min.js"></script>
+    <script src="js/c3.min.js"></script>
+    <script type="text/javascript" src="js/warble.v1.js"></script>
+    <script src="js/moment/moment.min.js"></script>
+    <script src="js/datepicker/daterangepicker.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js" type="text/javascript" data-rocketoptimized="true"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/ui/css/c3.css b/ui/css/c3.css
new file mode 100644
index 0000000..be5a947
--- /dev/null
+++ b/ui/css/c3.css
@@ -0,0 +1,279 @@
+/*-- Chart --*/
+.c3 svg {
+  font: 10px sans-serif;
+  -webkit-tap-highlight-color: transparent; }
+
+.c3 path, .c3 line {
+  fill: none;
+  stroke: #000; }
+
+.chartModal .c3 text {
+  font: 14px sans-serif;
+}
+
+.c3 text {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none; }
+  
+.c3-legend-item text {
+  font: 12px sans-serif !important;
+}
+
+.c3-legend-item-tile,
+.c3-xgrid-focus,
+.c3-ygrid,
+.c3-event-rect,
+.c3-bars path {
+  shape-rendering: crispEdges; }
+
+.c3-chart-arc path {
+  stroke: #fff; }
+
+.c3-chart-arc text {
+  fill: #fff;
+  font-size: 12px; }
+
+/*-- Axis --*/
+/*-- Grid --*/
+.c3-grid line {
+  stroke: #aaa; }
+
+.c3-grid text {
+  fill: #aaa; }
+
+.c3-xgrid, .c3-ygrid {
+  stroke-dasharray: 3 3; }
+
+/*-- Text on Chart --*/
+.c3-text.c3-empty {
+  fill: #808080;
+  font-size: 2em; }
+
+/*-- Line --*/
+.c3-line {
+  stroke-width: 1.75px; }
+
+/*-- Point --*/
+.c3-circle._expanded_ {
+  stroke-width: 2px;
+  stroke: white; }
+
+.c3-selected-circle {
+  fill: white;
+  stroke-width: 2px; }
+
+/*-- Bar --*/
+.c3-bar {
+  stroke-width: 0; }
+
+.c3-bar._expanded_ {
+  fill-opacity: 1;
+  fill-opacity: 0.75; }
+
+/*-- Focus --*/
+.c3-target.c3-focused {
+  opacity: 1; }
+
+.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
+  stroke-width: 2px; }
+
+.c3-target.c3-defocused {
+  opacity: 0.3 !important; }
+
+/*-- Region --*/
+.c3-region {
+  fill: steelblue;
+  fill-opacity: .1; }
+
+/*-- Brush --*/
+.c3-brush .extent {
+  fill-opacity: .1; }
+
+/*-- Select - Drag --*/
+/*-- Legend --*/
+.c3-legend-item {
+  font-size: 12px; }
+
+.c3-legend-item-hidden {
+  opacity: 0.15; }
+
+.c3-legend-background {
+  opacity: 0.75;
+  fill: white;
+  stroke: lightgray;
+  stroke-width: 1; }
+
+/*-- Title --*/
+.c3-title {
+  font: 14px sans-serif; }
+
+/*-- Tooltip --*/
+.c3-tooltip-container {
+  z-index: 10; }
+
+.c3-tooltip {
+  
+  background-color: #fff;
+  empty-cells: show;
+  border-spacing: 0px;
+  -webkit-box-shadow: 7px 7px 12px -9px #777777;
+  -moz-box-shadow: 7px 7px 12px -9px #777777;
+  box-shadow: 7px 7px 12px -9px #777777;
+  border-radius: 3px;
+  border: 2px solid #333;
+  opacity: 0.9; }
+  
+.c3-tooltip tr {
+  border: 1px solid #CCC;
+  font-family: sans-serif;
+  }
+
+.c3-tooltip th {
+  background-color: #333;
+  font-size: 14px;
+  padding: 2px 5px;
+  text-align: left;
+  color: #FFF; }
+
+.c3-tooltip td {
+  font-size: 13px;
+  padding: 3px 6px;
+  background-color: #eee;
+  border-left: 1px dotted #999; }
+
+.c3-tooltip td > span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px; }
+
+.c3-tooltip td.value {
+  text-align: right; }
+
+/*-- Area --*/
+.c3-area {
+  stroke-width: 0;
+  opacity: 0.65; }
+
+/*-- Arc --*/
+.c3-chart-arcs-title {
+  dominant-baseline: middle;
+  font-size: 1.3em; }
+
+.c3-chart-arcs .c3-chart-arcs-background {
+  fill: #e0e0e0;
+  stroke: none; }
+
+.c3-chart-arcs .c3-chart-arcs-gauge-unit {
+  fill: #000;
+  font-size: 16px; }
+
+.c3-chart-arcs .c3-chart-arcs-gauge-max {
+  fill: #777; }
+
+.c3-chart-arcs .c3-chart-arcs-gauge-min {
+  fill: #777; }
+
+.c3-chart-arc .c3-gauge-value {
+  fill: #000;
+  /*  font-size: 28px !important;*/ }
+
+.c3-chart-arc.c3-target g path {
+  opacity: 1; }
+
+.c3-chart-arc.c3-target.c3-focused g path {
+  opacity: 1; }
+
+
+.chartWrapper {
+  float: left;
+  width: 100%;
+  background: #FFF !important;
+}
+
+.chartToolbar {
+  height: 32px;
+  width: 100%;
+}
+
+.chartToolButton {
+  float: right;
+  width: 24px;
+  height: 22px;
+  border: 1px solid #999;
+  background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
+  box-shadow: 7px 7px 12px -9px #777777;
+  margin-right: 6px;
+  padding-top: 3px;
+  opacity: 0.75;
+  text-align: center;
+}
+
+.chartToolButton > i {
+  font-size: 16px;
+}
+
+.chartToolButton:hover {
+  opacity: 1;
+  border: 1px solid #369;
+  cursor: pointer;
+}
+
+.chartTitle {
+  text-align: center;
+  font-family:sans-serif;
+  font-size: 18px;
+}
+
+
+
+.chartModal {
+    position: fixed; /* Stay in place */
+    z-index: 1000; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    min-height: 100%; /* Full height */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+.chartModalContent {
+    background-color: #fefefe;
+    margin: 15vh 15vh 15vh 15vh; /* 15% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+    overflow-y: scroll;
+    max-height: calc(100vh - 30vh);
+    font-family: sans-serif;
+    font-size: 12px;
+}
+
+.chartModalContent td {
+  padding: 3px;
+  text-align: right;
+}
+
+.chartModalContent td:first-child {
+  text-align: left;
+}
+
+.chartModelClose {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.chartModelClose:hover,
+.chartModelClose:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.linkedChart {
+  min-height: 600px;
+}
\ No newline at end of file
diff --git a/ui/css/chosen-sprite@2x.png b/ui/css/chosen-sprite@2x.png
new file mode 100644
index 0000000..6b50545
Binary files /dev/null and b/ui/css/chosen-sprite@2x.png differ
diff --git a/ui/css/chosen.css b/ui/css/chosen.css
new file mode 100644
index 0000000..d4219b4
--- /dev/null
+++ b/ui/css/chosen.css
@@ -0,0 +1,490 @@
+/*!
+Chosen, a Select Box Enhancer for jQuery and Prototype
+by Patrick Filler for Harvest, http://getharvest.com
+
+Version 1.8.2
+Full source at https://github.com/harvesthq/chosen
+Copyright (c) 2011-2017 Harvest http://getharvest.com
+
+MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
+This file is generated by `grunt build`, do not edit it by hand.
+*/
+
+/* @group Base */
+.chosen-container {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 13px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.chosen-container * {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.chosen-container .chosen-drop {
+  position: absolute;
+  top: 100%;
+  z-index: 1010;
+  width: 100%;
+  border: 1px solid #aaa;
+  border-top: 0;
+  background: #fff;
+  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+  clip: rect(0, 0, 0, 0);
+}
+
+.chosen-container.chosen-with-drop .chosen-drop {
+  clip: auto;
+}
+
+.chosen-container a {
+  cursor: pointer;
+}
+
+.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
+  margin-right: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: normal;
+  color: #999999;
+}
+
+.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
+  content: ":";
+  padding-left: 2px;
+  vertical-align: top;
+}
+
+/* @end */
+/* @group Single Chosen */
+.chosen-container-single .chosen-single {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  padding: 0 0 0 8px;
+  height: 25px;
+  border: 1px solid #aaa;
+  border-radius: 5px;
+  background-color: #fff;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), color-stop(50%, #f6f6f6), color-stop(52%, #eee), to(#f4f4f4));
+  background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
+  color: #444;
+  text-decoration: none;
+  white-space: nowrap;
+  line-height: 24px;
+}
+
+.chosen-container-single .chosen-default {
+  color: #999;
+}
+
+.chosen-container-single .chosen-single span {
+  display: block;
+  overflow: hidden;
+  margin-right: 26px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chosen-container-single .chosen-single-with-deselect span {
+  margin-right: 38px;
+}
+
+.chosen-container-single .chosen-single abbr {
+  position: absolute;
+  top: 6px;
+  right: 26px;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: url("chosen-sprite.png") -42px 1px no-repeat;
+  font-size: 1px;
+}
+
+.chosen-container-single .chosen-single abbr:hover {
+  background-position: -42px -10px;
+}
+
+.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
+  background-position: -42px -10px;
+}
+
+.chosen-container-single .chosen-single div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  width: 18px;
+  height: 100%;
+}
+
+.chosen-container-single .chosen-single div b {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: url("chosen-sprite.png") no-repeat 0px 2px;
+}
+
+.chosen-container-single .chosen-search {
+  position: relative;
+  z-index: 1010;
+  margin: 0;
+  padding: 3px 4px;
+  white-space: nowrap;
+}
+
+.chosen-container-single .chosen-search input[type="text"] {
+  margin: 1px 0;
+  padding: 4px 20px 4px 5px;
+  width: 100%;
+  height: auto;
+  outline: 0;
+  border: 1px solid #aaa;
+  background: url("chosen-sprite.png") no-repeat 100% -20px;
+  font-size: 1em;
+  font-family: sans-serif;
+  line-height: normal;
+  border-radius: 0;
+}
+
+.chosen-container-single .chosen-drop {
+  margin-top: -1px;
+  border-radius: 0 0 4px 4px;
+  background-clip: padding-box;
+}
+
+.chosen-container-single.chosen-container-single-nosearch .chosen-search {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+}
+
+/* @end */
+/* @group Results */
+.chosen-container .chosen-results {
+  color: #444;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0 4px 4px 0;
+  padding: 0 0 0 4px;
+  max-height: 240px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.chosen-container .chosen-results li {
+  display: none;
+  margin: 0;
+  padding: 5px 6px;
+  list-style: none;
+  line-height: 15px;
+  word-wrap: break-word;
+  -webkit-touch-callout: none;
+}
+
+.chosen-container .chosen-results li.active-result {
+  display: list-item;
+  cursor: pointer;
+}
+
+.chosen-container .chosen-results li.disabled-result {
+  display: list-item;
+  color: #ccc;
+  cursor: default;
+}
+
+.chosen-container .chosen-results li.highlighted {
+  background-color: #3875d7;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
+  background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
+  color: #fff;
+}
+
+.chosen-container .chosen-results li.no-results {
+  color: #777;
+  display: list-item;
+  background: #f4f4f4;
+}
+
+.chosen-container .chosen-results li.group-result {
+  display: list-item;
+  font-weight: bold;
+  cursor: default;
+}
+
+.chosen-container .chosen-results li.group-option {
+  padding-left: 15px;
+}
+
+.chosen-container .chosen-results li em {
+  font-style: normal;
+  text-decoration: underline;
+}
+
+/* @end */
+/* @group Multi Chosen */
+.chosen-container-multi .chosen-choices {
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  padding: 0 5px;
+  width: 100%;
+  height: auto;
+  border: 1px solid #aaa;
+  background-color: #fff;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #eee), color-stop(15%, #fff));
+  background-image: linear-gradient(#eee 1%, #fff 15%);
+  cursor: text;
+}
+
+.chosen-container-multi .chosen-choices li {
+  float: left;
+  list-style: none;
+}
+
+.chosen-container-multi .chosen-choices li.search-field {
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
+  margin: 1px 0;
+  padding: 0;
+  height: 25px;
+  outline: 0;
+  border: 0 !important;
+  background: transparent !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: #999;
+  font-size: 100%;
+  font-family: sans-serif;
+  line-height: normal;
+  border-radius: 0;
+  width: 25px;
+}
+
+.chosen-container-multi .chosen-choices li.search-choice {
+  position: relative;
+  margin: 3px 5px 3px 0;
+  padding: 3px 20px 3px 5px;
+  border: 1px solid #aaa;
+  max-width: 100%;
+  border-radius: 3px;
+  background-color: #eeeeee;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), to(#eee));
+  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+  background-size: 100% 19px;
+  background-repeat: repeat-x;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+          box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+  color: #333;
+  line-height: 13px;
+  cursor: default;
+}
+
+.chosen-container-multi .chosen-choices li.search-choice span {
+  word-wrap: break-word;
+}
+
+.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
+  position: absolute;
+  top: 4px;
+  right: 3px;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: url("chosen-sprite.png") -42px 1px no-repeat;
+  font-size: 1px;
+}
+
+.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
+  background-position: -42px -10px;
+}
+
+.chosen-container-multi .chosen-choices li.search-choice-disabled {
+  padding-right: 5px;
+  border: 1px solid #ccc;
+  background-color: #e4e4e4;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), to(#eee));
+  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+  color: #666;
+}
+
+.chosen-container-multi .chosen-choices li.search-choice-focus {
+  background: #d4d4d4;
+}
+
+.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
+  background-position: -42px -10px;
+}
+
+.chosen-container-multi .chosen-results {
+  margin: 0;
+  padding: 0;
+}
+
+.chosen-container-multi .chosen-drop .result-selected {
+  display: list-item;
+  color: #ccc;
+  cursor: default;
+}
+
+/* @end */
+/* @group Active  */
+.chosen-container-active .chosen-single {
+  border: 1px solid #5897fb;
+  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.chosen-container-active.chosen-with-drop .chosen-single {
+  border: 1px solid #aaa;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #eee), color-stop(80%, #fff));
+  background-image: linear-gradient(#eee 20%, #fff 80%);
+  -webkit-box-shadow: 0 1px 0 #fff inset;
+          box-shadow: 0 1px 0 #fff inset;
+}
+
+.chosen-container-active.chosen-with-drop .chosen-single div {
+  border-left: none;
+  background: transparent;
+}
+
+.chosen-container-active.chosen-with-drop .chosen-single div b {
+  background-position: -18px 2px;
+}
+
+.chosen-container-active .chosen-choices {
+  border: 1px solid #5897fb;
+  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.chosen-container-active .chosen-choices li.search-field input[type="text"] {
+  color: #222 !important;
+}
+
+/* @end */
+/* @group Disabled Support */
+.chosen-disabled {
+  opacity: 0.5 !important;
+  cursor: default;
+}
+
+.chosen-disabled .chosen-single {
+  cursor: default;
+}
+
+.chosen-disabled .chosen-choices .search-choice .search-choice-close {
+  cursor: default;
+}
+
+/* @end */
+/* @group Right to Left */
+.chosen-rtl {
+  text-align: right;
+}
+
+.chosen-rtl .chosen-single {
+  overflow: visible;
+  padding: 0 8px 0 0;
+}
+
+.chosen-rtl .chosen-single span {
+  margin-right: 0;
+  margin-left: 26px;
+  direction: rtl;
+}
+
+.chosen-rtl .chosen-single-with-deselect span {
+  margin-left: 38px;
+}
+
+.chosen-rtl .chosen-single div {
+  right: auto;
+  left: 3px;
+}
+
+.chosen-rtl .chosen-single abbr {
+  right: auto;
+  left: 26px;
+}
+
+.chosen-rtl .chosen-choices li {
+  float: right;
+}
+
+.chosen-rtl .chosen-choices li.search-field input[type="text"] {
+  direction: rtl;
+}
+
+.chosen-rtl .chosen-choices li.search-choice {
+  margin: 3px 5px 3px 0;
+  padding: 3px 5px 3px 19px;
+}
+
+.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
+  right: auto;
+  left: 4px;
+}
+
+.chosen-rtl.chosen-container-single .chosen-results {
+  margin: 0 0 4px 4px;
+  padding: 0 4px 0 0;
+}
+
+.chosen-rtl .chosen-results li.group-option {
+  padding-right: 15px;
+  padding-left: 0;
+}
+
+.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
+  border-right: none;
+}
+
+.chosen-rtl .chosen-search input[type="text"] {
+  padding: 4px 5px 4px 20px;
+  background: url("chosen-sprite.png") no-repeat -30px -20px;
+  direction: rtl;
+}
+
+.chosen-rtl.chosen-container-single .chosen-single div b {
+  background-position: 6px 2px;
+}
+
+.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
+  background-position: -12px 2px;
+}
+
+/* @end */
+/* @group Retina compatibility */
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
+  .chosen-rtl .chosen-search input[type="text"],
+  .chosen-container-single .chosen-single abbr,
+  .chosen-container-single .chosen-single div b,
+  .chosen-container-single .chosen-search input[type="text"],
+  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
+  .chosen-container .chosen-results-scroll-down span,
+  .chosen-container .chosen-results-scroll-up span {
+    background-image: url("chosen-sprite@2x.png") !important;
+    background-size: 52px 37px !important;
+    background-repeat: no-repeat !important;
+  }
+}
+
+/* @end */
diff --git a/ui/css/daterangepicker.css b/ui/css/daterangepicker.css
new file mode 100644
index 0000000..dfce19c
--- /dev/null
+++ b/ui/css/daterangepicker.css
@@ -0,0 +1,232 @@
+.daterangepicker {
+  position: absolute;
+  color: inherit;
+  background: #fff;
+  border-radius: 4px;
+  width: 278px;
+  padding: 4px;
+  margin-top: 1px;
+  top: 100px;
+  left: 20px;
+  /* Calendars */ }
+  .daterangepicker:before, .daterangepicker:after {
+    position: absolute;
+    display: inline-block;
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    content: ''; }
+  .daterangepicker:before {
+    top: -7px;
+    border-right: 7px solid transparent;
+    border-left: 7px solid transparent;
+    border-bottom: 7px solid #ccc; }
+  .daterangepicker:after {
+    top: -6px;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #fff;
+    border-left: 6px solid transparent; }
+  .daterangepicker.opensleft:before {
+    right: 9px; }
+  .daterangepicker.opensleft:after {
+    right: 10px; }
+  .daterangepicker.openscenter:before {
+    left: 0;
+    right: 0;
+    width: 0;
+    margin-left: auto;
+    margin-right: auto; }
+  .daterangepicker.openscenter:after {
+    left: 0;
+    right: 0;
+    width: 0;
+    margin-left: auto;
+    margin-right: auto; }
+  .daterangepicker.opensright:before {
+    left: 9px; }
+  .daterangepicker.opensright:after {
+    left: 10px; }
+  .daterangepicker.dropup {
+    margin-top: -5px; }
+    .daterangepicker.dropup:before {
+      top: initial;
+      bottom: -7px;
+      border-bottom: initial;
+      border-top: 7px solid #ccc; }
+    .daterangepicker.dropup:after {
+      top: initial;
+      bottom: -6px;
+      border-bottom: initial;
+      border-top: 6px solid #fff; }
+  .daterangepicker.dropdown-menu {
+    max-width: none;
+    z-index: 3001; }
+  .daterangepicker.single .ranges, .daterangepicker.single .calendar {
+    float: none; }
+  .daterangepicker.show-calendar .calendar {
+    display: block; }
+  .daterangepicker .calendar {
+    display: none;
+    max-width: 270px;
+    margin: 4px; }
+    .daterangepicker .calendar.single .calendar-table {
+      border: none; }
+    .daterangepicker .calendar th, .daterangepicker .calendar td {
+      white-space: nowrap;
+      text-align: center;
+      min-width: 32px; }
+  .daterangepicker .calendar-table {
+    border: 1px solid #fff;
+    padding: 4px;
+    border-radius: 4px;
+    background: #fff; }
+  .daterangepicker table {
+    width: 100%;
+    margin: 0; }
+  .daterangepicker td, .daterangepicker th {
+    text-align: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    cursor: pointer; }
+    .daterangepicker td.available:hover, .daterangepicker th.available:hover {
+      background: #eee; }
+    .daterangepicker td.week, .daterangepicker th.week {
+      font-size: 80%;
+      color: #ccc; }
+  .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+    background-color: #fff;
+    border-color: transparent;
+    color: #999; }
+  .daterangepicker td.in-range {
+    background-color: #ebf4f8;
+    border-color: transparent;
+    color: #000;
+    border-radius: 0; }
+  .daterangepicker td.start-date {
+    border-radius: 4px 0 0 4px; }
+  .daterangepicker td.end-date {
+    border-radius: 0 4px 4px 0; }
+  .daterangepicker td.start-date.end-date {
+    border-radius: 4px; }
+  .daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #357ebd;
+    border-color: transparent;
+    color: #fff; }
+  .daterangepicker th.month {
+    width: auto; }
+  .daterangepicker td.disabled, .daterangepicker option.disabled {
+    color: #999;
+    cursor: not-allowed;
+    text-decoration: line-through; }
+  .daterangepicker select.monthselect, .daterangepicker select.yearselect {
+    font-size: 12px;
+    padding: 1px;
+    height: auto;
+    margin: 0;
+    cursor: default; }
+  .daterangepicker select.monthselect {
+    margin-right: 2%;
+    width: 56%; }
+  .daterangepicker select.yearselect {
+    width: 40%; }
+  .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+    width: 50px;
+    margin-bottom: 0; }
+  .daterangepicker .input-mini {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    color: #555;
+    height: 30px;
+    line-height: 30px;
+    display: block;
+    vertical-align: middle;
+    margin: 0 0 5px 0;
+    padding: 0 6px 0 28px;
+    width: 100%; }
+    .daterangepicker .input-mini.active {
+      border: 1px solid #08c;
+      border-radius: 4px; }
+  .daterangepicker .daterangepicker_input {
+    position: relative; }
+    .daterangepicker .daterangepicker_input i {
+      position: absolute;
+      left: 8px;
+      top: 8px; }
+  .daterangepicker .calendar-time {
+    text-align: center;
+    margin: 5px auto;
+    line-height: 30px;
+    position: relative;
+    padding-left: 28px; }
+    .daterangepicker .calendar-time select.disabled {
+      color: #ccc;
+      cursor: not-allowed; }
+
+.ranges {
+  font-size: 11px;
+  float: none;
+  margin: 4px;
+  text-align: left; }
+  .ranges ul {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%; }
+  .ranges li {
+    font-size: 13px;
+    background: #f5f5f5;
+    border: 1px solid #f5f5f5;
+    border-radius: 4px;
+    color: #08c;
+    padding: 3px 12px;
+    margin-bottom: 8px;
+    cursor: pointer; }
+    .ranges li:hover {
+      background: #08c;
+      border: 1px solid #08c;
+      color: #fff; }
+    .ranges li.active {
+      background: #08c;
+      border: 1px solid #08c;
+      color: #fff; }
+
+/*  Larger Screen Styling */
+@media (min-width: 564px) {
+  .daterangepicker {
+    width: auto; }
+    .daterangepicker .ranges ul {
+      width: 160px; }
+    .daterangepicker.single .ranges ul {
+      width: 100%; }
+    .daterangepicker.single .calendar.left {
+      clear: none; }
+    .daterangepicker.single .ranges, .daterangepicker.single .calendar {
+      float: left; }
+    .daterangepicker .calendar.left {
+      clear: left;
+      margin-right: 0; }
+      .daterangepicker .calendar.left .calendar-table {
+        border-right: none;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0; }
+    .daterangepicker .calendar.right {
+      margin-left: 0; }
+      .daterangepicker .calendar.right .calendar-table {
+        border-left: none;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0; }
+    .daterangepicker .left .daterangepicker_input {
+      padding-right: 12px; }
+    .daterangepicker .calendar.left .calendar-table {
+      padding-right: 12px; }
+    .daterangepicker .ranges, .daterangepicker .calendar {
+      float: left; } }
+
+@media (min-width: 730px) {
+  .daterangepicker .ranges {
+    width: auto;
+    float: left; }
+  .daterangepicker .calendar.left {
+    clear: none; } }
+
diff --git a/ui/css/main.css b/ui/css/main.css
new file mode 100644
index 0000000..eee1265
--- /dev/null
+++ b/ui/css/main.css
@@ -0,0 +1,2535 @@
+/**
+ * bootstrap-admin-template - Free Admin Template Based On Twitter Bootstrap 3.x
+ * @version 2.4.2
+ * @license MIT
+ * @link https://github.com/puikinsh/Bootstrap-Admin-Template
+ */
+/* ==========================================================================
+metisAdmin: Base
+========================================================================== */
+body {
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+/*********************************************************/
+/*                 Layout Styles                         */
+/*********************************************************/
+/* ==========================================================================
+   Sticky footer styles
+   ========================================================================== */
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 48px;
+}
+.Footer,
+#footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 48px;
+}
+/* END Sticky footer styles
+   ========================================================================== */
+/*********************************************************/
+/*                 Template Layout                       */
+/*********************************************************/
+#wrap:before,
+#top:before,
+.head:before,
+.Footer:before,
+#wrap:after,
+#top:after,
+.head:after,
+.Footer:after {
+  content: " ";
+  display: table;
+}
+#wrap:after,
+#top:after,
+.head:after,
+.Footer:after {
+  clear: both;
+}
+.Wrap,
+#wrap {
+  margin: 0 auto;
+  position: relative;
+}
+#left {
+  transition: all 0.3s ease-in-out;
+  width: 250px;
+  z-index: 999;
+}
+#left {
+  position: absolute;
+  left: -250px;
+}
+.sidebar-left-opened #left {
+  left: 0;
+}
+@media (min-width: 768px) {
+  #left {
+    position: -webkit-sticky;
+    position: sticky;
+    float: left;
+    left: auto;
+  }
+  .sidebar-left-hidden #left {
+    width: 0;
+    visibility: hidden;
+  }
+  .sidebar-left-mini #left {
+    width: 50px;
+  }
+  #content {
+    transition: all 0.3s ease-in-out;
+    overflow: hidden;
+  }
+}
+@media (min-width: 1200px) {
+  body.boxed {
+    margin-bottom: 0;
+  }
+  body.boxed .Wrap,
+  body.boxed #wrap,
+  body.boxed .Footer,
+  body.boxed #top .navbar.navbar-fixed-top {
+    max-width: 1170px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  body.boxed .Footer,
+  body.boxed #footer {
+    position: relative;
+  }
+}
+/* ================== END Template Layout ============== */
+/*********************************************************/
+/*                 right onoffcanvas                    */
+/*********************************************************/
+#right {
+  width: 250px;
+  overflow-y: auto;
+  padding: 1rem;
+}
+/* BEGIN TOP bar */
+#top .navbar {
+  margin-bottom: 0;
+  border-top: 3px solid #CD0067;
+}
+#top .navbar-brand {
+  padding: 0;
+}
+#top .topnav {
+  margin: 10px 0;
+  text-align: right;
+}
+@media (min-width: 768px) {
+  #top .topnav {
+    float: right;
+  }
+}
+/* END TOP bar */
+/* BEGIN header.head bar */
+.head {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.05) inset;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+}
+.head .search-bar {
+  margin: 0 auto;
+  padding: 10px 15px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+.head .search-bar .main-search {
+  border-bottom: 1px solid #7c7c7c;
+}
+.head .search-bar .main-search input[type="text"] {
+  background-color: transparent;
+  border-color: transparent;
+  color: #ccc;
+  box-shadow: none;
+}
+.head .search-bar .main-search button,
+.head .search-bar .main-search input[type=submit] {
+  background: transparent;
+  border: transparent;
+}
+@media (min-width: 768px) {
+  .head .search-bar {
+    border-bottom-width: 0;
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+    box-shadow: -1px 0px 0px rgba(255, 255, 255, 0.05) inset;
+  }
+  .side-right .head .search-bar {
+    border-right-width: 0;
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
+    box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.05) inset;
+  }
+}
+.head .main-bar {
+  padding: 10px;
+}
+.head .main-bar h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+  color: #bababa;
+}
+@media (min-width: 768px) {
+  .head .main-bar h3 {
+    margin-top: 5px;
+  }
+}
+@media (min-width: 768px) {
+  .head .search-bar .main-search {
+    margin-right: auto;
+  }
+}
+@media (min-width: 768px) {
+  .search-bar {
+    float: left;
+    padding: 10px 4px;
+  }
+  .side-right .search-bar {
+    float: right;
+  }
+  .search-bar .input-small.form-control {
+    border-radius: 3px;
+  }
+  .main-bar {
+    display: block;
+    overflow: hidden;
+  }
+}
+@media (min-width: 992px) {
+  .search-bar {
+    width: 250px;
+    padding: 10px 15px;
+  }
+  .search-bar .input-group-btn {
+    display: table-cell;
+  }
+  .search-bar .input-small.form-control {
+    border-radius: 3px 0 0 3px;
+  }
+  .mini-sidebar .search-bar .input-small.form-control {
+    border-radius: 3px;
+  }
+}
+/** END header.head bar */
+/*********************************************************/
+/*          Begin LEFT Styles                           */
+/*********************************************************/
+.user-media .user-link {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+}
+.user-media .user-link .user-img {
+  margin: 10px auto;
+}
+.user-media .user-link .user-label {
+  position: absolute;
+  top: -6px;
+  right: 6px;
+}
+.user-media .user-link {
+  float: left;
+}
+.user-media .user-link .user-img {
+  margin: 10px;
+}
+.user-media .user-link .user-label {
+  top: 6px;
+  right: 0;
+}
+.user-media .media-body {
+  margin-left: 12px;
+}
+.user-media .media-body h5.media-heading {
+  color: #fff;
+  padding-top: 8px;
+  margin-bottom: 3px;
+}
+.user-media .media-body ul.user-info li {
+  color: #ccc;
+}
+.user-media:before,
+.user-media:after {
+  content: " ";
+  display: table;
+}
+.user-media:after {
+  clear: both;
+}
+.side-right .user-link .user-label {
+  left: 6px;
+  right: auto;
+}
+.sidebar-left-mini .user-wrapper {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  display: none;
+  min-width: 250px;
+}
+.user-media-toggleHover {
+  display: none;
+}
+.sidebar-left-mini .user-media-toggleHover {
+  font-size: 18px;
+  color: #fff;
+  padding: 10px;
+  text-align: center;
+  cursor: pointer;
+  display: inherit;
+}
+.sidebar-left-mini .user-media:hover .user-wrapper {
+  left: 100%;
+  display: inherit;
+  z-index: 9999;
+}
+.sidebar-left-mini.side-right .user-media:hover .user-wrapper {
+  left: auto;
+  right: 100%;
+}
+/* ============== END LEFT Styles ================= */
+#menu,
+#menu ul,
+#menu li,
+#menu a {
+  padding: 0;
+  margin: 0;
+  color: #f4f4f4;
+}
+#menu,
+#menu ul {
+  list-style: none;
+}
+#menu li,
+#menu a {
+  position: relative;
+  display: block;
+}
+#menu a,
+#menu a:hover,
+#menu a:focus,
+#menu a:active {
+  text-decoration: none;
+}
+#menu ul {
+  background: rgba(0, 0, 0, 0.3);
+}
+#menu > li > a {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+  padding: 10px 0 10px 15px;
+}
+#menu > li.active > a {
+  background-color: rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset;
+}
+#menu > li:hover > a,
+#menu > li:focus > a {
+  background-color: rgba(0, 0, 0, 0.1);
+  outline: none;
+  box-shadow: none;
+}
+#menu > li ul {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  border-left-width: 0;
+}
+#menu > li ul a {
+  padding: 11px 0 11px 30px;
+  font-size: 13px;
+}
+#menu > li ul a:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+@media (min-width: 768px) {
+  .sidebar-left-mini #menu > li > ul {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    box-shadow: none;
+    min-width: 200px;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: none;
+    top: 100%;
+  }
+  .sidebar-left-mini #menu > li:hover > ul {
+    display: inherit;
+    visibility: visible;
+  }
+}
+@media (min-width: 768px) {
+  .sidebar-left-mini #menu > li > a .fa {
+    font-size: 18px;
+  }
+  .sidebar-left-mini #menu > li > a .fa.arrow {
+    display: none;
+  }
+  .sidebar-left-mini #menu > li > a .link-title {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    position: absolute;
+    left: 100%;
+    top: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.85);
+    display: none;
+    padding: 10px 30px;
+  }
+  .sidebar-left-mini #menu > li:hover > a > .link-title {
+    display: block;
+    min-width: 200px;
+  }
+}
+body:not(.sidebar-left-mini) #menu .nav-header {
+  padding: 3px 15px !important;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.05) inset;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.1);
+}
+#menu .nav-divider {
+  height: 1rem;
+  margin: 0;
+  background: rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset;
+}
+.sidebar-left-mini #menu .nav-header {
+  position: absolute !important;
+  overflow: hidden !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+}
+#menu .fa.arrow {
+  float: right;
+  padding-top: 3px;
+  margin-right: 15px;
+}
+#menu .fa.arrow:before {
+  content: "\f104";
+}
+#menu .active > a > .fa.arrow:before {
+  content: "\f107";
+}
+/* BEGIN CONTENT STYLES */
+#content {
+  transition: width 0.4s;
+}
+.outer {
+  padding: 10px;
+  background-color: #6e6e6e;
+}
+.outer:before,
+.outer:after {
+  content: " ";
+  display: table;
+}
+.outer:after {
+  clear: both;
+}
+.inner {
+  position: relative;
+  min-height: 1px;
+  padding-right: 10px;
+  padding-left: 10px;
+  background: #fff;
+  border: 10px solid #e4e4e4;
+}
+@media (min-width: 768px) {
+  .inner {
+    float: left;
+    width: 100%;
+  }
+}
+/* END CONTENT STYLES */
+/* ==========================================================================
+   Footer
+   ========================================================================== */
+.Footer,
+#footer {
+  margin: 0 auto;
+  color: #f4f4f4;
+  border-top: 1px solid #222;
+}
+.Footer p,
+#footer p {
+  padding: 1.2rem 0;
+  margin: 0;
+  text-align: center;
+}
+/* END Footer
+   ========================================================================== */
+/*********************************************************/
+/*                 Component Styles                      */
+/*********************************************************/
+.box {
+  margin: 10px auto;
+  display: block;
+  position: relative;
+  border: 1px solid #efefef;
+}
+.box header {
+  background-image: linear-gradient(to bottom, #fff 0%, #f2f2f2 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
+  border-bottom: 1px solid #d4d4d4;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+}
+.box header:before,
+.box header:after {
+  content: " ";
+  display: table;
+}
+.box header:after {
+  clear: both;
+}
+.box header .icons,
+.box header h5,
+.box header .toolbar {
+  position: relative;
+  min-height: 1px;
+  float: left;
+  padding: 0;
+  margin: 0;
+  display: block;
+}
+.box header .icons {
+  padding: 10px 15px;
+  border-right: 1px solid #ddd;
+  box-shadow: 1px 0px 0px #fff;
+}
+.box header h5 {
+  padding: 12px;
+  font-weight: bold;
+}
+.box.inverse header {
+  background-image: linear-gradient(to bottom, #333 0%, #222 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=0);
+  border-bottom: 1px solid #4d4d4d;
+  color: #f5f5f5;
+}
+.box.inverse header .icons {
+  border-right: 1px solid #222;
+  box-shadow: 1px 0px 0px #3c3c3c;
+}
+.box.primary header {
+  background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
+  border-bottom: 1px solid #337ab7;
+  color: #fff;
+}
+.box.primary header .icons {
+  border-right: 1px solid #1d4568;
+  box-shadow: 1px 0px 0px #5094ce;
+}
+.box.success header {
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+  border-bottom: 1px solid #5cb85c;
+  color: #fff;
+}
+.box.success header .icons {
+  border-right: 1px solid #357935;
+  box-shadow: 1px 0px 0px #80c780;
+}
+.box.warning header {
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+  border-bottom: 1px solid #f0ad4e;
+  color: #fff;
+}
+.box.warning header .icons {
+  border-right: 1px solid #c77c11;
+  box-shadow: 1px 0px 0px #f4c37d;
+}
+.box.danger header {
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+  border-bottom: 1px solid #d9534f;
+  color: #fff;
+}
+.box.danger header .icons {
+  border-right: 1px solid #a02622;
+  box-shadow: 1px 0px 0px #e27c79;
+}
+.box.info header {
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+  border-bottom: 1px solid #5bc0de;
+  color: #fff;
+}
+.box.info header .icons {
+  border-right: 1px solid #2390b0;
+  box-shadow: 1px 0px 0px #85d0e7;
+}
+.box header .toolbar {
+  float: right;
+  display: inline-table;
+}
+.box header .toolbar .btn-toolbar {
+  margin: 6px 3px;
+}
+.box header .toolbar .label,
+.box header .toolbar .badge {
+  display: inline-block;
+  margin: 10px;
+}
+.box header .toolbar .nav {
+  margin: 1px 1px 0 0;
+}
+.box header .toolbar .nav > li {
+  display: inline-block;
+}
+.box header .toolbar .nav > li > a {
+  padding-top: 9px;
+}
+.box header .toolbar > .btn {
+  margin-right: 4px;
+}
+.box header .toolbar > .btn-sm,
+.box header .toolbar > .btn-group {
+  margin: 4px;
+}
+.box header .toolbar > .btn-xs {
+  margin: 6px;
+}
+.box header .toolbar .input-sm {
+  margin: 4px -4px;
+}
+.box header .toolbar .progress {
+  min-width: 120px;
+  margin: 10px 4px;
+}
+.box header .toolbar .progress.middle {
+  height: 12px;
+  margin: 13px 4px;
+}
+.box header .toolbar .progress.mini {
+  height: 6px;
+  margin: 16px 4px;
+}
+.full-screen-box {
+  height: 100% !important;
+  width: 100% !important;
+}
+.box.danger .dropdown-menu > li > a:hover,
+.box.danger .dropdown-menu > li > a:focus {
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+}
+.box.info .dropdown-menu > li > a:hover,
+.box.info .dropdown-menu > li > a:focus {
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+}
+.box.success .dropdown-menu > li > a:hover,
+.box.success .dropdown-menu > li > a:focus {
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+}
+.box.warning .dropdown-menu > li > a:hover,
+.box.warning .dropdown-menu > li > a:focus {
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+}
+.box.inverse .dropdown-menu > li > a:hover,
+.box.inverse .dropdown-menu > li > a:focus {
+  background-image: linear-gradient(to bottom, #333 0%, #222 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=0);
+}
+.box .body {
+  padding: 10px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  background-color: #fff;
+}
+.box .body hr {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+.body.collapse:not(.in) {
+  padding: 0;
+}
+.box > .block {
+  padding: 0;
+}
+.row.ui-sortable .box header {
+  cursor: move;
+}
+.btn-metis-1 {
+  color: #fff;
+  background-color: #ee465a;
+  border-color: #c11a39;
+}
+.btn-metis-1:focus,
+.btn-metis-1.focus {
+  color: #fff;
+  background-color: #ea1730;
+  border-color: #510b18;
+}
+.btn-metis-1:hover {
+  color: #fff;
+  background-color: #ea1730;
+  border-color: #8b1329;
+}
+.btn-metis-1:active,
+.btn-metis-1.active,
+.open > .dropdown-toggle.btn-metis-1 {
+  color: #fff;
+  background-color: #ea1730;
+  border-color: #8b1329;
+}
+.btn-metis-1:active:hover,
+.btn-metis-1.active:hover,
+.open > .dropdown-toggle.btn-metis-1:hover,
+.btn-metis-1:active:focus,
+.btn-metis-1.active:focus,
+.open > .dropdown-toggle.btn-metis-1:focus,
+.btn-metis-1:active.focus,
+.btn-metis-1.active.focus,
+.open > .dropdown-toggle.btn-metis-1.focus {
+  color: #fff;
+  background-color: #cb1329;
+  border-color: #510b18;
+}
+.btn-metis-1:active,
+.btn-metis-1.active,
+.open > .dropdown-toggle.btn-metis-1 {
+  background-image: none;
+}
+.btn-metis-1.disabled:hover,
+.btn-metis-1[disabled]:hover,
+fieldset[disabled] .btn-metis-1:hover,
+.btn-metis-1.disabled:focus,
+.btn-metis-1[disabled]:focus,
+fieldset[disabled] .btn-metis-1:focus,
+.btn-metis-1.disabled.focus,
+.btn-metis-1[disabled].focus,
+fieldset[disabled] .btn-metis-1.focus {
+  background-color: #ee465a;
+  border-color: #c11a39;
+}
+.btn-metis-1 .badge {
+  color: #ee465a;
+  background-color: #fff;
+}
+.btn-metis-2 {
+  color: #fff;
+  background-color: #9fd256;
+  border-color: #6fac34;
+}
+.btn-metis-2:focus,
+.btn-metis-2.focus {
+  color: #fff;
+  background-color: #87c134;
+  border-color: #304a16;
+}
+.btn-metis-2:hover {
+  color: #fff;
+  background-color: #87c134;
+  border-color: #517d26;
+}
+.btn-metis-2:active,
+.btn-metis-2.active,
+.open > .dropdown-toggle.btn-metis-2 {
+  color: #fff;
+  background-color: #87c134;
+  border-color: #517d26;
+}
+.btn-metis-2:active:hover,
+.btn-metis-2.active:hover,
+.open > .dropdown-toggle.btn-metis-2:hover,
+.btn-metis-2:active:focus,
+.btn-metis-2.active:focus,
+.open > .dropdown-toggle.btn-metis-2:focus,
+.btn-metis-2:active.focus,
+.btn-metis-2.active.focus,
+.open > .dropdown-toggle.btn-metis-2.focus {
+  color: #fff;
+  background-color: #73a52c;
+  border-color: #304a16;
+}
+.btn-metis-2:active,
+.btn-metis-2.active,
+.open > .dropdown-toggle.btn-metis-2 {
+  background-image: none;
+}
+.btn-metis-2.disabled:hover,
+.btn-metis-2[disabled]:hover,
+fieldset[disabled] .btn-metis-2:hover,
+.btn-metis-2.disabled:focus,
+.btn-metis-2[disabled]:focus,
+fieldset[disabled] .btn-metis-2:focus,
+.btn-metis-2.disabled.focus,
+.btn-metis-2[disabled].focus,
+fieldset[disabled] .btn-metis-2.focus {
+  background-color: #9fd256;
+  border-color: #6fac34;
+}
+.btn-metis-2 .badge {
+  color: #9fd256;
+  background-color: #fff;
+}
+.btn-metis-3 {
+  color: #fff;
+  background-color: #fbb450;
+  border-color: #f89406;
+}
+.btn-metis-3:focus,
+.btn-metis-3.focus {
+  color: #fff;
+  background-color: #fa9f1e;
+  border-color: #7c4a03;
+}
+.btn-metis-3:hover {
+  color: #fff;
+  background-color: #fa9f1e;
+  border-color: #bc7005;
+}
+.btn-metis-3:active,
+.btn-metis-3.active,
+.open > .dropdown-toggle.btn-metis-3 {
+  color: #fff;
+  background-color: #fa9f1e;
+  border-color: #bc7005;
+}
+.btn-metis-3:active:hover,
+.btn-metis-3.active:hover,
+.open > .dropdown-toggle.btn-metis-3:hover,
+.btn-metis-3:active:focus,
+.btn-metis-3.active:focus,
+.open > .dropdown-toggle.btn-metis-3:focus,
+.btn-metis-3:active.focus,
+.btn-metis-3.active.focus,
+.open > .dropdown-toggle.btn-metis-3.focus {
+  color: #fff;
+  background-color: #ef8e05;
+  border-color: #7c4a03;
+}
+.btn-metis-3:active,
+.btn-metis-3.active,
+.open > .dropdown-toggle.btn-metis-3 {
+  background-image: none;
+}
+.btn-metis-3.disabled:hover,
+.btn-metis-3[disabled]:hover,
+fieldset[disabled] .btn-metis-3:hover,
+.btn-metis-3.disabled:focus,
+.btn-metis-3[disabled]:focus,
+fieldset[disabled] .btn-metis-3:focus,
+.btn-metis-3.disabled.focus,
+.btn-metis-3[disabled].focus,
+fieldset[disabled] .btn-metis-3.focus {
+  background-color: #fbb450;
+  border-color: #f89406;
+}
+.btn-metis-3 .badge {
+  color: #fbb450;
+  background-color: #fff;
+}
+.btn-metis-4 {
+  color: #fff;
+  background-color: #A264E7;
+  border-color: #62309A;
+}
+.btn-metis-4:focus,
+.btn-metis-4.focus {
+  color: #fff;
+  background-color: #8838e0;
+  border-color: #241239;
+}
+.btn-metis-4:hover {
+  color: #fff;
+  background-color: #8838e0;
+  border-color: #44216b;
+}
+.btn-metis-4:active,
+.btn-metis-4.active,
+.open > .dropdown-toggle.btn-metis-4 {
+  color: #fff;
+  background-color: #8838e0;
+  border-color: #44216b;
+}
+.btn-metis-4:active:hover,
+.btn-metis-4.active:hover,
+.open > .dropdown-toggle.btn-metis-4:hover,
+.btn-metis-4:active:focus,
+.btn-metis-4.active:focus,
+.open > .dropdown-toggle.btn-metis-4:focus,
+.btn-metis-4:active.focus,
+.btn-metis-4.active.focus,
+.open > .dropdown-toggle.btn-metis-4.focus {
+  color: #fff;
+  background-color: #7521d4;
+  border-color: #241239;
+}
+.btn-metis-4:active,
+.btn-metis-4.active,
+.open > .dropdown-toggle.btn-metis-4 {
+  background-image: none;
+}
+.btn-metis-4.disabled:hover,
+.btn-metis-4[disabled]:hover,
+fieldset[disabled] .btn-metis-4:hover,
+.btn-metis-4.disabled:focus,
+.btn-metis-4[disabled]:focus,
+fieldset[disabled] .btn-metis-4:focus,
+.btn-metis-4.disabled.focus,
+.btn-metis-4[disabled].focus,
+fieldset[disabled] .btn-metis-4.focus {
+  background-color: #A264E7;
+  border-color: #62309A;
+}
+.btn-metis-4 .badge {
+  color: #A264E7;
+  background-color: #fff;
+}
+.btn-metis-5 {
+  color: #fff;
+  background-color: #777;
+  border-color: #555;
+}
+.btn-metis-5:focus,
+.btn-metis-5.focus {
+  color: #fff;
+  background-color: #5e5e5e;
+  border-color: #151515;
+}
+.btn-metis-5:hover {
+  color: #fff;
+  background-color: #5e5e5e;
+  border-color: #363636;
+}
+.btn-metis-5:active,
+.btn-metis-5.active,
+.open > .dropdown-toggle.btn-metis-5 {
+  color: #fff;
+  background-color: #5e5e5e;
+  border-color: #363636;
+}
+.btn-metis-5:active:hover,
+.btn-metis-5.active:hover,
+.open > .dropdown-toggle.btn-metis-5:hover,
+.btn-metis-5:active:focus,
+.btn-metis-5.active:focus,
+.open > .dropdown-toggle.btn-metis-5:focus,
+.btn-metis-5:active.focus,
+.btn-metis-5.active.focus,
+.open > .dropdown-toggle.btn-metis-5.focus {
+  color: #fff;
+  background-color: #4c4c4c;
+  border-color: #151515;
+}
+.btn-metis-5:active,
+.btn-metis-5.active,
+.open > .dropdown-toggle.btn-metis-5 {
+  background-image: none;
+}
+.btn-metis-5.disabled:hover,
+.btn-metis-5[disabled]:hover,
+fieldset[disabled] .btn-metis-5:hover,
+.btn-metis-5.disabled:focus,
+.btn-metis-5[disabled]:focus,
+fieldset[disabled] .btn-metis-5:focus,
+.btn-metis-5.disabled.focus,
+.btn-metis-5[disabled].focus,
+fieldset[disabled] .btn-metis-5.focus {
+  background-color: #777;
+  border-color: #555;
+}
+.btn-metis-5 .badge {
+  color: #777;
+  background-color: #fff;
+}
+.btn-metis-6 {
+  color: #fff;
+  background-color: #00b4f5;
+  border-color: #008dc5;
+}
+.btn-metis-6:focus,
+.btn-metis-6.focus {
+  color: #fff;
+  background-color: #008fc2;
+  border-color: #003246;
+}
+.btn-metis-6:hover {
+  color: #fff;
+  background-color: #008fc2;
+  border-color: #006188;
+}
+.btn-metis-6:active,
+.btn-metis-6.active,
+.open > .dropdown-toggle.btn-metis-6 {
+  color: #fff;
+  background-color: #008fc2;
+  border-color: #006188;
+}
+.btn-metis-6:active:hover,
+.btn-metis-6.active:hover,
+.open > .dropdown-toggle.btn-metis-6:hover,
+.btn-metis-6:active:focus,
+.btn-metis-6.active:focus,
+.open > .dropdown-toggle.btn-metis-6:focus,
+.btn-metis-6:active.focus,
+.btn-metis-6.active.focus,
+.open > .dropdown-toggle.btn-metis-6.focus {
+  color: #fff;
+  background-color: #00749e;
+  border-color: #003246;
+}
+.btn-metis-6:active,
+.btn-metis-6.active,
+.open > .dropdown-toggle.btn-metis-6 {
+  background-image: none;
+}
+.btn-metis-6.disabled:hover,
+.btn-metis-6[disabled]:hover,
+fieldset[disabled] .btn-metis-6:hover,
+.btn-metis-6.disabled:focus,
+.btn-metis-6[disabled]:focus,
+fieldset[disabled] .btn-metis-6:focus,
+.btn-metis-6.disabled.focus,
+.btn-metis-6[disabled].focus,
+fieldset[disabled] .btn-metis-6.focus {
+  background-color: #00b4f5;
+  border-color: #008dc5;
+}
+.btn-metis-6 .badge {
+  color: #00b4f5;
+  background-color: #fff;
+}
+.btn-grad.btn-default,
+.btn-grad.btn-primary,
+.btn-grad.btn-success,
+.btn-grad.btn-info,
+.btn-grad.btn-warning,
+.btn-grad.btn-danger {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.btn-grad.btn-default:active,
+.btn-grad.btn-primary:active,
+.btn-grad.btn-success:active,
+.btn-grad.btn-info:active,
+.btn-grad.btn-warning:active,
+.btn-grad.btn-danger:active,
+.btn-grad.btn-default.active,
+.btn-grad.btn-primary.active,
+.btn-grad.btn-success.active,
+.btn-grad.btn-info.active,
+.btn-grad.btn-warning.active,
+.btn-grad.btn-danger.active {
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn-grad.btn:active,
+.btn-grad.btn.active {
+  background-image: none;
+}
+.btn-grad.btn-default {
+  background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  text-shadow: 0 1px 0 #fff;
+  border-color: #ccc;
+}
+.btn-grad.btn-default:hover,
+.btn-grad.btn-default:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-default:active,
+.btn-grad.btn-default.active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+.btn-grad.btn-primary {
+  background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #245580;
+}
+.btn-grad.btn-primary:hover,
+.btn-grad.btn-primary:focus {
+  background-color: #265a88;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-primary:active,
+.btn-grad.btn-primary.active {
+  background-color: #265a88;
+  border-color: #245580;
+}
+.btn-grad.btn-success {
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #3e8f3e;
+}
+.btn-grad.btn-success:hover,
+.btn-grad.btn-success:focus {
+  background-color: #419641;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-success:active,
+.btn-grad.btn-success.active {
+  background-color: #419641;
+  border-color: #3e8f3e;
+}
+.btn-grad.btn-warning {
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #e38d13;
+}
+.btn-grad.btn-warning:hover,
+.btn-grad.btn-warning:focus {
+  background-color: #eb9316;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-warning:active,
+.btn-grad.btn-warning.active {
+  background-color: #eb9316;
+  border-color: #e38d13;
+}
+.btn-grad.btn-danger {
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #b92c28;
+}
+.btn-grad.btn-danger:hover,
+.btn-grad.btn-danger:focus {
+  background-color: #c12e2a;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-danger:active,
+.btn-grad.btn-danger.active {
+  background-color: #c12e2a;
+  border-color: #b92c28;
+}
+.btn-grad.btn-info {
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #28a4c9;
+}
+.btn-grad.btn-info:hover,
+.btn-grad.btn-info:focus {
+  background-color: #2aabd2;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-info:active,
+.btn-grad.btn-info.active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
+.btn-grad.btn-metis-1 {
+  background-image: linear-gradient(to bottom, #ee465a 0%, #e2152d 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee465a', endColorstr='#ffe2152d', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #d9142b;
+}
+.btn-grad.btn-metis-1:hover,
+.btn-grad.btn-metis-1:focus {
+  background-color: #e2152d;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-metis-1:active,
+.btn-grad.btn-metis-1.active {
+  background-color: #e2152d;
+  border-color: #d9142b;
+}
+.btn-grad.btn-metis-2 {
+  background-image: linear-gradient(to bottom, #9fd256 0%, #81b931 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9fd256', endColorstr='#ff81b931', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #7cb12f;
+}
+.btn-grad.btn-metis-2:hover,
+.btn-grad.btn-metis-2:focus {
+  background-color: #81b931;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-metis-2:active,
+.btn-grad.btn-metis-2.active {
+  background-color: #81b931;
+  border-color: #7cb12f;
+}
+.btn-grad.btn-metis-3 {
+  background-image: linear-gradient(to bottom, #fbb450 0%, #fa9a14 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fffa9a14', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #f9960a;
+}
+.btn-grad.btn-metis-3:hover,
+.btn-grad.btn-metis-3:focus {
+  background-color: #fa9a14;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-metis-3:active,
+.btn-grad.btn-metis-3.active {
+  background-color: #fa9a14;
+  border-color: #f9960a;
+}
+.btn-grad.btn-metis-4 {
+  background-image: linear-gradient(to bottom, #A264E7 0%, #822fdf 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa264e7', endColorstr='#ff822fdf', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #7d26dd;
+}
+.btn-grad.btn-metis-4:hover,
+.btn-grad.btn-metis-4:focus {
+  background-color: #822fdf;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-metis-4:active,
+.btn-grad.btn-metis-4.active {
+  background-color: #822fdf;
+  border-color: #7d26dd;
+}
+.btn-grad.btn-metis-5 {
+  background-image: linear-gradient(to bottom, #777 0%, #585858 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff777777', endColorstr='#ff585858', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #535353;
+}
+.btn-grad.btn-metis-5:hover,
+.btn-grad.btn-metis-5:focus {
+  background-color: #585858;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-metis-5:active,
+.btn-grad.btn-metis-5.active {
+  background-color: #585858;
+  border-color: #535353;
+}
+.btn-grad.btn-metis-6 {
+  background-image: linear-gradient(to bottom, #00b4f5 0%, #0087b8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00b4f5', endColorstr='#ff0087b8', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #0080ae;
+}
+.btn-grad.btn-metis-6:hover,
+.btn-grad.btn-metis-6:focus {
+  background-color: #0087b8;
+  background-position: 0 -15px;
+}
+.btn-grad.btn-metis-6:active,
+.btn-grad.btn-metis-6.active {
+  background-color: #0087b8;
+  border-color: #0080ae;
+}
+.btn-circle {
+  border-radius: 500px;
+  width: 40px;
+  height: 40px;
+  padding: 8px 10px;
+}
+.btn-circle.btn-lg {
+  width: 60px;
+  height: 60px;
+  padding: 14px 16px;
+}
+.btn-circle.btn-sm {
+  width: 30px;
+  height: 30px;
+  padding: 5px 10px;
+}
+.btn-circle.btn-xs {
+  width: 20px;
+  height: 20px;
+  padding: 0 5px;
+}
+.btn-rect {
+  border-radius: 0 !important;
+}
+.btn-round.btn {
+  border-radius: 28px;
+}
+.btn-round.btn-xs {
+  border-radius: 28px;
+}
+.btn-round.btn-sm {
+  border-radius: 28px;
+}
+.btn-round.btn-lg {
+  border-radius: 28px;
+}
+.btn-line.btn-default {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+.btn-line.btn-default:hover,
+.btn-line.btn-default:focus,
+.btn-line.btn-default:active,
+.btn-line.btn-default.active {
+  background-color: #262626;
+  color: #fff;
+  border-color: #b3b3b3;
+}
+.btn-line.btn-default.disabled,
+.btn-line.btn-default[disabled],
+fieldset[disabled] .btn-line.btn-default,
+.btn-line.btn-default.disabled:hover,
+.btn-line.btn-default[disabled]:hover,
+fieldset[disabled] .btn-line.btn-default:hover,
+.btn-line.btn-default.disabled:focus,
+.btn-line.btn-default[disabled]:focus,
+fieldset[disabled] .btn-line.btn-default:focus,
+.btn-line.btn-default.disabled:active,
+.btn-line.btn-default[disabled]:active,
+fieldset[disabled] .btn-line.btn-default:active,
+.btn-line.btn-default.disabled.active,
+.btn-line.btn-default[disabled].active,
+fieldset[disabled] .btn-line.btn-default.active {
+  background-color: #fff;
+  border-color: #ccc;
+}
+.btn-line.btn-primary {
+  color: #337ab7;
+  background-color: #fff;
+  border-color: #2e6da4;
+}
+.btn-line.btn-primary:hover,
+.btn-line.btn-primary:focus,
+.btn-line.btn-primary:active,
+.btn-line.btn-primary.active {
+  background-color: #2e6da4;
+  color: #fff;
+  border-color: #23527c;
+}
+.btn-line.btn-primary.disabled,
+.btn-line.btn-primary[disabled],
+fieldset[disabled] .btn-line.btn-primary,
+.btn-line.btn-primary.disabled:hover,
+.btn-line.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-line.btn-primary:hover,
+.btn-line.btn-primary.disabled:focus,
+.btn-line.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-line.btn-primary:focus,
+.btn-line.btn-primary.disabled:active,
+.btn-line.btn-primary[disabled]:active,
+fieldset[disabled] .btn-line.btn-primary:active,
+.btn-line.btn-primary.disabled.active,
+.btn-line.btn-primary[disabled].active,
+fieldset[disabled] .btn-line.btn-primary.active {
+  background-color: #fff;
+  border-color: #2e6da4;
+}
+.btn-line.btn-warning {
+  color: #f0ad4e;
+  background-color: #fff;
+  border-color: #eea236;
+}
+.btn-line.btn-warning:hover,
+.btn-line.btn-warning:focus,
+.btn-line.btn-warning:active,
+.btn-line.btn-warning.active {
+  background-color: #eea236;
+  color: #fff;
+  border-color: #df8a13;
+}
+.btn-line.btn-warning.disabled,
+.btn-line.btn-warning[disabled],
+fieldset[disabled] .btn-line.btn-warning,
+.btn-line.btn-warning.disabled:hover,
+.btn-line.btn-warning[disabled]:hover,
+fieldset[disabled] .btn-line.btn-warning:hover,
+.btn-line.btn-warning.disabled:focus,
+.btn-line.btn-warning[disabled]:focus,
+fieldset[disabled] .btn-line.btn-warning:focus,
+.btn-line.btn-warning.disabled:active,
+.btn-line.btn-warning[disabled]:active,
+fieldset[disabled] .btn-line.btn-warning:active,
+.btn-line.btn-warning.disabled.active,
+.btn-line.btn-warning[disabled].active,
+fieldset[disabled] .btn-line.btn-warning.active {
+  background-color: #fff;
+  border-color: #eea236;
+}
+.btn-line.btn-danger {
+  color: #d9534f;
+  background-color: #fff;
+  border-color: #d43f3a;
+}
+.btn-line.btn-danger:hover,
+.btn-line.btn-danger:focus,
+.btn-line.btn-danger:active,
+.btn-line.btn-danger.active {
+  background-color: #d43f3a;
+  color: #fff;
+  border-color: #b52b27;
+}
+.btn-line.btn-danger.disabled,
+.btn-line.btn-danger[disabled],
+fieldset[disabled] .btn-line.btn-danger,
+.btn-line.btn-danger.disabled:hover,
+.btn-line.btn-danger[disabled]:hover,
+fieldset[disabled] .btn-line.btn-danger:hover,
+.btn-line.btn-danger.disabled:focus,
+.btn-line.btn-danger[disabled]:focus,
+fieldset[disabled] .btn-line.btn-danger:focus,
+.btn-line.btn-danger.disabled:active,
+.btn-line.btn-danger[disabled]:active,
+fieldset[disabled] .btn-line.btn-danger:active,
+.btn-line.btn-danger.disabled.active,
+.btn-line.btn-danger[disabled].active,
+fieldset[disabled] .btn-line.btn-danger.active {
+  background-color: #fff;
+  border-color: #d43f3a;
+}
+.btn-line.btn-success {
+  color: #5cb85c;
+  background-color: #fff;
+  border-color: #4cae4c;
+}
+.btn-line.btn-success:hover,
+.btn-line.btn-success:focus,
+.btn-line.btn-success:active,
+.btn-line.btn-success.active {
+  background-color: #4cae4c;
+  color: #fff;
+  border-color: #3d8b3d;
+}
+.btn-line.btn-success.disabled,
+.btn-line.btn-success[disabled],
+fieldset[disabled] .btn-line.btn-success,
+.btn-line.btn-success.disabled:hover,
+.btn-line.btn-success[disabled]:hover,
+fieldset[disabled] .btn-line.btn-success:hover,
+.btn-line.btn-success.disabled:focus,
+.btn-line.btn-success[disabled]:focus,
+fieldset[disabled] .btn-line.btn-success:focus,
+.btn-line.btn-success.disabled:active,
+.btn-line.btn-success[disabled]:active,
+fieldset[disabled] .btn-line.btn-success:active,
+.btn-line.btn-success.disabled.active,
+.btn-line.btn-success[disabled].active,
+fieldset[disabled] .btn-line.btn-success.active {
+  background-color: #fff;
+  border-color: #4cae4c;
+}
+.btn-line.btn-info {
+  color: #5bc0de;
+  background-color: #fff;
+  border-color: #46b8da;
+}
+.btn-line.btn-info:hover,
+.btn-line.btn-info:focus,
+.btn-line.btn-info:active,
+.btn-line.btn-info.active {
+  background-color: #46b8da;
+  color: #fff;
+  border-color: #28a1c5;
+}
+.btn-line.btn-info.disabled,
+.btn-line.btn-info[disabled],
+fieldset[disabled] .btn-line.btn-info,
+.btn-line.btn-info.disabled:hover,
+.btn-line.btn-info[disabled]:hover,
+fieldset[disabled] .btn-line.btn-info:hover,
+.btn-line.btn-info.disabled:focus,
+.btn-line.btn-info[disabled]:focus,
+fieldset[disabled] .btn-line.btn-info:focus,
+.btn-line.btn-info.disabled:active,
+.btn-line.btn-info[disabled]:active,
+fieldset[disabled] .btn-line.btn-info:active,
+.btn-line.btn-info.disabled.active,
+.btn-line.btn-info[disabled].active,
+fieldset[disabled] .btn-line.btn-info.active {
+  background-color: #fff;
+  border-color: #46b8da;
+}
+.btn-line.btn-metis-1 {
+  color: #ee465a;
+  background-color: #fff;
+  border-color: #c11a39;
+}
+.btn-line.btn-metis-1:hover,
+.btn-line.btn-metis-1:focus,
+.btn-line.btn-metis-1:active,
+.btn-line.btn-metis-1.active {
+  background-color: #ec2f45;
+  color: #fff;
+  border-color: #94142c;
+}
+.btn-line.btn-metis-1.disabled,
+.btn-line.btn-metis-1[disabled],
+fieldset[disabled] .btn-line.btn-metis-1,
+.btn-line.btn-metis-1.disabled:hover,
+.btn-line.btn-metis-1[disabled]:hover,
+fieldset[disabled] .btn-line.btn-metis-1:hover,
+.btn-line.btn-metis-1.disabled:focus,
+.btn-line.btn-metis-1[disabled]:focus,
+fieldset[disabled] .btn-line.btn-metis-1:focus,
+.btn-line.btn-metis-1.disabled:active,
+.btn-line.btn-metis-1[disabled]:active,
+fieldset[disabled] .btn-line.btn-metis-1:active,
+.btn-line.btn-metis-1.disabled.active,
+.btn-line.btn-metis-1[disabled].active,
+fieldset[disabled] .btn-line.btn-metis-1.active {
+  background-color: #fff;
+  border-color: #c11a39;
+}
+.btn-line.btn-metis-2 {
+  color: #9fd256;
+  background-color: #fff;
+  border-color: #6fac34;
+}
+.btn-line.btn-metis-2:hover,
+.btn-line.btn-metis-2:focus,
+.btn-line.btn-metis-2:active,
+.btn-line.btn-metis-2.active {
+  background-color: #94cd42;
+  color: #fff;
+  border-color: #568528;
+}
+.btn-line.btn-metis-2.disabled,
+.btn-line.btn-metis-2[disabled],
+fieldset[disabled] .btn-line.btn-metis-2,
+.btn-line.btn-metis-2.disabled:hover,
+.btn-line.btn-metis-2[disabled]:hover,
+fieldset[disabled] .btn-line.btn-metis-2:hover,
+.btn-line.btn-metis-2.disabled:focus,
+.btn-line.btn-metis-2[disabled]:focus,
+fieldset[disabled] .btn-line.btn-metis-2:focus,
+.btn-line.btn-metis-2.disabled:active,
+.btn-line.btn-metis-2[disabled]:active,
+fieldset[disabled] .btn-line.btn-metis-2:active,
+.btn-line.btn-metis-2.disabled.active,
+.btn-line.btn-metis-2[disabled].active,
+fieldset[disabled] .btn-line.btn-metis-2.active {
+  background-color: #fff;
+  border-color: #6fac34;
+}
+.btn-line.btn-metis-3 {
+  color: #fbb450;
+  background-color: #fff;
+  border-color: #f89406;
+}
+.btn-line.btn-metis-3:hover,
+.btn-line.btn-metis-3:focus,
+.btn-line.btn-metis-3:active,
+.btn-line.btn-metis-3.active {
+  background-color: #faa937;
+  color: #fff;
+  border-color: #c67605;
+}
+.btn-line.btn-metis-3.disabled,
+.btn-line.btn-metis-3[disabled],
+fieldset[disabled] .btn-line.btn-metis-3,
+.btn-line.btn-metis-3.disabled:hover,
+.btn-line.btn-metis-3[disabled]:hover,
+fieldset[disabled] .btn-line.btn-metis-3:hover,
+.btn-line.btn-metis-3.disabled:focus,
+.btn-line.btn-metis-3[disabled]:focus,
+fieldset[disabled] .btn-line.btn-metis-3:focus,
+.btn-line.btn-metis-3.disabled:active,
+.btn-line.btn-metis-3[disabled]:active,
+fieldset[disabled] .btn-line.btn-metis-3:active,
+.btn-line.btn-metis-3.disabled.active,
+.btn-line.btn-metis-3[disabled].active,
+fieldset[disabled] .btn-line.btn-metis-3.active {
+  background-color: #fff;
+  border-color: #f89406;
+}
+.btn-line.btn-metis-4 {
+  color: #A264E7;
+  background-color: #fff;
+  border-color: #62309A;
+}
+.btn-line.btn-metis-4:hover,
+.btn-line.btn-metis-4:focus,
+.btn-line.btn-metis-4:active,
+.btn-line.btn-metis-4.active {
+  background-color: #954ee4;
+  color: #fff;
+  border-color: #492473;
+}
+.btn-line.btn-metis-4.disabled,
+.btn-line.btn-metis-4[disabled],
+fieldset[disabled] .btn-line.btn-metis-4,
+.btn-line.btn-metis-4.disabled:hover,
+.btn-line.btn-metis-4[disabled]:hover,
+fieldset[disabled] .btn-line.btn-metis-4:hover,
+.btn-line.btn-metis-4.disabled:focus,
+.btn-line.btn-metis-4[disabled]:focus,
+fieldset[disabled] .btn-line.btn-metis-4:focus,
+.btn-line.btn-metis-4.disabled:active,
+.btn-line.btn-metis-4[disabled]:active,
+fieldset[disabled] .btn-line.btn-metis-4:active,
+.btn-line.btn-metis-4.disabled.active,
+.btn-line.btn-metis-4[disabled].active,
+fieldset[disabled] .btn-line.btn-metis-4.active {
+  background-color: #fff;
+  border-color: #62309A;
+}
+.btn-line.btn-metis-5 {
+  color: #777;
+  background-color: #fff;
+  border-color: #555;
+}
+.btn-line.btn-metis-5:hover,
+.btn-line.btn-metis-5:focus,
+.btn-line.btn-metis-5:active,
+.btn-line.btn-metis-5.active {
+  background-color: #6a6a6a;
+  color: #fff;
+  border-color: #3b3b3b;
+}
+.btn-line.btn-metis-5.disabled,
+.btn-line.btn-metis-5[disabled],
+fieldset[disabled] .btn-line.btn-metis-5,
+.btn-line.btn-metis-5.disabled:hover,
+.btn-line.btn-metis-5[disabled]:hover,
+fieldset[disabled] .btn-line.btn-metis-5:hover,
+.btn-line.btn-metis-5.disabled:focus,
+.btn-line.btn-metis-5[disabled]:focus,
+fieldset[disabled] .btn-line.btn-metis-5:focus,
+.btn-line.btn-metis-5.disabled:active,
+.btn-line.btn-metis-5[disabled]:active,
+fieldset[disabled] .btn-line.btn-metis-5:active,
+.btn-line.btn-metis-5.disabled.active,
+.btn-line.btn-metis-5[disabled].active,
+fieldset[disabled] .btn-line.btn-metis-5.active {
+  background-color: #fff;
+  border-color: #555;
+}
+.btn-line.btn-metis-6 {
+  color: #00b4f5;
+  background-color: #fff;
+  border-color: #008dc5;
+}
+.btn-line.btn-metis-6:hover,
+.btn-line.btn-metis-6:focus,
+.btn-line.btn-metis-6:active,
+.btn-line.btn-metis-6.active {
+  background-color: #00a1dc;
+  color: #fff;
+  border-color: #006892;
+}
+.btn-line.btn-metis-6.disabled,
+.btn-line.btn-metis-6[disabled],
+fieldset[disabled] .btn-line.btn-metis-6,
+.btn-line.btn-metis-6.disabled:hover,
+.btn-line.btn-metis-6[disabled]:hover,
+fieldset[disabled] .btn-line.btn-metis-6:hover,
+.btn-line.btn-metis-6.disabled:focus,
+.btn-line.btn-metis-6[disabled]:focus,
+fieldset[disabled] .btn-line.btn-metis-6:focus,
+.btn-line.btn-metis-6.disabled:active,
+.btn-line.btn-metis-6[disabled]:active,
+fieldset[disabled] .btn-line.btn-metis-6:active,
+.btn-line.btn-metis-6.disabled.active,
+.btn-line.btn-metis-6[disabled].active,
+fieldset[disabled] .btn-line.btn-metis-6.active {
+  background-color: #fff;
+  border-color: #008dc5;
+}
+.btn-flat {
+  border-width: 0 !important;
+}
+/* BEGIN animated checkbox styles */
+.anim-checkbox {
+  /*adding some colors for fun*/
+}
+.anim-checkbox label {
+  position: relative;
+}
+.anim-checkbox label:before,
+.anim-checkbox label:after {
+  font-family: FontAwesome;
+  /*absolutely positioned*/
+  position: absolute;
+  left: 0;
+}
+.anim-checkbox label:before {
+  content: '\f096';
+  /*unchecked*/
+}
+.anim-checkbox label:after {
+  content: '\f046';
+  /*checked*/
+  /*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
+  max-width: 0;
+  overflow: hidden;
+  opacity: 0.5;
+  /*CSS3 transitions for animated effect*/
+  transition: all 0.35s;
+}
+.anim-checkbox input[type="checkbox"] {
+  display: none;
+}
+.anim-checkbox input[type="checkbox"]:checked + label:after {
+  max-width: 25px;
+  /*an arbitratry number more than the icon's width*/
+  opacity: 1;
+  /*for fade in effect*/
+}
+.anim-checkbox .primary:checked + label:before,
+.anim-checkbox .primary:checked + label:after {
+  color: #337ab7;
+}
+.anim-checkbox .success:checked + label:before,
+.anim-checkbox .success:checked + label:after {
+  color: #5cb85c;
+}
+.anim-checkbox .warning:checked + label:before,
+.anim-checkbox .warning:checked + label:after {
+  color: #f0ad4e;
+}
+.anim-checkbox .danger:checked + label:before,
+.anim-checkbox .danger:checked + label:after {
+  color: #d9534f;
+}
+.anim-checkbox .info:checked + label:before,
+.anim-checkbox .info:checked + label:after {
+  color: #5bc0de;
+}
+/* END animated checkbox styles */
+/* BEGIN Pricing Table */
+.pricing-table {
+  text-align: center;
+  padding: 0;
+  margin: 30px 0;
+  line-height: 150%;
+}
+.pricing-table li {
+  list-style: none;
+}
+.pricing-table > li {
+  background-image: linear-gradient(to bottom, #EBEEF5 0%, #fff 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebeef5', endColorstr='#ffffffff', GradientType=0);
+  color: #444;
+  transition: all 0.2s;
+}
+.pricing-table.dark > li {
+  background-image: linear-gradient(to bottom, #666 0%, #444 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff666666', endColorstr='#ff444444', GradientType=0);
+  color: #fff;
+}
+.pricing-table.dark > li.active.default {
+  color: #fff;
+}
+.pricing-table > li.active {
+  color: #fff;
+  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+.pricing-table > li.active.default {
+  color: #444;
+}
+@media (min-width: 768px) {
+  .pricing-table > li.active {
+    -webkit-transform: scale(1.03);
+    transform: scale(1.03);
+  }
+}
+.pricing-table > li.active.primary {
+  background-image: linear-gradient(to bottom, #2e6da4 0%, #337ab7 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2e6da4', endColorstr='#ff337ab7', GradientType=0);
+}
+.pricing-table > li.active.success {
+  background-image: linear-gradient(to bottom, #4cae4c 0%, #5cb85c 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4cae4c', endColorstr='#ff5cb85c', GradientType=0);
+}
+.pricing-table > li.active.warning {
+  background-image: linear-gradient(to bottom, #eea236 0%, #f0ad4e 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeea236', endColorstr='#fff0ad4e', GradientType=0);
+}
+.pricing-table > li.active.danger {
+  background-image: linear-gradient(to bottom, #d43f3a 0%, #d9534f 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd43f3a', endColorstr='#ffd9534f', GradientType=0);
+}
+.pricing-table > li.active.info {
+  background-image: linear-gradient(to bottom, #46b8da 0%, #5bc0de 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff46b8da', endColorstr='#ff5bc0de', GradientType=0);
+}
+.pricing-table .footer {
+  padding: 15px;
+  margin: 15px -15px 0;
+  background: #eee;
+}
+.pricing-table.dark .footer {
+  background: #333;
+}
+.pricing-table h3 {
+  text-transform: uppercase;
+  padding: 15px 0;
+}
+.pricing-table .price-body {
+  width: 125px;
+  height: 125px;
+  margin: 0 auto 15px auto;
+  border: 2px solid #444;
+  border-radius: 100%;
+  display: table;
+}
+.pricing-table.dark .price-body {
+  border-color: #fff;
+}
+.pricing-table > li.active.primary .price-body,
+.pricing-table > li.active.success .price-body,
+.pricing-table > li.active.warning .price-body,
+.pricing-table > li.active.danger .price-body,
+.pricing-table > li.active.info .price-body {
+  border-color: #fff;
+}
+.pricing-table .price {
+  font-size: 30px;
+  font-weight: bold;
+  text-transform: uppercase;
+  /*Lets vertically center align the price now*/
+  vertical-align: middle;
+  display: table-cell;
+}
+.pricing-table .price .price-figure {
+  display: block;
+}
+.pricing-table .price .price-term {
+  font-size: 11px;
+  font-weight: normal;
+}
+.pricing-table .features ul {
+  margin: 0;
+  padding: 0;
+}
+.pricing-table .features ul li {
+  padding: 5px 0;
+}
+/* END Pricing Table */
+/* horizontal rules */
+.inner hr {
+  margin-top: 10px;
+  border-top-color: #ccc;
+}
+/* BEGIN PROGRESSBAR STYLES */
+.progress.xs {
+  height: 6px;
+}
+.progress.sm {
+  height: 10px;
+}
+.progress.md {
+  height: 12px;
+}
+.progress.lg {
+  height: 28px;
+}
+/* END PROGRESSBAR STYLES */
+.quick-btn {
+  background: #EEEEEE;
+  box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
+  color: #444444;
+  display: inline-block;
+  height: 80px;
+  margin: 10px;
+  padding-top: 16px;
+  text-align: center;
+  text-decoration: none;
+  width: 90px;
+  position: relative;
+}
+.quick-btn span {
+  display: block;
+}
+.quick-btn .label {
+  position: absolute;
+  right: -5px;
+  top: -5px;
+}
+.quick-btn:hover {
+  text-decoration: none;
+  color: #fff;
+  background-color: #4d7589;
+}
+.quick-btn.small {
+  width: 40px;
+  height: 30px;
+  padding-top: 6px;
+}
+.simpleTable tr th:first-child,
+.simpleTable tr td:first-child {
+  text-align: center;
+  width: 27px;
+}
+/* BEGIN SORTABLETABLE STYLES */
+.sortableTable th {
+  background-image: linear-gradient(to bottom, #fff 0%, #f2f2f2 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
+  cursor: pointer;
+}
+.sortableTable th:hover {
+  color: #888;
+}
+.sortableTable th.tablesorter-header .fa.sort:before {
+  content: "\f0dc";
+}
+.sortableTable th.tablesorter-header.tablesorter-headerDesc .fa.sort:before {
+  content: "\f0de";
+}
+.sortableTable th.tablesorter-header.tablesorter-headerAsc .fa.sort:before {
+  content: "\f0dd";
+}
+/* END SORTABLETABLE STYLES */
+/* BEGIN SPARKLINE STYLES */
+.sparkline {
+  min-width: 50px;
+  border-right: 1px solid #DCDCDC;
+  box-shadow: 1px 0 0 0 #FFFFFF;
+  float: left;
+  margin-right: 12px;
+  padding: 10px 14px 0px 4px;
+  line-height: 52px;
+}
+/* END SPARKLINE STYLES */
+.stats_box {
+  display: inline-block;
+  list-style: none outside none;
+  margin-left: 0;
+  margin-top: 20px;
+  padding: 0;
+}
+.stats_box li {
+  background: #EEEEEE;
+  box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
+  display: inline-block;
+  line-height: 18px;
+  margin: 0 10px 10px;
+  padding: 0 10px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+  float: left;
+}
+.stats_box .stat_text {
+  float: left;
+  font-size: 12px;
+  padding: 9px 10px 7px 0;
+  text-align: left;
+  min-width: 150px;
+  position: relative;
+}
+.stats_box .stat_text strong {
+  display: block;
+  font-size: 16px;
+}
+.stats_box .stat_text .percent {
+  color: #444;
+  float: right;
+  font-size: 20px;
+  font-weight: bold;
+  position: absolute;
+  right: 0;
+  top: 17px;
+}
+.stats_box .stat_text .percent.up {
+  color: #46a546;
+}
+.stats_box .stat_text .percent.down {
+  color: #C52F61;
+}
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 1em;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #999;
+}
+::-webkit-scrollbar-track {
+  border-radius: 1em;
+  background: transparent;
+}
+::-webkit-scrollbar-track:hover {
+  background: rgba(110, 110, 110, 0.25);
+}
+/* BEGIN FULLCALENDAR STYLES */
+.fc-event.label {
+  border: 1px solid #808080;
+  color: #fff;
+  font-size: .85em;
+  cursor: default;
+  background-color: #999999;
+}
+.fc-event.label.label-default {
+  border-color: #6a6a6a;
+  background-color: #777777;
+}
+.fc-event.label.label-default[href]:hover,
+.fc-event.label.label-default[href]:focus {
+  background-color: #5e5e5e;
+}
+.fc-event.label.label-primary {
+  border-color: #2e6da4;
+  background-color: #337ab7;
+}
+.fc-event.label.label-primary[href]:hover,
+.fc-event.label.label-primary[href]:focus {
+  background-color: #286090;
+}
+.fc-event.label.label-success {
+  border-color: #4cae4c;
+  background-color: #5cb85c;
+}
+.fc-event.label.label-success[href]:hover,
+.fc-event.label.label-success[href]:focus {
+  background-color: #449d44;
+}
+.fc-event.label.label-info {
+  border-color: #46b8da;
+  background-color: #5bc0de;
+}
+.fc-event.label.label-info[href]:hover,
+.fc-event.label.label-info[href]:focus {
+  background-color: #31b0d5;
+}
+.fc-event.label.label-warning {
+  border-color: #eea236;
+  background-color: #f0ad4e;
+}
+.fc-event.label.label-warning[href]:hover,
+.fc-event.label.label-warning[href]:focus {
+  background-color: #ec971f;
+}
+.fc-event.label.label-danger {
+  border-color: #d43f3a;
+  background-color: #d9534f;
+}
+.fc-event.label.label-danger[href]:hover,
+.fc-event.label.label-danger[href]:focus {
+  background-color: #c9302c;
+}
+/* END FULLCALENDAR STYLES */
+/* ==========================================================================
+metisAdmin: HACK
+========================================================================== */
+/**
+* Chosen
+*/
+.chosen-container-single .chosen-single,
+.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
+  height: auto !important;
+}
+/**
+* Sparkline
+*/
+.jqstooltip {
+  box-sizing: content-box;
+}
+/**
+* Google Maps
+*/
+.google-maps {
+  min-height: 300px;
+}
+/**
+* Bootstrap-Timepicker
+*/
+.icon-chevron-up,
+.icon-chevron-down {
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  font-family: 'Glyphicons Halflings';
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-chevron-up:before {
+  content: "\e113";
+}
+.icon-chevron-down:before {
+  content: "\e114";
+}
+/**
+* Bootstrap-Wysihtml5
+*/
+iframe.wysihtml5-sandbox {
+  width: 100% !important;
+}
+/**
+* Elfinder
+*/
+.elfinder,
+.elfinder * {
+  box-sizing: content-box;
+}
+/**
+* Bootstrap-Colorpicker
+*/
+.colorpicker-saturation {
+  background-image: url(../lib/colorpicker/img/saturation.png) !important;
+}
+.colorpicker-hue {
+  background-image: url(../lib/colorpicker/img/hue.png) !important;
+}
+.colorpicker-alpha {
+  background-image: url(../lib/colorpicker/img/alpha.png) !important;
+}
+.colorpicker-color {
+  background-image: url(../lib/colorpicker/img/alpha.png) !important;
+}
+/**
+* Uniform
+*/
+div.uploader {
+  width: auto !important;
+}
+.p-xs {
+  padding: 10px;
+}
+.p-xs-t {
+  padding-top: 10px;
+}
+.p-xs-l {
+  padding-left: 10px;
+}
+.p-xs-b {
+  padding-bottom: 10px;
+}
+.p-xs-r {
+  padding-right: 10px;
+}
+.p-sm {
+  padding: 15px;
+}
+.p-sm-t {
+  padding-top: 15px;
+}
+.p-sm-l {
+  padding-left: 15px;
+}
+.p-sm-b {
+  padding-bottom: 15px;
+}
+.p-sm-r {
+  padding-right: 15px;
+}
+.p-md {
+  padding: 25px;
+}
+.p-md-t {
+  padding-top: 25px;
+}
+.p-md-l {
+  padding-left: 25px;
+}
+.p-md-b {
+  padding-bottom: 25px;
+}
+.p-md-r {
+  padding-right: 25px;
+}
+.p-lg {
+  padding: 40px;
+}
+.p-lg-t {
+  padding-top: 40px;
+}
+.p-lg-l {
+  padding-left: 40px;
+}
+.p-lg-b {
+  padding-bottom: 40px;
+}
+.p-lg-r {
+  padding-right: 40px;
+}
+.m-xs {
+  margin: 10px;
+}
+.m-xs-t {
+  margin-top: 10px;
+}
+.m-xs-l {
+  margin-left: 10px;
+}
+.m-xs-b {
+  margin-bottom: 10px;
+}
+.m-xs-r {
+  margin-right: 10px;
+}
+.m-sm {
+  margin: 15px;
+}
+.m-sm-t {
+  margin-top: 15px;
+}
+.m-sm-l {
+  margin-left: 15px;
+}
+.m-sm-b {
+  margin-bottom: 15px;
+}
+.m-sm-r {
+  margin-right: 15px;
+}
+.m-md {
+  margin: 25px;
+}
+.m-md-t {
+  margin-top: 25px;
+}
+.m-md-l {
+  margin-left: 25px;
+}
+.m-md-b {
+  margin-bottom: 25px;
+}
+.m-md-r {
+  margin-right: 25px;
+}
+.m-lg {
+  margin: 40px;
+}
+.m-lg-t {
+  margin-top: 40px;
+}
+.m-lg-l {
+  margin-left: 40px;
+}
+.m-lg-b {
+  margin-bottom: 40px;
+}
+.m-lg-r {
+  margin-right: 40px;
+}
+.bg-red {
+  background-color: #B90000;
+  color: #fff !important;
+}
+.bg-red.dker,
+.bg-red > .dker {
+  background-color: #900000 !important;
+}
+.bg-red.dk,
+.bg-red > .dk {
+  background-color: #a50000 !important;
+}
+.bg-red.lt,
+.bg-red > .lt {
+  background-color: #cd0000 !important;
+}
+.bg-red.lter,
+.bg-red > .lter {
+  background-color: #e20000 !important;
+}
+.bg-brick {
+  background-color: #CD6723;
+  color: #fff !important;
+}
+.bg-brick.dker,
+.bg-brick > .dker {
+  background-color: #aa551d !important;
+}
+.bg-brick.dk,
+.bg-brick > .dk {
+  background-color: #bc5e20 !important;
+}
+.bg-brick.lt,
+.bg-brick > .lt {
+  background-color: #db712a !important;
+}
+.bg-brick.lter,
+.bg-brick > .lter {
+  background-color: #de7c3b !important;
+}
+.bg-orange {
+  background-color: #FF4E00;
+  color: #fff !important;
+}
+.bg-orange.dker,
+.bg-orange > .dker {
+  background-color: #d64200 !important;
+}
+.bg-orange.dk,
+.bg-orange > .dk {
+  background-color: #eb4800 !important;
+}
+.bg-orange.lt,
+.bg-orange > .lt {
+  background-color: #ff5c14 !important;
+}
+.bg-orange.lter,
+.bg-orange > .lter {
+  background-color: #ff6a29 !important;
+}
+.bg-green {
+  background-color: #4B780A;
+  color: #fff !important;
+}
+.bg-green.dker,
+.bg-green > .dker {
+  background-color: #335207 !important;
+}
+.bg-green.dk,
+.bg-green > .dk {
+  background-color: #3f6508 !important;
+}
+.bg-green.lt,
+.bg-green > .lt {
+  background-color: #578b0c !important;
+}
+.bg-green.lter,
+.bg-green > .lter {
+  background-color: #639e0d !important;
+}
+.bg-blue {
+  background-color: #00CAF2;
+  color: #fff !important;
+}
+.bg-blue.dker,
+.bg-blue > .dker {
+  background-color: #00a8c9 !important;
+}
+.bg-blue.dk,
+.bg-blue > .dk {
+  background-color: #00b9de !important;
+}
+.bg-blue.lt,
+.bg-blue > .lt {
+  background-color: #07d6ff !important;
+}
+.bg-blue.lter,
+.bg-blue > .lter {
+  background-color: #1cd9ff !important;
+}
+.bg-black {
+  background-color: #222;
+  color: #fff !important;
+}
+.bg-black.dker,
+.bg-black > .dker {
+  background-color: #0e0e0e !important;
+}
+.bg-black.dk,
+.bg-black > .dk {
+  background-color: #181818 !important;
+}
+.bg-black.lt,
+.bg-black > .lt {
+  background-color: #2c2c2c !important;
+}
+.bg-black.lter,
+.bg-black > .lter {
+  background-color: #363636 !important;
+}
+.bg-dark {
+  background-color: #444;
+  color: #fff !important;
+}
+.bg-dark.dker,
+.bg-dark > .dker {
+  background-color: #303030 !important;
+}
+.bg-dark.dk,
+.bg-dark > .dk {
+  background-color: #3a3a3a !important;
+}
+.bg-dark.lt,
+.bg-dark > .lt {
+  background-color: #4e4e4e !important;
+}
+.bg-dark.lter,
+.bg-dark > .lter {
+  background-color: #585858 !important;
+}
+.bg-light {
+  background-color: #eee;
+  color: #333 !important;
+}
+.bg-light.dker,
+.bg-light > .dker {
+  background-color: #dadada !important;
+}
+.bg-light.dk,
+.bg-light > .dk {
+  background-color: #e4e4e4 !important;
+}
+.bg-light.lt,
+.bg-light > .lt {
+  background-color: #f8f8f8 !important;
+}
+.bg-light.lter,
+.bg-light > .lter {
+  background-color: #ffffff !important;
+}
+.bg-brillant {
+  background: url("../img/pattern/brillant.png") repeat;
+}
+.bg-always_grey {
+  background: url("../img/pattern/always_grey.png") repeat;
+}
+.bg-retina_wood {
+  background: url("../img/pattern/retina_wood.png") repeat;
+}
+.bg-low_contrast_linen {
+  background: url("../img/pattern/low_contrast_linen.png") repeat;
+}
+.bg-egg_shell {
+  background: url("../img/pattern/egg_shell.png") repeat;
+}
+.bg-cartographer {
+  background: url("../img/pattern/cartographer.png") repeat;
+}
+.bg-batthern {
+  background: url("../img/pattern/batthern.png") repeat;
+}
+.bg-noisy_grid {
+  background: url("../img/pattern/noisy_grid.png") repeat;
+}
+.bg-diamond_upholstery {
+  background: url("../img/pattern/diamond_upholstery.png") repeat;
+}
+.bg-greyfloral {
+  background: url("../img/pattern/greyfloral.png") repeat;
+}
+.bg-white_tiles {
+  background: url("../img/pattern/white_tiles.png") repeat;
+}
+.bg-gplaypattern {
+  background: url("../img/pattern/gplaypattern.png") repeat;
+}
+.bg-arches {
+  background: url("../img/pattern/arches.png") repeat;
+}
+.bg-purty_wood {
+  background: url("../img/pattern/purty_wood.png") repeat;
+}
+.bg-diagonal_striped_brick {
+  background: url("../img/pattern/diagonal_striped_brick.png") repeat;
+}
+.bg-large_leather {
+  background: url("../img/pattern/large_leather.png") repeat;
+}
+.bg-bo_play_pattern {
+  background: url("../img/pattern/bo_play_pattern.png") repeat;
+}
+.bg-irongrip {
+  background: url("../img/pattern/irongrip.png") repeat;
+}
+.bg-wood_1 {
+  background: url("../img/pattern/wood_1.png") repeat;
+}
+.bg-pool_table {
+  background: url("../img/pattern/pool_table.png") repeat;
+}
+.bg-crissXcross {
+  background: url("../img/pattern/crissXcross.png") repeat;
+}
+.bg-rip_jobs {
+  background: url("../img/pattern/rip_jobs.png") repeat;
+}
+.bg-random_grey_variations {
+  background: url("../img/pattern/random_grey_variations.png") repeat;
+}
+.bg-carbon_fibre {
+  background: url("../img/pattern/carbon_fibre.png") repeat;
+}
+/* BEGIN ERROR PAGES STYLES */
+body.error {
+  padding-top: 40px;
+  background: url("../img/pattern/always_grey.png") repeat rgba(68, 68, 68, 0.9);
+}
+body.error .logo h1 {
+  color: #FFFFFF;
+  font-size: 100px;
+  text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
+}
+@media (max-width: 767px) {
+  body.error .logo h1 {
+    font-size: 60px;
+  }
+}
+/* END ERROR PAGES STYLES */
+/* BEGIN LOGIN PAGE STYLES */
+.login {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background: url("../img/pattern/irongrip.png") repeat #444;
+}
+.login .form-signin {
+  max-width: 330px;
+  padding: 20px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 3px;
+}
+.login .form-signin .form-signin-heading,
+.login .form-signin .checkbox {
+  margin-bottom: 10px;
+}
+.login .form-signin .checkbox {
+  font-weight: normal;
+}
+.login .form-signin input[type="text"],
+.login .form-signin input[type="password"],
+.login .form-signin input[type="email"] {
+  position: relative;
+  font-size: 16px;
+  height: auto;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+.login .form-signin input[type="text"]:focus,
+.login .form-signin input[type="password"]:focus,
+.login .form-signin input[type="email"]:focus {
+  z-index: 2;
+}
+.login .form-signin input.top {
+  margin-bottom: -1px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.login .form-signin input.middle {
+  margin-bottom: -1px;
+  border-radius: 0;
+}
+.login .form-signin input.bottom {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+/* END LOGIN PAGE STYLES */
diff --git a/ui/css/theme.css b/ui/css/theme.css
new file mode 100644
index 0000000..7c5e55d
--- /dev/null
+++ b/ui/css/theme.css
@@ -0,0 +1,27 @@
+/**
+ * bootstrap-admin-template - Free Admin Template Based On Twitter Bootstrap 3.x
+ * @version 2.4.2
+ * @license MIT
+ * @link https://github.com/puikinsh/Bootstrap-Admin-Template
+ */
+body.boxed {
+  background: url("../img/pattern/arches.png") repeat;
+}
+#top > .navbar {
+  border-top: 3px solid #428bca;
+}
+#top > .navbar .dropdown-menu > li > a:hover,
+#top > .navbar .dropdown-menu > li > a:focus {
+  background-color: #428bca;
+  color: #ffffff;
+}
+#menu {
+  background-color: #428bca !important;
+}
+#menu > li > a {
+  color: #ffffff;
+  text-shadow: none !important;
+}
+.sidebar-left-mini #menu > li > a > .link-title {
+  background-color: #3681c1 !important;
+}
diff --git a/ui/css/warble.min.css b/ui/css/warble.min.css
new file mode 100644
index 0000000..fdaa253
--- /dev/null
+++ b/ui/css/warble.min.css
@@ -0,0 +1,3075 @@
+/*
+ * Kibble CSS
+ */
+
+.link_node circle {
+    fill: steelblue;
+}
+.link_node text {
+    font: bold 13px sans-serif;
+    fill: black;
+    stroke-width: 1;
+    stroke-position: outside;
+    stroke: rgba(255,255,255,0.75);
+    cursor: help;
+}
+.link_link {
+    fill: none;
+    stroke: #000;
+    stroke-opacity: .3;
+}
+
+.link_tooltip {	
+    position: absolute;			
+    text-align: center;			
+    min-width: 60px;					
+    min-height: 28px;					
+    padding: 4px;				
+    font: 12px sans-serif;		
+    background: rgba(0,0,0,0.6);	
+    color: #FFF;
+    border-radius: 8px;			
+    pointer-events: none;
+    z-index: 2000;
+}
+
+.bio-image {
+   padding: 8px;
+   margin: 8px;
+   border: 1px solid #999;
+   border-radius: 2px;
+   float: left;
+}
+
+.bio-profile {
+   padding: 8px;
+   margin: 8px;
+   border: 1px solid #999;
+   border-radius: 2px;
+   background: #EEE;
+   min-height: 144px;
+   float: left;
+}
+
+.bio-profile h3 {
+   font-size: 1.75rem;
+}
+
+.bio-profile h2,h3 {
+   float: none;
+   margin: 2px;
+}
+
+.bio-profile hr {
+   border-top: 1px solid #AAA;
+   border-bottom: 1px solid #FFF;
+   margin: 1px;
+}
+
+.bio-fact {
+   border-right: 1px dotted #999;
+   padding: 4px;
+   margin: 4px;
+   padding-right: 12px;
+   float: left;
+   text-align: center;
+}
+
+.bio-fact:last-child {
+   border-right: none;
+}
+
+.bio-fact strong {
+   font-size: 12px;
+   text-transform: uppercase !important;
+   font-weight: normal;
+}
+
+.bio-fact span {
+   font-size: 16px;
+   font-weight: bold;
+}
+
+.media-body>p {
+   margin: 0px;
+}
+
+.media.event {
+   margin-top: 5px !important;
+   border-bottom: 0.5px solid #CCC;
+}
+
+.sourceTypeIcon {
+   float: left;
+   border: 2px solid #116BE0;
+   color: #FFF;
+   font-weight: bold;
+   cursor: pointer;
+   margin: 10px;
+   border-radius: 10px;
+   text-align: center;
+   background: linear-gradient(to bottom, #1f69a5 0%,#258dc8 100%);
+   padding-right: 4px;
+   height: 44px;
+   min-width: 120px;
+   vertical-align: middle;
+}
+
+.sourceTypeIcon:hover, .sourceTypeIcon.selected {
+   background: linear-gradient(to bottom, #1fa569 0%,#25c88d 100%);
+   border-color: #25e88d;
+}
+
+.form-control  {
+   
+    width: 100%;
+    height: 34px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+    z-index: 10;
+    overflow: visible;
+}
+
+
+/* Spinner */
+.spinner {
+    z-index: 100;
+    position: fixed;
+    top: calc(40% - 90px);
+    left: calc(50% - 150px);
+    width: 360px;
+    height: 240px;
+    background: #3285BC;
+    border-radius: 8px;
+    font-size: 9pt;
+    color: #FFF;
+    text-align: center;
+    font-family: sans-serif;
+}
+.spinwheel {
+    margin: 28px auto;
+    border-top: 10px solid rgba(30,190,200,0.95);
+    border-right: 10px solid rgba(220, 30, 120, 0.95);
+    border-bottom: 10px solid rgba(120, 200, 30, 0.95);
+    border-left: 10px solid rgba(220,190,30,0.95);
+    transform: translateZ(0);
+    animation: spin1 1s infinite;
+}
+
+.spinwheel, .spinwheel:after {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+}
+
+.spinwheel_md {
+    margin: 10px 10px;
+    border-top: 10px solid rgba(30,190,200,0.95);
+    border-right: 10px solid rgba(220, 30, 120, 0.95);
+    border-bottom: 10px solid rgba(120, 200, 30, 0.95);
+    border-left: 10px solid rgba(220,190,30,0.95);
+}
+
+.spinwheel_md, .spinwheel_md:after {
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+}
+
+.spinwheel_sm {
+    margin: 10px 10px;
+    border-top: 10px solid rgba(30,190,200,0.95);
+    border-right: 10px solid rgba(220, 30, 120, 0.95);
+    border-bottom: 10px solid rgba(120, 200, 30, 0.95);
+    border-left: 10px solid rgba(220,190,30,0.95);
+}
+
+.spinwheel_sm, .spinwheel_sm:after {
+    border-radius: 50%;
+    width: 0px;
+    height: 0px;
+}
+
+@keyframes spin1 {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+
+nav:not(h1,h2,text) {
+    background: #202024 !important;
+    height: 100%;
+    font-size: 1.2em !important;
+}
+html {
+    height: 100%;
+    background: #EBEFF2;
+}
+
+body {
+    min-height: calc(100% - 48px);
+}
+
+.dashboard {
+    background: #EBEFF2 !important;
+    /*min-height: calc(100% - 88px);*/
+    position: relative;
+}
+
+select {
+    max-width: 300px;
+}
+
+.panel_toolbox > li > a{
+    background: none !important;
+}
+
+/* ERROR MODAL DIALOG */
+.errorModal {
+    position: fixed; /* Stay in place */
+    z-index: 1000; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.errorModalInner {
+    visibility: hidden;
+    opacity: 0;
+    width: 480px;
+    border: 1px solid #888;
+    border-top: 20px solid #820;
+    border-radius: 8px;
+    background-color: #fefefe;
+    margin: 15% auto; /* 15% from the top and centered */
+    padding: 20px;
+    transition: opacity 600ms, visibility 600ms;
+    font-size: 1.25em;
+}
+
+/* SIDE MENU */
+
+nav.menu {
+   position: absolute;
+   
+    background: #008FD5;
+    float: left;
+    width: 160px;
+    color: #445;
+    font-size: 1.1em;
+    border-right: 1px solid #999;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+#user_image {
+   width: 32px; border: 1.5px solid #FFF; border-radius: 25%; margin-top: 10px;
+}
+
+nav.menu > div.sidemenu > ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    width: 160px;
+    float: left;
+}
+nav.menu > div.sidemenu > ul > a:last-child > li{
+    border-bottom: 1px solid #CCD;
+}
+
+nav.menu > div.sidemenu > ul > a > li {
+    border-top: 1px solid #CCD;
+    border-bottom: 1px solid #AAB;
+    height: 40px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top:10px;
+    margin-left: -4px;
+    min-width: 48px;
+    font-size: 0.75rem;
+    font-family: montserrat light, sans-serif;
+    background: rgba(0,0,0,0.15);    
+}
+
+nav.menu > div.sidemenu > ul > a > li {
+    text-decoration: none;
+    color: #FFF;
+    font-size: 1.1rem;
+}
+
+nav.menu > div.sidemenu > ul > a > li:hover {
+    background: #008FD5;
+}
+
+nav.menu > div.sidemenu > ul > a {
+   text-decoration: none;
+}
+
+nav.menu > div.sidemenu> ul > a > li > img {
+   height: 24px;
+   vertical-align: middle;
+}
+
+nav.menu > div.sidemenu {
+    width: 160px;
+    float: left;
+    
+}
+
+.sidetitle {
+   color: #FFD;
+   font-weight: bold;
+   font-size: 1.15rem;
+   text-align: center;
+}
+
+nav.menu > div.profile {
+    width: 145px;
+    margin: 10px;
+    background: rgba(0,0,0,0.2);
+    color: #FFF;
+    border: 1px inset rgba(100,120,140,0.75);
+    border-radius: 5px;
+    padding: 3px;
+    height: 80px;
+    font-size: 11px;
+}
+
+
+
+div.wrapper {
+    box-flex: 1;
+    height: calc(100% - 48px);
+    background: #CCC;
+}
+
+nav.titlebar {
+    margin: 0px;
+    padding: 0px;
+    height: 46px;
+    font-family: Montserrat, sanf-serif;
+    font-size: 32px;
+    color: #223;
+    text-align: center;
+    width: calc(100% - 175px);
+}
+
+nav.topbar {
+    margin: 4px auto;
+    padding: 0px;
+    background: #434;
+    height: 48px;
+    border-radius: 4px;
+    width: 1000px;
+}
+
+nav.titlebar > div.searchbar {
+    width: 160px;
+    float: left;
+
+    margin-right: 49px;
+}
+
+nav.topbar > img.logo {
+    height: 48px;
+    vertical-align: middle;
+    padding: 3px;
+    float: left;
+    margin-right: 20px;
+    margin-left: 20px;
+}
+
+nav.topbar > ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+nav.topbar > ul > a.selected > li {
+    background: #858;
+    color: #FFF;
+}
+
+nav.topbar > ul > a > li {
+    display: inline-block;
+    height: 48px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top:12px;
+    margin-left: -4px;
+    min-width: 48px;
+    font-weight: normal;
+    font-family: montserrat light, sans-serif;
+}
+
+nav.topbar > ul > a > li {
+    text-decoration: none;
+    color: #EEE;
+}
+
+nav.topbar > ul > a > li:hover {
+    color: #FCF;
+}
+
+nav.topbar > ul > a > li > img {
+   height: 24px;
+   vertical-align: middle;
+}
+
+
+div.wrap1 {
+    padding: 0px;
+    float: right;
+    width: calc(100% - 175px);
+    position: relative;
+}
+
+div.wrap2 {
+    padding: 0px;
+}
+
+div.wrap3 {
+    padding: 0px;
+}
+
+
+.x_title {
+    background: #955F95;
+    box-sizing: border-box;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    border-bottom: 1px solid #d4d4d4;
+    height: 28px;
+    width: 100%;
+    color: #FFF;
+    border-radius: 3px;
+    padding: 2px 2px 2px 8px;
+    
+}
+
+h2 {
+    display: block;
+    float: left;
+    margin-top: 2px;
+    font-size: 1.6em !important;
+    font-weight: bold;
+    margin-right: 16px;
+    margin-bottom: 0px;
+}
+
+.x_title h2 {
+    display: block;
+    float: left;
+    margin-top: 2px;
+    font-size: 1.3em !important;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space:nowrap;
+    width: calc(100% - 88px);
+}
+
+
+
+.clearfix {
+    box-sizing: border-box;
+}
+
+.x_content {
+    padding: 0 5px 12px;
+    width: 100%;
+    float: left;
+    clear: both;
+    background: #FFF;
+    border: 2px solid #AAA;
+    border-radius: 3px;
+    height: calc(100% - 42px);
+    overflow: visible;
+    
+}
+
+.chartChart {
+    max-height: 240px !important;
+}
+
+.snoot_widget {
+    color: #333;
+    height: 100%;
+    box-sizing: border-box;
+    flex: 1;
+    padding: 6px;
+    padding-bottom: 0px;
+}
+
+.orgItem {
+   width: calc(100% - 40px);
+   border: 2px solid #666;
+   float: left;
+   padding: 10px;
+   margin: 10px;
+}
+
+.orgSelected {
+   background: #DFD;
+}
+
+.orgItem:hover {
+   background: #FFD;
+   border: 2px solid #669;
+   cursor: pointer;
+}
+
+.row {
+   display: flex;
+   margin: 0;
+   overflow-y: visible;
+}
+
+.img-circle {
+    width: 32px !important;
+    height: 32px !important;
+}
+
+.panel_toolbox  > li {
+    display: inline-block !important;
+    position: relative;
+    overflow: visible;
+    width: 28px;
+}
+
+.panel_toolbox {
+    min-width: 70px;
+    float: right !important;
+    margin-right: 2px;
+    margin-top: -6px;
+    list-style: none;
+    display: inline-block;
+    height: 24px;
+}
+
+
+.collapse-link, .close-link {
+   color: #FFF;
+   cursor: pointer;
+}
+
+
+.Footer,#footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 48px
+}
+
+#wrap:before,#top:before,.head:before,.Footer:before,#wrap:after,#top:after,.head:after,.Footer:after {
+    content: " ";
+    display: table
+}
+
+#wrap:after,#top:after,.head:after,.Footer:after {
+    clear: both
+}
+
+.Wrap,#wrap {
+    margin: 0 auto;
+    position: relative
+}
+
+#left,#right {
+    -webkit-transition: all .3s ease-in-out;
+    -o-transition: all .3s ease-in-out;
+    transition: all .3s ease-in-out;
+    width: 250px;
+    z-index: 999
+}
+
+#left {
+    position: absolute;
+    left: -250px
+}
+
+#right {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    overflow-y: auto;
+    right: -250px
+}
+
+.sidebar-left-opened #left {
+    left: 0
+}
+
+.sidebar-right-opened {
+    position: relative;
+    right: 250px
+}
+
+.sidebar-right-opened #right {
+    right: 0
+}
+
+.sidebar-right-opened.fixed .navbar-fixed-top {
+    right: 250px
+}
+
+@media (min-width:768px) {
+    #left {
+        position: relative;
+        float: left;
+        left: auto
+    }
+
+    .sidebar-left-hidden #left {
+        width: 0;
+        visibility: hidden
+    }
+
+    .sidebar-left-mini #left {
+        width: 50px
+    }
+
+    #content {
+        -webkit-transition: all .3s ease-in-out;
+        -o-transition: all .3s ease-in-out;
+        transition: all .3s ease-in-out;
+        
+        text-overflow: ellipsis;
+        white-space: nowrap
+    }
+
+    .sidebar-right-opened {
+        right: 0;
+        margin-right: 250px
+    }
+
+    .sidebar-right-opened .navbar-fixed-top {
+        margin-right: 250px
+    }
+}
+
+@media (min-width:1200px) {
+    body.boxed {
+        margin-bottom: 0
+    }
+
+    body.boxed .Wrap,body.boxed #wrap,body.boxed .Footer,body.boxed #top .navbar.navbar-fixed-top {
+        max-width: 1170px;
+        margin-left: auto;
+        margin-right: auto
+    }
+
+    body.boxed .Footer,body.boxed #footer {
+        position: relative
+    }
+}
+
+#top .navbar {
+    margin-bottom: 0;
+    border-top: 3px solid #cd0067
+}
+
+#top .navbar-brand {
+    padding: 0
+}
+
+#top .topnav {
+    margin: 10px 0;
+    text-align: right
+}
+
+@media (min-width:768px) {
+    #top .topnav {
+        float: right
+    }
+}
+
+.head {
+    border-bottom: 1px solid rgba(0,0,0,0.3);
+    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
+    text-shadow: 0 1px 0 rgba(0,0,0,0.5)
+}
+
+.head .search-bar {
+    margin: 0 auto;
+    padding: 10px 15px;
+    border-bottom: 1px solid rgba(0,0,0,0.3);
+    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.05);
+    box-shadow: 0 1px 0 rgba(255,255,255,0.05)
+}
+
+.head .search-bar .main-search {
+    border-bottom: 1px solid #7c7c7c
+}
+
+.head .search-bar .main-search input[type="text"] {
+    background-color: transparent;
+    border-color: transparent;
+    color: #ccc;
+    -webkit-box-shadow: none;
+    box-shadow: none
+}
+
+.head .search-bar .main-search button,.head .search-bar .main-search input[type=submit] {
+    background: transparent;
+    border: transparent
+}
+
+@media (min-width:768px) {
+    .head .search-bar {
+        border-bottom-width: 0;
+        border-right: 1px solid rgba(0,0,0,0.3);
+        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.05) inset;
+        box-shadow: -1px 0 0 rgba(255,255,255,0.05) inset
+    }
+
+    .side-right .head .search-bar {
+        border-right-width: 0;
+        border-left: 1px solid rgba(0,0,0,0.3);
+        -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.05) inset;
+        box-shadow: 1px 0 0 rgba(255,255,255,0.05) inset
+    }
+}
+
+.head .main-bar {
+    padding: 10px
+}
+
+button {
+    margin: 3px;
+    min-width: 64px;
+}
+.head .main-bar h3 {
+    margin-top: 0;
+    margin-bottom: 0;
+    color: #bababa
+}
+
+@media (min-width:768px) {
+    .head .main-bar h3 {
+        margin-top: 5px
+    }
+}
+
+@media (min-width:768px) {
+    .head .search-bar .main-search {
+        margin-right: auto
+    }
+}
+
+@media (min-width:768px) {
+    .search-bar {
+        float: left;
+        padding: 10px 4px
+    }
+
+    .side-right .search-bar {
+        float: right
+    }
+
+    .search-bar .input-small.form-control {
+        border-radius: 3px
+    }
+
+    .main-bar {
+        display: block;
+        overflow: hidden
+    }
+}
+
+@media (min-width:992px) {
+    .search-bar {
+        width: 250px;
+        padding: 10px 15px
+    }
+
+    .search-bar .input-group-btn {
+        display: table-cell
+    }
+
+    .search-bar .input-small.form-control {
+        border-radius: 3px 0 0 3px
+    }
+
+    .mini-sidebar .search-bar .input-small.form-control {
+        border-radius: 3px
+    }
+}
+
+.user-media .user-link {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative
+}
+
+.user-media .user-link .user-img {
+    margin: 10px auto
+}
+
+.user-media .user-link .user-label {
+    position: absolute;
+    top: -6px;
+    right: 6px
+}
+
+.user-media .user-link {
+    float: left
+}
+
+.user-media .user-link .user-img {
+    margin: 10px
+}
+
+.user-media .user-link .user-label {
+    top: 6px;
+    right: 0
+}
+
+.user-media .media-body {
+    display: block;
+    float: left;
+    margin-left: 12px
+}
+
+.user-media .media-body h5.media-heading {
+    color: #fff;
+    padding-top: 8px;
+    margin-bottom: 3px
+}
+
+.user-media .media-body ul.user-info li {
+    color: #ccc
+}
+
+.user-media:before,.user-media:after {
+    content: " ";
+    display: table
+}
+
+.user-media:after {
+    clear: both
+}
+
+.side-right .user-link .user-label {
+    left: 6px;
+    right: auto
+}
+
+.sidebar-left-mini .user-wrapper {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    display: none;
+    min-width: 250px
+}
+
+.user-media-toggleHover {
+    display: none
+}
+
+.sidebar-left-mini .user-media-toggleHover {
+    font-size: 18px;
+    color: #fff;
+    padding: 10px;
+    text-align: center;
+    cursor: pointer;
+    display: inherit
+}
+
+.sidebar-left-mini .user-media:hover .user-wrapper {
+    left: 100%;
+    display: inherit;
+    z-index: 9999
+}
+
+.sidebar-left-mini.side-right .user-media:hover .user-wrapper {
+    left: auto;
+    right: 100%
+}
+
+#menu,#menu ul,#menu li,#menu a {
+    padding: 0;
+    margin: 0;
+    color: #f4f4f4
+}
+
+#menu,#menu ul {
+    list-style: none
+}
+
+#menu li,#menu a {
+    position: relative;
+    display: block
+}
+
+#menu a,#menu a:hover,#menu a:focus,#menu a:active {
+    text-decoration: none
+}
+
+#menu ul {
+    background: rgba(0,0,0,0.3)
+}
+
+#menu>li>a {
+    border-top: 1px solid rgba(0,0,0,0.1);
+    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
+    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
+    padding: 10px 0 10px 15px
+}
+
+#menu>li.active>a {
+    background-color: rgba(0,0,0,0.1);
+    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset
+}
+
+#menu>li:hover>a,#menu>li:focus>a {
+    background-color: rgba(0,0,0,0.1);
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none
+}
+
+#menu>li ul {
+    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
+    border-left-width: 0
+}
+
+#menu>li ul a {
+    padding: 11px 0 11px 30px;
+    font-size: 13px
+}
+
+#menu>li ul a:hover {
+    background-color: rgba(0,0,0,0.1)
+}
+
+#menu.affix {
+    position: fixed;
+    width: 250px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch
+}
+
+#menu.affix:hover {
+    overflow-y: scroll
+}
+
+@media (min-width:768px) {
+    body:not(.sidebar-left-mini) #menu li.active>ul,#menu.affix li>ul {
+        position: relative;
+        top: auto !important;
+        left: auto !important;
+        right: auto !important
+    }
+
+    body:not(.sidebar-left-mini) #menu:not(.affix) li.active>ul {
+        display: inherit
+    }
+
+    #menu li>ul,.sidebar-left-mini #menu li>ul {
+        position: absolute;
+        top: 0;
+        left: 100%;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        min-width: 200px;
+        z-index: 1;
+        background-color: rgba(0,0,0,0.8)
+    }
+
+    #menu:not(.affix) li>ul,.sidebar-left-mini #menu:not(.affix) li>ul {
+        display: none
+    }
+
+    .sidebar-left-mini #menu>li>ul {
+        top: 100%
+    }
+
+    #menu li>ul>li>ul {
+        top: 0
+    }
+
+    .side-right #menu li>ul {
+        left: auto;
+        right: 100%
+    }
+
+    #menu:not(.affix) li:hover>ul {
+        display: inherit;
+        visibility: visible
+    }
+
+    .sidebar-left-mini #menu.affix {
+        position: relative !important
+    }
+}
+
+@media (min-width:768px) {
+    .sidebar-left-mini #menu>li>a .fa {
+        font-size: 18px
+    }
+
+    .sidebar-left-mini #menu>li>a .fa.arrow {
+        display: none
+    }
+
+    .sidebar-left-mini #menu>li>a .link-title {
+        border-top: 1px solid rgba(0,0,0,0.1);
+        border-right: 1px solid rgba(0,0,0,0.1);
+        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
+        position: absolute;
+        left: 100%;
+        top: -1px;
+        z-index: 1;
+        background: rgba(0,0,0,0.85);
+        display: none;
+        padding: 10px 30px
+    }
+
+    .sidebar-left-mini #menu>li:hover>a>.link-title {
+        display: block;
+        min-width: 200px
+    }
+
+    .sidebar-left-mini.side-right #menu>li>a .link-title {
+        border-right-width: 0;
+        border-left: 1px solid rgba(0,0,0,0.1);
+        left: auto;
+        right: 100%
+    }
+}
+
+body:not(.sidebar-left-mini) #menu .nav-header {
+    padding: 3px 15px !important;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 12px;
+    border-top: 1px solid rgba(0,0,0,0.1);
+    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
+    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
+    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
+    background: rgba(0,0,0,0.1)
+}
+
+#menu .nav-divider {
+    height: 1rem;
+    margin: 0;
+    background: rgba(0,0,0,0.2);
+    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset
+}
+
+.sidebar-left-mini #menu .nav-header {
+    position: absolute !important;
+    overflow: hidden !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important
+}
+
+#menu .fa.arrow {
+    float: right;
+    padding-top: 3px;
+    margin-right: 15px
+}
+
+#menu .fa.arrow:before {
+    content: "\f104"
+}
+
+#menu .active>a>.fa.arrow:before {
+    content: "\f107"
+}
+
+#content {
+    -webkit-transition: width .4s;
+    -o-transition: width .4s;
+    transition: width .4s
+}
+
+.outer {
+    padding: 10px;
+    background-color: #6e6e6e
+}
+
+.outer:before,.outer:after {
+    content: " ";
+    display: table
+}
+
+.outer:after {
+    clear: both
+}
+
+.inner {
+    position: relative;
+    min-height: 1px;
+    padding-right: 10px;
+    padding-left: 10px;
+    background: #fff;
+    border: 10px solid #e4e4e4
+}
+
+@media (min-width:768px) {
+    .inner {
+        float: left;
+        width: 100%
+    }
+}
+
+.Footer,#footer {
+    margin: 0 auto;
+    color: #f4f4f4;
+    border-top: 1px solid #222
+}
+
+.Footer p,#footer p {
+    padding: 1.2rem 0;
+    margin: 0;
+    text-align: center
+}
+
+.box {
+    margin: 10px auto;
+    display: block;
+    position: relative;
+    border: 1px solid #efefef
+}
+
+.box header {
+    background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);
+    background-image: -o-linear-gradient(top, #fff 0, #f2f2f2 100%);
+    background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
+    border-bottom: 1px solid #d4d4d4;
+    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
+    box-shadow: 0 1px 4px rgba(0,0,0,0.065)
+}
+
+.box header:before,.box header:after {
+    content: " ";
+    display: table
+}
+
+.box header:after {
+    clear: both
+}
+
+.box header .icons,.box header h5,.box header .toolbar {
+    position: relative;
+    min-height: 1px;
+    float: left;
+    padding: 0;
+    margin: 0;
+    display: block
+}
+
+.box header .icons {
+    padding: 10px 15px;
+    border-right: 1px solid #ddd;
+    -webkit-box-shadow: 1px 0 0 #fff;
+    box-shadow: 1px 0 0 #fff
+}
+
+.box header h5 {
+    padding: 12px;
+    font-weight: bold
+}
+
+.box.inverse header {
+    background-image: -webkit-linear-gradient(top, #333 0, #222 100%);
+    background-image: -o-linear-gradient(top, #333 0, #222 100%);
+    background-image: linear-gradient(to bottom, #333 0, #222 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=0);
+    border-bottom: 1px solid #4d4d4d;
+    color: #f5f5f5
+}
+
+.box.inverse header .icons {
+    border-right: 1px solid #222;
+    -webkit-box-shadow: 1px 0 0 #3c3c3c;
+    box-shadow: 1px 0 0 #3c3c3c
+}
+
+.box.primary header {
+    background-image: -webkit-linear-gradient(top, #337ab7 0, #286090 100%);
+    background-image: -o-linear-gradient(top, #337ab7 0, #286090 100%);
+    background-image: linear-gradient(to bottom, #337ab7 0, #286090 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
+    border-bottom: 1px solid #337ab7;
+    color: #fff
+}
+
+.box.primary header .icons {
+    border-right: 1px solid #1d4568;
+    -webkit-box-shadow: 1px 0 0 #5094ce;
+    box-shadow: 1px 0 0 #5094ce
+}
+
+.box.success header {
+    background-image: -webkit-linear-gradient(top, #5cb85c 0, #449d44 100%);
+    background-image: -o-linear-gradient(top, #5cb85c 0, #449d44 100%);
+    background-image: linear-gradient(to bottom, #5cb85c 0, #449d44 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+    border-bottom: 1px solid #5cb85c;
+    color: #fff
+}
+
+.box.success header .icons {
+    border-right: 1px solid #357935;
+    -webkit-box-shadow: 1px 0 0 #80c780;
+    box-shadow: 1px 0 0 #80c780
+}
+
+.box.warning header {
+    background-image: -webkit-linear-gradient(top, #f0ad4e 0, #ec971f 100%);
+    background-image: -o-linear-gradient(top, #f0ad4e 0, #ec971f 100%);
+    background-image: linear-gradient(to bottom, #f0ad4e 0, #ec971f 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+    border-bottom: 1px solid #f0ad4e;
+    color: #fff
+}
+
+.box.warning header .icons {
+    border-right: 1px solid #c77c11;
+    -webkit-box-shadow: 1px 0 0 #f4c37d;
+    box-shadow: 1px 0 0 #f4c37d
+}
+
+.box.danger header {
+    background-image: -webkit-linear-gradient(top, #d9534f 0, #c9302c 100%);
+    background-image: -o-linear-gradient(top, #d9534f 0, #c9302c 100%);
+    background-image: linear-gradient(to bottom, #d9534f 0, #c9302c 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+    border-bottom: 1px solid #d9534f;
+    color: #fff
+}
+
+.box.danger header .icons {
+    border-right: 1px solid #a02622;
+    -webkit-box-shadow: 1px 0 0 #e27c79;
+    box-shadow: 1px 0 0 #e27c79
+}
+
+.box.info header {
+    background-image: -webkit-linear-gradient(top, #5bc0de 0, #31b0d5 100%);
+    background-image: -o-linear-gradient(top, #5bc0de 0, #31b0d5 100%);
+    background-image: linear-gradient(to bottom, #5bc0de 0, #31b0d5 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+    border-bottom: 1px solid #5bc0de;
+    color: #fff
+}
+
+.box.info header .icons {
+    border-right: 1px solid #2390b0;
+    -webkit-box-shadow: 1px 0 0 #85d0e7;
+    box-shadow: 1px 0 0 #85d0e7
+}
+
+.box header .toolbar {
+    float: right;
+    display: inline-table
+}
+
+.box header .toolbar .btn-toolbar {
+    margin: 6px 3px
+}
+
+.box header .toolbar .label,.box header .toolbar .badge {
+    display: inline-block;
+    margin: 10px
+}
+
+.box header .toolbar .nav {
+    margin: 1px 1px 0 0
+}
+
+.box header .toolbar .nav>li {
+    display: inline-block
+}
+
+.box header .toolbar .nav>li>a {
+    padding-top: 9px
+}
+
+.box header .toolbar>.btn {
+    margin-right: 4px
+}
+
+.box header .toolbar>.btn-sm,.box header .toolbar>.btn-group {
+    margin: 4px
+}
+
+.box header .toolbar>.btn-xs {
+    margin: 6px
+}
+
+.box header .toolbar .input-sm {
+    margin: 4px -4px
+}
+
+.box header .toolbar .progress {
+    min-width: 120px;
+    margin: 10px 4px
+}
+
+.box header .toolbar .progress.middle {
+    height: 12px;
+    margin: 13px 4px
+}
+
+.box header .toolbar .progress.mini {
+    height: 6px;
+    margin: 16px 4px
+}
+
+.full-screen-box {
+    height: 100% !important;
+    width: 100% !important
+}
+
+.box.danger .dropdown-menu>li>a:hover,.box.danger .dropdown-menu>li>a:focus {
+    background-image: -webkit-linear-gradient(top, #d9534f 0, #c9302c 100%);
+    background-image: -o-linear-gradient(top, #d9534f 0, #c9302c 100%);
+    background-image: linear-gradient(to bottom, #d9534f 0, #c9302c 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0)
+}
+
+.box.info .dropdown-menu>li>a:hover,.box.info .dropdown-menu>li>a:focus {
+    background-image: -webkit-linear-gradient(top, #5bc0de 0, #31b0d5 100%);
+    background-image: -o-linear-gradient(top, #5bc0de 0, #31b0d5 100%);
+    background-image: linear-gradient(to bottom, #5bc0de 0, #31b0d5 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0)
+}
+
+.box.success .dropdown-menu>li>a:hover,.box.success .dropdown-menu>li>a:focus {
+    background-image: -webkit-linear-gradient(top, #5cb85c 0, #449d44 100%);
+    background-image: -o-linear-gradient(top, #5cb85c 0, #449d44 100%);
+    background-image: linear-gradient(to bottom, #5cb85c 0, #449d44 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0)
+}
+
+.box.warning .dropdown-menu>li>a:hover,.box.warning .dropdown-menu>li>a:focus {
+    background-image: -webkit-linear-gradient(top, #f0ad4e 0, #ec971f 100%);
+    background-image: -o-linear-gradient(top, #f0ad4e 0, #ec971f 100%);
+    background-image: linear-gradient(to bottom, #f0ad4e 0, #ec971f 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0)
+}
+
+.box.inverse .dropdown-menu>li>a:hover,.box.inverse .dropdown-menu>li>a:focus {
+    background-image: -webkit-linear-gradient(top, #333 0, #222 100%);
+    background-image: -o-linear-gradient(top, #333 0, #222 100%);
+    background-image: linear-gradient(to bottom, #333 0, #222 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=0)
+}
+
+.box .body {
+    padding: 10px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+    width: 100%;
+    background-color: #fff
+}
+
+.box .body hr {
+    margin-left: -10px;
+    margin-right: -10px
+}
+
+.body.collapse:not(.in) {
+    padding: 0
+}
+
+.box>.block {
+    padding: 0
+}
+
+.row.ui-sortable .box header {
+    cursor: move
+}
+
+.btn-metis-1 {
+    color: #fff;
+    background-color: #ee465a;
+    border-color: #c11a39
+}
+
+.btn-metis-1:hover,.btn-metis-1:focus,.btn-metis-1.focus,.btn-metis-1:active,.btn-metis-1.active,.open>.dropdown-toggle.btn-metis-1 {
+    color: #fff;
+    background-color: #ea1730;
+    border-color: #8b1329
+}
+
+.btn-metis-1:active,.btn-metis-1.active,.open>.dropdown-toggle.btn-metis-1 {
+    background-image: none
+}
+
+.btn-metis-1.disabled,.btn-metis-1[disabled],fieldset[disabled] .btn-metis-1,.btn-metis-1.disabled:hover,.btn-metis-1[disabled]:hover,fieldset[disabled] .btn-metis-1:hover,.btn-metis-1.disabled:focus,.btn-metis-1[disabled]:focus,fieldset[disabled] .btn-metis-1:focus,.btn-metis-1.disabled.focus,.btn-metis-1[disabled].focus,fieldset[disabled] .btn-metis-1.focus,.btn-metis-1.disabled:active,.btn-metis-1[disabled]:active,fieldset[disabled] .btn-metis-1:active,.btn-metis-1.disabled.active,.bt [...]
+    background-color: #ee465a;
+    border-color: #c11a39
+}
+
+.btn-metis-1 .badge {
+    color: #ee465a;
+    background-color: #fff
+}
+
+.btn-metis-2 {
+    color: #fff;
+    background-color: #9fd256;
+    border-color: #6fac34
+}
+
+.btn-metis-2:hover,.btn-metis-2:focus,.btn-metis-2.focus,.btn-metis-2:active,.btn-metis-2.active,.open>.dropdown-toggle.btn-metis-2 {
+    color: #fff;
+    background-color: #87c134;
+    border-color: #517d26
+}
+
+.btn-metis-2:active,.btn-metis-2.active,.open>.dropdown-toggle.btn-metis-2 {
+    background-image: none
+}
+
+.btn-metis-2.disabled,.btn-metis-2[disabled],fieldset[disabled] .btn-metis-2,.btn-metis-2.disabled:hover,.btn-metis-2[disabled]:hover,fieldset[disabled] .btn-metis-2:hover,.btn-metis-2.disabled:focus,.btn-metis-2[disabled]:focus,fieldset[disabled] .btn-metis-2:focus,.btn-metis-2.disabled.focus,.btn-metis-2[disabled].focus,fieldset[disabled] .btn-metis-2.focus,.btn-metis-2.disabled:active,.btn-metis-2[disabled]:active,fieldset[disabled] .btn-metis-2:active,.btn-metis-2.disabled.active,.bt [...]
+    background-color: #9fd256;
+    border-color: #6fac34
+}
+
+.btn-metis-2 .badge {
+    color: #9fd256;
+    background-color: #fff
+}
+
+.btn-metis-3 {
+    color: #fff;
+    background-color: #fbb450;
+    border-color: #f89406
+}
+
+.btn-metis-3:hover,.btn-metis-3:focus,.btn-metis-3.focus,.btn-metis-3:active,.btn-metis-3.active,.open>.dropdown-toggle.btn-metis-3 {
+    color: #fff;
+    background-color: #fa9f1e;
+    border-color: #bc7005
+}
+
+.btn-metis-3:active,.btn-metis-3.active,.open>.dropdown-toggle.btn-metis-3 {
+    background-image: none
+}
+
+.btn-metis-3.disabled,.btn-metis-3[disabled],fieldset[disabled] .btn-metis-3,.btn-metis-3.disabled:hover,.btn-metis-3[disabled]:hover,fieldset[disabled] .btn-metis-3:hover,.btn-metis-3.disabled:focus,.btn-metis-3[disabled]:focus,fieldset[disabled] .btn-metis-3:focus,.btn-metis-3.disabled.focus,.btn-metis-3[disabled].focus,fieldset[disabled] .btn-metis-3.focus,.btn-metis-3.disabled:active,.btn-metis-3[disabled]:active,fieldset[disabled] .btn-metis-3:active,.btn-metis-3.disabled.active,.bt [...]
+    background-color: #fbb450;
+    border-color: #f89406
+}
+
+.btn-metis-3 .badge {
+    color: #fbb450;
+    background-color: #fff
+}
+
+.btn-metis-4 {
+    color: #fff;
+    background-color: #a264e7;
+    border-color: #62309a
+}
+
+.btn-metis-4:hover,.btn-metis-4:focus,.btn-metis-4.focus,.btn-metis-4:active,.btn-metis-4.active,.open>.dropdown-toggle.btn-metis-4 {
+    color: #fff;
+    background-color: #8838e0;
+    border-color: #44216b
+}
+
+.btn-metis-4:active,.btn-metis-4.active,.open>.dropdown-toggle.btn-metis-4 {
+    background-image: none
+}
+
+.btn-metis-4.disabled,.btn-metis-4[disabled],fieldset[disabled] .btn-metis-4,.btn-metis-4.disabled:hover,.btn-metis-4[disabled]:hover,fieldset[disabled] .btn-metis-4:hover,.btn-metis-4.disabled:focus,.btn-metis-4[disabled]:focus,fieldset[disabled] .btn-metis-4:focus,.btn-metis-4.disabled.focus,.btn-metis-4[disabled].focus,fieldset[disabled] .btn-metis-4.focus,.btn-metis-4.disabled:active,.btn-metis-4[disabled]:active,fieldset[disabled] .btn-metis-4:active,.btn-metis-4.disabled.active,.bt [...]
+    background-color: #a264e7;
+    border-color: #62309a
+}
+
+.btn-metis-4 .badge {
+    color: #a264e7;
+    background-color: #fff
+}
+
+.btn-metis-5 {
+    color: #fff;
+    background-color: #777;
+    border-color: #555
+}
+
+.btn-metis-5:hover,.btn-metis-5:focus,.btn-metis-5.focus,.btn-metis-5:active,.btn-metis-5.active,.open>.dropdown-toggle.btn-metis-5 {
+    color: #fff;
+    background-color: #5e5e5e;
+    border-color: #363636
+}
+
+.btn-metis-5:active,.btn-metis-5.active,.open>.dropdown-toggle.btn-metis-5 {
+    background-image: none
+}
+
+.btn-metis-5.disabled,.btn-metis-5[disabled],fieldset[disabled] .btn-metis-5,.btn-metis-5.disabled:hover,.btn-metis-5[disabled]:hover,fieldset[disabled] .btn-metis-5:hover,.btn-metis-5.disabled:focus,.btn-metis-5[disabled]:focus,fieldset[disabled] .btn-metis-5:focus,.btn-metis-5.disabled.focus,.btn-metis-5[disabled].focus,fieldset[disabled] .btn-metis-5.focus,.btn-metis-5.disabled:active,.btn-metis-5[disabled]:active,fieldset[disabled] .btn-metis-5:active,.btn-metis-5.disabled.active,.bt [...]
+    background-color: #777;
+    border-color: #555
+}
+
+.btn-metis-5 .badge {
+    color: #777;
+    background-color: #fff
+}
+
+.btn-metis-6 {
+    color: #fff;
+    background-color: #00b4f5;
+    border-color: #008dc5
+}
+
+.btn-metis-6:hover,.btn-metis-6:focus,.btn-metis-6.focus,.btn-metis-6:active,.btn-metis-6.active,.open>.dropdown-toggle.btn-metis-6 {
+    color: #fff;
+    background-color: #008fc2;
+    border-color: #006188
+}
+
+.btn-metis-6:active,.btn-metis-6.active,.open>.dropdown-toggle.btn-metis-6 {
+    background-image: none
+}
+
+.btn-metis-6.disabled,.btn-metis-6[disabled],fieldset[disabled] .btn-metis-6,.btn-metis-6.disabled:hover,.btn-metis-6[disabled]:hover,fieldset[disabled] .btn-metis-6:hover,.btn-metis-6.disabled:focus,.btn-metis-6[disabled]:focus,fieldset[disabled] .btn-metis-6:focus,.btn-metis-6.disabled.focus,.btn-metis-6[disabled].focus,fieldset[disabled] .btn-metis-6.focus,.btn-metis-6.disabled:active,.btn-metis-6[disabled]:active,fieldset[disabled] .btn-metis-6:active,.btn-metis-6.disabled.active,.bt [...]
+    background-color: #00b4f5;
+    border-color: #008dc5
+}
+
+.btn-metis-6 .badge {
+    color: #00b4f5;
+    background-color: #fff
+}
+
+.btn-grad.btn-default,.btn-grad.btn-primary,.btn-grad.btn-success,.btn-grad.btn-info,.btn-grad.btn-warning,.btn-grad.btn-danger {
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
+    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075)
+}
+
+.btn-grad.btn-default:active,.btn-grad.btn-primary:active,.btn-grad.btn-success:active,.btn-grad.btn-info:active,.btn-grad.btn-warning:active,.btn-grad.btn-danger:active,.btn-grad.btn-default.active,.btn-grad.btn-primary.active,.btn-grad.btn-success.active,.btn-grad.btn-info.active,.btn-grad.btn-warning.active,.btn-grad.btn-danger.active {
+    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
+    box-shadow: inset 0 3px 5px rgba(0,0,0,0.125)
+}
+
+.btn-grad.btn:active,.btn-grad.btn.active {
+    background-image: none
+}
+
+.btn-grad.btn-default {
+    background-image: -webkit-linear-gradient(top, #fff 0, #e0e0e0 100%);
+    background-image: -o-linear-gradient(top, #fff 0, #e0e0e0 100%);
+    background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #dbdbdb;
+    text-shadow: 0 1px 0 #fff;
+    border-color: #ccc
+}
+
+.btn-grad.btn-default:hover,.btn-grad.btn-default:focus {
+    background-color: #e0e0e0;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-default:active,.btn-grad.btn-default.active {
+    background-color: #e0e0e0;
+    border-color: #dbdbdb
+}
+
+.btn-grad.btn-primary {
+    background-image: -webkit-linear-gradient(top, #337ab7 0, #265a88 100%);
+    background-image: -o-linear-gradient(top, #337ab7 0, #265a88 100%);
+    background-image: linear-gradient(to bottom, #337ab7 0, #265a88 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #245580
+}
+
+.btn-grad.btn-primary:hover,.btn-grad.btn-primary:focus {
+    background-color: #265a88;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-primary:active,.btn-grad.btn-primary.active {
+    background-color: #265a88;
+    border-color: #245580
+}
+
+.btn-grad.btn-success {
+    background-image: -webkit-linear-gradient(top, #5cb85c 0, #419641 100%);
+    background-image: -o-linear-gradient(top, #5cb85c 0, #419641 100%);
+    background-image: linear-gradient(to bottom, #5cb85c 0, #419641 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #3e8f3e
+}
+
+.btn-grad.btn-success:hover,.btn-grad.btn-success:focus {
+    background-color: #419641;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-success:active,.btn-grad.btn-success.active {
+    background-color: #419641;
+    border-color: #3e8f3e
+}
+
+.btn-grad.btn-warning {
+    background-image: -webkit-linear-gradient(top, #f0ad4e 0, #eb9316 100%);
+    background-image: -o-linear-gradient(top, #f0ad4e 0, #eb9316 100%);
+    background-image: linear-gradient(to bottom, #f0ad4e 0, #eb9316 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #e38d13
+}
+
+.btn-grad.btn-warning:hover,.btn-grad.btn-warning:focus {
+    background-color: #eb9316;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-warning:active,.btn-grad.btn-warning.active {
+    background-color: #eb9316;
+    border-color: #e38d13
+}
+
+.btn-grad.btn-danger {
+    background-image: -webkit-linear-gradient(top, #d9534f 0, #c12e2a 100%);
+    background-image: -o-linear-gradient(top, #d9534f 0, #c12e2a 100%);
+    background-image: linear-gradient(to bottom, #d9534f 0, #c12e2a 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #b92c28
+}
+
+.btn-grad.btn-danger:hover,.btn-grad.btn-danger:focus {
+    background-color: #c12e2a;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-danger:active,.btn-grad.btn-danger.active {
+    background-color: #c12e2a;
+    border-color: #b92c28
+}
+
+.btn-grad.btn-info {
+    background-image: -webkit-linear-gradient(top, #5bc0de 0, #2aabd2 100%);
+    background-image: -o-linear-gradient(top, #5bc0de 0, #2aabd2 100%);
+    background-image: linear-gradient(to bottom, #5bc0de 0, #2aabd2 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #28a4c9
+}
+
+.btn-grad.btn-info:hover,.btn-grad.btn-info:focus {
+    background-color: #2aabd2;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-info:active,.btn-grad.btn-info.active {
+    background-color: #2aabd2;
+    border-color: #28a4c9
+}
+
+.btn-grad.btn-metis-1 {
+    background-image: -webkit-linear-gradient(top, #ee465a 0, #e2152d 100%);
+    background-image: -o-linear-gradient(top, #ee465a 0, #e2152d 100%);
+    background-image: linear-gradient(to bottom, #ee465a 0, #e2152d 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee465a', endColorstr='#ffe2152d', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #d9142b
+}
+
+.btn-grad.btn-metis-1:hover,.btn-grad.btn-metis-1:focus {
+    background-color: #e2152d;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-metis-1:active,.btn-grad.btn-metis-1.active {
+    background-color: #e2152d;
+    border-color: #d9142b
+}
+
+.btn-grad.btn-metis-2 {
+    background-image: -webkit-linear-gradient(top, #9fd256 0, #81b931 100%);
+    background-image: -o-linear-gradient(top, #9fd256 0, #81b931 100%);
+    background-image: linear-gradient(to bottom, #9fd256 0, #81b931 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9fd256', endColorstr='#ff81b931', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #7cb12f
+}
+
+.btn-grad.btn-metis-2:hover,.btn-grad.btn-metis-2:focus {
+    background-color: #81b931;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-metis-2:active,.btn-grad.btn-metis-2.active {
+    background-color: #81b931;
+    border-color: #7cb12f
+}
+
+.btn-grad.btn-metis-3 {
+    background-image: -webkit-linear-gradient(top, #fbb450 0, #fa9a14 100%);
+    background-image: -o-linear-gradient(top, #fbb450 0, #fa9a14 100%);
+    background-image: linear-gradient(to bottom, #fbb450 0, #fa9a14 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fffa9a14', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #f9960a
+}
+
+.btn-grad.btn-metis-3:hover,.btn-grad.btn-metis-3:focus {
+    background-color: #fa9a14;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-metis-3:active,.btn-grad.btn-metis-3.active {
+    background-color: #fa9a14;
+    border-color: #f9960a
+}
+
+.btn-grad.btn-metis-4 {
+    background-image: -webkit-linear-gradient(top, #a264e7 0, #822fdf 100%);
+    background-image: -o-linear-gradient(top, #a264e7 0, #822fdf 100%);
+    background-image: linear-gradient(to bottom, #a264e7 0, #822fdf 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa264e7', endColorstr='#ff822fdf', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #7d26dd
+}
+
+.btn-grad.btn-metis-4:hover,.btn-grad.btn-metis-4:focus {
+    background-color: #822fdf;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-metis-4:active,.btn-grad.btn-metis-4.active {
+    background-color: #822fdf;
+    border-color: #7d26dd
+}
+
+.btn-grad.btn-metis-5 {
+    background-image: -webkit-linear-gradient(top, #777 0, #585858 100%);
+    background-image: -o-linear-gradient(top, #777 0, #585858 100%);
+    background-image: linear-gradient(to bottom, #777 0, #585858 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff777777', endColorstr='#ff585858', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #535353
+}
+
+.btn-grad.btn-metis-5:hover,.btn-grad.btn-metis-5:focus {
+    background-color: #585858;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-metis-5:active,.btn-grad.btn-metis-5.active {
+    background-color: #585858;
+    border-color: #535353
+}
+
+.btn-grad.btn-metis-6 {
+    background-image: -webkit-linear-gradient(top, #00b4f5 0, #0087b8 100%);
+    background-image: -o-linear-gradient(top, #00b4f5 0, #0087b8 100%);
+    background-image: linear-gradient(to bottom, #00b4f5 0, #0087b8 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00b4f5', endColorstr='#ff0087b8', GradientType=0);
+    background-repeat: repeat-x;
+    border-color: #0080ae
+}
+
+.btn-grad.btn-metis-6:hover,.btn-grad.btn-metis-6:focus {
+    background-color: #0087b8;
+    background-position: 0 -15px
+}
+
+.btn-grad.btn-metis-6:active,.btn-grad.btn-metis-6.active {
+    background-color: #0087b8;
+    border-color: #0080ae
+}
+
+.btn-circle {
+    border-radius: 500px;
+    width: 40px;
+    height: 40px;
+    padding: 8px 10px
+}
+
+.btn-circle.btn-lg {
+    width: 60px;
+    height: 60px;
+    padding: 14px 16px
+}
+
+.btn-circle.btn-sm {
+    width: 30px;
+    height: 30px;
+    padding: 5px 10px
+}
+
+.btn-circle.btn-xs {
+    width: 20px;
+    height: 20px;
+    padding: 0 5px
+}
+
+.btn-rect {
+    border-radius: 0 !important
+}
+
+.btn-round.btn {
+    border-radius: 28px
+}
+
+.btn-round.btn-xs {
+    border-radius: 28px
+}
+
+.btn-round.btn-sm {
+    border-radius: 28px
+}
+
+.btn-round.btn-lg {
+    border-radius: 28px
+}
+
+.btn-line.btn-default {
+    color: #333;
+    background-color: #fff;
+    border-color: #ccc
+}
+
+.btn-line.btn-default:hover,.btn-line.btn-default:focus,.btn-line.btn-default:active,.btn-line.btn-default.active {
+    background-color: #262626;
+    color: #fff;
+    border-color: #b3b3b3
+}
+
+.btn-line.btn-default.disabled,.btn-line.btn-default[disabled],fieldset[disabled] .btn-line.btn-default,.btn-line.btn-default.disabled:hover,.btn-line.btn-default[disabled]:hover,fieldset[disabled] .btn-line.btn-default:hover,.btn-line.btn-default.disabled:focus,.btn-line.btn-default[disabled]:focus,fieldset[disabled] .btn-line.btn-default:focus,.btn-line.btn-default.disabled:active,.btn-line.btn-default[disabled]:active,fieldset[disabled] .btn-line.btn-default:active,.btn-line.btn-defau [...]
+    background-color: #fff;
+    border-color: #ccc
+}
+
+.btn-line.btn-primary {
+    color: #337ab7;
+    background-color: #fff;
+    border-color: #2e6da4
+}
+
+.btn-line.btn-primary:hover,.btn-line.btn-primary:focus,.btn-line.btn-primary:active,.btn-line.btn-primary.active {
+    background-color: #2e6da4;
+    color: #fff;
+    border-color: #23527c
+}
+
+.btn-line.btn-primary.disabled,.btn-line.btn-primary[disabled],fieldset[disabled] .btn-line.btn-primary,.btn-line.btn-primary.disabled:hover,.btn-line.btn-primary[disabled]:hover,fieldset[disabled] .btn-line.btn-primary:hover,.btn-line.btn-primary.disabled:focus,.btn-line.btn-primary[disabled]:focus,fieldset[disabled] .btn-line.btn-primary:focus,.btn-line.btn-primary.disabled:active,.btn-line.btn-primary[disabled]:active,fieldset[disabled] .btn-line.btn-primary:active,.btn-line.btn-prima [...]
+    background-color: #fff;
+    border-color: #2e6da4
+}
+
+.btn-line.btn-warning {
+    color: #f0ad4e;
+    background-color: #fff;
+    border-color: #eea236
+}
+
+.btn-line.btn-warning:hover,.btn-line.btn-warning:focus,.btn-line.btn-warning:active,.btn-line.btn-warning.active {
+    background-color: #eea236;
+    color: #fff;
+    border-color: #df8a13
+}
+
+.btn-line.btn-warning.disabled,.btn-line.btn-warning[disabled],fieldset[disabled] .btn-line.btn-warning,.btn-line.btn-warning.disabled:hover,.btn-line.btn-warning[disabled]:hover,fieldset[disabled] .btn-line.btn-warning:hover,.btn-line.btn-warning.disabled:focus,.btn-line.btn-warning[disabled]:focus,fieldset[disabled] .btn-line.btn-warning:focus,.btn-line.btn-warning.disabled:active,.btn-line.btn-warning[disabled]:active,fieldset[disabled] .btn-line.btn-warning:active,.btn-line.btn-warni [...]
+    background-color: #fff;
+    border-color: #eea236
+}
+
+.btn-line.btn-danger {
+    color: #d9534f;
+    background-color: #fff;
+    border-color: #d43f3a
+}
+
+.btn-line.btn-danger:hover,.btn-line.btn-danger:focus,.btn-line.btn-danger:active,.btn-line.btn-danger.active {
+    background-color: #d43f3a;
+    color: #fff;
+    border-color: #b52b27
+}
+
+.btn-line.btn-danger.disabled,.btn-line.btn-danger[disabled],fieldset[disabled] .btn-line.btn-danger,.btn-line.btn-danger.disabled:hover,.btn-line.btn-danger[disabled]:hover,fieldset[disabled] .btn-line.btn-danger:hover,.btn-line.btn-danger.disabled:focus,.btn-line.btn-danger[disabled]:focus,fieldset[disabled] .btn-line.btn-danger:focus,.btn-line.btn-danger.disabled:active,.btn-line.btn-danger[disabled]:active,fieldset[disabled] .btn-line.btn-danger:active,.btn-line.btn-danger.disabled.a [...]
+    background-color: #fff;
+    border-color: #d43f3a
+}
+
+.btn-line.btn-success {
+    color: #5cb85c;
+    background-color: #fff;
+    border-color: #4cae4c
+}
+
+.btn-line.btn-success:hover,.btn-line.btn-success:focus,.btn-line.btn-success:active,.btn-line.btn-success.active {
+    background-color: #4cae4c;
+    color: #fff;
+    border-color: #3d8b3d
+}
+
+.btn-line.btn-success.disabled,.btn-line.btn-success[disabled],fieldset[disabled] .btn-line.btn-success,.btn-line.btn-success.disabled:hover,.btn-line.btn-success[disabled]:hover,fieldset[disabled] .btn-line.btn-success:hover,.btn-line.btn-success.disabled:focus,.btn-line.btn-success[disabled]:focus,fieldset[disabled] .btn-line.btn-success:focus,.btn-line.btn-success.disabled:active,.btn-line.btn-success[disabled]:active,fieldset[disabled] .btn-line.btn-success:active,.btn-line.btn-succe [...]
+    background-color: #fff;
+    border-color: #4cae4c
+}
+
+.btn-line.btn-info {
+    color: #5bc0de;
+    background-color: #fff;
+    border-color: #46b8da
+}
+
+.btn-line.btn-info:hover,.btn-line.btn-info:focus,.btn-line.btn-info:active,.btn-line.btn-info.active {
+    background-color: #46b8da;
+    color: #fff;
+    border-color: #28a1c5
+}
+
+.btn-line.btn-info.disabled,.btn-line.btn-info[disabled],fieldset[disabled] .btn-line.btn-info,.btn-line.btn-info.disabled:hover,.btn-line.btn-info[disabled]:hover,fieldset[disabled] .btn-line.btn-info:hover,.btn-line.btn-info.disabled:focus,.btn-line.btn-info[disabled]:focus,fieldset[disabled] .btn-line.btn-info:focus,.btn-line.btn-info.disabled:active,.btn-line.btn-info[disabled]:active,fieldset[disabled] .btn-line.btn-info:active,.btn-line.btn-info.disabled.active,.btn-line.btn-info[d [...]
+    background-color: #fff;
+    border-color: #46b8da
+}
+
+.btn-line.btn-metis-1 {
+    color: #ee465a;
+    background-color: #fff;
+    border-color: #c11a39
+}
+
+.btn-line.btn-metis-1:hover,.btn-line.btn-metis-1:focus,.btn-line.btn-metis-1:active,.btn-line.btn-metis-1.active {
+    background-color: #ec2f45;
+    color: #fff;
+    border-color: #94142c
+}
+
+.btn-line.btn-metis-1.disabled,.btn-line.btn-metis-1[disabled],fieldset[disabled] .btn-line.btn-metis-1,.btn-line.btn-metis-1.disabled:hover,.btn-line.btn-metis-1[disabled]:hover,fieldset[disabled] .btn-line.btn-metis-1:hover,.btn-line.btn-metis-1.disabled:focus,.btn-line.btn-metis-1[disabled]:focus,fieldset[disabled] .btn-line.btn-metis-1:focus,.btn-line.btn-metis-1.disabled:active,.btn-line.btn-metis-1[disabled]:active,fieldset[disabled] .btn-line.btn-metis-1:active,.btn-line.btn-metis [...]
+    background-color: #fff;
+    border-color: #c11a39
+}
+
+.btn-line.btn-metis-2 {
+    color: #9fd256;
+    background-color: #fff;
+    border-color: #6fac34
+}
+
+.btn-line.btn-metis-2:hover,.btn-line.btn-metis-2:focus,.btn-line.btn-metis-2:active,.btn-line.btn-metis-2.active {
+    background-color: #94cd42;
+    color: #fff;
+    border-color: #568528
+}
+
+.btn-line.btn-metis-2.disabled,.btn-line.btn-metis-2[disabled],fieldset[disabled] .btn-line.btn-metis-2,.btn-line.btn-metis-2.disabled:hover,.btn-line.btn-metis-2[disabled]:hover,fieldset[disabled] .btn-line.btn-metis-2:hover,.btn-line.btn-metis-2.disabled:focus,.btn-line.btn-metis-2[disabled]:focus,fieldset[disabled] .btn-line.btn-metis-2:focus,.btn-line.btn-metis-2.disabled:active,.btn-line.btn-metis-2[disabled]:active,fieldset[disabled] .btn-line.btn-metis-2:active,.btn-line.btn-metis [...]
+    background-color: #fff;
+    border-color: #6fac34
+}
+
+.btn-line.btn-metis-3 {
+    color: #fbb450;
+    background-color: #fff;
+    border-color: #f89406
+}
+
+.btn-line.btn-metis-3:hover,.btn-line.btn-metis-3:focus,.btn-line.btn-metis-3:active,.btn-line.btn-metis-3.active {
+    background-color: #faa937;
+    color: #fff;
+    border-color: #c67605
+}
+
+.btn-line.btn-metis-3.disabled,.btn-line.btn-metis-3[disabled],fieldset[disabled] .btn-line.btn-metis-3,.btn-line.btn-metis-3.disabled:hover,.btn-line.btn-metis-3[disabled]:hover,fieldset[disabled] .btn-line.btn-metis-3:hover,.btn-line.btn-metis-3.disabled:focus,.btn-line.btn-metis-3[disabled]:focus,fieldset[disabled] .btn-line.btn-metis-3:focus,.btn-line.btn-metis-3.disabled:active,.btn-line.btn-metis-3[disabled]:active,fieldset[disabled] .btn-line.btn-metis-3:active,.btn-line.btn-metis [...]
+    background-color: #fff;
+    border-color: #f89406
+}
+
+.btn-line.btn-metis-4 {
+    color: #a264e7;
+    background-color: #fff;
+    border-color: #62309a
+}
+
+.btn-line.btn-metis-4:hover,.btn-line.btn-metis-4:focus,.btn-line.btn-metis-4:active,.btn-line.btn-metis-4.active {
+    background-color: #954ee4;
+    color: #fff;
+    border-color: #492473
+}
+
+.btn-line.btn-metis-4.disabled,.btn-line.btn-metis-4[disabled],fieldset[disabled] .btn-line.btn-metis-4,.btn-line.btn-metis-4.disabled:hover,.btn-line.btn-metis-4[disabled]:hover,fieldset[disabled] .btn-line.btn-metis-4:hover,.btn-line.btn-metis-4.disabled:focus,.btn-line.btn-metis-4[disabled]:focus,fieldset[disabled] .btn-line.btn-metis-4:focus,.btn-line.btn-metis-4.disabled:active,.btn-line.btn-metis-4[disabled]:active,fieldset[disabled] .btn-line.btn-metis-4:active,.btn-line.btn-metis [...]
+    background-color: #fff;
+    border-color: #62309a
+}
+
+.btn-line.btn-metis-5 {
+    color: #777;
+    background-color: #fff;
+    border-color: #555
+}
+
+.btn-line.btn-metis-5:hover,.btn-line.btn-metis-5:focus,.btn-line.btn-metis-5:active,.btn-line.btn-metis-5.active {
+    background-color: #6a6a6a;
+    color: #fff;
+    border-color: #3b3b3b
+}
+
+.btn-line.btn-metis-5.disabled,.btn-line.btn-metis-5[disabled],fieldset[disabled] .btn-line.btn-metis-5,.btn-line.btn-metis-5.disabled:hover,.btn-line.btn-metis-5[disabled]:hover,fieldset[disabled] .btn-line.btn-metis-5:hover,.btn-line.btn-metis-5.disabled:focus,.btn-line.btn-metis-5[disabled]:focus,fieldset[disabled] .btn-line.btn-metis-5:focus,.btn-line.btn-metis-5.disabled:active,.btn-line.btn-metis-5[disabled]:active,fieldset[disabled] .btn-line.btn-metis-5:active,.btn-line.btn-metis [...]
+    background-color: #fff;
+    border-color: #555
+}
+
+.btn-line.btn-metis-6 {
+    color: #00b4f5;
+    background-color: #fff;
+    border-color: #008dc5
+}
+
+.btn-line.btn-metis-6:hover,.btn-line.btn-metis-6:focus,.btn-line.btn-metis-6:active,.btn-line.btn-metis-6.active {
+    background-color: #00a1dc;
+    color: #fff;
+    border-color: #006892
+}
+
+.btn-line.btn-metis-6.disabled,.btn-line.btn-metis-6[disabled],fieldset[disabled] .btn-line.btn-metis-6,.btn-line.btn-metis-6.disabled:hover,.btn-line.btn-metis-6[disabled]:hover,fieldset[disabled] .btn-line.btn-metis-6:hover,.btn-line.btn-metis-6.disabled:focus,.btn-line.btn-metis-6[disabled]:focus,fieldset[disabled] .btn-line.btn-metis-6:focus,.btn-line.btn-metis-6.disabled:active,.btn-line.btn-metis-6[disabled]:active,fieldset[disabled] .btn-line.btn-metis-6:active,.btn-line.btn-metis [...]
+    background-color: #fff;
+    border-color: #008dc5
+}
+
+.btn-flat {
+    border-width: 0 !important
+}
+
+.anim-checkbox label {
+    position: relative
+}
+
+.anim-checkbox label:before,.anim-checkbox label:after {
+    font-family: FontAwesome;
+    position: absolute;
+    left: -22px
+}
+
+.anim-checkbox label:before {
+    content: '\f096'
+}
+
+.anim-checkbox label:after {
+    content: '\f046';
+    max-width: 0;
+    overflow: hidden;
+    opacity: .5;
+    transition: all .35s
+}
+
+.anim-checkbox input[type="checkbox"] {
+    display: none
+}
+
+.anim-checkbox input[type="checkbox"]:checked+label:after {
+    max-width: 25px;
+    opacity: 1
+}
+
+.anim-checkbox .primary:checked+label:before,.anim-checkbox .primary:checked+label:after {
+    color: #337ab7
+}
+
+.anim-checkbox .success:checked+label:before,.anim-checkbox .success:checked+label:after {
+    color: #5cb85c
+}
+
+.anim-checkbox .warning:checked+label:before,.anim-checkbox .warning:checked+label:after {
+    color: #f0ad4e
+}
+
+.anim-checkbox .danger:checked+label:before,.anim-checkbox .danger:checked+label:after {
+    color: #d9534f
+}
+
+.anim-checkbox .info:checked+label:before,.anim-checkbox .info:checked+label:after {
+    color: #5bc0de
+}
+
+.pricing-table {
+    text-align: center;
+    padding: 0;
+    margin: 30px 0;
+    line-height: 150%
+}
+
+.pricing-table li {
+    list-style: none
+}
+
+.pricing-table>li {
+    background-image: -webkit-linear-gradient(top, #ebeef5 0, #fff 100%);
+    background-image: -o-linear-gradient(top, #ebeef5 0, #fff 100%);
+    background-image: linear-gradient(to bottom, #ebeef5 0, #fff 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebeef5', endColorstr='#ffffffff', GradientType=0);
+    color: #444;
+    -webkit-transition: all .2s;
+    -o-transition: all .2s;
+    transition: all .2s
+}
+
+.pricing-table.dark>li {
+    background-image: -webkit-linear-gradient(top, #666 0, #444 100%);
+    background-image: -o-linear-gradient(top, #666 0, #444 100%);
+    background-image: linear-gradient(to bottom, #666 0, #444 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff666666', endColorstr='#ff444444', GradientType=0);
+    color: #fff
+}
+
+.pricing-table.dark>li.active.default {
+    color: #fff
+}
+
+.pricing-table>li.active {
+    color: #fff;
+    -webkit-box-shadow: 0 0 15px 1px rgba(0,0,0,0.5);
+    box-shadow: 0 0 15px 1px rgba(0,0,0,0.5);
+    z-index: 1
+}
+
+.pricing-table>li.active.default {
+    color: #444
+}
+
+@media (min-width:768px) {
+    .pricing-table>li.active {
+        -webkit-transform: scale(1.03);
+        -ms-transform: scale(1.03);
+        -o-transform: scale(1.03);
+        transform: scale(1.03)
+    }
+}
+
+.pricing-table>li.active.primary {
+    background-image: -webkit-linear-gradient(top, #2e6da4 0, #337ab7 100%);
+    background-image: -o-linear-gradient(top, #2e6da4 0, #337ab7 100%);
+    background-image: linear-gradient(to bottom, #2e6da4 0, #337ab7 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2e6da4', endColorstr='#ff337ab7', GradientType=0)
+}
+
+.pricing-table>li.active.success {
+    background-image: -webkit-linear-gradient(top, #4cae4c 0, #5cb85c 100%);
+    background-image: -o-linear-gradient(top, #4cae4c 0, #5cb85c 100%);
+    background-image: linear-gradient(to bottom, #4cae4c 0, #5cb85c 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4cae4c', endColorstr='#ff5cb85c', GradientType=0)
+}
+
+.pricing-table>li.active.warning {
+    background-image: -webkit-linear-gradient(top, #eea236 0, #f0ad4e 100%);
+    background-image: -o-linear-gradient(top, #eea236 0, #f0ad4e 100%);
+    background-image: linear-gradient(to bottom, #eea236 0, #f0ad4e 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeea236', endColorstr='#fff0ad4e', GradientType=0)
+}
+
+.pricing-table>li.active.danger {
+    background-image: -webkit-linear-gradient(top, #d43f3a 0, #d9534f 100%);
+    background-image: -o-linear-gradient(top, #d43f3a 0, #d9534f 100%);
+    background-image: linear-gradient(to bottom, #d43f3a 0, #d9534f 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd43f3a', endColorstr='#ffd9534f', GradientType=0)
+}
+
+.pricing-table>li.active.info {
+    background-image: -webkit-linear-gradient(top, #46b8da 0, #5bc0de 100%);
+    background-image: -o-linear-gradient(top, #46b8da 0, #5bc0de 100%);
+    background-image: linear-gradient(to bottom, #46b8da 0, #5bc0de 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff46b8da', endColorstr='#ff5bc0de', GradientType=0)
+}
+
+.pricing-table .footer {
+    padding: 15px;
+    margin: 15px -15px 0;
+    background: #eee
+}
+
+.pricing-table.dark .footer {
+    background: #333
+}
+
+.pricing-table h3 {
+    text-transform: uppercase;
+    padding: 15px 0
+}
+
+.pricing-table .price-body {
+    width: 125px;
+    height: 125px;
+    margin: 0 auto 15px auto;
+    border: 2px solid #444;
+    border-radius: 100%;
+    display: table
+}
+
+.pricing-table.dark .price-body {
+    border-color: #fff
+}
+
+.pricing-table>li.active.primary .price-body,.pricing-table>li.active.success .price-body,.pricing-table>li.active.warning .price-body,.pricing-table>li.active.danger .price-body,.pricing-table>li.active.info .price-body {
+    border-color: #fff
+}
+
+.pricing-table .price {
+    font-size: 30px;
+    font-weight: bold;
+    text-transform: uppercase;
+    vertical-align: middle;
+    display: table-cell
+}
+
+.pricing-table .price .price-figure {
+    display: block
+}
+
+.pricing-table .price .price-term {
+    font-size: 11px;
+    font-weight: normal
+}
+
+.pricing-table .features ul {
+    margin: 0;
+    padding: 0
+}
+
+.pricing-table .features ul li {
+    padding: 5px 0
+}
+
+.inner hr {
+    margin-top: 10px;
+    border-top-color: #ccc
+}
+
+.progress.xs {
+    height: 6px
+}
+
+.progress.sm {
+    height: 10px
+}
+
+.progress.md {
+    height: 12px
+}
+
+.progress.lg {
+    height: 28px
+}
+
+.quick-btn {
+    background: #eee;
+    -webkit-box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
+    box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
+    color: #444;
+    display: inline-block;
+    height: 80px;
+    margin: 10px;
+    padding-top: 16px;
+    text-align: center;
+    text-decoration: none;
+    width: 90px;
+    position: relative
+}
+
+.quick-btn span {
+    display: block
+}
+
+.quick-btn .label {
+    position: absolute;
+    right: -5px;
+    top: -5px
+}
+
+.quick-btn:hover {
+    text-decoration: none;
+    color: #fff;
+    background-color: #4d7589
+}
+
+.quick-btn.small {
+    width: 40px;
+    height: 30px;
+    padding-top: 6px
+}
+
+.simpleTable tr th:first-child,.simpleTable tr td:first-child {
+    text-align: center;
+    width: 27px
+}
+
+.sortableTable th {
+    background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);
+    background-image: -o-linear-gradient(top, #fff 0, #f2f2f2 100%);
+    background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
+    cursor: pointer
+}
+
+.sortableTable th:hover {
+    color: #888
+}
+
+.sortableTable th.tablesorter-header .fa.sort:before {
+    content: "\f0dc"
+}
+
+.sortableTable th.tablesorter-header.tablesorter-headerDesc .fa.sort:before {
+    content: "\f0de"
+}
+
+.sortableTable th.tablesorter-header.tablesorter-headerAsc .fa.sort:before {
+    content: "\f0dd"
+}
+
+.sparkline {
+    min-width: 50px;
+    border-right: 1px solid #dcdcdc;
+    -webkit-box-shadow: 1px 0 0 0 #fff;
+    box-shadow: 1px 0 0 0 #fff;
+    float: left;
+    margin-right: 12px;
+    padding: 10px 14px 0 4px;
+    line-height: 52px
+}
+
+.stats_box {
+    display: inline-block;
+    list-style: none outside none;
+    margin-left: 0;
+    margin-top: 20px;
+    padding: 0
+}
+
+.stats_box li {
+    background: #eee;
+    -webkit-box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
+    box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
+    display: inline-block;
+    line-height: 18px;
+    margin: 0 10px 10px;
+    padding: 0 10px;
+    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
+    float: left
+}
+
+.stats_box .stat_text {
+    float: left;
+    font-size: 12px;
+    padding: 9px 10px 7px 0;
+    text-align: left;
+    min-width: 150px;
+    position: relative
+}
+
+.stats_box .stat_text strong {
+    display: block;
+    font-size: 16px
+}
+
+.stats_box .stat_text .percent {
+    color: #444;
+    float: right;
+    font-size: 20px;
+    font-weight: bold;
+    position: absolute;
+    right: 0;
+    top: 17px
+}
+
+.stats_box .stat_text .percent.up {
+    color: #46a546
+}
+
+.stats_box .stat_text .percent.down {
+    color: #c52f61
+}
+
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 1em
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #999
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 1em;
+    background: transparent
+}
+
+::-webkit-scrollbar-track:hover {
+    background: rgba(110,110,110,0.25)
+}
+
+.fc-event.label {
+    border: 1px solid #808080;
+    color: #fff;
+    font-size: .85em;
+    cursor: default;
+    background-color: #999
+}
+
+.fc-event.label.label-default {
+    border-color: #6a6a6a;
+    background-color: #777
+}
+
+.fc-event.label.label-default[href]:hover,.fc-event.label.label-default[href]:focus {
+    background-color: #5e5e5e
+}
+
+.fc-event.label.label-primary {
+    border-color: #2e6da4;
+    background-color: #337ab7
+}
+
+.fc-event.label.label-primary[href]:hover,.fc-event.label.label-primary[href]:focus {
+    background-color: #286090
+}
+
+.fc-event.label.label-success {
+    border-color: #4cae4c;
+    background-color: #5cb85c
+}
+
+.fc-event.label.label-success[href]:hover,.fc-event.label.label-success[href]:focus {
+    background-color: #449d44
+}
+
+.fc-event.label.label-info {
+    border-color: #46b8da;
+    background-color: #5bc0de
+}
+
+.fc-event.label.label-info[href]:hover,.fc-event.label.label-info[href]:focus {
+    background-color: #31b0d5
+}
+
+.fc-event.label.label-warning {
+    border-color: #eea236;
+    background-color: #f0ad4e
+}
+
+.fc-event.label.label-warning[href]:hover,.fc-event.label.label-warning[href]:focus {
+    background-color: #ec971f
+}
+
+.fc-event.label.label-danger {
+    border-color: #d43f3a;
+    background-color: #d9534f
+}
+
+.fc-event.label.label-danger[href]:hover,.fc-event.label.label-danger[href]:focus {
+    background-color: #c9302c
+}
+
+.chosen-container-single .chosen-single,.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
+    height: auto !important
+}
+
+.jqstooltip {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box
+}
+
+.google-maps {
+    min-height: 300px
+}
+
+.icon-chevron-up,.icon-chevron-down {
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    font-family: 'Glyphicons Halflings';
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale
+}
+
+.icon-chevron-up:before {
+    content: "\e113"
+}
+
+.icon-chevron-down:before {
+    content: "\e114"
+}
+
+iframe.wysihtml5-sandbox {
+    width: 100% !important
+}
+
+.elfinder,.elfinder * {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box
+}
+
+.colorpicker-saturation {
+    background-image: url(../lib/colorpicker/img/saturation.png) !important
+}
+
+.colorpicker-hue {
+    background-image: url(../lib/colorpicker/img/hue.png) !important
+}
+
+.colorpicker-alpha {
+    background-image: url(../lib/colorpicker/img/alpha.png) !important
+}
+
+.colorpicker-color {
+    background-image: url(../lib/colorpicker/img/alpha.png) !important
+}
+
+div.uploader {
+    width: auto !important
+}
+
+.p-xs {
+    padding: 10px
+}
+
+.p-xs-t {
+    padding-top: 10px
+}
+
+.p-xs-l {
+    padding-left: 10px
+}
+
+.p-xs-b {
+    padding-bottom: 10px
+}
+
+.p-xs-r {
+    padding-right: 10px
+}
+
+.p-sm {
+    padding: 15px
+}
+
+.p-sm-t {
+    padding-top: 15px
+}
+
+.p-sm-l {
+    padding-left: 15px
+}
+
+.p-sm-b {
+    padding-bottom: 15px
+}
+
+.p-sm-r {
+    padding-right: 15px
+}
+
+.p-md {
+    padding: 25px
+}
+
+.p-md-t {
+    padding-top: 25px
+}
+
+.p-md-l {
+    padding-left: 25px
+}
+
+.p-md-b {
+    padding-bottom: 25px
+}
+
+.p-md-r {
+    padding-right: 25px
+}
+
+.p-lg {
+    padding: 40px
+}
+
+.p-lg-t {
+    padding-top: 40px
+}
+
+.p-lg-l {
+    padding-left: 40px
+}
+
+.p-lg-b {
+    padding-bottom: 40px
+}
+
+.p-lg-r {
+    padding-right: 40px
+}
+
+.m-xs {
+    margin: 10px
+}
+
+.m-xs-t {
+    margin-top: 10px
+}
+
+.m-xs-l {
+    margin-left: 10px
+}
+
+.m-xs-b {
+    margin-bottom: 10px
+}
+
+.m-xs-r {
+    margin-right: 10px
+}
+
+.m-sm {
+    margin: 15px
+}
+
+.m-sm-t {
+    margin-top: 15px
+}
+
+.m-sm-l {
+    margin-left: 15px
+}
+
+.m-sm-b {
+    margin-bottom: 15px
+}
+
+.m-sm-r {
+    margin-right: 15px
+}
+
+.m-md {
+    margin: 25px
+}
+
+.m-md-t {
+    margin-top: 25px
+}
+
+.m-md-l {
+    margin-left: 25px
+}
+
+.m-md-b {
+    margin-bottom: 25px
+}
+
+.m-md-r {
+    margin-right: 25px
+}
+
+.m-lg {
+    margin: 40px
+}
+
+.m-lg-t {
+    margin-top: 40px
+}
+
+.m-lg-l {
+    margin-left: 40px
+}
+
+.m-lg-b {
+    margin-bottom: 40px
+}
+
+.m-lg-r {
+    margin-right: 40px
+}
+
+.bg-red {
+    background-color: #b90000;
+    color: #fff !important
+}
+
+.bg-red.dker,.bg-red>.dker {
+    background-color: #900000 !important
+}
+
+.bg-red.dk,.bg-red>.dk {
+    background-color: #a50000 !important
+}
+
+.bg-red.lt,.bg-red>.lt {
+    background-color: #cd0000 !important
+}
+
+.bg-red.lter,.bg-red>.lter {
+    background-color: #e20000 !important
+}
+
+.bg-brick {
+    background-color: #cd6723;
+    color: #fff !important
+}
+
+.bg-brick.dker,.bg-brick>.dker {
+    background-color: #aa551d !important
+}
+
+.bg-brick.dk,.bg-brick>.dk {
+    background-color: #bc5e20 !important
+}
+
+.bg-brick.lt,.bg-brick>.lt {
+    background-color: #db712a !important
+}
+
+.bg-brick.lter,.bg-brick>.lter {
+    background-color: #de7c3b !important
+}
+
+.bg-orange {
+    background-color: #ff4e00;
+    color: #fff !important
+}
+
+.bg-orange.dker,.bg-orange>.dker {
+    background-color: #d64200 !important
+}
+
+.bg-orange.dk,.bg-orange>.dk {
+    background-color: #eb4800 !important
+}
+
+.bg-orange.lt,.bg-orange>.lt {
+    background-color: #ff5c14 !important
+}
+
+.bg-orange.lter,.bg-orange>.lter {
+    background-color: #ff6a29 !important
+}
+
+.bg-green {
+    background-color: #4b780a;
+    color: #fff !important
+}
+
+.bg-green.dker,.bg-green>.dker {
+    background-color: #335207 !important
+}
+
+.bg-green.dk,.bg-green>.dk {
+    background-color: #3f6508 !important
+}
+
+.bg-green.lt,.bg-green>.lt {
+    background-color: #578b0c !important
+}
+
+.bg-green.lter,.bg-green>.lter {
+    background-color: #639e0d !important
+}
+
+.bg-blue {
+    background-color: #00caf2;
+    color: #fff !important
+}
+
+.bg-blue.dker,.bg-blue>.dker {
+    background-color: #00a8c9 !important
+}
+
+.bg-blue.dk,.bg-blue>.dk {
+    background-color: #00b9de !important
+}
+
+.bg-blue.lt,.bg-blue>.lt {
+    background-color: #07d6ff !important
+}
+
+.bg-blue.lter,.bg-blue>.lter {
+    background-color: #1cd9ff !important
+}
+
+.bg-black {
+    background-color: #222;
+    color: #fff !important
+}
+
+.bg-black.dker,.bg-black>.dker {
+    background-color: #0e0e0e !important
+}
+
+.bg-black.dk,.bg-black>.dk {
+    background-color: #181818 !important
+}
+
+.bg-black.lt,.bg-black>.lt {
+    background-color: #2c2c2c !important
+}
+
+.bg-black.lter,.bg-black>.lter {
+    background-color: #363636 !important
+}
+
+.bg-dark {
+    background-color: #444;
+    color: #fff !important
+}
+
+.bg-dark.dker,.bg-dark>.dker {
+    background-color: #303030 !important
+}
+
+.bg-dark.dk,.bg-dark>.dk {
+    background-color: #3a3a3a !important
+}
+
+.bg-dark.lt,.bg-dark>.lt {
+    background-color: #4e4e4e !important
+}
+
+.bg-dark.lter,.bg-dark>.lter {
+    background-color: #585858 !important
+}
+
+.bg-light {
+    background-color: #eee;
+    color: #333 !important
+}
+
+.bg-light.dker,.bg-light>.dker {
+    background-color: #dadada !important
+}
+
+.bg-light.dk,.bg-light>.dk {
+    background-color: #e4e4e4 !important
+}
+
+.bg-light.lt,.bg-light>.lt {
+    background-color: #f8f8f8 !important
+}
+
+.bg-light.lter,.bg-light>.lter {
+    background-color: #fff !important
+}
+
+.bg-brillant {
+    background: url("../img/pattern/brillant.png") repeat
+}
+
+.bg-always_grey {
+    background: url("../img/pattern/always_grey.png") repeat
+}
+
+.bg-retina_wood {
+    background: url("../img/pattern/retina_wood.png") repeat
+}
+
+.bg-low_contrast_linen {
+    background: url("../img/pattern/low_contrast_linen.png") repeat
+}
+
+.bg-egg_shell {
+    background: url("../img/pattern/egg_shell.png") repeat
+}
+
+.bg-cartographer {
+    background: url("../img/pattern/cartographer.png") repeat
+}
+
+.bg-batthern {
+    background: url("../img/pattern/batthern.png") repeat
+}
+
+.bg-noisy_grid {
+    background: url("../img/pattern/noisy_grid.png") repeat
+}
+
+.bg-diamond_upholstery {
+    background: url("../img/pattern/diamond_upholstery.png") repeat
+}
+
+.bg-greyfloral {
+    background: url("../img/pattern/greyfloral.png") repeat
+}
+
+.bg-white_tiles {
+    background: url("../img/pattern/white_tiles.png") repeat
+}
+
+.bg-gplaypattern {
+    background: url("../img/pattern/gplaypattern.png") repeat
+}
+
+.bg-arches {
+    background: url("../img/pattern/arches.png") repeat
+}
+
+.bg-purty_wood {
+    background: url("../img/pattern/purty_wood.png") repeat
+}
+
+.bg-diagonal_striped_brick {
+    background: url("../img/pattern/diagonal_striped_brick.png") repeat
+}
+
+.bg-large_leather {
+    background: url("../img/pattern/large_leather.png") repeat
+}
+
+.bg-bo_play_pattern {
+    background: url("../img/pattern/bo_play_pattern.png") repeat
+}
+
+.bg-irongrip {
+    background: url("../images/background.png") repeat
+}
+
+.bg-wood_1 {
+    background: url("../img/pattern/wood_1.png") repeat
+}
+
+.bg-pool_table {
+    background: url("../img/pattern/pool_table.png") repeat
+}
+
+.bg-crissXcross {
+    background: url("../img/pattern/crissXcross.png") repeat
+}
+
+.bg-rip_jobs {
+    background: url("../img/pattern/rip_jobs.png") repeat
+}
+
+.bg-random_grey_variations {
+    background: url("../img/pattern/random_grey_variations.png") repeat
+}
+
+.bg-carbon_fibre {
+    background: url("../img/pattern/carbon_fibre.png") repeat
+}
+
+body.error {
+    padding-top: 40px;
+    background: url("../img/pattern/always_grey.png") repeat rgba(68,68,68,0.9)
+}
+
+body.error .logo h1 {
+    color: #fff;
+    font-size: 100px;
+    text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,0.1),0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.2),0 20px 20px rgba(0,0,0,0.15)
+}
+
+@media (max-width:767px) {
+    body.error .logo h1 {
+        font-size: 60px
+    }
+}
+
+.login {
+    padding-top: 40px;
+    padding-bottom: 40px;
+    background: url("../images/background.png") repeat;
+}
+
+.login .form-signin {
+    max-width: 330px;
+    padding: 20px;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 3px
+}
+
+.login .form-signin .form-signin-heading,.login .form-signin .checkbox {
+    margin-bottom: 10px
+}
+
+.login .form-signin .checkbox {
+    font-weight: normal
+}
+
+.login .form-signin input[type="text"],.login .form-signin input[type="password"],.login .form-signin input[type="email"] {
+    position: relative;
+    font-size: 16px;
+    height: auto;
+    padding: 10px;
+    margin-bottom: 10px
+}
+
+.login .form-signin input[type="text"]:focus,.login .form-signin input[type="password"]:focus,.login .form-signin input[type="email"]:focus {
+    z-index: 2
+}
+
+.login .form-signin input.top {
+    margin-bottom: -1px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.login .form-signin input.middle {
+    margin-bottom: -1px;
+    border-radius: 0
+}
+
+.login .form-signin input.bottom {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
diff --git a/ui/dashboard.html b/ui/dashboard.html
new file mode 100644
index 0000000..75cb419
--- /dev/null
+++ b/ui/dashboard.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Dashboard - Apache Kibble</title>
+    <meta name="msapplication-TileColor" content="#5bc0de" />
+    <meta name="msapplication-TileImage" content="images/background.png" />
+    <link rel="icon" type="image/png" sizes="48x48" href="images/kibble-favicon.png">
+    
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
+    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- Metis core stylesheet -->
+    <link rel="stylesheet" href="css/warble.min.css">
+    <link rel="stylesheet" href="css/daterangepicker.css">
+    <link href="css/c3.css" rel="stylesheet">
+    <link href="css/chosen.css" rel="stylesheet">
+  </head>
+  <body class="dashboard" onload="loadPageWidgets(window.location.search.substr(1), 3);">
+    <nav class="topbar">
+      <img class="logo" src="images/warble-logo-navbar.png"/>
+      <ul>
+        <a href="dashboard.html?page=frontpage" class="selected"><li><i class="fa fa-home"></i> Dashboard</li></a>
+        <a href="clients.html?page=clients"><li><i class="fa fa-bar-chart-o"></i> Nodes / Agents</li></a>
+        <a href="status.html?page=overview"><li><i class="fa fa-cubes"></i> Host Status</li></a>
+        <a href="settings.html"><li><i class="fa fa-cog"></i> Server Settings</li></a>
+        <a href="users.html"><li><i class="fa fa-group"></i> Users</li></a>
+        <a href="dashboard.html?page=publish"><li><i class="fa fa-cloud-download"></i> Exports</li></a>
+        <a href="apidoc.html"><li><i class="fa fa-book"></i> API Docs</li></a>
+        <a href="javascript:void(signout());"><li><i class="fa fa-sign-out"></i> Log Off</li></a>
+      </ul>
+    </nav>
+    <nav class="titlebar">
+      <div class="searchbar">
+        &nbsp;
+      </div>
+      Dashboard
+    </nav>
+    <div>
+    
+    <div class="wrapper">
+      <div class="wrap1">
+        <div class="wrap2">
+          <div class="wrap3" id="innercontents">
+            Loading, please wait...
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+    <div id="chartWrapperHiddenMaster" style="display:none;"></div>
+    <!--jQuery -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+    <!--Bootstrap -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
+    
+    
+    <!-- Snoot4 stuff, to be removed -->
+    <script src="https://d3js.org/d3.v3.min.js"></script>
+    <script src="js/c3.min.js"></script>
+    <script type="text/javascript" src="js/warble.v1.js"></script>
+    <script src="js/moment/moment.min.js"></script>
+    <script src="js/datepicker/daterangepicker.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js" type="text/javascript" data-rocketoptimized="true"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/ui/images/background-bright.png b/ui/images/background-bright.png
new file mode 100644
index 0000000..19bbcef
Binary files /dev/null and b/ui/images/background-bright.png differ
diff --git a/ui/images/background.png b/ui/images/background.png
new file mode 100644
index 0000000..b2831a2
Binary files /dev/null and b/ui/images/background.png differ
diff --git a/ui/images/diagram-unit-agent.png b/ui/images/diagram-unit-agent.png
new file mode 100644
index 0000000..3de46ce
Binary files /dev/null and b/ui/images/diagram-unit-agent.png differ
diff --git a/ui/images/diagram-unit-node.png b/ui/images/diagram-unit-node.png
new file mode 100644
index 0000000..c0826ec
Binary files /dev/null and b/ui/images/diagram-unit-node.png differ
diff --git a/ui/images/favicon.ico b/ui/images/favicon.ico
new file mode 100644
index 0000000..7f4ede9
Binary files /dev/null and b/ui/images/favicon.ico differ
diff --git a/ui/images/warble-logo-navbar.png b/ui/images/warble-logo-navbar.png
new file mode 100644
index 0000000..562960d
Binary files /dev/null and b/ui/images/warble-logo-navbar.png differ
diff --git a/ui/images/warble-logo.png b/ui/images/warble-logo.png
new file mode 100644
index 0000000..ced2f98
Binary files /dev/null and b/ui/images/warble-logo.png differ
diff --git a/ui/index.html b/ui/index.html
new file mode 100644
index 0000000..e48249f
--- /dev/null
+++ b/ui/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Apache Warble</title>
+    <meta name="msapplication-TileColor" content="#5bc0de" />
+    <meta name="msapplication-TileImage" content="images/background.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
+    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Uniform.js/2.1.2/themes/default/css/uniform.default.min.css">
+
+    <!-- Metis core stylesheet -->
+    <link rel="stylesheet" href="css/warble.min.css">
+    <link rel="stylesheet" href="css/daterangepicker.css">
+    <link href="css/c3.css" rel="stylesheet">
+    <link href="css/chosen.css" rel="stylesheet">
+  </head>
+  <body >
+    <p style="text-align: center; padding-top: 30px;">
+      <img src="images/warble-logo.png" style="width: 400px;"/><br/><br/>
+      <a href="login.html" class="btn btn-primary">Sign in</a>
+    </p>
+    <!--jQuery -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+    <!--Bootstrap -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
+    
+    
+    <!-- Snoot4 stuff, to be removed -->
+    <script src="https://d3js.org/d3.v3.min.js"></script>
+    <script src="js/c3.min.js"></script>
+    <script type="text/javascript" src="js/warble.v1.js"></script>
+    <script src="js/moment/moment.min.js"></script>
+    <script src="js/datepicker/daterangepicker.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js" type="text/javascript" data-rocketoptimized="true"></script>
+    <footer style="text-align: center; font-size: 0.8em; position: absolute; bottom: 60px; width: 100%;">
+      Powered by Apache&reg; Warble&trade; (incubating).<br/>
+      Copyright© 2018, the Apache Software Foundation. Licensed under the Apache License v/2.<br/>
+      Apache Warble, Warble, Apache, the Apache feather logo, and the Apache Warble project logo are either registered trademarks or trademarks of the Apache Software Foundation in the United States and other countries.
+    </footer>
+  </body>
+</html>
\ No newline at end of file
diff --git a/ui/js/app.js b/ui/js/app.js
new file mode 100644
index 0000000..17c4c91
--- /dev/null
+++ b/ui/js/app.js
@@ -0,0 +1,1085 @@
+/**
+ * bootstrap-admin-template - Free Admin Template Based On Twitter Bootstrap 3.x
+ * @version 2.4.2
+ * @license MIT
+ * @link https://github.com/puikinsh/Bootstrap-Admin-Template
+ */
+'use strict';
+
+;(function ($, Metis) {
+    var $button = $('.inner a.btn');
+    Metis.metisButton = function () {
+        $.each($button, function () {
+            $(this).popover({
+                placement: 'bottom',
+                title: this.innerHTML,
+                content: this.outerHTML,
+                trigger: Metis.isTouchDevice ? 'touchstart' : 'hover'
+            });
+        });
+    };
+    return Metis;
+})(jQuery, Metis || {});
+"use strict";
+
+;(function ($, Metis) {
+  "use strict";
+
+  var d2 = [[0, 3], [1, 8], [2, 5], [3, 13], [4, 1]],
+      d3 = [[0, 12], [2, 2], [3, 9], [4, 4]],
+      parabola = [],
+      parabola2 = [],
+      circle = [],
+      heartA = [],
+      bernoulliA = [],
+      human = $("#human"),
+      eye = $("#eye"),
+      bar = $("#bar"),
+      heart = $("#heart"),
+      bernoilli = $("#bernoilli");
+
+  function lemniscatex(i) {
+    return Math.sqrt(2) * Math.cos(i) / (Math.pow(Math.sin(i), 2) + 1);
+  }
+
+  function lemniscatey(i) {
+    return Math.sqrt(2) * Math.cos(i) * Math.sin(i) / (Math.pow(Math.sin(i), 2) + 1);
+  }
+  Metis.MetisChart = function () {
+    // Plugin check
+    if (!$().plot) {
+      throw new Error('flot plugin require form MetisChart');
+    }
+    // Human charts
+    $.plot(human, [{ data: d2, label: 'MAN' }, { data: d3, label: 'WOMAN' }], {
+      clickable: true,
+      hoverable: true,
+      series: {
+        lines: {
+          show: true,
+          fill: true,
+          fillColor: {
+            colors: [{ opacity: 0.5 }, { opacity: 0.15 }]
+          }
+        },
+        points: { show: true }
+      }
+    });
+
+    // BAR charts
+    $.plot(bar, [{
+      data: d2,
+      label: 'BAR'
+    }], {
+      clickable: true,
+      hoverable: true,
+      series: {
+        bars: { show: true, barWidth: 0.6 },
+        points: { show: true }
+      }
+    });
+
+    // EYE charts
+    for (var i = -5; i <= 5; i += 0.5) {
+      parabola.push([i, Math.pow(i, 2) - 25]);
+      parabola2.push([i, -Math.pow(i, 2) + 25]);
+    }
+
+    for (var c = -2; c <= 2.1; c += 0.1) {
+      circle.push([c, Math.sqrt(400 - c * c * 100)]);
+      circle.push([c, -Math.sqrt(400 - c * c * 100)]);
+    }
+
+    $.plot(eye, [{ data: parabola2, lines: { show: true, fill: true } }, { data: parabola, lines: { show: true, fill: true } }, { data: circle, lines: { show: true } }]);
+
+    // HEART charts
+    for (i = -2; i <= 5; i += 0.01) {
+      heartA.push([16 * Math.pow(Math.sin(i), 3), 13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i)]);
+    }
+    $.plot($("#heart"), [{ data: heartA, label: '<i class="fa fa-heart"></i>', color: '#9A004D' }], {
+      series: {
+        lines: { show: true, fill: true },
+        points: { show: false }
+      },
+      yaxis: { show: true },
+      xaxis: { show: true }
+    });
+    $('#heart .legendLabel').addClass('animated pulse');
+    setInterval(function () {
+      $('#heart .legendLabel .fa.fa-heart').toggleClass('fa-2x');
+    }, 400);
+
+    // BERNOILLI charts
+    for (var k = 0; k <= 2 * Math.PI; k += 0.01) {
+      bernoulliA.push([lemniscatex(k), lemniscatey(k)]);
+    }
+    $.plot($("#bernoilli"), [{ data: bernoulliA, label: 'Lemniscate of Bernoulli', lines: { show: true, fill: true } }]);
+  };
+  return Metis;
+})(jQuery, Metis || {});
+'use strict';
+
+;(function ($) {
+    "use strict";
+
+    Metis.dashboard = function () {
+
+        //----------- BEGIN SPARKLINE CODE -------------------------*/
+        // required jquery.sparkline.min.js*/
+
+        /** This code runs when everything has been loaded on the page */
+        /* Inline sparklines take their values from the contents of the tag */
+        $('.inlinesparkline').sparkline();
+
+        /* Sparklines can also take their values from the first argument
+         passed to the sparkline() function */
+        var myvalues = [10, 8, 5, 7, 4, 4, 1];
+        $('.dynamicsparkline').sparkline(myvalues);
+
+        /* The second argument gives options such as chart type */
+        $('.dynamicbar').sparkline(myvalues, { type: 'bar', barColor: 'green' });
+
+        /* Use 'html' instead of an array of values to pass options
+         to a sparkline with data in the tag */
+        $('.inlinebar').sparkline('html', { type: 'bar', barColor: 'red' });
+
+        $(".sparkline.bar_week").sparkline([5, 6, 7, 2, 0, -4, -2, 4], {
+            type: 'bar',
+            height: '40',
+            barWidth: 5,
+            barColor: '#4d6189',
+            negBarColor: '#a20051'
+        });
+
+        $(".sparkline.line_day").sparkline([5, 6, 7, 9, 9, 5, 4, 6, 6, 4, 6, 7], {
+            type: 'line',
+            height: '40',
+            drawNormalOnTop: false
+        });
+
+        $(".sparkline.pie_week").sparkline([1, 1, 2], {
+            type: 'pie',
+            width: '40',
+            height: '40'
+        });
+
+        $('.sparkline.stacked_month').sparkline(['0:2', '2:4', '4:2', '4:1'], {
+            type: 'bar',
+            height: '40',
+            barWidth: 10,
+            barColor: '#4d6189',
+            negBarColor: '#a20051'
+        });
+        //----------- END SPARKLINE CODE -------------------------*/
+
+
+        //----------- BEGIN FULLCALENDAR CODE -------------------------*/
+
+        var date = new Date();
+        var d = date.getDate();
+        var m = date.getMonth();
+        var y = date.getFullYear();
+
+        var calendar = $('#calendar').fullCalendar({
+            header: {
+                left: 'prev,today,next,',
+                center: 'title',
+                right: 'month,agendaWeek,agendaDay'
+            },
+            selectable: true,
+            selectHelper: true,
+            select: function select(start, end, allDay) {
+                var title = prompt('Event Title:');
+                if (title) {
+                    calendar.fullCalendar('renderEvent', {
+                        title: title,
+                        start: start,
+                        end: end,
+                        allDay: allDay
+                    }, true // make the event "stick"
+                    );
+                }
+                calendar.fullCalendar('unselect');
+            },
+            editable: true,
+            events: [{
+                title: 'All Day Event',
+                start: new Date(y, m, 1),
+                className: 'label label-success'
+            }, {
+                title: 'Long Event',
+                start: new Date(y, m, d - 5),
+                end: new Date(y, m, d - 2),
+                className: 'label label-info'
+            }, {
+                id: 999,
+                title: 'Repeating Event',
+                start: new Date(y, m, d - 3, 16, 0),
+                allDay: false,
+                className: 'label label-warning'
+            }, {
+                id: 999,
+                title: 'Repeating Event',
+                start: new Date(y, m, d + 4, 16, 0),
+                allDay: false,
+                className: 'label label-inverse'
+            }, {
+                title: 'Meeting',
+                start: new Date(y, m, d, 10, 30),
+                allDay: false,
+                className: 'label label-important'
+            }, {
+                title: 'Lunch',
+                start: new Date(y, m, d, 12, 0),
+                end: new Date(y, m, d, 14, 0),
+                allDay: false
+            }, {
+                title: 'Birthday Party',
+                start: new Date(y, m, d + 1, 19, 0),
+                end: new Date(y, m, d + 1, 22, 30),
+                allDay: false
+            }, {
+                title: 'Click for Google',
+                start: new Date(y, m, 28),
+                end: new Date(y, m, 29),
+                url: 'http://google.com/'
+            }]
+        });
+        /*----------- END FULLCALENDAR CODE -------------------------*/
+
+        /*----------- BEGIN CHART CODE -------------------------*/
+        var sin = [],
+            cos = [];
+        for (var i = 0; i < 14; i += 0.5) {
+            sin.push([i, Math.sin(i)]);
+            cos.push([i, Math.cos(i)]);
+        }
+
+        var plot = $.plot($("#trigo"), [{
+            data: sin,
+            label: "sin(x)",
+            points: {
+                fillColor: "#4572A7",
+                size: 5
+            },
+            color: '#4572A7'
+        }, {
+            data: cos,
+            label: "cos(x)",
+            points: {
+                fillColor: "#333",
+                size: 35
+            },
+            color: '#AA4643'
+        }], {
+            series: {
+                lines: {
+                    show: true
+                },
+                points: {
+                    show: true
+                }
+            },
+            grid: {
+                hoverable: true,
+                clickable: true
+            },
+            yaxis: {
+                min: -1.2,
+                max: 1.2
+            }
+        });
+
+        function showTooltip(x, y, contents) {
+            $('<div id="tooltip">' + contents + '</div>').css({
+                position: 'absolute',
+                display: 'none',
+                top: y + 5,
+                left: x + 5,
+                border: '1px solid #fdd',
+                padding: '2px',
+                'background-color': '#000',
+                color: '#fff'
+            }).appendTo("body").fadeIn(200);
+        }
+
+        var previousPoint = null;
+        $("#trigo").bind("plothover", function (event, pos, item) {
+            $("#x").text(pos.x.toFixed(2));
+            $("#y").text(pos.y.toFixed(2));
+
+            if (item) {
+                if (previousPoint !== item.dataIndex) {
+                    previousPoint = item.dataIndex;
+
+                    $("#tooltip").remove();
+                    var x = item.datapoint[0].toFixed(2),
+                        y = item.datapoint[1].toFixed(2);
+
+                    showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
+                }
+            } else {
+                $("#tooltip").remove();
+                previousPoint = null;
+            }
+        });
+        /*----------- END CHART CODE -------------------------*/
+
+        /*----------- BEGIN TABLESORTER CODE -------------------------*/
+        /* required jquery.tablesorter.min.js*/
+        $(".sortableTable").tablesorter();
+        /*----------- END TABLESORTER CODE -------------------------*/
+    };
+    return Metis;
+})(jQuery);
+"use strict";
+
+;(function ($) {
+    "use strict";
+
+    Metis.formGeneral = function () {
+
+        $('.with-tooltip').tooltip({
+            selector: ".input-tooltip"
+        });
+
+        /*----------- BEGIN autosize CODE -------------------------*/
+        if ($('#autosize').length) {
+            $('#autosize').autosize();
+        }
+        /*----------- END autosize CODE -------------------------*/
+
+        /*----------- BEGIN inputlimiter CODE -------------------------*/
+        $('#limiter').inputlimiter({
+            limit: 140,
+            remText: 'You only have %n character%s remaining...',
+            limitText: 'You\'re allowed to input %n character%s into this field.'
+        });
+        /*----------- END inputlimiter CODE -------------------------*/
+
+        /*----------- BEGIN tagsInput CODE -------------------------*/
+        $('#tags').tagsInput();
+        /*----------- END tagsInput CODE -------------------------*/
+
+        /*----------- BEGIN chosen CODE -------------------------*/
+
+        $(".chzn-select").chosen();
+        $(".chzn-select-deselect").chosen({
+            allow_single_deselect: true
+        });
+        /*----------- END chosen CODE -------------------------*/
+
+        /*----------- BEGIN spinner CODE -------------------------*/
+        //     DEPRECATED
+        //     $('#spin1').spinner();
+        //     $("#spin2").spinner({
+        //         step: 0.01,
+        //         numberFormat: "n"
+        //     });
+        //     $("#spin3").spinner({
+        //         culture: 'en-US',
+        //         min: 5,
+        //         max: 2500,
+        //         step: 25,
+        //         start: 1000,
+        //         numberFormat: "C"
+        //     });
+        /*----------- END spinner CODE -------------------------*/
+
+        /*----------- BEGIN uniform CODE -------------------------*/
+        $('.uniform').uniform();
+        /*----------- END uniform CODE -------------------------*/
+
+        /*----------- BEGIN validVal CODE -------------------------*/
+        $('#validVal').validVal();
+        /*----------- END validVal CODE -------------------------*/
+
+        /*----------- BEGIN colorpicker CODE -------------------------*/
+        $('#cp1').colorpicker({
+            format: 'hex'
+        });
+        $('#cp2').colorpicker();
+        $('#cp3').colorpicker();
+        $('#cp4').colorpicker().on('changeColor', function (ev) {
+            $('#colorPickerBlock').css('background-color', ev.color.toHex());
+        });
+        /*----------- END colorpicker CODE -------------------------*/
+
+        /*----------- BEGIN datepicker CODE -------------------------*/
+        $('#dp1').datepicker({
+            format: 'mm-dd-yyyy'
+        });
+        $('#dp2').datepicker();
+        $('#dp3').datepicker();
+        $('#dp3').datepicker();
+        $('#dpYears').datepicker();
+        $('#dpMonths').datepicker();
+
+        var startDate = new Date(2014, 1, 20);
+        var endDate = new Date(2014, 1, 25);
+        $('#dp4').datepicker().on('changeDate', function (ev) {
+            if (ev.date.valueOf() > endDate.valueOf()) {
+                $('#alert').show().find('strong').text('The start date can not be greater then the end date');
+            } else {
+                $('#alert').hide();
+                startDate = new Date(ev.date);
+                $('#startDate').text($('#dp4').data('date'));
+            }
+            $('#dp4').datepicker('hide');
+        });
+        $('#dp5').datepicker().on('changeDate', function (ev) {
+            if (ev.date.valueOf() < startDate.valueOf()) {
+                $('#alert').show().find('strong').text('The end date can not be less then the start date');
+            } else {
+                $('#alert').hide();
+                endDate = new Date(ev.date);
+                $('#endDate').text($('#dp5').data('date'));
+            }
+            $('#dp5').datepicker('hide');
+        });
+        /*----------- END datepicker CODE -------------------------*/
+
+        /*----------- BEGIN daterangepicker CODE -------------------------*/
+        $('#reservation').daterangepicker();
+
+        $('#reportrange').daterangepicker({
+            ranges: {
+                'Today': [moment(), moment()],
+                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
+                'Last 7 Days': [moment().subtract('days', 6), moment()],
+                'Last 30 Days': [moment().subtract('days', 29), moment()],
+                'This Month': [moment().startOf('month'), moment().endOf('month')],
+                'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
+            }
+        }, function (start, end) {
+            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
+        });
+        /*----------- END daterangepicker CODE -------------------------*/
+
+        /*----------- BEGIN timepicker CODE -------------------------*/
+        //     DEPRECATED
+        // $('.timepicker-default').timepicker();
+        //
+        // $('.timepicker-24').timepicker({
+        //     minuteStep: 1,
+        //     showSeconds: true,
+        //     showMeridian: false
+        // });
+        $('#datetimepicker4').datetimepicker({
+            pickDate: false
+        });
+        /*----------- END timepicker CODE -------------------------*/
+
+        /*----------- BEGIN toggleButtons CODE -------------------------*/
+        $.each($('.make-switch'), function () {
+            $(this).bootstrapSwitch({
+                onText: $(this).data('onText'),
+                offText: $(this).data('offText'),
+                onColor: $(this).data('onColor'),
+                offColor: $(this).data('offColor'),
+                size: $(this).data('size'),
+                labelText: $(this).data('labelText')
+            });
+        });
+        /*----------- END toggleButtons CODE -------------------------*/
+
+        /*----------- BEGIN dualListBox CODE -------------------------*/
+        //     DEPRECATED
+        //     $.configureBoxes();
+        /*----------- END dualListBox CODE -------------------------*/
+    };
+
+    return Metis;
+})(jQuery);
+'use strict';
+
+;(function ($) {
+    "use strict";
+
+    Metis.formValidation = function () {
+        /*----------- BEGIN validationEngine CODE -------------------------*/
+        $('#popup-validation').validationEngine();
+        /*----------- END validationEngine CODE -------------------------*/
+
+        /*----------- BEGIN validate CODE -------------------------*/
+        $('#inline-validate').validate({
+            rules: {
+                required: "required",
+                email: {
+                    required: true,
+                    email: true
+                },
+                date: {
+                    required: true,
+                    date: true
+                },
+                url: {
+                    required: true,
+                    url: true
+                },
+                password: {
+                    required: true,
+                    minlength: 5
+                },
+                confirm_password: {
+                    required: true,
+                    minlength: 5,
+                    equalTo: "#password"
+                },
+                agree: "required",
+                minsize: {
+                    required: true,
+                    minlength: 3
+                },
+                maxsize: {
+                    required: true,
+                    maxlength: 6
+                },
+                minNum: {
+                    required: true,
+                    min: 3
+                },
+                maxNum: {
+                    required: true,
+                    max: 16
+                }
+            },
+            errorClass: 'help-block col-lg-6',
+            errorElement: 'span',
+            highlight: function highlight(element, errorClass, validClass) {
+                $(element).parents('.form-group').removeClass('has-success').addClass('has-error');
+            },
+            unhighlight: function unhighlight(element, errorClass, validClass) {
+                $(element).parents('.form-group').removeClass('has-error').addClass('has-success');
+            }
+        });
+
+        $('#block-validate').validate({
+            rules: {
+                required2: "required",
+                email2: {
+                    required: true,
+                    email: true
+                },
+                date2: {
+                    required: true,
+                    date: true
+                },
+                url2: {
+                    required: true,
+                    url: true
+                },
+                password2: {
+                    required: true,
+                    minlength: 5
+                },
+                confirm_password2: {
+                    required: true,
+                    minlength: 5,
+                    equalTo: "#password2"
+                },
+                agree2: "required",
+                digits: {
+                    required: true,
+                    digits: true
+                },
+                range: {
+                    required: true,
+                    range: [5, 16]
+                }
+            },
+            errorClass: 'help-block',
+            errorElement: 'span',
+            highlight: function highlight(element, errorClass, validClass) {
+                $(element).parents('.form-group').removeClass('has-success').addClass('has-error');
+            },
+            unhighlight: function unhighlight(element, errorClass, validClass) {
+                $(element).parents('.form-group').removeClass('has-error').addClass('has-success');
+            }
+        });
+        /*----------- END validate CODE -------------------------*/
+    };
+
+    return Metis;
+})(jQuery);
+"use strict";
+
+;(function ($, Metis) {
+    "use strict";
+
+    Metis.formWizard = function () {
+
+        /*----------- BEGIN uniform CODE -------------------------*/
+        $('#fileUpload').uniform();
+        /*----------- END uniform CODE -------------------------*/
+
+        /*----------- BEGIN plupload CODE -------------------------*/
+        $("#uploader").pluploadQueue({
+            runtimes: 'html5,html4',
+            url: 'form-wysiwyg.html',
+            max_file_size: '128kb',
+            unique_names: true,
+            filters: [{
+                title: "Image files",
+                extensions: "jpg,gif,png"
+            }]
+        });
+        /*----------- END plupload CODE -------------------------*/
+
+        /*----------- BEGIN formwizard CODE -------------------------*/
+        $("#wizardForm").formwizard({
+            formPluginEnabled: true,
+            validationEnabled: true,
+            focusFirstInput: true,
+            formOptions: {
+                beforeSubmit: function beforeSubmit(data) {
+                    $.gritter.add({
+                        // (string | mandatory) the heading of the notification
+                        title: 'data sent to the server',
+                        // (string | mandatory) the text inside the notification
+                        text: $.param(data),
+                        sticky: false
+                    });
+
+                    return false;
+                },
+                dataType: 'json',
+                resetForm: true
+            },
+            validationOptions: {
+                rules: {
+                    server_host: "required",
+                    server_name: "required",
+                    server_user: "required",
+                    server_password: "required",
+                    table_prefix: "required",
+                    table_collation: "required",
+                    username: {
+                        required: true,
+                        minlength: 3
+                    },
+                    usermail: {
+                        required: true,
+                        email: true
+                    },
+                    pass: {
+                        required: true,
+                        minlength: 6
+                    },
+                    pass2: {
+                        required: true,
+                        minlength: 6,
+                        equalTo: "#pass"
+                    }
+                },
+                errorClass: 'help-block',
+                errorElement: 'span',
+                highlight: function highlight(element, errorClass, validClass) {
+                    $(element).parents('.form-group').removeClass('has-success').addClass('has-error');
+                },
+                unhighlight: function unhighlight(element, errorClass, validClass) {
+                    $(element).parents('.form-group').removeClass('has-error').addClass('has-success');
+                }
+            }
+        });
+        /*----------- END formwizard CODE -------------------------*/
+    };
+
+    return Metis;
+})(jQuery, Metis || {});
+'use strict';
+
+;(function ($) {
+    "use strict";
+
+    Metis.formWysiwyg = function () {
+
+        /*----------- BEGIN wysihtml5 CODE -------------------------*/
+        $('#wysihtml5').wysihtml5();
+        /*----------- END wysihtml5 CODE -------------------------*/
+
+        /*----------- BEGIN Markdown.Editor CODE -------------------------*/
+        var converter = Markdown.getSanitizingConverter();
+        var editor = new Markdown.Editor(converter);
+        editor.run();
+        /*----------- END Markdown.Editor CODE -------------------------*/
+
+        // DEPRECATED
+        //     /*----------- BEGIN cleditor CODE -------------------------*/
+        //     var cleditor = $("#cleditor").cleditor({width: "100%", height: "100%"})[0].focus();
+        //     $(window).resize();
+        //
+        //     $(window).resize(function () {
+        //         var $win = $('#cleditorDiv');
+        //         cleditor.width($win.width() - 24).height($win.height() - 24).offset({
+        //             left: 15,
+        //             top: 15
+        //         });
+        //         editor.refresh();
+        //     });
+        //     /*----------- END cleditor CODE -------------------------*/
+
+        /*----------- BEGIN epiceditor CODE -------------------------*/
+        var opts = {
+            basePath: '//cdnjs.cloudflare.com/ajax/libs/epiceditor/0.2.2'
+        };
+        var epiceditor = new EpicEditor(opts).load();
+        /*----------- END epiceditor CODE -------------------------*/
+    };
+    return Metis;
+})(jQuery);
+'use strict';
+
+;(function ($) {
+    "use strict";
+
+    Metis.MetisCalendar = function () {
+        var date = new Date();
+        var d = date.getDate();
+        var m = date.getMonth();
+        var y = date.getFullYear();
+
+        var hdr = {};
+
+        if ($(window).width() <= 767) {
+            hdr = { left: 'title', center: 'month,agendaWeek,agendaDay', right: 'prev,today,next' };
+        } else {
+            hdr = { left: '', center: 'title', right: 'prev,today,month,agendaWeek,agendaDay,next' };
+        }
+
+        var initDrag = function initDrag(e) {
+            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
+            // it doesn't need to have a start or end
+
+
+            var eventObject = {
+                title: $.trim(e.text()), // use the element's text as the event title
+
+                className: $.trim(e.children('span').attr('class')) // use the element's children as the event class
+            };
+            // store the Event Object in the DOM element so we can get to it later
+            e.data('eventObject', eventObject);
+
+            // make the event draggable using jQuery UI
+            e.draggable({
+                zIndex: 999,
+                revert: true, // will cause the event to go back to its
+                revertDuration: 0 //  original position after the drag
+            });
+        };
+
+        var addEvent = function addEvent(title, priority) {
+            title = title.length === 0 ? "Untitled Event" : title;
+
+            priority = priority.length === 0 ? "label label-default" : priority;
+
+            var html = $('<li class="external-event"><span class="' + priority + '">' + title + '</span></li>');
+
+            jQuery('#external-events').append(html);
+            initDrag(html);
+        };
+
+        /* initialize the external events
+         -----------------------------------------------------------------*/
+
+        $('#external-events li.external-event').each(function () {
+            initDrag($(this));
+        });
+
+        $('#add-event').click(function () {
+            var title = $('#title').val();
+            var priority = $('input:radio[name=priority]:checked').val();
+
+            addEvent(title, priority);
+        });
+        /* initialize the calendar
+         -----------------------------------------------------------------*/
+
+        $('#calendar').fullCalendar({
+            header: hdr,
+            editable: true,
+            droppable: true, // this allows things to be dropped onto the calendar !!!
+            drop: function drop(date) {
+                // this function is called when something is dropped
+
+                // retrieve the dropped element's stored Event Object
+                var originalEventObject = $(this).data('eventObject');
+
+                // we need to copy it, so that multiple events don't have a reference to the same object
+                var copiedEventObject = $.extend({}, originalEventObject);
+
+                // assign it the date that was reported
+                copiedEventObject.start = date;
+
+                // render the event on the calendar
+                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
+                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
+
+                // is the "remove after drop" checkbox checked?
+                if ($('#drop-remove').is(':checked')) {
+                    // if so, remove the element from the "Draggable Events" list
+                    $(this).remove();
+                }
+            },
+            windowResize: function windowResize(event, ui) {
+                $('#calendar').fullCalendar('render');
+            }
+        });
+    };
+    return Metis;
+})(jQuery);
+'use strict';
+
+;(function ($) {
+  "use strict";
+
+  Metis.MetisFile = function () {
+
+    /*----------- BEGIN elfinder CODE -------------------------*/
+    var elf = $('#elfinder').elfinder({
+      url: 'assets/elfinder-2.0-rc1/php/connector.php' // connector URL (REQUIRED)
+      // lang: 'de',             // language (OPTIONAL)
+    }).elfinder('instance');
+    /*----------- END elfinder CODE -------------------------*/
+  };
+  return Metis;
+})(jQuery);
+'use strict';
+
+;(function ($) {
+    "use strict";
+
+    Metis.MetisMaps = function () {
+        var map1, map2, map3, map4, map5, map6, path, addressMap;
+
+        map1 = new GMaps({
+            el: '#gmaps-basic',
+            lat: -12.043333,
+            lng: -77.028333,
+            zoomControl: true,
+            zoomControlOpt: {
+                style: 'SMALL',
+                position: 'TOP_LEFT'
+            },
+            panControl: false,
+            streetViewControl: false,
+            mapTypeControl: false,
+            overviewMapControl: false
+        });
+
+        map2 = new GMaps({
+            el: '#gmaps-marker',
+            lat: -12.043333,
+            lng: -77.028333
+        });
+        map2.addMarker({
+            lat: -12.043333,
+            lng: -77.03,
+            title: 'Lima',
+            details: {
+                database_id: 42,
+                author: 'HPNeo'
+            },
+            click: function click(e) {
+                if (console.log) console.log(e);
+                alert('You clicked in this marker');
+            },
+            mouseover: function mouseover(e) {
+                if (console.log) console.log(e);
+            }
+        });
+        map2.addMarker({
+            lat: -12.042,
+            lng: -77.028333,
+            title: 'Marker with InfoWindow',
+            infoWindow: {
+                content: '<p>HTML Content</p>'
+            }
+        });
+
+        map3 = new GMaps({
+            el: '#gmaps-geolocation',
+            lat: -12.043333,
+            lng: -77.028333
+        });
+
+        GMaps.geolocate({
+            success: function success(position) {
+                map3.setCenter(position.coords.latitude, position.coords.longitude);
+            },
+            error: function error(_error) {
+                alert('Geolocation failed: ' + _error.message);
+            },
+            not_supported: function not_supported() {
+                alert("Your browser does not support geolocation");
+            },
+            always: function always() {
+                //alert("Done!");
+            }
+        });
+
+        map4 = new GMaps({
+            el: '#gmaps-polylines',
+            lat: -12.043333,
+            lng: -77.028333,
+            click: function click(e) {
+                console.log(e);
+            }
+        });
+
+        path = [[-12.044012922866312, -77.02470665341184], [-12.05449279282314, -77.03024273281858], [-12.055122327623378, -77.03039293652341], [-12.075917129727586, -77.02764635449216], [-12.07635776902266, -77.02792530422971], [-12.076819390363665, -77.02893381481931], [-12.088527520066453, -77.0241058385925], [-12.090814532191756, -77.02271108990476]];
+
+        map4.drawPolyline({
+            path: path,
+            strokeColor: '#131540',
+            strokeOpacity: 0.6,
+            strokeWeight: 6
+        });
+
+        map5 = new GMaps({
+            el: '#gmaps-route',
+            lat: -12.043333,
+            lng: -77.028333
+        });
+        map5.drawRoute({
+            origin: [-12.044012922866312, -77.02470665341184],
+            destination: [-12.090814532191756, -77.02271108990476],
+            travelMode: 'driving',
+            strokeColor: '#131540',
+            strokeOpacity: 0.6,
+            strokeWeight: 6
+        });
+
+        addressMap = new GMaps({
+            el: '#gmaps-geocoding',
+            lat: -12.043333,
+            lng: -77.028333
+        });
+        $('#geocoding_form').submit(function (e) {
+            e.preventDefault();
+            GMaps.geocode({
+                address: $('#address').val().trim(),
+                callback: function callback(results, status) {
+                    if (status === 'OK') {
+                        var latlng = results[0].geometry.location;
+                        addressMap.setCenter(latlng.lat(), latlng.lng());
+                        addressMap.addMarker({
+                            lat: latlng.lat(),
+                            lng: latlng.lng()
+                        });
+                    }
+                }
+            });
+        });
+    };
+    return Metis;
+})(jQuery);
+"use strict";
+
+;(function ($, Metis) {
+  if (!$().sortable) {
+    return;
+  }
+  var $sortable = $('.inner [class*=col-]');
+  Metis.metisSortable = function () {
+    $sortable.sortable({
+      placeholder: "ui-state-highlight"
+    }).disableSelection();
+  };
+  return Metis;
+})(jQuery, Metis || {});
+"use strict";
+
+;(function ($) {
+  "use strict";
+
+  Metis.MetisTable = function () {
+
+    /*----------- BEGIN TABLESORTER CODE -------------------------*/
+    /* required jquery.tablesorter.min.js*/
+    $(".sortableTable").tablesorter();
+    /*----------- END TABLESORTER CODE -------------------------*/
+
+    /*----------- BEGIN datatable CODE -------------------------*/
+    $('#dataTable').dataTable({
+      //         "sDom": "<'pull-right'l>t<'row'<'col-lg-6'f><'col-lg-6'p>>",
+      //         "sPaginationType": "bootstrap",
+      //         "oLanguage": {
+      //             "sLengthMenu": "Show _MENU_ entries"
+      //         }
+    });
+    /*----------- END datatable CODE -------------------------*/
+
+    /*----------- BEGIN action table CODE -------------------------*/
+    // DEPRECATED
+    //     $('#actionTable button.remove').on('click', function() {
+    //         $(this).closest('tr').remove();
+    //     });
+    //     $('#actionTable button.edit').on('click', function() {
+    //         $('#editModal').modal({
+    //             show: true
+    //         });
+    //         var val1 = $(this).closest('tr').children('td').eq(1),
+    //                 val2 = $(this).closest('tr').children('td').eq(2),
+    //                 val3 = $(this).closest('tr').children('td').eq(3);
+    //         $('#editModal #fName').val(val1.html());
+    //         $('#editModal #lName').val(val2.html());
+    //         $('#editModal #uName').val(val3.html());
+    // 
+    // 
+    //         $('#editModal #sbmtBtn').on('click', function() {
+    //             val1.html($('#editModal #fName').val());
+    //             val2.html($('#editModal #lName').val());
+    //             val3.html($('#editModal #uName').val());
+    //         });
+    // 
+    //     });
+    /*----------- END action table CODE -------------------------*/
+  };
+
+  return Metis;
+})(jQuery);
+"use strict";
+
+;(function ($, Metis) {
+    "use strict";
+
+    var _updateClass = function _updateClass(el, c) {
+        el.removeClass("primary success danger warning info default").addClass(c);
+    };
+    Metis.MetisPricing = function () {
+        var $dark = $("ul.dark li.active"),
+            $light = $("ul#light li.active");
+
+        $("#dark-toggle label").on(Metis.buttonPressedEvent, function () {
+            var $this = $(this);
+            _updateClass($dark, $this.find("input").val());
+        });
+
+        $("#light-toggle label").on(Metis.buttonPressedEvent, function () {
+            var $this = $(this);
+            _updateClass($light, $this.find("input").val());
+        });
+    };
+    return Metis;
+})(jQuery, Metis || {});
+'use strict';
+
+;(function ($, Metis) {
+  Metis.MetisProgress = function () {
+    var $bar = $('.progress .progress-bar');
+    $.each($bar, function () {
+
+      var $this = $(this);
+
+      $this.animate({
+        width: $(this).attr('aria-valuenow') + '%'
+      }).popover({
+        placement: 'bottom',
+        title: 'Source',
+        content: this.outerHTML
+      });
+    });
+  };
+  return Metis;
+})(jQuery, Metis);
\ No newline at end of file
diff --git a/ui/js/c3.min.js b/ui/js/c3.min.js
new file mode 100644
index 0000000..1550679
--- /dev/null
+++ b/ui/js/c3.min.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.c3=e()}(this,function(){"use strict";function t(t,e){function i(t,e){t.attr("transform",function(t){return"translate("+Math.ceil(e(t)+w)+", 0)"})}function n(t,e){t.attr("transform",function(t){return"translate(0,"+Math.ceil(e(t))+")"})}function a(t){var e=t[0],i=t[t.length-1];return e<i?[e,i]:[i,e]}function o(t){var e,i,n=[];if(t.ticks)return t.ticks.ap [...]
\ No newline at end of file
diff --git a/ui/js/coffee/account.coffee b/ui/js/coffee/account.coffee
new file mode 100644
index 0000000..e5ba526
--- /dev/null
+++ b/ui/js/coffee/account.coffee
@@ -0,0 +1,103 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+signup = (form) ->
+    err = null
+    if form.name.value.length < 2
+        err = "Please enter your full name"
+    else if form.screenname.value.length < 1
+        err = "Please enter a screen name"
+    else if form.email.value.length < 6 or not form.email.value.match(/^[^\r\n\s @]+@[^\r\n\s @]+$/)
+        err = "Please enter a valid email address"
+    else if form.password.value.length < 1 or form.password.value != form.password2.value
+        err = "Please enter your password and make sure it matches the re-type"
+    if err
+        document.getElementById('signupmsg').innerHTML = "<h2>Error: " + err + "</h2>"
+        return false
+    else
+        document.getElementById('signupmsg').innerHTML = "Creating account, hang on..!"
+        post('user-signup',
+             {
+                action: 'create',
+                name: form.name.value,
+                password: form.password.value,
+                screenname: form.screenname.value,
+                email: form.email.value,
+                code: form.code.value
+                }
+            , null, validateSignup)
+        return false
+
+validateSignup = (json, state) ->
+    if json.created
+        document.getElementById('signupmsg').innerHTML = "<span style='color: #060;'>Account created! Please check your inbox for verification instructions.</span>"
+    else
+        document.getElementById('signupmsg').innerHTML = "<h2 style='font-size: 2rem; color: #830;'>Error: " + json.message + "</h2>"
+        
+login = (form) ->
+    if form.username.value.length > 5 and form.password.value.length > 0
+        cog(document.getElementById('loginmsg'))
+        post('account', {
+            username: form.username.value,
+            password: form.password.value,
+            api: form.api.value
+        }, null, validateLogin)
+    return false
+
+validateLogin = (json, state) ->
+    if json.loginRequired
+        document.getElementById('loginmsg').innerHTML = json.error
+    else
+      if json.apiversion and json.apiversion >= 3
+         if document.referrer and document.referrer.match(/https:\/\/(?:www)?\.snoot\.io\/dashboard/i)
+            location.href = document.referrer
+         else
+            location.href = "/dashboard.html?page=default"
+      else
+         location.href = "/api2.html?page=default"
+
+doResetPass = () ->
+    rtoken = get('rtoken').value
+    newpass = get('newpass').value
+    post('account',{ remail: remail, rtoken: rtoken, newpass: newpass } , null, pwReset)
+    return false
+
+remail = ""
+pwReset = () ->
+   get('resetform').innerHTML = "Assuming you entered the right token, your password has now been reset!. <a href='login.html'>Log in</a>."
+
+getResetToken = (json, state) ->
+    form = get('resetform')
+    form.innerHTML = ""
+    p = mk('p', {}, "A reset token has been sent to your email address. Please enter the reset token and your new preferred password below:")
+    app(form, p)
+    token = mk('input', {type: 'text', placeholder: 'Reset token', autocomplete: 'off', name: 'rtoken', id: 'rtoken'})
+    newpw = mk('input', {type: 'password', placeholder: 'New passord', autocomplete: 'off', name: 'newpass', id: 'newpass'})
+    app(form, token)
+    app(form, mk('br'))
+    app(form, newpw)
+    app(form, mk('br'))
+    btn = mk('input', { type: 'button', onclick: 'doResetPass()', value: 'Reset your password'})
+    form.setAttribute("onsubmit", "return doResetPass();")
+    app(form, btn)
+    
+resetpw = () ->
+    email = get('email').value
+    remail = email
+    post('account',{ reset: email } , null, getResetToken)
+    return false
+   
diff --git a/ui/js/coffee/charts_donut.coffee b/ui/js/coffee/charts_donut.coffee
new file mode 100644
index 0000000..ffe737d
--- /dev/null
+++ b/ui/js/coffee/charts_donut.coffee
@@ -0,0 +1,38 @@
+charts_donutchart = (obj, data, maxN) ->
+    a = 0 # Number of segments
+    asDataArray = []
+    if data.counts
+        data = data.counts
+    for k, v of data
+        asDataArray.push([k,v])
+        a++
+    asDataArray.sort((a,b) => b[1] - a[1])
+    if maxN and asDataArray.length > maxN
+        others = 0
+        narr = asDataArray.slice(maxN, asDataArray.length-maxN)
+        asDataArray = asDataArray.slice(0,maxN)
+        for el in narr
+            others += el[1]
+        asDataArray.push(['Others', others])
+        asDataArray.sort((a,b) => b[1] - a[1])
+    config = {
+        bindto: obj,
+        data: {
+          columns: asDataArray,
+          type: 'donut'
+        },
+        donut: {
+            #title: "foo"
+            width: 50
+        },
+        color: {
+            pattern: genColors(a + 1, 0.55, 0.475, true)
+            },
+        tooltip: {
+            format: {
+                value: (val) => d3.format(',')(val)
+            }
+        }
+    }
+    c = c3.generate(config)
+    return [c, config]
diff --git a/ui/js/coffee/charts_gauge.coffee b/ui/js/coffee/charts_gauge.coffee
new file mode 100644
index 0000000..0ce2ea2
--- /dev/null
+++ b/ui/js/coffee/charts_gauge.coffee
@@ -0,0 +1,40 @@
+charts_gaugechart = (obj, data) ->
+    if data.gauge
+        data = data.gauge
+    
+    config = {
+        bindto: obj,
+        data: {
+          columns: [[data.key or 'value', data.value or data]],
+          type: 'gauge'
+        },
+        gauge: {
+            min: 0,
+            max: 100
+            },
+        color: {
+            pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
+            threshold: {
+                values: [25, 55, 80, 100]
+            }
+        },
+        tooltip: {
+            format: {
+                value: (val) => d3.format(',')(val)
+            }
+        }
+    }
+    c = c3.generate(config)
+    return [c, config]
+
+
+gauge = (json, state) ->
+        
+    lmain = new HTML('div')
+    state.widget.inject(lmain, true)
+    
+    if json.gauge and json.gauge.text
+        lmain.inject(new HTML('p', {}, json.gauge.text))
+    
+    gaugeChart = new Chart(lmain, 'gauge', json)
+
diff --git a/ui/js/coffee/charts_linechart.coffee b/ui/js/coffee/charts_linechart.coffee
new file mode 100644
index 0000000..969c53d
--- /dev/null
+++ b/ui/js/coffee/charts_linechart.coffee
@@ -0,0 +1,124 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+charts_linechart_stacked = (o,d) => charts_linechart(o,d,'area-spline', true)
+
+charts_linechart = (obj, data, options) ->
+    linetype = if (options and options.linetype) then options.linetype else 'line'
+    stacked = if (options and options.stacked) then options.stacked else false
+    if options and options.filled and linetype == "line"
+        linetype = "area-spline"
+    a = 0 # Number of segments
+    asDataArray = []
+    asList = []
+    asTypes = []
+    axisData = {
+        y: {
+                tick: {
+                    format: d3.format('s')
+                }
+            }
+    }
+    if data.timeseries and isArray(data.timeseries)
+        dateFormat = '%Y-%m-%d'
+        if data.histogram and data.histogram == 'quarterly'
+            dateFormat = (x) => "Q" + ([1,2,3,4][Math.floor(x.getMonth()/3)]) + ", " + x.getFullYear()
+        if data.histogram and data.histogram == 'monthly'
+            dateFormat = '%b, %Y'
+        if data.interval and data.interval == 'hour'
+            dateFormat = '%Y-%m-%d %H:%M'
+        if data.histogram and data.histogram == 'yearly'
+            dateFormat = '%Y'
+        ts = [
+            ['x']
+            ]
+
+        # Get all timestamps
+        
+        xts = {}
+        for el in data.timeseries
+            axisData.x = {
+                    type: 'timeseries',
+                    tick: {
+                        format: dateFormat
+                    }
+                }
+            
+            ndate = new Date(parseInt(el.date)*1000.0)
+            ts[0].push(ndate)
+            for k, v of el
+                if k != 'date'
+                    if k == 'deletions'
+                        v = -v
+                    if xts[k] == undefined
+                        xts[k] = []
+                    xts[k].push(v)
+                    
+        for key, val of xts
+            xx = [key]
+            for el in val
+                xx.push(el)
+            ts.push(xx)
+            asList.push(key)
+            asTypes[key] = linetype
+            a++
+                
+        asDataArray = ts
+    else
+        for k, v of data.counts
+            asList.push(k)
+            asTypes[k] = 'bar'
+            tmpArray = [k]
+            if isArray(v)
+                for dataPoint in v
+                    tmpArray.push(dataPoint)
+            else
+                tmpArray.push(v)
+            asDataArray.push(tmpArray)
+            a++
+    config = {
+        bindto: obj,
+        data: {
+          x: if data.timeseries then 'x' else null,
+          #xFormat: '%s',
+          columns: asDataArray,
+          types: asTypes,
+          groups: if stacked then [asList] else [[]]
+        },
+        axis: axisData,
+        color: {
+            pattern: genColors(a + 1, 0.55, 0.475, true)
+            },
+        subchart: {
+          show: false
+        },
+        point: {
+            show: false
+        },
+        bar: {
+            width: {
+                ratio: 0.7
+            }
+        }
+        tooltip: {
+            format: {
+                value: (val) => d3.format(',')(val)
+            }
+        }
+    }
+    c = c3.generate(config)
+    return [c, config]
diff --git a/ui/js/coffee/charts_linked_map.coffee b/ui/js/coffee/charts_linked_map.coffee
new file mode 100644
index 0000000..05a10d0
--- /dev/null
+++ b/ui/js/coffee/charts_linked_map.coffee
@@ -0,0 +1,219 @@
+
+charts_linked = (obj, nodes, links, options) ->
+  llcolors = genColors(nodes.length+1, 0.55, 0.475, true)
+  licolors = genColors(nodes.length+1, 0.375, 0.35, true)
+  lla = 0
+  obj.className = "chartChart linkedChart"
+  svg = d3.select(obj).append("svg")
+    .attr("width", "100%")#llwidth)
+    .attr("height", "600")# llheight)
+  g = svg.append("g")
+  bb = obj.getBoundingClientRect()
+  llwidth = bb.width
+  llheight = Math.max(600, bb.height)
+  
+  tooltip = d3.select("body").append("div")	
+    .attr("class", "link_tooltip")				
+    .style("opacity", 0);
+  
+  avg = links.length / nodes.length
+  
+  force = d3.layout.force()
+      .gravity(0.015)
+      .distance(llheight/8)
+      .charge(-200/Math.log10(nodes.length))
+      .linkStrength(0.2/avg)
+      .size([llwidth, llheight])
+  
+  edges = []
+  links.forEach((e) ->
+    sourceNode = nodes.filter((n) => n.id == e.source)[0]
+    targetNode = nodes.filter((n) => n.id == e.target)[0]
+    edges.push({source: sourceNode, target: targetNode, s: e.source, value: e.value, name: e.name, tooltip: e.tooltip});
+  )
+  
+  force
+      .nodes(nodes)
+      .links(edges)
+      .start()
+  lcolors = {}
+  nodes.forEach((e) ->
+    lcolors[e.id] = licolors[lla++]
+    
+  )
+  lla = 0
+  link = g.selectAll(".link")
+      .data(edges)
+      .enter().append("path")
+      .attr("class", "link_link")
+      .attr("id", (d) => d.name)
+      .attr("data-source", (d) => d.source.id)
+      .attr("data-target", (d) => d.target.id)
+      .attr("style", (d) =>
+        "stroke-width: #{d.value}; stroke: #{lcolors[d.s]};"
+      ).on("mouseover", (d) ->
+        if d.tooltip
+            tooltip.transition()		
+                .duration(100)		
+                .style("opacity", .9);		
+            tooltip.html("<b>#{d.name}:</b><br/>" + d.tooltip.replace("\n", "<br/>"))
+                .style("left", (d3.event.pageX + 20) + "px")		
+                .style("top", (d3.event.pageY - 28) + "px");	
+            )
+      .on("mouseout", (d) ->
+            d3.select(this).style("stroke-opacity", "0.375")
+            tooltip.transition()		
+                .duration(200)		
+                .style("opacity", 0);	
+      )
+
+   
+  defs = svg.append("defs")
+  nodes.forEach( (n) ->
+    if n.gravatar
+      defs.append("pattern")
+      .attr("id", "gravatar-" + n.id)
+      .attr("patternUnits", "userSpaceOnUse")
+      .attr("width", n.size*2)
+      .attr("height", n.size*2)
+      .attr("x", n.size)
+      .attr("y", n.size)
+      .append("image")
+      .attr("width", n.size*2)
+      .attr("height", n.size*2)
+      .attr("x", "0")
+      .attr("y", "0")
+      .attr("xlink:href", "https://secure.gravatar.com/avatar/#{n.gravatar}.png?d=identicon")
+    else
+      n.gravatar = false
+  )  
+  
+  node = g.selectAll(".node")
+      .data(nodes)
+    .enter().append("g")
+      .attr("class", "link_node")
+      .attr("data-source", (d) => d.id)
+      .call(force.drag);
+  
+  lTargets = []
+  
+  gatherTargets = (d, e) ->
+    if e.source == d or e.target == d
+      lTargets.push(e.source.id)
+      lTargets.push(e.target.id)
+      return true
+    return false
+  
+  uptop = svg.append("g")
+  x = null
+ 
+  node.append("circle")
+      .attr("class", "link_node")
+      .attr("data-source", (d) => d.id)
+      .attr("data-color", (d) =>
+        lla++
+        return llcolors[lla-1]
+      )
+      .style("fill", (d) ->
+        if d.gravatar
+          return "url(#gravatar-#{d.id})"
+        else
+          return "#{d3.select(this).attr('data-color')}"
+      )
+      .style("stroke", "black")
+      .attr("r", (d) => d.size)
+      .on("mouseover", (d) ->
+        lTargets.push(d.id)
+        d3.selectAll("path").style("stroke-opacity", "0.075")
+        d3.selectAll("path").filter((e) => gatherTargets(d,e) ).style("stroke-opacity", "1").style("z-index", "20")
+        d3.selectAll("path").filter((e) => e.source == d or e.target).each((o) =>
+          
+          x = d3.select(this).insert("g", ":first-child").style("stroke", "red !important")
+          x.append("use").attr("xlink:href", "#" + o.name)
+        )
+        d3.selectAll("circle").filter((e) => e.id not in lTargets ).style("opacity", "0.2")
+        d3.selectAll("text").filter((e) => e.id not in lTargets ).style("opacity", "0.2")
+        )
+      .on("mouseout", (d) ->
+        lTargets = []
+        if x
+          x.selectAll("*").remove()
+        d3.selectAll("circle").style("opacity", null)
+        d3.selectAll("text").style("opacity", null)
+        d3.selectAll("path").style("stroke-opacity", null)
+        )
+  
+  
+
+  node.append("a")
+      .attr("href", (d) => if not d.gravatar then "#" else "contributors.html?page=biography&email=#{d.id}")
+      .append("text")
+      .attr("dx", 13)
+      .attr("dy", ".35em")
+      .text((d) => d.name)      
+      .on("mouseover", (d) ->
+        if d.tooltip
+            tooltip.transition()		
+                .duration(100)		
+                .style("opacity", .9);		
+            tooltip.html("<b>#{d.name}:</b><br/>" + d.tooltip.replace("\n", "<br/>"))
+                .style("left", (d3.event.pageX + 20) + "px")		
+                .style("top", (d3.event.pageY - 28) + "px");	
+            )
+      .on("mouseout", (d) ->
+            #d3.selectAll(".link").filter( (e) => e.source == this.id ).style("stroke-opacity", "0.375")
+            tooltip.transition()		
+                .duration(200)		
+                .style("opacity", 0);	
+      )
+
+  
+  force.on("tick", () ->
+    link.attr("d", (d) ->
+        dx = d.target.x - d.source.x
+        dy = d.target.y - d.source.y
+        dr = Math.sqrt(dx * dx + dy * dy)
+        return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y
+    )
+    node.attr("cx",(d) =>
+        d.x = Math.max(d.size, Math.min(llwidth - d.size, d.x))
+        )
+      .attr("cy", (d) =>
+        d.y = Math.max(d.size, Math.min(llheight - d.size, d.y))
+      )
+    node.attr("transform", (d) => ("translate(" + d.x + "," + d.y + ")"))
+  )
+  linked_zoom = () ->
+        isShift = not not window.event.shiftKey
+        if isShift
+          g.attr("transform", "translate("+d3.event.translate + ")scale(" + d3.event.scale + ")");
+        else
+          g.attr("transform", "scale(" + d3.event.scale + ")");
+  svg
+    .call( d3.behavior.zoom().center([llwidth / 2, llheight / 2]).scaleExtent([0.333, 4]).on("zoom", linked_zoom)  )
+
+  
+  return [
+    {
+      svg: svg,
+      parent: obj,
+      force: force,
+      config: {},
+      resize: (conf) ->
+        ns = ""
+        if conf.height
+          ns += "height: #{conf.height}px; "
+        if conf.width
+          ns += "width: #{conf.width}px; "
+        svg.attr("style", ns)
+        llwidth = parseInt(svg.style("width"))
+        llheight = parseInt(svg.style("height"))
+        force.size([llwidth, llheight]).distance(llheight/4)
+        force
+        .nodes(nodes)
+        .links(edges)
+        .start()
+    },
+    {linked: true}]
+
+
diff --git a/ui/js/coffee/charts_radar.coffee b/ui/js/coffee/charts_radar.coffee
new file mode 100644
index 0000000..e2cc01b
--- /dev/null
+++ b/ui/js/coffee/charts_radar.coffee
@@ -0,0 +1,250 @@
+charts_radarchart = (obj, data, options) ->
+		cfg = {
+			radius: 5,
+			w: 360,
+			h: 360,
+			factor: 1,
+			factorLegend: .85,
+			levels: 4,
+			maxValue: 100,
+			radians: 2 * Math.PI,
+			opacityArea: 0.5,
+			ToRight: 5,
+			TranslateX: 30,
+			TranslateY: 30,
+			ExtraWidthX: 200,
+			ExtraWidthY: 100,
+			color: genColors(16, 0.55, 0.475, true)
+		 }
+		LegendOptions = []
+		d = data
+		if data.indicators and data.data
+			d = []
+			for el, i in data.data
+				li = []
+				LegendOptions.push(el.name)
+				for indicator, j in data.indicators
+					li.push({axis: indicator, value: el.value[j]})
+				d.push(li)
+
+		cfg.maxValue = Math.max(cfg.maxValue, d3.max(d, (i) => d3.max(i.map((o) => o.value))))
+		axes = (d[0].map((i, j) => i.axis))
+		total = axes.length;
+		radius = cfg.factor*Math.min(cfg.w/2, cfg.h/2);
+		Format = (edge) =>
+			Math.floor((edge/24)+0.5) + "↑ (" + (5**(edge/24)).pretty() + ")"
+		d3.select(obj).select("svg").remove();
+		
+		rect = obj.getBoundingClientRect()
+		g = d3.select(obj)
+				.append("svg")
+				.attr("preserveAspectRatio", "xMinYMin meet")
+				.attr("viewBox", "0 0 1000 500")
+				.append("g")
+				.attr("transform", "translate(" + cfg.TranslateX + "," + cfg.TranslateY + ")");
+				;
+	
+		# Indicator lines
+		for j in [0...cfg.levels]
+			levelFactor = cfg.factor * radius * ( (j+1) / cfg.levels)
+			g.selectAll(".levels")
+			 .data(axes)
+			 .enter()
+			 .append("svg:line")
+			 .attr("x1", (d, i) => levelFactor*(1-cfg.factor*Math.sin(i*cfg.radians/total)))
+			 .attr("y1", (d, i) => levelFactor*(1-cfg.factor*Math.cos(i*cfg.radians/total)))
+			 .attr("x2", (d, i) => levelFactor*(1-cfg.factor*Math.sin((i+1)*cfg.radians/total)))
+			 .attr("y2", (d, i) => levelFactor*(1-cfg.factor*Math.cos((i+1)*cfg.radians/total)))
+			 .attr("class", "line")
+			 .style("stroke", "grey")
+			 .style("stroke-opacity", "0.75")
+			 .style("stroke-width", "0.3px")
+			 .attr("transform", "translate(" + (cfg.w/2-levelFactor) + ", " + (cfg.h/2-levelFactor) + ")")
+		
+	
+		# Levels
+		for j in [0...cfg.levels]
+			levelFactor = cfg.factor*radius*((j+1)/cfg.levels);
+			g.selectAll(".levels")
+			 .data([1])
+			 .enter()
+			 .append("svg:text")
+			 .attr("x", (d) => levelFactor*(1-cfg.factor*Math.sin(0)))
+			 .attr("y", (d) => levelFactor*(1-cfg.factor*Math.cos(0)))
+			 .attr("class", "legend")
+			 .style("font-family", "sans-serif")
+			 .style("font-size", "10px")
+			 .attr("transform", "translate(" + (cfg.w/2-levelFactor + cfg.ToRight) + ", " + (cfg.h/2-levelFactor) + ")")
+			 .attr("fill", "#737373")
+			 .text(Format((j+1)*cfg.maxValue/cfg.levels))
+		
+		
+		series = 0
+	
+		axis = g.selectAll(".axis")
+				.data(axes)
+				.enter()
+				.append("g")
+				.attr("class", "axis")
+	
+		axis.append("line")
+			.attr("x1", cfg.w/2)
+			.attr("y1", cfg.h/2)
+			.attr("x2", (d,i) => cfg.w/2*(1-cfg.factor*Math.sin(i*cfg.radians/total)))
+			.attr("y2", (d,i) => cfg.h/2*(1-cfg.factor*Math.cos(i*cfg.radians/total)))
+			.attr("class", "line")
+			.style("stroke", "grey")
+			.style("stroke-width", "1px");
+	
+		axis.append("text")
+			.attr("class", "legend")
+			.text((d) => d)
+			.style("font-family", "sans-serif")
+			.style("font-size", "11px")
+			.attr("text-anchor", "middle")
+			.attr("dy", "1.5em")
+			.attr("transform", (d,i) => "translate(0, -10)")
+			.attr("x", (d,i) => cfg.w/2*(1-cfg.factorLegend*Math.sin(i*cfg.radians/total))-60*Math.sin(i*cfg.radians/total))
+			.attr("y", (d,i) => cfg.h/2*(1-Math.cos(i*cfg.radians/total))-20*Math.cos(i*cfg.radians/total))
+	
+	 
+		d.forEach((y,x) ->
+			dataValues = []
+			g.selectAll(".nodes")
+			 .data(y, (j,i) ->
+				 #alert(j,i)
+				 dataValues.push(\
+					[\
+					cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)),\
+					cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total))\
+					]\
+					)
+			 )
+			
+			dataValues.push(dataValues[0])
+			
+			g.selectAll(".area")
+				.data([dataValues])
+				.enter()
+				.append("polygon")
+				.attr("class", "radar-chart-serie"+series)
+				.style("stroke-width", "2px")
+				.style("stroke", cfg.color[series])
+				.attr("points", (d) ->
+					str=""
+					#alert(d)
+					for pt in d
+						str=str+pt[0]+","+pt[1]+" ";
+					return str
+				 )
+				.style("fill", (j,i) => cfg.color[series])
+				.style("fill-opacity", cfg.opacityArea)
+				.on('mouseover', (d) ->
+								 z = "polygon."+d3.select(this).attr("class");
+								 g.selectAll("polygon")
+									.transition(200)
+									.style("fill-opacity", 0.1); 
+								 g.selectAll(z)
+									.transition(200)
+									.style("fill-opacity", .7);
+				 )
+				.on('mouseout', () ->
+								 g.selectAll("polygon")
+									.transition(200)
+									.style("fill-opacity", cfg.opacityArea);
+				 )
+			series++
+		)
+		
+		series = 0
+		
+		d.forEach( (y,x) ->
+			g.selectAll(".nodes")
+			.data(y).enter()
+			.append("svg:circle")
+			.attr("class", "radar-chart-serie"+series)
+			.attr('r', cfg.radius)
+			.attr("alt", (j) => Math.max(j.value, 0))
+			.attr("cx", (j,i) ->
+				dataValues = dataValues || []
+				dataValues.push([
+						cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)), 
+						cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total))
+				])
+				return cfg.w/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total))
+			)
+			.attr("cy", (j,i) ->
+				return cfg.h/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total))
+			)
+			.attr("data-id",  (j) => j.axis)
+			.style("fill", cfg.color[series]).style("fill-opacity", .9)
+			.on('mouseover', (d) ->
+						newX =  parseFloat(d3.select(this).attr('cx')) - 10
+						newY =  parseFloat(d3.select(this).attr('cy')) - 5
+						
+						tooltip
+							.attr('x', newX)
+							.attr('y', newY)
+							.text(Format(d.value))
+							.transition(200)
+							.style('opacity', 1)
+							
+						z = "polygon."+d3.select(this).attr("class");
+						g.selectAll("polygon")
+							.transition(200)
+							.style("fill-opacity", 0.1)
+						g.selectAll(z)
+							.transition(200)
+							.style("fill-opacity", .7)
+						)
+			.on('mouseout', () ->
+						tooltip
+							.transition(200)
+							.style('opacity', 0);
+						g.selectAll("polygon")
+							.transition(200)
+							.style("fill-opacity", cfg.opacityArea);
+						)
+			.append("svg:title")
+			.text((j) => Math.max(j.value, 0));
+	
+			series++
+		);
+		
+		# Tooltip
+		tooltip = g.append('text')
+					 .style('opacity', 0)
+					 .style('font-family', 'sans-serif')
+					 .style('font-size', '13px');
+		
+		legend = g.append("g")
+		.attr("class", "legend")
+		.attr("height", 100)
+		.attr("width", 200)
+		.attr('transform', 'translate(90,20)') 
+		
+		
+		legend.selectAll('rect')
+			.data(LegendOptions)
+			.enter()
+			.append("rect")
+			.attr("x", cfg.w - 65)
+			.attr("y", (d,i) => i * 20)
+			.attr("width", 10)
+			.attr("height", 10)
+			.style("fill", (d,i) => cfg.color[i])
+			
+		
+		legend.selectAll('text')
+			.data(LegendOptions)
+			.enter()
+			.append("text")
+			.attr("x", cfg.w - 52)
+			.attr("y",(d, i) => (i * 20 + 9))
+			.attr("font-size", "11px")
+			.attr("fill", "#737373")
+			.text((d) => d)
+			
+		g.resize = () -> return true
+		return [g, {}]
+	
diff --git a/ui/js/coffee/charts_wrapper.coffee b/ui/js/coffee/charts_wrapper.coffee
new file mode 100644
index 0000000..83ecd8a
--- /dev/null
+++ b/ui/js/coffee/charts_wrapper.coffee
@@ -0,0 +1,361 @@
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+chartWrapperButtons = {
+    generic: [
+        {
+            id: 'download',
+            icon: 'fa fa-download',
+            title: "Export Image",
+            onclick: (o) -> chartToSvg(o)
+        },
+        {
+            id: 'svg',
+            icon: 'fa fa-archive',
+            title: "Export as SVG",
+            onclick: (o) -> chartToSvg(o, true)
+        },{
+            id: 'dataview',
+            icon: 'fa fa-book',
+            title: "Data View",
+            onclick: (o) -> dataTable(o)
+        },
+        {
+            id: 'fullscreen',
+            icon: 'fa fa-plus-square',
+            title: "Switch to fullscreen",
+            onclick: (o) -> fScreen(o)
+        }
+    ],
+    line: [
+        {
+            icon: 'fa fa-bar-chart',
+            title: "Show as Bar Chart",
+            onclick: (o) -> switchChartType(o, o.config, 'bar')
+        },
+        {
+            icon: 'fa fa-line-chart',
+            title: "Show as Line Chart",
+            onclick: (o) -> switchChartType(o, o.config, 'line')
+        },{
+            icon: 'fa fa-area-chart',
+            title: "Show as Area Chart",
+            onclick: (o) -> switchChartType(o, o.config, 'area-spline')
+        },{
+            icon: 'fa fa-bars',
+            title: "Stack values",
+            onclick: (o) -> stackChart(o, o.config, o.chartobj)
+        },
+        {
+            icon: 'fa fa-object-ungroup',
+            title: "Show sub-chart",
+            onclick: (o) -> o.config.subchart = { show: if o.config.subchart and o.config.subchart.show then false else true}; o.chartobj = c3.generate(o.config);
+        }
+    ]
+}
+
+xxCharts = {}
+
+
+fScreen = (o) ->
+    xclass = o.main.getAttribute('class')
+    if not xclass.match('chartModal')
+        o.main.className = "chartModal chartWrapper"
+        o.main.style.minHeight = "100% !important"
+        o.buttons['fullscreen'].childNodes[0].className = 'fa fa-minus-square'
+        o.buttons['fullscreen'].title = "Restore window"
+        o.main.childNodes[2].style.minHeight = (window.innerHeight - 60) + "px"
+        if o.config.donut
+            o.config.donut.width = 120
+            switchChartType(o, o.config, 'donut')
+        if o.config.linked
+          bb = o.main.childNodes[2].getBoundingClientRect()
+          o.chartobj.resize({height: bb.height})
+        else
+          o.chartobj.resize({height: 720})
+    else
+        o.main.className = "chartWrapper"
+        o.main.childNodes[2].style.minHeight = ""
+        o.buttons['fullscreen'].title = "Switch to fullscreen"
+        o.buttons['fullscreen'].childNodes[0].className = 'fa fa-plus-square'
+        if o.config.donut
+            o.config.donut.width = 50
+            switchChartType(o, o.config, 'donut')
+        if o.config.linked
+          bb = o.main.childNodes[2].getBoundingClientRect()
+          o.chartobj.resize({height: bb.height})
+        else
+          o.chartobj.resize({height: 240})
+    return true
+
+
+copyCSS = (destination, source) ->
+   containerElements = ["svg","g"]
+   if destination.childNodes.length > 0
+        for cd in [0..destination.childNodes.length-1]
+            child = destination.childNodes[cd]
+
+            if (child.tagName in containerElements)
+                 copyCSS(child, source.childNodes[cd])
+                 continue
+            
+            style = source.childNodes[cd].currentStyle || window.getComputedStyle(source.childNodes[cd]);
+            if (style == "undefined" || style == null)
+             continue
+            for st in style
+                 child.style.setProperty(st, style.getPropertyValue(st))
+
+downloadBlob = (name, uri) ->
+    if (navigator.msSaveOrOpenBlob)
+      navigator.msSaveOrOpenBlob(uriToBlob(uri), name);
+    else
+      saveLink = document.createElement('a');
+    
+      saveLink.download = name;
+      saveLink.style.display = 'none';
+      document.body.appendChild(saveLink);
+      try
+        blob = uriToBlob(uri);
+        url = URL.createObjectURL(blob);
+        saveLink.href = url;
+        saveLink.onclick = () ->
+          requestAnimationFrame( () ->
+            URL.revokeObjectURL(url)
+          )
+        
+      catch e
+        console.warn('This browser does not support object URLs. Falling back to string URL.');
+        saveLink.href = uri;
+      
+      saveLink.click()
+      document.body.removeChild(saveLink)
+     
+    
+chartToSvg = (o, asSVG) ->
+    
+    doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'
+    svgdiv = o.chartdiv.getElementsByTagName('svg')[0]
+    svgcopy = svgdiv.cloneNode(true)
+    copyCSS(svgcopy, svgdiv)
+    rect = o.main.getBoundingClientRect()
+    svgcopy.setAttribute('xlink', 'http://www.w3.org/1999/xlink')
+    
+    source = (new XMLSerializer()).serializeToString(svgcopy)
+    
+    source = source.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink=')
+    source = source.replace(/NS\d+:href/g, 'xlink:href')
+    blob = new Blob([ doctype + source], { type: 'image/svg+xml;charset=utf-8' })
+    url = window.URL.createObjectURL(blob);
+    if asSVG
+        downloadBlob('chart.svg', url)
+    else
+        img = new HTML('img', { width: rect.width, height: rect.height, src: url})
+        img.onload = () ->
+            canvas = new HTML('canvas', { width: rect.width, height: rect.height})
+            document.getElementById('chartWrapperHiddenMaster').appendChild(canvas)
+            ctx = canvas.getContext('2d')
+            ctx.drawImage(img, 0, 0)
+            
+            canvasUrl = canvas.toDataURL("image/png")
+            downloadBlob('chart.png', canvasUrl)
+            
+        document.getElementById('chartWrapperHiddenMaster').appendChild(img)
+    
+rotateTable = (list) ->
+    newList = []
+    for x, i in list[0]
+        arr = []
+        for el in list
+            arr.push(el[i])
+        newList.push(arr)
+    return newList
+    
+dataTable = (o) ->
+    modal = new HTML('div', { class: "chartModal"})
+    modalInner = new HTML('div', { class: "chartModalContent"})
+    close = new HTML('span', {class: "chartModelClose", onclick: "this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);"}, "X")
+    modalInner.inject(close)
+    modal.inject(modalInner)
+    tbl = new HTML('table', { border: "1"})
+    myList = o.config.data.columns
+    if myList[0].length > myList.length
+        myList = rotateTable(myList)
+    for arr in myList
+        tr = new HTML('tr')
+        for el in arr
+            if (el instanceof Date)
+                el = el.toISOString().slice(0,10)
+            td = new HTML('td', {}, String(el))
+            tr.inject(td)
+        tbl.inject(tr)
+    modalInner.inject(tbl)
+    document.body.appendChild(modal)
+
+
+chartOnclick = (func, cid) ->
+    xchart = xxCharts[cid]
+    func(xchart)
+
+switchChartType = (o, config, type) ->
+    for k, v of config.data.types
+        xtype = type
+        m = type.match(/^(.+)\*$/)
+        if m
+            xtype = m[1] + v.split(/-/)[1]||v
+        config.data.types[k] = xtype
+    o.chartobj = c3.generate(config)
+    
+stackChart = (o, config, chart) ->
+    arr = []
+    for k, v of config.data.columns
+        arr.push(v[0])
+
+    if config.data.groups[0].length > 0
+        config.data.groups = [[]]
+        chart.groups([[]])
+    else
+        config.data.groups = [arr]
+        chart.groups([arr])
+
+class Chart
+    constructor: (parent, type, data, options) ->
+        cid = parseInt((Math.random()*1000000)).toString(16)
+        @cid = cid
+        
+        xxCharts[cid] = this
+        
+        # Make main div wrapper
+        @main = new HTML('div', { class: "chartWrapper"})
+        @main.xThis = this
+        @data = data
+        
+        # Make toolbar
+        @toolbar = new HTML('div', {class: "chartToolbar"})
+        @main.inject(@toolbar)
+        
+        # Title bar
+        @titlebar = new HTML('div', {class: "chartTitle"}, if (options and options.title) then options.title else "")
+        @main.inject(@titlebar)
+        
+        i = 0
+        chartWrapperColors = genColors(16, 0.2, 0.75, true)
+        
+        # Default to generic buttons
+        btns = chartWrapperButtons.generic.slice(0,999)
+        
+        # Line charts have more features than, say, donuts
+        if type == 'line'
+            for el in chartWrapperButtons.line
+                btns.push(el)
+                
+        # Make the buttons appear
+        @buttons = {}
+        for btn in btns
+            btnDiv = new HTML('div', { title: btn.title, class: "chartToolButton", style: { background: chartWrapperColors[i]} })
+            inner = new HTML('i', { class: btn.icon })
+            if btn.id
+                @buttons[btn.id] = btnDiv
+            btnDiv.inject(inner)
+            @toolbar.inject(btnDiv)
+            if btn.onclick
+                do (btn, btnDiv) ->
+                    btnDiv.addEventListener('click', () -> chartOnclick(btn.onclick, cid))
+                
+            i++
+        
+        # Make inner chart
+        @chartdiv = new HTML('div', { class: "chartChart"})
+        @main.inject(@chartdiv)
+        
+        if parent
+            parent.appendChild(@main)
+        else
+            hObj = document.getElementById('chartWrapperHiddenMaster')
+            if not hObj
+                hObj = new HTML('div', { id: 'chartWrapperHiddenMaster', style: { visibility: "hidden"}})
+                document.body.appendChild(hObj)
+            hObj.appendChild(@main)
+        
+        if type == 'line'
+            [@chartobj, @config] = charts_linechart(@chartdiv, data, options)
+        if type == 'donut'
+            [@chartobj, @config] = charts_donutchart(@chartdiv, data, 15)
+         if type == 'gauge'
+            [@chartobj, @config] = charts_gaugechart(@chartdiv, data)
+        if type == 'radar'
+            [@chartobj, @config] = charts_radarchart(@chartdiv, data)
+         if type == 'relationship'
+            [@chartobj, @config] = charts_linked(@chartdiv, data.nodes, data.links, options)
+        
+        # If this data source has distinguishable categories
+        # show a checkbox to toggle it.
+        if data.distinguishable
+          id = Math.floor(Math.random() * 987654321).toString(16)
+          chk = document.createElement('input')
+          chk.setAttribute("type", "checkbox")
+          chk.setAttribute("id", id)
+          chk.style.marginLeft = '10px'
+          if globArgs.distinguish and globArgs.distinguish == 'true'
+                  chk.checked = true
+          chk.addEventListener("change", () ->
+                  distinguish = null
+                  if this.checked
+                          distinguish = 'true'
+                          globArgs['distinguish'] = 'true'
+                  
+                  updateWidgets('line', null, { distinguish: distinguish })
+                  updateWidgets('gauge', null, { distinguish: distinguish })
+                  )
+          @main.inject(mk('br'))
+          @main.inject(chk)
+          label = document.createElement('label')
+          label.setAttribute("for", id)
+          label.setAttribute("title", "Check this box to distinguish between sub-categories in this chart")
+          chk.setAttribute("title", "Check this box to distinguish between sub-categories in this chart")
+          label.style.paddingLeft = '5px'
+          label.appendChild(document.createTextNode('Toggle category breakdown'))
+          @main.inject(label)
+        
+        # If this data source has relative weightings
+        # show a checkbox to toggle it.
+        if data.relativeMode
+          id = Math.floor(Math.random() * 987654321).toString(16)
+          chk = document.createElement('input')
+          chk.setAttribute("type", "checkbox")
+          chk.setAttribute("id", id)
+          chk.style.marginLeft = '10px'
+          if globArgs.relative and globArgs.relative == 'true'
+                  chk.checked = true
+          chk.addEventListener("change", () ->
+                  relative = null
+                  if this.checked
+                          relative = 'true'
+                          globArgs['relative'] = 'true'
+                  
+                  updateWidgets('line', null, { relative: relative })
+                  updateWidgets('gauge', null, { relative: relative })
+                  )
+          @main.inject(mk('br'))
+          @main.inject(chk)
+          label = document.createElement('label')
+          label.setAttribute("for", id)
+          label.setAttribute("title", "Check this box to use relative weighting")
+          chk.setAttribute("title", "Check this box to use relative weighting")
+          label.style.paddingLeft = '5px'
+          label.appendChild(document.createTextNode('Toggle relative/comparative mode'))
+          @main.inject(label)
+          
+        return @main
+    
\ No newline at end of file
diff --git a/ui/js/coffee/colors.coffee b/ui/js/coffee/colors.coffee
new file mode 100644
index 0000000..11f9c48
--- /dev/null
+++ b/ui/js/coffee/colors.coffee
@@ -0,0 +1,114 @@
+
+hsl2rgb = (h, s, l) ->
+    
+    h = h % 1;
+    s = 1 if s > 1
+    l = 1 if l > 1
+    if l <= 0.5
+        v = (l * (1 + s))
+    else
+        v = (l + s - l * s);
+    if v == 0
+        return {
+            r: 0,
+            g: 0,
+            b: 0
+        }
+
+    min = 2 * l - v;
+    sv = (v - min) / v;
+    sh = (6 * h) % 6;
+    switcher = Math.floor(sh);
+    fract = sh - switcher;
+    vsf = v * sv * fract;
+
+    switch switcher
+        when 0
+            return {
+                r: v,
+                g: min + vsf,
+                b: min
+            };
+        when 1
+            return {
+                r: v - vsf,
+                g: v,
+                b: min
+            };
+        when 2
+            return {
+                r: min,
+                g: v,
+                b: min + vsf
+            };
+        when 3
+            return {
+                r: min,
+                g: v - vsf,
+                b: v
+            };
+        when 4
+            return {
+                r: min + vsf,
+                g: min,
+                b: v
+            };
+        when 5
+            return {
+                r: v,
+                g: min,
+                b: v - vsf
+            };
+
+    return {
+        r: 0,
+        g: 0,
+        b: 0
+    };
+
+
+genColors = (numColors, saturation, lightness, hex) ->
+    cls = []
+    baseHue = 1.02;
+    if numColors <= 2
+        baseHue = 0.65
+    for i in [1..numColors]
+        c = hsl2rgb(baseHue, saturation, lightness)
+        while (c.r > 0.8 and c.g > 0.8 and c.b > 0.8)
+            baseHue -= 0.37
+            if baseHue < 0
+                baseHue += 1
+            c = hsl2rgb(baseHue, saturation, lightness)
+        if (hex) 
+            #h = ( Math.round(c.r*255*255*255) + Math.round(c.g * 255*255) + Math.round(c.b*255) ).toString(16)
+            h = "#" + ("00" + (~ ~(c.r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(c.g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(c.b * 255)).toString(16)).slice(-2);
+            cls.push(h);
+        else
+                cls.push({
+                    r: parseInt(c.r * 255),
+                    g: parseInt(c.g * 255),
+                    b: parseInt(c.b * 255)
+                })
+        baseHue -= 0.37
+        if (baseHue < 0) 
+            baseHue += 1
+    
+    return cls
+
+
+quickColors = (num) ->
+    colors = []
+    ph = 0
+    for x in [1..num]
+        r = Math.random()
+        g = Math.random()
+        b = Math.random()
+        
+        pastel = 0.7
+        r = ((pastel+r)/2)
+        g = ((pastel+g)/2)
+        b = ((pastel+b)/2)
+        
+        c = "#" + ("00" + (~ ~(r * 205)).toString(16)).slice(-2) + ("00" + (~ ~(g * 205)).toString(16)).slice(-2) + ("00" + (~ ~(b * 205)).toString(16)).slice(-2);
+        colors.push(c)
+    return colors
diff --git a/ui/js/coffee/combine.sh b/ui/js/coffee/combine.sh
new file mode 100644
index 0000000..ddb60aa
--- /dev/null
+++ b/ui/js/coffee/combine.sh
@@ -0,0 +1,3 @@
+#!/bin/bash
+coffee -b --join ../warble.v1.js -c *.coffee
+
diff --git a/ui/js/coffee/datepicker.coffee b/ui/js/coffee/datepicker.coffee
new file mode 100644
index 0000000..5250679
--- /dev/null
+++ b/ui/js/coffee/datepicker.coffee
@@ -0,0 +1,127 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+datepickers = {}
+
+updateTimeseriesWidgets = (range) ->
+        if range
+            from = range[0]
+            to = range[1]
+            globArgs.from = from
+            globArgs.to = to
+            updateWidgets('line', null, { to: to, from: from})
+            updateWidgets('top5', null, { to: to, from: from})
+            updateWidgets('factors', null, { to: to, from: from})
+            updateWidgets('trends', null, { to: to, from: from})
+            updateWidgets('donut', null, { to: to, from: from})
+            updateWidgets('gauge', null, { to: to, from: from})
+            updateWidgets('radar', null, { to: to, from: from})
+            updateWidgets('relationship', null, { to: to, from: from})
+            updateWidgets('treemap', null, { to: to, from: from})
+            updateWidgets('report', null, { to: to, from: from})
+            updateWidgets('mvp', null, { to: to, from: from})
+            updateWidgets('comstat', null, { to: to, from: from})
+            updateWidgets('worldmap', null, { to: to, from: from})
+            updateWidgets('jsondump', null, { to: to, from: from})
+                
+datepicker = (widget) ->
+        div = document.createElement('div')
+        div.setAttribute("class", "well")
+        form = document.createElement('form')
+        div.appendChild(form)
+        fieldset = document.createElement('fieldset')
+        form.appendChild(fieldset)
+        cgroup = document.createElement('div')
+        cgroup.setAttribute("class", "control-group")
+        fieldset.appendChild(cgroup)
+        controls = document.createElement('div')
+        controls.setAttribute("class", "controls")
+        cgroup.appendChild(controls)
+        group = document.createElement('div')
+        group.setAttribute("class", "input-prepend input-group")
+        controls.appendChild(group)
+        span = document.createElement('span')
+        span.setAttribute("class", "add-on input-group-addon")
+        group.appendChild(span)
+        i = document.createElement('i')
+        i.setAttribute("class", "glyphicon glyphicon-calendar fa fa-calendar")
+        span.appendChild(i)
+        input = document.createElement('input')
+        input.setAttribute("type", "text")
+        input.style.width = "240px"
+        input.setAttribute("name", "date")
+        input.setAttribute("class", "form-control")
+        now = (if globArgs.from then moment(parseInt(globArgs.from)*1000) else moment().subtract(6, 'months')).format('YYYY-MM-DD') + " to " + (if globArgs.from then moment(parseInt(globArgs.to)*1000) else moment()).format('YYYY-MM-DD')
+        input.setAttribute("value", now)
+        id = Math.floor(Math.random()*987654321).toString(16)
+        input.setAttribute("id", id)
+        group.appendChild(input)
+        
+        widget.inject(div)
+        
+        
+        datePickerOptions = {
+          startDate: if globArgs.from then moment(new Date(globArgs.from*1000)) else moment().subtract(6, 'months'),
+          endDate: if globArgs.to then moment(new Date(globArgs.to*1000)) else moment(),
+          minDate: '1970-01-01',
+          maxDate: '2020-01-01',
+          dateLimit: {
+            days: 365
+          },
+          showDropdowns: true,
+          showWeekNumbers: true,
+          timePicker: false,
+          timePickerIncrement: 1,
+          timePicker12Hour: true,
+          ranges: {
+            'Today': [moment(), moment()],
+            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+            'Past Week': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
+            'Past 30 Days': [moment().subtract(30, 'days'), moment().subtract(1, 'days')],
+            'This Month': [moment().startOf('month'), moment().endOf('month')],
+            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
+            'Last 3 Months': [moment().subtract(3, 'month'), moment()],
+            'Last 6 Months': [moment().subtract(6, 'month'), moment()],
+            'Last 12 Months': [moment().subtract(1, 'year'), moment()],
+            'Last 2 Years': [moment().subtract(2, 'year'), moment()],
+            'Last 5 Years': [moment().subtract(5, 'year'), moment()],
+            'Last 10 Years': [moment().subtract(10, 'year'), moment()],
+            'Last...Snoot Years': [moment(42300, 'X'), moment()]
+          },
+          opens: 'left',
+          buttonClasses: ['btn btn-default'],
+          applyClass: 'btn-small btn-primary',
+          cancelClass: 'btn-small',
+          format: 'YYYY-MM-DD',
+          separator: ' to ',
+          locale: {
+            applyLabel: 'Submit',
+            cancelLabel: 'Clear',
+            fromLabel: 'From',
+            toLabel: 'To',
+            customRangeLabel: 'Custom',
+            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+            firstDay: 1
+          }
+        };
+        
+        $('#' + id).daterangepicker(datePickerOptions, (start, end, label) ->
+                console.log(start._d.getTime()/1000)
+                updateTimeseriesWidgets([Math.floor(start._d.getTime()/1000), Math.floor(end._d.getTime()/1000)])
+        );
+
diff --git a/ui/js/coffee/error_modal.coffee b/ui/js/coffee/error_modal.coffee
new file mode 100644
index 0000000..9528217
--- /dev/null
+++ b/ui/js/coffee/error_modal.coffee
@@ -0,0 +1,21 @@
+
+badModal = (str) ->
+    if typeof(str) == 'object'
+        str = str.message
+    modalBox = new HTML('div', { class: "errorModal"})
+    document.body.appendChild(modalBox)
+    modalInner = new HTML('div', { class: "errorModalInner" }, txt(str))
+    modalBox.appendChild(modalInner)
+    btndiv = new HTML('div', {style: {textAlign: "center", marginTop: "10px"}}, " ")
+    modalInner.inject(btndiv)
+    btn = new HTML('button', {class: "btn btn-lg btn-success", onclick:"document.body.removeChild(this.parentNode.parentNode.parentNode);"}, "Gotcha!")
+    btndiv.inject(btn)
+    
+    window.setTimeout(() ->
+            modalInner.style.visibility = "visible"
+            modalInner.style.opacity = 1
+        , 10
+        )
+
+snap = badModal
+
diff --git a/ui/js/coffee/explorer.coffee b/ui/js/coffee/explorer.coffee
new file mode 100644
index 0000000..e96ec2c
--- /dev/null
+++ b/ui/js/coffee/explorer.coffee
@@ -0,0 +1,779 @@
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+explorer = (json, state) ->
+        
+        org = json.organisation
+        h = document.createElement('h2')
+        if json.tag
+            org.name += " (Filter: " + json.tag + ")"
+        h.appendChild(document.createTextNode("Exploring " + org.name + ":"))
+        state.widget.inject(h, true)
+        list = document.createElement('select')
+        state.widget.inject(list)
+        opt = document.createElement('option')
+        opt.value = ""
+        slen = 0
+        for item in json.sources
+            if item.type in ['git', 'svn', 'gerrit', 'github'] and item.noclone != true
+                slen++
+        opt.text = "All " + slen + " repositories"
+        list.appendChild(opt)
+        json.sources.sort((a,b) ->
+            return if (a.sourceURL == b.sourceURL) then 0 else (if a.sourceURL > b.sourceURL then 1 else -1)
+            )
+        for item in json.sources
+            if item.type in ['git', 'svn', 'gerrit', 'github'] and item.noclone != true
+                opt = document.createElement('option')
+                opt.value = item.sourceID
+                ezURL = null
+                m = item.sourceURL.match(/^([a-z]+:\/\/.+?)[\/?]([^\/?]+)$/i)
+                if m and m.length == 3
+                    ezURL = "#{m[2]} - (#{m[1]})"
+                opt.text = if ezURL then ezURL else item.sourceURL
+                if globArgs.source and globArgs.source == item.sourceID
+                    opt.selected = 'selected'
+                list.appendChild(opt)
+        
+        ID = Math.floor(Math.random() * 987654321).toString(16)
+        list.setAttribute('id', ID)
+        $("#"+ID).chosen().change(() ->
+                source = this.value
+                
+                if source == ""
+                        source = null
+                globArgs.source = source
+                updateWidgets('donut', null, { source: source })
+                updateWidgets('gauge', null, { source: source })
+                updateWidgets('line', null, { source: source })
+                updateWidgets('contacts', null, { source: source })
+                updateWidgets('top5', null, { source: source })
+                updateWidgets('factors', null, { source: source })
+                updateWidgets('trends', null, { source: source })
+                updateWidgets('mvp', null, { source: source })
+                updateWidgets('comstat', null, { source: source })
+                updateWidgets('jsondump', null, { source: source })
+              )
+        
+        
+        
+        # Unique commits label
+        id = Math.floor(Math.random() * 987654321).toString(16)
+        chk = document.createElement('input')
+        chk.setAttribute("type", "checkbox")
+        chk.setAttribute("id", id)
+        chk.style.marginLeft = '10px'
+        if globArgs.author and globArgs.author == 'true'
+                chk.checked = true
+        chk.addEventListener("change", () ->
+                unique = null
+                if this.checked
+                        author = 'true'
+                        globArgs['author'] = 'true'
+                
+                updateWidgets('donut', null, { author: author })
+                updateWidgets('gauge', null, { author: author })
+                updateWidgets('line', null, { author: author })
+                updateWidgets('contacts', null, { author: author })
+                updateWidgets('top5', null, { author: author })
+                updateWidgets('factors', null, { author: author })
+                updateWidgets('trends', null, { author: author })
+                updateWidgets('relationship', null, {author: author})
+                updateWidgets('mvp', null, {author: author})
+                updateWidgets('comstat', null, { author: author })
+                updateWidgets('jsondump', null, { author: author })
+                )
+        state.widget.inject(chk)
+        label = document.createElement('label')
+        label.setAttribute("for", id)
+        label.setAttribute("title", "Check this box to authorships instead of committerships")
+        chk.setAttribute("title", "Check this box to authorships instead of committerships")
+        label.style.paddingLeft = '5px'
+        label.appendChild(document.createTextNode('Show authors'))
+        state.widget.inject(label)
+
+
+sourceexplorer = (json, state) ->
+        
+        org = json.organisation
+        h = document.createElement('h4')
+        if json.tag
+            org.name += " (Filter: " + json.tag + ")"
+        h.appendChild(document.createTextNode("Exploring " + org.name + ":"))
+        state.widget.inject(h, true)
+        div = new HTML('div', {class: "form-group"})
+        list = new HTML('select', { class: "form-control"})
+        div.inject(list)
+        state.widget.inject(div)
+        opt = document.createElement('option')
+        opt.value = ""
+        slen = 0
+        for item in json.sources
+                slen++
+        opt.text = "All " + slen + " sources"
+        list.appendChild(opt)
+        json.sources.sort((a,b) ->
+            return if (a.sourceURL == b.sourceURL) then 0 else (if a.sourceURL > b.sourceURL then 1 else -1)
+            )
+        for item in json.sources
+            if true
+                opt = document.createElement('option')
+                opt.value = item.sourceID
+                ezURL = null
+                m = item.sourceURL.match(/^([a-z]+:\/\/.+?)[\/?]([^\/?]+)$/i)
+                if m and m.length == 3
+                    ezURL = "#{m[2]} - (#{m[1]})"
+                opt.text = if ezURL then ezURL else item.sourceURL
+                if globArgs.source and globArgs.source == item.sourceID
+                    opt.selected = 'selected'
+                list.appendChild(opt)
+                
+        ID = Math.floor(Math.random() * 987654321).toString(16)
+        list.setAttribute('id', ID)
+        $("#"+ID).chosen().change(() ->
+                source = this.value
+                
+                if source == ""
+                        source = null
+                globArgs.source = source
+                updateWidgets('donut', null, { source: source })
+                updateWidgets('gauge', null, { source: source })
+                updateWidgets('line', null, { source: source })
+                updateWidgets('contacts', null, { source: source })
+                updateWidgets('top5', null, { source: source })
+                updateWidgets('factors', null, { source: source })
+                updateWidgets('trends', null, { source: source })
+                updateWidgets('mvp', null, { source: source })
+                updateWidgets('comstat', null, { source: source })
+                updateWidgets('jsondump', null, { author: author })
+        )
+
+
+
+mailexplorer = (json, state) ->
+        
+        org = json.organisation
+        h = document.createElement('h4')
+        if json.tag
+            org.name += " (Filter: " + json.tag + ")"
+        h.appendChild(document.createTextNode("Exploring " + org.name + ":"))
+        
+        state.widget.inject(h, true)
+        list = document.createElement('select')
+        state.widget.inject(list)
+        opt = document.createElement('option')
+        opt.value = ""
+        slen = 0
+        for item in json.sources
+            if item.type in ['mail', 'ponymail', 'pipermail', 'hyperkitty']
+                slen++
+        opt.text = "All " + slen + " mailing lists"
+        list.appendChild(opt)
+        json.sources.sort((a,b) ->
+            return if (a.sourceURL == b.sourceURL) then 0 else (if a.sourceURL > b.sourceURL then 1 else -1)
+            )
+        for item in json.sources
+            if item.type in ['mail', 'ponymail', 'pipermail', 'hyperkitty']
+                opt = document.createElement('option')
+                opt.value = item.sourceID
+                ezURL = null
+                m = item.sourceURL.match(/^([a-z]+:\/\/.+?)[\/?]([^\/?]+)$/i)
+                if m and m.length == 3
+                    ezURL = "#{m[2]} - (#{m[1]})"
+                opt.text = if ezURL then ezURL else item.sourceURL
+                if globArgs.source and globArgs.source == item.sourceID
+                    opt.selected = 'selected'
+                list.appendChild(opt)
+        
+        ID = Math.floor(Math.random() * 987654321).toString(16)
+        list.setAttribute('id', ID)
+        $("#"+ID).chosen().change(() ->
+                source = this.value
+                
+                if source == ""
+                        source = null
+                globArgs.source = source
+                updateWidgets('donut', null, { source: source })
+                updateWidgets('gauge', null, { source: source })
+                updateWidgets('line', null, { source: source })
+                updateWidgets('contacts', null, { source: source })
+                updateWidgets('top5', null, { source: source })
+                updateWidgets('factors', null, { source: source })
+                updateWidgets('trends', null, { source: source })
+                updateWidgets('relationship', null, { source: source })
+                
+        )
+        
+logexplorer = (json, state) ->
+        
+        org = json.organisation
+        h = document.createElement('h4')
+        if json.tag
+            org.name += " (Filter: " + json.tag + ")"
+        h.appendChild(document.createTextNode("Exploring " + org.name + ":"))
+        
+        state.widget.inject(h, true)
+        list = document.createElement('select')
+        state.widget.inject(list)
+        opt = document.createElement('option')
+        opt.value = ""
+        slen = 0
+        for item in json.sources
+            if item.type == 'stats'
+                slen++
+        opt.text = "All " + slen + " log files"
+        list.appendChild(opt)
+        json.sources.sort((a,b) ->
+            return if (a.sourceURL == b.sourceURL) then 0 else (if a.sourceURL > b.sourceURL then 1 else -1)
+            )
+        for item in json.sources
+            if item.type == 'stats'
+                opt = document.createElement('option')
+                opt.value = item.sourceID
+                ezURL = null
+                m = item.sourceURL.match(/^([a-z]+:\/\/.+?)[\/?]([^\/?]+)$/i)
+                if m and m.length == 3
+                    ezURL = "#{m[2]} - (#{m[1]})"
+                opt.text = if ezURL then ezURL else item.sourceURL
+                if globArgs.source and globArgs.source == item.sourceID
+                    opt.selected = 'selected'
+                list.appendChild(opt)
+        
+        ID = Math.floor(Math.random() * 987654321).toString(16)
+        list.setAttribute('id', ID)
+        $("#"+ID).chosen().change(() ->
+                source = this.value
+                
+                if source == ""
+                        source = null
+                globArgs.source = source
+                updateWidgets('donut', null, { source: source })
+                updateWidgets('gauge', null, { source: source })
+                updateWidgets('line', null, { source: source })
+                updateWidgets('worldmap', null, { source: source })
+                updateWidgets('top5', null, { source: source })
+                updateWidgets('factors', null, { source: source })
+                updateWidgets('trends', null, { source: source })
+                
+        )
+        
+issueexplorer = (json, state) ->
+        
+        org = json.organisation
+        if json.tag
+            org.name += " (Filter: " + json.tag + ")"
+        h = document.createElement('h4')
+        h.appendChild(document.createTextNode("Exploring " + org.name + ":"))
+        state.widget.inject(h, true)
+        list = document.createElement('select')
+        state.widget.inject(list)
+        opt = document.createElement('option')
+        opt.value = ""
+        slen = 0
+        for item in json.sources
+            if item.type in ['jira', 'gerrit', 'github', 'bugzilla']
+                slen++
+        opt.text = "All " + slen + " issue tracker(s)"
+        list.appendChild(opt)
+        json.sources.sort((a,b) ->
+            return if (a.sourceURL == b.sourceURL) then 0 else (if a.sourceURL > b.sourceURL then 1 else -1)
+            )
+        for item in json.sources
+            if item.type in ['jira', 'gerrit', 'github', 'bugzilla']
+                opt = document.createElement('option')
+                opt.value = item.sourceID
+                ezURL = null
+                n = item.sourceURL.match(/^([a-z]+:\/\/.+?)\/([-.A-Z0-9]+)$/i)                
+                m = item.sourceURL.match(/^([a-z]+:\/\/.+?)\s(.+)$/i)
+                if n and n.length == 3
+                    ezURL = "#{n[2]} - (#{n[1]})"
+                else if m and m.length == 3
+                    ezURL = "#{m[2]} - (#{m[1]})"
+                opt.text = if ezURL then ezURL else item.sourceURL
+                if globArgs.source and globArgs.source == item.sourceID
+                    opt.selected = 'selected'
+                list.appendChild(opt)
+        
+        ID = Math.floor(Math.random() * 987654321).toString(16)
+        list.setAttribute('id', ID)
+        $("#"+ID).chosen().change(() ->
+                source = this.value
+                
+                if source == ""
+                        source = null
+                globArgs.source = source
+                updateWidgets('donut', null, { source: source })
+                updateWidgets('gauge', null, { source: source })
+                updateWidgets('line', null, { source: source })
+                updateWidgets('contacts', null, { source: source })
+                updateWidgets('top5', null, { source: source })
+                updateWidgets('factors', null, { source: source })
+                updateWidgets('trends', null, { source: source })
+                
+        )
+        
+
+
+forumexplorer = (json, state) ->
+        
+        org = json.organisation
+        if json.tag
+            org.name += " (Filter: " + json.tag + ")"
+        h = document.createElement('h4')
+        h.appendChild(document.createTextNode("Exploring " + org.name + ":"))
+        state.widget.inject(h, true)
+        list = document.createElement('select')
+        state.widget.inject(list)
+        opt = document.createElement('option')
+        opt.value = ""
+        slen = 0
+        for item in json.sources
+            if item.type in ['forum', 'discourse', 'askbot']
+                slen++
+        opt.text = "All " + slen + " forum(s)"
+        list.appendChild(opt)
+        json.sources.sort((a,b) ->
+            return if (a.sourceURL == b.sourceURL) then 0 else (if a.sourceURL > b.sourceURL then 1 else -1)
+            )
+        for item in json.sources
+            if item.type in ['forum', 'discourse', 'askbot']
+                opt = document.createElement('option')
+                opt.value = item.sourceID
+                ezURL = null
+                n = item.sourceURL.match(/^([a-z]+:\/\/.+?)\/([-.A-Z0-9]+)$/i)                
+                m = item.sourceURL.match(/^([a-z]+:\/\/.+?)\s(.+)$/i)
+                if n and n.length == 3
+                    ezURL = "#{n[2]} - (#{n[1]})"
+                else if m and m.length == 3
+                    ezURL = "#{m[2]} - (#{m[1]})"
+                opt.text = if ezURL then ezURL else item.sourceURL
+                if globArgs.source and globArgs.source == item.sourceID
+                    opt.selected = 'selected'
+                list.appendChild(opt)
+        
+        ID = Math.floor(Math.random() * 987654321).toString(16)
+        list.setAttribute('id', ID)
+        $("#"+ID).chosen().change(() ->
+                source = this.value
+                
+                if source == ""
+                        source = null
... 15148 lines suppressed ...


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@warble.apache.org
For additional commands, e-mail: commits-help@warble.apache.org