Reset some styles for the textbook

lms/static/sass/course/_info.scss

@@ -20,7 +20,7 @@ div.info-wrapper {
 
       > li {
         @extend .clearfix;
-        border-bottom: 1px solid #e3e3e3;
+        border-bottom: 1px solid lighten($border-color, 10%);
         margin-bottom: lh();
         padding-bottom: lh(.5);
         list-style-type: disk;
@@ -101,8 +101,7 @@ div.info-wrapper {
       li {
         @extend .clearfix;
         background: none;
-        border-bottom: 1px solid #d3d3d3;
-        @include box-shadow(0 1px 0 #eee);
+        border-bottom: 1px solid $border-color;
         @include box-sizing(border-box);
         padding: em(7) lh(.75);
         position: relative;
@@ -123,7 +122,7 @@ div.info-wrapper {
 
           li {
             border-bottom: 0;
-            border-top: 1px solid #d3d3d3;
+            border-top: 1px solid $border-color;
             @include box-shadow(inset 0 1px 0 #eee);
             padding-left: lh(1.5);
             font-size: 1em;

lms/static/sass/course/_textbook.scss

@@ -7,7 +7,7 @@ div.book-wrapper {
     @include box-sizing(border-box);
 
     ul#booknav {
-      font-size: 12px;
+      font-size: $body-font-size;
 
       a {
         color: #000;
@@ -39,8 +39,7 @@ div.book-wrapper {
       }
 
       > li {
-        border-bottom: 1px solid #d3d3d3;
-        @include box-shadow(0 1px 0 #eee);
+        border-bottom: 1px solid $border-color;
         padding: 7px 7px 7px 30px;
       }
     }
@@ -48,9 +47,11 @@ div.book-wrapper {
 
   section.book {
     @extend .content;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-top: 0;
 
     nav {
-      @extend .topbar;
       @extend .clearfix;
 
       a {
@@ -62,32 +63,41 @@ div.book-wrapper {
         @extend .clearfix;
 
         li {
+          position: absolute;
+          height: 100%;
+          width: flex-grid(2, 8);
 
-          &.last {
-            display: block;
-            float: left;
+          a {
+            display: table;
+            @include box-sizing(border-box);
+            height: 100%;
+            width: 100%;
+            padding-top: 200%;
+            vertical-align: middle;
+            @include transition;
+            background: rgba(#000, .7);
+            opacity: 0;
+            filter: alpha(opacity=0);
 
-            a {
-              border-left: 0;
-              border-right: 1px solid darken(#f6efd4, 20%);
-              @include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%));
+            &:hover {
+              opacity: 1;
+              filter: alpha(opacity=100);
             }
           }
 
-          &.next {
-            display: block;
-            float: right;
+          &.last {
+            left: 0;
           }
 
-          &:hover {
-            background: none;
+          &.next {
+            right: 0;
           }
+
         }
       }
 
       &.bottom-nav {
         border-bottom: 0;
-        border-top: 1px solid #EDDFAA;
         margin-bottom: -(lh());
         margin-top: lh();
       }
@@ -95,9 +105,10 @@ div.book-wrapper {
 
     section.page {
       text-align: center;
+      position: relative;
+      border: 1px solid $border-color;
 
       img {
-        border: 1px solid $border-color;
         max-width: 100%;
       }
     }

lms/static/sass/course/base/_extends.scss

@@ -51,7 +51,6 @@ h1.top-header {
 
 .sidebar {
   border-right: 1px solid #C8C8C8;
-  @include box-shadow(inset -1px 0 0 #e6e6e6);
   @include box-sizing(border-box);
   display: table-cell;
   font-family: $sans-serif;

lms/templates/staticbook.html

@@ -89,17 +89,6 @@ $("#open_close_accordion a").click(function(){
         </nav>
 
         <img id="bookpage" src="${ settings.BOOK_URL }p${ "%03i"%(page) }.png">
-
-        <nav class="bottom-nav">
-          <ul>
-            <li class="last">
-              <a href="javascript:prev_page()">Previous page</a>
-            </li>
-            <li class="next">
-              <a href="javascript:next_page()">Next page</a>
-            </li>
-          </ul>
-        </nav>
       </section>
     </section>
   </div>