styled firefox number buttons

cms/static/sass/views/_unit.scss

@@ -624,6 +624,7 @@ body.course.unit {
         top: 0;
         vertical-align: top;
         margin-bottom:5px;
+        position: relative;
       }
 
       label.setting-label {
@@ -671,8 +672,13 @@ body.course.unit {
       }
 
       input[type="number"] {
-        width: 32%;
+
+        width: 38.5%;
         @include box-shadow(0 1px 2px $shadow-l1 inset);
+        //For webkit browsers which render number fields differently, make input wider. 
+        -moz-column-width: {
+          width: 32%;
+        }
 
         &:active {
           background-color: #FFFCF1;

common/static/css/vendor/html5-input-polyfills/number-polyfill.css

 /* HTML5 Number polyfill | Jonathan Stipe | https://github.com/jonstipe/number-polyfill*/
 div.number-spin-btn-container {
   display: inline-block;
-  position: relative;
+  position: absolute;
   vertical-align: middle;
   margin: 0 0 0 3px;
-  padding: 0; }
+  padding: 0;
+  right: 74px;
+  top: 6px; 
+}
 
 div.number-spin-btn {
   -moz-box-sizing: border-box;
@@ -14,7 +17,8 @@ div.number-spin-btn {
   border-color: #ededed #777777 #777777 #ededed;
   border-style: solid;
   background-color: #eeeeee;
-  width: 1.2em; }
+  width: 1.2em;
+  font-size: 14px; }
   div.number-spin-btn:hover {
     /* added blue hover color */
     background-color: rgb(85, 151, 221);
@@ -27,9 +31,10 @@ div.number-spin-btn {
 
 div.number-spin-btn-up {
   border-bottom-width: 1px;
-  -moz-border-radius: 3px 3px 0px 0px;
-  -webkit-border-radius: 3px 3px 0px 0px;
-  border-radius: 3px 3px 0px 0px; }
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius:  0px;
+  font-size: 14px; }
   div.number-spin-btn-up:before {
     border-width: 0 0.3em 0.3em 0.3em;
     border-color: transparent transparent black transparent;

common/static/js/vendor/html5-input-polyfills/number-polyfill.js

@@ -142,7 +142,7 @@ HTML5 Number polyfill | Jonathan Stipe | https://github.com/jonstipe/number-poly
           var $downBtn, $elem, $upBtn, attrMutationCallback, attrObserver, btnContainer, downBtn, elem, halfHeight, upBtn;
           elem = this;
           $elem = $(elem);
-          halfHeight = ($elem.outerHeight() / 5) + 'px';
+          halfHeight = ($elem.outerHeight() / 6) + 'px';
           upBtn = document.createElement('div');
           downBtn = document.createElement('div');
           $upBtn = $(upBtn);