Better problem alert layout for alerts that include hints.

app/styles/play/level/tome/problem_alert.sass

@@ -3,18 +3,22 @@
 .problem-alert
   z-index: 10
   position: absolute
-  bottom: -120px
+  bottom: -135px
   left: 10px
   right: 10px
   background: transparent
   border: 0
-  padding: 7px 20px
+  padding: 0
   text-shadow: none
   color: white
   word-wrap: break-word
   border-image: url(/images/level/code_editor_error_background.png) 16 20 fill round
   border-width: 16px 20px
 
+  &.no-hint
+    // Since it's probably only one line, let's make it not look weird by being tiny.
+    padding: 7px
+
   .close
     @include opacity(0.80)
     text-shadow: none
@@ -35,10 +39,6 @@
     
   &.alert-info
     border-image-source: url(/images/level/code_editor_info_background.png)
-        
-  &.alert-style
-    // Do we ever want to do this for style?
-    border-image-source: url(/images/level/code_editor_info_background.png)
 
 html.no-borderimage
   .problem-alert
@@ -53,7 +53,3 @@ html.no-borderimage
       
     &.alert-info
       background-image: url(/images/level/code_editor_info_background.png)
-          
-    &.alert-style
-      // Do we ever want to do this for style?
-      background-image: url(/images/level/code_editor_info_background.png)

app/styles/play/level/tome/spell.sass

@@ -62,7 +62,7 @@
     overflow: visible
 
     &.user-code-problem.spell-cast
-      @include editor-height(40px)
+      @include editor-height(60px)
 
     &.disabled
       @include opacity(80)

app/views/play/level/tome/ProblemAlertView.coffee

@@ -32,6 +32,7 @@ module.exports = class ProblemAlertView extends CocoView
   afterRender: ->
     super()
     @$el.addClass('alert').addClass("alert-#{@problem.aetherProblem.level}").hide().fadeIn('slow')
+    @$el.addClass('no-hint') unless @problem.aetherProblem.hint
     Backbone.Mediator.publish 'play-sound', trigger: 'error_appear', volume: 1.0
 
   onRemoveClicked: ->