Add global styles for labels and menus

public/css/global-colors.styl

@@ -9,7 +9,10 @@ $best       =   rgb(201, 218, 248)
 $completed  =   rgb(217, 217, 217)
 // avatar background colors
 $color-herobox = desaturate(lighten($better, 16%),32%)
-// toolbar background colors
+// Navigation background colors
 $color-toolbar = lighten($color-herobox, 70%)
+$color-options-menu = lighten($color-herobox, 85%)
+$color-options-submenu = lighten($color-herobox, 75%)
+
 // button color variables
 $color-button-style-one = $best

public/css/global-modules.styl

@@ -3,7 +3,7 @@
 hrpg-button-color-mixin($hrpg-button-color)
   > a, button
     background-color: $hrpg-button-color !important
-    color: darken($hrpg-button-color, 80%) !important 
+    color: darken($hrpg-button-color, 70%) !important 
     border-color: darken($hrpg-button-color, 16.18%) !important
     &:active
       background-color: darken($hrpg-button-color, 10%) !important
@@ -25,9 +25,13 @@ hrpg-button-color-mixin($hrpg-button-color)
       background-color: $hrpg-button-color
       border-color: darken($hrpg-button-color, 16.18%)
     a, a:link, a:visited
-      color: darken($hrpg-button-color, 80%) !important
+      color: darken($hrpg-button-color, 70%) !important
   .glyphicon
-    color:darken($hrpg-button-color, 70%)
+    color:darken($hrpg-button-color, 60%)
+  &.active
+    a, button
+      background-color: darken($hrpg-button-color, 3.82%) !important
+      border-color: darken($hrpg-button-color, 38.2%) !important
 $hrpg-button-master
   list-style: none
   > a, button
@@ -58,6 +62,21 @@ $hrpg-button-toggle
     border-radius: 0.382em 0em 0em 0.382em !important
   > a:nth-of-type(2)
     border-radius: 0em 0.382em 0.382em 0em !important
+// Labels
+hrpg-label-color-mixin($hrpg-label-color)
+  color: lighten($hrpg-label-color, 90%) !important 
+  background-color: $hrpg-label-color !important
+  border-color: darken($hrpg-label-color, 16.18%) !important
+  > a
+    color: lighten($hrpg-label-color, 90%) !important 
+$hrpg-label
+  padding: 0.382em 0.618em
+  border-width: 1px
+  border-style: solid
+  border-radius: 0.382em
+  font-size: 0.8em
+  line-height: 1
+  color: #fff
 // Modals
 $hrpg-modal
   position: relative
@@ -139,4 +158,13 @@ $hrpg-modal-controls
     right: 2%
     border: none
   @media screen and (min-width:768px)
-    display: none  
+    display: none
+// Submenus
+$hrpg-submenu
+  @media screen and (min-width:768px)
+    padding: 1em 1em 0em 1em
+  margin-bottom: 1.618em
+  li
+    display: inline-block
+    margin-right: 1em
+    margin-bottom: 1em