less white space ( TODO properly compress the intro.png )

app/pods/components/music-tab/template.hbs

@@ -149,13 +149,13 @@
 
 <div class="row" id="beatOptionRow">
   <div class="beatOption {{if usingMicAudio "col-xs-4" "col-xs-8"}}">
-    <span data-toggle="tooltip" data-placement="bottom auto" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="optionDescription bootstrapTooltip">Sensitivity</span>
+    <span data-toggle="tooltip" data-placement="bottom" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="optionDescription bootstrapTooltip">Sensitivity</span>
   {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
   </div>
 
   {{#if usingMicAudio}}
       <div class="beatOption col-xs-4">
-          <span data-toggle="tooltip" data-placement="bottom auto" data-title="The coefficient to boost the microphone signal by" class="optionDescription bootstrapTooltip">Microphone boost</span>
+          <span data-toggle="tooltip" data-placement="bottom" data-title="The coefficient to boost the microphone signal by" class="optionDescription bootstrapTooltip">Microphone boost</span>
         {{range-slider start=micBoost orientation="vertical" step=beatOptions.micBoost.step range=beatOptions.micBoost.range slide="micBoostChanged" pips=beatOptions.micBoost.pips}}
       </div>
   {{/if}}

app/styles/app.scss

@@ -7,7 +7,7 @@
 $playerHeight: 400px;
 $playerDefaultIconColor: #BBBBBB;
 $footerHeight: 40px;
-$playerBottomHeight: 300px;
+$playerBottomHeight: 250px;
 $secondaryThemeColor: #F12B24;
 $glowingText: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #228DFF;
 $dimmerOnButtonColor: #404040;
@@ -823,16 +823,17 @@ md-switch.md-default-theme.md-checked .md-thumb {
 #beatArea {
   height: $playerBottomHeight;
   position: relative;
-  padding: 20px 0 0 0;
 }
 
 .noUi-target {
   margin: 0 auto;
 }
+
 .noUi-base, .noUi-background {
   background-color: #ADADAD;
   border: 1px solid #797979;
 }
+
 .noUi-vertical {
   height: 200px;
   margin-top: 15px;

app/styles/fancy-speaker.scss

@@ -1,7 +1,7 @@
 /* Variables */
-$centersize: 100px;
+$centersize: 80px;
-$center1size: 250px;
+$center1size: 205px;
-$bezelsize: 285px;
+$bezelsize: 240px;
 $vibratesize: $centersize*1.06;
 $vibratemargin:-$vibratesize/2;
 $vibrateblurinner: 3px;
@@ -64,8 +64,8 @@ $vibrateblurouter: 2px;
   height: $centersize;
   width: $centersize;
   position: absolute;
-  bottom: 60px;
+  bottom: 47px;
-  right: 60px;
+  right: 47px;
   -webkit-filter: blur(1px);
   filter: blur(1px);
   background: rgb(0,0,0);