diff --git a/lms/static/sass/_course_info.scss b/lms/static/sass/_course_info.scss
index 70d470e1e2..d3fb5cdbea 100644
--- a/lms/static/sass/_course_info.scss
+++ b/lms/static/sass/_course_info.scss
@@ -4,8 +4,8 @@
   }
 
   header.course-profile {
-    background: rgb(240,240,240);
-    @include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245)));
+    background: rgb(245,245,245);
+    //@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245)));
     @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
     border-bottom: 1px solid rgb(200,200,200);
     @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
@@ -16,7 +16,7 @@
       @include clearfix;
       margin: 0 auto;
       max-width: 1200px;
-      padding: 40px 0px 40px;
+      padding: 50px 0px 40px;
       position: relative;
       width: flex-grid(12);
 
@@ -41,8 +41,6 @@
         z-index: 2;
 
         > hgroup {
-          //@include inline-block;
-          //padding: 0 30px;
           position: relative;
 
           hr {
@@ -69,9 +67,9 @@
 
           h1 {
             font: bold 2.8rem/3.2rem $sans-serif;
-            margin-bottom: 0px;
+            @include inline-block;
+            margin-right: 5px;
             text-shadow: 0 1px rgba(255,255,255, 0.6);
-            //text-align: center;
 
             span {
               color: $lighter-base-font-color;
@@ -81,7 +79,7 @@
           }
 
           h2 {
-            //text-align: center;
+            @include inline-block;
 
             a {
               color: $lighter-base-font-color;
@@ -94,31 +92,92 @@
             }
           }
         }
+
+        .course-dates {
+          p {
+            color: $lighter-base-font-color;
+            @include inline-block;
+            font: 300 1.2rem/1.6rem $sans-serif;
+            margin-top: 0px;
+            margin-right: 20px;
+            text-transform: uppercase;
+
+            &:last-child {
+              margin: 0;
+            }
+
+            > span {
+              color: $base-font-color;
+              font: 300 1.2rem/1.6rem $sans-serif;
+              margin-left: 5px;
+            }
+          }
+        }
       }
 
       .actions {
         float: left;
-        padding-top: 5px;
         position: relative;
         width: flex-grid(4);
         z-index: 2;
 
-        a.register {
-          @include button(shiny, $blue);
+        &:hover {
+          .register-wrapper {
+            @include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
+            border-color: rgb(180,180,180);
+          }
+        }
+
+        .register-wrapper {
+          @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
           @include box-sizing(border-box);
-          @include border-radius(3px);
-          display: block;
-          font: italic 1.2rem/1.6rem $serif;
-          margin-bottom: 10px;
-          padding: 10px 0px;
-          text-transform: uppercase;
-          text-align: center;
-          width: flex-grid(12);
+          @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9));
+          border: 1px solid rgb(210,210,210);
+          @include border-radius(4px);
+          @include transition(all, 0.15s, linear);
+          padding: 10px;
+
+          a.register {
+            @include button(shiny, $blue);
+            @include box-sizing(border-box);
+            @include border-radius(3px);
+            display: block;
+            font: italic 1.2rem/1.6rem $serif;
+            padding: 10px 0px;
+            position: relative;
+            text-transform: uppercase;
+            text-align: center;
+            width: flex-grid(12);
+            z-index: 1;
+          }
         }
 
         .social-sharing {
-          background: rgb(230,230,230);
-          height: 40px;
+          padding: 0px 20px;
+
+          p {
+            background: rgb(245,245,245);
+            @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.075), inset 0 0 0 1px rgba(255,255,255, 0.9));
+            border: 1px solid rgb(210,210,210);
+            border-top: 0;
+            @include border-bottom-radius(4px);
+            padding: 5px 10px;
+            margin: 0 auto;
+            color: $lighter-base-font-color;
+            font: italic 300 1.2rem/1.6rem $serif;
+            margin: 0 0 5px 0;
+            text-align: center;
+            text-shadow: 0 1px rgba(255,255,255, 0.6);
+
+            &:last-child {
+              margin: 0;
+            }
+
+            > span {
+              font: normal 1.2rem/1.6rem $sans-serif;
+              margin-right: 5px;
+            }
+          }
         }
       }
     }
@@ -131,8 +190,7 @@
       border-bottom: 1px solid rgb(220,220,220);
       @include box-sizing(border-box);
       @include clearfix;
-      margin-bottom: 40px;
-      //text-align: center;
+      margin: 40px 0;
       width: flex-grid(12);
 
       &::after {
@@ -142,14 +200,22 @@
       }
 
       a {
+        border-bottom: 3px solid transparent;
         color: $lighter-base-font-color;
         @include inline-block;
         font: normal 1.2rem/1.6rem $sans-serif;
-        padding: 30px 20px;
+        margin: 0 15px;
+        padding: 0px 5px 15px;
         text-align: center;
+        text-transform: uppercase;
+
+        &:first-child {
+          margin-left: 0px;
+        }
 
         &:hover, &.active {
-          background: rgb(240,240,240);
+          border-color: $pink;
+          //background: rgb(240,240,240);
           color: $base-font-color;
         }
       }
@@ -175,8 +241,6 @@
     width: flex-grid(8);
 
     .inner-wrapper {
-      //padding: 0 60px;
-
       > section {
 
         &::after {
@@ -242,25 +306,6 @@
       background: rgb(245,245,245);
       margin-bottom: 20px;
       padding: 15px;
-
-      &.dates {
-        p {
-          border-bottom: 1px solid rgb(220,220,220);
-          margin-bottom: 15px;
-          margin-top: 0px;
-          padding-bottom: 5px;
-
-          &:last-child {
-            border: none;
-            margin: 0;
-            padding: 0;
-          }
-
-          > span {
-            margin-left: 20px;
-          }
-        }
-      }
     }
 
     .media {
@@ -273,11 +318,53 @@
       .hero {
         height: 180px;
         overflow: hidden;
+        position: relative;
+
+        .play-intro {
+          @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4)));
+          @include border-radius(4px);
+          @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
+          border: 1px solid rgba(0,0,0, 0.3);
+          height: 80px;
+          left: 50%;
+          margin-top: -40px;
+          margin-left: -40px;
+          position: absolute;
+          top: 50%;
+          width: 80px;
+
+          &::after {
+            color: $base-font-color;
+            content: "\25B6";
+            display: block;
+            font: normal 3.2rem/3.2rem $sans-serif;
+            left: 50%;
+            margin-left: -12px;
+            margin-top: -17px;
+            position: absolute;
+            text-shadow: 0 1px rgba(255,255,255, 0.8);
+            top: 50%;
+          }
+        }
 
         img {
           min-width: 100%;
         }
       }
+
+      &:hover {
+        cursor: pointer;
+
+        .play-intro {
+          @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5)));
+          @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
+          border: 1px solid rgba(0,0,0, 0.4);
+
+          &::after {
+            color: $pink;
+          }
+        }
+      }
     }
   }
 }
diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css
index 26c93e10a9..d5f230ee0c 100755
--- a/lms/static/sass/application.css
+++ b/lms/static/sass/application.css
@@ -3397,12 +3397,7 @@ nav.course-material {
 .course-info .container {
   margin-bottom: 60px; }
 .course-info header.course-profile {
-  background: #f0f0f0;
-  background-image: -webkit-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
-  background-image: -moz-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
-  background-image: -ms-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
-  background-image: -o-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
-  background-image: linear-gradient(-90deg, #e6e6e6, #f5f5f5);
+  background: #f5f5f5;
   -webkit-box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5);
   box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5);
@@ -3416,7 +3411,7 @@ nav.course-material {
     zoom: 1;
     margin: 0 auto;
     max-width: 1200px;
-    padding: 40px 0px 40px;
+    padding: 50px 0px 40px;
     position: relative;
     width: 100%; }
     .course-info header.course-profile .intro-inner-wrapper:before, .course-info header.course-profile .intro-inner-wrapper:after {
@@ -3476,81 +3471,189 @@ nav.course-material {
             width: 100%; }
         .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 {
           font: bold 2.8rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif;
-          margin-bottom: 0px;
+          display: -moz-inline-box;
+          -moz-box-orient: vertical;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto;
+          margin-right: 5px;
           text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
           .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 span {
             color: #a0a0a0;
             display: none;
             font: 300 1.2rem/3rem "Open Sans", Verdana, Geneva, sans-serif; }
-        .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a {
-          color: #a0a0a0;
-          font: italic bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
-          text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
-          .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a:hover {
-            color: #1d9dd9; }
+        .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 {
+          display: -moz-inline-box;
+          -moz-box-orient: vertical;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto; }
+          .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a {
+            color: #a0a0a0;
+            font: italic bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
+            text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
+            .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a:hover {
+              color: #1d9dd9; }
+      .course-info header.course-profile .intro-inner-wrapper .intro .course-dates p {
+        color: #a0a0a0;
+        display: -moz-inline-box;
+        -moz-box-orient: vertical;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
+        margin-top: 0px;
+        margin-right: 20px;
+        text-transform: uppercase; }
+        .course-info header.course-profile .intro-inner-wrapper .intro .course-dates p:last-child {
+          margin: 0; }
+        .course-info header.course-profile .intro-inner-wrapper .intro .course-dates p > span {
+          color: #3c3c3c;
+          font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
+          margin-left: 5px; }
     .course-info header.course-profile .intro-inner-wrapper .actions {
       float: left;
-      padding-top: 5px;
       position: relative;
       width: 31.984%;
       z-index: 2; }
-      .course-info header.course-profile .intro-inner-wrapper .actions a.register {
-        border: 1px solid #002e88;
-        border-bottom: 1px solid #001e5f;
-        -webkit-border-radius: 5px;
-        -moz-border-radius: 5px;
-        -ms-border-radius: 5px;
-        -o-border-radius: 5px;
-        border-radius: 5px;
-        -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-        -moz-box-shadow: inset 0 1px 0 0 #42bae5;
-        box-shadow: inset 0 1px 0 0 #42bae5;
-        color: white;
-        display: inline;
-        font-size: 14px;
-        font-weight: bold;
-        background-color: #1d9dd9;
-        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
-        background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
-        background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
-        background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
-        background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
-        background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
-        padding: 7px 20px 8px;
-        text-align: center;
-        text-decoration: none;
-        text-shadow: 0 -1px 1px #001067;
+      .course-info header.course-profile .intro-inner-wrapper .actions:hover .register-wrapper {
+        -webkit-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
+        -moz-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
+        box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
+        border-color: #b4b4b4; }
+      .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper {
+        background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+        background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+        background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+        background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+        background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
-        -webkit-border-radius: 3px;
-        -moz-border-radius: 3px;
-        -ms-border-radius: 3px;
-        -o-border-radius: 3px;
-        border-radius: 3px;
-        display: block;
-        font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
-        margin-bottom: 10px;
-        padding: 10px 0px;
-        text-transform: uppercase;
-        text-align: center;
-        width: 100%; }
-        .course-info header.course-profile .intro-inner-wrapper .actions a.register:hover {
-          cursor: pointer;
-          background-color: #108ec7;
-          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
-          background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
-          background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
-          background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
-          background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
-          background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
-        .course-info header.course-profile .intro-inner-wrapper .actions a.register:active {
-          -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-          -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-          box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
+        -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
+        -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
+        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
+        border: 1px solid #d2d2d2;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        -ms-border-radius: 4px;
+        -o-border-radius: 4px;
+        border-radius: 4px;
+        -webkit-transition-property: all;
+        -moz-transition-property: all;
+        -ms-transition-property: all;
+        -o-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.15s;
+        -moz-transition-duration: 0.15s;
+        -ms-transition-duration: 0.15s;
+        -o-transition-duration: 0.15s;
+        transition-duration: 0.15s;
+        -webkit-transition-timing-function: linear;
+        -moz-transition-timing-function: linear;
+        -ms-transition-timing-function: linear;
+        -o-transition-timing-function: linear;
+        transition-timing-function: linear;
+        -webkit-transition-delay: 0;
+        -moz-transition-delay: 0;
+        -ms-transition-delay: 0;
+        -o-transition-delay: 0;
+        transition-delay: 0;
+        padding: 10px; }
+        .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register {
+          border: 1px solid #002e88;
+          border-bottom: 1px solid #001e5f;
+          -webkit-border-radius: 5px;
+          -moz-border-radius: 5px;
+          -ms-border-radius: 5px;
+          -o-border-radius: 5px;
+          border-radius: 5px;
+          -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
+          -moz-box-shadow: inset 0 1px 0 0 #42bae5;
+          box-shadow: inset 0 1px 0 0 #42bae5;
+          color: white;
+          display: inline;
+          font-size: 14px;
+          font-weight: bold;
+          background-color: #1d9dd9;
+          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
+          background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+          background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+          background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+          background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+          background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+          padding: 7px 20px 8px;
+          text-align: center;
+          text-decoration: none;
+          text-shadow: 0 -1px 1px #001067;
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          -webkit-border-radius: 3px;
+          -moz-border-radius: 3px;
+          -ms-border-radius: 3px;
+          -o-border-radius: 3px;
+          border-radius: 3px;
+          display: block;
+          font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
+          padding: 10px 0px;
+          position: relative;
+          text-transform: uppercase;
+          text-align: center;
+          width: 100%;
+          z-index: 1; }
+          .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register:hover {
+            cursor: pointer;
+            background-color: #108ec7;
+            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
+            background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+            background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+            background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+            background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+            background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
+          .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register:active {
+            -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
+            -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
+            box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
       .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing {
-        background: #e6e6e6;
-        height: 40px; }
+        padding: 0px 20px; }
+        .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p {
+          background: #f5f5f5;
+          -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
+          -moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
+          box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
+          border: 1px solid #d2d2d2;
+          border-top: 0;
+          -webkit-border-bottom-left-radius: 4px;
+          -moz-border-bottom-left-radius: 4px;
+          -moz-border-radius-bottomleft: 4px;
+          -ms-border-bottom-left-radius: 4px;
+          -o-border-bottom-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+          -webkit-border-bottom-right-radius: 4px;
+          -moz-border-bottom-right-radius: 4px;
+          -moz-border-radius-bottomright: 4px;
+          -ms-border-bottom-right-radius: 4px;
+          -o-border-bottom-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+          padding: 5px 10px;
+          margin: 0 auto;
+          color: #a0a0a0;
+          font: italic 300 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
+          margin: 0 0 5px 0;
+          text-align: center;
+          text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
+          .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p:last-child {
+            margin: 0; }
+          .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p > span {
+            font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
+            margin-right: 5px; }
 .course-info .container {
   zoom: 1; }
   .course-info .container:before, .course-info .container:after {
@@ -3564,7 +3667,7 @@ nav.course-material {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     zoom: 1;
-    margin-bottom: 40px;
+    margin: 40px 0;
     width: 100%; }
     .course-info .container nav:before, .course-info .container nav:after {
       content: "";
@@ -3575,6 +3678,7 @@ nav.course-material {
       content: "";
       display: none; }
     .course-info .container nav a {
+      border-bottom: 3px solid transparent;
       color: #a0a0a0;
       display: -moz-inline-box;
       -moz-box-orient: vertical;
@@ -3584,10 +3688,14 @@ nav.course-material {
       *display: inline;
       *vertical-align: auto;
       font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
-      padding: 30px 20px;
-      text-align: center; }
+      margin: 0 15px;
+      padding: 0px 5px 15px;
+      text-align: center;
+      text-transform: uppercase; }
+      .course-info .container nav a:first-child {
+        margin-left: 0px; }
       .course-info .container nav a:hover, .course-info .container nav a.active, .course-info .container nav.sequence-nav ol li a.seq_video_active, .course-info .container nav.sequence-nav ol li a.seq_other_active, .course-info .container nav.sequence-nav ol li a.seq_vertical_active, .course-info .container nav.sequence-nav ol li a.seq_problem_active {
-        background: #f0f0f0;
+        border-color: #b62568;
         color: #3c3c3c; }
   .course-info .container h2 {
     color: #a0a0a0;
@@ -3647,17 +3755,6 @@ nav.course-material {
     background: #f5f5f5;
     margin-bottom: 20px;
     padding: 15px; }
-    .course-info .course-sidebar > section.dates p {
-      border-bottom: 1px solid #dcdcdc;
-      margin-bottom: 15px;
-      margin-top: 0px;
-      padding-bottom: 5px; }
-      .course-info .course-sidebar > section.dates p:last-child {
-        border: none;
-        margin: 0;
-        padding: 0; }
-      .course-info .course-sidebar > section.dates p > span {
-        margin-left: 20px; }
   .course-info .course-sidebar .media {
     border: 1px solid #c8c8c8;
     -webkit-box-sizing: border-box;
@@ -3668,9 +3765,57 @@ nav.course-material {
     width: 100%; }
     .course-info .course-sidebar .media .hero {
       height: 180px;
-      overflow: hidden; }
+      overflow: hidden;
+      position: relative; }
+      .course-info .course-sidebar .media .hero .play-intro {
+        background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
+        background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
+        background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
+        background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
+        background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        -ms-border-radius: 4px;
+        -o-border-radius: 4px;
+        border-radius: 4px;
+        -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
+        box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        height: 80px;
+        left: 50%;
+        margin-top: -40px;
+        margin-left: -40px;
+        position: absolute;
+        top: 50%;
+        width: 80px; }
+        .course-info .course-sidebar .media .hero .play-intro::after {
+          color: #3c3c3c;
+          content: "\25B6";
+          display: block;
+          font: normal 3.2rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif;
+          left: 50%;
+          margin-left: -12px;
+          margin-top: -17px;
+          position: absolute;
+          text-shadow: 0 1px rgba(255, 255, 255, 0.8);
+          top: 50%; }
       .course-info .course-sidebar .media .hero img {
         min-width: 100%; }
+    .course-info .course-sidebar .media:hover {
+      cursor: pointer; }
+      .course-info .course-sidebar .media:hover .play-intro {
+        background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
+        background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
+        background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
+        background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
+        background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
+        -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
+        box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(0, 0, 0, 0.4); }
+        .course-info .course-sidebar .media:hover .play-intro::after {
+          color: #b62568; }
 
 html {
   height: 100%;