Merge pull request #347 from edx/update-sass

Update SASS and Bourbon, add Neat
2013-07-10 11:09:11 -07:00
parent 9824ba43cf 18474986f3
commit cb62797306
147 changed files with 2725 additions and 1753 deletions
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -27,6 +27,8 @@ Blades: User answer now preserved (and changeable) after clicking "show answer"

 LMS: Removed press releases

+Common: Updated Sass and Bourbon libraries, added Neat library
+
 LMS: Users are no longer auto-activated if they click "reset password"
 This is now done when they click on the link in the reset password
 email they receive (along with usual path through activation email).
--- a/5
+++ b/5
@@ -1,7 +1,8 @@
 source 'https://rubygems.org'
 gem 'rake', '~> 10.0.3'
-gem 'sass', '3.1.15'
-gem 'bourbon', '~> 1.3.6'
+gem 'sass', '3.2.9'
+gem 'bourbon', '~> 3.1.8'
+gem 'neat', '~> 1.3.0'
 gem 'colorize', '~> 0.5.8'
 gem 'launchy', '~> 2.1.2'
 gem 'sys-proctable', '~> 0.9.3'
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -19,9 +19,9 @@ body, input, button {
 }

 a {
+  @include transition(color $tmg-f2 ease-in-out 0s);
  text-decoration: none;
  color: $blue;
-  @include transition(color 0.25s ease-in-out);

  &:hover {
    color: $orange-d1;
@@ -591,8 +591,8 @@ hr.divide {
 }

 .window {
-  // @include border-radius(3px);
-  // @include box-shadow(0 1px 1px $shadow-l1);
+  // border-radius: 3px;
+  // box-shadow: 0 1px 1px $shadow-l1;
  // margin-bottom: $baseline;
  // border: 1px solid $gray-l2;
  // background: $white;
@@ -607,7 +607,7 @@ hr.divide {
    border-radius: 2px 2px 0 0;
    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    background-color: $lightBluishGrey;
-    @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    font-size: 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  }
@@ -642,6 +642,7 @@ hr.divide {

 // system notifications
 .toast-notification {
+  @include transition(all $tmg-f2 linear 0s);
  display: none;
  position: fixed;
  top: 20px;
@@ -653,11 +654,10 @@ hr.divide {
  border: 1px solid #333;
  @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
  background-color: rgba(30, 30, 30, .92);
-  @include box-shadow(0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
  font-size: 13px;
  text-align: center;
  color: #fff;
-  @include transition(all .2s);

  p, span {
    color: #fff;
@@ -794,7 +794,7 @@ hr.divide {

 .tooltip {
  @include font-size(12);
-  @include transition(opacity 0.1s ease-out);
+  @include transition(opacity $tmg-f3 ease-out 0s);
  position: absolute;
  top: 0;
  left: 0;
@@ -857,7 +857,7 @@ body.js {
  .content-modal {
    @include border-bottom-radius(2px);
    @include box-sizing(border-box);
-    @include box-shadow(0 2px 4px $shadow-d1);
+    box-shadow: 0 2px 4px $shadow-d1;
    position: relative;
    display: none;
    width: 700px;
@@ -867,7 +867,7 @@ body.js {
    background: $white;

    .action-modal-close {
-      @include transition(top .25s ease-in-out);
+      @include transition(top $tmg-f3 ease-in-out 0s);
      @include border-bottom-radius(3px);
      position: absolute;
      top: -3px;
--- a/cms/static/sass/_mixins-inherited.scss
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -1,454 +0,0 @@
-// studio - utilities - INHERITED mixins and extends
-
-// NOTE: these are older/poorly architected mixins that we want to move away from using or refactor in the future.
-// They are still referenced when styliing current interface elements and as such need to be preserved for the time being.
-// talbs: we need to slowly ween ourselves off of these
-// ====================
-
-
-// line-height (old way)
-@function lh($amount: 1) {
-  @return $body-line-height * $amount;
-}
-
-// inherited - vertical and horizontal centering
-@mixin vertically-and-horizontally-centered ($height, $width) {
-  left: 50%;
-  margin-left: -$width / 2;
-  min-height: $height;
-  min-width: $width;
-  position: absolute;
-  top: 150px;
-}
-
-// ====================
-
-// inherited - dividers
-.faded-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1) 50%,
-                                                    rgba(200,200,200, 0)));
-  height: 1px;
-  width: 100%;
-}
-
-.faded-hr-divider-medium {
-  @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
-                                                    rgba(240,240,240, 1) 50%,
-                                                    rgba(240,240,240, 0)));
-  height: 1px;
-  width: 100%;
-}
-
-.faded-hr-divider-light {
-  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
-                                                    rgba(255,255,255, 0.8) 50%,
-                                                    rgba(255,255,255, 0)));
-  height: 1px;
-  width: 100%;
-}
-
-.faded-vertical-divider {
-  @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1) 50%,
-                                                    rgba(200,200,200, 0)));
-  height: 100%;
-  width: 1px;
-}
-
-.faded-vertical-divider-light {
-  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
-                                                    rgba(255,255,255, 0.6) 50%,
-                                                    rgba(255,255,255, 0)));
-  height: 100%;
-  width: 1px;
-}
-
-.vertical-divider {
-  @extend .faded-vertical-divider;
-  position: relative;
-
-  &::after {
-    @extend .faded-vertical-divider-light;
-    content: "";
-    display: block;
-    position: absolute;
-    left: 1px;
-  }
-}
-
-.horizontal-divider {
-  border: none;
-  @extend .faded-hr-divider;
-  position: relative;
-
-  &::after {
-    @extend .faded-hr-divider-light;
-    content: "";
-    display: block;
-    position: absolute;
-    top: 1px;
-  }
-}
-
-.fade-right-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1)));
-  border: none;
-}
-
-.fade-left-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
-                                                    rgba(200,200,200, 0)));
-  border: none;
-}
-
-// ====================
-
-// inherited - ui
-.window {
-  @include clearfix();
-  @include border-radius(3px);
-  @include box-shadow(0 1px 1px $shadow-l1);
-  margin-bottom: $baseline;
-  border: 1px solid $gray-l2;
-  background: $white;
-}
-
-// ====================
-
-// mixins - grandfathered
-@mixin button {
-  @include font-size(14);
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0));
-  @include transition(background-color .15s, box-shadow .15s);
-  display: inline-block;
-  padding: ($baseline/5) $baseline ($baseline/4);
-  font-weight: 700;
-
-  &.disabled {
-    border: 1px solid $gray-l1 !important;
-    border-radius: 3px !important;
-    background: $gray-l1 !important;
-    color: $gray-d1 !important;
-    pointer-events: none;
-    cursor: none;
-    &:hover {
-      box-shadow: 0 0 0 0 !important;
-    }
-  }
-
-  &:hover, &.active {
-    @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
-  }
-}
-
-@mixin green-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-  border: 1px solid $green-d1;
-  border-radius: 3px;
-  background-color: $green;
-  color: $white;
-
-  &:hover {
-    background-color: $green-s1;
-    color: $white;
-  }
-
-  &.disabled {
-    border: 1px solid $green-l3 !important;
-    background: $green-l3 !important;
-    color: $white !important;
-    @include box-shadow(none);
-  }
-}
-
-@mixin blue-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  border: 1px solid $blue-d1;
-  border-radius: 3px;
-  background-color: $blue;
-  color: $white;
-
-  &:hover, &.active {
-    background-color: $blue-s2;
-    color: $white;
-  }
-
-  &.disabled {
-    @include box-shadow(none);
-    border: 1px solid $blue-l3 !important;
-    background: $blue-l3 !important;
-    color: $white !important;
-  }
-}
-
-@mixin red-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  border: 1px solid $red-d1;
-  border-radius: 3px;
-  background-color: $red;
-  color: $white;
-
-  &:hover, &.active {
-    background-color: $red-s1;
-    color: $white;
-  }
-
-  &.disabled {
-    @include box-shadow(none);
-    border: 1px solid $red-l3 !important;
-    background: $red-l3 !important;
-    color: $white !important;
-  }
-}
-
-@mixin pink-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  border: 1px solid $pink-d1;
-  border-radius: 3px;
-  background-color: $pink;
-  color: $white;
-
-  &:hover, &.active {
-    background-color: $pink-s1;
-    color: $white;
-  }
-
-  &.disabled {
-    @include box-shadow(none);
-    border: 1px solid $pink-l3 !important;
-    background: $pink-l3 !important;
-    color: $white !important;
-  }
-}
-
-@mixin orange-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-  border: 1px solid $orange-d1;
-  border-radius: 3px;
-  background-color: $orange;
-  color: $gray-d2;
-
-  &:hover {
-    background-color: $orange-s2;
-    color: $gray-d2;
-  }
-
-  &.disabled {
-    border: 1px solid $orange-l3 !important;
-    background: $orange-l2 !important;
-    color: $gray-l1 !important;
-    @include box-shadow(none);
-  }
-}
-
-@mixin white-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-  border: 1px solid $mediumGrey;
-  border-radius: 3px;
-  background-color: #dfe5eb;
-  color: rgb(92, 103, 122);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-
-  &:hover {
-    background-color: rgb(222, 236, 247);
-    color: rgb(92, 103, 122);
-  }
-}
-
-@mixin grey-button {
-  @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-  border: 1px solid $gray-d2;
-  border-radius: 3px;
-  background-color: #d1dae3;
-  color: #6d788b;
-
-  &:hover {
-    background-color: #d9e3ee;
-    color: #6d788b;
-  }
-}
-
-@mixin gray-button {
-  @include button;
-  @include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
-  @include box-shadow(0 1px 0 $white-t1 inset);
-  border: 1px solid $gray-d1;
-  border-radius: 3px;
-  background-color: $gray-d2;
-  color: $gray-l3;
-
-  &:hover {
-    background-color: $gray-d3;
-    color: $white;
-  }
-}
-
-@mixin dark-grey-button {
-  @include button;
-  border: 1px solid $gray-d2;
-  border-radius: 3px;
-  background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $gray-d1;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
-  color: $white;
-
-  &:hover {
-    background-color: $gray-d4;
-    color: $white;
-  }
-}
-
-@mixin edit-box {
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
-  padding: 15px 20px;
-  border-radius: 3px;
-  background-color: $lightBluishGrey2;
-  color: #3c3c3c;
-
-  label {
-    color: $baseFontColor;
-  }
-
-  input,
-  textarea {
-    border: 1px solid $darkGrey;
-  }
-
-  textarea {
-    min-height: 80px;
-  }
-
-  h5 {
-    margin-bottom: 8px;
-    color: #fff;
-    font-weight: 700;
-  }
-
-  .row {
-    margin-bottom: 10px;
-    padding: 0;
-    border: none;
-  }
-
-  .save-button {
-    @include blue-button;
-    margin-top: 0;
-  }
-
-  .cancel-button {
-    @include white-button;
-    margin-top: 0;
-  }
-}
-
-@mixin tree-view {
-  border: 1px solid $mediumGrey;
-  background: $lightGrey;
-
-  .branch {
-    margin-bottom: 10px;
-
-    &.collapsed {
-      margin-bottom: 0;
-    }
-  }
-
-  .branch > .section-item {
-    border-top: 1px solid #c5cad4;
-  }
-
-  .section-item {
-    position: relative;
-    display: block;
-    padding: 6px 8px 8px 16px;
-    background: #edf1f5;
-    font-size: 13px;
-
-    &:hover {
-      background: #fffcf1;
-
-      .item-actions {
-        display: block;
-      }
-    }
-
-    &.editing {
-      background: #fffcf1;
-    }
-
-    .draft-item:after,
-    .public-item:after,
-    .private-item:after {
-      margin-left: 3px;
-      font-size: 9px;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    .draft-item:after {
-      content: "- draft";
-    }
-
-    .private-item:after {
-      content: "- private";
-    }
-
-    .private-item {
-      color: #a4aab7;
-    }
-
-    .draft-item {
-      color: #9f7d10;
-    }
-  }
-
-  a {
-    color: $baseFontColor;
-
-    &.new-unit-item {
-      color: #6d788b;
-    }
-  }
-
-  ol {
-    .section-item {
-      padding-left: 56px;
-    }
-
-    .new-unit-item {
-      margin-left: 56px;
-    }
-  }
-
-  ol ol {
-    .section-item {
-      padding-left: 96px;
-    }
-
-    .new-unit-item {
-      margin-left: 96px;
-    }
-  }
-}
-
-// ====================
-
-// sunsetted mixins
-@mixin active {
-  @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-  @include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
-  background-color: rgba(255, 255, 255, .3);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-}
--- a/cms/static/sass/_mixins-inherited.scss
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -0,0 +1 @@
+../../../common/static/sass/_mixins-inherited.scss
--- a/cms/static/sass/_reset.scss
+++ b/cms/static/sass/_reset.scss
@@ -143,7 +143,7 @@ abbr[title] {
 	width: 100%;
 	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
 	//background-color: $lightBluishGrey;
-	@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;

 	li:first-child {
 		margin-left: 20px;
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -161,6 +161,17 @@ $shadow-d2: rgba($black, 0.6);

 // ====================

+// timing - used for animation/transition mixin syncing
+$tmg-s3: 3.0s;
+$tmg-s2: 2.0s;
+$tmg-s1: 1.0s;
+$tmg-avg: 0.75s;
+$tmg-f1: 0.50s;
+$tmg-f2: 0.25s;
+$tmg-f3: 0.125s;
+
+// ====================
+
 // specific UI
 $notification-height: ($baseline*10);

--- a/cms/static/sass/assets/_anims.scss
+++ b/cms/static/sass/assets/_anims.scss
@@ -1,36 +1,140 @@
 // studio animations & keyframes
 // ====================

-// rotate clockwise
-@mixin rotateClockwise {
+// fade in
+@include keyframes(fadeIn) {
+  0% {
+    opacity: 0.0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1.0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-fadeIn {
+  @include animation(fadeIn $tmg-f2 linear 1);
+}
+
+
+// fade out
+@include keyframes(fadeOut) {
+  0% {
+    opacity: 1.0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 0.0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-fadeOut {
+  @include animation(fadeOut $tmg-f2 linear 1);
+}
+
+
+// ====================
+
+
+// rotate up
+@include keyframes(rotateUp) {
  0% {
    @include transform(rotate(0deg));
  }

+  50% {
+    @include transform(rotate(-90deg));
+  }
+
+  100% {
+    @include transform(rotate(-180deg));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-rotateUp {
+  @include animation(rotateUp $tmg-f2 ease-in-out 1);
+}
+
+
+// rotate up
+@include keyframes(rotateDown) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(90deg));
+  }
+
+  100% {
+    @include transform(rotate(180deg));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+.anim-rotateDown {
+  @include animation(rotateDown $tmg-f2 ease-in-out 1);
+}
+
+
+// rotate clockwise
+@include keyframes(rotateCW) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(180deg));
+  }
+
  100% {
    @include transform(rotate(360deg));
  }
 }

-@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
-@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
-@-o-keyframes rotateClockwise { @include rotateClockwise(); }
-@keyframes rotateClockwise { @include rotateClockwise();}
-
-@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(rotateClockwise);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-
+// canned animation - use if you want out of the box/non-customized anim
+.anim-rotateCW {
+  @include animation(rotateCW $tmg-s1 linear infinite);
 }

+
+// rotate counter-clockwise
+@include keyframes(rotateCCW) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(-180deg));
+  }
+
+  100% {
+    @include transform(rotate(-360deg));
+  }
+}
+
+// canned  animation - use if you want out of the box/non-customized anim
+.anim-rotateCCW {
+  @include animation(rotateCCW $tmg-s1 linear infinite);
+}
+
+
 // ====================

+
 // notifications slide up
-@mixin notificationsSlideUp {
+@include keyframes(notificationSlideUp) {
  0% {
    @include transform(translateY(0));
  }
@@ -44,25 +148,8 @@
  }
 }

-@-moz-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
-@-webkit-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
-@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
-@keyframes notificationsSlideUp { @include notificationsSlideUp();}
-
-@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(notificationsSlideUp);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-
-}
-
-// ====================
-
 // notifications slide down
-@mixin notificationsSlideDown {
+@include keyframes(notificationSlideDown) {
  0% {
    @include transform(translateY(-($notification-height*0.99)));
  }
@@ -76,57 +163,12 @@
  }
 }

-@-moz-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
-@-webkit-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
-@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
-@keyframes notificationsSlideDown { @include notificationsSlideDown();}
-
-@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(notificationsSlideDown);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-}

 // ====================

-// bounce in
-@mixin bounceIn {
-  0% {
-    opacity: 0.0;
-    @include transform(scale(0.3));
-  }
-
-  50% {
-    opacity: 1.0;
-    @include transform(scale(1.05));
-  }
-
-  100% {
-    @include transform(scale(1));
-  }
-}
-
-@-moz-keyframes bounceIn { @include bounceIn(); }
-@-webkit-keyframes bounceIn { @include bounceIn(); }
-@-o-keyframes bounceIn { @include bounceIn(); }
-@keyframes bounceIn { @include bounceIn();}
-
-@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(bounceIn);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-}
-
-// ====================

 // bounce in
-@mixin bounceOut {
+@include keyframes(bounceIn) {
  0% {
    opacity: 0.0;
    @include transform(scale(0.3));
@@ -140,7 +182,16 @@
  100% {
    @include transform(scale(1));
  }
+}

+// canned animation - use if you want out of the box/non-customized anim
+.anim-bounceIn {
+  @include animation(bounceIn $tmg-f1 ease-in-out 1);
+}
+
+
+// bounce out
+@include keyframes(bounceOut) {
  0% {
    @include transform(scale(1));
  }
@@ -156,16 +207,7 @@
  }
 }

-@-moz-keyframes bounceOut { @include bounceOut(); }
-@-webkit-keyframes bounceOut { @include bounceOut(); }
-@-o-keyframes bounceOut { @include bounceOut(); }
-@keyframes bounceOut { @include bounceOut();}
-
-@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(bounceOut);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
+// canned animation - use if you want out of the box/non-customized anim
+.anim-bounceOut {
+  @include animation(bounceOut $tmg-f1 ease-in-out 1);
 }
--- a/cms/static/sass/assets/_graphics.scss
+++ b/cms/static/sass/assets/_graphics.scss
@@ -1,11 +1,11 @@
 .expand-collapse-icon {
+	@include transition(none);
 	position: relative;
 	display: inline-block;
 	width: 9px;
 	height: 11px;
 	margin-right: 10px;
 	background: url(../img/expand-collapse-icons.png) no-repeat;
-	@include transition(none);

 	&.expand {
 		top: 1px;
@@ -101,7 +101,7 @@
 	background: url(../img/edit-icon.png) no-repeat;

 	&.white {
-		background: url(../img/edit-icon-white.png) no-repeat;		
+		background: url(../img/edit-icon-white.png) no-repeat;
 	}
 }

@@ -132,7 +132,7 @@
 	background: url(../img/delete-icon.png) no-repeat;

 	&.white {
-		background: url(../img/delete-icon-white.png) no-repeat;		
+		background: url(../img/delete-icon-white.png) no-repeat;
 	}
 }

--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -163,7 +163,7 @@
  }

  &.current, &.active, &.is-selected {
-    @include box-shadow(inset 0 1px 2px 1px $shadow-l1);
+    box-shadow: inset 0 1px 2px 1px $shadow-l1;
    border-color: $gray-l3;
  }
 }
--- a/cms/static/sass/elements/_footer.scss
+++ b/cms/static/sass/elements/_footer.scss
@@ -44,12 +44,12 @@
        }

        a {
-          @include border-radius(2px);
+          border-radius: 2px;
          padding: ($baseline/2) ($baseline*0.75);
          background: transparent;

          [class^="icon-"] {
-            @include transition(top .25s ease-in-out .25s);
+            @include transition(top $tmg-f2 ease-in-out 0.25s);
            @include font-size(15);
            display: inline-block;
            vertical-align: middle;
--- a/cms/static/sass/elements/_forms.scss
+++ b/cms/static/sass/elements/_forms.scss
@@ -12,7 +12,7 @@ textarea.text {
  border-radius: 2px;
  @include linear-gradient($gray-l5, $white);
  background-color: $gray-l5;
-  @include box-shadow(inset 0 1px 2px $shadow-l1);
+  box-shadow: inset 0 1px 2px $shadow-l1;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: $baseFontColor;
@@ -135,6 +135,6 @@ code {
  border: 1px solid $mediumGrey;
  @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
  background-color:  #edf1f5;
-  @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  font-family: Monaco, monospace;
 }
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -3,7 +3,7 @@

 .wrapper-header {
  @extend .depth3;
-  @include box-shadow(0 1px 2px 0 $shadow-l1);
+  box-shadow: 0 1px 2px 0 $shadow-l1;
  position: relative;
  width: 100%;
  margin: 0;
@@ -77,7 +77,7 @@
    .title {
      @extend .t-action2;
      @extend .btn-dd-nav-primary;
-      @include transition(all 0.25s ease-in-out 0);
+      @include transition(all $tmg-f2 ease-in-out 0s);

      .label, .icon-caret-down {

@@ -160,7 +160,7 @@

    // entire link
    .course-link {
-      @include transition(color 0.25s ease-in-out);
+      @include transition(color $tmg-f2 ease-in-out 0s);
      display: block;
      color: $gray-d1;

@@ -310,7 +310,6 @@

      .action-signup {
        @include blue-button;
-        @include transition(all .15s);
        @include font-size(14);
        padding: ($baseline/4) ($baseline/2);
        text-transform: uppercase;
@@ -319,7 +318,6 @@

      .action-signin {
        @include white-button;
-        @include transition(all .15s);
        @include font-size(14);
        padding: ($baseline/4) ($baseline/2);
        text-transform: uppercase;
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -33,7 +33,7 @@ nav {
    }

    .ui-toggle-dd {
-      @include transition(rotate .25s ease-in-out .25s);
+      @include transition(all $tmg-f2 ease-in-out 0s);
      margin-left: ($baseline/10);
      display: inline-block;
      vertical-align: middle;
@@ -58,7 +58,7 @@ nav {
  }

  .wrapper-nav-sub {
-    @include transition (opacity 1.0s ease-in-out 0s);
+    @include transition(opacity $tmg-f2 ease-in-out 0s);
    position: absolute;
    top: ($baseline*2.5);
    opacity: 0.0;
@@ -74,9 +74,9 @@ nav {
  }

  .nav-sub {
-    @include border-radius(2px);
+    border-radius: 2px;
    @include box-sizing(border-box);
-    @include box-shadow(0 1px 1px $shadow-l1);
+    box-shadow: 0 1px 1px $shadow-l1;
    position: relative;
    width: 100%;
    border: 1px solid $gray-l3;
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -145,7 +145,7 @@
 // prompts
 .wrapper-prompt {
  @extend .depth5;
-  @include transition(all 0.05s ease-in-out);
+  @include transition(all $tmg-f3 ease-in-out 0s);
  position: fixed;
  top: 0;
  background: $black-t0;
@@ -162,8 +162,8 @@
  }

  .prompt {
-    @include border-radius(($baseline/5));
-    @include box-shadow(0 0 3px $shadow-d1);
+    border-radius: ($baseline/5);
+    box-shadow: 0 0 3px $shadow-d1;
    display: inline-block;
    vertical-align: middle;
    width: $baseline*17.5;
@@ -176,7 +176,7 @@
    }

    .nav-actions {
-      @include box-shadow(inset 0 1px 2px $shadow-d1);
+      box-shadow: inset 0 1px 2px $shadow-d1;
      border-top: 1px solid $black-t1;
      padding: ($baseline*0.75) $baseline;
      background: $gray-d4;
@@ -244,14 +244,14 @@
 .wrapper-notification {
  @extend .depth5;
  @include clearfix();
-  @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue);
+  box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: $baseline ($baseline*2);

  &.wrapper-notification-warning {
-    @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $orange);
+    box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $orange;

    [class^="icon"] {
      color: $orange;
@@ -259,7 +259,7 @@
  }

  &.wrapper-notification-error {
-    @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $red-l1);
+    box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $red-l1;

    [class^="icon"] {
      color: $red-l1;
@@ -267,7 +267,7 @@
  }

  &.wrapper-notification-confirmation {
-    @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $green);
+    box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $green;

    [class^="icon"] {
      color: $green;
@@ -275,7 +275,7 @@
  }

  &.wrapper-notification-saving {
-    @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $pink);
+    box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $pink;
  }

  // shorter/status notifications
@@ -364,7 +364,7 @@
  }

  [class^="icon"] {
-    @include transition (color 0.5s ease-in-out);
+    @include transition (color 0.50s ease-in-out 0s);
    @include font-size(22);
    width: flex-grid(1, 12);
    height: ($baseline*1.25);
@@ -437,7 +437,7 @@
  &.saving {

    [class^="icon"] {
-      @include anim-rotateClockwise(3s, linear, infinite);
+      @include animation(rotateCW $tmg-s3 linear infinite);
      width: 25px;
      margin: -4px 10px 0 0;
      @include transform-origin(52% 60%);
@@ -455,7 +455,7 @@
 .wrapper-alert {
  @extend .depth2;
  @include box-sizing(border-box);
-  @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
+  box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
  position: relative;
  overflow: hidden;
  width: 100%;
@@ -472,7 +472,7 @@
  }

  &.wrapper-alert-warning {
-    @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange);
+    box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange;

    [class^="icon"] {
      color: $orange;
@@ -480,7 +480,7 @@
  }

  &.wrapper-alert-error {
-    @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1);
+    box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1;

    [class^="icon"] {
      color: $red-l1;
@@ -488,7 +488,7 @@
  }

  &.wrapper-alert-confirmation {
-    @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green);
+    box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green;

    [class^="icon"] {
      color: $green;
@@ -496,7 +496,7 @@
  }

  &.wrapper-alert-announcement {
-    @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
+    box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;

    [class^="icon"] {
      color: $blue;
@@ -504,7 +504,7 @@
  }

  &.wrapper-alert-step-required {
-    @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink);
+    box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink;

    [class^="icon"] {
      color: $pink;
@@ -531,7 +531,7 @@
  }

  [class^="icon"] {
-    @include transition (color 0.5s ease-in-out);
+    @include transition (color 0.50s ease-in-out 0s);
    @include font-size(22);
    width: flex-grid(1, 12);
    margin: ($baseline/4) flex-gutter() 0 0;
@@ -627,16 +627,16 @@
    pointer-events: none;

    .prompt {
-      opacity: 0.0;
+
    }
  }

-  // prompt showing/hiding
+  // prompt showing
  &.prompt-is-shown {

    .wrapper-view {
-      -webkit-filter: blur(2px) grayscale(25%);
-      filter: blur(2px) grayscale(25%);
+      -webkit-filter: blur(($baseline/10)) grayscale(25%);
+      filter: blur(($baseline/10)) grayscale(25%);
    }

    .wrapper-prompt.is-shown {
@@ -644,8 +644,23 @@
      pointer-events: auto;

      .prompt {
-        @include anim-bounceIn(0.5s);
-        opacity: 1.0;
+        @include animation(bounceIn $tmg-f1 ease-in-out 1);
+      }
+    }
+  }
+
+  // prompt hiding
+  &.prompt-is-hiding {
+
+    .wrapper-view {
+      -webkit-filter: blur(($baseline/10)) grayscale(25%);
+      filter: blur(($baseline/10)) grayscale(25%);
+    }
+
+    .wrapper-prompt {
+
+      .prompt {
+        @include animation(bounceOut $tmg-f1 ease-in-out 1);
      }
    }
  }
@@ -665,11 +680,13 @@

    // varying animations
    &.is-shown {
-      @include anim-notificationsSlideUp(1s);
+      @include animation(notificationSlideUp $tmg-s1 ease-in-out 1);
+      @include animation-fill-mode(forwards);
    }

    &.is-hiding {
-      @include anim-notificationsSlideDown(0.25s);
+      @include animation(notificationSlideDown $tmg-s1 ease-in-out 1);
+      @include animation-fill-mode(forwards);
    }
  }
 }
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -4,7 +4,7 @@
 // notices - in-context: to be used as notices to users within the context of a form/action
 .notice-incontext {
  @extend .ui-well;
-  @include border-radius(($baseline/10));
+  border-radius: ($baseline/10);

  .title {
    @extend .t-title7;
@@ -14,7 +14,7 @@

  .copy {
    @extend .t-copy-sub1;
-    @include transition(opacity 0.25s ease-in-out 0);
+    @include transition(opacity $tmg-f2 ease-in-out 0s);
    opacity: 0.75;
  }

--- a/cms/static/sass/elements/_tender-widget.scss
+++ b/cms/static/sass/elements/_tender-widget.scss
@@ -7,8 +7,8 @@
 }

 #tender_window {
-  @include border-radius(3px);
-  @include box-shadow(0 2px 3px $shadow);
+  border-radius: 3px;
+  box-shadow: 0 2px 3px $shadow;
  height: ($baseline*35) !important;
  background: $white !important;
  border: 2px solid $blue;
--- a/cms/static/sass/elements/_vendor.scss
+++ b/cms/static/sass/elements/_vendor.scss
@@ -8,7 +8,7 @@
  background: #fff;
  font-family: $f-sans-serif;
  font-size: 12px;
-  @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 100000 !important;

  .ui-widget-header {
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -57,8 +57,8 @@ body.signup, body.signin {

    form {
      @include box-sizing(border-box);
-      @include box-shadow(0 1px 2px $shadow-l1);
-      @include border-radius(2px);
+      box-shadow: 0 1px 2px $shadow-l1;
+      border-radius: 2px;
      width: 100%;
      border: 1px solid $gray-l2;
      padding: $baseline ($baseline*1.5);
@@ -70,7 +70,7 @@ body.signup, body.signin {
        .action-primary {
          @include blue-button;
          @extend .t-action2;
-          @include transition(all .15s);
+          @include transition(all $tmg-f3 linear 0s);
          display: block;
          width: 100%;
          padding: ($baseline*0.75) ($baseline/2);
@@ -109,7 +109,7 @@ body.signup, body.signin {

          label {
            @extend  .t-copy-sub1;
-            @include transition(color, 0.15s, ease-in-out);
+            @include transition(color $tmg-f3 ease-in-out 0s);
            margin: 0 0 ($baseline/4) 0;

            &.is-focused {
@@ -172,7 +172,7 @@ body.signup, body.signin {

          .tip {
            @extend .t-copy-sub2;
-            @include transition(color, 0.15s, ease-in-out);
+            @include transition(color $tmg-f3 ease-in-out 0s);
            display: block;
            margin-top: ($baseline/4);
            color: $gray-l3;
--- a/cms/static/sass/views/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -81,7 +81,7 @@ body.course.uploads {
      }

      .embeddable-xml-input {
-        @include box-shadow(none);
+        box-shadow: none;
        width: 100%;
      }

@@ -194,7 +194,7 @@ body.course.uploads {
  }

  .embeddable-xml-input {
-    @include box-shadow(none);
+    box-shadow: none;
    width: 400px;
  }

--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -31,7 +31,7 @@ body.course.checklists {
      background: $gray-l4;

      .viz-checklist-status-value {
-        @include transition(width 2s ease-in-out .25s);
+        @include transition(width $tmg-s2 ease-in-out .25s);
        position: absolute;
        top: 0;
        left: 0;
@@ -49,19 +49,19 @@ body.course.checklists {
    // header/title
    header {
      @include clearfix();
-      @include box-shadow(inset 0 -1px 1px $shadow-l1);
+      box-shadow: inset 0 -1px 1px $shadow-l1;
      margin-bottom: 0;
      border-bottom: 1px solid $gray-l3;
      padding: $baseline ($baseline*1.5);

      .checklist-title {
-        @include transition(color .15s .25s ease-in-out);
+        @include transition(color $tmg-f2 ease-in-out 0s);
        width: flex-grid(6, 9);
        margin: 0 flex-gutter() 0 0;
        float: left;

        .ui-toggle-expansion {
-          @include transition(rotate .15s ease-in-out .25s);
+          @include transition(all $tmg-f2 ease-in-out 0s);
          @include font-size(21);
          display: inline-block;
          vertical-align: middle;
@@ -118,8 +118,8 @@ body.course.checklists {
    // checklist actions
    .course-checklist-actions {
      @include clearfix();
-      @include box-shadow(inset 0 1px 1px $shadow-l1);
-      @include transition(border .15s ease-in-out .25s);
+      @include transition(border $tmg-f2 ease-in-out .25s);
+      box-shadow: inset 0 1px 1px $shadow-l1;
      border-top: 1px solid $gray-l2;
      padding: $baseline ($baseline*1.5);
      background: $gray-l4;
@@ -155,7 +155,7 @@ body.course.checklists {
    &.is-collapsed {

      header {
-        @include box-shadow(none);
+        box-shadow: none;

        .checklist-title {

@@ -208,8 +208,7 @@ body.course.checklists {
    overflow: hidden;

    .task {
-      @include transition(background .15s ease-in-out .25s);
-      @include transition(border .15s ease-in-out .25s);
+      @include transition(background $tmg-f2 ease-in-out 0s, border $tmg-f3 ease-in-out 0s);
      @include clearfix();
      position: relative;
      border-top: 1px solid $white;
@@ -239,7 +238,7 @@ body.course.checklists {
        font-weight: 500;

        .task-name {
-          @include transition(color .15s .25s ease-in-out);
+          @include transition(color $tmg-f2 ease-in-out 0s);
          vertical-align: baseline;
          cursor: pointer;
          margin-bottom: 0;
@@ -247,20 +246,20 @@ body.course.checklists {

        .task-description {
          @extend .t-copy-sub1;
-          @include transition(color .15s .25s ease-in-out);
+          @include transition(color $tmg-f2 ease-in-out 0s);
          color: $gray-l2;
        }

        .task-support {
          @extend .t-copy-sub2;
-          @include transition(opacity .15s .25s ease-in-out);
+          @include transition(opacity $tmg-f2 ease-in-out 0s);
          opacity: 0.0;
          pointer-events: none;
        }
      }

      .task-actions {
-        @include transition(opacity .15s .25s ease-in-out);
+        @include transition(opacity $tmg-f2 ease-in-out 0.25s);
        @include clearfix();
        display: inline-block;
        vertical-align: middle;
@@ -274,7 +273,6 @@ body.course.checklists {
        .action-primary {
          @include blue-button;
          @extend .t-action4;
-          @include transition(all .15s);
          font-weight: 600;
          text-align: center;
        }
--- a/cms/static/sass/views/_dashboard.scss
+++ b/cms/static/sass/views/_dashboard.scss
@@ -10,9 +10,9 @@ body.dashboard {
 	.class-list {
 		margin-top: 20px;
 		border-radius: 3px;
-		border: 1px solid $darkGrey;	
+		border: 1px solid $darkGrey;
 		background: #fff;
-		@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
+		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

 		li {
 			position: relative;
@@ -27,7 +27,7 @@ body.dashboard {
 				display: block;
 				padding: 20px 25px;
 				line-height: 1.3;
-				
+
 				&:hover {
 					background: $paleYellow;

@@ -57,7 +57,7 @@ body.dashboard {
 			z-index: 10000;
 			position: absolute;
 			top: 15px;
-			right: $baseline;		
+			right: $baseline;
 			padding: ($baseline/4) ($baseline/2);
 			opacity: 0.0;
 			pointer-events: none;
@@ -73,7 +73,7 @@ body.dashboard {
 		padding: 15px 25px;
 		margin-top: 20px;
 		border-radius: 3px;
-		border: 1px solid $darkGrey;	
+		border: 1px solid $darkGrey;
 		background: #fff;
 		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 		@include clearfix;
@@ -121,4 +121,4 @@ body.dashboard {
 			@include white-button;
 		}
 	}
-}
+}
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -114,7 +114,7 @@ body.index {

    // feature content
    .wrapper-content-features {
-      @include box-shadow(0 -1px ($baseline/4) $shadow);
+      box-shadow: 0 -1px ($baseline/4) $shadow;
      padding-bottom: ($baseline*2);
      padding-top: ($baseline*3);
      background: $white;
@@ -141,7 +141,7 @@ body.index {

          a {
            @include box-sizing(border-box);
-            @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+            box-shadow: 0 1px ($baseline/10) $shadow-l1;
            position: relative;
            top: 0;
            display: block;
@@ -151,7 +151,7 @@ body.index {
            background: $white;

            .action-zoom {
-              @include transition(bottom .50s ease-in-out);
+              @include transition(bottom $tmg-f2 ease-in-out 0s);
              position: absolute;
              bottom: -30px;
              right: ($baseline/2);
@@ -214,8 +214,8 @@ body.index {

            .proofpoint {
              @include box-sizing(border-box);
-              @include border-radius(($baseline/4));
-              @include transition(color .50s ease-in-out);
+              @include transition(all $tmg-f2 ease-in-out 0s);
+              border-radius: ($baseline/4);
              position: relative;
              top: 0;
              float: left;
@@ -233,7 +233,8 @@ body.index {
              }

              &:hover {
-                @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+                @extend .fake-link;
+                box-shadow: 0 1px ($baseline/10) $shadow-l1;
                background: $blue-l5;
                top: -($baseline/5);

@@ -319,7 +320,6 @@ body.index {
          &.action-primary {
            @extend .t-action1;
            @include blue-button;
-            @include transition(all .15s);
            padding: ($baseline*0.75) ($baseline/2);
            font-weight: 600;
            text-align: center;
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -36,7 +36,7 @@ body.course.outline {
            display: none;
            width: 110px;
            padding: 5px 40px 5px 10px;
-            @include border-radius(3px);
+            border-radius: 3px;
            color: $lightGrey;
            text-align: right;
            font-weight: bold;
@@ -64,9 +64,9 @@ body.course.outline {

              .menu {
                @include font-size(12);
-                @include border-radius(4px);
-                @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
-                @include transition(opacity .15s);
+                @include transition(opacity $tmg-f2 linear 0s);
+                border-radius: 4px;
+                box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
                z-index: 1;
                display: none;
                opacity: 0.0;
@@ -143,7 +143,7 @@ body.course.outline {
      border: 1px solid $mediumGrey;
      margin-top: 15px;
      padding-bottom: 12px;
-      @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

      &:first-child {
          margin-top: 0;
@@ -199,7 +199,7 @@ body.course.outline {
      .datepair .date,
      .datepair .time {
          @include font-size(13);
-          @include box-shadow(none);
+          box-shadow: none;
          padding-left: 0;
          padding-right: 0;
          border: none;
@@ -246,8 +246,8 @@ body.course.outline {
              }

              .section-name-span {
+                @include transition(color $tmg-f2 linear 0s);
                cursor: pointer;
-                @include transition(color .15s);

                &:hover {
                  color: $orange;
@@ -277,7 +277,7 @@ body.course.outline {

          .section-published-date {
            float: right;
-            @include border-radius(3px);
+            border-radius: 3px;
            background: $lightGrey;

            .published-status {
@@ -312,7 +312,7 @@ body.course.outline {

              .status-label {
                @include font-size(12);
-                @include border-radius(3px);
+                border-radius: 3px;
                position: absolute;
                top: 0;
                right: 2px;
@@ -342,10 +342,9 @@ body.course.outline {

              .menu {
                @include font-size(12);
-                @include border-radius(4px);
-                @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
-                @include transition(opacity .15s);
-                @include transition(display .15s);
+                @include transition(opacity $tmg-f2 linear 0s, display $tmg-f2 linear 0s);
+                border-radius: 4px;
+                box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
                z-index: 1;
                display: none;
                opacity: 0.0;
@@ -428,9 +427,9 @@ body.course.outline {
          }

          .expand-collapse-icon {
+              @include transition(none);
              float: left;
              margin: 25px 6px 16px 16px;
-              @include transition(none);

              &.expand {
                  background-position: 0 0;
@@ -453,8 +452,8 @@ body.course.outline {
      }

      .section-name-span {
+          @include transition(color $tmg-f2 linear 0s);
          cursor: pointer;
-          @include transition(color .15s);

          &:hover {
              color: $orange;
@@ -542,7 +541,7 @@ body.course.outline {

      [class^="icon-"] {
          @include font-size(11);
-          @include border-radius(20px);
+          border-radius: 20px;
          position: relative;
          top: -1px;
          display: inline-block;
@@ -582,7 +581,7 @@ body.course.outline {
      left: 110px;
      z-index: 9999;
      border: 1px solid #3C3C3C;
-      @include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
+      box-shadow: 0 1px 15px rgba(0, 0, 0, .2);
  }

  .preview {
@@ -688,7 +687,7 @@ body.course.outline {
  }

  .ui-draggable-dragging {
-      @include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
      border: 1px solid $darkGrey;
      opacity : 0.2;
      &:hover {
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -98,7 +98,7 @@ body.course.settings {

    .tip {
      @extend .t-copy-sub2;
-      @include transition(color, 0.15s, ease-in-out);
+      @include transition(color $tmg-f2 ease-in-out 0s);
      display: block;
      margin-top: ($baseline/4);
      color: $gray-l3;
@@ -115,12 +115,12 @@ body.course.settings {
    // buttons
    .remove-item {
      @include white-button;
-      @extend .t-action-3;
+      @extend .t-action3;
      font-weight: 400;
    }

    .new-button {
-      // @extend .t-action-3; - bad buttons won't render this properly
+      // @extend .t-action3; - bad buttons won't render this properly
      @include font-size(14);
    }

@@ -155,7 +155,7 @@ body.course.settings {

        label {
          @extend .t-copy-sub1;
-          @include transition(color, 0.15s, ease-in-out);
+          @include transition(color $tmg-f2 ease-in-out 0s);
          margin: 0 0 ($baseline/4) 0;
          font-weight: 400;

@@ -214,7 +214,7 @@ body.course.settings {

        .field-group {
          @include box-sizing(border-box);
-          @include border-radius(3px);
+          border-radius: 3px;
          background: $gray-l5;
          padding: $baseline;

@@ -266,7 +266,7 @@ body.course.settings {

        input, textarea {
          @extend .t-copy-lead1;
-          @include box-shadow(none);
+          box-shadow: none;
          border: none;
          background: none;
          padding: 0;
@@ -294,8 +294,8 @@ body.course.settings {

      // course link note
      .note-promotion-courseURL {
-        @include box-shadow(0 2px 1px $shadow-l1);
-        @include border-radius(($baseline/5));
+        box-shadow: 0 2px 1px $shadow-l1;
+        border-radius: ($baseline/5);
        margin-top: ($baseline*1.5);
        border: 1px solid $gray-l2;
        padding: ($baseline/2) 0 0 0;
@@ -330,19 +330,18 @@ body.course.settings {
        }

        .list-actions {
-          @include box-shadow(inset 0 1px 1px $shadow-l1);
+          box-shadow: inset 0 1px 1px $shadow-l1;
          border-top: 1px solid $gray-l2;
          padding:  ($baseline/2);
          background: $gray-l5;

          .action-primary {
            @include blue-button();
-            @extend .t-action-3;
+            @extend .t-action3;
            font-weight: 600;

            [class^="icon-"] {
-              @extend .t-icon;
-              @include font-size(16);
+              @extend .t-icon5;
              display: inline-block;
              vertical-align: middle;
              margin-top: -3px;
@@ -410,7 +409,7 @@ body.course.settings {

      .input-existing {
        @include box-sizing(border-box);
-        @include border-radius(3px);
+        border-radius: 3px;
        background: $gray-l5;
        padding: ($baseline/2);

@@ -453,7 +452,7 @@ body.course.settings {
      .new-grade-button {
        @include box-sizing(border-box);
        @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
-        @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
+        box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
        width: flex-grid(1,9);
        height: ($baseline*2);
        position: relative;
@@ -555,7 +554,7 @@ body.course.settings {
              top: 0;
              height: 50px;
              text-align: right;
-              @include border-radius(2px);
+              border-radius: 2px;

              &:hover,
              &.is-dragging {
@@ -620,7 +619,7 @@ body.course.settings {
                height: 50px;
                width: 2px;
                background-color: #fff;
-                @include box-shadow(-1px 0 3px rgba(0,0,0,0.1));
+                box-shadow: -1px 0 3px rgba(0,0,0,0.1);

                cursor: ew-resize;
                @include transition(none);
@@ -714,7 +713,7 @@ body.course.settings {
          }

          .tip {
-            @include transition (opacity 0.5s ease-in-out 0s);
+            @include transition(opacity $tmg-f1 ease-in-out 0s);
            opacity: 0.0;
            position: absolute;
            bottom: ($baseline*1.25);
@@ -768,7 +767,7 @@ body.course.settings {
      .CodeMirror {
        @extend .t-copy-base;
        @include box-sizing(border-box);
-        @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
        @include linear-gradient($lightGrey, tint($lightGrey, 90%));
        padding: 5px 8px;
        border: 1px solid $mediumGrey;
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -39,7 +39,7 @@ body.course.static-pages {

    .component-editor {
      @include edit-box;
-      @include box-shadow(none);
+      box-shadow: none;
      display: none;
      padding: 0;
      border-radius: 2px 2px 0 0;
@@ -51,7 +51,7 @@ body.course.static-pages {

      // This duplicates the styling from Unit page editing
      .module-actions {
-        @include box-shadow(inset 0 1px 1px $shadow);
+        box-shadow: inset 0 1px 1px $shadow;
        padding: 0px 0 10px 10px;
        background-color: $gray-l6;

@@ -74,7 +74,7 @@ body.course.static-pages {
    &.new-component-item {
      background: transparent;
      border: none;
-      @include box-shadow(none);
+      box-shadow: none;
    }
  }

@@ -137,11 +137,11 @@ body.course.static-pages {
  }

  .xmodule_display {
+    @include transition(background-color $tmg-s3 linear 0s);
    padding: 20px 20px 22px;
    font-size: 24px;
    font-weight: 300;
    background: #fff;
-    @include transition(background-color 3s);
  }

  .static-page-item {
@@ -151,7 +151,7 @@ body.course.static-pages {
    border: 1px solid $darkGrey;
    border-radius: 3px;
    background: #fff;
-    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

    .page-name {
      font-size: 19px;
@@ -186,14 +186,14 @@ body.course.static-pages {

  .page-contents {
    @include box-sizing(border-box);
+    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
    width: 100%;
    height: 360px;
    padding: 15px;
    border: 1px solid #b0b6c2;
    border-radius: 2px;
-    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
    background-color: #edf1f5;
-    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
    font-family: Monaco, monospace;
    font-size: 13px;
    color: #3c3c3c;
--- a/cms/static/sass/views/_subsection.scss
+++ b/cms/static/sass/views/_subsection.scss
@@ -144,7 +144,7 @@ body.course.subsection {
    .url {
      width: 100%;
      margin-bottom: 10px;
-      @include box-shadow(none);
+      box-shadow: none;
    }

    .draft-tag,
@@ -335,6 +335,7 @@ body.course.subsection {
      }

      .menu {
+        @include transition(opacity $tmg-f2 linear 0s);
        z-index: 1;
        position: absolute;
        top: -12px;
@@ -347,9 +348,8 @@ body.course.subsection {
        background: $white;
        border: 1px solid $mediumGrey;
        font-size: 12px;
-        @include border-radius(4px);
-        @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
-        @include transition(opacity .15s);
+        border-radius: 4px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .2);


        li {
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -129,7 +129,7 @@ body.course.textbooks {

    .edit-textbook {
        @include box-sizing(border-box);
-        @include border-radius(2px);
+        border-radius: 2px;
        width: 100%;
        background: $white;

@@ -143,7 +143,7 @@ body.course.textbooks {
      }

      .actions {
-        @include box-shadow(inset 0 1px 2px $shadow);
+        box-shadow: inset 0 1px 2px $shadow;
        border-top: 1px solid $gray-l1;
        padding: ($baseline*0.75) $baseline;
        background: $gray-l6;
@@ -383,9 +383,9 @@ body.course.textbooks {
  }

  .dialog  {
-    @include box-shadow(0px 0px 7px $shadow-d1);
    @include box-sizing(border-box);
-    @include border-radius(($baseline/5));
+    box-shadow: 0px 0px 7px $shadow-d1;
+    border-radius: ($baseline/5);
    background-color: $gray-l4;
    display: inline-block;
    vertical-align: middle;
@@ -413,7 +413,7 @@ body.course.textbooks {
      padding: 0;

      .form-content {
-        @include box-shadow(0 0 3px $shadow-d1);
+        box-shadow: 0 0 3px $shadow-d1;
        padding: ($baseline*1.5);
        background-color: $white;
      }
@@ -427,7 +427,7 @@ body.course.textbooks {
        margin-top: $baseline;

        .wrapper-progress {
-          @include box-shadow(inset 0 0 3px $shadow-d1);
+          box-shadow: inset 0 0 3px $shadow-d1;
          display: block;
          border-radius: ($baseline*0.75);
          background-color: $gray-l5;
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -49,7 +49,7 @@ body.course.unit {
      border-bottom: 1px solid #cbd1db;
      @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
      background-color: #edf1f5;
-      @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
+      box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
      @include clearfix;

      li {
@@ -140,7 +140,7 @@ body.course.unit {
              font-size: 15px;
              line-height: 14px;
              text-align: center;
-              @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
+              box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;

              .name {
                position: absolute;
@@ -160,7 +160,7 @@ body.course.unit {
            border-radius: 3px;
            border: 1px solid $mediumGrey;
            background-color: #fff;
-            @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
+            box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;
            @include clearfix;

            .cancel-button {
@@ -208,7 +208,7 @@ body.course.unit {
            width: 100%;
            @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
            background-color: $lightBluishGrey;
-            @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;

            li:first-child {
              margin-left: $baseline;
@@ -221,7 +221,7 @@ body.course.unit {
              width: auto;
              @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
              background-color: tint($lightBluishGrey, 10%);
-              @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+              box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
              opacity: 0.8;

              &:hover {
@@ -250,15 +250,15 @@ body.course.unit {
          .new-component-template {

            a {
+              @include transition(none);
              background: #fff;
              border: 0px;
              color: #3c3c3c;
-              @include transition (none);

              &:hover {
+                @include transition(background-color $tmg-f2 linear 0s);
                background: tint($green,30%);
                color: #fff;
-                @include transition(background-color .15s);
              }
            }

@@ -291,7 +291,7 @@ body.course.unit {
                float: left;

                [class^="icon-"] {
-                  @include transition(opacity .15s);
+                  @include transition(opacity $tmg-f2 linear 0s);
                  display: inline-block;
                  top: 1px;
                  margin-right: 5px;
@@ -303,7 +303,7 @@ body.course.unit {
              }

              .editor-indicator {
-                @include transition(opacity .15s);
+                @include transition(opacity $tmg-f2 linear 0s);
                float: right;
                position: relative;
                top: 3px;
@@ -426,7 +426,7 @@ body.course.unit {

    .component-editor {
      @include edit-box;
-      @include box-shadow(none);
+      box-shadow: none;
      display: none;
      padding: 0;
      border-radius: 2px 2px 0 0;
@@ -449,7 +449,7 @@ body.course.unit {

      // Module Actions, also used for Static Pages
      .module-actions {
-        @include box-shadow(inset 0 1px 1px $shadow);
+        box-shadow: inset 0 1px 1px $shadow;
        padding: 0 0 $baseline $baseline;
        background-color: $gray-l6;

@@ -507,7 +507,6 @@ body.course.unit {
        @include blue-button;

        &.is-set {
-          @include transition(box-shadow 0.5 ease-in-out);
          @include linear-gradient($blue, $blue);
          color: $blue-d1;
          box-shadow: inset 0 1px 2px 1px $shadow-l1;
@@ -587,7 +586,7 @@ body.course.unit {
      }

      &:hover {
-        @include transition(opacity 0.25s ease-in-out);
+        @include transition(opacity $tmg-f2 ease-in-out 0s);
        opacity: 1.0;
      }

@@ -612,7 +611,7 @@ body.course.unit {

      label.setting-label {
        @extend .t-copy-sub1;
-        @include transition(color, 0.15s, ease-in-out);
+        @include transition(color $tmg-f2 ease-in-out 0s);
        font-weight: 400;
        vertical-align: middle;
        display: inline-block;
@@ -657,7 +656,7 @@ body.course.unit {
      input[type="number"] {

        width: 38.5%;
-        @include box-shadow(0 1px 2px $shadow-l1 inset);
+        box-shadow: 0 1px 2px $shadow-l1 inset;
        //For webkit browsers which render number fields differently, make input wider.
        -moz-column-width: {
          width: 32%;
@@ -669,11 +668,11 @@ body.course.unit {
      }

      select {
-        //@include box-shadow(0 1px 2px $shadow-l1 inset);
+        //box-shadow: 0 1px 2px $shadow-l1 inset;

        &:focus {
-          @include box-shadow(0 0 1px $shadow);
-          @include transition(opacity 0.25s ease-in-out);
+          box-shadow: 0 0 1px $shadow;
+          @include transition(opacity $tmg-f2 ease-in-out 0s);
          background-color: $yellow;
        }

@@ -697,8 +696,8 @@ body.course.unit {
        background-color: $gray-l4;

        &:hover {
-          @include box-shadow(0 1px 1px $shadow);
-          @include transition(opacity 0.15s ease-in-out);
+          box-shadow: 0 1px 1px $shadow;
+          @include transition(opacity $tmg-f2 ease-in-out 0s);
          background-color: $blue-s3;
          border: 1px solid $blue-s3;
          color: $white;
@@ -856,7 +855,7 @@ body.unit {

 .unit-location {
  .url {
-    @include box-shadow(none);
+    box-shadow: none;
    width: 100%;
    margin-bottom: $baseline/2;
  }
@@ -956,7 +955,7 @@ body.unit {


  &:hover {
-    @include transition(opacity 0.25s ease-in-out);
+    @include transition(opacity $tmg-f2 ease-in-out 0s);
    opacity: 1.0s;
  }
 }
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -110,8 +110,8 @@ section.problem {
      padding: 9px 15px 20px;
      background: #FFF;
      position: relative;
-      @include box-shadow(inset 0 0 0 1px #eee);
-      @include border-radius(3px);
+      box-shadow: inset 0 0 0 1px #eee;
+      border-radius: 3px;

      &:empty {
        display: none;
@@ -214,7 +214,7 @@ section.problem {
          background: #f1f1f1;
          border: 1px solid #e3e3e3;
          @include inline-block;
-          @include border-radius(4px);
+          border-radius: 4px;
          min-width: 30px;
        }
      }
@@ -464,7 +464,7 @@ section.problem {
    white-space: nowrap;
    border: 1px solid #EAEAEA;
    background-color: #F8F8F8;
-    @include border-radius(3px);
+    border-radius: 3px;
    font-size: .9em;
  }

@@ -475,7 +475,7 @@ section.problem {
    line-height: 1.4;
    overflow: auto;
    padding: 6px 10px;
-    @include border-radius(3px);
+    border-radius: 3px;

    > code {
      margin: 0;
@@ -499,7 +499,7 @@ section.problem {
    }

    pre {
-      @include border-radius(0);
+      border-radius: 0;
      border-radius: 0;
      border-width: 0;
      margin: 0;
@@ -566,7 +566,7 @@ section.problem {
    }

    .save {
-      @extend .blue-button;
+      @extend .blue-button !optional;
    }

    .show {
@@ -580,7 +580,7 @@ section.problem {
    .submission_feedback {
      // background: #F3F3F3;
      // border: 1px solid #ddd;
-      // @include border-radius(3px);
+      // border-radius: 3px;
      // padding: 8px 12px;
      // margin-top: 10px;
      @include inline-block;
@@ -658,7 +658,7 @@ section.problem {
          display: block;
          padding: 9px;
          background: #F6F6F6;
-          @include box-shadow(inset 0 0 0 1px #fff);
+          box-shadow: inset 0 0 0 1px #fff;
        }
      }

@@ -689,8 +689,8 @@ section.problem {
      margin-bottom: 10px;
      background: #FFF;
      position: relative;
-      @include box-shadow(inset 0 0 0 1px #eee);
-      @include border-radius(3px);
+      box-shadow: inset 0 0 0 1px #eee;
+      border-radius: 3px;

      p:last-of-type {
        margin-bottom: 0;
--- a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
+++ b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
@@ -292,8 +292,8 @@ section.open-ended-child {
      padding: 9px 15px 20px;
      background: #FFF;
      position: relative;
-      @include box-shadow(inset 0 0 0 1px #eee);
-      @include border-radius(3px);
+      box-shadow: inset 0 0 0 1px #eee;
+      border-radius: 3px;

      &:empty {
        display: none;
@@ -577,7 +577,7 @@ section.open-ended-child {
    margin-top: 20px;

    input.save {
-      @extend .blue-button;
+      @extend .blue-button !optional;
    }

    .submission_feedback {
@@ -649,7 +649,7 @@ section.open-ended-child {

          input[type=radio]:checked + label {
              background: #666;
-              color: white; 
+              color: white;
          }
          input[class='grade-selection'] {
              display: none;
--- a/common/lib/xmodule/xmodule/css/combinedopenended/edit.scss
+++ b/common/lib/xmodule/xmodule/css/combinedopenended/edit.scss
@@ -16,7 +16,7 @@
        color: $darkGrey !important;
        pointer-events: none;
        cursor: none;
-        
+
        &:hover {
          box-shadow: 0 0 0 0 !important;
        }
@@ -48,7 +48,7 @@
  @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
  background-color: #fff;
  overflow: hidden;
-  @include transition(width .3s);
+  @include transition(width .3s linear 0s);

  &.shown {
    width: 300px;
--- a/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
+++ b/common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
@@ -1,6 +1,6 @@
 .crowdsource-wrapper {
-  @include box-shadow(inset 0 1px 2px 1px rgba(0,0,0,0.1));
-  @include border-radius(2px);
+  box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.1);
+  border-radius: 2px;
  display: none;
  margin-top: 20px;
  padding: (15px);
--- a/common/lib/xmodule/xmodule/css/problem/edit.scss
+++ b/common/lib/xmodule/xmodule/css/problem/edit.scss
@@ -48,7 +48,7 @@
  @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
  background-color: #fff;
  overflow: hidden;
-  @include transition(width .3s);
+  @include transition(width .3s linear 0s);

  &.shown {
    width: 300px;
--- a/common/lib/xmodule/xmodule/css/sequence/display.scss
+++ b/common/lib/xmodule/xmodule/css/sequence/display.scss
@@ -1,3 +1,37 @@
+$border-color: #C8C8C8;
+
+// repeated extends - needed since LMS styling was referenced
+.block-link {
+  border-left: 1px solid lighten($border-color, 10%);
+  display: block;
+
+  &:hover {
+    background: none;
+  }
+}
+
+.topbar {
+  @include clearfix();
+  border-bottom: 1px solid $border-color;
+
+  @media print {
+    display: none;
+  }
+
+  a {
+    &.block-link {
+      border-left: 1px solid lighten($border-color, 10%);
+      display: block;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+}
+
+// ====================
+
 nav.sequence-nav {
  // TODO (cpennington): This doesn't work anymore. XModules aren't able to
  // import from external sources.
@@ -37,7 +71,7 @@ nav.sequence-nav {
    height: 44px;
    margin: 0 30px;
    @include linear-gradient(top, #ddd, #eee);
-    @include box-shadow(0 1px 3px rgba(0, 0, 0, .1) inset);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
  }

  ol {
@@ -70,7 +104,7 @@ nav.sequence-nav {
        display: block;
        padding: 0;
        position: relative;
-        @include transition();
+        @include transition(none);
        outline: 0;

        &:focus {
@@ -174,7 +208,7 @@ nav.sequence-nav {
          position: absolute;
          top: 48px;
          text-shadow: 0 -1px 0 #000;
-          @include transition(all, .1s, $ease-in-out-quart);
+          @include transition(all .1s $ease-in-out-quart 0s);
          white-space: pre;
          z-index: 99;

@@ -228,7 +262,7 @@ nav.sequence-nav {
      width: 70px;
      border: 1px solid #ccc;
      @include linear-gradient(top, #eee, #ddd);
-      @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
+      box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;

      &.prev, &.next {

@@ -239,7 +273,7 @@ nav.sequence-nav {
          height: 34px;
          width: 40px;
          text-indent: -9999px;
-          @include transition(all, .2s, $ease-in-out-quad);
+          @include transition(all .2s $ease-in-out-quad 0s);
          outline: 0;

          &:focus {
@@ -294,7 +328,7 @@ nav.sequence-bottom {
  text-align: center;

  ul {
-    @extend .clearfix;
+    @include clearfix();
    @include inline-block();

    li {
@@ -303,7 +337,7 @@ nav.sequence-bottom {
      height: 44px;
      border: 1px solid #ccc;
      @include linear-gradient(top, #eee, #ddd);
-      @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
+      box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;

      &.prev, &.next {
        margin-bottom: 0;
@@ -315,7 +349,7 @@ nav.sequence-bottom {
          display: block;
          padding: lh(.5) 4px;
          text-indent: -9999px;
-          @include transition(all, .2s, $ease-in-out-quad);
+          @include transition(all .2s $ease-in-out-quad 0s);
          outline: 0;

          &:hover {
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -49,30 +49,30 @@ div.video {
        @include clearfix();
        background: #c2c2c2;
        border: 1px solid #000;
-        @include border-radius(0);
+        border-radius: 0;
        border-top: 1px solid #000;
-        @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
+        box-shadow: inset 0 1px 0 #eee, 0 1px 0 #555;
        height: 7px;
        margin-left: -1px;
        margin-right: -1px;
-        @include transition(height 2.0s ease-in-out);
+        @include transition(height 2.0s ease-in-out 0s);

        div.ui-widget-header {
          background: #777;
-          @include box-shadow(inset 0 1px 0 #999);
+          box-shadow: inset 0 1px 0 #999;
        }

        a.ui-slider-handle {
          background: $pink url(../images/slider-handle.png) center center no-repeat;
-          @include background-size(50%);
+          background-size: 50%;
          border: 1px solid darken($pink, 20%);
-          @include border-radius(15px);
-          @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
+          border-radius: 15px;
+          box-shadow: inset 0 1px 0 lighten($pink, 10%);
          cursor: pointer;
          height: 15px;
          margin-left: -7px;
          top: -4px;
-          @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
+          @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
          width: 15px;

          &:focus, &:hover {
@@ -83,7 +83,6 @@ div.video {
      }

      ul.vcr {
-        @extend .dullify;
        float: left;
        list-style: none;
        margin: 0 lh() 0 0;
@@ -96,13 +95,13 @@ div.video {
          a {
            border-bottom: none;
            border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555);
+            box-shadow: 1px 0 0 #555;
            cursor: pointer;
            display: block;
            line-height: 46px;
            padding: 0 lh(.75);
            text-indent: -9999px;
-            @include transition(background-color, opacity);
+            @include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
            width: 14px;
            background: url('../images/vcr.png') 15px 15px no-repeat;
            outline: 0;
@@ -144,7 +143,6 @@ div.video {
      }

      div.secondary-controls {
-        @extend .dullify;
        float: right;

        div.speeds {
@@ -169,7 +167,7 @@ div.video {
            background: url('../images/closed-arrow.png') 10px center no-repeat;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
            @include clearfix();
            color: #fff;
            cursor: pointer;
@@ -178,7 +176,7 @@ div.video {
            margin-right: 0;
            padding-left: 15px;
            position: relative;
-            @include transition();
+            @include transition(none);
            -webkit-font-smoothing: antialiased;
            width: 116px;
            outline: 0;
@@ -215,8 +213,8 @@ div.video {

          // fix for now
          ol.video_speeds {
-            @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
-            @include transition();
+            box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
+            @include transition(none);
            background-color: #444;
            border: 1px solid #000;
            bottom: 46px;
@@ -227,7 +225,7 @@ div.video {
            z-index: 10;

            li {
-              @include box-shadow( 0 1px 0 #555);
+              box-shadow:  0 1px 0 #555;
              border-bottom: 1px solid #000;
              color: #fff;
              cursor: pointer;
@@ -249,7 +247,7 @@ div.video {
              }

              &:last-child {
-                @include box-shadow(none);
+                box-shadow: none;
                border-bottom: 0;
                margin-top: 0;
              }
@@ -277,7 +275,7 @@ div.video {
          > a {
            background: url('../images/volume.png') 10px center no-repeat;
            border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
            @include clearfix();
            color: #fff;
            cursor: pointer;
@@ -286,7 +284,7 @@ div.video {
            margin-right: 0;
            padding-left: 15px;
            position: relative;
-            @include transition();
+            @include transition(none);
            -webkit-font-smoothing: antialiased;
            width: 30px;

@@ -296,8 +294,8 @@ div.video {
          }

          .volume-slider-container {
-            @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
-            @include transition();
+            box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
+            @include transition(none);
            background-color: #444;
            border: 1px solid #000;
            bottom: 46px;
@@ -316,18 +314,18 @@ div.video {
              margin: 14px auto;
              background: #666;
              border: 1px solid #000;
-              @include box-shadow(0 1px 0 #333);
+              box-shadow: 0 1px 0 #333;

              a.ui-slider-handle {
                background: $pink url(../images/slider-handle.png) center center no-repeat;
-                @include background-size(50%);
+                background-size: 50%;
                border: 1px solid darken($pink, 20%);
-                @include border-radius(15px);
-                @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
+                border-radius: 15px;
+                box-shadow: inset 0 1px 0 lighten($pink, 10%);
                cursor: pointer;
                height: 15px;
                left: -6px;
-                @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
+                @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
                width: 15px;
              }

@@ -341,7 +339,7 @@ div.video {
        a.add-fullscreen {
          background: url(../images/fullscreen.png) center no-repeat;
          border-right: 1px solid #000;
-          @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+          box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
          color: #797979;
          display: block;
          float: left;
@@ -349,7 +347,7 @@ div.video {
          margin-left: 0;
          padding: 0 lh(.5);
          text-indent: -9999px;
-          @include transition();
+          @include transition(none);
          width: 30px;

          &:hover {
@@ -362,7 +360,7 @@ div.video {
        a.quality_control {
          background: url(../images/hd.png) center no-repeat;
          border-right: 1px solid #000;
-          @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+          box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
          color: #797979;
          display: block;
          float: left;
@@ -370,7 +368,7 @@ div.video {
          margin-left: 0;
          padding: 0 lh(.5);
          text-indent: -9999px;
-          @include transition();
+          @include transition(none);
          width: 30px;

          &:hover {
@@ -399,7 +397,7 @@ div.video {
          padding: 0 lh(.5);
          position: relative;
          text-indent: -9999px;
-          @include transition();
+          @include transition(none);
          -webkit-font-smoothing: antialiased;
          width: 30px;

@@ -426,7 +424,7 @@ div.video {
        margin-top: -7px;

        a.ui-slider-handle {
-          @include border-radius(20px);
+          border-radius: 20px;
          height: 20px;
          margin-left: -10px;
          top: -4px;
@@ -470,7 +468,6 @@ div.video {
  }

  &.closed {
-    @extend .trans;

    article.video-wrapper {
      width: flex-grid(9,9);
@@ -545,7 +542,7 @@ div.video {
      position: fixed;
      right: 0;
      top: 0;
-      @include transition();
+      @include transition(none);

      li {
        color: #aaa;
--- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss
+++ b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
@@ -49,30 +49,30 @@ div.video {
        @include clearfix();
        background: #c2c2c2;
        border: 1px solid #000;
-        @include border-radius(0);
+        border-radius: 0;
        border-top: 1px solid #000;
-        @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
+        box-shadow: inset 0 1px 0 #eee, 0 1px 0 #555;
        height: 7px;
        margin-left: -1px;
        margin-right: -1px;
-        @include transition(height 2.0s ease-in-out);
+        @include transition(height 2.0s ease-in-out 0s);

        div.ui-widget-header {
          background: #777;
-          @include box-shadow(inset 0 1px 0 #999);
+          box-shadow: inset 0 1px 0 #999;
        }

        a.ui-slider-handle {
          background: $pink url(../images/slider-handle.png) center center no-repeat;
-          @include background-size(50%);
+          background-size: 50%;
          border: 1px solid darken($pink, 20%);
-          @include border-radius(15px);
-          @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
+          border-radius: 15px;
+          box-shadow: inset 0 1px 0 lighten($pink, 10%);
          cursor: pointer;
          height: 15px;
          margin-left: -7px;
          top: -4px;
-          @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
+          @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
          width: 15px;

          &:focus, &:hover {
@@ -83,7 +83,6 @@ div.video {
      }

      ul.vcr {
-        @extend .dullify;
        float: left;
        list-style: none;
        margin: 0 lh() 0 0;
@@ -96,13 +95,13 @@ div.video {
          a {
            border-bottom: none;
            border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555);
+            box-shadow: 1px 0 0 #555;
            cursor: pointer;
            display: block;
            line-height: 46px;
            padding: 0 lh(.75);
            text-indent: -9999px;
-            @include transition(background-color, opacity);
+            @include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
            width: 14px;
            background: url('../images/vcr.png') 15px 15px no-repeat;
            outline: 0;
@@ -144,7 +143,6 @@ div.video {
      }

      div.secondary-controls {
-        @extend .dullify;
        float: right;

        div.speeds {
@@ -169,7 +167,7 @@ div.video {
            background: url('../images/closed-arrow.png') 10px center no-repeat;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
            @include clearfix();
            color: #fff;
            cursor: pointer;
@@ -178,7 +176,7 @@ div.video {
            margin-right: 0;
            padding-left: 15px;
            position: relative;
-            @include transition();
+            @include transition(none);
            -webkit-font-smoothing: antialiased;
            width: 116px;
            outline: 0;
@@ -215,8 +213,8 @@ div.video {

          // fix for now
          ol.video_speeds {
-            @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
-            @include transition();
+            box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
+            @include transition(none);
            background-color: #444;
            border: 1px solid #000;
            bottom: 46px;
@@ -227,7 +225,7 @@ div.video {
            z-index: 10;

            li {
-              @include box-shadow( 0 1px 0 #555);
+              box-shadow:  0 1px 0 #555;
              border-bottom: 1px solid #000;
              color: #fff;
              cursor: pointer;
@@ -249,7 +247,7 @@ div.video {
              }

              &:last-child {
-                @include box-shadow(none);
+                box-shadow: none;
                border-bottom: 0;
                margin-top: 0;
              }
@@ -277,7 +275,7 @@ div.video {
          > a {
            background: url('../images/volume.png') 10px center no-repeat;
            border-right: 1px solid #000;
-            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
            @include clearfix();
            color: #fff;
            cursor: pointer;
@@ -286,7 +284,7 @@ div.video {
            margin-right: 0;
            padding-left: 15px;
            position: relative;
-            @include transition();
+            @include transition(none);
            -webkit-font-smoothing: antialiased;
            width: 30px;

@@ -296,8 +294,8 @@ div.video {
          }

          .volume-slider-container {
-            @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
-            @include transition();
+            box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
+            @include transition(none);
            background-color: #444;
            border: 1px solid #000;
            bottom: 46px;
@@ -316,18 +314,18 @@ div.video {
              margin: 14px auto;
              background: #666;
              border: 1px solid #000;
-              @include box-shadow(0 1px 0 #333);
+              box-shadow: 0 1px 0 #333;

              a.ui-slider-handle {
                background: $pink url(../images/slider-handle.png) center center no-repeat;
-                @include background-size(50%);
+                background-size: 50%;
                border: 1px solid darken($pink, 20%);
-                @include border-radius(15px);
-                @include box-shadow(inset 0 1px 0 lighten($pink, 10%));
+                border-radius: 15px;
+                box-shadow: inset 0 1px 0 lighten($pink, 10%);
                cursor: pointer;
                height: 15px;
                left: -6px;
-                @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
+                @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
                width: 15px;
              }

@@ -341,7 +339,7 @@ div.video {
        a.add-fullscreen {
          background: url(../images/fullscreen.png) center no-repeat;
          border-right: 1px solid #000;
-          @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+          box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
          color: #797979;
          display: block;
          float: left;
@@ -349,7 +347,7 @@ div.video {
          margin-left: 0;
          padding: 0 lh(.5);
          text-indent: -9999px;
-          @include transition();
+          @include transition(none);
          width: 30px;

          &:hover {
@@ -362,7 +360,7 @@ div.video {
        a.quality_control {
          background: url(../images/hd.png) center no-repeat;
          border-right: 1px solid #000;
-          @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+          box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
          color: #797979;
          display: block;
          float: left;
@@ -370,7 +368,7 @@ div.video {
          margin-left: 0;
          padding: 0 lh(.5);
          text-indent: -9999px;
-          @include transition();
+          @include transition(none);
          width: 30px;

          &:hover {
@@ -399,7 +397,7 @@ div.video {
          padding: 0 lh(.5);
          position: relative;
          text-indent: -9999px;
-          @include transition();
+          @include transition(none);
          -webkit-font-smoothing: antialiased;
          width: 30px;

@@ -426,7 +424,7 @@ div.video {
        margin-top: -7px;

        a.ui-slider-handle {
-          @include border-radius(20px);
+          border-radius: 20px;
          height: 20px;
          margin-left: -10px;
          top: -4px;
@@ -470,7 +468,6 @@ div.video {
  }

  &.closed {
-    @extend .trans;

    article.video-wrapper {
      width: flex-grid(9,9);
@@ -545,7 +542,7 @@ div.video {
      position: fixed;
      right: 0;
      top: 0;
-      @include transition();
+      @include transition(none);

      li {
        color: #aaa;
--- a/common/static/sass/_mixins-inherited.scss
+++ b/common/static/sass/_mixins-inherited.scss
@@ -0,0 +1,454 @@
+// studio - utilities - INHERITED mixins and extends
+
+// NOTE: these are older/poorly architected mixins that we want to move away from using or refactor in the future.
+// They are still referenced when styliing current interface elements and as such need to be preserved for the time being.
+// talbs: we need to slowly ween ourselves off of these
+// ====================
+
+
+// line-height (old way)
+@function lh($amount: 1) {
+  @return $body-line-height * $amount;
+}
+
+// inherited - vertical and horizontal centering
+@mixin vertically-and-horizontally-centered ($height, $width) {
+  left: 50%;
+  margin-left: -$width / 2;
+  min-height: $height;
+  min-width: $width;
+  position: absolute;
+  top: 150px;
+}
+
+// ====================
+
+// inherited - dividers
+.faded-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1) 50%,
+                                                    rgba(200,200,200, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-hr-divider-medium {
+  @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
+                                                    rgba(240,240,240, 1) 50%,
+                                                    rgba(240,240,240, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-hr-divider-light {
+  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
+                                                    rgba(255,255,255, 0.8) 50%,
+                                                    rgba(255,255,255, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-vertical-divider {
+  @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1) 50%,
+                                                    rgba(200,200,200, 0)));
+  height: 100%;
+  width: 1px;
+}
+
+.faded-vertical-divider-light {
+  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
+                                                    rgba(255,255,255, 0.6) 50%,
+                                                    rgba(255,255,255, 0)));
+  height: 100%;
+  width: 1px;
+}
+
+.vertical-divider {
+  @extend .faded-vertical-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-vertical-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    left: 1px;
+  }
+}
+
+.horizontal-divider {
+  border: none;
+  @extend .faded-hr-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-hr-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    top: 1px;
+  }
+}
+
+.fade-right-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1)));
+  border: none;
+}
+
+.fade-left-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
+                                                    rgba(200,200,200, 0)));
+  border: none;
+}
+
+// ====================
+
+// inherited - ui
+.window {
+  @include clearfix();
+  box-shadow: 0 1px 1px $shadow-l1;
+  border-radius: 3px;
+  margin-bottom: $baseline;
+  border: 1px solid $gray-l2;
+  background: $white;
+}
+
+// ====================
+
+// mixins - grandfathered
+@mixin button {
+  @include font-size(14);
+  @include transition(background-color 0.15s, box-shadow 0.15s);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
+  display: inline-block;
+  padding: ($baseline/5) $baseline ($baseline/4);
+  font-weight: 700;
+
+  &.disabled {
+    border: 1px solid $gray-l1 !important;
+    border-radius: 3px !important;
+    background: $gray-l1 !important;
+    color: $gray-d1 !important;
+    pointer-events: none;
+    cursor: none;
+    &:hover {
+      box-shadow: 0 0 0 0 !important;
+    }
+  }
+
+  &:hover, &.active {
+    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
+  }
+}
+
+@mixin green-button {
+  @include button;
+  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  border: 1px solid $green-d1;
+  border-radius: 3px;
+  background-color: $green;
+  color: $white;
+
+  &:hover {
+    background-color: $green-s1;
+    color: $white;
+  }
+
+  &.disabled {
+    border: 1px solid $green-l3 !important;
+    background: $green-l3 !important;
+    color: $white !important;
+    box-shadow: none;
+  }
+}
+
+@mixin blue-button {
+  @include button;
+  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  border: 1px solid $blue-d1;
+  border-radius: 3px;
+  background-color: $blue;
+  color: $white;
+
+  &:hover, &.active {
+    background-color: $blue-s2;
+    color: $white;
+  }
+
+  &.disabled {
+    box-shadow: none;
+    border: 1px solid $blue-l3 !important;
+    background: $blue-l3 !important;
+    color: $white !important;
+  }
+}
+
+@mixin red-button {
+  @include button;
+  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  border: 1px solid $red-d1;
+  border-radius: 3px;
+  background-color: $red;
+  color: $white;
+
+  &:hover, &.active {
+    background-color: $red-s1;
+    color: $white;
+  }
+
+  &.disabled {
+    box-shadow: none;
+    border: 1px solid $red-l3 !important;
+    background: $red-l3 !important;
+    color: $white !important;
+  }
+}
+
+@mixin pink-button {
+  @include button;
+  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  border: 1px solid $pink-d1;
+  border-radius: 3px;
+  background-color: $pink;
+  color: $white;
+
+  &:hover, &.active {
+    background-color: $pink-s1;
+    color: $white;
+  }
+
+  &.disabled {
+    box-shadow: none;
+    border: 1px solid $pink-l3 !important;
+    background: $pink-l3 !important;
+    color: $white !important;
+  }
+}
+
+@mixin orange-button {
+  @include button;
+  @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  border: 1px solid $orange-d1;
+  border-radius: 3px;
+  background-color: $orange;
+  color: $gray-d2;
+
+  &:hover {
+    background-color: $orange-s2;
+    color: $gray-d2;
+  }
+
+  &.disabled {
+    border: 1px solid $orange-l3 !important;
+    background: $orange-l2 !important;
+    color: $gray-l1 !important;
+    box-shadow: none;
+  }
+}
+
+@mixin white-button {
+  @include button;
+  @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  border: 1px solid $mediumGrey;
+  border-radius: 3px;
+  background-color: #dfe5eb;
+  color: rgb(92, 103, 122);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+
+  &:hover {
+    background-color: rgb(222, 236, 247);
+    color: rgb(92, 103, 122);
+  }
+}
+
+@mixin grey-button {
+  @include button;
+  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  border: 1px solid $gray-d2;
+  border-radius: 3px;
+  background-color: #d1dae3;
+  color: #6d788b;
+
+  &:hover {
+    background-color: #d9e3ee;
+    color: #6d788b;
+  }
+}
+
+@mixin gray-button {
+  @include button;
+  @include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
+  box-shadow: 0 1px 0 $white-t1 inset;
+  border: 1px solid $gray-d1;
+  border-radius: 3px;
+  background-color: $gray-d2;
+  color: $gray-l3;
+
+  &:hover {
+    background-color: $gray-d3;
+    color: $white;
+  }
+}
+
+@mixin dark-grey-button {
+  @include button;
+  border: 1px solid $gray-d2;
+  border-radius: 3px;
+  background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $gray-d1;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
+  color: $white;
+
+  &:hover {
+    background-color: $gray-d4;
+    color: $white;
+  }
+}
+
+@mixin edit-box {
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
+  padding: 15px 20px;
+  border-radius: 3px;
+  background-color: $lightBluishGrey2;
+  color: #3c3c3c;
+
+  label {
+    color: $baseFontColor;
+  }
+
+  input,
+  textarea {
+    border: 1px solid $darkGrey;
+  }
+
+  textarea {
+    min-height: 80px;
+  }
+
+  h5 {
+    margin-bottom: 8px;
+    color: #fff;
+    font-weight: 700;
+  }
+
+  .row {
+    margin-bottom: 10px;
+    padding: 0;
+    border: none;
+  }
+
+  .save-button {
+    @include blue-button;
+    margin-top: 0;
+  }
+
+  .cancel-button {
+    @include white-button;
+    margin-top: 0;
+  }
+}
+
+@mixin tree-view {
+  border: 1px solid $mediumGrey;
+  background: $lightGrey;
+
+  .branch {
+    margin-bottom: 10px;
+
+    &.collapsed {
+      margin-bottom: 0;
+    }
+  }
+
+  .branch > .section-item {
+    border-top: 1px solid #c5cad4;
+  }
+
+  .section-item {
+    position: relative;
+    display: block;
+    padding: 6px 8px 8px 16px;
+    background: #edf1f5;
+    font-size: 13px;
+
+    &:hover {
+      background: #fffcf1;
+
+      .item-actions {
+        display: block;
+      }
+    }
+
+    &.editing {
+      background: #fffcf1;
+    }
+
+    .draft-item:after,
+    .public-item:after,
+    .private-item:after {
+      margin-left: 3px;
+      font-size: 9px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .draft-item:after {
+      content: "- draft";
+    }
+
+    .private-item:after {
+      content: "- private";
+    }
+
+    .private-item {
+      color: #a4aab7;
+    }
+
+    .draft-item {
+      color: #9f7d10;
+    }
+  }
+
+  a {
+    color: $baseFontColor;
+
+    &.new-unit-item {
+      color: #6d788b;
+    }
+  }
+
+  ol {
+    .section-item {
+      padding-left: 56px;
+    }
+
+    .new-unit-item {
+      margin-left: 56px;
+    }
+  }
+
+  ol ol {
+    .section-item {
+      padding-left: 96px;
+    }
+
+    .new-unit-item {
+      margin-left: 96px;
+    }
+  }
+}
+
+// ====================
+
+// sunsetted mixins
+@mixin active {
+  @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+  box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset;
+  background-color: rgba(255, 255, 255, .3);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -117,7 +117,7 @@
 // extends - buttons
 .btn {
  @include box-sizing(border-box);
-  @include transition(color 0.25s ease-in-out, border-color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
+  @include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s);
  display: inline-block;
  cursor: pointer;

@@ -140,11 +140,11 @@

 // pill button
 .btn-pill {
-  @include border-radius($baseline/5);
+  border-radius: ($baseline/5);
 }

 .btn-rounded {
-  @include border-radius($baseline/2);
+  border-radius: ($baseline/2);
 }

 // primary button
@@ -158,14 +158,14 @@
  text-align: center;

  &:hover, &:active {
-    @include box-shadow(0 2px 1px $shadow-l1);
+    box-shadow: 0 2px 1px $shadow-l1;
  }

  &.current, &.active {
-    @include box-shadow(inset 1px 1px 2px $shadow-d1);
+    box-shadow: inset 1px 1px 2px $shadow-d1;

    &:hover, &:active {
-      @include box-shadow(inset 1px 1px 1px $shadow-d1);
+      box-shadow: inset 1px 1px 1px $shadow-d1;
    }
  }
 }
@@ -238,6 +238,6 @@

 // UI archetypes - well
 .ui-well {
-  @include box-shadow(inset 0 1px 2px 1px $shadow);
+  box-shadow: inset 0 1px 2px 1px $shadow;
  padding: ($baseline*0.75);
 }
--- a/common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss
+++ b/common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss
@@ -0,0 +1,13 @@
+//************************************************************************//
+// These mixins/functions are deprecated
+// They will be removed in the next MAJOR version release
+//************************************************************************//
+@mixin box-shadow ($shadows...) {
+  @include prefixer(box-shadow, $shadows, spec);
+  @warn "box-shadow is deprecated and will be removed in the next major version release";
+}
+
+@mixin background-size ($lengths...) {
+  @include prefixer(background-size, $lengths, spec);
+  @warn "background-size is deprecated and will be removed in the next major version release";
+}
--- a/common/static/sass/bourbon/_bourbon.scss
+++ b/common/static/sass/bourbon/_bourbon.scss
@@ -1,35 +1,59 @@
+// Custom Helpers
+@import "helpers/deprecated-webkit-gradient";
+@import "helpers/gradient-positions-parser";
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/render-gradients";
+@import "helpers/shape-size-stripper";
+
 // Custom Functions
-@import "functions/deprecated-webkit-gradient";
+@import "functions/compact";
@import "functions/flex-grid";
@import "functions/grid-width";
@import "functions/linear-gradient";
@import "functions/modular-scale";
+@import "functions/px-to-em";
@import "functions/radial-gradient";
-@import "functions/render-gradients";
@import "functions/tint-shade";
+@import "functions/transition-property-name";

 // CSS3 Mixins
@import "css3/animation";
@import "css3/appearance";
+@import "css3/backface-visibility";
+@import "css3/background";
@import "css3/background-image";
-@import "css3/background-size";
@import "css3/border-image";
@import "css3/border-radius";
-@import "css3/box-shadow";
@import "css3/box-sizing";
@import "css3/columns";
@import "css3/flex-box";
+@import "css3/font-face";
+@import "css3/hidpi-media-query";
+@import "css3/image-rendering";
@import "css3/inline-block";
+@import "css3/keyframes";
@import "css3/linear-gradient";
+@import "css3/perspective";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";
@import "css3/user-select";
+@import "css3/placeholder";

 // Addons & other mixins
@import "addons/button";
@import "addons/clearfix";
@import "addons/font-family";
+@import "addons/hide-text";
@import "addons/html5-input-types";
@import "addons/position";
+@import "addons/prefixer";
+@import "addons/retina-image";
+@import "addons/size";
@import "addons/timing-functions";
+@import "addons/triangle";
+
+// Soon to be deprecated Mixins
+@import "bourbon-deprecated-upcoming";
--- a/common/static/sass/bourbon/addons/_button.scss
+++ b/common/static/sass/bourbon/addons/_button.scss
@@ -34,6 +34,11 @@
      @include pill($base-color);
    }
  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }


@@ -59,18 +64,19 @@
  }

  border: 1px solid $border;
-  @include border-radius (3px);
-  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+  border-radius: 3px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
  color: $color;
-  display: inline;
+  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  @include linear-gradient ($base-color, $stop-gradient);
-  padding: 6px 18px 7px;
+  padding: 7px 18px;
+  text-decoration: none;
  text-shadow: 0 1px 0 $text-shadow;
-  -webkit-background-clip: padding-box;
+  background-clip: padding-box;

-  &:hover {
+  &:hover:not(:disabled) {
    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
@@ -81,12 +87,12 @@
      $stop-gradient-hover: grayscale($stop-gradient-hover);
    }

-    @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
    cursor: pointer;
    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
  }

-  &:active {
+  &:active:not(:disabled) {
    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);

@@ -96,7 +102,7 @@
    }

    border: 1px solid $border-active;
-    @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee;
  }
 }

@@ -130,19 +136,19 @@

  border: 1px solid $border;
  border-bottom: 1px solid $border-bottom;
-  @include border-radius(5px);
-  @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+  border-radius: 5px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
  color: $color;
-  display: inline;
+  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
-  padding: 7px 20px 8px;
+  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 1px $text-shadow;

-  &:hover {
+  &:hover:not(:disabled) {
    $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
    $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
@@ -162,14 +168,14 @@
                                  $fourth-stop-hover 100%);
  }

-  &:active {
+  &:active:not(:disabled) {
    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);

    @if $grayscale == true {
      $inset-shadow-active: grayscale($inset-shadow-active);
    }

-    @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+    box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff;
  }
 }

@@ -201,20 +207,21 @@

  border: 1px solid $border-top;
  border-color: $border-top $border-sides $border-bottom;
-  @include border-radius(16px);
-  @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+  border-radius: 16px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
  color: $color;
-  display: inline;
+  display: inline-block;
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  @include linear-gradient ($base-color, $stop-gradient);
-  padding: 3px 16px 5px;
+  padding: 5px 16px;
  text-align: center;
+  text-decoration: none;
  text-shadow: 0 -1px 1px $text-shadow;
-  -webkit-background-clip: padding-box;
+  background-clip: padding-box;

-  &:hover {
+  &:hover:not(:disabled) {
    $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
    $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
    $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
@@ -235,14 +242,14 @@

    border: 1px solid $border-top;
    border-color: $border-top $border-sides $border-bottom;
-    @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
    cursor: pointer;
    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
    text-shadow: 0 -1px 1px $text-shadow-hover;
-    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
  }

-  &:active {
+  &:active:not(:disabled) {
    $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
    $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
@@ -260,8 +267,7 @@
    background: $active-color;
    border: 1px solid $border-active;
    border-bottom: 1px solid $border-bottom-active;
-    @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+    box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff;
    text-shadow: 0 -1px 1px $text-shadow-active;
  }
 }
-
--- a/common/static/sass/bourbon/addons/_clearfix.scss
+++ b/common/static/sass/bourbon/addons/_clearfix.scss
@@ -12,11 +12,11 @@
 //    }

@mixin clearfix {
-  zoom: 1;
+  *zoom: 1;

  &:before,
  &:after {
-    content: "";
+    content: " ";
    display: table;
  }

--- a/common/static/sass/bourbon/addons/_hide-text.scss
+++ b/common/static/sass/bourbon/addons/_hide-text.scss
@@ -0,0 +1,5 @@
+@mixin hide-text {
+  color:            transparent;
+  font:             0/0 a;
+  text-shadow:      none;
+}
--- a/common/static/sass/bourbon/addons/_html5-input-types.scss
+++ b/common/static/sass/bourbon/addons/_html5-input-types.scss
@@ -21,15 +21,35 @@ $inputs-list: 'input[type="email"]',
              'input[type="week"]';

 $unquoted-inputs-list: ();
-
@each $input-type in $inputs-list {
  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
 }

 $all-text-inputs: $unquoted-inputs-list;

+
+// Hover Pseudo-class
+//************************************************************************//
+$all-text-inputs-hover: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-hover: $input-type + ":hover";
+      $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
+}
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-text-inputs-focus: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-focus: $input-type + ":focus";
+      $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
+}
+
 // You must use interpolation on the variable:
 // #{$all-text-inputs}
+// #{$all-text-inputs-hover}
+// #{$all-text-inputs-focus}
+
+// Example
 //************************************************************************//
 //   #{$all-text-inputs}, textarea {
 //     border: 1px solid red;
--- a/common/static/sass/bourbon/addons/_position.scss
+++ b/common/static/sass/bourbon/addons/_position.scss
@@ -12,19 +12,31 @@

  position: $position;

-  @if not(unitless($top)) {
+  @if $top == auto {
+    top: $top;
+  }
+  @else if not(unitless($top)) {
    top: $top;
  }

-  @if not(unitless($right)) {
+  @if $right == auto {
+    right: $right;
+  }
+  @else if not(unitless($right)) {
    right: $right;
  }

-  @if not(unitless($bottom)) {
+  @if $bottom == auto {
+    bottom: $bottom;
+  }
+  @else if not(unitless($bottom)) {
    bottom: $bottom;
  }

-  @if not(unitless($left)) {
+  @if $left == auto {
+    left: $left;
+  }
+  @else if not(unitless($left)) {
    left: $left;
  }
 }
--- a/common/static/sass/bourbon/addons/_prefixer.scss
+++ b/common/static/sass/bourbon/addons/_prefixer.scss
@@ -0,0 +1,49 @@
+//************************************************************************//
+// Example: @include prefixer(border-radius, $radii, webkit ms spec);
+//************************************************************************//
+$prefix-for-webkit:    true !default;
+$prefix-for-mozilla:   true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera:     true !default;
+$prefix-for-spec:      true !default; // required for keyframe mixin
+
+@mixin prefixer ($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      @if $prefix-for-webkit {
+        -webkit-#{$property}: $value;
+      }
+    }
+    @else if $prefix == moz {
+      @if $prefix-for-mozilla {
+        -moz-#{$property}: $value;
+      }
+    }
+    @else if $prefix == ms {
+      @if $prefix-for-microsoft {
+        -ms-#{$property}: $value;
+      }
+    }
+    @else if $prefix == o {
+      @if $prefix-for-opera {
+        -o-#{$property}: $value;
+      }
+    }
+    @else if $prefix == spec {
+      @if $prefix-for-spec {
+        #{$property}: $value;
+      }
+    }
+    @else  {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}
+
+@mixin disable-prefix-for-all() {
+  $prefix-for-webkit:    false;
+  $prefix-for-mozilla:   false;
+  $prefix-for-microsoft: false;
+  $prefix-for-opera:     false;
+  $prefix-for-spec:      false;
+}
--- a/common/static/sass/bourbon/addons/_retina-image.scss
+++ b/common/static/sass/bourbon/addons/_retina-image.scss
@@ -0,0 +1,32 @@
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
+  @if $asset-pipeline {
+    background-image: image-url("#{$filename}.#{$extension}");
+  }
+  @else {
+    background-image: url("#{$filename}.#{$extension}");
+  }
+
+  @include hidpi {
+
+    @if $asset-pipeline {
+      @if $retina-filename {
+        background-image: image-url("#{$retina-filename}.#{$extension}");
+      }
+      @else {
+        background-image: image-url("#{$filename}@2x.#{$extension}");
+      }
+    }
+
+    @else {
+      @if $retina-filename {
+        background-image: url("#{$retina-filename}.#{$extension}");
+      }
+      @else {
+        background-image: url("#{$filename}@2x.#{$extension}");
+      }
+    }
+
+    background-size: $background-size;
+
+  }
+}
--- a/common/static/sass/bourbon/addons/_size.scss
+++ b/common/static/sass/bourbon/addons/_size.scss
@@ -0,0 +1,44 @@
+@mixin size($size) {
+  @if length($size) == 1 {
+    @if $size == auto {
+      width:  $size;
+      height: $size;
+    }
+
+    @else if unitless($size) {
+      width:  $size + px;
+      height: $size + px;
+    }
+
+    @else if not(unitless($size)) {
+      width:  $size;
+      height: $size;
+    }
+  }
+
+  // Width x Height
+  @if length($size) == 2 {
+    $width:  nth($size, 1);
+    $height: nth($size, 2);
+
+    @if $width == auto {
+      width: $width;
+    }
+    @else if not(unitless($width)) {
+      width: $width;
+    }
+    @else if unitless($width) {
+      width: $width + px;
+    }
+
+    @if $height == auto {
+      height: $height;
+    }
+    @else if not(unitless($height)) {
+      height: $height;
+    }
+    @else if unitless($height) {
+      height: $height + px;
+    }
+  }
+}
--- a/common/static/sass/bourbon/addons/_triangle.scss
+++ b/common/static/sass/bourbon/addons/_triangle.scss
@@ -0,0 +1,45 @@
+@mixin triangle ($size, $color, $direction) {
+  height: 0;
+  width: 0;
+
+  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
+    border-color: transparent;
+    border-style: solid;
+    border-width: $size / 2;
+
+    @if $direction == up {
+      border-bottom-color: $color;
+
+    } @else if $direction == right {
+      border-left-color:   $color;
+
+    } @else if $direction == down {
+      border-top-color:    $color;
+
+    } @else if $direction == left {
+      border-right-color:  $color;
+    }
+  }
+
+  @else if ($direction == up-right) or ($direction == up-left) {
+    border-top: $size solid $color;
+
+    @if $direction == up-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == up-left {
+      border-right: $size solid transparent;
+    }
+  }
+
+  @else if ($direction == down-right) or ($direction == down-left) {
+    border-bottom: $size solid $color;
+
+    @if $direction == down-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == down-left {
+      border-right: $size solid transparent;
+    }
+  }
+}
--- a/common/static/sass/bourbon/css3/_animation.scss
+++ b/common/static/sass/bourbon/css3/_animation.scss
@@ -2,170 +2,51 @@
 // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.

 // Official animation shorthand property.
-@mixin animation ($animation-1,
-  $animation-2: false, $animation-3: false,
-  $animation-4: false, $animation-5: false,
-  $animation-6: false, $animation-7: false,
-  $animation-8: false, $animation-9: false)
-  {
-    $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
-                   $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
-
-  -webkit-animation: $full;
-     -moz-animation: $full;
-          animation: $full;
+@mixin animation ($animations...) {
+  @include prefixer(animation, $animations, webkit moz spec);
 }

 // Individual Animation Properties
-@mixin animation-name ($name-1,
-  $name-2: false, $name-3: false,
-  $name-4: false, $name-5: false,
-  $name-6: false, $name-7: false,
-  $name-8: false, $name-9: false)
-  {
-    $full:  compact($name-1, $name-2, $name-3, $name-4,
-                    $name-5, $name-6, $name-7, $name-8, $name-9);
-
-  -webkit-animation-name: $full;
-     -moz-animation-name: $full;
-          animation-name: $full;
+@mixin animation-name ($names...) {
+  @include prefixer(animation-name, $names, webkit moz spec);
 }


-@mixin animation-duration ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full:  compact($time-1, $time-2, $time-3, $time-4,
-                    $time-5, $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-animation-duration: $full;
-     -moz-animation-duration: $full;
-          animation-duration: $full;
+@mixin animation-duration ($times...) {
+  @include prefixer(animation-duration, $times, webkit moz spec);
 }


-@mixin animation-timing-function ($motion-1: ease,
-//  ease | linear | ease-in | ease-out | ease-in-out
-  $motion-2: false, $motion-3: false,
-  $motion-4: false, $motion-5: false,
-  $motion-6: false, $motion-7: false,
-  $motion-8: false, $motion-9: false)
-  {
-    $full:  compact($motion-1, $motion-2, $motion-3, $motion-4,
-                    $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
-
-  -webkit-animation-timing-function: $full;
-     -moz-animation-timing-function: $full;
-          animation-timing-function: $full;
+@mixin animation-timing-function ($motions...) {
+// ease | linear | ease-in | ease-out | ease-in-out
+  @include prefixer(animation-timing-function, $motions, webkit moz spec);
 }


-@mixin animation-iteration-count ($value-1: 1,
-//  infinite | <number>
-  $value-2: false, $value-3: false,
-  $value-4: false, $value-5: false,
-  $value-6: false, $value-7: false,
-  $value-8: false, $value-9: false)
-  {
-    $full:  compact($value-1, $value-2, $value-3, $value-4,
-                    $value-5, $value-6, $value-7, $value-8, $value-9);
-
-  -webkit-animation-iteration-count: $full;
-     -moz-animation-iteration-count: $full;
-          animation-iteration-count: $full;
+@mixin animation-iteration-count ($values...) {
+// infinite | <number>
+  @include prefixer(animation-iteration-count, $values, webkit moz spec);
 }


-@mixin animation-direction ($direction-1: normal,
-//  normal | alternate
-  $direction-2: false, $direction-3: false,
-  $direction-4: false, $direction-5: false,
-  $direction-6: false, $direction-7: false,
-  $direction-8: false, $direction-9: false)
-  {
-    $full:  compact($direction-1, $direction-2, $direction-3, $direction-4,
-                    $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
-
-  -webkit-animation-direction: $full;
-     -moz-animation-direction: $full;
-          animation-direction: $full;
+@mixin animation-direction ($directions...) {
+// normal | alternate
+  @include prefixer(animation-direction, $directions, webkit moz spec);
 }


-@mixin animation-play-state ($state-1: running,
-//  running | paused
-  $state-2: false, $state-3: false,
-  $state-4: false, $state-5: false,
-  $state-6: false, $state-7: false,
-  $state-8: false, $state-9: false)
-  {
-    $full:  compact($state-1, $state-2, $state-3, $state-4,
-                    $state-5, $state-6, $state-7, $state-8, $state-9);
-
-  -webkit-animation-play-state: $full;
-     -moz-animation-play-state: $full;
-          animation-play-state: $full;
+@mixin animation-play-state ($states...) {
+// running | paused
+  @include prefixer(animation-play-state, $states, webkit moz spec);
 }


-@mixin animation-delay ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full:  compact($time-1, $time-2, $time-3, $time-4,
-                    $time-5, $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-animation-delay: $full;
-     -moz-animation-delay: $full;
-          animation-delay: $full;
+@mixin animation-delay ($times...) {
+  @include prefixer(animation-delay, $times, webkit moz spec);
 }


-@mixin animation-fill-mode ($mode-1: none,
-//  http://goo.gl/l6ckm
-//  none | forwards | backwards | both
-  $mode-2: false, $mode-3: false,
-  $mode-4: false, $mode-5: false,
-  $mode-6: false, $mode-7: false,
-  $mode-8: false, $mode-9: false)
-  {
-    $full:  compact($mode-1, $mode-2, $mode-3, $mode-4,
-                    $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
-
-  -webkit-animation-fill-mode: $full;
-     -moz-animation-fill-mode: $full;
-          animation-fill-mode: $full;
+@mixin animation-fill-mode ($modes...) {
+// none | forwards | backwards | both
+  @include prefixer(animation-fill-mode, $modes, webkit moz spec);
 }
-
-
-// Deprecated
-@mixin animation-basic ($name, $time: 0, $motion: ease) {
-    $length-of-name: length($name);
-    $length-of-time: length($time);
-  $length-of-motion: length($motion);
-
-  @if $length-of-name > 1 {
-    @include animation-name(zip($name));
-  } @else {
-    @include animation-name(    $name);
-  }
-
-  @if $length-of-time > 1 {
-    @include animation-duration(zip($time));
-  } @else {
-    @include animation-duration(    $time);
-  }
-
-  @if $length-of-motion > 1 {
-    @include animation-timing-function(zip($motion));
-  } @else {
-    @include animation-timing-function(    $motion);
-  }
-  @warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
-}
-
--- a/common/static/sass/bourbon/css3/_appearance.scss
+++ b/common/static/sass/bourbon/css3/_appearance.scss
@@ -1,7 +1,3 @@
@mixin appearance ($value) {
-  -webkit-appearance: $value;
-     -moz-appearance: $value;
-      -ms-appearance: $value;
-       -o-appearance: $value;
-          appearance: $value;
+  @include prefixer(appearance, $value, webkit moz ms o spec);
 }
--- a/common/static/sass/bourbon/css3/_backface-visibility.scss
+++ b/common/static/sass/bourbon/css3/_backface-visibility.scss
@@ -0,0 +1,6 @@
+//************************************************************************//
+// Backface-visibility mixin
+//************************************************************************//
+@mixin backface-visibility($visibility) {
+  @include prefixer(backface-visibility, $visibility, webkit spec);
+}
--- a/common/static/sass/bourbon/css3/_background-image.scss
+++ b/common/static/sass/bourbon/css3/_background-image.scss
@@ -3,42 +3,35 @@
 // gradients, or for stringing multiple gradients together.
 //************************************************************************//

-@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);
-
-  background-image: add-prefix($images, webkit);
-  background-image: add-prefix($images, moz);
-  background-image: add-prefix($images, ms);
-  background-image: add-prefix($images, o);
-  background-image: add-prefix($images);
+@mixin background-image($images...) {
+  background-image: _add-prefix($images, webkit);
+  background-image: _add-prefix($images);
 }

-
-@function add-prefix($images, $vendor: false) {
+@function _add-prefix($images, $vendor: false) {
  $images-prefixed: ();
-
+  $gradient-positions: false;
  @for $i from 1 through length($images) {
    $type: type-of(nth($images, $i)); // Get type of variable - List or String

    // If variable is a list - Gradient
    @if $type == list {
-      $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
-      $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+      $gradient-type: nth(nth($images, $i), 1); // linear or radial
+      $gradient-pos: null;
+      $gradient-args: null;

-      $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+      @if ($gradient-type == linear) or ($gradient-type == radial) {
+        $gradient-pos:  nth(nth($images, $i), 2); // Get gradient position
+        $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
+      }
+      @else {
+        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+      }
+
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
      $images-prefixed: append($images-prefixed, $gradient, comma);
    }
-
    // If variable is a string - Image
    @else if $type == string {
      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
@@ -47,11 +40,9 @@
  @return $images-prefixed;
 }

-
-
 //Examples:
  //@include background-image(linear-gradient(top, orange, red));
  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
-  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
+  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
--- a/common/static/sass/bourbon/css3/_background-size.scss
+++ b/common/static/sass/bourbon/css3/_background-size.scss
@@ -1,15 +0,0 @@
-@mixin background-size ($length-1,
-  $length-2: false, $length-3: false,
-  $length-4: false, $length-5: false,
-  $length-6: false, $length-7: false,
-  $length-8: false, $length-9: false)
-  {
-    $full: compact($length-1, $length-2, $length-3, $length-4,
-                   $length-5, $length-6, $length-7, $length-8, $length-9);
-
-  -webkit-background-size: $full;
-     -moz-background-size: $full;
-      -ms-background-size: $full;
-       -o-background-size: $full;
-          background-size: $full;
-}
--- a/common/static/sass/bourbon/css3/_background.scss
+++ b/common/static/sass/bourbon/css3/_background.scss
@@ -0,0 +1,103 @@
+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@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,
+  $fallback: false
+) {
+  $backgrounds: compact($background-1, $background-2,
+                $background-3, $background-4,
+                $background-5, $background-6,
+                $background-7, $background-8,
+                $background-9, $background-10);
+
+  $fallback-color: false;
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+  @else {
+    $fallback-color: _extract-background-color($backgrounds);
+  }
+
+  @if $fallback-color {
+    background-color: $fallback-color;
+  }
+  background: _background-add-prefix($backgrounds, webkit);
+  background: _background-add-prefix($backgrounds);
+}
+
+@function _extract-background-color($backgrounds) {
+  $final-bg-layer: nth($backgrounds, length($backgrounds));
+  @if type-of($final-bg-layer) == list {
+    @for $i from 1 through length($final-bg-layer) {
+      $value: nth($final-bg-layer, $i);
+      @if type-of($value) == color {
+        @return $value;
+      }
+    }
+  }
+  @return false;
+}
+
+@function _background-add-prefix($backgrounds, $vendor: false) {
+  $backgrounds-prefixed: ();
+
+  @for $i from 1 through length($backgrounds) {
+    $shorthand: nth($backgrounds, $i); // Get member for current index
+    $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
+
+    // If shorthand is a list (gradient)
+    @if $type == list {
+      $first-member: nth($shorthand, 1); // Get first member of shorthand
+
+      // Linear Gradient
+      @if index(linear radial, nth($first-member, 1)) {
+        $gradient-type: nth($first-member, 1); // linear || radial
+        $gradient-args:      false;
+        $gradient-positions: false;
+        $shorthand-start:    false;
+        @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
+          $gradient-positions: nth($first-member, 2);
+          $gradient-args:      nth($first-member, 3);
+          $shorthand-start: 2;
+        }
+        @else { // Linear gradient only - lg(red,orange),...
+          $gradient-positions: nth($shorthand, 2);
+          $gradient-args:      nth($shorthand, 3); // Get gradient (red, blue)
+        }
+
+        $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
+        $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+
+        // Append any additional shorthand args to gradient
+        @if $shorthand-start {
+          @for $j from $shorthand-start through length($shorthand) {
+            $gradient: join($gradient, nth($shorthand, $j), space);
+          }
+        }
+        $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
+      }
+      // Image with additional properties
+      @else {
+        $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
+      }
+    }
+    // If shorthand is a simple string (color or image)
+    @else if $type == string {
+      $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
+    }
+  }
+  @return $backgrounds-prefixed;
+}
+
+//Examples:
+  //@include background(linear-gradient(top, orange, red));
+  //@include background(radial-gradient(circle at 40% 40%, orange, red));
+  //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
+  //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
--- a/common/static/sass/bourbon/css3/_border-image.scss
+++ b/common/static/sass/bourbon/css3/_border-image.scss
@@ -1,45 +1,43 @@
@mixin border-image($images) {
-  -webkit-border-image: border-add-prefix($images, webkit);
-     -moz-border-image: border-add-prefix($images, moz);
-       -o-border-image: border-add-prefix($images, o);
-          border-image: border-add-prefix($images);
+  -webkit-border-image: _border-add-prefix($images, webkit);
+     -moz-border-image: _border-add-prefix($images, moz);
+       -o-border-image: _border-add-prefix($images, o);
+          border-image: _border-add-prefix($images);
 }

-@function border-add-prefix($images, $vendor: false) {
-  $border-image: ();
+@function _border-add-prefix($images, $vendor: false) {
+  $border-image: null;
  $images-type:  type-of(nth($images, 1));
  $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)

  // If input is a gradient
  @if $images-type == string {
    @if ($first-var == "linear") or ($first-var == "radial") {
-      @for $i from 2 through length($images) {
-        $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
-        $gradient-args: nth($images, $i);          // Get actual gradient (red, blue)
-        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
-      }
+      $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
+      $gradient-pos:  nth($images, 2);           // Get gradient position
+      $gradient-args: nth($images, 3);           // Get actual gradient (red, blue)
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
    }
-
    // If input is a URL
    @else {
      $border-image: $images;
    }
  }
-
  // If input is gradient or url + additional args
  @else if $images-type == list {
-    @for $i from 1 through length($images) {
-      $type: type-of(nth($images, $i));           // Get type of variable - List or String
+    $type: type-of(nth($images, 1));           // Get type of variable - List or String

-      // If variable is a list - Gradient
-      @if $type == list {
-        $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
-        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
-        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
-      }
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient: nth($images, 1);
+      $gradient-type: nth($gradient, 1);           // Get type of gradient (linear || radial)
+      $gradient-pos:  nth($gradient, 2);           // Get gradient position
+      $gradient-args: nth($gradient, 3);           // Get actual gradient (red, blue)
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);

-      // If variable is a string - Image or number
-      @else if ($type == string) or ($type == number) {
+      @for $i from 2 through length($images) {
        $border-image: append($border-image, nth($images, $i));
      }
    }
@@ -54,3 +52,4 @@
 // @include border-image(linear-gradient(45deg, orange, yellow) stretch);
 // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
 // @include border-image(radial-gradient(top, cover, orange, yellow, orange));
+
--- a/common/static/sass/bourbon/css3/_border-radius.scss
+++ b/common/static/sass/bourbon/css3/_border-radius.scss
@@ -1,63 +1,22 @@
-@mixin border-radius ($radii) {
-  -webkit-border-radius: $radii;
-     -moz-border-radius: $radii;
-      -ms-border-radius: $radii;
-       -o-border-radius: $radii;
-          border-radius: $radii;
-}
-
-@mixin border-top-left-radius($radii) {
-  -webkit-border-top-left-radius: $radii;
-     -moz-border-top-left-radius: $radii;
-      -moz-border-radius-topleft: $radii;
-      -ms-border-top-left-radius: $radii;
-       -o-border-top-left-radius: $radii;
-          border-top-left-radius: $radii;
-}
-
-@mixin border-top-right-radius($radii) {
-  -webkit-border-top-right-radius: $radii;
-     -moz-border-top-right-radius: $radii;
-      -moz-border-radius-topright: $radii;
-      -ms-border-top-right-radius: $radii;
-       -o-border-top-right-radius: $radii;
-          border-top-right-radius: $radii;
-}
-
-@mixin border-bottom-left-radius($radii) {
-  -webkit-border-bottom-left-radius: $radii;
-     -moz-border-bottom-left-radius: $radii;
-      -moz-border-radius-bottomleft: $radii;
-      -ms-border-bottom-left-radius: $radii;
-       -o-border-bottom-left-radius: $radii;
-          border-bottom-left-radius: $radii;
-}
-
-@mixin border-bottom-right-radius($radii) {
-  -webkit-border-bottom-right-radius: $radii;
-     -moz-border-bottom-right-radius: $radii;
-      -moz-border-radius-bottomright: $radii;
-      -ms-border-bottom-right-radius: $radii;
-       -o-border-bottom-right-radius: $radii;
-          border-bottom-right-radius: $radii;
-}
-
+//************************************************************************//
+// Shorthand Border-radius mixins
+//************************************************************************//
@mixin border-top-radius($radii) {
-  @include border-top-left-radius($radii);
-  @include border-top-right-radius($radii);
-}
-
-@mixin border-right-radius($radii) {
-  @include border-top-right-radius($radii);
-  @include border-bottom-right-radius($radii);
+  @include prefixer(border-top-left-radius, $radii, spec);
+  @include prefixer(border-top-right-radius, $radii, spec);
 }

@mixin border-bottom-radius($radii) {
-  @include border-bottom-left-radius($radii);
-  @include border-bottom-right-radius($radii);
+  @include prefixer(border-bottom-left-radius, $radii, spec);
+  @include prefixer(border-bottom-right-radius, $radii, spec);
 }

@mixin border-left-radius($radii) {
-  @include border-top-left-radius($radii);
-  @include border-bottom-left-radius($radii);
+  @include prefixer(border-top-left-radius, $radii, spec);
+  @include prefixer(border-bottom-left-radius, $radii, spec);
+}
+
+@mixin border-right-radius($radii) {
+  @include prefixer(border-top-right-radius, $radii, spec);
+  @include prefixer(border-bottom-right-radius, $radii, spec);
 }
--- a/common/static/sass/bourbon/css3/_box-shadow.scss
+++ b/common/static/sass/bourbon/css3/_box-shadow.scss
@@ -1,14 +0,0 @@
-// Box-Shadow Mixin Requires Sass v3.1.1+
-@mixin box-shadow ($shadow-1,
-  $shadow-2: false, $shadow-3: false,
-  $shadow-4: false, $shadow-5: false,
-  $shadow-6: false, $shadow-7: false,
-  $shadow-8: false, $shadow-9: false)
-  {
-    $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
-                   $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
-
-  -webkit-box-shadow: $full;
-     -moz-box-shadow: $full;
-          box-shadow: $full;
-}
--- a/common/static/sass/bourbon/css3/_box-sizing.scss
+++ b/common/static/sass/bourbon/css3/_box-sizing.scss
@@ -1,6 +1,4 @@
@mixin box-sizing ($box) {
 //  content-box | border-box | inherit
-  -webkit-box-sizing: $box;
-     -moz-box-sizing: $box;
-          box-sizing: $box; *behavior: url(/static/scripts/boxsizing.htc);
+  @include prefixer(box-sizing, $box, webkit moz spec);
 }
--- a/common/static/sass/bourbon/css3/_columns.scss
+++ b/common/static/sass/bourbon/css3/_columns.scss
@@ -1,67 +1,47 @@
@mixin columns($arg: auto) {
 // <column-count> || <column-width>
-  -webkit-columns: $arg;
-     -moz-columns: $arg;
-          columns: $arg;
+  @include prefixer(columns, $arg, webkit moz spec);
 }

@mixin column-count($int: auto) {
 // auto || integer
-  -webkit-column-count: $int;
-     -moz-column-count: $int;
-          column-count: $int;
+  @include prefixer(column-count, $int, webkit moz spec);
 }

@mixin column-gap($length: normal) {
 // normal || length
-  -webkit-column-gap: $length;
-     -moz-column-gap: $length;
-          column-gap: $length;
+  @include prefixer(column-gap, $length, webkit moz spec);
 }

@mixin column-fill($arg: auto) {
 // auto || length
-  -webkit-columns-fill: $arg;
-     -moz-columns-fill: $arg;
-          columns-fill: $arg;
+  @include prefixer(columns-fill, $arg, webkit moz spec);
 }

@mixin column-rule($arg) {
 // <border-width> || <border-style> || <color>
-  -webkit-column-rule: $arg;
-     -moz-column-rule: $arg;
-          column-rule: $arg;
+  @include prefixer(column-rule, $arg, webkit moz spec);
 }

@mixin column-rule-color($color) {
-  -webkit-column-rule-color: $color;
-     -moz-column-rule-color: $color;
-          column-rule-color: $color;
+  @include prefixer(column-rule-color, $color, webkit moz spec);
 }

@mixin column-rule-style($style: none) {
 // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
-  -webkit-column-rule-style: $style;
-     -moz-column-rule-style: $style;
-          column-rule-style: $style;
+  @include prefixer(column-rule-style, $style, webkit moz spec);
 }

@mixin column-rule-width ($width: none) {
-  -webkit-column-rule-width: $width;
-     -moz-column-rule-width: $width;
-          column-rule-width: $width;
+  @include prefixer(column-rule-width, $width, webkit moz spec);
 }

@mixin column-span($arg: none) {
 // none || all
-  -webkit-column-span: $arg;
-     -moz-column-span: $arg;
-          column-span: $arg;
+  @include prefixer(column-span, $arg, webkit moz spec);
 }

@mixin column-width($length: auto) {
 // auto || length
-  -webkit-column-width: $length;
-     -moz-column-width: $length;
-          column-width: $length;
+  @include prefixer(column-width, $length, webkit moz spec);
 }
--- a/common/static/sass/bourbon/css3/_flex-box.scss
+++ b/common/static/sass/bourbon/css3/_flex-box.scss
@@ -16,52 +16,37 @@

@mixin box-orient($orient: inline-axis) {
 // horizontal|vertical|inline-axis|block-axis|inherit
-  -webkit-box-orient: $orient;
-     -moz-box-orient: $orient;
-          box-orient: $orient;
+  @include prefixer(box-orient, $orient, webkit moz spec);
 }

@mixin box-pack($pack: start) {
 // start|end|center|justify
-  -webkit-box-pack: $pack;
-     -moz-box-pack: $pack;
-          box-pack: $pack;
+  @include prefixer(box-pack, $pack, webkit moz spec);
 }

@mixin box-align($align: stretch) {
 // start|end|center|baseline|stretch
-  -webkit-box-align: $align;
-     -moz-box-align: $align;
-          box-align: $align;
+  @include prefixer(box-align, $align, webkit moz spec);
 }

@mixin box-direction($direction: normal) {
 // normal|reverse|inherit
-  -webkit-box-direction: $direction;
-     -moz-box-direction: $direction;
-          box-direction: $direction;
-}
-@mixin box-lines($lines: single) {
-// single|multiple
-  -webkit-box-lines: $lines;
-     -moz-box-lines: $lines;
-          box-lines: $lines;
+  @include prefixer(box-direction, $direction, webkit moz spec);
 }

-@mixin box-ordinal-group($integer: 1) {
-  -webkit-box-ordinal-group: $integer;
-     -moz-box-ordinal-group: $integer;
-          box-ordinal-group: $integer;
+@mixin box-lines($lines: single) {
+// single|multiple
+  @include prefixer(box-lines, $lines, webkit moz spec);
+}
+
+@mixin box-ordinal-group($int: 1) {
+  @include prefixer(box-ordinal-group, $int, webkit moz spec);
 }

@mixin box-flex($value: 0.0) {
-  -webkit-box-flex: $value;
-     -moz-box-flex: $value;
-          box-flex: $value;
+  @include prefixer(box-flex, $value, webkit moz spec);
 }

-@mixin box-flex-group($integer: 1) {
-  -webkit-box-flex-group: $integer;
-     -moz-box-flex-group: $integer;
-          box-flex-group: $integer;
+@mixin box-flex-group($int: 1) {
+  @include prefixer(box-flex-group, $int, webkit moz spec);
 }
--- a/common/static/sass/bourbon/css3/_font-face.scss
+++ b/common/static/sass/bourbon/css3/_font-face.scss
@@ -0,0 +1,23 @@
+// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
+
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+
+    @if $asset-pipeline == true {
+      src: font-url('#{$file-path}.eot');
+      src: font-url('#{$file-path}.eot?#iefix')          format('embedded-opentype'),
+           font-url('#{$file-path}.woff')                format('woff'),
+           font-url('#{$file-path}.ttf')                 format('truetype'),
+           font-url('#{$file-path}.svg##{$font-family}') format('svg');
+    } @else {
+      src: url('#{$file-path}.eot');
+      src: url('#{$file-path}.eot?#iefix')               format('embedded-opentype'),
+           url('#{$file-path}.woff')                     format('woff'),
+           url('#{$file-path}.ttf')                      format('truetype'),
+           url('#{$file-path}.svg##{$font-family}')      format('svg');
+    }
+  }
+}
--- a/common/static/sass/bourbon/css3/_hidpi-media-query.scss
+++ b/common/static/sass/bourbon/css3/_hidpi-media-query.scss
@@ -0,0 +1,10 @@
+// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+@mixin hidpi($ratio: 1.3) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+  only screen and (min-resolution: #{round($ratio*96)}dpi),
+  only screen and (min-resolution: #{$ratio}dppx) {
+    @content;
+  }
+}
--- a/common/static/sass/bourbon/css3/_image-rendering.scss
+++ b/common/static/sass/bourbon/css3/_image-rendering.scss
@@ -0,0 +1,13 @@
+@mixin image-rendering ($mode:optimizeQuality) {
+
+  @if ($mode == optimize-contrast) {
+      image-rendering: -moz-crisp-edges;
+      image-rendering: -o-crisp-edges;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: optimize-contrast;
+  }
+
+  @else {
+      image-rendering: $mode;
+  }
+}
--- a/common/static/sass/bourbon/css3/_inline-block.scss
+++ b/common/static/sass/bourbon/css3/_inline-block.scss
@@ -1,7 +1,5 @@
 // Legacy support for inline-block in IE7 (maybe IE6)
@mixin inline-block {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
--- a/common/static/sass/bourbon/css3/_keyframes.scss
+++ b/common/static/sass/bourbon/css3/_keyframes.scss
@@ -0,0 +1,43 @@
+// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
+@mixin keyframes($name) {
+  $original-prefix-for-webkit:    $prefix-for-webkit;
+  $original-prefix-for-mozilla:   $prefix-for-mozilla;
+  $original-prefix-for-microsoft: $prefix-for-microsoft;
+  $original-prefix-for-opera:     $prefix-for-opera;
+  $original-prefix-for-spec:      $prefix-for-spec;
+
+  @if $original-prefix-for-webkit {
+    @include disable-prefix-for-all();
+    $prefix-for-webkit: true;
+    @-webkit-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-mozilla {
+    @include disable-prefix-for-all();
+    $prefix-for-mozilla: true;
+    @-moz-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-opera {
+    @include disable-prefix-for-all();
+    $prefix-for-opera: true;
+    @-o-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-spec {
+    @include disable-prefix-for-all();
+    $prefix-for-spec: true;
+    @keyframes #{$name} {
+      @content;
+    }
+  }
+
+  $prefix-for-webkit:    $original-prefix-for-webkit;
+  $prefix-for-mozilla:   $original-prefix-for-mozilla;
+  $prefix-for-microsoft: $original-prefix-for-microsoft;
+  $prefix-for-opera:     $original-prefix-for-opera;
+  $prefix-for-spec:      $original-prefix-for-spec;
+}
--- a/common/static/sass/bourbon/css3/_linear-gradient.scss
+++ b/common/static/sass/bourbon/css3/_linear-gradient.scss
@@ -3,15 +3,25 @@
                       $G5: false, $G6: false,
                       $G7: false, $G8: false,
                       $G9: false, $G10: false,
+                       $deprecated-pos1: left top,
+                       $deprecated-pos2: left bottom,
                       $fallback: false) {
  // Detect what type of value exists in $pos
  $pos-type: type-of(nth($pos, 1));
+  $pos-spec: null;
+  $pos-degree: null;

  // If $pos is missing from mixin, reassign vars and add default position
  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
-    $pos: top; // Default position
+     $pos: null;
+  }
+
+  @if $pos {
+    $positions: _linear-positions-parser($pos);
+    $pos-degree: nth($positions, 1);
+    $pos-spec:   nth($positions, 2);
  }

  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
@@ -25,17 +35,7 @@
  }

  background-color: $fallback-color;
-  background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
-  background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
-  background-image:     -moz-linear-gradient($pos, $full);
-  background-image:      -ms-linear-gradient($pos, $full);
-  background-image:       -o-linear-gradient($pos, $full);
-  background-image: unquote("linear-gradient(#{$pos}, #{$full})");
+  background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
+  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
 }
-
-
-// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
-// @include linear-gradient(#1e5799, #2989d8);
-// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
-// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
-// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
--- a/common/static/sass/bourbon/css3/_perspective.scss
+++ b/common/static/sass/bourbon/css3/_perspective.scss
@@ -0,0 +1,8 @@
+@mixin perspective($depth: none) {
+  // none | <length>
+  @include prefixer(perspective, $depth, webkit moz spec);
+}
+
+@mixin perspective-origin($value: 50% 50%) {
+  @include prefixer(perspective-origin, $value, webkit moz spec);
+}
--- a/common/static/sass/bourbon/css3/_placeholder.scss
+++ b/common/static/sass/bourbon/css3/_placeholder.scss
@@ -0,0 +1,29 @@
+$placeholders: '-webkit-input-placeholder',
+               '-moz-placeholder',
+               '-ms-input-placeholder';
+
+@mixin placeholder {
+  @each $placeholder in $placeholders {
+    @if $placeholder == "-webkit-input-placeholder" {
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else if $placeholder == "-moz-placeholder" {
+      // FF 18-
+      &:#{$placeholder} {
+        @content;
+      }
+
+      // FF 19+
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else {
+      &:#{$placeholder} {
+        @content;
+      }
+    }
+  }
+}
--- a/common/static/sass/bourbon/css3/_radial-gradient.scss
+++ b/common/static/sass/bourbon/css3/_radial-gradient.scss
@@ -1,31 +1,44 @@
 // Requires Sass 3.1+
-@mixin radial-gradient($pos, $shape-size,
-                       $G1,        $G2,
+@mixin radial-gradient($G1,        $G2,
                       $G3: false, $G4: false,
                       $G5: false, $G6: false,
                       $G7: false, $G8: false,
                       $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: null,
+                       $deprecated-pos1: center center,
+                       $deprecated-pos2: center center,
+                       $deprecated-radius1: 0,
+                       $deprecated-radius2: 460,
                       $fallback: false) {

+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
+
  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);

-  // Set $G1 as the default fallback color
-  $fallback-color: nth($G1, 1);
+  // Strip deprecated cover/contain for spec
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  // Set $G1 as the default fallback color
+  $first-color: nth($full, 1);
+  $fallback-color: nth($first-color, 1);

-  // If $fallback is a color use that color as the fallback color
  @if (type-of($fallback) == color) or ($fallback == "transparent") {
    $fallback-color: $fallback;
  }

-  background-color:  $fallback-color;
-  background-image:          deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
-  background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
-  background-image:     -moz-radial-gradient($pos, $shape-size, $full);
-  background-image:      -ms-radial-gradient($pos, $shape-size, $full);
-  background-image:       -o-radial-gradient($pos, $shape-size, $full);
-  background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
-}
+  // Add Commas and spaces
+  $shape-size: if($shape-size, '#{$shape-size}, ', null);
+  $pos:        if($pos, '#{$pos}, ', null);
+  $pos-spec:   if($pos, 'at #{$pos}', null);
+  $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');

-//  Usage: Gradient position and shape-size are required. Color stops are optional.
-//  @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
-//  @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
+  background-color:  $fallback-color;
+  background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
+  background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
+  background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
+}
--- a/common/static/sass/bourbon/css3/_transform.scss
+++ b/common/static/sass/bourbon/css3/_transform.scss
@@ -1,19 +1,15 @@
@mixin transform($property: none) {
 //  none | <transform-function>
-  -webkit-transform: $property;
-     -moz-transform: $property;
-      -ms-transform: $property;
-       -o-transform: $property;
-          transform: $property;
+  @include prefixer(transform, $property, webkit moz ms o spec);
 }

@mixin transform-origin($axes: 50%) {
 // x-axis - left | center | right  | length | %
 // y-axis - top  | center | bottom | length | %
 // z-axis -                          length
-  -webkit-transform-origin: $axes;
-     -moz-transform-origin: $axes;
-      -ms-transform-origin: $axes;
-       -o-transform-origin: $axes;
-          transform-origin: $axes;
+  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
+}
+
+@mixin transform-style ($style: flat) {
+  @include prefixer(transform-style, $style, webkit moz ms o spec);
 }
--- a/common/static/sass/bourbon/css3/_transition.scss
+++ b/common/static/sass/bourbon/css3/_transition.scss
@@ -3,102 +3,32 @@
 //          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
 //          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));

-@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
-
-  // Detect # of args passed into each variable
-  $length-of-property:        length($property);
-  $length-of-duration:        length($duration);
-  $length-of-timing-function: length($timing-function);
-  $length-of-delay:           length($delay);
-
-  @if $length-of-property > 1 {
-    @include transition-property(zip($property)); }
-  @else {
-    @include transition-property(    $property);
+@mixin transition ($properties...) {
+  @if length($properties) >= 1 {
+    @include prefixer(transition, $properties, webkit moz spec);
  }

-  @if $length-of-duration > 1 {
-    @include transition-duration(zip($duration)); }
  @else {
-    @include transition-duration(    $duration);
-  }
-
-  @if $length-of-timing-function > 1 {
-    @include transition-timing-function(zip($timing-function)); }
-  @else {
-    @include transition-timing-function(    $timing-function);
-  }
-
-  @if $length-of-delay > 1 {
-    @include transition-delay(zip($delay)); }
-  @else {
-    @include transition-delay(    $delay);
+    $properties: all 0.15s ease-out 0;
+    @include prefixer(transition, $properties, webkit moz spec);
  }
 }

-
-@mixin transition-property ($prop-1: all,
-  $prop-2: false, $prop-3: false,
-  $prop-4: false, $prop-5: false,
-  $prop-6: false, $prop-7: false,
-  $prop-8: false, $prop-9: false)
-  {
-    $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
-                   $prop-6, $prop-7, $prop-8, $prop-9);
-
-  -webkit-transition-property: $full;
-     -moz-transition-property: $full;
-      -ms-transition-property: $full;
-       -o-transition-property: $full;
-          transition-property: $full;
+@mixin transition-property ($properties...) {
+   -webkit-transition-property: transition-property-names($properties, 'webkit');
+      -moz-transition-property: transition-property-names($properties, 'moz');
+           transition-property: transition-property-names($properties, false);
 }

-@mixin transition-duration ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
-                   $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-transition-duration: $full;
-     -moz-transition-duration: $full;
-      -ms-transition-duration: $full;
-       -o-transition-duration: $full;
-          transition-duration: $full;
+@mixin transition-duration ($times...) {
+  @include prefixer(transition-duration, $times, webkit moz spec);
 }

-@mixin transition-timing-function ($motion-1: ease,
-  $motion-2: false, $motion-3: false,
-  $motion-4: false, $motion-5: false,
-  $motion-6: false, $motion-7: false,
-  $motion-8: false, $motion-9: false)
-  {
-    $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
-                   $motion-6, $motion-7, $motion-8, $motion-9);
-
+@mixin transition-timing-function ($motions...) {
 // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
-  -webkit-transition-timing-function: $full;
-     -moz-transition-timing-function: $full;
-      -ms-transition-timing-function: $full;
-       -o-transition-timing-function: $full;
-          transition-timing-function: $full;
+  @include prefixer(transition-timing-function, $motions, webkit moz spec);
 }

-@mixin transition-delay ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
-                   $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-transition-delay: $full;
-     -moz-transition-delay: $full;
-      -ms-transition-delay: $full;
-       -o-transition-delay: $full;
-          transition-delay: $full;
+@mixin transition-delay ($times...) {
+  @include prefixer(transition-delay, $times, webkit moz spec);
 }
-
--- a/common/static/sass/bourbon/css3/_user-select.scss
+++ b/common/static/sass/bourbon/css3/_user-select.scss
@@ -1,6 +1,3 @@
@mixin user-select($arg: none) {
-  -webkit-user-select: $arg;
-     -moz-user-select: $arg;
-      -ms-user-select: $arg;
-          user-select: $arg;
+  @include prefixer(user-select, $arg, webkit moz ms spec);
 }
--- a/common/static/sass/bourbon/functions/_compact.scss
+++ b/common/static/sass/bourbon/functions/_compact.scss
@@ -0,0 +1,11 @@
+// Remove `false` values from a list
+
+@function compact($vars...) {
+  $list: ();
+  @each $var in $vars {
+    @if $var {
+      $list: append($list, $var, comma);
+    }
+  }
+  @return $list;
+}
--- a/common/static/sass/bourbon/functions/_flex-grid.scss
+++ b/common/static/sass/bourbon/functions/_flex-grid.scss
@@ -14,13 +14,17 @@
 // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
 // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
 //
+// The calculation presumes that your column structure will be missing the last gutter:
+//
+//   -- column -- gutter -- column -- gutter -- column
+//
 //  $fg-column: 60px;             // Column Width
 //  $fg-gutter: 25px;             // Gutter Width
 //  $fg-max-columns: 12;          // Total Columns For Main Container
 //
 //  div {
-//    width: flex-grid(4);        // returns (315px / 1020px) = 30.882353%;
-//    margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
+//    width: flex-grid(4);        // returns (315px / 995px) = 31.65829%;
+//    margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
 //
 //    p {
 //      width: flex-grid(2, 4);  // returns (145px / 315px) = 46.031746%;
@@ -32,4 +36,4 @@
 //      float: left;
 //      width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
 //    }
-//  }
+//  }
--- a/common/static/sass/bourbon/functions/_linear-gradient.scss
+++ b/common/static/sass/bourbon/functions/_linear-gradient.scss
@@ -1,23 +1,13 @@
-@function linear-gradient($pos: top, $G1: false, $G2: false,
-                       $G3: false, $G4: false,
-                       $G5: false, $G6: false,
-                       $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
-
-  // Detect what type of value exists in $pos
+@function linear-gradient($pos, $gradients...) {
+  $type: linear;
  $pos-type: type-of(nth($pos, 1));

-  // If $pos is missing from mixin, reassign vars and add default position
+  // if $pos doesn't exist, fix $gradient
  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
-    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
-     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
-    $pos: top; // Default position
+    $gradients: zip($pos $gradients);
+    $pos: false;
  }

-  $type: linear;
-  $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-  $type-gradient: append($type, $gradient, comma);
-
+  $type-gradient: $type, $pos, $gradients;
  @return $type-gradient;
 }
-
--- a/common/static/sass/bourbon/functions/_px-to-em.scss
+++ b/common/static/sass/bourbon/functions/_px-to-em.scss
@@ -0,0 +1,8 @@
+// Convert pixels to ems
+// eg. for a relational value of 12px write em(12) when the parent is 16px
+// if the parent is another value say 24px write em(12, 24)
+
+@function em($pxval, $base: 16) {
+  @return ($pxval / $base) * 1em;
+}
+
--- a/common/static/sass/bourbon/functions/_radial-gradient.scss
+++ b/common/static/sass/bourbon/functions/_radial-gradient.scss
@@ -1,15 +1,23 @@
 // This function is required and used by the background-image mixin.
-@function radial-gradient($pos, $shape-size,
-                       $G1,        $G2,
+@function radial-gradient($G1,        $G2,
                       $G3: false, $G4: false,
                       $G5: false, $G6: false,
                       $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
+                       $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: null) {
+
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);

  $type: radial;
-  $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-  $type-gradient: append($type, $gradient, comma);
+  $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);

+  $type-gradient: $type, $shape-size $pos, $gradient;
  @return $type-gradient;
 }

+
--- a/common/static/sass/bourbon/functions/_render-gradients.scss
+++ b/common/static/sass/bourbon/functions/_render-gradients.scss
@@ -1,14 +0,0 @@
-// User for linear and radial gradients within background-image or border-image properties
-
-@function render-gradients($gradients, $gradient-type, $vendor: false) {
-  $vendor-gradients: false;
-  @if $vendor {
-    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
-  }
-
-  @else if $vendor == false {
-    $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
-    $vendor-gradients: unquote($vendor-gradients);
-  }
-  @return $vendor-gradients;
-}
--- a/common/static/sass/bourbon/functions/_transition-property-name.scss
+++ b/common/static/sass/bourbon/functions/_transition-property-name.scss
@@ -0,0 +1,22 @@
+// Return vendor-prefixed property names if appropriate
+// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
+//************************************************************************//
+@function transition-property-names($props, $vendor: false) {
+	$new-props: ();
+	
+	@each $prop in $props {
+		$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+	}
+
+	@return $new-props;
+}
+
+@function transition-property-name($prop, $vendor: false) {
+	// put other properties that need to be prefixed here aswell
+	@if $vendor and $prop == transform {
+		@return unquote('-'+$vendor+'-'+$prop);
+	}
+	@else {
+		@return $prop;
+	}
+}
--- a/common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss
+++ b/common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss
@@ -1,6 +1,9 @@
 // Render Deprecated Webkit Gradient - Linear || Radial
 //************************************************************************//
-@function deprecated-webkit-gradient($type, $full) {
+@function _deprecated-webkit-gradient($type,
+                                     $deprecated-pos1, $deprecated-pos2,
+                                     $full,
+                                     $deprecated-radius1: false, $deprecated-radius2: false) {
  $gradient-list: ();
  $gradient: false;
  $full-length: length($full);
@@ -14,7 +17,7 @@
      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
      $gradient-list: join($gradient-list, $color-stop, comma);
    }
-    @else {
+    @else if $gradient != null {
      @if $i == $full-length {
        $percentage: 100%;
      }
@@ -27,10 +30,10 @@
  }

  @if $type == radial {
-    $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
+    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
  }
  @else if $type == linear {
-    $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
+    $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
  }
  @return $gradient;
 }
--- a/common/static/sass/bourbon/helpers/_gradient-positions-parser.scss
+++ b/common/static/sass/bourbon/helpers/_gradient-positions-parser.scss
@@ -0,0 +1,13 @@
+@function _gradient-positions-parser($gradient-type, $gradient-positions) {
+  @if $gradient-positions
+  and ($gradient-type == linear)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _linear-positions-parser($gradient-positions);
+  }
+  @else if $gradient-positions
+  and ($gradient-type == radial)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _radial-positions-parser($gradient-positions);
+  }
+  @return $gradient-positions;
+}
--- a/common/static/sass/bourbon/helpers/_linear-positions-parser.scss
+++ b/common/static/sass/bourbon/helpers/_linear-positions-parser.scss
@@ -0,0 +1,61 @@
+@function _linear-positions-parser($pos) {
+  $type: type-of(nth($pos, 1));
+  $spec: null;
+  $degree: null;
+  $side: null;
+  $corner: null;
+  $length: length($pos);
+  // Parse Side and corner positions
+  @if ($length > 1) {
+    @if nth($pos, 1) == "to" { // Newer syntax
+      $side: nth($pos, 2);
+
+      @if $length == 2 { // eg. to top
+        // Swap for backwards compatability
+        $degree: _position-flipper(nth($pos, 2));
+      }
+      @else if $length == 3 { // eg. to top left
+        $corner: nth($pos, 3);
+      }
+    }
+    @else if $length == 2 { // Older syntax ("top left")
+      $side: _position-flipper(nth($pos, 1));
+      $corner: _position-flipper(nth($pos, 2));
+    }
+
+    @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    $spec: to $side $corner;
+  }
+  @else if $length == 1 {
+    // Swap for backwards compatability
+    @if $type == string {
+      $degree: $pos;
+      $spec: to _position-flipper($pos);
+    }
+    @else {
+      $degree: -270 - $pos; //rotate the gradient opposite from spec
+      $spec: $pos;
+    }
+  }
+  $degree: unquote($degree + ",");
+  $spec:   unquote($spec + ",");
+  @return $degree $spec;
+}
+
+@function _position-flipper($pos) {
+ @return if($pos == left, right, null)
+         if($pos == right, left, null)
+         if($pos == top, bottom, null)
+         if($pos == bottom, top, null);
+}
--- a/common/static/sass/bourbon/helpers/_radial-arg-parser.scss
+++ b/common/static/sass/bourbon/helpers/_radial-arg-parser.scss
@@ -0,0 +1,69 @@
+@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+    $spec-at-index: null;
+
+    // Determine if spec was passed to mixin
+    @if type-of($value) == list {
+      $spec-at-index: if(index($value, at), index($value, at), false);
+    }
+    @if $spec-at-index {
+      @if $spec-at-index > 1 {
+        @for $i from 1 through ($spec-at-index - 1) {
+          $shape-size: $shape-size nth($value, $i);
+        }
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      @else if $spec-at-index == 1 {
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      $G1: false;
+    }
+
+    // If not spec calculate correct values
+    @else {
+      @if ($pos-type != color) or ($first-val != "transparent") {
+        @if ($pos-type == number)
+        or ($first-val == "center")
+        or ($first-val == "top")
+        or ($first-val == "right")
+        or ($first-val == "bottom")
+        or ($first-val == "left") {
+
+          $pos: $value;
+
+          @if $pos == $G1 {
+            $G1: false;
+          }
+        }
+
+        @else if
+           ($first-val == "ellipse")
+        or ($first-val == "circle")
+        or ($first-val == "closest-side")
+        or ($first-val == "closest-corner")
+        or ($first-val == "farthest-side")
+        or ($first-val == "farthest-corner")
+        or ($first-val == "contain")
+        or ($first-val == "cover") {
+
+          $shape-size: $value;
+
+          @if $value == $G1 {
+            $G1: false;
+          }
+
+          @else if $value == $G2 {
+            $G2: false;
+          }
+        }
+      }
+    }
+  }
+  @return $G1, $G2, $pos, $shape-size;
+}
--- a/common/static/sass/bourbon/helpers/_radial-positions-parser.scss
+++ b/common/static/sass/bourbon/helpers/_radial-positions-parser.scss
@@ -0,0 +1,18 @@
+@function _radial-positions-parser($gradient-pos) {
+  $shape-size: nth($gradient-pos, 1);
+  $pos:        nth($gradient-pos, 2);
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+             unquote(if($shape-size, "#{$shape-size},", null));
+  $pos-spec: if($pos, "at #{$pos}", null);
+
+  $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+  // Add comma
+  @if ($spec != '  ') {
+    $spec: "#{$spec},"
+  }
+
+  @return $pre-spec $spec;
+}
--- a/common/static/sass/bourbon/helpers/_render-gradients.scss
+++ b/common/static/sass/bourbon/helpers/_render-gradients.scss
@@ -0,0 +1,26 @@
+// User for linear and radial gradients within background-image or border-image properties
+
+@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+  $pre-spec: null;
+  $spec: null;
+  $vendor-gradients: null;
+  @if $gradient-type == linear {
+    @if $gradient-positions {
+      $pre-spec: nth($gradient-positions, 1);
+      $spec:     nth($gradient-positions, 2);
+    }
+  }
+  @else if $gradient-type == radial {
+    $pre-spec: nth($gradient-positions, 1);
+    $spec:     nth($gradient-positions, 2);
+  }
+
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
+  }
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}
--- a/common/static/sass/bourbon/helpers/_shape-size-stripper.scss
+++ b/common/static/sass/bourbon/helpers/_shape-size-stripper.scss
@@ -0,0 +1,10 @@
+@function _shape-size-stripper($shape-size) {
+  $shape-size-spec: null;
+  @each $value in $shape-size {
+    @if ($value == "cover") or ($value == "contain") {
+      $value: null;
+    }
+    $shape-size-spec: "#{$shape-size-spec} #{$value}";
+  }
+  @return $shape-size-spec;
+}
--- a/common/static/sass/bourbon/lib/bourbon.rb
+++ b/common/static/sass/bourbon/lib/bourbon.rb
@@ -1,19 +0,0 @@
-require "bourbon/generator"
-
-module Bourbon
-  if defined?(Rails)
-    class Engine < ::Rails::Engine
-      require 'bourbon/engine'
-    end
-
-    module Rails
-      class Railtie < ::Rails::Railtie
-        rake_tasks do
-          load "tasks/install.rake"
-        end
-      end
-    end
-  end
-end
-
-require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions")
--- a/common/static/sass/bourbon/lib/bourbon/sass_extensions.rb
+++ b/common/static/sass/bourbon/lib/bourbon/sass_extensions.rb
@@ -1,6 +0,0 @@
-module Bourbon::SassExtensions
-end
-
-require "sass"
-
-require File.join(File.dirname(__FILE__), "/sass_extensions/functions")
--- a/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb
+++ b/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb
@@ -1,13 +0,0 @@
-module Bourbon::SassExtensions::Functions
-end
-
-require File.join(File.dirname(__FILE__), "/functions/compact")
-
-module Sass::Script::Functions
-  include Bourbon::SassExtensions::Functions::Compact
-end
-
-# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
-class Sass::Script::Functions::EvaluationContext
-  include Sass::Script::Functions
-end
--- a/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
+++ b/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
@@ -1,13 +0,0 @@
-# Compact function pulled from compass
-module Bourbon::SassExtensions::Functions::Compact
-
-  def compact(*args)
-    sep = :comma
-    if args.size == 1 && args.first.is_a?(Sass::Script::List)
-      args = args.first.value
-      sep = args.first.separator
-    end
-    Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
-  end
-
-end
--- a/common/static/sass/neat/_neat-helpers.scss
+++ b/common/static/sass/neat/_neat-helpers.scss
@@ -0,0 +1,8 @@
+// Functions
+@import "functions/private";
+@import "functions/new-breakpoint";
+@import "functions/px-to-em";
+
+// Settings
+@import "settings/grid";
+@import "settings/visual-grid";
--- a/common/static/sass/neat/_neat.scss
+++ b/common/static/sass/neat/_neat.scss
@@ -0,0 +1,21 @@
+// Bourbon Neat
+// MIT Licensed
+// Copyright (c) 2012-2013 thoughtbot, inc.
+
+// Helpers
+@import "neat-helpers";
+
+// Grid
+@import "grid/private";
+@import "grid/reset";
+@import "grid/grid";
+@import "grid/omega";
+@import "grid/outer-container";
+@import "grid/span-columns";
+@import "grid/row";
+@import "grid/shift";
+@import "grid/pad";
+@import "grid/fill-parent";
+@import "grid/media";
+@import "grid/to-deprecate";
+@import "grid/visual-grid";
--- a/common/static/sass/neat/functions/_new-breakpoint.scss
+++ b/common/static/sass/neat/functions/_new-breakpoint.scss
@@ -0,0 +1,16 @@
+@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+  @if length($query) == 1 {
+    $query: $default-feature nth($query, 1) $total-columns;
+  }
+
+  @else if length($query) == 2 or length($query) == 4 {
+    $query: append($query, $total-columns);
+  }
+
+  @if not belongs-to($query, $visual-grid-breakpoints) {
+    $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
+  }
+
+  @return $query;
+}
--- a/common/static/sass/neat/functions/_private.scss
+++ b/common/static/sass/neat/functions/_private.scss
@@ -0,0 +1,107 @@
+// Checks if a number is even
+@function is-even($int) {
+  @if $int%2 == 0   {
+    @return true;
+  }
+
+  @return false;
+}
+
+// Checks if an element belongs to a list
+@function belongs-to($tested-item, $list) {
+  @each $item in $list {
+    @if $item == $tested-item {
+      @return true;
+    }
+  }
+
+  @return false;
+}
+
+// Contains display value
+@function contains-display-value($query) {
+  @if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) {
+    @return true;
+  }
+
+  @return false;
+}
+
+// Parses the first argument of span-columns()
+@function container-span($span: $span) {
+  @if length($span) == 3 {
+    $container-columns: nth($span, 3);
+    @return $container-columns;
+  }
+
+  @else if length($span) == 2 {
+    $container-columns: nth($span, 2);
+    @return $container-columns;
+  }
+
+  @else {
+    @return $grid-columns;
+  }
+}
+
+// Generates a striped background
+@function gradient-stops($grid-columns, $color: $visual-grid-color) {
+  $transparent: rgba(0,0,0,0);
+
+  $column-width: flex-grid(1, $grid-columns);
+  $gutter-width: flex-gutter($grid-columns);
+  $column-offset: $column-width;
+
+  $values: ($transparent 0, $color 0);
+
+  @for $i from 1 to $grid-columns*2 {
+    @if is-even($i) {
+      $values: append($values, $transparent $column-offset);
+      $values: append($values, $color $column-offset);
+      $column-offset: $column-offset + $column-width;
+    }
+
+    @else {
+      $values: append($values, $color $column-offset);
+      $values: append($values, $transparent $column-offset);
+      $column-offset: $column-offset + $gutter-width;
+    }
+  }
+
+  @return $values;
+}
+
+// Layout direction
+@function get-direction($layout, $default) {
+  $direction: nil;
+  
+  @if $layout == LTR or $layout == RTL {
+    $direction: direction-from-layout($layout);
+  } @else {
+    $direction: direction-from-layout($default);
+  }
+
+  @return $direction;
+}
+
+@function direction-from-layout($layout) {
+  $direction: nil;
+
+  @if $layout == LTR {
+    $direction: right;
+  } @else {
+    $direction: left;
+  }
+
+  @return $direction;
+}
+
+@function get-opposite-direction($direction) {
+  $opposite-direction: left;
+
+  @if $direction == left {
+    $opposite-direction: right;
+  }
+
+  @return $opposite-direction;
+}
--- a/common/static/sass/neat/functions/_px-to-em.scss
+++ b/common/static/sass/neat/functions/_px-to-em.scss
@@ -0,0 +1,3 @@
+@function em($pxval, $base: 16) {
+  @return ($pxval / $base) * 1em;
+}
--- a/common/static/sass/neat/grid/_fill-parent.scss
+++ b/common/static/sass/neat/grid/_fill-parent.scss
@@ -0,0 +1,7 @@
+@mixin fill-parent() {
+  width: 100%;
+
+  @if $border-box-sizing == false {
+    @include box-sizing(border-box);
+  }
+}
--- a/common/static/sass/neat/grid/_grid.scss
+++ b/common/static/sass/neat/grid/_grid.scss
@@ -0,0 +1,5 @@
+@if $border-box-sizing == true {
+  * {
+    @include box-sizing(border-box);
+  }
+}
--- a/common/static/sass/neat/grid/_media.scss
+++ b/common/static/sass/neat/grid/_media.scss
@@ -0,0 +1,51 @@
+@mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+  @if length($query) == 1 {
+    @media screen and ($default-feature: nth($query, 1)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 2 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 3 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 3);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 4 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 5 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 5);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else {
+    @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
+  }
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`../../../common/static/sass/_mixins-inherited.scss`