Redesign sequence bottom arrows

templates/sass/courseware/_sequence-nav.scss

@@ -237,24 +237,18 @@ nav.sequence-nav {
 section.course-content {
   position: relative;
 
-  div#seq_content {
-    margin-bottom: 60px;
-  }
-
   nav.sequence-bottom {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    margin-left: -50px;
+    margin: lh(2) 0 0;
+    text-align: center;
 
     ul {
       @extend .clearfix;
       background-color: darken(#F6EFD4, 5%);
       background-color: darken($cream, 5%);
       border: 1px solid darken(#f6efd4, 20%);
-      border-bottom: 0;
-      @include border-radius(3px 3px 0 0);
+      @include border-radius(3px);
       @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
+      @include inline-block();
 
       li {
         float: left;
@@ -267,15 +261,13 @@ section.course-content {
             background-repeat: no-repeat;
             border-bottom: none;
             display: block;
-            display: block;
-            padding: lh(.75) 4px;
+            padding: lh(.5) 4px;
             text-indent: -9999px;
             @include transition(all, .4s, $ease-in-out-quad);
             width: 45px;
 
             &:hover {
               background-color: darken($cream, 10%);
-              color: darken(#F6EFD4, 60%);
               color: darken($cream, 60%);
               opacity: .5;
               text-decoration: none;
@@ -291,6 +283,7 @@ section.course-content {
         &.prev {
           a {
             background-image: url('/static/images/sequence-nav/previous-icon.png');
+            border-right: 1px solid darken(#f6efd4, 20%);
 
             &:hover {
               background-color: none;