diff --git a/rebuild.sh b/rebuild.sh
index d6c6ca8..d583187 100755
--- a/rebuild.sh
+++ b/rebuild.sh
@@ -14,7 +14,7 @@ fi
 [ -d "$STYLESHEETS" ] && rm -r "$STYLESHEETS"
 mkdir "$STYLESHEETS"
 
-cp -r compass/frameworks/compass/stylesheets/* "$STYLESHEETS"
+cp -r compass/core/stylesheets/* "$STYLESHEETS"
 
 # rename all the files
 for file in $(find "$STYLESHEETS" | grep scss$); do
diff --git a/stylesheets/compass/configuration.scss b/stylesheets/compass/configuration.scss
new file mode 100644
index 0000000..15dc8cd
--- /dev/null
+++ b/stylesheets/compass/configuration.scss
@@ -0,0 +1,54 @@
+$project-path: null !default;
+$debug-configuration: false !default;
+$compass-initialized: false !default;
+$compass-configured: false !default;
+
+@mixin debug-compass-configuration {
+  @if $debug-configuration {
+    /* Compass Configuration: */
+    @each $setting, $value in compass-configuration() {
+      /* #{$setting}: #{inspect($value)} */
+    }
+  }
+}
+
+// This mixin resets the compass configuration
+// and then initializes it with the sass options
+// set in the environment. It is immediately called during import.
+// It's unlikely you'll need to call this mixin yourself.
+@mixin compass-initializer($project-path: $project-path) {
+  @if not $compass-initialized and not using-compass-compiler() {
+    $default-configuration: reset-configuration();
+    $default-configuration: add-sass-configuration($project-path);
+  }
+  $compass-initialized: true !global;
+  @include debug-compass-configuration;
+}
+@include compass-initializer;
+
+//  `$options`:
+//    A map of compass configuration options.
+//    E.g. @include compass-configuration((asset-host: 
+// Keywords style ar
+// `$reconfigure`:
+//    When unset, if compass-configuration is called more than once, a warning will
+//    be issued and all calls after the first will be ignored.
+//    When set to `false`, all subsequent calls will be ignored without a warning.
+//    When set to `true`, the configuration will be added to any existing configuration.
+@mixin compass-configuration($options: (), $reconfigure: null, $arguments...) {
+  @if not at-stylesheet-root() {
+    // this should be @error once that exists.
+    @warn "include compass-configuration from the root level of your stylesheet."
+  }
+  @if not $compass-configured or $reconfigure {
+    $options: map-merge($options, keywords($arguments));
+    @if length($arguments) > 0 {
+      @warn "compass-configuration accepts keyword arguments or a single map of options. Got: #{inspect($arguments)}."
+    }
+    $invoke: add-configuration($options);
+    @include debug-compass-configuration;
+    $compass-configured: true !global;
+  } @else if $reconfigure == null {
+    @warn "Compass was already configured for this stylesheet."
+  }
+}
diff --git a/stylesheets/compass/css3.scss b/stylesheets/compass/css3.scss
old mode 100644
new mode 100755
index a4aaf73..172a815
--- a/stylesheets/compass/css3.scss
+++ b/stylesheets/compass/css3.scss
@@ -5,7 +5,7 @@
 @import "css3/text-shadow";
 @import "css3/columns";
 @import "css3/box-sizing";
-@import "css3/box";
+@import "css3/flexbox";
 @import "css3/images";
 @import "css3/background-clip";
 @import "css3/background-origin";
@@ -14,6 +14,7 @@
 @import "css3/transform";
 @import "css3/transition";
 @import "css3/appearance";
+@import "css3/animation";
 @import "css3/regions";
 @import "css3/hyphenation";
 @import "css3/filter";
diff --git a/stylesheets/compass/css3/animation.scss b/stylesheets/compass/css3/animation.scss
new file mode 100644
index 0000000..10be5ba
--- /dev/null
+++ b/stylesheets/compass/css3/animation.scss
@@ -0,0 +1,122 @@
+@import "compass/support";
+
+// The prefixed support threshold for animation.
+// Defaults to the $graceful-usage-threshold.
+$animation-support-threshold: $graceful-usage-threshold !default;
+
+
+// Name of any animation as a string.
+$default-animation-name             : null !default;
+
+// Duration of the entire animation in seconds.
+$default-animation-duration         : null !default;
+
+// Delay for start of animation in seconds.
+$default-animation-delay            : null !default;
+
+// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
+$default-animation-timing-function  : null !default;
+
+// The number of times an animation cycle is played. [infinite | $number]
+$default-animation-iteration-count  : null !default;
+
+// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
+$default-animation-direction        : null !default;
+
+// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
+$default-animation-fill-mode        : null !default;
+
+// Whether the animation is running or paused. [running | paused]
+$default-animation-play-state       : null !default;
+
+
+// Create a named animation sequence that can be applied to elements later.
+//
+//     $name    - The name of your animation.
+//     @content - The keyframes of the animation.
+@mixin keyframes($name, $deprecated-prefixes...) {
+  $warned: warn-about-useless-prefix-arguments($deprecated-prefixes...);
+
+  @include with-each-prefix(css-animation, $animation-support-threshold) {
+    // It would be nice if we could dynamically construct directive names.
+    @if $current-prefix == -moz    { @-moz-keyframes    #{$name} { @content; } }
+    @if $current-prefix == -webkit { @-webkit-keyframes #{$name} { @content; } }
+    @if $current-prefix == -o      { @-o-keyframes      #{$name} { @content; } }
+    @if $current-prefix == -ms     { @-ms-keyframes     #{$name} { @content; } }
+    @if $current-prefix == null    { @keyframes         #{$name} { @content; } }
+  }
+}
+
+// @private
+@mixin animation-properties($properties) {
+  @include prefixed-properties(css-animation, $animation-support-threshold, $properties);
+}
+
+
+// Apply any number of animation names.
+@mixin animation-name($name...) {
+  $name: set-arglist-default($name, $default-animation-name);
+  @include animation-properties((animation-name: $name));
+}
+
+// Apply any number of animation durations.
+@mixin animation-duration($duration...) {
+  $duration: set-arglist-default($duration, $default-animation-duration);
+  @include animation-properties((animation-duration: $duration));
+}
+
+// Apply any number of animation delays.
+@mixin animation-delay($delay...) {
+  $delay: set-arglist-default($delay, $default-animation-delay);
+  @include animation-properties((animation-delay: $delay));
+}
+
+// Apply any number of animation timing functions.
+@mixin animation-timing-function($function...) {
+  $function: set-arglist-default($function, $default-animation-timing-function);
+  @include animation-properties((animation-timing-function: $function));
+}
+
+// Apply any number of animation iteration counts.
+@mixin animation-iteration-count($count...) {
+  $count: set-arglist-default($count, $default-animation-iteration-count);
+  @include animation-properties((animation-iteration-count: $count));
+}
+
+// Apply any number of animation directions.
+@mixin animation-direction($direction...) {
+  $direction: set-arglist-default($direction, $default-animation-direction);
+  @include animation-properties((animation-direction: $direction));
+}
+
+// Apply any number of animation fill modes.
+@mixin animation-fill-mode($mode...) {
+  $mode: set-arglist-default($mode, $default-animation-fill-mode);
+  @include animation-properties((animation-fill-mode: $mode));
+}
+
+// Apply any number of animation play states.
+@mixin animation-play-state($state...) {
+  $state: set-arglist-default($state, $default-animation-play-state);
+  @include animation-properties((animation-play-state: $state));
+}
+
+// @private
+@function default-animation() {
+  @return compact($default-animation-name
+                  $default-animation-duration
+                  $default-animation-timing-function
+                  $default-animation-delay
+                  $default-animation-iteration-count
+                  $default-animation-direction
+                  $default-animation-fill-mode
+                  $default-animation-play-state);
+}
+
+// Shortcut to apply any number of animations to an element, with all the settings.
+//
+//     $animation... : Name and settings. [<values> | default]
+@mixin animation($animation...) {
+  $animation: if(length($animation) > 0, $animation, default-animation());
+  @include animation-properties((animation: $animation));
+}
diff --git a/stylesheets/compass/css3/appearance.scss b/stylesheets/compass/css3/appearance.scss
index e238f01..2667086 100644
--- a/stylesheets/compass/css3/appearance.scss
+++ b/stylesheets/compass/css3/appearance.scss
@@ -1,16 +1,17 @@
-@import "shared";
+// Appearance
+@import "compass/support";
 
 // Change the appearance for Mozilla, Webkit and possibly the future.
 // The appearance property is currently not present in any newer CSS specification.
 //
 // There is no official list of accepted values, but you might check these source:
-//   Mozilla : https://developer.mozilla.org/en/CSS/-moz-appearance
-//   Webkit  : http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365
-//   (search for 'appearance' within the page)
-
-@mixin appearance($ap) {
-  $ap: unquote($ap);
-  @include experimental(appearance, $ap,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
-  );
+//
+//   * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance)
+//   * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365)
+//     (search for 'appearance' within the page)
+@mixin appearance($appearance) {
+  // There is no caniuse tracking for appearance.
+  $appearance: unquote($appearance);
+  @include with-prefix(-moz)    {    -moz-appearance: $appearance; }
+  @include with-prefix(-webkit) { -webkit-appearance: $appearance; }
 }
diff --git a/stylesheets/compass/css3/background-clip.scss b/stylesheets/compass/css3/background-clip.scss
index 6ce473f..277ae91 100644
--- a/stylesheets/compass/css3/background-clip.scss
+++ b/stylesheets/compass/css3/background-clip.scss
@@ -1,43 +1,35 @@
-@import "shared";
+// Background Clip
+@import "compass/support";
 
-// The default value is `padding-box` -- the box model used by modern browsers.
-//
-// If you wish to do so, you can override the default constant with `border-box`
-//
-// To override to the default border-box model, use this code:
-//     $default-background-clip: border-box
+// The the user threshold for background-clip support. Defaults to `$critical-usage-threshold`
+$background-clip-support-threshold: $critical-usage-threshold !default;
 
+// The default border-box model: [border-box | padding-box | content-box]
 $default-background-clip: padding-box !default;
 
-// Clip the background (image and color) at the edge of the padding or border.
-//
-// Legal Values:
-//
-//   * padding-box
-//   * border-box
-//   * text
 
-@mixin background-clip($clip: $default-background-clip) {
-  // webkit and mozilla use the deprecated short [border | padding]
-  $clip: unquote($clip);
-  $deprecated: $clip;
-  @if $clip == padding-box { $deprecated: padding; }
-  @if $clip == border-box { $deprecated: border; }
-  // Support for webkit and mozilla's use of the deprecated short form
-  @include experimental(background-clip, $deprecated,
-    -moz,
-    -webkit,
-    not -o,
-    not -ms,
-    not -khtml,
-    not official
-  );
-  @include experimental(background-clip, $clip,
-    not -moz,
-    not -webkit,
-    not -o,
-    not -ms,
-    -khtml,
-    official
-  );
+// Clip the background (image and color) at the edge of the padding, border, or content.
+//   $clip... : [padding-box | border-box | content-box]
+@mixin background-clip($clip...) {
+  $output: ();
+  $deprecated: ();
+
+  @if (length($clip) > 0) {
+    @each $layer in $clip {
+      $output: append($output, unquote($layer), comma);
+      $deprecated: append($deprecated, legacy-box($layer), comma);
+    }
+  } @else {
+    $output: $default-background-clip;
+    $deprecated: legacy-box($default-background-clip);
+  }
+
+  @include with-each-prefix(background-img-opts, $background-clip-support-threshold) {
+    @if $current-prefix == -moz or $current-prefix == -webkit {
+      // Legacy versions of Mozilla support a different syntax, prefixed.
+      @include prefix-prop(background-clip, $deprecated);
+    } @else {
+      @include prefix-prop(background-clip, $output);
+    }
+  }
 }
diff --git a/stylesheets/compass/css3/background-origin.scss b/stylesheets/compass/css3/background-origin.scss
index bc8eaa8..6d1f26e 100644
--- a/stylesheets/compass/css3/background-origin.scss
+++ b/stylesheets/compass/css3/background-origin.scss
@@ -1,42 +1,37 @@
-// Override `$default-background-origin` to change the default.
+// Background Origin
+@import "compass/support";
 
-@import "shared";
+// The the user threshold for background-origin support. Defaults to `$critical-usage-threshold`
+$background-origin-threshold: $critical-usage-threshold !default;
 
+
+// The default background-origin: [border-box | padding-box | content-box]
 $default-background-origin: content-box !default;
 
-// Position the background off the edge of the padding, border or content
-//
-// * Possible values:
-//   * `padding-box`
-//   * `border-box`
-//   * `content-box`
-// * browser defaults to `padding-box`
-// * mixin defaults to `content-box`
 
+// Set the origin of the background (image and color) at the edge of the padding, border, or content.
+//
+//     $origin... : [padding-box | border-box | content-box]
+@mixin background-origin($origin...) {
+  $output: ();
+  $deprecated: ();
 
-@mixin background-origin($origin: $default-background-origin) {
-  $origin: unquote($origin);
-  // webkit and mozilla use the deprecated short [border | padding | content]
-  $deprecated: $origin;
-  @if $origin == padding-box { $deprecated: padding; }
-  @if $origin == border-box  { $deprecated: border;  }
-  @if $origin == content-box { $deprecated: content; }
+  @if (length($origin) > 0) {
+    @each $layer in $origin {
+      $output: append($output, unquote($layer), comma);
+      $deprecated: append($deprecated, legacy-box($layer), comma);
+    }
+  } @else {
+    $output: $default-background-origin;
+    $deprecated: legacy-box($default-background-origin);
+  }
 
-  // Support for webkit and mozilla's use of the deprecated short form
-  @include experimental(background-origin, $deprecated,
-    -moz,
-    -webkit,
-    not -o,
-    not -ms,
-    not -khtml,
-    not official
-  );
-  @include experimental(background-origin, $origin,
-    not -moz,
-    not -webkit,
-    -o,
-    -ms,
-    -khtml,
-    official
-  );
+  @include with-each-prefix(background-img-opts, $background-origin-threshold) {
+    @if $current-prefix == -moz or $current-prefix == -webkit {
+      // Legacy versions of Mozilla support a different syntax, prefixed.
+      @include prefix-prop(background-origin, $deprecated)
+    } @else {
+      @include prefix-prop(background-origin, $output)
+    }
+  }
 }
diff --git a/stylesheets/compass/css3/background-size.scss b/stylesheets/compass/css3/background-size.scss
index 9d36447..b4dda51 100644
--- a/stylesheets/compass/css3/background-size.scss
+++ b/stylesheets/compass/css3/background-size.scss
@@ -1,26 +1,19 @@
-@import "shared";
+// Background Size
+@import "compass/support";
+
+// The the user threshold for background-clip support. Defaults to `$critical-usage-threshold`
+$background-size-threshold: $critical-usage-threshold !default;
 
 //  override to change the default
 $default-background-size: 100% auto !default;
 
+
 // Set the size of background images using px, width and height, or percentages.
 // Currently supported in: Opera, Gecko, Webkit.
 //
 // * percentages are relative to the background-origin (default = padding-box)
 // * mixin defaults to: `$default-background-size`
-@mixin background-size(
-  $size-1: $default-background-size,
-  $size-2: false,
-  $size-3: false,
-  $size-4: false,
-  $size-5: false,
-  $size-6: false,
-  $size-7: false,
-  $size-8: false,
-  $size-9: false,
-  $size-10: false
-) {
-  $size-1: if(type-of($size-1) == string, unquote($size-1), $size-1);
-  $sizes: compact($size-1, $size-2, $size-3, $size-4, $size-5, $size-6, $size-7, $size-8, $size-9, $size-10);
-  @include experimental(background-size, $sizes, -moz, -webkit, -o, not -ms, not -khtml);
+@mixin background-size($size...) {
+  $size: set-arglist-default($size, $default-background-size);
+  @include prefixed-properties(background-img-opts, $background-size-threshold, (background-size: $size));
 }
diff --git a/stylesheets/compass/css3/border-radius.scss b/stylesheets/compass/css3/border-radius.scss
index 2da9022..da2ccbe 100644
--- a/stylesheets/compass/css3/border-radius.scss
+++ b/stylesheets/compass/css3/border-radius.scss
@@ -1,7 +1,15 @@
-@import "shared";
+// Border Radius
 
+@import "compass/support";
+
+
+// The the user threshold for border-radius support. Defaults to `$graceful-usage-threshold`
+$border-radius-threshold: $graceful-usage-threshold !default;
+
+// The length of a border-radius to be used by default.
 $default-border-radius: 5px !default;
 
+
 // Round all corners by a specific amount, defaults to value of `$default-border-radius`.
 //
 // When two values are passed, the first is the horizontal radius
@@ -18,48 +26,31 @@ $default-border-radius: 5px !default;
 //
 // Which generates:
 //
-//    .simple {
-//      -webkit-border-radius: 4px 4px;
-//      -moz-border-radius: 4px / 4px;
-//      -khtml-border-radius: 4px / 4px;
-//      border-radius: 4px / 4px; }
-//    
-//    .compound {
-//      -webkit-border-radius: 2px 3px;
-//      -moz-border-radius: 2px 5px / 3px 6px;
-//      -khtml-border-radius: 2px 5px / 3px 6px;
-//      border-radius: 2px 5px / 3px 6px; }
-//    
-//    .crazy {
-//      -webkit-border-radius: 1px 2px;
-//      -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
-//      -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
-//      border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
-
+//     .simple {
+//       -moz-border-radius: 4px / 4px;
+//       -webkit-border-radius: 4px 4px;
+//       border-radius: 4px / 4px; }
+//     
+//     .compound {
+//       -moz-border-radius: 2px 5px / 3px 6px;
+//       -webkit-border-radius: 2px 3px;
+//       border-radius: 2px 5px / 3px 6px; }
+//     
+//     .crazy {
+//       -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
+//       -webkit-border-radius: 1px 2px;
+//       border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
 @mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {
-
-  @if $vertical-radius {
-    // Webkit doesn't understand the official shorthand syntax for specifying
-    // a vertical radius unless so in case there's several we only take the first.
-    @include experimental(border-radius, first-value-of($radius) first-value-of($vertical-radius),
-      not -moz,
-      -webkit,
-      not -o,
-      not -ms,
-      not -khtml,
-      not official
-    );
-    @include experimental("border-radius", $radius unquote("/") $vertical-radius,
-      -moz,
-      not -webkit,
-      not -o,
-      not -ms,
-      -khtml,
-      official
-    );
-  }
-  @else {
-    @include experimental(border-radius, $radius);
+  @include with-each-prefix(border-radius, $border-radius-threshold) {
+    @if $current-prefix == -webkit {
+      // Legacy Webkit didn't understand the official shorthand syntax for specifying a vertical radius.
+      $legacy-webkit-radius: first-value-of($radius);
+      @if $vertical-radius { $legacy-webkit-radius: append($legacy-webkit-radius, first-value-of($vertical-radius)); }
+      @include prefix-prop(border-radius, $legacy-webkit-radius);
+    } @else {
+      // Official syntax for everyone else
+      @include prefix-prop(border-radius, if($vertical-radius, #{$radius} / #{$vertical-radius}, $radius));
+    }
   }
 }
 
@@ -67,45 +58,31 @@ $default-border-radius: 5px !default;
 //
 // * legal values for `$vert`: `top`, `bottom`
 // * legal values for `$horz`: `left`, `right`
-
 @mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
-  // Support for mozilla's syntax for specifying a corner
-  @include experimental("border-radius-#{$vert}#{$horz}", $radius,
-    -moz,
-    not -webkit,
-    not -o,
-    not -ms,
-    not -khtml,
-    not official
-  );
-  @include experimental("border-#{$vert}-#{$horz}-radius", $radius,
-    not -moz,
-    -webkit,
-    not -o,
-    not -ms,
-    -khtml,
-    official
-  );
-  
+  @include with-each-prefix(border-radius, $border-radius-threshold) {
+    @if $current-prefix == -moz {
+      // Support for mozilla's syntax for specifying a corner
+      @include prefix-prop("border-radius-#{$vert}#{$horz}", $radius);
+    } @else {
+      // Official syntax for everyone else
+      @include prefix-prop("border-#{$vert}-#{$horz}-radius", $radius);
+    }
+  }
 }
 
 // Round top-left corner only
-
 @mixin border-top-left-radius($radius: $default-border-radius) {
   @include border-corner-radius(top, left, $radius); }
 
 // Round top-right corner only
-
 @mixin border-top-right-radius($radius: $default-border-radius) {
   @include border-corner-radius(top, right, $radius); }
 
 // Round bottom-left corner only
-
 @mixin border-bottom-left-radius($radius: $default-border-radius) {
   @include border-corner-radius(bottom, left, $radius); }
 
 // Round bottom-right corner only
-
 @mixin border-bottom-right-radius($radius: $default-border-radius) {
   @include border-corner-radius(bottom, right, $radius); }
 
diff --git a/stylesheets/compass/css3/box-shadow.scss b/stylesheets/compass/css3/box-shadow.scss
index ea47dc9..fe9078c 100644
--- a/stylesheets/compass/css3/box-shadow.scss
+++ b/stylesheets/compass/css3/box-shadow.scss
@@ -1,9 +1,10 @@
-// @doc off
-// These defaults make the arguments optional for this mixin
-// If you like, set different defaults before importing.
-// @doc on
+// Box Shadow
 
-@import "shared";
+@import "compass/support";
+
+// The prefixed support threshold for box-shadow.
+// Defaults to the $graceful-usage-threshold.
+$box-shadow-support-threshold: $graceful-usage-threshold !default;
 
 
 // The default color for box shadows
@@ -19,51 +20,62 @@ $default-box-shadow-v-offset: 0px !default;
 $default-box-shadow-blur: 5px !default;
 
 // The default spread length.
-$default-box-shadow-spread : false !default;
+$default-box-shadow-spread: null !default;
 
-// The default shadow inset: inset or false (for standard shadow).
-$default-box-shadow-inset : false !default;
+// The default shadow inset: inset or null (for standard shadow).
+$default-box-shadow-inset: null !default;
 
-// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box
-// shadows are needed.
-// Each shadow argument should adhere to the standard css3 syntax for the
-// box-shadow property.
-@mixin box-shadow(
-  $shadow-1 : default,
-  $shadow-2 : false,
-  $shadow-3 : false,
-  $shadow-4 : false,
-  $shadow-5 : false,
-  $shadow-6 : false,
-  $shadow-7 : false,
-  $shadow-8 : false,
-  $shadow-9 : false,
-  $shadow-10: false
-) {
-  @if $shadow-1 == default {
-    $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
-  }
-  $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
-  @include experimental(box-shadow, $shadow,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
-  );
+@function default-box-shadow() {
+  @return compact(if($default-box-shadow-inset, inset, null)
+                  $default-box-shadow-h-offset
+                  $default-box-shadow-v-offset
+                  $default-box-shadow-blur
+                  $default-box-shadow-spread
+                  $default-box-shadow-color);
+}
+
+// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows
+// when one or more box shadows are needed.
+// Each shadow argument should adhere to the standard css3 syntax
+// for the box-shadow property.
+@mixin box-shadow($shadow...) {
+  $shadow: set-arglist-default($shadow, default-box-shadow());
+  @include prefixed-properties(css-boxshadow, $box-shadow-support-threshold, (box-shadow: $shadow));
 }
 
 // Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.
 // Includes default arguments for color, horizontal offset, vertical offset, blur length, spread length, and inset.
 @mixin single-box-shadow(
-  $color  : $default-box-shadow-color,
-  $hoff   : $default-box-shadow-h-offset,
-  $voff   : $default-box-shadow-v-offset,
-  $blur   : $default-box-shadow-blur,
-  $spread : $default-box-shadow-spread,
+  $hoff   : null,
+  $voff   : null,
+  $blur   : null,
+  $spread : null,
+  $color  : null,
   $inset  : $default-box-shadow-inset
 ) {
-  @if not ($inset == true or $inset == false or $inset == inset) {
+  // Handle legacy argument order
+  @if not ($hoff == none or $hoff == null) and type-of($hoff) != number {
+    @warn "The $color argument for single-box-shadow is now the 5th argument instead of the 1st.";
+    $tmp-color: $color;
+    $color: $hoff;
+    $hoff: $voff;
+    $voff: $blur;
+    $blur: $spread;
+    $spread: $tmp-color
+  }
+
+  // Need to set these defaults here instead of the arglist to support the above backwards compat handling
+  @if $hoff   == null { $hoff:   $default-box-shadow-h-offset; }
+  @if $voff   == null { $hoff:   $default-box-shadow-v-offset; }
+  @if $blur   == null { $blur:   $default-box-shadow-blur;     }
+  @if $spread == null { $spread: $default-box-shadow-spread;   }
+  @if $color  == null { $color:  $default-box-shadow-color;    }
+
+  @if not ($inset == true or $inset == false or $inset == null or $inset == inset) {
     @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
   }
 
-  @if $color == none {
+  @if $hoff == none {
     @include box-shadow(none);
   } @else {
     $full   : $hoff $voff;
diff --git a/stylesheets/compass/css3/box-sizing.scss b/stylesheets/compass/css3/box-sizing.scss
index 93ff8ac..805f3d8 100644
--- a/stylesheets/compass/css3/box-sizing.scss
+++ b/stylesheets/compass/css3/box-sizing.scss
@@ -1,13 +1,21 @@
-@import "shared";
+// Box Sizing
+
+@import "compass/support";
+
+// The prefixed support threshold for box-sizing.
+// Defaults to the $graceful-usage-threshold.
+$box-sizing-support-threshold: $critical-usage-threshold !default;
+
+// The default box-sizing model when no argument is provided to the box-sizing mixin: [ content-box | border-box | padding-box ]
+//
+// The browser default is content-box, compass defaults to border-box.
+$default-box-sizing: border-box !default;
+
 
 // Change the box model for Mozilla, Webkit, IE8 and the future
 //
-// @param $bs
-//   [ content-box | border-box ]
-
-@mixin box-sizing($bs) {
-  $bs: unquote($bs);
-  @include experimental(box-sizing, $bs,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
-  );
+//     $box-model: [ content-box | border-box | padding-box ]
+@mixin box-sizing($box-model: $default-box-sizing) {
+  $box-model: unquote($box-model);
+  @include prefixed-properties(css3-boxsizing, $box-sizing-support-threshold, (box-sizing: $box-model));
 }
diff --git a/stylesheets/compass/css3/box.scss b/stylesheets/compass/css3/box.scss
index 959ccff..ea96fc8 100644
--- a/stylesheets/compass/css3/box.scss
+++ b/stylesheets/compass/css3/box.scss
@@ -1,111 +1,85 @@
-@import "shared";
+// Flexible Box
+@import "deprecated-support";
 
-// display:box; must be used for any of the other flexbox mixins to work properly
-@mixin display-box {
-  @include experimental-value(display, box,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
-}
+@warn "The compass/css3/box module is DEPRECATED and will be removed in the next release. Please use compass/css3/flexbox instead.";
+
+// @private css3-feature-support variables must always include a list of five boolean values
+$legacy-box-support: -moz, -webkit, not -o, -ms, not -khtml;
 
 // Default box orientation, assuming that the user wants something less block-like
-$default-box-orient: horizontal !default;
+$default-box-orient         : horizontal      !default;
+
+// Default box-align
+$default-box-align          : stretch         !default;
+
+// Default box flex
+$default-box-flex           : 0               !default;
+
+// Default flex group
+$default-box-flex-group     : 1               !default;
+
+// Box direction default value
+$default-box-direction      : normal          !default;
+
+// Default ordinal group
+$default-box-ordinal-group  : 1               !default;
+
+// Default box lines
+$default-box-lines          : single          !default;
+
+// Default box pack
+$default-box-pack           : start           !default;
+
+
+// Apply 'display:box;' to an element.
+// - must be used for any of the other flexbox mixins to work properly
+@mixin display-box {
+  @include experimental-value(display, box, $legacy-box-support...);
+}
 
 // Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]
-@mixin box-orient(
-  $orientation: $default-box-orient
-) {
+@mixin box-orient($orientation: $default-box-orient) {
   $orientation : unquote($orientation);
-  @include experimental(box-orient, $orientation,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+  @include experimental(box-orient, $orientation, $legacy-box-support...);
 }
 
-// Default box-align
-$default-box-align: stretch !default;
-
 // Box align [ start | end | center | baseline | stretch ]
-@mixin box-align(
-  $alignment: $default-box-align
-) {
+@mixin box-align($alignment: $default-box-align) {
   $alignment : unquote($alignment);
-  @include experimental(box-align, $alignment,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+  @include experimental(box-align, $alignment, $legacy-box-support...);
 }
 
-// Default box flex
-$default-box-flex: 0 !default;
-
-// mixin which takes an int argument for box flex. Apply this to the children inside the box.
+// Takes an int argument for box flex. Apply this to the children inside the box.
 //
 // For example: "div.display-box > div.child-box" would get the box flex mixin.
-@mixin box-flex(
-  $flex: $default-box-flex
-) {
-  @include experimental(box-flex, $flex,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+@mixin box-flex($flex: $default-box-flex) {
+  @include experimental(box-flex, $flex, $legacy-box-support...);
 }
 
-// Default flex group
-$default-box-flex-group: 1 !default;
-
-// mixin which takes an int argument for flexible grouping
-@mixin box-flex-group(
-  $group: $default-box-flex-group
-) {
-  @include experimental(box-flex-group, $group,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+// Takes an int argument for flexible grouping
+@mixin box-flex-group($group: $default-box-flex-group) {
+  @include experimental(box-flex-group, $group, $legacy-box-support...);
 }
 
-// default for ordinal group
-$default-box-ordinal-group: 1 !default;
-
-// mixin which takes an int argument for ordinal grouping and rearranging the order
-@mixin box-ordinal-group(
-  $group: $default-ordinal-flex-group
-) {
-  @include experimental(box-ordinal-group, $group,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+// Takes an int argument for ordinal grouping and rearranging the order
+@mixin box-ordinal-group($group: $default-box-ordinal-group) {
+  @include experimental(box-ordinal-group, $group, $legacy-box-support...);
 }
 
-// Box direction default value
-$default-box-direction: normal !default;
-
-// mixin for box-direction [ normal | reverse | inherit ]
-@mixin box-direction(
-  $direction: $default-box-direction
-) {
+// Box direction [ normal | reverse | inherit ]
+@mixin box-direction($direction: $default-box-direction) {
   $direction: unquote($direction);
-  @include experimental(box-direction, $direction,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+  @include experimental(box-direction, $direction, $legacy-box-support...);
 }
 
-// default for box lines
-$default-box-lines: single !default;
-
-// mixin for box lines [ single | multiple ]
-@mixin box-lines(
-  $lines: $default-box-lines
-) {
+// Box lines [ single | multiple ]
+@mixin box-lines($lines: $default-box-lines) {
   $lines: unquote($lines);
-  @include experimental(box-lines, $lines,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+  @include experimental(box-lines, $lines, $legacy-box-support...);
 }
 
-// default for box pack
-$default-box-pack: start !default;
-
-// mixin for box pack [ start | end | center | justify ]
-@mixin box-pack(
-  $pack: $default-box-pack
-) {
+// Box pack [ start | end | center | justify ]
+@mixin box-pack($pack: $default-box-pack) {
   $pack: unquote($pack);
-  @include experimental(box-pack, $pack,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
-}
\ No newline at end of file
+  @include experimental(box-pack, $pack, $legacy-box-support...);
+}
diff --git a/stylesheets/compass/css3/columns.scss b/stylesheets/compass/css3/columns.scss
index 9af9982..0c11a12 100644
--- a/stylesheets/compass/css3/columns.scss
+++ b/stylesheets/compass/css3/columns.scss
@@ -1,58 +1,73 @@
-@import "shared";
+// Columns
+@import "compass/support";
+
+// The prefixed support threshold for columns.
+// Defaults to the $critical-usage-threshold.
+$multicolumn-support-threshold: $critical-usage-threshold !default;
+
 
 // Specify the shorthand `columns` property.
 //
 // Example:
 //
-//     @include columns(20em 2)
+//     @include columns(20em 2);
 @mixin columns($width-and-count) {
-  @include experimental(columns, $width-and-count,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    columns: $width-and-count
+  ));
 }
 
 // Specify the number of columns
 @mixin column-count($count) {
-  @include experimental(column-count, $count,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    column-count: $count
+  ));
 }
 
 // Specify the gap between columns e.g. `20px`
 @mixin column-gap($width) {
-  @include experimental(column-gap, $width,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    column-gap: $width
+  ));
 }
 
 // Specify the width of columns e.g. `100px`
 @mixin column-width($width) {
-  @include experimental(column-width, $width,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    column-width: $width
+  ));
+}
+
+// Specify how many columns an element should span across.
+//
+// * legal values are 1, all
+@mixin column-span($columns) {
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    column-span: $columns
+  ));
 }
 
 // Specify the width of the rule between columns e.g. `1px`
 @mixin column-rule-width($width) {
-  @include experimental(column-rule-width, $width,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    rule-width: $width
+  ));
 }
 
 // Specify the style of the rule between columns e.g. `dotted`.
 // This works like border-style.
 @mixin column-rule-style($style) {
-  @include experimental(column-rule-style, unquote($style),
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    rule-style: $style
+  ));
 }
 
 // Specify the color of the rule between columns e.g. `blue`.
 // This works like border-color.
 @mixin column-rule-color($color) {
-  @include experimental(column-rule-color, $color,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    rule-color: $color
+  ));
 }
 
 // Mixin encompassing all column rule properties
@@ -63,86 +78,135 @@
 // Or the values can be space separated:
 //
 //     @include column-rule(1px solid #c00)
-@mixin column-rule($width, $style: false, $color: false) {
-  $full : -compass-space-list(compact($width, $style, $color));
-  @include experimental(column-rule, $full,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+@mixin column-rule($width, $style: null, $color: null) {
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    column-rule: $width $style $color
+  ));
+}
+
+// All-purpose mixin for setting column breaks.
+//
+// * legal values for $type : before, after, inside
+// * legal values for '$value' are dependent on $type
+//    * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
+//    * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
+//    * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column
+//
+//  Examples:
+//    h2.before {@include column-break(before, always);}
+//    h2.after {@include column-break(after, always); }
+//    h2.inside {@include column-break(inside); }
+//
+//  Which generates:
+//  h2.before {
+//    -webkit-column-break-before: always;
+//    break-before: always;}
+//
+//  h2.after {
+//    -webkit-column-break-after: always;
+//    break-after: always; }
+//
+//  h2.inside {
+//    -webkit-column-break-inside: auto;
+//    break-inside: auto;}
+
+@mixin column-break($type: before, $value: auto){
+  @include with-each-prefix(multicolumn, $multicolumn-support-threshold) {
+    @if $current-prefix == -webkit {
+      // Webkit uses non-standard syntax
+      -webkit-column-break-#{$type}: $value;
+    } @else if $current-prefix == -moz {
+      // Moz uses a different non-standard syntax
+      -moz-page-break-#{$type}: $value;
+    } @else {
+      @include prefix-prop(break-#{$type}, $value);
+    }
+  }
 }
 
-// Mixin for setting column-break-before
+// Mixin for setting break-before
 //
 // * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
 //
-//  Example: 
-//    h2.before {@include column-break-before(always);}
+//  Example:
+//    h2.before {@include break-before(always);}
 //
-//  Which generates: 
+//  Which generates:
 //
-//  h2.before {    
+//  h2.before {
 //    -webkit-column-break-before: always;
-//    column-break-before: always;}
+//    break-before: always;}
+@mixin break-before($value: auto){
+  @include column-break(before, $value);
+}
+
 @mixin column-break-before($value: auto){
-   @include experimental(column-break-before, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
+  @include column-break(before, $value);
+  @warn '"column-break-before" has been deprecated in favor of the official syntax: "break-before".';
 }
 
-// Mixin for setting column-break-after
+// Mixin for setting break-after
 //
 // * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
 //
-//  Example: 
-//    h2.after {@include column-break-after(always); }
+//  Example:
+//    h2.after {@include break-after(always); }
 //
-//  Which generates: 
+//  Which generates:
 //
 //  h2.after {
 //    -webkit-column-break-after: always;
-//    column-break-after: always; }
+//    break-after: always; }
+@mixin break-after($value: auto){
+  @include column-break(after, $value);
+}
+
 @mixin column-break-after($value: auto){
-   @include experimental(column-break-after, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
+  @include column-break(after, $value);
+  @warn '"column-break-after" has been deprecated in favor of the official syntax: "break-after".';
 }
 
-// Mixin for setting column-break-inside
+// Mixin for setting break-inside
 //
 // * legal values are auto, avoid, avoid-page, avoid-column
 //
-//  Example: 
-//    h2.inside {@include column-break-inside();}
-//  Which generates: 
-//  
+//  Example:
+//    h2.inside {@include break-inside();}
+//
+//  Which generates:
+//
 //  h2.inside {
 //    -webkit-column-break-inside: auto;
-//    column-break-inside: auto;}
+//    break-inside: auto;}
+@mixin break-inside($value: auto){
+  @include column-break(inside, $value);
+}
+
 @mixin column-break-inside($value: auto){
-   @include experimental(column-break-inside, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
+  @include column-break(inside, $value);
+  @warn '"column-break-inside" has been deprecated in favor of the official syntax: "break-inside".';
 }
 
-// All-purpose mixin for setting column breaks.
+// Mixin for setting column-span
 //
-// * legal values for $type : before, after, inside 
-// * legal values for '$value' are dependent on $type
-//    * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
-//    * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
-//    * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column
-//  
-//  Examples: 
-//    h2.before {@include column-break(before, always);}
-//    h2.after {@include column-break(after, always); }
-//    h2.inside {@include column-break(inside); }
+// * legal values: none, all
 //
-//  Which generates: 
-//  h2.before {    
-//    -webkit-column-break-before: always;
-//    column-break-before: always;}
-//  
-//  h2.after {
-//    -webkit-column-break-after: always;
-//    column-break-after: always; }
+//  Example:
+//    h2.span {@include column-span();}
+@mixin column-span($span: all){
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    column-span: $span
+  ));
+}
+
+// Mixin for setting column-fill
 //
-//  h2.inside {
-//    -webkit-column-break-inside: auto;
-//    column-break-inside: auto;}
- 
-@mixin column-break($type: before, $value: auto){
-   @include experimental("column-break-#{$type}", $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
-}
\ No newline at end of file
+// * legal values: auto, balance
+//
+//  Example:
+//    h2.fill {@include column-fill();}
+@mixin column-fill($fill: balance){
+  @include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
+    column-fill: $fill
+  ));
+}
diff --git a/stylesheets/compass/css3/deprecated-support.scss b/stylesheets/compass/css3/deprecated-support.scss
new file mode 100644
index 0000000..73de129
--- /dev/null
+++ b/stylesheets/compass/css3/deprecated-support.scss
@@ -0,0 +1,272 @@
+@import "compass/support";
+
+// XXX Remove these
+$experimental-support-for-mozilla: true !default;
+$experimental-support-for-webkit: true !default;
+$experimental-support-for-opera: true !default;
+$experimental-support-for-microsoft: true !default;
+$experimental-support-for-khtml: false !default;
+$experimental-support-for-svg: false !default;
+$legacy-support-for-ie6: true !default;
+$legacy-support-for-ie7: true !default;
+$legacy-support-for-ie8: true !default;
+$legacy-support-for-mozilla: true !default;
+$legacy-support-for-webkit: true !default;
+
+// This mixin provides basic support for CSS3 properties and
+// their corresponding experimental CSS2 properties when
+// the implementations are identical except for the property
+// prefix.
+@mixin experimental($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
+  @if $khtml   and $experimental-support-for-khtml     {  -khtml-#{$property} : $value; }
+  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
+  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
+  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
+  @if $official                                        {         #{$property} : $value; }
+}
+
+// This mixin is a shortcut for applying only a single experimental value
+@mixin experimental-only-for($property, $value,
+  $moz      : false,
+  $webkit   : false,
+  $o        : false,
+  $ms       : false,
+  $khtml    : false,
+  $official : false
+) {
+  @include experimental($property, $value, $moz, $webkit, $o, $ms, $khtml, $official);
+}
+
+// Same as experimental(), but for cases when the property is the same and the value is vendorized
+@mixin experimental-value($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
+  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
+  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
+  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
+  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
+  @if $official                                        { #{$property} :         #{$value}; }
+}
+
+// @private
+// Check a given support list for support of a particular browser
+@function supported(
+  $prefix,
+  $support-list
+) {
+  $keys: moz, webkit, o, ms, khtml, official;
+  $index: index($keys, $prefix);
+
+  @if $index {
+    @if $index == 6 and length($support-list) == 5 {
+      @return official;
+    } @else {
+      @return nth($support-list, $index);
+    }
+  } @else {
+    @warn 'Please pass a valid browser for $prefix: moz, webkit, o, ms, khtml, or official.';
+  }
+}
+
+// A debug tool for checking browser support
+@mixin debug-support-matrix($experimental: true, $ie: true) {
+  @debug  #{'$moz-'}$experimental-support-for-mozilla
+          #{'$webkit-'}$experimental-support-for-webkit
+          #{'$opera-'}$experimental-support-for-opera
+          #{'$microsoft-'}$experimental-support-for-microsoft
+          #{'$khtml-'}$experimental-support-for-khtml;
+  @debug  #{'$ie6-'}$legacy-support-for-ie6
+          #{'$ie7-'}$legacy-support-for-ie7
+          #{'$ie8-'}$legacy-support-for-ie8;
+}
+
+// Capture the current exerimental support settings
+@function capture-experimental-matrix() {
+  @return $experimental-support-for-mozilla
+          $experimental-support-for-webkit
+          $experimental-support-for-opera
+          $experimental-support-for-microsoft
+          $experimental-support-for-khtml;
+}
+
+// Capture the current legacy-ie support settings
+@function capture-legacy-ie-matrix() {
+  @return $legacy-support-for-ie6
+          $legacy-support-for-ie7
+          $legacy-support-for-ie8;
+}
+
+// Capture and store support
+$experimental-matrix: capture-experimental-matrix();
+$legacy-ie-matrix: capture-legacy-ie-matrix();
+
+@mixin capture-experimental-matrix {
+  $experimental-matrix: capture-experimental-matrix();
+}
+
+@mixin capture-legacy-ie-matrix {
+  $legacy-ie-matrix: capture-legacy-ie-matrix();
+}
+
+@mixin capture-support-matrix {
+  @include capture-experimental-matrix;
+  @include capture-legacy-ie-matrix;
+}
+
+// Change the experimental-support settings in specific contexts.
+@mixin set-experimental-support(
+  $moz    : false,
+  $webkit : false,
+  $o      : false,
+  $ms     : false,
+  $khtml  : false
+) {
+  $experimental-support-for-mozilla   : $moz;
+  $experimental-support-for-webkit    : $webkit;
+  $experimental-support-for-opera     : $o;
+  $experimental-support-for-microsoft : $ms;
+  $experimental-support-for-khtml     : $khtml;
+}
+
+@mixin capture-and-set-experimental(
+  $moz    : false,
+  $webkit : false,
+  $o      : false,
+  $ms     : false,
+  $khtml  : false
+) {
+  @include capture-experimental-matrix;
+  @include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
+}
+
+@mixin capture-and-adjust-experimental(
+  $moz    : $experimental-support-for-mozilla,
+  $webkit : $experimental-support-for-webkit,
+  $o      : $experimental-support-for-opera,
+  $ms     : $experimental-support-for-microsoft,
+  $khtml  : $experimental-support-for-khtml
+) {
+  @include capture-experimental-matrix;
+  @include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
+}
+
+// Change the legacy-support-for-ie* settings in specific contexts.
+@mixin set-legacy-ie-support(
+  $ie6: false,
+  $ie7: false,
+  $ie8: false
+) {
+  $legacy-support-for-ie6: $ie6;
+  $legacy-support-for-ie7: $ie7;
+  $legacy-support-for-ie8: $ie8;
+}
+
+@mixin capture-and-set-legacy-ie(
+  $ie6: false,
+  $ie7: false,
+  $ie8: false
+) {
+  @include capture-legacy-ie-matrix;
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+}
+
+@mixin capture-and-adjust-legacy-ie(
+  $ie6: $legacy-support-for-ie6,
+  $ie7: $legacy-support-for-ie7,
+  $ie8: $legacy-support-for-ie8
+) {
+  @include capture-and-set-legacy-ie($ie6, $ie7, $ie8);
+}
+
+// Capture current browser support matrix, and set a new matrix of support.
+@mixin capture-and-set-support(
+  $moz    : false,
+  $webkit : false,
+  $o      : false,
+  $ms     : false,
+  $khtml  : false,
+  $ie6    : false,
+  $ie7    : false,
+  $ie8    : false
+) {
+  // Capture the current state
+  @include capture-support-matrix;
+
+  // Change support settings
+  @include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+}
+
+// Capture current browser support matrix, and set a new matrix of support.
+@mixin capture-and-adjust-support(
+  $moz        : $experimental-support-for-mozilla,
+  $webkit     : $experimental-support-for-webkit,
+  $o          : $experimental-support-for-opera,
+  $ms         : $experimental-support-for-microsoft,
+  $khtml      : $experimental-support-for-khtml,
+  $ie6        : $legacy-support-for-ie6,
+  $ie7        : $legacy-support-for-ie7,
+  $ie8        : $legacy-support-for-ie8
+) {
+  @include capture-and-set-support($moz, $webkit, $o, $ms, $khtml, $ie6, $ie7, $ie8);
+}
+
+
+// This mixin allows you to change the experimental support settings for
+// child (@content) styles.
+@mixin with-only-support-for(
+  $moz    : false,
+  $webkit : false,
+  $o      : false,
+  $ms     : false,
+  $khtml  : false,
+  $ie6    : false,
+  $ie7    : false,
+  $ie8    : false
+) {
+  // Capture current state
+  $wo-experimental-matrix : capture-experimental-matrix();
+  $wo-legacy-ie-matrix    : capture-legacy-ie-matrix();
+
+  // Set new states
+  @include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+
+  // Apply styles
+  @content;
+
+  // Return to original support settings
+  @include set-experimental-support($wo-experimental-matrix...);
+  @include set-legacy-ie-support($wo-legacy-ie-matrix...);
+}
+
+// This mixin is a shortcut for making slight adjustments to browser support
+// for child (@content) styles
+@mixin adjust-support-for(
+    $moz        : $experimental-support-for-mozilla,
+    $webkit     : $experimental-support-for-webkit,
+    $o          : $experimental-support-for-opera,
+    $ms         : $experimental-support-for-microsoft,
+    $khtml      : $experimental-support-for-khtml,
+    $ie6        : $legacy-support-for-ie6,
+    $ie7        : $legacy-support-for-ie7,
+    $ie8        : $legacy-support-for-ie8
+) {
+  @include with-only-support-for($moz, $webkit, $o, $ms, $khtml, $ie6, $ie7, $ie8) {
+    @content;
+  }
+}
diff --git a/stylesheets/compass/css3/filter.scss b/stylesheets/compass/css3/filter.scss
index cd6eb19..cf644d5 100644
--- a/stylesheets/compass/css3/filter.scss
+++ b/stylesheets/compass/css3/filter.scss
@@ -1,23 +1,50 @@
-@import "shared";
+// Filter
+@import "compass/support";
+
+// The prefixed support threshold for css filter effects.
+// Defaults to the $graceful-usage-threshold.
+$filter-support-threshold: $graceful-usage-threshold !default;
+
 
 // Provides cross-browser support for the upcoming (?) css3 filter property.
 //
-// Each filter argument should adhere to the standard css3 syntax for the
-// filter property.
-@mixin filter (
-  $filter-1,
-  $filter-2 : false,
-  $filter-3 : false,
-  $filter-4 : false,
-  $filter-5 : false,
-  $filter-6 : false,
-  $filter-7 : false,
-  $filter-8 : false,
-  $filter-9 : false,
-  $filter-10: false
-) {
-  $filter : compact($filter-1, $filter-2, $filter-3, $filter-4, $filter-5, $filter-6, $filter-7, $filter-8, $filter-9, $filter-10);
-  @include experimental(filter, $filter,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
-  );
+// The filter argument should adhere to the standard css3 syntax
+// for the filter property.
+@mixin filter($filters) {
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    filter: $filters
+  ));
+}
+
+// @private Apply filter-margins
+@mixin apply-filter-margin($position, $width) {
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    filter-margin-#{$position}: $width
+  ));
+}
+
+// filter-margin-top
+@mixin filter-margin-top($width) { @include apply-filter-margin(top, $width); }
+
+// filter-margin-right
+@mixin filter-margin-right($width) { @include apply-filter-margin(right, $width); }
+
+// filter-margin-bottom
+@mixin filter-margin-bottom($width) { @include apply-filter-margin(bottom, $width); }
+
+// filter-margin-left
+@mixin filter-margin-left($width) { @include apply-filter-margin(left, $width); }
+
+// filter-margin
+@mixin filter-margin($widths) {
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    filter-margin: $widths
+  ));
+}
+
+// color-interpolation-filters (auto | sRGB | linearRGB )
+@mixin color-interpolation-filters($value) {
+  @include prefixed-properties(css-filters, $filter-support-threshold,(
+    color-interpolation-filters: $value
+  ));
 }
diff --git a/stylesheets/compass/css3/flexbox.scss b/stylesheets/compass/css3/flexbox.scss
new file mode 100644
index 0000000..29e3318
--- /dev/null
+++ b/stylesheets/compass/css3/flexbox.scss
@@ -0,0 +1,156 @@
+// There are two ways to use the flexbox module.
+// If you're using the final version of the spec,
+// you can use the property mixins as elsewhere in
+// the css3 module.
+//
+// You can also use the flexbox prefixing mixin `flexbox`.
+// This mixin takes an optional `$version` argument which
+// allows you to specify which spec version the properties
+// are using so that they will be prefixed correctly.
+//
+// Example:
+//
+//     .flex-column {
+//       /* For flexbox spec v1 */
+//       @include flexbox((
+//         display: box,
+//         box-orient: vertical,
+//       ), $version: 1);
+//       
+//       /* For flexbox spec v2 */
+//       @include flexbox((
+//         display: flexbox,
+//         flex-direction: column,
+//       ), $version: 2);
+//       
+//       /* Latest Spec */
+//       @include flexbox((
+//         display: flex,
+//         flex-direction: column,
+//       ));
+//     }
+//
+// Which compiles to:
+//
+//     .flex-row {
+//       /* For flexbox spec v1 */
+//       display: -moz-box;
+//       -moz-box-orient: vertical;
+//       display: -webkit-box;
+//       -webkit-box-orient: vertical;
+//       
+//       /* For flexbox spec v2 */
+//       display: -ms-flexbox;
+//       -ms-flex-direction: column;
+//       
+//       /* Latest Spec */
+//       display: -webkit-flex;
+//       -webkit-flex-direction: column;
+//       display: flex;
+//       flex-direction: column;
+//     }
+
+@import "compass/support";
+
+$flexbox-support-threshold: $critical-usage-threshold !default;
+
+
+// @private
+$flexbox-capability-options: (
+  (full-support: true),
+  (partial-support: true, spec-versions: 3)
+);
+
+// This is the underlying implementation for all the other mixins in this module.
+// It is the only way to access prefix support for older versions of the spec.
+//
+// `$properties`: map of property-value pairs that should be prefixed
+
+// `$version1: the version of the spec to use when considering what prefix
+// to appply. Defaults to the most recent (spec version 3). Only the most
+// recent version of the spec outputs an unprefixed version.
+@mixin flexbox($properties, $version: null) {
+  $capability-options: $flexbox-capability-options;
+  @if $version {
+    $capability-options: (partial-support: true, spec-versions: $version);
+  }
+
+  @include with-each-prefix(flexbox, $flexbox-support-threshold, $capability-options) {
+    // Don't output unprefixed versions when the spec version is not the final version
+    @if $version and $current-prefix or not $version or $version == 3 {
+      @each $prop, $value in $properties {
+        @if $prop == display {
+          display: prefix-identifier($value);
+        } @else {
+          @include prefix-prop($prop, $value);
+        }
+      }
+    }
+  }
+}
+
+// Values for $display are: flex (default), inline-flex
+@mixin display-flex($display: flex) {
+  @include flexbox((display: $display));
+}
+
+// Values: row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+  @include flexbox((flex-direction: $direction));
+}
+
+// Values: nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+  @include flexbox((flex-wrap: $wrap));
+}
+
+// Shorthand for flex-direction and flex-wrap.
+@mixin flex-flow($flow) {
+  @include flexbox((flex-flow: $flow));
+}
+
+// Accepts an integer
+@mixin order($order) {
+  @include flexbox((order: $order));
+}
+
+// Shorthand for flex-grow, flex-shrink and optionally flex-basis.
+// Space separated, in that order.
+@mixin flex($flex) {
+  @include flexbox((flex: $flex));
+}
+
+// Accepts a number.
+@mixin flex-grow($flex-grow) {
+  @include flexbox((flex-grow: $flex-grow));
+}
+
+// Accepts a number.
+@mixin flex-shrink($flex-shrink) {
+  @include flexbox((flex-shrink: $flex-shrink));
+}
+
+// Accepts any legal value for the width property.
+@mixin flex-basis($flex-basis) {
+  @include flexbox((flex-basis: $flex-basis));
+}
+
+// Legal values: flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($justify-content) {
+  @include flexbox((justify-content: $justify-content));
+}
+
+// Legal values: flex-start | flex-end | center | baseline | stretch
+@mixin align-items($align-items) {
+  @include flexbox((align-items: $align-items));
+}
+
+// Legal values: auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($align-self) {
+  @include flexbox((align-self: $align-self));
+}
+
+// Legal values: flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($align-content) {
+  @include flexbox((align-content: $align-content));
+}
diff --git a/stylesheets/compass/css3/font-face.scss b/stylesheets/compass/css3/font-face.scss
index bd3db34..50c8062 100644
--- a/stylesheets/compass/css3/font-face.scss
+++ b/stylesheets/compass/css3/font-face.scss
@@ -1,4 +1,4 @@
-@import "shared";
+@import "compass/support";
 
 // Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
 //
@@ -16,7 +16,7 @@
 // [font generator](http://www.fontsquirrel.com/fontface/generator)
 //
 
-// In order to refer to a specific style of the font in your stylesheets as 
+// In order to refer to a specific style of the font in your stylesheets as
 // e.g. "font-style: italic;",  you may add a couple of @font-face includes
 // containing the respective font files for each style and specying
 // respective the $style parameter.
@@ -24,8 +24,8 @@
 // Order of the includes matters, and it is: normal, bold, italic, bold+italic.
 
 @mixin font-face(
-  $name, 
-  $font-files, 
+  $name,
+  $font-files,
   $eot: false,
   $weight: false,
   $style: false
@@ -35,7 +35,7 @@
     font-family: quote($name);
     @if $eot {
       src: font-url($eot);
-      $font-files: font-url($iefont) unquote("format('eot')"), $font-files; 
+      $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files;
     }
     src: $font-files;
     @if $weight {
diff --git a/stylesheets/compass/css3/hyphenation.scss b/stylesheets/compass/css3/hyphenation.scss
index a4f5808..18c05a8 100644
--- a/stylesheets/compass/css3/hyphenation.scss
+++ b/stylesheets/compass/css3/hyphenation.scss
@@ -1,9 +1,12 @@
-@import "shared";
-
 // Mixins to support specific CSS Text Level 3 elements
-//
-//
-//
+
+@import "compass/support";
+
+// The the user threshold for hyphens support.
+// Defaults to `$graceful-usage-threshold`.
+$hyphens-support-threshold: $graceful-usage-threshold !default;
+
+
 // Mixin for word-break properties
 // http://www.w3.org/css3-text/#word-break
 // * legal values for $type : normal, keep-all, break-all
@@ -13,25 +16,16 @@
 //
 // Which generates:
 //    p.wordBreak {
-//      -ms-word-break: break-all;
 //      word-break: break-all;
 //      word-break: break-word;}
 //
 @mixin word-break($value: normal){
+  word-break: $value;
   @if $value == break-all {
-    //Most browsers handle the break-all case the same...
-    @include experimental(word-break, $value,
-      not -moz, not -webkit, not -o, -ms, not -khtml, official
-    );
     //Webkit handles break-all differently... as break-word
-    @include experimental(word-break, break-word,
-      not -moz, not -webkit, not -o, not -ms, not -khtml, official
-    );
-  }
-  @else {
-    @include experimental(word-break, $value,
-      not -moz, not -webkit, not -o, -ms, not -khtml, official
-    );
+    @include with-prefix(-webkit) {
+      word-break: break-word;
+    }
   }
 }
 
@@ -50,9 +44,9 @@
 //    hyphens: auto;}
 //
 @mixin hyphens($value: auto){
-  @include experimental(hyphens, $value,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
-  );
+  @include prefixed-properties(css-hyphens, $hyphens-support-threshold, (
+    hyphens: $value
+  ));
 }
 
 // Mixin for x-browser hyphenation based on @auchenberg's post:
@@ -71,7 +65,7 @@
 //      -webkit-hyphens: auto;
 //      hyphens: auto;}
 //
-@mixin hyphenation{
+@mixin hyphenation {
   @include word-break(break-all);
   @include hyphens;
 }
diff --git a/stylesheets/compass/css3/images.scss b/stylesheets/compass/css3/images.scss
index e241776..0a0a512 100644
--- a/stylesheets/compass/css3/images.scss
+++ b/stylesheets/compass/css3/images.scss
@@ -1,77 +1,105 @@
-@import "shared";
+@import "compass/support";
 @import "compass/utilities/general/hacks";
 
+$gradient-support-threshold: $graceful-usage-threshold !default;
+$svg-gradient-shim-threshold: $graceful-usage-threshold !default;
+$border-image-support-threshold: $graceful-usage-threshold !default;
+$owg-threshold: $graceful-usage-threshold !default;
+
+// Compass assumes you will use the official gradient syntax,
+// unless otherwise instructed.
+$use-legacy-gradient-syntax: false !default;
+
+// Create a linear gradient using standard official or legacy syntax.
+// This function must be included in one of the following
+// image module mixins to work properly.
+@function linear-gradient($angle, $details...) {
+  $legacy-syntax: $use-legacy-gradient-syntax;
+
+  @if type-of($angle) != 'number' {
+    $angle: compact($angle);
+    $legacy-syntax: if(index($angle, 'to'), false, true);
+  }
+
+  @if $legacy-syntax {
+    @return _linear-gradient_legacy($angle, $details...);
+  } @else {
+    @return _linear-gradient($angle, $details...);
+  }
+}
+
+// These browsers support svg but not gradients
+// so we can shim the gradient with an inline svg file.
+$browsers-supporting-svg-but-not-gradients: (ie: "9", opera: "9.5-9.6");
+
+// These browsers require the old webkit gradient syntax
+$browsers-supporting-old-webkit-gradients: (android: ("2.1", "3"));
+
+@mixin each-gradient-prefix($values) {
+  @if prefixed(-svg, $values) {
+    @include for-legacy-browsers($browsers-supporting-svg-but-not-gradients,
+                                 $svg-gradient-shim-threshold)
+    {
+      @include with-prefix(-svg) {
+        @content;
+      }
+    }
+  }
+  @if prefixed(-owg, $values) {
+    @include for-legacy-browsers($browsers-supporting-old-webkit-gradients,
+                                 $owg-threshold)
+    {
+      @include with-prefix(-owg) {
+        @content;
+      }
+    }
+  }
+  @include with-each-prefix(css-gradients, $gradient-support-threshold) {
+    @if $current-prefix {
+      @if prefixed($current-prefix, $values) {
+        @content;
+      } @else if $debug-browser-support {
+        /* There is not a value that needs to be prefixed with #{$current-prefix} in: #{$values} */
+      }
+    } @else {
+      @content;
+    }
+  }
+}
+
+@mixin image-property($property, $values...) {
+  @include each-gradient-prefix($values) {
+    @if $current-prefix {
+      #{$property}: prefix($current-prefix, $values);
+    } @else {
+      #{$property}: $values;
+    }
+    @content;
+  }
+}
+
 // Background property support for vendor prefixing within values.
-@mixin background(
-  $background-1,
-  $background-2: false,
-  $background-3: false,
-  $background-4: false,
-  $background-5: false,
-  $background-6: false,
-  $background-7: false,
-  $background-8: false,
-  $background-9: false,
-  $background-10: false
-) {
-  $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
-                        $background-6, $background-7, $background-8, $background-9, $background-10);
-  $mult-bgs: -compass-list-size($backgrounds) > 1;
-  $add-pie-bg: prefixed(-pie,   $backgrounds) or $mult-bgs;
-  @if $experimental-support-for-svg          and prefixed(-svg,    $backgrounds) {      background:    -svg($backgrounds); }
-  @if $support-for-original-webkit-gradients and prefixed(-owg,    $backgrounds) {      background:    -owg($backgrounds); }
-  @if $experimental-support-for-webkit       and prefixed(-webkit, $backgrounds) {      background: -webkit($backgrounds); }
-  @if $experimental-support-for-mozilla      and prefixed(-moz,    $backgrounds) {      background:    -moz($backgrounds); }
-  @if $experimental-support-for-opera        and prefixed(-o,      $backgrounds) {      background:      -o($backgrounds); }
-  @if $experimental-support-for-pie          and $add-pie-bg                     { -pie-background:    -pie($backgrounds); }
-                                                                                        background:         $backgrounds ;
+@mixin background($backgrounds...) {
+  @include image-property(background, $backgrounds...);
 }
 
-@mixin background-with-css2-fallback(
-  $background-1,
-  $background-2: false,
-  $background-3: false,
-  $background-4: false,
-  $background-5: false,
-  $background-6: false,
-  $background-7: false,
-  $background-8: false,
-  $background-9: false,
-  $background-10: false
-) {
-  $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
-                        $background-6, $background-7, $background-8, $background-9, $background-10);
-  $mult-bgs: -compass-list-size($backgrounds) > 1;
-  $simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);
-  @if not blank($simple-background) { background: $simple-background; }
-  @include background($background-1, $background-2, $background-3, $background-4, $background-5,
-                      $background-6, $background-7, $background-8, $background-9, $background-10);
+// Set any number of background layers, along with a fallback.
+// The final argument will be output separately, first, as a css2 fallback.
+@mixin background-with-css2-fallback($backgrounds...) {
+  @if length($backgrounds) > 1 or prefixed(-css2, $backgrounds) {
+    background: -css2(nth($backgrounds, -1));
+  }
+  @include background($backgrounds...);
 }
 
 
 // Background image property support for vendor prefixing within values.
-@mixin background-image(
-  $image-1,
-  $image-2: false,
-  $image-3: false,
-  $image-4: false,
-  $image-5: false,
-  $image-6: false,
-  $image-7: false,
-  $image-8: false,
-  $image-9: false,
-  $image-10: false
-) {
-  $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
-  $add-pie-bg: prefixed(-pie,   $images) or -compass-list-size($images) > 1;
-
-  @if $experimental-support-for-svg          and prefixed(-svg,    $images) { background-image:    -svg($images); background-size: 100%; }
-  @if $support-for-original-webkit-gradients and prefixed(-owg,    $images) { background-image:    -owg($images); }
-  @if $experimental-support-for-webkit       and prefixed(-webkit, $images) { background-image: -webkit($images); }
-  @if $experimental-support-for-mozilla      and prefixed(-moz,    $images) { background-image:    -moz($images); }
-  @if $experimental-support-for-opera        and prefixed(-o,      $images) { background-image:      -o($images); }
-  @if $experimental-support-for-pie          and $add-pie-bg                { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
-                                                                              background-image:         $images ;
+@mixin background-image($images...) {
+  @include image-property(background-image, $images...) {
+    @if $current-prefix == -svg {
+      background-size: 100%;
+    }
+  }
 }
 
 // Emit a IE-Specific filters that renders a simple linear gradient.
@@ -80,10 +108,14 @@
 // any background-image properties that you have specified.
 //
 // For the `$orientation` parameter, you can pass `vertical` or `horizontal`.
-@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
-  @include has-layout;
-  $gradient-type: if($orientation == vertical, 0, 1);
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
+@mixin filter-gradient(
+  $start-color,
+  $end-color,
+  $orientation: vertical
+) {
+  @include for-legacy-browsers((ie: "8"), $gradient-support-threshold) {
+    @include has-layout;
+    $gradient-type: if($orientation == vertical, 0, 1);
     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
   }
 }
@@ -91,42 +123,30 @@
 
 // Border image property support for vendor prefixing properties and values.
 @mixin border-image($value) {
-  @if $experimental-support-for-mozilla      {    -moz-border-image:    -moz(reject(-compass-list($value), fill)); }
-  @if $support-for-original-webkit-gradients { -webkit-border-image:    -owg(reject(-compass-list($value), fill)); }
-  @if $experimental-support-for-webkit       { -webkit-border-image: -webkit(reject(-compass-list($value), fill)); }
-  @if $experimental-support-for-opera        {      -o-border-image:      -o(reject(-compass-list($value), fill)); }
-  @if $experimental-support-for-svg          {         border-image:    -svg(reject(-compass-list($value), fill)); }
-                                                       border-image:                              $value;
+  @include with-each-prefix(border-image, $border-image-support-threshold) {
+    $border-prefix: $current-prefix;
+    @include each-gradient-prefix($value) {
+      @if $current-prefix and prefixed($current-prefix, $value) {
+        $legacy-value: reject($value, fill);
+        @include prefix-prop(border-image, prefix($current-prefix, $legacy-value), $prefix: $border-prefix);
+      } @else {
+        @include prefix-prop(border-image, $value, $prefix: $border-prefix);
+      }
+    }
+  }
 }
 
 // List style image property support for vendor prefixing within values.
 @mixin list-style-image($image) {
-  @if $experimental-support-for-mozilla      and prefixed(-moz,    $image) { list-style-image:    -moz($image); }
-  @if $support-for-original-webkit-gradients and prefixed(-owg,    $image) { list-style-image:    -owg($image); }
-  @if $experimental-support-for-webkit       and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
-  @if $experimental-support-for-opera        and prefixed(-o,      $image) { list-style-image:      -o($image); }
-  @if $experimental-support-for-svg          and prefixed(-svg,    $image) { list-style-image:    -svg($image); }
-                                                                             list-style-image:         $image ;
+  @include image-property(list-style-image, $image);
 }
 
 // List style property support for vendor prefixing within values.
 @mixin list-style($value) {
-  $value: -compass-list($value);
-  @if $experimental-support-for-mozilla      and prefixed(-moz,    $value) { list-style-image:    -moz($value); }
-  @if $support-for-original-webkit-gradients and prefixed(-owg,    $value) { list-style-image:    -owg($value); }
-  @if $experimental-support-for-webkit       and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
-  @if $experimental-support-for-opera        and prefixed(-o,      $value) { list-style-image:      -o($value); }
-  @if $experimental-support-for-svg          and prefixed(-svg,    $value) { list-style-image:    -svg($value); }
-                                                                             list-style-image:         $value ;
+  @include image-property(list-style, $value);
 }
 
 // content property support for vendor prefixing within values.
 @mixin content($value) {
-  $value: -compass-list($value);
-  @if $experimental-support-for-mozilla      and prefixed(-moz,    $value) { content:    -moz($value); }
-  @if $support-for-original-webkit-gradients and prefixed(-owg,    $value) { content:    -owg($value); }
-  @if $experimental-support-for-webkit       and prefixed(-webkit, $value) { content: -webkit($value); }
-  @if $experimental-support-for-opera        and prefixed(-o,      $value) { content:      -o($value); }
-  @if $experimental-support-for-svg          and prefixed(-svg,    $value) { content:    -svg($value); }
-                                                                             content:         $value ;
+  @include image-property(content, $value);
 }
diff --git a/stylesheets/compass/css3/inline-block.scss b/stylesheets/compass/css3/inline-block.scss
index 75519b1..2f8176e 100644
--- a/stylesheets/compass/css3/inline-block.scss
+++ b/stylesheets/compass/css3/inline-block.scss
@@ -1,4 +1,8 @@
-@import "shared";
+@import "compass/support";
+
+// The legacy support for inline-block.
+// Defaults to the $graceful-usage-threshold.
+$inline-block-support-threshold: $graceful-usage-threshold !default;
 
 // Set `$inline-block-alignment` to `none` or `false` to disable the output
 // of a vertical-align property in the inline-block mixin.
@@ -6,17 +10,22 @@
 $inline-block-alignment: middle !default;
 
 // Provides a cross-browser method to implement `display: inline-block;`
-@mixin inline-block($alignment: $inline-block-alignment) {
-  @if $legacy-support-for-mozilla {
+@mixin inline-block($alignment: $inline-block-alignment, $ie-alignment: auto) {
+  // legacy support for VERY old firefox
+  @if support-legacy-browser("firefox", "2", $threshold: $inline-block-support-threshold) {
     display: -moz-inline-stack;
   }
+  // standard
   display: inline-block;
   @if $alignment and $alignment != none {
     vertical-align: $alignment;
   }
-  @if $legacy-support-for-ie {
-    *vertical-align: auto;
-    zoom: 1;
+  // legacy IE support
+  @if support-legacy-browser("ie", "7", $threshold: $inline-block-support-threshold) {
+    @if $ie-alignment and $ie-alignment != none {
+      *vertical-align: $ie-alignment;
+    }
+    *zoom: 1;
     *display: inline;
   }
 }
diff --git a/stylesheets/compass/css3/opacity.scss b/stylesheets/compass/css3/opacity.scss
index fc497ff..a738dd7 100644
--- a/stylesheets/compass/css3/opacity.scss
+++ b/stylesheets/compass/css3/opacity.scss
@@ -1,4 +1,8 @@
-@import "shared";
+@import "compass/support";
+
+// The support usage threshold for opacity. Defaults to the global
+// threshold for graceful degradation.
+$opacity-usage-threshold: $graceful-usage-threshold !default;
 
 // Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
 //
@@ -6,8 +10,12 @@
 //         A number between 0 and 1, where 0 is transparent and 1 is opaque.
 
 @mixin opacity($opacity) {
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
-    filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
+  @include for-legacy-browser("ie", "8", $threshold: $opacity-usage-threshold) {
+    @if $opacity == 1 {
+      filter: unquote("progid:DXImageTransform.Microsoft.Alpha(enabled=false)");
+    } @else {
+      filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
+    }
   }
   opacity: $opacity;
 }
diff --git a/stylesheets/compass/css3/pie.scss b/stylesheets/compass/css3/pie.scss
index 81e2e51..dd8c80d 100644
--- a/stylesheets/compass/css3/pie.scss
+++ b/stylesheets/compass/css3/pie.scss
@@ -1,73 +1 @@
-$experimental-support-for-pie: true;
-
-// It is recommended that you use Sass's @extend directive to apply the behavior
-// to your PIE elements. To assist you, Compass provides this variable.
-// When set, it will cause the `@include pie` mixin to extend this class.
-// The class name you provide should **not** include the `.`.
-$pie-base-class: false !default;
-
-// The default approach to using PIE.
-// Can be one of:
-//
-// * relative (default)
-// * z-index
-// * none
-$pie-default-approach: relative !default;
-
-// The location of your PIE behavior file
-// This should be root-relative to your web server
-// relative assets don't work. It is recommended that
-// you set this yourself.
-$pie-behavior: stylesheet-url("PIE.htc") !default;
-
-// When using the z-index approach, the
-// first ancestor of the PIE element at
-// or before the container's opaque background
-// should have a z-index set as well to ensure
-// propert z-index stacking.
-//
-// The `$position` argument must be some non-static
-// value (absolute, relative, etc.)
-@mixin pie-container($z-index: 0, $position: relative) {
-  z-index: $z-index;
-  position: $position;
-}
-
-// PIE elements must have this behavior attached to them.
-// IE is broken -- it doesn't think of behavior urls as
-// relative to the stylesheet. It considers them relative
-// to the webpage. As a result, you cannot reliably use
-// compass's relative_assets with PIE.
-// 
-// * `$approach` - one of: relative, z-index, or none
-// * `$z-index` - when using the z-index approach, this
-//                is the z-index that is applied.
-@mixin pie-element(
-  $approach: $pie-default-approach,
-  $z-index: 0
-) {
-  behavior: $pie-behavior;
-  @if $approach == relative {
-    position: relative;
-  }
-  @else if $approach == z-index {
-    z-index: $z-index;
-  }
-}
-
-// a smart mixin that knows to extend or include pie-element according
-// to your stylesheet's configuration variables.
-@mixin pie($base-class: $pie-base-class) {
-  @if $base-class {
-    @extend .#{$base-class};
-  }
-  @else {
-    @include pie-element;
-  }
-}
-
-// Watch `$n` levels of ancestors for changes to their class attribute
-// So that cascading styles will work correctly on the PIE element.
-@mixin pie-watch-ancestors($n) {
-  -pie-watch-ancestors: $n;
-}
\ No newline at end of file
+@warn "Support for CSS3Pie has been removed.";
diff --git a/stylesheets/compass/css3/regions.scss b/stylesheets/compass/css3/regions.scss
index 9b2f27c..d300e77 100644
--- a/stylesheets/compass/css3/regions.scss
+++ b/stylesheets/compass/css3/regions.scss
@@ -1,22 +1,27 @@
-@import "shared";
+// Regions
+
+@import "compass/support";
+
+// The prefixed support threshold for css regions.
+// Defaults to the $graceful-usage-threshold.
+$regions-support-threshold: $graceful-usage-threshold !default;
+
 
 // Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
 //
-// $target is a value you use to link two regions of your css. Give the source of your content the flow-into property, and give your target container the flow-from property.
+// $target is a value you use to link two regions of your css.
+// Give the source of your content the flow-into property,
+// and give your target container the flow-from property.
 //
 // For a visual explanation, see the diagrams at Chris Coyier's
 // [CSS-Tricks](http://css-tricks.com/content-folding/)
 
 @mixin flow-into($target) {
   $target: unquote($target);
-  @include experimental(flow-into, $target,
-    not -moz, -webkit, not -o, -ms, not -khtml, not official
-  );
+  @include prefixed-properties(css-regions, $regions-support-threshold, (flow-into: $target));
 }
 
 @mixin flow-from($target) {
   $target: unquote($target);
-  @include experimental(flow-from, $target,
-    not -moz, -webkit, not -o, -ms, not -khtml, not official
-  );
-}
\ No newline at end of file
+  @include prefixed-properties(css-regions, $regions-support-threshold, (flow-from: $target));
+}
diff --git a/stylesheets/compass/css3/selection.scss b/stylesheets/compass/css3/selection.scss
new file mode 100644
index 0000000..f87ee0e
--- /dev/null
+++ b/stylesheets/compass/css3/selection.scss
@@ -0,0 +1,59 @@
+@import "compass/support";
+@import "compass/utilities/color";
+
+// The prefixed support threshold for ::selection.
+// Defaults to the $graceful-usage-threshold.
+$selection-support-threshold: $graceful-usage-threshold !default;
+
+// Style selected text.
+//
+// At this time, only two CSS properties are supported in most browsers
+// during selection: color and background-color. Firefox supports the
+// text-shadow property.
+//
+// At the stylesheet root, include the mixin within the * selector.
+//
+//     * {
+//       @include selection(#fe57a1, #fff)
+//     }
+//
+// If a specific element or selector's selection is being styled
+// you can use that selector instead. For example:
+//
+//     .hot-pink {
+//       @include selection(#fe57a1, #fff)
+//     }
+//
+// These properties can be passed as arguments or you can set them via mixin
+// content.
+//
+// For future-forward compatibility with other properties and aesthetic freedom,
+// a mixin content block can be passed to this mixin in addition to or in place of
+// passing arguments.
+//
+//     .hot-pink {
+//       @include selection {
+//         background: #fe57a1;
+//         color: #fff;
+//       }
+//     }
+//
+// When `$background-color` is specified, but `$color` is not, this mixin
+// styles the foreground color like the [contrasted
+// mixin](/reference/compass/utilities/color/contrast/#mixin-contrasted).  To
+// specify only the background-color, you should pass an explicit `null` value
+// for `$color` or use mixin content.
+@mixin selection($background-color: null, $color: contrast-color($background-color)) {
+  @include with-each-prefix(css-selection, $selection-support-threshold) {
+    $selector: '';
+    @if $current-prefix != null {
+      $selector: $current-prefix + '-';
+    }
+    $selector: "&::#{$selector}selection";
+    #{$selector} {
+      color: $color;
+      background-color: $background-color;
+      @content;
+    }
+  }
+}
diff --git a/stylesheets/compass/css3/shared.scss b/stylesheets/compass/css3/shared.scss
index 1f55cb5..a7497c8 100644
--- a/stylesheets/compass/css3/shared.scss
+++ b/stylesheets/compass/css3/shared.scss
@@ -1,38 +1,5 @@
-@import "compass/support";
+@warn "The compass/css3/shared module has been deprecated.
+You can silence this warning by importing compass/css3/deprecated-support instead.
+Please be aware that module will be removed in the next release.";
 
-// This mixin provides basic support for CSS3 properties and
-// their corresponding experimental CSS2 properties when
-// the implementations are identical except for the property
-// prefix.
-@mixin experimental($property, $value,
-  $moz      : $experimental-support-for-mozilla,
-  $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
-  $ms       : $experimental-support-for-microsoft,
-  $khtml    : $experimental-support-for-khtml,
-  $official : true
-) {
-  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
-  @if $khtml   and $experimental-support-for-khtml     {  -khtml-#{$property} : $value; }
-  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
-  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
-  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
-  @if $official                                        {         #{$property} : $value; }
-}
-
-// Same as experimental(), but for cases when the property is the same and the value is vendorized
-@mixin experimental-value($property, $value,
-  $moz      : $experimental-support-for-mozilla,
-  $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
-  $ms       : $experimental-support-for-microsoft,
-  $khtml    : $experimental-support-for-khtml,
-  $official : true
-) {
-  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
-  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
-  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
-  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
-  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
-  @if $official                                        { #{$property} :         #{$value}; }
-}
+@import "deprecated-support";
diff --git a/stylesheets/compass/css3/text-shadow.scss b/stylesheets/compass/css3/text-shadow.scss
index eab7636..872ae86 100644
--- a/stylesheets/compass/css3/text-shadow.scss
+++ b/stylesheets/compass/css3/text-shadow.scss
@@ -1,13 +1,17 @@
-@import "shared";
+// Text Shadow
+
+@import "compass/support";
+
 
 // These defaults make the arguments optional for this mixin
 // If you like, set different defaults in your project
 
-$default-text-shadow-color:    #aaa !default;
-$default-text-shadow-h-offset: 0px  !default;
-$default-text-shadow-v-offset: 0px  !default;
-$default-text-shadow-blur:     1px  !default;
-$default-text-shadow-spread:   false  !default;
+$default-text-shadow-color      : #aaa    !default;
+$default-text-shadow-h-offset   : 0px     !default;
+$default-text-shadow-v-offset   : 0px     !default;
+$default-text-shadow-blur       : 1px     !default;
+$default-text-shadow-spread     : false   !default;
+
 
 // Provides cross-browser text shadows when one or more shadows are needed.
 // Each shadow argument should adhere to the standard css3 syntax for the
@@ -18,32 +22,23 @@ $default-text-shadow-spread:   false  !default;
 // then with the spread included. This allows you to progressively
 // enhance the browsers that do support the spread parameter.
 @mixin text-shadow(
-  $shadow-1 : default,
-  $shadow-2 : false,
-  $shadow-3 : false,
-  $shadow-4 : false,
-  $shadow-5 : false,
-  $shadow-6 : false,
-  $shadow-7 : false,
-  $shadow-8 : false,
-  $shadow-9 : false,
-  $shadow-10: false
+  $shadow...
 ) {
-  @if $shadow-1 == default {
-    $shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color);
-  }
+  $shadow: if(length($shadow) > 0, $shadow, default);
+  $default: -compass-space-list(compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color));
   $shadows-without-spread: join((),(),comma);
   $shadows: join((),(),comma);
   $has-spread: false;
-  @each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5,
-                           $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) {
-    @if length($shadow) > 4 {
+
+  @each $layer in $shadow {
+    $layer: if($layer == 'default', $default, $layer);
+    @if length($layer) > 4 {
       $has-spread: true;
-      $shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5));
-      $shadows: append($shadows, $shadow);
-    } else {
-      $shadows-without-spread: append($shadows-without-spread, $shadow);
-      $shadows: append($shadows, $shadow);
+      $shadows-without-spread: append($shadows-without-spread, nth($layer,1) nth($layer,2) nth($layer,3) nth($layer,5));
+      $shadows: append($shadows, $layer);
+    } @else {
+      $shadows-without-spread: append($shadows-without-spread, $layer);
+      $shadows: append($shadows, $layer);
     }
   }
   @if $has-spread {
diff --git a/stylesheets/compass/css3/transform-legacy.scss b/stylesheets/compass/css3/transform-legacy.scss
deleted file mode 100644
index ac661da..0000000
--- a/stylesheets/compass/css3/transform-legacy.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@import "shared";
-
-@warn "This version of the transform module has been deprecated and will be removed.";
-
-// CSS Transform and Transform-Origin
-
-// Apply a transform sent as a complete string.
-
-@mixin apply-transform($transform) {
-  @include experimental(transform, $transform,
-    -moz, -webkit, -o, not -ms, not -khtml, official
-  );
-}
-
-// Apply a transform-origin sent as a complete string.
-
-@mixin apply-origin($origin) {
-  @include experimental(transform-origin, $origin,
-    -moz, -webkit, -o, not -ms, not -khtml, official
-  );
-}
-
-// transform-origin requires x and y coordinates
-//
-// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
-
-@mixin transform-origin($originx: 50%, $originy: 50%) {
-  @if $originx or $originy {
-    @if $originy {
-       @include apply-origin($originx or 50% $originy);
-     } @else {
-       @include apply-origin($originx);
-     }
-  }
-} 
-
-// A full transform mixin with everything you could want
-//
-// * including origin adjustments if you want them
-// * scale, rotate and skew require units of degrees(deg)
-// * scale takes a multiplier, rotate and skew take degrees
-
-@mixin transform(
-  $scale: 1,
-  $rotate: 0deg,
-  $transx: 0,
-  $transy: 0,
-  $skewx: 0deg,
-  $skewy: 0deg,
-  $originx: false,
-  $originy: false
-) {
-  $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
-  @include apply-transform($transform);
-  @include transform-origin($originx, $originy);
-}
-
-// Transform Partials
-//
-// These work well on their own, but they don't add to each other, they override.
-// Use them with extra origin args, or along side +transform-origin
-
-// Adjust only the scale, with optional origin coordinates
-
-@mixin scale($scale: 1.25, $originx: false, $originy: false) {
-  @include apply-transform(scale($scale));
-  @include transform-origin($originx, $originy);
-}
-
-// Adjust only the rotation, with optional origin coordinates
-
-@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
-  @include apply-transform(rotate($rotate));
-  @include transform-origin($originx, $originy);
-}
-
-// Adjust only the translation
-
-@mixin translate($transx: 0, $transy: 0) {
-  @include apply-transform(translate($transx, $transy));
-}
-
-// Adjust only the skew, with optional origin coordinates
-@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
-  @include apply-transform(skew($skewx, $skewy));
-  @include transform-origin($originx, $originy);
-}
diff --git a/stylesheets/compass/css3/transform.scss b/stylesheets/compass/css3/transform.scss
index ecd50b7..ec743bf 100644
--- a/stylesheets/compass/css3/transform.scss
+++ b/stylesheets/compass/css3/transform.scss
@@ -1,4 +1,7 @@
-@import "shared";
+@import "compass/support";
+
+// The the user threshold for transform support. Defaults to `$graceful-usage-threshold`
+$transform-support-threshold: $graceful-usage-threshold !default;
 
 // @doc off
 // Note ----------------------------------------------------------------------
@@ -101,16 +104,10 @@ $default-skew-y      : 5deg                  !default;
 // @param only3d Set this to true to only apply this
 // mixin where browsers have 3D support.
 @mixin apply-origin($origin, $only3d) {
-  $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
-  @if $only3d {
-    @include experimental(transform-origin, $origin,
-      -moz, -webkit, -o, -ms, not -khtml, official
-    );
-  } @else {
-    @include experimental(transform-origin, $origin,
-      -moz, -webkit, -o, -ms, not -khtml, official
-    );
-  }
+  $capability: if($only3d or length($origin) > 2, transforms3d, transforms2d);
+  @include prefixed-properties($capability, $transform-support-threshold, (
+    transform-origin: $origin
+  ));
 }
 
 // Transform-origin sent as individual arguments:
@@ -145,15 +142,10 @@ $default-skew-y      : 5deg                  !default;
   $transform,
   $only3d: false
 ) {
-  @if $only3d {
-    @include experimental(transform, $transform,
-      -moz, -webkit, -o, -ms, not -khtml, official
-    );
-  } @else {
-    @include experimental(transform, $transform,
-      -moz, -webkit, -o, -ms, not -khtml, official
-    );
-  }
+  $capability: if($only3d, transforms3d, transforms2d);
+  @include prefixed-properties($capability, $transform-support-threshold, (
+    transform: $transform
+  ));
 }
 
 // Shortcut to target all browsers with 2D transform support
@@ -178,9 +170,9 @@ $default-skew-y      : 5deg                  !default;
 // z-axis. The higher the perspective, the more exaggerated the foreshortening.
 // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
 @mixin perspective($p) {
-  @include experimental(perspective, $p,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(transforms3d, $transform-support-threshold, (
+    perspective: $p
+  ));
 }
 
 // Set the origin position for the perspective
@@ -189,9 +181,9 @@ $default-skew-y      : 5deg                  !default;
 //
 // where the two arguments represent x/y coordinates
 @mixin perspective-origin($origin: 50%) {
-  @include experimental(perspective-origin, $origin,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(transforms3d, $transform-support-threshold, (
+    perspective-origin: $origin
+  ));
 }
 
 // Determine whether a 3D objects children also live in the given 3D space
@@ -201,9 +193,9 @@ $default-skew-y      : 5deg                  !default;
 // where `style` can be either `flat` or `preserve-3d`.
 // Browsers default to `flat`, mixin defaults to `preserve-3d`.
 @mixin transform-style($style: preserve-3d) {
-  @include experimental(transform-style, $style,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(transforms3d, $transform-support-threshold, (
+    transform-style: $style
+  ));
 }
 
 // Determine the visibility of an element when it's back is turned
@@ -213,9 +205,9 @@ $default-skew-y      : 5deg                  !default;
 // where `visibility` can be either `visible` or `hidden`.
 // Browsers default to visible, mixin defaults to hidden
 @mixin backface-visibility($visibility: hidden) {
-  @include experimental(backface-visibility, $visibility,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include prefixed-properties(transforms3d, $transform-support-threshold, (
+    backface-visibility: $visibility
+  ));
 }
 
 // @doc off
diff --git a/stylesheets/compass/css3/transition.scss b/stylesheets/compass/css3/transition.scss
index 4c4cb8c..d0bf3c8 100644
--- a/stylesheets/compass/css3/transition.scss
+++ b/stylesheets/compass/css3/transition.scss
@@ -1,4 +1,8 @@
-@import "shared";
+@import "compass/support";
+
+// The the user threshold for transition support. Defaults to `$graceful-usage-threshold`
+$transition-support-threshold: $graceful-usage-threshold !default;
+
 
 // CSS Transitions
 // Currently only works in Webkit.
@@ -19,34 +23,71 @@ $default-transition-property: all !default;
 
 $default-transition-duration: 1s !default;
 
-$default-transition-function: false !default;
+$default-transition-function: null !default;
 
-$default-transition-delay: false !default;
+$default-transition-delay: null !default;
 
 $transitionable-prefixed-values: transform, transform-origin !default;
 
+
+
+// Checks if the value given is a unit of time.
+@function is-time($value) {
+  @return if(type-of($value) == number, not not index(s ms, unit($value)), false);
+}
+
+// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`.
+@function prefixed-for-transition($prefix, $property) {
+  @if not $prefix {
+    @return $property;
+  }
+  @if type-of($property) == list or type-of($property) == arglist {
+    $new-list: comma-list();
+    @each $v in $property {
+      $new-list: append($new-list, prefixed-for-transition($prefix, $v));
+    }
+    @return $new-list;
+  } @else {
+    @if index($transitionable-prefixed-values, $property) {
+      @return #{$prefix}-#{$property};
+    } @else {
+      @return $property;
+    }
+  }
+}
+
+// Returns $transition-map which includes key and values that map to a transition declaration
+@function transition-map($transition) {
+  $transition-map: ();
+
+  @each $item in $transition {
+    @if is-time($item) {
+      @if map-has-key($transition-map, duration) {
+        $transition-map: map-merge($transition-map, (delay: $item));
+      } @else {
+        $transition-map: map-merge($transition-map, (duration: $item));
+      }
+    } @else if map-has-key($transition-map, property) {
+      $transition-map: map-merge($transition-map, (timing-function: $item));
+    } @else {
+      $transition-map: map-merge($transition-map, (property: $item));
+    }
+  }
+
+  @return $transition-map;
+}
+
 // One or more properties to transition
 //
 // * for multiple, use a comma-delimited list
 // * also accepts "all" or "none"
 
-@mixin transition-property($property-1: $default-transition-property,
-  $property-2 : false,
-  $property-3 : false,
-  $property-4 : false,
-  $property-5 : false,
-  $property-6 : false,
-  $property-7 : false,
-  $property-8 : false,
-  $property-9 : false,
-  $property-10: false
-) {
-  @if type-of($property-1) == string { $property-1: unquote($property-1); }
-  $properties: compact($property-1, $property-2, $property-3, $property-4, $property-5, $property-6, $property-7, $property-8, $property-9, $property-10);
-  @if $experimental-support-for-webkit    {       -webkit-transition-property : prefixed-for-transition(-webkit, $properties); }
-  @if $experimental-support-for-mozilla   {          -moz-transition-property : prefixed-for-transition(-moz,    $properties); }
-  @if $experimental-support-for-opera     {            -o-transition-property : prefixed-for-transition(-o,      $properties); }
-                                                          transition-property : $properties;
+@mixin transition-property($properties...) {
+  $properties: set-arglist-default($properties, $default-transition-property);
+  @include with-each-prefix(css-transitions, $transition-support-threshold) {
+    $props: if($current-prefix, prefixed-for-transition($current-prefix, $properties), $properties);
+    @include prefix-prop(transition-property, $props);
+  }
 }
 
 // One or more durations in seconds
@@ -54,22 +95,11 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * these durations will affect the properties in the same list position
 
-@mixin transition-duration($duration-1: $default-transition-duration,
-  $duration-2 : false,
-  $duration-3 : false,
-  $duration-4 : false,
-  $duration-5 : false,
-  $duration-6 : false,
-  $duration-7 : false,
-  $duration-8 : false,
-  $duration-9 : false,
-  $duration-10: false
-) {
-  @if type-of($duration-1) == string { $duration-1: unquote($duration-1); }
-  $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
-  @include experimental(transition-duration, $durations,
-    -moz, -webkit, -o, not -ms, not -khtml, official
-  );
+@mixin transition-duration($durations...) {
+  $durations: set-arglist-default($durations, $default-transition-duration);
+  @include prefixed-properties(css-transitions, $transition-support-threshold, (
+    transition-duration: $durations
+  ));
 }
 
 // One or more timing functions
@@ -78,22 +108,11 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * For multiple, use a comma-delimited list
 // * These functions will effect the properties in the same list position
 
-@mixin transition-timing-function($function-1: $default-transition-function,
-  $function-2 : false,
-  $function-3 : false,
-  $function-4 : false,
-  $function-5 : false,
-  $function-6 : false,
-  $function-7 : false,
-  $function-8 : false,
-  $function-9 : false,
-  $function-10: false
-) {
-  $function-1: unquote($function-1);
-  $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
-  @include experimental(transition-timing-function, $functions,
-    -moz, -webkit, -o, not -ms, not -khtml, official
-  );
+@mixin transition-timing-function($functions...) {
+  $functions: set-arglist-default($functions, $default-transition-function);
+  @include prefixed-properties(css-transitions, $transition-support-threshold, (
+    transition-timing-function: $functions
+  ));
 }
 
 // One or more transition-delays in seconds
@@ -101,22 +120,11 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * these delays will effect the properties in the same list position
 
-@mixin transition-delay($delay-1: $default-transition-delay,
-  $delay-2 : false,
-  $delay-3 : false,
-  $delay-4 : false,
-  $delay-5 : false,
-  $delay-6 : false,
-  $delay-7 : false,
-  $delay-8 : false,
-  $delay-9 : false,
-  $delay-10: false
-) {
-  @if type-of($delay-1) == string { $delay-1: unquote($delay-1); }
-  $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
-  @include experimental(transition-delay, $delays,
-    -moz, -webkit, -o, not -ms, not -khtml, official
-  );
+@mixin transition-delay($delays...) {
+  $delays: set-arglist-default($delays, $default-transition-delay);
+  @include prefixed-properties(css-transitions, $transition-support-threshold, (
+    transition-delay: $delays
+  ));
 }
 
 // Transition all-in-one shorthand
@@ -130,92 +138,53 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   @include transition(compact($property $duration $function $delay));
 }
 
-@mixin transition(
-  $transition-1 : default,
-  $transition-2 : false,
-  $transition-3 : false,
-  $transition-4 : false,
-  $transition-5 : false,
-  $transition-6 : false,
-  $transition-7 : false,
-  $transition-8 : false,
-  $transition-9 : false,
-  $transition-10: false
-) {
-  @if $transition-1 == default {
-    $transition-1 : compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay);
-  }
-  $transitions: false;
-  @if type-of($transition-1) == list and type-of(nth($transition-1,1)) == list {
-    $transitions: join($transition-1, compact($transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10), comma);
-  } @else {
-    $transitions : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
-  }
-  $delays: comma-list();
-  $has-delays: false;
-  $webkit-value: comma-list();
-  $moz-value: comma-list();
-  $o-value: comma-list();
-
-  // This block can be made considerably simpler at the point in time that
-  // we no longer need to deal with the differences in how delays are treated.
-  @each $transition in $transitions {
-    // Extract the values from the list
-    // (this would be cleaner if nth took a 3rd argument to provide a default value).
-    $property: nth($transition, 1);
-    $duration: false;
-    $timing-function: false;
-    $delay: false;
-    @if length($transition) > 1 { $duration:        nth($transition, 2); }
-    @if length($transition) > 2 { $timing-function: nth($transition, 3); }
-    @if length($transition) > 3 { $delay:           nth($transition, 4); $has-delays: true; }
-
-    // If a delay is provided without a timing function
-    @if is-time($timing-function) and not $delay { $delay: $timing-function; $timing-function: false; $has-delays: true; }
-
-    // Keep a list of delays in case one is specified
-    $delays: append($delays, if($delay, $delay, 0s));
-
-    $webkit-value: append($webkit-value, compact(prefixed-for-transition(-webkit, $property) $duration $timing-function));
-       $moz-value: append(   $moz-value, compact(prefixed-for-transition(   -moz, $property) $duration $timing-function $delay));
-         $o-value: append(     $o-value, compact(prefixed-for-transition(     -o, $property) $duration $timing-function $delay));
-  }
-
-  @if $experimental-support-for-webkit    {       -webkit-transition : $webkit-value;
-    // old webkit doesn't support the delay parameter in the shorthand so we progressively enhance it.
-    @if $has-delays                       { -webkit-transition-delay : $delays;       } }
-  @if $experimental-support-for-mozilla   {          -moz-transition : $moz-value;    }
-  @if $experimental-support-for-opera     {            -o-transition : $o-value;      }
-                                                          transition : $transitions;
-}
-
-// coerce a list to be comma delimited or make a new, empty comma delimited list.
-@function comma-list($list: ()) {
-  @return join((), $list, comma);
-}
-
-// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`.
-@function prefixed-for-transition($prefix, $property) {
-  @if type-of($property) == list {
-    $new-list: comma-list();
-    @each $v in $property {
-      $new-list: append($new-list, prefixed-for-transition($prefix, $v));
+@mixin transition($transitions...) {
+  $default: (compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay),);
+  $transitions: if(length($transitions) == 1 and type-of(nth($transitions, 1)) == list and list-separator(nth($transitions, 1)) == comma, nth($transitions, 1), $transitions);
+  $transitions: set-arglist-default($transitions, $default);
+
+
+  @include with-each-prefix(css-transitions, $transition-support-threshold) {
+    $delays: comma-list();
+    $transitions-without-delays: comma-list();
+    $transitions-with-delays: comma-list();
+    $has-delays: false;
+
+
+    // This block can be made considerably simpler at the point in time that
+    // we no longer need to deal with the differences in how delays are treated.
+    @each $transition in $transitions {
+      // Declare initial values for transition
+      $transition: transition-map($transition);
+
+      $property: map-get($transition, property);
+      $duration: map-get($transition, duration);
+      $timing-function: map-get($transition, timing-function);
+      $delay: map-get($transition, delay);
+
+      // Parse transition string to assign values into correct variables
+      $has-delays: $has-delays or $delay;
+
+      @if $current-prefix == -webkit {
+        // Keep a list of delays in case one is specified
+        $delays: append($delays, if($delay, $delay, 0s));
+        $transitions-without-delays: append($transitions-without-delays,
+          prefixed-for-transition($current-prefix, $property) $duration $timing-function);
+      } @else {
+        $transitions-with-delays: append($transitions-with-delays,
+          prefixed-for-transition($current-prefix, $property) $duration $timing-function $delay);
+      }
     }
-    @return $new-list;
-  } @else {
-    @if index($transitionable-prefixed-values, $property) {
-      @return #{$prefix}-#{$property};
+
+    @if $current-prefix == -webkit {
+      @include prefix-prop(transition, $transitions-without-delays);
+      @if $has-delays {
+        @include prefix-prop(transition-delay, $delays);
+      }
+    } @else if $current-prefix {
+      @include prefix-prop(transition, $transitions-with-delays);
     } @else {
-      @return $property;
+      transition: $transitions-with-delays;
     }
   }
 }
-
-// Checks if the value given is a unit of time.
-@function is-time($value) {
-  @if type-of($value) == number {
-    @return not not index(s ms, unit($value));
-  } @else {
-    @return false;
-  }
-}
diff --git a/stylesheets/compass/css3/user-interface.scss b/stylesheets/compass/css3/user-interface.scss
index e78b2fe..53af4f0 100644
--- a/stylesheets/compass/css3/user-interface.scss
+++ b/stylesheets/compass/css3/user-interface.scss
@@ -1,9 +1,13 @@
-// User Interface ------------------------------------------------------------
+// User Interface
 // This file can be expanded to handle all the user interface properties as
 // they become available in browsers:
 // http://www.w3.org/TR/2000/WD-css3-userint-20000216
-@import "shared";
 
+@import "compass/support";
+
+// The prefixed support threshold for user-select.
+// Defaults to the $graceful-usage-threshold.
+$userselect-support-threshold: $graceful-usage-threshold !default;
 
 // This property controls the selection model and granularity of an element.
 //
@@ -11,7 +15,57 @@
 //   [ none | text | toggle | element | elements | all | inherit ]
 @mixin user-select($select) {
   $select: unquote($select);
-  @include experimental(user-select, $select,
-    -moz, -webkit, not -o, not -ms, -khtml, official
-  );
+
+  @include with-each-prefix(user-select-none, $userselect-support-threshold) {
+    // old Firefox used a proprietary `-moz-none` value, starting with Firefox 21 `none` behaves like `-moz-none`
+    // @link https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
+    @include prefix-prop(user-select, if($current-prefix == -moz and $select == 'none', -moz-none, $select));
+  }
+}
+
+// The prefixed support threshold for input-placeholder.
+// Defaults to the $graceful-usage-threshold.
+$input-placeholder-support-threshold: $graceful-usage-threshold !default;
+
+// Style the html5 input placeholder in browsers that support it.
+//
+// The styles for the input placeholder are passed as mixin content
+// and the selector comes from the mixin's context.
+//
+// For example:
+//
+//     #{elements-of-type(text-input)} {
+//       @include input-placeholder {
+//         color: #bfbfbf;
+//         font-style: italic;
+//       }
+//     }
+//
+// if you want to apply the placeholder styles to all elements supporting
+// the `input-placeholder` pseudo class (beware of performance impacts):
+//
+//     * {
+//       @include input-placeholder {
+//         color: #bfbfbf;
+//         font-style: italic;
+//       }
+//     }
+@mixin input-placeholder {
+  @include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {
+    @if $current-prefix == -webkit {
+      &::-webkit-input-placeholder { @content; }
+    }
+    @elseif $current-prefix == -moz {
+      // for Firefox 19 and below
+      @if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) {
+        &:-moz-placeholder { @content; }
+      }
+      // for Firefox 20 and above
+      &::-moz-placeholder { @content; }
+    }
+    @elseif $current-prefix == -ms {
+      &:-ms-input-placeholder { @content; }
+    }
+  }
+  // This is not standardized yet so no official selector is generated.
 }
diff --git a/stylesheets/compass/layout/grid-background.scss b/stylesheets/compass/layout/grid-background.scss
index e7e7306..9620590 100644
--- a/stylesheets/compass/layout/grid-background.scss
+++ b/stylesheets/compass/layout/grid-background.scss
@@ -36,7 +36,7 @@ $grid-background-force-fluid      : false                       !default;
 @function get-baseline-gradient(
   $color : $grid-background-baseline-color
 ) {
-  $gradient: linear-gradient(bottom, $color 5%, rgba($color,0) 5%);
+  $gradient: linear-gradient(to top, $color 5%, rgba($color,0) 5%);
   @return $gradient;
 }
 
@@ -68,7 +68,7 @@ $grid-background-force-fluid      : false                       !default;
     }
 
     // and we add this column/gutter pair to our grid
-    $grid: join($grid, ($column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z));
+    $grid: join($grid, (lighten($column-color, 5%) $a, darken($column-color, 5%) $g, $gutter-color $g, $gutter-color $z));
   }
 
   @return $grid;
diff --git a/stylesheets/compass/support.scss b/stylesheets/compass/support.scss
index 37b6e17..73caa3f 100644
--- a/stylesheets/compass/support.scss
+++ b/stylesheets/compass/support.scss
@@ -1,40 +1,447 @@
-// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
-$legacy-support-for-ie: true !default;
+// Map of compass extensions that are loaded. The value will either be
+// the version of the extension or `true` if the version is unknown.
+$compass-extensions: compass-extensions() !default;
 
-// Setting this to false will result in smaller output, but no support for ie6 hacks
-$legacy-support-for-ie6: $legacy-support-for-ie !default;
+// The list of browsers you want to support.
+// Defaults to all.
+$supported-browsers: browsers() !default;
 
-// Setting this to false will result in smaller output, but no support for ie7 hacks
-$legacy-support-for-ie7: $legacy-support-for-ie !default;
+// The browser usage threshold for features that gracefully degrade
+// Defaults to 1 user in 1,000.
+$graceful-usage-threshold: 0.1 !default;
 
-// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
-$legacy-support-for-ie8: $legacy-support-for-ie !default;
+// The browser usage threshold for features that cannot degrade gracefully
+// Defaults to 1 user in 10,000.
+$critical-usage-threshold: 0.01 !default;
+
+// Set this to true to generate comments that will explain why a prefix was included or omitted.
+$debug-browser-support: false !default;
+
+// Minimum browser versions that must be supported.
+// The keys of this map are any valid browser according to `browsers()`.
+// The values of this map are the min version that is valid for that browser
+// according to `browser-versions($browser)`
+$browser-minimum-versions: (
+  'chrome':  null,
+  'firefox': null,
+  'ie':      null,
+  'safari':  null,
+  'opera':   null
+) !default;
+
+
+// @private
+$default-capability-options: (
+  (full-support: true),
+  (partial-support: true)
+);
+
+// When a prefix in in context, but there is no current prefix
+// That context is recorded here so other prefixes can be avoided.
+$prefix-context: null;
+
+// When a prefix is in a selector or directive scope, this is set to the
+// current prefix value.  When `null`, either there is no prefix in scope
+// or the official prefix is being rendered. The `$prefix-context`
+// variable can be used to make that distinction.
+$current-prefix: null;
+
+// When in a context that only exists in a particular version
+// this variable is set to those versions.
+$current-browser-versions: ();
+
+// The legacy support CSS 2.1 Selectors.
+// Defaults to the $critical-usage-threshold.
+$css-sel2-support-threshold: $critical-usage-threshold !default;
+
+// Check if the browser is in scope given the browser support and current prefix minimums.
+@function browser-out-of-scope($browser, $version: null) {
+  @if not index($supported-browsers, $browser) {
+    @if $debug-browser-support {
+      @return "#{$browser} is not listed as a supported browser."
+    } @else {
+      @return true;
+    }
+  } @else if not ($current-prefix == null or $current-prefix == browser-prefix($browser)) {
+    @if $debug-browser-support {
+      @return "#{$browser} #{$version} is incompatible with #{$current-prefix}."
+    } @else {
+      @return true;
+    }
+  }
+  $current-range: map-get($current-browser-versions, $browser);
+  $current-min: if($current-range, nth($current-range, 1), null);
+  $current-max: if($current-range, nth($current-range, 2), null);
+  @if not ($version and $current-max) {
+    // We don't have any versions to compare
+    @return false;
+  } @else {
+    // If the version is less than the current min, it is not supported
+    $too-old: compare-browser-versions($browser, $version, $current-min) < 0;
+    $too-new: compare-browser-versions($browser, $version, $current-max) > 0;
+    @if $too-old or $too-new {
+      @if $debug-browser-support {
+        @return "The current scope only works with #{display-browser-range($browser, $current-min, $current-max)}.";
+      } @else {
+        @return true;
+      }
+    } @else {
+      @return false;
+    }
+  }
+}
+
+// Check whether the browser is supported according to the supported browsers,
+// declared minimum support and usage thresholds.
+@function support-legacy-browser($browser, $min-version, $max-version: null, $threshold: $critical-usage-threshold) {
+  @if not index($supported-browsers, $browser) {
+    @return false;
+  }
+  // Check agaist usage stats and declared minimums
+  $min-required-version: map-get($browser-minimum-versions, $browser);
+  $usage: if($max-version,
+             omitted-usage($browser, $min-version, $max-version),
+             omitted-usage($browser, $min-version));
+  @return $usage > $threshold or
+          ($min-required-version and
+           compare-browser-versions($browser, $max-version or $min-version, $min-required-version) >= 0);
+}
+
+// Include content for a legacy browser
+// Version can be a single version string or a list of versions ordered from oldest to newest.
+@mixin for-legacy-browser($browser, $min-version, $max-version: $min-version,
+                          $threshold: $critical-usage-threshold,
+                          $ranges: ($browser: $min-version $max-version)) {
+  @if not browser-out-of-scope($browser, $max-version) and
+      support-legacy-browser($browser, $min-version, $max-version, $threshold)
+  {
+    @if $debug-browser-support {
+      /* Content for #{display-browser-range($browser, $min-version, $max-version)}.
+      Min version: #{map-get($browser-minimum-versions, $browser) or unspecified}.
+      User threshold to keep: #{$threshold}%. If #{display-browser-range($browser, $min-version, $max-version)} are omitted: #{omitted-usage($browser, $min-version, $max-version)}%. */
+    }
+    @include with-browser-ranges(intersect-browser-ranges($current-browser-versions, $ranges)) {
+      @content;
+    }
+  } @else if $debug-browser-support and browser-out-of-scope($browser, $max-version) {
+    /* Content for #{display-browser-range($browser, $min-version, $max-version)} omitted.
+       Not allowed in the current scope: #{browser-out-of-scope($browser, $max-version)} */
+  } @else if $debug-browser-support and not
+             support-legacy-browser($browser, $min-version, $max-version, $threshold) {
+    @if omitted-usage($browser, $min-version, $max-version) > $threshold {
+      /* Content for #{display-browser-range($browser, $min-version, $max-version)} omitted.
+         User threshold to keep: #{$threshold}%. If #{display-browser-range($browser, $min-version, $max-version)} and below are omitted: #{omitted-usage($browser, $min-version, $max-version)}%. */
+    } @else {
+      /* Content for #{display-browser-range($browser, $min-version, $max-version)} omitted.
+         Minimum support is #{map-get($browser-minimum-versions, $browser)}. */
+    }
+  }
+}
+
+@function display-browser-range($browser, $min-version, $max-version: $min-version) {
+  @return "#{unquote($browser)} #{unquote($min-version)}#{if($max-version != $min-version, unquote(' -') unquote($max-version), null)}";
+}
+
+
+// Renders the content once if any of the legacy browsers are supported.
+// $browsers is a map of browser name to version ranges
+@mixin for-legacy-browsers($browsers, $threshold: $critical-usage-threshold) {
+  $rendered: false;
+  @each $browser, $range in $browsers {
+    @if not $rendered {
+      @include for-legacy-browser($browser, $range..., $threshold: $threshold, $ranges: $browsers) {
+        $rendered: true;
+        @content;
+      }
+    }
+  }
+}
+
+// If there's a prefix context in scope, this will only output the content if the prefix matches.
+// Otherwise, sets the current prefix scope and outputs the content.
+@mixin with-prefix($prefix) {
+  @if $current-prefix or $prefix-context {
+    @if $current-prefix == $prefix or $prefix-context == $prefix {
+      @if $debug-browser-support {
+        @if $prefix {
+          /* content for #{$prefix} because #{$current-prefix or $prefix-context} is already in scope. */
+        } @else {
+          /* unprefixed content. #{$current-prefix or $prefix-context} is already in scope. */
+        }
+      }
+      $old-prefix-context: $prefix-context;
+      $old-prefix: $current-prefix;
+      $prefix-context: $prefix-context or $current-prefix !global;
+      $current-prefix: $prefix !global;
+      @content;
+      $prefix-context: $old-prefix-context !global;
+      $current-prefix: $old-prefix !global;
+    } @else if $prefix == null {
+      $old-prefix-context: $prefix-context;
+      $prefix-context: $prefix-context or $current-prefix !global;
+      $current-prefix: null !global;
+      @if $debug-browser-support {
+        /* Content for official syntax. Prefix context is still #{$prefix-context}. */
+      }
+      @content;
+      $current-prefix: $prefix-context !global;
+      $prefix-context: $old-prefix-context !global;
+    } @else if $debug-browser-support {
+      /* Omitting content for #{$prefix} because #{$current-prefix} is already in scope. */
+    }
+  } @else {
+    @if $debug-browser-support and $prefix {
+      /* Creating new #{$prefix} context. */
+    }
+    $prefix-context: $prefix !global;
+    $current-prefix: $prefix !global;
+    @content;
+    $current-prefix: null !global;
+    $prefix-context: null !global;
+  }
+}
+
+@function prefixes-for-capability($capability, $threshold, $capability-options: $default-capability-options) {
+  $result: ();
+  @each $prefix in browser-prefixes($supported-browsers) {
+    $result: map-merge($result,
+                      ($prefix: use-prefix($prefix, $capability, $threshold, $capability-options)));
+  }
+  @return $result;
+}
+
+// Yields to the mixin content once for each prefix required.
+// The current prefix is set to the $current-prefix global for use by the included content.
+// Also yields to the content once with $current-prefix set to null for the official version
+// as long as there's not already a prefix in scope.
+@mixin with-each-prefix($capability, $threshold, $capability-options: $default-capability-options) {
+  @each $prefix, $should-use-prefix in prefixes-for-capability($capability, $threshold, $capability-options) {
+    @if $should-use-prefix {
+      @if $debug-browser-support and type-of($should-use-prefix) == list {
+        /* Capability #{$capability} is prefixed with #{$prefix} because #{$should-use-prefix} is required. */
+      } @else if $debug-browser-support and type-of($should-use-prefix) == number {
+        /* Capability #{$capability} is prefixed with #{$prefix} because #{$should-use-prefix}% of users need it which is more than the threshold of #{$threshold}%. */
+      }
+      @include with-prefix($prefix) {
+        @include with-browser-ranges($capability) {
+          @content;
+        }
+      }
+    } @else if $debug-browser-support {
+      /* Capability #{$capability} is not prefixed with #{$prefix} because #{prefix-usage($prefix, $capability, $capability-options)}% of users are affected which is less than the threshold of #{$threshold}. */
+    }
+  }
+  @include with-prefix(null) {
+    @include with-browser-ranges($capability) {
+      @content;
+    }
+  }
+}
+
+// Returns true if at least one browser-version pair in $subset-ranges
+// is a higher (or same) version than the browser-version pairs in
+// $ranges.
+@function has-browser-subset($ranges, $subset-ranges) {
+  $found-mismatch: false;
+  @each $browser, $subset-range in $subset-ranges {
+    $range: map-get($ranges, $browser);
+    @if $range {
+      $min-1: nth($subset-range, 1);
+      $max-1: nth($subset-range, 2);
+      $min-2: nth($range, 1);
+      $max-2: nth($range, 2);
+      @if (compare-browser-versions($browser, $min-2, $min-1) <= 0 and
+           compare-browser-versions($browser, $min-1, $max-2) <= 0) or
+          (compare-browser-versions($browser, $min-2, $max-1) <= 0 and
+           compare-browser-versions($browser, $max-1, $max-2) <= 0) or
+          (compare-browser-versions($browser, $min-1, $min-2) <= 0 and
+           compare-browser-versions($browser, $max-1, $max-2) >= 0) or
+          (compare-browser-versions($browser, $min-1, $min-2) >= 0 and
+           compare-browser-versions($browser, $max-1, $max-2) <= 0) {
+        @return true;
+      } @else {
+        $found-mismatch: true
+      }
+    }
+  }
+  @return not $found-mismatch;
+}
+
+// When the same browser is in both maps, then the minimum will be set
+// to the maximum of the two minimum versions, and the maximum will be
+// set to the minmum of the two maximum versions.
+@function intersect-browser-ranges($ranges, $new-ranges) {
+  @each $browser, $new-range in $new-ranges {
+    $old-range: map-get($ranges, $browser);
+    @if $old-range {
+      $old-min: nth($old-range, 1);
+      $old-max: nth($old-range, 2);
+      $new-min: nth($new-range, 1);
+      $new-max: nth($new-range, 2);
+      $maximin: if(compare-browser-versions($browser, $old-min, $new-min) > 0,
+                   $old-min, $new-min);
+      $minimax: if(compare-browser-versions($browser, $old-max, $new-max) < 0,
+                   $old-max, $new-max);
+      $ranges: map-merge($ranges, ($browser: $maximin $minimax));
+    } @else {
+      $ranges: map-merge($ranges, ($browser: $new-range));
+    }
+  }
+  @return $ranges;
+}
+
+// If passed a map, that will be the new browser ranges.
+// Otherwise a range map will be created based on the given capability and prefix
+// using the `browser-ranges($capability, $prefix)` function.
+//
+// If there are current ranges in scope and the new ranges have some overlap
+// with the current, 
+//
+// If there is no overlap, then the content will not be rendered.
+@mixin with-browser-ranges($capability, $prefix: $current-prefix) {
+  $new-ranges: null;
+  @if type-of($capability) == map {
+    $new-ranges: $capability;
+  } @else {
+    $new-ranges: browser-ranges($capability, $prefix);
+  }
+
+  @if has-browser-subset($current-browser-versions, $new-ranges) {
+    $old-ranges: $current-browser-versions;
+    $current-browser-versions: intersect-browser-ranges($old-ranges, $new-ranges) !global;
+    @content;
+    $current-browser-versions: $old-ranges !global;
+  } @else if $debug-browser-support {
+    /* Excluding content because #{inspect($new-ranges)} is not included within
+       #{inspect($current-browser-versions)} */
+  }
+}
+
+// Returns true if the prefixed usage stats for the capability exceed the threshold
+// or if the minimum version for a supported browser would require a prefix for the capability.
+@function use-prefix($prefix, $capability, $threshold, $capability-options: $default-capability-options) {
+  $usage: prefix-usage($prefix, $capability, $capability-options);
+  @if $usage > $threshold {
+    @return $usage;
+  } @else {
+    @each $browser in browsers($prefix) {
+      @if index($supported-browsers, $browser) {
+        $min-version: map-get($browser-minimum-versions, $browser);
+        @if $min-version {
+          $actual-prefix: browser-requires-prefix($browser, $min-version, $capability, $capability-options);
+          @if $actual-prefix and $prefix == $actual-prefix {
+            @return $browser $min-version;
+          }
+        }
+      }
+    }
+  }
+  @return false;
+}
+
+@function prefix-identifier($ident, $prefix: $current-prefix) {
+  @return unquote("#{$prefix}#{if($prefix, '-', null)}#{$ident}");
+}
+
+// Output a property and value using the current prefix.
+// It will be unprefixed if $current-prefix is null.
+@mixin prefix-prop($property, $value, $prefix: $current-prefix) {
+  #{prefix-identifier($property, $prefix)}: $value;
+}
+
+// Emit a set of properties with the prefix governed by the capability and usage threshold given.
+//
+// Example:
+//
+//     @include prefixed-properties(css-animation, $animation-support-threshold,
+//       (animation-name: foo, animation-duration: 2s)
+//     );
+@mixin prefixed-properties($capability, $threshold, $properties, $capability-options: $default-capability-options) {
+  @include with-each-prefix($capability, $threshold, $capability-options) {
+    @each $prop, $value in $properties {
+      @include prefix-prop($prop, $value);
+    }
+  }
+}
+
+
+// @private
+@function warn-about-old-variables() {
+  $old-variables-in-use: ();
+  @each $old-variable-name in
+        (legacy-support-for-ie, legacy-support-for-ie6, legacy-support-for-ie7,
+         legacy-support-for-ie8, legacy-support-for-mozilla, legacy-support-for-webkit,
+         experimental-support-for-mozilla, experimental-support-for-webkit,
+         experimental-support-for-opera, experimental-support-for-microsoft,
+         experimental-support-for-khtml, experimental-support-for-svg)
+  {
+    @if global-variable-exists($old-variable-name) {
+      $old-variables-in-use: append($old-variables-in-use,
+                                    unquote("$#{$old-variable-name}"), comma);
+    }
+  }
+  @if length($old-variables-in-use) > 0 {
+    @warn "Compass has changed how browser support is configured. " +
+          "The following configuration variables " +
+          "are no longer supported: #{$old-variables-in-use}." +
+          "Details: http://compass-style.org/help/documentation/tuning-vendor-prefixes/"
+  }
+  @return $old-variables-in-use;
+}
+
+// @private
+@function warn-about-pie-removal() {
+  @if global-variable-exists(experimental-support-for-pie) {
+    @warn "Compass no longer supports css3pie.";
+  }
+  @return true;
+}
+
+// Enable browser support debugging within the content block.
+// Or you can enable it for the whole stylesheet by setting `$debug-browser-support` to true.
+@mixin with-browser-support-debugging {
+  $current-status: $debug-browser-support;
+  $debug-browser-support: true !global;
+  @content;
+  $debug-browser-support: $current-status !global;
+}
+
+// Set a default value if the given arglist is empty
+@function set-arglist-default($arglist, $default) {
+  $default-index: index($arglist, default);
+  @if $default-index {
+    $arglist: set-nth($arglist, $default-index, $default)
+  }
+  @return if(length($arglist) > 0, $arglist, $default);
+}
+
+
+// @private
+$old-variable-warnings-issued: warn-about-old-variables() !default;
+
+// @private
+$pie-removal-warning-issued: warn-about-pie-removal() !default;
 
 // @private
-// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
-// But in case the user set each of those explicitly, we need to sync the value of
-// this combined variable.
-$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
-
-// Whether to output legacy support for mozilla.
-// Usually this means hacks to support Firefox 3.6 or earlier.
-$legacy-support-for-mozilla: true;
-
-// Support for mozilla in experimental css3 properties (-moz).
-$experimental-support-for-mozilla      : true !default;
-// Support for webkit in experimental css3 properties (-webkit).
-$experimental-support-for-webkit       : true !default;
-// Support for webkit's original (non-standard) gradient syntax.
-$support-for-original-webkit-gradients : true !default;
-// Support for opera in experimental css3 properties (-o).
-$experimental-support-for-opera        : true !default;
-// Support for microsoft in experimental css3 properties (-ms).
-$experimental-support-for-microsoft    : true !default;
-// Support for khtml in experimental css3 properties (-khtml).
-$experimental-support-for-khtml        : false !default;
-// Support for svg in experimental css3 properties.
-// Setting this to true might add significant size to your
-// generated stylesheets.
-$experimental-support-for-svg          : false !default;
-// Support for CSS PIE in experimental css3 properties (-pie).
-$experimental-support-for-pie          : false !default;
+@function warn-about-useless-prefix-arguments($moz: null, $webkit: null, $o: null, $khtml: null, $official: null) {
+  @if $moz != null or $webkit != null or $o != null or $khtml != null or $official != null {
+    @warn "Browser prefix arguments to this mixin are no longer used and " +
+          "will be removed in the next release.";
+  }
+  @return true;
+}
+
+// coerce a list to be comma delimited or make a new, empty comma delimited list.
+@function comma-list($list: ()) {
+  @return join((), $list, comma);
+}
+
+// @private Returns the legacy value for a given box-model
+// - Used by background-clip and -origin.
+@function legacy-box($box) {
+  $box: unquote($box);
+  @if $box == padding-box { $box: padding; }
+  @if $box == border-box { $box: border; }
+  @if $box == content-box { $box: content; }
+  @return $box;
+}
diff --git a/stylesheets/compass/typography/links/hover-link.scss b/stylesheets/compass/typography/links/hover-link.scss
index 8c72bc1..88e0f82 100644
--- a/stylesheets/compass/typography/links/hover-link.scss
+++ b/stylesheets/compass/typography/links/hover-link.scss
@@ -1,5 +1,5 @@
 // a link that only has an underline when you hover over it
 @mixin hover-link {
   text-decoration: none;
-  &:hover {
+  &:hover, &:focus {
     text-decoration: underline; } }
diff --git a/stylesheets/compass/typography/lists/horizontal-list.scss b/stylesheets/compass/typography/lists/horizontal-list.scss
index 159b659..ac59d79 100644
--- a/stylesheets/compass/typography/lists/horizontal-list.scss
+++ b/stylesheets/compass/typography/lists/horizontal-list.scss
@@ -19,6 +19,7 @@
 @import "compass/utilities/general/clearfix";
 @import "compass/utilities/general/reset";
 @import "compass/utilities/general/float";
+@import "compass/support";
 
 // Can be mixed into any selector that target a ul or ol that is meant
 // to have a horizontal layout. Used to implement +horizontal-list.
@@ -31,7 +32,7 @@
 //
 // :last-child is not fully supported
 // see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
-// 
+//
 // IE8 ignores rules that are included on the same line as :last-child
 // see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
 //
@@ -45,9 +46,10 @@
       left: $padding;
       right: $padding;
     }
-    &:first-child, &.first { padding-#{$direction}: 0; }
+    &:first-child #{if(support-legacy-browser("ie", "6", $threshold: $css-sel2-support-threshold), ', &.first', '')} { padding-#{$direction}: 0; }
     &:last-child { padding-#{opposite-position($direction)}: 0; }
-    &.last { padding-#{opposite-position($direction)}: 0; }
+    @if support-legacy-browser("ie", "7", $threshold: $css-sel2-support-threshold) {
+      &.last { padding-#{opposite-position($direction)}: 0; } }
   }
 }
 
diff --git a/stylesheets/compass/typography/lists/inline-list.scss b/stylesheets/compass/typography/lists/inline-list.scss
index caff6fd..bfa7250 100644
--- a/stylesheets/compass/typography/lists/inline-list.scss
+++ b/stylesheets/compass/typography/lists/inline-list.scss
@@ -1,10 +1,11 @@
-// makes a list inline.
+@import "compass/support";
 
+// makes a list inline.
 @mixin inline-list {
   list-style-type: none;
   &, & li {
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
     display: inline;
   }
 }
@@ -30,8 +31,10 @@
     &:last-child {
       &:after { content: ""; }
     }
-    &.last {
-      &:after { content: ""; }
+    @if support-legacy-browser("ie", "7", $threshold: $css-sel2-support-threshold) {
+      &.last {
+        &:after { content: ""; }
+      }
     }
   }
 }
diff --git a/stylesheets/compass/typography/text/ellipsis.scss b/stylesheets/compass/typography/text/ellipsis.scss
index 3b3db25..f38df60 100644
--- a/stylesheets/compass/typography/text/ellipsis.scss
+++ b/stylesheets/compass/typography/text/ellipsis.scss
@@ -1,4 +1,4 @@
-@import "compass/css3/shared";
+@import "compass/css3/deprecated-support";
 
 // To get full firefox support, you must install the ellipsis pattern:
 //
@@ -19,7 +19,7 @@ $use-mozilla-ellipsis-binding: false !default;
     not -khtml,
     official
   );
-  @if $experimental-support-for-mozilla and $use-mozilla-ellipsis-binding {
-    -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis"));    
+  @if $legacy-support-for-mozilla and $use-mozilla-ellipsis-binding {
+    -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis"));
   }
 }
diff --git a/stylesheets/compass/typography/text/replacement.scss b/stylesheets/compass/typography/text/replacement.scss
index 703571b..6a7e476 100644
--- a/stylesheets/compass/typography/text/replacement.scss
+++ b/stylesheets/compass/typography/text/replacement.scss
@@ -1,3 +1,5 @@
+@import "compass/support";
+
 // Indicates the direction you prefer to move your text
 // when hiding it.
 //
@@ -56,6 +58,10 @@ $hide-text-direction: left !default;
     white-space: nowrap;
     overflow: hidden;
   }
+  @include for-legacy-browsers((ie: "7"), $critical-usage-threshold) {
+    //Text transform capitalize fixes text-replacement issue when used in a <button> element on ie7
+    text-transform:capitalize;
+  }
 }
 
 // Hides text in an element by squishing the text into oblivion.
diff --git a/stylesheets/compass/typography/units.scss b/stylesheets/compass/typography/units.scss
new file mode 100644
index 0000000..0bb4a1b
--- /dev/null
+++ b/stylesheets/compass/typography/units.scss
@@ -0,0 +1,183 @@
+// @private Default font-size for all browsers
+$browser-default-font-size: 16px;
+
+// Base font size in pixels, if not already defined.
+// Should be the same as the font-size of the html element.
+$base-font-size: 16px !default;
+
+// Whether to output fallback values in px when outputting rems.
+$rem-with-px-fallback: true !default;
+
+
+// Convert any CSS <length> or <percentage> value to any another.
+//
+// @param $length
+//   A css <length> or <percentage> value
+//
+// @param $to-unit
+//   String matching a css unit keyword, e.g. 'em', '%', etc.
+//
+// @param $from-context
+//   When converting from relative units, the absolute length (in px) to
+//   which $length refers (e.g. for $lengths in em units, would normally be the
+//   font-size of the current element).
+//
+// @param $to-context
+//   For converting to relative units, the absolute length in px to which the
+//   output value will refer. Defaults to the same as $from-context, since it is
+//   rarely needed.
+@function convert-length(
+	$length,
+	$to-unit,
+	$from-context: $base-font-size,
+	$to-context: $from-context
+) {
+
+	$from-unit: unit($length);
+
+	// Optimize for cases where `from` and `to` units are accidentally the same.
+	@if $from-unit == $to-unit { @return $length; }
+
+	// Context values must be in px so we can determine a conversion ratio for
+	// relative units.
+	@if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
+	@if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; }
+
+	// Convert input length to pixels
+	$px-length: $length;
+
+	@if $from-unit != 'px' {
+		// Convert relative units using the from-context parameter.
+		@if      $from-unit == 'em'  { $px-length: $length * $from-context / 1em }
+		@else if $from-unit == 'rem' { $px-length: $length * $base-font-size / 1rem }
+		@else if $from-unit == '%'   { $px-length: $length * $from-context / 100% }
+		@else if $from-unit == 'ex'  { $px-length: $length * $from-context / 2ex }
+		// Convert absolute units using Sass' conversion table.
+		@else if $from-unit == 'in'  or
+						 $from-unit == 'mm'  or
+						 $from-unit == 'cm'  or
+						 $from-unit == 'pt'  or
+						 $from-unit == 'pc'  { $px-length: 0px + $length }
+		// Certain units can't be converted.
+		@else if $from-unit == 'ch'  or
+						 $from-unit == 'vw'  or
+						 $from-unit == 'vh'  or
+						 $from-unit == 'vmin' {
+			@warn "#{$from-unit} units can't be reliably converted; Returning original value.";
+			@return $length;
+		}
+		@else {
+			@warn "#{$from-unit} is an unknown length unit. Returning original value.";
+			@return $length;
+		}
+	}
+
+	// Convert length in pixels to the output unit
+	$output-length: $px-length;
+	@if $to-unit != 'px' {
+		// Relative units
+		@if      $to-unit == 'em'  { $output-length: $px-length * 1em / $to-context }
+		@else if $to-unit == 'rem' { $output-length: $px-length * 1rem / $base-font-size }
+		@else if $to-unit == '%'   { $output-length: $px-length * 100% / $to-context }
+		@else if $to-unit == 'ex'  { $output-length: $px-length * 2ex / $to-context }
+		// Absolute units
+		@else if $to-unit == 'in'  { $output-length: 0in + $px-length }
+		@else if $to-unit == 'mm'  { $output-length: 0mm + $px-length }
+		@else if $to-unit == 'cm'  { $output-length: 0cm + $px-length }
+		@else if $to-unit == 'pt'  { $output-length: 0pt + $px-length }
+		@else if $to-unit == 'pc'  { $output-length: 0pc + $px-length }
+		// Non-convertible units
+		@else if $to-unit == 'ch'  or
+						 $to-unit == 'vw'  or
+						 $to-unit == 'vh'  or
+						 $to-unit == 'vmin' {
+			@warn "#{$to-unit} units can't be reliably converted; Returning original value.";
+			@return $length;
+		}
+		@else {
+			@warn "#{$to-unit} is an unknown length unit. Returning original value.";
+			@return $length;
+		}
+	}
+
+	@return $output-length;
+}
+
+
+// @private Get the px/rem versions of a value.
+@function rem-fallback-values($value) {
+  $_return: (
+    px: $value,
+    rem: $value,
+  );
+
+  @if type-of($value) == number and not unitless($value) {
+    @if unit($value) == rem {
+      $_return: map-merge($_return, (
+        px: round(convert-length($value, px)),
+      ));
+    } @else if unit($value) == px {
+      $_return: map-merge($_return, (
+        px: round($value),
+        rem: convert-length($value, rem),
+      ));
+    }
+  }
+
+  @return $_return;
+}
+
+// @private Get the px/rem versions of a list (or nested lists).
+@function list-convert-rems($value) {
+  $_empty: (
+    px: (),
+    rem: (),
+  );
+  $_return: $_empty;
+  $_sep: null;
+
+  @if type-of($value) == list {
+    $_sep: list-separator($value);
+    @each $sub in $value {
+      $_this: list-convert-rems($sub);
+      $_return: (
+        px: append(map-get($_return, px), map-get($_this, px), $_sep),
+        rem: append(map-get($_return, rem), map-get($_this, rem), $_sep),
+      );
+    }
+  } @else {
+    $_this: rem-fallback-values($value);
+    $_return: map-merge($_return, $_this);
+  }
+
+  @return $_return;
+}
+
+
+// Output a given style rule containing rem values along with an (optional)
+// fallback rule for older browsers (with rem values converted to px).
+//
+// @param $property
+//   The css property name.
+//
+// @param $values
+//   The value or list of values for the property.
+//
+// @param $use-px-fallback
+//   [ true | false ]
+//
+@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
+
+  // get converted values.
+  $values: list-convert-rems($values);
+  $px-values: map-get($values, px);
+  $values: map-get($values, rem);
+
+  // Use pixel fallback for browsers that don't understand rem units.
+  @if $use-px-fallback and $px-values != $values {
+    #{$property}: $px-values;
+  }
+
+  // Use rem values for everyone else (overrides pixel values).
+  #{$property}: $values;
+}
diff --git a/stylesheets/compass/typography/vertical_rhythm.scss b/stylesheets/compass/typography/vertical_rhythm.scss
index 999d1fb..e2c0aee 100644
--- a/stylesheets/compass/typography/vertical_rhythm.scss
+++ b/stylesheets/compass/typography/vertical_rhythm.scss
@@ -1,19 +1,26 @@
+@import "compass/support";
 @import "compass/layout/grid-background";
+@import "compass/typography/units";
 
-// The base font size.
+// The default font size for all text in pixels
 $base-font-size: 16px !default;
 
-// The base line height determines the basic unit of vertical rhythm.
+// The distance between text baselines (vertical rhythm) in pixels.
 $base-line-height: 24px !default;
 
-// Set the default border style for rhythm borders.
-$default-rhythm-border-style: solid !default;
+// The length unit in which to output rhythm values.
+// Supported values: px, em, rem. Percent units can't be used since they
+// make calculating padding and margins impractical, and percentage borders are
+// not valid or supported in css.
+$rhythm-unit: 'em' !default;
 
-// The default font size in all browsers.
-$browser-default-font-size: 16px;
+// Whether to output fallback values in px when using rem as the rhythm-unit.
+$rem-with-px-fallback: true !default;
 
-// Set to false if you want to use absolute pixels in sizing your typography.
-$relative-font-sizing: true !default;
+// Default values for rhythm borders properties.
+// Supports style alone eg. `solid` or list of style and color eg. `solid #aaa`;
+$default-rhythm-border-width: 1px !default;
+$default-rhythm-border-style: solid !default;
 
 // Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
 // to round the line height to the nearest half line height instead of the
@@ -24,66 +31,113 @@ $round-to-nearest-half-line: false !default;
 // of vertical padding above and below the text.
 $min-line-padding: 2px !default;
 
-// $base-font-size but in your output unit of choice.
-// Defaults to 1em when `$relative-font-sizing` is true.
-$font-unit: if($relative-font-sizing, 1em, $base-font-size) !default;
-
-// The basic unit of font rhythm.
-$base-rhythm-unit: $base-line-height / $base-font-size * $font-unit;
-
 // The leader is the amount of whitespace in a line.
 // It might be useful in your calculations.
-$base-leader: ($base-line-height - $base-font-size) * $font-unit / $base-font-size;
+$base-leader: convert-length($base-line-height - $base-font-size, $rhythm-unit, $base-font-size);
 
 // The half-leader is the amount of whitespace above and below a line.
 // It might be useful in your calculations.
 $base-half-leader: $base-leader / 2;
 
-// True if a number has a relative unit.
-@function relative-unit($number) {
-  @return unit($number) == "%" or unit($number) == "em" or unit($number) == "rem"
+// @private Whether the rhythm output is in absolute units (px) or not (em, rem)
+$relative-font-sizing: if($rhythm-unit == px, false, true);
+
+// Validate units
+@if unit($base-font-size)   != 'px' { @warn "$base-font-size must resolve to a pixel unit."; }
+@if unit($base-line-height) != 'px' { @warn "$base-line-height must resolve to a pixel unit."; }
+@if $rhythm-unit != 'px' and $rhythm-unit != 'em' and $rhythm-unit != 'rem' {
+  @warn "$rhythm-unit must be `px`, `em` or `rem`.";
+}
+
+
+// Calculate rhythm units.
+@function rhythm($lines: 1, $font-size: $base-font-size, $offset: 0) {
+  $rhythm: convert-length($lines * $base-line-height - $offset, $rhythm-unit, $font-size);
+  @if unit($rhythm) == px {
+    $rhythm: floor($rhythm);
+  }
+  @return $rhythm;
 }
 
-// True if a number has an absolute unit.
-@function absolute-unit($number) {
-  @return not (relative-unit($number) or unitless($number));
+// Calculate the minimum multiple of rhythm units needed to contain the font-size.
+@function lines-for-font-size($font-size) {
+  $lines: if($round-to-nearest-half-line,
+             ceil(2 * $font-size / $base-line-height) / 2,
+             ceil($font-size / $base-line-height));
+  // If lines are cramped include some extra lead.
+  @if ($lines * $base-line-height - $font-size) < ($min-line-padding * 2) {
+    $lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
+  }
+  @return $lines;
 }
 
-@if $relative-font-sizing and not relative-unit($font-unit) {
-  @warn "$relative-font-sizing is true but $font-unit is set to #{$font-unit} which is not a relative unit.";
+
+// @private Outputs rhythm values. For rem units, outputs pixel fallbacks
+// by default.
+@mixin output-rhythm($property, $values) {
+  @if $rhythm-unit == rem and $rem-with-px-fallback {
+    @include rem($property, $values);
+  }
+  @else {
+    $output: ();
+    @each $value in $values {
+      @if unit($value) == px {
+        // Ensure all pixel values are rounded to the nearest pixel.
+        $output: join($output, round($value));
+      }
+      @else {
+        $output: join($output, $value);
+      }
+    }
+    #{$property}: $output;
+  }
 }
 
 // Establishes a font baseline for the given font-size.
 @mixin establish-baseline($font-size: $base-font-size) {
-  // IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts
-  // whose root is set in ems. So we set the root font size in percentages of
-  // the default font size.
-  * html {
-    font-size: 100% * ($font-size / $browser-default-font-size);
+  $relative-size: 100% * ($font-size / $browser-default-font-size);
+
+  @if support-legacy-browser(ie, "6") and (not $relative-font-sizing) {
+    // IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts
+    // whose root is set in ems. So we set the root font size in percentages of
+    // the default font size, even if we are using absolute sizes elsewhere.
+    * html { font-size: $relative-size; }
   }
   html {
-    font-size: $font-size;
-    @include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size));
+    font-size: if($relative-font-sizing, $relative-size, $font-size);
+
+    // Webkit has a bug that prevents line-height being set in rem on <html>;
+    // To work around this and simplify output, we can set initial line-height
+    // in ems for all relative rhythm units, even when $rhythm-unit is `rem`.
+    @if $relative-font-sizing {
+      line-height: convert-length($base-line-height, em);
+    }
+    @else {
+      line-height: round($base-line-height);
+    }
   }
 }
 
-// Resets the line-height to 1 vertical rhythm unit.
+// Resets the baseline to 1 rhythm unit
 // Does not work on elements whose font-size is different from $base-font-size.
 //
 // @deprecated This mixin will be removed in the next release.
-// Please use the `adjust-leading-to` mixin instead.
-@mixin reset-baseline {
-  @include adjust-leading-to(1, if($relative-font-sizing, $base-font-size, $base-font-size));
+// Please use `adjust-leading-to(1)` instead.
+@mixin reset-baseline($font-size: $base-font-size) {
+  @include adjust-leading-to(1, $font-size);
 }
 
 // Show a background image that can be used to debug your alignments.
+// As this is a development feature, this mixin never outputs pixel fallbacks
+// for rem output.
 // Include the $img argument if you would rather use your own image than the
 // Compass default gradient image.
 @mixin debug-vertical-alignment($img: false) {
   @if $img {
     background: image-url($img);
-  } @else {
-    @include baseline-grid-background($base-rhythm-unit);
+  }
+  @else {
+    @include baseline-grid-background(if($round-to-nearest-half-line, rhythm(1/2), rhythm(1)));
   }
 }
 
@@ -92,12 +146,13 @@ $base-half-leader: $base-leader / 2;
 // of this font should use up. It does not have to be an integer, but it
 // defaults to the smallest integer that is large enough to fit the font.
 // Use $from-size to adjust from a font-size other than the base font-size.
-@mixin adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) {
-  @if not $relative-font-sizing and $from-size != $base-font-size {
-    @warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to";
+@mixin adjust-font-size-to($to-size, $lines: auto, $from-size: $base-font-size) {
+  $to-size: convert-length($to-size, px, $from-size);
+  @if $lines == auto {
+    $lines: lines-for-font-size($to-size);
   }
-  font-size: $font-unit * $to-size / $from-size;
-  @include adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size));
+  @include output-rhythm(font-size, convert-length($to-size, $rhythm-unit, $from-size));
+  @include adjust-leading-to($lines, $to-size);
 }
 
 // Adjust a block to have different line height to maintain the rhythm.
@@ -105,117 +160,141 @@ $base-half-leader: $base-leader / 2;
 // font should use up. It does not have to be an integer, but it defaults to the
 // smallest integer that is large enough to fit the font.
 @mixin adjust-leading-to($lines, $font-size: $base-font-size) {
-  line-height: rhythm($lines, $font-size);
-}
-
-// Calculate rhythm units.
-@function rhythm(
-  $lines: 1,
-  $font-size: $base-font-size,
-  $offset: 0
-) {
-  @if not $relative-font-sizing and $font-size != $base-font-size {
-    @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
-  }
-  $rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size;
-  // Round the pixels down to nearest integer.
-  @if unit($rhythm) == px {
-    $rhythm: floor($rhythm);
-  }
-  @return $rhythm;
-}
-
-// Calculate the minimum multiple of rhythm units needed to contain the font-size.
-@function lines-for-font-size($font-size) {
-  $lines: if($round-to-nearest-half-line,
-              ceil(2 * $font-size / $base-line-height) / 2,
-              ceil($font-size / $base-line-height));
-  @if $lines * $base-line-height - $font-size < $min-line-padding * 2 {
-    $lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
-  }
-  @return $lines;
+  @include output-rhythm(line-height, rhythm($lines, $font-size));
 }
 
 // Apply leading whitespace. The $property can be margin or padding.
 @mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
-  #{$property}-top: rhythm($lines, $font-size);
+  @include output-rhythm(#{$property}-top, rhythm($lines, $font-size));
 }
 
 // Apply leading whitespace as padding.
 @mixin padding-leader($lines: 1, $font-size: $base-font-size) {
-  padding-top: rhythm($lines, $font-size);
+  @include output-rhythm(padding-top, rhythm($lines, $font-size));
 }
 
 // Apply leading whitespace as margin.
 @mixin margin-leader($lines: 1, $font-size: $base-font-size) {
-  margin-top: rhythm($lines, $font-size);
+  @include output-rhythm(margin-top, rhythm($lines, $font-size));
 }
 
 // Apply trailing whitespace. The $property can be margin or padding.
 @mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
-  #{$property}-bottom: rhythm($lines, $font-size);
+  @include output-rhythm(#{$property}-bottom, rhythm($lines, $font-size));
 }
 
 // Apply trailing whitespace as padding.
 @mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
-  padding-bottom: rhythm($lines, $font-size);
+  @include output-rhythm(padding-bottom, rhythm($lines, $font-size));
 }
 
 // Apply trailing whitespace as margin.
 @mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
-  margin-bottom: rhythm($lines, $font-size);
+  @include output-rhythm(margin-bottom, rhythm($lines, $font-size));
 }
 
 // Shorthand mixin to apply whitespace for top and bottom margins and padding.
-@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
+@mixin rhythm(
+  $leader: 1,
+  $padding-leader: 0,
+  $padding-trailer: $padding-leader,
+  $trailer: $leader,
+  $font-size: $base-font-size
+) {
   @include leader($leader, $font-size);
   @include padding-leader($padding-leader, $font-size);
   @include padding-trailer($padding-trailer, $font-size);
   @include trailer($trailer, $font-size);
 }
 
-// Apply a border and whitespace to any side without destroying the vertical
-// rhythm. The whitespace must be greater than the width of the border.
-@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
-  @if not $relative-font-sizing and $font-size != $base-font-size {
-    @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border";
-  }
-  border-#{$side}: {
-    style: $border-style;
-    width: $font-unit * $width / $font-size;
-  };
-  padding-#{$side}: rhythm($lines, $font-size, $offset: $width);
+// Shorthand mixin to apply whitespace for top and bottom margins.
+@mixin rhythm-margins(
+  $leader: 1,
+  $trailer: $leader,
+  $font-size: $base-font-size
+) {
+  @include leader($leader, $font-size);
+  @include trailer($trailer, $font-size);
 }
 
-// Apply borders and whitespace equally to all sides.
-@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
-  @if not $relative-font-sizing and $font-size != $base-font-size {
-    @warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders";
+// Shorthand mixin to apply whitespace for top and bottom padding.
+@mixin rhythm-padding(
+  $padding-leader: 1,
+  $padding-trailer: $padding-leader,
+  $font-size: $base-font-size
+) {
+  @include padding-leader($padding-leader, $font-size);
+  @include padding-trailer($padding-trailer, $font-size);
+}
+
+// Apply a border and whitespace to any side without destroying the vertical
+// rhythm. The whitespace must be greater than the width of the border.
+@mixin apply-side-rhythm-border(
+  $side,
+  $width: $default-rhythm-border-width,
+  $lines: 1,
+  $font-size: $base-font-size,
+  $border-style: $default-rhythm-border-style
+) {
+  // If applying borders to all sides, use shorthand properties
+  $border-prop: if($side == all, border, border-#{$side});
+  @include output-rhythm(#{$border-prop}-width, convert-length($width, $rhythm-unit, $font-size));
+  #{$border-prop}-style: nth($border-style, 1);
+  @if type-of($border-style) == list and length($border-style) > 1 {
+    #{$border-prop}-color: nth($border-style, 2);
   }
-  border: {
-    style: $border-style;
-    width: $font-unit * $width / $font-size;
-  };
-  padding: rhythm($lines, $font-size, $offset: $width);
+  $padding-prop: if($side == all, padding, padding-#{$side});
+  @include output-rhythm(#{$padding-prop}, rhythm($lines, $font-size, $offset: $width));
 }
 
 // Apply a leading border.
-@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+// $border-style and $width are deprecated and will be removed in a future version of Compass.
+@mixin leading-border(
+  $width: $default-rhythm-border-width,
+  $lines: 1,
+  $font-size: $base-font-size,
+  $border-style: $default-rhythm-border-style
+) {
   @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
 }
 
 // Apply a trailing border.
-@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+@mixin trailing-border(
+  $width: $default-rhythm-border-width,
+  $lines: 1,
+  $font-size: $base-font-size,
+  $border-style: $default-rhythm-border-style
+) {
   @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
 }
 
 // Apply both leading and trailing borders.
-@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+@mixin horizontal-borders(
+  $width: $default-rhythm-border-width,
+  $lines: 1,
+  $font-size: $base-font-size,
+  $border-style: $default-rhythm-border-style
+) {
   @include leading-border($width, $lines, $font-size, $border-style);
   @include trailing-border($width, $lines, $font-size, $border-style);
 }
 
 // Alias for `horizontal-borders` mixin.
-@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+@mixin h-borders(
+  $width: $default-rhythm-border-width,
+  $lines: 1,
+  $font-size: $base-font-size,
+  $border-style: $default-rhythm-border-style
+) {
   @include horizontal-borders($width, $lines, $font-size, $border-style);
 }
+
+// Apply borders and whitespace equally to all sides.
+@mixin rhythm-borders(
+  $width: $default-rhythm-border-width,
+  $lines: 1,
+  $font-size: $base-font-size,
+  $border-style: $default-rhythm-border-style
+) {
+  @include apply-side-rhythm-border(all, $width, $lines, $font-size, $border-style);
+}
diff --git a/stylesheets/compass/utilities/color/brightness.scss b/stylesheets/compass/utilities/color/brightness.scss
new file mode 100644
index 0000000..d8d4e64
--- /dev/null
+++ b/stylesheets/compass/utilities/color/brightness.scss
@@ -0,0 +1,20 @@
+// Computes the "brightness" of a color
+//
+// Brightness is similiar to lightness in HSL but more closely approximates
+// how humans perceive the intensity of the different RGB components of
+// a color. Brightness is sometimes called luminance.
+//
+// Returns a number between 0% and 100%, where 100% is fully bright
+// (white) and 0% is fully dark (black) for color values.
+//
+// For numbers and percentages it returns the same value to be used
+// in `@include filter(brightness(1.1))`.
+@function brightness($color) {
+  @if type-of($color) == color {
+    @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
+  }
+  @else {
+    @return unquote("brightness(#{$color})");
+  }
+}
+
diff --git a/stylesheets/compass/utilities/color/contrast.scss b/stylesheets/compass/utilities/color/contrast.scss
index fc73905..1c1d071 100644
--- a/stylesheets/compass/utilities/color/contrast.scss
+++ b/stylesheets/compass/utilities/color/contrast.scss
@@ -1,28 +1,52 @@
+@import "compass/utilities/color/brightness";
+
 $contrasted-dark-default:   #000 !default;
 $contrasted-light-default:  #fff !default;
-$contrasted-lightness-threshold: 30% !default;
 
-// Returns the `$light` color when the `$color` is dark
-// and the `$dark` color when the `$color` is light.
-// The `$threshold` is a percent between `0%` and `100%` and it determines
-// when the lightness of `$color` changes from "dark" to "light".
+// Returns either the `$light` or `$dark` color
+// by deciding which contrasts more with `$color`.
+//
+// E.g. This can be used to select the more readable foreground color
+// for a given background color.
+//
+// `$dark` defaults to black and `$light` defaults to white.
+//
+// When `$color` is `null`, this function returns `null`.
 @function contrast-color(
   $color,
   $dark: $contrasted-dark-default,
   $light: $contrasted-light-default,
-  $threshold: $contrasted-lightness-threshold
+  $threshold: null
 ) {
-  @return if(lightness($color) < $threshold, $light, $dark)
+  @if $threshold {
+    // Deprecated in Compass 0.13
+    @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release."
+  }
+  @if $color == null {
+    @return null;
+  }
+  @else {
+    $color-brightness: brightness($color);
+    $dark-text-brightness: brightness($dark);
+    $light-text-brightness: brightness($light);
+
+    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+  }
 }
 
-// Sets the specified background color and calculates a dark or light contrasted text color.
-// The arguments are passed through to the [contrast-color function](#function-contrast-color).
+// Sets the specified background color and calculates a dark or light
+// contrasted text color.  The arguments are passed through to the
+// [contrast-color function](#function-contrast-color).
 @mixin contrasted(
   $background-color,
   $dark: $contrasted-dark-default,
   $light: $contrasted-light-default,
-  $threshold: $contrasted-lightness-threshold
+  $threshold: null
 ) {
+  @if $threshold {
+    // Deprecated in Compass 0.13
+    @warn "The $threshold argment to contrasted is no longer needed and will be removed in the next release."
+  }
   background-color: $background-color;
-  color: contrast-color($background-color, $dark, $light, $threshold);
-}
\ No newline at end of file
+  color: contrast-color($background-color, $dark, $light);
+}
diff --git a/stylesheets/compass/utilities/general/float.scss b/stylesheets/compass/utilities/general/float.scss
index 914f184..c8d68f0 100644
--- a/stylesheets/compass/utilities/general/float.scss
+++ b/stylesheets/compass/utilities/general/float.scss
@@ -1,3 +1,9 @@
+@import "compass/support";
+
+// The legacy support threshold for float.
+// Defaults to the $critical-usage-threshold.
+$legacy-float-support-threshold: $critical-usage-threshold !default;
+
 // Implementation of float:left with fix for the
 // [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
 @mixin float-left {
@@ -11,8 +17,9 @@
 // Direction independent float mixin that fixes the
 // [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
 @mixin float($side: left) {
-  display: inline;
-  float: unquote($side); }
+  float: unquote($side);
+  @if support-legacy-browser("ie", "6", $threshold: $legacy-float-support-threshold) {
+    display: inline; } }
 
 // Resets floated elements back to their default of `float: none` and defaults
 // to `display: block` unless you pass `inline` as an argument
@@ -27,4 +34,5 @@
 //         +reset-float
 @mixin reset-float($display: block) {
   float: none;
-  display: $display; }
\ No newline at end of file
+  @if support-legacy-browser("ie", "6", $threshold: $legacy-float-support-threshold) {
+    display: $display; } }
diff --git a/stylesheets/compass/utilities/general/hacks.scss b/stylesheets/compass/utilities/general/hacks.scss
index d5a6bae..5f82cd5 100644
--- a/stylesheets/compass/utilities/general/hacks.scss
+++ b/stylesheets/compass/utilities/general/hacks.scss
@@ -1,5 +1,9 @@
 @import "compass/support";
 
+// The legacy support threshold for has-layout.
+// Defaults to the $critical-usage-threshold.
+$has-layout-support-threshold: $critical-usage-threshold !default;
+
 // The `zoom` approach generates less CSS but does not validate.
 // Set this to `block` to use the display-property to hack the
 // element to gain layout.
@@ -9,7 +13,7 @@ $default-has-layout-approach: zoom !default;
 // to gain the "hasLayout" property in internet explorer.
 // More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
 @mixin has-layout($approach: $default-has-layout-approach) {
-  @if $legacy-support-for-ie {
+  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
     @if $approach == zoom {
       @include has-layout-zoom;
     } @else if $approach == block {
@@ -22,13 +26,13 @@ $default-has-layout-approach: zoom !default;
 }
 
 @mixin has-layout-zoom {
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
     *zoom: 1;
   }
 }
 
 @mixin has-layout-block {
-  @if $legacy-support-for-ie {
+  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
     // This makes ie6 get layout
     display: inline-block;
     // and this puts it back to block
@@ -36,11 +40,26 @@ $default-has-layout-approach: zoom !default;
   }
 }
 
+
+// The legacy support threshold for IE6 attribute hack.
+// Defaults to the $critical-usage-threshold.
+$ie6-attribute-hack-support-threshold: $critical-usage-threshold !default;
+
 // A hack to supply IE6 (and below) with a different property value.
 // [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
 @mixin bang-hack($property, $value, $ie6-value) {
-  @if $legacy-support-for-ie6 {
+  @if support-legacy-browser("ie", "6", $threshold: $ie6-attribute-hack-support-threshold) {
+    @warn "it's recommended to use the underscore-hack() mixin instead of bang-hack()";
     #{$property}: #{$value} !important;
     #{$property}: #{$ie6-value};
   }
 }
+
+// A hack to supply IE6 (and below) with a different property value.
+// [Read more](http://www.paulirish.com/2009/browser-specific-css-hacks/)
+@mixin underscore-hack($property, $value, $ie6-value) {
+  @if support-legacy-browser("ie", "6", $threshold: $ie6-attribute-hack-support-threshold) {
+    #{$property}: #{$value};
+    _#{$property}: #{$ie6-value};
+  }
+}
diff --git a/stylesheets/compass/utilities/general/min.scss b/stylesheets/compass/utilities/general/min.scss
index 99a676b..cf27282 100644
--- a/stylesheets/compass/utilities/general/min.scss
+++ b/stylesheets/compass/utilities/general/min.scss
@@ -13,4 +13,4 @@
 // @private This mixin is not meant to be used directly.
 @mixin hacked-minimum($property, $value) {
   min-#{$property}: $value;
-  @include bang-hack($property, auto, $value); }
+  @include underscore-hack($property, auto, $value); }
diff --git a/stylesheets/compass/utilities/sass.scss b/stylesheets/compass/utilities/sass.scss
new file mode 100644
index 0000000..64386ce
--- /dev/null
+++ b/stylesheets/compass/utilities/sass.scss
@@ -0,0 +1,2 @@
+@import "sass/lists";
+@import "sass/maps";
diff --git a/stylesheets/compass/utilities/sass/lists.scss b/stylesheets/compass/utilities/sass/lists.scss
new file mode 100644
index 0000000..e5d4577
--- /dev/null
+++ b/stylesheets/compass/utilities/sass/lists.scss
@@ -0,0 +1,16 @@
+@function newline() {
+  @return "
+";
+}
+
+// Joins a list into a string with the separator given.
+@function list-join($list, $separator: ", ") {
+  $result: "";
+  @each $value in $list {
+    @if str-length($result) > 0 {
+      $result: $result + $separator;
+    }
+    $result: $result + #{$value};
+  }
+  @return $result;
+}
diff --git a/stylesheets/compass/utilities/sass/maps.scss b/stylesheets/compass/utilities/sass/maps.scss
new file mode 100644
index 0000000..31b66d6
--- /dev/null
+++ b/stylesheets/compass/utilities/sass/maps.scss
@@ -0,0 +1,19 @@
+// Returns true if a $map is a superset of $sub-map.
+@function map-contains-all($map, $sub-map) {
+  @each $key, $value in $sub-map {
+    @if not (map-has-key($map, $key) and map-get($map, $key) == $value) {
+      @return false;
+    }
+  }
+  @return true;
+}
+
+// Returns true if a $map has any key-value pair in $sub-map.
+@function map-contains-any($map, $sub-map) {
+  @each $key, $value in $sub-map {
+    @if map-has-key($map, $key) and map-get($map, $key) == $value {
+      @return true;
+    }
+  }
+  @return false;
+}
diff --git a/stylesheets/compass/utilities/sprites/base.scss b/stylesheets/compass/utilities/sprites/base.scss
index 1b268a8..fcc179e 100644
--- a/stylesheets/compass/utilities/sprites/base.scss
+++ b/stylesheets/compass/utilities/sprites/base.scss
@@ -1,5 +1,5 @@
 // Determines those states for which you want to enable magic sprite selectors
-$sprite-selectors: hover, target, active !default;
+$sprite-selectors: hover, target, active, focus !default;
 
 // Set the width and height of an element to the original
 // dimensions of an image before it was included in the sprite.
@@ -11,37 +11,55 @@ $sprite-selectors: hover, target, active !default;
 // Set the background position of the given sprite `$map` to display the
 // sprite of the given `$sprite` name. You can move the image relative to its
 // natural position by passing `$offset-x` and `$offset-y`.
-@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0) {
-  background-position: sprite-position($map, $sprite, $offset-x, $offset-y);  
+// The background-position will be returned in pixels. By passing `true
+// for `$use_percentages`, you get percentages instead.
+@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0,
+$use-percentages: false) {
+  background-position: sprite-position($map, $sprite, $offset-x, $offset-y,
+  $use-percentages);
 }
 
 
 // Determines if you want to include magic selectors in your sprites
-$disable-magic-sprite-selectors:false !default;
+$disable-magic-sprite-selectors: false !default;
+
+// Set this to underscore if you prefer
+$default-sprite-separator: "-" !default;
 
 // Include the position and (optionally) dimensions of this `$sprite`
 // in the given sprite `$map`. The sprite url should come from either a base
 // class or you can specify the `sprite-url` explicitly like this:
 //
 //     background: $map no-repeat;
-@mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) {
-  @include sprite-background-position($map, $sprite, $offset-x, $offset-y);
+@mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0,
+                             $use-percentages: false,
+                             $use-magic-selectors: not $disable-magic-sprite-selectors,
+                             $separator: $default-sprite-separator) {
+  @include sprite-background-position($map, $sprite, $offset-x, $offset-y,
+                                      $use-percentages);
   @if $dimensions {
     @include sprite-dimensions($map, $sprite);
   }
-  @if not $disable-magic-sprite-selectors {
-    @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y);
+  @if $use-magic-selectors {
+    @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y,
+                              $use-percentages, $separator);
   }
 }
 
 // Include the selectors for the `$sprite` given the `$map` and the 
 // `$full-sprite-name`
 // @private
-@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) {
-  @each $selector in $sprite-selectors {
-    @if sprite_has_selector($map, $sprite-name, $selector) {
-      &:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} {
-          @include sprite-background-position($map, "#{$sprite-name}_#{$selector}", $offset-x, $offset-y);
+@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0,
+                        $offset-y: 0, $use-percentages: false,
+                        $separator: $default-sprite-separator) {
+  @each $state in $sprite-selectors {
+    $sprite-class: "#{$full-sprite-name}#{$separator}#{$state}";
+    @if sprite_has_selector($map, $sprite-name, $state) {
+      @if sprite_has_valid_selector($sprite-class) {
+        &:#{$state}, &.#{$sprite-class} {
+            @include sprite-background-position($map, sprite_selector_file($map, $sprite-name, $state),
+                                                $offset-x, $offset-y, $use-percentages);
+        }
       }
     }
   }
@@ -53,14 +71,22 @@ $disable-magic-sprite-selectors:false !default;
 // If a base class is provided, then each class will extend it.
 //
 // If `$dimensions` is `true`, the sprite dimensions will specified.
-@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) {
+// Positions are returned in pixel units. Set `$use_percentages` to true to
+// instead get percentages.
+@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false,
+               $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0,
+               $use-percentages: false,
+               $separator: $default-sprite-separator) {
   @each $sprite-name in $sprite-names {
     @if sprite_does_not_have_parent($map, $sprite-name) {
-      $full-sprite-name: "#{$prefix}-#{$sprite-name}";
-      .#{$full-sprite-name} {
-        @if $base-class { @extend #{$base-class}; }
-        @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y);
+      $full-sprite-name: "#{$prefix}#{$separator}#{$sprite-name}";
+      @if sprite_has_valid_selector($full-sprite-name) {
+        .#{$full-sprite-name} {
+          @if $base-class { @extend #{$base-class}; }
+          @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y, 
+                          $use-percentages, $separator: $separator);
+        }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/stylesheets/compass/utilities/sprites/sprite-img.scss b/stylesheets/compass/utilities/sprites/sprite-img.scss
index ff90c00..df3fc13 100644
--- a/stylesheets/compass/utilities/sprites/sprite-img.scss
+++ b/stylesheets/compass/utilities/sprites/sprite-img.scss
@@ -1,3 +1,5 @@
+@import "compass/typography/text/replacement";
+
 // @doc off
 // Example 1:
 //
@@ -76,4 +78,4 @@ $sprite-image-default-height: $sprite-default-size !default;
 // The name of the image in the sprite folder should be `$img-name`
 @mixin sprite-replace-text-with-dimensions ($map, $sprite, $offset-x: 0, $offset-y: 0){    
   @include sprite-replace-text ($map, $sprite, true, $offset-x, $offset-y);
-}
\ No newline at end of file
+}
diff --git a/stylesheets/compass/utilities/tables/borders.scss b/stylesheets/compass/utilities/tables/borders.scss
index 120896d..abd62d1 100644
--- a/stylesheets/compass/utilities/tables/borders.scss
+++ b/stylesheets/compass/utilities/tables/borders.scss
@@ -1,3 +1,5 @@
+@import "compass/support";
+
 @mixin outer-table-borders($width: 2px, $color: black) {
   border: $width solid $color;
   thead {
@@ -7,7 +9,7 @@
     th, td {
       border-top: $width solid $color; } }
   th {
-    &:first-child {
+    &:first-child #{if(support-legacy-browser(ie, "6"), ', &.first', null)} {
       border-right: $width solid $color; } } }
 
 @mixin inner-table-borders($width: 2px, $color: black) {
@@ -15,19 +17,22 @@
     border: {
       right: $width solid $color;
       bottom: $width solid $color;
-      left-width: 0px;
-      top-width: 0px; };
-    &:last-child,
-    &.last {
-      border-right-width: 0px; } }
+      left-width: 0;
+      top-width: 0; };
+    &:last-child {
+      border-right-width: 0; }
 
-// IE8 ignores rules that are included on the same line as :last-child
-// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
+    // IE8 ignores rules that are included on the same line as :last-child
+    // see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
+    @if support-legacy-browser(ie, "8") {
+      &.last {
+        border-right-width: 0; } } }
 
   tbody, tfoot {
     tr:last-child {
       th, td {
-        border-bottom-width: 0px; } }
-    tr.last {
-      th, td {
-        border-bottom-width: 0px; } } } }
+        border-bottom-width: 0; } }
+    @if support-legacy-browser(ie, "8") {
+      tr.last {
+        th, td {
+          border-bottom-width: 0; } } } } }