Rearrange usability.

src/styles/components/_usability.scss

@@ -18,53 +18,46 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
 #help {
-    position:absolute;
-    top:80px;
-    bottom:10px;
-    left:0px;
-    right:0px;
-    width:350px;
-    font-size:1.1em;
-    color:#aaa;
-    text-shadow: 0 0 5px black;
-    margin: 0 auto;
-    -webkit-transition: right 200ms ease-in-out;
-    -moz-transition: right 200ms ease-in-out;
-    -ms-transition: right 200ms ease-in-out;
-    -o-transition: right 200ms ease-in-out;
-    transition: right 200ms ease-in-out;
-    boder-top:1px solid $bordercolor;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
+  border-top: 1px solid $bordercolor;
+  bottom: 10px;
+  color: #aaa;
+  font-size: 1.1em;
+  left: 0;
+  margin: 0 auto;
+  position: absolute;
+  right: 0;
+  text-shadow: 0 0 5px black;
+  transition: right 200ms ease-in-out;
+  top: 80px;
+  user-select: none;
+  width: 350px;
 }
-.withChat #help, .withBuddylist #help {
-    right:260px;
+
+.withChat #help,
+.withBuddylist #help {
+  right: 260px;
 }
-.withChat.withBuddylist #help, .withSettings #help {
-    right:520px;
+
+.withChat.withBuddylist #help,
+.withSettings #help {
+  right: 520px;
 }
-#help > div {
-    margin:0 10px;
-}
-#help .help-subline {
-    padding:20px 0;
-    color:#888;
-}
-@media only screen and (max-width: 1020px) and (min-width: 400px) {
-    #help {
-        width:250px;
-        font-size:1em;
-    }
-    #help > div {
-        //margin-left:10px;
-    }
-}
-@media only screen and (max-width: 400px) {
-	#help {
-		display:none;
-	}
+
+#help {
+  > div {
+    margin: 0 10px;
+  }
+  .help-subline {
+    color: #888;
+    padding: 20px 0;
+  }
+  @include breakpt-only-screen($breakpoint-useability-small){
+    display: none;
+  }
+  @include breakpt-only-screen-with-min($breakpoint-useability-small, $breakpoint-useability-large){
+    font-size: 1em;
+    width: 250px;
+  }
 }

src/styles/global/_mixins.scss

@@ -17,6 +17,12 @@
   }
 }
 
+@mixin breakpt-only-screen-with-min($pt1, $pt2) {
+  @media only screen and (min-width: $pt1) and (max-width: $pt2) {
+    @content;
+  }
+}
+
 // not handled by autoprefixer
 @mixin tap-highlight-color($color) {
   -webkit-tap-highlight-color: $color;

src/styles/global/_variables.scss

@@ -98,6 +98,10 @@ $social-google-color: #dd4b39;
 $social-twitter-color: #00aced;
 $social-xing-color: white;
 
+// useability
+$breakpoint-useability-small: 400px;
+$breakpoint-useability-large: 1020px;
+
 // breakpoints
 $breakpoint-small: 480px;
 $breakpoint-medium: 700px;