From d7296902ae6da2ceb5cfa7c540d6351c1116b0c2 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 8 Mar 2012 16:01:00 -0500
Subject: [PATCH] Added styles for sliders in courseware

---
 sass/courseware/_amplifier.scss  |  8 ++++----
 sass/courseware/_courseware.scss | 19 +++++++++++++++++++
 sass/courseware/_video.scss      |  4 ++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/sass/courseware/_amplifier.scss b/sass/courseware/_amplifier.scss
index 963fdfd0cb..71af349d20 100644
--- a/sass/courseware/_amplifier.scss
+++ b/sass/courseware/_amplifier.scss
@@ -16,21 +16,21 @@ div#graph-container {
 
     select#musicTypeSelect {
       display: block;
-      margin-bottom: lh(2);
+      margin-bottom: lh();
     }
 
     div#graph-output {
       display: block;
-      margin-bottom: lh(2);
+      margin-bottom: lh();
     }
 
     div#graph-listen {
       display: block;
-      margin-bottom: lh(2);
+      margin-bottom: lh();
     }
 
     p {
-      margin-bottom: lh(1);
+      margin-bottom: lh(.5);
     }
 
     div#label {
diff --git a/sass/courseware/_courseware.scss b/sass/courseware/_courseware.scss
index c5811bd993..b36f17f165 100644
--- a/sass/courseware/_courseware.scss
+++ b/sass/courseware/_courseware.scss
@@ -182,6 +182,25 @@ div.course-wrapper {
       line-height: lh();
       font-family: Consolas, "Lucida Console", Monaco, "Courier New", Courier, monospace;
     }
+
+    div.ui-slider {
+      border: 1px solid #aaa;
+      background: #ddd;
+      @include box-shadow(inset 0 1px 0 #eee);
+      @include border-radius(0);
+
+      a.ui-slider-handle {
+        @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
+        background: $mit-red url(/static/images/slider-bars.png) center center no-repeat;
+        border: 1px solid darken($mit-red, 20%);
+        cursor: pointer;
+
+        &:hover, &:focus {
+          background-color: lighten($mit-red, 10%);
+          outline: none;
+        }
+      }
+    }
   }
 
   &.closed {
diff --git a/sass/courseware/_video.scss b/sass/courseware/_video.scss
index b1cf792caf..4402e968ad 100644
--- a/sass/courseware/_video.scss
+++ b/sass/courseware/_video.scss
@@ -71,7 +71,6 @@ section.course-content {
             @include border-radius(20px);
             @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
             background: $mit-red url(/static/images/slider-handle.png) center center no-repeat;
-            border: 0;
             border: 1px solid darken($mit-red, 20%);
             cursor: pointer;
             height: 20px;
@@ -79,7 +78,8 @@ section.course-content {
             top: -4px;
             width: 20px;
 
-            &:focus {
+            &:focus, &:hover {
+              background-color: lighten($mit-red, 10%);
               outline: none;
             }
           }