Merged with master. Moved a bunch of static template files to their own urls (without /t/template).

common/lib/capa/capa/capa_problem.py

@@ -179,6 +179,15 @@ class LoncapaProblem(object):
             return {'score': correct,
                     'total': self.get_max_score()}
 
+    def update_score(self, score_msg):
+        newcmap = CorrectMap()
+        for responder in self.responders.values():
+            if hasattr(responder,'update_score'): # Is this the best way to implement 'update_score' for CodeResponse?
+                results = responder.update_score(score_msg)         
+                newcmap.update(results)
+        self.correct_map = newcmap
+        return newcmap
+
     def grade_answers(self, answers):
         '''
         Grade student responses.  Called by capa_module.check_problem.

common/lib/capa/capa/responsetypes.py

@@ -18,6 +18,7 @@ import re
 import requests
 import traceback
 import abc
+import time
 
 # specific library imports
 from calc import evaluator, UndefinedVariable
@@ -693,6 +694,124 @@ class SymbolicResponse(CustomResponse):
 
 #-----------------------------------------------------------------------------
 
+class CodeResponse(LoncapaResponse):
+    ''' 
+    Grade student code using an external server
+    '''
+
+    response_tag = 'coderesponse'
+    allowed_inputfields = ['textline', 'textbox']
+
+    def setup_response(self):
+        xml = self.xml
+        self.url = xml.get('url') or "http://ec2-50-16-59-149.compute-1.amazonaws.com/xqueue/submit/" # FIXME -- hardcoded url
+
+        answer = xml.find('answer')
+        if answer is not None:
+            answer_src = answer.get('src')
+            if answer_src is not None:
+                self.code = self.system.filesystem.open('src/'+answer_src).read()
+            else:
+                self.code = answer.text
+        else:					# no <answer> stanza; get code from <script>
+            self.code = self.context['script_code']
+            if not self.code:
+                msg = '%s: Missing answer script code for externalresponse' % unicode(self)
+                msg += "\nSee XML source line %s" % getattr(self.xml,'sourceline','<unavailable>')
+                raise LoncapaProblemError(msg)
+
+        self.tests = xml.get('tests')
+
+    def get_score(self, student_answers):
+        idset = sorted(self.answer_ids)
+        
+        try:
+            submission = [student_answers[k] for k in idset]
+        except Exception as err:
+            log.error('Error in CodeResponse %s: cannot get student answer for %s; student_answers=%s' % (err, self.answer_ids, student_answers))
+            raise Exception(err)
+
+        self.context.update({'submission': submission})
+        extra_payload = {'edX_student_response': json.dumps(submission)}
+
+        # Should do something -- like update the problem state -- based on the queue response
+        r = self._send_to_queue(extra_payload)
+        
+        return CorrectMap() 
+
+    def update_score(self, score_msg):
+        # Parse 'score_msg' as XML
+        try:
+            rxml = etree.fromstring(score_msg)
+        except Exception as err:
+            msg = 'Error in CodeResponse %s: cannot parse response from xworker r.text=%s' % (err, score_msg)
+            raise Exception(err)
+
+        # The following process is lifted directly from ExternalResponse
+        idset = sorted(self.answer_ids)
+        cmap = CorrectMap()
+        ad = rxml.find('awarddetail').text
+        admap = {'EXACT_ANS':'correct',         # TODO: handle other loncapa responses
+                 'WRONG_FORMAT': 'incorrect',
+                 }
+        self.context['correct'] = ['correct']
+        if ad in admap:
+            self.context['correct'][0] = admap[ad]
+
+        # create CorrectMap
+        for key in idset:
+            idx = idset.index(key)
+            msg = rxml.find('message').text.replace('&nbsp;','&#160;') if idx==0 else None
+            cmap.set(key, self.context['correct'][idx], msg=msg)
+        
+        return cmap
+
+    # CodeResponse differentiates from ExternalResponse in the behavior of 'get_answers'. CodeResponse.get_answers
+    #   does NOT require a queue submission, and the answer is computed (extracted from problem XML) locally.
+    def get_answers(self):
+        # Extract the CodeResponse answer from XML
+        penv = {}
+        penv['__builtins__'] = globals()['__builtins__']
+        try:
+            exec(self.code,penv,penv)
+        except Exception as err:
+            log.error('Error in CodeResponse %s: Error in problem reference code' % err)
+            raise Exception(err)
+        try:
+            ans = penv['answer']
+        except Exception as err:
+            log.error('Error in CodeResponse %s: Problem reference code does not define answer in <answer>...</answer>' % err)
+            raise Exception(err)
+
+        anshtml = '<font color="blue"><span class="code-answer"><br/><pre>%s</pre><br/></span></font>' % ans
+        return dict(zip(self.answer_ids,[anshtml]))
+
+    # CodeResponse._send_to_queue implements the same interface as defined for ExternalResponse's 'get_score'
+    def _send_to_queue(self, extra_payload):
+        # Prepare payload
+        xmlstr = etree.tostring(self.xml, pretty_print=True)
+        header = { 'return_url': self.system.xqueue_callback_url }
+        header.update({'timestamp': time.time()})
+        payload = {'xqueue_header': json.dumps(header), # 'xqueue_header' should eventually be derived from xqueue.queue_common.HEADER_TAG or something similar
+                   'xml': xmlstr,
+                   'edX_cmd': 'get_score',
+                   'edX_tests': self.tests,
+                   'processor': self.code,
+                  }
+        payload.update(extra_payload)
+
+        # Contact queue server
+        try:
+            r = requests.post(self.url, data=payload)
+        except Exception as err:
+            msg = "Error in CodeResponse %s: cannot connect to queue server url=%s" % (err, self.url)
+            log.error(msg)
+            raise Exception(msg)
+
+        return r
+
+#-----------------------------------------------------------------------------
+
 class ExternalResponse(LoncapaResponse):
     '''
     Grade the students input using an external server.
@@ -1072,5 +1191,5 @@ class ImageResponse(LoncapaResponse):
 # TEMPORARY: List of all response subclasses
 # FIXME: To be replaced by auto-registration
 
-__all__ = [ NumericalResponse, FormulaResponse, CustomResponse, SchematicResponse, MultipleChoiceResponse, TrueFalseResponse, ExternalResponse, ImageResponse, OptionResponse, SymbolicResponse, StringResponse ]
+__all__ = [ CodeResponse, NumericalResponse, FormulaResponse, CustomResponse, SchematicResponse, MultipleChoiceResponse, TrueFalseResponse, ExternalResponse, ImageResponse, OptionResponse, SymbolicResponse, StringResponse ]
 

common/lib/xmodule/xmodule/capa_module.py

@@ -275,6 +275,7 @@ class CapaModule(XModule):
             'problem_reset': self.reset_problem,
             'problem_save': self.save_problem,
             'problem_show': self.get_answer,
+            'score_update': self.update_score,
             }
 
         if dispatch not in handlers:
@@ -321,6 +322,12 @@ class CapaModule(XModule):
         #TODO: Not 404
         raise self.system.exception404
 
+    def update_score(self, get):
+        score_msg = get['response']
+        self.lcp.update_score(score_msg)
+
+        return dict() # No AJAX return is needed
+
     def get_answer(self, get):
         '''
         For the "show answer" button.

lms/djangoapps/courseware/module_render.py

@@ -28,7 +28,7 @@ class I4xSystem(object):
     '''
     def __init__(self, ajax_url, track_function,
                  get_module, render_template, replace_urls,
-                 user=None, filestore=None):
+                 user=None, filestore=None, xqueue_callback_url=None):
         '''
         Create a closure around the system environment.
 
@@ -48,6 +48,7 @@ class I4xSystem(object):
             that capa_module can use to fix up the static urls in ajax results.
         '''
         self.ajax_url = ajax_url
+        self.xqueue_callback_url = xqueue_callback_url
         self.track_function = track_function
         self.filestore = filestore
         self.get_module = get_module
@@ -207,6 +208,7 @@ def get_module(user, request, location, student_module_cache, position=None):
 
     # Setup system context for module instance
     ajax_url = settings.MITX_ROOT_URL + '/modx/' + descriptor.location.url() + '/'
+    xqueue_callback_url = settings.MITX_ROOT_URL + '/xqueue/' + user.username + '/' + descriptor.location.url() + '/'
 
     def _get_module(location):
         (module, _, _, _) = get_module(user, request, location, student_module_cache, position)
@@ -218,6 +220,7 @@ def get_module(user, request, location, student_module_cache, position=None):
     system = I4xSystem(track_function=make_track_function(request),
                        render_template=render_to_string,
                        ajax_url=ajax_url,
+                       xqueue_callback_url=xqueue_callback_url,
                        # TODO (cpennington): Figure out how to share info between systems
                        filestore=descriptor.system.resources_fs,
                        get_module=_get_module,
@@ -321,6 +324,53 @@ def add_histogram(module):
     module.get_html = get_html
     return module
 
+# THK: TEMPORARY BYPASS OF AUTH!
+from django.views.decorators.csrf import csrf_exempt
+from django.contrib.auth.models import User
+@csrf_exempt
+def xqueue_callback(request, username, id, dispatch):
+    # Parse xqueue response
+    get = request.POST.copy()
+    try:
+        header = json.loads(get.pop('xqueue_header')[0]) # 'dict'
+    except Exception as err:
+        msg = "Error in xqueue_callback %s: Invalid return format" % err
+        raise Exception(msg)
+    
+    # Should proceed only when the request timestamp is more recent than problem timestamp
+    timestamp = header['timestamp']
+
+    # Retrieve target StudentModule
+    user = User.objects.get(username=username)
+
+    student_module_cache = StudentModuleCache(user, modulestore().get_item(id))
+    instance, instance_module, shared_module, module_type = get_module(request.user, request, id, student_module_cache)
+    
+    if instance_module is None:
+        log.debug("Couldn't find module '%s' for user '%s'",
+                  id, request.user)
+        raise Http404
+    
+    oldgrade = instance_module.grade
+    old_instance_state = instance_module.state
+
+    # We go through the "AJAX" path
+    #   So far, the only dispatch from xqueue will be 'score_update'
+    try:
+        ajax_return = instance.handle_ajax(dispatch, get) # Can ignore the "ajax" return in 'xqueue_callback'
+    except:
+        log.exception("error processing ajax call")
+        raise
+
+    # Save state back to database
+    instance_module.state = instance.get_instance_state()
+    if instance.get_score():
+        instance_module.grade = instance.get_score()['score']
+    if instance_module.grade != oldgrade or instance_module.state != old_instance_state:
+        instance_module.save()
+
+    return HttpResponse("")
+
 def modx_dispatch(request, dispatch=None, id=None):
     ''' Generic view for extensions. This is where AJAX calls go.
 

lms/djangoapps/static_template_view/views.py

@@ -28,6 +28,7 @@ def index(request, template):
     else:
         return redirect('/')
 
+
 @ensure_csrf_cookie
 @cache_if_anonymous
 def render(request, template):
@@ -41,7 +42,7 @@ def render(request, template):
     return render_to_response('static_templates/' + template, {})
     
 
-valid_auth_templates=['help.html']
+valid_auth_templates=[]
 
 def auth_index(request, template):
     if not request.user.is_authenticated():

lms/envs/test.py

@@ -84,6 +84,21 @@ DEFAULT_FILE_STORAGE = 'django.core.files.storage.FileSystemStorage'
 MEDIA_ROOT = TEST_ROOT / "uploads"
 MEDIA_URL = "/static/uploads/"
 STATICFILES_DIRS.append(("uploads", MEDIA_ROOT))
+
+new_staticfiles_dirs = []
+# Strip out any static files that aren't in the repository root
+# so that the tests can run with only the mitx directory checked out
+for static_dir in STATICFILES_DIRS:
+    # Handle both tuples and non-tuple directory definitions
+    try:
+        _, data_dir = static_dir
+    except ValueError:
+        data_dir = static_dir
+
+    if not data_dir.startswith(REPO_ROOT):
+        new_staticfiles_dirs.append(static_dir)
+STATICFILES_DIRS = new_staticfiles_dirs
+
 FILE_UPLOAD_TEMP_DIR = PROJECT_ROOT / "uploads"
 FILE_UPLOAD_HANDLERS = (
     'django.core.files.uploadhandler.MemoryFileUploadHandler',

lms/static/js/toggle_login_modal.js

-$(document).ready(function () {
-  $('a#login').click(function() {
-    $('.modal.login-modal').addClass("visible");
-    $('.modal-overlay').addClass("visible");
+(function($){
+  $.fn.extend({
+    leanModal: function(options) {
+      var defaults = {
+        top: 100,
+        overlay: 0.5,
+        closeButton: null,
+        position: 'fixed'
+      }
+
+      var overlay = $("<div id='lean_overlay'></div>");
+      $("body").append(overlay);
+
+      options =  $.extend(defaults, options);
+
+      return this.each(function() {
+        var o = options;
+
+        $(this).click(function(e) {
+
+          $(".modal").hide();
+
+          var modal_id = $(this).attr("href");
+
+          $("#lean_overlay").click(function() {
+             close_modal(modal_id);
           });
-  $('div.close-modal').click(function() {
-    $('.modal.login-modal').removeClass("visible");
-    $('.modal-overlay').removeClass("visible");
+
+          $(o.closeButton).click(function() {
+             close_modal(modal_id);
           });
 
-  $('a#signup').click(function() {
-    $('.modal.signup-modal').addClass("visible");
-    $('.modal-overlay').addClass("visible");
+          var modal_height = $(modal_id).outerHeight();
+          var modal_width = $(modal_id).outerWidth();
+
+          $('#lean_overlay').css({ 'display' : 'block', opacity : 0 });
+          $('#lean_overlay').fadeTo(200,o.overlay);
+
+          $('iframe', modal_id).attr('src', $('iframe', modal_id).data('src'));
+          $(modal_id).css({
+            'display' : 'block',
+            'position' : o.position,
+            'opacity' : 0,
+            'z-index': 11000,
+            'left' : 50 + '%',
+            'margin-left' : -(modal_width/2) + "px",
+            'top' : o.top + "px"
+          })
+
+          $(modal_id).fadeTo(200,1);
+          e.preventDefault();
+
         });
-  $('div.close-modal').click(function() {
-    $('.modal.signup-modal').removeClass("visible");
-    $('.modal-overlay').removeClass("visible");
       });
 
-  $('.hero').click(function() {
-    $('.modal.video-modal').addClass("visible");
-    $('.modal-overlay').addClass("visible");
-  });
-  $('div.close-modal').click(function() {
-    $('.modal.video-modal').removeClass("visible");
-    $('.modal-overlay').removeClass("visible");
+      function close_modal(modal_id){
+        $("#lean_overlay").fadeOut(200);
+        $('iframe', modal_id).attr('src', '');
+        $(modal_id).css({ 'display' : 'none' });
+      }
+    }
   });
-});
 
+  $("a[rel*=leanModal]").each(function(){
+    $(this).leanModal({ top : 120, overlay: 1, closeButton: ".close-modal", position: 'absolute' });
+    embed = $($(this).attr('href')).find('iframe')
+    if(embed.length > 0) {
+      embed.data('src', embed.attr('src') + '?autoplay=1');
+      embed.attr('src', '');
+    }
+  });
+})(jQuery);

lms/static/sass/_about.scss → lms/static/sass/_about_pages.scss

@@ -15,7 +15,8 @@
     a {
       border-bottom: 3px solid transparent;
       color: $lighter-base-font-color;
-      font: italic 1.2rem/1.4rem $serif;
+      font-family: $serif;
+      font-style: italic;
       @include inline-block;
       letter-spacing: 1px;
       margin: 0px 15px;
@@ -26,6 +27,7 @@
       &:hover, &.active {
         border-color: rgb(200,200,200);
         color: $base-font-color;
+        text-decoration: none;
       }
     }
   }
@@ -70,10 +72,6 @@
       }
 
       &.right {
-        h2 {
-          text-align: right;
-        }
-
         .photo {
           float: right;
           margin-left: flex-gutter();
@@ -87,27 +85,26 @@
   }
 
   .faq {
-    display: none;
     @include clearfix;
 
     nav.categories {
-      border-right: 1px solid rgb(220,220,220);
+      border: 1px solid rgb(220,220,220);
       @include box-sizing(border-box);
       float: left;
-      margin-right: flex-gutter();
-      padding-right: 20px;
+      margin-left: flex-gutter();
+      padding: 20px;
       width: flex-grid(3);
 
       a {
         display: block;
         letter-spacing: 1px;
-        margin-right: -20px;
-        padding: 10px 20px 10px 0;
-        text-align: right;
-        text-transform: uppercase;
+        margin: 0px -20px;
+        padding: 12px 0px 12px 20px;
+        text-align: left;
 
         &:hover {
           background: rgb(245,245,245);
+          text-decoration: none;
         }
       }
     }
@@ -135,7 +132,7 @@
 
         h3 {
           font-family: $sans-serif;
-          font-weight: bold;
+          font-weight: 700;
           margin-bottom: 15px;
         }
       }
@@ -143,7 +140,26 @@
   }
 
   .press {
-    display: none;
+
+    .press-resources {
+      @include clearfix;
+      margin-bottom: 60px;
+
+      .pressreleases, .identity-assets {
+        background: rgb(245,245,245);
+        border: 1px solid rgb(200,200,200);
+        @include box-sizing(border-box);
+        @include border-radius(4px);
+        float: left;
+        padding: 20px 30px;
+        text-align: center;
+        width: flex-grid(6);
+      }
+
+      .pressreleases {
+        margin-right: flex-gutter();
+      }
+    }
 
     .press-story {
       border-bottom: 1px solid rgb(220,220,220);
@@ -179,14 +195,17 @@
         width: flex-grid(10);
 
         header {
-          margin-bottom: 15px;
+          margin-bottom: 10px;
 
           h3 {
             font-family: $sans-serif;
-            font-weight: bold;
+            font-weight: 700;
+            margin-bottom: 5px;
           }
 
-          a {
+          span.post-date {
+            color: $lighter-base-font-color;
+            margin-right: 10px;
           }
         }
       }
@@ -194,7 +213,6 @@
   }
 
   .contact {
-    display: none;
     @include clearfix;
     margin: 0 auto;
     width: flex-grid(10);
@@ -202,14 +220,32 @@
     .map {
       background: rgb(245,245,245);
       float: left;
-      height: 180px;
+      height: 280px;
       margin-right: flex-gutter();
+      overflow: hidden;
       width: flex-grid(6);
+
+      img {
+        min-height: 100%;
+        max-width: 100%;
+      }
     }
 
-    .address {
+    .contacts {
+      @include box-sizing(border-box);
       float: left;
+      padding-left: 40px;
       width: flex-grid(6);
+
+      ul {
+        list-style: none;
+        margin: 0px;
+        padding: 0px;
+
+        li {
+          margin-bottom: 10px;
+        }
+      }
     }
   }
 }

lms/static/sass/_course_info.scss → lms/static/sass/_course_about.scss

 .course-info {
   .container {
-    margin-bottom: 60px;
+    padding-bottom: 120px;
   }
 
   header.course-profile {
     background: rgb(245,245,245);
-    //@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245)));
+    @include background-image(url('/static/images/shot-2-large.jpg'));
+    background-size: cover;
     @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
-    border-bottom: 1px solid rgb(200,200,200);
+    border-bottom: 1px solid rgb(100,100,100);
     @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
+    margin-top: -69px;
     overflow: hidden;
+    padding: 134px 0px 60px;
+    position: relative;
     width: 100%;
 
     .intro-inner-wrapper {
+      background: rgba(255,255,255, 0.9);
+      border: 1px solid rgb(100,100,100);
+      @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
+      @include box-sizing(border-box);
       @include clearfix;
       margin: 0 auto;
       max-width: 1200px;
-      padding: 50px 0px 40px;
       position: relative;
       width: flex-grid(12);
+      z-index: 2;
 
-      &::before {
-        @include background-image(radial-gradient(50% 50%, ellipse closest-side, rgba(#fff, 1), rgba(#fff, 0)));
-        content: "";
-        display: block;
-        height: 200%;
-        left: 0px;
-        position: absolute;
-        top: 80px;
-        width: flex-grid(8);
-        z-index: 1;
-      }
 
       .intro {
+        @include box-sizing(border-box);
         @include clearfix;
         float: left;
-        margin-right: flex-gutter();
+        padding: 20px 20px;
         position: relative;
-        width: flex-grid(8);
+        width: flex-grid(8) + flex-gutter();
         z-index: 2;
 
         > hgroup {
-          position: relative;
-          margin-bottom: 12px;
+          border-bottom: 1px solid rgb(210,210,210);
+          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+          margin-bottom: 30px;
+          padding-bottom: 15px;
+          width: 100%;
 
           h1 {
             color: $base-font-color;
-            font: bold 2.8rem/3.2rem $sans-serif;
+            font-weight: 700;
             @include inline-block;
-            margin: 0 5px 0 0;
+            margin: 0 10px 0 0;
             letter-spacing: 0px;
             text-shadow: 0 1px rgba(255,255,255, 0.6);
-
-            span {
-              color: $lighter-base-font-color;
-              display: none;
-              font: 300 1.2rem/3rem $sans-serif;
-            }
           }
 
           h2 {
@@ -65,8 +60,10 @@
 
             a {
               color: $lighter-base-font-color;
-              font: italic bold 1.4rem/1.6rem $sans-serif;
+              font: italic 800 1em/1em $sans-serif;
+              letter-spacing: 0px;
               text-shadow: 0 1px rgba(255,255,255, 0.6);
+              text-transform: none;
 
               &:hover {
                 color: $blue;
@@ -75,89 +72,91 @@
           }
         }
 
-        .course-dates {
-          p {
-            color: $lighter-base-font-color;
-            @include inline-block;
-            font: italic 1.2rem/1.6rem $serif;
-            margin-top: 0px;
-            margin-right: 20px;
+        .main-cta {
+          @include clearfix;
+          float: left;
+          margin-right: flex-gutter();
+          @include transition(all, 0.15s, linear);
+          width: flex-grid(6);
 
-            &:last-child {
-              margin: 0;
-            }
+          > a.find-courses, a.register {
+            @include button(shiny, $blue);
+            @include box-sizing(border-box);
+            @include border-radius(3px);
+            display: block;
+            font: normal 1.2rem/1.6rem $sans-serif;
+            letter-spacing: 1px;
+            padding: 10px 0px;
+            text-transform: uppercase;
+            text-align: center;
+            width: flex-grid(12);
 
-            > span {
-              background: rgb(255,255,255);
-              border: 1px solid rgb(220,220,220);
-              @include border-radius(4px);
-              color: $base-font-color;
-              font: 300 1.2rem/1.6rem $sans-serif;
-              margin-left: 5px;
-              padding: 2px 10px;
+            &:hover {
+              color: rgb(255,255,255);
             }
           }
         }
       }
 
-      .actions {
-        float: left;
-        margin-top: 5px;
+      .media {
+        background: #fff;
+        border-left: 1px solid rgb(100,100,100);
+        @include box-sizing(border-box);
+        display: block;
+        float: right;
+        padding: 1px;
         position: relative;
         width: flex-grid(4);
         z-index: 2;
 
-        &:hover {
-          .register-wrapper {
-            @include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
-          }
-        }
+        .hero {
+          height: 180px;
+          overflow: hidden;
+          position: relative;
 
-        .register-wrapper {
-          @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
-          @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9));
+          .play-intro {
+            @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
             @include border-radius(4px);
-          @include transition(all, 0.15s, linear);
+            @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
+            border: 2px solid rgba(255,255,255, 0.8);
+            height: 80px;
+            left: 50%;
+            margin-top: -40px;
+            margin-left: -40px;
+            position: absolute;
+            top: 50%;
+            width: 80px;
 
-          a.register {
-            @include button(shiny, $blue);
-            @include box-sizing(border-box);
-            @include border-radius(3px);
+            &::after {
+              color: rgba(255,255,255, 0.8);
+              content: "\25B6";
               display: block;
-            font: italic 1.2rem/1.6rem $serif;
-            padding: 10px 0px;
-            position: relative;
-            text-transform: uppercase;
-            text-align: center;
-            width: flex-grid(12);
-            z-index: 1;
+              font: normal 2em/1em $sans-serif;
+              left: 50%;
+              margin-left: -11px;
+              margin-top: -16px;
+              position: absolute;
+              text-shadow: 0 -1px rgba(0,0,0, 0.8);
+              top: 50%;
             }
           }
 
-        .social-sharing {
-          padding: 0px 20px;
+          img {
+            display: block;
+            width: 100%;
+          }
+        }
 
-          p {
-            background: rgb(255,255,255);
-            @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.075), inset 0 0 0 1px rgba(255,255,255, 0.9));
-            border: 1px solid rgb(210,210,210);
-            border-top: 0;
-            @include border-bottom-radius(4px);
-            padding: 3px 10px;
-            margin: 0 auto;
-            color: $base-font-color;
-            font: italic 300 1.2rem/1.6rem $serif;
-            margin: 0 0 5px 0;
-            text-align: center;
-            text-shadow: 0 1px rgba(255,255,255, 0.6);
+        &:hover {
+          cursor: pointer;
 
-            &:last-child {
-              margin: 0;
-            }
+          .play-intro {
+            @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
+            @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.5));
+            border-color: rgba(255,255,255, 0.9);
 
-            > span {
-              font: normal 1.2rem/1.6rem $sans-serif;
-              margin-right: 5px;
+            &::after {
+              color: rgba(255,255,255, 1);
             }
           }
         }
@@ -183,13 +182,13 @@
 
       a {
         border-bottom: 3px solid transparent;
+        color: $lighter-base-font-color;
         @include inline-block;
-        font: normal 1.2rem/1.6rem $sans-serif;
         letter-spacing: 1px;
         margin: 0 15px;
         padding: 0px 5px 15px;
         text-align: center;
-        text-transform: uppercase;
+        text-transform: lowercase;
 
         &:first-child {
           margin-left: 0px;
@@ -198,22 +197,10 @@
         &:hover, &.active {
           border-color: rgb(200,200,200);
           color: $base-font-color;
+          text-decoration: none;
         }
       }
     }
-
-    h2 {
-      color: $lighter-base-font-color;
-      margin-bottom: 20px;
-      text-transform: uppercase;
-    }
-
-    h3 {
-      color: $base-font-color;
-      font-weight: 300;
-      font-family: $sans-serif;
-      margin-bottom: 10px;
-    }
   }
 
   .details {
@@ -223,37 +210,19 @@
 
     .inner-wrapper {
       > section {
-
-        &::after {
-          @extend .faded-hr-divider;
-          content: "";
-          display: none;
-          margin-top: 60px;
-        }
-        margin-bottom: 60px;
-
-
-        p + h2 {
-          margin-top: 40px;
-        }
-      }
+        margin-bottom: 40px;
       }
 
       .course-staff {
         .teacher {
-        margin-bottom: 30px;
-
-        &::after {
-          @extend .faded-hr-divider;
-          content: "";
-          display: block;
-          margin-top: 30px;
-        }
+          margin-bottom: 40px;
 
-        &:last-child {
-          &::after {
-            display: none;
-          }
+          h3 {
+            color: $base-font-color;
+            font-family: $sans-serif;
+            font-weight: 700;
+            margin-bottom: 15px;
+            text-transform: none;
           }
 
           .teacher-image {
@@ -266,84 +235,146 @@
         }
       }
     }
+  }
 
   .course-sidebar {
     @include box-sizing(border-box);
+    @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
+    border: 1px solid rgb(200,200,200);
+    border-top: none;
     float: left;
-    padding-top: 40px;
+    padding: 20px 20px 30px;
     width: flex-grid(4);
 
-    h3 {
-      color: $lighter-base-font-color;
-      font-family: $serif;
-      font-weight: 300;
-      margin-bottom: 15px;
-      text-transform: uppercase;
+    header {
+      margin-bottom: 30px;
+      padding-bottom: 20px;
+      position: relative;
+      text-align: center;
+
+      &::after {
+        @extend .faded-hr-divider;
+        content: "";
+        display: block;
+        height: 1px;
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        z-index: 1;
       }
 
-    > section {
-      border: 1px solid rgb(220,220,220);
-      @include border-radius(4px);
-      background: rgb(245,245,245);
-      margin-bottom: 20px;
-      padding: 15px;
+      a.university-name {
+        border-right: 1px solid rgb(200,200,200);
+        color: $base-font-color;
+        font-family: $sans-serif;
+        font-style: italic;
+        font-weight: 800;
+        @include inline-block;
+        letter-spacing: 0px;
+        margin-right: 15px;
+        padding-right: 15px;
+
+        &:hover {
+          color: $lighter-base-font-color;
+        }
       }
 
-    .media {
-      border: 1px solid rgb(200,200,200);
+      .social-sharing {
         @include box-sizing(border-box);
-      margin-bottom: 20px;
-      padding: 1px;
+        float: left;
+        height: 44px;
+        position: relative;
+        text-align: center;
         width: flex-grid(12);
+        z-index: 2;
 
-      .hero {
-        height: 180px;
-        overflow: hidden;
-        position: relative;
+        float: none;
 
-        .play-intro {
-          @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4)));
+        &:hover {
+          .sharing-message {
+            opacity: 1;
+            top: 56px;
+          }
+        }
+
+        .sharing-message {
+          @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
+                                                            rgba(0,0,0, 0.7) 100%));
+          border: 1px solid rgba(0,0,0, 0.5);
           @include border-radius(4px);
-          @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
-          border: 1px solid rgba(0,0,0, 0.3);
-          height: 80px;
+          @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
+          @include box-sizing(border-box);
+          color: rgb(255,255,255);
+          float: right;
+          font-family: $serif;
+          font-size: 0.9em;
+          font-style: italic;
           left: 50%;
-          margin-top: -40px;
-          margin-left: -40px;
+          margin-left: -110px;
+          opacity: 0;
+          padding: 6px 10px;
           position: absolute;
-          top: 50%;
-          width: 80px;
+          text-align: center;
+          @include transition(all, 0.15s, ease-out);
+          top: 65px;
+          width: 220px;
 
-          &::after {
-            color: $base-font-color;
-            content: "\25B6";
-            display: block;
-            font: normal 3.2rem/3.2rem $sans-serif;
-            left: 50%;
-            margin-left: -12px;
-            margin-top: -17px;
-            position: absolute;
-            text-shadow: 0 1px rgba(255,255,255, 0.8);
-            top: 50%;
+          &:hover {
+            opacity: 0;
           }
         }
 
+        .share {
+          height: 44px;
+          @include inline-block;
+          margin-right: 10px;
+          opacity: 0.5;
+          @include transition(all, 0.15s, linear);
+          width: 44px;
+
+          &:hover {
+            opacity: 1;
+          }
+
           img {
-          min-width: 100%;
+            width: 100%;
+          }
+
+          &:last-child {
+            margin-right: 0px;
+          }
+        }
       }
     }
 
-      &:hover {
-        cursor: pointer;
+    .important-dates {
+      list-style: none;
+      margin: 0px;
+      padding: 0px 10px;
 
-        .play-intro {
-          @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5)));
-          @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
-          border: 1px solid rgba(0,0,0, 0.4);
+      li {
+        @include clearfix;
+        border-bottom: 1px dotted rgb(220,220,220);
+        margin-bottom: 20px;
+        padding-bottom: 10px;
 
-          &::after {
-            color: $pink;
+        p {
+          color: $lighter-base-font-color;
+          float: left;
+          font-family: $sans-serif;
         }
+
+        img {
+          background: rgb(230,230,230);
+          float: left;
+          height: 19px;
+          margin: 3px 10px 0 0;
+          width: 19px;
+        }
+
+        span {
+          float: right;
+          font-weight: 700;
         }
       }
     }

lms/static/sass/_find_courses.scss → lms/static/sass/_courses.scss

@@ -75,7 +75,10 @@
 
         h1 {
           color: $base-font-color;
-          font: italic bold 2.4rem/3rem $sans-serif;
+          font-family: $sans-serif;
+          font-style: italic;
+          font-weight: 800;
+          letter-spacing: 0px;
           text-transform: none;
         }
 

lms/static/sass/_dashboard.scss

@@ -14,7 +14,7 @@
         @include border-radius(4px);
         @include box-sizing(border-box);
         color: $base-font-color;
-        font: bold 1.4rem/1.6rem $sans-serif;
+        font: 700 1.2em/1.2em $sans-serif;
         margin: 0px;
         overflow: hidden;
         padding: 15px 10px 17px;
@@ -44,12 +44,12 @@
 
             p {
               color: $lighter-base-font-color;
-              font: 300 1.2rem/1.6rem $sans-serif;
+              font-family: $sans-serif;
               text-shadow: 0 1px rgba(255,255,255, 0.8);
 
               span {
                 font-weight: 700;
-                margin-left: 5px;
+                margin-left: 10px;
                 text-transform: none;
               }
             }
@@ -64,16 +64,21 @@
     margin: 0px;
     width: flex-grid(9);
 
+    > header {
+      border-bottom: 1px solid rgb(210,210,210);
+      margin-bottom: 30px;
+    }
+
     .empty-dashboard-message {
-      border-top: 1px solid rgb(210,210,210);
       padding: 80px 0px;
       text-align: center;
 
       p {
         color: $lighter-base-font-color;
         font-style: italic;
+        margin-bottom: 20px;
         text-shadow: 0 1px rgba(255,255,255, 0.6);
-        -webkit-font-smoothing: antialiased;
+      }
 
       a {
         background: rgb(240,240,240);
@@ -83,24 +88,28 @@
         @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
         @include box-sizing(border-box);
         color: $base-font-color;
-          font: 300 1.2rem/1.6rem $sans-serif;
+        font-family: $sans-serif;
         @include inline-block;
+        letter-spacing: 1px;
         margin-left: 5px;
         padding: 5px 10px;
         text-shadow: 0 1px rgba(255,255,255, 0.6);
+
+        &:hover {
+          color: $blue;
+          text-decoration: none;
         }
       }
     }
 
     .my-course {
       background: rgb(250,250,250);
-      @include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(243,243,243)));
+      @include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(240,240,240)));
       border: 1px solid rgb(190,190,190);
       @include border-radius(3px);
       @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8));
       @include box-sizing(border-box);
       @include clearfix;
-      font-size: 0em;
       margin-right: flex-gutter();
       margin-bottom: 25px;
       overflow: hidden;
@@ -161,7 +170,7 @@
 
         &:hover {
           .shade {
-            background: rgba(255,255,255, 0.1);
+            background: rgba(255,255,255, 0.3);
             @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
                                                               rgba(0,0,0, 0.3) 100%));
           }
@@ -179,80 +188,91 @@
         > hgroup {
           border-bottom: 1px solid rgb(210,210,210);
           @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
-          margin-bottom: 20px;
-          padding: 15px 0px;
+          padding: 12px 0px;
           width: 100%;
 
-          h2 {
+          a.university {
+            background: rgba(255,255,255, 1);
+            border: 1px solid rgb(180,180,180);
+            @include border-radius(3px);
+            @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.2), 0 1px 0 0 rgba(255,255,255, 0.6));
+            color: $lighter-base-font-color;
+            display: block;
+            font-style: italic;
+            font-weight: 800;
+            @include inline-block;
+            margin-right: 10px;
+            padding: 5px 10px;
+            vertical-align: middle;
+
+            &:hover {
+              color: $blue;
+              text-decoration: none;
+            }
+          }
+
+          h3 {
             @include inline-block;
             margin-bottom: 0px;
             vertical-align: middle;
 
             a {
               color: $base-font-color;
-              font: 800 1.6rem/2rem $sans-serif;
+              font-weight: 700;
               text-shadow: 0 1px rgba(255,255,255, 0.6);
               text-overflow: ellipsis;
               white-space: nowrap;
 
               &:hover {
-                color: $blue;
                 text-decoration: underline;
               }
             }
           }
+        }
 
-          h3 {
-            @include inline-block;
-            margin-right: 10px;
-            vertical-align: middle;
+        .course-status {
+          background: $yellow;
+          border: 1px solid rgb(200,200,200);
+          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+          margin-top: 16px;
+          padding: 5px;
 
-            a {
-              background: rgba(255,255,255, 1);
-              border: 1px solid rgb(180,180,180);
-              @include border-radius(3px);
-              @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.2), 0 1px 0 0 rgba(255,255,255, 0.6));
+          p {
             color: $lighter-base-font-color;
-              display: block;
-              font: italic 800 1.2rem/1.6rem $sans-serif;
-              padding: 5px 10px;
-
-              &:hover {
-                color: $blue;
-              }
-            }
+            font-style: italic;
+            letter-spacing: 1px;
+            text-align: center;
           }
         }
 
         .meta {
           @include clearfix;
+          margin-top: 22px;
           position: relative;
           @include transition(opacity, 0.15s, linear);
           width: 100%;
 
+
           .course-work-icon {
             background: rgb(200,200,200);
             float: left;
-            font: 300 1.2rem/1.6rem $sans-serif;
             height: 22px;
             width: 22px;
           }
 
           .complete {
             float: right;
-            padding-top: 2px;
 
             p {
               color: $lighter-base-font-color;
-              font: italic 1.2rem/1.4rem $serif;
+              font-style: italic;
               @include inline-block;
               text-align: right;
               text-shadow: 0 1px rgba(255,255,255, 0.6);
-              -webkit-font-smoothing: antialiased;
 
               .completeness {
                 color: $base-font-color;
-                font: 700 1.2rem/1.4rem $sans-serif;
+                font-weight: 700;
                 margin-right: 5px;
               }
             }
@@ -262,7 +282,7 @@
             @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
             left: 40px;
             position: absolute;
-            right: 110px;
+            right: 130px;
 
             .meter {
               background: rgb(245,245,245);
@@ -276,7 +296,7 @@
               width: 100%;
 
               .meter-fill {
-                background: rgb(120,120,120);
+                background: $blue;
                 @include background-image(linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%,
                                                                   transparent 25%,
                                                                   transparent 50%,
@@ -299,23 +319,17 @@
       }
 
       &:hover {
-
-        .edit {
-          background: rgb(220,220,220);
-          border-color: rgb(190,190,190);
-        }
-
         .cover {
-          opacity: 1;
+          .shade {
+            background: rgba(255,255,255, 0.1);
+            @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
+                                                              rgba(0,0,0, 0.3) 100%));
+          }
 
-          .shade, .arrow {
+          .arrow {
             opacity: 1;
           }
         }
-
-        .meta {
-          opacity: 0.9;
-        }
       }
     }
   }

lms/static/sass/_home.scss

+.home {
+  padding: 0px;
+
+  > header {
+    background: rgb(255,255,255);
+    @include background-image(url('/static/images/shot-2-large.jpg'));
+    background-size: cover;
+    border-bottom: 1px solid rgb(80,80,80);
+    @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.9), inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
+    @include clearfix;
+    margin-top: -69px;
+    overflow: hidden;
+    padding: 149px 0px 90px;
+    width: flex-grid(12);
+
+    .outer-wrapper {
+      @extend .animation-home-header-pop-up;
+      max-width: 1200px;
+      margin: 0 auto;
+      position: relative;
+      text-align: center;
+
+      &:hover {
+        .main-cta {
+          @include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
+        }
+      }
+    }
+
+    .inner-wrapper {
+      background: rgba(255,255,255, 0.9);
+      border: 1px solid rgb(100,100,100);
+      @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
+      @include inline-block;
+      padding: 30px 50px 30px;
+      position: relative;
+      text-align: center;
+      z-index: 1;
+    }
+
+    .title {
+      @include inline-block;
+      margin-right: 50px;
+      padding-right: 50px;
+      position: relative;
+      text-align: left;
+      vertical-align: middle;
+
+      &::before {
+        @extend .faded-vertical-divider;
+        content: "";
+        display: block;
+        height: 170px;
+        position: absolute;
+        right: 0px;
+        top: -20px;
+      }
+
+      &::after {
+        @extend .faded-vertical-divider-light;
+        content: "";
+        display: block;
+        height: 170px;
+        position: absolute;
+        right: -1px;
+        top: -20px;
+      }
+
+      h1 {
+        border-bottom: 1px solid rgb(200,200,200);
+        margin-bottom: 25px;
+        padding-bottom: 15px;
+        text-align: left;
+        text-shadow: 0 1px rgba(255,255,255, 0.6);
+      }
+
+      .main-cta {
+        @include clearfix;
+        float: left;
+        margin-right: flex-gutter();
+        @include transition(all, 0.15s, linear);
+        width: flex-grid(6);
+
+        > a.find-courses {
+          @include button(shiny, $blue);
+          @include box-sizing(border-box);
+          @include border-radius(3px);
+          display: block;
+          font: normal 1.2rem/1.6rem $sans-serif;
+          letter-spacing: 1px;
+          padding: 10px 0px;
+          text-transform: uppercase;
+          text-align: center;
+          width: flex-grid(12);
+
+          &:hover {
+            color: rgb(255,255,255);
+          }
+        }
+      }
+
+      .social-sharing {
+        @include box-sizing(border-box);
+        float: left;
+        height: 44px;
+        position: relative;
+        text-align: center;
+        width: flex-grid(6);
+
+        &:hover {
+          .sharing-message {
+            opacity: 1;
+            top: 56px;
+          }
+        }
+
+        .sharing-message {
+          @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
+                                                            rgba(0,0,0, 0.7) 100%));
+          border: 1px solid rgba(0,0,0, 0.5);
+          @include border-radius(4px);
+          @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
+          @include box-sizing(border-box);
+          color: rgb(255,255,255);
+          float: right;
+          font-family: $serif;
+          font-size: 0.9em;
+          font-style: italic;
+          left: 50%;
+          margin-left: -110px;
+          opacity: 0;
+          padding: 6px 10px;
+          position: absolute;
+          text-align: center;
+          @include transition(all, 0.15s, ease-out);
+          top: 65px;
+          width: 220px;
+
+          &:hover {
+            opacity: 0;
+          }
+        }
+
+        .share {
+          height: 44px;
+          @include inline-block;
+          margin-right: 10px;
+          opacity: 0.5;
+          @include transition(all, 0.15s, linear);
+          width: 44px;
+
+          &:hover {
+            opacity: 1;
+          }
+
+          img {
+            width: 100%;
+          }
+
+          &:last-child {
+            margin-right: 0px;
+          }
+        }
+      }
+    }
+
+    .media {
+      background: #fff;
+      border: 1px solid rgb(200,200,200);
+      @include box-sizing(border-box);
+      @include inline-block;
+      padding: 1px;
+      position: relative;
+      vertical-align: middle;
+      width: 210px;
+      z-index: 2;
+
+      .hero {
+        height: 125px;
+        overflow: hidden;
+        position: relative;
+
+        .play-intro {
+          @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
+          @include border-radius(4px);
+          @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
+          border: 2px solid rgba(255,255,255, 0.8);
+          height: 80px;
+          left: 50%;
+          margin-top: -40px;
+          margin-left: -40px;
+          position: absolute;
+          top: 50%;
+          @include transition(all, 0.15s, linear);
+          width: 80px;
+
+          &::after {
+            color: rgba(255,255,255, 0.8);
+            content: "\25B6";
+            display: block;
+            font: normal 2em/1em $sans-serif;
+            left: 50%;
+            margin-left: -11px;
+            margin-top: -16px;
+            position: absolute;
+            text-shadow: 0 -1px rgba(0,0,0, 0.8);
+            top: 50%;
+          }
+        }
+
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+
+      &:hover {
+        cursor: pointer;
+
+        .play-intro {
+          @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
+          @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.5));
+          border-color: rgba(255,255,255, 0.9);
+
+          &::after {
+            color: rgba(255,255,255, 1);
+          }
+        }
+      }
+    }
+  }
+
+  .highlighted-courses {
+    @include box-sizing(border-box);
+    margin-bottom: 40px;
+    position: relative;
+    width: flex-grid(12);
+    z-index: 1;
+
+    > h2 {
+      @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
+      border: 1px solid rgb(200,200,200);
+      @include border-radius(4px);
+      border-top-color: rgb(190,190,190);
+      @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2));
+      color: $lighter-base-font-color;
+      letter-spacing: 1px;
+      margin-bottom: 0px;
+      margin-top: -15px;
+      padding: 10px 10px 8px;
+      text-align: center;
+      text-transform: uppercase;
+      text-shadow: 0 1px rgba(255,255,255, 0.6);
+
+      .lowercase {
+        color: $lighter-base-font-color;
+        font-family: inherit;
+        font-size: inherit;
+        font-style: inherit;
+        text-transform: none;
+      }
+    }
+  }
+
+  .university-partners {
+    @include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
+                                                      rgba(245,245,245, 1) 50%,
+                                                      rgba(245,245,245, 0) 100%));
+    border-bottom: 1px solid rgb(210,210,210);
+    margin-bottom: 0px;
+    overflow: hidden;
+    position: relative;
+    width: flex-grid(12);
+
+    &::before {
+      @extend .faded-hr-divider-medium;
+      content: "";
+      display: block;
+    }
+
+    &::after {
+      @extend .faded-hr-divider-medium;
+      content: "";
+      display: block;
+    }
+
+    .partners {
+      margin: 0 auto;
+      padding: 20px 0px;
+      text-align: center;
+
+      li.partner {
+        @include inline-block;
+        padding: 0px 30px;
+        position: relative;
+        vertical-align: middle;
+
+        &::before {
+          @extend .faded-vertical-divider;
+          content: "";
+          display: block;
+          height: 80px;
+          right: 0px;
+          position: absolute;
+          top: -5px;
+          width: 1px;
+        }
+
+        &::after {
+          @extend .faded-vertical-divider-light;
+          content: "";
+          display: block;
+          height: 80px;
+          right: 1px;
+          position: absolute;
+          top: -5px;
+          width: 1px;
+        }
+
+        &:last-child {
+          &::before {
+            display: none;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+
+      a {
+        @include transition(all, 0.25s, ease-in-out);
+
+        &::before {
+          @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
+          content: "";
+          display: block;
+          height: 200px;
+          left: 50%;
+          margin-left: -100px;
+          margin-top: -100px;
+          opacity: 0;
+          width: 200px;
+          position: absolute;
+          @include transition(all, 0.25s, ease-in-out);
+          top: 50%;
+          z-index: 1;
+        }
+
+        .name {
+          bottom: -60px;
+          left: 0px;
+          position: absolute;
+          text-align: center;
+          @include transition(all, 0.25s, ease-in-out);
+          width: 100%;
+          z-index: 2;
+
+          > span {
+            color: $base-font-color;
+            font: 800 italic 1.4em/1.4em $sans-serif;
+            text-shadow: 0 1px rgba(255,255,255, 0.6);
+            @include transition(all, 0.15s, ease-in-out);
+
+            &:hover {
+              color: $lighter-base-font-color;
+            }
+          }
+        }
+
+        img {
+          max-width: 160px;
+          position: relative;
+          @include transition(all, 0.25s, ease-in-out);
+          vertical-align: middle;
+          z-index: 2;
+        }
+
+        &:hover {
+          &::before {
+            opacity: 1;
+          }
+
+          .name {
+            bottom: 20px;
+          }
+
+          img {
+            top: -100px;
+          }
+        }
+      }
+    }
+  }
+
+  .more-info {
+    border: 1px solid rgb(200,200,200);
+    margin-bottom: 80px;
+    width: flex-grid(12);
+
+    header {
+      @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
+      border-bottom: 1px solid rgb(200,200,200);
+      @include clearfix;
+      padding: 10px 20px 8px;
+
+      h2 {
+        float: left;
+        margin: 0px;
+        text-shadow: 0 1px rgba(255,255,255, 0.6);
+      }
+
+      a {
+        color: $lighter-base-font-color;
+        float: right;
+        font-style: italic;
+        font-family: $serif;
+        padding-top: 3px;
+        text-shadow: 0 1px rgba(255,255,255, 0.6);
+
+        &:hover {
+          color: $base-font-color;
+        }
+      }
+    }
+
+    .news {
+      @include box-sizing(border-box);
+      padding: 20px;
+      width: flex-grid(12);
+
+      .blog-posts {
+        @include clearfix;
+
+        > article {
+          border: 1px dotted transparent;
+          border-color: rgb(220,220,220);
+          @include box-sizing(border-box);
+          @include clearfix;
+          float: left;
+          margin-right: flex-gutter();
+          padding: 10px;
+          @include transition(all, 0.15s, linear);
+          width: flex-grid(4);
+
+          &:hover {
+            background: rgb(248,248,248);
+            border: 1px solid rgb(220,220,220);
+            @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.1));
+          }
+
+          &:last-child {
+            margin-right: 0px;
+          }
+
+          .post-graphics {
+            border: 1px solid rgb(190,190,190);
+            @include box-sizing(border-box);
+            display: block;
+            float: left;
+            height: 65px;
+            margin-right: flex-gutter();
+            overflow: hidden;
+            width: flex-grid(4);
+            vertical-align: top;
+
+            img {
+              min-height: 100%;
+              max-width: 100%;
+            }
+          }
+
+          .post-name {
+            float: left;
+            width: flex-grid(8);
+            vertical-align: top;
+
+            a {
+              color: $base-font-color;
+              font: 700 1em/1.2em $sans-serif;
+
+              &:hover {
+                color: $blue;
+                text-decoration: underline;
+              }
+            }
+
+            .post-date {
+              color: $lighter-base-font-color;
+              letter-spacing: 1px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

lms/static/sass/_index.scss

-.home {
-  margin: 0px 0px 100px;
-
-  > header {
-    //background: rgb(250,250,250);
-    @include background-image(url('/static/images/shot-5-large.jpg'));
-    background-size: cover;
-    border-bottom: 1px solid rgb(80,80,80);
-    @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.9), inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
-    @include clearfix;
-    margin-top: -69px;
-    min-height: 300px;
-    padding: 129px 0px 50px;
-    width: flex-grid(12);
-
-    .inner-wrapper {
-      max-width: 1200px;
-      margin: 0 auto;
-      position: relative;
-    }
-
-    h1 {
-      color: rgb(255,255,255);
-      text-align: center;
-    }
-
-    a {
-      @include button(shiny, $blue);
-      @include box-sizing(border-box);
-      @include border-radius(3px);
-      display: block;
-      font: italic 1.4rem/1.6rem $serif;
-      letter-spacing: 1px;
-      margin: 0 auto;
-      padding: 15px 0px;
-      text-transform: uppercase;
-      text-align: center;
-      -webkit-font-smoothing: antialiased;
-      width: flex-grid(3);
-
-      &:hover {
-        color: rgb(255,255,255);
-      }
-    }
-  }
-
-  .university-partners {
-    @include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
-                                                      rgba(245,245,245, 1) 50%,
-                                                      rgba(245,245,245, 0) 100%));
-    border-bottom: 1px solid rgb(210,210,210);
-    margin-bottom: 0px;
-    overflow: hidden;
-    position: relative;
-    width: flex-grid(12);
-
-    &::before {
-      @extend .faded-hr-divider-medium;
-      content: "";
-      display: block;
-    }
-
-    &::after {
-      @extend .faded-hr-divider-medium;
-      content: "";
-      display: block;
-    }
-
-    .partners {
-      font-size: 0em;
-      margin: 0 auto;
-      padding: 20px 0px;
-      text-align: center;
-
-      li.partner {
-        @include inline-block;
-        padding: 0px 30px;
-        position: relative;
-        vertical-align: middle;
-
-        &::before {
-          @extend .faded-vertical-divider;
-          content: "";
-          display: block;
-          height: 80px;
-          right: 0px;
-          position: absolute;
-          top: -5px;
-          width: 1px;
-        }
-
-        &::after {
-          @extend .faded-vertical-divider-light;
-          content: "";
-          display: block;
-          height: 80px;
-          right: 1px;
-          position: absolute;
-          top: -5px;
-          width: 1px;
-        }
-
-        &:last-child {
-          &::before {
-            display: none;
-          }
-
-          &::after {
-            display: none;
-          }
-        }
-      }
-
-      a {
-        @include transition(all, 0.25s, ease-in-out);
-
-        &::before {
-          @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
-          content: "";
-          display: block;
-          height: 200px;
-          left: 50%;
-          margin-left: -100px;
-          margin-top: -100px;
-          opacity: 0;
-          width: 200px;
-          position: absolute;
-          @include transition(all, 0.25s, ease-in-out);
-          top: 50%;
-          z-index: 1;
-        }
-
-        .name {
-          left: 0px;
-          position: absolute;
-          text-align: center;
-          bottom: -60px;
-          @include transition(all, 0.25s, ease-in-out);
-          width: 100%;
-          z-index: 2;
-
-          span {
-            color: $base-font-color;
-            font: 800 italic 2rem/2.2rem $sans-serif;
-            text-shadow: 0 1px rgba(255,255,255, 0.6);
-            @include transition(all, 0.15s, ease-in-out);
-
-            &:hover {
-              color: $lighter-base-font-color;
-            }
-          }
-        }
-
-        img {
-          max-width: 160px;
-          position: relative;
-          @include transition(all, 0.25s, ease-in-out);
-          vertical-align: middle;
-          z-index: 2;
-        }
-
-        &:hover {
-          &::before {
-            opacity: 1;
-          }
-
-          .name {
-            bottom: 20px;
-          }
-
-          img {
-            top: -100px;
-          }
-        }
-      }
-    }
-  }
-
-  .highlighted-courses {
-    border-bottom: 1px solid rgb(210,210,210);
-    @include box-sizing(border-box);
-    margin-bottom: 60px;
-    width: flex-grid(12);
-
-    > h2 {
-      @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
-      border: 1px solid rgb(200,200,200);
-      @include border-radius(4px);
-      border-top-color: rgb(190,190,190);
-      @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2));
-      color: $lighter-base-font-color;
-      letter-spacing: 1px;
-      margin-bottom: 0px;
-      margin-top: -15px;
-      padding: 15px 10px;
-      text-align: center;
-      text-transform: uppercase;
-      text-shadow: 0 1px rgba(255,255,255, 0.6);
-
-      .lowercase {
-        text-transform: none;
-      }
-    }
-  }
-
-  .more-info {
-    margin-bottom: 60px;
-    width: flex-grid(12);
-
-    h2 {
-      color: $lighter-base-font-color;
-      font: normal 1.4rem/1.8rem $serif;
-      letter-spacing: 1px;
-      margin-bottom: 20px;
-    }
-
-    .news {
-      font-size: 0em;
-      width: flex-grid(12);
-
-      > article {
-        background: rgb(240,240,240);
-        @include inline-block;
-        height: 150px;
-        margin-right: flex-gutter();
-        width: flex-grid(3);
-
-        &:last-child {
-          margin-right: 0px;
-        }
-      }
-    }
-  }
-
-  .social-media {
-    background: rgb(245,245,245);
-    border: 1px solid rgb(220,220,220);
-    @include border-radius(4px);
-    @include box-shadow(inset 0 1px 2px 0 rgba(0,0,0, 0.1));
-    height: 200px;
-    width: flex-grid(12);
-
-    h2 {
-      color: $lighter-base-font-color;
-      font: normal 1.6rem/2rem $sans-serif;
-      padding-top: 80px;
-      text-align: center;
-    }
-  }
-}

lms/static/sass/_jobs.scss

@@ -7,7 +7,7 @@
 
   .message {
     @include clearfix;
-    margin-bottom: 100px;
+    margin-bottom: 80px;
     position: relative;
 
     .photo {
@@ -30,49 +30,35 @@
   .jobs-wrapper {
     @include clearfix;
     float: left;
+    padding-top: 80px;
     width: flex-grid(12);
 
     > h2 {
-      border-bottom: 1px solid rgb(220,220,220);
+      display: none;
       margin-bottom: 60px;
       padding-bottom: 20px;
     }
 
     .jobs-sidebar {
       @include box-sizing(border-box);
-      border-left: 1px solid rgb(220,220,220);
+      border: 1px solid rgb(220,220,220);
       float: left;
-      padding-bottom: 20px;
-      padding-left: 20px;
+      padding: 20px;
       width: flex-grid(3);
 
       nav {
         margin-bottom: 40px;
 
-        ol {
-          @include clearfix;
-
-          li {
-            float: left;
-            margin-right: flex-gutter();
-            width: flex-grid(12);
-
-            &:nth-child(4n) {
-              margin-right: 0px;
-            }
-
         a {
           display: block;
           letter-spacing: 1px;
-              margin-left: -20px;
-              padding: 10px 0 10px 20px;
-              position: relative;
-              text-transform: uppercase;
+          margin: 0px -20px;
+          padding: 12px 0px 12px 20px;
+          text-align: left;
 
           &:hover {
             background: rgb(245,245,245);
-              }
-            }
+            text-decoration: none;
           }
         }
       }
@@ -105,7 +91,7 @@
 
         h3 {
           font-family: $sans-serif;
-          font-weight: bold;
+          font-weight: 700;
           margin-bottom: 15px;
         }
       }

lms/static/sass/_press_release.scss

+.pressrelease {
+  background: rgb(250,250,250);
+
+  .container {
+    padding: 60px 0 120px;
+
+    h1 + hr {
+      margin-bottom: 60px;
+    }
+
+    h3 + hr {
+      margin-bottom: 60px;
+    }
+
+    h3 {
+      color: $lighter-base-font-color;
+      font-style: italic;
+      margin-bottom: 30px;
+      text-align: center;
+    }
+
+    > article {
+      border: 1px solid rgb(220,220,220);
+      @include border-radius(10px);
+      @include box-sizing(border-box);
+      @include box-shadow(0 2px 16px 0 rgba(0,0,0, 0.1));
+      margin: 0 auto;
+      padding: 80px 80px 40px 80px;
+      width: flex-grid(10);
+
+      .footer {
+        hr {
+          margin: 80px 0px 40px;
+        }
+      }
+    }
+
+    p + h2 {
+      margin-top: 60px;
+    }
+
+    h2 + p {
+      margin-top: 30px;
+    }
+  }
+}

lms/static/sass/application.scss

 @import 'bourbon/bourbon';
-@import 'reset';
-@import 'font_face';
-@import 'base';
-@import 'base_mixins';
-@import 'base_extends';
-@import 'base_animations';
+@import 'base_styles/reset';
+@import 'base_styles/font_face';
+@import 'base_styles/base';
+@import 'base_styles/base_mixins';
+@import 'base_styles/base_extends';
+@import 'base_styles/base_animations';
 
 @import 'sass_old/base/variables';
-//@import 'sass_old/base/base';
 @import 'sass_old/base/extends';
-//@import 'sass_old/base/font-face';
 @import 'sass_old/base/functions';
-//@import 'sass_old/base/reset';
 
-@import 'shared_forms';
-@import 'shared_footer';
-@import 'shared_header';
-@import 'shared_list_of_courses';
-@import 'shared_course_filter';
-@import 'shared_modal';
+@import 'shared_styles/shared_forms';
+@import 'shared_styles/shared_footer';
+@import 'shared_styles/shared_header';
+@import 'shared_styles/shared_list_of_courses';
+@import 'shared_styles/shared_course_filter';
+@import 'shared_styles/shared_modal';
 
-@import 'index';
+@import 'home';
 @import 'dashboard';
-@import 'course';
-@import 'find_courses';
-@import 'course_info';
+@import 'course_object';
+@import 'courses';
+@import 'course_about';
 @import 'jobs';
-@import 'about';
+@import 'about_pages';
+@import 'press_release';
 
 @import 'sass_old/courseware/courseware';
 @import 'sass_old/courseware/sequence-nav';
 @import 'sass_old/courseware/sidebar';
 @import 'sass_old/courseware/video';
 @import 'sass_old/courseware/amplifier';
+@import 'sass_old/courseware/problems';

lms/static/sass/_base.scss → lms/static/sass/base_styles/_base.scss

@@ -13,50 +13,62 @@ $lighter-base-font-color: rgb(160,160,160);
 
 $blue: rgb(29,157,217);
 $pink: rgb(182,37,104);
+$yellow: rgb(255, 252, 221);
 
 html, body {
   background: rgb(250,250,250);
-  font-size: 75%;
+  //background: rgb(77, 82, 99);
+  font-family: $sans-serif;
+  font-size: 1em;
+  line-height: 1em;
 }
 
 h1, h2, h3, h4, h5, h6 {
   color: $base-font-color;
-  font: normal 1.4rem/2rem $serif;
+  font: normal 1.2em/1.2em $serif;
   margin: 0px;
 }
 
 h1 {
-  color: $lighter-base-font-color;
-  font: 300 2.4rem/3rem $sans-serif;
+  color: $base-font-color;
+  font: normal 2em/1.4em $sans-serif;
   letter-spacing: 1px;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
   text-align: center;
   text-transform: uppercase;
 }
 
 h2 {
   color: $lighter-base-font-color;
-  font: normal 1.4rem/2rem $serif;
+  font: normal 1.2em/1.2em $serif;
   letter-spacing: 1px;
   margin-bottom: 15px;
   text-transform: uppercase;
   -webkit-font-smoothing: antialiased;
 }
 
+p + h2, ul + h2, ol + h2 {
+  margin-top: 40px;
+}
+
 p {
   color: $base-font-color;
-  font: normal 1.3rem/2rem $serif;
+  font: normal 1em/1.6em $serif;
   margin: 0px;
 }
 
-p + p {
+span {
+  font: normal 1em/1.6em $sans-serif;
+}
+
+p + p, ul + p, ol + p {
   margin-top: 20px;
 }
 
 p {
   a:link, a:visited {
     color: $blue;
-    font: normal 1.3rem/2rem $serif;
+    font: normal 1em/1em $serif;
     text-decoration: none;
     @include transition(all, 0.1s, linear);
 
@@ -69,12 +81,12 @@ p {
 
 a:link, a:visited {
   color: $blue;
-  font: normal 1.2rem/2rem $sans-serif;
+  font: normal 1em/1em $sans-serif;
   text-decoration: none;
   @include transition(all, 0.1s, linear);
 
   &:hover {
-    color: $base-font-color;
+    text-decoration: underline;
   }
 }
 
@@ -90,3 +102,42 @@ a:link, a:visited {
   max-width: 1200px;
   width: flex-grid(12);
 }
+
+.static-container {
+  @include clearfix;
+  margin: 0 auto 0;
+  max-width: 1200px;
+  padding: 60px 0px 120px;
+  width: flex-grid(12);
+
+  .inner-wrapper {
+    margin: 0 auto 0;
+    width: flex-grid(10);
+  }
+
+  ol, ul {
+    list-style: disc;
+
+    li {
+      color: $base-font-color;
+      font: normal 1em/1.4em $serif;
+      margin: 0px;
+    }
+  }
+
+  h1 {
+    margin-bottom: 30px;
+  }
+
+  h1 + hr {
+    margin-bottom: 60px;
+  }
+
+  p + h2, ul + h2, ol + h2 {
+    margin-top: 40px;
+  }
+
+  ul + p, ol + p {
+    margin-top: 20px;
+  }
+}

lms/static/sass/_base_animations.scss → lms/static/sass/base_styles/_base_animations.scss

+// home-header-pop-up animation
+//************************************************************************//
+
+.animation-home-header-pop-up {
+  @include animation(home-header-pop-up 1.15s ease-in-out);
+  @include animation-fill-mode(both);
+  @include animation-delay(1s);
+}
+
+@mixin home-header-pop-up-keyframes {
+  0% {
+    opacity: 0;
+    top: 300px;
+    //@include transform(scale(0.9));
+  }
+  45% {
+    opacity: 1;
+  }
+  65% {
+    top: -40px;
+    //@include transform(scale(1));
+  }
+  85% {
+    top: 10px;
+  }
+  100% {
+    top: 0px;
+  }
+}
+
+@-webkit-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; }
+   @-moz-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; }
+        @keyframes home-header-pop-up { @include home-header-pop-up-keyframes; }
+
 // title appear animation
 //************************************************************************//
 

lms/static/sass/sass_old/base/_extends.scss

@@ -207,7 +207,6 @@ h1.top-header {
   font-size: 12px;
   // height:46px;
   line-height: 46px;
-  margin: (-$body-line-height) (-$body-line-height) $body-line-height;
   text-shadow: 0 1px 0 #fff;
 
   @media print {
@@ -215,6 +214,7 @@ h1.top-header {
   }
 
   a {
+    line-height: 46px;
     border-bottom: 0;
     color: darken($cream, 80%);
 

lms/static/sass/_shared_course_filter.scss → lms/static/sass/shared_styles/_shared_course_filter.scss

@@ -34,11 +34,10 @@
         @include box-sizing(border-box);
         @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6));
         border: 1px solid rgb(200,200,200);
-        color: $lighter-base-font-color;
+        color: $base-font-color;
         cursor: pointer;
-        font: normal 1.2rem/1.8rem $sans-serif;
         height: 36px;
-        padding: 6px;
+        padding: 9px;
         position: relative;
         text-align: center;
         text-shadow: 0 1px rgba(255,255,255, 0.8);
@@ -51,7 +50,7 @@
         @include border-radius(0px 4px 4px 4px);
         border: 1px solid rgb(200,200,200);
         @include box-shadow(0 2px 15px 0 rgba(0,0,0, 0.2));
-        padding: 10px;
+        padding: 20px 0px 5px 20px;
         position: absolute;
         visibility: hidden;
         width: 200px;
@@ -59,9 +58,7 @@
 
         li {
           list-style: none;
-
-          a {
-          }
+          margin-bottom: 15px;
         }
       }
 
@@ -70,7 +67,7 @@
           background: rgb(255,255,255);
           @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255)));
           @include border-radius(4px 4px 0px 0px);
-          border-bottom: none;
+          border-bottom: 1px dotted rgb(200,200,200);
           @include box-shadow(0 2px 0 -1px rgb(255,255,255));
           color: $base-font-color;
           height: 40px;
@@ -87,13 +84,16 @@
 
       input[type="text"] {
         @include border-radius(3px 0px 0px 3px);
+        float: left;
         height: 36px;
         width: 200px;
       }
 
       input[type="submit"] {
         @include border-radius(0px 3px 3px 0px);
+        float: left;
         height: 36px;
+        padding: 2px 20px;
       }
     }
   }

lms/static/sass/_shared_footer.scss → lms/static/sass/shared_styles/_shared_footer.scss

@@ -3,7 +3,6 @@ footer {
   border-top: 1px solid rgb(200,200,200);
   @include box-shadow(inset 0 1px 3px 0 rgba(0,0,0, 0.1));
   margin: 0 auto;
-  padding: 0 0 40px;
   width: flex-grid(12);
 
   &.fixed-bottom {
@@ -14,34 +13,28 @@ footer {
 
   nav {
     @include box-sizing(border-box);
-    @include clearfix;
     max-width: 1200px;
     margin: 0 auto;
-    padding: 20px 10px 0;
+    padding: 30px 10px 0;
     width: flex-grid(12);
 
-    .copyright {
-      float: left;
-      padding-top: 2px;
+    .top {
+      border-bottom: 1px solid rgb(200,200,200);
+      @include clearfix;
+      padding-bottom: 30px;
+      width: flex-grid(12);
+      text-align: center;
 
-      a.logo {
-        @include background-image(url('/static/images/logo.png'));
-        background-position: 0 -24px;
-        background-repeat: no-repeat;
+      ol {
+        float: right;
+
+        li {
           @include inline-block;
-        float: left;
-        height: 23px;
-        margin-right: 15px;
-        margin-top: 2px;
-        padding-right: 15px;
+          list-style: none;
+          padding: 0px 15px;
           position: relative;
-        width: 47px;
           vertical-align: middle;
 
-        &:hover {
-          background-position: 0 0;
-        }
-
           &::after {
             @extend .faded-vertical-divider;
             content: "";
@@ -49,39 +42,39 @@ footer {
             height: 30px;
             right: 0px;
             position: absolute;
-          top: -2px;
+            top: -5px;
             width: 1px;
           }
-      }
 
-      p {
-        color: $lighter-base-font-color;
-        font: italic 1.2rem/1.6rem $serif;
-        @include inline-block;
-        margin: 0 auto;
-        padding-top: 4px;
-        text-align: center;
-        vertical-align: middle;
-
-        a {
+          a:link, a:visited {
             color: $lighter-base-font-color;
-          font: italic 1.2rem/1.6rem $serif;
-          margin-left: 5px;
+            letter-spacing: 1px;
+            padding: 6px 0px;
           }
         }
       }
 
-    ol {
-      float: right;
-      font-size: 0em;
+      .primary {
+        @include clearfix;
+        float: left;
 
-      li {
+        a.logo {
+          @include background-image(url('/static/images/logo.png'));
+          background-position: 0 -24px;
+          background-repeat: no-repeat;
           @include inline-block;
-        list-style: none;
-        padding: 0px 15px;
+          height: 22px;
+          margin-right: 15px;
+          margin-top: 2px;
+          padding-right: 15px;
           position: relative;
+          width: 47px;
           vertical-align: middle;
 
+          &:hover {
+            background-position: 0 0;
+          }
+
           &::after {
             @extend .faded-vertical-divider;
             content: "";
@@ -89,32 +82,97 @@ footer {
             height: 30px;
             right: 0px;
             position: absolute;
-          top: -5px;
+            top: -3px;
             width: 1px;
           }
+        }
 
-        a:link, a:visited {
+        a {
           color: $lighter-base-font-color;
-          font: 300 1.2rem/1.6rem $sans-serif;
+          @include inline-block;
           letter-spacing: 1px;
-          padding: 6px 0px;
+          margin-right: 20px;
+          padding-top: 2px;
+          vertical-align: middle;
+
+          &:hover {
+            color: $base-font-color;
+            text-decoration: none;
+          }
+        }
       }
 
+      .social {
+        float: right;
+
         &.social {
           border: none;
           margin: 0 0 0 5px;
           padding: 0;
 
-          &::after {
-            display: none;
-          }
-
           a {
+            opacity: 0.7;
             padding: 0 0 0 10px;
             @include transition(all, 0.1s, linear);
+
             &:hover {
-              opacity: 0.7;
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+
+    .bottom {
+      @include clearfix;
+      opacity: 0.8;
+      padding: 10px 0px 30px;
+      @include transition(all, 0.15s, linear);
+      width: flex-grid(12);
+
+      &:hover {
+        opacity: 1;
       }
+
+      .copyright {
+        float: left;
+
+        p {
+          color: $lighter-base-font-color;
+          font-style: italic;
+          @include inline-block;
+          margin: 0 auto;
+          padding-top: 1px;
+          text-align: center;
+          vertical-align: middle;
+
+          a {
+            color: $lighter-base-font-color;
+            font-style: italic;
+            margin-left: 5px;
+
+            &:hover {
+              color: $blue;
+            }
+          }
+        }
+      }
+
+      .secondary {
+        float: right;
+        text-align: left;
+
+        a {
+          color: $lighter-base-font-color;
+          font-family: $serif;
+          font-style: italic;
+          letter-spacing: 1px;
+          line-height: 1.6em;
+          margin-left: 20px;
+          text-transform: lowercase;
+
+          &:hover {
+            color: $blue;
           }
         }
       }

lms/static/sass/_shared_forms.scss → lms/static/sass/shared_styles/_shared_forms.scss

@@ -3,7 +3,7 @@ form {
 
   label {
     color: $base-font-color;
-    font: italic 300 1.2rem/1.6rem $serif;
+    font: italic 300 1rem/1.6rem $serif;
     margin-bottom: 5px;
     text-shadow: 0 1px rgba(255,255,255, 0.4);
     -webkit-font-smoothing: antialiased;
@@ -17,9 +17,8 @@ form {
     @include border-radius(3px);
     @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
     @include box-sizing(border-box);
-    font: italic 300 1.2rem/1.6rem $serif;
+    font: italic 300 1rem/1.6rem $serif;
     height: 35px;
-    @include inline-block;
     padding: 5px 12px;
     vertical-align: top;
     -webkit-font-smoothing: antialiased;
@@ -38,9 +37,8 @@ form {
   input[type="submit"] {
     @include button(shiny, $blue);
     @include border-radius(3px);
-    font: 300 1.2rem/1.6rem $sans-serif;
+    font: normal 1.2rem/1.6rem $sans-serif;
     height: 35px;
-    @include inline-block;
     letter-spacing: 1px;
     text-transform: uppercase;
     vertical-align: top;

lms/static/sass/_shared_header.scss → lms/static/sass/shared_styles/_shared_header.scss

 header.global {
-  //background: rgb(255,255,255);
-  background: rgba(245,245,245, 0.9);
   border-bottom: 1px solid rgb(190,190,190);
   @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
-  //@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgba(235,235,235, 1)));
-  //@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgba(228,239,243, 1)));
-  //@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgba(240,240,240, 0.9)));
-  //border-color: rgb(177, 210, 222);
+  @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)));
   height: 68px;
   position: relative;
   width: 100%;
@@ -24,7 +19,7 @@ header.global {
 
   h1.logo {
     float: left;
-    margin: 9px 15px 0px 0px;
+    margin: 6px 15px 0px 0px;
     padding-right: 20px;
     position: relative;
 
@@ -35,7 +30,7 @@ header.global {
       height: 50px;
       position: absolute;
       right: 1px;
-      top: -12px;
+      top: -8px;
       width: 1px;
     }
 
@@ -51,12 +46,12 @@ header.global {
     }
 
     a {
-      @include background-image(url('/static/images/logo.png'));
+      @include background-image(url('/static/images/header-logo.png'));
       background-position: 0 0;
       background-repeat: no-repeat;
       display: block;
-      height: 23px;
-      width: 47px;
+      height: 31px;
+      width: 64px;
     }
   }
 
@@ -90,12 +85,10 @@ header.global {
         color: $lighter-base-font-color;
         color: $blue;
         display: block;
-        //font: italic 1.2rem/1.4rem $serif;
-        font: normal 1.2rem/1.4rem $sans-serif;
+        font-family: $sans-serif;
         @include inline-block;
         margin: 0px 30px 0px 0px;
         text-decoration: none;
-        //text-transform: lowercase;
         text-transform: uppercase;
         text-shadow: 0 1px rgba(255,255,255, 0.6);
 
@@ -121,8 +114,9 @@ header.global {
         @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
         color: $base-font-color;
         display: inline-block;
-        font: normal 1.2rem/1.4rem $sans-serif;
+        font-family: $sans-serif;
         @include inline-block;
+        line-height: 1em;
         margin: 1px 5px;
         padding: 10px 12px;
         text-decoration: none;
@@ -147,12 +141,6 @@ header.global {
         position: relative;
         text-transform: none;
 
-        @media screen and (max-width: 768px) {
-          font-size: 0em;
-          padding: 10px 0px;
-          width: 38px;
-        }
-
         .avatar {
           background: rgb(220,220,220);
           @include border-radius(3px);
@@ -239,8 +227,9 @@ header.global {
             @include border-radius(3px);
             color: rgba(255,255,255, 0.9);
             display: block;
-            font: italic 1.2rem/1.4rem $serif;
+            font-family: $serif;
             height: auto;
+            line-height: 1em;
             margin: 5px 0px;
             overflow: hidden;
             padding: 3px 5px 4px;

lms/static/sass/_shared_list_of_courses.scss → lms/static/sass/shared_styles/_shared_list_of_courses.scss

@@ -10,7 +10,6 @@
       @include box-sizing(border-box);
       @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9));
       float: left;
-      font-size: 0em;
       margin-right: flex-gutter();
       margin-bottom: 30px;
       position: relative;
@@ -34,12 +33,8 @@
 
         p {
           color: rgb(255,255,255);
-          font: 300 1.2rem/1.4rem $sans-serif;
-          padding: 5px 12px;
-
-          &.university {
-            float: left;
-          }
+          line-height: 1.2em;
+          padding: 4px 12px 5px;
         }
       }
 
@@ -74,8 +69,8 @@
 
             h2 {
               color: $base-font-color;
-              font: 800 1.2rem/1.6rem $sans-serif;
-              padding-top: 10px;
+              margin-bottom: 0px;
+              padding-top: 9px;
               text-shadow: 0 1px rgba(255,255,255, 0.6);
               text-overflow: ellipsis;
               white-space: nowrap;
@@ -87,7 +82,7 @@
             @include box-sizing(border-box);
             color: $base-font-color;
             display: block;
-            font: bold 2rem/2.2rem $sans-serif;
+            font: bold 1.6em/1.2em $sans-serif;
             height: 100%;
             opacity: 0.6;
             padding-top: 10px;
@@ -102,7 +97,7 @@
           &:hover {
             @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
 
-            h2, p, .info-link {
+            h2, .info-link {
               color: $blue;
               opacity: 1;
             }
@@ -139,7 +134,7 @@
           @include box-sizing(border-box);
           height: 100px;
           overflow: hidden;
-          padding: 10px 10px 15px 10px;
+          padding: 10px 10px 12px 10px;
           position: relative;
           width: 100%;
 
@@ -152,20 +147,14 @@
 
         .bottom {
           @include box-sizing(border-box);
-          @include clearfix;
-          padding: 6px 10px;
+          padding: 0px 10px 10px 10px;
           width: 100%;
 
-          > p, a {
+
+          .university {
+            border-right: 1px solid rgb(200,200,200);
             color: $lighter-base-font-color;
-            font: 300 1.2rem/1.4rem $sans-serif;
             letter-spacing: 1px;
-            padding: 0;
-
-            &.university {
-              border-right: 1px solid $lighter-base-font-color;
-              display: block;
-              float: left;
             margin-right: 10px;
             padding-right: 10px;
 
@@ -174,10 +163,9 @@
             }
           }
 
-            &.dates {
-              float: left;
-              margin-top: 0px;
-            }
+          .start-date  {
+            color: $lighter-base-font-color;
+            letter-spacing: 1px;
           }
         }
       }

lms/static/sass/_shared_modal.scss → lms/static/sass/shared_styles/_shared_modal.scss

-.modal-overlay {
-  //background: rgba(255,255,255, 0.7);
+#lean_overlay {
+    background: transparent;
     @include background-image(radial-gradient(50% 30%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8)));
-  bottom: 0;
-  content: "";
     display: none;
-  left: 0;
+    height:100%;
+    left: 0px;
     position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 5;
-
-  &.visible {
-    display: block;
-  }
+    top: 0px;
+    width:100%;
+    z-index:100;
 }
 
 .modal {
@@ -23,40 +18,39 @@
   color: #fff;
   display: none;
   left: 50%;
-  margin-left: -(grid-width(6)) / 2;
   padding: 8px;
   position: absolute;
-  top: 170px;
   width: grid-width(6);
-  z-index: 10;
-
-  &::before {
-    @include background-image(radial-gradient(50% 30%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8)));
-    bottom: 0;
-    content: "";
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 1;
-  }
-
-  &.visible {
-    display: block;
-  }
+  z-index: 12;
 
   &.video-modal {
     left: 50%;
-    margin-left: -281px;
-    width: 562px;
+    padding: 10px;
+    width: 582px;
 
     .inner-wrapper {
+      background: #000;
+      @include box-shadow(none);
       height: 315px;
-      padding: 0px;
+      padding: 10px;
       width: 560px;
     }
   }
 
+  &.home-page-video-modal {
+    left: 50%;
+    padding: 10px;
+    width: 662px;
+
+    .inner-wrapper {
+      background: #000;
+      @include box-shadow(none);
+      height: 360px;
+      padding: 10px;
+      width: 640px;
+    }
+  }
+
   .inner-wrapper {
     background: rgb(245,245,245);
     @include border-radius(0px);
@@ -104,21 +98,33 @@
         }
       }
 
-      h3 {
-        color: $lighter-base-font-color;
-        font: normal 1.4rem/1.8rem $serif;
-        letter-spacing: 1px;
-        padding-bottom: 20px;
+      h2 {
         position: relative;
         text-align: center;
         text-shadow: 0 1px rgba(255,255,255, 0.4);
-        text-transform: uppercase;
-        vertical-align: middle;
-        -webkit-font-smoothing: antialiased;
         z-index: 2;
       }
     }
 
+    #enroll_error, #login_error {
+      background: rgb(253, 87, 87);
+      border: 1px solid rgb(202, 17, 17);
+      color: rgb(143, 14, 14);
+      display: none;
+      margin-bottom: 20px;
+      padding: 12px;
+    }
+
+    //#enroll {
+      //padding: 0 40px;
+
+      //h1 {
+        //font: normal 1em/1.6em $sans-serif;
+        //margin-bottom: 10px;
+        //text-align: left;
+      //}
+    //}
+
     form {
       margin-bottom: 12px;
       padding: 0px 40px;
@@ -159,8 +165,8 @@
         }
 
         a {
-          font: italic normal 1.2rem/1.6rem $serif;
-          text-decoration: underline;
+          font-family: $serif;
+          font-style: italic;
         }
       }
 
@@ -171,7 +177,7 @@
 
         p {
           color: $lighter-base-font-color;
-          font: 300 1.2rem/1.6rem $sans-serif;
+          font-family: $sans-serif;
         }
 
         hr {
@@ -227,13 +233,19 @@
 
       p {
         color: $lighter-base-font-color;
-        font: italic 1.2rem/1.6rem $serif;
+        font-style: italic;
         text-align: center;
-        -webkit-font-smoothing: antialiased;
+
+        span {
+          color: $lighter-base-font-color;
+          font-family: $serif;
+          font-style: italic;
+        }
 
         a {
           color: $lighter-base-font-color;
-          font: italic 1.2rem/1.6rem $serif;
+          font-family: $serif;
+          font-style: italic;
           text-decoration: underline;
 
           &:hover {

lms/templates/course.html

@@ -23,7 +23,7 @@
       </div>
       <div class="bottom">
         <a href="#" class="university">${course.get_about_section('university')}</a>
-        <p class="dates"><span class="start">7/23/12</span></p>
+        <span class="start-date">7/23/12</span>
       </div>
     </section>
   </div>

lms/templates/courses.html

@@ -9,14 +9,14 @@
         <div class="logo">
           <img src="${static.url('images/edx_bw.png')}" />
         </div>
-        <h2>Explore courses from universities around the world.</h2>
+        <h2>Explore courses from leading universities.</h2>
       </hgroup>
     </div>
   </header>
 
   <section class="container">
     ## I'm removing this for now since we aren't using it for the fall.
-    ## <%include file="course_filter.html" />
+    <%include file="course_filter.html" />
     <section class="courses">
       %for course in courses:
         <%include file="course.html" args="course=course" />

lms/templates/create_account.html

-<!-- TODO: Add pattern field to username. See HTML5 cookbook, page 84 for details-->
-<div name="enroll_form" id="enroll_form">
-
-  <h1>Enroll in edx4edx</h1>
-  <!--[if lte IE 8]>
-  <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">
- </p>
-  <form name="enroll" id="enroll_form"  method="get">
-    <fieldset><% if 'error' in locals(): e = error %>
-
-    <div id="enroll_error" name="enroll_error"></div>
-
-    <ol>
-
-      <li class="email">
-        <label>E-mail*</label>
-        <input name="email" id="ca_email" type="email" />
-      </li>
-
-      <li class="password">
-        <label>Password*</label>
-        <input name="password" id="ca_password" type="password"  />
-      </li>
-
-      <li class="username">
-        <label>Username (public)* <span class="ui-icon ui-icon-help" id="spinner_nick" style="display:inline-block;"></span></label>
-        <input name="username" id="ca_username" type="text"  /> 
-
-        <div id="sregion_nick" class="tip">Nickname you'd like to use on forums.</div>
-      </li>
-
-      <li class="full-name">
-        <label>Full name*<span class="ui-icon ui-icon-help" id="spinner_name" style="display:inline-block;"></span></label>
-        <input name="name" id="ca_name" type="text"  />
-
-        <div class="tip" id="sregion_name">If you successfully complete the course, you will receive an electronic certificate of accomplishment from <i>edX</i> with this name on it.</div>
-      </li>
-
-      <li class="location">
-        <label>Location <span class="ui-icon ui-icon-help" id="spinner_location" style="display:inline-block;"></span></label>
-        <input name="location" id="ca_location" type="text" />
-
-        <div id="sregion_location" class="tip">Preferred format is city, state, country (so for us, &quot;Cambridge, Massachusetts, USA&quot;).</div>
-      </li>
-
-      <li class="language">
-        <label>Preferred Language <span class="ui-icon ui-icon-help" id="spinner_language" style="display:inline-block;"></span></label>
-
-        <input name="language" id="ca_language" type="text" />
-
-        <div id="sregion_language" class="tip">Please let us know what language you'd most like to see the content in (even if not your native). We're working on translations and internationalization.</div>
-      </li>
-
-      <li class="terms">
-        <label> <input name="terms_of_service" id="cb_terms_of_service" type="checkbox" value="terms_of_service"  />I agree to the <a href="/t/tos.html">Terms of Service</a>*</label>
-      </li>
-
-      <li class="honor-code">
-        <label>
-          <input name="honor_code" id="cb_honor_code" type="checkbox" value="honor_code"  />I agree to the <a href="/t/honor.html">Honor Code</a>, summarized as:*</label>
-        <ul>
-	  <li>Complete all mid-terms and final exams with only my own work.</li>
-          <li>Maintain only one account, and not share the username or password.</li>
-          <li>Not engage in any activities that would dishonestly improve my results, or improve or hurt those of others.</li>
-          <li>Not post answers to problems that are being used to assess student performance.</li>
-        </ul>
-      </li>
-
-    </ol>
-    <input name="create_account_button" id="create_account_button" type="submit" value="Create Account">
-  </fieldset>  </form>
-</div>

lms/templates/dashboard.html

@@ -31,66 +31,20 @@
 
     % if len(courses) > 0:
       % for course in courses:
-        <article class="my-course">
-          <a href="${reverse('info', args=[course.id])}">
-            <div class="cover">
-              <div class="shade"></div>
-              <div class="arrow"></div>
-              <img src="${static.url('images/circuits.jpeg')}" />
-            </div>
-            <section class="info">
-              <hgroup>
-                % for instructor in course.instructors:
-                  <h3>${course.get_about_section('university')}</h3>
-                % endfor
-                <h2>${course.get_about_section("title")}</h2>
-              </hgroup>
-              <section class="meta">
-                <div class="complete">
-                  <p>60% complete</p>
-                </div>
-                <div class="progress">
-                  <div class="meter">
-                    <div class="meter-fill"></div>
-                  </div>
-                </div>
-                <div class="end-date">
-                  <p>End date: <time>6/10/12</time></p>
-                </div>
-              </section>
-            </section>
-          </a>
-        </article>
-      % endfor
-    % else:
-      <section class="empty-dashboard-message">
-        <p>Looks like you aren't registered for any courses. You should take a minute and <a href="${reverse('courses')}" class="find-courses">Find some courses!</a></p>
-      </section>
-    % endif
 
         <article class="my-course">
-      <a href="/info" class="cover" style="background-image: url('static/images/courses/python.png')">
+          <a href="${reverse('info', args=[course.id])}" class="cover" style="background-image: url('static/images/courses/python.png')">
             <div class="shade"></div>
             <div class="arrow"></div>
           </a>
           <section class="info">
             <hgroup>
-          <h3><a href="">HarvardX</a></h3>
-          <h2><a href="/info">CS 102 Python</a></h2>
+              <a href="#" class="university">${course.get_about_section('university')}</a>
+              <h3><a href="${reverse('info', args=[course.id])}">${course.get_about_section("title")}</a></h3>
             </hgroup>
+            <section class="course-status">
+              <p>Class Starts - <span>9/2/2012</span></div>
             </section>
-    </article>
-
-    <article class="my-course">
-      <a href="/info" class="cover" style="background-image: url('static/images/courses/python.png')">
-        <div class="shade"></div>
-        <div class="arrow"></div>
-      </a>
-      <section class="info">
-        <hgroup>
-          <h3><a href="">HarvardX</a></h3>
-          <h2><a href="/info">CS 102 Python</a></h2>
-        </hgroup>
             <section class="meta">
               <div src="" class="course-work-icon"></div>
               <div class="progress">
@@ -104,6 +58,14 @@
             </section>
           </section>
         </article>
+
+      % endfor
+    % else:
+      <section class="empty-dashboard-message">
+        <p>Looks like you haven't registered for any courses yet.</p>
+        <a href="${reverse('courses')}">Find courses now!</a>
       </section>
+    % endif
 
+  </section>
 </section>

lms/templates/emails/confirm_email_change.txt

+<%! from django.core.urlresolvers import reverse %>
 This is to confirm that you changed the e-mail associated with MITx
 from ${old_email} to ${new_email}. If you did not make this request,
 please contact the course staff immediately. Contact information is
 listed at:
 
 % if is_secure:
-  https://${ site }/t/mitx_help.html
+  https://${ site }${reverse('contact')}
 % else:
-  http://${ site }/t/mitx_help.html
+  http://${ site }${reverse('contact')}
 % endif
 
 We keep a log of old e-mails, so if this request was unintentional, we

lms/templates/footer.html

@@ -3,28 +3,34 @@
 
 <footer>
   <nav>
-    <section class="copyright">
+    <section class="top">
+      <section class="primary">
         <a href="${reverse('root')}" class="logo"></a>
-      <p>&copy; 2012 edX, <a href="#">some rights reserved.</a></p>
-    </section>
-    <ol>
-      <li>
         <a href="${reverse('courses')}">Find Courses</a>
-      </li>
-      <li>
         <a href="${reverse('about_edx')}">About</a>
-      </li>
-      <li>
         <a href="#">Blog</a>
-      </li>
-      <li>
         <a href="${reverse('jobs')}">Jobs</a>
-      </li>
-      <li class="social">
+      </section>
+
+      <section class="social">
         <a href="#"><img src="${static.url('images/linkedin.png')}" /></a>
         <a href="#"><img src="${static.url('images/facebook.png')}" /></a>
         <a href="#"><img src="${static.url('images/twitter.png')}" /></a>
-      </li>
-    </ol>
+      </section>
+    </section>
+
+    <section class="bottom">
+      <section class="copyright">
+        <p>&copy; 2012 edX, <a href="${reverse('copyright')}">some rights reserved.</a></p>
+      </section>
+
+      <section class="secondary">
+        <a href="${reverse('tos')}">Terms of Service</a>
+        <a href="${reverse('privacy_edx')}">Privacy Policy</a>
+        <a href="${reverse('honor')}">Honor Code</a>
+        <a href="${reverse('help_edx')}">Help</a>
+      </section>
+    </section>
+
   </nav>
 </footer>

lms/templates/index.html

@@ -4,10 +4,36 @@
 
 <section class="home">
   <header>
+    <div class="outer-wrapper">
       <div class="inner-wrapper">
+        <div class="title">
           <h1>The Future of Online Education</h1>
+          <div class="main-cta">
             <a href="${reverse('courses')}" class="find-courses">Find Courses</a>
           </div>
+
+          <div class="social-sharing">
+            <div class="sharing-message">Share with friends and family!</div>
+            <a href="#" class="share">
+              <img src="${static.url('images/twitter-sharing.png')}">
+            </a>
+            <a href="#" class="share">
+              <img src="${static.url('images/facebook-sharing.png')}">
+            </a>
+            <a href="#" class="share">
+              <img src="${static.url('images/email-sharing.png')}">
+            </a>
+          </div>
+        </div>
+
+        <a href="#video-modal" class="media" rel="leanModal">
+          <div class="hero">
+            <img src="${static.url('images/courses/space1.jpg')}" />
+            <div class="play-intro"></div>
+          </div>
+        </a>
+      </div>
+    </div>
   </header>
 
   <section class="container">
@@ -49,15 +75,54 @@
         %endfor
       </section>
     </section>
+  </section>
 
+  <section class="container">
     <section class="more-info">
+      <header>
         <h2>edX News & Announcements</h2>
+        <a href="${reverse('press')}">Read More &rarr;</a>
+      </header>
       <section class="news">
-        <article></article>
-        <article></article>
-        <article></article>
-        <article></article>
+        <section class="blog-posts">
+          <article>
+            <a href="#" class="post-graphics">
+              <img src="${static.url('images/courses/space1.jpg')}" />
+            </a>
+            <div class="post-name">
+              <a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a>
+              <p class="post-date">7/12/2012</p>
+            </div>
+          </article>
+
+          <article>
+            <a href="#" class="post-graphics">
+              <img src="${static.url('images/courses/space1.jpg')}" />
+            </a>
+            <div class="post-name">
+              <a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a>
+              <p class="post-date">7/12/2012</p>
+            </div>
+          </article>
+
+          <article>
+            <a href="#" class="post-graphics">
+              <img src="${static.url('images/courses/space1.jpg')}" />
+            </a>
+            <div class="post-name">
+              <a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a>
+              <p class="post-date">7/12/2012</p>
+            </div>
+          </article>
+        </section>
       </section>
     </section>
   </section>
+
+</section>
+
+<section id="video-modal" class="modal home-page-video-modal">
+  <div class="inner-wrapper">
+    <iframe width="640" height="360" src="http://www.youtube.com/embed/SA6ELdIRkRU" frameborder="0" allowfullscreen></iframe>
+  </div>
 </section>

lms/templates/login_modal.html

 <%! from django.core.urlresolvers import reverse %>
 <%namespace name='static' file='static_content.html'/>
 
-<section class="modal login-modal">
+<section id="login-modal" class="modal login-modal">
   <div class="inner-wrapper">
     <header>
-      <h3>Log In</h3>
+      <h2>Log In</h2>
       <hr>
     </header>
 
@@ -18,13 +18,13 @@
         Remember me
       </label>
       <div class="submit">
-        <input name="submit" type="submit" value="Submit">
+        <input name="submit" type="submit" value="Access My Courses">
       </div>
     </form>
 
     <section class="login-extra">
       <p>
-        <span>Not enrolled? <a href="#">Sign up.</a></span>
+        <span>Not enrolled? <a href="#signup-modal" class="close-login" rel="leanModal">Sign up.</a></span>
         <a href="#" class="pwd-reset">Forgot password?</a>
       </p>
     </section>
@@ -64,7 +64,7 @@
         } 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);
+        $('#login_error').stop().css("display", "block");
         }
         }
         );

lms/templates/marketing.html

+<%! from django.core.urlresolvers import reverse %>
 <%namespace name='static' file='static_content.html'/>
 <!DOCTYPE html>
 <html>
@@ -84,13 +85,13 @@ function postJSON(url, data, callback) {
 
   <footer>
   <div class="footer-wrapper">
-    <p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a></p>
+    <p> Copyright &copy; 2012. MIT. <a href="${reverse('copyright')}">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>
+      <li><a href="${reverse('tos')}">Terms of Service</a></li>
+      <li><a href="${reverse('privacy')}">Privacy Policy</a></li>
+      <li><a href="${reverse('honor')}">Honor Code</a></li>
+      <li><a href="${reverse('help_edx')}">Help</a></li>
     </ul>
 
     <ul aria-label="Social Links" class="social">

lms/templates/navigation.html

@@ -37,10 +37,10 @@
         <a href="${reverse('about_edx')}">About</a>
         <a href="#">Blog</a>
         <a href="${reverse('jobs')}">Jobs</a>
-        <a href="#" id="login">Log In</a>
+        <a href="#login-modal" id="login" rel="leanModal">Log In</a>
       </li>
       <li class="primary">
-        <a href="#" id="signup">Sign Up</a>
+        <a href="#signup-modal" id="signup" rel="leanModal">Sign Up</a>
       </li>
     </ol>
   </nav>

lms/templates/portal/course_about.html

@@ -11,22 +11,20 @@
     <div class="intro-inner-wrapper">
       <section class="intro">
         <hgroup>
-          <h1>${course.get_about_section("title")} <h2><a href="#">${course.get_about_section("university")}</a></h2></h1>
+        <h1>${course.get_about_section("title")}</h1><h2><a href="#">${course.get_about_section("university")}</a></h2>
         </hgroup>
-        <div class="course-dates">
-          <p>Class Starts: <span class="start-date">7/12/12</span></p>
-          <p>Final Exam: <span class="start-date">12/09/12</span></p>
-          <p>Total Length: <span class="course-length">15 weeks</span></p>
-        </div>
-      </section>
-      <section class="actions">
-        <div class="register-wrapper">
+
+        <div class="main-cta">
           <a href="${reverse('enroll', args=[course.id])}" class="register">Register</a>
         </div>
-        <section class="social-sharing">
-          <p><span class="num-people-registered">1,435</span> students already registed!</p>
-        </section>
+
       </section>
+      <a href="#video-modal" class="media" rel="leanModal">
+        <div class="hero">
+          <img src="${static.url('images/courses/circuits.jpeg')}" />
+          <div class="play-intro"></div>
+        </div>
+      </a>
     </div>
   </header>
 
@@ -45,20 +43,6 @@
         <section class="about">
           <h2>About this course</h2>
           <p>${course.get_about_section("description")}</p>
-
-          <h2>Requirements</h2>
-          <p>${course.get_about_section("requirements")}</p>
-
-          <h2>Syllabus</h2>
-          <p>${course.get_about_section("syllabus")}</p>
-
-          <h2>Textbook</h2>
-          ${course.get_about_section("textbook")}
-
-          <h2>Frequently Asked Questions</h2>
-          <p>${course.get_about_section("faq")}</p>
-
-          <p>${course.get_about_section("more_info")}</p>
         </section>
 
         <section class="course-staff">
@@ -87,26 +71,60 @@
             <p>Research Scientist at MIT. His research focus is in finding ways to apply techniques from control systems to optimizing the learning process. Dr. Mitros has worked as an analog designer at Texas Instruments, Talking Lights, and most recently, designed the analog front end for a novel medical imaging modality for Rhythmia Medical.</p>
           </article>
         </section>
+
+        <section class="requirements">
+          <h2>Requirements</h2>
+          <p>${course.get_about_section("requirements")}</p>
+        </section>
+
+        <section class="syllabus">
+          <h2>Syllabus</h2>
+          <p>${course.get_about_section("syllabus")}</p>
+        </section>
+
+        <section class="text-book">
+          <h2>Textbook</h2>
+          ${course.get_about_section("textbook")}
+        </section>
+
+        <section class="course-faq">
+          <h2>Frequently Asked Questions</h2>
+          <p>${course.get_about_section("faq")}</p>
         </section>
-    </div>
 
-    <section class="course-sidebar">
-      <div class="media">
-        <div class="hero">
-          <img src="${static.url('images/courses/circuits.jpeg')}" />
-          <div class="play-intro"></div>
-        </div>
-        <%include file="../video_modal.html" />
       </div>
+    </section>
 
+    <section class="course-sidebar">
       <section class="course-summary">
-        <h3>Course Sumamry</h3>
-        <p>${course.get_about_section("short_description")}</p>
-      </section>
+        <header>
+          <!--
+             -<a href="#" class="university-name">${course.get_about_section("university")}</a><span>${course.get_about_section("title")}</span>
+             -->
+          <div class="social-sharing">
+            <div class="sharing-message">Share with friends and family!</div>
+            <a href="#" class="share">
+              <img src="${static.url('images/twitter-sharing.png')}">
+            </a>
+            <a href="#" class="share">
+              <img src="${static.url('images/facebook-sharing.png')}">
+            </a>
+            <a href="#" class="share">
+              <img src="${static.url('images/email-sharing.png')}">
+            </a>
+          </div>
+        </header>
 
-      <section class="dates">
-        <p>Course Number <span class="start-date">(${course.get_about_section("number")})</span></p>
+        <ol class="important-dates">
+          <li><img src=""><p>Classes Start</p><span class="start-date">7/12/12</span></li>
+          <li><img src=""><p>Final Exam</p><span class="final-date">12/09/12</span></li>
+          <li><img src=""><p>Course Length</p><span class="course-length">15 weeks</span></li>
+          <li><img src=""><p>Course Number</p><span class="course-number">${course.get_about_section("number")}</span></li>
+        </ol>
       </section>
     </section>
+
   </section>
 </section>
+
+<%include file="../video_modal.html" />

lms/templates/signup_modal.html

 <%namespace name='static' file='static_content.html'/>
+<%! from django.core.urlresolvers import reverse %>
 
-<section class="modal signup-modal">
+<section id="signup-modal" class="modal signup-modal">
   <div class="inner-wrapper">
     <header>
-      <h3>Sign Up for edX</h3>
+      <h2>Sign Up for edX</h2>
       <hr>
     </header>
 
@@ -26,12 +27,12 @@
         <label class="terms-of-service">
           <input name="terms_of_service" type="checkbox" value="true">
           I agree to the
-          <a href="#">Terms of Service</a>
+          <a href="${reverse('tos')}">Terms of Service</a>
         </label>
         <label class="honor-code">
           <input name="honor_code" type="checkbox" value="true">
           I agree to the
-          <a href="#">Honor Code</a>
+          <a href="${reverse('honor')}" target="blank">Honor Code</a>
           , sumarized below as:
         </label>
 
@@ -53,7 +54,6 @@
             <hr>
           </div>
 
-
         <div class="submit">
           <input name="submit" type="submit" value="Create My Account">
         </div>
@@ -61,7 +61,7 @@
 
       <section class="login-extra">
         <p>
-          <span>Already have an account? <a href="#">Login.</a></span>
+          <span>Already have an account? <a href="#login-modal" class="close-signup" rel="leanModal">Login.</a></span>
         </p>
       </section>
 
@@ -101,7 +101,7 @@
           if(json.success) {
             $('#enroll').html(json.value);
           } else {
-            $('#enroll_error').html(json.value).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
+            $('#enroll_error').html(json.value).stop().css("display", "block");
           }
         }
       );

lms/templates/static_templates/about.html

+<%! from django.core.urlresolvers import reverse %>
 <%namespace name='static' file='../static_content.html'/>
 
 <%inherit file="../main.html" />
 
 <section class="container about">
   <nav>
-    <a href="#" class="active" >Vision</a>
-    <a href="#">Faq</a>
-    <a href="#">Press</a>
-    <a href="#">Contact</a>
+    <a href="${reverse('about_edx')}" class="active">Vision</a>
+    <a href="${reverse('faq_edx')}">Faq</a>
+    <a href="${reverse('press')}">Press</a>
+    <a href="${reverse('contact')}">Contact</a>
   </nav>
 
   <section class="vision">
@@ -27,9 +28,9 @@
       <div class="photo">
         <img src="">
       </div>
-      <h2>What it's like to work here</h2>
-      <p>“Harvard and MIT will use these new technologies and the research they will make possible to lead the direction of online learning in a way that benefits our students, our peers, and people across the nation and the globe,” Faust continued.</p>
-      <p>[fast-moving not-for-profit startup][institutional backing, funding, benefits, and stability][industry salaries]</p>
+      <h2>Mission: Educate 1 billion people around the world</h2>
+      <p>“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.</p>
+      <p>Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.”
       <hr class="fade-left-hr-divider">
     </section>
 
@@ -42,198 +43,5 @@
       <p>Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.”
     </section>
   </section>
-
-  <section class="faq">
-    <nav class="categories">
-      <a href="#the-organization">The organization</a>
-      <a href="#technology-platform">Technology Platform</a>
-      <a href="#learning-objectives">Learning Objectives</a>
-      <a href="#the-students">The Students</a>
-    </nav>
-
-    <section class="responses">
-      <section id="the-organization" class="category">
-        <h2>The Organization</h2>
-
-        <article class="response">
-          <h3>What is edX?</h3>
-          <p>An organization established by MIT and Harvard that will develop an open-source technology platform to deliver online courses. EdX will support Harvard and MIT faculty in conducting research on teaching and learning on campus through tools that enrich classroom and laboratory experiences. At the same time, edX also will reach learners around the world through online course materials.  The edX website will begin by hosting MITx and Harvardx content, with the goal of aping content from other universities interested in joining the platform. <!-- EdX will also support the Harvard and MIT faculty in conducting research on teaching and learning.--></p>
-        </article>
-
-        <article class="response">
-          <h3>What are MITx and Harvardx?</h3>
-          <p>Portfolios of MIT and Harvard online courses offered to learners around the world through edX. </p>
-        </article>
-
-        <article class="response">
-          <h3>What technology will edX use?</h3>
-          <p>An open-source online learning platform that will feature teaching designed specifically for the web. Features will include: self-paced learning, online discussion groups, wiki-based collaborative learning, assessment of learning as a student progresses through a course, and online laboratories. The platform will also serve as a laboratory from which data will be gathered to better understand how students learn.  Because it is open source, the platform will be continuously improved.</p>
-        </article>
-
-        <article class="response">
-          <h3>Is there anything innovative about the online technology?</h3>
-          <p>Yes. It will move beyond the standard model of online education that relies on watching video content and will offer an interactive experience for students. And the technology will be open source; other universities will be able to leverage the innovative technology to create their own online offerings.</p>
-        </article>
-
-        <article class="response">
-          <h3>Why are MIT and Harvard doing this?</h3>
-          <p>To improve education on campus and around the world:</p>
-          <ul>
-            <li>
-              <p>On campus, edX research will enhance our understanding of how students learn and how technologies can best be used as part of our larger efforts to improve teaching and learning.</p>
-            </li>
-            <li>
-              <p>Beyond our campuses, edX will expand access to education, allow for certificates of mastery to be earned by able learners, and make the open source platform available to other institutions.</p>
-            </li>
-          </ul>
-        </article>
-      </section>
-
-      <section id="technology-platform" class="category">
-        <h2>Technology Platform</h2>
-
-        <article class="response">
-          <h3>Why did Harvard and MIT decide to partner with each other?</h3>
-          <p>We share a vision for greater access to education. Based on our long history of collaboration, we know we can leverage our strengths to best serve the world.</p>
-        </article>
-
-        <article class="response">
-          <h3>How is this different from what other universities are doing online?</h3>
-          <p>EdX will be entirely our universities&#8217; shared educational missions. Also, a primary goal of edX is to improve teaching and learning on campus by supporting faculty from both universities in conducting significant research on how students learn. </p>
-        </article>
-
-        <article class="response">
-          <h3>Who will lead edX?</h3>
-          <p>EdX is a priority for the leadership of both Harvard and MIT, and it will be governed by a board made up of key leaders from both institutions, appointed by each university&#8217;s president. MIT Professor of Electrical Engineering and Computer Science Anant Agarwal will be the initial President of edX and will report to the board.</p>
-        </article>
-
-        <article class="response">
-          <h3>Does the effort have a staff?</h3>
-          <p>EdX is a significant undertaking that will require significant resources. The full scope of the staff has not been determined, but there will be a dedicated staff to the initiative.</p>
-        </article>
-      </section>
-
-      <section id="learning-objectives" class="category">
-        <h2>Learning Objectives</h2>
-
-        <article class="response">
-          <h3>Who can take edX courses? Will there be an admissions process?</h3>
-          <p>EdX will be available to anyone in the world with an internet connection, and in general, there will not be an admissions process. For a modest fee, and as determined by the edX board, MIT and Harvard, credentials will be granted only to students who earn them by demonstrating mastery of the material of a subject.</p>
-        </article>
-
-        <article class="response">
-          <h3>Will the certificates be awarded by Harvard and/or MIT?</h3>
-          <p>As determined by the edX board, MIT and Harvard, online learners who demonstrate mastery of subjects could earn a certificate of completion, but such certificates would not be issued under the name Harvard or MIT. </p>
-        </article>
-
-        <article class="response">
-          <h3>What will the scope of the online courses be? How many? Which faculty? </h3>
-          <p>Our goal is to offer a wide variety of courses across disciplines.</p>  
-        </article>
-
-        <article class="response">
-          <h3>Will Harvard and MIT students be able to take these courses for credit?</h3>
-          <p>No. MITx and Harvardx courses will not be offered for credit at either university.  The online content will be used to extend and enrich on campus courses.</p>
-        </article>
-      </section>
-
-      <section id="the-students" class="category">
-        <h2>The Students</h2>
-
-        <article class="response">
-          <h3>How will success be measured?</h3>
-          <p>Progress in student learning research and the demand for online courses will both be measured as indications of success. However, a plan for measuring the full success of edX will be developed in consultation with faculty from MIT and Harvard.</p>
-        </article>
-
-        <article class="response">
-          <h3>Who is the learner? Domestic or international? Age range?</h3>
-          <p>Improving teaching and learning for students on our campuses is one of our primary goals.  Beyond that, we don&#8217;t have a target group of potential learners, as the goal is to make these courses available to anyone in the world &#8211; from any demographic &#8211; who has interest in advancing their own knowledge. The only requirement is to have a computer with an internet connection.</p>
-        </article>
-
-        <article class="response">
-          <h3>Many institutions are partnering in this space. Is the MIT/Harvard partnership exclusive? Will other institutions be able to collaborate with edX?</h3>
-          <p>It is our intention that over time other universities will join MIT and Harvard in offering courses on the edX platform. The gathering of many universities&#8217; educational content together on one site will enable learners worldwide to access the course content of any participating university from a single website, and to use a set of online educational tools shared by all participating universities. </p>
-        </article>
-
-        <article class="response">
-          <h3>Will MIT and Harvard standards apply here?</h3>
-          <p>The reach changes exponentially, but the rigor remains the same.</p>
-        </article>
-
-        <article class="response">
-          <h3>How do you intend to test whether this approach is improving learning?</h3>
-          <p>Both institutions have assembled faculty who will look at data collection and analytical tools for assessing the results.</p>
-        </article>
-      </section>
-    </section>
-  </section>
-
-  <section class="press">
-    <article class="press-story">
-      <div class="article-cover">
-        <img src="${static.url('images/courses/circuits.jpeg')}" />
-      </div>
-      <div class="press-info">
-        <header>
-          <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
-          <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
-        </header>
-        <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
-      </div>
-    </article>
-
-    <article class="press-story">
-      <div class="article-cover">
-        <img src="${static.url('images/courses/circuits.jpeg')}" />
-      </div>
-      <div class="press-info">
-        <header>
-          <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
-          <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
-        </header>
-        <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
-      </div>
-    </article>
-
-    <article class="press-story">
-      <div class="article-cover">
-        <img src="${static.url('images/courses/circuits.jpeg')}" />
-      </div>
-      <div class="press-info">
-        <header>
-          <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
-          <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
-        </header>
-        <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
-      </div>
-    </article>
-
-    <article class="press-story">
-      <div class="article-cover">
-        <img src="${static.url('images/courses/circuits.jpeg')}" />
-      </div>
-      <div class="press-info">
-        <header>
-          <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
-          <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
-        </header>
-        <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
-      </div>
-    </article>
-  </section>
-
-  <section class="contact">
-    <div class="map">
-    </div>
-    <div class="address">
-      Suggest a Feature
-      Suggest a Topic
-      Report a Problem
-      Ask the Community
-      Send Thanks
-      Submit a Comment
-      Mailing Address
-    </div>
-  </section>
 </section>
 

lms/templates/static_templates/contact.html

+<%! from django.core.urlresolvers import reverse %>
+<%namespace name='static' file='../static_content.html'/>
+
+<%inherit file="../main.html" />
+
+<section class="container about">
+  <nav>
+    <a href="${reverse('about_edx')}">Vision</a>
+    <a href="${reverse('faq_edx')}">Faq</a>
+    <a href="${reverse('press')}">Press</a>
+    <a href="${reverse('contact')}" class="active">Contact</a>
+  </nav>
+
+  <section class="contact">
+    <div class="map">
+      <img src="${static.url('images/edx-location.png')}">
+    </div>
+    <div class="contacts">
+      <h2>Email Contacts</h2>
+      <ul>
+        <li><p>System-related questions: <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a></p></li>
+        <li><p>Content-related questions: <a href="mailto:content@mitx.mit.edu">content@mitx.mit.edu</a></p></li>
+        <li><p>Bug reports: <a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a></p></li>
+        <li><p>Suggestions: <a href="mailto:suggestions@mitx.mit.edu">suggestions@mitx.mit.edu</a></p></li>
+      </ul>
+
+      <h2>Physical Address</h2>
+      <ul>
+        <li><p>11 Cambridge Center</p></li>
+        <li><p>Cambridge, MA 02142</p></li>
+      </ul>
+    </div>
+  </section>
+</section>
+

lms/templates/static_templates/copyright.html

-<%inherit file="../marketing.html" />
+<%! from django.core.urlresolvers import reverse %>
+<%inherit file="../main.html" />
 
-<section class="copyright">
+<%namespace name='static' file='../static_content.html'/>
 
-  <div>
+<section class="static-container copyright">
   <h1> Licensing Information </h1>
+  <hr class="horizontal-divider">
 
-  <ul>
-    <li>
+  <div class="inner-wrapper">
     <h2>Videos and Exercises</h2>
-      <p> Copyright &copy; 2012 MIT. All rights reserved. In order to
-      further MIT's goal of making education accessible and affordable
-      to the world, MIT is planning to make <i>MITx</i> course content
-      available under open source licenses.
-</p>
-    </li>
+    <p> Copyright &copy; 2012 MIT. All rights reserved. In order to further MIT's goal of making education accessible and affordable to the world, MIT is planning to make <i>MITx</i> course content available under open source licenses.</p>
 
-    <li>
     <h2>Textbook</h2>
-      <p> Copyright &copy; 2005 Elsevier Inc. All Rights
-      Reserved. Used with permission. While our goal is to build
-      courses with as much free and open content as possible, we
-      apologize that we do not have the ability to do so
-      entirely. </p>
-    </li>
+    <p> Copyright &copy; 2005 Elsevier Inc. All Rights Reserved. Used with permission. While our goal is to build courses with as much free and open content as possible, we apologize that we do not have the ability to do so entirely. </p>
 
-    <li>
     <h2>Student-generated content</h2>
-      <td>Copyright &copy; 2012. All Rights Reserved. Due to privacy
-      concerns, we do not know what portion of these will be released
-      under open licenses. </td></li>
-  </ul>
+    <p>Copyright &copy; 2012. All Rights Reserved. Due to privacy concerns, we do not know what portion of these will be released under open licenses.</p>
 
-  <p>MIT and <i>MITx</i> are trademarks of the Massachusetts Institute
-  of Technology, and may not be used without permission.</p>
+    <p>MIT and <i>MITx</i> are trademarks of the Massachusetts Institute of Technology, and may not be used without permission.</p>
   </div>
-
 </section>

lms/templates/static_templates/faq.html

+<%! from django.core.urlresolvers import reverse %>
+<%namespace name='static' file='../static_content.html'/>
+
+<%inherit file="../main.html" />
+
+<section class="container about">
+  <nav>
+    <a href="${reverse('about_edx')}">Vision</a>
+    <a href="${reverse('faq_edx')}" class="active">Faq</a>
+    <a href="${reverse('press')}">Press</a>
+    <a href="${reverse('contact')}">Contact</a>
+  </nav>
+
+  <section class="faq">
+
+    <section class="responses">
+      <section id="the-organization" class="category">
+        <h2>The Organization</h2>
+
+        <article class="response">
+          <h3>What is edX?</h3>
+          <p>An organization established by MIT and Harvard that will develop an open-source technology platform to deliver online courses. EdX will support Harvard and MIT faculty in conducting research on teaching and learning on campus through tools that enrich classroom and laboratory experiences. At the same time, edX also will reach learners around the world through online course materials.  The edX website will begin by hosting MITx and Harvardx content, with the goal of aping content from other universities interested in joining the platform. <!-- EdX will also support the Harvard and MIT faculty in conducting research on teaching and learning.--></p>
+        </article>
+
+        <article class="response">
+          <h3>What are MITx and Harvardx?</h3>
+          <p>Portfolios of MIT and Harvard online courses offered to learners around the world through edX. </p>
+        </article>
+
+        <article class="response">
+          <h3>What technology will edX use?</h3>
+          <p>An open-source online learning platform that will feature teaching designed specifically for the web. Features will include: self-paced learning, online discussion groups, wiki-based collaborative learning, assessment of learning as a student progresses through a course, and online laboratories. The platform will also serve as a laboratory from which data will be gathered to better understand how students learn.  Because it is open source, the platform will be continuously improved.</p>
+        </article>
+
+        <article class="response">
+          <h3>Is there anything innovative about the online technology?</h3>
+          <p>Yes. It will move beyond the standard model of online education that relies on watching video content and will offer an interactive experience for students. And the technology will be open source; other universities will be able to leverage the innovative technology to create their own online offerings.</p>
+        </article>
+
+        <article class="response">
+          <h3>Why are MIT and Harvard doing this?</h3>
+          <p>To improve education on campus and around the world:</p>
+          <ul>
+            <li>
+              <p>On campus, edX research will enhance our understanding of how students learn and how technologies can best be used as part of our larger efforts to improve teaching and learning.</p>
+            </li>
+            <li>
+              <p>Beyond our campuses, edX will expand access to education, allow for certificates of mastery to be earned by able learners, and make the open source platform available to other institutions.</p>
+            </li>
+          </ul>
+        </article>
+      </section>
+
+      <section id="technology-platform" class="category">
+        <h2>Technology Platform</h2>
+
+        <article class="response">
+          <h3>Why did Harvard and MIT decide to partner with each other?</h3>
+          <p>We share a vision for greater access to education. Based on our long history of collaboration, we know we can leverage our strengths to best serve the world.</p>
+        </article>
+
+        <article class="response">
+          <h3>How is this different from what other universities are doing online?</h3>
+          <p>EdX will be entirely our universities&#8217; shared educational missions. Also, a primary goal of edX is to improve teaching and learning on campus by supporting faculty from both universities in conducting significant research on how students learn. </p>
+        </article>
+
+        <article class="response">
+          <h3>Who will lead edX?</h3>
+          <p>EdX is a priority for the leadership of both Harvard and MIT, and it will be governed by a board made up of key leaders from both institutions, appointed by each university&#8217;s president. MIT Professor of Electrical Engineering and Computer Science Anant Agarwal will be the initial President of edX and will report to the board.</p>
+        </article>
+
+        <article class="response">
+          <h3>Does the effort have a staff?</h3>
+          <p>EdX is a significant undertaking that will require significant resources. The full scope of the staff has not been determined, but there will be a dedicated staff to the initiative.</p>
+        </article>
+      </section>
+
+      <section id="learning-objectives" class="category">
+        <h2>Learning Objectives</h2>
+
+        <article class="response">
+          <h3>Who can take edX courses? Will there be an admissions process?</h3>
+          <p>EdX will be available to anyone in the world with an internet connection, and in general, there will not be an admissions process. For a modest fee, and as determined by the edX board, MIT and Harvard, credentials will be granted only to students who earn them by demonstrating mastery of the material of a subject.</p>
+        </article>
+
+        <article class="response">
+          <h3>Will the certificates be awarded by Harvard and/or MIT?</h3>
+          <p>As determined by the edX board, MIT and Harvard, online learners who demonstrate mastery of subjects could earn a certificate of completion, but such certificates would not be issued under the name Harvard or MIT. </p>
+        </article>
+
+        <article class="response">
+          <h3>What will the scope of the online courses be? How many? Which faculty? </h3>
+          <p>Our goal is to offer a wide variety of courses across disciplines.</p>  
+        </article>
+
+        <article class="response">
+          <h3>Will Harvard and MIT students be able to take these courses for credit?</h3>
+          <p>No. MITx and Harvardx courses will not be offered for credit at either university.  The online content will be used to extend and enrich on campus courses.</p>
+        </article>
+      </section>
+
+      <section id="the-students" class="category">
+        <h2>The Students</h2>
+
+        <article class="response">
+          <h3>How will success be measured?</h3>
+          <p>Progress in student learning research and the demand for online courses will both be measured as indications of success. However, a plan for measuring the full success of edX will be developed in consultation with faculty from MIT and Harvard.</p>
+        </article>
+
+        <article class="response">
+          <h3>Who is the learner? Domestic or international? Age range?</h3>
+          <p>Improving teaching and learning for students on our campuses is one of our primary goals.  Beyond that, we don&#8217;t have a target group of potential learners, as the goal is to make these courses available to anyone in the world &#8211; from any demographic &#8211; who has interest in advancing their own knowledge. The only requirement is to have a computer with an internet connection.</p>
+        </article>
+
+        <article class="response">
+          <h3>Many institutions are partnering in this space. Is the MIT/Harvard partnership exclusive? Will other institutions be able to collaborate with edX?</h3>
+          <p>It is our intention that over time other universities will join MIT and Harvard in offering courses on the edX platform. The gathering of many universities&#8217; educational content together on one site will enable learners worldwide to access the course content of any participating university from a single website, and to use a set of online educational tools shared by all participating universities. </p>
+        </article>
+
+        <article class="response">
+          <h3>Will MIT and Harvard standards apply here?</h3>
+          <p>The reach changes exponentially, but the rigor remains the same.</p>
+        </article>
+
+        <article class="response">
+          <h3>How do you intend to test whether this approach is improving learning?</h3>
+          <p>Both institutions have assembled faculty who will look at data collection and analytical tools for assessing the results.</p>
+        </article>
+      </section>
+    </section>
+
+    <nav class="categories">
+      <a href="#the-organization">The organization</a>
+      <a href="#technology-platform">Technology Platform</a>
+      <a href="#learning-objectives">Learning Objectives</a>
+      <a href="#the-students">The Students</a>
+    </nav>
+  </section>
+</section>
+
+

lms/templates/static_templates/help.html

+<%! from django.core.urlresolvers import reverse %>
 <%inherit file="../main.html" />
+
+<%namespace name='static' file='../static_content.html'/>
+
 <%block name="title"><title>Help - MITx 6.002x</title></%block>
 
-<section class="help main-content">
+<section class="static-container help">
   <h1>Help</h1>
+  <hr class="horizontal-divider">
 
-  <section class="self-help">
+  <div class="inner-wrapper">
     <h2>Self-help</h2>
 
     <ul>
-      <li>Read
-      the <a href="http://mitx.mit.edu/6002x-faq.html">FAQ</a>
-      carefully</li>
-      <li>Check the <a href="/info">course updates</a> -- we will
-      announce major errors and issues there </li>
-      <li>Check whether the issues has been asked on
-      the <a href="/discussion">discussion forums</a>, and if not,
-      ask</li>
-      <li>Ask in the IRC channel (irc.mitx.mit.edu, channel #6002)]</li>
-      <li>Check the <a href="/info">course handouts.</a></li>
+      <li><p>Read the <a href="${reverse('faq_edx')}">FAQ</a> carefully</p></li>
+      <li><p>Check the <a href="/info">course updates</a> -- we will announce major errors and issues there </p></li>
+      <li><p>Check whether the issues has been asked on the <a href="/discussion">discussion forums</a>, and if not, ask</p></li>
+      <li><p>Ask in the IRC channel (irc.mitx.mit.edu, channel #6002)]</p></li>
+      <li><p>Check the <a href="/info">course handouts.</a></p></li>
     </ul>
-  </section>
 
-    <section class="help-email">
     <h2>Help email</h2>
-      <p> If you can't solve your problems with self-help, we have several
-        e-mail addresses set up:</p>
-
-      <dl>
-        <dt>System-related questions</dt>
-        <dd><a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a></dd>
-        <dt>Content-related questions</dt>
-        <dd><a href="mailto:content@mitx.mit.edu">content@mitx.mit.edu</a></dd>
-        <dt>Bug reports</dt>
-        <dd><a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a></dd>
-        <dt>Suggestions</dt>
-        <dd><a href="mailto:suggestions@mitx.mit.edu">suggestions@mitx.mit.edu</a></dd>
-      </dl>
-
-      <p> Please bear in mind that while we read them, we do not
-        expect to have time to respond to all e-mails. For technical
-        questions, please make sure you are using the latest version
-        of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a>
-        or <a href="https://www.google.com/chrome/">Chrome</a>, and
-        include browser and version in your e-mail, as well as
-        screenshots or other pertinent details. </p>
-    </section>
+    <p> If you can't solve your problems with self-help, we have several e-mail addresses set up:</p>
+
+    <ul>
+      <li><p>System-related questions: <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a></p></li>
+      <li><p>Content-related questions: <a href="mailto:content@mitx.mit.edu">content@mitx.mit.edu</a></p></li>
+      <li><p>Bug reports: <a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a></p></li>
+      <li><p>Suggestions: <a href="mailto:suggestions@mitx.mit.edu">suggestions@mitx.mit.edu</a></p></li>
+    </ul>
+
+    <p>Please bear in mind that while we read them, we do not expect to have time to respond to all e-mails. For technical questions, please make sure you are using the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome/">Chrome</a>, and include browser and version in your e-mail, as well as screenshots or other pertinent details.</p>
+  </div>
 </section>

lms/templates/static_templates/honor.html

-<%inherit file="../marketing.html" />
+<%inherit file="../main.html" />
 
-<section class="honor-code">
-  <div>
+<%! from django.core.urlresolvers import reverse %>
+
+<%namespace name='static' file='../static_content.html'/>
+
+<section class="static-container honor-code">
   <h1> Collaboration Policy </h1>
+  <hr class="horizontal-divider">
 
+  <div class="inner-wrapper">
     <p> By enrolling in a course on <i>edX</i>, you are joining a
       special worldwide community of learners. The aspiration
       of <i>edX</i> is to provide anyone in the world who has the
       motivation and ability to engage edX coursework the opportunity
       to attain the best edX-based educational experience that
       Internet technology enables. You are part of the community who
-      will help <i>edX</i> achieve this goal.
+      will help <i>edX</i> achieve this goal.</p>
 
     <p> <i>edX</i> depends upon your motivation to learn the material
       and to do so with honesty. In order to participate
       in <i>edX</i>, you must agree to the Honor Code below and any
       additional terms specific to a class. This Honor Code, and any
-      additional terms, will be posted on each class website.
+      additional terms, will be posted on each class website.</p>
 
-      <div style="color:darkred;"> 
-      <h2> <i>edX</i> Honor Code Pledge</h2>
+    <h2><i>edX</i> Honor Code Pledge</h2>
 
-    <p> By enrolling in an <i>edX</i> course, I agree that I will:
+    <p> By enrolling in an <i>edX</i> course, I agree that I will:</p>
 
     <ul>
-	<li> Complete all mid-terms and final exams with my own work
-	  and only my own work. I will not submit the work of any
-	  other person.
-	<li> Maintain only one user account and not let anyone else
-	  use my username and/or password.
-	<li> Not engage in any activity that would dishonestly improve
-	  my results, or improve or hurt the results of others.
-	<li> Not post answers to problems that are being used to
-	  assess student performance.
+      <li>
+        <p>Complete all mid-terms and final exams with my own work and only my own work. I will not submit the work of any other person.</p>
+      </li>
+      <li>
+        <p>Maintain only one user account and not let anyone else use my username and/or password.</p>
+      </li>
+      <li>
+        <p>Not engage in any activity that would dishonestly improve my results, or improve or hurt the results of others.</p>
+      </li>
+      <li>
+        <p>Not post answers to problems that are being used to assess student performance.</p>
+      </li>
     </ul>
-      </div>
-    <p> Unless otherwise indicated by the instructor of an <i>edX</i>
-    course, learners on <i>edX</i> are encouraged to:
+
+    <p> Unless otherwise indicated by the instructor of an <i>edX</i> course, learners on <i>edX</i> are encouraged to:</p>
+
     <ul>
-	<li> Collaborate with others on the lecture videos, exercises,
-	homework and labs.
-	<li> Discuss with others general concepts and materials in
-	each course.
-	<li> Present ideas and written work to fellow <i>edX</i>
-	learners or others for comment or criticism.
+      <li>
+        <p>Collaborate with others on the lecture videos, exercises, homework and labs.</p>
+      </li>
+      <li>
+        <p>Discuss with others general concepts and materials in each course.</p>
+      </li>
+      <li>
+        <p>Present ideas and written work to fellow <i>edX</i> learners or others for comment or criticism.</p>
+      </li>
     </ul>
   </div>
 </section>

lms/templates/static_templates/jobs.html

@@ -16,6 +16,7 @@
       <p>Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.”
     </div>
   </section>
+  <hr class="horizontal-divider">
 
   <section class="jobs-wrapper">
     <h2>We are currently looking for</h2>
@@ -61,17 +62,9 @@
     <section class="jobs-sidebar">
       <h2>Positions</h2>
       <nav>
-        <ol>
-          <li>
         <a href="#edx-fellow">edX Fellow</a>
-          </li>
-          <li>
         <a href="#content-engineer">Content Engineer</a>
-          </li>
-          <li>
         <a href="#technology-team">Technology Team</a>
-          </li>
-        </ol>
       </nav>
       <h2>How to Apply</h2>
       <p>E-mail your resume, coverletter and any other materials to <a href="#">careers@edxonline.org</a></p>

lms/templates/static_templates/press.html

+<%! from django.core.urlresolvers import reverse %>
+<%namespace name='static' file='../static_content.html'/>
+
+<%inherit file="../main.html" />
+
+<section class="container about">
+  <nav>
+    <a href="${reverse('about_edx')}">Vision</a>
+    <a href="${reverse('faq_edx')}">Faq</a>
+    <a href="${reverse('press')}" class="active">Press</a>
+    <a href="${reverse('contact')}">Contact</a>
+  </nav>
+
+  <section class="press">
+    <section class="press-resources">
+      <section class="pressreleases">
+        <p>View our <a href="${reverse('pressrelease')}">Press Release</a></p>
+      </section>
+      <section class="identity-assets">
+        <p>Download our <a href="${reverse('pressrelease')}">Logos</a></p>
+      </section>
+    </section>
+    <article class="press-story">
+      <div class="article-cover">
+        <img src="${static.url('images/courses/circuits.jpeg')}" />
+      </div>
+      <div class="press-info">
+        <header>
+          <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
+          <span class="post-date">7/12/2012</span>
+          <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
+        </header>
+        <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
+      </div>
+    </article>
+
+    <article class="press-story">
+      <div class="article-cover">
+        <img src="${static.url('images/courses/circuits.jpeg')}" />
+      </div>
+      <div class="press-info">
+        <header>
+          <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
+          <span class="post-date">7/12/2012</span>
+          <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
+        </header>
+        <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
+      </div>
+    </article>
+
+    <article class="press-story">
+      <div class="article-cover">
+        <img src="${static.url('images/courses/circuits.jpeg')}" />
+      </div>
+      <div class="press-info">
+        <header>
+          <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
+          <span class="post-date">7/12/2012</span>
+          <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
+        </header>
+        <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
+      </div>
+    </article>
+
+    <article class="press-story">
+      <div class="article-cover">
+        <img src="${static.url('images/courses/circuits.jpeg')}" />
+      </div>
+      <div class="press-info">
+        <header>
+          <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
+          <span class="post-date">7/12/2012</span>
+          <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
+        </header>
+        <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
+      </div>
+    </article>
+  </section>
+</section>
+

lms/templates/static_templates/pressrelease.html

+<%! from django.core.urlresolvers import reverse %>
+<%inherit file="../main.html" />
+
+<%namespace name='static' file='../static_content.html'/>
+
+<section class="pressrelease">
+  <section class="container">
+    <h1>MIT and Harvard announce edX</h1>
+    <hr class="horizontal-divider">
+
+    <article>
+      <h2>Joint venture builds on MITx and Harvard distance learning; aims to benefit campus-based education and beyond</h2>
+      <p>Harvard University and the Massachusetts Institute of Technology (MIT) today announced edX, a transformational new partnership in online education. Through edX, the two institutions will collaborate to enhance campus-based teaching and learning and build a global community of online learners.</p>
+
+      <p>EdX will build on both universities’ experience in offering online instructional content.  The technological platform recently established by MITx, which will serve as the foundation for the new learning system, was designed to offer online versions of MIT courses featuring video lesson segments, embedded quizzes, immediate feedback, student-ranked questions and answers, online laboratories, and student paced learning. Certificates of mastery will be available for those motivated and able to demonstrate their knowledge of the course material.</p>
+
+      <p>MIT and Harvard expect that over time other universities will join them in offering courses on the edX platform. The gathering of many universities’ educational content together on one site will enable learners worldwide to access the course content of any participating university from a single website, and to use a set of online educational tools shared by all participating universities. </p>
+
+      <p>EdX will release its learning platform as open source software so it can be used by other universities and organizations who wish to host the platform themselves. Because the learning technology will be available as open-source software, other universities and individuals will be able to help edX improve and add features to the technology.</p>
+
+      <p>MIT and Harvard will use the jointly operated edX platform to research how students learn and how technologies can facilitate effective teaching both on-campus and online.  The edX platform will enable the study of which teaching methods and tools are most successful.  The findings of this research will be used to inform how faculty use technology in their teaching, which will enhance the experience for students on campus and for the millions expected to take advantage of these new online offerings.</p>
+
+      <p>“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.</p>
+
+      <p>Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.”</p>
+
+      <p>“Harvard and MIT will use these new technologies and the research they will make possible to lead the direction of online learning in a way that benefits our students, our peers, and people across the nation and the globe,” Faust continued.</p>
+
+      <h2>Jointly Owned Not-for-Profit Structure</h2>
+
+      <p>The initiative will be overseen by a not-for-profit organization based in Cambridge, Massachusetts, to be owned and governed equally by the two universities. MIT and Harvard have committed to a combined $60 million ($30 million each) in institutional support, grants and philanthropy to launch the collaboration.  </p>
+
+      <p>MIT’s Director of the Computer Science and Artificial Intelligence Laboratory Anant Agarwal, who has led the development of the MITx platform under the leadership of MIT provost L. Rafael Reif, will serve as the first president of edX. </p>
+
+      <p>At Harvard, Provost Alan Garber will direct the Harvardx effort and Faculty of Arts and Sciences Dean Michael D. Smith will play a leading role in working with faculty to develop and deliver courses.  </p>
+
+      <p>It is anticipated that near-term course offerings from a range of Harvard and MIT schools will be included on the edX platform.</p>
+
+      <h2>Research to Enhance Residential Model</h2>
+
+      <p>EdX will enhance the traditional residential model of undergraduate education on both campuses by supporting an unlimited number of experimental online approaches to teaching that can be used by Harvard and MIT faculty and which will benefit students in Cambridge and Boston.  It will also have the benefit of providing global access to some of the world-class instruction that already occurs in Cambridge and Boston, but which is only one aspect of the full Harvard College and MIT experience.</p>
+
+      <p>“The campus environment offers opportunities and experiences that cannot be replicated online,” said Hockfield.  “EdX is designed to improve, not replace, the campus experience.” </p>
+
+      <p>EdX will be separate from ongoing distance learning initiatives at both institutions, including MIT OpenCourseWare and courses offered by schools at Harvard such as the Harvard Extension School, the Harvard Business School and the Harvard Medical School.</p>
+
+      <h2>First Courses by Fall 2012</h2>
+
+      <p>The universities will work to develop further the online learning platform already begun with MITx and to populate the edX website with courses from the MIT and Harvard faculty.  During the early stages, the two universities will work cooperatively to offer as broad an initial set of courses as possible.  A first set of courses is scheduled to be announced in early summer and to start in Fall, 2012.</p>
+
+      <p>“We are already moving forward quickly,” said Anant Agarwal. “There’s a lot of energy in the air, and the teams at Harvard and MIT can’t wait to collaborate.”</p>
+
+      <section class="footer">
+        <hr class="horizontal-divider">
+        <div class="logo"></div><h3 class="date">4 - 09 - 2012</h3>
+      </section>
+    </article>
+  </section>
+</section>

lms/templates/static_templates/privacy.html

-<%inherit file="../marketing.html" />
-
-<section class="privacy-policy">
-  <div>
-<h1>Privacy Policy</h1>
-
-<h2>Confidentiality &amp; Security of Personally
-Identifiable Information</h2>
-
-<p>We care about the confidentiality and security of your personal
-information. We will use commercially reasonable efforts to keep your
-Personally Identifiable Information private and will not share it with third
-parties, except as set forth in this Privacy Policy. However, no method of
-transmitting or storing electronic data is ever completely secure, and we
-cannot guarantee that such information will never be accessed, used, or
-released in a manner that is inconsistent with this policy. </p>
-
-<p>This Privacy Policy only applies to information that we collect
-through the Site and does not apply to information that we may collect
-from you in other ways (for example, this policy does not apply to
-information that you may provide to us over the phone, by fax or
-through conventional mail). In addition, please note your educational
-records are protected by the Family Educational Rights and Privacy Act
-(&quot;FERPA&quot;) to the extent FERPA applies.</p>
-
-<h2>Usernames and Postings </h2>
-
-<p>Comments or other information posted by you to our forums,
-wikis, or other areas of the Site designed for public communications may be
-viewed and downloaded by others who visit the Site. For this reason, we
-encourage you to use an anonymous username, and to not post any personally
-identifiable information to those forums (or other public areas).</p>
-
-<h2>What You Consent to by Using Our Site</h2>
-
-<p>Please understand that by submitting any Personally Identifiable
-Information to us, you consent and agree that we may collect, use and
-disclose such Personally Identifiable Information in accordance with
-this Privacy Policy and our Terms of Service (&quot;TOS&quot;), and as
-permitted or required by law. If you do not agree with these terms,
-then please do not provide any Personally Identifiable Information to
-us. As used herein, &quot;Personally Identifiable Information&quot;
-means your full name, email address, your physical address (if you
-provide it) and your student identification number, if applicable. If
-you refuse, or if you choose not to provide us with any required
-Personally Identifiable Information, we may not be able to provide you
-with the services that can be offered on our Site.</p>
-
-<h2>Information We Collect and How We Use It </h2>
-
-<p>We collect information, including Personally Identifiable
-Information, when you sign up for a User Account, participate in
-online courses, send us email messages and/or participate in our
-public forums. We collect information about student performance and
-patterns of learning. We track information indicating, among other
-things, which pages of our Site were visited, the order in which they
-were visited, when they were visited, and which hyperlinks and other
-user interface controls were used.</p>
-
-<p>We may log the IP address, operating system and browser software
-used by each user of the Site, and we may be able to determine from an
-IP address a user's Internet Service Provider and the geographic
-location of his or her point of connectivity. Various web analysis
-tools are used to collect this information. Some of the information is
-collected through cookies (a small text file placed on your
-computer). You should be able to control how and whether cookies will
-be accepted by your web browser. Most browsers offer instructions on
-how to reset the browser to reject cookies in the &quot;Help&quot;
-section of the toolbar. If you reject our cookies, many functions and
-conveniences of this Site may not work properly.</p>
-
-<p>Among other things, we may use the information that you provide
-(including your Personally Identifiable Information) in connection
-with the following:</p>
-
-<ul>
+<%! from django.core.urlresolvers import reverse %>
+<%inherit file="../main.html" />
+
+<%namespace name='static' file='../static_content.html'/>
+
+<section class="static-container privacy-policy">
+  <h1>Privacy Policy</h1>
+  <hr class="horizontal-divider">
+
+  <div class="inner-wrapper">
+    <h2>Confidentiality &amp; Security of Personally
+    Identifiable Information</h2>
+
+    <p>We care about the confidentiality and security of your personal
+    information. We will use commercially reasonable efforts to keep your
+    Personally Identifiable Information private and will not share it with third
+    parties, except as set forth in this Privacy Policy. However, no method of
+    transmitting or storing electronic data is ever completely secure, and we
+    cannot guarantee that such information will never be accessed, used, or
+    released in a manner that is inconsistent with this policy. </p>
+
+    <p>This Privacy Policy only applies to information that we collect
+    through the Site and does not apply to information that we may collect
+    from you in other ways (for example, this policy does not apply to
+    information that you may provide to us over the phone, by fax or
+    through conventional mail). In addition, please note your educational
+    records are protected by the Family Educational Rights and Privacy Act
+    (&quot;FERPA&quot;) to the extent FERPA applies.</p>
+
+    <h2>Usernames and Postings </h2>
+
+    <p>Comments or other information posted by you to our forums,
+    wikis, or other areas of the Site designed for public communications may be
+    viewed and downloaded by others who visit the Site. For this reason, we
+    encourage you to use an anonymous username, and to not post any personally
+    identifiable information to those forums (or other public areas).</p>
+
+    <h2>What You Consent to by Using Our Site</h2>
+
+    <p>Please understand that by submitting any Personally Identifiable
+    Information to us, you consent and agree that we may collect, use and
+    disclose such Personally Identifiable Information in accordance with
+    this Privacy Policy and our Terms of Service (&quot;TOS&quot;), and as
+    permitted or required by law. If you do not agree with these terms,
+    then please do not provide any Personally Identifiable Information to
+    us. As used herein, &quot;Personally Identifiable Information&quot;
+    means your full name, email address, your physical address (if you
+    provide it) and your student identification number, if applicable. If
+    you refuse, or if you choose not to provide us with any required
+    Personally Identifiable Information, we may not be able to provide you
+    with the services that can be offered on our Site.</p>
+
+    <h2>Information We Collect and How We Use It </h2>
+
+    <p>We collect information, including Personally Identifiable
+    Information, when you sign up for a User Account, participate in
+    online courses, send us email messages and/or participate in our
+    public forums. We collect information about student performance and
+    patterns of learning. We track information indicating, among other
+    things, which pages of our Site were visited, the order in which they
+    were visited, when they were visited, and which hyperlinks and other
+    user interface controls were used.</p>
+
+    <p>We may log the IP address, operating system and browser software
+    used by each user of the Site, and we may be able to determine from an
+    IP address a user's Internet Service Provider and the geographic
+    location of his or her point of connectivity. Various web analysis
+    tools are used to collect this information. Some of the information is
+    collected through cookies (a small text file placed on your
+    computer). You should be able to control how and whether cookies will
+    be accepted by your web browser. Most browsers offer instructions on
+    how to reset the browser to reject cookies in the &quot;Help&quot;
+    section of the toolbar. If you reject our cookies, many functions and
+    conveniences of this Site may not work properly.</p>
+
+    <p>Among other things, we may use the information that you provide
+    (including your Personally Identifiable Information) in connection
+    with the following:</p>
+
+    <ul>
      <li>To help us improve <i>MITx</i> offerings, both individually
          (e.g. by course staff when working with a student) and in
          aggregate, and to individualize the experience and to evaluate
@@ -101,98 +105,97 @@ with the following:</p>
          communications with you.</li>
      <li>As otherwise described to you at the point of
          collection. </li>
-</ul>
-
-<p> In addition to the above situations where your information may be
-shared with others, there is also the possibility that <i>MITx</i>
-will affiliate with other educational institutions and/or
-that <i>MITx</i> will become a (or part of a) nonprofit entity
-separate from MIT.  In those events, the other educational
-institutions and/or separate entity will have access to the
-information you provide, to the extent permitted by FERPA.
-
-<h2>Sharing with Third Parties</h2>
-
-<p>We may share the information we collect with third parties
-as follows:</p>
-
-<ul>
-<li> With service providers or
-contractors that perform certain functions on our behalf, including processing
-information that you provide to us on the Site, operating the Site or portions
-of it, or in connection with other aspects of <i>MITx</i> services. These
-service providers and contractors will be obligated to keep your information
-confidential.</p>
-
-<li> With all users and other visitors
-to the Site, to the extent that you submit post comments or other information
-to a portion of the Site designed for public communications. As provided in the
-Terms of Service, we may provide those postings to students in future offerings
-of the course, either within the context of the forums, the courseware, or
-otherwise, for marketing purposes, or in any other way. If we do use your postings,
-we will use them without your real name and e-mail (except with explicit
-permission), but we may use your username. </p>
-
-<li>To connect you to other users of the Site. For instance, we
-may recommend specific study partners, or connect potential student
-mentees and mentors. In such cases, we may use all information
-collected to determine who to connect you to, but we will only connect
-you by username, and not disclose your real name or e-mail address to
-your contact. </p>
-
-<li> To respond to subpoenas, court orders, or other legal process, in
-response to a request for cooperation from law enforcement or another
-government agency, to investigate, prevent, or take action regarding
-illegal activities, suspected fraud, or to enforce our user agreement
-or privacy policy, or to protect our rights or the rights of
-others.</p>
-
-<li> As otherwise described to you at the point of collection or
-pursuant to your consent. For example, from time to time, we may ask
-your permission to use your Personally Identifiable Information in
-other ways. In the future, <i>MITx</i> may have an alumni association,
-resume book, etc. We may offer services where it is possible to
-verify <i>MITx</i> credentials. </p>
-
-<li> For integration with third party services. Videos and other
-content may be hosted on YouTube and other web sites not controlled
-by <i>MITx</i>. We may provide links and other integration with social
-networks, and other sites. Those web sites are guided by their own
-privacy policies. </p>
-</ul>
-
-<h2>Personalization and Pedagogical Improvements</h2>
-
-<p>Our goal is to provide current and future visitors with the best
-possible educational experience. To further this goal, we sometimes
-present different users with different versions of course materials
-and software. We do this to personalize the experience to the
-individual learner (assess the learner's level of ability and learning
-style, and present materials best suited to the learner), to evaluate
-the effectiveness of our course materials, to improve our
-understanding of the learning process, and to otherwise improve the
-effectiveness of our offerings. We may publish or otherwise publicize
-results from this process, but only as non-personally-identifiable
-data. </p>
-
-<h2>Changing Our Privacy Policy</h2>
-
-<p>Please note that we review our privacy practices from time to time,
-and that these practices are subject to change. We will publish notice
-of any such modifications online on this page for a reasonable period
-of time following such modifications, and by changing the effective
-date of this Privacy Policy. By continuing to access the Site after
-such changes have been posted, you signify your agreement to be bound
-by them. Be sure to return to this page periodically to ensure
-familiarity with the most current version of this Privacy Policy. </p>
-
-<h2>Privacy Concerns</h2>
-
-<p>If you have privacy concerns, or have disclosed data you would
-prefer to keep private, please contact us
-at <a href="mailto:privacy@mitx.mit.edu">privacy@mitx.mit.edu</a>. </p>
-
-<p> Effective Date: February 6, 2012
-
+    </ul>
+
+    <p> In addition to the above situations where your information may be
+    shared with others, there is also the possibility that <i>MITx</i>
+    will affiliate with other educational institutions and/or
+    that <i>MITx</i> will become a (or part of a) nonprofit entity
+    separate from MIT.  In those events, the other educational
+    institutions and/or separate entity will have access to the
+    information you provide, to the extent permitted by FERPA.</p>
+
+    <h2>Sharing with Third Parties</h2>
+
+    <p>We may share the information we collect with third parties
+    as follows:</p>
+
+    <ul>
+      <li> With service providers or
+      contractors that perform certain functions on our behalf, including processing
+      information that you provide to us on the Site, operating the Site or portions
+      of it, or in connection with other aspects of <i>MITx</i> services. These
+      service providers and contractors will be obligated to keep your information
+      confidential.</li>
+
+      <li> With all users and other visitors
+      to the Site, to the extent that you submit post comments or other information
+      to a portion of the Site designed for public communications. As provided in the
+      Terms of Service, we may provide those postings to students in future offerings
+      of the course, either within the context of the forums, the courseware, or
+      otherwise, for marketing purposes, or in any other way. If we do use your postings,
+      we will use them without your real name and e-mail (except with explicit
+      permission), but we may use your username. </li>
+
+      <li>To connect you to other users of the Site. For instance, we
+      may recommend specific study partners, or connect potential student
+      mentees and mentors. In such cases, we may use all information
+      collected to determine who to connect you to, but we will only connect
+      you by username, and not disclose your real name or e-mail address to
+      your contact. </li>
+
+      <li> To respond to subpoenas, court orders, or other legal process, in
+      response to a request for cooperation from law enforcement or another
+      government agency, to investigate, prevent, or take action regarding
+      illegal activities, suspected fraud, or to enforce our user agreement
+      or privacy policy, or to protect our rights or the rights of
+      others.</li>
+
+      <li> As otherwise described to you at the point of collection or
+      pursuant to your consent. For example, from time to time, we may ask
+      your permission to use your Personally Identifiable Information in
+      other ways. In the future, <i>MITx</i> may have an alumni association,
+      resume book, etc. We may offer services where it is possible to
+      verify <i>MITx</i> credentials. </li>
+
+      <li> For integration with third party services. Videos and other
+      content may be hosted on YouTube and other web sites not controlled
+      by <i>MITx</i>. We may provide links and other integration with social
+      networks, and other sites. Those web sites are guided by their own
+      privacy policies. </li>
+    </ul>
+
+    <h2>Personalization and Pedagogical Improvements</h2>
+
+    <p>Our goal is to provide current and future visitors with the best
+    possible educational experience. To further this goal, we sometimes
+    present different users with different versions of course materials
+    and software. We do this to personalize the experience to the
+    individual learner (assess the learner's level of ability and learning
+    style, and present materials best suited to the learner), to evaluate
+    the effectiveness of our course materials, to improve our
+    understanding of the learning process, and to otherwise improve the
+    effectiveness of our offerings. We may publish or otherwise publicize
+    results from this process, but only as non-personally-identifiable
+    data. </p>
+
+    <h2>Changing Our Privacy Policy</h2>
+
+    <p>Please note that we review our privacy practices from time to time,
+    and that these practices are subject to change. We will publish notice
+    of any such modifications online on this page for a reasonable period
+    of time following such modifications, and by changing the effective
+    date of this Privacy Policy. By continuing to access the Site after
+    such changes have been posted, you signify your agreement to be bound
+    by them. Be sure to return to this page periodically to ensure
+    familiarity with the most current version of this Privacy Policy. </p>
+
+    <h2>Privacy Concerns</h2>
+
+    <p>If you have privacy concerns, or have disclosed data you would
+    prefer to keep private, please contact us
+    at <a href="mailto:privacy@mitx.mit.edu">privacy@mitx.mit.edu</a>.</p>
+
+    <p> Effective Date: February 6, 2012</p>
   </div>
 </section>

lms/templates/static_templates/tos.html

-<%inherit file="../marketing.html" />
-
-<section class="tos">
-  <div>
-
-<h1><i>MITx</i> Terms of Service</h1>
-
-<p>Welcome to <i>MITx</i>. You must read and agree to these Terms of Service
-(&quot;TOS&quot;), <i>MITx</i>&rsquo;s <a href="/t/privacy.html">Privacy
-Policy</a>, and <a href="/t/honor.html">Honor Code</a> prior to
-registering for this site or using any portion of this site
-(&ldquo;Site&rdquo;), including accessing any course materials, chat
-room, mailing list, or other electronic service. These TOS, the
-Privacy Policy and the Honor Code are agreements (the
-&ldquo;Agreements&rdquo;) between you and the Massachusetts Institute
-of Technology (&ldquo;MIT&rdquo;). If you do not understand or do not
-agree to be bound by the terms of the Agreements, please immediately
-exit this site. </p>
-
-<p><i>MITx</i> reserves the right to modify these TOS at any time and
-will publish notice of any such modifications online on this page for
-a reasonable period of time following such modifications, and by
-changing the effective date of these TOS. By continuing to access the
-Site after notice of such changes have been posted, you signify your
-agreement to be bound by them. Be sure to return to this page
-periodically to ensure familiarity with the most current version of
-these TOS.  </p>
-
-<h2>Description of <i>MITx</i> </h2>
-
-<p><i>MITx</i> offers online courses that include opportunities for
-professor-to-student and student-to-student interactivity, individual
-assessment of a student's work, and for students who demonstrate their
-mastery of subjects, a certificate or credential. </p>
-
-<h2>Rules for Online Conduct</h2>
-
-<p>You agree that you are responsible for your own use of the Site and
-for your User Postings.  &ldquo;User Postings&rdquo; include all
-content submitted, posted, published or distributed on the Site by you
-or other users of the Site, including but not limited to all forum
-posts, wiki edits, notes, questions, comments, videos, and file
-uploads. You agree that you will use the Site in compliance with these
-TOS, the <a href="/t/honor.html">Honor Code</a>, and all applicable
-local, state, national, and international laws, rules and regulations,
-including copyright laws and any laws regarding the transmission of
-technical data exported from your country of residence and all United
-States export control laws.
-
-<p>As a condition of your use of the Services, you will not use the
-Site in any manner intended to damage, disable, overburden, or impair
-any <i>MITx</i> server, or the network(s) connected to any <i>MITx</i>
-server, or interfere with any other party's use and enjoyment of the
-Site. You may not attempt to gain unauthorized access to the Site,
-other accounts, computer systems or networks connected to
-any <i>MITx</i> server through hacking, password mining or any other
-means. You may not obtain or attempt to obtain any materials or
-information stored on the Site, its servers, or associated computers
-through any means not intentionally made available through the
-Site. </p>
-
-<h2>The following list of items is strictly prohibited on the Site:</h2>
-<ol>
-<li>Content that defames, harasses, or threatens others
-<li>Content that discusses illegal activities with the intent to commit them.
-<li>Content that infringes another&#39;s intellectual property,
-including, but not limited to, copyrights, or trademarks
-<li>Any inappropriate, profane, pornographic, obscene, indecent, or
-unlawful content
-<li>Advertising or any form of commercial solicitation
-<li>Political content or content related to partisan political
-activities
-<li>Viruses, trojan horses, worms, time bombs, corrupted files,
-malware, spyware, or any other similar software that may damage the
-operation of another&rsquo;s computer or property
-<li>Content that contains intentional inaccurate information with the
-intent of misleading others.
-<li>You, furthermore, agree not to scrape, or otherwise download in
-bulk, user-contributed content, a list or directory of users on the
-system, or other material including but not limited to on-line
-textbooks, User Postings, or user information. 
-<lu>You agree to not misrepresent or attempt to misrepresent your
-identity while using the Sites (although you are welcome and
-encouraged to use an anonymous username in the forums).
-</ol> 
-
-<h2>User Accounts and Authority</h2>
-
-<p>In order to participate in Site activities, you must provide an
-email address (&quot;Email Address&quot;) and a user password
-(&quot;User Password&quot;) in order to create a user account
-(&ldquo;User Account&rdquo;). You agree that you will never divulge or
-share access or access information to your User Account with any third
-party for any reason. In setting up your User Account, you may be
-prompted or required to enter additional information, including your
-name. You understand and agree that all information provided by you is
-accurate and current. You agree to maintain and update your
-information to keep it accurate and current. </p>
-
-<p>We care about the confidentiality and security of your personal
-information.  Please see our <a href="/t/privacy.html">Privacy
-Policy</a> for more information about what information about
-you <i>MITx</i> collects and how <i>MITx</i> uses that
-information.</p>
-
-<h2>Your Right to Use Content on the Site</h2>
-
-<p>Unless indicated as being in the public domain, all content on the
-Site is protected by United States copyright. The texts, exams and
-other instructional materials provided with the courses offered on
-this Site are for your personal use in connection with those courses
-only. MIT is planning to make <i>MITx</i> course content and software
-infrastructure available under open source licenses that will help
-create a vibrant ecosystem of contributors and further MIT&rsquo;s
-goal of making education accessible and affordable to the world. </p>
-
-<p>Certain reference documents, digital textbooks, articles and other
-information on the Site are used with the permission of third parties
-and use of that information is subject to certain rules and
-conditions, which will be posted along with the information. By using
-this Site you agree to abide by all such rules and conditions. Due to
-privacy concerns, User Postings shall be licensed to <i>MITx</i> with
-the terms discussed below. Please
-see <a href="/t/copyright.html"><i>MITx's Copyright Page</i></a> for
-more information.</p>
-
-<h2>User Postings</h2>
-
-<p><strong>User Postings Representations and Warranties.</strong> By
-submitting or distributing your User Postings, you affirm, represent,
-and warrant that you are the creator and owner of or have the
-necessary licenses, rights, consents, and permissions to reproduce and
-publish the posted information, and to authorize MIT and <i>MITx</i>'s
-Users to reproduce, modify, publish, and otherwise use that infomation
-and distribute your User Postings as necessary to exercise the
-licenses granted by you below. You, and not <i>MITx</i>, are solely
-responsible for your User Postings and the consequences of posting or
-publishing them.</p>
-
-<p><strong>Limited License Grant to MIT.</strong> By submitting or
-distributing User Postings to the Site, you hereby grant to MIT a
-worldwide, non-exclusive, transferable, assignable, fully paid-up,
-royalty-free, perpetual, irrevocable right and license to host,
-transfer, display, perform, reproduce, modify, distribute and
-re-distribute, relicense, and otherwise exploit your User Postings, in
-whole or in part, in any form, and in any media formats and through
-any media channels (now known or hereafter developed).</p>
-
-<p><strong>Limited License Grant to <i>MITx</i> Users.</strong> By
-submitting or distributing User Postings to the Site, you hereby grant
-to each User of the Site a non-exclusive license to access and use
-your User Postings in connection with their use of the Site for their
-own personal purposes. </p>
-
-<h2>Use of <i>MITx</i> and MIT Names, Trademarks and Service Marks</h2>
-
-<p>&ldquo;<i>MITx</i>,&rdquo; &quot;MIT&quot;, &quot;Massachusetts Institute
-of Technology&quot;, and its logos and seal are trademarks of the
-Massachusetts Institute of Technology. You may not use MIT&rsquo;s
-names or logos, or any variations thereof, without prior written
-consent of MIT. You may not use the MIT name in any of its forms nor
-MIT seals or logos for promotional purposes, or in any way that
-deliberately or inadvertently claims, suggests, or in MIT&#39;s sole
-judgment gives the appearance or impression of a relationship with or
-endorsement by MIT.
-
-<p>All Trademarks not owned by MIT that appear on the Site or on or
-through the services made available on or through the Site, if any,
-are the property of their respective owners.  Nothing contained
-on the Site should be construed as granting, by implication, estoppel,
-or otherwise, any license or right to use any such Trademark displayed
-on the Site without the written permission of the third party that may
-own the applicable Trademark.</a>
-
-
-<h2>Digital Millennium Copyright Act</h2>
-
-<p> Copyright owners who believe their material has been infringed on
-the Site should contact MITx's designated copyright agent at
-dcma-agent@mit.edu or at 77 Massachusetts Avenue, Cambridge, MA
-02138-4307 Attention: MIT DCMA Agent, W92-263A.  
-
-<p> Notification must
-include:
-<ul>
-<li> Identification of the copyrighted work, or, in the case of
-multiple works at the same location, a representative list of such
-works at that site.
-<li> Identification of the material that is claimed to be infringing
-or to be the subject of infringing activity. You must include
-sufficient information for us to locate the material (e.g., url, ip
-address, computer name).
-<li> Information for us to be able to contact the complaining party
-(e.g., email address, phone number).
-<li> A statement that the complaining party believes that the use of
-the material has not been authorized by the copyright owner or an
-authorized agent.
-<li> A statement that the information in the notification is accurate
-and that the complaining party is authorized to act on behalf of the
-copyright owner.
-</ul>
-
-<h2>Disclaimer of Warranty / Indemnification/Limitation of Liabilities</h2>
-
-<p>THE SITE IS PROVIDED &quot;AS IS&quot; AND &quot;AS AVAILABLE&quot;
-WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING
-WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR USE FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. MIT does not
-warrant the Site will operate in an uninterrupted or error-free manner
-or that the Site is free of viruses or other harmful components. Use
-of information obtained from or through this Site is at your own
-risk. Your access to or download of information, materials, or data
-through the Site or any reference sites is at your own discretion and
-risk and that you will be solely responsible for any damage to your
-property (including your computer system) or loss of data that results
-from the download or use of such material or data. We may close or
-limit enrollment for pedagogical or technological reasons.</p>
-
-<p><strong>User Postings Disclaimer.</strong> You understand that when
-using the Site you will be exposed to User Postings from a variety of
-sources, and that MIT is not responsible for the accuracy, usefulness,
-reliability, or intellectual property rights of or relating to such
-User Postings. You further understand and acknowledge that you may be
-exposed to User Postings that are inaccurate, offensive, defamatory,
-indecent or objectionable, and you agree to waive, and hereby do
-waive, any legal or equitable rights or remedies you have or may have
-against MIT with respect thereto. MIT does not endorse any User
-Postings or any opinion, recommendation or advice expressed
-therein.  <i>MITx</i> has no obligation to monitor any User Postings or
-any other user communications through the Site. However, <i>MITx</i> reserves
-the right to review User Postings and to edit or remove, in whole or
-in part, such User Postings in its sole discretion. If notified by a
-User or a content owner of a User Posting that allegedly does not
-conform to the TOS, MIT may investigate the allegation and determine
-in its sole discretion whether to remove the User Posting, which it
-reserves the right to do at any time and without notice. </p>
-
-<p><strong>Links to Other Sites.</strong> The Site may include
-hyperlinks to sites maintained or controlled by others. MIT is not
-responsible for and does not routinely screen, approve, review or
-endorse the contents of or use of any of the products or services that
-may be offered at these sites. If you decide to access linked third
-party web sites, you do so at your own risk.</p>
-
-<strong>
-<p>YOU AGREE THAT MIT WILL NOT BE LIABLE TO YOU FOR ANY LOSS OR
-DAMAGES, EITHER ACTUAL OR CONSEQUENTIAL, ARISING OUT OF OR RELATING TO
-THESE TERMS OF SERVICE, OR TO YOUR (OR ANY THIRD PARTY&#39;S) USE OR
-INABILITY TO USE THE SITE, OR TO YOUR PLACEMENT OF CONTENT ON THE
-SITE, OR TO YOUR RELIANCE UPON INFORMATION OBTAINED FROM OR THROUGH
-THE SITE WHETHER BASED IN CONTRACT, TORT, STATUTORY OR OTHER LAW,
-EXCEPT ONLY IN THE CASE OF DEATH OR PERSONAL INJURY WHERE AND ONLY TO
-THE EXTENT THAT APPLICABLE LAW REQUIRES SUCH LIABILITY. </p>
-
-<p>IN PARTICULAR, MIT WILL HAVE NO LIABILTY FOR ANY CONSEQUENTIAL,
-INDIRECT, PUNITIVE, SPECIAL, EXEMPLARY OR INCIDENTAL DAMAGES, WHETHER
-FORESEEABLE OR UNFORESEEABLE, (INCLUDING, BUT NOT LIMITED TO, CLAIMS
-FOR DEFAMATION, ERRORS, LOSS OF DATA, OR INTERRUPTION IN AVAILABILITY
-OF DATA).</p>
-</strong>
-
-<h2>Indemnification</h2>
-
-<p>You agree to defend, hold harmless and indemnify MIT, and its
-subsidiaries, affiliates, officers, agents, and employees from and
-against any third-party claims, actions or demands arising out of,
-resulting from or in any way related to your use of the Site,
-including any liability or expense arising from any and all claims,
-losses, damages (actual and consequential), suits, judgments,
-litigation costs and attorneys&#39; fees, of every kind and nature. In
-such a case, MIT will provide you with written notice of such claim,
-suit or action.</p>
-
-<h2>Miscellaneous</h2>
-
-<p><strong>Termination Rights.</strong> You agree that MIT, in its sole
-discretion, may terminate your use of the Site or your participation
-in it thereof, for any reason or no reason. If you no longer desire to
-participate in the Site, you may terminate your participation therein
-upon notice to MIT.</p>
-
-<p><strong>Entire Agreement.</strong> This Agreement constitutes the entire agreement
-between you and MIT with respect to your use of the Site, superseding
-any prior agreements between you and MIT regarding your use of the
-Site. </p>
-
-<p><strong>Waiver and Severability of TOS.</strong> The failure of MIT to exercise or
-enforce any right or provision of the TOS of Site shall not constitute
-a waiver of such right or provision. If any provision of the TOS is
-found by a court of competent jurisdiction to be invalid, the parties
-nevertheless agree that the court should endeavor to give effect to
-the parties&#39; intentions as reflected in the provision, and the
-other provisions of the TOS remain in full force and effect.</p>
-
-<p><strong>Choice of Law/Forum Selection.</strong>  You agree that any dispute
-arising out of or relating to these Terms or any content posted to a
-Site will be governed by the laws of the Commonwealth of
-Massachusetts, excluding its conflicts of law provisions. You further
-consent to the personal jurisdiction of and exclusive venue in the
-federal and state courts located in and serving Boston, Massachusetts
-as the legal forum for any such dispute.</p>
-
-<p><strong>Effective Date:</strong> February 20, 2012</p><div>
-</div>
+<%! from django.core.urlresolvers import reverse %>
+<%inherit file="../main.html" />
+
+<%namespace name='static' file='../static_content.html'/>
+
+<section class="static-container tos">
+  <h1>MITx Terms of Service</h1>
+  <hr class="horizontal-divider">
+
+  <div class="inner-wrapper">
+    <p>Welcome to <i>MITx</i>. You must read and agree to these Terms of Service
+    (&quot;TOS&quot;), <i>MITx</i>&rsquo;s <a href="${reverse('privacy_edx')}">Privacy
+    Policy</a>, and <a href="${reverse('honor')}">Honor Code</a> prior to
+    registering for this site or using any portion of this site
+    (&ldquo;Site&rdquo;), including accessing any course materials, chat
+    room, mailing list, or other electronic service. These TOS, the
+    Privacy Policy and the Honor Code are agreements (the
+    &ldquo;Agreements&rdquo;) between you and the Massachusetts Institute
+    of Technology (&ldquo;MIT&rdquo;). If you do not understand or do not
+    agree to be bound by the terms of the Agreements, please immediately
+    exit this site. </p>
+
+    <p><i>MITx</i> reserves the right to modify these TOS at any time and
+    will publish notice of any such modifications online on this page for
+    a reasonable period of time following such modifications, and by
+    changing the effective date of these TOS. By continuing to access the
+    Site after notice of such changes have been posted, you signify your
+    agreement to be bound by them. Be sure to return to this page
+    periodically to ensure familiarity with the most current version of
+    these TOS.  </p>
+
+    <h2>Description of <i>MITx</i> </h2>
+
+    <p><i>MITx</i> offers online courses that include opportunities for
+    professor-to-student and student-to-student interactivity, individual
+    assessment of a student's work, and for students who demonstrate their
+    mastery of subjects, a certificate or credential. </p>
+
+    <h2>Rules for Online Conduct</h2>
+
+    <p>You agree that you are responsible for your own use of the Site and
+    for your User Postings.  &ldquo;User Postings&rdquo; include all
+    content submitted, posted, published or distributed on the Site by you
+    or other users of the Site, including but not limited to all forum
+    posts, wiki edits, notes, questions, comments, videos, and file
+    uploads. You agree that you will use the Site in compliance with these
+    TOS, the <a href="${reverse('honor')}">Honor Code</a>, and all applicable
+    local, state, national, and international laws, rules and regulations,
+    including copyright laws and any laws regarding the transmission of
+    technical data exported from your country of residence and all United
+    States export control laws.
+
+    <p>As a condition of your use of the Services, you will not use the
+    Site in any manner intended to damage, disable, overburden, or impair
+    any <i>MITx</i> server, or the network(s) connected to any <i>MITx</i>
+    server, or interfere with any other party's use and enjoyment of the
+    Site. You may not attempt to gain unauthorized access to the Site,
+    other accounts, computer systems or networks connected to
+    any <i>MITx</i> server through hacking, password mining or any other
+    means. You may not obtain or attempt to obtain any materials or
+    information stored on the Site, its servers, or associated computers
+    through any means not intentionally made available through the
+    Site. </p>
+
+    <h2>The following list of items is strictly prohibited on the Site:</h2>
+    <ol>
+      <li>Content that defames, harasses, or threatens others
+
+      <li>Content that discusses illegal activities with the intent to commit them.
+
+      <li>Content that infringes another&#39;s intellectual property,
+      including, but not limited to, copyrights, or trademarks
+
+      <li>Any inappropriate, profane, pornographic, obscene, indecent, or
+      unlawful content
+
+      <li>Advertising or any form of commercial solicitation
+
+      <li>Political content or content related to partisan political
+      activities
+
+      <li>Viruses, trojan horses, worms, time bombs, corrupted files,
+      malware, spyware, or any other similar software that may damage the
+      operation of another&rsquo;s computer or property
+
+      <li>Content that contains intentional inaccurate information with the
+      intent of misleading others.
+
+      <li>You, furthermore, agree not to scrape, or otherwise download in
+      bulk, user-contributed content, a list or directory of users on the
+      system, or other material including but not limited to on-line
+      textbooks, User Postings, or user information. 
+
+      <li>You agree to not misrepresent or attempt to misrepresent your
+      identity while using the Sites (although you are welcome and
+      encouraged to use an anonymous username in the forums).
+    </ol>
+
+    <h2>User Accounts and Authority</h2>
+
+    <p>In order to participate in Site activities, you must provide an
+    email address (&quot;Email Address&quot;) and a user password
+    (&quot;User Password&quot;) in order to create a user account
+    (&ldquo;User Account&rdquo;). You agree that you will never divulge or
+    share access or access information to your User Account with any third
+    party for any reason. In setting up your User Account, you may be
+    prompted or required to enter additional information, including your
+    name. You understand and agree that all information provided by you is
+    accurate and current. You agree to maintain and update your
+    information to keep it accurate and current. </p>
+
+    <p>We care about the confidentiality and security of your personal
+    information.  Please see our <a href="${reverse('privacy_edx')}">Privacy
+    Policy</a> for more information about what information about
+    you <i>MITx</i> collects and how <i>MITx</i> uses that
+    information.</p>
+
+    <h2>Your Right to Use Content on the Site</h2>
+
+    <p>Unless indicated as being in the public domain, all content on the
+    Site is protected by United States copyright. The texts, exams and
+    other instructional materials provided with the courses offered on
+    this Site are for your personal use in connection with those courses
+    only. MIT is planning to make <i>MITx</i> course content and software
+    infrastructure available under open source licenses that will help
+    create a vibrant ecosystem of contributors and further MIT&rsquo;s
+    goal of making education accessible and affordable to the world. </p>
+
+    <p>Certain reference documents, digital textbooks, articles and other
+    information on the Site are used with the permission of third parties
+    and use of that information is subject to certain rules and
+    conditions, which will be posted along with the information. By using
+    this Site you agree to abide by all such rules and conditions. Due to
+    privacy concerns, User Postings shall be licensed to <i>MITx</i> with
+    the terms discussed below. Please
+    see <a href="${reverse('copyright')}"><i>MITx's Copyright Page</i></a> for
+    more information.</p>
+
+    <h2>User Postings</h2>
+
+    <p><strong>User Postings Representations and Warranties.</strong> By
+    submitting or distributing your User Postings, you affirm, represent,
+    and warrant that you are the creator and owner of or have the
+    necessary licenses, rights, consents, and permissions to reproduce and
+    publish the posted information, and to authorize MIT and <i>MITx</i>'s
+    Users to reproduce, modify, publish, and otherwise use that infomation
+    and distribute your User Postings as necessary to exercise the
+    licenses granted by you below. You, and not <i>MITx</i>, are solely
+    responsible for your User Postings and the consequences of posting or
+    publishing them.</p>
+
+    <p><strong>Limited License Grant to MIT.</strong> By submitting or
+    distributing User Postings to the Site, you hereby grant to MIT a
+    worldwide, non-exclusive, transferable, assignable, fully paid-up,
+    royalty-free, perpetual, irrevocable right and license to host,
+    transfer, display, perform, reproduce, modify, distribute and
+    re-distribute, relicense, and otherwise exploit your User Postings, in
+    whole or in part, in any form, and in any media formats and through
+    any media channels (now known or hereafter developed).</p>
+
+    <p><strong>Limited License Grant to <i>MITx</i> Users.</strong> By
+    submitting or distributing User Postings to the Site, you hereby grant
+    to each User of the Site a non-exclusive license to access and use
+    your User Postings in connection with their use of the Site for their
+    own personal purposes. </p>
+
+    <h2>Use of <i>MITx</i> and MIT Names, Trademarks and Service Marks</h2>
+
+    <p>&ldquo;<i>MITx</i>,&rdquo; &quot;MIT&quot;, &quot;Massachusetts Institute
+    of Technology&quot;, and its logos and seal are trademarks of the
+    Massachusetts Institute of Technology. You may not use MIT&rsquo;s
+    names or logos, or any variations thereof, without prior written
+    consent of MIT. You may not use the MIT name in any of its forms nor
+    MIT seals or logos for promotional purposes, or in any way that
+    deliberately or inadvertently claims, suggests, or in MIT&#39;s sole
+    judgment gives the appearance or impression of a relationship with or
+    endorsement by MIT.
+
+    <p>All Trademarks not owned by MIT that appear on the Site or on or
+    through the services made available on or through the Site, if any,
+    are the property of their respective owners.  Nothing contained
+    on the Site should be construed as granting, by implication, estoppel,
+    or otherwise, any license or right to use any such Trademark displayed
+    on the Site without the written permission of the third party that may
+    own the applicable Trademark.</a>
+
+
+    <h2>Digital Millennium Copyright Act</h2>
+
+    <p> Copyright owners who believe their material has been infringed on
+    the Site should contact MITx's designated copyright agent at
+    dcma-agent@mit.edu or at 77 Massachusetts Avenue, Cambridge, MA
+    02138-4307 Attention: MIT DCMA Agent, W92-263A.</p>
+
+    <p> Notification must include:</P>
+    <ul>
+      <li> Identification of the copyrighted work, or, in the case of
+      multiple works at the same location, a representative list of such
+      works at that site.</li>
+      <li> Identification of the material that is claimed to be infringing
+      or to be the subject of infringing activity. You must include
+      sufficient information for us to locate the material (e.g., url, ip
+      address, computer name).</li>
+      <li> Information for us to be able to contact the complaining party
+      (e.g., email address, phone number).</li>
+      <li> A statement that the complaining party believes that the use of
+      the material has not been authorized by the copyright owner or an
+      authorized agent.</li>
+      <li> A statement that the information in the notification is accurate
+      and that the complaining party is authorized to act on behalf of the
+      copyright owner.</li>
+    </ul>
+
+    <h2>Disclaimer of Warranty / Indemnification/Limitation of Liabilities</h2>
+
+    <p>THE SITE IS PROVIDED &quot;AS IS&quot; AND &quot;AS AVAILABLE&quot;
+    WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING
+    WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS
+    FOR USE FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. MIT does not
+    warrant the Site will operate in an uninterrupted or error-free manner
+    or that the Site is free of viruses or other harmful components. Use
+    of information obtained from or through this Site is at your own
+    risk. Your access to or download of information, materials, or data
+    through the Site or any reference sites is at your own discretion and
+    risk and that you will be solely responsible for any damage to your
+    property (including your computer system) or loss of data that results
+    from the download or use of such material or data. We may close or
+    limit enrollment for pedagogical or technological reasons.</p>
+
+    <p><strong>User Postings Disclaimer.</strong> You understand that when
+    using the Site you will be exposed to User Postings from a variety of
+    sources, and that MIT is not responsible for the accuracy, usefulness,
+    reliability, or intellectual property rights of or relating to such
+    User Postings. You further understand and acknowledge that you may be
+    exposed to User Postings that are inaccurate, offensive, defamatory,
+    indecent or objectionable, and you agree to waive, and hereby do
+    waive, any legal or equitable rights or remedies you have or may have
+    against MIT with respect thereto. MIT does not endorse any User
+    Postings or any opinion, recommendation or advice expressed
+    therein.  <i>MITx</i> has no obligation to monitor any User Postings or
+    any other user communications through the Site. However, <i>MITx</i> reserves
+    the right to review User Postings and to edit or remove, in whole or
+    in part, such User Postings in its sole discretion. If notified by a
+    User or a content owner of a User Posting that allegedly does not
+    conform to the TOS, MIT may investigate the allegation and determine
+    in its sole discretion whether to remove the User Posting, which it
+    reserves the right to do at any time and without notice. </p>
+
+    <p><strong>Links to Other Sites.</strong> The Site may include
+    hyperlinks to sites maintained or controlled by others. MIT is not
+    responsible for and does not routinely screen, approve, review or
+    endorse the contents of or use of any of the products or services that
+    may be offered at these sites. If you decide to access linked third
+    party web sites, you do so at your own risk.</p>
+
+    <p><strong>YOU AGREE THAT MIT WILL NOT BE LIABLE TO YOU FOR ANY LOSS OR
+    DAMAGES, EITHER ACTUAL OR CONSEQUENTIAL, ARISING OUT OF OR RELATING TO
+    THESE TERMS OF SERVICE, OR TO YOUR (OR ANY THIRD PARTY&#39;S) USE OR
+    INABILITY TO USE THE SITE, OR TO YOUR PLACEMENT OF CONTENT ON THE
+    SITE, OR TO YOUR RELIANCE UPON INFORMATION OBTAINED FROM OR THROUGH
+    THE SITE WHETHER BASED IN CONTRACT, TORT, STATUTORY OR OTHER LAW,
+    EXCEPT ONLY IN THE CASE OF DEATH OR PERSONAL INJURY WHERE AND ONLY TO
+    THE EXTENT THAT APPLICABLE LAW REQUIRES SUCH LIABILITY.</strong></p>
+
+    <p><strong>IN PARTICULAR, MIT WILL HAVE NO LIABILTY FOR ANY CONSEQUENTIAL,
+    INDIRECT, PUNITIVE, SPECIAL, EXEMPLARY OR INCIDENTAL DAMAGES, WHETHER
+    FORESEEABLE OR UNFORESEEABLE, (INCLUDING, BUT NOT LIMITED TO, CLAIMS
+    FOR DEFAMATION, ERRORS, LOSS OF DATA, OR INTERRUPTION IN AVAILABILITY
+    OF DATA).</strong</p>
+
+    <h2>Indemnification</h2>
+
+    <p>You agree to defend, hold harmless and indemnify MIT, and its
+    subsidiaries, affiliates, officers, agents, and employees from and
+    against any third-party claims, actions or demands arising out of,
+    resulting from or in any way related to your use of the Site,
+    including any liability or expense arising from any and all claims,
+    losses, damages (actual and consequential), suits, judgments,
+    litigation costs and attorneys&#39; fees, of every kind and nature. In
+    such a case, MIT will provide you with written notice of such claim,
+    suit or action.</p>
+
+    <h2>Miscellaneous</h2>
+
+    <p><strong>Termination Rights.</strong> You agree that MIT, in its sole
+    discretion, may terminate your use of the Site or your participation
+    in it thereof, for any reason or no reason. If you no longer desire to
+    participate in the Site, you may terminate your participation therein
+    upon notice to MIT.</p>
+
+    <p><strong>Entire Agreement.</strong> This Agreement constitutes the entire agreement
+    between you and MIT with respect to your use of the Site, superseding
+    any prior agreements between you and MIT regarding your use of the
+    Site. </p>
+
+    <p><strong>Waiver and Severability of TOS.</strong> The failure of MIT to exercise or
+    enforce any right or provision of the TOS of Site shall not constitute
+    a waiver of such right or provision. If any provision of the TOS is
+    found by a court of competent jurisdiction to be invalid, the parties
+    nevertheless agree that the court should endeavor to give effect to
+    the parties&#39; intentions as reflected in the provision, and the
+    other provisions of the TOS remain in full force and effect.</p>
+
+    <p><strong>Choice of Law/Forum Selection.</strong>  You agree that any dispute
+    arising out of or relating to these Terms or any content posted to a
+    Site will be governed by the laws of the Commonwealth of
+    Massachusetts, excluding its conflicts of law provisions. You further
+    consent to the personal jurisdiction of and exclusive venue in the
+    federal and state courts located in and serving Boston, Massachusetts
+    as the legal forum for any such dispute.</p>
+
+    <p><strong>Effective Date:</strong> February 20, 2012</p><div>
+  </div>
 </section>

lms/templates/video_modal.html

 <%namespace name='static' file='static_content.html'/>
 
-<section class="modal video-modal">
+<section id="video-modal" class="modal video-modal">
   <div class="inner-wrapper">
     ${course.get_about_section("video")}
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
   </div>
 </section>

lms/urls.py

@@ -48,11 +48,37 @@ urlpatterns = ('',
     
     
     #Semi-static views (these need to be rendered and have the login bar, but don't change)
-    url(r'^404$', 'static_template_view.views.render', {'template': '404.html'}, name="404"),
-    url(r'^about$', 'static_template_view.views.render', {'template': 'about.html'}, name="about_edx"),
-    url(r'^university_profile$', 'static_template_view.views.render', {'template': 'university_profile.html'}, name="university_profile"),
-    url(r'^jobs$', 'static_template_view.views.render', {'template': 'jobs.html'}, name="jobs"),
-    url(r'^help$', 'static_template_view.views.render', {'template': 'help.html'}, name="help_edx"),
+    url(r'^404$', 'static_template_view.views.render', 
+        {'template': '404.html'}, name="404"),
+    url(r'^about$', 'static_template_view.views.render', 
+        {'template': 'about.html'}, name="about_edx"),
+    url(r'^jobs$', 'static_template_view.views.render', 
+        {'template': 'jobs.html'}, name="jobs"),
+    url(r'^contact$', 'static_template_view.views.render', 
+        {'template': 'contact.html'}, name="contact"),
+    url(r'^press$', 'static_template_view.views.render', 
+        {'template': 'press.html'}, name="press"),
+    url(r'^faq$', 'static_template_view.views.render', 
+        {'template': 'faq.html'}, name="faq_edx"),
+    url(r'^help$', 'static_template_view.views.render', 
+        {'template': 'help.html'}, name="help_edx"),
+    url(r'^pressrelease$', 'static_template_view.views.render', 
+        {'template': 'pressrelease.html'}, name="pressrelease"),
+    url(r'^tos$', 'static_template_view.views.render', 
+        {'template': 'tos.html'}, name="tos"),
+    url(r'^privacy$', 'static_template_view.views.render', 
+        {'template': 'privacy.html'}, name="privacy_edx"),
+    url(r'^copyright$', 'static_template_view.views.render', 
+        {'template': 'copyright.html'}, name="copyright"),
+    url(r'^honor$', 'static_template_view.views.render', 
+        {'template': 'honor.html'}, name="honor"),
+    
+    
+    
+    #Temporarily static, for testing
+    url(r'^university_profile$', 'static_template_view.views.render', 
+        {'template': 'university_profile.html'}, name="university_profile"),
+    
     
     #TODO: Convert these pages to the new edX layout
     # 'tos.html', 
@@ -69,6 +95,7 @@ if settings.COURSEWARE_ENABLED:
         url(r'^masquerade/', include('masquerade.urls')),
         url(r'^jumpto/(?P<probname>[^/]+)/$', 'courseware.views.jump_to'),
         url(r'^modx/(?P<id>.*?)/(?P<dispatch>[^/]*)$', 'courseware.module_render.modx_dispatch'), #reset_problem'),
+        url(r'^xqueue/(?P<username>[^/]*)/(?P<id>.*?)/(?P<dispatch>[^/]*)$', 'courseware.module_render.xqueue_callback'),
         url(r'^change_setting$', 'student.views.change_setting'),
         url(r'^s/(?P<template>[^/]*)$', 'static_template_view.views.auth_index'),
         url(r'^book/(?P<page>[^/]*)$', 'staticbook.views.index'),

static/sass/marketing-ie.css

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

static/sass/marketing.css

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