line numbers

app/assets/stylesheets/molecules/_admin.scss

@@ -6,10 +6,6 @@ main {
   .savecancel {
     @include span-columns(12);
   }
-  .error {
-    background-color: transparent;
-    color: $accent-color-1;
-  }
   label.error {
     text-align: right;
     padding-top: 0;

app/assets/stylesheets/molecules/_livecoder.scss

@@ -2,12 +2,14 @@
   margin: 10px 0;
 
   textarea {
-    border: 1px solid black;
-    min-height: 200px;
-    padding: 10px;
-    width: 100%;
-    margin-bottom: 0;
     background-color: #fff;
+    border: 1px solid black;
+    font-family: "Lucida Console", Monaco, monospace;
+    font-size: 10px;
+    // line-height: 1.6em;
+    margin-bottom: 0;
+    min-height: 205px;
+    width: 100%;
 
     &[disabled] {
       background-color: #ddd;
@@ -15,7 +17,12 @@
   }
 }
 
-.code-input ~ button { 
+.code-input textarea,
+.questions_tpl .code-input textarea {
+  padding: 4px 0.2rem 0 2rem;
+}
+
+.code-input ~ button {
   margin-left: 0;
   clear: both;
   display: block;
@@ -58,3 +65,72 @@ iframe {
     }
   }
 }
+
+
+
+// jQuery Lined Textarea Plugin
+//   http://alan.blog-city.com/jquerylinedtextarea.htm
+//
+// Copyright (c) 2010 Alan Williamson
+//
+// Released under the MIT License:
+// http://www.opensource.org/licenses/mit-license.php
+//
+// Usage:
+//   Displays a line number count column to the left of the textarea
+//
+//   Class up your textarea with a given class, or target it directly
+//   with JQuery Selectors
+//
+//   $(".lined").linedtextarea({
+//   	selectedLine: 10,
+//    selectedClass: 'lineselect'
+//   });
+
+.linedwrap {
+	border: 1px solid black;
+	padding: 0;
+  position: relative;
+}
+
+.linedtextarea {
+	padding: 0;
+	margin: 0;
+}
+
+.linedtextarea textarea, .linedwrap .codelines .lineno {
+	font-size: 10pt;
+  font-family: "Lucida Console", Monaco, monospace;
+	line-height: normal !important;
+}
+
+.linedtextarea textarea {
+	padding-right: 0.3em;
+	padding-top: 0.3em;
+	border: 0;
+}
+
+.linedwrap .lines {
+	margin-top: 0px;
+	overflow: hidden;
+	border-right: 1px solid #c0c0c0;
+	margin-right: 10px;
+  position: absolute;
+  left: 0.3rem;
+}
+
+.linedwrap .codelines {
+	padding-top: 5px;
+}
+
+.linedwrap .codelines .lineno {
+	color:#AAAAAA;
+	padding-right: 0.5em;
+	padding-top: 0.0em;
+	text-align: right;
+	white-space: nowrap;
+}
+
+.linedwrap .codelines .lineselect {
+	color: red;
+}

app/assets/stylesheets/pages/_error.scss

@@ -21,6 +21,11 @@
   }
 }
 
+.warning {
+  @extend .error;
+  background-color: #f39c12;
+}
+
 @media only screen and (min-width: $desktop) {
   .error-header {
     .page-title {

app/assets/stylesheets/templates/_summary.scss

@@ -43,13 +43,28 @@
   margin-top: 3rem;
 }
 
+@keyframes success-fadeout {
+  0% { opacity: 1; max-height: 40px; }
+  85% { opacity: 0; max-height: 40px; padding: .5rem 0; margin-bottom: .5rem; }
+  100% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
+}
+
 .success {
+    box-sizing: border-box;
     text-align: center;
     background-color: $accent-color-3;
     color: #fff;
     padding-top: .5rem;
     padding-bottom: .5rem;
     margin-bottom: .5rem; 
+    animation-name: success-fadeout;
+    animation-duration: 1.5s;
+    animation-delay: 2s;
+    animation-fill-mode: forwards;
+}
+
+.text-answer.answer-container {
+  white-space: pre-line;
 }
 
 @media only screen and (min-width: $tablet) {