Nice green +/- buttons for order page.

app/views/ordering/order.rhtml

@@ -45,7 +45,7 @@
                 <td><%= @order.stockit? ? order_article.article.quantity_available : @unit[i] %> * <%=h order_article.article.unit %></td>
                 <td><%= number_to_currency(@price[i]) %></td>
                 <td id="units_<%= i %>"><%= order_article.units_to_order %></td>
-                <td style="text-align:right;">
+                <td class="quantity">
                   <input type="hidden" id="q_<%= i %>" name="<%= "ordered[#{order_article.id}][quantity]" %>" value="<%= @quantity[i] %>" size="2" />
                   <span id="q_used_<%= i %>" class="used"><%= @used_quantity[i] %></span> +
                   <span id="q_unused_<%= i %>" class="unused"><%= @quantity[i] - @used_quantity[i] %></span>
@@ -53,7 +53,7 @@
                   <%= button_to_function('+', "increaseQuantity(#{i})") %>
                   <%= button_to_function('-', "decreaseQuantity(#{i})") %>
                 </td>
-                <td style="text-align:right;">
+                <td class="tolerance">
                   <input type="hidden" id="t_<%= i %>" name="<%= "ordered[#{order_article.id}][tolerance]" %>" value="<%= @tolerance[i] %>" size="2" />
                   <% if (@unit[i] > 1) -%>
                     <span id="t_used_<%= i %>" class="used"><%= @used_tolerance[i] %></span> +

public/stylesheets/main.css

@@ -387,28 +387,30 @@ span.total {
 table#order {
   text-align: center; }
   table#order input {
-    font-size: 80%; }
+    font-size: 0.9em;
+    font-weight: bolder;
+    background-color: #78B74E;
+    color: #fff;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    padding: 0; }
   table#order th#col_required, table#order th#col_tolerance {
     width: 165px; }
   table#order th#col_packages, table#order th#col_left_units {
     width: 50px; }
+  table#order td.quantity, table#order td.tolerance {
+    text-align: right; }
   table#order td#col_left_units {
     color: #ed0606; }
   table#order td {
     padding: 0.6em; }
-  table#order td.name, table#order tr.note td {
+  table#order td.name {
     text-align: left;
     padding-left: 10px; }
   table#order tfoot tr {
     background-color: #e4eed6; }
   table#order tfoot td {
     padding-right: 10px; }
-  table#order tr.note {
-    background-color: #FBFBFB;
-    font-size: 0.9em;
-    border-bottom: 1px solid #DDDDDD; }
-    table#order tr.note td {
-      padding-left: 20px; }
 
 #order-footer, .article-info {
   z-index: 1;
@@ -425,7 +427,9 @@ table#order {
       margin: .5em 0; }
       #order-footer #total-sum #order-button input, .article-info #total-sum #order-button input {
         background-color: #78B74E;
-        color: #fff; }
+        color: #fff;
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px; }
       #order-footer #total-sum #order-button input:disabled, .article-info #total-sum #order-button input:disabled {
         background-color: red; }
 

public/stylesheets/print.css

@@ -387,28 +387,30 @@ span.total {
 table#order {
   text-align: center; }
   table#order input {
-    font-size: 80%; }
+    font-size: 0.9em;
+    font-weight: bolder;
+    background-color: #78B74E;
+    color: #fff;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    padding: 0; }
   table#order th#col_required, table#order th#col_tolerance {
     width: 165px; }
   table#order th#col_packages, table#order th#col_left_units {
     width: 50px; }
+  table#order td.quantity, table#order td.tolerance {
+    text-align: right; }
   table#order td#col_left_units {
     color: #ed0606; }
   table#order td {
     padding: 0.6em; }
-  table#order td.name, table#order tr.note td {
+  table#order td.name {
     text-align: left;
     padding-left: 10px; }
   table#order tfoot tr {
     background-color: #e4eed6; }
   table#order tfoot td {
     padding-right: 10px; }
-  table#order tr.note {
-    background-color: #FBFBFB;
-    font-size: 0.9em;
-    border-bottom: 1px solid #DDDDDD; }
-    table#order tr.note td {
-      padding-left: 20px; }
 
 #order-footer, .article-info {
   z-index: 1;
@@ -425,7 +427,9 @@ table#order {
       margin: .5em 0; }
       #order-footer #total-sum #order-button input, .article-info #total-sum #order-button input {
         background-color: #78B74E;
-        color: #fff; }
+        color: #fff;
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px; }
       #order-footer #total-sum #order-button input:disabled, .article-info #total-sum #order-button input:disabled {
         background-color: red; }
 

public/stylesheets/sass/main.sass

@@ -428,16 +428,24 @@ span.total
 table#order
   :text-align center
   input
-    :font-size 80% 
+    font-size: 0.9em
+    font-weight: bolder
+    background-color: #78B74E
+    color: #fff
+    -moz-border-radius: 3px
+    -webkit-border-radius: 3px
+    padding: 0
   th#col_required, th#col_tolerance
     :width 165px
   th#col_packages,  th#col_left_units
-    :width 50px 
+    :width 50px
+  td.quantity, td.tolerance
+    text-align: right
   td#col_left_units
     :color #ed0606
   td
     :padding 0.6em
-  td.name, tr.note td
+  td.name
     :text-align left
     :padding-left 10px
   tfoot
@@ -445,12 +453,6 @@ table#order
       :background-color = !lightGreen
     td
       :padding-right 10px
-  tr.note
-    :background-color #FBFBFB
-    :font-size 0.9em
-    :border-bottom 1px solid #DDDDDD 
-    td
-      :padding-left 20px
 #order-footer, .article-info
   z-index: 1
   position: fixed
@@ -467,6 +469,8 @@ table#order
       input
         background-color: #78B74E
         color: #fff
+        -moz-border-radius: 3px
+        -webkit-border-radius: 3px
       input:disabled
         background-color: red
 .article-info