diff --git a/.stylelintignore b/.stylelintignore
index 8c0fcd5e51..e35dcf12ef 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,2 +1,4 @@
+common/lib/xmodule/xmodule/css
 common/static/sass/bourbon
+common/static/xmodule/modules/css
 lms/static/sass/vendor
diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss
index 4d438346fc..97fe07aecc 100644
--- a/common/lib/xmodule/xmodule/css/annotatable/display.scss
+++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss
@@ -22,16 +22,18 @@ $annotatable--body-font-size: em(14);
   border-radius: 0.5em;
   margin-bottom: 0.5em;
 
-  &.shaded { background-color: #EDEDED; }
+  &.shaded { background-color: #ededed; }
 
   .annotatable-section-title {
     font-weight: bold;
     a { font-weight: normal; }
   }
+
   .annotatable-section-body {
     border-top: 1px solid $annotatable--border-color;
     margin-top: 0.5em;
     padding-top: 0.5em;
+
     @include clearfix();
   }
 
@@ -40,6 +42,7 @@ $annotatable--body-font-size: em(14);
     margin-left: 4em;
     b { font-weight: bold; }
     i { font-style: italic; }
+
     code {
       display: inline;
       white-space: pre;
@@ -58,9 +61,11 @@ $annotatable--body-font-size: em(14);
 
 .annotatable-span {
   @extend %ui-fake-link;
+
   display: inline;
 
   $highlight_index: 0;
+
   @each $highlight in (
     (yellow rgba(255,255,10,0.3) rgba(255,255,10,0.9)),
     (red rgba(178,19,16,0.3) rgba(178,19,16,0.9)),
@@ -80,6 +85,7 @@ $annotatable--body-font-size: em(14);
         &.selected { background-color: $selected_color; }
       }
     }
+
     &.highlight-#{$marker} {
       background-color: $color;
       &.selected { background-color: $selected_color; }
@@ -89,6 +95,7 @@ $annotatable--body-font-size: em(14);
   &.hide {
     cursor: none;
     background-color: inherit;
+
     .annotatable-icon {
       display: none;
     }
@@ -113,20 +120,24 @@ $annotatable--body-font-size: em(14);
     background-color: transparent;
     padding: ($baseline/4) ($baseline/2);
     border: none;
+
     .ui-tooltip-title {
       padding: ($baseline/4) 0;
       border-bottom: 2px solid #333;
       font-weight: bold;
     }
+
     .ui-tooltip-icon {
       right: 10px;
       background: #333;
     }
+
     .ui-state-hover {
       color: inherit;
       border: 1px solid $gray-l3;
     }
   }
+
   .ui-tooltip-content {
     color: inherit;
     font-size: em(14);
@@ -136,16 +147,19 @@ $annotatable--body-font-size: em(14);
     background-color: transparent;
     border-color: transparent;
   }
+
   p {
-      color: inherit;
-      line-height: normal;
+    color: inherit;
+    line-height: normal;
   }
 }
 
 .ui-tooltip.qtip.ui-tooltip-annotatable {
   max-width: 375px;
+
   .ui-tooltip-content {
     padding: 0 ($baseline/2);
+
     .annotatable-comment {
       display: block;
       margin: 0 0 ($baseline/2) 0;
@@ -153,6 +167,7 @@ $annotatable--body-font-size: em(14);
       overflow: auto;
       line-height: normal;
     }
+
     .annotatable-reply {
       display: block;
       border-top: 2px solid #333;
@@ -161,6 +176,7 @@ $annotatable--body-font-size: em(14);
       text-align: center;
     }
   }
+
   &:after {
     content: '';
     display: inline-block;
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 99ed64e4be..5ed54b3df8 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -46,10 +46,10 @@ $asterisk-icon: '\f069'; // .fa-asterisk
 // +Mixins - Status Icon - Capa
 // ====================
 @mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d"){
-
   .status-icon {
     &:after {
       @extend %use-font-awesome;
+
       color: $color;
       font-size: 1.2em;
       content: $fontAwesomeIcon;
@@ -65,6 +65,7 @@ h2 {
 
   &.problem-header {
     display: inline-block;
+
     section.staff {
       margin-top: ($baseline*1.5);
       font-size: 80%;
@@ -92,6 +93,7 @@ h2 {
 
 .feedback-hint-incorrect {
   @extend %feedback-hint;
+
   .icon {
     color: $incorrect;
   }
@@ -100,6 +102,7 @@ h2 {
 .feedback-hint-partially-correct,
 .feedback-hint-correct {
   @extend %feedback-hint;
+
   .icon {
     color: $correct;
   }
@@ -200,12 +203,14 @@ div.problem {
 // Choice Group - silent class
 %choicegroup-base {
   @include clearfix();
+
   min-width: 100px;
   width: auto !important;
   width: 100px;
 
   label {
     @include box-sizing(border-box);
+
     display: inline-block;
     clear: both;
     margin-bottom: ($baseline/2);
@@ -224,6 +229,7 @@ div.problem {
 
     &.choicegroup_correct {
       @include status-icon($correct, $checkmark-icon);
+
       border: 2px solid $correct;
 
       // keep green for correct answers on hover.
@@ -234,6 +240,7 @@ div.problem {
 
     &.choicegroup_partially-correct {
       @include status-icon($partially-correct, $asterisk-icon);
+
       border: 2px solid $partially-correct;
 
       // keep green for correct answers on hover.
@@ -244,6 +251,7 @@ div.problem {
 
     &.choicegroup_incorrect {
       @include status-icon($incorrect, $cross-icon);
+
       border: 2px solid $incorrect;
 
       // keep red for incorrect answers on hover.
@@ -283,9 +291,11 @@ div.problem {
 div.problem {
   .choicegroup {
     @extend %choicegroup-base;
+
     label {
       @include padding($baseline/2);
       @include padding-left($baseline*1.9);
+
       position: relative;
       font-size: $base-font-size;
       line-height: normal;
@@ -295,6 +305,7 @@ div.problem {
     input[type="radio"],
     input[type="checkbox"] {
       @include left(em(9));
+
       position: absolute;
       top: em(9);
     }
@@ -317,9 +328,8 @@ div.problem {
 // ====================
 // Summary status indicators shown after the input area
 div.problem {
-
   .indicator-container {
-      @include margin-left($baseline*.75);
+    @include margin-left($baseline*.75);
 
     .status {
       width: $baseline;
@@ -398,6 +408,7 @@ div.problem {
 
       span.clarification i {
         font-style: normal;
+
         &:hover {
           color: $blue;
         }
@@ -447,10 +458,12 @@ div.problem {
 
       &:before {
         @extend %t-strong;
+
         display: inline;
         content: "Answer: ";
 
       }
+
       &:empty {
         &:before {
           display: none;
@@ -468,6 +481,7 @@ div.problem {
 
       img.loading {
         @include padding-left($baseline/2);
+
         display: inline-block;
       }
 
@@ -533,12 +547,14 @@ div.problem {
 
     .reload {
       @include float(right);
+
       margin: ($baseline/2);
     }
 
 
     .grader-status {
       @include clearfix();
+
       margin: $baseline/2 0;
       padding: $baseline/2;
       border-radius: 5px;
@@ -583,6 +599,7 @@ div.problem {
       }
 
     }
+
     .evaluation {
       p {
         margin-bottom: ($baseline/5);
@@ -598,6 +615,7 @@ div.problem {
     .evaluation-response {
       header {
         text-align: right;
+
         a {
           font-size: .85em;
         }
@@ -686,7 +704,6 @@ div.problem {
     table-layout: auto;
 
     td, th {
-
       &.cont-justified-left {
         text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
       }
@@ -702,6 +719,7 @@ div.problem {
 
     th {
       @extend %t-strong;
+
       text-align: left;
     }
 
@@ -760,9 +778,9 @@ div.problem {
 // ====================
 .problem {
   .capa_inputtype.textline, .inputtype.formulaequationinput {
-
     input {
       @include box-sizing(border-box);
+
       border: 2px solid $gray-l4;
       border-radius: 3px;
       min-width: 160px;
@@ -777,7 +795,6 @@ div.problem {
 
     // CASE: incorrect answer
     > .incorrect {
-
       input {
         border: 2px solid $incorrect;
       }
@@ -789,7 +806,6 @@ div.problem {
 
     // CASE: partially correct answer
     > .partially-correct {
-
       input {
         border: 2px solid $partially-correct;
       }
@@ -801,7 +817,6 @@ div.problem {
 
     // CASE: correct answer
     > .correct {
-
       input {
         border: 2px solid $correct;
       }
@@ -813,7 +828,6 @@ div.problem {
 
     // CASE: submitted, correctness withheld
     > .submitted {
-
       input {
         border: 2px solid $submitted;
       }
@@ -825,7 +839,6 @@ div.problem {
 
     // CASE: unanswered and unsubmitted
     > .unanswered, > .unsubmitted {
-
       input {
         border: 2px solid $gray-l4;
       }
@@ -843,6 +856,7 @@ div.problem {
 
   .trailing_text {
     @include margin-right($baseline/2);
+
     display: inline-block;
   }
 }
@@ -871,7 +885,6 @@ div.problem {
 // +Problem - CodeMirror
 // ====================
 div.problem {
-
   .CodeMirror {
     border: 1px solid black;
     font-size: 14px;
@@ -879,9 +892,9 @@ div.problem {
     resize: none;
 
     .cm-tab {
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
-        background-position: right;
-        background-repeat: no-repeat;
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
+      background-position: right;
+      background-repeat: no-repeat;
     }
 
     pre {
@@ -899,6 +912,7 @@ div.problem {
 
       &.CodeMirror-cursor {
         @extend %ui-depth1;
+
         position: absolute;
         visibility: hidden;
         width: 0;
@@ -944,6 +958,7 @@ div.problem .action {
 
   .problem-action-button-wrapper {
     @include border-right(1px solid $light-gray1);
+
     display: inline-block;
 
     &:last-child {
@@ -953,6 +968,7 @@ div.problem .action {
 
   .problem-action-btn {
     @include margin-right($baseline / 5);
+
     max-width: 110px;
 
     .icon {
@@ -974,15 +990,18 @@ div.problem .action {
       max-width: 100%;
       padding-bottom: $baseline;
     }
+
     .submit {
       @include margin-right($baseline / 2);
       @include float(left);
+
       white-space: nowrap;
     }
   }
 
   .submission-feedback {
     @include margin-right($baseline / 2);
+
     margin-top: $baseline / 2;
     display: inline-block;
     color: $gray-d1;
@@ -1034,6 +1053,7 @@ div.problem {
 
     &:first-child {
       @extend %t-strong;
+
       margin-bottom: 0;
     }
 
@@ -1043,12 +1063,12 @@ div.problem {
   .detailed-targeted-feedback-partially-correct,
   .detailed-targeted-feedback-correct {
     > p {
-        margin: 0;
-        font-weight: normal;
+      margin: 0;
+      font-weight: normal;
 
-        &:first-child {
-          @extend %t-strong;
-        }
+      &:first-child {
+        @extend %t-strong;
+      }
     }
   }
 
@@ -1063,6 +1083,7 @@ div.problem {
 
   .notification {
     @include float(left);
+
     margin-top: $baseline / 2;
     padding: ($baseline / 2.5) ($baseline / 2) ($baseline / 5) ($baseline / 2);
     line-height: $base-line-height;
@@ -1089,6 +1110,7 @@ div.problem {
 
       .icon {
         @include margin-right(3 * $baseline / 4);
+
         color: $uxpl-gray-dark;
       }
 
@@ -1103,6 +1125,7 @@ div.problem {
 
     .icon {
       @include float(left);
+
       position: relative;
       top: $baseline / 5;
     }
@@ -1133,6 +1156,7 @@ div.problem {
 
   .notification-btn {
     @include float(right);
+
     padding: ($baseline / 10) ($baseline / 4);
     min-width: ($baseline * 3);
     display: block;
@@ -1183,7 +1207,7 @@ div.problem {
   }
 
   .capa_reset>h2 {
-    color: #aa0000;
+    color: #a00;
   }
 
   .capa_reset li {
@@ -1195,6 +1219,7 @@ div.problem {
 
     h3 {
       @extend %t-strong;
+
       padding: 9px;
       border-bottom: 1px solid #e3e3e3;
       background: #eee;
@@ -1236,6 +1261,7 @@ div.problem {
 
       h3 {
         @extend %t-strong;
+
         color: #aaa;
         text-transform: uppercase;
         font-style: normal;
@@ -1263,6 +1289,7 @@ div.problem {
       a.full {
         @include position(absolute, 0 0 1px 0);
         @include box-sizing(border-box);
+
         display: block;
         padding: ($baseline/5);
         background: $gray-l4;
@@ -1355,7 +1382,7 @@ div.problem {
           background: url('#{$static-path}/images/incorrect-icon.png') left 20px no-repeat;
 
           .result-actual-output {
-            color: #B00;
+            color: #b00;
           }
         }
 
@@ -1366,7 +1393,7 @@ div.problem {
           border-left: 20px solid #fafafa;
 
           bs {
-            color: #bb0000;
+            color: #b00;
           }
 
           bg {
@@ -1446,6 +1473,7 @@ div.problem {
 
     .annotation-header {
       @extend %t-strong;
+
       padding: .5em 1em;
       border-bottom: 1px solid $gray-l3;
     }
@@ -1487,6 +1515,7 @@ div.problem {
 
         .tag {
           @extend %ui-fake-link;
+
           display: inline-block;
           margin-left: ($baseline*2);
           border: 1px solid rgb(102,102,102);
@@ -1495,6 +1524,7 @@ div.problem {
             background-color: $annotation-yellow;
           }
         }
+
         .tag-status {
           position: absolute;
           left: 0;
@@ -1507,6 +1537,7 @@ div.problem {
       $num-lines-to-show: 5;
       $line-height: 1.4em;
       $padding: .2em;
+
       padding: $padding (2 * $padding);
       width: 100%;
       height: ($num-lines-to-show * $line-height) + (2*$padding) - (($line-height - 1)/2);
@@ -1529,6 +1560,7 @@ div.problem {
 
       &:before {
         @extend %t-strong;
+
         display: block;
         content: "debug input value";
         text-transform: uppercase;
@@ -1575,6 +1607,7 @@ div.problem {
     label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
       &:after {
         @include margin-left($baseline*.75);
+
         content: url('#{$static-path}/images/correct-icon.png');
       }
     }
@@ -1590,7 +1623,6 @@ div.problem {
 
 // NOTE: temporary override until image inputs use same base html structure as other common capa input types.
 div.problem .imageinput.capa_inputtype {
-
   .status {
     display: inline-block;
     position: relative;
@@ -1621,7 +1653,6 @@ div.problem .imageinput.capa_inputtype {
 
 // NOTE: temporary override until annotation problem inputs use same base html structure as other common capa input types.
 div.problem .annotation-input {
-
   .tag-status {
     display: inline-block;
     position: relative;
diff --git a/common/lib/xmodule/xmodule/css/codemirror/codemirror.scss b/common/lib/xmodule/xmodule/css/codemirror/codemirror.scss
index 0dc07919ae..bf60ea6a49 100644
--- a/common/lib/xmodule/xmodule/css/codemirror/codemirror.scss
+++ b/common/lib/xmodule/xmodule/css/codemirror/codemirror.scss
@@ -2,4 +2,4 @@
   background: #fff;
   font-size: 13px;
   color: #3c3c3c;
-}
\ No newline at end of file
+}
diff --git a/common/lib/xmodule/xmodule/css/editor/edit.scss b/common/lib/xmodule/xmodule/css/editor/edit.scss
index d8cb28f966..cd740c4117 100644
--- a/common/lib/xmodule/xmodule/css/editor/edit.scss
+++ b/common/lib/xmodule/xmodule/css/editor/edit.scss
@@ -9,13 +9,16 @@
   .editor-bar {
     @include clearfix();
     @include linear-gradient(top, #d4dee8, #c9d5e2);
+
     position: relative;
     padding: ($baseline/4);
     border-bottom-color: #a5aaaf;
 
     button {
       display: inline-block;
+
       @include float(left);
+
       padding: 3px ($baseline/2) 5px;
       margin-left: 7px;
       border: 0;
@@ -23,7 +26,7 @@
       background: transparent;
 
       .icon {
-          height: 21px;
+        height: 21px;
       }
 
       &:hover,
@@ -36,6 +39,7 @@
   .editor-tabs {
     position: absolute;
     top: 10px;
+
     @include right(10px);
     @include text-align(left);
     @include direction();
@@ -55,7 +59,9 @@
       padding: 7px 20px 3px;
       border: 1px solid #a5aaaf;
       border-radius: 3px 3px 0 0;
+
       @include linear-gradient(top, $transparent 87%, rgba(0, 0, 0, .06));
+
       background-color: #e5ecf3;
       font-size: 13px;
       color: #3c3c3c;
diff --git a/common/lib/xmodule/xmodule/css/html/display.scss b/common/lib/xmodule/xmodule/css/html/display.scss
index 27e358cb3b..b55fb0582e 100644
--- a/common/lib/xmodule/xmodule/css/html/display.scss
+++ b/common/lib/xmodule/xmodule/css/html/display.scss
@@ -4,11 +4,12 @@
 }
 
 h1 {
-    color: $baseFontColor;
-    font: normal 2em/1.4em $sans-serif;
-    letter-spacing: 1px;
-    @include margin(0, 0, 1.416em, 0);
-  }
+  color: $baseFontColor;
+  font: normal 2em/1.4em $sans-serif;
+  letter-spacing: 1px;
+
+  @include margin(0, 0, 1.416em, 0);
+}
 
 h2 {
   color: #646464;
@@ -20,6 +21,7 @@ h2 {
 
 h3, h4, h5, h6 {
   @include margin(0, 0, ($baseline/2), 0);
+
   font-weight: 600;
 }
 
@@ -73,6 +75,7 @@ blockquote {
 ol, ul {
   // Using the lower level Bi App Sass mixin to avoid @padding conflicts with bourbon.
   @include bi-app-compact(padding, 0, 0, 0, 1em);
+
   margin: 1em 0;
   color: $baseFontColor;
 
@@ -152,9 +155,9 @@ th {
 
 // modal - image zoom, fill window
 .wrapper-modal-image {
-  
   .modal-ui-icon {
     @extend %ui-fake-link;
+
     position: absolute;
     display: block;
     padding: ($baseline/4) 7px;
@@ -175,6 +178,7 @@ th {
   
   .image-link {
     @extend %ui-fake-link;
+
     position: relative;
     display: block;
     
@@ -192,6 +196,7 @@ th {
   .image-modal {
     @extend %ui-fake-link;
     @extend %ui-depth5;
+
     position: fixed;
     top: 0;
     left: 0;
@@ -247,9 +252,11 @@ th {
             &.action-zoom-in {
               margin-right: ($baseline/4);
             }
+
             &.action-zoom-out {
               margin-left: ($baseline/4);
             }
+
             &.is-disabled {
               opacity: 0.5;
               cursor: default;
@@ -275,11 +282,11 @@ th {
         }
       }
     }
+
     &.image-is-zoomed {
       display: block;
       
       .image-content .image-wrapper {
-        
         img {
           max-width: none;
           max-height: none;
diff --git a/common/lib/xmodule/xmodule/css/html/edit.scss b/common/lib/xmodule/xmodule/css/html/edit.scss
index ec98e9b945..2c7b4542b4 100644
--- a/common/lib/xmodule/xmodule/css/html/edit.scss
+++ b/common/lib/xmodule/xmodule/css/html/edit.scss
@@ -4,6 +4,7 @@
 
   .CodeMirror {
     @include box-sizing(border-box);
+
     height: 435px;
   }
 
diff --git a/common/lib/xmodule/xmodule/css/lti/lti.scss b/common/lib/xmodule/xmodule/css/lti/lti.scss
index e7ca5c7be2..88540aee09 100644
--- a/common/lib/xmodule/xmodule/css/lti/lti.scss
+++ b/common/lib/xmodule/xmodule/css/lti/lti.scss
@@ -12,46 +12,48 @@ div.problem-progress {
 
 
 div.lti {
-    // align center
-    margin: 0 auto;
+  // align center
+  margin: 0 auto;
 
-    .wrapper-lti-link {
-        @include font-size(14);
-        background-color: $sidebar-color;
-        padding: $baseline;
+  .wrapper-lti-link {
+    @include font-size(14);
 
-        .lti-link {
-            margin-bottom: 0;
-            text-align: right;
+    background-color: $sidebar-color;
+    padding: $baseline;
 
-            .link_lti_new_window {
-                @extend .gray-button;
-                @include font-size(13);
-                @include line-height(14);
-            }
-        }
+    .lti-link {
+      margin-bottom: 0;
+      text-align: right;
+
+      .link_lti_new_window {
+        @extend .gray-button;
+
+        @include font-size(13);
+        @include line-height(14);
+      }
     }
+  }
 
-    form.ltiLaunchForm {
-        display: none;
-    }
+  form.ltiLaunchForm {
+    display: none;
+  }
 
-    iframe.ltiLaunchFrame {
-        width: 100%;
-        height: 800px;
-        display: block;
-        border: 0px;
-    }
+  iframe.ltiLaunchFrame {
+    width: 100%;
+    height: 800px;
+    display: block;
+    border: 0px;
+  }
 
-    h4.problem-feedback-label {
-        font-weight: 100;
-        font-size: em(16);
-        font-family: "Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif;
-    }
+  h4.problem-feedback-label {
+    font-weight: 100;
+    font-size: em(16);
+    font-family: "Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif;
+  }
 
-    div.problem-feedback {
-        margin-top: ($baseline/4);
-        margin-bottom: ($baseline/4);
+  div.problem-feedback {
+    margin-top: ($baseline/4);
+    margin-bottom: ($baseline/4);
 
-    }
+  }
 }
diff --git a/common/lib/xmodule/xmodule/css/poll/display.scss b/common/lib/xmodule/xmodule/css/poll/display.scss
index f4c14ac470..fd15f8c49d 100644
--- a/common/lib/xmodule/xmodule/css/poll/display.scss
+++ b/common/lib/xmodule/xmodule/css/poll/display.scss
@@ -10,7 +10,7 @@ div.poll_question {
   }
 
   .inline {
-      display: inline;
+    display: inline;
   }
 
   h3 {
@@ -42,7 +42,7 @@ div.poll_question {
     margin-bottom: $baseline;
 
     &.short {
-        clear: both;
+      clear: both;
     }
 
     .question {
@@ -59,6 +59,7 @@ div.poll_question {
 
       .button {
         @extend %ui-fake-link;
+
         -webkit-appearance: none;
         -webkit-background-clip: padding-box;
         -webkit-border-image: none;
@@ -94,13 +95,11 @@ div.poll_question {
         /* display: inline-block; */
         display: inline;
         float: left;
-
         font-family: 'Open Sans', Verdana, Geneva, sans-serif;
         font-size: 13px;
         font-style: normal;
         font-variant: normal;
         font-weight: bold;
-
         letter-spacing: normal;
         line-height: 25.59375px;
         margin-bottom: ($baseline*0.75);
@@ -113,13 +112,12 @@ div.poll_question {
         text-transform: none;
         vertical-align: top;
         white-space: pre-line;
-
         width: 25px;
         height: 25px;
-
         word-spacing: 0px;
         writing-mode: lr-tb;
       }
+
       .button.answered {
         -webkit-box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
         background-color: rgb(29, 157, 217);
@@ -136,6 +134,7 @@ div.poll_question {
 
       .text {
         @extend %ui-fake-link;
+
         display: inline;
         float: left;
         width: 80%;
diff --git a/common/lib/xmodule/xmodule/css/problem/edit.scss b/common/lib/xmodule/xmodule/css/problem/edit.scss
index a3c6576e9a..c1a898620e 100644
--- a/common/lib/xmodule/xmodule/css/problem/edit.scss
+++ b/common/lib/xmodule/xmodule/css/problem/edit.scss
@@ -1,7 +1,5 @@
 .editor-bar {
-
   .editor-tabs {
-
     .advanced-toggle {
       height: auto;
       margin-top: -4px;
@@ -47,9 +45,12 @@
   left: 100%;
   width: 0;
   border-radius: 0 3px 3px 0;
+
   @include linear-gradient(left, $shadow-l1, $transparent 4px);
+
   background-color: $white;
   overflow: hidden;
+
   @include transition(width .3s linear 0s);
 
   &.shown {
@@ -70,6 +71,7 @@
 
   .row {
     @include clearfix();
+
     padding-bottom: 5px !important;
     margin-bottom: 10px !important;
     border-bottom: 1px solid #ddd !important;
@@ -88,7 +90,7 @@
       margin-right: 30px;
 
       .icon {
-          height: ($baseline * 1.5);
+        height: ($baseline * 1.5);
       }
     }
   }
@@ -105,8 +107,8 @@
 }
 
 .problem-editor {
-// adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror
- .markdown-box+.CodeMirror {
+  // adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror
+  .markdown-box+.CodeMirror {
     padding: 10px;
   }
 }
diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss
index 2957542b4d..f23ba567bd 100644
--- a/common/lib/xmodule/xmodule/css/sequence/display.scss
+++ b/common/lib/xmodule/xmodule/css/sequence/display.scss
@@ -9,6 +9,7 @@ $seq-nav-height: 44px;
 // repeated extends - needed since LMS styling was referenced
 .block-link {
   @include border-left(1px solid $seq-nav-border-color);
+
   display: block;
 
   &:hover, &:focus {
@@ -18,6 +19,7 @@ $seq-nav-height: 44px;
 
 .topbar {
   @include clearfix();
+
   border-bottom: 1px solid $seq-nav-border-color;
 
   @media print {
@@ -27,6 +29,7 @@ $seq-nav-height: 44px;
   a {
     &.block-link {
       @include border-left(1px solid $seq-nav-border-color);
+
       display: block;
 
       &:hover, &:focus {
@@ -43,7 +46,6 @@ $seq-nav-height: 44px;
   background-repeat: no-repeat;
   border: none;
   border-radius: 0;
-
   background-clip: border-box;
   box-shadow: none;
   box-sizing: content-box;
@@ -57,6 +59,7 @@ $seq-nav-height: 44px;
 
 .sequence-nav {
   @extend .topbar;
+
   margin: 0 0 $baseline 0;
   position: relative;
   border-bottom: none;
@@ -74,6 +77,7 @@ $seq-nav-height: 44px;
 
   .sequence-list-wrapper {
     @extend %ui-depth2;
+
     position: relative;
     height: 100%;
     flex-grow: 1;
@@ -151,7 +155,9 @@ $seq-nav-height: 44px;
 
         .sequence-tooltip {
           @include text-align(left);
+
           @extend %ui-depth2;
+
           margin-top: ($baseline/5);
           background: $seq-nav-tooltip-color;
           color: $white;
@@ -176,6 +182,7 @@ $seq-nav-height: 44px;
           &::after {
             @include transform(rotate(45deg));
             @include right(18px);
+
             background: $seq-nav-tooltip-color;
             content: " ";
             display: block;
@@ -197,6 +204,7 @@ $seq-nav-height: 44px;
 
 .sequence-nav-button {
   @extend %ui-depth3;
+
   display: block;
   top: 0;
   height: 100%;
diff --git a/common/lib/xmodule/xmodule/css/tabs/codemirror.scss b/common/lib/xmodule/xmodule/css/tabs/codemirror.scss
index 0b10a1a09d..4db2b33863 100644
--- a/common/lib/xmodule/xmodule/css/tabs/codemirror.scss
+++ b/common/lib/xmodule/xmodule/css/tabs/codemirror.scss
@@ -3,6 +3,7 @@
 
   .CodeMirror {
     @include box-sizing(border-box);
+
     width: 100%;
     position: relative;
     height: 379px;
diff --git a/common/lib/xmodule/xmodule/css/tabs/tabs.scss b/common/lib/xmodule/xmodule/css/tabs/tabs.scss
index bca3f3ef5e..20b71ce4b9 100644
--- a/common/lib/xmodule/xmodule/css/tabs/tabs.scss
+++ b/common/lib/xmodule/xmodule/css/tabs/tabs.scss
@@ -18,11 +18,13 @@
 
 .editor-with-tabs {
   @include clearfix();
+
   position: relative;
 
 
   .edit-header {
     @include box-sizing(border-box);
+
     padding: 18px $baseline;
     top: 0 !important; // ugly override for second level tab override
     right: 0;
@@ -62,17 +64,19 @@
         margin-left: 8px;
 
         a.tab {
-            @include font-size(14);
-            @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-            border: 1px solid $blue-d1;
-            border-radius: 3px;
-            padding: ($baseline/4) ($baseline);
-            background-color: $blue;
-            font-weight: bold;
-            color: $white;
+          @include font-size(14);
+          @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+
+          border: 1px solid $blue-d1;
+          border-radius: 3px;
+          padding: ($baseline/4) ($baseline);
+          background-color: $blue;
+          font-weight: bold;
+          color: $white;
 
           &.current {
             @include linear-gradient($blue, $blue);
+
             color: $blue-d1;
             box-shadow: inset 0 1px 2px 1px $shadow-l1;
             background-color: $blue-d4;
@@ -81,7 +85,7 @@
 
           &:hover, &:focus {
             box-shadow: inset 0 1px 2px 1px  $shadow;
-            background-image: linear-gradient(#009FE6, #009FE6) !important;
+            background-image: linear-gradient(#009fe6, #009fe6) !important;
           }
         }
       }
diff --git a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss
index 05739ef2ad..8df40efdb6 100644
--- a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss
+++ b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss
@@ -23,6 +23,7 @@ $a11y--blue-s1: saturate($blue,15%);
 
   .a11y-menu-list {
     @extend %ui-depth3;
+
     top: 100%;
     margin: 0;
     padding: 0;
@@ -34,6 +35,7 @@ $a11y--blue-s1: saturate($blue,15%);
 
     li {
       @extend %ui-fake-link;
+
       margin: 0;
       padding: 0;
       border-bottom: 1px solid #eee;
@@ -92,6 +94,7 @@ $a11y--blue-s1: saturate($blue,15%);
     > a {
       @include transition(all $tmg-f2 ease-in-out 0s);
       @include font-size(12);
+
       display: block;
       border-radius: 0 3px 3px 0;
       background-color: $very-light-text;
@@ -105,6 +108,7 @@ $a11y--blue-s1: saturate($blue,15%);
 
       &:after {
         @extend %use-font-awesome;
+
         content: "\f0d7";
         position: absolute;
         right: ($baseline*0.5);
@@ -135,6 +139,7 @@ $a11y--blue-s1: saturate($blue,15%);
 
 .contextmenu, .submenu {
   @extend %ui-depth5;
+
   border: 1px solid #333;
   background: $white;
   color: #333;
@@ -149,7 +154,7 @@ $a11y--blue-s1: saturate($blue,15%);
   white-space: nowrap;
 
   &.is-opened {
-     display: block;
+    display: block;
   }
 
   .menu-item, .submenu-item {
@@ -158,8 +163,8 @@ $a11y--blue-s1: saturate($blue,15%);
     outline: none;
 
     & > span {
-        color: #333;
-      }
+      color: #333;
+    }
 
     &:first-child {
       border-top: none;
@@ -217,6 +222,7 @@ $a11y--blue-s1: saturate($blue,15%);
 
 .overlay {
   @extend %ui-depth4;
+
   position: fixed;
   top: 0;
   left: 0;
diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index 03d61b7630..1bdad6f62f 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -17,7 +17,7 @@ $secondary-light: rgb(219, 139, 175); // UXPL secondary light
 $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
 & {
-    margin-bottom: ($baseline*1.5);
+  margin-bottom: ($baseline*1.5);
 }
 
 .is-hidden {
@@ -26,6 +26,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
 .video {
   @include clearfix();
+
   background: rgb(245, 245, 245); // UXPL grayscale x-back
   display: block;
   margin: 0 -12px;
@@ -40,9 +41,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
   }
 
   &.is-initialized {
-
     .video-wrapper {
-
       .spinner {
         display: none;
       }
@@ -51,7 +50,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
   // CASE: video pre-roll state
   &.is-pre-roll {
-
     .slider {
       visibility: hidden;
     }
@@ -70,6 +68,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
   .tc-wrapper {
     @include clearfix();
+
     position: relative;
   }
 
@@ -80,71 +79,72 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     height: 0px;
   }
 
-    .downloads-heading {
-        margin: 1em 0 0 0;
+  .downloads-heading {
+    margin: 1em 0 0 0;
+  }
+
+  .wrapper-downloads {
+    display: flex;
+
+    .hd {
+      margin: 0;
     }
 
-    .wrapper-downloads {
-        display: flex;
+    .wrapper-download-video,
+    .wrapper-download-transcripts,
+    .wrapper-handouts,
+    .branding {
+      flex: 1;
+      margin-top: $baseline;
 
-        .hd {
-            margin: 0;
-        }
+      @include padding-right($baseline);
 
-        .wrapper-download-video,
-        .wrapper-download-transcripts,
-        .wrapper-handouts,
-        .branding {
-            flex: 1;
-            margin-top: $baseline;
-            @include padding-right($baseline);
-            vertical-align: top;
-        }
-
-        .wrapper-download-video {
-
-            .video-sources {
-                margin: 0;
-            }
-        }
-
-        .wrapper-download-transcripts {
-
-            .list-download-transcripts {
-                margin: 0;
-                padding: 0;
-                list-style: none;
-
-                .transcript-option {
-                    margin: 0;
-                }
-            }
-        }
-
-        .branding {
-            @include padding-right(0);
-
-            .host-tag {
-                position: absolute;
-                left: -9999em;
-                display: inline-block;
-                vertical-align: middle;
-                color: $base-font-color;
-            }
-
-            .brand-logo {
-                display: inline-block;
-                max-width: 100%;
-                max-height: ($baseline*2);
-                padding: ($baseline/4) 0;
-                vertical-align: middle;
-            }
-        }
+      vertical-align: top;
     }
 
+    .wrapper-download-video {
+      .video-sources {
+        margin: 0;
+      }
+    }
+
+    .wrapper-download-transcripts {
+      .list-download-transcripts {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        .transcript-option {
+          margin: 0;
+        }
+      }
+    }
+
+    .branding {
+      @include padding-right(0);
+
+      .host-tag {
+        position: absolute;
+        left: -9999em;
+        display: inline-block;
+        vertical-align: middle;
+        color: $base-font-color;
+      }
+
+      .brand-logo {
+        display: inline-block;
+        max-width: 100%;
+        max-height: ($baseline*2);
+        padding: ($baseline/4) 0;
+        vertical-align: middle;
+      }
+    }
+  }
+
   .video-wrapper {
     @include float(left);
     @include margin-right(flex-gutter(9));
+
     width: flex-grid(6, 9);
     background-color: black;
     position: relative;
@@ -161,12 +161,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
     .video-player-pre,
     .video-player-post {
-       height: 50px;
-       background-color: rgb(17, 16, 16) // UXPL grayscale black;
+      height: 50px;
+      background-color: rgb(17, 16, 16) // UXPL grayscale black;
     }
 
     .spinner {
       @include transform(translate(-50%, -50%));
+
       position: absolute;
       z-index: 1;
       background: rgba(0, 0, 0, 0.7);
@@ -177,6 +178,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
       &:after{
         @include animation(rotateCW 3s infinite linear);
+
         content: '';
         display: block;
         width: 30px;
@@ -190,6 +192,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
     .btn-play {
       @include transform(translate(-50%, -50%));
+
       position: absolute;
       z-index: 1;
       top: 46%;
@@ -214,6 +217,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
     .closed-captions {
       @include left(5%);
+
       position: absolute;
       width: 90%;
       box-sizing: border-box;
@@ -228,27 +232,29 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       background: rgba(0, 0, 0, .75);
       color: $yellow;
 
+      &:before {
+        position: absolute;
+        display: inline-block;
+        top: 50%;
+
+        @include left($baseline);
+
+        margin-top: -.6em;
+        font-family: 'FontAwesome';
+        content: "\f142";
+        color: $white;
+        opacity: 0.5;
+      }
+
+      &:hover,
+      &.is-dragging {
+        background: rgba(0, 0, 0, 1.0);
+        cursor: move;
+
         &:before {
-            position: absolute;
-            display: inline-block;
-            top: 50%;
-            @include left($baseline);
-            margin-top: -.6em;
-            font-family: 'FontAwesome';
-            content: "\f142";
-            color: $white;
-            opacity: 0.5;
-        }
-
-        &:hover,
-        &.is-dragging {
-            background: rgba(0, 0, 0, 1.0);
-            cursor: move;
-
-            &:before {
-                opacity: 1.0;
-            }
+          opacity: 1.0;
         }
+      }
     }
 
     .video-player {
@@ -273,6 +279,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       iframe,
       video {
         @include left(0);
+
         display: block;
         border: none;
         width: 100%;
@@ -290,6 +297,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
     .video-controls {
       @include clearfix();
+
       position: relative;
       border: 0;
       background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
@@ -297,7 +305,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
       &:hover,
       &:focus {
-
         ul,
         div {
           opacity: 1;
@@ -307,6 +314,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       %video-control {
         @extend %t-strong;
         @extend %t-title7;
+
         display: inline-block;
         vertical-align: middle;
         margin: 0;
@@ -348,6 +356,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         @include clearfix();
         @include transform-origin(bottom left);
         @include transition(height .7s ease-in-out 0s);
+
         box-sizing: border-box;
         position: absolute;
         bottom: 100%;
@@ -375,8 +384,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
         .ui-slider-handle {
           @extend %ui-fake-link;
+
           @include transform-origin(bottom left);
           @include transition(all .7s ease-in-out 0s);
+
           box-sizing: border-box;
           top: -1px;
           height: ($baseline / 4);
@@ -398,17 +409,20 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
       .vcr {
         @include float(left);
+
         list-style: none;
+
         @include border-right(1px solid rgb(40, 44, 46)); // UXPL grayscale-cool x-dark
+
         padding: 0;
 
         @media (max-width: 1120px) {
           @include margin-right(lh(0.5));
+
           font-size: em(14);
         }
 
         .video_control {
-
           &:focus {
             position: relative;
           }
@@ -421,12 +435,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         .vidtime {
           @extend %t-strong;
           @extend %t-title7;
+
           @include padding-left(lh(.75));
+
           display: inline-block;
           color: rgb(207, 216, 220); // UXPL grayscale-cool light
           -webkit-font-smoothing: antialiased;;
 
-          @media (max-width: 1120px) {
+          @media            (max-width: 1120px) {
             @include padding-left(lh(0.5));
           }
         }
@@ -448,7 +464,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         .add-fullscreen,
         .quality-control,
         .toggle-transcript {
-
           &:focus {
             position: relative;
           }
@@ -459,11 +474,15 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
           .menu {
             @include transition(none);
+
             @extend %ui-depth1;
+
             position: absolute;
             display: none;
             bottom: ($baseline * 2);
+
             @include right(0); // right-align menus since this whole collection is on the right
+
             width: 120px;
             margin: 0;
             border: none;
@@ -474,11 +493,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
             li {
               @extend %ui-fake-link;
+
               color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
 
               .speed-option,
               .control-lang {
                 @include text-align(left);
+
                 display: block;
                 width: 100%;
                 border: 0;
@@ -500,10 +521,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
               }
 
               &.is-active {
-
                 .speed-option,
                 .control-lang {
                   @include border-left($baseline/10 solid rgb(14, 166, 236));
+
                   font-weight: $font-bold;
                   color: rgb(14, 166, 236); // UXPL primary accent
                 }
@@ -512,7 +533,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
           }
 
           &.is-opened {
-
             .menu {
               display: block;
             }
@@ -526,13 +546,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         }
 
         .speeds {
-
           &.is-opened {
-
             .control {
-
               .icon {
-
                 @include ltr {
                   @include transform(rotate(-90deg));
                 }
@@ -545,9 +561,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
           }
 
           .speed-button {
-
             .label {
               @include padding(0 ($baseline/3) 0 0);
+
               font-family: $body-font-family;
               color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
 
@@ -558,6 +574,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
             .value {
               @include padding(0, lh(0.5), 0, 0);
+
               color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
               font-weight: bold;
 
@@ -569,16 +586,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         }
 
         .lang {
-
           .language-menu {
             width: $baseline;
             padding: ($baseline / 2) 0;
           }
 
           .control {
-
             .icon {
-
               @include rtl {
                 @include transform(rotate(-180deg));
               }
@@ -586,11 +600,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
           }
 
           &.is-opened {
-
             .control {
-
               .icon {
-
                 @include ltr {
                   @include transform(rotate(90deg));
                 }
@@ -608,7 +619,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
           position: relative;
 
           &.is-opened {
-
             .volume-slider-container {
               display: block;
               opacity: 1;
@@ -621,11 +631,15 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
           .volume-slider-container {
             @include transition(none);
+
             @extend %ui-depth1;
+
             display: none;
             position: absolute;
             bottom: ($baseline * 2);
+
             @include right(0);
+
             width: 41px;
             height: 120px;
             background-color: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
@@ -640,8 +654,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
               .ui-slider-handle {
                 @extend %ui-fake-link;
+
                 @include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s);
                 @include left(-5px);
+
                 box-sizing: border-box;
                 height: 13px;
                 width: 13px;
@@ -682,14 +698,12 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         }
 
         .toggle-transcript {
-
-            &.is-active {
-              color: rgb(14, 166, 236); // UXPL primary accent
-            }
+          &.is-active {
+            color: rgb(14, 166, 236); // UXPL primary accent
+          }
         }
 
         .lang {
-
           & > .hide-subtitles {
             @include transition(none);
           }
@@ -698,9 +712,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     }
 
     &:hover {
-
       .video-controls {
-
         .slider {
           height: ($baseline / 1.5);
 
@@ -714,18 +726,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
   }
 
   &.video-fullscreen {
+    .closed-captions {
+      width: 65%;
+    }
 
-      .closed-captions {
-          width: 65%;
-      }
-
-      &.closed .closed-captions {
-          width: 90%;
-      }
+    &.closed .closed-captions {
+      width: 90%;
+    }
   }
 
   .subtitles {
     @include float(left);
+
     overflow: auto;
     max-height: 460px;
     width: flex-grid(3, 9);
@@ -734,7 +746,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     visibility: visible;
 
     a {
-        color: #0074b5;
+      color: #0074b5;
     }
 
     .subtitles-menu {
@@ -745,6 +757,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
       li {
         @extend %ui-fake-link;
+
         margin-bottom: 8px;
         border: 0;
         padding: 0;
@@ -775,19 +788,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         }
 
         &.spacing:last-of-type {
-            position: relative;
+          position: relative;
 
-            .transcript-end {
-                position: absolute;
-                bottom: 0;
-            }
+          .transcript-end {
+            position: absolute;
+            bottom: 0;
+          }
         }
       }
     }
   }
 
   &.closed {
-
     .video-wrapper {
       width: flex-grid(9,9);
       background-color: inherit;
@@ -803,7 +815,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
     .video-wrapper .video-player-pre,
     .video-wrapper .video-player-post {
-        height: 0;
+      height: 0;
     }
 
     .video-wrapper .video-player {
@@ -813,25 +825,27 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     }
 
     .subtitles {
-        @extend .is-hidden;
+      @extend .is-hidden;
     }
 
     .subtitles.html5 {
-        @extend %ui-depth0;
-        background-color: rgba(243, 243, 243, 0.8);
-        height: 100%;
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        width: 275px;
-        padding: 0 $baseline;
-        display: none;
+      @extend %ui-depth0;
+
+      background-color: rgba(243, 243, 243, 0.8);
+      height: 100%;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      width: 275px;
+      padding: 0 $baseline;
+      display: none;
     }
   }
 
   &.video-fullscreen {
     @extend %ui-depth4;
+
     background: rgba(#000, .95);
     border: 0;
     bottom: 0;
@@ -855,11 +869,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
     .video-wrapper .video-player-pre,
     .video-wrapper .video-player-post {
-        height: 0;
+      height: 0;
     }
 
     .video-wrapper {
-        position: static;
+      position: static;
     }
 
     .video-wrapper .video-player {
@@ -870,15 +884,17 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
     .tc-wrapper {
       @include clearfix();
+
       width: 100%;
       height: 100%;
-
       position: static;
 
       .video-wrapper {
         height: 100%;
         width: 75%;
+
         @include margin-right(0);
+
         vertical-align: middle;
 
         object,
@@ -892,6 +908,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
       .video-controls {
         @extend %ui-depth4;
+
         position: absolute;
         bottom: 0;
         left: 0;
@@ -903,8 +920,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       height: 100%;
       width: 25%;
       padding: lh();
+
       @include box-sizing(border-box);
       @include transition(none);
+
       background: $black;
       visibility: visible;
 
@@ -933,6 +952,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
   .video-pre-roll {
     @extend %ui-depth3;
+
     position: absolute;
     top: 0;
     left: 0;
diff --git a/common/lib/xmodule/xmodule/css/word_cloud/display.scss b/common/lib/xmodule/xmodule/css/word_cloud/display.scss
index 5c015bdd86..154dde27c3 100644
--- a/common/lib/xmodule/xmodule/css/word_cloud/display.scss
+++ b/common/lib/xmodule/xmodule/css/word_cloud/display.scss
@@ -1,24 +1,25 @@
 .input-cloud {
-    margin: ($baseline/4);
+  margin: ($baseline/4);
 }
 
 .result_cloud_section {
-    display: none;
-    width: 0px;
-    height: 0px;
+  display: none;
+  width: 0px;
+  height: 0px;
 }
 
 .result_cloud_section.active {
-    display: block;
-    width: 100%;
-    height: auto;
-    margin-top: 1em;
+  display: block;
+  width: 100%;
+  height: auto;
+  margin-top: 1em;
     
-    h3 {
-        font-size: 100%;
-    }
+  h3 {
+    font-size: 100%;
+  }
 }
+
 .your_words{
-    font-size: 0.85em;
-    display: block;
+  font-size: 0.85em;
+  display: block;
 }
diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss
index 6ba500c339..922e5a3680 100644
--- a/common/static/sass/_mixins-inherited.scss
+++ b/common/static/sass/_mixins-inherited.scss
@@ -26,50 +26,57 @@
 // 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)));
+  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)));
+  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)));
+  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)));
+  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)));
+  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;
@@ -79,11 +86,14 @@
 
 .horizontal-divider {
   border: none;
+
   @extend .faded-hr-divider;
+
   position: relative;
 
   &::after {
     @extend .faded-hr-divider-light;
+
     content: "";
     display: block;
     position: absolute;
@@ -93,13 +103,15 @@
 
 .fade-right-hr-divider {
   @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1)));
+  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)));
+  rgba(200,200,200, 0)));
+
   border: none;
 }
 
@@ -108,6 +120,7 @@
 // inherited - ui
 .window {
   @include clearfix();
+
   box-shadow: 0 1px 1px $shadow-l1;
   border-radius: 3px;
   margin-bottom: $baseline;
@@ -120,8 +133,10 @@
 // mixins - grandfathered
 @mixin button {
   @include transition(background-color 0.15s, box-shadow 0.15s);
+
   @extend %t-action3;
   @extend %t-strong;
+
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 $transparent;
   display: inline-block;
   padding: ($baseline/5) $baseline ($baseline/4);
@@ -133,6 +148,7 @@
     color: $gray-d1 !important;
     pointer-events: none;
     cursor: none;
+
     &:hover, &:focus {
       box-shadow: 0 0 0 0 !important;
     }
@@ -146,6 +162,7 @@
 @mixin green-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $uxpl-green-base;
   border-radius: 3px;
@@ -168,6 +185,7 @@
 @mixin blue-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+
   border: 1px solid $uxpl-blue-base;
   border-radius: 3px;
   background-color: $uxpl-blue-base;
@@ -189,6 +207,7 @@
 @mixin red-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+
   border: 1px solid $red-d1;
   border-radius: 3px;
   background-color: $red;
@@ -210,6 +229,7 @@
 @mixin pink-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+
   border: 1px solid $pink-d1;
   border-radius: 3px;
   background-color: $pink;
@@ -231,6 +251,7 @@
 @mixin orange-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
+
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $orange-d1;
   border-radius: 3px;
@@ -253,6 +274,7 @@
 @mixin white-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $mediumGrey;
   border-radius: 3px;
@@ -269,6 +291,7 @@
 @mixin grey-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $gray-d2;
   border-radius: 3px;
@@ -284,6 +307,7 @@
 .gray-button {
   @include button;
   @include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
+
   box-shadow: 0 1px 0 $white-t1 inset;
   border: 1px solid $gray-d1;
   border-radius: 3px;
@@ -319,6 +343,7 @@
 
   h5 {
     @extend %t-strong;
+
     margin-bottom: 8px;
     color: $white;
   }
@@ -331,11 +356,13 @@
 
   .save-button {
     @include blue-button;
+
     margin-top: 0;
   }
 
   .cancel-button {
     @include white-button;
+
     margin-top: 0;
   }
 }
@@ -345,6 +372,7 @@
 // sunsetted mixins
 @mixin active {
   @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+
   box-shadow: 0 -1px 0 $shadow inset, 0 1px 0 $white inset;
   background-color: rgba(255, 255, 255, 0.3);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
diff --git a/common/static/sass/assets/_anims.scss b/common/static/sass/assets/_anims.scss
index ad709bc4ca..58b96eebf5 100644
--- a/common/static/sass/assets/_anims.scss
+++ b/common/static/sass/assets/_anims.scss
@@ -98,11 +98,13 @@
 @include keyframes(bounceIn) {
   0% {
     opacity: 0.0;
+
     @include transform(scale(0.3));
   }
 
   50% {
     opacity: 1.0;
+
     @include transform(scale(1.05));
   }
 
@@ -119,11 +121,13 @@
 
   50% {
     opacity: 1.0;
+
     @include transform(scale(1.05));
   }
 
   100% {
     opacity: 0.0;
+
     @include transform(scale(0.3));
   }
 }
@@ -144,11 +148,11 @@
 
 // flash - double
 @include keyframes(flashDouble) {
-0%, 50%, 100% {
-  opacity: 1.0;
-}
+  0%, 50%, 100% {
+    opacity: 1.0;
+  }
 
-25%, 75% {
+  25%, 75% {
     opacity: 0.0;
   }
 }
diff --git a/common/static/sass/edx-pattern-library-shims/base/_variables.scss b/common/static/sass/edx-pattern-library-shims/base/_variables.scss
index fe86405bd8..af05fe153d 100644
--- a/common/static/sass/edx-pattern-library-shims/base/_variables.scss
+++ b/common/static/sass/edx-pattern-library-shims/base/_variables.scss
@@ -61,6 +61,7 @@ $spacing-horizontal:        (
   }
 
   @warn "Unknown `#{$key}` in $spacing-vertical.";
+
   @return null;
 }
 
@@ -71,6 +72,7 @@ $spacing-horizontal:        (
   }
 
   @warn "Unknown `#{$key}` in $spacing-horizontal.";
+
   @return null;
 }
 
@@ -104,6 +106,7 @@ $font-sizes: (
   }
 
   @warn "Unknown `#{$key}` in $font-sizes.";
+
   @return null;
 }
 
@@ -114,6 +117,7 @@ $font-sizes: (
   }
 
   @warn "Unknown `#{$key}` in $font-weights.";
+
   @return null;
 }
 
@@ -233,8 +237,10 @@ $btn-small-padding-horizontal: spacing-horizontal(small);
 
 @mixin notification-by-type($color) {
   border-top: 3px solid $color;
+
   .icon {
     @include margin-right(3 * $baseline/ 4);
+
     color: $color;
   }
 }
diff --git a/common/static/sass/neat/functions/_new-breakpoint.scss b/common/static/sass/neat/functions/_new-breakpoint.scss
index a89c9ce6bb..9fbe72477d 100644
--- a/common/static/sass/neat/functions/_new-breakpoint.scss
+++ b/common/static/sass/neat/functions/_new-breakpoint.scss
@@ -1,5 +1,4 @@
 @function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
-
   @if length($query) == 1 {
     $query: $default-feature nth($query, 1) $total-columns;
   }
diff --git a/common/static/sass/neat/functions/_private.scss b/common/static/sass/neat/functions/_private.scss
index 25dd271e3e..077bf7e2f9 100644
--- a/common/static/sass/neat/functions/_private.scss
+++ b/common/static/sass/neat/functions/_private.scss
@@ -31,11 +31,13 @@
 @function container-span($span: $span) {
   @if length($span) == 3 {
     $container-columns: nth($span, 3);
+
     @return $container-columns;
   }
 
   @else if length($span) == 2 {
     $container-columns: nth($span, 2);
+
     @return $container-columns;
   }
 
@@ -49,11 +51,13 @@
 
   @if length($shift) == 3 {
     $container-columns: nth($shift, 3);
+
     @return $container-columns;
   }
 
   @else if length($shift) == 2 {
     $container-columns: nth($shift, 2);
+
     @return $container-columns;
   }
 
@@ -95,7 +99,9 @@
   
   @if $layout == LTR or $layout == RTL {
     $direction: direction-from-layout($layout);
-  } @else {
+  }
+
+  @else {
     $direction: direction-from-layout($default);
   }
 
@@ -107,7 +113,9 @@
 
   @if $layout == LTR {
     $direction: right;
-  } @else {
+  }
+
+  @else {
     $direction: left;
   }
 
diff --git a/common/static/sass/neat/grid/_media.scss b/common/static/sass/neat/grid/_media.scss
index bf27f70ee5..e9eb82abf8 100644
--- a/common/static/sass/neat/grid/_media.scss
+++ b/common/static/sass/neat/grid/_media.scss
@@ -3,6 +3,7 @@
     @media screen and ($default-feature: nth($query, 1)) {
       $default-grid-columns: $grid-columns;
       $grid-columns: $total-columns !global;
+
       @content;
       $grid-columns: $default-grid-columns !global;
     }
@@ -20,6 +21,7 @@
     }
 
     $i: 1;
+
     @while $i <= $loopTo {
       $mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') ';
 
diff --git a/common/static/sass/neat/grid/_omega.scss b/common/static/sass/neat/grid/_omega.scss
index c99ed6cf8a..0c62964190 100644
--- a/common/static/sass/neat/grid/_omega.scss
+++ b/common/static/sass/neat/grid/_omega.scss
@@ -5,7 +5,9 @@
 
   @if $direction != default {
     @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
-  } @else {
+  }
+
+  @else {
     $direction: get-direction($layout-direction, $default-layout-direction);
   }
 
diff --git a/common/static/sass/neat/grid/_outer-container.scss b/common/static/sass/neat/grid/_outer-container.scss
index 0709518132..c2c0ab1509 100644
--- a/common/static/sass/neat/grid/_outer-container.scss
+++ b/common/static/sass/neat/grid/_outer-container.scss
@@ -1,5 +1,6 @@
 @mixin outer-container {
   @include clearfix();
+
   max-width: $max-width;
   margin: {
     left: auto;
diff --git a/common/static/sass/neat/grid/_pad.scss b/common/static/sass/neat/grid/_pad.scss
index 3ef5d80e45..532ee73794 100644
--- a/common/static/sass/neat/grid/_pad.scss
+++ b/common/static/sass/neat/grid/_pad.scss
@@ -1,8 +1,10 @@
 @mixin pad($padding: flex-gutter()) {
   $padding-list: null;
+
   @each $value in $padding {
     $value: if($value == 'default', flex-gutter(), $value);
     $padding-list: join($padding-list, $value);
   }
+
   padding: $padding-list;
 }
diff --git a/common/static/sass/neat/grid/_private.scss b/common/static/sass/neat/grid/_private.scss
index b1953368d7..f393957c5e 100644
--- a/common/static/sass/neat/grid/_private.scss
+++ b/common/static/sass/neat/grid/_private.scss
@@ -8,11 +8,13 @@ $layout-direction: nil !default;
 @function flex-grid($columns, $container-columns: $fg-max-columns) {
   $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
   $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+
   @return percentage($width / $container-width);
 }
 
 @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
   $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+
   @return percentage($gutter / $container-width);
 }
 
@@ -23,7 +25,9 @@ $layout-direction: nil !default;
 @function get-parent-columns($columns) {
   @if $columns != $grid-columns {
     $parent-columns: $columns !global;
-  } @else {
+  }
+
+  @else {
     $parent-columns: $grid-columns !global;
   }
 
@@ -35,7 +39,9 @@ $layout-direction: nil !default;
 
   @if $container-is-display-table == true {
     $display-table: true;
-  } @else if $display == table {
+  }
+
+  @else if $display == table {
     $display-table: true;
   }
 
diff --git a/common/static/sass/neat/grid/_row.scss b/common/static/sass/neat/grid/_row.scss
index 81da6d36a6..89f05a2866 100644
--- a/common/static/sass/neat/grid/_row.scss
+++ b/common/static/sass/neat/grid/_row.scss
@@ -4,7 +4,9 @@
 
   @if $display == table {
     display: table;
+
     @include fill-parent;
+
     table-layout: fixed;
     $container-display-table: true !global;
   }
diff --git a/common/static/sass/neat/grid/_span-columns.scss b/common/static/sass/neat/grid/_span-columns.scss
index c79193d93c..625294d863 100644
--- a/common/static/sass/neat/grid/_span-columns.scss
+++ b/common/static/sass/neat/grid/_span-columns.scss
@@ -13,7 +13,9 @@
   @if $display-table  {
     display: table-cell;
     width: percentage($columns / $container-columns);
-  } @else {
+  }
+
+  @else {
     float: #{$opposite-direction};
 
     @if $display != no-display {
@@ -31,7 +33,9 @@
         width: flex-grid($columns, $container-columns);
       }
 
-    } @else {
+    }
+
+    @else {
       margin-#{$direction}: flex-gutter($container-columns);
       width: flex-grid($columns, $container-columns);
 
diff --git a/common/static/sass/neat/grid/_to-deprecate.scss b/common/static/sass/neat/grid/_to-deprecate.scss
index d0a681fd12..74a0232d35 100644
--- a/common/static/sass/neat/grid/_to-deprecate.scss
+++ b/common/static/sass/neat/grid/_to-deprecate.scss
@@ -5,6 +5,7 @@
     @media screen and ($default-feature: nth($query, 1)) {
       $default-grid-columns: $grid-columns;
       $grid-columns: $total-columns;
+
       @content;
       $grid-columns: $default-grid-columns;
     }
@@ -14,6 +15,7 @@
     @media screen and (nth($query, 1): nth($query, 2)) {
       $default-grid-columns: $grid-columns;
       $grid-columns: $total-columns;
+
       @content;
       $grid-columns: $default-grid-columns;
     }
@@ -23,6 +25,7 @@
     @media screen and (nth($query, 1): nth($query, 2)) {
       $default-grid-columns: $grid-columns;
       $grid-columns: nth($query, 3);
+
       @content;
       $grid-columns: $default-grid-columns;
     }
@@ -32,6 +35,7 @@
     @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
       $default-grid-columns: $grid-columns;
       $grid-columns: $total-columns;
+
       @content;
       $grid-columns: $default-grid-columns;
     }
@@ -41,6 +45,7 @@
     @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
       $default-grid-columns: $grid-columns;
       $grid-columns: nth($query, 5);
+
       @content;
       $grid-columns: $default-grid-columns;
     }
@@ -53,5 +58,6 @@
 
 @mixin nth-omega($nth, $display: block, $direction: default) {
   @warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
+
   @include omega($nth $display, $direction);
 }
diff --git a/common/static/sass/neat/grid/_visual-grid.scss b/common/static/sass/neat/grid/_visual-grid.scss
index 76defd2ca9..340439c37f 100644
--- a/common/static/sass/neat/grid/_visual-grid.scss
+++ b/common/static/sass/neat/grid/_visual-grid.scss
@@ -11,7 +11,9 @@
   body:before {
     content: '';
     display: inline-block;
+
     @include grid-column-gradient(gradient-stops($grid-columns));
+
     height: 100%;
     left: 0;
     margin: 0 auto;
diff --git a/common/static/sass/neat/settings/_visual-grid.scss b/common/static/sass/neat/settings/_visual-grid.scss
index 611c2b3727..4ffd9f5a43 100644
--- a/common/static/sass/neat/settings/_visual-grid.scss
+++ b/common/static/sass/neat/settings/_visual-grid.scss
@@ -1,5 +1,5 @@
 $visual-grid: false !default; // Display the base grid
-$visual-grid-color: #EEE !default;
+$visual-grid-color: #eee !default;
 $visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
 $visual-grid-opacity: 0.4 !default;
 $visual-grid-breakpoints: () !default;
diff --git a/common/test/test-theme/cms/static/sass/partials/_variables.scss b/common/test/test-theme/cms/static/sass/partials/_variables.scss
index 96cfadb354..6751c81247 100644
--- a/common/test/test-theme/cms/static/sass/partials/_variables.scss
+++ b/common/test/test-theme/cms/static/sass/partials/_variables.scss
@@ -262,5 +262,5 @@ $sans-serif: $f-sans-serif;
 $body-line-height: golden-ratio(.875em, 1);
 
 // carried over from LMS for xmodules
-$action-primary-active-bg: #1AA1DE; // $m-blue
+$action-primary-active-bg: #1aa1de; // $m-blue
 $very-light-text: $white;
diff --git a/lms/static/certificates/sass/_base.scss b/lms/static/certificates/sass/_base.scss
index 249a8ae259..5705480da9 100644
--- a/lms/static/certificates/sass/_base.scss
+++ b/lms/static/certificates/sass/_base.scss
@@ -11,10 +11,10 @@
 // #BASE
 // ------------------------------
 html, body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    background: $white;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: $white;
 }
 
 // ------------------------------
diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss
index 76a2176c79..55e37fc6df 100644
--- a/lms/static/certificates/sass/_components.scss
+++ b/lms/static/certificates/sass/_components.scss
@@ -21,41 +21,41 @@
 // #HEADINGS
 // ------------------------------
 %hd-subsection {
-    margin-bottom: spacing-vertical(mid-small);
-    border-bottom: rem(2) solid palette(grayscale, x-back);
-    padding-bottom: spacing-vertical(x-small);
+  margin-bottom: spacing-vertical(mid-small);
+  border-bottom: rem(2) solid palette(grayscale, x-back);
+  padding-bottom: spacing-vertical(x-small);
 }
 
 // ------------------------------
 // #DEPTH
 // ------------------------------
 %depth-base-focus {
-    background: $white;
-    padding: spacing-vertical(small) spacing-horizontal(base);
+  background: $white;
+  padding: spacing-vertical(small) spacing-horizontal(base);
 }
 
 %depth-well {
-    box-shadow: 0 rem(1) rem(3) 0 palette(grayscale, back) inset;
-    padding: spacing-vertical(small) spacing-horizontal(base);
-    background: palette(grayscale, x-back);
+  box-shadow: 0 rem(1) rem(3) 0 palette(grayscale, back) inset;
+  padding: spacing-vertical(small) spacing-horizontal(base);
+  background: palette(grayscale, x-back);
 }
 
 %depth-card {
-    box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back);
-    padding: spacing-vertical(small) spacing-horizontal(base);
-    background: $white;
+  box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back);
+  padding: spacing-vertical(small) spacing-horizontal(base);
+  background: $white;
 }
 
 .depth-base-focus {
-    @extend %depth-base-focus;
+  @extend %depth-base-focus;
 }
 
 .depth-well {
-    @extend %depth-well;
+  @extend %depth-well;
 }
 
 .depth-card {
-    @extend %depth-card;
+  @extend %depth-card;
 }
 
 // ------------------------------
@@ -63,21 +63,21 @@
 // ------------------------------
 // circular cropped
 %img-cropped {
-
-    .src {
-        display: block;
-        width: 100%;
-        border-radius: 50%;
-    }
+  .src {
+    display: block;
+    width: 100%;
+    border-radius: 50%;
+  }
 }
 
 // ------------------------------
 // #HEADER APP
 // ------------------------------
 .wrapper-header {
-    @extend %divider-2;
-    border-bottom-color: palette(grayscale, x-back);
-    background: $white;
+  @extend %divider-2;
+
+  border-bottom-color: palette(grayscale, x-back);
+  background: $white;
 }
 
 .header-app {
@@ -88,63 +88,62 @@
 // #BANNER
 // ------------------------------
 .banner {
-
-    .message-copy {
-        margin-bottom: 0;
-    }
+  .message-copy {
+    margin-bottom: 0;
+  }
 }
 
 // message to user-centric banner
 .wrapper-banner-user {
-    box-shadow: inset 0 rem(2) rem(2) 0 $black;
-    background: palette(grayscale, dark);
+  box-shadow: inset 0 rem(2) rem(2) 0 $black;
+  background: palette(grayscale, dark);
 }
 
 .banner-user {
+  .message-title {
+    color: $white;
+    font-weight: font-weight(semi-bold);
+  }
 
-    .message-title {
-        color: $white;
-        font-weight: font-weight(semi-bold);
+  .message-copy {
+    color: $white;
+  }
+
+  .message-actions .action {
+
+    // STATE: hover, active, focus
+    &:hover, &:active, &:focus {
+      // customizations from UXPL
+      color: palette(grayscale, dark);
     }
 
-    .message-copy {
-        color: $white;
+    .icon {
+      @include margin-right(spacing-horizontal(x-small));
+
+      font-size: font-size(large);
     }
 
-    .message-actions .action {
-
-        // STATE: hover, active, focus
-        &:hover, &:active, &:focus {
-            // customizations from UXPL
-           color: palette(grayscale, dark);
-        }
-
-        .icon {
-            @include margin-right(spacing-horizontal(x-small));
-            font-size: font-size(large);
-        }
-
-        // CASE: icon display only
-        &.icon-only {
-
-            .action-label {
-                @extend %a11y-hide;
-            }
-        }
-
-        // CASE mozilla open badges logo
-        .icon-mozillaopenbadges {
-            width: rem(18);
-        }
+    // CASE: icon display only
+    &.icon-only {
+      .action-label {
+        @extend %a11y-hide;
+      }
     }
+
+    // CASE mozilla open badges logo
+    .icon-mozillaopenbadges {
+      width: rem(18);
+    }
+  }
 }
 
 // ------------------------------
 // #INTRODUCTION
 // ------------------------------
 .introduction {
-    margin-bottom: spacing-vertical(base);
-    @include text-align(center);
+  margin-bottom: spacing-vertical(base);
+
+  @include text-align(center);
 }
 
 // ------------------------------
@@ -152,240 +151,251 @@
 // ------------------------------
 // base accomplishment
 .accomplishment {
-
-    .accomplishment-type-symbol .src {
-        display: block;
-        width: 100%;
-    }
+  .accomplishment-type-symbol .src {
+    display: block;
+    width: 100%;
+  }
 }
 
 // main accomplishment
 .accomplishment-main {
-    background: palette(grayscale, x-back);
+  background: palette(grayscale, x-back);
 }
 
 // brief accomplishment
 .accomplishment-brief {
-    @extend %depth-card;
+  @extend %depth-card;
 
-    .accomplishment-type-symbol, .accomplishment-details {
-        display: inline-block;
-        vertical-align: middle;
-    }
+  .accomplishment-type-symbol, .accomplishment-details {
+    display: inline-block;
+    vertical-align: middle;
+  }
 
-    .accomplishment-type-symbol {
-        @include size(20%);
-    }
+  .accomplishment-type-symbol {
+    @include size(20%);
+  }
 
-    .accomplishment-details {
-        width: 70%;
-    }
+  .accomplishment-details {
+    width: 70%;
+  }
 
 
-    .accomplishment-summary {
-        margin-bottom: 0;
-    }
+  .accomplishment-summary {
+    margin-bottom: 0;
+  }
 }
 
 // ------------------------------
 // #RENDERING
 // ------------------------------
 %rendering-accomplishment-line {
-    display: block;
-    margin-right: auto;
-    margin-left: auto;
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 %rendering-section {
-    margin-bottom: spacing-vertical(base);
-    border-bottom: rem(2) solid palette(grayscale, x-back);
-    padding-bottom: spacing-vertical(base);
+  margin-bottom: spacing-vertical(base);
+  border-bottom: rem(2) solid palette(grayscale, x-back);
+  padding-bottom: spacing-vertical(base);
 }
 
 %rendering-hd-section {
-    margin-bottom: spacing-vertical(mid-small);
-    border-bottom: rem(2) solid palette(grayscale, x-back);
-    padding-bottom: spacing-vertical(x-small);
-    color: $cert-base-color;
-    @include text-align(center);
+  margin-bottom: spacing-vertical(mid-small);
+  border-bottom: rem(2) solid palette(grayscale, x-back);
+  padding-bottom: spacing-vertical(x-small);
+  color: $cert-base-color;
+
+  @include text-align(center);
 }
 
 .accomplishment-rendering {
-    @extend %depth-card;
-    position: relative;
-    top: -(spacing-vertical(base));
-    border-top: rem(4) solid $cert-base-color;
+  @extend %depth-card;
 
-    // type
-    .accomplishment-type {
-        @include text-align(center);
-        margin-top: -(spacing-vertical(large));
-        margin-bottom: spacing-vertical(base);
+  position: relative;
+  top: -(spacing-vertical(base));
+  border-top: rem(4) solid $cert-base-color;
+
+  // type
+  .accomplishment-type {
+    @include text-align(center);
+
+    margin-top: -(spacing-vertical(large));
+    margin-bottom: spacing-vertical(base);
+  }
+
+  .accomplishment-type-label, .accomplishment-type-symbol {
+    display: block;
+  }
+
+  .accomplishment-type-label {
+    @include span(10);
+
+    margin: 0 auto;
+    font-weight: font-weight(semi-bold);
+  }
+
+  .accomplishment-type-symbol {
+    @include size(rem(100));
+
+    margin: 0 auto spacing-vertical(small) auto;
+  }
+
+  // statement
+  .accomplishment-statement {
+    @extend %rendering-section;
+
+    @include text-align(center);
+  }
+
+  .accomplishment-statement-lead {
+    @extend .hd-2;
+  }
+
+  .accomplishment-recipient {
+    @extend %rendering-accomplishment-line;
+  }
+
+  .accomplishment-summary {
+    @extend %rendering-accomplishment-line;
+
+    margin-bottom: spacing-vertical(mid-small);
+  }
+
+  .accomplishment-course {
+    @extend %rendering-accomplishment-line;
+  }
+
+  .accomplishment-course-org {
+  }
+
+  .accomplishment-course-name {
+  }
+
+  .accomplishment-course-description {
+    @extend %rendering-accomplishment-line;
+  }
+
+  .accomplishment-statement-detail {
+    @extend %rendering-accomplishment-line;
+  }
+
+  // organizations
+  .accomplishment-orgs {
+    margin-bottom: spacing-vertical(base);
+
+    .list-orgs {
+      @extend %list-unstyled;
+    }
+  }
+
+  .accomplishment-orgs-title {
+    @extend %rendering-hd-section;
+  }
+
+  // signatories
+  .accomplishment-signatories {
+    @extend %rendering-section;
+
+    .list-signatories {
+      @extend %list-unstyled;
     }
 
-    .accomplishment-type-label, .accomplishment-type-symbol {
+    .signatory-signature {
+      display: block;
+      margin: 0 auto spacing-vertical(x-small) auto;
+    }
+
+    .signatory-name, .signatory-credentials {
+      @include text-align(center);
+    }
+
+    .signatory-name {
+      margin-bottom: spacing-vertical(xx-small);
+    }
+
+    .signatory-credentials {
+      .role, .organization {
+        white-space: pre-line;
         display: block;
+      }
     }
+  }
 
-    .accomplishment-type-label {
-        @include span(10);
-        margin: 0 auto;
-        font-weight: font-weight(semi-bold);
-    }
-
-    .accomplishment-type-symbol {
-        @include size(rem(100));
-        margin: 0 auto spacing-vertical(small) auto;
-    }
-
-    // statement
-    .accomplishment-statement {
-        @extend %rendering-section;
-        @include text-align(center);
-    }
-
-    .accomplishment-statement-lead {
-        @extend .hd-2;
-    }
-
-    .accomplishment-recipient {
-        @extend %rendering-accomplishment-line;
-    }
-
-    .accomplishment-summary {
-        @extend %rendering-accomplishment-line;
-        margin-bottom: spacing-vertical(mid-small);
-    }
-
-    .accomplishment-course {
-        @extend %rendering-accomplishment-line;
-    }
-
-    .accomplishment-course-org {
-    }
-
-    .accomplishment-course-name {
-    }
-
-    .accomplishment-course-description {
-        @extend %rendering-accomplishment-line;
-    }
-
-    .accomplishment-statement-detail {
-        @extend %rendering-accomplishment-line;
-    }
-
-    // organizations
-    .accomplishment-orgs {
-        margin-bottom: spacing-vertical(base);
-
-        .list-orgs {
-            @extend %list-unstyled;
-        }
-    }
-
-    .accomplishment-orgs-title {
-        @extend %rendering-hd-section;
-    }
-
-    // signatories
-    .accomplishment-signatories {
-        @extend %rendering-section;
-
-        .list-signatories {
-            @extend %list-unstyled;
-        }
-
-        .signatory-signature {
-            display: block;
-            margin: 0 auto spacing-vertical(x-small) auto;
-        }
-
-        .signatory-name, .signatory-credentials {
-            @include text-align(center);
-        }
-
-        .signatory-name {
-            margin-bottom: spacing-vertical(xx-small);
-        }
-
-        .signatory-credentials {
-
-            .role, .organization {
-                white-space: pre-line;
-                display: block;
-            }
-        }
-    }
-
-    .accomplishment-signatories-title {
-        @extend %rendering-hd-section;
-    }
+  .accomplishment-signatories-title {
+    @extend %rendering-hd-section;
+  }
 }
 
 // metadata
 .accomplishment-metadata {
-    margin-bottom: spacing-vertical(base);
+  margin-bottom: spacing-vertical(base);
 
-    .metadata {
-        @extend %list-unstyled;
+  .metadata {
+    @extend %list-unstyled;
 
-        .label {
-            @extend %copy-meta;
-            margin-bottom: spacing-vertical(xx-small);
-        }
+    .label {
+      @extend %copy-meta;
 
-        .label-explanation {
-            display: block;
-            font-weight: font-weight(normal);
-            margin-top: spacing-vertical(xx-small);
-        }
-
-        .value {
-            @extend %copy-base;
-            font-weight: font-weight(semi-bold);
-            color: palette(grayscale, dark);
-        }
+      margin-bottom: spacing-vertical(xx-small);
     }
 
-    .recipient-img, .recipient-details {
-        display: inline-block;
-        vertical-align: middle;
+    .label-explanation {
+      display: block;
+      font-weight: font-weight(normal);
+      margin-top: spacing-vertical(xx-small);
     }
 
-    .recipient-img {
-        @extend %img-cropped;
-        width: rem(100);
-        @include margin-right(spacing-horizontal(small));
+    .value {
+      @extend %copy-base;
 
-        .src {
-            max-height: 100%;
-            border: rem(4) solid $white;
-        }
+      font-weight: font-weight(semi-bold);
+      color: palette(grayscale, dark);
     }
+  }
 
-    .recipient-details {
-        @extend %copy-base;
-        font-weight: font-weight(semi-bold);
-        max-width: calc(100% - (#{rem(100)} + #{spacing-horizontal(small)} + 5px));
-    }
+  .recipient-img, .recipient-details {
+    display: inline-block;
+    vertical-align: middle;
+  }
 
-    .recipient-name {
-        margin-bottom: spacing-vertical(xx-small);
-    }
+  .recipient-img {
+    @extend %img-cropped;
 
-    .recipient-username {
-        margin-bottom: 0;
-    }
+    width: rem(100);
 
-    .accomplishment-id .value {
-        word-wrap: break-word;
+    @include margin-right(spacing-horizontal(small));
+
+    .src {
+      max-height: 100%;
+      border: rem(4) solid $white;
     }
+  }
+
+  .recipient-details {
+    @extend %copy-base;
+
+    font-weight: font-weight(semi-bold);
+    max-width: calc(100% - (#{rem(100)} + #{spacing-horizontal(small)} + 5px));
+  }
+
+  .recipient-name {
+    margin-bottom: spacing-vertical(xx-small);
+  }
+
+  .recipient-username {
+    margin-bottom: 0;
+  }
+
+  .accomplishment-id .value {
+    word-wrap: break-word;
+  }
 }
 
 .accomplishment-metadata-title {
-    @extend %hd-subsection;
-    border-bottom-color: palette(grayscale, back);
+  @extend %hd-subsection;
+
+  border-bottom-color: palette(grayscale, back);
 }
 
 // ------------------------------
@@ -396,7 +406,7 @@
 }
 
 .accomplishment-related-title {
-    @extend %hd-subsection;
+  @extend %hd-subsection;
 }
 
 // ------------------------------
@@ -404,127 +414,127 @@
 // ------------------------------
 // certficate - default
 .certificate {
+  .accomplishment-rendering {
 
-    .accomplishment-rendering {
-
-        // decorative corners for certs
-        .deco-corner {
-            position: absolute;
-        }
-
-        .deco-corner-tl {
-            @include triangle(20px, $cert-base-color, up-right);
-            top: 0;
-            right: 0;
-        }
-
-        .deco-corner-tr {
-            @include triangle(20px, $cert-base-color, up-left);
-            top: 0;
-            left: 0;
-        }
-
-        .deco-corner-bl {
-            @include triangle(20px, $cert-base-color, down-right);
-            bottom: 0;
-            right: 0;
-        }
-
-        .deco-corner-br {
-            @include triangle(20px, $cert-base-color, down-left);
-            bottom: 0;
-            left: 0;
-        }
-
-        .accomplishment-type-label {
-            color: $cert-base-color;
-        }
-
-        .accomplishment-signatories-title, .accomplishment-orgs-title {
-            color: $cert-decorative-color;
-        }
-
-        // statement
-        .accomplishment-statement,
-        .accomplishment-statement-lead,
-        .accomplishment-recipient,
-        .accomplishment-course,
-         {
-            font-family: $font-family-serif;
-        }
-
-        .accomplishment-recipient,
-        .accomplishment-course {
-            letter-spacing: rem(1);
-        }
+    // decorative corners for certs
+    .deco-corner {
+      position: absolute;
     }
+
+    .deco-corner-tl {
+      @include triangle(20px, $cert-base-color, up-right);
+
+      top: 0;
+      right: 0;
+    }
+
+    .deco-corner-tr {
+      @include triangle(20px, $cert-base-color, up-left);
+
+      top: 0;
+      left: 0;
+    }
+
+    .deco-corner-bl {
+      @include triangle(20px, $cert-base-color, down-right);
+
+      bottom: 0;
+      right: 0;
+    }
+
+    .deco-corner-br {
+      @include triangle(20px, $cert-base-color, down-left);
+
+      bottom: 0;
+      left: 0;
+    }
+
+    .accomplishment-type-label {
+      color: $cert-base-color;
+    }
+
+    .accomplishment-signatories-title, .accomplishment-orgs-title {
+      color: $cert-decorative-color;
+    }
+
+    // statement
+    .accomplishment-statement,
+    .accomplishment-statement-lead,
+    .accomplishment-recipient,
+    .accomplishment-course,
+         {
+      font-family: $font-family-serif;
+    }
+
+    .accomplishment-recipient,
+    .accomplishment-course {
+      letter-spacing: rem(1);
+    }
+  }
 }
 
 // certificate - base + honor
 .layout-accomplishment.certificate-honor {
+  .introduction {
+    margin-bottom: 0;
+  }
 
-    .introduction {
-        margin-bottom: 0;
+  .accomplishment-main {
+    background: palette(grayscale, x-back);
+  }
+
+  .accomplishment-rendering {
+    .accomplishment-type {
+      margin-top: 0;
     }
 
-    .accomplishment-main {
-        background: palette(grayscale, x-back);
-    }
-
-    .accomplishment-rendering {
-
-        .accomplishment-type {
-            margin-top: 0;
-        }
-
-        // hide the fancy
-        .accomplishment-signatories .signatory-signature,
-        .accomplishment-type-symbol {
-            display: none;
-        }
+    // hide the fancy
+    .accomplishment-signatories .signatory-signature,
+    .accomplishment-type-symbol {
+      display: none;
     }
+  }
 }
 
 // certificate - distinguished + verified
 .layout-accomplishment.certificate-verified {
+  .introduction {
+    margin-bottom: spacing-vertical(base);
+  }
 
-    .introduction {
-        margin-bottom: spacing-vertical(base);
+  .accomplishment-main {
+    background: palette(primary, back);
+  }
+
+  .accomplishment-rendering {
+    background: $white url('../images/bg-verified.png') center no-repeat;
+    background-size: 65%;
+
+    .deco-corner-tl {
+      @include triangle(20px, $cert-distinguished-color, up-right);
     }
 
-    .accomplishment-main {
-        background: palette(primary, back);
+    .deco-corner-tr {
+      @include triangle(20px, $cert-distinguished-color, up-left);
     }
 
-    .accomplishment-rendering {
-        background: $white url('../images/bg-verified.png') center no-repeat;
-        background-size: 65%;
+    .deco-corner-bl {
+      @include triangle(20px, $cert-distinguished-color, down-right);
 
-        .deco-corner-tl {
-            @include triangle(20px, $cert-distinguished-color, up-right);
-        }
-
-        .deco-corner-tr {
-            @include triangle(20px, $cert-distinguished-color, up-left);
-        }
-
-        .deco-corner-bl {
-            @include triangle(20px, $cert-distinguished-color, down-right);
-
-        }
-
-        .deco-corner-br {
-            @include triangle(20px, $cert-distinguished-color, down-left);
-        }
     }
 
-    .accomplishment-rendering {
-        border-color: $cert-distinguished-color;
-
-        .accomplishment-type-label {
-            color: $cert-distinguished-color;
-        }
+    .deco-corner-br {
+      @include triangle(20px, $cert-distinguished-color, down-left);
     }
+  }
+
+  .accomplishment-rendering {
+    border-color: $cert-distinguished-color;
+
+    .accomplishment-type-label {
+      color: $cert-distinguished-color;
+    }
+  }
 }
 
 // ------------------------------
@@ -538,82 +548,84 @@
 // #FOOTER
 // ------------------------------
 .footer-app {
-    border-top: rem(4) solid palette(grayscale, x-back);
-    padding-top: spacing-vertical(base);
+  border-top: rem(4) solid palette(grayscale, x-back);
+  padding-top: spacing-vertical(base);
 }
 
 .footer-app-nav {
-
-    .list {
-        @extend %list-unstyled;
-    }
+  .list {
+    @extend %list-unstyled;
+  }
 }
 
 // ------------------------------
 // #BADGES MODAL
 // ------------------------------
 .badges-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: z-index(front);
+  background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+
+  .badges-modal {
+    @extend %copy-large;
+
+    box-sizing: content-box;
     position: fixed;
-    top: 0;
+    top: spacing-vertical(large);
+    right: 0;
     left: 0;
-    z-index: z-index(front);
-    background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */
-    width: 100%;
-    height: 100%;
-    vertical-align: middle;
+    z-index: z-index(very-front);
+    max-width: 50%;
+    margin-right: auto;
+    margin-left: auto;
+    border-top: rem(10) solid palette(primary, back);
+    background: palette(grayscale, x-back);
+    padding-right: spacing-horizontal(large);
+    padding-left: spacing-horizontal(large);
+    overflow-x: hidden;
+    color: palette(grayscale, dark);
 
-    .badges-modal {
-        @extend %copy-large;
-        box-sizing: content-box;
-        position: fixed;
-        top: spacing-vertical(large);
-        right: 0;
-        left: 0;
-        z-index: z-index(very-front);
-        max-width: 50%;
-        margin-right: auto;
-        margin-left: auto;
-        border-top: rem(10) solid palette(primary, back);
-        background: palette(grayscale, x-back);
-        padding-right: spacing-horizontal(large);
-        padding-left: spacing-horizontal(large);
-        overflow-x: hidden;
-        color: palette(grayscale, dark);
-
-        .close {
-            position: absolute;
-            right: spacing-horizontal(mid-small);
-            top: spacing-vertical(small);
-            font-weight: font-weight(bold);
-            cursor: pointer;
-        }
-
-        .badges-steps {
-            display: table;
-        }
-
-        .image-container{
-            // Lines the image up with the content of the above list.
-            @include ltr {
-                @include padding-left(2em);
-            }
-            @include rtl {
-                @include padding-right(1em);
-                float: right;
-            }
-        }
-
-        .backpack-logo {
-            @include float(right);
-            @include margin-left(spacing-horizontal(small));
-        }
+    .close {
+      position: absolute;
+      right: spacing-horizontal(mid-small);
+      top: spacing-vertical(small);
+      font-weight: font-weight(bold);
+      cursor: pointer;
     }
+
+    .badges-steps {
+      display: table;
+    }
+
+    .image-container{
+      // Lines the image up with the content of the above list.
+      @include ltr {
+        @include padding-left(2em);
+      }
+
+      @include rtl {
+        @include padding-right(1em);
+
+        float: right;
+      }
+    }
+
+    .backpack-logo {
+      @include float(right);
+      @include margin-left(spacing-horizontal(small));
+    }
+  }
 }
 
 .modal-hr {
-    display: block;
-    border: none;
-    background-color: palette(grayscale, back);
-    height: rem(2);
-    width: 100%;
+  display: block;
+  border: none;
+  background-color: palette(grayscale, back);
+  height: rem(2);
+  width: 100%;
 }
diff --git a/lms/static/certificates/sass/_config.scss b/lms/static/certificates/sass/_config.scss
index 1f52da440a..a20c18c088 100644
--- a/lms/static/certificates/sass/_config.scss
+++ b/lms/static/certificates/sass/_config.scss
@@ -16,14 +16,13 @@ $cert-decorative-color-emphasized: palette(grayscale, accent);
 
 // typography: config
 @include font-face(
-    'Domine',
+  'Domine',
     '../../certificates/fonts/Domine/Domine-Regular-webfont',
     400,
     $file-formats: woff woff2 ttf
 );
-
 @include font-face(
-    'Domine',
+  'Domine',
     '../../certificates/fonts/Domine/Domine-Bold-webfont',
     700,
     $file-formats: woff woff2 ttf
diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss
index 6061d4105b..9aa47a833b 100644
--- a/lms/static/certificates/sass/_layouts.scss
+++ b/lms/static/certificates/sass/_layouts.scss
@@ -10,352 +10,365 @@
 // #BASE
 // ------------------------------
 %layout-wrapper {
-    margin-bottom: spacing-vertical(base);
-    padding: 0 5%;
+  margin-bottom: spacing-vertical(base);
+  padding: 0 5%;
 
-    @media(min-width: $bp-screen-md) {
-        padding: 0 2.5%;
-    }
+  @media(min-width: $bp-screen-md) {
+    padding: 0 2.5%;
+  }
 }
 
 %layout {
-    @include grid-container();
+  @include grid-container();
 }
 
 // app header
 .wrapper-header {
-    @extend %layout-wrapper;
-    padding-top: spacing-vertical(small);
-    padding-bottom: spacing-vertical(small);
+  @extend %layout-wrapper;
+
+  padding-top: spacing-vertical(small);
+  padding-bottom: spacing-vertical(small);
 }
 
 .header-app {
-    @extend %layout;
+  @extend %layout;
 
-    .logo {
-        display: block;
-        @include size(rem(100) auto);
-        margin: 0 auto;
-    }
+  .logo {
+    display: block;
 
-    .logo-img {
-        display: block;
-        width: 100%;
-    }
+    @include size(rem(100) auto);
+
+    margin: 0 auto;
+  }
+
+  .logo-img {
+    display: block;
+    width: 100%;
+  }
 }
 
 .header-app-title {
-    @include text-align(center);
-    @include span(12);
-    margin: 0;
+  @include text-align(center);
+  @include span(12);
+
+  margin: 0;
 }
 
 // banner
 .wrapper-banner {
-    @extend %layout-wrapper;
-    padding-top: spacing-vertical(small);
-    padding-bottom: spacing-vertical(small);
+  @extend %layout-wrapper;
 
-    .banner {
-        @extend %layout;
-    }
+  padding-top: spacing-vertical(small);
+  padding-bottom: spacing-vertical(small);
+
+  .banner {
+    @extend %layout;
+  }
 }
 
 // message to user-centric banner
 .wrapper-banner-user {
-    margin-top: -(spacing-vertical(base)); // abut the global header, plz
+  margin-top: -(spacing-vertical(base)); // abut the global header, plz
 }
 
 .banner-user {
-    @include text-align(center);
+  @include text-align(center);
 
-    @media(min-width: $bp-screen-lg) {
-        @include text-align(left);
+  @media(min-width: $bp-screen-lg) {
+    @include text-align(left);
+  }
+
+  .wrapper-copy-and-actions {
+    @include grid-container();
+
+    .message-copy {
+      margin-bottom: spacing-vertical(small);
     }
 
-    .wrapper-copy-and-actions {
-        @include grid-container();
+    .message-actions {
+      @include span(12);
 
-        .message-copy {
-            margin-bottom: spacing-vertical(small);
+      .action {
+        display: block;
+        width: 100%;
+        margin: 0 auto spacing-vertical(small) auto;
+
+        &:last-child {
+          margin-bottom: 0;
         }
 
-        .message-actions {
-            @include span(12);
+        // CASE: icon display only
+        &.icon-only {
+          @media(min-width: $bp-screen-md) {
+            padding: spacing-vertical(x-small) spacing-horizontal(base);
 
-            .action {
-                display: block;
-                width: 100%;
-                margin: 0 auto spacing-vertical(small) auto;
-
-                &:last-child {
-                    margin-bottom: 0;
-                }
-
-                // CASE: icon display only
-                &.icon-only {
-
-                    @media(min-width: $bp-screen-md) {
-                        padding: spacing-vertical(x-small) spacing-horizontal(base);
-
-                        .icon {
-                            @include margin-right(0);
-                        }
-                    }
-                }
-
-                @media(min-width: $bp-screen-md) {
-                    display: inline-block;
-                    vertical-align: middle;
-                    min-width: 130px;
-                    width: auto;
-                    margin-bottom: 0;
-                    margin-right: spacing-horizontal(mid-small);
-
-                    &:last-child {
-                        margin-right: 0;
-                    }
-                }
+            .icon {
+              @include margin-right(0);
             }
+          }
         }
+
+        @media(min-width: $bp-screen-md) {
+          display: inline-block;
+          vertical-align: middle;
+          min-width: 130px;
+          width: auto;
+          margin-bottom: 0;
+          margin-right: spacing-horizontal(mid-small);
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
     }
+  }
 }
 
 // app footer
 .wrapper-footer {
-    @extend %layout-wrapper;
+  @extend %layout-wrapper;
 }
 
 .footer-app {
-    @extend %layout;
+  @extend %layout;
 }
 
 .footer-app-copyright {
+  @media(min-width: $bp-screen-md) {
+    @include span(6, after);
 
-    @media(min-width: $bp-screen-md) {
-        @include span(6, after);
-        margin-bottom: 0;
-    }
+    margin-bottom: 0;
+  }
 }
 
 .footer-app-nav {
+  @media(min-width: $bp-screen-md) {
+    @include span(6, before);
+  }
 
+  .list {
+    .nav-item {
+      display: block;
+      margin-bottom: spacing-vertical(x-small);
+
+      @media(min-width: $bp-screen-md) {
+        display: inline-block;
+        vertical-align: middle;
+
+        @include margin-right(spacing-horizontal(base));
+
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .list-legal {
     @media(min-width: $bp-screen-md) {
-        @include span(6, before);
-    }
-
-    .list {
-
-        .nav-item {
-            display: block;
-            margin-bottom: spacing-vertical(x-small);
-
-            @media(min-width: $bp-screen-md) {
-                display: inline-block;
-                vertical-align: middle;
-                @include margin-right(spacing-horizontal(base));
-                margin-bottom: 0;
-            }
-        }
-    }
-
-    .list-legal {
-
-        @media(min-width: $bp-screen-md) {
-            @include text-align(right);
-        }
+      @include text-align(right);
     }
+  }
 }
 
 // ------------------------------
 // #ACCOMPLISHMENT
 // ------------------------------
 .layout-accomplishment {
+  .wrapper-introduction {
+    @extend %layout-wrapper;
 
-    .wrapper-introduction {
-        @extend %layout-wrapper;
-        margin-bottom: spacing-vertical(large);
+    margin-bottom: spacing-vertical(large);
 
-        .introduction {
-            @extend %layout;
-        }
+    .introduction {
+      @extend %layout;
+    }
+  }
+
+  .wrapper-accomplishment-rendering {
+    @extend %layout-wrapper;
+
+    margin-bottom: spacing-vertical(small);
+  }
+
+  .accomplishment-rendering {
+    @extend %layout;
+
+    position: relative;
+    top: -(spacing-vertical(base));
+
+    .accomplishment-course,
+    .accomplishment-recipient,
+    .accomplishment-type {
+      @include span(12);
     }
 
-    .wrapper-accomplishment-rendering {
-        @extend %layout-wrapper;
+    .accomplishment-summary,
+    .accomplishment-statement-detail {
+      @include span(12);
+    }
+  }
+
+  .accomplishment-orgs {
+    @include grid-row;
+
+    .wrapper-orgs {
+      @include text-align(center);
+    }
+
+    .wrapper-organization {
+      @include span(6);
+      @include margin-right(spacing-horizontal(base));
+
+      display: inline-block;
+      vertical-align: middle;
+      height: rem(100);
+      margin-bottom: spacing-vertical(small);
+
+      &:last-child {
+        @include margin-right(0);
+      }
+
+      @media(min-width: $bp-screen-md) {
+        @include span(3);
+      }
+
+      @media(min-width: $bp-screen-lg) {
+        @include span(2);
+      }
+
+      @media(min-width: $bp-screen-xl) {
+        @include span(2);
+      }
+    }
+
+    .organization {
+      @include size(100%);
+
+      position: relative;
+
+    }
+
+    .organization-logo {
+      max-width: 80%;
+      position: absolute;
+      top: 50%;
+
+      @include left(50%);
+
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .accomplishment-signatories {
+    .wrapper-signatories {
+      @include text-align(center);
+    }
+
+    .signatory {
+      display: inline-block;
+      vertical-align: middle;
+
+      @include span(12);
+
+      @media(min-width: $bp-screen-md) {
+        @include span(4);
+      }
+
+      @media(min-width: $bp-screen-lg) {
+        @include span(3);
+      }
+
+      @media(min-width: $bp-screen-xl) {
+        @include span(3);
+      }
+
+      .signatory-signature {
+        display: block;
+        max-width: 100%;
+        max-height: rem(100);
+        padding: spacing-vertical(small) spacing-horizontal(small);
+      }
+    }
+  }
+
+  .wrapper-accomplishment-metadata {
+    @extend %layout-wrapper;
+
+    .accomplishment-metadata {
+      @extend %layout;
+
+      .accomplishment-metadata-title {
+        @include span(12);
+      }
+    }
+
+    .wrapper-metadata {
+      @extend %layout;
+
+      .metadata {
+        @extend %divider-2;
+
+        @include span(12);
+
         margin-bottom: spacing-vertical(small);
+        border-bottom-color: palette(grayscale, x-back);
+        padding-bottom: spacing-vertical(small);
+
+        &:last-child {
+          border-bottom: none;
+          padding-bottom: 0;
+        }
+
+        @media(min-width: $bp-screen-md) {
+          @include span(4);
+
+          border-bottom: none;
+          padding-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .wrapper-accomplishment-related {
+    @extend %layout-wrapper;
+
+    .accomplishment-related {
+      @extend %layout;
     }
 
-    .accomplishment-rendering {
-        @extend %layout;
-        position: relative;
-        top: -(spacing-vertical(base));
+    .accomplishment-brief {
+      margin-bottom: spacing-vertical(small);
 
-        .accomplishment-course,
-        .accomplishment-recipient,
-        .accomplishment-type {
-            @include span(12);
-        }
+      @media(min-width: $bp-screen-md) {
+        @include span(6);
+      }
 
-        .accomplishment-summary,
-        .accomplishment-statement-detail {
-           @include span(12);
-        }
+      .accomplishment-type-symbol {
+        @include size(rem(50));
+        @include margin-right(spacing-horizontal(base));
+      }
+    }
+  }
+
+  .wrapper-about {
+    @extend %layout-wrapper;
+
+    .about {
+      @extend %layout;
     }
 
-    .accomplishment-orgs {
-        @include grid-row;
+    .about-item {
+      margin-bottom: spacing-vertical(base);
 
-        .wrapper-orgs {
-            @include text-align(center);
-        }
+      &:last-child {
+        margin-bottom: 0;
+      }
 
-        .wrapper-organization {
-            @include span(6);
-            @include margin-right(spacing-horizontal(base));
-            display: inline-block;
-            vertical-align: middle;
-            height: rem(100);
-            margin-bottom: spacing-vertical(small);
+      @media(min-width: $bp-screen-md) {
+        @include span(6);
 
-            &:last-child {
-                @include margin-right(0);
-            }
-
-            @media(min-width: $bp-screen-md) {
-                @include span(3);
-            }
-
-            @media(min-width: $bp-screen-lg) {
-                @include span(2);
-            }
-
-            @media(min-width: $bp-screen-xl) {
-                @include span(2);
-            }
-        }
-
-        .organization {
-            @include size(100%);
-            position: relative;
-
-        }
-
-        .organization-logo {
-            max-width: 80%;
-            position: absolute;
-            top: 50%;
-            @include left(50%);
-            transform: translate(-50%, -50%);
-        }
-    }
-
-    .accomplishment-signatories {
-
-        .wrapper-signatories {
-            @include text-align(center);
-        }
-
-        .signatory {
-            display: inline-block;
-            vertical-align: middle;
-            @include span(12);
-
-            @media(min-width: $bp-screen-md) {
-                @include span(4);
-            }
-
-            @media(min-width: $bp-screen-lg) {
-                @include span(3);
-            }
-
-            @media(min-width: $bp-screen-xl) {
-                @include span(3);
-            }
-
-            .signatory-signature {
-                display: block;
-                max-width: 100%;
-                max-height: rem(100);
-                padding: spacing-vertical(small) spacing-horizontal(small);
-            }
-        }
-    }
-
-    .wrapper-accomplishment-metadata {
-        @extend %layout-wrapper;
-
-        .accomplishment-metadata {
-           @extend %layout;
-
-           .accomplishment-metadata-title {
-               @include span(12);
-           }
-        }
-
-        .wrapper-metadata {
-            @extend %layout;
-
-            .metadata {
-                @extend %divider-2;
-                @include span(12);
-                margin-bottom: spacing-vertical(small);
-                border-bottom-color: palette(grayscale, x-back);
-                padding-bottom: spacing-vertical(small);
-
-                &:last-child {
-                    border-bottom: none;
-                    padding-bottom: 0;
-                }
-
-                @media(min-width: $bp-screen-md) {
-                    @include span(4);
-                    border-bottom: none;
-                    padding-bottom: 0;
-                }
-            }
-        }
-    }
-
-    .wrapper-accomplishment-related {
-        @extend %layout-wrapper;
-
-        .accomplishment-related {
-            @extend %layout;
-        }
-
-        .accomplishment-brief {
-            margin-bottom: spacing-vertical(small);
-
-            @media(min-width: $bp-screen-md) {
-                @include span(6);
-            }
-
-            .accomplishment-type-symbol {
-                @include size(rem(50));
-                @include margin-right(spacing-horizontal(base));
-            }
-        }
-    }
-
-    .wrapper-about {
-        @extend %layout-wrapper;
-
-        .about {
-            @extend %layout;
-        }
-
-        .about-item {
-            margin-bottom: spacing-vertical(base);
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-
-            @media(min-width: $bp-screen-md) {
-                @include span(6);
-                margin-bottom: 0;
-            }
-        }
+        margin-bottom: 0;
+      }
     }
+  }
 }
diff --git a/lms/static/certificates/sass/_print.scss b/lms/static/certificates/sass/_print.scss
index 56e1f5d0c2..9b368e7d11 100644
--- a/lms/static/certificates/sass/_print.scss
+++ b/lms/static/certificates/sass/_print.scss
@@ -15,39 +15,39 @@
 
 // page set up - only available to modern browsers now
 @page {
-    size : landscape;
+  size : landscape;
 }
 
 @media print {
 
-    // helpers
-    %print-no-background {
-        background: none !important;
-    }
+  // helpers
+  %print-no-background {
+    background: none !important;
+  }
 
-    %print-hide {
-        display: none !important;
-    }
+  %print-hide {
+    display: none !important;
+  }
 
-    %print-black-on-white {
-        background: $white !important;
-        color: $black !important;
-    }
+  %print-black-on-white {
+    background: $white !important;
+    color: $black !important;
+  }
 
-    %print-layout-wrapper {
-        padding: 0 !important;
-    }
+  %print-layout-wrapper {
+    padding: 0 !important;
+  }
 
-    %print-rendering-section {
-        margin-bottom: spacing-vertical(small);
-        border-bottom: none !important;
-        padding-bottom: 0 !important;
+  %print-rendering-section {
+    margin-bottom: spacing-vertical(small);
+    border-bottom: none !important;
+    padding-bottom: 0 !important;
 
-        &:last-child {
-            border: none;
-            padding-bottom: 0;
-        }
+    &:last-child {
+      border: none;
+      padding-bottom: 0;
     }
+  }
 }
 
 // ------------------------------
@@ -55,40 +55,40 @@
 // ------------------------------
 @media print {
 
-    // prevent images from bleeding over the edge of the printed page
-    img {
-       max-width: 100% !important;
-    }
+  // prevent images from bleeding over the edge of the printed page
+  img {
+    max-width: 100% !important;
+  }
 
-    // prevent large elements from being split across multiple pages
-    ul, img {
-       page-break-inside: avoid;
-    }
+  // prevent large elements from being split across multiple pages
+  ul, img {
+    page-break-inside: avoid;
+  }
 
-    // reset body/view properties
-    html,
-    body {
-        @extend %print-black-on-white;
-    }
+  // reset body/view properties
+  html,
+  body {
+    @extend %print-black-on-white;
+  }
 
-    body {
-        height: auto;
-        margin: spacing-vertical(mid-large) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important;
-        padding: 0;
-    }
+  body {
+    height: auto;
+    margin: spacing-vertical(mid-large) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important;
+    padding: 0;
+  }
 
-    .wrapper-view {
-        margin-bottom: 0 !important;
+  .wrapper-view {
+    margin-bottom: 0 !important;
 
-    }
+  }
 }
 
 // force background images and colors
 @media print and (color) {
-   * {
-      -webkit-print-color-adjust: exact;
-      print-color-adjust: exact;
-   }
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
 }
 
 // ------------------------------
@@ -96,25 +96,25 @@
 // ------------------------------
 @media print {
 
-    // hide elements not needed for print rendering
-    .wrapper-banner-user,
-    .wrapper-about,
-    .wrapper-footer,
-    .wrapper-header,
-    .wrapper-introduction,
-    .accomplishment-metadata-title,
-    .accomplishment-metadata .accomplishment-recipient,
-    .deco-corner,
-    .accomplishment-date .label {
-        @extend %print-hide;
-    }
+  // hide elements not needed for print rendering
+  .wrapper-banner-user,
+  .wrapper-about,
+  .wrapper-footer,
+  .wrapper-header,
+  .wrapper-introduction,
+  .accomplishment-metadata-title,
+  .accomplishment-metadata .accomplishment-recipient,
+  .deco-corner,
+  .accomplishment-date .label {
+    @extend %print-hide;
+  }
 
-    // remove layout wrappers' padding
-    .wrapper-introduction,
-    .wrapper-accomplishment-rendering,
-    .wrapper-accomplishment-metadata {
-        @extend %print-layout-wrapper;
-    }
+  // remove layout wrappers' padding
+  .wrapper-introduction,
+  .wrapper-accomplishment-rendering,
+  .wrapper-accomplishment-metadata {
+    @extend %print-layout-wrapper;
+  }
 }
 
 // ------------------------------
@@ -122,204 +122,211 @@
 // ------------------------------
 @media print {
 
-    // headings
-    .hd-1 {
-        font-size: font-size(x-large);
-        line-height: line-height(x-large);
+  // headings
+  .hd-1 {
+    font-size: font-size(x-large);
+    line-height: line-height(x-large);
+  }
+
+  .hd-2 {
+    font-size: font-size(large);
+    line-height: line-height(large);
+  }
+
+  .hd-3 {
+    font-size: font-size(large);
+    line-height: line-height(large);
+  }
+
+  .hd-4 {
+    font-size: font-size(base);
+    line-height: line-height(base);
+  }
+
+  .hd-5 {
+    font-size: font-size(small);
+    line-height: line-height(small);
+  }
+
+  .hd-6 {
+    font-size: font-size(x-small);
+    line-height: line-height(x-small);
+  }
+
+  .hd-7 {
+    font-size: font-size(xx-small);
+    line-height: line-height(x-small);
+  }
+
+  // copy
+  .copy-lead {
+    font-size: font-size(base);
+    line-height: line-height(base);
+  }
+
+  .copy-large {
+    font-size: font-size(base);
+    line-height: line-height(base);
+  }
+
+  .copy-base {
+    font-size: font-size(small);
+    line-height: line-height(small);
+  }
+
+  .copy-meta {
+    font-size: font-size(x-small);
+    line-height: line-height(small);
+  }
+
+  .copy-micro {
+    font-size: font-size(xx-small);
+    line-height: line-height(x-small);
+  }
+
+  // accomplishment
+  .accomplishment-main {
+    @extend %print-no-background;
+  }
+
+  .accomplishment-rendering {
+    top: 0 !important;
+    border: rem(1) solid palette(grayscale, back);
+    border-top: rem(2) solid $cert-base-color;
+    box-shadow: none;
+    padding: spacing-vertical(small) spacing-horizontal(mid-large);
+
+
+    .accomplishment-type {
+      margin-top: -(spacing-vertical(mid-large));
     }
 
-    .hd-2 {
-        font-size: font-size(large);
-        line-height: line-height(large);
+    .accomplishment-type-symbol {
+      @include size(rem(75));
+
+      border: none !important;
     }
 
-    .hd-3 {
-        font-size: font-size(large);
-        line-height: line-height(large);
+    .wrapper-statement-and-signatories {
+      border-bottom: rem(2) solid palette(grayscale, x-back);
     }
 
-    .hd-4 {
-        font-size: font-size(base);
-        line-height: line-height(base);
+    .accomplishment-statement {
+      @extend %print-rendering-section;
+
+      @include span(8);
+
+      margin: 0 auto;
     }
 
-    .hd-5 {
-        font-size: font-size(small);
-        line-height: line-height(small);
+    .accomplishment-summary,
+    .accomplishment-statement-detail {
+      margin-bottom: spacing-vertical(mid-small);
     }
 
-    .hd-6 {
+    .wrapper-orgs::after {
+      display: none;
+    }
+
+    .accomplishment-orgs {
+      margin-bottom: 0 !important;
+      border-bottom: none !important;
+      padding-bottom: 0 !important;
+
+      .wrapper-organization {
+        height: rem(48);
+        margin-top: spacing-vertical(mid-small) !important;
+        margin-bottom: spacing-vertical(mid-small) !important;
+      }
+
+      .organization-logo {
+        max-width: 100%;
+        max-height: 80%;
+      }
+    }
+
+    .accomplishment-signatories {
+      @extend %print-rendering-section;
+
+      @include span(12, before);
+
+      .signatory-credentials {
+        font-size: 8pt;
+        line-height: 1.3;
+      }
+
+      .signatory-signature {
+        height: spacing-vertical(small);
+        max-width: 100%;
+        margin-top: 0;
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+      }
+
+      .signatory-name {
         font-size: font-size(x-small);
-        line-height: line-height(x-small);
-    }
+      }
 
-    .hd-7 {
-        font-size: font-size(xx-small);
-        line-height: line-height(x-small);
-    }
+      .signatory-credentials {
+        margin-bottom: 0 !important;
+      }
 
-    // copy
-    .copy-lead {
-        font-size: font-size(base);
-        line-height: line-height(base);
-    }
-
-    .copy-large {
-       font-size: font-size(base);
-       line-height: line-height(base);
-    }
-
-    .copy-base {
-        font-size: font-size(small);
-        line-height: line-height(small);
-    }
-
-    .copy-meta {
-        font-size: font-size(x-small);
-        line-height: line-height(small);
-    }
-
-    .copy-micro {
-        font-size: font-size(xx-small);
-        line-height: line-height(x-small);
-    }
-
-    // accomplishment
-    .accomplishment-main {
-        @extend %print-no-background;
-    }
-
-    .accomplishment-rendering {
-        top: 0 !important;
-        border: rem(1) solid palette(grayscale, back);
-        border-top: rem(2) solid $cert-base-color;
-        box-shadow: none;
-        padding: spacing-vertical(small) spacing-horizontal(mid-large);
-
-
-        .accomplishment-type {
-            margin-top: -(spacing-vertical(mid-large));
-        }
-
-        .accomplishment-type-symbol {
-            @include size(rem(75));
-            border: none !important;
-        }
-
-        .wrapper-statement-and-signatories {
-            border-bottom: rem(2) solid palette(grayscale, x-back);
-        }
-
-        .accomplishment-statement {
-            @extend %print-rendering-section;
-            @include span(8);
-            margin: 0 auto;
-        }
-
-        .accomplishment-summary,
-        .accomplishment-statement-detail {
-            margin-bottom: spacing-vertical(mid-small);
-        }
-
-        .wrapper-orgs::after {
-            display: none;
-        }
-
-        .accomplishment-orgs {
-            margin-bottom: 0 !important;
-            border-bottom: none !important;
-            padding-bottom: 0 !important;
-
-            .wrapper-organization {
-                height: rem(48);
-                margin-top: spacing-vertical(mid-small) !important;
-                margin-bottom: spacing-vertical(mid-small) !important;
-            }
-
-            .organization-logo {
-                max-width: 100%;
-                max-height: 80%;
-            }
-        }
-
-        .accomplishment-signatories {
-            @extend %print-rendering-section;
-            @include span(12, before);
-
-            .signatory-credentials {
-                font-size: 8pt;
-                line-height: 1.3;
-            }
-
-            .signatory-signature {
-                height: spacing-vertical(small);
-                max-width: 100%;
-                margin-top: 0;
-                padding-top: 0 !important;
-                padding-bottom: 0 !important;
-            }
-
-            .signatory-name {
-                font-size: font-size(x-small);
-            }
-
-            .signatory-credentials {
-                margin-bottom: 0 !important;
-            }
-
-            // CASE: > 4 signatures
-            &.has-many {
-
-                .signatory {
-                    @include span(2);
-                }
-            }
+      // CASE: > 4 signatures
+      &.has-many {
+        .signatory {
+          @include span(2);
         }
+      }
     }
+  }
 
-    .layout-accomplishment .wrapper-accomplishment-metadata {
+  .layout-accomplishment .wrapper-accomplishment-metadata {
+    margin-bottom: 0;
+  }
+
+  .accomplishment-metadata {
+    margin-bottom: 0;
+
+    .wrapper-metadata {
+      @include clearfix();
+
+      margin-bottom: 0;
+
+      .metadata {
         margin-bottom: 0;
+        border-bottom: none !important;
+        padding-bottom: 0 !important;
+
+        .label, .value {
+          display: inline-block;
+          vertical-align: baseline;
+          font-size: font-size(x-small);
+          line-height: line-height(small);
+        }
+
+        .label {
+          @include margin-right(spacing-horizontal(small));
+        }
+      }
     }
 
-    .accomplishment-metadata {
-        margin-bottom: 0;
-
-        .wrapper-metadata {
-            @include clearfix();
-            margin-bottom: 0;
-
-            .metadata {
-                margin-bottom: 0;
-                border-bottom: none !important;
-                padding-bottom: 0 !important;
-
-                .label, .value {
-                    display: inline-block;
-                    vertical-align: baseline;
-                    font-size: font-size(x-small);
-                    line-height: line-height(small);
-                }
-
-                .label {
-                    @include margin-right(spacing-horizontal(small));
-                }
-            }
-        }
-        .accomplishment-id {
-            float: left;
-            width: 65% !important;
-            margin: 0 !important;
-            @include text-align(left);
-        }
-
-        .accomplishment-date {
-            float: right;
-            width: 35% !important;
-            margin: 0 !important;
-            @include text-align(right);
-        }
+    .accomplishment-id {
+      float: left;
+      width: 65% !important;
+      margin: 0 !important;
 
+      @include text-align(left);
     }
+
+    .accomplishment-date {
+      float: right;
+      width: 35% !important;
+      margin: 0 !important;
+
+      @include text-align(right);
+    }
+
+  }
 }
 
 // ------------------------------
@@ -327,12 +334,10 @@
 // ------------------------------
 // certificate - distinguished
 @media print {
-
-    .certificate-distinguished {
-
-        .accomplishment-rendering {
-            border-top-color: $cert-distinguished-color;
-        }
+  .certificate-distinguished {
+    .accomplishment-rendering {
+      border-top-color: $cert-distinguished-color;
     }
+  }
 }
 
diff --git a/lms/static/certificates/sass/_utilities.scss b/lms/static/certificates/sass/_utilities.scss
index ae695cf4f4..9be3ff38f9 100644
--- a/lms/static/certificates/sass/_utilities.scss
+++ b/lms/static/certificates/sass/_utilities.scss
@@ -20,11 +20,11 @@
 // ------------------------------
 // visual dividers
 %divider-1 {
-    border-bottom-width: rem(4);
-    border-bottom-style: solid;
+  border-bottom-width: rem(4);
+  border-bottom-style: solid;
 }
 
 %divider-2 {
-    border-bottom-width: rem(2);
-    border-bottom-style: solid;
+  border-bottom-width: rem(2);
+  border-bottom-style: solid;
 }
diff --git a/lms/static/certificates/sass/_views.scss b/lms/static/certificates/sass/_views.scss
index 410d6dc37f..ad37deaba1 100644
--- a/lms/static/certificates/sass/_views.scss
+++ b/lms/static/certificates/sass/_views.scss
@@ -17,11 +17,11 @@
 // #INVALID
 // ------------------------------
 .wrapper-content.status-invalid {
-    @extend %layout-wrapper;
+  @extend %layout-wrapper;
 
-    .wrapper-content-grid {
-        @extend %layout;
-    }
+  .wrapper-content-grid {
+    @extend %layout;
+  }
 
   .content-main {
     margin-bottom: spacing-vertical(base);
@@ -32,7 +32,6 @@
   }
 
   .content-secondary {
-
     @media(min-width: $bp-screen-md) {
       @include span(3, before);
     }
diff --git a/lms/static/certificates/sass/main-ltr.scss b/lms/static/certificates/sass/main-ltr.scss
index 41f638c2b4..294621e2c2 100644
--- a/lms/static/certificates/sass/main-ltr.scss
+++ b/lms/static/certificates/sass/main-ltr.scss
@@ -9,6 +9,7 @@
 
 // Load the LTR version of the edX Pattern Library
 $pattern-library-path: '../../edx-pattern-library' !default;
+
 @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
 
 // Load the shared build
diff --git a/lms/static/certificates/sass/main-rtl.scss b/lms/static/certificates/sass/main-rtl.scss
index faea15b67e..39afa4592e 100644
--- a/lms/static/certificates/sass/main-rtl.scss
+++ b/lms/static/certificates/sass/main-rtl.scss
@@ -9,6 +9,7 @@
 
 // Load the RTL version of the edX Pattern Library
 $pattern-library-path: '../../edx-pattern-library' !default;
+
 @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
 
 // Load the shared build
diff --git a/lms/static/sass/base/_animations.scss b/lms/static/sass/base/_animations.scss
index 7a62b81130..bace488eb1 100644
--- a/lms/static/sass/base/_animations.scss
+++ b/lms/static/sass/base/_animations.scss
@@ -303,11 +303,11 @@
   }
 }
 
-@-webkit-keyframes fade-in-animation{ @include fade-in-keyframes; }
+@-webkit-keyframes fade-in-animation { @include fade-in-keyframes; }
 
-@-moz-keyframes fade-in-animation{ @include fade-in-keyframes; }
+@-moz-keyframes fade-in-animation { @include fade-in-keyframes; }
 
-@keyframes fade-in-animation{ @include fade-in-keyframes; }
+@keyframes fade-in-animation { @include fade-in-keyframes; }
 
 
 // +utility animations
diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index 0fdcccfe53..8d11350866 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -12,7 +12,7 @@ html, body {
   line-height: 1em;
 }
 
-html{
+html {
   background: white;
 }
 
diff --git a/lms/static/sass/course/_auto-cert.scss b/lms/static/sass/course/_auto-cert.scss
index 988ef1dc2a..fe549e3212 100644
--- a/lms/static/sass/course/_auto-cert.scss
+++ b/lms/static/sass/course/_auto-cert.scss
@@ -18,14 +18,14 @@
 
     .has-actions {
       .msg-content {
-        width: flex-grid(9,12);
+        width: flex-grid(9, 12);
       }
 
       .msg-actions {
         @extend %t-copy-base;
 
         display: inline-block;
-        width: flex-grid(3,12);
+        width: flex-grid(3, 12);
 
         .btn {
           @extend %btn-primary-blue;
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index e4a0d5694d..f679c62803 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -5,7 +5,7 @@ $notification-highlight-border-color:      $uxpl-green-base !default;
 $lms-border-color:                         $uxpl-gray-background !default;
 $notification-background:                  rgb(255, 255, 255) !default
 
-  .home{
+  .home {
   @include clearfix();
 
   max-width: 1140px;
diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss
index 10dabcf60e..e6f2c80a50 100644
--- a/lms/static/sass/course/_profile.scss
+++ b/lms/static/sass/course/_profile.scss
@@ -39,7 +39,8 @@
 
         @include transition(none);
 
-        div#location_sub, div#language_sub {
+        div#location_sub,
+        div#language_sub {
           font-weight: bold;
           display: inline-block;
 
@@ -54,9 +55,6 @@
               margin: lh(0.5) 0;
               width: 100%;
             }
-
-            &[type="input"]{
-            }
           }
 
           &:empty {
@@ -80,7 +78,8 @@
           text-transform: uppercase;
           top: 9px;
 
-          &:hover, &:focus {
+          &:hover,
+          &:focus {
             color: #555;
           }
         }
@@ -111,7 +110,8 @@
           text-transform: uppercase;
           top: 9px;
 
-          &:hover, &:focus {
+          &:hover,
+          &:focus {
             color: #555;
           }
         }
@@ -171,7 +171,8 @@
         padding: 5px 18px 6px;
         text-align: center;
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           text-decoration: none;
         }
       }
@@ -182,7 +183,7 @@
       width: 100%;
     }
 
-    > .credit-eligibility{
+    > .credit-eligibility {
       border-top: 1px solid $lightGrey;
       margin-top: lh();
 
@@ -205,7 +206,7 @@
           @include padding-left(0.2em);
         }
 
-        > .detail-collapse{
+        > .detail-collapse {
           border: none;
           box-shadow: none;
           background: $white;
@@ -216,7 +217,7 @@
             padding: lh(0.25);
           }
 
-          > span{
+          > span {
             color: inherit;
           }
         }
@@ -224,7 +225,7 @@
         > .requirement-container {
           padding: lh();
 
-          > .requirement{
+          > .requirement {
             border-bottom: 1px solid $lightGrey;
             padding: lh(0.5);
 
@@ -233,26 +234,26 @@
               display: inline-block;
             }
 
-            > .requirement-status{
+            > .requirement-status {
               width: bi-app-invert-percentage(60%);
 
               @include float(right);
 
               display: inline-block;
 
-              .fa-times{
+              .fa-times {
                 @extend %t-icon6;
 
                 color: $alert-color;
               }
 
-              .fa-check{
+              .fa-check {
                 @extend %t-icon6;
 
                 color: $success-color;
               }
 
-              > .not-achieve{
+              > .not-achieve {
                 color: $darkGrey;
               }
             }
@@ -300,7 +301,7 @@
           width: flex-grid(7, 9);
 
           > div {
-            padding:0 0 lh() 0;
+            padding: 0 0 lh() 0;
 
             &:first-child {
               padding-top: 0;
diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss
index c091ff7404..dd5866ef80 100644
--- a/lms/static/sass/course/base/_base.scss
+++ b/lms/static/sass/course/base/_base.scss
@@ -104,7 +104,7 @@ input[type="password"] {
 
   &:focus {
     border-color: lighten($link-color, 20%);
-    box-shadow: 0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15);
+    box-shadow: 0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0, 0,0, 0.15);
   }
 }
 
diff --git a/lms/static/sass/course/instructor/_email.scss b/lms/static/sass/course/instructor/_email.scss
index 34fd32e1a7..86fe32fed0 100644
--- a/lms/static/sass/course/instructor/_email.scss
+++ b/lms/static/sass/course/instructor/_email.scss
@@ -26,7 +26,7 @@
   }
 }
 
-.email-background{
+.email-background {
   .content-history-email-table {
     display: none;
   }
diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss
index 4a73a7691f..03dcc2d7d1 100644
--- a/lms/static/sass/course/instructor/_instructor_2.scss
+++ b/lms/static/sass/course/instructor/_instructor_2.scss
@@ -13,7 +13,10 @@
   }
 }
 
-#ui-datepicker-div{z-index: 12000 !important; width: 16.5em !important}
+#ui-datepicker-div {
+  z-index: 12000 !important;
+  width: 16.5em !important;
+}
 
 
 .instructor-dashboard-wrapper-2 {
@@ -27,7 +30,7 @@
     @include font-size(16);
   }
 
-  .studio-edit-link{
+  .studio-edit-link {
     position: absolute;
     top: 40px;
 
@@ -83,7 +86,7 @@
   // TYPE: confirm
   .msg-confirm {
     display: none;
-    background: tint($confirm-color,95%);
+    background: tint($confirm-color, 95%);
     border-top: 2px solid $confirm-color;
     color: $confirm-color;
   }
@@ -98,9 +101,9 @@
     }
   }
 
-  .msg-success{
+  .msg-success {
     border-top: 2px solid $confirm-color;
-    background: tint($confirm-color,95%);
+    background: tint($confirm-color, 95%);
     color: $confirm-color;
   }
 
@@ -141,7 +144,7 @@
       }
     }
   }
-  
+
   .btn-blue {
     @extend %btn-primary-blue;
 
@@ -526,22 +529,23 @@
 
       input[name="send_to"] {
         float: left;
-        margin-top: .3em;
-        margin-left: .1em;
+        margin-top: 0.3em;
+        margin-left: 0.1em;
       }
 
-      input[name="send_to"]+label {
+      input[name="send_to"] + label {
         display: block;
         padding-left: 1.3em;
         margin-bottom: 0;
       }
 
-      input[name="send_to"]:checked+label {
+      input[name="send_to"]:checked + label {
         // "bolds" the text without causing a width recalculation
         text-shadow: 1px 0 0;
       }
 
-      input[name="send_to"]:focus+label, input[name="send_to"]:hover:not([disabled])+label {
+      input[name="send_to"]:focus + label,
+      input[name="send_to"]:hover:not([disabled]) + label {
         background-color: #efefef;
 
         * {
@@ -549,7 +553,7 @@
         }
       }
 
-      input[name="send_to"]:disabled+label {
+      input[name="send_to"]:disabled + label {
         font-weight: lighter;
         background-color: $light-gray3
       }
@@ -596,7 +600,7 @@
     &:last-child {
       margin-bottom: 0;
     }
-        
+
     legend {
       // use the same styles as H3s
       font-size: 1.2em;
@@ -671,14 +675,14 @@
         border-bottom: 8px solid transparent;
       }
     }
-    
+
     /* ***
      * Ideally we want to handle functionality with JS.
-     * This functionality should eventually be moved into CS/JS, and out of here. */ 
-    .has-hint:hover > .hint {    
+     * This functionality should eventually be moved into CS/JS, and out of here. */
+    .has-hint:hover > .hint {
       @include left($baseline*10);
     }
-    
+
     .has-hint input:focus ~ .hint {
       @include left($baseline*10);
     }
@@ -799,7 +803,8 @@
         color: $lighter-base-font-color;
         cursor: pointer;
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           color: $alert-color;
         }
       }
@@ -1091,7 +1096,7 @@
     text-shadow: none;
     padding: 0;
     color: $uxpl-blue-base;
-        
+
     &:hover,
     &:focus {
       text-decoration: underline;
@@ -1385,7 +1390,7 @@
       padding-top: ($baseline/2);
     }
 
-    .divided-discussion-text{
+    .divided-discussion-text {
       color: $uxpl-blue-base;
     }
 
@@ -1446,7 +1451,7 @@
 
 // view - data download
 // --------------------
-.instructor-dashboard-wrapper-2 section.idash-section#data_download{
+.instructor-dashboard-wrapper-2 section.idash-section#data_download {
   input {
     margin-bottom: 1em;
     line-height: 1.3em;
@@ -1658,13 +1663,13 @@ input[name="subject"] {
     height: 26px;
     line-height: 26px;
 
-    span{
+    span {
       @include float(right);
 
       font-size: 16px;
       font-weight: bold;
 
-      span{
+      span {
         background: #ddd;
         padding: 2px 9px;
         border-radius: 2px;
@@ -1674,7 +1679,7 @@ input[name="subject"] {
     }
   }
 
-  span.tip{
+  span.tip {
     display: block;
     padding: 10px 15px;
     border-top: 1px solid #ddd;
@@ -1683,7 +1688,7 @@ input[name="subject"] {
     color: #3c3c3c;
     line-height: 30px;
 
-    .add{
+    .add {
       @include button(simple, $uxpl-blue-base);
 
       @extend .button-reset;
@@ -1696,7 +1701,7 @@ input[name="subject"] {
 
 }
 
-#e-commerce{
+#e-commerce {
   input[name='list-order-sale-csv'] {
     @include margin-right(14px);
   }
@@ -1749,7 +1754,7 @@ input[name="subject"] {
     display: none;
   }
 
-  .content{
+  .content {
     padding: 0 !important;
   }
 
@@ -1770,15 +1775,15 @@ input[name="subject"] {
       border-bottom: 1px solid #f3f3f3;
     }
 
-    tr.always-gray{
+    tr.always-gray {
       background: #eee !important;
       border-top: 2px solid $white;
     }
 
-    tr.always-white{
+    tr.always-white {
       background: #fff !important;
 
-      td{
+      td {
         padding: ($baseline*1.5) 0 ($baseline/2);
       }
     }
@@ -1792,7 +1797,7 @@ input[name="subject"] {
         width: 120px;
       }
 
-      th:first-child{
+      th:first-child {
         padding-left: $baseline;
       }
 
@@ -1826,7 +1831,7 @@ input[name="subject"] {
           width: 60px;
         }
 
-        &.c_dsc{
+        &.c_dsc {
           width: 200px;
           word-wrap: break-word;
         }
@@ -1834,22 +1839,22 @@ input[name="subject"] {
     }
 
     // in_active coupon rows style
-    .inactive_coupon{
+    .inactive_coupon {
       background:  #fff0f0 !important;
       text-decoration: line-through;
-      color: rgba(51,51,51,0.2);
+      color: rgba(51, 51, 51, 0.2);
       border-bottom: 1px solid #fff;
 
       td {
         a {
-          color:  rgba(51,51,51,0.2);
+          color: rgba(51, 51, 51, 0.2);
         }
       }
     }
     // in_active coupon rows style
-    .expired_coupon{
-      background:  #feefb3 !important;
-      color: rgba(51,51,51,0.2);
+    .expired_coupon {
+      background: #feefb3 !important;
+      color: rgba(51, 51, 51, 0.2);
       border-bottom: 1px solid #fff;
 
       td:nth-child(3) {
@@ -1865,7 +1870,7 @@ input[name="subject"] {
         line-height: normal;
         font-size: 14px;
 
-        span.old-price{
+        span.old-price {
           top: -1px;
 
           @include left(-75px);
@@ -1877,7 +1882,7 @@ input[name="subject"] {
         }
       }
 
-      td:nth-child(5),td:first-child{
+      td:nth-child(5),td:first-child {
         @include padding-left($baseline);
       }
 
@@ -1895,8 +1900,8 @@ input[name="subject"] {
         text-align: center;
       }
 
-      td{
-        a.edit-right{
+      td {
+        a.edit-right {
           @include margin-left(15px);
         }
       }
@@ -1910,7 +1915,7 @@ input[name="subject"] {
   }
   // coupon edit and add modals
   #add-coupon-modal, #invalidate_registration_code_modal, #edit-coupon-modal,
-  #set-course-mode-price-modal, #registration_code_generation_modal{
+  #set-course-mode-price-modal, #registration_code_generation_modal {
     .inner-wrapper {
       background: $white;
     }
@@ -1960,8 +1965,8 @@ input[name="subject"] {
       background: #fbf2f3;
     }
 
-    ol.list-input{
-      li{
+    ol.list-input {
+      li {
         width: 278px;
 
         @include float(left);
@@ -1991,12 +1996,12 @@ input[name="subject"] {
         }
       }
 
-      li:last-child{
+      li:last-child {
         margin-bottom: 0 !important;
       }
     }
 
-    table.tb_registration_code_status{
+    table.tb_registration_code_status {
       margin-top: $baseline;
       color: #555;
 
@@ -2014,15 +2019,15 @@ input[name="subject"] {
         tr td:last-child {
           text-align: center;
 
-          a:first-child{
+          a:first-child {
             margin-right: 10px;
           }
         }
       }
     }
 
-    form#generate_codes ol.list-input{
-      li{
+    form#generate_codes ol.list-input {
+      li {
         width: 278px;
 
         @include float(left);
@@ -2041,7 +2046,7 @@ input[name="subject"] {
       }
 
       li#generate-registration-modal-field-city, li#generate-registration-modal-field-state,
-      li#generate-registration-modal-field-zipcode{
+      li#generate-registration-modal-field-zipcode {
         width: 205px;
       }
 
@@ -2067,7 +2072,7 @@ input[name="subject"] {
         @include margin-left(15px !important);
       }
 
-      li:last-child{
+      li:last-child {
         label {
           @include float(right);
           @include right(27px);
@@ -2096,7 +2101,7 @@ input[name="subject"] {
       }
     }
 
-    li#set-course-mode-modal-field-price{
+    li#set-course-mode-modal-field-price {
       width: 100%;
 
       label.required::after {
@@ -2105,7 +2110,7 @@ input[name="subject"] {
       }
     }
 
-    li#set-course-mode-modal-field-currency{
+    li#set-course-mode-modal-field-currency {
       @include margin-left(0px !important);
 
       select {
@@ -2206,12 +2211,25 @@ input[name="subject"] {
     }
   }
 
-  #add-coupon-modal{
-    ol.list-input{
-      li{
-        input[type="checkbox"]#expiry-check , input[type="checkbox"]#expiry-check + label {display: inline-block; width: auto;margin-top: 10px;}
-        &.full-width{width: 100%;}
-        input#coupon_expiration_date{width: 278px;display: inline-block;float: right;}
+  #add-coupon-modal {
+    ol.list-input {
+      li {
+        input[type="checkbox"]#expiry-check,
+        input[type="checkbox"]#expiry-check + label {
+          display: inline-block;
+          width: auto;
+          margin-top: 10px;
+        }
+
+        &.full-width {
+          width: 100%;
+        }
+
+        input#coupon_expiration_date {
+          width: 278px;
+          display: inline-block;
+          float: right;
+        }
       }
     }
   }
@@ -2229,7 +2247,7 @@ input[name="subject"] {
 }
 
 input[name="subject"] {
-  width:600px;
+  width: 600px;
 }
 
 .enrollment-wrapper {
@@ -2248,13 +2266,13 @@ input[name="subject"] {
 
     @include padding-left(25px);
 
-    span{
+    span {
       @include float(right);
 
       font-size: 16px;
       font-weight: bold;
 
-      span{
+      span {
         float: none;
         padding: 2px 9px;
         background: #ddd;
@@ -2264,7 +2282,7 @@ input[name="subject"] {
     }
   }
 
-  span.tip{
+  span.tip {
     display: block;
     padding: 10px 15px;
     border-top: 1px solid #ddd;
@@ -2273,7 +2291,7 @@ input[name="subject"] {
     color: #3c3c3c;
     line-height: 30px;
 
-    .add{
+    .add {
       @include button(simple, $uxpl-blue-base);
 
       @extend .button-reset;
@@ -2301,7 +2319,7 @@ input[name="subject"] {
     color: #3c3c3c;
     line-height: 30px;
 
-    .add{
+    .add {
       @include button(simple, $uxpl-blue-base);
 
       @extend .button-reset;
@@ -2317,7 +2335,7 @@ input[name="subject"] {
 
     @include padding(($baseline/2) 15px ($baseline/2) 1px);
 
-    .add{
+    .add {
       font-size: em(13);
     }
   }
@@ -2333,7 +2351,7 @@ input[name="subject"] {
     color: #3c3c3c;
     line-height: 30px;
 
-    .add{
+    .add {
       @include button(simple, $uxpl-blue-base);
 
       @extend .button-reset;
@@ -2360,7 +2378,7 @@ input[name="subject"] {
         text-align: center;
       }
 
-      th:first-child{
+      th:first-child {
         padding-left: $baseline;
       }
 
@@ -2434,7 +2452,7 @@ input[name="subject"] {
         font-size: 14px;
       }
 
-      td:first-child{
+      td:first-child {
         @include padding-left($baseline);
       }
 
@@ -2602,7 +2620,7 @@ input[name="subject"] {
   }
 
   .certificates-wrapper {
-    .message{
+    .message {
       @extend %exception-message;
     }
   }
@@ -2617,23 +2635,23 @@ input[name="subject"] {
     border-top: 7px solid #646464;
   }
 
-  .certificate-generation-history{
-    table{
-      thead{
+  .certificate-generation-history {
+    table {
+      thead {
         tr {
-          td.task-name{
+          td.task-name {
             width: 150px;
           }
 
-          td.task-date{
+          td.task-date {
             width: 200px;
           }
         }
       }
 
-      tbody{
+      tbody {
         tr {
-          td{
+          td {
             padding: 5px;
             vertical-align: middle;
             text-align: left;;
@@ -2685,7 +2703,7 @@ input[name="subject"] {
         text-align: left;
         color: $gray;
 
-        &.date{
+        &.date {
           width: 150px;
         }
 
diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss
index 7f906ff4f3..f0de3bdc8c 100644
--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -9,7 +9,7 @@
   padding: 0;
   width: 100%;
 
-  .course-material{
+  .course-material {
     @extend %inner-wrapper;
   }
 
diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss
index d4598c7a7e..8d645ff250 100644
--- a/lms/static/sass/course/wiki/_wiki.scss
+++ b/lms/static/sass/course/wiki/_wiki.scss
@@ -243,7 +243,7 @@
 
     @include box-sizing(border-box);
 
-    .timestamp{
+    .timestamp {
       margin-top: ($baseline*0.75);
       padding: 15px 0 0 10px;
       border-top: 1px solid $light-gray;
@@ -597,7 +597,7 @@
     margin-top: ($baseline*2);
   }
 
-  #cheatsheet-body pre{
+  #cheatsheet-body pre {
     color: $black;
     text-align: left;
     background: #eee;
diff --git a/lms/static/sass/discussion/_discussion-v1.scss b/lms/static/sass/discussion/_discussion-v1.scss
index 481eee7311..0c3add2726 100644
--- a/lms/static/sass/discussion/_discussion-v1.scss
+++ b/lms/static/sass/discussion/_discussion-v1.scss
@@ -6,7 +6,7 @@
 %pattern-library-btn {
   @include transition(
     color 0.125s ease-in-out 0s,
-        border-color 0.125s ease-in-out 0s,
+    border-color 0.125s ease-in-out 0s,
         background 0.125s ease-in-out 0s,
         box-shadow 0.125s ease-in-out 0s
    );
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index 2ec331d28d..44dd2b6113 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -57,7 +57,7 @@
   border-radius: $forum-border-radius;
 
   header {
-    .anonymous{
+    .anonymous {
       font-size: $forum-base-font-size;
     }
   }
diff --git a/lms/static/sass/discussion/views/_home.scss b/lms/static/sass/discussion/views/_home.scss
index 28aa364634..84a2ff1c51 100644
--- a/lms/static/sass/discussion/views/_home.scss
+++ b/lms/static/sass/discussion/views/_home.scss
@@ -70,7 +70,7 @@
           vertical-align: middle;
         }
 
-        .profile-stat-label{
+        .profile-stat-label {
           vertical-align: middle;
         }
       }
diff --git a/lms/static/sass/discussion/views/_response.scss b/lms/static/sass/discussion/views/_response.scss
index b0b3a414a2..553138ebf0 100644
--- a/lms/static/sass/discussion/views/_response.scss
+++ b/lms/static/sass/discussion/views/_response.scss
@@ -91,7 +91,7 @@
   }
 
   // CASE: label - community TA response
-  &.community-ta{
+  &.community-ta {
     padding-top: 38px;
     border-color: $forum-color-community-ta;
   }
diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss
index d99cd1b199..e7e7f075b6 100644
--- a/lms/static/sass/elements/_controls.scss
+++ b/lms/static/sass/elements/_controls.scss
@@ -328,7 +328,7 @@
   color: $action-primary-fg;
 }
 
-%btn-pl-white-base{
+%btn-pl-white-base {
   @extend %btn-pl-default-base;
 
   background-color: $action-primary-fg;
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index 02492a939d..6db280f142 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -404,7 +404,7 @@
 
       // states - all
       &.disabled, &.submitted {
-        color: rgba(0,0,0,.25);
+        color: rgba(0, 0,0,.25);
 
         label {
           cursor: text;
@@ -416,7 +416,7 @@
 
         textarea, input {
           background: $container-bg;
-          color: rgba(0,0,0,.25);
+          color: rgba(0, 0,0,.25);
         }
       }
 
@@ -434,7 +434,7 @@
       // states - disabled
       &.disabled {
         label::after {
-          color: rgba(0,0,0,.35);
+          color: rgba(0, 0,0,.35);
           content: "(Disabled Currently)";
         }
       }
diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index b3fa9ddf81..be6b7771e1 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -7,7 +7,7 @@
     background: $course-profile-bg;
     background-image: $homepage-bg-image;
     background-size: cover;
-    box-shadow: 0 1px 80px 0 rgba(0,0,0, 0.5);
+    box-shadow: 0 1px 80px 0 rgba(0, 0,0, 0.5);
     border-bottom: 1px solid $border-color-3;
     box-shadow: inset 0 1px 5px 0 $shadow-l1;
     height: 280px;
@@ -20,7 +20,7 @@
     .intro-inner-wrapper {
       background: $course-header-bg;
       border: 1px solid $border-color-3;
-      box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
+      box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
 
       @include box-sizing(border-box);
       @include clearfix();
@@ -207,7 +207,7 @@
           position: relative;
 
           .play-intro {
-            @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
+            @include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.65), rgba(0, 0,0, 0.75)));
 
             border-radius: 4px;
             box-shadow: 0 1px 12px 0 $shadow-d1;
@@ -235,7 +235,7 @@
 
               margin-top: -16px;
               position: absolute;
-              text-shadow: 0 -1px rgba(0,0,0, 0.8);
+              text-shadow: 0 -1px rgba(0, 0,0, 0.8);
               top: 50%;
             }
           }
@@ -250,9 +250,9 @@
           text-decoration: none;
 
           .play-intro {
-            @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
+            @include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.75), rgba(0, 0,0, 0.8)));
 
-            box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
+            box-shadow: 0 1px 12px 0 rgba(0, 0,0, 0.5);
             border-color: rgba(255,255,255, 0.9);
 
             &::after {
@@ -394,7 +394,7 @@
     width: flex-grid(4);
 
     > section {
-      box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
+      box-shadow: inset 0 0 3px 0 rgba(0, 0,0, 0.15);
       border: 1px solid $border-color-2;
 
       &.course-summary {
@@ -485,12 +485,12 @@
         }
 
         .sharing-message {
-          @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
-          rgba(0,0,0, 0.7) 100%));
+          @include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.9) 0%,
+          rgba(0, 0,0, 0.7) 100%));
 
-          border: 1px solid rgba(0,0,0, 0.5);
+          border: 1px solid rgba(0, 0,0, 0.5);
           border-radius: 4px;
-          box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
+          box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
 
           @include box-sizing(border-box);
 
diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss
index 5622fd2972..6a36232dd4 100644
--- a/lms/static/sass/multicourse/_courses.scss
+++ b/lms/static/sass/multicourse/_courses.scss
@@ -138,7 +138,7 @@ $facet-background-color: #007db8;
     background-image: $homepage-bg-image;
     background-position: center top !important;
     border-bottom: 1px solid $border-color-3;
-    box-shadow: inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3);
+    box-shadow: inset 0 -1px 8px 0 rgba(0, 0,0, 0.2), inset 0 1px 12px 0 rgba(0, 0,0, 0.3);
     height: 430px;
     margin-top: $header_image_margin;
     width: 100%;
@@ -156,7 +156,7 @@ $facet-background-color: #007db8;
         background: $white;
         background: $course-header-bg;
         border: 1px solid $border-color-3;
-        box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
+        box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
         padding: $baseline ($baseline*1.5);
         position: relative;
         z-index: 2;
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 55a38c53d1..213115da65 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -781,7 +781,7 @@
               width: flex-grid(9, 12);
               display: inline-block;
 
-              .message-copy-bold{
+              .message-copy-bold {
                 font-weight: 600;
               }
             }
@@ -804,7 +804,7 @@
             @include left($baseline/2);
             @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
 
-            .action-upgrade-icon{
+            .action-upgrade-icon {
               @include float(left);
 
               display: inline;
@@ -1403,7 +1403,7 @@
   }
 }
 
-p.course-block{
+p.course-block {
   border-style: solid;
   border-color: #e3dc86;
   padding: ($baseline/4);
@@ -1412,7 +1412,7 @@ p.course-block{
 
 }
 
-.enter-course-blocked{
+.enter-course-blocked {
   @include box-sizing(border-box);
   @include float(left);
 
@@ -1440,7 +1440,7 @@ p.course-block{
   }
 }
 
-a.disable-look{
+a.disable-look {
   color: #808080;
 }
 
@@ -1558,7 +1558,7 @@ a.fade-cover {
     border: $palette-info-border 1px solid;
     padding: 5px;
 
-    .message-title{
+    .message-title {
       margin-bottom: 0;
     }
 
diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss
index db4462dcca..5c56152a06 100644
--- a/lms/static/sass/multicourse/_home.scss
+++ b/lms/static/sass/multicourse/_home.scss
@@ -170,7 +170,7 @@ $course-search-input-height: ($button-size);
 
       @include border-left(0);
       @include box-sizing(border-box);
-      // box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
+      // box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
       height: 120px;
 
       @include float(left);
@@ -193,7 +193,7 @@ $course-search-input-height: ($button-size);
         background-size: cover;
 
         .play-intro {
-          @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
+          @include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.65), rgba(0, 0,0, 0.75)));
 
           border-radius: 4px;
           box-shadow: 0 1px 12px 0 $shadow-d1;
@@ -228,7 +228,7 @@ $course-search-input-height: ($button-size);
 
             margin-top: -16px;
             position: absolute;
-            text-shadow: 0 -1px rgba(0,0,0, 0.8);
+            text-shadow: 0 -1px rgba(0, 0,0, 0.8);
             top: 50%;
           }
         }
@@ -241,9 +241,9 @@ $course-search-input-height: ($button-size);
 
       &:hover, &:focus {
         .play-intro {
-          @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
+          @include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.75), rgba(0, 0,0, 0.8)));
 
-          box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
+          box-shadow: 0 1px 12px 0 rgba(0, 0,0, 0.5);
           border-color: rgba(255,255,255, 0.9);
 
           &::after {
@@ -546,7 +546,7 @@ $course-search-input-height: ($button-size);
     .news {
       @include box-sizing(border-box);
 
-      box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
+      box-shadow: inset 0 0 3px 0 rgba(0, 0,0, 0.15);
       padding: 20px;
       width: flex-grid(12);
 
diff --git a/lms/static/sass/multicourse/_survey-page.scss b/lms/static/sass/multicourse/_survey-page.scss
index f31438e3df..d75cff5027 100644
--- a/lms/static/sass/multicourse/_survey-page.scss
+++ b/lms/static/sass/multicourse/_survey-page.scss
@@ -9,13 +9,13 @@
     @include float(left);
     @include margin-right(flex-gutter());
 
-    width: flex-grid(9,12);
+    width: flex-grid(9, 12);
   }
 
   .content-supplementary {
     @include float(left);
 
-    width: flex-grid(3,12);
+    width: flex-grid(3, 12);
     margin-top: ($baseline*2);
   }
 
diff --git a/lms/static/sass/partials/base/_variables.scss b/lms/static/sass/partials/base/_variables.scss
index e976d458cc..0ea318de22 100644
--- a/lms/static/sass/partials/base/_variables.scss
+++ b/lms/static/sass/partials/base/_variables.scss
@@ -41,123 +41,123 @@ $lms-max-width: 1180px !default;
 // ----------------------------
 // #COLORS
 // ----------------------------
-$transparent: rgba(0,0,0,0) !default; // used when color value is needed for UI width/transitions but element is transparent
+$transparent: rgba(0, 0, 0, 0) !default; // used when color value is needed for UI width/transitions but element is transparent
 
-$black:     rgb(0,0,0) !default;
+$black:     rgb(0, 0, 0) !default;
 $black-t0:  rgba($black, 0.125) !default;
 $black-t1:  rgba($black, 0.25) !default;
 $black-t2:  rgba($black, 0.5) !default;
 $black-t3:  rgba($black, 0.75) !default;
 
-$white:     rgb(255,255,255) !default;
+$white:     rgb(255, 255, 255) !default;
 $white-t0:  rgba($white, 0.125) !default;
 $white-t1:  rgba($white, 0.25) !default;
 $white-t2:  rgba($white, 0.5) !default;
 $white-t3:  rgba($white, 0.75) !default;
 
-$gray:      rgb(118,118,118) !default;
-$gray-l1:   tint($gray,20%) !default;
-$gray-l2:   tint($gray,40%) !default;
-$gray-l3:   tint($gray,60%) !default;
-$gray-l4:   tint($gray,80%) !default;
-$gray-l5:   tint($gray,90%) !default;
-$gray-l6:   tint($gray,95%) !default;
-$gray-l7:   tint($gray,99%) !default;
-$gray-d1:   shade($gray,20%) !default;
-$gray-d2:   shade($gray,40%) !default;
-$gray-d3:   shade($gray,60%) !default;
-$gray-d4:   shade($gray,80%) !default;
+$gray:      rgb(118, 118, 118) !default;
+$gray-l1:   tint($gray, 20%) !default;
+$gray-l2:   tint($gray, 40%) !default;
+$gray-l3:   tint($gray, 60%) !default;
+$gray-l4:   tint($gray, 80%) !default;
+$gray-l5:   tint($gray, 90%) !default;
+$gray-l6:   tint($gray, 95%) !default;
+$gray-l7:   tint($gray, 99%) !default;
+$gray-d1:   shade($gray, 20%) !default;
+$gray-d2:   shade($gray, 40%) !default;
+$gray-d3:   shade($gray, 60%) !default;
+$gray-d4:   shade($gray, 80%) !default;
 
 $yellow: rgb(255, 252, 221) !default;
 
-$pink: rgb(182,37,103) !default;
-$pink-l1: tint($pink,20%) !default;
-$pink-l2: tint($pink,40%) !default;
-$pink-l3: tint($pink,60%) !default;
-$pink-l4: tint($pink,80%) !default;
-$pink-l5: tint($pink,90%) !default;
-$pink-d1: shade($pink,20%) !default;
-$pink-d2: shade($pink,40%) !default;
-$pink-d3: shade($pink,60%) !default;
-$pink-d4: shade($pink,80%) !default;
-$pink-s1: saturate($pink,15%) !default;
-$pink-s2: saturate($pink,30%) !default;
-$pink-s3: saturate($pink,45%) !default;
-$pink-u1: desaturate($pink,15%) !default;
-$pink-u2: desaturate($pink,30%) !default;
-$pink-u3: desaturate($pink,45%) !default;
+$pink: rgb(182, 37, 103) !default;
+$pink-l1: tint($pink, 20%) !default;
+$pink-l2: tint($pink, 40%) !default;
+$pink-l3: tint($pink, 60%) !default;
+$pink-l4: tint($pink, 80%) !default;
+$pink-l5: tint($pink, 90%) !default;
+$pink-d1: shade($pink, 20%) !default;
+$pink-d2: shade($pink, 40%) !default;
+$pink-d3: shade($pink, 60%) !default;
+$pink-d4: shade($pink, 80%) !default;
+$pink-s1: saturate($pink, 15%) !default;
+$pink-s2: saturate($pink, 30%) !default;
+$pink-s3: saturate($pink, 45%) !default;
+$pink-u1: desaturate($pink, 15%) !default;
+$pink-u2: desaturate($pink, 30%) !default;
+$pink-u3: desaturate($pink, 45%) !default;
 
 $red: rgb(178, 6, 16) !default;
-$red-l1: tint($red,20%) !default;
-$red-l2: tint($red,40%) !default;
-$red-l3: tint($red,60%) !default;
-$red-l4: tint($red,80%) !default;
-$red-l5: tint($red,90%) !default;
-$red-d1: shade($red,20%) !default;
-$red-d2: shade($red,40%) !default;
-$red-d3: shade($red,60%) !default;
-$red-d4: shade($red,80%) !default;
-$red-s1: saturate($red,15%) !default;
-$red-s2: saturate($red,30%) !default;
-$red-s3: saturate($red,45%) !default;
-$red-u1: desaturate($red,15%) !default;
-$red-u2: desaturate($red,30%) !default;
-$red-u3: desaturate($red,45%) !default;
+$red-l1: tint($red, 20%) !default;
+$red-l2: tint($red, 40%) !default;
+$red-l3: tint($red, 60%) !default;
+$red-l4: tint($red, 80%) !default;
+$red-l5: tint($red, 90%) !default;
+$red-d1: shade($red, 20%) !default;
+$red-d2: shade($red, 40%) !default;
+$red-d3: shade($red, 60%) !default;
+$red-d4: shade($red, 80%) !default;
+$red-s1: saturate($red, 15%) !default;
+$red-s2: saturate($red, 30%) !default;
+$red-s3: saturate($red, 45%) !default;
+$red-u1: desaturate($red, 15%) !default;
+$red-u2: desaturate($red, 30%) !default;
+$red-u3: desaturate($red, 45%) !default;
 
 $green: rgb(37, 184, 90) !default;
-$green-l1: tint($green,20%) !default;
-$green-l2: tint($green,40%) !default;
-$green-l3: tint($green,60%) !default;
-$green-l4: tint($green,80%) !default;
-$green-l5: tint($green,90%) !default;
-$green-d1: shade($green,20%) !default;
-$green-d2: shade($green,40%) !default;
-$green-d3: shade($green,60%) !default;
-$green-d4: shade($green,80%) !default;
-$green-s1: saturate($green,15%) !default;
-$green-s2: saturate($green,30%) !default;
-$green-s3: saturate($green,45%) !default;
-$green-u1: desaturate($green,15%) !default;
-$green-u2: desaturate($green,30%) !default;
-$green-u3: desaturate($green,45%) !default;
+$green-l1: tint($green, 20%) !default;
+$green-l2: tint($green, 40%) !default;
+$green-l3: tint($green, 60%) !default;
+$green-l4: tint($green, 80%) !default;
+$green-l5: tint($green, 90%) !default;
+$green-d1: shade($green, 20%) !default;
+$green-d2: shade($green, 40%) !default;
+$green-d3: shade($green, 60%) !default;
+$green-d4: shade($green, 80%) !default;
+$green-s1: saturate($green, 15%) !default;
+$green-s2: saturate($green, 30%) !default;
+$green-s3: saturate($green, 45%) !default;
+$green-u1: desaturate($green, 15%) !default;
+$green-u2: desaturate($green, 30%) !default;
+$green-u3: desaturate($green, 45%) !default;
 
 $yellow: rgb(255, 252, 221) !default;      // yellow color used by LMS
 //$yellow: rgb(237, 189, 60) !default;     // yellow color used by Studio
-$yellow-l1: tint($yellow,20%) !default;
-$yellow-l2: tint($yellow,40%) !default;
-$yellow-l3: tint($yellow,60%) !default;
-$yellow-l4: tint($yellow,80%) !default;
-$yellow-l5: tint($yellow,90%) !default;
-$yellow-d1: shade($yellow,20%) !default;
-$yellow-d2: shade($yellow,40%) !default;
-$yellow-d3: shade($yellow,60%) !default;
-$yellow-d4: shade($yellow,80%) !default;
-$yellow-s1: saturate($yellow,15%) !default;
-$yellow-s2: saturate($yellow,30%) !default;
-$yellow-s3: saturate($yellow,45%) !default;
-$yellow-u1: desaturate($yellow,15%) !default;
-$yellow-u2: desaturate($yellow,30%) !default;
-$yellow-u3: desaturate($yellow,45%) !default;
+$yellow-l1: tint($yellow, 20%) !default;
+$yellow-l2: tint($yellow, 40%) !default;
+$yellow-l3: tint($yellow, 60%) !default;
+$yellow-l4: tint($yellow, 80%) !default;
+$yellow-l5: tint($yellow, 90%) !default;
+$yellow-d1: shade($yellow, 20%) !default;
+$yellow-d2: shade($yellow, 40%) !default;
+$yellow-d3: shade($yellow, 60%) !default;
+$yellow-d4: shade($yellow, 80%) !default;
+$yellow-s1: saturate($yellow, 15%) !default;
+$yellow-s2: saturate($yellow, 30%) !default;
+$yellow-s3: saturate($yellow, 45%) !default;
+$yellow-u1: desaturate($yellow, 15%) !default;
+$yellow-u2: desaturate($yellow, 30%) !default;
+$yellow-u3: desaturate($yellow, 45%) !default;
 
 $blue: rgb(0, 121, 188) !default;
-$blue-l1: tint($blue,20%) !default;
-$blue-l2: tint($blue,40%) !default;
-$blue-l3: tint($blue,60%) !default;
-$blue-l4: tint($blue,80%) !default;
-$blue-l5: tint($blue,90%) !default;
-$blue-d1: shade($blue,20%) !default;
-$blue-d2: shade($blue,40%) !default;
-$blue-d3: shade($blue,60%) !default;
-$blue-d4: shade($blue,80%) !default;
-$blue-s1: saturate($blue,15%) !default;
-$blue-s2: saturate($blue,30%) !default;
-$blue-s3: saturate($blue,45%) !default;
-$blue-u1: desaturate($blue,15%) !default;
-$blue-u2: desaturate($blue,30%) !default;
-$blue-u3: desaturate($blue,45%) !default;
+$blue-l1: tint($blue, 20%) !default;
+$blue-l2: tint($blue, 40%) !default;
+$blue-l3: tint($blue, 60%) !default;
+$blue-l4: tint($blue, 80%) !default;
+$blue-l5: tint($blue, 90%) !default;
+$blue-d1: shade($blue, 20%) !default;
+$blue-d2: shade($blue, 40%) !default;
+$blue-d3: shade($blue, 60%) !default;
+$blue-d4: shade($blue, 80%) !default;
+$blue-s1: saturate($blue, 15%) !default;
+$blue-s2: saturate($blue, 30%) !default;
+$blue-s3: saturate($blue, 45%) !default;
+$blue-u1: desaturate($blue, 15%) !default;
+$blue-u2: desaturate($blue, 30%) !default;
+$blue-u3: desaturate($blue, 45%) !default;
 $blue-t0: rgba($blue, 0.125) !default;
 $blue-t1: rgba($blue, 0.25) !default;
-$blue-t2: rgba($blue, 0.50) !default;
+$blue-t2: rgba($blue, 0.5) !default;
 $blue-t3: rgba($blue, 0.75) !default;
 
 $uxpl-blue-base: rgb(0, 117, 180) !default; // wcag2a compliant
@@ -172,21 +172,21 @@ $uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compli
 $uxpl-grayscale-x-back: rgb(245, 245, 245) !default; // UXPL grayscale, x-back
 
 $orange: rgb(237, 189, 60) !default;
-$orange-l1: tint($orange,20%) !default;
-$orange-l2: tint($orange,40%) !default;
-$orange-l3: tint($orange,60%) !default;
-$orange-l4: tint($orange,80%) !default;
-$orange-l5: tint($orange,90%) !default;
-$orange-d1: shade($orange,20%) !default;
-$orange-d2: shade($orange,40%) !default;
-$orange-d3: shade($orange,60%) !default;
-$orange-d4: shade($orange,80%) !default;
-$orange-s1: saturate($orange,15%) !default;
-$orange-s2: saturate($orange,30%) !default;
-$orange-s3: saturate($orange,45%) !default;
-$orange-u1: desaturate($orange,15%) !default;
-$orange-u2: desaturate($orange,30%) !default;
-$orange-u3: desaturate($orange,45%) !default;
+$orange-l1: tint($orange, 20%) !default;
+$orange-l2: tint($orange, 40%) !default;
+$orange-l3: tint($orange, 60%) !default;
+$orange-l4: tint($orange, 80%) !default;
+$orange-l5: tint($orange, 90%) !default;
+$orange-d1: shade($orange, 20%) !default;
+$orange-d2: shade($orange, 40%) !default;
+$orange-d3: shade($orange, 60%) !default;
+$orange-d4: shade($orange, 80%) !default;
+$orange-s1: saturate($orange, 15%) !default;
+$orange-s2: saturate($orange, 30%) !default;
+$orange-s3: saturate($orange, 45%) !default;
+$orange-u1: desaturate($orange, 15%) !default;
+$orange-u2: desaturate($orange, 30%) !default;
+$orange-u3: desaturate($orange, 45%) !default;
 
 // ====================
 
@@ -204,10 +204,10 @@ $google-red: #d73924;
 $microsoft-black: #000;
 
 // shadows
-$shadow: rgba(0,0,0,0.2) !default;
-$shadow-l1: rgba(0,0,0,0.1) !default;
-$shadow-l2: rgba(0,0,0,0.05) !default;
-$shadow-d1: rgba(0,0,0,0.4) !default;
+$shadow: rgba(0, 0, 0, 0.2) !default;
+$shadow-l1: rgba(0, 0, 0, 0.1) !default;
+$shadow-l2: rgba(0, 0, 0, 0.05) !default;
+$shadow-d1: rgba(0, 0, 0, 0.4) !default;
 $shadow-d2: rgba($black, 0.6) !default;
 
 // system feedback-based colors
@@ -215,7 +215,7 @@ $error-color: rgb(203, 7, 18) !default;
 $warning-color: rgb(255, 192, 31) !default;
 $confirm-color: rgb(0, 132, 1) !default;
 $active-color: $blue !default;
-$highlight-color: rgb(255,255,0) !default;
+$highlight-color: rgb(255, 255, 0) !default;
 $alert-color: rgb(212, 64, 64) !default;
 $success-color: rgb(0, 155, 0) !default;
 $success-color-hover: rgb(0, 129, 0) !default;
@@ -245,7 +245,7 @@ $state-danger-border: darken($state-danger-bg, 5%) !default;
 // ----------------------------
 
 // logo colors
-$audit-mode-color: rgb(74,74,74) !default;
+$audit-mode-color: rgb(74, 74, 74) !default;
 $honor-mode-color: $uxpl-blue-base !default;
 $verified-mode-color: $uxpl-green-base !default;
 $micromasters-color: #005585 !default;
@@ -257,76 +257,76 @@ $lms-preview-menu-color: #c8c8c8 !default;
 
 // old color variables
 // DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above.
-$dark-gray1: rgb(74,74,74) !default;
-$light-gray1: rgb(242,242,242) !default;
-$light-gray2: rgb(171,171,171) !default;
-$light-gray3: rgb(249,249,249) !default;
-$light-gray4: rgb(252,252,252) !default;
-$dark-gray2: rgb(151,151,151) !default;
-$blue1: rgb(74,144,226) !default;
-$blue2: rgb(0,161,229) !default;
-$green1: rgb(97,161,46) !default;
-$red1: rgb(208,2,27) !default;
+$dark-gray1: rgb(74, 74, 74) !default;
+$light-gray1: rgb(242, 242, 242) !default;
+$light-gray2: rgb(171, 171, 171) !default;
+$light-gray3: rgb(249, 249, 249) !default;
+$light-gray4: rgb(252, 252, 252) !default;
+$dark-gray2: rgb(151, 151, 151) !default;
+$blue1: rgb(74, 144, 226) !default;
+$blue2: rgb(0, 161, 229) !default;
+$green1: rgb(97, 161, 46) !default;
+$red1: rgb(208, 2, 27) !default;
 
 // edx-specific: marketing site variables
 // DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above.
-$m-gray: rgb(138,140,143) !default; //C8F
-$m-gray-l1: rgb(151,153,155) !default;
-$m-gray-l2: rgb(164,166,168) !default;
-$m-gray-l3: rgb(177,178,180) !default;
-$m-gray-l4: rgb(245,245,245) !default;
+$m-gray: rgb(138, 140, 143) !default; //C8F
+$m-gray-l1: rgb(151, 153, 155) !default;
+$m-gray-l2: rgb(164, 166, 168) !default;
+$m-gray-l3: rgb(177, 178, 180) !default;
+$m-gray-l4: rgb(245, 245, 245) !default;
 $m-gray-d1: rgb(111, 112, 116) !default;
-$m-gray-d2: rgb(112,114,118) !default;
-$m-gray-d3: rgb(100,102,104) !default;
-$m-gray-d4: rgb(5,5,5) !default;
-$m-gray-t0: rgba($m-gray,0.125) !default;
-$m-gray-t1: rgba($m-gray,0.25) !default;
-$m-gray-t2: rgba($m-gray,0.50) !default;
-$m-gray-t3: rgba($m-gray,0.75) !default;
+$m-gray-d2: rgb(112, 114, 118) !default;
+$m-gray-d3: rgb(100, 102, 104) !default;
+$m-gray-d4: rgb(5, 5, 5) !default;
+$m-gray-t0: rgba($m-gray, 0.125) !default;
+$m-gray-t1: rgba($m-gray, 0.25) !default;
+$m-gray-t2: rgba($m-gray, 0.5) !default;
+$m-gray-t3: rgba($m-gray, 0.75) !default;
 
 $m-blue: $uxpl-blue-base;  // uxpl blue base
-$m-blue-l1: rgb(43,172,230) !default;
-$m-blue-l2: rgb(66,181,233) !default;
-$m-blue-l3: rgb(89,190,236) !default;
-$m-blue-l4: tint($m-blue,90%) !default;
-$m-blue-l5: tint($m-blue,95%) !default;
+$m-blue-l1: rgb(43, 172, 230) !default;
+$m-blue-l2: rgb(66, 181, 233) !default;
+$m-blue-l3: rgb(89, 190, 236) !default;
+$m-blue-l4: tint($m-blue, 90%) !default;
+$m-blue-l5: tint($m-blue, 95%) !default;
 $m-blue-l6: #4bb4fb !default;
-$m-blue-d1: rgb(23,144,199) !default;
+$m-blue-d1: rgb(23, 144, 199) !default;
 $m-blue-d2: $blue !default;
-$m-blue-d3: rgb(18,111,154) !default;
-$m-blue-d4: rgb(10,74,103) !default;
-$m-blue-d5: rgb(0,158,231) !default;
+$m-blue-d3: rgb(18, 111, 154) !default;
+$m-blue-d4: rgb(10, 74, 103) !default;
+$m-blue-d5: rgb(0, 158, 231) !default;
 $m-blue-d6: #256a97 !default;
-$m-blue-t0: rgba($m-blue,0.125) !default;
-$m-blue-t1: rgba($m-blue,0.25) !default;
-$m-blue-t2: rgba($m-blue,0.50) !default;
-$m-blue-t3: rgba($m-blue,0.75) !default;
+$m-blue-t0: rgba($m-blue, 0.125) !default;
+$m-blue-t1: rgba($m-blue, 0.25) !default;
+$m-blue-t2: rgba($m-blue, 0.5) !default;
+$m-blue-t3: rgba($m-blue, 0.75) !default;
 
 $m-pink: $uxpl-pink-base; // uxpl pink base
-$m-pink-l1: rgb(202,47,115) !default;
-$m-pink-l2: rgb(211,63,128) !default;
-$m-pink-l3: rgb(215,84,142) !default;
-$m-pink-l4: tint($m-pink,75%) !default;
-$m-pink-l5: tint($m-pink,85%) !default;
-$m-pink-d1: rgb(160,37,91) !default;
-$m-pink-d2: rgb(140,32,79) !default;
-$m-pink-d3: rgb(119,28,68) !default;
+$m-pink-l1: rgb(202, 47, 115) !default;
+$m-pink-l2: rgb(211, 63, 128) !default;
+$m-pink-l3: rgb(215, 84, 142) !default;
+$m-pink-l4: tint($m-pink, 75%) !default;
+$m-pink-l5: tint($m-pink, 85%) !default;
+$m-pink-d1: rgb(160, 37, 91) !default;
+$m-pink-d2: rgb(140, 32, 79) !default;
+$m-pink-d3: rgb(119, 28, 68) !default;
 
 $m-green: $uxpl-green-base; // uxpl green base
 $m-green-s1: rgb(96, 188, 97) !default;
-$m-green-l1: tint($m-green,20%) !default;
-$m-green-l2: tint($m-green,40%) !default;
-$m-green-l3: tint($m-green,60%) !default;
-$m-green-l4: tint($m-green,90%) !default;
-$m-green-l5: tint($m-green,95%) !default;
-$m-green-d1: shade($m-green,20%) !default;
-$m-green-d2: shade($m-green,40%) !default;
-$m-green-d3: shade($m-green,60%) !default;
-$m-green-d4: shade($m-green,90%) !default;
-$m-green-t0: rgba($m-green,0.125) !default;
-$m-green-t1: rgba($m-green,0.25) !default;
-$m-green-t2: rgba($m-green,0.50) !default;
-$m-green-t3: rgba($m-green,0.75) !default;
+$m-green-l1: tint($m-green, 20%) !default;
+$m-green-l2: tint($m-green, 40%) !default;
+$m-green-l3: tint($m-green, 60%) !default;
+$m-green-l4: tint($m-green, 90%) !default;
+$m-green-l5: tint($m-green, 95%) !default;
+$m-green-d1: shade($m-green, 20%) !default;
+$m-green-d2: shade($m-green, 40%) !default;
+$m-green-d3: shade($m-green, 60%) !default;
+$m-green-d4: shade($m-green, 90%) !default;
+$m-green-t0: rgba($m-green, 0.125) !default;
+$m-green-t1: rgba($m-green, 0.25) !default;
+$m-green-t2: rgba($m-green, 0.5) !default;
+$m-green-t3: rgba($m-green, 0.75) !default;
 
 // edx-specific: verified
 $verified-color-lvl1: $m-green !default;
@@ -351,7 +351,7 @@ $audit-color-lvl1: rgb(221, 221, 221) !default;
 $audit-color-lvl2: tint($audit-color-lvl1, 33%) !default;
 
 // edx-specific: credit
-$credit-color-base: rgb(244,195,0) !default; // accessible with black text
+$credit-color-base: rgb(244, 195, 0) !default; // accessible with black text
 
 // edx-specific: Studio/Staff actions
 $staff-color: $uxpl-pink-base !default;
@@ -386,11 +386,11 @@ $support-form-base-font-size: 16px;
 // ----------------------------
 // #TIMING
 // ----------------------------
-$tmg-s3: 3.0s !default;
-$tmg-s2: 2.0s !default;
-$tmg-s1: 1.0s !default;
+$tmg-s3: 3s !default;
+$tmg-s2: 2s !default;
+$tmg-s1: 1s !default;
 $tmg-avg: 0.75s !default;
-$tmg-f1: 0.50s !default;
+$tmg-f1: 0.5s !default;
 $tmg-f2: 0.25s !default;
 $tmg-f3: 0.125s !default;
 
@@ -405,43 +405,43 @@ $form-bg-color: $white !default;
 // ----------------------------
 // font sizes
 $body-font-size: em(14) !default;
-$body-line-height: golden-ratio(.875em, 1) !default;
+$body-line-height: golden-ratio(0.875em, 1) !default;
 
 // font colors
-$base-font-color: rgb(60,60,60) !default;
+$base-font-color: rgb(60, 60, 60) !default;
 $baseFontColor: $base-font-color !default;
 $darkest-base-font-color: $black !default;
-$lighter-base-font-color: rgb(100,100,100) !default;
+$lighter-base-font-color: rgb(100, 100, 100) !default;
 $lightest-base-font-color: $gray; // Lightest font that can be used on a white background
-$very-light-text: rgb(255,255,255) !default;
+$very-light-text: rgb(255, 255, 255) !default;
 $text-color: rgb(51, 51, 51) !default;
 
 // borders
-$border-color-1: rgb(190,190,190) !default;
-$border-color-2: rgb(200,200,200) !default;
-$border-color-3: rgb(100,100,100) !default;
-$border-color-4: rgb(252,252,252) !default;
+$border-color-1: rgb(190, 190, 190) !default;
+$border-color-2: rgb(200, 200, 200) !default;
+$border-color-3: rgb(100, 100, 100) !default;
+$border-color-4: rgb(252, 252, 252) !default;
 $border-color-l1: $m-gray-l1 !default;
 $border-color-l2: $m-gray-l2 !default;
 $border-color-l3: $m-gray-l3 !default;
 $border-color-l4: $m-gray-l4 !default;
 
 // visual horizontal rules
-$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0)) !default;
-$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1)) !default;
-$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0)) !default;
-$faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240,240, 1) 50%, rgba(240,240,240, 0)) !default;
-$faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0)) !default;
-$faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0)) !default;
+$faded-hr-image-1: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, rgba(200, 200, 200, 1) 50%, rgba(200, 200, 200, 0)) !default;
+$faded-hr-image-2: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, rgba(200, 200, 200, 1)) !default;
+$faded-hr-image-3: linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgba(200, 200, 200, 0)) !default;
+$faded-hr-image-4: linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 1) 50%, rgba(240, 240, 240, 0)) !default;
+$faded-hr-image-5: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)) !default;
+$faded-hr-image-6: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)) !default;
 
 // notifications
-$notify-banner-bg-1: rgb(56,56,56) !default;
-$notify-banner-bg-2: rgb(136,136,136) !default;
+$notify-banner-bg-1: rgb(56, 56, 56) !default;
+$notify-banner-bg-2: rgb(136, 136, 136) !default;
 $notify-banner-bg-3: $shadow-l2 !default;
 $msg-bg: $m-blue-d3 !default;
 
 // actions
-$button-bg-image: linear-gradient(rgb(255,255,255) 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%) !default;
+$button-bg-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(250, 250, 250) 50%, rgb(237, 237, 237) 50%, rgb(220, 220, 220) 100%) !default;
 $button-bg-color: transparent !default;
 $button-bg-hover-color: $white !default;
 
@@ -479,17 +479,17 @@ $link-color-d1: $link-color !default;
 $link-hover: $uxpl-blue-hover-active !default; // from our Pattern Library http://ux.edx.org/elements/colors/
 $site-status-color: $pink !default;
 $button-color: $uxpl-blue-base !default;
-$button-archive-color: rgb(238,238,238) !default; // #eeeeee
+$button-archive-color: rgb(238, 238, 238) !default; // #eeeeee
 
 // larger, random elements
-$dark-trans-bg: rgba(0, 0, 0, .75) !default;
+$dark-trans-bg: rgba(0, 0, 0, 0.75) !default;
 
 $body-bg: $uxpl-grayscale-x-back !default;
 
 $container-bg: $white !default;
 
 // header
-$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)) !default;
+$header-image: linear-gradient(-90deg, rgba(255, 255, 255, 1), rgba(230, 230, 230, 0.9)) !default;
 $header-bg: $white !default;
 $header-border-color: $blue !default;
 $header-graphic-super-color: $m-blue-d1 !default;
@@ -503,17 +503,17 @@ $footer_margin: ($baseline/4) 0 ($baseline*1.5) 0 !default;
 
 // modal
 $shadow-color: $blue !default;
-$modal-bg-color: rgb(245,245,245) !default;
+$modal-bg-color: rgb(245, 245, 245) !default;
 
 // courseware elements
-$courseware-header-image: linear-gradient(top, rgb(255,255,255), rgb(238,238,238)) !default;
+$courseware-header-image: linear-gradient(top, rgb(255, 255, 255), rgb(238, 238, 238)) !default;
 $courseware-header-bg: transparent !default;
 $courseware-footer-border: none !default;
 $courseware-footer-shadow: none !default;
 $courseware-footer-margin: 0 !default;
-$courseware-border-bottom-color: rgb(68,162,222) !default;
-$courseware-button-border-color: rgb(230,230,230) !default;
-$courseware-hover-color: rgb(51,52,53) !default;
+$courseware-border-bottom-color: rgb(68, 162, 222) !default;
+$courseware-button-border-color: rgb(230, 230, 230) !default;
+$courseware-hover-color: rgb(51, 52, 53) !default;
 $courseware-navigation-color: $uxpl-blue-base !default;
 
 // homepage, onboarding, and course discovery
@@ -533,9 +533,9 @@ $passwordreset-banner-image: url('#{$static-path}/images/edx-theme/edx-backgroun
 $video-thumb-url: '#{$static-path}/images/homepage-hero-video-thumb.jpg' !default;
 
 // dashboard elements
-$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)) !default;
+$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255, 255, 255), rgb(245, 245, 245)) !default;
 $dashboard-profile-header-color: transparent !default;
-$dashboard-profile-color: rgb(252,252,252) !default;
+$dashboard-profile-color: rgb(252, 252, 252) !default;
 $dot-color: rgb(221, 221, 221) !default;
 $dashboard-course-cover-border: rgb(221, 221, 221) !default;
 
@@ -557,17 +557,17 @@ $learner-profile-container-flex: 768px;
 $content-wrapper-bg: $white !default;
 $course-bg-color: $uxpl-grayscale-x-back !default;
 $account-content-wrapper-bg: shade($body-bg, 2%) !default;
-$course-profile-bg: rgb(245,245,245) !default;
-$course-header-bg: rgba(255,255,255, 0.93) !default;
+$course-profile-bg: rgb(245, 245, 245) !default;
+$course-header-bg: rgba(255, 255, 255, 0.93) !default;
 
 // search/listing results
 $result-highlight-color-base: rgba($highlight-color, 0.25) !default;
 
 // sidebar
-$sidebar-chapter-bg-top: rgba(255, 255, 255, .5) !default;
+$sidebar-chapter-bg-top: rgba(255, 255, 255, 0.5) !default;
 $sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0) !default;
-$sidebar-chapter-bg: rgb(246,246,246) !default;
-$sidebar-active-image: linear-gradient(top, rgb(230,230,230), rgb(214,214,214)) !default;
+$sidebar-chapter-bg: rgb(246, 246, 246) !default;
+$sidebar-active-image: linear-gradient(top, rgb(230, 230, 230), rgb(214, 214, 214)) !default;
 
 
 // student notes
@@ -586,9 +586,9 @@ $sidebar-color: rgb(246, 246, 246) !default;
 $outer-border-color: $gray-l3 !default;
 
 // used by descriptor css
-$lightGrey: rgb(237,241,245) !default;
+$lightGrey: rgb(237, 241, 245) !default;
 $mediumGrey: #ced2db !default;
-$darkGrey: rgb(136,145,161) !default;
+$darkGrey: rgb(136, 145, 161) !default;
 $extraDarkGrey: #3d4043 !default;
 $lightGrey1: $gray-l3 !default;
 $paleYellow: #fffcf1 !default;
diff --git a/lms/static/sass/shared-v2/_header.scss b/lms/static/sass/shared-v2/_header.scss
index 82cacb550d..d0d6af270d 100644
--- a/lms/static/sass/shared-v2/_header.scss
+++ b/lms/static/sass/shared-v2/_header.scss
@@ -99,14 +99,14 @@
       }
     }
 
-    .tab-nav-item{
+    .tab-nav-item {
       @include float(left);
 
       display: flex;
       margin: 0;
       justify-content: center;
 
-      .tab-nav-link{
+      .tab-nav-link {
         font-size: font-size(base);
         font-weight: font-weight(semi-bold);
         color: palette(grayscale, dark);
@@ -120,7 +120,7 @@
         }
       }
 
-      .active{
+      .active {
         border-bottom: 4px solid $black-t3 !important;
       }
     }
diff --git a/lms/static/sass/shared-v2/_modal.scss b/lms/static/sass/shared-v2/_modal.scss
index 57fa8a47aa..23386dd80b 100644
--- a/lms/static/sass/shared-v2/_modal.scss
+++ b/lms/static/sass/shared-v2/_modal.scss
@@ -57,7 +57,7 @@
       &::before {
         @include background-image(
           radial-gradient(
-                        50% 50%, circle closest-side,
+            50% 50%, circle closest-side,
                         $white-opacity-80 0%,
                         $white-transparent 100%
                    )
@@ -77,7 +77,7 @@
       hr {
         @include background-image(
           linear-gradient(
-                        180deg,
+            180deg,
                         $white-transparent 0%,
                         $white-opacity-80 50%,
                         $white-transparent
@@ -94,7 +94,7 @@
         &::after {
           @include background-image(
             linear-gradient(
-                            180deg,
+              180deg,
                             $light-grey-transparent 0%,
                             $light-grey-solid 50%,
                             $light-grey-transparent
diff --git a/lms/static/sass/shared-v2/_variables.scss b/lms/static/sass/shared-v2/_variables.scss
index 5afa2a5c2a..89b082f701 100644
--- a/lms/static/sass/shared-v2/_variables.scss
+++ b/lms/static/sass/shared-v2/_variables.scss
@@ -41,7 +41,7 @@ $white-opacity-60: rgba(255, 255, 255, 0.6) !default;
 $white-opacity-70: rgba(255, 255, 255, 0.7) !default;
 $white-opacity-80: rgba(255, 255, 255, 0.8) !default;
 
-$black:     rgb(0,0,0) !default;
+$black:     rgb(0, 0,0) !default;
 $black-t0:  rgba($black, 0.125) !default;
 $black-t1:  rgba($black, 0.25) !default;
 $black-t2:  rgba($black, 0.5) !default;
@@ -71,7 +71,7 @@ $lms-dark-icon-background-color: palette(grayscale, black) !default;
 
 $site-status-color: rgb(182,37,103) !default;
 
-$shadow-l1: rgba(0,0,0,0.1) !default;
+$shadow-l1: rgba(0, 0,0, 0.1) !default;
 
 $error-color: rgb(203, 7, 18) !default;
 $warning-color: rgb(255, 192, 31) !default;
diff --git a/lms/static/sass/shared/_course_filter.scss b/lms/static/sass/shared/_course_filter.scss
index 53de8cabee..3c0a5029ee 100644
--- a/lms/static/sass/shared/_course_filter.scss
+++ b/lms/static/sass/shared/_course_filter.scss
@@ -21,7 +21,7 @@
     z-index: 9;
 
     &.fixed-top {
-      box-shadow: 0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4);
+      box-shadow: 0 1px 15px 0 rgba(0, 0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4);
       max-width: 1200px;
       position: fixed;
       top: 0;
diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss
index 9bac04d689..0035ac4962 100644
--- a/lms/static/sass/shared/_course_object.scss
+++ b/lms/static/sass/shared/_course_object.scss
@@ -23,7 +23,7 @@
 
       @include box-sizing(border-box);
 
-      box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9);
+      box-shadow: 0 1px 10px 0 rgba(0, 0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9);
       margin-bottom: ($baseline*1.5);
       position: relative;
       width: 100%;
@@ -68,11 +68,11 @@
       .meta-info {
         background: $dark-trans-bg;
         bottom: 6px;
-        border: 1px solid rgba(0,0,0, 0.5);
+        border: 1px solid rgba(0, 0,0, 0.5);
 
         @include border-right-radius(2px);
 
-        box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.15);
+        box-shadow: 0 1px 5px 0 rgba(0, 0,0, 0.15);
 
         @include clearfix();
 
diff --git a/lms/static/sass/shared/_forms.scss b/lms/static/sass/shared/_forms.scss
index ae7e9b5745..2d90da3cde 100644
--- a/lms/static/sass/shared/_forms.scss
+++ b/lms/static/sass/shared/_forms.scss
@@ -48,7 +48,7 @@ input[type="tel"] {
 
   &:focus {
     border-color: darken($button-archive-color, 50%);
-    box-shadow: 0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0,0,0, 0.15);
+    box-shadow: 0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0, 0,0, 0.15);
   }
 }
 
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index c9f16a17d6..790dc6c089 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -212,7 +212,7 @@
     .user-dropdown-menu, .dropdown-menu {
       background: $white;
       border-radius: 4px;
-      box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.3);
+      box-shadow: 0 2px 2px 0 rgba(0, 0,0, 0.3);
       border: 1px solid $gray-l3;
       display: none;
       margin-top: 0;
@@ -295,7 +295,7 @@
 
     @include float(left);
 
-    .tab-nav-item{
+    .tab-nav-item {
       display: flex;
       margin: 0;
       text-transform: none;
@@ -304,19 +304,19 @@
 
       justify-content: center;
 
-      .tab-nav-link{
+      .tab-nav-link {
         font-size: em(16);
         color: $gray;
         padding: 5px 25px 23px;
         display: inline-block;
 
         &:hover,
-        &:focus{
+        &:focus {
           border-bottom: 4px solid $courseware-border-bottom-color;
         }
       }
 
-      .active{
+      .active {
         border-bottom: 4px solid $black-t3 !important;
       }
     }
@@ -437,7 +437,7 @@
   .nav-global {
     @include float(left);
 
-    .tab-nav-item{
+    .tab-nav-item {
       display: flex;
       margin: 0;
       text-transform: none;
@@ -446,19 +446,19 @@
 
       justify-content: center;
 
-      .tab-nav-link{
+      .tab-nav-link {
         font-size: em(16);
         color: $gray;
         display: inline-block;
         padding: 5px 25px 19px;
 
         &:hover,
-        &:focus{
+        &:focus {
           border-bottom: 4px solid $courseware-border-bottom-color;
         }
       }
 
-      .active{
+      .active {
         border-bottom: 4px solid $black-t3 !important;
       }
     }
@@ -624,7 +624,7 @@
     .user-dropdown-menu, .dropdown-menu {
       background: $border-color-4;
       border-radius: 4px;
-      box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
+      box-shadow: 0 2px 24px 0 rgba(0, 0,0, 0.3);
       border: 1px solid $border-color-3;
       display: none;
       margin-top: 0;
diff --git a/lms/static/sass/views/_account-settings.scss b/lms/static/sass/views/_account-settings.scss
index d6714e83d8..77258baee6 100644
--- a/lms/static/sass/views/_account-settings.scss
+++ b/lms/static/sass/views/_account-settings.scss
@@ -87,7 +87,7 @@
           border-bottom: 4px solid $courseware-border-bottom-color !important;
         }
 
-        &.active{
+        &.active {
           border-bottom: 4px solid $black-t3 !important;
         }
       }
@@ -138,11 +138,11 @@
             position: relative;
             z-index: 10;
 
-            &::-ms-expand{
+            &::-ms-expand {
               display: none;
             }
 
-            ~ .icon-caret-down{
+            ~ .icon-caret-down {
               &::after {
                 content: "";
                 border-left: 6px solid transparent;
diff --git a/lms/static/sass/views/_shoppingcart.scss b/lms/static/sass/views/_shoppingcart.scss
index 98c60fe4f8..232a45af64 100644
--- a/lms/static/sass/views/_shoppingcart.scss
+++ b/lms/static/sass/views/_shoppingcart.scss
@@ -936,7 +936,7 @@ $light-border: 1px solid $gray-l5;
     }
   }
 
-  .error-text{
+  .error-text {
     @extend %t-copy-sub2;
 
     display: block;
diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss
index 59d704858b..1d6e878267 100644
--- a/lms/static/sass/views/_teams.scss
+++ b/lms/static/sass/views/_teams.scss
@@ -45,7 +45,7 @@
   .page-header.has-secondary {
     .page-header-main {
       display: inline-block;
-      width: flex-grid(8,12);
+      width: flex-grid(8, 12);
     }
 
     .page-header-secondary {
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index f8d2bbee0e..80bb0ca035 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -516,7 +516,7 @@
 
       .wrapper-sts {
         display: inline-block;
-        width: flex-grid(9,12);
+        width: flex-grid(9, 12);
         margin-bottom: ($baseline/4);
       }
 
@@ -1226,6 +1226,7 @@
     .copy {
       @extend %t-copy-lead1;
       @extend %t-weight4;
+
       @include left(calc(50% - 46px));
 
       position: absolute;
diff --git a/scripts/all-tests.sh b/scripts/all-tests.sh
index f0746297a3..99c6d90252 100755
--- a/scripts/all-tests.sh
+++ b/scripts/all-tests.sh
@@ -13,7 +13,7 @@ set -e
 # Violations thresholds for failing the build
 export PYLINT_THRESHOLD=3600
 export ESLINT_THRESHOLD=9134
-export STYLELINT_THRESHOLD=5155
+export STYLELINT_THRESHOLD=1942
 
 XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
 export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}
diff --git a/themes/edge.edx.org/lms/static/sass/partials/base/_certificates.scss b/themes/edge.edx.org/lms/static/sass/partials/base/_certificates.scss
index 6fbee80f76..e6f97bb693 100644
--- a/themes/edge.edx.org/lms/static/sass/partials/base/_certificates.scss
+++ b/themes/edge.edx.org/lms/static/sass/partials/base/_certificates.scss
@@ -1,30 +1,30 @@
 // Certificate overrides for edge.edx.org
 
 .certificate-card {
-    // Note: edx.org no longer supports audit certificates, but there are
-    // legacy certificates that might be rendered. In this situation, they
-    // are styled as honor certificates.
-    &.mode-honor, &.mode-audit {
-        border-color: $honor-mode-color;
+  // Note: edx.org no longer supports audit certificates, but there are
+  // legacy certificates that might be rendered. In this situation, they
+  // are styled as honor certificates.
+  &.mode-honor, &.mode-audit {
+    border-color: $honor-mode-color;
 
-        .card-logo {
-            background-image: url('#{$static-path}/images/certificates/honor.png');
-        }
+    .card-logo {
+      background-image: url('#{$static-path}/images/certificates/honor.png');
     }
+  }
 
-    &.mode-verified {
-        border-color: $verified-mode-color;
+  &.mode-verified {
+    border-color: $verified-mode-color;
 
-        .card-logo {
-            background-image: url('#{$static-path}/images/certificates/verified.png');
-        }
+    .card-logo {
+      background-image: url('#{$static-path}/images/certificates/verified.png');
     }
+  }
 
-    &.mode-professional {
-        border-color: $professional-certificate-color;
+  &.mode-professional {
+    border-color: $professional-certificate-color;
 
-        .card-logo {
-            background-image: url('#{$static-path}/images/certificates/professional.png');
-        }
+    .card-logo {
+      background-image: url('#{$static-path}/images/certificates/professional.png');
     }
+  }
 }
diff --git a/themes/edx.org/lms/static/sass/partials/base/_certificates.scss b/themes/edx.org/lms/static/sass/partials/base/_certificates.scss
index 8d3c2e1f1d..37af53e7af 100644
--- a/themes/edx.org/lms/static/sass/partials/base/_certificates.scss
+++ b/themes/edx.org/lms/static/sass/partials/base/_certificates.scss
@@ -1,30 +1,30 @@
 // Certificate overrides for edx.org
 
 .certificate-card {
-    // Note: edx.org no longer supports audit certificates, but there are
-    // legacy certificates that might be rendered. In this situation, they
-    // are styled as honor certificates.
-    &.mode-honor, &.mode-audit {
-        border-color: $honor-mode-color;
+  // Note: edx.org no longer supports audit certificates, but there are
+  // legacy certificates that might be rendered. In this situation, they
+  // are styled as honor certificates.
+  &.mode-honor, &.mode-audit {
+    border-color: $honor-mode-color;
 
-        .card-logo {
-            background-image: url('#{$static-path}/images/certificates/honor.png');
-        }
+    .card-logo {
+      background-image: url('#{$static-path}/images/certificates/honor.png');
     }
+  }
 
-    &.mode-verified {
-        border-color: $verified-mode-color;
+  &.mode-verified {
+    border-color: $verified-mode-color;
 
-        .card-logo {
-            background-image: url('#{$static-path}/images/certificates/verified.png');
-        }
+    .card-logo {
+      background-image: url('#{$static-path}/images/certificates/verified.png');
     }
+  }
 
-    &.mode-professional {
-        border-color: $professional-certificate-color;
+  &.mode-professional {
+    border-color: $professional-certificate-color;
 
-        .card-logo {
-            background-image: url('#{$static-path}/images/certificates/professional.png');
-        }
+    .card-logo {
+      background-image: url('#{$static-path}/images/certificates/professional.png');
     }
+  }
 }
diff --git a/themes/red-theme/lms/static/sass/partials/base/_certificates.scss b/themes/red-theme/lms/static/sass/partials/base/_certificates.scss
index a0ebf3f820..26039b9da6 100644
--- a/themes/red-theme/lms/static/sass/partials/base/_certificates.scss
+++ b/themes/red-theme/lms/static/sass/partials/base/_certificates.scss
@@ -1,35 +1,35 @@
 // Certificate overrides for the red theme
 
 .certificate-card {
-    &.mode-audit {
-        border-color: $audit-mode-color;
+  &.mode-audit {
+    border-color: $audit-mode-color;
 
-        .card-logo {
-            background-image: url('#{$static-path}/images/certificates/red-certificate.png');
-        }
+    .card-logo {
+      background-image: url('#{$static-path}/images/certificates/red-certificate.png');
     }
+  }
 
-    &.mode-honor {
-        border-color: $honor-mode-color;
+  &.mode-honor {
+    border-color: $honor-mode-color;
 
-        .card-logo {
-            background-image: url('#{$static-path}/images/certificates/red-certificate.png');
-        }
+    .card-logo {
+      background-image: url('#{$static-path}/images/certificates/red-certificate.png');
     }
+  }
 
-    &.mode-verified {
-        border-color: $verified-mode-color;
+  &.mode-verified {
+    border-color: $verified-mode-color;
 
-        .card-logo {
-            background-image: url('#{$static-path}/images/certificates/red-certificate.png');
-        }
+    .card-logo {
+      background-image: url('#{$static-path}/images/certificates/red-certificate.png');
     }
+  }
 
-    &.mode-professional {
-        border-color: $professional-certificate-color;
+  &.mode-professional {
+    border-color: $professional-certificate-color;
 
-        .card-logo {
-            background-image: url('#{$static-path}/images/certificates/red-certificate.png');
-        }
+    .card-logo {
+      background-image: url('#{$static-path}/images/certificates/red-certificate.png');
     }
+  }
 }