From a5bb31792bf234917671a6991d2f15b106676fc3 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Mon, 13 May 2013 16:38:52 -0400
Subject: [PATCH 01/15] Add a prefix string to Zendesk errors to be more
 searchable in Splunk

---
 common/djangoapps/util/views.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/djangoapps/util/views.py b/common/djangoapps/util/views.py
index 1065140f5d..4eae1d66e5 100644
--- a/common/djangoapps/util/views.py
+++ b/common/djangoapps/util/views.py
@@ -161,7 +161,7 @@ def submit_feedback_via_zendesk(request):
     try:
         ticket_id = zendesk_api.create_ticket(new_ticket)
     except zendesk.ZendeskError as err:
-        log.error("%s", str(err))
+        log.error("Error creating Zendesk ticket: %s", str(err))
         return HttpResponse(status=500)
 
     # Additional information is provided as a private update so the information
@@ -170,7 +170,7 @@ def submit_feedback_via_zendesk(request):
     try:
         zendesk_api.update_ticket(ticket_id, ticket_update)
     except zendesk.ZendeskError as err:
-        log.error("%s", str(err))
+        log.error("Error updating Zendesk ticket: %s", str(err))
         # The update is not strictly necessary, so do not indicate failure to the user
         pass
 

From c8970cafee417ca59d1914efefb6987171ed4cd9 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Tue, 14 May 2013 11:29:41 -0400
Subject: [PATCH 02/15] Add comment service request time logging to Datadog

---
 lms/lib/comment_client/utils.py | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/lms/lib/comment_client/utils.py b/lms/lib/comment_client/utils.py
index 53bdd462ad..fce9516739 100644
--- 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
@@ -32,10 +33,11 @@ def perform_request(method, url, data_or_params=None, *args, **kwargs):
         data_or_params = {}
     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'):
+            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:

From 87cc4fab5ac6ee12edcfadac94b47e7e6371dcf0 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Tue, 14 May 2013 13:20:55 -0400
Subject: [PATCH 03/15] Add tags to comment service request Datadog timer

---
 lms/lib/comment_client/utils.py | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/lms/lib/comment_client/utils.py b/lms/lib/comment_client/utils.py
index fce9516739..1ce03ed3c7 100644
--- a/lms/lib/comment_client/utils.py
+++ b/lms/lib/comment_client/utils.py
@@ -31,9 +31,14 @@ 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:
-        with dog_stats_api.timer('comment_client.request.time'):
+        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:

From e9a8f408bffc1c64e192f8d39401d9c5f9697a6b Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Tue, 14 May 2013 16:43:41 -0400
Subject: [PATCH 04/15] Add {reset: true} to all collection.fetch() calls

This is to fix a bug with the Backbone 1.0 upgrade; some views were listening to
reset events that were not longer getting fired
---
 cms/static/js/views/checklists_view.js        |  1 +
 cms/static/js/views/course_info_edit.js       | 43 +++++++++++--------
 cms/static/js/views/settings/advanced_view.js |  1 +
 cms/templates/course_info.html                |  8 ++--
 cms/templates/settings.html                   | 18 ++++----
 5 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/cms/static/js/views/checklists_view.js b/cms/static/js/views/checklists_view.js
index 1ae29f99d5..b2727e58f7 100644
--- 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
             }
         );
diff --git a/cms/static/js/views/course_info_edit.js b/cms/static/js/views/course_info_edit.js
index 50793c5f1e..9554b0d7c3 100644
--- 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 () {
diff --git a/cms/static/js/views/settings/advanced_view.js b/cms/static/js/views/settings/advanced_view.js
index c1392831b8..bef908601b 100644
--- 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
         });
     },
diff --git a/cms/templates/course_info.html b/cms/templates/course_info.html
index cbf436ecc5..55042ee843 100644
--- 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({
@@ -80,4 +80,4 @@
       </div>
     </div>
   </div>
-</%block>
\ No newline at end of file
+</%block>
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 0a647c632e..c066ea1d2d 100644
--- 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
       });
     });
 

From f069c1a1a19bbfa4910616acbc5c4a151a81932c Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Wed, 8 May 2013 16:09:26 -0400
Subject: [PATCH 05/15] Studio: style reorg

typography, SASS import, mixins/extends
---
 cms/static/sass/_base.scss                    | 234 +++++----
 cms/static/sass/_cms_mixins.scss              | 437 -----------------
 cms/static/sass/_mixins-inherited.scss        | 446 ++++++++++++++++++
 cms/static/sass/_reset.scss                   |  17 +-
 cms/static/sass/_shame.scss                   |   3 +
 cms/static/sass/_variables.scss               |  22 +-
 .../assets/{_keyframes.scss => _anims.scss}   |   4 +-
 cms/static/sass/assets/_fonts.scss            |  44 +-
 cms/static/sass/base-style.scss               |  51 +-
 cms/static/sass/elements/_controls.scss       |   6 +
 cms/static/sass/elements/_footer.scss         |   4 +-
 cms/static/sass/elements/_header.scss         |  14 +-
 cms/static/sass/elements/_navigation.scss     |  15 +-
 cms/static/sass/elements/_sock.scss           |  12 +-
 .../{_alerts.scss => _system-feedback.scss}   |  41 +-
 cms/static/sass/elements/_system-help.scss    |   2 +
 cms/static/sass/elements/_typography.scss     |  92 +++-
 cms/static/sass/elements/_vendor.scss         |   4 +-
 cms/static/sass/views/_account.scss           |  24 +-
 cms/static/sass/views/_checklists.scss        |  30 +-
 cms/static/sass/views/_index.scss             |  46 +-
 cms/static/sass/views/_outline.scss           |  85 ++--
 cms/static/sass/views/_settings.scss          |  19 +-
 cms/static/sass/views/_static-pages.scss      |  12 +-
 cms/templates/asset_index.html                |  12 +-
 cms/templates/checklists.html                 |   8 +-
 cms/templates/course_info.html                |  14 +-
 cms/templates/edit-tabs.html                  |  18 +-
 cms/templates/edit_subsection.html            |   1 +
 cms/templates/export.html                     |  18 +-
 cms/templates/import.html                     |  10 +-
 cms/templates/index.html                      |   4 +-
 cms/templates/manage_users.html               |  14 +-
 cms/templates/overview.html                   |   8 +-
 cms/templates/settings.html                   |   8 +-
 cms/templates/settings_advanced.html          |   8 +-
 cms/templates/settings_graders.html           |   8 +-
 cms/templates/ux-alerts.html                  |  67 +--
 common/static/sass/_mixins.scss               | 271 ++++++-----
 39 files changed, 1127 insertions(+), 1006 deletions(-)
 delete mode 100644 cms/static/sass/_cms_mixins.scss
 create mode 100644 cms/static/sass/_mixins-inherited.scss
 create mode 100644 cms/static/sass/_shame.scss
 rename cms/static/sass/assets/{_keyframes.scss => _anims.scss} (99%)
 rename cms/static/sass/elements/{_alerts.scss => _system-feedback.scss} (93%)
 create mode 100644 cms/static/sass/elements/_system-help.scss

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 73519b812d..3188ea680e 100644
--- 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,152 @@ 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;
 }
 
 .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 +226,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 +238,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 +247,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 +272,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 +314,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 +328,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 +345,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 +363,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 +387,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 +411,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 +429,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 +442,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;
@@ -655,7 +711,7 @@ hr.divide {
 
 .new-button {
   @include green-button;
-  @include font-size(13);
+  @extend .t-action4;
   padding: 8px 20px 10px;
   text-align: center;
 
@@ -674,7 +730,7 @@ hr.divide {
 
 .view-button {
   @include blue-button;
-  @include font-size(13);
+  @extend .t-copy-base;
   text-align: center;
 
   &.big {
@@ -693,7 +749,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 +770,7 @@ hr.divide {
 }
 
 .tooltip {
+  @extend .t-copy-sub2;
   position: absolute;
   top: 0;
   left: 0;
@@ -721,7 +778,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;
@@ -821,14 +877,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;
     }
diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss
deleted file mode 100644
index c11f81f79e..0000000000
--- a/cms/static/sass/_cms_mixins.scss
+++ /dev/null
@@ -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; }
diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss
new file mode 100644
index 0000000000..2a047a4252
--- /dev/null
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -0,0 +1,446 @@
+// 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.
+// ====================
+
+// 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);
+}
diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss
index ee4e76e381..dd088d256d 100644
--- 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;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/_shame.scss b/cms/static/sass/_shame.scss
new file mode 100644
index 0000000000..8c515fde65
--- /dev/null
+++ 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/)
+// ====================
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index 4c35bfad32..712ef9153f 100644
--- 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);
+
diff --git a/cms/static/sass/assets/_keyframes.scss b/cms/static/sass/assets/_anims.scss
similarity index 99%
rename from cms/static/sass/assets/_keyframes.scss
rename to cms/static/sass/assets/_anims.scss
index a756f66b2e..ee86c9de00 100644
--- a/cms/static/sass/assets/_keyframes.scss
+++ b/cms/static/sass/assets/_anims.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);
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/assets/_fonts.scss b/cms/static/sass/assets/_fonts.scss
index 92a2e185b7..0798d3bb31 100644
--- 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);
diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss
index ee6ff18d43..5d94597ef6 100644
--- 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/)
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 953b2d15e5..e0b4a004ec 100644
--- 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;
+}
diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss
index 75eb0c4070..24cf415ea1 100644
--- 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 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index 6628d10c4c..d1ff9e6ecd 100644
--- 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;
@@ -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;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 066c47298b..516a19c7ad 100644
--- 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 @@
 
 // ====================
 
-// 
\ No newline at end of file
+//
diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss
index 16148690c3..d7a75a2d7c 100644
--- 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;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/elements/_alerts.scss b/cms/static/sass/elements/_system-feedback.scss
similarity index 93%
rename from cms/static/sass/elements/_alerts.scss
rename to cms/static/sass/elements/_system-feedback.scss
index 1e8b79b3fe..55e5528ce8 100644
--- a/cms/static/sass/elements/_alerts.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,8 @@
 
     .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 +128,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 +145,7 @@
 
 // prompts
 .wrapper-prompt {
+  @extend .depth4;
   @include transition(all 0.05s ease-in-out);
   position: fixed;
   top: 0;
@@ -144,7 +153,6 @@
   width: 100%;
   height: 100%;
   text-align: center;
-  z-index: 10000;
 
   &:before {
     content: '';
@@ -184,12 +192,12 @@
       }
 
       .action-primary {
-        @extend .t-action3;
+        @extend .t-action4;
         font-weight: 600;
       }
 
       .action-secondary {
-        @extend .t-action3;
+        @extend .t-action4;
       }
     }
   }
@@ -235,11 +243,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 +369,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 +418,12 @@
 
     .action-primary {
       @include blue-button();
-      @extend .t-action3;
       border-color: $blue-d2;
       font-weight: 600;
     }
 
     .action-secondary {
-      @extend .t-action3;
+      @extend .t-action4;
     }
   }
 
@@ -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;
         }
   	  }
   	}
@@ -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 {
diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss
new file mode 100644
index 0000000000..7fcb218282
--- /dev/null
+++ b/cms/static/sass/elements/_system-help.scss
@@ -0,0 +1,2 @@
+// studio - elements - system help
+// ====================
diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss
index a58fe27eb8..9e9ca69652 100644
--- 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;
 }
 
 // ====================
diff --git a/cms/static/sass/elements/_vendor.scss b/cms/static/sass/elements/_vendor.scss
index b106f322ab..388c14df1d 100644
--- 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;
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index 9b38492921..c23cd53093 100644
--- 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;
 }
 
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index e9ad540483..2aaa9761c6 100644
--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -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);
   }
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index 7c45530339..a6d92a5a2c 100644
--- 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;
@@ -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);
+          }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 6b179f0731..02b9d09db4 100644
--- 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;
   }
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index d1ba706d56..7a106b17ea 100644
--- 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 {
@@ -747,7 +748,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%));
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index 759b03cfc7..afbc099dcd 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -2,7 +2,7 @@
 // ====================
 
 body.course.static-pages {
-  
+
   .new-static-page-button {
     @include grey-button;
     display: block;
@@ -44,7 +44,7 @@ body.course.static-pages {
 
         label {
           display: inline-block;
-          margin-right: 10px;  
+          margin-right: 10px;
         }
       }
 
@@ -123,7 +123,7 @@ body.course.static-pages {
 
     .component-actions {
       position: absolute;
-      top: 26px;
+      top: 20px;
       right: 44px;
     }
   }
@@ -150,12 +150,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 {
@@ -204,4 +204,4 @@ body.course.static-pages {
     color: #3c3c3c;
     outline: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/cms/templates/asset_index.html b/cms/templates/asset_index.html
index ea759d38af..2fdf87642b 100644
--- 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>
diff --git a/cms/templates/checklists.html b/cms/templates/checklists.html
index 67ad6ce640..e5227c71fd 100644
--- 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>
 
diff --git a/cms/templates/course_info.html b/cms/templates/course_info.html
index cbf436ecc5..ebf8152006 100644
--- a/cms/templates/course_info.html
+++ b/cms/templates/course_info.html
@@ -16,7 +16,7 @@
   <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();
@@ -27,7 +27,7 @@
         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>
\ No newline at end of file
+</%block>
diff --git a/cms/templates/edit-tabs.html b/cms/templates/edit-tabs.html
index 1a44de60c1..161c938020 100644
--- 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>
\ No newline at end of file
+</%block>
diff --git a/cms/templates/edit_subsection.html b/cms/templates/edit_subsection.html
index 901e0a8008..9bb9b3a506 100644
--- a/cms/templates/edit_subsection.html
+++ b/cms/templates/edit_subsection.html
@@ -85,6 +85,7 @@
   </div>
 </div>
 </div>
+</div>
 </%block>
 
 <%block name="jsextra">
diff --git a/cms/templates/export.html b/cms/templates/export.html
index be7ee89bef..11c038e5e4 100644
--- 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>
diff --git a/cms/templates/import.html b/cms/templates/import.html
index 3e3aaa920c..f9555a6aa8 100644
--- 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>
\ No newline at end of file
+</%block>
diff --git a/cms/templates/index.html b/cms/templates/index.html
index 0f6e982b1d..007033623d 100644
--- 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">
diff --git a/cms/templates/manage_users.html b/cms/templates/manage_users.html
index 8a6b2fccea..0edf88510c 100644
--- 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();
         })
diff --git a/cms/templates/overview.html b/cms/templates/overview.html
index e0fa2aa5b6..fe2636a346 100644
--- 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>
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 0a647c632e..28e47034b0 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -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>
 
diff --git a/cms/templates/settings_advanced.html b/cms/templates/settings_advanced.html
index c40427c9ec..858dc9cbf0 100644
--- 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>
 
diff --git a/cms/templates/settings_graders.html b/cms/templates/settings_graders.html
index 2e98409585..321be55985 100644
--- 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>
 
diff --git a/cms/templates/ux-alerts.html b/cms/templates/ux-alerts.html
index b9c5fd6053..b7e91acae8 100644
--- 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">
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 493555b879..1b4d834243 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -1,33 +1,41 @@
 // 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
+// mixins - sizing
+@mixin size($width: $baseline, $height: $baseline) {
+  height: $height;
+  width: $width;
+}
+
+// mixins - sizing
+@mixin square($size: $baseline) {
+  @include size($size);
+}
+
+// ====================
+
+// mixins - image-replacement hidden text
 @mixin text-hide() {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
 }
 
-// hidden elems - screenreaders
+// mixins - hidden elems - screenreaders
 @mixin text-sr() {
   border: 0;
   clip: rect(0 0 0 0);
@@ -41,32 +49,7 @@
 
 // ====================
 
-// 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;
-}
-
-// ====================
-
-// sizing
-@mixin size($width: $baseline, $height: $baseline) {
-  height: $height;
-  width: $width;
-}
-
-@mixin square($size: $baseline) {
-  @include size($size);
-}
-
-// ====================
-
-// placeholder styling
+// mixins - placeholder styling
 @mixin placeholder($color) {
   :-moz-placeholder {
     color: $color;
@@ -74,109 +57,155 @@
   ::-webkit-input-placeholder {
     color: $color;
   }
-  :-ms-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;
+// extends - layout
+
+// used for page/view-level wrappers (for centering/grids)
+.wrapper {
+  @include clearfix();
+  @include box-sizing(border-box);
   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%;
-}
+// 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;
 
-.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;
+  li {
+    margin: 0;
+    padding: 0;
   }
 }
 
-.horizontal-divider {
-  border: none;
-  @extend .faded-hr-divider;
-  position: relative;
+// extends - image-replacement hidden text
+.text-hide {
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
 
-  &::after {
-    @extend .faded-hr-divider-light;
-    content: "";
-    display: block;
-    position: absolute;
-    top: 1px;
+// extends - hidden elems - screenreaders
+.text-sr {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// 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; }
+
+// ====================
+
+// 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);
   }
 }
 
-.fade-right-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1)));
-  border: none;
+// pill button
+.btn-pill {
+  @include border-radius($baseline/5);
 }
 
-.fade-left-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
-                                                    rgba(200,200,200, 0)));
-  border: none;
+.btn-rounded {
+  @include border-radius($baseline/2);
 }
 
-// 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;
+// 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);
+    }
+  }
 }
 
-.elem-d1 {
-  @include clearfix();
-  @include box-sizing(border-box);
-}
+// 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;
 
-.elem-d2 {
-  @include clearfix();
-  @include box-sizing(border-box);
-}
\ No newline at end of file
+  &:hover, &:active {
+
+  }
+
+  &.current, &.active {
+
+  }
+}

From 9a671f12d77ddde7915319817549e711e3a494c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Andr=C3=A9s=20Rocha?= <rocha@edx.org>
Date: Tue, 14 May 2013 17:15:46 -0400
Subject: [PATCH 06/15] Fix import con resposetype when importing
 xqueue_interface

---
 common/lib/capa/capa/responsetypes.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/lib/capa/capa/responsetypes.py b/common/lib/capa/capa/responsetypes.py
index 3b17daa830..9db91496be 100644
--- 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__)
 

From 5d783d33ade89361ae9b70a6e90abc2f8c218b28 Mon Sep 17 00:00:00 2001
From: Jay Zoldak <zoldak@edx.org>
Date: Mon, 13 May 2013 14:01:09 -0400
Subject: [PATCH 07/15] Update lettuce test for new css changes.

---
 cms/djangoapps/contentstore/features/checklists.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cms/djangoapps/contentstore/features/checklists.py b/cms/djangoapps/contentstore/features/checklists.py
index d433dbbf0d..1c9fbf0994 100644
--- 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))
 
 

From 8b77111d58fd96ee0af0ba0c6bb6c52007f1ac44 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Wed, 8 May 2013 16:35:09 -0400
Subject: [PATCH 08/15] Studio: more styling changes

typography, SASS, imports
---
 cms/static/sass/_base.scss                    | 31 +++++++++++++++++++
 cms/static/sass/_mixins-inherited.scss        |  2 ++
 .../sass/elements/_system-feedback.scss       |  2 +-
 common/static/sass/_mixins.scss               | 20 ------------
 4 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 3188ea680e..3f9db168da 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -166,6 +166,37 @@ h1 {
   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 {
   @extend .t-title3;
   margin-bottom: ($baseline*1.5);
diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss
index 2a047a4252..a766919c74 100644
--- a/cms/static/sass/_mixins-inherited.scss
+++ b/cms/static/sass/_mixins-inherited.scss
@@ -1,6 +1,8 @@
 // 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
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 55e5528ce8..53c7625c9f 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -111,7 +111,6 @@
     .nav-actions .action-primary {
       @include green-button();
       @include font-size(12); // needed due to bad button mixins for now
-
       border-color: $green-d2;
     }
 
@@ -423,6 +422,7 @@
     }
 
     .action-secondary {
+
       @extend .t-action4;
     }
   }
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 1b4d834243..6e1a34aaaa 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -26,26 +26,6 @@
   @include size($size);
 }
 
-// ====================
-
-// mixins - image-replacement hidden text
-@mixin text-hide() {
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-// mixins - hidden elems - screenreaders
-@mixin text-sr() {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
 
 // ====================
 

From 24b7defb43d2c8bfaa3d71013cd3c3c53ac7b784 Mon Sep 17 00:00:00 2001
From: frances botsford <francesbotsford@francess-MacBook-Pro.local>
Date: Tue, 14 May 2013 14:31:22 -0400
Subject: [PATCH 09/15] removed mixin for text-sr and text-hide, replaced with
 extend

---
 cms/static/sass/_base.scss                     | 6 +++---
 cms/static/sass/elements/_header.scss          | 2 +-
 cms/static/sass/elements/_system-feedback.scss | 4 ++--
 cms/static/sass/views/_checklists.scss         | 4 ++--
 cms/static/sass/views/_index.scss              | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 3f9db168da..cdd486c3a2 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -581,7 +581,7 @@ p, ul, ol, dl {
 
 // misc
 hr.divide {
-  @include text-sr();
+  @extend text-sr;
 }
 
 .item-details {
@@ -832,7 +832,7 @@ hr.divide {
 
 // basic utility
 .sr {
-  @include text-sr();
+  @extend text-sr;
 }
 
 .fake-link {
@@ -885,7 +885,7 @@ body.js {
       text-align: center;
 
       .label {
-        @include text-sr();
+        @extend text-sr;
       }
 
       .ss-icon {
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index d1ff9e6ecd..8a8dea6396 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -67,7 +67,7 @@
   padding-right: ($baseline*0.75);
 
   a {
-    @include text-hide();
+    @extend text-hide;
     display: block;
     width: 164px;
     height: 32px;
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 53c7625c9f..f5d2a12d29 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -442,7 +442,7 @@
     }
 
     .copy p {
-      @include text-sr();
+      @extend text-sr;
     }
   }
 }
@@ -597,7 +597,7 @@
     text-align: center;
 
     .label {
-      @include text-sr();
+      @extend text-sr;
     }
 
     .icon {
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index 2aaa9761c6..2980ab9274 100644
--- 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;
         }
       }
     }
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index a6d92a5a2c..4696986ed3 100644
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -72,7 +72,7 @@ body.index {
       }
 
       .logo {
-        @include text-hide();
+        @extend text-hide;
         position: relative;
         top: 3px;
         display: inline-block;

From 6c119fa3aba7eb2275361bcecc02c0e72ea8bc45 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Tue, 14 May 2013 15:15:39 -0400
Subject: [PATCH 10/15] refixed extend for text-sr and text-hide

---
 cms/static/sass/_base.scss                     | 6 +++---
 cms/static/sass/elements/_header.scss          | 2 +-
 cms/static/sass/elements/_system-feedback.scss | 4 ++--
 cms/static/sass/views/_checklists.scss         | 4 ++--
 cms/static/sass/views/_index.scss              | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index cdd486c3a2..c1a1941014 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -581,7 +581,7 @@ p, ul, ol, dl {
 
 // misc
 hr.divide {
-  @extend text-sr;
+  @extend .text-sr;
 }
 
 .item-details {
@@ -832,7 +832,7 @@ hr.divide {
 
 // basic utility
 .sr {
-  @extend text-sr;
+  @extend .text-sr;
 }
 
 .fake-link {
@@ -885,7 +885,7 @@ body.js {
       text-align: center;
 
       .label {
-        @extend text-sr;
+        @extend .text-sr;
       }
 
       .ss-icon {
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index 8a8dea6396..466b6f639b 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -67,7 +67,7 @@
   padding-right: ($baseline*0.75);
 
   a {
-    @extend text-hide;
+    @extend .text-hide;
     display: block;
     width: 164px;
     height: 32px;
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index f5d2a12d29..0a317f2fbc 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -442,7 +442,7 @@
     }
 
     .copy p {
-      @extend text-sr;
+      @extend .text-sr;
     }
   }
 }
@@ -597,7 +597,7 @@
     text-align: center;
 
     .label {
-      @extend text-sr;
+      @extend .text-sr;
     }
 
     .icon {
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index 2980ab9274..506042eda5 100644
--- 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 {
-      @extend text-hide;
+      @extend .text-hide;
       @include size(100%,($baseline/4));
       position: relative;
       display: block;
@@ -40,7 +40,7 @@ body.course.checklists {
         background: $green;
 
         .int {
-          @extend text-sr;
+          @extend .text-sr;
         }
       }
     }
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index 4696986ed3..9049a13693 100644
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -72,7 +72,7 @@ body.index {
       }
 
       .logo {
-        @extend text-hide;
+        @extend .text-hide;
         position: relative;
         top: 3px;
         display: inline-block;

From 0afe6c11abacfa9cb085b2f80e75ced72704ae83 Mon Sep 17 00:00:00 2001
From: Vasyl Nakvasiuk <vaxxxa@gmail.com>
Date: Mon, 13 May 2013 18:26:05 +0300
Subject: [PATCH 11/15] word cloud: fix pylint warnings, use
 MetadataOnlyEditingDescriptor instead of RawDescriptor

---
 common/lib/xmodule/xmodule/word_cloud_module.py | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/common/lib/xmodule/xmodule/word_cloud_module.py b/common/lib/xmodule/xmodule/word_cloud_module.py
index aca1259ed5..919fbd6a2c 100644
--- a/common/lib/xmodule/xmodule/word_cloud_module.py
+++ b/common/lib/xmodule/xmodule/word_cloud_module.py
@@ -10,7 +10,7 @@ import json
 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 +19,9 @@ 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."""
+    bool_dict = [True, "True", "true", "T", "t", "1"]
+    return value in bool_dict
 
 
 class WordCloudFields(object):
@@ -227,7 +228,7 @@ class WordCloudModule(WordCloudFields, XModule):
         return self.content
 
 
-class WordCloudDescriptor(WordCloudFields, RawDescriptor):
+class WordCloudDescriptor(WordCloudFields, MetadataOnlyEditingDescriptor):
     """Descriptor for WordCloud Xmodule."""
     module_class = WordCloudModule
     template_dir_name = 'word_cloud'

From 0eb1b97ffc514e1a8169751dbe41fbdbc9929696 Mon Sep 17 00:00:00 2001
From: Vasyl Nakvasiuk <vaxxxa@gmail.com>
Date: Mon, 13 May 2013 18:43:05 +0300
Subject: [PATCH 12/15] add more docs

---
 common/lib/xmodule/xmodule/word_cloud_module.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/common/lib/xmodule/xmodule/word_cloud_module.py b/common/lib/xmodule/xmodule/word_cloud_module.py
index 919fbd6a2c..23576cb154 100644
--- a/common/lib/xmodule/xmodule/word_cloud_module.py
+++ b/common/lib/xmodule/xmodule/word_cloud_module.py
@@ -19,7 +19,11 @@ log = logging.getLogger(__name__)
 
 
 def pretty_bool(value):
-    """Check value for possible `True` value."""
+    """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
 

From d86dab9a3a6efda997e26843b844897e7c90f2fe Mon Sep 17 00:00:00 2001
From: Vasyl Nakvasiuk <vaxxxa@gmail.com>
Date: Tue, 14 May 2013 12:00:24 +0300
Subject: [PATCH 13/15] word cloud: add more docs about
 `display_student_percents` options

---
 doc/public/course_data_formats/word_cloud/word_cloud.rst | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/doc/public/course_data_formats/word_cloud/word_cloud.rst b/doc/public/course_data_formats/word_cloud/word_cloud.rst
index 32212510c1..4ee1c8db65 100644
--- 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,17 @@ 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::
 
    If you want to use the same word cloud (the same storage of words), you must use the same display_name value.
 
+
 Code Example
 ============
 

From 92476ecacdb419ea5896b00d027315a0d0a59e74 Mon Sep 17 00:00:00 2001
From: Vasyl Nakvasiuk <vaxxxa@gmail.com>
Date: Tue, 14 May 2013 12:54:05 +0300
Subject: [PATCH 14/15] add docs note about possible values for boolean type

---
 doc/public/course_data_formats/word_cloud/word_cloud.rst | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/doc/public/course_data_formats/word_cloud/word_cloud.rst b/doc/public/course_data_formats/word_cloud/word_cloud.rst
index 4ee1c8db65..5c3d31e149 100644
--- a/doc/public/course_data_formats/word_cloud/word_cloud.rst
+++ b/doc/public/course_data_formats/word_cloud/word_cloud.rst
@@ -24,6 +24,12 @@ The following attributes can be specified for this tag::
 
    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.

From b02e92a80c563432a1d51bccce4986ce430fe340 Mon Sep 17 00:00:00 2001
From: Vasyl Nakvasiuk <vaxxxa@gmail.com>
Date: Wed, 15 May 2013 11:35:56 +0300
Subject: [PATCH 15/15] fix word cloud test

---
 common/lib/xmodule/xmodule/word_cloud_module.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/lib/xmodule/xmodule/word_cloud_module.py b/common/lib/xmodule/xmodule/word_cloud_module.py
index 23576cb154..440da8b887 100644
--- a/common/lib/xmodule/xmodule/word_cloud_module.py
+++ b/common/lib/xmodule/xmodule/word_cloud_module.py
@@ -10,6 +10,7 @@ import json
 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
 
@@ -232,9 +233,8 @@ class WordCloudModule(WordCloudFields, XModule):
         return self.content
 
 
-class WordCloudDescriptor(WordCloudFields, MetadataOnlyEditingDescriptor):
+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"