diff --git a/sass/_base-extends.scss b/sass/_base-extends.scss
index 3fef87cf44..51ef608531 100644
--- a/sass/_base-extends.scss
+++ b/sass/_base-extends.scss
@@ -8,9 +8,15 @@
 
 .wrapper {
   margin: 0 auto;
-  max-width: $max-width;
-  width: grid-width(12);
+  max-width: $fg-max-width;
+  min-width: $fg-min-width;
+  width: flex-grid(12);
   text-align: left;
+
+  div.table-wrapper {
+    display: table;
+    width: flex-grid(12);
+  }
 }
 
 .button {
@@ -34,20 +40,21 @@
 .content {
   @include box-sizing(border-box);
   display: table-cell;
-  padding: $body-line-height;
+  padding: lh();
   vertical-align: top;
-  width: grid-width(9);
+  width: flex-grid(9) + flex-gutter();
 }
 
 .sidebar {
   @include box-shadow( inset -1px 0 0 #f6f6f6);
+  @include box-sizing(border-box);
   background: #e3e3e3;
   border-right: 1px solid #d3d3d3;
   display: table-cell;
   font-family: $body-font-family;
   text-shadow: 0 1px 0 #f1f1f1;
   vertical-align: top;
-  width: grid-width(3);
+  width: flex-grid(3);
   position: relative;
 
   h3 {
diff --git a/sass/_base-variables.scss b/sass/_base-variables.scss
index 0e2241999b..6f96fd715e 100644
--- a/sass/_base-variables.scss
+++ b/sass/_base-variables.scss
@@ -1,3 +1,15 @@
+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+// Flexible grid gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
 // Percentage of container calculator
 @function perc($width, $container-width: $max-width) {
   @return percentage($width / $container-width);
@@ -25,6 +37,13 @@ $gw-column: perc($column-width);
 $gw-gutter: perc($gutter-width);
 $body-line-height: golden-ratio($body-font-size, 1);
 
+//Flexible grid
+$fg-column: $column-width;
+$fg-gutter: $gutter-width;
+$fg-max-columns: $columns;
+$fg-max-width: 1400px;
+$fg-min-width: 810px;
+
 // color
 $light-gray: #ddd;
 $dark-gray: #333;
diff --git a/sass/_courseware.scss b/sass/_courseware.scss
index 7efdf60ba8..d2ab6d65b7 100644
--- a/sass/_courseware.scss
+++ b/sass/_courseware.scss
@@ -1,6 +1,5 @@
 div.course-wrapper {
-  display: table;
-  width: 100%;
+  @extend .table-wrapper;
 
   div#accordion {
     @extend .sidebar;
@@ -80,11 +79,7 @@ div.course-wrapper {
   }
 
   section.course-content {
-    @include box-sizing(border-box);
-    display: table-cell;
-    padding: $gw-gutter;
-    vertical-align: top;
-    width: grid-width(9);
+    @extend .content;
 
     ol.vert-mod {
       li {
diff --git a/sass/_fancybox.scss b/sass/_fancybox.scss
index 17dd52621e..423416469a 100644
--- a/sass/_fancybox.scss
+++ b/sass/_fancybox.scss
@@ -36,14 +36,14 @@ div#fancybox-wrap {
         text-align: left;
 
         div#enroll_error, div#login_error {
-          margin-bottom: lh();
+          -webkit-font-smoothing: antialiased;
           background-color: #F50200;
           color: #fff;
-          text-transform: uppercase;
-          letter-spacing: 1px;
           font-weight: bold;
-          -webkit-font-smoothing: antialiased;
+          letter-spacing: 1px;
+          margin-bottom: lh();
           padding: lh(.2);
+          text-transform: uppercase;
 
           &:empty {
             padding: 0;
@@ -77,20 +77,6 @@ div#fancybox-wrap {
               width: auto;
               float: none;
             }
-
-
-            ul {
-              list-style: disc outside none;
-              margin: lh(.5) 0 lh() lh();
-
-              li {
-                list-style: disc outside none;
-                margin-bottom: lh(.5);
-                color: #666;
-                font-size: 14px;
-                float: none;
-              }
-            }
           }
         }
 
diff --git a/sass/_leanmodal.scss b/sass/_leanmodal.scss
index b7d91384df..04d4f09701 100644
--- a/sass/_leanmodal.scss
+++ b/sass/_leanmodal.scss
@@ -10,47 +10,49 @@
 }
 
 div.leanModal_box {
-	@include border-radius(3px);
-	@include box-shadow(0 0 6px #000);
-	@include box-sizing(border-box);
-	display: none;
-	border: none;
-	max-width: 600px;
-	background: #fff;
-	padding: lh(2);
+  @include border-radius(3px);
+  @include box-shadow(0 0 6px #000);
+  @include box-sizing(border-box);
+  display: none;
+  border: none;
+  max-width: 600px;
+  background: #fff;
+  padding: lh(2);
 
-	h1 {
-		font-size: 24px;
+  h1 {
+    font-size: 24px;
     margin-top: 0;
-    font-family: "Oswald";
-		padding-bottom: lh();
+    padding-bottom: lh();
     border-bottom: 1px solid #eee;
     margin-bottom: lh();
   }
 
   form {
-		text-align: left;
+    text-align: left;
 
-    div#enroll_error {
-			padding-bottom: lh();
-      color: #DF8B2C;
-      text-transform: uppercase;
-      letter-spacing: 1px;
+    div#enroll_error, div#login_error {
+      -webkit-font-smoothing: antialiased;
+      background-color: #F50200;
+      color: #fff;
       font-weight: bold;
+      letter-spacing: 1px;
+      margin-bottom: lh();
+      padding: lh(.2);
+      text-transform: uppercase;
+
+      &:empty {
+        padding: 0;
+      }
     }
 
     ol {
-			li {
-				margin-bottom: lh();
-        width: grid-width(6);
-        float: left;
+      list-style: none;
 
-        &:nth-child(odd) {
-          margin-right: $gw-gutter;
-        }
+      li {
+        margin-bottom: lh(.5);
 
         &.terms, &.remember {
-				  float: none;
+          float: none;
           width: auto;
           clear: both;
           padding-top: lh();
@@ -58,9 +60,9 @@ div.leanModal_box {
         }
 
         &.honor-code {
-					width: auto;
+          width: auto;
           float: none;
-				}
+        }
 
         label {
           display: block;
@@ -68,59 +70,82 @@ div.leanModal_box {
         }
 
         #{$all-text-inputs}, textarea {
-					width: 100%;
+          width: 100%;
           @include box-sizing(border-box);
-				}
+        }
 
         input[type="checkbox"] {
-					margin-right: 10px;
+          margin-right: 10px;
+        }
+
+        ul {
+          list-style: disc outside none;
+          margin: lh(.5) 0 lh() lh();
+
+          li {
+            list-style: disc outside none;
+            margin-bottom: lh(.5);
+            color: #666;
+            font-size: 14px;
+            float: none;
+          }
         }
       }
     }
 
     input[type="button"] {
-			@include button($mit-red);
+      @include button($mit-red);
       font-size: 18px;
       padding: lh(.5);
     }
   }
+}
 
-	div#login {
-		min-width: 300px;
+div#login {
+  min-width: 400px;
 
-		ol {
-			li {
-				width: auto;
-				float: none;
-			}
-		}
-	}
+  ol {
+    li {
+      width: auto;
+      float: none;
+    }
+  }
+}
 
-	div.lost-password {
-		text-align: left;
-		margin-top: lh();
+div.lost-password {
+  text-align: left;
+  margin-top: lh();
 
-		a {
-			color: #999;
-			
-			&:hover {
-				color: #444;
-			}
-		}
-	}
+  a {
+    color: #999;
+
+    &:hover {
+      color: #444;
+    }
+  }
+}
+
+div#pwd_reset {
+  p {
+    margin-bottom: lh();
+  }
+
+  input[type="email"] {
+    margin-bottom: lh();
+  }
 }
 
 div#feedback_div{
-	form{
-		ol {
-			li {
-				float: none;
-				width: 100%;
-				
-				textarea#feedback_message {
-					height: 100px;
-				}
-			}
-		}
-	}
+  form{
+    ol {
+      li {
+        float: none;
+        width: 100%;
+
+        textarea#feedback_message {
+          height: 100px;
+        }
+      }
+    }
+  }
 }
diff --git a/sass/_profile.scss b/sass/_profile.scss
index 093b7acd1e..9a384a1cbd 100644
--- a/sass/_profile.scss
+++ b/sass/_profile.scss
@@ -3,9 +3,9 @@ div.profile-wrapper {
 
   section.user-info {
     @include box-sizing(border-box);
-    margin-right: $gw-gutter;
+    margin-right: flex-gutter();
     padding: $body-line-height;
-    width: grid-width(6);
+    width: flex-grid(6);
     background: #e3e3e3;
     border-right: 1px solid #d3d3d3;
     text-shadow: 0 1px 0 #f6f6f6;
@@ -14,9 +14,9 @@ div.profile-wrapper {
 
   section.course-info {
     @include box-sizing(border-box);
-    padding: $body-line-height;
-    width: grid-width(6);
     display: table-cell;
+    padding: $body-line-height;
+    width: flex-grid(6);
 
     ul {
       li {
diff --git a/sass/_textbook.scss b/sass/_textbook.scss
index 16e97c00ff..6e22791f2c 100644
--- a/sass/_textbook.scss
+++ b/sass/_textbook.scss
@@ -1,10 +1,10 @@
 div.book-wrapper {
-  display: table;
+  @extend .table-wrapper;
 
   ul#booknav {
     @extend .sidebar;
     @include box-sizing(border-box);
-    padding: $body-line-height;
+    padding: lh();
 
     li {
       ul {
@@ -14,11 +14,7 @@ div.book-wrapper {
   }
 
   section.book {
-    @include box-sizing(border-box);
-    padding: $body-line-height;
-    vertical-align: top;
-    width: grid-width(9) + $gw-gutter;
-    display: table-cell;
+    @extend .content;
 
     nav {
       @extend .topbar;
@@ -42,6 +38,8 @@ div.book-wrapper {
     section.page {
       img {
         border: 1px solid $border-color;
+        max-width: 100%;
+        min-width: 100%;
       }
     }
   }