diff --git a/sass/_base-extends.scss b/sass/_base-extends.scss
index 51ef608531..1ed3c8b530 100644
--- a/sass/_base-extends.scss
+++ b/sass/_base-extends.scss
@@ -109,11 +109,18 @@
   @extend .clearfix;
 
   a {
-    text-transform: uppercase;
+    @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
+    background: darken(#F6EFD4, 5%);
+    border-left: 1px solid darken(#f6efd4, 20%);
     color: darken(#F6EFD4, 80%);
+    padding: lh(.75);
+    text-transform: uppercase;
+    display: block;
 
     &:hover {
       color: darken(#F6EFD4, 60%);
+      text-decoration: none;
+      background: none;
     }
   }
 }
diff --git a/sass/_courseware-video.scss b/sass/_courseware-video.scss
new file mode 100644
index 0000000000..10504ff39c
--- /dev/null
+++ b/sass/_courseware-video.scss
@@ -0,0 +1,105 @@
+section.course-content {
+
+  div.video-wrapper {
+    float: left;
+    width: flex-grid(6, 9);
+
+    margin-right: flex-gutter(9);
+
+    div.video-player {
+      position: relative;
+      padding-bottom: 56.25%;
+      padding-top: 30px;
+      height: 0;
+      overflow: hidden;
+
+      object {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      iframe#html5_player {
+        border: none;
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    section {
+      ul {
+        display: inline-block;
+
+        li {
+          margin-top: 5px;
+          display: inline-block;
+          cursor: pointer;
+          border: 0;
+          padding: 0;
+
+          div {
+            &:empty {
+              display: none;
+            }
+          }
+        }
+      }
+
+      div#slider {
+        margin: -14px 0 10px 60px;
+      }
+
+      div#vidtime {
+        float: left;
+      }
+
+      div#video_speeds {
+        float: right;
+        cursor: pointer;
+
+        span {
+          &:hover {
+            color: $mit-red;
+          }
+        }
+      }
+    }
+  }
+
+  ol.subtitles {
+    float: left;
+    width: flex-grid(3, 9);
+
+    li {
+      margin-bottom: 0px;
+      cursor: pointer;
+      border: 0;
+      padding: 0;
+      color: #666;
+
+      &.current {
+        background-color: #f3f3f3;
+        color: #333;
+      }
+
+      &:hover {
+        color: $mit-red;
+      }
+
+      div {
+        margin-bottom: 8px;
+      }
+
+      div:empty {
+        margin-bottom: 0px;
+      }
+    }
+  }
+
+}
diff --git a/sass/_courseware.scss b/sass/_courseware.scss
index d2ab6d65b7..b79bc89e5d 100644
--- a/sass/_courseware.scss
+++ b/sass/_courseware.scss
@@ -1,6 +1,10 @@
 div.course-wrapper {
   @extend .table-wrapper;
 
+  ul, ol {
+    list-style: none;
+  }
+
   div#accordion {
     @extend .sidebar;
 
@@ -102,98 +106,120 @@ div.course-wrapper {
 
     ol.sequence-nav {
       margin-bottom: $body-line-height;
+      @extend .topbar;
 
       li {
         border: none;
         cursor: pointer;
         display: table-cell;
-        min-width: 30px;
-        min-height: 30px;
-        padding: 0 10px;
-      }
-    }
+        padding: lh(.75);
+        float: left;
 
-    div.video-wrapper {
-      float: left;
-      width: 640px;
-      min-height: 620px;
+        //problem
+        &.seq_problem_inactive {
+          width: 14px;
+          background: url('/static/images/problem-icon.png') 13px 13px no-repeat;
+          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
 
-      iframe#html5_player {
-        border: none;
-        display: none;
-        height: 390px;
-        width:  640px;
-      }
-
-      section {
-        ul {
-          display: inline-block;
-
-          li {
-            margin-top: 5px;
-            display: inline-block;
-            cursor: pointer;
-            border: 0;
-            padding: 0;
-
-            div {
-              &:empty {
-                display: none;
-              }
-            }
+          &:hover {
+            background-color: lighten(#F6EFD4, 3%);
           }
         }
 
-        div#slider {
-          margin: -14px 0 10px 60px;
+        &.seq_problem_visited {
+          width: 14px;
+          background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat;
+          &:hover {
+            background-color: #F6EFD4;
+          }
         }
 
-        div#vidtime {
-          float: left;
+        &.seq_problem_active {
+          width: 14px;
+          background: #FFFBEB url('/static/images/problem-icon.png') -22px 13px no-repeat;
+          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
+
+          &:hover {
+            background-color: #F6EFD4;
+          }
         }
 
-        div#video_speeds {
+        //video
+        &.seq_video_inactive {
+          width: 14px;
+          background: url('/static/images/video-icon.png') 13px 15px no-repeat;
+          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
+
+          &:hover {
+            background-color: lighten(#F6EFD4, 3%);
+          }
+        }
+
+        &.seq_video_visited {
+          width: 14px;
+          background: shade(#F6EFD4, 4%) url('/static/images/video-icon.png') -64px 15px no-repeat;
+          &:hover {
+            background-color: #F6EFD4;
+          }
+        }
+
+        &.seq_video_active {
+          width: 14px;
+          background: #FFFBEB url('/static/images/video-icon.png') -25px 15px no-repeat;
+          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%),inset 1px 0 0 darken(#F6EFD4, 20%));
+          &:hover {
+            background-color: #F6EFD4;
+          }
+        }
+
+
+        //vertical
+        &.seq_vertical_inactive {
+          width: 14px;
+          background: url('/static/images/vertical-icon.png') -82px 15px no-repeat;
+          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
+
+          &:hover {
+            background-color: lighten(#F6EFD4, 3%);
+          }
+        }
+
+        &.seq_vertical_visited {
+          width: 14px;
+          background: shade(#F6EFD4, 4%) url('/static/images/vertical-icon.png') 13px 15px no-repeat;
+          &:hover {
+            background-color: #F6EFD4;
+          }
+        }
+
+        &.seq_vertical_active {
+          width: 14px;
+          background: #FFFBEB url('/static/images/vertical-icon.png') -35px 15px no-repeat;
+          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
+
+          &:hover {
+            background-color: #F6EFD4;
+          }
+        }
+
+        &.prev, &.next {
+          @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
+          background: darken(#F6EFD4, 5%);
+          border-left: 1px solid darken(#f6efd4, 20%);
+          color: darken(#F6EFD4, 80%);
           float: right;
-          cursor: pointer;
+          letter-spacing: 1px;
+          padding: lh(.75);
+          text-transform: uppercase;
 
-          span {
-            &:hover {
-              color: $mit-red;
-            }
+          &:hover {
+            text-decoration: none;
+            color: darken(#F6EFD4, 60%);
+            text-decoration: none;
+            background: none;
           }
         }
       }
     }
-
-    ol.subtitles {
-      width: 220px;
-      margin-left: 20px;
-      float: left;
-
-      li {
-        margin-bottom: 0px;
-        cursor: pointer;
-        border: 0;
-        padding: 0;
-        color: #666;
-
-        &.current {
-          background-color: #f3f3f3;
-          color: #333;
-        }
-
-        &:hover {
-          color: $mit-red;
-        }
-				
-				div {
-					margin-bottom: 8px;
-				}
-
-				div:empty {
-					margin-bottom: 0px;
-				}
-      }
-    }
   }
 }
diff --git a/sass/_textbook.scss b/sass/_textbook.scss
index 6e22791f2c..b0fbdcd372 100644
--- a/sass/_textbook.scss
+++ b/sass/_textbook.scss
@@ -18,17 +18,25 @@ div.book-wrapper {
 
     nav {
       @extend .topbar;
+      @extend .clearfix;
 
       ul {
         @extend .clearfix;
-        li {
-          padding: 15px;
 
+        li {
           &.last {
             float: left;
+            display: block;
+
+            a {
+              @include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%));
+              border-right: 1px solid darken(#f6efd4, 20%);
+              border-left: 0;
+            }
           }
 
           &.next {
+            display: block;
             float: right;
           }
         }
diff --git a/sass/_wiki.scss b/sass/_wiki.scss
index aed8d34ef3..0cf50a54b6 100644
--- a/sass/_wiki.scss
+++ b/sass/_wiki.scss
@@ -8,8 +8,8 @@ div.wiki-wrapper {
 
     input[type="button"] {
       @extend h3;
-      color: lighten($text-color, 10%);
       @include transition();
+      color: lighten($text-color, 10%);
       font-size: $body-font-size;
       margin: 0  !important;
       padding: 7px 7px 7px 30px;
@@ -77,7 +77,7 @@ div.wiki-wrapper {
 
   section.wiki-body {
     @extend .content;
-    
+
     header {
       @extend .topbar;
 
@@ -91,6 +91,7 @@ div.wiki-wrapper {
 
       ul {
         float: right;
+        list-style: none;
 
         li {
           float: left;
@@ -108,7 +109,7 @@ div.wiki-wrapper {
             font-size: 12px;
             text-transform: uppercase;
             letter-spacing: 1px;
-            padding: 15px;
+            padding: lh(.75);
             margin: 0;
 
             &:hover {
@@ -136,4 +137,4 @@ div.wiki-wrapper {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/sass/application.scss b/sass/application.scss
index f274acbfb8..359197d16a 100644
--- a/sass/application.scss
+++ b/sass/application.scss
@@ -8,7 +8,7 @@
 @import "leanmodal";
 
 // pages
-@import "courseware";
+@import "courseware", "courseware-video";
 @import "textbook";
 @import "profile";
 @import "wiki-create", "wiki";
diff --git a/seq_module.html b/seq_module.html
index c2891af8f9..6608344e2f 100644
--- a/seq_module.html
+++ b/seq_module.html
@@ -4,8 +4,8 @@
   <li class="seq_inactive" id="tt_${ t }">&nbsp;</li>
   % endfor
 
-  <li id="${ id }prev">Previous</li>
-  <li id="${ id }next">Next</li>
+  <li id="${ id }next" class="next">Next</li>
+  <li id="${ id }prev" class="prev">Previous</li>
 </ol>
 
 
diff --git a/seq_module.js b/seq_module.js
index a636045587..57b73543c6 100644
--- a/seq_module.js
+++ b/seq_module.js
@@ -44,7 +44,7 @@ function ${ id }goto(i) {
     ${ id }loc=i;
     //$('#tt_'+i).attr("style", "background-color:red");
     $('#tt_'+i).removeClass();
-    $('#tt_'+i).addClass("seq_active");
+    $('#tt_'+i).addClass("seq_"+${ id }types[${ id }loc]+"_active");
 
     MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
 }
diff --git a/video.html b/video.html
index bdbd6e80a5..089dfb74c2 100644
--- a/video.html
+++ b/video.html
@@ -1,12 +1,14 @@
 
 <div class="video-wrapper">
-  <div id="ytapiplayer">
+  <div class="video-player">
+    <div id="ytapiplayer">
+    </div>
+    
+    <!-- TODO(Ernie/Kyle) move styles to css -->
+    <iframe id="html5_player" type="text/html" frameborder="0">
+    </iframe>
   </div>
   
-  <!-- TODO(Ernie/Kyle) move styles to css -->
-  <iframe id="html5_player" type="text/html" frameborder="0">
-  </iframe>
-  
   <section class="video-controls">
     <ul>
       <li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
@@ -19,8 +21,6 @@
   </section>
 </div>
 
-
-
 <ol class="subtitles">
   <li id=stt_n5><div id=std_n7 onclick="title_seek(-7);"></div></li>
   <li id=stt_n4><div id=std_n6 onclick="title_seek(-6);"></div></li>