Merge pull request #320 from MITx/feature/kfiedler/courseware-style

Start to whip out a bunch of the styles and get courseware working

lms/envs/common.py

@@ -304,7 +304,7 @@ PIPELINE_CSS = {
         'output_filename': 'css/lms-application.css',
     },
     'course': {
-      'source_filenames': ['sass/course.scss', 'js/vendor/CodeMirror/codemirror.css', 'css/vendor/jquery.treeview.css'],
+      'source_filenames': ['sass/course.scss', 'js/vendor/CodeMirror/codemirror.css', 'css/vendor/jquery.treeview.css', 'css/vendor/jquery-ui-1.8.16.custom.css', 'css/vendor/jquery.qtip.min.css'],
       'output_filename': 'css/lms-course.css',
       },
     'ie-fixes': {

lms/static/js/jquery.treeview.js

+/*
+ * Treeview 1.5pre - jQuery plugin to hide and show branches of a tree
+ * 
+ * http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
+ * http://docs.jquery.com/Plugins/Treeview
+ *
+ * Copyright (c) 2007 Jörn Zaefferer
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * Revision: $Id: jquery.treeview.js 5759 2008-07-01 07:50:28Z joern.zaefferer $
+ *
+ */
+
+;(function($) {
+
+	// TODO rewrite as a widget, removing all the extra plugins
+	$.extend($.fn, {
+		swapClass: function(c1, c2) {
+			var c1Elements = this.filter('.' + c1);
+			this.filter('.' + c2).removeClass(c2).addClass(c1);
+			c1Elements.removeClass(c1).addClass(c2);
+			return this;
+		},
+		replaceClass: function(c1, c2) {
+			return this.filter('.' + c1).removeClass(c1).addClass(c2).end();
+		},
+		hoverClass: function(className) {
+			className = className || "hover";
+			return this.hover(function() {
+				$(this).addClass(className);
+			}, function() {
+				$(this).removeClass(className);
+			});
+		},
+		heightToggle: function(animated, callback) {
+			animated ?
+				this.animate({ height: "toggle" }, animated, callback) :
+				this.each(function(){
+					jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]();
+					if(callback)
+						callback.apply(this, arguments);
+				});
+		},
+		heightHide: function(animated, callback) {
+			if (animated) {
+				this.animate({ height: "hide" }, animated, callback);
+			} else {
+				this.hide();
+				if (callback)
+					this.each(callback);				
+			}
+		},
+		prepareBranches: function(settings) {
+			if (!settings.prerendered) {
+				// mark last tree items
+				this.filter(":last-child:not(ul)").addClass(CLASSES.last);
+				// collapse whole tree, or only those marked as closed, anyway except those marked as open
+				this.filter((settings.collapsed ? "" : "." + CLASSES.closed) + ":not(." + CLASSES.open + ")").find(">ul").hide();
+			}
+			// return all items with sublists
+			return this.filter(":has(>ul)");
+		},
+		applyClasses: function(settings, toggler) {
+			// TODO use event delegation
+			this.filter(":has(>ul):not(:has(>a))").find(">span").unbind("click.treeview").bind("click.treeview", function(event) {
+				// don't handle click events on children, eg. checkboxes
+				if ( this == event.target )
+					toggler.apply($(this).next());
+			}).add( $("a", this) ).hoverClass();
+			
+			if (!settings.prerendered) {
+				// handle closed ones first
+				this.filter(":has(>ul:hidden)")
+						.addClass(CLASSES.expandable)
+						.replaceClass(CLASSES.last, CLASSES.lastExpandable);
+						
+				// handle open ones
+				this.not(":has(>ul:hidden)")
+						.addClass(CLASSES.collapsable)
+						.replaceClass(CLASSES.last, CLASSES.lastCollapsable);
+						
+	            // create hitarea if not present
+				var hitarea = this.find("div." + CLASSES.hitarea);
+				if (!hitarea.length)
+					hitarea = this.prepend("<div class=\"" + CLASSES.hitarea + "\"/>").find("div." + CLASSES.hitarea);
+				hitarea.removeClass().addClass(CLASSES.hitarea).each(function() {
+					var classes = "";
+					$.each($(this).parent().attr("class").split(" "), function() {
+						classes += this + "-hitarea ";
+					});
+					$(this).addClass( classes );
+				})
+			}
+			
+			// apply event to hitarea
+			this.find("div." + CLASSES.hitarea).click( toggler );
+		},
+		treeview: function(settings) {
+			
+			settings = $.extend({
+				cookieId: "treeview"
+			}, settings);
+			
+			if ( settings.toggle ) {
+				var callback = settings.toggle;
+				settings.toggle = function() {
+					return callback.apply($(this).parent()[0], arguments);
+				};
+			}
+		
+			// factory for treecontroller
+			function treeController(tree, control) {
+				// factory for click handlers
+				function handler(filter) {
+					return function() {
+						// reuse toggle event handler, applying the elements to toggle
+						// start searching for all hitareas
+						toggler.apply( $("div." + CLASSES.hitarea, tree).filter(function() {
+							// for plain toggle, no filter is provided, otherwise we need to check the parent element
+							return filter ? $(this).parent("." + filter).length : true;
+						}) );
+						return false;
+					};
+				}
+				// click on first element to collapse tree
+				$("a:eq(0)", control).click( handler(CLASSES.collapsable) );
+				// click on second to expand tree
+				$("a:eq(1)", control).click( handler(CLASSES.expandable) );
+				// click on third to toggle tree
+				$("a:eq(2)", control).click( handler() ); 
+			}
+		
+			// handle toggle event
+			function toggler() {
+				$(this)
+					.parent()
+					// swap classes for hitarea
+					.find(">.hitarea")
+						.swapClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
+						.swapClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
+					.end()
+					// swap classes for parent li
+					.swapClass( CLASSES.collapsable, CLASSES.expandable )
+					.swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
+					// find child lists
+					.find( ">ul" )
+					// toggle them
+					.heightToggle( settings.animated, settings.toggle );
+				if ( settings.unique ) {
+					$(this).parent()
+						.siblings()
+						// swap classes for hitarea
+						.find(">.hitarea")
+							.replaceClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
+							.replaceClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea )
+						.end()
+						.replaceClass( CLASSES.collapsable, CLASSES.expandable )
+						.replaceClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
+						.find( ">ul" )
+						.heightHide( settings.animated, settings.toggle );
+				}
+			}
+			this.data("toggler", toggler);
+			
+			function serialize() {
+				function binary(arg) {
+					return arg ? 1 : 0;
+				}
+				var data = [];
+				branches.each(function(i, e) {
+					data[i] = $(e).is(":has(>ul:visible)") ? 1 : 0;
+				});
+				$.cookie(settings.cookieId, data.join(""), settings.cookieOptions );
+			}
+			
+			function deserialize() {
+				var stored = $.cookie(settings.cookieId);
+				if ( stored ) {
+					var data = stored.split("");
+					branches.each(function(i, e) {
+						$(e).find(">ul")[ parseInt(data[i]) ? "show" : "hide" ]();
+					});
+				}
+			}
+			
+			// add treeview class to activate styles
+			this.addClass("treeview");
+			
+			// prepare branches and find all tree items with child lists
+			var branches = this.find("li").prepareBranches(settings);
+			
+			switch(settings.persist) {
+			case "cookie":
+				var toggleCallback = settings.toggle;
+				settings.toggle = function() {
+					serialize();
+					if (toggleCallback) {
+						toggleCallback.apply(this, arguments);
+					}
+				};
+				deserialize();
+				break;
+			case "location":
+				var current = this.find("a").filter(function() {
+					return this.href.toLowerCase() == location.href.toLowerCase();
+				});
+				if ( current.length ) {
+					// TODO update the open/closed classes
+					var items = current.addClass("selected").parents("ul, li").add( current.next() ).show();
+					if (settings.prerendered) {
+						// if prerendered is on, replicate the basic class swapping
+						items.filter("li")
+							.swapClass( CLASSES.collapsable, CLASSES.expandable )
+							.swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
+							.find(">.hitarea")
+								.swapClass( CLASSES.collapsableHitarea, CLASSES.expandableHitarea )
+								.swapClass( CLASSES.lastCollapsableHitarea, CLASSES.lastExpandableHitarea );
+					}
+				}
+				break;
+			}
+			
+			branches.applyClasses(settings, toggler);
+				
+			// if control option is set, create the treecontroller and show it
+			if ( settings.control ) {
+				treeController(this, settings.control);
+				$(settings.control).show();
+			}
+			
+			return this;
+		}
+	});
+	
+	// classes used by the plugin
+	// need to be styled via external stylesheet, see first example
+	$.treeview = {};
+	var CLASSES = ($.treeview.classes = {
+		open: "open",
+		closed: "closed",
+		expandable: "expandable",
+		expandableHitarea: "expandable-hitarea",
+		lastExpandableHitarea: "lastExpandable-hitarea",
+		collapsable: "collapsable",
+		collapsableHitarea: "collapsable-hitarea",
+		lastCollapsableHitarea: "lastCollapsable-hitarea",
+		lastCollapsable: "lastCollapsable",
+		lastExpandable: "lastExpandable",
+		last: "last",
+		hitarea: "hitarea"
+	});
+	
+})(jQuery);
\ No newline at end of file

lms/static/sass/base/_mixins.scss

+// Line-height
+@function lh($amount: 1) {
+  @return $body-line-height * $amount;
+}
+
+@mixin hide-text(){
+  text-indent: -9999px;
+  overflow: hidden;
+  display: block;
+}
+
 @mixin vertically-and-horizontally-centered ( $height, $width ) {
   left: 50%;
   margin-left: -$width / 2;

lms/static/sass/base/_variables.scss

@@ -16,3 +16,17 @@ $pink: rgb(182,37,104);
 $yellow: rgb(255, 252, 221);
 $error-red: rgb(253, 87, 87);
 
+// old variables
+$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+$body-font-size: 14px;
+$body-line-height: golden-ratio($body-font-size, 1);
+
+$fg-max-width: 1400px;
+$fg-min-width: 810px;
+
+$light-gray: #ddd;
+$dark-gray: #333;
+$mit-red: #993333;
+$cream: #F6EFD4;
+$text-color: $dark-gray;
+$border-color: $light-gray;

lms/static/sass/course.scss

@@ -8,22 +8,39 @@
 @import 'base/extends';
 @import 'base/animations';
 
-// Course styles
-@import 'course/courseware_subnav';
-
-// Courseware styles
-@import 'course/old/base/variables';
-@import 'course/old/base/extends';
-@import 'course/old/base/functions';
-
+// Course base / layout styles
+@import 'course/layout/courseware_subnav';
+@import 'course/base/extends';
 @import 'module/module-styles.scss';
 
-@import 'course/old/courseware/courseware';
-@import 'course/old/courseware/sidebar';
-@import 'course/old/courseware/amplifier';
-// @import 'course/old/courseware/problems';
+// courseware
+@import 'course/courseware/courseware';
+@import 'course/courseware/sidebar';
+@import 'course/courseware/amplifier';
+
+// wiki
+@import "course/wiki/basic-html";
+@import "course/wiki/sidebar";
+@import "course/wiki/create";
+@import "course/wiki/wiki";
+@import "course/wiki/table";
 
-@import "course/old/info";
+// pages
+@import "course/info";
+@import "course/textbook";
+@import "course/profile";
+@import "course/gradebook";
 
-@import "course/old/plugins/jquery-ui-1.8.16.custom", "course/old/plugins/jquery.qtip.min";
-@import "course/old/textbook";
+// Askbot / Discussion styles
+@import "course/discussion/askbot-original";
+@import "course/discussion/discussion";
+@import "course/discussion/sidebar";
+@import "course/discussion/questions";
+@import "course/discussion/tags";
+@import "course/discussion/question-view" ;
+@import "course/discussion/answers";
+@import "course/discussion/forms";
+@import "course/discussion/form-wmd-toolbar";
+@import "course/discussion/modals";
+@import "course/discussion/profile";
+@import "course/discussion/badges";

lms/static/sass/course/old/_info.scss → lms/static/sass/course/_info.scss

@@ -14,6 +14,7 @@ div.info-wrapper {
 
     > ol {
       list-style: none;
+      padding-left: 0;
 
       > li {
         @extend .clearfix;
@@ -85,6 +86,7 @@ div.info-wrapper {
     ol {
       background: none;
       list-style: none;
+      padding-left: 0;
 
       li {
         @extend .clearfix;

lms/static/sass/course/old/base/_extends.scss → lms/static/sass/course/base/_extends.scss

-.clearfix:after {
-  clear: both;
-  content: ".";
-  display: block;
-  height: 0;
-  visibility: hidden;
-}
-
 .wrapper {
   margin: 0 auto;
   max-width: $fg-max-width;
@@ -17,10 +9,6 @@
     display: table;
     width: flex-grid(12);
     overflow: hidden;
-
-    @media screen and (min-width: 1400px) {
-      @include border-radius(4px);
-    }
   }
 }
 
@@ -29,6 +17,7 @@ h1.top-header {
   border-bottom: 1px solid #e3e3e3;
   margin: (-(lh())) (-(lh())) lh();
   padding: lh();
+  text-align: left;
 }
 
 .button {
@@ -82,7 +71,6 @@ h1.top-header {
 }
 
 .content {
-  @include box-shadow(inset 0 0 2px 3px #f3f3f3);
   @include box-sizing(border-box);
   display: table-cell;
   padding: lh();
@@ -96,15 +84,11 @@ h1.top-header {
 }
 
 .sidebar {
-  background: #e3e3e3;
-  @include border-radius(4px 0 0 4px);
   border-right: 1px solid #d3d3d3;
-  @include box-shadow( inset 0 0 0 1px #f6f6f6);
   @include box-sizing(border-box);
   display: table-cell;
-  font-family: $body-font-family;
+  font-family: $sans-serif;
   position: relative;
-  text-shadow: 0 1px 0 #f1f1f1;
   vertical-align: top;
   width: flex-grid(3);
 
@@ -113,6 +97,7 @@ h1.top-header {
    font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
+   font-family: $sans-serif;
   }
 
   a {
@@ -122,7 +107,6 @@ h1.top-header {
 
   .bottom-border {
     border-bottom: 1px solid #d3d3d3;
-    @include box-shadow(0 1px 0 #eee);
   }
 
   @media print {
@@ -151,10 +135,7 @@ h1.top-header {
     }
 
     &.active {
-      background: none;
-      @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
       border-bottom: 1px solid #d3d3d3;
-      @include box-shadow(inset 0 1px 0 0 #eee);
       color: #000;
       font-weight: bold;
 
@@ -203,9 +184,7 @@ h1.top-header {
   background: $cream;
   border-bottom: 1px solid darken($cream, 10%);
   border-top: 1px solid #fff;
-  // @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
   font-size: 12px;
-  // height:46px;
   line-height: 46px;
   text-shadow: 0 1px 0 #fff;
 

lms/static/sass/course/old/courseware/_courseware.scss → lms/static/sass/course/courseware/_courseware.scss

@@ -8,7 +8,7 @@ body.courseware {
   max-height: 100%;
 
   .container {
-    margin-bottom: 40px;
+    padding-bottom: 40px;
     margin-top: 20px;
   }
 

lms/static/sass/course/old/courseware/_sidebar.scss → lms/static/sass/course/courseware/_sidebar.scss

@@ -45,7 +45,6 @@ section.course-index {
     ul.ui-accordion-content {
       @include border-radius(0);
       @include box-shadow(inset -1px 0 0 #e6e6e6);
-      background: #dadada;
       border: none;
       font-size: 12px;
       margin: 0;
@@ -66,6 +65,7 @@ section.course-index {
 
           p {
             font-weight: bold;
+            font-family: $sans-serif;
             margin-bottom: 0;
 
             span.subtitle {

lms/static/sass/course/old/discussion/_askbot-original.scss → lms/static/sass/course/discussion/_askbot-original.scss

@@ -1820,27 +1820,27 @@ body.anon #searchbar {
 .tabbar-user {
   width: 375px; }
 
-.user {
-  padding: 5px;
-  line-height: 140%;
-  width: 166px;
-  border: #eee 1px solid;
-  margin-bottom: 5px;
-  border-radius: 3px;
-  -ms-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  -khtml-border-radius: 3px;
-  .user-micro-info {
-    color: #525252; }
-  ul {
-    margin: 0;
-    list-style-type: none; }
-  .thumb {
-    clear: both;
-    float: left;
-    margin-right: 4px;
-    display: inline; } }
+// .user {
+//   padding: 5px;
+//   line-height: 140%;
+//   width: 166px;
+//   border: #eee 1px solid;
+//   margin-bottom: 5px;
+//   border-radius: 3px;
+//   -ms-border-radius: 3px;
+//   -moz-border-radius: 3px;
+//   -webkit-border-radius: 3px;
+//   -khtml-border-radius: 3px;
+//   .user-micro-info {
+//     color: #525252; }
+//   ul {
+//     margin: 0;
+//     list-style-type: none; }
+//   .thumb {
+//     clear: both;
+//     float: left;
+//     margin-right: 4px;
+//     display: inline; } }
 
 // .tabbar-tags {
 //   width: 270px;

lms/static/sass/course/old/README.md

-SASS
-====
-
-This project is using Sass to generate its CSS. Sass is a CSS preprocessor that
-allows for faster development of CSS. For more information about sass:
-
-   http://sass-lang.com
-
-Install SASS
-------------
-
-To use sass, make sure that you have RubyGems install, then you can use Bundler:
-
-    $ gem install bundler
-    $ bundle install
-
-This should ensure that you have all the dependencies required for compiling.
-
-Compiling
----------
-
-The dev server will automatically compile sass files that have changed. Simply start
-the server using:
-    
-    $ rake runserver
-
-To run it along side of development:
-
-    $ sass --watch lms/static/sass:lms/static/sass -r ./lms/static/sass/bourbon/lib/bourbon.rb

lms/static/sass/course/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/course/old/base/_base.scss

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

lms/static/sass/course/old/base/_font-face.scss

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

lms/static/sass/course/old/base/_functions.scss

-// Line-height
-@function lh($amount: 1) {
-  @return $body-line-height * $amount;
-}
-
-@mixin hide-text(){
-  text-indent: -9999px;
-  overflow: hidden;
-  display: block;
-}

lms/static/sass/course/old/base/_reset.scss

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

lms/static/sass/course/old/base/_variables.scss

-// Variables
-// ---------------------------------------- //
-
-// Type
-$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-$body-font-size: 14px;
-$body-line-height: golden-ratio($body-font-size, 1);
-
-// Grid
-$fg-column: 80px;
-$fg-gutter: 25px;
-$fg-max-columns: 12;
-$fg-max-width: 1400px;
-$fg-min-width: 810px;
-
-// Color
-$light-gray: #ddd;
-$dark-gray: #333;
-$mit-red: #993333;
-$cream: #F6EFD4;
-$text-color: $dark-gray;
-$border-color: $light-gray;

lms/static/sass/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/course/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/static/sass/course/old/layout/_footer.scss

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

lms/static/sass/course/old/layout/_header.scss

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

lms/static/sass/course/old/layout/_layout.scss

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

lms/static/sass/course/old/layout/_leanmodal.scss

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

lms/static/sass/course/old/marketing-ie.scss

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

lms/static/sass/course/old/marketing.scss

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

lms/static/sass/course/old/marketing/_base.scss

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

lms/static/sass/course/old/marketing/_extends.scss

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

lms/static/sass/course/old/marketing/_footer.scss

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

lms/static/sass/course/old/marketing/_header.scss

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

lms/static/sass/course/old/marketing/_index.scss

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

lms/static/sass/course/old/marketing/_variables.scss

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

lms/static/sass/course/old/print.scss

-

lms/templates/courseware-error.html

@@ -4,7 +4,7 @@
 
 <%include file="course_navigation.html" args="active_page='courseware'" />
 
-<section class="main-content">
+<section class="container">
   <section class="outside-app">
     <h1>There has been an error on the <span class="edx">edX</span> servers</h1>
     <p>We're sorry, this module is temporarily unavailable. Our staff is working to fix it as soon as possible. Please email us at <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a> to report any problems or downtime.</p>

lms/templates/gradebook.html

@@ -20,7 +20,7 @@
 </%block>
 
 <%include file="navigation.html" args="active_page=''" />
-<section class="main-content">
+<section class="container">
 <div class="gradebook-wrapper">
   <section class="gradebook-content">
     <h1>Gradebook</h1>

lms/templates/gradebook_profilegraphs.html

@@ -14,7 +14,7 @@
 </%block>
 
 <%include file="navigation.html" args="active_page=''" />
-<section class="main-content">
+<section class="container">
 <div class="gradebook-wrapper">
   <section class="gradebook-content">
     <h1>Gradebook</h1>

lms/templates/info.html

@@ -10,26 +10,33 @@
   from courseware.courses import get_course_info_section
 %>
 
+<%block name="js_extra">
+  <script type="text/javascript" src="${static.url('js/jquery.treeview.js')}"></script>
+  <script type="text/javascript" charset="utf-8">
+$(document).ready(function(){
+    $(".handouts").treeview({collapsed:true, unique:true/*, cookieId: "treeview-book-nav", persist: "cookie"*/});
+    });
+  </script>
+</%block>
+
 <section class="container">
-  <section class="course-content">
-    <section class="courseware">
-      <div class="info-wrapper">
-        % if user.is_authenticated():
-        <section class="updates">
-          ${get_course_info_section(course, 'updates')}
-        </section>
-        <section aria-label="Handout Navigation" class="handouts">
-          ${get_course_info_section(course, 'handouts')}
-        </section>
-        % else:
-        <section class="updates">
-          ${get_course_info_section(course, 'guest_updates')}
-        </section>
-        <section aria-label="Handout Navigation" class="handouts">
-          ${get_course_info_section(course, 'guest_handouts')}
-        </section>
-        % endif
-      </div>
-    </section>
+  <section class="courseware">
+    <div class="info-wrapper">
+      % if user.is_authenticated():
+      <section class="updates">
+        ${get_course_info_section(course, 'updates')}
+      </section>
+      <section aria-label="Handout Navigation" class="handouts">
+        ${get_course_info_section(course, 'handouts')}
+      </section>
+      % else:
+      <section class="updates">
+        ${get_course_info_section(course, 'guest_updates')}
+      </section>
+      <section aria-label="Handout Navigation" class="handouts">
+        ${get_course_info_section(course, 'guest_handouts')}
+      </section>
+      % endif
+    </div>
   </section>
 </section>

lms/templates/mitxhome.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>MITx Home</title></%block>
-
-<%include file="navigation.html" args="active_page='info'" />
-
-<section class="main-content">
-  <div class="info-wrapper">
-    <section class="updates">
-   <h2>Welcome to MITx</h2>
-   <hr width="100%">
-   <h3>Courses available:</h3>
-    <ul>
-      % for coursename, info in courseinfo.items():
-        % if info['active']:
-          <li><a href=${ MITX_ROOT_URL }/courseware/${coursename}/>${info['title']} (${coursename})</a></li>
-	% endif
-      % endfor
-  </ul>
-  </section>
-</div>
-</section>

lms/templates/name_changes.html

 <%inherit file="main.html" />
 <%include file="navigation.html" args="active_page=''" />
-<section class="main-content">
 <script>
 function name_confirm(id) {
   postJSON('/accept_name_change',{"id":id},
@@ -25,6 +24,7 @@ function name_deny(id) {
 }
 </script>
 
+<section class="container">
 <div class="gradebook-wrapper">
   <section class="gradebook-content">
   <h1>Pending name changes</h1>

lms/templates/simplewiki/simplewiki_base.html

@@ -83,7 +83,6 @@
 %endif
 
 <section class="container">
-<section class="main-content">
   <div class="wiki-wrapper">
     <%block name="wiki_panel">
     <div aria-label="Wiki Navigation" id="wiki_panel">
@@ -162,6 +161,4 @@
     </section>
   </div>
 </section>
-
-</section>
 </%block>

lms/templates/staticbook.html

@@ -7,6 +7,7 @@
 </%block>
 
 <%block name="js_extra">
+  <script type="text/javascript" src="${static.url('js/jquery.treeview.js')}"></script>
 <script>
 var page=${ page };
 
@@ -62,7 +63,6 @@ $("#open_close_accordion a").click(function(){
 <%include file="course_navigation.html" args="active_page='book'" />
 
 <section class="container">
-<section class="main-content">
   <div class="book-wrapper">
 
     <section aria-label="Textbook Navigation" class="book-sidebar">
@@ -105,4 +105,3 @@ $("#open_close_accordion a").click(function(){
     </section>
   </div>
 </section>
-</section>