diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less
index be26926..68bf701 100755
--- a/css/area_nav-breadcrumb.less
+++ b/css/area_nav-breadcrumb.less
@@ -8,109 +8,145 @@
     padding: 2rem 2rem 1rem;
     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{
-                    color: @color-nav;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    color: @color-link-hover;
                 }
             }
-
         }
     }
-    .page-attributes{
-        float:right;
+
+    .page-attributes {
+        float: right;
         display: inline-block;
         list-style: none;
-        margin:0; padding:0;
+        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;
-            }
+        > li {
+            .btn-usertools-wrapper(); // uniform li
 
-            #plugin__qc__icon{
-                display: none;
-            }
-            &.plugin__qc{
+            float: left;
+
+            &.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;
+            &.do_none {
+                background-color: @color-site-bg;
+            }
+
+
+            .btn-usertools-num ();
+
+
+            .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: .7rem;
+            }
+        }
+
+        #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..b8a3c5f 100755
--- a/css/area_nav-usertools.less
+++ b/css/area_nav-usertools.less
@@ -4,159 +4,153 @@
  * @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
+
             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{
+            .btn-usertools-num ();
+
+            &.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/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;
         }
     }
 }