Implemented George's new level loading view design.

app/styles/play/level/loading.sass

@@ -9,7 +9,6 @@
   background-size: contain
 
 #level-loading-view
-  color: blue
   width: 100%
   height: 100%
   position: absolute
@@ -21,60 +20,85 @@
   
   .loading-details
     position: absolute
-    top: 20px
+    top: 86px
     left: 50%
-    $WIDTH: 1000px
+    $WIDTH: 450px
     width: $WIDTH
-    min-height: 60px
+    height: 450px
     margin-left: (-$WIDTH / 2)
     z-index: 100
-    background-color: rgba(220, 255, 230, 0.6)
+    background: transparent url(/images/level/code_editor_background.png) no-repeat
+    background-size: 100% 100%
     color: darkslategray
     font-size: 15px
-    border-radius: 30px
-    padding: 10px
+    padding: 80px 80px 40px 80px
     text-align: center
     // http://matthewlein.com/ceaser/  Bounce down a bit, then snap up.
     @include transition(top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600))
-
-    .load-progress
-      position: absolute
-      left: 2%
-      top: 0px
-      opacity: 0.6
-      width: 96%
-      height: 40px
-      margin: 10px auto 0
-
-      .progress
-        height: 100%
-
-        .progress-bar
-          width: 1%
-          height: 100%
-          transition-duration: 0
-
-        &.active .progress-bar
-          transition-duration: 1.2s
-        
-    #tip-wrapper
-      position: relative
-      z-index: 2
-      top: 10px
+    font-family: 'Open Sans Condensed'
 
     .level-loading-goals
-      margin: 30px auto 10px
-      width: 400px
+      text-align: left
 
-      .panel-heading
-        font-size: 24px
+      .goals-title
+        font-size: 32px
+        color: black
+        font-weight: bold
 
-      .list-group-item
+      li
         font-size: 20px
+        color: black
 
-    .start-level-button
-      font-size: 40px
-      font-variant: small-caps
+    .progress-or-start-container
+      position: absolute
+      bottom: 95px
+      width: 261px
+      height: 80px
+      left: 80px
+
+      .load-progress
+        width: 100%
+        height: 36px
+        margin: 20px auto 0 auto
+
+        .progress
+          height: 100%
+          position: relative
+          background-color: transparent
+
+          .progress-bar
+            width: 1%
+            height: 100%
+            transition-duration: 0
+            border-radius: 9px
+            background: transparent url(/images/level/loading_bar_fill.png) no-repeat
+
+          &.active .progress-bar
+            transition-duration: 1.2s
+
+          .rim
+            position: absolute
+            left: 0
+            top: 0
+            width: 100%
+            height: 100%
+            background: transparent url(/images/level/loading_bar_rim.png) no-repeat
+            background-size: 100% 100%
+
+      .start-level-button
+        display: none
+        width: 100%
+        margin: 0px auto
+        font-size: 40px
+        font-variant: small-caps
+
+    #tip-wrapper
+      position: absolute
+      z-index: 2
+      bottom: 40px
+      left: 25px
+      width: 401px
+      color: #666
 
   .left-wing, .right-wing
     width: 100%

app/templates/play/level/level_loading.jade

@@ -4,9 +4,19 @@
 
 .loading-details.loading-container
 
-  .load-progress
-    .progress
-      .progress-bar.progress-bar-success
+  .level-loading-goals.secret
+    .goals-title(data-i18n="play_level.goals") Goals
+    ul.list-unstyled
+
+  .errors
+
+  .progress-or-start-container
+    button.start-level-button.btn.btn-lg.btn-success.header-fontneedsclick(data-i18n="play_level.loading_start") Start Level
+
+    .load-progress
+      .progress
+        .progress-bar.progress-bar-success
+        .rim
 
   #tip-wrapper
     strong.tip(data-i18n='play_level.tip_toggle_play') Toggle play/paused with Ctrl+P.
@@ -41,11 +51,3 @@
     strong.tip.rare
       span(data-i18n='play_level.tip_harry') Yer a Wizard, 
       span= me.get('name', true)
-
-  .errors
-
-  .panel.panel-default.level-loading-goals.secret
-    .panel-heading.header-font(data-i18n="play_level.goals") Goals
-    ul.list-group
-  
-  button.start-level-button.btn.btn-lg.btn-success.header-font.secret.needsclick(data-i18n="play_level.loading_start") Start Level

app/views/play/level/LevelLoadingView.coffee

@@ -44,7 +44,7 @@ module.exports = class LevelLoadingView extends CocoView
     goalCount = 0
     for goalID, goal of @level.get('goals') when (not goal.team or goal.team is e.team) and not goal.hiddenGoal
       name = utils.i18n goal, 'name'
-      goalList.append $('<li class="list-group-item">' + name + '</li>')
+      goalList.append $('<li>' + name + '</li>')
       ++goalCount
     if goalCount
       goalContainer.removeClass('secret')
@@ -68,8 +68,8 @@ module.exports = class LevelLoadingView extends CocoView
       @unveil()
     else
       Backbone.Mediator.publish 'audio-player:play-sound', trigger: 'level_loaded', volume: 0.75  # old: loading_ready
-      @$el.find('.progress').addClass 'active progress-striped'
-      @$el.find('.start-level-button').removeClass 'secret'
+      @$el.find('.progress').hide()
+      @$el.find('.start-level-button').show()
 
   startUnveiling: (e) ->
     @playSound 'menu-button-click'