diff --git a/css/area_content.less b/css/area_content.less
index 4c1b87b..ad90afc 100755
--- a/css/area_content.less
+++ b/css/area_content.less
@@ -5,11 +5,8 @@
  */
 
 
-.content .row > .col-xs-12{
-    box-shadow: __box_shadow__;
+.content .row {
+    > .col-xs-12 {
+        box-shadow: @box-shadow;
+    }
 }
-
-
-
-
-
diff --git a/css/area_footer.less b/css/area_footer.less
index 1fe8498..9edb4c2 100755
--- a/css/area_footer.less
+++ b/css/area_footer.less
@@ -9,6 +9,17 @@
 /* no print */
 
 @media screen {
+    .page-footer {
+        background: @background_page-header;
+        border-top: 1px solid @color-border;
+        font-size: @font-size-default;
+        padding: @margin-small (@margin-big - .5);
+
+        bdi {
+            font-weight: bold;
+        }
+    }
+
     #dokuwiki__footer {
         .main-footer {
             position: relative;
@@ -17,10 +28,7 @@
 
         p {
             font-size: @font-size-default;
-        }
-
-        bdi {
-            font-weight: bold;
+            margin: 0;
         }
     }
 }
@@ -31,7 +39,6 @@
 
 @media @screen_min-md {
     #dokuwiki__footer {
-
         .col-xs-12 {
             float: right;
             width: 73%;
@@ -49,7 +56,6 @@
 
 @media @screen_max-md {
     #dokuwiki__footer {
-
         .main-footer {
             padding: @margin-default (@margin-big - .5);
         }
diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less
index be26926..4970a5a 100755
--- a/css/area_nav-breadcrumb.less
+++ b/css/area_nav-breadcrumb.less
@@ -5,112 +5,152 @@
  */
 
 .breadcrumbs {
-    padding: 2rem 2rem 1rem;
+    padding: @margin-small 1.8rem;
     border-bottom: 1px solid @color-border;
 
-    > p{
+    > p {
         font-size: .83rem;
         margin: 0;
-        *{
+
+        * {
             font-size: .83rem;
         }
-        .bchead{
+
+        .bchead {
             .sr-only();
         }
-        a{
-            &:hover,&:focus,&:active{
+
+        a {
+            &:hover,
+            &:focus,
+            &:active {
                 color: @color-nav;
             }
         }
-        span.home{
-            a{
+
+        span.home {
+            a {
                 .fontello();
                 .hide-text-show-before();
                 .icon-home();
+
                 height: 1em;
                 width: auto;
-                text-decoration:none;
-                &:before{
+                text-decoration: none;
+                transition: @transition color;
+
+                &:before {
                     font-size: 1rem;
                     margin-top: .17rem;
                 }
-                &:hover,&:focus,&:active{
+
+                &:hover,
+                &:focus,
+                &:active {
+                    color: @color-link-hover;
+                }
+            }
+        }
+    }
+
+    .page-attributes {
+        float: right;
+        display: inline-block;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        max-width: 30%;
+
+        > li {
+            .btn-usertools-wrapper(); // uniform li
+            .btn-usertools-num();
+
+            float: left;
+
+            &.do_none {
+                &:not([class*="plugin__qc"]) {
+                    background-color: @color-site-bg;
+                }
+
+                .num {
+                    background-color: @color-border;
                     color: @color-nav;
                 }
             }
 
-        }
-    }
-    .page-attributes{
-        float:right;
-        display: inline-block;
-        list-style: none;
-        margin:0; padding:0;
-        max-width: 30%;
-        > li{
-            display: inline-block;
-            //float: right;
-            margin: 0 .1rem;
-            padding: 0;
-            font-size: .8rem;
-
-            #plugin__qc__wrapper{
-                position:absolute;
-                right:0;
-                width: auto;
-                border: 0 none;
-                background: @color-site-bg;
-            }
-            a[aria-expanded="false"] + #plugin__qc__wrapper{
-                display: none;
-            }
-            #plugin__qc__wrapper[aria-hidden="false"]{
-                margin-top: .7rem;
-            }
-
-            #plugin__qc__icon{
-                display: none;
-            }
-            &.plugin__qc{
+            &.plugin__qc {
                 display: inline-block;
                 overflow: visible;
             }
-            #plugin__qc__link{
-                font-size: .8rem;
-                position: relative;
-                display: block;
-                height: 1rem;
-                width: 1rem;
-                border: 1px solid @color-border;
-                background-color: @color-site-bg;
-                border-radius: @border-radius;
-                color: @color-nav;
-                min-height: 1.2em;
-                min-width: 1.4em;
-                box-sizing: content-box;
-                padding: .3em .25em .15em;
 
-                .prefix{
-                    font-size: .8rem;
-                    .fontello();
-                    .hide-text-show-before();
-                    .icon-emo-happy();
-                    color: @color-nav;
+            .prefix {
+                .fontello();
+                .hide-text-show-before();
+
+                height: auto;
+                width: 100%;
+                color: @color-nav;
+                text-align: center;
+                transition: @transition color;
+
+                &::before {
+                    width: 100%;
+                    margin: .35em 0 0;
                 }
-                .num{
-                    position: absolute;
-                    padding: .2em .3em .1em;
-                    text-align: center;
-                    font-size: .6rem;
-                    line-height: 100%;
-                    font-weight: 400;
-                    right: -0.3em;
-                    top: -0.4em;
-                    background-color: @color-border;
-                    border-radius: 2px;
-                    color: @color-nav;
+            }
+        } // li
+
+        a {
+            display: block;
+            width: auto;
+            min-height: 2em;
+            margin: 0;
+            border: 1px solid @color-border;
+            border-radius: @border-radius;
+            color: @color-nav;
+            transition: @transition color, @transition border-color;
+
+            &[aria-expanded="false"] + #plugin__qc__wrapper {
+                display: none;
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                border-color: @button_color;
+                color: @button_color;
+
+                .prefix {
+                    color: @button_color;
                 }
             }
         }
+
+        #plugin__qc__wrapper {
+            position: absolute;
+            right: 0;
+            width: auto;
+            border: 0 none;
+            background: @color-site-bg;
+
+            &[aria-hidden="false"] {
+                margin-top: .5rem;
+            }
+        }
+
+        #plugin__qc__icon {
+            display: none;
+        }
+
+        #plugin__qc__link {
+            font-size: .8rem;
+            position: relative;
+
+            .prefix {
+                .icon-emo-happy();
+
+                font-size: inherit;
+            }
+        }
     }
 }
diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less
index bd387f8..558eecd 100755
--- a/css/area_nav-usertools.less
+++ b/css/area_nav-usertools.less
@@ -4,159 +4,159 @@
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
+
 .nav-usertools {
-    &.has-bar{
+    &.has-bar {
         margin-top: @height-context-bar;
         padding-top: .5rem;
     }
-    ul{
+
+    ul {
         float: right;
-        padding: 0; margin: .2rem -.2rem 0 0;
-        li{
-            display: inline-block;
+        padding: 0;
+        margin: .2rem -.2rem 0 0;
+
+        li {
+            .btn-usertools-wrapper(); // uniform li
+            .btn-usertools-num();
+
             float: right;
-            margin: 0 .1rem;
-            padding: 0;
             font-size: .8rem;
-            *{
+
+            * {
                 font-size: .8rem;
             }
-            a{
-                color: @color-nav;
-                box-sizing: content-box;
-                padding: .3em .25em .15em;
-                text-align: center;
-                text-decoration: none;
+
+            > strong,
+            > a {
+                display: block;
+                width: auto;
+                min-height: 2em;
                 border: 1px solid @color-border;
                 border-radius: @border-radius;
-                margin: 2px;
-                cursor: pointer;
-
-                &:hover, &:active, &:focus{
-                    background-color: @color-nav-hover-bg;
-                    border-width: 3px;
-                    border-style: double;
-                    margin: 0;
-
-                    //-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: @color-nav-hover;
-                }
-
-                .fontello();
-                .hide-text-show-before();
-                &:before{
-                    font-size: 1.12em;
-                    cursor: pointer;
-                    content: "?";
-                }
-
-                /* icon register new user */
-                &.register{
-                    .icon-user();
-                }
-                /* icon log-out */
-                &.logout{
-                    .icon-logout();
-                }
-                /* icon log-in */
-                &.login{
-                    .icon-login();
-                }
-                /* icon admin */
-                &.admin{
-                    .icon-cog();
-                }
-
-                /* add more icons if needed */
+                color: @color-nav;
+                text-align: center;
+                margin: 0;
             }
 
-            &.user-task{
+            &.noopentasks {
+                .num {
+                    background-color: @color-border;
+                    color: @color-nav;
+                }
+            }
+
+            &.user {
                 border: 1px solid @color-border;
                 border-radius: @border-radius;
-                color: @color-nav;
-                display: inline-block;
-                height: 1rem;
-                width: 1rem;
-                min-height: 1.2em;
-                min-width: 1.4em;
-                box-sizing: content-box;
-                padding: .3em .25em .15em;
-                margin-top: 2px;
+                padding: .3rem .25rem;
+
+                bdi {
+                    color: @color-nav;
+                    display: inline-block;
+                    padding-top: 1px;
+                }
+
+                > bdi:first-of-type {
+                    .fontello();
+                    .icon-user();
+
+                    &::before {
+                        float: left;
+                        background: @color-nav;
+                        border: 4px solid @color-nav;
+                        border-radius: 50%;
+                        color: #fff;
+                        font-size: .5rem;
+                        margin-top: -1px;
+                        margin-right: 6px;
+                    }
+                }
+            } // user
+
+            &.user-task {
                 position: relative;
 
-
-                a{
+                a {
                     position: relative;
                     overflow: visible;
                     white-space: normal;
                     text-indent: 0;
-                    &:before{
+
+                    &::before {
                         content: "";
                         position: absolute;
                     }
                 }
 
-                .prefix{
+                .prefix {
                     .fontello();
                     .hide-text-show-before();
                     .icon-clipboard();
+
                     color: @color-nav;
+                    margin-top: .3rem;
                 }
 
-
-
-                .num{
-                    position: absolute;
-                    padding: .2em .3em .1em;
-                    text-align: center;
-                    font-size: .6rem;
-                    line-height: 100%;
-                    font-weight: 400;
-                    right: -0.3em;
-                    top: -0.4em;
-                    background-color: @color-border;
-                    border-radius: 2px;
-                    color: @color-nav;
-                }
-                &.opentasks, &.opentask{
-                    .num{
+                &.opentasks,
+                &.opentask {
+                    .num {
                         background-color: @color-link;
                         color: #fff;
                     }
                 }
+            } // user-task
+        } // li
+
+        a {
+            .fontello();
+            .hide-text-show-before();
+
+            cursor: pointer;
+            background-color: #fff;
+            text-decoration: none;
+            transition: @transition color, @transition border-color;
+
+            &:hover,
+            &:active,
+            &:focus {
+                border-color: @color-nav-hover;
+                //-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: @color-nav-hover;
             }
 
-            &.user{
-                border: 1px solid @color-border;
-                border-radius: @border-radius;
-                color: @color-nav;
-                display: inline-block;
-                height: 1rem;
-                min-height: 1.2em;
-                min-width: 1.4em;
-                box-sizing: content-box;
-                padding: .3em .25em .15em;
-                margin-top: 2px;
-                bdi{
-                    color: @color-nav;
-                    display: inline-block;
-                    padding-top: 1px;
-                }
-                >bdi:first-of-type{
-                    .fontello();
-                    .icon-user();
-                    &:before{
-                        border: 4px solid @color-nav;
-                        margin-top: -1px;
-                        border-radius: 50%;
-                        background: @color-nav;
-                        color: #fff;
-                        font-size: .5rem;
-                        float: left;
-                    }
-                }
+            &::before {
+                content: "?";
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+                font-size: 1.12em;
+                cursor: pointer;
+                margin: .3rem 0;
             }
+
+            /* icon register new user */
+            &.register {
+                .icon-user();
+            }
+
+            /* icon log-out */
+            &.logout {
+                .icon-logout();
+            }
+
+            /* icon log-in */
+            &.login {
+                .icon-login();
+            }
+
+            /* icon admin */
+            &.admin {
+                .icon-cog();
+            }
+
+            /* add more icons if needed */
         }
     }
 }
diff --git a/css/area_sidebar-search.less b/css/area_sidebar-search.less
index d11bc69..f48f501 100755
--- a/css/area_sidebar-search.less
+++ b/css/area_sidebar-search.less
@@ -23,8 +23,6 @@
         input {
             min-height: @icon-size;
             box-sizing: border-box;
-            border-color: @color-link;
-            border-radius: 0;
         }
 
         button[type="submit"] {
@@ -32,22 +30,28 @@
             .hide-text-show-before();
             .icon-search();
 
+            position: relative;
             width: @icon-size;
             min-height: @icon-size;
+            overflow: visible;
             background-image: none;
-            background-color: @color-link;
-            border: solid 1px @color-link;
-            border-radius: 0;
-            color: #fff;
+            background-color: transparent;
+            border: solid 1px transparent;
+            border-right-color: @color-border;
+            color: @color-nav;
             margin-left: -(@icon-size);
             padding: 0;
-            transition: @transition color, @transition background-color;
+            transition: @transition color, @transition border-color;
 
             &:hover,
             &:focus,
             &:active {
-                background-color: #fff;
+                border: solid 1px @color-link;
                 color: @color-link;
+
+                &::after {
+                    background-color: @color-link;
+                }
             }
 
             &::before {
@@ -57,6 +61,17 @@
                 text-align: center;
                 margin: 0;
             }
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 15%;
+                bottom: 15%;
+                width: 1px;
+                left: -1px;
+                background-color: @color-border;
+                transition: @transition background-color;
+            }
         }
     }
 }
diff --git a/css/base.less b/css/base.less
index c7df3a4..8aa4e35 100755
--- a/css/base.less
+++ b/css/base.less
@@ -9,28 +9,39 @@
 /* converted vars */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 
-@height-context-bar: 50px;
+@background_page-header: __background_page-header__;
 
-@border-radius:      __default_border_radius__;
+@border-radius:          __default_border_radius__;
 
-@font_family_screen: __font_family_screen__;
+@font_family_screen:     __font_family_screen__;
 
-@color-border:       __border__;
-@color-nav:          __nav_menu_color__;
-@color-nav-hover:    __nav_menu_hover_color__;
-@color-nav-hover-bg: __nav_menu_hover_bg__;
+@color-text:             __text__;
+@color-border:           __border__;
+@color-nav:              __nav_menu_color__;
+@color-nav-hover:        __nav_menu_hover_color__;
+@color-nav-hover-bg:     __nav_menu_hover_bg__;
 
-@color-content-bg:   __background_content__;
-@color-site-bg:      __background_site__;
+@color-content-bg:       __background_content__;
+@color-site-bg:          __background_site__;
 
-@color-link:         __existing__;
+@color-link:             __existing__;
+@color-link-hover:       @color-nav;
+
+@button_color:           __button_color__;
+@button_background:      __button_background__;
+
+@box-shadow-offset:      __box_shadow_offset__;
+@box-shadow:             __box_shadow__;
+@box-shadow-colored:     __box_shadow_colored__;
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* global vars */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 
-@margin-small:       .5rem;
+@height-context-bar: 50px;
+
+@margin-small:       1rem;
 @margin-default:     1.5rem;
 @margin-big:         2.5rem;
 
@@ -120,10 +131,6 @@
 @grid-columns:      12;
 
 
-@box-shadow-offset: __box_shadow_offset__;
-@box-shadow:        __box_shadow__;
-@box-shadow-colored:__box_shadow_colored__;
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* all media */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
diff --git a/css/base_mixins.less b/css/base_mixins.less
index a1dbeb7..07077b3 100755
--- a/css/base_mixins.less
+++ b/css/base_mixins.less
@@ -141,6 +141,47 @@
 }
 
 
+/* + + + + +  small icon-buttons (breadcrumb, page-header)  + + + + + */
+.btn-usertools-wrapper(@elem:2em) {
+    display: inline-block;
+    min-height: @elem;
+    min-width: @elem;
+    box-sizing: border-box;
+    color: @color-nav;
+    font-size: .8rem;
+    padding: 0;
+    margin: 0 .2rem 0 .1rem;
+}
+
+.btn-usertools-num () {
+    .num {
+        position: absolute;
+        right: -.4em;
+        top: -.4em;
+        background-color: @button_color;
+        border-radius: 2px;
+        color: #fff;
+        font-size: .6rem;
+        font-weight: 400;
+        text-align: center;
+        line-height: 100%;
+        padding: .2em .3em .1em;
+        transition: @transition color, @transition background-color;
+    }
+
+    a {
+        &:hover,
+        &:active,
+        &:focus {
+            .num {
+                background-color: @button_color;
+                color: @button_background;
+            }
+        }
+    }
+}
+
+
 .btn-default-size() {
     height: 1rem;
     width: 1rem;
@@ -178,6 +219,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-indent: -9999px;
+
     &::before{
         text-indent: 0;
         float: right;
diff --git a/css/base_structure.less b/css/base_structure.less
index 5849a64..5f3556a 100755
--- a/css/base_structure.less
+++ b/css/base_structure.less
@@ -5,128 +5,139 @@
  */
 
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Col Grid */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+
 .make-grid(xs);
 
-@media screen{
-    .container{
+@media screen {
+    .container {
         margin: 0 @margin-big;
     }
 }
 
 @media @screen_min-xxs {
-    .container{
+    .container {
         //border: 1px solid deeppink;
     }
 }
 
 @media @screen_min-xs {
-    .container{
+    .container {
         //border: 1px solid orangered;
     }
 }
 
 @media @screen_min-sm {
-    .container{
+    .container {
         //border: 1px solid green;
     }
+
     .make-grid(sm);
 }
 
 @media @screen_min-md {
-    .container{
+    .container {
         //border: 1px solid blue;
     }
+
     .make-grid(md);
 }
 
 @media @screen_min-lg {
-    .container{
+    .container {
         //border: 1px solid blue;
     }
+
     .make-grid(lg);
 }
 
 @media @screen_min-xlg {
-    html{
+    html {
         font-size: 120%;
     }
-    .container{
+
+    .container {
         //border: 1px solid red;
     }
 }
 
 @media @screen_min-xxlg {
-    html{
+    html {
         //font-size: 135%;
     }
-    .container{
+
+    .container {
         //border: 1px solid red;
     }
 }
 
-
-
 @media @screen_min-md {
 
     // z-indeces
-    .nav-direct p{
+    .nav-direct p {
         z-index: 1000;
     }
-    .top-header{
+
+    .top-header {
         z-index: 900;
     }
-    .tools .row > .col-xs-12{
+
+    .tools .row > .col-xs-12 {
         z-index: 1;
     }
-    .header .row > .col-xs-12{
+
+    .header .row > .col-xs-12 {
         z-index: 2;
     }
-    .content  .row > .col-xs-12{
+
+    .content .row > .col-xs-12 {
         z-index: 3;
     }
 
-    .top-header{
+    .top-header {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
     }
 
-    .header, .tools{
-        .row{
+    .header, .tools {
+        .row {
             position: relative;
-            > .col-xs-12{
+            > .col-xs-12 {
                 width: 23%;
                 box-sizing: border-box;
             }
         }
     }
 
-    .header{
-        .row > .col-xs-12{
+    .header {
+        .row > .col-xs-12 {
             position: relative;
             height: 150px;
             min-height: 6rem;
         }
     }
 
-    .tools{
-        .row > .col-xs-12{
+    .tools {
+        .row > .col-xs-12 {
             position: absolute;
             background: pink;
         }
     }
 
-    .content{
-        .row > .col-xs-12{
+    .content {
+        .row > .col-xs-12 {
             width: 100%;
             background-color: #fff;
         }
     }
-    .showSidebar{
-        .content{
-            .row > .col-xs-12{
+
+    .showSidebar {
+        .content {
+            .row > .col-xs-12 {
                 width: 73%;
                 position: relative;
                 float: right;
@@ -134,37 +145,38 @@
         }
     }
 
-    .claim{
-        .logo{
+    .claim {
+        .logo {
             position: absolute;
             bottom: 1em;
             overflow: visible;
         }
 
-        .logo img{
+        .logo img {
             height: 60px;
             width: auto;
         }
     }
 
-    .showSidebar{
-        .claim{
-            .logo{
+    .showSidebar {
+        .claim {
+            .logo {
                 position: absolute;
                 bottom: 0;
                 height: 1px;
+                width: 100%; // fo IE
                 overflow: visible;
             }
-            .logo img{
+            .logo img {
                 max-width: 100%;
                 height: auto;
             }
         }
     }
 
-    .main-sidebar{
-        &.search{
-            > img{
+    .main-sidebar {
+        &.search {
+            > img {
                 width: 100%;
                 height: auto;
             }
diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less
index b88b94a..ec76a59 100755
--- a/css/plugins/do_tasks.less
+++ b/css/plugins/do_tasks.less
@@ -2,39 +2,32 @@
 /* all media */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 
-ul.page-attributes{
-    .plugin__do_pagetasks{
-        &.do_none{
-            border: 1px solid @color-border;
-            border-radius: @border-radius;
-            color: @color-nav;
-            display: inline-block;
-            height: 1rem;
-            min-height: 1.2em;
-            min-width: 1.4em;
-            box-sizing: content-box;
-            padding: .3em .25em .15em;
-            position: relative;
-        }
-        .num{
-            position: absolute;
-            padding: .2em .3em .1em;
-            text-align: center;
-            font-size: .6rem;
-            line-height: 100%;
-            font-weight: 400;
-            right: -0.3em;
-            top: -0.4em;
-            background-color: @color-border;
-            border-radius: 2px;
-            color: @color-nav;
-        }
-        .prefix{
+ul.page-attributes {
+    .plugin__do_pagetasks {
+        @icon-size: 2em;
+
+        .btn-usertools-num ();
+
+        .prefix {
             .fontello();
             .hide-text-show-before();
             .icon-clipboard();
-            color: @color-nav;
+
             font-size: .8rem;
+            min-height: @icon-size;
+            min-width: @icon-size;
+            color: @color-nav;
+            transition: @transition color;
+        }
+
+        &.do_none {
+            position: relative;
+            height: 1rem;
+            width: 1rem;
+            box-sizing: border-box;
+            border: 1px solid @color-border;
+            border-radius: @border-radius;
+            padding: 0 .2em;
         }
     }
 }
diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less
index 1276b10..e7ad9a1 100755
--- a/css/plugins/magic-matcher.less
+++ b/css/plugins/magic-matcher.less
@@ -1,5 +1,3 @@
-
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* all media */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@@ -8,12 +6,13 @@
 /* + + + + + + + + + + + + + + + + + + + + + + + */
 /* magic matcher bar with form on top of page */
 
-#dokuwiki_magic-matcher{
-
+#dokuwiki_magic-matcher {
     position: fixed;
-    top:0; left: 0;
+    top: 0;
+    left: 0;
     width: 100%;
-    #magicmatcher__context{
+
+    #magicmatcher__context {
         box-sizing: border-box;
         background-color: __nav_direct_background__;
         box-shadow: __box_shadow__;
@@ -25,24 +24,46 @@
         padding: .8em 1em .5em;
         margin-bottom: 0;
 
-        .chosen-container-single .chosen-single span{
-            line-height: @line-height-bigger;
+        .chosen-container-single {
+            .chosen-single span {
+                line-height: @line-height-bigger;
+            }
         }
     }
 }
 
-.no-js{
-    #dokuwiki_magic-matcher{
+.no-js {
+    #dokuwiki_magic-matcher {
         display: none;
     }
 }
 
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1023px */
+
+@media @screen_max-lg {
+    #dokuwiki_magic-matcher {
+        #magicmatcher__context {
+            .chosen-container-single {
+                width: 20% !important;
+
+                + select + .chosen-container-single {
+                    width: 58% !important;
+                }
+            }
+        }
+    }
+}
+
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* print */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-@media print{
-    #dokuwiki_magic-matcher{
+
+@media print {
+    #dokuwiki_magic-matcher {
         display: none;
     }
 }
diff --git a/lang/de/lang.php b/lang/de/lang.php
index 6adf305..8dd4043 100755
--- a/lang/de/lang.php
+++ b/lang/de/lang.php
@@ -29,9 +29,12 @@ $lang['tasks_page_none']            = 'keine offenen Aufgaben für diese Seite';
 $lang['discussion']                 = 'Diskussion';
 $lang['back_to_article']            = 'Zurück zum Artikel';
 $lang['userpage']                   = 'Benutzer-Seite';
-$lang['__existing__']               = 'The color for links to existing pages';
-$lang['__missing__']                = 'The color for links to non-existing pages';
+$lang['__existing__']               = 'Schriftfarbe für Links zu vorhandenen Webseiten';
+$lang['__missing__']                = 'Schriftfarbe für Links zu nicht vorhandenen Webseiten';
 $lang['__site_width__']             = 'The width of the full site (can be any length unit: %, px, em, ...)';
 $lang['__sidebar_width__']          = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)';
 
+$lang['__button_color__']           = 'Schriftfarbe für Buttons';
+$lang['__button_background__']      = 'Hintergrundfarbe für Buttons';
+
 //Setup VIM: ex: et ts=2 :
diff --git a/lang/en/lang.php b/lang/en/lang.php
index 4442633..09b3d77 100755
--- a/lang/en/lang.php
+++ b/lang/en/lang.php
@@ -33,3 +33,6 @@ $lang['__existing__']               = 'The color for links to existing pages';
 $lang['__missing__']                = 'The color for links to non-existing pages';
 $lang['__site_width__']             = 'The width of the full site (can be any length unit: %, px, em, ...)';
 $lang['__sidebar_width__']          = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)';
+
+$lang['__button_color__']           = 'Color for buttons';
+$lang['__button_background__']      = 'Backgroundcolor for buttons';
diff --git a/main.php b/main.php
index 5294469..1c40205 100755
--- a/main.php
+++ b/main.php
@@ -321,13 +321,27 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
 
                         </div><!-- .main-content -->
 
+
+                        <div class="page-footer">
+                            <?php
+                                tpl_includeFile('pagefooter.html');
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* 'Last modified' etc */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                tpl_pageinfo()
+                            ?>
+                        </div>
+
                     </div><!-- .col -->
                 </div><!-- .row -->
             </div><!-- .container -->
 
 
-            <?php tpl_flush() ?>
-            <?php tpl_includeFile('pagefooter.html') ?>
+            <?php
+                tpl_flush()
+            ?>
         </div><!-- /content -->
 
 
@@ -350,9 +364,9 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* 'Last modified' etc */
+/* copyright */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                tpl_pageinfo()
+                                echo "var - fixme";
                             ?>
                         </p>
                     </div>
diff --git a/style.ini b/style.ini
index efdc09d..1a54be5 100755
--- a/style.ini
+++ b/style.ini
@@ -121,9 +121,12 @@ __highlight__           = "#efefef"              ; @ini_highlight
 ; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 
 ; these are used for links
-__existing__                = "#286da8"                                                 ; @ini_existing
+__existing__                = "#286DA8"                                                 ; @ini_existing
 __missing__                 = "#CD5360"                                                 ; @ini_missing
 
+__button_color__            = "#286DA8"
+__button_background__       = "#FFF"
+
 ; widths
 __site_width__              = "64em"                                                    ; @ini_site_width
 __sidebar_width__           = "16em"                                                    ; @ini_sidebar_width
@@ -139,10 +142,11 @@ __box_shadow__              = "0 0 .5em rgb(153,153,153,.5)"
 __box_shadow_offset__       = ".1em .1em .1em rgb(153,153,153,.5)"
 __nav_menu_color__          = "#696969"
 __nav_menu_hover_color__    = "#286da8"
-__nav_menu_hover_bg__       = "#FFFFFF"
+__nav_menu_hover_bg__       = "#FFF"
 
-__background_content__      = "#FFFFFF"
+__background_content__      = "#FFF"
 __background_site__         = "#ECECEC"
 
 __default_border_radius__   = "5px"
 
+__background_page-header__  = "#F9F9F9"