added more layout to amplifier

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 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 {
+.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.graph-controls div.inputs-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;
@@ -3940,8 +3940,8 @@ section.tool-wrapper div#controlls-container div.graph-controls div.music-wrappe
   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; }
+  font: bold 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+  float: right; }
 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;
@@ -4011,23 +4011,19 @@ section.tool-wrapper div#controlls-container div.graph-controls div.music-wrappe
   box-shadow: none; }
 section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper {
   zoom: 1;
-  margin-bottom: 22.652px; }
+  margin-bottom: 22.652px;
+  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.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;
-  font: 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-  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;
-  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 {
+section.tool-wrapper div#controlls-container div.graph-controls p {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
@@ -4035,8 +4031,11 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output
   zoom: 1;
   *display: inline;
   *vertical-align: auto;
-  margin: 0; }
-section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  font-weight: bold;
+  text-shadow: 0 -1px 0 #021014; }
+section.tool-wrapper div#controlls-container div.graph-controls ul {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
@@ -4045,7 +4044,7 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output
   *display: inline;
   *vertical-align: auto;
   margin-bottom: 0; }
-section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul li, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul li {
+section.tool-wrapper div#controlls-container div.graph-controls ul li {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
@@ -4054,11 +4053,15 @@ section.tool-wrapper div#controlls-container div.graph-controls div#graph-output
   *display: inline;
   *vertical-align: auto;
   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 {
+section.tool-wrapper div#controlls-container div.graph-controls ul li input {
   margin-right: 5px; }
 section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen {
   margin-top: 8px;
-  margin-right: 20px; }
+  margin-right: 20px;
+  display: block;
+  text-align: right;
+  float: left;
+  margin-bottom: 0; }
 section.tool-wrapper div#controlls-container label {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
@@ -4066,8 +4069,8 @@ section.tool-wrapper div#controlls-container label {
   -o-border-radius: 2px;
   border-radius: 2px;
   font-weight: bold;
-  padding: 3px;
   color: #fff;
+  padding: 3px;
   -webkit-font-smoothing: antialiased; }
 section.tool-wrapper div#controlls-container label[for="vinCheckbox"], section.tool-wrapper div#controlls-container label[for="vinRadioButton"] {
   color: #409fbf; }
@@ -4086,6 +4089,28 @@ section.tool-wrapper div#controlls-container div.schematic-sliders div.top-slide
   -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.top-sliders select#musicTypeSelect {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+  font: 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+  margin-bottom: 0; }
+section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders p {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+  -webkit-font-smoothing: antialiased;
+  text-shadow: 0 -1px 0 #021014;
+  margin: 0 11.326px 22.652px 0;
+  font-weight: bold; }
 section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label {
   margin-bottom: 11.326px;
   font-weight: bold;

templates/sass/courseware/_amplifier.scss

@@ -95,8 +95,8 @@ section.tool-wrapper {
         input#playButton {
           display: block;
           @include button(simple, lighten( #586e75, 5% ));
-          font: bold 14px $body-font-family;
-          float: left;
+          font: bold 16px $body-font-family;
+          float: right;
 
           &:active {
             @include box-shadow(none);
@@ -116,37 +116,31 @@ section.tool-wrapper {
       div.inputs-wrapper {
         @include clearfix;
         margin-bottom: lh();
+        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;
+      }
 
-        select#musicTypeSelect {
-          display: block;
-          font: 16px $body-font-family;
-          float: right;
-          margin-bottom: 0;
-        }
+      p {
+        @include inline-block();
+        margin: 0;
+        -webkit-font-smoothing: antialiased;
+        font-weight: bold;
+        text-shadow: 0 -1px 0 darken(#073642, 10%);
       }
 
-      div#graph-output, div#graph-listen {
-        display: block;
-        text-align: right;
-        float: left;
+      ul {
+        @include inline-block();
         margin-bottom: 0;
 
-        p {
-          @include inline-block();
-          margin: 0;
-        }
-
-        ul {
+        li {
           @include inline-block();
           margin-bottom: 0;
 
-          li {
-            @include inline-block();
-            margin-bottom: 0;
-
-            input {
-              margin-right: 5px;
-            }
+          input {
+            margin-right: 5px;
           }
         }
       }
@@ -154,14 +148,18 @@ section.tool-wrapper {
       div#graph-listen {
         margin-top: 8px;
         margin-right: 20px;
+        display: block;
+        text-align: right;
+        float: left;
+        margin-bottom: 0;
       }
     }
 
     label {
       @include border-radius(2px);
       font-weight: bold;
-      padding: 3px;
       color: #fff;
+      padding: 3px;
       -webkit-font-smoothing: antialiased;
     }
 
@@ -196,6 +194,21 @@ section.tool-wrapper {
         border-bottom: 1px solid darken(#073642, 10%);
         @include box-shadow(0 1px 0 lighten(#073642, 2%));
         @extend .clearfix;
+
+      select#musicTypeSelect {
+        @include inline-block();
+        font: 16px $body-font-family;
+        margin-bottom: 0;
+      }
+
+      p {
+        @include inline-block();
+        -webkit-font-smoothing: antialiased;
+        text-shadow: 0 -1px 0 darken(#073642, 10%);
+        margin: 0 lh(.5) lh() 0;
+        font-weight: bold;
+      }
+
       }
 
       div.slider-label {
@@ -222,7 +235,7 @@ section.tool-wrapper {
           margin-top: -.3em;
 
           &:hover, &:active {
-          background-color: lighten( #586e75, 10% );
+            background-color: lighten( #586e75, 10% );
           }
         }
       }