Merge branch 'master' into feature/christina/metadata-ui

Conflicts: cms/static/sass/views/_static-pages.scss
2013-05-15 15:29:27 -04:00
parent 724678dd3e 14bf719538
commit d72b6b05bf
53 changed files with 1297 additions and 1121 deletions
--- a/cms/djangoapps/contentstore/features/checklists.py
+++ b/cms/djangoapps/contentstore/features/checklists.py
@@ -2,7 +2,7 @@
 #pylint: disable=W0621

 from lettuce import world, step
-from nose.tools import assert_true, assert_equal
+from nose.tools import assert_true, assert_equal, assert_in
 from terrain.steps import reload_the_page
 from selenium.common.exceptions import StaleElementReferenceException

@@ -63,7 +63,7 @@ def i_select_a_link_to_the_course_outline(step):

@step('I am brought to the course outline page$')
 def i_am_brought_to_course_outline(step):
-    assert_equal('Course Outline', world.css_find('.outline .title-1')[0].text)
+    assert_in('Course Outline', world.css_find('.outline .page-header')[0].text)
    assert_equal(1, len(world.browser.windows))


--- a/cms/djangoapps/contentstore/tests/test_contentstore.py
+++ b/cms/djangoapps/contentstore/tests/test_contentstore.py
@@ -646,7 +646,7 @@ class ContentStoreTest(ModuleStoreTestCase):
        resp = self.client.get(reverse('index'))
        self.assertContains(
            resp,
-            '<h1 class="title-1">My Courses</h1>',
+            '<h1 class="page-header">My Courses</h1>',
            status_code=200,
            html=True
        )
--- a/cms/djangoapps/contentstore/tests/test_i18n.py
+++ b/cms/djangoapps/contentstore/tests/test_i18n.py
@@ -48,7 +48,7 @@ class InternationalizationTest(ModuleStoreTestCase):

        resp = self.client.get(reverse('index'))
        self.assertContains(resp,
-                            '<h1 class="title-1">My Courses</h1>',
+                            '<h1 class="page-header">My Courses</h1>',
                            status_code=200,
                            html=True)

@@ -63,7 +63,7 @@ class InternationalizationTest(ModuleStoreTestCase):
                               )

        self.assertContains(resp,
-                            '<h1 class="title-1">My Courses</h1>',
+                            '<h1 class="page-header">My Courses</h1>',
                            status_code=200,
                            html=True)

--- a/cms/static/js/views/checklists_view.js
+++ b/cms/static/js/views/checklists_view.js
@@ -22,6 +22,7 @@ CMS.Views.Checklists = Backbone.View.extend({
                        }
                    );
                },
+                reset: true,
                error: CMS.ServerError
            }
        );
--- a/cms/static/js/views/course_info_edit.js
+++ b/cms/static/js/views/course_info_edit.js
@@ -160,11 +160,17 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
        var targetModel = this.eventModel(event);
        this.modelDom(event).remove();
        var cacheThis = this;
-        targetModel.destroy({success : function (model, response) {
-            cacheThis.collection.fetch({success : function() {cacheThis.render();},
-                error : CMS.ServerError});
-        },
-        error : CMS.ServerError
+        targetModel.destroy({
+            success: function (model, response) {
+                cacheThis.collection.fetch({
+                    success: function() {
+                        cacheThis.render();
+                    },
+                    reset: true,
+                    error: CMS.ServerError
+                });
+            },
+            error : CMS.ServerError
        });
    },

@@ -238,20 +244,19 @@ CMS.Views.ClassInfoHandoutsView = Backbone.View.extend({

    initialize: function() {
        var self = this;
-        this.model.fetch(
-            {
-                complete: function() {
-                    window.templateLoader.loadRemoteTemplate("course_info_handouts",
-                        "/static/client_templates/course_info_handouts.html",
-                        function (raw_template) {
-                            self.template = _.template(raw_template);
-                            self.render();
-                        }
-                    );
-                },
-                error : CMS.ServerError
-            }
-        );
+        this.model.fetch({
+            complete: function() {
+                window.templateLoader.loadRemoteTemplate("course_info_handouts",
+                    "/static/client_templates/course_info_handouts.html",
+                    function (raw_template) {
+                        self.template = _.template(raw_template);
+                        self.render();
+                    }
+                );
+            },
+            reset: true,
+            error: CMS.ServerError
+        });
    },

    render: function () {
--- a/cms/static/js/views/settings/advanced_view.js
+++ b/cms/static/js/views/settings/advanced_view.js
@@ -155,6 +155,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
        self.model.clear({silent : true});
        self.model.fetch({
            success : function() { self.render(); },
+            reset: true,
            error : CMS.ServerError
        });
    },
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -8,11 +8,10 @@ html {
 }

 body {
-  @include font-size(16);
+  @extend .t-copy-base;
  min-width: $fg-min-width;
  background: $gray-l5;
-  line-height: 1.6;
-  color: $baseFontColor;
+  color: $gray-d2;
 }

 body, input {
@@ -30,7 +29,7 @@ a {
 }

 h1 {
-  @include font-size(28);
+  @extend .t-title4;
  font-weight: 300;
 }

@@ -51,43 +50,183 @@ h1 {
 // ====================

 // typography - basic
-.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
+.page-header {
+  @extend .t-title3;
+  display: block;
  font-weight: 600;
  color: $gray-d3;
-  margin: 0;
-  padding: 0;
+
+  .subtitle {
+    @extend .t-title7;
+    position: relative;
+    top: ($baseline/4);
+    display: block;
+    color: $gray-l2;
+    font-weight: 400;
+  }
 }

+.section-header {
+  @extend .t-title4;
+  font-weight: 600;
+
+  .subtitle {
+    @extend .t-title7;
+  }
+}
+
+.area-header {
+  @extend .t-title6;
+  font-weight: 600;
+
+  .subtitle {
+    @extend .t-title8;
+  }
+}
+
+.area-subheader {
+  @extend .t-title7;
+  font-weight: 600;
+
+  .subtitle {
+    @extend .t-title9;
+  }
+}
+
+// ====================
+
+// typography - primary content
+.content-primary {
+
+  .section-header {
+    color: $gray-d3;
+
+    .subtitle {
+      color: $gray-l2;
+    }
+  }
+
+  .content-header {
+    color: $gray-d3;
+
+    .subtitle {
+      color: $gray-l2;
+    }
+  }
+
+  .area-header {
+    color: $gray-d3;
+
+    .subtitle {
+      color: $gray-l2;
+    }
+  }
+
+  .area-subheader {
+    color: $gray-d3;
+
+    .subtitle {
+      color: $gray-l2;
+    }
+  }
+}
+
+// typography - primary content
+.content-secondary {
+
+  .section-header {
+    color: $gray-d3;
+
+    .subtitle {
+      color: $gray-l2;
+    }
+  }
+
+  .content-header {
+    color: $gray-d3;
+
+    .subtitle {
+      color: $gray-l2;
+    }
+  }
+
+  .content-header {
+    color: $gray-d3;
+
+    .subtitle {
+      color: $gray-l2;
+    }
+  }
+}
+
+// ====================
+
+// typography - loose headings (BT: needs to be removed once html is clean)
+.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
+  font-weight: 600;
+}
+
+// typography - primary content
+.content-secondary {
+
+  .section-header {
+    color: $gray-d3;
+
+    .subtitle {
+      color: $gray-l2;
+    }
+  }
+
+  .content-header {
+    color: $gray-d3;
+
+    .subtitle {
+      color: $gray-l2;
+    }
+  }
+
+  .content-header {
+    color: $gray-d3;
+
+    .subtitle {
+      color: $gray-l2;
+    }
+  }
+}
+
+// ====================
+
+// typography - loose headings (BT: needs to be removed once html is clean)
 .title-1 {
-  @include font-size(32);
+  @extend .t-title3;
  margin-bottom: ($baseline*1.5);
 }

 .title-2 {
-  @include font-size(24);
+  @extend .t-title4;
  margin-bottom: $baseline;
 }

 .title-3 {
-  @include font-size(18);
+  @extend .t-title5;
  margin-bottom: ($baseline/2);
 }

 .title-4 {
-  @include font-size(14);
+  @extend .t-title7;
  margin-bottom: $baseline;
  font-weight: 500
 }

 .title-5 {
-  @include font-size(14);
+  @extend .t-title7;
  color: $gray-l1;
  margin-bottom: $baseline;
  font-weight: 500
 }

 .title-6 {
-  @include font-size(14);
+  @extend .t-title7;
  color: $gray-l2;
  margin-bottom: $baseline;
  font-weight: 500
@@ -118,7 +257,6 @@ p, ul, ol, dl {

  .mast, .metadata {
    @include clearfix();
-    @include font-size(16);
    position: relative;
    max-width: $fg-max-width;
    min-width: $fg-min-width;
@@ -131,53 +269,8 @@ p, ul, ol, dl {
    border-bottom: 1px solid $gray-l4;
    padding-bottom: ($baseline/2);

-    .title-sub {
-      @include font-size(14);
-      position: relative;
-      top: ($baseline/4);
-      display: block;
-      margin: 0;
-      color: $gray-l2;
-      font-weight: 400;
-    }
-
-    .title, .title-1 {
-      @include font-size(32);
-      margin: 0;
-      padding: 0;
-      font-weight: 600;
-      color: $gray-d3;
-    }
-
-    .nav-hierarchy {
-      @include font-size(14);
-      display: block;
-      margin: 0;
-      color: $gray-l2;
-      font-weight: 400;
-
-      .nav-item {
-        display: inline;
-        vertical-align: middle;
-        margin-right: ($baseline/4);
-
-        &:after {
-          content: ">>";
-          margin-left: ($baseline/4);
-        }
-
-        &:last-child {
-          margin-right: 0;
-
-          &:after {
-            content: none;
-          }
-        }
-      }
-    }
-
    // layout with actions
-    .title {
+    .page-header {
      width: flex-grid(12);
    }

@@ -185,7 +278,7 @@ p, ul, ol, dl {
    &.has-actions {
      @include clearfix();

-      .title {
+      .page-header {
        float: left;
        width: flex-grid(6,12);
        margin-right: flex-gutter();
@@ -210,22 +303,20 @@ p, ul, ol, dl {

        // buttons
        .button {
-          padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2) !important;
-          font-weight: 400 !important;
+          padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
        }

        .new-button {
-          font-weight: 700 !important;
+
        }

        .view-button {

-          font-weight: 700 !important;
        }

        .upload-button .icon-create {
-          @include font-size(18);
-          margin-top: ($baseline/4);
+          @extend .t-action2;
+          line-height: 0 !important;
        }
      }
    }
@@ -254,7 +345,7 @@ p, ul, ol, dl {

 .content {
  @include clearfix();
-  @include font-size(16);
+  @extend .t-copy-base;
  max-width: $fg-max-width;
  min-width: $fg-min-width;
  width: flex-grid(12);
@@ -268,14 +359,14 @@ p, ul, ol, dl {
    padding-bottom: ($baseline/2);

    .title-sub {
-      @include font-size(14);
+      @extend .t-copy-sub1;
      display: block;
      margin: 0;
      color: $gray-l2;
    }

    .title-1 {
-      @include font-size(32);
+      @extend .t-title3;
      margin: 0;
      padding: 0;
      font-weight: 600;
@@ -285,7 +376,7 @@ p, ul, ol, dl {

  .introduction {
    @include box-sizing(border-box);
-    @include font-size(14);
+    @extend .t-copy-sub1;
    width: flex-grid(12);
    margin: 0 0 $baseline 0;

@@ -303,14 +394,14 @@ p, ul, ol, dl {
      }

      .nav-introduction-supplementary {
-        @include font-size(13);
+        @extend .t-copy-sub2;
        float: right;
        width: flex-grid(4,12);
        display: block;
        text-align: right;

        .icon {
-          @include font-size(14);
+          @extend .t-action3;
          display: inline-block;
          vertical-align: middle;
          margin-right: ($baseline/4);
@@ -327,21 +418,17 @@ p, ul, ol, dl {
 // layout - primary content
 .content-primary {

-  .title-1, .title-2, .title-3, .title-4, .title-5, .title-5 {
-    color: $gray-d3;
-  }
-
  .title-1 {
-    @extend .t-title-1;
+    @extend .t-title3;
  }

  .title-2 {
-    @extend .t-title-2;
+    @extend .t-title4;
    margin: 0 0 ($baseline/2) 0;
  }

  .title-3 {
-    @extend .t-title-3;
+    @extend .t-title6;
    margin: 0 0 ($baseline/2) 0;
  }

@@ -355,7 +442,7 @@ p, ul, ol, dl {
    }

    .tip {
-      @include font-size(13);
+      @extend .t-copy-sub2;
      width: flex-grid(7, 12);
      float: right;
      margin-top: ($baseline/2);
@@ -373,7 +460,7 @@ p, ul, ol, dl {
  }

  .bit {
-    @include font-size(13);
+    @extend .t-copy-sub1;
    margin: 0 0 $baseline 0;
    border-bottom: 1px solid $gray-l4;
    padding: 0 0 $baseline 0;
@@ -386,7 +473,7 @@ p, ul, ol, dl {
    }

    h3 {
-      @include font-size(14);
+      @extend .t-title7;
      margin: 0 0 ($baseline/4) 0;
      color: $gray-d2;
      font-weight: 600;
@@ -494,7 +581,7 @@ p, ul, ol, dl {

 // misc
 hr.divide {
-  @include text-sr();
+  @extend .text-sr;
 }

 .item-details {
@@ -655,7 +742,7 @@ hr.divide {

 .new-button {
  @include green-button;
-  @include font-size(13);
+  @extend .t-action4;
  padding: 8px 20px 10px;
  text-align: center;

@@ -674,7 +761,7 @@ hr.divide {

 .view-button {
  @include blue-button;
-  @include font-size(13);
+  @extend .t-copy-base;
  text-align: center;

  &.big {
@@ -693,7 +780,7 @@ hr.divide {

 .edit-button.standard,
 .delete-button.standard {
-  @include font-size(12);
+  @extend .t-action4;
  @include white-button;
  float: left;
  padding: 3px 10px 4px;
@@ -714,6 +801,7 @@ hr.divide {
 }

 .tooltip {
+  @extend .t-copy-sub2;
  position: absolute;
  top: 0;
  left: 0;
@@ -721,7 +809,6 @@ hr.divide {
  padding: 0 10px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.85);
-  font-size: 11px;
  font-weight: normal;
  line-height: 26px;
  color: #fff;
@@ -745,7 +832,7 @@ hr.divide {

 // basic utility
 .sr {
-  @include text-sr();
+  @extend .text-sr;
 }

 .fake-link {
@@ -798,7 +885,7 @@ body.js {
      text-align: center;

      .label {
-        @include text-sr();
+        @extend .text-sr;
      }

      .ss-icon {
@@ -821,14 +908,14 @@ body.js {
    }

    .title {
-      @include font-size(18);
+      @extend .t-title5;
      margin: 0 0 ($baseline/2) 0;
      font-weight: 600;
      color: $gray-d3;
    }

    .description {
-      @include font-size(13);
+      @extend .t-copy-sub2;
      margin-top: ($baseline/2);
      color: $gray-l1;
    }
--- a/cms/static/sass/_cms_mixins.scss
+++ b/cms/static/sass/_cms_mixins.scss
@@ -1,437 +0,0 @@
-// studio - utilities - mixins and extends
-// ====================
-
-// mixins - utility
-@mixin clearfix {
-	&:after {
-		content: '';
-		display: block;
-		height: 0;
-		visibility: hidden;
-		clear: both;
-	}
-}
-
-// mixins - grandfathered
-@mixin button {
-	display: inline-block;
-	padding: ($baseline/5) $baseline ($baseline/4);
-	@include font-size(14);
-	font-weight: 700;
-	@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);
-
-	&.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;
-	border: 1px solid $green-d1;
-	border-radius: 3px;
-	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-	background-color: $green;
-	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-	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;
-	border: 1px solid $blue-d1;
-	border-radius: 3px;
-	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-	background-color: $blue;
-	color: $white;
-
-	&:hover, &.active {
-		background-color: $blue-s2;
-		color: $white;
-	}
-
-	&.disabled {
-		border: 1px solid $blue-l3 !important;
-		background: $blue-l3 !important;
-		color: $white !important;
-		@include box-shadow(none);
-	}
-}
-
-@mixin red-button {
-	@include button;
-	border: 1px solid $red-d1;
-	border-radius: 3px;
-	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-	background-color: $red;
-	color: $white;
-
-	&:hover, &.active {
-		background-color: $red-s1;
-		color: $white;
-	}
-
-	&.disabled {
-		border: 1px solid $red-l3 !important;
-		background: $red-l3 !important;
-		color: $white !important;
-		@include box-shadow(none);
-	}
-}
-
-@mixin pink-button {
-	@include button;
-	border: 1px solid $pink-d1;
-	border-radius: 3px;
-	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-	background-color: $pink;
-	color: $white;
-
-	&:hover, &.active {
-		background-color: $pink-s1;
-		color: $white;
-	}
-
-	&.disabled {
-		border: 1px solid $pink-l3 !important;
-		background: $pink-l3 !important;
-		color: $white !important;
-		@include box-shadow(none);
-	}
-}
-
-@mixin orange-button {
-	@include button;
-	border: 1px solid $orange-d1;
-	border-radius: 3px;
-	@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
-	background-color: $orange;
-	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-	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;
-  border: 1px solid $mediumGrey;
-  border-radius: 3px;
-  @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-  background-color: #dfe5eb;
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-  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;
-	border: 1px solid $gray-d2;
-	border-radius: 3px;
-	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-	background-color: #d1dae3;
-	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-	color: #6d788b;
-
-	&:hover {
-		background-color: #d9e3ee;
-		color: #6d788b;
-	}
-}
-
-@mixin gray-button {
-	@include button;
-	border: 1px solid $gray-d1;
-	border-radius: 3px;
-	@include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
-	background-color: $gray-d2;
-	@include box-shadow(0 1px 0 $white-t1 inset);
-	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 {
-	padding: 15px 20px;
-	border-radius: 3px;
-	background-color: $lightBluishGrey2;
-	color: #3c3c3c;
-	@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
-
-	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));
-	background-color: rgba(255, 255, 255, .3);
-	@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-}
-
-// ====================
-
-// 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);
-  display: inline-block;
-  cursor: pointer;
-
-  &:hover, &:active {
-
-  }
-
-  &.disabled, &[disabled] {
-    cursor: default;
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  .icon-inline {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: ($baseline/4);
-  }
-}
-
-// pill button
-.btn-pill {
-	@include border-radius($baseline/5);
-}
-
-.btn-rounded {
-	@include border-radius($baseline/2);
-}
-
-// primary button
-.btn-primary {
-  @extend .btn;
-  @extend .btn-pill;
-  padding:($baseline/2) $baseline;
-  border-width: 1px;
-  border-style: solid;
-  line-height: 1.5em;
-  text-align: center;
-
-  &:hover, &:active {
-    @include box-shadow(0 2px 1px $shadow-l1);
-  }
-
-  &.current, &.active {
-  	@include box-shadow(inset 1px 1px 2px $shadow-d1);
-
-  	&:hover, &:active {
-  		@include box-shadow(inset 1px 1px 1px $shadow-d1);
-  	}
-  }
-}
-
-// secondary button
-.btn-secondary {
-	@extend .btn;
-	@extend .btn-pill;
-	border-width: 1px;
-  border-style: solid;
-	padding:($baseline/2) $baseline;
-  background: transparent;
-  line-height: 1.5em;
-  text-align: center;
-
-	&:hover, &:active {
-
-	}
-
-	&.current, &.active {
-
-	}
-}
-
-// ====================
-
-// extends - depth levels
-.depth0 { z-index: 0; }
-.depth1 { z-index: 10; }
-.depth2 { z-index: 100; }
-.depth3 { z-index: 1000; }
-.depth4 { z-index: 10000; }
-.depth5 { z-index: 100000; }
--- a/cms/static/sass/_mixins-inherited.scss
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -0,0 +1,448 @@
+// 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
+// ====================
+
+// 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/_reset.scss
+++ b/cms/static/sass/_reset.scss
@@ -6,6 +6,11 @@
 // 	@include box-sizing(border-box);
 // }

+// better text rendering/kerning through SVG
+* {
+	text-rendering: optimizeLegibility;
+}
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -15,7 +20,7 @@ b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure, 
+article, aside, canvas, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section, summary,
 time, mark, audio, video {
 	margin: 0;
@@ -31,7 +36,7 @@ html,body {
  height: 100%;
 }

-article, aside, details, figcaption, figure, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
@@ -110,7 +115,7 @@ abbr[title] {
 	border: none;
 	top: 0;
 	margin: 0;
-	float: none; 
+	float: none;
 	border-top-left-radius: 0;
 	border-top-right-radius: 0;
 }
@@ -131,7 +136,7 @@ abbr[title] {
 	padding: 0;
 }

-// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling 
+// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
 .problem-type-tabs {
 	border:none;
 	list-style-type: none;
@@ -139,7 +144,7 @@ abbr[title] {
 	@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);
-	
+
 	li:first-child {
 		margin-left: 20px;
 	}
@@ -156,4 +161,4 @@ abbr[title] {
 			border: 0px;
 		}
 	}
-}
+}
--- a/cms/static/sass/_shame.scss
+++ b/cms/static/sass/_shame.scss
@@ -0,0 +1,3 @@
+// studio - shame
+// // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
+// ====================
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -12,9 +12,15 @@ $fg-max-columns: 12;
 $fg-max-width: 1280px;
 $fg-min-width: 900px;

-// type
-$sans-serif: 'Open Sans', $verdana;
-$body-line-height: golden-ratio(.875em, 1);
+// ====================
+
+// fonts
+$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
+$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
+$f-decorative: '';
+$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
+
+// ====================

 // colors - new for re-org
 $black: rgb(0,0,0);
@@ -152,11 +158,14 @@ $shadow-l1: rgba(0,0,0,0.1);
 $shadow-l2: rgba(0,0,0,0.05);
 $shadow-d1: rgba(0,0,0,0.4);

+// ====================

 // specific UI
 $notification-height: ($baseline*10);

-// colors - inherited 
+// ====================
+
+// inherited
 $baseFontColor: $gray-d2;
 $offBlack: #3c3c3c;
 $green: #108614;
@@ -173,3 +182,8 @@ $darkGreen: rgb(52, 133, 76);
 $lightBluishGrey: rgb(197, 207, 223);
 $lightBluishGrey2: rgb(213, 220, 228);
 $error-red: rgb(253, 87, 87);
+
+// type
+$sans-serif: $f-serif;
+$body-line-height: golden-ratio(.875em, 1);
+
--- a/cms/static/sass/assets/_keyframes.scss
+++ b/cms/static/sass/assets/_keyframes.scss
@@ -94,7 +94,7 @@

 // notifications slide up then down
@mixin notificationsSlideUpDown {
-  0%, 100% { 
+  0%, 100% {
    @include transform(translateY(0));
  }

@@ -199,4 +199,4 @@
  @include animation-timing-function($timing);
  @include animation-iteration-count($count);
  @include animation-fill-mode(both);
-}
+}
--- a/cms/static/sass/assets/_fonts.scss
+++ b/cms/static/sass/assets/_fonts.scss
@@ -1,36 +1,8 @@
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format('woff');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 300;
-  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
-}
+// studio - assets - fonts
+// ====================
+
+// import from google fonts - Open Sans
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300);
+
+// import from google fonts - Bree
+@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
--- a/cms/static/sass/base-style.scss
+++ b/cms/static/sass/base-style.scss
@@ -1,41 +1,48 @@
 // studio - css architecture
 // ====================

-// bourbon libs and resets
-@import 'bourbon/bourbon';
-@import 'bourbon/addons/button';
-@import "variables";
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'bourbon/addons/button'; // lib bourbon - button add-on
+
+
+// VENDOR + REBASE *referenced/used vendor presentation and reset*
+// ====================
@import 'vendor/normalize';
@import 'reset';

-// utilities
+
+// BASE  *default edX offerings*
+// ====================
+// base - utilities
@import 'variables';
@import 'mixins';
-@import 'cms_mixins';
+@import 'mixins-inherited';

-// assets
+// base - assets
@import 'assets/fonts';
-@import 'assets/graphics';
-@import 'assets/keyframes';
+@import 'assets/graphics'; // sprites, basic img/figure/svg styling
+@import 'assets/anims'; // animations

-// base
+// base - starter
@import 'base';

-// elements
+// base - elements
@import 'elements/typography';
-@import 'elements/icons';
-@import 'elements/controls';
-@import 'elements/navigation';
+@import 'elements/icons'; // references to icons used
+@import 'elements/controls'; // buttons, link styles, sliders, etc.
+@import 'elements/navigation'; // all archetypes of navigation
+@import 'elements/forms';
@import 'elements/header';
@import 'elements/footer';
@import 'elements/sock';
-@import 'elements/forms';
-@import 'elements/modal';
-@import 'elements/alerts';
-@import 'elements/vendor';
@import 'elements/tender-widget';
+@import 'elements/system-feedback'; // alerts, notifications, states
+@import 'elements/system-help'; // help UI
+@import 'elements/modal'; // interstitial UI, dialogs, modal windows
+@import 'elements/vendor'; // overrides to vendor-provided styling

-// specific views
+// base - specific views
@import 'views/account';
@import 'views/assets';
@import 'views/updates';
@@ -51,8 +58,12 @@
@import 'views/users';
@import 'views/checklists';

+// temp - inherited
@import 'assets/content-types';

-// xblock-related
+// xmodule
@import 'xmodule/modules/css/module-styles.scss';
@import 'xmodule/descriptors/css/module-styles.scss';
+
+
+@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -141,3 +141,9 @@

 // calls-to-action

+// ====================
+
+// specific buttons - view live
+.view-live-button {
+  @extend .t-action4;
+}
--- a/cms/static/sass/elements/_footer.scss
+++ b/cms/static/sass/elements/_footer.scss
@@ -8,8 +8,8 @@
  padding: $baseline;

  footer.primary {
+    @extend .t-copy-sub2;
    @include clearfix();
-    @include font-size(13);
    max-width: $fg-max-width;
    min-width: $fg-min-width;
    width: flex-grid(12);
@@ -72,4 +72,4 @@
      }
    }
  }
-}
+}
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -2,6 +2,7 @@
 // ====================

 .wrapper-header {
+  @extend .depth3;
  margin: 0;
  padding: $baseline;
  border-bottom: 1px solid $gray;
@@ -10,7 +11,6 @@
  height: 76px;
  position: relative;
  width: 100%;
-  z-index: 1000;

  a {
    color: $baseFontColor;
@@ -67,7 +67,7 @@
  padding-right: ($baseline*0.75);

  a {
-    @include text-hide();
+    @extend .text-hide;
    display: block;
    width: 164px;
    height: 32px;
@@ -146,7 +146,7 @@

    .title {
      display: block;
-      padding: 5px;
+      padding: 0 ($baseline/4);
      text-transform: uppercase;
      font-weight: 600;
      color: $gray-d3;
@@ -516,21 +516,21 @@ body.signup .nav-not-signedin-signin {

  a {
    background-color: #d9e3ee;
-    color: #6d788b;    
+    color: #6d788b;
  }
 }

 body.signin .nav-not-signedin-signup {
-  
+
  a {
    background-color: #62aaf5;
-    color: #fff;    
+    color: #fff;
  }
 }

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

-// STATE: js enabled 
+// STATE: js enabled
 .js {

  .nav-dropdown {
@@ -559,4 +559,4 @@ body.signin .nav-not-signedin-signup {
      pointer-events: auto;
    }
  }
-}
+}
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -2,6 +2,19 @@
 // ====================

 // common
+nav {
+
+  ol, ul {
+    @extend .no-list;
+  }
+
+  .nav-item {
+
+    a {
+
+    }
+  }
+}

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

@@ -21,4 +34,4 @@

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

-// 
+//
--- a/cms/static/sass/elements/_sock.scss
+++ b/cms/static/sass/elements/_sock.scss
@@ -28,13 +28,13 @@

    .cta-show-sock {
      @extend .btn-pill;
-      @extend .t-action3;
+      @extend .t-action4;
      background: $gray-l5;
      padding: ($baseline/2) $baseline;
      color: $gray;

      .icon {
-        @include font-size(16);
+        @include font-size(14);
      }

      &:hover {
@@ -59,7 +59,7 @@
    header {

      .title {
-        @extend .t-title-2;
+        @extend .t-title4;
      }

      .ss-icon {
@@ -73,12 +73,13 @@
      @include box-sizing(border-box);

      .title {
-        @extend .t-title-3;
+        @extend .t-title6;
        color: $white;
        margin-bottom: ($baseline/2);
      }

      .copy {
+        @extend .t-copy-sub2;
        margin: 0 0 $baseline 0;
      }

@@ -94,6 +95,7 @@
          }

          .action {
+            @extend .t-action4;
            display: block;

            .icon {
@@ -149,4 +151,4 @@
      color: $white;
    }
  }
-}
+}
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -1,4 +1,5 @@
-// studio alerts, prompts and notifications
+// studio - elements - system feedback
+// alerts, notifications, prompts, and status communication
 // ====================

 // shared
@@ -6,7 +7,7 @@
  @include box-sizing(border-box);

  .copy {
-    @extend .t-copy-sub2;
+    @extend .t-copy-sub1;
  }
 }

@@ -36,6 +37,7 @@

    .nav-actions .action-primary {
      @include blue-button();
+      @include font-size(12); // needed due to bad button mixins for now
      border-color: $blue-d2;
    }

@@ -53,6 +55,7 @@

    .nav-actions .action-primary {
      @include orange-button();
+      @include font-size(12); // needed due to bad button mixins for now
      border-color: $orange-d2;
      color: $gray-d4;
    }
@@ -71,6 +74,7 @@

    .nav-actions .action-primary {
      @include red-button();
+      @include font-size(12); // needed due to bad button mixins for now
      border-color: $red-d2;
    }

@@ -88,6 +92,7 @@

    .nav-actions .action-primary {
      @include blue-button();
+      @include font-size(12); // needed due to bad button mixins for now
      border-color: $blue-d2;
    }

@@ -105,6 +110,7 @@

    .nav-actions .action-primary {
      @include green-button();
+      @include font-size(12); // needed due to bad button mixins for now
      border-color: $green-d2;
    }

@@ -121,8 +127,9 @@
  &.step-required {

    .nav-actions .action-primary {
-      border-color: $pink-d2;
      @include pink-button();
+      @include font-size(12); // needed due to bad button mixins for now
+      border-color: $pink-d2;
    }

    a {
@@ -137,6 +144,7 @@

 // prompts
 .wrapper-prompt {
+  @extend .depth4;
  @include transition(all 0.05s ease-in-out);
  position: fixed;
  top: 0;
@@ -144,7 +152,6 @@
  width: 100%;
  height: 100%;
  text-align: center;
-  z-index: 10000;

  &:before {
    content: '';
@@ -184,12 +191,12 @@
      }

      .action-primary {
-        @extend .t-action3;
+        @extend .t-action4;
        font-weight: 600;
      }

      .action-secondary {
-        @extend .t-action3;
+        @extend .t-action4;
      }
    }
  }
@@ -235,11 +242,11 @@

 // notifications
 .wrapper-notification {
+  @extend .depth3;
  @include clearfix();
  @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue);
  position: fixed;
  bottom: 0;
-  z-index: 1000;
  width: 100%;
  padding: $baseline ($baseline*2);

@@ -361,18 +368,19 @@
    @include font-size(22);
    width: flex-grid(1, 12);
    height: ($baseline*1.25);
+    margin-top: ($baseline/4);
    margin-right: flex-gutter();
    text-align: right;
    color: $white;
  }

  .copy {
-    @extend .t-copy-sub2;
+    @extend .t-copy-sub1;
    width: flex-grid(10, 12);
    color: $gray-l2;

    .title {
-      @extend .t-title-4;
+      @extend .t-title7;
      margin-bottom: 0;
      color: $white;
    }
@@ -409,13 +417,13 @@

    .action-primary {
      @include blue-button();
-      @extend .t-action3;
      border-color: $blue-d2;
      font-weight: 600;
    }

    .action-secondary {
-      @extend .t-action3;
+
+      @extend .t-action4;
    }
  }

@@ -434,7 +442,7 @@
    }

    .copy p {
-      @include text-sr();
+      @extend .text-sr;
    }
  }
 }
@@ -443,10 +451,10 @@

 // alerts
 .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);
  position: relative;
-  z-index: 100;
  overflow: hidden;
  width: 100%;
  border-top: 1px solid $black;
@@ -504,7 +512,6 @@

 // adopted alerts
 .alert {
-  @extend .t-copy-sub2;
  @include box-sizing(border-box);
  @include clearfix();
  margin: 0 auto;
@@ -530,11 +537,11 @@
  }

  .copy {
-    @extend .t-copy-sub2;
    width: flex-grid(10, 12);
    color: $gray-l2;

    .title {
+      @extend .t-title7;
      margin-bottom: 0;
      color: $white;
    }
@@ -568,12 +575,12 @@
  	    }

        .action-primary {
-          @extend .t-action3;
+          @extend .t-action4;
          font-weight: 600;
        }

        .action-secondary {
-          @extend .t-action3;
+          @extend .t-action4;
        }
  	  }
  	}
@@ -590,7 +597,7 @@
    text-align: center;

    .label {
-      @include text-sr();
+      @extend .text-sr;
    }

    .icon {
@@ -730,7 +737,7 @@ body.uxdesign.alerts {
    border-radius: 3px;
    background: #fbf6e1;
    // background: #edbd3c;
-    @extend .t-copy-sub1;
+    font-size: 14px;
    @include clearfix;

    .alert-message {
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -0,0 +1,2 @@
+// studio - elements - system help
+// ====================
--- a/cms/static/sass/elements/_typography.scss
+++ b/cms/static/sass/elements/_typography.scss
@@ -1,80 +1,132 @@
 // studio - elements - typography
 // ====================

+// Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
+
 // headings/titles
-.t-title-1, .t-title-2, .t-title-3, .t-title-4, .t-title-5 {
-  color: $gray-d3;
+.t-title {
+  font-family: $f-sans-serif;
 }

-.t-title-1 {
+.t-title1 {
+  @extend .t-title;
+  @include font-size(60);
+  @include lh(60);
+}
+
+.t-title2 {
+  @extend .t-title;
+  @include font-size(48);
+  @include lh(48);
+}
+
+.t-title3 {
  @include font-size(36);
+  @include lh(36);
 }

-.t-title-2 {
+.t-title4 {
+  @extend .t-title;
  @include font-size(24);
-  font-weight: 600;
+  @include lh(24);
 }

-.t-title-3 {
+.t-title5 {
+  @extend .t-title;
+  @include font-size(18);
+  @include lh(18);
+}
+
+.t-title6 {
+  @extend .t-title;
  @include font-size(16);
-  font-weight: 600;
+  @include lh(16);
 }

-.t-title-4 {
+.t-title7 {
+  @extend .t-title;
  @include font-size(14);
+  @include lh(14);
 }

-.t-title-5 {
+.t-title8 {
+  @extend .t-title;
+  @include font-size(12);
+  @include lh(12);
+}

+.t-title9 {
+  @extend .t-title;
+  @include font-size(11);
+  @include lh(11);
 }

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

 // copy
+.t-copy {
+  font-family: $f-sans-serif;
+}
+
 .t-copy-base {
+  @extend .t-copy;
  @include font-size(16);
+  @include lh(16);
 }

 .t-copy-lead1 {
+  @extend .t-copy;
  @include font-size(18);
+  @include lh(18);
 }

 .t-copy-lead2 {
-  @include font-size(20);
+  @extend .t-copy;
+  @include font-size(24);
+  @include lh(24);
 }

 .t-copy-sub1 {
+  @extend .t-copy;
  @include font-size(14);
+  @include lh(14);
 }

 .t-copy-sub2 {
-  @include font-size(13);
-}
-
-.t-copy-sub3 {
+  @extend .t-copy;
  @include font-size(12);
+  @include lh(12);
 }

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

 // actions/labels
 .t-action1 {
-  @include font-size(14);
-  font-weight: 600;
+  @include font-size(18);
+  @include lh(18);
 }

 .t-action2 {
-  @include font-size(13);
-  font-weight: 600;
-  text-transform: uppercase;
+  @include font-size(16);
+  @include lh(16);
 }

 .t-action3 {
-  @include font-size(13);
+  @include font-size(14);
+  @include lh(14);
 }

 .t-action4 {
  @include font-size(12);
+  @include lh(12);
+}
+
+
+// ====================
+
+// code
+.t-code {
+  font-family: $f-monospace;
 }

 // ====================
--- a/cms/static/sass/elements/_vendor.scss
+++ b/cms/static/sass/elements/_vendor.scss
@@ -6,7 +6,7 @@
  border-color: $darkGrey;
  border-radius: 2px;
  background: #fff;
-  font-family: $sans-serif;
+  font-family: $f-sans-serif;
  font-size: 12px;
  @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
  z-index: 100000 !important;
@@ -62,4 +62,4 @@
 // JQUI timepicker
 .ui-timepicker-list {
  z-index: 100000 !important;
-}
+}
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -12,7 +12,7 @@ body.signup, body.signin {

  .content {
    @include clearfix();
-    @include font-size(16);
+    @extend .t-copy-base;
    max-width: $fg-max-width;
    min-width: $fg-min-width;
    width: flex-grid(12);
@@ -26,14 +26,14 @@ body.signup, body.signin {
      padding-bottom: ($baseline/2);

      h1 {
-        @include font-size(32);
+        @extend .t-title3;
        margin: 0;
        padding: 0;
        font-weight: 600;
      }

      .action {
-        @include font-size(13);
+        @extend .t-action3;
        position: absolute;
        right: 0;
        top: 40%;
@@ -41,7 +41,7 @@ body.signup, body.signin {
    }

    .introduction {
-      @include font-size(14);
+      @extend .t-copy-sub1;
      margin: 0 0 $baseline 0;
    }
  }
@@ -69,8 +69,8 @@ body.signup, body.signin {

        .action-primary {
          @include blue-button;
+          @extend .t-action2;
          @include transition(all .15s);
-          @include font-size(15);
          display: block;
          width: 100%;
          padding: ($baseline*0.75) ($baseline/2);
@@ -108,7 +108,7 @@ body.signup, body.signin {
          }

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

@@ -118,7 +118,7 @@ body.signup, body.signin {
          }

          input, textarea {
-            @include font-size(16);
+            @extend .t-copy-base;
            height: 100%;
            width: 100%;
            padding: ($baseline/2);
@@ -171,8 +171,8 @@ body.signup, body.signin {
          }

          .tip {
+            @extend .t-copy-sub2;
            @include transition(color, 0.15s, ease-in-out);
-            @include font-size(13);
            display: block;
            margin-top: ($baseline/4);
            color: $gray-l3;
@@ -212,7 +212,7 @@ body.signup, body.signin {
    width: flex-grid(4, 12);

    .bit {
-      @include font-size(13);
+      @extend .t-copy-sub1;
      margin: 0 0 $baseline 0;
      border-bottom: 1px solid $gray-l4;
      padding: 0 0 $baseline 0;
@@ -225,7 +225,7 @@ body.signup, body.signin {
      }

      h3 {
-        @include font-size(14);
+        @extend .t-title7;
        margin: 0 0 ($baseline/4) 0;
        color: $gray-d2;
        font-weight: 600;
@@ -245,7 +245,7 @@ body.signup, body.signin {
    position: relative;

    .action-forgotpassword {
-      @include font-size(13);
+      @extend .t-action3;
      position: absolute;
      top: 0;
      right: 0;
@@ -257,7 +257,7 @@ body.signup, body.signin {

 // messages
 .message {
-  @include font-size(14);
+  @extend .t-copy-sub1;
  display: block;
 }

--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -23,7 +23,7 @@ body.course.checklists {

    // visual status
    .viz-checklist-status {
-      @include text-hide();
+      @extend .text-hide;
      @include size(100%,($baseline/4));
      position: relative;
      display: block;
@@ -40,7 +40,7 @@ body.course.checklists {
        background: $green;

        .int {
-          @include text-sr();
+          @extend .text-sr;
        }
      }
    }
@@ -83,13 +83,13 @@ body.course.checklists {
      }

      .checklist-status {
-        @include font-size(13);
+        @extend .t-copy-sub1;
        width: flex-grid(3, 9);
        float: right;
        margin-top: ($baseline/2);
        text-align: right;
        color: $gray-l2;
-        
+

        .icon-confirm {
          @include font-size(20);
@@ -100,7 +100,7 @@ body.course.checklists {
        }

        .status-count {
-          @include font-size(16);
+          @extend .t-copy-base;
          margin-left: ($baseline/4);
          margin-right: ($baseline/4);
          color: $gray-d3;
@@ -108,7 +108,7 @@ body.course.checklists {
        }

        .status-amount {
-          @include font-size(16);
+          @extend .t-copy-base;
          margin-left: ($baseline/4);
          color: $gray-d3;
          font-weight: 600;
@@ -138,8 +138,8 @@ body.course.checklists {
      }

      .action-secondary {
-        @include font-size(14);
        @include grey-button();
+        @extend .t-action3;
        font-weight: 400;
        float: right;

@@ -174,7 +174,7 @@ body.course.checklists {

    // state - completed
    &.is-completed {
-      
+
      .viz-checklist-status {

        .viz-checklist-status-value {
@@ -189,9 +189,9 @@ body.course.checklists {
        }

        .checklist-status {
-          
+
          .status-count, .status-amount, .icon-confirm {
-            color: $green;          
+            color: $green;
          }
        }
      }
@@ -244,17 +244,17 @@ body.course.checklists {
          vertical-align: baseline;
          cursor: pointer;
          margin-bottom: 0;
-        }   
+        }

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

        .task-support {
+          @extend .t-copy-sub2;
          @include transition(opacity .15s .25s ease-in-out);
-          @include font-size(12);
          opacity: 0;
          pointer-events: none;
        }
@@ -274,14 +274,14 @@ body.course.checklists {

        .action-primary {
          @include blue-button;
+          @extend .t-action4;
          @include transition(all .15s);
-          @include font-size(12);
          font-weight: 600;
          text-align: center;
        }

        .action-secondary {
-          @include font-size(13);
+          @extend .t-action4;
          margin-top: ($baseline/2);
        }
      }
@@ -322,7 +322,7 @@ body.course.checklists {

          .action-primary {
            @include grey-button;
-            @include font-size(12);
+            @extend .t-action4;
            font-weight: 600;
            text-align: center;
          }
@@ -344,4 +344,4 @@ body.course.checklists {
  .content-supplementary {
    width: flex-grid(3, 12);
  }
-}
+}
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -18,14 +18,14 @@ body.index {
    }

    .content {
+      @extend .t-copy-base;
      @include clearfix();
-      @include font-size(16);
      max-width: $fg-max-width;
      min-width: $fg-min-width;
      width: flex-grid(12);
      margin: 0 auto;
      color: $gray-d2;
-    
+
      header {
        border: none;
        padding-bottom: 0;
@@ -62,7 +62,7 @@ body.index {
      color: $white;

      h1 {
-        @include font-size(52);
+        @extend .t-title2;
        float: none;
        margin: 0 0 ($baseline/2) 0;
        border-bottom: 1px solid $blue-l1;
@@ -72,7 +72,7 @@ body.index {
      }

      .logo {
-        @include text-hide();
+        @extend .text-hide;
        position: relative;
        top: 3px;
        display: inline-block;
@@ -83,7 +83,7 @@ body.index {
      }

      .tagline {
-        @include font-size(24);
+        @extend .t-title4;
        margin: 0;
        color: $blue-l3;
      }
@@ -198,13 +198,13 @@ body.index {
          margin-top: -($baseline/4);

          h3 {
+            @extend .t-title4;
            margin: 0 0 ($baseline/2) 0;
-            @include font-size(24);
            font-weight: 600;
          }

          > p {
-            @include font-size(18);
+            @extend .t-copy-lead1;
            color: $gray-d1;
          }

@@ -214,8 +214,8 @@ body.index {
          }

          .list-proofpoints {
+            @extend .t-copy-sub1;
            @include clearfix();
-            @include font-size(14);
            width: flex-grid(9, 9);
            margin: ($baseline*1.5) 0 0 0;

@@ -233,7 +233,7 @@ body.index {
              color: $gray-l1;

              .title {
-                @include font-size(16);
+                @extend .t-copy-base;
                margin: 0 0 ($baseline/4) 0;
                font-weight: 500;
                color: $gray-d3;
@@ -314,7 +314,7 @@ body.index {
        margin-top: -($baseline*1.5);

        li {
-          width: flex-grid(6, 12); 
+          width: flex-grid(6, 12);
          margin: 0 auto;
        }

@@ -322,23 +322,23 @@ body.index {
          display: block;
          width: 100%;
          text-align: center;
-        }

-        .action-primary {
-          @include blue-button;
-          @include transition(all .15s);
-          @include font-size(18);
-          padding: ($baseline*0.75) ($baseline/2);
-          font-weight: 600;
-          text-align: center;
-          text-transform: uppercase;
-        }
+          &.action-primary {
+            @extend .t-action1;
+            @include blue-button;
+            @include transition(all .15s);
+            padding: ($baseline*0.75) ($baseline/2);
+            font-weight: 600;
+            text-align: center;
+            text-transform: uppercase;
+          }

-        .action-secondary {
-          @include font-size(14);
-          margin-top: ($baseline/2);
+          &.action-secondary {
+            @extend .t-action3;
+            margin-top: ($baseline/2);
+          }
        }
      }
    }
  }
-}
+}
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -29,6 +29,7 @@ body.course.outline {
          width: 100px;

          .status-label {
+            @include font-size(12);
            position: absolute;
            top: 2px;
            right: -5px;
@@ -38,7 +39,6 @@ body.course.outline {
            @include border-radius(3px);
            color: $lightGrey;
            text-align: right;
-            font-size: 12px;
            font-weight: bold;
            line-height: 16px;
          }
@@ -57,6 +57,10 @@ 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);
                z-index: 1;
                display: none;
                opacity: 0.0;
@@ -67,10 +71,6 @@ body.course.outline {
                padding: 8px 12px;
                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);


                li {
@@ -167,7 +167,7 @@ body.course.outline {
          text-align: right;

          .published-status {
-              font-size: 12px;
+              @include font-size(12);
              margin-right: 15px;

              strong {
@@ -185,19 +185,19 @@ body.course.outline {

          .schedule-button,
          .edit-button {
-              font-size: 11px;
+              @include font-size(11);
              padding: 3px 15px 5px;
          }
      }

      .datepair .date,
      .datepair .time {
+          @include font-size(13);
+          @include box-shadow(none);
          padding-left: 0;
          padding-right: 0;
          border: none;
          background: none;
-          @include box-shadow(none);
-          font-size: 13px;
          font-weight: bold;
          color: $blue;
          cursor: pointer;
@@ -231,10 +231,10 @@ body.course.outline {
              @include clearfix();

              .section-name {
+                @include font-size(19);
                float: left;
                margin-right: 10px;
                width: 350px;
-                font-size: 19px;
                font-weight: bold;
                color: $blue;
              }
@@ -254,9 +254,9 @@ body.course.outline {
                background: $white;

                input {
-              font-size: 16px;        
+                @include font-size(16);
            }
-                              
+
            .save-button {
              @include blue-button;
              padding: 7px 20px 7px;
@@ -275,7 +275,7 @@ body.course.outline {
            background: $lightGrey;

            .published-status {
-              font-size: 12px;
+              @include font-size(12);
              margin-right: 15px;

              strong {
@@ -293,9 +293,8 @@ body.course.outline {

            .schedule-button,
            .edit-button {
-              font-size: 11px;
-              padding: 3px 15px 5px;
-             
+              @include font-size(11);
+              padding: 0 15px 2px 15px;
              }
            }

@@ -306,17 +305,17 @@ body.course.outline {
              width: 145px;

              .status-label {
+                @include font-size(12);
+                @include border-radius(3px);
                position: absolute;
                top: 0;
                right: 2px;
                display: none;
                width: 100px;
                padding: 10px 35px 10px 10px;
-                @include border-radius(3px);
                background: $lightGrey;
                color: $lightGrey;
                text-align: right;
-                font-size: 12px;
                font-weight: bold;
                line-height: 16px;
              }
@@ -335,6 +334,11 @@ 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);
                z-index: 1;
                display: none;
                opacity: 0.0;
@@ -345,11 +349,7 @@ body.course.outline {
                padding: 8px 12px;
                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);
-                @include transition(display .15s);
+


                li {
@@ -410,7 +410,7 @@ body.course.outline {
        }
      }

-          .item-actions {         
+          .item-actions {
              margin-top: 21px;
              margin-right: 12px;

@@ -422,7 +422,7 @@ body.course.outline {

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

              &.expand {
@@ -430,7 +430,7 @@ body.course.outline {
              }

              &.collapsed {
-                  
+
              }
          }

@@ -440,7 +440,7 @@ body.course.outline {
      }

      h3 {
-          font-size: 19px;
+          @include font-size(19);
          font-weight: 700;
          color: $blue;
      }
@@ -460,9 +460,9 @@ body.course.outline {

      .section-name-edit {
          input {
-              font-size: 16px;
+            @include font-size(16);
          }
-          
+
          .save-button {
              @include blue-button;
              padding: 7px 20px 7px;
@@ -476,7 +476,7 @@ body.course.outline {
      }

      h4 {
-          font-size: 12px;
+          @include font-size(12);
          color: #878e9d;

          strong {
@@ -502,8 +502,8 @@ body.course.outline {
      &.new-section {

          header {
-              height: auto;
              @include clearfix();
+              height: auto;
          }

          .expand-collapse-icon {
@@ -522,12 +522,11 @@ body.course.outline {
  }

  .toggle-button-sections {
+      @include font-size(12);
      display: none;
      position: relative;
      float: right;
-      margin-top: 10px;
-
-      font-size: 13px;
+      margin-top: ($baseline/4);
      color: $darkGrey;

      &.is-shown {
@@ -535,13 +534,13 @@ body.course.outline {
      }

      .ss-icon {
+          @include font-size(11);
          @include border-radius(20px);
          position: relative;
          top: -1px;
          display: inline-block;
          margin-right: 2px;
          line-height: 5px;
-          font-size: 11px;
      }

      .label {
@@ -599,7 +598,7 @@ body.course.outline {
      }

      h3 {
-          font-size: 34px;
+          @include font-size(34);
          font-weight: 300;
      }

@@ -625,16 +624,16 @@ body.course.outline {
            }

            label {
-              @include font-size(14);
+              @extend .t-copy-sub1;
              margin-bottom: ($baseline/4);
            }
          }
      }

      .description {
+          @include font-size(14);
          float: left;
          margin-top: 30px;
-          font-size: 14px;
          line-height: 20px;
          width: 100%;
      }
@@ -645,7 +644,7 @@ body.course.outline {

      .start-date,
      .start-time {
-          font-size: 19px;
+          @include font-size(19);
      }

      .save-button {
@@ -659,14 +658,14 @@ body.course.outline {

      .save-button,
      .cancel-button {
-          font-size: 16px;
+        @include font-size(16);
      }
  }

  .collapse-all-button {
+      @include font-size(13);
      float: right;
      margin-top: 10px;
-      font-size: 13px;
      color: $darkGrey;
  }

@@ -686,7 +685,7 @@ body.course.outline {
      border: 1px solid $darkGrey;
      opacity : 0.2;
      &:hover {
-          opacity : 1.0;    
+          opacity : 1.0;
          .section-item {
              background: $yellow !important;
          }
@@ -701,4 +700,4 @@ body.course.outline {
  ol.ui-droppable .branch:first-child .section-item {
      border-top: none;
  }
-}
+}
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -66,7 +66,7 @@ body.course.settings {
      }

      .tip {
-        @include font-size(13);
+        @extend .t-copy-sub2;
        width: flex-grid(5, 9);
        float: right;
        margin-top: ($baseline/2);
@@ -86,20 +86,20 @@ body.course.settings {

    // in form  -UI hints/tips/messages
    .instructions {
-      @include font-size(14);
+      @extend .t-copy-sub1;
      margin: 0 0 $baseline 0;
    }

    .tip {
+      @extend .t-copy-sub2;
      @include transition(color, 0.15s, ease-in-out);
-      @include font-size(13);
      display: block;
      margin-top: ($baseline/4);
      color: $gray-l3;
    }

    .message-error {
-      @include font-size(13);
+      @extend .t-copy-sub1;
      display: block;
      margin-top: ($baseline/4);
      margin-bottom: ($baseline/2);
@@ -109,12 +109,13 @@ body.course.settings {
    // buttons
    .remove-item {
      @include white-button;
-      @include font-size(13);
+      @extend .t-action-3;
      font-weight: 400;
    }

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

    // form basics
@@ -158,8 +159,8 @@ body.course.settings {
        }

        input, textarea {
+          @extend .t-copy-base;
          @include placeholder($gray-l4);
-          @include font-size(16);
          @include size(100%,100%);
          padding: ($baseline/2);

@@ -324,7 +325,7 @@ body.course.settings {

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

            .icon {
@@ -752,7 +753,7 @@ body.course.settings {

      // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
      .CodeMirror {
-        @include font-size(16);
+        @extend .t-copy-base;
        @include box-sizing(border-box);
        @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
        @include linear-gradient($lightGrey, tint($lightGrey, 90%));
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -33,11 +33,11 @@ body.course.static-pages {
      display: none;
      padding: 0;
      border-radius: 2px 2px 0 0;
-
+      
      //Overrides general edit-box mixin 
      .row {
        margin-bottom: 0px;
-      }
+

      // This duplicates the styling from Unit page editing
      .module-actions {
@@ -108,7 +108,7 @@ body.course.static-pages {

    .component-actions {
      position: absolute;
-      top: 26px;
+      top: 20px;
      right: 44px;
    }
  }
@@ -135,12 +135,12 @@ body.course.static-pages {
  }

  .static-page-item {
-    position: relative;    
+    position: relative;
    margin: 10px 0;
    padding: 22px 20px;
    border: 1px solid $darkGrey;
    border-radius: 3px;
-    background: #fff;    
+    background: #fff;
    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));

    .page-name {
@@ -189,4 +189,4 @@ body.course.static-pages {
    color: #3c3c3c;
    outline: 0;
  }
-}
+}
--- a/cms/templates/asset_index.html
+++ b/cms/templates/asset_index.html
@@ -10,7 +10,7 @@
 </%block>

 <%block name="content">
-  
+
  <script type="text/template" id="new-asset-element">
    <tr data-id='{{url}}'>
      <td class="thumb-col">
@@ -35,10 +35,10 @@

  <div class="wrapper-mast wrapper">
    <header class="mast has-actions has-subtitle">
-      <div class="title">
-        <span class="title-sub">Course Content</span>
-        <h1 class="title-1">Files &amp; Uploads</h1>        
-      </div>
+      <h1 class="page-header">
+        <small class="subtitle">Course Content</small>
+        <span class="sr">&gt; </span>Files &amp; Uploads
+      </h1>

      <nav class="nav-actions">
        <h3 class="sr">Page Actions</h3>
@@ -91,7 +91,7 @@
          </tbody>
        </table>
        <nav class="pagination wip-box">
-          Page: 
+          Page:
          <ol class="pages">
            <li>1</li>
            <li><a href="#">2</a></li>
--- a/cms/templates/checklists.html
+++ b/cms/templates/checklists.html
@@ -30,10 +30,10 @@
 <%block name="content">
 <div class="wrapper-mast wrapper">
  <header class="mast has-actions has-subtitle">
-    <div class="title">
-      <span class="title-sub">Tools</span>
-      <h1 class="title-1">Course Checklists</h1>
-    </div>
+    <h1 class="page-header">
+      <small class="subtitle">Tools</small>
+      <span class="sr">&gt; </span>Course Checklists
+    </h1>
  </header>
 </div>

--- a/cms/templates/course_info.html
+++ b/cms/templates/course_info.html
@@ -16,18 +16,18 @@
  <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
  <script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
  <script src="${static.url('js/vendor/date.js')}"></script>
-  
+
  <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    var course_updates = new CMS.Models.CourseUpdateCollection();
    course_updates.urlbase = '${url_base}';
-    course_updates.fetch();
+    course_updates.fetch({reset: true});

    var course_handouts = new CMS.Models.ModuleInfo({
        id: '${handouts_location}'
      });
    course_handouts.urlbase = '${url_base}';
-    
+
    var editor = new CMS.Views.CourseInfoEdit({
      el: $('.main-wrapper'),
      model : new CMS.Models.CourseInfo({
@@ -44,10 +44,10 @@
 <%block name="content">
  <div class="wrapper-mast wrapper">
    <header class="mast has-actions has-subtitle">
-      <div class="title">
-        <span class="title-sub">Course Content</span>
-        <h1 class="title-1">Course Updates</h1>
-      </div>
+      <h1 class="page-header">
+        <small class="subtitle">Course Content</small>
+        <span class="sr">&gt; </span>Course Updates
+      </h1>

      <nav class="nav-actions">
        <h3 class="sr">Page Actions</h3>
@@ -80,4 +80,4 @@
      </div>
    </div>
  </div>
-</%block>
+</%block>
--- a/cms/templates/edit-tabs.html
+++ b/cms/templates/edit-tabs.html
@@ -18,10 +18,10 @@
 <%block name="content">
 <div class="wrapper-mast wrapper">
  <header class="mast has-actions has-subtitle">
-    <div class="title">
-      <span class="title-sub">Course Content</span>
-      <h1 class="title-1">Static Pages</h1>
-    </div>
+    <h1 class="page-header">
+      <small class="subtitle">Course Content</small>
+      <span class="sr">&gt; </span>Static Pages
+    </h1>

    <nav class="nav-actions">
      <h3 class="sr">Page Actions</h3>
@@ -52,17 +52,17 @@
 <div class="main-wrapper">
  <div class="inner-wrapper">
    <article class="unit-body">
-      
+
      <div class="tab-list">
        <ol class='components'>
          % for id in components:
          <li class="component" data-id="${id}"/>
          % endfor
-                   
+
          <li class="new-component-item">
-            
+
          </li>
-        </ol>      
+        </ol>
      </div>
    </article>
  </div>
@@ -80,4 +80,4 @@
    <span class="label">close modal</span>
  </a>
 </div>
-</%block>
+</%block>
--- a/cms/templates/edit_subsection.html
+++ b/cms/templates/edit_subsection.html
@@ -85,6 +85,7 @@
  </div>
 </div>
 </div>
+</div>
 </%block>

 <%block name="jsextra">
--- a/cms/templates/export.html
+++ b/cms/templates/export.html
@@ -8,10 +8,10 @@
 <%block name="content">
 <div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
-    <div class="title">
-      <span class="title-sub">Tools</span>
-      <h1 class="title-1">Course Export</h1>
-    </div>
+    <h1 class="page-header">
+      <small class="subtitle">Tools</small>
+      <span class="sr">&gt; </span>Course Export
+    </h1>
  </header>
 </div>

@@ -37,9 +37,9 @@
      <div class="export-form-wrapper">
        <form action="${reverse('generate_export_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}" method="post" enctype="multipart/form-data" class="export-form">
          <h2>Export Course:</h2>
-          
+
          <p class="error-block"></p>
-          
+
          <a href="${reverse('generate_export_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}" class="button-export">Download Files</a>
        </form>
      </div>
@@ -49,11 +49,11 @@
      <div class="export-form-wrapper is-downloading">
        <form action="${reverse('export_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}" method="post" enctype="multipart/form-data" class="export-form">
          <h2>Export Course:</h2>
-          
+
          <p class="error-block"></p>
-          
+
          <a href="#" class="button-export disabled">Files Downloading</a>
-          <p class="message-status">Download not start? <a href="#" class="text-export">Try again</a></p>          
+          <p class="message-status">Download not start? <a href="#" class="text-export">Try again</a></p>
        </form>
      </div>
      </%doc>
--- a/cms/templates/import.html
+++ b/cms/templates/import.html
@@ -8,10 +8,10 @@
 <%block name="content">
 <div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
-    <div class="title">
-      <span class="title-sub">Tools</span>
-      <h1 class="title-1">Course Import</h1>
-    </div>
+    <h1 class="page-header">
+      <small class="subtitle">Tools</small>
+      <span class="sr">&gt; </span>Course Import
+    </h1>
  </header>
 </div>

@@ -79,4 +79,4 @@ $('form').ajaxForm({
  });
 })();
 </script>
-</%block>
+</%block>
--- a/cms/templates/index.html
+++ b/cms/templates/index.html
@@ -37,9 +37,7 @@
 <%block name="content">
  <div class="wrapper-mast wrapper">
    <header class="mast has-actions">
-      <div  class="title">
-        <h1 class="title-1">${_("My Courses")}</h1>
-      </div>
+      <h1 class="page-header">${_("My Courses")}</h1>

      % if user.is_active:
      <nav class="nav-actions">
--- a/cms/templates/manage_users.html
+++ b/cms/templates/manage_users.html
@@ -6,10 +6,10 @@
 <%block name="content">
 <div class="wrapper-mast wrapper">
  <header class="mast has-actions has-subtitle">
-    <div class="title">
-      <span class="title-sub">Course Settings</span>
-      <h1 class="title-1">Course Team</h1>
-    </div>
+    <h1 class="page-header">
+      <small class="subtitle">Course Settings</small>
+      <span class="sr">&gt; </span>Course Team
+    </h1>

    <nav class="nav-actions">
      <h3 class="sr">Page Actions</h3>
@@ -31,7 +31,7 @@
      <p>The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.</p>
    </div>

-    <article class="user-overview">           
+    <article class="user-overview">
      %if allow_actions:
      <form class="new-user-form">
        <div id="result"></div>
@@ -106,7 +106,7 @@

  $(document).ready(function() {
    $newUserForm = $('.new-user-form');
-    var $cancelButton = $newUserForm.find('.cancel-button');    
+    var $cancelButton = $newUserForm.find('.cancel-button');
    $newUserForm.bind('submit', addUser);
    $cancelButton.bind('click', hideNewUserForm);

@@ -119,7 +119,7 @@
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
-        data:JSON.stringify({ 'email': $(this).data('id')}),          
+        data:JSON.stringify({ 'email': $(this).data('id')}),
        }).done(function() {
          location.reload();
        })
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -106,10 +106,10 @@
 <%block name="content">
  <div class="wrapper-mast wrapper">
    <header class="mast has-actions has-subtitle">
-      <div class="title">
-        <span class="title-sub">Course Content</span>
-        <h1 class="title-1">Course Outline</h1>
-      </div>
+      <h1 class="page-header">
+        <small class="subtitle">Course Content</small>
+        <span class="sr">&gt; </span>Course Outline
+      </h1>

      <nav class="nav-actions">
        <h3 class="sr">Page Actions</h3>
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -32,15 +32,15 @@ from contentstore import utils
        });
      var model = new CMS.Models.Settings.CourseDetails();
      model.urlRoot = '${details_url}';
-      model.fetch({success :
-          function(model) {
-              var editor = new CMS.Views.Settings.Details({
-                  el: $('.settings-details'),
-                  model: model
-                });
-
-              editor.render();
-          }
+      model.fetch({
+        success: function(model) {
+          var editor = new CMS.Views.Settings.Details({
+              el: $('.settings-details'),
+              model: model
+          });
+          editor.render();
+        },
+        reset: true
      });
    });

@@ -50,10 +50,10 @@ from contentstore import utils
 <%block name="content">
 <div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
-    <div class="title">
-      <span class="title-sub">Settings</span>
-      <h1 class="title-1">Schedule &amp; Details</h1>
-    </div>
+    <h1 class="page-header">
+      <small class="subtitle">Settings</small>
+      <span class="sr">&gt; </span>Schedule &amp; Details
+    </h1>
  </header>
 </div>

--- a/cms/templates/settings_advanced.html
+++ b/cms/templates/settings_advanced.html
@@ -44,10 +44,10 @@ editor.render();
 <%block name="content">
 <div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
-    <div class="title">
-      <span class="title-sub">Settings</span>
-      <h1 class="title-1">Advanced Settings</h1>
-    </div>
+    <h1 class="page-header">
+      <small class="subtitle">Settings</small>
+      <span class="sr">&gt; </span>Advanced Settings
+    </h1>
  </header>
 </div>

--- a/cms/templates/settings_graders.html
+++ b/cms/templates/settings_graders.html
@@ -41,10 +41,10 @@ from contentstore import utils
 <%block name="content">
 <div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
-    <div class="title">
-      <span class="title-sub">Settings</span>
-      <h1 class="title-1">Grading</h1>
-    </div>
+    <h1 class="page-header">
+      <small class="subtitle">Settings</small>
+      <span class="sr">&gt; </span>Grading
+    </h1>
  </header>
 </div>

--- a/cms/templates/ux-alerts.html
+++ b/cms/templates/ux-alerts.html
@@ -82,10 +82,10 @@
 <%block name="content">
 <div class="wrapper-mast wrapper">
  <header class="mast has-actions has-subtitle">
-    <div class="title">
-      <span class="title-sub">UX Design</span>
-      <h1 class="title-1">System Notifications</h1>
-    </div>
+    <h1 class="page-header">
+      <small class="subtitle">UX Design</small>
+      <span class="sr">&gt; </span>System Notifications
+    </h1>
  </header>
 </div>

@@ -133,10 +133,6 @@
            <a href="#notification-changesMade" class="show-notification">Show Changes Made (used in Advanced Settings)</a>
            <a href="#notification-changesMade" class="hide-notification">Hide Changes Made (used in Advanced Settings)</a>
          </li>
-          <li>
-            <a href="#notification-change" class="show-notification">Show Change Warning</a>
-            <a href="#notification-change" class="hide-notification">Hide Change Warning</a>
-          </li>
          <li>
            <a href="#notification-version" class="show-notification">Show New Version Warning</a>
            <a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
@@ -156,10 +152,6 @@
            <a href="#notification-help" class="show-notification">Show Help</a>
            <a href="#notification-help" class="hide-notification">Hide Help</a>
          </li>
-          <li>
-            <a href="#notification-threeActions" class="show-notification">Show Notification with three actions</a>
-            <a href="#notification-threeActions" class="hide-notification">Hide Notification with three actions</a>
-          </li>
        </ul>
      </section>

@@ -402,57 +394,6 @@
 </%block>

 <%block name="view_notifications">
-<!-- notification: change has been made and a save is needed -->
-<div class="wrapper wrapper-notification wrapper-notification-change" aria-hidden="true" role="dialog" aria-labelledby="notification-change-title" aria-describedby="notification-change-description" id="notification-change">
-  <div class="notification change has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
-
-    <div class="copy">
-      <h2 class="title title-3" id="notification-change-title">You've Made Some Changes</h2>
-      <p class="message" id="notification-change-description">Your changes will not take effect until you <strong>save your progress</strong>.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Notification Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action-primary">Save Changes</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action-secondary">Don't Save</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- notification: three actions example -->
-<div class="wrapper wrapper-notification wrapper-notification-change" aria-hidden="true" role="dialog" aria-labelledby="notification-threeActions-title" aria-describedby="notification-threeActions-description" id="notification-threeActions">
-  <div class="notification change has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
-
-    <div class="copy">
-      <h2 class="title title-3" id="notification-threeActions-title">You've Made Some Changes</h2>
-      <p class="message" id="notification-threeActions-description">Your changes will not take effect until you <strong>save your progress</strong>.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Notification Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action-primary">Save Changes</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action-secondary">Don't Save</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action-secondary">Do something else</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
 <!-- notification: change has been made and a save is needed -->
 <div class="wrapper wrapper-notification wrapper-notification-warning" aria-hidden="true" role="dialog" aria-labelledby="notification-changesMade-title" aria-describedby="notification-changesMade-description" id="notification-changesMade">
  <div class="notification warning has-actions">
--- a/common/lib/capa/capa/responsetypes.py
+++ b/common/lib/capa/capa/responsetypes.py
@@ -36,7 +36,7 @@ from datetime import datetime
 from .util import *
 from lxml import etree
 from lxml.html.soupparser import fromstring as fromstring_bs     # uses Beautiful Soup!!! FIXME?
-import capa.xqueue_interface
+import capa.xqueue_interface as xqueue_interface

 log = logging.getLogger(__name__)

--- a/common/lib/xmodule/xmodule/templates.py
+++ b/common/lib/xmodule/xmodule/templates.py
@@ -4,8 +4,18 @@ These templates are used by the CMS to provide baseline content that
 can be cloned when adding new modules to a course.

 `Template`s are defined in x_module. They contain 3 attributes:
-    metadata: A dictionary with the template metadata
-    data: A JSON value that defines the template content
+    metadata: A dictionary with the template metadata. This should contain
+        any values for fields
+            * with scope Scope.settings
+            * that have values different than the field defaults
+            * and that are to be editable in Studio
+    data: A JSON value that defines the template content. This should be a dictionary
+        containing values for fields
+            * with scope Scope.content
+            * that have values different than the field defaults
+            * and that are to be editable in Studio
+        or, if the module uses a single Scope.content String field named `data`, this
+        should be a string containing the contents of that field
    children: A list of Location urls that define the template children

 Templates are defined on XModuleDescriptor types, in the template attribute.
--- a/common/lib/xmodule/xmodule/word_cloud_module.py
+++ b/common/lib/xmodule/xmodule/word_cloud_module.py
@@ -11,6 +11,7 @@ import logging

 from pkg_resources import resource_string
 from xmodule.raw_module import RawDescriptor
+from xmodule.editing_module import MetadataOnlyEditingDescriptor
 from xmodule.x_module import XModule

 from xblock.core import Scope, String, Object, Boolean, List, Integer
@@ -19,8 +20,13 @@ log = logging.getLogger(__name__)


 def pretty_bool(value):
-    BOOL_DICT = [True, "True", "true", "T", "t", "1"]
-    return value in BOOL_DICT
+    """Check value for possible `True` value.
+
+    Using this function we can manage different type of Boolean value
+    in xml files.
+    """
+    bool_dict = [True, "True", "true", "T", "t", "1"]
+    return value in bool_dict


 class WordCloudFields(object):
@@ -227,9 +233,8 @@ class WordCloudModule(WordCloudFields, XModule):
        return self.content


-class WordCloudDescriptor(WordCloudFields, RawDescriptor):
+class WordCloudDescriptor(MetadataOnlyEditingDescriptor, RawDescriptor, WordCloudFields):
    """Descriptor for WordCloud Xmodule."""
    module_class = WordCloudModule
    template_dir_name = 'word_cloud'
    stores_state = True
-    mako_template = "widgets/raw-edit.html"
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -1,34 +1,80 @@
 // studio - utilities - mixins and extends
 // ====================

-// font-sizing
-@function em($pxval, $base: 16) {
-  @return #{$pxval / $base}em;
-}
-
+// mixins - font sizing
@mixin font-size($sizeValue: 16){
  font-size: $sizeValue + px;
  font-size: ($sizeValue/10) + rem;
 }

-// ====================
-
-// line-height
-@function lh($amount: 1) {
-  @return $body-line-height * $amount;
+// mixins - line height
+@mixin lh($fontSize: auto){
+  line-height: ($fontSize*1.48) + px;
+  line-height: (($fontSize/10)*1.48) + rem;
 }

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

-// image-replacement hidden text
-@mixin text-hide() {
+// mixins - sizing
+@mixin size($width: $baseline, $height: $baseline) {
+  height: $height;
+  width: $width;
+}
+
+// mixins - sizing
+@mixin square($size: $baseline) {
+  @include size($size);
+}
+
+
+// ====================
+
+// mixins - placeholder styling
+@mixin placeholder($color) {
+  :-moz-placeholder {
+    color: $color;
+  }
+  ::-webkit-input-placeholder {
+    color: $color;
+  }
+  :-ms-input-placeholder {
+     color: $color;
+  }
+}
+
+// ====================
+
+// extends - layout
+
+// used for page/view-level wrappers (for centering/grids)
+.wrapper {
+  @include clearfix();
+  @include box-sizing(border-box);
+  width: 100%;
+}
+
+// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
+.no-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// extends - image-replacement hidden text
+.text-hide {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 }

-// hidden elems - screenreaders
-@mixin text-sr() {
+// extends - hidden elems - screenreaders
+.text-sr {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
@@ -39,144 +85,107 @@
  width: 1px;
 }

-// ====================
-
-// vertical and horizontal centering
-@mixin vertically-and-horizontally-centered ($height, $width) {
-  left: 50%;
-  margin-left: -$width / 2;
-  //margin-top: -$height / 2;
-  min-height: $height;
-  min-width: $width;
-  position: absolute;
-  top: 150px;
+// extends - wrapping
+.text-wrap {
+  text-wrap: wrap;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  word-wrap: break-word;
 }

+// extends - visual link
+.fake-link {
+  cursor: pointer;
+}
+
+// extends - functional disable
+.disabled {
+  pointer-events: none;
+  outline: none;
+}
+
+// extends - depth levels
+.depth0 { z-index: 0; }
+.depth1 { z-index: 10; }
+.depth2 { z-index: 100; }
+.depth3 { z-index: 1000; }
+.depth4 { z-index: 10000; }
+.depth5 { z-index: 100000; }
+
 // ====================

-// sizing
-@mixin size($width: $baseline, $height: $baseline) {
-  height: $height;
-  width: $width;
-}
-
-@mixin square($size: $baseline) {
-  @include size($size);
-}
-
-// ====================
-
-// placeholder styling
-@mixin placeholder($color) {
-  :-moz-placeholder {
-    color: $color;
-  }
-  ::-webkit-input-placeholder {
-    color: $color;
-  }
-  :-ms-input-placeholder {  
-     color: $color; 
-  }
-}
-
-// ====================
-
-// extends - visual
-.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;
-}
-
-// extends - 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;
-}
-
-.elem-d1 {
-  @include clearfix();
+// 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);
+  display: inline-block;
+  cursor: pointer;
+
+  &:hover, &:active {
+
+  }
+
+  &.disabled, &[disabled] {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .icon-inline {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: ($baseline/4);
+  }
 }

-.elem-d2 {
-  @include clearfix();
-  @include box-sizing(border-box);
-}
+// pill button
+.btn-pill {
+  @include border-radius($baseline/5);
+}
+
+.btn-rounded {
+  @include border-radius($baseline/2);
+}
+
+// primary button
+.btn-primary {
+  @extend .btn;
+  @extend .btn-pill;
+  padding:($baseline/2) $baseline;
+  border-width: 1px;
+  border-style: solid;
+  line-height: 1.5em;
+  text-align: center;
+
+  &:hover, &:active {
+    @include box-shadow(0 2px 1px $shadow-l1);
+  }
+
+  &.current, &.active {
+    @include box-shadow(inset 1px 1px 2px $shadow-d1);
+
+    &:hover, &:active {
+      @include box-shadow(inset 1px 1px 1px $shadow-d1);
+    }
+  }
+}
+
+// secondary button
+.btn-secondary {
+  @extend .btn;
+  @extend .btn-pill;
+  border-width: 1px;
+  border-style: solid;
+  padding:($baseline/2) $baseline;
+  background: transparent;
+  line-height: 1.5em;
+  text-align: center;
+
+  &:hover, &:active {
+
+  }
+
+  &.current, &.active {
+
+  }
+}
--- a/doc/public/course_data_formats/word_cloud/word_cloud.rst
+++ b/doc/public/course_data_formats/word_cloud/word_cloud.rst
@@ -18,12 +18,23 @@ The following attributes can be specified for this tag::
    [display_name| AUTOGENERATE] – Display name of xmodule. When this attribute is not defined - display name autogenerate with some hash.
    [num_inputs| 5] – Number of inputs.
    [num_top_words| 250] – Number of max words, which will be displayed.
-    [display_student_percents| True] – Display usage percents for each word.
+    [display_student_percents| True] – Display usage percents for each word on the same line together with words.
+
+.. note::
+
+   Percent is shown always when mouse over the word in cloud.
+
+.. note::
+
+   Possible answer for boolean type attributes:
+   True – "True", "true", "T", "t", "1"
+   False – "False", "false", "F", "f", "0"

 .. note::

   If you want to use the same word cloud (the same storage of words), you must use the same display_name value.

+
 Code Example
 ============

--- a/jenkins/base.sh
+++ b/jenkins/base.sh
@@ -1,25 +0,0 @@
-##
-## requires >= 1.3.0 of the Jenkins git plugin
-##
-
-function github_status {
-
-    if [[ ! ${GIT_URL} =~ git@github.com:([^/]+)/([^\.]+).git ]]; then
-        echo "Cannot parse Github org or repo from URL, using defaults."
-        ORG="edx"
-        REPO="mitx"
-    else
-        ORG=${BASH_REMATCH[1]}
-        REPO=${BASH_REMATCH[2]}
-    fi
-
-    gcli status create $ORG $REPO $GIT_COMMIT \
-         --params=$1 \
-                  target_url:$BUILD_URL \
-                  description:"Build #$BUILD_NUMBER is running" \
-         -f csv
-}
-
-function github_mark_failed_on_exit {
-    trap '[ $? == "0" ] || github_status state:failed' EXIT
-}
--- a/jenkins/test.sh
+++ b/jenkins/test.sh
@@ -3,8 +3,21 @@
 set -e
 set -x

+##
+## requires >= 1.3.0 of the Jenkins git plugin
+##
+
 function github_status {
-    gcli status create edx edx-platform $GIT_COMMIT \
+    if [[ ! ${GIT_URL} =~ git@github.com:([^/]+)/([^\.]+).git ]]; then
+        echo "Cannot parse Github org or repo from URL, using defaults."
+        ORG="edx"
+        REPO="edx-platform"
+    else
+        ORG=${BASH_REMATCH[1]}
+        REPO=${BASH_REMATCH[2]}
+    fi
+
+    gcli status create $ORG $REPO $GIT_COMMIT \
         --params=$1 \
                  target_url:$BUILD_URL \
                  description:"Build #$BUILD_NUMBER $2" \
@@ -27,13 +40,29 @@ git submodule foreach 'git reset --hard HEAD'
 export PYTHONIOENCODING=UTF-8

 GIT_BRANCH=${GIT_BRANCH/HEAD/master}
-if [ ! -d /mnt/virtualenvs/"$JOB_NAME" ]; then
-    mkdir -p /mnt/virtualenvs/"$JOB_NAME"
-    virtualenv /mnt/virtualenvs/"$JOB_NAME"
+
+# When running in parallel on jenkins, workspace could be suffixed by @x
+# In that case, we want to use a separate virtualenv that matches up with
+# workspace
+#
+# We need to handle both the case of /path/to/workspace
+# and /path/to/workspace@2, which is why we use the following substitutions
+#
+# $WORKSPACE is the absolute path for the workspace
+WORKSPACE_SUFFIX=$(expr "$WORKSPACE" : '.*\(@.*\)') || true
+
+VIRTUALENV_DIR="/mnt/virtualenvs/${JOB_NAME}${WORKSPACE_SUFFIX}"
+
+if [ ! -d "$VIRTUALENV_DIR" ]; then
+    mkdir -p "$VIRTUALENV_DIR"
+    virtualenv "$VIRTUALENV_DIR"
 fi

 export PIP_DOWNLOAD_CACHE=/mnt/pip-cache

+# Allow django liveserver tests to use a range of ports
+export DJANGO_LIVE_TEST_SERVER_ADDRESS=${DJANGO_LIVE_TEST_SERVER_ADDRESS-localhost:8000-9000}
+
 source /mnt/virtualenvs/"$JOB_NAME"/bin/activate
 pip install -q -r pre-requirements.txt
 yes w | pip install -q -r requirements.txt
--- a/lms/djangoapps/courseware/tests/tests.py
+++ b/lms/djangoapps/courseware/tests/tests.py
@@ -631,8 +631,8 @@ class TestViewAuth(LoginEnrollmentTestCase):
            urls = reverse_urls(['info', 'progress'], course)
            urls.extend([
                reverse('book', kwargs={'course_id': course.id,
-                                        'book_index': book.title})
-                for book in course.textbooks
+                                        'book_index': index})
+                for index, book in enumerate(course.textbooks)
            ])
            return urls

@@ -643,8 +643,6 @@ class TestViewAuth(LoginEnrollmentTestCase):
            """
            urls = reverse_urls(['about_course'], course)
            urls.append(reverse('courses'))
-            # Need separate test for change_enrollment, since it's a POST view
-            #urls.append(reverse('change_enrollment'))

            return urls

--- a/lms/lib/comment_client/utils.py
+++ b/lms/lib/comment_client/utils.py
@@ -1,3 +1,4 @@
+from dogapi import dog_stats_api
 import json
 import logging
 import requests
@@ -30,12 +31,18 @@ def merge_dict(dic1, dic2):
 def perform_request(method, url, data_or_params=None, *args, **kwargs):
    if data_or_params is None:
        data_or_params = {}
+    tags = [
+        "{k}:{v}".format(k=k, v=v)
+        for (k, v) in data_or_params.items() + [("method", method), ("url", url)]
+        if k != 'api_key'
+    ]
    data_or_params['api_key'] = settings.API_KEY
    try:
-        if method in ['post', 'put', 'patch']:
-            response = requests.request(method, url, data=data_or_params, timeout=5)
-        else:
-            response = requests.request(method, url, params=data_or_params, timeout=5)
+        with dog_stats_api.timer('comment_client.request.time', tags=tags):
+            if method in ['post', 'put', 'patch']:
+                response = requests.request(method, url, data=data_or_params, timeout=5)
+            else:
+                response = requests.request(method, url, params=data_or_params, timeout=5)
    except Exception as err:
        # remove API key if it is in the params
        if 'api_key' in data_or_params: