Moving sass compilation to django-pipeline

static/book

@@ -1 +0,0 @@
-../../book_images/

static/circuits

@@ -1 +0,0 @@
-../../data/images/

static/common

@@ -1 +0,0 @@
-../../askbot-devel/askbot/skins/common/

static/css/README

@@ -0,0 +1,17 @@
+This project is using Sass to generate it's CSS. Sass is a CSS preprocessor that allows for faster development of CSS. For more information about sass: http://sass-lang.com
+
+To use sass all you need to do is enter:
+$ gem install sass
+
+We are also using Bourbon with sass. They are a generic set of mixins, and functions that allow for more rapid development of CSS3. Find out more about bourbon here: https://github.com/thoughtbot/bourbon
+
+To use bourbon you need to install it with:
+$ gem install bourbon
+
+Then to generate Sass files cd to templates directory and watch the sass files for development: 
+$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb
+
+To generate a compressed css file for production:
+$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb --style :compressed
+
+These will automatically generate the CSS files on save.

static/css/_gradebook.scss

@@ -0,0 +1,11 @@
+div.gradebook-wrapper {
+  @extend .table-wrapper;
+
+  section.gradebook-content {
+    @extend .content;
+
+    h1 {
+      @extend .top-header;
+    }
+  }
+}

static/css/_help.scss

@@ -0,0 +1,54 @@
+section.help.main-content {
+  padding: lh();
+
+  h1 {
+    margin-top: 0;
+    margin-bottom: lh();
+    padding-bottom: lh();
+    border-bottom: 1px solid #ddd;
+  }
+
+  p {
+    max-width: 700px;
+  }
+
+  h2 {
+    margin-top: 0;
+  }
+
+  section.self-help {
+    margin-bottom: lh();
+    margin-right: flex-gutter();
+    float: left;
+    width: flex-grid(6);
+
+    ul {
+      margin-left: flex-gutter(6);
+
+      li {
+        margin-bottom: lh(.5);
+      }
+    }
+  }
+
+  section.help-email {
+    float: left;
+    width: flex-grid(6);
+
+    dl {
+      margin-bottom: lh();
+      display: block;
+
+      dd {
+        margin-bottom: lh();
+      }
+
+      dt {
+        font-weight: bold;
+        float: left;
+        clear: left;
+        width: flex-grid(2, 6);
+      }
+    }
+  }
+}

static/css/_info.scss

@@ -0,0 +1,188 @@
+div.info-wrapper {
+  @extend .table-wrapper;
+
+  section.updates {
+    @extend .content;
+
+    > h1 {
+      @extend .top-header;
+    }
+
+    > p {
+      margin-bottom: lh();
+    }
+
+    > ol {
+      list-style: none;
+
+      > li {
+        padding-bottom: lh(.5);
+        margin-bottom: lh(.5);
+        @extend .clearfix;
+        border-bottom: 1px solid #e3e3e3;
+
+        &:first-child {
+          padding: lh(.5);
+          margin: 0 (-(lh(.5))) lh();
+          background: $cream;
+          border-bottom: 1px solid darken($cream, 10%);
+        }
+
+        h2 {
+          float: left;
+          width: flex-grid(2, 9);
+          margin: 0 flex-gutter() 0 0;
+        }
+
+        section.update-description {
+          float: left;
+          width: flex-grid(7, 9);
+          margin-bottom: 0;
+
+          li {
+            margin-bottom: lh(.5);
+          }
+
+          p {
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  section.handouts {
+    @extend .sidebar;
+    @include border-radius(0 4px 4px 0);
+    border-right: 0;
+    border-left: 1px solid #d3d3d3;
+
+    header {
+      @extend .bottom-border;
+      padding: lh(.5) lh(.75);
+
+      h1 {
+        font-size: 18px;
+        margin: 0 ;
+      }
+
+      p {
+         margin-bottom: 0;
+         margin-top: 4px;
+         font-size: 12px;
+         color: #666;
+      }
+    }
+
+    ol {
+      list-style: none;
+      background: none;
+
+      li {
+        @include box-shadow(0 1px 0 #eee);
+        border-bottom: 1px solid #d3d3d3;
+        @include box-sizing(border-box);
+        @extend .clearfix;
+        padding: 7px lh(.75);
+        background: none;
+        position: relative;
+
+        &.expandable,
+        &.collapsable {
+          h4 {
+            padding-left: 18px;
+            font-style: $body-font-size;
+            font-weight: normal;
+          }
+        }
+
+        ul {
+          background: none;
+          margin: 7px (-(lh(.75))) 0;
+
+          li {
+            padding-left: 18px + lh(.75);
+            @include box-shadow(inset 0 1px 0 #eee);
+            border-top: 1px solid #d3d3d3;
+            border-bottom: 0;
+          }
+        }
+
+        &:hover {
+          background-color: #e9e9e9;
+        }
+
+        div.hitarea {
+          background-image: url('../images/treeview-default.gif');
+          width: 100%;
+          height: 100%;
+          max-height: 20px;
+          display: block;
+          position: absolute;
+          left: lh(.75);
+          margin-left: 0;
+
+          &:hover {
+            opacity: 0.6;
+            filter: alpha(opacity=60);
+          }
+
+          &.expandable-hitarea {
+            background-position: -80px 1px;
+          }
+
+          &.collapsable-hitarea {
+            background-position: -64px -21px;
+          }
+        }
+
+        h3 {
+          border-bottom: 0;
+          text-transform: uppercase;
+          font-weight: bold;
+          color: #999;
+          @include box-shadow(none);
+          font-size: 12px;
+        }
+
+        p {
+          margin: 0;
+          text-transform: none;
+          letter-spacing: 0;
+          font-size: $body-font-size;
+
+          a {
+            padding-right: 8px;
+
+            &:before {
+              content: "•";
+              @include inline-block();
+              padding-right: 8px;
+              color: #ccc;
+            }
+
+            &:first-child {
+              &:before {
+                content: "";
+                padding-right: 0;
+              }
+            }
+          }
+        }
+
+        a {
+          @include transition();
+          color: lighten($text-color, 10%);
+          text-decoration: none;
+          @include inline-block();
+
+          &:hover {
+            color: $mit-red;
+          }
+        }
+      }
+    }
+  }
+}

static/css/_profile.scss

@@ -0,0 +1,221 @@
+div.profile-wrapper {
+  @extend .table-wrapper;
+  color: #000;
+
+  section.user-info {
+    @extend .sidebar;
+    @include border-radius(0px 4px 4px 0);
+    border-left: 1px solid #d3d3d3;
+    border-right: 0;
+
+    header {
+      padding: lh(.5) lh();
+      margin: 0 ;
+      @extend .bottom-border;
+
+      h1 {
+        font-size: 18px;
+        margin: 0;
+        padding-right: 30px;
+      }
+
+      a {
+        position: absolute;
+        top: 13px;
+        right: lh(.5);
+        text-transform: uppercase;
+        font-size: 12px;
+        color: #999;
+
+        &:hover {
+          color: #555;
+        }
+      }
+    }
+
+    ul {
+      list-style: none;
+
+      li {
+        @include transition();
+        color: lighten($text-color, 10%);
+        display: block;
+        text-decoration: none;
+        @include box-shadow(0 1px 0 #eee);
+        padding: 7px lh();
+        border-bottom: 1px solid #d3d3d3;
+        position: relative;
+
+        div#location_sub, div#language_sub {
+          font-weight: bold;
+          @include inline-block();
+
+          form {
+            width: 100%;
+          }
+
+          input {
+
+            &[type="text"] {
+              margin: lh(.5) 0;
+              width: 100%;
+              @include box-sizing(border-box);
+            }
+
+            &[type="input"]{
+            }
+          }
+
+          &:empty {
+            padding: 0;
+          }
+        }
+
+        div#description {
+          font-size: 12px;
+        }
+
+        a#change_language,
+        a#change_location,
+        a.edit-email,
+        a.name-edit,
+        a.email-edit {
+          position: absolute;
+          top: 9px;
+          right: lh(.5);
+          text-transform: uppercase;
+          font-size: 12px;
+          color: #999;
+
+          &:hover {
+            color: #555;
+          }
+        }
+
+        p {
+          font-size: 12px;
+          margin-bottom: 0;
+          margin-top: 4px;
+          color: #999;
+        }
+
+        a.deactivate {
+          color: #aaa;
+          font-style: italic;
+        }
+
+        input#pwd_reset_button {
+          background: none;
+          border: none;
+          @include box-shadow(none);
+          color: #999;
+          font-size: 12px;
+          font-weight: normal;
+          margin: 0;
+          padding: 0;
+          position: absolute;
+          right: lh(.5);
+          text-transform: uppercase;
+          top: 9px;
+
+          &:hover {
+            color: #555;
+          }
+        }
+      }
+    }
+
+    div#change_password_pop {
+      border-bottom: 1px solid #d3d3d3;
+      @include box-shadow(0 1px 0 #eee);
+      color: #4D4D4D;
+      padding: 7px lh();
+
+      h2 {
+        margin-top: 0;
+        font-weight: bold;
+        text-transform: uppercase;
+        font-size: $body-font-size;
+      }
+    }
+  }
+
+  section.course-info {
+    @extend .content;
+
+    header {
+      @extend h1.top-header;
+      @extend .clearfix;
+
+      h1 {
+        margin: 0;
+        float: left;
+      }
+    }
+
+    div#grade-detail-graph {
+      width: 100%;
+      min-height: 300px;
+    }
+
+    > ol {
+      border-top: 1px solid #e3e3e3;
+      list-style: none;
+      margin-top: lh();
+
+      > li {
+        @extend .clearfix;
+        border-bottom: 1px solid #e3e3e3;
+        display: table;
+        padding: lh() 0;
+        width: 100%;
+
+        &:last-child {
+          border-bottom: 0px;
+        }
+
+        h2 {
+          border-right: 1px dashed #ddd;
+          @include box-sizing(border-box);
+          display: table-cell;
+          margin: 0;
+          padding: 0;
+          padding-right: flex-gutter(9);
+          width: flex-grid(2, 9);
+        }
+
+        ol.sections {
+          display: table-cell;
+          list-style: none;
+          padding-left: flex-gutter(9);
+          width: flex-grid(7, 9);
+
+          > li {
+            padding:0 0 lh() 0;
+
+            &:first-child {
+              padding-top: 0;
+            }
+
+            &:last-child {
+              border-bottom: 0;
+            }
+
+            h3 {
+              color: #666;
+            }
+
+            ol {
+              list-style: none;
+
+              li {
+                display: inline-block;
+                padding-right: 1em;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

static/css/_textbook.scss

@@ -0,0 +1,132 @@
+div.book-wrapper {
+  @extend .table-wrapper;
+
+  section.book-sidebar {
+    @extend .sidebar;
+    @include box-sizing(border-box);
+    @extend .tran;
+
+    ul#booknav {
+      font-size: 12px;
+
+      a {
+        color: #000;
+
+        &:hover {
+          color: #666;
+        }
+      }
+
+      li {
+        background: none;
+        padding-left: 30px;
+
+        div.hitarea {
+          margin-left: -22px;
+          background-image: url('../images/treeview-default.gif');
+          position: relative;
+          top: 4px;
+
+          &:hover {
+            opacity: 0.6;
+            filter: alpha(opacity=60);
+          }
+        }
+
+        ul {
+          background: none;
+        }
+      }
+
+      > li {
+        border-bottom: 1px solid #d3d3d3;
+        @include box-shadow(0 1px 0 #eee);
+        padding: 7px 7px 7px 30px;
+      }
+    }
+  }
+
+  section.book {
+    @extend .content;
+
+    nav {
+      @extend .topbar;
+      @extend .clearfix;
+
+      a {
+        @extend .block-link;
+        padding: 0 lh();
+      }
+
+      ul {
+        @extend .clearfix;
+
+        li {
+          &.last {
+            float: left;
+            display: block;
+
+            a {
+              @include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%));
+              border-right: 1px solid darken(#f6efd4, 20%);
+              border-left: 0;
+            }
+          }
+
+          &.next {
+            display: block;
+            float: right;
+          }
+        }
+      }
+
+      &.bottom-nav {
+        margin-top: lh();
+        margin-bottom: -(lh());
+        border-bottom: 0;
+        border-top: 1px solid #EDDFAA;
+      }
+    }
+
+    section.page {
+      text-align: center;
+
+      img {
+        border: 1px solid $border-color;
+        max-width: 100%;
+      }
+    }
+  }
+
+  &.closed {
+    section.book-sidebar {
+      width: flex-grid(.6);
+
+      header#open_close_accordion {
+        padding: 0;
+
+        a {
+          background-image: url('../images/slide-right-icon.png');
+        }
+
+        h2 {
+          visibility: hidden;
+          width: 10px;
+          padding: 0;
+        }
+      }
+
+      ul#booknav {
+        visibility: hidden;
+        width: 10px;
+        padding: 0;
+        overflow: hidden;
+        max-height: 100px;
+      }
+    }
+
+    section.course-content {
+      width: flex-grid(11.5) + flex-gutter();
+    }
+  }
+}

static/css/application.scss

@@ -0,0 +1,18 @@
+@import "bourbon/bourbon";
+
+// Base layout
+@import "base/reset", "base/font-face";
+@import "base/variables", "base/functions", "base/extends", "base/base";
+@import "layout/layout", "layout/header", "layout/footer", "layout/calculator", "layout/leanmodal";
+@import "plugins/jquery-ui-1.8.16.custom", "plugins/jquery.qtip.min";
+
+// pages
+@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier";
+@import "textbook";
+@import "info";
+@import "profile";
+@import "gradebook";
+@import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki", "wiki/table";
+@import "help";
+
+@import "discussion/askbot-original", "discussion/discussion","discussion/sidebar", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar", "discussion/modals", "discussion/profile", "discussion/badges";

static/css/base/_base.scss

@@ -0,0 +1,77 @@
+:focus {
+  outline-color: #ccc;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  a {
+    color: #000;
+  }
+}
+
+h1 {
+  font-size:1.6em;
+  margin:20px 0 10px 0;
+}
+
+h2 {
+  font-size: $body-font-size;
+  font-weight: bold;
+  letter-spacing: 1px;
+  margin:20px 0 10px 0;
+  text-transform: uppercase;
+}
+
+p {
+  margin-bottom: $body-line-height;
+}
+
+em {
+  font-style: italic;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+#{$all-text-inputs}, textarea {
+  @include box-shadow(0 -1px 0 #fff);
+  @include linear-gradient(#eee, #fff);
+  border: 1px solid #999;
+  font: $body-font-size $body-font-family;
+  padding: 4px;
+
+  &:focus {
+    border-color: $mit-red;
+  }
+}
+
+a {
+  color: $mit-red;
+
+  &:link {
+    color: $mit-red;
+  }
+
+  &:visited {
+    color: darken($mit-red, 10%);
+  }
+
+  &:link, &:visited {
+    text-decoration:none;
+  }
+
+  p &, li > &, span > &, .inline {
+    border-bottom: 1px solid #bbb;
+    font-style: italic;
+  }
+
+  &:hover, &:focus {
+    color: #000;
+  }
+}
+
+input[type="submit"], input[type="button"], button {
+  @extend .button;
+}
+

static/css/base/_extends.scss

@@ -0,0 +1,251 @@
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.wrapper {
+  margin: 0 auto;
+  max-width: $fg-max-width;
+  min-width: $fg-min-width;
+  text-align: left;
+  width: flex-grid(12);
+
+  div.table-wrapper {
+    display: table;
+    width: flex-grid(12);
+  }
+}
+
+h1.top-header {
+  background: #f3f3f3;
+  border-bottom: 1px solid #e3e3e3;
+  margin: (-(lh())) (-(lh())) lh();
+  padding: lh();
+}
+
+.button {
+  border: 1px solid darken(#888, 10%);
+  @include border-radius(3px);
+  @include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
+  color: #fff;
+  cursor: pointer;
+  font: bold $body-font-size $body-font-family;
+  @include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
+  padding: 4px 8px;
+  text-decoration: none;
+  text-shadow: none;
+  -webkit-font-smoothing: antialiased;
+
+  &:hover, &:focus {
+    @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
+    @include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
+    border: 1px solid darken(#888, 20%);
+  }
+}
+
+.light-button, a.light-button {
+  @include box-shadow(inset 0 1px 0 #fff);
+  @include linear-gradient(#fff, lighten(#888, 40%));
+  @include border-radius(3px);
+  border: 1px solid #ccc;
+  padding: 4px 8px;
+  color: #666;
+  font: normal $body-font-size $body-font-family;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
+
+  &:hover, &:focus {
+    @include linear-gradient(#fff, lighten(#888, 37%));
+    border: 1px solid #ccc;
+    text-decoration: none;
+  }
+}
+
+.action-link {
+  a {
+    color: $mit-red;
+
+    &:hover {
+      text-decoration: none;
+      color: darken($mit-red, 20%);
+    }
+  }
+}
+
+.content {
+  @include box-shadow(inset 0 0 2px 3px #f3f3f3);
+  @include box-sizing(border-box);
+  display: table-cell;
+  padding: lh();
+  vertical-align: top;
+  width: flex-grid(9) + flex-gutter();
+
+  @media print {
+    @include box-shadow(none);
+  }
+}
+
+.sidebar {
+  background: #e3e3e3;
+  @include border-radius(4px 0 0 4px);
+  border-right: 1px solid #d3d3d3;
+  @include box-shadow( inset 0 0 0 1px #f6f6f6);
+  @include box-sizing(border-box);
+  display: table-cell;
+  font-family: $body-font-family;
+  position: relative;
+  text-shadow: 0 1px 0 #f1f1f1;
+  vertical-align: top;
+  width: flex-grid(3);
+
+  h1, h2 {
+   font-size: 18px;
+   font-weight: bold;
+   letter-spacing: 0;
+   text-transform: none;
+  }
+
+  a {
+    font-style: normal;
+    border: none;
+  }
+
+  .bottom-border {
+    @include box-shadow(0 1px 0 #eee);
+    border-bottom: 1px solid #d3d3d3;
+  }
+
+  @media print {
+    display: none;
+  }
+
+  h3 {
+    border: none;
+    border-bottom: 1px solid #d3d3d3;
+    @extend .bottom-border;
+    background: none;
+    color: #000;
+    font-weight: normal;
+    margin: 0;
+    overflow: hidden;
+
+    a {
+      color: lighten($text-color, 10%);
+      display: block;
+      font-size: $body-font-size;
+      padding: 7px 7px 7px 30px;
+      text-decoration: none;
+      @include transition();
+
+      &:hover {
+        background: #efefef;
+        @include box-shadow(0 1px 0 #fff);
+      }
+    }
+
+    span.ui-icon {
+      background-image: url(images/ui-icons_454545_256x240.png);
+    }
+
+    &.active {
+      background: none;
+      border: 0;
+      border-bottom: 1px solid #bbb;
+      @include box-shadow(none);
+      color: #000;
+      font-weight: bold;
+
+      a {
+        color: #000;
+      }
+    }
+  }
+
+  header#open_close_accordion {
+    border-bottom: 1px solid #d3d3d3;
+    @include box-shadow(0 1px 0 #eee);
+    padding: lh(.5) lh();
+    position: relative;
+
+    h2 {
+      padding-right: 20px;
+      margin: 0;
+    }
+
+    a {
+      background: #eee url('../images/slide-left-icon.png') center center no-repeat;
+      border: 1px solid #D3D3D3;
+      @include border-radius(3px 0 0 3px);
+      height: 16px;
+      padding: 8px;
+      position: absolute;
+      right: -1px;
+      text-indent: -9999px;
+      top: 6px;
+      width: 16px;
+
+      &:hover {
+        background-color: white;
+      }
+    }
+  }
+
+  a.button {
+    text-decoration: none;
+  }
+}
+
+.topbar {
+  @extend .clearfix;
+  background: $cream;
+  border-bottom: 1px solid darken($cream, 10%);
+  @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
+  font-size: 12px;
+  margin: (-$body-line-height) (-$body-line-height) $body-line-height;
+  text-shadow: 0 1px 0 #fff;
+  line-height: 46px;
+  height:46px;
+
+  @media print {
+    display: none;
+  }
+
+  a {
+    border-bottom: 0;
+    color: darken($cream, 80%);
+
+    &:hover {
+      color: darken($cream, 60%);
+      text-decoration: none;
+    }
+
+    &.block-link {
+      background: darken($cream, 5%);
+      border-left: 1px solid darken($cream, 20%);
+      @include box-shadow(inset 1px 0 0 lighten($cream, 5%));
+      display: block;
+      text-transform: uppercase;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+}
+
+.tran {
+  @include transition( all, .2s, $ease-in-out-quad);
+}
+
+p.ie-warning {
+  display: block !important;
+  line-height: 1.3em;
+  background: yellow;
+  padding: lh();
+  text-align: left;
+  margin-bottom: 0;
+}

static/css/base/_font-face.scss

@@ -0,0 +1,125 @@
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 25, 2012 05:06:34 PM America/New_York */
+
+
+// Not used in UI
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-Light-webfont.eot');
+//     src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
+//     font-weight: 300;
+//     font-style: normal;
+
+// }
+
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-LightItalic-webfont.eot');
+//     src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
+//     font-weight: 300;
+//     font-style: italic;
+
+// }
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-Regular-webfont.eot');
+    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
+    font-weight: 600;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-Italic-webfont.eot');
+    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
+    font-weight: 400;
+    font-style: italic;
+
+}
+
+// Not used in UI
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-Semibold-webfont.eot');
+//     src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
+//     font-weight: 600;
+//     font-style: normal;
+
+// }
+
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot');
+//     src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
+//     font-weight: 600;
+//     font-style: italic;
+
+// }
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-Bold-webfont.eot');
+    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
+    font-weight: 700;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-BoldItalic-webfont.eot');
+    src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
+    font-weight: 700;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-ExtraBold-webfont.eot');
+    src: url('../fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
+    font-weight: 800;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot');
+    src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg');
+    font-weight: 800;
+    font-style: italic;
+
+}
+

static/css/base/_functions.scss

@@ -0,0 +1,28 @@
+// 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);
+}
+
+// Line-height
+@function lh($amount: 1) {
+  @return $body-line-height * $amount;
+}
+
+@mixin hide-text(){
+  text-indent: -9999px;
+  overflow: hidden;
+  display: block;
+}

static/css/base/_reset.scss

@@ -0,0 +1,102 @@
+/* 
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com 
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong,  var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+body {
+    line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section { 
+    display:block;
+}
+
+nav ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000; 
+    font-style:italic;
+    font-weight:bold;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;   
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}

static/css/base/_variables.scss

@@ -0,0 +1,32 @@
+// Variables
+// ---------------------------------------- //
+
+// fonts
+$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;;
+$body-font-size: 14px;
+
+// grid
+$columns: 12;
+$column-width: 80px;
+$gutter-width: 25px;
+$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width);
+
+$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;
+$mit-red: #993333;
+$cream: #F6EFD4;
+
+$text-color: $dark-gray;
+$border-color: $light-gray;

static/css/courseware/_amplifier.scss

@@ -0,0 +1,101 @@
+// JM MOSFET AMPLIFIER
+div#graph-container {
+  @extend .clearfix;
+  border-top: 1px solid #ddd;
+  padding-top: lh(1.0);
+   
+  canvas#graph {
+    width: flex-grid(4.5, 9);
+    float: left;
+    margin-right: flex-gutter(9); 
+  }
+
+  div.graph-controls {
+    width: flex-grid(4.5, 9);
+    float: left;
+
+    select#musicTypeSelect {
+      display: block;
+      margin-bottom: lh();
+    }
+
+    div#graph-output {
+      display: block;
+      margin-bottom: lh();
+    }
+
+    div#graph-listen {
+      display: block;
+      margin-bottom: lh();
+    }
+
+    p {
+      margin-bottom: lh(.5);
+    }
+
+    div#label {
+      display: inline-block;
+    }
+
+    input#playButton {
+      display: block;
+    }
+  }
+}
+
+div#schematic-container {
+  @extend .clearfix;
+
+  canvas {
+    width: flex-grid(4.5, 9);
+    float: left;
+    margin-right: flex-gutter(9); 
+  }
+
+  div.schematic-sliders {
+    width: flex-grid(4.5, 9);
+    float: left;
+
+    div.slider-label#vs {
+      margin-top: lh(2.0);
+    }
+
+    div.slider-label {
+      margin-bottom: lh(0.5);
+    }
+
+    div.slider {
+      margin-bottom: lh(1);
+    }
+  }
+}
+//End JM MOSFET AMPLIFIER
+
+// Labels
+div.graph-controls, div#graph-listen {
+
+  label {
+    @include border-radius(2px);
+    font-weight: bold;
+    padding: 3px;
+  }
+  //MOSFET AMPLIFIER
+  label[for="vinCheckbox"], label[for="vinRadioButton"]{
+      color: desaturate(#00bfff, 50%);
+  }
+  label[for="voutCheckbox"], label[for="voutRadioButton"]{
+      color: darken(#ffcf48, 20%);
+  }
+  label[for="vrCheckbox"], label[for="vrRadioButton"]{
+      color: desaturate(#1df914, 40%);
+  }
+  //RC Filters
+  label[for="vcCheckbox"], label[for="vcRadioButton"]{
+      color: darken(#ffcf48, 20%);
+  }
+  //RLC Series
+  label[for="vlCheckbox"], label[for="vlRadioButton"]{
+      color: desaturate(#d33682, 40%);
+  }
+}
+

static/css/courseware/_courseware.scss

@@ -0,0 +1,236 @@
+div.course-wrapper {
+  @extend .table-wrapper;
+
+  ul, ol {
+    list-style: none;
+  }
+
+  section.course-content {
+    @extend .content;
+
+    h1 {
+      @extend .top-header;
+    }
+
+    p {
+      margin-bottom: lh();
+
+      &:empty {
+        display: none;
+        margin-bottom: 0;
+      }
+    }
+
+    ul {
+      li {
+        margin-bottom: lh(.5);
+      }
+    }
+
+    .problem-set {
+      position: relative;
+      @extend .clearfix;
+
+      h2 {
+        margin-top: 0;
+        margin-bottom: 15px;
+        width: flex-grid(2, 9);
+        padding-right: flex-gutter(9);
+        border-right: 1px dashed #ddd;
+        @include box-sizing(border-box);
+        display: table-cell;
+        vertical-align: top;
+
+        @media screen and (max-width:1120px) {
+          display: block;
+          width: auto;
+          border-right: 0;
+        }
+
+        @media print {
+          display: block;
+          width: auto;
+          border-right: 0;
+        }
+      }
+
+      section.problem {
+        display: table-cell;
+        width: flex-grid(7, 9);
+        padding-left: flex-gutter(9);
+
+        @media screen and (max-width:1120px) {
+          display: block;
+          width: auto;
+          padding: 0;
+        }
+
+        @media print {
+          display: block;
+          width: auto;
+          padding: 0;
+
+          canvas, img {
+            page-break-inside: avoid;
+          }
+        }
+
+        span {
+          &.unanswered, &.ui-icon-bullet {
+            @include inline-block();
+            background: url('../images/unanswered-icon.png') center center no-repeat;
+            height: 14px;
+            position: relative;
+            top: 4px;
+            width: 14px;
+          }
+
+          &.correct, &.ui-icon-check {
+            @include inline-block();
+            background: url('../images/correct-icon.png') center center no-repeat;
+            height: 20px;
+            position: relative;
+            top: 6px;
+            width: 25px;
+          }
+
+          &.incorrect, &.ui-icon-close {
+            @include inline-block();
+            background: url('../images/incorrect-icon.png') center center no-repeat;
+            height: 20px;
+            width: 20px;
+            position: relative;
+            top: 6px;
+          }
+        }
+      }
+
+      div {
+        > span {
+          display: block;
+          margin-bottom: lh(.5);
+        }
+      }
+
+      input[type="text"] {
+        display: inline-block;
+      }
+
+      center {
+        display: block;
+        margin: lh() 0;
+        border: 1px solid #ccc;
+        padding: lh();
+      }
+
+      section.action {
+        margin-top: lh();
+      }
+    }
+
+    section.problems-wrapper, div#seq_content {
+      @extend .problem-set;
+    }
+
+    section.problems-wrapper {
+      display: table;
+      width: 100%;
+
+      @media screen and (max-width:1120px) {
+        display: block;
+        width: auto;
+      }
+    }
+
+    div#seq_content {
+      h1 {
+        background: none;
+        margin-bottom: lh();
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+    }
+
+    ol.vert-mod {
+      > li {
+        @extend .clearfix;
+        @extend .problem-set;
+        border-bottom: 1px solid #ddd;
+        margin-bottom: 15px;
+        padding: 0 0 15px;
+
+        &:last-child {
+          border-bottom: none;
+          margin-bottom: 0;
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    section.tutorials {
+      ul {
+        list-style: disc outside none;
+        margin-left: lh();
+      }
+    }
+
+    div.staff_info {
+      @include clearfix();
+      white-space: pre-wrap;
+      border-top: 1px solid #ccc;
+      padding-top: lh();
+      margin-top: lh();
+      line-height: lh();
+      font-family: Consolas, "Lucida Console", Monaco, "Courier New", Courier, monospace;
+    }
+
+    div.ui-slider {
+      border: 1px solid #aaa;
+      background: #ddd;
+      @include box-shadow(inset 0 1px 0 #eee);
+      @include border-radius(0);
+
+      a.ui-slider-handle {
+        @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
+        background: $mit-red url(../images/slider-bars.png) center center no-repeat;
+        border: 1px solid darken($mit-red, 20%);
+        cursor: pointer;
+
+        &:hover, &:focus {
+          background-color: lighten($mit-red, 10%);
+          outline: none;
+        }
+      }
+    }
+  }
+
+  &.closed {
+    section.course-index {
+      width: flex-grid(.6);
+
+      header#open_close_accordion {
+        padding: 0;
+
+        a {
+          background-image: url('../images/slide-right-icon.png');
+        }
+
+        h2 {
+          visibility: hidden;
+          width: 10px;
+          padding: 0;
+        }
+      }
+
+      div#accordion {
+        visibility: hidden;
+        width: 10px;
+        padding: 0;
+      }
+    }
+
+    section.course-content {
+      width: flex-grid(11.5) + flex-gutter();
+    }
+  }
+}

static/css/courseware/_sequence-nav.scss

@@ -0,0 +1,310 @@
+nav.sequence-nav {
+  @extend .topbar;
+  @include box-sizing(border-box);
+  margin-bottom: $body-line-height;
+  position: relative;
+
+  ol {
+    border-bottom: 1px solid darken($cream, 20%);
+    @include box-sizing(border-box);
+    display: table;
+    padding-right: flex-grid(1, 9);
+    width: 100%;
+
+    a {
+      @extend .block-link;
+    }
+
+    li {
+      border-left: 1px solid darken($cream, 20%);
+      display: table-cell;
+      min-width: 20px;
+
+      &:first-child {
+        border-left: none;
+      }
+
+      .inactive {
+        background-repeat: no-repeat;
+
+        &:hover {
+          background-color: lighten($cream, 3%);
+        }
+      }
+
+      .visited {
+        background-color: #DCCDA2;
+        background-repeat: no-repeat;
+        @include box-shadow(inset 0 0 3px darken(#dccda2, 10%));
+
+        &:hover {
+          background-color: $cream;
+          background-position: center center;
+        }
+      }
+
+      .active {
+        background-color: #fff;
+        background-repeat: no-repeat;
+        @include box-shadow(0 1px 0 #fff);
+
+        &:hover {
+          background-color: #fff;
+          background-position: center;
+        }
+      }
+
+      a {
+        background-position: center center;
+        border: none;
+        cursor: pointer;
+        display: block;
+        height: 17px;
+        padding: 15px 0 14px;
+        @include transition(all, .4s, $ease-in-out-quad);
+        width: 100%;
+
+        // @media screen and (max-width: 800px) {
+          //   padding: 12px 8px;
+          // }
+
+          //video
+          &.seq_video_inactive {
+            @extend .inactive;
+            background-image: url('../images/sequence-nav/video-icon-normal.png');
+            background-position: center;
+          }
+
+          &.seq_video_visited {
+            @extend .visited;
+            background-image: url('../images/sequence-nav/video-icon-visited.png');
+            background-position: center;
+          }
+
+          &.seq_video_active {
+            @extend .active;
+            background-image: url('../images/sequence-nav/video-icon-current.png');
+            background-position: center;
+          }
+
+          //other
+          &.seq_other_inactive {
+            @extend .inactive;
+            background-image: url('../images/sequence-nav/document-icon-normal.png');
+            background-position: center;
+          }
+
+          &.seq_other_visited {
+            @extend .visited;
+            background-image: url('../images/sequence-nav/document-icon-visited.png');
+            background-position: center;
+          }
+
+          &.seq_other_active {
+            @extend .active;
+            background-image: url('../images/sequence-nav/document-icon-current.png');
+            background-position: center;
+          }
+
+          //vertical & problems
+          &.seq_vertical_inactive, &.seq_problem_inactive {
+            @extend .inactive;
+            background-image: url('../images/sequence-nav/list-icon-normal.png');
+            background-position: center;
+          }
+
+          &.seq_vertical_visited, &.seq_problem_visited {
+            @extend .visited;
+            background-image: url('../images/sequence-nav/list-icon-visited.png');
+            background-position: center;
+          }
+
+          &.seq_vertical_active, &.seq_problem_active {
+            @extend .active;
+            background-image: url('../images/sequence-nav/list-icon-current.png');
+            background-position: center;
+          }
+        }
+
+      p {
+        // display: none;
+        // visibility: hidden;
+        background: #333;
+        color: #fff;
+        line-height: lh();
+        margin: 0px 0 0 -5px;
+        opacity: 0;
+        padding: 6px;
+        position: absolute;
+        text-shadow: 0 -1px 0 #000;
+        @include transition(all, .6s, $ease-in-out-quart);
+        white-space: pre-wrap;
+        z-index: 99;
+
+        &.shown {
+          margin-top: 4px;
+          opacity: 1;
+        }
+
+        &:empty {
+          background: none;
+
+          &::after {
+            display: none;
+          }
+        }
+
+        &::after {
+          background: #333;
+          content: " ";
+          display: block;
+          height: 10px;
+          left: 18px;
+          position: absolute;
+          top: -5px;
+          @include transform(rotate(45deg));
+          width: 10px;
+        }
+      }
+    }
+  }
+
+  ul {
+    margin-right: 1px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: flex-grid(1, 9);
+
+    li {
+      float: left;
+      width: 50%;
+
+      &.prev, &.next {
+
+        a {
+          background-color: darken($cream, 5%);
+          background-position: center center;
+          background-repeat: no-repeat;
+          border-left: 1px solid darken(#f6efd4, 20%);
+          @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
+          @include box-sizing(border-box);
+          cursor: pointer;
+          display: block;
+          text-indent: -9999px;
+
+          &:hover {
+            background-color: none;
+            color: darken($cream, 60%);
+            text-decoration: none;
+            text-decoration: none;
+          }
+
+          &.disabled {
+            cursor: normal;
+            opacity: .4;
+          }
+        }
+      }
+
+      &.prev {
+        a {
+          background-image: url('../images/sequence-nav/previous-icon.png');
+
+          &:hover {
+            background-color: none;
+          }
+        }
+      }
+
+      &.next {
+        a {
+          background-image: url('../images/sequence-nav/next-icon.png');
+
+          &:hover {
+            background-color: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+section.course-content {
+
+  div#seq_content {
+    margin-bottom: 60px;
+  }
+
+  nav.sequence-bottom {
+    bottom: (-(lh()));
+    position: relative;
+
+    ul {
+      @extend .clearfix;
+      background-color: darken(#F6EFD4, 5%);
+      background-color: darken($cream, 5%);
+      border: 1px solid darken(#f6efd4, 20%);
+      border-bottom: 0;
+      @include border-radius(3px 3px 0 0);
+      @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
+      margin: 0 auto;
+      overflow: hidden;
+      width: 106px;
+
+      li {
+        float: left;
+
+        &.prev, &.next {
+          margin-bottom: 0;
+
+          a {
+            background-position: center center;
+            background-repeat: no-repeat;
+            border-bottom: none;
+            display: block;
+            display: block;
+            padding: lh(.75) 4px;
+            text-indent: -9999px;
+            @include transition(all, .4s, $ease-in-out-quad);
+            width: 45px;
+
+            &:hover {
+              background-color: darken($cream, 10%);
+              color: darken(#F6EFD4, 60%);
+              color: darken($cream, 60%);
+              opacity: .5;
+              text-decoration: none;
+            }
+
+            &.disabled {
+              background-color: lighten($cream, 10%);
+              opacity: .4;
+            }
+          }
+        }
+
+        &.prev {
+          a {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+
+            &:hover {
+              background-color: none;
+            }
+          }
+        }
+
+        &.next {
+          a {
+            background-image: url('../images/sequence-nav/next-icon.png');
+
+            &:hover {
+              background-color: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

static/css/courseware/_sidebar.scss

@@ -0,0 +1,91 @@
+section.course-index {
+  @extend .sidebar;
+  @extend .tran;
+
+  div#accordion {
+
+    h3 {
+      overflow: hidden;
+      margin: 0;
+
+      &:last-child {
+        @include box-shadow(none);
+      }
+
+      &.ui-accordion-header {
+        color: #000;
+
+        a {
+          font-size: $body-font-size;
+          color: lighten($text-color, 10%);
+        }
+
+        &.ui-state-hover {
+          border: none;
+          border-bottom: 1px solid #d3d3d3;
+        }
+
+        &.ui-state-active {
+          @extend .active;
+        }
+      }
+    }
+
+    ul.ui-accordion-content {
+      @include border-radius(0);
+      @include box-shadow( inset -1px 0 0 #e6e6e6);
+      background: #dadada;
+      border: none;
+      border-bottom: 1px solid #c3c3c3;
+      font-size: 12px;
+      margin: 0;
+      // overflow: visible;
+
+      li {
+        position: relative;
+
+        &.active {
+          font-weight: bold;
+
+          p.subtitle {
+            font-weight: normal;
+          }
+
+          // &:after {
+          //   content: " ";
+          //   width: 16px;
+          //   height: 16px;
+          //   position: absolute;
+          //   right: -35px;
+          //   top: 7px;
+          //   display: block;
+          //   background-color: #dadada;
+          //   border-top: 1px solid #c3c3c3;
+          //   border-right: 1px solid #c3c3c3;
+          //   z-index: 99;
+          //   @include transform(rotate(45deg));
+          // }
+        }
+
+        a {
+          text-decoration: none;
+          margin-bottom: lh(.5);
+          display: block;
+          color: #000;
+
+          &:hover {
+            color: #666;
+          }
+
+          p {
+            margin-bottom: 0;
+
+            &.subtitle {
+              color: #666;
+            }
+          }
+        }
+      }
+    }
+  }
+}

static/css/courseware/_video.scss

@@ -0,0 +1,368 @@
+section.course-content {
+  div.video-subtitles {
+    padding: 6px lh();
+    margin: 0 (-(lh()));
+    border-top: 1px solid #e1e1e1;
+    border-bottom: 1px solid #e1e1e1;
+    background: #f3f3f3;
+    position: relative;
+    @include clearfix();
+
+    div.video-wrapper {
+      float: left;
+      width: flex-grid(6, 9);
+      margin-right: flex-gutter(9);
+
+      div.video-player {
+        position: relative;
+        padding-bottom: 56.25%;
+        padding-top: 30px;
+        height: 0;
+        overflow: hidden;
+
+        object {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        iframe#html5_player {
+          border: none;
+          display: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      // ul {
+      //   float: left;
+
+      //   li {
+      //     margin-top: 5px;
+      //     display: inline-block;
+      //     cursor: pointer;
+      //     border: 0;
+      //     padding: 0;
+
+      //     div {
+      //       &:empty {
+      //         display: none;
+      //       }
+      //     }
+      //   }
+      // }
+
+      section.video-controls {
+        @extend .clearfix;
+        background: #333;
+        position: relative;
+        border: 1px solid #000;
+        border-top: 0;
+        color: #ccc;
+
+        div#slider {
+          @extend .clearfix;
+          @include border-radius(0);
+          @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
+          background: #c2c2c2;
+          border: none;
+          border-top: 1px solid #000;
+          border-bottom: 1px solid #000;
+          height: 7px;
+          @include transition(height 2.0s ease-in-out);
+
+          div.ui-widget-header {
+            background: #777;
+            @include box-shadow(inset 0 1px 0 #999);
+          }
+
+          .ui-tooltip.qtip .ui-tooltip-content {
+            background: $mit-red;
+            border: 1px solid darken($mit-red, 20%);
+            @include border-radius(2px);
+            @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
+            color: #fff;
+            font: bold 12px $body-font-family;
+            margin-bottom: 6px;
+            padding: 4px;
+            text-align: center;
+            -webkit-font-smoothing: antialiased;
+            text-shadow: 0 -1px 0 darken($mit-red, 10%);
+            overflow: visible;
+
+            &::after {
+              content: " ";
+              width: 7px;
+              height: 7px;
+              display: block;
+              position: absolute;
+              bottom: -5px;
+              left: 50%;
+              margin-left: -3px;
+              @include transform(rotate(45deg));
+              background: $mit-red;
+              border-right: 1px solid darken($mit-red, 20%);
+              border-bottom: 1px solid darken($mit-red, 20%);
+            }
+          }
+
+          a.ui-slider-handle {
+            @include border-radius(15px);
+            @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
+            background: $mit-red url(../images/slider-handle.png) center center no-repeat;
+            border: 1px solid darken($mit-red, 20%);
+            cursor: pointer;
+            height: 15px;
+            margin-left: -7px;
+            top: -4px;
+            width: 15px;
+            @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
+            @include background-size(50%);
+
+            &:focus, &:hover {
+              background-color: lighten($mit-red, 10%);
+              outline: none;
+            }
+          }
+
+          &:hover {
+            height: 14px;
+            margin-top: -7px;
+
+            a.ui-slider-handle {
+              @include border-radius(20px);
+              height: 20px;
+              margin-left: -10px;
+              top: -4px;
+              width: 20px;
+            }
+          }
+        }
+
+        ul.vcr {
+          float: left;
+          margin-right: lh();
+
+          li {
+            float: left;
+            margin-bottom: 0;
+
+            a {
+              @include box-shadow(1px 0 0 #555);
+              border-bottom: none;
+              border-right: 1px solid #000;
+              display: block;
+              cursor: pointer;
+              height: 14px;
+              padding: lh(.75);
+              text-indent: -9999px;
+              width: 14px;
+              @include transition();
+
+              &.play {
+                background: url('../images/play-icon.png') center center no-repeat;
+
+                &:hover {
+                  background-color: #444;
+                }
+              }
+
+              &.pause {
+                background: url('../images/pause-icon.png') center center no-repeat;
+
+                &:hover {
+                  background-color: #444;
+                }
+              }
+
+            }
+
+            div#vidtime {
+              padding-left: lh(.75);
+              font-weight: bold;
+              line-height: 46px; //height of play pause buttons
+              -webkit-font-smoothing: antialiased;
+            }
+          }
+        }
+
+        div.secondary-controls {
+          float: right;
+
+          div.speeds {
+            border-left: 1px solid #000;
+            border-right: 1px solid #000;
+            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            float: left;
+            line-height: 0;
+            padding-right: lh(.25);
+            margin-right: 0;
+            @include transition();
+            cursor: pointer;
+            -webkit-font-smoothing: antialiased;
+
+            h3 {
+              float: left;
+              padding: 0 lh(.25) 0 lh(.5);
+              font-weight: normal;
+              text-transform: uppercase;
+              font-size: 12px;
+              letter-spacing: 1px;
+              color: #999;
+              line-height: 46px; //height of play pause buttons
+            }
+
+            p.active {
+              @include inline-block();
+              padding: 0 lh(.5) 0 0;
+              margin-bottom: 0;
+              font-weight: bold;
+              display: none;
+            }
+
+            // fix for now
+            ol#video_speeds {
+              @include inline-block();
+
+              li {
+                float: left;
+                color: #fff;
+                cursor: pointer;
+                padding: 0 lh(.25);
+                line-height: 46px; //height of play pause buttons
+
+                &.active {
+                  font-weight: bold;
+                }
+
+                &:last-child {
+                  border-bottom: 0;
+                  margin-top: 0;
+                  @include box-shadow(none);
+                }
+
+                &:hover {
+                  background-color: #444;
+                }
+              }
+            }
+
+            &:hover {
+              opacity: 1;
+            }
+          }
+
+          a.hide-subtitles {
+            float: left;
+            display: block;
+            padding: 0 lh(.5);
+            margin-left: 0;
+            color: #797979;
+            line-height: 46px; //height of play pause buttons
+            width: 30px;
+            text-indent: -9999px;
+            font-weight: 800;
+            background: url('../images/cc.png') center no-repeat;
+            -webkit-font-smoothing: antialiased;
+            @include transition();
+            opacity: 1;
+            position: relative;
+
+            &:after {
+              text-indent: 0;
+              position: absolute;
+              top: 0;
+              right: -40px;
+              content: "turn off";
+              display: block;
+              width: 70px;
+              opacity: 0;
+              visibility: hidden;
+              @include transition();
+            }
+
+            &:hover {
+              color: #fff;
+              text-decoration: none;
+              background-color: #444;
+              padding-right: 80px;
+              background-position: 11px center;
+
+              &:after {
+                right: 0;
+                opacity: 1;
+                visibility: visible;
+              }
+            }
+
+            &.off {
+              opacity: .7;
+
+              &:after {
+                content: "turn on";
+              }
+            }
+          }
+        }
+      }
+    }
+
+    ol.subtitles {
+      float: left;
+      width: flex-grid(3, 9);
+      padding-top: 10px;
+      max-height: 460px;
+      overflow: hidden;
+
+      li {
+        border: 0;
+        color: #666;
+        cursor: pointer;
+        margin-bottom: 0px;
+        padding: 0;
+        @include transition(all, .5s, ease-in);
+
+        &.current {
+          color: #333;
+          font-weight: 700;
+        }
+
+        &:hover {
+          color: $mit-red;
+        }
+
+        div {
+          margin-bottom: 8px;
+        }
+
+        div:empty {
+          margin-bottom: 0px;
+        }
+      }
+    }
+
+    &.closed {
+      @extend .trans;
+
+      div.video-wrapper {
+        width: flex-grid(9,9);
+      }
+
+      ol.subtitles {
+        width: 0px;
+        height: 0;
+      }
+    }
+  }
+}
+
+div.course-wrapper.closed section.course-content div.video-subtitles {
+  ol.subtitles {
+    max-height: 577px;
+  }
+}

static/css/discussion/_answers.scss

@@ -0,0 +1,159 @@
+div.answer-controls {
+  @include box-sizing(border-box);
+  display: inline-block;
+  margin: 0 0 15px;
+  padding-left: flex-grid(1.1);
+  width: 100%;
+
+  div.answer-count {
+    display: inline-block;
+    float: left;
+  }
+
+  div.answer-sort {
+    float: right;
+    margin-left: flex-gutter();
+
+    nav {
+      @extend .action-link;
+      float: right;
+      margin-top: 34px;
+
+      a {
+        &.on span{
+          font-weight: bold;
+        }
+
+        &:before {
+          content: '|';
+          color: #ccc;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
+
+div.answer-block {
+  @extend div.question-header;
+  border-top: #ddd 1px solid;
+  display: inline-block;
+  float: left;
+  padding-top: 20px;
+  width: 100%;
+
+  div.official-stamp {
+    background: $mit-red;
+    color: #fff;
+    font-size: 12px;
+    margin-top: 10px;
+    padding: 2px 5px;
+    text-align: center;
+    margin-left: -1px;
+  }
+
+  img.answer-img-accept {
+    margin: 10px 0px 10px 16px;
+  }
+  div.answer-container {
+    @extend div.question-container;
+
+    div.answer-content {
+      @extend div.question-content;
+
+      div.answer-body {
+        @extend div.question-body;
+      }
+    }
+  }
+
+  div.meta-bar {
+    div.answer-actions {
+      @extend div.question-actions;
+    }
+  }
+
+  div.answered-by-owner {
+    p {
+      font-style: italic;
+      color: #656565;
+    }
+
+    div.comments-container {
+      color: #555;
+    }
+  }
+
+  div.accepted-answer {
+    p {
+      color:#000;
+    }
+  }
+
+  div.deleted {
+    p {
+      color: $mit-red;
+    }
+  }
+
+  img.answer-img-accept {
+    opacity: 0.7;
+  }
+}
+
+div.paginator {
+  @extend div.answer-block;
+  text-align: center;
+  padding: 20px 0;
+
+  span {
+    @include border-radius(3px);
+    background: #eee;
+    margin: 0 5px;
+    padding: 4px 10px;
+
+    &.curr {
+      background: none;
+      color: $mit-red;
+      font-weight: bold;
+    }
+
+    &.next, &.prev {
+      @extend .light-button;
+    }
+
+    a {
+      color: #555;
+      text-decoration: none;
+      border-bottom: none;
+    }
+  }
+}
+
+div.answer-own {
+  border-top: 1px solid #eee;
+  overflow:hidden;
+  padding-left: flex-grid(1.2);
+  padding-top: 10px;
+}
+
+div.answer-actions {
+  margin: 0;
+  padding:8px 8px 8px 0;
+  text-align: right;
+  border-top: 1px solid #efefef;
+
+  span.sep {
+    color: #EDDFAA;
+  }
+
+  a {
+    cursor: pointer;
+    text-decoration: none;
+
+    &.question-delete {
+      // color: $mit-red;
+    }
+  }
+}
+

static/css/discussion/_askbot-original.scss

@@ -0,0 +1,2711 @@
+// original styles
+
+// body {
+//   background: #fff;
+//   font-size: 14px;
+//   line-height: 150%;
+//   margin: 0;
+//   padding: 0;
+//   color: #000;
+//   font-family: arial; }
+
+// div {
+//   margin: 0 auto;
+//   padding: 0; }
+
+// h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form, img, p {
+//   margin: 0;
+//   padding: 0;
+//   border: none; }
+
+// label {
+//   vertical-align: middle; }
+
+// hr {
+//   border: none;
+//   border-top: 1px dashed #ccccce; }
+
+// input, select {
+//   vertical-align: middle;
+//   font-family: trebuchet ms,"segoe ui",helvetica,tahoma,verdana,mingliu,pmingliu,arial,sans-serif;
+//   margin-left: 0px; }
+
+// textarea:focus, input:focus {
+//   outline: none; }
+
+// iframe {
+//   border: none; }
+
+// p {
+//   font-size: 14px;
+//   line-height: 140%;
+//   margin-bottom: 6px; }
+
+// a {
+//   color: #1b79bd;
+//   text-decoration: none;
+//   cursor: pointer; }
+
+// h2 {
+//   font-size: 21px;
+//   padding: 3px 0 3px 5px; }
+
+// h3 {
+//   font-size: 19px;
+//   padding: 3px 0 3px 5px; }
+
+// ul {
+//   list-style: disc;
+//   margin-left: 20px;
+//   padding-left: 0px;
+//   margin-bottom: 1em; }
+
+// ol {
+//   list-style: decimal;
+//   margin-left: 30px;
+//   margin-bottom: 1em;
+//   padding-left: 0px; }
+
+// td ul {
+//   vertical-align: middle; }
+
+// li input {
+//   margin: 3px 3px 4px 3px; }
+
+// pre {
+//   font-family: consolas, monaco, liberation mono, lucida console, monospace;
+//   font-size: 100%;
+//   margin-bottom: 10px;
+//   background-color: #f5f5f5;
+//   padding-left: 5px;
+//   padding-top: 5px;
+//   padding-bottom: 20px; }
+
+// code {
+//   font-family: consolas, monaco, liberation mono, lucida console, monospace;
+//   font-size: 100%; }
+
+// blockquote {
+//   margin-bottom: 10px;
+//   margin-right: 15px;
+//   padding: 10px 0px 1px 10px;
+//   background-color: #f5f5f5; }
+
+// * html {
+//   .clearfix, .paginator {
+//     height: 1;
+//     overflow: visible; } }
+
+// +html {
+//   .clearfix, .paginator {
+//     min-height: 1%; } }
+
+// .clearfix:after, .paginator:after {
+//   clear: both;
+//   content: ".";
+//   display: block;
+//   height: 0;
+//   visibility: hidden; }
+
+// .badges a {
+//   color: #763333;
+//   text-decoration: underline; }
+
+// a:hover {
+//   text-decoration: underline; }
+
+.badge-context-toggle.active {
+  cursor: pointer;
+  text-decoration: underline; }
+
+// h1 {
+//   font-size: 24px;
+//   padding: 10px 0 5px 0px; }
+
+body.user-messages {
+  margin-top: 2.4em; }
+
+// .left {
+//   float: left; }
+
+// .right {
+//   float: right; }
+
+// .clean {
+//   clear: both; }
+
+// .center {
+//   margin: 0 auto;
+//   padding: 0; }
+
+.notify {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  z-index: 100;
+  padding: 0;
+  text-align: center;
+  background-color: #f5dd69;
+  border-top: #fff 1px solid;
+  font-family: 'yanone kaffeesatz',sans-serif;
+  p.notification {
+    margin-top: 6px;
+    margin-bottom: 6px;
+    font-size: 16px;
+    color: #424242; } }
+
+#closenotify {
+  position: absolute;
+  right: 5px;
+  top: 7px;
+  color: #735005;
+  text-decoration: none;
+  line-height: 18px;
+  background: -6px -5px url(../default/media/images/sprites.png) no-repeat;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  &:hover {
+    background: -26px -5px url(../default/media/images/sprites.png) no-repeat; } }
+
+#header {
+  margin-top: 0px;
+  background: #16160f;
+  font-family: 'yanone kaffeesatz',sans-serif; }
+
+/*.content-wrapper {
+  width: 960px;
+  margin: auto;
+  position: relative; }*/
+
+#logo img {
+  padding: 5px 0px 5px 0px;
+  height: 75px;
+  width: auto;
+  float: left; }
+
+#usertoolsnav {
+  height: 20px;
+  padding-bottom: 5px;
+  a {
+    height: 35px;
+    text-align: right;
+    margin-left: 20px;
+    text-decoration: underline;
+    color: #d0e296;
+    font-size: 16px;
+    &:first-child {
+      margin-left: 0; }
+    &#ab-responses {
+      margin-left: 3px; } }
+  .user-info, .user-micro-info {
+    color: #b5b593; }
+  a img {
+    vertical-align: middle;
+    margin-bottom: 2px; }
+  .user-info a {
+    margin: 0;
+    text-decoration: none; } }
+
+#metanav {
+  float: right;
+  a {
+    color: #e2e2ae;
+    padding: 0px 0px 0px 35px;
+    height: 25px;
+    line-height: 30px;
+    margin: 5px 0px 0px 10px;
+    font-size: 18px;
+    font-weight: 100;
+    text-decoration: none;
+    display: block;
+    float: left;
+    &:hover {
+      text-decoration: underline; }
+    &.on {
+      font-weight: bold;
+      color: #fff;
+      text-decoration: none; }
+    &.special {
+      font-size: 18px;
+      color: #b02b2c;
+      font-weight: bold;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline; } } }
+  #navtags {
+    background: -50px -5px url(../default/media/images/sprites.png) no-repeat; }
+  #navusers {
+    background: -125px -5px url(../default/media/images/sprites.png) no-repeat; }
+  #navbadges {
+    background: -210px -5px url(../default/media/images/sprites.png) no-repeat; } }
+
+// #header {
+//   &.with-logo #usertoolsnav {
+//     position: absolute;
+//     bottom: 0;
+//     right: 0px; }
+//   &.without-logo {
+//     #usertoolsnav {
+//       float: left;
+//       margin-top: 7px; }
+//     #metanav {
+//       margin-bottom: 7px; } } }
+
+// #secondaryheader {
+//   height: 55px;
+//   background: #e9e9e1;
+//   border-bottom: #d3d3c2 1px solid;
+//   border-top: #fcfcfc 1px solid;
+//   margin-bottom: 10px;
+//   font-family: 'yanone kaffeesatz',sans-serif;
+//   #homebutton {
+//     border-right: #afaf9e 1px solid;
+//     background: -6px -36px url(../default/media/images/sprites.png) no-repeat;
+//     height: 55px;
+//     width: 43px;
+//     display: block;
+//     float: left;
+//     &:hover {
+//       background: -51px -36px url(../default/media/images/sprites.png) no-repeat; } }
+//   #scopewrapper {
+//     width: 688px;
+//     float: left;
+//     a {
+//       display: block;
+//       float: left; }
+//     .scope-selector {
+//       font-size: 21px;
+//       color: #5a5a4b;
+//       height: 55px;
+//       line-height: 55px;
+//       margin-left: 24px; }
+//     .on {
+//       background: url(../default/media/images/scopearrow.png) no-repeat center bottom; }
+//     .ask-message {
+//       font-size: 24px; } } }
+
+#searchbar {
+  display: inline-block;
+  background-color: #fff;
+  width: 412px;
+  border: 1px solid #c9c9b5;
+  float: right;
+  height: 42px;
+  margin: 6px 0px 0px 15px;
+  .searchinput, .searchinputcancelable {
+    font-size: 30px;
+    height: 40px;
+    font-weight: 300;
+    background: #fff;
+    border: 0px;
+    color: #484848;
+    padding-left: 10px;
+    font-family: arial;
+    vertical-align: middle; }
+  .searchinput {
+    width: 352px; }
+  .searchinputcancelable {
+    width: 317px; }
+  .logoutsearch {
+    width: 337px; }
+  .searchbtn {
+    font-size: 10px;
+    color: #666;
+    background-color: #eee;
+    height: 42px;
+    border: #fff 1px solid;
+    line-height: 22px;
+    text-align: center;
+    float: right;
+    margin: 0px;
+    width: 48px;
+    background: -98px -36px url(../default/media/images/sprites.png) no-repeat;
+    cursor: pointer;
+    &:hover {
+      background: -146px -36px url(../default/media/images/sprites.png) no-repeat; } }
+  .cancelsearchbtn {
+    font-size: 30px;
+    color: #ce8888;
+    background: #fff;
+    height: 42px;
+    border: 0px;
+    border-left: #deded0 1px solid;
+    text-align: center;
+    width: 35px;
+    cursor: pointer;
+    &:hover {
+      color: #d84040; } } }
+
+body.anon #searchbar {
+  width: 500px;
+  .searchinput {
+    width: 440px; }
+  .searchinputcancelable {
+    width: 405px; } }
+
+#askbutton {
+  background: url(../default/media/images/bigbutton.png) repeat-x bottom;
+  line-height: 44px;
+  text-align: center;
+  width: 200px;
+  height: 42px;
+  font-size: 23px;
+  color: #4a757f;
+  margin-top: 7px;
+  float: right;
+  text-transform: uppercase;
+  border-radius: 5px;
+  -ms-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  -webkit-box-shadow: 1px 1px 2px #636363;
+  -moz-box-shadow: 1px 1px 2px #636363;
+  box-shadow: 1px 1px 2px #636363;
+  &:hover {
+    text-decoration: none;
+    background: url(../default/media/images/bigbutton.png) repeat-x top;
+    text-shadow: 0px 1px 0px #c6d9dd;
+    -moz-text-shadow: 0px 1px 0px #c6d9dd;
+    -webkit-text-shadow: 0px 1px 0px #c6d9dd; } }
+
+/*#contentleft {
+  width: 730px;
+  float: left;
+  position: relative;
+  padding-bottom: 10px; }
+
+#contentright {
+  width: 200px;
+  float: right;
+  padding: 0 0px 10px 0px; }*/
+
+#contentfull {
+  float: left;
+  width: 960px; }
+
+.box {
+  /*background: #fff;*/
+  /*padding: 4px 0px 10px 0px;*/
+  /*width: 200px;*/
+  p {
+    margin-bottom: 4px;
+    &.info-box-follow-up-links {
+      text-align: right;
+      margin: 0; } }
+  h2 {
+    // padding-left: 0;
+    // /*background: #eceeeb;*/
+    // height: 30px;
+    // line-height: 30px;
+    // /*text-align: right;*/
+    // /*font-size: 18px !important;*/
+    // // font-weight: normal;
+    // // color: #656565;
+    // /*padding-right: 10px;*/
+    // /*margin-bottom: 10px;*/
+    // /*font-family: 'yanone kaffeesatz',sans-serif;*/
+  }
+  // h3 {
+  //   /*color: #4a757f;*/
+  //   /*font-size: 18px;*/
+  //   text-align: left;
+  //   font-weight: normal;
+  //   /*font-family: 'yanone kaffeesatz',sans-serif;*/
+  //   padding-left: 0px; }
+  // .contributorback {
+  //   background: #eceeeb url(../default/media/images/contributorsback.png) no-repeat center left; }
+  // label {
+  //   color: #707070;
+  //   font-size: 15px;
+  //   display: block;
+  //   float: right;
+  //   text-align: left;
+  //   font-family: 'yanone kaffeesatz',sans-serif;
+  //   width: 80px;
+  //   margin-right: 18px; }
+  // #displaytagfiltercontrol label {
+  //   width: 160px; }
+  // ul {
+  //   margin-left: 22px; }
+  // li {
+  //   list-style-type: disc;
+  //   font-size: 13px;
+  //   line-height: 20px;
+  //   margin-bottom: 10px;
+  //   color: #707070; }
+  // ul.tags {
+  //   list-style: none;
+  //   margin: 0;
+  //   padding: 0;
+  //   line-height: 170%;
+  //   display: block; }
+  // #displaytagfiltercontrol p label {
+  //   color: #707070;
+  //   font-size: 15px; }
+  /*.inputs {
+    #interestingtaginput, #ignoredtaginput {
+      width: 153px;
+      padding-left: 5px;
+      border: #c9c9b5 1px solid;
+      height: 25px; }
+    #interestingtagadd, #ignoredtagadd {
+      background: url(../default/media/images/small-button-blue.png) repeat-x top;
+      border: 0;
+      color: #4a757f;
+      font-weight: bold;
+      font-size: 12px;
+      width: 30px;
+      height: 27px;
+      margin-top: -2px;
+      cursor: pointer;
+      border-radius: 4px;
+      -ms-border-radius: 4px;
+      -moz-border-radius: 4px;
+      -webkit-border-radius: 4px;
+      -khtml-border-radius: 4px;
+      text-shadow: 0px 1px 0px #e6f6fa;
+      -moz-text-shadow: 0px 1px 0px #e6f6fa;
+      -webkit-text-shadow: 0px 1px 0px #e6f6fa;
+      -webkit-box-shadow: 1px 1px 2px #808080;
+      -moz-box-shadow: 1px 1px 2px #808080;
+      box-shadow: 1px 1px 2px #808080; }
+    #interestingtagadd:hover, #ignoredtagadd:hover {
+      background: url(../default/media/images/small-button-blue.png) repeat-x bottom; } }*/
+  // img.gravatar {
+    // margin: 1px; }
+  // a {
+  //   &.followed, &.follow {
+  //     background: url(../default/media/images/medium-button.png) top repeat-x;
+  //     height: 34px;
+  //     line-height: 34px;
+  //     text-align: center;
+  //     border: 0;
+  //     font-family: 'yanone kaffeesatz',sans-serif;
+  //     color: #4a757f;
+  //     font-weight: normal;
+  //     font-size: 21px;
+  //     margin-top: 3px;
+  //     display: block;
+  //     width: 120px;
+  //     text-decoration: none;
+  //     border-radius: 4px;
+  //     -ms-border-radius: 4px;
+  //     -moz-border-radius: 4px;
+  //     -webkit-border-radius: 4px;
+  //     -khtml-border-radius: 4px;
+  //     -webkit-box-shadow: 1px 1px 2px #636363;
+  //     -moz-box-shadow: 1px 1px 2px #636363;
+  //     box-shadow: 1px 1px 2px #636363;
+  //     margin: 0 auto;
+  //     padding: 0; }
+  //   &.followed:hover, &.follow:hover {
+  //     text-decoration: none;
+  //     background: url(../default/media/images/medium-button.png) bottom repeat-x;
+  //     text-shadow: 0px 1px 0px #c6d9dd;
+  //     -moz-text-shadow: 0px 1px 0px #c6d9dd;
+  //     -webkit-text-shadow: 0px 1px 0px #c6d9dd; }
+  //   &.followed {
+  //     div.unfollow {
+  //       display: none; }
+  //     &:hover div {
+  //       display: none;
+  //       &.unfollow {
+  //         display: inline;
+  //         color: #a05736; } } } }
+  // .favorite-number {
+  //   padding: 5px 0 0 5px;
+  //   font-size: 100%;
+  //   font-family: arial;
+  //   font-weight: bold;
+  //   color: #777;
+  //   text-align: center; }
+  // .notify-sidebar #question-subscribe-sidebar {
+    // margin: 7px 0 0 3px; }
+ }
+
+//.statswidget p {
+  // color: #707070;
+  // font-size: 16px;
+  // border-bottom: #cccccc 1px solid;
+  // font-size: 13px;
+  // strong {
+  //   float: right;
+  //   padding-right: 10px; } }
+
+// .questions-related {
+//   word-wrap: break-word;
+//   p {
+//     line-height: 20px;
+//     padding: 4px 0px 4px 0px;
+//     font-size: 16px;
+//     font-weight: normal;
+//     border-bottom: #cccccc 1px solid; }
+//   a {
+//     font-size: 13px; } }
+
+// #tips {
+//   li {
+//     color: #707070;
+//     font-size: 13px;
+//     list-style-image: url(../default/media/images/tips.png); }
+//   a {
+//     font-size: 16px; } }
+
+// #markdownhelp {
+//   li {
+//     color: #707070;
+//     font-size: 13px; }
+//   a {
+//     font-size: 16px; } }
+
+// .tabbar {
+  // background-color: #eff5f6;
+  // height: 30px;
+  // margin-bottom: 3px;
+  // margin-top: 3px;
+  // float: right;
+  // font-family: georgia,serif;
+  // font-size: 16px;
+  // border-radius: 5px;
+  // -ms-border-radius: 5px;
+  // -moz-border-radius: 5px;
+  // -webkit-border-radius: 5px;
+  // -khtml-border-radius: 5px;
+  // h2 {
+  //   float: left; } }
+
+// .tabsa, .tabsc {
+  // float: right;
+  // position: relative;
+  // display: block;
+  // height: 20px; }
+
+// .tabsa {
+  // float: right; }
+
+// .tabsc {
+  // float: left; }
+
+// .tabsa a, .tabsc a {
+  // border-left: 1px solid #d0e1e4;
+  // color: #7ea9b3;
+  // display: block;
+  // float: left;
+  // height: 20px;
+  // line-height: 20px;
+  // padding: 4px 7px 4px 7px;
+  // text-decoration: none; }
+
+// .tabsa a.on, .tabsc a.on, .tabsa a:hover, .tabsc a:hover {
+  // color: #4a757f; }
+
+// .tabsa .label, .tabsc .label {
+  // float: left;
+  // color: #646464;
+  // margin-top: 4px;
+  // margin-right: 5px; }
+
+// .main-page .tabsa .label {
+  // margin-left: 8px; }
+
+// .tabsb a {
+  // background: #eee;
+  // border: 1px solid #eee;
+  // color: #777;
+  // display: block;
+  // float: left;
+  // height: 22px;
+  // line-height: 28px;
+  // margin: 5px 0px 0 4px;
+  // padding: 0 11px 0 11px;
+  // text-decoration: none; }
+
+// .tabsc .first {
+  // border: none; }
+
+// .rss {
+  // float: right;
+  // font-size: 16px;
+  // color: #f57900;
+  // margin: 5px 0px 3px 7px;
+  // width: 52px;
+  // padding-left: 2px;
+  // padding-top: 3px;
+  // background: white url(../default/media/images/feed-icon-small.png) no-repeat center right;
+  // float: right;
+  // font-family: georgia,serif;
+  // font-size: 16px;
+  // &:hover {
+  //   color: #f4a731 !important; } }
+
+// #questioncount {
+//   font-weight: bold;
+//   font-size: 23px;
+//   color: #7ea9b3;
+//   width: 200px;
+//   float: left;
+//   margin-bottom: 8px;
+//   padding-top: 6px;
+//   font-family: 'yanone kaffeesatz',sans-serif; }
+
+// #listsearchtags {
+//   float: left;
+//   margin-top: 3px;
+//   color: #707070;
+//   font-size: 16px;
+//   font-family: 'yanone kaffeesatz',sans-serif; }
+
+// ul#searchtags {
+//   margin-left: 10px;
+//   float: right;
+//   padding-top: 2px; }
+
+// .search-tips {
+//   font-size: 16px;
+//   line-height: 17px;
+//   color: #707070;
+//   margin: 5px 0 10px 0;
+//   padding: 0px;
+//   float: left;
+//   font-family: 'yanone kaffeesatz',sans-serif;
+//   a {
+//     text-decoration: underline;
+//     color: #1b79bd; } }
+
+// #question-list {
+//   float: left;
+//   position: relative;
+//   background-color: #fff;
+//   padding: 0;
+//   width: 100%; }
+
+// .short-summary {
+//   position: relative;
+//   filter: inherit;
+//   padding: 10px;
+//   border-bottom: 1px solid #dddbce;
+//   margin-bottom: 1px;
+//   overflow: hidden;
+//   width: 710px;
+//   float: left;
+//   background: url(../default/media/images/summary-background.png) repeat-x;
+//   h2 {
+//     font-size: 24px;
+//     font-weight: normal;
+//     line-height: 26px;
+//     padding-left: 0;
+//     margin-bottom: 6px;
+//     display: block;
+//     font-family: 'yanone kaffeesatz',sans-serif; }
+//   a {
+//     color: #464646; }
+//   .userinfo {
+//     text-align: right;
+//     line-height: 16px;
+//     font-family: arial;
+//     padding-right: 4px;
+//     .relativetime {
+//       font-size: 11px;
+//       clear: both;
+//       font-weight: normal;
+//       color: #555; } }
+//   span.anonymous {
+//     font-size: 11px;
+//     clear: both;
+//     font-weight: normal;
+//     color: #555; }
+//   .userinfo a {
+//     font-weight: bold;
+//     font-size: 11px; }
+//   .counts {
+//     float: right;
+//     margin: 4px 0 0 5px;
+//     font-family: 'yanone kaffeesatz',sans-serif;
+//     .item-count {
+//       padding: 0px 5px 0px 5px;
+//       font-size: 25px;
+//       font-family: 'yanone kaffeesatz',sans-serif; }
+//     .votes div, .views div, .answers div, .favorites div {
+//       margin-top: 3px;
+//       font-size: 14px;
+//       line-height: 14px;
+//       color: #646464; } }
+//   .tags {
+//     margin-top: 0; }
+//   .votes, .answers, .favorites, .views {
+//     text-align: center;
+//     margin: 0 3px;
+//     padding: 8px 2px 0px 2px;
+//     width: 51px;
+//     float: right;
+//     height: 44px;
+//     border: #dbdbd4 1px solid; }
+//   .votes {
+//     background: url(../default/media/images/vote-background.png) repeat-x; }
+//   .answers {
+//     background: url(../default/media/images/answers-background.png) repeat-x; }
+//   .views {
+//     background: url(../default/media/images/view-background.png) repeat-x; }
+//   .no-votes .item-count {
+//     color: #b1b5b6; }
+//   .some-votes .item-count {
+//     color: #4a757f; }
+//   .no-answers .item-count {
+//     color: #b1b5b6; }
+//   .some-answers .item-count {
+//     color: #eab243; }
+//   .no-views .item-count {
+//     color: #b1b5b6; }
+//   .some-views .item-count {
+//     color: #d33f00; }
+//   .accepted .item-count {
+//     background: url(../default/media/images/accept.png) no-repeat top right;
+//     display: block;
+//     text-align: center;
+//     width: 40px;
+//     color: #eab243; }
+//   .some-favorites .item-count {
+//     background: #338333;
+//     color: #d0f5a9; }
+//   .no-favorites .item-count {
+//     background: #eab243;
+//     color: yellow; } }
+
+// .evenmore {
+//   font-size: 13px;
+//   color: #707070;
+//   padding: 15px 0px 10px 0px;
+//   clear: both;
+//   a {
+//     text-decoration: underline;
+//     color: #1b79bd; } }
+
+.pager {
+  margin-top: 10px;
+  margin-bottom: 16px; }
+
+.pagesize {
+  margin-top: 10px;
+  margin-bottom: 16px;
+  float: right; }
+
+// .paginator {
+//   padding: 5px 0 10px 0;
+//   font-size: 13px;
+//   margin-bottom: 10px;
+//   .prev a, .next a {
+//     background-color: #fff;
+//     color: #777;
+//     padding: 2px 4px 3px 4px;
+//     &:visited {
+//       background-color: #fff;
+//       color: #777;
+//       padding: 2px 4px 3px 4px; } }
+//   a {
+//     color: #7ea9b3; }
+//   .prev {
+//     margin-right: .5em; }
+//   .next {
+//     margin-left: .5em; }
+//   .page a {
+//     padding: .25em;
+//     background-color: #fff;
+//     margin: 0em .25em;
+//     color: #ff;
+//     &:visited {
+//       padding: .25em;
+//       background-color: #fff;
+//       margin: 0em .25em;
+//       color: #ff; } }
+//   .curr {
+//     padding: .25em;
+//     background-color: #fff;
+//     margin: 0em .25em;
+//     color: #ff;
+//     background-color: #8ebcc7;
+//     color: #fff;
+//     font-weight: bold; }
+//   .next a, .prev a {
+//     color: #7ea9b3; }
+//   .page a:hover, .curr a:hover, .prev a:hover, .next a:hover {
+//     color: #8c8c8c;
+//     background-color: #e1e1e1;
+//     text-decoration: none; }
+//   .text {
+//     color: #777;
+//     padding: .3em; }
+//   .paginator-container-left {
+//     padding: 5px 0 10px 0; } }
+
+// .tag-size-1 {
+//   font-size: 12px; }
+
+// .tag-size-2 {
+//   font-size: 13px; }
+
+// .tag-size-3 {
+//   font-size: 14px; }
+
+// .tag-size-4 {
+//   font-size: 15px; }
+
+// .tag-size-5 {
+//   font-size: 16px; }
+
+// .tag-size-6 {
+//   font-size: 17px; }
+
+// .tag-size-7 {
+//   font-size: 18px; }
+
+// .tag-size-8 {
+//   font-size: 19px; }
+
+// .tag-size-9 {
+//   font-size: 20px; }
+
+// .tag-size-10 {
+//   font-size: 21px; }
+
+// ul {
+//   &.tags {
+//     list-style: none;
+//     margin: 0;
+//     padding: 0;
+//     line-height: 170%;
+//     display: block;
+//     &.marked-tags {
+//       list-style: none;
+//       margin: 0;
+//       padding: 0;
+//       line-height: 170%;
+//       display: block; } }
+//   &#related-tags {
+//     list-style: none;
+//     margin: 0;
+//     padding: 0;
+//     line-height: 170%;
+//     display: block; }
+//   &.tags li {
+//     float: left;
+//     display: block;
+//     margin: 0 8px 0 0;
+//     padding: 0;
+//     height: 20px; } }
+
+// .wildcard-tags {
+//   clear: both; }
+
+// ul.tags.marked-tags li, .wildcard-tags ul.tags li {
+//   margin-bottom: 5px; }
+
+// #tagselector div.inputs {
+//   clear: both;
+//   float: none;
+//   margin-bottom: 10px; }
+
+// .tags-page ul.tags li {
+//   width: 160px;
+//   margin: 5px; }
+
+// ul {
+//   &#ab-user-tags li {
+//     width: 160px;
+//     margin: 5px; }
+//   &#related-tags li {
+//     margin: 0 5px 8px 0;
+//     float: left;
+//     clear: left; } }
+
+// .tag-left {
+//   cursor: pointer;
+//   display: block;
+//   float: left;
+//   height: 17px;
+//   margin: 0 5px 0 0;
+//   padding: 0;
+//   -webkit-box-shadow: 0px 0px 5px #d3d6d7;
+//   -moz-box-shadow: 0px 0px 5px #d3d6d7;
+//   box-shadow: 0px 0px 5px #d3d6d7; }
+
+// .tag-right {
+//   background: #f3f6f6;
+//   border: #fff 1px solid;
+//   border-top: #fff 2px solid;
+//   outline: #cfdbdb 1px solid;
+//   display: block;
+//   float: left;
+//   height: 17px;
+//   line-height: 17px;
+//   font-weight: normal;
+//   font-size: 11px;
+//   padding: 0px 8px 0px 8px;
+//   text-decoration: none;
+//   text-align: center;
+//   white-space: nowrap;
+//   vertical-align: middle;
+//   font-family: arial;
+//   color: #717179; }
+
+// .deletable-tag {
+//   margin-right: 3px;
+//   white-space: nowrap;
+//   border-top-right-radius: 4px;
+//   border-bottom-right-radius: 4px;
+//   -moz-border-radius-topright: 4px;
+//   -moz-border-radius-bottomright: 4px;
+//   -webkit-border-bottom-right-radius: 4px;
+//   -webkit-border-top-right-radius: 4px; }
+
+// .tags {
+//   a.tag-right, span.tag-right {
+//     color: #585858;
+//     text-decoration: none; }
+//   a:hover {
+//     color: #1a1a1a; } }
+
+// .users-page h1, .tags-page h1 {
+//   float: left; }
+
+// .main-page h1 {
+//   margin-right: 5px; }
+
+// .delete-icon {
+//   margin-top: -1px;
+//   float: left;
+//   height: 21px;
+//   width: 18px;
+//   display: block;
+//   line-height: 20px;
+//   text-align: center;
+//   background: #bbcdcd;
+//   cursor: default;
+//   color: #fff;
+//   border-top: #cfdbdb 1px solid;
+//   font-family: arial;
+//   border-top-right-radius: 4px;
+//   border-bottom-right-radius: 4px;
+//   -moz-border-radius-topright: 4px;
+//   -moz-border-radius-bottomright: 4px;
+//   -webkit-border-bottom-right-radius: 4px;
+//   -webkit-border-top-right-radius: 4px;
+//   text-shadow: 0px 1px 0px #7ea0a0;
+//   -moz-text-shadow: 0px 1px 0px #7ea0a0;
+//   -webkit-text-shadow: 0px 1px 0px #7ea0a0;
+//   &:hover {
+//     background: #b32f2f; } }
+
+// .tag-number {
+//   font-weight: normal;
+//   float: left;
+//   font-size: 16px;
+//   color: #5d5d5d; }
+
+// .badges .tag-number {
+//   float: none;
+//   display: inline;
+//   padding-right: 15px; }
+
+// .section-title {
+//   color: #7ea9b3;
+//   font-family: 'yanone kaffeesatz',sans-serif;
+//   font-weight: bold;
+//   font-size: 24px; }
+
+// #fmask {
+//   margin-bottom: 30px;
+//   width: 100%; }
+
+// #askformbar {
+//   display: inline-block;
+//   padding: 4px 7px 5px 0px;
+//   margin-top: 0px;
+//   p {
+//     margin: 0 0 5px 0;
+//     font-size: 14px;
+//     color: #525252;
+//     line-height: 1.4; }
+//   .questiontitleinput {
+//     font-size: 24px;
+//     line-height: 24px;
+//     height: 36px;
+//     margin: 0px;
+//     padding: 0px 0 0 5px;
+//     border: #cce6ec 3px solid;
+//     width: 725px; } }
+
+// .ask-page div#question-list, .edit-question-page div#question-list {
+//   float: none;
+//   border-bottom: #f0f0ec 1px solid;
+//   float: left;
+//   margin-bottom: 10px; }
+
+// .ask-page div#question-list a, .edit-question-page div#question-list a {
+//   line-height: 30px; }
+
+// .ask-page div#question-list h2, .edit-question-page div#question-list h2 {
+//   font-size: 13px;
+//   padding-bottom: 0;
+//   color: #1b79bd;
+//   border-top: #f0f0ec 1px solid;
+//   border-left: #f0f0ec 1px solid;
+//   height: 30px;
+//   line-height: 30px;
+//   font-weight: normal; }
+
+// .ask-page div#question-list span, .edit-question-page div#question-list span {
+//   width: 28px;
+//   height: 26px;
+//   line-height: 26px;
+//   text-align: center;
+//   margin-right: 10px;
+//   float: left;
+//   display: block;
+//   color: #fff;
+//   background: #b8d0d5;
+//   border-radius: 3px;
+//   -ms-border-radius: 3px;
+//   -moz-border-radius: 3px;
+//   -webkit-border-radius: 3px;
+//   -khtml-border-radius: 3px; }
+
+// .ask-page label, .edit-question-page label {
+//   color: #525252;
+//   font-size: 13px; }
+
+// .ask-page #id_tags, .edit-question-page #id_tags {
+//   border: #cce6ec 3px solid;
+//   height: 25px;
+//   padding-left: 5px;
+//   width: 395px;
+//   font-size: 14px; }
+
+// .title-desc {
+//   color: #707070;
+//   font-size: 13px; }
+
+// #fmanswer input.submit, .ask-page input.submit, .edit-question-page input.submit {
+//   float: left;
+//   background: url(../default/media/images/medium-button.png) top repeat-x;
+//   height: 34px;
+//   border: 0;
+//   font-family: 'yanone kaffeesatz',sans-serif;
+//   color: #4a757f;
+//   font-weight: normal;
+//   font-size: 21px;
+//   margin-top: 3px;
+//   border-radius: 4px;
+//   -ms-border-radius: 4px;
+//   -moz-border-radius: 4px;
+//   -webkit-border-radius: 4px;
+//   -khtml-border-radius: 4px;
+//   -webkit-box-shadow: 1px 1px 2px #636363;
+//   -moz-box-shadow: 1px 1px 2px #636363;
+//   box-shadow: 1px 1px 2px #636363;
+//   margin-right: 7px; }
+
+// #fmanswer input.submit:hover, .ask-page input.submit:hover, .edit-question-page input.submit:hover {
+//   text-decoration: none;
+//   background: url(../default/media/images/medium-button.png) bottom repeat-x;
+//   text-shadow: 0px 1px 0px #c6d9dd;
+//   -moz-text-shadow: 0px 1px 0px #c6d9dd;
+//   -webkit-text-shadow: 0px 1px 0px #c6d9dd; }
+
+// #editor {
+//   font-size: 100%;
+//   min-height: 200px;
+//   line-height: 18px;
+//   margin: 0;
+//   border-left: #cce6ec 3px solid;
+//   border-bottom: #cce6ec 3px solid;
+//   border-right: #cce6ec 3px solid;
+//   border-top: 0;
+//   padding: 10px;
+//   margin-bottom: 10px;
+//   width: 710px; }
+
+// #id_title {
+//   width: 100%; }
+
+// .wmd-preview {
+//   margin: 3px 0 5px 0;
+//   padding: 6px;
+//   background-color: #f5f5f5;
+//   min-height: 20px;
+//   overflow: auto;
+//   font-size: 13px;
+//   font-family: arial;
+//   p {
+//     margin-bottom: 14px;
+//     line-height: 1.4;
+//     font-size: 14px; }
+//   pre {
+//     background-color: #e7f1f8; }
+//   blockquote {
+//     background-color: #eee; }
+//   img {
+//     max-width: 600px; } }
+
+// .preview-toggle {
+//   width: 100%;
+//   color: #b6a475;
+//   text-align: left;
+//   span:hover {
+//     cursor: pointer; } }
+
+// .after-editor {
+//   margin-top: 15px;
+//   margin-bottom: 15px; }
+
+.checkbox {
+  margin-left: 5px;
+  font-weight: normal;
+  cursor: help; }
+
+// .question-options {
+//   margin-top: 1px;
+//   color: #666;
+//   line-height: 13px;
+//   margin-bottom: 5px;
+//   label {
+//     vertical-align: text-bottom; } }
+
+// .edit-content-html {
+//   border-top: 1px dotted #d8d2a9;
+//   border-bottom: 1px dotted #d8d2a9;
+//   margin: 5px 0 5px 0; }
+
+// .edit-question-page, #fmedit, .wmd-preview {
+//   color: #525252; }
+
+// .edit-question-page #id_revision, #fmedit #id_revision, .wmd-preview #id_revision {
+//   font-size: 14px;
+//   margin-top: 5px;
+//   margin-bottom: 5px; }
+
+// .edit-question-page #id_title, #fmedit #id_title, .wmd-preview #id_title {
+//   font-size: 24px;
+//   line-height: 24px;
+//   height: 36px;
+//   margin: 0px;
+//   padding: 0px 0 0 5px;
+//   border: #cce6ec 3px solid;
+//   width: 725px;
+//   margin-bottom: 10px; }
+
+// .edit-question-page #id_summary, #fmedit #id_summary, .wmd-preview #id_summary {
+//   border: #cce6ec 3px solid;
+//   height: 25px;
+//   padding-left: 5px;
+//   width: 395px;
+//   font-size: 14px; }
+
+// .edit-question-page .title-desc, #fmedit .title-desc, .wmd-preview .title-desc {
+//   margin-bottom: 10px; }
+
+// .question-page {
+//   h1 {
+//     padding-top: 0px;
+//     font-family: 'yanone kaffeesatz',sans-serif;
+//     a {
+//       color: #464646;
+//       font-size: 30px;
+//       font-weight: normal;
+//       line-height: 1; } }
+//   p.rss {
+//     float: none;
+//     clear: both;
+//     padding: 3px 0 0 23px;
+//     font-size: 15px;
+//     width: 110px;
+//     background-position: center left;
+//     margin-left: 0px !important;
+//     a {
+//       font-family: 'yanone kaffeesatz',sans-serif;
+//       vertical-align: top; } }
+//   .question-content {
+//     float: right;
+//     width: 682px;
+//     margin-bottom: 10px; }
+//   #question-table {
+//     float: left;
+//     border-top: #f0f0f0 1px solid;
+//     margin: 6px 0 6px 0;
+//     border-spacing: 0px;
+//     width: 670px;
+//     padding-right: 10px; }
+//   .answer-table {
+//     margin: 6px 0 6px 0;
+//     border-spacing: 0px;
+//     width: 670px;
+//     padding-right: 10px;
+//     margin-top: 0px;
+//     border-bottom: 1px solid #d4d4d4;
+//     float: right;
+//     td {
+//       width: 20px;
+//       vertical-align: top; } }
+//   #question-table td {
+//     width: 20px;
+//     vertical-align: top; }
+//   .question-body, .answer-body {
+//     overflow: auto;
+//     margin-top: 10px;
+//     font-family: arial;
+//     color: #4b4b4b; }
+//   .question-body p, .answer-body p {
+//     margin-bottom: 14px;
+//     line-height: 1.4;
+//     font-size: 14px;
+//     padding: 0px 5px 5px 0px; }
+//   .question-body a, .answer-body a {
+//     color: #1b79bd; }
+//   .question-body li, .answer-body li {
+//     margin-bottom: 7px; }
+//   .question-body img, .answer-body img {
+//     max-width: 600px; }
+//   .post-update-info-container {
+//     float: right;
+//     width: 175px; }
+//   .post-update-info {
+//     background: white url(../default/media/images/background-user-info.png) repeat-x bottom;
+//     float: right;
+//     font-size: 9px;
+//     font-family: arial;
+//     width: 158px;
+//     padding: 4px;
+//     margin: 0px 0px 5px 5px;
+//     line-height: 14px;
+//     border-radius: 4px;
+//     -ms-border-radius: 4px;
+//     -moz-border-radius: 4px;
+//     -webkit-border-radius: 4px;
+//     -khtml-border-radius: 4px;
+//     -webkit-box-shadow: 0px 2px 1px #bfbfbf;
+//     -moz-box-shadow: 0px 2px 1px #bfbfbf;
+//     box-shadow: 0px 2px 1px #bfbfbf;
+//     p {
+//       line-height: 13px;
+//       font-size: 11px;
+//       margin: 0 0 2px 1px;
+//       padding: 0; }
+//     a {
+//       color: #444; }
+//     .gravatar {
+//       float: left;
+//       margin-right: 4px; }
+//     p.tip {
+//       color: #444;
+//       line-height: 13px;
+//       font-size: 10px; } }
+//   .post-controls {
+//     font-size: 11px;
+//     line-height: 12px;
+//     min-width: 200px;
+//     padding-left: 5px;
+//     text-align: right;
+//     clear: left;
+//     float: right;
+//     margin-top: 10px;
+//     margin-bottom: 8px;
+//     a {
+//       color: #777;
+//       padding: 0px 3px 3px 22px;
+//       cursor: pointer;
+//       border: none;
+//       font-size: 12px;
+//       font-family: arial;
+//       text-decoration: none;
+//       height: 18px;
+//       display: block;
+//       float: right;
+//       line-height: 18px;
+//       margin-top: -2px;
+//       margin-left: 4px;
+//       &:hover {
+//         background-color: #f5f0c9;
+//         border-radius: 3px;
+//         -ms-border-radius: 3px;
+//         -moz-border-radius: 3px;
+//         -webkit-border-radius: 3px;
+//         -khtml-border-radius: 3px; } }
+//     .sep {
+//       color: #ccc;
+//       float: right;
+//       height: 18px;
+//       font-size: 18px; }
+//     .question-delete {
+//       background: url(../default/media/images/delete.png) no-repeat center left;
+//       padding-left: 16px; } }
+//   .answer-controls .question-delete {
+//     background: url(../default/media/images/delete.png) no-repeat center left;
+//     padding-left: 16px; }
+//   .post-controls .question-flag, .answer-controls .question-flag {
+//     background: url(../default/media/images/flag.png) no-repeat center left; }
+//   .post-controls .question-edit, .answer-controls .question-edit {
+//     background: url(../default/media/images/edit2.png) no-repeat center left; }
+//   .post-controls .question-retag, .answer-controls .question-retag {
+//     background: url(../default/media/images/retag.png) no-repeat center left; }
+//   .post-controls .question-close, .answer-controls .question-close {
+//     background: url(../default/media/images/close.png) no-repeat center left; }
+//   .post-controls .permant-link, .answer-controls .permant-link {
+//     background: url(../default/media/images/link.png) no-repeat center left; }
+//   .tabbar {
+//     width: 100%; }
+//   #questioncount {
+//     float: left;
+//     font-family: 'yanone kaffeesatz',sans-serif;
+//     line-height: 15px; }
+//   .question-img-upvote, .question-img-downvote, .answer-img-upvote, .answer-img-downvote {
+//     width: 25px;
+//     height: 20px;
+//     cursor: pointer; }
+//   .question-img-upvote, .answer-img-upvote {
+//     background: url(../default/media/images/vote-arrow-up-new.png) no-repeat; }
+//   .question-img-downvote, .answer-img-downvote {
+//     background: url(../default/media/images/vote-arrow-down-new.png) no-repeat; }
+//   .question-img-upvote {
+//     &:hover, &.on {
+//       background: url(../default/media/images/vote-arrow-up-on-new.png) no-repeat; } }
+//   .answer-img-upvote {
+//     &:hover, &.on {
+//       background: url(../default/media/images/vote-arrow-up-on-new.png) no-repeat; } }
+//   .question-img-downvote {
+//     &:hover, &.on {
+//       background: url(../default/media/images/vote-arrow-down-on-new.png) no-repeat; } }
+//   .answer-img-downvote {
+//     &:hover, &.on {
+//       background: url(../default/media/images/vote-arrow-down-on-new.png) no-repeat; } }
+//   #fmanswer_button {
+//     margin: 8px 0px; }
+//   .question-img-favorite:hover {
+//     background: url(../default/media/images/vote-favorite-on.png); }
+//   div.comments {
+//     padding: 0; }
+//   #comment-title {
+//     font-weight: bold;
+//     font-size: 23px;
+//     color: #7ea9b3;
+//     width: 200px;
+//     float: left;
+//     font-family: 'yanone kaffeesatz',sans-serif; }
+//   .comments {
+//     font-size: 12px;
+//     clear: both;
+//     div.controls {
+//       clear: both;
+//       float: left;
+//       width: 100%;
+//       margin: 3px 0 20px 5px; }
+//     .controls a {
+//       color: #988e4c;
+//       padding: 0 3px 2px 22px;
+//       font-family: arial;
+//       font-size: 13px;
+//       background: url(../default/media/images/comment.png) no-repeat center left;
+//       &:hover {
+//         background-color: #f5f0c9;
+//         text-decoration: none; } }
+//     .button {
+//       color: #988e4c;
+//       font-size: 11px;
+//       padding: 3px;
+//       cursor: pointer; }
+//     a {
+//       background-color: inherit;
+//       color: #1b79bd;
+//       padding: 0; }
+//     form.post-comments {
+//       margin: 3px 26px 0 42px;
+//       textarea {
+//         font-size: 13px;
+//         line-height: 1.3; } }
+//     textarea {
+//       height: 42px;
+//       width: 100%;
+//       margin: 7px 0 5px 1px;
+//       font-family: arial;
+//       outline: none;
+//       overflow: auto;
+//       font-size: 12px;
+//       line-height: 140%;
+//       padding-left: 2px;
+//       padding-top: 3px;
+//       border: #cce6ec 3px solid; }
+//     input {
+//       margin-left: 10px;
+//       margin-top: 1px;
+//       vertical-align: top;
+//       width: 100px; }
+//     button {
+//       background: url(../default/media/images/small-button-blue.png) repeat-x top;
+//       border: 0;
+//       color: #4a757f;
+//       font-family: arial;
+//       font-size: 13px;
+//       width: 100px;
+//       font-weight: bold;
+//       height: 27px;
+//       line-height: 25px;
+//       margin-bottom: 5px;
+//       cursor: pointer;
+//       border-radius: 4px;
+//       -ms-border-radius: 4px;
+//       -moz-border-radius: 4px;
+//       -webkit-border-radius: 4px;
+//       -khtml-border-radius: 4px;
+//       text-shadow: 0px 1px 0px #e6f6fa;
+//       -moz-text-shadow: 0px 1px 0px #e6f6fa;
+//       -webkit-text-shadow: 0px 1px 0px #e6f6fa;
+//       -webkit-box-shadow: 1px 1px 2px #808080;
+//       -moz-box-shadow: 1px 1px 2px #808080;
+//       box-shadow: 1px 1px 2px #808080;
+//       &:hover {
+//         background: url(../default/media/images/small-button-blue.png) bottom repeat-x;
+//         text-shadow: 0px 1px 0px #c6d9dd;
+//         -moz-text-shadow: 0px 1px 0px #c6d9dd;
+//         -webkit-text-shadow: 0px 1px 0px #c6d9dd; } }
+//     .counter {
+//       display: inline-block;
+//       width: 245px;
+//       float: right;
+//       color: #b6a475 !important;
+//       vertical-align: top;
+//       font-family: arial;
+//       float: right;
+//       text-align: right; }
+//     .comment {
+//       border-bottom: 1px solid #edeeeb;
+//       clear: both;
+//       margin: 0;
+//       margin-top: 8px;
+//       padding-bottom: 4px;
+//       overflow: auto;
+//       font-family: arial;
+//       font-size: 11px;
+//       min-height: 25px;
+//       background: white url(../default/media/images/comment-background.png) bottom repeat-x;
+//       border-radius: 5px;
+//       -ms-border-radius: 5px;
+//       -moz-border-radius: 5px;
+//       -webkit-border-radius: 5px;
+//       -khtml-border-radius: 5px; }
+//     div.comment:hover {
+//       background-color: #efefef; }
+//     a.author {
+//       background-color: inherit;
+//       color: #1b79bd;
+//       padding: 0;
+//       &:hover {
+//         text-decoration: underline; } }
+//     span.delete-icon {
+//       background: url(../default/media/images/close-small.png) no-repeat;
+//       border: 0;
+//       width: 14px;
+//       height: 14px;
+//       &:hover {
+//         border: #bc564b 2px solid;
+//         border-radius: 10px;
+//         -ms-border-radius: 10px;
+//         -moz-border-radius: 10px;
+//         -webkit-border-radius: 10px;
+//         -khtml-border-radius: 10px;
+//         margin: -3px 0px 0px -2px; } }
+//     .content {
+//       margin-bottom: 7px; }
+//     .comment-votes {
+//       float: left;
+//       width: 37px;
+//       line-height: 130%;
+//       padding: 6px 5px 6px 3px; }
+//     .comment-body {
+//       line-height: 1.3;
+//       margin: 3px 26px 0 46px;
+//       padding: 5px 3px;
+//       color: #666;
+//       font-size: 13px;
+//       .edit {
+//         padding-left: 6px; }
+//       p {
+//         font-size: 13px;
+//         line-height: 1.3;
+//         margin-bottom: 3px;
+//         padding: 0; } }
+//     .comment-delete {
+//       float: right;
+//       width: 14px;
+//       line-height: 130%;
+//       padding: 8px 6px; }
+//     .upvote {
+//       margin: 0px;
+//       padding-right: 17px;
+//       padding-top: 2px;
+//       text-align: right;
+//       height: 20px;
+//       font-size: 13px;
+//       font-weight: bold;
+//       color: #777;
+//       &.upvoted {
+//         color: #d64000; }
+//       &.hover {
+//         background: url(../default/media/images/go-up-grey.png) no-repeat;
+//         background-position: right 1px; }
+//       &:hover {
+//         background: url(../default/media/images/go-up-orange.png) no-repeat;
+//         background-position: right 1px; } }
+//     .help-text {
+//       float: right;
+//       text-align: right;
+//       color: gray;
+//       margin-bottom: 0px;
+//       margin-top: 0px;
+//       line-height: 50%; } }
+//   #questiontools {
+//     font-size: 22px;
+//     margin-top: 11px;
+//     text-align: left; }
+//   .question-status {
+//     margin-top: 10px;
+//     margin-bottom: 15px;
+//     padding: 20px;
+//     background-color: #fef7cc;
+//     text-align: center;
+//     border: #e1c04a 1px solid;
+//     h3 {
+//       font-size: 20px;
+//       color: #707070;
+//       font-weight: normal; } }
+//   .vote-buttons {
+//     // float: left;
+//     // text-align: center;
+//     // padding-top: 2px;
+//     // margin: 10px 10px 0px 3px;
+//     img {
+//       cursor: pointer; } }
+//   .vote-number {
+//     font-family: 'yanone kaffeesatz',sans-serif;
+//     padding: 0px 0 5px 0;
+//     font-size: 25px;
+//     font-weight: bold;
+//     color: #777; }
+//   .vote-buttons .notify-sidebar {
+//     // text-align: left;
+//     // width: 120px;
+//     label {
+//       vertical-align: top; } }
+//   .tabbar-answer {
+//     margin-bottom: 15px;
+//     padding-left: 7px;
+//     width: 723px;
+//     margin-top: 10px; }
+//   .answer .vote-buttons {
+//     // float: left;
+//   }
+//   .accepted-answer {
+//     background-color: #f7fecc;
+//     border-bottom-color: #9bd59b;
+//     // .vote-buttons {
+//     //   width: 27px;
+//     //   margin-right: 10px;
+//     //   margin-top: 10px; } 
+//   }
+//   .answer .post-update-info a {
+//     color: #444444; }
+//   .answered {
+//     background: #ccc;
+//     color: #999; }
+//   .answered-accepted {
+//     background: #dcdcdc;
+//     color: #763333;
+//     strong {
+//       color: #e1e818; } }
+//   .answered-by-owner {
+//     background: #f1f1ff;
+//     .comments {
+//       .button {
+//         background-color: #e6ecff; }
+//       background-color: #e6ecff; }
+//     // .vote-buttons {
+//       // margin-right: 10px; }
+//     }
+//   .answer-img-accept:hover {
+//     background: url(../default/media/images/vote-accepted-on.png); }
+//   .answer-body {
+//     a {
+//       color: #1b79bd; }
+//     li {
+//       margin-bottom: 0.7em; } }
+//   #fmanswer {
+//     color: #707070;
+//     line-height: 1.2;
+//     margin-top: 10px;
+//     h2 {
+//       font-family: 'yanone kaffeesatz',sans-serif;
+//       color: #7ea9b3;
+//       font-size: 24px; }
+//     label {
+//       font-size: 13px; } }
+//   .message {
+//     padding: 5px;
+//     margin: 0px 0 10px 0; } }
+
+// @media screen and (-webkit-min-device-pixel-ratio:0) {
+//   textarea {
+//     padding-left: 3px !important; } }
+
+// .facebook-share.icon, .twitter-share.icon, .linkedin-share.icon, .identica-share.icon {
+//   background: url(../default/media/images/socialsprite.png) no-repeat;
+//   display: block;
+//   text-indent: -100em;
+//   height: 25px;
+//   width: 25px;
+//   margin-bottom: 3px; }
+
+// .facebook-share.icon:hover, .twitter-share.icon:hover, .linkedin-share.icon:hover, .identica-share.icon:hover {
+//   opacity: 0.8;
+//   filter: alpha(opacity = 80); }
+
+// .facebook-share.icon {
+//   background-position: -26px 0px; }
+
+// .identica-share.icon {
+//   background-position: -78px 0px; }
+
+// .twitter-share.icon {
+//   margin-top: 10px;
+//   background-position: 0px 0px; }
+
+// .linkedin-share.icon {
+//   background-position: -52px 0px; }
+
+// .openid-signin, .meta, .users-page, .user-profile-edit-page {
+//   font-size: 13px;
+//   line-height: 1.3;
+//   color: #525252; }
+
+// .openid-signin p, .meta p, .users-page p, .user-profile-edit-page p {
+//   font-size: 13px;
+//   color: #707070;
+//   line-height: 1.3;
+//   font-family: arial;
+//   color: #525252;
+//   margin-bottom: 12px; }
+
+// .openid-signin h2, .meta h2, .users-page h2, .user-profile-edit-page h2 {
+//   color: #525252;
+//   padding-left: 0px;
+//   font-size: 16px; }
+
+// .openid-signin form, .meta form, .users-page form, .user-profile-edit-page form, .user-profile-page form {
+//   margin-bottom: 15px; }
+
+// .openid-signin input[type="text"], .meta input[type="text"], .users-page input[type="text"], .user-profile-edit-page input[type="text"], .user-profile-page input[type="text"], .openid-signin input[type="password"], .meta input[type="password"], .users-page input[type="password"], .user-profile-edit-page input[type="password"], .user-profile-page input[type="password"], .openid-signin select, .meta select, .users-page select, .user-profile-edit-page select, .user-profile-page select {
+//   border: #cce6ec 3px solid;
+//   height: 25px;
+//   padding-left: 5px;
+//   width: 395px;
+//   font-size: 14px; }
+
+// .openid-signin select, .meta select, .users-page select, .user-profile-edit-page select, .user-profile-page select {
+//   width: 405px;
+//   height: 30px; }
+
+// .openid-signin textarea, .meta textarea, .users-page textarea, .user-profile-edit-page textarea, .user-profile-page textarea {
+//   border: #cce6ec 3px solid;
+//   padding-left: 5px;
+//   padding-top: 5px;
+//   width: 395px;
+//   font-size: 14px; }
+
+// .openid-signin input.submit, .meta input.submit, .users-page input.submit, .user-profile-edit-page input.submit, .user-profile-page input.submit {
+//   background: url(../default/media/images/small-button-blue.png) repeat-x top;
+//   border: 0;
+//   color: #4a757f;
+//   font-weight: bold;
+//   font-size: 13px;
+//   font-family: arial;
+//   height: 26px;
+//   margin: 5px 0px;
+//   width: 100px;
+//   cursor: pointer;
+//   border-radius: 4px;
+//   -ms-border-radius: 4px;
+//   -moz-border-radius: 4px;
+//   -webkit-border-radius: 4px;
+//   -khtml-border-radius: 4px;
+//   text-shadow: 0px 1px 0px #e6f6fa;
+//   -moz-text-shadow: 0px 1px 0px #e6f6fa;
+//   -webkit-text-shadow: 0px 1px 0px #e6f6fa;
+//   -webkit-box-shadow: 1px 1px 2px #808080;
+//   -moz-box-shadow: 1px 1px 2px #808080;
+//   box-shadow: 1px 1px 2px #808080; }
+
+// .openid-signin input.submit:hover, .meta input.submit:hover, .users-page input.submit:hover, .user-profile-edit-page input.submit:hover, .user-profile-page input.submit:hover {
+//   background: url(../default/media/images/small-button-blue.png) repeat-x bottom;
+//   text-decoration: none; }
+
+.openid-signin .cancel, .meta .cancel, .users-page .cancel, .user-profile-edit-page .cancel, .user-profile-page .cancel {
+  background: url(../default/media/images/small-button-cancel.png) repeat-x top !important;
+  color: #525252 !important; }
+
+.openid-signin .cancel:hover, .meta .cancel:hover, .users-page .cancel:hover, .user-profile-edit-page .cancel:hover, .user-profile-page .cancel:hover {
+  background: url(../default/media/images/small-button-cancel.png) repeat-x bottom !important; }
+
+#email-input-fs, #local_login_buttons, #password-fs, #openid-fs {
+  margin-top: 10px; }
+
+#email-input-fs #id_email, #local_login_buttons #id_email, #password-fs #id_email, #openid-fs #id_email, #email-input-fs #id_username, #local_login_buttons #id_username, #password-fs #id_username, #openid-fs #id_username, #email-input-fs #id_password, #local_login_buttons #id_password, #password-fs #id_password, #openid-fs #id_password {
+  font-size: 12px;
+  line-height: 20px;
+  height: 20px;
+  margin: 0px;
+  padding: 0px 0 0 5px;
+  border: #cce6ec 3px solid;
+  width: 200px; }
+
+#email-input-fs .submit-b, #local_login_buttons .submit-b, #password-fs .submit-b, #openid-fs .submit-b {
+  background: url(../default/media/images/small-button-blue.png) repeat-x top;
+  border: 0;
+  color: #4a757f;
+  font-weight: bold;
+  font-size: 13px;
+  font-family: arial;
+  height: 24px;
+  margin-top: -2px;
+  padding-left: 10px;
+  padding-right: 10px;
+  cursor: pointer;
+  border-radius: 4px;
+  -ms-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  text-shadow: 0px 1px 0px #e6f6fa;
+  -moz-text-shadow: 0px 1px 0px #e6f6fa;
+  -webkit-text-shadow: 0px 1px 0px #e6f6fa;
+  -webkit-box-shadow: 1px 1px 2px #808080;
+  -moz-box-shadow: 1px 1px 2px #808080;
+  box-shadow: 1px 1px 2px #808080; }
+
+#email-input-fs .submit-b:hover, #local_login_buttons .submit-b:hover, #password-fs .submit-b:hover, #openid-fs .submit-b:hover {
+  background: url(../default/media/images/small-button-blue.png) repeat-x bottom; }
+
+.openid-input {
+  background: url(../default/media/images/openid.gif) no-repeat;
+  padding-left: 15px;
+  cursor: pointer; }
+
+.openid-login-input {
+  background-position: center left;
+  background: url(../default/media/images/openid.gif) no-repeat 0% 50%;
+  padding: 5px 5px 5px 15px;
+  cursor: pointer;
+  font-family: trebuchet ms;
+  font-weight: 300;
+  font-size: 150%;
+  width: 500px; }
+
+.openid-login-submit {
+  height: 40px;
+  width: 80px;
+  line-height: 40px;
+  cursor: pointer;
+  border: 1px solid #777;
+  font-weight: bold;
+  font-size: 120%; }
+
+.tabbar-user {
+  width: 375px; }
+
+.user {
+  padding: 5px;
+  line-height: 140%;
+  width: 166px;
+  border: #eee 1px solid;
+  margin-bottom: 5px;
+  border-radius: 3px;
+  -ms-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  .user-micro-info {
+    color: #525252; }
+  ul {
+    margin: 0;
+    list-style-type: none; }
+  .thumb {
+    clear: both;
+    float: left;
+    margin-right: 4px;
+    display: inline; } }
+
+// .tabbar-tags {
+//   width: 270px;
+//   margin-bottom: 15px; }
+
+// a {
+//   &.medal {
+//     font-size: 17px;
+//     line-height: 250%;
+//     margin-right: 5px;
+//     color: #333;
+//     text-decoration: none;
+//     background: url(../default/media/images/medala.gif) no-repeat;
+//     border-left: 1px solid #eee;
+//     border-top: 1px solid #eee;
+//     border-bottom: 1px solid #ccc;
+//     border-right: 1px solid #ccc;
+//     padding: 4px 12px 4px 6px; }
+//   &:hover.medal {
+//     color: #333;
+//     text-decoration: none;
+//     background: url(../default/media/images/medala_on.gif) no-repeat;
+//     border-left: 1px solid #e7e296;
+//     border-top: 1px solid #e7e296;
+//     border-bottom: 1px solid #d1ca3d;
+//     border-right: 1px solid #d1ca3d; } }
+
+#award-list .user {
+  float: left;
+  margin: 5px; }
+
+.tabbar-profile {
+  width: 100%;
+  margin-bottom: 15px;
+  float: left; }
+
+// .user-profile-page {
+//   font-size: 13px;
+//   color: #525252;
+//   p {
+//     font-size: 13px;
+//     line-height: 1.3;
+//     color: #525252; }
+//   .avatar img {
+//     border: #eee 1px solid;
+//     padding: 5px; }
+//   h2 {
+//     padding: 10px 0px 10px 0px;
+//     font-family: 'yanone kaffeesatz',sans-serif; } }
+
+.user-details {
+  font-size: 13px;
+  h3 {
+    font-size: 16px; } }
+
+.user-about {
+  background-color: #eeeeee;
+  height: 200px;
+  line-height: 20px;
+  overflow: auto;
+  padding: 10px;
+  width: 90%;
+  p {
+    font-size: 13px; } }
+
+// .follow-toggle, .submit {
+//   border: 0 !important;
+//   color: #4a757f;
+//   font-weight: bold;
+//   font-size: 12px;
+//   height: 26px;
+//   line-height: 26px;
+//   margin-top: -2px;
+//   font-size: 15px;
+//   cursor: pointer;
+//   font-family: 'yanone kaffeesatz',sans-serif;
+//   background: url(../default/media/images/small-button-blue.png) repeat-x top;
+//   border-radius: 4px;
+//   -ms-border-radius: 4px;
+//   -moz-border-radius: 4px;
+//   -webkit-border-radius: 4px;
+//   -khtml-border-radius: 4px;
+//   text-shadow: 0px 1px 0px #e6f6fa;
+//   -moz-text-shadow: 0px 1px 0px #e6f6fa;
+//   -webkit-text-shadow: 0px 1px 0px #e6f6fa;
+//   -webkit-box-shadow: 1px 1px 2px #808080;
+//   -moz-box-shadow: 1px 1px 2px #808080;
+//   box-shadow: 1px 1px 2px #808080; }
+
+// .follow-toggle:hover, .submit:hover {
+//   background: url(../default/media/images/small-button-blue.png) repeat-x bottom;
+//   text-decoration: none !important; }
+
+// .follow-toggle {
+//   .follow {
+//     font-color: #000;
+//     font-style: normal; }
+//   .unfollow {
+//     div.unfollow-red {
+//       display: none; }
+//     &:hover div {
+//       &.unfollow-red {
+//         display: inline;
+//         color: #fff;
+//         font-weight: bold;
+//         color: #a05736; }
+//       &.unfollow-green {
+//         display: none; } } } }
+
+.count {
+  font-family: 'yanone kaffeesatz',sans-serif;
+  font-size: 200%;
+  font-weight: 700;
+  color: #777777; }
+
+.scorenumber {
+  font-family: 'yanone kaffeesatz',sans-serif;
+  font-size: 35px;
+  font-weight: 800;
+  color: #777;
+  line-height: 40px;
+  margin-top: 3px; }
+
+.vote-count {
+  font-family: arial;
+  font-size: 160%;
+  font-weight: 700;
+  color: #777; }
+
+// .answer-summary {
+//   display: block;
+//   clear: both;
+//   padding: 3px; }
+
+.answer-votes {
+  background-color: #eeeeee;
+  color: #555555;
+  float: left;
+  font-family: arial;
+  font-size: 15px;
+  font-weight: bold;
+  height: 17px;
+  padding: 2px 4px 5px;
+  text-align: center;
+  text-decoration: none;
+  width: 20px;
+  margin-right: 10px;
+  border-radius: 4px;
+  -ms-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px; }
+
+.karma-summary {
+  padding: 5px;
+  font-size: 13px;
+  h3 {
+    text-align: center;
+    font-weight: bold;
+    padding: 5px; } }
+
+.karma-diagram {
+  width: 477px;
+  height: 300px;
+  float: left;
+  margin-right: 10px; }
+
+.karma-details {
+  float: right;
+  width: 450px;
+  height: 250px;
+  overflow-y: auto;
+  word-wrap: break-word;
+  p {
+    margin-bottom: 10px; } }
+
+.karma-gained {
+  font-weight: bold;
+  background: #eee;
+  width: 25px;
+  margin-right: 5px;
+  color: green;
+  padding: 3px;
+  display: block;
+  float: left;
+  text-align: center;
+  border-radius: 3px;
+  -ms-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px; }
+
+.karma-lost {
+  font-weight: bold;
+  background: #eee;
+  width: 25px;
+  color: red;
+  padding: 3px;
+  display: block;
+  margin-right: 5px;
+  float: left;
+  text-align: center;
+  border-radius: 3px;
+  -ms-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px; }
+
+.submit-row {
+  margin-bottom: 10px; }
+
+.revision {
+  margin: 10px 0 10px 0;
+  font-size: 13px;
+  color: #525252;
+  p {
+    font-size: 13px;
+    line-height: 1.3;
+    color: #525252; }
+  h3 {
+    font-family: 'yanone kaffeesatz',sans-serif;
+    font-size: 21px;
+    padding-left: 0px; }
+  .header {
+    background-color: #f5f5f5;
+    padding: 5px;
+    cursor: pointer; }
+  .author {
+    background-color: #e9f3f5; }
+  .summary {
+    padding: 5px 0 10px 0;
+    span {
+      background-color: #fde785;
+      padding: 6px;
+      border-radius: 4px;
+      -ms-border-radius: 4px;
+      -moz-border-radius: 4px;
+      -webkit-border-radius: 4px;
+      -khtml-border-radius: 4px;
+      display: inline;
+      -webkit-box-shadow: 1px 1px 4px #cfb852;
+      -moz-box-shadow: 1px 1px 4px #cfb852;
+      box-shadow: 1px 1px 4px #cfb852; } }
+  .answerbody {
+    padding: 10px 0 5px 10px; }
+  .revision-mark {
+    width: 150px;
+    text-align: left;
+    display: inline-block;
+    font-size: 11px;
+    overflow: hidden;
+    .gravatar {
+      float: left;
+      margin-right: 4px;
+      padding-top: 5px; } }
+  .revision-number {
+    font-size: 300%;
+    font-weight: bold;
+    font-family: sans-serif; } }
+
+// del {
+//   color: #c34719;
+//   .post-tag {
+//     color: #c34719; } }
+
+ins {
+  .post-tag, p {
+    background-color: #e6f0a2; }
+  background-color: #e6f0a2; }
+
+// .vote-notification {
+//   z-index: 1;
+//   cursor: pointer;
+//   display: none;
+//   position: absolute;
+//   font-family: arial;
+//   font-size: 14px;
+//   font-weight: normal;
+//   color: white;
+//   background-color: #8e0000;
+//   text-align: center;
+//   padding-bottom: 10px;
+//   -webkit-box-shadow: 0px 2px 4px #370000;
+//   -moz-box-shadow: 0px 2px 4px #370000;
+//   box-shadow: 0px 2px 4px #370000;
+//   border-radius: 4px;
+//   -ms-border-radius: 4px;
+//   -moz-border-radius: 4px;
+//   -webkit-border-radius: 4px;
+//   -khtml-border-radius: 4px;
+//   h3 {
+//     background: url(../default/media/images/notification.png) repeat-x top;
+//     padding: 10px 10px 10px 10px;
+//     font-size: 13px;
+//     margin-bottom: 5px;
+//     border-top: #8e0000 1px solid;
+//     color: #fff;
+//     font-weight: normal;
+//     border-top-right-radius: 4px;
+//     border-top-left-radius: 4px;
+//     -moz-border-radius-topright: 4px;
+//     -moz-border-radius-topleft: 4px;
+//     -webkit-border-top-left-radius: 4px;
+//     -webkit-border-top-right-radius: 4px; }
+//   a {
+//     color: #fb7321;
+//     text-decoration: underline;
+//     font-weight: bold; } }
+
+// #ground {
+//   width: 100%;
+//   clear: both;
+//   border-top: 1px solid #000;
+//   padding: 6px 0 0 0;
+//   background: #16160f;
+//   font-size: 16px;
+//   font-family: 'yanone kaffeesatz',sans-serif;
+//   p {
+//     margin-bottom: 0; } }
+
+.footer-links {
+  color: #eee;
+  text-align: left;
+  width: 500px;
+  float: left;
+  a {
+    color: #e7e8a8; } }
+
+.powered-link {
+  width: 500px;
+  float: left;
+  text-align: left;
+  a {
+    color: #8ebcc7; } }
+
+.copyright {
+  color: #616161;
+  width: 450px;
+  float: right;
+  text-align: right;
+  a {
+    color: #8ebcc7; }
+  img.license-logo {
+    margin: 6px 0px 20px 10px;
+    float: right; } }
+
+.notify-me {
+  float: left; }
+
+span {
+  &.text-counter {
+    margin-right: 20px; }
+  // &.form-error {
+  //   color: #990000;
+  //   font-weight: normal;
+  //   margin-left: 5px; }
+  }
+
+p.form-item {
+  margin: 0px; }
+
+// .deleted {
+//   background: #f4e7e7 none repeat scroll 0 0; }
+
+.form-row {
+  line-height: 25px; }
+
+table {
+  &.form-as-table {
+    margin-top: 5px;
+    ul {
+      list-style-type: none;
+      display: inline; }
+    li {
+      display: inline; }
+    td {
+      text-align: right; }
+    th {
+      text-align: left;
+      font-weight: normal; } }
+  &.ab-subscr-form, &.ab-tag-filter-form {
+    width: 45em; } }
+
+.submit-row {
+  line-height: 30px;
+  padding-top: 10px;
+  display: block;
+  clear: both; }
+
+.errors {
+  line-height: 20px;
+  color: red; }
+
+.error {
+  color: darkred;
+  margin: 0;
+  font-size: 10px; }
+
+label.retag-error {
+  color: darkred;
+  padding-left: 5px;
+  font-size: 10px; }
+
+.fieldset {
+  border: none;
+  margin-top: 10px;
+  padding: 10px; }
+
+// span.form-error {
+//   color: #990000;
+//   font-size: 90%;
+//   font-weight: normal;
+//   margin-left: 5px; }
+
+.favorites-empty {
+  width: 32px;
+  height: 45px;
+  float: left; }
+
+.user-info-table {
+  margin-bottom: 10px;
+  border-spacing: 0; }
+
+.user-stats-table .narrow {
+  width: 660px; }
+
+.narrow .summary h3 {
+  padding: 0px;
+  margin: 0px; }
+
+.relativetime {
+  font-weight: bold;
+  text-decoration: none; }
+
+// .narrow .tags {
+//   float: left; }
+
+.user-action-1 {
+  font-weight: bold;
+  color: #333; }
+
+.user-action-2 {
+  font-weight: bold;
+  color: #ccc; }
+
+.user-action-3, .user-action-4 {
+  color: #333; }
+
+.user-action-5, .user-action-6 {
+  color: darkred; }
+
+.user-action-7 {
+  color: #333; }
+
+.user-action-8 {
+  padding: 3px;
+  font-weight: bold;
+  background-color: #ccc;
+  color: #763333; }
+
+.revision-summary {
+  background-color: #fffe9b;
+  padding: 2px; }
+
+.question-title-link a {
+  font-weight: bold;
+  color: #0077cc; }
+
+.answer-title-link a {
+  color: #333; }
+
+.post-type-1 a, .post-type-3 a, .post-type-5 a {
+  font-weight: bold; }
+
+.post-type-2 a, .post-type-4 a, .post-type-6 a, .post-type-8 a {
+  color: #333; }
+
+.hilite, .hilite1 {
+  background-color: #ff0; }
+
+.hilite2 {
+  background-color: #f0f; }
+
+.hilite3 {
+  background-color: #0ff; }
+
+// .gold, .badge1 {
+//   color: #ffcc00; }
+
+// .silver, .badge2 {
+//   color: #cccccc; }
+
+// .bronze, .badge3 {
+//   color: #cc9933; }
+
+.score {
+  font-weight: 800;
+  color: #333; }
+
+a {
+  &.comment {
+    background: #eee;
+    color: #993300;
+    padding: 5px; }
+  &.offensive {
+    color: #999; } }
+
+.message {
+  h1 {
+    padding-top: 0px;
+    font-size: 15px; }
+  p {
+    margin-bottom: 0px; } }
+
+p.space-above {
+  margin-top: 10px; }
+
+.warning {
+  color: red; }
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: none; }
+
+// .submit {
+//   cursor: pointer;
+//   background-color: #d4d0c8;
+//   height: 30px;
+//   border: 1px solid #777777;
+//   font-weight: bold;
+//   font-size: 120%;
+//   &:hover {
+//     text-decoration: underline; }
+//   &.small {
+//     margin-right: 5px;
+//     height: 20px;
+//     font-weight: normal;
+//     font-size: 12px;
+//     padding: 1px 5px;
+//     &:hover {
+//       text-decoration: none; } } }
+
+.question-page a.submit {
+  display: -moz-inline-stack;
+  display: inline-block;
+  line-height: 30px;
+  padding: 0 5px;
+  *display: inline; }
+
+.noscript {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  z-index: 100;
+  padding: 5px 0;
+  text-align: center;
+  font-family: sans-serif;
+  font-size: 120%;
+  font-weight: bold;
+  color: #ffffff;
+  background-color: #ae0000; }
+
+.big {
+  font-size: 14px; }
+
+.strong {
+  font-weight: bold; }
+
+.orange {
+  color: #d64000;
+  font-weight: bold; }
+
+.grey {
+  color: #808080; }
+
+.about div {
+  padding: 10px 5px 10px 5px;
+  border-top: 1px dashed #aaaaaa; }
+
+.highlight {
+  background-color: #fff8c6; }
+
+.nomargin {
+  margin: 0; }
+
+.margin-bottom {
+  margin-bottom: 10px; }
+
+.margin-top {
+  margin-top: 10px; }
+
+.inline-block {
+  display: inline-block; }
+
+.action-status {
+  margin: 0;
+  border: none;
+  text-align: center;
+  line-height: 10px;
+  font-size: 12px;
+  padding: 0;
+  span {
+    padding: 3px 5px 3px 5px;
+    background-color: #fff380;
+    font-weight: normal;
+    -moz-border-radius: 5px;
+    -khtml-border-radius: 5px;
+    -webkit-border-radius: 5px; } }
+
+.list-table td {
+  vertical-align: top; }
+
+table.form-as-table {
+  .errorlist {
+    display: block;
+    margin: 0;
+    padding: 0 0 0 5px;
+    text-align: left;
+    font-size: 10px;
+    color: darkred; }
+  input {
+    display: inline;
+    margin-left: 4px; }
+  th {
+    vertical-align: bottom;
+    padding-bottom: 4px; } }
+
+.form-row-vertical {
+  margin-top: 8px;
+  display: block;
+  label {
+    margin-bottom: 3px;
+    display: block; } }
+
+.text-align-right {
+  text-align: center; }
+
+ul.form-horizontal-rows {
+  list-style: none;
+  margin: 0;
+  li {
+    position: relative;
+    height: 40px; }
+  label {
+    display: inline-block; }
+  ul.errorlist {
+    list-style: none;
+    color: darkred;
+    font-size: 10px;
+    line-height: 10px;
+    position: absolute;
+    top: 2px;
+    left: 180px;
+    text-align: left;
+    margin: 0;
+    li {
+      height: 10px; } }
+  label {
+    position: absolute;
+    left: 0px;
+    bottom: 6px;
+    margin: 0px;
+    line-height: 12px;
+    font-size: 12px; }
+  li input {
+    position: absolute;
+    bottom: 0px;
+    left: 180px;
+    margin: 0px; } }
+
+.narrow .summary {
+  float: left; }
+
+.user-profile-tool-links {
+  font-weight: bold;
+  vertical-align: top; }
+
+// ul {
+//   &.post-tags {
+//     margin-left: 3px;
+//     li {
+//       margin-top: 4px;
+//       margin-bottom: 3px; } }
+//   &.post-retag {
+//     margin-bottom: 0px;
+//     margin-left: 5px; } }
+
+// #question-controls .tags {
+//   margin: 0 0 3px 0; }
+
+// #tagselector {
+//   padding-bottom: 2px;
+//   margin-bottom: 0; }
+
+// #related-tags {
+//   padding-left: 3px; }
+
+#hideignoredtagscontrol {
+  margin: 5px 0 0 0;
+  label {
+    font-size: 12px;
+    color: #666; } }
+
+#hideignoredtagscb {
+  margin: 0 2px 0 1px; }
+
+#recaptcha_widget_div {
+  width: 318px;
+  float: left;
+  clear: both; }
+
+p.signup_p {
+  margin: 20px 0px 0px 0px; }
+
+.simple-subscribe-options ul {
+  list-style: none;
+  list-style-position: outside;
+  margin: 0; }
+
+.wmd-preview {
+  a {
+    color: #1b79bd; }
+  li {
+    margin-bottom: 7px;
+    font-size: 14px; } }
+
+// .search-result-summary {
+//   font-weight: bold;
+//   font-size: 18px;
+//   line-height: 22px;
+//   margin: 0px 0px 0px 0px;
+//   padding: 2px 0 0 0;
+//   float: left; }
+
+.faq-rep-item {
+  text-align: right;
+  padding-right: 5px; }
+
+.user-info-table .gravatar {
+  margin: 0; }
+
+#responses {
+  clear: both;
+  line-height: 18px;
+  margin-bottom: 15px;
+  div.face {
+    float: left;
+    text-align: center;
+    width: 54px;
+    padding: 3px;
+    overflow: hidden; } }
+
+.response-parent {
+  margin-top: 18px;
+  strong {
+    font-size: 20px; } }
+
+.re {
+  min-height: 57px;
+  clear: both;
+  margin-top: 10px; }
+
+#responses input {
+  float: left; }
+
+#re_tools {
+  margin-bottom: 10px; }
+
+#re_sections {
+  margin-bottom: 6px;
+  .on {
+    font-weight: bold; } }
+
+.avatar-page {
+  ul {
+    list-style: none; }
+  li {
+    display: inline; } }
+
+// .user-profile-page {
+//   .avatar p {
+//     margin-bottom: 0px; }
+//   .tabbar a#stats {
+//     margin-left: 0; }
+//   img.gravatar {
+//     margin: 2px 0 3px 0; }
+//   h3 {
+//     padding: 0;
+//     margin-top: -3px; } }
+
+.userlist {
+  font-size: 13px; }
+
+img.flag {
+  border: 1px solid #eee;
+  vertical-align: text-top; }
+
+.main-page img.flag {
+  vertical-align: text-bottom; }
+
+a.edit {
+  padding-left: 3px;
+  color: #145bff; }
+
+.str {
+  color: #080; }
+
+.kwd {
+  color: #008; }
+
+.com {
+  color: #800; }
+
+.typ {
+  color: #606; }
+
+.lit {
+  color: #066; }
+
+.pun {
+  color: #660; }
+
+.pln {
+  color: #000; }
+
+// .tag {
+//   color: #008; }
+
+.atn {
+  color: #606; }
+
+.atv {
+  color: #080; }
+
+.dec {
+  color: #606; }
+
+pre.prettyprint {
+  clear: both;
+  padding: 3px;
+  border: 0px solid #888; }
+
+// @media print {
+//   .str {
+//     color: #060; }
+//   .kwd {
+//     color: #006;
+//     font-weight: bold; }
+//   .com {
+//     color: #600;
+//     font-style: italic; }
+//   .typ {
+//     color: #404;
+//     font-weight: bold; }
+//   .lit {
+//     color: #044; }
+//   .pun {
+//     color: #440; }
+//   .pln {
+//     color: #000; }
+//   .tag {
+//     color: #006;
+//     font-weight: bold; }
+//   .atn {
+//     color: #404; }
+//   .atv {
+//     color: #060; } }

static/css/discussion/_badges.scss

@@ -0,0 +1,79 @@
+div.badges-intro {
+  margin: 20px 0;
+}
+
+div.badge-intro {
+  @extend .badges-intro;
+
+  .badge1, .badge2, .badge3 {
+    font-size: 20px;
+  }
+
+
+}
+
+div#award-list{
+  li.username {
+    font-size: 20px;
+    margin-bottom: 8px;
+  }
+}
+
+ul.badge-list {
+  li.badge {
+    border-bottom: 1px solid #eee;
+    @extend .clearfix;
+    list-style: none;
+    padding: 10px 0;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    div.check {
+      float:right;
+      min-width:flex-grid(1,9);
+      text-align:right;
+
+      span {
+      font-size:19px;
+      padding-right:5px;
+      color:green;
+      }
+    }
+     div.badge-name {
+       float:left;
+       width:flex-grid(3,9);
+
+       span {
+        font-size: 20px;
+       }
+     }
+
+     p {
+       margin: 0;
+       float:left;
+     }
+  }
+}
+
+.gold, .badge1 {
+  color: #ffcc00;
+}
+
+.silver, .badge2 {
+  color: #cccccc;
+}
+
+.bronze, .badge3 {
+  color: #cc9933;
+}
+div.badge-desc {
+  > div {
+    margin-bottom: 20px;
+     span {
+      font-size: 18px;
+      @include border-radius(10px);
+     }
+  }
+}

static/css/discussion/_discussion.scss

@@ -0,0 +1,82 @@
+// Layout
+body.askbot {
+
+  section.main-content {
+    div.discussion-wrapper {
+      @extend .table-wrapper;
+
+      div.discussion-content {
+        @include box-sizing(border-box);
+        display: table-cell;
+        min-width: 650px;
+        padding: lh();
+        vertical-align: top;
+        width: flex-grid(9) + flex-gutter();
+
+        a.tabula-rasa, .tabula-rasa{
+          @extend .light-button;
+          @include border-radius(5px);
+          display: block;
+          margin: 10px auto;
+          padding: 20px;
+          text-align: center;
+          width: flex-grid(5);
+          text-decoration: none;
+          color: #888;
+          font-weight: bold;
+
+          &:first-child {
+            margin-top: 70px;
+          }
+
+          &:last-child {
+            margin-bottom: 70px;
+          }
+
+        }
+      }
+    }
+  }
+
+}
+
+// Autocomplete
+.acInput {
+  width: 200px;
+}
+.acResults {
+  background-color: #fff;
+  border: 1px solid #ababab;
+  overflow: hidden;
+  padding: 0px;
+  @include box-shadow(0 2px 2px #bbb);
+
+  ul {
+    list-style-position: outside;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+
+  li {
+    cursor: pointer;
+    display: block;
+    font: menu;
+    margin: 0px;
+    overflow: hidden;
+    padding: 5px 10px;
+    text-align: left;
+    border-top: 1px solid #eee;
+    width: 100%;
+  }
+}
+
+.acLoading {
+  background : url('../default/media/images/indicator.gif') right center no-repeat;
+}
+
+.acSelect {
+  background-color: $mit-red;
+  color: #fff;
+}

static/css/discussion/_form-wmd-toolbar.scss

@@ -0,0 +1,118 @@
+.wmd-panel
+{
+}
+
+#wmd-button-bar {
+  border: 1px solid #ddd;
+  height:36px;
+  float:left;
+  width:99%;
+}
+
+#wmd-input {
+  height: 500px;
+  background-color: Gainsboro;
+  border: 1px solid DarkGray;
+  margin-top: -20px;
+}
+
+#wmd-preview {
+  background-color: LightSkyBlue;
+}
+
+#wmd-output {
+  background-color: Pink;
+}
+
+#wmd-button-row {
+  position: relative; 
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-bottom: 0px;
+  margin-top: 10px;
+  padding: 0px;  
+  height: 20px;
+}
+
+.wmd-spacer {
+  width: 1px; 
+  height: 20px; 
+  margin-left: 14px;
+  position: absolute;
+  background-color: Silver;
+  display: inline-block; 
+  list-style: none;
+}
+
+.wmd-button {
+  width: 20px; 
+  height: 20px; 
+  margin-left: 5px;
+  margin-right: 5px;
+  position: absolute;
+  background-image: url(../images/askbot/wmd-buttons.png);
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  display: inline-block; 
+  list-style: none;
+}
+
+.wmd-button > a {
+  width: 20px; 
+  height: 20px; 
+  margin-left: 5px;
+  margin-right: 5px;
+  position: absolute;
+  display: inline-block; 
+}
+
+
+/* sprite button slicing style information */
+#wmd-bold-button    {left: 0px;   background-position: 0px 0;}
+#wmd-italic-button  {left: 25px;  background-position: -20px 0;}
+#wmd-spacer1        {left: 50px;}
+#wmd-link-button    {left: 75px;  background-position: -40px 0;}
+#wmd-quote-button   {left: 100px;  background-position: -60px 0;}
+#wmd-code-button    {left: 125px;  background-position: -80px 0;}
+#wmd-image-button   {left: 150px;  background-position: -100px 0;}
+#wmd-attachment-button   {left: 175px;  background-position: -120px 0;}
+#wmd-spacer2        {left: 200px;}
+#wmd-olist-button   {left: 225px;  background-position: -140px 0;}
+#wmd-ulist-button   {left: 250px; background-position: -160px 0;}
+#wmd-heading-button {left: 275px; background-position: -180px 0;}
+#wmd-hr-button      {left: 300px; background-position: -200px 0;}
+#wmd-spacer3        {left: 325px;}
+#wmd-undo-button    {left: 350px; background-position: -220px 0;}
+#wmd-redo-button    {left: 375px; background-position: -240px 0;}
+#wmd-help-button    {right: 0px; background-position: -260px 0;}
+
+
+.wmd-prompt-background
+{
+  background-color: Black;
+}
+
+.wmd-prompt-dialog
+{
+  border: 1px solid #999999;
+  background-color: #F5F5F5;
+}
+
+.wmd-prompt-dialog > div {
+  font-size: 1em;
+  font-family: arial, helvetica, sans-serif;
+}
+
+
+.wmd-prompt-dialog > form > input[type="text"] {
+  border: 1px solid #999999;
+  color: black;
+}
+
+.wmd-prompt-dialog > form > input[type="button"]{
+  border: 1px solid #888888;
+  font-family: trebuchet MS, helvetica, sans-serif;
+  font-size: 1em;
+  font-weight: bold;
+}
+

static/css/discussion/_forms.scss

@@ -0,0 +1,161 @@
+form.answer-form {
+  @include box-sizing(border-box);
+  border-top: 1px solid #ddd;
+  overflow: hidden;
+  padding-left: flex-grid(1.1);
+
+  textarea {
+    @include box-sizing(border-box);
+    margin-top: 15px;
+    resize: vertical;
+    width: 99%;
+  }
+
+  div.form-item {
+    margin: 15px 0;
+
+    label {
+      display: block;
+      margin-bottom: -5px;
+    }
+
+    .title-desc {
+      @include box-sizing(border-box);
+      @include border-radius(4px);
+      background: #333;
+      color: #fff;
+      display: none;
+      font-size: 13px;
+      padding: 7px 14px;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    &:hover  {
+      .title-desc {
+        display: inline-block;
+        position: absolute;
+        margin-left: 10px;
+        z-index: 1;
+        width: 200px;
+
+        &:before {
+          border-color: transparent #333 transparent transparent;
+          border-style:solid;
+          border-width:12px 12px 12px 0;
+          content:"";
+          height:0;
+          left:-10px;
+          position:absolute;
+          top:1;
+          width:0;
+
+        }
+      }
+    }
+
+  }
+
+  span.form-error, label.form-error {
+    color: #990000;
+    display: inline-block;
+    font-size: 90%;
+    font-weight: bold;
+    padding: 10px 0;
+  }
+
+  div.preview-toggle{
+    padding: 15px 0;
+    width: auto;
+    a {
+      @extend .light-button;
+    }
+  }
+
+  .wmd-preview {
+    margin: 3px 0 15px 0;
+    padding: 10px;
+    background-color: #F5F5F5;
+    min-height: 20px;
+    overflow: auto;
+    font-size: 13px;
+    font-family: Arial;
+
+    p {
+      margin-bottom: 14px;
+      line-height: 1.4;
+      font-size: 14px;
+    }
+
+    blockquote {
+      margin-left: 2.5%;
+      padding-left: 1.5%;
+      border-left: 1px dashed #ddd;
+      color: $mit-red;;
+    }
+
+    ul, ol, pre {
+      margin-left: 3%;
+      margin-bottom: 20px;
+    }
+
+
+    pre {
+      background-color: #eee;
+    }
+
+    blockquote {
+      background-color: #eee;
+    }
+  }
+}
+
+input.after-editor {
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+
+form.question-form {
+  @extend .answer-form;
+  border: none;
+  padding: 15px 0 0 0;
+
+
+  input[type="text"] {
+    @include box-sizing(border-box);
+    width: flex-grid(6);
+  }
+
+  input[type="checkbox"] {
+    margin-top: 10px;
+  }
+
+  div#question-list {
+  background-color: rgba(255,255,255,0.95);
+  @include box-sizing(border-box);
+  margin-top: -15px;
+  max-width: 505px;
+  min-width: 300px;
+  overflow: hidden;
+  padding-left: 5px;
+  position: absolute;
+  width: 35%;
+  z-index: 9999;
+
+  h2 {
+    text-transform: none;
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+    margin: 0;
+
+    span {
+      background: #eee;
+      color: #555;
+      padding: 2px 5px;
+      @include border-radius(2px);
+      margin-right: 5px;
+    }
+  }
+}
+}
+
+

static/css/discussion/_modals.scss

@@ -0,0 +1,32 @@
+.vote-notification {
+  background-color: darken($mit-red, 7%);
+  @include border-radius(4px);
+  @include box-shadow(0px 2px 9px #aaa);
+  color: white;
+  cursor: pointer;
+  display: none;
+  font-size: 14px;
+  font-weight: normal;
+  padding-bottom: 10px;
+  position: absolute;
+  text-align: center;
+  z-index: 1;
+
+  h3 {
+    background: $mit-red;
+    padding: 10px 10px 10px 10px;
+    font-size: 13px;
+    margin-bottom: 5px;
+    border-bottom: darken(#8e0000, 10%) 1px solid;
+    @include box-shadow(0 1px 0 lighten($mit-red, 10%));
+    color: #fff;
+    font-weight: normal;
+    @include border-radius(4px 4px 0 0);
+  }
+
+  a {
+    color: #fb7321;
+    text-decoration: underline;
+    font-weight: bold; 
+  }
+}

static/css/discussion/_profile.scss

@@ -0,0 +1,126 @@
+body.user-profile-page {
+
+  section.questions {
+    h1 {
+     margin: 0;
+    }
+  }
+
+  ul.sub-info {
+    // border-top: 1px solid #ddd;
+    margin-top: lh();
+    list-style: none;
+
+    > li {
+      display: table-cell;
+      padding: (flex-gutter(9)/2);
+      border-right: 1px dashed #efefef;
+      @include box-sizing(border-box);
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        border-right: 0;
+        padding-right: 0;
+      }
+
+      &.votes-badges {
+        width: flex-grid(2,9);
+
+        p {
+          margin-top: 15px;
+        }
+
+      }
+
+      &.answer-list {
+        width: flex-grid(4, 9);
+      }
+
+      &.tags-list {
+        width: flex-grid(3,9);
+      }
+
+      h2 {
+        margin-bottom: 30px;
+        margin-top: 0;
+      }
+
+      span.tag-number {
+        display: none;
+      }
+    }
+
+    ul {
+      list-style: none;
+
+      &.user-stats-table {
+        list-style: none;
+
+        li {
+          padding: 10px 0 15px;
+          border-top: 1px solid #eee;
+        }
+      }
+
+      &.vote-buttons {
+        list-style: none;
+        margin-bottom: 30px;
+
+        li {
+          background-color: lighten($cream, 3%);
+          background-position: 10px center;
+          background-repeat: no-repeat;
+          @include border-radius(4px);
+          display: inline-block;
+          height: 20px;
+          padding: 10px 10px 10px 40px;
+
+          &.up {
+            background-color:#d1e3a8;
+            background-image: url(../images/askbot/vote-arrow-up-activate.png);
+            margin-right: 6px;
+
+            span.vote-count {
+              color: #3f6c3e;
+            }
+          }
+
+          &.down {
+            background-image: url(../images/askbot/vote-arrow-down-activate.png);
+            background-color:#eac6ad;
+
+            span.vote-count {
+              color: $mit-red;
+            }
+
+          }
+        }
+      }
+
+      &.badges {
+        @include inline-block();
+
+        a {
+          background-color: #e3e3e3;
+          border: 0;
+          @include border-radius(4px);
+          color: #292309;
+          display: block;
+          font-size: 12px;
+          padding: 10px;
+          margin-bottom: 10px;
+          text-shadow: 0 1px 0 #fff;
+          text-transform: uppercase;
+          text-decoration: none;
+
+          &:hover {
+            background-color: #cdcdcd;
+          }
+        }
+      }
+    }
+  }
+}

static/css/discussion/_question-view.scss

@@ -0,0 +1,363 @@
+div.question-header {
+  div.vote-buttons {
+    display: inline-block;
+    float: left;
+    margin-right: flex-gutter(9);
+    width: flex-grid(0.7,9);
+
+    ul {
+      li {
+        background-position: center;
+        background-repeat: no-repeat;
+        cursor: pointer;
+        font-weight: bold;
+        height: 20px;
+        list-style: none;
+        padding: 10px;
+        text-align: center;
+        width: 70%;
+
+        &.post-vote {
+          @include border-radius(4px);
+          background-color: lighten($cream, 5%);
+          border: 1px solid darken( $cream, 10% );
+          @include box-shadow(inset 0 1px 0px #fff);
+        }
+
+        &.question-img-upvote, &.answer-img-upvote  {
+          background-image: url(../images/askbot/vote-arrow-up.png);
+          @include box-shadow(inset 0 1px 0px rgba(255, 255, 255, 0.5));
+
+          &:hover, &.on {
+            background-color:#d1e3a8;
+            border-color: darken(#D1E3A8, 20%);
+          background-image: url(../images/askbot/vote-arrow-up-activate.png);
+          }
+        }
+
+        &.question-img-downvote, &.answer-img-downvote  {
+          background-image: url(../images/askbot/vote-arrow-down.png);
+
+          &:hover, &.on {
+            background-color:#EAC6AD;
+            border-color: darken(#EAC6AD, 20%);
+            background-image: url(../images/askbot/vote-arrow-down-activate.png);
+          }
+        }
+      }
+    }
+  }
+
+  div.question-container {
+    display: inline-block;
+    float: left;
+    width: flex-grid(8.3,9);
+
+    h1 {
+      margin-top: 0;
+    }
+
+    div.meta-bar {
+      border-bottom: 1px solid #eee;
+      display: block;
+      margin: 10px 0;
+      overflow: hidden;
+      padding: 5px 0 10px;
+
+      div.tag-list {
+        display: inline-block;
+        float:left;
+        width: flex-grid(4,8);
+        margin-right: flex-gutter(8);
+      }
+
+      div.question-actions {
+        display: inline-block;
+        float:left;
+        text-align: right;
+        width: flex-grid(4,8);
+
+        a {
+          &.question-delete {
+            color: $mit-red;
+            text-decoration: none;
+            cursor: pointer;
+          }
+        }
+
+        span.sep {
+          color: #ccc;
+        }
+      }
+    }
+
+    div.question-content {
+      overflow: hidden;
+
+      div.question-body {
+        display: inline-block;
+        float: left;
+        margin-right: flex-gutter(8);
+        width: flex-grid(6.2,8);
+
+      blockquote {
+        margin-left: 2.5%;
+        padding-left: 1.5%;
+        border-left: 1px dashed #ddd;
+        color: $mit-red;;
+      }
+
+      ul, ol, pre {
+        margin-left: 6%;
+        margin-bottom: 20px;
+      }
+    }
+
+
+      div.post-update-container {
+        display: inline-block;
+        float: left;
+        width: 20%;
+        border-left: 1px dashed #ddd;
+
+        a {
+          border-bottom: none;
+          font-style: normal;
+        }
+
+        div.post-update-info {
+          @include box-sizing(border-box);
+          padding: 10px;
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          &.revision {
+            text-align: center;
+            background:lighten($cream, 7%);
+
+            a {
+              color: black;
+            }
+          }
+
+          div.change-date {
+            font-size: 12px;
+            margin-bottom: 2px;
+          }
+
+          div.user-meta {
+            display: inline-block;
+
+            span.username {
+              font-size: 20px;
+              margin-right: 5px;
+            }
+
+            span.user-badges {
+            }
+          }
+        }
+      }
+    }
+
+    div.comments-container {
+      @include box-sizing(border-box);
+      display: inline-block;
+      padding: 0 0 3% 0;
+      width: 100%;
+
+      div.comments-content {
+        font-size: 13px;
+        background: #efefef;
+
+        .block {
+          border-top: 1px solid #ddd;
+          padding: 15px;
+          display: block;
+
+          &:first-child {
+            border-top: 0;
+          }
+
+          &.official {
+            padding-top: 10px;
+
+            span.official-comment {
+              background: $mit-red;
+              color: #fff;
+              display: block;
+              font-size: 12px;
+              margin: 0 0 10px -5%;
+              padding:2px 5px 2px 5%;
+              text-align: left;
+              width:100px;
+            }
+          }
+        }
+
+        form.post-comments {
+          padding: 15px;
+
+           button:last-child {
+            margin-left: 10px;
+            @extend .light-button;
+          }
+        }
+
+        div.comment {
+          &:first-child {
+            border-top: 0;
+          }
+
+          &:last-child {
+            margin-bottom: 20px;
+          }
+
+          aside.comment-controls {
+            background: none;
+            border: none;
+            @include box-shadow(none);
+            display: inline-block;
+            margin-top: -8px;
+            padding:0 2% 0 0;
+            text-align: center;
+            width: 5%;
+
+            div {
+              background: none;
+              opacity: 0.6;
+
+              &:hover {
+                opacity: 1;
+              }
+            }
+
+            div.comment-votes {
+                width: 16px;
+
+              a.upvote {
+                background: url(../images/askbot/comment-vote-up.png) no-repeat 2px;
+                cursor: pointer;
+                color: green;
+                display: block;
+                margin-bottom: 6px;
+                margin-top: 5px;
+                overflow: hidden;
+                text-decoration: none;
+                text-indent: -9999px; 
+                width: 20px;
+              }
+
+              a.upvoted {
+                @include border-radius(3px);
+                background: #D1E3A8;
+                color: green;
+                font-weight: bold;
+                margin-top: 10px;
+                padding: 2px;
+                text-indent: 0px;
+              }
+            }
+
+            hr {
+              margin: 0;
+            }
+
+            div.comment-delete {
+              // display: inline;
+              color: $mit-red;
+              cursor: pointer;
+              font-size: 15px;
+            }
+
+            div.comment-edit {
+              @include transform(rotate(50deg));
+              cursor: pointer;
+              font-size: 16px;
+              a.edit-icon {
+                color: #555;
+                text-decoration: none;
+              }
+            }
+          }
+
+          div.comment-body {
+            display: inline-block;
+            width: 95%;
+
+            &#full-width {
+              width: 100%;
+            }
+
+            div.comment-meta {
+              text-align: right;
+
+              a.author {
+                font-weight: bold;
+              }
+
+              a.edit {
+                @extend .button;
+                font-size: 12px;
+                padding: 2px 10px;
+              }
+            }
+          }
+        }
+      }
+
+      #edit-comment-form {
+        margin: 10px 0;
+        min-height: 100px;
+        width: 99%;
+        resize: vertical;
+      }
+      .counter {
+        color: #888;
+        display: none;
+        float: right;
+        margin-top: 5px;
+        text-align: right;
+      }
+
+      div.controls {
+        border-top: 1px solid #efefef;
+        text-align: right;
+
+        a {
+          display: inline-block;
+          font-size: 12px;
+          margin: 10px 10px 10px 0;
+        }
+      }
+    }
+  }
+}
+
+div.question-status {
+  background: $mit-red;
+  clear:both;
+  color: #fff;
+  display: block;
+  padding: 10px 0 10px 7.5%;
+
+  h3 {
+  font-weight: normal;
+  }
+
+  a {
+    color: #eee;
+  }
+}
+
+div.share-question {
+  padding: 10px 0 10px 7.5%;
+
+  p {
+    padding: 0;
+    margin: 0;
+  }
+}

static/css/discussion/_questions.scss

@@ -0,0 +1,267 @@
+div.question-list-header {
+  display: block;
+  margin-bottom: 0px;
+  overflow: hidden;
+  width: flex-grid(9,9);
+  @extend h1.top-header;
+
+  h1 {
+    margin: 0;
+
+    > a.light-button {
+      float: right;
+    }
+  }
+
+  section.question-list-meta  {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+
+    div {
+      display: inline-block;
+      float: left;
+    }
+
+    h1 {
+      margin: 0;
+    }
+    span.label {
+      color: #555;
+    }
+
+    div.question-list-title {
+      margin-right: flex-gutter();
+
+      h1 {
+        margin-top: 0;
+      }
+    }
+
+
+    div.question-sort {
+      float: right;
+      margin-left: flex-gutter();
+      margin-top: 6px;
+
+      nav {
+        @extend .action-link;
+        float: right;
+
+        a {
+          &.on span{
+            font-weight: bold;
+          }
+
+          &:before {
+            content: '|';
+            color: #ccc;
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  section.question-tags-list {
+    display: block;
+    min-height: 26px;
+    padding-top:15px;
+    width: 100%;
+
+    div {
+      display: inline-block;
+      float: left;
+    }
+
+    div.back {
+      margin-right: 10px;
+      margin-top: 4px;
+
+      a {
+        color: #555;
+      }
+    }
+
+    div.tags-list {
+
+    }
+
+    ul.tags {
+      li {
+        background: #fff;
+
+        &:before {
+          border-color: transparent #fff transparent transparent;
+        }
+      }
+    }
+  }
+}
+
+ul.question-list, div#question-list {
+  width: flex-grid(9,9);
+
+  li.single-question {
+    border-bottom: 1px solid #eee;
+    list-style: none;
+    padding: 10px lh();
+    margin-left: (-(lh()));
+    width: 100%;
+
+    &:hover {
+      background: #F3F3F3;
+
+      ul.tags li {
+        background: #ddd;
+
+        &:before {
+          border-color: transparent #ddd transparent transparent;
+        }
+      }
+    }
+
+    &:first-child {
+      border-top: 0;
+    }
+
+    div {
+      display: inline-block;
+
+      &.question-body {
+        @include box-sizing(border-box);
+        margin-right: flex-gutter();
+        width: flex-grid(5.5,9);
+
+        h2 {
+          font-size: 16px;
+          font-weight: bold;
+          letter-spacing: 0;
+          margin: 0px 0 15px 0;
+          text-transform: none;
+        }
+
+        p.excerpt {
+          color: #777;
+        }
+
+
+        div.user-info {
+          display: inline-block;
+          vertical-align: top;
+          margin-bottom: 10px;
+
+          span.relative-time {
+            font-weight: normal;
+          }
+
+          a {
+            color: $mit-red;
+          }
+        }
+
+        ul.tags {
+          display: inline-block;
+        }
+
+      }
+
+      &.question-meta {
+        float: right;
+        margin-top: 10px;
+        width: flex-grid(3.5,9);
+
+
+        ul {
+          text-align: right;
+
+          li {
+            border: 1px solid #ddd;
+            @include box-shadow(0 1px 0 #fff);
+            display: inline-block;
+            height:60px;
+            @include linear-gradient(#fff, #f5f5f5);
+            margin-right: 10px;
+            width: 60px;
+
+            &:last-child {
+              margin-right: 0px;
+            }
+
+            &:hover {
+              span, div {
+                color: #555;
+              }
+            }
+
+            &.views {
+            }
+
+            &.answers {
+              &.accepted {
+
+                @include linear-gradient(#fff, lighten( #c4dfbe, 12% ));
+                border-color: #c4dfbe;
+
+                span, div {
+                  color: darken(#c4dfbe, 35%);
+                }
+              }
+              &.no-answers {
+
+
+                span, div {
+                  color: lighten($mit-red, 20%);
+                }
+              }
+            }
+
+            &.votes {
+            }
+
+            span, div {
+              @include box-sizing(border-box);
+              color: #888;
+              display: block;
+              text-align: center;
+            }
+
+            span {
+              font-size: 16px;
+              font-weight: bold;
+              height: 35px;
+              padding-top: 15px;
+              vertical-align: middle;
+            }
+
+            div {
+              height: 25px;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+  div.post-own-question {
+    padding: 11px;
+    margin-top: 10px;
+    color: #888;
+    text-align: center;
+
+    a {
+      font-weight: bold;
+      @extend .light-button;
+      padding: 20px;
+      display: block;
+      margin: 10px auto;
+          text-align: center;
+          width: flex-grid(5);
+    }
+  }
+}
+
+.search-result-summary {
+}

static/css/discussion/_sidebar.scss

@@ -0,0 +1,310 @@
+div.discussion-wrapper aside {
+  @extend .sidebar;
+  border-left: 1px solid #d3d3d3;
+  @include border-radius(0 4px 4px 0);
+  border-right: 1px solid #f6f6f6;
+  @include box-shadow(inset 1px 0 0 #f6f6f6);
+  padding: lh();
+  width: flex-grid(3);
+
+  &.main-sidebar {
+    min-width:200px;
+  }
+
+  h1 {
+    @extend .bottom-border;
+    margin: (-(lh())) (-(lh())) 0;
+    padding: lh(.5) lh();
+  }
+
+  h2 {
+    color: #4D4D4D;
+
+    &.first {
+      margin-top: 0px;
+    }
+  }
+
+  h3 {
+    border-bottom: 0;
+    box-shadow: none;
+  }
+
+  div.inputs {
+    input[type="submit"] {
+      width: 27%;
+      float: right;
+    }
+
+    input[type="text"] {
+      width: 62%;
+    }
+  }
+
+  div.box {
+    display: block;
+    margin: lh(.5) 0;
+
+    &:last-child {
+      @include box-shadow(none);
+      border: 0;
+    }
+
+    h2 {
+      text-transform: uppercase;
+      font-weight: bold;
+      font-size: 14px;
+      letter-spacing: 1px;
+
+      &:not(.first) {
+        @include box-shadow(inset 0 1px 0 #eee);
+        border-top: 1px solid #d3d3d3;
+        margin: 0 (-(lh())) 0;
+        padding: lh(.5) lh();
+      }
+    }
+
+    &.contributors {
+
+      a {
+        @include border-radius(3px);
+        border: 1px solid #aaa;
+        cursor: pointer;
+        display: inline-block;
+        margin-right: 6px;
+        position: relative;
+
+        &:before {
+          @include border-radius(3px);
+          @include box-shadow(inset 0 0 1px 1px rgba(255,255,255,.4));
+          top: 1px; left: 1px; bottom: 1px; right: 1px;
+          content: '';
+          position: absolute;
+        }
+
+      }
+      img.gravatar {
+        @include border-radius(3px);
+      }
+    }
+
+    &.tag-selector {
+     ul {
+       margin-bottom: 10px;
+       display: block;
+     }
+    }
+  }
+
+  div.search-box {
+    margin-top: lh(.5);
+    input {
+      @include box-sizing(border-box);
+      display: inline;
+    }
+
+    input[type='submit'] {
+      @include box-shadow(none);
+      opacity: 0.5;
+      background: url(../images/askbot/search-icon.png) no-repeat center;
+      border: 0;
+      margin-left: 3px;
+      position: absolute;
+      text-indent: -9999px;
+      width: 24px;
+
+      &:hover {
+        opacity: 0.9;
+      }
+
+      &:focus {
+        opacity: 1;
+      }
+    }
+
+    input#keywords {
+      padding-left: 30px;
+      padding-right: 30px;
+      width: 100%;
+    }
+
+    input#clear {
+      @include box-shadow(none);
+      @include border-radius(15px);
+      border: none;
+      background: #bbb;
+      color: #fff;
+      display: inline;
+      font-size: 10px;
+      margin-left: -25px;
+      padding: 2px 5px;
+    }
+  }
+
+  div#tagSelector {
+    h2 {
+      @include box-shadow(inset 0 1px 0 #eee);
+      border-top: 1px solid #d3d3d3;
+      margin: 0 (-(lh())) 0;
+      padding: lh(.5) lh();
+      text-transform: uppercase;
+      font-weight: bold;
+      font-size: 14px;
+      letter-spacing: 1px;
+    }
+
+    ul {
+      margin: 0;
+    }
+
+    div.inputs {
+      margin-bottom: lh();
+    }
+
+    div#displayTagFilterControl {
+      p.choice {
+        @include inline-block();
+        margin-right: lh(.5);
+      }
+    }
+  }
+
+  // Question view sopecific
+
+  div.follow-buttons {
+    margin-top: 20px;
+    display: block;
+
+    a.button {
+      @include box-sizing(border-box);
+      display: block;
+      text-align: center;
+      width: 100%;
+    }
+  }
+
+
+  div.question-stats {
+    ul {
+      color: #777;
+      list-style: none;
+
+      li {
+        padding: 7px 0 0;
+
+        &:last-child {
+          @include box-shadow(none);
+          border: 0;
+        }
+        strong {
+          float: right;
+          padding-right: 10px;
+        }
+      }
+    }
+  }
+
+  div.user-info, div.user-stats {
+    @extend div.question-stats;
+    overflow: hidden;
+
+    div {
+      float: left;
+      display: block;
+    }
+
+    div.karma {
+      background: #eee;
+      border: 1px solid #D3D3D3;
+      @include border-radius(3px);
+      @include box-sizing(border-box);
+      @include box-shadow(inset 0 0 0 1px #fff, 0 1px 0 #fff);
+      padding: lh(.4) 0;
+      text-align: center;
+      width: flex-grid(1, 3);
+      float: right;
+
+      strong {
+        display: block;
+        font-style: 20px;
+      }
+    }
+
+    div.meta {
+      width: flex-grid(2,3);
+      padding-right: flex-gutter(3)*0.5;
+      @include box-sizing(border-box);
+
+      h2 {
+        border: 0;
+        @include box-shadow(none);
+        margin: 0 0 8px 0;
+        padding: 0;
+      }
+
+      p {
+        color: #777;
+        font-size: 14px;
+      }
+    }
+  }
+
+  div.user-stats {
+    overflow: visible;
+
+    ul {
+      font-size: 14px;
+
+      h2 {
+        margin:0 (-(lh())) 5px (-(lh()));
+        padding: lh(.5) lh();
+      }
+    }
+ }
+
+  div.question-tips, div.markdown {
+    ul {
+      margin-left: 8%;
+    }
+
+    ol {
+      margin-left: 8%;
+    }
+  }
+  div.markdown ul li {
+    margin: 20px 0;
+
+    &:first-child {
+      margin: 0;
+    }
+
+    ol li {
+      margin: 0;
+    }
+  }
+
+  div.view-profile {
+    h2 {
+      border-top: 0;
+      @include box-shadow(none);
+    }
+
+    a {
+      width: 100%;
+      @include box-sizing(border-box);
+      text-align: center;
+      padding: 10px;
+      display: block;
+      margin-top: 10px;
+      @extend .light-button;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      span {
+        font-weight: bold;
+      }
+    }
+  }
+}

static/css/discussion/_tags.scss

@@ -0,0 +1,69 @@
+ul.tags {
+  list-style: none;
+  display: inline;
+
+  li, a {
+    position: relative;
+  }
+
+  li {
+    background: #eee;
+    @include border-radius(4px);
+    @include box-shadow(0px 1px 0px #ccc);
+    color: #555;
+    display: inline-block;
+    font-size: 12px;
+    margin-bottom: 5px;
+    margin-left: 15px;
+    padding: 3px 10px 5px 5px;
+
+    &:before {
+     border-color:transparent #eee transparent transparent;
+     border-style:solid;
+     border-width:12px 12px 12px 0;
+     content:"";
+     height:0;
+     left:-10px;
+     position:absolute;
+     top:0;
+     width:0;
+    }
+
+    span.delete-icon, div.delete-icon {
+      background: #555;
+      @include border-radius(0 4px 4px 0);
+      clear: none;
+      color: #eee;
+      cursor: pointer;
+      display: inline;
+      float: none;
+      left: 10px;
+      opacity: 0.5;
+      padding: 4px 6px;
+      position: relative;
+      top: 1px;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    a {
+      color: #555;
+      text-decoration: none;
+      border-bottom: none;
+      font-style: normal;
+    }
+  }
+}
+
+span.tag-number {
+  display: none;
+  // @include border-radius(3px);
+  // background: #555;
+  // font-size: 10px;
+  // margin: 0 3px;
+  // padding: 2px 5px;
+  // color: #eee;
+  // opacity: 0.5;
+}

static/css/index/_base.scss

@@ -0,0 +1,44 @@
+body {
+  background-color: #fff;
+  color: #444;
+  font: $body-font-size $body-font-family;
+
+  :focus {
+    outline-color: #ccc;
+  }
+
+  h1 {
+    font: 800 24px $header-font-family;
+  }
+
+  li {
+    margin-bottom: lh();
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  a {
+    color: $mit-red;
+    font-style: italic;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      color: darken($mit-red, 10%);
+    }
+  }
+
+  #{$all-text-inputs}, textarea {
+    @include box-shadow(0 -1px 0 #fff);
+    @include linear-gradient(#eee, #fff);
+    border: 1px solid #999;
+    font: $body-font-size $body-font-family;
+    padding: 4px;
+    width: 100%;
+
+    &:focus {
+      border-color: $mit-red;
+    }
+  }
+}

static/css/index/_extends.scss

@@ -0,0 +1,94 @@
+.wrapper {
+  @include box-sizing(border-box);
+  margin: 0 auto;
+  max-width: $fg-max-width;
+  // min-width: $fg-min-width;
+  padding: lh();
+  width: flex-grid(12);
+}
+
+.subpage {
+  @extend .clearfix;
+  @extend .wrapper;
+
+  > div {
+    padding-left: flex-grid(4) + flex-gutter();
+
+    @media screen and (max-width: 940px) {
+      padding-left: 0;
+    }
+
+    p {
+      margin-bottom: lh();
+      line-height: lh();
+    }
+
+    h1 {
+      margin-bottom: lh(.5);
+    }
+
+    h2 {
+      font: 18px $header-font-family;
+      color: #000;
+      margin-bottom: lh(.5);
+    }
+
+    ul {
+      list-style: disc outside none;
+
+      li {
+        list-style: disc outside none;
+        line-height: lh();
+      }
+    }
+
+    dl {
+      margin-bottom: lh();
+
+      dd {
+        margin-bottom: lh(.5);
+      }
+    }
+  }
+}
+
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.button {
+  @include border-radius(3px);
+  @include inline-block();
+  @include transition();
+  background-color: $mit-red;
+  border: 1px solid darken($mit-red, 10%);
+  color: #fff;
+  margin: lh() 0 lh(.5);
+  padding: lh(.25) lh(.5);
+  text-decoration: none;
+  font-style: normal;
+  @include box-shadow(inset 0 1px 0 lighten($mit-red, 8%));
+  -webkit-font-smoothing: antialiased;
+
+  &:hover {
+    background-color: darken($mit-red, 10%);
+    border-color: darken($mit-red, 20%);
+  }
+
+  span {
+    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+    font-style: italic;
+  }
+}
+
+p.ie-warning {
+  display: block !important;
+  line-height: 1.3em;
+  background: yellow;
+  margin-bottom: lh();
+  padding: lh();
+}

static/css/index/_footer.scss

@@ -0,0 +1,101 @@
+footer {
+  @extend .wrapper;
+  @extend .clearfix;
+  padding-top: 0;
+
+  div.footer-wrapper {
+    border-top: 1px solid #e5e5e5;
+    padding: lh() 0;
+    background: url('../images/marketing/mit-logo.png') right center no-repeat;
+
+    @media screen and (max-width: 780px) {
+      background-position: left bottom;
+      padding-bottom: lh(3);
+    }
+
+    a {
+      color: #888;
+      text-decoration: none;
+      @include transition();
+
+      &:hover, &:focus {
+        color: #666;
+      }
+    }
+
+    p {
+      @include inline-block();
+      margin-right: lh();
+    }
+
+    ul {
+      @include inline-block();
+
+      @media screen and (max-width: 780px) {
+        margin-top: lh();
+      }
+
+      li {
+        @include inline-block();
+        margin-bottom: 0;
+
+        &:after {
+          content: ' |';
+          display: inline;
+          color: #ccc;
+        }
+
+        &:last-child {
+          &:after {
+            content: none;
+          }
+        }
+
+      }
+
+      &.social {
+        float: right;
+        margin-right: 60px;
+        position: relative;
+        top: -5px;
+
+        @media screen and (max-width: 780px) {
+          float: none;
+        }
+
+        li {
+          float: left;
+          margin-right: lh(.5);
+
+          &:after {
+            content: none;
+            display: none;
+          }
+
+          a {
+            display: block;
+            height: 29px;
+            width: 28px;
+            text-indent: -9999px;
+
+            &:hover {
+              opacity: .8;
+            }
+          }
+
+          &.twitter a {
+            background: url('../images/marketing/twitter.png') 0 0 no-repeat;
+          }
+
+          &.facebook a {
+            background: url('../images/marketing/facebook.png') 0 0 no-repeat;
+          }
+
+          &.linkedin a {
+            background: url('../images/marketing/linkedin.png') 0 0 no-repeat;
+          }
+        }
+      }
+    }
+  }
+}

static/css/index/_header.scss

@@ -0,0 +1,169 @@
+header.announcement {
+  @include background-size(cover);
+  background: #333;
+  border-bottom: 1px solid #000;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
+
+  &.home {
+    background: #e3e3e3 url("../images/marketing/shot-5-medium.jpg");
+
+    @media screen and (min-width: 1200px) {
+      background: #e3e3e3 url("../images/marketing/shot-5-large.jpg");
+    }
+
+    div {
+      padding: lh(10) lh() lh(3);
+
+      @media screen and (max-width:780px) {
+        padding: lh(2.5) lh() lh(2);
+      }
+
+      //hide login link for homepage
+      nav {
+        h1 {
+          margin-right: 0;
+        }
+
+        a.login {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &.course {
+    background: #e3e3e3 url("../images/marketing/course-bg-small.jpg");
+
+    @media screen and (min-width: 1200px) {
+      background: #e3e3e3 url("../images/marketing/course-bg-large.jpg");
+    }
+
+    @media screen and (max-width: 1199px) and (min-width: 700px) {
+      background: #e3e3e3 url("../images/marketing/course-bg-medium.jpg");
+    }
+
+    div {
+      padding: lh(4) lh() lh(2);
+
+      @media screen and (max-width:780px) {
+        padding: lh(2.5) lh() lh(2);
+      }
+    }
+
+  }
+
+  div {
+    @extend .wrapper;
+    position: relative;
+
+    nav {
+      position: absolute;
+      top: 0;
+      right: lh();
+      @include border-radius(0 0 3px 3px);
+      background: #333;
+      background: rgba(#000, .7);
+      padding: lh(.5) lh();
+
+      h1 {
+        @include inline-block();
+        margin-right: lh(.5);
+
+
+        a {
+          font: italic 800 18px $header-font-family;
+          color: #fff;
+          text-decoration: none;
+
+          &:hover, &:focus {
+            color: #999;
+          }
+        }
+      }
+
+      a.login {
+        text-decoration: none;
+        color: #fff;
+        font-size: 12px;
+        font-style: normal;
+        font-family: $header-font-family;
+
+        &:hover, &:focus {
+          color: #999;
+        }
+      }
+    }
+
+    section {
+      @extend .clearfix;
+      background: $mit-red;
+      @include inline-block();
+      margin-left: flex-grid(4) + flex-gutter();
+      padding: lh() lh(1.5);
+
+      @media screen and (max-width: 780px) {
+        margin-left: 0;
+      }
+
+      h1 {
+        font-family: "Open Sans";
+        font-size: 30px;
+        font-weight: 800;
+        @include inline-block();
+        line-height: 1.2em;
+        margin: 0 lh() 0 0;
+      }
+
+      h2 {
+        font-family: "Open Sans";
+        font-size: 24px;
+        font-weight: 400;
+        @include inline-block();
+        line-height: 1.2em;
+      }
+
+      &.course {
+        section {
+          float: left;
+          margin-left: 0;
+          margin-right: flex-gutter(8);
+          padding: 0;
+          width: flex-grid(4, 8);
+
+          @media screen and (max-width: 780px) {
+            float: none;
+            width: 100%;
+            margin-right: 0;
+          }
+
+          a {
+            @extend .button;
+            background-color: darken($mit-red, 20%);
+            border-color: darken($mit-red, 30%);
+            @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
+            display: block;
+            padding: lh(.5) lh();
+            text-align: center;
+
+            &:hover {
+              background-color: darken($mit-red, 10%);
+              border-color: darken($mit-red, 20%);
+            }
+          }
+        }
+
+        p {
+          width: flex-grid(4, 8);
+          line-height: lh();
+          float: left;
+
+          @media screen and (max-width: 780px) {
+            float: none;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

static/css/index/_index.scss

@@ -0,0 +1,323 @@
+section.index-content {
+  @extend .wrapper;
+  @extend .clearfix;
+
+  section {
+    @extend .clearfix;
+    float: left;
+
+    @media screen and (max-width: 780px) {
+      float: none;
+      width: auto;
+      margin-right: 0;
+    }
+
+    h1 {
+      font-size: 800 24px "Open Sans";
+      margin-bottom: lh();
+    }
+
+    p {
+      line-height: lh();
+      margin-bottom: lh();
+    }
+
+    ul {
+      margin: 0;
+    }
+
+    &.about {
+      @include box-sizing(border-box);
+      border-right: 1px solid #e5e5e5;
+      margin-right: flex-gutter();
+      padding-right: flex-gutter() / 2;
+      width: flex-grid(8);
+
+      @media screen and (max-width: 780px) {
+        width: 100%;
+        border-right: 0;
+        margin-right: 0;
+        padding-right: 0;
+      }
+
+      section {
+        @extend .clearfix;
+        margin-bottom: lh();
+
+        p {
+          width: flex-grid(4, 8);
+          float: left;
+
+          @media screen and (max-width: 780px) {
+            float: none;
+            width: auto;
+          }
+
+          &:nth-child(odd) {
+            margin-right: flex-gutter(8);
+
+            @media screen and (max-width: 780px) {
+              margin-right: 0;
+            }
+          }
+        }
+
+        &.intro {
+          section {
+            margin-bottom: 0;
+
+            &.intro-text {
+              margin-right: flex-gutter(8);
+              width: flex-grid(4, 8);
+
+              @media screen and (max-width: 780px) {
+                margin-right: 0;
+                width: auto;
+              }
+
+              p {
+                margin-right: 0;
+                width: auto;
+                float: none;
+              }
+            }
+
+            &.intro-video {
+              width: flex-grid(4, 8);
+
+              @media screen and (max-width: 780px) {
+                width: auto;
+              }
+
+              a {
+                display: block;
+                width: 100%;
+
+                img {
+                  width: 100%;
+                }
+
+                span {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+
+        &.features {
+          border-top: 1px solid #E5E5E5;
+          padding-top: lh();
+          margin-bottom: 0;
+
+          h2 {
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: #888;
+            margin-bottom: lh();
+            font-weight: normal;
+            font-size: 14px;
+
+            span {
+              text-transform: none;
+
+            }
+          }
+
+          p {
+            width: auto;
+            clear: both;
+
+            strong {
+              font-family: "Open sans";
+              font-weight: 800;
+            }
+
+            a {
+              color: $mit-red;
+              text-decoration: none;
+              @include transition();
+
+              &:hover, &:focus {
+                color: darken($mit-red, 15%);
+              }
+            }
+          }
+
+          ul {
+            margin-bottom: 0;
+
+            li {
+              line-height: lh();
+              width: flex-grid(4, 8);
+              float: left;
+              margin-bottom: lh(.5);
+
+              @media screen and (max-width: 780px) {
+                width: auto;
+                float: none;
+              }
+
+              &:nth-child(odd) {
+                margin-right: flex-gutter(8);
+
+                @media screen and (max-width: 780px) {
+                  margin-right: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.course, &.staff {
+      width: flex-grid(4);
+
+      @media screen and (max-width: 780px) {
+        width: auto;
+      }
+
+      h1 {
+        color: #888;
+        font: normal $body-font-size $body-font-family;
+        font-size: 14px;
+        letter-spacing: 1px;
+        margin-bottom: lh();
+        text-transform: uppercase;
+      }
+
+      h2 {
+        font: 800 24px $header-font-family;
+      }
+
+      h3 {
+        font: 400 18px $header-font-family;
+      }
+
+      a {
+        @extend .button;
+
+        span.arrow {
+          color: rgba(#fff, .6);
+          font-style: normal;
+          @include inline-block();
+          padding-left: 10px;
+        }
+      }
+
+      ul {
+        list-style: none;
+
+        li {
+          img {
+            float: left;
+            margin-right: lh(.5);
+          }
+        }
+      }
+    }
+
+    &.course {
+      h2 {
+        padding-top: lh(5);
+        background: url('../images/marketing/circuits-bg.jpg') 0 0 no-repeat;
+        @include background-size(contain);
+
+        @media screen and (max-width: 998px) and (min-width: 781px){
+          background: url('../images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
+        }
+
+        @media screen and (max-width: 780px) {
+          padding-top: lh(5);
+          background: url('../images/marketing/circuits-bg.jpg') 0 0 no-repeat;
+        }
+
+        @media screen and (min-width: 500px) and (max-width: 781px) {
+          padding-top: lh(8);
+        }
+      }
+    }
+
+
+    // index
+    //---------------------------------------- //
+    &.about-course {
+      @include box-sizing(border-box);
+      border-right: 1px solid #e5e5e5;
+      margin-right: flex-gutter();
+      padding-right: flex-gutter() / 2;
+      width: flex-grid(8);
+
+      @media screen and (max-width: 780px) {
+        width: auto;
+        border-right: 0;
+        margin-right: 0;
+        padding-right: 0;
+      }
+
+      section {
+        width: flex-grid(4, 8);
+
+        @media screen and (max-width: 780px) {
+          width: auto;
+        }
+
+        &.about-info {
+          margin-right: flex-gutter(8);
+
+          @media screen and (max-width: 780px) {
+            margin-right: 0;
+          }
+        }
+
+        &.requirements {
+          clear: both;
+          width: 100%;
+          border-top: 1px solid #E5E5E5;
+          padding-top: lh();
+          margin-bottom: 0;
+
+          p {
+            float: left;
+            width: flex-grid(4, 8);
+            margin-right: flex-gutter(8);
+
+            @media screen and (max-width: 780px) {
+              margin-right: 0;
+              float: none;
+              width: auto;
+            }
+
+            &:nth-child(odd) {
+              margin-right: 0;
+            }
+          }
+        }
+
+        &.cta {
+          width: 100%;
+          text-align: center;
+
+          a.enroll {
+            @extend .button;
+            padding: lh(.5) lh(2);
+            @include inline-block();
+            text-align: center;
+            font: 800 18px $header-font-family;
+          }
+        }
+      }
+    }
+
+    &.staff {
+      h1 {
+        margin-top: lh(1);
+      }
+    }
+  }
+}
+
+section.copyright, section.tos, section.privacy-policy, section.honor-code {
+  @extend .subpage;
+}

static/css/index/_variables.scss

@@ -0,0 +1,21 @@
+// Variables
+//---------------------------------------- //
+// // grid
+$fg-column: 60px;
+$fg-gutter: 25px;
+$fg-max-columns: 12;
+$fg-max-width: 1400px;
+$fg-min-width: 781px;
+
+$gw-column: 60px;
+$gw-gutter: 25px;
+
+$body-font-family: Georgia, serif;
+$header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
+
+$body-font-size: 16px;
+$body-line-height: golden-ratio($body-font-size, 1);
+
+// Colors
+$mit-red: #933;
+$cream: #F6EFD4;

static/css/layout/_calculator.scss

@@ -0,0 +1,142 @@
+li.calc-main {
+  bottom: -36px;
+  left: 0;
+  position: fixed;
+  width: 100%;
+
+  a.calc {
+    @include hide-text;
+    background: url("../images/calc-icon.png") rgba(#111, .9) no-repeat center;
+    border-bottom: 0;
+    color: #fff;
+    float: right;
+    margin-right: 10px;
+    @include border-radius(3px 3px 0 0);
+    @include inline-block;
+    padding: 8px 12px;
+    width: 16px;
+    height: 20px;
+    position: relative;
+    top: -36px;
+
+    &:hover {
+      opacity: .8;
+    }
+
+    &.closed {
+      background-image: url("../images/close-calc-icon.png");
+    }
+  }
+
+  div#calculator_wrapper {
+    background: rgba(#111, .9);
+    position: relative;
+    top: -36px;
+    clear: both;
+
+    form {
+      padding: lh();
+      @extend .clearfix;
+
+
+      input#calculator_button {
+        background: #111;
+        border: 1px solid #000;
+        @include border-radius(0);
+        @include box-shadow(none);
+        @include box-sizing(border-box);
+        color: #fff;
+        font-size: 30px;
+        font-weight: bold;
+        padding: 0;
+        text-shadow: none;
+        width: flex-grid(.5) + flex-gutter();
+        float: left;
+        margin: 0 (flex-gutter() / 2);
+
+        &:hover {
+          color: #333;
+        }
+      }
+
+      input#calculator_output {
+        background: #222;
+        border: 0;
+        @include box-shadow(none);
+        @include box-sizing(border-box);
+        color: #fff;
+        float: left;
+        font-size: 16px;
+        font-weight: bold;
+        margin: 1px 0 0;
+        padding: 10px;
+        width: flex-grid(4);
+      }
+
+      div.input-wrapper {
+        position: relative;
+        @extend .clearfix;
+        width: flex-grid(7.5);
+        margin: 0;
+        float: left;
+
+      input#calculator_input {
+        border: none;
+        @include box-shadow(none);
+        @include box-sizing(border-box);
+        font-size: 16px;
+        padding: 10px;
+        width: 100%;
+
+        &:focus {
+          outline: none;
+          border: none;
+        }
+      }
+
+        div.help-wrapper {
+          position: absolute;
+          right: 8px;
+          top: 15px;
+
+          a {
+            @include hide-text;
+            width: 17px;
+            height: 17px;
+            background: url("../images/info-icon.png") center center no-repeat;
+          }
+
+          dl {
+            background: #fff;
+            @include border-radius(3px);
+            @include box-shadow(0 0 3px #999);
+            color: #333;
+            opacity: 0;
+            padding: 10px;
+            position: absolute;
+            right: -40px;
+            top: -110px;
+            width: 500px;
+            @include transition();
+
+            &.shown {
+              opacity: 1;
+              top: -115px;
+            }
+
+            dt {
+              clear: both;
+              float: left;
+              font-weight: bold;
+              padding-right: lh(.5);
+            }
+
+            dd {
+              float: left;
+            }
+          }
+        }
+      }
+    }
+  }
+}

static/css/layout/_footer.scss

@@ -0,0 +1,97 @@
+footer {
+  @extend .clearfix;
+  @extend .wrapper;
+  @include box-sizing(border-box);
+  color: #777;
+  margin-top: $body-line-height;
+  padding: 0 $body-line-height;
+
+  @media print {
+    display: none;
+  }
+
+  p {
+    float: left;
+
+    a {
+      color: #444;
+
+      &:link, &:visited {
+        color: #444;
+      }
+
+      &:hover, &:focus {
+        color: #000;
+      }
+    }
+  }
+
+  nav {
+    float: right;
+
+    ul {
+      float: left;
+
+      li {
+        display: inline-block;
+        margin-right: 20px;
+
+        a {
+          color: #444;
+
+          &:link, &:visited {
+            color: #444;
+          }
+
+          &:hover, &:focus {
+            color: #000;
+          }
+        }
+      }
+
+      &.social {
+        margin-right: 40px;
+        position: relative;
+        top: -5px;
+
+        @media screen and (max-width: 780px) {
+          float: none;
+        }
+
+        li {
+          float: left;
+          margin-right: lh(.5);
+
+          &:after {
+            content: none;
+            display: none;
+          }
+
+          a {
+            display: block;
+            height: 29px;
+            width: 28px;
+            text-indent: -9999px;
+            border-bottom: 0;
+
+            &:hover {
+              opacity: .8;
+            }
+          }
+
+          &.twitter a {
+            background: url('../images/twitter.png') 0 0 no-repeat;
+          }
+
+          &.facebook a {
+            background: url('../images/facebook.png') 0 0 no-repeat;
+          }
+
+          &.linkedin a {
+            background: url('../images/linkedin.png') 0 0 no-repeat;
+          }
+        }
+      }
+    }
+  }
+}

static/css/layout/_header.scss

@@ -0,0 +1,183 @@
+div.header-wrapper {
+  background: $mit-red;
+  border-bottom: 1px solid #fff;
+  @include box-shadow(inset 0 -4px 6px darken($mit-red, 5%));
+
+  @media print {
+    display: none;
+  }
+
+  header {
+    @extend .clearfix;
+    @extend .wrapper;
+    @include box-sizing(border-box);
+    padding: 0 $body-line-height;
+
+    hgroup {
+      @extend .clearfix;
+      float: left;
+      min-width: flex-grid(3);
+      padding-top: 13px;
+
+      h1 {
+        color: darken($mit-red, 25%);
+        font-size: 18px;
+        font-weight: 800;
+        @include inline-block();
+        line-height: lh();
+        margin: 0;
+        padding: 0 lh(.5) 0 0;
+        text-shadow: 0 1px 0 lighten($mit-red, 10%);
+
+        &:after {
+          color: darken($mit-red, 10%);
+          content: "•";
+          display: inline-block;
+          font-size: 10px;
+          letter-spacing: -2px;
+          padding-left: lh(.5);
+          text-shadow: 0;
+        }
+      }
+
+      h2 {
+        font-size: 16px;
+        @include inline-block();
+        letter-spacing: 0;
+        margin: 0;
+        padding: 0 lh() 0px 0;
+        text-shadow: 0 -1px 0 darken($mit-red, 10%);
+        text-transform: none;
+        -webkit-font-smoothing: antialiased;
+
+        a {
+          color: #fff;
+          border: none;
+
+          &:hover {
+            color: rgba(#fff, .7);
+          }
+        }
+      }
+
+
+      @media screen and (max-width: 900px) {
+        display: block;
+        float: none;
+
+        h1 {
+          border: 0;
+          float: left;
+        }
+
+        h2 {
+          border: 0;
+          float: left;
+          margin-right: 0;
+        }
+      }
+    }
+
+    nav {
+      background: #501016;
+      border-bottom: 1px solid darken(#501016, 10%);
+      @include border-radius(3px 3px 0 0);
+      @include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%));
+      display: block;
+      float: left;
+      margin: 5px 0 0;
+      padding: 0;
+      text-shadow: 0 -1px 0 darken($mit-red, 10%);
+      -webkit-font-smoothing: antialiased;
+
+      ul {
+        @extend .clearfix;
+        margin: 0;
+
+        li {
+          line-height: lh();
+          margin-bottom: 0;
+          float: left;
+
+          a {
+            color: #fff;
+            display: block;
+            font-weight: bold;
+            padding: 10px lh() 8px;
+            border: none;
+            font-style: normal;
+
+            @media screen and (max-width: 1020px) {
+              padding: 10px lh(.7) 8px;
+            }
+
+            &:hover {
+              color: rgba(#fff, .7);
+              background-color: none;
+            }
+          }
+        }
+      }
+
+      @media screen and (max-width: 900px) {
+        width: 100%;
+        float: none;
+
+        ul {
+          li {
+            padding: auto;
+            display: table-cell;
+            width: 16.6666666667%;
+            text-align: center;
+          }
+        }
+      }
+
+      .active {
+        background: #F4F4F4;
+        border: 1px solid darken(#501016, 10%);
+        border-bottom: 0;
+        @include border-radius(3px 3px 0 0);
+        @include box-shadow(0 2px 0 #f4f4f4, inset 0 1px 0 #fff);
+        color: #333;
+        text-shadow: 0 1px 0 #fff;
+      }
+
+      &.courseware {
+        li.courseware a {
+          @extend .active;
+        }
+      }
+
+      &.book {
+        li.book a {
+          @extend .active;
+        }
+      }
+
+      &.info {
+        li.info a {
+          @extend .active;
+        }
+      }
+
+      &.discussion {
+        li.discussion a {
+          @extend .active;
+        }
+      }
+
+      &.wiki {
+        li.wiki a {
+          @extend .active;
+        }
+      }
+
+      &.profile {
+        li.profile a {
+          @extend .active;
+        }
+      }
+    }
+  }
+}

static/css/layout/_layout.scss

@@ -0,0 +1,43 @@
+html {
+  margin-top: 0;
+
+  body {
+    color: $dark-gray;
+    font: $body-font-size $body-font-family;
+    text-align: center;
+    margin: 0;
+    background: #f4f4f4; //#f3f1e5
+
+    section.main-content {
+      @extend .clearfix;
+      @extend .wrapper;
+      background: #fff;
+      border: 1px solid #bbb;
+      border-bottom: 1px solid #bbb;
+      @include box-shadow(0 0 4px #dfdfdf);
+      @include box-sizing(border-box);
+      margin-top: 3px;
+      // overflow: hidden;
+
+      @media print {
+        border-bottom: 0;
+        @include border-radius(none);
+      }
+
+      @media screen and (min-width: 1400px) {
+        @include border-radius(4px);
+        margin-top: lh(.5);
+      }
+    }
+
+    section.outside-app {
+      @extend .main-content;
+      max-width: 600px;
+      padding: lh();
+
+      #{$all-text-inputs} {
+        display: block;
+      }
+    }
+  }
+}

static/css/layout/_leanmodal.scss

@@ -0,0 +1,251 @@
+#lean_overlay {
+  position: fixed;
+  z-index:100;
+  top: 0px;
+  left: 0px;
+  height:100%;
+  width:100%;
+  background: #000;
+  display: none;
+}
+
+div.leanModal_box {
+  background: #fff;
+  border: none;
+  @include border-radius(3px);
+  @include box-shadow(0 0 6px #000);
+  @include box-sizing(border-box);
+  display: none;
+  padding: lh(2);
+  text-align: left;
+
+  a.modal_close {
+    color: #aaa;
+    display: block;
+    font-style: normal;
+    height: 14px;
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    width: 14px;
+    z-index: 2;
+
+    &:hover{
+      text-decoration: none;
+      color: $mit-red;
+    }
+  }
+
+  h1 {
+    border-bottom: 1px solid #eee;
+    font-size: 24px;
+    margin-bottom: lh();
+    margin-top: 0;
+    padding-bottom: lh();
+    text-align: left;
+  }
+
+  &#enroll {
+    max-width: 600px;
+
+    ol {
+      @extend .clearfix;
+      padding-top: lh();
+
+      li {
+
+        &.terms, &.honor-code {
+          width: auto;
+          float: none;
+        }
+
+        div.tip {
+          display: none;
+        }
+
+        &:hover {
+          div.tip {
+            background: #333;
+            color: #fff;
+            display: block;
+            font-size: 16px;
+            line-height: lh();
+            margin: 0 0 0 -10px;
+            padding: 10px;
+            position: absolute;
+            -webkit-font-smoothing: antialiased;
+            width: 500px;
+          }
+        }
+      }
+    }
+  }
+
+  form {
+    text-align: left;
+
+    div#enroll_error, div#login_error, div#pwd_error {
+      $error-color: #333;
+      background-color: $error-color;
+      border: darken($error-color, 20%);
+      color: #fff;
+      font-family: "Open sans";
+      font-weight: bold;
+      letter-spacing: 1px;
+      margin: (-(lh())) (-(lh())) lh();
+      padding: lh(.5);
+      text-shadow: 0 1px 0 darken($error-color, 10%);
+      -webkit-font-smoothing: antialiased;
+
+      &:empty {
+        padding: 0;
+      }
+    }
+
+    ol {
+      list-style: none;
+      margin-bottom: lh();
+
+      li {
+        margin-bottom: lh(.5);
+
+        &.terms, &.remember {
+          border-top: 1px solid #eee;
+          clear: both;
+          float: none;
+          padding-top: lh();
+          width: auto;
+        }
+
+        &.honor-code {
+          width: auto;
+          float: none;
+        }
+
+        label {
+          display: block;
+          font-weight: bold;
+        }
+
+        #{$all-text-inputs}, textarea {
+          width: 100%;
+          @include box-sizing(border-box);
+        }
+
+        input[type="checkbox"] {
+          margin-right: 10px;
+        }
+
+        ul {
+          list-style: disc outside none;
+          margin: lh(.5) 0 lh() lh();
+
+          li {
+            color: #666;
+            float: none;
+            font-size: 14px;
+            list-style: disc outside none;
+            margin-bottom: lh(.5);
+          }
+        }
+      }
+    }
+
+    input[type="button"], input[type="submit"] {
+      @include button($mit-red);
+      font-size: 18px;
+      padding: lh(.5);
+    }
+  }
+}
+
+div#login {
+  min-width: 400px;
+
+  header {
+    border-bottom: 1px solid #ddd;
+    margin-bottom: lh();
+    padding-bottom: lh();
+
+    h1 {
+      border-bottom: 0;
+      padding-bottom: 0;
+      margin-bottom: lh(.25);
+    }
+  }
+
+  ol {
+    li {
+      width: auto;
+      float: none;
+    }
+  }
+}
+
+div.lost-password {
+  text-align: left;
+  margin-top: lh();
+
+  a {
+    color: #999;
+
+    &:hover {
+      color: #444;
+    }
+  }
+}
+
+div#pwd_reset {
+  p {
+    margin-bottom: lh();
+  }
+
+  input[type="email"] {
+    margin-bottom: lh();
+  }
+}
+
+div#apply_name_change,
+div#change_email,
+div#unenroll,
+div#deactivate-account {
+  max-width: 700px;
+
+  ul {
+    list-style: none;
+
+    li {
+      margin-bottom: lh(.5);
+
+      textarea, #{$all-text-inputs} {
+        display: block;
+        width: 100%;
+        @include box-sizing(border-box);
+      }
+
+      textarea {
+        height: 60px;
+      }
+
+      input[type="submit"] {
+        white-space: normal;
+      }
+    }
+  }
+}
+
+div#feedback_div{
+  form{
+    ol {
+      li {
+        float: none;
+        width: 100%;
+
+        textarea#feedback_message {
+          height: 100px;
+        }
+      }
+    }
+  }
+}
+

static/css/marketing-ie.scss

@@ -1,10 +1,15 @@
 body {
   margin: 0;
-  padding: 0; }
+  padding: 0;
+}
 
 .wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, section.index-content, footer {
   margin: 0;
-  overflow: hidden; }
+  overflow: hidden;
+}
 
-div#enroll form {
-  display: none; }
+div#enroll {
+  form {
+    display: none;
+  }
+}

static/css/marketing.css

@@ -1,939 +0,0 @@
-/* 
-html5doctor.com Reset Stylesheet
-v1.6.1
-Last Updated: 2010-09-17
-Author: Richard Clark - http://richclarkdesign.com 
-Twitter: @rich_clark
-*/
-html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-  background: transparent; }
-
-body {
-  line-height: 1; }
-
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-  display: block; }
-
-nav ul {
-  list-style: none; }
-
-blockquote, q {
-  quotes: none; }
-
-blockquote:before, blockquote:after, q:before, q:after {
-  content: '';
-  content: none; }
-
-a {
-  margin: 0;
-  padding: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-  background: transparent; }
-
-/* change colours to suit your needs */
-ins {
-  background-color: #ff9;
-  color: #000;
-  text-decoration: none; }
-
-/* change colours to suit your needs */
-mark {
-  background-color: #ff9;
-  color: #000;
-  font-style: italic;
-  font-weight: bold; }
-
-del {
-  text-decoration: line-through; }
-
-abbr[title], dfn[title] {
-  border-bottom: 1px dotted;
-  cursor: help; }
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0; }
-
-/* change border colour to suit your needs */
-hr {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid #cccccc;
-  margin: 1em 0;
-  padding: 0; }
-
-input, select {
-  vertical-align: middle; }
-
-/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 25, 2012 05:06:34 PM America/New_York */
-@font-face {
-  font-family: 'Open Sans';
-  src: url("/static/fonts/OpenSans-Regular-webfont.eot");
-  src: url("/static/fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("/static/fonts/OpenSans-Regular-webfont.woff") format("woff"), url("/static/fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("/static/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");
-  font-weight: 600;
-  font-style: normal; }
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url("/static/fonts/OpenSans-Italic-webfont.eot");
-  src: url("/static/fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("/static/fonts/OpenSans-Italic-webfont.woff") format("woff"), url("/static/fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("/static/fonts/OpenSans-Italic-webfont.svg#OpenSansItalic") format("svg");
-  font-weight: 400;
-  font-style: italic; }
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url("/static/fonts/OpenSans-Bold-webfont.eot");
-  src: url("/static/fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("/static/fonts/OpenSans-Bold-webfont.woff") format("woff"), url("/static/fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("/static/fonts/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");
-  font-weight: 700;
-  font-style: normal; }
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url("/static/fonts/OpenSans-BoldItalic-webfont.eot");
-  src: url("/static/fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("/static/fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("/static/fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("/static/fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic") format("svg");
-  font-weight: 700;
-  font-style: italic; }
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url("/static/fonts/OpenSans-ExtraBold-webfont.eot");
-  src: url("/static/fonts/OpenSans-ExtraBold-webfont.eot?#iefix") format("embedded-opentype"), url("/static/fonts/OpenSans-ExtraBold-webfont.woff") format("woff"), url("/static/fonts/OpenSans-ExtraBold-webfont.ttf") format("truetype"), url("/static/fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold") format("svg");
-  font-weight: 800;
-  font-style: normal; }
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url("/static/fonts/OpenSans-ExtraBoldItalic-webfont.eot");
-  src: url("/static/fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("/static/fonts/OpenSans-ExtraBoldItalic-webfont.woff") format("woff"), url("/static/fonts/OpenSans-ExtraBoldItalic-webfont.ttf") format("truetype"), url("/static/fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic") format("svg");
-  font-weight: 800;
-  font-style: italic; }
-
-.wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, footer, section.index-content {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  margin: 0 auto;
-  max-width: 1400px;
-  padding: 25.888px;
-  width: 100%; }
-
-.subpage > div, section.copyright > div, section.tos > div, section.privacy-policy > div, section.honor-code > div {
-  padding-left: 34.171%; }
-@media screen and (max-width: 940px) {
-  .subpage > div, section.copyright > div, section.tos > div, section.privacy-policy > div, section.honor-code > div {
-    padding-left: 0; } }
-.subpage > div p, section.copyright > div p, section.tos > div p, section.privacy-policy > div p, section.honor-code > div p {
-  margin-bottom: 25.888px;
-  line-height: 25.888px; }
-.subpage > div h1, section.copyright > div h1, section.tos > div h1, section.privacy-policy > div h1, section.honor-code > div h1 {
-  margin-bottom: 12.944px; }
-.subpage > div h2, section.copyright > div h2, section.tos > div h2, section.privacy-policy > div h2, section.honor-code > div h2 {
-  font: 18px "Open Sans", Helvetica, Arial, sans-serif;
-  color: #000;
-  margin-bottom: 12.944px; }
-.subpage > div ul, section.copyright > div ul, section.tos > div ul, section.privacy-policy > div ul, section.honor-code > div ul {
-  list-style: disc outside none; }
-.subpage > div ul li, section.copyright > div ul li, section.tos > div ul li, section.privacy-policy > div ul li, section.honor-code > div ul li {
-  list-style: disc outside none;
-  line-height: 25.888px; }
-.subpage > div dl, section.copyright > div dl, section.tos > div dl, section.privacy-policy > div dl, section.honor-code > div dl {
-  margin-bottom: 25.888px; }
-.subpage > div dl dd, section.copyright > div dl dd, section.tos > div dl dd, section.privacy-policy > div dl dd, section.honor-code > div dl dd {
-  margin-bottom: 12.944px; }
-
-.clearfix:after, .subpage:after, section.copyright:after, section.tos:after, section.privacy-policy:after, section.honor-code:after, header.announcement div section:after, footer:after, section.index-content:after, section.index-content section:after, section.index-content section.about section:after, div.leanModal_box#enroll ol:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden; }
-
-.button, header.announcement div section.course section a, section.index-content section.course a, section.index-content section.staff a, section.index-content section.about-course section.cta a.enroll {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  -webkit-transition-property: all;
-  -moz-transition-property: all;
-  -ms-transition-property: all;
-  -o-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.15s;
-  -moz-transition-duration: 0.15s;
-  -ms-transition-duration: 0.15s;
-  -o-transition-duration: 0.15s;
-  transition-duration: 0.15s;
-  -webkit-transition-timing-function: ease-out;
-  -moz-transition-timing-function: ease-out;
-  -ms-transition-timing-function: ease-out;
-  -o-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-  -webkit-transition-delay: 0;
-  -moz-transition-delay: 0;
-  -ms-transition-delay: 0;
-  -o-transition-delay: 0;
-  transition-delay: 0;
-  background-color: #993333;
-  border: 1px solid #732626;
-  color: #fff;
-  margin: 25.888px 0 12.944px;
-  padding: 6.472px 12.944px;
-  text-decoration: none;
-  font-style: normal;
-  -webkit-box-shadow: inset 0 1px 0 #b83d3d;
-  -moz-box-shadow: inset 0 1px 0 #b83d3d;
-  box-shadow: inset 0 1px 0 #b83d3d;
-  -webkit-font-smoothing: antialiased; }
-.button:hover, header.announcement div section.course section a:hover, section.index-content section.course a:hover, section.index-content section.staff a:hover, section.index-content section.about-course section.cta a.enroll:hover {
-  background-color: #732626;
-  border-color: #4d1919; }
-.button span, header.announcement div section.course section a span, section.index-content section.course a span, section.index-content section.staff a span, section.index-content section.about-course section.cta a.enroll span {
-  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
-  font-style: italic; }
-
-p.ie-warning {
-  display: block !important;
-  line-height: 1.3em;
-  background: yellow;
-  margin-bottom: 25.888px;
-  padding: 25.888px; }
-
-body {
-  background-color: #fff;
-  color: #444;
-  font: 16px Georgia, serif; }
-body :focus {
-  outline-color: #ccc; }
-body h1 {
-  font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
-body li {
-  margin-bottom: 25.888px; }
-body em {
-  font-style: italic; }
-body a {
-  color: #993333;
-  font-style: italic;
-  text-decoration: none; }
-body a:hover, body a:focus {
-  color: #732626; }
-body input[type="email"], body input[type="number"], body input[type="password"], body input[type="search"], body input[type="tel"], body input[type="text"], body input[type="url"], body input[type="color"], body input[type="date"], body input[type="datetime"], body input[type="datetime-local"], body input[type="month"], body input[type="time"], body input[type="week"], body textarea {
-  -webkit-box-shadow: 0 -1px 0 white;
-  -moz-box-shadow: 0 -1px 0 white;
-  box-shadow: 0 -1px 0 white;
-  background-color: #eeeeee;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, white));
-  background-image: -webkit-linear-gradient(top, #eeeeee, white);
-  background-image: -moz-linear-gradient(top, #eeeeee, white);
-  background-image: -ms-linear-gradient(top, #eeeeee, white);
-  background-image: -o-linear-gradient(top, #eeeeee, white);
-  background-image: linear-gradient(top, #eeeeee, white);
-  border: 1px solid #999;
-  font: 16px Georgia, serif;
-  padding: 4px;
-  width: 100%; }
-body input[type="email"]:focus, body input[type="number"]:focus, body input[type="password"]:focus, body input[type="search"]:focus, body input[type="tel"]:focus, body input[type="text"]:focus, body input[type="url"]:focus, body input[type="color"]:focus, body input[type="date"]:focus, body input[type="datetime"]:focus, body input[type="datetime-local"]:focus, body input[type="month"]:focus, body input[type="time"]:focus, body input[type="week"]:focus, body textarea:focus {
-  border-color: #993333; }
-
-header.announcement {
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -ms-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-  background: #333;
-  border-bottom: 1px solid #000;
-  color: #fff;
-  -webkit-font-smoothing: antialiased; }
-header.announcement.home {
-  background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); }
-@media screen and (min-width: 1200px) {
-  header.announcement.home {
-    background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); } }
-header.announcement.home div {
-  padding: 258.88px 25.888px 77.664px; }
-@media screen and (max-width:780px) {
-  header.announcement.home div {
-    padding: 64.72px 25.888px 51.776px; } }
-header.announcement.home div nav h1 {
-  margin-right: 0; }
-header.announcement.home div nav a.login {
-  display: none; }
-header.announcement.course {
-  background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg"); }
-@media screen and (min-width: 1200px) {
-  header.announcement.course {
-    background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg"); } }
-@media screen and (max-width: 1199px) and (min-width: 700px) {
-  header.announcement.course {
-    background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg"); } }
-header.announcement.course div {
-  padding: 103.552px 25.888px 51.776px; }
-@media screen and (max-width:780px) {
-  header.announcement.course div {
-    padding: 64.72px 25.888px 51.776px; } }
-header.announcement div {
-  position: relative; }
-header.announcement div nav {
-  position: absolute;
-  top: 0;
-  right: 25.888px;
-  -webkit-border-radius: 0 0 3px 3px;
-  -moz-border-radius: 0 0 3px 3px;
-  -ms-border-radius: 0 0 3px 3px;
-  -o-border-radius: 0 0 3px 3px;
-  border-radius: 0 0 3px 3px;
-  background: #333;
-  background: rgba(0, 0, 0, 0.7);
-  padding: 12.944px 25.888px; }
-header.announcement div nav h1 {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  margin-right: 12.944px; }
-header.announcement div nav h1 a {
-  font: italic 800 18px "Open Sans", Helvetica, Arial, sans-serif;
-  color: #fff;
-  text-decoration: none; }
-header.announcement div nav h1 a:hover, header.announcement div nav h1 a:focus {
-  color: #999; }
-header.announcement div nav a.login {
-  text-decoration: none;
-  color: #fff;
-  font-size: 12px;
-  font-style: normal;
-  font-family: "Open Sans", Helvetica, Arial, sans-serif; }
-header.announcement div nav a.login:hover, header.announcement div nav a.login:focus {
-  color: #999; }
-header.announcement div section {
-  background: #993333;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  margin-left: 34.171%;
-  padding: 25.888px 38.832px; }
-@media screen and (max-width: 780px) {
-  header.announcement div section {
-    margin-left: 0; } }
-header.announcement div section h1 {
-  font-family: "Open Sans";
-  font-size: 30px;
-  font-weight: 800;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  line-height: 1.2em;
-  margin: 0 25.888px 0 0; }
-header.announcement div section h2 {
-  font-family: "Open Sans";
-  font-size: 24px;
-  font-weight: 400;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  line-height: 1.2em; }
-header.announcement div section.course section {
-  float: left;
-  margin-left: 0;
-  margin-right: 3.817%;
-  padding: 0;
-  width: 48.092%; }
-@media screen and (max-width: 780px) {
-  header.announcement div section.course section {
-    float: none;
-    width: 100%;
-    margin-right: 0; } }
-header.announcement div section.course section a {
-  background-color: #4d1919;
-  border-color: #260d0d;
-  -webkit-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
-  -moz-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
-  box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
-  display: block;
-  padding: 12.944px 25.888px;
-  text-align: center; }
-header.announcement div section.course section a:hover {
-  background-color: #732626;
-  border-color: #4d1919; }
-header.announcement div section.course p {
-  width: 48.092%;
-  line-height: 25.888px;
-  float: left; }
-@media screen and (max-width: 780px) {
-  header.announcement div section.course p {
-    float: none;
-    width: 100%; } }
-
-footer {
-  padding-top: 0; }
-footer div.footer-wrapper {
-  border-top: 1px solid #e5e5e5;
-  padding: 25.888px 0;
-  background: url("/static/images/marketing/mit-logo.png") right center no-repeat; }
-@media screen and (max-width: 780px) {
-  footer div.footer-wrapper {
-    background-position: left bottom;
-    padding-bottom: 77.664px; } }
-footer div.footer-wrapper a {
-  color: #888;
-  text-decoration: none;
-  -webkit-transition-property: all;
-  -moz-transition-property: all;
-  -ms-transition-property: all;
-  -o-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.15s;
-  -moz-transition-duration: 0.15s;
-  -ms-transition-duration: 0.15s;
-  -o-transition-duration: 0.15s;
-  transition-duration: 0.15s;
-  -webkit-transition-timing-function: ease-out;
-  -moz-transition-timing-function: ease-out;
-  -ms-transition-timing-function: ease-out;
-  -o-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-  -webkit-transition-delay: 0;
-  -moz-transition-delay: 0;
-  -ms-transition-delay: 0;
-  -o-transition-delay: 0;
-  transition-delay: 0; }
-footer div.footer-wrapper a:hover, footer div.footer-wrapper a:focus {
-  color: #666; }
-footer div.footer-wrapper p {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  margin-right: 25.888px; }
-footer div.footer-wrapper ul {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto; }
-@media screen and (max-width: 780px) {
-  footer div.footer-wrapper ul {
-    margin-top: 25.888px; } }
-footer div.footer-wrapper ul li {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  margin-bottom: 0; }
-footer div.footer-wrapper ul li:after {
-  content: ' |';
-  display: inline;
-  color: #ccc; }
-footer div.footer-wrapper ul li:last-child:after {
-  content: none; }
-footer div.footer-wrapper ul.social {
-  float: right;
-  margin-right: 60px;
-  position: relative;
-  top: -5px; }
-@media screen and (max-width: 780px) {
-  footer div.footer-wrapper ul.social {
-    float: none; } }
-footer div.footer-wrapper ul.social li {
-  float: left;
-  margin-right: 12.944px; }
-footer div.footer-wrapper ul.social li:after {
-  content: none;
-  display: none; }
-footer div.footer-wrapper ul.social li a {
-  display: block;
-  height: 29px;
-  width: 28px;
-  text-indent: -9999px; }
-footer div.footer-wrapper ul.social li a:hover {
-  opacity: .8; }
-footer div.footer-wrapper ul.social li.twitter a {
-  background: url("/static/images/marketing/twitter.png") 0 0 no-repeat; }
-footer div.footer-wrapper ul.social li.facebook a {
-  background: url("/static/images/marketing/facebook.png") 0 0 no-repeat; }
-footer div.footer-wrapper ul.social li.linkedin a {
-  background: url("/static/images/marketing/linkedin.png") 0 0 no-repeat; }
-
-section.index-content section {
-  float: left; }
-@media screen and (max-width: 780px) {
-  section.index-content section {
-    float: none;
-    width: auto;
-    margin-right: 0; } }
-section.index-content section h1 {
-  font-size: 800 24px "Open Sans";
-  margin-bottom: 25.888px; }
-section.index-content section p {
-  line-height: 25.888px;
-  margin-bottom: 25.888px; }
-section.index-content section ul {
-  margin: 0; }
-section.index-content section.about {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  border-right: 1px solid #e5e5e5;
-  margin-right: 2.513%;
-  padding-right: 1.256%;
-  width: 65.829%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about {
-    width: 100%;
-    border-right: 0;
-    margin-right: 0;
-    padding-right: 0; } }
-section.index-content section.about section {
-  margin-bottom: 25.888px; }
-section.index-content section.about section p {
-  width: 48.092%;
-  float: left; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section p {
-    float: none;
-    width: auto; } }
-section.index-content section.about section p:nth-child(odd) {
-  margin-right: 3.817%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section p:nth-child(odd) {
-    margin-right: 0; } }
-section.index-content section.about section.intro section {
-  margin-bottom: 0; }
-section.index-content section.about section.intro section.intro-text {
-  margin-right: 3.817%;
-  width: 48.092%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section.intro section.intro-text {
-    margin-right: 0;
-    width: auto; } }
-section.index-content section.about section.intro section.intro-text p {
-  margin-right: 0;
-  width: auto;
-  float: none; }
-section.index-content section.about section.intro section.intro-video {
-  width: 48.092%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section.intro section.intro-video {
-    width: auto; } }
-section.index-content section.about section.intro section.intro-video a {
-  display: block;
-  width: 100%; }
-section.index-content section.about section.intro section.intro-video a img {
-  width: 100%; }
-section.index-content section.about section.intro section.intro-video a span {
-  display: none; }
-section.index-content section.about section.features {
-  border-top: 1px solid #E5E5E5;
-  padding-top: 25.888px;
-  margin-bottom: 0; }
-section.index-content section.about section.features h2 {
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #888;
-  margin-bottom: 25.888px;
-  font-weight: normal;
-  font-size: 14px; }
-section.index-content section.about section.features h2 span {
-  text-transform: none; }
-section.index-content section.about section.features p {
-  width: auto;
-  clear: both; }
-section.index-content section.about section.features p strong {
-  font-family: "Open sans";
-  font-weight: 800; }
-section.index-content section.about section.features p a {
-  color: #993333;
-  text-decoration: none;
-  -webkit-transition-property: all;
-  -moz-transition-property: all;
-  -ms-transition-property: all;
-  -o-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.15s;
-  -moz-transition-duration: 0.15s;
-  -ms-transition-duration: 0.15s;
-  -o-transition-duration: 0.15s;
-  transition-duration: 0.15s;
-  -webkit-transition-timing-function: ease-out;
-  -moz-transition-timing-function: ease-out;
-  -ms-transition-timing-function: ease-out;
-  -o-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-  -webkit-transition-delay: 0;
-  -moz-transition-delay: 0;
-  -ms-transition-delay: 0;
-  -o-transition-delay: 0;
-  transition-delay: 0; }
-section.index-content section.about section.features p a:hover, section.index-content section.about section.features p a:focus {
-  color: #602020; }
-section.index-content section.about section.features ul {
-  margin-bottom: 0; }
-section.index-content section.about section.features ul li {
-  line-height: 25.888px;
-  width: 48.092%;
-  float: left;
-  margin-bottom: 12.944px; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section.features ul li {
-    width: auto;
-    float: none; } }
-section.index-content section.about section.features ul li:nth-child(odd) {
-  margin-right: 3.817%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section.features ul li:nth-child(odd) {
-    margin-right: 0; } }
-section.index-content section.course, section.index-content section.staff {
-  width: 31.658%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.course, section.index-content section.staff {
-    width: auto; } }
-section.index-content section.course h1, section.index-content section.staff h1 {
-  color: #888;
-  font: normal 16px Georgia, serif;
-  font-size: 14px;
-  letter-spacing: 1px;
-  margin-bottom: 25.888px;
-  text-transform: uppercase; }
-section.index-content section.course h2, section.index-content section.staff h2 {
-  font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
-section.index-content section.course h3, section.index-content section.staff h3 {
-  font: 400 18px "Open Sans", Helvetica, Arial, sans-serif; }
-section.index-content section.course a span.arrow, section.index-content section.staff a span.arrow {
-  color: rgba(255, 255, 255, 0.6);
-  font-style: normal;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  padding-left: 10px; }
-section.index-content section.course ul, section.index-content section.staff ul {
-  list-style: none; }
-section.index-content section.course ul li img, section.index-content section.staff ul li img {
-  float: left;
-  margin-right: 12.944px; }
-section.index-content section.course h2 {
-  padding-top: 129.44px;
-  background: url("/static/images/marketing/circuits-bg.jpg") 0 0 no-repeat;
-  -webkit-background-size: contain;
-  -moz-background-size: contain;
-  -ms-background-size: contain;
-  -o-background-size: contain;
-  background-size: contain; }
-@media screen and (max-width: 998px) and (min-width: 781px) {
-  section.index-content section.course h2 {
-    background: url("/static/images/marketing/circuits-medium-bg.jpg") 0 0 no-repeat; } }
-@media screen and (max-width: 780px) {
-  section.index-content section.course h2 {
-    padding-top: 129.44px;
-    background: url("/static/images/marketing/circuits-bg.jpg") 0 0 no-repeat; } }
-@media screen and (min-width: 500px) and (max-width: 781px) {
-  section.index-content section.course h2 {
-    padding-top: 207.104px; } }
-section.index-content section.about-course {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  border-right: 1px solid #e5e5e5;
-  margin-right: 2.513%;
-  padding-right: 1.256%;
-  width: 65.829%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about-course {
-    width: auto;
-    border-right: 0;
-    margin-right: 0;
-    padding-right: 0; } }
-section.index-content section.about-course section {
-  width: 48.092%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about-course section {
-    width: auto; } }
-section.index-content section.about-course section.about-info {
-  margin-right: 3.817%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about-course section.about-info {
-    margin-right: 0; } }
-section.index-content section.about-course section.requirements {
-  clear: both;
-  width: 100%;
-  border-top: 1px solid #E5E5E5;
-  padding-top: 25.888px;
-  margin-bottom: 0; }
-section.index-content section.about-course section.requirements p {
-  float: left;
-  width: 48.092%;
-  margin-right: 3.817%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about-course section.requirements p {
-    margin-right: 0;
-    float: none;
-    width: auto; } }
-section.index-content section.about-course section.requirements p:nth-child(odd) {
-  margin-right: 0; }
-section.index-content section.about-course section.cta {
-  width: 100%;
-  text-align: center; }
-section.index-content section.about-course section.cta a.enroll {
-  padding: 12.944px 51.776px;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  text-align: center;
-  font: 800 18px "Open Sans", Helvetica, Arial, sans-serif; }
-section.index-content section.staff h1 {
-  margin-top: 25.888px; }
-
-#lean_overlay {
-  position: fixed;
-  z-index: 100;
-  top: 0px;
-  left: 0px;
-  height: 100%;
-  width: 100%;
-  background: #000;
-  display: none; }
-
-div.leanModal_box {
-  background: #fff;
-  border: none;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px black;
-  -moz-box-shadow: 0 0 6px black;
-  box-shadow: 0 0 6px black;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  display: none;
-  padding: 51.776px;
-  text-align: left; }
-div.leanModal_box a.modal_close {
-  color: #aaa;
-  display: block;
-  font-style: normal;
-  height: 14px;
-  position: absolute;
-  right: 12px;
-  top: 12px;
-  width: 14px;
-  z-index: 2; }
-div.leanModal_box a.modal_close:hover {
-  text-decoration: none;
-  color: #993333; }
-div.leanModal_box h1 {
-  border-bottom: 1px solid #eee;
-  font-size: 24px;
-  margin-bottom: 25.888px;
-  margin-top: 0;
-  padding-bottom: 25.888px;
-  text-align: left; }
-div.leanModal_box#enroll {
-  max-width: 600px; }
-div.leanModal_box#enroll ol {
-  padding-top: 25.888px; }
-div.leanModal_box#enroll ol li.terms, div.leanModal_box#enroll ol li.honor-code {
-  width: auto;
-  float: none; }
-div.leanModal_box#enroll ol li div.tip {
-  display: none; }
-div.leanModal_box#enroll ol li:hover div.tip {
-  background: #333;
-  color: #fff;
-  display: block;
-  font-size: 16px;
-  line-height: 25.888px;
-  margin: 0 0 0 -10px;
-  padding: 10px;
-  position: absolute;
-  -webkit-font-smoothing: antialiased;
-  width: 500px; }
-div.leanModal_box form {
-  text-align: left; }
-div.leanModal_box form div#enroll_error, div.leanModal_box form div#login_error, div.leanModal_box form div#pwd_error {
-  background-color: #333333;
-  border: black;
-  color: #fff;
-  font-family: "Open sans";
-  font-weight: bold;
-  letter-spacing: 1px;
-  margin: -25.888px -25.888px 25.888px;
-  padding: 12.944px;
-  text-shadow: 0 1px 0 #1a1a1a;
-  -webkit-font-smoothing: antialiased; }
-div.leanModal_box form div#enroll_error:empty, div.leanModal_box form div#login_error:empty, div.leanModal_box form div#pwd_error:empty {
-  padding: 0; }
-div.leanModal_box form ol {
-  list-style: none;
-  margin-bottom: 25.888px; }
-div.leanModal_box form ol li {
-  margin-bottom: 12.944px; }
-div.leanModal_box form ol li.terms, div.leanModal_box form ol li.remember {
-  border-top: 1px solid #eee;
-  clear: both;
-  float: none;
-  padding-top: 25.888px;
-  width: auto; }
-div.leanModal_box form ol li.honor-code {
-  width: auto;
-  float: none; }
-div.leanModal_box form ol li label {
-  display: block;
-  font-weight: bold; }
-div.leanModal_box form ol li input[type="email"], div.leanModal_box form ol li input[type="number"], div.leanModal_box form ol li input[type="password"], div.leanModal_box form ol li input[type="search"], div.leanModal_box form ol li input[type="tel"], div.leanModal_box form ol li input[type="text"], div.leanModal_box form ol li input[type="url"], div.leanModal_box form ol li input[type="color"], div.leanModal_box form ol li input[type="date"], div.leanModal_box form ol li input[type="datetime"], div.leanModal_box form ol li input[type="datetime-local"], div.leanModal_box form ol li input[type="month"], div.leanModal_box form ol li input[type="time"], div.leanModal_box form ol li input[type="week"], div.leanModal_box form ol li textarea {
-  width: 100%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box; }
-div.leanModal_box form ol li input[type="checkbox"] {
-  margin-right: 10px; }
-div.leanModal_box form ol li ul {
-  list-style: disc outside none;
-  margin: 12.944px 0 25.888px 25.888px; }
-div.leanModal_box form ol li ul li {
-  color: #666;
-  float: none;
-  font-size: 14px;
-  list-style: disc outside none;
-  margin-bottom: 12.944px; }
-div.leanModal_box form input[type="button"], div.leanModal_box form input[type="submit"] {
-  border: 1px solid #691b1b;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 1px 0 0 #bc5c5c;
-  -moz-box-shadow: inset 0 1px 0 0 #bc5c5c;
-  box-shadow: inset 0 1px 0 0 #bc5c5c;
-  color: white;
-  display: inline;
-  font-size: 11px;
-  font-weight: bold;
-  background-color: #993333;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #993333), color-stop(100%, #761e1e));
-  background-image: -webkit-linear-gradient(top, #993333, #761e1e);
-  background-image: -moz-linear-gradient(top, #993333, #761e1e);
-  background-image: -ms-linear-gradient(top, #993333, #761e1e);
-  background-image: -o-linear-gradient(top, #993333, #761e1e);
-  background-image: linear-gradient(top, #993333, #761e1e);
-  padding: 6px 18px 7px;
-  text-shadow: 0 1px 0 #5d1414;
-  -webkit-background-clip: padding-box;
-  font-size: 18px;
-  padding: 12.944px; }
-div.leanModal_box form input[type="button"]:hover, div.leanModal_box form input[type="submit"]:hover {
-  -webkit-box-shadow: inset 0 1px 0 0 #a44141;
-  -moz-box-shadow: inset 0 1px 0 0 #a44141;
-  box-shadow: inset 0 1px 0 0 #a44141;
-  cursor: pointer;
-  background-color: #823030;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #823030), color-stop(100%, #691c1c));
-  background-image: -webkit-linear-gradient(top, #823030, #691c1c);
-  background-image: -moz-linear-gradient(top, #823030, #691c1c);
-  background-image: -ms-linear-gradient(top, #823030, #691c1c);
-  background-image: -o-linear-gradient(top, #823030, #691c1c);
-  background-image: linear-gradient(top, #823030, #691c1c); }
-div.leanModal_box form input[type="button"]:active, div.leanModal_box form input[type="submit"]:active {
-  border: 1px solid #691b1b;
-  -webkit-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
-  -moz-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
-  box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee; }
-
-div#login {
-  min-width: 400px; }
-div#login header {
-  border-bottom: 1px solid #ddd;
-  margin-bottom: 25.888px;
-  padding-bottom: 25.888px; }
-div#login header h1 {
-  border-bottom: 0;
-  padding-bottom: 0;
-  margin-bottom: 6.472px; }
-div#login ol li {
-  width: auto;
-  float: none; }
-
-div.lost-password {
-  text-align: left;
-  margin-top: 25.888px; }
-div.lost-password a {
-  color: #999; }
-div.lost-password a:hover {
-  color: #444; }
-
-div#pwd_reset p {
-  margin-bottom: 25.888px; }
-div#pwd_reset input[type="email"] {
-  margin-bottom: 25.888px; }
-
-div#apply_name_change, div#change_email, div#unenroll, div#deactivate-account {
-  max-width: 700px; }
-div#apply_name_change ul, div#change_email ul, div#unenroll ul, div#deactivate-account ul {
-  list-style: none; }
-div#apply_name_change ul li, div#change_email ul li, div#unenroll ul li, div#deactivate-account ul li {
-  margin-bottom: 12.944px; }
-div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll ul li textarea, div#unenroll ul li input[type="email"], div#unenroll ul li input[type="number"], div#unenroll ul li input[type="password"], div#unenroll ul li input[type="search"], div#unenroll ul li input[type="tel"], div#unenroll ul li input[type="text"], div#unenroll ul li input[type="url"], div#unenroll ul li input[type="color"], div#unenroll ul li input[type="date"], div#unenroll ul li input[type="datetime"], div#unenroll ul li input[type="datetime-local"], div#unenroll ul li input[type="month"], div#unenroll ul li input[type="time"], div#unenroll ul li input[type="week"], div#deactivate-account ul li textarea, div#deactivate-account ul li input[type="email"], div#deactivate-account ul li input[type="number"], div#deactivate-account ul li input[type="password"], div#deactivate-account ul li input[type="search"], div#deactivate-account ul li input[type="tel"], div#deactivate-account ul li input[type="text"], div#deactivate-account ul li input[type="url"], div#deactivate-account ul li input[type="color"], div#deactivate-account ul li input[type="date"], div#deactivate-account ul li input[type="datetime"], div#deactivate-account ul li input[type="datetime-local"], div#deactivate-account ul li input[type="month"], div#deactivate-account ul li input[type="time"], div#deactivate-account ul li input[type="week"] {
-  display: block;
-  width: 100%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box; }
-div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll ul li textarea, div#deactivate-account ul li textarea {
-  height: 60px; }
-div#apply_name_change ul li input[type="submit"], div#change_email ul li input[type="submit"], div#unenroll ul li input[type="submit"], div#deactivate-account ul li input[type="submit"] {
-  white-space: normal; }
-
-div#feedback_div form ol li {
-  float: none;
-  width: 100%; }
-div#feedback_div form ol li textarea#feedback_message {
-  height: 100px; }

static/css/marketing.scss

@@ -0,0 +1,6 @@
+@import "bourbon/bourbon";
+@import "base/reset", "base/font-face", "base/functions";
+
+// pages
+@import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index";
+@import "layout/leanmodal";

static/css/plugins/_jquery.qtip.min.scss

@@ -0,0 +1 @@
+.ui-tooltip,.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;}.ui-tooltip-fluid{display:block;visibility:hidden;position:static!important;float:left!important;}.ui-tooltip-content{position:relative;padding:5px 9px;overflow:hidden;border:1px solid #000001;text-align:left;word-wrap:break-word;overflow:hidden;}.ui-tooltip-titlebar{position:relative;min-height:14px;padding:5px 35px 5px 10px;overflow:hidden;border:1px solid #000001;border-width:1px 1px 0;font-weight:bold;}.ui-tooltip-titlebar+.ui-tooltip-content{border-top-width:0!important;}/*!Default close button class */ .ui-tooltip-titlebar .ui-state-default{position:absolute;right:4px;top:50%;margin-top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;}* html .ui-tooltip-titlebar .ui-state-default{top:16px;}.ui-tooltip-titlebar .ui-icon,.ui-tooltip-icon .ui-icon{display:block;text-indent:-1000em;}.ui-tooltip-icon,.ui-tooltip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.ui-tooltip-icon .ui-icon{width:18px;height:14px;text-align:center;text-indent:0;font:normal bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em;}/*!Default tooltip style */ .ui-tooltip-default .ui-tooltip-titlebar,.ui-tooltip-default .ui-tooltip-content{border-color:#F1D031;background-color:#FFFFA3;color:#555;}.ui-tooltip-default .ui-tooltip-titlebar{background-color:#FFEF93;}.ui-tooltip-default .ui-tooltip-icon{border-color:#CCC;background:#F1F1F1;color:#777;}.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{border-color:#AAA;color:#111;}

static/css/print.scss

@@ -0,0 +1 @@
+

static/css/wiki/_basic-html.scss

@@ -0,0 +1,137 @@
+section.wiki-body {
+   h1 {
+    font-weight: bold;
+    font-size: 2em;
+    margin-bottom: 25px;
+   }
+
+  div#wiki_article {
+    html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre   {
+      display: block;
+      unicode-bidi: embed
+    }
+
+    li {
+      display: list-item
+    }
+
+    head {
+      display: none
+    }
+
+    table {
+      display: table
+    }
+
+    tr {
+      display: table-row
+    }
+
+    thead {
+      display: table-header-group
+    }
+
+    tbody {
+      display: table-row-group
+    }
+
+    tfoot {
+      display: table-footer-group
+    }
+
+    col { display: table-column }
+
+    colgroup { display: table-column-group }
+
+    td, th { display: table-cell }
+
+    caption {
+      display: table-caption
+    }
+
+    th {
+      font-weight: bolder;
+      text-align: center
+    }
+
+    caption {
+      text-align: center
+    }
+
+    h1 {
+      font-size: 1.6em;
+      margin: .67em 0;
+      letter-spacing: 0px;
+    }
+
+    h2 {
+      text-transform: none;
+      font-size: 1.4em;
+      margin: .75em 0;
+      letter-spacing: 0px;
+    }
+
+    h3 {
+      font-size: 1.2em;
+      margin: .83em 0;
+    }
+
+    h4 {
+      font-size: 1.1em;
+    }
+
+    h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu  { margin: 1.12em 0 }
+
+    h5 { font-size: 1em; margin: 1.5em 0 }
+
+    h6 { font-size: 0.5em; margin: 1.67em 0 }
+
+    b, strong { font-weight: bolder }
+
+    blockquote      {
+      padding: 10px 20px;
+      background: #e3e3e3;
+      border-left: 4px solid;
+    }
+
+    i, cite, em, var, address  { font-style: italic }
+
+    pre, tt, code, kbd, samp  {
+      font-family: monospace;
+    }
+
+    pre { white-space: pre }
+
+    button, textarea, input, select   { display: inline-block }
+
+    big { font-size: 1.17em }
+
+    small, sub, sup { font-size: .83em }
+
+    sub { vertical-align: sub }
+
+    sup { vertical-align: super }
+
+    table { border-spacing: 2px; }
+
+    thead, tbody, tfoot { vertical-align: middle }
+
+    td, th, tr { vertical-align: inherit }
+
+    s, strike, del  { text-decoration: line-through }
+
+    hr { height: 1px; background: #999; border: none;}
+
+    ol, ul, dir, menu, dd { margin-left: 40px }
+
+    ol { list-style-type: decimal }
+
+    ol ul, ul ol, ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
+
+    u, ins { text-decoration: underline }
+
+    br:before { content: "\A"; white-space: pre-line }
+
+    center { text-align: center }
+  }
+}

static/css/wiki/_create.scss

@@ -0,0 +1,73 @@
+form#wiki_revision {
+  float: left;
+  width: flex-grid(6, 9);
+  margin-right: flex-gutter(9);
+	
+  label {
+    display: block;
+    margin-bottom: 7px ;
+  }
+  
+  .CodeMirror-scroll {
+    min-height: 550px;
+    width: 100%;
+  }
+  .CodeMirror {
+    @extend textarea;
+    @include box-sizing(border-box);
+    font-family: monospace;
+    margin-bottom: 20px;
+  }
+  
+  textarea {
+    @include box-sizing(border-box);
+    margin-bottom: 20px;
+    min-height: 450px;
+    width: 100%;
+  }
+
+  input[type="text"] {
+    display: block;
+    width: 50%;
+  }
+
+  #submit_delete {
+    @include box-shadow(none);
+    background: none;
+    border: none;
+    color: #999;
+    float: right;
+    text-decoration: underline;
+    font-weight: normal;
+  }
+  
+  input[type="submit"] {
+    margin-top: 20px;
+  }
+}
+
+#wiki_edit_instructions {
+  float: left;
+  width: flex-grid(3, 9);
+  margin-top: lh();
+  color: #666;
+
+  &:hover {
+    color: #333;
+  }
+
+  .markdown-example {
+    background-color: #e3e3e3;
+    text-shadow: 0 1px 0 #fff;
+
+    padding: {
+      top: 5px;
+      right: 2px;
+      bottom: 5px;
+      left: 5px;
+    }
+
+    margin: 5px 0 7px;
+    line-height: 1.0;
+  }
+}

static/css/wiki/_sidebar.scss

@@ -0,0 +1,76 @@
+div#wiki_panel {
+  @extend .sidebar;
+  overflow: auto;
+
+  h2 {
+    padding: lh(.5) lh();
+    font-size: 18px;
+    margin: 0 ;
+    @extend .bottom-border;
+  }
+
+  input[type="button"] {
+    @extend h3;
+    @include transition();
+    color: lighten($text-color, 10%);
+    font-size: $body-font-size;
+    margin: 0  !important;
+    padding: 7px lh();
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+      @include box-shadow(0 1px 0 #fff);
+      background: #efefef;
+    }
+  }
+
+  ul {
+    li {
+      &.search {
+        @include box-shadow(0 1px 0 #eee);
+        border-bottom: 1px solid #d3d3d3;
+        padding: 7px lh();
+
+        label {
+          display: none;
+        }
+      }
+
+      &.create-article {
+        h3 {
+          a {
+            padding: 7px lh();
+          }
+        }
+      }
+    }
+  }
+
+  div#wiki_create_form {
+    @extend .clearfix;
+    padding: 15px;
+    background: #d6d6d6;
+    border-bottom: 1px solid #bbb;
+
+    input[type="text"] {
+      margin-bottom: 6px;
+      display: block;
+      width: 100%;
+      @include box-sizing(border-box);
+    }
+
+    ul {
+      list-style: none;
+
+      li {
+        float: left;
+
+        &#cancel {
+          float: right;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+}

static/css/wiki/_table.scss

@@ -0,0 +1,48 @@
+table.wiki-history {
+  thead {
+    background: #ddd;
+    // border-bottom: 1px solid #ddd;
+
+    tr {
+      height: 40px;
+
+      th {
+        padding-top: 10px;
+        padding-left: 15px;
+
+        &#revision {
+          width: 5%;
+        }
+
+        &#comment {
+          width: 15%;
+        }
+
+        &#diff {
+          width: 60%;
+        }
+
+        &#modified {
+          width:20%;
+        }
+      }
+    }
+  }
+   tbody {
+    tr td {
+      padding: 8px 15px;
+    }
+   }
+
+  tr.dark {
+    background-color: #efefef;
+  }
+}
+
+div.history-controls {
+  margin-top: 20px;
+
+  input[type="submit"] {
+    @extend .light-button;
+  }
+}

static/css/wiki/_wiki.scss

@@ -0,0 +1,160 @@
+div.wiki-wrapper {
+  display: table;
+  width: 100%;
+
+  section.wiki-body {
+    @extend .clearfix;
+    @extend .content;
+    position: relative;
+
+
+    header {
+      @extend .topbar;
+      height:46px;
+      @include box-shadow(inset 0 1px 0 white);
+
+      &:empty {
+        display: none !important;
+        border-bottom: 0;
+      }
+
+      a {
+        @extend .block-link;
+      }
+
+      p {
+        float: left;
+        margin-bottom: 0;
+        color: darken($cream, 55%);
+        line-height: 46px;
+        padding-left: lh();
+      }
+
+      ul {
+        float: right;
+        list-style: none;
+
+        li {
+          float: left;
+
+          input[type="button"] {
+            @extend .block-link;
+            background-color: darken($cream, 5%);
+            background-position: 12px center;
+            background-repeat: no-repeat;
+            border: 0;
+            border-left: 1px solid darken(#f6efd4, 20%);
+            @include border-radius(0);
+            @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
+            color: darken($cream, 80%);
+            display: block;
+            font-weight: normal;
+            font-size: 12px;
+            letter-spacing: 1px;
+            line-height: 46px;
+            margin: 0;
+            padding: 0 lh() 0 38px;
+            text-shadow: none;
+            text-transform: uppercase;
+            @include transition();
+
+            &.view {
+              background-image: url('../images/sequence-nav/view.png');
+            }
+
+            &.history {
+              background-image:  url('../images/sequence-nav/history.png');
+            }
+
+            &.edit {
+              background-image:  url('../images/sequence-nav/edit.png');
+            }
+
+            &:hover {
+              background-color: transparent;
+            }
+          }
+        }
+      }
+    }
+
+     h2.wiki-title {
+        @include box-sizing(border-box);
+        display: inline-block;
+        float: left;
+        margin-bottom: 15px;
+        margin-top: 0;
+        padding-right: flex-gutter(9);
+        vertical-align: top;
+        width: flex-grid(2.5, 9);
+
+        @media screen and (max-width:900px) {
+          display: block;
+          width: auto;
+          border-right: 0;
+        }
+
+        @media print {
+          display: block;
+          width: auto;
+          border-right: 0;
+        }
+      }
+
+    p {
+      line-height: 1.6em;
+    }
+
+    section.results {
+      @include box-sizing(border-box);
+      display: inline-block;
+      border-left: 1px dashed #ddd;
+      float: left;
+      padding-left: 10px;
+      width: flex-grid(6.5, 9);
+
+      @media screen and (max-width:900px) {
+        border: 0;
+        display: block;
+        padding-left: 0;
+        width: 100%;
+        width: auto;
+      }
+
+      @media print {
+        display: block;
+        width: auto;
+        padding: 0;
+
+        canvas, img {
+          page-break-inside: avoid;
+        }
+      }
+
+      ul.article-list {
+        margin-left: 15px;
+        width: 100%;
+
+        @media screen and (max-width:900px) {
+          margin-left: 0px;
+        }
+
+        li {
+          list-style: none;
+          margin: 0;
+          padding: 10px 0;
+          border-bottom: 1px solid #eee;
+
+          &:last-child {
+            border-bottom: 0;
+          }
+          h3 {
+            font-size: 18px;
+            font-weight: normal;
+          }
+        }
+      }
+    }
+
+  }
+}

static/default

@@ -1 +0,0 @@
-../../askbot-devel/askbot/skins/default/

static/handouts

@@ -1 +0,0 @@
-../../data/handouts/

static/js/jquery.treeview.css

@@ -47,28 +47,3 @@
 .treeview li.lastExpandable { background-position: -32px -67px }
 
 .treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
-
-.treeview-red li { background-image: url(images/treeview-red-line.gif); }
-.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); } 
-
-.treeview-black li { background-image: url(images/treeview-black-line.gif); }
-.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }  
-
-.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
-.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); } 
-
-.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
-.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); } 
-
-.treeview .placeholder {
-	background: url(images/ajax-loader.gif) 0 0 no-repeat;
-	height: 16px;
-	width: 16px;
-	display: block;
-}
-
-.filetree li { padding: 3px 0 2px 16px; }
-.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
-.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
-.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
-.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }

static/subs

@@ -1 +0,0 @@
-../../data/subs/