CSS arrow to mark input and output

**Note**: This is a prototype.

Instead of "In" and "Out" use arrow to mark the input and output
of IPython lessons.

To construct the arrows we only use CSS.

lesson.css

@@ -11,12 +11,41 @@
 /* Manual input. */
 .in {
     color: darkgreen;
+    margin-left: 20px;
+}
+
+div.in:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: 12px solid transparent;
+    border-bottom: 12px solid transparent;
+    border-left: 12px solid #727272;
+    position: relative;
+    left:-16px;
+    top:10px;
+    float:left;
 }
 
 /* Program output. */
 .out {
     color: darkblue;
-    font-style: italic;
+    margin-left: 20px;
+}
+
+div.out:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: 12px solid transparent;
+    border-bottom: 12px solid transparent;
+    border-right: 12px solid #727272;
+    position: relative;
+    left:-16px;
+    top:10px;
+    float:left;
 }
 
 /* Error output. */

swc.css

@@ -23,40 +23,13 @@ div.chapter h2 {
     background-color: azure;
 }
 
-/* Comments in code. */
-.comment {
-    color: purple;
-}
-
-/* Error messages. */
-.err {
-    color: darkred;
-    font-style: italic;
-}
-
 /* Things to fix. */
 .fixme {
     text-decoration: underline;
     color: darkred;
     background-color: lightgray;
 }
 
-/* Highlighted changes in code. */
-.highlight {
-    background-color: mistyrose;
-}
-
-/* Manual input. */
-.in {
-    color: darkgreen;
-}
-
-/* Program output. */
-.out {
-    color: darkblue;
-    font-style: italic;
-}
-
 /* Putting shadows around things. */
 .shadow {
     -moz-box-shadow: 0 0 30px 5px #999;