Use autoprefixer to generate CSS prefixes

Gemfile

@@ -34,6 +34,9 @@ gem 'jsonify-rails'
 # Use R2 for RTL conversion
 gem 'r2'
 
+# Use autoprefixer to generate CSS prefixes
+gem 'autoprefixer-rails'
+
 # Load rails plugins
 gem 'rails-i18n', "~> 4.0.0"
 gem 'dynamic_form'

Gemfile.lock

@@ -31,6 +31,8 @@ GEM
       thread_safe (~> 0.1)
       tzinfo (~> 1.1)
     arel (5.0.1.20140414130214)
+    autoprefixer-rails (2.1.1.20140710)
+      execjs
     bigdecimal (1.1.0)
     builder (3.2.2)
     capybara (2.4.1)
@@ -52,9 +54,9 @@ GEM
       execjs
     coffee-script-source (1.7.1)
     colorize (0.7.3)
-    composite_primary_keys (7.0.5)
+    composite_primary_keys (7.0.6)
       activerecord (~> 4.1.4)
-    crass (0.2.0)
+    crass (0.2.1)
     dalli (2.7.2)
     deadlock_retry (1.2.0)
     dynamic_form (1.1.4)
@@ -95,7 +97,7 @@ GEM
     multi_json (1.10.1)
     multi_xml (0.5.5)
     multipart-post (2.0.0)
-    nokogiri (1.6.3)
+    nokogiri (1.6.3.1)
       mini_portile (= 0.6.0)
     nokogumbo (1.1.9)
       nokogiri
@@ -202,6 +204,7 @@ PLATFORMS
 DEPENDENCIES
   SystemTimer (>= 1.1.3)
   actionpack-page_caching
+  autoprefixer-rails
   bigdecimal (~> 1.1.0)
   coffee-rails (~> 4.0.0)
   composite_primary_keys (~> 7.0.3)

app/assets/stylesheets/common.css.scss

@@ -87,9 +87,7 @@ strong {
 /* Default rules for the body of every page */
 
 * {
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 body {
@@ -846,7 +844,6 @@ nav.secondary {
 
 .leaflet-popup-content-wrapper {
   border-radius: 4px !important;
-  -webkit-border-radius: 4px !important;
 }
 
 /* Rules for attribution text under the main map shown on printouts */
@@ -926,8 +923,6 @@ header .search_form {
     border-right: none;
 
     transition: 300ms linear;
-    -webkit-transition: 300ms linear;
-    -moz-transition: 300ms linear;
   }
 
   input:focus {
@@ -1326,8 +1321,6 @@ header .search_form {
 #new_trace {
   input[type=text] {
     width: 50%;
-    width: -moz-calc(100% - 150px);
-    width: -webkit-calc(100% - 150px);
     width: calc(100% - 150px);
     max-width: 500px;
   }
@@ -1342,8 +1335,6 @@ header .search_form {
 
   input[type=text] {
     width: 50%;
-    width: -moz-calc(100% - 150px);
-    width: -webkit-calc(100% - 150px);
     width: calc(100% - 150px);
     max-width: 500px;
   }
@@ -1939,7 +1930,6 @@ a.button {
   background: $blue;
   text-align: center;
   border-radius: 2px;
-  -moz-border-radius: 2px;
   &:hover {
     background: darken($blue, $hovercolor);
     text-decoration: none;
@@ -2118,8 +2108,6 @@ a.button {
 
 input.richtext_title[type="text"] {
   width: 50%;
-  width: -moz-calc(100% - 235px);
-  width: -webkit-calc(100% - 235px);
   width: calc(100% - 235px);
 
   @media only screen and (max-width:768px) {
@@ -2132,8 +2120,6 @@ input.richtext_title[type="text"] {
 
   .richtext_content {
     width: 50%;
-    width: -moz-calc(100% - 235px);
-    width: -webkit-calc(100% - 235px);
     width: calc(100% - 235px);
     display: inline-block;
     vertical-align: top;
@@ -2268,12 +2254,8 @@ input.richtext_title[type="text"] {
   border-radius: 0 3px 3px;
   *border-right-width: 2px;
   *border-bottom-width: 2px;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding;
-          background-clip: padding-box;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  background-clip: padding-box;
 }
 
 .dropdown-menu.pull-right {