update Piwik to version 2.16 (fixes #91)

www/analytics/plugins/Morpheus/Controller.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+namespace Piwik\Plugins\Morpheus;
+
+use Piwik\Development;
+use Piwik\Piwik;
+use Piwik\View;
+
+class Controller extends \Piwik\Plugin\Controller
+{
+    public function demo()
+    {
+        if (! Development::isEnabled() || !Piwik::isUserHasSomeAdminAccess()) {
+            return;
+        }
+
+        return $this->renderTemplate('demo');
+    }
+}

www/analytics/plugins/Morpheus/Menu.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+namespace Piwik\Plugins\Morpheus;
+
+use Piwik\Development;
+use Piwik\Menu\MenuAdmin;
+use Piwik\Menu\MenuReporting;
+use Piwik\Menu\MenuUser;
+use Piwik\Piwik;
+
+class Menu extends \Piwik\Plugin\Menu
+{
+    public function configureAdminMenu(MenuAdmin $menu)
+    {
+        $menu->registerMenuIcon('CoreAdminHome_MenuDevelopment', 'icon-admin-development');
+        $menu->registerMenuIcon('CoreAdminHome_MenuDiagnostic', 'icon-admin-diagnostic');
+        $menu->registerMenuIcon('CorePluginsAdmin_MenuPlatform', 'icon-admin-platform');
+        $menu->registerMenuIcon('General_Settings', 'icon-admin-settings');
+        $menu->registerMenuIcon('CoreAdminHome_Administration', 'icon-admin-administration');
+
+        if (Development::isEnabled() && Piwik::isUserHasSomeAdminAccess()) {
+            $menu->addDevelopmentItem('UI Demo', $this->urlForAction('demo'));
+        }
+    }
+
+    public function configureUserMenu(MenuUser $menu)
+    {
+        $menu->registerMenuIcon('UsersManager_MenuPersonal', 'icon-user-personal');
+        $menu->registerMenuIcon('CoreAdminHome_MenuManage', 'icon-user-manage');
+        $menu->registerMenuIcon('CorePluginsAdmin_MenuPlatform', 'icon-user-platform');
+
+        if (Development::isEnabled() && Piwik::isUserHasSomeAdminAccess()) {
+            $menu->addPlatformItem('UI Demo', $this->urlForAction('demo'), $order = 15);
+        }
+    }
+
+    public function configureReportingMenu(MenuReporting $menu)
+    {
+        $menu->registerMenuIcon('General_Visitors', 'icon-reporting-visitors');
+        $menu->registerMenuIcon('General_Actions', 'icon-reporting-actions');
+        $menu->registerMenuIcon('Referrers_Referrers', 'icon-reporting-referer');
+        $menu->registerMenuIcon('Goals_Goals', 'icon-reporting-goal');
+        $menu->registerMenuIcon('Goals_Ecommerce', 'icon-reporting-ecommerce');
+        $menu->registerMenuIcon('Dashboard_Dashboard', 'icon-reporting-dashboard');
+    }
+}

www/analytics/plugins/Morpheus/images/logo.svg

@@ -3,22 +3,22 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="170.666px" height="45.704px" viewBox="0 0 170.666 45.704" enable-background="new 0 0 170.666 45.704"
 	 xml:space="preserve">
-<path fill="#D42A1F" d="M106.995,1.016c-2.57-0.739-5.251,0.751-5.987,3.329l-5.532,19.351L89.943,4.345
+<path fill="#d4291f" d="M106.995,1.016c-2.57-0.739-5.251,0.751-5.987,3.329l-5.532,19.351L89.943,4.345
 	c-0.592-2.071-2.441-3.417-4.477-3.492c-0.103-0.009-0.203-0.004-0.306-0.007c-0.102,0.003-0.203-0.003-0.306,0.007
 	c-2.036,0.075-3.885,1.421-4.477,3.492l-5.509,19.27l-5.509-19.27c-0.737-2.578-3.418-4.068-5.987-3.329
 	c-2.57,0.739-4.056,3.428-3.319,6.005l10.075,35.24c0.583,2.038,2.384,3.376,4.382,3.49c0.121,0.011,0.239,0.006,0.359,0.008
 	c0.12-0.002,0.238,0.004,0.359-0.008c1.998-0.114,3.799-1.451,4.382-3.49l5.551-19.416l5.551,19.416
 	c0.588,2.056,2.416,3.398,4.434,3.491c0.111,0.01,0.219,0.005,0.33,0.007c0.11-0.003,0.219,0.003,0.33-0.007
 	c2.019-0.093,3.846-1.435,4.434-3.491l10.075-35.24C111.05,4.444,109.564,1.756,106.995,1.016z"/>
-<path fill="#D42A1F" d="M116.502,40.44c0,2.972,2.35,5.322,5.322,5.322c2.972,0,5.322-2.35,5.322-5.322V6.147
+<path fill="#d4291f" d="M116.502,40.44c0,2.972,2.35,5.322,5.322,5.322c2.972,0,5.322-2.35,5.322-5.322V6.147
 	c0-2.972-2.35-5.322-5.322-5.322c-2.972,0-5.322,2.35-5.322,5.322V40.44z"/>
-<path fill="#D42A1F" d="M43.334,40.457c0,2.972,2.35,5.322,5.322,5.322c2.972,0,5.322-2.35,5.322-5.322V6.164
+<path fill="#d4291f" d="M43.334,40.457c0,2.972,2.35,5.322,5.322,5.322c2.972,0,5.322-2.35,5.322-5.322V6.164
 	c0-2.972-2.35-5.322-5.322-5.322c-2.972,0-5.322,2.35-5.322,5.322V40.457z"/>
-<path fill="#D42A1F" d="M155.406,23.156l13.779-13.779c1.974-1.974,1.974-5.097,0-7.071c-1.974-1.974-5.097-1.974-7.071,0
+<path fill="#d4291f" d="M155.406,23.156l13.779-13.779c1.974-1.974,1.974-5.097,0-7.071c-1.974-1.974-5.097-1.974-7.071,0
 	l-16.448,16.448V6.147c0-2.972-2.35-5.322-5.322-5.322c-2.972,0-5.322,2.35-5.322,5.322V40.44c0,2.972,2.35,5.322,5.322,5.322
 	c2.972,0,5.322-2.35,5.322-5.322v-7.544l2.669-2.669l13.618,13.857c1.957,1.992,5.079,2.019,7.071,0.062
 	c1.992-1.957,2.019-5.079,0.062-7.071L155.406,23.156z"/>
-<path fill="#D42A1F" d="M37.292,16.816c0-8.58-6.787-15.557-15.283-15.9l0.007-0.033H5.322C2.35,0.883,0,3.233,0,6.205v34.177
+<path fill="#d4291f" d="M37.292,16.816c0-8.58-6.787-15.557-15.283-15.9l0.007-0.033H5.322C2.35,0.883,0,3.233,0,6.205v34.177
 	c0,2.972,2.35,5.322,5.322,5.322c2.972,0,5.322-2.35,5.322-5.322v-7.63h11.371l-0.007-0.036
 	C30.505,32.372,37.292,25.396,37.292,16.816z M20.296,23.284l0-0.002h-9.651V10.491h9.464c3.535,0,6.401,2.866,6.401,6.401
 	C26.51,20.364,23.744,23.184,20.296,23.284z"/>

www/analytics/plugins/Morpheus/javascripts/ajaxHelper.js

@@ -0,0 +1,502 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * global ajax queue
+ *
+ * @type {Array} array holding XhrRequests with automatic cleanup
+ */
+var globalAjaxQueue = [];
+globalAjaxQueue.active = 0;
+
+/**
+ * Removes all finished requests from the queue.
+ *
+ * @return {void}
+ */
+globalAjaxQueue.clean = function () {
+    for (var i = this.length; i--;) {
+        if (!this[i] || this[i].readyState == 4) {
+            this.splice(i, 1);
+        }
+    }
+};
+
+/**
+ * Extend Array.push with automatic cleanup for finished requests
+ *
+ * @return {Object}
+ */
+globalAjaxQueue.push = function () {
+    this.active += arguments.length;
+
+    // cleanup ajax queue
+    this.clean();
+
+    // call original array push
+    return Array.prototype.push.apply(this, arguments);
+};
+
+/**
+ * Extend with abort function to abort all queued requests
+ *
+ * @return {void}
+ */
+globalAjaxQueue.abort = function () {
+    // abort all queued requests
+    for (var i = this.length; i--;) {
+        this[i] && this[i].abort && this[i].abort(); // abort if possible
+    }
+    // remove all elements from array
+    this.splice(0, this.length);
+
+    this.active = 0;
+};
+
+/**
+ * Global ajax helper to handle requests within piwik
+ *
+ * @type {Object}
+ * @constructor
+ */
+function ajaxHelper() {
+
+    /**
+     * Format of response
+     * @type {String}
+     */
+    this.format =         'json';
+
+    /**
+     * Should ajax request be asynchronous
+     * @type {Boolean}
+     */
+    this.async =          true;
+
+    /**
+     * A timeout for the request which will override any global timeout
+     * @type {Boolean}
+     */
+    this.timeout =        null;
+
+    /**
+     * Callback function to be executed on success
+     */
+    this.callback =       function () {};
+
+    /**
+     * Use this.callback if an error is returned
+     * @type {Boolean}
+     */
+    this.useRegularCallbackInCaseOfError = false;
+
+    /**
+     * Callback function to be executed on error
+     */
+    this.errorCallback =  this.defaultErrorCallback;
+
+    /**
+     * Callback function to be executed on complete (after error or success)
+     */
+    this.completeCallback =  function () {};
+
+    /**
+     * Params to be passed as GET params
+     * @type {Object}
+     * @see ajaxHelper._mixinDefaultGetParams
+     */
+    this.getParams =      {};
+
+    /**
+     * Base URL used in the AJAX request. Can be set by setUrl.
+     *
+     * It is set to '?' rather than 'index.php?' to increase chances that it works
+     * including for users who have an automatic 301 redirection from index.php? to ?
+     * POST values are missing when there is such 301 redirection. So by by-passing
+     * this 301 redirection, we avoid this issue.
+     *
+     * @type {String}
+     * @see ajaxHelper.setUrl
+     */
+    this.getUrl = '?';
+
+    /**
+     * Params to be passed as GET params
+     * @type {Object}
+     * @see ajaxHelper._mixinDefaultPostParams
+     */
+    this.postParams =     {};
+
+    /**
+     * Element to be displayed while loading
+     * @type {String}
+     */
+    this.loadingElement = null;
+
+    /**
+     * Element to be displayed on error
+     * @type {String}
+     */
+    this.errorElement = '#ajaxError';
+
+    /**
+     * Handle for current request
+     * @type {XMLHttpRequest}
+     */
+    this.requestHandle =  null;
+
+    /**
+     * Adds params to the request.
+     * If params are given more then once, the latest given value is used for the request
+     *
+     * @param {object}  params
+     * @param {string}  type  type of given parameters (POST or GET)
+     * @return {void}
+     */
+    this.addParams = function (params, type) {
+        if (typeof params == 'string') {
+            params = broadcast.getValuesFromUrl(params);
+        }
+
+        for (var key in params) {
+            if(type.toLowerCase() == 'get') {
+                this.getParams[key] = params[key];
+            } else if(type.toLowerCase() == 'post') {
+                this.postParams[key] = params[key];
+            }
+        }
+    };
+
+    /**
+     * Sets the base URL to use in the AJAX request.
+     *
+     * @param {string} url
+     */
+    this.setUrl = function (url) {
+        this.addParams(broadcast.getValuesFromUrl(url), 'GET');
+    };
+
+    /**
+     * Gets this helper instance ready to send a bulk request. Each argument to this
+     * function is a single request to use.
+     */
+    this.setBulkRequests = function () {
+        var urls = [];
+        for (var i = 0; i != arguments.length; ++i) {
+            urls.push($.param(arguments[i]));
+        }
+
+        this.addParams({
+            module: 'API',
+            method: 'API.getBulkRequest',
+            urls: urls,
+            format: 'json'
+        }, 'post');
+    };
+
+    /**
+     * Set a timeout (in milliseconds) for the request. This will override any global timeout.
+     *
+     * @param {integer} timeout  Timeout in milliseconds
+     * @return {void}
+     */
+    this.setTimeout = function (timeout) {
+        this.timeout = timeout;
+    };
+
+    /**
+     * Sets the callback called after the request finishes
+     *
+     * @param {function} callback  Callback function
+     * @return {void}
+     */
+    this.setCallback = function (callback) {
+        this.callback = callback;
+    };
+
+    /**
+     * Set that the callback passed to setCallback() should be used if an application error (i.e. an
+     * Exception in PHP) is returned.
+     */
+    this.useCallbackInCaseOfError = function () {
+        this.useRegularCallbackInCaseOfError = true;
+    };
+
+    /**
+     * Set callback to redirect on success handler
+     * &update=1(+x) will be appended to the current url
+     *
+     * @param {object} [params] to modify in redirect url
+     * @return {void}
+     */
+    this.redirectOnSuccess = function (params) {
+        this.setCallback(function() {
+            piwikHelper.redirect(params);
+        });
+    };
+
+    /**
+     * Sets the callback called in case of an error within the request
+     *
+     * @param {function} callback  Callback function
+     * @return {void}
+     */
+    this.setErrorCallback = function (callback) {
+        this.errorCallback = callback;
+    };
+
+    /**
+     * Sets the complete callback which is called after an error or success callback.
+     *
+     * @param {function} callback  Callback function
+     * @return {void}
+     */
+    this.setCompleteCallback = function (callback) {
+        this.completeCallback = callback;
+    };
+
+    /**
+     * error callback to use by default
+     *
+     * @param deferred
+     * @param status
+     */
+    this.defaultErrorCallback = function(deferred, status)
+    {
+        // do not display error message if request was aborted
+        if(status == 'abort') {
+            return;
+        }
+        $('#loadingError').show();
+        setTimeout( function(){
+            $('#loadingError').fadeOut('slow');
+        }, 2000);
+    };
+
+    /**
+     * Sets the response format for the request
+     *
+     * @param {string} format  response format (e.g. json, html, ...)
+     * @return {void}
+     */
+    this.setFormat = function (format) {
+        this.format = format;
+    };
+
+    /**
+     * Set the div element to show while request is loading
+     *
+     * @param {String} [element]  selector for the loading element
+     */
+    this.setLoadingElement = function (element) {
+        if (!element) {
+            element = '#ajaxLoadingDiv';
+        }
+        this.loadingElement = element;
+    };
+
+    /**
+     * Set the div element to show on error
+     *
+     * @param {String} element  selector for the error element
+     */
+    this.setErrorElement = function (element) {
+        if (!element) {
+            return;
+        }
+        this.errorElement = element;
+    };
+
+    /**
+     * Send the request
+     * @param {Boolean} [sync]  indicates if the request should be synchronous (defaults to false)
+     * @return {void}
+     */
+    this.send = function (sync) {
+        if (sync === true) {
+            this.async = false;
+        }
+
+        if ($(this.errorElement).length) {
+            $(this.errorElement).hide();
+        }
+
+        if (this.loadingElement) {
+            $(this.loadingElement).fadeIn();
+        }
+
+        this.requestHandle = this._buildAjaxCall();
+        globalAjaxQueue.push(this.requestHandle);
+    };
+
+    /**
+     * Aborts the current request if it is (still) running
+     * @return {void}
+     */
+    this.abort = function () {
+        if (this.requestHandle && typeof this.requestHandle.abort == 'function') {
+            this.requestHandle.abort();
+            this.requestHandle = null;
+        }
+    };
+
+    /**
+     * Builds and sends the ajax requests
+     * @return {XMLHttpRequest}
+     * @private
+     */
+    this._buildAjaxCall = function () {
+        var that = this;
+
+        var parameters = this._mixinDefaultGetParams(this.getParams);
+
+        var url = this.getUrl;
+        if (url[url.length - 1] != '?') {
+            url += '&';
+        }
+
+        // we took care of encoding &segment properly already, so we don't use $.param for it ($.param URL encodes the values)
+        if(parameters['segment']) {
+            url += 'segment=' + parameters['segment'] + '&';
+            delete parameters['segment'];
+        }
+        if(parameters['date']) {
+            url += 'date=' + decodeURIComponent(parameters['date']) + '&';
+            delete parameters['date'];
+        }
+        url += $.param(parameters);
+        var ajaxCall = {
+            type:     'POST',
+            async:    this.async !== false,
+            url:      url,
+            dataType: this.format || 'json',
+            complete: this.completeCallback,
+            error:    function () {
+                --globalAjaxQueue.active;
+
+                if (that.errorCallback) {
+                    that.errorCallback.apply(this, arguments);
+                }
+            },
+            success:  function (response, status, request) {
+                if (that.loadingElement) {
+                    $(that.loadingElement).hide();
+                }
+
+                if (response && response.result == 'error' && !that.useRegularCallbackInCaseOfError) {
+
+                    var placeAt = null;
+                    var type    = 'toast';
+                    if ($(that.errorElement).length && response.message) {
+                        $(that.errorElement).show();
+                        placeAt = that.errorElement;
+                        type    = null;
+                    }
+
+                    if (response.message) {
+
+                        var UI = require('piwik/UI');
+                        var notification = new UI.Notification();
+                        notification.show(response.message, {
+                            placeat: placeAt,
+                            context: 'error',
+                            type: type,
+                            id: 'ajaxHelper'
+                        });
+                        notification.scrollToNotification();
+                    }
+
+                } else {
+                    that.callback(response, status, request);
+                }
+
+                --globalAjaxQueue.active;
+                var piwik = window.piwik;
+                if (piwik
+                    && piwik.ajaxRequestFinished
+                ) {
+                    piwik.ajaxRequestFinished();
+                }
+            },
+            data:     this._mixinDefaultPostParams(this.postParams)
+        };
+
+        if (this.timeout !== null) {
+            ajaxCall.timeout = this.timeout;
+        }
+
+        return $.ajax(ajaxCall);
+    };
+
+    this._getDefaultPostParams = function () {
+        return {
+            token_auth: piwik.token_auth
+        };
+    }
+
+    /**
+     * Mixin the default parameters to send as POST
+     *
+     * @param {object}   params   parameter object
+     * @return {object}
+     * @private
+     */
+    this._mixinDefaultPostParams = function (params) {
+
+        var defaultParams = this._getDefaultPostParams();
+
+        for (var index in defaultParams) {
+
+            if (!params[index]) {
+
+                params[index] = defaultParams[index];
+            }
+        }
+
+        return params;
+    };
+
+    /**
+     * Mixin the default parameters to send as GET
+     *
+     * @param {object}   params   parameter object
+     * @return {object}
+     * @private
+     */
+    this._mixinDefaultGetParams = function (params) {
+
+        var defaultParams = {
+            idSite:  piwik.idSite || broadcast.getValueFromUrl('idSite'),
+            period:  piwik.period || broadcast.getValueFromUrl('period'),
+            segment: broadcast.getValueFromHash('segment', window.location.href.split('#')[1])
+        };
+
+        // never append token_auth to url
+        if (params.token_auth) {
+            params.token_auth = null;
+            delete params.token_auth;
+        }
+
+        for (var key in defaultParams) {
+            if (!params[key] && !this.postParams[key] && defaultParams[key]) {
+                params[key] = defaultParams[key];
+            }
+        }
+
+        // handle default date & period if not already set
+        if (!params.date && !this.postParams.date) {
+            params.date = piwik.currentDateString || broadcast.getValueFromUrl('date');
+            if (params.period == 'range' && piwik.currentDateString) {
+                params.date = piwik.startDateString + ',' + params.date;
+            }
+        }
+
+        return params;
+    };
+
+    return this;
+}

www/analytics/plugins/Morpheus/javascripts/layout.js

@@ -0,0 +1,32 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+$(function () {
+    var contentUser = $('#content.user');
+
+    function adjustSize(content)
+    {
+        var width = $('body').width() - content.offset().left - 10;
+        content.css('width', width + 'px');
+    }
+
+    if (contentUser.length) {
+        adjustSize(contentUser);
+        $(window).resize(function () {
+            adjustSize(contentUser);
+        });
+    }
+
+    var contentAdmin = $('#content.admin');
+
+    if (contentAdmin.length) {
+        adjustSize(contentAdmin);
+        $(window).resize(function () {
+            adjustSize(contentAdmin);
+        });
+    }
+});

www/analytics/plugins/Morpheus/javascripts/morpheus.js

@@ -6,7 +6,10 @@ $(document).ready(function () {
 
     function initICheck()
     {
-        $('input').iCheck({
+        $('input').filter(function () {
+            return !$(this).parent().is('.form-radio')
+                && !$(this).hasClass('no-icheck');
+        }).iCheck({
             checkboxClass: 'form-checkbox',
             radioClass: 'form-radio',
             checkedClass: 'checked',
@@ -16,10 +19,15 @@ $(document).ready(function () {
 
     initICheck();
     $(document).bind('ScheduledReport.edit', initICheck);
+    $(document).bind('Goals.edit', initICheck);
+    $(broadcast).bind('locationChangeSuccess', initICheck);
+    $(broadcast).bind('updateICheck', initICheck);
 
     $('body').on('ifClicked', 'input', function () {
         $(this).trigger('click');
     }).on('ifChanged', 'input', function () {
-        $(this).trigger('change');
+        if(this.type != 'radio' || this.checked) {
+            $(this).trigger('change');
+        }
     });
-});
+});

www/analytics/plugins/Morpheus/javascripts/piwikHelper.js

@@ -0,0 +1,495 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+function _pk_translate(translationStringId, values) {
+
+    function sprintf (translation, values) {
+        var index = 0;
+        return (translation+'').replace(/(%(.\$)?s+)/g, function(match, number) {
+
+            var replaced = match;
+            if (match != '%s') {
+                index = parseInt(match.substr(1, 1)) - 1;
+            }
+
+            if (typeof values[index] != 'undefined') {
+                replaced = values[index];
+            }
+
+            index++;
+            return replaced;
+        });
+    }
+
+    if( typeof(piwik_translations[translationStringId]) != 'undefined' ){
+        var translation = piwik_translations[translationStringId];
+        if (typeof values != 'undefined' && values && values.length) {
+            return sprintf(translation, values);
+        }
+
+        return translation;
+    }
+
+    return "The string "+translationStringId+" was not loaded in javascript. Make sure it is added in the Translate.getClientSideTranslationKeys hook.";
+}
+
+var piwikHelper = {
+
+    htmlDecode: function(value)
+    {
+        return $('<div/>').html(value).text();
+    },
+
+    /**
+     * a nice cross-browser logging function
+     */
+    log: function() {
+        try {
+            console.log.apply(console, arguments); // Firefox, Chrome
+        } catch (e) {
+            try {
+                opera.postError.apply(opera, arguments);  // Opera
+            } catch (f) {
+                // don't alert as log is not considered to be important enough
+                // (as opposed to piwikHelper.error)
+                //alert(Array.prototype.join.call(arguments, ' ')); // MSIE
+            }
+        }
+    },
+
+    error: function() {
+        try {
+            console.error.apply(console, arguments); // Firefox, Chrome
+        } catch (e) {
+            try {
+                opera.postError.apply(opera, arguments);  // Opera
+            } catch (f) {
+                alert(Array.prototype.join.call(arguments, ' ')); // MSIE
+            }
+        }
+    },
+
+    htmlEntities: function(value)
+    {
+        var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]];
+        for(var item in findReplace) {
+            value = value.replace(findReplace[item][0], findReplace[item][1]);
+        }
+        return value;
+    },
+
+    escape: function (value)
+    {
+        var escape = angular.element(document).injector().get('$sanitize');
+
+        return escape(value);
+    },
+
+	/**
+	 * Add break points to a string so that it can be displayed more compactly
+	 */
+	addBreakpoints: function(text, breakpointMarkup)
+	{
+		return text.replace(/([\/&=?\.%#:_-])/g, '$1' +
+			(typeof breakpointMarkup == 'undefined' ? '<wbr>&#8203;' : breakpointMarkup));
+			 // &#8203; is for internet explorer
+	},
+
+	/**
+	 * Add breakpoints to a URL
+	 * urldecodes and encodes htmlentities to display utf8 urls without XSS vulnerabilities
+	 */
+	addBreakpointsToUrl: function(url)
+	{
+		try {
+			url = decodeURIComponent(url);
+		} catch (e) {
+			// might throw "URI malformed"
+		}
+		url = piwikHelper.addBreakpoints(url, '|||');
+		url = $(document.createElement('p')).text(url).html();
+		url = url.replace(/\|\|\|/g, '<wbr />&#8203;'); // &#8203; is for internet explorer
+		return url;
+	},
+
+    /**
+     * As we still have a lot of old jQuery code and copy html from node to node we sometimes have to trigger the
+     * compiling of angular components manually.
+     *
+     * @param selector
+     */
+    compileAngularComponents: function (selector) {
+        var $element = $(selector);
+
+        if (!$element.length) {
+            return;
+        }
+
+        angular.element(document).injector().invoke(function($compile) {
+            var scope = angular.element($element).scope();
+            $compile($element)(scope);
+        });
+    },
+
+    /**
+     * Detection works currently only for directives defining an isolated scope. Functionality might need to be
+     * extended if needed. Under circumstances you might call this method before calling compileAngularComponents()
+     * to avoid compiling the same element twice.
+     * @param selector
+     */
+    isAlreadyCompiledAngularComponent: function (selector) {
+        var $element = $(selector);
+
+        return ($element.length && $element.hasClass('ng-isolate-scope'));
+    },
+
+    /**
+     * Displays a Modal dialog. Text will be taken from the DOM node domSelector.
+     * Given callback handles will be mapped to the buttons having a role attriute
+     *
+     * Dialog will be closed when a button is clicked and callback handle will be
+     * called, if one was given for the clicked role
+     *
+     * @param {string} domSelector   domSelector for modal window
+     * @param {object} handles       callback functions for available roles
+     * @return {void}
+     */
+    modalConfirm: function( domSelector, handles )
+    {
+        var domElem = $(domSelector);
+        var buttons = [];
+
+        $('[role]', domElem).each(function(){
+            var role  = $(this).attr('role');
+            var title = $(this).attr('title');
+            var text  = $(this).val();
+
+            var button = {text: text};
+
+            if(typeof handles[role] == 'function') {
+                button.click = function(){$(this).dialog("close"); handles[role].apply()};
+            } else {
+                button.click = function(){$(this).dialog("close");};
+            }
+
+            if (title) {
+                button.title = title;
+            }
+            buttons.push(button);
+            $(this).hide();
+        });
+
+        domElem.dialog({
+            resizable: false,
+            modal: true,
+            buttons: buttons,
+            width: 650,
+            position: ['center', 90]
+        });
+    },
+
+    getQueryStringWithParametersModified: function (queryString, newParameters) {
+        if (queryString != '') {
+            var r, i, keyvalue, keysvalues = newParameters.split('&');
+            var appendUrl = '';
+            for (i = 0; i < keysvalues.length; i++) {
+                keyvalue = keysvalues[i].split('=');
+                r = new RegExp('(^|[?&])' + keyvalue[0] + '=[^&]*');
+                queryString = queryString.replace(r, '');
+
+                // empty value, eg. &segment=, we remove the parameter from URL entirely
+                if (keyvalue[1].length == 0) {
+                    continue;
+                }
+                appendUrl += '&' + keyvalue[0] + '=' + keyvalue[1];
+            }
+            queryString += appendUrl;
+            if (queryString[0] == '&') {
+                queryString = '?' + queryString.substring(1);
+            }
+        } else {
+            queryString = '?' + newParameters;
+        }
+
+        return queryString;
+    },
+
+    /**
+     * Returns the current query string with the given parameters modified
+     * @param {String} newparams parameters to be modified
+     * @return {String}
+     */
+    getCurrentQueryStringWithParametersModified: function(newparams)
+    {
+        var queryString = String(window.location.search);
+        if (newparams) {
+            queryString = this.getQueryStringWithParametersModified(queryString, newparams);
+        }
+        return String(window.location.pathname) + queryString;
+    },
+
+  /**
+   * Given param1=v1&param2=k2
+   * returns: { "param1": "v1", "param2": "v2" }
+   *
+   * @param query string
+   * @return {Object}
+   */
+    getArrayFromQueryString: function (query) {
+      var params = {};
+      var vars = query.split("&");
+      for (var i=0;i<vars.length;i++) {
+        var keyValue = vars[i].split("=");
+        // Jquery will urlencode these, but we wish to keep the current raw value
+        // use case: &segment=visitorId%3D%3Dabc...
+        params[keyValue[0]] = decodeURIComponent(keyValue[1]);
+      }
+      return params;
+    },
+
+    /**
+     *  Returns query string for an object of key,values
+     *  Note: we don't use $.param from jquery as it doesn't return array values the PHP way (returns a=v1&a=v2 instead of a[]=v1&a[]=v2)
+     *  Example:
+     *      piwikHelper.getQueryStringFromParameters({"a":"va","b":["vb","vc"],"c":1})
+     *  Returns:
+     *      a=va&b[]=vb&b[]=vc&c=1
+     *  @param {object} parameters
+     *  @return {string}
+     */
+    getQueryStringFromParameters: function(parameters)
+    {
+        var queryString = '';
+        if(!parameters || parameters.length==0) {
+            return queryString;
+        }
+        for(var name in parameters) {
+            var value = parameters[name];
+            if(typeof value == 'object') {
+                for(var i in value) {
+                    queryString += name + '[]=' + value[i] + '&';
+                }
+            } else {
+                queryString += name + '=' + value + '&';
+            }
+        }
+        return queryString.substring(0, queryString.length-1);
+    },
+
+    /**
+     * Displays the given ajax error message within the given id element
+     * @param {string} message       error message
+     * @param {string} errorDivID    id of the domNode (defaults to ajaxError)
+     * @return {void}
+     */
+    showAjaxError: function( message, errorDivID )
+    {
+        errorDivID = errorDivID || 'ajaxError';
+        $('#'+errorDivID).html(message).show();
+    },
+
+    /**
+     * Hides the error message with the given id
+     * @param {string} [errorDivID]   id of the domNode (defaults to ajaxError)
+     * @return {void}
+     */
+    hideAjaxError: function(errorDivID)
+    {
+        errorDivID = errorDivID || 'ajaxError';
+        $('#'+errorDivID).hide();
+    },
+
+    /**
+     * Shows the loading message with the given Id
+     * @param {string} [loadingDivID]   id of the domNode (defaults to ajaxLoading)
+     * @return {void}
+     */
+    showAjaxLoading: function(loadingDivID)
+    {
+        loadingDivID = loadingDivID || 'ajaxLoadingDiv';
+        $('#'+loadingDivID).show();
+    },
+
+    /**
+     * Hides the loading message with the given id
+     * @param {string} [loadingDivID]   id of the domNode (defaults to ajaxLoading)
+     * @return {void}
+     */
+    hideAjaxLoading: function(loadingDivID)
+    {
+        loadingDivID = loadingDivID || 'ajaxLoadingDiv';
+        $('#'+loadingDivID).hide();
+    },
+
+    /**
+     * Reloads the page after the given period
+     * @param {int} timeoutPeriod
+     * @return void
+     */
+    refreshAfter: function(timeoutPeriod)
+    {
+        if(timeoutPeriod == 0) {
+            location.reload();
+        } else {
+            setTimeout("location.reload();",timeoutPeriod);
+        }
+    },
+
+    redirect: function (params) {
+        // add updated=X to the URL so that a "Your changes have been saved" message is displayed
+        if (typeof params == 'object') {
+            params = this.getQueryStringFromParameters(params);
+        }
+        var urlToRedirect = this.getCurrentQueryStringWithParametersModified(params);
+        var updatedUrl = new RegExp('&updated=([0-9]+)');
+        var updatedCounter = updatedUrl.exec(urlToRedirect);
+        if (!updatedCounter) {
+            urlToRedirect += '&updated=1';
+        } else {
+            updatedCounter = 1 + parseInt(updatedCounter[1]);
+            urlToRedirect = urlToRedirect.replace(new RegExp('(&updated=[0-9]+)'), '&updated=' + updatedCounter);
+        }
+        var currentHashStr = window.location.hash;
+        if(currentHashStr.length > 0) {
+            urlToRedirect += currentHashStr;
+        }
+        this.redirectToUrl(urlToRedirect);
+    },
+
+    /**
+     * Redirect to the given url
+     * @param {string} url
+     */
+    redirectToUrl: function(url)
+    {
+        window.location = url;
+    },
+
+    /**
+     * Scrolls the window to the jquery element 'elem'
+     * if the top of the element is not currently visible on screen
+     * @param {string} elem Selector for the DOM node to scroll to, eg. '#myDiv'
+     * @param {int} [time] Specifies the duration of the animation in ms
+     * @param {boolean} [forceScroll] Whether to force scroll to an element.
+     * @return {void}
+     */
+    lazyScrollTo: function(elem, time, forceScroll)
+    {
+        var elemTop = $(elem).offset().top;
+        // only scroll the page if the graph is not visible
+        if (elemTop < $(window).scrollTop()
+            || elemTop > $(window).scrollTop()+$(window).height()
+            || forceScroll
+        ) {
+            // scroll the page smoothly to the graph
+            $.scrollTo(elem, time);
+        }
+    },
+
+    /**
+     * Returns the filtered/converted content of a textarea to be used for api requests
+     * @param {string} textareaContent
+     * @return {string}
+     */
+    getApiFormatTextarea: function (textareaContent)
+    {
+        if(typeof textareaContent == 'undefined') {
+            return '';
+        }
+        return textareaContent.trim().split("\n").join(',');
+    }
+
+};
+
+String.prototype.trim = function() {
+    return this.replace(/^\s+|\s+$/g,"");
+};
+
+/**
+ * Returns true if the event keypress passed in parameter is the ENTER key
+ * @param {Event} e   current window event
+ * @return {boolean}
+ */
+function isEnterKey(e)
+{
+    return (window.event?window.event.keyCode:e.which)==13;
+}
+
+// workarounds
+(function($){
+try {
+    // this code is not vital, so we make sure any errors are ignored
+
+    //--------------------------------------
+    //
+    // monkey patch that works around bug in arc function of some browsers where
+    // nothing gets drawn if angles are 2 * PI apart and in counter-clockwise direction.
+    // affects some versions of chrome & IE 8
+    //
+    //--------------------------------------
+    var oldArc = CanvasRenderingContext2D.prototype.arc;
+    CanvasRenderingContext2D.prototype.arc = function(x, y, r, sAngle, eAngle, clockwise) {
+        if (Math.abs(eAngle - sAngle - Math.PI * 2) < 0.000001 && !clockwise)
+            eAngle -= 0.000001;
+        oldArc.call(this, x, y, r, sAngle, eAngle, clockwise);
+    };
+
+    //--------------------------------------
+    //
+    // Array.reduce is not available in IE8 but used in Jqplot
+    //
+    //--------------------------------------
+    if ('function' !== typeof Array.prototype.reduce) {
+        Array.prototype.reduce = function(callback, opt_initialValue){
+            'use strict';
+            if (null === this || 'undefined' === typeof this) {
+                // At the moment all modern browsers, that support strict mode, have
+                // native implementation of Array.prototype.reduce. For instance, IE8
+                // does not support strict mode, so this check is actually useless.
+                throw new TypeError(
+                    'Array.prototype.reduce called on null or undefined');
+            }
+            if ('function' !== typeof callback) {
+                throw new TypeError(callback + ' is not a function');
+            }
+            var index, value,
+                length = this.length >>> 0,
+                isValueSet = false;
+            if (1 < arguments.length) {
+                value = opt_initialValue;
+                isValueSet = true;
+            }
+            for (index = 0; length > index; ++index) {
+                if (this.hasOwnProperty(index)) {
+                    if (isValueSet) {
+                        value = callback(value, this[index], index, this);
+                    }
+                    else {
+                        value = this[index];
+                        isValueSet = true;
+                    }
+                }
+            }
+            if (!isValueSet) {
+                throw new TypeError('Reduce of empty array with no initial value');
+            }
+            return value;
+        };
+    }
+
+    // Fix jQuery UI dialogs scrolling when click on links with tooltips
+    jQuery.ui.dialog.prototype._focusTabbable = $.noop;
+
+    // Fix jQuery UI tooltip displaying when dialog is closed by Esc key
+    jQuery(document).keyup(function(e) {
+      if (e.keyCode == 27) {
+          $('.ui-tooltip').hide();
+      }
+    });
+
+} catch (e) {}
+}(jQuery));

www/analytics/plugins/Morpheus/plugin.json

@@ -2,6 +2,5 @@
     "name": "Morpheus",
     "description": "Morpheus is the default theme of Piwik 2 designed to help you focus on your analytics. In Greek mythology, Morpheus is the God of dreams. In the Matrix movie, Morpheus is the leader of the rebel forces who fight to awaken humans from a dreamlike reality called The Matrix. ",
     "theme": true,
-    "stylesheet": "stylesheets/theme.less",
-    "javascript": ["javascripts/jquery.icheck.min.js", "javascripts/morpheus.js"]
+    "stylesheet": "stylesheets/main.less"
 }

www/analytics/plugins/Morpheus/stylesheets/admin.less

@@ -1,118 +0,0 @@
-.Menu--admin {
-    .Menu-tabList {
-        .border-radius(0px);
-        border-color: @gray;
-        background-image: none;
-        padding-left: 0;
-        border-top: 0;
-        > li {
-            padding-bottom: 0px;
-            > span {
-                color: @brand-black;
-                .font-default(18px, 26px);
-                border-top: 1px solid @gray;
-                border-bottom: 1px solid @gray;
-                padding: 12px 15px;
-            }
-            ul {
-                li {
-                    a {
-                        color: @silver-40 !important;
-                        padding: 0.6em 1.1em;
-                        &:hover {
-                            color: @brand-black;
-                            text-decoration: none;
-                        }
-                    }
-                }
-            }
-        }
-    }   
-}
-
-.admin {
-    h2 {
-        border-bottom: 1px solid @gray;
-        margin-right:0;
-    }
-    h3 {
-        color: @brand-black;
-        .font-default(18px, 24px);
-        font-weight: normal;
-    }
-    a:hover {
-        text-decoration:underline;
-    }
-}
-
-.ui-state-highlight {
-    border-color: @silver-80 !important;
-    background: @silver-95 !important;
-    .ui-icon {
-        background-image: url('plugins/Morpheus/images/info.png');
-        background-position: 0 0;
-    }
-}
-
-.adminTable {
-    td {
-        padding: 0;
-    }
-    label {
-        cursor: pointer;
-        min-height: 30px;
-    }
-
-    .sites_autocomplete {
-        position: static !important;
-    }
-}
-
-.sites_autocomplete  {
-    vertical-align: middle;
-}
-
-#loadingError {
-    color: @brand-red;
-    font-weight: normal;
-}
-
-.sites_autocomplete .custom_select .custom_select_block .custom_select_container .custom_select_ul_list {
-    margin-top: 5px;
-    padding-bottom: 0;
-}
-
-.form-description {
-    margin-left: 0;
-}
-
-.adminTable a {
-    color: @brand-blue;
-}
-
-.addRowSite,
-.addrow {
-    cursor: pointer;
-}
-
-.addrow {
-    margin-top: 10px;
-}
-
-.addRowSite {
-    display: inline-block;
-    margin: 5px 0;
-    &:before {
-        content: url(plugins/Morpheus/images/add.png) !important;
-    }
-}
-
-code {
-    border-color: @silver-80;
-    border-left: 5px solid @brand-red;
-}
-
-#geoipdb-screen1>div>p {
-    line-height: 1.4em;
-    height: 6em;
-}

www/analytics/plugins/Morpheus/stylesheets/base.less

@@ -0,0 +1,46 @@
+/* base.less is a standalone Less file */
+
+@import "base/colors";
+@import "theme";
+@import "theme-advanced";
+@import "base/mixins";
+@import "base/bootstrap.css";
+@import "base/icons.css";
+
+/* General styles */
+@import "general/_default.less";
+
+@import "general/_utils.less";
+
+@import "general/_form.less";
+
+@import "general/_jqueryUI.less";
+
+@import "general/_misc.less";
+
+/* Component styles */
+@import "uibase/_header.less";
+
+@import "uibase/_headerMessage.less";
+
+@import "../../CoreHome/angularjs/siteselector/siteselector.directive.less";
+@import "../../CoreHome/angularjs/menudropdown/menudropdown.directive.less";
+
+@import "uibase/_periodSelect.less";
+
+@import "uibase/_languageSelect.less";
+
+@import "uibase/_loading.less";
+
+/* Remote components */
+@import "../../CoreHome/stylesheets/_donate.less";
+
+@import "ui/_buttons";
+@import "ui/_code";
+@import "ui/_tables";
+@import "ui/_alerts";
+@import "ui/_list-group";
+@import "ui/_progress-bars";
+@import "ui/_navs";
+@import "ui/_cards";
+@import "ui/_panels";

www/analytics/plugins/Morpheus/stylesheets/base/colors.less

@@ -0,0 +1,44 @@
+// Gray shapes
+// Variable pattern: @color-<color>-<modifier>
+@color-black:       #000;
+@color-gray:        #ccc;
+@color-gray-light:  #f0f0f0;
+@color-white:       #fff;
+@color-silver:      #999;
+@color-silver-l14:  lighten(@color-black, 14%);
+@color-silver-l20:  lighten(@color-black, 20%);
+@color-silver-l30:  lighten(@color-black, 30%);
+@color-silver-l40:  lighten(@color-black, 40%);
+@color-silver-l50:  lighten(@color-black, 50%);
+@color-silver-l60:  lighten(@color-black, 60%);
+@color-silver-l70:  lighten(@color-black, 70%);
+@color-silver-l80:  lighten(@color-black, 80%);
+@color-silver-l85:  lighten(@color-black, 85%);
+@color-silver-l90:  lighten(@color-black, 90%);
+@color-silver-l95:  lighten(@color-black, 95%);
+@color-silver-l98:  lighten(@color-black, 98%);
+@color-silver-dark: #333;
+
+// Brand colors
+// Variable pattern: @color-<color>-<modifier>
+@color-black-piwik:               #0d0d0d;
+@color-blue-piwik:                #4183C4;
+@color-red-piwik:                 #d4291f;
+@color-green-brandSocial:         #009874;
+@color-blue-brandSocial:          #3b5998;
+@color-blue-brandSocialLight:     #1c87bd;
+@color-blue-brandSocialVeryLight: #00aced;
+@color-orange-brand:              #ff9600;
+
+@graph-colors-data-series1: #d4291f;
+@graph-colors-data-series2: #1f78b4;
+@graph-colors-data-series3: #ff7f00;
+@graph-colors-data-series4: #33a02c;
+@graph-colors-data-series5: #6a3d9a;
+@graph-colors-data-series6: #b15928;
+@graph-colors-data-series7: #fdbf6f;
+@graph-colors-data-series8: #cab2d6;
+/*
+Qualitative data color series inspired from colorbrewer2.org/
+next ones could be: #cab2d6 #ffff99 # #b2df8a
+*/

www/analytics/plugins/Morpheus/stylesheets/base/icons.css

@@ -0,0 +1,302 @@
+@font-face {
+    font-family: 'piwik';
+    src: url('../../fonts/piwik.eot');
+}
+@font-face {
+    font-family: 'piwik';
+    src: url('../../fonts/piwik.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+    font-family: 'piwik';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-alien:before {
+    content: "\e600";
+}
+.icon-annotation:before {
+    content: "\e601";
+}
+.icon-arrow-left:before {
+    content: "\e602";
+}
+.icon-arrow-right:before {
+    content: "\e603";
+}
+.icon-business:before {
+    content: "\e604";
+}
+.icon-calendar:before {
+    content: "\e605";
+}
+.icon-chart-bar:before {
+    content: "\e606";
+}
+.icon-chart-line-details:before {
+    content: "\e607";
+}
+.icon-chart-line:before {
+    content: "\e608";
+}
+.icon-chart-pie:before {
+    content: "\e609";
+}
+.icon-close:before {
+    content: "\e60a";
+}
+.icon-arrow-collapsed:before {
+    content: "\e60b";
+}
+.icon-configure:before {
+    content: "\e60c";
+}
+.icon-datepicker-arr-l:before {
+	content: "\e60d";
+}
+.icon-datepicker-arr-r:before {
+	content: "\e60e";
+}
+.icon-delete:before {
+    content: "\e60f";
+}
+.icon-document:before {
+    content: "\e610";
+}
+.icon-download:before {
+    content: "\e611";
+}
+.icon-drop:before {
+    content: "\e612";
+}
+.icon-ecommerce-abandoned-cart:before {
+    content: "\e613";
+}
+.icon-ecommerce-order:before {
+    content: "\e614";
+}
+.icon-email:before {
+    content: "\e615";
+}
+.icon-error:before {
+    content: "\e616";
+}
+.icon-export:before {
+    content: "\e617";
+}
+.icon-feed:before {
+    content: "\e618";
+}
+.icon-finance:before {
+    content: "\e619";
+}
+.icon-folder-charts:before {
+    content: "\e61a";
+}
+.icon-folder:before {
+    content: "\e61b";
+}
+.icon-fullscreen:before {
+    content: "\e61c";
+}
+.icon-goal:before {
+    content: "\e61d";
+}
+.icon-help-alt:before {
+    content: "\e61e";
+}
+.icon-help:before {
+    content: "\e61f";
+}
+.icon-code:before {
+    content: "\e620";
+}
+.icon-warning:before {
+    content: "\e621";
+}
+.icon-edit:before {
+    content: "\e622";
+}
+.icon-image:before {
+    content: "\e623";
+}
+.icon-info:before {
+    content: "\e624";
+}
+.icon-insights:before {
+    content: "\e625";
+}
+.icon-locked-2:before {
+    content: "\e626";
+}
+.icon-locked-3:before {
+    content: "\e627";
+}
+.icon-locked:before {
+    content: "\e628";
+}
+.icon-locked-4:before {
+    content: "\e629";
+}
+.icon-maximise:before {
+    content: "\e62a";
+}
+.icon-minimise:before {
+    content: "\e62b";
+}
+.icon-minus:before {
+    content: "\e62c";
+}
+.icon-newtab:before {
+    content: "\e62d";
+}
+.icon-ok:before {
+    content: "\e62e";
+}
+.icon-open-source:before {
+    content: "\e62f";
+}
+.icon-plus:before {
+    content: "\e630";
+}
+.icon-add:before {
+    content: "\e630";
+}
+.icon-puzzle:before {
+    content: "\e631";
+}
+.icon-refresh:before {
+    content: "\e632";
+}
+.icon-reload:before {
+    content: "\e633";
+}
+.icon-search:before {
+    content: "\e634";
+}
+.icon-segment:before {
+    content: "\e635";
+}
+.icon-users:before {
+    content: "\e635";
+}
+.icon-server-alt:before {
+    content: "\e636";
+}
+.icon-server:before {
+    content: "\e637";
+}
+.icon-hide:before {
+    content: "\e638";
+}
+.icon-show:before {
+    content: "\e639";
+}
+.icon-arrow-top:before {
+    content: "\e63a";
+}
+.icon-arrow-bottom:before {
+    content: "\e63b";
+}
+.icon-star:before {
+    content: "\e63c";
+}
+.icon-success:before {
+    content: "\e63d";
+}
+.icon-table-more:before {
+    content: "\e63e";
+}
+.icon-table:before {
+    content: "\e63f";
+}
+.icon-tag-cloud:before {
+    content: "\e640";
+}
+.icon-user-add:before {
+    content: "\e641";
+}
+.icon-user:before {
+    content: "\e642";
+}
+.icon-play:before {
+    content: "\e643";
+}
+.icon-visitor-profile:before {
+    content: "\e644";
+}
+.icon-zoom-in:before {
+    content: "\e645";
+}
+.icon-zoom-out:before {
+    content: "\e646";
+}
+.icon-sign-out:before {
+    content: "\e647";
+}
+.icon-sign-in:before {
+	content: "\e648";
+}
+.icon-menu-hamburger:before {
+	content: "\e649";
+}
+.icon-more-horiz:before {
+	content: "\e64a";
+}
+.icon-more-verti:before {
+	content: "\e64b";
+}
+.icon-admin-administration:before {
+	content: "\e64c";
+}
+.icon-admin-development:before {
+	content: "\e64d";
+}
+.icon-admin-diagnostic:before {
+	content: "\e64e";
+}
+.icon-admin-platform:before {
+	content: "\e64f";
+}
+.icon-admin-settings:before {
+	content: "\e650";
+}
+.icon-reporting-actions:before {
+	content: "\e651";
+}
+.icon-reporting-dashboard:before {
+	content: "\e652";
+}
+.icon-reporting-ecommerce:before {
+	content: "\e653";
+}
+.icon-reporting-goal:before {
+	content: "\e654";
+}
+.icon-reporting-referer:before {
+	content: "\e655";
+}
+.icon-reporting-visitors:before {
+	content: "\e656";
+}
+.icon-user-manage:before {
+	content: "\e657";
+}
+.icon-user-personal:before {
+	content: "\e658";
+}
+.icon-user-platform:before {
+	content: "\e659";
+}
+

www/analytics/plugins/Morpheus/stylesheets/base/mixins.less

@@ -3,7 +3,7 @@
   &:after {
     content: "";
     display: table;
-    clear: both;
+    clear: right;
   }
   &:before {
     content: "";
@@ -12,7 +12,7 @@
 }
 
 .font-default(@size: 13px, @line: 16px) {
-  font-family: Verdana, sans-serif;
+  font-family: @theme-fontFamily-base;
   font-size: @size;
   line-height: @line;
 }
@@ -27,24 +27,6 @@
     background-clip:         padding-box;
 }
 
-.box-shadow (@string, @string1) {
-    -webkit-box-shadow: @string @string1;
-    -moz-box-shadow:    @string @string1;
-    box-shadow:         @string @string1;
-}
-
-.box-shadow-1 (@string) {
-    -webkit-box-shadow: @string;
-    -moz-box-shadow:    @string;
-    box-shadow:         @string;
-}
-
-.no-box-shadow () {
-    -webkit-box-shadow: none;
-    -moz-box-shadow:    none;
-    box-shadow:         none;
-}
-
 #gradient {
 
   .horizontal(@start-color: #555, @end-color: #333, @start-percent: 0%, @end-percent: 100%) {
@@ -53,7 +35,7 @@
     background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
     background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
     background-repeat: repeat-x;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start-color,@end-color)); // IE9 and down
   }
 
   .vertical(@start-color: #555, @end-color: #333, @start-percent: 0%, @end-percent: 100%) {
@@ -62,7 +44,7 @@
     background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
     background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
     background-repeat: repeat-x;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color)); // IE9 and down
   }
 }
 

www/analytics/plugins/Morpheus/stylesheets/colors.less

@@ -1,58 +0,0 @@
-@white: #fff;
-@silver: #999;
-@silverDark: #333;
-@gray: #ccc;
-@lightGray: #f0f0f0;
-@hr: #eee;
-
-@articleHeader: #0c0c0c;
-@quoteText: #999;
-@tabActiveBackground: #f4f4f4;
-
-//new colors define
-@black: #000;
-@silver-14: lighten(@black, 14%);
-@silver-20: lighten(@black, 20%);
-@silver-20: lighten(@black, 30%);
-@silver-40: lighten(@black, 40%);
-@silver-50: lighten(@black, 50%);
-@silver-60: lighten(@black, 60%);
-@silver-70: lighten(@black, 70%);
-@silver-80: lighten(@black, 80%);
-@silver-85: lighten(@black, 85%);
-@silver-90: lighten(@black, 90%);
-@silver-95: lighten(@black, 95%);
-
-@brand-black: #0d0d0d;
-@brand-blue: #1e93d1;
-@brand-red: #d4291f;
-@brand-social-green: #009874;
-@brand-social-blue: #3b5998;
-@brand-social-blue2: #00aced;
-@brand-social-lightblue: #1c87bd;
-@brand-orange: #ff9600;
-
-//charts
-@theme-color-background-base: #fff;
-@theme-color-background-contrast: #5F5A60;
-@theme-color-background-smallContrast: #202020;
-@theme-color-background-lighter: #888;
-@theme-color-base-series: #ee3024;
-
-@graph-colors-data-series1: #d4291f;
-@graph-colors-data-series2: #1f78b4;
-@graph-colors-data-series3: #ff7f00;
-@graph-colors-data-series4: #33a02c;
-@graph-colors-data-series5: #6a3d9a;
-@graph-colors-data-series6: #b15928;
-@graph-colors-data-series7: #fdbf6f;
-@graph-colors-data-series8: #cab2d6;
-/*
-Qualitative data color series inspired from colorbrewer2.org/
-next ones could be: #cab2d6 #ffff99 # #b2df8a
-*/
-
-.color-red {
-    color: @defaultRed;
-}
-

www/analytics/plugins/Morpheus/stylesheets/forms.less

@@ -1,300 +0,0 @@
-input, select, textarea {
-    color: @brand-black;
-    .border-radius(0px);
-    margin-left: 0;
-    padding: 8px 10px;  
-    min-height: 30px;  
-    .box-sizing(border-box);
-    background: #fff;
-}
-button,
-.add-trusted-host,
-input[type="submit"],
-button[type="button"],
-.submit {
-    .border-radius(3px) !important;
-    background: none !important;
-    background-color: #d3291f !important;
-    .box-shadow(~"0 1px 1px rgba(13,13,13,.3), inset 0 -1px 0 rgba(13,13,13,.1)");
-    #gradient > .vertical(rgba(255,255,255,.15), rgba(255,255,255,0)) !important;
-    .font-default(12px, 16px) !important;
-    color: #fff !important;;
-    font-weight: normal;
-    padding: 5px 15px !important;
-    text-align: center;
-    cursor: pointer;
-    border: 0px !important;
-    &:hover {
-        background: #ff9600 !important;
-        background-color: #ff9600 !important;
-    }
-
-    em {
-        font-style: normal;
-    }
-    &.ui-dialog-titlebar-close {
-        &:hover {
-            background: none !important;
-            background-color: none !important;
-        }
-    }
-}
-
-.sites_autocomplete {
-    input {
-      min-height: 0;
-    }
-    .custom_select {
-        border-color: @silver-80;
-        .border-radius(0px);
-        background: #fff;
-        .box-shadow(~"inset 1px 1px 3px #d8d8d8");
-        padding: 9px 5px 7px;
-        color: @silver-20;
-        text-transform: uppercase;
-        .font-default(10px, 12px);
-        min-height: 30px;
-        .box-sizing(border-box);
-        a {
-            color: @silver-20;
-        }
-        .custom_select_block {
-            .custom_select_container{
-                .custom_select_ul_list {
-                    margin-top: 20px;
-                }
-            }
-        }
-    }
-}
-
-.ajaxError {
-    background: @brand-red;
-    color: #fff;
-    border:0px;
-    .border-radius(6px);
-    padding: 20px 25px;
-    text-align: center;
-    font-weight: normal;
-}
-
-
-.sites_autocomplete--dropdown {
-    .custom_select_main_link:not(.loading):before {
-        color: @brand-red;
-        font-size: 0.7em;
-        top: 2px;
-        right: 5px;
-        content: '';
-        border-left: 4px solid transparent;
-        border-right: 4px solid transparent;
-        border-top: 5px solid @brand-red;
-    }
-}
-
-
-.limitSelection {
-    > ul {
-        position: relative;
-        top: -6px;
-        > li {
-            width: 25px;
-        }
-    }
-    > div {
-        .border-radius(2px);
-        background-color: #fff;
-        .font-default(10px, 12px);
-        background: none;
-        padding: 2px 14px 2px 1px;
-        span {
-            position: relative;
-            background: none;
-            color: @brand-black;
-            display: block;
-            padding-right: 3px;
-            &:after {
-                content: '';
-                border-left: 4px solid transparent;
-                border-right: 4px solid transparent;
-                border-top: 5px solid @brand-red;
-                position: absolute;
-                top: 7px;
-                right: -9px;
-            }
-        }
-    }
-
-    span {
-        color: @brand-black;
-        font-weight: normal;
-    }
-
-    &.visible {
-        > div {
-            background-image: none;
-            > span:after {
-                content: '';
-                border-left: 4px solid transparent;
-                border-right: 4px solid transparent;
-                border-bottom: 5px solid #d4291f;
-                border-top-color: transparent;
-                position: absolute;
-                top: 1px;
-                right: -9px;
-            }
-        }
-    }
-}
-
-//checkboxes and radio
-.form-radio, .form-checkbox {
-    display: inline-block;
-    padding: 0;
-    margin: 0;
-}
-.form-radio, .form-checkbox {
-    height: 15px;
-    width: 15px;
-    float: left;
-    cursor: pointer;
-    background: url('plugins/Morpheus/images/forms-sprite.png');
-    margin: 2px 5px 2px 0;
-}
-
-.form-radio.disabled {
-    background-position:15px -16px;
-}
-
-.form-checkbox.disabled {
-    background-position:15px 0px;
-}
-
-.form-radio + label, .form-checkbox + label {
-    float:left;
-    display:inline-block;
-
-    + .form-description {
-        margin-left:1em;
-    }
-
-    + br, + .form-description + br {
-        clear:both;
-    }
-
-    + .form-radio, + .form-checkbox {
-        margin-left:32px;
-    }
-}
-
-fieldset > .form-radio + label { // assumes <br/> after the label
-  display: inline-block;
-  margin-bottom: -.5em;
-}
-
-label {
-    &.hover,
-    &:hover {
-        border: 0px;
-    }
-}
-
-.form-radio {
-    background-position: 0 -16px;
-    
-    &.form-hover {
-        background-position: -60px -16px;
-    }
-
-    &.checked {
-        background-position: -30px -16px;
-        &.form-hover {
-            background-position: -90px -16px;
-        }
-    }
-}
-
-.form-checkbox {
-    background-position: 0 0;
-    
-    &.form-hover {
-        background-position: -60px 0;
-    }
-
-    &.checked {
-        background-position: -30px 0;
-        &.form-hover {
-            background-position: -90px 0;
-        }
-    }
-}
-
-.prettycheckbox a:focus, .prettyradio a:focus {
-    outline: 0 none;
-}
-.prettycheckbox label, .prettyradio label {
-    display: block;
-    float: left;
-    margin: 2px;
-    cursor: pointer;
-}
-.prettycheckbox a.disabled, .prettycheckbox label.disabled, .prettyradio a.disabled, .prettyradio label.disabled {
-    cursor: not-allowed;
-}
-.prettycheckbox a {
-    background-position: 0 0;
-}
-.prettycheckbox a:focus {
-    background-position: -15px 0;
-}
-.prettycheckbox a.checked {
-    background-position: -38px 0;
-}
-.prettycheckbox a.checked:focus {
-    background-position: -53px 0;
-}
-.prettycheckbox a.checked.disabled {
-    background-position: -99px 0;
-}
-.prettycheckbox a.disabled {
-    background-position: -76px 0;
-}
-.prettyradio a {
-    background-position: -129px 0;
-}
-.prettyradio a:focus {
-    background-position: -144px 0;
-}
-.prettyradio a.checked {
-    background-position: -167px 0;
-}
-.prettyradio a.checked:focus {
-    background-position: -182px 0;
-}
-.prettyradio a.checked.disabled {
-    background-position: -228px 0;
-}
-.prettyradio a.disabled {
-    background-position: -205px 0;
-}
-
-// specific form control overrides (for iCheck)
-.indented-radio-button {
-  margin:0;
-}
-
-.listReports > li:after {
-  content:"";
-  display:table;
-  clear:both;
-}
-
-.listReports {
-  .form-radio + label, .form-checkbox + label {
-    width: 250px;
-  }
-}
-
-.small-form-description { // for tracking code generator
-  clear:both;
-}

www/analytics/plugins/Morpheus/stylesheets/general/_admin.less

@@ -0,0 +1,68 @@
+
+.ui-state-highlight {
+    border-color: @color-silver-l80 !important;
+    background: @color-silver-l95 !important;
+    .ui-icon {
+        background-image: url('plugins/Morpheus/images/info.png');
+        background-position: 0 0;
+    }
+}
+
+.adminTable {
+    td {
+        padding: 2px 0;
+    }
+    label {
+        cursor: pointer;
+        min-height: 30px;
+    }
+}
+
+.sites_autocomplete  {
+    vertical-align: middle;
+}
+
+.adminTable a {
+    color: @theme-color-link;
+}
+
+.admin .adminTable a {
+  color: @theme-color-text;
+  text-decoration: underline;
+}
+
+.admin .adminTable .ui-inline-help a {
+  color: @theme-color-link;
+  text-decoration: none;
+}
+
+.addRowSite,
+.addrow {
+    cursor: pointer;
+}
+
+.addrow:hover {
+  text-decoration: underline;
+}
+
+.addrow {
+    margin-top: 16px;
+}
+
+.addRowSite {
+    display: inline-block;
+    margin: 5px 0;
+    text-decoration: none !important;
+    &:before {
+        content: url(plugins/Morpheus/images/add.png) !important;
+    }
+
+    &:hover {
+      text-decoration: underline !important;
+    }
+}
+
+#geoipdb-screen1>div>p {
+    line-height: 1.4em;
+    height: 6em;
+}

www/analytics/plugins/Morpheus/stylesheets/general/_default.less

@@ -0,0 +1,72 @@
+/* reset style */
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: transparent;
+}
+
+abbr {
+    border-bottom: 1px dotted;
+}
+
+form {
+    margin: 0;
+}
+
+body {
+    line-height: 1.33;
+    background-color: white;
+    color: #333;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+blockquote, q {
+    quotes: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+    outline: thin dotted;
+}
+
+a:focus {
+    outline: thin dotted;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+    text-decoration: none;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+/* start piwik styles */
+body {
+    font-family: @theme-fontFamily-base;
+    font-size: 1em;
+}
+
+a {
+    color: #255792;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+#root {
+    margin: 0 10px;
+    position: relative;
+}
+
+/* Make sure the scroll bar is always displayed so the content does not shift when reloading menu with/without scrollbar */
+html {
+  overflow-y: scroll;
+}

www/analytics/plugins/Morpheus/stylesheets/general/_form.less

@@ -0,0 +1,135 @@
+.submit {
+  clear: both;
+  font-size: 18px;
+  border: 0;
+  float: right;
+  margin: 12px 0 10px 0;
+  cursor: pointer;
+}
+
+/* on admin screen, Save button aligned on the left */
+.admin .submit {
+  margin-left: 0px;
+  margin-top: 20px;
+  float: none;
+}
+
+.admin .entityContainer .submit {
+  margin: 0;
+  margin-top: 20px;
+}
+
+.entityContainer .link_but {
+  white-space: nowrap;
+  display: inline-block;
+  margin: 0 10px 0 0;
+  text-decoration: none;
+}
+
+.entityContainer .link_but img {
+  white-space: nowrap;
+  margin: 0 1px 0 0 !important;
+}
+
+.entityAddContainer .entityTable th, #entityEditContainer .entityTable th, #entityEditContainer .entityTable td {
+  vertical-align: middle !important;
+}
+
+.entityAddContainer .entityTable tr td.first {
+  font-weight: bold;
+  vertical-align: top !important;
+}
+
+.entityAddContainer tr:hover {
+  background: none !important;
+}
+
+/* Add / Edit / List entities */
+.entityContainer {
+  width: 100%;
+  max-width: 850px;
+  min-width: 600px;
+  font-size: 14px;
+}
+
+.entityInlineHelp {
+  color: #9B9B9B;
+  margin-top: 5px;
+}
+
+table.entityTable {
+  thead {
+    tr {
+      th {
+        background-color: @color-silver-l98 !important;
+        text-align: left !important;
+        font-size: 16px;
+      }
+
+      td {
+        padding: 10px;
+      }
+    }
+  }
+
+  tr {
+    td {
+      padding:10px;
+    }
+  }
+}
+
+.entityTable tr td.first, .entityTable tr th.first {
+  border-left: 0 !important;
+  vertical-align: top !important;
+}
+
+.entityTable tr th {
+  white-space: nowrap;
+  padding: 16px 10px !important;
+}
+
+.entityTable tr td, .entityTable tr th {
+  border-bottom: 0 !important;
+}
+
+table.entityTable tr td a {
+  text-decoration: underline;
+}
+
+.entityTable tr.highlighted td {
+  background-color: #ECF9DD;
+}
+
+/* cancel button below Forms */
+.entityCancel {
+  padding: 10px 0;
+  font-size: 12px;
+}
+
+/* List with grey arrows on left */
+.entityList ul.listCircle {
+  font-weight: normal;
+  list-style: none;
+  padding: 4px 0;
+}
+
+.entityList ul li {
+  background: @theme-color-background-base url(plugins/Morpheus/images/li_dbl_gray.gif) no-repeat 6px 10px;
+  padding: 0 0 0 21px;
+  line-height: 22px;
+}
+
+.entityList ul li .dimension {
+  cursor: pointer;
+  border-bottom: 1px solid #d0d0d0;
+}
+
+.entityList ul li.activeDimension .dimension {
+  font-weight: bold;
+  border: 0;
+}
+
+.entityList ul.listCircle li a {
+  color: #000;
+}

www/analytics/plugins/Morpheus/stylesheets/general/_forms.less

@@ -0,0 +1,491 @@
+form {
+    margin-bottom: 30px;
+}
+
+label {
+    cursor: pointer;
+}
+
+input:not([type="checkbox"]):not([type="submit"]):not([type="button"]), select, textarea {
+    border: 1px solid #d4d4d4;
+    font-size: 14px;
+    color: @theme-color-text-lighter;
+    .border-radius(2px);
+    margin-left: 0;
+    padding: 10px 12px;
+    min-height: 20px;
+    .box-sizing(border-box);
+    background: @theme-color-background-base;
+}
+input:not([type="checkbox"]):not([type="submit"]):not([type="button"]), textarea {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    -moz-box-shadow:    inset 0 1px 1px rgba(0,0,0,.075);
+    box-shadow:         inset 0 1px 1px rgba(0,0,0,.075);
+}
+input[disabled] {
+    background: #F5F5F5 none !important;
+}
+
+select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: @theme-color-background-base;
+    background-image: url("plugins/Morpheus/images/select_arrow.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    padding-right: 30px;
+}
+// This class/mixin allows to restore the native style of selects when needed
+.native-select {
+    -webkit-appearance: menulist;
+    -moz-appearance: menulist;
+    appearance: menulist;
+    padding: 4px 4px;
+    background: none;
+}
+
+.form-group {
+    width: 100%;
+    margin-bottom: 15px;
+    .clearfix();
+
+    label {
+        display: block;
+        margin: 8px 0 6px;
+        font-size: 14px;
+        line-height: 20px;
+        width: 40%;
+    }
+    input, select, textarea {
+        display: block;
+        width: 40%;
+    }
+    .input-group {
+        width: 40%;
+    }
+
+    .radio, .checkbox {
+        font-size: 12px;
+        width: 40%;
+        text-transform: none;
+        line-height: 20px;
+        margin: 7px 0 2px;
+        input[type="checkbox"], input[type="radio"] {
+            display: inline;
+            width: auto;
+        }
+        // Quickform adds a label automatically so we have to remove its formatting
+        // TODO remove when we get rid of Quickform
+        label {
+            text-transform: none;
+            display: inline;
+            width: auto;
+            font-size: inherit;
+        }
+        .form-description {
+            display: inline;
+        }
+    }
+
+    .form-help {
+        float: right;
+        width: 58%;
+        margin-bottom: 0;
+    }
+
+    label .form-description {
+        display: inline;
+        &:before {
+            content: '(';
+        }
+        &:after {
+            content: ')';
+        }
+    }
+
+    .form-description {
+        width: 40%;
+        display: block;
+        margin-top: 6px;
+    }
+
+    .sites_autocomplete {
+        position: relative;
+    }
+}
+
+// TODO Form helps are used outside of forms in UserCountry (old table layout)
+// Once this plugin uses the new form layout, move those rules back into ".form-group .form-help"
+.form-help {
+    .alert;
+    .alert-info;
+    // Smaller padding to match input's heights
+    padding: 11px 20px 10px;
+    &:before {
+        // Remove the icon
+        content: "";
+    }
+}
+
+.form-description {
+    color: @theme-color-text-lighter;
+    font-style: italic;
+}
+
+.add-cors-host,
+.submit {
+    .btn;
+}
+
+.top_bar_sites_selector {
+    z-index: 143;
+    .sites_autocomplete .custom_select {
+        z-index: 139;
+    }
+}
+
+.sites_autocomplete {
+    input {
+        min-height: 0;
+    }
+}
+
+.ajaxError {
+    background: @theme-color-brand;
+    color: #fff;
+    border: 0px;
+    .border-radius(6px);
+    padding: 20px 25px;
+    text-align: center;
+    font-weight: normal;
+}
+
+.limitSelection {
+    > ul {
+        position: relative;
+        top: -6px;
+    }
+    > div {
+        .border-radius(2px);
+        background-color: @theme-color-background-base;
+        .font-default(10px, 12px);
+        background: none;
+        padding: 2px 14px 2px 1px;
+        span {
+            position: relative;
+            background: none;
+            color: @theme-color-text;
+            display: block;
+            padding-right: 3px;
+            &:after {
+                content: '';
+                border-left: 4px solid transparent;
+                border-right: 4px solid transparent;
+                border-top: 5px solid @theme-color-brand;
+                position: absolute;
+                top: 7px;
+                right: -9px;
+            }
+        }
+    }
+
+    span {
+        color: @theme-color-text;
+        font-weight: normal;
+    }
+
+    &.visible {
+        > div {
+            background-image: none;
+            > span:after {
+                content: '';
+                border-left: 4px solid transparent;
+                border-right: 4px solid transparent;
+                border-bottom: 5px solid @theme-color-brand;
+                border-top-color: transparent;
+                position: absolute;
+                top: 1px;
+                right: -9px;
+            }
+        }
+    }
+}
+
+//checkboxes and radio
+.form-radio, .form-checkbox {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+}
+.form-radio, .form-checkbox {
+    height: 15px;
+    width: 15px;
+    float: left;
+    cursor: pointer;
+    background: url('plugins/Morpheus/images/forms-sprite.png');
+    margin: 2px 5px 2px 0;
+}
+
+.form-radio.disabled {
+    background-position: 15px -16px;
+}
+
+.form-checkbox.disabled {
+    background-position: 15px 0px;
+}
+
+.form-radio + label, .form-checkbox + label {
+    float: left;
+    display: inline-block;
+
+    + .form-description {
+        margin-left: 1em;
+    }
+
+    + br, + .form-description + br {
+        clear: both;
+    }
+
+    + .form-radio, + .form-checkbox {
+        margin-left: 32px;
+    }
+}
+
+fieldset > .form-radio + label { // assumes <br/> after the label
+    display: inline-block;
+    margin-bottom: -.5em;
+}
+
+label {
+    &.hover,
+    &:hover {
+        border: 0px;
+    }
+}
+
+.form-radio {
+    background-position: 0 -16px;
+
+    &.form-hover {
+        background-position: -60px -16px;
+    }
+
+    &.checked {
+        background-position: -30px -16px;
+        &.form-hover {
+            background-position: -90px -16px;
+        }
+    }
+}
+
+.form-checkbox {
+    background-position: 0 0;
+
+    &.form-hover {
+        background-position: -60px 0;
+    }
+
+    &.checked {
+        background-position: -30px 0;
+        &.form-hover {
+            background-position: -90px 0;
+        }
+    }
+}
+
+.prettycheckbox a:focus, .prettyradio a:focus {
+    outline: 0 none;
+}
+.prettycheckbox label, .prettyradio label {
+    display: block;
+    float: left;
+    margin: 2px;
+    cursor: pointer;
+}
+.prettycheckbox a.disabled, .prettycheckbox label.disabled, .prettyradio a.disabled, .prettyradio label.disabled {
+    cursor: not-allowed;
+}
+.prettycheckbox a {
+    background-position: 0 0;
+}
+.prettycheckbox a:focus {
+    background-position: -15px 0;
+}
+.prettycheckbox a.checked {
+    background-position: -38px 0;
+}
+.prettycheckbox a.checked:focus {
+    background-position: -53px 0;
+}
+.prettycheckbox a.checked.disabled {
+    background-position: -99px 0;
+}
+.prettycheckbox a.disabled {
+    background-position: -76px 0;
+}
+.prettyradio a {
+    background-position: -129px 0;
+}
+.prettyradio a:focus {
+    background-position: -144px 0;
+}
+.prettyradio a.checked {
+    background-position: -167px 0;
+}
+.prettyradio a.checked:focus {
+    background-position: -182px 0;
+}
+.prettyradio a.checked.disabled {
+    background-position: -228px 0;
+}
+.prettyradio a.disabled {
+    background-position: -205px 0;
+}
+
+// specific form control overrides (for iCheck)
+.indented-radio-button {
+    margin: 0;
+}
+
+.listReports > li:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.listReports {
+    .form-radio + label, .form-checkbox + label {
+        width: 250px;
+    }
+}
+
+// Bootstrap input groups
+// --------------------------------------------------
+.input-group {
+    position: relative; // For dropdowns
+    display: table;
+    border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+
+    // Undo padding and float of grid classes
+    &[class*="col-"] {
+        float: none;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    input {
+        // Ensure that the input is always above the *appended* addon button for
+        // proper border colors.
+        position: relative;
+        z-index: 2;
+
+        // IE9 fubars the placeholder attribute in text inputs and the arrows on
+        // select elements in input groups. To fix it, we float the input. Details:
+        // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
+        float: left;
+
+        width: 100%;
+        margin-bottom: 0;
+    }
+}
+// Display as table-cell
+.input-group-addon,
+.input-group-btn,
+.input-group input {
+    display: table-cell;
+
+    &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+    }
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+    width: 1%;
+    white-space: nowrap;
+    vertical-align: middle; // Match the inputs
+}
+// Text input groups
+.input-group-addon {
+    padding: 6px 12px;
+    font-size: 14px;
+    font-weight: normal;
+    color: @theme-color-text-lighter;
+    line-height: 1;
+    text-align: center;
+    background-color: @theme-color-background-base;
+    border: 1px solid #d4d4d4;
+    border-radius: 2px;
+    // Nuke default margins from checkboxes and radios to vertically center within.
+    input[type="radio"],
+    input[type="checkbox"] {
+        margin-top: 0;
+    }
+}
+
+// Reset rounded corners
+.input-group input:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+.input-group-addon:first-child {
+    border-right: 0;
+}
+.input-group input:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child),
+.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+.input-group-addon:last-child {
+    border-left: 0;
+}
+// Button input groups
+.input-group-btn {
+    position: relative;
+    // Jankily prevent input button groups from wrapping with `white-space` and
+    // `font-size` in combination with `inline-block` on buttons.
+    font-size: 0;
+    white-space: nowrap;
+
+    // Negative margin for spacing, position for bringing hovered/focused/actived
+    // element above the siblings.
+    > .btn {
+        position: relative;
+        + .btn {
+            margin-left: -1px;
+        }
+        // Bring the "active" button to the front
+        &:hover,
+        &:focus,
+        &:active {
+            z-index: 2;
+        }
+    }
+
+    // Negative margin to only have a 1px border between the two
+    &:first-child {
+        > .btn,
+        > .btn-group {
+            margin-right: -1px;
+        }
+    }
+    &:last-child {
+        > .btn,
+        > .btn-group {
+            z-index: 2;
+            margin-left: -1px;
+        }
+    }
+}

www/analytics/plugins/Morpheus/stylesheets/general/_jqueryUI.less

@@ -0,0 +1,283 @@
+/* jQuery Tooltip */
+#tooltip h3 {
+  font-weight: normal;
+  font-size: .85em;
+  font-style: italic;
+  color: #162540;
+  margin: 0;
+  padding: 0;
+}
+
+#tooltip {
+  position: absolute;
+  z-index: 3000;
+  border: 1px solid #E4E2D7 /*#111*/;
+  padding: 5px 7px 5px 7px;
+  background-color: #F5F7FF;
+  opacity: 0.95;
+}
+
+/* jQuery Ajax */
+.ajaxError {
+  color: red;
+  text-align: center;
+  font-weight: bold;
+  width: 550px;
+  border: 3px solid red;
+  margin: 10px;
+  padding: 10px;
+  border-radius: 9px;
+}
+
+.ajaxSuccess {
+  font-size: 14px;
+  margin: 10px;
+  padding: 15px;
+  color: #301901;
+  display: inline-block;
+  background-color: #ffffe0;
+  border: 1px solid #e6db55;
+  border-radius: 3px;
+}
+
+/* extending the jquery UI css, for visitor Log popover */
+.ui-widget .dataTable {
+  font-size: 14px;
+}
+
+/* for inline help */
+.ui-widget {
+  text-align: justify;
+}
+
+.ui-inline-help {
+  display: inline-block;
+  background-color: #f4f8fa;
+  margin: 0px;
+  font-size: 12px;
+  padding: 20px;
+  color: #3a87ad;
+  opacity: 1.0;
+  border-left: 1px solid #bce8f1;
+  text-align: justify;
+  line-height: 1.3em;
+  max-width: 550px;
+}
+
+div.ui-state-highlight {
+  border-color: #545903;
+  background-color: #FFFFD6;
+}
+
+.ui-datepicker {
+  border: 1px solid #fff !important;
+  border-radius: 0 !important;
+  font-size: 11px !important;
+  padding: 0 !important;
+  width: 160px !important;
+}
+
+.ui-datepicker-header {
+  color: #fff !important;
+  border-radius: 0 !important;
+}
+
+.ui-datepicker select {
+  padding: 0;
+}
+
+.ui-datepicker-header .ui-icon-circle-triangle-w,
+.ui-datepicker-header .ui-icon-circle-triangle-e {
+  content: " \25BC";
+  font-size: 1px;
+  color: @theme-color-brand;
+  border-top: 4px solid rgba(0, 0, 0, 0);
+  border-bottom: 4px solid rgba(0, 0, 0, 0);
+  border-left: 5px solid @theme-color-brand;
+  margin-left: 7px;
+  display: inline-block;
+  vertical-align: sub;
+  background: none !important;
+  height: auto;
+  width: auto;
+}
+
+.ui-datepicker-header .ui-icon-circle-triangle-w {
+  border-left: 0px;
+  border-right: 5px solid @theme-color-brand;
+}
+
+.ui-datepicker-prev {
+  background: none !important;
+  left: 5px !important;
+  top: 3px !important;
+}
+.ui-datepicker-next {
+  background: none !important;
+  right: 2px !important;
+  top: 3px !important;
+}
+
+.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
+  margin-left: -5px;
+  margin-top: -5px;
+}
+
+.ui-datepicker .ui-datepicker-next-hover,
+.ui-datepicker .ui-datepicker-prev-hover {
+  background: none !important;
+  border-color: #f1f0eb !important;
+}
+
+.ui-datepicker table {
+  font-size: 11px !important;
+  margin: 0 !important;
+}
+
+.ui-datepicker th {
+  color: #887f71 !important;
+  font-weight: normal !important;
+  background: #f1f0eb !important;
+  padding: 3px 0 !important;
+}
+
+.ui-datepicker th.ui-datepicker-week-end {
+  background: #d4d0c7 !important;
+}
+
+.ui-datepicker td {
+  padding: 0 !important;
+}
+
+.ui-state-default {
+  border: 1px solid #f2f6f9 !important;
+  border-right: 0 !important;
+  background: @theme-color-background-base !important;
+  color: #000 !important;
+  text-align: center !important;
+}
+
+.ui-datepicker td.ui-datepicker-week-end .ui-state-default {
+  background: #f6f6f6 !important;
+}
+
+.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, td .ui-state-active, .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, .ui-datepicker td.ui-datepicker-week-end .ui-state-active, .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period {
+  border-color: #887f71 !important;
+  background: #887f71 !important;
+  color: #fff !important;
+  opacity: 1 !important;
+}
+
+.ui-datepicker td .ui-state-hover, .ui-datepicker td .ui-state-hover:hover, .ui-datepicker .ui-datepicker td.ui-datepicker-current-period a.ui-state-hover, .ui-datepicker td.ui-datepicker-week-end .ui-state-hover {
+  background: #e5e3e0 !important;
+  color: #000 !important;
+}
+
+.ui-datepicker td .ui-state-active.ui-state-hover {
+  color: #fff !important;
+}
+
+td.ui-datepicker-other-month.ui-state-hover {
+  background: #e5e3e0 !important;
+  color: #000 !important;
+  opacity: 1 !important;
+  border-style: none;
+  cursor: pointer !important;
+}
+
+.ui-datepicker select.ui-datepicker-month {
+  width: 46%;
+}
+.ui-datepicker select.ui-datepicker-year {
+  width: 54%;
+}
+.ui-datepicker-month:disabled {
+  border-color: #ccc !important;
+  background: #f5f3f0 !important;
+}
+
+/* Piwik jQuery UI Tooltips */
+
+.ui-tooltip {
+  position: absolute;
+  z-index: 2000;
+  text-align: left;
+  background: #f7f7f7;
+  color: @theme-color-text-light;
+  font-size: 12px;
+  font-weight: normal;
+  border: 1px solid #e4e5e4;
+  padding: 5px 10px 6px 10px;
+  border-radius: 4px;
+  -moz-box-shadow: 1px 1px 2px @theme-color-text-lighter;
+  -webkit-box-shadow: 1px 1px 2px @theme-color-text-lighter;
+  box-shadow: 1px 1px 2px @theme-color-text-lighter;
+  overflow: hidden;
+  max-width: 600px;
+  min-width: 50px;
+  line-height: 14px;
+  left: -28000px;
+  top: -28000px;
+  display: none;
+}
+
+.ui-tooltip h3 {
+  font-weight: bold;
+  color: #7E7363;
+}
+
+.ui-tooltip h3 {
+  font-size: 12px;
+  margin: 0 0 2px 0;
+  line-height: 14px;
+}
+
+body .ui-tooltip.small {
+  font-size: 11px;
+  padding: 3px 5px 3px 6px;
+}
+
+/* Popover */
+
+.ui-dialog .ui-widget-header {
+  background: none;
+  border: 0;
+  font: bold 18px @theme-fontFamily-base;
+  color: #7e7363;
+  clear: both;
+}
+
+.ui-dialog-titlebar-help {
+  position: absolute;
+  right: 33px;
+  top: 50%;
+  width: 16px;
+  margin: -8px 0 0 0;
+  padding: 0;
+  height: 16px;
+  background: url(plugins/Morpheus/images/help.png);
+  overflow: hidden;
+}
+
+.ui-dialog ~ .ui-dialog {
+  border: 1px solid #aaa;
+}
+
+.ui-dialog-titlebar .ui-icon-closethick {
+  font-family: 'piwik';
+  font-weight: bold;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  font-size:8px;
+  background-image: none !important;
+  text-indent: 0px !important;
+  opacity: 1 !important;
+  color:@theme-color-brand-contrast;
+
+  &:before{
+    content:"\e60a";
+  }
+}

www/analytics/plugins/Morpheus/stylesheets/general/_misc.less

@@ -0,0 +1,37 @@
+#topApiRef {
+    color: #95AECB;
+}
+
+.section-toggler-link {
+  font-size: .8em;
+  font-style: italic;
+  text-decoration: none;
+}
+
+.section-toggler-link:hover {
+  text-decoration: underline;
+}
+
+.metricEvolution {
+  display: inline-block;
+  font-size: 9pt;
+  opacity: 0.75;
+}
+
+.metricEvolution > .positive-evolution {
+  color: green;
+}
+
+.metricEvolution > .negative-evolution {
+  color: #e02a3b;
+}
+
+.reportsByDimensionView > .entityList {
+  float: left;
+  width: 220px;
+  min-height: 450px;
+}
+
+.dimensionCategory {
+  margin-top: 10px;
+}

www/analytics/plugins/Morpheus/stylesheets/general/_typography.less

@@ -0,0 +1,116 @@
+h1, h2, h3, h4, h5 {
+    font-family: @theme-fontFamily-base;
+}
+
+a {
+    color: @theme-color-link;
+    text-decoration: none;
+}
+
+h1 {
+    font-size: 30px;
+    margin-bottom: 20px;
+}
+h2 {
+    color: @theme-color-text;
+}
+
+.datatableRelatedReports {
+    color: @theme-color-text-lighter;
+}
+
+.tableIcon {
+    background: none;
+    padding: 2px 4px 4px 4px;
+    &.activeIcon {
+        background: @color-silver-l80;
+    }
+}
+
+.exportToFormatItems {
+    background: @color-silver-l80;
+    padding-top: 5px;
+    padding-bottom: 4px;
+    color: #000;
+
+    a {
+       color: @theme-color-brand !important;
+    }
+}
+
+.dataTableFooterActiveItem {
+    display: none;
+}
+
+#topApiRef {
+    color: @theme-color-text;
+}
+
+.tableConfiguration div.configItem span.action {
+    color: @theme-color-link;
+}
+
+.dataTablePages {
+    color: @theme-color-text;
+    font-weight: normal;
+    .font-default(10px, 12px);
+}
+
+.datatableRelatedReports {
+    color: #808080;
+    span {
+        color: @theme-color-text;
+        font-weight: normal;
+    }
+}
+.dataTableSearchPattern {
+    img {
+        top: 7px !important
+    }
+}
+
+.tagCloud span, .tagCloud span a {
+    color: @theme-color-link !important;
+}
+
+ul.widgetpreview-widgetlist, ul.widgetpreview-categorylist {
+    color: #4d4d4d;
+}
+
+.dataTableRowActions {
+    background: none !important;
+}
+
+a {
+    color: @theme-color-link;
+}
+
+.Piwik_Popover_Loading_Subject {
+    color: @theme-color-link !important;
+}
+
+.segmentFooterNote {
+    margin-top: -3px;
+    font-family: @theme-fontFamily-base !important;
+    a {
+        color: @theme-color-link !important;
+    }
+}
+
+body > a.ddmetric {
+    background-color: @color-gray-light !important;
+    border-color: @color-gray !important;
+    color: #000 !important;
+    font-family: @theme-fontFamily-base !important;
+}
+
+// Bootstrap classes (can be removed in the future)
+.text-left {
+    text-align: left;
+}
+.text-center {
+    text-align: center;
+}
+.text-right {
+    text-align: right;
+}

www/analytics/plugins/Morpheus/stylesheets/general/_utils.less

@@ -0,0 +1,30 @@
+/* br clear="all" deprecated */
+br.clearAll {
+  clear: both;
+  height: 0;
+  line-height: 0;
+  font-size: 0; /*for IE*/
+}
+
+br.clear,
+div.clear {
+  clear: both;
+  height: 0;
+  overflow: hidden;
+}
+
+/* IE < 9 will use this */
+body.old-ie .ie-hide {
+  display: none;
+}
+
+.centerLargeDiv {
+  width: 850px;
+  margin: auto;
+}
+
+.center {
+  margin: auto;
+  text-align: center;
+  padding-bottom: 10px;
+}

www/analytics/plugins/Morpheus/stylesheets/ieonly.css

@@ -0,0 +1,37 @@
+.ui-dialog.ui-widget-content {
+	z-index: 1003!important;
+}
+
+.ui-widget-overlay {
+    z-index: 1002!important;
+}
+
+.widgetContent {
+	width: 99.8%;
+	overflow: hidden;
+}
+
+#topLeftBar {
+    z-index: 300!important;
+}
+
+.submit {
+    height: 30px;
+}
+
+input[type=checkbox], input[type=radio] {
+    border: none;
+    background: transparent none;
+}
+
+.jqplot-seriespicker-popover p input {
+	width: 15px;
+	margin: 0;
+	padding: 0;
+}
+
+/* Don't override select style */
+select {
+    background: transparent;
+    padding-right: 12px;
+}

www/analytics/plugins/Morpheus/stylesheets/main.less

@@ -0,0 +1,788 @@
+@import "theme";
+@import "theme-advanced";
+@import "base/mixins";
+@import "general/_typography";
+@import "general/_forms";
+@import "general/_admin";
+@import "ui/_components";
+@import "ui/_popups";
+@import "ui/_tooltip";
+@import "ui/_charts";
+@import "ui/_map";
+
+body {
+    background: @theme-color-background-base;
+    font-family: @theme-fontFamily-base;
+}
+
+h2 {
+    font-weight: normal;
+    border-bottom: 1px solid @color-gray;
+    margin: 15px -15px 20px 0;
+    font-size: 24px;
+    width: 100%;
+    a, a:hover {
+        text-decoration: none;
+        color: @color-black-piwik;
+    }
+}
+h3 {
+    color: @theme-color-text;
+    .font-default(18px, 24px);
+    font-weight: normal;
+}
+a:hover {
+    text-decoration:underline;
+}
+
+#content {
+    p {
+        margin-left: 0px;
+        margin-right: 0px;
+        .font-default(13px, 18px);
+    }
+}
+
+#leftcolumn {
+    width: 49%;
+    margin-right: 1%;
+}
+
+#rightcolumn {
+    float: left;
+    width: 50%;
+}
+
+.entityTable {
+    .border-radius(0px)!important;
+    border: 1px solid @color-silver-l90 !important;
+    tr {
+        &.first {
+            th {
+                border-left: 0px !important;
+            }
+        }
+    }
+}
+
+table.entityTable tr td a:hover {
+    text-decoration: underline !important;
+}
+
+#root {
+    margin: 0 0 100px 0;
+    padding: 0;
+    .widgetize {
+        width: auto;
+    }
+
+}
+
+.dashboardSettings {
+  border: 1px solid @theme-color-background-lowContrast;
+  background: @theme-color-background-base;
+  z-index: 10;
+  .border-radius(0px);
+  > span {
+    position: relative;
+    background: none;
+    text-transform: uppercase;
+    &:after {
+      content: '';
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 5px solid @color-silver-l20;
+      position: absolute;
+      top: 3px;
+      right: 7px;
+    }
+  }
+
+  ul.submenu {
+    margin-left: 0;
+    padding-right: 0;
+    li {
+      list-style-type: none;
+      > div {
+        .font-default(11px, 14px);
+        color: @theme-color-text;
+      }
+      text-transform: none;
+      color: @color-silver-l20;
+      &.widgetpreview-choosen {
+        color: @theme-color-text;
+        font-weight: normal;
+        background: @color-silver-l95;
+        position: relative;
+        &:after {
+          position: absolute;
+          content: '';
+          top: 6px;
+          right: 10px;
+          border-top: 4px solid transparent;
+          border-bottom: 4px solid transparent;
+          border-left: 5px solid @theme-color-brand;
+        }
+      }
+    }
+  }
+}
+
+.segmentEditorPanel {
+  border: 1px solid @theme-color-background-lowContrast;
+  background: @theme-color-background-base;
+  .border-radius(0px);
+  .dropdown-body {
+    background:@theme-color-background-base;
+    padding: 8px 19px 0;
+    .border-radius(0px);
+    border-top-width: 0px;
+  }
+  &:hover .dropdown-body {
+    background:@theme-color-background-base;
+  }
+  .segmentationContainer {
+    > span > strong {
+      color: @theme-color-brand;
+    }
+    .submenu {
+      li {
+        font-weight: normal;
+        .font-default(12px, 14px) !important;
+        color: @color-silver-l30;
+      }
+
+      ul li:hover  {
+        color: @theme-color-text;
+      }
+
+    }
+  }
+
+  .segmentListContainer {
+    .segmentationContainer {
+      .submenu {
+          li {
+          .font-default(13px, 16px);
+          color: @theme-color-text-light;
+          &:hover {
+              border-color: @color-silver-l80 !important;
+              background:@theme-color-background-base !important;
+              .border-radius(0px);
+          }
+          }
+      }
+    }
+  }
+}
+
+.segmentEditorPanel:hover,
+.dashboardSettings:hover {
+  background: @theme-color-background-base;
+  border: 1px solid @theme-color-background-lowContrast;
+}
+
+/* Iframed Embed dashboard style */
+#standalone {
+
+  #Dashboard {
+    position: relative;
+
+    &:hover ul {
+      background-color: @theme-color-background-base;
+    }
+    ul {
+      padding: 0 19px;
+      color: @theme-color-text-light;
+      min-height: 33px;
+      line-height:0.5em;
+      .border-radius(0px);
+      border: 0;
+      background-color: @theme-color-background-base;
+    }
+    > ul > li {
+      white-space: nowrap;
+      margin-right: 0px;
+      a {
+        padding-left: 0;
+      }
+      &.sfActive {
+        a {
+          color: @theme-color-menu-contrast-textActive;
+        }
+      }
+    }
+    > ul > li:hover,
+    > ul > li:hover a {
+      color: @theme-color-brand;
+    }
+  }
+}
+
+.rss-title {
+    color: @theme-color-link !important;
+    font-weight: normal;
+    .font-default(15px, 18px);
+    text-decoration: none;
+    display: block;
+    width: 100%;
+    margin-top: 14px;
+}
+
+.rss li:first-child .rss-title {
+  margin-top: 0;
+}
+
+.rss-date {
+    display: block;
+    color: @color-silver-l60;
+    .font-default(11px, 26px);
+}
+
+.rss-description {
+    p {
+        margin: 0;
+        color: @theme-color-text-lighter;
+        .font-default(13px, 18px);
+    }
+}
+
+table.dataTable {
+    thead {
+        tr {
+            th {
+                background: @color-silver-l98;
+                text-transform: uppercase;
+                color: @theme-color-text;
+                .font-default(11px, 12px);
+                padding-top: 12px;
+                padding-bottom: 12px;
+                vertical-align: middle;
+
+                &:not(.first) {
+                  text-align: right;
+                  padding-left: 28px;
+                  padding-right: 12px;
+                }
+
+                &.first + th {
+                  // first column after label should have a bit less padding
+                  padding-left: 13px;
+                }
+              
+                #thDIV {
+                 display: inline; 
+                }
+
+                &.columnSorted {
+                  .sortIcon {
+                    display: inline-block;
+                    position: absolute;
+                    margin: 0px;
+                    height: 12px;
+                    margin-top: -1px;
+                    margin-left: -14px;
+
+                    &.asc {
+                      margin-top: -7px;
+                    }
+
+                  }
+
+                  &.first {
+                    .sortIcon {
+                      margin-top: -1px;
+                      margin-left: 4px;
+                      &.asc {
+                        margin-top: -6px;
+                      }
+                    }
+                  }
+
+                  .sortIcon.asc:after {
+                    content: " \25B2";
+                    border-bottom: 5px solid @theme-color-brand;
+                    border-top: 0px;
+                  }
+
+                  .sortIcon:after {
+                    content: " \25BC";
+                    font-size: 1px;
+                    color: @theme-color-brand;
+                    border-left: 4px solid rgba(0, 0, 0, 0);
+                    border-right: 4px solid rgba(0, 0, 0, 0);
+                    border-top: 5px solid @theme-color-brand;
+                  }
+
+                }
+            }
+        }
+    }
+    tr {
+
+        td {
+            border-bottom: 1px solid @color-silver-l95 !important;
+            border-color: @color-silver-l95 !important;
+            color: @theme-color-text;
+            background: @theme-color-background-base;
+
+            &:not(.value) {
+              .font-default(13px, 16px);
+            }
+
+            .label {
+              line-height: normal;
+            }
+
+            .value {
+              .font-default(13px, 16px);
+            }
+
+            &:first-child {
+                border-left: 0px;
+            }
+
+            &.label + td.column {
+              // first column after label should have a bit less padding
+              padding-left: 10px;
+            }
+
+            &.label .label {
+              text-align: left;
+            }
+
+            &.column:not(.label) {
+              padding-left: 28px;
+              padding-right: 12px;
+              text-align: right;
+            }
+
+            a {
+                text-decoration: none !important;
+                color: @theme-color-link;
+                width: inherit;
+
+              &.withIcon {
+                  color: @theme-color-text;
+              }
+            }
+
+            div.label,
+            a.label,
+            span.label {
+              word-break: break-all;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              width: inherit;
+              display: inline-block;
+            }
+        }
+
+      &:hover {
+        td:not(.cellSubDataTable) {
+          background-color: @color-silver-l95;
+        }
+
+        .cellSubDataTable td {
+          background: @theme-color-background-base;
+        }
+        .cellSubDataTable tr:hover td {
+          background-color: @color-silver-l95;
+        }
+      }
+    }
+
+    &.entityTable tr {
+        td  {
+            background-color: @theme-color-background-base !important;
+        }
+        &.inactive-plugin td,
+        &:hover td {
+            background-color: @color-silver-l95 !important;
+        }
+    }
+
+    &.dataTableVizVisitorLog {
+
+    }
+}
+
+div.dataTableVizHtmlTable:not(.dataTableActions), div.dataTableVizAllColumns, div.dataTableVizGoals {
+  tr.subDataTable > td:first-child:before {
+    display: inline-block;
+    float: left;
+    top: 0;
+    width: 12px;
+    height: 12px;
+    margin-left:-1px;
+    margin-top:4px;
+    margin-right:8px;
+    content: '';
+  }
+
+  tr.subDataTable:not(.expanded) > td:first-child:before {
+    background-image: url(plugins/Morpheus/images/plus.png);
+  }
+
+  tr.subDataTable.expanded > td:first-child:before {
+    background-image: url(plugins/Morpheus/images/minus.png);
+  }
+}
+
+table.dataTable .dataTableRowActions {
+  margin-top: -7px;
+}
+
+.visitsLiveFooter {
+    padding-left: 10px;
+    a.rightLink {
+        .font-default(13px, 16px);
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-right: 10px;
+    }
+}
+
+.dataTableFooterIcons {
+  padding: 6px 12px 0px;
+  border-top: 1px solid @color-silver-l90;
+}
+
+.UserCountryMap-btn-zoom {
+  padding-left: 0px;
+}
+
+div.sparkline {
+    display: block;
+    border-bottom: 0;
+    margin-bottom: 10px;
+    &.linked {
+        border-bottom: 1px solid transparent;
+        &:hover {
+            cursor: pointer;
+            border-bottom: 1px dashed #c3c3c3;
+        }
+    }
+}
+
+.widgetpreview-base li.widgetpreview-choosen {
+    background: @color-silver-l95;
+    position: relative;
+    color: @theme-color-text;
+    font-weight: normal;
+    text-transform: none;
+    &:after {
+        position: absolute;
+        content: '';
+        top: 6px;
+        right: 10px;
+        border-top: 4px solid transparent;
+        border-bottom: 4px solid transparent;
+        border-left: 5px solid @theme-color-brand;
+    }
+}
+
+.dataTableNext, .dataTablePrevious {
+    color: @theme-color-link;
+    text-transform: uppercase;
+    .font-default(10px, 12px);
+}
+
+.UserCountryMap-info-btn {
+    z-index: 1;
+}
+
+.dataTableSearchPattern {
+    background: none;
+    height: auto;
+    input {
+        color: @theme-color-text !important;
+        .border-radius(0px);
+        margin-left: 0;
+        padding: 8px 10px;
+        min-height: 30px !important;
+        .box-sizing(border-box);
+        border: 1px solid @color-silver-l80;
+        .opacity(1);
+
+        &[type="text"] {
+            width: 40% !important;
+            padding-right: 30px !important;
+            padding-bottom: 2px !important;
+            &:focus {
+                border-color: @color-silver-l60;
+            }
+        }
+
+        &[type="submit"] {
+            margin: 0;
+            float: none;
+            .font-default(10px, 12px) !important;
+            padding: 0 !important;
+            position: relative;
+            right: 33px;
+            background: no-repeat 0 7px url('plugins/Morpheus/images/search_ico.png') !important;
+            text-indent: 999999px;
+            width: 17px !important;
+            -webkit-box-shadow: none;
+            -moz-box-shadow:    none;
+            box-shadow:         none;
+        }
+    }
+}
+
+.dataTable .searchReset>img {
+    left: -45px;
+}
+
+.visitor-profile a {
+    color: @theme-color-link;
+    font-weight: normal;
+}
+
+.visitor-profile-info {
+    box-shadow: none !important;
+}
+
+.visitor-profile-latest-visit-loc {
+    display: inline-block;
+    position: absolute;
+    right: 4px;
+    top: -19px;
+}
+
+.visitor-profile-date {
+    padding-top: 3px;
+}
+
+.visitor-profile-more-info > a {
+    color: @theme-color-link;
+    .font-default(12px, 16px);
+}
+
+.visitor-profile-more-info {
+    margin: 5px 0 15px 0;
+}
+
+.visitor-profile-visits-container {
+    padding: 0;
+    margin: 0;
+    li {
+        margin: 0 !important;
+        background: @color-silver-l95;
+        padding: 5px 10px !important;
+        border-bottom: 1px solid @color-silver-l80;
+        > div {
+            border: 0px !important;
+            margin: 0 !important;
+        }
+
+        &:first-child {
+            border-top: 1px solid @color-silver-l80;
+        }
+    }
+
+    ol.visitor-profile-visits {
+        > li {
+            padding: 0 0 0 !important;
+            span {
+                color: @theme-color-text-lighter;
+                .font-default(13px, 18px);
+                font-weight: normal;
+                margin-right: 20px;
+            }
+
+            h2 {
+                margin-left: 20px;
+                margin-bottom: 12px;
+            }
+
+            ol {
+                background: @theme-color-background-base !important;
+                border-top: 0 !important;
+                li {
+                    background: @theme-color-background-base !important;
+                    .font-default(11px, 19px);
+                    font-weight: normal;
+                    color: @theme-color-text-lighter;
+                    &:last-child {
+                        border-bottom: 0px !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.visitor-profile-visit-title-row {
+  padding-top:10px;
+
+  &:hover {
+    background-color: @color-silver-l90;
+  }
+}
+
+.widget .visitor-profile .visitor-profile-info > div > div {
+    min-width: 100% !important;
+}
+
+.visitor-profile {
+    background: none;
+    border: 0;
+    .border-radius(0px);
+    .visitor-profile-info {
+        .border-radius(0px);
+        border: 0px;
+
+        > div {
+            border: 0px !important;
+        }
+
+        .visitor-profile-image-frame {
+            background: none !important;
+        }
+        .visitor-profile-avatar {
+            > div > img {
+                display: none;
+            }
+        }
+    }
+
+    h1 {
+        .font-default(15px, 20px);
+        font-weight: normal;
+        color: @theme-color-text;
+    }
+
+    h2 {
+        .font-default(13px, 18px);
+        color: @theme-color-text;
+    }
+
+    p {
+        margin-left: 0;
+        margin-right: 0;
+        .font-default(13px, 18px);
+        color: @color-silver-l60;
+        strong {
+            .font-default(13px, 18px);
+            color: @theme-color-text;
+            font-weight: normal;
+        }
+        span {
+            .font-default(13px, 18px);
+        }
+    }
+
+    .visitor-profile-avatar {
+       ul {
+        width: 100% !important;
+           li {
+                display: block;
+                border: 0px;
+                &:first-child {
+                    border: 0px !important;
+                }
+                span {
+                    color: @theme-color-text-lighter;
+                    .font-default(13px, 18px);
+                    padding-left: 0;
+                }
+
+                strong {
+                    color: @theme-color-text;
+                    .font-default(13px, 18px);
+                    font-weight: normal;
+                }
+
+                .visitor-profile-os,
+                .visitor-profile-browser {
+                    margin-left: 0;
+                    img {
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+    }
+
+    .visitor-profile-avatar > div:nth-child(2n) {
+        width: 376px;
+    }
+
+    .visitor-profile-latest-visit {
+        .visitor-profile-latest-visit-column {
+            display: inline-block;
+            margin-left: 0;
+        }
+
+        .visitor-profile-latest-visit-column:first-child {
+            width: 50%;
+            margin-right:-4px;
+        }
+
+        .visitor-profile-latest-visit-column:last-child {
+            width: 50%;
+            margin-right:-4px;
+        }
+    }
+}
+
+.annotationView {
+    .font-default(10px, 12px);
+    text-transform: uppercase;
+    color: @theme-color-text;
+}
+
+.datatableFooterMessage {
+    .font-default(13px, 18px);
+    color: @color-silver;
+    font-weight: normal;
+}
+.multisites_asc,
+.multisites_desc {
+    background-repeat: no-repeat;
+    height: 6px;
+}
+
+.dataTableFooterIcons, .dataTableFooterIcons a {
+    color: @theme-color-link;
+}
+
+#visitsLive .datetime {
+    background: @color-silver-l95;
+    border-top: 0;
+}
+
+.metricValueBlock input {
+    padding: 5px !important;
+}
+
+#piwik-promo-share {
+    border: 0px;
+    background: @theme-color-background-tinyContrast;
+    .font-default(10px, 16px);
+}
+
+#token_auth {
+    background: @color-silver-l95;
+}
+
+tr:hover #token_auth {
+  background: #FFFFF7;
+}
+
+#header_message .dropdown a,
+#header_message #updateCheckLinkContainer:hover {
+    text-decoration: underline;
+}
+
+#header_message #updateCheckLinkContainer:hover {
+    cursor: pointer;
+}
+
+#multisites table.dataTable {
+    tfoot tr:hover td {
+        background: @theme-color-background-base;
+    }
+}

www/analytics/plugins/Morpheus/stylesheets/simple_structure.css

@@ -0,0 +1,179 @@
+/* Most of the code here can be removed once we switch to Bootstrap */
+body {
+	font-family: Verdana, sans-serif;
+}
+body#simple  {
+    background: #fff;
+}
+#simple .logo {
+    color: #888;
+    text-align: center;
+    font-size: 12px;
+    margin-top: 30px;
+}
+#simple .logo a {
+	color: #888;
+	text-decoration: none;
+}
+#simple .box {
+    border-radius: 2px;	
+    border: solid 1px #ccc;
+    max-width: 780px;
+    margin: 30px auto 60px auto;
+    overflow: hidden;
+    box-shadow: 0 1px 6px 0 #ccc;
+}
+
+#simple .box .header {
+    background-color: #f0f0f0;
+	padding: 40px 80px;
+    text-align: center;
+}
+#simple .box .header h1 {
+	font-size: 30px;
+	font-weight: normal;
+	margin: 0;
+}
+#simple .box .header p {
+	font-size: 13px;
+	margin-top: 10px;
+	padding: 0;
+}
+
+#simple .box .content {
+	margin: 1em 2em;
+	text-align: center;
+	padding: 30px 50px;
+	font-size: 14px;
+}
+#simple .box .content.text-left {
+	text-align: left;
+}
+#simple .box .content ul {
+	text-align: left;
+	list-style: disc;
+	width: 60%;
+	margin: 0 auto;
+}
+#simple .box .content.text-left ul {
+	width: 100%;
+}
+#simple .box .content form {
+    margin: 10px 0;
+    min-height: 0;
+}
+#simple .box .content .btn {
+	float: none;
+	margin: 0;
+}
+#simple .box .content h2 {
+	font-weight: normal;
+	font-size: 19px;
+	margin-bottom: 25px;
+	margin-top: 30px;
+}
+#simple .box .content h2:first-child {
+	margin-top: 0;
+}
+
+#simple .box .footer {
+    background-color: #f0f0f0;
+    padding: 15px;
+    text-align: center;
+}
+#simple .box .footer a {
+    text-decoration: none;
+}
+
+/* Old style below */
+
+#contentsimple {
+	background: #fff;
+	color: #000;
+	font-family: Arial, Georgia, "Times New Roman", Times, serif;
+	padding: 1em 2em;
+	width:780px;
+	margin: 30px auto auto;
+    border-radius: 12px;
+    display: table; /* Contains floating children */
+}
+#h1 {
+	color: #006;
+	font-size: 45px;
+	font-weight: lighter;
+}
+#subh1 {
+	color: #444444;
+    font-size: 17pt;
+    margin-left: 15px;
+    vertical-align: bottom;
+}
+
+#subh1 a {
+	color: #444;
+    text-decoration:none;
+}
+
+#title img{
+	vertical-align:bottom;
+}
+#title {
+	padding-bottom:15px;
+	border-bottom:1px solid #F0F0F0;
+	font:42px Georgia, serif;
+}
+p, dt {
+	line-height: 1.5;
+	padding-bottom: 1em;
+}
+#logo { margin-bottom: 2em; }
+.submit {
+	font-size:18pt;
+	padding: 5px 7px 7px;
+	border: 1px solid #a3a3a3;
+	border-radius: 3px;
+	color: #246;
+	background: #e5e5e5;
+	text-decoration: none;
+}
+.submit:hover {
+	color: #d54e21;
+	border-color: #535353;
+}
+.success {
+	padding-bottom:15px;
+	color:#1F7F4A;
+	font-size:25pt;
+}
+.warning {
+	font-size:130%;
+	font-weight:bold;
+	border: 1px solid #ff5502;
+}
+.warning, .warning a {
+	color:#ff5502;
+}
+.error {
+	font-weight:bold;
+	font-size:130%;
+	border: 1px solid red;
+	padding:20px;
+}
+.error, .error a {
+	color:#f00;
+}
+.error img, .success img, .warning img {
+	border:0;
+	vertical-align:bottom;
+}
+.warning, .error {
+    border-radius:4px;
+	padding:15px;
+}
+.warning.normalFontSize {
+	font-size: 100%;
+	padding: 10px;
+}
+.indented-radio-button {
+  margin-left:20px;
+}

www/analytics/plugins/Morpheus/stylesheets/theme-advanced.less

@@ -0,0 +1,13 @@
+@theme-color-background-base:          #fff;
+@theme-color-background-tinyContrast:  #f2f2f2;
+@theme-color-background-lowContrast:   @color-silver-l85;
+@theme-color-background-contrast:      #5F5A60;
+@theme-color-background-highContrast:  #202020;
+
+@theme-color-border: @color-silver-l80;
+
+@theme-color-code: #F3F3F3;
+@theme-color-code-background: #4D4D4D;
+
+@theme-color-widget-background: @theme-color-background-base;
+@theme-color-widget-border:     @color-silver-l85;

www/analytics/plugins/Morpheus/stylesheets/theme.less

@@ -1,910 +1,21 @@
-@import "colors.less";
-@import "mixins.less";
-@import "typography.less";
-@import "forms.less";
-@import "components.less";
-@import "popups.less";
-@import "admin.less";
-@import "tooltip.less";
-@import "charts.less";
-@import "map.less";
-
-@root: "/plugins/Morpheus";
-
-body {
-    font-family: Verdana, sans-serif;
-}
-
-.pageWrap {
-    padding-left: 10px;
-    padding-right: 10px;
-    border: 0px;
-}
-
-#content {
-    p {
-        margin-left: 0px;
-        margin-right: 0px;
-        .font-default(13px, 18px);
-    }
-}
-
-#leftcolumn {
-    width: 49%;
-    margin-right: 1%;
-}
-
-#rightcolumn {
-    float: left;
-    width: 50%;
-}
-
-#languageSelection .ui-autocomplete-input {
-    position: relative;
-    &:after {
-        content: '';
-        position: absolute;
-        top: 5px;
-        right: -13px;
-        border-left: 4px solid transparent;
-        border-right: 4px solid transparent;
-        border-top: 5px solid @brand-blue;
-    }
-}
-
-#languageSelect {
-    border: 1px solid @silver-80 !important;
-    li {
-        a {
-            color: @brand-black !important;
-            &:hover {
-                background: @silver-80 !important;
-                color: @brand-black !important;
-            }
-        }
-    }
-}
-
-.entityTable {
-    .border-radius(0px)!important;
-    border:1px solid @silver-80!important;
-    tr {
-        &.first {
-            th {
-                border-left: 0px !important;
-            }
-        }
-    }
-}
-
-table.entityTable tr td a:hover {
-    text-decoration: underline !important;
-}
-
-#root {
-    margin: 0;
-    padding: 0;
-
-    #header {
-        margin: 0 15px;
-        #topBars {
-            a {
-                color: @brand-blue;
-                text-decoration: none;
-            }
-        }
-
-        .topBarElem {
-          padding: 0 3px;
-          color: @silver-40;
-            strong {
-                font-weight: normal;
-                color: @brand-black;
-            }
-        }
-    }
-
-    .top_bar_sites_selector {
-        margin-right: 10px;
-        label {
-            padding-top: 9px;
-            .font-default(13px, 15px);
-        }
-    }
-
-    .Menu--dashboard {
-        border-top: 1px solid @silver-80;
-        border-bottom: 1px solid @silver-80;
-        > .Menu-tabList {
-            margin: 0;
-            a {
-               .font-default(18px, 22px);
-               padding: 14px 28px 11px;
-            }
-            > li {
-                .border-radius(0px);
-                border: 0;
-                background: none;
-                border-right: 1px solid @silver-80;
-                margin-bottom: -1px;
-                border-bottom: 1px solid #ccc;
-
-                > ul {
-                    li {
-                        a {
-                            color: @silver-40;
-                            .font-default(15px, 18px);
-                            padding: 14px 22px 11px;
-                        }
-
-                        &.sfHover {
-                            a {
-                                color: @brand-black;
-                                font-weight: normal;
-                            }
-               
-                        }
-                    }
-                }
-
-                &.sfActive {
-                    > a {
-                        color: @brand-black;
-                        text-decoration: none;
-                        position: relative;
-                        &:after {
-                            content: '';
-                            position: absolute;
-                            bottom: -4px;
-                            left: 0;
-                            width: 100%;
-                            height: 4px;
-                            background: @brand-red;
-                        }
-                    }
-
-                }
-
-                &.sfHover {
-                    > a {
-                        border: 0;
-                        text-decoration: none;
-                        color: @brand-black;
-                    }
-                }
-            }
-        }
-    }
-
-    .nav_sep {
-        background: @silver-95;
-        min-height: 57px;
-        .border-radius(0px);
-        border-color: @silver-80 !important;
-        border-top: 0px !important;
-        border-right: 0px !important;
-        border-left: 0px !important;
-        .box-shadow-1(~"inset 0 2px 4px #d8d8d8");
-    }
-
-    .widgetize {
-        width: auto;
-    }
-}
-
-.dashboardSettings {
-  border: 1px solid @silver-80;
-  background: #fff;
-  z-index: 10;
-  padding: 8px 10px 8px 10px;
-  .border-radius(0px);
-  .font-default(10px, 12px);
-  > span {
-    position: relative;
-    background: none;
-    text-transform: uppercase;
-    &:after {
-      content: '';
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 5px solid @brand-red;
-      position: absolute;
-      top: 3px;
-      right: 0;
-    }
-  }
-
-  ul.submenu {
-    margin-left: 0;
-    li {
-      list-style-type: none;
-      > div {
-        .font-default(11px, 14px);
-        color: @brand-black;
-      }
-      text-transform: none;
-      color: @silver-20;
-      &.widgetpreview-choosen {
-        color: @brand-black;
-        font-weight: normal;
-        background: @silver-95;
-        position: relative;
-        &:after {
-          position: absolute;
-          content: '';
-          top: 6px;
-          right: 10px;
-          border-top: 4px solid transparent;
-          border-bottom: 4px solid transparent;
-          border-left: 5px solid @brand-red;
-        }
-      }
-    }
-  }
-}
-
-.segmentEditorPanel {
-  border: 1px solid @silver-80;
-  background: #fff;
-  padding: 8px 10px 8px 10px;
-  .border-radius(0px);
-  .segmentationTitle {
-    background: none;
-    text-transform: uppercase;
-    .font-default(10px, 12px);
-    position: relative;
-    &:after {
-      content: '';
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 5px solid @brand-red;
-      position: absolute;
-      top: 3px;
-      right: 0;
-    }
-  }
-  .dropdown-body {
-    background:#fff;
-    padding:0 10px;
-    .border-radius(0px);
-    border: 1px solid @silver-80;
-    border-top-width: 0px;
-  }
-  &:hover .dropdown-body {
-    background:#fff;
-    border-color: @silver-80;
-  }
-  .segmentationContainer {
-    > span > strong {
-      color: @brand-red;
-    }
-    .submenu {
-      li {
-        font-weight: normal;
-        .font-default(12px, 14px) !important;
-        color: @silver-30;
-      }
-
-      ul li:hover  {
-        color: @brand-black;
-      }
-
-    }
-
-    .add_new_segment {
-      .submit();
-      .font-default(12px, 16px) !important;
-      width: auto;
-      padding: 7px 10px !important;
-    }
-  }
-
-  .segmentListContainer {
-    .segmentationContainer {
-      .submenu {
-          li {
-          .font-default(13px, 16px);
-          color: #444;
-          &:hover {
-              border-color: @silver-80 !important;
-              background: #fff !important;
-              .border-radius(0px);
-          }
-          }
-      }
-    }
-  }
-}
-
-.segmentEditorPanel:hover, .dashboardSettings:hover {
-  background: #fff;
-  border: 1px solid @silver-80;
-}
-
-/* Iframed Embed dashboard style */
-#standalone {
-
-  #Dashboard:hover ul {
-    background: #f1f0eb;
-    border-color: #a9a399;
-  }
-
-  #Dashboard {
-    ul {
-
-      background: #fff;
-      border: 1px solid @silver-80;
-      padding: 8px 10px 8px 10px;
-      color: #444;
-      height: 12px;
-      line-height:0.5em;
-      .border-radius(0px);
-    }
-    > ul > li:hover,
-    > ul > li:hover a,
-    > ul > li.sfHover,
-    > ul > li.sfHover a {
-      color: @brand-red;
-    }
-    > ul > li.sfHover,
-    > ul > li.sfHover a {
-      font-weight: normal;
-    }
-  }
-}
-
-.rss-title {
-    color: @brand-blue !important;
-    font-weight: normal;
-    .font-default(15px, 18px);
-    text-decoration: none;
-    display: block;
-    width: 100%;
-}
-
-.rss-date {
-    display: block;
-    color: @silver-60;
-    .font-default(11px, 14px);
-    margin-top: 15px;
-}
-
-.rss-description {
-    p {
-        margin: 0;
-        color: @silver-40;
-        .font-default(13px, 18px);
-    }
-}
-
-table.dataTable {
-    thead {
-        tr {
-            th {
-                background: #fff;
-                text-transform: uppercase;
-                color: @brand-black;
-                .font-default(10px, 12px);
-                padding-top: 12px;
-                padding-bottom: 12px;
-                border-bottom: 1px solid @silver-85;
-                &.columnSorted {
-                    background:  @silver-95 !important;
-                    .sortIcon {
-                        margin-top: -1px;
-                    }
-                }
-            }
-        }
-    }
-    tr {
-        td {
-            border-color: @silver-85 !important;
-            color: @brand-black;
-            background: @silver-95;
-
-            &:not(.value) {
-              .font-default(13px, 16px);
-            }
-
-            .label {
-              line-height: normal;
-            }
-
-            .value {
-              .font-default(13px, 16px);
-            }
-
-            &:first-child {
-                border-left: 0px;
-            }
-
-            &.labelodd,
-            &.columnodd {
-                background-color: @silver-95 !important;
-            }
-
-            a {
-                text-decoration: none !important;
-                color: @brand-blue;
-                width: inherit;
-            }
-
-            div.label,
-            a.label,
-            span.label {
-              word-break: break-all;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              width: inherit;
-              display: inline-block;
-            }
-        }
-        & td.columneven,
-        & td.labeleven,
-        &:hover > td.labeleven,
-        &:hover > td.columneven,
-        &.subDataTable:hover > td.labeleven,
-        &.subDataTable:hover > td.columneven,
-        td.cellSubDataTable {
-          background-color: #fff !important;
-        }
-    }
-  
-    &.entityTable tr {
-        td  {
-            background-color: #fff !important;
-        }
-        &.inactive-plugin td,
-        &:hover td {
-            background-color: @silver-95 !important;
-        }
-    }
-
-    &.dataTableVizVisitorLog {
-
-    }
-}
-
-table.dataTable tr.subDataTable:hover > td, table.dataTable tr.subDataTable:hover > td .dataTableRowActions {
-    background-color: #d9d9d9;
-}
-
-table.dataTable .dataTableRowActions {
-  margin-top: -8px;
-}
-
-.visitsLiveFooter {
-    padding-left: 10px;
-    a.rightLink {
-        .font-default(13px, 16px);
-        margin-top: 10px;
-        margin-bottom: 10px;
-        padding-right: 10px;
-    }
-}
-
-.dataTableFooterIcons {
-  padding: 6px 8px;
-  border-top: 1px solid @silver-80;
-}
-
-#dashboard .dataTableFooterIcons {
-    padding: 6px 8px 0px;
-}
-
-div.sparkline {
-    display: block;
-    width: 100%;
-    border-bottom: 0;
-    margin-bottom: 10px;
-    &:hover {
-        border-bottom: 0;
-    }
-}
-
-.widgetpreview-base li.widgetpreview-choosen {
-    background: @silver-95;
-    position: relative;
-    color: @brand-black;
-    font-weight: normal;
-    text-transform: none;
-    &:after {
-        position: absolute;
-        content: '';
-        top: 6px;
-        right: 10px;
-        border-top: 4px solid transparent;
-        border-bottom: 4px solid transparent;
-        border-left: 5px solid @brand-red;
-    }
-}
-
-.dataTableNext, .dataTablePrevious {
-    color: @brand-blue;
-    text-transform: uppercase;
-    .font-default(10px, 12px);
-}
-
-.UserCountryMap-info-btn {
-    z-index: 1;
-}
-
-
-.widget {
-    border: 1px solid @silver-80;
-    .border-radius();
-    .font-default(13px, 18px);
-    .box-shadow-1(0 1px 1px rgba(204,204,204,.5));
-
-    h2 {
-        font-weight: normal;
-    }
-
-    &.default {
-        margin-left: 0;
-        margin-right: 0;
-        .widgetTop {
-            cursor: default !important;
-        }
-    }
-
-    .widgetTop {
-        background: @silver-95;
-        border-bottom: 1px solid @silver-80;
-        .widgetName {
-            .font-default(15px, 18px);
-            color: @brand-black;
-            text-shadow: none;
-            padding: 15px 15px 10px;
-        }
-    }
-
-    .widgetText {
-        padding: 10px;
-    }
-
-    .pk-emptyDataTable {
-        .font-default(12px, 16px);
-        text-transform: none;
-    }
-
-    .dataTableFooterIcons {
-        border-top: 1px solid @silver-80;
-    }
-}
-
-.dataTableSearchPattern {
-    background: none;
-    height: auto;
-    input {
-        color: @brand-black !important;
-        .border-radius(0px);
-        border: 0px;
-        margin-left: 0;
-        padding: 8px 10px;  
-        min-height: 30px;  
-        .box-sizing(border-box);
-        border: 1px solid @silver-80;
-        .opacity(1);
-
-        &[type="text"] {
-            width: 40% !important;
-            padding-right: 4%;
-            &:focus {
-                border-color: @silver-60;
-            }
-        }
-
-        &[type="submit"] {
-            margin: 0;
-            float: none;
-            .font-default(10px, 12px) !important;
-            padding: 0px !important;
-            position: relative;
-            right: 33px;
-            background: no-repeat 0px 7px url('plugins/Zeitgeist/images/search_ico.png') !important;
-            text-indent: 999999px;
-            width: 17px !important;
-        }
-    }
-}
-
-.dataTable .searchReset>img {
-    left: -45px;
-}
-
-.visitor-profile a {
-    color: @brand-blue;
-    font-weight: normal;
-}
-
-.visitor-profile-info {
-    .no-box-shadow() !important;
-}
-
-.visitor-profile-latest-visit-loc {
-    display: inline-block;
-    position: absolute;
-    right: 4px;
-    top: -19px;
-}
-
-.visitor-profile-date {
-    padding-top: 3px;
-}
-
-.visitor-profile-more-info > a {
-    color: @brand-blue;
-    .font-default(12px, 16px);
-}
-
-.visitor-profile-more-info {
-    margin-top: 15px;
-}
-
-.visitor-profile-visits-container {
-    padding: 0;
-    margin: 0;
-    li {
-        margin: 0 !important;
-        background: @silver-95;
-        padding: 5px 10px !important;
-        border-bottom: 1px solid @silver-80;
-        > div {
-            border: 0px !important;
-            margin: 0 !important;
-        }
-
-        &:first-child {
-            border-top: 1px solid @silver-80;
-        }
-    }
-
-    ol.visitor-profile-visits {
-        > li {
-            padding: 0 0 0 !important;
-            span {
-                color: @silver-40;
-                .font-default(13px, 18px);
-                font-weight: normal;
-                margin-right: 20px;
-            }
-
-            h2 {
-                margin-left: 20px;
-                margin-bottom: 12px;
-            }
-
-
-            ol {
-                background: #fff !important;
-                border-top: 0 !important;
-                li {
-                    background: #fff !important;
-                    .font-default(11px, 19px);
-                    font-weight: normal;
-                    color: @silver-40;
-                    &:last-child {
-                        border-bottom: 0px !important;
-                    }
-                }
-            }
-        }
-    } 
-}
-
-.visitor-profile-visit-title-row {
-  padding-top:10px;
-
-  &:hover {
-    background-color: @silver-90;
-  }
-}
-
-.widget .visitor-profile .visitor-profile-info > div > div {
-    min-width: 100% !important;
-}
-
-
-.visitor-profile {
-    background: none;
-    .box-shadow(none);
-    border: 0;
-    .border-radius(0px);
-    .visitor-profile-info {
-        .border-radius(0px);
-        border: 0px;
-        .box-shadow(none) !important;
-        
-        > div {
-            border: 0px !important;
-        }
-
-        .visitor-profile-image-frame {
-            background: none !important;
-        }
-        .visitor-profile-avatar {
-            > div > img {
-                display: none;
-            }
-        }
-    }
-
-    h1 {
-        .font-default(15px, 20px);
-        font-weight: normal;
-        color: @brand-black;
-    }
-
-    h2 {
-        .font-default(13px, 18px);
-        color: @brand-black;
-    }
-
-    p {
-        margin-left: 0;
-        margin-right: 0;
-        .font-default(13px, 18px);
-        color: @silver-60;
-        strong {
-            .font-default(13px, 18px);
-            color: @brand-black;
-            font-weight: normal;
-        }
-        span {
-            .font-default(13px, 18px);
-        }
-    }
-
-
-    .visitor-profile-avatar {
-       ul {
-        width: 100% !important;
-           li {
-                display: block;
-                border: 0px;
-                &:first-child {
-                    border: 0px !important;
-                }
-                span {
-                    color: @silver-40;
-                    .font-default(13px, 18px);
-                    padding-left: 0;
-                }
-
-                strong {
-                    color: @brand-black;
-                    .font-default(13px, 18px);
-                    font-weight: normal;
-                }
-
-                .visitor-profile-os,
-                .visitor-profile-browser {
-                    margin-left: 0;
-                    img {
-                        margin-right: 5px;
-                    }
-                }
-            } 
-        } 
-    }  
-
-    .visitor-profile-avatar > div:nth-child(2n) {
-        width: 376px;
-    }
-
-    .visitor-profile-latest-visit {
-        .visitor-profile-latest-visit-column {
-            display: inline-block;
-            margin-left: 0;
-        }      
-
-        .visitor-profile-latest-visit-column:first-child {
-            width: 50%;
-            margin-right:-4px;
-        }
-
-        .visitor-profile-latest-visit-column:last-child {
-            width: 50%;
-            margin-right:-4px;
-        }
-    }
-}
-
-.widgetTop .button {
-    margin: 16px 8px 0 0;
-}
-
-.widget .widgetTop:hover .button {
-  visibility: visible;
-}
-
-.widget .widgetTop .button {
-  opacity: 0.8;
-  visibility: hidden;
-}
-
-.annotationView {
-    .font-default(10px, 12px);
-    text-transform: uppercase;
-    color: @brand-black;
-}
-
-.datatableFooterMessage {
-    .font-default(13px, 18px);
-    color: @silver;
-    font-weight: normal;
-}
-.multisites_asc,
-.multisites_desc {
-    background-repeat: no-repeat;
-    height: 6px;
-}
-
-.dataTableFooterIcons, .dataTableFooterIcons a {
-    color: @brand-blue;
-}
-
-#visitsLive .datetime {
-    background: @silver-95;
-    border-top: 0px;
-}
-
-.metricValueBlock input {
-    padding: 5px !important;
-}
-
-
-#piwik-promo-share {
-    border: 0px;
-    background: #f2f2f2;
-    .font-default(10px, 16px);
-}
-
-#token_auth {
-    background: @silver-95;
-}
-
-tr:hover #token_auth {
-  background: #FFFFF7;
-}
-
-table#users {
-    .deleteuser:hover > span,
-    .edituser:hover > span {
-        text-decoration:underline;
-    }
-}
-
-table#editSites {
-    .editSite:hover > span,
-    .deleteSite:hover > span {
-        text-decoration:underline;
-    }
-}
-
-// previous style overrides
-#header_message a {
-    text-decoration:underline;
-}
-
-#header_message a:hover {
-    text-decoration:none;
-}
-
-
-#multisites table.dataTable {
-    thead tr th {
-        background: @theme-color-background-base;
-    }
-    td {
-        background: white;
-    }
-    tr:hover td {
-        background: #f2f2f2;
-    }
-    tfoot tr:hover td {
-        background: white;
-    }
-}
+// Other theme variables
+// Variable pattern: @theme-type-<role>
+@theme-fontFamily-base: Verdana, sans-serif;
+
+// Theme colors
+// Variable pattern: @theme-color-<role>[-<modifier>]
+@theme-color-brand:                    @color-red-piwik;
+@theme-color-brand-contrast:           @color-white;
+@theme-color-text:                     @color-black-piwik;
+@theme-color-text-light:               #444;
+@theme-color-text-lighter:             @color-silver-l40;
+@theme-color-link:                     @color-blue-piwik;
+@theme-color-base-series:              #ee3024;
+
+@theme-color-menu-contrast-text: @theme-color-text;
+@theme-color-menu-contrast-textSelected: @theme-color-menu-contrast-text;
+@theme-color-menu-contrast-textActive: @theme-color-brand;
+@theme-color-menu-contrast-background: @theme-color-background-tinyContrast;
+
+@theme-color-widget-title-text: @theme-color-text;
+@theme-color-widget-title-background: @theme-color-background-tinyContrast;

www/analytics/plugins/Morpheus/stylesheets/typography.less

@@ -1,124 +0,0 @@
-h1, h2, h3, h4, h5 {
-    font-family: Verdana, sans-serif;
-}
-
-a {
-    color: @brand-blue;
-    text-decoration: none;
-}
-
-h2 {
-    color: @brand-black;
-}
-
-.datatableRelatedReports {
-    color: @silver-40;
-}
-
-.tableIcon {
-    background: none;
-    padding: 2px 4px 4px 4px;
-    &.activeIcon {
-        background: @silver-80;
-    }
-}
-
-.exportToFormatItems {
-    background: @silver-80;
-    padding-top: 5px;
-    padding-bottom: 4px;
-    color: #000;
-  
-    a {
-       color: @brand-red !important;
-    }
-}
-
-.dataTableFooterActiveItem {
-    display: none;
-}
-
-#topApiRef {
-    color: @brand-black;
-}
-
-.tableConfiguration div.configItem span.action {
-    color: @brand-blue;
-}
-
-.dataTablePages {
-    color: @brand-black;
-    font-weight: normal;
-    .font-default(10px, 12px);
-}
-
-.datatableRelatedReports {
-    color: #808080;
-    span {
-        color: @brand-black;
-        font-weight: normal;
-    }
-}
-.dataTableSearchPattern {
-    img {
-        top: 7px !important
-    }
-}
-
-.tagCloud span, .tagCloud span a {
-    color: @brand-blue !important;
-}
-
-ul.widgetpreview-widgetlist, ul.widgetpreview-categorylist {
-    color: #4d4d4d;
-}
-
-
-.dataTableRowActions {
-    background: none !important;
-}
-
-a#Overlay_Title {
-    color: #4d4d4d !important;
-    .font-default(12px, 14px) !important;
-    margin-left: 15px !important;
-}
-
-a {
-    color: @brand-blue;
-}
-
-a.rowevolution-startmulti {
-    color: @brand-blue !important;
-}
-
-.Piwik_Popover_Loading_Subject {
-    color: @brand-blue !important;
-}
-
-.segmentFooterNote {
-    margin-top: -3px;
-    font-family: Verdana, sans-serif !important;
-    a {
-        color: @brand-blue !important;
-    }
-}
-
-body > a.ddmetric {
-    background-color: @lightGray !important;
-    border-color: @gray !important;
-    color: #000 !important;
-    font-family: Verdana, sans-serif !important;
-}
-
-.segment-element .segment-content .segment-or,
-.segment-element .segment-content .segment-add-or,
-.segment-element .segment-content .segment-row {
-    background-color: @lightGray !important;
-}
-
-.segmentEditorPanel *,
-.segment-element .segment-content .segment-input select, 
-.segment-element .segment-content .segment-input input {
-    font-family: Verdana, sans-serif !important;
-}

www/analytics/plugins/Morpheus/stylesheets/ui/_alerts.less

@@ -0,0 +1,64 @@
+.alert-icon-center-vertically(@font-size) {
+    @half-height: @font-size / 2;
+    // IE8 doesn't support calc(): it's OK, the icon will just be aligned to the top
+    top: calc(~'50% - @{half-height}');
+    // phantomjs only supports -webkit-calc()
+    top: -webkit-calc(~'50% - @{half-height}');
+}
+
+.alert {
+    padding: 20px 20px 20px 60px;
+    margin-bottom: 20px;
+    border: 1px solid transparent;
+    border-radius: 2px;
+    font-size: 14px;
+    position: relative;
+    &:before {
+        font-family: "piwik";
+        content: "\e625";
+        position: absolute;
+        left: 20px;
+        line-height: 100%; // line-height = font-size
+        font-size: 24px;
+    }
+
+    a {
+        color: inherit;
+        text-decoration: underline;
+    }
+}
+.alert-success {
+    color: #009874;
+    border-color: #1AA282;
+    &:before {
+        content: "\e63d";
+        color: #1AA282;
+    }
+}
+.alert-info {
+    color: #838383;
+    background-color: #F5F5F5;
+    font-size: 13px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    &:before {
+        color: #afafaf;
+        font-size: 20px;
+    }
+}
+.alert-warning {
+    color: #CA8100;
+    border-color: #DF9D27;
+    &:before {
+        content: "\e621";
+        color: #DF9D27;
+    }
+}
+.alert-danger {
+    color: #D4291F;
+    border-color: #D73F36;
+    &:before {
+        content: "\e616";
+        color: #D73F36;
+    }
+}

www/analytics/plugins/Morpheus/stylesheets/ui/_buttons.less

@@ -0,0 +1,81 @@
+// We use `button:not(.btn)` because  `button` has a higher priority than CSS classes
+// which makes it impossible to use btn-lg or similar additional classes.
+button:not(.btn),
+input[type="submit"]:not(.btn),
+.btn {
+    display: inline-block;
+    .border-radius(3px);
+    background: none;
+    color: @theme-color-brand-contrast;
+    background-color: @theme-color-brand;
+    box-shadow: 0 1px 1px 0 rgba(13, 13, 13, 0.3);
+    #gradient > .vertical(rgba(255,255,255,.15), rgba(255,255,255,0));
+    .font-default(12px, 16px);
+    font-weight: normal;
+    padding: 5px 15px;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    border: 0;
+
+    &:hover, &:focus {
+        color: @theme-color-brand-contrast;
+        background: @theme-color-brand;
+        text-decoration: none;
+    }
+
+    em {
+        font-style: normal;
+    }
+}
+
+// Bootstrap classes (can be removed in the future)
+.btn {
+    display: inline-block;
+}
+.btn-lg {
+    padding: 12px 40px;
+    font-size: 14px;
+}
+.btn-block {
+    display: block;
+    width: 100%;
+}
+.btn-block + .btn-block {
+    margin-top: 5px;
+}
+.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
+    pointer-events: none;
+    cursor: not-allowed;
+    filter: alpha(opacity=65);
+    opacity: .65;
+}
+// See http://getbootstrap.com/css/#buttons-options
+.btn.btn-link {
+    background: transparent;
+    color: @theme-color-link;
+    text-decoration: underline;
+    box-shadow: none;
+}
+.btn.btn-noop {
+    background: transparent;
+    color: @theme-color-text;
+    pointer-events: none;
+    cursor: not-allowed;
+    box-shadow: none;
+}
+
+.btn.btn-flat {
+    background: transparent;
+    border-radius: 0;
+    color: @theme-color-text-light;
+    box-shadow: none;
+    padding: 5px 10px;
+    &:hover {
+        background-color: #eaeaea;
+        text-decoration: none;
+    }
+    &.btn-lg {
+        padding: 12px;
+    }
+}

www/analytics/plugins/Morpheus/stylesheets/ui/_cards.less

@@ -0,0 +1,15 @@
+.card {
+  color: @theme-color-text-light;
+  padding: 15px;
+  margin: 9px 0;
+  border-radius: 2px;
+  background-color: #fff;
+  -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+  -moz-box-shadow:    0 1px 6px 0 rgba(0, 0, 0, 0.3);
+  box-shadow:         0 1px 6px 0 rgba(0, 0, 0, 0.3);
+  position: relative;
+
+  &:hover {
+    background-color: @color-silver-l95;
+  }
+}

www/analytics/plugins/Morpheus/stylesheets/ui/_charts.less

@@ -8,7 +8,7 @@
 }
 
 .bar-graph-colors[data-name=grid-border] {
-  color: @theme-color-background-smallContrast;
+  color: @theme-color-background-highContrast;
 }
 
 .bar-graph-colors[data-name=series1] {
@@ -48,7 +48,7 @@
 }
 
 .bar-graph-colors[data-name=single-metric-label] {
-  color: #666;
+  color: @theme-color-text-lighter;
 }
 
 // pie graph colors
@@ -57,7 +57,7 @@
 }
 
 .pie-graph-colors[data-name=grid-border] {
-  color: @theme-color-background-smallContrast;
+  color: @theme-color-background-highContrast;
 }
 
 .pie-graph-colors[data-name=series1] {
@@ -97,7 +97,7 @@
 }
 
 .pie-graph-colors[data-name=single-metric-label] {
-  color: #444;
+  color: @theme-color-text-light;
 }
 
 //line chart colors
@@ -153,6 +153,6 @@
 }
 
 .evolution-graph-colors[data-name=single-metric-label] {
-    color: #666;
+    color: @theme-color-text-lighter;
 }
 

www/analytics/plugins/Morpheus/stylesheets/ui/_code.less

@@ -0,0 +1,20 @@
+code {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: @theme-color-code;
+    background-color: @theme-color-code-background;
+    border-radius: 4px;
+}
+
+// The .codeblock class is useful to style <textarea> like a code block
+pre, .codeblock {
+    font-size: 13px;
+    color: @theme-color-code;
+    background-color: @theme-color-code-background;
+    border: none;
+    border-radius: 3px;
+    direction: ltr;
+    margin: 0 0 15px;
+    padding: 20px;
+    text-align: left;
+}

www/analytics/plugins/Morpheus/stylesheets/ui/_components.less

@@ -1,8 +1,9 @@
 //colors calendar
-@calendarHeaderBackground: #fff; 
+@calendarHeaderBackground: @theme-color-background-base;
 @calendarHeaderColor: #999;
 @calendarCurrentStateHover: #f5f5f5;
 @calendarBorder: #ccc;
+
 .ui-datepicker {
 
     th, th.ui-datepicker-week-end {
@@ -12,19 +13,18 @@
 
     .ui-state-default {
         border-color: @calendarBorder !important;
-        background: @brad-black !important;
     }
 
     .ui-datepicker-header {
         background: @calendarHeaderBackground !important;
-        border-color: @gray;
+        border-color: @color-gray;
         border-bottom-width: 0px;
     }
 
     .ui-datepicker-calendar {
-        border: 1px solid @gray;
+        border: 1px solid @color-gray;
         thead {
-            border-bottom: 1px solid @gray;
+            border-bottom: 1px solid @color-gray;
         }
     }
 
@@ -33,39 +33,27 @@
     }
 }
 
-.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, td .ui-state-active, .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, .ui-datepicker td.ui-datepicker-week-end .ui-state-active, .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period {
-    background: @brand-black !important;
+.ui-datepicker td.ui-datepicker-current-period a.ui-state-default, td .ui-state-active, .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, .ui-datepicker td.ui-datepicker-week-end .ui-state-active, .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period,
+.ui-datepicker td .ui-state-default.ui-state-active:hover {
+    background: @theme-color-text !important;
 }
 
 .ui-datepicker td.ui-datepicker-current-period a.ui-state-default, td .ui-state-active, .ui-datepicker td.ui-datepicker-current-period a.ui-state-active, .ui-datepicker td.ui-datepicker-week-end .ui-state-active, .ui-datepicker td.ui-datepicker-other-month.ui-datepicker-current-period {
     background: @calendarCurrentStateHover;
 }
 
-//add new segment
-.add_new_segment,
-#calendarRangeApply {
-    font-size: 12px !important;
-    padding: 0 10px !important;
-    margin-left: 0px !important;
-}
-
 .segment-element {
-    background: @white;
-    border-color: @silver-80;
+    background: @color-white;
+    border-color: @color-silver-l80;
+    line-height: 1.33;
 
     .segment-add-row {
         .border-radius(5px);
     }
 
-    .segment-nav {
-        h4.visits {
-            background: url('plugins/Morpheus/images/segment-users.png') no-repeat 3px 0px;
-        }
-    }
-
     .custom_select_search {
         input {
-            margin-top: -10px;
+            margin-top: 1px;
         }
     }
 
@@ -73,22 +61,22 @@
         h3 {
             font-weight: normal;
             .font-default(13px, 15px);
-            color: @brand-black;
+            color: @theme-color-text;
         }
-        
+
         .segment-add-row > div a span,
         .segment-add-or > div a span {
-            color: @brand-red;
+            color: @theme-color-brand;
             text-shadow: none;
         }
 
         .segment-input {
             select, input {
                 .font-default(12px, 14px);
-                color: @brand-black;
+                color: @theme-color-text;
                 font-weight: 500;
-                margin: 0px;
-                min-height: auto;
+                margin: 0;
+                height: 30px;
             }
         }
     }
@@ -101,88 +89,73 @@
                 text-shadow: none;
             }
             li {
-                padding: 3px 0 ;
+                padding: 3px 0;
                 &:hover {
-                    background: #f2f2f2;
+                    background: @theme-color-background-tinyContrast;
                     border: 0;
-                     padding: 4px 0 3px;
-                  
+                    padding: 4px 0 3px;
+
                     a {
                         border: 0;
-                        background-color: #f2f2f2;
+                        background-color: @theme-color-background-tinyContrast;
                         padding-right: 15px;
 
                     }
                 }
             }
 
-        } 
-    } 
+        }
+    }
 
     .segment-top {
         .font-default(10px, 12px);
-        color: #444;
+        color: @theme-color-text-light;
         text-transform: uppercase;
 
         h4 {
-            color: @silver-30;
+            color: @color-silver-l30;
             text-transform: uppercase;
             .font-default(10px, 12px);
             a.dropdown {
-                color: @silver-30;
+                color: @color-silver-l30;
                 text-transform: uppercase;
                 .font-default(10px, 12px);
             }
         }
 
         a.dropdown {
-            color: @brand-black;
-            background: url('plugins/Zeitgeist/images/sort_subtable_desc.png') 100% -2px no-repeat;
+            display: inline;
+            color: @theme-color-text;
+            background: url('plugins/Morpheus/images/sort_subtable_desc.png') 100% -2px no-repeat;
             &.ui-autocomplete-input {
                 background-position: 100% -2px;
             }
+            .font-default(10px, 12px);
         }
     }
     .segment-footer {
-        background: @white;
-        button {
-            height: auto;
-            font-weight: normal;
-            min-width: 100px;
-        }
+        background: @color-white;
 
         a.delete {
-            color: @brand-red;
+            color: @theme-color-brand;
         }
         .segmentFooterNote, .segment-element .segment-footer .segmentFooterNote a {
-            color: #444;
+            color: @theme-color-text-light;
         }
     }
 }
 
-.available_segments a.dropdown  {
-    color: @brand-black !important;
+.available_segments a.dropdown {
+    color: @theme-color-text !important;
     text-transform: uppercase;
     .font-default(10px, 12px);
 }
 
-
 #periodString {
-    border: 1px solid @silver-80;
-    .border-radius(0px);
-    background: #fff;
-    &:hover {
-        background: #fff;
-        border-color: @silver-80;
-    }
-
     select {
-      min-height: 0;
-    }
-
-    .calendar-icon {
-        width: 17px;
-        height: 17px;
+        min-height: 0;
+        background-position: 140%;
+        padding-left: 5px;
     }
 
     label.selected-period-label {
@@ -192,7 +165,7 @@
     h6 {
         .font-default(13px, 16px);
         font-weight: normal;
-        color: @brand-black;
+        color: @theme-color-text;
     }
 
     #periodMore {
@@ -202,43 +175,24 @@
             }
         }
     }
-
-    #date {
-        .border-radius(0px);
-        background-color: #fff;
-        .box-shadow(~"inset 1px 1px 3px #d8d8d8");
-        padding: 8px 10px;
-        color: @silver-20;
-        text-transform: uppercase;
-        .font-default(10px, 12px);
-
-        strong {
-            color: @brand-black;
-
-        }
-    }
 }
 
 #header_message {
-    border: 1px solid @silver-80;
-    padding: 8px 10px 8px 10px;
     height: auto;
-    background: #fff;
     .border-radius(0px);
-    .header_short {
-        .font-default(10px, 12px);
-        text-transform: uppercase;
-    }
 
-    .header_full {
-        .font-default(12px, 18px);
+    &.isPiwikDemo {
+        text-align: right;
+        position: absolute;
+        right: 0;
+        top: 8px;
     }
 }
 
 .ui-menu {
     .ui-menu-item {
         a {
-            color: @silver-20;
+            color: @color-silver-l20;
             text-transform: uppercase;
             .font-default(10px, 18px);
             padding: 2px;
@@ -248,8 +202,8 @@
 
 .loadingPiwikBelow,
 .loadingPiwik {
-    .font-default(10px, 12px);
-    color: @silver-60;
+    .font-default(13px, 13px);
+    color: @color-silver-l60;
     font-weight: normal;
 }
 
@@ -257,41 +211,41 @@
     table {
         td {
             .font-default(12px, 14px) !important;
-            color: @brand-black;
+            color: @theme-color-text;
             padding: 6px 5px;
         }
     }
 }
 
-//reports box 
+//reports box
 .reports {
-    border: 1px solid @gray;
+    border: 1px solid @color-gray;
     .border-radius(6px);
 
     h2 {
-        background: #f2f2f2;
-        border-bottom: 1px solid @gray;
+        background: @theme-color-background-tinyContrast;
+        border-bottom: 1px solid @color-gray;
         padding: 11px 15px 10px;
     }
 }
 
-.jqplot-seriespicker-popover { 
-    .box-shadow-1(none);
+.jqplot-seriespicker-popover {
+    box-shadow: none;
 }
 
 // transition box
 #Transitions_Container {
     #Transitions_CenterBox {
-        border: 1px solid @gray;
-        .box-shadow-1(none);
+        border: 1px solid @color-gray;
+        box-shadow: none;
         .border-radius(6px);
         margin: 27px 0 0 319px;
         width: 258px;
         height: 390px;
-        background: #fff;
+        background: @theme-color-background-base;
         h2 {
             color: #1e93d1;
-            border-bottom: 1px solid @gray;
+            border-bottom: 1px solid @color-gray;
             font-weight: normal;
             padding: 15px;
             background: #f5f5f5;
@@ -300,13 +254,10 @@
 
         .Transitions_CenterBoxMetrics {
             padding: 0;
-            p {
-                font-family: Verdana, sans-serif;
-            }
             p.Transitions_Margin {
                 text-align: left;
                 .font-default(15px, 20px);
-                border-bottom: 1px solid @gray;
+                border-bottom: 1px solid @color-gray;
                 padding: 13px;
                 .Transitions_Metric {
                     font-weight: normal;
@@ -330,7 +281,7 @@
                     .font-default(15px, 20px);
                     margin-bottom: 10px;
                 }
-            } 
+            }
         }
     }
 
@@ -342,21 +293,13 @@
     }
 }
 
-
 table.dataTable tr td .dataTableRowActions {
-  a.rightmost, a {
-    background-color: #f2f2f2 !important;
-    margin: 6px 0px 6px 0;
-    padding: 0px 4px 0px 0px;
-  }
-}
-
-table.dataTable tr td.labeleven .dataTableRowActions {
-  a.rightmost, a {
-    background-color: #fff !important;
-  }
+    a.rightmost, a {
+        margin: 6px 0px 6px 0;
+        padding: 0px 4px 0px 0px;
+    }
 }
 
 table.dataTable th .columnDocumentation {
-    color: @silver-90;
+    color: @color-silver-l90;
 }

www/analytics/plugins/Morpheus/stylesheets/ui/_list-group.less

@@ -0,0 +1,47 @@
+// Bootstrap component, Bootstrap code
+.list-group {
+    font-size: 12px;
+    // No need to set list-style: none; since .list-group-item is block level
+    margin-bottom: 20px;
+    padding-left: 0; // reset padding because ul and ol
+    box-shadow: 0 1px 1px rgba(0,0,0,.1);
+    border-radius: 4px;
+}
+.list-group-item {
+    color: #858585;
+    position: relative;
+    display: block;
+    padding: 10px 15px;
+    // Place the border on the list items and negative margin up for better styling
+    margin-bottom: -1px;
+    background-color: white;
+    border: 1px solid @theme-color-border;
+
+    // Round the first and last items
+    &:first-child {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+    }
+    &:last-child {
+        margin-bottom: 0;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 4px;
+    }
+}
+.list-group-item {
+    // Disabled state
+    &.disabled,
+    &.disabled:hover,
+    &.disabled:focus {
+        background-color: #FAFAFA;
+        color: #858585;
+    }
+
+    // Active class on item itself, not parent
+    &.active,
+    &.active:hover,
+    &.active:focus {
+        z-index: 2; // Place active items above their siblings for proper border styling
+        color: black;
+    }
+}

www/analytics/plugins/Morpheus/stylesheets/ui/_map.less

@@ -46,14 +46,12 @@
 .realTimeMap_overlay {
     position: absolute;
     left: 10px;
-    bottom: 6px;
     font-size: 12px;
     z-index: 10;
     text-shadow: 1px 1px 1px #FFFFFF, -1px 1px 1px #FFFFFF, 1px -1px 1px #FFFFFF, -1px -1px 1px #FFFFFF, 1px 1px 1px #FFFFFF, -1px 1px 1px #FFFFFF, 1px -1px 1px #FFFFFF, -1px -1px 1px #FFFFFF;
 }
 
 .realTimeMap_datetime {
-    bottom: 24px;
     color: #887;
     font-size: 14px;
 }
@@ -67,5 +65,5 @@
 }
 
 .realtime-map[data-name=white-bg] {
-    color: #808080 !important; 
+    color: #808080 !important;
 }

www/analytics/plugins/Morpheus/stylesheets/ui/_navs.less

@@ -0,0 +1,59 @@
+// Most of this is Bootstrap code and can be removed when switching to Bootstrap
+
+.nav {
+    margin-bottom: 20px;
+    padding-left: 0; // Override default ul/ol
+    list-style: none;
+
+    > li {
+        position: relative;
+        display: block;
+
+        > a {
+            position: relative;
+            display: block;
+            padding: 11px 70px;
+            text-decoration: none;
+        }
+    }
+}
+// .clearfix
+.nav:before, .nav:after {
+    display: table;
+    content: " ";
+}
+.nav:after {
+    clear: both;
+}
+
+.nav-pills {
+    > li {
+        float: left;
+        border: 1px solid @color-silver-l85;
+        border-left: 0;
+
+        &:first-child {
+            border-radius: 3px 0 0 3px;
+            border: 1px solid @color-silver-l85;
+        }
+        &:last-child {
+            border-radius: 0 3px 3px 0;
+        }
+
+        > a {
+            color: @theme-color-link;
+            background-color: @color-silver-l95;
+
+            &:hover,
+            &:focus {
+                background-color: @color-silver-l85;
+            }
+        }
+
+        &.active > a {
+            color: @theme-color-text;
+            background-color: @theme-color-background-base;
+            cursor: default;
+        }
+    }
+}

www/analytics/plugins/Morpheus/stylesheets/ui/_panels.less

@@ -0,0 +1,71 @@
+// Most of this is Bootstrap code and can be removed when switching to Bootstrap
+
+.panel {
+    margin-bottom: 20px;
+    background-color: @color-silver-l95;
+    border: 1px solid @color-silver-l85;
+    .border-radius(3px);
+    box-shadow: 0 1px 1px rgba(0,0,0,.05);
+}
+
+.panel-body {
+    padding: 15px;
+}
+// .clearfix
+.panel-body:before, .panel-body:after {
+    display: table;
+    content: " ";
+}
+.panel-body:after {
+    clear: both;
+}
+
+.panel-heading {
+    padding: 10px 15px;
+    background-color: @theme-color-background-base;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    position: relative;
+
+    // Within heading, strip any `h*` tag of its default margins for spacing.
+    .panel-title {
+        margin-top: 0;
+        margin-bottom: 0;
+        font-size: 16px;
+        line-height: inherit;
+        color: inherit;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        &.panel-title-block {
+            height: 26px;
+            > a {
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                padding-top: 12px;
+            }
+        }
+
+        > a,
+        > small,
+        > .small,
+        > small > a,
+        > .small > a {
+            color: inherit;
+            text-decoration: none;
+            &:focus, &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}
+
+.panel-footer {
+    padding: 10px 15px;
+    background-color: @theme-color-background-base;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+}