diff --git a/static/css/application.css b/static/css/application.css
index 4d3d26e40c..cf8d6f3ebe 100644
--- a/static/css/application.css
+++ b/static/css/application.css
@@ -117,7 +117,7 @@ input, select {
   font-weight: 800;
   font-style: italic; }
 
-.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, section.tool-wrapper:after, section.tool-wrapper div#controlls-container:after, section.tool-wrapper div#controlls-container div.graph-controls:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after {
+.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, section.tool-wrapper:after, section.tool-wrapper div#controlls-container:after, section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper:after, section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after {
   content: ".";
   display: block;
   height: 0;
@@ -3908,30 +3908,125 @@ section.tool-wrapper div#controlls-container {
   padding: 22.652px;
   vertical-align: top;
   width: 48.641%; }
-section.tool-wrapper div#controlls-container div.graph-controls {
+section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper {
   padding: 0 0 22.652px;
   margin-bottom: 22.652px;
-  border-bottom: 1px solid #05232b;
+  border-bottom: 1px solid #021014;
   -webkit-box-shadow: 0 1px 0 #083e4b;
   -moz-box-shadow: 0 1px 0 #083e4b;
   box-shadow: 0 1px 0 #083e4b; }
-section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper {
-  margin-right: 5.587%;
-  width: 29.609%;
-  float: left; }
-section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper {
-  padding-top: 11.326px;
-  width: 64.804%;
-  float: left; }
-section.tool-wrapper div#controlls-container div.graph-controls select#musicTypeSelect {
+section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton {
+  display: block;
+  border: 1px solid #3d5962;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 0 0 #939da0;
+  -moz-box-shadow: inset 0 1px 0 0 #939da0;
+  box-shadow: inset 0 1px 0 0 #939da0;
+  color: white;
+  display: inline;
+  font-size: 11px;
+  font-weight: bold;
+  background-color: #637c84;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #637c84), color-stop(100%, #43626b));
+  background-image: -webkit-linear-gradient(top, #637c84, #43626b);
+  background-image: -moz-linear-gradient(top, #637c84, #43626b);
+  background-image: -ms-linear-gradient(top, #637c84, #43626b);
+  background-image: -o-linear-gradient(top, #637c84, #43626b);
+  background-image: linear-gradient(top, #637c84, #43626b);
+  padding: 6px 18px 7px;
+  text-shadow: 0 1px 0 #31505a;
+  -webkit-background-clip: padding-box;
+  font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+  float: left; }
+section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton:hover {
+  -webkit-box-shadow: inset 0 1px 0 0 #778589;
+  -moz-box-shadow: inset 0 1px 0 0 #778589;
+  box-shadow: inset 0 1px 0 0 #778589;
+  cursor: pointer;
+  background-color: #5c6c71;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c6c71), color-stop(100%, #3e5961));
+  background-image: -webkit-linear-gradient(top, #5c6c71, #3e5961);
+  background-image: -moz-linear-gradient(top, #5c6c71, #3e5961);
+  background-image: -ms-linear-gradient(top, #5c6c71, #3e5961);
+  background-image: -o-linear-gradient(top, #5c6c71, #3e5961);
+  background-image: linear-gradient(top, #5c6c71, #3e5961); }
+section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton:active {
+  border: 1px solid #3d5962;
+  -webkit-box-shadow: inset 0 0 8px 4px #395057, inset 0 0 8px 4px #395057, 0 1px 1px 0 #eeeeee;
+  -moz-box-shadow: inset 0 0 8px 4px #395057, inset 0 0 8px 4px #395057, 0 1px 1px 0 #eeeeee;
+  box-shadow: inset 0 0 8px 4px #395057, inset 0 0 8px 4px #395057, 0 1px 1px 0 #eeeeee; }
+section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton:active {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton[value="Stop"] {
+  border: 1px solid #030d15;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 0 0 #215f8a;
+  -moz-box-shadow: inset 0 1px 0 0 #215f8a;
+  box-shadow: inset 0 1px 0 0 #215f8a;
+  color: white;
+  display: inline;
+  font-size: 11px;
+  font-weight: bold;
+  background-color: #0f3550;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f3550), color-stop(100%, #041623));
+  background-image: -webkit-linear-gradient(top, #0f3550, #041623);
+  background-image: -moz-linear-gradient(top, #0f3550, #041623);
+  background-image: -ms-linear-gradient(top, #0f3550, #041623);
+  background-image: -o-linear-gradient(top, #0f3550, #041623);
+  background-image: linear-gradient(top, #0f3550, #041623);
+  padding: 6px 18px 7px;
+  text-shadow: 0 1px 0 #000203;
+  -webkit-background-clip: padding-box;
+  font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; }
+section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton[value="Stop"]:hover {
+  -webkit-box-shadow: inset 0 1px 0 0 #174362;
+  -moz-box-shadow: inset 0 1px 0 0 #174362;
+  box-shadow: inset 0 1px 0 0 #174362;
+  cursor: pointer;
+  background-color: #0c2739;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0c2739), color-stop(100%, #030d15));
+  background-image: -webkit-linear-gradient(top, #0c2739, #030d15);
+  background-image: -moz-linear-gradient(top, #0c2739, #030d15);
+  background-image: -ms-linear-gradient(top, #0c2739, #030d15);
+  background-image: -o-linear-gradient(top, #0c2739, #030d15);
+  background-image: linear-gradient(top, #0c2739, #030d15); }
+section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton[value="Stop"]:active {
+  border: 1px solid #030d15;
+  -webkit-box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee;
+  -moz-box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee;
+  box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee; }
+section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton[value="Stop"]:active {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper {
+  zoom: 1;
+  margin-bottom: 22.652px; }
+section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:before, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:after {
+  content: "";
+  display: table; }
+section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:after {
+  clear: both; }
+section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper select#musicTypeSelect {
   display: block;
-  margin-bottom: 11.326px;
   font: 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-  width: 100%; }
+  float: right;
+  margin-bottom: 0; }
 section.tool-wrapper div#controlls-container div.graph-controls div#graph-output, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen {
   display: block;
-  margin-bottom: 11.326px;
-  text-align: right; }
+  text-align: right;
+  float: left;
+  margin-bottom: 0; }
 section.tool-wrapper div#controlls-container div.graph-controls div#graph-output p, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen p {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -3961,104 +4056,9 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output
   margin-bottom: 0; }
 section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul li input, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul li input {
   margin-right: 5px; }
-section.tool-wrapper div#controlls-container div.graph-controls input#playButton {
-  display: block;
-  border: 1px solid #b01613;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 1px 0 0 #e07977;
-  -moz-box-shadow: inset 0 1px 0 0 #e07977;
-  box-shadow: inset 0 1px 0 0 #e07977;
-  color: white;
-  display: inline;
-  font-size: 11px;
-  font-weight: bold;
-  background-color: #dc322f;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dc322f), color-stop(100%, #be1815));
-  background-image: -webkit-linear-gradient(top, #dc322f, #be1815);
-  background-image: -moz-linear-gradient(top, #dc322f, #be1815);
-  background-image: -ms-linear-gradient(top, #dc322f, #be1815);
-  background-image: -o-linear-gradient(top, #dc322f, #be1815);
-  background-image: linear-gradient(top, #dc322f, #be1815);
-  padding: 6px 18px 7px;
-  text-shadow: 0 1px 0 #a30f0c;
-  -webkit-background-clip: padding-box;
-  font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-  color: #47221a;
-  text-shadow: 0 1px 0 #e04845;
-  -webkit-box-shadow: inset 0 1px 0 #e35d5b;
-  -moz-box-shadow: inset 0 1px 0 #e35d5b;
-  box-shadow: inset 0 1px 0 #e35d5b; }
-section.tool-wrapper div#controlls-container div.graph-controls input#playButton:hover {
-  -webkit-box-shadow: inset 0 1px 0 0 #d84f4c;
-  -moz-box-shadow: inset 0 1px 0 0 #d84f4c;
-  box-shadow: inset 0 1px 0 0 #d84f4c;
-  cursor: pointer;
-  background-color: #ca2a28;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ca2a28), color-stop(100%, #af1714));
-  background-image: -webkit-linear-gradient(top, #ca2a28, #af1714);
-  background-image: -moz-linear-gradient(top, #ca2a28, #af1714);
-  background-image: -ms-linear-gradient(top, #ca2a28, #af1714);
-  background-image: -o-linear-gradient(top, #ca2a28, #af1714);
-  background-image: linear-gradient(top, #ca2a28, #af1714); }
-section.tool-wrapper div#controlls-container div.graph-controls input#playButton:active {
-  border: 1px solid #b01613;
-  -webkit-box-shadow: inset 0 0 8px 4px #a11614, inset 0 0 8px 4px #a11614, 0 1px 1px 0 #eeeeee;
-  -moz-box-shadow: inset 0 0 8px 4px #a11614, inset 0 0 8px 4px #a11614, 0 1px 1px 0 #eeeeee;
-  box-shadow: inset 0 0 8px 4px #a11614, inset 0 0 8px 4px #a11614, 0 1px 1px 0 #eeeeee; }
-section.tool-wrapper div#controlls-container div.graph-controls input#playButton:active {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none; }
-section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"] {
-  border: 1px solid #030d15;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 1px 0 0 #215f8a;
-  -moz-box-shadow: inset 0 1px 0 0 #215f8a;
-  box-shadow: inset 0 1px 0 0 #215f8a;
-  color: white;
-  display: inline;
-  font-size: 11px;
-  font-weight: bold;
-  background-color: #0f3550;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f3550), color-stop(100%, #041623));
-  background-image: -webkit-linear-gradient(top, #0f3550, #041623);
-  background-image: -moz-linear-gradient(top, #0f3550, #041623);
-  background-image: -ms-linear-gradient(top, #0f3550, #041623);
-  background-image: -o-linear-gradient(top, #0f3550, #041623);
-  background-image: linear-gradient(top, #0f3550, #041623);
-  padding: 6px 18px 7px;
-  text-shadow: 0 1px 0 #000203;
-  -webkit-background-clip: padding-box;
-  font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; }
-section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"]:hover {
-  -webkit-box-shadow: inset 0 1px 0 0 #174362;
-  -moz-box-shadow: inset 0 1px 0 0 #174362;
-  box-shadow: inset 0 1px 0 0 #174362;
-  cursor: pointer;
-  background-color: #0c2739;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0c2739), color-stop(100%, #030d15));
-  background-image: -webkit-linear-gradient(top, #0c2739, #030d15);
-  background-image: -moz-linear-gradient(top, #0c2739, #030d15);
-  background-image: -ms-linear-gradient(top, #0c2739, #030d15);
-  background-image: -o-linear-gradient(top, #0c2739, #030d15);
-  background-image: linear-gradient(top, #0c2739, #030d15); }
-section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"]:active {
-  border: 1px solid #030d15;
-  -webkit-box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee;
-  -moz-box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee;
-  box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee; }
-section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"]:active {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none; }
+section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen {
+  margin-top: 8px;
+  margin-right: 20px; }
 section.tool-wrapper div#controlls-container label {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
@@ -4079,6 +4079,13 @@ section.tool-wrapper div#controlls-container label[for="vcCheckbox"], section.to
   color: #e1a600; }
 section.tool-wrapper div#controlls-container label[for="vlCheckbox"], section.tool-wrapper div#controlls-container label[for="vlRadioButton"] {
   color: #a26784; }
+section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders {
+  padding: 0 0 22.652px;
+  margin-bottom: 22.652px;
+  border-bottom: 1px solid #021014;
+  -webkit-box-shadow: 0 1px 0 #083e4b;
+  -moz-box-shadow: 0 1px 0 #083e4b;
+  box-shadow: 0 1px 0 #083e4b; }
 section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label {
   margin-bottom: 11.326px;
   font-weight: bold;
@@ -4094,10 +4101,14 @@ section.tool-wrapper div#controlls-container div.schematic-sliders div.slider.ui
   -moz-box-shadow: none;
   box-shadow: none; }
 section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle {
-  background-color: #dc322f;
+  background: #637c84 url("/static/images/amplifier-slider-handle.png") center no-repeat;
+  border: 1px solid #000b0d;
+  -webkit-box-shadow: inset 0 1px 0 #8ba1a8;
+  -moz-box-shadow: inset 0 1px 0 #8ba1a8;
+  box-shadow: inset 0 1px 0 #8ba1a8;
   margin-top: -0.3em; }
 section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle:hover, section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle:active {
-  background-color: #e04845; }
+  background-color: #6e8992; }
 
 div.book-wrapper section.book-sidebar {
   -webkit-box-sizing: border-box;
diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss
index e515d49b22..69d87420d2 100644
--- a/templates/sass/courseware/_amplifier.scss
+++ b/templates/sass/courseware/_amplifier.scss
@@ -84,35 +84,52 @@ section.tool-wrapper {
     width: flex-grid(4.5, 9);
 
     div.graph-controls {
-      padding: 0 0 lh();
-      margin-bottom: lh();
-      border-bottom: 1px solid darken(#073642, 5%);
-      @include box-shadow(0 1px 0 lighten(#073642, 2%));
-      @extend .clearfix;
 
       div.music-wrapper {
-        margin-right: flex-gutter(4.5);
-        width: flex-grid(1.5, 4.5);
-        float: left;
+        padding: 0 0 lh();
+        margin-bottom: lh();
+        border-bottom: 1px solid darken(#073642, 10%);
+        @include box-shadow(0 1px 0 lighten(#073642, 2%));
+        @extend .clearfix;
+
+        input#playButton {
+          display: block;
+          @include button(simple, lighten( #586e75, 5% ));
+          font: bold 14px $body-font-family;
+          float: left;
+
+          &:active {
+            @include box-shadow(none);
+          }
+
+          &[value="Stop"] {
+            @include button(simple, darken(#268bd2, 30%));
+            font: bold 14px $body-font-family;
+
+            &:active {
+              @include box-shadow(none);
+            }
+          }
+        }
       }
 
       div.inputs-wrapper {
-        padding-top: lh(.5);
-        width: flex-grid(3, 4.5);
-        float: left;
-      }
+        @include clearfix;
+        margin-bottom: lh();
 
-      select#musicTypeSelect {
-        display: block;
-        margin-bottom: lh(.5);
-        font: 16px $body-font-family;
-        width: 100%;
+        select#musicTypeSelect {
+          display: block;
+          font: 16px $body-font-family;
+          float: right;
+          margin-bottom: 0;
+        }
       }
 
       div#graph-output, div#graph-listen {
         display: block;
-        margin-bottom: lh(.5);
         text-align: right;
+        float: left;
+        margin-bottom: 0;
 
         p {
           @include inline-block();
@@ -134,26 +151,9 @@ section.tool-wrapper {
         }
       }
 
-      input#playButton {
-        display: block;
-        @include button(simple, #dc322f);
-        font: bold 14px $body-font-family;
-        color: #47221a;
-        text-shadow: 0 1px 0 lighten(#dc322f, 5%);
-        @include box-shadow(inset 0 1px 0 lighten(#dc322f, 10%));
-
-        &:active {
-          @include box-shadow(none);
-        }
-
-        &[value="Stop"] {
-          @include button(simple, darken(#268bd2, 30%));
-          font: bold 14px $body-font-family;
-
-          &:active {
-            @include box-shadow(none);
-          }
-        }
+      div#graph-listen {
+        margin-top: 8px;
+        margin-right: 20px;
       }
     }
 
@@ -190,6 +190,14 @@ section.tool-wrapper {
 
     div.schematic-sliders {
 
+      div.top-sliders {
+        padding: 0 0 lh();
+        margin-bottom: lh();
+        border-bottom: 1px solid darken(#073642, 10%);
+        @include box-shadow(0 1px 0 lighten(#073642, 2%));
+        @extend .clearfix;
+      }
+
       div.slider-label {
         margin-bottom: lh(0.5);
         font-weight: bold;
@@ -208,11 +216,13 @@ section.tool-wrapper {
         }
 
         .ui-slider-handle {
-          background-color: #dc322f;
+          background: lighten( #586e75, 5% ) url('/static/images/amplifier-slider-handle.png') center no-repeat;
+          border: 1px solid darken(#002b36, 8%);
+          @include box-shadow(inset 0 1px 0 lighten( #586e75, 20% ));
           margin-top: -.3em;
 
           &:hover, &:active {
-            background-color: lighten(#dc322f, 5%);
+          background-color: lighten( #586e75, 10% );
           }
         }
       }