Code documentation cleaned up

animation/static/css/animation.css

 /* CSS for AnimationXBlock */
-.animation_wrapper { 
+.animation_wrapper {  // Whole XBlock. Gray background
     display:block; 
     background:rgb(200, 200, 200); // TODO: edX gray
     padding:20px !important;
@@ -9,32 +9,35 @@
     border-radius:5px;
 }
 
-.animation_block {
-    display:inline-block;
-}
-
-.animation_text {
-    border-width:1px; 
-    border-style:solid; 
-    border-color:black;
-    border-radius:5px;
+.animation_slider_wrapper { // Div around slider. Give a bit of a border
+    display:block; 
+    width:100%; 
     padding:10px;
-    text-align:center;
-    margin:10px;
-    background:rgb(255, 255, 255); 
 }
 
 .ui-widget-content .ui-state-default,
 .animation_slider
 .ui-widget-header .ui-state-default, .animation_slider {
-	border: 1px solid #222222;
+	border: 1px solid #222222; // Slider knob
 	background: #e6e6e6 linear-gradient(rgb(109, 204, 241), rgb(56, 168, 229));
 	font-weight: normal;
 	color: #555555;
 }
 
 .ui-widget-content, .animation_slider  {
-	border: 1px solid #222222;
+	border: 1px solid #222222; // Slider background
 	background: #23c400 linear-gradient(90deg, rgb(109, 204, 241), rgb(202, 232, 202));
 	color: #222222;
 }
+
+// Block of text at the bottom. Rounded border. We'd like nicer fonts. 
+.animation_text {
+    border-width:1px; 
+    border-style:solid; 
+    border-color:black;
+    border-radius:5px;
+    padding:10px;
+    text-align:center;
+    margin:10px;
+    background:rgb(255, 255, 255); 
+}

animation/static/html/animation.html

 <div class="animation_wrapper" style="width:{width};">
-  <div class="animation_block" style="width:{width};">
-    <script type="data/animation" class="animation_source">
-      {{"position":{position}, 
-        "animation":{animation}, 
-        "max_position":{max_position}
-      }}
-    </script>
-    <div style="display:block; width:100%; padding:10px;">
-      <div class="animation_slider" style="width:{inner_width}; "></div>
-    </div>
-    <img class="animation_image" src="" height={height} width={width}>
-    <div class="animation_text_wrapper" style="height:{textheight}">
-      <div class="animation_text">
-      </div>
+  <script type="data/animation" class="animation_source">
+    {{"position":{position}, 
+      "animation":{animation}, 
+    "max_position":{max_position}
+    }}
+  </script>
+  <div class="animation_slider_wrapper">
+    <div class="animation_slider" style="width:{inner_width}; "></div>
+  </div>
+  <img class="animation_image" src="" height={height} width={width}>
+  <div class="animation_text_wrapper" style="height:{textheight}">
+    <div class="animation_text">
     </div>
   </div>
 </div>