diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss
deleted file mode 100644
index 82813153fa..0000000000
--- a/cms/static/sass/_mixins-inherited.scss
+++ /dev/null
@@ -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();
-  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);
-}
diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss
new file mode 120000
index 0000000000..f64a720561
--- /dev/null
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -0,0 +1 @@
+../../../common/static/sass/_mixins-inherited.scss
\ No newline at end of file
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 86e971dd09..c326c79b76 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -566,7 +566,7 @@ section.problem {
     }
 
     .save {
-      @extend .blue-button;
+      @extend .blue-button !optional;
     }
 
     .show {
diff --git a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
index 127ae7775c..78f0213c8d 100644
--- a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
+++ b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
@@ -577,7 +577,7 @@ section.open-ended-child {
     margin-top: 20px;
 
     input.save {
-      @extend .blue-button;
+      @extend .blue-button !optional;
     }
 
     .submission_feedback {
diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss
index ed601e0506..70beeae14c 100644
--- 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.
@@ -294,7 +328,7 @@ nav.sequence-bottom {
   text-align: center;
 
   ul {
-    @extend .clearfix;
+    @include clearfix();
     @include inline-block();
 
     li {
diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss
new file mode 100644
index 0000000000..82813153fa
--- /dev/null
+++ 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);
+}