Added styles for other and made the sequnce always fit on one line

sass/_courseware-sequence-nav.scss

@@ -3,6 +3,10 @@ nav.sequence-nav {
   margin-bottom: $body-line-height;
 
   ol {
+    display: table-row;
+    float: left;
+    width: flex-grid(7.5,9) + flex-gutter();
+
     a {
       @extend .block-link;
     }
@@ -37,76 +41,65 @@ nav.sequence-nav {
     }
 
     li {
+      @include box-shadow(1px 0 0 #fff);
+      background-position: center center;
       border: none;
       border-right: 1px solid darken(#F6EFD4, 10%);
-      @include box-shadow(1px 0 0 #fff);
       cursor: pointer;
       display: table-cell;
-      padding: lh(.75);
-      float: left;
+      padding: 14px 14px;
       width: 18px;
 
-      //problem
-      // &.seq_problem_inactive {
-      //   width: 14px;
-      //   background: url('/static/images/problem-icon.png') 13px 13px no-repeat;
-        // @extend .inactive;
-      // }
-
-      // &.seq_problem_visited {
-      //   width: 14px;
-      //   background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat;
-      //   &:hover {
-      //     background-color: #F6EFD4;
-      //   }
-      // }
-
-      // &.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;
-      //   }
+      // @media screen and (max-width: 800px) {
+      //   padding: 12px 8px;
       // }
 
       //video
       &.seq_video_inactive {
         @extend .inactive;
-        background-image: url('/static/images/video-icon.png');
-        background-position: 13px 15px;
+        background-image: url('/static/images/sequence-nav/video-icon-normal.png');
       }
 
       &.seq_video_visited {
         @extend .visited;
-        background-image: url('/static/images/video-icon.png');
-        background-position: -81px 15px;
+        background-image: url('/static/images/sequence-nav/video-icon-visited.png');
       }
 
       &.seq_video_active {
         @extend .active;
-        background-image: url('/static/images/video-icon.png');
-        background-position: -32px 15px;
+        background-image: url('/static/images/sequence-nav/video-icon-current.png');
+      }
+
+      //other
+      &.seq_other_inactive {
+        @extend .inactive;
+        background-image: url('/static/images/sequence-nav/document-icon-normal.png');
       }
 
-      //vertical
+      &.seq_other_visited {
+        @extend .visited;
+        background-image: url('/static/images/sequence-nav/document-icon-visited.png');
+      }
+
+      &.seq_other_active {
+        @extend .active;
+        background-image: url('/static/images/sequence-nav/document-icon-current.png');
+      }
+
+      //vertical & problems
       &.seq_vertical_inactive, &.seq_problem_inactive {
-        background-image: url('/static/images/vertical-icon.png');
-        background-position: -82px 15px;
         @extend .inactive;
+        background-image: url('/static/images/sequence-nav/list-icon-normal.png');
       }
 
       &.seq_vertical_visited, &.seq_problem_visited {
-        background-image: url('/static/images/vertical-icon.png');
-        background-position: 13px 15px;
         @extend .visited;
+        background-image: url('/static/images/sequence-nav/list-icon-visited.png');
       }
 
       &.seq_vertical_active, &.seq_problem_active {
-        background-image: url('/static/images/vertical-icon.png');
-        background-position: -35px 15px;
         @extend .active;
+        background-image: url('/static/images/sequence-nav/list-icon-current.png');
       }
 
     }
@@ -115,28 +108,49 @@ nav.sequence-nav {
   ul {
     float: right;
     margin-right: 1px;
+    width: flex-grid(1.5, 9);
+    display: table-row;
 
     li {
-      float: left;
 
       &.prev, &.next {
+        // color: darken(#F6EFD4, 80%);
+        // letter-spacing: 1px;
+        // text-transform: uppercase;
         @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
-        background: darken(#F6EFD4, 5%);
+        background-color: darken(#F6EFD4, 5%);
+        background-position: center center;
+        background-repeat: no-repeat;
         border-left: 1px solid darken(#f6efd4, 20%);
-        color: darken(#F6EFD4, 80%);
-        float: right;
-        letter-spacing: 1px;
-        padding: lh(.75);
-        text-transform: uppercase;
         cursor: pointer;
+        display: table-cell;
+        padding: 14px;
+        text-indent: -9999px;
+        width: 72px;
 
         &:hover {
           text-decoration: none;
           color: darken(#F6EFD4, 60%);
           text-decoration: none;
-          background: none;
+          background-color: none;
         }
       }
+
+        &.prev {
+          background-image: url('/static/images/sequence-nav/previous-icon.png');
+
+          &:hover {
+            background-color: none;
+          }
+        }
+
+        &.next {
+          background-image: url('/static/images/sequence-nav/next-icon.png');
+
+          &:hover {
+            background-color: none;
+          }
+        }
     }
   }
 }

seq_module.html

@@ -6,8 +6,8 @@
   </ol>
 
   <ul>
-    <li id="${ id }next" class="next">Next</li>
     <li id="${ id }prev" class="prev">Previous</li>
+    <li id="${ id }next" class="next">Next</li>
   </ul>
 </nav>