diff --git a/src/api.coffee b/src/api.coffee
index 01fe70ec16..16b6d88063 100644
--- a/src/api.coffee
+++ b/src/api.coffee
@@ -124,6 +124,7 @@ start = ->
     url: "/api/courses/#{courseId}/practice"
 
   apiHelper TaskStepActions, TaskStepActions.load, TaskStepActions.loaded, 'GET', (id) ->
+    throw new Error('BUG: Wrong type') unless typeof id is 'string'
     url: "/api/steps/#{id}"
 
   # Go from complete to load so we fetch the new JSON
diff --git a/style/nav.less b/style/nav.less
index 0bcdd58b0d..f5ad3c5ac0 100644
--- a/style/nav.less
+++ b/style/nav.less
@@ -1,9 +1,15 @@
 .navbar.navbar, .navbar-default.navbar {
-  color: #333333;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid @border-color;
   background-color: #ffffff;
 }
 
 .navbar {
   .container-fluid { padding: 0 40px; }
 }
+
+.ui-brand-logo {
+  display: inline-block;
+  height: 30px;
+  width: 217px;
+  background-image: url('../style/resources/logo-brand.svg');
+}
diff --git a/style/question.less b/style/question.less
index c4602cccbf..1cccbcab29 100644
--- a/style/question.less
+++ b/style/question.less
@@ -3,13 +3,13 @@
 @wrong-answer-color: #c22032;
 @wrong-answer-background: #ffe0e0;
 @answer-hover-color: #e6f9fc;
-@answer-select-color: #e6f9fc; // darker than hover
+@answer-select-color: #def4f7; // darker than hover
 
 .task-step .exercise,
 .question {
   font-size: 2.1rem;
   font-weight: 400;
-  padding: 0.5em 100px;
+  padding: 10px 140px;
 
   textarea {
     margin: 1em 0;
@@ -30,7 +30,7 @@
   .free-response {
     font-style: italic;
     color: #888;
-    padding: 20px 40px;
+    padding: 15px 40px;
     display: block;
     width: 100%;
     margin: 20px 0 5px 0;
@@ -131,7 +131,7 @@
 
         .answer-content {
           display: table-cell;
-          padding: 20px 40px 20px 0;
+          padding: 15px 40px 15px 0;
         }
       }
     }
@@ -153,7 +153,6 @@
       float:left;
       background: #f3fcfd;
       transition: background-color .1s ease-in;
-      transition: padding-left .05s ease-in;
 
       &:hover {
         background-color: @answer-hover-color;
@@ -164,9 +163,9 @@
 
       .answer-input-box:checked + label.answer-label,
       .answer-input-box:checked + label.answer-label:hover {
-        font-weight: 700;
+        color: #2a2a2a;
+        font-weight: 600;
         background-color: @answer-select-color; // darker than hover
-        padding-left: 60px;
       }
 
     }
diff --git a/style/reading.less b/style/reading.less
index 973377fd4d..6f9bf3e6e9 100644
--- a/style/reading.less
+++ b/style/reading.less
@@ -1,30 +1,95 @@
-.reading-step {
-  .para {
-    margin-bottom: 1em;
+
+@physics-color-primary: #79b142;
+@physics-background-primary: #232e66;
+@physics-background-secondary: #79b142;
+// @tips-for-success-color:#bf007b;
+// @grasp-check-color:#39b531;
+// @grasp-check-color-background:#fff;
+@reading-title-font: #fonts > .sans;
+
+@import 'reading/video';
+@import 'reading/links-to-physics';
+@import 'reading/work-in-physics';
+// @import 'reading/tips-for-success';
+// @import 'reading/grasp-check';
+
+.task-step .panel-body {
+
+  .reading-step .section-opener .learning-objectives {
+    width: 100%;
+    min-height: 100px;
+    display: inline-flex;
+    color: #ffffff;
+    padding: 10px 40px;
+    background: @physics-background-secondary;
+
+    > div {
+      display: none
+    }
+
+    p {
+      color: rgba(255,255,255,.75);
+      #fonts > .sans;
+      text-transform: uppercase;
+      text-align: right;
+      margin: auto 15px;
+    }
+
+    ul {
+      margin: 0 0;
+      padding: 0 15px 0 30px;
+      border-left: 1px solid rgba(255,255,255,.4);
+    }
+
+  }
+
+  .section-opener ~ section h1 + p::first-letter, div[data-type="document-title"] ~ p::first-letter {
+    float: left;
+    #fonts > .sans(6.4rem, 6.4rem);
+    font-weight: 600;
+    color: @physics-color-primary;
+    margin: 0 4px 0 -4px;
+  }
+
+  .reading-step section[data-depth="1"], .reading-step .work-in-physics, .reading-step .links-to-physics {
+    padding: 0 140px;
+
+    section[data-depth="1"] {
+      padding: 0;
+    }
+
+  }
+
+  div[data-type="document-title"] ~ p {
+    padding: 0 140px;
+  }
+
+  p {
+    #fonts > .serif(1.75rem, 190%);
+    margin: 0 0 2.4rem 0;
+    padding: 0;
   }
 
   figure {
-    width: 100%;
-    margin-bottom: 1em;
-    text-align: center;
+    width: 60%;
+    float: left;
+    text-align: left;
+    margin: 0 30px 0 -80px;
+    padding: 0;
 
     img {
-      width: auto;
-      margin: 0 auto 1em;
+      width: 100%;
+      border: 1px solid @border-color;
+      margin: 0;
+      padding: 0;
+      align: left;
     }
+
     figcaption {
-      text-align:left;
+      font-style: italic;
+      line-height: 150%;
     }
-  }
-}
 
-@links-to-physics-color:#d22120;
-@links-to-physics-background-color:#f5f5f5;
-@tips-for-success-color:#bf007b;
-@grasp-check-color:#39b531;
-@grasp-check-color-background:#fff;
-@reading-title-font:impact;
+  }
 
-@import 'reading/links-to-physics';
-@import 'reading/tips-for-success';
-@import 'reading/grasp-check';
+}
diff --git a/style/reading/links-to-physics.less b/style/reading/links-to-physics.less
index 7667136795..1854691ea1 100644
--- a/style/reading/links-to-physics.less
+++ b/style/reading/links-to-physics.less
@@ -1,27 +1,34 @@
+.panel-body .reading-step .links-to-physics {
+  margin-top: 20px;
 
-.reading-step .note.links-to-physics {
-  margin-bottom: 1em;
+  &:before {
+    content: "Links to Physics";
+    #fonts > .sans(3.2rem, 3.2rem);
+    font-weight: 900;
+    color: @physics-color-primary;
+    background: #232e66;
+    padding: 10px 20px;
+  }
 
-  > .title {
-    background: @links-to-physics-color;
+  div[data-type="title"] {
+    margin: 10px 0 20px 0;
+    padding: 10px 20px;
+    #fonts > .sans(2rem, 2.4rem);
     color: white;
-    font-family: @reading-title-font;
-    padding: 10px 25px;
-    font-size: 2.2em;
-    width: 250px;
-  }
+    font-weight: 300;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    text-align: center;
+    background: @physics-background-secondary;
 
-  p, .para {
-    background: @links-to-physics-background-color;
-    padding: 0 25px 1em;
-    margin-bottom: 0;
+    &:before {
+      content: "\2014  ";
+    }
 
-    > .title {
-      color: @links-to-physics-color;
-      font-family: @reading-title-font;
-      font-size: 1.7em;
-      padding-top: 1em;
-      margin-bottom: 1em;
+    &:after {
+      content: "  \2014";
     }
+
   }
+
 }
diff --git a/style/reading/video.less b/style/reading/video.less
new file mode 100644
index 0000000000..9490e8429d
--- /dev/null
+++ b/style/reading/video.less
@@ -0,0 +1,9 @@
+.task-step .panel-body .-video-step {
+	padding: 20px 140px;
+
+	iframe {
+		width: 720px;
+		height: 405px;
+	}
+
+}
\ No newline at end of file
diff --git a/style/reading/work-in-physics.less b/style/reading/work-in-physics.less
new file mode 100644
index 0000000000..8f6bec8325
--- /dev/null
+++ b/style/reading/work-in-physics.less
@@ -0,0 +1,34 @@
+.panel-body .reading-step .work-in-physics {
+  margin-top: 20px;
+
+  &:before {
+    content: "Work in Physics";
+    #fonts > .sans(3.2rem, 3.2rem);
+    font-weight: 900;
+    color: @physics-color-primary;
+    background: #232e66;
+    padding: 10px 20px;
+  }
+
+  div[data-type="title"] {
+    margin: 10px 0 20px 0;
+    padding: 10px 20px;
+    #fonts > .sans(2rem, 2.4rem);
+    color: white;
+    font-weight: 300;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    text-align: center;
+    background: @physics-background-secondary;
+
+    &:before {
+      content: "\2014  ";
+    }
+
+    &:after {
+      content: "  \2014";
+    }
+
+  }
+
+}
diff --git a/style/scaffold.less b/style/scaffold.less
new file mode 100644
index 0000000000..bdfd7bfec1
--- /dev/null
+++ b/style/scaffold.less
@@ -0,0 +1,60 @@
+
+body {
+  padding-top: 60px; // For the top navbar
+  padding-bottom: 50px;
+  padding-left: 40px;
+  padding-right: 40px;
+  background: #f1f1f1;
+}
+
+.task {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.panel {
+  margin: 20px auto;
+  border-radius: 0;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+
+  &.ui-interactive {
+    .panel-body {
+      height: 100%;
+
+      iframe {
+        height: 100%;
+        width: 100%;
+        border: 1px solid black;
+      }
+    }
+  }
+
+  // Similar to a dismissable alert, line up the action button in the panel heading
+  .ui-action {
+    position: relative;
+    top: -5px;
+  }
+
+  // The little bit of gray text next to a task in the task list that says `(3 steps)`
+  .panel-heading small.details {
+    color: #ccc;
+    margin-left: .5em;
+  }
+}
+
+.panel-header {
+  margin: 20px auto;
+  border-radius: 0;
+}
+
+.panel-body {
+  padding: 20px 0;
+}
+
+.panel-footer {
+  padding: 20px 50px;
+  background-color: #f5f5f5;
+  border-top: 1px solid @border-color;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
diff --git a/style/tutor.less b/style/tutor.less
index 01af88a1e5..b0be429f16 100644
--- a/style/tutor.less
+++ b/style/tutor.less
@@ -3,9 +3,11 @@
 @import '../bower_components/bootstrap-material-design/less/material-wfont.less';
 @import '../node_modules/font-awesome/less/font-awesome.less';
 @import '../bower_components/katex/static/katex.less';
+@import './scaffold.less';
 @import './nav.less';
 @import './buttons.less';
 @import './typography.less';
+@import './reading.less';
 @import './question.less';
 
 // Override the default path to the font-awesome fonts
@@ -16,6 +18,8 @@
 @primary: @blue;
 // @text-color: @white;
 
+@border-color: #e5e5e5;
+
 // Font-awesome icons mapped to our types
 i.fa {
   &.reading::before     { content: @fa-var-newspaper-o; } // or fa-var-file-text-o
@@ -23,77 +27,12 @@ i.fa {
   &.exercise::before    { content: @fa-var-question; } // or fa-var-mortar-board
 }
 
-body {
-  padding-top: 60px; // For the top navbar
-  padding-bottom: 50px;
-  padding-left: 40px;
-  padding-right: 40px;
-  background: #f1f1f1;
-}
-
-.ui-brand-logo {
-  display: inline-block;
-  height: 30px;
-  width: 217px;
-  background-image: url('../style/resources/logo-brand.svg');
-}
-
 .ui-task-list {
   max-width: 550px;
 
   .panel { cursor: pointer; }
 }
 
-.panel {
-  max-width: 1040px;
-  margin: 20px auto;
-  border-radius: 0;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
-
-  &.ui-interactive {
-    .panel-body {
-      height: 100%;
-
-      iframe {
-        height: 100%;
-        width: 100%;
-        border: 1px solid black;
-      }
-    }
-  }
-
-  // Similar to a dismissable alert, line up the action button in the panel heading
-  .ui-action {
-    position: relative;
-    top: -5px;
-  }
-
-  // The little bit of gray text next to a task in the task list that says `(3 steps)`
-  .panel-heading small.details {
-    color: #ccc;
-    margin-left: .5em;
-  }
-}
-
-.panel-header {
-  max-width: 1040px;
-  margin: 20px auto;
-  border-radius: 0;
-}
-
-.panel-body {
-  padding: 20px 50px;
-}
-
-.panel-footer {
-  margin: 0 150px;
-  padding: 0 0 20px 0;
-  background-color: #ffffff;
-  border-top: none;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
 .exercise {
   .question {
     padding-top: .5em;
diff --git a/style/typography.less b/style/typography.less
index 30f0663f97..2b92b46cd0 100644
--- a/style/typography.less
+++ b/style/typography.less
@@ -2,6 +2,8 @@
 @import url(http://fonts.googleapis.com/css?family=Merriweather:300,300italic,700);
 @import url(http://fonts.googleapis.com/css?family=Architects+Daughter);
 
+@body-font-color: #424242;
+
 #fonts {
   .sans (@size: 1.5rem, @line-height: 3rem) {
     font-family: 'Lato', Helvetica, sans-serif;
@@ -23,9 +25,35 @@
 
 html { font-size: 62.5%; }
 
-body { #fonts > .sans }
+body { 
+  #fonts > .sans;
+  color: @body-font-color;
+}
 
 h1 {
-  #fonts > .sans(4rem, 5rem);
+  #fonts > .sans(3.8rem, 4.6rem);
+  font-weight: 900;
+  margin-bottom: 20px;
+}
+
+h2 {
+  #fonts > .sans(3rem, 4.6rem);
   font-weight: 900;
 }
+
+::-webkit-input-placeholder {
+  font-weight: 300;
+  font-style: italic;
+}
+:-moz-placeholder { /* Firefox 18- */
+  font-weight: 300;
+  font-style: italic;
+}
+::-moz-placeholder {  /* Firefox 19+ */
+  font-weight: 300;
+  font-style: italic;
+}
+:-ms-input-placeholder {  
+  font-weight: 300;
+  font-style: italic;
+}
\ No newline at end of file