Merge pull request #809 from MITx/feature/rocha/styling-for-code-responses

Add styling for code grader responses

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -622,4 +622,70 @@ section.problem {
       }
     }
   }
+
+  .external-grader-message {
+    section {
+      padding-left: 20px;
+      background-color: #FAFAFA;
+      color: #2C2C2C;
+      font-family: monospace;
+      font-size: 1em;
+
+      .shortform {
+        font-weight: bold;
+      }
+
+      .longform {
+        padding: 0px;
+        margin: 0px;
+
+        .result-errors {
+          margin: 5px;
+          padding: 10px 10px 10px 40px;
+          background: url('../images/incorrect-icon.png') center left no-repeat;
+          li {
+            color: #B00;
+            }
+        }
+
+        .result-output {
+          margin: 5px;
+          padding: 20px 0px 15px 50px;
+          border-top: 1px solid #DDD;
+          border-left: 20px solid #FAFAFA;
+
+          h4 {
+            font-family: monospace;
+            font-size: 1em;
+          }
+
+          dl {
+            margin: 0px;
+          }
+
+          dt {
+            margin-top: 20px;
+          }
+
+          dd {
+            margin-left: 24pt;
+          }
+        }
+
+        .result-correct {
+          background: url('../images/correct-icon.png') center left no-repeat;
+          .result-actual-output {
+            color: #090;
+          }
+        }
+
+        .result-incorrect {
+          background: url('../images/incorrect-icon.png') center left no-repeat;
+          .result-actual-output {
+            color: #B00;
+          }
+        }
+      }
+    }
+  }
 }