Added style for video and sequence

--HG--
branch : kf-refactor

sass/_courseware.scss

@@ -35,12 +35,12 @@ div.course-wrapper {
         }
 
         &.ui-state-active {
+          @include box-shadow(none);
           background: none;
-          border-bottom: 1px solid #aaa;
           border: 0;
+          border-bottom: 1px solid #aaa;
           color: #000;
           font-weight: bold;
-          @include box-shadow(none);
 
           a {
             color: #000;
@@ -53,9 +53,9 @@ div.course-wrapper {
       @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;
+      border-top: 1px solid #c3c3c3;
+      border: none;
       font-size: 12px;
       margin: 0;
 
@@ -73,5 +73,85 @@ div.course-wrapper {
     padding: $gw-gutter;
     vertical-align: top;
     width: grid-width(9);
+
+    ol.vert-mod {
+      li {
+        @extend .clearfix;
+      }
+    }
+
+    ol.sequence-nav {
+      margin-bottom: $body-line-height;
+
+      li {
+        cursor: pointer;
+        display: table-cell;
+        min-width: 30px;
+        min-height: 30px;
+        padding: 0 10px;
+      }
+    }
+
+    div.video-wrapper {
+      float: left;
+      width: 640px;
+      min-height: 500px;
+
+      section {
+        ul {
+          display: inline-block;
+
+          li {
+            margin-top: 5px;
+            display: inline-block;
+            cursor: pointer;
+
+            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 {
+      width: 220px;
+      margin-left: 20px;
+      float: left;
+
+      li {
+        margin-bottom: 8px;
+        cursor: pointer;
+
+        &.current {
+          background-color: #f3f3f3;
+        }
+
+        &:hover {
+          color: $mit-red;
+        }
+      }
+    }
   }
 }

sass/_layout.scss

@@ -18,7 +18,6 @@ html {
         @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 darken($mit-red, 5%);
@@ -28,13 +27,15 @@ html {
           padding: 15px $gw-gutter 15px 0;
           display: block;
           float: left;
-          color: #fff;
+          color: #000;
+          text-shadow: 0 1px 0 lighten($mit-red, 10%);
         }
 
         nav {
           float: left;
           display: block;
           margin: 0;
+          text-shadow: 0 -1px 0 darken($mit-red, 10%);
 
           ul {
             @extend .clearfix;

sass/_local.scss

@@ -12,10 +12,6 @@
     margin-right: 0px;
 }
 
-#bodyContent {
-    width: 100%;
-}
-
 .bordered { border: 1px solid #AAAAAA; border-style : dotted; } 
 
 .seq_problem_visited    {     background-color: #ccccaa;}

sass/_theme.scss

@@ -140,10 +140,6 @@ a:hover {
   background: transparent url( images/css/page-bg.jpg ) no-repeat center top;
 }
 
-
-
-
-
 #container {
   margin:0 auto;
   width:800px;
@@ -184,7 +180,7 @@ a:hover {
 #sidebar ul.vmenu {
   list-style: none;
   text-align: left;
-  margin: 7px 0px 8px 0px; 
+  margin: 7px 0px 8px 0px;
   padding: 0;
   text-decoration: none;	
   border-top: 1px solid #eeeeee;

seq_module.html

@@ -1,11 +1,13 @@
-% for t in range(1,1+len(items)):
-<ol>
-  <li class="seq_inactive" id="tt_${ t }" height=10>&nbsp;</li>
-</ol>
-% endfor
+<ol class="sequence-nav">
+
+  % for t in range(1,1+len(items)):
+  <li class="seq_inactive" id="tt_${ t }">&nbsp;</li>
+  % endfor
+
+  <li id="${ id }prev">Previous</li>
+  <li id="${ id }next">Next</li>
+</ol>
 
-<div id="${ id }prev">Previous</div>
-<div id="${ id }next">Next</div>
 
 <!-- <td colspan=${ len(items) }> -->
   <div id="seq_content"></div>

staticbook.html

@@ -48,7 +48,7 @@ function next_page() {
         <nav>
           <ul>
             <li class="last">
-              <a href="javascript:prev_page()">Last page</a>
+              <a href="javascript:prev_page()">Previous page</a>
             </li>
             <li class="next">
               <a href="javascript:next_page()">Next page</a>

vert_module.html

@@ -1,4 +1,4 @@
-<ol>
+<ol class="vert-mod">
 % for t in items:
   <li id="vert-${items.index(t)}">
     ${t[1]['content']}

video.html

@@ -1,35 +1,37 @@
-<div id="ytapiplayer">
-  <p>You need Flash player 8+ and JavaScript enabled to view this video.</p>
+<div class="video-wrapper">
+  <div id="ytapiplayer">
+    <p>You need Flash player 8+ and JavaScript enabled to view this video.</p>
+  </div>
+
+  <section class="video-controls">
+    <ul>
+      <li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
+      <li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
+    </ul>
+
+    <div id=slider></div>
+    <div id="vidtime">0:00/0:00</div>
+    <div id="video_speeds"></div>
+  </section>
 </div>
 
-<ol>
-  <li id=stt_n5><div id=std_n7 onclick="title_seek(-7);">&nbsp;</div></li>
-  <li id=stt_n4><div id=std_n6 onclick="title_seek(-6);">&nbsp;</div></li>
-  <li id=stt_n4><div id=std_n5 onclick="title_seek(-5);">&nbsp;</div></li>
-  <li id=stt_n4><div id=std_n4 onclick="title_seek(-4);">&nbsp;</div></li>
-  <li id=stt_n3><div id=std_n3 onclick="title_seek(-3);">&nbsp;</div></li>
-  <li id=stt_n2><div id=std_n2 onclick="title_seek(-2);">&nbsp;</div></li>
-  <li id=stt_n1><div id=std_n1 onclick="title_seek(-1);">&nbsp;</div></li>
-  <li id=stt_0 class="current"><div id=std_0 onclick="title_seek(0);">&nbsp;</div></li>
-  <li id=stt_p1><div id=std_p1 onclick="title_seek( 1);">&nbsp;</div></li>
-  <li id=stt_p2><div id=std_p2 onclick="title_seek( 2);">&nbsp;</div></li>
-  <li id=stt_p3><div id=std_p3 onclick="title_seek( 3);">&nbsp;</div></li>
-  <li id=stt_p4><div id=std_p4 onclick="title_seek( 4);">&nbsp;</div></li>
-  <li id=stt_p5><div id=std_p5 onclick="title_seek( 5);">&nbsp;</div></li>
-  <li id=stt_p6><div id=std_p7 onclick="title_seek( 6);">&nbsp;</div></li>
-  <li id=stt_p6><div id=std_p7 onclick="title_seek( 7);">&nbsp;</div></li>
-  <li id=stt_p6><div id=std_p7 onclick="title_seek( 8);">&nbsp;</div></li>
+<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>
+  <li id=stt_n4><div id=std_n5 onclick="title_seek(-5);"></div></li>
+  <li id=stt_n4><div id=std_n4 onclick="title_seek(-4);"></div></li>
+  <li id=stt_n3><div id=std_n3 onclick="title_seek(-3);"></div></li>
+  <li id=stt_n2><div id=std_n2 onclick="title_seek(-2);"></div></li>
+  <li id=stt_n1><div id=std_n1 onclick="title_seek(-1);"></div></li>
+  <li id=stt_0 class="current"><div id=std_0 onclick="title_seek(0);"></div></li>
+  <li id=stt_p1><div id=std_p1 onclick="title_seek( 1);"></div></li>
+  <li id=stt_p2><div id=std_p2 onclick="title_seek( 2);"></div></li>
+  <li id=stt_p3><div id=std_p3 onclick="title_seek( 3);"></div></li>
+  <li id=stt_p4><div id=std_p4 onclick="title_seek( 4);"></div></li>
+  <li id=stt_p5><div id=std_p5 onclick="title_seek( 5);"></div></li>
+  <li id=stt_p6><div id=std_p7 onclick="title_seek( 6);"></div></li>
+  <li id=stt_p6><div id=std_p7 onclick="title_seek( 7);"></div></li>
+  <li id=stt_p6><div id=std_p7 onclick="title_seek( 8);"></div></li>
 </ol>
 
-<section class="video-controls">
-  <ul>
-    <li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
-    <li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
-  </ul>
-
-  <div id=slider></div>
-  <div id="vidtime">0:00/0:00</div>
-  <div id="video_speeds"></div>
-</section>
-