wip

lms/envs/common.py

@@ -362,5 +362,5 @@ INSTALLED_APPS = (
     'askbot.deps.livesettings',
     'followit',
     'keyedcache',
-    'robots',
+    'robots'
 )

lms/static/sass/_base.scss

+$gw-column: 60px;
+$gw-gutter: 25px;
+
+$fg-column: $gw-column;
+$fg-gutter: $gw-gutter;
+$fg-max-columns: 12;
+
+$sans-serif: 'Open Sans', $verdana;
+$serif: $georgia;
+
+$base-font-color: rgb(60,60,60);
+$lighter-base-font-color: rgb(160,160,160);
+
+$blue: rgb(29,157,217);
+$pink: rgb(182,37,104);
+
+html, body {
+  background: rgb(255,255,255);
+  font-size: 75%;
+  min-height: 100%;
+  margin: 0px 0px -140px 0px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: $base-font-color;
+  font: normal 1.6rem/2rem $serif;
+  margin: 0px;
+}
+
+p {
+  color: $base-font-color;
+  font: normal 1.3rem/2rem $serif;
+  margin: 0px;
+}
+
+p + p {
+  margin-top: 20px;
+}
+
+a:link, a:visited {
+  color: $blue;
+  font: normal 1rem/1.8rem $sans-serif;
+  text-decoration: none;
+
+  &:hover {
+    color: lighten($blue, 10%);
+  }
+}
+
+.container {
+  @include clearfix;
+  margin: 0 auto 0;
+  max-width: 1200px;
+  width: flex-grid(12);
+}

lms/static/sass/_base_animations.scss

+// title appear animation
+//************************************************************************//
+
+.animation-title-appear {
+  @include animation(title-appear 4.65s ease-out);
+  @include animation-fill-mode(both);
+  @include animation-delay(1s);
+}
+
+@mixin title-appear-keyframes {
+  0% {
+    opacity: 0;
+    top: 60px;
+    @include transform(scale(0.9));
+  }
+  20% {
+    opacity: 1;
+  }
+  27% { // this % of total-time should be ~ 1.25s
+    top: 40px;
+    @include transform(scale(1));
+  }
+  90% { // this % of total-time is when 2nd half of animation starts
+    opacity: 1;
+    top: 40px;
+    @include transform(scale(1));
+  }
+  100% {
+    top: 0px;
+  }
+}
+
+@-webkit-keyframes title-appear { @include title-appear-keyframes; }
+   @-moz-keyframes title-appear { @include title-appear-keyframes; }
+        @keyframes title-appear { @include title-appear-keyframes; }
+
+// home appear animation
+//************************************************************************//
+
+.animation-home-appear {
+  @include animation(home-appear 4.25s ease-out);
+  @include animation-fill-mode(both);
+  @include animation-delay(1s);
+}
+
+@mixin home-appear-keyframes {
+  0% {
+    opacity: 0;
+    top: 60px;
+    @include transform(scale(0.9));
+  }
+  20% {
+    opacity: 1;
+  }
+  30% { // this % of total-time should be ~ 1.25s
+    top: 40px;
+    @include transform(scale(1));
+  }
+  80% { // this % of total-time is when 2nd half of animation starts
+    opacity: 1;
+    top: 40px;
+    @include transform(scale(1));
+  }
+  100% {
+    opacity: 0;
+    top: 60px;
+    @include transform(scale(0.7));
+  }
+}
+
+@-webkit-keyframes home-appear { @include home-appear-keyframes; }
+   @-moz-keyframes home-appear { @include home-appear-keyframes; }
+        @keyframes home-appear { @include home-appear-keyframes; }
+
+// edx animation
+//************************************************************************//
+
+.animation-edx-appear {
+  @include animation(edx-appear 1.25s ease-in);
+  @include animation-fill-mode(both);
+  @include animation-delay(2.15s);
+}
+
+@mixin edx-appear-keyframes {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes edx-appear { @include edx-appear-keyframes; }
+   @-moz-keyframes edx-appear { @include edx-appear-keyframes; }
+        @keyframes edx-appear { @include edx-appear-keyframes; }
+
+// mit animation
+//************************************************************************//
+
+.animation-mit-slide {
+  @include animation(mit-slide 1.15s ease-out);
+  @include animation-fill-mode(both);
+  @include animation-delay(2s);
+}
+
+@mixin mit-slide-keyframes {
+  0% {
+    left: 80px;
+  }
+  100% {
+    left: 0px;
+  }
+}
+
+@-webkit-keyframes mit-slide { @include mit-slide-keyframes; }
+   @-moz-keyframes mit-slide { @include mit-slide-keyframes; }
+        @keyframes mit-slide { @include mit-slide-keyframes; }
+
+// harvard animation
+//************************************************************************//
+
+.animation-harvard-slide {
+  @include animation(harvard-slide 1.15s ease-out);
+  @include animation-fill-mode(both);
+  @include animation-delay(2s);
+}
+
+@mixin harvard-slide-keyframes {
+  0% {
+    right: 80px;
+  }
+  100% {
+    right: 0px;
+  }
+}
+
+@-webkit-keyframes harvard-slide { @include harvard-slide-keyframes; }
+   @-moz-keyframes harvard-slide { @include harvard-slide-keyframes; }
+        @keyframes harvard-slide { @include harvard-slide-keyframes; }
+
+// divider left animation
+//************************************************************************//
+
+.animation-divider-left-slide {
+  @include animation(divider-left-slide 1.1s ease-out);
+  @include animation-fill-mode(both);
+  @include animation-delay(2s);
+}
+
+@mixin divider-left-slide-keyframes {
+  0% {
+    left: 340px;
+  }
+  100% {
+    left: 200px;
+  }
+}
+
+@-webkit-keyframes divider-left-slide { @include divider-left-slide-keyframes; }
+   @-moz-keyframes divider-left-slide { @include divider-left-slide-keyframes; }
+        @keyframes divider-left-slide { @include divider-left-slide-keyframes; }
+
+// divider right animation
+//************************************************************************//
+
+.animation-divider-right-slide {
+  @include animation(divider-right-slide 1.1s ease-out);
+  @include animation-fill-mode(both);
+  @include animation-delay(2s);
+}
+
+@mixin divider-right-slide-keyframes {
+  0% {
+    left: 340px;
+  }
+  100% {
+    left: 480px;
+  }
+}
+
+@-webkit-keyframes divider-right-slide { @include divider-right-slide-keyframes; }
+   @-moz-keyframes divider-right-slide { @include divider-right-slide-keyframes; }
+        @keyframes divider-right-slide { @include divider-right-slide-keyframes; }
+
+// video appear animation
+//************************************************************************//
+
+.animation-video-appear {
+  @include animation(video-appear 1.25s ease-out);
+  @include animation-fill-mode(both);
+  @include animation-delay(4.4s);
+}
+
+@mixin video-appear-keyframes {
+  0% {
+    bottom: -270px;
+    opacity: 0.9;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    bottom: 0px;
+  }
+}
+
+@-webkit-keyframes video-appear { @include video-appear-keyframes; }
+   @-moz-keyframes video-appear { @include video-appear-keyframes; }
+        @keyframes video-appear { @include video-appear-keyframes; }

lms/static/sass/_base_extends.scss

+.faded-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.8) 15%, rgb(200,200,200) 50%, rgba(200,200,200, 0.8) 85%, rgba(255,255,255, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-vertical-divider {
+  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.6) 25%, rgb(200,200,200) 50%, rgba(200,200,200, 0.6) 75%, rgba(255,255,255, 0)));
+  height: 100%;
+  width: 1px;
+}
+
+article.course {
+  background: rgb(240,240,240);
+  border: 1px solid rgb(220,220,220);
+  @include border-radius(4px);
+  font-size: 0em;
+  min-height: 100px;
+  margin-bottom: 20px;
+  padding: 10px;
+  @include transition(all, 0.15s, linear);
+
+  &:last-child {
+    margin-bottom: none;
+  }
+
+  > a {
+    @include clearfix;
+    display: block;
+    position: relative;
+  }
+
+  .cover {
+    background: rgb(225,225,225);
+    border: 1px solid rgb(150,150,150);
+    @include border-radius(4px);
+    @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+    float: left;
+    height: 100px;
+    margin: 0px;
+    opacity: 0.8;
+    overflow: hidden;
+    position: relative;
+    @include transition(all, 0.15s, linear);
+    width: 100px;
+
+    @media only screen and (max-width: 320px) {
+      display: none;
+    }
+
+    .shade {
+      background: rgba(0,0,0, 0.3);
+      @include border-radius(4px);
+      bottom: 0px;
+      content: "";
+      display: block;
+      left: 0px;
+      opacity: 0;
+      position: absolute;
+      top: 0px;
+      @include transition(all, 0.15s, linear);
+      right: 0px;
+    }
+
+    .arrow {
+      border-top: 1px solid;
+      border-left: 1px solid;
+      border-color: rgb(255,255,255);
+      @include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
+      content: "";
+      display: block;
+      height: 55px;
+      left: 40px;
+      opacity: 0;
+      position: absolute;
+      top: 23px;
+      @include transform(rotate(-45deg));
+      @include transition(all, 0.15s, linear);
+      width: 55px;
+    }
+
+    img {
+      @include border-radius(4px);
+      display: block;
+      min-height: 100%;
+      min-width: 100%;
+      width: 100%;
+    }
+  }
+
+  .info {
+    margin-left: 115px;
+
+    @media only screen and (max-width: 320px) {
+      margin: 0px;
+    }
+
+    > hgroup {
+      margin-right: 80px;
+
+      @media only screen and (max-width: 320px) {
+        margin: 0px;
+      }
+
+      h2 {
+        font: bold 1.8rem/2.5rem $sans-serif;
+        margin-bottom: 2px;
+        overflow: hidden;
+        text-shadow: 0 1px rgba(255,255,255, 0.6);
+        @include transition(color, 0.15s, linear);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      p {
+        color: $base-font-color;
+        font: normal 1rem/1.6rem $sans-serif;
+        overflow: hidden;
+        text-shadow: 0 1px rgba(255,255,255, 0.6);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .edit, .register {
+      border: 1px solid rgb(220,220,220);
+      background: rgb(230,230,230);
+      color: $lighter-base-font-color;
+      display: block;
+      font: normal 12px/14px $sans-serif;
+      padding: 6px 10px;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      @include transition(all, 0.15s, linear);
+
+      @media only screen and (max-width: 320px) {
+        display: none;
+      }
+
+      &:hover {
+        background: rgb(255,255,255);
+        color: $blue;
+      }
+    }
+
+    .meta {
+      border-top: 1px solid rgb(200,200,200);
+      @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6));
+      font-size: 1rem;
+      height: 34px;
+      margin-top: 10px;
+      opacity: 0.9;
+      position: relative;
+      @include transition(opacity, 0.15s, linear);
+      width: 100%;
+
+      &:hover {
+        opacity: 0.9;
+      }
+
+      > * {
+        height: 18px;
+        position: absolute;
+        top: 15px;
+      }
+
+      p + p {
+        margin-top: 0px;
+      }
+
+      .complete {
+        left: 0px;
+
+        p {
+          font: normal 1rem/1.6rem $serif;
+
+          span {
+            color: $base-font-color;
+            font-family: $sans-serif;
+            margin-left: 3px;
+          }
+        }
+      }
+
+      .dates {
+        p {
+          color: $lighter-base-font-color;
+          font: normal 1rem/1.6rem $serif;
+          @include inline-block;
+          text-align: right;
+
+          &:first-child {
+            border-right: 1px solid rgb(200,200,200);
+            margin-right: 10px;
+            padding-right: 10px;
+          }
+
+          time {
+            color: $base-font-color;
+            font-family: $sans-serif;
+            margin-left: 3px;
+          }
+        }
+      }
+
+      .end-date {
+        border-left: 1px solid rgb(200,200,200);
+        right: 0px;
+        padding-left: 15px;
+
+        @media only screen and (max-width: 320px) {
+          display: none;
+        }
+
+        p {
+          color: $lighter-base-font-color;
+          font: normal 1rem/1.6rem $serif;
+          text-align: right;
+
+          time {
+            color: $base-font-color;
+            font-family: $sans-serif;
+            margin-left: 3px;
+          }
+        }
+      }
+
+      .progress {
+        @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+        left: 90px;
+        right: 140px;
+
+        @media only screen and (max-width: 320px) {
+          right: 0px;
+        }
+
+        .meter {
+          background: rgb(230,230,230);
+          border: 1px solid rgb(200,200,200);
+          @include border-radius(3px);
+          @include box-sizing(border-box);
+          height: 100%;
+          padding: 2px;
+
+          .meter-fill {
+            @include border-radius(3px);
+            background: rgb(210,210,210);
+            height: 100%;
+            width: 60%;
+          }
+        }
+      }
+    }
+  }
+
+  &:hover {
+    background: rgb(245,245,245);
+    @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
+    cursor: pointer;
+
+    .edit {
+      background: rgb(220,220,220);
+      border-color: rgb(190,190,190);
+    }
+
+    .cover {
+      opacity: 1;
+
+      .shade, .arrow {
+        opacity: 1;
+      }
+    }
+
+    h2 {
+      //color: $blue;
+      //text-decoration: underline;
+    }
+
+    .meta {
+      opacity: 0.9;
+    }
+  }
+}
+

lms/static/sass/_course.scss

+nav.course-material {
+  background: rgb(210,210,210);
+  @include clearfix;
+  @include box-sizing(border-box);
+  @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.05));
+  border-bottom: 1px solid rgb(190,190,190);
+  margin: 0px auto 0px;
+  padding: 0px;
+  width: 100%;
+
+  .inner-wrapper {
+    margin: 0 auto;
+    max-width: 1200px;
+    width: flex-grid(12);
+  }
+
+  ol.course-tabs {
+    @include border-top-radius(4px);
+    @include clearfix;
+    padding: 10px 0 0 0;
+
+    li {
+      float: left;
+      list-style: none;
+
+      a {
+        color: $lighter-base-font-color;
+        display: block;
+        text-align: center;
+        padding: 5px 13px;
+        text-decoration: none;
+        text-shadow: 0 1px rgba(255,255,255, 0.4);
+
+        &:hover {
+          color: $base-font-color;
+        }
+
+        &.active {
+          background: rgb(255,255,255);
+          border: 1px solid rgb(200,200,200);
+          border-bottom: 0px;
+          @include border-top-radius(4px);
+          @include box-shadow(0 2px 0 0 rgba(255,255,255, 1));
+          color: $base-font-color;
+        }
+      }
+    }
+  }
+}
+
+.course-content {
+  margin-top: 30px;
+
+  .courseware {
+    background: rgb(240,240,240);
+    height: 600px;
+  }
+}

lms/static/sass/_course_info.scss

+.grid-container {
+  display: none;
+  
+  > * {
+    float: left;
+    height: 20px;
+  }
+  
+  .grid {
+    background: #FFD3DC;
+    margin-right: flex-gutter();
+    width: flex-grid(1);
+    
+    &:last-child {
+      margin-right: 0px;
+    };
+  }
+
+  .gutter {
+    background: #E3FFDA;
+    display:none;
+    width: $fg-gutter();
+  }
+}
+
+.container {
+  
+}
+
+.course-info {
+  font-size: 16px;
+  
+  .tab {
+    display: none;
+  }
+  
+  > * {
+    @include box-sizing(border-box);
+    clear: both;
+    margin-top: 20px;
+  }
+  
+  section {
+  }
+  
+  h2 {
+    font-size: 2em;
+  }
+  
+  h3 {
+    font-size: 1.4em;
+  }
+  
+  p {
+//    color: rgb(102,102,102);
+  }
+  
+  header {
+    background: rgb(240,240,240);
+    border: 1px solid rgb(200,200,200);
+    @include border-radius(4px);
+    @include box-shadow(inset 0 0 1px 1px rgb(255,255,255));
+    padding: 20px;
+    position: relative;
+    width: flex-grid(12);
+    
+    > img {
+      @include border-radius(10px);
+      display: none;
+      float: right;
+      height: 150px;
+      position: absolute;
+      right: 20px;
+      top: 20px;
+    }
+    
+    h2 {
+      margin-bottom: .5em;
+    }
+    
+    h3 {
+      
+      .course-number {
+        color: $lighter-base-font-color;
+      }
+    }
+    
+    .course-abstract {
+      display: none;
+    }
+    
+    .course-times {
+      display: none;
+      
+      .start-time, .end-time, .duration, .separator {
+        color: rgb(102,102,102);
+      }
+      
+      .duration {
+      }
+      
+      .separator {
+      }
+    }
+    
+    .button {
+      @include button(simple, $blue);
+      display: block;
+      font-size: 1.6em;
+      padding: .5em inherit;
+      position: absolute;
+      right: 20px;
+      text-align: center;
+      top: 20%;
+      width: flex-grid(3);
+    }
+  } // header
+  
+  .main-info-wrap {
+    border-bottom: 1px solid #C2C2C2;
+    margin-top: none;
+    padding: 0 20px 20px;
+    
+    section.course-description, section.teacher-description {
+      @include box-sizing(border-box);
+      
+      h3 {
+        margin-bottom: 1em;
+      }
+
+    }
+  
+    .course-description {
+      float: left;
+      margin-right: flex-gutter();
+      width: flex-grid(8);
+    }
+  
+    .teacher-description {
+      clear: none;
+      float: left;
+      position: relative;
+      width: flex-grid(4);
+    
+      .teacher-image {
+        display: none;
+        text-align: center;
+        float: right;
+      
+        .teacher-name {
+          display: none;
+          font-weight: bold;
+          color: rgb(100,100,100);
+          position: relative;
+          top: 12px;
+        }
+      
+        img {
+          border: 1px solid rgb(102,102,102);
+          @include box-shadow(1px 1px 5px rgba(0,0,0,0.5));
+        }
+      }
+    } // .teacher-description
+  } //.main-info-wrap
+  
+  ul.tabs {
+    list-style-type: none;
+    font-size: 0;
+    padding: 0 20px;
+    
+    li {
+      background: #eee;
+      @include border-radius(2px);
+      display: inline-block;
+      color: #444;
+      font-size: 16px;
+      font-weight: bold;
+      margin-right: 10px;
+      padding: .3em 1em;
+      @include transition (all .2s ease-in-out, color .1s ease-in-out);
+      
+      &.enabled {
+        color: #fff;
+        @include linear-gradient($blue, darken($blue, 5%));
+      }
+      
+      &:hover {
+        cursor: pointer;
+        background: #ddd;
+        
+        &.enabled {
+          @include linear-gradient(darken($blue, 5%), darken($blue, 10%));
+          color: #fff;
+        }
+      }
+    }
+  }
+  
+  .tabs-content {
+    margin: 20px;
+    
+    section {
+      margin-top: 30px;
+      color: #666;
+    }
+  }
+  
+  .syllabus {
+    
+    ul {
+      list-style: none outside;
+      font-size: .9em;
+      line-height: 1.5em;
+      
+      li {
+      }
+    }
+  } //.syllabus
+  
+  .faq {
+    ul {
+      list-style: none outside;
+      
+      li {
+        margin-bottom: 1em;
+        
+        p {
+          font-family: $sans-serif;
+          margin-left: 2em;
+        }
+      }
+    }
+  } // .faq
+  
+  .more-info {
+    
+    p {
+      font-family: $sans-serif;
+      margin-left: 2em;
+    }
+  }
+}
\ No newline at end of file

lms/static/sass/_dashboard.scss

+.dashboard {
+  @include clearfix;
+  margin: 40px 10px;
+}
+
+.sidebar {
+  background: rgb(240,240,240);
+  float: left;
+  margin-right: flex-gutter();
+  width: flex-grid(3);
+
+  @media screen and (max-width: 768px) {
+    float: none;
+    margin: 0 0 30px 0;
+    width: flex-grid(12);
+  }
+
+  header.profile {
+    .user-info {
+      @include clearfix;
+      padding: 10px;
+
+      .avatar {
+        background: rgb(220,220,220);
+        border: 1px solid rgb(180,180,180);
+        @include border-radius(4px);
+        @include box-sizing(border-box);
+        margin: 0 0 15px 0;
+        max-width: 100%;
+        overflow: hidden;
+
+        @media screen and (max-width: 768px) {
+          float: left;
+          margin: 0px;
+          margin-right: flex-gutter();
+          width: flex-grid(3);
+        }
+
+        img {
+          @include border-radius(4px);
+          display: block;
+          max-width: 100%;
+        }
+      }
+
+      .info {
+        @media screen and (max-width: 768px) {
+          float: left;
+          width: flex-grid(9);
+        }
+
+        h2 {
+          border-bottom: 1px solid rgb(200,200,200);
+          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4));
+          font: bold 1.2rem/1.4rem $sans-serif;
+          margin-bottom: 15px;
+          overflow: hidden;
+          padding-bottom: 15px;
+          text-align: center;
+          text-wrap: nowrap;
+          text-overflow: ellipsis;
+
+          @media screen and (max-width: 768px) {
+            text-align: left;
+          }
+        }
+
+        > ul {
+          @include clearfix;
+          margin: 0px;
+          padding: 0 0 10px 0;
+
+          @media screen and (max-width: 768px) {
+            padding: 0px;
+          }
+
+          li {
+            list-style: none;
+            margin-bottom: 10px;
+
+            @media screen and (max-width: 768px) {
+              float: left;
+              margin-right: 10px;
+            }
+
+            &:last-child {
+              margin-bottom: 0px;
+            }
+
+            h3 {
+              color: $lighter-base-font-color;
+              font: bold 1rem/1.2rem $sans-serif;
+              text-shadow: 0 1px rgba(255,255,255, 0.8);
+
+              span {
+                font-weight: normal;
+                text-transform: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.courses {
+  float: left;
+  width: flex-grid(9);
+
+  @media only screen and (max-width: 768px) {
+    float: none;
+    width: flex-grid(12);
+  }
+
+  nav.course-filters {
+    background: rgb(230,230,230);
+    margin-bottom: 30px;
+    position: relative;
+
+    ol.filters {
+      @include clearfix;
+
+      li {
+        border-right: 1px solid rgb(200,200,200);
+        @include box-sizing(border-box);
+        list-style: none;
+        float: left;
+        padding: 15px 10px;
+        width: 25%;
+        text-align: center;
+
+        &:last-child {
+          border: none;
+        }
+
+        &:hover {
+          background: rgb(220,220,220);
+          cursor: pointer;
+        }
+
+        &.selected {
+          background: rgb(220,220,220);
+        }
+
+        h2 {
+          font: normal 1rem/1.2rem $sans-serif;
+          text-transform: none;
+        }
+
+        span.count {
+          margin: 5px 0 0 0;
+          display: block;
+        }
+      }
+    }
+  }
+}

lms/static/sass/_find_courses.scss

+.find-courses {
+  margin: 0 10px;
+
+  > header {
+    margin-bottom: 30px;
+
+    .universities {
+      margin: 10px auto;
+      opacity: 0.7;
+      width: flex-grid(4);
+
+      img {
+        max-width: 100%;
+      }
+
+      span.divider {
+        @extend .faded-vertical-divider;
+        @include inline-block;
+        height: 120px;
+        vertical-align: middle;
+      }
+    }
+
+    &:hover {
+      .university {
+      }
+    }
+  }
+
+  h2.title {
+    color: $lighter-base-font-color;
+    font: normal 1.2rem/1.8rem $serif;
+    letter-spacing: 1px;
+    margin-bottom: 50px;
+    text-transform: uppercase;
+    text-align: center;
+  }
+
+  .courses {
+    @include clearfix;
+    width: flex-grid(12);
+
+    .course {
+      @include box-sizing(border-box);
+      float: left;
+      width: flex-grid(6);
+
+      @media only screen and (max-width: 768px) {
+        float: none;
+        margin-right: 0px;
+        width: flex-grid(12);
+      }
+
+      &:nth-child(odd) {
+        margin-right: flex-gutter();
+      }
+    }
+  }
+}

lms/static/sass/_index.scss

+.home {
+  margin: 30px 10px 100px;
+
+  > header {
+    height: 430px;
+    margin-bottom: 60px;
+    overflow: hidden;
+    position: relative;
+
+    h1 {
+      @extend .animation-title-appear;
+      color: $lighter-base-font-color;
+      font: normal 2.4rem/3rem $sans-serif;
+      letter-spacing: 1px;
+      position: relative;
+      text-align: center;
+      text-transform: uppercase;
+    }
+
+    .orginizations {
+      @extend .animation-home-appear;
+      height: 200px;
+      margin: 0 auto;
+      position: relative;
+      width: 680px;
+
+      > div {
+        @include inline-block;
+        vertical-align: middle;
+      }
+
+      .orginization {
+        position: absolute;
+        top: 20px;
+        width: 200px;
+
+        &.mit {
+          @extend .animation-mit-slide;
+          z-index: 3;
+        }
+
+        &.edx {
+          @extend .animation-edx-appear;
+          left: 240px;
+          z-index: 2;
+        }
+
+        &.harvard {
+          @extend .animation-harvard-slide;
+          z-index: 3;
+        }
+
+        img {
+          max-width: 100%;
+        }
+      }
+
+      .divider {
+        @extend .faded-vertical-divider;
+        position: absolute;
+        top: 0px;
+        z-index: 4;
+
+        &.left {
+          @extend .animation-divider-left-slide;
+        }
+
+        &.right {
+          @extend .animation-divider-right-slide;
+        }
+      }
+    }
+
+    .video-wrapper {
+      @extend .animation-video-appear;
+      height: 370px;
+      position: absolute;
+      width: 100%;
+
+      .video-player {
+        background: rgb(45,45,45);
+        @include border-top-radius(4px);
+        @include box-shadow(0 0 12px 0 rgba(0,0,0, 0.3));
+        height: 360px;
+        margin: 0 auto;
+        padding: 10px 10px 0px 10px;
+        width: 640px;
+
+        .video-inner {
+          background: rgb(235,235,235);
+          height: 360px;
+          margin: 0 auto;
+          width: 640px;
+        }
+      }
+    }
+
+    .bottom-divider {
+      @extend .faded-hr-divider;
+      bottom: 0px;
+      position: absolute;
+    }
+  }
+
+  .welcome {
+    border-right: 1px solid rgb(200,200,200);
+    font-size: 0em;
+    margin-bottom: 80px;
+
+    h2 {
+      color: $lighter-base-font-color;
+      font: normal 1.2rem/1.8rem $serif;
+      letter-spacing: 1px;
+      margin-bottom: 20px;
+      text-transform: uppercase;
+    }
+
+    .intro {
+      border-right: 1px solid rgb(200,200,200);
+      @include box-sizing(border-box);
+      @include inline-block;
+      margin-right: flex-gutter();
+      width: flex-grid(8);
+      vertical-align: middle;
+      padding-right: flex-gutter();
+
+      p {
+        color: $base-font-color;
+        @include inline-block;
+        margin: 0px;
+        width: flex-grid(12);
+        vertical-align: top;
+      }
+    }
+
+    .signup-wrapper {
+      @include box-sizing(border-box);
+      @include inline-block;
+      padding-right: flex-gutter();
+      width: flex-grid(4);
+      vertical-align: middle;
+    }
+  }
+
+  .university-partners {
+    @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(250,250,250, 0.8) 15%, rgb(250,250,250) 50%, rgba(250,250,250, 0.8) 85%, rgba(255,255,255, 0)));
+    margin-bottom: 60px;
+    padding-top: 5px;
+    position: relative;
+    width: flex-grid(12);
+
+    &:before {
+      @extend .faded-hr-divider;
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0px;
+    }
+
+    &:after {
+      @extend .faded-hr-divider;
+      bottom: 0px;
+      content: "";
+      display: block;
+      position: absolute;
+    }
+
+    .partners {
+      font-size: 0em;
+      margin: 0 auto;
+      opacity: 0.7;
+      width: flex-grid(6);
+
+      img {
+        @include inline-block;
+        margin-right: flex-gutter();
+        max-width: flex-grid(4);
+
+        &:last-child {
+          margin-right: 0px;
+        }
+      }
+    }
+  }
+
+  .highlighted-courses {
+    @include border-radius(4px);
+    @include box-sizing(border-box);
+    @include clearfix;
+    margin-bottom: 40px;
+    width: flex-grid(12);
+
+    > article.course {
+      background: rgb(240,240,240);
+      border: 1px solid rgb(220,220,220);
+      @include border-radius(4px);
+      @include box-sizing(border-box);
+      float: left;
+      font-size: 0em;
+      min-height: 0px;
+      margin-bottom: 20px;
+      padding: 10px;
+      @include transition(all, 0.15s, linear);
+      width: flex-grid(6);
+
+      &:last-child {
+        margin-bottom: none;
+      }
+
+      @media only screen and (max-width: 768px) {
+        float: none;
+        margin-right: 0px;
+        width: flex-grid(12);
+      }
+
+      &:nth-child(odd) {
+        margin-right: flex-gutter();
+      }
+
+      > a {
+        @include clearfix;
+        display: block;
+        position: relative;
+      }
+
+      .cover {
+        background: rgb(225,225,225);
+        border: 1px solid rgb(150,150,150);
+        @include border-radius(4px);
+        @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+        float: left;
+        height: 50px;
+        margin: 0px;
+        opacity: 0.8;
+        overflow: hidden;
+        position: relative;
+        @include transition(all, 0.15s, linear);
+        width: 100px;
+
+        @media only screen and (max-width: 320px) {
+          display: none;
+        }
+
+        .shade {
+          background: rgba(0,0,0, 0.3);
+          @include border-radius(4px);
+          bottom: 0px;
+          content: "";
+          display: block;
+          left: 0px;
+          opacity: 0;
+          position: absolute;
+          top: 0px;
+          @include transition(all, 0.15s, linear);
+          right: 0px;
+        }
+
+        .arrow {
+          border-top: 1px solid;
+          border-left: 1px solid;
+          border-color: rgb(255,255,255);
+          @include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
+          content: "";
+          display: block;
+          height: 55px;
+          left: 40px;
+          opacity: 0;
+          position: absolute;
+          top: 23px;
+          @include transform(rotate(-45deg));
+          @include transition(all, 0.15s, linear);
+          width: 55px;
+        }
+
+        img {
+          @include border-radius(4px);
+          display: block;
+          min-height: 100%;
+          min-width: 100%;
+          width: 100%;
+        }
+      }
+
+      .info {
+        margin-left: 115px;
+
+        @media only screen and (max-width: 320px) {
+          margin: 0px;
+        }
+
+        > hgroup {
+          margin-right: 80px;
+
+          @media only screen and (max-width: 320px) {
+            margin: 0px;
+          }
+
+          h2 {
+            font: bold 1.8rem/2.5rem $sans-serif;
+            margin-bottom: 2px;
+            overflow: hidden;
+            text-shadow: 0 1px rgba(255,255,255, 0.6);
+            @include transition(color, 0.15s, linear);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          p {
+            color: $base-font-color;
+            font: normal 1rem/1.6rem $sans-serif;
+            overflow: hidden;
+            text-shadow: 0 1px rgba(255,255,255, 0.6);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        .edit, .register {
+          border: 1px solid rgb(220,220,220);
+          background: rgb(230,230,230);
+          color: $lighter-base-font-color;
+          display: block;
+          font: normal 12px/14px $sans-serif;
+          padding: 6px 10px;
+          position: absolute;
+          right: 0px;
+          top: 0px;
+          @include transition(all, 0.15s, linear);
+
+          @media only screen and (max-width: 320px) {
+            display: none;
+          }
+
+          &:hover {
+            background: rgb(255,255,255);
+            color: $blue;
+          }
+        }
+      }
+
+      &:hover {
+        background: rgb(245,245,245);
+        @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
+        cursor: pointer;
+
+        .cover {
+          opacity: 1;
+
+          .shade, .arrow {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+
+  .sign-up {
+    background: rgb(240,240,240);
+    border: 1px solid rgb(220,220,220);
+    @include border-radius(4px);
+    @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
+    @include box-sizing(border-box);
+    padding: 20px;
+    width: flex-grid(12);
+
+    h3 {
+      color: $base-font-color;
+      font: normal 1.6rem/2rem $sans-serif;
+      text-align: center;
+    }
+
+    &.top {
+      @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
+      @include box-sizing(border-box);
+      width: flex-grid(12);
+
+      a {
+        @include button(shiny, $pink);
+        @include border-radius(3px);
+        //@include box-sizing(border-box);
+        display: block;
+        font: normal italic 1.2rem/1.6rem $serif;
+        margin: 0 auto 0;
+        padding: 15px 0px;
+        text-transform: uppercase;
+        text-align: center;
+        width: flex-grid(12);
+      }
+    }
+
+    &.middle {
+      @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
+      @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
+      margin-bottom: 60px;
+      padding: 15px 20px;
+      @include transition(all, 0.15s, linear);
+
+      &:hover {
+        @include box-shadow(0 0 16px 0 rgba($blue, 0.35));
+      }
+
+      form {
+        input[type="submit"] {
+        }
+      }
+    }
+  }
+
+  .more-info {
+    margin-bottom: 60px;
+    width: flex-grid(12);
+
+    h2 {
+      border-bottom: 1px solid rgb(200,200,200);
+      color: $lighter-base-font-color;
+      font: normal 1.4rem/1.8rem $serif;
+      letter-spacing: 1px;
+      margin-bottom: 20px;
+      padding-bottom: 10px;
+    }
+
+    .news {
+      background: rgb(240,240,240);
+      height: 300px;
+    }
+  }
+
+  .social-media {
+    background: rgb(245,245,245);
+    border: 1px solid rgb(220,220,220);
+    @include border-radius(4px);
+    @include box-shadow(inset 0 1px 2px 0 rgba(0,0,0, 0.1));
+    height: 200px;
+    width: flex-grid(12);
+
+    h2 {
+      color: $lighter-base-font-color;
+      font: normal 1.6rem/2rem $sans-serif;
+      padding-top: 80px;
+      text-align: center;
+    }
+  }
+}

lms/static/sass/_reset.scss

+/* HTML5 Boilerplate  */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+html, button, input, select, textarea { font-family: sans-serif; color: #222; }
+body { margin: 0; font-size: 1em; line-height: 1.4; }
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+a:hover, a:active { outline: 0; }
+abbr[title] { border-bottom: 1px dotted; }
+b, strong { font-weight: bold; }
+blockquote { margin: 1em 40px; }
+dfn { font-style: italic; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+ins { background: #ff9; color: #000; text-decoration: none; }
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+small { font-size: 85%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+svg:not(:root) { overflow: hidden; }
+figure { margin: 0; }
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+label { cursor: pointer; }
+legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+button, input { line-height: normal; }
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
+button[disabled], input[disabled] { cursor: default; }
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
+
+
+
+
+
+
+
+
+
+@media only screen and (min-width: 35em) {
+  
+
+}
+
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
+.ir br { display: none; }
+.hidden { display: none !important; visibility: hidden; }
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+.invisible { visibility: hidden; }
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+
+@media print {
+  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } 
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}

lms/static/sass/_shared_footer.scss

+footer {
+  background: rgb(240,240,240);
+  height: 100px;
+  padding: 20px 0px;
+  width: flex-grid(12);
+
+  nav {
+    @include clearfix;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: flex-grid(12);
+
+    a.logo {
+      @include box-sizing(border-box);
+      display: block;
+      float: left;
+      height: 100%;
+      margin: 0px 15px 0px 0px;
+    }
+
+    ol {
+      float: right;
+      font-size: 0em;
+      margin-top: 3px;
+
+      li {
+        border-right: 1px solid rgb(200,200,200);
+        @include inline-block;
+        list-style: none;
+
+        &:last-child {
+          border: none;
+        }
+
+        a:link, a:visited {
+          color: $lighter-base-font-color;
+          font: normal 1rem/1.6rem $serif;
+          padding: 5px 15px;
+        }
+      }
+    }
+  }
+}

lms/static/sass/_shared_forms.scss

+form {
+  font-size: 0em;
+
+  input[type="text"],
+  input[type="email"],
+  input[type="password"] {
+    background: rgb(250,250,250);
+    border: 1px solid rgb(210,210,210);
+    @include border-radius(3px);
+    @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
+    @include box-sizing(border-box);
+    font: normal italic 1.2rem/1.6rem $serif;
+    height: 45px;
+    @include inline-block;
+    margin-right: flex-gutter();
+    padding: 5px 12px;
+    width: flex-grid(3);
+
+    &:last-child {
+      margin-right: 0px;
+    }
+
+    &:focus {
+      border-color: lighten($blue, 20%);
+      @include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
+      outline: none;
+    }
+  }
+
+  input[type="submit"] {
+    @include button(shiny, $pink);
+    @include border-radius(3px);
+    font: normal italic 1.2rem/1.6rem $serif;
+    height: 45px;
+    @include inline-block;
+    text-transform: uppercase;
+    width: flex-grid(3);
+  }
+}

lms/static/sass/_shared_header.scss

+header.app {
+  border-bottom: 1px solid rgb(200,200,200);
+  @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230)));
+  height: 55px;
+  width: 100%;
+
+  nav {
+    @include clearfix;
+    @include box-sizing(border-box);
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0px 10px;
+    width: flex-grid(12);
+  }
+
+  a.logo {
+    @include box-sizing(border-box);
+    display: block;
+    float: left;
+    height: 100%;
+    margin: 15px 15px 0px 0px;
+  }
+
+  h1 {
+    border-left: 1px solid rgb(200,200,200);
+    font: bold 1rem/1.2rem $sans-serif;
+    float: left;
+    height: 15px;
+    margin-top: 10px;
+    padding: 10px 18px;
+  }
+
+  ol {
+    float: left;
+    font-size: 0em;
+
+    &.user {
+      float: right;
+    }
+
+    &.secondary {
+      > li {
+        border: none;
+
+        &:last-child {
+          border-right: none;
+        }
+
+        a {
+          font: normal italic 1rem/1.2rem $serif;
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    > li {
+      border-left: 1px solid rgb(200,200,200);
+      @include inline-block;
+      margin-top: 10px;
+      padding: 0px 8px;
+      position: relative;
+      vertical-align: bottom;
+
+      &:last-child {
+        border-right: 1px solid rgb(200,200,200);
+      }
+
+      a {
+        @include border-radius(3px);
+        color: $lighter-base-font-color;
+        display: block;
+        font: normal 1rem/1.2rem $sans-serif;
+        height: 15px;
+        padding: 10px;
+        text-decoration: none;
+        text-transform: uppercase;
+        text-shadow: 0 1px rgba(255,255,255, 0.4);
+
+        &.user-dashboard {
+          padding: 10px 10px 10px 40px;
+
+          @media screen and (max-width: 768px) {
+            font-size: 0em;
+            padding: 10px 0px;
+            width: 38px;
+          }
+
+          .avatar {
+            background: rgb(220,220,220);
+            @include border-radius(3px);
+            border: 1px solid rgb(180,180,180);
+            @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+            height: 22px;
+            @include inline-block;
+            left: 15px;
+            overflow: hidden;
+            position: absolute;
+            top: 5px;
+            width: 22px;
+
+            &::after {
+              @include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%));
+              content: "";
+              display: block;
+              height: 100%;
+              position: absolute;
+              right: 0px;
+              top: 0px;
+              width: 100%;
+            }
+
+            img {
+              @include border-radius(4px);
+              display: block;
+              min-height: 100%;
+              min-width: 100%;
+              height: 100%;
+            }
+          }
+        }
+
+
+        &:hover {
+          background: rgb(220,220,220);
+          color: $base-font-color;
+        }
+
+        &.active {
+          background: rgb(220,220,220);
+          color: $base-font-color;
+        }
+      }
+
+      ol.user-options {
+        @include border-radius(4px);
+        @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
+        border: 1px solid rgb(200,200,200);
+        background: rgb(220,220,220);
+        display: none;
+        right: 4px;
+        padding: 5px 10px;
+        position: absolute;
+        top: 50px;
+        width: 170px;
+        z-index: 3;
+
+        &.expanded {
+          display: block;
+        }
+
+        &::before {
+          background: transparent;
+          border: {
+            top: 8px solid rgb(220,220,220);
+            right: 8px solid rgb(220,220,220);
+            bottom: 8px solid transparent;
+            left: 8px solid transparent;
+          }
+          @include box-shadow(1px 0 0 0 rgb(200,200,200), 0 -1px 0 0 rgb(200,200,200));
+          content: "";
+          display: block;
+          height: 0px;
+          position: absolute;
+          @include transform(rotate(-45deg));
+          right: 10px;
+          top: -7px;
+          width: 0px;
+        }
+
+        li {
+          border: {
+            top: 1px solid rgb(200,200,200);
+            right: none;
+            bottom: none;
+            left: none;
+          }
+          margin: 0px;
+          padding: 0px;
+          width: 100%;
+
+          &:first-child {
+            border: none;
+          }
+
+          a {
+            @include box-sizing(border-box);
+            display: block;
+            font: normal 1rem/1.2rem $sans-serif;
+            height: auto;
+            margin: 5px 0px;
+            overflow: hidden;
+            padding: 5px;
+            text-overflow: ellipsis;
+            @include transition(padding, 0.1s, linear);
+            white-space: nowrap;
+            width: 100%;
+
+            &:hover {
+              background: rgb(255,255,255);
+              padding: 5px 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

lms/static/sass/application.css

+/* HTML5 Boilerplate  */
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
+  display: block; }
+
+audio, canvas, video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1; }
+
+audio:not([controls]) {
+  display: none; }
+
+[hidden] {
+  display: none; }
+
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%; }
+
+html, button, input, select, textarea {
+  font-family: sans-serif;
+  color: #222; }
+
+body {
+  margin: 0;
+  font-size: 1em;
+  line-height: 1.4; }
+
+::-moz-selection {
+  background: #fe57a1;
+  color: #fff;
+  text-shadow: none; }
+
+::selection {
+  background: #fe57a1;
+  color: #fff;
+  text-shadow: none; }
+
+a {
+  color: #00e; }
+
+a:visited {
+  color: #551a8b; }
+
+a:hover {
+  color: #06e; }
+
+a:focus {
+  outline: thin dotted; }
+
+a:hover, a:active {
+  outline: 0; }
+
+abbr[title] {
+  border-bottom: 1px dotted; }
+
+b, strong {
+  font-weight: bold; }
+
+blockquote {
+  margin: 1em 40px; }
+
+dfn {
+  font-style: italic; }
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0; }
+
+ins {
+  background: #ff9;
+  color: #000;
+  text-decoration: none; }
+
+mark {
+  background: #ff0;
+  color: #000;
+  font-style: italic;
+  font-weight: bold; }
+
+pre, code, kbd, samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em; }
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word; }
+
+q {
+  quotes: none; }
+
+q:before, q:after {
+  content: "";
+  content: none; }
+
+small {
+  font-size: 85%; }
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+ul, ol {
+  margin: 1em 0;
+  padding: 0 0 0 40px; }
+
+dd {
+  margin: 0 0 0 40px; }
+
+nav ul, nav ol {
+  list-style: none;
+  list-style-image: none;
+  margin: 0;
+  padding: 0; }
+
+img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+  vertical-align: middle; }
+
+svg:not(:root) {
+  overflow: hidden; }
+
+figure {
+  margin: 0; }
+
+form {
+  margin: 0; }
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0; }
+
+label {
+  cursor: pointer; }
+
+legend {
+  border: 0;
+  *margin-left: -7px;
+  padding: 0;
+  white-space: normal; }
+
+button, input, select, textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle; }
+
+button, input {
+  line-height: normal; }
+
+button, input[type="button"], input[type="reset"], input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+  *overflow: visible; }
+
+button[disabled], input[disabled] {
+  cursor: default; }
+
+input[type="checkbox"], input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  *width: 13px;
+  *height: 13px; }
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box; }
+
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none; }
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+  border: 0;
+  padding: 0; }
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical; }
+
+input:invalid, textarea:invalid {
+  background-color: #f0dddd; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+td {
+  vertical-align: top; }
+
+.chromeframe {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: black;
+  padding: 0.2em 0; }
+
+.ir {
+  display: block;
+  border: 0;
+  text-indent: -999em;
+  overflow: hidden;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  text-align: left;
+  direction: ltr;
+  *line-height: 0; }
+
+.ir br {
+  display: none; }
+
+.hidden {
+  display: none !important;
+  visibility: hidden; }
+
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px; }
+
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto; }
+
+.invisible {
+  visibility: hidden; }
+
+.clearfix:before, .clearfix:after {
+  content: "";
+  display: table; }
+
+.clearfix:after {
+  clear: both; }
+
+.clearfix {
+  *zoom: 1; }
+
+@media print {
+  * {
+    background: transparent !important;
+    color: black !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+    filter: none !important;
+    -ms-filter: none !important; }
+
+  a, a:visited {
+    text-decoration: underline; }
+
+  a[href]:after {
+    content: " (" attr(href) ")"; }
+
+  abbr[title]:after {
+    content: " (" attr(title) ")"; }
+
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
+    content: ""; }
+
+  pre, blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid; }
+
+  thead {
+    display: table-header-group; }
+
+  tr, img {
+    page-break-inside: avoid; }
+
+  img {
+    max-width: 100% !important; }
+
+  @page {
+    margin: 0.5cm; }
+
+  p, h2, h3 {
+    orphans: 3;
+    widows: 3; }
+
+  h2, h3 {
+    page-break-after: avoid; } }
+html, body {
+  background: white;
+  font-size: 75%;
+  min-height: 100%;
+  margin: 0px 0px -140px 0px; }
+
+h1, h2, h3, h4, h5, h6 {
+  color: #3c3c3c;
+  font: normal 1.6rem/2rem Georgia, Cambria, "Times New Roman", Times, serif;
+  margin: 0px; }
+
+p {
+  color: #3c3c3c;
+  font: normal 1.3rem/2rem Georgia, Cambria, "Times New Roman", Times, serif;
+  margin: 0px; }
+
+p + p {
+  margin-top: 20px; }
+
+a:link, a:visited {
+  color: #1d9dd9;
+  font: normal 1rem/1.8rem "Open Sans", Verdana, Geneva, sans-serif;
+  text-decoration: none; }
+  a:link:hover, a:visited:hover {
+    color: #43b2e6; }
+
+.container {
+  zoom: 1;
+  margin: 0 auto 0;
+  max-width: 1200px;
+  width: 100%; }
+  .container:before, .container:after {
+    content: "";
+    display: table; }
+  .container:after {
+    clear: both; }
+
+.faded-hr-divider, .home > header .bottom-divider, .home .university-partners:before, .home .university-partners:after {
+  background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
+  background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
+  background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
+  background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
+  height: 1px;
+  width: 100%; }
+
+.faded-vertical-divider, .home > header .orginizations .divider, .find-courses > header .universities span.divider {
+  background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
+  background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
+  background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
+  background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
+  height: 100%;
+  width: 1px; }
+
+article.course {
+  background: #f0f0f0;
+  border: 1px solid #dcdcdc;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  font-size: 0em;
+  min-height: 100px;
+  margin-bottom: 20px;
+  padding: 10px;
+  -webkit-transition: all, 0.15s, linear;
+  -moz-transition: all, 0.15s, linear;
+  -ms-transition: all, 0.15s, linear;
+  -o-transition: all, 0.15s, linear;
+  transition: all, 0.15s, linear; }
+  article.course:last-child {
+    margin-bottom: none; }
+  article.course > a {
+    zoom: 1;
+    display: block;
+    position: relative; }
+    article.course > a:before, article.course > a:after {
+      content: "";
+      display: table; }
+    article.course > a:after {
+      clear: both; }
+  article.course .cover {
+    background: #e1e1e1;
+    border: 1px solid #969696;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+    -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+    float: left;
+    height: 100px;
+    margin: 0px;
+    opacity: 0.8;
+    overflow: hidden;
+    position: relative;
+    -webkit-transition: all, 0.15s, linear;
+    -moz-transition: all, 0.15s, linear;
+    -ms-transition: all, 0.15s, linear;
+    -o-transition: all, 0.15s, linear;
+    transition: all, 0.15s, linear;
+    width: 100px; }
+    @media only screen and (max-width: 320px) {
+      article.course .cover {
+        display: none; } }
+    article.course .cover .shade {
+      background: rgba(0, 0, 0, 0.3);
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      border-radius: 4px;
+      bottom: 0px;
+      content: "";
+      display: block;
+      left: 0px;
+      opacity: 0;
+      position: absolute;
+      top: 0px;
+      -webkit-transition: all, 0.15s, linear;
+      -moz-transition: all, 0.15s, linear;
+      -ms-transition: all, 0.15s, linear;
+      -o-transition: all, 0.15s, linear;
+      transition: all, 0.15s, linear;
+      right: 0px; }
+    article.course .cover .arrow {
+      border-top: 1px solid;
+      border-left: 1px solid;
+      border-color: white;
+      -webkit-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
+      -moz-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
+      box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
+      content: "";
+      display: block;
+      height: 55px;
+      left: 40px;
+      opacity: 0;
+      position: absolute;
+      top: 23px;
+      -webkit-transform: rotate(-45deg);
+      -moz-transform: rotate(-45deg);
+      -ms-transform: rotate(-45deg);
+      -o-transform: rotate(-45deg);
+      transform: rotate(-45deg);
+      -webkit-transition: all, 0.15s, linear;
+      -moz-transition: all, 0.15s, linear;
+      -ms-transition: all, 0.15s, linear;
+      -o-transition: all, 0.15s, linear;
+      transition: all, 0.15s, linear;
+      width: 55px; }
+    article.course .cover img {
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      border-radius: 4px;
+      display: block;
+      min-height: 100%;
+      min-width: 100%;
+      width: 100%; }
+  article.course .info {
+    margin-left: 115px; }
+    @media only screen and (max-width: 320px) {
+      article.course .info {
+        margin: 0px; } }
+    article.course .info > hgroup {
+      margin-right: 80px; }
+      @media only screen and (max-width: 320px) {
+        article.course .info > hgroup {
+          margin: 0px; } }
+      article.course .info > hgroup h2 {
+        font: bold 1.8rem/2.5rem "Open Sans", Verdana, Geneva, sans-serif;
+        margin-bottom: 2px;
+        overflow: hidden;
+        text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+        -webkit-transition: color, 0.15s, linear;
+        -moz-transition: color, 0.15s, linear;
+        -ms-transition: color, 0.15s, linear;
+        -o-transition: color, 0.15s, linear;
+        transition: color, 0.15s, linear;
+        text-overflow: ellipsis;
+        white-space: nowrap; }
+      article.course .info > hgroup p {
+        color: #3c3c3c;
+        font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
+        overflow: hidden;
+        text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+        text-overflow: ellipsis;
+        white-space: nowrap; }
+    article.course .info .edit, article.course .info .register {
+      border: 1px solid #dcdcdc;
+      background: #e6e6e6;
+      color: #a0a0a0;
+      display: block;
+      font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
+      padding: 6px 10px;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      -webkit-transition: all, 0.15s, linear;
+      -moz-transition: all, 0.15s, linear;
+      -ms-transition: all, 0.15s, linear;
+      -o-transition: all, 0.15s, linear;
+      transition: all, 0.15s, linear; }
+      @media only screen and (max-width: 320px) {
+        article.course .info .edit, article.course .info .register {
+          display: none; } }
+      article.course .info .edit:hover, article.course .info .register:hover {
+        background: white;
+        color: #1d9dd9; }
+    article.course .info .meta {
+      border-top: 1px solid #c8c8c8;
+      -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
+      -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
+      box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
+      font-size: 1rem;
+      height: 34px;
+      margin-top: 10px;
+      opacity: 0.9;
+      position: relative;
+      -webkit-transition: opacity, 0.15s, linear;
+      -moz-transition: opacity, 0.15s, linear;
+      -ms-transition: opacity, 0.15s, linear;
+      -o-transition: opacity, 0.15s, linear;
+      transition: opacity, 0.15s, linear;
+      width: 100%; }
+      article.course .info .meta:hover {
+        opacity: 0.9; }
+      article.course .info .meta > * {
+        height: 18px;
+        position: absolute;
+        top: 15px; }
+      article.course .info .meta p + p {
+        margin-top: 0px; }
+      article.course .info .meta .complete {
+        left: 0px; }
+        article.course .info .meta .complete p {
+          font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; }
+          article.course .info .meta .complete p span {
+            color: #3c3c3c;
+            font-family: "Open Sans", Verdana, Geneva, sans-serif;
+            margin-left: 3px; }
+      article.course .info .meta .dates p {
+        color: #a0a0a0;
+        font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        text-align: right; }
+        article.course .info .meta .dates p:first-child {
+          border-right: 1px solid #c8c8c8;
+          margin-right: 10px;
+          padding-right: 10px; }
+        article.course .info .meta .dates p time {
+          color: #3c3c3c;
+          font-family: "Open Sans", Verdana, Geneva, sans-serif;
+          margin-left: 3px; }
+      article.course .info .meta .end-date {
+        border-left: 1px solid #c8c8c8;
+        right: 0px;
+        padding-left: 15px; }
+        @media only screen and (max-width: 320px) {
+          article.course .info .meta .end-date {
+            display: none; } }
+        article.course .info .meta .end-date p {
+          color: #a0a0a0;
+          font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
+          text-align: right; }
+          article.course .info .meta .end-date p time {
+            color: #3c3c3c;
+            font-family: "Open Sans", Verdana, Geneva, sans-serif;
+            margin-left: 3px; }
+      article.course .info .meta .progress {
+        -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+        -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+        box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+        left: 90px;
+        right: 140px; }
+        @media only screen and (max-width: 320px) {
+          article.course .info .meta .progress {
+            right: 0px; } }
+        article.course .info .meta .progress .meter {
+          background: #e6e6e6;
+          border: 1px solid #c8c8c8;
+          -webkit-border-radius: 3px;
+          -moz-border-radius: 3px;
+          border-radius: 3px;
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          height: 100%;
+          padding: 2px; }
+          article.course .info .meta .progress .meter .meter-fill {
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            border-radius: 3px;
+            background: #d2d2d2;
+            height: 100%;
+            width: 60%; }
+  article.course:hover {
+    background: #f5f5f5;
+    -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
+    cursor: pointer; }
+    article.course:hover .edit {
+      background: #dcdcdc;
+      border-color: #bebebe; }
+    article.course:hover .cover {
+      opacity: 1; }
+      article.course:hover .cover .shade, article.course:hover .cover .arrow {
+        opacity: 1; }
+    article.course:hover .meta {
+      opacity: 0.9; }
+
+.animation-title-appear, .home > header h1 {
+  -webkit-animation: title-appear 4.65s ease-out;
+  -moz-animation: title-appear 4.65s ease-out;
+  animation: title-appear 4.65s ease-out;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  animation-delay: 1s; }
+
+@-webkit-keyframes title-appear {
+  0% {
+    opacity: 0;
+    top: 60px;
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); }
+
+  20% {
+    opacity: 1; }
+
+  27% {
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  90% {
+    opacity: 1;
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  100% {
+    top: 0px; } }
+
+@-moz-keyframes title-appear {
+  0% {
+    opacity: 0;
+    top: 60px;
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); }
+
+  20% {
+    opacity: 1; }
+
+  27% {
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  90% {
+    opacity: 1;
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  100% {
+    top: 0px; } }
+
+@keyframes title-appear {
+  0% {
+    opacity: 0;
+    top: 60px;
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); }
+
+  20% {
+    opacity: 1; }
+
+  27% {
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  90% {
+    opacity: 1;
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  100% {
+    top: 0px; } }
+
+.animation-home-appear, .home > header .orginizations {
+  -webkit-animation: home-appear 4.25s ease-out;
+  -moz-animation: home-appear 4.25s ease-out;
+  animation: home-appear 4.25s ease-out;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  animation-delay: 1s; }
+
+@-webkit-keyframes home-appear {
+  0% {
+    opacity: 0;
+    top: 60px;
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); }
+
+  20% {
+    opacity: 1; }
+
+  30% {
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  80% {
+    opacity: 1;
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  100% {
+    opacity: 0;
+    top: 60px;
+    -webkit-transform: scale(0.7);
+    -moz-transform: scale(0.7);
+    -ms-transform: scale(0.7);
+    -o-transform: scale(0.7);
+    transform: scale(0.7); } }
+
+@-moz-keyframes home-appear {
+  0% {
+    opacity: 0;
+    top: 60px;
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); }
+
+  20% {
+    opacity: 1; }
+
+  30% {
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  80% {
+    opacity: 1;
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  100% {
+    opacity: 0;
+    top: 60px;
+    -webkit-transform: scale(0.7);
+    -moz-transform: scale(0.7);
+    -ms-transform: scale(0.7);
+    -o-transform: scale(0.7);
+    transform: scale(0.7); } }
+
+@keyframes home-appear {
+  0% {
+    opacity: 0;
+    top: 60px;
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); }
+
+  20% {
+    opacity: 1; }
+
+  30% {
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  80% {
+    opacity: 1;
+    top: 40px;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+
+  100% {
+    opacity: 0;
+    top: 60px;
+    -webkit-transform: scale(0.7);
+    -moz-transform: scale(0.7);
+    -ms-transform: scale(0.7);
+    -o-transform: scale(0.7);
+    transform: scale(0.7); } }
+
+.animation-edx-appear, .home > header .orginizations .orginization.edx {
+  -webkit-animation: edx-appear 1.25s ease-in;
+  -moz-animation: edx-appear 1.25s ease-in;
+  animation: edx-appear 1.25s ease-in;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-delay: 2.15s;
+  -moz-animation-delay: 2.15s;
+  animation-delay: 2.15s; }
+
+@-webkit-keyframes edx-appear {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@-moz-keyframes edx-appear {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@keyframes edx-appear {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+.animation-mit-slide, .home > header .orginizations .orginization.mit {
+  -webkit-animation: mit-slide 1.15s ease-out;
+  -moz-animation: mit-slide 1.15s ease-out;
+  animation: mit-slide 1.15s ease-out;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-delay: 2s;
+  -moz-animation-delay: 2s;
+  animation-delay: 2s; }
+
+@-webkit-keyframes mit-slide {
+  0% {
+    left: 80px; }
+
+  100% {
+    left: 0px; } }
+
+@-moz-keyframes mit-slide {
+  0% {
+    left: 80px; }
+
+  100% {
+    left: 0px; } }
+
+@keyframes mit-slide {
+  0% {
+    left: 80px; }
+
+  100% {
+    left: 0px; } }
+
+.animation-harvard-slide, .home > header .orginizations .orginization.harvard {
+  -webkit-animation: harvard-slide 1.15s ease-out;
+  -moz-animation: harvard-slide 1.15s ease-out;
+  animation: harvard-slide 1.15s ease-out;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-delay: 2s;
+  -moz-animation-delay: 2s;
+  animation-delay: 2s; }
+
+@-webkit-keyframes harvard-slide {
+  0% {
+    right: 80px; }
+
+  100% {
+    right: 0px; } }
+
+@-moz-keyframes harvard-slide {
+  0% {
+    right: 80px; }
+
+  100% {
+    right: 0px; } }
+
+@keyframes harvard-slide {
+  0% {
+    right: 80px; }
+
+  100% {
+    right: 0px; } }
+
+.animation-divider-left-slide, .home > header .orginizations .divider.left {
+  -webkit-animation: divider-left-slide 1.1s ease-out;
+  -moz-animation: divider-left-slide 1.1s ease-out;
+  animation: divider-left-slide 1.1s ease-out;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-delay: 2s;
+  -moz-animation-delay: 2s;
+  animation-delay: 2s; }
+
+@-webkit-keyframes divider-left-slide {
+  0% {
+    left: 340px; }
+
+  100% {
+    left: 200px; } }
+
+@-moz-keyframes divider-left-slide {
+  0% {
+    left: 340px; }
+
+  100% {
+    left: 200px; } }
+
+@keyframes divider-left-slide {
+  0% {
+    left: 340px; }
+
+  100% {
+    left: 200px; } }
+
+.animation-divider-right-slide, .home > header .orginizations .divider.right {
+  -webkit-animation: divider-right-slide 1.1s ease-out;
+  -moz-animation: divider-right-slide 1.1s ease-out;
+  animation: divider-right-slide 1.1s ease-out;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-delay: 2s;
+  -moz-animation-delay: 2s;
+  animation-delay: 2s; }
+
+@-webkit-keyframes divider-right-slide {
+  0% {
+    left: 340px; }
+
+  100% {
+    left: 480px; } }
+
+@-moz-keyframes divider-right-slide {
+  0% {
+    left: 340px; }
+
+  100% {
+    left: 480px; } }
+
+@keyframes divider-right-slide {
+  0% {
+    left: 340px; }
+
+  100% {
+    left: 480px; } }
+
+.animation-video-appear, .home > header .video-wrapper {
+  -webkit-animation: video-appear 1.25s ease-out;
+  -moz-animation: video-appear 1.25s ease-out;
+  animation: video-appear 1.25s ease-out;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-delay: 4.4s;
+  -moz-animation-delay: 4.4s;
+  animation-delay: 4.4s; }
+
+@-webkit-keyframes video-appear {
+  0% {
+    bottom: -270px;
+    opacity: 0.9; }
+
+  80% {
+    opacity: 1; }
+
+  100% {
+    bottom: 0px; } }
+
+@-moz-keyframes video-appear {
+  0% {
+    bottom: -270px;
+    opacity: 0.9; }
+
+  80% {
+    opacity: 1; }
+
+  100% {
+    bottom: 0px; } }
+
+@keyframes video-appear {
+  0% {
+    bottom: -270px;
+    opacity: 0.9; }
+
+  80% {
+    opacity: 1; }
+
+  100% {
+    bottom: 0px; } }
+
+form {
+  font-size: 0em; }
+  form input[type="text"],
+  form input[type="email"],
+  form input[type="password"] {
+    background: #fafafa;
+    border: 1px solid #d2d2d2;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
+    height: 45px;
+    display: inline-block;
+    vertical-align: baseline;
+    zoom: 1;
+    *display: inline;
+    *vertical-align: auto;
+    margin-right: 2.513%;
+    padding: 5px 12px;
+    width: 23.116%; }
+    form input[type="text"]:last-child,
+    form input[type="email"]:last-child,
+    form input[type="password"]:last-child {
+      margin-right: 0px; }
+    form input[type="text"]:focus,
+    form input[type="email"]:focus,
+    form input[type="password"]:focus {
+      border-color: #70c4ec;
+      -webkit-box-shadow: 0 0 6px 0 rgba(29, 157, 217, 0.4), inset 0 0 4px 0 rgba(0, 0, 0, 0.15);
+      -moz-box-shadow: 0 0 6px 0 rgba(29, 157, 217, 0.4), inset 0 0 4px 0 rgba(0, 0, 0, 0.15);
+      box-shadow: 0 0 6px 0 rgba(29, 157, 217, 0.4), inset 0 0 4px 0 rgba(0, 0, 0, 0.15);
+      outline: none; }
+  form input[type="submit"] {
+    border: 1px solid #410017;
+    border-bottom: 1px solid #380000;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 1px 0 0 #db4274;
+    -moz-box-shadow: inset 0 1px 0 0 #db4274;
+    box-shadow: inset 0 1px 0 0 #db4274;
+    color: white;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: bold;
+    background-color: #b62568;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b62568), color-stop(50%, #7e0047), color-stop(50%, #600038), color-stop(100%, #67003a));
+    background-image: -webkit-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+    background-image: -moz-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+    background-image: -ms-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+    background-image: -o-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+    background-image: linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+    padding: 8px 20px;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: 0 -1px 1px #2a0000;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
+    height: 45px;
+    display: inline-block;
+    vertical-align: baseline;
+    zoom: 1;
+    *display: inline;
+    *vertical-align: auto;
+    text-transform: uppercase;
+    width: 23.116%; }
+    form input[type="submit"]:hover:not(:disabled) {
+      cursor: pointer;
+      background-color: #a91656;
+      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029));
+      background-image: -webkit-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
+      background-image: -moz-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
+      background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
+      background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
+      background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); }
+    form input[type="submit"]:active:not(:disabled) {
+      -webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
+      -moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
+      box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; }
+    form input[type="submit"]:disabled {
+      opacity: 0.5;
+      cursor: not-allowed; }
+
+footer {
+  background: #f0f0f0;
+  height: 100px;
+  padding: 20px 0px;
+  width: 100%; }
+  footer nav {
+    zoom: 1;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%; }
+    footer nav:before, footer nav:after {
+      content: "";
+      display: table; }
+    footer nav:after {
+      clear: both; }
+    footer nav a.logo {
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      display: block;
+      float: left;
+      height: 100%;
+      margin: 0px 15px 0px 0px; }
+    footer nav ol {
+      float: right;
+      font-size: 0em;
+      margin-top: 3px; }
+      footer nav ol li {
+        border-right: 1px solid #c8c8c8;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        list-style: none; }
+        footer nav ol li:last-child {
+          border: none; }
+        footer nav ol li a:link, footer nav ol li a:visited {
+          color: #a0a0a0;
+          font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
+          padding: 5px 15px; }
+
+header.app {
+  border-bottom: 1px solid #c8c8c8;
+  background-image: -webkit-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
+  background-image: -moz-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
+  background-image: -ms-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
+  background-image: -o-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
+  background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6);
+  height: 55px;
+  width: 100%; }
+  header.app nav {
+    zoom: 1;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0px 10px;
+    width: 100%; }
+    header.app nav:before, header.app nav:after {
+      content: "";
+      display: table; }
+    header.app nav:after {
+      clear: both; }
+  header.app a.logo {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    display: block;
+    float: left;
+    height: 100%;
+    margin: 15px 15px 0px 0px; }
+  header.app h1 {
+    border-left: 1px solid #c8c8c8;
+    font: bold 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
+    float: left;
+    height: 15px;
+    margin-top: 10px;
+    padding: 10px 18px; }
+  header.app ol {
+    float: left;
+    font-size: 0em; }
+    header.app ol.user {
+      float: right; }
+    header.app ol.secondary > li {
+      border: none; }
+      header.app ol.secondary > li:last-child {
+        border-right: none; }
+      header.app ol.secondary > li a {
+        font: normal italic 1rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif;
+        text-transform: lowercase; }
+    header.app ol > li {
+      border-left: 1px solid #c8c8c8;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto;
+      margin-top: 10px;
+      padding: 0px 8px;
+      position: relative;
+      vertical-align: bottom; }
+      header.app ol > li:last-child {
+        border-right: 1px solid #c8c8c8; }
+      header.app ol > li a {
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        color: #a0a0a0;
+        display: block;
+        font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
+        height: 15px;
+        padding: 10px;
+        text-decoration: none;
+        text-transform: uppercase;
+        text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
+        header.app ol > li a.user-dashboard {
+          padding: 10px 10px 10px 40px; }
+          @media screen and (max-width: 768px) {
+            header.app ol > li a.user-dashboard {
+              font-size: 0em;
+              padding: 10px 0px;
+              width: 38px; } }
+          header.app ol > li a.user-dashboard .avatar {
+            background: #dcdcdc;
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            border-radius: 3px;
+            border: 1px solid #b4b4b4;
+            -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+            -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+            box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+            height: 22px;
+            display: inline-block;
+            vertical-align: baseline;
+            zoom: 1;
+            *display: inline;
+            *vertical-align: auto;
+            left: 15px;
+            overflow: hidden;
+            position: absolute;
+            top: 5px;
+            width: 22px; }
+            header.app ol > li a.user-dashboard .avatar::after {
+              background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+              background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+              background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+              background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+              background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+              content: "";
+              display: block;
+              height: 100%;
+              position: absolute;
+              right: 0px;
+              top: 0px;
+              width: 100%; }
+            header.app ol > li a.user-dashboard .avatar img {
+              -webkit-border-radius: 4px;
+              -moz-border-radius: 4px;
+              border-radius: 4px;
+              display: block;
+              min-height: 100%;
+              min-width: 100%;
+              height: 100%; }
+        header.app ol > li a:hover {
+          background: #dcdcdc;
+          color: #3c3c3c; }
+        header.app ol > li a.active {
+          background: #dcdcdc;
+          color: #3c3c3c; }
+      header.app ol > li ol.user-options {
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+        -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+        border: 1px solid #c8c8c8;
+        background: #dcdcdc;
+        display: none;
+        right: 4px;
+        padding: 5px 10px;
+        position: absolute;
+        top: 50px;
+        width: 170px;
+        z-index: 3; }
+        header.app ol > li ol.user-options.expanded {
+          display: block; }
+        header.app ol > li ol.user-options::before {
+          background: transparent;
+          border-top: 8px solid #dcdcdc;
+          border-right: 8px solid #dcdcdc;
+          border-bottom: 8px solid transparent;
+          border-left: 8px solid transparent;
+          -webkit-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
+          -moz-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
+          box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
+          content: "";
+          display: block;
+          height: 0px;
+          position: absolute;
+          -webkit-transform: rotate(-45deg);
+          -moz-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
+          -o-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+          right: 10px;
+          top: -7px;
+          width: 0px; }
+        header.app ol > li ol.user-options li {
+          border-top: 1px solid #c8c8c8;
+          border-right: none;
+          border-bottom: none;
+          border-left: none;
+          margin: 0px;
+          padding: 0px;
+          width: 100%; }
+          header.app ol > li ol.user-options li:first-child {
+            border: none; }
+          header.app ol > li ol.user-options li a {
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            display: block;
+            font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
+            height: auto;
+            margin: 5px 0px;
+            overflow: hidden;
+            padding: 5px;
+            text-overflow: ellipsis;
+            -webkit-transition: padding, 0.1s, linear;
+            -moz-transition: padding, 0.1s, linear;
+            -ms-transition: padding, 0.1s, linear;
+            -o-transition: padding, 0.1s, linear;
+            transition: padding, 0.1s, linear;
+            white-space: nowrap;
+            width: 100%; }
+            header.app ol > li ol.user-options li a:hover {
+              background: white;
+              padding: 5px 8px; }
+
+.home {
+  margin: 30px 10px 100px; }
+  .home > header {
+    height: 430px;
+    margin-bottom: 60px;
+    overflow: hidden;
+    position: relative; }
+    .home > header h1 {
+      color: #a0a0a0;
+      font: normal 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif;
+      letter-spacing: 1px;
+      position: relative;
+      text-align: center;
+      text-transform: uppercase; }
+    .home > header .orginizations {
+      height: 200px;
+      margin: 0 auto;
+      position: relative;
+      width: 680px; }
+      .home > header .orginizations > div {
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        vertical-align: middle; }
+      .home > header .orginizations .orginization {
+        position: absolute;
+        top: 20px;
+        width: 200px; }
+        .home > header .orginizations .orginization.mit {
+          z-index: 3; }
+        .home > header .orginizations .orginization.edx {
+          left: 240px;
+          z-index: 2; }
+        .home > header .orginizations .orginization.harvard {
+          z-index: 3; }
+        .home > header .orginizations .orginization img {
+          max-width: 100%; }
+      .home > header .orginizations .divider {
+        position: absolute;
+        top: 0px;
+        z-index: 4; }
+    .home > header .video-wrapper {
+      height: 370px;
+      position: absolute;
+      width: 100%; }
+      .home > header .video-wrapper .video-player {
+        background: #2d2d2d;
+        -moz-border-radius-topleft: 4px;
+        -webkit-border-top-left-radius: 4px;
+        -moz-border-top-left-radius: 4px;
+        border-top-left-radius: 4px;
+        -moz-border-radius-topright: 4px;
+        -webkit-border-top-right-radius: 4px;
+        -moz-border-top-right-radius: 4px;
+        border-top-right-radius: 4px;
+        -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
+        -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
+        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
+        height: 360px;
+        margin: 0 auto;
+        padding: 10px 10px 0px 10px;
+        width: 640px; }
+        .home > header .video-wrapper .video-player .video-inner {
+          background: #ebebeb;
+          height: 360px;
+          margin: 0 auto;
+          width: 640px; }
+    .home > header .bottom-divider {
+      bottom: 0px;
+      position: absolute; }
+  .home .welcome {
+    border-right: 1px solid #c8c8c8;
+    font-size: 0em;
+    margin-bottom: 80px; }
+    .home .welcome h2 {
+      color: #a0a0a0;
+      font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
+      letter-spacing: 1px;
+      margin-bottom: 20px;
+      text-transform: uppercase; }
+    .home .welcome .intro {
+      border-right: 1px solid #c8c8c8;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto;
+      margin-right: 2.513%;
+      width: 65.829%;
+      vertical-align: middle;
+      padding-right: 2.513%; }
+      .home .welcome .intro p {
+        color: #3c3c3c;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        margin: 0px;
+        width: 100%;
+        vertical-align: top; }
+    .home .welcome .signup-wrapper {
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto;
+      padding-right: 2.513%;
+      width: 31.658%;
+      vertical-align: middle; }
+  .home .university-partners {
+    background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
+    background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
+    background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
+    background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0));
+    margin-bottom: 60px;
+    padding-top: 5px;
+    position: relative;
+    width: 100%; }
+    .home .university-partners:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0px; }
+    .home .university-partners:after {
+      bottom: 0px;
+      content: "";
+      display: block;
+      position: absolute; }
+    .home .university-partners .partners {
+      font-size: 0em;
+      margin: 0 auto;
+      opacity: 0.7;
+      width: 48.744%; }
+      .home .university-partners .partners img {
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        margin-right: 2.513%;
+        max-width: 31.658%; }
+        .home .university-partners .partners img:last-child {
+          margin-right: 0px; }
+  .home .highlighted-courses {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    zoom: 1;
+    margin-bottom: 40px;
+    width: 100%; }
+    .home .highlighted-courses:before, .home .highlighted-courses:after {
+      content: "";
+      display: table; }
+    .home .highlighted-courses:after {
+      clear: both; }
+    .home .highlighted-courses > article.course {
+      background: #f0f0f0;
+      border: 1px solid #dcdcdc;
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      border-radius: 4px;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      float: left;
+      font-size: 0em;
+      min-height: 0px;
+      margin-bottom: 20px;
+      padding: 10px;
+      -webkit-transition: all, 0.15s, linear;
+      -moz-transition: all, 0.15s, linear;
+      -ms-transition: all, 0.15s, linear;
+      -o-transition: all, 0.15s, linear;
+      transition: all, 0.15s, linear;
+      width: 48.744%; }
+      .home .highlighted-courses > article.course:last-child {
+        margin-bottom: none; }
+      @media only screen and (max-width: 768px) {
+        .home .highlighted-courses > article.course {
+          float: none;
+          margin-right: 0px;
+          width: 100%; } }
+      .home .highlighted-courses > article.course:nth-child(odd) {
+        margin-right: 2.513%; }
+      .home .highlighted-courses > article.course > a {
+        zoom: 1;
+        display: block;
+        position: relative; }
+        .home .highlighted-courses > article.course > a:before, .home .highlighted-courses > article.course > a:after {
+          content: "";
+          display: table; }
+        .home .highlighted-courses > article.course > a:after {
+          clear: both; }
+      .home .highlighted-courses > article.course .cover {
+        background: #e1e1e1;
+        border: 1px solid #969696;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+        -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+        box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+        float: left;
+        height: 50px;
+        margin: 0px;
+        opacity: 0.8;
+        overflow: hidden;
+        position: relative;
+        -webkit-transition: all, 0.15s, linear;
+        -moz-transition: all, 0.15s, linear;
+        -ms-transition: all, 0.15s, linear;
+        -o-transition: all, 0.15s, linear;
+        transition: all, 0.15s, linear;
+        width: 100px; }
+        @media only screen and (max-width: 320px) {
+          .home .highlighted-courses > article.course .cover {
+            display: none; } }
+        .home .highlighted-courses > article.course .cover .shade {
+          background: rgba(0, 0, 0, 0.3);
+          -webkit-border-radius: 4px;
+          -moz-border-radius: 4px;
+          border-radius: 4px;
+          bottom: 0px;
+          content: "";
+          display: block;
+          left: 0px;
+          opacity: 0;
+          position: absolute;
+          top: 0px;
+          -webkit-transition: all, 0.15s, linear;
+          -moz-transition: all, 0.15s, linear;
+          -ms-transition: all, 0.15s, linear;
+          -o-transition: all, 0.15s, linear;
+          transition: all, 0.15s, linear;
+          right: 0px; }
+        .home .highlighted-courses > article.course .cover .arrow {
+          border-top: 1px solid;
+          border-left: 1px solid;
+          border-color: white;
+          -webkit-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
+          -moz-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
+          box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6);
+          content: "";
+          display: block;
+          height: 55px;
+          left: 40px;
+          opacity: 0;
+          position: absolute;
+          top: 23px;
+          -webkit-transform: rotate(-45deg);
+          -moz-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
+          -o-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+          -webkit-transition: all, 0.15s, linear;
+          -moz-transition: all, 0.15s, linear;
+          -ms-transition: all, 0.15s, linear;
+          -o-transition: all, 0.15s, linear;
+          transition: all, 0.15s, linear;
+          width: 55px; }
+        .home .highlighted-courses > article.course .cover img {
+          -webkit-border-radius: 4px;
+          -moz-border-radius: 4px;
+          border-radius: 4px;
+          display: block;
+          min-height: 100%;
+          min-width: 100%;
+          width: 100%; }
+      .home .highlighted-courses > article.course .info {
+        margin-left: 115px; }
+        @media only screen and (max-width: 320px) {
+          .home .highlighted-courses > article.course .info {
+            margin: 0px; } }
+        .home .highlighted-courses > article.course .info > hgroup {
+          margin-right: 80px; }
+          @media only screen and (max-width: 320px) {
+            .home .highlighted-courses > article.course .info > hgroup {
+              margin: 0px; } }
+          .home .highlighted-courses > article.course .info > hgroup h2 {
+            font: bold 1.8rem/2.5rem "Open Sans", Verdana, Geneva, sans-serif;
+            margin-bottom: 2px;
+            overflow: hidden;
+            text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+            -webkit-transition: color, 0.15s, linear;
+            -moz-transition: color, 0.15s, linear;
+            -ms-transition: color, 0.15s, linear;
+            -o-transition: color, 0.15s, linear;
+            transition: color, 0.15s, linear;
+            text-overflow: ellipsis;
+            white-space: nowrap; }
+          .home .highlighted-courses > article.course .info > hgroup p {
+            color: #3c3c3c;
+            font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
+            overflow: hidden;
+            text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+            text-overflow: ellipsis;
+            white-space: nowrap; }
+        .home .highlighted-courses > article.course .info .edit, .home .highlighted-courses > article.course .info .register {
+          border: 1px solid #dcdcdc;
+          background: #e6e6e6;
+          color: #a0a0a0;
+          display: block;
+          font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
+          padding: 6px 10px;
+          position: absolute;
+          right: 0px;
+          top: 0px;
+          -webkit-transition: all, 0.15s, linear;
+          -moz-transition: all, 0.15s, linear;
+          -ms-transition: all, 0.15s, linear;
+          -o-transition: all, 0.15s, linear;
+          transition: all, 0.15s, linear; }
+          @media only screen and (max-width: 320px) {
+            .home .highlighted-courses > article.course .info .edit, .home .highlighted-courses > article.course .info .register {
+              display: none; } }
+          .home .highlighted-courses > article.course .info .edit:hover, .home .highlighted-courses > article.course .info .register:hover {
+            background: white;
+            color: #1d9dd9; }
+      .home .highlighted-courses > article.course:hover {
+        background: #f5f5f5;
+        -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
+        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
+        cursor: pointer; }
+        .home .highlighted-courses > article.course:hover .cover {
+          opacity: 1; }
+          .home .highlighted-courses > article.course:hover .cover .shade, .home .highlighted-courses > article.course:hover .cover .arrow {
+            opacity: 1; }
+  .home .sign-up {
+    background: #f0f0f0;
+    border: 1px solid #dcdcdc;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 20px;
+    width: 100%; }
+    .home .sign-up h3 {
+      color: #3c3c3c;
+      font: normal 1.6rem/2rem "Open Sans", Verdana, Geneva, sans-serif;
+      text-align: center; }
+    .home .sign-up.top {
+      background-image: -webkit-linear-gradient(-90deg, #fafafa, #e6e6e6);
+      background-image: -moz-linear-gradient(-90deg, #fafafa, #e6e6e6);
+      background-image: -ms-linear-gradient(-90deg, #fafafa, #e6e6e6);
+      background-image: -o-linear-gradient(-90deg, #fafafa, #e6e6e6);
+      background-image: linear-gradient(-90deg, #fafafa, #e6e6e6);
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      width: 100%; }
+      .home .sign-up.top a {
+        border: 1px solid #410017;
+        border-bottom: 1px solid #380000;
+        -webkit-border-radius: 5px;
+        -moz-border-radius: 5px;
+        border-radius: 5px;
+        -webkit-box-shadow: inset 0 1px 0 0 #db4274;
+        -moz-box-shadow: inset 0 1px 0 0 #db4274;
+        box-shadow: inset 0 1px 0 0 #db4274;
+        color: white;
+        display: inline-block;
+        font-size: 14px;
+        font-weight: bold;
+        background-color: #b62568;
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b62568), color-stop(50%, #7e0047), color-stop(50%, #600038), color-stop(100%, #67003a));
+        background-image: -webkit-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+        background-image: -moz-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+        background-image: -ms-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+        background-image: -o-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+        background-image: linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+        padding: 8px 20px;
+        text-align: center;
+        text-decoration: none;
+        text-shadow: 0 -1px 1px #2a0000;
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        display: block;
+        font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
+        margin: 0 auto 0;
+        padding: 15px 0px;
+        text-transform: uppercase;
+        text-align: center;
+        width: 100%; }
+        .home .sign-up.top a:hover:not(:disabled) {
+          cursor: pointer;
+          background-color: #a91656;
+          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029));
+          background-image: -webkit-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
+          background-image: -moz-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
+          background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
+          background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
+          background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); }
+        .home .sign-up.top a:active:not(:disabled) {
+          -webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
+          -moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
+          box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; }
+        .home .sign-up.top a:disabled {
+          opacity: 0.5;
+          cursor: not-allowed; }
+    .home .sign-up.middle {
+      background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+      background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+      background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+      background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+      background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+      -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
+      -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
+      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
+      margin-bottom: 60px;
+      padding: 15px 20px;
+      -webkit-transition: all, 0.15s, linear;
+      -moz-transition: all, 0.15s, linear;
+      -ms-transition: all, 0.15s, linear;
+      -o-transition: all, 0.15s, linear;
+      transition: all, 0.15s, linear; }
+      .home .sign-up.middle:hover {
+        -webkit-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35);
+        -moz-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35);
+        box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); }
+  .home .more-info {
+    margin-bottom: 60px;
+    width: 100%; }
+    .home .more-info h2 {
+      border-bottom: 1px solid #c8c8c8;
+      color: #a0a0a0;
+      font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
+      letter-spacing: 1px;
+      margin-bottom: 20px;
+      padding-bottom: 10px; }
+    .home .more-info .news {
+      background: #f0f0f0;
+      height: 300px; }
+  .home .social-media {
+    background: #f5f5f5;
+    border: 1px solid #dcdcdc;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+    height: 200px;
+    width: 100%; }
+    .home .social-media h2 {
+      color: #a0a0a0;
+      font: normal 1.6rem/2rem "Open Sans", Verdana, Geneva, sans-serif;
+      padding-top: 80px;
+      text-align: center; }
+
+.dashboard {
+  zoom: 1;
+  margin: 40px 10px; }
+  .dashboard:before, .dashboard:after {
+    content: "";
+    display: table; }
+  .dashboard:after {
+    clear: both; }
+
+.sidebar {
+  background: #f0f0f0;
+  float: left;
+  margin-right: 2.513%;
+  width: 23.116%; }
+  @media screen and (max-width: 768px) {
+    .sidebar {
+      float: none;
+      margin: 0 0 30px 0;
+      width: 100%; } }
+  .sidebar header.profile .user-info {
+    zoom: 1;
+    padding: 10px; }
+    .sidebar header.profile .user-info:before, .sidebar header.profile .user-info:after {
+      content: "";
+      display: table; }
+    .sidebar header.profile .user-info:after {
+      clear: both; }
+    .sidebar header.profile .user-info .avatar {
+      background: #dcdcdc;
+      border: 1px solid #b4b4b4;
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      border-radius: 4px;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      margin: 0 0 15px 0;
+      max-width: 100%;
+      overflow: hidden; }
+      @media screen and (max-width: 768px) {
+        .sidebar header.profile .user-info .avatar {
+          float: left;
+          margin: 0px;
+          margin-right: 2.513%;
+          width: 23.116%; } }
+      .sidebar header.profile .user-info .avatar img {
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        display: block;
+        max-width: 100%; }
+    @media screen and (max-width: 768px) {
+      .sidebar header.profile .user-info .info {
+        float: left;
+        width: 74.372%; } }
+    .sidebar header.profile .user-info .info h2 {
+      border-bottom: 1px solid #c8c8c8;
+      -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4);
+      -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4);
+      box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4);
+      font: bold 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
+      margin-bottom: 15px;
+      overflow: hidden;
+      padding-bottom: 15px;
+      text-align: center;
+      text-wrap: nowrap;
+      text-overflow: ellipsis; }
+      @media screen and (max-width: 768px) {
+        .sidebar header.profile .user-info .info h2 {
+          text-align: left; } }
+    .sidebar header.profile .user-info .info > ul {
+      zoom: 1;
+      margin: 0px;
+      padding: 0 0 10px 0; }
+      .sidebar header.profile .user-info .info > ul:before, .sidebar header.profile .user-info .info > ul:after {
+        content: "";
+        display: table; }
+      .sidebar header.profile .user-info .info > ul:after {
+        clear: both; }
+      @media screen and (max-width: 768px) {
+        .sidebar header.profile .user-info .info > ul {
+          padding: 0px; } }
+      .sidebar header.profile .user-info .info > ul li {
+        list-style: none;
+        margin-bottom: 10px; }
+        @media screen and (max-width: 768px) {
+          .sidebar header.profile .user-info .info > ul li {
+            float: left;
+            margin-right: 10px; } }
+        .sidebar header.profile .user-info .info > ul li:last-child {
+          margin-bottom: 0px; }
+        .sidebar header.profile .user-info .info > ul li h3 {
+          color: #a0a0a0;
+          font: bold 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
+          text-shadow: 0 1px rgba(255, 255, 255, 0.8); }
+          .sidebar header.profile .user-info .info > ul li h3 span {
+            font-weight: normal;
+            text-transform: none; }
+
+.courses {
+  float: left;
+  width: 74.372%; }
+  @media only screen and (max-width: 768px) {
+    .courses {
+      float: none;
+      width: 100%; } }
+  .courses nav.course-filters {
+    background: #e6e6e6;
+    margin-bottom: 30px;
+    position: relative; }
+    .courses nav.course-filters ol.filters {
+      zoom: 1; }
+      .courses nav.course-filters ol.filters:before, .courses nav.course-filters ol.filters:after {
+        content: "";
+        display: table; }
+      .courses nav.course-filters ol.filters:after {
+        clear: both; }
+      .courses nav.course-filters ol.filters li {
+        border-right: 1px solid #c8c8c8;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        list-style: none;
+        float: left;
+        padding: 15px 10px;
+        width: 25%;
+        text-align: center; }
+        .courses nav.course-filters ol.filters li:last-child {
+          border: none; }
+        .courses nav.course-filters ol.filters li:hover {
+          background: #dcdcdc;
+          cursor: pointer; }
+        .courses nav.course-filters ol.filters li.selected {
+          background: #dcdcdc; }
+        .courses nav.course-filters ol.filters li h2 {
+          font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
+          text-transform: none; }
+        .courses nav.course-filters ol.filters li span.count {
+          margin: 5px 0 0 0;
+          display: block; }
+
+nav.course-material {
+  background: #d2d2d2;
+  zoom: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid #bebebe;
+  margin: 0px auto 0px;
+  padding: 0px;
+  width: 100%; }
+  nav.course-material:before, nav.course-material:after {
+    content: "";
+    display: table; }
+  nav.course-material:after {
+    clear: both; }
+  nav.course-material .inner-wrapper {
+    margin: 0 auto;
+    max-width: 1200px;
+    width: 100%; }
+  nav.course-material ol.course-tabs {
+    -moz-border-radius-topleft: 4px;
+    -webkit-border-top-left-radius: 4px;
+    -moz-border-top-left-radius: 4px;
+    border-top-left-radius: 4px;
+    -moz-border-radius-topright: 4px;
+    -webkit-border-top-right-radius: 4px;
+    -moz-border-top-right-radius: 4px;
+    border-top-right-radius: 4px;
+    zoom: 1;
+    padding: 10px 0 0 0; }
+    nav.course-material ol.course-tabs:before, nav.course-material ol.course-tabs:after {
+      content: "";
+      display: table; }
+    nav.course-material ol.course-tabs:after {
+      clear: both; }
+    nav.course-material ol.course-tabs li {
+      float: left;
+      list-style: none; }
+      nav.course-material ol.course-tabs li a {
+        color: #a0a0a0;
+        display: block;
+        text-align: center;
+        padding: 5px 13px;
+        text-decoration: none;
+        text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
+        nav.course-material ol.course-tabs li a:hover {
+          color: #3c3c3c; }
+        nav.course-material ol.course-tabs li a.active {
+          background: white;
+          border: 1px solid #c8c8c8;
+          border-bottom: 0px;
+          -moz-border-radius-topleft: 4px;
+          -webkit-border-top-left-radius: 4px;
+          -moz-border-top-left-radius: 4px;
+          border-top-left-radius: 4px;
+          -moz-border-radius-topright: 4px;
+          -webkit-border-top-right-radius: 4px;
+          -moz-border-top-right-radius: 4px;
+          border-top-right-radius: 4px;
+          -webkit-box-shadow: 0 2px 0 0 white;
+          -moz-box-shadow: 0 2px 0 0 white;
+          box-shadow: 0 2px 0 0 white;
+          color: #3c3c3c; }
+
+.course-content {
+  margin-top: 30px; }
+  .course-content .courseware {
+    background: #f0f0f0;
+    height: 600px; }
+
+.find-courses {
+  margin: 0 10px; }
+  .find-courses > header {
+    margin-bottom: 30px; }
+    .find-courses > header .universities {
+      margin: 10px auto;
+      opacity: 0.7;
+      width: 31.658%; }
+      .find-courses > header .universities img {
+        max-width: 100%; }
+      .find-courses > header .universities span.divider {
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        height: 120px;
+        vertical-align: middle; }
+  .find-courses h2.title {
+    color: #a0a0a0;
+    font: normal 1.2rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
+    letter-spacing: 1px;
+    margin-bottom: 50px;
+    text-transform: uppercase;
+    text-align: center; }
+  .find-courses .courses {
+    zoom: 1;
+    width: 100%; }
+    .find-courses .courses:before, .find-courses .courses:after {
+      content: "";
+      display: table; }
+    .find-courses .courses:after {
+      clear: both; }
+    .find-courses .courses .course {
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      float: left;
+      width: 48.744%; }
+      @media only screen and (max-width: 768px) {
+        .find-courses .courses .course {
+          float: none;
+          margin-right: 0px;
+          width: 100%; } }
+      .find-courses .courses .course:nth-child(odd) {
+        margin-right: 2.513%; }
+
+.grid-container {
+  display: none; }
+  .grid-container > * {
+    float: left;
+    height: 20px; }
+  .grid-container .grid {
+    background: #FFD3DC;
+    margin-right: 2.513%;
+    width: 6.03%; }
+    .grid-container .grid:last-child {
+      margin-right: 0px; }
+  .grid-container .gutter {
+    background: #E3FFDA;
+    display: none;
+    width: 25px; }
+
+.course-info {
+  font-size: 16px; }
+  .course-info .tab {
+    display: none; }
+  .course-info > * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    clear: both;
+    margin-top: 20px; }
+  .course-info h2 {
+    font-size: 2em; }
+  .course-info h3 {
+    font-size: 1.4em; }
+  .course-info header {
+    background: #f0f0f0;
+    border: 1px solid #c8c8c8;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 0 1px 1px white;
+    -moz-box-shadow: inset 0 0 1px 1px white;
+    box-shadow: inset 0 0 1px 1px white;
+    padding: 20px;
+    position: relative;
+    width: 100%; }
+    .course-info header > img {
+      -webkit-border-radius: 10px;
+      -moz-border-radius: 10px;
+      border-radius: 10px;
+      display: none;
+      float: right;
+      height: 150px;
+      position: absolute;
+      right: 20px;
+      top: 20px; }
+    .course-info header h2 {
+      margin-bottom: .5em; }
+    .course-info header h3 .course-number {
+      color: #a0a0a0; }
+    .course-info header .course-abstract {
+      display: none; }
+    .course-info header .course-times {
+      display: none; }
+      .course-info header .course-times .start-time, .course-info header .course-times .end-time, .course-info header .course-times .duration, .course-info header .course-times .separator {
+        color: #666666; }
+    .course-info header .button {
+      border: 1px solid #0d72a2;
+      -webkit-border-radius: 3px;
+      -moz-border-radius: 3px;
+      border-radius: 3px;
+      -webkit-box-shadow: inset 0 1px 0 0 #61b8e1;
+      -moz-box-shadow: inset 0 1px 0 0 #61b8e1;
+      box-shadow: inset 0 1px 0 0 #61b8e1;
+      color: white;
+      display: inline-block;
+      font-size: 11px;
+      font-weight: bold;
+      background-color: #1d9dd9;
+      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(100%, #0e7cb0));
+      background-image: -webkit-linear-gradient(top, #1d9dd9, #0e7cb0);
+      background-image: -moz-linear-gradient(top, #1d9dd9, #0e7cb0);
+      background-image: -ms-linear-gradient(top, #1d9dd9, #0e7cb0);
+      background-image: -o-linear-gradient(top, #1d9dd9, #0e7cb0);
+      background-image: linear-gradient(top, #1d9dd9, #0e7cb0);
+      padding: 7px 18px;
+      text-decoration: none;
+      text-shadow: 0 1px 0 #076794;
+      -webkit-background-clip: padding-box;
+      display: block;
+      font-size: 1.6em;
+      padding: .5em inherit;
+      position: absolute;
+      right: 20px;
+      text-align: center;
+      top: 20%;
+      width: 23.116%; }
+      .course-info header .button:hover:not(:disabled) {
+        -webkit-box-shadow: inset 0 1px 0 0 #35a6db;
+        -moz-box-shadow: inset 0 1px 0 0 #35a6db;
+        box-shadow: inset 0 1px 0 0 #35a6db;
+        cursor: pointer;
+        background-color: #1e8bbe;
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e8bbe), color-stop(100%, #0e72a1));
+        background-image: -webkit-linear-gradient(top, #1e8bbe, #0e72a1);
+        background-image: -moz-linear-gradient(top, #1e8bbe, #0e72a1);
+        background-image: -ms-linear-gradient(top, #1e8bbe, #0e72a1);
+        background-image: -o-linear-gradient(top, #1e8bbe, #0e72a1);
+        background-image: linear-gradient(top, #1e8bbe, #0e72a1); }
+      .course-info header .button:active:not(:disabled) {
+        border: 1px solid #0d72a2;
+        -webkit-box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee;
+        -moz-box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee;
+        box-shadow: inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee; }
+      .course-info header .button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed; }
+  .course-info .main-info-wrap {
+    border-bottom: 1px solid #C2C2C2;
+    margin-top: none;
+    padding: 0 20px 20px; }
+    .course-info .main-info-wrap section.course-description, .course-info .main-info-wrap section.teacher-description {
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box; }
+      .course-info .main-info-wrap section.course-description h3, .course-info .main-info-wrap section.teacher-description h3 {
+        margin-bottom: 1em; }
+    .course-info .main-info-wrap .course-description {
+      float: left;
+      margin-right: 2.513%;
+      width: 65.829%; }
+    .course-info .main-info-wrap .teacher-description {
+      clear: none;
+      float: left;
+      position: relative;
+      width: 31.658%; }
+      .course-info .main-info-wrap .teacher-description .teacher-image {
+        display: none;
+        text-align: center;
+        float: right; }
+        .course-info .main-info-wrap .teacher-description .teacher-image .teacher-name {
+          display: none;
+          font-weight: bold;
+          color: #646464;
+          position: relative;
+          top: 12px; }
+        .course-info .main-info-wrap .teacher-description .teacher-image img {
+          border: 1px solid #666666;
+          -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
+          -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
+          box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
+  .course-info ul.tabs {
+    list-style-type: none;
+    font-size: 0;
+    padding: 0 20px; }
+    .course-info ul.tabs li {
+      background: #eee;
+      -webkit-border-radius: 2px;
+      -moz-border-radius: 2px;
+      border-radius: 2px;
+      display: inline-block;
+      color: #444;
+      font-size: 16px;
+      font-weight: bold;
+      margin-right: 10px;
+      padding: .3em 1em;
+      -webkit-transition: all 0.2s ease-in-out, color 0.1s ease-in-out;
+      -moz-transition: all 0.2s ease-in-out, color 0.1s ease-in-out;
+      -ms-transition: all 0.2s ease-in-out, color 0.1s ease-in-out;
+      -o-transition: all 0.2s ease-in-out, color 0.1s ease-in-out;
+      transition: all 0.2s ease-in-out, color 0.1s ease-in-out; }
+      .course-info ul.tabs li.enabled {
+        color: #fff;
+        background-color: #1d9dd9;
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(100%, #1a8dc3));
+        background-image: -webkit-linear-gradient(top, #1d9dd9, #1a8dc3);
+        background-image: -moz-linear-gradient(top, #1d9dd9, #1a8dc3);
+        background-image: -ms-linear-gradient(top, #1d9dd9, #1a8dc3);
+        background-image: -o-linear-gradient(top, #1d9dd9, #1a8dc3);
+        background-image: linear-gradient(top, #1d9dd9, #1a8dc3); }
+      .course-info ul.tabs li:hover {
+        cursor: pointer;
+        background: #ddd; }
+        .course-info ul.tabs li:hover.enabled {
+          background-color: #1a8dc3;
+          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1a8dc3), color-stop(100%, #177cac));
+          background-image: -webkit-linear-gradient(top, #1a8dc3, #177cac);
+          background-image: -moz-linear-gradient(top, #1a8dc3, #177cac);
+          background-image: -ms-linear-gradient(top, #1a8dc3, #177cac);
+          background-image: -o-linear-gradient(top, #1a8dc3, #177cac);
+          background-image: linear-gradient(top, #1a8dc3, #177cac);
+          color: #fff; }
+  .course-info .tabs-content {
+    margin: 20px; }
+    .course-info .tabs-content section {
+      margin-top: 30px;
+      color: #666; }
+  .course-info .syllabus ul {
+    list-style: none outside;
+    font-size: .9em;
+    line-height: 1.5em; }
+  .course-info .faq ul {
+    list-style: none outside; }
+    .course-info .faq ul li {
+      margin-bottom: 1em; }
+      .course-info .faq ul li p {
+        font-family: "Open Sans", Verdana, Geneva, sans-serif;
+        margin-left: 2em; }
+  .course-info .more-info p {
+    font-family: "Open Sans", Verdana, Geneva, sans-serif;
+    margin-left: 2em; }

lms/static/sass/application.scss

-@import "bourbon/bourbon";
+@import 'bourbon/bourbon';
+@import 'reset';
+@import 'base';
+@import 'base_extends';
+@import 'base_animations';
 
-// 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";
+@import 'shared_forms';
+@import 'shared_footer';
+@import 'shared_header';
 
-// 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";
+@import 'index';
+@import 'dashboard';
+@import 'course';
+@import 'find_courses';
+@import 'course_info';

lms/static/sass/bourbon/_bourbon.scss

@@ -7,6 +7,7 @@
 @import "functions/radial-gradient";
 @import "functions/render-gradients";
 @import "functions/tint-shade";
+@import "functions/transition-property-name";
 
 // CSS3 Mixins
 @import "css3/animation";
@@ -21,6 +22,7 @@
 @import "css3/flex-box";
 @import "css3/inline-block";
 @import "css3/linear-gradient";
+@import "css3/prefixer";
 @import "css3/radial-gradient";
 @import "css3/transform";
 @import "css3/transition";
@@ -29,7 +31,9 @@
 // Addons & other mixins
 @import "addons/button";
 @import "addons/clearfix";
+@import "addons/font-face";
 @import "addons/font-family";
+@import "addons/hide-text";
 @import "addons/html5-input-types";
 @import "addons/position";
 @import "addons/timing-functions";

lms/static/sass/bourbon/addons/_button.scss

@@ -34,6 +34,11 @@
       @include pill($base-color);
     }
   }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 
 
@@ -62,15 +67,16 @@
   @include border-radius (3px);
   @include box-shadow (inset 0 1px 0 0 $inset-shadow);
   color: $color;
-  display: inline;
+  display: inline-block;
   font-size: 11px;
   font-weight: bold;
   @include linear-gradient ($base-color, $stop-gradient);
-  padding: 6px 18px 7px;
+  padding: 7px 18px;
+  text-decoration: none;
   text-shadow: 0 1px 0 $text-shadow;
   -webkit-background-clip: padding-box;
 
-  &:hover {
+  &:hover:not(:disabled) {
     $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
     $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
     $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
@@ -86,7 +92,7 @@
     @include linear-gradient ($base-color-hover, $stop-gradient-hover);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
     $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
 
@@ -133,16 +139,16 @@
   @include border-radius(5px);
   @include box-shadow(inset 0 1px 0 0 $inset-shadow);
   color: $color;
-  display: inline;
+  display: inline-block;
   font-size: 14px;
   font-weight: bold;
   @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
-  padding: 7px 20px 8px;
+  padding: 8px 20px;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 -1px 1px $text-shadow;
 
-  &:hover {
+  &:hover:not(:disabled) {
     $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
     $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
     $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
@@ -162,7 +168,7 @@
                                   $fourth-stop-hover 100%);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
 
     @if $grayscale == true {
@@ -204,17 +210,18 @@
   @include border-radius(16px);
   @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
   color: $color;
-  display: inline;
+  display: inline-block;
   font-size: 11px;
   font-weight: normal;
   line-height: 1;
   @include linear-gradient ($base-color, $stop-gradient);
-  padding: 3px 16px 5px;
+  padding: 5px 16px;
   text-align: center;
+  text-decoration: none;
   text-shadow: 0 -1px 1px $text-shadow;
   -webkit-background-clip: padding-box;
 
-  &:hover {
+  &:hover:not(:disabled) {
     $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
     $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
     $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
@@ -242,7 +249,7 @@
     -webkit-background-clip: padding-box;
   }
 
-  &:active {
+  &:active:not(:disabled) {
     $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
     $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
     $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
@@ -264,4 +271,3 @@
     text-shadow: 0 -1px 1px $text-shadow-active;
   }
 }
-

lms/static/sass/bourbon/addons/_font-face.scss

+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
+  @font-face {
+      font-family: $font-family;
+      src: url('#{$file-path}.eot');
+      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+           url('#{$file-path}.woff') format('woff'),
+           url('#{$file-path}.ttf') format('truetype'),
+           url('#{$file-path}.svg##{$font-family}') format('svg');
+      font-weight: $weight;
+      font-style: $style;
+  }
+}
\ No newline at end of file

lms/static/sass/bourbon/addons/_hide-text.scss

+@mixin hide-text {
+  background-color: transparent;
+  border:           0;
+  color:            transparent;
+  font:             0/0 a;
+  text-shadow:      none;
+}
+
+// A CSS image replacement method that does not require the use of text-indent.
+//
+// Examples
+//
+//   .ir {
+//     @include hide-text;
+//   }

lms/static/sass/bourbon/addons/_position.scss

@@ -12,19 +12,31 @@
 
   position: $position;
 
-  @if not(unitless($top)) {
+  @if $top == auto {
+    top: $top;
+  }
+  @else if not(unitless($top)) {
     top: $top;
   }
 
-  @if not(unitless($right)) {
+  @if $right == auto {
+    right: $right;
+  }
+  @else if not(unitless($right)) {
     right: $right;
   }
 
-  @if not(unitless($bottom)) {
+  @if $bottom == auto {
+    bottom: $bottom;
+  }
+  @else if not(unitless($bottom)) {
     bottom: $bottom;
   }
 
-  @if not(unitless($left)) {
+  @if $left == auto {
+    left: $left;
+  }
+  @else if not(unitless($left)) {
     left: $left;
   }
 }

lms/static/sass/bourbon/css3/_animation.scss

@@ -11,9 +11,7 @@
     $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
                    $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
 
-  -webkit-animation: $full;
-     -moz-animation: $full;
-          animation: $full;
+  @include prefixer(animation, $full);
 }
 
 // Individual Animation Properties
@@ -26,9 +24,7 @@
     $full:  compact($name-1, $name-2, $name-3, $name-4,
                     $name-5, $name-6, $name-7, $name-8, $name-9);
 
-  -webkit-animation-name: $full;
-     -moz-animation-name: $full;
-          animation-name: $full;
+  @include prefixer(animation-name, $full);
 }
 
 
@@ -41,9 +37,7 @@
     $full:  compact($time-1, $time-2, $time-3, $time-4,
                     $time-5, $time-6, $time-7, $time-8, $time-9);
 
-  -webkit-animation-duration: $full;
-     -moz-animation-duration: $full;
-          animation-duration: $full;
+  @include prefixer(animation-duration, $full);
 }
 
 
@@ -57,9 +51,7 @@
     $full:  compact($motion-1, $motion-2, $motion-3, $motion-4,
                     $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
 
-  -webkit-animation-timing-function: $full;
-     -moz-animation-timing-function: $full;
-          animation-timing-function: $full;
+  @include prefixer(animation-timing-function, $full);
 }
 
 
@@ -73,9 +65,7 @@
     $full:  compact($value-1, $value-2, $value-3, $value-4,
                     $value-5, $value-6, $value-7, $value-8, $value-9);
 
-  -webkit-animation-iteration-count: $full;
-     -moz-animation-iteration-count: $full;
-          animation-iteration-count: $full;
+  @include prefixer(animation-iteration-count, $full);
 }
 
 
@@ -89,9 +79,7 @@
     $full:  compact($direction-1, $direction-2, $direction-3, $direction-4,
                     $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
 
-  -webkit-animation-direction: $full;
-     -moz-animation-direction: $full;
-          animation-direction: $full;
+  @include prefixer(animation-direction, $full);
 }
 
 
@@ -105,9 +93,7 @@
     $full:  compact($state-1, $state-2, $state-3, $state-4,
                     $state-5, $state-6, $state-7, $state-8, $state-9);
 
-  -webkit-animation-play-state: $full;
-     -moz-animation-play-state: $full;
-          animation-play-state: $full;
+  @include prefixer(animation-play-state, $full);
 }
 
 
@@ -120,9 +106,7 @@
     $full:  compact($time-1, $time-2, $time-3, $time-4,
                     $time-5, $time-6, $time-7, $time-8, $time-9);
 
-  -webkit-animation-delay: $full;
-     -moz-animation-delay: $full;
-          animation-delay: $full;
+  @include prefixer(animation-delay, $full);
 }
 
 
@@ -137,35 +121,5 @@
     $full:  compact($mode-1, $mode-2, $mode-3, $mode-4,
                     $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
 
-  -webkit-animation-fill-mode: $full;
-     -moz-animation-fill-mode: $full;
-          animation-fill-mode: $full;
+  @include prefixer(animation-fill-mode, $full);
 }
-
-
-// Deprecated
-@mixin animation-basic ($name, $time: 0, $motion: ease) {
-    $length-of-name: length($name);
-    $length-of-time: length($time);
-  $length-of-motion: length($motion);
-
-  @if $length-of-name > 1 {
-    @include animation-name(zip($name));
-  } @else {
-    @include animation-name(    $name);
-  }
-
-  @if $length-of-time > 1 {
-    @include animation-duration(zip($time));
-  } @else {
-    @include animation-duration(    $time);
-  }
-
-  @if $length-of-motion > 1 {
-    @include animation-timing-function(zip($motion));
-  } @else {
-    @include animation-timing-function(    $motion);
-  }
-  @warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
-}
-

lms/static/sass/bourbon/css3/_appearance.scss

 @mixin appearance ($value) {
-  -webkit-appearance: $value;
-     -moz-appearance: $value;
-      -ms-appearance: $value;
-       -o-appearance: $value;
-          appearance: $value;
+  @include prefixer(appearance, $value, webkit, moz, ms, o);
 }

lms/static/sass/bourbon/css3/_background-size.scss

@@ -7,9 +7,5 @@
     $full: compact($length-1, $length-2, $length-3, $length-4,
                    $length-5, $length-6, $length-7, $length-8, $length-9);
 
-  -webkit-background-size: $full;
-     -moz-background-size: $full;
-      -ms-background-size: $full;
-       -o-background-size: $full;
-          background-size: $full;
+@include prefixer(background-size, $full, webkit, moz, ms, o);
 }

lms/static/sass/bourbon/css3/_border-image.scss

-@mixin border-image ($image) {
-  -webkit-border-image: $image;
-     -moz-border-image: $image;
-      -ms-border-image: $image;
-       -o-border-image: $image;
-          border-image: $image;
+@mixin border-image($images) {
+  -webkit-border-image: border-add-prefix($images, webkit);
+     -moz-border-image: border-add-prefix($images, moz);
+       -o-border-image: border-add-prefix($images, o);
+          border-image: border-add-prefix($images);
 }
+
+@function border-add-prefix($images, $vendor: false) {
+  $border-image: ();
+  $images-type:  type-of(nth($images, 1));
+  $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)
+
+  // If input is a gradient
+  @if $images-type == string {
+    @if ($first-var == "linear") or ($first-var == "radial") {
+      @for $i from 2 through length($images) {
+        $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
+        $gradient-args: nth($images, $i);          // Get actual gradient (red, blue)
+        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
+      }
+    }
+
+    // If input is a URL
+    @else {
+      $border-image: $images;
+    }
+  }
+
+  // If input is gradient or url + additional args
+  @else if $images-type == list {
+    @for $i from 1 through length($images) {
+      $type: type-of(nth($images, $i));           // Get type of variable - List or String
+
+      // If variable is a list - Gradient
+      @if $type == list {
+        $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
+      }
+
+      // If variable is a string - Image or number
+      @else if ($type == string) or ($type == number) {
+        $border-image: append($border-image, nth($images, $i));
+      }
+    }
+  }
+  @return $border-image;
+}
+
+//Examples:
+// @include border-image(url("image.png"));
+// @include border-image(url("image.png") 20 stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow));
+// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
+// @include border-image(radial-gradient(top, cover, orange, yellow, orange));

lms/static/sass/bourbon/css3/_border-radius.scss

 @mixin border-radius ($radii) {
-  -webkit-border-radius: $radii;
-     -moz-border-radius: $radii;
-      -ms-border-radius: $radii;
-       -o-border-radius: $radii;
-          border-radius: $radii;
+  @include prefixer(border-radius, $radii);
 }
 
 @mixin border-top-left-radius($radii) {
-  -webkit-border-top-left-radius: $radii;
-     -moz-border-top-left-radius: $radii;
-      -moz-border-radius-topleft: $radii;
-      -ms-border-top-left-radius: $radii;
-       -o-border-top-left-radius: $radii;
-          border-top-left-radius: $radii;
+  -moz-border-radius-topleft: $radii;
+  @include prefixer(border-top-left-radius, $radii);
 }
 
 @mixin border-top-right-radius($radii) {
-  -webkit-border-top-right-radius: $radii;
-     -moz-border-top-right-radius: $radii;
-      -moz-border-radius-topright: $radii;
-      -ms-border-top-right-radius: $radii;
-       -o-border-top-right-radius: $radii;
-          border-top-right-radius: $radii;
+  -moz-border-radius-topright: $radii;
+  @include prefixer(border-top-right-radius, $radii);
 }
 
 @mixin border-bottom-left-radius($radii) {
-  -webkit-border-bottom-left-radius: $radii;
-     -moz-border-bottom-left-radius: $radii;
-      -moz-border-radius-bottomleft: $radii;
-      -ms-border-bottom-left-radius: $radii;
-       -o-border-bottom-left-radius: $radii;
-          border-bottom-left-radius: $radii;
+  -moz-border-radius-bottomleft: $radii;
+  @include prefixer(border-bottom-left-radius, $radii);
 }
 
 @mixin border-bottom-right-radius($radii) {
-  -webkit-border-bottom-right-radius: $radii;
-     -moz-border-bottom-right-radius: $radii;
-      -moz-border-radius-bottomright: $radii;
-      -ms-border-bottom-right-radius: $radii;
-       -o-border-bottom-right-radius: $radii;
-          border-bottom-right-radius: $radii;
+  @include prefixer(border-bottom-right-radius, $radii);
 }
 
 @mixin border-top-radius($radii) {

lms/static/sass/bourbon/css3/_box-shadow.scss

@@ -8,7 +8,5 @@
     $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
                    $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
 
-  -webkit-box-shadow: $full;
-     -moz-box-shadow: $full;
-          box-shadow: $full;
+    @include prefixer(box-shadow, $full);
 }

lms/static/sass/bourbon/css3/_box-sizing.scss

 @mixin box-sizing ($box) {
 //  content-box | border-box | inherit
-  -webkit-box-sizing: $box;
-     -moz-box-sizing: $box;
-          box-sizing: $box;
+  @include prefixer(box-sizing, $box);
 }

lms/static/sass/bourbon/css3/_columns.scss

 @mixin columns($arg: auto) {
 // <column-count> || <column-width>
-  -webkit-columns: $arg;
-     -moz-columns: $arg;
-          columns: $arg;
+  @include prefixer(columns, $arg);
 }
 
 @mixin column-count($int: auto) {
 // auto || integer
-  -webkit-column-count: $int;
-     -moz-column-count: $int;
-          column-count: $int;
+  @include prefixer(column-count, $int);
 }
 
 @mixin column-gap($length: normal) {
 // normal || length
-  -webkit-column-gap: $length;
-     -moz-column-gap: $length;
-          column-gap: $length;
+  @include prefixer(column-gap, $length);
 }
 
 @mixin column-fill($arg: auto) {
 // auto || length
-  -webkit-columns-fill: $arg;
-     -moz-columns-fill: $arg;
-          columns-fill: $arg;
+  @include prefixer(columns-fill, $arg);
 }
 
 @mixin column-rule($arg) {
 // <border-width> || <border-style> || <color>
-  -webkit-column-rule: $arg;
-     -moz-column-rule: $arg;
-          column-rule: $arg;
+  @include prefixer(column-rule, $arg);
 }
 
 @mixin column-rule-color($color) {
-  -webkit-column-rule-color: $color;
-     -moz-column-rule-color: $color;
-          column-rule-color: $color;
+  @include prefixer(column-rule-color, $color);
 }
 
 @mixin column-rule-style($style: none) {
 // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
-  -webkit-column-rule-style: $style;
-     -moz-column-rule-style: $style;
-          column-rule-style: $style;
+  @include prefixer(column-rule-style, $style);
 }
 
 @mixin column-rule-width ($width: none) {
-  -webkit-column-rule-width: $width;
-     -moz-column-rule-width: $width;
-          column-rule-width: $width;
+  @include prefixer(column-rule-width, $width);
 }
 
 @mixin column-span($arg: none) {
 // none || all
-  -webkit-column-span: $arg;
-     -moz-column-span: $arg;
-          column-span: $arg;
+  @include prefixer(column-span, $arg);
 }
 
 @mixin column-width($length: auto) {
 // auto || length
-  -webkit-column-width: $length;
-     -moz-column-width: $length;
-          column-width: $length;
+  @include prefixer(column-width, $length);
 }

lms/static/sass/bourbon/css3/_flex-box.scss

@@ -16,52 +16,37 @@
 
 @mixin box-orient($orient: inline-axis) {
 // horizontal|vertical|inline-axis|block-axis|inherit
-  -webkit-box-orient: $orient;
-     -moz-box-orient: $orient;
-          box-orient: $orient;
+  @include prefixer(box-orient, $orient);
 }
 
 @mixin box-pack($pack: start) {
 // start|end|center|justify
-  -webkit-box-pack: $pack;
-     -moz-box-pack: $pack;
-          box-pack: $pack;
+  @include prefixer(box-pack, $pack);
 }
 
 @mixin box-align($align: stretch) {
 // start|end|center|baseline|stretch
-  -webkit-box-align: $align;
-     -moz-box-align: $align;
-          box-align: $align;
+  @include prefixer(box-align, $align);
 }
 
 @mixin box-direction($direction: normal) {
 // normal|reverse|inherit
-  -webkit-box-direction: $direction;
-     -moz-box-direction: $direction;
-          box-direction: $direction;
+  @include prefixer(box-direction, $direction);
 }
+
 @mixin box-lines($lines: single) {
 // single|multiple
-  -webkit-box-lines: $lines;
-     -moz-box-lines: $lines;
-          box-lines: $lines;
+  @include prefixer(box-lines, $lines);
 }
 
-@mixin box-ordinal-group($integer: 1) {
-  -webkit-box-ordinal-group: $integer;
-     -moz-box-ordinal-group: $integer;
-          box-ordinal-group: $integer;
+@mixin box-ordinal-group($int: 1) {
+  @include prefixer(box-ordinal-group, $int);
 }
 
 @mixin box-flex($value: 0.0) {
-  -webkit-box-flex: $value;
-     -moz-box-flex: $value;
-          box-flex: $value;
+  @include prefixer(box-flex, $value);
 }
 
-@mixin box-flex-group($integer: 1) {
-  -webkit-box-flex-group: $integer;
-     -moz-box-flex-group: $integer;
-          box-flex-group: $integer;
+@mixin box-flex-group($int: 1) {
+  @include prefixer(box-flex-group, $int);
 }

lms/static/sass/bourbon/css3/_inline-block.scss

 // Legacy support for inline-block in IE7 (maybe IE6)
 @mixin inline-block {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
   display: inline-block;
   vertical-align: baseline;
   zoom: 1;

lms/static/sass/bourbon/css3/_linear-gradient.scss

@@ -3,6 +3,8 @@
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
                        $G9: false, $G10: false,
+                       $deprecated-pos1: left top,
+                       $deprecated-pos2: left bottom,
                        $fallback: false) {
   // Detect what type of value exists in $pos
   $pos-type: type-of(nth($pos, 1));
@@ -25,7 +27,7 @@
   }
 
   background-color: $fallback-color;
-  background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
+  background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
   background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
   background-image:     -moz-linear-gradient($pos, $full);
   background-image:      -ms-linear-gradient($pos, $full);

lms/static/sass/bourbon/css3/_prefixer.scss

+@mixin prefixer ($property, $value,
+                 $webkit: true,
+                    $moz: true,
+                     $ms: false,
+                      $o: false,
+                   $spec: true) {
+  @if $webkit { -webkit-#{$property}: $value; }
+  @if $moz    {    -moz-#{$property}: $value; }
+  @if $ms     {     -ms-#{$property}: $value; }
+  @if $o      {      -o-#{$property}: $value; }
+  @if $spec   {         #{$property}: $value; }
+}

lms/static/sass/bourbon/css3/_radial-gradient.scss

 // Requires Sass 3.1+
-@mixin radial-gradient($pos, $shape-size,
-                       $G1,        $G2,
+@mixin radial-gradient($G1,        $G2,
                        $G3: false, $G4: false,
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
                        $G9: false, $G10: false,
+                       $pos: 50% 50%,
+                       $shape-size: ellipse cover,
+                       $deprecated-pos1: center center,
+                       $deprecated-pos2: center center,
+                       $deprecated-radius1: 0,
+                       $deprecated-radius2: 460,
                        $fallback: false) {
 
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+
+    @if ($pos-type != color) or ($first-val != "transparent") {
+      @if ($pos-type == number)
+      or ($first-val == "center")
+      or ($first-val == "top")
+      or ($first-val == "right")
+      or ($first-val == "bottom")
+      or ($first-val == "left") {
+
+        $pos: $value;
+
+        @if $pos == $G1 {
+          $G1: false;
+        }
+      }
+
+      @else if
+         ($first-val == "ellipse")
+      or ($first-val == "circle")
+      or ($first-val == "closest-side")
+      or ($first-val == "closest-corner")
+      or ($first-val == "farthest-side")
+      or ($first-val == "farthest-corner")
+      or ($first-val == "contain")
+      or ($first-val == "cover") {
+
+        $shape-size: $value;
+
+        @if $value == $G1 {
+          $G1: false;
+        }
+
+        @else if $value == $G2 {
+          $G2: false;
+        }
+      }
+    }
+  }
+
   $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
-  // Set $G1 as the default fallback color
   $fallback-color: nth($G1, 1);
 
-  // If $fallback is a color use that color as the fallback color
   @if (type-of($fallback) == color) or ($fallback == "transparent") {
     $fallback-color: $fallback;
   }
 
   background-color:  $fallback-color;
-  background-image:          deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
+  background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
   background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
   background-image:     -moz-radial-gradient($pos, $shape-size, $full);
   background-image:      -ms-radial-gradient($pos, $shape-size, $full);

lms/static/sass/bourbon/css3/_transform.scss

 @mixin transform($property: none) {
 //  none | <transform-function>
-  -webkit-transform: $property;
-     -moz-transform: $property;
-      -ms-transform: $property;
-       -o-transform: $property;
-          transform: $property;
+  @include prefixer(transform, $property, webkit, moz, ms, o);
 }
 
 @mixin transform-origin($axes: 50%) {
 // x-axis - left | center | right  | length | %
 // y-axis - top  | center | bottom | length | %
 // z-axis -                          length
-  -webkit-transform-origin: $axes;
-     -moz-transform-origin: $axes;
-      -ms-transform-origin: $axes;
-       -o-transform-origin: $axes;
-          transform-origin: $axes;
+  @include prefixer(transform-origin, $axes, webkit, moz, ms, o);
 }

lms/static/sass/bourbon/css3/_transition.scss

@@ -3,40 +3,20 @@
 //          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
 //          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
 
-@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
-
-  // Detect # of args passed into each variable
-  $length-of-property:        length($property);
-  $length-of-duration:        length($duration);
-  $length-of-timing-function: length($timing-function);
-  $length-of-delay:           length($delay);
-
-  @if $length-of-property > 1 {
-    @include transition-property(zip($property)); }
-  @else {
-    @include transition-property(    $property);
-  }
-
-  @if $length-of-duration > 1 {
-    @include transition-duration(zip($duration)); }
-  @else {
-    @include transition-duration(    $duration);
-  }
-
-  @if $length-of-timing-function > 1 {
-    @include transition-timing-function(zip($timing-function)); }
-  @else {
-    @include transition-timing-function(    $timing-function);
-  }
+@mixin transition ($prop-1: all 0.15s ease-out 0,
+  $prop-2: false, $prop-3: false,
+  $prop-4: false, $prop-5: false,
+  $prop-6: false, $prop-7: false,
+  $prop-8: false, $prop-9: false)
+  {
+    $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
+                   $prop-6, $prop-7, $prop-8, $prop-9);
 
-  @if $length-of-delay > 1 {
-    @include transition-delay(zip($delay)); }
-  @else {
-    @include transition-delay(    $delay);
-  }
+  @include prefixer(transition, $full, webkit, moz, ms, o);
 }
 
 
+
 @mixin transition-property ($prop-1: all,
   $prop-2: false, $prop-3: false,
   $prop-4: false, $prop-5: false,
@@ -46,11 +26,11 @@
     $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
                    $prop-6, $prop-7, $prop-8, $prop-9);
 
-  -webkit-transition-property: $full;
-     -moz-transition-property: $full;
-      -ms-transition-property: $full;
-       -o-transition-property: $full;
-          transition-property: $full;
+   -webkit-transition-property: transition-property-names($full, 'webkit');
+      -moz-transition-property: transition-property-names($full, 'moz');
+       -ms-transition-property: transition-property-names($full, 'ms');
+        -o-transition-property: transition-property-names($full, 'o');
+           transition-property: transition-property-names($full, false);
 }
 
 @mixin transition-duration ($time-1: 0,
@@ -62,11 +42,7 @@
     $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
                    $time-6, $time-7, $time-8, $time-9);
 
-  -webkit-transition-duration: $full;
-     -moz-transition-duration: $full;
-      -ms-transition-duration: $full;
-       -o-transition-duration: $full;
-          transition-duration: $full;
+  @include prefixer(transition-duration, $full, webkit, moz, ms, o);
 }
 
 @mixin transition-timing-function ($motion-1: ease,
@@ -79,11 +55,7 @@
                    $motion-6, $motion-7, $motion-8, $motion-9);
 
 // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
-  -webkit-transition-timing-function: $full;
-     -moz-transition-timing-function: $full;
-      -ms-transition-timing-function: $full;
-       -o-transition-timing-function: $full;
-          transition-timing-function: $full;
+  @include prefixer(transition-timing-function, $full, webkit, moz, ms, o);
 }
 
 @mixin transition-delay ($time-1: 0,
@@ -95,10 +67,6 @@
     $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
                    $time-6, $time-7, $time-8, $time-9);
 
-  -webkit-transition-delay: $full;
-     -moz-transition-delay: $full;
-      -ms-transition-delay: $full;
-       -o-transition-delay: $full;
-          transition-delay: $full;
+  @include prefixer(transition-transition-delay, $full, webkit, moz, ms, o);
 }
 

lms/static/sass/bourbon/css3/_user-select.scss

 @mixin user-select($arg: none) {
-  -webkit-user-select: $arg;
-     -moz-user-select: $arg;
-      -ms-user-select: $arg;
-          user-select: $arg;
+  @include prefixer(user-select, $arg, webkit, moz, ms);
 }

lms/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss

 // Render Deprecated Webkit Gradient - Linear || Radial
 //************************************************************************//
-@function deprecated-webkit-gradient($type, $full) {
+@function deprecated-webkit-gradient($type,
+                                     $deprecated-pos1, $deprecated-pos2,
+                                     $full,
+                                     $deprecated-radius1: false, $deprecated-radius2: false) {
   $gradient-list: ();
   $gradient: false;
   $full-length: length($full);
@@ -14,23 +17,28 @@
       $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
       $gradient-list: join($gradient-list, $color-stop, comma);
     }
+
     @else {
       @if $i == $full-length {
         $percentage: 100%;
       }
+
       @else {
         $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
       }
+
       $color-stop: color-stop(unquote($percentage), $gradient);
       $gradient-list: join($gradient-list, $color-stop, comma);
     }
   }
 
   @if $type == radial {
-    $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
+    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
   }
+
   @else if $type == linear {
-    $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
+    $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
   }
+
   @return $gradient;
 }

lms/static/sass/bourbon/functions/_radial-gradient.scss

 // This function is required and used by the background-image mixin.
-@function radial-gradient($pos, $shape-size,
-                       $G1,        $G2,
+@function radial-gradient($G1,        $G2,
                        $G3: false, $G4: false,
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
+                       $G9: false, $G10: false,
+                       $pos: 50% 50%,
+                       $shape-size: ellipse cover,
+                       $deprecated-pos1: center center,
+                       $deprecated-pos2: center center,
+                       $deprecated-radius1: 0,
+                       $deprecated-radius2: 50,
+                       $fallback: false) {
+
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+
+    @if ($pos-type != color) or ($first-val != "transparent") {
+      @if ($pos-type == number)
+      or ($first-val == "center")
+      or ($first-val == "top")
+      or ($first-val == "right")
+      or ($first-val == "bottom")
+      or ($first-val == "left") {
+
+        $pos: $value;
+
+        @if $pos == $G1 {
+          $G1: false;
+        }
+      }
+
+      @else if
+         ($first-val == "ellipse")
+      or ($first-val == "circle")
+      or ($first-val == "closest-side")
+      or ($first-val == "closest-corner")
+      or ($first-val == "farthest-side")
+      or ($first-val == "farthest-corner")
+      or ($first-val == "contain")
+      or ($first-val == "cover") {
+
+        $shape-size: $value;
+
+        @if $value == $G1 {
+          $G1: false;
+        }
+
+        @else if $value == $G2 {
+          $G2: false;
+        }
+      }
+    }
+  }
 
   $type: radial;
   $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
@@ -12,4 +60,3 @@
 
   @return $type-gradient;
 }
-

lms/static/sass/bourbon/functions/_transition-property-name.scss

+// Return vendor-prefixed property names if appropriate
+// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
+//************************************************************************//
+@function transition-property-names($props, $vendor: false) {
+	$new-props: ();
+	
+	@each $prop in $props {
+		$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+	}
+
+	@return $new-props;
+}
+
+@function transition-property-name($prop, $vendor: false) {
+	// put other properties that need to be prefixed here aswell
+	@if $vendor and $prop == transform {
+		@return unquote('-'+$vendor+'-'+$prop);
+	}
+	@else {
+		@return $prop;
+	}
+}
\ No newline at end of file

lms/static/sass/bourbon/lib/bourbon.rb

 require "bourbon/generator"
 
 module Bourbon
-  if defined?(Rails)
+  if defined?(Rails) && defined?(Rails::Engine)
     class Engine < ::Rails::Engine
       require 'bourbon/engine'
     end

lms/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb

@@ -4,8 +4,9 @@ module Bourbon::SassExtensions::Functions::Compact
   def compact(*args)
     sep = :comma
     if args.size == 1 && args.first.is_a?(Sass::Script::List)
-      args = args.first.value
-      sep = args.first.separator
+      list = args.first
+      args = list.value
+      sep = list.separator
     end
     Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
   end

lms/static/sass/screen.css

+/* HTML5 Boilerplate  */
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
+  display: block; }
+
+audio, canvas, video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1; }
+
+audio:not([controls]) {
+  display: none; }
+
+[hidden] {
+  display: none; }
+
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%; }
+
+html, button, input, select, textarea {
+  font-family: sans-serif;
+  color: #222; }
+
+body {
+  margin: 0;
+  font-size: 1em;
+  line-height: 1.4; }
+
+::-moz-selection {
+  background: #fe57a1;
+  color: #fff;
+  text-shadow: none; }
+
+::selection {
+  background: #fe57a1;
+  color: #fff;
+  text-shadow: none; }
+
+a {
+  color: #00e; }
+
+a:visited {
+  color: #551a8b; }
+
+a:hover {
+  color: #06e; }
+
+a:focus {
+  outline: thin dotted; }
+
+a:hover, a:active {
+  outline: 0; }
+
+abbr[title] {
+  border-bottom: 1px dotted; }
+
+b, strong {
+  font-weight: bold; }
+
+blockquote {
+  margin: 1em 40px; }
+
+dfn {
+  font-style: italic; }
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0; }
+
+ins {
+  background: #ff9;
+  color: #000;
+  text-decoration: none; }
+
+mark {
+  background: #ff0;
+  color: #000;
+  font-style: italic;
+  font-weight: bold; }
+
+pre, code, kbd, samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em; }
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word; }
+
+q {
+  quotes: none; }
+
+q:before, q:after {
+  content: "";
+  content: none; }
+
+small {
+  font-size: 85%; }
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+ul, ol {
+  margin: 1em 0;
+  padding: 0 0 0 40px; }
+
+dd {
+  margin: 0 0 0 40px; }
+
+nav ul, nav ol {
+  list-style: none;
+  list-style-image: none;
+  margin: 0;
+  padding: 0; }
+
+img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+  vertical-align: middle; }
+
+svg:not(:root) {
+  overflow: hidden; }
+
+figure {
+  margin: 0; }
+
+form {
+  margin: 0; }
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0; }
+
+label {
+  cursor: pointer; }
+
+legend {
+  border: 0;
+  *margin-left: -7px;
+  padding: 0;
+  white-space: normal; }
+
+button, input, select, textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle; }
+
+button, input {
+  line-height: normal; }
+
+button, input[type="button"], input[type="reset"], input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+  *overflow: visible; }
+
+button[disabled], input[disabled] {
+  cursor: default; }
+
+input[type="checkbox"], input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  *width: 13px;
+  *height: 13px; }
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box; }
+
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none; }
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+  border: 0;
+  padding: 0; }
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical; }
+
+input:invalid, textarea:invalid {
+  background-color: #f0dddd; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+td {
+  vertical-align: top; }
+
+.chromeframe {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: black;
+  padding: 0.2em 0; }
+
+.ir {
+  display: block;
+  border: 0;
+  text-indent: -999em;
+  overflow: hidden;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  text-align: left;
+  direction: ltr;
+  *line-height: 0; }
+
+.ir br {
+  display: none; }
+
+.hidden {
+  display: none !important;
+  visibility: hidden; }
+
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px; }
+
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto; }
+
+.invisible {
+  visibility: hidden; }
+
+.clearfix:before, .clearfix:after {
+  content: "";
+  display: table; }
+
+.clearfix:after {
+  clear: both; }
+
+.clearfix {
+  *zoom: 1; }
+
+@media print {
+  * {
+    background: transparent !important;
+    color: black !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+    filter: none !important;
+    -ms-filter: none !important; }
+
+  a, a:visited {
+    text-decoration: underline; }
+
+  a[href]:after {
+    content: " (" attr(href) ")"; }
+
+  abbr[title]:after {
+    content: " (" attr(title) ")"; }
+
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
+    content: ""; }
+
+  pre, blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid; }
+
+  thead {
+    display: table-header-group; }
+
+  tr, img {
+    page-break-inside: avoid; }
+
+  img {
+    max-width: 100% !important; }
+
+  @page {
+    margin: 0.5cm; }
+
+  p, h2, h3 {
+    orphans: 3;
+    widows: 3; }
+
+  h2, h3 {
+    page-break-after: avoid; } }
+h1, h2, h3, h4, h5, h6 {
+  color: #3c3c3c;
+  margin: 0px; }
+
+p {
+  color: #a0a0a0;
+  margin: 0px; }
+
+a:link, a:visited {
+  color: #1d9dd9;
+  text-decoration: none; }
+  a:link:hover, a:visited:hover {
+    color: #43b2e6; }
+
+body {
+  background: white;
+  margin: 0px; }
+
+.container {
+  zoom: 1;
+  margin: 0 auto;
+  max-width: 1200px;
+  width: 100%; }
+  .container:before, .container:after {
+    content: "";
+    display: table; }
+  .container:after {
+    clear: both; }
+
+header.app {
+  border-bottom: 1px solid #c8c8c8;
+  background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(-90deg, #f5f5f5, #e6e6e6, false, false, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  height: 55px;
+  width: 100%; }
+  header.app nav {
+    zoom: 1;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0px 10px;
+    width: 100%; }
+    header.app nav:before, header.app nav:after {
+      content: "";
+      display: table; }
+    header.app nav:after {
+      clear: both; }
+  header.app a.logo {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    display: block;
+    float: left;
+    height: 100%;
+    margin: 15px 15px 0px 0px; }
+  header.app h1 {
+    border-left: 1px solid #c8c8c8;
+    font: bold 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
+    float: left;
+    height: 15px;
+    margin-top: 10px;
+    padding: 10px 18px; }
+  header.app ol {
+    float: left;
+    font-size: 0px; }
+    header.app ol.user {
+      float: right; }
+    header.app ol > li {
+      border-left: 1px solid #c8c8c8;
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto;
+      margin-top: 10px;
+      padding: 0px 8px;
+      position: relative;
+      vertical-align: bottom; }
+      header.app ol > li:last-child {
+        border-right: 1px solid #c8c8c8; }
+      header.app ol > li a {
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        -ms-border-radius: 3px;
+        -o-border-radius: 3px;
+        border-radius: 3px;
+        color: #a0a0a0;
+        display: block;
+        font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
+        height: 15px;
+        padding: 10px;
+        text-decoration: none;
+        text-transform: uppercase;
+        text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
+        header.app ol > li a.user-dashboard {
+          padding: 10px 10px 10px 40px; }
+          @media screen and (max-width: 768px) {
+            header.app ol > li a.user-dashboard {
+              font-size: 0px;
+              padding: 10px 0px;
+              width: 38px; } }
+          header.app ol > li a.user-dashboard .avatar {
+            background: #dcdcdc;
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            -ms-border-radius: 3px;
+            -o-border-radius: 3px;
+            border-radius: 3px;
+            border: 1px solid #b4b4b4;
+            -webkit-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+            -moz-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+            box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+            height: 22px;
+            display: -moz-inline-box;
+            -moz-box-orient: vertical;
+            display: inline-block;
+            vertical-align: baseline;
+            zoom: 1;
+            *display: inline;
+            *vertical-align: auto;
+            left: 15px;
+            overflow: hidden;
+            position: absolute;
+            top: 5px;
+            width: 22px; }
+            header.app ol > li a.user-dashboard .avatar::after {
+              background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+              background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+              background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+              background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+              background-image: compact(linear, compact(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%, false, false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+              content: "";
+              display: block;
+              height: 100%;
+              position: absolute;
+              right: 0px;
+              top: 0px;
+              width: 100%; }
+            header.app ol > li a.user-dashboard .avatar img {
+              -webkit-border-radius: 4px;
+              -moz-border-radius: 4px;
+              -ms-border-radius: 4px;
+              -o-border-radius: 4px;
+              border-radius: 4px;
+              display: block;
+              min-height: 100%;
+              min-width: 100%;
+              height: 100%; }
+        header.app ol > li a:hover {
+          background: #dcdcdc;
+          color: #3c3c3c; }
+        header.app ol > li a.active {
+          background: #dcdcdc;
+          color: #3c3c3c; }
+      header.app ol > li ol.user-options {
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        -ms-border-radius: 4px;
+        -o-border-radius: 4px;
+        border-radius: 4px;
+        -webkit-box-shadow: compact(0 1px 6px 0 rgba(0, 0, 0, 0.3), false, false, false, false, false, false, false, false);
+        -moz-box-shadow: compact(0 1px 6px 0 rgba(0, 0, 0, 0.3), false, false, false, false, false, false, false, false);
+        box-shadow: compact(0 1px 6px 0 rgba(0, 0, 0, 0.3), false, false, false, false, false, false, false, false);
+        border: 1px solid #c8c8c8;
+        background: #dcdcdc;
+        display: none;
+        right: 4px;
+        padding: 5px 10px;
+        position: absolute;
+        top: 50px;
+        width: 170px;
+        z-index: 3; }
+        header.app ol > li ol.user-options.expanded {
+          display: block; }
+        header.app ol > li ol.user-options::before {
+          background: transparent;
+          border-top: 8px solid #dcdcdc;
+          border-right: 8px solid #dcdcdc;
+          border-bottom: 8px solid transparent;
+          border-left: 8px solid transparent;
+          -webkit-box-shadow: compact(1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8, false, false, false, false, false, false, false);
+          -moz-box-shadow: compact(1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8, false, false, false, false, false, false, false);
+          box-shadow: compact(1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8, false, false, false, false, false, false, false);
+          content: "";
+          display: block;
+          height: 0px;
+          position: absolute;
+          -webkit-transform: rotate(-45deg);
+          -moz-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
+          -o-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+          right: 10px;
+          top: -7px;
+          width: 0px; }
+        header.app ol > li ol.user-options li {
+          border-top: 1px solid #c8c8c8;
+          border-right: none;
+          border-bottom: none;
+          border-left: none;
+          margin: 0px;
+          padding: 0px;
+          width: 100%; }
+          header.app ol > li ol.user-options li:first-child {
+            border: none; }
+          header.app ol > li ol.user-options li a {
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            display: block;
+            font: normal 12px/16px "Open Sans", Verdana, Geneva, sans-serif;
+            height: auto;
+            margin: 5px 0px;
+            overflow: hidden;
+            padding: 5px;
+            text-overflow: ellipsis;
+            -webkit-transition-property: compact(padding, false, false, false, false, false, false, false, false);
+            -moz-transition-property: compact(padding, false, false, false, false, false, false, false, false);
+            -ms-transition-property: compact(padding, false, false, false, false, false, false, false, false);
+            -o-transition-property: compact(padding, false, false, false, false, false, false, false, false);
+            transition-property: compact(padding, false, false, false, false, false, false, false, false);
+            -webkit-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false);
+            -moz-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false);
+            -ms-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false);
+            -o-transition-duration: compact(0.1s, false, false, false, false, false, false, false, false);
+            transition-duration: compact(0.1s, false, false, false, false, false, false, false, false);
+            -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+            -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+            -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+            -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+            transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+            -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+            -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+            -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+            -o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+            transition-delay: compact(0, false, false, false, false, false, false, false, false);
+            white-space: nowrap;
+            width: 100%; }
+            header.app ol > li ol.user-options li a:hover {
+              background: white;
+              padding: 5px 8px; }
+
+.faded-hr-divider {
+  background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  height: 1px;
+  width: 100%; }
+
+.faded-vertical-divider, .find-courses > header .universities span.divider {
+  background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  background-image: compact(linear, compact(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0), false, false, false, false, false), false, false, false, false, false, false, false, false, false);
+  height: 100%;
+  width: 1px; }
+
+.animation-apear {
+  -webkit-animation: compact(apear 1.5s ease-out, false, false, false, false, false, false, false, false);
+  -moz-animation: compact(apear 1.5s ease-out, false, false, false, false, false, false, false, false);
+  animation: compact(apear 1.5s ease-out, false, false, false, false, false, false, false, false);
+  -webkit-animation-fill-mode: compact(forward, false, false, false, false, false, false, false, false);
+  -moz-animation-fill-mode: compact(forward, false, false, false, false, false, false, false, false);
+  animation-fill-mode: compact(forward, false, false, false, false, false, false, false, false); }
+
+@-webkit-keyframes apear {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@-moz-keyframes apear {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@keyframes apear {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+.home {
+  margin-top: 30px; }
+  .home > header h1 {
+    font: bold 24px/26px "Open Sans", Verdana, Geneva, sans-serif;
+    text-align: center; }
+
+.dashboard {
+  zoom: 1;
+  margin: 30px 10px; }
+  .dashboard:before, .dashboard:after {
+    content: "";
+    display: table; }
+  .dashboard:after {
+    clear: both; }
+
+.sidebar {
+  background: #f0f0f0;
+  float: left;
+  margin-right: 2.513%;
+  width: 23.116%; }
+  @media screen and (max-width: 768px) {
+    .sidebar {
+      float: none;
+      margin: 0 0 30px 0;
+      width: 100%; } }
+  .sidebar header.profile .user-info {
+    zoom: 1;
+    padding: 10px; }
+    .sidebar header.profile .user-info:before, .sidebar header.profile .user-info:after {
+      content: "";
+      display: table; }
+    .sidebar header.profile .user-info:after {
+      clear: both; }
+    .sidebar header.profile .user-info .avatar {
+      background: #dcdcdc;
+      border: 1px solid #b4b4b4;
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      -ms-border-radius: 4px;
+      -o-border-radius: 4px;
+      border-radius: 4px;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      margin: 0 0 15px 0;
+      max-width: 100%;
+      overflow: hidden; }
+      @media screen and (max-width: 768px) {
+        .sidebar header.profile .user-info .avatar {
+          float: left;
+          margin: 0px;
+          margin-right: 2.513%;
+          width: 23.116%; } }
+      .sidebar header.profile .user-info .avatar img {
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        -ms-border-radius: 4px;
+        -o-border-radius: 4px;
+        border-radius: 4px;
+        display: block;
+        max-width: 100%; }
+    @media screen and (max-width: 768px) {
+      .sidebar header.profile .user-info .info {
+        float: left;
+        width: 74.372%; } }
+    .sidebar header.profile .user-info .info h2 {
+      border-bottom: 1px solid #c8c8c8;
+      -webkit-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.4), false, false, false, false, false, false, false, false);
+      -moz-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.4), false, false, false, false, false, false, false, false);
+      box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.4), false, false, false, false, false, false, false, false);
+      font: bold 18px/20px "Open Sans", Verdana, Geneva, sans-serif;
+      margin-bottom: 15px;
+      overflow: hidden;
+      padding-bottom: 15px;
+      text-align: center;
+      text-wrap: nowrap;
+      text-overflow: ellipsis; }
+      @media screen and (max-width: 768px) {
+        .sidebar header.profile .user-info .info h2 {
+          text-align: left; } }
+    .sidebar header.profile .user-info .info > ul {
+      zoom: 1;
+      margin: 0px;
+      padding: 0 0 10px 0; }
+      .sidebar header.profile .user-info .info > ul:before, .sidebar header.profile .user-info .info > ul:after {
+        content: "";
+        display: table; }
+      .sidebar header.profile .user-info .info > ul:after {
+        clear: both; }
+      @media screen and (max-width: 768px) {
+        .sidebar header.profile .user-info .info > ul {
+          padding: 0px; } }
+      .sidebar header.profile .user-info .info > ul li {
+        list-style: none;
+        margin-bottom: 10px; }
+        @media screen and (max-width: 768px) {
+          .sidebar header.profile .user-info .info > ul li {
+            float: left;
+            margin-right: 10px; } }
+        .sidebar header.profile .user-info .info > ul li:last-child {
+          margin-bottom: 0px; }
+        .sidebar header.profile .user-info .info > ul li h3 {
+          color: #a0a0a0;
+          font: bold 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
+          text-shadow: 0 1px rgba(255, 255, 255, 0.8); }
+          .sidebar header.profile .user-info .info > ul li h3 span {
+            font-weight: normal;
+            text-transform: none; }
+
+.courses {
+  float: left;
+  width: 74.372%; }
+  @media only screen and (max-width: 768px) {
+    .courses {
+      float: none;
+      width: 100%; } }
+  .courses nav.course-filters {
+    background: #e6e6e6;
+    margin-bottom: 30px;
+    position: relative; }
+    .courses nav.course-filters ol.filters {
+      zoom: 1; }
+      .courses nav.course-filters ol.filters:before, .courses nav.course-filters ol.filters:after {
+        content: "";
+        display: table; }
+      .courses nav.course-filters ol.filters:after {
+        clear: both; }
+      .courses nav.course-filters ol.filters li {
+        border-right: 1px solid #c8c8c8;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        list-style: none;
+        float: left;
+        padding: 15px 10px;
+        width: 25%;
+        text-align: center; }
+        .courses nav.course-filters ol.filters li:last-child {
+          border: none; }
+        .courses nav.course-filters ol.filters li:hover {
+          background: #dcdcdc;
+          cursor: pointer; }
+        .courses nav.course-filters ol.filters li.selected {
+          background: #dcdcdc; }
+        .courses nav.course-filters ol.filters li h2 {
+          font: normal 11px/13px "Open Sans", Verdana, Geneva, sans-serif;
+          text-transform: none; }
+        .courses nav.course-filters ol.filters li span.count {
+          margin: 5px 0 0 0;
+          display: block; }
+  .courses .course {
+    background: #f0f0f0;
+    border: 1px solid #dcdcdc;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -o-border-radius: 4px;
+    border-radius: 4px;
+    font-size: 0px;
+    min-height: 100px;
+    margin-bottom: 20px;
+    padding: 10px;
+    -webkit-transition-property: compact(all, false, false, false, false, false, false, false, false);
+    -moz-transition-property: compact(all, false, false, false, false, false, false, false, false);
+    -ms-transition-property: compact(all, false, false, false, false, false, false, false, false);
+    -o-transition-property: compact(all, false, false, false, false, false, false, false, false);
+    transition-property: compact(all, false, false, false, false, false, false, false, false);
+    -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+    -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+    -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+    -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+    transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+    -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+    -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+    -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+    -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+    transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+    -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+    -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+    -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+    -o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+    transition-delay: compact(0, false, false, false, false, false, false, false, false); }
+    .courses .course:last-child {
+      margin-bottom: none; }
+    .courses .course > a {
+      zoom: 1;
+      display: block;
+      position: relative; }
+      .courses .course > a:before, .courses .course > a:after {
+        content: "";
+        display: table; }
+      .courses .course > a:after {
+        clear: both; }
+    .courses .course .cover {
+      background: #e1e1e1;
+      border: 1px solid #969696;
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      -ms-border-radius: 4px;
+      -o-border-radius: 4px;
+      border-radius: 4px;
+      -webkit-box-shadow: compact(0 0 8px 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false);
+      -moz-box-shadow: compact(0 0 8px 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false);
+      box-shadow: compact(0 0 8px 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false);
+      float: left;
+      height: 100px;
+      margin: 0px;
+      opacity: 0.8;
+      overflow: hidden;
+      position: relative;
+      -webkit-transition-property: compact(all, false, false, false, false, false, false, false, false);
+      -moz-transition-property: compact(all, false, false, false, false, false, false, false, false);
+      -ms-transition-property: compact(all, false, false, false, false, false, false, false, false);
+      -o-transition-property: compact(all, false, false, false, false, false, false, false, false);
+      transition-property: compact(all, false, false, false, false, false, false, false, false);
+      -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+      -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+      -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+      -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+      transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+      -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+      -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+      -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+      -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+      transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+      -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+      -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+      -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+      -o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+      transition-delay: compact(0, false, false, false, false, false, false, false, false);
+      width: 100px; }
+      @media only screen and (max-width: 320px) {
+        .courses .course .cover {
+          display: none; } }
+      .courses .course .cover .shade {
+        background: rgba(0, 0, 0, 0.3);
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        -ms-border-radius: 4px;
+        -o-border-radius: 4px;
+        border-radius: 4px;
+        bottom: 0px;
+        content: "";
+        display: block;
+        left: 0px;
+        opacity: 0;
+        position: absolute;
+        top: 0px;
+        -webkit-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -moz-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -ms-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -o-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        right: 0px; }
+      .courses .course .cover .arrow {
+        border-top: 1px solid;
+        border-left: 1px solid;
+        border-color: white;
+        -webkit-box-shadow: compact(inset 1px 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+        -moz-box-shadow: compact(inset 1px 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+        box-shadow: compact(inset 1px 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+        content: "";
+        display: block;
+        height: 55px;
+        left: 40px;
+        opacity: 0;
+        position: absolute;
+        top: 23px;
+        -webkit-transform: rotate(-45deg);
+        -moz-transform: rotate(-45deg);
+        -ms-transform: rotate(-45deg);
+        -o-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+        -webkit-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -moz-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -ms-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -o-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        width: 55px; }
+      .courses .course .cover img {
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        -ms-border-radius: 4px;
+        -o-border-radius: 4px;
+        border-radius: 4px;
+        display: block;
+        min-height: 100%;
+        min-width: 100%;
+        width: 100%; }
+    .courses .course .info {
+      margin-left: 115px; }
+      @media only screen and (max-width: 320px) {
+        .courses .course .info {
+          margin: 0px; } }
+      .courses .course .info > hgroup {
+        margin-right: 80px; }
+        @media only screen and (max-width: 320px) {
+          .courses .course .info > hgroup {
+            margin: 0px; } }
+        .courses .course .info > hgroup h2 {
+          font: bold 18px/24px "Open Sans", Verdana, Geneva, sans-serif;
+          margin-bottom: 3px;
+          overflow: hidden;
+          text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+          -webkit-transition-property: compact(color, false, false, false, false, false, false, false, false);
+          -moz-transition-property: compact(color, false, false, false, false, false, false, false, false);
+          -ms-transition-property: compact(color, false, false, false, false, false, false, false, false);
+          -o-transition-property: compact(color, false, false, false, false, false, false, false, false);
+          transition-property: compact(color, false, false, false, false, false, false, false, false);
+          -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+          -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+          -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+          -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+          transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+          -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+          -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+          -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+          -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+          transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+          -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+          -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+          -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+          -o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+          transition-delay: compact(0, false, false, false, false, false, false, false, false);
+          text-overflow: ellipsis;
+          white-space: nowrap; }
+        .courses .course .info > hgroup p {
+          color: #3c3c3c;
+          font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif;
+          overflow: hidden;
+          text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+          text-overflow: ellipsis;
+          white-space: nowrap; }
+      .courses .course .info .edit, .courses .course .info .register {
+        border: 1px solid #dcdcdc;
+        background: #e6e6e6;
+        color: #a0a0a0;
+        display: block;
+        font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif;
+        padding: 6px 10px;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        -webkit-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -moz-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -ms-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -o-transition-property: compact(all, false, false, false, false, false, false, false, false);
+        transition-property: compact(all, false, false, false, false, false, false, false, false);
+        -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        transition-delay: compact(0, false, false, false, false, false, false, false, false); }
+        @media only screen and (max-width: 320px) {
+          .courses .course .info .edit, .courses .course .info .register {
+            display: none; } }
+        .courses .course .info .edit:hover, .courses .course .info .register:hover {
+          background: white;
+          color: #1d9dd9; }
+      .courses .course .info .meta {
+        border-top: 1px solid #c8c8c8;
+        -webkit-box-shadow: compact(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+        -moz-box-shadow: compact(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+        box-shadow: compact(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+        font-size: 12px;
+        height: 34px;
+        margin-top: 15px;
+        opacity: 0.9;
+        position: relative;
+        -webkit-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
+        -moz-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
+        -ms-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
+        -o-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
+        transition-property: compact(opacity, false, false, false, false, false, false, false, false);
+        -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        width: 100%; }
+        .courses .course .info .meta:hover {
+          opacity: 0.9; }
+        .courses .course .info .meta > * {
+          height: 18px;
+          position: absolute;
+          top: 15px; }
+        .courses .course .info .meta .complete {
+          left: 0px; }
+          .courses .course .info .meta .complete p {
+            font: normal 12px/18px Georgia, Cambria, "Times New Roman", Times, serif; }
+            .courses .course .info .meta .complete p span {
+              color: #3c3c3c;
+              font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif;
+              margin-left: 3px; }
+        .courses .course .info .meta .dates p {
+          color: #a0a0a0;
+          font: normal 12px/18px Georgia, Cambria, "Times New Roman", Times, serif;
+          display: -moz-inline-box;
+          -moz-box-orient: vertical;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto;
+          text-align: right; }
+          .courses .course .info .meta .dates p:first-child {
+            border-right: 1px solid #c8c8c8;
+            margin-right: 10px;
+            padding-right: 10px; }
+          .courses .course .info .meta .dates p time {
+            color: #3c3c3c;
+            font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif;
+            margin-left: 3px; }
+        .courses .course .info .meta .end-date {
+          border-left: 1px solid #c8c8c8;
+          right: 0px;
+          padding-left: 15px; }
+          @media only screen and (max-width: 320px) {
+            .courses .course .info .meta .end-date {
+              display: none; } }
+          .courses .course .info .meta .end-date p {
+            color: #a0a0a0;
+            font: normal 12px/18px Georgia, Cambria, "Times New Roman", Times, serif;
+            text-align: right; }
+            .courses .course .info .meta .end-date p time {
+              color: #3c3c3c;
+              font: normal 12px/18px "Open Sans", Verdana, Geneva, sans-serif;
+              margin-left: 3px; }
+        .courses .course .info .meta .progress {
+          -webkit-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+          -moz-box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+          box-shadow: compact(0 1px 0 0 rgba(255, 255, 255, 0.6), false, false, false, false, false, false, false, false);
+          left: 90px;
+          right: 140px; }
+          @media only screen and (max-width: 320px) {
+            .courses .course .info .meta .progress {
+              right: 0px; } }
+          .courses .course .info .meta .progress .meter {
+            background: #e6e6e6;
+            border: 1px solid #c8c8c8;
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            -ms-border-radius: 3px;
+            -o-border-radius: 3px;
+            border-radius: 3px;
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            height: 100%;
+            padding: 2px; }
+            .courses .course .info .meta .progress .meter .meter-fill {
+              -webkit-border-radius: 3px;
+              -moz-border-radius: 3px;
+              -ms-border-radius: 3px;
+              -o-border-radius: 3px;
+              border-radius: 3px;
+              background: #d2d2d2;
+              height: 100%;
+              width: 60%; }
+    .courses .course:hover {
+      background: #f5f5f5;
+      -webkit-box-shadow: compact(0 1px 8px 0 rgba(0, 0, 0, 0.2), false, false, false, false, false, false, false, false);
+      -moz-box-shadow: compact(0 1px 8px 0 rgba(0, 0, 0, 0.2), false, false, false, false, false, false, false, false);
+      box-shadow: compact(0 1px 8px 0 rgba(0, 0, 0, 0.2), false, false, false, false, false, false, false, false);
+      cursor: pointer; }
+      .courses .course:hover .edit {
+        background: #dcdcdc;
+        border-color: #bebebe; }
+      .courses .course:hover .cover {
+        opacity: 1; }
+      .courses .course:hover h2 {
+        color: #1d9dd9; }
+      .courses .course:hover .meta {
+        opacity: 0.9; }
+
+nav.course-material {
+  background: #d2d2d2;
+  zoom: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: compact(inset 0 1px 5px 0 rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false);
+  -moz-box-shadow: compact(inset 0 1px 5px 0 rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false);
+  box-shadow: compact(inset 0 1px 5px 0 rgba(0, 0, 0, 0.05), false, false, false, false, false, false, false, false);
+  border-bottom: 1px solid #bebebe;
+  margin: 0px auto 0px;
+  padding: 0px;
+  width: 100%; }
+  nav.course-material:before, nav.course-material:after {
+    content: "";
+    display: table; }
+  nav.course-material:after {
+    clear: both; }
+  nav.course-material .inner-wrapper {
+    margin: 0 auto;
+    max-width: 1200px;
+    width: 100%; }
+  nav.course-material ol.course-tabs {
+    -webkit-border-top-left-radius: 4px;
+    -moz-border-top-left-radius: 4px;
+    -moz-border-radius-topleft: 4px;
+    -ms-border-top-left-radius: 4px;
+    -o-border-top-left-radius: 4px;
+    border-top-left-radius: 4px;
+    -webkit-border-top-right-radius: 4px;
+    -moz-border-top-right-radius: 4px;
+    -moz-border-radius-topright: 4px;
+    -ms-border-top-right-radius: 4px;
+    -o-border-top-right-radius: 4px;
+    border-top-right-radius: 4px;
+    zoom: 1;
+    padding: 10px 0 0 0; }
+    nav.course-material ol.course-tabs:before, nav.course-material ol.course-tabs:after {
+      content: "";
+      display: table; }
+    nav.course-material ol.course-tabs:after {
+      clear: both; }
+    nav.course-material ol.course-tabs li {
+      float: left;
+      list-style: none; }
+      nav.course-material ol.course-tabs li a {
+        color: #a0a0a0;
+        display: block;
+        text-align: center;
+        padding: 5px 13px;
+        text-decoration: none;
+        text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
+        nav.course-material ol.course-tabs li a:hover {
+          color: #3c3c3c; }
+        nav.course-material ol.course-tabs li a.active {
+          background: white;
+          border: 1px solid #c8c8c8;
+          border-bottom: 0px;
+          -webkit-border-top-left-radius: 4px;
+          -moz-border-top-left-radius: 4px;
+          -moz-border-radius-topleft: 4px;
+          -ms-border-top-left-radius: 4px;
+          -o-border-top-left-radius: 4px;
+          border-top-left-radius: 4px;
+          -webkit-border-top-right-radius: 4px;
+          -moz-border-top-right-radius: 4px;
+          -moz-border-radius-topright: 4px;
+          -ms-border-top-right-radius: 4px;
+          -o-border-top-right-radius: 4px;
+          border-top-right-radius: 4px;
+          -webkit-box-shadow: compact(0 2px 0 0 white, false, false, false, false, false, false, false, false);
+          -moz-box-shadow: compact(0 2px 0 0 white, false, false, false, false, false, false, false, false);
+          box-shadow: compact(0 2px 0 0 white, false, false, false, false, false, false, false, false);
+          color: #3c3c3c; }
+
+.course-content {
+  margin-top: 30px; }
+  .course-content .courseware {
+    background: #f0f0f0;
+    height: 600px; }
+
+.find-courses {
+  margin: 0 10px; }
+  .find-courses > header {
+    margin-bottom: 50px; }
+    .find-courses > header .universities {
+      zoom: 1;
+      font-size: 0px;
+      margin: 0 auto;
+      width: 48.744%; }
+      .find-courses > header .universities:before, .find-courses > header .universities:after {
+        content: "";
+        display: table; }
+      .find-courses > header .universities:after {
+        clear: both; }
+      .find-courses > header .universities .university {
+        display: -moz-inline-box;
+        -moz-box-orient: vertical;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        opacity: 0.7;
+        -webkit-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
+        -moz-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
+        -ms-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
+        -o-transition-property: compact(opacity, false, false, false, false, false, false, false, false);
+        transition-property: compact(opacity, false, false, false, false, false, false, false, false);
+        -webkit-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -moz-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -ms-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -o-transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        transition-duration: compact(0.15s, false, false, false, false, false, false, false, false);
+        -webkit-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -moz-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -ms-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -o-transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        transition-timing-function: compact(linear, false, false, false, false, false, false, false, false);
+        -webkit-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -moz-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -ms-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        -o-transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        transition-delay: compact(0, false, false, false, false, false, false, false, false);
+        width: 48.744%;
+        vertical-align: middle; }
+        .find-courses > header .universities .university img {
+          max-width: 100%; }
+        .find-courses > header .universities .university.mit {
+          margin-right: 2.513%; }
+      .find-courses > header .universities span.divider {
+        display: -moz-inline-box;
+        -moz-box-orient: vertical;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        height: 120px;
+        vertical-align: middle; }
+  .find-courses .courses {
+    zoom: 1;
+    width: 100%; }
+    .find-courses .courses:before, .find-courses .courses:after {
+      content: "";
+      display: table; }
+    .find-courses .courses:after {
+      clear: both; }
+    .find-courses .courses .course {
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      float: left;
+      width: 48.744%; }
+      @media only screen and (max-width: 768px) {
+        .find-courses .courses .course {
+          float: none;
+          margin-right: 0px;
+          width: 100%; } }
+      .find-courses .courses .course:nth-child(odd) {
+        margin-right: 2.513%; }
+
+.course-info .course-description, .course-info .who-should-take, .course-info .who-shouldnt-take, .course-info .syllubus, .course-info .faq {
+  display: none; }
+.course-info section {
+  margin-top: 20px; }
+.course-info h2 {
+  font-size: 2em; }
+.course-info h3 {
+  font-size: 1.4em;
+  margin-bottom: 16px; }
+.course-info p {
+  color: #666666; }
+.course-info header {
+  background: #f0f0f0;
+  border: 1px solid #c8c8c8;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: compact(inset 0 0 1px 1px white, false, false, false, false, false, false, false, false);
+  -moz-box-shadow: compact(inset 0 0 1px 1px white, false, false, false, false, false, false, false, false);
+  box-shadow: compact(inset 0 0 1px 1px white, false, false, false, false, false, false, false, false);
+  margin-top: 30px;
+  padding: 22px 194px 22px 22px;
+  position: relative; }
+  .course-info header > img {
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+    border-radius: 10px;
+    float: right;
+    height: 150px;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 150px; }
+  .course-info header h2 {
+    margin-bottom: 12px; }
+    .course-info header h2 .course-number {
+      color: #a0a0a0; }
+  .course-info header h3 {
+    margin-bottom: 22px; }
+  .course-info header .course-times {
+    margin-top: 22px; }
+    .course-info header .course-times .start-time, .course-info header .course-times .end-time, .course-info header .course-times .duration, .course-info header .course-times .separator {
+      color: #666666; }
+    .course-info header .course-times .duration {
+      padding-left: 1em; }
+    .course-info header .course-times .separator {
+      padding: 0 .5em; }
+.course-info .sign-up {
+  margin: 2em 0;
+  text-align: center; }
+  .course-info .sign-up .button {
+    border: 1px solid #0d72a2;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
+    -moz-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
+    box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
+    color: white;
+    display: inline;
+    font-size: 11px;
+    font-weight: bold;
+    background-color: #1d9dd9;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)));
+    background-image: -webkit-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
+    background-image: -moz-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
+    background-image: -ms-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
+    background-image: -o-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
+    background-image: linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
+    padding: 6px 18px 7px;
+    text-shadow: 0 1px 0 #076794;
+    -webkit-background-clip: padding-box;
+    font-size: 1.4em; }
+    .course-info .sign-up .button:hover {
+      -webkit-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
+      -moz-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
+      box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
+      cursor: pointer;
+      background-color: #1e8bbe;
+      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)));
+      background-image: -webkit-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
+      background-image: -moz-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
+      background-image: -ms-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
+      background-image: -o-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
+      background-image: linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); }
+    .course-info .sign-up .button:active {
+      border: 1px solid #0d72a2;
+      -webkit-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false);
+      -moz-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false);
+      box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false); }
+.course-info .teacher-description {
+  background: #fafafa;
+  border: 1px solid #c8c8c8;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  float: left;
+  margin: 0 25px 3em 0;
+  padding: 0 22px;
+  position: relative;
+  width: 65.829%; }
+  .course-info .teacher-description h3, .course-info .teacher-description p {
+    padding-left: 190px; }
+  .course-info .teacher-description .teacher-image {
+    margin: 0 16px 0 0;
+    max-width: 170px;
+    position: absolute;
+    text-align: center;
+    top: -20px; }
+    .course-info .teacher-description .teacher-image .teacher-name {
+      font-weight: bold;
+      color: #646464;
+      position: relative;
+      top: 12px; }
+    .course-info .teacher-description .teacher-image img {
+      border: 1px solid #666666;
+      -webkit-box-shadow: compact(1px 1px 5px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false);
+      -moz-box-shadow: compact(1px 1px 5px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false);
+      box-shadow: compact(1px 1px 5px rgba(0, 0, 0, 0.5), false, false, false, false, false, false, false, false);
+      max-width: 100%; }
+.course-info .expand-more {
+  border: 1px solid #0d72a2;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
+  -moz-box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
+  box-shadow: compact(inset 0 1px 0 0 #61b8e1, false, false, false, false, false, false, false, false);
+  color: white;
+  display: inline;
+  font-size: 11px;
+  font-weight: bold;
+  background-color: #1d9dd9;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false)));
+  background-image: -webkit-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
+  background-image: -moz-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
+  background-image: -ms-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
+  background-image: -o-linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
+  background-image: linear-gradient(top, compact(#1d9dd9, #0e7cb0, false, false, false, false, false, false, false, false));
+  padding: 6px 18px 7px;
+  text-shadow: 0 1px 0 #076794;
+  -webkit-background-clip: padding-box;
+  display: block;
+  float: left;
+  font-size: 1.4em;
+  margin: 0 auto;
+  text-align: center;
+  width: 23.116%; }
+  .course-info .expand-more:hover {
+    -webkit-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
+    -moz-box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
+    box-shadow: compact(inset 0 1px 0 0 #35a6db, false, false, false, false, false, false, false, false);
+    cursor: pointer;
+    background-color: #1e8bbe;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)));
+    background-image: -webkit-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
+    background-image: -moz-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
+    background-image: -ms-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
+    background-image: -o-linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false));
+    background-image: linear-gradient(top, compact(#1e8bbe, #0e72a1, false, false, false, false, false, false, false, false)); }
+  .course-info .expand-more:active {
+    border: 1px solid #0d72a2;
+    -webkit-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false);
+    -moz-box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false);
+    box-shadow: compact(inset 0 0 8px 4px #0d6892, inset 0 0 8px 4px #0d6892, 0 1px 1px 0 #eeeeee, false, false, false, false, false, false); }
+.course-info .course-description {
+  background: #fafafa;
+  border: 1px solid #c8c8c8;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  padding: 22px; }
+.course-info .syllubus ul {
+  list-style-type: none; }
+  .course-info .syllubus ul li {
+    padding: .2em 0; }
+.course-info .faq ul li {
+  margin-bottom: 1em; }

lms/static/sass_old/application.scss

+@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";

lms/static/sass_old/bourbon/_bourbon.scss

+// Custom Functions
+@import "functions/deprecated-webkit-gradient";
+@import "functions/flex-grid";
+@import "functions/grid-width";
+@import "functions/linear-gradient";
+@import "functions/modular-scale";
+@import "functions/radial-gradient";
+@import "functions/render-gradients";
+@import "functions/tint-shade";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/appearance";
+@import "css3/background-image";
+@import "css3/background-size";
+@import "css3/border-image";
+@import "css3/border-radius";
+@import "css3/box-shadow";
+@import "css3/box-sizing";
+@import "css3/columns";
+@import "css3/flex-box";
+@import "css3/inline-block";
+@import "css3/linear-gradient";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+@import "css3/user-select";
+
+// Addons & other mixins
+@import "addons/button";
+@import "addons/clearfix";
+@import "addons/font-family";
+@import "addons/html5-input-types";
+@import "addons/position";
+@import "addons/timing-functions";

lms/static/sass_old/bourbon/addons/_button.scss

+@mixin button ($style: simple, $base-color: #4294f0) {
+
+  @if type-of($style) == color {
+    $base-color: $style;
+    $style: simple;
+  }
+
+  // Grayscale button
+  @if $base-color == grayscale($base-color) {
+    @if $style == simple {
+      @include simple($base-color, $grayscale: true);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color, $grayscale: true);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color, $grayscale: true);
+    }
+  }
+
+  // Colored button
+  @else {
+    @if $style == simple {
+      @include simple($base-color);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color);
+    }
+  }
+}
+
+
+// Simple Button
+//************************************************************************//
+@mixin simple($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
+  $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
+  $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
+  $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border;
+  @include border-radius (3px);
+  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline;
+  font-size: 11px;
+  font-weight: bold;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 6px 18px 7px;
+  text-shadow: 0 1px 0 $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
+    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+    }
+
+    @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+  }
+
+  &:active {
+    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+    @if $grayscale == true {
+      $border-active:       grayscale($border-active);
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    border: 1px solid $border-active;
+    @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+  }
+}
+
+
+// Shiny Button
+//************************************************************************//
+@mixin shiny($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+  $fourth-stop:   adjust-color($base-color, $red: -79,  $green: -70,  $blue: -46);
+  $inset-shadow:  adjust-color($base-color, $red:  37,  $green:  29,  $blue:  12);
+  $second-stop:   adjust-color($base-color, $red: -56,  $green: -50,  $blue: -33);
+  $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+  $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $border-bottom: grayscale($border-bottom);
+    $fourth-stop:   grayscale($fourth-stop);
+    $inset-shadow:  grayscale($inset-shadow);
+    $second-stop:   grayscale($second-stop);
+    $text-shadow:   grayscale($text-shadow);
+    $third-stop:    grayscale($third-stop);
+  }
+
+  border: 1px solid $border;
+  border-bottom: 1px solid $border-bottom;
+  @include border-radius(5px);
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline;
+  font-size: 14px;
+  font-weight: bold;
+  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+  padding: 7px 20px 8px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 1px $text-shadow;
+
+  &:hover {
+    $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+    $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+    $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+    @if $grayscale == true {
+      $first-stop-hover:  grayscale($first-stop-hover);
+      $second-stop-hover: grayscale($second-stop-hover);
+      $third-stop-hover:  grayscale($third-stop-hover);
+      $fourth-stop-hover: grayscale($fourth-stop-hover);
+    }
+
+    cursor: pointer;
+    @include linear-gradient(top, $first-stop-hover  0%,
+                                  $second-stop-hover 50%,
+                                  $third-stop-hover  50%,
+                                  $fourth-stop-hover 100%);
+  }
+
+  &:active {
+    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+    @if $grayscale == true {
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+  }
+}
+
+
+// Pill Button
+//************************************************************************//
+@mixin pill($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
+  $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
+  $border-top:    adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+  $inset-shadow:  adjust-color($base-color, $hue: -1, $saturation: -1%,  $lightness:  7%);
+  $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
+  $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border-bottom: grayscale($border-bottom);
+    $border-sides:  grayscale($border-sides);
+    $border-top:    grayscale($border-top);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border-top;
+  border-color: $border-top $border-sides $border-bottom;
+  @include border-radius(16px);
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+  color: $color;
+  display: inline;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 1;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 3px 16px 5px;
+  text-align: center;
+  text-shadow: 0 -1px 1px $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
+    $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
+    $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
+    $border-top:          adjust-color($base-color, $hue: -1, $saturation: -17%,   $lightness: -21%);
+    $inset-shadow-hover:  adjust-color($base-color,           $saturation: -1%,    $lightness:  3%);
+    $stop-gradient-hover: adjust-color($base-color, $hue:  8, $saturation: -4%,    $lightness: -15.5%);
+    $text-shadow-hover:   adjust-color($base-color, $hue:  5, $saturation: -5%,    $lightness: -22%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $border-bottom:       grayscale($border-bottom);
+      $border-sides:        grayscale($border-sides);
+      $border-top:          grayscale($border-top);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+      $text-shadow-hover:   grayscale($text-shadow-hover);
+    }
+
+    border: 1px solid $border-top;
+    border-color: $border-top $border-sides $border-bottom;
+    @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+    text-shadow: 0 -1px 1px $text-shadow-hover;
+    -webkit-background-clip: padding-box;
+  }
+
+  &:active {
+    $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
+    $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
+    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
+    $inset-shadow-active:  adjust-color($base-color, $hue: 9,  $saturation:  2%,   $lightness: -21.5%);
+    $text-shadow-active:   adjust-color($base-color, $hue: 5,  $saturation: -12%,  $lightness: -21.5%);
+
+    @if $grayscale == true {
+      $active-color:         grayscale($active-color);
+      $border-active:        grayscale($border-active);
+      $border-bottom-active: grayscale($border-bottom-active);
+      $inset-shadow-active:  grayscale($inset-shadow-active);
+      $text-shadow-active:   grayscale($text-shadow-active);
+    }
+
+    background: $active-color;
+    border: 1px solid $border-active;
+    border-bottom: 1px solid $border-bottom-active;
+    @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+    text-shadow: 0 -1px 1px $text-shadow-active;
+  }
+}
+

lms/static/sass_old/bourbon/addons/_clearfix.scss

+// Micro clearfix provides an easy way to contain floats without adding additional markup
+//
+// Example usage:
+//
+//    // Contain all floats within .wrapper
+//    .wrapper {
+//      @include clearfix;
+//      .content,
+//      .sidebar {
+//        float : left;
+//      }
+//    }
+
+@mixin clearfix {
+  zoom: 1;
+
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+// Acknowledgements
+// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)

lms/static/sass_old/bourbon/addons/_font-family.scss

+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+$verdana: Verdana, Geneva, sans-serif;

lms/static/sass_old/bourbon/addons/_html5-input-types.scss

+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+              'input[type="number"]',
+              'input[type="password"]',
+              'input[type="search"]',
+              'input[type="tel"]',
+              'input[type="text"]',
+              'input[type="url"]',
+
+              // Webkit & Gecko may change the display of these in the future
+              'input[type="color"]',
+              'input[type="date"]',
+              'input[type="datetime"]',
+              'input[type="datetime-local"]',
+              'input[type="month"]',
+              'input[type="time"]',
+              'input[type="week"]';
+
+$unquoted-inputs-list: ();
+
+@each $input-type in $inputs-list {
+  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+//************************************************************************//
+//   #{$all-text-inputs}, textarea {
+//     border: 1px solid red;
+//   }

lms/static/sass_old/bourbon/addons/_position.scss

+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+  @if type-of($position) == list {
+    $coordinates: $position;
+    $position: relative;
+  }
+
+  $top: nth($coordinates, 1);
+  $right: nth($coordinates, 2);
+  $bottom: nth($coordinates, 3);
+  $left: nth($coordinates, 4);
+
+  position: $position;
+
+  @if not(unitless($top)) {
+    top: $top;
+  }
+
+  @if not(unitless($right)) {
+    right: $right;
+  }
+
+  @if not(unitless($bottom)) {
+    bottom: $bottom;
+  }
+
+  @if not(unitless($left)) {
+    left: $left;
+  }
+}

lms/static/sass_old/bourbon/addons/_timing-functions.scss

+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+// EASE OUT
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+// EASE IN OUT
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);

lms/static/sass_old/bourbon/css3/_animation.scss

+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+// Official animation shorthand property.
+@mixin animation ($animation-1,
+  $animation-2: false, $animation-3: false,
+  $animation-4: false, $animation-5: false,
+  $animation-6: false, $animation-7: false,
+  $animation-8: false, $animation-9: false)
+  {
+    $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
+                   $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
+
+  -webkit-animation: $full;
+     -moz-animation: $full;
+          animation: $full;
+}
+
+// Individual Animation Properties
+@mixin animation-name ($name-1,
+  $name-2: false, $name-3: false,
+  $name-4: false, $name-5: false,
+  $name-6: false, $name-7: false,
+  $name-8: false, $name-9: false)
+  {
+    $full:  compact($name-1, $name-2, $name-3, $name-4,
+                    $name-5, $name-6, $name-7, $name-8, $name-9);
+
+  -webkit-animation-name: $full;
+     -moz-animation-name: $full;
+          animation-name: $full;
+}
+
+
+@mixin animation-duration ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full:  compact($time-1, $time-2, $time-3, $time-4,
+                    $time-5, $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-animation-duration: $full;
+     -moz-animation-duration: $full;
+          animation-duration: $full;
+}
+
+
+@mixin animation-timing-function ($motion-1: ease,
+//  ease | linear | ease-in | ease-out | ease-in-out
+  $motion-2: false, $motion-3: false,
+  $motion-4: false, $motion-5: false,
+  $motion-6: false, $motion-7: false,
+  $motion-8: false, $motion-9: false)
+  {
+    $full:  compact($motion-1, $motion-2, $motion-3, $motion-4,
+                    $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+
+  -webkit-animation-timing-function: $full;
+     -moz-animation-timing-function: $full;
+          animation-timing-function: $full;
+}
+
+
+@mixin animation-iteration-count ($value-1: 1,
+//  infinite | <number>
+  $value-2: false, $value-3: false,
+  $value-4: false, $value-5: false,
+  $value-6: false, $value-7: false,
+  $value-8: false, $value-9: false)
+  {
+    $full:  compact($value-1, $value-2, $value-3, $value-4,
+                    $value-5, $value-6, $value-7, $value-8, $value-9);
+
+  -webkit-animation-iteration-count: $full;
+     -moz-animation-iteration-count: $full;
+          animation-iteration-count: $full;
+}
+
+
+@mixin animation-direction ($direction-1: normal,
+//  normal | alternate
+  $direction-2: false, $direction-3: false,
+  $direction-4: false, $direction-5: false,
+  $direction-6: false, $direction-7: false,
+  $direction-8: false, $direction-9: false)
+  {
+    $full:  compact($direction-1, $direction-2, $direction-3, $direction-4,
+                    $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+
+  -webkit-animation-direction: $full;
+     -moz-animation-direction: $full;
+          animation-direction: $full;
+}
+
+
+@mixin animation-play-state ($state-1: running,
+//  running | paused
+  $state-2: false, $state-3: false,
+  $state-4: false, $state-5: false,
+  $state-6: false, $state-7: false,
+  $state-8: false, $state-9: false)
+  {
+    $full:  compact($state-1, $state-2, $state-3, $state-4,
+                    $state-5, $state-6, $state-7, $state-8, $state-9);
+
+  -webkit-animation-play-state: $full;
+     -moz-animation-play-state: $full;
+          animation-play-state: $full;
+}
+
+
+@mixin animation-delay ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full:  compact($time-1, $time-2, $time-3, $time-4,
+                    $time-5, $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-animation-delay: $full;
+     -moz-animation-delay: $full;
+          animation-delay: $full;
+}
+
+
+@mixin animation-fill-mode ($mode-1: none,
+//  http://goo.gl/l6ckm
+//  none | forwards | backwards | both
+  $mode-2: false, $mode-3: false,
+  $mode-4: false, $mode-5: false,
+  $mode-6: false, $mode-7: false,
+  $mode-8: false, $mode-9: false)
+  {
+    $full:  compact($mode-1, $mode-2, $mode-3, $mode-4,
+                    $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+
+  -webkit-animation-fill-mode: $full;
+     -moz-animation-fill-mode: $full;
+          animation-fill-mode: $full;
+}
+
+
+// Deprecated
+@mixin animation-basic ($name, $time: 0, $motion: ease) {
+    $length-of-name: length($name);
+    $length-of-time: length($time);
+  $length-of-motion: length($motion);
+
+  @if $length-of-name > 1 {
+    @include animation-name(zip($name));
+  } @else {
+    @include animation-name(    $name);
+  }
+
+  @if $length-of-time > 1 {
+    @include animation-duration(zip($time));
+  } @else {
+    @include animation-duration(    $time);
+  }
+
+  @if $length-of-motion > 1 {
+    @include animation-timing-function(zip($motion));
+  } @else {
+    @include animation-timing-function(    $motion);
+  }
+  @warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
+}
+

lms/static/sass_old/bourbon/css3/_appearance.scss

+@mixin appearance ($value) {
+  -webkit-appearance: $value;
+     -moz-appearance: $value;
+      -ms-appearance: $value;
+       -o-appearance: $value;
+          appearance: $value;
+}

lms/static/sass_old/bourbon/css3/_background-image.scss

+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+
+@mixin background-image(
+  $image-1       , $image-2: false,
+  $image-3: false, $image-4: false,
+  $image-5: false, $image-6: false,
+  $image-7: false, $image-8: false,
+  $image-9: false, $image-10: false
+) {
+  $images: compact($image-1, $image-2,
+           $image-3, $image-4,
+           $image-5, $image-6,
+           $image-7, $image-8,
+           $image-9, $image-10);
+
+  background-image: add-prefix($images, webkit);
+  background-image: add-prefix($images, moz);
+  background-image: add-prefix($images, ms);
+  background-image: add-prefix($images, o);
+  background-image: add-prefix($images);
+}
+
+
+@function add-prefix($images, $vendor: false) {
+  $images-prefixed: ();
+
+  @for $i from 1 through length($images) {
+    $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+      $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+
+      $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+      $images-prefixed: append($images-prefixed, $gradient, comma);
+    }
+
+    // If variable is a string - Image
+    @else if $type == string {
+      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
+    }
+  }
+  @return $images-prefixed;
+}
+
+
+
+//Examples:
+  //@include background-image(linear-gradient(top, orange, red));
+  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
+  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
+  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
+  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);

lms/static/sass_old/bourbon/css3/_background-size.scss

+@mixin background-size ($length-1,
+  $length-2: false, $length-3: false,
+  $length-4: false, $length-5: false,
+  $length-6: false, $length-7: false,
+  $length-8: false, $length-9: false)
+  {
+    $full: compact($length-1, $length-2, $length-3, $length-4,
+                   $length-5, $length-6, $length-7, $length-8, $length-9);
+
+  -webkit-background-size: $full;
+     -moz-background-size: $full;
+      -ms-background-size: $full;
+       -o-background-size: $full;
+          background-size: $full;
+}

lms/static/sass_old/bourbon/css3/_border-image.scss

+@mixin border-image ($image) {
+  -webkit-border-image: $image;
+     -moz-border-image: $image;
+      -ms-border-image: $image;
+       -o-border-image: $image;
+          border-image: $image;
+}

lms/static/sass_old/bourbon/css3/_border-radius.scss

+@mixin border-radius ($radii) {
+  -webkit-border-radius: $radii;
+     -moz-border-radius: $radii;
+      -ms-border-radius: $radii;
+       -o-border-radius: $radii;
+          border-radius: $radii;
+}
+
+@mixin border-top-left-radius($radii) {
+  -webkit-border-top-left-radius: $radii;
+     -moz-border-top-left-radius: $radii;
+      -moz-border-radius-topleft: $radii;
+      -ms-border-top-left-radius: $radii;
+       -o-border-top-left-radius: $radii;
+          border-top-left-radius: $radii;
+}
+
+@mixin border-top-right-radius($radii) {
+  -webkit-border-top-right-radius: $radii;
+     -moz-border-top-right-radius: $radii;
+      -moz-border-radius-topright: $radii;
+      -ms-border-top-right-radius: $radii;
+       -o-border-top-right-radius: $radii;
+          border-top-right-radius: $radii;
+}
+
+@mixin border-bottom-left-radius($radii) {
+  -webkit-border-bottom-left-radius: $radii;
+     -moz-border-bottom-left-radius: $radii;
+      -moz-border-radius-bottomleft: $radii;
+      -ms-border-bottom-left-radius: $radii;
+       -o-border-bottom-left-radius: $radii;
+          border-bottom-left-radius: $radii;
+}
+
+@mixin border-bottom-right-radius($radii) {
+  -webkit-border-bottom-right-radius: $radii;
+     -moz-border-bottom-right-radius: $radii;
+      -moz-border-radius-bottomright: $radii;
+      -ms-border-bottom-right-radius: $radii;
+       -o-border-bottom-right-radius: $radii;
+          border-bottom-right-radius: $radii;
+}
+
+@mixin border-top-radius($radii) {
+  @include border-top-left-radius($radii);
+  @include border-top-right-radius($radii);
+}
+
+@mixin border-right-radius($radii) {
+  @include border-top-right-radius($radii);
+  @include border-bottom-right-radius($radii);
+}
+
+@mixin border-bottom-radius($radii) {
+  @include border-bottom-left-radius($radii);
+  @include border-bottom-right-radius($radii);
+}
+
+@mixin border-left-radius($radii) {
+  @include border-top-left-radius($radii);
+  @include border-bottom-left-radius($radii);
+}

lms/static/sass_old/bourbon/css3/_box-shadow.scss

+// Box-Shadow Mixin Requires Sass v3.1.1+
+@mixin box-shadow ($shadow-1,
+  $shadow-2: false, $shadow-3: false,
+  $shadow-4: false, $shadow-5: false,
+  $shadow-6: false, $shadow-7: false,
+  $shadow-8: false, $shadow-9: false)
+  {
+    $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
+                   $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
+
+  -webkit-box-shadow: $full;
+     -moz-box-shadow: $full;
+          box-shadow: $full;
+}

lms/static/sass_old/bourbon/css3/_box-sizing.scss

+@mixin box-sizing ($box) {
+//  content-box | border-box | inherit
+  -webkit-box-sizing: $box;
+     -moz-box-sizing: $box;
+          box-sizing: $box;
+}

lms/static/sass_old/bourbon/css3/_columns.scss

+@mixin columns($arg: auto) {
+// <column-count> || <column-width>
+  -webkit-columns: $arg;
+     -moz-columns: $arg;
+          columns: $arg;
+}
+
+@mixin column-count($int: auto) {
+// auto || integer
+  -webkit-column-count: $int;
+     -moz-column-count: $int;
+          column-count: $int;
+}
+
+@mixin column-gap($length: normal) {
+// normal || length
+  -webkit-column-gap: $length;
+     -moz-column-gap: $length;
+          column-gap: $length;
+}
+
+@mixin column-fill($arg: auto) {
+// auto || length
+  -webkit-columns-fill: $arg;
+     -moz-columns-fill: $arg;
+          columns-fill: $arg;
+}
+
+@mixin column-rule($arg) {
+// <border-width> || <border-style> || <color>
+  -webkit-column-rule: $arg;
+     -moz-column-rule: $arg;
+          column-rule: $arg;
+}
+
+@mixin column-rule-color($color) {
+  -webkit-column-rule-color: $color;
+     -moz-column-rule-color: $color;
+          column-rule-color: $color;
+}
+
+@mixin column-rule-style($style: none) {
+// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+  -webkit-column-rule-style: $style;
+     -moz-column-rule-style: $style;
+          column-rule-style: $style;
+}
+
+@mixin column-rule-width ($width: none) {
+  -webkit-column-rule-width: $width;
+     -moz-column-rule-width: $width;
+          column-rule-width: $width;
+}
+
+@mixin column-span($arg: none) {
+// none || all
+  -webkit-column-span: $arg;
+     -moz-column-span: $arg;
+          column-span: $arg;
+}
+
+@mixin column-width($length: auto) {
+// auto || length
+  -webkit-column-width: $length;
+     -moz-column-width: $length;
+          column-width: $length;
+}

lms/static/sass_old/bourbon/css3/_flex-box.scss

+// CSS3 Flexible Box Model and property defaults
+
+// Custom shorthand notation for flexbox
+@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
+  @include display-box;
+  @include box-orient($orient);
+  @include box-pack($pack);
+  @include box-align($align);
+}
+
+@mixin display-box {
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+}
+
+@mixin box-orient($orient: inline-axis) {
+// horizontal|vertical|inline-axis|block-axis|inherit
+  -webkit-box-orient: $orient;
+     -moz-box-orient: $orient;
+          box-orient: $orient;
+}
+
+@mixin box-pack($pack: start) {
+// start|end|center|justify
+  -webkit-box-pack: $pack;
+     -moz-box-pack: $pack;
+          box-pack: $pack;
+}
+
+@mixin box-align($align: stretch) {
+// start|end|center|baseline|stretch
+  -webkit-box-align: $align;
+     -moz-box-align: $align;
+          box-align: $align;
+}
+
+@mixin box-direction($direction: normal) {
+// normal|reverse|inherit
+  -webkit-box-direction: $direction;
+     -moz-box-direction: $direction;
+          box-direction: $direction;
+}
+@mixin box-lines($lines: single) {
+// single|multiple
+  -webkit-box-lines: $lines;
+     -moz-box-lines: $lines;
+          box-lines: $lines;
+}
+
+@mixin box-ordinal-group($integer: 1) {
+  -webkit-box-ordinal-group: $integer;
+     -moz-box-ordinal-group: $integer;
+          box-ordinal-group: $integer;
+}
+
+@mixin box-flex($value: 0.0) {
+  -webkit-box-flex: $value;
+     -moz-box-flex: $value;
+          box-flex: $value;
+}
+
+@mixin box-flex-group($integer: 1) {
+  -webkit-box-flex-group: $integer;
+     -moz-box-flex-group: $integer;
+          box-flex-group: $integer;
+}

lms/static/sass_old/bourbon/css3/_inline-block.scss

+// Legacy support for inline-block in IE7 (maybe IE6)
+@mixin inline-block {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+}

lms/static/sass_old/bourbon/css3/_linear-gradient.scss

+@mixin linear-gradient($pos, $G1, $G2: false,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $fallback: false) {
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+    $pos: top; // Default position
+  }
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  background-color: $fallback-color;
+  background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
+  background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
+  background-image:     -moz-linear-gradient($pos, $full);
+  background-image:      -ms-linear-gradient($pos, $full);
+  background-image:       -o-linear-gradient($pos, $full);
+  background-image: unquote("linear-gradient(#{$pos}, #{$full})");
+}
+
+
+// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
+// @include linear-gradient(#1e5799, #2989d8);
+// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
+// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
+// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

lms/static/sass_old/bourbon/css3/_radial-gradient.scss

+// Requires Sass 3.1+
+@mixin radial-gradient($pos, $shape-size,
+                       $G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $fallback: false) {
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  background-color:  $fallback-color;
+  background-image:          deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
+  background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
+  background-image:     -moz-radial-gradient($pos, $shape-size, $full);
+  background-image:      -ms-radial-gradient($pos, $shape-size, $full);
+  background-image:       -o-radial-gradient($pos, $shape-size, $full);
+  background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
+}
+
+//  Usage: Gradient position and shape-size are required. Color stops are optional.
+//  @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
+//  @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);

lms/static/sass_old/bourbon/css3/_transform.scss

+@mixin transform($property: none) {
+//  none | <transform-function>
+  -webkit-transform: $property;
+     -moz-transform: $property;
+      -ms-transform: $property;
+       -o-transform: $property;
+          transform: $property;
+}
+
+@mixin transform-origin($axes: 50%) {
+// x-axis - left | center | right  | length | %
+// y-axis - top  | center | bottom | length | %
+// z-axis -                          length
+  -webkit-transform-origin: $axes;
+     -moz-transform-origin: $axes;
+      -ms-transform-origin: $axes;
+       -o-transform-origin: $axes;
+          transform-origin: $axes;
+}

lms/static/sass_old/bourbon/css3/_transition.scss

+// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include transition (all, 2.0s, ease-in-out);
+//          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+//          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
+
+@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
+
+  // Detect # of args passed into each variable
+  $length-of-property:        length($property);
+  $length-of-duration:        length($duration);
+  $length-of-timing-function: length($timing-function);
+  $length-of-delay:           length($delay);
+
+  @if $length-of-property > 1 {
+    @include transition-property(zip($property)); }
+  @else {
+    @include transition-property(    $property);
+  }
+
+  @if $length-of-duration > 1 {
+    @include transition-duration(zip($duration)); }
+  @else {
+    @include transition-duration(    $duration);
+  }
+
+  @if $length-of-timing-function > 1 {
+    @include transition-timing-function(zip($timing-function)); }
+  @else {
+    @include transition-timing-function(    $timing-function);
+  }
+
+  @if $length-of-delay > 1 {
+    @include transition-delay(zip($delay)); }
+  @else {
+    @include transition-delay(    $delay);
+  }
+}
+
+
+@mixin transition-property ($prop-1: all,
+  $prop-2: false, $prop-3: false,
+  $prop-4: false, $prop-5: false,
+  $prop-6: false, $prop-7: false,
+  $prop-8: false, $prop-9: false)
+  {
+    $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
+                   $prop-6, $prop-7, $prop-8, $prop-9);
+
+  -webkit-transition-property: $full;
+     -moz-transition-property: $full;
+      -ms-transition-property: $full;
+       -o-transition-property: $full;
+          transition-property: $full;
+}
+
+@mixin transition-duration ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+                   $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-transition-duration: $full;
+     -moz-transition-duration: $full;
+      -ms-transition-duration: $full;
+       -o-transition-duration: $full;
+          transition-duration: $full;
+}
+
+@mixin transition-timing-function ($motion-1: ease,
+  $motion-2: false, $motion-3: false,
+  $motion-4: false, $motion-5: false,
+  $motion-6: false, $motion-7: false,
+  $motion-8: false, $motion-9: false)
+  {
+    $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
+                   $motion-6, $motion-7, $motion-8, $motion-9);
+
+// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
+  -webkit-transition-timing-function: $full;
+     -moz-transition-timing-function: $full;
+      -ms-transition-timing-function: $full;
+       -o-transition-timing-function: $full;
+          transition-timing-function: $full;
+}
+
+@mixin transition-delay ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+                   $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-transition-delay: $full;
+     -moz-transition-delay: $full;
+      -ms-transition-delay: $full;
+       -o-transition-delay: $full;
+          transition-delay: $full;
+}
+

lms/static/sass_old/bourbon/css3/_user-select.scss

+@mixin user-select($arg: none) {
+  -webkit-user-select: $arg;
+     -moz-user-select: $arg;
+      -ms-user-select: $arg;
+          user-select: $arg;
+}

lms/static/sass_old/bourbon/functions/_deprecated-webkit-gradient.scss

+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function deprecated-webkit-gradient($type, $full) {
+  $gradient-list: ();
+  $gradient: false;
+  $full-length: length($full);
+  $percentage: false;
+  $gradient-type: $type;
+
+  @for $i from 1 through $full-length {
+    $gradient: nth($full, $i);
+
+    @if length($gradient) == 2 {
+      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+    @else {
+      @if $i == $full-length {
+        $percentage: 100%;
+      }
+      @else {
+        $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+      }
+      $color-stop: color-stop(unquote($percentage), $gradient);
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+  }
+
+  @if $type == radial {
+    $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
+  }
+  @else if $type == linear {
+    $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
+  }
+  @return $gradient;
+}

lms/static/sass_old/bourbon/functions/_flex-grid.scss

+// 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 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);
+}
+
+// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
+// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
+//
+//  $fg-column: 60px;             // Column Width
+//  $fg-gutter: 25px;             // Gutter Width
+//  $fg-max-columns: 12;          // Total Columns For Main Container
+//
+//  div {
+//    width: flex-grid(4);        // returns (315px / 1020px) = 30.882353%;
+//    margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
+//
+//    p {
+//      width: flex-grid(2, 4);  // returns (145px / 315px) = 46.031746%;
+//      float: left;
+//      margin: flex-gutter(4);  // returns (25px / 315px) = 7.936508%;
+//    }
+//
+//    blockquote {
+//      float: left;
+//      width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+//    }
+//  }

lms/static/sass_old/bourbon/functions/_grid-width.scss

+@function grid-width($n) {
+  @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
+//
+//  $gw-column: 100px;         // Column Width
+//  $gw-gutter: 40px;          // Gutter Width
+//
+//  div {
+//    width: grid-width(4);    // returns 520px;
+//    margin-left: $gw-gutter; // returns 40px;
+//  }

lms/static/sass_old/bourbon/functions/_linear-gradient.scss

+@function linear-gradient($pos: top, $G1: false, $G2: false,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false) {
+
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+    $pos: top; // Default position
+  }
+
+  $type: linear;
+  $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+  $type-gradient: append($type, $gradient, comma);
+
+  @return $type-gradient;
+}
+

lms/static/sass_old/bourbon/functions/_modular-scale.scss

+@function modular-scale($value, $increment, $ratio) {
+  @if $increment > 0 {
+    @for $i from 1 through $increment {
+      $value: ($value * $ratio);
+    }
+  }
+
+  @if $increment < 0 {
+    $increment: abs($increment);
+    @for $i from 1 through $increment {
+      $value: ($value / $ratio);
+    }
+  }
+
+  @return $value;
+}
+
+//  div {
+//                     Increment Up GR with positive value
+//   font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
+//
+//                     Increment Down GR with negative value
+//   font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
+//
+//                     Can be used with ceil(round up) or floor(round down)
+//   font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
+//   font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
+//  }
+//
+// modularscale.com
+
+@function golden-ratio($value, $increment) {
+  @return modular-scale($value, $increment, 1.618)
+}
+
+//  div {
+//    font-size: golden-ratio(14px, 1); // returns: 22.652px
+//  }
+//
+// goldenratiocalculator.com

lms/static/sass_old/bourbon/functions/_radial-gradient.scss

+// This function is required and used by the background-image mixin.
+@function radial-gradient($pos, $shape-size,
+                       $G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false) {
+
+  $type: radial;
+  $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+  $type-gradient: append($type, $gradient, comma);
+
+  @return $type-gradient;
+}
+

lms/static/sass_old/bourbon/functions/_render-gradients.scss

+// User for linear and radial gradients within background-image or border-image properties
+
+@function render-gradients($gradients, $gradient-type, $vendor: false) {
+  $vendor-gradients: false;
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
+  }
+
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}

lms/static/sass_old/bourbon/functions/_tint-shade.scss

+// Add percentage of white to a color
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}

lms/static/sass_old/bourbon/lib/bourbon.rb

+require "bourbon/generator"
+
+module Bourbon
+  if defined?(Rails)
+    class Engine < ::Rails::Engine
+      require 'bourbon/engine'
+    end
+
+    module Rails
+      class Railtie < ::Rails::Railtie
+        rake_tasks do
+          load "tasks/install.rake"
+        end
+      end
+    end
+  end
+end
+
+require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions")

lms/static/sass_old/bourbon/lib/bourbon/sass_extensions.rb

+module Bourbon::SassExtensions
+end
+
+require "sass"
+
+require File.join(File.dirname(__FILE__), "/sass_extensions/functions")

lms/static/sass_old/bourbon/lib/bourbon/sass_extensions/functions.rb

+module Bourbon::SassExtensions::Functions
+end
+
+require File.join(File.dirname(__FILE__), "/functions/compact")
+
+module Sass::Script::Functions
+  include Bourbon::SassExtensions::Functions::Compact
+end
+
+# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
+class Sass::Script::Functions::EvaluationContext
+  include Sass::Script::Functions
+end

lms/static/sass_old/bourbon/lib/bourbon/sass_extensions/functions/compact.rb

+# Compact function pulled from compass
+module Bourbon::SassExtensions::Functions::Compact
+
+  def compact(*args)
+    sep = :comma
+    if args.size == 1 && args.first.is_a?(Sass::Script::List)
+      args = args.first.value
+      sep = args.first.separator
+    end
+    Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
+  end
+
+end

lms/templates/courseware.html

@@ -16,7 +16,7 @@
 
 <%include file="navigation.html" args="active_page='courseware'" />
 
-<section class="main-content">
+<section class="container">
   <div class="course-wrapper">
     <section aria-label="Course Navigation" class="course-index">
       <header id="open_close_accordion">

lms/templates/info.html

 <%inherit file="main.html" />
-
-<%block name="js_extra">
-<script>
-
-$(document).ready(function(){
-   //if(!page) {
-   //  cookie_page = $.cookie("book_page");
-   //  if(cookie_page) {
-   //    goto_page(cookie_page);
-   //  }
-   //}
-
-   $(".handouts ol").treeview({collapsed:true, unique:true/*, cookieId: "treeview-book-nav", persist: "cookie"*/});
-});
-
-</script>
-</%block>
-
-<%block name="title"><title>Course Info - MITx 6.002x</title></%block>
-
 <%include file="navigation.html" args="active_page='info'" />
 
-<section class="main-content">
-  <div class="info-wrapper">
-    % if user.is_authenticated():
-    <section class="updates">
-      <%include file="updates.html" />
-    </section>
-    <section aria-label="Handout Navigation" class="handouts">
-      <%include file="handouts.html" />
-    </section>
-    % else:
-    <section class="updates">
-      <%include file="guest_updates.html" />
-    </section>
-    <section aria-label="Handout Navigation" class="handouts">
-      <%include file="guest_handouts.html" />
+<section class="container">
+  <section class="course-content">
+    <section class="courseware">
+      <div class="info-wrapper">
+        % if user.is_authenticated():
+        <section class="updates">
+          <%include file="updates.html" />
+        </section>
+        <section aria-label="Handout Navigation" class="handouts">
+          <%include file="handouts.html" />
+        </section>
+        % else:
+        <section class="updates">
+          <%include file="guest_updates.html" />
+        </section>
+        <section aria-label="Handout Navigation" class="handouts">
+          <%include file="guest_handouts.html" />
+        </section>
+        % endif
+      </div>
     </section>
-    % endif
-  </div>
+  </section>
 </section>

lms/templates/main.html

@@ -62,89 +62,5 @@
   ${self.body()}
   <%block name="bodyextra"/>
 
-  <footer>
-    <!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
-    <p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a>
-</p>
-      <nav>
-      <ul aria-label="Social Links" class="social">
-        <li class="linkedin">
-          <a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
-        </li>
-        <li class="twitter">
-          <a href="https://twitter.com/#!/MyMITx">Twitter</a>
-        </li>
-        <li class="facebook">
-          <a href="http://www.facebook.com/pages/MITx/378592442151504">Facebook</a>
-        </li>
-      </ul>
-    <ul>
-      <li><a href="#feedback_div" rel="leanModal">Feedback</a></li>
-      <li class="calc-main">
-        <a aria-label="Open Calculator" href="#" class="calc">Calculator</a>
-
-        <div id="calculator_wrapper">
-          <form id="calculator">
-            <div class="input-wrapper">
-              <input type="text" id="calculator_input" />
-
-              <div class="help-wrapper">
-                <a href="#">Hints</a>
-                <dl class="help">
-                  <dt>Suffixes:</dt>
-                  <dd> %kMGTcmunp</dd>
-                  <dt>Operations:</dt>
-                  <dd>^ * / + - ()</dd>
-                  <dt>Functions:</dt>
-                  <dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
-                  <dt>Constants</dt>
-                  <dd>e, pi</dd>
-
-                  <!-- Students won't know what parallel means at this time.  Complex numbers aren't well tested in the courseware, so we would prefer to not expose them.  If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
-
-                  <dt>Unsupported:</dt> <dd>||, j </dd>  -->
-                </dl>
-              </div>
-            </div>
-            <input id="calculator_button" type="submit" value="="/>
-            <input type="text" id="calculator_output"  readonly />
-          </form>
-
-        </div>
-      </li>
-      <li><a href="/s/help.html">Help</a></li>
-      % if user.is_authenticated():
-     <li><a href="${ settings.MITX_ROOT_URL }/logout">Log out</a></li>
-      % endif
-    </ul>
-      </nav>
-  </footer>
-
-  <div id="feedback_div" class="leanModal_box">
-    <h1>Feedback for MITx</h1>
-    <p>Found a bug? Got an idea for improving our system? Let us know.</p>
-
-    <form>
-      <ol>
-        <li><label>Subject:</label> <input type="text" id="feedback_subject"></li>
-        <li><label>Feedback: </label><textarea id="feedback_message"></textarea></li>
-        <li><input id="feedback_button" type="button" value="Submit"></li>
-      </ol>
-    </form>
-  </div>
-
-  <script type="text/javascript" src="${static.url('js/jquery.treeview.js')}"></script>
-  <script type="text/javascript" src="${static.url('js/jquery.leanModal.min.js')}"></script>
-  <script type="text/javascript" src="${static.url('js/jquery.qtip.min.js')}"></script>
-  <script type="text/javascript" src="${static.url('js/jquery.cookie.js')}"></script>
-  <script type="text/javascript" src="${static.url('js/schematic.js')}"></script>
-  <script type="text/javascript" src="${static.url('js/cktsim.js')}"></script>
-
-  <script type="text/javascript" >
-    var codemirror_set= {};                // associative array of codemirror objects 
-  </script>
-
-  <script type="text/javascript" src="${static.url('js/jquery.scrollTo-1.4.2-min.js')}"></script>
-  <%block name="js_extra"/>
 </body>
 </html>

lms/templates/navigation.html

 <%page args="active_page" />
-<div class="header-wrapper">
-  <header aria-label="Global Navigation">
-    <hgroup>
-      <h1><em>
-        % if settings.ENABLE_MULTICOURSE:
-            <a href="${ MITX_ROOT_URL }/mitxhome" style="color:black;">MITx</a>
-        % else:
-            MITx
-        % endif
-       </em></h1>
-      <h2><a href="${ MITX_ROOT_URL }/courseware/">${ settings.COURSE_TITLE }</a></h2>
-    </hgroup>
+<header class="app" aria-label="Global Navigation">
+  <nav>
+    <a href="${ MITX_ROOT_URL }/mitxhome" class="logo">
+      <img src="${ MITX_ROOT_URL}/static/images/logo.png" />
+    </a>
 
-    <nav class="${active_page}">
-      <ul class="coursenav">
-        <li class="courseware"><a href="${ MITX_ROOT_URL }/courseware/">Courseware</a></li>
-        <li class="info"><a href="${ MITX_ROOT_URL }/info">Course Info</a></li>
+    <h1>${ settings.COURSE_TITLE }</h1>
+    <ol class="user">
+      <li>
+        <a href="/dashboard.html" class="user-dashboard">
+          <span class="avatar"><img src="/static/images/profile.jpg" /></span>
+          Neil deGrasse Tyson
+        </a>
+      </li>
+      <li>
+        <a href="#" class="options">&#9662</a>
+        <ol class="user-options">
+          <li><a href="#">Account Settings</a></li>
+          <li><a href="/">Log Out</a></li>
+        </ol>
+      </li>
+    </ol>
+  </nav>
+</header>
+
+<%
+def url_class(url):
+  if url == active_page:
+    return "active"
+  return ""
+%>
+
+<nav class="${active_page} course-material">
+  <div class="inner-wrapper">
+    <ol class="course-tabs">
+      <li class="courseware"><a href="${ MITX_ROOT_URL }/courseware/" class="${url_class('courseware')}">Courseware</a></li>
+      <li class="info"><a href="${ MITX_ROOT_URL }/info" class="${url_class('info')}">Course Info</a></li>
 % if user.is_authenticated():
-        <li class="book"><a href="${ MITX_ROOT_URL }/book">Textbook</a></li>
-        <li class="discussion"><a href="${ MITX_ROOT_URL }/discussion/questions/">Discussion</a></li>
+      <li class="book"><a href="${ MITX_ROOT_URL }/book" class="${url_class('book')}">Textbook</a></li>
+      <li class="discussion"><a href="${ MITX_ROOT_URL }/discussion/questions/">Discussion</a></li>
 % endif
-        <li class="wiki"><a href="${ MITX_ROOT_URL }/wiki/view/">Wiki</a></li>
+      <li class="wiki"><a href="${ MITX_ROOT_URL }/wiki/view/" class="${url_class('wiki')}">Wiki</a></li>
 % if user.is_authenticated():
-        <li class="profile"><a href="${ MITX_ROOT_URL }/profile">Profile</a></li>
+      <li class="profile"><a href="${ MITX_ROOT_URL }/profile" class="${url_class('profile')}">Profile</a></li>
 % endif
-      </ul>
-    </nav>
-  </header>
-</div>
+    </ol>
+  </div>
+</nav>