refactor and styling change, add button logick, add i18n logic

app/assets/stylesheets/user/structure.css.sass

@@ -1,7 +1,24 @@
 @import compass
 @import constants
 $side-spacing: 5px
-
+=user-button
+  cursor: pointer
+  border: 2px solid black
+  +border-radius(4px)
+  +box-shadow(#000 4px 4px 8px)
+  width: 34px
+  height: 34px
+  display: block
+  float: left
+  margin-left: 15px
+  background-color: $qbrown
+  text-align: center
+  line-height: 34px
+  background-repeat: no-repeat
+  background-position: center center
+  text-indent: -5000px
+  &.active
+    background-color: $qbrown-active
 
 html
   background-image: $wood
@@ -42,20 +59,7 @@ body
         background-color: green
         width: 262px
         a
-          display: block
-          border: 2px solid black
-          +border-radius(4px)
-          +box-shadow(#000 4px 4px 8px)
-          width: 34px
-          height: 34px
-          float: left
-          margin-left: 15px
-          background-color: $qbrown
-          text-align: center
-          line-height: 34px
-          background-repeat: no-repeat
-          background-position: center center
-          text-indent: -5000px
+          +user-button
           &.home-list-link
             background-image: image-url('icons/list.png')
           &.home-menu-link
@@ -91,3 +95,13 @@ body
     margin-left: 5px
   i
     padding-left: 5px
+.user-top-button
+  +user-button 
+  &#show-active-list
+    background-image: image-url('icons/list.png')
+  &#place-order-on-list
+    background-image: image-url('icons/menu.png')
+  &#list-needs-payment-button
+    background-image: image-url('icons/needs-payment.png')
+  &#list-needs-help-button
+    background-image: image-url('icons/needs-help.png')