diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less
index e7be950..a295420 100755
--- a/css/area_nav-breadcrumb.less
+++ b/css/area_nav-breadcrumb.less
@@ -107,6 +107,7 @@
                 .btn-prefix ();
                 .icon-clipboard();
 
+                display: block;
                 font-size: 1.2rem;
                 line-height: 1;
             }
diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less
index 1debbda..9c0abb9 100755
--- a/css/area_nav-usertools.less
+++ b/css/area_nav-usertools.less
@@ -34,6 +34,14 @@
                 color: @color-nav;
                 text-align: center;
                 margin: 0;
+
+                @media @screen_max-xxlg {
+                    min-height: 28px;
+                }
+
+                @media @screen_max-md {
+                    min-height: @toggle-size;
+                }
             }
 
             &.noopentasks {
@@ -48,28 +56,84 @@
             }
 
             &.user {
-                border: 1px solid @color-border;
-                border-radius: @border-radius;
-                padding: .3em .25rem;
+                position: relative;
+                padding: 1px .2em 0 1px; // 1px for border
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    border: solid 1px @color-border;
+                    border-radius: @border-radius;
+                }
+
+                > a {
+                    background: #FFF; // for removing bg-image
+                    border: 0 none;
+                    text-indent: 0;
+                    font-size: inherit;
+                    margin-top: -1px; // for border
+                    margin-right: -.2em;
+                    padding: 1px .2em 0 0;
+
+                    @media @screen_only-lg {
+                        padding-top: 3px;
+                    }
+
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        top: -3px;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        display: block;
+                        border: solid 1px @color-border;
+                        border-radius: @border-radius;
+                        transition: @transition border-color;
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        &::before {
+                            border-color: @button_background;
+                        }
+
+                        bdi,
+                        bdi:first-of-type {
+                            color: @button_background;
+
+                            &::before {
+                                color: @button_background;
+                            }
+                        }
+                    }
+                }
 
                 bdi {
                     color: @color-nav;
                     display: inline-block;
                     padding-top: 1px;
+                    transition: @transition color;
                 }
 
-                > bdi:first-of-type {
+                bdi:first-of-type {
                     .fontello();
                     .icon-user-circle();
 
                     position: relative;
+                    margin: .3em 0 .3em .25rem;
 
                     @media @screen_min-md {
-                        padding-left: 22px;
+                        padding-left: 1.3rem;
                     }
 
                     @media @screen_max-md {
-                        padding-left: 25px;
+                        padding-left: 1.5rem;
                     }
 
                     &::before {
@@ -78,6 +142,7 @@
                         font-size: 1.4rem;
                         color: @color-nav;
                         margin: 0;
+                        transition: @transition color;
 
                         @media @screen_min-xlg {
                             top: -2px;
@@ -103,6 +168,10 @@
                     white-space: normal;
                     text-indent: 0;
 
+                    @media @screen_only-lg {
+                        padding-top: .14rem;
+                    }
+
                     &::before {
                         content: '';
                         position: absolute;
@@ -113,7 +182,10 @@
                     .btn-prefix();
                     .icon-clipboard();
 
+                    display: block;
                     font-size: 1.2rem;
+                    text-align: center;
+                    margin-bottom: -1px;
                 }
             } // user-task
         } // li
@@ -129,6 +201,10 @@
             text-decoration: none;
             transition: @transition color, @transition background-color, @transition border-color;
 
+            @media @screen_only-lg {
+                min-width: 2rem;
+            }
+
             &:hover,
             &:active,
             &:focus {
@@ -157,16 +233,34 @@
             /* icon log-out */
             &.logout {
                 .icon-logout();
+
+                &::before {
+                    @media @screen_only-lg {
+                        margin-top: .27rem;
+                    }
+                }
             }
 
             /* icon log-in */
             &.login {
                 .icon-login();
+
+                &::before {
+                    @media @screen_only-lg {
+                        margin-top: .27rem;
+                    }
+                }
             }
 
             /* icon admin */
             &.admin {
                 .icon-cog();
+
+                &::before {
+                    @media @screen_only-lg {
+                        margin-top: .28rem;
+                    }
+                }
             }
         } // a
     } // ul
diff --git a/css/base.less b/css/base.less
index 79eae35..a94fb70 100755
--- a/css/base.less
+++ b/css/base.less
@@ -138,6 +138,7 @@
 
 @screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
 @screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
+@screen_only-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
 
 @screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
 @screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
diff --git a/css/base_mixins.less b/css/base_mixins.less
index ab11712..681e05b 100755
--- a/css/base_mixins.less
+++ b/css/base_mixins.less
@@ -194,20 +194,22 @@
     margin-top: .3rem;
 }
 
-.hide-text-show-before(){
+.hide-text-show-before() {
     display: inline-block;
     overflow: hidden;
     white-space: nowrap;
     text-indent: -9999px;
 
-    &::before{
-        text-indent: 0;
+    &::before {
         float: left;
+        width: 100%;
+        text-indent: 0;
+        margin: 0;
     }
 
-    &::after{
-        text-indent: 0;
+    &::after {
         float: left;
+        text-indent: 0;
     }
 }
 
@@ -217,13 +219,14 @@
     white-space: nowrap;
     text-indent: -9999px;
 
-    &::before{
-        text-indent: 0;
+    &::before {
         float: right;
+        text-indent: 0;
     }
-    &::after{
-        text-indent: 0;
+
+    &::after {
         float: right;
+        text-indent: 0;
     }
 }
 
diff --git a/css/base_structure.less b/css/base_structure.less
index ee6299a..b648807 100755
--- a/css/base_structure.less
+++ b/css/base_structure.less
@@ -39,7 +39,8 @@
 @media @screen_min-md {
     .make-grid(md);
     html {
-        font-size: 81.25%; //13px
+        font-size: 87.5%; //14px
+        //font-size: 81.25%; //13px
     }
 }