Added some slight style and new typeface

--HG--
branch : kf-refactor

homework.html

 <h1> ${ homework['name']} </h1>
 
+<ol>
 % for problem in homework['problems']:
-  <h2> ${ problem['name'] } </h2>
-  ${ problem['html'] }
-  <br>
-  <input type="hidden" name="problem_id" value="${ problem['name'] }"> 
-  <input type="submit" value="Check">
+  <li>
+    <h2> ${ problem['name'] } </h2>
+    ${ problem['html'] }
+    <br>
+    <input type="hidden" name="problem_id" value="${ problem['name'] }"> 
+    <input type="submit" value="Check">
+  </li>
 % endfor
+</ol>
 

sass/_base-variables.scss

@@ -17,7 +17,7 @@
 // ---------------------------------------- //
 
 // fonts
-$body-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;;
+$body-font-family: "Droid Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;;
 $body-font-size: 14px;
 
 // grid

sass/_courseware.scss

@@ -4,7 +4,6 @@ div#accordion {
   border-right: 1px solid #d3d3d3;
   display: table-cell;
   font-family: $body-font-family;
-  // padding: $body-line-height 0;
   text-shadow: 0 1px 0 #f6f6f6;
   vertical-align: top;
   width: 280px;
@@ -33,6 +32,7 @@ div#accordion {
 
       &.ui-state-active {
         background: none;
+        border-bottom: 1px solid #aaa;
         border: 0;
         color: #000;
         font-weight: bold;
@@ -46,8 +46,12 @@ div#accordion {
   }
 
   ul.ui-accordion-content {
+    @include border-radius(0);
+    @include box-shadow( inset -1px 0 0 #e6e6e6);
     background: #d6d6d6;
     border: none;
+    border-top: 1px solid #c3c3c3;
+    border-bottom: 1px solid #c3c3c3;
     font-size: 12px;
     margin: 0;
   }
@@ -56,6 +60,6 @@ div#accordion {
 section.course-content {
   @include box-sizing(border-box);
   display: table-cell;
-  padding: $gw-gutter 0 $gw-gutter $gw-gutter;
+  padding: $gw-gutter;
   vertical-align: top;
 }

sass/_font-face.scss

+@font-face {
+  font-family: 'Droid Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciL3hpw3pgy2gAi-Ip7WPMi0.woff') format('woff');
+}
+@font-face {
+  font-family: 'Droid Sans';
+  font-style: normal;
+  font-weight: bold;
+  src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('http://themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMXbFhgvWbfSbdVg11QabG8w.woff') format('woff');
+}

sass/_layout.scss

@@ -12,23 +12,23 @@ html {
       @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 1px 1px #ccc);
       @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
       border-bottom: 1px solid darken($mit-red, 10%);
-      z-index: 99;
 
       header {
         @extend .clearfix;
         @extend .wrapper;
         @include box-sizing(border-box);
         padding: 0 $body-line-height;
+        text-shadow: 0 -1px 0 darken($mit-red, 10%);
 
         h1 {
-          border-right: 1px solid $mit-red;
+          border-right: 1px solid darken($mit-red, 5%);
           font-size: $body-font-size;
           font-weight: bold;
           margin: 0 $gw-gutter 0 0;
           padding: 15px $gw-gutter 15px 0;
           display: block;
           float: left;
-          text-shadow: 0 1px 0 lighten($mit-red, 10%);
+          color: #fff;
         }
 
         nav {
@@ -49,7 +49,12 @@ html {
 
               a {
                 color: #fff;
-                text-shadow: 0 -1px 0 darken($mit-red, 10%);
+
+                &:hover {
+                  color: rgba(#fff, .7);
+                  background-color: none;
+                  text-decoration: none;
+                }
               }
             }
           }
@@ -60,12 +65,11 @@ html {
     section.main-content {
       @extend .clearfix;
       @extend .wrapper;
-      @include box-shadow(0 0px 1px #ccc);
+      @include box-shadow(0 1px 0 #fff);
       @include box-sizing(border-box);
       background: #fff;
       border-top: 0;
       border: 1px solid #ccc;
-      z-index: 0;
     }
 
     img {

sass/application.scss

 @import "bourbon/bourbon";
 @import "reset";
+@import "font-face";
 
 // Base layout
 @import "base-variables", "base-extends", "base";

seq_module.html

-    <table width=800 >
-      <tr><td></td>
 % for t in range(1,1+len(items)):
-<td class="seq_inactive" id="tt_${ t }" height=10>&nbsp;</td>
+<ol>
+  <li class="seq_inactive" id="tt_${ t }" height=10>&nbsp;</li>
+</ol>
 % endfor
 
-<td></td></tr>
-<tr><td align=center valign=top><br><br><br><br><br><br><br><br><br><br><br><div id="${ id }prev"><span class="ui-icon ui-icon-circle-triangle-w"></span></div></td>
-<td colspan=${ len(items) }><div id="seq_content"></div></td>
-<td align=center valign=top><br><br><br><br><br><br><br><br><br><br><br><div id="${ id }next"><span class="ui-icon ui-icon-circle-triangle-e">&nbsp;</span></div></td>
-</tr>
-      <tr></tr>
-    </table>
+<div id="${ id }prev">Previous</div>
+<div id="${ id }next">Next</div>
+
+<!-- <td colspan=${ len(items) }> -->
+  <div id="seq_content"></div>
+<!-- </td> -->
 

vert_module.html

-<div>
+<ol>
 % for t in items:
-  <div id="vert-${items.index(t)}">
-  ${t[1]['content']}
-  </div>
+  <li id="vert-${items.index(t)}">
+    ${t[1]['content']}
+  </li>
 % endfor
-</div>
+</ol>