[ADD] theme 8.0

2021-05-11 15:41:12 +02:00
commit 51c615247e
3583 changed files with 121845 additions and 0 deletions
@@ -0,0 +1,72 @@
+(function () {
+    'use strict';
+
+    var website = openerp.website;
+
+    // Set custom background image from modal
+    website.Theme.include({
+        start: function () {
+            this._super();
+            this.$el.find('label:has(input[data-xmlid="theme_anelusia.option_bg_custom"])').on('mouseup', _.bind(this.set_custom_bg, this));
+        },
+        change_selection: function (event, force) {
+            var self = this;
+            if (!force && (event.originalEvent && $(event.target).is('input[data-xmlid="theme_anelusia.option_bg_custom"]'))) {
+                this.set_custom_bg(event);
+                return;
+            }
+
+            this._super(event);
+        },
+        set_custom_bg: function (event) {
+            var self = this;
+
+            clearTimeout(this.set_custom_bg_time);
+            this.set_custom_bg_time = setTimeout(function () {
+
+                var $image = $('<img>');
+                var element = new CKEDITOR.dom.element($image[0]);
+                var editor = new website.editor.MediaDialog({}, element);
+
+                $image.on('saved', this, function () {
+                    var src = $image.attr('src');
+
+                    self.$el.addClass("loading");
+
+                    openerp.jsonRpc('/web/dataset/call', 'call', {
+                        model: 'ir.model.data',
+                        method: 'get_object_reference',
+                        args: ["theme_anelusia", "option_bg_custom"],
+                    }).then(function (data) {
+
+                        openerp.jsonRpc('/web/dataset/call', 'call', {
+                            model: 'ir.ui.view',
+                            method: 'save',
+                            args: [
+                                data[1],
+                                "body{background-image: url('"+src+"'); background-size: cover; background-position: top center;}",
+                                "//style",
+                                website.get_context()],
+                        }).then(function () {
+
+                            self.$el.removeClass("loading");
+                            self.change_selection(event, true);
+                        });
+
+                    });
+
+                });
+
+                editor.on('cancel', this, function () {
+                    if(typeof callback === "function") {
+                        callback();
+                    }
+                });
+
+                editor.appendTo(document.body);
+
+            },0);
+        }
+    });
+
+})();
@@ -0,0 +1,6 @@
+$(document).ready(function () {
+    /* /////// If menu is open then the page is not scrollable //////// */
+    $('.navbar-header').on('click', '.navbar-toggle', function () {
+        $('body').toggleClass('no-scroll');
+    });
+});
@@ -0,0 +1,143 @@
+/* =====================  BLOG ===================== */
+
+#blog_right_column {
+    padding: 0 15px 35px 30px;
+}
+.website_blog {
+    .col-sm-8 {
+        padding: 0 15px 30px 35px;
+    }
+}
+.post-meta {
+    margin-top: 20px;
+    text-align: left;
+}
+.blog_title {
+    .post-meta {
+        text-align: center;
+    }
+}
+#main_column {
+    h4 {
+        font-size: 18px;
+    }
+    h2 {
+        font-size: 25px;
+    }
+}
+
+/* =====================  FORUM ===================== */
+
+.website_forum {
+    background-color: @color-eta;
+    margin-top: 0px !important;
+    width: 100%;
+    .navbar-default {
+        margin-bottom: 0px;
+        position: relative;
+        .navbar-nav > li > a, .navbar-header span {
+            color: @color-delta;
+        }
+        .navbar-right {
+            margin-bottom: 0;
+            .btn {
+                padding: 5px 20px;
+            }
+            input {
+                margin-right: 15px;
+                .transition (background-color 0.3s ease-out);
+            }
+        }
+        li.active > a {
+            background-color: @color-zeta !important;
+        }
+    }
+}
+.website_forum + #wrap {
+    padding: 35px;
+    .col-sm-3 {
+        .btn-block {
+            background-color: @color-epsilon;
+            color: white;
+        }
+    }
+    .question {
+        #options button {
+            color: @color-epsilon;
+            &:hover, &:focus {
+                text-decoration: none;
+            }
+        }
+        .oe_grey {
+            background-color: rgba(0, 0, 0, 0);
+        }
+    }
+}
+.forum_docs {
+    margin-top: 30px;
+    padding: 10px 35px;
+    background-color: white;
+}
+
+/* ============== Breadcrumb in events, job etc ============== */
+
+.breadcrumb {
+    background: rgba(0, 0, 0, 0);
+    .BorderRadius(0px);
+}
+/* ============== Nav-pills in events, job etc ============== */
+.nav-pills {
+    li a {
+        color: @gray-light;
+        &:hover {
+            color: @gray;
+        }
+    }
+    li.active > a {
+        color: @color-epsilon;
+        background: rgba(0, 0, 0, 0);
+        &:hover {
+            background-color: @gray-lighter;
+            color: @gray;
+        }
+        .badge {
+            color: @color-alpha;
+            background-color: @color-epsilon;
+        }
+    }
+}
+
+/* ============== Panel styles ============== */
+
+.panel-heading {
+    background-color: rgba(0, 0, 0, 0) !important;
+    border: none;
+    color: @color-epsilon !important;
+}
+.panel-footer {
+    background: rgba(0, 0, 0, 0);
+}
+.panel {
+    text-align: center;
+    border: none;
+    box-shadow: none;
+    border: 1px solid @gray-lighter;
+    .BorderRadius (0px);
+    .list-group-item {
+        background: rgba(0, 0, 0, 0);
+        border-color: white;
+    }
+}
+.panel-title {
+    font-size: 20px;
+}
+
+/* =====================  DOCUMENTATION ===================== */
+
+[data-view-xmlid*="website_forum_doc.documentation_post"] { 
+    .container:first-child {
+        margin-bottom: 0px !important;
+        height: 90px;
+        padding-top: 20px;
+    }
+}
@@ -0,0 +1,185 @@
+/* ================== BOOTSTRAP GRAYS ================= */
+
+@gray-darker:   lighten(#000, 13.5%); // #222
+@gray-dark:     lighten(#000, 20%);   // #333
+@gray:          lighten(#000, 33.5%); // #555
+@gray-light:    lighten(#000, 46.7%); // #777
+@gray-lighter:  lighten(#000, 85%); // #eee
+@white:         #ffffff;
+@black:         #000000;
+
+/* ================== COLOR PRESET 1 ================= */
+
+@colorPreset1_color1:           #f4f1db; // Beige
+@colorPreset1_color1_dark:      darken(@colorPreset1_color1, 10%);
+@colorPreset1_color1_light:     lighten(@colorPreset1_color1, 5%);
+@colorPreset1_color2:           #928371; // Middle Brown
+@colorPreset1_color2_dark:      darken(@colorPreset1_color2, 10%);
+@colorPreset1_color2_light:     lighten(@colorPreset1_color2, 5%);
+@colorPreset1_color3:           #53453f; // Dark Brown
+@colorPreset1_color3_dark:      darken(@colorPreset1_color3, 10%);
+@colorPreset1_color3_light:     lighten(@colorPreset1_color3, 10%);
+@colorPreset1_color4:           #c31737; // Pink
+@colorPreset1_color4_dark:      darken(@colorPreset1_color4, 10%);
+@colorPreset1_color4_light:     lighten(@colorPreset1_color4, 5%);
+
+/* ================== COLOR PRESET 2 ================= */
+
+@colorPreset2_color1:           #d8eff1; // light blue
+@colorPreset2_color1_dark:      darken(@colorPreset2_color1, 10%);
+@colorPreset2_color1_light:     lighten(@colorPreset2_color1, 5%);
+@colorPreset2_color2:           #0d75ac; // turkis
+@colorPreset2_color2_dark:      darken(@colorPreset2_color2, 10%);
+@colorPreset2_color2_light:     lighten(@colorPreset2_color2, 10%);
+@colorPreset2_color3:           #000f3d; // dark blue
+@colorPreset2_color3_dark:      darken(@colorPreset2_color3, 10%);
+@colorPreset2_color3_light:     lighten(@colorPreset2_color3, 10%);
+@colorPreset2_color4:           #e07a6b; // salmon
+@colorPreset2_color4_dark:      darken(@colorPreset2_color4, 10%);
+@colorPreset2_color4_light:     lighten(@colorPreset2_color4, 5%);
+
+/* ================== COLOR PRESET 3 ================= */
+
+@colorPreset3_color1:           #faf7e1; // bone white
+@colorPreset3_color1_dark:      darken(@colorPreset3_color1, 10%);
+@colorPreset3_color1_light:     lighten(@colorPreset3_color1, 5%);
+@colorPreset3_color2:           #e3d6c6; // beige
+@colorPreset3_color2_dark:      darken(@colorPreset3_color2, 10%);
+@colorPreset3_color2_light:     lighten(@colorPreset3_color2, 10%);
+@colorPreset3_color3:           #eed187; // egg yellow
+@colorPreset3_color3_dark:      darken(@colorPreset3_color3, 10%);
+@colorPreset3_color3_light:     lighten(@colorPreset3_color3, 10%);
+@colorPreset3_color4:           #dc733f; // orange
+@colorPreset3_color4_dark:      darken(@colorPreset3_color4, 10%);
+@colorPreset3_color4_light:     lighten(@colorPreset3_color4, 5%);
+
+/* ================== COLOR PRESET 4 ================= */
+
+@colorPreset4_color1:           #cfcfcf; // light green
+@colorPreset4_color1_dark:      darken(@colorPreset4_color1, 10%);
+@colorPreset4_color1_light:     lighten(@colorPreset4_color1, 5%);
+@colorPreset4_color2:           #2e2e2e; // middle green
+@colorPreset4_color2_dark:      darken(@colorPreset4_color2, 10%);
+@colorPreset4_color2_light:     lighten(@colorPreset4_color2, 10%);
+@colorPreset4_color3:           #000000; // dark blue  
+@colorPreset4_color3_dark:      darken(@colorPreset4_color3, 10%);
+@colorPreset4_color3_light:     lighten(@colorPreset4_color3, 10%);
+@colorPreset4_color4:           #32c0c9; // orange
+@colorPreset4_color4_dark:      darken(@colorPreset4_color4, 10%);
+@colorPreset4_color4_light:     lighten(@colorPreset4_color4, 5%);
+
+/* ================== COLOR PRESET 5 ================= */
+
+@colorPreset5_color1:           #aacfb0; // light green
+@colorPreset5_color1_dark:      darken(@colorPreset5_color1, 10%);
+@colorPreset5_color1_light:     lighten(@colorPreset5_color1, 5%);
+@colorPreset5_color2:           #4dac5e; // middle green
+@colorPreset5_color2_dark:      darken(@colorPreset5_color2, 10%);
+@colorPreset5_color2_light:     lighten(@colorPreset5_color2, 10%);
+@colorPreset5_color3:           #93ab12; // dark green
+@colorPreset5_color3_dark:      darken(@colorPreset5_color3, 10%);
+@colorPreset5_color3_light:     lighten(@colorPreset5_color3, 10%);
+@colorPreset5_color4:           #e62e3e; // mallow
+@colorPreset5_color4_dark:      darken(@colorPreset5_color4, 10%);
+@colorPreset5_color4_light:     lighten(@colorPreset5_color4, 5%);
+
+/* ================== COLOR PRESET 6 ================= */
+
+@colorPreset6_color1:           #cdd0a2; // green
+@colorPreset6_color1_dark:      darken(@colorPreset6_color1, 10%);
+@colorPreset6_color1_light:     lighten(@colorPreset6_color1, 5%);
+@colorPreset6_color2:           #b4bbb9; // gray
+@colorPreset6_color2_dark:      darken(@colorPreset6_color2, 5%);
+@colorPreset6_color2_light:     lighten(@colorPreset6_color2, 5%);
+@colorPreset6_color3:           #242327; // black
+@colorPreset6_color3_dark:      darken(@colorPreset6_color3, 10%);
+@colorPreset6_color3_light:     lighten(@colorPreset6_color3, 10%);
+@colorPreset6_color4:           #957985; // purple
+@colorPreset6_color4_dark:      darken(@colorPreset6_color4, 10%);
+@colorPreset6_color4_light:     lighten(@colorPreset6_color4, 5%);
+
+/* ========================= BLACK ========================= */
+
+.black {
+    .SetDisplayColor (@black, @gray-light);
+}
+
+/* ========================= WHITE ========================= */
+
+.white {
+    .SetDisplayColor (@white, @gray);
+}
+
+/* ========================= GRAY ========================= */
+
+.gray {
+    .SetDisplayColor (@gray, @white);
+    h1, h2, h3, h4, h5, h6 {.SetTextShadow (2px, @black);}
+}
+
+/* ========================= LIGHTGRAY ========================= */
+
+.lightgray {
+    .SetDisplayColor (@gray-lighter, @gray);
+    .s_progress {
+        color: red !important;
+    }
+}
+
+/* ========================= DARKGRAY ========================= */
+
+.darkgray {
+    .SetDisplayColor (@gray-dark, @white);
+    h1, h2, h3, h4, h5, h6 {.SetTextShadow (2px, @black);}
+}
+
+/* ================== FONT COLORS IN THE EDITOR ================= */
+
+.js_sale, .oe_website_sale {
+    .text-muted {color: @gray-light;}
+}
+
+.text-blue {color: @black;}
+.bg-blue {background-color: @black;}
+
+.text-turquoise{color: @gray-darker;}
+.bg-turquoise {background-color: @gray-darker;}
+
+.text-green {color: @gray-dark;}
+.bg-green {background-color: @gray-dark;}
+
+.text-yellow {color: @gray;}
+.bg-yellow {background-color: @gray;}
+
+.text-red {color: @gray-light;}
+.bg-red {background-color: @gray-light;}
+
+.text-pink {color: @gray-lighter;}
+.bg-pink {background-color: @gray-lighter;}
+
+.text-purple {color: @white;}
+.bg-purple {background-color: @white;}
+
+.text-blue2 {color: #1e3370;}
+.bg-blue2 {background-color: #1e3370;}
+
+.text-turquoise2 {color: #1993a5;}
+.bg-turquoise2 {background-color: #1993a5;}
+
+.text-green2 {color: #4f8640;}
+.bg-green2 {background-color: #4f8640;}
+
+.text-yellow2 {color: #e6d123;}
+.bg-yellow2 {background-color: #e6d123;}
+
+.text-red2 {color: #c22e2e;}
+.bg-red2 {background-color: #c22e2e;}
+
+.text-lightblue2 {color: #5ea7db;}
+.bg-lightblue2 {background-color: #5ea7db;}
+
+.text-purple2 {color: #8458a7;}
+.bg-purple2 {background-color: #8458a7;}
+
+.text-brown2 {color: #725a4c;}
+.bg-brown2 {color: #725a4c;}
@@ -0,0 +1,404 @@
+/* ================== MODAL COLORS ================= */
+
+@modalGreen: @colorPreset6_color2;
+@modalGreenDark: darken(@modalGreen, 5%);
+@modalGreenLight: lighten(@modalGreen, 15%);
+@modalOrange: @colorPreset5_color1;
+@modalBlue: #151C24;
+@modalLightBlue: lighten(@modalBlue, 20%);
+
+/* ======================= COLOR PRESET 1 ====================== */
+
+#theme_customize_modal .row .colorPreset1 div:nth-child(1) {background-color: @white;}
+#theme_customize_modal .row .colorPreset1 div:nth-child(2) {background-color: @colorPreset1_color1;}
+#theme_customize_modal .row .colorPreset1 div:nth-child(3) {background-color: @colorPreset1_color2;}
+#theme_customize_modal .row .colorPreset1 div:nth-child(4) {background-color: @colorPreset1_color3;}
+#theme_customize_modal .row .colorPreset1 div:nth-child(5) {background-color: @colorPreset1_color4;}
+
+/* ======================= COLOR PRESET 2 ====================== */
+
+#theme_customize_modal .row .colorPreset2 div:nth-child(1) {background-color: @colorPreset2_color1;}
+#theme_customize_modal .row .colorPreset2 div:nth-child(2) {background-color: @colorPreset2_color2;}
+#theme_customize_modal .row .colorPreset2 div:nth-child(3) {background-color: @white;}
+#theme_customize_modal .row .colorPreset2 div:nth-child(4) {background-color: @colorPreset2_color3;}
+#theme_customize_modal .row .colorPreset2 div:nth-child(5) {background-color: @colorPreset2_color4;}
+
+/* ======================= COLOR PRESET 3 ====================== */
+
+#theme_customize_modal .row .colorPreset3 div:nth-child(1) {background-color: @colorPreset3_color1;}
+#theme_customize_modal .row .colorPreset3 div:nth-child(2) {background-color: @colorPreset3_color2;}
+#theme_customize_modal .row .colorPreset3 div:nth-child(3) {background-color: @white;}
+#theme_customize_modal .row .colorPreset3 div:nth-child(4) {background-color: @colorPreset3_color3;}
+#theme_customize_modal .row .colorPreset3 div:nth-child(5) {background-color: @colorPreset3_color4;}
+
+/* ======================= COLOR PRESET 4 ====================== */
+
+#theme_customize_modal .row .colorPreset4 div:nth-child(1) {background-color: @colorPreset4_color1;}
+#theme_customize_modal .row .colorPreset4 div:nth-child(2) {background-color: @colorPreset4_color2;}
+#theme_customize_modal .row .colorPreset4 div:nth-child(3) {background-color: @white;}
+#theme_customize_modal .row .colorPreset4 div:nth-child(4) {background-color: @colorPreset4_color3;}
+#theme_customize_modal .row .colorPreset4 div:nth-child(5) {background-color: @colorPreset4_color4;}
+
+/* ======================= COLOR PRESET 5 ====================== */
+
+#theme_customize_modal .row .colorPreset5 div:nth-child(1) {background-color: @colorPreset5_color1;}
+#theme_customize_modal .row .colorPreset5 div:nth-child(2) {background-color: @colorPreset5_color2;}
+#theme_customize_modal .row .colorPreset5 div:nth-child(3) {background-color: @white;}
+#theme_customize_modal .row .colorPreset5 div:nth-child(4) {background-color: @colorPreset5_color3;}
+#theme_customize_modal .row .colorPreset5 div:nth-child(5) {background-color: @colorPreset5_color4;}
+
+/* ======================= COLOR PRESET 6 ====================== */
+
+#theme_customize_modal .row .colorPreset6 div:nth-child(1) {background-color: @colorPreset6_color1;}
+#theme_customize_modal .row .colorPreset6 div:nth-child(2) {background-color: @colorPreset6_color2;}
+#theme_customize_modal .row .colorPreset6 div:nth-child(3) {background-color: @white;}
+#theme_customize_modal .row .colorPreset6 div:nth-child(4) {background-color: @colorPreset6_color3;}
+#theme_customize_modal .row .colorPreset6 div:nth-child(5) {background-color: @colorPreset6_color4;}
+
+/* ======================= BACKGROUNDS ====================== */
+
+#theme_customize_modal #bgcolor .bg_color_01 {background-color: @colorPreset1_color3;}
+#theme_customize_modal #bgcolor .bg_color_02 {background-color: @colorPreset2_color3;}
+#theme_customize_modal #bgcolor .bg_color_03 {background-color: @colorPreset3_color3;}
+#theme_customize_modal #bgcolor .bg_color_04 {background-color: black;}
+#theme_customize_modal #bgcolor .bg_color_05 {background-color: @colorPreset5_color3;}
+#theme_customize_modal #bgcolor .bg_color_06 {background-color: @colorPreset6_color3;}
+#theme_customize_modal #bgcolor .bg_color_07 {background-color: white;}
+#theme_customize_modal #bgcolor .bg_color_08 {background-color: @colorPreset3_color2;}
+
+/* ================== THEME CUSTOMIZE MODAL =============== */
+
+#theme_customize_modal {
+    label > div, label > img, label > h6, label > h4 {
+        border: none;
+        padding: 3px;
+    }
+    label.checked > div, label.checked > img, label.checked > h6, label.checked > h4 {
+        box-shadow: none;
+        background-color: @modalLightBlue;
+    }
+    h4 {
+        color: @white;
+        text-align: left;
+    }
+    h6 {
+        color: @white;
+    }
+    p {
+        color: @white;
+    }
+    .row {
+        .col-md-2 {
+            padding-right: 0px;
+        }
+    }
+}
+#theme_customize_modal {
+    .modal-header {
+        border-bottom: none;
+    }
+    .nav-tabs > li.active > a, &:hover, &:focus, .nav > li > a:hover, &:focus {
+        background-color: @gray-dark;
+        border: none;
+        color: @modalOrange;
+    }
+}
+.nav-tabs > li > a {
+    margin-right: 0px;
+    &:hover {
+        border-radius: 0px;
+        border: none;
+    }
+}
+.nav-tabs > li > a, .nav > li > a {
+    border-radius: 0px;
+    border: none;
+}
+.modal-dialog .nav > li > a {
+    padding: 15px 5px;
+}
+.modal-h6 {
+    font-size: 30px;
+}
+.interface {
+    width: 350px;
+    margin-top: 20px;
+    position: relative;
+    font-family: "Cuprum-Regular";
+
+    .left-content {
+        background-color: @modalGreen;
+        width: 70px;
+        padding-left: 0px;
+        .VAlignTop;
+        ul {
+            border: none;
+        }
+    }
+    .right-content {
+        .VAlignTop;
+        padding: 0px;
+        background-color: @gray-dark;
+        .tab-content {
+            overflow-x: hidden;
+            height: 480px;
+        }
+    }
+}
+.close {
+    padding: .2em .4em;
+    color: white;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    float: right;
+    font-weight: bold;
+    opacity: .9;
+    text-shadow: none;
+}
+.left-content-block a {
+    display: block;
+    min-height: 70px;
+    width: 70px;
+    text-decoration: none;
+    cursor: pointer;
+    color: white;
+    font-size: 12px;
+    &:hover, &:focus, &:active {
+        background-image: none;
+    }
+    span {
+        margin-bottom: 13px;
+    }
+}
+.left-content-block .glyphicon:hover, .glyphicon:focus {
+    color: @modalOrange;
+}
+.glyphicon {
+    font-size: 20px;
+    padding-bottom: 5px;
+    color: @white;
+}
+.color-combi {
+    .col-xs-2 {
+        width: 43px;
+        height: 43px;
+        padding: 0px;
+    }
+    .row {
+        border-color: @gray-light !important;
+    }
+}
+.tab-pane > .row > .col-xs-6 {
+    padding: 0px;
+}
+#bgcolor {
+    .col-xs-12 {
+        height: 50px;
+        margin-bottom: 15px;
+    }
+}
+#pattern {
+    .col-xs-12 {
+        .pattern-swatch{
+            width: 250px;
+            height: 100%;
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+}
+#color {
+    p:first-child {
+        margin-top: 15px;
+    }
+}
+
+/*oe manipulators*/
+
+#oe_manipulators {
+    .oe_snippet_remove {
+        background-color: red;
+        color: white;
+        &:hover {
+            color: black;
+        }
+    }
+    .dropdown-menu {
+        border-radius: 0px;
+    }
+}
+
+/* ================== MODAL ======================*/
+
+.modal:not(#theme_customize_modal) {
+    .modal-dialog {
+        border: 1px solid @gray-dark;
+        .modal-content {
+            border-radius: 0px;
+            border: none;
+            background-color: @color-gamma;
+        }
+        .btn-primary, .btn-default {
+            border: none;
+        }
+        .active a {
+            background: rgba(0, 0, 0, 0);
+            color: @color-delta;
+            text-decoration: underline;
+            &:hover {
+                border-width: 0px;
+                color: @color-delta;
+            }
+        }
+    }
+    .modal-body, .modal-footer {
+        background-color: @color-alpha;
+        border-top: 1px solid @gray-lighter;
+        color: @gray-light
+    }
+    .modal-footer {
+        color: white;
+        .btn-primary {
+            background-color: @gray-lighter;
+            color: @color-beta;
+        }
+    }
+    .modal-header {
+        height: 71px;
+        border: none;
+        h4 {
+            font-size: 20px;
+        }
+    }
+    .modal-body {
+        font-size: 14px;
+        thead {color: white;}
+        #editor-media-image {
+            background-color: rgba(0, 0, 0, 0) !important;
+        }
+        .well {
+            background-color: @gray-lighter;
+            color: @gray;
+            .BorderRadius(0px);
+            border: none;
+            .form-control {
+                border-radius: 0px;
+                background-color: @gray;
+                border: none;
+                box-shadow: none;
+                height: 35px;
+                &:focus {
+                    box-shadow: none;
+                    border: 1px solid @color-eta;
+                }
+            }
+            .btn-default {
+                border-radius: 0px;
+                border: none;
+                background-color: @gray;
+                color: @gray-lighter;
+                height: 35px;
+            }
+        }
+        .tab-content {
+            .existing-attachment-remove {
+                background: @gray;
+                border: 1px solid @gray-dark;
+            }
+        }
+        .nav-tabs > li.active > a, &:hover > li.active > a:focus {
+            border: none;
+        }
+        .nav-tabs {
+            border-bottom: 1px solid @gray-light;
+            background-color: @gray-lighter;
+            padding-left: 20px;
+            .font-icons:before {
+                z-index: 1;
+                font-size: 1.5em;
+                top: 12px;
+                left: 10px;
+            }
+            .pager {
+                transform: translateY(23%);
+                margin-right: 10px;
+                .previous a, .next a {
+                    background-color: @gray;
+                    color: @gray-lighter;
+                    border: none;
+                    height: 35px;
+                }
+            }
+            a {
+                color: @color-delta; //
+                &:hover {
+                    background: rgba(0, 0, 0, 0);
+                }
+            }
+        }
+
+        .search .form-control {
+            border-radius: 0px;
+            background-color: @gray;
+            border: none;
+            transform: translateY(23%);
+            box-shadow: none;
+            height: 35px;
+            &:focus {
+                box-shadow: none;
+                border: none;
+            }
+        }
+    }
+    .modal-title {
+        color: @color-alpha;
+    }
+    .nav-tabs > li {
+        margin-bottom: 0px;
+        &:hover {
+            background: rgba(0, 0, 0, 0);
+        }
+    }
+    .pager li > a {
+        .BorderRadius(0px);
+    }
+    .search .form-control {
+        border-color: @gray-lighter;
+    }
+}
+#theme_customize_modal {
+    background: rgba(0, 0, 0, 0) !important;
+}
+#editor-media-image {
+    background-color: white !important;
+}
+.oe_overlay_options {
+    .btn {
+        top: -20px;
+        &:hover {
+            border: none;
+        }
+    }
+}
+
+/* ====================== LOGIN =====================*/
+
+.oe_login_form {
+    .oe_login_buttons {
+        .btn-primary {
+            background: rgba(0, 0, 0, 0) !important;
+            &:hover {
+                color: @color-delta !important;
+            }
+        }
+        .btn-link {
+            color: @color-delta;
+        }
+    }
+}
+.oe_website_login_container {
+    padding: 50px;
+}
@@ -0,0 +1,82 @@
+@bg-img-01: url("/website/image/theme_common.image_content_11");
+@bg-img-02: url("/website/image/theme_common.image_content_09");
+@bg-img-03: url("/website/image/theme_common.image_content_10");
+@bg-img-04: url("/website/image/theme_common.image_content_12");
+@bg-img-05: url("/website/image/theme_common.image_content_02");
+@bg-img-06: url("/website/image/theme_common.image_content_03");
+@bg-img-07: url("/website/image/theme_common.image_content_07");
+
+.bg-img-01 {
+    background-image: @bg-img-01;
+    background-size: cover;
+    background-position: center center;
+}
+.bg-img-02 {
+    background-image: @bg-img-02;
+    background-size: cover;
+    background-position: center center;
+}
+.bg-img-03 {
+    background-image: @bg-img-03;
+    background-size: cover;
+    background-position: center center;
+}
+.bg-img-04 {
+    background-image: @bg-img-04;
+    background-size: cover;
+    background-position: center center;
+}
+.bg-img-05 {
+    background-image: @bg-img-05;
+    background-size: cover;
+    background-position: center center;
+}
+.bg-img-06 {
+    background-image: @bg-img-06;
+    background-size: cover;
+    background-position: center center;
+}
+.bg-img-07 {
+    background-image: @bg-img-07;
+    background-size: cover;
+    background-position: center center;
+}
+.px14 {
+    font-size: 14px !important;
+    line-height: 25px;
+}
+.px16 {
+    font-size: 16px !important;
+    line-height: 28px;
+}
+.px18 {
+    font-size: 18px !important;
+    line-height: 30px;
+}
+.px22 {
+    font-size: 22px !important;
+    line-height: 32px;
+}
+.px30 {
+    font-size: 30px !important;
+    line-height: 30px;
+}
+.px36 {
+    font-size: 36px !important;
+    line-height: 36px;
+}
+.px42 {
+    font-size: 42px !important;
+    line-height: 42px;
+}
+.px50 {
+    font-size: 50px !important;
+    line-height: 50px;
+}
+.px60 {
+    font-size: 60px !important;
+    line-height: 60px;
+}
+.reversed {
+    float: right;
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: @colorPreset1_color3;
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: @colorPreset2_color3;
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: @colorPreset3_color3;
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: black;
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: @colorPreset5_color3;
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: @colorPreset6_color3;
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: white;
+}
@@ -0,0 +1,3 @@
+body {
+    background-color: @colorPreset3_color2;
+}
@@ -0,0 +1,4 @@
+body {
+    background: url("/website/image/theme_anelusia.bg_img_01") no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,4 @@
+body {
+    background: url("/website/image/theme_anelusia.bg_img_02") no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,4 @@
+body {
+    background: url("/website/image/theme_anelusia.bg_img_03") no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,4 @@
+body {
+    background: url("/website/image/theme_anelusia.bg_img_04") no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,4 @@
+body {
+    background: url("/website/image/theme_anelusia.bg_img_05") no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,4 @@
+body {
+    background: url("/website/image/theme_anelusia.bg_img_06") no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,4 @@
+body {
+    background: url("/website/image/theme_anelusia.bg_img_07") no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,4 @@
+body {
+    background: url("/website/image/theme_anelusia.bg_img_08") no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,4 @@
+body {
+    background: url("/website/image/theme_anelusia.bg_img_09") no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,4 @@
+body {
+    background: url("/website/image/theme_anelusia.bg_img_10") no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,4 @@
+body {
+    background: no-repeat center center fixed;
+    background-size: cover;
+}
@@ -0,0 +1,3 @@
+body {
+    background-image: none;
+}
@@ -0,0 +1,121 @@
+@color-alpha: @white;
+@color-beta: @colorPreset1_color1; // light gray
+@color-gamma: @colorPreset1_color2; // gray
+@color-delta: @colorPreset1_color3; // dark gray
+@color-epsilon: @colorPreset1_color4; // salmon
+@color-zeta: @colorPreset1_color1_dark;
+@color-eta: @colorPreset1_color1_light;
+@color-theta: @colorPreset1_color2_dark;
+@color-iota: @colorPreset1_color2_light;
+@color-kappa: @colorPreset1_color3_dark;
+@color-lambda: @colorPreset1_color3_light;
+@color-mu: @colorPreset1_color4_dark;
+@color-nu: @colorPreset1_color4_light;
+
+/* ================== COLORS FOR FONT COLOR ================= */
+
+.text-alpha {color: @white;}
+.text-beta {color: @colorPreset1_color1;}
+.text-gamma {color: @colorPreset1_color2;}
+.text-delta {color: @colorPreset1_color3;}
+.text-epsilon {color: @colorPreset1_color4;}
+
+/* ================== BG COLORS ================= */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-epsilon, @color-mu);
+    .fa {color: @gray;}
+}
+.bg-beta {
+    .SetDisplayColor (@color-beta, @gray);
+    .LinkColor (@color-epsilon, @color-mu);
+}
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@gray-dark, @color-nu);
+}
+.bg-delta {
+    .SetDisplayColor (@color-delta, @color-alpha);
+    .LinkColor (@color-epsilon, @color-mu);
+}
+.bg-epsilon {
+    .SetDisplayColor (@color-epsilon, @color-alpha);
+    .LinkColor (@color-delta, @black);
+}
+
+a {
+    color: @color-epsilon;
+    &:hover, &:focus {
+        color: @color-mu;
+    }
+}
+
+/* ==================== BUTTON ====================== */
+
+.btn-default {
+    .btn-styles(@color-alpha, @color-alpha, @color-epsilon, @color-delta);
+}
+.btn-primary {
+    .btn-styles(@color-beta, @color-zeta, @color-delta, @color-kappa);
+}
+.btn-success {
+    .btn-styles(@color-epsilon, @color-mu, @color-alpha, @color-alpha);
+}
+.btn-info {
+    .btn-styles(@color-gamma, @color-theta, @color-alpha, @color-beta);
+}
+.btn-warning {
+    .btn-styles(@color-delta, @color-kappa, @color-alpha, @color-beta);
+}
+.btn-danger {
+    .btn-styles(@black, @color-kappa, @color-alpha, @color-beta);
+}
+
+/* ==================== STRUCTURE ====================== */
+
+#top_menu {
+    li a, .label-primary {
+        color: @color-beta;
+    }
+}
+.modal {
+    .btn-primary {
+        color: gray !important;
+    }
+    .pager li {
+        color: @color-alpha !important; // 
+    }
+}
+#wrap {
+    .search {
+        background-color: @color-delta;
+    }
+}
+#wrapwrap > footer {
+    .container {
+        p, .list-unstyled {
+            color: white;
+            font-size: 14px;
+        }
+        h4 {
+            color: @color-beta;
+            border-left-color: @color-gamma;
+        }
+        a {
+            &:hover {
+                color: color-beta;
+            }
+        }
+    }
+    #footer {
+        background-color: @color-delta;
+    }
+}
+.copyright {
+    background-color: @color-delta;
+    color: white;
+    hr {
+        border-top-color: @color-gamma;
+    }
+}
@@ -0,0 +1,141 @@
+@color-alpha: @white;
+@color-beta: @colorPreset2_color1;  // light rose
+@color-gamma: @colorPreset2_color2; // rose
+@color-delta: @colorPreset2_color3; // mallow
+@color-epsilon: @colorPreset2_color4; // purple
+@color-zeta: @colorPreset2_color1_dark;
+@color-eta: @colorPreset2_color1_light;
+@color-theta: @colorPreset2_color2_dark;
+@color-iota: @colorPreset2_color2_light;
+@color-kappa: @colorPreset2_color3_dark;
+@color-lambda: @colorPreset2_color3_light;
+@color-mu: @colorPreset2_color4_dark;
+@color-nu: @colorPreset2_color4_light;
+
+/* ================== COLORS FOR FONT COLOR ================= */
+
+.text-alpha {color: @white;}
+.text-beta {color: @colorPreset2_color1;}
+.text-gamma {color: @colorPreset2_color2;}
+.text-delta {color: @colorPreset2_color3;}
+.text-epsilon {color: @colorPreset2_color4;}
+
+/* ================== BG COLORS ================= */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-epsilon, @color-mu);
+    .fa {color: @gray;}
+}
+.bg-beta {
+    .SetDisplayColor (@color-beta, @gray);
+    .LinkColor (@color-epsilon, @color-nu);
+}
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@gray, @color-nu);
+}
+.bg-delta {
+    .SetDisplayColor (@color-delta, @color-alpha);
+    .LinkColor (@color-epsilon, @color-mu);
+}
+.bg-epsilon {
+    .SetDisplayColor (@color-epsilon, @color-alpha);
+    .LinkColor (#f2f76c, #e9f109);
+}
+
+/* ==================== TYPO ====================== */
+a {
+    color: @color-epsilon;
+    &:hover, &:focus {
+        color: @color-gamma;
+    }
+}
+
+/* ==================== BUTTON ====================== */
+
+.btn-default {
+    .btn-styles(@color-alpha, @color-alpha, @color-epsilon, @color-delta);
+}
+.btn-primary {
+    .btn-styles(@color-beta, @color-zeta, @color-delta, @color-kappa);
+}
+.btn-success {
+    .btn-styles(@color-epsilon, @color-mu, @color-alpha, @color-alpha);
+}
+.btn-info {
+    .btn-styles(@color-gamma, @color-theta, @color-alpha, @color-beta);
+}
+.btn-warning {
+    .btn-styles(@color-delta, @color-kappa, @color-alpha, @color-beta);
+}
+.btn-danger {
+    .btn-styles(@black, @color-kappa, @color-alpha, @color-beta);
+}
+
+/* ==================== STRUCTURE ====================== */
+
+.modal {
+    .btn-primary {
+        color: gray !important;
+    }
+}
+#top_menu {
+    li a, .label-primary {
+        color: @color-alpha;
+    }
+}
+#wrapwrap > footer {
+    .container {
+        p, .list-unstyled {
+            color: white;
+            font-size: 14px;
+        }
+        h4 {
+            color: white;
+            border-left-color: @color-epsilon;
+        }
+    }
+    #footer {
+        background-color: @color-delta;
+    }
+}
+.copyright {
+    background-color: @color-delta;
+    color: white;
+    hr {
+        border-top-color: @color-kappa;
+    }
+}
+#products_grid_before {
+    ul.nav-stacked {
+        li {
+            a {
+                color: @color-epsilon;
+                &:hover, &:focus {
+                    background-color: @color-kappa;
+                    color: white;
+                }
+            }
+        }
+    }
+    .nav-pills > li.active > a {
+        color: @color-epsilon;
+        &:hover {
+            background-color: @black;
+        }
+    }
+    .js_attributes {
+        strong {
+            color: white;
+        }
+    }
+}
+#wrap {
+    .search {
+        background-color: @color-delta;
+    }
+}
+.open-icon, .close-icon {
+    color: @color-epsilon;
+}
@@ -0,0 +1,122 @@
+@color-alpha: @white;
+@color-beta: @colorPreset3_color1; // gray
+@color-gamma: @colorPreset3_color2; // middle blue
+@color-delta: @colorPreset3_color3; // salmon
+@color-epsilon: @colorPreset3_color4; // vivid blue
+@color-zeta: @colorPreset3_color1_dark;
+@color-eta: @colorPreset3_color1_light;
+@color-theta: @colorPreset3_color2_dark;
+@color-iota: @colorPreset3_color2_light;
+@color-kappa: @colorPreset3_color3_dark;
+@color-lambda: @colorPreset3_color3_light;
+@color-mu: @colorPreset3_color4_dark;
+@color-nu: @colorPreset3_color4_light;
+
+/* ================== COLORS FOR FONT COLOR ================= */
+
+.text-alpha {color: @white;}
+.text-beta {color: @colorPreset3_color1;}
+.text-gamma {color: @colorPreset3_color2;}
+.text-delta {color: @colorPreset3_color3;}
+.text-epsilon {color: @colorPreset3_color4;}
+
+/* ================== BF COLORS ================= */
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-epsilon, @color-mu);
+    .fa {color: @gray;}
+}
+.bg-beta {
+    .SetDisplayColor (@color-beta, @gray);
+    .LinkColor (@color-epsilon, @color-mu);
+}
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @gray);
+    .LinkColor (@color-mu, @color-epsilon);
+}
+.bg-delta {
+    .SetDisplayColor (@color-delta, @color-alpha);
+    .LinkColor (@color-epsilon, @color-mu);
+}
+.bg-epsilon {
+    .SetDisplayColor (@color-epsilon, @gray-dark);
+    .LinkColor (@color-alpha, @gray-darker);
+}
+/* ==================== TYPO ====================== */
+a {
+    color: @color-epsilon;
+    &:hover, &:focus {
+        color: @gray;
+    }
+}
+/* ==================== BUTTON ====================== */
+
+.btn-default {
+    .btn-styles(@color-alpha, @color-alpha, @color-epsilon, @color-delta);
+}
+.btn-primary {
+    .btn-styles(@color-beta, @color-zeta, @color-delta, @color-kappa);
+}
+.btn-success {
+    .btn-styles(@color-epsilon, @color-mu, @color-alpha, @color-alpha);
+}
+.btn-info {
+    .btn-styles(@color-gamma, @color-theta, @gray, @gray);
+}
+.btn-warning {
+    .btn-styles(@color-delta, @color-kappa, @color-alpha, @color-beta);
+}
+.btn-danger {
+    .btn-styles(@black, @color-kappa, @color-alpha, @color-beta);
+}
+
+/* ==================== Structure ====================== */
+
+.modal {
+    .btn-primary {
+        color: gray !important;
+    }
+}
+#products_grid_before {
+    background-color: @color-gamma;
+    ul.nav-stacked {
+        li {
+            a {
+                color: @color-epsilon;
+                &:hover, &:focus {
+                    background-color: @color-beta;
+                    color: @color-epsilon;
+                }
+            }
+        }
+    }
+    .nav-pills > li.active > a {
+        color: @color-epsilon;
+        &:hover {
+            background-color: @color-beta;
+            color: @color-epsilon;
+        }
+    }
+    .category-name {
+        color: @color-epsilon;
+        border-bottom-color: @color-theta;
+    }
+    .js_attributes {
+        strong {
+            color: @gray;
+        }
+    }
+}
+.js_sale {
+    .container:first-child, .col-md-12:first-child {
+        background-color: @color-gamma;
+    }
+}
+#wrap {
+    .search {
+        background-color: @color-gamma;
+    }
+}
+.open-icon, .close-icon {
+    color: @color-epsilon;
+}
@@ -0,0 +1,139 @@
+@color-alpha: @white;
+@color-beta: @colorPreset4_color1; // light green
+@color-gamma: @colorPreset4_color2; // middle green
+@color-delta: @colorPreset4_color3; // dark blue  
+@color-epsilon: @colorPreset4_color4; // orange
+@color-zeta: @colorPreset4_color1_dark;
+@color-eta: @colorPreset4_color1_light;
+@color-theta: @colorPreset4_color2_dark;
+@color-iota: @colorPreset4_color2_light;
+@color-kappa: @colorPreset4_color3_dark;
+@color-lambda: @colorPreset4_color3_light;
+@color-mu: @colorPreset4_color4_dark;
+@color-nu: @colorPreset4_color4_light;
+
+/* ================== COLORS FOR FONT COLOR ================= */
+
+.text-alpha {color: @white;}
+.text-beta {color: @colorPreset4_color1;}
+.text-gamma {color: @colorPreset4_color2;}
+.text-delta {color: @colorPreset4_color3;}
+.text-epsilon {color: @colorPreset4_color4;}
+
+/* ================== BG COLOR ================= */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-epsilon, @color-mu);
+    .fa {color: @gray;}
+}
+.bg-beta {
+    .SetDisplayColor (@color-beta, @gray);
+    .LinkColor (@color-delta, @color-kappa);
+}
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@color-epsilon, @color-delta);
+}
+.bg-delta {
+    .SetDisplayColor (@color-delta, @color-alpha);
+    .LinkColor (@color-epsilon, @color-mu);
+}
+.bg-epsilon {
+    .SetDisplayColor (@color-epsilon, @color-alpha);
+    .LinkColor (@gray, @gray-darker);
+}
+
+/* ==================== TYPO ====================== */
+a {
+    color: @color-epsilon;
+    &:hover, &:focus {
+        color: @color-zeta;
+    }
+}
+
+/* ==================== BUTTON ====================== */
+
+.btn-default {
+    .btn-styles(@color-alpha, @color-alpha, @color-epsilon, @color-mu);
+}
+.btn-primary {
+    .btn-styles(@color-beta, @color-zeta, @color-alpha, @color-alpha);
+}
+.btn-success {
+    .btn-styles(@color-epsilon, @color-mu, @color-alpha, @color-alpha);
+}
+.btn-info {
+    .btn-styles(@color-gamma, @color-theta, @color-alpha, @color-alpha);
+}
+.btn-warning {
+    .btn-styles(@color-delta, @color-kappa, @color-alpha, @color-beta);
+}
+.btn-danger {
+    .btn-styles(@black, @color-kappa, @color-alpha, @color-alpha);
+}
+
+/* ==================== Structure ====================== */
+
+#wrapwrap > footer {
+    .container {
+        p, .list-unstyled {
+            color: white;
+            font-size: 14px;
+        }
+        h4 {
+            color: @color-beta;
+            border-left-color: @color-gamma;
+        }
+    }
+    #footer {
+        background-color: @color-delta;
+    }
+}
+.copyright {
+    background-color: @color-delta;
+    color: white;
+    hr {
+        border-top-color: @color-gamma;
+    }
+}
+.color-navbar-header {
+    background: @color-delta;
+}
+.navbar-default .container .navbar-collapse {
+    background-color: @color-delta;
+}
+#top_menu li a {
+    color: @color-beta;
+}
+.modal {
+    .btn-primary {
+        color: gray !important;
+    }
+}
+#products_grid_before {
+    .js_attributes strong {
+        color: gray;
+    }
+    ul.nav-stacked {
+        li {
+            a {
+                color: @color-epsilon;
+            }
+        }
+    }
+    .nav-pills > li.active > a {
+        color: @color-epsilon;
+        &:hover {
+            background-color: @gray-dark;
+        }
+    }
+    .open-icon, .close-icon {
+        color: @color-epsilon;
+    }
+}
+#wrap {
+    .search {
+        background-color: black;
+    }
+}
@@ -0,0 +1,118 @@
+@color-alpha: @white;
+@color-beta: @colorPreset5_color1; // dark gray
+@color-gamma: @colorPreset5_color2; // orange
+@color-delta: @colorPreset5_color3; // beige
+@color-epsilon: @colorPreset5_color4; // light beige
+@color-zeta: @colorPreset5_color1_dark;
+@color-eta: @colorPreset5_color1_light;
+@color-theta: @colorPreset5_color2_dark;
+@color-iota: @colorPreset5_color2_light;
+@color-kappa: @colorPreset5_color3_dark;
+@color-lambda: @colorPreset5_color3_light;
+@color-mu: @colorPreset5_color4_dark;
+@color-nu: @colorPreset5_color4_light;
+
+/* ================== COLORS FOR FONT COLOR ================= */
+
+.text-alpha {color: @white;}
+.text-beta {color: @colorPreset5_color1;}
+.text-gamma {color: @colorPreset5_color2;}
+.text-delta {color: @colorPreset5_color3;}
+.text-epsilon {color: @colorPreset5_color4;}
+
+/* ================== BG COLORS ================= */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-gamma, @color-iota);
+    .fa {color: @gray;}
+}
+.bg-beta {
+    .SetDisplayColor (@color-beta, @color-alpha);
+    .LinkColor (@color-gamma, @color-theta);
+}
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@gray, @gray-dark);
+}
+.bg-delta {
+    .SetDisplayColor (@color-delta, @color-alpha);
+    .LinkColor (@color-beta, @color-zeta);
+}
+.bg-epsilon {
+    .SetDisplayColor (@color-epsilon, @color-alpha);
+    .LinkColor (@color-gamma, @color-theta);
+}
+
+/* ==================== TYPO ====================== */
+a {
+    color: @color-gamma;
+    &:hover, &:focus {
+        color: @color-iota;
+    }
+}
+
+/* ==================== BUTTON ====================== */
+
+.btn-default {
+    .btn-styles(@color-alpha, @color-alpha, @color-epsilon, @color-delta);
+}
+.btn-primary {
+    .btn-styles(@color-beta, @color-zeta, @color-alpha, @color-alpha);
+}
+.btn-success {
+    .btn-styles(@color-epsilon, @color-mu, @color-alpha, @color-alpha);
+}
+.btn-info {
+    .btn-styles(@color-gamma, @color-theta, @color-alpha, @color-alpha);
+}
+.btn-warning {
+    .btn-styles(@color-delta, @color-kappa, @color-alpha, @color-alpha);
+}
+.btn-danger {
+    .btn-styles(@black, @color-kappa, @color-alpha, @color-alpha);
+}
+
+/* ==================== STRUCTURE ====================== */
+
+.color-navbar-header {
+    background: @color-delta;
+}
+.navbar-default .container .navbar-collapse {
+    background-color: @color-delta;
+}
+#top_menu li a {
+    color: @color-alpha;
+}
+#products_grid_before {
+    background-color: white;
+    ul.nav-stacked {
+        li {
+            a {
+                color: @color-epsilon;
+                &:hover, &:focus {
+                    background-color: @color-beta;
+                    color: white;
+                }
+            }
+        }
+    }
+    .nav-pills > li.active > a {
+        color: @color-epsilon;
+        &:hover {
+            background-color: @color-beta;
+        }
+    }
+    .category-name {
+        color: @color-beta;
+        border-bottom-color: rgba(0, 0, 0, 0);
+    }
+}
+.open-icon, .close-icon {
+    color: @color-epsilon;
+}
+#wrap {
+    .search {
+        background-color: @color-delta;
+    }
+}
@@ -0,0 +1,147 @@
+@color-alpha: @white;
+@color-beta: @colorPreset6_color1; //yellow
+@color-gamma: @colorPreset6_color2; // cyan
+@color-delta: @colorPreset6_color3; // gray
+@color-epsilon: @colorPreset6_color4; // magenta
+@color-zeta: @colorPreset6_color1_dark;
+@color-eta: @colorPreset6_color1_light;
+@color-theta: @colorPreset6_color2_dark;
+@color-iota: @colorPreset6_color2_light;
+@color-kappa: @colorPreset6_color3_dark;
+@color-lambda: @colorPreset6_color3_light;
+@color-mu: @colorPreset6_color4_dark;
+@color-nu: @colorPreset6_color4_light;
+
+/* ================== COLORS FOR FONT COLOR ================= */
+
+.text-alpha {color: @white;}
+.text-beta {color: @colorPreset6_color1;}
+.text-gamma {color: @colorPreset6_color2;}
+.text-delta {color: @colorPreset6_color3;}
+.text-epsilon {color: @colorPreset6_color4;}
+
+/* ================== BG COLORS ================= */
+
+.bg-alpha {
+    .SetDisplayColor (@color-alpha, @gray);
+    .LinkColor (@color-epsilon, @color-mu);
+    .fa {color: @gray;}
+}
+.bg-beta {
+    .SetDisplayColor (@color-beta, @gray-dark);
+    .LinkColor (@color-epsilon, @color-mu);
+}
+.bg-gamma {
+    .SetDisplayColor (@color-gamma, @color-alpha);
+    .LinkColor (@color-epsilon, @color-mu);
+}
+.bg-delta {
+    .SetDisplayColor (@color-delta, @color-alpha);
+    .LinkColor (@color-epsilon, @color-mu);
+}
+.bg-epsilon {
+    .SetDisplayColor (@color-epsilon, @color-alpha);
+    .LinkColor (@color-beta, @color-zeta);
+}
+
+/* ==================== TYPO ====================== */
+a {
+    color: @color-epsilon;
+    &:hover, &:focus {
+        color: @color-mu;
+    }
+}
+
+/* ==================== BUTTON ====================== */
+
+.btn-default {
+    .btn-styles(@color-alpha, @color-alpha, @color-epsilon, @color-delta);
+}
+.btn-primary {
+    .btn-styles(@color-beta, @color-zeta, @color-delta, @color-kappa);
+}
+.btn-success {
+    .btn-styles(@color-epsilon, @color-mu, @color-alpha, @color-alpha);
+}
+.btn-info {
+    .btn-styles(@color-gamma, @color-theta, @color-alpha, @color-alpha);
+}
+.btn-warning {
+    .btn-styles(@color-delta, @color-kappa, @color-alpha, @color-beta);
+}
+.btn-danger {
+    .btn-styles(@black, @color-kappa, @color-alpha, @color-epsilon);
+}
+
+/* ==================== SCTRUCTURE ====================== */
+
+#top_menu {
+    li a, .label-primary {
+        color: white;
+    }
+}
+#wrapwrap > footer {
+    .container {
+        p, .list-unstyled {
+            color: @color-beta;
+            font-size: 14px;
+        }
+        h4 {
+            color: @color-beta;
+            border-left-color: @color-beta;
+        }
+    }
+    #footer {
+        background-color: @color-delta;
+    }
+}
+.copyright {
+    background-color: @color-delta;
+    color:  @color-beta;
+    hr {
+        border-top-color: @color-lambda;
+    }
+}
+.color-navbar-header {
+    background: @color-gamma;
+}
+.navbar-default .container .navbar-collapse {
+    background-color: @color-gamma;
+}
+.modal {
+    .btn-primary {
+        color: gray !important;
+    }
+}
+#products_grid_before {
+    ul.nav-stacked {
+        li {
+            a {
+                color: @color-epsilon;
+                &:hover, &:focus {
+                    background-color: @color-kappa;
+                    color: white;
+                }
+            }
+        }
+    }
+    .nav-pills > li.active > a {
+        color: @color-epsilon;
+        &:hover {
+            background-color: @color-kappa;
+        }
+    }
+    .js_attributes {
+        strong {
+            color: white;
+        }
+    }
+}
+.open-icon, .close-icon {
+    color: @color-epsilon;
+}
+#wrap {
+    .search {
+        background-color: @color-delta;
+    }
+}
@@ -0,0 +1,28 @@
+body {
+    font-size: 14px;
+}
+#wrapwrap {
+    font-family: "Forum";
+    font-size: 16px;
+    line-height: 1.6em;
+    h1, h2, h3, h4, h5, h6 {
+        font-family: "Forum";
+    }
+    #top_menu > li > a {
+        font-family: "Forum";
+    }
+    .category-name {
+        font-family: "Forum";
+        font-size: 22px;
+    }
+    .products_pager {
+        font-size: 16px;
+    }
+}
+#wrapwrap > footer {
+    .container {
+        p, .list-unstyled {
+            font-size: 16px;
+        }
+    }
+}
@@ -0,0 +1,43 @@
+#wrapwrap {
+    font-family: "Helvetica";
+    line-height: 25px;
+
+    .hero-bg h1 {
+        font-size: 60px;
+        font-family: "Helvetica-Light";
+        @media (max-width: @screen-sm-min) {
+            font-size: 45px;
+        };
+    }
+    .hero-bg h2 {
+        font-size: 30px;
+        font-family: "Helvetica-Light";
+        @media (max-width: @screen-sm-min) {
+            font-size: 40px;
+        };
+    }
+    h1, h2, h3 h4, h5, h6 {
+        font-family: "Helvetica-Bold";
+    }
+    h4, h5, h6 {
+        font-family: "Helvetica";
+    }
+    #top_menu  li {
+        a {
+            font-family: "Helvetica-Light";
+        }
+    }
+    .category-name {
+        font-family: "Helvetica-Light";
+    }
+    #products_grid_before {
+        > ul > li > a {
+            font-family: "Helvetica";
+            font-size: 14px !important;
+        }
+        a {
+            font-family: "Helvetica";
+            font-size: 12px !important;
+        }
+    }
+}
@@ -0,0 +1,36 @@
+body {
+    font-size: 18px;
+}
+#wrapwrap {
+    font-family: "Buda";
+    font-size: 18px;
+    h1, h2, h3, h4, h5, h6 {
+        font-family: "Buda";
+    }
+    #top_menu > li > a {
+        font-family: "Buda";
+    }
+    .category-name {
+        font-family: 'Buda';
+        font-size: 22px;
+        text-transform: uppercase;
+        font-weight: bold;
+    }
+    .products_pager {
+        font-size: 16px;
+    }
+}
+.oe_product {
+    section {
+        h5 strong a {
+            font-size: 18px;
+        }
+    }
+}
+#wrapwrap > footer {
+    .container {
+        p, .list-unstyled {
+            font-size: 16px;
+        }
+    }
+}
@@ -0,0 +1,22 @@
+body {
+    font-size: 16px;
+}
+#wrapwrap {
+    font-family: "PTSerif-Regular";
+    h1, h2, h3, h4, h5, h6 {
+        font-family: "PTSerif-Bold";
+    }
+    #top_menu > li > a {
+        font-family: "PTSerif-Regular";
+    }
+    .category-name {
+        font-family: "PTSerif-Regular";
+        font-size: 20px;
+    }
+    .products_pager {
+        font-size: 13px;
+    }
+    > footer .container p, .list-unstyled, a {
+        font-size: 16px;
+    }
+}
@@ -0,0 +1,25 @@
+body {
+    font-size: 18px;
+}
+#wrapwrap {
+    font-family: "Rajdhani-Regular";
+    font-size: 16px;
+    h1, h2, h3, h4, h5, h6 {
+        font-family: "Rajdhani-Bold";
+        font-weight: bold;
+    }
+    #top_menu > li > a {
+        font-family: "Rajdhani-Light";
+        font-weight: bold;
+        @media (max-width:@screen-sm-min) {
+            font-size: 40px;
+        }
+    }
+    .category-name {
+        font-family: "Rajdhani-Bold";
+        font-size: 3vw;
+    }
+    .products_pager {
+        font-size: 15px;
+    }
+}
@@ -0,0 +1,22 @@
+body {
+    font-size: 14px;
+}
+#wrapwrap {
+    font-family: 'SourceSansPro-Regular';
+    font-size: 16px;
+    h1, h2, h3, h4, h5, h6 {
+        font-family: "SourceSansPro-Bold";
+    }
+    #top_menu > li > a {
+        font-family: "SourceSansPro-Regular";
+    }
+    .category-name {
+        font-family: "SourceSansPro-Black";
+        font-size: 3vw;
+    }
+    .cube {
+        p {
+            font-size: 16px;
+        }
+    }
+}
@@ -0,0 +1,24 @@
+#wrapwrap {
+    #wrap {
+        max-width: 992px;
+        margin: 0 auto;
+        @media (max-width: @screen-sm-min) {
+            width: 100%;
+        }
+    }
+    .navbar > .container {
+        width: 100%;
+    }
+}
+@media (max-width: @screen-lg-min) {
+    .container {
+        width: 100%;
+    }
+}
+.navbar-default {
+    width: 100%;
+    margin: 0 auto;
+}
+.copyright {
+    margin-bottom: 80px;
+}
@@ -0,0 +1,15 @@
+#wrapwrap {
+    #wrap {
+        width: 100%;
+        margin:  auto;
+    }
+    .navbar > .container {
+        width: 100%;
+    }
+}
+#footer {
+    width: 100%;
+}
+.copyright {
+    width: 100%;
+}
--- a/Show More
+++ b/Show More