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:05:55 UTC

[incubator-warble-server] branch master updated (6b6bed2 -> d0b64a7)

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

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


    from 6b6bed2  add a super simple cli tool for manual ops for now
     new 313d055  can't change immutable row factories, so use a variable
     new 133db5d  fix logout
     new 230a763  add an 'unverify' command
     new a73c520  one more copypasto
     new d0b64a7  Initial stab at a UI, borrowing heavily from Kibble

The 5 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 api/pages/session.py                               |    6 +-
 api/plugins/session.py                             |    4 +-
 api/yaml/widgets.yaml                              |   44 +
 tools/cli.py                                       |   17 +-
 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
 .../images/warble-logo-navbar.png                  |  Bin 267056 -> 251955 bytes
 {docs/source/_static => ui}/images/warble-logo.png |  Bin
 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
 75 files changed, 24648 insertions(+), 6 deletions(-)
 create mode 100644 api/yaml/widgets.yaml
 create mode 100644 ui/clients.html
 create mode 100644 ui/css/c3.css
 create mode 100644 ui/css/chosen-sprite@2x.png
 create mode 100644 ui/css/chosen.css
 create mode 100644 ui/css/daterangepicker.css
 create mode 100644 ui/css/main.css
 create mode 100644 ui/css/theme.css
 create mode 100644 ui/css/warble.min.css
 create mode 100644 ui/dashboard.html
 create mode 100644 ui/images/background-bright.png
 create mode 100644 ui/images/background.png
 create mode 100644 ui/images/diagram-unit-agent.png
 create mode 100644 ui/images/diagram-unit-node.png
 create mode 100644 ui/images/favicon.ico
 copy docs/source/_static/images/warble-logo.png => ui/images/warble-logo-navbar.png (72%)
 copy {docs/source/_static => ui}/images/warble-logo.png (100%)
 create mode 100644 ui/index.html
 create mode 100644 ui/js/app.js
 create mode 100644 ui/js/c3.min.js
 create mode 100644 ui/js/coffee/account.coffee
 create mode 100644 ui/js/coffee/charts_donut.coffee
 create mode 100644 ui/js/coffee/charts_gauge.coffee
 create mode 100644 ui/js/coffee/charts_linechart.coffee
 create mode 100644 ui/js/coffee/charts_linked_map.coffee
 create mode 100644 ui/js/coffee/charts_radar.coffee
 create mode 100644 ui/js/coffee/charts_wrapper.coffee
 create mode 100644 ui/js/coffee/colors.coffee
 create mode 100644 ui/js/coffee/combine.sh
 create mode 100644 ui/js/coffee/datepicker.coffee
 create mode 100644 ui/js/coffee/error_modal.coffee
 create mode 100644 ui/js/coffee/explorer.coffee
 create mode 100644 ui/js/coffee/misc.coffee
 create mode 100644 ui/js/coffee/pageloader.coffee
 create mode 100644 ui/js/coffee/warble_account.coffee
 create mode 100644 ui/js/coffee/warble_clientlist.coffee
 create mode 100644 ui/js/coffee/widget.coffee
 create mode 100644 ui/js/coffee/widget_admin.coffee
 create mode 100644 ui/js/coffee/widget_affiliations.coffee
 create mode 100644 ui/js/coffee/widget_bio.coffee
 create mode 100644 ui/js/coffee/widget_comstat.coffee
 create mode 100644 ui/js/coffee/widget_donut.coffee
 create mode 100644 ui/js/coffee/widget_factors.coffee
 create mode 100644 ui/js/coffee/widget_jsondump.coffee
 create mode 100644 ui/js/coffee/widget_linechart.coffee
 create mode 100644 ui/js/coffee/widget_map.coffee
 create mode 100644 ui/js/coffee/widget_messages.coffee
 create mode 100644 ui/js/coffee/widget_mvp.coffee
 create mode 100644 ui/js/coffee/widget_paragraph.coffee
 create mode 100644 ui/js/coffee/widget_preferences.coffee
 create mode 100644 ui/js/coffee/widget_publisher.coffee
 create mode 100644 ui/js/coffee/widget_radar.coffee
 create mode 100644 ui/js/coffee/widget_relation.coffee
 create mode 100644 ui/js/coffee/widget_report.coffee
 create mode 100644 ui/js/coffee/widget_top5.coffee
 create mode 100644 ui/js/coffee/widget_treemap.coffee
 create mode 100644 ui/js/coffee/widget_trend.coffee
 create mode 100644 ui/js/coffee/widget_views.coffee
 create mode 100644 ui/js/core.js
 create mode 100644 ui/js/d3.min.js
 create mode 100755 ui/js/datepicker/daterangepicker.js
 create mode 100755 ui/js/moment/moment.min.js
 create mode 100644 ui/js/warble.v1.js
 create mode 100644 ui/login.html
 create mode 100644 ui/vendors/font-awesome/css/font-awesome.css
 create mode 100644 ui/vendors/font-awesome/css/font-awesome.min.css
 create mode 100644 ui/vendors/font-awesome/fonts/FontAwesome.otf
 create mode 100644 ui/vendors/font-awesome/fonts/fontawesome-webfont.eot
 create mode 100644 ui/vendors/font-awesome/fonts/fontawesome-webfont.svg
 create mode 100644 ui/vendors/font-awesome/fonts/fontawesome-webfont.ttf
 create mode 100644 ui/vendors/font-awesome/fonts/fontawesome-webfont.woff
 create mode 100644 ui/vendors/font-awesome/fonts/fontawesome-webfont.woff2


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


[incubator-warble-server] 02/05: fix logout

Posted by hu...@apache.org.
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 133db5d0dff1229b3ea656e1c0a737dae5b44f07
Author: Daniel Gruno <hu...@apache.org>
AuthorDate: Tue Jun 26 16:59:46 2018 -0500

    fix logout
---
 api/pages/session.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/api/pages/session.py b/api/pages/session.py
index 87f8938..d3f4bde 100644
--- a/api/pages/session.py
+++ b/api/pages/session.py
@@ -159,13 +159,13 @@ def run(API, environ, indata, session):
     
     # Delete a session (log out)
     if method == "DELETE":
-        if self.DB.dbtype == 'sqlite':
+        if session.DB.dbtype == 'sqlite':
             c = self.DB.sqlite.open('sessions.db')
             cur = c.cursor()
             cur.execute("DELETE FROM `sessions` WHERE `cookie` = ? LIMIT 1", (session.cookie,))
             c.commit()
             c.close()
-        elif self.DB.dbtype == 'elasticsearch':
+        elif session.DB.dbtype == 'elasticsearch':
             session.DB.ES.delete(index=session.DB.dbname, doc_type='uisession', id = session.cookie)
         session.newCookie()
         yield json.dumps({"message": "Logged out, bye bye!"})


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


[incubator-warble-server] 04/05: one more copypasto

Posted by hu...@apache.org.
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 a73c520bed572e9e480d54df47bbc85a6883c008
Author: Daniel Gruno <hu...@apache.org>
AuthorDate: Tue Jun 26 17:00:41 2018 -0500

    one more copypasto
---
 api/pages/session.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/pages/session.py b/api/pages/session.py
index d3f4bde..c2489a4 100644
--- a/api/pages/session.py
+++ b/api/pages/session.py
@@ -160,7 +160,7 @@ def run(API, environ, indata, session):
     # Delete a session (log out)
     if method == "DELETE":
         if session.DB.dbtype == 'sqlite':
-            c = self.DB.sqlite.open('sessions.db')
+            c = session.DB.sqlite.open('sessions.db')
             cur = c.cursor()
             cur.execute("DELETE FROM `sessions` WHERE `cookie` = ? LIMIT 1", (session.cookie,))
             c.commit()


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


[incubator-warble-server] 03/05: add an 'unverify' command

Posted by hu...@apache.org.
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 230a7630cf54baa1a908eba6951f0b0e084498ea
Author: Daniel Gruno <hu...@apache.org>
AuthorDate: Tue Jun 26 16:59:59 2018 -0500

    add an 'unverify' command
---
 tools/cli.py | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/tools/cli.py b/tools/cli.py
index 1f29c7e..c91245d 100644
--- a/tools/cli.py
+++ b/tools/cli.py
@@ -68,7 +68,22 @@ if __name__ == "__main__":
                 for node in nodes:
                     print("  %3u    %-28s     %s            %s          %s" %  (node['id'], node['hostname'][:27], node['enabled'] and '✓' or 'x', node['verified'] and '✓' or 'x', node['fingerprint'][:28]))
                 
-            if 'verify' in cmd:
+            if 'unverify' in cmd:
+                nodeid = int(cmd.replace('unverify ', ''))
+                print("Unverifying node no. %u" % nodeid)
+                rv = requests.post('http://localhost:8000/api/node/modify',  headers = {
+                    'Cookie': cookie
+                    },
+                    json = {
+                        'id': nodeid,
+                        'verified': False
+                    }
+                    )
+                if rv.status_code == 200:
+                    print("Node successfully unverified!")
+                else:
+                    print(rv.text)
+            elif 'verify' in cmd:
                 nodeid = int(cmd.replace('verify ', ''))
                 print("Verifying node no. %u" % nodeid)
                 rv = requests.post('http://localhost:8000/api/node/modify',  headers = {


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


[incubator-warble-server] 01/05: can't change immutable row factories, so use a variable

Posted by hu...@apache.org.
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 313d055c8ab380f1d6da14fc62316c43cdd03fb0
Author: Daniel Gruno <hu...@apache.org>
AuthorDate: Tue Jun 26 16:12:50 2018 -0500

    can't change immutable row factories, so use a variable
---
 api/plugins/session.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/api/plugins/session.py b/api/plugins/session.py
index d302b45..1603b10 100644
--- a/api/plugins/session.py
+++ b/api/plugins/session.py
@@ -109,8 +109,8 @@ class WarbleSession(object):
                                 sdoc = None # Wipe it!
                                 doc = None
                             elif age > 3600:
-                                sdoc['timestamp'] = int(time.time()) # Update timestamp in session DB
-                                sc.execute("UPDATE `sessions` SET `timestamp` = ? WHERE `cookie` = ? LIMIT 1", (sdoc['timestamp'], cookie,))
+                                st = int(time.time()) # Update timestamp in session DB
+                                sc.execute("UPDATE `sessions` SET `timestamp` = ? WHERE `cookie` = ? LIMIT 1", (st, cookie,))
                             if doc:
                                 self.user = {k:doc[k] for k in doc.keys()}
                                 self.user['userlevel'] = 'superuser' if doc['superuser'] else 'normal'


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


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

Posted by hu...@apache.org.
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