diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 16c8de41ac..e171d35513 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -391,6 +391,15 @@ section.problem {
     }
   }
 
+  div.capa_alert {
+    padding: 8px 12px;
+    border: 1px solid #EBE8BF;
+    border-radius: 3px;
+    background: #FFFCDD;
+    font-size: 0.9em;
+    margin-top: 10px;
+  }
+
   .hints {
     border: 1px solid #ccc;
 
diff --git a/common/lib/xmodule/xmodule/js/src/capa/display.coffee b/common/lib/xmodule/xmodule/js/src/capa/display.coffee
index 24363735ae..098b79d9cf 100644
--- a/common/lib/xmodule/xmodule/js/src/capa/display.coffee
+++ b/common/lib/xmodule/xmodule/js/src/capa/display.coffee
@@ -263,7 +263,7 @@ class @Problem
       @el.find('.capa_alert').remove()
     alert_elem = "<div class='capa_alert'>" + msg + "</div>"
     @el.find('.action').after(alert_elem)
-    @el.find('.capa_alert').animate(opacity: 0, 500).animate(opacity: 1, 500)
+    @el.find('.capa_alert').css(opacity: 0).animate(opacity: 1, 700)
 
   save: =>
     Logger.log 'problem_save', @answers