Merge pull request #49 from edx/talbs/styling-problem

Basic + Problem View Template/Styling Work

apps/openassessment/peer/api.py

@@ -196,7 +196,7 @@ def _score_if_finished(student_item,
         return
 
     finished_evaluating = has_finished_required_evaluating(
-        student_item.student_id,
+        StudentItemSerializer(student_item).data,
         required_assessments_for_student
     )
     assessments = Assessment.objects.filter(submission=submission)
@@ -255,23 +255,26 @@ def get_assessment_median_scores(submission_id, must_be_graded_by):
         raise PeerAssessmentInternalError(error_message)
 
 
-def has_finished_required_evaluating(student_id, required_assessments):
+def has_finished_required_evaluating(student_item_dict, required_assessments):
     """Check if a student still needs to evaluate more submissions
 
     Per the contract of the peer assessment workflow, a student must evaluate a
     number of peers before receiving feedback on their submission.
 
     Args:
-        student_id (str): The student in the peer grading workflow to check for
-            peer workflow criteria. This argument is required.
+        student_item (dict): The student id is required to determine if the
+            student has completed enough assessments, relative to the item id
+            and course id available in the student item. This argument is
+            required.
         required_assessments (int): The number of assessments a student has to
             submit before receiving the feedback on their submission. This is a
             required argument.
 
     Returns:
-        bool: True if the student has evaluated enough peer submissions to move
+        tuple: True if the student has evaluated enough peer submissions to move
             through the peer assessment workflow. False if the student needs to
-            evaluate more peer submissions.
+            evaluate more peer submissions. The second value is the count of
+            assessments completed.
 
     Raises:
         PeerAssessmentRequestError: Raised when the student_id is invalid, or
@@ -280,16 +283,31 @@ def has_finished_required_evaluating(student_id, required_assessments):
             while evaluating this workflow rule.
 
     Examples:
-        >>> has_finished_required_evaluating("Tim", 3)
-        True
+        >>> student_item_dict = dict(
+        >>>    item_id="item_1",
+        >>>    course_id="course_1",
+        >>>    item_type="type_one",
+        >>>    student_id="Bob",
+        >>> )
+        >>> has_finished_required_evaluating(student_item_dict, 3)
+        True, 3
 
     """
     if required_assessments < 0:
         raise PeerAssessmentRequestError(
             "Required Assessment count must be a positive integer.")
-    return Assessment.objects.filter(
-        scorer_id=student_id
-    ).count() >= required_assessments
+    student_items = StudentItem.objects.filter(
+        item_id=student_item_dict["item_id"],
+        course_id=student_item_dict["course_id"]
+    )
+    submissions = Submission.objects.filter(
+        student_item__in=student_items
+    )
+    count = Assessment.objects.filter(
+        submission__in=submissions,
+        scorer_id=student_item_dict["student_id"]
+    ).count()
+    return count >= required_assessments, count
 
 
 def get_assessments(submission_id):

apps/openassessment/peer/test/test_api.py

@@ -166,27 +166,27 @@ class TestApi(TestCase):
         scores = sub_api.get_score(STUDENT_ITEM)
         self.assertFalse(scores)
 
-        self.assertFalse(peer_api.has_finished_required_evaluating("Tim", REQUIRED_GRADED))
+        self.assertEquals((False, 0), peer_api.has_finished_required_evaluating(STUDENT_ITEM, REQUIRED_GRADED))
         peer_api.create_assessment(
             bob["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT
         )
         peer_api.create_assessment(
             sally["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT
         )
-        self.assertFalse(peer_api.has_finished_required_evaluating("Tim", REQUIRED_GRADED))
+        self.assertEquals((False, 2), peer_api.has_finished_required_evaluating(STUDENT_ITEM, REQUIRED_GRADED))
 
         peer_api.create_assessment(
             jim["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT
         )
-        self.assertFalse(peer_api.has_finished_required_evaluating("Tim", REQUIRED_GRADED))
+        self.assertEquals((False, 3), peer_api.has_finished_required_evaluating(STUDENT_ITEM, REQUIRED_GRADED))
         peer_api.create_assessment(
             buffy["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT
         )
-        self.assertFalse(peer_api.has_finished_required_evaluating("Tim", REQUIRED_GRADED))
+        self.assertEquals((False, 4), peer_api.has_finished_required_evaluating(STUDENT_ITEM, REQUIRED_GRADED))
         peer_api.create_assessment(
             xander["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT
         )
-        self.assertTrue(peer_api.has_finished_required_evaluating("Tim", REQUIRED_GRADED))
+        self.assertEquals((True, 5), peer_api.has_finished_required_evaluating(STUDENT_ITEM, REQUIRED_GRADED))
 
         # Tim should not have a score, because his submission does not have
         # enough assessments.
@@ -212,7 +212,7 @@ class TestApi(TestCase):
 
     @raises(peer_api.PeerAssessmentRequestError)
     def test_bad_configuration(self):
-        peer_api.has_finished_required_evaluating("Tim", -1)
+        peer_api.has_finished_required_evaluating(STUDENT_ITEM, -1)
 
     def test_get_submission_to_evaluate(self):
         self._create_student_and_submission("Tim", "Tim's answer", MONDAY)

apps/openassessment/templates/openassessmentblock/oa_base.html

@@ -10,9 +10,9 @@
  -->
 
 
-<div class="wrapper wrapper--openassessment theme--basic">
+<div class="wrapper wrapper--xblock wrapper--openassessment theme--basic">
     <div class="openassessment" id="openassessment">
-
+        <div class="wrapper--grid">
             <h1 class="openassessment__title">
                 <span class="openassessment__title--super">
                     {{ title }}
@@ -55,12 +55,6 @@
                     <div class="openassessment__prompt__copy ui-toggle-visibility__content">
                         <p>{{ question }}</p>
                     </div>
-
-                <ul class="list list--controls">
-                    <li class="list--controls__item">
-                        <a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
-                    </li>
-                </ul>
                 </article>
             </div>
 
@@ -77,4 +71,5 @@
             <!-- STATUS: problem grade -->
             {% include "openassessmentblock/oa_grade.html" %}
         </div>
+    </div>
 </div>

apps/openassessment/templates/openassessmentblock/oa_grade.html

@@ -18,6 +18,6 @@
 
     <div class="openassessment__grade__content">
         <span class="grade__value">{{ grade_state.value }}</span>
-        <p>{{ grade_state.message }}</p>
+        <p class="grade__description">{{ grade_state.message }}</p>
     </div>
 </div>

apps/openassessment/templates/openassessmentblock/oa_peer_assessment.html → apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html

@@ -9,41 +9,53 @@
 
  -->
 
-
 <!-- CASE: default/not started -->
-<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
-    <div id="peer_submission_uuid" hidden="true">{{ peer_submission.uuid }}</div>
+{% block list_item %}
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
+{% endblock %}
+    <span class="system__element" id="peer_submission_uuid">
+        {{ peer_submission.uuid }}
+    </span>
+    <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">
+            <span class="step__counter"></span>
+            <span class="wrapper--copy">
                 <span class="step__label">Evaluate Peers' Responses</span>
-        <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
+                <span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
+            </span>
         </h2>
 
+        {% block title %}
         <span class="step__status">
           <span class="step__status__label">This step's status:</span>
           <span class="step__status__value">
-        <span class="step__status__value--completed">0</span> of
-        <span class="step__status__value--required">5</span> completed
+            <span class="copy">
+                <span class="step__status__value--completed">{{ graded }}</span> of
+                <span class="step__status__value--required">{{ must_grade }}</span> completed
+            </span>
           </span>
         </span>
-{#</header>#}
+        {% endblock %}
+    </header>
 
-<div class="step__instruction">
+    {% block body %}
+    <div class="step__instruction">
         <p>Please read and evaluate the following response from one of your peers in the course.</p>
-</div>
+    </div>
 
-<div class="step__content">
+    <div class="step__content">
         <ul class="list--peer-assessments">
             <li class="list--peer-assessments__item">
                 <article class="peer-assessment" id="peer-assessment--001">
                     <header class="peer-assessment__header">
                         <h3 class="peer-assessment__title">Assessment #
-                        <span class="peer-assessment__number--current">1</span> of
-                        <span class="peer-assessment__number--required">3</span>
+                            <span class="peer-assessment__number--current">{{ graded }}</span> of
+                            <span class="peer-assessment__number--required">{{ must_grade }}</span>
                         </h3>
 
                 <span class="peer-assessment__expected-time">
                   <span class="label">Expected Time Spent:</span>
-              <span class="value">20 Minutes</span>
+                  <span class="value">{{ estimated_time }}</span>
                 </span>
                     </header>
 
@@ -54,6 +66,7 @@
 
                     <form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
                         <fieldset class="assessment__fields">
+                            <legend class="assessment__instruction">{{ rubric_instructions }}</legend>
 
                             <ol class="list list--fields assessment__rubric">
                                 {% for criterion in rubric_criteria %}
@@ -94,12 +107,13 @@
 
                         <ul class="list list--actions">
                             <li class="list--actions__item">
-                            <button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit">Submit your assessment &amp; move to response #2</button>
+                                <button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit">{{ submit_button_text }}</button>
                             </li>
                         </ul>
                     </form>
                 </article>
             </li>
         </ul>
-</div>
+    </div>
+    {%  endblock %}
 </li>

apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html

+{%  extends "openassessmentblock/peer/oa_peer_assessment.html" %}
+<!-- CASE: started, but incomplete and problem closed -->
+{% block list_item %}
+<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
+{% endblock %}
+
+{% block title %}
+    <span class="step__status">
+      <span class="step__status__label">This step's status:</span>
+      <span class="step__status__value">
+        <i class="ico fa fa-exclamation-triangle"></i>
+        <span class="copy">
+          <span class="step__status__value--completed">{{ graded }}</span> of
+          <span class="step__status__value--required">{{ must_grade }}</span> completed
+        </span>
+      </span>
+    </span>
+{% endblock %}
+
+{% block body %}{% endblock %}

apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html

+{%  extends "openassessmentblock/peer/oa_peer_assessment.html" %}
+<!-- CASE: completed -->
+{% block list_item %}
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
+{% endblock %}
+
+{% block title %}
+    <span class="step__status">
+      <span class="step__status__label">This step's status:</span>
+      <span class="step__status__value">
+        <i class="ico fa fa-check"></i>
+        <span class="copy">
+          <span class="step__status__value--completed">{{ graded }}</span> of
+          <span class="step__status__value--required">{{ must_grade }}</span> completed
+        </span>
+      </span>
+    </span>
+{% endblock %}
+
+{% block body %}{% endblock %}

apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html

+{%  extends "openassessmentblock/peer/oa_peer_assessment.html" %}
+<!-- CASE: no peer responses to assess -->
+{% block list_item %}
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
+{% endblock %}
+
+{% block title %}
+    <span class="step__status">
+      <span class="ico"><i class="fa fa-info-circle"></i></span>
+      <span class="step__status__label">This step's status:</span>
+      <span class="step__status__value">
+      <span class="copy">Awaiting Peer Responses</span>
+      </span>
+    </span>
+{% endblock %}
+
+{% block body %}{% endblock %}

apps/openassessment/templates/openassessmentblock/oa_response.html → apps/openassessment/templates/openassessmentblock/response/oa_response.html

@@ -16,21 +16,28 @@
 {% block list_item %}
 <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
 {% endblock %}
-    {%  block header %}
-    <!--header class="step__header ui-toggle-visibility__control"-->
+
+    <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">
+            <span class="step__counter"></span>
+            <span class="wrapper--copy">
                 <span class="step__label">Your Response</span>
                 {% if formatted_due_datetime %}
                 <span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
                 {% endif %}
+            </span>
         </h2>
 
+        {%  block title %}
         <span class="step__status">
             <span class="step__status__label">This step's status:</span>
-      <span class="step__status__value">{{ step_status }}</span>
+            <span class="step__status__value">
+                <i class="ico fa fa-check"></i>
+                <span class="copy">{{ step_status }}</span>
+            </span>
         </span>
-    <!--/header-->
         {% endblock %}
+    </header>
 
     {% block body %}
     <div class="step__instruction">
@@ -39,14 +46,14 @@
 
     <div class="step__content">
         <form id="response__submission" class="response__submission">
-            <ol class="list list--fields">
+            <ol class="list list--fields response__submission__content">
                 <li class="field field--textarea submission__answer" id="submission__answer">
-                    <label for="submission__answer__value">Please provide your response to the above question</label>
+                    <label class="sr" for="submission__answer__value">Please provide your response to the above question</label>
                     <textarea id="submission__answer__value" placeholder=""></textarea>
                 </li>
             </ol>
 
-            <ul class="list list--actions">
+            <ul class="list list--actions response__submission__actions">
                 <li class="list--actions__item">
                     <button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button>
                     <span class="tip">you may continue to work on your response until you submit</span>
@@ -58,7 +65,10 @@
     <div class="step__actions">
         <ul class="list list--actions">
             <li class="list--actions__item">
-                <a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">Submit your response &amp; move forward</a>
+                <a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
+                    <span class="copy">Submit your response &amp; move forward</span>
+                    <i class="ico fa fa-arrow-right"></i>
+                </a>
             </li>
         </ul>
     </div>

apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html

+{%  extends "openassessmentblock/response/oa_response.html" %}
+{% block list_item %}
+<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
+{% endblock %}
+
+{% block title %}
+    <span class="step__status">
+      <span class="step__status__label">This step's status:</span>
+      <span class="step__status__value">
+        <i class="ico fa fa-exclamation-triangle"></i>
+        <span class="copy">{{ step_status }}</span>
+      </span>
+    </span>
+{% endblock %}
+
+{% block body %}
+    <div class="step__instruction">
+        <p>You did not complete this portion of the problem before its due date.</p>
+    </div>
+{% endblock %}

apps/openassessment/templates/openassessmentblock/oa_response_closed.html → apps/openassessment/templates/openassessmentblock/response/oa_response_collapsed.html

-{%  extends "openassessmentblock/oa_response.html" %}
+{%  extends "openassessmentblock/response/oa_response.html" %}
+
 {% block list_item %}
-<li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility">
+    <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
 {% endblock %}
+
 {% block body %}
-    <div class="step__instruction">
-        <p>You did not complete this portion of the problem before its due date.</p>
-    </div>
 {% endblock %}

apps/openassessment/templates/openassessmentblock/oa_response_graded.html → apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html

-{%  extends "openassessmentblock/oa_response.html" %}
+{%  extends "openassessmentblock/response/oa_response.html" %}
+
 {% block list_item %}
-<li id="openassessment__response" class="openassessment__steps__step step--response is--graded is--collapsed ui-toggle-visibility">
+<li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility">
+{% endblock %}
+
+{% block title %}
+    <span class="step__status">
+      <span class="step__status__label">This step's status:</span>
+      <span class="step__status__value">
+        <i class="ico fa fa-check"></i>
+        <span class="copy">{{ step_status }}</span>
+      </span>
+    </span>
 {% endblock %}
+
 {% block body %}
 <div class="step__content">
-<!-- user's response -->
-<article class="submission__answer__display">
+    <!-- user's response -->
+    <article class="submission__answer__display">
         <h3 class="submission__answer__display__title">Your Submitted Response</h3>
 
         <div class="submission__answer__display__content">
             {{ student_submission.answer }}
         </div>
-</article>
+    </article>
+
+    <!-- peer evaluations -->
+    <article class="submission__peer-evaluations">
+        <h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
 
-<!-- peer evaluations -->
-<article class="submission__peer-evaluations">
-<h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
+        <ol class="list submission__peer-evaluations__questions">
 
-<ol class="list submission__peer-evaluations__questions">
-{% for criterion in rubric_criteria %}
-{% with criterion_num=forloop.counter %}
-<!-- individual question from rubric -->
-<li class="question question--{{ criterion_num }} ui-toggle-visibility">
+        {% for criterion in rubric_criteria %}
+        {% with criterion_num=forloop.counter %}
+        <!-- individual question from rubric -->
+        <li class="question question--{{ criterion_num }} ui-toggle-visibility">
             <h4 class="question__title ui-toggle-visibility__control">
-        <span class="title__copy">{{ criterion.name }}</span>
+                <span class="question__title__copy">{{ criterion.name }}</span>
+
                 <span class="question__score">
                   <span class="label sr">Overall Question Score</span>
                   <span class="question__score__value">{{ criterion.median_score }}</span>
                   <span class="label label--divider sr">out of</span>
-              <span class="question__score__potential">{{ criterion.total_value }}</span>
+                  <span class="question__score__potential">
+                    {{ criterion.total_value }}
+                    <span class="unit">Points</span>
+                  </span>
                 </span>
             </h4>
+
+            <ul class="question__answers ui-toggle-visibility__content">
                 {% for assessment in peer_assessments %}
                 {% with peer_num=forloop.counter %}
                 {% for part in assessment.parts %}
                 {% if part.option.criterion.name == criterion.name %}
-    <ul class="question__answers ui-toggle-visibility__content">
                 <li class="answer peer-assessment--{{ peer_num}}"
                     id="question--{{ criterion_num }}__answer-{{ peer_num }}">
                     <h5 class="answer__title">
@@ -53,33 +71,33 @@
                         {{ part.option.explanation }}
                       </span>
                 </li>
-    </ul>
                 {% endif %}
                 {% endfor %}
                 {% endwith %}
                 {% endfor %}
-</li>
-{% endwith %}
-{% endfor %}
-</ol>
-</article>
+            </ul>
+        </li>
+        {% endwith %}
+        {% endfor %}
+        </ol>
+    </article>
 
-<!-- peer assessment feedback -->
-<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
+    <!-- peer assessment feedback -->
+    <form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
         <h3 class="submission__feeedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3>
 
         <ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
             <li class="field field--textarea feedback__remarks" id="feedback__remarks">
-            <label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</label>
+                <label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here.</label>
                 <textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was..."></textarea>
             </li>
         </ol>
 
-    <ul class="list list--actions">
+        <ul class="list list--actions submission__feeedback__actions">
             <li class="list--actions__item">
                 <button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
             </li>
         </ul>
-</form>
+    </form>
 </div>
 {% endblock %}

apps/openassessment/templates/openassessmentblock/oa_response_submitted.html → apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html

-{% extends "openassessmentblock/oa_response.html" %}
+{% extends "openassessmentblock/response/oa_response.html" %}
+
 {% block list_item %}
-<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted is--unavailable ui-toggle-visibility">
+<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility">
+{% endblock %}
+
+{% block title %}
+    <span class="step__status">
+      <span class="step__status__label">This step's status:</span>
+      <span class="step__status__value">
+        <i class="ico fa fa-check"></i>
+        <span class="copy">{{ step_status }}</span>
+      </span>
+    </span>
 {% endblock %}
+
 {% block body %}
     <div class="step__content">
         <!-- user's response -->

apps/openassessment/templates/openassessmentblock/oa_self_assessment.html → apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html

@@ -11,20 +11,30 @@
 
 
 <!-- CASE: default/not started -->
+{% block list_item %}
 <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
-{#    <header class="step__header">#}
+{% endblock %}
+    <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">
-            <span class="step__title__label">Evaluate Your Response</span>
-            <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
+            <span class="step__counter"></span>
+            <span class="wrapper--copy">
+                <span class="step__label">Evaluate Your Response</span>
+                <span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
+            </span>
         </h2>
 
+        {% block title %}
         <span class="step__status">
           <span class="step__status__label">This step's status:</span>
-      <span class="step_status_value">Incomplete</span>
+          <span class="step__status__value">
+              <span class="copy">{{ step_status }}</span>
+          </span>
         </span>
-{#    </header>#}
+        {% endblock %}
+    </header>
 
-    <div class="step--content">
+    {% block body %}
+    <div class="step__content">
         <article class="self-assessment" id="self-assessment">
             <header class="self-assessment__header">
                 <h3 class="self-assessment__title">Your Submitted Response</h3>
@@ -44,18 +54,23 @@
                             <!-- individual rubric question (radio-based choice) -->
                             <li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
                                 <h4 class="question__title">
-                                            {{ criterion.instructions }}
+                                    {{ criterion.prompt }}
                                     <span class="label--required">* <span class="sr">(Required)</span></span>
                                 </h4>
 
                                 <ol class="question__answers">
-                                            {% for value, text in criterion.options %}
+                                    {% for option in criterion.options %}
                                         <li class="answer">
                                             <div class="wrapper--input">
-                                                        <input type="radio" name="assessment__rubric__question--{{ criterion.name }}" id="assessment__rubric__question--{{ criterion.name }}--01" class="answer__value" value="answer--001__option--01 - Very Well" />
-                                                        <label for="assessment__rubric__question--001__option--01" class="answer__label">({{ value }}) {{ text }}</label>
+                                                <input type="radio"
+                                                       name="{{ criterion.name }}"
+                                                       id="assessment__rubric__question--{{ criterion.name }}"
+                                                       class="answer__value"
+                                                       value="{{ option.name }}" />
+                                                <label for="assessment__rubric__question--001__option--01"
+                                                       class="answer__label">{{ option.name }}</label>
                                             </div>
-                                                    <span class="answer__tip">TODO: Criterion Instructions</span>
+                                            <span class="answer__tip">{{ option.explanation }}</span>
                                         </li>
                                     {% endfor %}
                                 </ol>
@@ -77,7 +92,6 @@
                 </ul>
             </form>
         </article>
-            </li>
-        </ul>
     </div>
+    {% endblock %}
 </li>

apps/openassessment/templates/openassessmentblock/self/oa_self_assessment_collapsed.html

+{%  extends "openassessmentblock/self/oa_self_assessment.html" %}
+
+{% block list_item %}
+    <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
+{% endblock %}
+
+{% block body %}
+{% endblock %}

apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html

+{%  extends "openassessmentblock/self/oa_self_assessment.html" %}
+
+<!-- CASE: not started and problem closed -->
+{% block list_item %}
+<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
+{% endblock %}
+
+{% block title %}
+    <span class="step__status">
+      <span class="step__status__label">This step's status:</span>
+      <span class="step__status__value">
+        <i class="ico fa fa-exclamation-triangle"></i>
+        <span class="copy">{{ step_status }}</span>
+      </span>
+    </span>
+{% endblock %}
+
+{% block body %}{% endblock %}

apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html

+{%  extends "openassessmentblock/self/oa_self_assessment.html" %}
+
+<!-- CASE: complete -->
+{% block list_item %}
+<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
+{% endblock %}
+
+{% block title %}
+    <span class="step__status">
+      <span class="step__status__label">This step's status:</span>
+      <span class="step__status__value">
+        <i class="ico fa fa-check"></i>
+        <span class="copy">{{ step_status }}</span>
+      </span>
+    </span>
+{% endblock %}
+
+{% block body %}{% endblock %}

apps/openassessment/templates/openassessmentblock/t-base.html

@@ -10,9 +10,10 @@
  -->
 
 
-<div class="wrapper wrapper--openassessment theme--basic">
+<div class="wrapper wrapper--openassessment wrapper--xblock theme--basic">
   <div class="openassessment" id="openassessment">
 
+    <div class="wrapper--grid">
       <h1 class="openassessment__title">
         <span class="openassessment__title--super">
           Assignment Number 1 - Censorship in Libraries
@@ -96,4 +97,5 @@
       <!-- STATUS: problem grade -->
       <!-- SEE t-grade.html for all cases -->
     </div>
+  </div>
 </div>

apps/openassessment/templates/openassessmentblock/t-grade.html

@@ -85,12 +85,4 @@
   <div class="openassessment__grade__content">
     <span class="grade__value">4.00</span> out of <span class="grade__potential">5.00</span>
   </div>
-
-  <div class="grade__actions">
-    <ul class="list list--actions">
-      <li class="list--actions__item">
-        <a class="action action--view">View in Courseware</a>
-      </li>
-    </ul>
-  </div>
 </div>

apps/openassessment/templates/openassessmentblock/t-peer-assessment.html

@@ -11,11 +11,14 @@
 
 
 <!-- CASE: default/not started -->
-<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
   <header class="step__header">
     <h2 class="step__title">
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
         <span class="step__label">Assess Peers' Responses</span>
         <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -236,11 +239,14 @@
 
 
 <!-- CASE: started, but incomplete -->
-<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
   <header class="step__header">
     <h2 class="step__title">
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
         <span class="step__label">Assess Peers' Responses</span>
         <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -461,11 +467,14 @@
 
 
 <!-- CASE: started, but incomplete and problem closed -->
-<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--unavailable">
+<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
   <header class="step__header">
     <h2 class="step__title">
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
         <span class="step__label">Assess Peers' Responses</span>
         <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -481,11 +490,14 @@
 
 
 <!-- CASE: no peer responses to assess -->
-<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable">
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
   <header class="step__header">
     <h2 class="step__title">
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
         <span class="step__label">Assess Peers' Responses</span>
         <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -500,11 +512,14 @@
 
 
 <!-- CASE: completed -->
-<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--collapsed">
   <header class="step__header">
     <h2 class="step__title">
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
         <span class="step__label">Assess Peers' Responses</span>
         <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">

apps/openassessment/templates/openassessmentblock/t-response.html

@@ -13,11 +13,14 @@
 
 
 <!-- CASE: default/unanswered -->
-<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
+<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--expanded">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
-      <span class="step__label">Your Response</span>
-      <span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
+        <span class="step__title__label">Your Response</span>
+        <span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -62,8 +65,11 @@
 <li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
-      <span class="step__label">Your Response</span>
-      <span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
+        <span class="step__title__label">Your Response</span>
+        <span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -82,8 +88,11 @@
 <li id="openassessment__response" class="openassessment__steps__step step--response is--saved ui-toggle-visibility">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
-      <span class="step__label">Your Response</span>
-      <span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
+        <span class="step__title__label">Your Response</span>
+        <span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status is--updated">
@@ -128,8 +137,11 @@
 <li id="openassessment__response" class="openassessment__steps__step step--response is--saved is--unavailable ui-toggle-visibility">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
-      <span class="step__label">Your Response</span>
-      <span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
+        <span class="step__title__label">Your Response</span>
+        <span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -164,8 +176,11 @@
 <li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
-      <span class="step__label">Your Response</span>
-      <span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
+        <span class="step__title__label">Your Response</span>
+        <span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -196,8 +211,11 @@
 <li id="openassessment__response" class="openassessment__steps__step step--response is--submitted is--unavailable ui-toggle-visibility">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
-      <span class="step__label">Your Response</span>
-      <span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
+        <span class="step__title__label">Your Response</span>
+        <span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -228,8 +246,11 @@
 <li id="openassessment__response" class="openassessment__steps__step step--response is--submitted awaiting--peer-responses ui-toggle-visibility">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
-      <span class="step__label">Your Response</span>
-      <span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      <span class="step__counter"></span>
+     <span class="wrapper--copy">
+        <span class="step__title__label">Your Response</span>
+        <span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -260,8 +281,11 @@
 <li id="openassessment__response" class="openassessment__steps__step step--response is--graded is--collapsed ui-toggle-visibility">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
         <span class="step__title__label">Your Response</span>
         <span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">

apps/openassessment/templates/openassessmentblock/t-self-assessment.html

@@ -10,8 +10,11 @@
 <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
         <span class="step__title__label">Assess Your Response</span>
         <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -212,11 +215,14 @@
 </li>
 
 <!-- CASE: not started and problem closed -->
-<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--unavailable ui-toggle-visibility">
+<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--unavailable ui-toggle-visibility is--collapsed">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
         <span class="step__title__label">Assess Your Response</span>
         <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">
@@ -230,11 +236,14 @@
 </li>
 
 <!-- CASE: complete -->
-<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
+<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility is--collapsed">
   <header class="step__header ui-toggle-visibility__control">
     <h2 class="step__title">
+      <span class="step__counter"></span>
+      <span class="wrapper--copy">
         <span class="step__title__label">Assess Your Response</span>
         <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
+      </span>
     </h2>
 
     <span class="step__status">

apps/openassessment/xblock/peer_assessment_mixin.py

@@ -67,14 +67,44 @@ class PeerAssessmentMixin(object):
         more information on rendering XBlock sections.
 
         """
-        assessment = self.get_assessment_module('peer-assessment')
-        if assessment:
-            peer_sub = self.get_peer_submission(self.get_student_item_dict(), assessment)
         context_dict = {
-                "peer_submission": peer_sub,
-                "rubric_criteria": self.rubric_criteria
+            "rubric_criteria": self.rubric_criteria,
+            "estimated_time": "20 minutes"  # TODO: Need to configure this.
         }
-        return self.render_assessment('openassessmentblock/oa_peer_assessment.html', context_dict)
+        path = 'openassessmentblock/peer/oa_peer_waiting.html'
+        assessment = self.get_assessment_module('peer-assessment')
+        if assessment:
+
+            context_dict["must_grade"] = assessment["must_grade"]
+
+            student_item = self.get_student_item_dict()
+
+
+            finished, count = peer_api.has_finished_required_evaluating(
+                student_item,
+                assessment["must_grade"]
+            )
+            context_dict["graded"] = count
+            if finished:
+                path = "openassessmentblock/peer/oa_peer_complete.html"
+            else:
+                peer_sub = self.get_peer_submission(student_item, assessment)
+                if peer_sub:
+                    path = 'openassessmentblock/peer/oa_peer_assessment.html'
+                    context_dict["peer_submission"] = peer_sub
+
+            if assessment["must_grade"] - count == 1:
+                context_dict["submit_button_text"] = "Submit your assessment & move onto next step."
+            else:
+                context_dict["submit_button_text"] = "Submit your assessment & move to response #{}".format(count + 1)
+
+
+            problem_open, date = self.is_open()
+            if not problem_open and date == "due" and not finished:
+                path = 'openassessmentblock/peer/oa_peer_closed.html'
+
+
+        return self.render_assessment(path, context_dict)
 
     def get_peer_submission(self, student_item_dict, assessment):
         peer_submission = False

apps/openassessment/xblock/self_assessment_mixin.py

@@ -16,5 +16,5 @@ class SelfAssessmentMixin(object):
 
     @XBlock.handler
     def render_self_assessment(self, data, suffix=''):
-        return self.render_assessment('openassessmentblock/oa_self_assessment.html')
+        return self.render_assessment('openassessmentblock/self/oa_self_assessment.html')
 

apps/openassessment/xblock/static/css/openassessment.css

-@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}/*!
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}/*!
  *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */@font-face{font-family:'FontAwesome';src:url("../fonts/libs/font-awesome/fontawesome-webfont.eot?v=4.0.3");src:url("../fonts/libs/font-awesome/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"),url("../fonts/libs/font-awesome/fontawesome-webfont.woff?v=4.0.3") format("woff"),url("../fonts/libs/font-awesome/fontawesome-webfont.ttf?v=4.0.3") format("truetype"),url("../fonts/libs/font-awesome/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");font-weight:normal;font-style:normal}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333em;line-height:0.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14286em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14286em;width:2.14286em;top:0.14286em;text-align:center}.fa-li.fa-lg{left:-1.85714em}.fa-border{padding:.2em .25em .15em;border:solid 0.08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-asc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-desc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-reply-all:before{content:"\f122"}.fa-mail-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.wrapper--xblock{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}.wrapper--xblock article,.wrapper--xblock aside,.wrapper--xblock details,.wrapper--xblock figcaption,.wrapper--xblock figure,.wrapper--xblock footer,.wrapper--xblock header,.wrapper--xblock hgroup,.wrapper--xblock main,.wrapper--xblock nav,.wrapper--xblock section,.wrapper--xblock summary{display:block}.wrapper--xblock audio,.wrapper--xblock canvas,.wrapper--xblock progress,.wrapper--xblock video{display:inline-block;vertical-align:baseline}.wrapper--xblock audio:not([controls]){display:none;height:0}.wrapper--xblock [hidden],.wrapper--xblock template{display:none}.wrapper--xblock a{background:transparent}.wrapper--xblock a:active,.wrapper--xblock a:hover{outline:0}.wrapper--xblock abbr[title]{border-bottom:1px dotted}.wrapper--xblock b,.wrapper--xblock strong{font-weight:bold}.wrapper--xblock dfn{font-style:italic}.wrapper--xblock h1{font-size:2em;margin:0.67em 0}.wrapper--xblock mark{background:#ff0;color:#000}.wrapper--xblock small{font-size:80%}.wrapper--xblock sub,.wrapper--xblock sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.wrapper--xblock sup{top:-0.5em}.wrapper--xblock sub{bottom:-0.25em}.wrapper--xblock img{border:0}.wrapper--xblock svg:not(:root){overflow:hidden}.wrapper--xblock figure{margin:1em 40px}.wrapper--xblock hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}.wrapper--xblock pre{overflow:auto}.wrapper--xblock code,.wrapper--xblock kbd,.wrapper--xblock pre,.wrapper--xblock samp{font-family:monospace, monospace;font-size:1em}.wrapper--xblock button,.wrapper--xblock input,.wrapper--xblock optgroup,.wrapper--xblock select,.wrapper--xblock textarea{color:inherit;font:inherit;margin:0}.wrapper--xblock button{overflow:visible}.wrapper--xblock button,.wrapper--xblock select{text-transform:none}.wrapper--xblock button,.wrapper--xblock html input[type="button"],.wrapper--xblock input[type="reset"],.wrapper--xblock input[type="submit"]{-webkit-appearance:button;cursor:pointer}.wrapper--xblock button[disabled],.wrapper--xblock html input[disabled]{cursor:default}.wrapper--xblock button::-moz-focus-inner,.wrapper--xblock input::-moz-focus-inner{border:0;padding:0}.wrapper--xblock input{line-height:normal}.wrapper--xblock input[type="checkbox"],.wrapper--xblock input[type="radio"]{box-sizing:border-box;padding:0}.wrapper--xblock input[type="number"]::-webkit-inner-spin-button,.wrapper--xblock input[type="number"]::-webkit-outer-spin-button{height:auto}.wrapper--xblock input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.wrapper--xblock input[type="search"]::-webkit-search-cancel-button,.wrapper--xblock input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}.wrapper--xblock fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}.wrapper--xblock legend{border:0;padding:0}.wrapper--xblock textarea{overflow:auto}.wrapper--xblock optgroup{font-weight:bold}.wrapper--xblock table{border-collapse:collapse;border-spacing:0}.wrapper--xblock td,.wrapper--xblock th{padding:0}.wrapper--xblock div,.wrapper--xblock span,.wrapper--xblock applet,.wrapper--xblock object,.wrapper--xblock iframe,.wrapper--xblock h1,.wrapper--xblock h2,.wrapper--xblock h3,.wrapper--xblock h4,.wrapper--xblock h5,.wrapper--xblock h6,.wrapper--xblock p,.wrapper--xblock blockquote,.wrapper--xblock pre,.wrapper--xblock a,.wrapper--xblock abbr,.wrapper--xblock acronym,.wrapper--xblock address,.wrapper--xblock big,.wrapper--xblock cite,.wrapper--xblock code,.wrapper--xblock del,.wrapper--xblock dfn,.wrapper--xblock em,.wrapper--xblock img,.wrapper--xblock ins,.wrapper--xblock kbd,.wrapper--xblock q,.wrapper--xblock s,.wrapper--xblock samp,.wrapper--xblock small,.wrapper--xblock strike,.wrapper--xblock strong,.wrapper--xblock sub,.wrapper--xblock sup,.wrapper--xblock tt,.wrapper--xblock var,.wrapper--xblock b,.wrapper--xblock u,.wrapper--xblock i,.wrapper--xblock center,.wrapper--xblock dl,.wrapper--xblock dt,.wrapper--xblock dd,.wrapper--xblock ol,.wrapper--xblock ul,.wrapper--xblock li,.wrapper--xblock fieldset,.wrapper--xblock form,.wrapper--xblock label,.wrapper--xblock legend,.wrapper--xblock table,.wrapper--xblock caption,.wrapper--xblock tbody,.wrapper--xblock tfoot,.wrapper--xblock thead,.wrapper--xblock tr,.wrapper--xblock th,.wrapper--xblock td,.wrapper--xblock article,.wrapper--xblock aside,.wrapper--xblock canvas,.wrapper--xblock details,.wrapper--xblock figcaption,.wrapper--xblock figure,.wrapper--xblock footer,.wrapper--xblock header,.wrapper--xblock hgroup,.wrapper--xblock menu,.wrapper--xblock nav,.wrapper--xblock section,.wrapper--xblock summary,.wrapper--xblock time,.wrapper--xblock mark,.wrapper--xblock audio,.wrapper--xblock video{margin:0;vertical-align:baseline;border:0;padding:0;outline:0}.wrapper--xblock abbr[title]{border-bottom:none;text-decoration:none;cursor:help}.list--actions:last-child,.list--docs:last-child,.list--steps:last-child,.list--controls:last-child,.list--fields:last-child,.list--help:last-child,.nav--wizard:last-child,.list--tips:last-child,.field--group:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0;margin-right:0;border-right:none;padding-right:0}[class^="wrapper-"]{*zoom:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%}[class^="wrapper-"]:before,[class^="wrapper-"]:after{content:" ";display:table}[class^="wrapper-"]:after{clear:both}@-webkit-keyframes fadeIn{0%{opacity:0.0}50%{opacity:0.5}100%{opacity:1.0}}@-moz-keyframes fadeIn{0%{opacity:0.0}50%{opacity:0.5}100%{opacity:1.0}}@-o-keyframes fadeIn{0%{opacity:0.0}50%{opacity:0.5}100%{opacity:1.0}}@keyframes fadeIn{0%{opacity:0.0}50%{opacity:0.5}100%{opacity:1.0}}@-webkit-keyframes fadeInLeft{0%{-webkit-transform:translateX(-40px);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@-moz-keyframes fadeInLeft{0%{-moz-transform:translateX(-40px);opacity:0}100%{-moz-transform:translateX(0);opacity:1}}@-o-keyframes fadeInLeft{0%{-o-transform:translateX(-40px);opacity:0}100%{-o-transform:translateX(0);opacity:1}}@keyframes fadeInLeft{0%{transform:translateX(-40px);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeInRight{0%{-webkit-transform:translateX(40px);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@-moz-keyframes fadeInRight{0%{-moz-transform:translateX(40px);opacity:0}100%{-moz-transform:translateX(0);opacity:1}}@-o-keyframes fadeInRight{0%{-o-transform:translateX(40px);opacity:0}100%{-o-transform:translateX(0);opacity:1}}@keyframes fadeInRight{0%{transform:translateX(40px);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeInUp{0%{-webkit-transform:translateY(20px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@-moz-keyframes fadeInUp{0%{-moz-transform:translateY(20px);opacity:0}100%{-moz-transform:translateY(0);opacity:1}}@-o-keyframes fadeInUp{0%{-o-transform:translateY(20px);opacity:0}100%{-o-transform:translateY(0);opacity:1}}@keyframes fadeInUp{0%{transform:translateY(20px);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translateY(-20px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@-moz-keyframes fadeInDown{0%{-moz-transform:translateY(-20px);opacity:0}100%{-moz-transform:translateY(0);opacity:1}}@-o-keyframes fadeInDown{0%{-o-transform:translateY(-20px);opacity:0}100%{-o-transform:translateY(0);opacity:1}}@keyframes fadeInDown{0%{transform:translateY(-20px);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeOut{0%{opacity:1.0}50%{opacity:0.5}100%{opacity:0.0}}@-moz-keyframes fadeOut{0%{opacity:1.0}50%{opacity:0.5}100%{opacity:0.0}}@-o-keyframes fadeOut{0%{opacity:1.0}50%{opacity:0.5}100%{opacity:0.0}}@keyframes fadeOut{0%{opacity:1.0}50%{opacity:0.5}100%{opacity:0.0}}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-4000px);opacity:0}100%{-webkit-transform:translateX(0)}}@-moz-keyframes slideInLeft{0%{-moz-transform:translateX(-4000px);opacity:0}100%{-moz-transform:translateX(0)}}@-o-keyframes slideInLeft{0%{-o-transform:translateX(-4000px);opacity:0}100%{-o-transform:translateX(0)}}@keyframes slideInLeft{0%{transform:translateX(-4000px);opacity:0}100%{transform:translateX(0)}}@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(4000px);opacity:0}100%{-webkit-transform:translateX(0)}}@-moz-keyframes slideInRight{0%{-moz-transform:translateX(4000px);opacity:0}100%{-moz-transform:translateX(0)}}@-o-keyframes slideInRight{0%{-o-transform:translateX(4000px);opacity:0}100%{-o-transform:translateX(0)}}@keyframes slideInRight{0%{transform:translateX(4000px);opacity:0}100%{transform:translateX(0)}}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-4000px);opacity:0}100%{-webkit-transform:translateY(0)}}@-moz-keyframes slideInDown{0%{-moz-transform:translateY(-4000px);opacity:0}100%{-moz-transform:translateY(0)}}@-o-keyframes slideInDown{0%{-o-transform:translateY(-4000px);opacity:0}100%{-o-transform:translateY(0)}}@keyframes slideInDown{0%{transform:translateY(-4000px);opacity:0}100%{transform:translateY(0)}}@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(4000px);opacity:0}100%{-webkit-transform:translateY(0)}}@-moz-keyframes slideInUp{0%{-moz-transform:translateY(4000px);opacity:0}100%{-moz-transform:translateY(0)}}@-o-keyframes slideInUp{0%{-o-transform:translateY(4000px);opacity:0}100%{-o-transform:translateY(0)}}@keyframes slideInUp{0%{transform:translateY(4000px);opacity:0}100%{transform:translateY(0)}}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0)}100%{-webkit-transform:translateX(-4000px);opacity:0}}@-moz-keyframes slideOutLeft{0%{-moz-transform:translateX(0)}100%{-moz-transform:translateX(-4000px);opacity:0}}@-o-keyframes slideOutLeft{0%{-o-transform:translateX(0)}100%{-o-transform:translateX(-4000px);opacity:0}}@keyframes slideOutLeft{0%{transform:translateX(0)}100%{transform:translateX(-4000px);opacity:0}}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0)}100%{-webkit-transform:translateX(4000px);opacity:0}}@-moz-keyframes slideOutRight{0%{-moz-transform:translateX(0)}100%{-moz-transform:translateX(4000px);opacity:0}}@-o-keyframes slideOutRight{0%{-o-transform:translateX(0)}100%{-o-transform:translateX(4000px);opacity:0}}@keyframes slideOutRight{0%{transform:translateX(0)}100%{transform:translateX(4000px);opacity:0}}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(-4000px);opacity:0}}@-moz-keyframes slideOutUp{0%{-moz-transform:translateY(0)}100%{-moz-transform:translateY(-4000px);opacity:0}}@-o-keyframes slideOutUp{0%{-o-transform:translateY(0)}100%{-o-transform:translateY(-4000px);opacity:0}}@keyframes slideOutUp{0%{transform:translateY(0)}100%{transform:translateY(-4000px);opacity:0}}@-webkit-keyframes rotateUp{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(-90deg)}100%{-webkit-transform:rotate(-180deg)}}@-moz-keyframes rotateUp{0%{-moz-transform:rotate(0deg)}50%{-moz-transform:rotate(-90deg)}100%{-moz-transform:rotate(-180deg)}}@-o-keyframes rotateUp{0%{-o-transform:rotate(0deg)}50%{-o-transform:rotate(-90deg)}100%{-o-transform:rotate(-180deg)}}@keyframes rotateUp{0%{transform:rotate(0deg)}50%{transform:rotate(-90deg)}100%{transform:rotate(-180deg)}}@-webkit-keyframes rotateDown{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(90deg)}100%{-webkit-transform:rotate(180deg)}}@-moz-keyframes rotateDown{0%{-moz-transform:rotate(0deg)}50%{-moz-transform:rotate(90deg)}100%{-moz-transform:rotate(180deg)}}@-o-keyframes rotateDown{0%{-o-transform:rotate(0deg)}50%{-o-transform:rotate(90deg)}100%{-o-transform:rotate(180deg)}}@keyframes rotateDown{0%{transform:rotate(0deg)}50%{transform:rotate(90deg)}100%{transform:rotate(180deg)}}@-webkit-keyframes rotateCW{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotateCW{0%{-moz-transform:rotate(0deg)}50%{-moz-transform:rotate(180deg)}100%{-moz-transform:rotate(360deg)}}@-o-keyframes rotateCW{0%{-o-transform:rotate(0deg)}50%{-o-transform:rotate(180deg)}100%{-o-transform:rotate(360deg)}}@keyframes rotateCW{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes rotateCCW{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(-180deg)}100%{-webkit-transform:rotate(-360deg)}}@-moz-keyframes rotateCCW{0%{-moz-transform:rotate(0deg)}50%{-moz-transform:rotate(-180deg)}100%{-moz-transform:rotate(-360deg)}}@-o-keyframes rotateCCW{0%{-o-transform:rotate(0deg)}50%{-o-transform:rotate(-180deg)}100%{-o-transform:rotate(-360deg)}}@keyframes rotateCCW{0%{transform:rotate(0deg)}50%{transform:rotate(-180deg)}100%{transform:rotate(-360deg)}}@-webkit-keyframes bounceIn{0%{opacity:0.0;-webkit-transform:scale(0.3)}50%{opacity:1.0;-webkit-transform:scale(1.05)}100%{-webkit-transform:scale(1)}}@-moz-keyframes bounceIn{0%{opacity:0.0;-moz-transform:scale(0.3)}50%{opacity:1.0;-moz-transform:scale(1.05)}100%{-moz-transform:scale(1)}}@-o-keyframes bounceIn{0%{opacity:0.0;-o-transform:scale(0.3)}50%{opacity:1.0;-o-transform:scale(1.05)}100%{-o-transform:scale(1)}}@keyframes bounceIn{0%{opacity:0.0;transform:scale(0.3)}50%{opacity:1.0;transform:scale(1.05)}100%{transform:scale(1)}}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1)}50%{opacity:1.0;-webkit-transform:scale(1.05)}100%{opacity:0.0;-webkit-transform:scale(0.3)}}@-moz-keyframes bounceOut{0%{-moz-transform:scale(1)}50%{opacity:1.0;-moz-transform:scale(1.05)}100%{opacity:0.0;-moz-transform:scale(0.3)}}@-o-keyframes bounceOut{0%{-o-transform:scale(1)}50%{opacity:1.0;-o-transform:scale(1.05)}100%{opacity:0.0;-o-transform:scale(0.3)}}@keyframes bounceOut{0%{transform:scale(1)}50%{opacity:1.0;transform:scale(1.05)}100%{opacity:0.0;transform:scale(0.3)}}.wrapper--xblock{overflow-y:scroll;font-size:62.5%;background:#f5f5f5}[class^="wrapper-"]{padding:0}.wrapper--xblock div,.wrapper--xblock span,.wrapper--xblock applet,.wrapper--xblock object,.wrapper--xblock iframe,.wrapper--xblock h1,.wrapper--xblock h2,.wrapper--xblock h3,.wrapper--xblock h4,.wrapper--xblock h5,.wrapper--xblock h6,.wrapper--xblock p,.wrapper--xblock blockquote,.wrapper--xblock pre,.wrapper--xblock a,.wrapper--xblock abbr,.wrapper--xblock acronym,.wrapper--xblock address,.wrapper--xblock big,.wrapper--xblock cite,.wrapper--xblock code,.wrapper--xblock del,.wrapper--xblock dfn,.wrapper--xblock em,.wrapper--xblock img,.wrapper--xblock ins,.wrapper--xblock kbd,.wrapper--xblock q,.wrapper--xblock s,.wrapper--xblock samp,.wrapper--xblock small,.wrapper--xblock strike,.wrapper--xblock strong,.wrapper--xblock sub,.wrapper--xblock sup,.wrapper--xblock tt,.wrapper--xblock var,.wrapper--xblock b,.wrapper--xblock u,.wrapper--xblock i,.wrapper--xblock center,.wrapper--xblock dl,.wrapper--xblock dt,.wrapper--xblock dd,.wrapper--xblock ol,.wrapper--xblock ul,.wrapper--xblock li,.wrapper--xblock fieldset,.wrapper--xblock form,.wrapper--xblock label,.wrapper--xblock legend,.wrapper--xblock table,.wrapper--xblock caption,.wrapper--xblock tbody,.wrapper--xblock tfoot,.wrapper--xblock thead,.wrapper--xblock tr,.wrapper--xblock th,.wrapper--xblock td,.wrapper--xblock article,.wrapper--xblock aside,.wrapper--xblock canvas,.wrapper--xblock details,.wrapper--xblock figcaption,.wrapper--xblock figure,.wrapper--xblock footer,.wrapper--xblock header,.wrapper--xblock hgroup,.wrapper--xblock menu,.wrapper--xblock nav,.wrapper--xblock section,.wrapper--xblock summary,.wrapper--xblock time,.wrapper--xblock mark,.wrapper--xblock audio,.wrapper--xblock video{font-weight:400}.wrapper--xblock strong{font-weight:600}
+ */@font-face{font-family:'FontAwesome';src:url("../fonts/libs/font-awesome/fontawesome-webfont.eot?v=4.0.3");src:url("../fonts/libs/font-awesome/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"),url("../fonts/libs/font-awesome/fontawesome-webfont.woff?v=4.0.3") format("woff"),url("../fonts/libs/font-awesome/fontawesome-webfont.ttf?v=4.0.3") format("truetype"),url("../fonts/libs/font-awesome/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");font-weight:normal;font-style:normal}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333em;line-height:0.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14286em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14286em;width:2.14286em;top:0.14286em;text-align:center}.fa-li.fa-lg{left:-1.85714em}.fa-border{padding:.2em .25em .15em;border:solid 0.08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-asc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-desc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-reply-all:before{content:"\f122"}.fa-mail-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.wrapper--xblock{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}.wrapper--xblock article,.wrapper--xblock aside,.wrapper--xblock details,.wrapper--xblock figcaption,.wrapper--xblock figure,.wrapper--xblock footer,.wrapper--xblock header,.wrapper--xblock hgroup,.wrapper--xblock main,.wrapper--xblock nav,.wrapper--xblock section,.wrapper--xblock summary{display:block}.wrapper--xblock audio,.wrapper--xblock canvas,.wrapper--xblock progress,.wrapper--xblock video{display:inline-block;vertical-align:baseline}.wrapper--xblock audio:not([controls]){display:none;height:0}.wrapper--xblock [hidden],.wrapper--xblock template{display:none}.wrapper--xblock a{background:transparent}.wrapper--xblock a:active,.wrapper--xblock a:hover{outline:0}.wrapper--xblock abbr[title]{border-bottom:1px dotted}.wrapper--xblock b,.wrapper--xblock strong{font-weight:bold}.wrapper--xblock dfn{font-style:italic}.wrapper--xblock h1{font-size:2em;margin:0.67em 0}.wrapper--xblock mark{background:#ff0;color:#000}.wrapper--xblock small{font-size:80%}.wrapper--xblock sub,.wrapper--xblock sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.wrapper--xblock sup{top:-0.5em}.wrapper--xblock sub{bottom:-0.25em}.wrapper--xblock img{border:0}.wrapper--xblock svg:not(:root){overflow:hidden}.wrapper--xblock figure{margin:1em 40px}.wrapper--xblock hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}.wrapper--xblock pre{overflow:auto}.wrapper--xblock code,.wrapper--xblock kbd,.wrapper--xblock pre,.wrapper--xblock samp{font-family:monospace, monospace;font-size:1em}.wrapper--xblock button,.wrapper--xblock input,.wrapper--xblock optgroup,.wrapper--xblock select,.wrapper--xblock textarea{color:inherit;font:inherit;margin:0}.wrapper--xblock button{overflow:visible}.wrapper--xblock button,.wrapper--xblock select{text-transform:none}.wrapper--xblock button,.wrapper--xblock html input[type="button"],.wrapper--xblock input[type="reset"],.wrapper--xblock input[type="submit"]{-webkit-appearance:button;cursor:pointer}.wrapper--xblock button[disabled],.wrapper--xblock html input[disabled]{cursor:default}.wrapper--xblock button::-moz-focus-inner,.wrapper--xblock input::-moz-focus-inner{border:0;padding:0}.wrapper--xblock input{line-height:normal}.wrapper--xblock input[type="checkbox"],.wrapper--xblock input[type="radio"]{box-sizing:border-box;padding:0}.wrapper--xblock input[type="number"]::-webkit-inner-spin-button,.wrapper--xblock input[type="number"]::-webkit-outer-spin-button{height:auto}.wrapper--xblock input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.wrapper--xblock input[type="search"]::-webkit-search-cancel-button,.wrapper--xblock input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}.wrapper--xblock fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}.wrapper--xblock legend{border:0;padding:0}.wrapper--xblock textarea{overflow:auto}.wrapper--xblock optgroup{font-weight:bold}.wrapper--xblock table{border-collapse:collapse;border-spacing:0}.wrapper--xblock td,.wrapper--xblock th{padding:0}.wrapper--xblock *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.wrapper--xblock div,.wrapper--xblock span,.wrapper--xblock applet,.wrapper--xblock object,.wrapper--xblock iframe,.wrapper--xblock h1,.wrapper--xblock h2,.wrapper--xblock h3,.wrapper--xblock h4,.wrapper--xblock h5,.wrapper--xblock h6,.wrapper--xblock p,.wrapper--xblock blockquote,.wrapper--xblock pre,.wrapper--xblock a,.wrapper--xblock abbr,.wrapper--xblock acronym,.wrapper--xblock address,.wrapper--xblock big,.wrapper--xblock cite,.wrapper--xblock code,.wrapper--xblock del,.wrapper--xblock dfn,.wrapper--xblock em,.wrapper--xblock img,.wrapper--xblock ins,.wrapper--xblock kbd,.wrapper--xblock q,.wrapper--xblock s,.wrapper--xblock samp,.wrapper--xblock small,.wrapper--xblock strike,.wrapper--xblock strong,.wrapper--xblock sub,.wrapper--xblock sup,.wrapper--xblock tt,.wrapper--xblock var,.wrapper--xblock b,.wrapper--xblock u,.wrapper--xblock i,.wrapper--xblock center,.wrapper--xblock dl,.wrapper--xblock dt,.wrapper--xblock dd,.wrapper--xblock ol,.wrapper--xblock ul,.wrapper--xblock li,.wrapper--xblock fieldset,.wrapper--xblock form,.wrapper--xblock label,.wrapper--xblock legend,.wrapper--xblock table,.wrapper--xblock caption,.wrapper--xblock tbody,.wrapper--xblock tfoot,.wrapper--xblock thead,.wrapper--xblock tr,.wrapper--xblock th,.wrapper--xblock td,.wrapper--xblock article,.wrapper--xblock aside,.wrapper--xblock canvas,.wrapper--xblock details,.wrapper--xblock figcaption,.wrapper--xblock figure,.wrapper--xblock footer,.wrapper--xblock header,.wrapper--xblock hgroup,.wrapper--xblock menu,.wrapper--xblock nav,.wrapper--xblock section,.wrapper--xblock summary,.wrapper--xblock time,.wrapper--xblock mark,.wrapper--xblock audio,.wrapper--xblock video{margin:0;vertical-align:baseline;border:0;padding:0;outline:0}.wrapper--xblock abbr[title]{border-bottom:none;text-decoration:none;cursor:help}.list--actions:last-child,.list--docs:last-child,.list--steps:last-child,.list--controls:last-child,.list--fields:last-child,.list--help:last-child,.nav--wizard:last-child,.list--tips:last-child,.field--group:last-child,.openassessment .openassessment__prompt__copy>:last-child,.openassessment .submission__peer-evaluations__questions .question:last-child,.openassessment .submission__peer-evaluations__questions .question__answers:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0;margin-right:0;border-right:none;padding-right:0}.list--actions,.list--docs,.list--steps,.list--controls,.list--fields,.list--help,.nav--wizard,.list--tips,.field--group,.openassessment .openassessment__steps,.openassessment .submission__peer-evaluations__questions,.openassessment .submission__peer-evaluations__questions .question__answers{list-style:none;margin:0;padding:0;text-indent:0}.sr,hr.divider,.nav--contents,.system__element,.openassessment .openassessment__steps__step .step__status__label,.openassessment .openassessment__prompt__title,.openassessment .step--response .response__submission__content label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.openassessment .openassessment__steps__step .step__header,.openassessment .openassessment__steps__step.is--collapsed .step__instruction,.openassessment .openassessment__steps__step.is--collapsed .step__content,.openassessment .openassessment__steps__step.is--collapsed .step__actions{-webkit-transition:opacity 0.5s ease-in-out;-moz-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out}.openassessment .openassessment__steps__step .step__title .step__label,.openassessment .openassessment__steps__step .step__title .step__deadline{-webkit-transition:color 0.5s ease-in-out;-moz-transition:color 0.5s ease-in-out;transition:color 0.5s ease-in-out}.openassessment .step--response .response__submission__content textarea,.openassessment .step--response .submission__answer__display__content{max-height:300px;overflow-y:scroll}.openassessment .step--response .submission__answer__display,.openassessment .submission__peer-evaluations,.openassessment .submission__feeedback{border:2px solid #f6f6f6;border-radius:2px;margin-bottom:20px}.openassessment .step--response .submission__answer__display__title,.openassessment .submission__peer-evaluations__title,.openassessment .submission__feeedback__title{padding:10px 20px;background:#f6f6f6;color:#afb0b4}.openassessment .step--response .submission__answer__display__content,.openassessment .submission__peer-evaluations__questions,.openassessment .submission__feeedback__content,.openassessment .submission__feeedback__actions{padding:20px}@-webkit-keyframes fadeIn{0%{opacity:0.0}50%{opacity:0.5}100%{opacity:1.0}}@-moz-keyframes fadeIn{0%{opacity:0.0}50%{opacity:0.5}100%{opacity:1.0}}@-o-keyframes fadeIn{0%{opacity:0.0}50%{opacity:0.5}100%{opacity:1.0}}@keyframes fadeIn{0%{opacity:0.0}50%{opacity:0.5}100%{opacity:1.0}}@-webkit-keyframes fadeInLeft{0%{-webkit-transform:translateX(-40px);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@-moz-keyframes fadeInLeft{0%{-moz-transform:translateX(-40px);opacity:0}100%{-moz-transform:translateX(0);opacity:1}}@-o-keyframes fadeInLeft{0%{-o-transform:translateX(-40px);opacity:0}100%{-o-transform:translateX(0);opacity:1}}@keyframes fadeInLeft{0%{transform:translateX(-40px);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeInRight{0%{-webkit-transform:translateX(40px);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@-moz-keyframes fadeInRight{0%{-moz-transform:translateX(40px);opacity:0}100%{-moz-transform:translateX(0);opacity:1}}@-o-keyframes fadeInRight{0%{-o-transform:translateX(40px);opacity:0}100%{-o-transform:translateX(0);opacity:1}}@keyframes fadeInRight{0%{transform:translateX(40px);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeInUp{0%{-webkit-transform:translateY(20px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@-moz-keyframes fadeInUp{0%{-moz-transform:translateY(20px);opacity:0}100%{-moz-transform:translateY(0);opacity:1}}@-o-keyframes fadeInUp{0%{-o-transform:translateY(20px);opacity:0}100%{-o-transform:translateY(0);opacity:1}}@keyframes fadeInUp{0%{transform:translateY(20px);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translateY(-20px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@-moz-keyframes fadeInDown{0%{-moz-transform:translateY(-20px);opacity:0}100%{-moz-transform:translateY(0);opacity:1}}@-o-keyframes fadeInDown{0%{-o-transform:translateY(-20px);opacity:0}100%{-o-transform:translateY(0);opacity:1}}@keyframes fadeInDown{0%{transform:translateY(-20px);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeOut{0%{opacity:1.0}50%{opacity:0.5}100%{opacity:0.0}}@-moz-keyframes fadeOut{0%{opacity:1.0}50%{opacity:0.5}100%{opacity:0.0}}@-o-keyframes fadeOut{0%{opacity:1.0}50%{opacity:0.5}100%{opacity:0.0}}@keyframes fadeOut{0%{opacity:1.0}50%{opacity:0.5}100%{opacity:0.0}}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-4000px);opacity:0}100%{-webkit-transform:translateX(0)}}@-moz-keyframes slideInLeft{0%{-moz-transform:translateX(-4000px);opacity:0}100%{-moz-transform:translateX(0)}}@-o-keyframes slideInLeft{0%{-o-transform:translateX(-4000px);opacity:0}100%{-o-transform:translateX(0)}}@keyframes slideInLeft{0%{transform:translateX(-4000px);opacity:0}100%{transform:translateX(0)}}@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(4000px);opacity:0}100%{-webkit-transform:translateX(0)}}@-moz-keyframes slideInRight{0%{-moz-transform:translateX(4000px);opacity:0}100%{-moz-transform:translateX(0)}}@-o-keyframes slideInRight{0%{-o-transform:translateX(4000px);opacity:0}100%{-o-transform:translateX(0)}}@keyframes slideInRight{0%{transform:translateX(4000px);opacity:0}100%{transform:translateX(0)}}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-4000px);opacity:0}100%{-webkit-transform:translateY(0)}}@-moz-keyframes slideInDown{0%{-moz-transform:translateY(-4000px);opacity:0}100%{-moz-transform:translateY(0)}}@-o-keyframes slideInDown{0%{-o-transform:translateY(-4000px);opacity:0}100%{-o-transform:translateY(0)}}@keyframes slideInDown{0%{transform:translateY(-4000px);opacity:0}100%{transform:translateY(0)}}@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(4000px);opacity:0}100%{-webkit-transform:translateY(0)}}@-moz-keyframes slideInUp{0%{-moz-transform:translateY(4000px);opacity:0}100%{-moz-transform:translateY(0)}}@-o-keyframes slideInUp{0%{-o-transform:translateY(4000px);opacity:0}100%{-o-transform:translateY(0)}}@keyframes slideInUp{0%{transform:translateY(4000px);opacity:0}100%{transform:translateY(0)}}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0)}100%{-webkit-transform:translateX(-4000px);opacity:0}}@-moz-keyframes slideOutLeft{0%{-moz-transform:translateX(0)}100%{-moz-transform:translateX(-4000px);opacity:0}}@-o-keyframes slideOutLeft{0%{-o-transform:translateX(0)}100%{-o-transform:translateX(-4000px);opacity:0}}@keyframes slideOutLeft{0%{transform:translateX(0)}100%{transform:translateX(-4000px);opacity:0}}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0)}100%{-webkit-transform:translateX(4000px);opacity:0}}@-moz-keyframes slideOutRight{0%{-moz-transform:translateX(0)}100%{-moz-transform:translateX(4000px);opacity:0}}@-o-keyframes slideOutRight{0%{-o-transform:translateX(0)}100%{-o-transform:translateX(4000px);opacity:0}}@keyframes slideOutRight{0%{transform:translateX(0)}100%{transform:translateX(4000px);opacity:0}}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(-4000px);opacity:0}}@-moz-keyframes slideOutUp{0%{-moz-transform:translateY(0)}100%{-moz-transform:translateY(-4000px);opacity:0}}@-o-keyframes slideOutUp{0%{-o-transform:translateY(0)}100%{-o-transform:translateY(-4000px);opacity:0}}@keyframes slideOutUp{0%{transform:translateY(0)}100%{transform:translateY(-4000px);opacity:0}}@-webkit-keyframes rotateUp{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(-90deg)}100%{-webkit-transform:rotate(-180deg)}}@-moz-keyframes rotateUp{0%{-moz-transform:rotate(0deg)}50%{-moz-transform:rotate(-90deg)}100%{-moz-transform:rotate(-180deg)}}@-o-keyframes rotateUp{0%{-o-transform:rotate(0deg)}50%{-o-transform:rotate(-90deg)}100%{-o-transform:rotate(-180deg)}}@keyframes rotateUp{0%{transform:rotate(0deg)}50%{transform:rotate(-90deg)}100%{transform:rotate(-180deg)}}@-webkit-keyframes rotateDown{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(90deg)}100%{-webkit-transform:rotate(180deg)}}@-moz-keyframes rotateDown{0%{-moz-transform:rotate(0deg)}50%{-moz-transform:rotate(90deg)}100%{-moz-transform:rotate(180deg)}}@-o-keyframes rotateDown{0%{-o-transform:rotate(0deg)}50%{-o-transform:rotate(90deg)}100%{-o-transform:rotate(180deg)}}@keyframes rotateDown{0%{transform:rotate(0deg)}50%{transform:rotate(90deg)}100%{transform:rotate(180deg)}}@-webkit-keyframes rotateCW{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotateCW{0%{-moz-transform:rotate(0deg)}50%{-moz-transform:rotate(180deg)}100%{-moz-transform:rotate(360deg)}}@-o-keyframes rotateCW{0%{-o-transform:rotate(0deg)}50%{-o-transform:rotate(180deg)}100%{-o-transform:rotate(360deg)}}@keyframes rotateCW{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes rotateCCW{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(-180deg)}100%{-webkit-transform:rotate(-360deg)}}@-moz-keyframes rotateCCW{0%{-moz-transform:rotate(0deg)}50%{-moz-transform:rotate(-180deg)}100%{-moz-transform:rotate(-360deg)}}@-o-keyframes rotateCCW{0%{-o-transform:rotate(0deg)}50%{-o-transform:rotate(-180deg)}100%{-o-transform:rotate(-360deg)}}@keyframes rotateCCW{0%{transform:rotate(0deg)}50%{transform:rotate(-180deg)}100%{transform:rotate(-360deg)}}@-webkit-keyframes bounceIn{0%{opacity:0.0;-webkit-transform:scale(0.3)}50%{opacity:1.0;-webkit-transform:scale(1.05)}100%{-webkit-transform:scale(1)}}@-moz-keyframes bounceIn{0%{opacity:0.0;-moz-transform:scale(0.3)}50%{opacity:1.0;-moz-transform:scale(1.05)}100%{-moz-transform:scale(1)}}@-o-keyframes bounceIn{0%{opacity:0.0;-o-transform:scale(0.3)}50%{opacity:1.0;-o-transform:scale(1.05)}100%{-o-transform:scale(1)}}@keyframes bounceIn{0%{opacity:0.0;transform:scale(0.3)}50%{opacity:1.0;transform:scale(1.05)}100%{transform:scale(1)}}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1)}50%{opacity:1.0;-webkit-transform:scale(1.05)}100%{opacity:0.0;-webkit-transform:scale(0.3)}}@-moz-keyframes bounceOut{0%{-moz-transform:scale(1)}50%{opacity:1.0;-moz-transform:scale(1.05)}100%{opacity:0.0;-moz-transform:scale(0.3)}}@-o-keyframes bounceOut{0%{-o-transform:scale(1)}50%{opacity:1.0;-o-transform:scale(1.05)}100%{opacity:0.0;-o-transform:scale(0.3)}}@keyframes bounceOut{0%{transform:scale(1)}50%{opacity:1.0;transform:scale(1.05)}100%{opacity:0.0;transform:scale(0.3)}}.wrapper--xblock{background:transparent}.wrapper--xblock .copy-1{font-weight:300}.wrapper--xblock div,.wrapper--xblock span,.wrapper--xblock applet,.wrapper--xblock object,.wrapper--xblock iframe,.wrapper--xblock h1,.wrapper--xblock h2,.wrapper--xblock h3,.wrapper--xblock h4,.wrapper--xblock h5,.wrapper--xblock h6,.wrapper--xblock p,.wrapper--xblock blockquote,.wrapper--xblock pre,.wrapper--xblock a,.wrapper--xblock abbr,.wrapper--xblock acronym,.wrapper--xblock address,.wrapper--xblock big,.wrapper--xblock cite,.wrapper--xblock code,.wrapper--xblock del,.wrapper--xblock dfn,.wrapper--xblock em,.wrapper--xblock img,.wrapper--xblock ins,.wrapper--xblock kbd,.wrapper--xblock q,.wrapper--xblock s,.wrapper--xblock samp,.wrapper--xblock small,.wrapper--xblock strike,.wrapper--xblock strong,.wrapper--xblock sub,.wrapper--xblock sup,.wrapper--xblock tt,.wrapper--xblock var,.wrapper--xblock b,.wrapper--xblock u,.wrapper--xblock i,.wrapper--xblock center,.wrapper--xblock dl,.wrapper--xblock dt,.wrapper--xblock dd,.wrapper--xblock ol,.wrapper--xblock ul,.wrapper--xblock li,.wrapper--xblock fieldset,.wrapper--xblock form,.wrapper--xblock label,.wrapper--xblock legend,.wrapper--xblock table,.wrapper--xblock caption,.wrapper--xblock tbody,.wrapper--xblock tfoot,.wrapper--xblock thead,.wrapper--xblock tr,.wrapper--xblock th,.wrapper--xblock td,.wrapper--xblock article,.wrapper--xblock aside,.wrapper--xblock canvas,.wrapper--xblock details,.wrapper--xblock figcaption,.wrapper--xblock figure,.wrapper--xblock footer,.wrapper--xblock header,.wrapper--xblock hgroup,.wrapper--xblock menu,.wrapper--xblock nav,.wrapper--xblock section,.wrapper--xblock summary,.wrapper--xblock time,.wrapper--xblock mark,.wrapper--xblock audio,.wrapper--xblock video,.wrapper--xblock .h1,.openassessment .openassessment__title--super,.wrapper--xblock .h3,.wrapper--xblock .h5,.openassessment .step--response .submission__answer__display__title,.openassessment .submission__peer-evaluations__title,.openassessment .submission__feeedback__title,.openassessment .openassessment__title--sub,.openassessment .submission__peer-evaluations__questions .answer__source,.wrapper--xblock .h7,.openassessment .openassessment__steps__step .step__title .step__deadline,.wrapper--xblock .h8,.openassessment .step--response .submission__answer__display__content,.openassessment .submission__peer-evaluations__questions .answer__value,.wrapper--xblock .copy-3{font-weight:400}.wrapper--xblock input[type="text"],.wrapper--xblock input[type="email"],.wrapper--xblock input[type="password"],.wrapper--xblock textarea{font-weight:500}.wrapper--xblock strong,.openassessment .step--response .submission__answer__display__title,.openassessment .submission__peer-evaluations__title,.openassessment .submission__feeedback__title,.wrapper--xblock .h2,.openassessment .openassessment__steps__step .step__title .step__label,.openassessment .openassessment__grade .openassessment__grade__title,.openassessment .openassessment__grade .openassessment__grade__content .grade__value,.openassessment .submission__peer-evaluations__questions .question__title__copy,.wrapper--xblock .h4,.openassessment .openassessment__steps__step .step__title .step__counter:before,.wrapper--xblock .h6,.openassessment .openassessment__steps__step .step__actions .action--submit,.openassessment .openassessment__steps__step .step__actions .action--submit .copy,.openassessment .step--response .response__submission__actions .action--submit,.openassessment .submission__feeedback__actions .action--submit,.openassessment .step--response .response__submission__actions .action--submit .copy,.openassessment .submission__feeedback__actions .action--submit .copy{font-weight:600}.openassessment .openassessment__steps__step .step__title .step__counter:before{font-weight:700}.wrapper--xblock .h1,.openassessment .openassessment__title--super,.wrapper--xblock .h3,.wrapper--xblock .h5,.openassessment .step--response .submission__answer__display__title,.openassessment .submission__peer-evaluations__title,.openassessment .submission__feeedback__title,.openassessment .openassessment__title--sub,.openassessment .submission__peer-evaluations__questions .answer__source,.wrapper--xblock .h7,.openassessment .openassessment__steps__step .step__status .copy,.openassessment .submission__peer-evaluations__questions .question__score{text-transform:uppercase;letter-spacing:0.05rem}.openassessment .openassessment__steps__step .step__status .ico{font-size:16px}.wrapper--xblock .h1{font-size:24px;line-height:36px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.wrapper--xblock .h2{font-size:21px;line-height:31.5px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .openassessment__title--super,.wrapper--xblock .h3{font-size:18px;line-height:27px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .openassessment__steps__step .step__title .step__label,.openassessment .openassessment__grade .openassessment__grade__title,.openassessment .openassessment__grade .openassessment__grade__content .grade__value,.openassessment .submission__peer-evaluations__questions .question__title__copy,.wrapper--xblock .h4{font-size:16px;line-height:24px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.wrapper--xblock .h5{font-size:16px;line-height:24px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .openassessment__steps__step .step__title .step__counter:before,.wrapper--xblock .h6{font-size:16px;line-height:24px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .step--response .submission__answer__display__title,.openassessment .submission__peer-evaluations__title,.openassessment .submission__feeedback__title,.openassessment .openassessment__title--sub,.openassessment .submission__peer-evaluations__questions .answer__source,.wrapper--xblock .h7{font-size:13px;line-height:19.5px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .openassessment__steps__step .step__title .step__deadline,.wrapper--xblock .h8{font-size:13px;line-height:19.5px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.wrapper--xblock .copy-1{font-size:24px;line-height:36px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .openassessment__prompt__copy,.wrapper--xblock .copy-2{font-size:18px;line-height:27px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .step--response .submission__answer__display__content,.openassessment .submission__peer-evaluations__questions .answer__value,.wrapper--xblock .copy-3{font-size:16px;line-height:24px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.wrapper--xblock .field label,.wrapper--xblock .field .label,.openassessment .openassessment__steps__step .step__instruction,.openassessment .openassessment__grade .openassessment__grade__content .grade__description,.openassessment .submission__peer-evaluations__questions .answer__content,.wrapper--xblock .copy-4{font-size:14px;line-height:21px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .step--response .response__submission__actions .tip,.wrapper--xblock .copy-5{font-size:13px;line-height:18px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .openassessment__steps__step .step__status .copy,.openassessment .submission__peer-evaluations__questions .question__score,.wrapper--xblock .copy-6{font-size:12px;line-height:18px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .openassessment__steps__step .step__actions .action--submit,.openassessment .step--response .response__submission__actions .action--submit,.openassessment .submission__feeedback__actions .action--submit{font-size:14px;line-height:21px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .openassessment__prompt__copy a{-webkit-transition:color 0.5s ease-in-out,border 0.5s ease-in-out;-moz-transition:color 0.5s ease-in-out,border 0.5s ease-in-out;transition:color 0.5s ease-in-out,border 0.5s ease-in-out;border-bottom:1px solid transparent;color:#33a6dc;text-decoration:none}.openassessment .openassessment__prompt__copy a:hover,.openassessment .openassessment__prompt__copy a:focus{color:#00a7f6;border-color:#00a7f6}.openassessment .openassessment__prompt__copy a:active,.openassessment .openassessment__prompt__copy a.is--current{color:#1d9dd9;border-color:#1d9dd9}.openassessment .openassessment__steps__step .step__actions .action--submit,.openassessment .step--response .response__submission__actions .action--submit,.openassessment .submission__feeedback__actions .action--submit{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:color 0.25s ease-in-out,background 0.25s ease-in-out,box-shadow 0.25s ease-in-out;-moz-transition:color 0.25s ease-in-out,background 0.25s ease-in-out,box-shadow 0.25s ease-in-out;transition:color 0.25s ease-in-out,background 0.25s ease-in-out,box-shadow 0.25s ease-in-out;display:inline-block;cursor:pointer;text-decoration:none}.openassessment .openassessment__steps__step .step__actions .action--submit:hover,.openassessment .step--response .response__submission__actions .action--submit:hover,.openassessment .submission__feeedback__actions .action--submit:hover,.openassessment .openassessment__steps__step .step__actions .action--submit:active,.openassessment .step--response .response__submission__actions .action--submit:active,.openassessment .submission__feeedback__actions .action--submit:active,.openassessment .openassessment__steps__step .step__actions .action--submit:focus,.openassessment .step--response .response__submission__actions .action--submit:focus,.openassessment .submission__feeedback__actions .action--submit:focus{text-decoration:none}.openassessment .openassessment__steps__step .step__actions .disabled.action--submit,.openassessment .step--response .response__submission__actions .disabled.action--submit,.openassessment .submission__feeedback__actions .disabled.action--submit,.openassessment .openassessment__steps__step .step__actions [disabled].action--submit,.openassessment .step--response .response__submission__actions [disabled].action--submit,.openassessment .submission__feeedback__actions [disabled].action--submit{cursor:default;pointer-events:none}.openassessment .openassessment__steps__step .step__actions .action--submit .copy,.openassessment .step--response .response__submission__actions .action--submit .copy,.openassessment .submission__feeedback__actions .action--submit .copy,.openassessment .openassessment__steps__step .step__actions .action--submit .ico,.openassessment .step--response .response__submission__actions .action--submit .ico,.openassessment .submission__feeedback__actions .action--submit .ico{display:inline-block;vertical-align:middle}.openassessment .openassessment__steps__step .step__actions .action--submit,.openassessment .step--response .response__submission__actions .action--submit,.openassessment .submission__feeedback__actions .action--submit{border-radius:4px}.openassessment .openassessment__steps__step .step__actions .action--submit{padding:10px 40px;background:#33a6dc;border:1px solid #2b8dbb;color:#eaf6fb}.openassessment .openassessment__steps__step .step__actions .action--submit:hover,.openassessment .openassessment__steps__step .step__actions .action--submit:active,.openassessment .openassessment__steps__step .step__actions .action--submit:focus{background:#00a7f6;border-color:#00a7f6;color:#fcfefe}.openassessment .openassessment__steps__step .step__actions .current.action--submit,.openassessment .openassessment__steps__step .step__actions .active.action--submit{background:#1d9dd9;border-color:#1d9dd9}.openassessment .openassessment__steps__step .step__actions .disabled.action--submit,.openassessment .openassessment__steps__step .step__actions .is-disabled.action--submit,.openassessment .openassessment__steps__step .step__actions [disabled].action--submit{opacity:0.5}.openassessment .step--response .response__submission__actions .action--submit,.openassessment .submission__feeedback__actions .action--submit{padding:10px 40px;background:#878787;border:1px #797979;color:#f3f3f3}.openassessment .step--response .response__submission__actions .action--submit:hover,.openassessment .submission__feeedback__actions .action--submit:hover,.openassessment .step--response .response__submission__actions .action--submit:active,.openassessment .submission__feeedback__actions .action--submit:active,.openassessment .step--response .response__submission__actions .action--submit:focus,.openassessment .submission__feeedback__actions .action--submit:focus{background:#656565;border-color:#656565;color:#fdfdfd}.openassessment .step--response .response__submission__actions .current.action--submit,.openassessment .submission__feeedback__actions .current.action--submit,.openassessment .step--response .response__submission__actions .active.action--submit,.openassessment .submission__feeedback__actions .active.action--submit{background:#878787;border-color:#878787}.openassessment .step--response .response__submission__actions .disabled.action--submit,.openassessment .submission__feeedback__actions .disabled.action--submit,.openassessment .step--response .response__submission__actions .is-disabled.action--submit,.openassessment .submission__feeedback__actions .is-disabled.action--submit,.openassessment .step--response .response__submission__actions [disabled].action--submit,.openassessment .submission__feeedback__actions [disabled].action--submit{opacity:0.5}.wrapper--xblock input[type="text"],.wrapper--xblock input[type="email"],.wrapper--xblock input[type="password"],.wrapper--xblock textarea{border:1px solid #afb0b4;padding:10px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;outline:0}.wrapper--xblock input[type="text"]::-webkit-input-placeholder,.wrapper--xblock input[type="email"]::-webkit-input-placeholder,.wrapper--xblock input[type="password"]::-webkit-input-placeholder,.wrapper--xblock textarea::-webkit-input-placeholder{color:#bcbcbc}.wrapper--xblock input[type="text"]:-moz-placeholder,.wrapper--xblock input[type="email"]:-moz-placeholder,.wrapper--xblock input[type="password"]:-moz-placeholder,.wrapper--xblock textarea:-moz-placeholder{color:#bcbcbc}.wrapper--xblock input[type="text"]::-moz-placeholder,.wrapper--xblock input[type="email"]::-moz-placeholder,.wrapper--xblock input[type="password"]::-moz-placeholder,.wrapper--xblock textarea::-moz-placeholder{color:#bcbcbc}.wrapper--xblock input[type="text"]:-ms-input-placeholder,.wrapper--xblock input[type="email"]:-ms-input-placeholder,.wrapper--xblock input[type="password"]:-ms-input-placeholder,.wrapper--xblock textarea:-ms-input-placeholder{color:#bcbcbc}.wrapper--xblock input[type="text"]:focus,.wrapper--xblock input[type="email"]:focus,.wrapper--xblock input[type="password"]:focus,.wrapper--xblock textarea:focus{box-shadow:0 0 6px 0 rgba(29,157,217,0.4),inset 0 0 4px 0 rgba(0,0,0,0.15);border-color:#29a6f1;outline:0}.wrapper--xblock .field label,.wrapper--xblock .field .label{display:block;margin-bottom:10px;color:#3c3c3c}.wrapper--xblock .field textarea{width:100%}.wrapper--grid{*zoom:1;max-width:100%;margin-left:auto;margin-right:auto}.wrapper--grid:before,.wrapper--grid:after{content:" ";display:table}.wrapper--grid:after{clear:both}.wrapper--openassessment{position:relative}.openassessment .openassessment__title{*zoom:1;display:block;margin-bottom:20px;border-bottom:4px solid #ebebec;padding-bottom:10px}.openassessment .openassessment__title:before,.openassessment .openassessment__title:after{content:" ";display:table}.openassessment .openassessment__title:after{clear:both}.openassessment .openassessment__title--super{display:block;margin-bottom:5px}.openassessment .openassessment__title--sub{display:block;color:#cacaca}.openassessment .openassessment__steps{counter-reset:item}.openassessment .openassessment__steps__step{margin-bottom:20px;border-bottom:2px solid #ebebec;padding-bottom:20px}.openassessment .openassessment__steps__step:last-child{border-bottom:none;padding-bottom:0}.openassessment .openassessment__steps__step .step__header{*zoom:1;display:block;margin-bottom:20px;opacity:1.0}.openassessment .openassessment__steps__step .step__header:before,.openassessment .openassessment__steps__step .step__header:after{content:" ";display:table}.openassessment .openassessment__steps__step .step__header:after{clear:both}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .openassessment__steps__step .step__header{border-bottom:2px solid #646464;padding-bottom:10px}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .openassessment__steps__step .step__header{border-bottom:2px solid #646464;padding-bottom:10px}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .openassessment__steps__step .step__header{border-bottom:2px solid #646464;padding-bottom:10px}}@media screen and (min-width: 1300px){.openassessment .openassessment__steps__step .step__header{border-bottom:2px solid #646464;padding-bottom:10px}}.openassessment .openassessment__steps__step .step__header .step__deadline{color:#646464}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .openassessment__steps__step .step__title{float:left;display:block;margin-right:4.82916%;width:65.05695%;vertical-align:middle}.openassessment .openassessment__steps__step .step__title:last-child{margin-right:0}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .openassessment__steps__step .step__title{float:left;display:block;margin-right:2.35765%;width:74.41059%;vertical-align:middle}.openassessment .openassessment__steps__step .step__title:last-child{margin-right:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .openassessment__steps__step .step__title{float:left;display:block;margin-right:2.35765%;width:74.41059%;vertical-align:middle}.openassessment .openassessment__steps__step .step__title:last-child{margin-right:0}}@media screen and (min-width: 1300px){.openassessment .openassessment__steps__step .step__title{float:left;display:block;margin-right:2.35765%;width:74.41059%;vertical-align:middle}.openassessment .openassessment__steps__step .step__title:last-child{margin-right:0}}.openassessment .openassessment__steps__step .step__title .step__counter,.openassessment .openassessment__steps__step .step__title .wrapper--copy{display:inline-block;vertical-align:middle}.openassessment .openassessment__steps__step .step__title .step__counter:before{content:counter(item,decimal);counter-increment:item;margin-right:5px;border-radius:2px;border:1px solid rgba(100,100,100,0.5);padding:5px 10px;color:#646464}.openassessment .openassessment__steps__step .step__title .step__label,.openassessment .openassessment__steps__step .step__title .step__deadline{display:block}.openassessment .openassessment__steps__step .step__title .step__deadline{color:#979797}.openassessment .openassessment__steps__step .step__status .step__status__value{border-radius:4px;padding:5px 10px;background:#646464;color:#fefefe}@media screen and (max-width: 529px){.openassessment .openassessment__steps__step .step__status .step__status__value{display:block;margin-top:10px}}.openassessment .openassessment__steps__step .step__status .ico,.openassessment .openassessment__steps__step .step__status .copy{display:inline-block;vertical-align:bottom}.openassessment .openassessment__steps__step .step__status .ico{display:none;margin-right:5px}.openassessment .openassessment__steps__step .step__status .copy{color:#fefefe}@media screen and (max-width: 529px){.openassessment .openassessment__steps__step .step__status{position:relative;top:2px}}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .openassessment__steps__step .step__status{float:left;display:block;margin-right:4.82916%;width:30.11389%;margin-right:0;margin-top:5px;text-align:right}.openassessment .openassessment__steps__step .step__status:last-child{margin-right:0}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .openassessment__steps__step .step__status{float:left;display:block;margin-right:2.35765%;width:23.23176%;margin-right:0;margin-top:5px;text-align:right}.openassessment .openassessment__steps__step .step__status:last-child{margin-right:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .openassessment__steps__step .step__status{float:left;display:block;margin-right:2.35765%;width:23.23176%;margin-right:0;margin-top:5px;text-align:right}.openassessment .openassessment__steps__step .step__status:last-child{margin-right:0}}@media screen and (min-width: 1300px){.openassessment .openassessment__steps__step .step__status{float:left;display:block;margin-right:2.35765%;width:23.23176%;margin-right:0;margin-top:5px;text-align:right}.openassessment .openassessment__steps__step .step__status:last-child{margin-right:0}}.openassessment .openassessment__steps__step .step__instruction,.openassessment .openassessment__steps__step .step__content,.openassessment .openassessment__steps__step .step__actions{display:block;visibility:visible;opacity:1.0}.openassessment .openassessment__steps__step .step__instruction{margin-bottom:20px;color:#3c3c3c}.openassessment .openassessment__steps__step .step__content{margin-bottom:20px}.openassessment .openassessment__steps__step .step__actions{text-align:center}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .openassessment__steps__step .step__actions{text-align:right}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .openassessment__steps__step .step__actions{text-align:right}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .openassessment__steps__step .step__actions{text-align:right}}@media screen and (min-width: 1300px){.openassessment .openassessment__steps__step .step__actions{text-align:right}}.openassessment .openassessment__steps__step.is--collapsed .step__header{opacity:0.4;margin-bottom:0}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .openassessment__steps__step.is--collapsed .step__header{border-bottom:none;padding-bottom:0}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .openassessment__steps__step.is--collapsed .step__header{border-bottom:none;padding-bottom:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .openassessment__steps__step.is--collapsed .step__header{border-bottom:none;padding-bottom:0}}@media screen and (min-width: 1300px){.openassessment .openassessment__steps__step.is--collapsed .step__header{border-bottom:none;padding-bottom:0}}.openassessment .openassessment__steps__step.is--collapsed .step__header .step__deadline{color:#646464}.openassessment .openassessment__steps__step.is--collapsed .step__header:hover{opacity:1.0}.openassessment .openassessment__steps__step.is--collapsed .step__status__value{background:#878787}.openassessment .openassessment__steps__step.is--collapsed .step__counter:before{border:1px solid rgba(100,100,100,0.5)}.openassessment .openassessment__steps__step.is--collapsed .step__instruction,.openassessment .openassessment__steps__step.is--collapsed .step__content,.openassessment .openassessment__steps__step.is--collapsed .step__actions{display:none;visibility:hidden;opacity:0.0}.openassessment .openassessment__steps__step.is--expanded .step__status__value{background:#646464}.openassessment .openassessment__steps__step.is--complete .step__counter:before,.openassessment .openassessment__steps__step.is--submitted .step__counter:before,.openassessment .openassessment__steps__step.is--graded .step__counter:before{border-color:rgba(96,188,97,0.5);color:#60bc61}.openassessment .openassessment__steps__step.is--complete .step__status__value,.openassessment .openassessment__steps__step.is--submitted .step__status__value,.openassessment .openassessment__steps__step.is--graded .step__status__value{background:#60bc61}.openassessment .openassessment__steps__step.is--complete .step__status__value .ico,.openassessment .openassessment__steps__step.is--submitted .step__status__value .ico,.openassessment .openassessment__steps__step.is--graded .step__status__value .ico{display:inline-block}.openassessment .openassessment__steps__step.is--complete .step__status__value .copy,.openassessment .openassessment__steps__step.is--submitted .step__status__value .copy,.openassessment .openassessment__steps__step.is--graded .step__status__value .copy{color:#fefefe}.openassessment .openassessment__steps__step.is--saved .step__status__value{background:#1d9dd9}.openassessment .openassessment__steps__step.is--saved .step__status__value .copy{color:#fefefe}.openassessment .openassessment__prompt{margin-bottom:20px}.openassessment .openassessment__prompt__copy{color:#3c3c3c}.openassessment .openassessment__prompt__copy>*{margin-bottom:20px}.openassessment .step--response .response__submission{padding:10px;background:#ebebec;border-radius:2px}.openassessment .step--response .response__submission .submission__answer{margin-bottom:10px}.openassessment .step--response .response__submission__content textarea{min-height:200px}.openassessment .step--response .response__submission__actions .action--submit,.openassessment .step--response .response__submission__actions .tip{display:block;width:100%;margin-bottom:10px}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .step--response .response__submission__actions .action--submit,.openassessment .step--response .response__submission__actions .tip{display:inline-block;vertical-align:middle;width:auto}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .step--response .response__submission__actions .action--submit,.openassessment .step--response .response__submission__actions .tip{display:inline-block;vertical-align:middle;width:auto}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .step--response .response__submission__actions .action--submit,.openassessment .step--response .response__submission__actions .tip{display:inline-block;vertical-align:middle;width:auto}}@media screen and (min-width: 1300px){.openassessment .step--response .response__submission__actions .action--submit,.openassessment .step--response .response__submission__actions .tip{display:inline-block;vertical-align:middle;width:auto}}.openassessment .step--response .response__submission__actions .action--submit{display:block;text-align:center}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .step--response .response__submission__actions .action--submit{display:inline-block;margin-right:10px}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .step--response .response__submission__actions .action--submit{display:inline-block;margin-right:10px}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .step--response .response__submission__actions .action--submit{display:inline-block;margin-right:10px}}@media screen and (min-width: 1300px){.openassessment .step--response .response__submission__actions .action--submit{display:inline-block;margin-right:10px}}.openassessment .step--response .response__submission__actions .tip{color:#7c7c7c}.openassessment .openassessment__grade{*zoom:1;display:block;border-top:4px solid #ebebec;padding-top:20px}.openassessment .openassessment__grade:before,.openassessment .openassessment__grade:after{content:" ";display:table}.openassessment .openassessment__grade:after{clear:both}.openassessment .openassessment__grade .openassessment__grade__title,.openassessment .openassessment__grade .openassessment__grade__content{display:inline-block;vertical-align:top}.openassessment .openassessment__grade .openassessment__grade__title{margin-right:20px;color:#cacaca}.openassessment .openassessment__grade .openassessment__grade__content .grade__value{margin-bottom:10px}.openassessment .submission__peer-evaluations__questions{margin-bottom:10px}.openassessment .submission__peer-evaluations__questions:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0}.openassessment .submission__peer-evaluations__questions .question{margin-bottom:10px}.openassessment .submission__peer-evaluations__questions .question__title{*zoom:1;margin-bottom:20px;border-bottom:2px solid #ebebec;padding-bottom:5px}.openassessment .submission__peer-evaluations__questions .question__title:before,.openassessment .submission__peer-evaluations__questions .question__title:after{content:" ";display:table}.openassessment .submission__peer-evaluations__questions .question__title:after{clear:both}.openassessment .submission__peer-evaluations__questions .question__title__copy{float:left;color:#979797}.openassessment .submission__peer-evaluations__questions .question__score{float:right;position:relative;bottom:-5px;margin-left:20px;padding:5px 10px 2.5px 10px;background:#ebebec;color:#f5f5f5}.openassessment .submission__peer-evaluations__questions .question__score__value{color:#60bc61}.openassessment .submission__peer-evaluations__questions .question__score__value:after{content:"/";margin-left:5px;color:#979797}.openassessment .submission__peer-evaluations__questions .question__score__potential{color:#979797}.openassessment .submission__peer-evaluations__questions .question__score__potential .unit{margin-left:5px}.openassessment .submission__peer-evaluations__questions .question__answers{*zoom:1;display:block}.openassessment .submission__peer-evaluations__questions .question__answers:before,.openassessment .submission__peer-evaluations__questions .question__answers:after{content:" ";display:table}.openassessment .submission__peer-evaluations__questions .question__answers:after{clear:both}.openassessment .submission__peer-evaluations__questions .answer{margin-bottom:20px}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .submission__peer-evaluations__questions .answer{float:left;display:block;margin-right:4.82916%;width:47.58542%}.openassessment .submission__peer-evaluations__questions .answer:last-child{margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(2n){margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(2n+1){clear:left}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .submission__peer-evaluations__questions .answer{float:left;display:block;margin-right:2.35765%;width:23.23176%}.openassessment .submission__peer-evaluations__questions .answer:last-child{margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n){margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n+1){clear:left}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .submission__peer-evaluations__questions .answer{float:left;display:block;margin-right:2.35765%;width:23.23176%}.openassessment .submission__peer-evaluations__questions .answer:last-child{margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n){margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n+1){clear:left}}@media screen and (min-width: 1300px){.openassessment .submission__peer-evaluations__questions .answer{float:left;display:block;margin-right:2.35765%;width:23.23176%}.openassessment .submission__peer-evaluations__questions .answer:last-child{margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n){margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n+1){clear:left}}.openassessment .submission__peer-evaluations__questions .answer__source{display:block;color:#cacaca}.openassessment .submission__peer-evaluations__questions .answer__value{display:block;margin-bottom:10px;color:#434343}.openassessment .submission__peer-evaluations__questions .answer__content{display:block;color:#7c7c7c}.openassessment .submission__feeedback__actions{padding-top:0}.openassessment .submission__feeedback__actions .action--submit{margin-right:10px}.workbench .vertical{border:none}.view--placeholder{background:transparent;margin:40px 40px}

apps/openassessment/xblock/static/html/v-problem-initial.html

+<!DOCTYPE html>
+<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
+<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"><![endif]-->
+<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"><![endif]-->
+<!--[if IE 9]><html class="no-js lt-ie10" lang="en"><![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Open Assessment Xblock Static View - Initial Problem</title>
+
+    <link rel="stylesheet" href="../css/openassessment.css" />
+  </head>
+
+  <body class="view--placeholder">
+
+    <!-- workbench xblock frame -->
+    <div class="xblock">
+      <div class="vertical">
+        <div class="xblock" data-runtime-version="1" data-usage="u_7" data-init="OpenAssessmentBlock" data-block-type="openassessment">
+
+          <!-- openassessment render start -->
+          <div class="wrapper wrapper--xblock wrapper--openassessment theme--basic">
+            <div class="openassessment" id="openassessment">
+              <div class="wrapper--grid">
+                <h1 class="openassessment__title">
+                  <span class="openassessment__title--super">
+                    Speech Assignment Number 1 - Tell Us About Yourself
+                  </span>
+
+                  <span class="openassessment__title--sub">
+                    <span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
+                    +
+                    <span class="problem-type problem-type--peer-assessment">Peer</span>
+                    +
+                    <span class="problem-type problem-type--self-assessment">Self Assessment</span>
+                  </span>
+                </h1>
+
+                <nav class="nav--contents">
+                  <h2 class="title">Skip to a part of this problem:</h2>
+
+                  <ol class="list list--nav">
+                    <li class="list--nav__item">
+                      <a class="action" href="#openassessment__response">Your response to this problem</a>
+                    </li>
+                    <li class="list--nav__item">
+                      <a class="action" href="#openassessment__peer-assessment">Your assessment(s) of peer responses</a>
+                    </li>
+                    <li class="list--nav__item">
+                      <a class="action" href="#openassessment__self-assessment">Your assessment of your response</a>
+                    </li>
+                    <li class="list--nav__item">
+                      <a class="action" href="#openassessment__grade">Your grade for this problem</a>
+                    </li>
+                  </ol>
+                </nav>
+
+                <!-- question -->
+                <div class="wrapper--openassessment__prompt">
+                  <article class="openassessment__prompt ui-toggle-visibility">
+
+                    <h2 class="openassessment__prompt__title">Open Assessment Problem</h2>
+
+                    <div class="openassessment__prompt__copy ui-toggle-visibility__content">
+                      <blockquote>
+                        <p>All of us can think of a book that we hope none of our children or any other children have taken off the shelf. But if I have the right to remove that book from the shelf -- that work I abhor -- then you also have exactly the same right and so does everyone else. And then we have no books left on the shelf for any of us.</p>
+
+                        <footer>
+                          &mdash; <cite><a href="">Katherine Paterson, Author</a></cite>
+                        </footer>
+                      </blockquote>
+
+                      <p>Write a persuasive essay to a newspaper reflecting your vies on censorship in libraries. Do you believe that certain materials, such as books, music, movies, magazines, etc., should be removed from the shelves if they are found offensive? Support your position with convincing arguments from your own experience, observations, and/or reading.</p>
+                    </div>
+
+                    <!-- <ul class="list list--controls">
+                      <li class="list--controls__item">
+                        <a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
+                      </li>
+                    </ul> -->
+                  </article>
+                </div>
+
+                <!-- steps -->
+                <ol class="openassessment__steps" id="openassessment__steps">
+
+                  <!-- STEP: response -->
+                  <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
+                    <header class="step__header ui-toggle-visibility__control">
+                      <h2 class="step__title">
+                        <span class="step__counter"></span>
+                        <span class="wrapper--copy">
+                          <span class="step__label">Your Response</span>
+                          <span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
+                        </span>
+                      </h2>
+
+                      <span class="step__status">
+                        <span class="step__status__label">This step's status:</span>
+                        <span class="step__status__value">
+
+                          <span class="copy">Incomplete</span>
+                        </span>
+                      </span>
+                    </header>
+
+                    <div class="step__instruction">
+                      <p>Please provide your response to the following question. You may save your progress and return to complete your response anytime before the due date of <span class="step__deadline">due <span class="date">January 24, 2014</span></span>. <strong class="emphasis--beta">Once you submit, you may not edit your response</strong>.</p>
+                    </div>
+
+                    <div class="step__content">
+                      <form id="response__submission" class="response__submission" method="post">
+                        <ol class="list list--fields">
+                          <li class="field field--textarea submission__answer" id="submission__answer">
+                            <label for="submission__answer__value">Please provide your response to the above question</label>
+                            <textarea id="submission__answer__value" placeholder="Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></textarea>
+                          </li>
+                        </ol>
+
+                        <ul class="list list--actions">
+                          <li class="list--actions__item">
+                            <button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button>
+                            <span class="tip">you may continue to work on your response until you submit</span>
+                          </li>
+                        </ul>
+                      </form>
+                    </div>
+
+                    <div class="step__actions">
+                      <ul class="list list--actions">
+                        <li class="list--actions__item">
+                          <a aria-role="button" id="step--response__submit" class="action action--submit step--response__submit">Submit your response &amp; move forward</a>
+                        </li>
+                      </ul>
+                    </div>
+                  </li>
+
+                  <!-- ==== -->
+
+                  <!-- STEP: peer assessment -->
+                  <li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
+                    <header class="step__header">
+                      <h2 class="step__title">
+                        <span class="step__counter"></span>
+                        <span class="wrapper--copy">
+                          <span class="step__label">Assess Peers' Responses</span>
+                          <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
+                        </span>
+                      </h2>
+
+                      <span class="step__status">
+                        <span class="step__status__label">This step's status:</span>
+                        <span class="step__status__value">
+
+                          <span class="copy">
+                            <span class="step__status__value--completed">0</span> of
+                            <span class="step__status__value--required">3</span> completed
+                          </span>
+                        </span>
+                      </span>
+                    </header>
+                  </li>
+
+                  <!-- ==== -->
+
+                  <!-- STEP: self assessment -->
+                  <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--unavailable ui-toggle-visibility is--collapsed">
+                    <header class="step__header ui-toggle-visibility__control">
+                      <h2 class="step__title">
+                        <span class="step__counter"></span>
+                        <span class="wrapper--copy">
+                          <span class="step__label">Assess Your Response</span>
+                          <span class="step__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
+                        </span>
+                      </h2>
+
+                      <span class="step__status">
+                        <span class="step__status__label">This step's status:</span>
+                        <span class="step__status__value">
+
+                          <span class="copy">Incomplete</span>
+                        </span>
+                      </span>
+                    </header>
+                  </li>
+                </ol>
+
+                <!-- STATUS: problem grade -->
+                <div id="openassessment__grade" class="openassessment__grade is--unstarted">
+                  <h2 class="openassessment__grade__title">Your Grade:</h2>
+
+                  <div class="openassessment__grade__content">
+                    <span class="grade__value">Incomplete</span>
+                    <p class="grade__description">You have not started this problem</p>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="../js/design.min.js"></script>
+  </body>
+</html>

apps/openassessment/xblock/static/js/design.js

+// openassessment: design-focused js
+// ====================
+
+// NOTES:
+// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
+
+function $linkNewWindow(e) {
+  window.open($(e.target).attr('href'));
+  e.preventDefault();
+}
+
+// --------------------
+
+jQuery(document).ready(function($) {
+
+  // removing no-js, accessibility/modernizr marker
+  $('html').removeClass('no-js');
+
+  // general link management - new window/tab
+  $('a[data-rel="external"]').bind('click', $linkNewWindow);
+});
+

apps/openassessment/xblock/static/js/design.min.js

+// openassessment: design-focused js
+// ====================
+// NOTES:
+// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
+function $linkNewWindow(e){window.open($(e.target).attr("href"));e.preventDefault()}jQuery(document).ready(function(e){e("html").removeClass("no-js");e('a[data-rel="external"]').bind("click",$linkNewWindow)});
\ No newline at end of file

apps/openassessment/xblock/static/js/src/oa_base.js

@@ -8,6 +8,18 @@ function OpenAssessmentBlock(runtime, element) {
     /* Sample Debug Console: http://localhost:8000/submissions/Joe_Bloggs/TestCourse/u_3 */
 
     /*
+     * Utility functions
+     */
+    function collapse(element) {
+        element.addClass("is--collapsed");
+    }
+
+    function expand(element) {
+        element.addClass("is--collapsed");
+    }
+
+
+    /*
      *  Submission Functions
      */
     function render_submissions(data) {
@@ -29,9 +41,9 @@ function OpenAssessmentBlock(runtime, element) {
                     $.ajax({
                         type: "POST",
                         url: renderSubmissionUrl,
-                        dataType: "html",
                         success:  function(data) {
                             render_submissions(data);
+                            collapse($('#openassessment__response', element));
                         }
                     });
                 }
@@ -54,7 +66,7 @@ function OpenAssessmentBlock(runtime, element) {
                 criteriaChoices[selector[i].name] = selector[i].value
             }
             return {
-                "submission_uuid":$("div#peer_submission_uuid")[0].innerText,
+                "submission_uuid":$("span#peer_submission_uuid")[0].innerText,
                 "points_earned":values,
                 "options_selected":criteriaChoices
             };
@@ -99,6 +111,26 @@ function OpenAssessmentBlock(runtime, element) {
                 render_submissions(data);
             }
         });
+
+        $.ajax({
+            type: "POST",
+            url: renderPeerUrl,
+            success:  function(data) {
+                $('#openassessment__peer-assessment', element).replaceWith(data);
+                collapse($('#openassessment__peer-assessment', element));
+            }
+        });
+
+        $.ajax({
+            type: "POST",
+            url: renderSelfUrl,
+            success:  function(data) {
+                $('#openassessment__self-assessment', element).replaceWith(data);
+                collapse($('#openassessment__self-assessment', element));
+            }
         });
+    });
+
+
 }
 /* END Javascript for OpenAssessmentXBlock. */

apps/openassessment/xblock/static/sass/oa/contexts/_ie.scss

@@ -2,7 +2,7 @@
 // ====================
 
 // NOTES:
-// * any openassessment-specific suport-based styling needed for internet explorer should be placed here
+// * any openassessment-specific support-based styling needed for internet explorer should be placed here
 
 
 // --------------------

apps/openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -11,3 +11,79 @@
 //   background: transparent;
 // }
 
+// --------------------
+// Views: Counterbalancing XBlock workbench styling
+// --------------------
+.workbench .vertical {
+  border: none;
+}
+
+
+// --------------------
+// Views: Static HTML Page Display
+// --------------------
+.view--placeholder {
+  background: $bg-view;
+  margin: ($baseline-v*2) $baseline-h;
+}
+
+.wrapper--xblock {
+  // typography tests
+  .h1 {
+    @extend %hd-alpha;
+  }
+
+  .h2 {
+    @extend %hd-bravo;
+  }
+
+  .h3 {
+    @extend %hd-charlie;
+  }
+
+  .h4 {
+    @extend %hd-delta;
+  }
+
+  .h5 {
+    @extend %hd-epsilon;
+  }
+
+  .h6 {
+    @extend %hd-foxtrot;
+  }
+
+  .h7 {
+    @extend %hd-golf;
+  }
+
+  .h8 {
+    @extend %hd-hotel;
+  }
+
+  .copy-1 {
+    @extend %copy-alpha;
+  }
+
+  .copy-2 {
+    @extend %copy-bravo;
+  }
+
+  .copy-3 {
+    @extend %copy-charlie;
+  }
+
+  .copy-4 {
+    @extend %copy-delta;
+  }
+
+  .copy-5 {
+    @extend %copy-epsilon;
+  }
+
+  .copy-6 {
+    @extend %copy-foxtrot;
+  }
+}
+
+// temp

apps/openassessment/xblock/static/sass/oa/utilities/_variables.scss

@@ -3,3 +3,29 @@
 
 // NOTES:
 // * these are openassessment-specific variable files
+
+// --------------------
+// layout (neat-based) - forced breakpoints/sizing
+// --------------------
+$grid-size-s: 530px;                                                // small
+$grid-size-m: 760px;                                                // medium
+$grid-size-l: 925px;                                                // large
+$grid-size-x: 1300px;                                               // extra large
+$grid-size-f: 1600px;                                               // full size
+
+// --------------------
+// layout (neat-based) - mediaqueries
+// --------------------
+$bp-m: new-breakpoint(max-width ($grid-size-s - 1) 4);                           // mobile devices - make grid 4 columns
+$bp-ds: new-breakpoint(min-width $grid-size-s max-width ($grid-size-m - 1) 6);          // small displays - make grid 6 columns
+$bp-dm: new-breakpoint(min-width $grid-size-m max-width ($grid-size-l - 1) 12);         // medium displays - make grid 12 columns
+$bp-dl: new-breakpoint(min-width $grid-size-l max-width ($grid-size-x - 1) 12);        // large displays - make grid 12 columns
+$bp-dx: new-breakpoint(min-width $grid-size-x 12);                        // large displays - make grid 12 columns
+
+
+// --------------------
+// // application - colors: states
+// --------------------
+$color-incomplete: yellow;
+$color-complete: rgb(96, 188, 97);
+$color-error: red;

apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss

@@ -3,3 +3,751 @@
 
 // NOTES:
 // * The basic view and all of its states of the openassessment xblock
+
+.wrapper--openassessment {
+  position: relative;
+}
+
+.openassessment {
+
+  // --------------------
+  // general
+  // --------------------
+
+  // chrome: title
+  .openassessment__title {
+    @include row();
+    margin-bottom: $spacing-bravo;
+    border-bottom: ($baseline-v/5) solid $color-decorative-tertiary;
+    padding-bottom: $spacing-charlie;
+  }
+
+  .openassessment__title--super {
+    @extend %hd-charlie;
+    display: block;
+    margin-bottom: $spacing-delta;
+  }
+
+  .openassessment__title--sub {
+    @extend %hd-golf;
+    display: block;
+    color: $heading-tertiary-color;
+  }
+
+  // steps
+  .openassessment__steps {
+    @extend %no-list;
+    counter-reset: item; // setting counter here
+  }
+
+  .openassessment__steps__step {
+    margin-bottom: $spacing-bravo;
+    border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
+    padding-bottom: $spacing-bravo;
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    // step header
+    .step__header {
+      @extend %trans-opacity;
+      @include row();
+      margin-bottom: $spacing-bravo;
+      opacity: 1.0;
+
+      @include media($bp-ds) {
+        border-bottom: ($baseline-v/10) solid $color-focused;
+        padding-bottom: $spacing-charlie;
+      }
+
+      @include media($bp-dm) {
+        border-bottom: ($baseline-v/10) solid $color-focused;
+        padding-bottom: $spacing-charlie;
+      }
+
+      @include media($bp-dl) {
+        border-bottom: ($baseline-v/10) solid $color-focused;
+        padding-bottom: $spacing-charlie;
+      }
+
+      @include media($bp-dx) {
+        border-bottom: ($baseline-v/10) solid $color-focused;
+        padding-bottom: $spacing-charlie;
+      }
+
+      .step__deadline {
+        color: $color-focused;
+      }
+    }
+
+    // step title/name
+    .step__title {
+
+      @include media($bp-ds) {
+        @include span-columns(4 of 6);
+        vertical-align: middle;
+      }
+
+      @include media($bp-dm) {
+        @include span-columns(9 of 12);
+        vertical-align: middle;
+      }
+
+      @include media($bp-dl) {
+        @include span-columns(9 of 12);
+        vertical-align: middle;
+      }
+
+      @include media($bp-dx) {
+        @include span-columns(9 of 12);
+        vertical-align: middle;
+      }
+
+      .step__counter, .wrapper--copy {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      // step counter
+      .step__counter {
+
+        // increment: show numbers using parent list counter
+        &:before {
+          @extend %hd-foxtrot;
+          @extend %t-weight4;
+          content: counter(item, decimal);
+          counter-increment: item;
+          margin-right: $spacing-delta;
+          border-radius: ($baseline-v/10);
+          border: 1px solid rgba($color-focused, 0.5);
+          padding: $spacing-delta $spacing-charlie;
+          color: $color-focused;
+
+        }
+      }
+
+      .step__label, .step__deadline {
+        display: block;
+      }
+
+      .step__label {
+        @extend %hd-delta;
+        @extend %t-weight3;
+        @extend %trans-color;
+      }
+
+      .step__deadline {
+        @extend %hd-hotel;
+        @extend %trans-color;
+        color: $heading-secondary-color;
+      }
+    }
+
+
+    // step status
+    .step__status {
+
+      .step__status__value {
+        border-radius: ($baseline-v/5);
+        padding: ($baseline-v/4) ($baseline-h/4);
+        background: $color-focused;
+        color: $white-t;
+
+        @include media($bp-m) {
+          display: block;
+          margin-top: $spacing-charlie;
+        }
+      }
+
+      .ico, .copy {
+        display: inline-block;
+        vertical-align: bottom;
+      }
+
+      .ico {
+        @extend %t-icon-m;
+        display: none; // hiding by default
+        margin-right: $spacing-delta;
+      }
+
+      .copy {
+        @extend %copy-foxtrot;
+        @extend %t-titlecase;
+        color: $white-t;
+      }
+
+      @include media($bp-m) {
+        position: relative;
+        top: 2px;
+      }
+
+      @include media($bp-ds) {
+        @include span-columns(2 of 6);
+        @include omega();
+        margin-top: $spacing-delta;
+        text-align: right;
+      }
+
+      @include media($bp-dm) {
+        @include span-columns(3 of 12);
+        @include omega();
+        margin-top: $spacing-delta;
+        text-align: right;
+      }
+
+      @include media($bp-dl) {
+        @include span-columns(3 of 12);
+        @include omega();
+        margin-top: $spacing-delta;
+        text-align: right;
+      }
+
+      @include media($bp-dx) {
+        @include span-columns(3 of 12);
+        @include omega();
+        margin-top: $spacing-delta;
+        text-align: right;
+      }
+    }
+
+    .step__status__label {
+    @extend %text-sr;
+    }
+
+    // STATE: default/visible/expanded
+    .step__instruction, .step__content, .step__actions {
+      display: block;
+      visibility: visible;
+      opacity: 1.0;
+    }
+
+    // step instructions
+    .step__instruction {
+      @extend %copy-delta;
+      margin-bottom: $spacing-bravo;
+      color: $copy-color;
+    }
+
+    // step content
+    .step__content {
+      margin-bottom: $spacing-bravo;
+    }
+
+    // step actions
+    .step__actions {
+      text-align: center;
+
+      @include media($bp-ds) {
+        text-align: right;
+      }
+
+      @include media($bp-dm) {
+       text-align: right;
+      }
+
+      @include media($bp-dl) {
+        text-align: right;
+      }
+
+      @include media($bp-dx) {
+        text-align: right;
+      }
+
+      .action--submit {
+        @extend %btn--primary;
+        @extend %action-delta;
+      }
+    }
+
+    // STATE: step is collapsed (not focused on)
+    &.is--collapsed {
+
+      .step__header {
+        opacity: 0.4;
+        margin-bottom: 0;
+
+        @include media($bp-ds) {
+          border-bottom: none;
+          padding-bottom: 0;
+        }
+
+        @include media($bp-dm) {
+         border-bottom: none;
+         padding-bottom: 0;
+        }
+
+        @include media($bp-dl) {
+          border-bottom: none;
+          padding-bottom: 0;
+        }
+
+        @include media($bp-dx) {
+          border-bottom: none;
+          padding-bottom: 0;
+        }
+
+        .step__deadline {
+          color: $color-focused;
+        }
+
+        // STATE: hover
+        &:hover {
+          opacity: 1.0;
+        }
+      }
+
+      .step__status__value {
+        background: $color-secondary;
+      }
+
+      // step counter
+      .step__counter:before {
+        border: 1px solid rgba($heading-color, 0.5);
+      }
+
+      .step__instruction, .step__content, .step__actions {
+        @extend %trans-opacity;
+        display: none;
+        visibility: hidden;
+        opacity: 0.0;
+      }
+    }
+
+    // STATE: step is expanded (focused)
+    &.is--expanded {
+
+      .step__status__value {
+        background: $color-focused;
+      }
+    }
+
+    // STATE: step is incomplete
+    &.is--incomplete {
+
+    }
+
+    // STATE: step is complete/submitted/graded
+    &.is--complete, &.is--submitted, &.is--graded {
+
+      .step__counter:before {
+        border-color: rgba($color-complete, 0.5);
+        color: $color-complete;
+      }
+
+      .step__status__value {
+        background: $color-complete;
+
+        .ico {
+          display: inline-block;
+        }
+
+        .copy {
+          color: $white-t;
+        }
+      }
+    }
+
+    // STATE: step is saved
+    &.is--saved {
+
+      .step__status__value {
+        background: $color-primary;
+
+        .copy {
+          color: $white-t;
+        }
+      }
+    }
+  }
+
+
+  // --------------------
+  // messages
+  // --------------------
+  .message {
+
+
+    // CASE: has actions
+    &.has-actions {
+
+    }
+  }
+
+  // TYPE: warning
+  .message--warning {
+
+  }
+
+  // TYPE: confirmation
+  .message--confirmation {
+
+  }
+
+
+  // --------------------
+  // problem
+  // --------------------
+  .wrapper--openassessment__prompt {
+
+  }
+
+  .openassessment__prompt {
+    margin-bottom: $spacing-bravo;
+  }
+
+  .openassessment__prompt__title {
+    @extend %text-sr;
+  }
+
+  .openassessment__prompt__copy {
+    @extend %copy-bravo;
+    color: $copy-lead-color;
+
+    > * {
+      margin-bottom: $spacing-bravo;
+
+      &:last-child {
+        @extend %wipe-last-child;
+      }
+    }
+
+
+    a {
+      @extend %link-copy;
+    }
+  }
+
+
+  // --------------------
+  // response
+  // --------------------
+  .step--response {
+
+    // response form
+    .response__submission {
+      padding: $spacing-charlie;
+      background: $color-decorative-tertiary;
+      border-radius: ($baseline-v/10);
+
+      .submission__answer {
+        margin-bottom: $spacing-charlie;
+      }
+    }
+
+    .response__submission__content {
+      label {
+        @extend %text-sr;
+      }
+
+      textarea {
+        @extend %ui-content-longanswer;
+        min-height: ($baseline-v*10);
+      }
+    }
+
+    .response__submission__actions {
+
+      .action--submit, .tip {
+        display: block;
+        width: 100%;
+        margin-bottom: $spacing-charlie;
+
+        @include media($bp-ds) {
+          display: inline-block;
+          vertical-align: middle;
+          width: auto;
+        }
+
+        @include media($bp-dm) {
+          display: inline-block;
+          vertical-align: middle;
+          width: auto;
+        }
+
+        @include media($bp-dl) {
+          display: inline-block;
+          vertical-align: middle;
+          width: auto;
+        }
+
+        @include media($bp-dx) {
+          display: inline-block;
+          vertical-align: middle;
+          width: auto;
+        }
+      }
+
+      .action--submit {
+        @extend %btn--secondary;
+        @extend %action-delta;
+        display: block;
+        text-align: center;
+
+        @include media($bp-ds) {
+          display: inline-block;
+          margin-right: $spacing-charlie;
+        }
+
+        @include media($bp-dm) {
+          display: inline-block;
+          margin-right: $spacing-charlie;
+        }
+
+        @include media($bp-dl) {
+          display: inline-block;
+          margin-right: $spacing-charlie;
+        }
+
+        @include media($bp-dx) {
+          display: inline-block;
+          margin-right: $spacing-charlie;
+        }
+      }
+
+      .tip {
+        @extend %copy-epsilon;
+        color: $copy-supplemental-color;
+      }
+    }
+
+    // STATE: displayed response
+    .submission__answer__display {
+      @extend %ui-section;
+    }
+
+    .submission__answer__display__title {
+      @extend %ui-section-title;
+    }
+
+    .submission__answer__display__content {
+      @extend %copy-charlie;
+      @extend %ui-content-longanswer;
+      @extend %ui-section-content;
+    }
+  }
+
+
+  // --------------------
+  // peer assessment
+  // --------------------
+  .step--peer-assessment {
+
+  }
+
+
+  // --------------------
+  // self assessment
+  // --------------------
+  .step--self-assessment {
+
+  }
+
+
+  // --------------------
+  // status
+  // --------------------
+  .openassessment__grade {
+    @include row();
+    border-top: ($baseline-v/5) solid $color-decorative-tertiary;
+    padding-top: $spacing-bravo;
+
+    .openassessment__grade__title, .openassessment__grade__content {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    .openassessment__grade__title {
+      @extend %hd-delta;
+      margin-right: $spacing-bravo;
+      color: $heading-tertiary-color;
+    }
+
+    .openassessment__grade__content {
+
+      .grade__value {
+        @extend %hd-delta;
+        margin-bottom: $spacing-charlie;
+      }
+
+      .grade__description {
+        @extend %copy-delta;
+      }
+    }
+
+    // STATE: is not started
+    &.is--unstarted {
+
+    }
+
+    // STATE: is incomplete
+    &.is--incomplete {
+    }
+
+    // STATE: is complete
+    &.is--complete {
+    }
+  }
+
+  // --------------------
+  // STATE: graded/complete
+  // --------------------
+
+  // peer review summary
+  .submission__peer-evaluations {
+    @extend %ui-section;
+  }
+
+  .submission__peer-evaluations__title {
+    @extend %ui-section-title;
+  }
+
+  // rubric questions
+  .submission__peer-evaluations__questions {
+    @extend %no-list;
+    @extend %ui-section-content;
+    margin-bottom: $spacing-charlie; // override city
+
+    &:last-child {
+      margin-bottom: 0;
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    // individual question
+    .question {
+      margin-bottom: $spacing-charlie;
+      @extend %wipe-last-child;
+    }
+
+    .question__title {
+      @include clearfix();
+      margin-bottom: $spacing-bravo;
+      border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
+      padding-bottom: $spacing-delta;
+    }
+
+    .question__title__copy {
+      @extend %hd-delta;
+      @extend %t-weight3;
+      float: left;
+      color: $heading-secondary-color;
+    }
+
+    .question__score {
+      @extend %copy-foxtrot;
+      @extend %t-titlecase;
+      float: right;
+      position: relative;
+      bottom: -($spacing-delta);
+      margin-left: $spacing-bravo;
+      padding: $spacing-delta $spacing-charlie ($spacing-delta/2)  $spacing-charlie;
+      background: $color-decorative-tertiary;
+      color: $white;
+    }
+
+    .question__score__value {
+      color: $color-complete;
+
+      &:after {
+        content: "/";
+        margin-left: $spacing-delta;
+        color: $heading-secondary-color;
+      }
+    }
+
+    .question__score__potential {
+      color: $heading-secondary-color;
+
+      .unit {
+        margin-left: $spacing-delta;
+      }
+    }
+
+    .question__answers {
+      @extend %no-list;
+      @extend %wipe-last-child;
+      @include row();
+    }
+
+    // individual answers
+    .answer {
+      margin-bottom: $spacing-bravo;
+
+      @include media($bp-ds) {
+        @include span-columns(3 of 6);
+        @include omega(2n);
+      }
+
+      @include media($bp-dm) {
+        @include span-columns(3 of 12);
+        @include omega(3n);
+      }
+
+      @include media($bp-dl) {
+        @include span-columns(3 of 12);
+        @include omega(3n);
+      }
+
+      @include media($bp-dx) {
+        @include span-columns(3 of 12);
+        @include omega(3n);
+      }
+    }
+
+    .answer__source {
+      @extend %hd-golf;
+      display: block;
+      color: $heading-tertiary-color;
+    }
+
+    .answer__value {
+      @extend %copy-charlie;
+      display: block;
+      margin-bottom: $spacing-charlie;
+      color: $heading-primary-color;
+    }
+
+    .answer__content {
+      @extend %copy-delta;
+      display: block;
+      color: $copy-supplemental-color;
+    }
+  }
+
+  // feedback form
+  .submission__feeedback {
+    @extend %ui-section;
+  }
+
+  .submission__feeedback__title {
+    @extend %ui-section-title;
+  }
+
+  .submission__feeedback__content {
+    @extend %ui-section-content;
+  }
+
+  .submission__feeedback__actions {
+    @extend %ui-section-content;
+    padding-top: 0;
+
+    .action--submit {
+      @extend %btn--secondary;
+      @extend %action-delta;
+      margin-right: $spacing-charlie;
+    }
+  }
+
+
+  // --------------------
+  // STATE: incomplete
+  // --------------------
+
+
+  // --------------------
+  // STATE: waiting
+  // --------------------
+
+}

apps/openassessment/xblock/static/sass/openassessment.scss

@@ -54,6 +54,7 @@
 @import 'xb/elements/typography';              // font sizes/scale and applied/canned definitions
 @import 'xb/elements/controls';                // buttons, link styles, sliders, etc.
 @import 'xb/elements/forms';                   // form elements
+@import 'xb/elements/layout';                  // applied layouts and deliberate class-based breakpoints
 
 // xblock: contextual
 @import 'xb/contexts/ie';                      // Internet Explorer-specific styling

apps/openassessment/xblock/static/sass/themes/edx/_assets.scss

@@ -8,7 +8,7 @@
 // --------------------
 // font: Open Sans - http://www.google.com/fonts/specimen/Open+Sans
 // --------------------
-@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
 
 
 // --------------------

apps/openassessment/xblock/static/sass/themes/edx/_utilities.scss

@@ -52,50 +52,109 @@ $edx-pink-t1: rgba($edx-pink,0.25);
 $edx-pink-t2: rgba($edx-pink,0.50);
 $edx-pink-t3: rgba($edx-pink,0.75);
 
+$edx-gray: rgb(164, 165, 168);
+$edx-gray-l1: tint($edx-gray,20%);
+$edx-gray-l2: tint($edx-gray,40%);
+$edx-gray-l3: tint($edx-gray,60%);
+$edx-gray-l4: tint($edx-gray,80%);
+$edx-gray-l5: tint($edx-gray,90%);
+$edx-gray-d1: shade($edx-gray,20%);
+$edx-gray-d2: shade($edx-gray,40%);
+$edx-gray-d3: shade($edx-gray,60%);
+$edx-gray-d4: shade($edx-gray,80%);
+$edx-gray-d5: shade($edx-gray,90%);
+$edx-gray-s1: saturate($edx-gray,15%);
+$edx-gray-s2: saturate($edx-gray,30%);
+$edx-gray-s3: saturate($edx-gray,45%);
+$edx-gray-u1: desaturate($edx-gray,15%);
+$edx-gray-u2: desaturate($edx-gray,30%);
+$edx-gray-u3: desaturate($edx-gray,45%);
+$edx-gray-t0: rgba($edx-gray,0.125);
+$edx-gray-t1: rgba($edx-gray,0.25);
+$edx-gray-t2: rgba($edx-gray,0.50);
+$edx-gray-t3: rgba($edx-gray,0.75);
+
+$edx-lms-header: rgb(100, 100, 100);
+$edx-lms-copy: rgb(60, 60, 60);
+$edx-lms-action-primary: rgb(29, 157, 217);
+$edx-lms-action-secondary: rgb(135, 135, 135);
+
 
 // --------------------
 // variables: overrides
 // --------------------
-// application - fonts
+// fonts
 $f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
 $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
 
+// layout - grid
+@import "neat/neat-helpers";
+$max-width: 100%;
+$grid-columns: 12;
+$gutter: $baseline-v;
+
+// application - fonts
+$f-title: $f-sans-serif;
+$f-copy: $f-sans-serif;
+$f-action: $f-sans-serif;
+
 // application - colors
-$color-primary: $edx-blue-d1;
-$color-secondary: $edx-blue-l1;
+$color-primary: $edx-lms-action-primary;
+$color-secondary: $edx-lms-action-secondary;
 $color-tertiary: $gray-l1;
 $color-quarternary: $gray-l2;
 
 // application - colors: decorative
-$decorative__color-primary: $edx-blue-u1;
-$decorative__color-secondary: $edx-pink-l2;
+$color-decorative-primary: $gray-d3;
+$color-decorative-secondary: $gray-l3;
+$color-decorative-tertiary: $gray-l5;
+$color-decorative-quaternary: $gray-l7;
+
+// application - colors: states
+$color-disabled: $gray-l4;
+$color-focused: $edx-lms-header;
 
 // application - colors: copy and headings
-$heading-color: $gray-d3;
-$heading-primary-color: $black;
-$heading-secondary-color: $gray;
-$heading-tertiary-color: $gray-l4;
+$heading-color: $edx-lms-header;
+$heading-primary-color: shade($edx-lms-header, 33%);
+$heading-secondary-color: tint($edx-lms-header, 33%);
+$heading-tertiary-color: tint($edx-lms-header, 66%);
 
-$copy-color: $gray-l2;
-$copy-color-alt: $gray-d1;
-$copy-color-focus: $gray-d4;
+$copy-color: $edx-lms-copy;
+$copy-color-alt: tint($edx-lms-copy, 33%);
+$copy-color-focus: shade($edx-lms-copy, 33%);
 
-$copy-lead__color: $gray;
-$copy-lead__color: $gray-d1;
-$copy-lead__color-focus: $gray-d4;
+$copy-lead-color: $edx-lms-copy;
+$copy-lead-color-focus: shade($edx-lms-copy, 33%);
 
-$copy-supplemental-color: $gray-l2;
-$copy-supplemental-color-alt: $gray-l2;
-$copy-supplemental-color-focus: $gray-d1;
+$copy-supplemental-color: tint($edx-lms-copy, 33%);
+$copy-supplemental-color-alt: tint($edx-lms-copy, 66%);
+$copy-supplemental-color-focus: $edx-lms-copy;
 
 // application - colors:states
 $selected-bg: $edx-blue-t1;
 $selected-color: $edx-blue-s1;
 
+// application - colors: actions
+$action-primary-color: tint($color-primary,10%);
+$action-primary-color-focus: saturate($color-primary,25%);
+$action-primary-color-active: $color-primary;
+$action-primary-color-visited: shade($color-primary,20%);
+
+$action-secondary-color: $color-secondary;
+$action-secondary-color-focus: shade($color-secondary,25%);
+$action-secondary-color-active: $color-secondary;
+$action-secondary-color-visited: shade($color-secondary,20%);
+
+$action-tertiary-color: tint($color-teritary,10%);
+$action-tertiary-color-focus: shade($color-teritary,25%);
+$action-tertiary-color-active: $color-teritary;
+$action-tertiary-color-visited: shade($color-teritary,20%);
+
 // application - colors: view-based elements
-$bg-view: $gray-l6;
+$bg-view: transparent;
 
-$bg-header-main: $white;
+$bg-header-main: $white-t;
 $color-header-main: $black;
 
 $bg-content: $gray-l6;
@@ -104,11 +163,6 @@ $color-content: $gray-d1;
 $bg-content-main: $gray-l5;
 $color-content-main: $gray-d1;
 
-// application - colors: view-based elements
-$bg-view: $gray-l6;
-$bg-content: $white;
-
-
 // --------------------
 // mixins:
 // --------------------

apps/openassessment/xblock/static/sass/xb/elements/_base.scss

@@ -8,27 +8,32 @@
 // fonts
 // --------------------
 .wrapper--xblock {
-  @extend %t-copy-base;
-  overflow-y: scroll;
-  font-size: 62.5%;
   background: $bg-view;
 }
 
-
 // --------------------
 // layout
 // --------------------
-[class^="wrapper-"] {
-  @extend %wrapper;
-  padding: 0;
-}
+// [class^="wrapper--"] {
+//   @extend %wrapper;
+//   padding: 0;
+// }
+
 
+// --------------------
+// semantic elements, but visually hidden
+// --------------------
+.sr,
+hr.divider,
+.nav--contents {
+  @extend %text-sr;
+}
 
 // --------------------
-// semantic dividers
+// system-needed elements, but visually hidden
 // --------------------
-.sr, hr.divider {
-  @extend %ui-text-sr;
+.system__element {
+  @extend %text-sr;
 }
 
 
@@ -44,6 +49,6 @@
 .nav--wizard,
 .list--tips,
 .field--group {
-  @extend %ui-no-list;
+  @extend %no-list;
   @extend %wipe-last-child;
 }

apps/openassessment/xblock/static/sass/xb/elements/_controls.scss

@@ -79,11 +79,17 @@
     cursor: default;
     pointer-events: none;
   }
+
+  // CASE: icons in buttons
+  .copy, .ico {
+    display: inline-block;
+    vertical-align: middle;
+  }
 }
 
 %btn-pill {
   @extend %btn;
-  border-radius: $baseline-v/5;
+  border-radius: ($baseline-v/5);
 }
 
 %btn-rounded {
@@ -97,27 +103,29 @@
 }
 
 
-// buttons - primary
+// buttons - primary (assuming dark bg/light copy)
 %btn--primary {
-  @extend %btn-edged;
+  @extend %btn-pill;
   @extend %t-weight3;
   padding: ($baseline-v/2) ($baseline-h);
   background: $action-primary-color;
-  border-color: saturate($action-primary-color, 15%);
+  border: 1px solid shade($action-primary-color, 15%);
   color: tint($action-primary-color, 90%);
 
+  .copy {
+    @extend %t-weight3;
+  }
 
   &:hover, &:active, &:focus {
     background: $action-primary-color-focus;
     border-color: $action-primary-color-focus;
-    color: tint($action-primary-color, 95%);
+    color: tint($action-primary-color, 99%);
   }
 
   &.current, &.active {
     background: $action-primary-color-active;
     border-color: $action-primary-color-active;
 
-
     &:hover, &:active, &:focus {
 
     }
@@ -129,20 +137,23 @@
 }
 
 
-// buttons - secondary
+// buttons - secondary (assuming dark bg/light copy)
 %btn--secondary {
-  @extend %btn-edged;
+  @extend %btn-pill;
   @extend %t-weight3;
   padding: ($baseline-v/2) ($baseline-h);
   background: $action-secondary-color;
-  border-color: saturate($action-secondary-color, 15%);
+  border: 1px shade($action-secondary-color, 10%);
   color: tint($action-secondary-color, 90%);
 
+  .copy {
+    @extend %t-weight3;
+  }
 
   &:hover, &:active, &:focus {
     background: $action-secondary-color-focus;
     border-color: $action-secondary-color-focus;
-    color: tint($action-secondary-color, 95%);
+    color: tint($action-secondary-color, 99%);
   }
 
   &.current, &.active {
@@ -160,20 +171,23 @@
 }
 
 
-// buttons - tertiary
+// buttons - tertiary (assuming dark bg/light copy)
 %btn--tertiary {
   @extend %btn-edged;
   @extend %t-weight3;
-  padding: ($baseline-v/2) ($baseline-h);
+  padding: ($baseline-v/2) ($baseline-h/2);
   background: $action-tertiary-color;
-  border-color: saturate($action-tertiary-color, 15%);
+  border: 1px solid shade($action-tertiary-color, 10%);
   color: tint($action-tertiary-color, 90%);
 
+  .copy {
+    @extend %t-weight3;
+  }
 
   &:hover, &:active, &:focus {
     background: $action-tertiary-color-focus;
     border-color: $action-tertiary-color-focus;
-    color: tint($action-tertiary-color, 95%);
+    color: tint($action-tertiary-color, 99%);
   }
 
   &.current, &.active {

apps/openassessment/xblock/static/sass/xb/elements/_forms.scss

@@ -4,3 +4,43 @@
 // NOTES:
 // * basic form element (fields, fieldsets/wrappers, actions, and states) styling for all xblocks
 
+// contains all form elements inside of the main xblock wrapper
+.wrapper--xblock {
+
+  // forms - general
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  textarea {
+    @extend %t-weight2;
+    border: 1px solid $color-decorative-secondary;
+    padding: $spacing-charlie;
+    font-family: $f-copy;
+    outline: 0;
+
+    @include placeholder {
+      color: $copy-supplemental-color-alt;
+    }
+
+    &:focus {
+      box-shadow: 0 0 6px 0 rgba(29,157,217,0.4),inset 0 0 4px 0 rgba(0,0,0,0.15);
+      border-color: $selected-color;
+      outline: 0;
+    }
+  }
+
+  .field {
+
+    label, .label {
+      @extend %copy-delta;
+      display: block;
+      margin-bottom: $spacing-charlie;
+      color: $copy-color;
+    }
+
+    textarea {
+      width: 100%;
+    }
+  }
+}
+

apps/openassessment/xblock/static/sass/xb/elements/_layout.scss

+// xblock: elements - layouts
+// ====================
+
+// NOTES:
+// * Grid and common page layout rules
+
+.wrapper--grid {
+  @include outer-container();
+}

apps/openassessment/xblock/static/sass/xb/elements/_typography.scss

@@ -29,6 +29,14 @@
   font-weight: 700;
 }
 
+// --------------------
+// titlecase
+// --------------------
+%t-titlecase {
+  text-transform: uppercase;
+  letter-spacing: 0.05rem;
+}
+
 
 // --------------------
 // canned icon sizes
@@ -54,136 +62,148 @@
 // canned headings
 // --------------------
 %hd-alpha {
-  @include font-size(48);
-  @include lh(48);
-  @extend %t-weight4;
-  text-transform: uppercase;
+  @extend %t-weight1;
+  @extend %t-titlecase;
+  @include font-size(24);
+  @include lh(24);
   font-family: $f-title;
-  letter-spacing: 0.50rem;
-  color: $heading-primary-color;
 }
 
 %hd-bravo {
-  @extend %t-weight2;
-  @include font-size(24);
-  @include lh(24);
-  margin: 0 0 ($baseline-v/4) 0;
+  @extend %t-weight3;
+  @include font-size(21);
+  @include lh(21);
   font-family: $f-title;
-  color: $heading-primary-color;
 }
 
 %hd-charlie {
   @extend %t-weight1;
+  @extend %t-titlecase;
   @include font-size(18);
   @include lh(18);
-  margin: 0 0 ($baseline-v/2) 0;
-  font-family: $f-title;
-  color: $heading-primary-color;
-}
-
-%hd-charlie-alt {
-  @extend %t-weight2;
-  @include font-size(18);
-  @include lh(18);
-  margin: 0 0 ($baseline-v/4) 0;
   font-family: $f-title;
-  color: $heading-color;
 }
 
 %hd-delta {
-  @extend %t-weight1;
+  @extend %t-weight3;
   @include font-size(16);
   @include lh(16);
-  margin: 0 0 ($baseline-v/2) 0;
-  text-transform: uppercase;
   font-family: $f-title;
-  letter-spacing: 0.125rem;
-  color: $heading-tertiary-color;
 }
 
 %hd-epsilon {
   @extend %t-weight1;
-  @include font-size(14);
-  @include lh(14);
+  @extend %t-titlecase;
+  @include font-size(16);
+  @include lh(16);
   font-family: $f-title;
-  color: $heading-secondary-color;
 }
 
 %hd-foxtrot {
-  @extend %t-weight1;
+  @extend %t-weight3;
   @include font-size(16);
   @include lh(16);
-  margin: 0 0 ($baseline-v/10) 0;
   font-family: $f-title;
-  color: $heading-secondary-color;
 }
 
 %hd-golf {
   @extend %t-weight1;
-  @include font-size(14);
-  @include lh(14);
-  margin: 0 0 ($baseline-v/10) 0;
-  text-transform: uppercase;
+  @extend %t-titlecase;
+  @include font-size(13);
+  @include lh(13);
   font-family: $f-title;
-  letter-spacing: 0.25rem;
-  color: $heading-tertiary-color;
 }
 
 %hd-hotel {
-  @include font-size(24);
-  @include lh(24);
-  @extend %t-weight4;
-  text-transform: uppercase;
+  @extend %t-weight1;
+  @include font-size(13);
+  @include lh(13);
+  font-family: $f-title;
+}
+
+%hd-india {
+  @extend %t-weight1;
+  @extend %t-titlecase;
+  @include font-size(11);
+  @include lh(11);
   font-family: $f-title;
-  letter-spacing: 0.25rem;
-  color: $heading-tertiary-color;
 }
 
 
 // --------------------
 // canned copy
 // --------------------
-%copy-base {
-  @extend %t-weight1;
-  @include font-size(16);
-  @include lh(16);
-  font-family: $f-copy;
-  color: $copy-color;
-}
-
-%copy-lead {
+%copy-alpha {
   @extend %t-weight0;
   @include font-size(24);
   @include lh(24);
   font-family: $f-copy;
-  color: $copy-color;
 }
 
-%copy-showcase {
+%copy-bravo {
   @include font-size(18);
   @include lh(18);
-  color: $copy-color;
   font-family: $f-copy;
 }
 
-%copy-detail {
+%copy-charlie {
+  @extend %t-weight1;
+  @include font-size(16);
+  @include lh(16);
+  font-family: $f-copy;
+}
+
+%copy-delta {
   @include font-size(14);
   @include lh(14);
   font-family: $f-copy;
-  color: $copy-color;
 }
 
-%copy-metadata {
+%copy-epsilon {
+  @include font-size(13);
+  @include lh(12);
+  font-family: $f-copy;
+}
+
+%copy-foxtrot {
   @include font-size(12);
   @include lh(12);
   font-family: $f-copy;
-  color: $copy-supplemental-color;
 }
 
 
 // --------------------
 // canned actions
 // --------------------
+%action-alpha {
+  @include font-size(18);
+  @include lh(18);
+  font-family: $f-action;
+}
+
+%action-bravo {
+  @include font-size(18);
+  @include lh(18);
+  font-family: $f-action;
+}
+
+%action-charlie {
+  @include font-size(16);
+  @include lh(16);
+  font-family: $f-action;
+}
+
+%action-delta {
+  @include font-size(14);
+  @include lh(14);
+  font-family: $f-action;
+}
+
+%action-epsilon {
+  @include font-size(12);
+  @include lh(12);
+  font-family: $f-action;
+}
 
 
 // --------------------
@@ -193,7 +213,6 @@
   font-style: normal;
 }
 
-
 %emphasis-alpha {
   @extend %emphasis;
   @extend %t-weight3;

apps/openassessment/xblock/static/sass/xb/utilities/_extends.scss

@@ -136,6 +136,10 @@
   @include transition(width $tmg-f1 ease-in-out, height $tmg-f1 ease-in-out);
 }
 
+%trans-opacity {
+  @include transition(opacity $tmg-f1 ease-in-out);
+}
+
 %trans-color {
   @include transition(color $tmg-f1 ease-in-out);
 }
@@ -160,9 +164,49 @@
   box-shadow: 0 1px 2px 0 $shadow-l1;
 }
 
+
 // --------------------
 // Decorative: round/circular elements
 // --------------------
 %deco-circle {
   border-radius: 99999em;
 }
+
+// --------------------
+// UI: content
+// --------------------
+%ui-content-longanswer {
+  max-height: ($baseline-v*15);
+  overflow-y: scroll;
+}
+
+
+// --------------------
+// UI: section
+// --------------------
+%ui-section {
+  border: ($baseline-v/10) solid $color-decorative-quaternary;
+  border-radius: ($baseline-v/10);
+  margin-bottom: $spacing-bravo;
+}
+
+%ui-section-focus {
+  border-color: $color-decorative-tertiary;
+}
+
+%ui-section-title {
+  @extend %hd-golf;
+  @extend %t-weight3;
+  padding: $spacing-charlie $spacing-bravo;
+  background: $color-decorative-quaternary;
+  color: $heading-tertiary-color;
+}
+
+%ui-section-title-focus {
+  background: $color-decorative-tertiary;
+  color: $heading-secondary-color;
+}
+
+%ui-section-content {
+  padding: $spacing-bravo;
+}

apps/openassessment/xblock/static/sass/xb/utilities/_mixins.scss

@@ -22,7 +22,7 @@
 // --------------------
 @mixin font-size($sizeValue: 16){
   font-size: $sizeValue + px;
-  font-size: ($sizeValue/10) + rem;
+  // font-size: ($sizeValue/10) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently
 }
 
 
@@ -31,6 +31,6 @@
 // --------------------
 @mixin lh($fontSize: auto){
   line-height: ($fontSize*1.50) + px;
-  line-height: (($fontSize/10)*1.50) + rem;
+  // line-height: (($fontSize/10)*1.50) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently
 }
 

apps/openassessment/xblock/static/sass/xb/utilities/_reset.scss

@@ -421,6 +421,10 @@
   // --------------------
   // custom reset
   // --------------------
+  * {
+   @include box-sizing(border-box);
+  }
+
   div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,

apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss

@@ -10,6 +10,24 @@
 $baseline-v: 20px;                                                  // vertical baseline
 $baseline-h: 40px;                                                  // horizontal baseline
 
+// units: spacing presets
+$spacing-alpha: ($baseline-v*2);
+$spacing-bravo: $baseline-v;
+$spacing-charlie: ($baseline-v/2);
+$spacing-delta: ($baseline-v/4);
+
+
+// --------------------
+// layout - grid (neat-based - http://neat.bourbon.io/)
+// --------------------
+// grid
+@import "neat/neat-helpers";
+$max-width: 100%;                                                   // http://gridcalculator.dk/#/1040/12/20/20
+$grid-columns: 12;                                                  // make grid 12 columns
+$column: $baseline-v;
+$gutter: $baseline-v;                                               // gutter b/t columns
+// $visual-grid: true;
+// $visual-grid-index: front;
 
 // --------------------
 // colors - basic
@@ -116,13 +134,20 @@ $f-action: $f-sans-serif;
 // --------------------
 // application - colors
 // --------------------
-$color-primary: $blue-s2;
-$color-secondary: $blue;
+// application - colors: basic
+$color-primary: $blue;
+$color-secondary: $blue-u1;
 $color-teritary: $blue-u2;
 
 // application - colors: decorative
 $color-decorative-primary: $blue-u2;
-$color-decorative-secondary: $gray-t0;
+$color-decorative-secondary: $gray-l4;
+$color-decorative-tertiary: $gray-l6;
+$color-decorative-quaternary: tint($gray-l6, 10%);
+
+// application - colors: states
+$color-disabled: $gray-l4;
+$color-focused: $blue-u2;
 
 // application - colors: actions
 $action-primary-color: tint($color-primary,10%);
@@ -143,10 +168,10 @@ $action-tertiary-color-visited: shade($color-teritary,20%);
 // application - colors: copy and headings
 $heading-color: $gray-d5;
 $heading-primary-color: $black;
-$heading-secondary-color: $gray-l3;
-$heading-tertiary-color: $gray-l4;
+$heading-secondary-color: $gray-l1;
+$heading-tertiary-color: $gray-l3;
 
-$copy-color: $gray-l2;
+$copy-color: $gray-l1;
 $copy-color-alt: $gray-d1;
 $copy-color-focus: $gray-d4;
 
@@ -163,5 +188,6 @@ $selected-bg: $blue-t1;
 $selected-color: $blue-s1;
 
 // application - colors: view-based elements
-$bg-view: $gray-l6;
+$bg-view: $gray-l7;
 $bg-content: $white;
+$bg-message: $black;

apps/openassessment/xblock/submission_mixin.py

-import datetime
 from xblock.core import XBlock
 from submissions import api
 from openassessment.peer import api as peer_api
@@ -148,7 +147,7 @@ class SubmissionMixin(object):
             "step_status": step_status,
         }
 
-        path = "openassessmentblock/oa_response.html"
+        path = "openassessmentblock/response/oa_response.html"
         if student_score:
             assessments = peer_api.get_assessments(student_submission["uuid"])
             median_scores = peer_api.get_assessment_median_scores(
@@ -160,10 +159,10 @@ class SubmissionMixin(object):
             for criterion in context["rubric_criteria"]:
                 criterion["median_score"] = median_scores[criterion["name"]]
 
-            path = 'openassessmentblock/oa_response_graded.html'
+            path = 'openassessmentblock/response/oa_response_graded.html'
         elif student_submission:
-            path = 'openassessmentblock/oa_response_submitted.html'
+            path = 'openassessmentblock/response/oa_response_submitted.html'
         elif not problem_open and date == "due" and not student_submission:
-            path = 'openassessmentblock/oa_response_closed.html'
+            path = 'openassessmentblock/response/oa_response_closed.html'
 
         return self.render_assessment(path, context_dict=context)

apps/openassessment/xblock/test/test_openassessment.py

@@ -141,10 +141,21 @@ class TestOpenAssessment(TestCase):
         xblock_fragment = self.runtime.render(self.assessment, "student_view")
         self.assertTrue(xblock_fragment.body_html().find("Openassessmentblock"))
 
+        # Validate Submission Rendering.
         submission_response = self.assessment.render_submission({})
         self.assertIsNotNone(submission_response)
         self.assertTrue(submission_response.body.find("openassessment__response"))
 
+        # Validate Peer Rendering.
+        peer_response = self.assessment.render_peer_assessment({})
+        self.assertIsNotNone(peer_response)
+        self.assertTrue(peer_response.body.find("openassessment__peer-assessment"))
+
+        # Validate Self Rendering.
+        self_response = self.assessment.render_self_assessment({})
+        self.assertIsNotNone(self_response)
+        self.assertTrue(self_response.body.find("openassessment__peer-assessment"))
+
     def test_start_end_date_checks(self):
         """
         Check if the start and end date checks work appropriately.