Merge branch 'master' into anonymous_user

Conflicts:
	djangoapps/student/views.py

djangoapps/courseware/module_render.py

@@ -43,8 +43,9 @@ def grade_histogram(module_id):
     cursor.execute("select courseware_studentmodule.grade,COUNT(courseware_studentmodule.student_id) from courseware_studentmodule where courseware_studentmodule.module_id=%s group by courseware_studentmodule.grade", [module_id])
 
     grades = list(cursor.fetchall())
-    print grades
     grades.sort(key=lambda x:x[0]) # Probably not necessary
+    if (len(grades) == 1 and grades[0][0] == None):
+        return []
     return grades
 
 def render_x_module(user, request, xml_module, module_object_preload):
@@ -85,12 +86,21 @@ def render_x_module(user, request, xml_module, module_object_preload):
         module_object_preload.append(smod)
     # Grab content
     content = instance.get_html()
+    init_js = instance.get_init_js()
+    destory_js = instance.get_destroy_js()
     if user.is_staff:
+        histogram = grade_histogram(module_id)
+        render_histogram = len(histogram) > 0
         content=content+render_to_string("staff_problem_info.html", {'xml':etree.tostring(xml_module), 
-                                                                     'histogram':grade_histogram(module_id)})
+                                                                     'module_id' : module_id,
+                                                                     'render_histogram' : render_histogram})
+        if render_histogram:
+            init_js = init_js+render_to_string("staff_problem_histogram.js", {'histogram' : histogram,
+                                                                              'module_id' : module_id})
+        
     content = {'content':content, 
-               "destroy_js":instance.get_destroy_js(),
-               'init_js':instance.get_init_js(), 
+               "destroy_js":destory_js,
+               'init_js':init_js, 
                'type':module_type}
 
     return content

djangoapps/courseware/modules/video_module.py

@@ -42,7 +42,8 @@ class Module(XModule):
         return render_to_string('video.html',{'streams':self.video_list(),
                                               'id':self.item_id,
                                               'position':self.position, 
-                                              'name':self.name})
+                                              'name':self.name, 
+                                              'annotations':self.annotations})
 
     def get_init_js(self):
         '''JavaScript code to be run when problem is shown. Be aware
@@ -52,19 +53,23 @@ class Module(XModule):
         log.debug(u"INIT POSITION {0}".format(self.position))
         return render_to_string('video_init.js',{'streams':self.video_list(),
                                                  'id':self.item_id,
-                                                 'position':self.position})
+                                                 'position':self.position})+self.annotations_init
 
     def get_destroy_js(self):
-        return "videoDestroy(\"{0}\");".format(self.item_id)
+        return "videoDestroy(\"{0}\");".format(self.item_id)+self.annotations_destroy
 
     def __init__(self, xml, item_id, ajax_url=None, track_url=None, state=None, track_function=None, render_function = None):
         XModule.__init__(self, xml, item_id, ajax_url, track_url, state, track_function, render_function)
-        self.youtube = etree.XML(xml).get('youtube')
-        self.name = etree.XML(xml).get('name')
+        xmltree=etree.fromstring(xml)
+        self.youtube = xmltree.get('youtube')
+        self.name = xmltree.get('name')
         self.position = 0
         if state != None:
             state = json.loads(state)
             if 'position' in state:
                 self.position = int(float(state['position']))
-            #log.debug("POSITION IN STATE")
-        #log.debug(u"LOAD POSITION {0}".format(self.position))
+
+        self.annotations=[(e.get("name"),self.render_function(e)) \
+                      for e in xmltree]
+        self.annotations_init="".join([e[1]['init_js'] for e in self.annotations if 'init_js' in e[1]])
+        self.annotations_destroy="".join([e[1]['destroy_js'] for e in self.annotations if 'destroy_js' in e[1]])

djangoapps/courseware/views.py

@@ -76,7 +76,7 @@ def render_accordion(request,course,chapter,section):
         parameter. Returns (initialization_javascript, content)'''
     if not course:
         course = "6.002 Spring 2012"
-    
+
     toc=content_parser.toc_from_xml(content_parser.course_file(request.user), chapter, section)
     active_chapter=1
     for i in range(len(toc)):
@@ -88,8 +88,7 @@ def render_accordion(request,course,chapter,section):
                   ['format_url_params',content_parser.format_url_params],
                   ['csrf',csrf(request)['csrf_token']]] + \
                      template_imports.items())
-    return {'init_js':render_to_string('accordion_init.js',context), 
-            'content':render_to_string('accordion.html',context)}
+    return render_to_string('accordion.html',context)
 
 @cache_control(no_cache=True, no_store=True, must_revalidate=True)
 def render_section(request, section):
@@ -119,8 +118,8 @@ def render_section(request, section):
     if 'init_js' not in module:
         module['init_js']=''
 
-    context={'init':accordion['init_js']+module['init_js'],
-             'accordion':accordion['content'],
+    context={'init':module['init_js'],
+             'accordion':accordion,
              'content':module['content'],
              'csrf':csrf(request)['csrf_token']}
 
@@ -177,8 +176,8 @@ def index(request, course="6.002 Spring 2012", chapter="Using the System", secti
     if 'init_js' not in module:
         module['init_js']=''
 
-    context={'init':accordion['init_js']+module['init_js'],
-             'accordion':accordion['content'],
+    context={'init':module['init_js'],
+             'accordion':accordion,
              'content':module['content'],
              'csrf':csrf(request)['csrf_token']}
 

djangoapps/student/views.py

@@ -14,6 +14,7 @@ from django.contrib.auth.decorators import login_required
 from django.core.context_processors import csrf
 from django.core.mail import send_mail
 from django.core.validators import validate_email, validate_slug, ValidationError
+from django.db import IntegrityError
 from django.http import HttpResponse, Http404
 from django.shortcuts import redirect
 from mitxmako.shortcuts import render_to_response, render_to_string
@@ -160,15 +161,6 @@ def create_account(request, post_override=None):
         
     
 
-    # Confirm username and e-mail are unique. TODO: This should be in a transaction
-    if len(User.objects.filter(username=post_vars['username']))>0:
-        js['value']="An account with this username already exists."
-        return HttpResponse(json.dumps(js))
-
-    if len(User.objects.filter(email=post_vars['email']))>0:
-        js['value']="An account with this e-mail already exists."
-        return HttpResponse(json.dumps(js))
-
     u=User(username=post_vars['username'],
            email=post_vars['email'],
            is_active=False)
@@ -176,7 +168,20 @@ def create_account(request, post_override=None):
     r=Registration()
     # TODO: Rearrange so that if part of the process fails, the whole process fails. 
     # Right now, we can have e.g. no registration e-mail sent out and a zombie account
-    u.save()
+    try:
+        u.save()
+    except IntegrityError:
+        # Figure out the cause of the integrity error
+        if len(User.objects.filter(username=post_vars['username']))>0:
+            js['value']="An account with this username already exists."
+            return HttpResponse(json.dumps(js))
+
+        if len(User.objects.filter(email=post_vars['email']))>0:
+            js['value']="An account with this e-mail already exists."
+            return HttpResponse(json.dumps(js))
+        
+        raise
+
     r.register(u)
 
     up = UserProfile(user=u)

envs/aws.py

@@ -24,7 +24,6 @@ with open(ENV_ROOT / "env.json") as env_file:
     ENV_TOKENS = json.load(env_file)
 
 SITE_NAME = ENV_TOKENS['SITE_NAME']
-CSRF_COOKIE_DOMAIN = ENV_TOKENS['CSRF_COOKIE_DOMAIN']
 
 BOOK_URL = ENV_TOKENS['BOOK_URL']
 MEDIA_URL = ENV_TOKENS['MEDIA_URL']
@@ -47,4 +46,4 @@ SECRET_KEY = AUTH_TOKENS['SECRET_KEY']
 AWS_ACCESS_KEY_ID = AUTH_TOKENS["AWS_ACCESS_KEY_ID"]
 AWS_SECRET_ACCESS_KEY = AUTH_TOKENS["AWS_SECRET_ACCESS_KEY"]
 
-DATABASES = AUTH_TOKENS['DATABASES']
+DATABASES = AUTH_TOKENS['DATABASES']
\ No newline at end of file

envs/common.py

@@ -114,7 +114,6 @@ TEMPLATE_DEBUG = False
 # Site info
 SITE_ID = 1
 SITE_NAME = "localhost:8000"
-CSRF_COOKIE_DOMAIN = '127.0.0.1'
 HTTPS = 'on'
 ROOT_URLCONF = 'mitx.urls'
 IGNORABLE_404_ENDS = ('favicon.ico')
@@ -135,13 +134,13 @@ STATIC_ROOT = ENV_ROOT / "staticfiles" # We don't run collectstatic -- this is t
 
 # FIXME: We should iterate through the courses we have, adding the static 
 #        contents for each of them. (Right now we just use symlinks.)
-STATICFILES_DIRS = (
+STATICFILES_DIRS = [
     PROJECT_ROOT / "static",
     ASKBOT_ROOT / "askbot" / "skins",
 
 # This is how you would use the textbook images locally
 #    ("book", ENV_ROOT / "book_images")
-)
+]
 
 # Locale/Internationalization
 TIME_ZONE = 'America/New_York' # http://en.wikipedia.org/wiki/List_of_tz_zones_by_name

envs/dev.py

@@ -73,7 +73,8 @@ DEBUG_TOOLBAR_PANELS = (
 ############################ FILE UPLOADS (ASKBOT) #############################
 DEFAULT_FILE_STORAGE = 'django.core.files.storage.FileSystemStorage'
 MEDIA_ROOT = ENV_ROOT / "uploads"
-MEDIA_URL = "/discussion/upfiles/"
+MEDIA_URL = "/static/uploads/"
+STATICFILES_DIRS.append(("uploads", MEDIA_ROOT))
 FILE_UPLOAD_TEMP_DIR = ENV_ROOT / "uploads"
 FILE_UPLOAD_HANDLERS = (
     'django.core.files.uploadhandler.MemoryFileUploadHandler',

envs/static.py

+"""
+This config file runs the simplest dev environment using sqlite, and db-based
+sessions. Assumes structure:
+
+/envroot/
+        /db   # This is where it'll write the database file
+        /mitx # The location of this repo
+        /log  # Where we're going to write log files
+"""
+from common import *
+
+STATIC_GRAB = True
+
+LOGGING = logsettings.get_logger_config(ENV_ROOT / "log", 
+                                        logging_env="dev",
+                                        tracking_filename="tracking.log",
+                                        debug=False)
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': ENV_ROOT / "db" / "mitx.db",
+    }
+}
+
+CACHES = {
+    # This is the cache used for most things. Askbot will not work without a 
+    # functioning cache -- it relies on caching to load its settings in places.
+    # In staging/prod envs, the sessions also live here.
+    'default': {
+        'BACKEND': 'django.core.cache.backends.locmem.LocMemCache',
+        'LOCATION': 'mitx_loc_mem_cache'
+    },
+
+    # The general cache is what you get if you use our util.cache. It's used for
+    # things like caching the course.xml file for different A/B test groups.
+    # We set it to be a DummyCache to force reloading of course.xml in dev.
+    # In staging environments, we would grab VERSION from data uploaded by the
+    # push process.
+    'general': {
+        'BACKEND': 'django.core.cache.backends.dummy.DummyCache',
+        'KEY_PREFIX': 'general',
+        'VERSION': 4,
+    }
+}
+
+# Dummy secret key for dev
+SECRET_KEY = '85920908f28904ed733fe576320db18cabd7b6cd'
+
+############################ FILE UPLOADS (ASKBOT) #############################
+DEFAULT_FILE_STORAGE = 'django.core.files.storage.FileSystemStorage'
+MEDIA_ROOT = ENV_ROOT / "uploads"
+MEDIA_URL = "/discussion/upfiles/"
+FILE_UPLOAD_TEMP_DIR = ENV_ROOT / "uploads"
+FILE_UPLOAD_HANDLERS = (
+    'django.core.files.uploadhandler.MemoryFileUploadHandler',
+    'django.core.files.uploadhandler.TemporaryFileUploadHandler',
+)

fixtures/anonymize_fixtures.py

+#! /usr/bin/env python
+
 import sys
 import json
 import random
 import copy
 from collections import defaultdict
 from argparse import ArgumentParser, FileType
+from datetime import datetime
 
 def generate_user(user_number):
   return {
@@ -51,7 +54,6 @@ def generate_user(user_number):
   }
 
 
-
 def parse_args(args=sys.argv[1:]):
     parser = ArgumentParser()
     parser.add_argument('-d', '--data', type=FileType('r'), default=sys.stdin)
@@ -59,6 +61,7 @@ def parse_args(args=sys.argv[1:]):
     parser.add_argument('count', type=int)
     return parser.parse_args(args)
 
+
 def main(args=sys.argv[1:]):
     args = parse_args(args)
 
@@ -79,6 +82,8 @@ def main(args=sys.argv[1:]):
             sample = random.choice(answers)
             data = copy.deepcopy(sample)
             data["fields"]["student"] = student_id + 1
+            data["fields"]["created"] = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+            data["fields"]["modified"] = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
             data["pk"] = out_pk
             out_pk += 1
             out_data.append(data)

requirements.txt

@@ -13,4 +13,6 @@ python-memcached
 django-celery
 path.py
 django_debug_toolbar
-
+django-masquerade
+fs
+django-jasmine

settings.py

@@ -28,7 +28,6 @@ sys.path.append(BASE_DIR + "/mitx/lib")
 
 COURSEWARE_ENABLED = True
 ASKBOT_ENABLED = True
-CSRF_COOKIE_DOMAIN = '127.0.0.1'
 
 # Defaults to be overridden
 EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
@@ -116,6 +115,7 @@ MIDDLEWARE_CLASSES = (
     'django.middleware.csrf.CsrfViewMiddleware',
     #'django.contrib.auth.middleware.AuthenticationMiddleware',
     'cache_toolbox.middleware.CacheBackedAuthenticationMiddleware',
+    'masquerade.middleware.MasqueradeMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'track.middleware.TrackMiddleware',
     'mitxmako.middleware.MakoMiddleware',
@@ -146,6 +146,8 @@ INSTALLED_APPS = (
     'circuit',
     'perfstats',
     'util',
+    'masquerade',
+    'django_jasmine',
     # Uncomment the next line to enable the admin:
     # 'django.contrib.admin',
     # Uncomment the next line to enable admin documentation:
@@ -346,6 +348,7 @@ PROJECT_ROOT = os.path.dirname(__file__)
 
 TEMPLATE_CONTEXT_PROCESSORS = (
     'django.core.context_processors.request',
+    'django.core.context_processors.static',
     'askbot.context.application_settings',
     #'django.core.context_processors.i18n',
     'askbot.user_messages.context_processors.user_messages',#must be before auth
@@ -682,3 +685,5 @@ if MAKO_MODULE_DIR == None:
 
 djcelery.setup_loader()
 
+# Jasmine Settings
+JASMINE_TEST_DIRECTORY = PROJECT_DIR+'/templates/coffee'

static/css/application.css

@@ -117,7 +117,7 @@ input, select {
   font-weight: 800;
   font-style: italic; }
 
-.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after {
+.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, section.tool-wrapper:after, section.tool-wrapper div#controlls-container:after, section.tool-wrapper div#controlls-container div.graph-controls:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after {
   content: ".";
   display: block;
   height: 0;
@@ -710,10 +710,36 @@ footer nav ul.social li.linkedin a {
   background: url("/static/images/linkedin.png") 0 0 no-repeat; }
 
 li.calc-main {
-  bottom: -36px;
+  bottom: -126px;
   left: 0;
   position: fixed;
-  width: 100%; }
+  width: 100%;
+  -webkit-transition-property: bottom;
+  -moz-transition-property: bottom;
+  -ms-transition-property: bottom;
+  -o-transition-property: bottom;
+  transition-property: bottom;
+  -webkit-transition-duration: 0.15s;
+  -moz-transition-duration: 0.15s;
+  -ms-transition-duration: 0.15s;
+  -o-transition-duration: 0.15s;
+  transition-duration: 0.15s;
+  -webkit-transition-timing-function: ease-out;
+  -moz-transition-timing-function: ease-out;
+  -ms-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  -webkit-transition-delay: 0;
+  -moz-transition-delay: 0;
+  -ms-transition-delay: 0;
+  -o-transition-delay: 0;
+  transition-delay: 0;
+  z-index: 99;
+  -webkit-appearance: none; }
+li.calc-main.open {
+  bottom: -36px; }
+li.calc-main.open div#calculator_wrapper form div.input-wrapper div.help-wrapper dl {
+  display: block; }
 li.calc-main a.calc {
   text-indent: -9999px;
   overflow: hidden;
@@ -748,9 +774,13 @@ li.calc-main div#calculator_wrapper {
   background: rgba(17, 17, 17, 0.9);
   position: relative;
   top: -36px;
-  clear: both; }
+  clear: both;
+  max-height: 90px; }
 li.calc-main div#calculator_wrapper form {
-  padding: 22.652px; }
+  padding: 22.652px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
 li.calc-main div#calculator_wrapper form input#calculator_button {
   background: #111;
   border: 1px solid #000;
@@ -766,13 +796,14 @@ li.calc-main div#calculator_wrapper form input#calculator_button {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   color: #fff;
+  float: left;
   font-size: 30px;
   font-weight: bold;
+  margin: 0 1.012%;
   padding: 0;
   text-shadow: none;
-  width: 4.251%;
-  float: left;
-  margin: 0 1.012%; }
+  -webkit-appearance: none;
+  width: 4.251%; }
 li.calc-main div#calculator_wrapper form input#calculator_button:hover {
   color: #333; }
 li.calc-main div#calculator_wrapper form input#calculator_output {
@@ -790,12 +821,13 @@ li.calc-main div#calculator_wrapper form input#calculator_output {
   font-weight: bold;
   margin: 1px 0 0;
   padding: 10px;
+  -webkit-appearance: none;
   width: 31.984%; }
 li.calc-main div#calculator_wrapper form div.input-wrapper {
-  position: relative;
-  width: 61.741%;
+  float: left;
   margin: 0;
-  float: left; }
+  position: relative;
+  width: 61.741%; }
 li.calc-main div#calculator_wrapper form div.input-wrapper input#calculator_input {
   border: none;
   -webkit-box-shadow: none;
@@ -806,6 +838,7 @@ li.calc-main div#calculator_wrapper form div.input-wrapper input#calculator_inpu
   box-sizing: border-box;
   font-size: 16px;
   padding: 10px;
+  -webkit-appearance: none;
   width: 100%; }
 li.calc-main div#calculator_wrapper form div.input-wrapper input#calculator_input:focus {
   outline: none;
@@ -838,6 +871,7 @@ li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl {
   right: -40px;
   top: -110px;
   width: 500px;
+  display: none;
   -webkit-transition-property: all;
   -moz-transition-property: all;
   -ms-transition-property: all;
@@ -2777,7 +2811,7 @@ div.course-wrapper section.course-content ol.vert-mod > li {
   margin-bottom: 15px;
   padding: 0 0 15px; }
 div.course-wrapper section.course-content ol.vert-mod > li header {
-  margin-bottom: 0; }
+  margin-bottom: -16px; }
 div.course-wrapper section.course-content ol.vert-mod > li header h1 {
   margin: 0; }
 div.course-wrapper section.course-content ol.vert-mod > li header h2 {
@@ -2793,6 +2827,9 @@ div.course-wrapper section.course-content ol.vert-mod > li:last-child {
 div.course-wrapper section.course-content ol.vert-mod > li ul {
   list-style: disc outside none;
   padding-left: 1em; }
+div.course-wrapper section.course-content ol.vert-mod > li nav.sequence-bottom ul {
+  list-style: none;
+  padding: 0; }
 div.course-wrapper section.course-content section.tutorials h2 {
   margin-bottom: 22.652px; }
 div.course-wrapper section.course-content section.tutorials ul {
@@ -2848,6 +2885,26 @@ div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle {
 div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle:hover, div.course-wrapper section.course-content div.ui-slider a.ui-slider-handle:focus {
   background-color: #bf4040;
   outline: none; }
+div.course-wrapper section.course-content div.ui-tabs {
+  border: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  margin: 0;
+  padding: 0; }
+div.course-wrapper section.course-content div.ui-tabs .ui-tabs-nav {
+  background: none;
+  border: 0;
+  margin-bottom: 11.326px; }
+div.course-wrapper section.course-content div.ui-tabs .ui-tabs-panel {
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  padding: 0; }
 div.course-wrapper.closed section.course-index {
   width: 3.077%; }
 div.course-wrapper.closed section.course-index header#open_close_accordion {
@@ -3107,7 +3164,9 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   outline: none; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr {
   float: left;
-  margin-right: 22.652px; }
+  margin-right: 22.652px;
+  list-style: none;
+  padding: 0; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li {
   float: left;
   margin-bottom: 0; }
@@ -3659,7 +3718,7 @@ nav.sequence-nav ol li p::after {
   width: 10px; }
 nav.sequence-nav ul {
   margin-right: 1px;
-  list-style: none  !important;
+  list-style: none !important;
   position: absolute;
   right: 0;
   top: 0;
@@ -3698,27 +3757,30 @@ nav.sequence-nav ul li.next a {
 nav.sequence-nav ul li.next a:hover {
   background-color: none; }
 
-section.course-content div#seq_content {
-  margin-bottom: 60px; }
-section.course-content nav.sequence-bottom {
-  bottom: -22.652px;
+section.course-content {
   position: relative; }
+section.course-content nav.sequence-bottom {
+  margin: 45.304px 0 0;
+  text-align: center; }
 section.course-content nav.sequence-bottom ul {
   background-color: #f2e7bf;
   background-color: #f2e7bf;
   border: 1px solid #e4d080;
-  border-bottom: 0;
-  -webkit-border-radius: 3px 3px 0 0;
-  -moz-border-radius: 3px 3px 0 0;
-  -ms-border-radius: 3px 3px 0 0;
-  -o-border-radius: 3px 3px 0 0;
-  border-radius: 3px 3px 0 0;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
   -webkit-box-shadow: inset 0 0 0 1px #faf7e9;
   -moz-box-shadow: inset 0 0 0 1px #faf7e9;
   box-shadow: inset 0 0 0 1px #faf7e9;
-  margin: 0 auto;
-  overflow: hidden;
-  width: 106px; }
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto; }
 section.course-content nav.sequence-bottom ul li {
   float: left; }
 section.course-content nav.sequence-bottom ul li.prev, section.course-content nav.sequence-bottom ul li.next {
@@ -3728,8 +3790,7 @@ section.course-content nav.sequence-bottom ul li.prev a, section.course-content
   background-repeat: no-repeat;
   border-bottom: none;
   display: block;
-  display: block;
-  padding: 16.989px 4px;
+  padding: 11.326px 4px;
   text-indent: -9999px;
   -webkit-transition-property: all;
   -moz-transition-property: all;
@@ -3755,14 +3816,14 @@ section.course-content nav.sequence-bottom ul li.prev a, section.course-content
 section.course-content nav.sequence-bottom ul li.prev a:hover, section.course-content nav.sequence-bottom ul li.next a:hover {
   background-color: #eddfaa;
   color: #7e691a;
-  color: #7e691a;
   opacity: .5;
   text-decoration: none; }
 section.course-content nav.sequence-bottom ul li.prev a.disabled, section.course-content nav.sequence-bottom ul li.next a.disabled {
   background-color: #fffffe;
   opacity: .4; }
 section.course-content nav.sequence-bottom ul li.prev a {
-  background-image: url("/static/images/sequence-nav/previous-icon.png"); }
+  background-image: url("/static/images/sequence-nav/previous-icon.png");
+  border-right: 1px solid #e4d080; }
 section.course-content nav.sequence-bottom ul li.prev a:hover {
   background-color: none; }
 section.course-content nav.sequence-bottom ul li.next a {
@@ -3770,64 +3831,276 @@ section.course-content nav.sequence-bottom ul li.next a {
 section.course-content nav.sequence-bottom ul li.next a:hover {
   background-color: none; }
 
-div#graph-container {
-  border-top: 1px solid #ddd;
-  padding-top: 22.652px; }
-div#graph-container canvas#graph {
-  width: 48.641%;
-  float: left;
-  margin-right: 2.717%; }
-div#graph-container div.graph-controls {
-  width: 48.641%;
+section.tool-wrapper {
+  background: #073642;
+  border-top: 1px solid #000203;
+  border-bottom: 1px solid #000203;
+  -webkit-box-shadow: inset 0 0 0 4px #084150;
+  -moz-box-shadow: inset 0 0 0 4px #084150;
+  box-shadow: inset 0 0 0 4px #084150;
+  margin: 22.652px -22.652px 0;
+  color: #839496;
+  display: table; }
+section.tool-wrapper div#graph-container {
+  background: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: table-cell;
+  padding: 22.652px;
+  vertical-align: top;
+  width: 51.359%; }
+section.tool-wrapper div#graph-container .ui-widget-content {
+  background: none;
+  border: none;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0; }
+section.tool-wrapper div#graph-container canvas {
+  width: 100%; }
+section.tool-wrapper div#graph-container ul.ui-tabs-nav {
+  background: #062e39;
+  margin: -22.652px -22.652px 0;
+  padding: 0;
+  position: relative;
+  width: 110%;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  border-bottom: 1px solid #03181d; }
+section.tool-wrapper div#graph-container ul.ui-tabs-nav li {
+  margin-bottom: 0;
+  background: none;
+  color: #fff;
+  border: none;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0; }
+section.tool-wrapper div#graph-container ul.ui-tabs-nav li.ui-tabs-selected {
+  border-right: 1px solid #03181d;
+  border-left: 1px solid #03181d;
+  background-color: #073642; }
+section.tool-wrapper div#graph-container ul.ui-tabs-nav li.ui-tabs-selected:first-child {
+  border-left: none; }
+section.tool-wrapper div#graph-container ul.ui-tabs-nav li.ui-tabs-selected a {
+  color: #eee8d5; }
+section.tool-wrapper div#graph-container ul.ui-tabs-nav li a {
+  border: none;
+  font: bold 12px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #839496; }
+section.tool-wrapper div#graph-container ul.ui-tabs-nav li a:hover {
+  color: #eee8d5; }
+section.tool-wrapper div#controlls-container {
+  background: #062e39;
+  border-right: 1px solid #001317;
+  -webkit-box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d;
+  -moz-box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d;
+  box-shadow: 1px 0 0 #004355, inset 0 0 0 4px #06323d;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: table-cell;
+  padding: 22.652px;
+  vertical-align: top;
+  width: 48.641%; }
+section.tool-wrapper div#controlls-container div.graph-controls {
+  padding: 0 0 22.652px;
+  margin-bottom: 22.652px;
+  border-bottom: 1px solid #05232b;
+  -webkit-box-shadow: 0 1px 0 #083e4b;
+  -moz-box-shadow: 0 1px 0 #083e4b;
+  box-shadow: 0 1px 0 #083e4b; }
+section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper {
+  margin-right: 5.587%;
+  width: 29.609%;
+  float: left; }
+section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper {
+  padding-top: 11.326px;
+  width: 64.804%;
   float: left; }
-div#graph-container div.graph-controls select#musicTypeSelect {
+section.tool-wrapper div#controlls-container div.graph-controls select#musicTypeSelect {
   display: block;
-  margin-bottom: 22.652px; }
-div#graph-container div.graph-controls div#graph-output {
+  margin-bottom: 11.326px;
+  font: 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+  width: 100%; }
+section.tool-wrapper div#controlls-container div.graph-controls div#graph-output, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen {
   display: block;
-  margin-bottom: 22.652px; }
-div#graph-container div.graph-controls div#graph-listen {
+  margin-bottom: 11.326px;
+  text-align: right; }
+section.tool-wrapper div#controlls-container div.graph-controls div#graph-output p, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen p {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+  margin: 0; }
+section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+  margin-bottom: 0; }
+section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul li, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul li {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+  margin-bottom: 0; }
+section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul li input, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul li input {
+  margin-right: 5px; }
+section.tool-wrapper div#controlls-container div.graph-controls input#playButton {
   display: block;
-  margin-bottom: 22.652px; }
-div#graph-container div.graph-controls p {
-  margin-bottom: 11.326px; }
-div#graph-container div.graph-controls div#label {
-  display: inline-block; }
-div#graph-container div.graph-controls input#playButton {
-  display: block; }
-
-div#schematic-container canvas {
-  width: 48.641%;
-  float: left;
-  margin-right: 2.717%; }
-div#schematic-container div.schematic-sliders {
-  width: 48.641%;
-  float: left; }
-div#schematic-container div.schematic-sliders div.slider-label#vs {
-  margin-top: 45.304px; }
-div#schematic-container div.schematic-sliders div.slider-label {
-  margin-bottom: 11.326px; }
-div#schematic-container div.schematic-sliders div.slider {
-  margin-bottom: 22.652px; }
-
-div.graph-controls label, div#graph-listen label {
+  border: 1px solid #b01613;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 0 0 #e07977;
+  -moz-box-shadow: inset 0 1px 0 0 #e07977;
+  box-shadow: inset 0 1px 0 0 #e07977;
+  color: white;
+  display: inline;
+  font-size: 11px;
+  font-weight: bold;
+  background-color: #dc322f;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dc322f), color-stop(100%, #be1815));
+  background-image: -webkit-linear-gradient(top, #dc322f, #be1815);
+  background-image: -moz-linear-gradient(top, #dc322f, #be1815);
+  background-image: -ms-linear-gradient(top, #dc322f, #be1815);
+  background-image: -o-linear-gradient(top, #dc322f, #be1815);
+  background-image: linear-gradient(top, #dc322f, #be1815);
+  padding: 6px 18px 7px;
+  text-shadow: 0 1px 0 #a30f0c;
+  -webkit-background-clip: padding-box;
+  font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+  color: #47221a;
+  text-shadow: 0 1px 0 #e04845;
+  -webkit-box-shadow: inset 0 1px 0 #e35d5b;
+  -moz-box-shadow: inset 0 1px 0 #e35d5b;
+  box-shadow: inset 0 1px 0 #e35d5b; }
+section.tool-wrapper div#controlls-container div.graph-controls input#playButton:hover {
+  -webkit-box-shadow: inset 0 1px 0 0 #d84f4c;
+  -moz-box-shadow: inset 0 1px 0 0 #d84f4c;
+  box-shadow: inset 0 1px 0 0 #d84f4c;
+  cursor: pointer;
+  background-color: #ca2a28;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ca2a28), color-stop(100%, #af1714));
+  background-image: -webkit-linear-gradient(top, #ca2a28, #af1714);
+  background-image: -moz-linear-gradient(top, #ca2a28, #af1714);
+  background-image: -ms-linear-gradient(top, #ca2a28, #af1714);
+  background-image: -o-linear-gradient(top, #ca2a28, #af1714);
+  background-image: linear-gradient(top, #ca2a28, #af1714); }
+section.tool-wrapper div#controlls-container div.graph-controls input#playButton:active {
+  border: 1px solid #b01613;
+  -webkit-box-shadow: inset 0 0 8px 4px #a11614, inset 0 0 8px 4px #a11614, 0 1px 1px 0 #eeeeee;
+  -moz-box-shadow: inset 0 0 8px 4px #a11614, inset 0 0 8px 4px #a11614, 0 1px 1px 0 #eeeeee;
+  box-shadow: inset 0 0 8px 4px #a11614, inset 0 0 8px 4px #a11614, 0 1px 1px 0 #eeeeee; }
+section.tool-wrapper div#controlls-container div.graph-controls input#playButton:active {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"] {
+  border: 1px solid #030d15;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 0 0 #215f8a;
+  -moz-box-shadow: inset 0 1px 0 0 #215f8a;
+  box-shadow: inset 0 1px 0 0 #215f8a;
+  color: white;
+  display: inline;
+  font-size: 11px;
+  font-weight: bold;
+  background-color: #0f3550;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f3550), color-stop(100%, #041623));
+  background-image: -webkit-linear-gradient(top, #0f3550, #041623);
+  background-image: -moz-linear-gradient(top, #0f3550, #041623);
+  background-image: -ms-linear-gradient(top, #0f3550, #041623);
+  background-image: -o-linear-gradient(top, #0f3550, #041623);
+  background-image: linear-gradient(top, #0f3550, #041623);
+  padding: 6px 18px 7px;
+  text-shadow: 0 1px 0 #000203;
+  -webkit-background-clip: padding-box;
+  font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; }
+section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"]:hover {
+  -webkit-box-shadow: inset 0 1px 0 0 #174362;
+  -moz-box-shadow: inset 0 1px 0 0 #174362;
+  box-shadow: inset 0 1px 0 0 #174362;
+  cursor: pointer;
+  background-color: #0c2739;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0c2739), color-stop(100%, #030d15));
+  background-image: -webkit-linear-gradient(top, #0c2739, #030d15);
+  background-image: -moz-linear-gradient(top, #0c2739, #030d15);
+  background-image: -ms-linear-gradient(top, #0c2739, #030d15);
+  background-image: -o-linear-gradient(top, #0c2739, #030d15);
+  background-image: linear-gradient(top, #0c2739, #030d15); }
+section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"]:active {
+  border: 1px solid #030d15;
+  -webkit-box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee;
+  -moz-box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee;
+  box-shadow: inset 0 0 8px 4px #010507, inset 0 0 8px 4px #010507, 0 1px 1px 0 #eeeeee; }
+section.tool-wrapper div#controlls-container div.graph-controls input#playButton[value="Stop"]:active {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+section.tool-wrapper div#controlls-container label {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   -ms-border-radius: 2px;
   -o-border-radius: 2px;
   border-radius: 2px;
   font-weight: bold;
-  padding: 3px; }
-div.graph-controls label[for="vinCheckbox"], div.graph-controls label[for="vinRadioButton"], div#graph-listen label[for="vinCheckbox"], div#graph-listen label[for="vinRadioButton"] {
+  padding: 3px;
+  color: #fff;
+  -webkit-font-smoothing: antialiased; }
+section.tool-wrapper div#controlls-container label[for="vinCheckbox"], section.tool-wrapper div#controlls-container label[for="vinRadioButton"] {
   color: #409fbf; }
-div.graph-controls label[for="voutCheckbox"], div.graph-controls label[for="voutRadioButton"], div#graph-listen label[for="voutCheckbox"], div#graph-listen label[for="voutRadioButton"] {
+section.tool-wrapper div#controlls-container label[for="voutCheckbox"], section.tool-wrapper div#controlls-container label[for="voutRadioButton"] {
   color: #e1a600; }
-div.graph-controls label[for="vrCheckbox"], div.graph-controls label[for="vrRadioButton"], div#graph-listen label[for="vrCheckbox"], div#graph-listen label[for="vrRadioButton"] {
+section.tool-wrapper div#controlls-container label[for="vrCheckbox"], section.tool-wrapper div#controlls-container label[for="vrRadioButton"] {
   color: #49c944; }
-div.graph-controls label[for="vcCheckbox"], div.graph-controls label[for="vcRadioButton"], div#graph-listen label[for="vcCheckbox"], div#graph-listen label[for="vcRadioButton"] {
+section.tool-wrapper div#controlls-container label[for="vcCheckbox"], section.tool-wrapper div#controlls-container label[for="vcRadioButton"] {
   color: #e1a600; }
-div.graph-controls label[for="vlCheckbox"], div.graph-controls label[for="vlRadioButton"], div#graph-listen label[for="vlCheckbox"], div#graph-listen label[for="vlRadioButton"] {
+section.tool-wrapper div#controlls-container label[for="vlCheckbox"], section.tool-wrapper div#controlls-container label[for="vlRadioButton"] {
   color: #a26784; }
+section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label {
+  margin-bottom: 11.326px;
+  font-weight: bold;
+  text-shadow: 0 -1px 0 #021014;
+  -webkit-font-smoothing: antialiased; }
+section.tool-wrapper div#controlls-container div.schematic-sliders div.slider {
+  margin-bottom: 22.652px; }
+section.tool-wrapper div#controlls-container div.schematic-sliders div.slider.ui-slider-horizontal {
+  height: 0.4em;
+  background: #00232c;
+  border: 1px solid #000b0d;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle {
+  background-color: #dc322f;
+  margin-top: -0.3em; }
+section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle:hover, section.tool-wrapper div#controlls-container div.schematic-sliders div.slider .ui-slider-handle:active {
+  background-color: #e04845; }
 
 div.book-wrapper section.book-sidebar {
   -webkit-box-sizing: border-box;

static/css/marketing-ie.css

+/* line 1, sass/marketing-ie.scss */
 body {
   margin: 0;
   padding: 0; }
 
+/* line 6, sass/marketing-ie.scss */
 .wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, section.index-content, footer {
   margin: 0;
   overflow: hidden; }
 
+/* line 12, sass/marketing-ie.scss */
 div#enroll form {
   display: none; }

static/css/marketing.css

@@ -5,7 +5,18 @@ 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 {
+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;
@@ -17,7 +28,8 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
 body {
   line-height: 1; }
 
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
   display: block; }
 
 nav ul {
@@ -26,7 +38,8 @@ nav ul {
 blockquote, q {
   quotes: none; }
 
-blockquote:before, blockquote:after, q:before, q:after {
+blockquote:before, blockquote:after,
+q:before, q:after {
   content: '';
   content: none; }
 
@@ -127,27 +140,27 @@ input, select {
 
 .subpage > div, section.copyright > div, section.tos > div, section.privacy-policy > div, section.honor-code > div {
   padding-left: 34.171%; }
-@media screen and (max-width: 940px) {
-  .subpage > div, section.copyright > div, section.tos > div, section.privacy-policy > div, section.honor-code > div {
-    padding-left: 0; } }
-.subpage > div p, section.copyright > div p, section.tos > div p, section.privacy-policy > div p, section.honor-code > div p {
-  margin-bottom: 25.888px;
-  line-height: 25.888px; }
-.subpage > div h1, section.copyright > div h1, section.tos > div h1, section.privacy-policy > div h1, section.honor-code > div h1 {
-  margin-bottom: 12.944px; }
-.subpage > div h2, section.copyright > div h2, section.tos > div h2, section.privacy-policy > div h2, section.honor-code > div h2 {
-  font: 18px "Open Sans", Helvetica, Arial, sans-serif;
-  color: #000;
-  margin-bottom: 12.944px; }
-.subpage > div ul, section.copyright > div ul, section.tos > div ul, section.privacy-policy > div ul, section.honor-code > div ul {
-  list-style: disc outside none; }
-.subpage > div ul li, section.copyright > div ul li, section.tos > div ul li, section.privacy-policy > div ul li, section.honor-code > div ul li {
-  list-style: disc outside none;
-  line-height: 25.888px; }
-.subpage > div dl, section.copyright > div dl, section.tos > div dl, section.privacy-policy > div dl, section.honor-code > div dl {
-  margin-bottom: 25.888px; }
-.subpage > div dl dd, section.copyright > div dl dd, section.tos > div dl dd, section.privacy-policy > div dl dd, section.honor-code > div dl dd {
-  margin-bottom: 12.944px; }
+  @media screen and (max-width: 940px) {
+    .subpage > div, section.copyright > div, section.tos > div, section.privacy-policy > div, section.honor-code > div {
+      padding-left: 0; } }
+  .subpage > div p, section.copyright > div p, section.tos > div p, section.privacy-policy > div p, section.honor-code > div p {
+    margin-bottom: 25.888px;
+    line-height: 25.888px; }
+  .subpage > div h1, section.copyright > div h1, section.tos > div h1, section.privacy-policy > div h1, section.honor-code > div h1 {
+    margin-bottom: 12.944px; }
+  .subpage > div h2, section.copyright > div h2, section.tos > div h2, section.privacy-policy > div h2, section.honor-code > div h2 {
+    font: 18px "Open Sans", Helvetica, Arial, sans-serif;
+    color: #000;
+    margin-bottom: 12.944px; }
+  .subpage > div ul, section.copyright > div ul, section.tos > div ul, section.privacy-policy > div ul, section.honor-code > div ul {
+    list-style: disc outside none; }
+    .subpage > div ul li, section.copyright > div ul li, section.tos > div ul li, section.privacy-policy > div ul li, section.honor-code > div ul li {
+      list-style: disc outside none;
+      line-height: 25.888px; }
+  .subpage > div dl, section.copyright > div dl, section.tos > div dl, section.privacy-policy > div dl, section.honor-code > div dl {
+    margin-bottom: 25.888px; }
+    .subpage > div dl dd, section.copyright > div dl dd, section.tos > div dl dd, section.privacy-policy > div dl dd, section.honor-code > div dl dd {
+      margin-bottom: 12.944px; }
 
 .clearfix:after, .subpage:after, section.copyright:after, section.tos:after, section.privacy-policy:after, section.honor-code:after, header.announcement div section:after, footer:after, section.index-content:after, section.index-content section:after, section.index-content section.about section:after, div.leanModal_box#enroll ol:after {
   content: ".";
@@ -200,12 +213,12 @@ input, select {
   -moz-box-shadow: inset 0 1px 0 #b83d3d;
   box-shadow: inset 0 1px 0 #b83d3d;
   -webkit-font-smoothing: antialiased; }
-.button:hover, header.announcement div section.course section a:hover, section.index-content section.course a:hover, section.index-content section.staff a:hover, section.index-content section.about-course section.cta a.enroll:hover {
-  background-color: #732626;
-  border-color: #4d1919; }
-.button span, header.announcement div section.course section a span, section.index-content section.course a span, section.index-content section.staff a span, section.index-content section.about-course section.cta a.enroll span {
-  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
-  font-style: italic; }
+  .button:hover, header.announcement div section.course section a:hover, section.index-content section.course a:hover, section.index-content section.staff a:hover, section.index-content section.about-course section.cta a.enroll:hover {
+    background-color: #732626;
+    border-color: #4d1919; }
+  .button span, header.announcement div section.course section a span, section.index-content section.course a span, section.index-content section.staff a span, section.index-content section.about-course section.cta a.enroll span {
+    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+    font-style: italic; }
 
 p.ie-warning {
   display: block !important;
@@ -218,37 +231,37 @@ body {
   background-color: #fff;
   color: #444;
   font: 16px Georgia, serif; }
-body :focus {
-  outline-color: #ccc; }
-body h1 {
-  font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
-body li {
-  margin-bottom: 25.888px; }
-body em {
-  font-style: italic; }
-body a {
-  color: #993333;
-  font-style: italic;
-  text-decoration: none; }
-body a:hover, body a:focus {
-  color: #732626; }
-body input[type="email"], body input[type="number"], body input[type="password"], body input[type="search"], body input[type="tel"], body input[type="text"], body input[type="url"], body input[type="color"], body input[type="date"], body input[type="datetime"], body input[type="datetime-local"], body input[type="month"], body input[type="time"], body input[type="week"], body textarea {
-  -webkit-box-shadow: 0 -1px 0 white;
-  -moz-box-shadow: 0 -1px 0 white;
-  box-shadow: 0 -1px 0 white;
-  background-color: #eeeeee;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, white));
-  background-image: -webkit-linear-gradient(top, #eeeeee, white);
-  background-image: -moz-linear-gradient(top, #eeeeee, white);
-  background-image: -ms-linear-gradient(top, #eeeeee, white);
-  background-image: -o-linear-gradient(top, #eeeeee, white);
-  background-image: linear-gradient(top, #eeeeee, white);
-  border: 1px solid #999;
-  font: 16px Georgia, serif;
-  padding: 4px;
-  width: 100%; }
-body input[type="email"]:focus, body input[type="number"]:focus, body input[type="password"]:focus, body input[type="search"]:focus, body input[type="tel"]:focus, body input[type="text"]:focus, body input[type="url"]:focus, body input[type="color"]:focus, body input[type="date"]:focus, body input[type="datetime"]:focus, body input[type="datetime-local"]:focus, body input[type="month"]:focus, body input[type="time"]:focus, body input[type="week"]:focus, body textarea:focus {
-  border-color: #993333; }
+  body :focus {
+    outline-color: #ccc; }
+  body h1 {
+    font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
+  body li {
+    margin-bottom: 25.888px; }
+  body em {
+    font-style: italic; }
+  body a {
+    color: #993333;
+    font-style: italic;
+    text-decoration: none; }
+    body a:hover, body a:focus {
+      color: #732626; }
+  body input[type="email"], body input[type="number"], body input[type="password"], body input[type="search"], body input[type="tel"], body input[type="text"], body input[type="url"], body input[type="color"], body input[type="date"], body input[type="datetime"], body input[type="datetime-local"], body input[type="month"], body input[type="time"], body input[type="week"], body textarea {
+    -webkit-box-shadow: 0 -1px 0 white;
+    -moz-box-shadow: 0 -1px 0 white;
+    box-shadow: 0 -1px 0 white;
+    background-color: #eeeeee;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, white));
+    background-image: -webkit-linear-gradient(top, #eeeeee, white);
+    background-image: -moz-linear-gradient(top, #eeeeee, white);
+    background-image: -ms-linear-gradient(top, #eeeeee, white);
+    background-image: -o-linear-gradient(top, #eeeeee, white);
+    background-image: linear-gradient(top, #eeeeee, white);
+    border: 1px solid #999;
+    font: 16px Georgia, serif;
+    padding: 4px;
+    width: 100%; }
+    body input[type="email"]:focus, body input[type="number"]:focus, body input[type="password"]:focus, body input[type="search"]:focus, body input[type="tel"]:focus, body input[type="text"]:focus, body input[type="url"]:focus, body input[type="color"]:focus, body input[type="date"]:focus, body input[type="datetime"]:focus, body input[type="datetime-local"]:focus, body input[type="month"]:focus, body input[type="time"]:focus, body input[type="week"]:focus, body textarea:focus {
+      border-color: #993333; }
 
 header.announcement {
   -webkit-background-size: cover;
@@ -260,474 +273,479 @@ header.announcement {
   border-bottom: 1px solid #000;
   color: #fff;
   -webkit-font-smoothing: antialiased; }
-header.announcement.home {
-  background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); }
-@media screen and (min-width: 1200px) {
   header.announcement.home {
-    background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); } }
-header.announcement.home div {
-  padding: 258.88px 25.888px 77.664px; }
-@media screen and (max-width:780px) {
-  header.announcement.home div {
-    padding: 64.72px 25.888px 51.776px; } }
-header.announcement.home div nav h1 {
-  margin-right: 0; }
-header.announcement.home div nav a.login {
-  display: none; }
-header.announcement.course {
-  background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg"); }
-@media screen and (min-width: 1200px) {
-  header.announcement.course {
-    background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg"); } }
-@media screen and (max-width: 1199px) and (min-width: 700px) {
+    background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); }
+    @media screen and (min-width: 1200px) {
+      header.announcement.home {
+        background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); } }
+    header.announcement.home div {
+      padding: 258.88px 25.888px 77.664px; }
+      @media screen and (max-width:780px) {
+        header.announcement.home div {
+          padding: 64.72px 25.888px 51.776px; } }
+      header.announcement.home div nav h1 {
+        margin-right: 0; }
+      header.announcement.home div nav a.login {
+        display: none; }
   header.announcement.course {
-    background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg"); } }
-header.announcement.course div {
-  padding: 103.552px 25.888px 51.776px; }
-@media screen and (max-width:780px) {
-  header.announcement.course div {
-    padding: 64.72px 25.888px 51.776px; } }
-header.announcement div {
-  position: relative; }
-header.announcement div nav {
-  position: absolute;
-  top: 0;
-  right: 25.888px;
-  -webkit-border-radius: 0 0 3px 3px;
-  -moz-border-radius: 0 0 3px 3px;
-  -ms-border-radius: 0 0 3px 3px;
-  -o-border-radius: 0 0 3px 3px;
-  border-radius: 0 0 3px 3px;
-  background: #333;
-  background: rgba(0, 0, 0, 0.7);
-  padding: 12.944px 25.888px; }
-header.announcement div nav h1 {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  margin-right: 12.944px; }
-header.announcement div nav h1 a {
-  font: italic 800 18px "Open Sans", Helvetica, Arial, sans-serif;
-  color: #fff;
-  text-decoration: none; }
-header.announcement div nav h1 a:hover, header.announcement div nav h1 a:focus {
-  color: #999; }
-header.announcement div nav a.login {
-  text-decoration: none;
-  color: #fff;
-  font-size: 12px;
-  font-style: normal;
-  font-family: "Open Sans", Helvetica, Arial, sans-serif; }
-header.announcement div nav a.login:hover, header.announcement div nav a.login:focus {
-  color: #999; }
-header.announcement div section {
-  background: #993333;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  margin-left: 34.171%;
-  padding: 25.888px 38.832px; }
-@media screen and (max-width: 780px) {
-  header.announcement div section {
-    margin-left: 0; } }
-header.announcement div section h1 {
-  font-family: "Open Sans";
-  font-size: 30px;
-  font-weight: 800;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  line-height: 1.2em;
-  margin: 0 25.888px 0 0; }
-header.announcement div section h2 {
-  font-family: "Open Sans";
-  font-size: 24px;
-  font-weight: 400;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  line-height: 1.2em; }
-header.announcement div section.course section {
-  float: left;
-  margin-left: 0;
-  margin-right: 3.817%;
-  padding: 0;
-  width: 48.092%; }
-@media screen and (max-width: 780px) {
-  header.announcement div section.course section {
-    float: none;
-    width: 100%;
-    margin-right: 0; } }
-header.announcement div section.course section a {
-  background-color: #4d1919;
-  border-color: #260d0d;
-  -webkit-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
-  -moz-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
-  box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
-  display: block;
-  padding: 12.944px 25.888px;
-  text-align: center; }
-header.announcement div section.course section a:hover {
-  background-color: #732626;
-  border-color: #4d1919; }
-header.announcement div section.course p {
-  width: 48.092%;
-  line-height: 25.888px;
-  float: left; }
-@media screen and (max-width: 780px) {
-  header.announcement div section.course p {
-    float: none;
-    width: 100%; } }
+    background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg"); }
+    @media screen and (min-width: 1200px) {
+      header.announcement.course {
+        background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg"); } }
+    @media screen and (max-width: 1199px) and (min-width: 700px) {
+      header.announcement.course {
+        background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg"); } }
+    header.announcement.course div {
+      padding: 103.552px 25.888px 51.776px; }
+      @media screen and (max-width:780px) {
+        header.announcement.course div {
+          padding: 64.72px 25.888px 51.776px; } }
+  header.announcement div {
+    position: relative; }
+    header.announcement div nav {
+      position: absolute;
+      top: 0;
+      right: 25.888px;
+      -webkit-border-radius: 0 0 3px 3px;
+      -moz-border-radius: 0 0 3px 3px;
+      -ms-border-radius: 0 0 3px 3px;
+      -o-border-radius: 0 0 3px 3px;
+      border-radius: 0 0 3px 3px;
+      background: #333;
+      background: rgba(0, 0, 0, 0.7);
+      padding: 12.944px 25.888px; }
+      header.announcement div nav h1 {
+        display: -moz-inline-box;
+        -moz-box-orient: vertical;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        margin-right: 12.944px; }
+        header.announcement div nav h1 a {
+          font: italic 800 18px "Open Sans", Helvetica, Arial, sans-serif;
+          color: #fff;
+          text-decoration: none; }
+          header.announcement div nav h1 a:hover, header.announcement div nav h1 a:focus {
+            color: #999; }
+      header.announcement div nav a.login {
+        text-decoration: none;
+        color: #fff;
+        font-size: 12px;
+        font-style: normal;
+        font-family: "Open Sans", Helvetica, Arial, sans-serif; }
+        header.announcement div nav a.login:hover, header.announcement div nav a.login:focus {
+          color: #999; }
+    header.announcement div section {
+      background: #993333;
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto;
+      margin-left: 34.171%;
+      padding: 25.888px 38.832px; }
+      @media screen and (max-width: 780px) {
+        header.announcement div section {
+          margin-left: 0; } }
+      header.announcement div section h1 {
+        font-family: "Open Sans";
+        font-size: 30px;
+        font-weight: 800;
+        display: -moz-inline-box;
+        -moz-box-orient: vertical;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        line-height: 1.2em;
+        margin: 0 25.888px 0 0; }
+      header.announcement div section h2 {
+        font-family: "Open Sans";
+        font-size: 24px;
+        font-weight: 400;
+        display: -moz-inline-box;
+        -moz-box-orient: vertical;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        line-height: 1.2em; }
+      header.announcement div section.course section {
+        float: left;
+        margin-left: 0;
+        margin-right: 3.817%;
+        padding: 0;
+        width: 48.092%; }
+        @media screen and (max-width: 780px) {
+          header.announcement div section.course section {
+            float: none;
+            width: 100%;
+            margin-right: 0; } }
+        header.announcement div section.course section a {
+          background-color: #4d1919;
+          border-color: #260d0d;
+          -webkit-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
+          -moz-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
+          box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
+          display: block;
+          padding: 12.944px 25.888px;
+          text-align: center; }
+          header.announcement div section.course section a:hover {
+            background-color: #732626;
+            border-color: #4d1919; }
+      header.announcement div section.course p {
+        width: 48.092%;
+        line-height: 25.888px;
+        float: left; }
+        @media screen and (max-width: 780px) {
+          header.announcement div section.course p {
+            float: none;
+            width: 100%; } }
 
 footer {
   padding-top: 0; }
-footer div.footer-wrapper {
-  border-top: 1px solid #e5e5e5;
-  padding: 25.888px 0;
-  background: url("/static/images/marketing/mit-logo.png") right center no-repeat; }
-@media screen and (max-width: 780px) {
   footer div.footer-wrapper {
-    background-position: left bottom;
-    padding-bottom: 77.664px; } }
-footer div.footer-wrapper a {
-  color: #888;
-  text-decoration: none;
-  -webkit-transition-property: all;
-  -moz-transition-property: all;
-  -ms-transition-property: all;
-  -o-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.15s;
-  -moz-transition-duration: 0.15s;
-  -ms-transition-duration: 0.15s;
-  -o-transition-duration: 0.15s;
-  transition-duration: 0.15s;
-  -webkit-transition-timing-function: ease-out;
-  -moz-transition-timing-function: ease-out;
-  -ms-transition-timing-function: ease-out;
-  -o-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-  -webkit-transition-delay: 0;
-  -moz-transition-delay: 0;
-  -ms-transition-delay: 0;
-  -o-transition-delay: 0;
-  transition-delay: 0; }
-footer div.footer-wrapper a:hover, footer div.footer-wrapper a:focus {
-  color: #666; }
-footer div.footer-wrapper p {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  margin-right: 25.888px; }
-footer div.footer-wrapper ul {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto; }
-@media screen and (max-width: 780px) {
-  footer div.footer-wrapper ul {
-    margin-top: 25.888px; } }
-footer div.footer-wrapper ul li {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  margin-bottom: 0; }
-footer div.footer-wrapper ul li:after {
-  content: ' |';
-  display: inline;
-  color: #ccc; }
-footer div.footer-wrapper ul li:last-child:after {
-  content: none; }
-footer div.footer-wrapper ul.social {
-  float: right;
-  margin-right: 60px;
-  position: relative;
-  top: -5px; }
-@media screen and (max-width: 780px) {
-  footer div.footer-wrapper ul.social {
-    float: none; } }
-footer div.footer-wrapper ul.social li {
-  float: left;
-  margin-right: 12.944px; }
-footer div.footer-wrapper ul.social li:after {
-  content: none;
-  display: none; }
-footer div.footer-wrapper ul.social li a {
-  display: block;
-  height: 29px;
-  width: 28px;
-  text-indent: -9999px; }
-footer div.footer-wrapper ul.social li a:hover {
-  opacity: .8; }
-footer div.footer-wrapper ul.social li.twitter a {
-  background: url("/static/images/marketing/twitter.png") 0 0 no-repeat; }
-footer div.footer-wrapper ul.social li.facebook a {
-  background: url("/static/images/marketing/facebook.png") 0 0 no-repeat; }
-footer div.footer-wrapper ul.social li.linkedin a {
-  background: url("/static/images/marketing/linkedin.png") 0 0 no-repeat; }
+    border-top: 1px solid #e5e5e5;
+    padding: 25.888px 0;
+    background: url("/static/images/marketing/mit-logo.png") right center no-repeat; }
+    @media screen and (max-width: 780px) {
+      footer div.footer-wrapper {
+        background-position: left bottom;
+        padding-bottom: 77.664px; } }
+    footer div.footer-wrapper a {
+      color: #888;
+      text-decoration: none;
+      -webkit-transition-property: all;
+      -moz-transition-property: all;
+      -ms-transition-property: all;
+      -o-transition-property: all;
+      transition-property: all;
+      -webkit-transition-duration: 0.15s;
+      -moz-transition-duration: 0.15s;
+      -ms-transition-duration: 0.15s;
+      -o-transition-duration: 0.15s;
+      transition-duration: 0.15s;
+      -webkit-transition-timing-function: ease-out;
+      -moz-transition-timing-function: ease-out;
+      -ms-transition-timing-function: ease-out;
+      -o-transition-timing-function: ease-out;
+      transition-timing-function: ease-out;
+      -webkit-transition-delay: 0;
+      -moz-transition-delay: 0;
+      -ms-transition-delay: 0;
+      -o-transition-delay: 0;
+      transition-delay: 0; }
+      footer div.footer-wrapper a:hover, footer div.footer-wrapper a:focus {
+        color: #666; }
+    footer div.footer-wrapper p {
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto;
+      margin-right: 25.888px; }
+    footer div.footer-wrapper ul {
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto; }
+      @media screen and (max-width: 780px) {
+        footer div.footer-wrapper ul {
+          margin-top: 25.888px; } }
+      footer div.footer-wrapper ul li {
+        display: -moz-inline-box;
+        -moz-box-orient: vertical;
+        display: inline-block;
+        vertical-align: baseline;
+        zoom: 1;
+        *display: inline;
+        *vertical-align: auto;
+        margin-bottom: 0; }
+        footer div.footer-wrapper ul li:after {
+          content: ' |';
+          display: inline;
+          color: #ccc; }
+        footer div.footer-wrapper ul li:last-child:after {
+          content: none; }
+      footer div.footer-wrapper ul.social {
+        float: right;
+        margin-right: 60px;
+        position: relative;
+        top: -5px; }
+        @media screen and (max-width: 780px) {
+          footer div.footer-wrapper ul.social {
+            float: none; } }
+        footer div.footer-wrapper ul.social li {
+          float: left;
+          margin-right: 12.944px; }
+          footer div.footer-wrapper ul.social li:after {
+            content: none;
+            display: none; }
+          footer div.footer-wrapper ul.social li a {
+            display: block;
+            height: 29px;
+            width: 28px;
+            text-indent: -9999px; }
+            footer div.footer-wrapper ul.social li a:hover {
+              opacity: .8; }
+          footer div.footer-wrapper ul.social li.twitter a {
+            background: url("/static/images/marketing/twitter.png") 0 0 no-repeat; }
+          footer div.footer-wrapper ul.social li.facebook a {
+            background: url("/static/images/marketing/facebook.png") 0 0 no-repeat; }
+          footer div.footer-wrapper ul.social li.linkedin a {
+            background: url("/static/images/marketing/linkedin.png") 0 0 no-repeat; }
 
 section.index-content section {
   float: left; }
-@media screen and (max-width: 780px) {
-  section.index-content section {
-    float: none;
-    width: auto;
-    margin-right: 0; } }
-section.index-content section h1 {
-  font-size: 800 24px "Open Sans";
-  margin-bottom: 25.888px; }
-section.index-content section p {
-  line-height: 25.888px;
-  margin-bottom: 25.888px; }
-section.index-content section ul {
-  margin: 0; }
-section.index-content section.about {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  border-right: 1px solid #e5e5e5;
-  margin-right: 2.513%;
-  padding-right: 1.256%;
-  width: 65.829%; }
-@media screen and (max-width: 780px) {
+  @media screen and (max-width: 780px) {
+    section.index-content section {
+      float: none;
+      width: auto;
+      margin-right: 0; } }
+  section.index-content section h1 {
+    font-size: 800 24px "Open Sans";
+    margin-bottom: 25.888px; }
+  section.index-content section p {
+    line-height: 25.888px;
+    margin-bottom: 25.888px; }
+  section.index-content section ul {
+    margin: 0; }
   section.index-content section.about {
-    width: 100%;
-    border-right: 0;
-    margin-right: 0;
-    padding-right: 0; } }
-section.index-content section.about section {
-  margin-bottom: 25.888px; }
-section.index-content section.about section p {
-  width: 48.092%;
-  float: left; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section p {
-    float: none;
-    width: auto; } }
-section.index-content section.about section p:nth-child(odd) {
-  margin-right: 3.817%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section p:nth-child(odd) {
-    margin-right: 0; } }
-section.index-content section.about section.intro section {
-  margin-bottom: 0; }
-section.index-content section.about section.intro section.intro-text {
-  margin-right: 3.817%;
-  width: 48.092%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section.intro section.intro-text {
-    margin-right: 0;
-    width: auto; } }
-section.index-content section.about section.intro section.intro-text p {
-  margin-right: 0;
-  width: auto;
-  float: none; }
-section.index-content section.about section.intro section.intro-video {
-  width: 48.092%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section.intro section.intro-video {
-    width: auto; } }
-section.index-content section.about section.intro section.intro-video a {
-  display: block;
-  width: 100%; }
-section.index-content section.about section.intro section.intro-video a img {
-  width: 100%; }
-section.index-content section.about section.intro section.intro-video a span {
-  display: none; }
-section.index-content section.about section.features {
-  border-top: 1px solid #E5E5E5;
-  padding-top: 25.888px;
-  margin-bottom: 0; }
-section.index-content section.about section.features h2 {
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #888;
-  margin-bottom: 25.888px;
-  font-weight: normal;
-  font-size: 14px; }
-section.index-content section.about section.features h2 span {
-  text-transform: none; }
-section.index-content section.about section.features p {
-  width: auto;
-  clear: both; }
-section.index-content section.about section.features p strong {
-  font-family: "Open sans";
-  font-weight: 800; }
-section.index-content section.about section.features p a {
-  color: #993333;
-  text-decoration: none;
-  -webkit-transition-property: all;
-  -moz-transition-property: all;
-  -ms-transition-property: all;
-  -o-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.15s;
-  -moz-transition-duration: 0.15s;
-  -ms-transition-duration: 0.15s;
-  -o-transition-duration: 0.15s;
-  transition-duration: 0.15s;
-  -webkit-transition-timing-function: ease-out;
-  -moz-transition-timing-function: ease-out;
-  -ms-transition-timing-function: ease-out;
-  -o-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-  -webkit-transition-delay: 0;
-  -moz-transition-delay: 0;
-  -ms-transition-delay: 0;
-  -o-transition-delay: 0;
-  transition-delay: 0; }
-section.index-content section.about section.features p a:hover, section.index-content section.about section.features p a:focus {
-  color: #602020; }
-section.index-content section.about section.features ul {
-  margin-bottom: 0; }
-section.index-content section.about section.features ul li {
-  line-height: 25.888px;
-  width: 48.092%;
-  float: left;
-  margin-bottom: 12.944px; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section.features ul li {
-    width: auto;
-    float: none; } }
-section.index-content section.about section.features ul li:nth-child(odd) {
-  margin-right: 3.817%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about section.features ul li:nth-child(odd) {
-    margin-right: 0; } }
-section.index-content section.course, section.index-content section.staff {
-  width: 31.658%; }
-@media screen and (max-width: 780px) {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border-right: 1px solid #e5e5e5;
+    margin-right: 2.513%;
+    padding-right: 1.256%;
+    width: 65.829%; }
+    @media screen and (max-width: 780px) {
+      section.index-content section.about {
+        width: 100%;
+        border-right: 0;
+        margin-right: 0;
+        padding-right: 0; } }
+    section.index-content section.about section {
+      margin-bottom: 25.888px; }
+      section.index-content section.about section p {
+        width: 48.092%;
+        float: left; }
+        @media screen and (max-width: 780px) {
+          section.index-content section.about section p {
+            float: none;
+            width: auto; } }
+        section.index-content section.about section p:nth-child(odd) {
+          margin-right: 3.817%; }
+          @media screen and (max-width: 780px) {
+            section.index-content section.about section p:nth-child(odd) {
+              margin-right: 0; } }
+      section.index-content section.about section.intro section {
+        margin-bottom: 0; }
+        section.index-content section.about section.intro section.intro-text {
+          margin-right: 3.817%;
+          width: 48.092%; }
+          @media screen and (max-width: 780px) {
+            section.index-content section.about section.intro section.intro-text {
+              margin-right: 0;
+              width: auto; } }
+          section.index-content section.about section.intro section.intro-text p {
+            margin-right: 0;
+            width: auto;
+            float: none; }
+        section.index-content section.about section.intro section.intro-video {
+          width: 48.092%; }
+          @media screen and (max-width: 780px) {
+            section.index-content section.about section.intro section.intro-video {
+              width: auto; } }
+          section.index-content section.about section.intro section.intro-video a {
+            display: block;
+            width: 100%; }
+            section.index-content section.about section.intro section.intro-video a img {
+              width: 100%; }
+            section.index-content section.about section.intro section.intro-video a span {
+              display: none; }
+      section.index-content section.about section.features {
+        border-top: 1px solid #E5E5E5;
+        padding-top: 25.888px;
+        margin-bottom: 0; }
+        section.index-content section.about section.features h2 {
+          text-transform: uppercase;
+          letter-spacing: 1px;
+          color: #888;
+          margin-bottom: 25.888px;
+          font-weight: normal;
+          font-size: 14px; }
+          section.index-content section.about section.features h2 span {
+            text-transform: none; }
+        section.index-content section.about section.features p {
+          width: auto;
+          clear: both; }
+          section.index-content section.about section.features p strong {
+            font-family: "Open sans";
+            font-weight: 800; }
+          section.index-content section.about section.features p a {
+            color: #993333;
+            text-decoration: none;
+            -webkit-transition-property: all;
+            -moz-transition-property: all;
+            -ms-transition-property: all;
+            -o-transition-property: all;
+            transition-property: all;
+            -webkit-transition-duration: 0.15s;
+            -moz-transition-duration: 0.15s;
+            -ms-transition-duration: 0.15s;
+            -o-transition-duration: 0.15s;
+            transition-duration: 0.15s;
+            -webkit-transition-timing-function: ease-out;
+            -moz-transition-timing-function: ease-out;
+            -ms-transition-timing-function: ease-out;
+            -o-transition-timing-function: ease-out;
+            transition-timing-function: ease-out;
+            -webkit-transition-delay: 0;
+            -moz-transition-delay: 0;
+            -ms-transition-delay: 0;
+            -o-transition-delay: 0;
+            transition-delay: 0; }
+            section.index-content section.about section.features p a:hover, section.index-content section.about section.features p a:focus {
+              color: #602020; }
+        section.index-content section.about section.features ul {
+          margin-bottom: 0; }
+          section.index-content section.about section.features ul li {
+            line-height: 25.888px;
+            width: 48.092%;
+            float: left;
+            margin-bottom: 12.944px; }
+            @media screen and (max-width: 780px) {
+              section.index-content section.about section.features ul li {
+                width: auto;
+                float: none; } }
+            section.index-content section.about section.features ul li:nth-child(odd) {
+              margin-right: 3.817%; }
+              @media screen and (max-width: 780px) {
+                section.index-content section.about section.features ul li:nth-child(odd) {
+                  margin-right: 0; } }
   section.index-content section.course, section.index-content section.staff {
-    width: auto; } }
-section.index-content section.course h1, section.index-content section.staff h1 {
-  color: #888;
-  font: normal 16px Georgia, serif;
-  font-size: 14px;
-  letter-spacing: 1px;
-  margin-bottom: 25.888px;
-  text-transform: uppercase; }
-section.index-content section.course h2, section.index-content section.staff h2 {
-  font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
-section.index-content section.course h3, section.index-content section.staff h3 {
-  font: 400 18px "Open Sans", Helvetica, Arial, sans-serif; }
-section.index-content section.course a span.arrow, section.index-content section.staff a span.arrow {
-  color: rgba(255, 255, 255, 0.6);
-  font-style: normal;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  padding-left: 10px; }
-section.index-content section.course ul, section.index-content section.staff ul {
-  list-style: none; }
-section.index-content section.course ul li img, section.index-content section.staff ul li img {
-  float: left;
-  margin-right: 12.944px; }
-section.index-content section.course h2 {
-  padding-top: 129.44px;
-  background: url("/static/images/marketing/circuits-bg.jpg") 0 0 no-repeat;
-  -webkit-background-size: contain;
-  -moz-background-size: contain;
-  -ms-background-size: contain;
-  -o-background-size: contain;
-  background-size: contain; }
-@media screen and (max-width: 998px) and (min-width: 781px) {
-  section.index-content section.course h2 {
-    background: url("/static/images/marketing/circuits-medium-bg.jpg") 0 0 no-repeat; } }
-@media screen and (max-width: 780px) {
+    width: 31.658%; }
+    @media screen and (max-width: 780px) {
+      section.index-content section.course, section.index-content section.staff {
+        width: auto; } }
+    section.index-content section.course h1, section.index-content section.staff h1 {
+      color: #888;
+      font: normal 16px Georgia, serif;
+      font-size: 14px;
+      letter-spacing: 1px;
+      margin-bottom: 25.888px;
+      text-transform: uppercase; }
+    section.index-content section.course h2, section.index-content section.staff h2 {
+      font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
+    section.index-content section.course h3, section.index-content section.staff h3 {
+      font: 400 18px "Open Sans", Helvetica, Arial, sans-serif; }
+    section.index-content section.course a span.arrow, section.index-content section.staff a span.arrow {
+      color: rgba(255, 255, 255, 0.6);
+      font-style: normal;
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto;
+      padding-left: 10px; }
+    section.index-content section.course ul, section.index-content section.staff ul {
+      list-style: none; }
+      section.index-content section.course ul li img, section.index-content section.staff ul li img {
+        float: left;
+        margin-right: 12.944px; }
   section.index-content section.course h2 {
     padding-top: 129.44px;
-    background: url("/static/images/marketing/circuits-bg.jpg") 0 0 no-repeat; } }
-@media screen and (min-width: 500px) and (max-width: 781px) {
-  section.index-content section.course h2 {
-    padding-top: 207.104px; } }
-section.index-content section.about-course {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  border-right: 1px solid #e5e5e5;
-  margin-right: 2.513%;
-  padding-right: 1.256%;
-  width: 65.829%; }
-@media screen and (max-width: 780px) {
+    background: url("/static/images/marketing/circuits-bg.jpg") 0 0 no-repeat;
+    -webkit-background-size: contain;
+    -moz-background-size: contain;
+    -ms-background-size: contain;
+    -o-background-size: contain;
+    background-size: contain; }
+    @media screen and (max-width: 998px) and (min-width: 781px) {
+      section.index-content section.course h2 {
+        background: url("/static/images/marketing/circuits-medium-bg.jpg") 0 0 no-repeat; } }
+    @media screen and (max-width: 780px) {
+      section.index-content section.course h2 {
+        padding-top: 129.44px;
+        background: url("/static/images/marketing/circuits-bg.jpg") 0 0 no-repeat; } }
+    @media screen and (min-width: 500px) and (max-width: 781px) {
+      section.index-content section.course h2 {
+        padding-top: 207.104px; } }
+  section.index-content section.course div.announcement p.announcement-button a {
+    margin-top: 0; }
+  section.index-content section.course div.announcement img {
+    max-width: 100%;
+    margin-bottom: 25.888px; }
   section.index-content section.about-course {
-    width: auto;
-    border-right: 0;
-    margin-right: 0;
-    padding-right: 0; } }
-section.index-content section.about-course section {
-  width: 48.092%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about-course section {
-    width: auto; } }
-section.index-content section.about-course section.about-info {
-  margin-right: 3.817%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about-course section.about-info {
-    margin-right: 0; } }
-section.index-content section.about-course section.requirements {
-  clear: both;
-  width: 100%;
-  border-top: 1px solid #E5E5E5;
-  padding-top: 25.888px;
-  margin-bottom: 0; }
-section.index-content section.about-course section.requirements p {
-  float: left;
-  width: 48.092%;
-  margin-right: 3.817%; }
-@media screen and (max-width: 780px) {
-  section.index-content section.about-course section.requirements p {
-    margin-right: 0;
-    float: none;
-    width: auto; } }
-section.index-content section.about-course section.requirements p:nth-child(odd) {
-  margin-right: 0; }
-section.index-content section.about-course section.cta {
-  width: 100%;
-  text-align: center; }
-section.index-content section.about-course section.cta a.enroll {
-  padding: 12.944px 51.776px;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-  text-align: center;
-  font: 800 18px "Open Sans", Helvetica, Arial, sans-serif; }
-section.index-content section.staff h1 {
-  margin-top: 25.888px; }
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border-right: 1px solid #e5e5e5;
+    margin-right: 2.513%;
+    padding-right: 1.256%;
+    width: 65.829%; }
+    @media screen and (max-width: 780px) {
+      section.index-content section.about-course {
+        width: auto;
+        border-right: 0;
+        margin-right: 0;
+        padding-right: 0; } }
+    section.index-content section.about-course section {
+      width: 48.092%; }
+      @media screen and (max-width: 780px) {
+        section.index-content section.about-course section {
+          width: auto; } }
+      section.index-content section.about-course section.about-info {
+        margin-right: 3.817%; }
+        @media screen and (max-width: 780px) {
+          section.index-content section.about-course section.about-info {
+            margin-right: 0; } }
+      section.index-content section.about-course section.requirements {
+        clear: both;
+        width: 100%;
+        border-top: 1px solid #E5E5E5;
+        padding-top: 25.888px;
+        margin-bottom: 0; }
+        section.index-content section.about-course section.requirements p {
+          float: left;
+          width: 48.092%;
+          margin-right: 3.817%; }
+          @media screen and (max-width: 780px) {
+            section.index-content section.about-course section.requirements p {
+              margin-right: 0;
+              float: none;
+              width: auto; } }
+          section.index-content section.about-course section.requirements p:nth-child(odd) {
+            margin-right: 0; }
+      section.index-content section.about-course section.cta {
+        width: 100%;
+        text-align: center; }
+        section.index-content section.about-course section.cta a.enroll {
+          padding: 12.944px 51.776px;
+          display: -moz-inline-box;
+          -moz-box-orient: vertical;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto;
+          text-align: center;
+          font: 800 18px "Open Sans", Helvetica, Arial, sans-serif; }
+  section.index-content section.staff h1 {
+    margin-top: 25.888px; }
 
 #lean_overlay {
   position: fixed;
@@ -756,184 +774,244 @@ div.leanModal_box {
   display: none;
   padding: 51.776px;
   text-align: left; }
-div.leanModal_box a.modal_close {
-  color: #aaa;
-  display: block;
-  font-style: normal;
-  height: 14px;
-  position: absolute;
-  right: 12px;
-  top: 12px;
-  width: 14px;
-  z-index: 2; }
-div.leanModal_box a.modal_close:hover {
-  text-decoration: none;
-  color: #993333; }
-div.leanModal_box h1 {
-  border-bottom: 1px solid #eee;
-  font-size: 24px;
-  margin-bottom: 25.888px;
-  margin-top: 0;
-  padding-bottom: 25.888px;
-  text-align: left; }
-div.leanModal_box#enroll {
-  max-width: 600px; }
-div.leanModal_box#enroll ol {
-  padding-top: 25.888px; }
-div.leanModal_box#enroll ol li.terms, div.leanModal_box#enroll ol li.honor-code {
-  width: auto;
-  float: none; }
-div.leanModal_box#enroll ol li div.tip {
-  display: none; }
-div.leanModal_box#enroll ol li:hover div.tip {
-  background: #333;
-  color: #fff;
-  display: block;
-  font-size: 16px;
-  line-height: 25.888px;
-  margin: 0 0 0 -10px;
-  padding: 10px;
-  position: absolute;
-  -webkit-font-smoothing: antialiased;
-  width: 500px; }
-div.leanModal_box form {
-  text-align: left; }
-div.leanModal_box form div#enroll_error, div.leanModal_box form div#login_error, div.leanModal_box form div#pwd_error {
-  background-color: #333333;
-  border: black;
-  color: #fff;
-  font-family: "Open sans";
-  font-weight: bold;
-  letter-spacing: 1px;
-  margin: -25.888px -25.888px 25.888px;
-  padding: 12.944px;
-  text-shadow: 0 1px 0 #1a1a1a;
-  -webkit-font-smoothing: antialiased; }
-div.leanModal_box form div#enroll_error:empty, div.leanModal_box form div#login_error:empty, div.leanModal_box form div#pwd_error:empty {
-  padding: 0; }
-div.leanModal_box form ol {
-  list-style: none;
-  margin-bottom: 25.888px; }
-div.leanModal_box form ol li {
-  margin-bottom: 12.944px; }
-div.leanModal_box form ol li.terms, div.leanModal_box form ol li.remember {
-  border-top: 1px solid #eee;
-  clear: both;
-  float: none;
-  padding-top: 25.888px;
-  width: auto; }
-div.leanModal_box form ol li.honor-code {
-  width: auto;
-  float: none; }
-div.leanModal_box form ol li label {
-  display: block;
-  font-weight: bold; }
-div.leanModal_box form ol li input[type="email"], div.leanModal_box form ol li input[type="number"], div.leanModal_box form ol li input[type="password"], div.leanModal_box form ol li input[type="search"], div.leanModal_box form ol li input[type="tel"], div.leanModal_box form ol li input[type="text"], div.leanModal_box form ol li input[type="url"], div.leanModal_box form ol li input[type="color"], div.leanModal_box form ol li input[type="date"], div.leanModal_box form ol li input[type="datetime"], div.leanModal_box form ol li input[type="datetime-local"], div.leanModal_box form ol li input[type="month"], div.leanModal_box form ol li input[type="time"], div.leanModal_box form ol li input[type="week"], div.leanModal_box form ol li textarea {
-  width: 100%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box; }
-div.leanModal_box form ol li input[type="checkbox"] {
-  margin-right: 10px; }
-div.leanModal_box form ol li ul {
-  list-style: disc outside none;
-  margin: 12.944px 0 25.888px 25.888px; }
-div.leanModal_box form ol li ul li {
-  color: #666;
-  float: none;
-  font-size: 14px;
-  list-style: disc outside none;
-  margin-bottom: 12.944px; }
-div.leanModal_box form input[type="button"], div.leanModal_box form input[type="submit"] {
-  border: 1px solid #691b1b;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 1px 0 0 #bc5c5c;
-  -moz-box-shadow: inset 0 1px 0 0 #bc5c5c;
-  box-shadow: inset 0 1px 0 0 #bc5c5c;
-  color: white;
-  display: inline;
-  font-size: 11px;
-  font-weight: bold;
-  background-color: #993333;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #993333), color-stop(100%, #761e1e));
-  background-image: -webkit-linear-gradient(top, #993333, #761e1e);
-  background-image: -moz-linear-gradient(top, #993333, #761e1e);
-  background-image: -ms-linear-gradient(top, #993333, #761e1e);
-  background-image: -o-linear-gradient(top, #993333, #761e1e);
-  background-image: linear-gradient(top, #993333, #761e1e);
-  padding: 6px 18px 7px;
-  text-shadow: 0 1px 0 #5d1414;
-  -webkit-background-clip: padding-box;
-  font-size: 18px;
-  padding: 12.944px; }
-div.leanModal_box form input[type="button"]:hover, div.leanModal_box form input[type="submit"]:hover {
-  -webkit-box-shadow: inset 0 1px 0 0 #a44141;
-  -moz-box-shadow: inset 0 1px 0 0 #a44141;
-  box-shadow: inset 0 1px 0 0 #a44141;
-  cursor: pointer;
-  background-color: #823030;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #823030), color-stop(100%, #691c1c));
-  background-image: -webkit-linear-gradient(top, #823030, #691c1c);
-  background-image: -moz-linear-gradient(top, #823030, #691c1c);
-  background-image: -ms-linear-gradient(top, #823030, #691c1c);
-  background-image: -o-linear-gradient(top, #823030, #691c1c);
-  background-image: linear-gradient(top, #823030, #691c1c); }
-div.leanModal_box form input[type="button"]:active, div.leanModal_box form input[type="submit"]:active {
-  border: 1px solid #691b1b;
-  -webkit-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
-  -moz-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
-  box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee; }
+  div.leanModal_box a.modal_close {
+    color: #aaa;
+    display: block;
+    font-style: normal;
+    height: 14px;
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    width: 14px;
+    z-index: 2; }
+    div.leanModal_box a.modal_close:hover {
+      text-decoration: none;
+      color: #993333; }
+  div.leanModal_box h1 {
+    border-bottom: 1px solid #eee;
+    font-size: 24px;
+    margin-bottom: 25.888px;
+    margin-top: 0;
+    padding-bottom: 25.888px;
+    text-align: left; }
+  div.leanModal_box#enroll {
+    max-width: 600px; }
+    div.leanModal_box#enroll ol {
+      padding-top: 25.888px; }
+      div.leanModal_box#enroll ol li.terms, div.leanModal_box#enroll ol li.honor-code {
+        width: auto;
+        float: none; }
+      div.leanModal_box#enroll ol li div.tip {
+        display: none; }
+      div.leanModal_box#enroll ol li:hover div.tip {
+        background: #333;
+        color: #fff;
+        display: block;
+        font-size: 16px;
+        line-height: 25.888px;
+        margin: 0 0 0 -10px;
+        padding: 10px;
+        position: absolute;
+        -webkit-font-smoothing: antialiased;
+        width: 500px; }
+  div.leanModal_box form {
+    text-align: left; }
+    div.leanModal_box form div#enroll_error, div.leanModal_box form div#login_error, div.leanModal_box form div#pwd_error {
+      background-color: #333333;
+      border: black;
+      color: #fff;
+      font-family: "Open sans";
+      font-weight: bold;
+      letter-spacing: 1px;
+      margin: -25.888px -25.888px 25.888px;
+      padding: 12.944px;
+      text-shadow: 0 1px 0 #1a1a1a;
+      -webkit-font-smoothing: antialiased; }
+      div.leanModal_box form div#enroll_error:empty, div.leanModal_box form div#login_error:empty, div.leanModal_box form div#pwd_error:empty {
+        padding: 0; }
+    div.leanModal_box form ol {
+      list-style: none;
+      margin-bottom: 25.888px; }
+      div.leanModal_box form ol li {
+        margin-bottom: 12.944px; }
+        div.leanModal_box form ol li.terms, div.leanModal_box form ol li.remember {
+          border-top: 1px solid #eee;
+          clear: both;
+          float: none;
+          padding-top: 25.888px;
+          width: auto; }
+        div.leanModal_box form ol li.honor-code {
+          width: auto;
+          float: none; }
+        div.leanModal_box form ol li label {
+          display: block;
+          font-weight: bold; }
+        div.leanModal_box form ol li input[type="email"], div.leanModal_box form ol li input[type="number"], div.leanModal_box form ol li input[type="password"], div.leanModal_box form ol li input[type="search"], div.leanModal_box form ol li input[type="tel"], div.leanModal_box form ol li input[type="text"], div.leanModal_box form ol li input[type="url"], div.leanModal_box form ol li input[type="color"], div.leanModal_box form ol li input[type="date"], div.leanModal_box form ol li input[type="datetime"], div.leanModal_box form ol li input[type="datetime-local"], div.leanModal_box form ol li input[type="month"], div.leanModal_box form ol li input[type="time"], div.leanModal_box form ol li input[type="week"], div.leanModal_box form ol li textarea {
+          width: 100%;
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box; }
+        div.leanModal_box form ol li input[type="checkbox"] {
+          margin-right: 10px; }
+        div.leanModal_box form ol li ul {
+          list-style: disc outside none;
+          margin: 12.944px 0 25.888px 25.888px; }
+          div.leanModal_box form ol li ul li {
+            color: #666;
+            float: none;
+            font-size: 14px;
+            list-style: disc outside none;
+            margin-bottom: 12.944px; }
+    div.leanModal_box form input[type="button"], div.leanModal_box form input[type="submit"] {
+      border: 1px solid #691b1b;
+      -webkit-border-radius: 3px;
+      -moz-border-radius: 3px;
+      -ms-border-radius: 3px;
+      -o-border-radius: 3px;
+      border-radius: 3px;
+      -webkit-box-shadow: inset 0 1px 0 0 #bc5c5c;
+      -moz-box-shadow: inset 0 1px 0 0 #bc5c5c;
+      box-shadow: inset 0 1px 0 0 #bc5c5c;
+      color: white;
+      display: inline;
+      font-size: 11px;
+      font-weight: bold;
+      background-color: #993333;
+      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #993333), color-stop(100%, #761e1e));
+      background-image: -webkit-linear-gradient(top, #993333, #761e1e);
+      background-image: -moz-linear-gradient(top, #993333, #761e1e);
+      background-image: -ms-linear-gradient(top, #993333, #761e1e);
+      background-image: -o-linear-gradient(top, #993333, #761e1e);
+      background-image: linear-gradient(top, #993333, #761e1e);
+      padding: 6px 18px 7px;
+      text-shadow: 0 1px 0 #5d1414;
+      -webkit-background-clip: padding-box;
+      font-size: 18px;
+      padding: 12.944px; }
+      div.leanModal_box form input[type="button"]:hover, div.leanModal_box form input[type="submit"]:hover {
+        -webkit-box-shadow: inset 0 1px 0 0 #a44141;
+        -moz-box-shadow: inset 0 1px 0 0 #a44141;
+        box-shadow: inset 0 1px 0 0 #a44141;
+        cursor: pointer;
+        background-color: #823030;
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #823030), color-stop(100%, #691c1c));
+        background-image: -webkit-linear-gradient(top, #823030, #691c1c);
+        background-image: -moz-linear-gradient(top, #823030, #691c1c);
+        background-image: -ms-linear-gradient(top, #823030, #691c1c);
+        background-image: -o-linear-gradient(top, #823030, #691c1c);
+        background-image: linear-gradient(top, #823030, #691c1c); }
+      div.leanModal_box form input[type="button"]:active, div.leanModal_box form input[type="submit"]:active {
+        border: 1px solid #691b1b;
+        -webkit-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
+        -moz-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
+        box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee; }
 
 div#login {
   min-width: 400px; }
-div#login header {
-  border-bottom: 1px solid #ddd;
-  margin-bottom: 25.888px;
-  padding-bottom: 25.888px; }
-div#login header h1 {
-  border-bottom: 0;
-  padding-bottom: 0;
-  margin-bottom: 6.472px; }
-div#login ol li {
-  width: auto;
-  float: none; }
+  div#login header {
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 25.888px;
+    padding-bottom: 25.888px; }
+    div#login header h1 {
+      border-bottom: 0;
+      padding-bottom: 0;
+      margin-bottom: 6.472px; }
+  div#login ol li {
+    width: auto;
+    float: none; }
 
 div.lost-password {
   text-align: left;
   margin-top: 25.888px; }
-div.lost-password a {
-  color: #999; }
-div.lost-password a:hover {
-  color: #444; }
+  div.lost-password a {
+    color: #999; }
+    div.lost-password a:hover {
+      color: #444; }
 
 div#pwd_reset p {
   margin-bottom: 25.888px; }
 div#pwd_reset input[type="email"] {
   margin-bottom: 25.888px; }
 
-div#apply_name_change, div#change_email, div#unenroll, div#deactivate-account {
+div#apply_name_change,
+div#change_email,
+div#unenroll,
+div#deactivate-account {
   max-width: 700px; }
-div#apply_name_change ul, div#change_email ul, div#unenroll ul, div#deactivate-account ul {
-  list-style: none; }
-div#apply_name_change ul li, div#change_email ul li, div#unenroll ul li, div#deactivate-account ul li {
-  margin-bottom: 12.944px; }
-div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll ul li textarea, div#unenroll ul li input[type="email"], div#unenroll ul li input[type="number"], div#unenroll ul li input[type="password"], div#unenroll ul li input[type="search"], div#unenroll ul li input[type="tel"], div#unenroll ul li input[type="text"], div#unenroll ul li input[type="url"], div#unenroll ul li input[type="color"], div#unenroll ul li input[type="date"], div#unenroll ul li input[type="datetime"], div#unenroll ul li input[type="datetime-local"], div#unenroll ul li input[type="month"], div#unenroll ul li input[type="time"], div#unenroll ul li input[type="week"], div#deactivate-account ul li textarea, div#deactivate-account ul li input[type="email"], div#deactivate-account ul li input[type="number"], div#deactivate-account ul li input[type="password"], div#deactivate-account ul li input[type="search"], div#deactivate-account ul li input[type="tel"], div#deactivate-account ul li input[type="text"], div#deactivate-account ul li input[type="url"], div#deactivate-account ul li input[type="color"], div#deactivate-account ul li input[type="date"], div#deactivate-account ul li input[type="datetime"], div#deactivate-account ul li input[type="datetime-local"], div#deactivate-account ul li input[type="month"], div#deactivate-account ul li input[type="time"], div#deactivate-account ul li input[type="week"] {
-  display: block;
-  width: 100%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box; }
-div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll ul li textarea, div#deactivate-account ul li textarea {
-  height: 60px; }
-div#apply_name_change ul li input[type="submit"], div#change_email ul li input[type="submit"], div#unenroll ul li input[type="submit"], div#deactivate-account ul li input[type="submit"] {
-  white-space: normal; }
+  div#apply_name_change ul,
+  div#change_email ul,
+  div#unenroll ul,
+  div#deactivate-account ul {
+    list-style: none; }
+    div#apply_name_change ul li,
+    div#change_email ul li,
+    div#unenroll ul li,
+    div#deactivate-account ul li {
+      margin-bottom: 12.944px; }
+      div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"],
+      div#change_email ul li textarea,
+      div#change_email ul li input[type="email"],
+      div#change_email ul li input[type="number"],
+      div#change_email ul li input[type="password"],
+      div#change_email ul li input[type="search"],
+      div#change_email ul li input[type="tel"],
+      div#change_email ul li input[type="text"],
+      div#change_email ul li input[type="url"],
+      div#change_email ul li input[type="color"],
+      div#change_email ul li input[type="date"],
+      div#change_email ul li input[type="datetime"],
+      div#change_email ul li input[type="datetime-local"],
+      div#change_email ul li input[type="month"],
+      div#change_email ul li input[type="time"],
+      div#change_email ul li input[type="week"],
+      div#unenroll ul li textarea,
+      div#unenroll ul li input[type="email"],
+      div#unenroll ul li input[type="number"],
+      div#unenroll ul li input[type="password"],
+      div#unenroll ul li input[type="search"],
+      div#unenroll ul li input[type="tel"],
+      div#unenroll ul li input[type="text"],
+      div#unenroll ul li input[type="url"],
+      div#unenroll ul li input[type="color"],
+      div#unenroll ul li input[type="date"],
+      div#unenroll ul li input[type="datetime"],
+      div#unenroll ul li input[type="datetime-local"],
+      div#unenroll ul li input[type="month"],
+      div#unenroll ul li input[type="time"],
+      div#unenroll ul li input[type="week"],
+      div#deactivate-account ul li textarea,
+      div#deactivate-account ul li input[type="email"],
+      div#deactivate-account ul li input[type="number"],
+      div#deactivate-account ul li input[type="password"],
+      div#deactivate-account ul li input[type="search"],
+      div#deactivate-account ul li input[type="tel"],
+      div#deactivate-account ul li input[type="text"],
+      div#deactivate-account ul li input[type="url"],
+      div#deactivate-account ul li input[type="color"],
+      div#deactivate-account ul li input[type="date"],
+      div#deactivate-account ul li input[type="datetime"],
+      div#deactivate-account ul li input[type="datetime-local"],
+      div#deactivate-account ul li input[type="month"],
+      div#deactivate-account ul li input[type="time"],
+      div#deactivate-account ul li input[type="week"] {
+        display: block;
+        width: 100%;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box; }
+      div#apply_name_change ul li textarea,
+      div#change_email ul li textarea,
+      div#unenroll ul li textarea,
+      div#deactivate-account ul li textarea {
+        height: 60px; }
+      div#apply_name_change ul li input[type="submit"],
+      div#change_email ul li input[type="submit"],
+      div#unenroll ul li input[type="submit"],
+      div#deactivate-account ul li input[type="submit"] {
+        white-space: normal; }
 
 div#feedback_div form ol li {
   float: none;
   width: 100%; }
-div#feedback_div form ol li textarea#feedback_message {
-  height: 100px; }
+  div#feedback_div form ol li textarea#feedback_message {
+    height: 100px; }

static/js/application.js

+// 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);

templates/accordion.html

@@ -7,21 +7,12 @@
 
     <ul>
       % for section in chapter['sections']:
-      <li
-          % if 'active' in section and section['active']:
-            class="active"
-          % endif
-        >
-
+        <li${' class="active"' if 'active' in section and section['active'] else ''}>
           <a href="${reverse('courseware_section', args=format_url_params([course_name, chapter['name'], section['name']]))}">
             <p>${section['name']}</p>
 
             <p class="subtitle">
-              ${section['format']}
-
-              % if 'due' in section and section['due']!="":
-                due ${section['due']}
-              % endif
+              ${section['format']} ${"due " + section['due'] if 'due' in section and section['due'] != '' else ''}
             </p>
           </a>
         % endfor

templates/accordion_init.js

-$("#accordion").accordion({
-  active: ${ active_chapter },
-  header: 'h3',
-  autoHeight: false,
-});
-
-$("#open_close_accordion a").click(function(){
-  if ($(".course-wrapper").hasClass("closed")){
-    $(".course-wrapper").removeClass("closed");
-  } else {
-    $(".course-wrapper").addClass("closed");
-  }
-});
-
-$('.ui-accordion').bind('accordionchange', function(event, ui) {
-   var event_data = {'newheader':ui.newHeader.text(),
-         'oldheader':ui.oldHeader.text()};
-   log_event('accordion', event_data);
-});

templates/coffee/README.md

+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
+---------
+
+Run this command in the `mitx` directory to easily make the compiler watch for
+changes in your file, and join the result into `application.js`:
+
+    coffee -j static/js/application.js -cw templates/coffee/src
+
+Please note that the compiler will not be able to detect the file that get added
+after you've ran the command, so you'll need to restart the compiler if there's
+a new CoffeeScript file.
+
+Testing
+=======
+
+We're also using Jasmine to unit-testing the JavaScript files. All the specs are
+written in CoffeeScript for the consistency. Because of the limitation of
+`django-jasmine` plugin, we'll need to also running another compiler to compile
+the test file.
+
+Using this command to compile the test files:
+
+    coffee -cw templates/coffee/spec/*.coffee
+
+Then start the server in debug mode, navigate to http://127.0.0.1:8000/_jasmine
+to see the test result.

templates/coffee/files.json

+{
+  "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"
+  ]
+}

templates/coffee/fixtures/accordion.html

+<div class="course-wrapper">
+  <header id="open_close_accordion">
+    <a href="#">close</a>
+  </header>
+  <div id="accordion"></div>
+</div>

templates/coffee/fixtures/calculator.html

+<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>

templates/coffee/fixtures/feedback_form.html

+<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>

templates/coffee/spec/calculator_spec.coffee

+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')

templates/coffee/spec/calculator_spec.js

+// Generated by CoffeeScript 1.3.2-pre
+(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);

templates/coffee/spec/courseware_spec.coffee

+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'

templates/coffee/spec/courseware_spec.js

+// Generated by CoffeeScript 1.3.2-pre
+(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);

templates/coffee/spec/feedback_form_spec.coffee

+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'

templates/coffee/spec/feedback_form_spec.js

+// Generated by CoffeeScript 1.3.2-pre
+(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);

templates/coffee/spec/helper.coffee

+jasmine.getFixtures().fixturesPath = "/_jasmine/fixtures/"

templates/coffee/spec/helper.js

+// Generated by CoffeeScript 1.3.2-pre
+(function() {
+
+  jasmine.getFixtures().fixturesPath = "/_jasmine/fixtures/";
+
+}).call(this);

templates/coffee/src/calculator.coffee

+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)

templates/coffee/src/courseware.coffee

+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')

templates/coffee/src/feedback_form.coffee

+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'

templates/coffee/src/main.coffee

+$ ->
+  $.ajaxSetup
+    headers : { 'X-CSRFToken': $.cookie 'csrftoken' }
+
+  Calculator.bind()
+  Courseware.bind()
+  FeedbackForm.bind()
+  $("a[rel*=leanModal]").leanModal()

templates/courseware.html

@@ -2,7 +2,12 @@
 <%block name="bodyclass">courseware</%block>
 <%block name="title"><title>Courseware – MITx 6.002x</title></%block>
 
+<%block name="headextra">
+<script type="text/javascript" src="/static/js/flot/jquery.flot.js"></script>
+</%block>
+
 <%block name="js_extra">
+##Is there a reason this isn't in header_extra? Is it important that the javascript is at the bottom of the generated document?
 <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
 <script type="text/javascript">
   $(function() {

templates/create_account.html

@@ -6,9 +6,7 @@
   <p class="ie-warning"> Enrollment requires a modern web browser with JavaScript enabled. You don't have this. You can&rsquo;t enroll without upgrading, since you couldn&rsquo;t take the course without upgrading. Feel free to download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a> or <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=95346">Google Chrome</a>, for free, to enroll and take this course.</p>
   <![endif]-->
   <p class="disclaimer">
-    Please note that 6.002x has already started. 
-    Several assignment due dates for 6.002x have already passed. It is now impossible for newly enrolled students to get 100% of the points in the course, although new students can still earn points for assignments whose due dates have not passed, and students have access to all of the course material that has been released for the course.
-  </p>
+Please note that 6.002x has now passed its half-way point. The midterm exam and several assignment due dates for 6.002x have already passed. It is now impossible for newly enrolled students to earn a passing grade and a completion certificate for the course. However, new students have access to all of the course material that has been released for the course, so you are welcome to enroll and browse the course.  </p>
   <form name="enroll" id="enroll_form"  method="get">
     <fieldset><% if 'error' in locals(): e = error %>
 

templates/emails/welcome_body.txt

-MITx's prototype offering, 6.002x, is now open. To log in, visit
+MITx's prototype offering, 6.002x, is open. To log in, visit
 
 % if is_secure:
  https://6002x.mitx.mit.edu
@@ -16,7 +16,7 @@ place to reset it.
 Once you log in, we recommend that you start the course by reviewing
 the "System Usage Sequence" in the Overview section, and the "6.002x
 At-a-Glance (Calendar)" handout under the Course Info tab. After you
-familiarize yourself with the various features of the MITx platform,
+familiarize yourself with the features of the MITx platform,
 you can jump right into the coursework by working on "Administrivia
 and Circuit Elements", the first Lecture Sequence in Week 1.
 

templates/index.html

@@ -11,7 +11,7 @@
         <h2>6.002x</h2>
         <a class="enroll" rel="leanModal" href="/info">View 6.002x Circuits <span>&amp;</span> Electronics as a guest</a>
       </section>
-      <p>6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT&rsquo;s first undergraduate analog design course: 6.002. This course will run, free of charge, for students worldwide from March 5, 2012 through June 8, 2012.</p>
+      <p>6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT&rsquo;s first undergraduate analog design course: 6.002. This course is running, free of charge, for students worldwide from March 5, 2012 through June 8, 2012.</p>
     </section>
 </%block>
 

templates/main.html

@@ -4,11 +4,12 @@
   <%block name="title"><title>MITx 6.002x</title></%block>
 
   <link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" />
-  <link rel="stylesheet" href="/static/css/application.css?v2" type="text/css" media="all" />
+  <link rel="stylesheet" href="/static/css/application.css?v3" type="text/css" media="all" />
 
   <script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
   <script type="text/javascript" src="${ settings.LIB_URL }jquery-ui-1.8.16.custom.min.js"></script>
   <script type="text/javascript" src="${ settings.LIB_URL }swfobject/swfobject.js"></script>
+  <script type="text/javascript" src="/static/js/application.js"></script>
 
   <!--[if lt IE 9]>
   <script src="/static/js/html5shiv.js"></script>
@@ -92,20 +93,18 @@
       </nav>
   </footer>
 
-    <div id="feedback_div" class="leanModal_box">
-      <h1>Feedback for MITx</h1>
-      <p>Found a bug? Got an idea for improving our system? Let us know.</p>
-
-      <form>
-        <ol>
-          <li><label>Subject:</label> <input type="text" id="feedback_subject"></li>
-          <li><label>Feedback: </label><textarea id="feedback_message"></textarea></li>
-          <li><input id="feedback_button" type="button" value="Submit"></li>
-        </ol>
-      </form>
-
-    </div>
+  <div id="feedback_div" class="leanModal_box">
+    <h1>Feedback for MITx</h1>
+    <p>Found a bug? Got an idea for improving our system? Let us know.</p>
 
+    <form>
+      <ol>
+        <li><label>Subject:</label> <input type="text" id="feedback_subject"></li>
+        <li><label>Feedback: </label><textarea id="feedback_message"></textarea></li>
+        <li><input id="feedback_button" type="button" value="Submit"></li>
+      </ol>
+    </form>
+  </div>
 
   <script type="text/javascript" src="${ settings.LIB_URL }jquery.treeview.js"></script>
   <script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script>
@@ -114,57 +113,7 @@
   <script type="text/javascript" src="/static/js/video_player.js"></script>
   <script type="text/javascript" src="/static/js/schematic.js"></script>
   <script type="text/javascript" src="/static/js/cktsim.js"></script>
- 
-
-<script>
-  // Feedback form
-$(function() {
-    $("#feedback_button").click(function(){
-      postJSON("/send_feedback", {"subject":$("#feedback_subject").attr("value"),
-        "url":document.URL,
-        "message":$("#feedback_message").attr("value")},
-        function(data){
-        $("#feedback_subject").attr("value","");
-        $("#feedback_message").attr("value","");
-        $("#feedback_div").html("Feedback submitted. Thank you");
-        });
-      });
-    });
-
-// Calculator
-$(function() {
-
-    $("#calculator_wrapper").hide();
-
-    $(".calc").click(function(){
-      $("#calculator_wrapper").slideToggle("fast");
-      $("#calculator_wrapper #calculator_input").focus();
-      $(this).toggleClass("closed");
-      return false;
-      });
-
-    $("div.help-wrapper a").hover(function(){
-      $(".help").toggleClass("shown");
-
-      });
-
-    $("div.help-wrapper a").click(function(){
-      return false;
-      });
-    $("form#calculator").submit(function(e){
-      e.preventDefault();
-      $.getJSON("/calculate", {"equation":$("#calculator_input").attr("value")},
-        function(data){
-        $("#calculator_output").attr("value",data.result);
-        });
-      });
-    });
-
-$(function(){
-    $("a[rel*=leanModal]").leanModal();
-    });
-</script>
 
-<%block name="js_extra"/>
+  <%block name="js_extra"/>
 </body>
 </html>

templates/marketing.html

 <!DOCTYPE html>
 <html>
-<head>
-  <title><%block name="title">MITx: MIT's new online learning initiative</%block></title>
-
-  <meta name="description" content="<%block name="description">MITx will offer a portfolio of MIT courses for free to a virtual community of learners around the world</%block>" />
-
-  <meta name="keywords" content="<%block name="keywords">MITx, online learning, MIT, online laboratory, education, learners, undergraduate, certificate</%block>" />
-
-  <!--link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" /-->
-  <link rel="stylesheet" href="/static/css/marketing.css" type="text/css" media="all" />
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <!--[if lt IE 8]>
-  <link rel="stylesheet" href="/static/css/marketing-ie.css" type="text/css" media="all" />
-  <![endif]-->
-
-  <script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
-  <script type="text/javascript" src="${ settings.LIB_URL }jquery-ui-1.8.16.custom.min.js"></script>
-
-  <script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script>
-  <!--script type="text/javascript" src="${ settings.LIB_URL }swfobject/swfobject.js"></script-->
-  <!--script type="text/javascript" src="${ settings.LIB_URL }jquery.treeview.js"></script-->
-  <!--script type="text/javascript" src="/static/js/video_player.js"></script-->
-  <!-- <script type="text/javascript" src="/static/js/schematic.js"></script> -->
-
-  <script src="/static/js/html5shiv.js"></script>
-
-
-<%block name="headextra"/>
-
-<script type="text/javascript">
-function getCookie(name) {
-    var cookieValue = null;
-    if (document.cookie && document.cookie != '') {
-	var cookies = document.cookie.split(';');
-	for (var i = 0; i < cookies.length; i++) {
-	    var cookie = jQuery.trim(cookies[i]);
-	    // Does this cookie string begin with the name we want?
-	    if (cookie.substring(0, name.length + 1) == (name + '=')) {
-		cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-		break;
-	    }
-	}
-    }
-    return cookieValue;
-}
+  <head>
+    <title><%block name="title">MITx: MIT's new online learning initiative</%block></title>
+
+    <meta name="description" content="<%block name="description">MITx will offer a portfolio of MIT courses for free to a virtual community of learners around the world</%block>" />
+
+    <meta name="keywords" content="<%block name="keywords">MITx, online learning, MIT, online laboratory, education, learners, undergraduate, certificate</%block>" />
+
+    <!--link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" /-->
+    <link rel="stylesheet" href="/static/css/marketing.css" type="text/css" media="all" />
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <!--[if lt IE 8]>
+    <link rel="stylesheet" href="/static/css/marketing-ie.css" type="text/css" media="all" />
+    <![endif]-->
+
+    <script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
+    <script type="text/javascript" src="${ settings.LIB_URL }jquery-ui-1.8.16.custom.min.js"></script>
+
+    <script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script>
+    <!--script type="text/javascript" src="${ settings.LIB_URL }swfobject/swfobject.js"></script-->
+    <!--script type="text/javascript" src="${ settings.LIB_URL }jquery.treeview.js"></script-->
+    <!--script type="text/javascript" src="/static/js/video_player.js"></script-->
+    <!-- <script type="text/javascript" src="/static/js/schematic.js"></script> -->
+
+    <script src="/static/js/html5shiv.js"></script>
+
+
+    <%block name="headextra"/>
+
+    <script type="text/javascript">
+      function getCookie(name) {
+        var cookieValue = null;
+        if (document.cookie && document.cookie != '') {
+          var cookies = document.cookie.split(';');
+          for (var i = 0; i < cookies.length; i++) {
+            var cookie = jQuery.trim(cookies[i]);
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) == (name + '=')) {
+              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+              break;
+            }
+          }
+        }
+        return cookieValue;
+      }
 
 function postJSON(url, data, callback) {
-    $.ajax({type:'POST',
-	    url: url,
-		dataType: 'json',
-		data: data,
-		success: callback,
-		headers : {'X-CSRFToken':getCookie('csrftoken')}
-  });
+  $.ajax({type:'POST',
+      url: url,
+      dataType: 'json',
+      data: data,
+      success: callback,
+      headers : {'X-CSRFToken':getCookie('csrftoken')}
+      });
 }
 </script>
 
@@ -61,25 +61,25 @@ function postJSON(url, data, callback) {
 <body>
   <%block name="header">
   <header class="announcement <%block name="header_class"/>">
-    <div class="anouncement-wrapper">
+  <div class="anouncement-wrapper">
     <%block name="header_nav">
     <nav>
-      <h1><a href="http://mitx.mit.edu/">MITx</a></h1>
-% if settings.COURSEWARE_ENABLED:
-<%block name="login_area">
-      <a rel="leanModal" class="login" href="#login">Log In</a>
-</%block>
-% endif
+    <h1><a href="http://mitx.mit.edu/">MITx</a></h1>
+    % if settings.COURSEWARE_ENABLED:
+    <%block name="login_area">
+    <a rel="leanModal" class="login" href="#login">Log In</a>
+    </%block>
+    % endif
     </nav>
     </%block>
 
     <%block name="header_text">
-      <section>
-        <h1><em>MITx</em></h1>
-        <h2>MIT&rsquo;s new online learning initiative</h2>
-      </section>
-     </%block>
-    </div>
+    <section>
+    <h1><em>MITx</em></h1>
+    <h2>MIT&rsquo;s new online learning initiative</h2>
+    </section>
+    </%block>
+  </div>
   </header>
   </%block>
 
@@ -87,95 +87,95 @@ function postJSON(url, data, callback) {
   <%block name="bodyextra"/>
 
   <footer>
-    <div class="footer-wrapper">
-      <p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a></p>
-
-      <ul>
-        <li><a href="/t/tos.html">Terms of Service</a></li>
-        <li><a href="/t/privacy.html">Privacy Policy</a></li>
-        <li><a href="/t/honor.html">Honor Code</a></li>
-        <li><a href="/t/mitx_help.html">Help</a></li>
-      </ul>
-
-      <ul class="social">
-        <li class="linkedin">
-          <a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
-        </li>
-        <li class="twitter">
-          <a href="https://twitter.com/#!/MyMITx">Twitter</a>
-        </li>
-        <li class="facebook">
-          <a href="http://www.facebook.com/pages/MITx/378592442151504">Facebook</a>
-        </li>
-      </ul>
-    </div>
+  <div class="footer-wrapper">
+    <p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a></p>
+
+    <ul>
+      <li><a href="/t/tos.html">Terms of Service</a></li>
+      <li><a href="/t/privacy.html">Privacy Policy</a></li>
+      <li><a href="/t/honor.html">Honor Code</a></li>
+      <li><a href="/t/mitx_help.html">Help</a></li>
+    </ul>
+
+    <ul class="social">
+      <li class="linkedin">
+        <a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
+      </li>
+      <li class="twitter">
+        <a href="https://twitter.com/#!/MyMITx">Twitter</a>
+      </li>
+      <li class="facebook">
+        <a href="http://www.facebook.com/pages/MITx/378592442151504">Facebook</a>
+      </li>
+    </ul>
+  </div>
 
   </footer>
 
-% if settings.COURSEWARE_ENABLED:
+  % if settings.COURSEWARE_ENABLED:
   <div id="login" class="leanModal_box"><%include file="login.html" /></div>
-% endif
+  % endif
   <div id="pwd_reset" class="leanModal_box"><%include file="password_reset_form.html" /></div>
   <div id="reset_done" class="leanModal_box"></div>
 
-<script>
-$(document).ready(function(){
-    /* Handles when the user tries to log in. Grabs form data. Does AJAX.
-       Either shows error, or redirects. */
-  $('form#login_form').submit(function(e) {
-    e.preventDefault();
-    var submit_data={};
-    $.each($("[id^=li_]"), function(index,value){
-      submit_data[value.name]=value.value;
-    });
-    submit_data["remember"] = ($('#remember').attr("checked")? true : false);
-
-    postJSON('/login',
-      submit_data,
-      function(json) {
-        if(json.success) {
-          location.href="/info";
-        } else if($('#login_error').length == 0) {
-        $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
-        } else {
-          $('#login_error').stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
+  <script>
+    $(document).ready(function(){
+      /* Handles when the user tries to log in. Grabs form data. Does AJAX.
+      Either shows error, or redirects. */
+      $('form#login_form').submit(function(e) {
+        e.preventDefault();
+        var submit_data={};
+        $.each($("[id^=li_]"), function(index,value){
+          submit_data[value.name]=value.value;
+        });
+        submit_data["remember"] = ($('#remember').attr("checked")? true : false);
+
+        postJSON('/login',
+        submit_data,
+        function(json) {
+          if(json.success) {
+            location.href="/info";
+            } else if($('#login_error').length == 0) {
+            $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
+            } else {
+            $('#login_error').stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
+          }
         }
-      }
-    );
-  });
-
-
-  $('form#pwd_reset_form').submit(function(e) {
-    e.preventDefault();
-    var submit_data = {};
-    submit_data['email'] = $('#id_email').val();
-    postJSON('/password_reset/',
-      submit_data,
-      function(json){
-        if (json.success) {
-          $('#pwd_reset').html(json.value);
-        } else {
-          $('#pwd_error').html(json.error).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
+        );
+      });
+
+
+      $('form#pwd_reset_form').submit(function(e) {
+        e.preventDefault();
+        var submit_data = {};
+        submit_data['email'] = $('#id_email').val();
+        postJSON('/password_reset/',
+        submit_data,
+        function(json){
+          if (json.success) {
+            $('#pwd_reset').html(json.value);
+            } else {
+            $('#pwd_error').html(json.error).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
+          }
         }
-      }
-    );
-  });
+        );
+      });
 
-});
+    });
 
-$(function(){
-    $("a[rel*=leanModal]").leanModal();
+    $(function(){
+      $("a[rel*=leanModal]").leanModal();
 
-    $("a.login").click(function(){
-      $("#login_form #li_email").focus();
+      $("a.login").click(function(){
+        $("#login_form #li_email").focus();
       });
 
-    $("a.enroll").click(function(){
-      $("#enroll_form #ca_email").focus();
+      $("a.enroll").click(function(){
+        $("#enroll_form #ca_email").focus();
       });
     });
-</script>
+  </script>
 
-<%block name="js_extra"/>
+  <%block name="js_extra"/>
 </body>
 </html>

templates/mitx_global.html

@@ -8,7 +8,7 @@
     <section class="intro">
       <section class="intro-text">
       <p><em>MITx</em>  will offer a portfolio of MIT courses for free to a virtual community of learners around the world. It will also enhance the educational experience of its on-campus students, offering them online tools that supplement and enrich their classroom and laboratory experiences.</p>
-      <p>The first <em>MITx</em> course, 6.002x (Circuits and Electronics), will be launched in an experimental prototype form. Watch this space for further upcoming courses, which will become available in Fall 2012.</p>
+      <p>The first <em>MITx</em> course, 6.002x (Circuits and Electronics), was launched in an experimental prototype form. Watch this space for further upcoming courses, which will become available in Fall 2012.</p>
       </section>
 
     <section class="intro-video">
@@ -33,17 +33,29 @@
   </section>
 
   <section class="course">
-    <hgroup>
-      <h1>Spring 2012 Course offering</h1>
-      <h2>Circuits and Electronics</h2>
-      <h3>6.002x</h3>
-    </hgroup>
+    <div class="announcement">
+      <h1> Announcement </h1>
+<img src="/static/images/marketing/edx-logo.png" alt="" />
+      <p>
+      On May 2, it was announced that Harvard University will join MIT as a partner in edX.  MITx, which offers online versions of MIT courses, will be a core offering of edX, as will Harvardx, a set of course offerings from Harvard.
+      </p>
+
+      <p class="announcement-button">
+        <a href="http://edxonline.org">Read more details here <span class="arrow">&#8227;</span></a>
+      </p>
+    </div>
+
+  <hgroup>
+  <h1>Spring 2012 Course offering</h1>
+  <h2>Circuits and Electronics</h2>
+  <h3>6.002x</h3>
+  </hgroup>
 
     <p>
       <a href="http://6002x.mitx.mit.edu/" class="more-info">More information <span>&amp;</span> Enroll <span class="arrow">&#8227;</span></a>
     </p>
 
-    <p>Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT&rsquo;s first undergraduate analog design course. This prototype course will run, free of charge, for students worldwide from March 5, 2012 through June 8, 2012. Students will be given the opportunity to demonstrate their mastery of the material and earn a certificate from <em>MITx</em>.</p>
+    <p>Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT&rsquo;s first undergraduate analog design course. This prototype course is running, free of charge, for students worldwide from March 5, 2012 through June 8, 2012. Students are given the opportunity to demonstrate their mastery of the material and earn a certificate from <em>MITx</em>.</p>
   </section>
 </section>
 

templates/sass/courseware/_amplifier.scss

 // JM MOSFET AMPLIFIER
-div#graph-container {
+section.tool-wrapper {
+  background: #073642;
+  border-top: 1px solid darken(#002b36, 10%);
+  border-bottom: 1px solid darken(#002b36, 10%);
+  @include box-shadow(inset 0 0 0 4px darken(#094959, 2%));
+  margin: lh() (-(lh())) 0;
+  color: #839496;
   @extend .clearfix;
-  border-top: 1px solid #ddd;
-  padding-top: lh(1.0);
-   
-  canvas#graph {
-    width: flex-grid(4.5, 9);
-    float: left;
-    margin-right: flex-gutter(9); 
-  }
-
-  div.graph-controls {
-    width: flex-grid(4.5, 9);
-    float: left;
+  display: table;
+
+  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);
+    }
 
-    select#musicTypeSelect {
-      display: block;
-      margin-bottom: lh();
+    canvas {
+      width: 100%;
     }
 
-    div#graph-output {
-      display: block;
-      margin-bottom: lh();
+    ul.ui-tabs-nav {
+      background: darken(#073642, 2%);
+      margin: (-(lh())) (-(lh())) 0;
+      padding: 0;
+      position: relative;
+      width: 110%;
+      @include border-radius(0);
+      border-bottom: 1px solid darken(#073642, 8%);
+
+      li {
+        margin-bottom: 0;
+        background: none;
+        color: #fff;
+        border: none;
+        @include border-radius(0);
+
+        &.ui-tabs-selected {
+          border-right: 1px solid darken(#073642, 8%);
+          border-left: 1px solid darken(#073642, 8%);
+          background-color: #073642;
+
+          &:first-child {
+            border-left: none;
+          }
+
+          a {
+            color: #eee8d5;
+          }
+        }
+
+        a {
+          border: none;
+          font: bold 12px $body-font-family;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+          color: #839496;
+
+          &: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-listen {
-      display: block;
+    div.graph-controls {
+      padding: 0 0 lh();
       margin-bottom: lh();
+      border-bottom: 1px solid darken(#073642, 5%);
+      @include box-shadow(0 1px 0 lighten(#073642, 2%));
+      @extend .clearfix;
+
+      div.music-wrapper {
+        margin-right: flex-gutter(4.5);
+        width: flex-grid(1.5, 4.5);
+        float: left;
+      }
+
+      div.inputs-wrapper {
+        padding-top: lh(.5);
+        width: flex-grid(3, 4.5);
+        float: left;
+      }
+
+      select#musicTypeSelect {
+        display: block;
+        margin-bottom: lh(.5);
+        font: 16px $body-font-family;
+        width: 100%;
+      }
+
+      div#graph-output, div#graph-listen {
+        display: block;
+        margin-bottom: lh(.5);
+        text-align: right;
+
+        p {
+          @include inline-block();
+          margin: 0;
+        }
+
+        ul {
+          @include inline-block();
+          margin-bottom: 0;
+
+          li {
+            @include inline-block();
+            margin-bottom: 0;
+
+            input {
+              margin-right: 5px;
+            }
+          }
+        }
+      }
+
+      input#playButton {
+        display: block;
+        @include button(simple, #dc322f);
+        font: bold 14px $body-font-family;
+        color: #47221a;
+        text-shadow: 0 1px 0 lighten(#dc322f, 5%);
+        @include box-shadow(inset 0 1px 0 lighten(#dc322f, 10%));
+
+        &:active {
+          @include box-shadow(none);
+        }
+
+        &[value="Stop"] {
+          @include button(simple, darken(#268bd2, 30%));
+          font: bold 14px $body-font-family;
+
+          &:active {
+            @include box-shadow(none);
+          }
+        }
+      }
     }
 
-    p {
-      margin-bottom: lh(.5);
+    label {
+      @include border-radius(2px);
+      font-weight: bold;
+      padding: 3px;
+      color: #fff;
+      -webkit-font-smoothing: antialiased;
     }
 
-    div#label {
-      display: inline-block;
+    //MOSFET AMPLIFIER
+    label[for="vinCheckbox"], label[for="vinRadioButton"]{
+      color: desaturate(#00bfff, 50%);
     }
 
-    input#playButton {
-      display: block;
+    label[for="voutCheckbox"], label[for="voutRadioButton"]{
+      color: darken(#ffcf48, 20%);
     }
-  }
-}
-
-div#schematic-container {
-  @extend .clearfix;
-
-  canvas {
-    width: flex-grid(4.5, 9);
-    float: left;
-    margin-right: flex-gutter(9); 
-  }
 
-  div.schematic-sliders {
-    width: flex-grid(4.5, 9);
-    float: left;
+    label[for="vrCheckbox"], label[for="vrRadioButton"]{
+      color: desaturate(#1df914, 40%);
+    }
 
-    div.slider-label#vs {
-      margin-top: lh(2.0);
+    //RC Filters
+    label[for="vcCheckbox"], label[for="vcRadioButton"]{
+      color: darken(#ffcf48, 20%);
     }
 
-    div.slider-label {
-      margin-bottom: lh(0.5);
+    //RLC Series
+    label[for="vlCheckbox"], label[for="vlRadioButton"]{
+      color: desaturate(#d33682, 40%);
     }
 
-    div.slider {
-      margin-bottom: lh(1);
+    div.schematic-sliders {
+
+      div.slider-label {
+        margin-bottom: lh(0.5);
+        font-weight: bold;
+        text-shadow: 0 -1px 0 darken(#073642, 10%);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      div.slider {
+        margin-bottom: lh(1);
+
+        &.ui-slider-horizontal {
+          height: 0.4em;
+          background: darken(#002b36, 2%);
+          border: 1px solid darken(#002b36, 8%);
+          @include box-shadow(none);
+        }
+
+        .ui-slider-handle {
+          background-color: #dc322f;
+          margin-top: -.3em;
+
+          &:hover, &:active {
+            background-color: lighten(#dc322f, 5%);
+          }
+        }
+      }
     }
   }
 }
-//End JM MOSFET AMPLIFIER
 
-// Labels
-div.graph-controls, div#graph-listen {
-
-  label {
-    @include border-radius(2px);
-    font-weight: bold;
-    padding: 3px;
-  }
-  //MOSFET AMPLIFIER
-  label[for="vinCheckbox"], label[for="vinRadioButton"]{
-      color: desaturate(#00bfff, 50%);
-  }
-  label[for="voutCheckbox"], label[for="voutRadioButton"]{
-      color: darken(#ffcf48, 20%);
-  }
-  label[for="vrCheckbox"], label[for="vrRadioButton"]{
-      color: desaturate(#1df914, 40%);
-  }
-  //RC Filters
-  label[for="vcCheckbox"], label[for="vcRadioButton"]{
-      color: darken(#ffcf48, 20%);
-  }
-  //RLC Series
-  label[for="vlCheckbox"], label[for="vlRadioButton"]{
-      color: desaturate(#d33682, 40%);
-  }
-}
 

templates/sass/courseware/_courseware.scss

-html { 
+html {
   height: 100%;
   max-height: 100%;
 }
@@ -172,7 +172,7 @@ div.course-wrapper {
 
         header {
           @extend h1.top-header;
-          margin-bottom: 0;
+          margin-bottom: -16px;
 
           h1 {
             margin: 0;
@@ -193,10 +193,18 @@ div.course-wrapper {
           padding-bottom: 0;
         }
 
+
         ul {
           list-style: disc outside none;
           padding-left: 1em;
         }
+
+        nav.sequence-bottom {
+          ul {
+          list-style: none;
+          padding: 0;
+          }
+        }
       }
     }
 
@@ -258,6 +266,24 @@ div.course-wrapper {
         }
       }
     }
+
+    div.ui-tabs {
+      border: 0;
+      @include border-radius(0);
+      margin: 0;
+      padding: 0;
+
+      .ui-tabs-nav {
+        background: none;
+        border: 0;
+        margin-bottom: lh(.5);
+      }
+
+      .ui-tabs-panel {
+        @include border-radius(0);
+        padding: 0;
+      }
+    }
   }
 
   &.closed {

templates/sass/courseware/_sequence-nav.scss

@@ -235,26 +235,20 @@ nav.sequence-nav {
 
 
 section.course-content {
-
-  div#seq_content {
-    margin-bottom: 60px;
-  }
+  position: relative;
 
   nav.sequence-bottom {
-    bottom: (-(lh()));
-    position: relative;
+    margin: lh(2) 0 0;
+    text-align: center;
 
     ul {
       @extend .clearfix;
       background-color: darken(#F6EFD4, 5%);
       background-color: darken($cream, 5%);
       border: 1px solid darken(#f6efd4, 20%);
-      border-bottom: 0;
-      @include border-radius(3px 3px 0 0);
+      @include border-radius(3px);
       @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
-      margin: 0 auto;
-      overflow: hidden;
-      width: 106px;
+      @include inline-block();
 
       li {
         float: left;
@@ -267,15 +261,13 @@ section.course-content {
             background-repeat: no-repeat;
             border-bottom: none;
             display: block;
-            display: block;
-            padding: lh(.75) 4px;
+            padding: lh(.5) 4px;
             text-indent: -9999px;
             @include transition(all, .4s, $ease-in-out-quad);
             width: 45px;
 
             &:hover {
               background-color: darken($cream, 10%);
-              color: darken(#F6EFD4, 60%);
               color: darken($cream, 60%);
               opacity: .5;
               text-decoration: none;
@@ -291,6 +283,7 @@ section.course-content {
         &.prev {
           a {
             background-image: url('/static/images/sequence-nav/previous-icon.png');
+            border-right: 1px solid darken(#f6efd4, 20%);
 
             &:hover {
               background-color: none;

templates/sass/courseware/_video.scss

@@ -143,6 +143,8 @@ section.course-content {
           float: left;
           margin-right: lh();
           @extend .dullify;
+          list-style: none;
+          padding: 0;
 
           li {
             float: left;

templates/sass/index/_index.scss

@@ -20,6 +20,7 @@ section.index-content {
     p {
       line-height: lh();
       margin-bottom: lh();
+
     }
 
     ul {
@@ -237,6 +238,19 @@ section.index-content {
           padding-top: lh(8);
         }
       }
+
+      div.announcement {
+        p.announcement-button {
+          a {
+            margin-top: 0;
+          }
+        }
+
+        img {
+          max-width: 100%;
+          margin-bottom: lh();
+        }
+      }
     }
 
 

templates/sass/layout/_calculator.scss

 li.calc-main {
-  bottom: -36px;
+  bottom: -126px;
   left: 0;
   position: fixed;
   width: 100%;
+  @include transition(bottom);
+  z-index: 99;
+  -webkit-appearance: none;
+
+  &.open {
+    bottom: -36px;
+
+    div#calculator_wrapper form div.input-wrapper div.help-wrapper dl {
+      display: block;
+    }
+  }
 
   a.calc {
     @include hide-text;
@@ -33,11 +44,12 @@ li.calc-main {
     position: relative;
     top: -36px;
     clear: both;
+    max-height: 90px;
 
     form {
       padding: lh();
       @extend .clearfix;
-
+      @include box-sizing(border-box);
 
       input#calculator_button {
         background: #111;
@@ -46,13 +58,14 @@ li.calc-main {
         @include box-shadow(none);
         @include box-sizing(border-box);
         color: #fff;
+        float: left;
         font-size: 30px;
         font-weight: bold;
+        margin: 0 (flex-gutter() / 2);
         padding: 0;
         text-shadow: none;
+        -webkit-appearance: none;
         width: flex-grid(.5) + flex-gutter();
-        float: left;
-        margin: 0 (flex-gutter() / 2);
 
         &:hover {
           color: #333;
@@ -70,15 +83,16 @@ li.calc-main {
         font-weight: bold;
         margin: 1px 0 0;
         padding: 10px;
+        -webkit-appearance: none;
         width: flex-grid(4);
       }
 
       div.input-wrapper {
-        position: relative;
         @extend .clearfix;
-        width: flex-grid(7.5);
-        margin: 0;
         float: left;
+        margin: 0;
+        position: relative;
+        width: flex-grid(7.5);
 
       input#calculator_input {
         border: none;
@@ -86,6 +100,7 @@ li.calc-main {
         @include box-sizing(border-box);
         font-size: 16px;
         padding: 10px;
+        -webkit-appearance: none;
         width: 100%;
 
         &:focus {
@@ -117,6 +132,7 @@ li.calc-main {
             right: -40px;
             top: -110px;
             width: 500px;
+             display: none;
             @include transition();
 
             &.shown {

templates/staff_problem_histogram.js

+<%!
+  import json
+  import math
+%>
+
+
+var rawData = ${json.dumps(histogram)};
+
+var maxx = 1;
+var maxy = 1.5;
+var xticks = Array();
+var yticks = Array();
+var data = Array();
+for (var i = 0; i < rawData.length; i++) {
+  var score = rawData[i][0];
+  var count = rawData[i][1];
+  var log_count = Math.log(count + 1);
+  
+  data.push( [score, log_count] );
+  
+  xticks.push( [score, score.toString()] );
+  yticks.push( [log_count, count.toString()] );
+  
+  maxx = Math.max( score + 1, maxx );
+  maxy = Math.max(log_count*1.1, maxy );
+}
+
+$.plot($("#histogram_${module_id}"), [{
+    data: data,
+    bars: { show: true,
+            align: 'center',
+            lineWidth: 0, 
+            fill: 1.0 },
+    color: "#b72121",
+  }],
+  {
+    xaxis: {min: -1, max: maxx, ticks: xticks, tickLength: 0},
+    yaxis: {min: 0.0, max: maxy, ticks: yticks, labelWidth: 50},
+  }
+);

templates/staff_problem_info.html

 <div class="staff_info">
 ${xml | h}
 </div>
-<div>
-${ str(histogram) }
-</div>
+%if render_histogram:
+  <div id="histogram_${module_id}" style="width:200px;height:150px"></div>
+%endif

templates/video.html

@@ -122,3 +122,11 @@
   });
 </script>
 </%block>
+
+<ol class="video-mod">
+% for t in annotations:
+  <li id="video-${annotations.index(t)}">
+    ${t[1]['content']}
+  </li>
+% endfor
+</ol>

urls.py

@@ -49,6 +49,7 @@ if settings.COURSEWARE_ENABLED:
         url(r'^courseware/$', 'courseware.views.index', name="courseware"),
         url(r'^info$', 'util.views.info'),
         url(r'^wiki/', include('simplewiki.urls')),
+        url(r'^masquerade/', include('masquerade.urls')),
         url(r'^courseware/(?P<course>[^/]*)/(?P<chapter>[^/]*)/(?P<section>[^/]*)/$', 'courseware.views.index', name="courseware_section"),
         url(r'^courseware/(?P<course>[^/]*)/(?P<chapter>[^/]*)/$', 'courseware.views.index', name="courseware_chapter"),
         url(r'^courseware/(?P<course>[^/]*)/$', 'courseware.views.index', name="courseware_course"),
@@ -76,6 +77,10 @@ if settings.ASKBOT_ENABLED:
 #                       url(r'^robots.txt$', include('robots.urls')),
                               )
 
+if settings.DEBUG:
+    ## Jasmine
+    urlpatterns=urlpatterns + (url(r'^_jasmine/', include('django_jasmine.urls')),)
+
 urlpatterns = patterns(*urlpatterns)
 
 if settings.DEBUG: