Porting latest changes from ui_prototype

cms/static/css/base-style.css

@@ -191,13 +191,28 @@ body {
         clear: both; }
       body > header nav h2 {
         font-size: 14px;
-        text-transform: uppercase; }
+        text-transform: uppercase;
+        float: left; }
+      body > header nav a.new-module {
+        float: right; }
+  body.content section.main-content {
+    border-left: 2px solid #000;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 74.423%;
+    float: left;
+    -webkit-box-shadow: -2px 0 3px #dddddd;
+    -moz-box-shadow: -2px 0 3px #dddddd;
+    box-shadow: -2px 0 3px #dddddd; }
 
 a {
   text-decoration: none;
   color: #888; }
 
-input[type="submit"], .button, section.week-edit > header a, section.week-new > header a {
+input[type="submit"], .button, section.cal section.new-section > a, section.week-edit > header a,
+section.week-new > header a,
+section.sequence-edit > header a, section.video-new > section section.upload a.upload-button, section.video-edit > section section.upload a.upload-button, section.video-new > section a.save-update, section.video-edit > section a.save-update, section.problem-new > section a.save, section.problem-edit > section a.save {
   border: 1px solid #ccc;
   background: #efefef;
   -webkit-border-radius: 3px;
@@ -221,17 +236,36 @@ section.cal {
     clear: both; }
   section.cal > header {
     zoom: 1;
-    margin-bottom: 10px; }
+    margin-bottom: 10px;
+    background: #efefef;
+    border: 1px solid #ddd; }
     section.cal > header:before, section.cal > header:after {
       content: "";
       display: table; }
     section.cal > header:after {
       clear: both; }
-    section.cal > header h1 {
-      float: left;
-      font-size: 18px; }
+    section.cal > header h2 {
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-size: 14px;
+      padding: 6px;
+      margin-left: 6px;
+      font-size: 12px; }
     section.cal > header ul {
-      float: right; }
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto; }
       section.cal > header ul li {
         display: -moz-inline-box;
         -moz-box-orient: vertical;
@@ -239,42 +273,37 @@ section.cal {
         vertical-align: baseline;
         zoom: 1;
         *display: inline;
-        *vertical-align: auto; }
+        *vertical-align: auto;
+        margin-left: 6px;
+        padding-left: 6px;
+        border-left: 1px solid #ddd;
+        padding: 6px; }
         section.cal > header ul li a {
-          padding: 6px;
-          border: 1px solid #ddd;
-          display: block;
-          -webkit-border-radius: 3px;
-          -moz-border-radius: 3px;
-          -ms-border-radius: 3px;
-          -o-border-radius: 3px;
-          border-radius: 3px;
-          background: #efefef; }
-        section.cal > header ul li.dropdown {
-          position: relative; }
-          section.cal > header ul li.dropdown ul {
-            display: none;
-            position: absolute;
-            background: #fff;
-            border: 1px solid #ddd; }
-            section.cal > header ul li.dropdown ul li {
-              padding: 6px;
-              display: block;
-              border-top: 1px solid transparent;
-              border-bottom: 1px solid transparent; }
-              section.cal > header ul li.dropdown ul li:hover {
-                background-color: #efefef;
-                border-top: 1px solid #ddd;
-                border-bottom: 1px solid #ddd; }
-          section.cal > header ul li.dropdown:hover ul {
-            display: block; }
-          section.cal > header ul li.dropdown:hover a {
-            -webkit-border-radius: 3px 3px 0 0;
-            -moz-border-radius: 3px 3px 0 0;
-            -ms-border-radius: 3px 3px 0 0;
-            -o-border-radius: 3px 3px 0 0;
-            border-radius: 3px 3px 0 0;
-            border-bottom: 0; }
+          display: -moz-inline-box;
+          -moz-box-orient: vertical;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto; }
+        section.cal > header ul li ul {
+          display: -moz-inline-box;
+          -moz-box-orient: vertical;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto; }
+          section.cal > header ul li ul li {
+            display: -moz-inline-box;
+            -moz-box-orient: vertical;
+            display: inline-block;
+            vertical-align: baseline;
+            zoom: 1;
+            *display: inline;
+            *vertical-align: auto;
+            padding: 0;
+            border-left: 0; }
   section.cal ol {
     list-style: none;
     zoom: 1;
@@ -297,75 +326,26 @@ section.cal {
       box-sizing: border-box;
       float: left;
       width: 25.0%; }
-      section.cal ol > li:last-child {
-        text-align: center;
-        background: #eee;
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box; }
-        section.cal ol > li:last-child p {
-          width: 100%;
-          height: 100%;
-          -webkit-box-sizing: border-box;
-          -moz-box-sizing: border-box;
-          box-sizing: border-box; }
-          section.cal ol > li:last-child p a {
-            display: block;
-            width: 100%;
-            height: 100%; }
-        section.cal ol > li:last-child section.new-week header {
-          background: #fff;
-          text-align: left; }
-        section.cal ol > li:last-child section.new-week form {
-          background: #fff;
-          width: 50%;
-          padding: 6px;
-          border: 1px solid #000;
-          margin: 0 auto;
-          -webkit-box-shadow: 0 0 2px #333333;
-          -moz-box-shadow: 0 0 2px #333333;
-          box-shadow: 0 0 2px #333333;
-          position: relative; }
-          section.cal ol > li:last-child section.new-week form:before {
-            background: #fff;
-            border-left: 1px solid #000;
-            border-top: 1px solid #000;
-            content: "  ";
-            display: block;
-            height: 10px;
-            left: 50%;
-            position: absolute;
-            top: -6px;
-            -webkit-transform: rotate(45deg);
-            -moz-transform: rotate(45deg);
-            -ms-transform: rotate(45deg);
-            -o-transform: rotate(45deg);
-            transform: rotate(45deg);
-            width: 10px;
-            z-index: 0; }
-          section.cal ol > li:last-child section.new-week form select {
-            margin-bottom: 6px;
-            width: 100%; }
-            section.cal ol > li:last-child section.new-week form select option {
-              padding: 10px 0 !important; }
-          section.cal ol > li:last-child section.new-week form input[type="submit"] {
-            display: block;
-            margin-bottom: 6px;
-            width: 100%; }
-          section.cal ol > li:last-child section.new-week form a:first-child {
-            float: left; }
-          section.cal ol > li:last-child section.new-week form a:last-child {
-            float: right; }
       section.cal ol > li header {
         border-bottom: 1px solid #000;
-        -webkit-box-shadow: 0 1px 2px #cccccc;
-        -moz-box-shadow: 0 1px 2px #cccccc;
-        box-shadow: 0 1px 2px #cccccc;
+        -webkit-box-shadow: 0 1px 2px #aaaaaa;
+        -moz-box-shadow: 0 1px 2px #aaaaaa;
+        box-shadow: 0 1px 2px #aaaaaa;
         display: block;
-        margin-bottom: 2px;
-        padding: 6px; }
+        margin-bottom: 2px; }
         section.cal ol > li header h1 {
-          font-size: 14px; }
+          font-size: 14px;
+          text-transform: uppercase;
+          border-bottom: 1px solid #ccc;
+          padding: 6px; }
+          section.cal ol > li header h1 a {
+            color: #000;
+            display: block; }
+        section.cal ol > li header ul li {
+          background: #fff;
+          color: #888;
+          border-bottom: 0;
+          font-size: 12px; }
       section.cal ol > li ul {
         list-style: none;
         margin-bottom: 1px; }
@@ -373,8 +353,104 @@ section.cal {
           background: #efefef;
           border-bottom: 1px solid #666;
           padding: 6px; }
-          section.cal ol > li ul li.goal {
-            background: #fff; }
+          section.cal ol > li ul li.create-module {
+            position: relative; }
+            section.cal ol > li ul li.create-module > div {
+              display: none;
+              position: absolute;
+              top: 30px;
+              width: 90%;
+              background: rgba(0, 0, 0, 0.8);
+              padding: 10px;
+              -webkit-box-sizing: border-box;
+              -moz-box-sizing: border-box;
+              box-sizing: border-box;
+              -webkit-border-radius: 3px;
+              -moz-border-radius: 3px;
+              -ms-border-radius: 3px;
+              -o-border-radius: 3px;
+              border-radius: 3px;
+              z-index: 99; }
+              section.cal ol > li ul li.create-module > div ul li {
+                border-bottom: 0;
+                background: none; }
+                section.cal ol > li ul li.create-module > div ul li input {
+                  width: 100%;
+                  -webkit-box-sizing: border-box;
+                  -moz-box-sizing: border-box;
+                  box-sizing: border-box;
+                  border-color: #000;
+                  padding: 6px; }
+                section.cal ol > li ul li.create-module > div ul li select {
+                  width: 100%;
+                  -webkit-box-sizing: border-box;
+                  -moz-box-sizing: border-box;
+                  box-sizing: border-box; }
+                  section.cal ol > li ul li.create-module > div ul li select option {
+                    font-size: 14px; }
+                section.cal ol > li ul li.create-module > div ul li a {
+                  float: right; }
+                  section.cal ol > li ul li.create-module > div ul li a:first-child {
+                    float: left; }
+            section.cal ol > li ul li.create-module:hover div {
+              display: block; }
+  section.cal section.new-section {
+    margin-top: 10px; }
+    section.cal section.new-section > a {
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto; }
+    section.cal section.new-section section {
+      display: none; }
+      section.cal section.new-section section header {
+        background: #fff;
+        text-align: left; }
+      section.cal section.new-section section form {
+        background: #fff;
+        width: 50%;
+        padding: 6px;
+        border: 1px solid #000;
+        margin: 0 auto;
+        -webkit-box-shadow: 0 0 2px #333333;
+        -moz-box-shadow: 0 0 2px #333333;
+        box-shadow: 0 0 2px #333333;
+        position: relative; }
+        section.cal section.new-section section form:before {
+          background: #fff;
+          border-left: 1px solid #000;
+          border-top: 1px solid #000;
+          content: "  ";
+          display: block;
+          height: 10px;
+          left: 50%;
+          position: absolute;
+          top: -6px;
+          -webkit-transform: rotate(45deg);
+          -moz-transform: rotate(45deg);
+          -ms-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          width: 10px;
+          z-index: 0; }
+        section.cal section.new-section section form select {
+          margin-bottom: 6px;
+          width: 100%; }
+          section.cal section.new-section section form select option {
+            padding: 10px 0 !important; }
+        section.cal section.new-section section form input[type="submit"] {
+          display: block;
+          margin-bottom: 6px;
+          width: 100%; }
+        section.cal section.new-section section form a:first-child {
+          float: left; }
+        section.cal section.new-section section form a:last-child {
+          float: right; }
+    section.cal section.new-section:hover section {
+      display: block; }
 
 body.content
 section.cal {
@@ -393,31 +469,49 @@ section.cal {
     box-sizing: border-box;
     width: 100%; }
 
-section.week-edit > header, section.week-new > header {
+section.week-edit > header,
+section.week-new > header,
+section.sequence-edit > header {
   border-bottom: 1px solid #ccc;
   zoom: 1;
   padding: 6px; }
-  section.week-edit > header:before, section.week-edit > header:after, section.week-new > header:before, section.week-new > header:after {
+  section.week-edit > header:before, section.week-edit > header:after,
+  section.week-new > header:before,
+  section.week-new > header:after,
+  section.sequence-edit > header:before,
+  section.sequence-edit > header:after {
     content: "";
     display: table; }
-  section.week-edit > header:after, section.week-new > header:after {
+  section.week-edit > header:after,
+  section.week-new > header:after,
+  section.sequence-edit > header:after {
     clear: both; }
-  section.week-edit > header h1, section.week-new > header h1 {
+  section.week-edit > header h1,
+  section.week-new > header h1,
+  section.sequence-edit > header h1 {
     font-size: 18px;
     float: left;
     margin-top: 8px 6px; }
-  section.week-edit > header a, section.week-new > header a {
+  section.week-edit > header a,
+  section.week-new > header a,
+  section.sequence-edit > header a {
     float: right;
     display: block; }
-section.week-edit section header, section.week-new section header {
+section.week-edit section header,
+section.week-new section header,
+section.sequence-edit section header {
   background: #666;
   color: #fff;
   padding: 6px;
   border-bottom: 1px solid #333;
   -webkit-font-smoothing: antialiased; }
-  section.week-edit section header h2, section.week-new section header h2 {
+  section.week-edit section header h2,
+  section.week-new section header h2,
+  section.sequence-edit section header h2 {
     font-size: 14px; }
-section.week-edit section.sidebar, section.week-new section.sidebar {
+section.week-edit section.sidebar,
+section.week-new section.sidebar,
+section.sequence-edit section.sidebar {
   width: 34.368%;
   float: left;
   background: #ccc;
@@ -425,49 +519,85 @@ section.week-edit section.sidebar, section.week-new section.sidebar {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }
-  section.week-edit section.sidebar section, section.week-new section.sidebar section {
+  section.week-edit section.sidebar section,
+  section.week-new section.sidebar section,
+  section.sequence-edit section.sidebar section {
     height: 50%; }
-    section.week-edit section.sidebar section > ul, section.week-new section.sidebar section > ul {
+    section.week-edit section.sidebar section > ul,
+    section.week-new section.sidebar section > ul,
+    section.sequence-edit section.sidebar section > ul {
       list-style: none; }
-      section.week-edit section.sidebar section > ul > li, section.week-new section.sidebar section > ul > li {
+      section.week-edit section.sidebar section > ul > li,
+      section.week-new section.sidebar section > ul > li,
+      section.sequence-edit section.sidebar section > ul > li {
         padding: 6px;
         border-bottom: 1px solid #666;
         background: #eee; }
-        section.week-edit section.sidebar section > ul > li.new-module, section.week-new section.sidebar section > ul > li.new-module {
+        section.week-edit section.sidebar section > ul > li.new-module,
+        section.week-new section.sidebar section > ul > li.new-module,
+        section.sequence-edit section.sidebar section > ul > li.new-module {
           position: relative; }
-          section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown, section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown {
+          section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown,
+          section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown,
+          section.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown {
             list-style: none; }
-            section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown li, section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown li {
+            section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown li,
+            section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown li,
+            section.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown li {
               display: none; }
-              section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown li:first-child, section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown li:first-child {
+              section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown li:first-child,
+              section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown li:first-child,
+              section.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown li:first-child {
                 display: block; }
-            section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li, section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown:hover li {
+            section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li,
+            section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown:hover li,
+            section.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li {
               display: block;
               padding: 6px 0; }
-              section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child, section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child {
+              section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child,
+              section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child,
+              section.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child {
                 padding-top: 0; }
-    section.week-edit section.sidebar section p, section.week-new section.sidebar section p {
+    section.week-edit section.sidebar section p,
+    section.week-new section.sidebar section p,
+    section.sequence-edit section.sidebar section p {
       padding: 6px;
       border-bottom: 1px solid #666; }
-section.week-edit section.weeks-content, section.week-new section.weeks-content {
+section.week-edit section.weeks-content,
+section.week-new section.weeks-content,
+section.sequence-edit section.weeks-content {
   width: 65.632%;
   float: left;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }
-  section.week-edit section.weeks-content header, section.week-new section.weeks-content header {
+  section.week-edit section.weeks-content header,
+  section.week-new section.weeks-content header,
+  section.sequence-edit section.weeks-content header {
     zoom: 1; }
-    section.week-edit section.weeks-content header:before, section.week-edit section.weeks-content header:after, section.week-new section.weeks-content header:before, section.week-new section.weeks-content header:after {
+    section.week-edit section.weeks-content header:before, section.week-edit section.weeks-content header:after,
+    section.week-new section.weeks-content header:before,
+    section.week-new section.weeks-content header:after,
+    section.sequence-edit section.weeks-content header:before,
+    section.sequence-edit section.weeks-content header:after {
       content: "";
       display: table; }
-    section.week-edit section.weeks-content header:after, section.week-new section.weeks-content header:after {
+    section.week-edit section.weeks-content header:after,
+    section.week-new section.weeks-content header:after,
+    section.sequence-edit section.weeks-content header:after {
       clear: both; }
-    section.week-edit section.weeks-content header h2, section.week-new section.weeks-content header h2 {
+    section.week-edit section.weeks-content header h2,
+    section.week-new section.weeks-content header h2,
+    section.sequence-edit section.weeks-content header h2 {
       float: left; }
-    section.week-edit section.weeks-content header form, section.week-new section.weeks-content header form {
+    section.week-edit section.weeks-content header form,
+    section.week-new section.weeks-content header form,
+    section.sequence-edit section.weeks-content header form {
       float: right;
       margin: -2px 0; }
-      section.week-edit section.weeks-content header form input, section.week-new section.weeks-content header form input {
+      section.week-edit section.weeks-content header form input,
+      section.week-new section.weeks-content header form input,
+      section.sequence-edit section.weeks-content header form input {
         border: 1px solid #000;
         background: #ddd;
         padding: 2px 4px;
@@ -476,18 +606,30 @@ section.week-edit section.weeks-content, section.week-new section.weeks-content
         -ms-border-radius: 2px;
         -o-border-radius: 2px;
         border-radius: 2px; }
-  section.week-edit section.weeks-content section.filters, section.week-new section.weeks-content section.filters {
+  section.week-edit section.weeks-content section.filters,
+  section.week-new section.weeks-content section.filters,
+  section.sequence-edit section.weeks-content section.filters {
     border-bottom: 1px solid #999; }
-    section.week-edit section.weeks-content section.filters ul, section.week-new section.weeks-content section.filters ul {
+    section.week-edit section.weeks-content section.filters ul,
+    section.week-new section.weeks-content section.filters ul,
+    section.sequence-edit section.weeks-content section.filters ul {
       zoom: 1;
       list-style: none;
       padding: 6px; }
-      section.week-edit section.weeks-content section.filters ul:before, section.week-edit section.weeks-content section.filters ul:after, section.week-new section.weeks-content section.filters ul:before, section.week-new section.weeks-content section.filters ul:after {
+      section.week-edit section.weeks-content section.filters ul:before, section.week-edit section.weeks-content section.filters ul:after,
+      section.week-new section.weeks-content section.filters ul:before,
+      section.week-new section.weeks-content section.filters ul:after,
+      section.sequence-edit section.weeks-content section.filters ul:before,
+      section.sequence-edit section.weeks-content section.filters ul:after {
         content: "";
         display: table; }
-      section.week-edit section.weeks-content section.filters ul:after, section.week-new section.weeks-content section.filters ul:after {
+      section.week-edit section.weeks-content section.filters ul:after,
+      section.week-new section.weeks-content section.filters ul:after,
+      section.sequence-edit section.weeks-content section.filters ul:after {
         clear: both; }
-      section.week-edit section.weeks-content section.filters ul li, section.week-new section.weeks-content section.filters ul li {
+      section.week-edit section.weeks-content section.filters ul li,
+      section.week-new section.weeks-content section.filters ul li,
+      section.sequence-edit section.weeks-content section.filters ul li {
         display: -moz-inline-box;
         -moz-box-orient: vertical;
         display: inline-block;
@@ -495,95 +637,201 @@ section.week-edit section.weeks-content, section.week-new section.weeks-content
         zoom: 1;
         *display: inline;
         *vertical-align: auto; }
-        section.week-edit section.weeks-content section.filters ul li.advanced, section.week-new section.weeks-content section.filters ul li.advanced {
+        section.week-edit section.weeks-content section.filters ul li.advanced,
+        section.week-new section.weeks-content section.filters ul li.advanced,
+        section.sequence-edit section.weeks-content section.filters ul li.advanced {
           float: right; }
-  section.week-edit section.weeks-content section.modules ul, section.week-new section.weeks-content section.modules ul {
+  section.week-edit section.weeks-content section.modules ul,
+  section.week-new section.weeks-content section.modules ul,
+  section.sequence-edit section.weeks-content section.modules ul {
     list-style: none; }
-    section.week-edit section.weeks-content section.modules ul li, section.week-new section.weeks-content section.modules ul li {
+    section.week-edit section.weeks-content section.modules ul li,
+    section.week-new section.weeks-content section.modules ul li,
+    section.sequence-edit section.weeks-content section.modules ul li {
       padding: 6px;
       font-weight: bold;
       font-size: 16px;
       border-bottom: 1px solid #333; }
-      section.week-edit section.weeks-content section.modules ul li a, section.week-new section.weeks-content section.modules ul li a {
+      section.week-edit section.weeks-content section.modules ul li a,
+      section.week-new section.weeks-content section.modules ul li a,
+      section.sequence-edit section.weeks-content section.modules ul li a {
         color: #000; }
 
-section.video-new, section.video-edit {
-  position: absolute;
-  top: 80px;
-  right: 0;
-  background: #fff;
-  width: 40.32%;
-  -webkit-box-shadow: 0 0 6px #666666;
-  -moz-box-shadow: 0 0 6px #666666;
-  box-shadow: 0 0 6px #666666;
-  border: 1px solid #333;
-  border-right: 0;
-  z-index: 4; }
-  section.video-new > header, section.video-edit > header {
-    background: #666;
+section.video-new > section section.upload, section.video-edit > section section.upload {
+  padding: 6px;
+  margin-bottom: 10px;
+  border: 1px solid #ddd; }
+  section.video-new > section section.upload a.upload-button, section.video-edit > section section.upload a.upload-button {
+    display: -moz-inline-box;
+    -moz-box-orient: vertical;
+    display: inline-block;
+    vertical-align: baseline;
     zoom: 1;
-    color: #fff;
-    padding: 6px;
-    border-bottom: 1px solid #333;
-    -webkit-font-smoothing: antialiased; }
-    section.video-new > header:before, section.video-new > header:after, section.video-edit > header:before, section.video-edit > header:after {
-      content: "";
-      display: table; }
-    section.video-new > header:after, section.video-edit > header:after {
-      clear: both; }
-    section.video-new > header h2, section.video-edit > header h2 {
-      float: left;
-      font-size: 14px; }
-    section.video-new > header a, section.video-edit > header a {
-      float: right; }
-  section.video-new section ul, section.video-edit section ul {
-    list-style: none; }
-    section.video-new section ul li, section.video-edit section ul li {
-      border-bottom: 1px solid #333;
-      padding: 10px 25px; }
+    *display: inline;
+    *vertical-align: auto; }
+section.video-new > section section.in-use h2, section.video-edit > section section.in-use h2 {
+  font-size: 14px; }
+section.video-new > section section.in-use div, section.video-edit > section section.in-use div {
+  background: #eee;
+  text-align: center;
+  padding: 6px; }
+section.video-new > section a.save-update, section.video-edit > section a.save-update {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+  margin-top: 20px; }
 
-section.problem-new, section.problem-edit {
+section.problem-new > section textarea, section.problem-edit > section textarea {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  width: 100%; }
+section.problem-new > section div.preview, section.problem-edit > section div.preview {
+  background: #eee;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 10px;
+  width: 100%; }
+section.problem-new > section a.save, section.problem-edit > section a.save {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+  margin-top: 20px; }
+
+section.video-new, section.video-edit, section.problem-new, section.problem-edit {
   position: absolute;
-  top: 80px;
+  top: 72px;
   right: 0;
   background: #fff;
-  width: 40.32%;
+  width: 48.845%;
   -webkit-box-shadow: 0 0 6px #666666;
   -moz-box-shadow: 0 0 6px #666666;
   box-shadow: 0 0 6px #666666;
   border: 1px solid #333;
   border-right: 0;
   z-index: 4; }
-  section.problem-new > header, section.problem-edit > header {
+  section.video-new > header, section.video-edit > header, section.problem-new > header, section.problem-edit > header {
     background: #666;
     zoom: 1;
     color: #fff;
     padding: 6px;
     border-bottom: 1px solid #333;
     -webkit-font-smoothing: antialiased; }
-    section.problem-new > header:before, section.problem-new > header:after, section.problem-edit > header:before, section.problem-edit > header:after {
+    section.video-new > header:before, section.video-new > header:after, section.video-edit > header:before, section.video-edit > header:after, section.problem-new > header:before, section.problem-new > header:after, section.problem-edit > header:before, section.problem-edit > header:after {
       content: "";
       display: table; }
-    section.problem-new > header:after, section.problem-edit > header:after {
+    section.video-new > header:after, section.video-edit > header:after, section.problem-new > header:after, section.problem-edit > header:after {
       clear: both; }
-    section.problem-new > header h2, section.problem-edit > header h2 {
+    section.video-new > header h2, section.video-edit > header h2, section.problem-new > header h2, section.problem-edit > header h2 {
       float: left;
       font-size: 14px; }
-    section.problem-new > header a, section.problem-edit > header a {
+    section.video-new > header a, section.video-edit > header a, section.problem-new > header a, section.problem-edit > header a {
+      color: #fff; }
+      section.video-new > header a.save-update, section.video-edit > header a.save-update, section.problem-new > header a.save-update, section.problem-edit > header a.save-update {
+        float: right; }
+      section.video-new > header a.cancel, section.video-edit > header a.cancel, section.problem-new > header a.cancel, section.problem-edit > header a.cancel {
+        float: left; }
+  section.video-new > section, section.video-edit > section, section.problem-new > section, section.problem-edit > section {
+    padding: 20px; }
+    section.video-new > section > header h1, section.video-edit > section > header h1, section.problem-new > section > header h1, section.problem-edit > section > header h1 {
+      font-size: 24px;
+      margin: 12px 0; }
+    section.video-new > section > header section.status-settings ul, section.video-edit > section > header section.status-settings ul, section.problem-new > section > header section.status-settings ul, section.problem-edit > section > header section.status-settings ul {
+      list-style: none;
+      -webkit-border-radius: 2px;
+      -moz-border-radius: 2px;
+      -ms-border-radius: 2px;
+      -o-border-radius: 2px;
+      border-radius: 2px;
+      border: 1px solid #999;
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto; }
+      section.video-new > section > header section.status-settings ul li, section.video-edit > section > header section.status-settings ul li, section.problem-new > section > header section.status-settings ul li, section.problem-edit > section > header section.status-settings ul li {
+        display: -moz-inline-box;
+        -moz-box-orient: vertical;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        border-right: 1px solid #999;
+        padding: 6px; }
+        section.video-new > section > header section.status-settings ul li:last-child, section.video-edit > section > header section.status-settings ul li:last-child, section.problem-new > section > header section.status-settings ul li:last-child, section.problem-edit > section > header section.status-settings ul li:last-child {
+          border-right: 0; }
+        section.video-new > section > header section.status-settings ul li.current, section.video-edit > section > header section.status-settings ul li.current, section.problem-new > section > header section.status-settings ul li.current, section.problem-edit > section > header section.status-settings ul li.current {
+          background: #eee; }
+    section.video-new > section > header section.status-settings a.settings, section.video-edit > section > header section.status-settings a.settings, section.problem-new > section > header section.status-settings a.settings, section.problem-edit > section > header section.status-settings a.settings {
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto;
+      margin: 0 20px;
+      border: 1px solid #999;
+      padding: 6px; }
+    section.video-new > section > header section.status-settings select, section.video-edit > section > header section.status-settings select, section.problem-new > section > header section.status-settings select, section.problem-edit > section > header section.status-settings select {
       float: right; }
-  section.problem-new section ul, section.problem-edit section ul {
-    list-style: none; }
-    section.problem-new section ul li, section.problem-edit section ul li {
-      border-bottom: 1px solid #333;
-      padding: 10px 25px; }
-
-body.content section.main-content {
-  border-left: 2px solid #000;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  width: 74.423%;
-  float: left;
-  -webkit-box-shadow: -2px 0 3px #dddddd;
-  -moz-box-shadow: -2px 0 3px #dddddd;
-  box-shadow: -2px 0 3px #dddddd; }
+    section.video-new > section > header section.meta, section.video-edit > section > header section.meta, section.problem-new > section > header section.meta, section.problem-edit > section > header section.meta {
+      background: #eee;
+      padding: 10px;
+      margin: 20px 0;
+      zoom: 1; }
+      section.video-new > section > header section.meta:before, section.video-new > section > header section.meta:after, section.video-edit > section > header section.meta:before, section.video-edit > section > header section.meta:after, section.problem-new > section > header section.meta:before, section.problem-new > section > header section.meta:after, section.problem-edit > section > header section.meta:before, section.problem-edit > section > header section.meta:after {
+        content: "";
+        display: table; }
+      section.video-new > section > header section.meta:after, section.video-edit > section > header section.meta:after, section.problem-new > section > header section.meta:after, section.problem-edit > section > header section.meta:after {
+        clear: both; }
+      section.video-new > section > header section.meta div, section.video-edit > section > header section.meta div, section.problem-new > section > header section.meta div, section.problem-edit > section > header section.meta div {
+        float: left;
+        margin-right: 20px; }
+        section.video-new > section > header section.meta div h2, section.video-edit > section > header section.meta div h2, section.problem-new > section > header section.meta div h2, section.problem-edit > section > header section.meta div h2 {
+          font-size: 14px;
+          display: -moz-inline-box;
+          -moz-box-orient: vertical;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto; }
+        section.video-new > section > header section.meta div p, section.video-edit > section > header section.meta div p, section.problem-new > section > header section.meta div p, section.problem-edit > section > header section.meta div p {
+          display: -moz-inline-box;
+          -moz-box-orient: vertical;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto; }
+    section.video-new > section section.notes, section.video-edit > section section.notes, section.problem-new > section section.notes, section.problem-edit > section section.notes {
+      margin-top: 20px;
+      padding: 6px;
+      background: #eee;
+      border: 1px solid #ccc; }
+      section.video-new > section section.notes textarea, section.video-edit > section section.notes textarea, section.problem-new > section section.notes textarea, section.problem-edit > section section.notes textarea {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        display: block;
+        width: 100%; }
+      section.video-new > section section.notes h2, section.video-edit > section section.notes h2, section.problem-new > section section.notes h2, section.problem-edit > section section.notes h2 {
+        font-size: 14px;
+        margin-bottom: 6px; }
+      section.video-new > section section.notes input[type="submit"], section.video-edit > section section.notes input[type="submit"], section.problem-new > section section.notes input[type="submit"], section.problem-edit > section section.notes input[type="submit"] {
+        margin-top: 10px; }

cms/static/js/main.js

@@ -6,96 +6,6 @@ $(document).ready(function(){
     $('.editable-textarea').inlineEdit({control: 'textarea'});
   });
 
-  // $("a[rel*=leanModal]").leanModal();
-
-  // $(".remove").click(function(){
-  //   $(this).parents('li').hide();
-  // });
-
-  // $("#show-sidebar").click(function(){
-  //   $("#video-selector").toggleClass('hidden');
-  //   return false;
-  // });
-
-  // $('.use-video').click(function() {
-  //   var used = $('#used');
-  //   if (used.is(':visible')) {
-  //     used.hide().show('slow');
-  //   }
-  //   used.show();
-  //   $('.no-video').hide();
-  // });
-
-  // $('.remove-video').click(function() {
-  //   $('#used').hide();
-  //   $('.no-video').show();
-  // });
-
-  // $('#new-upload').click(function() {
-  //   $('.selected-files').toggle();
-  //   return false;
-  // });
-
-  // /* $('.block').append('<a href=\"#\" class=\"delete\">&#10005;<\/a>'); */
-
-  // $('a.delete').click(function() {
-  //   $(this).parents('.block').hide();
-  // });
-
-  // $('.speed-list > li').hover(function(){
-  //   $(this).children('.tooltip').toggle();
-  // });
-
-  // $('.delete-speed').click(function(){
-  //   $(this).parents('li.speed').hide();
-  //   return false;
-  // });
-
-  // $('.edit-captions').click(function(){
-  //   var parentVid = $(this).parents('div');
-  //   parentVid.siblings('div.caption-box').toggle();
-  //   return false;
-  // });
-
-  // $('.close-box').click(function(){
-  //   $(this).parents('.caption-box').hide();
-  //   return false;
-  // });
-
-  // $('ul.dropdown').hide();
-  // $('li.questions').click(function() {
-  //   $('ul.dropdown').toggle();
-  //   return false;
-  // });
-
-  // $('#mchoice').click(function(){
-  //   $('div.used').append($('<div class="block question">').load("/widgets/multi-choice.html"));
-  //   return false;
-  // });
-
-  // $('#text').click(function(){
-  //   $('div.used').append($('<div class="block text">').load("/widgets/text.html"));
-  //   return false;
-  // });
-
-  // $('#numerical').click(function(){
-  //   $('div.used').append($('<div class="block question">').load("/widgets/text-question.html"));
-  //   return false;
-  // });
-
-  // $('#equation').click(function(){
-  //   $('div.used').append($('<div class="block latex">').load("/widgets/latex-equation.html"));
-  //   return false;
-  // });
-
-  // $('#script').click(function(){
-  //   $('div.used').append($('<div class="block code">').load("/widgets/script-widget.html"));
-  //   return false;
-  // });
-
-  // $("#mark").markItUp(myWikiSettings);
-
-
   var heighest = 0;
   $('.cal ol > li').each(function(){
     heighest = ($(this).height() > heighest) ? $(this).height() : heighest;
@@ -104,10 +14,7 @@ $(document).ready(function(){
 
   $('.cal ol > li').css('height',heighest + 'px');
 
-  $('.new-week').hide();
-  $('.add-new-week').click(function() {
-    $(this).hide();
-    $('.new-week').show();
+  $('.add-new-section').click(function() {
     return false;
   });
 
@@ -117,43 +24,63 @@ $(document).ready(function(){
     return false;
   });
 
-  var windowHeight = $(window).resize().height();
+  $('.save-update').click(function(){
+      $(this).parent().parent().hide();
+      return false;
+  });
 
-  $('.sidebar').css('height', windowHeight);
+  setHeight = function(){
+    var windowHeight = $(this).height();
+    var calHeight = windowHeight - 29;
+    var sidebarHeight = windowHeight - 73;
 
-  $('.edit-week').click( function() {
-    $('body').addClass('content');
-    $('body.content .cal').css('height', windowHeight);
-    $('section.week-new').show();
-    return false;
-  });
+    $('.sidebar').css('height', sidebarHeight);
+    $('body.content .cal').css('height', calHeight);
 
-  $('.cal ol li header h1 a').click( function() {
-    $('body').addClass('content');
-    $('body.content .cal').css('height', windowHeight);
-    $('section.week-edit').show();
-    return false;
-  });
+    $('.edit-week').click( function() {
+      $('body').addClass('content');
+      $('body.content .cal').css('height', calHeight);
+      $('section.week-new').show();
+      return false;
+    });
 
+    $('.cal ol li header h1 a').click( function() {
+      $('body').addClass('content');
+      $('body.content .cal').css('height', calHeight);
+      $('section.week-edit').show();
+      return false;
+    });
 
-  $('.video-new a').click(function(){
-      $('section.video-new').show();
+    $('a.sequence-edit').click(function(){
+      $('body').addClass('content');
+      $('body.content .cal').css('height', calHeight);
+      $('section.sequence-edit').show();
       return false;
+    });
+  }
+
+  $(document).ready(setHeight);
+  $(window).bind('resize', setHeight);
+
+  $('.video-new a').click(function(){
+    $('section.video-new').show();
+    return false;
   });
 
-  $('.video-edit a').click(function(){
-      $('section.video-edit').show();
-      return false;
+  $('a.video-edit').click(function(){
+    $('section.video-edit').show();
+    return false;
   });
 
   $('.problem-new a').click(function(){
-      $('section.problem-new').show();
-      return false;
+    $('section.problem-new').show();
+    return false;
   });
 
-  $('.problem-edit a').click(function(){
-      $('section.problem-edit').show();
-      return false;
+  $('a.problem-edit').click(function(){
+    $('section.problem-edit').show();
+    return false;
   });
+
 });
 

cms/static/sass/_base.scss

@@ -32,7 +32,22 @@ body {
       h2 {
         font-size: 14px;
         text-transform: uppercase;
+        float: left;
       }
+
+      a.new-module {
+        float: right;
+      }
+    }
+  }
+
+  &.content {
+    section.main-content {
+      border-left: 2px solid #000;
+      @include box-sizing(border-box);
+      width: flex-grid(9);
+      float: left;
+      @include box-shadow( -2px 0 3px #ddd );
     }
   }
 }
@@ -48,4 +63,3 @@ input[type="submit"], .button {
   @include border-radius(3px);
   padding: 6px;
 }
-

cms/static/sass/_calendar.scss

@@ -7,59 +7,40 @@ section.cal {
   > header {
     @include clearfix;
     margin-bottom: 10px;
-
-    h1 {
-      float: left;
-      font-size: 18px;
+    background: #efefef;
+    border: 1px solid #ddd;
+
+    h2 {
+      @include inline-block();
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-size: 14px;
+      padding: 6px;
+      margin-left: 6px;
+      font-size: 12px;
     }
 
     ul {
-      float: right;
+      @include inline-block;
 
       li  {
         @include inline-block;
+        margin-left: 6px;
+        padding-left: 6px;
+        border-left: 1px solid #ddd;
+        padding: 6px;
 
         a {
-          padding: 6px;
-          border: 1px solid #ddd;
-          display: block;
-          @include border-radius(3px);
-          background: #efefef;
+          @include inline-block();
         }
 
-        &.dropdown {
-          position: relative;
-
-          ul {
-            display: none;
-            position: absolute;
-            background: #fff;
-            border: 1px solid #ddd;
-
-            li {
-              padding: 6px;
-              display: block;
-              border-top: 1px solid transparent;
-              border-bottom: 1px solid transparent;
-
-              &:hover {
-                background-color: #efefef;
-                border-top: 1px solid #ddd;
-                border-bottom: 1px solid #ddd;
-              }
-            }
-          }
-
-          &:hover {
+        ul {
+          @include inline-block();
 
-            ul {
-              display: block;
-            }
-
-            a {
-              @include border-radius(3px 3px 0 0);
-              border-bottom: 0;
-            }
+          li {
+            @include inline-block();
+            padding: 0;
+            border-left: 0;
           }
         }
       }
@@ -81,109 +62,172 @@ section.cal {
       float: left;
       width: flex-grid(3) + ((flex-gutter() * 3) / 4);
 
-      &:last-child {
-        text-align: center;
-        background: #eee;
-        @include box-sizing(border-box);
+      header {
+        border-bottom: 1px solid #000;
+        @include box-shadow(0 1px 2px #aaa);
+        display: block;
+        margin-bottom: 2px;
 
-        p {
-          width: 100%;
-          height: 100%;
-          @include box-sizing(border-box);
+        h1 {
+          font-size: 14px;
+          text-transform: uppercase;
+          border-bottom: 1px solid #ccc;
+          padding: 6px;
 
           a {
+            color: #000;
             display: block;
-            width: 100%;
-            height: 100%;
           }
         }
 
-        section.new-week {
-          header {
+        ul {
+          li {
             background: #fff;
-            text-align: left;
+            color: #888;
+            border-bottom: 0;
+            font-size: 12px;
           }
+        }
+      }
 
-          form {
-            background: #fff;
-            width: 50%;
-            padding: 6px;
-            border: 1px solid #000;
-            margin: 0 auto;
-            @include box-shadow(0 0 2px #333);
-            position: relative;
+      ul {
+        list-style: none;
+        margin-bottom: 1px;
 
-            &:before {
-              background: #fff;
-              border-left: 1px solid #000;
-              border-top: 1px solid #000;
-              content: "  ";
-              display: block;
-              height: 10px;
-              left: 50%;
-              position: absolute;
-              top: -6px;
-              @include transform(rotate(45deg));
-              width: 10px;
-              z-index: 0;
-            }
+        li {
+          background: #efefef;
+          border-bottom: 1px solid #666;
+          padding: 6px;
 
-            select {
-              margin-bottom: 6px;
-              width: 100%;
+          &.create-module {
+            position: relative;
 
-              option {
-                padding: 10px 0 !important;
+            > div {
+              display: none;
+              @include position(absolute, 30px 0 0 0);
+              width: 90%;
+              background: rgba(#000, .8);
+              padding: 10px;
+              @include box-sizing(border-box);
+              @include border-radius(3px);
+              z-index: 99;
+
+              ul {
+                li {
+                  border-bottom: 0;
+                  background: none;
+
+                  input {
+                    width: 100%;
+                    @include box-sizing(border-box);
+                    border-color: #000;
+                    padding: 6px;
+                  }
+
+                  select {
+                    width: 100%;
+                    @include box-sizing(border-box);
+
+                    option {
+                      font-size: 14px;
+                    }
+                  }
+
+                  a {
+                    float: right;
+
+                    &:first-child {
+                      float: left;
+                    }
+                  }
+                }
               }
             }
 
-            input[type="submit"] {
-              display: block;
-              margin-bottom: 6px;
-              width: 100%;
-            }
-
-            a {
-
-              &:first-child {
-                float: left;
-              }
-
-              &:last-child {
-                float: right;
+            &:hover {
+              div {
+                display: block;
               }
             }
           }
         }
       }
+    }
+  }
+
+  section.new-section {
+    margin-top: 10px;
+
+    > a {
+      @extend .button;
+      @include inline-block();
+    }
+
+    section {
+      display: none;
 
       header {
-        border-bottom: 1px solid #000;
-        @include box-shadow(0 1px 2px #ccc);
-        display: block;
-        margin-bottom: 2px;
+        background: #fff;
+        text-align: left;
+      }
+
+      form {
+        background: #fff;
+        width: 50%;
         padding: 6px;
+        border: 1px solid #000;
+        margin: 0 auto;
+        @include box-shadow(0 0 2px #333);
+        position: relative;
+
+        &:before {
+          background: #fff;
+          border-left: 1px solid #000;
+          border-top: 1px solid #000;
+          content: "  ";
+          display: block;
+          height: 10px;
+          left: 50%;
+          position: absolute;
+          top: -6px;
+          @include transform(rotate(45deg));
+          width: 10px;
+          z-index: 0;
+        }
 
-        h1 {
-          font-size: 14px;
+        select {
+          margin-bottom: 6px;
+          width: 100%;
+
+          option {
+            padding: 10px 0 !important;
+          }
         }
-      }
 
-      ul {
-        list-style: none;
-        margin-bottom: 1px;
+        input[type="submit"] {
+          display: block;
+          margin-bottom: 6px;
+          width: 100%;
+        }
 
-        li {
-          background: #efefef;
-          border-bottom: 1px solid #666;
-          padding: 6px;
+        a {
 
-          &.goal {
-            background: #fff;
+          &:first-child {
+            float: left;
+          }
+
+          &:last-child {
+            float: right;
           }
         }
       }
     }
+
+    &:hover {
+      section {
+        display: block;
+      }
+    }
   }
 }
 

cms/static/sass/_module-header.scss

+section.video-new, section.video-edit, section.problem-new, section.problem-edit  {
+  position: absolute;
+  top: 72px;
+  right: 0;
+  background: #fff;
+  width: flex-grid(6);
+  @include box-shadow(0 0 6px #666);
+  border: 1px solid #333;
+  border-right: 0;
+  z-index: 4;
+
+  > header {
+    background: #666;
+    @include clearfix;
+    color: #fff;
+    padding: 6px;
+    border-bottom: 1px solid #333;
+    -webkit-font-smoothing: antialiased;
+
+    h2 {
+      float: left;
+      font-size: 14px;
+    }
+
+    a {
+      color: #fff;
+
+      &.save-update {
+        float: right;
+      }
+
+      &.cancel {
+        float: left;
+      }
+    }
+
+  }
+
+  > section {
+    padding: 20px;
+
+    > header {
+      h1 {
+        font-size: 24px;
+        margin: 12px 0;
+      }
+
+      section {
+        &.status-settings {
+          ul {
+            list-style: none;
+            @include border-radius(2px);
+            border: 1px solid #999;
+            @include inline-block();
+
+            li {
+              @include inline-block();
+              border-right: 1px solid #999;
+              padding: 6px;
+
+              &:last-child {
+                border-right: 0;
+              }
+
+              &.current {
+                background: #eee;
+              }
+            }
+          }
+
+          a.settings {
+            @include inline-block();
+            margin: 0 20px;
+            border: 1px solid #999;
+            padding: 6px;
+          }
+
+          select {
+            float: right;
+          }
+        }
+
+        &.meta {
+          background: #eee;
+          padding: 10px;
+          margin: 20px 0;
+          @include clearfix();
+
+          div {
+            float: left;
+            margin-right: 20px;
+
+            h2 {
+              font-size: 14px;
+              @include inline-block();
+            }
+
+            p {
+              @include inline-block();
+            }
+          }
+        }
+      }
+    }
+
+    section.notes {
+      margin-top: 20px;
+      padding: 6px;
+      background: #eee;
+      border: 1px solid #ccc;
+
+      textarea {
+        @include box-sizing(border-box);
+        display: block;
+        width: 100%;
+      }
+
+      h2 {
+        font-size: 14px;
+        margin-bottom: 6px;
+      }
+
+      input[type="submit"]{
+         margin-top: 10px;
+      }
+    }
+  }
+}

cms/static/sass/_problem.scss

 section.problem-new, section.problem-edit {
-  position: absolute;
-  top: 80px;
-  right: 0;
-  background: #fff;
-  width: flex-grid(5);
-  @include box-shadow(0 0 6px #666);
-  border: 1px solid #333;
-  border-right: 0;
-  z-index: 4;
-
-  > header {
-    background: #666;
-    @include clearfix;
-    color: #fff;
-    padding: 6px;
-    border-bottom: 1px solid #333;
-    -webkit-font-smoothing: antialiased;
-
-    h2 {
-      float: left;
-      font-size: 14px;
+  > section {
+    textarea {
+      @include box-sizing(border-box);
+      display: block;
+      width: 100%;
     }
 
-    a {
-      float: right;
+    div.preview {
+      background: #eee;
+      @include box-sizing(border-box);
+      height: 40px;
+      padding: 10px;
+      width: 100%;
     }
-  }
-
-  section {
-    ul {
-      list-style: none;
 
-      li {
-        border-bottom: 1px solid #333;
-        padding: 10px 25px;
-      }
+    a.save {
+      @extend .button;
+      @include inline-block();
+      margin-top: 20px;
     }
   }
 }

cms/static/sass/_video.scss

 section.video-new, section.video-edit {
-  position: absolute;
-  top: 80px;
-  right: 0;
-  background: #fff;
-  width: flex-grid(5);
-  @include box-shadow(0 0 6px #666);
-  border: 1px solid #333;
-  border-right: 0;
-  z-index: 4;
+  > section {
 
-  > header {
-    background: #666;
-    @include clearfix;
-    color: #fff;
-    padding: 6px;
-    border-bottom: 1px solid #333;
-    -webkit-font-smoothing: antialiased;
+    section.upload {
+      padding: 6px;
+      margin-bottom: 10px;
+      border: 1px solid #ddd;
 
-    h2 {
-      float: left;
-      font-size: 14px;
-    }
-
-    a {
-      float: right;
+      a.upload-button {
+        @extend .button;
+        @include inline-block();
+      }
     }
-  }
 
-  section {
-    ul {
-      list-style: none;
+    section.in-use {
+      h2 {
+        font-size: 14px;
+      }
 
-      li {
-        border-bottom: 1px solid #333;
-        padding: 10px 25px;
+      div {
+        background: #eee;
+        text-align: center;
+        padding: 6px;
       }
     }
+
+    a.save-update {
+      @extend .button;
+      @include inline-block();
+      margin-top: 20px;
+    }
   }
 }

cms/static/sass/_week.scss

-section.week-edit, section.week-new {
+section.week-edit,
+section.week-new,
+section.sequence-edit {
 
   > header {
     border-bottom: 1px solid #ccc;

cms/static/sass/base-style.scss

@@ -3,16 +3,4 @@
 
 @import 'base';
 @import 'calendar';
-@import 'week', 'video', 'problem';
-
-body {
-  &.content {
-    section.main-content {
-      border-left: 2px solid #000;
-      @include box-sizing(border-box);
-      width: flex-grid(9);
-      float: left;
-      @include box-shadow( -2px 0 3px #ddd );
-    }
-  }
-}
+@import 'week', 'video', 'problem', 'module-header';

cms/templates/index.html

@@ -9,6 +9,7 @@
   <section class="main-content">
     <%include file="widgets/week-edit.html"/>
     <%include file="widgets/week-new.html"/>
+    <%include file="widgets/sequnce-edit.html"/>
     <%include file="widgets/video-edit.html"/>
     <%include file="widgets/video-new.html"/>
     <%include file="widgets/problem-edit.html"/>

cms/templates/widgets/header.html

 <header>
   <nav>
-    <h2><a href="/ui_prototype">6.002x</a></h2>
+    <h2><a href="/ui_prototype">6.002x circuits and electronics</a></h2>
+    <a href="#" class="new-module">New module</a>
   </nav>
 </header>

cms/templates/widgets/module-dropdown.html

+<li class="create-module">
+  <a href="#" class="new-module">
+    + Add new module
+  </a>
+  <div>
+    <form>
+      <ul>
+        <li>
+          <input type="text" name="" id="" placeholder="Moldule title" />
+        </li>
+        <li>
+          <select>
+            <option>Use template</option>
+            <option>Lecture Sequence</option>
+            <option>Use template</option>
+          </select>
+        </li>
+        <li>
+          <input type="submit" value="Create & Edit Module" />
+          <div>
+            <a href="#">Save without edit</a>
+            <a href="#">Cancel</a>
+          </div>
+        </li>
+      </ul>
+    </form>
+  </div>
+</li>

cms/templates/widgets/navigation.html

 <section class="cal">
   <header>
-    <h1>Circuts &amp; Electronics</h1>
-
+    <h2>Filter content:</h2>
     <ul>
-      <li class="dropdown">
+      <li>
         <a href="#">Sequences</a>
 
         <ul>
@@ -17,9 +16,20 @@
 
       <li>
         <a href="#">Deadlines</a>
+
+        <ul>
+          <li>Today</li>
+          <li>Tomorrow</li>
+          <li>This week</li>
+          <li>In 2 weeks</li>
+          <li>This month</li>
+        </ul>
       </li>
       <li>
         <a href="#">Goals</a>
+        <ul>
+          <li>Hide</li>
+        </ul>
       </li>
     </ul>
   </header>
@@ -28,93 +38,131 @@
     <li>
       <header>
         <h1><a href="#">Week 1</a></h1>
+        <ul>
+          <li class="goal editable"><strong>Goal title:</strong> This is a goal that will be in the header of the week</li>
+          <li class="goal editable"><strong>Goal title two:</strong> This is another fgoal for this week so that students have two things to learn</li>
+        </ul>
       </header>
 
       <ul>
-        <li class="goal">Goal 1</li>
-        <li class="goal">Goal 2</li>
-        <li class="seq">Lecture Sequence</li>
-        <li class="seq">Lecture Sequence</li>
-        <li class="lab">Lab</li>
+        <li class="seq"><a href="#" class="sequence-edit">Lecture Sequence</a></li>
+        <li class="seq"><a href="#" class="sequence-edit">Lecture Sequence</a></li>
+        <li class="lab"><a href="#" class="lab-edit">Lab</a></li>
         <li class="hw">Homework</li>
-        <li class="new">+ Add new sequence</li>
+        <%include file="module-dropdown.html"/>
       </ul>
     </li>
     <li>
       <header>
         <h1><a href="#">Week 2</a></h1>
+        <ul>
+          <li class="goal editable"><strong>Another title</strong> This is the goal for the week</li>
+        </ul>
       </header>
 
       <ul>
-        <li class="goal">Goal 1</li>
         <li class="seq">Lecture Sequence</li>
         <li class="seq">Lecture Sequence</li>
         <li class="lab">Lab</li>
         <li class="hw">Homework</li>
-        <li class="new">+ Add new sequence</li>
+        <%include file="module-dropdown.html"/>
       </ul>
     </li>
     <li>
       <header>
       <h1><a href="#">Week 3</a></h1>
+        <ul>
+          <li class="goal editable"><strong>Another title</strong> This is the goal for the week</li>
+        </ul>
       </header>
 
       <ul>
-        <li class="goal">Goal 1</li>
         <li class="lab">Lab</li>
         <li class="lab">Lab</li>
         <li class="hw">Homework</li>
-        <li class="new">+ Add new sequence</li>
+        <%include file="module-dropdown.html"/>
       </ul>
     </li>
     <li>
       <header>
         <h1><a href="#">Week 4</a></h1>
+        <ul>
+          <li class="goal editable"><strong>Another title</strong> This is the goal for the week</li>
+          <li class="goal editable"><strong>Goal title two:</strong> This is another fgoal for this week so that students have two things to learn</li>
+        </ul>
       </header>
 
       <ul>
-        <li class="goal">Goal 1</li>
         <li class="seq">Lecture Sequence</li>
         <li class="lab">Lab</li>
         <li class="hw">Homework</li>
         <li class="hw">Homework</li>
-        <li class="new">+ Add new sequence</li>
+        <%include file="module-dropdown.html"/>
       </ul>
     </li>
 
     <li>
       <header>
         <h1><a>Week 5</a></h1>
+        <ul>
+          <li class="goal editable">Please create a learning goal for this week</li>
+        </ul>
+      </header>
+
+      <ul>
+        <%include file="module-dropdown.html"/>
+      </ul>
+    </li>
+    <li>
+      <header>
+        <h1><a>Week 6</a></h1>
+        <ul>
+          <li class="goal editable">Please create a learning goal for this week</li>
+        </ul>
       </header>
 
       <ul>
-        <li class="new">+ Add new sequence</li>
+        <%include file="module-dropdown.html"/>
       </ul>
     </li>
     <li>
-      <p class="add-new-week">
-        <a href="#" >+ Add New</a>
-      </p>
+      <header>
+        <h1><a>Week 7</a></h1>
+        <ul>
+          <li class="goal editable">Please create a learning goal for this week</li>
+        </ul>
+      </header>
+
+      <ul>
+        <%include file="module-dropdown.html"/>
+      </ul>
+    </li>
+  </ol>
 
-      <section class="new-week">
-        <header>
-          <h1 class="editable">Week 6</h1>
-        </header>
+  <section class="new-section">
+    <a href="#" >+ Add New Section</a>
 
-        <form>
-          <select>
-            <option>Blank</option>
-            <option>6.002x</option>
-            <option>6.00x</option>
-          </select>
-          <div>
+    <section>
+      <form>
+        <ul>
+          <li>
+            <input type="text" name="" id="" placeholder="Moldule title" />
+          </li>
+          <li>
+            <select>
+              <option>Blank</option>
+              <option>6.002x</option>
+              <option>6.00x</option>
+            </select>
+          </li>
+          <li>
             <input type="submit" value="Save and edit week" class="edit-week" />
             <a href="#" class="close">Save without edit</a>
             <a href="#" class="close">cancel</a>
-          </div>
-        </form>
-      </section>
-    </li>
-  </ol>
+          </li>
+        </ul>
+      </form>
+    </section>
+  </section>
 </section>
 

cms/templates/widgets/new-module.html

-<li class="new-module">
-  <ul class="new-dropdown">
-    <li class="default">+ add new</li>
-    <li class="import"><a href="#">Import from the edX library</a></li>
-    <li class="video-new"><a href="#">Create new video segment</a></li>
-    <li class="problem-new"><a href="#">Create new problem</a></li>
-    <li class="lab-lab"><a href="#">Create new lab</a></li>
-  </ul>
-</li>
+<ul class="new-dropdown">
+  <li class="default">+ add new</li>
+  <li class="import"><a href="#">Import from the edX library</a></li>
+  <li class="video-new"><a href="#">Create new video segment</a></li>
+  <li class="problem-new"><a href="#">Create new problem</a></li>
+  <li class="lab-lab"><a href="#">Create new lab</a></li>
+</ul>

cms/templates/widgets/problem-edit.html

-<section class="problem-new">
+<section class="problem-edit">
   <header>
-    <a href="#" class="cancel">cancel</a>
-    <a href="#">Save &amp; Update</a>
+    <a href="#" class="cancel">Cancel</a>
+    <a href="#" class="save-update">Save &amp; Update</a>
   </header>
 
   <section>
     <header>
-    <h1 class="editable">Old Problem</h1>
-      <section>
+      <h1 class="editable">New Problem</h1>
+      <section class="author">
+        <div>
+          <h2>Last modified:</h2>
+          <p>mm/dd/yy</p>
+        </div>
+
+        <div>
+          <h2>By</h2>
+          <p>Anant Agarwal</p>
+        </div>
+      </section>
+
+      <section class="status-settings">
         <ul>
-          <li><a href="#">Scrap</a></li>
+          <li><a href="#" class="current">Scrap</a></li>
           <li><a href="#">Draft</a></li>
           <li><a href="#">Proofed</a></li>
           <li><a href="#">Published</a></li>
         </ul>
-
-        <div>
-          <a href="#">Settings</a>
-        </div>
+        <a href="#" class="settings">Settings</a>
 
         <select name="" id="">
           <option>Global</option>
         </select>
       </section>
-      <section>
+      <section class="meta">
         <div>
           <h2>Tags:</h2>
           <p class="editable">Click to edit</p>
         </div>
 
         <div>
-          <h2>Last modified:</h2>
-          <p>mm/dd/yy</p>
-        </div>
-
-        <div>
-          <h2>By</h2>
-          <p>Anant Agarwal</p>
+          <h2>Goal</h2>
+          <p class="editable">Click to edit</p>
         </div>
       </section>
     </header>
@@ -49,6 +53,10 @@
     </section>
 
     <section class="notes">
+      <h2>Add notes</h2>
+      <textarea name="" id= rows="8" cols="40"></textarea>
+      <input type="submit" name="" id="" value="post" />
+
       <ul>
         <li>
           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
@@ -58,16 +66,8 @@
           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
           <p class="author">Anant Agarwal</p>
         </li>
-      </ul>
-
-      <div>
-        <h2>Add notes</h2>
-        <textarea name="" id= rows="8" cols="40"></textarea>
-        <input type="submit" name="" id="" value="" />
-      </div>
-    </section>
+      </ul>    </section>
 
-    <a href="">Save &amp; Update</a>
+    <a href="" class="save-update">Save &amp; Update</a>
   </section>
 </section>
-

cms/templates/widgets/problem-new.html

 <section class="problem-new">
   <header>
-    <a href="#" class="cancel">cancel</a>
-    <a href="#">Save &amp; Update</a>
+    <a href="#" class="cancel">Cancel</a>
+    <a href="#" class="save-update">Save &amp; Update</a>
   </header>
 
   <section>
     <header>
-    <h1>New Problem</h1>
-      <section>
+    <h1 class="editable">New Problem</h1>
+
+      <section class="status-settings">
         <ul>
-          <li><a href="#">Scrap</a></li>
+          <li><a href="#" class="current">Scrap</a></li>
           <li><a href="#">Draft</a></li>
           <li><a href="#">Proofed</a></li>
           <li><a href="#">Published</a></li>
         </ul>
-        <a href="#">Settings</a>
+        <a href="#" class="settings">Settings</a>
+
         <select name="" id="">
           <option>Global</option>
         </select>
       </section>
-      <section>
+      <section class="meta">
         <div>
           <h2>Tags:</h2>
           <p class="editable">Click to edit</p>
         </div>
 
-        <!-- <div> -->
-        <!--   <h2>Last modified:</h2> -->
-        <!--   <p>mm/dd/yy</p> -->
-        <!-- </div> -->
-
-        <!-- <div> -->
-        <!--   <h2>By</h2> -->
-        <!--   <p>Anant Agarwal</p> -->
-        <!-- </div> -->
+        <div>
+          <h2>Goal</h2>
+          <p class="editable">Click to edit</p>
+        </div>
       </section>
     </header>
 
@@ -45,8 +42,10 @@
 
     <section class="notes">
       <h2>Add notes</h2>
+      <textarea name="" id= rows="8" cols="40"></textarea>
+      <input type="submit" name="" id="" value="post" />
     </section>
 
-    <a href="">Save &amp; Update</a>
+    <a href="" class="save-update">Save &amp; Update</a>
   </section>
 </section>

cms/templates/widgets/sequnce-edit.html

+<%block name="content">
+<section class="sequence-edit">
+  <header>
+    <a href="/ui_prototype">Done</a>
+    <h1 class="editable">Lecture Sequence name</h1>
+    <a href="">Settings</a>
+  </header>
+
+  <section class="sidebar">
+    <section class="goals">
+      <header>
+        <h2>Content</h2>
+      </header>
+      <ul>
+        <li><a href="#" class="video-edit">Video 1</a></li>
+        <li><a href="#" class="video-edit">Video 2</a></li>
+        <%include file="new-module.html"/>
+      </ul>
+    </section>
+
+    <section class="scratch-pad">
+      <header>
+        <h2>Scratchpad</h2>
+      </header>
+
+      <ul>
+        <li><a href="#" class="problem-edit">Problem title 11</a></li>
+        <li><a href="#" class="problem-edit">Problem title 13</a></li>
+        <li><a href="#" class="problem-edit">Problem title 14</a></li>
+        <li><a href="#" class="video-edit">Video 3</a></li>
+        <%include file="new-module.html"/>
+      </ul>
+
+    </section>
+  </section>
+
+  <section class="weeks-content">
+    <header>
+      <h2>Sequence Content</h2>
+      <form>
+        <input type="search" name="" id="" value="" />
+      </form>
+    </header>
+
+    <section class="filters">
+      <ul>
+        <li>
+          <label for="">Sort by</label>
+          <select>
+            <option value="">Recently Modified</option>
+          </select>
+        </li>
+
+        <li>
+          <label for="">Display</label>
+          <select>
+            <option value="">All content</option>
+          </select>
+        </li>
+        <li>
+          <select>
+            <option value="">Internal Only</option>
+          </select>
+        </li>
+
+        <li class="advanced">
+          <a href="#">Advanced filters</a>
+        </li>
+      </ul>
+    </section>
+
+    <section class="modules">
+      <ul>
+        <li><a href="#" class="problem-edit">Problem 2</a></li>
+        <li><a href="#" class="problem-edit">Problem 4</a></li>
+        <li><a href="#" class="problem-edit">Problem 6</a></li>
+        <li><a href="#" class="video-edit">Video 5</a></li>
+        <li><a href="#" class="video-edit">Video 4</a></li>
+        <li><a href="#" class="problem-edit">Problem 9</a></li>
+      </ul>
+    </section>
+  </section>
+</section>
+</%block>
+

cms/templates/widgets/video-edit.html

-<section class="video-edit">
-
-  <div class="content">
-    <form class="editor">
-
-      <div class="step black">
-        <section class="half">
-          <strong>Created </strong><span>22/03/12</span>
-          <strong>by </strong><span>Piotr Mitros</span>
-        </section>
-
-        <section class="half">
-          <strong>Last edited </strong><span>22/03/12</span>
-          <strong>by </strong><span>David Ormsbee</span>
-        </section>
-      </div>
-      <div class="step">
-        <section>
-          <h2 class="editable">Video title</h2>
-
-          <div style="margin: 15px 0;">
-            <strong>Tag</strong> <span class="editable">mitx, s4v1, circuits, anant</span>
-          </div>
-
-        </section>
-        <section class="meta">
-          <span>Keyword
-            <strong class="editable">S4V1</strong>
-          </span>
-
-          <span>Due Date
-            <strong class="editable">21/03/12</strong>
-          </span>
-          Status
-          <select>
-            <option>Draft</option>
-            <option>Published</option>
-            <option>Checked</option>
-          </select>
-
-          <input type="button" value="Save" style="float: right; margin-top: -4px;" />
-        </section>
-
-      </div>
-
-      <div class="step">
-        <section>
-          <div>
-            <input type="button" id="new-upload" value="Upload a new video clip" /> or
-            <span >use an already <a id="show-sidebar" href="#">uploaded one</a></span>
-          </div>
-        </section>
-
-        <section class="meta selected-files">
-          <div>
-            <ul>
-              <li>video-name-@0-75x.extension</li>
-              <li>video-name-@1x.extension</li>
-              <li>video-name-@1-25x.extension</li>
-              <li>video-name-@1-5x.extension</li>
-            </ul>
-          </div>
-          <input type="file" />
-          <input type="button" value="Upload" id="new-upload" style="float: right; margin-top: -4px;" />
-          <a href="" id="new-upload" style="float: right; margin-right: 10px;">Cancel</a>
-        </section>
-
-      </div>
-
-      <div class="step">
-        <section class="used-videos" style="overflow: visible;">
-          <ul id="used">
-            <div class="title"><h4>Video clip in use</h4></div>
-            <%include file="video-box.html"/>
-          </ul>
-          <p class="no-video">No video clip used. Select one from the list below, <a>upload</a> a new one or <a>import</a> an already uploaded video.</p>
-        </section>
-        <section class="meta">
-          <input type="submit" value="Save and publish"/>
-        </section>
-      </div>
-
-
-      <div class="step no-title">
-        <section class="meta unused-videos"style="overflow: visible;" >
-          <ul id="unused">
-            <%include file="video-box-unused.html"/>
-          </ul>
-        </section>
-      </div>
-
-      <div id="testing"></div>
-
-      <div class="step">
-        <div class="title"><h4>Annotations</h4></div>
-        <textarea class="captions" style="margin-top: 10px">
-          <div id="std_p7" onclick="title_seek( 7);"></div>
-          <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li>
-      </ol></div>
-      More information given in <a href="/book/243">the text</a>.
-    </textarea>
-
-    <section class="meta">
-      <input type="submit" value="Save"/>
+<section class="video-new">
+  <header>
+    <a href="#" class="cancel">Cancel</a>
+    <a href="#" class="save-update">Save &amp; Update</a>
+  </header>
+
+  <section>
+    <header>
+      <h1 class="editable">Untitled Video</h1>
+
+      <section class="status-settings">
+        <ul class="status">
+          <li class="current"><a href="#">Scrap</a></li>
+          <li><a href="#">Draft</a></li>
+          <li><a href="#">Proofed</a></li>
+          <li><a href="#">Published</a></li
+        </ul>
+
+        <a href="#" class="settings">Settings</a>
+
+        <select name="" id="">
+          <option>Global</option>
+        </select>
+      </section>
+
+      <section class="meta">
+        <div>
+          <h2>Tags:</h2>
+          <p class="editable">Click to edit</p>
+        </div>
+        <div>
+          <h2>Goal</h2>
+          <p class="editable">mitx, s4v1, circuits, anant</p>
+        </div>
+      </section>
+    </header>
+
+    <section class="upload">
+      <a href="#" class="upload-button">Upload new video clip</a>
+      Or
+      <a href="#">use an already uploaded one</a>
     </section>
-  </form>
-  </div>
-
-  <div class="step">
-    <div class="title"><h4>Notes</h4></div>
-
-    <textarea class="notes" style="margin: 10px 0;">
-    </textarea>
 
-    <section class="meta">
-      <input type="submit" value="Post"/>
-    </section>
-    <section>
-      <div class="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
-        <p><strong>By Piotr Mitros</strong> 10 hours ago</p>
-      </div>
-      <div class="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <p><strong>By Piotr Mitros</strong> 10 hours ago</p>
-      </div>
-      <div class="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <p><strong>By Piotr Mitros</strong> 10 hours ago</p>
+    <section class="in-use">
+      <h2>Video in use</h2>
+      <div>
+        <p>No video clip used. <a href="">Select one</a> from the list below, <a href="">upload a new one</a> or <a href="">import already existing video</a></p>
       </div>
     </section>
-  </div>
-
-<aside id="video-selector" class="hidden">
-  <input type="text" placeholder="Search video files..." />
-  <ul class="raw-videos">
-    <%include file="raw-videos.html"/>
-  </ul>
-</aside>
 
-    </div>
-
-    <div id="raw-file">
-      Select the source video <select><option>Select source video</option><option>video-title.webm</option><option>another-video-title.webm</option><option>video-title-2.webm</option></select> or directly enter its ID <input type="text" style="width: 200px;"/><button>Use video</button>
-    </div>
-
-    <div id="view">
-      <img src="${ STATIC_URL }/img/video.jpg" />
-    </div>
+    <section class="notes">
+      <h2>Add notes</h2>
+      <textarea name="" id= rows="8" cols="40"></textarea>
+      <input type="submit" name="" id="" value="post" />
+    </section>
 
-    <div id="upload">
-      <input type="file" />
-      <input type="button" value="Upload" id="new-upload" style="float: right; margin-top: -4px;" />
-      <a href="" id="new-upload" style="float: right; margin-right: 10px;">Cancel</a>
-    </div>
+    <a href="" class="save-update">Save &amp; Update</a>
   </section>
+</section>

cms/templates/widgets/video-new.html

 <section class="video-new">
   <header>
-    <a href="#" class="cancel">cancel</a>
-    <a href="#">Save &amp; Update</a>
+    <a href="#" class="cancel">Cancel</a>
+    <a href="#" class="save-update">Save &amp; Update</a>
   </header>
 
   <section>
     <header>
       <h1 class="editable">Untitled Video</h1>
-      <section>
-        <ul>
-          <li><a href="#">Scrap</a></li>
+
+      <section class="author">
+        <div>
+          <h2>Last modified:</h2>
+          <p>mm/dd/yy</p>
+        </div>
+
+        <div>
+          <h2>By</h2>
+          <p>Anant Agarwal</p>
+        </div>
+      </section>
+
+      <section class="status-settings">
+        <ul class="status">
+          <li class="current"><a href="#">Scrap</a></li>
           <li><a href="#">Draft</a></li>
           <li><a href="#">Proofed</a></li>
           <li><a href="#">Published</a></li>
         </ul>
-        <a href="#">Settings</a>
+
+        <a href="#" class="settings">Settings</a>
+
         <select name="" id="">
           <option>Global</option>
         </select>
       </section>
 
-      <section>
+      <section class="meta">
         <div>
           <h2>Tags:</h2>
+          <p class="editable">mitx, s4v1, circuits, anant</p>
+        </div>
+        <div>
+          <h2>Goal</h2>
           <p class="editable">Click to edit</p>
         </div>
+      </section>
+    </header>
 
-        <!-- <div> -->
-        <!--   <h2>Last modified:</h2> -->
-        <!--   <p>mm/dd/yy</p> -->
-        <!-- </div> -->
+    <section class="upload">
+      <a href="#" class="upload-button">Upload new video clip</a>
+      Or
+      <a href="#">use an already uploaded one</a>
 
-        <!-- <div> -->
-        <!--   <h2>By</h2> -->
-        <!--   <p>Anant Agarwal</p> -->
-        <!-- </div> -->
+      <section class="upload-video">
+        <div>
+          <ul>
+            <li>video-name-@0-75x.extension</li>
+            <li>video-name-@1x.extension</li>
+            <li>video-name-@1-25x.extension</li>
+            <li>video-name-@1-5x.extension</li>
+          </ul>
+        </div>
+        <input type="file" />
+        <input type="button" value="Upload" id="new-upload" style="float: right; margin-top: -4px;" />
+        <a href="" id="new-upload" style="float: right; margin-right: 10px;">Cancel</a>
       </section>
-    </header>
+    </section>
 
-    <section>
-      <textarea name="" id= rows="8" cols="40"></textarea>
-      <div class="preview">
+    <section class="in-use">
+      <h2>Video in use</h2>
+      <div>
+        <p>No video clip used. <a href="">Select one</a> from the list below, <a href="">upload a new one</a> or <a href="">import already existing video</a></p>
       </div>
-      <a href="">Save &amp; Update</a>
     </section>
+
+    <section class="notes">
+      <h2>Add notes</h2>
+      <textarea name="" id= rows="8" cols="40"></textarea>
+      <input type="submit" name="" id="" value="post" />
+    </section>
+
+    <a href="" class="save-update">Save &amp; Update</a>
   </section>
 </section>

cms/templates/widgets/week-edit.html

-<%block name="content">
 <section class="week-edit">
   <header>
     <h1 class="editable">Week 3</h1>
-    <a href="/ui_prototype">Done</a>
-  </header>
+    <p><a href="#">+ new goal</a></p>
 
-  <section class="sidebar">
     <section class="goals">
-      <header>
-        <h2>Goals</h2>
-      </header>
+      <h2>Weeks goals:</h2>
       <ul>
-        <li>Goal 1: This is the title of the first goal</li>
-        <li>Goal 2: This is the title</li>
+        <li>
+          <h3>Goal title</h2>
+          <p>This is the goal body</p>
+        </li>
       </ul>
-      <p><a href="#">+ Add new goal</a></p>
     </section>
+  </header>
 
-    <section class="scratch-pad">
-      <header>
-        <h2>Scratchpad</h2>
-      </header>
 
-      <ul>
-        <li>Problem title 11</li>
-        <li>Problem title 13</li>
-        <li>Problem title 14</li>
-        <li>Video 3</li>
-        <%include file="new-module.html"/>
-      </ul>
-
-    </section>
-  </section>
 
   <section class="weeks-content">
     <header>
@@ -70,14 +53,55 @@
 
     <section class="modules">
       <ul>
-        <li><a href="#">Circuit Stuff</a></li>
-        <li><a href="#">Circuit Stuff</a></li>
-        <li><a href="#">Circuit Stuff</a></li>
-        <li><a href="#">Circuit Stuff</a></li>
-        <li><a href="#">Circuit Stuff</a></li>
-        <li><a href="#">Circuit Stuff</a></li>
+        <li>
+          <h2><a href="#">Lecture Sequence</a></h2>
+
+          <ul>
+            <li><a href="#" class="problem-edit">Problem title 11</a></li>
+            <li><a href="#" class="problem-edit">Problem title 13</a></li>
+            <li><a href="#" class="problem-edit">Problem title 14</a></li>
+            <li><a href="#" class="video-edit">Video 3</a></li>
+          </ul>
+        </li>
+        <li>
+          <h2><a href="#">Lecture Sequence</a></h2>
+
+          <ul>
+            <li><a href="#" class="problem-edit">Problem title 11</a></li>
+            <li><a href="#" class="problem-edit">Problem title 13</a></li>
+            <li><a href="#" class="problem-edit">Problem title 14</a></li>
+            <li><a href="#" class="video-edit">Video 3</a></li>
+          </ul>
+        </li>
+        <li>
+          <h2><a href="#">Homework 1a</a></h2>
+
+          <ul>
+            <li><a href="#" class="problem-edit">Problem title 11</a></li>
+            <li><a href="#" class="problem-edit">Problem title 13</a></li>
+            <li><a href="#" class="problem-edit">Problem title 14</a></li>
+            <li><a href="#" class="video-edit">Video 3</a></li>
+          </ul>
+        </li>
+
+        <li class="new-module">
+          <%include file="new-module.html"/>
+        </li>
       </ul>
     </section>
   </section>
+
+  <section class="scratch-pad">
+    <header>
+      <h2>Scratchpad</h2>
+    </header>
+
+    <ul>
+      <li>Problem title 11</li>
+      <li>Problem title 13</li>
+      <li>Problem title 14</li>
+      <li>Video 3</li>
+      <%include file="new-module.html"/>
+    </ul>
+  </section>
 </section>
-</%block>

cms/templates/widgets/week-new.html

-<%block name="content">
 <section class="week-new">
   <header>
     <h1>Week 6</h1>
-    <a href="/ui_prototype">Done</a>
-  </header>
+    <p><a href="#">+ new goal</a></p>
 
-  <section class="sidebar">
     <section class="goals">
-      <header>
-        <h2>Goals</h2>
-      </header>
-      <p><a href="#">+ Add new goal</a></p>
-    </section>
-
-    <section class="scratch-pad">
-      <header>
-        <h2>Scratchpad</h2>
-      </header>
+      <h2>Weeks goals:</h2>
       <ul>
-        <%include file="new-module.html"/>
+        <li>
+          <h3>Create new goal</h2>
+          <p>Goals are overarching themes for the week</p>
+        </li>
       </ul>
     </section>
-  </section>
+  </header>
 
-  <section class="weeks-content">
-    <header>
-      <h2>Weeks Content</h2>
+  <section class="filters disabled">
+    <ul>
+      <li>
+        <label for="">Sort by</label>
+        <select>
+          <option value="">Recently Modified</option>
+        </select>
+      </li>
+
+      <li>
+        <label for="">Display</label>
+        <select>
+          <option value="">All content</option>
+        </select>
+      </li>
+      <li>
+        <select>
+          <option value="">Internal Only</option>
+        </select>
+      </li>
+
+      <li class="advanced">
+        <a href="#">Advanced filters</a>
+      </li>
+
+      <li>
       <form>
         <input type="search" name="" id="" value="" />
       </form>
+      </li>
+    </ul>
+  </section>
+
+  <section>
+  <section class="scratch-pad">
+    <header>
+      <h2>Scratch pad</h2>
     </header>
 
-    <section class="filters">
-      <ul>
-        <li>
-          <label for="">Sort by</label>
-          <select>
-            <option value="">Recently Modified</option>
-          </select>
-        </li>
+    <ul>
+      <li class="new-module">
+      <%include file="new-module.html"/>
+    </li>
+    </ul>
+  </section>
 
-        <li>
-          <label for="">Display</label>
-          <select>
-            <option value="">All content</option>
-          </select>
-        </li>
-        <li>
-          <select>
-            <option value="">Internal Only</option>
-          </select>
-        </li>
+  <section class="weeks-content">
+    <header>
+      <h2>Weeks Content</h2>
+    </header>
 
-        <li class="advanced">
-          <a href="#">Advanced filters</a>
-        </li>
-      </ul>
-    </section>
   </section>
+  </section>
+
+  <section class="new-bar">
+    <ul>
+      <li>
+        <a href="#">Existing content</a>
+      </li>
+      <li>
+        <a href="#">New Video</a>
+      </li>
+      <li>
+        <a href="#">New Problem</a>
+      </li>
+      <li>
+        <a href="#">New Lab</a>
+      </li>
+    </ul>
 </section>
-</%block>