Add automated theme generator (#14293)gsoc-theme-generator

Google Summer of Code 2018 project

Signed-off-by: Saksham Gupta <shucon01@gmail.com>
Signed-off-by: Maurício Meneghini Fauth <mauriciofauth@gmail.com>

28 files changed, 7602 insertions, 2 deletions

diff --git a/config.sample.inc.php b/config.sample.inc.php
index c4f4df6f80..44d30785d4 100644
--- a/config.sample.inc.php
+++ b/config.sample.inc.php
@@ -150,6 +150,13 @@ $cfg['SaveDir'] = '';
 //$cfg['SendErrorReports'] = 'always';
 
 /**
+ * Enabling or disabling Theme Generator
+ *
+ * default = 'false'
+ */
+//$cfg['ThemeGenerator'] = 'false';
+
+/**
  * You can find more configuration options in the documentation
  * in the doc/ folder or at <https://docs.phpmyadmin.net/>.
  */
diff --git a/doc/config.rst b/doc/config.rst
index 05a197fa58..8959cd2aba 100644
--- a/doc/config.rst
+++ b/doc/config.rst
@@ -217,8 +217,8 @@ Basic settings
 
     Setting this to ``true`` allows phpMyAdmin to be included inside a frame,
     and is a potential security hole allowing cross-frame scripting attacks or
-    clickjacking. Setting this to 'sameorigin' prevents phpMyAdmin to be 
-    included from another document in a frame, unless that document belongs 
+    clickjacking. Setting this to 'sameorigin' prevents phpMyAdmin to be
+    included from another document in a frame, unless that document belongs
     to the same domain.
 
 Server connection settings
@@ -3265,6 +3265,13 @@ Theme manager settings
 
     Whether to allow different theme for each server.
 
+.. config:option:: $cfg['ThemeGenerator']
+
+    :type: boolean
+    :default: false
+
+    Whether to enable theme generator.
+
 .. config:option:: $cfg['FontSize']
 
     :type: string
diff --git a/doc/theme_generator.rst b/doc/theme_generator.rst
new file mode 100644
index 0000000000..d303c1540a
--- /dev/null
+++ b/doc/theme_generator.rst
@@ -0,0 +1,43 @@
+Create Own Custom Themes
+========================
+
+You can create your own themes using Theme Generator tool present on page index.php.
+Choose a Base Colour using the colour picker tool.
+
+Colour schemes
+--------------
+
+The colour schemes are:
+
+* Triadic
+* Complementary
+* Adjacent
+* Monochrome
+
+You can choose any one of the four schemes using the dropdown menu.
+Each element's colour can be customised by clicking on a particular colour box.
+Upon hovering the colour box it would display the element the colour corresponds to.
+On clicking Go button the program would create the necessary theme files.
+Now you can choose the theme you created from the Theme drop-down on page index.php.
+
+Automatic text colours for better visibility
+++++++++++++++++++++++++++++++++++++++++++++
+
+A checkbox can be found stating Automatically set text colours for best visibility.
+On using this option the text colour would be chosen for best visibility.
+You would not be able to change the text colours manually, when using this option.
+
+Preview panels
+++++++++++++++
+
+On clicking Preview button the view would change to how the theme would look after
+being saved. This is a temporary view and would not generate any files, and upon going on any
+other page the view would return back to the original view. For better visualisation,
+some elements such as tables and group would popup.
+
+Saving the theme
+++++++++++++++++
+
+To save the theme, you need to specify a theme name. All other parameters are optional.
+Note that if another theme already exists, it would be overwritten to save the new theme.
+After the theme saved you can change the theme from the index.php page.
diff --git a/doc/user.rst b/doc/user.rst
index a98e2cb894..06843709b3 100644
--- a/doc/user.rst
+++ b/doc/user.rst
@@ -13,4 +13,5 @@ User Guide
     charts
     import_export
     themes
+    theme_generator
     other
diff --git a/index.php b/index.php
index 6ab209e1a8..39ae8785d1 100644
--- a/index.php
+++ b/index.php
@@ -293,6 +293,19 @@ if ($GLOBALS['cfg']['ThemeManager']) {
     echo Util::getImage('s_theme') , " "
             ,  ThemeManager::getInstance()->getHtmlSelectBox();
     echo '</li>';
+    if ($GLOBALS['cfg']['ThemeGenerator']) {
+        Core::printListItem(
+            Util::getImage('s_theme') . "&nbsp;" . __(
+                'Theme Generator'
+            ),
+            'li_theme_generator',
+            'theme_generator.php' . $common_url_query,
+            null,
+            null,
+            null,
+            "no_bullets"
+        );
+    }
 }
 
 echo '</ul>';
diff --git a/js/theme_generator/color_picker.js b/js/theme_generator/color_picker.js
new file mode 100644
index 0000000000..4044d9dba0
--- /dev/null
+++ b/js/theme_generator/color_picker.js
@@ -0,0 +1,1981 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Library for the Color Picker Tool
+ */
+'use strict';
+var globalChange = 0;
+var UIColorPicker = (function UIColorPicker () {
+    function getElemById (id) {
+        return document.getElementById(id);
+    }
+
+    var subscribers = [];
+    var pickers = [];
+
+    /**
+     * RGBA Color class
+     *
+     * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+     * @param hue			0-360
+     * @param saturation	0-100
+     * @param value 		0-100
+     * @param lightness		0-100
+     */
+
+    function Color (color) {
+        if (color instanceof Color === true) {
+            this.copy(color);
+            return;
+        }
+
+        this.r = 0;
+        this.g = 0;
+        this.b = 0;
+        this.a = 1;
+        this.hue = 0;
+        this.saturation = 0;
+        this.value = 100;
+        this.lightness = 0;
+        this.format = 'HSB';
+    }
+
+    function RGBColor (r, g, b) {
+        var color = new Color();
+        color.setRGBA(r, g, b, 1);
+        return color;
+    }
+
+    function RGBAColor (r, g, b, a) {
+        var color = new Color();
+        color.setRGBA(r, g, b, a);
+        return color;
+    }
+
+    function HSBColor (h, s, v) {
+        var color = new Color();
+        color.setHSB(h, s, v);
+        return color;
+    }
+
+    function HSBAColor (h, s, v, a) {
+        var color = new Color();
+        color.setHSB(h, s, v);
+        color.a = a;
+        return color;
+    }
+
+    function HSLColor (h, s, l) {
+        var color = new Color();
+        color.setHSL(h, s, l);
+        return color;
+    }
+
+    function HSLAColor (h, s, l, a) {
+        var color = new Color();
+        color.setHSL(h, s, l);
+        color.a = a;
+        return color;
+    }
+
+    Color.prototype.copy = function copy (obj) {
+        if (obj instanceof Color !== true) {
+            console.log('Typeof parameter not Color');
+            return;
+        }
+
+        this.r = obj.r;
+        this.g = obj.g;
+        this.b = obj.b;
+        this.a = obj.a;
+        this.hue = obj.hue;
+        this.saturation = obj.saturation;
+        this.value = obj.value;
+        this.format = '' + obj.format;
+        this.lightness = obj.lightness;
+    };
+
+    Color.prototype.setFormat = function setFormat (format) {
+        if (format === 'HSB') {
+            this.format = 'HSB';
+        }
+        if (format === 'HSL') {
+            this.format = 'HSL';
+        }
+    };
+
+    /* ========== Methods to set Color Properties ========== */
+
+    Color.prototype.isValidRGBValue = function isValidRGBValue (value) {
+        return (typeof(value) === 'number' && isNaN(value) === false &&
+            value >= 0 && value <= 255);
+    };
+
+    Color.prototype.setRGBA = function setRGBA (red, green, blue, alpha) {
+        if (this.isValidRGBValue(red) === false ||
+            this.isValidRGBValue(green) === false ||
+            this.isValidRGBValue(blue) === false) {
+            return;
+        }
+
+        this.r = red | 0;
+        this.g = green | 0;
+        this.b = blue | 0;
+
+        if (this.isValidRGBValue(alpha) === true) {
+            this.a = alpha | 0;
+        }
+    };
+
+    Color.prototype.setByName = function setByName (name, value) {
+        if (name === 'r' || name === 'g' || name === 'b') {
+            if (this.isValidRGBValue(value) === false) {
+                return;
+            }
+
+            this[name] = value;
+            this.updateHSX();
+        }
+    };
+
+    Color.prototype.setHSB = function setHSB (hue, saturation, value) {
+        this.hue = hue;
+        this.saturation = saturation;
+        this.value = value;
+        this.HSBtoRGB();
+    };
+
+    Color.prototype.setHSL = function setHSL (hue, saturation, lightness) {
+        this.hue = hue;
+        this.saturation = saturation;
+        this.lightness = lightness;
+        this.HSLtoRGB();
+    };
+
+    Color.prototype.setHue = function setHue (value) {
+        if (typeof(value) !== 'number' || isNaN(value) === true ||
+            value < 0 || value > 359) {
+            return;
+        }
+        this.hue = value;
+        this.updateRGB();
+    };
+
+    Color.prototype.setSaturation = function setSaturation (value) {
+        if (typeof(value) !== 'number' || isNaN(value) === true ||
+            value < 0 || value > 100) {
+            return;
+        }
+        this.saturation = value;
+        this.updateRGB();
+    };
+
+    Color.prototype.setValue = function setValue (value) {
+        if (typeof(value) !== 'number' || isNaN(value) === true ||
+            value < 0 || value > 100) {
+            return;
+        }
+        this.value = value;
+        this.HSBtoRGB();
+    };
+
+    Color.prototype.setLightness = function setLightness (value) {
+        if (typeof(value) !== 'number' || isNaN(value) === true ||
+            value < 0 || value > 100) {
+            return;
+        }
+        this.lightness = value;
+        this.HSLtoRGB();
+    };
+
+    Color.prototype.setHexa = function setHexa (value) {
+        var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+        if (valid !== true) {
+            return;
+        }
+        if (value[0] === '#') {
+            value = value.slice(1, value.length);
+        }
+        if (value.length === 3) {
+            value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+        }
+
+        this.r = parseInt(value.substr(0, 2), 16);
+        this.g = parseInt(value.substr(2, 2), 16);
+        this.b = parseInt(value.substr(4, 2), 16);
+
+        this.alpha	= 1;
+        this.RGBtoHSB();
+    };
+
+    /* ========== Conversion Methods ========== */
+
+    Color.prototype.convertToHSL = function convertToHSL () {
+        if (this.format === 'HSL') {
+            return;
+        }
+
+        this.setFormat('HSL');
+        this.RGBtoHSL();
+    };
+
+    Color.prototype.convertToHSB = function convertToHSB () {
+        if (this.format === 'HSB') {
+            return;
+        }
+
+        this.setFormat('HSB');
+        this.RGBtoHSB();
+    };
+
+    /* ========== Update Methods ========== */
+
+    Color.prototype.updateRGB = function updateRGB () {
+        if (this.format === 'HSB') {
+            this.HSBtoRGB();
+            return;
+        }
+
+        if (this.format === 'HSL') {
+            this.HSLtoRGB();
+            return;
+        }
+    };
+
+    Color.prototype.updateHSX = function updateHSX () {
+        if (this.format === 'HSB') {
+            this.RGBtoHSB();
+            return;
+        }
+
+        if (this.format === 'HSL') {
+            this.RGBtoHSL();
+            return;
+        }
+    };
+
+    Color.prototype.HSBtoRGB = function HSBtoRGB () {
+        var sat = this.saturation / 100;
+        var value = this.value / 100;
+        var C = sat * value;
+        var H = this.hue / 60;
+        var X = C * (1 - Math.abs(H % 2 - 1));
+        var m = value - C;
+        var precision = 255;
+
+        C = (C + m) * precision | 0;
+        X = (X + m) * precision | 0;
+        m = m * precision | 0;
+
+        if (H >= 0 && H < 1) {
+            this.setRGBA(C, X, m);
+            return;
+        }
+        if (H >= 1 && H < 2) {
+            this.setRGBA(X, C, m);
+            return;
+        }
+        if (H >= 2 && H < 3) {
+            this.setRGBA(m, C, X);
+            return;
+        }
+        if (H >= 3 && H < 4) {
+            this.setRGBA(m, X, C);
+            return;
+        }
+        if (H >= 4 && H < 5) {
+            this.setRGBA(X, m, C);
+            return;
+        }
+        if (H >= 5 && H < 6) {
+            this.setRGBA(C, m, X);
+            return;
+        }
+    };
+
+    Color.prototype.HSLtoRGB = function HSLtoRGB () {
+        var sat = this.saturation / 100;
+        var light = this.lightness / 100;
+        var C = sat * (1 - Math.abs(2 * light - 1));
+        var H = this.hue / 60;
+        var X = C * (1 - Math.abs(H % 2 - 1));
+        var m = light - C / 2;
+        var precision = 255;
+
+        C = (C + m) * precision | 0;
+        X = (X + m) * precision | 0;
+        m = m * precision | 0;
+
+        if (H >= 0 && H < 1) {
+            this.setRGBA(C, X, m);
+            return;
+        }
+        if (H >= 1 && H < 2) {
+            this.setRGBA(X, C, m);
+            return;
+        }
+        if (H >= 2 && H < 3) {
+            this.setRGBA(m, C, X);
+            return;
+        }
+        if (H >= 3 && H < 4) {
+            this.setRGBA(m, X, C);
+            return;
+        }
+        if (H >= 4 && H < 5) {
+            this.setRGBA(X, m, C);
+            return;
+        }
+        if (H >= 5 && H < 6) {
+            this.setRGBA(C, m, X);
+            return;
+        }
+    };
+
+    Color.prototype.RGBtoHSB = function RGBtoHSB () {
+        var red		= this.r / 255;
+        var green	= this.g / 255;
+        var blue	= this.b / 255;
+
+        var cmax = Math.max(red, green, blue);
+        var cmin = Math.min(red, green, blue);
+        var delta = cmax - cmin;
+        var hue = 0;
+        var saturation = 0;
+
+        if (delta) {
+            if (cmax === red) {
+                hue = (green - blue) / delta;
+            }
+            if (cmax === green) {
+                hue = 2 + (blue - red) / delta;
+            }
+            if (cmax === blue) {
+                hue = 4 + (red - green) / delta;
+            }
+            if (cmax) {
+                saturation = delta / cmax;
+            }
+        }
+
+        this.hue = 60 * hue | 0;
+        if (this.hue < 0) {
+            this.hue += 360;
+        }
+        this.saturation = (saturation * 100) | 0;
+        this.value = (cmax * 100) | 0;
+    };
+
+    Color.prototype.RGBtoHSL = function RGBtoHSL () {
+        var red		= this.r / 255;
+        var green	= this.g / 255;
+        var blue	= this.b / 255;
+
+        var cmax = Math.max(red, green, blue);
+        var cmin = Math.min(red, green, blue);
+        var delta = cmax - cmin;
+        var hue = 0;
+        var saturation = 0;
+        var lightness = (cmax + cmin) / 2;
+        var X = (1 - Math.abs(2 * lightness - 1));
+
+        if (delta) {
+            if (cmax === red) {
+                hue = ((green - blue) / delta);
+            }
+            if (cmax === green) {
+                hue = 2 + (blue - red) / delta;
+            }
+            if (cmax === blue) {
+                hue = 4 + (red - green) / delta;
+            }
+            if (cmax) {
+                saturation = delta / X;
+            }
+        }
+
+        this.hue = 60 * hue | 0;
+        if (this.hue < 0) {
+            this.hue += 360;
+        }
+        this.saturation = (saturation * 100) | 0;
+        this.lightness = (lightness * 100) | 0;
+    };
+
+    /* ========== Get Methods ========== */
+
+    Color.prototype.getHexa = function getHexa () {
+        var r = this.r.toString(16);
+        var g = this.g.toString(16);
+        var b = this.b.toString(16);
+        if (this.r < 16) {
+            r = '0' + r;
+        }
+        if (this.g < 16) {
+            g = '0' + g;
+        }
+        if (this.b < 16) {
+            b = '0' + b;
+        }
+        var value = '#' + r + g + b;
+        return value.toUpperCase();
+    };
+
+    Color.prototype.getRGBA = function getRGBA () {
+        var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+        var a = '';
+        var v = '';
+        var x = parseFloat(this.a);
+        if (x !== 1) {
+            a = 'a';
+            v = ', ' + x;
+        }
+
+        var value = 'rgb' + a + rgb + v + ')';
+        return value;
+    };
+
+    Color.prototype.getColor = function getColor () {
+        if (this.a | 0 === 1) {
+            return this.getHexa();
+        }
+        return this.getRGBA();
+    };
+
+    /* ========== Capture Mouse Movement ========== */
+
+    var setMouseTracking = function setMouseTracking (elem, callback) {
+        elem.addEventListener('mousedown', function (e) {
+            callback(e);
+            document.addEventListener('mousemove', callback);
+        });
+
+        document.addEventListener('mouseup', function (e) {
+            document.removeEventListener('mousemove', callback);
+        });
+    };
+
+    /* ==================== */
+    // Color Picker Class
+    /* ==================== */
+
+    function ColorPicker (node) {
+        this.color = new Color();
+        this.node = node;
+        this.subscribers = [];
+
+        var type = this.node.getAttribute('data-mode');
+        var topic = this.node.getAttribute('data-topic');
+
+        this.topic = topic;
+        this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSB';
+        this.color.setFormat(this.picker_mode);
+
+        this.createPickingArea();
+        this.createHueArea();
+
+        this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+        this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+        this.newInputComponent('B', 'value', this.inputChangeValue.bind(this));
+        this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+        this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+        this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+        this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+        this.createPreviewBox();
+
+        this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+        this.setColor(this.color);
+        pickers[topic] = this;
+    }
+
+    /** ********************************************************************* **/
+    //				Function for generating the color-picker
+    /** ********************************************************************* **/
+
+    ColorPicker.prototype.createPickingArea = function createPickingArea () {
+        var area = document.createElement('div');
+        var picker = document.createElement('div');
+
+        area.className = 'picking-area';
+        picker.className = 'picker';
+
+        this.picking_area = area;
+        this.color_picker = picker;
+        setMouseTracking(area, this.updateColor.bind(this));
+
+        area.appendChild(picker);
+        this.node.appendChild(area);
+    };
+
+    ColorPicker.prototype.createHueArea = function createHueArea () {
+        var area = document.createElement('div');
+        var picker = document.createElement('div');
+
+        area.className = 'hue';
+        picker.className = 'slider-picker';
+
+        this.hue_area = area;
+        this.hue_picker = picker;
+        setMouseTracking(area, this.updateHueSlider.bind(this));
+
+        area.appendChild(picker);
+        this.node.appendChild(area);
+    };
+
+    ColorPicker.prototype.createPreviewBox = function createPreviewBox (e) {
+        var preview_box = document.createElement('div');
+        var preview_color = document.createElement('div');
+
+        preview_box.className = 'preview';
+        preview_color.className = 'preview-color';
+
+        this.preview_color = preview_color;
+
+        preview_box.appendChild(preview_color);
+        this.node.appendChild(preview_box);
+    };
+
+    ColorPicker.prototype.newInputComponent = function newInputComponent (title, topic, onChangeFunc) {
+        var wrapper = document.createElement('div');
+        var input = document.createElement('input');
+        var info = document.createElement('span');
+
+        wrapper.className = 'input';
+        wrapper.setAttribute('data-topic', topic);
+        info.textContent = title;
+        info.className = 'name';
+        input.setAttribute('type', 'text');
+
+        wrapper.appendChild(info);
+        wrapper.appendChild(input);
+        this.node.appendChild(wrapper);
+
+        input.addEventListener('change', onChangeFunc);
+        input.addEventListener('click', function () {
+            this.select();
+        });
+
+        this.subscribe(topic, function (value) {
+            input.value = value;
+        });
+    };
+
+    /** ********************************************************************* **/
+    //					Updates properties of UI elements
+    /** ********************************************************************* **/
+
+    ColorPicker.prototype.updateColor = function updateColor (e) {
+        var x = e.pageX - this.picking_area.offsetLeft;
+        var y = e.pageY - this.picking_area.offsetTop;
+        var picker_offset = 5;
+
+        // width and height should be the same
+        var size = this.picking_area.clientWidth;
+
+        if (x > size) {
+            x = size;
+        }
+        if (y > size) {
+            y = size;
+        }
+        if (x < 0) {
+            x = 0;
+        }
+        if (y < 0) {
+            y = 0;
+        }
+
+        var value = 100 - (y * 100 / size) | 0;
+        var saturation = x * 100 / size | 0;
+
+        if (this.picker_mode === 'HSB') {
+            this.color.setHSB(this.color.hue, saturation, value);
+        }
+        if (this.picker_mode === 'HSL') {
+            this.color.setHSL(this.color.hue, saturation, value);
+        }
+
+        this.color_picker.style.left = x - picker_offset + 'px';
+        this.color_picker.style.top = y - picker_offset + 'px';
+
+        this.updatePreviewColor();
+
+        this.notify('value', value);
+        this.notify('lightness', value);
+        this.notify('saturation', saturation);
+
+        this.notify('red', this.color.r);
+        this.notify('green', this.color.g);
+        this.notify('blue', this.color.b);
+        this.notify('hexa', this.color.getHexa());
+
+        notify(this.topic, this.color);
+    };
+
+    ColorPicker.prototype.updateHueSlider = function updateHueSlider (e) {
+        var x = e.pageX - this.hue_area.offsetLeft;
+        var width = this.hue_area.clientWidth;
+
+        if (x < 0) {
+            x = 0;
+        }
+        if (x > width) {
+            x = width;
+        }
+
+        // TODO 360 => 359
+        var hue = ((359 * x) / width) | 0;
+        // if (hue === 360) hue = 359;
+
+        this.updateSliderPosition(this.hue_picker, x);
+        this.setHue(hue);
+    };
+
+    ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider (e) {
+        var x = e.pageX - this.alpha_area.offsetLeft;
+        var width = this.alpha_area.clientWidth;
+
+        if (x < 0) {
+            x = 0;
+        }
+        if (x > width) {
+            x = width;
+        }
+
+        this.color.a = (x / width).toFixed(2);
+
+        this.updateSliderPosition(this.alpha_picker, x);
+        this.updatePreviewColor();
+
+        this.notify('alpha', this.color.a);
+        notify(this.topic, this.color);
+    };
+
+    ColorPicker.prototype.setHue = function setHue (value) {
+        this.color.setHue(value);
+
+        this.updatePickerBackground();
+        this.updatePreviewColor();
+
+        this.notify('red', this.color.r);
+        this.notify('green', this.color.g);
+        this.notify('blue', this.color.b);
+        this.notify('hexa', this.color.getHexa());
+        this.notify('hue', this.color.hue);
+
+        notify(this.topic, this.color);
+    };
+
+    // Updates when one of Saturation/Value/Lightness changes
+    ColorPicker.prototype.updateSLV = function updateSLV () {
+        this.updatePickerPosition();
+        this.updateAlphaGradient();
+        this.updatePreviewColor();
+
+        this.notify('red', this.color.r);
+        this.notify('green', this.color.g);
+        this.notify('blue', this.color.b);
+        this.notify('hexa', this.color.getHexa());
+
+        notify(this.topic, this.color);
+    };
+
+    /** ********************************************************************* **/
+    //				Update positions of various UI elements
+    /** ********************************************************************* **/
+
+    ColorPicker.prototype.updatePickerPosition = function updatePickerPosition () {
+        var size = this.picking_area.clientWidth;
+        var value = 0;
+        var offset = 5;
+
+        if (this.picker_mode === 'HSB') {
+            value = this.color.value;
+        }
+        if (this.picker_mode === 'HSL') {
+            value = this.color.lightness;
+        }
+
+        var x = (this.color.saturation * size / 100) | 0;
+        var y = size - (value * size / 100) | 0;
+
+        this.color_picker.style.left = x - offset + 'px';
+        this.color_picker.style.top = y - offset + 'px';
+    };
+
+    ColorPicker.prototype.updateSliderPosition = function updateSliderPosition (elem, pos) {
+        elem.style.left = Math.max(pos - 3, -2) + 'px';
+    };
+
+    ColorPicker.prototype.updateHuePicker = function updateHuePicker () {
+        var size = this.hue_area.clientWidth;
+        var offset = 1;
+        var pos = (this.color.hue * size / 360) | 0;
+        this.hue_picker.style.left = pos - offset + 'px';
+    };
+
+    /** ********************************************************************* **/
+    //						Update background colors
+    /** ********************************************************************* **/
+
+    ColorPicker.prototype.updatePickerBackground = function updatePickerBackground () {
+        var nc = new Color(this.color);
+        nc.setHSB(nc.hue, 100, 100);
+        this.picking_area.style.backgroundColor = nc.getHexa();
+    };
+
+    ColorPicker.prototype.updatePreviewColor = function updatePreviewColor () {
+        this.preview_color.style.backgroundColor = this.color.getColor();
+    };
+
+    /** ********************************************************************* **/
+    //						Update input elements
+    /** ********************************************************************* **/
+
+    ColorPicker.prototype.inputChangeHue = function inputChangeHue (e) {
+        var value = parseInt(e.target.value);
+        this.setHue(value);
+        this.updateHuePicker();
+    };
+
+    ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation (e) {
+        var value = parseInt(e.target.value);
+        this.color.setSaturation(value);
+        e.target.value = this.color.saturation;
+        this.updateSLV();
+    };
+
+    ColorPicker.prototype.inputChangeValue = function inputChangeValue (e) {
+        var value = parseInt(e.target.value);
+        this.color.setValue(value);
+        e.target.value = this.color.value;
+        this.updateSLV();
+    };
+
+    ColorPicker.prototype.inputChangeLightness = function inputChangeLightness (e) {
+        var value = parseInt(e.target.value);
+        this.color.setLightness(value);
+        e.target.value = this.color.lightness;
+        this.updateSLV();
+    };
+
+    ColorPicker.prototype.inputChangeRed = function inputChangeRed (e) {
+        var value = parseInt(e.target.value);
+        this.color.setByName('r', value);
+        e.target.value = this.color.r;
+        this.setColor(this.color);
+    };
+
+    ColorPicker.prototype.inputChangeGreen = function inputChangeGreen (e) {
+        var value = parseInt(e.target.value);
+        this.color.setByName('g', value);
+        e.target.value = this.color.g;
+        this.setColor(this.color);
+    };
+
+    ColorPicker.prototype.inputChangeBlue = function inputChangeBlue (e) {
+        var value = parseInt(e.target.value);
+        this.color.setByName('b', value);
+        e.target.value = this.color.b;
+        this.setColor(this.color);
+    };
+
+    ColorPicker.prototype.inputChangeHexa = function inputChangeHexa (e) {
+        var value = e.target.value;
+        this.color.setHexa(value);
+        this.setColor(this.color);
+    };
+
+    /** ********************************************************************* **/
+    //							Internal Pub/Sub
+    /** ********************************************************************* **/
+
+    ColorPicker.prototype.subscribe = function subscribe (topic, callback) {
+        this.subscribers[topic] = callback;
+    };
+
+    ColorPicker.prototype.notify = function notify (topic, value) {
+        if (this.subscribers[topic]) {
+            this.subscribers[topic](value);
+        }
+    };
+
+    /** ********************************************************************* **/
+    //							Set Picker Properties
+    /** ********************************************************************* **/
+
+    ColorPicker.prototype.setColor = function setColor (color) {
+        if (color.format !== this.picker_mode) {
+            color.setFormat(this.picker_mode);
+            color.updateHSX();
+        }
+
+        this.color.copy(color);
+        this.updateHuePicker();
+        this.updatePickerPosition();
+        this.updatePickerBackground();
+        this.updatePreviewColor();
+
+        this.notify('red', this.color.r);
+        this.notify('green', this.color.g);
+        this.notify('blue', this.color.b);
+
+        this.notify('hue', this.color.hue);
+        this.notify('saturation', this.color.saturation);
+        this.notify('value', this.color.value);
+        this.notify('lightness', this.color.lightness);
+
+        this.notify('alpha', this.color.a);
+        this.notify('hexa', this.color.getHexa());
+    };
+
+    ColorPicker.prototype.setPickerMode = function setPickerMode (mode) {
+        if (mode !== 'HSB' && mode !== 'HSL') {
+            return;
+        }
+
+        this.picker_mode = mode;
+        this.node.setAttribute('data-mode', this.picker_mode);
+        this.setColor(this.color);
+    };
+
+    /** ********************************************************************* **/
+    //								UNUSED
+    /** ********************************************************************* **/
+
+    var setPickerMode = function setPickerMode (topic, mode) {
+        if (pickers[topic]) {
+            pickers[topic].setPickerMode(mode);
+        }
+    };
+
+    var setColor = function setColor (topic, color) {
+        if (pickers[topic]) {
+            pickers[topic].setColor(color);
+        }
+    };
+
+    var getColor = function getColor (topic) {
+        if (pickers[topic]) {
+            return new Color(pickers[topic].color);
+        }
+    };
+
+    var subscribe = function subscribe (topic, callback) {
+        if (subscribers[topic] === undefined) {
+            subscribers[topic] = [];
+        }
+
+        subscribers[topic].push(callback);
+    };
+
+    var unsubscribe = function unsubscribe (callback) {
+        subscribers.indexOf(callback);
+        subscribers.splice(index, 1);
+    };
+
+    var notify = function notify (topic, value) {
+        if (subscribers[topic] === undefined || subscribers[topic].length === 0) {
+            return;
+        }
+
+        var color = new Color(value);
+        for (var i in subscribers[topic]) {
+            subscribers[topic][i](color);
+        }
+    };
+
+    var init = function init () {
+        var elem = document.querySelectorAll('.ui-color-picker');
+        var size = elem.length;
+        for (var i = 0; i < size; i++) {
+            new ColorPicker(elem[i]);
+        }
+    };
+
+    return {
+        init : init,
+        Color : Color,
+        RGBColor : RGBColor,
+        RGBAColor : RGBAColor,
+        HSBColor : HSBColor,
+        HSBAColor : HSBAColor,
+        HSLColor : HSLColor,
+        HSLAColor : HSLAColor,
+        setColor : setColor,
+        getColor : getColor,
+        subscribe : subscribe,
+        unsubscribe : unsubscribe,
+        setPickerMode : setPickerMode
+    };
+}());
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager () {
+    var subscribers = {};
+    var sliders = [];
+
+    var InputComponent = function InputComponent (obj) {
+        var input = document.createElement('input');
+        input.setAttribute('type', 'text');
+        input.style.width = 50 + obj.precision * 10 + 'px';
+
+        input.addEventListener('click', function (e) {
+            this.select();
+        });
+
+        input.addEventListener('change', function (e) {
+            var value = parseFloat(e.target.value);
+
+            if (isNaN(value) === true) {
+                setValue(obj.topic, obj.value);
+            } else {
+                setValue(obj.topic, value);
+            }
+        });
+
+        return input;
+    };
+
+    var SliderComponent = function SliderComponent (obj, sign) {
+        var slider = document.createElement('div');
+        var startX = null;
+        var start_value = 0;
+
+        slider.addEventListener('click', function (e) {
+            document.removeEventListener('mousemove', sliderMotion);
+            setValue(obj.topic, obj.value + obj.step * sign);
+        });
+
+        slider.addEventListener('mousedown', function (e) {
+            startX = e.clientX;
+            start_value = obj.value;
+            document.body.style.cursor = 'e-resize';
+
+            document.addEventListener('mouseup', slideEnd);
+            document.addEventListener('mousemove', sliderMotion);
+        });
+
+        var slideEnd = function slideEnd (e) {
+            document.removeEventListener('mousemove', sliderMotion);
+            document.body.style.cursor = 'auto';
+            slider.style.cursor = 'pointer';
+        };
+
+        var sliderMotion = function sliderMotion (e) {
+            slider.style.cursor = 'e-resize';
+            var delta = (e.clientX - startX) / obj.sensivity | 0;
+            var value = delta * obj.step + start_value;
+            setValue(obj.topic, value);
+        };
+
+        return slider;
+    };
+
+    var InputSlider = function (node) {
+        var min		= parseFloat(node.getAttribute('data-min'));
+        var max		= parseFloat(node.getAttribute('data-max'));
+        var step	= parseFloat(node.getAttribute('data-step'));
+        var value	= parseFloat(node.getAttribute('data-value'));
+        var topic	= node.getAttribute('data-topic');
+        var unit	= node.getAttribute('data-unit');
+        var name 	= node.getAttribute('data-info');
+        var sensivity = node.getAttribute('data-sensivity') | 0;
+        var precision = node.getAttribute('data-precision') | 0;
+
+        this.min = isNaN(min) ? 0 : min;
+        this.max = isNaN(max) ? 100 : max;
+        this.precision = precision >= 0 ? precision : 0;
+        this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+        this.topic = topic;
+        this.node = node;
+        this.unit = unit === null ? '' : unit;
+        this.sensivity = sensivity > 0 ? sensivity : 5;
+        value = isNaN(value) ? this.min : value;
+
+        var input = new InputComponent(this);
+        var slider_left  = new SliderComponent(this, -1);
+        var slider_right = new SliderComponent(this,  1);
+
+        slider_left.className = 'ui-input-slider-left';
+        slider_right.className = 'ui-input-slider-right';
+
+        if (name) {
+            var info = document.createElement('span');
+            info.className = 'ui-input-slider-info';
+            info.textContent = name;
+            node.appendChild(info);
+        }
+
+        node.appendChild(slider_left);
+        node.appendChild(input);
+        node.appendChild(slider_right);
+
+        this.input = input;
+        sliders[topic] = this;
+        setValue(topic, value);
+    };
+
+    InputSlider.prototype.setInputValue = function setInputValue () {
+        this.input.value = this.value.toFixed(this.precision) + this.unit;
+    };
+
+    var setValue = function setValue (topic, value, send_notify) {
+        var slider = sliders[topic];
+        if (slider === undefined) {
+            return;
+        }
+
+        value = parseFloat(value.toFixed(slider.precision));
+
+        if (value > slider.max) {
+            value = slider.max;
+        }
+        if (value < slider.min)	{
+            value = slider.min;
+        }
+
+        slider.value = value;
+        slider.node.setAttribute('data-value', value);
+
+        slider.setInputValue();
+
+        if (send_notify === false) {
+            return;
+        }
+
+        notify.call(slider);
+    };
+
+    var setMax = function setMax (topic, value) {
+        var slider = sliders[topic];
+        if (slider === undefined) {
+            return;
+        }
+
+        slider.max = value;
+        setValue(topic, slider.value);
+    };
+
+    var setMin = function setMin (topic, value) {
+        var slider = sliders[topic];
+        if (slider === undefined) {
+            return;
+        }
+
+        slider.min = value;
+        setValue(topic, slider.value);
+    };
+
+    var setUnit = function setUnit (topic, unit) {
+        var slider = sliders[topic];
+        if (slider === undefined) {
+            return;
+        }
+
+        slider.unit = unit;
+        setValue(topic, slider.value);
+    };
+
+    var setStep = function setStep (topic, value) {
+        var slider = sliders[topic];
+        if (slider === undefined) {
+            return;
+        }
+
+        slider.step = parseFloat(value);
+        setValue(topic, slider.value);
+    };
+
+    var setPrecision = function setPrecision (topic, value) {
+        var slider = sliders[topic];
+        if (slider === undefined) {
+            return;
+        }
+
+        value = value | 0;
+        slider.precision = value;
+
+        var step = parseFloat(slider.step.toFixed(value));
+        if (step === 0) {
+            slider.step = 1 / Math.pow(10, value);
+        }
+
+        setValue(topic, slider.value);
+    };
+
+    var setSensivity = function setSensivity (topic, value) {
+        var slider = sliders[topic];
+        if (slider === undefined) {
+            return;
+        }
+
+        value = value | 0;
+
+        slider.sensivity = value > 0 ? value : 5;
+    };
+
+    var getNode =  function getNode (topic) {
+        return sliders[topic].node;
+    };
+
+    var getPrecision =  function getPrecision (topic) {
+        return sliders[topic].precision;
+    };
+
+    var getStep =  function getStep (topic) {
+        return sliders[topic].step;
+    };
+
+    var subscribe = function subscribe (topic, callback) {
+        if (subscribers[topic] === undefined) {
+            subscribers[topic] = [];
+        }
+        subscribers[topic].push(callback);
+    };
+
+    var unsubscribe = function unsubscribe (topic, callback) {
+        subscribers[topic].indexOf(callback);
+        subscribers[topic].splice(index, 1);
+    };
+
+    var notify = function notify () {
+        if (subscribers[this.topic] === undefined) {
+            return;
+        }
+        for (var i = 0; i < subscribers[this.topic].length; i++) {
+            subscribers[this.topic][i](this.value);
+        }
+    };
+
+    var createSlider = function createSlider (topic, label) {
+        var slider = document.createElement('div');
+        slider.className = 'ui-input-slider';
+        slider.setAttribute('data-topic', topic);
+
+        if (label !== undefined) {
+            slider.setAttribute('data-info', label);
+        }
+
+        new InputSlider(slider);
+        return slider;
+    };
+
+    var init = function init () {
+        var elem = document.querySelectorAll('.ui-input-slider');
+        var size = elem.length;
+        for (var i = 0; i < size; i++) {
+            new InputSlider(elem[i]);
+        }
+    };
+
+    return {
+        init : init,
+        setMax : setMax,
+        setMin : setMin,
+        setUnit : setUnit,
+        setStep : setStep,
+        getNode : getNode,
+        getStep : getStep,
+        setValue : setValue,
+        subscribe : subscribe,
+        unsubscribe : unsubscribe,
+        setPrecision : setPrecision,
+        setSensivity : setSensivity,
+        getPrecision : getPrecision,
+        createSlider : createSlider,
+    };
+}());
+
+
+'use strict';
+
+var ColorPickerTool = (function ColorPickerTool () {
+    /* ========== Get DOM Element By ID ========== */
+
+    function getElemById (id) {
+        return document.getElementById(id);
+    }
+
+    function allowDropEvent (e) {
+        e.preventDefault();
+    }
+
+    /* ========== Make an element resizable relative to it's parent ========== */
+
+    var UIComponent = (function UIComponent () {
+        function makeResizable (elem, axis) {
+            var valueX = 0;
+            var valueY = 0;
+            var action = 0;
+
+            var resizeStart = function resizeStart (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                if (e.button !== 0) {
+                    return;
+                }
+
+                valueX = e.clientX - elem.clientWidth;
+                valueY = e.clientY - elem.clientHeight;
+
+                document.body.setAttribute('data-resize', axis);
+                document.addEventListener('mousemove', mouseMove);
+                document.addEventListener('mouseup', resizeEnd);
+            };
+
+            var mouseMove = function mouseMove (e) {
+                if (action >= 0) {
+                    elem.style.width = e.clientX - valueX + 'px';
+                }
+                if (action <= 0) {
+                    elem.style.height = e.clientY - valueY + 'px';
+                }
+            };
+
+            var resizeEnd = function resizeEnd (e) {
+                if (e.button !== 0) {
+                    return;
+                }
+
+                document.body.removeAttribute('data-resize', axis);
+                document.removeEventListener('mousemove', mouseMove);
+                document.removeEventListener('mouseup', resizeEnd);
+            };
+
+            var handle = document.createElement('div');
+            handle.className = 'resize-handle';
+
+            if (axis === 'width') {
+                action = 1;
+            } else if (axis === 'height') {
+                action = -1;
+            } else {
+                axis = 'both';
+            }
+
+            handle.className = 'resize-handle';
+            handle.setAttribute('data-resize', axis);
+            handle.addEventListener('mousedown', resizeStart);
+            elem.appendChild(handle);
+        };
+
+        /* ========== Make an element draggable relative to it's parent ========== */
+
+        var makeDraggable = function makeDraggable (elem, endFunction) {
+            var offsetTop;
+            var offsetLeft;
+
+            elem.setAttribute('data-draggable', 'true');
+
+            var dragStart = function dragStart (e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                if (e.target.getAttribute('data-draggable') !== 'true' ||
+                    e.target !== elem || e.button !== 0) {
+                    return;
+                }
+
+                offsetLeft = e.clientX - elem.offsetLeft;
+                offsetTop = e.clientY - elem.offsetTop;
+
+                document.addEventListener('mousemove', mouseDrag);
+                document.addEventListener('mouseup', dragEnd);
+            };
+
+            var dragEnd = function dragEnd (e) {
+                if (e.button !== 0) {
+                    return;
+                }
+
+                document.removeEventListener('mousemove', mouseDrag);
+                document.removeEventListener('mouseup', dragEnd);
+            };
+
+            var mouseDrag = function mouseDrag (e) {
+                elem.style.left = e.clientX - offsetLeft + 'px';
+                elem.style.top = e.clientY - offsetTop + 'px';
+            };
+
+            elem.addEventListener('mousedown', dragStart, false);
+        };
+
+        return {
+            makeResizable : makeResizable,
+            makeDraggable : makeDraggable
+        };
+    }());
+
+    /* ========== Color Class ========== */
+
+    var Color = UIColorPicker.Color;
+    var HSLColor = UIColorPicker.HSLColor;
+
+    /**
+     * ColorPalette
+     */
+    var ColorPalette = (function ColorPalette () {
+        var samples = [];
+        var color_palette;
+        var complementary;
+        var pallete_size = 13;
+
+        var hideNode = function (node) {
+            node.setAttribute('data-hidden', 'true');
+        };
+
+        var ColorSample = function ColorSample (id) {
+            var title = ['Base Colour','Group Background','Background Colour','Navigation Panel','Navigation Hover','Hyperlink Text','Table Row Hover and Selected','Table Header and Footer Text Colour','Table Header and Footer Background',
+                'Table Row Background','Table Row Alternate Background','Header','Text Colour'];
+            var node = document.createElement('div');
+            node.className = 'sample';
+
+            this.uid = samples.length;
+            var index = this.uid % pallete_size;
+            this.node = node;
+            this.color = new Color();
+
+            node.setAttribute('sample-id', this.uid);
+            node.setAttribute('draggable', 'true');
+            node.setAttribute('title', title[index]);
+            node.addEventListener('dragstart', this.dragStart.bind(this));
+            node.addEventListener('click', this.pickColor.bind(this));
+
+            samples.push(this);
+        };
+
+        ColorSample.prototype.updateBgColor = function updateBgColor () {
+            this.node.style.backgroundColor = this.color.getColor();
+        };
+
+        ColorSample.prototype.updateColor = function updateColor (color) {
+            this.color.copy(color);
+            this.updateBgColor();
+        };
+
+        ColorSample.prototype.updateTriadic = function updateTriadic (color, size, steps) {
+            var h = color.hue;
+            if ((steps * 3 / size) < 1 || globalChange) {
+                var hue = h;
+            } else if ((steps * 3 / size) < 2) {
+                if (h - 120 < 0) {
+                    var hue = 240 + h;
+                } else {
+                    var hue = h - 120;
+                }
+            } else {
+                if (h + 120 >= 360) {
+                    var hue = h - 240;
+                } else {
+                    var hue = h + 120;
+                }
+            }
+
+            if (globalChange) {
+                var saturation = color.saturation;
+                var brightness = color.value;
+            } else {
+                var saturation = this.updateSaturation(color.saturation, size / 3, steps % (size / 3));
+                var brightness = this.updateBrightness(color.value, size / 3, steps % (size / 3));
+            }
+
+            if (saturation > 100 || brightness > 100) {
+                var saturation = 0;
+                var brightness = 100;
+            }
+            this.node.removeAttribute('data-hidden');
+            this.color.copy(color);
+            this.color.setValue(brightness);
+            this.color.setSaturation(saturation);
+            this.color.setHue(hue);
+            this.updateBgColor();
+        };
+
+        ColorSample.prototype.updateSaturation = function updateSaturation (s, size, steps) {
+            if (steps) {
+                if (s < 20) {
+                    var saturation = 100 - ((100 / size) * steps);
+                } else if (3 * s / 2 >= 100) {
+                    var saturation = (((200 - s) * steps) + (s * (size - 1) - 200)) / (2 * (size - 2));
+                } else {
+                    var saturation = ((s / (size - 2)) * (steps - 1)) + (s / 2);
+                }
+            } else {
+                var saturation = s;
+            }
+            return saturation;
+        };
+
+        ColorSample.prototype.updateBrightness = function updateBrightness (b, size, steps) {
+            if (steps) {
+                if (b < 20) {
+                    var brightness = (100 / (size - 1)) * steps;
+                } else if (3 * b / 2 >= 100) {
+                    var brightness = (((200 - b) * (size - steps)) + (b * (size - 1) - 200)) / (2 * (size - 2));
+                } else {
+                    var brightness = ((b / (size - 2)) * ((size - steps) - 1)) + (b / 2);
+                }
+            } else {
+                var brightness = b;
+            }
+            return brightness;
+        };
+
+        ColorSample.prototype.updateLightness = function updateLightness (color, value, steps) {
+            var lightness = color.lightness + value * steps;
+            if (lightness <= 0) {
+                this.node.setAttribute('data-hidden', 'true');
+                return;
+            }
+            this.node.removeAttribute('data-hidden');
+            this.color.copy(color);
+            this.color.setLightness(lightness);
+            this.updateBgColor();
+        };
+
+        ColorSample.prototype.updateAdjacent = function updateAdjacent (color, size, steps) {
+            var h = color.hue;
+            if ((steps * 3 / size) < 1 || globalChange) {
+                var hue = h;
+            } else if ((steps * 3 / size) < 2) {
+                if (h - 60 < 0) {
+                    var hue = 300 + h;
+                } else {
+                    var hue = h - 60;
+                }
+            } else {
+                if (h + 60 >= 360) {
+                    var hue = h - 300;
+                } else {
+                    var hue = h + 60;
+                }
+            }
+
+            if (globalChange) {
+                var saturation = color.saturation;
+                var brightness = color.value;
+            } else {
+                var saturation = this.updateSaturation(color.saturation, size / 3, steps % (size / 3));
+                var brightness = this.updateBrightness(color.value, size / 3, steps % (size / 3));
+            }
+
+            if (saturation > 100 || brightness > 100) {
+                var saturation = 0;
+                var brightness = 100;
+            }
+
+            this.node.removeAttribute('data-hidden');
+            this.color.copy(color);
+            this.color.setValue(brightness);
+            this.color.setSaturation(saturation);
+            this.color.setHue(hue);
+            this.updateBgColor();
+        };
+
+        ColorSample.prototype.updateMonochrome = function updateMonochrome (color, size, steps) {
+            if (globalChange) {
+                var saturation = color.saturation;
+                var brightness = color.value;
+            } else {
+                var saturation = this.updateSaturation(color.saturation, size, steps % (size));
+                var brightness = this.updateBrightness(color.value, size, steps % (size));
+            }
+
+            if (saturation > 100 || brightness > 100) {
+                var saturation = 0;
+                var brightness = 100;
+            }
+            this.node.removeAttribute('data-hidden');
+            this.color.copy(color);
+            this.color.setValue(brightness);
+            this.color.setSaturation(saturation);
+            this.updateBgColor();
+        };
+
+        ColorSample.prototype.updateComplementary = function updateComplementary (color, size, steps) {
+            var h = color.hue;
+            if ((steps * 2 / size) < 1 || globalChange) {
+                var hue = h;
+            } else {
+                if (h  < 180) {
+                    var hue = h + 180;
+                } else {
+                    var hue = h - 180;
+                }
+            }
+
+            if (globalChange) {
+                var saturation = color.saturation;
+                var brightness = color.value;
+            } else {
+                var saturation = this.updateSaturation(color.saturation, size / 2, steps % (size / 2));
+                var brightness = this.updateBrightness(color.value, size / 2, steps % (size / 2));
+            }
+
+            if (saturation > 100 || brightness > 100) {
+                var saturation = 0;
+                var brightness = 100;
+            }
+            this.node.removeAttribute('data-hidden');
+            this.color.copy(color);
+            this.color.setValue(brightness);
+            this.color.setSaturation(saturation);
+            this.color.setHue(hue);
+            this.updateBgColor();
+        };
+
+        ColorSample.prototype.pickColor = function pickColor () {
+            if (this.uid % pallete_size === 0) {
+                globalChange = 0;
+            } else {
+                globalChange = this.uid;
+            }
+            UIColorPicker.setColor('picker', this.color);
+        };
+
+        ColorSample.prototype.dragStart = function dragStart (e) {
+            e.dataTransfer.setData('sampleID', this.uid);
+            e.dataTransfer.setData('location', 'palette-samples');
+        };
+
+        ColorSample.prototype.improveContrastRatio = function improveContrastRatio (group , background) {
+            var brightness = 50;
+            var saturation = 50;
+            var max1 = 1;
+            var max2 = 1;
+            var maxBrightness = brightness;
+            var maxSaturation = saturation;
+            for (var i = 0 ; i < 11 ; i ++) {
+                var contrast1 = getColorContrast(this.color,group);
+                var contrast2 = getColorContrast(this.color,background);
+                if (contrast1 > 4.5 && contrast2 > 4.5) {
+                    this.updateBgColor();
+                    return;
+                }
+                if (max1 < contrast1 && max2 < contrast2 && i > 0) {
+                    max1 = contrast1;
+                    max2 = contrast2;
+                    maxBrightness = this.color.value;
+                    maxBrightness = this.color.saturation;
+                }
+                if (i % 2 === 1) {
+                    saturation += i * 10;
+                } else {
+                    saturation = brightness;
+                }
+                brightness = 100 - saturation;
+                this.color.setSaturation(saturation);
+                this.color.setValue(brightness);
+            }
+            this.color.setValue(maxBrightness);
+            this.color.setValue(maxSaturation);
+            this.updateBgColor();
+        };
+
+        var Palette = function Palette (text, size) {
+            this.samples = [];
+
+            var palette = document.createElement('div');
+            var title = document.createElement('div');
+            var container = document.createElement('div');
+
+            container.className = 'container';
+            title.className = 'title';
+            palette.className = 'palette';
+            title.textContent = text;
+
+            container.appendChild(title);
+            container.appendChild(palette);
+
+            for (var i = 0; i < size; i++) {
+                var sample = new ColorSample();
+                this.samples.push(sample);
+                palette.appendChild(sample.node);
+            }
+
+            this.container = container;
+            this.title = title;
+        };
+
+        var paletteTextUpdate = function paletteTextUpdate (palette) {
+            if (document.getElementsByName('text_contrast')[0].checked) {
+                for (var i = 0; i < pallete_size; i++) {
+                    var title = palette.samples[i].node.title;
+                    if (title === 'Group Background') {
+                        var group = palette.samples[i].color;
+                    } if (title === 'Background Colour') {
+                        var background = palette.samples[i].color;
+                    }
+                }
+                for (var i = 0; i < pallete_size; i++) {
+                    var title = palette.samples[i].node.title;
+                    if (title === 'Text Colour' || title === 'Hyperlink Text') {
+                        palette.samples[i].improveContrastRatio(group , background);
+                    }
+                }
+            }
+        };
+
+        var createTriadicPalette = function createTriadicPalette () {
+            var palette = new Palette('Triadic', pallete_size);
+
+            UIColorPicker.subscribe('picker', function (color) {
+                if (globalChange / pallete_size > 0 && globalChange / pallete_size < 1) {
+                    var i = globalChange % pallete_size;
+                    palette.samples[i].updateTriadic(color, pallete_size, i);
+                } else if (globalChange === 0) {
+                    for (var i = 0; i < pallete_size; i++) {
+                        palette.samples[i].updateTriadic(color, pallete_size, i);
+                    }
+                }
+                paletteTextUpdate (palette);
+            });
+            var checkbox = document.getElementsByName('text_contrast')[0];
+            checkbox.addEventListener('click', function () {
+                paletteTextUpdate (palette);
+            });
+
+            color_palette.appendChild(palette.container);
+        };
+
+        var createComplementaryPalette = function createComplementaryPalette () {
+            var palette = new Palette('Complementary', pallete_size);
+
+            UIColorPicker.subscribe('picker', function (color) {
+                if (globalChange / pallete_size > 1 && globalChange / pallete_size < 2) {
+                    var i = globalChange % pallete_size;
+                    palette.samples[i].updateComplementary(color, pallete_size, i);
+                } else if (globalChange === 0) {
+                    for (var i = 0; i < pallete_size; i++) {
+                        palette.samples[i].updateComplementary(color, pallete_size, i);
+                    }
+                }
+                paletteTextUpdate (palette);
+            });
+            var checkbox = document.getElementsByName('text_contrast')[0];
+            checkbox.addEventListener('click', function () {
+                paletteTextUpdate (palette);
+            });
+
+            color_palette.appendChild(palette.container);
+        };
+
+        /* Brightness or Lightness - depends on the picker mode */
+        var createAdjacentPalette = function createAdjacentPalette () {
+            var palette = new Palette('Adjacent', pallete_size);
+
+            UIColorPicker.subscribe('picker', function (color) {
+                if (globalChange / pallete_size > 2 && globalChange / pallete_size < 3) {
+                    var i = globalChange % pallete_size;
+                    palette.samples[i].updateAdjacent(color, pallete_size, i);
+                } else if (globalChange === 0) {
+                    for (var i = 0; i < pallete_size; i++) {
+                        palette.samples[i].updateAdjacent(color, pallete_size, i);
+                    }
+                }
+                paletteTextUpdate (palette);
+            });
+            var checkbox = document.getElementsByName('text_contrast')[0];
+            checkbox.addEventListener('click', function () {
+                paletteTextUpdate (palette);
+            });
+
+            color_palette.appendChild(palette.container);
+        };
+
+        var isBlankPalette = function isBlankPalette (container, value) {
+            if (value === 0) {
+                container.setAttribute('data-collapsed', 'true');
+                return true;
+            }
+
+            container.removeAttribute('data-collapsed');
+            return false;
+        };
+
+        var createMonochromePalette = function createMonochromePalette () {
+            var palette = new Palette('Monochrome', pallete_size);
+
+            UIColorPicker.subscribe('picker', function (color) {
+                if (globalChange / pallete_size > 3) {
+                    var i = globalChange % pallete_size;
+                    palette.samples[i].updateMonochrome(color, pallete_size, i);
+                } else if (globalChange === 0) {
+                    for (var i = 0; i < pallete_size; i++) {
+                        palette.samples[i].updateMonochrome(color, pallete_size, i);
+                    }
+                }
+                paletteTextUpdate (palette);
+            });
+            var checkbox = document.getElementsByName('text_contrast')[0];
+            checkbox.addEventListener('click', function () {
+                paletteTextUpdate (palette);
+            });
+
+            color_palette.appendChild(palette.container);
+        };
+
+        var getSampleColor = function getSampleColor (id) {
+            if (samples[id] !== undefined && samples[id] !== null) {
+                return new Color(samples[id].color);
+            }
+        };
+
+        var getColorContrast = function getColorContrast (c1 , c2) {
+            var lum1 = luminance(c1.r , c1.g , c1.b) + 0.05;
+            var lum2 = luminance(c2.r , c2.g , c2.b) + 0.05;
+            if (lum1 / lum2 > 1) {
+                return lum1 / lum2;
+            } else {
+                return lum2 / lum1;
+            }
+        };
+
+        var luminance = function luminanace (r, g, b) {
+            var a = [r, g, b].map(function (v) {
+                v /= 255;
+                return v <= 0.03928
+                    ? v / 12.92
+                    : Math.pow((v + 0.055) / 1.055, 2.4);
+            });
+            return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+        };
+
+        var init = function init () {
+            color_palette = getElemById('color-palette');
+
+            createTriadicPalette();
+            createComplementaryPalette();
+            createAdjacentPalette();
+            createMonochromePalette();
+        };
+
+        return {
+            init : init,
+            getSampleColor : getSampleColor
+        };
+    }());
+
+    /**
+     * Canvas Samples
+     */
+    var CanvasSamples = (function CanvasSamples () {
+        var active = null;
+        var canvas = null;
+        var samples = [];
+        var zindex = null;
+        var tutorial = true;
+
+        var CanvasSample = function CanvasSample (color, posX, posY) {
+            var node = document.createElement('div');
+            var pick = document.createElement('div');
+            var delete_btn = document.createElement('div');
+            node.className = 'sample';
+            pick.className = 'pick';
+            delete_btn.className = 'delete';
+
+            this.uid = samples.length;
+            this.node = node;
+            this.color = color;
+            this.updateBgColor();
+            this.zIndex = 1;
+
+            node.style.top = posY - 50 + 'px';
+            node.style.left = posX - 50 + 'px';
+            node.setAttribute('sample-id', this.uid);
+
+            node.appendChild(pick);
+            node.appendChild(delete_btn);
+
+            var activate = function activate () {
+                setActiveSample(this);
+            }.bind(this);
+
+            node.addEventListener('dblclick', activate);
+            pick.addEventListener('click', activate);
+            delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+            UIComponent.makeDraggable(node);
+            UIComponent.makeResizable(node);
+
+            samples.push(this);
+            canvas.appendChild(node);
+            return this;
+        };
+
+        CanvasSample.prototype.updateBgColor = function updateBgColor () {
+            this.node.style.backgroundColor = this.color.getColor();
+        };
+
+        CanvasSample.prototype.updateColor = function updateColor (color) {
+            this.color.copy(color);
+            this.updateBgColor();
+        };
+
+        CanvasSample.prototype.updateZIndex = function updateZIndex (value) {
+            this.zIndex = value;
+            this.node.style.zIndex = value;
+        };
+
+        CanvasSample.prototype.activate = function activate () {
+            this.node.setAttribute('data-active', 'true');
+            zindex.setAttribute('data-active', 'true');
+
+            UIColorPicker.setColor('picker', this.color);
+            InputSliderManager.setValue('z-index', this.zIndex);
+        };
+
+        CanvasSample.prototype.deactivate = function deactivate () {
+            this.node.removeAttribute('data-active');
+            zindex.removeAttribute('data-active');
+        };
+
+        CanvasSample.prototype.deleteSample = function deleteSample () {
+            if (active === this) {
+                unsetActiveSample();
+            }
+            canvas.removeChild(this.node);
+            samples[this.uid] = null;
+        };
+
+        CanvasSample.prototype.updatePosition = function updatePosition (posX, posY) {
+            this.node.style.top = posY - this.startY + 'px';
+            this.node.style.left = posX - this.startX + 'px';
+        };
+
+        var canvasDropEvent = function canvasDropEvent (e) {
+            var color = Tool.getSampleColorFrom(e);
+
+            if (color) {
+                var offsetX = e.pageX - canvas.offsetLeft;
+                var offsetY = e.pageY - canvas.offsetTop;
+                var sample = new CanvasSample(color, offsetX, offsetY);
+                if (tutorial) {
+                    tutorial = false;
+                    canvas.removeAttribute('data-tutorial');
+                    var info = new CanvasSample(new Color(), 100, 100);
+                    info.node.setAttribute('data-tutorial', 'dblclick');
+                }
+            }
+        };
+
+        var setActiveSample = function setActiveSample (sample) {
+            ColorPickerSamples.unsetActiveSample();
+            unsetActiveSample();
+            active = sample;
+            active.activate();
+        };
+
+        var unsetActiveSample = function unsetActiveSample () {
+            if (active) {
+                active.deactivate();
+            }
+            active = null;
+        };
+
+        return {
+            unsetActiveSample : unsetActiveSample
+        };
+    }());
+
+    var StateButton = function StateButton (node, state) {
+        this.state = false;
+        this.callback = null;
+
+        node.addEventListener('click', function () {
+            this.state = !this.state;
+            if (typeof this.callback === 'function') {
+                this.callback(this.state);
+            }
+        }.bind(this));
+    };
+
+    StateButton.prototype.set = function set () {
+        this.state = true;
+        if (typeof this.callback === 'function') {
+            this.callback(this.state);
+        }
+    };
+
+    StateButton.prototype.unset = function unset () {
+        this.state = false;
+        if (typeof this.callback === 'function') {
+            this.callback(this.state);
+        }
+    };
+
+    StateButton.prototype.subscribe = function subscribe (func) {
+        this.callback = func;
+    };
+
+    var init = function init () {
+        UIColorPicker.init();
+        InputSliderManager.init();
+        ColorPalette.init();
+    };
+
+    return {
+        init : init
+    };
+}());
+
+AJAX.registerOnload('theme_generator/color_picker.js', function () {
+    $('#save').submit(function (event) {
+        event.preventDefault();
+        var selected = document.getElementById('theme').options.selectedIndex;
+        var palette = document.getElementsByClassName('palette')[selected];
+        var paletteLength = palette.childNodes.length;
+        var container = document.getElementById('save');
+
+        for (var i = 0; i < paletteLength; i++) {
+            var temp = palette.childNodes[i].style.backgroundColor;
+            var tempHex = rgbToHex(temp);
+            var input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = palette.childNodes[i].title;
+            input.value = tempHex;
+            container.appendChild(input);
+        }
+        $.ajax({
+            url: 'theme_generator.php',
+            type: 'POST',
+            data: $(this).serialize(),
+            success: function (result) {
+            }
+        });
+    });
+
+    function rgbToHex (col) {
+        if (col.charAt(0) === 'r') {
+            col = col.replace('rgb(','').replace(')','').split(',');
+            var r = parseInt(col[0], 10).toString(16);
+            var g = parseInt(col[1], 10).toString(16);
+            var b = parseInt(col[2], 10).toString(16);
+            r = r.length === 1 ? '0' + r : r;
+            g = g.length === 1 ? '0' + g : g;
+            b = b.length === 1 ? '0' + b : b;
+            var colHex = '#' + r + g + b;
+            return colHex;
+        }
+    }
+    ColorPickerTool.init();
+    var paletteList = document.getElementsByClassName('palette');
+    var titleList = document.getElementsByClassName('title');
+    for (var i = 0; i < paletteList.length; i++) {
+        (function (i) {
+            paletteList[i].onclick = function () {
+                document.getElementById('theme').options.selectedIndex = i;
+            };
+            titleList[i].onclick = function () {
+                document.getElementById('theme').options.selectedIndex = i;
+            };
+        }(i));
+    }
+});
diff --git a/js/theme_generator/preview.js b/js/theme_generator/preview.js
new file mode 100644
index 0000000000..dbf6d23b33
--- /dev/null
+++ b/js/theme_generator/preview.js
@@ -0,0 +1,103 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Used for generating previews
+ */
+
+AJAX.registerTeardown('theme_generator/preview.js',function () {
+    document.getElementById('pma_navigation').style.background = '';
+    document.getElementById('serverinfo').style.background = '';
+    document.getElementById('lock_page_icon').style.background = '';
+    document.getElementById('page_settings_icon').style.background = '';
+    document.getElementById('goto_pagetop').style.background = '';
+    document.getElementsByTagName('body')[0].style.background = '';
+    document.getElementsByTagName('body')[0].style.color = '';
+    $(document).on(
+        'mouseover',
+        '#pma_navigation_tree.highlight li:not(.fast_filter)',
+        function () {
+            if ($('li:visible', this).length === 0) {
+                $(this).css('background-color','');
+            }
+        }
+    );
+    var head = document.getElementsByTagName('head')[0];
+    head.removeChild(head.lastChild);
+});
+
+$(document).on('click', '#preview' ,function () {
+    var id = document.getElementById('theme').options.selectedIndex;
+    tablePreview(id);
+    navigationPreview(id);
+    bodyPreview(id);
+    headerPreview(id);
+    groupPreview(id);
+});
+
+var tablePreview = function (id) {
+    var tableRow = document.querySelectorAll('[title="Table Row Background"]')[id].style.backgroundColor;
+    var tableAlternateRow = document.querySelectorAll('[title="Table Row Alternate Background"]')[id].style.backgroundColor;
+    var hoverRow = document.querySelectorAll('[title="Table Row Hover and Selected"]')[id].style.backgroundColor;
+    var tableHeader = document.querySelectorAll('[title="Table Header and Footer Background"]')[id].style.backgroundColor;
+    $('.row_preview').css('background',tableRow);
+    $('.row_alternate_preview').css('background',tableAlternateRow);
+    document.getElementById('table_preview').style.display = 'block';
+    var head = document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    var cssText = 'tr.row_preview:not(.nopointer):hover, tr.row_alternate_preview:not(.nopointer):hover , tr.marked:not(.nomarker) td { background:' + hoverRow + '!important }';
+    var hoverDeclarations = document.createTextNode(cssText);
+    var cssText = 'th { background: ' + tableHeader + ' !important}';
+    var headerDeclarations = document.createTextNode(cssText);
+    style.type = 'text/css';
+    if (style.styleSheet) {
+        style.styleSheet.cssText = hoverDeclarations.nodeValue;
+        style.styleSheet.cssText += headerDeclarations.nodeValue;
+    } else {
+        style.appendChild(hoverDeclarations);
+        style.appendChild(headerDeclarations);
+    }
+    head.appendChild(style);
+};
+
+var navigationPreview = function (id) {
+    var navColor = document.querySelectorAll('[title="Navigation Panel"]')[id].style.backgroundColor;
+    var navHover = document.querySelectorAll('[title="Navigation Hover"]')[id].style.backgroundColor;
+    var backgroundColor = document.querySelectorAll('[title="Background Colour"]')[id].style.backgroundColor;
+    document.getElementById('pma_navigation').style.background = 'linear-gradient(to right, ' + navColor + ',' + backgroundColor + ')';
+    $(document).on(
+        'mouseover',
+        '#pma_navigation_tree.highlight li:not(.fast_filter)',
+        function () {
+            if ($('li:visible', this).length === 0) {
+                $(this).css('background-color',navHover);
+            }
+        }
+    );
+    $(document).on(
+        'mouseout',
+        '#pma_navigation_tree.highlight li:not(.fast_filter)',
+        function () {
+            $(this).css('background-color','transparent');
+        }
+    );
+};
+
+var bodyPreview = function (id) {
+    var backgroundColor = document.querySelectorAll('[title="Background Colour"]')[id].style.backgroundColor;
+    var textColor = document.querySelectorAll('[title="Text Colour"]')[id].style.backgroundColor;
+    document.getElementsByTagName('body')[0].style.background = backgroundColor;
+    document.getElementsByTagName('body')[0].style.color = textColor;
+};
+
+var headerPreview = function (id) {
+    var headerColor = document.querySelectorAll('[title="Header"]')[id].style.backgroundColor;
+    document.getElementById('serverinfo').style.background = headerColor;
+    document.getElementById('lock_page_icon').style.background = headerColor;
+    document.getElementById('page_settings_icon').style.background = headerColor;
+    document.getElementById('goto_pagetop').style.background = headerColor;
+};
+
+var groupPreview = function (id) {
+    var groupColor = document.querySelectorAll('[title="Group Background"]')[id].style.backgroundColor;
+    document.getElementById('group_preview').style.display = 'block';
+    document.getElementById('group_preview').style.background = groupColor;
+};
diff --git a/libraries/classes/Theme.php b/libraries/classes/Theme.php
index f8e67d0714..de02021f09 100644
--- a/libraries/classes/Theme.php
+++ b/libraries/classes/Theme.php
@@ -83,6 +83,7 @@ class Theme
         'jqplot',
         'resizable-menu',
         'icons',
+        'theme_generator',
     ];
 
     /**
diff --git a/libraries/classes/ThemeGenerator.php b/libraries/classes/ThemeGenerator.php
new file mode 100644
index 0000000000..c49dca25fe
--- /dev/null
+++ b/libraries/classes/ThemeGenerator.php
@@ -0,0 +1,170 @@
+<?php
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Holds the PhpMyAdmin\ThemeGenerator class
+ *
+ * @package PhpMyAdmin
+ */
+declare(strict_types=1);
+
+namespace PhpMyAdmin;
+
+use PhpMyAdmin\Message;
+use PhpMyAdmin\Sanitize;
+use PhpMyAdmin\Template;
+use PhpMyAdmin\ThemeGenerator\Common;
+use PhpMyAdmin\ThemeGenerator\Layout;
+use PhpMyAdmin\ThemeGenerator\Navigation;
+
+/**
+ * Set of functions for Automated Theme Generator in phpMyAdmin
+ *
+ * @package PhpMyAdmin
+ */
+class ThemeGenerator
+{
+    protected $template;
+
+    /**
+     * Constructor
+     */
+    public function __construct()
+    {
+        $this->template = new Template();
+    }
+
+    /**
+     * Colour Picker HTML file
+     *
+     * @return string HTML for the color picker tool
+     */
+    public function colorPicker()
+    {
+        $output = $this->template->render('theme_generator/color_picker');
+        return $output;
+    }
+
+    /**
+     * File creation form
+     *
+     * @return string HTML for the form submission
+     */
+    public function form()
+    {
+        $output = $this->template->render('theme_generator/form');
+        return $output;
+    }
+
+    /**
+     * Preview panel for Table
+     *
+     * @return string HTML for the preview panels
+     */
+    public function tablePreview()
+    {
+        $output = $this->template->render('theme_generator/table_preview');
+        return $output;
+    }
+
+    /**
+     * Preview panel for Groups
+     *
+     * @return string HTML for the preview panels
+     */
+    public function groupPreview()
+    {
+        $output = $this->template->render('theme_generator/group_preview');
+        return $output;
+    }
+
+    /**
+     * Creates file structure
+     *
+     * @param array $post POST form data
+     *
+     * @return array $out generated file data
+     */
+    public function createFileStructure(array $post)
+    {
+        $out = array();
+        $nav = new Navigation();
+        $layout = new Layout();
+        $common = new Common();
+        $post['theme_name'] = Sanitize::sanitizeFilename($post['theme_name'], true);
+        $name = $post['theme_name'];
+        if (!is_dir("themes/" . $name)) {
+            @mkdir("themes/" . $name);
+            @mkdir("themes/" . $name . "/css");
+        }
+        if (is_dir("themes/" . $name)) {
+            $out['json'] = $this->createJsonFile($post);
+            $common->createCommonFile($name);
+            $out['layout'] = $layout->createLayoutFile($post);
+            $nav->createNavigationFile($name);
+        }
+        return $out;
+    }
+
+    /**
+     * Checks whether the theme directory is writable
+     *
+     * @return null
+     */
+    public function testWritableThemeDirectory()
+    {
+      clearstatcache();
+      if (! is_writable('themes')) {
+        trigger_error(__("The 'themes' directory is not writable by the webserver process. You must change permissions for the theme generator to be able to write the generated theme."), E_USER_WARNING);
+      }
+      return;
+    }
+
+    /**
+     * Creates theme.json
+     *
+     * @param array $post POST data
+     *
+     * @return string $txt JSON file data
+     */
+    public function createJsonFile($post)
+    {
+        $name = $post['theme_name'];
+        $file = fopen("themes/" . $name . "/theme.json", "w");
+        $txt = '{';
+        $txt .= '"name": "' . $name . '",';
+        if ($post['version'] != "") {
+            $txt .= '"version": "' . $post['version'] . '",';
+        } else {
+            $txt .= '"version": "5.0",';
+        }
+        if ($post['description'] != "") {
+            $txt .= '"description": "' . $post['description'] . '",';
+        } else {
+            $txt .= '"description": "Theme Generated by Automated Theme Generator",';
+        }
+        if ($post['author'] != "") {
+            $txt .= '"author": "' . $post['author'] . '",';
+        } else {
+            $txt .= '"author": "",';
+        }
+        if ($post['url'] != "") {
+            $txt .= '"url": "' . $post['url'] . '",';
+        } else {
+            $txt .= '"url": "https://www.phpmyadmin.net/",';
+        }
+        $version = str_split(PMA_VERSION);
+        $trimmed_version = array_slice($version, 0, 3);
+        $txt .= '"supports": ["' . implode($trimmed_version) . '"]';
+        $txt .= '}';
+        // Check if the file is writable as this condition would only occur if files are overwritten.
+        if ($file) {
+            fwrite($file, $txt);
+            fclose($file);
+            return $txt;
+        } else {
+            trigger_error(__("The theme.json file is not writable by the webserver process. You must change permissions for the theme generator to be able to write the generated theme."), E_USER_ERROR);
+            return;
+        }
+    }
+}
+
diff --git a/libraries/classes/ThemeGenerator/Common.php b/libraries/classes/ThemeGenerator/Common.php
new file mode 100644
index 0000000000..e395209adb
--- /dev/null
+++ b/libraries/classes/ThemeGenerator/Common.php
@@ -0,0 +1,3643 @@
+<?php
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Creates common.css.php file
+ *
+ * @package PhpMyAdmin
+ */
+declare(strict_types=1);
+
+namespace PhpMyAdmin\ThemeGenerator;
+
+/**
+ * Function to create Common.inc.php in phpMyAdmin
+ *
+ * @package PhpMyAdmin
+ */
+class Common
+{
+    /**
+     * Creates navigation.css.php
+     *
+     * @param string $name name of new theme
+     *
+     * @return null
+     */
+    public function createCommonFile($name)
+    {
+        $file = fopen("themes/" . $name . "/css/common.css.php", "w");
+        $txt = "<?php\n";
+        $txt .= 'declare(strict_types=1);';
+        $txt .= 'if (! defined(\'PHPMYADMIN\') && ! defined(\'TESTSUITE\')) {';
+        $txt .= '    exit();';
+        $txt .= '}';
+        $txt .= '?>';
+
+        /******************************************************************************/
+        /* general tags */
+        $txt .= 'html {';
+        $txt .= '    font-size: 82%;';
+        $txt .= '}';
+
+        $txt .= 'input,';
+        $txt .= 'select,';
+        $txt .= 'textarea {';
+        $txt .= '    font-size: 1em;';
+        $txt .= '}';
+
+        $txt .= 'body {';
+        $txt .= '<?php if (! empty($GLOBALS[\'cfg\'][\'FontFamily\'])) : ?>';
+        $txt .= '    font-family: <?php echo $GLOBALS[\'cfg\'][\'FontFamily\']; ?>;';
+        $txt .= '<?php endif; ?>';
+        $txt .= '    padding: 0;';
+        $txt .= '    margin: 0;';
+        $txt .= '    margin-<?php echo $left; ?>: 240px;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'MainColor\']; ?>;';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'MainBackground\']; ?>;';
+        $txt .= '}';
+
+        $txt .= 'body#loginform {';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+
+        $txt .= '#page_content {';
+        $txt .= '    margin: 0 .5em;';
+        $txt .= '}';
+
+        $txt .= '.desktop50 {';
+        $txt .= '    width: 50%;';
+        $txt .= '}';
+
+        $txt .= '.all100 {';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+
+        $txt .= '.all85{';
+        $txt .= '    width: 85%;';
+        $txt .= '}';
+
+        $txt .= '.auth_config_tbl{';
+        $txt .= '    margin: 0 auto;';
+        $txt .= '}';
+
+        $txt .= '<?php if (! empty($GLOBALS[\'cfg\'][\'FontFamilyFixed\'])) : ?>';
+        $txt .= '    textarea,';
+        $txt .= '    tt,';
+        $txt .= '    pre,';
+        $txt .= '    code {';
+        $txt .= '    font-family: <?php echo $GLOBALS[\'cfg\'][\'FontFamilyFixed\']; ?>;';
+        $txt .= '    }';
+        $txt .= '<?php endif; ?>';
+
+        $txt .= 'h1 {';
+        $txt .= '    font-size: 140%;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+
+        $txt .= 'h2 {';
+        $txt .= '    font-size: 2em;';
+        $txt .= '    font-weight: normal;';
+        $txt .= '    text-shadow: 0 1px 0 #fff;';
+        $txt .= '    padding: 10px 0 10px;';
+        $txt .= '    padding-<?php echo $left; ?>: 3px;';
+        $txt .= '    color: #777;';
+        $txt .= '}';
+
+        /* Hiding icons in the page titles */
+        $txt .= 'h2 img {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+
+        $txt .= 'h2 a img {';
+        $txt .= '    display: inline;';
+        $txt .= '}';
+
+        $txt .= '.data,';
+        $txt .= '.data_full_width {';
+        $txt .= '    margin: 0 0 12px;';
+        $txt .= '}';
+
+        $txt .= '.data_full_width {';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+
+        $txt .= 'h3 {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+
+        $txt .= 'a,';
+        $txt .= 'a:link,';
+        $txt .= 'a:visited,';
+        $txt .= 'a:active,';
+        $txt .= 'button.mult_submit,';
+        $txt .= '.checkall_box+label {';
+        $txt .= '    text-decoration: none;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'Hyperlink\']; ?>;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    outline: none;';
+        $txt .= '}';
+
+        $txt .= 'a:hover,';
+        $txt .= 'button.mult_submit:hover,';
+        $txt .= 'button.mult_submit:focus,';
+        $txt .= '.checkall_box+label:hover {';
+        $txt .= '    text-decoration: underline;';
+        $txt .= '    color: #235a81;';
+        $txt .= '}';
+
+        $txt .= '#initials_table {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'GroupBg\']; ?>;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    margin-bottom: 10px;';
+        $txt .= '    -moz-border-radius: 5px;';
+        $txt .= '    -webkit-border-radius: 5px;';
+        $txt .= '    border-radius: 5px;';
+        $txt .= '}';
+
+        $txt .= '#initials_table td {';
+        $txt .= '    padding: 8px !important;';
+        $txt .= '}';
+
+        $txt .= '#initials_table a {';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    background: #fff;';
+        $txt .= '    padding: 4px 8px;';
+        $txt .= '    -moz-border-radius: 5px;';
+        $txt .= '    -webkit-border-radius: 5px;';
+        $txt .= '    border-radius: 5px;';
+        $txt .= '    <?php echo $theme->getCssGradient(\'ffffff\', \'e0e0e0\'); ?>';
+        $txt .= '}';
+
+        $txt .= '#initials_table a.active {';
+        $txt .= '    border: 1px solid #666;';
+        $txt .= '    box-shadow: 0 0 2px #999;';
+        $txt .= '    <?php echo $theme->getCssGradient(\'bbbbbb\', \'ffffff\'); ?>';
+        $txt .= '}';
+
+        $txt .= 'dfn {';
+        $txt .= '    font-style: normal;';
+        $txt .= '}';
+
+        $txt .= 'dfn:hover {';
+        $txt .= '    font-style: normal;';
+        $txt .= '    cursor: help;';
+        $txt .= '}';
+
+        $txt .= 'th {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'ThColor\']; ?>;';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'ThBackground\']; ?>;';
+        $txt .= '}';
+
+        $txt .= 'a img {';
+        $txt .= '    border: 0;';
+        $txt .= '}';
+
+        $txt .= 'hr {';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'MainColor\']; ?>;';
+        $txt .= '    background-color: <?php echo $GLOBALS[\'cfg\'][\'MainColor\']; ?>;';
+        $txt .= '    border: 0;';
+        $txt .= '    height: 1px;';
+        $txt .= '}';
+
+        $txt .= 'form {';
+        $txt .= '    padding: 0;';
+        $txt .= '    margin: 0;';
+        $txt .= '    display: inline;';
+        $txt .= '}';
+
+        $txt .= 'input,';
+        $txt .= 'select {';
+        $txt .= '    outline: none;';
+        $txt .= '}';
+
+        $txt .= 'input[type=text],';
+        $txt .= 'input[type=password],';
+        $txt .= 'input[type=number],';
+        $txt .= 'input[type=date] {';
+        $txt .= '    border-radius: 2px;';
+        $txt .= '    -moz-border-radius: 2px;';
+        $txt .= '    -webkit-border-radius: 2px;';
+
+        $txt .= '    background: white;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    color: #555;';
+        $txt .= '    padding: 4px;';
+        $txt .= '}';
+
+        $txt .= 'input[type=text],';
+        $txt .= 'input[type=password],';
+        $txt .= 'input[type=number],';
+        $txt .= 'input[type=date],';
+        $txt .= 'input[type=checkbox],';
+        $txt .= 'select {';
+        $txt .= '    margin: 6px;';
+        $txt .= '}';
+
+        $txt .= 'input[type=number] {';
+        $txt .= '    width: 50px;';
+        $txt .= '}';
+
+        $txt .= 'input[type=text],';
+        $txt .= 'input[type=password],';
+        $txt .= 'input[type=number],';
+        $txt .= 'input[type=date],';
+        $txt .= 'select {';
+        $txt .= '    transition: all 0.2s;';
+        $txt .= '    -ms-transition: all 0.2s;';
+        $txt .= '    -webkit-transition: all 0.2s;';
+        $txt .= '    -moz-transition: all 0.2s;';
+        $txt .= '}';
+
+        $txt .= 'input[type=text][disabled],';
+        $txt .= 'input[type=text][disabled]:hover,';
+        $txt .= 'input[type=password][disabled],';
+        $txt .= 'input[type=password][disabled]:hover,';
+        $txt .= 'input[type=number][disabled],';
+        $txt .= 'input[type=number][disabled]:hover,';
+        $txt .= 'input[type=date][disabled],';
+        $txt .= 'input[type=date][disabled]:hover,';
+        $txt .= 'select[disabled],';
+        $txt .= 'select[disabled]:hover {';
+        $txt .= '    background: #e8e8e8;';
+        $txt .= '    box-shadow: none;';
+        $txt .= '    -webkit-box-shadow: none;';
+        $txt .= '    -moz-box-shadow: none;';
+        $txt .= '}';
+
+        $txt .= 'input[type=text]:hover,';
+        $txt .= 'input[type=text]:focus,';
+        $txt .= 'input[type=password]:hover,';
+        $txt .= 'input[type=password]:focus,';
+        $txt .= 'input[type=number]:hover,';
+        $txt .= 'input[type=number]:focus,';
+        $txt .= 'input[type=date]:hover,';
+        $txt .= 'input[type=date]:focus,';
+        $txt .= 'select:focus {';
+        $txt .= '    border: 1px solid #7c7c7c;';
+        $txt .= '    background: #fff;';
+        $txt .= '}';
+
+        $txt .= 'input[type=text]:hover,';
+        $txt .= 'input[type=password]:hover,';
+        $txt .= 'input[type=number]:hover,';
+        $txt .= 'input[type=date]:hover {';
+        $txt .= '    box-shadow: 0 1px 3px #aaa;';
+        $txt .= '    -webkit-box-shadow: 0 1px 3px #aaa;';
+        $txt .= '    -moz-box-shadow: 0 1px 3px #aaa;';
+        $txt .= '}';
+
+        $txt .= 'input[type=submit],';
+        $txt .= 'input[type=button],';
+        $txt .= 'button[type=submit]:not(.mult_submit) {';
+        $txt .= '    font-weight: bold !important;';
+        $txt .= '}';
+
+        $txt .= 'input[type=submit],';
+        $txt .= 'input[type=button],';
+        $txt .= 'button[type=submit]:not(.mult_submit),';
+        $txt .= 'input[type=reset],';
+        $txt .= 'input[name=submit_reset],';
+        $txt .= 'input.button {';
+        $txt .= '    margin: 6px 14px;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    padding: 3px 7px;';
+        $txt .= '    color: #111;';
+        $txt .= '    text-decoration: none;';
+        $txt .= '    background: #ddd;';
+
+        $txt .= '    border-radius: 12px;';
+        $txt .= '    -webkit-border-radius: 12px;';
+        $txt .= '    -moz-border-radius: 12px;';
+
+        $txt .= '    text-shadow: 0 1px 0 #fff;';
+
+        $txt .= '    <?php echo $theme->getCssGradient(\'f8f8f8\', \'d8d8d8\'); ?>';
+        $txt .= '}';
+
+        $txt .= 'input[type=submit]:hover,';
+        $txt .= 'input[type=button]:hover,';
+        $txt .= 'button[type=submit]:not(.mult_submit):hover,';
+        $txt .= 'input[type=reset]:hover,';
+        $txt .= 'input[name=submit_reset]:hover,';
+        $txt .= 'input.button:hover {';
+        $txt .= '    position: relative;';
+        $txt .= '    <?php echo $theme->getCssGradient(\'fff\', \'ddd\'); ?>';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+
+        $txt .= 'input[type=submit]:active,';
+        $txt .= 'input[type=button]:active,';
+        $txt .= 'button[type=submit]:not(.mult_submit):active,';
+        $txt .= 'input[type=reset]:active,';
+        $txt .= 'input[name=submit_reset]:active,';
+        $txt .= 'input.button:active {';
+        $txt .= '    position: relative;';
+        $txt .= '    <?php echo $theme->getCssGradient(\'eee\', \'ddd\'); ?>';
+        $txt .= '    box-shadow: 0 1px 6px -2px #333 inset;';
+        $txt .= '    text-shadow: none;';
+        $txt .= '}';
+
+        $txt .= 'input[type=submit]:disabled,';
+        $txt .= 'input[type=button]:disabled,';
+        $txt .= 'button[type=submit]:not(.mult_submit):disabled,';
+        $txt .= 'input[type=reset]:disabled,';
+        $txt .= 'input[name=submit_reset]:disabled,';
+        $txt .= 'input.button:disabled {';
+        $txt .= '    background: #ccc;';
+        $txt .= '    color: #666;';
+        $txt .= '    text-shadow: none;';
+        $txt .= '}';
+
+        $txt .= 'textarea {';
+        $txt .= '    overflow: visible;';
+        $txt .= '    margin: 6px;';
+        $txt .= '}';
+
+        $txt .= 'textarea.char {';
+        $txt .= '    margin: 6px;';
+        $txt .= '}';
+
+        $txt .= 'fieldset, .preview_sql {';
+        $txt .= '    margin-top: 1em;';
+        $txt .= '    border-radius: 4px 4px 0 0;';
+        $txt .= '    -moz-border-radius: 4px 4px 0 0;';
+        $txt .= '    -webkit-border-radius: 4px 4px 0 0;';
+        $txt .= '    border: #aaa solid 1px;';
+        $txt .= '    padding: 0.5em;';
+        $txt .= '    background: #eee;';
+        $txt .= '    text-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>1px 1px 2px #fff inset;';
+        $txt .= '    -moz-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>1px 1px 2px #fff inset;';
+        $txt .= '    -webkit-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>1px 1px 2px #fff inset;';
+        $txt .= '    box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>1px 1px 2px #fff inset;';
+        $txt .= '}';
+
+        $txt .= 'fieldset fieldset {';
+        $txt .= '    margin: .8em;';
+        $txt .= '    background: #fff;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    background: #E8E8E8;';
+
+        $txt .= '}';
+
+        $txt .= 'fieldset legend {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    color: #444;';
+        $txt .= '    padding: 5px 10px;';
+        $txt .= '    border-radius: 2px;';
+        $txt .= '    -moz-border-radius: 2px;';
+        $txt .= '    -webkit-border-radius: 2px;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    background-color: #fff;';
+        $txt .= '    -moz-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>3px 3px 15px #bbb;';
+        $txt .= '    -webkit-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>3px 3px 15px #bbb;';
+        $txt .= '    box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>3px 3px 15px #bbb;';
+        $txt .= '    max-width: 100%;';
+        $txt .= '}';
+
+        $txt .= '.some-margin {';
+        $txt .= '    margin: 1.5em;';
+        $txt .= '}';
+
+        /* buttons in some browsers (eg. Konqueror) are block elements, this breaks design */
+        $txt .= 'button {';
+        $txt .= '    display: inline;';
+        $txt .= '}';
+
+        $txt .= 'table caption,';
+        $txt .= 'table th,';
+        $txt .= 'table td {';
+        $txt .= '    padding: .1em .3em;';
+        $txt .= '    margin: .1em;';
+        $txt .= '    vertical-align: middle;';
+        // $txt .= '    text-shadow: 0 1px 0 #fff;';
+        $txt .= '}';
+
+        /* 3.4 */
+        $txt .= '.datatable{';
+        $txt .= '    table-layout: fixed;';
+        $txt .= '}';
+
+        $txt .= 'table {';
+        $txt .= '    border-collapse: collapse;';
+        $txt .= '}';
+
+        $txt .= 'thead th {';
+        $txt .= '    border-right: 1px solid #fff;';
+        $txt .= '}';
+
+        $txt .= 'th {';
+        $txt .= '    text-align: left;';
+        $txt .= '}';
+
+        $txt .= 'img,';
+        $txt .= 'button {';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '}';
+
+        $txt .= 'input[type="checkbox"],';
+        $txt .= 'input[type="radio"] {';
+        $txt .= '    vertical-align: -11%;';
+        $txt .= '}';
+
+        $txt .= 'select {';
+        $txt .= '    -moz-border-radius: 2px;';
+        $txt .= '    -webkit-border-radius: 2px;';
+        $txt .= '    border-radius: 2px;';
+
+        $txt .= '    border: 1px solid #bbb;';
+        $txt .= '    color: #333;';
+        $txt .= '    padding: 3px;';
+        $txt .= '    background: white;';
+        $txt .= '    margin:6px;';
+        $txt .= '}';
+
+        $txt .= 'select[multiple] {';
+        $txt .= '    <?php echo $theme->getCssGradient(\'ffffff\', \'f2f2f2\'); ?>';
+        $txt .= '}';
+
+        /******************************************************************************/
+        /* classes */
+        $txt .= '.clearfloat {';
+        $txt .= '    clear: both;';
+        $txt .= '}';
+
+        $txt .= '.floatleft {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    margin-<?php echo $right; ?>: 1em;';
+        $txt .= '}';
+
+        $txt .= '.floatright {';
+        $txt .= '    float: <?php echo $right; ?>;';
+        $txt .= '}';
+
+        $txt .= '.center {';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+
+        $txt .= '.displayblock {';
+        $txt .= '    display: block;';
+        $txt .= '}';
+
+        $txt .= 'table.nospacing {';
+        $txt .= '    border-spacing: 0;';
+        $txt .= '}';
+
+        $txt .= 'table.nopadding tr th, table.nopadding tr td {';
+        $txt .= '    padding: 0;';
+        $txt .= '}';
+
+        $txt .= 'th.left, td.left {';
+        $txt .= '    text-align: left;';
+        $txt .= '}';
+
+        $txt .= 'th.center, td.center {';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+
+        $txt .= 'th.right, td.right {';
+        $txt .= '    text-align: right;';
+        $txt .= '    padding-right: 1em;';
+        $txt .= '}';
+
+        $txt .= 'tr.vtop th, tr.vtop td, th.vtop, td.vtop {';
+        $txt .= '    vertical-align: top;';
+        $txt .= '}';
+
+        $txt .= 'tr.vmiddle th, tr.vmiddle td, th.vmiddle, td.vmiddle {';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '}';
+
+        $txt .= 'tr.vbottom th, tr.vbottom td, th.vbottom, td.vbottom {';
+        $txt .= '    vertical-align: bottom;';
+        $txt .= '}';
+
+        $txt .= '.paddingtop {';
+        $txt .= '    padding-top: 1em;';
+        $txt .= '}';
+
+        $txt .= '.separator {';
+        $txt .= '    color: #fff;';
+        $txt .= '    text-shadow: 0 1px 0 #000;';
+        $txt .= '}';
+
+        $txt .= 'div.tools {';
+        $txt .= '    /* border: 1px solid #000; */';
+        $txt .= '    padding: .2em;';
+        $txt .= '}';
+
+        $txt .= 'div.tools a {';
+        $txt .= '    color: #3a7ead !important;';
+        $txt .= '}';
+
+        $txt .= 'div.tools,';
+        $txt .= 'fieldset.tblFooters {';
+        $txt .= '    margin-top: 0;';
+        $txt .= '    margin-bottom: .5em;';
+        $txt .= '    border-top: 0;';
+        $txt .= '    text-align: <?php echo $right; ?>;';
+        $txt .= '    float: none;';
+        $txt .= '    clear: both;';
+        $txt .= '    -webkit-border-radius: 0 0 4px 4px;';
+        $txt .= '    -moz-border-radius: 0 0 4px 4px;';
+        $txt .= '    border-radius: 0 0 4px 5px;';
+        $txt .= '}';
+
+        $txt .= 'div.null_div {';
+        $txt .= '    height: 20px;';
+        $txt .= '    text-align: center;';
+        $txt .= '    font-style: normal;';
+        $txt .= '    min-width: 50px;';
+        $txt .= '}';
+
+        $txt .= 'fieldset .formelement {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    margin-<?php echo $right; ?>: .5em;';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '}';
+
+        /* revert for Gecko */
+        $txt .= 'fieldset div[class=formelement] {';
+        $txt .= '    white-space: normal;';
+        $txt .= '}';
+
+        $txt .= 'button.mult_submit {';
+        $txt .= '    border: none;';
+        $txt .= '    background-color: transparent;';
+        $txt .= '}';
+
+        /* odd items 1,3,5,7,... */
+        $txt .= 'table tbody:first-of-type tr:nth-child(odd),';
+        $txt .= 'table tbody:first-of-type tr:nth-child(odd) th,';
+        $txt .= '#table_index tbody:nth-of-type(odd) tr,';
+        $txt .= '#table_index tbody:nth-of-type(odd) th {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'BgOne\']; ?>;';
+        $txt .= '}';
+
+        /* even items 2,4,6,8,... */
+        $txt .= 'table tbody:first-of-type tr:nth-child(even),';
+        $txt .= 'table tbody:first-of-type tr:nth-child(even) th,';
+        $txt .= '#table_index tbody:nth-of-type(even) tr,';
+        $txt .= '#table_index tbody:nth-of-type(even) th {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'BgTwo\']; ?>;';
+        $txt .= '}';
+
+        $txt .= 'table tr th,';
+        $txt .= 'table tr {';
+        $txt .= '    text-align: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        /* marked table rows */
+        $txt .= 'td.marked:not(.nomarker),';
+        $txt .= 'table tr.marked:not(.nomarker) td,';
+        $txt .= 'table tbody:first-of-type tr.marked:not(.nomarker) th,';
+        $txt .= 'table tr.marked:not(.nomarker) {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'BgThree\']; ?>;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'BrowseMarkerColor\']; ?>;';
+        $txt .= '}';
+
+        /* hovered items */
+        $txt .= 'table tbody:first-of-type tr:not(.nopointer):hover,';
+        $txt .= 'table tbody:first-of-type tr:not(.nopointer):hover th,';
+        $txt .= '.hover:not(.nopointer) {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'BgThree\']; ?>;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'BrowsePointerColor\']; ?>;';
+        $txt .= '}';
+
+        /* hovered table rows */
+        $txt .= '#table_index tbody:hover tr,';
+        $txt .= '#table_index tbody:hover th,';
+        $txt .= 'table tr.hover:not(.nopointer) th {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'BgThree\']; ?>;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'BrowsePointerColor\']; ?>;';
+        $txt .= '}';
+
+        /**
+        * marks table rows/cells if the db field is in a where condition
+        */
+        $txt .= '.condition {';
+        $txt .= '    border-color: <?php echo $GLOBALS[\'cfg\'][\'BrowseMarkerBackground\']; ?> !important;';
+        $txt .= '}';
+
+        $txt .= 'th.condition {';
+        $txt .= '    border-width: 1px 1px 0 1px;';
+        $txt .= '    border-style: solid;';
+        $txt .= '}';
+
+        $txt .= 'td.condition {';
+        $txt .= '    border-width: 0 1px 0 1px;';
+        $txt .= '    border-style: solid;';
+        $txt .= '}';
+
+        $txt .= 'tr:last-child td.condition {';
+        $txt .= '    border-width: 0 1px 1px 1px;';
+        $txt .= '}';
+
+        $txt .= '<?php if ($GLOBALS[\'text_dir\'] === \'ltr\') : ?>';
+        $txt .= '    /* for first th which must have right border set (ltr only) */';
+        $txt .= '    .before-condition {';
+        $txt .= '    border-right: 1px solid <?php echo $GLOBALS[\'cfg\'][\'BrowseMarkerBackground\']; ?>;';
+        $txt .= '    }';
+        $txt .= '<?php endif; ?>';
+
+        /**
+        * cells with the value NULL
+        */
+        $txt .= 'td.null {';
+        $txt .= '    font-style: italic;';
+        $txt .= '    color: #7d7d7d;';
+        $txt .= '}';
+
+        $txt .= 'table .valueHeader {';
+        $txt .= '    text-align: <?php echo $right; ?>;';
+        $txt .= '    white-space: normal;';
+        $txt .= '}';
+        $txt .= 'table .value {';
+        $txt .= '    text-align: <?php echo $right; ?>;';
+        $txt .= '    white-space: normal;';
+        $txt .= '}';
+        /* IE doesnt handles 'pre' right */
+        $txt .= 'table [class=value] {';
+        $txt .= '    white-space: normal;';
+        $txt .= '}';
+
+        $txt .= '<?php if (! empty($GLOBALS[\'cfg\'][\'FontFamilyFixed\'])) : ?>';
+        $txt .= '    .value {';
+        $txt .= '    font-family: <?php echo $GLOBALS[\'cfg\'][\'FontFamilyFixed\']; ?>;';
+        $txt .= '    }';
+        $txt .= '<?php endif; ?>';
+        $txt .= '.attention {';
+        $txt .= '    color: red;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+        $txt .= '.allfine {';
+        $txt .= '    color: green;';
+        $txt .= '}';
+
+        $txt .= 'img.lightbulb {';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+
+        $txt .= '.pdflayout {';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    clip: inherit;';
+        $txt .= '    background-color: #fff;';
+        $txt .= '    display: none;';
+        $txt .= '    border: 1px solid #000;';
+        $txt .= '    position: relative;';
+        $txt .= '}';
+
+        $txt .= '.pdflayout_table {';
+        $txt .= '    background: #D3DCE3;';
+        $txt .= '    color: #000;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    clip: inherit;';
+        $txt .= '    z-index: 2;';
+        $txt .= '    display: inline;';
+        $txt .= '    visibility: inherit;';
+        $txt .= '    cursor: move;';
+        $txt .= '    position: absolute;';
+        $txt .= '    font-size: 80%;';
+        $txt .= '    border: 1px dashed #000;';
+        $txt .= '}';
+
+        /* Doc links in SQL */
+        $txt .= '.cm-sql-doc {';
+        $txt .= '    text-decoration: none;';
+        $txt .= '    border-bottom: 1px dotted #000;';
+        $txt .= '    color: inherit !important;';
+        $txt .= '}';
+
+        /* no extra space in table cells */
+        $txt .= 'td .icon {';
+        $txt .= '    image-rendering: pixelated;';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+
+        $txt .= '.selectallarrow {';
+        $txt .= '    margin-<?php echo $right; ?>: .3em;';
+        $txt .= '    margin-<?php echo $left; ?>: .6em;';
+        $txt .= '}';
+
+        /* message boxes: error, confirmation */
+        $txt .= '#pma_errors, #pma_demo, #pma_footer {';
+        $txt .= '    padding: 0 0.5em;';
+        $txt .= '}';
+
+        $txt .= '.success h1,';
+        $txt .= '.notice h1,';
+        $txt .= 'div.error h1 {';
+        $txt .= '    border-bottom: 2px solid;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    text-align: <?php echo $left; ?>;';
+        $txt .= '    margin: 0 0 .2em 0;';
+        $txt .= '}';
+
+        $txt .= 'div.success,';
+        $txt .= 'div.notice,';
+        $txt .= 'div.error {';
+        $txt .= '    margin: .5em 0 0.5em;';
+        $txt .= '    border: 1px solid;';
+        $txt .= '    background-repeat: no-repeat;';
+        $txt .= '    <?php if ($GLOBALS[\'text_dir\'] === \'ltr\') : ?>';
+        $txt .= '        background-position: 10px 50%;';
+        $txt .= '        padding: 10px 10px 10px 10px;';
+        $txt .= '    <?php else : ?>';
+        $txt .= '        background-position: 99% 50%;';
+        $txt .= '        padding: 10px 35px 10px 10px;';
+        $txt .= '        <?php';
+        $txt .= '    endif; ?>';
+
+        $txt .= '    -moz-border-radius: 5px;';
+        $txt .= '    -webkit-border-radius: 5px;';
+        $txt .= '    border-radius: 5px;';
+
+        $txt .= '    -moz-box-shadow: 0 1px 1px #fff inset;';
+        $txt .= '    -webkit-box-shadow: 0 1px 1px #fff inset;';
+        $txt .= '    box-shadow: 0 1px 1px #fff inset;';
+        $txt .= '}';
+
+        $txt .= '.success a,';
+        $txt .= '.notice a,';
+        $txt .= '.error a {';
+        $txt .= '    text-decoration: underline;';
+        $txt .= '}';
+
+        $txt .= '.success {';
+        $txt .= '    color: #000;';
+        $txt .= '    background-color: #ebf8a4;';
+        $txt .= '}';
+
+        $txt .= 'h1.success,';
+        $txt .= 'div.success {';
+        $txt .= '    border-color: #a2d246;';
+        $txt .= '}';
+        $txt .= '.success h1 {';
+        $txt .= '    border-color: #00FF00;';
+        $txt .= '}';
+
+        $txt .= '.notice {';
+        $txt .= '    color: #000;';
+        $txt .= '    background-color: #e8eef1;';
+        $txt .= '}';
+
+        $txt .= 'h1.notice,';
+        $txt .= 'div.notice {';
+        $txt .= '    border-color: #3a6c7e;';
+        $txt .= '}';
+
+        $txt .= '.notice h1 {';
+        $txt .= '    border-color: #ffb10a;';
+        $txt .= '}';
+
+        $txt .= '.error {';
+        $txt .= '    border: 1px solid maroon !important;';
+        $txt .= '    color: #000;';
+        $txt .= '    background: pink;';
+        $txt .= '}';
+
+        $txt .= 'h1.error,';
+        $txt .= 'div.error {';
+        $txt .= '    border-color: #333;';
+        $txt .= '}';
+
+        $txt .= 'div.error h1 {';
+        $txt .= '    border-color: #ff0000;';
+        $txt .= '}';
+
+        $txt .= '.confirmation {';
+        $txt .= '    color: #000;';
+        $txt .= '    background-color: pink;';
+        $txt .= '}';
+
+        $txt .= 'fieldset.confirmation {';
+        $txt .= '}';
+
+        $txt .= 'fieldset.confirmation legend {';
+        $txt .= '}';
+
+        /* end messageboxes */
+
+        $txt .= '.new_central_col{';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+
+        $txt .= '.tblcomment {';
+        $txt .= '    font-size: 70%;';
+        $txt .= '    font-weight: normal;';
+        $txt .= '    color: #000099;';
+        $txt .= '}';
+
+        $txt .= '.tblHeaders {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'ThColor\']; ?>;';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'ThBackground\']; ?>;';
+        $txt .= '}';
+
+        $txt .= 'div.tools,';
+        $txt .= '.tblFooters {';
+        $txt .= '    font-weight: normal;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'ThColor\']; ?>;';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'ThBackground\']; ?>;';
+        $txt .= '}';
+
+        $txt .= '.tblHeaders a:link,';
+        $txt .= '.tblHeaders a:active,';
+        $txt .= '.tblHeaders a:visited,';
+        $txt .= 'div.tools a:link,';
+        $txt .= 'div.tools a:visited,';
+        $txt .= 'div.tools a:active,';
+        $txt .= '.tblFooters a:link,';
+        $txt .= '.tblFooters a:active,';
+        $txt .= '.tblFooters a:visited {';
+        $txt .= '    color: #0000FF;';
+        $txt .= '}';
+
+        $txt .= '.tblHeaders a:hover,';
+        $txt .= 'div.tools a:hover,';
+        $txt .= '.tblFooters a:hover {';
+        $txt .= '    color: #FF0000;';
+        $txt .= '}';
+
+        /* forbidden, no privileges */
+        $txt .= '.noPrivileges {';
+        $txt .= '    color: #FF0000;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+
+        /* disabled text */
+        $txt .= '.disabled,';
+        $txt .= '.disabled a:link,';
+        $txt .= '.disabled a:active,';
+        $txt .= '.disabled a:visited {';
+        $txt .= '    color: #666;';
+        $txt .= '}';
+
+        $txt .= '.disabled a:hover {';
+        $txt .= '    color: #666;';
+        $txt .= '    text-decoration: none;';
+        $txt .= '}';
+
+        $txt .= 'tr.disabled td,';
+        $txt .= 'td.disabled {';
+        $txt .= '    background-color: <?php echo $GLOBALS[\'cfg\'][\'GroupBg\']; ?>;';
+        $txt .= '    color: #aaa;';
+        $txt .= '}';
+
+        $txt .= '.nowrap {';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '}';
+
+        /**
+        * login form
+        */
+        $txt .= 'body#loginform h1,';
+        $txt .= 'body#loginform a.logo {';
+        $txt .= '    display: block;';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+
+        $txt .= 'body#loginform {';
+        $txt .= '    margin-top: 1em;';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+
+        $txt .= 'body#loginform div.container {';
+        $txt .= '    text-align: <?php echo $left; ?>;';
+        $txt .= '    width: 30em;';
+        $txt .= '    margin: 0 auto;';
+        $txt .= '}';
+
+        $txt .= 'form.login label {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    width: 10em;';
+        $txt .= '    font-weight: bolder;';
+        $txt .= '}';
+
+        $txt .= 'form.login input[type=text],';
+        $txt .= 'form.login input[type=password],';
+        $txt .= 'form.login select {';
+        $txt .= '    box-sizing: border-box;';
+        $txt .= '    width: 14em;';
+        $txt .= '}';
+
+        $txt .= '.commented_column {';
+        $txt .= '    border-bottom: 1px dashed #000;';
+        $txt .= '}';
+
+        $txt .= '.column_attribute {';
+        $txt .= '    font-size: 70%;';
+        $txt .= '}';
+
+        $txt .= '.cfg_dbg_demo{';
+        $txt .= '    margin: 0.5em 1em 0.5em 1em;';
+        $txt .= '}';
+
+        $txt .= '.central_columns_navigation{';
+        $txt .= '    padding:1.5% 0em !important;';
+        $txt .= '}';
+
+        $txt .= '.central_columns_add_column{';
+        $txt .= '    display:inline-block;';
+        $txt .= '    margin-left:1%;';
+        $txt .= '    max-width:50%';
+        $txt .= '}';
+
+        $txt .= '.message_errors_found{';
+        $txt .= '    margin-top: 20px;';
+        $txt .= '}';
+
+        $txt .= '.repl_gui_skip_err_cnt{';
+        $txt .= '    width: 30px;';
+        $txt .= '}';
+
+        $txt .= '.font_weight_bold{';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+
+        $txt .= '.color_gray{';
+        $txt .= '    color: gray;';
+        $txt .= '}';
+
+        $txt .= '.pma_sliding_message{';
+        $txt .= '    display: inline-block;';
+        $txt .= '}';
+
+        /******************************************************************************/
+        /* specific elements */
+
+        /* topmenu */
+        $txt .= '#topmenu a {';
+        $txt .= '    text-shadow: 0 1px 0 #fff;';
+        $txt .= '}';
+
+        $txt .= '#topmenu .error {';
+        $txt .= '    background: #eee;border: 0 !important;color: #aaa;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu,';
+        $txt .= 'ul#topmenu2,';
+        $txt .= 'ul.tabs {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    list-style-type: none;';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 0;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu2 {';
+        $txt .= '    margin: .25em .5em 0;';
+        $txt .= '    height: 2em;';
+        $txt .= '    clear: both;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu li,';
+        $txt .= 'ul#topmenu2 li {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    margin: 0;';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '}';
+
+        $txt .= '#topmenu img,';
+        $txt .= '#topmenu2 img {';
+        $txt .= '    margin-right: .5em;';
+        $txt .= '    vertical-align: -3px;';
+        $txt .= '}';
+
+        $txt .= '.menucontainer {';
+        $txt .= '    <?php echo $theme->getCssGradient(\'dddddd\', \'dcdcdc\'); ?>';
+        $txt .= '    border-top: 1px solid #aaa;';
+        $txt .= '}';
+
+        $txt .= '.scrollindicator {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+
+        /* default tab styles */
+        $txt .= '.tabactive {';
+        $txt .= '    background: #fff !important;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu2 a {';
+        $txt .= '    display: block;';
+        $txt .= '    margin: 7px 6px 7px;';
+        $txt .= '    margin-<?php echo $left; ?>: 0;';
+        $txt .= '    padding: 4px 10px;';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '    border: 1px solid #ddd;';
+        $txt .= '    border-radius: 20px;';
+        $txt .= '    -moz-border-radius: 20px;';
+        $txt .= '    -webkit-border-radius: 20px;';
+        $txt .= '    background: #f2f2f2;';
+
+        $txt .= '}';
+
+        $txt .= 'span.caution {';
+        $txt .= '    color: #FF0000;';
+        $txt .= '}';
+        $txt .= 'span.success {';
+        $txt .= '    color: green;';
+        $txt .= '}';
+        $txt .= 'fieldset.caution a {';
+        $txt .= '    color: #FF0000;';
+        $txt .= '}';
+        $txt .= 'fieldset.caution a:hover {';
+        $txt .= '    color: #fff;';
+        $txt .= '    background-color: #FF0000;';
+        $txt .= '}';
+
+        $txt .= '#topmenu {';
+        $txt .= '    margin-top: .5em;';
+        $txt .= '    padding: .1em .3em;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu ul {';
+        $txt .= '    -moz-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>1px 1px 6px #ddd;';
+        $txt .= '    -webkit-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>2px 2px 3px #666;';
+        $txt .= '    box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>2px 2px 3px #666;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu ul.only {';
+        $txt .= '    <?php echo $left; ?>: 0;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu > li {';
+        $txt .= '    border-right: 1px solid #fff;';
+        $txt .= '    border-left: 1px solid #ccc;';
+        $txt .= '    border-bottom: 1px solid #ccc;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu > li:first-child {';
+        $txt .= '    border-left: 0;';
+        $txt .= '}';
+
+        /* default tab styles */
+        $txt .= 'ul#topmenu a,';
+        $txt .= 'ul#topmenu span {';
+        $txt .= '    padding: .6em;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu ul a {';
+        $txt .= '    border-width: 1pt 0 0 0;';
+        $txt .= '    -moz-border-radius: 0;';
+        $txt .= '    -webkit-border-radius: 0;';
+        $txt .= '    border-radius: 0;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu ul li:first-child a {';
+        $txt .= '    border-width: 0;';
+        $txt .= '}';
+
+        /* enabled hover/active tabs */
+        $txt .= 'ul#topmenu > li > a:hover,';
+        $txt .= 'ul#topmenu > li > .tabactive {';
+        $txt .= '    text-decoration: none;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu ul a:hover,';
+        $txt .= 'ul#topmenu ul .tabactive {';
+        $txt .= '    text-decoration: none;';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu a.tab:hover,';
+        $txt .= 'ul#topmenu .tabactive {';
+        $txt .= '    /* background-color: <?php echo $GLOBALS[\'cfg\'][\'MainBackground\']; ?>;  */';
+        $txt .= '}';
+
+        $txt .= 'ul#topmenu2 a.tab:hover,';
+        $txt .= 'ul#topmenu2 a.tabactive {';
+        $txt .= '    background-color: <?php echo $GLOBALS[\'cfg\'][\'BgOne\']; ?>;';
+        $txt .= '    border-radius: .3em;';
+        $txt .= '    -moz-border-radius: .3em;';
+        $txt .= '    -webkit-border-radius: .3em;';
+        $txt .= '    text-decoration: none;';
+        $txt .= '}';
+
+        /* to be able to cancel the bottom border, use <li class="active"> */
+        $txt .= 'ul#topmenu > li.active {';
+        $txt .= '    /* border-bottom: 0pt solid <?php echo $GLOBALS[\'cfg\'][\'MainBackground\']; ?>; */';
+        $txt .= '    border-right: 0;';
+        $txt .= '    border-bottom-color: #fff;';
+        $txt .= '}';
+        /* end topmenu */
+
+        /* zoom search */
+        $txt .= 'div#dataDisplay input,';
+        $txt .= 'div#dataDisplay select {';
+        $txt .= '    margin: 0;';
+        $txt .= '    margin-<?php echo $right; ?>: .5em;';
+        $txt .= '}';
+        $txt .= 'div#dataDisplay th {';
+        $txt .= '    line-height: 2em;';
+        $txt .= '}';
+        $txt .= 'table#tableFieldsId {';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+
+        /* Calendar */
+        $txt .= 'table.calendar {';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+        $txt .= 'table.calendar td {';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+        $txt .= 'table.calendar td a {';
+        $txt .= '    display: block;';
+        $txt .= '}';
+
+        $txt .= 'table.calendar td a:hover {';
+        $txt .= '    background-color: #CCFFCC;';
+        $txt .= '}';
+
+        $txt .= 'table.calendar th {';
+        $txt .= '    background-color: #D3DCE3;';
+        $txt .= '}';
+
+        $txt .= 'table.calendar td.selected {';
+        $txt .= '    background-color: #FFCC99;';
+        $txt .= '}';
+
+        $txt .= 'img.calendar {';
+        $txt .= '    border: none;';
+        $txt .= '}';
+        $txt .= 'form.clock {';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+        /* end Calendar */
+
+        /* table stats */
+        $txt .= 'div#tablestatistics table {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    margin-bottom: .5em;';
+        $txt .= '    margin-<?php echo $right; ?>: 1.5em;';
+        $txt .= '    margin-top: .5em;';
+        $txt .= '    min-width: 16em;';
+        $txt .= '}';
+
+        /* end table stats */
+
+        /* server privileges */
+        $txt .= '#tableuserrights td,';
+        $txt .= '#tablespecificuserrights td,';
+        $txt .= '#tabledatabases td {';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '}';
+        /* end server privileges */
+
+        /* Heading */
+        $txt .= '#topmenucontainer {';
+        $txt .= '    padding-<?php echo $right; ?>: 1em;';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+
+        $txt .= '#serverinfo {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'Header\']; ?>;';
+        $txt .= '    padding: .3em .9em;';
+        $txt .= '    padding-<?php echo $left; ?>: 2.2em;';
+        // $txt .= '    text-shadow: 0 1px 0 #000;';
+        $txt .= '    max-width: 100%;';
+        $txt .= '    max-height: 16px;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '}';
+
+        $txt .= '#serverinfo .item {';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '    color: #fff;';
+        $txt .= '}';
+
+        $txt .= '#page_nav_icons {';
+        $txt .= '    position: fixed;';
+        $txt .= '    top: 0;';
+        $txt .= '    <?php echo $right; ?>: 0;';
+        $txt .= '    z-index: 99;';
+        $txt .= '    padding: .25em 0;';
+        $txt .= '}';
+
+        $txt .= '#goto_pagetop, #lock_page_icon, #page_settings_icon {';
+        $txt .= '    padding: .25em;';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'Header\']; ?>;;';
+        $txt .= '}';
+
+        $txt .= '#page_settings_icon {';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    display: none;';
+        $txt .= '}';
+
+        $txt .= '#page_settings_modal {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+
+        $txt .= '#pma_navigation_settings {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+
+        $txt .= '#span_table_comment {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    font-style: italic;';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '    margin-left: 10px;';
+        $txt .= '    color: #D6D6D6;';
+        $txt .= '    text-shadow: none;';
+        $txt .= '}';
+
+        $txt .= '#serverinfo img {';
+        $txt .= '    margin: 0 .1em 0;';
+        $txt .= '    margin-<?php echo $left; ?>: .2em;';
+        $txt .= '}';
+
+        $txt .= '#textSQLDUMP {';
+        $txt .= '    width: 95%;';
+        $txt .= '    height: 95%;';
+        $txt .= '    font-family: Consolas, "Courier New", Courier, mono;';
+        $txt .= '    font-size: 110%;';
+        $txt .= '}';
+
+        $txt .= '#TooltipContainer {';
+        $txt .= '    position: absolute;';
+        $txt .= '    z-index: 99;';
+        $txt .= '    width: 20em;';
+        $txt .= '    height: auto;';
+        $txt .= '    overflow: visible;';
+        $txt .= '    visibility: hidden;';
+        $txt .= '    background-color: #ffffcc;';
+        $txt .= '    color: #006600;';
+        $txt .= '    border: .1em solid #000;';
+        $txt .= '    padding: .5em;';
+        $txt .= '}';
+
+        /* user privileges */
+        $txt .= '#fieldset_add_user_login div.item {';
+        $txt .= '    border-bottom: 1px solid silver;';
+        $txt .= '    padding-bottom: .3em;';
+        $txt .= '    margin-bottom: .3em;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_add_user_login label {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    display: block;';
+        $txt .= '    width: 10em;';
+        $txt .= '    max-width: 100%;';
+        $txt .= '    text-align: <?php echo $right; ?>;';
+        $txt .= '    padding-<?php echo $right; ?>: .5em;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_add_user_login span.options #select_pred_username,';
+        $txt .= '#fieldset_add_user_login span.options #select_pred_hostname,';
+        $txt .= '#fieldset_add_user_login span.options #select_pred_password {';
+        $txt .= '    width: 100%;';
+        $txt .= '    max-width: 100%;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_add_user_login span.options {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    display: block;';
+        $txt .= '    width: 12em;';
+        $txt .= '    max-width: 100%;';
+        $txt .= '    padding-<?php echo $right; ?>: .5em;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_add_user_login input {';
+        $txt .= '    width: 12em;';
+        $txt .= '    clear: <?php echo $right; ?>;';
+        $txt .= '    max-width: 100%;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_add_user_login span.options input {';
+        $txt .= '    width: auto;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_user_priv div.item {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    width: 9em;';
+        $txt .= '    max-width: 100%;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_user_priv div.item div.item {';
+        $txt .= '    float: none;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_user_priv div.item label {';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_user_priv div.item select {';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_user_global_rights fieldset {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_user_group_rights fieldset {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_user_global_rights>legend input {';
+        $txt .= '    margin-<?php echo $left; ?>: 2em;';
+        $txt .= '}';
+        /* end user privileges */
+
+        /* serverstatus */
+
+        $txt .= '.linkElem:hover {';
+        $txt .= '    text-decoration: underline;';
+        $txt .= '    color: #235a81;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+
+        $txt .= 'h3#serverstatusqueries span {';
+        $txt .= '    font-size: 60%;';
+        $txt .= '    display: inline;';
+        $txt .= '}';
+
+        $txt .= '.buttonlinks {';
+        $txt .= '    float: <?php echo $right; ?>;';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '}';
+
+        /* Also used for the variables page */
+        $txt .= 'fieldset#tableFilter {';
+        $txt .= '    padding: 0.1em 1em;';
+        $txt .= '}';
+
+        $txt .= 'div#serverStatusTabs {';
+        $txt .= '    margin-top: 1em;';
+        $txt .= '}';
+
+        $txt .= 'caption a.top {';
+        $txt .= '    float: <?php echo $right; ?>;';
+        $txt .= '}';
+
+        $txt .= 'div#serverstatusquerieschart {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    width: 500px;';
+        $txt .= '    height: 350px;';
+        $txt .= '    margin-<?php echo $right;?>: 50px;';
+        $txt .= '}';
+
+        $txt .= 'table#serverstatusqueriesdetails,';
+        $txt .= 'table#serverstatustraffic {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= 'table#serverstatusqueriesdetails th {';
+        $txt .= '    min-width: 35px;';
+        $txt .= '}';
+
+        $txt .= 'table#serverstatusvariables {';
+        $txt .= '    width: 100%;';
+        $txt .= '    margin-bottom: 1em;';
+        $txt .= '}';
+        $txt .= 'table#serverstatusvariables .name {';
+        $txt .= '    width: 18em;';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '}';
+        $txt .= 'table#serverstatusvariables .value {';
+        $txt .= '    width: 6em;';
+        $txt .= '}';
+        $txt .= 'table#serverstatusconnections {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    margin-<?php echo $left; ?>: 30px;';
+        $txt .= '}';
+
+        $txt .= 'div#serverstatus table tbody td.descr a,';
+        $txt .= 'div#serverstatus table .tblFooters a {';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '}';
+
+        $txt .= 'div.liveChart {';
+        $txt .= '    clear: both;';
+        $txt .= '    min-width: 500px;';
+        $txt .= '    height: 400px;';
+        $txt .= '    padding-bottom: 80px;';
+        $txt .= '}';
+
+        $txt .= '#addChartDialog input[type="text"] {';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 3px;';
+        $txt .= '}';
+
+        $txt .= 'div#chartVariableSettings {';
+        $txt .= '    border: 1px solid #ddd;';
+        $txt .= '    background-color: #E6E6E6;';
+        $txt .= '    margin-left: 10px;';
+        $txt .= '}';
+
+        $txt .= 'table#chartGrid td {';
+        $txt .= '    padding: 3px;';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+
+        $txt .= 'table#chartGrid div.monitorChart {';
+        $txt .= '    background: #EBEBEB;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    border: none;';
+        $txt .= '}';
+
+        $txt .= 'div.tabLinks {';
+        $txt .= '    margin-left: 0.3em;';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    padding: 5px 0;';
+        $txt .= '}';
+
+        $txt .= 'div.tabLinks a, div.tabLinks label {';
+        $txt .= '    margin-right: 7px;';
+        $txt .= '}';
+
+        $txt .= 'div.tabLinks .icon {';
+        $txt .= '    margin: -0.2em 0.3em 0 0;';
+        $txt .= '}';
+
+        $txt .= '.popupContent {';
+        $txt .= '    display: none;';
+        $txt .= '    position: absolute;';
+        $txt .= '    border: 1px solid #CCC;';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 3px;';
+        $txt .= '    -moz-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>2px 2px 3px #666;';
+        $txt .= '    -webkit-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>2px 2px 3px #666;';
+        $txt .= '    box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>2px 2px 3px #666;';
+        $txt .= '    background-color: #fff;';
+        $txt .= '    z-index: 2;';
+        $txt .= '}';
+
+        $txt .= 'div#logTable {';
+        $txt .= '    padding-top: 10px;';
+        $txt .= '    clear: both;';
+        $txt .= '}';
+
+        $txt .= 'div#logTable table {';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+
+        $txt .= 'div#queryAnalyzerDialog {';
+        $txt .= '    min-width: 700px;';
+        $txt .= '}';
+
+        $txt .= 'div#queryAnalyzerDialog div.CodeMirror-scroll {';
+        $txt .= '    height: auto;';
+        $txt .= '}';
+
+        $txt .= 'div#queryAnalyzerDialog div#queryProfiling {';
+        $txt .= '    height: 300px;';
+        $txt .= '}';
+
+        $txt .= 'div#queryAnalyzerDialog td.explain {';
+        $txt .= '    width: 250px;';
+        $txt .= '}';
+
+        $txt .= 'div#queryAnalyzerDialog table.queryNums {';
+        $txt .= '    display: none;';
+        $txt .= '    border: 0;';
+        $txt .= '    text-align: left;';
+        $txt .= '}';
+
+        $txt .= '.smallIndent {';
+        $txt .= '    padding-<?php echo $left; ?>: 7px;';
+        $txt .= '}';
+
+        /* end serverstatus */
+
+        /* server variables */
+        $txt .= '#serverVariables {';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+        $txt .= '#serverVariables .var-row > td {';
+        $txt .= '    line-height: 2em;';
+        $txt .= '}';
+        $txt .= '#serverVariables .var-header {';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'ThColor\']; ?>;';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'ThBackground\']; ?>;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    text-align: <?php echo $left; ?>;';
+        $txt .= '}';
+        $txt .= '#serverVariables .var-row {';
+        $txt .= '    padding: 0.5em;';
+        $txt .= '    min-height: 18px;';
+        $txt .= '}';
+        $txt .= '#serverVariables .var-name {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+        $txt .= '#serverVariables .var-name.session {';
+        $txt .= '    font-weight: normal;';
+        $txt .= '    font-style: italic;';
+        $txt .= '}';
+        $txt .= '#serverVariables .var-value {';
+        $txt .= '    float: <?php echo $right; ?>;';
+        $txt .= '    text-align: <?php echo $right; ?>;';
+        $txt .= '}';
+        $txt .= '#serverVariables .var-doc {';
+        $txt .= '    overflow:visible;';
+        $txt .= '    float: <?php echo $right; ?>;';
+        $txt .= '}';
+
+        /* server variables editor */
+        $txt .= '#serverVariables .editLink {';
+        $txt .= '    padding-<?php echo $right; ?>: 1em;';
+        $txt .= '    font-family: sans-serif;';
+        $txt .= '}';
+        $txt .= '#serverVariables .serverVariableEditor {';
+        $txt .= '    width: 100%;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '}';
+        $txt .= '#serverVariables .serverVariableEditor input {';
+        $txt .= '    width: 100%;';
+        $txt .= '    margin: 0 0.5em;';
+        $txt .= '    box-sizing: border-box;';
+        $txt .= '    -ms-box-sizing: border-box;';
+        $txt .= '    -moz-box-sizing: border-box;';
+        $txt .= '    -webkit-box-sizing: border-box;';
+        $txt .= '    height: 2.2em;';
+        $txt .= '}';
+        $txt .= '#serverVariables .serverVariableEditor div {';
+        $txt .= '    display: block;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    padding-<?php echo $right; ?>: 1em;';
+        $txt .= '}';
+        $txt .= '#serverVariables .serverVariableEditor a {';
+        $txt .= '    margin: 0 0.5em;';
+        $txt .= '    line-height: 2em;';
+        $txt .= '}';
+        /* end server variables */
+
+        $txt .= 'p.notice {';
+        $txt .= '    margin: 1.5em 0;';
+        $txt .= '    border: 1px solid #000;';
+        $txt .= '    background-repeat: no-repeat;';
+        $txt .= '    <?php if ($GLOBALS[\'text_dir\'] === \'ltr\') : ?>';
+        $txt .= '        background-position: 10px 50%;';
+        $txt .= '        padding: 10px 10px 10px 25px;';
+        $txt .= '    <?php else : ?>';
+        $txt .= '        background-position: 99% 50%;';
+        $txt .= '        padding: 25px 10px 10px 10px';
+        $txt .= '    <?php endif; ?>';
+        $txt .= '    -moz-border-radius: 5px;';
+        $txt .= '    -webkit-border-radius: 5px;';
+        $txt .= '    border-radius: 5px;';
+        $txt .= '    -moz-box-shadow: 0 1px 2px #fff inset;';
+        $txt .= '    -webkit-box-shadow: 0 1px 2px #fff inset;';
+        $txt .= '    box-shadow: 0 1px 2px #fff inset;';
+        $txt .= '    background: #555;';
+        $txt .= '    color: #d4fb6a;';
+        $txt .= '}';
+
+        $txt .= 'p.notice a {';
+        $txt .= '    color: #fff;';
+        $txt .= '    text-decoration: underline;';
+        $txt .= '}';
+
+        /* profiling */
+
+        $txt .= 'div#profilingchart {';
+        $txt .= '    width: 850px;';
+        $txt .= '    height: 370px;';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '#profilingchart .jqplot-highlighter-tooltip{';
+        $txt .= '    top: auto !important;';
+        $txt .= '    left: 11px;';
+        $txt .= '    bottom:24px;';
+        $txt .= '}';
+        /* end profiling */
+
+        /* table charting */
+        $txt .= '#resizer {';
+        $txt .= '    border: 1px solid silver;';
+        $txt .= '}';
+        $txt .= '#inner-resizer { /* make room for the resize handle */';
+        $txt .= '    padding: 10px;';
+        $txt .= '}';
+        $txt .= '.chartOption {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    margin-<?php echo $right;?>: 40px;';
+        $txt .= '}';
+        /* end table charting */
+
+        /* querybox */
+
+        $txt .= '#togglequerybox {';
+        $txt .= '    margin: 0 10px;';
+        $txt .= '}';
+
+        $txt .= '#serverstatus h3';
+        $txt .= '{';
+        $txt .= '    margin: 15px 0;';
+        $txt .= '    font-weight: normal;';
+        $txt .= '    color: #999;';
+        $txt .= '    font-size: 1.7em;';
+        $txt .= '}';
+        $txt .= '#sectionlinks {';
+        $txt .= '    margin-bottom: 15px;';
+        $txt .= '    padding: 16px;';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'GroupBg\']; ?>;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    border-radius: 5px;';
+        $txt .= '    -webkit-border-radius: 5px;';
+        $txt .= '    -moz-border-radius: 5px;';
+        $txt .= '    box-shadow: 0 1px 1px #fff inset;';
+        $txt .= '    -webkit-box-shadow: 0 1px 1px #fff inset;';
+        $txt .= '    -moz-box-shadow: 0 1px 1px #fff inset;';
+        $txt .= '}';
+        $txt .= '#sectionlinks a,';
+        $txt .= '.buttonlinks a,';
+        $txt .= 'a.button {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    text-shadow: 0 1px 0 #fff;';
+        $txt .= '    line-height: 35px;';
+        $txt .= '    margin-<?php echo $left; ?>: 7px;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    padding: 3px 7px;';
+        $txt .= '    color: #111 !important;';
+        $txt .= '    text-decoration: none;';
+        $txt .= '    background: #ddd;';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '    border-radius: 20px;';
+        $txt .= '    -webkit-border-radius: 20px;';
+        $txt .= '    -moz-border-radius: 20px;';
+        $txt .= '    <?php echo $theme->getCssGradient(\'f8f8f8\', \'d8d8d8\'); ?>';
+        $txt .= '}';
+        $txt .= '#sectionlinks a:hover,';
+        $txt .= '.buttonlinks a:hover,';
+        $txt .= 'a.button:hover {';
+        $txt .= '    <?php echo $theme->getCssGradient(\'ffffff\', \'dddddd\'); ?>';
+        $txt .= '}';
+
+        $txt .= 'div#sqlquerycontainer {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    width: 69%;';
+        $txt .= '    /* height: 15em; */';
+        $txt .= '}';
+
+        $txt .= 'div#tablefieldscontainer {';
+        $txt .= '    float: <?php echo $right; ?>;';
+        $txt .= '    width: 29%;';
+        $txt .= '    margin-top: -20px;';
+        $txt .= '    /* height: 15em; */';
+        $txt .= '}';
+
+        $txt .= 'div#tablefieldscontainer select {';
+        $txt .= '    width: 100%;';
+        $txt .= '    background: #fff;';
+        $txt .= '    /* height: 12em; */';
+        $txt .= '}';
+
+        $txt .= 'textarea#sqlquery {';
+        $txt .= '    width: 100%;';
+        $txt .= '    /* height: 100%; */';
+        $txt .= '    -moz-border-radius: 4px;';
+        $txt .= '    -webkit-border-radius: 4px;';
+        $txt .= '    border-radius: 4px;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    padding: 5px;';
+        $txt .= '    font-family: inherit;';
+        $txt .= '}';
+        $txt .= 'textarea#sql_query_edit {';
+        $txt .= '    height: 7em;';
+        $txt .= '    width: 95%;';
+        $txt .= '    display: block;';
+        $txt .= '}';
+        $txt .= 'div#queryboxcontainer div#bookmarkoptions {';
+        $txt .= '    margin-top: .5em;';
+        $txt .= '}';
+        /* end querybox */
+
+        /* main page */
+        $txt .= '#maincontainer {';
+        $txt .= '    /* background-image: url(<?php echo $theme->getImgPath(\'logo_right.png\');?>); */';
+        $txt .= '    /* background-position: <?php echo $right; ?> bottom; */';
+        $txt .= '    /* background-repeat: no-repeat; */';
+        $txt .= '}';
+
+        $txt .= '#mysqlmaininformation,';
+        $txt .= '#pmamaininformation {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    width: 49%;';
+        $txt .= '}';
+
+        $txt .= '#maincontainer ul {';
+        $txt .= '    list-style-type: disc;';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '}';
+
+        $txt .= '#maincontainer li {';
+        $txt .= '    margin-bottom: .3em;';
+        $txt .= '}';
+
+        $txt .= '#full_name_layer {';
+        $txt .= '    position: absolute;';
+        $txt .= '    padding: 2px;';
+        $txt .= '    margin-top: -3px;';
+        $txt .= '    z-index: 801;';
+
+        $txt .= '    border-radius: 3px;';
+        $txt .= '    border: solid 1px <?php echo $GLOBALS[\'cfg\'][\'Header\']; ?>;;';
+        $txt .= '    background: #fff;';
+
+        $txt .= '}';
+        /* end main page */
+
+        /* iconic view for ul items */
+
+        $txt .= 'li.no_bullets {';
+        $txt .= '    list-style-type:none !important;';
+        $txt .= '    margin-left: -25px !important;      //align with other list items which have bullets';
+        $txt .= '}';
+
+        /* end iconic view for ul items */
+
+        $txt .= '#body_browse_foreigners {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'NaviBackground\']; ?>;';
+        $txt .= '    margin: .5em .5em 0 .5em;';
+        $txt .= '}';
+
+        $txt .= '#bodythemes {';
+        $txt .= '    width: 500px;';
+        $txt .= '    margin: auto;';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+
+        $txt .= '#bodythemes img {';
+        $txt .= '    border: .1em solid #000;';
+        $txt .= '}';
+
+        $txt .= '#bodythemes a:hover img {';
+        $txt .= '    border: .1em solid red;';
+        $txt .= '}';
+
+        $txt .= '#fieldset_select_fields {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '#selflink {';
+        $txt .= '    clear: both;';
+        $txt .= '    display: block;';
+        $txt .= '    margin-top: 1em;';
+        $txt .= '    margin-bottom: 1em;';
+        $txt .= '    width: 98%;';
+        $txt .= '    margin-<?php echo $left; ?>: 1%;';
+        $txt .= '    border-top: .1em solid silver;';
+        $txt .= '    text-align: <?php echo $right; ?>;';
+        $txt .= '}';
+
+        $txt .= '#table_innodb_bufferpool_usage,';
+        $txt .= '#table_innodb_bufferpool_activity {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '#div_mysql_charset_collations table {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '#div_mysql_charset_collations table th,';
+        $txt .= '#div_mysql_charset_collations table td {';
+        $txt .= '    padding: 0.4em;';
+        $txt .= '}';
+
+        $txt .= '#div_mysql_charset_collations table th#collationHeader {';
+        $txt .= '    width: 35%;';
+        $txt .= '}';
+
+        $txt .= '#qbe_div_table_list {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '#qbe_div_sql_query {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= 'label.desc {';
+        $txt .= '    width: 30em;';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= 'label.desc sup {';
+        $txt .= '    position: absolute;';
+        $txt .= '}';
+
+        $txt .= 'code.php {';
+        $txt .= '    display: block;';
+        $txt .= '    padding-left: 1em;';
+        $txt .= '    margin-top: 0;';
+        $txt .= '    margin-bottom: 0;';
+        $txt .= '    max-height: 10em;';
+        $txt .= '    overflow: auto;';
+        $txt .= '    direction: ltr;';
+        $txt .= '}';
+
+        $txt .= 'code.sql,';
+        $txt .= 'div.sqlvalidate {';
+        $txt .= '    display: block;';
+        $txt .= '    padding: 1em;';
+        $txt .= '    margin-top: 0;';
+        $txt .= '    margin-bottom: 0;';
+        $txt .= '    max-height: 10em;';
+        $txt .= '    overflow: auto;';
+        $txt .= '    direction: ltr;';
+        $txt .= '}';
+
+        $txt .= '.result_query div.sqlOuter {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'BgOne\']; ?>;';
+        $txt .= '    text-align: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '.result_query .success, .result_query .error {';
+        $txt .= '    margin-bottom: 0;';
+        $txt .= '    border-bottom: none !important;';
+        $txt .= '    border-bottom-left-radius: 0;';
+        $txt .= '    border-bottom-right-radius: 0;';
+        $txt .= '    padding-bottom: 5px;';
+        $txt .= '}';
+
+        $txt .= '#PMA_slidingMessage code.sql,';
+        $txt .= 'div.sqlvalidate {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'BgOne\']; ?>;';
+        $txt .= '}';
+
+        $txt .= '#main_pane_left {';
+        $txt .= '    width: 60%;';
+        $txt .= '    min-width: 260px;';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    padding-top: 1em;';
+        $txt .= '}';
+
+        $txt .= '#main_pane_right {';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    min-width: 160px;';
+        $txt .= '    padding-top: 1em;';
+        $txt .= '    padding-<?php echo $left; ?>: 1em;';
+        $txt .= '    padding-<?php echo $right; ?>: .5em;';
+        $txt .= '}';
+
+        $txt .= '.group {';
+
+        $txt .= '    border: 1px solid #999;';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'GroupBg\']; ?>;';
+        $txt .= '    -moz-border-radius: 4px;';
+        $txt .= '    -webkit-border-radius: 4px;';
+        $txt .= '    border-radius: 4px;';
+        $txt .= '    margin-bottom: 1em;';
+        $txt .= '    padding-bottom: 1em;';
+        $txt .= '}';
+
+        $txt .= '.group h2 {';
+        $txt .= '    background-color: #bbb;';
+        $txt .= '    padding: .1em .3em;';
+        $txt .= '    margin-top: 0;';
+        $txt .= '    color: #fff;';
+        $txt .= '    font-size: 1.6em;';
+        $txt .= '    font-weight: normal;';
+        $txt .= '    text-shadow: 0 1px 0 #777;';
+        $txt .= '    -moz-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>1px 1px 15px #999 inset;';
+        $txt .= '    -webkit-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>1px 1px 15px #999 inset;';
+        $txt .= '    box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>1px 1px 15px #999 inset;';
+        $txt .= '}';
+
+        $txt .= '.group-cnt {';
+        $txt .= '    padding: 0;';
+        $txt .= '    padding-<?php echo $left; ?>: .5em;';
+        $txt .= '    display: inline-block;';
+        $txt .= '    width: 98%;';
+        $txt .= '}';
+
+        $txt .= 'textarea#partitiondefinition {';
+        $txt .= '    height: 3em;';
+        $txt .= '}';
+
+        /* for elements that should be revealed only via js */
+        $txt .= '.hide {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+
+        $txt .= '#list_server {';
+        $txt .= '    list-style-type: none;';
+        $txt .= '    padding: 0;';
+        $txt .= '}';
+
+        /**';
+        $txt .= '  *  Progress bar styles';
+        $txt .= '  */
+        $txt .= 'div.upload_progress';
+        $txt .= '{';
+        $txt .= '    width: 400px;';
+        $txt .= '    margin: 3em auto;';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+
+        $txt .= 'div.upload_progress_bar_outer';
+        $txt .= '{';
+        $txt .= '    border: 1px solid #000;';
+        $txt .= '    width: 202px;';
+        $txt .= '    position: relative;';
+        $txt .= '    margin: 0 auto 1em;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'MainColor\']; ?>;';
+        $txt .= '}';
+
+        $txt .= 'div.upload_progress_bar_inner';
+        $txt .= '{';
+        $txt .= '    background-color: <?php echo $GLOBALS[\'cfg\'][\'NaviPointerBackground\']; ?>;';
+        $txt .= '    width: 0;';
+        $txt .= '    height: 12px;';
+        $txt .= '    margin: 1px;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'BrowseMarkerColor\']; ?>;';
+        $txt .= '    position: relative;';
+        $txt .= '}';
+
+        $txt .= 'div.upload_progress_bar_outer div.percentage';
+        $txt .= '{';
+        $txt .= '    position: absolute;';
+        $txt .= '    top: 0;';
+        $txt .= '    <?php echo $left; ?>: 0;';
+        $txt .= '    width: 202px;';
+        $txt .= '}';
+
+        $txt .= 'div.upload_progress_bar_inner div.percentage';
+        $txt .= '{';
+        $txt .= '    top: -1px;';
+        $txt .= '    <?php echo $left; ?>: -1px;';
+        $txt .= '}';
+
+        $txt .= 'div#statustext {';
+        $txt .= '    margin-top: .5em;';
+        $txt .= '}';
+
+        $txt .= 'table#serverconnection_src_remote,';
+        $txt .= 'table#serverconnection_trg_remote,';
+        $txt .= 'table#serverconnection_src_local,';
+        $txt .= 'table#serverconnection_trg_local  {';
+        $txt .= '  float: <?php echo $left; ?>;';
+        $txt .= '}';
+        /**
+        *  Validation error message styles
+        */
+        $txt .= 'input[type=text].invalid_value,';
+        $txt .= 'input[type=password].invalid_value,';
+        $txt .= 'input[type=number].invalid_value,';
+        $txt .= 'input[type=date].invalid_value,';
+        $txt .= 'select.invalid_value,';
+        $txt .= '.invalid_value {';
+        $txt .= '    background: #FFCCCC;';
+        $txt .= '}';
+
+        /**
+          *  Ajax notification styling
+          */
+        $txt .= '.ajax_notification {';
+        $txt .= '   top: 0;           /** The notification needs to be shown on the top of the page */';
+        $txt .= '   position: fixed;';
+        $txt .= '   margin-top: 0;';
+        $txt .= '   margin-right: auto;';
+        $txt .= '   margin-bottom: 0;';
+        $txt .= '   margin-<?php echo $left; ?>: auto;';
+        $txt .= '   padding: 5px;   /** Keep a little space on the sides of the text */';
+        $txt .= '   width: 350px;';
+
+        $txt .= '   z-index: 1100;      /** If this is not kept at a high z-index, the jQueryUI modal dialogs (z-index: 1000) might hide this */';
+        $txt .= '   text-align: center;';
+        $txt .= '   display: inline;';
+        $txt .= '   left: 0;';
+        $txt .= '   right: 0;';
+        $txt .= '   background-image: url(<?php echo $theme->getImgPath(\'ajax_clock_small.gif\');?>);';
+        $txt .= '   background-repeat: no-repeat;';
+        $txt .= '   background-position: 2%;';
+        $txt .= '   border: 1px solid #e2b709;';
+        $txt .= '}';
+
+        /* additional styles */
+        $txt .= '.ajax_notification {';
+        $txt .= '    margin-top: 200px;';
+        $txt .= '    background: #ffe57e;';
+        $txt .= '    border-radius: 5px;';
+        $txt .= '    -moz-border-radius: 5px;';
+        $txt .= '    -webkit-border-radius: 5px;';
+        $txt .= '    box-shadow: 0 5px 90px <?php echo $GLOBALS[\'cfg\'][\'Header\']; ?>;;';
+        $txt .= '    -moz-box-shadow: 0 5px 90px <?php echo $GLOBALS[\'cfg\'][\'Header\']; ?>;;';
+        $txt .= '    -webkit-box-shadow: 0 5px 90px <?php echo $GLOBALS[\'cfg\'][\'Header\']; ?>;;';
+        $txt .= '}';
+
+        $txt .= '#loading_parent {';
+        $txt .= '    /** Need this parent to properly center the notification division */';
+        $txt .= '    position: relative;';
+        $txt .= '    width: 100%;';
+        $txt .= ' }';
+        /**
+        * Export and Import styles
+        */
+
+        $txt .= '.export_table_list_container {';
+        $txt .= '    display: inline-block;';
+        $txt .= '    max-height: 20em;';
+        $txt .= '    overflow-y: scroll;';
+        $txt .= '}';
+
+        $txt .= '.export_table_select th {';
+        $txt .= '    text-align: center;';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '}';
+
+        $txt .= '.export_table_select .all {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    border-bottom: 1px solid black;';
+        $txt .= '}';
+
+        $txt .= '.export_structure, .export_data {';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+
+        $txt .= '.export_table_name {';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '}';
+
+        $txt .= '.exportoptions h2 {';
+        $txt .= '    word-wrap: break-word;';
+        $txt .= '}';
+
+        $txt .= '.exportoptions h3,';
+        $txt .= '.importoptions h3 {';
+        $txt .= '    border-bottom: 1px #999 solid;';
+        $txt .= '    font-size: 110%;';
+        $txt .= '}';
+
+        $txt .= '.exportoptions ul,';
+        $txt .= '.importoptions ul,';
+        $txt .= '.format_specific_options ul {';
+        $txt .= '    list-style-type: none;';
+        $txt .= '    margin-bottom: 15px;';
+        $txt .= '}';
+
+        $txt .= '.exportoptions li,';
+        $txt .= '.importoptions li {';
+        $txt .= '    margin: 7px;';
+        $txt .= '}';
+        $txt .= '.exportoptions label,';
+        $txt .= '.importoptions label,';
+        $txt .= '.exportoptions p,';
+        $txt .= '.importoptions p {';
+        $txt .= '    margin: 5px;';
+        $txt .= '    float: none;';
+        $txt .= '}';
+
+        $txt .= '#csv_options label.desc,';
+        $txt .= '#ldi_options label.desc,';
+        $txt .= '#latex_options label.desc,';
+        $txt .= '#output label.desc {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    width: 15em;';
+        $txt .= '}';
+
+        $txt .= '.exportoptions,';
+        $txt .= '.importoptions {';
+        $txt .= '    margin: 20px 30px 30px;';
+        $txt .= '    margin-<?php echo $left; ?>: 10px;';
+        $txt .= '}';
+
+        $txt .= '.exportoptions #buttonGo,';
+        $txt .= '.importoptions #buttonGo {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    margin-<?php echo $left; ?>: 14px;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    padding: 5px 12px;';
+        $txt .= '    color: #111;';
+        $txt .= '    text-decoration: none;';
+
+        $txt .= '    border-radius: 12px;';
+        $txt .= '    -webkit-border-radius: 12px;';
+        $txt .= '    -moz-border-radius: 12px;';
+
+        $txt .= '    text-shadow: 0 1px 0 #fff;';
+
+        $txt .= '    <?php echo $theme->getCssGradient(\'ffffff\', \'cccccc\'); ?>';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+
+        $txt .= '.format_specific_options h3 {';
+        $txt .= '    margin: 10px 0 0;';
+        $txt .= '    margin-<?php echo $left; ?>: 10px;';
+        $txt .= '    border: 0;';
+        $txt .= '}';
+
+        $txt .= '.format_specific_options {';
+        $txt .= '    border: 1px solid #999;';
+        $txt .= '    margin: 7px 0;';
+        $txt .= '    padding: 3px;';
+        $txt .= '}';
+
+        $txt .= 'p.desc {';
+        $txt .= '    margin: 5px;';
+        $txt .= '}';
+
+        /**
+        * Export styles only
+        */
+        $txt .= 'select#db_select,';
+        $txt .= 'select#table_select {';
+        $txt .= '    width: 400px;';
+        $txt .= '}';
+
+        $txt .= '.export_sub_options {';
+        $txt .= '    margin: 20px 0 0;';
+        $txt .= '    margin-<?php echo $left; ?>: 30px;';
+        $txt .= '}';
+
+        $txt .= '.export_sub_options h4 {';
+        $txt .= '    border-bottom: 1px #999 solid;';
+        $txt .= '}';
+
+        $txt .= '.export_sub_options li.subgroup {';
+        $txt .= '    display: inline-block;';
+        $txt .= '    margin-top: 0;';
+        $txt .= '}';
+
+        $txt .= '.export_sub_options li {';
+        $txt .= '    margin-bottom: 0;';
+        $txt .= '}';
+        $txt .= '#export_refresh_form {';
+        $txt .= '    margin-left: 20px;';
+        $txt .= '}';
+        $txt .= '#export_back_button {';
+        $txt .= '    display: inline;';
+        $txt .= '}';
+        $txt .= '#output_quick_export {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        /**
+        * Import styles only
+        */
+
+        $txt .= '.importoptions #import_notification {';
+        $txt .= '    margin: 10px 0;';
+        $txt .= '    font-style: italic;';
+        $txt .= '}';
+
+        $txt .= 'input#input_import_file {';
+        $txt .= '    margin: 5px;';
+        $txt .= '}';
+
+        $txt .= '.formelementrow {';
+        $txt .= '    margin: 5px 0 5px 0;';
+        $txt .= '}';
+
+        $txt .= '#filterText {';
+        $txt .= '    vertical-align: baseline;';
+        $txt .= '}';
+
+        $txt .= '#popup_background {';
+        $txt .= '    display: none;';
+        $txt .= '    position: fixed;';
+        $txt .= '    _position: absolute; /* hack for IE6 */';
+        $txt .= '    width: 100%;';
+        $txt .= '    height: 100%;';
+        $txt .= '    top: 0;';
+        $txt .= '    <?php echo $left; ?>: 0;';
+        $txt .= '    background: #000;';
+        $txt .= '    z-index: 1000;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '}';
+
+        /**
+        * Table structure styles
+        */
+        $txt .= '#fieldsForm ul.table-structure-actions {';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 0;';
+        $txt .= '    list-style: none;';
+        $txt .= '}';
+        $txt .= '#fieldsForm ul.table-structure-actions li {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    margin-<?php echo $right; ?>: 0.3em; /* same as padding of "table td" */';
+        $txt .= '}';
+        $txt .= '#fieldsForm ul.table-structure-actions .submenu li {';
+        $txt .= '    padding: 0;';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+        $txt .= '#fieldsForm ul.table-structure-actions .submenu li span {';
+        $txt .= '    padding: 0.3em;';
+        $txt .= '    margin: 0.1em;';
+        $txt .= '}';
+        $txt .= '#structure-action-links a {';
+        $txt .= '    margin-<?php echo $right; ?>: 1em;';
+        $txt .= '}';
+        $txt .= '#addColumns input[type="radio"] {';
+        $txt .= '    margin: 3px 0 0;';
+        $txt .= '    margin-<?php echo $left; ?>: 1em;';
+        $txt .= '}';
+        /**
+        * Indexes
+        */
+        $txt .= '#index_frm .index_info input[type="text"],';
+        $txt .= '#index_frm .index_info select {';
+        $txt .= '    width: 100%;';
+        $txt .= '    margin: 0;';
+        $txt .= '    box-sizing: border-box;';
+        $txt .= '    -ms-box-sizing: border-box;';
+        $txt .= '    -moz-box-sizing: border-box;';
+        $txt .= '    -webkit-box-sizing: border-box;';
+        $txt .= '}';
+
+        $txt .= '#index_frm .index_info div {';
+        $txt .= '    padding: .2em 0;';
+        $txt .= '}';
+
+        $txt .= '#index_frm .index_info .label {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    min-width: 12em;';
+        $txt .= '}';
+
+        $txt .= '#index_frm .slider {';
+        $txt .= '    width: 10em;';
+        $txt .= '    margin: .6em;';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '#index_frm .add_fields {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '#index_frm .add_fields input {';
+        $txt .= '    margin-<?php echo $left; ?>: 1em;';
+        $txt .= '}';
+
+        $txt .= '#index_frm input {';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+
+        $txt .= '#index_frm td {';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '}';
+
+        $txt .= 'table#index_columns {';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+
+        $txt .= 'table#index_columns select {';
+        $txt .= '    width: 85%;';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+
+        $txt .= '#move_columns_dialog div {';
+        $txt .= '    padding: 1em;';
+        $txt .= '}';
+
+        $txt .= '#move_columns_dialog ul {';
+        $txt .= '    list-style: none;';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 0;';
+        $txt .= '}';
+
+        $txt .= '#move_columns_dialog li {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'ThBackground\']; ?>;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'ThColor\']; ?>;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    margin: .4em;';
+        $txt .= '    padding: .2em;';
+        $txt .= '    -webkit-border-radius: 2px;';
+        $txt .= '    -moz-border-radius: 2px;';
+        $txt .= '    border-radius: 2px;';
+        $txt .= '}';
+
+        /* config forms */
+        $txt .= '.config-form ul.tabs {';
+        $txt .= '    margin: 1.1em .2em 0;';
+        $txt .= '    padding: 0 0 .3em 0;';
+        $txt .= '    list-style: none;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+
+        $txt .= '.config-form ul.tabs li {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    margin-bottom: -1px;';
+        $txt .= '}';
+
+        $txt .= '.config-form ul.tabs li a {';
+        $txt .= '    display: block;';
+        $txt .= '    margin: .1em .2em 0;';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '    text-decoration: none;';
+        $txt .= '    border: 1px solid <?php echo $GLOBALS[\'cfg\'][\'BgTwo\']; ?>;';
+        $txt .= '    border-bottom: 1px solid #aaa;';
+        $txt .= '}';
+
+        $txt .= '.config-form ul.tabs li a {';
+        $txt .= '    padding: 7px 10px;';
+        $txt .= '    -webkit-border-radius: 5px 5px 0 0;';
+        $txt .= '    -moz-border-radius: 5px 5px 0 0;';
+        $txt .= '    border-radius: 5px 5px 0 0;';
+        $txt .= '    background: #f2f2f2;';
+        $txt .= '    color: #555;';
+        $txt .= '    text-shadow: 0 1px 0 #fff;';
+        $txt .= '}';
+
+        $txt .= '.config-form ul.tabs li a:hover,';
+        $txt .= '.config-form ul.tabs li a:active {';
+        $txt .= '    background: #e5e5e5;';
+        $txt .= '}';
+
+        $txt .= '.config-form ul.tabs li.active a {';
+        $txt .= '    background-color: #fff;';
+        $txt .= '    margin-top: 1px;';
+        $txt .= '    color: #000;';
+        $txt .= '    text-shadow: none;';
+        $txt .= '    border-color: #aaa;';
+        $txt .= '    border-bottom: 1px solid #fff;';
+        $txt .= '}';
+
+        $txt .= '.config-form fieldset {';
+        $txt .= '    margin-top: 0;';
+        $txt .= '    padding: 0;';
+        $txt .= '    clear: both;';
+        $txt .= '    -webkit-border-radius: 0;';
+        $txt .= '    -moz-border-radius: 0;';
+        $txt .= '    border-radius: 0;';
+        $txt .= '}';
+
+        $txt .= '.config-form legend {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+
+        $txt .= '.config-form fieldset p {';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: .5em;';
+        $txt .= '    background: #fff;';
+        $txt .= '    border-top: 0;';
+        $txt .= '}';
+
+        $txt .= '.config-form fieldset .errors { /* form error list */';
+        $txt .= '    margin: 0 -2px 1em;';
+        $txt .= '    padding: .5em 1.5em;';
+        $txt .= '    background: #FBEAD9;';
+        $txt .= '    border: 0 #C83838 solid;';
+        $txt .= '    border-width: 1px 0;';
+        $txt .= '    list-style: none;';
+        $txt .= '    font-family: sans-serif;';
+        $txt .= '    font-size: small;';
+        $txt .= '}';
+
+        $txt .= '.config-form fieldset .inline_errors { /* field error list */';
+        $txt .= '    margin: .3em .3em .3em;';
+        $txt .= '    margin-<?php echo $left; ?>: 0;';
+        $txt .= '    padding: 0;';
+        $txt .= '    list-style: none;';
+        $txt .= '    color: #9A0000;';
+        $txt .= '    font-size: small;';
+        $txt .= '}';
+
+        $txt .= '.config-form fieldset th {';
+        $txt .= '    padding: .3em .3em .3em;';
+        $txt .= '    padding-<?php echo $left; ?>: .5em;';
+        $txt .= '    text-align: <?php echo $left; ?>;';
+        $txt .= '    vertical-align: top;';
+        $txt .= '    width: 40%;';
+        $txt .= '    background: transparent;';
+        $txt .= '    filter: none;';
+        $txt .= '}';
+
+        $txt .= '.config-form fieldset .doc,';
+        $txt .= '.config-form fieldset .disabled-notice {';
+        $txt .= '    margin-<?php echo $left; ?>: 1em;';
+        $txt .= '}';
+
+        $txt .= '.config-form fieldset .disabled-notice {';
+        $txt .= '    font-size: 80%;';
+        $txt .= '    text-transform: uppercase;';
+        $txt .= '    color: #E00;';
+        $txt .= '    cursor: help;';
+        $txt .= '}';
+
+        $txt .= '.config-form fieldset td {';
+        $txt .= '    padding-top: .3em;';
+        $txt .= '    padding-bottom: .3em;';
+        $txt .= '    vertical-align: top;';
+        $txt .= '}';
+
+        $txt .= '.config-form fieldset th small {';
+        $txt .= '    display: block;';
+        $txt .= '    font-weight: normal;';
+        $txt .= '    font-family: sans-serif;';
+        $txt .= '    font-size: x-small;';
+        $txt .= '    color: #444;';
+        $txt .= '}';
+
+        $txt .= '.config-form fieldset th,';
+        $txt .= '.config-form fieldset td {';
+        $txt .= '    border-top: 1px <?php echo $GLOBALS[\'cfg\'][\'BgTwo\']; ?> solid;';
+        $txt .= '    border-<?php echo $right; ?>: none;';
+        $txt .= '}';
+
+        $txt .= 'fieldset .group-header th {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'BgTwo\']; ?>;';
+        $txt .= '}';
+
+        $txt .= 'fieldset .group-header + tr th {';
+        $txt .= '    padding-top: .6em;';
+        $txt .= '}';
+
+        $txt .= 'fieldset .group-field-1 th,';
+        $txt .= 'fieldset .group-header-2 th {';
+        $txt .= '    padding-<?php echo $left; ?>: 1.5em;';
+        $txt .= '}';
+
+        $txt .= 'fieldset .group-field-2 th,';
+        $txt .= 'fieldset .group-header-3 th {';
+        $txt .= '    padding-<?php echo $left; ?>: 3em;';
+        $txt .= '}';
+
+        $txt .= 'fieldset .group-field-3 th {';
+        $txt .= '    padding-<?php echo $left; ?>: 4.5em;';
+        $txt .= '}';
+
+        $txt .= 'fieldset .disabled-field th,';
+        $txt .= 'fieldset .disabled-field th small,';
+        $txt .= 'fieldset .disabled-field td {';
+        $txt .= '    color: #666;';
+        $txt .= '    background-color: #ddd;';
+        $txt .= '}';
+
+        $txt .= '.config-form .lastrow {';
+        $txt .= '    border-top: 1px #000 solid;';
+        $txt .= '}';
+
+        $txt .= '.config-form .lastrow {';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'ThBackground\']; ?>;';
+        $txt .= '    padding: .5em;';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+
+        $txt .= '.config-form .lastrow input {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+
+        /* form elements */
+
+        $txt .= '.config-form span.checkbox {';
+        $txt .= '    padding: 2px;';
+        $txt .= '    display: inline-block;';
+        $txt .= '}';
+
+        $txt .= '.config-form .custom { /* customized field */';
+        $txt .= '    background: #FFC;';
+        $txt .= '}';
+
+        $txt .= '.config-form span.checkbox.custom {';
+        $txt .= '    padding: 1px;';
+        $txt .= '    border: 1px #EDEC90 solid;';
+        $txt .= '    background: #FFC;';
+        $txt .= '}';
+
+        $txt .= '.config-form .field-error {';
+        $txt .= '    border-color: #A11 !important;';
+        $txt .= '}';
+
+        $txt .= '.config-form input[type="text"],';
+        $txt .= '.config-form input[type="password"],';
+        $txt .= '.config-form input[type="number"],';
+        $txt .= '.config-form select,';
+        $txt .= '.config-form textarea {';
+        $txt .= '    border: 1px #A7A6AA solid;';
+        $txt .= '    height: auto;';
+        $txt .= '}';
+
+        $txt .= '.config-form input[type="text"]:focus,';
+        $txt .= '.config-form input[type="password"]:focus,';
+        $txt .= '.config-form input[type="number"]:focus,';
+        $txt .= '.config-form select:focus,';
+        $txt .= '.config-form textarea:focus {';
+        $txt .= '    border: 1px #6676FF solid;';
+        $txt .= '    background: #F7FBFF;';
+        $txt .= '}';
+
+        $txt .= '.config-form .field-comment-mark {';
+        $txt .= '    font-family: serif;';
+        $txt .= '    color: #007;';
+        $txt .= '    cursor: help;';
+        $txt .= '    padding: 0 .2em;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    font-style: italic;';
+        $txt .= '}';
+
+        $txt .= '.config-form .field-comment-warning {';
+        $txt .= '    color: #A00;';
+        $txt .= '}';
+
+        /* error list */
+        $txt .= '.config-form dd {';
+        $txt .= '    margin-<?php echo $left; ?>: .5em;';
+        $txt .= '}';
+
+        $txt .= '.config-form dd:before {';
+        $txt .= '    content: "\25B8  ";';
+        $txt .= '}';
+
+        $txt .= '.click-hide-message {';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+
+        $txt .= '.prefsmanage_opts {';
+        $txt .= '    margin-<?php echo $left; ?>: 2em;';
+        $txt .= '}';
+
+        $txt .= '#prefs_autoload {';
+        $txt .= '    margin-bottom: .5em;';
+        $txt .= '    margin-left: .5em;';
+        $txt .= '}';
+
+        $txt .= '#placeholder .button {';
+        $txt .= '    position: absolute;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+
+        $txt .= '#placeholder div.button {';
+        $txt .= '    font-size: smaller;';
+        $txt .= '    color: #999;';
+        $txt .= '    background-color: #eee;';
+        $txt .= '    padding: 2px;';
+        $txt .= '}';
+
+        $txt .= '.wrapper {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    margin-bottom: 1.5em;';
+        $txt .= '}';
+        $txt .= '.toggleButton {';
+        $txt .= '    position: relative;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    font-size: .8em;';
+        $txt .= '    text-align: center;';
+        $txt .= '    line-height: 1.4em;';
+        $txt .= '    height: 1.55em;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    border-right: .1em solid <?php echo $GLOBALS[\'cfg\'][\'Header\']; ?>;;';
+        $txt .= '    border-left: .1em solid <?php echo $GLOBALS[\'cfg\'][\'Header\']; ?>;;';
+        $txt .= '    -webkit-border-radius: .3em;';
+        $txt .= '    -moz-border-radius: .3em;';
+        $txt .= '    border-radius: .3em;';
+        $txt .= '}';
+        $txt .= '.toggleButton table,';
+        $txt .= '.toggleButton td,';
+        $txt .= '.toggleButton img {';
+        $txt .= '    padding: 0;';
+        $txt .= '    position: relative;';
+        $txt .= '}';
+        $txt .= '.toggleButton .container {';
+        $txt .= '    position: absolute;';
+        $txt .= '}';
+        $txt .= '.toggleButton .container td,';
+        $txt .= '.toggleButton .container tr {';
+        $txt .= '    background-image: none;';
+        $txt .= '    background: none !important;';
+        $txt .= '}';
+        $txt .= '.toggleButton .toggleOn {';
+        $txt .= '    color: #fff;';
+        $txt .= '    padding: 0 1em;';
+        $txt .= '    text-shadow: 0 0 .2em #000;';
+        $txt .= '}';
+        $txt .= '.toggleButton .toggleOff {';
+        $txt .= '    padding: 0 1em;';
+        $txt .= '}';
+
+        $txt .= '.doubleFieldset fieldset {';
+        $txt .= '    width: 48%;';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    padding: 0;';
+        $txt .= '}';
+        $txt .= '.doubleFieldset fieldset.left {';
+        $txt .= '    margin-<?php echo $right; ?>: 1%;';
+        $txt .= '}';
+        $txt .= '.doubleFieldset fieldset.right {';
+        $txt .= '    margin-<?php echo $left; ?>: 1%;';
+        $txt .= '}';
+        $txt .= '.doubleFieldset legend {';
+        $txt .= '    margin-<?php echo $left; ?>: 1.5em;';
+        $txt .= '}';
+        $txt .= '.doubleFieldset div.wrap {';
+        $txt .= '    padding: 1.5em;';
+        $txt .= '}';
+
+        $txt .= '#table_name_col_no_outer {';
+        $txt .= '    margin-top: 45px;';
+        $txt .= '}';
+
+        $txt .= '#table_name_col_no {';
+        $txt .= '    position: fixed;';
+        $txt .= '    top: 55px;';
+        $txt .= '    width: 100%;';
+        $txt .= '    background: #ffffff;';
+        $txt .= '}';
+
+        $txt .= '#table_columns input[type="text"],';
+        $txt .= '#table_columns input[type="password"],';
+        $txt .= '#table_columns input[type="number"],';
+        $txt .= '#table_columns select {';
+        $txt .= '    width: 10em;';
+        $txt .= '    box-sizing: border-box;';
+        $txt .= '    -ms-box-sizing: border-box;';
+        $txt .= '    -moz-box-sizing: border-box;';
+        $txt .= '    -webkit-box-sizing: border-box;';
+        $txt .= '}';
+
+        $txt .= '#placeholder {';
+        $txt .= '    position: relative;';
+        $txt .= '    border: 1px solid #aaa;';
+        $txt .= '    float: <?php echo $right; ?>;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    width: 450px;';
+        $txt .= '    height: 300px;';
+        $txt .= '}';
+
+        $txt .= '#openlayersmap{';
+        $txt .= '    width: 450px;';
+        $txt .= '    height: 300px;';
+        $txt .= '}';
+
+        $txt .= '.placeholderDrag {';
+        $txt .= '    cursor: move;';
+        $txt .= '}';
+
+        $txt .= '#placeholder .button {';
+        $txt .= '    position: absolute;';
+        $txt .= '}';
+
+        $txt .= '#left_arrow {';
+        $txt .= '    left: 8px;';
+        $txt .= '    top: 26px;';
+        $txt .= '}';
+
+        $txt .= '#right_arrow {';
+        $txt .= '    left: 26px;';
+        $txt .= '    top: 26px;';
+        $txt .= '}';
+
+        $txt .= '#up_arrow {';
+        $txt .= '    left: 17px;';
+        $txt .= '    top: 8px;';
+        $txt .= '}';
+
+        $txt .= '#down_arrow {';
+        $txt .= '    left: 17px;';
+        $txt .= '    top: 44px;';
+        $txt .= '}';
+
+        $txt .= '#zoom_in {';
+        $txt .= '    left: 17px;';
+        $txt .= '    top: 67px;';
+        $txt .= '}';
+
+        $txt .= '#zoom_world {';
+        $txt .= '    left: 17px;';
+        $txt .= '    top: 85px;';
+        $txt .= '}';
+
+        $txt .= '#zoom_out {';
+        $txt .= '    left: 17px;';
+        $txt .= '    top: 103px;';
+        $txt .= '}';
+
+        $txt .= '.colborder {';
+        $txt .= '    cursor: col-resize;';
+        $txt .= '    height: 100%;';
+        $txt .= '    margin-<?php echo $left; ?>: -6px;';
+        $txt .= '    position: absolute;';
+        $txt .= '    width: 5px;';
+        $txt .= '}';
+
+        $txt .= '.colborder_active {';
+        $txt .= '    border-<?php echo $right; ?>: 2px solid #a44;';
+        $txt .= '}';
+
+        $txt .= '.pma_table td {';
+        $txt .= '    position: static;';
+        $txt .= '}';
+
+        $txt .= '.pma_table th.draggable span,';
+        $txt .= '.pma_table tbody td span {';
+        $txt .= '    display: block;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '}';
+
+        $txt .= '.pma_table tbody td span code span {';
+        $txt .= '    display: inline;';
+        $txt .= '}';
+
+        $txt .= '.pma_table th.draggable.right span {';
+        $txt .= '    margin-<?php echo $right; ?>: 0px;';
+        $txt .= '}';
+
+        $txt .= '.pma_table th.draggable span {';
+        $txt .= '    margin-<?php echo $right; ?>: 10px;';
+        $txt .= '}';
+
+        $txt .= '.modal-copy input {';
+        $txt .= '    display: block;';
+        $txt .= '    width: 100%;';
+        $txt .= '    margin-top: 1.5em;';
+        $txt .= '    padding: .3em 0;';
+        $txt .= '}';
+
+        $txt .= '.cRsz {';
+        $txt .= '    position: absolute;';
+        $txt .= '}';
+
+        $txt .= '.cCpy {';
+        $txt .= '    background: #333;';
+        $txt .= '    color: #FFF;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    margin: .1em;';
+        $txt .= '    padding: .3em;';
+        $txt .= '    position: absolute;';
+        $txt .= '    text-shadow: -1px -1px #000;';
+
+        $txt .= '    -moz-box-shadow: 0 0 .7em #000;';
+        $txt .= '    -webkit-box-shadow: 0 0 .7em #000;';
+        $txt .= '    box-shadow: 0 0 .7em #000;';
+        $txt .= '    -moz-border-radius: .3em;';
+        $txt .= '    -webkit-border-radius: .3em;';
+        $txt .= '    border-radius: .3em;';
+        $txt .= '}';
+
+        $txt .= '.cPointer {';
+        $txt .= '    background: url(<?php echo $theme->getImgPath(\'col_pointer.png\');?>);';
+        $txt .= '    height: 20px;';
+        $txt .= '    margin-<?php echo $left; ?>: -5px;  /* must be minus half of its width */';
+        $txt .= '    margin-top: -10px;';
+        $txt .= '    position: absolute;';
+        $txt .= '    width: 10px;';
+        $txt .= '}';
+
+        $txt .= '.tooltip {';
+        $txt .= '    background: #333 !important;';
+        $txt .= '    opacity: .8 !important;';
+        $txt .= '    border: 1px solid #000 !important;';
+        $txt .= '    -moz-border-radius: .3em !important;';
+        $txt .= '    -webkit-border-radius: .3em !important;';
+        $txt .= '    border-radius: .3em !important;';
+        $txt .= '    text-shadow: -1px -1px #000 !important;';
+        $txt .= '    font-size: .8em !important;';
+        $txt .= '    font-weight: bold !important;';
+        $txt .= '    padding: 1px 3px !important;';
+        $txt .= '}';
+
+        $txt .= '.tooltip * {';
+        $txt .= '    background: none !important;';
+        $txt .= '    color: #FFF !important;';
+        $txt .= '}';
+
+        $txt .= '.cDrop {';
+        $txt .= '    left: 0;';
+        $txt .= '    position: absolute;';
+        $txt .= '    top: 0;';
+        $txt .= '}';
+
+        $txt .= '.coldrop {';
+        $txt .= '    background: url(<?php echo $theme->getImgPath(\'col_drop.png\');?>);';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    height: 16px;';
+        $txt .= '    margin-<?php echo $left; ?>: .3em;';
+        $txt .= '    margin-top: .3em;';
+        $txt .= '    position: absolute;';
+        $txt .= '    width: 16px;';
+        $txt .= '}';
+
+        $txt .= '.coldrop:hover,';
+        $txt .= '.coldrop-hover {';
+        $txt .= '    background-color: #999;';
+        $txt .= '}';
+
+        $txt .= '.cList {';
+        $txt .= '    background: #EEE;';
+        $txt .= '    border: solid 1px #999;';
+        $txt .= '    position: absolute;';
+        $txt .= '    -moz-box-shadow: 0 .2em .5em #333;';
+        $txt .= '    -webkit-box-shadow: 0 .2em .5em #333;';
+        $txt .= '    box-shadow: 0 .2em .5em #333;';
+        $txt .= '}';
+
+        $txt .= '.cList .lDiv div {';
+        $txt .= '    padding: .2em .5em .2em;';
+        $txt .= '    padding-<?php echo $left; ?>: .2em;';
+        $txt .= '}';
+
+        $txt .= '.cList .lDiv div:hover {';
+        $txt .= '    background: #DDD;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+
+        $txt .= '.cList .lDiv div input {';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+
+        $txt .= '.showAllColBtn {';
+        $txt .= '    border-bottom: solid 1px #999;';
+        $txt .= '    border-top: solid 1px #999;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    font-size: .9em;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    padding: .35em 1em;';
+        $txt .= '    text-align: center;';
+        $txt .= '}';
+
+        $txt .= '.showAllColBtn:hover {';
+        $txt .= '    background: #DDD;';
+        $txt .= '}';
+
+        $txt .= '.turnOffSelect {';
+        $txt .= '  -moz-user-select: none;';
+        $txt .= '  -khtml-user-select: none;';
+        $txt .= '  -webkit-user-select: none;';
+        $txt .= '  user-select: none;';
+        $txt .= '}';
+
+        $txt .= '.navigation {';
+        $txt .= '    margin: .8em 0;';
+
+        $txt .= '    border-radius: 5px;';
+        $txt .= '    -webkit-border-radius: 5px;';
+        $txt .= '    -moz-border-radius: 5px;';
+
+        $txt .= '    <?php echo $theme->getCssGradient(\'eeeeee\', \'cccccc\'); ?>';
+        $txt .= '}';
+
+        $txt .= '.navigation td {';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 0;';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '}';
+
+        $txt .= '.navigation_separator {';
+        $txt .= '    color: #999;';
+        $txt .= '    display: inline-block;';
+        $txt .= '    font-size: 1.5em;';
+        $txt .= '    text-align: center;';
+        $txt .= '    height: 1.4em;';
+        $txt .= '    width: 1.2em;';
+        $txt .= '    text-shadow: 1px 0 #FFF;';
+        $txt .= '}';
+
+        $txt .= '.navigation input[type=submit] {';
+        $txt .= '    background: none;';
+        $txt .= '    border: 0;';
+        $txt .= '    filter: none;';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: .8em .5em;';
+
+        $txt .= '    border-radius: 0;';
+        $txt .= '    -webkit-border-radius: 0;';
+        $txt .= '    -moz-border-radius: 0;';
+        $txt .= '}';
+
+        $txt .= '.navigation input[type=submit]:hover,';
+        $txt .= '.navigation input.edit_mode_active {';
+        $txt .= '    color: #fff;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    text-shadow: none;';
+
+        $txt .= '    <?php echo $theme->getCssGradient(\'333333\', \'555555\'); ?>';
+        $txt .= '}';
+
+        $txt .= '.navigation select {';
+        $txt .= '    margin: 0 .8em;';
+        $txt .= '}';
+
+        $txt .= '.cEdit {';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 0;';
+        $txt .= '    position: absolute;';
+        $txt .= '}';
+
+        $txt .= '.cEdit input[type=text] {';
+        $txt .= '    background: #FFF;';
+        $txt .= '    height: 100%;';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 0;';
+        $txt .= '}';
+
+        $txt .= '.cEdit .edit_area {';
+        $txt .= '    background: #FFF;';
+        $txt .= '    border: 1px solid #999;';
+        $txt .= '    min-width: 10em;';
+        $txt .= '    padding: .3em .5em;';
+        $txt .= '}';
+
+        $txt .= '.cEdit .edit_area select,';
+        $txt .= '.cEdit .edit_area textarea {';
+        $txt .= '    width: 97%;';
+        $txt .= '}';
+
+        $txt .= '.cEdit .cell_edit_hint {';
+        $txt .= '    color: #555;';
+        $txt .= '    font-size: .8em;';
+        $txt .= '    margin: .3em .2em;';
+        $txt .= '}';
+
+        $txt .= '.cEdit .edit_box {';
+        $txt .= '    overflow-x: hidden;';
+        $txt .= '    overflow-y: scroll;';
+        $txt .= '    padding: 0;';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+
+        $txt .= '.cEdit .edit_box_posting {';
+        $txt .= '    background: #FFF url(<?php echo $theme->getImgPath(\'ajax_clock_small.gif\');?>) no-repeat right center;';
+        $txt .= '    padding-<?php echo $right; ?>: 1.5em;';
+        $txt .= '}';
+
+        $txt .= '.cEdit .edit_area_loading {';
+        $txt .= '    background: #FFF url(<?php echo $theme->getImgPath(\'ajax_clock_small.gif\');?>) no-repeat center;';
+        $txt .= '    height: 10em;';
+        $txt .= '}';
+
+        $txt .= '.cEdit .goto_link {';
+        $txt .= '    background: #EEE;';
+        $txt .= '    color: #555;';
+        $txt .= '    padding: .2em .3em;';
+        $txt .= '}';
+
+        $txt .= '.saving_edited_data {';
+        $txt .= '    background: url(<?php echo $theme->getImgPath(\'ajax_clock_small.gif\');?>) no-repeat left;';
+        $txt .= '    padding-<?php echo $left; ?>: 20px;';
+        $txt .= '}';
+
+        $txt .= '.relationalTable td {';
+        $txt .= '    vertical-align: top;';
+        $txt .= '}';
+
+        $txt .= '.relationalTable select {';
+        $txt .= '    width: 125px;';
+        $txt .= '    margin-right: 5px;';
+        $txt .= '}';
+
+        /* css for timepicker */
+        $txt .= '.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }';
+        $txt .= '.ui-timepicker-div dl { text-align: <?php echo $left; ?>; }';
+        $txt .= '.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }';
+        $txt .= '.ui-timepicker-div dl dd { margin: 0 10px 10px 85px; }';
+        $txt .= '.ui-timepicker-div td { font-size: 90%; }';
+        $txt .= '.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }';
+        $txt .= '.ui-timepicker-rtl { direction: rtl; }';
+        $txt .= '.ui-timepicker-rtl dl { text-align: right; }';
+        $txt .= '.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }';
+
+        $txt .= 'input.btn {';
+        $txt .= '    color: #333;';
+        $txt .= '    background-color: #D0DCE0;';
+        $txt .= '}';
+
+        $txt .= 'body .ui-widget {';
+        $txt .= '    font-size: 1em;';
+        $txt .= '}';
+        $txt .= '.ui-dialog fieldset legend a {';
+        $txt .= '    color: #235A81;';
+        $txt .= '}';
+        $txt .= '.ui-draggable {';
+        $txt .= '    z-index: 801;';
+        $txt .= '}';
+        /* over-riding jqplot-yaxis class */
+        $txt .= '.jqplot-yaxis {';
+        $txt .= '    left:0 !important;';
+        $txt .= '    min-width:25px;';
+        $txt .= '    width:auto;';
+        $txt .= '}';
+        $txt .= '.jqplot-axis {';
+        $txt .= '    overflow:hidden;';
+        $txt .= '}';
+        $txt .= '.report-data {';
+        $txt .= '    height:13em;';
+        $txt .= '    overflow:scroll;';
+        $txt .= '    width:570px;';
+        $txt .= '    border: solid 1px;';
+        $txt .= '    background: white;';
+        $txt .= '    padding: 2px;';
+        $txt .= '}';
+        $txt .= '.report-description {';
+        $txt .= '    height:10em;';
+        $txt .= '    width:570px;';
+        $txt .= '}';
+        $txt .= 'div#page_content div#tableslistcontainer table.data {';
+        $txt .= '    border-top: 0.1px solid #EEEEEE;';
+        $txt .= '}';
+        $txt .= 'div#page_content div#tableslistcontainer, div#page_content div.notice, div#page_content div.result_query {';
+        $txt .= '    margin-top: 1em;';
+        $txt .= '}';
+        $txt .= 'table.show_create {';
+        $txt .= '    margin-top: 1em;';
+        $txt .= '}';
+        $txt .= 'table.show_create td {';
+        $txt .= '    border-right: 1px solid #bbb;';
+        $txt .= '}';
+        $txt .= '#alias_modal table {';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+        $txt .= '#alias_modal label {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+        $txt .= '.ui-dialog {';
+        $txt .= '    position: fixed;';
+        $txt .= '}';
+        $txt .= '.small_font {';
+        $txt .= '    font-size: smaller;';
+        $txt .= '}';
+        /* Console styles */
+        $txt .= '#pma_console_container {';
+        $txt .= '    width: 100%;';
+        $txt .= '    position: fixed;';
+        $txt .= '    bottom: 0;';
+        $txt .= '    <?php echo $left; ?>: 0;';
+        $txt .= '    z-index: 100;';
+        $txt .= '}';
+        $txt .= '#pma_console {';
+        $txt .= '    position: relative;';
+        $txt .= '    margin-<?php echo $left; ?>: 240px;';
+        $txt .= '}';
+        $txt .= '#pma_console .templates {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '#pma_console .mid_text,';
+        $txt .= '#pma_console .toolbar span {';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '}';
+        $txt .= '#pma_console .toolbar {';
+        $txt .= '    position: relative;';
+        $txt .= '    background: #ccc;';
+        $txt .= '    border-top: solid 1px #aaa;';
+        $txt .= '    cursor: n-resize;';
+        $txt .= '}';
+        $txt .= '#pma_console .toolbar.collapsed:not(:hover) {';
+        $txt .= '    display: inline-block;';
+        $txt .= '    border-top-<?php echo $right; ?>-radius: 3px;';
+        $txt .= '    border-<?php echo $right; ?>: solid 1px #aaa;';
+        $txt .= '}';
+        $txt .= '#pma_console .toolbar.collapsed {';
+        $txt .= '    cursor: default;';
+        $txt .= '}';
+        $txt .= '#pma_console .toolbar.collapsed>.button {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '#pma_console .message span.text,';
+        $txt .= '#pma_console .message span.action,';
+        $txt .= '#pma_console .toolbar .button,';
+        $txt .= '#pma_console .toolbar .text,';
+        $txt .= '#pma_console .switch_button {';
+        $txt .= '    padding: 0 3px;';
+        $txt .= '    display: inline-block;';
+        $txt .= '}';
+        $txt .= '#pma_console .message span.action,';
+        $txt .= '#pma_console .toolbar .button,';
+        $txt .= '#pma_console .switch_button {';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+        $txt .= '#pma_console .message span.action:hover,';
+        $txt .= '#pma_console .toolbar .button:hover,';
+        $txt .= '#pma_console .switch_button:hover,';
+        $txt .= '#pma_console .toolbar .button.active {';
+        $txt .= '    background: #ddd;';
+        $txt .= '}';
+        $txt .= '#pma_console .toolbar .text {';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+        $txt .= '#pma_console .toolbar .button,';
+        $txt .= '#pma_console .toolbar .text {';
+        $txt .= '    margin-<?php echo $right; ?>: .4em;';
+        $txt .= '}';
+        $txt .= '#pma_console .toolbar .button,';
+        $txt .= '#pma_console .toolbar .text {';
+        $txt .= '    float: <?php echo $right; ?>;';
+        $txt .= '}';
+        $txt .= '#pma_console .content {';
+        $txt .= '    overflow-x: hidden;';
+        $txt .= '    overflow-y: auto;';
+        $txt .= '    margin-bottom: -65px;';
+        $txt .= '    border-top: solid 1px #aaa;';
+        $txt .= '    background: #fff;';
+        $txt .= '    padding-top: .4em;';
+        $txt .= '}';
+        $txt .= '#pma_console .content.console_dark_theme {';
+        $txt .= '    background: #000;';
+        $txt .= '    color: #fff;';
+        $txt .= '}';
+        $txt .= '#pma_console .content.console_dark_theme .CodeMirror-wrap {';
+        $txt .= '    background: #000;';
+        $txt .= '    color: #fff;';
+        $txt .= '}';
+        $txt .= '#pma_console .content.console_dark_theme .action_content {';
+        $txt .= '    color: #000;';
+        $txt .= '}';
+        $txt .= '#pma_console .content.console_dark_theme .message {';
+        $txt .= '    border-color: #373B41;';
+        $txt .= '}';
+        $txt .= '#pma_console .content.console_dark_theme .CodeMirror-cursor {';
+        $txt .= '    border-color: #fff;';
+        $txt .= '}';
+        $txt .= '#pma_console .content.console_dark_theme .cm-keyword {';
+        $txt .= '    color: #de935f;';
+        $txt .= '}';
+        $txt .= '#pma_console .message,';
+        $txt .= '#pma_console .query_input {';
+        $txt .= '    position: relative;';
+        $txt .= '    font-family: Monaco, Consolas, monospace;';
+        $txt .= '    cursor: text;';
+        $txt .= '    margin: 0 10px .2em 1.4em;';
+        $txt .= '}';
+        $txt .= '#pma_console .message {';
+        $txt .= '    border-bottom: solid 1px #ccc;';
+        $txt .= '    padding-bottom: .2em;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.expanded>.action_content {';
+        $txt .= '    position: relative;';
+        $txt .= '}';
+        $txt .= '#pma_console .message:before,';
+        $txt .= '#pma_console .query_input:before {';
+        $txt .= '    left: -0.7em;';
+        $txt .= '    position: absolute;';
+        $txt .= '    content: ">";';
+        $txt .= '}';
+        $txt .= '#pma_console .query_input:before {';
+        $txt .= '    top: -2px;';
+        $txt .= '}';
+        $txt .= '#pma_console .query_input textarea {';
+        $txt .= '    width: 100%;';
+        $txt .= '    height: 4em;';
+        $txt .= '    resize: vertical;';
+        $txt .= '}';
+        $txt .= '#pma_console .message:hover:before {';
+        $txt .= '    color: #7cf;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.expanded:before {';
+        $txt .= '    content: "]";';
+        $txt .= '}';
+        $txt .= '#pma_console .message.welcome:before {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.failed:before,';
+        $txt .= '#pma_console .message.failed.expanded:before,';
+        $txt .= '#pma_console .message.failed:hover:before {';
+        $txt .= '    content: "=";';
+        $txt .= '    color: #944;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.pending:before {';
+        $txt .= '    opacity: .3;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.collapsed>.query {';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '    text-overflow: ellipsis;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.expanded>.query {';
+        $txt .= '    display: block;';
+        $txt .= '    white-space: pre;';
+        $txt .= '    word-wrap: break-word;';
+        $txt .= '}';
+        $txt .= '#pma_console .message .text.targetdb,';
+        $txt .= '#pma_console .message.collapsed .action.collapse,';
+        $txt .= '#pma_console .message.expanded .action.expand,';
+        $txt .= '#pma_console .message .action.requery,';
+        $txt .= '#pma_console .message .action.profiling,';
+        $txt .= '#pma_console .message .action.explain,';
+        $txt .= '#pma_console .message .action.bookmark {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.select .action.profiling,';
+        $txt .= '#pma_console .message.select .action.explain,';
+        $txt .= '#pma_console .message.history .text.targetdb,';
+        $txt .= '#pma_console .message.successed .text.targetdb,';
+        $txt .= '#pma_console .message.history .action.requery,';
+        $txt .= '#pma_console .message.history .action.bookmark,';
+        $txt .= '#pma_console .message.bookmark .action.requery,';
+        $txt .= '#pma_console .message.bookmark .action.bookmark,';
+        $txt .= '#pma_console .message.successed .action.requery,';
+        $txt .= '#pma_console .message.successed .action.bookmark {';
+        $txt .= '    display: inline-block;';
+        $txt .= '}';
+        $txt .= '#pma_console .message .action_content {';
+        $txt .= '    position: absolute;';
+        $txt .= '    bottom: 100%;';
+        $txt .= '    background: #ccc;';
+        $txt .= '    border: solid 1px #aaa;';
+        $txt .= '    border-top-<?php echo $left; ?>-radius: 3px;';
+        $txt .= '}';
+        $txt .= 'html.ie8 #pma_console .message .action_content {';
+        $txt .= '    position: relative!important;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.bookmark .text.targetdb,';
+        $txt .= '#pma_console .message .text.query_time {';
+        $txt .= '    margin: 0;';
+        $txt .= '    display: inline-block;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.failed .text.query_time,';
+        $txt .= '#pma_console .message .text.failed {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.failed .text.failed {';
+        $txt .= '    display: inline-block;';
+        $txt .= '}';
+        $txt .= '#pma_console .message .text {';
+        $txt .= '    background: #fff;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.collapsed>.action_content {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.collapsed:hover>.action_content {';
+        $txt .= '    display: block;';
+        $txt .= '}';
+        $txt .= '#pma_console .message .bookmark_label {';
+        $txt .= '    padding: 0 4px;';
+        $txt .= '    top: 0;';
+        $txt .= '    background: #369;';
+        $txt .= '    color: #fff;';
+        $txt .= '    border-radius: 3px;';
+        $txt .= '}';
+        $txt .= '#pma_console .message .bookmark_label.shared {';
+        $txt .= '    background: #396;';
+        $txt .= '}';
+        $txt .= '#pma_console .message.expanded .bookmark_label {';
+        $txt .= '    border-top-left-radius: 0;';
+        $txt .= '    border-top-right-radius: 0;';
+        $txt .= '}';
+        $txt .= '#pma_console .query_input {';
+        $txt .= '    position: relative;';
+        $txt .= '}';
+        $txt .= '#pma_console .mid_layer {';
+        $txt .= '    height: 100%;';
+        $txt .= '    width: 100%;';
+        $txt .= '    position: absolute;';
+        $txt .= '    top: 0;';
+        /* For support IE8, this layer doesn't use filter:opacity or opacity
+        js code will fade this layer opacity to 0.18(using animation) */
+        $txt .= '    background: #666;';
+        $txt .= '    display: none;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    z-index: 200;';
+        $txt .= '}';
+        $txt .= '#pma_console .card {';
+        $txt .= '    position: absolute;';
+        $txt .= '    width: 94%;';
+        $txt .= '    height: 100%;';
+        $txt .= '    min-height: 48px;';
+        $txt .= '    <?php echo $left; ?>: 100%;';
+        $txt .= '    top: 0;';
+        $txt .= '    border-<?php echo $left; ?>: solid 1px #999;';
+        $txt .= '    z-index: 300;';
+        $txt .= '    transition: <?php echo $left; ?> 0.2s;';
+        $txt .= '    -ms-transition: <?php echo $left; ?> 0.2s;';
+        $txt .= '    -webkit-transition: <?php echo $left; ?> 0.2s;';
+        $txt .= '    -moz-transition: <?php echo $left; ?> 0.2s;';
+        $txt .= '}';
+        $txt .= '#pma_console .card.show {';
+        $txt .= '    <?php echo $left; ?>: 6%;';
+        $txt .= '    box-shadow: -2px 1px 4px -1px #999;';
+        $txt .= '}';
+        $txt .= 'html.ie7 #pma_console .query_input {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '#pma_bookmarks .content.add_bookmark,';
+        $txt .= '#pma_console_options .content {';
+        $txt .= '    padding: 4px 6px;';
+        $txt .= '}';
+        $txt .= '#pma_bookmarks .content.add_bookmark .options {';
+        $txt .= '    margin-<?php echo $left; ?>: 1.4em;';
+        $txt .= '    padding-bottom: .4em;';
+        $txt .= '    margin-bottom: .4em;';
+        $txt .= '    border-bottom: solid 1px #ccc;';
+        $txt .= '}';
+        $txt .= '#pma_bookmarks .content.add_bookmark .options button {';
+        $txt .= '    margin: 0 7px;';
+        $txt .= '    vertical-align: bottom;';
+        $txt .= '}';
+        $txt .= '#pma_bookmarks .content.add_bookmark input[type=text] {';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 2px 4px;';
+        $txt .= '}';
+        $txt .= '#pma_console .button.hide,';
+        $txt .= '#pma_console .message span.text.hide {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '#debug_console.grouped .ungroup_queries,';
+        $txt .= '#debug_console.ungrouped .group_queries {';
+        $txt .= '    display: inline-block;';
+        $txt .= '}';
+        $txt .= '#debug_console.ungrouped .ungroup_queries,';
+        $txt .= '#debug_console.ungrouped .sort_count,';
+        $txt .= '#debug_console.grouped .group_queries {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '#debug_console .count {';
+        $txt .= '    margin-right: 8px;';
+        $txt .= '}';
+        $txt .= '#debug_console .show_trace .trace,';
+        $txt .= '#debug_console .show_args .args {';
+        $txt .= '    display: block;';
+        $txt .= '}';
+        $txt .= '#debug_console .hide_trace .trace,';
+        $txt .= '#debug_console .hide_args .args,';
+        $txt .= '#debug_console .show_trace .action.dbg_show_trace,';
+        $txt .= '#debug_console .hide_trace .action.dbg_hide_trace,';
+        $txt .= '#debug_console .traceStep.hide_args .action.dbg_hide_args,';
+        $txt .= '#debug_console .traceStep.show_args .action.dbg_show_args {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '#debug_console .traceStep:after,';
+        $txt .= '#debug_console .trace.welcome:after,';
+        $txt .= '#debug_console .debug>.welcome:after {';
+        $txt .= '    content: "";';
+        $txt .= '    display: table;';
+        $txt .= '    clear: both;';
+        $txt .= '}';
+        $txt .= '#debug_console .debug_summary {';
+        $txt .= '    float: left;';
+        $txt .= '}';
+        $txt .= '#debug_console .trace.welcome .time {';
+        $txt .= '    float: right;';
+        $txt .= '}';
+        $txt .= '#debug_console .traceStep .file,';
+        $txt .= '#debug_console .script_name {';
+        $txt .= '    float: right;';
+        $txt .= '}';
+        $txt .= '#debug_console .traceStep .args pre {';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+        /* Code mirror console style*/
+        $txt .= '.cm-s-pma .CodeMirror-code pre,';
+        $txt .= '.cm-s-pma .CodeMirror-code {';
+        $txt .= '    font-family: Monaco, Consolas, monospace;';
+        $txt .= '}';
+        $txt .= '.cm-s-pma .CodeMirror-measure>pre,';
+        $txt .= '.cm-s-pma .CodeMirror-code>pre,';
+        $txt .= '.cm-s-pma .CodeMirror-lines {';
+        $txt .= '    padding: 0;';
+        $txt .= '}';
+        $txt .= '.cm-s-pma.CodeMirror {';
+        $txt .= '    resize: none;';
+        $txt .= '    height: auto;';
+        $txt .= '    width: 100%;';
+        $txt .= '    min-height: initial;';
+        $txt .= '    max-height: initial;';
+        $txt .= '}';
+        $txt .= '.cm-s-pma .CodeMirror-scroll {';
+        $txt .= '    cursor: text;';
+        $txt .= '}';
+        /* PMA drop-improt style */
+        $txt .= '.pma_drop_handler {';
+        $txt .= '    display: none;';
+        $txt .= '    position: fixed;';
+        $txt .= '    top: 0;';
+        $txt .= '    left: 0;';
+        $txt .= '    width: 100%;';
+        $txt .= '    background: rgba(0, 0, 0, 0.6);';
+        $txt .= '    height: 100%;';
+        $txt .= '    z-index: 999;';
+        $txt .= '    color: white;';
+        $txt .= '    font-size: 30pt;';
+        $txt .= '    text-align: center;';
+        $txt .= '    padding-top: 20%;';
+        $txt .= '}';
+        $txt .= '.pma_sql_import_status {';
+        $txt .= '    display: none;';
+        $txt .= '    position: fixed;';
+        $txt .= '    bottom: 0;';
+        $txt .= '    right: 25px;';
+        $txt .= '    width: 400px;';
+        $txt .= '    border: 1px solid #999;';
+        $txt .= '    background: <?php echo $GLOBALS[\'cfg\'][\'GroupBg\']; ?>;';
+        $txt .= '    -moz-border-radius: 4px;';
+        $txt .= '    -webkit-border-radius: 4px;';
+        $txt .= '    border-radius: 4px;';
+        $txt .= '    -moz-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>2px 2px 5px #ccc;';
+        $txt .= '    -webkit-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>2px 2px 5px #ccc;';
+        $txt .= '    box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'\'; ?>2px 2px 5px #ccc;';
+        $txt .= '}';
+        $txt .= '.pma_sql_import_status h2,';
+        $txt .= '.pma_drop_result h2 {';
+        $txt .= '    background-color: #bbb;';
+        $txt .= '    padding: .1em .3em;';
+        $txt .= '    margin-top: 0;';
+        $txt .= '    margin-bottom: 0;';
+        $txt .= '    color: #fff;';
+        $txt .= '    font-size: 1.6em;';
+        $txt .= '    font-weight: normal;';
+        $txt .= '    text-shadow: 0 1px 0 #777;';
+        $txt .= '    -moz-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'-\'; ?>1px 1px 15px #999 inset;';
+        $txt .= '    -webkit-box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'-\'; ?>1px 1px 15px #999 inset;';
+        $txt .= '    box-shadow: <?php echo $GLOBALS[\'text_dir\'] === \'rtl\' ? \'-\' : \'-\'; ?>1px 1px 15px #999 inset;';
+        $txt .= '}';
+        $txt .= '.pma_sql_import_status div {';
+        $txt .= '    height: 270px;';
+        $txt .= '    overflow-y:auto;';
+        $txt .= '    overflow-x:hidden;';
+        $txt .= '    list-style-type: none;';
+        $txt .= '}';
+        $txt .= '.pma_sql_import_status div li {';
+        $txt .= '    padding: 8px 10px;';
+        $txt .= '    border-bottom: 1px solid #bbb;';
+        $txt .= '    color: rgb(148, 14, 14);';
+        $txt .= '    background: white;';
+        $txt .= '}';
+        $txt .= '.pma_sql_import_status div li .filesize {';
+        $txt .= '    float: right;';
+        $txt .= '}';
+        $txt .= '.pma_sql_import_status h2 .minimize {';
+        $txt .= '    float: right;';
+        $txt .= '    margin-right: 5px;';
+        $txt .= '    padding: 0 10px;';
+        $txt .= '}';
+        $txt .= '.pma_sql_import_status h2 .close {';
+        $txt .= '    float: right;';
+        $txt .= '    margin-right: 5px;';
+        $txt .= '    padding: 0 10px;';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= '.pma_sql_import_status h2 .minimize:hover,';
+        $txt .= '.pma_sql_import_status h2 .close:hover,';
+        $txt .= '.pma_drop_result h2 .close:hover {';
+        $txt .= '    background: rgba(155, 149, 149, 0.78);';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+        $txt .= '.pma_drop_file_status {';
+        $txt .= '    color: #235a81;';
+        $txt .= '}';
+        $txt .= '.pma_drop_file_status span.underline:hover {';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    text-decoration: underline;';
+        $txt .= '}';
+        $txt .= '.pma_drop_result {';
+        $txt .= '    position: fixed;';
+        $txt .= '    top: 10%;';
+        $txt .= '    left: 20%;';
+        $txt .= '    width: 60%;';
+        $txt .= '    background: white;';
+        $txt .= '    min-height: 300px;';
+        $txt .= '    z-index: 800;';
+        $txt .= '    -webkit-box-shadow: 0 0 15px #999;';
+        $txt .= '    border-radius: 10px;';
+        $txt .= '    cursor: move;';
+        $txt .= '}';
+        $txt .= '.pma_drop_result h2 .close {';
+        $txt .= '    float: right;';
+        $txt .= '    margin-right: 5px;';
+        $txt .= '    padding: 0 10px;';
+        $txt .= '}';
+        $txt .= '.dependencies_box {';
+        $txt .= '    background-color: white;';
+        $txt .= '    border: 3px ridge black;';
+        $txt .= '}';
+        $txt .= '#composite_index_list {';
+        $txt .= '    list-style-type: none;';
+        $txt .= '    list-style-position: inside;';
+        $txt .= '}';
+        $txt .= 'span.drag_icon {';
+        $txt .= '    display: inline-block;';
+        $txt .= '    background-image: url(\'<?php echo $theme->getImgPath(\'s_sortable.png\');?>\');';
+        $txt .= '    background-position: center center;';
+        $txt .= '    background-repeat: no-repeat;';
+        $txt .= '    width: 1em;';
+        $txt .= '    height: 3em;';
+        $txt .= '    cursor: move;';
+        $txt .= '}';
+        $txt .= '.topmargin {';
+        $txt .= '    margin-top: 1em;';
+        $txt .= '}';
+        $txt .= 'meter[value="1"]::-webkit-meter-optimum-value {';
+        $txt .= '    background: linear-gradient(white 3%, #E32929 5%, transparent 10%, #E32929);';
+        $txt .= '}';
+        $txt .= 'meter[value="2"]::-webkit-meter-optimum-value {';
+        $txt .= '    background: linear-gradient(white 3%, #FF6600 5%, transparent 10%, #FF6600);';
+        $txt .= '}';
+        $txt .= 'meter[value="3"]::-webkit-meter-optimum-value {';
+        $txt .= '    background: linear-gradient(white 3%, #FFD700 5%, transparent 10%, #FFD700);';
+        $txt .= '}';
+        /* styles for sortable tables created with tablesorter jquery plugin */
+        $txt .= 'th.header {';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    color: #235a81;';
+        $txt .= '}';
+        $txt .= 'th.header:hover {';
+        $txt .= '    text-decoration: underline;';
+        $txt .= '}';
+        $txt .= 'th.header .sorticon {';
+        $txt .= '    width: 16px;';
+        $txt .= '    height: 16px;';
+        $txt .= '    background-repeat: no-repeat;';
+        $txt .= '    background-position: right center;';
+        $txt .= '    display: inline-table;';
+        $txt .= '    vertical-align: middle;';
+        $txt .= '    float: right;';
+        $txt .= '}';
+        $txt .= 'th.headerSortUp .sorticon, th.headerSortDown:hover .sorticon {';
+        $txt .= '    background-image: url(<?php echo $theme->getImgPath(\'s_desc.png\');?>);';
+        $txt .= '}';
+        $txt .= 'th.headerSortDown .sorticon, th.headerSortUp:hover .sorticon {';
+        $txt .= '    background-image: url(<?php echo $theme->getImgPath(\'s_asc.png\');?>);';
+        $txt .= '}';
+        /* end of styles of sortable tables */
+        /* styles for jQuery-ui to support rtl languages */
+        $txt .= 'body .ui-dialog .ui-dialog-titlebar-close {';
+        $txt .= '    <?php echo $right; ?>: .3em;';
+        $txt .= '    <?php echo $left; ?>: initial;';
+        $txt .= '}';
+        $txt .= 'body .ui-dialog .ui-dialog-title {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+        $txt .= 'body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {';
+        $txt .= '    float: <?php echo $right; ?>;';
+        $txt .= '}';
+        /* end of styles for jQuery-ui to support rtl languages */
+        $txt .= '@media only screen and (max-width: 768px) {';
+        $txt .= '    #main_pane_left {';
+        $txt .= '        width: 100%;';
+        $txt .= '    }';
+        $txt .= '    #main_pane_right {';
+        $txt .= '        padding-top: 0;';
+        $txt .= '        padding-<?php echo $left; ?>: 1px;';
+        $txt .= '        padding-<?php echo $right; ?>: 1px;';
+        $txt .= '    }';
+
+        $txt .= '    ul#topmenu,';
+        $txt .= '    ul.tabs {';
+        $txt .= '        display: flex;';
+        $txt .= '    }';
+
+        $txt .= '    .navigationbar {';
+        $txt .= '        display: inline-flex;';
+        $txt .= '        margin: 0 !important;';
+        $txt .= '        border-radius: 0 !important;';
+        $txt .= '        overflow: auto;';
+        $txt .= '    }';
+
+        $txt .= '    .scrollindicator {';
+        $txt .= '        padding: 5px;';
+        $txt .= '        cursor: pointer;';
+        $txt .= '        display: inline;';
+        $txt .= '    }';
+
+        $txt .= '    .responsivetable {';
+        $txt .= '        overflow-x: auto;';
+        $txt .= '    }';
+
+        $txt .= '    body#loginform div.container {';
+        $txt .= '        width: 100%;';
+        $txt .= '    }';
+
+        $txt .= '    .largescreenonly {';
+        $txt .= '        display: none;';
+        $txt .= '    }';
+
+        $txt .= '    .width100, .desktop50 {';
+        $txt .= '        width: 100%;';
+        $txt .= '    }';
+
+        $txt .= '    .width96 {';
+        $txt .= '        width: 96% !important;';
+        $txt .= '    }';
+
+        $txt .= '    #page_nav_icons {';
+        $txt .= '        display: none;';
+        $txt .= '    }';
+
+        $txt .= '    table#serverstatusconnections {';
+        $txt .= '        margin-left: 0;';
+        $txt .= '    }';
+
+        $txt .= '    #table_name_col_no {';
+        $txt .= '        top: 62px';
+        $txt .= '    }';
+
+        $txt .= '    .tdblock tr td {';
+        $txt .= '        display: block;';
+        $txt .= '    }';
+
+        $txt .= '    #table_columns {';
+        $txt .= '        margin-top: 60px;';
+        $txt .= '    }';
+
+        $txt .= '    #table_columns .tablesorter {';
+        $txt .= '        min-width: 100%;';
+        $txt .= '    }';
+
+        $txt .= '    .doubleFieldset fieldset {';
+        $txt .= '        width: 98%;';
+        $txt .= '    }';
+
+        $txt .= '    div#serverstatusquerieschart {';
+        $txt .= '        width: 100%;';
+        $txt .= '        height: 450px;';
+        $txt .= '    }';
+
+        $txt .= '    .ui-dialog {';
+        $txt .= '        margin: 1%;';
+        $txt .= '        width: 95% !important;';
+        $txt .= '    }';
+        $txt .= '}';
+        /* templates/database/designer */
+        /* side menu */
+        $txt .= '#name-panel {';
+        $txt .= '    overflow:hidden;';
+        $txt .= '}';
+
+        // Check if the file is writable as this condition would only occur if files are overwritten.
+        if ($file) {
+            fwrite($file, $txt);
+            fclose($file);
+        } else {
+            trigger_error("The common.css.php file is not writable by the webserver process. You must change permissions for the theme generator to be able to write the generated theme.", E_USER_ERROR);
+        }
+        return null;
+    }
+}
diff --git a/libraries/classes/ThemeGenerator/Layout.php b/libraries/classes/ThemeGenerator/Layout.php
new file mode 100644
index 0000000000..1f2044388f
--- /dev/null
+++ b/libraries/classes/ThemeGenerator/Layout.php
@@ -0,0 +1,113 @@
+<?php
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Creates Layout.inc.php file
+ *
+ * @package PhpMyAdmin
+ */
+declare(strict_types=1);
+
+namespace PhpMyAdmin\ThemeGenerator;
+
+/**
+ * Function to create Layout.inc.php in phpMyAdmin
+ *
+ * @package PhpMyAdmin
+ */
+class Layout
+{
+    /**
+     * Creates layout.inc.php
+     *
+     * @param array $post POST form data
+     *
+     * @return string $txt layout.inc.php file data
+     */
+    public function createLayoutFile(array $post)
+    {
+        $name = $post['theme_name'];
+        $file = fopen("themes/" . $name . "/layout.inc.php", "w");
+        $txt = "<?php\n";
+        /**
+         * configures general layout
+         * for detailed layout configuration please refer to the css files
+         */
+        $txt .= 'declare(strict_types=1);';
+        /**
+         * navi frame
+         */
+        // navi frame width
+        $txt .= '$GLOBALS[\'cfg\'][\'NaviWidth\']                = 240;';
+        // foreground (text) color for the navi frame
+        $txt .= '$GLOBALS[\'cfg\'][\'NaviColor\']                = \'#000\';';
+        // background for the navi frame
+        $txt .= '$GLOBALS[\'cfg\'][\'NaviBackground\']           = \'' . $post['Navigation_Panel'] . '\';';
+        // foreground (text) color of the pointer in navi frame
+        $txt .= '$GLOBALS[\'cfg\'][\'NaviPointerColor\']         = \'#000\';';
+        // background of the pointer in navi frame
+        $txt .= '$GLOBALS[\'cfg\'][\'NaviPointerBackground\']    = \'' . $post['Navigation_Hover'] . '\';';
+        /**
+         * main frame
+         */
+        // foreground (text) color for the main frame
+        $txt .= '$GLOBALS[\'cfg\'][\'MainColor\']                = \'' . $post['Text_Colour'] . '\';';
+        // background for the main frame
+        $txt .= '$GLOBALS[\'cfg\'][\'MainBackground\']           = \'' . $post['Background_Colour'] . '\';';
+        // foreground (text) color of the pointer in browse mode
+        $txt .= '$GLOBALS[\'cfg\'][\'BrowsePointerColor\']       = \'#000\';';
+        // background of the pointer in browse mode
+        $txt .= '$GLOBALS[\'cfg\'][\'BrowsePointerBackground\']  = \'#cfc\';';
+        // foreground (text) color of the marker (visually marks row by clicking on it)
+        // in browse mode
+        $txt .= '$GLOBALS[\'cfg\'][\'BrowseMarkerColor\']        = \'#000\';';
+        // background of the marker (visually marks row by clicking on it) in browse mode
+        $txt .= '$GLOBALS[\'cfg\'][\'BrowseMarkerBackground\']   = \'#fc9\';';
+        //server info header
+        $txt .= '$GLOBALS[\'cfg\'][\'Header\']           = \'' . $post['Header'] . '\';';
+        /**
+         * fonts
+         */
+        /**
+         * the font family as a valid css font family value,
+         * if not set the browser default will be used
+         * (depending on browser, DTD and system settings)
+         */
+        $txt .= '$GLOBALS[\'cfg\'][\'FontFamily\']           = \'' . $post['font'] . '\';';
+        /**
+         * fixed width font family, used in textarea
+         */
+        $txt .= '$GLOBALS[\'cfg\'][\'FontFamilyFixed\']      = \'monospace\';';
+        /**
+         * tables
+         */
+        // border
+        $txt .= '$GLOBALS[\'cfg\'][\'Border\']               = 0;';
+        // table header and footer color
+        // Dialogue Footer color
+        $txt .= '$GLOBALS[\'cfg\'][\'ThBackground\']         = \'' . $post['Table_Header_and_Footer_Background'] . '\';';
+        // table header and footer background
+        //text color footer and dialogue
+        $txt .= '$GLOBALS[\'cfg\'][\'ThColor\']              = \'' . $post['Table_Header_and_Footer_Text_Colour'] . '\';';
+        // table data row background
+        // Dialougue result background
+        $txt .= '$GLOBALS[\'cfg\'][\'BgOne\']                = \'' . $post['Table_Row_Background'] . '\';';
+        // table data row background, alternate
+        $txt .= '$GLOBALS[\'cfg\'][\'BgTwo\']                = \'' . $post['Table_Row_Alternate_Background'] . '\';';
+        //table hover and selected
+        $txt .= '$GLOBALS[\'cfg\'][\'BgThree\']                = \'' . $post['Table_Row_Hover_and_Selected'] . '\';';
+        // Hyperlink Text
+        $txt .= '$GLOBALS[\'cfg\'][\'Hyperlink\']            = \'' . $post['Hyperlink_Text'] . '\';';
+        // Group Background
+        $txt .= '$GLOBALS[\'cfg\'][\'GroupBg\']            = \'' . $post['Group_Background'] . '\';';
+
+        // Check if the file is writable as this condition would only occur if files are overwritten.
+        if ($file) {
+            fwrite($file, $txt);
+            fclose($file);
+            return $txt;
+        } else {
+            trigger_error("The layout.inc.php file is not writable by the webserver process. You must change permissions for the theme generator to be able to write the generated theme.", E_USER_ERROR);
+            return;
+        }
+    }
+}
diff --git a/libraries/classes/ThemeGenerator/Navigation.php b/libraries/classes/ThemeGenerator/Navigation.php
new file mode 100644
index 0000000000..7c9002c1f0
--- /dev/null
+++ b/libraries/classes/ThemeGenerator/Navigation.php
@@ -0,0 +1,432 @@
+<?php
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Creates Navigation.css.php file
+ *
+ * @package PhpMyAdmin
+ */
+declare(strict_types=1);
+
+namespace PhpMyAdmin\ThemeGenerator;
+
+/**
+ * Function to create Navigation.css.php in phpMyAdmin
+ *
+ * @package PhpMyAdmin
+ */
+class Navigation
+{
+
+    /**
+     * Creates navigation.css.php
+     *
+     * @param string $name name of new theme
+     *
+     * @return null
+     */
+    public function createNavigationFile($name)
+    {
+        $file = fopen("themes/" . $name . "/css/navigation.css.php", "w");
+
+        $txt = "<?php\n";
+        $txt .= 'declare(strict_types=1);';
+        $txt .= 'if (! defined(\'PHPMYADMIN\') && ! defined(\'TESTSUITE\')) {';
+        $txt .= '    exit();';
+        $txt .= '}';
+        $txt .= "?>\n";
+        $txt .= '#pma_navigation {';
+        $txt .= '    width: <?php echo $GLOBALS[\'cfg\'][\'NaviWidth\']; ?>px;';
+        $txt .= '    position: fixed;';
+        $txt .= '    top: 0;';
+        $txt .= '    <?php echo $left; ?>: 0;';
+        $txt .= '    height: 100vh;';
+        $txt .= '    background: linear-gradient(to right, <?php echo $GLOBALS[\'cfg\'][\'NaviBackground\']; ?> , <?php echo $GLOBALS[\'cfg\'][\'MainBackground\']; ?>);';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'NaviColor\']; ?>;';
+        $txt .= '    z-index: 800;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_header {';
+        $txt .= '    overflow: hidden;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_content {';
+        $txt .= '    width: 100%;';
+        $txt .= '    height: 100%;';
+        $txt .= '    position: absolute;';
+        $txt .= '    top: 0;';
+        $txt .= '    <?php echo $left; ?>: 0;';
+        $txt .= '    z-index: 0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation ul {';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation form {';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 0;';
+        $txt .= '    display: inline;';
+        $txt .= '}';
+        $txt .= '#pma_navigation select#select_server,';
+        $txt .= '#pma_navigation select#lightm_db {';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+        $txt .= '#pma_navigation div.pageselector {';
+        $txt .= '    text-align: center;';
+        $txt .= '    margin: 0;';
+        $txt .= '    margin-<?php echo $left; ?>: 0.75em;';
+        $txt .= '    border-<?php echo $left; ?>: 1px solid #666;';
+        $txt .= '}';
+        $txt .= '#pma_navigation div#pmalogo {';
+        $txt .= '    <?php //better echo $GLOBALS[\'cfg\'][\'logoBGC\']; ?>';
+        $txt .= '}';
+        $txt .= '#pma_navigation #pmalogo,';
+        $txt .= '#pma_navigation #serverChoice,';
+        $txt .= '#pma_navigation #navipanellinks,';
+        $txt .= '#pma_navigation #recentTableList,';
+        $txt .= '#pma_navigation #favoriteTableList,';
+        $txt .= '#pma_navigation #databaseList,';
+        $txt .= '#pma_navigation div.pageselector.dbselector {';
+        $txt .= '    text-align: center;';
+        $txt .= '    padding: 5px 10px 0;';
+        $txt .= '    border: 0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation #recentTable,';
+        $txt .= '#pma_navigation #favoriteTable {';
+        $txt .= '    width: 200px;';
+        $txt .= '}';
+        $txt .= '#pma_navigation #favoriteTableList select,';
+        $txt .= '#pma_navigation #serverChoice select';
+        $txt .= ' {';
+        $txt .= '    width: 80%;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_content > img.throbber {';
+        $txt .= '    display: none;';
+        $txt .= '    margin: .3em auto 0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree {';
+        $txt .= '    margin: 0;';
+        $txt .= '    margin-<?php echo $left; ?>: 5px;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    color: #444;';
+        $txt .= '    height: 74%;';
+        $txt .= '    position: relative;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_select_database {';
+        $txt .= '    text-align: left;';
+        $txt .= '    padding: 0 0 0;';
+        $txt .= '    border: 0;';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_db_select {';
+        $txt .= '    margin-top: 0.5em;';
+        $txt .= '    margin-<?php echo $left; ?>: 0.75em;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_db_select select {';
+        $txt .= '    background: url("./themes/pmahomme/img/select_bg.png") repeat scroll 0 0;';
+        $txt .= '    -webkit-border-radius: 2px;';
+        $txt .= '    border-radius: 2px;';
+        $txt .= '    border: 1px solid #bbb;';
+        $txt .= '    border-top: 1px solid #bbb;';
+        $txt .= '    color: #333;';
+        $txt .= '    padding: 4px 6px;';
+        $txt .= '    margin: 0 0 0;';
+        $txt .= '    width: 92%;';
+        $txt .= '    font-size: 1.11em;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree_content {';
+        $txt .= '    width: 100%;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    overflow-y: auto;';
+        $txt .= '    position: absolute;';
+        $txt .= '    height: 100%;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree_content a.hover_show_full {';
+        $txt .= '    position: relative;';
+        $txt .= '    z-index: 100;';
+        $txt .= '    vertical-align: sub;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree a {';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'NaviColor\']; ?>;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree a:hover {';
+        $txt .= '    text-decoration: underline;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree li.activePointer {';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'NaviPointerColor\']; ?>;';
+        $txt .= '    background-color: <?php echo $GLOBALS[\'cfg\'][\'NaviPointerBackground\']; ?>;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree li.selected {';
+        $txt .= '    color: <?php echo $GLOBALS[\'cfg\'][\'NaviPointerColor\']; ?>;';
+        $txt .= '    background-color: <?php echo $GLOBALS[\'cfg\'][\'NaviPointerBackground\']; ?>;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree li .dbItemControls {';
+        $txt .= '    padding-left: 4px;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree li .navItemControls {';
+        $txt .= '    display: none;';
+        $txt .= '    padding-left: 4px;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree li.activePointer .navItemControls {';
+        $txt .= '    display: inline;';
+        $txt .= '    opacity: 0.5;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree li.activePointer .navItemControls:hover {';
+        $txt .= '    display: inline;';
+        $txt .= '    opacity: 1.0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree ul {';
+        $txt .= '    clear: both;';
+        $txt .= '    padding: 0;';
+        $txt .= '    list-style-type: none;';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree ul ul {';
+        $txt .= '    position: relative;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree li,';
+        $txt .= '#pma_navigation_tree li.fast_filter {';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '    clear: both;';
+        $txt .= '    min-height: 16px;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree img {';
+        $txt .= '    margin: 0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree i {';
+        $txt .= '    display: block;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block {';
+        $txt .= '    position: relative;';
+        $txt .= '    width: 1.5em;';
+        $txt .= '    height: 1.5em;';
+        $txt .= '    min-width: 16px;';
+        $txt .= '    min-height: 16px;';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block.double {';
+        $txt .= '    width: 2.5em;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block i,';
+        $txt .= '#pma_navigation_tree div.block b {';
+        $txt .= '    width: 1.5em;';
+        $txt .= '    height: 1.7em;';
+        $txt .= '    min-width: 16px;';
+        $txt .= '    min-height: 8px;';
+        $txt .= '    position: absolute;';
+        $txt .= '    bottom: 0.7em;';
+        $txt .= '    <?php echo $left; ?>: 0.75em;';
+        $txt .= '    z-index: 0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block i { /* Top and right segments for the tree element connections */';
+        $txt .= '    display: block;';
+        $txt .= '    border-<?php echo $left; ?>: 1px solid #666;';
+        $txt .= '    border-bottom: 1px solid #666;';
+        $txt .= '    position: relative;';
+        $txt .= '    z-index: 0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block i.first { /* Removes top segment */';
+        $txt .= '    border-<?php echo $left; ?>: 0;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block b { /* Bottom segment for the tree element connections */';
+        $txt .= '    display: block;';
+        $txt .= '    height: 0.75em;';
+        $txt .= '    bottom: 0;';
+        $txt .= '    <?php echo $left; ?>: 0.75em;';
+        $txt .= '    border-<?php echo $left; ?>: 1px solid #666;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block a,';
+        $txt .= '#pma_navigation_tree div.block u {';
+        $txt .= '    position: absolute;';
+        $txt .= '    <?php echo $left; ?>: 50%;';
+        $txt .= '    top: 50%;';
+        $txt .= '    z-index: 10;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block a + a {';
+        $txt .= '    <?php echo $left; ?>: 100%;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block.double a,';
+        $txt .= '#pma_navigation_tree div.block.double u {';
+        $txt .= '    <?php echo $left; ?>: 33%;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block.double a + a {';
+        $txt .= '    <?php echo $left; ?>: 85%;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.block img {';
+        $txt .= '    position: relative;';
+        $txt .= '    top: -0.6em;';
+        $txt .= '    <?php echo $left; ?>: 0;';
+        $txt .= '    margin-<?php echo $left; ?>: -7px;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree div.throbber img {';
+        $txt .= '    top: 2px;';
+        $txt .= '    <?php echo $left; ?>: 2px;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree li.last > ul {';
+        $txt .= '    background: none;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree li > a, #pma_navigation_tree li > i {';
+        $txt .= '    line-height: 1.5em;';
+        $txt .= '    height: 1.5em;';
+        $txt .= '    padding-<?php echo $left; ?>: 0.3em;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree .list_container {';
+        $txt .= '    border-<?php echo $left; ?>: 1px solid #666;';
+        $txt .= '    margin-<?php echo $left; ?>: 0.75em;';
+        $txt .= '    padding-<?php echo $left; ?>: 0.75em;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_tree .last > .list_container {';
+        $txt .= '    border-<?php echo $left; ?>: 0 solid #666;';
+        $txt .= '}';
+        $txt .= '';
+        $txt .= 'li.fast_filter {';
+        $txt .= '    padding-<?php echo $left; ?>: 0.75em;';
+        $txt .= '    margin-<?php echo $left; ?>: 0.75em;';
+        $txt .= '    padding-<?php echo $right; ?>: 35px;';
+        $txt .= '    border-<?php echo $left; ?>: 1px solid #666;';
+        $txt .= '    list-style: none;';
+        $txt .= '}';
+        $txt .= 'li.fast_filter input {';
+        $txt .= '    margin: 3px 0 0 0;';
+        $txt .= '    font-size: 0.7em;';
+        $txt .= '    padding-top: 2px;';
+        $txt .= '    padding-bottom: 2px;';
+        $txt .= '    padding-<?php echo $left; ?>: 4px;';
+        $txt .= '    padding-<?php echo $right; ?>: 1.7em;';
+        $txt .= '    width: 100%;';
+        $txt .= '}';
+        $txt .= 'li.fast_filter span {';
+        $txt .= '    position: relative;';
+        $txt .= '    <?php echo $right; ?>: 1.5em;';
+        $txt .= '    padding: 0.2em;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    color: #800;';
+        $txt .= '    font-size: 0.7em;';
+        $txt .= '}';
+        /* IE10+ has its own reset X */
+        $txt .= 'html.ie li.fast_filter span {';
+        $txt .= '    display: none;';
+        $txt .= '}';
+        $txt .= 'html.ie.ie9 li.fast_filter span,';
+        $txt .= 'html.ie.ie8 li.fast_filter span {';
+        $txt .= '    display: auto;';
+        $txt .= '}';
+        $txt .= 'html.ie li.fast_filter input {';
+        $txt .= '    padding-<?php echo $right; ?>: .2em;';
+        $txt .= '}';
+        $txt .= 'html.ie.ie9 li.fast_filter input,';
+        $txt .= 'html.ie.ie8 li.fast_filter input {';
+        $txt .= '    padding-<?php echo $right; ?>: 1.7em;';
+        $txt .= '}';
+        $txt .= 'li.fast_filter.db_fast_filter {';
+        $txt .= '    border: 0;';
+        $txt .= '    margin-left: 0;';
+        $txt .= '    margin-right: 10px;';
+        $txt .= '}';
+        $txt .= '#navigation_controls_outer {';
+        $txt .= '    min-height: 21px !important;';
+        $txt .= '}';
+        $txt .= '#navigation_controls_outer.activePointer {';
+        $txt .= '    background-color: transparent !important;';
+        $txt .= '}';
+        $txt .= '#navigation_controls {';
+        $txt .= '    float: right;';
+        $txt .= '    padding-right: 23px;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_resizer {';
+        $txt .= '    width: 3px;';
+        $txt .= '    height: 100%;';
+        $txt .= '    background-color: #aaa;';
+        $txt .= '    cursor: col-resize;';
+        $txt .= '    position: fixed;';
+        $txt .= '    top: 0;';
+        $txt .= '    <?php echo $left; ?>: 240px;';
+        $txt .= '    z-index: 801;';
+        $txt .= '}';
+        $txt .= '#pma_navigation_collapser {';
+        $txt .= '    width: 20px;';
+        $txt .= '    height: 22px;';
+        $txt .= '    line-height: 22px;';
+        $txt .= '    background: #eee;';
+        $txt .= '    color: #555;';
+        $txt .= '    font-weight: bold;';
+        $txt .= '    position: fixed;';
+        $txt .= '    top: 0;';
+        $txt .= '    <?php echo $left; ?>: <?php echo $GLOBALS[\'cfg\'][\'NaviWidth\']; ?>px;';
+        $txt .= '    text-align: center;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '    z-index: 800;';
+        $txt .= '    text-shadow: 0 1px 0 #fff;';
+        $txt .= '    filter: dropshadow(color=#fff, offx=0, offy=1);';
+        $txt .= '    border: 1px solid #888;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp {';
+        $txt .= '    margin-top: 5px;';
+        $txt .= '    margin-<?php echo $left; ?>: 2px;';
+        $txt .= '    position: relative;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp .drop_list {';
+        $txt .= '    float: <?php echo $left; ?>;';
+        $txt .= '    margin-<?php echo $left; ?>: 3px;';
+        $txt .= '    padding: 2px 0;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp .drop_button {';
+        $txt .= '    padding: 0 .3em;';
+        $txt .= '    border: 1px solid #ddd;';
+        $txt .= '    border-radius: .3em;';
+        $txt .= '    background: #f2f2f2;';
+        $txt .= '    cursor: pointer;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp .drop_list:hover .drop_button {';
+        $txt .= '    background: #fff;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp .drop_list ul {';
+        $txt .= '    position: absolute;';
+        $txt .= '    margin: 0;';
+        $txt .= '    padding: 0;';
+        $txt .= '    overflow: hidden;';
+        $txt .= '    overflow-y: auto;';
+        $txt .= '    list-style: none;';
+        $txt .= '    background: #fff;';
+        $txt .= '    border: 1px solid #ddd;';
+        $txt .= '    border-radius: .3em;';
+        $txt .= '    border-top-<?php echo $right; ?>-radius: 0;';
+        $txt .= '    border-bottom-<?php echo $right; ?>-radius: 0;';
+        $txt .= '    box-shadow: 0 0 5px #ccc;';
+        $txt .= '    top: 100%;';
+        $txt .= '    <?php echo $left; ?>: 3px;';
+        $txt .= '    <?php echo $right; ?>: 0;';
+        $txt .= '    display: none;';
+        $txt .= '    z-index: 802;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp .drop_list:hover ul {';
+        $txt .= '    display: block;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp .drop_list li {';
+        $txt .= '    white-space: nowrap;';
+        $txt .= '    padding: 0;';
+        $txt .= '    border-radius: 0;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp .drop_list li img {';
+        $txt .= '    vertical-align: sub;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp .drop_list li:hover {';
+        $txt .= '    background: #f2f2f2;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp .drop_list a {';
+        $txt .= '    display: block;';
+        $txt .= '    padding: .2em .3em;';
+        $txt .= '}';
+        $txt .= '.pma_quick_warp .drop_list a.favorite_table_anchor {';
+        $txt .= '    clear: left;';
+        $txt .= '    float: left;';
+        $txt .= '    padding: .1em .3em 0;';
+        $txt .= '}';
+
+        // Check if the file is writable as this condition would only occur if files are overwritten.
+        if ($file) {
+            fwrite($file, $txt);
+            fclose($file);
+        } else {
+            trigger_error("The navigation.css.php file is not writable by the webserver process. You must change permissions for the theme generator to be able to write the generated theme.", E_USER_ERROR);
+        }
+        return null;
+    }
+}
diff --git a/libraries/config.default.php b/libraries/config.default.php
index 6aa368f95a..478878b891 100644
--- a/libraries/config.default.php
+++ b/libraries/config.default.php
@@ -2894,6 +2894,13 @@ $cfg['ThemeDefault'] = 'pmahomme';
  */
 $cfg['ThemePerServer'] = false;
 
+/**
+ * Enabling theme generator
+ *
+ * @global boolean $cfg['ThemeGenerator']
+ */
+$cfg['ThemeGenerator'] = false;
+
 /*******************************************************************************
  *
  */
diff --git a/templates/theme_generator/color_picker.twig b/templates/theme_generator/color_picker.twig
new file mode 100644
index 0000000000..1c11568773
--- /dev/null
+++ b/templates/theme_generator/color_picker.twig
@@ -0,0 +1,9 @@
+<div id="container">
+    <div id="palette" class="block">
+        <div id="color-palette"></div>
+    </div>
+    <div id="picker" class="block">
+        <div class="ui-color-picker" data-topic="picker" data-mode="HSB"></div>
+        <div id="picker-samples" sample-id="master"></div>
+    </div>
+</div>
diff --git a/templates/theme_generator/form.twig b/templates/theme_generator/form.twig
new file mode 100644
index 0000000000..e3e862fc5e
--- /dev/null
+++ b/templates/theme_generator/form.twig
@@ -0,0 +1,40 @@
+<form action="theme_generator.php" method="post" id="save">
+    <select name="type" id="theme">
+        <option value="0">{% trans 'Triadic' %}</option>
+        <option value="1">{% trans 'Complementary' %}</option>
+        <option value="2">{% trans 'Adjacent' %}</option>
+        <option value="3">{% trans 'Monochrome' %}</option>
+    </select>
+    <br>
+    &nbsp; Font :<br>
+    <select name="font" id="font">
+        <option value="sans-serif">sans-serif</option>
+        <option value="Georgia">Georgia</option>
+        <option value="Palatino Linotype">Palatino Linotype</option>
+        <option value="Book Antiqua">Book Antiqua</option>
+        <option value="Arial">Arial</option>
+        <option value="Helvetica">Helvetica</option>
+        <option value="Arial Black">Arial Black</option>
+        <option value="Courier New">Courier New</option>
+        <option value="Verdana">Verdana</option>
+    </select>
+    <br>
+    &nbsp; {% trans 'Theme Name' %} :<br>
+    <input type="text" name="theme_name" required></input> <br>
+    <br>
+    &nbsp; {% trans 'Version' %} :<br>
+    <input type="text" name="version"></input> <br>
+    <br>
+    &nbsp; {% trans 'Description' %} :<br>
+    <input type="text" name="description"></input> <br>
+    <br>
+    &nbsp; {% trans 'Author' %} :<br>
+    <input type="text" name="author"></input> <br>
+    <br>
+    &nbsp; {% trans 'URL' %} :<br>
+    <input type="text" name="url"></input> <br>
+    <input type="checkbox" name="text_contrast">{% trans 'Automatically set text colours for best visibility' %}<br>
+    <br><br>
+    <input type="button" value="{% trans 'Preview' %}" id="preview">
+    <input type="submit" value="{% trans 'Save theme' %}">
+</form>
diff --git a/templates/theme_generator/group_preview.twig b/templates/theme_generator/group_preview.twig
new file mode 100644
index 0000000000..54ef07deb9
--- /dev/null
+++ b/templates/theme_generator/group_preview.twig
@@ -0,0 +1,20 @@
+<div class="group" id="group_preview">
+    <h2>Preview Panel</h2>
+    <ul>
+        <li id="li_change_password" class="no_bullets">
+
+            <a href="#">
+                <img src="themes/dot.gif" title="" alt="" class="icon ic_s_passwd">&nbsp;Change password
+            </a>
+        </li>
+        <li id="li_select_mysql_collation" class="no_bullets">
+                <label for="select_collation_connection">
+                <img src="themes/dot.gif" title="" alt="" class="icon ic_s_asci">&nbsp;Server connection collation
+<a href="" target="mysql_doc"><img src="themes/dot.gif" title="Documentation" alt="Documentation" class="icon ic_b_help"></a>:
+            </label>
+                <select lang="en" dir="ltr" name="collation_connection" id="select_collation_connection" class="autosubmit">
+<option value="">Collation</option>
+</select>
+        </li>
+    </ul>
+</div>
diff --git a/templates/theme_generator/table_preview.twig b/templates/theme_generator/table_preview.twig
new file mode 100644
index 0000000000..0e037ef908
--- /dev/null
+++ b/templates/theme_generator/table_preview.twig
@@ -0,0 +1,75 @@
+<div id="table_preview">
+    <div style="position: relative;" class="data">
+        <div class="cRsz" style="height: 102px;">
+            <div class="colborder" style="left: 294.716px;"></div>
+            <div class="colborder" style="left: 369.713px;"></div>
+            <div class="colborder" style="left: 441.716px;"></div>
+            <div class="colborder" style="left: 552.716px;"></div>
+        </div>
+        <table class="sticky_columns" style="position: fixed; z-index: 99; width: 554px; margin-left: 6.56px; top: 57.5625px; display: none;">
+            <thead>
+                <tr>
+                    <th class="column_action print_ignore" colspan="4" style="width: 194.156px;"><span><a href="#" ><img class="fulltext" src="./themes/pmahomme/img/s_fulltext.png" alt="Full texts" title="Full texts"></a></span></th>
+                    <th class="draggable column_heading pointer marker" data-column="Dname" style="width: 87.1562px;"><span><a href="#"  class="sortlink">Dname <img src="themes/dot.gif" title="" alt="Ascending" class="icon ic_s_asc soimg"> <img src="themes/dot.gif" title="" alt="Descending" class="icon ic_s_desc soimg hide"> <small>1</small><input type="hidden" ></a></span></th>
+                </tr>
+            </thead>
+        </table>
+        <table class="table_results ajax pma_table" data-uniqueid="510480552">
+            <thead>
+                <tr>
+                    <th class="column_action print_ignore" colspan="4"><span><a href="#" ><img class="fulltext" src="./themes/pmahomme/img/s_fulltext.png" alt="Full texts" title="Full texts"></a></span></th>
+                    <th class="draggable column_heading pointer marker" data-column="Dname" style="cursor: move;"><span><a href="#"  class="sortlink">Dname <img src="themes/dot.gif" title="" alt="Ascending" class="icon ic_s_asc soimg" style=""> <img src="themes/dot.gif" title="" alt="Descending" class="icon ic_s_desc soimg hide" style="display: none;"> <small>1</small><input type="hidden" ></a></span></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="row_preview">
+                    <td class="center print_ignore"><span><input type="checkbox" id="id_rows_to_delete0_left" name="rows_to_delete[0]" class="multi_checkbox checkall" ><input type="hidden" class="condition_array" >    </span></td>
+                    <td class="edit_row_anchor center print_ignore"><span class="nowrap"><a href="#" ><span class="nowrap"><img src="themes/dot.gif" title="Edit" alt="Edit" class="icon ic_b_edit">&nbsp;Edit</span></a><input type="hidden" class="where_clause" ></span>
+                    </td>
+                    <td class="center print_ignore"><span class="nowrap"><a href="#" ><span class="nowrap"><img src="themes/dot.gif" title="Copy" alt="Copy" class="icon ic_b_insrow">&nbsp;Copy</span></a><input type="hidden" class="where_clause" ></span>
+                    </td>
+                    <td class="center print_ignore"><a href="#"  class="delete_row requireConfirm ajax"><span class="nowrap"><img src="themes/dot.gif" title="Delete" alt="Delete" class="icon ic_b_drop">&nbsp;Delete</span></a>
+                    </td>
+                    <td data-decimals="0" data-type="string" data-originallength="14" class="data grid_edit click2 not_null text"><span>Row 1</span></td>
+                </tr>
+                <tr class="row_alternate_preview">
+                    <td class="center print_ignore"><span><input type="checkbox" id="id_rows_to_delete1_left" name="rows_to_delete[1]" class="multi_checkbox checkall" ><input type="hidden" class="condition_array" >    </span></td>
+                    <td class="edit_row_anchor center print_ignore"><span class="nowrap"><a href="#" ><span class="nowrap"><img src="themes/dot.gif" title="Edit" alt="Edit" class="icon ic_b_edit">&nbsp;Edit</span></a><input type="hidden" class="where_clause" ></span>
+                    </td>
+                    <td class="center print_ignore"><span class="nowrap"><a href="#" ><span class="nowrap"><img src="themes/dot.gif" title="Copy" alt="Copy" class="icon ic_b_insrow">&nbsp;Copy</span></a><input type="hidden" class="where_clause" ></span>
+                    </td>
+                    <td class="center print_ignore"><a href="#"  class="delete_row requireConfirm ajax"><span class="nowrap"><img src="themes/dot.gif" title="Delete" alt="Delete" class="icon ic_b_drop">&nbsp;Delete</span></a>
+                    </td>
+                    <td data-decimals="0" data-type="string" data-originallength="11" class="data grid_edit click2 not_null text"><span>Row 2</span></td>
+                </tr>
+                <tr class="row_preview">
+                    <td class="center print_ignore"><span><input type="checkbox" id="id_rows_to_delete2_left" name="rows_to_delete[2]" class="multi_checkbox checkall" ><input type="hidden" class="condition_array" >    </span></td>
+                    <td class="edit_row_anchor center print_ignore"><span class="nowrap"><a href="#" ><span class="nowrap"><img src="themes/dot.gif" title="Edit" alt="Edit" class="icon ic_b_edit">&nbsp;Edit</span></a><input type="hidden" class="where_clause" ></span>
+                    </td>
+                    <td class="center print_ignore"><span class="nowrap"><a href="#" ><span class="nowrap"><img src="themes/dot.gif" title="Copy" alt="Copy" class="icon ic_b_insrow">&nbsp;Copy</span></a><input type="hidden" class="where_clause" ></span>
+                    </td>
+                    <td class="center print_ignore"><a href="#"  class="delete_row requireConfirm ajax"><span class="nowrap"><img src="themes/dot.gif" title="Delete" alt="Delete" class="icon ic_b_drop">&nbsp;Delete</span></a>
+                    </td>
+                    <td data-decimals="0" data-type="string" data-originallength="8" class="data grid_edit click2 not_null text"><span>Row 3</span></td>
+                </tr>
+            </tbody>
+        </table>
+        <div class="cPointer" style="visibility: hidden;"></div>
+        <div class="cCpy" style="display: none;"></div>
+        <div class="cDrop">
+            <div class="coldrop" style="left: 175.844px; top: -1.312px;"></div>
+        </div>
+        <div class="cList" style="display: none;">
+            <div class="lDiv">
+                <div><input type="checkbox" checked="checked">Dname 1</div>
+            </div>
+            <div class="showAllColBtn">Show all</div>
+        </div>
+        <div class="cEdit" style="display: none;"><input class="edit_box" rows="1">
+            <div class="edit_area"></div>
+        </div>
+        <div class="cEdit" style="display: none;"><textarea class="edit_box" rows="1"></textarea>
+            <div class="edit_area"></div>
+        </div>
+    </div>
+</div>
diff --git a/test/classes/ThemeGenerator/LayoutTest.php b/test/classes/ThemeGenerator/LayoutTest.php
new file mode 100644
index 0000000000..88adbf22f4
--- /dev/null
+++ b/test/classes/ThemeGenerator/LayoutTest.php
@@ -0,0 +1,35 @@
+<?php
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * tests for Layout class in theme folder
+ *
+ * @package PhpMyAdmin-test
+ */
+declare(strict_types=1);
+
+namespace PhpMyAdmin\Tests\ThemeGenerator;
+
+use PhpMyAdmin\Tests\ThemeGeneratorTest;
+use PhpMyAdmin\Tests\PmaTestCase;
+
+/**
+ * Tests for PMA_Layout class
+ *
+ * @package PhpMyAdmin-test
+ */
+class LayoutTest extends PmaTestCase
+{
+    /**
+     * Test for Layout::createLayoutFile
+     *
+     * @return void
+     */
+    public function testCreateLayoutFile()
+    {
+        $theme = new ThemeGeneratorTest();
+        $post = $theme->setUp();
+        $output = $theme->getLayoutData();
+        $this->assertFileIsReadable('themes/' . $post['theme_name'] . '/layout.inc.php');
+        $this->assertContains('$GLOBALS[\'cfg\'][\'NaviBackground\']           = \'' . $post['Navigation_Panel'] . '\';' , $output);
+    }
+}
diff --git a/test/classes/ThemeGeneratorTest.php b/test/classes/ThemeGeneratorTest.php
new file mode 100644
index 0000000000..7f4cfbeafe
--- /dev/null
+++ b/test/classes/ThemeGeneratorTest.php
@@ -0,0 +1,133 @@
+<?php
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * tests for ThemeGenerator class
+ *
+ * @package PhpMyAdmin-test
+ */
+declare(strict_types=1);
+
+namespace PhpMyAdmin\Tests;
+
+use PhpMyAdmin\ThemeGenerator;
+use PhpMyAdmin\Tests\PmaTestCase;
+
+/**
+ * Tests for PMA_ThemeGenerator class
+ *
+ * @package PhpMyAdmin-test
+ */
+class ThemeGeneratorTest extends PmaTestCase
+{
+    var $output;
+    protected $theme;
+
+    /**
+     * Sets up the fixture, for example, opens a network connection.
+     * This method is called before a test is executed.
+     *
+     * @return array $_POST POST data for LayoutTest assertion
+     */
+    protected function setUp()
+    {
+        $_POST['theme_name'] = 'phpunit';
+        $_POST['version'] = 'test1';
+        $_POST['description'] = 'Test theme';
+        $_POST['author'] = 'test';
+        $_POST['url'] = 'http://www.123test.com';
+        $_POST['Navigation_Panel'] = '#ffffff';
+        $_POST['Navigation_Hover'] = '#ffffff';
+        $_POST['Text_Colour'] = '#ffffff';
+        $_POST['Background_Colour'] = '#ffffff';
+        $_POST['Header'] = '#ffffff';
+        $_POST['Table_Header_and_Footer'] = '#ffffff';
+        $_POST['Table_Header_and_Footer_Background'] = '#ffffff';
+        $_POST['Table_Header_and_Footer_Text_Colour'] = '#ffffff';
+        $_POST['Table_Row_Background'] = '#ffffff';
+        $_POST['Table_Row_Alternate_Background'] = '#ffffff';
+        $_POST['Table_Row_Hover_and_Selected'] = '#ffffff';
+        $_POST['Hyperlink_Text'] = '#ffffff';
+        $_POST['Group_Background'] = '#ffffff';
+        $_POST['font'] = 'Arial';
+        $GLOBALS['cfg']['ThemeGenerator'] = true;
+        $this->theme = new ThemeGenerator();
+        $this->output = $this->theme->createFileStructure($_POST);
+        return $_POST;
+    }
+
+    /**
+     * Test for ThemeGenerator::colorPicker
+     *
+     * @return void
+     */
+    public function testColorPicker()
+    {
+        if ($GLOBALS['cfg']['ThemeGenerator']) {
+            $output = $this->theme->colorPicker();
+            $this->assertContains('<div id="container">' , $output);
+            $this->assertContains('<div id="palette" class="block">' , $output);
+            $this->assertContains('<div id="color-palette"></div>' , $output);
+            $this->assertContains('<div id="picker" class="block">' , $output);
+            $this->assertContains('<div class="ui-color-picker" data-topic="picker" data-mode="HSB"></div>' , $output);
+            $this->assertContains('<div id="picker-samples" sample-id="master">' , $output);
+        }
+    }
+
+    /**
+     * Test for ThemeGenerator::form
+     *
+     * @return void
+     */
+    public function testForm()
+    {
+        if ($GLOBALS['cfg']['ThemeGenerator']) {
+            $output = $this->theme->form();
+            $this->assertContains('<form action="theme_generator.php" method="post" id="save">' , $output);
+            $this->assertContains('<select name="type" id="theme">' , $output);
+            $this->assertContains('<input type="text" name="theme_name" required></input>' , $output);
+        }
+    }
+
+    /**
+     * Test for ThemeGenerator::createJsonFile
+     *
+     * @return void
+     */
+    public function testCreateJsonFile()
+    {
+        $name = $_POST['theme_name'];
+        $this->assertFileIsReadable('themes/' . $name . '/theme.json');
+        $this->assertContains('"name": "' . $name . '",' , $this->output['json']);
+        $this->assertContains('"version": "' . $_POST['version'] . '",' , $this->output['json']);
+        $this->assertContains('"description": "' . $_POST['description'] . '",' , $this->output['json']);
+        $this->assertContains('"author": "' . $_POST['author'] . '",' , $this->output['json']);
+        $this->assertContains('"url": "' . $_POST['url'] . '",' , $this->output['json']);
+    }
+
+    /**
+     * Return Layout file data
+     *
+     * @return string $this->output['layout'] layout.inc.php data string
+     */
+    public function getLayoutData()
+    {
+        return $this->output['layout'];
+    }
+
+    /**
+     * Tears down the fixture, for example, closes a network connection.
+     * This method is called after a test is executed.
+     *
+     * @return void
+     */
+    protected function tearDown()
+    {
+        $name = $_POST['theme_name'];
+        unlink('themes/' . $name . '/theme.json');
+        unlink('themes/' . $name . '/layout.inc.php');
+        unlink('themes/' . $name . '/css/common.css.php');
+        unlink('themes/' . $name . '/css/navigation.css.php');
+        rmdir('themes/' . $name . '/css');
+        rmdir('themes/' . $name);
+    }
+}
diff --git a/theme_generator.php b/theme_generator.php
new file mode 100644
index 0000000000..362f8ba052
--- /dev/null
+++ b/theme_generator.php
@@ -0,0 +1,42 @@
+<?php
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Theme generator tool
+ *
+ * @package PhpMyAdmin
+ */
+use PhpMyAdmin\Message;
+use PhpMyAdmin\Response;
+use PhpMyAdmin\ThemeGenerator;
+
+require_once 'libraries/common.inc.php';
+
+$response = Response::getInstance();
+$header   = $response->getHeader();
+$scripts  = $header->getScripts();
+if ($GLOBALS['cfg']['ThemeGenerator']) {
+    $scripts->addFile('theme_generator/color_picker.js');
+    $scripts->addFile('theme_generator/preview.js');
+
+    $theme = new ThemeGenerator();
+
+    $response->addHTML($theme->testWritableThemeDirectory());
+    $response->addHTML($theme->colorPicker());
+    $response->addHTML($theme->form());
+    $response->addHTML($theme->tablePreview());
+    $response->addHTML($theme->groupPreview());
+    if (isset($_POST['Base_Colour'])) {
+        $output = $theme->createFileStructure($_POST);
+        if ($output['json'] && $output['layout']) {
+            $response->addHTML(
+                Message::success(
+                    sprintf(
+                        __('Theme saved, go to the %smain page%s to try it'),
+                        '<a href="index.php">',
+                        '</a>'
+                    )
+                )
+            );
+        }
+    }
+}
diff --git a/themes/pmahomme/css/theme_generator.css.php b/themes/pmahomme/css/theme_generator.css.php
new file mode 100644
index 0000000000..79f9d4ca33
--- /dev/null
+++ b/themes/pmahomme/css/theme_generator.css.php
@@ -0,0 +1,725 @@
+<?php
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Theme Generator styles for the pmahomme theme
+ *
+ * @package    PhpMyAdmin-theme
+ * @subpackage PMAHomme
+ */
+
+// unplanned execution path
+if (! defined('PHPMYADMIN') && ! defined('TESTSUITE')) {
+    exit();
+}
+
+$pickerMask = $theme->getImgPath('theme_generator/picker_mask_200.png');
+$arrow = $theme->getImgPath('theme_generator/arrow.png');
+$arrows = $theme->getImgPath('theme_generator/arrows.png');
+$hue = $theme->getImgPath('theme_generator/hue.png');
+$alpha = $theme->getImgPath('theme_generator/alpha.png');
+$alphaMask = $theme->getImgPath('theme_generator/alpha_mask.png');
+$grain = $theme->getImgPath('theme_generator/grain.png');
+?>
+
+.ui-color-picker {
+    width: 420px;
+    margin: 0;
+    border: 1px solid #DDD;
+    background-color: #FFF;
+    display: table;
+
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.ui-color-picker .picking-area {
+    width: 198px;
+    height: 198px;
+    margin: 5px;
+    border: 1px solid #DDD;
+    position: relative;
+    float: left;
+    display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+    cursor: default;
+}
+
+/* HSB format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+    background: url(<?php echo $pickerMask; ?>) center center;
+
+    background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+                -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+    background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+                -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+    background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+                -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+    background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+                -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+    background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+    background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                                    hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+                -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+    background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                                    hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+                -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+    background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                                    hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+                -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+    background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                                    hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+                -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+    background-color: #F00;
+}
+
+.ui-color-picker .picker {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 1px solid #FFF;
+    position: absolute;
+    top: 45%;
+    left: 45%;
+}
+
+.ui-color-picker .picker:before {
+    width: 8px;
+    height: 8px;
+    content: "";
+    position: absolute;
+    border: 1px solid #999;
+    border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+    width: 198px;
+    height: 28px;
+    margin: 5px;
+    border: 1px solid #FFF;
+    float: left;
+}
+
+.ui-color-picker .hue {
+    background: url(<?php echo $hue; ?>) center;
+    background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+                #00F 66.66%, #F0F 83.33%, #F00 100%);
+    background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+                #00F 66.66%, #F0F 83.33%, #F00 100%);
+    background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+                #00F 66.66%, #F0F 83.33%, #F00 100%);
+    background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+                #00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+    border: 1px solid #CCC;
+    background: url(<?php echo $alpha; ?>);
+}
+
+.ui-color-picker .alpha-mask {
+    width: 100%;
+    height: 100%;
+    background: url(<?php echo $alphaMask; ?>);
+}
+
+.ui-color-picker .slider-picker {
+    width: 2px;
+    height: 100%;
+    border: 1px solid #777;
+    background-color: #FFF;
+    position: relative;
+    top: -1px;
+}
+
+/* input HSB and RGB */
+
+.ui-color-picker .info {
+    width: 200px;
+    margin: 5px;
+    float: left;
+}
+
+.ui-color-picker .info * {
+    float: left;
+}
+
+.ui-color-picker .input {
+    width: 64px;
+    margin: 5px 2px;
+    float: left;
+}
+
+.ui-color-picker .input .name {
+    height: 20px;
+    width: 30px;
+    text-align: center;
+    font-size: 14px;
+    line-height: 18px;
+    float: left;
+}
+
+.ui-color-picker .input input {
+    width: 30px;
+    height: 18px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid #DDD;
+    text-align: center;
+    float: right;
+
+    -moz-user-select: text;
+    -webkit-user-select: text;
+    -ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+    display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+    display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+    display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+    margin-top: 10px;
+    width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+    width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+    float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+    width: auto;
+    float: right;
+    margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+    display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+    width: 90px;
+    height: 24px;
+    padding: 2px 0;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+    width: 95px;
+    height: 53px;
+    margin: 5px;
+    margin-top: 10px;
+    border: 1px solid #DDD;
+    background-image: url(<?php echo $alpha; ?>);
+    float: left;
+    position: relative;
+}
+
+.ui-color-picker .preview:before {
+    height: 100%;
+    width: 50%;
+    left: 50%;
+    top: 0;
+    content: "";
+    background: #FFF;
+    position: absolute;
+    z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 0, 0, 0.5);
+    position: absolute;
+    z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+    width: 10px;
+    height: 20px;
+    position: relative;
+    border-radius: 5px 0 0 5px;
+    border: 1px solid #DDD;
+    background-color: #EEE;
+    left: -12px;
+    top: -1px;
+    z-index: 1;
+    transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+    background-color: #CCC;
+    cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+    height: 20px;
+    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.ui-input-slider * {
+    float: left;
+    height: 100%;
+    line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+    margin: 0;
+    padding: 0;
+    width: 50px;
+    text-align: center;
+
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+    width: 90px;
+    padding: 0px 10px 0px 0px;
+    text-align: right;
+    text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+    width: 16px;
+    cursor: pointer;
+    background: url(<?php echo $arrows; ?>) center left no-repeat;
+}
+
+.ui-input-slider-right {
+    background: url(<?php echo $arrows; ?>) center right no-repeat;
+}
+
+.ui-input-slider-name {
+    width: 90px;
+    padding: 0 10px 0 0;
+    text-align: right;
+    text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+    width: 25px;
+    background-color: #2C9FC9;
+    border-radius: 5px;
+    color: #FFF;
+    font-weight: bold;
+    line-height: 14px;
+    text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+    background-color: #379B4A;
+    cursor: pointer;
+}
+
+/**
+ * 	Container
+ */
+#container {
+    width: 100%;
+
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+    display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+    padding: 10px;
+    width: 980px;
+}
+
+.ui-color-picker {
+    padding: 3px 5px;
+    float: left;
+    border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+    display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+    cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+    width: 375px;
+    height: 114px;
+    max-height: 218px;
+    margin: 0 10px 0 30px;
+    overflow: hidden;
+    position: relative;
+    float: left;
+
+    transition: all 0.2s;
+}
+
+#picker-samples .sample {
+    width: 40px;
+    height: 40px;
+    margin: 5px;
+    border: 1px solid #DDD;
+    position: absolute;
+    float: left;
+    transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+    cursor: pointer;
+    border-color: #BBB;
+    transform: scale(1.15);
+    border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+    border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+    content: "";
+    position: absolute;
+    background: url(<?php echo $arrow; ?>) center no-repeat;
+    width: 100%;
+    height: 12px;
+    top: -12px;
+    z-index: 2;
+}
+
+#picker-samples #add-icon {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+    cursor: pointer;
+    border-color: #DDD;
+    box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+    content: "";
+    position: absolute;
+    background-color: #EEE;
+    box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+    width: 70%;
+    height: 16%;
+    top: 42%;
+    left: 15%;
+}
+
+#picker-samples #add-icon:after {
+    width: 16%;
+    height: 70%;
+    top: 15%;
+    left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+    background-color: #DDD;
+    box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+    width: 110px;
+    padding: 10px;
+    float: right;
+}
+
+#controls #picker-switch {
+    text-align: center;
+    float: left;
+}
+
+#controls .icon {
+    width: 48px;
+    height: 48px;
+    margin: 10px 0;
+    background-repeat: no-repeat;
+    background-position: center;
+    border: 1px solid #DDD;
+    display: table;
+    float: left;
+}
+
+#controls .icon:hover {
+    cursor: pointer;
+}
+
+#controls .switch {
+    width: 106px;
+    padding: 1px;
+    border: 1px solid #CCC;
+    font-size: 14px;
+    text-align: center;
+    line-height: 24px;
+    overflow: hidden;
+    float: left;
+}
+
+#controls .switch:hover {
+    cursor: pointer;
+}
+
+#controls .switch > * {
+    width: 50%;
+    padding: 2px 0;
+    background-color: #EEE;
+    float: left;
+}
+
+#controls .switch [data-active='true'] {
+    color: #FFF;
+    background-image: url(<?php echo $grain; ?>);
+    background-color: #777;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+    margin: 0 8px 0 0;
+    border: 1px solid #EEE;
+    display: inline-block;
+    float: right;
+}
+
+#color-theme .box {
+    width: 80px;
+    height: 92px;
+    float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+    width: 360px;
+    float: left;
+}
+
+#color-info .title {
+    width: 100%;
+    padding: 15px;
+    font-size: 18px;
+    text-align: center;
+}
+
+#color-info .copy-container {
+    position: absolute;
+    top: -100%;
+}
+
+#color-info .property {
+    min-width: 280px;
+    height: 30px;
+    margin: 10px 0;
+    text-align: center;
+    line-height: 30px;
+}
+
+#color-info .property > * {
+    float: left;
+}
+
+#color-info .property .type {
+    width: 60px;
+    height: 100%;
+    padding: 0 16px 0 0;
+    text-align: right;
+}
+
+#color-info .property .value {
+    width: 200px;
+    height: 100%;
+    padding: 0 10px;
+    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    color: #777;
+    text-align: center;
+    background-color: #FFF;
+    border: none;
+}
+
+#color-info .property .value:hover {
+    color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+    background-position: center right;
+}
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+    width: 675px;
+    height: 220px;
+    padding: 10px 0;
+    background-image: url(<?php echo $grain; ?>);
+    background-repeat: repeat;
+    background-color: #EEE;
+    color: #777;
+
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+#color-palette {
+    width: 1000px;
+    font-family: Arial, Helvetica, sans-serif;
+    color: #777;
+    float: left;
+}
+
+#color-palette .container {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    overflow: hidden;
+    float: left;
+    transition: all 0.5s;
+}
+
+#color-palette .container > * {
+    float: left;
+}
+
+#color-palette .title {
+    width: 100px;
+    padding: 0 10px;
+    text-align: right;
+    line-height: inherit;
+}
+
+#color-palette .palette {
+    width: 494px;
+    height: 38px;
+    margin: 3px;
+    padding: 3px;
+    display: table;
+    background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+    width: 30px;
+    height: 30px;
+    margin: 3px;
+    position: relative;
+    border: 1px solid #DDD;
+    float: left;
+    transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+    cursor: pointer;
+    border-color: #BBB;
+    transform: scale(1.15);
+    border-radius: 3px;
+}
+
+#zindex {
+    height: 20px;
+    margin: 5px;
+    font-size: 16px;
+    position: absolute;
+    opacity: 0;
+    top: -10000px;
+    left: 0;
+    color: #777;
+    float: left;
+    transition: opacity 1s;
+}
+
+#zindex input {
+    border: 1px solid #DDD;
+    font-size: 16px;
+    color: #777;
+}
+
+#zindex .ui-input-slider-info {
+    width: 60px;
+}
+
+#zindex[data-active='true'] {
+    top: 0;
+    opacity: 1;
+}
+
+.title:hover {
+    text-decoration: underline;
+    color: #235a81;
+}
+
+#group_preview {
+    display: none;
+    position: relative;
+    left: 523px;
+    bottom: 700px;
+}
+
+#group_preview.group {
+    width: 294px;
+}
+
+#table_preview {
+    display: none;
+    position: relative;
+    left: 523px;
+    bottom: 718px;
+}
diff --git a/themes/pmahomme/img/theme_generator/alpha.png b/themes/pmahomme/img/theme_generator/alpha.png
new file mode 100644
index 0000000000..a28b929a4a
--- /dev/null
+++ b/themes/pmahomme/img/theme_generator/alpha.png
diff --git a/themes/pmahomme/img/theme_generator/alpha_mask.png b/themes/pmahomme/img/theme_generator/alpha_mask.png
new file mode 100644
index 0000000000..8863bb6150
--- /dev/null
+++ b/themes/pmahomme/img/theme_generator/alpha_mask.png
diff --git a/themes/pmahomme/img/theme_generator/arrow.png b/themes/pmahomme/img/theme_generator/arrow.png
new file mode 100644
index 0000000000..0010bca5d8
--- /dev/null
+++ b/themes/pmahomme/img/theme_generator/arrow.png
diff --git a/themes/pmahomme/img/theme_generator/arrows.png b/themes/pmahomme/img/theme_generator/arrows.png
new file mode 100644
index 0000000000..c6ba070022
--- /dev/null
+++ b/themes/pmahomme/img/theme_generator/arrows.png
diff --git a/themes/pmahomme/img/theme_generator/grain.png b/themes/pmahomme/img/theme_generator/grain.png
new file mode 100644
index 0000000000..95c5544c18
--- /dev/null
+++ b/themes/pmahomme/img/theme_generator/grain.png
diff --git a/themes/pmahomme/img/theme_generator/hue.png b/themes/pmahomme/img/theme_generator/hue.png
new file mode 100644
index 0000000000..35b001ce43
--- /dev/null
+++ b/themes/pmahomme/img/theme_generator/hue.png
diff --git a/themes/pmahomme/img/theme_generator/picker_mask_200.png b/themes/pmahomme/img/theme_generator/picker_mask_200.png
new file mode 100644
index 0000000000..eb25ca58b4
--- /dev/null
+++ b/themes/pmahomme/img/theme_generator/picker_mask_200.png