Merge branch 'master' into pageattributes

Adjusted some more files to account for changes in the over 100 commits in master since the creation of this branch. SPR-869
2017-04-11 16:13:02 +02:00 · 2017-04-11 16:13:02 +02:00 · 3f9d4d521a
commit 3f9d4d521a
parent 80573eb884 26a5535e70
85 changed files with 4159 additions and 1907 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,5 +1,15 @@
 sprintdoc-farm:
  environment: sprintdoc-farm
+  tags:
+    - locally
+  only:
+    - live
+  script:
+    - fab deploy
+    
+
+cosmocode-farm:
+  environment: cosmocode-farm
  tags:
    - locally
  only:
--- a/Template.php
+++ b/Template.php
@ -17,6 +17,7 @@ class Template {
    protected $plugins = array(
        'sqlite' => null,
        'tagging' => null,
+        'magicmatcher' => null,
    );

    /**
@ -35,6 +36,36 @@ class Template {
     */
    protected function __construct() {
        $this->initializePlugins();
+
+        /** @var \Doku_Event_Handler */
+        global $EVENT_HANDLER;
+        $EVENT_HANDLER->register_hook('PLUGIN_TPLINC_LOCATIONS_SET', 'BEFORE', $this, 'registerIncludes');
+    }
+
+    /**
+     * Makes include position info available to the tplinc plugin
+     *
+     * @param \Doku_Event $event
+     */
+    public function registerIncludes(\Doku_Event $event) {
+        $event->data['footer'] = 'Footer below the page content';
+    }
+
+    /**
+     * Get the content to include from the tplinc plugin
+     *
+     * prefix and postfix are only added when there actually is any content
+     *
+     * @param string $location
+     * @param string $pre prepend this before the content
+     * @param string $post append this to the content
+     * @return string
+     */
+    public function getInclude($location, $pre = '', $post = '') {
+        if(!$this->plugins['tplinc']) return '';
+        $content = $this->plugins['tplinc']->renderIncludes($location);
+        if($content === '') return '';
+        return $pre . $content . $post;
    }

    /**
@ -44,7 +75,9 @@ class Template {
        $this->plugins['sqlite'] = plugin_load('helper', 'sqlite');
        if($this->plugins['sqlite']) {
            $this->plugins['tagging'] = plugin_load('helper', 'tagging');
+            $this->plugins['magicmatcher'] = plugin_load('syntax', 'magicmatcher_issuelist');
        }
+        $this->plugins['tplinc'] = plugin_load('helper', 'tplinc');
    }

    /**
@ -75,7 +108,14 @@ class Template {
            );
        }

-        // fixme add magicmatcher info
+        if ($this->plugins['magicmatcher']) {
+            $tabs[] = array(
+                'id' => 'spr__tab-issues',
+                'label' => tpl_getLang('tab_issues'),
+                'tab' => $this->plugins['magicmatcher']->getIssueListHTML(),
+                'count' =>  $this->plugins['magicmatcher']->getCountIssues(),
+            );
+        }

        return $tabs;
    }
--- a/css/area_content.less
+++ b/css/area_content.less
@ -21,8 +21,8 @@
                height: @page-header_height;
                box-sizing: border-box;
                width: 100%;
-                background-color: @background_page-header;
-                border-bottom: 1px solid @color-border-light;
+                background-color: @ini_background_page_header;
+                border-bottom: 1px solid @ini_border_light;
            }

            #plugin__highlightparent {
@ -33,28 +33,6 @@
 }


-
-.structaggregation {
-    td,
-    th {
-        line-height: @line-height-default;
-
-        a {
-
-            line-height: @line-height-default;
-        }
-    }
-
-    > a.export {
-        line-height: 135%;
-        padding-top: .5em;
-    }
-}
-
-.dokuwiki .structaggregation a.export {
-    padding-top: .3em;
-}
-
 .main-content > .level2,
 .main-content > .level1,
 .main-content > .level3,
--- a/css/area_footer.less
+++ b/css/area_footer.less
@ -11,48 +11,69 @@
@media screen {
    .page-footer {
        min-height: @page-header_height;
-        background-color: @background_page-header;
-        border-top: 1px solid @color-border-light;
+        background-color: @ini_background_page_header;
+        border-top: 1px solid @ini_border_light;
+        border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
+        color: @ini_background_page_footer;
        font-size: @font-size-default;
        text-align: right;
        padding: @margin-small @margin-default;
+
+        *,
+        a:link,
+        a:visited {
+            color: inherit;
+        }
+
        bdi {
            font-weight: bold;
        }
    }
+
    #dokuwiki__footer {
        .main-footer {
            position: relative;
            z-index: 2;
            box-sizing: border-box;
-            background-color: @color-site-bg;
-
+            background-color: @ini_background;
        }
+
        p {
+            color: @ini_text_webframe;
            font-size: @font-size-default;
            margin: 0;
        }
+
+        a {
+            color: @ini_nav_menu_color;
+        }
    }
 }
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1024px */
+
@media @screen_min-md {
    #dokuwiki__footer {
        .col-xs-12 {
            float: right;
            width: 100%;
        }
+
        .main-footer {
            padding: @margin-default 0;
        }
    }
+
    .showSidebar {
        #dokuwiki__footer {
            .col-xs-12 {
-                width: 73%;
+                width: @ini_site_width;
            }
        }
    }
+
    .wide-content {
        &.showSidebar {
            #dokuwiki__footer {
@ -63,8 +84,11 @@
        }
    }
 }
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1023px */
+
@media @screen_max-md {
    #dokuwiki__footer {
        .main-footer {
@ -73,3 +97,38 @@
        }
    }
 }
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 768px */
+
+@media @screen_max-xs {
+    .page-footer {
+        padding-left: @margin-small;
+        padding-right: @margin-small;
+    }
+
+    #dokuwiki__footer {
+        .main-footer {
+            > * {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+    }
+}
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 480px */
+
+@media @screen_max-xxs {
+    #dokuwiki__footer {
+        .main-footer {
+            > * {
+                padding-left: @margin-small;
+                padding-right: @margin-small;
+            }
+        }
+    }
+}
--- a/css/area_forms.less
+++ b/css/area_forms.less
@ -0,0 +1,336 @@
+/**
+ * This file provides the design styles for forms.
+ *
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ */
+
+
+/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */
+
+form {
+    display: inline;
+    margin: 0;
+    padding: 0;
+
+
+    // multiline label
+    fieldset > label.block > span:first-child {
+        display: inline-block;
+
+        @media @screen_min-lg {
+            width: 48.8%;
+        }
+
+        @media @screen_max-lg {
+            width: 48.5%;
+        }
+    }
+
+
+    // older version (history)
+    .dokuwiki & > .no > ul > li {
+        min-height: 2rem;
+        vertical-align: baseline;
+
+        a,
+        span,
+        img {
+            vertical-align: baseline;
+        }
+
+        img {
+            margin-left: 4px;
+            margin-right: 4px;
+        }
+
+        input[type="checkbox"] {
+            margin-bottom: .2rem;
+        }
+
+        span.user bdi {
+            a {
+                vertical-align: baseline;
+            }
+        }
+    }
+}
+
+fieldset {
+    font-size: @font-size-default;
+    line-height: 140%;
+    border: 1px solid @ini_text_alt;
+    padding: .7rem 1rem;
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+
+    + p {
+        padding-top: 1rem;
+    }
+}
+
+legend {
+    margin: 0;
+    padding: 0 .1em;
+}
+
+label {
+    vertical-align: baseline;
+    cursor: pointer;
+}
+
+input,
+textarea,
+button,
+select,
+optgroup,
+option,
+keygen,
+output,
+meter,
+progress {
+    font: inherit;
+    font-weight: normal;
+    color: #333;
+    background-color: #fff;
+    line-height: normal;
+    margin: 0;
+    vertical-align: middle;
+    box-sizing: border-box;
+}
+
+select {
+    max-width: 100%;
+}
+
+textarea.edit {
+    font-size: @font-size-default;
+}
+
+optgroup {
+    font-style: italic;
+    font-weight: bold;
+}
+
+option {
+    font-style: normal;
+    font-weight: normal;
+}
+
+input,
+textarea,
+select,
+keygen {
+    min-height: @formfield_min-height;
+    border: 1px solid @ini_border;
+    box-shadow: inset 0 0 1px #eee;
+    border-radius: @fix_border-radius;
+    padding-left: .3rem;
+    padding-right: .3rem;
+}
+
+input:active,
+input:focus,
+textarea:active,
+textarea:focus,
+select:active,
+select:focus,
+keygen:active,
+keygen:focus {
+    border-color: #999;
+}
+
+input[type="radio"],
+input[type="checkbox"],
+input[type="image"] {
+    padding: 0;
+    border-style: none;
+    box-shadow: none;
+}
+
+input[type="file"] {
+    padding-top: .1rem;
+    padding-bottom: .1rem;
+}
+
+
+/* + + + + +  buttons  + + + + + */
+button {
+    background-color: #eee;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
+    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+    border: 1px solid #ccc;
+    border-radius: @fix_border-radius;
+    color: #333;
+    padding: .1em .5em;
+    cursor: pointer;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: #ddd;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
+        background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
+        border-color: #999;
+    }
+}
+
+
+/* + + +  all types of submit-buttons  + + + */
+form input[type=submit], // heredity 'adnewpage'
+a.button,
+input[type=submit],
+input[type=reset],
+button[type=submit],
+.qq-upload-button {
+    cursor: pointer;
+    box-shadow: none;
+    background-image: none;
+    background-color: @ini_button_background;
+    border: 1px solid @ini_button_background;
+    border-radius: @fix_border-radius;
+    color: @ini_button_color;
+    vertical-align: top;
+    padding: .3em @grid;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: @ini_button_color;
+        color: @ini_button_background;
+    }
+}
+
+button[type='reset'] {
+    min-height: 2rem;
+    vertical-align: middle;
+    padding: .3em 1rem;
+}
+
+input[type=submit],
+button[type=submit] {
+    min-height: 2rem;
+    vertical-align: middle;
+
+    &[disabled] {
+        cursor: default;
+
+        &:hover,
+        &:active,
+        &:focus {
+            box-shadow: none;
+            background-image: none;
+            background-color: @ini_button_background;
+            color: @ini_button_color;
+            border-color: @ini_button_background;
+        }
+    }
+
+    + span {
+        display: block;
+        margin-top: @grid;
+    }
+}
+
+
+/* + + +  all types of buttons not being submit-buttons  + + + */
+input.button,
+input[type=button] {
+    cursor: pointer;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
+    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+    background-color: #eee;
+    border: 1px solid #ccc;
+    border-radius: @fix_border-radius;
+    color: #333;
+    padding: .1em .5em;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: #ddd;
+        border-color: #999;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
+        background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
+    }
+}
+
+
+/* + + +  all disabled buttons  + + + */
+input[disabled],
+button[disabled],
+select[disabled],
+textarea[disabled],
+option[disabled],
+input[readonly],
+button[readonly],
+select[readonly],
+textarea[readonly] {
+    cursor: auto;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
+    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+    background-color: #eee;
+    opacity: .5;
+    border: 1px solid @ini_border;
+    border-radius: @fix_border-radius;
+    color: #333;
+    font-weight: normal;
+    padding: .3em @grid;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: #ddd;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
+        background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
+        border-color: #999;
+        color: #333;
+    }
+}
+
+input::-moz-focus-inner,
+button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries - Styles for auth forms */
+
+@media @screen_max-xs {
+    .tpl_sprintdoc {
+        #dw__login,
+        #dw__register,
+        #dw__resendpwd {
+            fieldset {
+                width: 100%;
+
+                label.block {
+                    text-align: left;
+
+                    > span:first-child {
+                        width: 100%;
+                    }
+
+                    input.edit {
+                        width: 100%;
+                        margin-top: .5rem;
+                    }
+                }
+            }
+        }
+
+        #dw__login {
+            label[for="remember__me"] {
+                width: 100%;
+                margin-left: 0;
+            }
+        }
+    }
+}
--- a/css/area_header.less
+++ b/css/area_header.less
@ -3,45 +3,151 @@
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */
+
+
 #dokuwiki__header {
+    @header-font-opacity: 1;

-    .menu-togglelink {
-        border: 1px solid @color-border;
-        border-radius: @border-radius;
-        text-align: center;
-        margin: @very-small-spacing -(@very-small-spacing) 0 0;
-
-        font-size: @font-size-small;
-        min-height: 2em;
-        min-width: 2em;
-        box-sizing: border-box;
-        line-height: 2em;
-
-        cursor: pointer;
-        background-color: #fff;
-        text-decoration: none;
-        transition: @transition color, @transition background-color, @transition border-color;
-
-
-        svg {
-            height: @font-size-default + (@font-scale-factor * 4);
-            width: @font-size-default + (@font-scale-factor * 4);
+/* + + +  wiki logo  + + + */
+    @media @screen_min-md {
+        div.claim {
+            display: table-cell;
+            height: 100%;
            vertical-align: middle;
-            path {
-                fill: @color-nav
-            }
        }

-        &:hover,
-        &:active,
-        &:focus {
-            background-color: @button_color;
-            border-color: @button_background;
-            svg path {
-                fill: @button_background;
+        .logo {
+            padding: 1rem 0 .3rem;
+
+            img {
+                height: 4.6rem;
+                width: auto;
+                border-style: solid;
+                border-color: transparent;
+                border-width: 2px 0;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                img {
+                    border-width: 0;
+                }
            }
        }
-
    }

+    @media @screen_max-md {
+        .logo {
+            display: table-cell;
+
+            .mobile-only {
+                margin: .8rem 1rem .6rem 0;
+            }
+        }
+    }
+
+
+/* + + +  wiki title + claim  + + + */
+    .main-title.desktop-only {
+        @media @screen_min-md {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        @media @screen_max-md {
+            display: block;
+        }
+
+        p.title {
+            @media @screen_max-md {
+                display: none;
+            }
+        }
+
+        p.claim {
+            @media @screen_max-md {
+                display: block;
+                padding-bottom: 1rem;
+            }
+        }
+    }
+
+    .main-title:not([class*="desktop-only"]) {
+        @media @screen_max-md {
+            display: table-cell;
+            vertical-align: middle;
+        }
+    }
+
+
+/* + + +  wiki title  + + + */
+    p.title {
+        background-color: @ini_background;
+        opacity: @header-font-opacity;
+        color: @ini_text_webframe;
+        line-height: @line-height-default;
+        margin-bottom: .5rem;
+
+        @media @screen_min-md {
+            font-size: @font-size-big;
+        }
+
+        @media @screen_max-md {
+            font-size: (@font-size-default + .25);
+            padding-top: .5rem;
+            padding-left: 1rem;
+        }
+    }
+
+
+/* + + +  wiki claim  + + + */
+    p.claim {
+        opacity: @header-font-opacity;
+        color: @ini_text_webframe;
+        font-size: @font-size-default;
+        margin-bottom: 0;
+
+        @media @screen_max-md {
+            padding-top: .5rem;
+        }
+    }
+
+
+/* + + +  mobile nav togglelink  + + + */
+    .menu-togglelink {
+        margin: .45rem -(@very-small-spacing) 0 0;
+
+        a {
+            .fontello();
+            .icon-menu();
+
+            display: block;
+            min-height: @toggle-size;
+            min-width: @toggle-size;
+            box-sizing: border-box;
+            background-color: #fff;
+            border: 1px solid @ini_border;
+            border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+            color: @ini_nav_menu_color;
+            font-size: 1rem;
+            text-align: center;
+            text-decoration: none;
+            line-height: 1;
+            transition: @transition color, @transition background-color, @transition border-color;
+
+            &::before {
+                font-size: 1.5rem;
+                margin: .1rem 0 0;
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: @ini_nav_menu_hover_bg;
+                border-color: @ini_nav_menu_hover_color;
+                color: @ini_nav_menu_hover_color;
+            }
+        }
+    }
 }
--- a/css/area_main-content-secedit.less
+++ b/css/area_main-content-secedit.less
@ -1,33 +1,33 @@
 /**
 * This styles the section editing buttons and highlighting
 */
-#dokuwiki__content.main-content {
-    @button-margin: .5rem; // FIXME shouldn't we have something in our base.less for this?

+
+#dokuwiki__content.main-content {
    div.section_highlight {
-        clear: right; // FIXME why?
+        clear: right;
        background: repeating-linear-gradient(
            -45deg,
-            transparent,
-            transparent 10px,
-            @ini_background_alt 10px,
-            @ini_background_alt 20px,
+            @highlight-odd-ini_text,
+            @highlight-odd-ini_text 10px,
+            @highlight-even-ini_text 10px,
+            @highlight-even-ini_text 20px,
        );
-    }
-
-    .secedit button {
-        clear: both;
-        font-size: 100%;
-        margin-top: @button-margin;
-        margin-bottom: @button-margin;
+        border-color: @ini_background_page_header;
    }

    .editbutton_section {
-        float: right;
-        margin-top: 0;
        position: relative;
        z-index: 2;
        top: 0;
+        float: right;
+        margin-top: 0;
+
+        form div.no {
+            button {
+                padding-right: 0;
+            }
+        }

        button {
            background-color: transparent;
@ -36,20 +36,30 @@

            &::after {
                content: '';
+                float: right;
                display: inline-block;
-                background: transparent url("svg.php?svg=pencil.svg&f=link") center center no-repeat;
+                background: transparent url("svg.php?svg=pencil.svg&f=existing") center center no-repeat;
                height: 1em;
                width: 1em;
                background-size: contain;
-                margin-left: @button-margin;
+                border: solid 2px transparent;
+                border-radius: @ini_default_border_radius;
+                margin-left: @small-spacing;
+                margin-top: -1px;
            }

            &:hover,
            &:active,
            &:focus {
-                background-color: @button_color;
-                color: @button_background;
-                border-color: @button_background;
+                //background-color: @ini_existing;
+                color: @ini_existing;
+                //border-color: @ini_existing;
+
+                &::after {
+                    background-color: @ini_existing;
+                    background-image: url("svg.php?svg=pencil.svg&f=background_content");
+                    border-color: @ini_existing;
+                }
            }
        }
    }
--- a/css/area_main-content.less
+++ b/css/area_main-content.less
@ -4,39 +4,52 @@
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */

-#dokuwiki__content.main-content {

+#dokuwiki__content.main-content {
    .level2 {
        p a.media {
            img {
-                border: 1px dotted @color-site-bg;
+                border: 1px dotted @ini_background;

            }
-            &:hover, &:focus, &:active {
+            &:hover,
+            &:focus,
+            &:active {
                img {
-                    border: 1px solid @color-link;
+                    border: 1px solid @ini_existing;
                }
            }
+        }
+    }

+    > div,
+    .section_highlight > div {
+        > ul,
+        > ol {
+            &:not([class="tabs"]) > li {
+                margin-bottom: @small-spacing;
+            }
        }
    }

    .wikipagefooter {
        > hr {
            margin-top: 3em;
-            margin-bottom: 0.5em;
-            border-top: dashed @color-border-light 2px;
+            margin-bottom: .5em;
+            border-top: dashed @ini_border_light 2px;
            border-bottom: none;
        }
    }
 }

+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */

@media @screen_min-xlg {
 }

+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1199px */

--- a/css/area_main-sidebar-content.less
+++ b/css/area_main-sidebar-content.less
@ -1,14 +1,18 @@
 /**
 * This file provides the design styles the non-navigational elements in the sidebar
 */
+
+
 #dokuwiki__aside {

    // do not indent the first level of lists
    // and use less indention in deeper levels
-    ul, ol {
+    ul,
+    ol {
        padding-left: 0;

-        ul, ol {
+        ul,
+        ol {
            padding-left: @margin-small;

            li {
@ -17,3 +21,41 @@
        }
    }
 }
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1023px */
+
+@media @screen_max-md {
+    #dokuwiki__aside {
+        display: none;
+    }
+
+    body.show-mobile-sidebar {
+        #dokuwiki__aside {
+            display: block !important;
+            position: absolute;
+            left: 1.25rem; //left margin of content container
+            z-index: 200; // above all
+            box-shadow: @box-shadow-right-bottom;
+            min-width: 45%;
+            max-width: 90%;
+            height: auto;
+
+            &:after {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                width: 100%;
+                height: 100%;
+                background: @ini_background;
+                background: -webkit-linear-gradient(left, @ini_background, @ini_background_content);
+                background: linear-gradient(left, @ini_background, @ini_background_content);
+                z-index: 0;
+            }
+        }
+    }
+}
--- a/css/area_main-sidebar-nav.less
+++ b/css/area_main-sidebar-nav.less
@ -4,36 +4,101 @@
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 * @author Andreas Gohr <gohr@cosmocode.de>
 */
+
+
 #dokuwiki__aside {
    @icon-size: @font-size-big;
    @menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong

+    nav > p,
+    .mmissuelist li,
+    .mmissuelist div {
+        color: @ini_nav_menu_color;
+
+        &.noissue {
+            color: @ini_text_webframe;
+
+            * {
+                color: inherit;
+            }
+        }
+    }
+
+    nav {
+        li {
+            color: @ini_nav_menu_color;
+
+            > div {
+                color: @ini_text_webframe;
+            }
+        }
+    }
+
+
+    /* jira itemlist */
+    .mmissuelist {
+        li {
+            &.noissue {
+                list-style-type: none;
+                margin-left: 0;
+            }
+
+            a {
+                display: inline-block;
+            }
+        }
+
+        img {
+            vertical-align: bottom;
+            margin-right: .3rem;
+        }
+
+        .mm__status {
+            padding-left: .3rem;
+            padding-right: .3rem;
+        }
+
+        form {
+            vertical-align: text-top;
+        }
+    }
+
    > * {
        margin-left: @menu-margin; // moves *all* sidebar content to the right
    }

+    a {
+        &:link,
+        &:visited {
+            opacity: .9;
+            color: @ini_nav_menu_color;
+        }
+
+        * {
+            color: inherit;
+        }
+    }
+
    // the toggle element
    a.nav {
-        font-size: @font-size-head6;
-        margin: 0 0 @font-size-head6;
+        .display-flex();
+        .align-items();
+
        cursor: pointer;
-        font-weight: normal;
-        margin-left: (@menu-margin * -1); // moves the toggles back to the left
-        color: @color-nav;
+        height: @icon-size + @margin-small;
+        opacity: 1;
        border: 1px solid transparent;
        border-radius: @fix_border-radius;
+        color: @ini_nav_menu_color;
+        font-size: @font-size-head6;
+        font-weight: normal;
+        margin: -1px 0 (@font-size-head6 / 2) (@menu-margin * -1); // moves the toggles back to the left
        transition: @transition color, @transition background-color, @transition border-color;

-        height: @icon-size + @margin-small;
-        display: flex;
-        display: -ms-flexbox;
-        flex-direction: row;
-        -ms-flex-direction: row;
-        align-items: center;
-
        span {
            display: inline-block;
            vertical-align: middle;
+            color: inherit;
        }

        span.lbl {
@ -44,10 +109,10 @@
            width: @menu-margin;
            height: @icon-size;
            flex-grow: 0;
-            border-right: 1px solid @color-border;
+            border-right: 1px solid @ini_nav_menu_color;
            text-align: center;
            margin-right: @margin-small;
-            color: @color-nav;
+            color: inherit;

            // simple fake icon
            strong {
@ -59,19 +124,21 @@
                margin: @icon-size * 0.05;
                vertical-align: baseline;
                text-align: center;
-                color: @color-nav;
-                border: 2px solid @color-nav;
+                color: inherit;
+                border: 2px solid @ini_nav_menu_color;
                border-top-right-radius: 50%;
                border-bottom-left-radius: 50%;
-
+                transition: @transition border-color;
            }

            // real icon
            svg {
                width: @icon-size;
                height: @icon-size;
+
                path {
-                    fill: @color-nav;
+                    fill: @ini_nav_menu_color;
+                    transition: @transition all;
                }
            }
        }
@ -79,18 +146,23 @@
        &:hover,
        &:focus,
        &:active {
-            background-color: @button_color;
-            border-color: @button_background;
-            color: @button_background;
+            background-color: @ini_nav_menu_hover_bg;
+            border-color: @ini_nav_menu_hover_color;
+            color: @ini_nav_menu_hover_color;
            text-decoration: none;

-            span.ico strong {
-                color: @button_background;
-                border-color: @button_background;
-            }
+            span.ico {
+                border-color: inherit;

-            span.ico svg path {
-                fill: @button_background;
+                strong {
+                    border-color: inherit;
+                }
+
+                svg {
+                    path {
+                        fill: @ini_nav_menu_hover_color;
+                    }
+                }
            }
        }
    }
@ -98,53 +170,97 @@
    // the panel (hidden by default)
    div.nav-panel {
        display: none;
+        margin-top: .5rem;
+
+        ul {
+            margin-bottom: 1rem;
+
+            ul {
+                margin-bottom: 0;
+            }
+        }
    }
 }

-/**
- * Sidebar handling in mobile view
- */
-@media @screen_max-md {
-    // hide on medium and smaller screens
+
+/* + + + + + +  wide page content  border-bottom between a.nav (short width)  + + + + +
+.wide-content {
    #dokuwiki__aside {
-        display: none;
-    }
+        a.nav {
+            position: relative;

-    // show when toggled
-    body.show-mobile-sidebar {
-
-        #dokuwiki__aside {
-            display: block;
-
-            position: absolute;
-            left: 1.25rem;//left margin of content container
-            z-index: 200; // above all
-            box-shadow: @box-shadow-right-bottom;
-            min-width: 45%;
-            max-width: 90%;
-            height: auto;
-
-            &:after{
-                content: "";
+            &::after {
+                content: '';
                position: absolute;
-                top: 0;
-                left:0;
-                bottom:0;
-                right:0;
+                bottom: -1px;
+                left: 0;
                width: 100%;
-                height: 100%;
-                background: @ini_background;
-                background: -webkit-linear-gradient(left, @ini_background, @color-content-bg);
-                background: linear-gradient(left, @ini_background, @color-content-bg);
-
-                z-index: 0;
+                height: 1px;
+                border-bottom: solid 1px @ini_border;
            }

-            > nav{
+            &:hover,
+            &:focus,
+            &:active {
+                &::after {
+                    display: none;
+                }
+            }
+        }
+    }
+} */
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* min-width: 1440px */
+
+@media @screen_min-xlg {
+    #dokuwiki__aside {
+        nav {
+            li:not([class]),
+            .li {
+                font-size: @font-size-head6;
+                padding: .15em 0;
+
+                * {
+                    font-size: inherit;
+                    font-weight: inherit;
+                }
+
+                a {
+                    font-size: (@font-size-head6 - .05);
+                }
+            }
+        }
+    }
+}
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1023px */
+
+@media @screen_max-md {
+    // show when toggled
+    body.show-mobile-sidebar {
+        .search.main-sidebar {
+            display: block !important;
+            position: relative;
+
+            form {
+                margin-bottom: 1rem;
+
+                .no {
+                    display: block;
+                }
+            }
+        }
+
+        #dokuwiki__aside {
+            > nav {
                position: relative;
-                //display: block;
                z-index: 2;
-                &:first-child{
+
+                &:first-child {
                    margin-top: 1.2rem;
                }
            }
@ -154,53 +270,23 @@
                border-right-width: 0;
                border-left-width: 0;
            }
+
            .nav-panel,
-            a.nav{
+            a.nav {
                padding-right: .8em;
            }
        }
-
-
    }
-
 }

-// FIXME check if the stuff below is still relevant

 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* min-width: 1440px */
-
-@media @screen_min-xlg {
-    #dokuwiki__aside.main-sidebar {
-        .nav-main {
-            .li {
-                font-size: @font-size-default;
-                padding: .1em 0;
-
-                * {
-                    font-size: inherit;
-                    font-weight: inherit;
-                }
-            }
-
-            > ul > li > .li {
-                font-size: @font-size-default;
-
-                * {
-                    font-size: inherit;
-                }
-            }
-        }
-    }
-
-}
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* max-width: 1199px */
+/* max-width: 1439px */

@media @screen_max-xlg {
-    #dokuwiki__aside.main-sidebar {
-        .nav-main {
+    #dokuwiki__aside {
+        nav {
+            li:not([class]),
            .li {
                font-size: @font-size-default;
                padding: .15em 0 .15em .25rem;
@ -210,14 +296,6 @@
                    font-weight: inherit;
                }
            }
-
-            > ul > li > .li {
-                font-size: @font-size-default;
-
-                > * {
-                    font-size: inherit;
-                }
-            }
        }
    }
 }
--- a/css/area_msg.less
+++ b/css/area_msg.less
@ -1,11 +1,39 @@
-.msg-area{
+.msg-area {
    clear: both;
    padding-top: 1.6rem;
-    div{
-        //font-size: .88rem;
+
+    div {
        line-height: 135%;
    }
-    &:empty{
+
+    &:empty {
        display: none;
    }
 }
+
+/* short fix: SPR-891 - Icons für Notifications in Message Area werden gekachelt */
+div.success, div.error, div.info, div.notify {
+    background-repeat: no-repeat;
+    background-position: 8px 50%;
+    border: 1px solid #eeb;
+    font-size: 90%;
+    margin: 0 0 .5em;
+    padding: .4em;
+    padding-left: 32px;
+    overflow: hidden;
+    border-radius: 5px;
+
+    * {
+        color: inherit;
+    }
+
+    a {
+        text-decoration: underline;
+
+        &:hover,
+        &:focus,
+        &:active {
+            text-decoration: none;
+        }
+    }
+}
--- a/css/area_nav-breadcrumb.less
+++ b/css/area_nav-breadcrumb.less
@ -1,19 +1,35 @@
 /**
- * This file provides the design styles for the direct / menu jump links.
+ * This file provides the design styles for the breadcrumb
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */

+
 .breadcrumbs {
    position: relative;
-    border-bottom: 1px solid @color-border-light;
-    padding: 1rem 1.8rem .2rem;
    min-height: @page-header_height;
    box-sizing: border-box;
+    background-color: @ini_background_content;
+    border-bottom: 1px solid @ini_border_light;
+    padding: 1rem 1.8rem .2rem;
+
+    @media @screen_max-md {
+        background-color: @ini_background_page_header;
+    }
+
+    @media @screen_max-xs {
+        padding-left: @margin-small;
+        padding-right: .75rem;
+    }
+
+    @media @screen_xs-lg {
+        background-color: @ini_background_content;
+    }

    > p {
        font-size: @font-size-small;
        margin: 0;
+
        @media @screen_max-xs{
            width: 1px;
            position: relative;
@ -31,9 +47,11 @@

        span.home {
            margin-left: -.2rem; // reverse spacing in home icon --> content text and home icon aligned
-            .wide-content &{
+
+            .wide-content & {
                margin-left: .4rem; //toggle link has position absolute, hover on home icon needs more space than left padding of breadcrumb
            }
+
            a {
                .fontello();
                .hide-text-show-before();
@ -44,7 +62,7 @@
                width: auto;
                box-sizing: border-box;
                border: solid 1px transparent;
-                border-radius: @border-radius;
+                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
                vertical-align: middle;
                text-decoration: none;
                margin-top: -.2em;
@ -58,7 +76,7 @@
                &:hover,
                &:focus,
                &:active {
-                    border-color: @color-link;
+                    border-color: @ini_existing;
                }
            }
        }
@ -68,9 +86,3 @@
        }
    }
 }
-
-
-/* + + + + +  ?  + + + + + */
-.mode_admin {
-
-}
--- a/css/area_nav-direct.less
+++ b/css/area_nav-direct.less
@ -4,8 +4,9 @@
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */

+
 .nav-direct {
-    background-color: __nav_direct_background__;
+    background-color: @nav_direct_background;
    margin-top: -1px;

    p {
@ -21,12 +22,12 @@
        a:visited {
            .sr-out();

-            box-shadow: __box_shadow__;
+            box-shadow: @box-shadow;
            display: block;
            width: 100%;
-            background-color: __nav_direct_background__;
-            border-bottom: 1px solid __shadow_color__;
-            color: __nav_direct_color__;
+            background-color: @nav_direct_background;
+            border-bottom: 1px solid @ini_border_light;
+            color: @nav_direct_color;
            line-height: @line-height-default;
            text-decoration: none;
            padding: 1em;
--- a/css/area_nav-metabox.less
+++ b/css/area_nav-metabox.less
@ -1,20 +1,48 @@
+/**
+ * This file provides the design styles for the metatabbox
+ *
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ */
+
+
 #spr__meta-box {
+    .display-flex();
+    .flex-direction();
+    .justify-content(flex-end);
+
    position: relative;
    z-index: 10;
-    display: inline-block;
-    min-height: @page-header_height;
-    max-width: 40%;
    float: right;
-    margin-top: @page_padding-top * -1; // reverse padding-top of .page container
-    padding-top: 1rem;
-    border: 1px solid transparent;
+    max-width: 40%;
+    margin-top: -(@page_padding-top); // reverse padding-top of .page container
+    margin-right: -1px;
+
+    // >= 1024
+    @media @screen_min-md {
+        height: @page-header_height;
+        border: 1px solid transparent;
+    }
+
+    // < 1024
+    @media @screen_max-md {
+        position: relative;
+        top: .2rem;
+        right: auto;
+        float: none;
+        display: block;
+        max-width: 100%;
+        min-height: @page-header_height;
+        height: auto;
+        border: 0 none;
+    }

    .tab-container {
        display: table;
-        @media @screen_max-md{
+
+        @media @screen_max-md {
+            display: block;
            width: 100%;
        }
-
    }

    .box-content {
@ -23,21 +51,25 @@
        overflow-y: visible;
    }

+
+/* + + + + +  tab controlls  + + + + + */
    ul.meta-tabs {
        list-style: none;
-        background-color: @background_page-header;
-        @media @screen_max-md{
-            background-color: #fff;
-        }
+        line-height: 160%;
        margin: 0;
        padding: 0;

+        @media @screen_min-md {
+            white-space: nowrap;
+            text-align: right;
+        }
+
        &::before,
        &::after {
-            display: table;
-            content: " ";
-            box-sizing: border-box;
+            content: '';
            clear: both;
+            display: table;
+            box-sizing: border-box;
        }

        > li:first-child {
@ -47,27 +79,45 @@
        }

        > li {
-            margin: 0 0 -1px;
            position: relative;
            display: inline-block;
+            vertical-align: bottom;
+            margin: 0;
+
+            @media @screen_min-md {
+                margin-left: .3rem;
+            }
+
+            @media @screen_max-md {
+                margin-right: .4rem;
+                margin-bottom: .2rem;
+            }

            > a {
                cursor: pointer;
                position: relative;
                display: block;
-                background-color: @color-site-bg;
-                border: 1px solid @color-border-light;
-                border-bottom-color: @color-site-bg;
-                border-radius: @fix_border-radius @fix_border-radius 0 0;
-                color: @color-nav;
                font-size: @font-size-small;
                line-height: 1.42857143;
-                padding: .3em 1rem .1em;
-                margin-left: 4px;
-                transition: @transition color, @transition background-color, @transition border-color;
-                @media @screen_max-xs{
-                    padding: .3em .3rem .1em;
+                transition: @transition background-color, @transition border-color, @transition color;
+
+                @media @screen_min-md {
+                    background-color: @ini_background;
+                    border: 1px solid @noopentasks-border;
+                    border-bottom-color: @ini_background;
+                    border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius
+                    color: @ini_nav_menu_color;
+                    margin-left: 4px;
+                    padding: .3em 1rem .1em;
+                }
+
+                @media @screen_max-md {
+                    top: 0;
+                    border: 1px solid @ini_existing;
+                    color: @ini_existing;
+                    margin-top: .2rem;
                    margin-left: 0;
+                    padding: .2em .3rem;
                }

                * {
@ -77,20 +127,25 @@

                .prefix {
                    position: relative;
-                    transition: @transition color;
+                    color: inherit;
                    font-size: @font-size-small;
                }

                &:hover,
                &:focus,
                &:active {
-                    background-color: @color-content-bg;
-                    border-color: @color-link;
-                    color: @color-link;
                    text-decoration: none;

-                    .prefix {
-                        color: inherit;
+                    @media @screen_min-md {
+                        background-color: @ini_background_content;
+                        border-color: @ini_existing;
+                        color: @ini_existing;
+                    }
+
+                    @media @screen_max-md {
+                        background-color: @ini_existing;
+                        border-color: @ini_background_content;
+                        color: @ini_background_content;
                    }
                }
            }
@ -100,43 +155,56 @@

                > a {
                    cursor: default;
-                    background-color: @color-content-bg;
-                    border-color: @color-link;
-                    border-bottom-color: @color-content-bg;
-                    color: @color-link;
+                    background-color: @ini_background_content;
+                    border-color: @ini_existing;
+                    border-bottom-color: @ini_background_content;
+                    color: @ini_existing;
+
+                    @media @screen_max-md {
+                        background-color: @ini_existing;
+                        border-bottom-color: @ini_existing;
+                        border-radius: 0;
+                        color: @ini_background_content;
+                    }
                }
            }
        }
    }

+
+/* + + + + +  toggle content  + + + + + */
    .meta-content {
-        margin-right: 1px;
        margin-top: -1px;
+
+        @media @screen_max-md {
+            clear: both;
+            margin-top: 2px;
+        }
+
        .tab-pane {
            position: absolute;
            top: 0;
            right: 0;
            display: none;
            width: 100%;
-            min-width: 20em;
-            background-color: @color-content-bg;
-            border: 1px solid @color-link;
-            border-top-color: transparent;
-            border-radius: 0 0 @fix_border-radius @fix_border-radius;
+            background-color: @ini_background_content;
+            border: 1px solid @ini_existing;

-            &::before {
-                content: '';
-                position: absolute;
-                top: -1px;
-                left: 0;
-                z-index: 0;
-                width: 100%;
-                height: 1px;
-                background-color: @color-link;
+            @media @screen_min-xs {
+                min-width: 20em;
+            }
+
+            @media @screen_min-md {
+                border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
            }

            &.active {
                display: block;
+                overflow: hidden;
+            }
+
+            a {
+                color: @ini_existing;
            }

            > div {
@ -162,6 +230,16 @@
                }
            }

+            &#spr__tab-tags {
+                > div {
+                    ul {
+                        li {
+                            padding-left: 0;
+                        }
+                    }
+                }
+            }
+
            #dw__toc {
                width: auto;
                float: none;
@ -189,23 +267,20 @@
                        position: relative;
                    }

-                    li {
-                    }
-
                    div.li {
                        position: relative;
                        padding: .15em 0;

                        &::before {
+                            content: '';
                            position: absolute;
-                            top: .3em;
-                            content: "";
+                            top: .6em;
+                            left: 0;
                            display: inline-block;
                            width: 4px;
                            height: 4px;
-                            background-color: #ccc;
                            overflow: hidden;
-                            left: 0;
+                            background-color: @ini_existing;
                        }
                    }
                }
@ -221,25 +296,4 @@
        clear: right;
        margin-top: 20px;
    }
-
-    @media @screen_max-md{
-        max-width: 100%;
-        float: none;
-        display: block;
-        top: -1.1rem;
-        position: relative;
-        right: auto;
-        .tab-container{
-            display: block;
-        }
-        ul.meta-tabs{
-            > li > a{
-                margin-left: 0;
-            }
-        }
-        .meta-content{
-            clear: both;
-        }
-    }
 }
-
--- a/css/area_nav-page-attributes.less
+++ b/css/area_nav-page-attributes.less
@ -20,11 +20,20 @@
        float: left;
        display: block;
        width: auto;
-        min-height: 2em;
-        border: 1px solid @color-border;
-        border-radius: @border-radius;
-        color: @color-nav;
+        min-height: @toggle-size;
+        border: 1px solid @wikiicons-border;
+        border-radius: @ini_default_border_radius;
        text-align: center;
-        margin: 0;
+        margin: 0 .25rem;
+
+        .prefix {
+            .btn-prefix ();
+            .icon-clipboard();
+
+            display: block;
+            font-size: 1.2rem;
+            line-height: 1;
+        }
+
    }
 }
--- a/css/area_nav-pagetools.less
+++ b/css/area_nav-pagetools.less
@ -18,200 +18,142 @@
 .pagetools-item(subscribe, 9, subscribe);
 .pagetools-item(mediaManager, 11);
 .pagetools-item(back, 12);
-.pagetools-item(img_backto, 12);*/
+.pagetools-item(img_backto, 12);
+*/

+#dokuwiki__aside {
+    @media @screen_max-md {
+        display: none !important;
+    }
+}
+
+nav#dokuwiki__pagetools {
+    @toolbox-size: 30px;

-nav#dokuwiki__pagetools{
-    right: -(@margin-default);
    top: 3.05rem;
    z-index: 100;
+
+    @media @screen_min-md {
+        right: -2.5rem;
+    }
+
+    @media @screen_max-md {
+        right: 8px;
+    }
+
    ul {
        li {
+            @page-tools_svg-size: 25px;
+            @page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2;

-            *{
+            * {
                font-size: @font-size-default;
            }
-            &.plugin_move_page{
-                a{
-                    opacity: .6;
-                    color: @color-nav;
-                    *{
-                        color: @color-nav;
-                    }

-                    background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSIxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9InJnYigxMDUsMTA1LDEwNSkiIGQ9Ik05NDYuNCAyMTQuM3EyMi40IDAgMzggMTUuNnQxNS42IDM4djY3OC41cTAgMjIuMyAtMTUuNiAzOHQtMzggMTUuNkg0MTAuN3EtMjIuMyAwIC0zNy45IC0xNS42dC0xNS43IC0zOFY3ODUuN0g1My42cS0yMi40IDAgLTM4IC0xNS42VDAgNzMyLjF2LTM3NVEwIDMzNC44IDExLjIgMzA4dDI2LjcgLTQyLjRMMjY1LjYgMzcuOVEyODEuMyAyMi4zIDMwOCAxMS4yVDM1Ny4xIDBoMjMyLjJxMjIuMyAwIDM3LjkgMTUuNnQxNS43IDM4djE4M3EzNy45IC0yMi4zIDcxLjQgLTIyLjNoMjMyLjF6TTY0Mi45IDMzMy4xTDQ3NiA1MDBoMTY2LjlWMzMzLjF6TTI4NS43IDExOC45TDExOC45IDI4NS43aDE2Ni44VjExOC45em0xMDkuNCAzNjFMNTcxLjQgMzAzLjZWNzEuNEgzNTcuMXYyMzIuMnEwIDIyLjMgLTE1LjYgMzcuOXQtMzcuOSAxNS42SDcxLjR2MzU3LjJoMjg1LjdWNTcxLjRxMCAtMjIuMyAxMS4yIC00OS4xdDI2LjggLTQyLjR6bTUzMy41IDQ0OC43VjI4NS43SDcxNC4zdjIzMi4ycTAgMjIuMyAtMTUuNiAzNy45dC0zOCAxNS42SDQyOC42djM1Ny4yaDUwMHoiLz48L3N2Zz4=) 95% center no-repeat;
-                    background-size: @font-size-head2 auto;
-                    &:before{
-                        visibility: hidden;
-                    }
+            a {
+                .fontello-double();

-                    &:hover, &:focus, &:active{
-                        opacity: 1;
-                        color: @color-nav-hover;
-                        background-color: #fff;
-                        background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSIxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9InJnYig0MCwxMDksMTY4KSIgZD0iTTk0Ni40IDIxNC4zcTIyLjQgMCAzOCAxNS42dDE1LjYgMzh2Njc4LjVxMCAyMi4zIC0xNS42IDM4dC0zOCAxNS42SDQxMC43cS0yMi4zIDAgLTM3LjkgLTE1LjZ0LTE1LjcgLTM4Vjc4NS43SDUzLjZxLTIyLjQgMCAtMzggLTE1LjZUMCA3MzIuMXYtMzc1UTAgMzM0LjggMTEuMiAzMDh0MjYuNyAtNDIuNEwyNjUuNiAzNy45UTI4MS4zIDIyLjMgMzA4IDExLjJUMzU3LjEgMGgyMzIuMnEyMi4zIDAgMzcuOSAxNS42dDE1LjcgMzh2MTgzcTM3LjkgLTIyLjMgNzEuNCAtMjIuM2gyMzIuMXpNNjQyLjkgMzMzLjFMNDc2IDUwMGgxNjYuOVYzMzMuMXpNMjg1LjcgMTE4LjlMMTE4LjkgMjg1LjdoMTY2LjhWMTE4Ljl6bTEwOS40IDM2MUw1NzEuNCAzMDMuNlY3MS40SDM1Ny4xdjIzMi4ycTAgMjIuMyAtMTUuNiAzNy45dC0zNy45IDE1LjZINzEuNHYzNTcuMmgyODUuN1Y1NzEuNHEwIC0yMi4zIDExLjIgLTQ5LjF0MjYuOCAtNDIuNHptNTMzLjUgNDQ4LjdWMjg1LjdINzE0LjN2MjMyLjJxMCAyMi4zIC0xNS42IDM3Ljl0LTM4IDE1LjZINDI4LjZ2MzU3LjJoNTAweiIvPjwvc3ZnPg==);
-
-                        *{
-                            color: @color-nav-hover;
-                        }
-                        background-position: 95% center;
-                        &::before{
-                            visibility: visible;
-                        }
-                    }
-                }
-            }
-
-            a{
+                position: relative;
+                height: auto;
+                min-height: @toolbox-size; // for nav:hover
+                width: @toolbox-size; // for nav:hover
                font-size: @font-size-default;
-                &.source, &.revs, &.backlink, &.plugin_bookcreator_addtobook, &.export_pdf, &.top, &.edit, &.show{
-                    opacity: .6;
-                    color: @color-nav;
-                    *{
-                        color: @color-nav;
+                padding: 2px @toolbox-size 2px 2px;
+
+                @media @screen_min-md {
+                    color: @ini_nav_menu_color;
+                }
+
+                @media @screen_max-md {
+                    color: @ini_existing;
+                }
+
+                * {
+                    color: inherit;
+                }
+
+                &::before {
+                    display: none;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: transparent;
+                }
+
+                span {
+                    .sr-only();
+
+                    padding-right: .5rem;
+                    padding-left: .3rem;
+                }
+
+                svg {
+                    display: inline-block;
+                    width: @page-tools_svg-size;
+                    height: @page-tools_svg-size;
+                    vertical-align: middle;
+                    border: solid 1px transparent;
+                    margin: @page-tools_svg-space;
+
+                    @media @screen_min-md {
+                        fill: @ini_nav_menu_color;
                    }
-                    background-position: 95% center;
-                    background-size: @font-size-head2 auto;
-                    &:before{
-                        visibility: hidden;
-                    }
-                    &:hover, &:focus, &:active{
-                        opacity: 1;
-                        color: @color-nav-hover;
-                        background-color: #fff;
-                        *{
-                            color: @color-nav-hover;
-                        }
-                        background-position: 95% center;
-                        &::before{
-                            visibility: visible;
-                        }
+
+                    @media @screen_max-md {
+                        fill: @ini_existing;
                    }
                }

-                &.source{
-                    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSIxMDcxLjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDEwNSwxMDUsMTA1KSIgZD0iTTM0NC4zIDc4MC43bC0yNy45IDI3LjlxLTUuNiA1LjYgLTEyLjggNS42dC0xMi45IC01LjZMMzAuNyA1NDguNVEyNS4xIDU0MyAyNS4xIDUzNS43dDUuNiAtMTIuOGwyNjAgLTI2MC4xcTUuNiAtNS41IDEyLjkgLTUuNXQxMi44IDUuNWwyNy45IDI3LjlxNS42IDUuNiA1LjYgMTIuOXQtNS42IDEyLjhMMTI1IDUzNS43IDM0NC4zIDc1NXE1LjYgNS42IDUuNiAxMi45dC01LjYgMTIuOHpNNjc0LjEgMTg1LjNMNDY2IDkwNS43cS0yLjMgNy4yIC04LjcgMTAuOXQtMTMuMSAxLjRsLTM0LjYgLTkuNXEtNy4zIC0yLjIgLTEwLjkgLTguN3QtMS40IC0xMy42TDYwNS41IDE2NS43cTIuMiAtNy4yIDguNiAtMTAuOHQxMy4xIC0xLjRsMzQuNiA5LjRxNy4zIDIuMyAxMC45IDguN3QxLjQgMTMuN3ptMzY2LjYgMzYzLjJsLTI2MCAyNjAuMXEtNS42IDUuNiAtMTIuOCA1LjZUNzU1IDgwOC42bC0yNy45IC0yNy45cS01LjYgLTUuNiAtNS42IC0xMi44dDUuNiAtMTIuOUw5NDYuNCA1MzUuNyA3MjcuMSAzMTYuNHEtNS42IC01LjYgLTUuNiAtMTIuOHQ1LjYgLTEyLjlMNzU1IDI2Mi44cTUuNiAtNS41IDEyLjkgLTUuNXQxMi44IDUuNWwyNjAgMjYwLjFxNS42IDUuNiA1LjYgMTIuOHQtNS42IDEyLjh6Ii8+PC9zdmc+);
-                    &:hover, &:focus, &:active{
-                        background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSIxMDcxLjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDQwLDEwOSwxNjgpIiBkPSJNMzQ0LjMgNzgwLjdsLTI3LjkgMjcuOXEtNS42IDUuNiAtMTIuOCA1LjZ0LTEyLjkgLTUuNkwzMC43IDU0OC41UTI1LjEgNTQzIDI1LjEgNTM1Ljd0NS42IC0xMi44bDI2MCAtMjYwLjFxNS42IC01LjUgMTIuOSAtNS41dDEyLjggNS41bDI3LjkgMjcuOXE1LjYgNS42IDUuNiAxMi45dC01LjYgMTIuOEwxMjUgNTM1LjcgMzQ0LjMgNzU1cTUuNiA1LjYgNS42IDEyLjl0LTUuNiAxMi44ek02NzQuMSAxODUuM0w0NjYgOTA1LjdxLTIuMyA3LjIgLTguNyAxMC45dC0xMy4xIDEuNGwtMzQuNiAtOS41cS03LjMgLTIuMiAtMTAuOSAtOC43dC0xLjQgLTEzLjZMNjA1LjUgMTY1LjdxMi4yIC03LjIgOC42IC0xMC44dDEzLjEgLTEuNGwzNC42IDkuNHE3LjMgMi4zIDEwLjkgOC43dDEuNCAxMy43em0zNjYuNiAzNjMuMmwtMjYwIDI2MC4xcS01LjYgNS42IC0xMi44IDUuNlQ3NTUgODA4LjZsLTI3LjkgLTI3LjlxLTUuNiAtNS42IC01LjYgLTEyLjh0NS42IC0xMi45TDk0Ni40IDUzNS43IDcyNy4xIDMxNi40cS01LjYgLTUuNiAtNS42IC0xMi44dDUuNiAtMTIuOUw3NTUgMjYyLjhxNS42IC01LjUgMTIuOSAtNS41dDEyLjggNS41bDI2MCAyNjAuMXE1LjYgNS42IDUuNiAxMi44dC01LjYgMTIuOHoiLz48L3N2Zz4=);
-                    }
-                }
-                &.edit{
-                    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4MzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDEwNSwxMDUsMTA1KSIgZD0iTTc5NSAxMTkuMDY5YzUwIDQ2LjI1IDQzLjc1IDExNy41IC0zLjc1IDE2NWwtNDYuMjUgNDYuMjVzMzUgLTUzLjc1IC0zNy41IC0xMjMuNzVjLTYzLjc1IC02My43NSAtMTIzLjc1IC0zNi4yNSAtMTIzLjc1IC0zNi4yNWw0OC43NSAtNDguNzVjNDMuNzUgLTQ1IDEyMCAtNDUgMTYyLjUgLTIuNXptLTg4Ljc1IDI1MGwtNDkyLjUgNDkyLjUgLTIxMCA1MS4yNSAtMy43NSAtMy43NSA1NSAtMjEwIDQ5Mi41IC00OTBjOC43NSAtMi41IDMwIC04Ljc1IDYwIC0yLjVsLTUyMi41IDUyMi41IC0xNSA1NSA2MCA2MCA1Ni4yNSAtMTUgMjUgLTIzLjc1IDIuNSAtNTYuMjUgLTQwIC00MCA0NzguNzUgLTQ3OC43NWM3LjUgNi4yNSA3LjUgNi4yNSAxNSAxNSA3MS4yNSA3MCAzOC43NSAxMjMuNzUgMzguNzUgMTIzLjc1eiIvPjwvc3ZnPg==);
-                    &:hover, &:focus, &:active{
-                        background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4MzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDQwLDEwOSwxNjgpIiBkPSJNNzk1IDExOS4wNjljNTAgNDYuMjUgNDMuNzUgMTE3LjUgLTMuNzUgMTY1bC00Ni4yNSA0Ni4yNXMzNSAtNTMuNzUgLTM3LjUgLTEyMy43NWMtNjMuNzUgLTYzLjc1IC0xMjMuNzUgLTM2LjI1IC0xMjMuNzUgLTM2LjI1bDQ4Ljc1IC00OC43NWM0My43NSAtNDUgMTIwIC00NSAxNjIuNSAtMi41em0tODguNzUgMjUwbC00OTIuNSA0OTIuNSAtMjEwIDUxLjI1IC0zLjc1IC0zLjc1IDU1IC0yMTAgNDkyLjUgLTQ5MGM4Ljc1IC0yLjUgMzAgLTguNzUgNjAgLTIuNWwtNTIyLjUgNTIyLjUgLTE1IDU1IDYwIDYwIDU2LjI1IC0xNSAyNSAtMjMuNzUgMi41IC01Ni4yNSAtNDAgLTQwIDQ3OC43NSAtNDc4Ljc1YzcuNSA2LjI1IDcuNSA2LjI1IDE1IDE1IDcxLjI1IDcwIDM4Ljc1IDEyMy43NSAzOC43NSAxMjMuNzV6Ii8+PC9zdmc+);
-                    }
-                }
-                &.revs{
-                    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4NTcuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoMTA1LDEwNSwxMDUpIiBkPSJNNTAwIDMwMy42djI1MHEwIDcuOCAtNSAxMi44dC0xMi45IDVIMzAzLjZxLTcuOCAwIC0xMi45IC01dC01IC0xMi44di0zNS43cTAgLTcuOSA1IC0xMi45dDEyLjkgLTVoMTI1VjMwMy42cTAgLTcuOCA1IC0xMi45dDEyLjggLTVoMzUuN3E3LjkgMCAxMi45IDV0NSAxMi45ek03MzIuMSA1MDBxMCAtODIuNiAtNDAuNyAtMTUyLjNUNTgwLjkgMjM3LjIgNDI4LjYgMTk2LjR0LTE1Mi40IDQwLjhUMTY1LjcgMzQ3LjcgMTI1IDUwMHQ0MC43IDE1Mi4zIDExMC41IDExMC41IDE1Mi40IDQwLjggMTUyLjMgLTQwLjhUNjkxLjQgNjUyLjMgNzMyLjEgNTAwem0xMjUgMHEwIDExNi42IC01Ny40IDIxNS4xdC0xNTYgMTU2IC0yMTUuMSA1Ny41VDIxMy40IDg3MS4xIDU3LjUgNzE1LjEgMCA1MDAgNTcuNSAyODQuOXQxNTUuOSAtMTU2VDQyOC42IDcxLjR0MjE1LjEgNTcuNSAxNTYgMTU2VDg1Ny4xIDUwMHoiLz48L3N2Zz4=);
-                    &:hover, &:focus, &:active{
-                        background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4NTcuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoNDAsMTA5LDE2OCkiIGQ9Ik01MDAgMzAzLjZ2MjUwcTAgNy44IC01IDEyLjh0LTEyLjkgNUgzMDMuNnEtNy44IDAgLTEyLjkgLTV0LTUgLTEyLjh2LTM1LjdxMCAtNy45IDUgLTEyLjl0MTIuOSAtNWgxMjVWMzAzLjZxMCAtNy44IDUgLTEyLjl0MTIuOCAtNWgzNS43cTcuOSAwIDEyLjkgNXQ1IDEyLjl6TTczMi4xIDUwMHEwIC04Mi42IC00MC43IC0xNTIuM1Q1ODAuOSAyMzcuMiA0MjguNiAxOTYuNHQtMTUyLjQgNDAuOFQxNjUuNyAzNDcuNyAxMjUgNTAwdDQwLjcgMTUyLjMgMTEwLjUgMTEwLjUgMTUyLjQgNDAuOCAxNTIuMyAtNDAuOFQ2OTEuNCA2NTIuMyA3MzIuMSA1MDB6bTEyNSAwcTAgMTE2LjYgLTU3LjQgMjE1LjF0LTE1NiAxNTYgLTIxNS4xIDU3LjVUMjEzLjQgODcxLjEgNTcuNSA3MTUuMSAwIDUwMCA1Ny41IDI4NC45dDE1NS45IC0xNTZUNDI4LjYgNzEuNHQyMTUuMSA1Ny41IDE1NiAxNTZUODU3LjEgNTAweiIvPjwvc3ZnPg==);
-                    }
-                }
-                &.backlink{
-                    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI5MjguNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoMTA1LDEwNSwxMDUpIiBkPSJNODEyLjUgNjc4LjZxMCAtMjIuMyAtMTUuNiAtMzhsLTExNi4xIC0xMTZxLTE1LjYgLTE1LjcgLTM3LjkgLTE1LjcgLTIzLjUgMCAtNDAuMiAxNy45IDEuNyAxLjcgMTAuNiAxMC4zdDEyIDEyIDguMyAxMC42IDcuMyAxNC4yIDIgMTUuNHEwIDIyLjMgLTE1LjcgMzcuOXQtMzcuOSAxNS43cS04LjQgMCAtMTUuNCAtMnQtMTQuMiAtNy4zIC0xMC42IC04LjMgLTEyIC0xMiAtMTAuMyAtMTAuNnEtMTguNCAxNy4zIC0xOC40IDQwLjcgMCAyMi4zIDE1LjYgMzhsMTE1IDExNS41cTE1IDE1IDM3LjkgMTUgMjIuMyAwIDM3LjkgLTE0LjVMNzk2LjkgNzE2cTE1LjYgLTE1LjcgMTUuNiAtMzcuNHpNNDIwLjIgMjg1LjJxMCAtMjIuNCAtMTUuNiAtMzhsLTExNSAtMTE1LjVRMjc0IDExNi4xIDI1MS43IDExNi4xcS0yMS44IDAgLTM4IDE1bC04MiA4MS41cS0xNS42IDE1LjYgLTE1LjYgMzcuNCAwIDIyLjMgMTUuNiAzNy45TDI0Ny44IDQwNHExNSAxNS4xIDM3LjkgMTUuMSAyMy41IDAgNDAuMiAtMTcuMyAtMS43IC0xLjcgLTEwLjYgLTEwLjN0LTEyIC0xMiAtOC40IC0xMC42IC03LjIgLTE0LjMgLTIgLTE1LjNxMCAtMjIuMyAxNS42IC0zOHQzOCAtMTUuNnE4LjQgMCAxNS4zIDJ0MTQuMyA3LjIgMTAuNiA4LjQgMTIgMTIgMTAuMyAxMC42cTE4LjQgLTE3LjMgMTguNCAtNDAuN3ptNDk5LjQgMzkzLjRxMCA2Ni45IC00Ny40IDExMy4zbC04MiA4MS40cS00Ni4zIDQ2LjMgLTExMy4zIDQ2LjMgLTY3LjUgMCAtMTEzLjggLTQ3LjRsLTExNSAtMTE1LjVRNDAxLjggNzEwLjQgNDAxLjggNjQzLjRxMCAtNjguNiA0OS4xIC0xMTYuNmwtNDkuMSAtNDkuMXEtNDggNDkuMSAtMTE2LjEgNDkuMSAtNjYuOSAwIC0xMTMuOCAtNDYuOUw1NS44IDM2My44UTguOSAzMTcgOC45IDI1MFQ1Ni40IDEzNi43bDgyIC04MS41UTE4NC43IDguOSAyNTEuNyA4LjlxNjcuNSAwIDExMy44IDQ3LjVsMTE1IDExNS41cTQ2LjMgNDYuMyA0Ni4zIDExMy4zIDAgNjguNiAtNDkuMSAxMTYuNmw0OS4xIDQ5LjFxNDggLTQ5LjEgMTE2LjEgLTQ5LjEgNjYuOSAwIDExMy44IDQ2LjlsMTE2LjEgMTE2cTQ2LjggNDYuOSA0Ni44IDExMy45eiIvPjwvc3ZnPg==);
-                    &:hover, &:focus, &:active{
-                        background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI5MjguNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoNDAsMTA5LDE2OCkiIGQ9Ik04MTIuNSA2NzguNnEwIC0yMi4zIC0xNS42IC0zOGwtMTE2LjEgLTExNnEtMTUuNiAtMTUuNyAtMzcuOSAtMTUuNyAtMjMuNSAwIC00MC4yIDE3LjkgMS43IDEuNyAxMC42IDEwLjN0MTIgMTIgOC4zIDEwLjYgNy4zIDE0LjIgMiAxNS40cTAgMjIuMyAtMTUuNyAzNy45dC0zNy45IDE1LjdxLTguNCAwIC0xNS40IC0ydC0xNC4yIC03LjMgLTEwLjYgLTguMyAtMTIgLTEyIC0xMC4zIC0xMC42cS0xOC40IDE3LjMgLTE4LjQgNDAuNyAwIDIyLjMgMTUuNiAzOGwxMTUgMTE1LjVxMTUgMTUgMzcuOSAxNSAyMi4zIDAgMzcuOSAtMTQuNUw3OTYuOSA3MTZxMTUuNiAtMTUuNyAxNS42IC0zNy40ek00MjAuMiAyODUuMnEwIC0yMi40IC0xNS42IC0zOGwtMTE1IC0xMTUuNVEyNzQgMTE2LjEgMjUxLjcgMTE2LjFxLTIxLjggMCAtMzggMTVsLTgyIDgxLjVxLTE1LjYgMTUuNiAtMTUuNiAzNy40IDAgMjIuMyAxNS42IDM3LjlMMjQ3LjggNDA0cTE1IDE1LjEgMzcuOSAxNS4xIDIzLjUgMCA0MC4yIC0xNy4zIC0xLjcgLTEuNyAtMTAuNiAtMTAuM3QtMTIgLTEyIC04LjQgLTEwLjYgLTcuMiAtMTQuMyAtMiAtMTUuM3EwIC0yMi4zIDE1LjYgLTM4dDM4IC0xNS42cTguNCAwIDE1LjMgMnQxNC4zIDcuMiAxMC42IDguNCAxMiAxMiAxMC4zIDEwLjZxMTguNCAtMTcuMyAxOC40IC00MC43em00OTkuNCAzOTMuNHEwIDY2LjkgLTQ3LjQgMTEzLjNsLTgyIDgxLjRxLTQ2LjMgNDYuMyAtMTEzLjMgNDYuMyAtNjcuNSAwIC0xMTMuOCAtNDcuNGwtMTE1IC0xMTUuNVE0MDEuOCA3MTAuNCA0MDEuOCA2NDMuNHEwIC02OC42IDQ5LjEgLTExNi42bC00OS4xIC00OS4xcS00OCA0OS4xIC0xMTYuMSA0OS4xIC02Ni45IDAgLTExMy44IC00Ni45TDU1LjggMzYzLjhROC45IDMxNyA4LjkgMjUwVDU2LjQgMTM2LjdsODIgLTgxLjVRMTg0LjcgOC45IDI1MS43IDguOXE2Ny41IDAgMTEzLjggNDcuNWwxMTUgMTE1LjVxNDYuMyA0Ni4zIDQ2LjMgMTEzLjMgMCA2OC42IC00OS4xIDExNi42bDQ5LjEgNDkuMXE0OCAtNDkuMSAxMTYuMSAtNDkuMSA2Ni45IDAgMTEzLjggNDYuOWwxMTYuMSAxMTZxNDYuOCA0Ni45IDQ2LjggMTEzLjl6Ii8+PC9zdmc+);
-                    }
-                }
-                &.top{
+                &.top {
                    margin-top: 1em;
-                    position: relative;
-                    background-size: @font-size-default;
-                    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4MzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDEwNSwxMDUsMTA1KSIgZD0iTTQxNi4yNSAxMDAxcS02NSAwIC0xMTAuNjI1IC00NS42MjV0LTQ1LjYyNSAtMTEwLjYyNWwwIC0yNDcuNXEtNDUgNDAgLTEwOC4xMjUgMzguMTI1dC0xMDUuNjI1IC00NC4zNzVxLTQ2LjI1IC00Ni4yNSAtNDYuMjUgLTExMC42MjV0NDYuMjUgLTExMC42MjVsMzcwIC0zNzEuMjUgMzcxLjI1IDM3MS4yNXE0Ni4yNSA0Ni4yNSA0Ni4yNSAxMTAuNjI1dC00Ni4yNSAxMTAuNjI1cS00Mi41IDQyLjUgLTEwNi4yNSA0NC4zNzV0LTEwOC43NSAtMzguMTI1bDAgMjQ3LjVxMCA2NSAtNDUuNjI1IDExMC42MjV0LTExMC42MjUgNDUuNjI1em0tNTEuMjUgLTY1NWwwIDQ5OC43NXEwIDIxLjI1IDE1IDM2Ljg3NXQzNi4yNSAxNS42MjUgMzYuODc1IC0xNS42MjUgMTUuNjI1IC0zNi44NzVsMCAtNDk4Ljc1bDE3MS4yNSAxNzEuMjVxMTUgMTUgMzYuODc1IDE1dDM2Ljg3NSAtMTUgMTUgLTM2Ljg3NSAtMTUgLTM2Ljg3NWwtMjk3LjUgLTI5Ny41IC0yOTcuNSAyOTcuNXEtMTUgMTUgLTE1IDM2Ljg3NXQxNSAzNi44NzUgMzYuODc1IDE1IDM2Ljg3NSAtMTV6Ii8+PC9zdmc+);
-                    &:hover, &:focus, &:active{
-                        background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4MzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDQwLDEwOSwxNjgpIiBkPSJNNDE2LjI1IDEwMDFxLTY1IDAgLTExMC42MjUgLTQ1LjYyNXQtNDUuNjI1IC0xMTAuNjI1bDAgLTI0Ny41cS00NSA0MCAtMTA4LjEyNSAzOC4xMjV0LTEwNS42MjUgLTQ0LjM3NXEtNDYuMjUgLTQ2LjI1IC00Ni4yNSAtMTEwLjYyNXQ0Ni4yNSAtMTEwLjYyNWwzNzAgLTM3MS4yNSAzNzEuMjUgMzcxLjI1cTQ2LjI1IDQ2LjI1IDQ2LjI1IDExMC42MjV0LTQ2LjI1IDExMC42MjVxLTQyLjUgNDIuNSAtMTA2LjI1IDQ0LjM3NXQtMTA4Ljc1IC0zOC4xMjVsMCAyNDcuNXEwIDY1IC00NS42MjUgMTEwLjYyNXQtMTEwLjYyNSA0NS42MjV6bS01MS4yNSAtNjU1bDAgNDk4Ljc1cTAgMjEuMjUgMTUgMzYuODc1dDM2LjI1IDE1LjYyNSAzNi44NzUgLTE1LjYyNSAxNS42MjUgLTM2Ljg3NWwwIC00OTguNzVsMTcxLjI1IDE3MS4yNXExNSAxNSAzNi44NzUgMTV0MzYuODc1IC0xNSAxNSAtMzYuODc1IC0xNSAtMzYuODc1bC0yOTcuNSAtMjk3LjUgLTI5Ny41IDI5Ny41cS0xNSAxNSAtMTUgMzYuODc1dDE1IDM2Ljg3NSAzNi44NzUgMTUgMzYuODc1IC0xNXoiLz48L3N2Zz4=);
-                    }
-                }
-                &.plugin_bookcreator_addtobook{
-                    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI5MjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDEwNSwxMDUsMTA1KSIgZD0iTTQ2NCAyMjEuNXE1IC01IDE0LjUgLTEydDQ3IC0yNi41IDgzLjUgLTM0LjUgMTI3IC0yNyAxNzUgLTEybDAgNjcwcS05NSAwIC0xNzYgMTEuNXQtMTI4LjUgMjcuNSAtODEuNSAzMyAtNDcgMjlsLTE0IDEwcS00IC00IC0xMyAtMTEuNXQtNDYuNSAtMjYuNSAtODMgLTM0IC0xMjcgLTI3IC0xNzYuNSAtMTJsMCAtNjcwcTk0IDAgMTc0IDExLjV0MTI4IDI3LjUgODIuNSAzMyA0OC41IDI5em0tMzM0IDBsMCA0NTBxMTcyIDE0IDI3OSA3MWwwIC00NDlxLTExMCAtNTggLTI3OSAtNzJ6bTY2OSA0NTBsMCAtNDUwcS0xNjggMTQgLTI3OCA3MmwwIDQ0OXExMDggLTU3IDI3OCAtNzF6Ii8+PC9zdmc+);
-                    &:hover, &:focus, &:active{
-                        background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI5MjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDQwLDEwOSwxNjgpIiBkPSJNNDY0IDIyMS41cTUgLTUgMTQuNSAtMTJ0NDcgLTI2LjUgODMuNSAtMzQuNSAxMjcgLTI3IDE3NSAtMTJsMCA2NzBxLTk1IDAgLTE3NiAxMS41dC0xMjguNSAyNy41IC04MS41IDMzIC00NyAyOWwtMTQgMTBxLTQgLTQgLTEzIC0xMS41dC00Ni41IC0yNi41IC04MyAtMzQgLTEyNyAtMjcgLTE3Ni41IC0xMmwwIC02NzBxOTQgMCAxNzQgMTEuNXQxMjggMjcuNSA4Mi41IDMzIDQ4LjUgMjl6bS0zMzQgMGwwIDQ1MHExNzIgMTQgMjc5IDcxbDAgLTQ0OXEtMTEwIC01OCAtMjc5IC03MnptNjY5IDQ1MGwwIC00NTBxLTE2OCAxNCAtMjc4IDcybDAgNDQ5cTEwOCAtNTcgMjc4IC03MXoiLz48L3N2Zz4=);
-                    }
-                }
-                &.export_pdf{
-                    background-size: @font-size-default auto;
-                    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4NTcuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoMTA1LDEwNSwxMDUpIiBkPSJNODE5LjIgMjEyLjFxMTUuNiAxNS42IDI2LjggNDIuNHQxMS4xIDQ5LjF2NjQyLjhxMCAyMi40IC0xNS42IDM4dC0zNy45IDE1LjZoLTc1MHEtMjIuMyAwIC0zOCAtMTUuNlQwIDk0Ni40VjUzLjZxMCAtMjIuNCAxNS42IC0zOFQ1My42IDBoNTAwcTIyLjMgMCA0OS4xIDExLjJ0NDIuNCAyNi43ek01NzEuNCA3NS45djIwOS44aDIwOS45UTc3NS43IDI2OS41IDc2OSAyNjIuOEw1OTQuMyA4OC4ycS02LjcgLTYuNyAtMjIuOSAtMTIuM3ptMjE0LjMgODUyLjdWMzU3LjFINTUzLjZxLTIyLjMgMCAtMzggLTE1LjZUNTAwIDMwMy42VjcxLjRINzEuNHY4NTcuMmg3MTQuM3pNNDk4LjkgNTk3LjdxMTguNCAxNC41IDQ2LjkgMzEuMlE1NzguNyA2MjUgNjExIDYyNXE4Mi4xIDAgOTguOCAyNy4zIDkgMTIuMyAxLjEgMjkuMSAwIC41IC0uNSAxLjFsLTEuMSAxLjF2LjZxLTMuNCAyMS4yIC0zOS43IDIxLjIgLTI2LjcgMCAtNjQuMSAtMTEuMnQtNzIuNiAtMjkuNlE0MDkuNiA2NzggMzE0LjIgNzEwLjkgMjI4LjggODU3LjEgMTc5LjEgODU3LjFxLTguMyAwIC0xNS42IC0zLjlsLTEzLjQgLTYuN3EtLjUgLS41IC0zLjMgLTIuOCAtNS42IC01LjUgLTMuNCAtMjAgNSAtMjIuNCAzMS4zIC01MS4xdDczLjYgLTUzLjlxNy44IC01IDEyLjkgMy40IDEuMSAxLjEgMS4xIDIuMiAyOSAtNDcuNCA1OS43IC0xMDkuOSAzNy45IC03NS45IDU4IC0xNDYuMiAtMTMuNCAtNDUuOCAtMTcgLTg5dDMuNiAtNzEuMnE2LjIgLTIyLjMgMjMuNSAtMjIuM2gxMi4ycTEyLjkgMCAxOS42IDguNCAxMCAxMS43IDUgMzcuOSAtMS4xIDMuNCAtMi4yIDQuNSAuNSAxLjcgLjUgNC41djE2LjdxLTEuMSA2OC42IC03LjggMTA3LjEgMzAuNyA5MS42IDgxLjUgMTMyLjl6TTE3Ny41IDgyN3EyOSAtMTMuNCA3Ni40IC04OC4yIC0yOC41IDIyLjQgLTQ4LjggNDYuOVQxNzcuNSA4Mjd6TTM5OS42IDMxMy42cS04LjQgMjMuNSAtMS4yIDczLjcgLjYgLTMuOSAzLjkgLTI0LjYgMCAtMS43IDQgLTI0IC41IC0yLjIgMi4yIC00LjQgLS42IC0uNiAtLjYgLTEuMiAtLjUgLTEuMSAtLjUgLTEuNiAtLjYgLTEyLjMgLTcuMyAtMjAuMSAwIC41IC0uNSAxLjF2MS4xem0tNjkuMiAzNjguOXE3NS4zIC0zMC4yIDE1OC40IC00NS4yIC0xLjEgLS42IC03LjIgLTUuM3QtOC45IC03LjZxLTQyLjUgLTM3LjMgLTcwLjkgLTk4LjIgLTE1LjEgNDggLTQ2LjMgMTEwIC0xNi44IDMxLjIgLTI1LjEgNDYuM3ptMzYwLjQgLTlxLTEzLjMgLTEzLjMgLTc4LjEgLTEzLjMgNDIuNCAxNS42IDY5LjIgMTUuNiA3LjggMCAxMC4xIC0uNiAwIC0uNSAtMS4yIC0xLjd6Ii8+PC9zdmc+);
-                    &:hover, &:focus, &:active{
-                        background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4NTcuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoNDAsMTA5LDE2OCkiIGQ9Ik04MTkuMiAyMTIuMXExNS42IDE1LjYgMjYuOCA0Mi40dDExLjEgNDkuMXY2NDIuOHEwIDIyLjQgLTE1LjYgMzh0LTM3LjkgMTUuNmgtNzUwcS0yMi4zIDAgLTM4IC0xNS42VDAgOTQ2LjRWNTMuNnEwIC0yMi40IDE1LjYgLTM4VDUzLjYgMGg1MDBxMjIuMyAwIDQ5LjEgMTEuMnQ0Mi40IDI2Ljd6TTU3MS40IDc1Ljl2MjA5LjhoMjA5LjlRNzc1LjcgMjY5LjUgNzY5IDI2Mi44TDU5NC4zIDg4LjJxLTYuNyAtNi43IC0yMi45IC0xMi4zem0yMTQuMyA4NTIuN1YzNTcuMUg1NTMuNnEtMjIuMyAwIC0zOCAtMTUuNlQ1MDAgMzAzLjZWNzEuNEg3MS40djg1Ny4yaDcxNC4zek00OTguOSA1OTcuN3ExOC40IDE0LjUgNDYuOSAzMS4yUTU3OC43IDYyNSA2MTEgNjI1cTgyLjEgMCA5OC44IDI3LjMgOSAxMi4zIDEuMSAyOS4xIDAgLjUgLS41IDEuMWwtMS4xIDEuMXYuNnEtMy40IDIxLjIgLTM5LjcgMjEuMiAtMjYuNyAwIC02NC4xIC0xMS4ydC03Mi42IC0yOS42UTQwOS42IDY3OCAzMTQuMiA3MTAuOSAyMjguOCA4NTcuMSAxNzkuMSA4NTcuMXEtOC4zIDAgLTE1LjYgLTMuOWwtMTMuNCAtNi43cS0uNSAtLjUgLTMuMyAtMi44IC01LjYgLTUuNSAtMy40IC0yMCA1IC0yMi40IDMxLjMgLTUxLjF0NzMuNiAtNTMuOXE3LjggLTUgMTIuOSAzLjQgMS4xIDEuMSAxLjEgMi4yIDI5IC00Ny40IDU5LjcgLTEwOS45IDM3LjkgLTc1LjkgNTggLTE0Ni4yIC0xMy40IC00NS44IC0xNyAtODl0My42IC03MS4ycTYuMiAtMjIuMyAyMy41IC0yMi4zaDEyLjJxMTIuOSAwIDE5LjYgOC40IDEwIDExLjcgNSAzNy45IC0xLjEgMy40IC0yLjIgNC41IC41IDEuNyAuNSA0LjV2MTYuN3EtMS4xIDY4LjYgLTcuOCAxMDcuMSAzMC43IDkxLjYgODEuNSAxMzIuOXpNMTc3LjUgODI3cTI5IC0xMy40IDc2LjQgLTg4LjIgLTI4LjUgMjIuNCAtNDguOCA0Ni45VDE3Ny41IDgyN3pNMzk5LjYgMzEzLjZxLTguNCAyMy41IC0xLjIgNzMuNyAuNiAtMy45IDMuOSAtMjQuNiAwIC0xLjcgNCAtMjQgLjUgLTIuMiAyLjIgLTQuNCAtLjYgLS42IC0uNiAtMS4yIC0uNSAtMS4xIC0uNSAtMS42IC0uNiAtMTIuMyAtNy4zIC0yMC4xIDAgLjUgLS41IDEuMXYxLjF6bS02OS4yIDM2OC45cTc1LjMgLTMwLjIgMTU4LjQgLTQ1LjIgLTEuMSAtLjYgLTcuMiAtNS4zdC04LjkgLTcuNnEtNDIuNSAtMzcuMyAtNzAuOSAtOTguMiAtMTUuMSA0OCAtNDYuMyAxMTAgLTE2LjggMzEuMiAtMjUuMSA0Ni4zem0zNjAuNCAtOXEtMTMuMyAtMTMuMyAtNzguMSAtMTMuMyA0Mi40IDE1LjYgNjkuMiAxNS42IDcuOCAwIDEwLjEgLS42IDAgLS41IC0xLjIgLTEuN3oiLz48L3N2Zz4=);
-                    }
-                }
-                &.show{
-                    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4NTcuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoMTA1LDEwNSwxMDUpIiBkPSJNODE5LjIgMjEyLjFxMTUuNiAxNS42IDI2LjggNDIuNHQxMS4xIDQ5LjF2NjQyLjhxMCAyMi40IC0xNS42IDM4dC0zNy45IDE1LjZoLTc1MHEtMjIuMyAwIC0zOCAtMTUuNlQwIDk0Ni40VjUzLjZxMCAtMjIuNCAxNS42IC0zOFQ1My42IDBoNTAwcTIyLjMgMCA0OS4xIDExLjJ0NDIuNCAyNi43ek01NzEuNCA3NS45djIwOS44aDIwOS45UTc3NS43IDI2OS41IDc2OSAyNjIuOEw1OTQuMyA4OC4ycS02LjcgLTYuNyAtMjIuOSAtMTIuM3ptMjE0LjMgODUyLjdWMzU3LjFINTUzLjZxLTIyLjMgMCAtMzggLTE1LjZUNTAwIDMwMy42VjcxLjRINzEuNHY4NTcuMmg3MTQuM3pNMjE0LjMgNDQ2LjRxMCAtNy44IDUgLTEyLjh0MTIuOCAtNUg2MjVxNy44IDAgMTIuOCA1dDUuMSAxMi44djM1LjdxMCA3LjkgLTUuMSAxMi45dC0xMi44IDVIMjMyLjFxLTcuOCAwIC0xMi44IC01dC01IC0xMi45di0zNS43em00MTAuNyAxMjVxNy44IDAgMTIuOCA1LjF0NS4xIDEyLjhWNjI1cTAgNy44IC01LjEgMTIuOHQtMTIuOCA1LjFIMjMyLjFxLTcuOCAwIC0xMi44IC01LjF0LTUgLTEyLjh2LTM1LjdxMCAtNy44IDUgLTEyLjh0MTIuOCAtNS4xSDYyNXptMCAxNDIuOXE3LjggMCAxMi44IDV0NS4xIDEyLjh2MzUuOHEwIDcuOCAtNS4xIDEyLjh0LTEyLjggNUgyMzIuMXEtNy44IDAgLTEyLjggLTV0LTUgLTEyLjh2LTM1LjhxMCAtNy44IDUgLTEyLjh0MTIuOCAtNUg2MjV6Ii8+PC9zdmc+);
-                    &:hover, &:focus, &:active{
-                        background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4NTcuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoNDAsMTA5LDE2OCkiIGQ9Ik04MTkuMiAyMTIuMXExNS42IDE1LjYgMjYuOCA0Mi40dDExLjEgNDkuMXY2NDIuOHEwIDIyLjQgLTE1LjYgMzh0LTM3LjkgMTUuNmgtNzUwcS0yMi4zIDAgLTM4IC0xNS42VDAgOTQ2LjRWNTMuNnEwIC0yMi40IDE1LjYgLTM4VDUzLjYgMGg1MDBxMjIuMyAwIDQ5LjEgMTEuMnQ0Mi40IDI2Ljd6TTU3MS40IDc1Ljl2MjA5LjhoMjA5LjlRNzc1LjcgMjY5LjUgNzY5IDI2Mi44TDU5NC4zIDg4LjJxLTYuNyAtNi43IC0yMi45IC0xMi4zem0yMTQuMyA4NTIuN1YzNTcuMUg1NTMuNnEtMjIuMyAwIC0zOCAtMTUuNlQ1MDAgMzAzLjZWNzEuNEg3MS40djg1Ny4yaDcxNC4zek0yMTQuMyA0NDYuNHEwIC03LjggNSAtMTIuOHQxMi44IC01SDYyNXE3LjggMCAxMi44IDV0NS4xIDEyLjh2MzUuN3EwIDcuOSAtNS4xIDEyLjl0LTEyLjggNUgyMzIuMXEtNy44IDAgLTEyLjggLTV0LTUgLTEyLjl2LTM1Ljd6bTQxMC43IDEyNXE3LjggMCAxMi44IDUuMXQ1LjEgMTIuOFY2MjVxMCA3LjggLTUuMSAxMi44dC0xMi44IDUuMUgyMzIuMXEtNy44IDAgLTEyLjggLTUuMXQtNSAtMTIuOHYtMzUuN3EwIC03LjggNSAtMTIuOHQxMi44IC01LjFINjI1em0wIDE0Mi45cTcuOCAwIDEyLjggNXQ1LjEgMTIuOHYzNS44cTAgNy44IC01LjEgMTIuOHQtMTIuOCA1SDIzMi4xcS03LjggMCAtMTIuOCAtNXQtNSAtMTIuOHYtMzUuOHEwIC03LjggNSAtMTIuOHQxMi44IC01SDYyNXoiLz48L3N2Zz4=);
-                    }
                }
            }
-
        }
    }

-    &:hover{
-         ul{
-             background-color: #fff;
-             box-shadow: @box-shadow-offset;
-             li{
-                 &.plugin_move_page{
-                     a{
-                         color: @color-nav;
-                         background-position: 95% center;
-                         opacity: .8;
-                         &:hover, &:focus, &:active{
-                             opacity: 1;
-                             *{
-                                 opacity: 1;
-                             }
-                             color: @color-nav-hover;
-                             background-color: #fff;
-                         }
-                     }
-                 }
-                 a{
-                     &.source, &.revs, &.backlink, &.plugin_bookcreator_addtobook, &.export_pdf, &.top, &.show {
-                         color: @color-nav;
-                         background-position: 95% center;
-                         opacity: .8;
-                         &:hover, &:focus, &:active{
-                             opacity: 1;
-                             *{
-                                 opacity: 1;
-                             }
-                             color: @color-nav-hover;
-                             background-color: #fff;
-                         }
-                     }
-                     &.plugin_bookcreator_addtobook{
-                         background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI5MjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDEwNSwxMDUsMTA1KSIgZD0iTTQ2NCAyMjEuNXE1IC01IDE0LjUgLTEydDQ3IC0yNi41IDgzLjUgLTM0LjUgMTI3IC0yNyAxNzUgLTEybDAgNjcwcS05NSAwIC0xNzYgMTEuNXQtMTI4LjUgMjcuNSAtODEuNSAzMyAtNDcgMjlsLTE0IDEwcS00IC00IC0xMyAtMTEuNXQtNDYuNSAtMjYuNSAtODMgLTM0IC0xMjcgLTI3IC0xNzYuNSAtMTJsMCAtNjcwcTk0IDAgMTc0IDExLjV0MTI4IDI3LjUgODIuNSAzMyA0OC41IDI5em0tMzM0IDBsMCA0NTBxMTcyIDE0IDI3OSA3MWwwIC00NDlxLTExMCAtNTggLTI3OSAtNzJ6bTY2OSA0NTBsMCAtNDUwcS0xNjggMTQgLTI3OCA3MmwwIDQ0OXExMDggLTU3IDI3OCAtNzF6Ii8+PC9zdmc+);
-                         &:hover, &:focus, &:active{
-                             background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI5MjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0icmdiKDQwLDEwOSwxNjgpIiBkPSJNNDY0IDIyMS41cTUgLTUgMTQuNSAtMTJ0NDcgLTI2LjUgODMuNSAtMzQuNSAxMjcgLTI3IDE3NSAtMTJsMCA2NzBxLTk1IDAgLTE3NiAxMS41dC0xMjguNSAyNy41IC04MS41IDMzIC00NyAyOWwtMTQgMTBxLTQgLTQgLTEzIC0xMS41dC00Ni41IC0yNi41IC04MyAtMzQgLTEyNyAtMjcgLTE3Ni41IC0xMmwwIC02NzBxOTQgMCAxNzQgMTEuNXQxMjggMjcuNSA4Mi41IDMzIDQ4LjUgMjl6bS0zMzQgMGwwIDQ1MHExNzIgMTQgMjc5IDcxbDAgLTQ0OXEtMTEwIC01OCAtMjc5IC03MnptNjY5IDQ1MGwwIC00NTBxLTE2OCAxNCAtMjc4IDcybDAgNDQ5cTEwOCAtNTcgMjc4IC03MXoiLz48L3N2Zz4=);
-                         }
+    &:hover {
+        ul {
+            box-shadow: @box-shadow; // @box-shadow-offset;
+            background-color: @ini_background_content;
+            border-color: @wikiicons-border;

-                     }
-                     &.export_pdf{
-                         background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4NTcuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoMTA1LDEwNSwxMDUpIiBkPSJNODE5LjIgMjEyLjFxMTUuNiAxNS42IDI2LjggNDIuNHQxMS4xIDQ5LjF2NjQyLjhxMCAyMi40IC0xNS42IDM4dC0zNy45IDE1LjZoLTc1MHEtMjIuMyAwIC0zOCAtMTUuNlQwIDk0Ni40VjUzLjZxMCAtMjIuNCAxNS42IC0zOFQ1My42IDBoNTAwcTIyLjMgMCA0OS4xIDExLjJ0NDIuNCAyNi43ek01NzEuNCA3NS45djIwOS44aDIwOS45UTc3NS43IDI2OS41IDc2OSAyNjIuOEw1OTQuMyA4OC4ycS02LjcgLTYuNyAtMjIuOSAtMTIuM3ptMjE0LjMgODUyLjdWMzU3LjFINTUzLjZxLTIyLjMgMCAtMzggLTE1LjZUNTAwIDMwMy42VjcxLjRINzEuNHY4NTcuMmg3MTQuM3pNNDk4LjkgNTk3LjdxMTguNCAxNC41IDQ2LjkgMzEuMlE1NzguNyA2MjUgNjExIDYyNXE4Mi4xIDAgOTguOCAyNy4zIDkgMTIuMyAxLjEgMjkuMSAwIC41IC0uNSAxLjFsLTEuMSAxLjF2LjZxLTMuNCAyMS4yIC0zOS43IDIxLjIgLTI2LjcgMCAtNjQuMSAtMTEuMnQtNzIuNiAtMjkuNlE0MDkuNiA2NzggMzE0LjIgNzEwLjkgMjI4LjggODU3LjEgMTc5LjEgODU3LjFxLTguMyAwIC0xNS42IC0zLjlsLTEzLjQgLTYuN3EtLjUgLS41IC0zLjMgLTIuOCAtNS42IC01LjUgLTMuNCAtMjAgNSAtMjIuNCAzMS4zIC01MS4xdDczLjYgLTUzLjlxNy44IC01IDEyLjkgMy40IDEuMSAxLjEgMS4xIDIuMiAyOSAtNDcuNCA1OS43IC0xMDkuOSAzNy45IC03NS45IDU4IC0xNDYuMiAtMTMuNCAtNDUuOCAtMTcgLTg5dDMuNiAtNzEuMnE2LjIgLTIyLjMgMjMuNSAtMjIuM2gxMi4ycTEyLjkgMCAxOS42IDguNCAxMCAxMS43IDUgMzcuOSAtMS4xIDMuNCAtMi4yIDQuNSAuNSAxLjcgLjUgNC41djE2LjdxLTEuMSA2OC42IC03LjggMTA3LjEgMzAuNyA5MS42IDgxLjUgMTMyLjl6TTE3Ny41IDgyN3EyOSAtMTMuNCA3Ni40IC04OC4yIC0yOC41IDIyLjQgLTQ4LjggNDYuOVQxNzcuNSA4Mjd6TTM5OS42IDMxMy42cS04LjQgMjMuNSAtMS4yIDczLjcgLjYgLTMuOSAzLjkgLTI0LjYgMCAtMS43IDQgLTI0IC41IC0yLjIgMi4yIC00LjQgLS42IC0uNiAtLjYgLTEuMiAtLjUgLTEuMSAtLjUgLTEuNiAtLjYgLTEyLjMgLTcuMyAtMjAuMSAwIC41IC0uNSAxLjF2MS4xem0tNjkuMiAzNjguOXE3NS4zIC0zMC4yIDE1OC40IC00NS4yIC0xLjEgLS42IC03LjIgLTUuM3QtOC45IC03LjZxLTQyLjUgLTM3LjMgLTcwLjkgLTk4LjIgLTE1LjEgNDggLTQ2LjMgMTEwIC0xNi44IDMxLjIgLTI1LjEgNDYuM3ptMzYwLjQgLTlxLTEzLjMgLTEzLjMgLTc4LjEgLTEzLjMgNDIuNCAxNS42IDY5LjIgMTUuNiA3LjggMCAxMC4xIC0uNiAwIC0uNSAtMS4yIC0xLjd6Ii8+PC9zdmc+);
-                         &:hover, &:focus, &:active{
-                             background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMDAiIHdpZHRoPSI4NTcuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoNDAsMTA5LDE2OCkiIGQ9Ik04MTkuMiAyMTIuMXExNS42IDE1LjYgMjYuOCA0Mi40dDExLjEgNDkuMXY2NDIuOHEwIDIyLjQgLTE1LjYgMzh0LTM3LjkgMTUuNmgtNzUwcS0yMi4zIDAgLTM4IC0xNS42VDAgOTQ2LjRWNTMuNnEwIC0yMi40IDE1LjYgLTM4VDUzLjYgMGg1MDBxMjIuMyAwIDQ5LjEgMTEuMnQ0Mi40IDI2Ljd6TTU3MS40IDc1Ljl2MjA5LjhoMjA5LjlRNzc1LjcgMjY5LjUgNzY5IDI2Mi44TDU5NC4zIDg4LjJxLTYuNyAtNi43IC0yMi45IC0xMi4zem0yMTQuMyA4NTIuN1YzNTcuMUg1NTMuNnEtMjIuMyAwIC0zOCAtMTUuNlQ1MDAgMzAzLjZWNzEuNEg3MS40djg1Ny4yaDcxNC4zek00OTguOSA1OTcuN3ExOC40IDE0LjUgNDYuOSAzMS4yUTU3OC43IDYyNSA2MTEgNjI1cTgyLjEgMCA5OC44IDI3LjMgOSAxMi4zIDEuMSAyOS4xIDAgLjUgLS41IDEuMWwtMS4xIDEuMXYuNnEtMy40IDIxLjIgLTM5LjcgMjEuMiAtMjYuNyAwIC02NC4xIC0xMS4ydC03Mi42IC0yOS42UTQwOS42IDY3OCAzMTQuMiA3MTAuOSAyMjguOCA4NTcuMSAxNzkuMSA4NTcuMXEtOC4zIDAgLTE1LjYgLTMuOWwtMTMuNCAtNi43cS0uNSAtLjUgLTMuMyAtMi44IC01LjYgLTUuNSAtMy40IC0yMCA1IC0yMi40IDMxLjMgLTUxLjF0NzMuNiAtNTMuOXE3LjggLTUgMTIuOSAzLjQgMS4xIDEuMSAxLjEgMi4yIDI5IC00Ny40IDU5LjcgLTEwOS45IDM3LjkgLTc1LjkgNTggLTE0Ni4yIC0xMy40IC00NS44IC0xNyAtODl0My42IC03MS4ycTYuMiAtMjIuMyAyMy41IC0yMi4zaDEyLjJxMTIuOSAwIDE5LjYgOC40IDEwIDExLjcgNSAzNy45IC0xLjEgMy40IC0yLjIgNC41IC41IDEuNyAuNSA0LjV2MTYuN3EtMS4xIDY4LjYgLTcuOCAxMDcuMSAzMC43IDkxLjYgODEuNSAxMzIuOXpNMTc3LjUgODI3cTI5IC0xMy40IDc2LjQgLTg4LjIgLTI4LjUgMjIuNCAtNDguOCA0Ni45VDE3Ny41IDgyN3pNMzk5LjYgMzEzLjZxLTguNCAyMy41IC0xLjIgNzMuNyAuNiAtMy45IDMuOSAtMjQuNiAwIC0xLjcgNCAtMjQgLjUgLTIuMiAyLjIgLTQuNCAtLjYgLS42IC0uNiAtMS4yIC0uNSAtMS4xIC0uNSAtMS42IC0uNiAtMTIuMyAtNy4zIC0yMC4xIDAgLjUgLS41IDEuMXYxLjF6bS02OS4yIDM2OC45cTc1LjMgLTMwLjIgMTU4LjQgLTQ1LjIgLTEuMSAtLjYgLTcuMiAtNS4zdC04LjkgLTcuNnEtNDIuNSAtMzcuMyAtNzAuOSAtOTguMiAtMTUuMSA0OCAtNDYuMyAxMTAgLTE2LjggMzEuMiAtMjUuMSA0Ni4zem0zNjAuNCAtOXEtMTMuMyAtMTMuMyAtNzguMSAtMTMuMyA0Mi40IDE1LjYgNjkuMiAxNS42IDcuOCAwIDEwLjEgLS42IDAgLS41IC0xLjIgLTEuN3oiLz48L3N2Zz4=);
-                         }
+            li {
+                color: @ini_existing;

-                     }
+                a {
+                    box-shadow: none;
+                    background-image: none;
+                    border-color: transparent;
+                    color: inherit;
+                    padding: 2px 0 2px 2px;

-                 }
-             }
-         }
-     }
-}
+                    svg {
+                        border: solid 1px transparent;
+                        border-radius: @ini_default_border_radius;
+                        fill: @ini_existing;
+                        transition: @transition background-color, @transition border-color, @transition fill;
+                    }

-/* overwrite do:backlink */
-.mode_backlink #dokuwiki__pagetools ul li a.backlink{
-    background-position: 95% center;
-}
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        svg {
+                            background-color: @ini_existing;
+                            border-color: @ini_existing;
+                            fill: @ini_background_content;
+                        }
+                    }

-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* max-width: 1023px */
-
-@media @screen_max-md {
-    nav#dokuwiki__pagetools {
-        right: 8px;
+                    span {
+                        position: static;
+                        width: auto;
+                        height: auto;
+                        margin: auto;
+                    }
+                }
+            }
+        }
    }
 }
--- a/css/area_nav-usertools.less
+++ b/css/area_nav-usertools.less
@ -16,60 +16,172 @@
    ul {
        float: right;
        padding: 0;
-        margin: @very-small-spacing -(@very-small-spacing) 0 0;
+        margin: (@very-small-spacing * 2) -.25rem 0 0;

        li {
            .btn-usertools-wrapper(); // uniform li
            .btn-usertools-num();

            float: right;
+            min-height: 28px;

            > strong,
            > a {
                display: block;
                width: auto;
-                min-height: 2em;
-                border: 1px solid @color-border;
-                border-radius: @border-radius;
-                color: @color-nav;
+                min-height: @toggle-size;
+                overflow: hidden;
+                border: 1px solid @wikiicons-border;
+                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
                text-align: center;
                margin: 0;
-            }

-            &.noopentasks {
-                strong {
-                    background-color: @color-site-bg;
+                @media @screen_only-lg {
+                    padding-top: .14rem;
                }

-                .num {
-                    background-color: @color-border;
-                    color: @color-nav;
+                @media @screen_max-xxlg {
+                    min-height: 28px;
+                }
+
+                @media @screen_max-md {
+                    min-height: @toggle-size;
                }
            }

            &.user {
-                border: 1px solid @color-border;
-                border-radius: @border-radius;
-                padding: .3em .25rem;
+                @space-min-xxlg: .35rem;
+                @space-max-xxlg: .4rem;
+                @space-max-xlg: .5rem;
+                @space-max-md: .35rem;

-                bdi {
-                    color: @color-nav;
-                    display: inline-block;
-                    padding-top: 1px;
+                position: relative;
+                display: table-cell;
+                background-color: @ini_background;
+                border: solid 1px @noopentasks-border;//@ini_border_light;
+                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                color: @ini_text_webframe;
+                padding-right: .3rem;
+
+                @media @screen_min-xxlg {
+                    padding-top: @space-min-xxlg;
                }

-                > bdi:first-of-type {
-                    .fontello();
-                    .icon-user();
+                @media @screen_max-xxlg {
+                    padding-top: @space-max-xxlg;
+                }
+
+                @media @screen_max-xlg {
+                    padding-top: @space-max-xlg;
+                }
+
+                @media @screen_max-md {
+                    min-height: @toggle-size;
+                    padding-top: @space-max-md;
+                }
+
+                > a {
+                    .display-flex();
+                    .align-items();
+
+                    position: relative;
+                    min-height: 26px;
+                    overflow: visible;
+                    background: @ini_nav_menu_hover_bg; // for removing bg-image
+                    border: 0 none;
+                    color: @ini_nav_menu_hover_color;
+                    text-indent: 0;
+                    font-size: inherit;
+                    margin-right: -.3rem;
+                    padding: 0 .2em 0 0;
+
+                    @media @screen_min-xxlg {
+                        margin-top: -(@space-min-xxlg);
+                    }
+
+                    @media @screen_max-xxlg {
+                        margin-top: -(@space-max-xxlg);
+                    }
+
+                    @media @screen_max-xlg {
+                        margin-top: -(@space-max-xlg);
+                    }
+
+                    @media @screen_max-md {
+                        min-height: (@toggle-size - .1);
+                        margin-top: -(@space-max-md);
+                    }

                    &::before {
-                        float: left;
-                        background: @color-nav;
-                        border: 4px solid @color-nav;
-                        border-radius: 50%;
-                        color: #fff;
-                        font-size: @font-size-small;
-                        margin: -2px 6px -2px 0;
+                        content: '';
+                        top: -1px;
+                        bottom: -1px;
+                        left: -1px;
+                        right: -1px;
+                        width: auto;
+                        opacity: 0;
+                        border: solid 1px @ini_nav_menu_hover_color;
+                        border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                        color: inherit;
+                        transform: none;
+                        //transition: @transition opacity;
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background-color: @ini_nav_menu_hover_color;
+                        border-color: @ini_nav_menu_hover_color;
+                        color: @ini_nav_menu_hover_bg;
+
+                        &::before {
+                            opacity: 1;
+                        }
+
+                        bdi,
+                        bdi:first-of-type {
+                            color: @ini_nav_menu_hover_bg;
+
+                            //&::before {
+                            //    color: inherit;
+                            //}
+                        }
+                    }
+                }
+
+                bdi {
+                    display: inline-block;
+                    color: inherit;
+                    transition: @transition color;
+                }
+
+                bdi:first-of-type {
+                    .fontello();
+                    .icon-user-circle();
+
+                    position: relative;
+                    margin: 0 0 0 .25rem;
+                    padding: 0 .1rem 0 1.3rem;
+
+                    &::before {
+                        position: absolute;
+                        left: -2px;
+                        font-size: 1.4rem;
+                        margin: 0;
+                        transition: @transition color;
+
+                        @media @screen_min-xxlg {
+                            top: -.25rem;
+                        }
+
+                        @media @screen_max-xxlg {
+                            top: -.2rem;
+                        }
+
+                        @media @screen_max-xxs {
+                            top: -.25rem;
+
+                        }
                    }
                }
            } // user
@ -92,8 +204,27 @@
                .prefix {
                    .btn-prefix();
                    .icon-clipboard();
+
+                    display: block;
+                    font-size: 1.2rem;
+                    text-align: center;
+                    margin-bottom: -1px;
                }
            } // user-task
+
+            &.noopentasks {
+                strong {
+                    background-color: @ini_background;
+                    border-color: @noopentasks-border;
+                    color: @ini_text_webframe;
+                }
+
+                .num {
+                    background-color: @noopentasks-border; // fix
+                    color: @noopentasks-color; // fix
+                    margin-top: 1px;
+                }
+            }
        } // li


@ -101,30 +232,27 @@
        a {
            .fontello();
            .hide-text-show-before();
+            .btn-hover();

            cursor: pointer;
-            background-color: #fff;
+            position: relative;
+            line-height: 1;
            text-decoration: none;
-            transition: @transition color, @transition background-color, @transition border-color;

-            &:hover,
-            &:active,
-            &:focus {
-                background-color: @button_color;
-                border-color: @button_background;
-                //-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
-                //box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
-                color: @button_background;
+            @media @screen_only-lg {
+                min-width: 2rem;
            }

            &::before {
+                .center-middle();
+
                content: "?";
+                cursor: pointer;
                display: block;
                width: 100%;
                box-sizing: border-box;
                font-size: @font-size-default + (@font-scale-factor * 4);
-                cursor: pointer;
-                margin: .2em 0 0;
+                line-height: 1;
            }

            /* icon register new user */
@ -147,7 +275,7 @@
                .icon-cog();

                &::before {
-                    margin-top: .18rem;
+                    vertical-align: top;
                }
            }
        } // a
--- a/css/area_search.less
+++ b/css/area_search.less
@ -0,0 +1,12 @@
+/**
+ * This file provides the design styles for the search results
+ *
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ */
+
+
+/* search hit in normal text */
+.dokuwiki .search_hit {
+    background-color: @ini_highlight;
+    color: @ini_highlight_text;
+}
--- a/css/area_sidebar-search.less
+++ b/css/area_sidebar-search.less
@ -5,35 +5,38 @@
 */

 .search.main-sidebar {
-;
    @main-ico-dummy: @font-size-big + @margin-small*2; //FIXME copied from area_main-sidebar-nav
-
    @icon-size: @page-header_height;
    @icon-search_font-size: @font-size-big;
+
    p.toggleSearch a,
    button[type="submit"] {
        .fontello();
        .hide-text-show-before();
        .icon-search();
+
        position: relative;
        width: @icon-size;
        min-height: @icon-size;
        overflow: visible;
        background-image: none;
-        background-color: transparent;
-        color: @color-nav;
+        background-color: transparent; // fix
+        border: solid 1px transparent;
        padding: 0;
        transition: @transition color, @transition background-color, @transition border-color;
+
        &:hover,
        &:focus,
        &:active {
-            background-color: @button_color;
-            border: solid 1px @button_background;
-            color: @button_background;
+            min-height: @icon-size;
+            background-color: @ini_button_color;
+            border: solid 1px @ini_button_background;
+
            &::after {
-                background-color: @button_background;
+                background-color: @ini_button_background;
            }
        }
+
        &::before {
            width: 100%;
            color: inherit;
@ -42,51 +45,91 @@
            margin: 0;
        }
    }
+
    p.toggleSearch {
        display: none;
        margin: -2px 0 0; // reverse transparent border and box-sizing of a child
        padding: 0;
+
+        @media @screen_max-xxlg {
+            margin-top: -1px;
+        }
+
        a {
            min-width: (@toggle-showsidebar_width + 0.1); /* must be a bit a wider than @toggle-showsidebar_width to hide right border */
            width: @main-ico-dummy;
-            border: solid 1px transparent;
-            border-bottom: solid 1px @color-border;
-            border-radius: @fix_border-radius 0 0 0;
+            border-radius: @fix_border-radius;
+            color: @ini_nav_menu_color;
            text-decoration: none;
            box-sizing: border-box;
-            &:hover,
-            &:focus,
-            &:active {
-                border-radius: @fix_border-radius 0 0 @fix_border-radius;
-            }
+
            &::before {
                position: absolute;
                top: 50%;
                left: 0;
+                color: inherit;
                text-align: center;
                margin-top: -(@icon-search_font-size / 2);
            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: @ini_nav_menu_hover_bg;
+                border-color: @ini_nav_menu_hover_color;
+                color: @ini_nav_menu_hover_color;
+            }
        }
    }
-    /* + + +  form  + + + */
+
+    button[type="submit"] {
+        position: absolute;
+        top: 1px;
+        bottom: 1px;
+        right: 0;
+        height: auto;
+        min-height: (@icon-size - .2);
+        color: @quicksearch-button-color;
+
+        &:hover,
+        &:focus,
+        &:active {
+            top: 0;
+            bottom: 0;
+            min-height: @icon-size;
+            background-color: @ini_button_color;
+            border: solid 1px @ini_button_background;
+            color: @ini_button_background;
+        }
+    }
+
+
+/* + + +  form  + + + */
    form {
+        position: relative;
        display: block;
        margin: 0 0 @margin-default;
+
        .no {
+            display: block;
+
            #qsearch__in {
                width: 100%;
                padding-left: 10px;
-                padding-right: (@icon-size + 10);
+                padding-right: @icon-size;
            }
        }
+
        input {
            min-height: @icon-size;
            box-sizing: border-box;
        }
+
        button[type="submit"] {
            border: solid 1px transparent;
-            border-right-color: @color-border;
+            border-right-color: @ini_border;
            margin-left: -(@icon-size);
+
            &::after {
                content: '';
                position: absolute;
@ -94,10 +137,32 @@
                bottom: 15%;
                width: 1px;
                left: -1px;
-                background-color: @color-border;
+                background-color: @ini_border;
                transition: @transition background-color;
            }
        }
+
+        div.ajax_qsearch {
+            box-shadow: none;
+            background-color: #FFF;
+            padding: 0;
+
+            strong,
+            ul li {
+                color: @quicksearch-button-color;
+                padding: .25rem .5rem;
+
+                * {
+                    color: inherit;
+                }
+            }
+
+            ul li {
+                &:nth-child(odd) {
+                    background-color: @suggestion-zebra;
+                }
+            }
+        }
    }

    #qsearch__out {
@ -106,23 +171,31 @@
        width: 100%;
    }
 }
+
+
+/* + + + + +  wide page content  + + + + + */
 .wide-content {
    .search.main-sidebar {
        p.toggleSearch {
+            position: relative;
+            z-index: 1;
            display: block;
            float: left;
            width: 100%;
        }
+
        form {
            input {
                border: 0 none;
            }
+
            .no {
                #qsearch__in {
                    width: 0;
                    padding: 0;
                    margin: 0;
                }
+
                button[type="submit"] {
                    display: none;
                }
--- a/css/area_tabs.less
+++ b/css/area_tabs.less
@ -0,0 +1,39 @@
+/**
+ * This file provides styles for tab boxes
+ */
+
+
+/* + + + + +  tabs  + + + + + */
+
+#dokuwiki__content {
+    ul.tabs {
+        li:not([class~="active"]) {
+            strong,
+            a {
+                color: @ini_text_neu;
+                transition: @transition background-color, @transition color;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                color: @ini_text;
+            }
+        }
+    }
+
+    .tabs > ul {
+        li:not([class~="active"]) {
+            a {
+                color: @ini_text_neu;
+                transition: @transition background-color, @transition color;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                color: @ini_text;
+            }
+        }
+    }
+}
--- a/Show more
+++ b/Show more