Styling is no longer horrible

done/static/css/done.css

 /* CSS for DoneXBlock */
 
-.done_block .count {
-    font-weight: bold;
+.done_block {
+    width:200px; 
+    height:35px;
+    cursor: pointer;
+    border: 1px solid #0d72a2;
+    border-radius: 3px;
+    font-family: 'Open Sans', Verdana, Geneva, sans-serif, sans-serif;
+    font-size: 13.333333015441895px;
+    font-weight : bold;
+    letter-spacing: normal;
+    //padding: 5 0 -5 0;
+    //margin: -5 0 5 0;
 }
 
-.done_block p {
-    cursor: pointer;
+.wipe {
+  -webkit-transition: width 0.2s;
+  transition: width 0.2s;
+  text-align:center;
+  vertical-align:-10;
+}
+
+.windshield_animated {
+  -webkit-transition: background-color 0.4s, box-shadow 0.4s, color 0.4s, text-shadow 0.4s, background-image 0.4s;
+  transition: background-color 0.4s, box-shadow 0.4s, color 0.4s, text-shadow 0.4s, background-image 0.4s;
+}
+
+.windshield {
+  height:100%;
+}
+
+.windshield_on { // "Mark as complete"
+    -webkit-font-smoothing: antialiased;
+    background-color: #1e8bbe;
+    background-image: linear-gradient(rgb(109, 204, 241), rgb(56, 168, 229));
+    border-radius: 3px;
+    border: 1px solid rgb(43, 122, 163);
+    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px;
+    color: #fff;
+    text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 0px;
+}
+
+.windshield_off { // Undo
+    -webkit-font-smoothing: antialiased;
+    background-color: #e1e1e1;
+    background-image: linear-gradient(rgb(225, 255, 225), rgb(202, 232, 202));
+    border-radius: 3px;
+    border: 1px solid #cacaca;
+    box-shadow: rgb(251, 251, 251) 0px 1px 0px 0px inset;
+    color: #048904; //#333;
+    text-shadow: rgb(248, 248, 248) 0px 1px 0px;
+}
+
+.windshield_on .wipe_on {
+  display:inline-block;
+  width:80%;
+  overflow:hidden;
+  text-overflow: clip;
+  white-space:nowrap;
+}
+
+.windshield_off .wipe_on {
+  display:inline-block;
+  width:0;
+  overflow:hidden;
+  text-overflow: clip;
+  white-space:nowrap;
+}
+
+.wiper {
+  display:inline-block;
+  width:7%;
+  vertical-align:-10;
+}
+
+.windshield_off .wipe_off {
+  display:inline-block;
+  width:80%;
+  overflow:hidden;
+  text-overflow: clip;
+  white-space:nowrap;
+}
+
+.windshield_on .wipe_off {
+  display:inline-block;
+  width:0;
+  overflow:hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+.ui_icon_white {
+    background-image: url("//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/images/ui-icons_888888_256x240.png");
 }
\ No newline at end of file

done/static/html/done.html

 <div class="done_block">
-  <div style="width:200px; height:30px;">
-    <div class="windshield"> 
-      <div class="wipe wipe_off"> Undo </div>
-      <div class="wiper"> <span class="ui-icon ui-icon-circle-plus"></span> </div>
-      <div class="wipe wipe_on"> Mark as complete </div>
-    </div>
+  <div class="windshield"> 
+    <div class="wipe wipe_off"> Undo </div>
+    <div class="wiper"> <span class="ui-icon ui-icon-circle-plus ui_icon_white"></span> </div>
+    <div class="wipe wipe_on"> Mark as complete </div>
   </div>
 </div>
-
-<style>
-.wipe {
-  -webkit-transition: width 0.2s;
-  transition: width 0.2s;
-  text-align:center;
-  vertical-align:middle;
-}
-
-.windshield_animated {
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-
-.windshield {
-  height:100%;
-}
-
-.windshield_on {
-  background-color: #700000;
-  color: #4BA1A1;
-}
-
-.windshield_off {
-  background-color: #048904;
-  color: #D59763;
-}
-
-.windshield_on .wipe_on {
-  display:inline-block;
-  width:80%;
-  overflow:hidden;
-  text-overflow: clip;
-  white-space:nowrap;
-}
-
-.windshield_off .wipe_on {
-  display:inline-block;
-  width:0;
-  overflow:hidden;
-  text-overflow: clip;
-  white-space:nowrap;
-}
-
-.wiper {
-  display:inline-block;
-  width:7%;
-  vertical-align:middle;
-}
-
-.windshield_off .wipe_off {
-  display:inline-block;
-  width:80%;
-  overflow:hidden;
-  text-overflow: clip;
-  white-space:nowrap;
-}
-
-.windshield_on .wipe_off {
-  display:inline-block;
-  width:0;
-  overflow:hidden;
-  text-overflow: clip;
-  white-space: nowrap;
-}
-
-
-
-
-</style>