Make collectstatic compile .coffee files, and preserve the askbot workflow using guard

2012-05-18 15:10:10 -04:00
parent 8823346a0c
commit 6b15303d89
144 changed files with 70 additions and 215 deletions
--- a/static/coffee/README.md
+++ b/static/coffee/README.md
@@ -0,0 +1,53 @@
+CoffeeScript
+============
+
+This folder contains the CoffeeScript file that will be compiled to the static
+directory. By default, we're compile and merge all the files ending `.coffee`
+into `static/js/application.js`.
+
+Install the Compiler
+--------------------
+
+CoffeeScript compiler are written in JavaScript. You'll need to install Node and
+npm (Node Package Manager) to be able to install the CoffeeScript compiler.
+
+### Mac OS X
+
+Install Node via Homebrew, then use npm:
+
+    $ brew install node
+    $ curl http://npmjs.org/install.sh | sh
+    $ npm install -g git://github.com/jashkenas/coffee-script.git
+
+(Note that we're using the edge version of CoffeeScript for now, as there was
+some issue with directory watching in 1.3.1.)
+
+Try to run `coffee` and make sure you get a coffee prompt.
+
+### Debian/Ubuntu
+
+Conveniently, you can install Node via `apt-get`, then use npm:
+
+    $ sudo apt-get install nodejs npm &&
+    $ sudo npm install -g git://github.com/jashkenas/coffee-script.git
+
+Compiling
+---------
+
+We're using Guard to watch your folder and automatic compile those CoffeeScript
+files. First, install guard by using Bundler:
+
+    $ gem install bundler
+    $ bundle install
+
+Then you can run this command:
+
+    $ bundle exec guard
+
+Testing
+-------
+
+We're also using Jasmine to unit-testing the JavaScript files. All the specs are
+written in CoffeeScript for the consistency. To access the test cases, start the
+server in debug mode, navigate to http://127.0.0.1:8000/_jasmine to see the
+test result.
--- a/static/coffee/files.json
+++ b/static/coffee/files.json
@@ -0,0 +1,10 @@
+{
+  "js_files": [
+    "/static/js/jquery-1.6.2.min.js",
+    "/static/js/jquery-ui-1.8.16.custom.min.js",
+    "/static/js/jquery.leanModal.js"
+  ],
+  "static_files": [
+    "js/application.js"
+  ]
+}
--- a/static/coffee/fixtures/accordion.html
+++ b/static/coffee/fixtures/accordion.html
@@ -0,0 +1,6 @@
+<div class="course-wrapper">
+  <header id="open_close_accordion">
+    <a href="#">close</a>
+  </header>
+  <div id="accordion"></div>
+</div>
--- a/static/coffee/fixtures/calculator.html
+++ b/static/coffee/fixtures/calculator.html
@@ -0,0 +1,18 @@
+<ul>
+  <li class="calc-main">
+    <a href="#" class="calc">Calculator</a>
+    <div id="calculator_wrapper">
+      <form id="calculator">
+        <div class="input-wrapper">
+          <input type="text" id="calculator_input" />
+          <div class="help-wrapper">
+            <a href="#">Hints</a>
+            <dl class="help"></dl>
+          </div>
+        </div>
+        <input id="calculator_button" type="submit" value="="/>
+        <input type="text" id="calculator_output" readonly />
+      </form>
+    </div>
+  </li>
+</ul>
--- a/static/coffee/fixtures/feedback_form.html
+++ b/static/coffee/fixtures/feedback_form.html
@@ -0,0 +1,7 @@
+<div id="feedback_div">
+  <form>
+    <label>Subject:</label> <input type="text" id="feedback_subject">
+    <label>Feedback: </label><textarea id="feedback_message"></textarea>
+    <input id="feedback_button" type="button" value="Submit">
+  </form>
+</div>
--- a/static/coffee/spec/calculator_spec.coffee
+++ b/static/coffee/spec/calculator_spec.coffee
@@ -0,0 +1,68 @@
+describe 'Calculator', ->
+  beforeEach ->
+    loadFixtures 'calculator.html'
+    @calculator = new Calculator
+
+  describe 'bind', ->
+    beforeEach ->
+      Calculator.bind()
+
+    it 'bind the calculator button', ->
+      expect($('.calc')).toHandleWith 'click', @calculator.toggle
+
+    it 'bind the help button', ->
+      # These events are bind by $.hover()
+      expect($('div.help-wrapper a')).toHandleWith 'mouseenter', @calculator.helpToggle
+      expect($('div.help-wrapper a')).toHandleWith 'mouseleave', @calculator.helpToggle
+
+    it 'prevent default behavior on help button', ->
+      $('div.help-wrapper a').click (e) ->
+        expect(e.isDefaultPrevented()).toBeTruthy()
+      $('div.help-wrapper a').click()
+
+    it 'bind the calculator submit', ->
+      expect($('form#calculator')).toHandleWith 'submit', @calculator.calculate
+
+    it 'prevent default behavior on form submit', ->
+      $('form#calculator').submit (e) ->
+        expect(e.isDefaultPrevented()).toBeTruthy()
+        e.preventDefault()
+      $('form#calculator').submit()
+
+  describe 'toggle', ->
+    it 'toggle the calculator and focus the input', ->
+      spyOn $.fn, 'focus'
+      @calculator.toggle()
+
+      expect($('li.calc-main')).toHaveClass('open')
+      expect($('#calculator_wrapper #calculator_input').focus).toHaveBeenCalled()
+
+    it 'toggle the close button on the calculator button', ->
+      @calculator.toggle()
+      expect($('.calc')).toHaveClass('closed')
+
+      @calculator.toggle()
+      expect($('.calc')).not.toHaveClass('closed')
+
+  describe 'helpToggle', ->
+    it 'toggle the help overlay', ->
+      @calculator.helpToggle()
+      expect($('.help')).toHaveClass('shown')
+
+      @calculator.helpToggle()
+      expect($('.help')).not.toHaveClass('shown')
+
+  describe 'calculate', ->
+    beforeEach ->
+      $('#calculator_input').val '1+2'
+      spyOn($, 'getJSON').andCallFake (url, data, callback) ->
+        callback({ result: 3 })
+      @calculator.calculate()
+
+    it 'send data to /calculate', ->
+      expect($.getJSON).toHaveBeenCalledWith '/calculate',
+        equation: '1+2'
+      , jasmine.any(Function)
+
+    it 'update the calculator output', ->
+      expect($('#calculator_output').val()).toEqual('3')
--- a/static/coffee/spec/calculator_spec.js
+++ b/static/coffee/spec/calculator_spec.js
@@ -0,0 +1,79 @@
+(function() {
+
+  describe('Calculator', function() {
+    beforeEach(function() {
+      loadFixtures('calculator.html');
+      return this.calculator = new Calculator;
+    });
+    describe('bind', function() {
+      beforeEach(function() {
+        return Calculator.bind();
+      });
+      it('bind the calculator button', function() {
+        return expect($('.calc')).toHandleWith('click', this.calculator.toggle);
+      });
+      it('bind the help button', function() {
+        expect($('div.help-wrapper a')).toHandleWith('mouseenter', this.calculator.helpToggle);
+        return expect($('div.help-wrapper a')).toHandleWith('mouseleave', this.calculator.helpToggle);
+      });
+      it('prevent default behavior on help button', function() {
+        $('div.help-wrapper a').click(function(e) {
+          return expect(e.isDefaultPrevented()).toBeTruthy();
+        });
+        return $('div.help-wrapper a').click();
+      });
+      it('bind the calculator submit', function() {
+        return expect($('form#calculator')).toHandleWith('submit', this.calculator.calculate);
+      });
+      return it('prevent default behavior on form submit', function() {
+        $('form#calculator').submit(function(e) {
+          expect(e.isDefaultPrevented()).toBeTruthy();
+          return e.preventDefault();
+        });
+        return $('form#calculator').submit();
+      });
+    });
+    describe('toggle', function() {
+      it('toggle the calculator and focus the input', function() {
+        spyOn($.fn, 'focus');
+        this.calculator.toggle();
+        expect($('li.calc-main')).toHaveClass('open');
+        return expect($('#calculator_wrapper #calculator_input').focus).toHaveBeenCalled();
+      });
+      return it('toggle the close button on the calculator button', function() {
+        this.calculator.toggle();
+        expect($('.calc')).toHaveClass('closed');
+        this.calculator.toggle();
+        return expect($('.calc')).not.toHaveClass('closed');
+      });
+    });
+    describe('helpToggle', function() {
+      return it('toggle the help overlay', function() {
+        this.calculator.helpToggle();
+        expect($('.help')).toHaveClass('shown');
+        this.calculator.helpToggle();
+        return expect($('.help')).not.toHaveClass('shown');
+      });
+    });
+    return describe('calculate', function() {
+      beforeEach(function() {
+        $('#calculator_input').val('1+2');
+        spyOn($, 'getJSON').andCallFake(function(url, data, callback) {
+          return callback({
+            result: 3
+          });
+        });
+        return this.calculator.calculate();
+      });
+      it('send data to /calculate', function() {
+        return expect($.getJSON).toHaveBeenCalledWith('/calculate', {
+          equation: '1+2'
+        }, jasmine.any(Function));
+      });
+      return it('update the calculator output', function() {
+        return expect($('#calculator_output').val()).toEqual('3');
+      });
+    });
+  });
+
+}).call(this);
--- a/static/coffee/spec/courseware_spec.coffee
+++ b/static/coffee/spec/courseware_spec.coffee
@@ -0,0 +1,77 @@
+describe 'Courseware', ->
+  describe 'bind', ->
+    it 'bind the navigation', ->
+      spyOn Courseware.Navigation, 'bind'
+      Courseware.bind()
+      expect(Courseware.Navigation.bind).toHaveBeenCalled()
+
+  describe 'Navigation', ->
+    beforeEach ->
+      loadFixtures 'accordion.html'
+      @navigation = new Courseware.Navigation
+
+    describe 'bind', ->
+      describe 'when the #accordion exists', ->
+        describe 'when there is an active section', ->
+          it 'activate the accordion with correct active section', ->
+            spyOn $.fn, 'accordion'
+            $('#accordion').append('<ul><li></li></ul><ul><li class="active"></li></ul>')
+            Courseware.Navigation.bind()
+            expect($('#accordion').accordion).toHaveBeenCalledWith
+              active: 1
+              header: 'h3'
+              autoHeight: false
+
+        describe 'when there is no active section', ->
+          it 'activate the accordian with section 1 as active', ->
+            spyOn $.fn, 'accordion'
+            $('#accordion').append('<ul><li></li></ul><ul><li></li></ul>')
+            Courseware.Navigation.bind()
+            expect($('#accordion').accordion).toHaveBeenCalledWith
+              active: 1
+              header: 'h3'
+              autoHeight: false
+
+        it 'binds the accordionchange event', ->
+          Courseware.Navigation.bind()
+          expect($('#accordion')).toHandleWith 'accordionchange', @navigation.log
+
+        it 'bind the navigation toggle', ->
+          Courseware.Navigation.bind()
+          expect($('#open_close_accordion a')).toHandleWith 'click', @navigation.toggle
+
+      describe 'when the #accordion does not exists', ->
+        beforeEach ->
+          $('#accordion').remove()
+
+        it 'does not activate the accordion', ->
+          spyOn $.fn, 'accordion'
+          Courseware.Navigation.bind()
+          expect($('#accordion').accordion).wasNotCalled()
+
+    describe 'toggle', ->
+      it 'toggle closed class on the wrapper', ->
+        $('.course-wrapper').removeClass('closed')
+
+        @navigation.toggle()
+        expect($('.course-wrapper')).toHaveClass('closed')
+
+        @navigation.toggle()
+        expect($('.course-wrapper')).not.toHaveClass('closed')
+
+    describe 'log', ->
+      beforeEach ->
+        window.log_event = ->
+        spyOn window, 'log_event'
+
+      it 'submit event log', ->
+        @navigation.log {}, {
+          newHeader:
+            text: -> "new"
+          oldHeader:
+            text: -> "old"
+        }
+
+        expect(window.log_event).toHaveBeenCalledWith 'accordion',
+          newheader: 'new'
+          oldheader: 'old'
--- a/static/coffee/spec/courseware_spec.js
+++ b/static/coffee/spec/courseware_spec.js
@@ -0,0 +1,98 @@
+(function() {
+
+  describe('Courseware', function() {
+    describe('bind', function() {
+      return it('bind the navigation', function() {
+        spyOn(Courseware.Navigation, 'bind');
+        Courseware.bind();
+        return expect(Courseware.Navigation.bind).toHaveBeenCalled();
+      });
+    });
+    return describe('Navigation', function() {
+      beforeEach(function() {
+        loadFixtures('accordion.html');
+        return this.navigation = new Courseware.Navigation;
+      });
+      describe('bind', function() {
+        describe('when the #accordion exists', function() {
+          describe('when there is an active section', function() {
+            return it('activate the accordion with correct active section', function() {
+              spyOn($.fn, 'accordion');
+              $('#accordion').append('<ul><li></li></ul><ul><li class="active"></li></ul>');
+              Courseware.Navigation.bind();
+              return expect($('#accordion').accordion).toHaveBeenCalledWith({
+                active: 1,
+                header: 'h3',
+                autoHeight: false
+              });
+            });
+          });
+          describe('when there is no active section', function() {
+            return it('activate the accordian with section 1 as active', function() {
+              spyOn($.fn, 'accordion');
+              $('#accordion').append('<ul><li></li></ul><ul><li></li></ul>');
+              Courseware.Navigation.bind();
+              return expect($('#accordion').accordion).toHaveBeenCalledWith({
+                active: 1,
+                header: 'h3',
+                autoHeight: false
+              });
+            });
+          });
+          it('binds the accordionchange event', function() {
+            Courseware.Navigation.bind();
+            return expect($('#accordion')).toHandleWith('accordionchange', this.navigation.log);
+          });
+          return it('bind the navigation toggle', function() {
+            Courseware.Navigation.bind();
+            return expect($('#open_close_accordion a')).toHandleWith('click', this.navigation.toggle);
+          });
+        });
+        return describe('when the #accordion does not exists', function() {
+          beforeEach(function() {
+            return $('#accordion').remove();
+          });
+          return it('does not activate the accordion', function() {
+            spyOn($.fn, 'accordion');
+            Courseware.Navigation.bind();
+            return expect($('#accordion').accordion).wasNotCalled();
+          });
+        });
+      });
+      describe('toggle', function() {
+        return it('toggle closed class on the wrapper', function() {
+          $('.course-wrapper').removeClass('closed');
+          this.navigation.toggle();
+          expect($('.course-wrapper')).toHaveClass('closed');
+          this.navigation.toggle();
+          return expect($('.course-wrapper')).not.toHaveClass('closed');
+        });
+      });
+      return describe('log', function() {
+        beforeEach(function() {
+          window.log_event = function() {};
+          return spyOn(window, 'log_event');
+        });
+        return it('submit event log', function() {
+          this.navigation.log({}, {
+            newHeader: {
+              text: function() {
+                return "new";
+              }
+            },
+            oldHeader: {
+              text: function() {
+                return "old";
+              }
+            }
+          });
+          return expect(window.log_event).toHaveBeenCalledWith('accordion', {
+            newheader: 'new',
+            oldheader: 'old'
+          });
+        });
+      });
+    });
+  });
+
+}).call(this);
--- a/static/coffee/spec/feedback_form_spec.coffee
+++ b/static/coffee/spec/feedback_form_spec.coffee
@@ -0,0 +1,28 @@
+describe 'FeedbackForm', ->
+  beforeEach ->
+    loadFixtures 'feedback_form.html'
+
+  describe 'bind', ->
+    beforeEach ->
+      FeedbackForm.bind()
+      spyOn($, 'post').andCallFake (url, data, callback, format) ->
+        callback()
+
+    it 'binds to the #feedback_button', ->
+      expect($('#feedback_button')).toHandle 'click'
+
+    it 'post data to /send_feedback on click', ->
+      $('#feedback_subject').val 'Awesome!'
+      $('#feedback_message').val 'This site is really good.'
+      $('#feedback_button').click()
+
+      expect($.post).toHaveBeenCalledWith '/send_feedback', {
+        subject: 'Awesome!'
+        message: 'This site is really good.'
+        url: window.location.href
+      }, jasmine.any(Function), 'json'
+
+    it 'replace the form with a thank you message', ->
+      $('#feedback_button').click()
+
+      expect($('#feedback_div').html()).toEqual 'Feedback submitted. Thank you'
--- a/static/coffee/spec/feedback_form_spec.js
+++ b/static/coffee/spec/feedback_form_spec.js
@@ -0,0 +1,34 @@
+(function() {
+
+  describe('FeedbackForm', function() {
+    beforeEach(function() {
+      return loadFixtures('feedback_form.html');
+    });
+    return describe('bind', function() {
+      beforeEach(function() {
+        FeedbackForm.bind();
+        return spyOn($, 'post').andCallFake(function(url, data, callback, format) {
+          return callback();
+        });
+      });
+      it('binds to the #feedback_button', function() {
+        return expect($('#feedback_button')).toHandle('click');
+      });
+      it('post data to /send_feedback on click', function() {
+        $('#feedback_subject').val('Awesome!');
+        $('#feedback_message').val('This site is really good.');
+        $('#feedback_button').click();
+        return expect($.post).toHaveBeenCalledWith('/send_feedback', {
+          subject: 'Awesome!',
+          message: 'This site is really good.',
+          url: window.location.href
+        }, jasmine.any(Function), 'json');
+      });
+      return it('replace the form with a thank you message', function() {
+        $('#feedback_button').click();
+        return expect($('#feedback_div').html()).toEqual('Feedback submitted. Thank you');
+      });
+    });
+  });
+
+}).call(this);
--- a/static/coffee/spec/helper.coffee
+++ b/static/coffee/spec/helper.coffee
@@ -0,0 +1 @@
+jasmine.getFixtures().fixturesPath = "/_jasmine/fixtures/"
--- a/static/coffee/spec/helper.js
+++ b/static/coffee/spec/helper.js
@@ -0,0 +1,5 @@
+(function() {
+
+  jasmine.getFixtures().fixturesPath = "/_jasmine/fixtures/";
+
+}).call(this);
--- a/static/coffee/src/.gitignore
+++ b/static/coffee/src/.gitignore
@@ -0,0 +1 @@
+*.js
--- a/static/coffee/src/calculator.coffee
+++ b/static/coffee/src/calculator.coffee
@@ -0,0 +1,20 @@
+class window.Calculator
+  @bind: ->
+    calculator = new Calculator
+    $('.calc').click calculator.toggle
+    $('form#calculator').submit(calculator.calculate).submit (e) ->
+      e.preventDefault()
+    $('div.help-wrapper a').hover(calculator.helpToggle).click (e) ->
+      e.preventDefault()
+
+  toggle: ->
+    $('li.calc-main').toggleClass 'open'
+    $('#calculator_wrapper #calculator_input').focus()
+    $('.calc').toggleClass 'closed'
+
+  helpToggle: ->
+    $('.help').toggleClass 'shown'
+
+  calculate: ->
+    $.getJSON '/calculate', { equation: $('#calculator_input').val() }, (data) ->
+      $('#calculator_output').val(data.result)
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -0,0 +1,22 @@
+class window.Courseware
+  @bind: ->
+    @Navigation.bind()
+
+  class @Navigation
+    @bind: ->
+      if $('#accordion').length
+        navigation = new Navigation
+        active = $('#accordion ul:has(li.active)').index('#accordion ul')
+        $('#accordion').bind('accordionchange', navigation.log).accordion
+          active: if active >= 0 then active else 1
+          header: 'h3'
+          autoHeight: false
+        $('#open_close_accordion a').click navigation.toggle
+
+    log: (event, ui) ->
+      log_event 'accordion',
+        newheader: ui.newHeader.text()
+        oldheader: ui.oldHeader.text()
+
+    toggle: ->
+      $('.course-wrapper').toggleClass('closed')
--- a/static/coffee/src/feedback_form.coffee
+++ b/static/coffee/src/feedback_form.coffee
@@ -0,0 +1,10 @@
+class window.FeedbackForm
+  @bind: ->
+    $('#feedback_button').click ->
+      data =
+        subject: $('#feedback_subject').val()
+        message: $('#feedback_message').val()
+        url: window.location.href
+      $.post '/send_feedback', data, ->
+        $('#feedback_div').html 'Feedback submitted. Thank you'
+      ,'json'
--- a/static/coffee/src/main.coffee
+++ b/static/coffee/src/main.coffee
@@ -0,0 +1,8 @@
+$ ->
+  $.ajaxSetup
+    headers : { 'X-CSRFToken': $.cookie 'csrftoken' }
+
+  Calculator.bind()
+  Courseware.bind()
+  FeedbackForm.bind()
+  $("a[rel*=leanModal]").leanModal()
--- a/static/css
+++ b/static/css
@@ -1 +0,0 @@
-../sass
--- a/static/images/css/.xcf
+++ b/static/images/css/.xcf
--- a/static/images/css/bottomWrapper-bg.jpg
+++ b/static/images/css/bottomWrapper-bg.jpg
--- a/static/images/css/footerWrapper-bg.jpg
+++ b/static/images/css/footerWrapper-bg.jpg
--- a/static/images/css/hat.jpg
+++ b/static/images/css/hat.jpg
--- a/static/images/css/hmenu-sel.jpg
+++ b/static/images/css/hmenu-sel.jpg
--- a/static/images/css/hmenu.jpg
+++ b/static/images/css/hmenu.jpg
--- a/static/images/css/page-bg.jpg
+++ b/static/images/css/page-bg.jpg
--- a/static/images/css/page-vbg.jpg
+++ b/static/images/css/page-vbg.jpg
--- a/static/images/css/topBanner-old.xcf
+++ b/static/images/css/topBanner-old.xcf
--- a/static/images/css/topBanner.jpg
+++ b/static/images/css/topBanner.jpg
--- a/static/images/css/topBanner.png
+++ b/static/images/css/topBanner.png
--- a/static/images/css/topBanner.xcf
+++ b/static/images/css/topBanner.xcf
--- a/static/images/css/topWrapper-bg.jpg
+++ b/static/images/css/topWrapper-bg.jpg
--- a/static/images/ui-bg_flat_0_aaaaaa_40x100.png
+++ b/static/images/ui-bg_flat_0_aaaaaa_40x100.png
--- a/static/images/ui-bg_flat_0_eeeeee_40x100.png
+++ b/static/images/ui-bg_flat_0_eeeeee_40x100.png
--- a/static/images/ui-bg_flat_55_ffffff_40x100.png
+++ b/static/images/ui-bg_flat_55_ffffff_40x100.png
--- a/static/images/ui-bg_flat_75_ffffff_40x100.png
+++ b/static/images/ui-bg_flat_75_ffffff_40x100.png
--- a/static/images/ui-bg_glass_65_023063_1x400.png
+++ b/static/images/ui-bg_glass_65_023063_1x400.png
--- a/static/images/ui-bg_glass_65_ffffff_1x400.png
+++ b/static/images/ui-bg_glass_65_ffffff_1x400.png
--- a/static/images/ui-bg_highlight-soft_100_7fbcdf_1x100.png
+++ b/static/images/ui-bg_highlight-soft_100_7fbcdf_1x100.png
--- a/static/images/ui-bg_highlight-soft_100_bddeff_1x100.png
+++ b/static/images/ui-bg_highlight-soft_100_bddeff_1x100.png
--- a/static/images/ui-bg_highlight-soft_100_f6f6f6_1x100.png
+++ b/static/images/ui-bg_highlight-soft_100_f6f6f6_1x100.png
--- a/static/images/ui-bg_highlight-soft_25_7fbcdf_1x100.png
+++ b/static/images/ui-bg_highlight-soft_25_7fbcdf_1x100.png
--- a/static/images/ui-bg_highlight-soft_25_bddeff_1x100.png
+++ b/static/images/ui-bg_highlight-soft_25_bddeff_1x100.png
--- a/static/images/ui-bg_highlight-soft_50_7fbcfd_1x100.png
+++ b/static/images/ui-bg_highlight-soft_50_7fbcfd_1x100.png
--- a/static/images/ui-icons_031634_256x240.png
+++ b/static/images/ui-icons_031634_256x240.png
--- a/static/images/ui-icons_454545_256x240.png
+++ b/static/images/ui-icons_454545_256x240.png
--- a/static/images/ui-icons_adcc80_256x240.png
+++ b/static/images/ui-icons_adcc80_256x240.png
--- a/static/images/ui-icons_fa720a_256x240.png
+++ b/static/images/ui-icons_fa720a_256x240.png
--- a/static/images/ui-icons_ffffff_256x240.png
+++ b/static/images/ui-icons_ffffff_256x240.png
--- a/static/js/application.js
+++ b/static/js/application.js
@@ -1,121 +0,0 @@
-// Generated by CoffeeScript 1.3.2-pre
-(function() {
-
-  window.Calculator = (function() {
-
-    function Calculator() {}
-
-    Calculator.bind = function() {
-      var calculator;
-      calculator = new Calculator;
-      $('.calc').click(calculator.toggle);
-      $('form#calculator').submit(calculator.calculate).submit(function(e) {
-        return e.preventDefault();
-      });
-      return $('div.help-wrapper a').hover(calculator.helpToggle).click(function(e) {
-        return e.preventDefault();
-      });
-    };
-
-    Calculator.prototype.toggle = function() {
-      $('li.calc-main').toggleClass('open');
-      $('#calculator_wrapper #calculator_input').focus();
-      return $('.calc').toggleClass('closed');
-    };
-
-    Calculator.prototype.helpToggle = function() {
-      return $('.help').toggleClass('shown');
-    };
-
-    Calculator.prototype.calculate = function() {
-      return $.getJSON('/calculate', {
-        equation: $('#calculator_input').val()
-      }, function(data) {
-        return $('#calculator_output').val(data.result);
-      });
-    };
-
-    return Calculator;
-
-  })();
-
-  window.Courseware = (function() {
-
-    function Courseware() {}
-
-    Courseware.bind = function() {
-      return this.Navigation.bind();
-    };
-
-    Courseware.Navigation = (function() {
-
-      function Navigation() {}
-
-      Navigation.bind = function() {
-        var active, navigation;
-        if ($('#accordion').length) {
-          navigation = new Navigation;
-          active = $('#accordion ul:has(li.active)').index('#accordion ul');
-          $('#accordion').bind('accordionchange', navigation.log).accordion({
-            active: active >= 0 ? active : 1,
-            header: 'h3',
-            autoHeight: false
-          });
-          return $('#open_close_accordion a').click(navigation.toggle);
-        }
-      };
-
-      Navigation.prototype.log = function(event, ui) {
-        return log_event('accordion', {
-          newheader: ui.newHeader.text(),
-          oldheader: ui.oldHeader.text()
-        });
-      };
-
-      Navigation.prototype.toggle = function() {
-        return $('.course-wrapper').toggleClass('closed');
-      };
-
-      return Navigation;
-
-    })();
-
-    return Courseware;
-
-  }).call(this);
-
-  window.FeedbackForm = (function() {
-
-    function FeedbackForm() {}
-
-    FeedbackForm.bind = function() {
-      return $('#feedback_button').click(function() {
-        var data;
-        data = {
-          subject: $('#feedback_subject').val(),
-          message: $('#feedback_message').val(),
-          url: window.location.href
-        };
-        return $.post('/send_feedback', data, function() {
-          return $('#feedback_div').html('Feedback submitted. Thank you');
-        }, 'json');
-      });
-    };
-
-    return FeedbackForm;
-
-  })();
-
-  $(function() {
-    $.ajaxSetup({
-      headers: {
-        'X-CSRFToken': $.cookie('csrftoken')
-      }
-    });
-    Calculator.bind();
-    Courseware.bind();
-    FeedbackForm.bind();
-    return $("a[rel*=leanModal]").leanModal();
-  });
-
-}).call(this);
--- a/static/sass/.gitignore
+++ b/static/sass/.gitignore
@@ -0,0 +1 @@
+*.css
--- a/static/sass/README.md
+++ b/static/sass/README.md
@@ -0,0 +1,27 @@
+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
+---------
+
+We're using Guard to watch your folder and automatic compile those SASS files.
+If you already install all the dependencies using Bundler, you can just do:
+
+    $ bundle exec guard
+
+This will execute `django-admin collectstatic`, which will compile the sass files
--- a/static/sass/_gradebook.scss
+++ b/static/sass/_gradebook.scss
@@ -0,0 +1,11 @@
+div.gradebook-wrapper {
+  @extend .table-wrapper;
+
+  section.gradebook-content {
+    @extend .content;
+
+    h1 {
+      @extend .top-header;
+    }
+  }
+}
--- a/static/sass/_help.scss
+++ b/static/sass/_help.scss
@@ -0,0 +1,54 @@
+section.help.main-content {
+  padding: lh();
+
+  h1 {
+    border-bottom: 1px solid #ddd;
+    margin-bottom: lh();
+    margin-top: 0;
+    padding-bottom: lh();
+  }
+
+  p {
+    max-width: 700px;
+  }
+
+  h2 {
+    margin-top: 0;
+  }
+
+  section.self-help {
+    float: left;
+    margin-bottom: lh();
+    margin-right: flex-gutter();
+    width: flex-grid(6);
+
+    ul {
+      margin-left: flex-gutter(6);
+
+      li {
+        margin-bottom: lh(.5);
+      }
+    }
+  }
+
+  section.help-email {
+    float: left;
+    width: flex-grid(6);
+
+    dl {
+      display: block;
+      margin-bottom: lh();
+
+      dd {
+        margin-bottom: lh();
+      }
+
+      dt {
+        clear: left;
+        float: left;
+        font-weight: bold;
+        width: flex-grid(2, 6);
+      }
+    }
+  }
+}
--- a/static/sass/_info.scss
+++ b/static/sass/_info.scss
@@ -0,0 +1,194 @@
+div.info-wrapper {
+  @extend .table-wrapper;
+
+  section.updates {
+    @extend .content;
+
+    > h1 {
+      @extend .top-header;
+    }
+
+    > p {
+      margin-bottom: lh();
+    }
+
+    > ol {
+      list-style: none;
+
+      > li {
+        @extend .clearfix;
+        border-bottom: 1px solid #e3e3e3;
+        margin-bottom: lh(.5);
+        padding-bottom: lh(.5);
+        list-style-type: disk;
+
+        &:first-child {
+          background: $cream;
+          border-bottom: 1px solid darken($cream, 10%);
+          margin: 0 (-(lh(.5))) lh();
+          padding: lh(.5);
+        }
+
+        ol, ul {
+          margin: lh() 0 0 lh();
+          list-style-type: circle;
+        }
+
+        h2 {
+          float: left;
+          margin: 0 flex-gutter() 0 0;
+          width: flex-grid(2, 9);
+        }
+
+        section.update-description {
+          float: left;
+          margin-bottom: 0;
+          width: flex-grid(7, 9);
+
+          li {
+            margin-bottom: lh(.5);
+          }
+
+          p {
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  section.handouts {
+    @extend .sidebar;
+    border-left: 1px solid #d3d3d3;
+    @include border-radius(0 4px 4px 0);
+    border-right: 0;
+
+    header {
+      @extend .bottom-border;
+      padding: lh(.5) lh(.75);
+
+      h1 {
+        font-size: 18px;
+        margin: 0 ;
+      }
+
+      p {
+         color: #666;
+         font-size: 12px;
+         margin-bottom: 0;
+         margin-top: 4px;
+      }
+    }
+
+    ol {
+      background: none;
+      list-style: none;
+
+      li {
+        @extend .clearfix;
+        background: none;
+        border-bottom: 1px solid #d3d3d3;
+        @include box-shadow(0 1px 0 #eee);
+        @include box-sizing(border-box);
+        padding: 7px lh(.75);
+        position: relative;
+
+        &.expandable,
+        &.collapsable {
+          h4 {
+            font-style: $body-font-size;
+            font-weight: normal;
+            padding-left: 18px;
+          }
+        }
+
+        ul {
+          background: none;
+          margin: 7px (-(lh(.75))) 0;
+
+          li {
+            border-bottom: 0;
+            border-top: 1px solid #d3d3d3;
+            @include box-shadow(inset 0 1px 0 #eee);
+            padding-left: 18px + lh(.75);
+          }
+        }
+
+        &:hover {
+          background-color: #e9e9e9;
+        }
+
+        div.hitarea {
+          background-image: url('../images/treeview-default.gif');
+          display: block;
+          height: 100%;
+          left: lh(.75);
+          margin-left: 0;
+          max-height: 20px;
+          position: absolute;
+          width: 100%;
+
+          &:hover {
+            opacity: 0.6;
+            filter: alpha(opacity=60);
+          }
+
+          &.expandable-hitarea {
+            background-position: -80px 1px;
+          }
+
+          &.collapsable-hitarea {
+            background-position: -64px -21px;
+          }
+        }
+
+        h3 {
+          border-bottom: 0;
+          @include box-shadow(none);
+          color: #999;
+          font-size: 12px;
+          font-weight: bold;
+          text-transform: uppercase;
+        }
+
+        p {
+          font-size: $body-font-size;
+          letter-spacing: 0;
+          margin: 0;
+          text-transform: none;
+
+          a {
+            padding-right: 8px;
+
+            &:before {
+              color: #ccc;
+              content: "•";
+              @include inline-block();
+              padding-right: 8px;
+            }
+
+            &:first-child {
+              &:before {
+                content: "";
+                padding-right: 0;
+              }
+            }
+          }
+        }
+
+        a {
+          color: lighten($text-color, 10%);
+          @include inline-block();
+          text-decoration: none;
+          @include transition();
+
+          &:hover {
+            color: $mit-red;
+          }
+        }
+      }
+    }
+  }
+}
--- a/static/sass/_profile.scss
+++ b/static/sass/_profile.scss
@@ -0,0 +1,221 @@
+div.profile-wrapper {
+  @extend .table-wrapper;
+  color: #000;
+
+  section.user-info {
+    @extend .sidebar;
+    border-left: 1px solid #d3d3d3;
+    @include border-radius(0px 4px 4px 0);
+    border-right: 0;
+
+    header {
+      @extend .bottom-border;
+      margin: 0 ;
+      padding: lh(.5) lh();
+
+      h1 {
+        font-size: 18px;
+        margin: 0;
+        padding-right: 30px;
+      }
+
+      a {
+        color: #999;
+        font-size: 12px;
+        position: absolute;
+        right: lh(.5);
+        text-transform: uppercase;
+        top: 13px;
+
+        &:hover {
+          color: #555;
+        }
+      }
+    }
+
+    ul {
+      list-style: none;
+
+      li {
+        border-bottom: 1px solid #d3d3d3;
+        @include box-shadow(0 1px 0 #eee);
+        color: lighten($text-color, 10%);
+        display: block;
+        padding: 7px lh();
+        position: relative;
+        text-decoration: none;
+        @include transition();
+
+        div#location_sub, div#language_sub {
+          font-weight: bold;
+          @include inline-block();
+
+          form {
+            width: 100%;
+          }
+
+          input {
+
+            &[type="text"] {
+              @include box-sizing(border-box);
+              margin: lh(.5) 0;
+              width: 100%;
+            }
+
+            &[type="input"]{
+            }
+          }
+
+          &:empty {
+            padding: 0;
+          }
+        }
+
+        div#description {
+          font-size: 12px;
+        }
+
+        a#change_language,
+        a#change_location,
+        a.edit-email,
+        a.name-edit,
+        a.email-edit {
+          color: #999;
+          font-size: 12px;
+          position: absolute;
+          right: lh(.5);
+          text-transform: uppercase;
+          top: 9px;
+
+          &:hover {
+            color: #555;
+          }
+        }
+
+        p {
+          color: #999;
+          font-size: 12px;
+          margin-bottom: 0;
+          margin-top: 4px;
+        }
+
+        a.deactivate {
+          color: #aaa;
+          font-style: italic;
+        }
+
+        input#pwd_reset_button {
+          background: none;
+          border: none;
+          @include box-shadow(none);
+          color: #999;
+          font-size: 12px;
+          font-weight: normal;
+          margin: 0;
+          padding: 0;
+          position: absolute;
+          right: lh(.5);
+          text-transform: uppercase;
+          top: 9px;
+
+          &:hover {
+            color: #555;
+          }
+        }
+      }
+    }
+
+    div#change_password_pop {
+      border-bottom: 1px solid #d3d3d3;
+      @include box-shadow(0 1px 0 #eee);
+      color: #4D4D4D;
+      padding: 7px lh();
+
+      h2 {
+        font-size: $body-font-size;
+        font-weight: bold;
+        margin-top: 0;
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  section.course-info {
+    @extend .content;
+
+    header {
+      @extend h1.top-header;
+      @extend .clearfix;
+
+      h1 {
+        float: left;
+        margin: 0;
+      }
+    }
+
+    div#grade-detail-graph {
+      min-height: 300px;
+      width: 100%;
+    }
+
+    > ol {
+      border-top: 1px solid #e3e3e3;
+      list-style: none;
+      margin-top: lh();
+
+      > li {
+        @extend .clearfix;
+        border-bottom: 1px solid #e3e3e3;
+        display: table;
+        padding: lh() 0;
+        width: 100%;
+
+        &:last-child {
+          border-bottom: 0px;
+        }
+
+        h2 {
+          border-right: 1px dashed #ddd;
+          @include box-sizing(border-box);
+          display: table-cell;
+          margin: 0;
+          padding: 0;
+          padding-right: flex-gutter(9);
+          width: flex-grid(2, 9);
+        }
+
+        ol.sections {
+          display: table-cell;
+          list-style: none;
+          padding-left: flex-gutter(9);
+          width: flex-grid(7, 9);
+
+          > li {
+            padding:0 0 lh() 0;
+
+            &:first-child {
+              padding-top: 0;
+            }
+
+            &:last-child {
+              border-bottom: 0;
+            }
+
+            h3 {
+              color: #666;
+            }
+
+            ol {
+              list-style: none;
+
+              li {
+                display: inline-block;
+                padding-right: 1em;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/static/sass/_textbook.scss
+++ b/static/sass/_textbook.scss
@@ -0,0 +1,132 @@
+div.book-wrapper {
+  @extend .table-wrapper;
+
+  section.book-sidebar {
+    @extend .sidebar;
+    @extend .tran;
+    @include box-sizing(border-box);
+
+    ul#booknav {
+      font-size: 12px;
+
+      a {
+        color: #000;
+
+        &:hover {
+          color: #666;
+        }
+      }
+
+      li {
+        background: none;
+        padding-left: 30px;
+
+        div.hitarea {
+          background-image: url('../images/treeview-default.gif');
+          margin-left: -22px;
+          position: relative;
+          top: 4px;
+
+          &:hover {
+            filter: alpha(opacity=60);
+            opacity: 0.6;
+          }
+        }
+
+        ul {
+          background: none;
+        }
+      }
+
+      > li {
+        border-bottom: 1px solid #d3d3d3;
+        @include box-shadow(0 1px 0 #eee);
+        padding: 7px 7px 7px 30px;
+      }
+    }
+  }
+
+  section.book {
+    @extend .content;
+
+    nav {
+      @extend .topbar;
+      @extend .clearfix;
+
+      a {
+        @extend .block-link;
+        padding: 0 lh();
+      }
+
+      ul {
+        @extend .clearfix;
+
+        li {
+          &.last {
+            display: block;
+            float: left;
+
+            a {
+              border-left: 0;
+              border-right: 1px solid darken(#f6efd4, 20%);
+              @include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%));
+            }
+          }
+
+          &.next {
+            display: block;
+            float: right;
+          }
+        }
+      }
+
+      &.bottom-nav {
+        border-bottom: 0;
+        border-top: 1px solid #EDDFAA;
+        margin-bottom: -(lh());
+        margin-top: lh();
+      }
+    }
+
+    section.page {
+      text-align: center;
+
+      img {
+        border: 1px solid $border-color;
+        max-width: 100%;
+      }
+    }
+  }
+
+  &.closed {
+    section.book-sidebar {
+      width: flex-grid(.6);
+
+      header#open_close_accordion {
+        padding: 0;
+
+        a {
+          background-image: url('../images/slide-right-icon.png');
+        }
+
+        h2 {
+          padding: 0;
+          visibility: hidden;
+          width: 10px;
+        }
+      }
+
+      ul#booknav {
+        max-height: 100px;
+        overflow: hidden;
+        padding: 0;
+        visibility: hidden;
+        width: 10px;
+      }
+    }
+
+    section.course-content {
+      width: flex-grid(11.5) + flex-gutter();
+    }
+  }
+}
--- a/static/sass/application.scss
+++ b/static/sass/application.scss
@@ -0,0 +1,18 @@
+@import "bourbon/bourbon";
+
+// Base layout
+@import "base/reset", "base/font-face";
+@import "base/variables", "base/functions", "base/extends", "base/base";
+@import "layout/layout", "layout/header", "layout/footer", "layout/calculator", "layout/leanmodal";
+@import "plugins/jquery-ui-1.8.16.custom", "plugins/jquery.qtip.min";
+
+// pages
+@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier";
+@import "textbook";
+@import "info";
+@import "profile";
+@import "gradebook";
+@import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki", "wiki/table";
+@import "help";
+
+@import "discussion/askbot-original", "discussion/discussion","discussion/sidebar", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar", "discussion/modals", "discussion/profile", "discussion/badges";
--- a/static/sass/base/_base.scss
+++ b/static/sass/base/_base.scss
@@ -0,0 +1,77 @@
+:focus {
+  outline-color: #ccc;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  a {
+    color: #000;
+  }
+}
+
+h1 {
+  font-size:1.6em;
+  margin:20px 0 10px 0;
+}
+
+h2 {
+  font-size: $body-font-size;
+  font-weight: bold;
+  letter-spacing: 1px;
+  margin:20px 0 10px 0;
+  text-transform: uppercase;
+}
+
+p {
+  margin-bottom: $body-line-height;
+}
+
+em {
+  font-style: italic;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+#{$all-text-inputs}, textarea {
+  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;
+}
+
--- a/static/sass/base/_extends.scss
+++ b/static/sass/base/_extends.scss
@@ -0,0 +1,244 @@
+.clearfix:after {
+  clear: both;
+  content: ".";
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
+.wrapper {
+  margin: 0 auto;
+  max-width: $fg-max-width;
+  min-width: $fg-min-width;
+  text-align: left;
+  width: flex-grid(12);
+
+  div.table-wrapper {
+    display: table;
+    width: flex-grid(12);
+  }
+}
+
+h1.top-header {
+  background: #f3f3f3;
+  border-bottom: 1px solid #e3e3e3;
+  margin: (-(lh())) (-(lh())) lh();
+  padding: lh();
+}
+
+.button {
+  border: 1px solid darken(#888, 10%);
+  @include border-radius(3px);
+  @include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
+  color: #fff;
+  cursor: pointer;
+  font: bold $body-font-size $body-font-family;
+  @include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
+  padding: 4px 8px;
+  text-decoration: none;
+  text-shadow: none;
+  -webkit-font-smoothing: antialiased;
+
+  &:hover, &:focus {
+    border: 1px solid darken(#888, 20%);
+    @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
+    @include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
+  }
+}
+
+.light-button, a.light-button {
+  border: 1px solid #ccc;
+  @include border-radius(3px);
+  @include box-shadow(inset 0 1px 0 #fff);
+  color: #666;
+  cursor: pointer;
+  font: normal $body-font-size $body-font-family;
+  @include linear-gradient(#fff, lighten(#888, 40%));
+  padding: 4px 8px;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+
+  &:hover, &:focus {
+    border: 1px solid #ccc;
+    @include linear-gradient(#fff, lighten(#888, 37%));
+    text-decoration: none;
+  }
+}
+
+.action-link {
+  a {
+    color: $mit-red;
+
+    &:hover {
+      color: darken($mit-red, 20%);
+      text-decoration: none;
+    }
+  }
+}
+
+.content {
+  @include box-shadow(inset 0 0 2px 3px #f3f3f3);
+  @include box-sizing(border-box);
+  display: table-cell;
+  padding: lh();
+  vertical-align: top;
+  width: flex-grid(9) + flex-gutter();
+
+  @media print {
+    @include box-shadow(none);
+  }
+}
+
+.sidebar {
+  background: #e3e3e3;
+  @include border-radius(4px 0 0 4px);
+  border-right: 1px solid #d3d3d3;
+  @include box-shadow( inset 0 0 0 1px #f6f6f6);
+  @include box-sizing(border-box);
+  display: table-cell;
+  font-family: $body-font-family;
+  position: relative;
+  text-shadow: 0 1px 0 #f1f1f1;
+  vertical-align: top;
+  width: flex-grid(3);
+
+  h1, h2 {
+   font-size: 18px;
+   font-weight: bold;
+   letter-spacing: 0;
+   text-transform: none;
+  }
+
+  a {
+    border: none;
+    font-style: normal;
+  }
+
+  .bottom-border {
+    border-bottom: 1px solid #d3d3d3;
+    @include box-shadow(0 1px 0 #eee);
+  }
+
+  @media print {
+    display: none;
+  }
+
+  h3 {
+    background: none;
+    border: none;
+    color: #000;
+    font-weight: normal;
+    margin: 0;
+    overflow: hidden;
+
+    a {
+      color: lighten($text-color, 10%);
+      display: block;
+      font-size: $body-font-size;
+      padding: 7px 7px 7px 30px;
+      text-decoration: none;
+      @include transition();
+    }
+
+    span.ui-icon {
+      background-image: url(../images/ui-icons_454545_256x240.png);
+    }
+
+    &.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;
+
+      a {
+        color: #000;
+      }
+    }
+  }
+
+  header#open_close_accordion {
+    border-bottom: 1px solid #d3d3d3;
+    @include box-shadow(0 1px 0 #eee);
+    padding: lh(.5) lh();
+    position: relative;
+
+    h2 {
+      margin: 0;
+      padding-right: 20px;
+    }
+
+    a {
+      background: #eee url('../images/slide-left-icon.png') center center no-repeat;
+      border: 1px solid #D3D3D3;
+      @include border-radius(3px 0 0 3px);
+      height: 16px;
+      padding: 8px;
+      position: absolute;
+      right: -1px;
+      text-indent: -9999px;
+      top: 6px;
+      width: 16px;
+
+      &:hover {
+        background-color: white;
+      }
+    }
+  }
+
+  a.button {
+    text-decoration: none;
+  }
+}
+
+.topbar {
+  @extend .clearfix;
+  background: $cream;
+  border-bottom: 1px solid darken($cream, 10%);
+  @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
+  font-size: 12px;
+  height:46px;
+  line-height: 46px;
+  margin: (-$body-line-height) (-$body-line-height) $body-line-height;
+  text-shadow: 0 1px 0 #fff;
+
+  @media print {
+    display: none;
+  }
+
+  a {
+    border-bottom: 0;
+    color: darken($cream, 80%);
+
+    &:hover {
+      color: darken($cream, 60%);
+      text-decoration: none;
+    }
+
+    &.block-link {
+      background: darken($cream, 5%);
+      border-left: 1px solid darken($cream, 20%);
+      @include box-shadow(inset 1px 0 0 lighten($cream, 5%));
+      display: block;
+      text-transform: uppercase;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+}
+
+.tran {
+  @include transition( all, .2s, $ease-in-out-quad);
+}
+
+p.ie-warning {
+  background: yellow;
+  display: block !important;
+  line-height: 1.3em;
+  margin-bottom: 0;
+  padding: lh();
+  text-align: left;
+}
--- a/static/sass/base/_font-face.scss
+++ b/static/sass/base/_font-face.scss
@@ -0,0 +1,125 @@
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 25, 2012 05:06:34 PM America/New_York */
+
+
+// Not used in UI
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-Light-webfont.eot');
+//     src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
+//     font-weight: 300;
+//     font-style: normal;
+
+// }
+
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-LightItalic-webfont.eot');
+//     src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
+//     font-weight: 300;
+//     font-style: italic;
+
+// }
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-Regular-webfont.eot');
+    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
+    font-weight: 600;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-Italic-webfont.eot');
+    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
+    font-weight: 400;
+    font-style: italic;
+
+}
+
+// Not used in UI
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-Semibold-webfont.eot');
+//     src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
+//     font-weight: 600;
+//     font-style: normal;
+
+// }
+
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot');
+//     src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
+//     font-weight: 600;
+//     font-style: italic;
+
+// }
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-Bold-webfont.eot');
+    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
+    font-weight: 700;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-BoldItalic-webfont.eot');
+    src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
+    font-weight: 700;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-ExtraBold-webfont.eot');
+    src: url('../fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
+    font-weight: 800;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot');
+    src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg');
+    font-weight: 800;
+    font-style: italic;
+
+}
+
--- a/static/sass/base/_functions.scss
+++ b/static/sass/base/_functions.scss
@@ -0,0 +1,10 @@
+// Line-height
+@function lh($amount: 1) {
+  @return $body-line-height * $amount;
+}
+
+@mixin hide-text(){
+  text-indent: -9999px;
+  overflow: hidden;
+  display: block;
+}
--- a/static/sass/base/_reset.scss
+++ b/static/sass/base/_reset.scss
@@ -0,0 +1,102 @@
+/* 
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com 
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong,  var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+body {
+    line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section { 
+    display:block;
+}
+
+nav ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000; 
+    font-style:italic;
+    font-weight:bold;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;   
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}
--- a/static/sass/base/_variables.scss
+++ b/static/sass/base/_variables.scss
@@ -0,0 +1,22 @@
+// 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;
--- a/static/sass/bourbon/_bourbon.scss
+++ b/static/sass/bourbon/_bourbon.scss
@@ -0,0 +1,35 @@
+// 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";
--- a/static/sass/bourbon/addons/_button.scss
+++ b/static/sass/bourbon/addons/_button.scss
@@ -0,0 +1,267 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+  @if type-of($style) == color {
+    $base-color: $style;
+    $style: simple;
+  }
+
+  // Grayscale button
+  @if $base-color == grayscale($base-color) {
+    @if $style == simple {
+      @include simple($base-color, $grayscale: true);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color, $grayscale: true);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color, $grayscale: true);
+    }
+  }
+
+  // Colored button
+  @else {
+    @if $style == simple {
+      @include simple($base-color);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color);
+    }
+  }
+}
+
+
+// Simple Button
+//************************************************************************//
+@mixin simple($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
+  $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
+  $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
+  $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border;
+  @include border-radius (3px);
+  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline;
+  font-size: 11px;
+  font-weight: bold;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 6px 18px 7px;
+  text-shadow: 0 1px 0 $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
+    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+    }
+
+    @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+  }
+
+  &:active {
+    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+    @if $grayscale == true {
+      $border-active:       grayscale($border-active);
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    border: 1px solid $border-active;
+    @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+  }
+}
+
+
+// Shiny Button
+//************************************************************************//
+@mixin shiny($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+  $fourth-stop:   adjust-color($base-color, $red: -79,  $green: -70,  $blue: -46);
+  $inset-shadow:  adjust-color($base-color, $red:  37,  $green:  29,  $blue:  12);
+  $second-stop:   adjust-color($base-color, $red: -56,  $green: -50,  $blue: -33);
+  $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+  $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $border-bottom: grayscale($border-bottom);
+    $fourth-stop:   grayscale($fourth-stop);
+    $inset-shadow:  grayscale($inset-shadow);
+    $second-stop:   grayscale($second-stop);
+    $text-shadow:   grayscale($text-shadow);
+    $third-stop:    grayscale($third-stop);
+  }
+
+  border: 1px solid $border;
+  border-bottom: 1px solid $border-bottom;
+  @include border-radius(5px);
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline;
+  font-size: 14px;
+  font-weight: bold;
+  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+  padding: 7px 20px 8px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 1px $text-shadow;
+
+  &:hover {
+    $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+    $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+    $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+    @if $grayscale == true {
+      $first-stop-hover:  grayscale($first-stop-hover);
+      $second-stop-hover: grayscale($second-stop-hover);
+      $third-stop-hover:  grayscale($third-stop-hover);
+      $fourth-stop-hover: grayscale($fourth-stop-hover);
+    }
+
+    cursor: pointer;
+    @include linear-gradient(top, $first-stop-hover  0%,
+                                  $second-stop-hover 50%,
+                                  $third-stop-hover  50%,
+                                  $fourth-stop-hover 100%);
+  }
+
+  &:active {
+    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+    @if $grayscale == true {
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+  }
+}
+
+
+// Pill Button
+//************************************************************************//
+@mixin pill($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
+  $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
+  $border-top:    adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+  $inset-shadow:  adjust-color($base-color, $hue: -1, $saturation: -1%,  $lightness:  7%);
+  $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
+  $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border-bottom: grayscale($border-bottom);
+    $border-sides:  grayscale($border-sides);
+    $border-top:    grayscale($border-top);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border-top;
+  border-color: $border-top $border-sides $border-bottom;
+  @include border-radius(16px);
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+  color: $color;
+  display: inline;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 1;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 3px 16px 5px;
+  text-align: center;
+  text-shadow: 0 -1px 1px $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
+    $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
+    $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
+    $border-top:          adjust-color($base-color, $hue: -1, $saturation: -17%,   $lightness: -21%);
+    $inset-shadow-hover:  adjust-color($base-color,           $saturation: -1%,    $lightness:  3%);
+    $stop-gradient-hover: adjust-color($base-color, $hue:  8, $saturation: -4%,    $lightness: -15.5%);
+    $text-shadow-hover:   adjust-color($base-color, $hue:  5, $saturation: -5%,    $lightness: -22%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $border-bottom:       grayscale($border-bottom);
+      $border-sides:        grayscale($border-sides);
+      $border-top:          grayscale($border-top);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+      $text-shadow-hover:   grayscale($text-shadow-hover);
+    }
+
+    border: 1px solid $border-top;
+    border-color: $border-top $border-sides $border-bottom;
+    @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+    text-shadow: 0 -1px 1px $text-shadow-hover;
+    -webkit-background-clip: padding-box;
+  }
+
+  &:active {
+    $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
+    $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
+    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
+    $inset-shadow-active:  adjust-color($base-color, $hue: 9,  $saturation:  2%,   $lightness: -21.5%);
+    $text-shadow-active:   adjust-color($base-color, $hue: 5,  $saturation: -12%,  $lightness: -21.5%);
+
+    @if $grayscale == true {
+      $active-color:         grayscale($active-color);
+      $border-active:        grayscale($border-active);
+      $border-bottom-active: grayscale($border-bottom-active);
+      $inset-shadow-active:  grayscale($inset-shadow-active);
+      $text-shadow-active:   grayscale($text-shadow-active);
+    }
+
+    background: $active-color;
+    border: 1px solid $border-active;
+    border-bottom: 1px solid $border-bottom-active;
+    @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+    text-shadow: 0 -1px 1px $text-shadow-active;
+  }
+}
+
--- a/static/sass/bourbon/addons/_clearfix.scss
+++ b/static/sass/bourbon/addons/_clearfix.scss
@@ -0,0 +1,29 @@
+// 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/)
--- a/static/sass/bourbon/addons/_font-family.scss
+++ b/static/sass/bourbon/addons/_font-family.scss
@@ -0,0 +1,5 @@
+$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;
--- a/static/sass/bourbon/addons/_html5-input-types.scss
+++ b/static/sass/bourbon/addons/_html5-input-types.scss
@@ -0,0 +1,36 @@
+//************************************************************************//
+// 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;
+//   }
--- a/static/sass/bourbon/addons/_position.scss
+++ b/static/sass/bourbon/addons/_position.scss
@@ -0,0 +1,30 @@
+@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;
+  }
+}
--- a/static/sass/bourbon/addons/_timing-functions.scss
+++ b/static/sass/bourbon/addons/_timing-functions.scss
@@ -0,0 +1,32 @@
+// 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);
--- a/static/sass/bourbon/css3/_animation.scss
+++ b/static/sass/bourbon/css3/_animation.scss
@@ -0,0 +1,171 @@
+// 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.";
+}
+
--- a/static/sass/bourbon/css3/_appearance.scss
+++ b/static/sass/bourbon/css3/_appearance.scss
@@ -0,0 +1,7 @@
+@mixin appearance ($value) {
+  -webkit-appearance: $value;
+     -moz-appearance: $value;
+      -ms-appearance: $value;
+       -o-appearance: $value;
+          appearance: $value;
+}
--- a/static/sass/bourbon/css3/_background-image.scss
+++ b/static/sass/bourbon/css3/_background-image.scss
@@ -0,0 +1,57 @@
+//************************************************************************//
+// 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);
--- a/static/sass/bourbon/css3/_background-size.scss
+++ b/static/sass/bourbon/css3/_background-size.scss
@@ -0,0 +1,15 @@
+@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;
+}
--- a/static/sass/bourbon/css3/_border-image.scss
+++ b/static/sass/bourbon/css3/_border-image.scss
@@ -0,0 +1,7 @@
+@mixin border-image ($image) {
+  -webkit-border-image: $image;
+     -moz-border-image: $image;
+      -ms-border-image: $image;
+       -o-border-image: $image;
+          border-image: $image;
+}
--- a/static/sass/bourbon/css3/_border-radius.scss
+++ b/static/sass/bourbon/css3/_border-radius.scss
@@ -0,0 +1,63 @@
+@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);
+}
--- a/static/sass/bourbon/css3/_box-shadow.scss
+++ b/static/sass/bourbon/css3/_box-shadow.scss
@@ -0,0 +1,14 @@
+// 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;
+}
--- a/static/sass/bourbon/css3/_box-sizing.scss
+++ b/static/sass/bourbon/css3/_box-sizing.scss
@@ -0,0 +1,6 @@
+@mixin box-sizing ($box) {
+//  content-box | border-box | inherit
+  -webkit-box-sizing: $box;
+     -moz-box-sizing: $box;
+          box-sizing: $box;
+}
--- a/static/sass/bourbon/css3/_columns.scss
+++ b/static/sass/bourbon/css3/_columns.scss
@@ -0,0 +1,67 @@
+@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;
+}
--- a/static/sass/bourbon/css3/_flex-box.scss
+++ b/static/sass/bourbon/css3/_flex-box.scss
@@ -0,0 +1,67 @@
+// 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;
+}
--- a/static/sass/bourbon/css3/_inline-block.scss
+++ b/static/sass/bourbon/css3/_inline-block.scss
@@ -0,0 +1,10 @@
+// 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;
+}
--- a/static/sass/bourbon/css3/_linear-gradient.scss
+++ b/static/sass/bourbon/css3/_linear-gradient.scss
@@ -0,0 +1,41 @@
+@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%);
--- a/static/sass/bourbon/css3/_radial-gradient.scss
+++ b/static/sass/bourbon/css3/_radial-gradient.scss
@@ -0,0 +1,31 @@
+// 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);
--- a/static/sass/bourbon/css3/_transform.scss
+++ b/static/sass/bourbon/css3/_transform.scss
@@ -0,0 +1,19 @@
+@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;
+}
--- a/static/sass/bourbon/css3/_transition.scss
+++ b/static/sass/bourbon/css3/_transition.scss
@@ -0,0 +1,104 @@
+// 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;
+}
+
--- a/static/sass/bourbon/css3/_user-select.scss
+++ b/static/sass/bourbon/css3/_user-select.scss
@@ -0,0 +1,6 @@
+@mixin user-select($arg: none) {
+  -webkit-user-select: $arg;
+     -moz-user-select: $arg;
+      -ms-user-select: $arg;
+          user-select: $arg;
+}
--- a/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss
+++ b/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss
@@ -0,0 +1,36 @@
+// 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;
+}
--- a/static/sass/bourbon/functions/_flex-grid.scss
+++ b/static/sass/bourbon/functions/_flex-grid.scss
@@ -0,0 +1,35 @@
+// 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%;
+//    }
+//  }
--- a/static/sass/bourbon/functions/_grid-width.scss
+++ b/static/sass/bourbon/functions/_grid-width.scss
@@ -0,0 +1,13 @@
+@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;
+//  }
--- a/static/sass/bourbon/functions/_linear-gradient.scss
+++ b/static/sass/bourbon/functions/_linear-gradient.scss
@@ -0,0 +1,23 @@
+@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;
+}
+
--- a/static/sass/bourbon/functions/_modular-scale.scss
+++ b/static/sass/bourbon/functions/_modular-scale.scss
@@ -0,0 +1,40 @@
+@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
--- a/static/sass/bourbon/functions/_radial-gradient.scss
+++ b/static/sass/bourbon/functions/_radial-gradient.scss
@@ -0,0 +1,15 @@
+// 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;
+}
+
--- a/static/sass/bourbon/functions/_render-gradients.scss
+++ b/static/sass/bourbon/functions/_render-gradients.scss
@@ -0,0 +1,14 @@
+// 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;
+}
--- a/static/sass/bourbon/functions/_tint-shade.scss
+++ b/static/sass/bourbon/functions/_tint-shade.scss
@@ -0,0 +1,9 @@
+// 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);
+}
--- a/static/sass/bourbon/lib/bourbon.rb
+++ b/static/sass/bourbon/lib/bourbon.rb
@@ -0,0 +1,19 @@
+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")
--- a/static/sass/bourbon/lib/bourbon/sass_extensions.rb
+++ b/static/sass/bourbon/lib/bourbon/sass_extensions.rb
@@ -0,0 +1,6 @@
+module Bourbon::SassExtensions
+end
+
+require "sass"
+
+require File.join(File.dirname(__FILE__), "/sass_extensions/functions")
--- a/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb
+++ b/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb
@@ -0,0 +1,13 @@
+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
--- a/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
+++ b/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
@@ -0,0 +1,13 @@
+# 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
--- a/static/sass/courseware/_amplifier.scss
+++ b/static/sass/courseware/_amplifier.scss
@@ -0,0 +1,243 @@
+// JM MOSFET AMPLIFIER
+section.tool-wrapper {
+  @extend .clearfix;
+  background: #073642;
+  border-bottom: 1px solid darken(#002b36, 10%);
+  border-top: 1px solid darken(#002b36, 10%);
+  @include box-shadow(inset 0 0 0 4px darken(#094959, 2%));
+  color: #839496;
+  display: table;
+  margin: lh() (-(lh())) 0;
+
+  div#graph-container {
+    background: none;
+    @include box-sizing(border-box);
+    display: table-cell;
+    padding: lh();
+    vertical-align: top;
+    width: flex-grid(4.5, 9) + flex-gutter(9);
+
+    .ui-widget-content {
+      background: none;
+      border: none;
+      @include border-radius(0);
+    }
+
+    canvas {
+      width: 100%;
+    }
+
+    ul.ui-tabs-nav {
+      background: darken(#073642, 2%);
+      border-bottom: 1px solid darken(#073642, 8%);
+      @include border-radius(0);
+      margin: (-(lh())) (-(lh())) 0;
+      padding: 0;
+      position: relative;
+      width: 110%;
+
+      li {
+        background: none;
+        border: none;
+        @include border-radius(0);
+        color: #fff;
+        margin-bottom: 0;
+
+        &.ui-tabs-selected {
+          background-color: #073642;
+          border-left: 1px solid darken(#073642, 8%);
+          border-right: 1px solid darken(#073642, 8%);
+
+          &:first-child {
+            border-left: none;
+          }
+
+          a {
+            color: #eee8d5;
+          }
+        }
+
+        a {
+          border: none;
+          color: #839496;
+          font: bold 12px $body-font-family;
+          letter-spacing: 1px;
+          text-transform: uppercase;
+
+          &:hover {
+            color: #eee8d5;
+          }
+        }
+      }
+    }
+  }
+
+  div#controlls-container {
+    @extend .clearfix;
+    background: darken(#073642, 2%);
+    border-right: 1px solid darken(#002b36, 6%);
+    @include box-shadow(1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%));
+    @include box-sizing(border-box);
+    display: table-cell;
+    padding: lh();
+    vertical-align: top;
+    width: flex-grid(4.5, 9);
+
+    div.graph-controls {
+
+      div.music-wrapper {
+        @extend .clearfix;
+        border-bottom: 1px solid darken(#073642, 10%);
+        @include box-shadow(0 1px 0 lighten(#073642, 2%));
+        margin-bottom: lh();
+        padding: 0 0 lh();
+
+        input#playButton {
+          border-color: darken(#002b36, 6%);
+          @include button(simple, lighten( #586e75, 5% ));
+          display: block;
+          float: right;
+          font: bold 14px $body-font-family;
+
+          &:active {
+            @include box-shadow(none);
+          }
+
+          &[value="Stop"] {
+            @include button(simple, darken(#268bd2, 30%));
+            font: bold 14px $body-font-family;
+
+            &:active {
+              @include box-shadow(none);
+            }
+          }
+        }
+      }
+
+      div.inputs-wrapper {
+        @extend .clearfix;
+        border-bottom: 1px solid darken(#073642, 10%);
+        @include box-shadow(0 1px 0 lighten(#073642, 2%));
+        @include clearfix;
+        margin-bottom: lh();
+        margin-bottom: lh();
+        padding: 0 0 lh();
+      }
+
+      p {
+        font-weight: bold;
+        @include inline-block();
+        margin: 0;
+        text-shadow: 0 -1px 0 darken(#073642, 10%);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      ul {
+        @include inline-block();
+        margin-bottom: 0;
+
+        li {
+          @include inline-block();
+          margin-bottom: 0;
+
+          input {
+            margin-right: 5px;
+          }
+        }
+      }
+
+      div#graph-listen {
+        display: block;
+        float: left;
+        margin-bottom: 0;
+        margin-right: 20px;
+        margin-top: 8px;
+        text-align: right;
+      }
+    }
+
+    label {
+      @include border-radius(2px);
+      color: #fff;
+      font-weight: bold;
+      padding: 3px;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    //MOSFET AMPLIFIER
+    label[for="vinCheckbox"], label[for="vinRadioButton"]{
+      color: desaturate(#00bfff, 50%);
+    }
+
+    label[for="voutCheckbox"], label[for="voutRadioButton"]{
+      color: darken(#ffcf48, 20%);
+    }
+
+    label[for="vrCheckbox"], label[for="vrRadioButton"]{
+      color: desaturate(#1df914, 40%);
+    }
+
+    //RC Filters
+    label[for="vcCheckbox"], label[for="vcRadioButton"]{
+      color: darken(#ffcf48, 20%);
+    }
+
+    //RLC Series
+    label[for="vlCheckbox"], label[for="vlRadioButton"]{
+      color: desaturate(#d33682, 40%);
+    }
+
+    div.schematic-sliders {
+      div.top-sliders {
+        @extend .clearfix;
+        border-bottom: 1px solid darken(#073642, 10%);
+        @include box-shadow(0 1px 0 lighten(#073642, 2%));
+        margin-bottom: lh();
+        padding: 0 0 lh();
+
+        select#musicTypeSelect {
+          font: 16px $body-font-family;
+          @include inline-block();
+          margin-bottom: 0;
+        }
+
+        p {
+          font-weight: bold;
+          @include inline-block();
+          margin: 0 lh(.5) lh() 0;
+          text-shadow: 0 -1px 0 darken(#073642, 10%);
+          -webkit-font-smoothing: antialiased;
+        }
+      }
+
+      div.slider-label {
+        font-weight: bold;
+        margin-bottom: lh(0.5);
+        text-shadow: 0 -1px 0 darken(#073642, 10%);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      div.slider {
+        margin-bottom: lh(1);
+
+        &.ui-slider-horizontal {
+          background: darken(#002b36, 2%);
+          border: 1px solid darken(#002b36, 8%);
+          @include box-shadow(none);
+          height: 0.4em;
+        }
+
+        .ui-slider-handle {
+          background: lighten( #586e75, 5% ) url('../images/amplifier-slider-handle.png') center no-repeat;
+          border: 1px solid darken(#002b36, 8%);
+          @include box-shadow(inset 0 1px 0 lighten( #586e75, 20% ));
+          margin-top: -.3em;
+
+          &:hover, &:active {
+            background-color: lighten( #586e75, 10% );
+          }
+        }
+      }
+    }
+  }
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`jasmine.getFixtures().fixturesPath = "/_jasmine/fixtures/"`