From 3654c0339e49227fc694a562337ad5c94a3af01a Mon Sep 17 00:00:00 2001
From: Reda Lemeden <reda@thoughtbot.com>
Date: Mon, 12 Mar 2012 16:46:10 -0400
Subject: [PATCH 1/6] Restyled the gradebook

--HG--
branch : rl-gradebook
---
 gradebook.html        | 33 ++++++++++++++++++++-------------
 sass/_gradebook.scss  | 11 +++++++++++
 sass/application.scss |  1 +
 3 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 sass/_gradebook.scss

diff --git a/gradebook.html b/gradebook.html
index e237fbe16a..340b0da696 100644
--- a/gradebook.html
+++ b/gradebook.html
@@ -1,15 +1,22 @@
-<table>
-% for s in students:
-<h1><a href=/profile/${s['id']}>${s['username']}</a></h1>
-% for c in s['grade_info']['grade_summary']:
-<h2>${c['category']} </h2>
-<p>
-% if 'subscores' in c:
+<%inherit file="main.html" />
+<%include file="navigation.html" args="active_page=''" />
+<section class="main-content">
+<div class="gradebook-wrapper">
+  <section class="gradebook-content">
+  <h1>Gradebook</h1>
+  % for s in students:
+  <h2><a href=/profile/${s['id']}>${s['username']}</a></h2>
+  % for c in s['grade_info']['grade_summary']:
+  <h3>${c['category']} </h3>
+  <p>
+  % if 'subscores' in c:
   % for ss in c['subscores']:
-    <br>${ss['summary']}
+  <br>${ss['summary']}
   % endfor
-% endif
-</p>
-% endfor
-% endfor
-</table>
+  % endif
+  </p>
+  % endfor
+  % endfor
+  </section>
+</div>
+</section>
diff --git a/sass/_gradebook.scss b/sass/_gradebook.scss
new file mode 100644
index 0000000000..3282d4141b
--- /dev/null
+++ b/sass/_gradebook.scss
@@ -0,0 +1,11 @@
+div.gradebook-wrapper {
+  @extend .table-wrapper;
+
+  section.gradebook-content {
+    @extend .content;
+
+    h1 {
+      @extend .top-header;
+    }
+  }
+}
diff --git a/sass/application.scss b/sass/application.scss
index d4b2d01a84..b949b2fac7 100644
--- a/sass/application.scss
+++ b/sass/application.scss
@@ -11,6 +11,7 @@
 @import "textbook";
 @import "info";
 @import "profile";
+@import "gradebook";
 @import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki", "wiki/table";
 @import "help";
 

From d3c4c2eeeb7a2435720c8e0a68ef9fffedcb3e05 Mon Sep 17 00:00:00 2001
From: Reda Lemeden <reda@thoughtbot.com>
Date: Mon, 12 Mar 2012 17:16:26 -0400
Subject: [PATCH 2/6] Fixed id conflict in Askbot

---
 sass/discussion/_forms.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/sass/discussion/_forms.scss b/sass/discussion/_forms.scss
index 8f642706e0..ab14bc1137 100644
--- a/sass/discussion/_forms.scss
+++ b/sass/discussion/_forms.scss
@@ -128,9 +128,8 @@ form.question-form {
   input[type="checkbox"] {
     margin-top: 10px;
   }
-}
 
-div#question-list {
+  div#question-list {
   background-color: rgba(255,255,255,0.95);
   @include box-sizing(border-box);
   margin-top: -15px;
@@ -157,3 +156,6 @@ div#question-list {
     }
   }
 }
+}
+
+

From 731ca112bcf5d500797ee04d36f07194779cb778 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Tue, 13 Mar 2012 09:21:34 -0400
Subject: [PATCH 3/6] Added some fixes to bugs in the updates, refactored the
 cream color to a sass variable and highlighted latest update

---
 sass/_info.scss                     | 11 +++++++++--
 sass/base/_extends.scss             | 14 +++++++-------
 sass/base/_variables.scss           |  1 +
 sass/courseware/_sequence-nav.scss  | 22 +++++++++-------------
 sass/discussion/_answers.scss       |  6 ------
 sass/discussion/_profile.scss       |  2 +-
 sass/discussion/_question-view.scss |  7 +++----
 sass/wiki/_wiki.scss                |  6 +++---
 8 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/sass/_info.scss b/sass/_info.scss
index 418cc1a00a..910036b093 100644
--- a/sass/_info.scss
+++ b/sass/_info.scss
@@ -12,15 +12,22 @@ div.info-wrapper {
       margin-bottom: lh();
     }
 
-    ol {
+    > ol {
       list-style: none;
 
-      li {
+      > li {
         padding-bottom: lh(.5);
         margin-bottom: lh(.5);
         @extend .clearfix;
         border-bottom: 1px solid #e3e3e3;
 
+        &:first-child {
+          padding: lh(.5);
+          margin-left: (-(lh(.5)));
+          background: $cream;
+          border-bottom: 1px solid darken($cream, 10%);
+        }
+
         h2 {
           float: left;
           width: flex-grid(2, 9);
diff --git a/sass/base/_extends.scss b/sass/base/_extends.scss
index d55fe62f96..5aa3aa1816 100644
--- a/sass/base/_extends.scss
+++ b/sass/base/_extends.scss
@@ -166,8 +166,8 @@ h1.top-header {
 
 .topbar {
   @extend .clearfix;
-  background: #F6EFD4;
-  border-bottom: 1px solid darken(#F6EFD4, 10%);
+  background: $cream;
+  border-bottom: 1px solid darken($cream, 10%);
   @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
   font-size: 12px;
   margin: (-$body-line-height) (-$body-line-height) $body-line-height;
@@ -180,17 +180,17 @@ h1.top-header {
   }
 
   a {
-    color: darken(#F6EFD4, 80%);
+    color: darken($cream, 80%);
 
     &:hover {
-      color: darken(#F6EFD4, 60%);
+      color: darken($cream, 60%);
       text-decoration: none;
     }
 
     &.block-link {
-      background: darken(#F6EFD4, 5%);
-      border-left: 1px solid darken(#f6efd4, 20%);
-      @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
+      background: darken($cream, 5%);
+      border-left: 1px solid darken($cream, 20%);
+      @include box-shadow(inset 1px 0 0 lighten($cream, 5%));
       display: block;
       text-transform: uppercase;
 
diff --git a/sass/base/_variables.scss b/sass/base/_variables.scss
index 249f92dc96..60dd764872 100644
--- a/sass/base/_variables.scss
+++ b/sass/base/_variables.scss
@@ -26,6 +26,7 @@ $fg-min-width: 810px;
 $light-gray: #ddd;
 $dark-gray: #333;
 $mit-red: #993333;
+$cream: #F6EFD4;
 
 $text-color: $dark-gray;
 $border-color: $light-gray;
diff --git a/sass/courseware/_sequence-nav.scss b/sass/courseware/_sequence-nav.scss
index 155c3962b0..a1c086bc55 100644
--- a/sass/courseware/_sequence-nav.scss
+++ b/sass/courseware/_sequence-nav.scss
@@ -19,7 +19,7 @@ nav.sequence-nav {
         background-repeat: no-repeat;
 
         &:hover {
-          background-color: lighten(#F6EFD4, 3%);
+          background-color: lighten($cream, 3%);
         }
       }
 
@@ -29,13 +29,12 @@ nav.sequence-nav {
         @include box-shadow(inset 0 0 3px darken(#dccda2, 10%));
 
         &:hover {
-          background-color: #F6EFD4;
+          background-color: $cream;
           background-position: center center;
         }
       }
 
       .active {
-        // @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
         @include box-shadow(0 1px 0 #fff);
         background-color: #fff;
         background-repeat: no-repeat;
@@ -50,7 +49,7 @@ nav.sequence-nav {
         @include box-shadow(1px 0 0 #fff);
         background-position: center center;
         border: none;
-        border-right: 1px solid darken(#F6EFD4, 10%);
+        border-right: 1px solid darken($cream, 10%);
         cursor: pointer;
         padding: 15px 4px 14px;
         width: 28px;
@@ -166,11 +165,8 @@ nav.sequence-nav {
       &.prev, &.next {
 
         a {
-          // color: darken(#F6EFD4, 80%);
-          // letter-spacing: 1px;
-          // text-transform: uppercase;
           @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
-          background-color: darken(#F6EFD4, 5%);
+          background-color: darken($cream, 5%);
           background-position: center center;
           background-repeat: no-repeat;
           border-left: 1px solid darken(#f6efd4, 20%);
@@ -182,7 +178,7 @@ nav.sequence-nav {
 
           &:hover {
             text-decoration: none;
-            color: darken(#F6EFD4, 60%);
+            color: darken($cream, 60%);
             text-decoration: none;
             background-color: none;
           }
@@ -230,7 +226,7 @@ section.course-content {
       margin: lh() auto 0;
       overflow: hidden;
       width: 106px;
-      background-color: darken(#F6EFD4, 5%);
+      background-color: darken($cream, 5%);
       @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
 
       li {
@@ -249,15 +245,15 @@ section.course-content {
 
             &:hover {
               text-decoration: none;
-              color: darken(#F6EFD4, 60%);
+              color: darken($cream, 60%);
               text-decoration: none;
               opacity: .5;
-              background-color: darken(#F6EFD4, 10%);
+              background-color: darken($cream, 10%);
             }
 
             &.disabled {
               opacity: .4;
-              background-color: lighten(#F6EFD4, 10%);
+              background-color: lighten($cream, 10%);
             }
           }
         }
diff --git a/sass/discussion/_answers.scss b/sass/discussion/_answers.scss
index e677f90b3e..e311c17406 100644
--- a/sass/discussion/_answers.scss
+++ b/sass/discussion/_answers.scss
@@ -153,12 +153,6 @@ div.answer-actions {
     &.question-delete {
       // color: $mit-red;
     }
-
-    &.question-edit, &.permant-link {
-      // color: darken(#F6EFD4, 45%);;
-    }
-
   }
-
 }
 
diff --git a/sass/discussion/_profile.scss b/sass/discussion/_profile.scss
index dcf765aaf0..4654addb7a 100644
--- a/sass/discussion/_profile.scss
+++ b/sass/discussion/_profile.scss
@@ -70,7 +70,7 @@ body.user-profile-page {
         margin-bottom: 30px;
 
         li {
-          background-color: lighten(#F6EFD4, 3%);
+          background-color: lighten($cream, 3%);
           background-position: 10px center;
           background-repeat: no-repeat;
           @include border-radius(4px);
diff --git a/sass/discussion/_question-view.scss b/sass/discussion/_question-view.scss
index c644132d92..fb1d2d618f 100644
--- a/sass/discussion/_question-view.scss
+++ b/sass/discussion/_question-view.scss
@@ -19,8 +19,8 @@ div.question-header {
 
         &.post-vote {
           @include border-radius(4px);
-          background-color: lighten(#F6EFD4, 5%);
-          border: 1px solid darken( #F6EFD4,10% );
+          background-color: lighten($cream, 5%);
+          border: 1px solid darken( $cream, 10% );
           @include box-shadow(inset 0 1px 0px #fff);
         }
 
@@ -79,7 +79,6 @@ div.question-header {
         width: flex-grid(4,8);
 
         a {
-          // color: darken(#F6EFD4, 50%);
 
           &.question-delete {
             color: $mit-red;
@@ -134,7 +133,7 @@ div.question-header {
 
           &.revision {
             text-align: center;
-            background:lighten(#F6EFD4, 7%);
+            background:lighten($cream, 7%);
 
             a {
               color: black;
diff --git a/sass/wiki/_wiki.scss b/sass/wiki/_wiki.scss
index 9a8788bdd4..043d9c84b5 100644
--- a/sass/wiki/_wiki.scss
+++ b/sass/wiki/_wiki.scss
@@ -25,7 +25,7 @@ div.wiki-wrapper {
       p {
         float: left;
         margin-bottom: 0;
-        color: darken(#F6EFD4, 55%);
+        color: darken($cream, 55%);
         line-height: 46px;
         padding-left: lh();
       }
@@ -39,14 +39,14 @@ div.wiki-wrapper {
 
           input[type="button"] {
             @extend .block-link;
-            background-color: darken(#F6EFD4, 5%);
+            background-color: darken($cream, 5%);
             background-position: 12px center;
             background-repeat: no-repeat;
             border: 0;
             border-left: 1px solid darken(#f6efd4, 20%);
             @include border-radius(0);
             @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
-            color: darken(#F6EFD4, 80%);
+            color: darken($cream, 80%);
             display: block;
             font-weight: normal;
             font-size: 12px;

From 3966a06888d409c29ad64fb23bc9b49532f2e878 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Tue, 13 Mar 2012 10:00:03 -0400
Subject: [PATCH 4/6] Make warnings show in IE 9

---
 login.html | 2 +-
 main.html  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/login.html b/login.html
index 0372532284..f371aa2e4c 100644
--- a/login.html
+++ b/login.html
@@ -4,7 +4,7 @@
     <h1>Log in to MITx</h1>
     <p class="no-account">If you don&rsquo;t have an account yet, <a href="#enroll" rel="leanModal">please enroll here</a></p>
   </header>
-  <!--[if lte IE 8]>
+  <!--[if lte IE 9]>
   <p class="ie-warning">You are using a browser that is not supported by <em>MITx</em>, and you might not be able to complete pieces of the course. Please download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome">Chrome</a> to get the full experience.</p>
   <![endif]-->
 
diff --git a/main.html b/main.html
index 8d05aa2b20..119e861036 100644
--- a/main.html
+++ b/main.html
@@ -27,7 +27,7 @@
 </head>
 
 <body class="<%block name="bodyclass"/>">
-  <!--[if lte IE 8]>
+  <!--[if lte IE 9]>
   <p class="ie-warning">You are using a browser that is not supported by <em>MITx</em>, and you might not be able to complete pieces of the course. Please download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome">Chrome</a> to get the full experience.</p>
   <![endif]-->
 

From e09310e9c9fe2bdc2fa1e8ac9f667ef6582a6867 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Wed, 14 Mar 2012 17:32:05 -0400
Subject: [PATCH 5/6] added fix for error pages and for password reset page

---
 404.html                                 |  2 +-
 registration/password_reset_confirm.html | 20 ++++++++++++++++++++
 sass/layout/_layout.scss                 | 10 ++++++++++
 server-down.html                         |  2 +-
 server-error.html                        |  2 +-
 server-overloaded.html                   |  2 +-
 6 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/404.html b/404.html
index 644f802a13..65b4061b30 100644
--- a/404.html
+++ b/404.html
@@ -1,7 +1,7 @@
 
 <%inherit file="main.html" />
 
-<section class="activation">
+<section class="outside-app">
   <h1>Page not found</h1>
   <p>The page that you were looking for was not found. Go back to the <a href="/">homepage</a> or let us know about any pages that may have been moved at <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a>.</p>
 </section>
diff --git a/registration/password_reset_confirm.html b/registration/password_reset_confirm.html
index fa9538f0e7..9daa598a37 100644
--- a/registration/password_reset_confirm.html
+++ b/registration/password_reset_confirm.html
@@ -1,4 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Reset password - MITx 6.002x</title>
+
+  <link rel="stylesheet" href="/static/css/application.css" type="text/css" media="all" />
+
+  <!--[if lt IE 9]>
+  <script src="/static/js/html5shiv.js"></script>
+  <![endif]-->
+
+</head>
+
+<body>
+
 {% block content %}
+<section class="outside-app">
 
 {% if validlink %}
 
@@ -22,4 +38,8 @@
 
 {% endif %}
 
+</section>
 {% endblock %}
+
+</body>
+</html>
diff --git a/sass/layout/_layout.scss b/sass/layout/_layout.scss
index 74efa3598f..a2e7a355c2 100644
--- a/sass/layout/_layout.scss
+++ b/sass/layout/_layout.scss
@@ -29,5 +29,15 @@ html {
         margin-top: lh(.5);
       }
     }
+
+    section.outside-app {
+      @extend .main-content;
+      max-width: 600px;
+      padding: lh();
+
+      #{$all-text-inputs} {
+        display: block;
+      }
+    }
   }
 }
diff --git a/server-down.html b/server-down.html
index 40786ed3ba..0faed814db 100644
--- a/server-down.html
+++ b/server-down.html
@@ -1,6 +1,6 @@
 <%inherit file="main.html" />
 
-<section class="activation">
+<section class="outside-app">
   <h1>Currently the <em>MITx</em> servers are down</h1>
   <p>Our staff is currently working to get the site back up as soon as possible. Please email us at <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a> to report any problems or downtime.</p>
 </section>
diff --git a/server-error.html b/server-error.html
index c88afb95dd..d41fdde47b 100644
--- a/server-error.html
+++ b/server-error.html
@@ -1,6 +1,6 @@
 <%inherit file="main.html" />
 
-<section class="activation">
+<section class="outside-app">
   <h1>There has been an error on the <em>MITx</em> servers</h1>
   <p>Our staff is currently working to get the site back up as soon as possible. Please email us at <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a> to report any problems or downtime.</p>
 </section>
diff --git a/server-overloaded.html b/server-overloaded.html
index 5f770c1abf..f5859d0e70 100644
--- a/server-overloaded.html
+++ b/server-overloaded.html
@@ -1,6 +1,6 @@
 <%inherit file="main.html" />
 
-<section class="activation">
+<section class="outside-app">
   <h1>Currently the <em>MITx</em> servers are overloaded</h1>
   <p>Our staff is currently working to get the site back up as soon as possible. Please email us at <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a> to report any problems or downtime.</p>
 </section>

From 3da8b8133f69c00f9731bb530fc952d0d3c859b4 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 15 Mar 2012 16:28:36 -0400
Subject: [PATCH 6/6] Added minor ui changes

---
 courseware.html                    |  2 +-
 sass/base/_extends.scss            |  2 +-
 sass/courseware/_sequence-nav.scss | 37 ++++++++++++++++++++++--------
 sass/courseware/_sidebar.scss      | 25 ++++++++++++++++++--
 sass/courseware/_video.scss        | 26 ++++++++++++---------
 video.html                         |  6 ++---
 6 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/courseware.html b/courseware.html
index 2d6cdbf937..07d962957b 100644
--- a/courseware.html
+++ b/courseware.html
@@ -7,7 +7,7 @@
     ${init}
 
     $(".sequence-nav li a").hover(function(){
-      $(this).siblings().toggle();
+      $(this).siblings().toggleClass("shown");
       });
   });
 </script>
diff --git a/sass/base/_extends.scss b/sass/base/_extends.scss
index 5aa3aa1816..4275a1cf67 100644
--- a/sass/base/_extends.scss
+++ b/sass/base/_extends.scss
@@ -74,7 +74,7 @@ h1.top-header {
 
   h1, h2 {
    font-size: 18px;
-   font-weight: 800;
+   font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
   }
diff --git a/sass/courseware/_sequence-nav.scss b/sass/courseware/_sequence-nav.scss
index a1c086bc55..96e25be874 100644
--- a/sass/courseware/_sequence-nav.scss
+++ b/sass/courseware/_sequence-nav.scss
@@ -54,6 +54,7 @@ nav.sequence-nav {
         padding: 15px 4px 14px;
         width: 28px;
         height: 17px;
+        @include transition(all, .4s, $ease-in-out-quad);
 
         // @media screen and (max-width: 800px) {
           //   padding: 12px 8px;
@@ -118,16 +119,24 @@ nav.sequence-nav {
         }
 
       p {
-        position: absolute;
-        display: none;
+        // display: none;
+        // visibility: hidden;
         background: #333;
-        padding: 6px;
-        white-space: pre-wrap;
-        z-index: 99;
-        margin: 4px 0 0 -5px;
-        text-shadow: 0 -1px 0 #000;
         color: #fff;
         line-height: lh();
+        margin: 0px 0 0 -5px;
+        opacity: 0;
+        padding: 6px;
+        position: absolute;
+        text-shadow: 0 -1px 0 #000;
+        @include transition(all, .6s, $ease-in-out-quart);
+        white-space: pre-wrap;
+        z-index: 99;
+
+        &.shown {
+          opacity: 1;
+          margin-top: 4px;
+        }
 
         &:empty {
           background: none;
@@ -146,7 +155,6 @@ nav.sequence-nav {
           top: -5px;
           left: 18px;
           @include transform(rotate(45deg));
-          @include transition();
           width: 10px;
         }
       }
@@ -215,15 +223,23 @@ nav.sequence-nav {
 
 
 section.course-content {
+  position: relative;
+
+  div#seq_content {
+    margin-bottom: 60px;
+  }
+
   nav.sequence-bottom {
-    margin-bottom: -(lh());
+    position: absolute;
+    bottom: 0;
+    right: 50%;
+    margin-right: -53px;
 
     ul {
       @extend .clearfix;
       border: 1px solid darken(#f6efd4, 20%);
       border-bottom: 0;
       @include border-radius(3px 3px 0 0);
-      margin: lh() auto 0;
       overflow: hidden;
       width: 106px;
       background-color: darken($cream, 5%);
@@ -242,6 +258,7 @@ section.course-content {
             text-indent: -9999px;
             width: 45px;
             display: block;
+            @include transition(all, .4s, $ease-in-out-quad);
 
             &:hover {
               text-decoration: none;
diff --git a/sass/courseware/_sidebar.scss b/sass/courseware/_sidebar.scss
index 98659f12e0..d93e672378 100644
--- a/sass/courseware/_sidebar.scss
+++ b/sass/courseware/_sidebar.scss
@@ -34,16 +34,37 @@ section.course-index {
     ul.ui-accordion-content {
       @include border-radius(0);
       @include box-shadow( inset -1px 0 0 #e6e6e6);
-      background: #d6d6d6;
+      background: #dadada;
       border: none;
       border-bottom: 1px solid #c3c3c3;
       font-size: 12px;
       margin: 0;
-      overflow: hidden;
+      // overflow: visible;
 
       li {
+        position: relative;
+
         &.active {
           font-weight: bold;
+
+          p.subtitle {
+            font-weight: normal;
+          }
+
+          // &:after {
+          //   content: " ";
+          //   width: 16px;
+          //   height: 16px;
+          //   position: absolute;
+          //   right: -35px;
+          //   top: 7px;
+          //   display: block;
+          //   background-color: #dadada;
+          //   border-top: 1px solid #c3c3c3;
+          //   border-right: 1px solid #c3c3c3;
+          //   z-index: 99;
+          //   @include transform(rotate(45deg));
+          // }
         }
 
         a {
diff --git a/sass/courseware/_video.scss b/sass/courseware/_video.scss
index 4402e968ad..2904ba44b9 100644
--- a/sass/courseware/_video.scss
+++ b/sass/courseware/_video.scss
@@ -141,20 +141,13 @@ section.course-content {
             line-height: 46px; //height of play pause buttons
             margin-right: 0;
             -webkit-font-smoothing: antialiased;
+            opacity: .7;
+            @include transition();
 
             h3 {
               @include inline-block();
-
-              a {
-                color: #fff;
-                padding: 0 lh(.5);
-                @include inline-block();
-
-                &:hover {
-                  text-decoration: none;
-                  // background-color: #444;
-                }
-              }
+              padding: 0 lh(.5);
+              font-weight: normal;
             }
 
             // fix for now
@@ -164,13 +157,23 @@ section.course-content {
 
               li {
                 cursor: pointer;
+                color: #fff;
                 @include inline-block();
 
                 &.active {
                   font-weight: bold;
                 }
+
+                &:hover {
+                  color: #aaa;
+                }
               }
             }
+
+            &:hover {
+              opacity: 1;
+              background-color: #444;
+            }
           }
 
           a.hide-subtitles {
@@ -184,6 +187,7 @@ section.course-content {
             font-weight: 800;
             background: url('/static/images/cc.png') 16px center no-repeat;
             -webkit-font-smoothing: antialiased;
+            @include transition();
 
             &:hover {
               color: #fff;
diff --git a/video.html b/video.html
index e1548eade0..dd7f2e559b 100644
--- a/video.html
+++ b/video.html
@@ -28,11 +28,11 @@
 
         <div class="secondary-controls">
         <div class="speeds">
-          <h3><a href="#">Speed</a></h3>
+          <h3>Speed</h3>
           <ol id="video_speeds"></ol>
         </div>
 
-        <a href="#" class="hide-subtitles">on</a>
+        <a href="#" class="hide-subtitles">turn off</a>
         </div>
       </section>
     </section>
@@ -66,7 +66,7 @@
         $('div.video-subtitles').toggleClass('closed');
 
         var link_text = $('.hide-subtitles').text();
-        $(this).text((link_text == 'on') ? 'off' : 'on');
+        $(this).text((link_text == 'turn off') ? 'turn on' : 'turn off');
         return false;
        });
   });