revising markup, styling, and UI for grade status rendering

apps/openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html

-<div id="openassessment__grade" class="openassessment__grade is--unstarted">
-    <h2 class="openassessment__grade__title">Your Grade:</h2>
+<li id="openassessment__grade" class="openassessment__steps__step step--grade is--unstarted">
+    <header class="step__header ui-toggle-visibility__control">
+        <h2 class="step__title">
+            <span class="wrapper--copy">
+                <span class="step__label">Your Grade:</span>
+                <span class="grade__value">
+                    <p>You have not started this problem</p>
 
-    <div class="openassessment__grade__content">
-        <span class="grade__value">Not Completed</span>
-        <p>You have not started this problem</p>
-    </div>
-</div>
+                </span>
+            </span>
+        </h2>
+    </header>
+</li>