diff --git a/compare.css b/compare.css
index c28d073..5c5d5e7 100644
--- a/compare.css
+++ b/compare.css
@@ -1,9 +1,38 @@
+body {
+    background: #fff;
+    font-family: sans-serif;
+    color: #000;
+    width: 1108px;
+    margin: 0 auto;
+}
+
+.container {
+    display: inline-block;
+    vertical-align: top;
+}
+
 textarea {
-    width: 450px;
+    width: 482px;
+    padding: 6px;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     height: 200px;
-}
-
-object {
     display: block;
+    margin: 16px auto;
+    border: 1px solid #aaa;
+    box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3);
 }
 
+#flash-scratch {
+    text-align: center;
+    visibility: hidden;
+    display: block;
+    margin: 48px 0 62px;
+}
+
+#flash-scratch p {
+    color: #aaa;
+    font-size: 22px;
+    margin-top: 14px;
+    line-height: 28px;
+}
diff --git a/compare.html b/compare.html
index 54961e8..5bf9a2d 100644
--- a/compare.html
+++ b/compare.html
@@ -1,134 +1,134 @@
-<?
-header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
-header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
-?>
 <!DOCTYPE html>
-<html>
-    <head>
-        <title>Scratch HTML5 vs. Flash</title>
-        <meta charset="utf-8">
-        <link href="player.css" type="text/css" rel="stylesheet" />
-        <link href="compare.css" type="text/css" rel="stylesheet" />
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
-        <script src="js/util/Timer.js"></script>
-        <script src="js/util/OffsetBuffer.js"></script>
-        <script src="js/util/Color.js"></script>
-        <script src="js/util/Rectangle.js"></script>
-        <script src="js/Sprite.js"></script>
-        <script src="js/Reporter.js"></script>
-        <script src="js/Stage.js"></script>
-        <script src="js/sound/WAVFile.js"></script>
-        <script src="js/sound/SoundDecoder.js"></script>
-        <script src="js/sound/SoundBank.js"></script>
-        <script src="js/sound/NotePlayer.js"></script>
-        <script src="soundbank/Instr.js"></script>
-        <script src="js/IO.js"></script>
-        <script src="js/primitives/VarListPrims.js"></script>
-        <script src="js/primitives/MotionAndPenPrims.js"></script>
-        <script src="js/primitives/LooksPrims.js"></script>
-        <script src="js/primitives/SensingPrims.js"></script>
-        <script src="js/primitives/SoundPrims.js"></script>
-        <script src="js/primitives/Primitives.js"></script>
-        <script src="js/Interpreter.js"></script>
-        <script src="js/Runtime.js"></script>
-        <script src="js/Scratch.js"></script>
-        <script type="text/javascript">
-            if (window.location.hash) {
-                var project_id = parseInt(window.location.hash.substr(1));
-            } else {
-                var project_id = 10000160; // Default project for display
-            }
-        </script>
-        <script>
-            var flashLog = null;
-            $(function() {
-                // The flashvars tell flash about the project data (and autostart=true)
-                var flashvars = {
-                    server: encodeURIComponent('scratch.mit.edu'),
-                    debugOps: true,
-                    debugOpCmd: 'debugFlash',
-                    project_id: project_id
-                };
+<meta charset=utf-8>
+<title>Scratch HTML5 vs. Flash</title>
 
-                var params = {
-                    allowscriptaccess: 'always',
-                    allowfullscreen: 'false',
-                    wmode: 'direct',
-                    menu: 'false'
-                };
+<link rel=stylesheet href=player.css>
+<link rel=stylesheet href=compare.css>
 
-                var flashPlayer = null;
-                    //var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf";
-                var swf_url = "http://jiggler.media.mit.edu/shanemc/scratchr2/static/Scratch.swf";
-                swfobject.embedSWF(swf_url, "flashScratch", "482", "402", "10.2.0",
-                    "http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf",
-                    flashvars, params, null, function(e) {
-                        $('#flashScratch').css('visibility', 'visible');
-                        if (e.success) flashPlayer = e.ref;
-                    });
+<script src=//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
+<script src=//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js></script>
 
-                $('#trigger_green_flag, #greenSlide').click(function() {
-                    flashPlayer.ASstartRunning();
-                });
+<script src=js/util/Timer.js></script>
+<script src=js/util/OffsetBuffer.js></script>
+<script src=js/util/Color.js></script>
+<script src=js/util/Rectangle.js></script>
+<script src=js/Sprite.js></script>
+<script src=js/Reporter.js></script>
+<script src=js/Stage.js></script>
+<script src=js/sound/WAVFile.js></script>
+<script src=js/sound/SoundDecoder.js></script>
+<script src=js/sound/SoundBank.js></script>
+<script src=js/sound/NotePlayer.js></script>
+<script src=soundbank/Instr.js></script>
+<script src=js/IO.js></script>
+<script src=js/primitives/VarListPrims.js></script>
+<script src=js/primitives/MotionAndPenPrims.js></script>
+<script src=js/primitives/LooksPrims.js></script>
+<script src=js/primitives/SensingPrims.js></script>
+<script src=js/primitives/SoundPrims.js></script>
+<script src=js/primitives/Primitives.js></script>
+<script src=js/Interpreter.js></script>
+<script src=js/Runtime.js></script>
+<script src=js/Scratch.js></script>
 
-                // Stop button behavior
-                $('#trigger_stop').click(function() {
-                    flashPlayer.ASstopRunning();
-                });
+<script>
+    var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
+</script>
 
-                flashLog = $('#flashDebug');
-                var jsLog = $('#jsDebug');
-                interp.debugOps = true;
-                interp.debugFunc = function(opCount, opName, args) {
-                    var text = opCount + ': '+opName+'('+args.join(', ')+')';
-                    jsLog.val(jsLog.val() + text + "\n");
-                }
+<script>
+    var flashLog = null;
+    $(function() {
+        // The flashvars tell flash about the project data (and autostart=true)
+        var flashvars = {
+            server: encodeURIComponent('scratch.mit.edu'),
+            debugOps: true,
+            debugOpCmd: 'debugFlash',
+            project_id: project_id
+        };
 
-                // Setup synchronized scrolling
-                flashLog.scroll(function() {
-                    jsLog.scrollTop(flashLog.scrollTop());
-                });
+        var params = {
+            allowscriptaccess: 'always',
+            allowfullscreen: 'false',
+            wmode: 'direct',
+            menu: 'false'
+        };
 
-                jsLog.scroll(function() {
-                    flashLog.scrollTop(jsLog.scrollTop());
-                });
+        var flashPlayer = null;
+        //var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf";
+        var swf_url = "http://jiggler.media.mit.edu/shanemc/scratchr2/static/Scratch.swf";
+        swfobject.embedSWF(swf_url, "flash-scratch", "482", "402", "10.2.0",
+            "http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf",
+            flashvars, params, null, function(e) {
+                $('#flash-scratch').css('visibility', 'visible');
+                if (e.success) flashPlayer = e.ref;
             });
 
-            function debugFlash(opCount, opName, args) {
-                var text = opCount + ': '+opName+'('+args.join(', ')+')';
-                flashLog.val(flashLog.val() + text + "\n");
-            }
-        </script>
-    </head>
-    <body>
-    <div class="playerContainer">
-        <div id="up">&#x25B2;</div>
-        <div id="ui-top">
-            <div id="info">Loading&hellip;</div>
-            <button id="trigger_stop">&#9632;</button>
-            <button id="trigger_green_flag">&#9873;</button>
-            <div class="clearer"></div>
+        $('#trigger-green-flag, #overlay').click(function() {
+            flashPlayer.ASstartRunning();
+        });
+
+        // Stop button behavior
+        $('#trigger-stop').click(function() {
+            flashPlayer.ASstopRunning();
+        });
+
+        flashLog = $('#flash-debug');
+        var jsLog = $('#js-debug');
+        interp.debugOps = true;
+        interp.debugFunc = function(opCount, opName, args) {
+            var text = opCount + ': ' + opName + '(' + args.join(', ') + ')';
+            jsLog.val(jsLog.val() + text + "\n");
+        };
+
+        // Setup synchronized scrolling
+        flashLog.scroll(function() {
+            jsLog.scrollTop(flashLog.scrollTop());
+        });
+
+        jsLog.scroll(function() {
+            flashLog.scrollTop(jsLog.scrollTop());
+        });
+    });
+
+    function debugFlash(opCount, opName, args) {
+        var text = opCount + ': '+opName+'('+args.join(', ')+')';
+        flashLog.val(flashLog.val() + text + "\n");
+    }
+</script>
+
+<div class=container>
+    <div id=player-container>
+        <div class="arrow vertical" id=up></div>
+        <div class="arrow vertical" id=down></div>
+        <div class="arrow horizontal" id=left></div>
+        <div class="arrow horizontal" id=right></div>
+        <div id=player-header>
+            <div id=player-header-preload></div>
+            <div id=player-header-version>HTML5</div>
+            <button id=toggle-fullscreen tabindex=1></button>
+            <button id=trigger-stop tabindex=3></button>
+            <button id=trigger-green-flag tabindex=2></button>
         </div>
-        <div id="left">&#x25c0;</div>
-        <div id="overContainer">
-          <div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div>
-          <div id="container"></div>
+        <div id=player-content>
+            <div id=container></div>
+            <div id=overlay></div>
+            <div id=preloader>
+                <div id=preloader-progress><div id=preloader-progress-bar></div></div>
+                <div id=preloader-caption>Loading project&hellip;</div>
+                <div id=preloader-details></div>
+            </div>
         </div>
-        <div id="right">&#x25b6;</div>
-        <div id="ui-bottom">
-            <span id="address-hint">http://scratch.mit.edu/projects/</span><input type="text" name="project_id" id="project_id" placeholder="10000160" /><button id='go_project'>&rarr;</button></div>
-        <div id="down">&#x25BC;</div>
-        <textarea id="jsDebug"></textarea>
     </div>
-    <div class="playerContainer">
-        <div id="flashScratch" style="text-align:center;visibility:hidden;">
-            <p style="color:#aaa;font-size:22px;margin-top:14px;line-height:28px;">Oh Noes! Scratch project cannot display.<br/>Flash player is disabled, missing, or less than version 10.2.</p>
-            <a href="http://www.adobe.com/go/getflashplayer">
-                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" target="_blank" />
-            </a>
-        </div>
-        <textarea id="flashDebug"></textarea>
+    <textarea id=js-debug readonly></textarea>
+    <div id=project-picker>
+        <span id=address-hint>http://scratch.mit.edu/projects/</span><input id=project-id placeholder=10000160><button id=go-project>&rarr;</button>
     </div>
-    </body>
-</html>
+</div><div class=container>
+    <div id=flash-scratch>
+        <p>Oh Noes! Scratch project cannot display.<br>Flash player is disabled, missing, or less than version 10.2.</p>
+        <a href=http://www.adobe.com/go/getflashplayer>
+            <img src=http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif alt="Get Adobe Flash player" target=_blank>
+        </a>
+    </div>
+    <textarea id=flash-debug readonly></textarea>
+</div>
diff --git a/img/fullScreenOff.png b/img/fullScreenOff.png
new file mode 100644
index 0000000..28e4b20
Binary files /dev/null and b/img/fullScreenOff.png differ
diff --git a/img/fullScreenOn.png b/img/fullScreenOn.png
new file mode 100644
index 0000000..36b580f
Binary files /dev/null and b/img/fullScreenOn.png differ
diff --git a/img/greenFlagOff.png b/img/greenFlagOff.png
new file mode 100644
index 0000000..e8a3891
Binary files /dev/null and b/img/greenFlagOff.png differ
diff --git a/img/greenFlagOn.png b/img/greenFlagOn.png
new file mode 100644
index 0000000..b62d085
Binary files /dev/null and b/img/greenFlagOn.png differ
diff --git a/img/greenflag.png b/img/playerStartFlag.png
similarity index 100%
rename from img/greenflag.png
rename to img/playerStartFlag.png
diff --git a/img/stopOff.png b/img/stopOff.png
new file mode 100644
index 0000000..16237b3
Binary files /dev/null and b/img/stopOff.png differ
diff --git a/img/stopOn.png b/img/stopOn.png
new file mode 100644
index 0000000..8ff3051
Binary files /dev/null and b/img/stopOn.png differ
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..220985e
--- /dev/null
+++ b/index.css
@@ -0,0 +1,8 @@
+body {
+    width: 578px;
+    padding: 16px;
+    margin: 0 auto;
+    background: #fff;
+    font-family: sans-serif;
+    color: #000;
+}
diff --git a/index.html b/index.html
index 3fa4be0..8f25615 100755
--- a/index.html
+++ b/index.html
@@ -1,77 +1,70 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>Scratch HTML5</title>
-    <meta charset="utf-8">
-    <!-- iPad properties: set width, disable pinch zoom -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="viewport" content="user-scalable=no, width=540" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <link href="player.css" type="text/css" rel="stylesheet" />
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-    <script src="js/util/Timer.js"></script>
-    <script src="js/util/OffsetBuffer.js"></script>
-    <script src="js/util/Color.js"></script>
-    <script src="js/util/Rectangle.js"></script>
-    <script src="js/Sprite.js"></script>
-    <script src="js/Reporter.js"></script>
-    <script src="js/Stage.js"></script>
-    <script src="js/sound/WAVFile.js"></script>
-    <script src="js/sound/SoundDecoder.js"></script>
-    <script src="js/sound/SoundBank.js"></script>
-    <script src="js/sound/NotePlayer.js"></script>
-    <script src="soundbank/Instr.js"></script>
-    <script src="js/IO.js"></script>
-    <script src="js/primitives/VarListPrims.js"></script>
-    <script src="js/primitives/MotionAndPenPrims.js"></script>
-    <script src="js/primitives/LooksPrims.js"></script>
-    <script src="js/primitives/SensingPrims.js"></script>
-    <script src="js/primitives/SoundPrims.js"></script>
-    <script src="js/primitives/Primitives.js"></script>
-    <script src="js/Interpreter.js"></script>
-    <script src="js/Runtime.js"></script>
-    <script src="js/Scratch.js"></script>
-    <script type="text/javascript">
-        if (window.location.hash) {
-            var project_id = parseInt(window.location.hash.substr(1));
-        } else {
-            var project_id = 10000160; // Default project for display
-        }
-    </script>
-    <script type="text/javascript">
-        $(function() {
-            $("#project_id").keyup(function(){
-                // Eventually, this will xhr to /projects/{{this.value}}/ and
-                // change color based on whether the response is 404 or 200.
-                if (isNaN(this.value)) {
-                    this.style.backgroundColor = "#FDD";
-                } else {
-                    this.style.backgroundColor = "#DFD";
-                }
-            })
-        });
-    </script>
-  </head>
-  <body>
-    <div id="wrapper">
-        <h1>Scratch HTML5 player</h1>
-        <div id="up">&#x25B2;</div>
-        <div id="ui-top">
-            <div id="info">Loading&hellip;</div>
-            <button id="trigger_stop">&#9632;</button>
-            <button id="trigger_green_flag">&#9873;</button>
-            <div class="clearer"></div>
-        </div>
-        <div id="left">&#x25c0;</div>
-        <div id="overContainer">
-          <div id="greenSlide"><div id="greenSlideFg"><img src="img/greenflag.png"></div></div>
-          <div id="container"></div>
-        </div>
-        <div id="right">&#x25b6;</div>
-        <div id="ui-bottom">
-            <span id="address-hint">http://scratch.mit.edu/projects/</span><input type="text" name="project_id" id="project_id" placeholder="10000160" /><button id='go_project'>&rarr;</button></div>
-        <div id="down">&#x25BC;</div>
-        <p>The Scratch HTML5 player is still in development. Feedback is welcome! Please report any bugs (or differences from the Flash player) <a href="https://github.com/LLK/scratch-html5">on Github</a>.
+<meta charset=utf-8>
+<title>Scratch HTML5</title>
+
+<!-- iPad properties: set width, disable pinch zoom -->
+<meta name=apple-mobile-web-app-capable content=yes>
+<meta name=viewport content="user-scalable=no, width=540">
+<meta name=apple-mobile-web-app-status-bar-style content=black>
+
+<link rel=stylesheet href=player.css>
+<link rel=stylesheet href=index.css>
+
+<script src=//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
+
+<script src=js/util/Timer.js></script>
+<script src=js/util/OffsetBuffer.js></script>
+<script src=js/util/Color.js></script>
+<script src=js/util/Rectangle.js></script>
+<script src=js/Sprite.js></script>
+<script src=js/Reporter.js></script>
+<script src=js/Stage.js></script>
+<script src=js/sound/WAVFile.js></script>
+<script src=js/sound/SoundDecoder.js></script>
+<script src=js/sound/SoundBank.js></script>
+<script src=js/sound/NotePlayer.js></script>
+<script src=soundbank/Instr.js></script>
+<script src=js/IO.js></script>
+<script src=js/primitives/VarListPrims.js></script>
+<script src=js/primitives/MotionAndPenPrims.js></script>
+<script src=js/primitives/LooksPrims.js></script>
+<script src=js/primitives/SensingPrims.js></script>
+<script src=js/primitives/SoundPrims.js></script>
+<script src=js/primitives/Primitives.js></script>
+<script src=js/Interpreter.js></script>
+<script src=js/Runtime.js></script>
+<script src=js/Scratch.js></script>
+
+<script>
+    var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
+</script>
+
+<div id=player-container>
+    <div class="arrow vertical" id=up></div>
+    <div class="arrow vertical" id=down></div>
+    <div class="arrow horizontal" id=left></div>
+    <div class="arrow horizontal" id=right></div>
+    <div id=player-header>
+        <div id=player-header-preload></div>
+        <div id=player-header-version>HTML5</div>
+        <button id=toggle-fullscreen tabindex=1></button>
+        <button id=trigger-stop tabindex=3></button>
+        <button id=trigger-green-flag tabindex=2></button>
     </div>
-  </body>
-</html>
\ No newline at end of file
+    <div id=player-content>
+        <div id=container></div>
+        <div id=overlay></div>
+        <div id=preloader>
+            <div id=preloader-progress><div id=preloader-progress-bar></div></div>
+            <div id=preloader-caption>Loading project&hellip;</div>
+            <div id=preloader-details></div>
+        </div>
+    </div>
+</div>
+
+<div id=project-picker>
+    <span id=address-hint>http://scratch.mit.edu/projects/</span><input id=project-id placeholder=10000160><button id=go-project>&rarr;</button>
+</div>
+
+<h1>Scratch HTML5 player</h1>
+<p>The Scratch HTML5 player is still in development. Feedback is welcome! Please report any bugs (or differences from the Flash player) <a href=https://github.com/LLK/scratch-html5>on Github</a>.</p>
diff --git a/js/Runtime.js b/js/Runtime.js
index 8a64f22..4bf603f 100644
--- a/js/Runtime.js
+++ b/js/Runtime.js
@@ -70,7 +70,7 @@ Runtime.prototype.loadStart = function() {
         setTimeout(function(runtime) { runtime.loadStart(); }, 50, this);
         return;
     }
-    $('#info').html("Loaded!");
+    $('#preloader').css('display', 'none');
     setInterval(this.step, 33);
     this.projectLoaded = true;
 };
diff --git a/js/Scratch.js b/js/Scratch.js
index d08ca06..fbabf3d 100644
--- a/js/Scratch.js
+++ b/js/Scratch.js
@@ -37,22 +37,43 @@ $(function() {
     });
 
     // Update the project ID field
-    $('#project_id').val(project_id);
+    $('#project-id').val(project_id);
+
+    // Validate project ID field
+    $('#project-id').keyup(function() {
+        var n = this.value;
+
+        // Allow URL pasting
+        var e = /projects\/(\d+)/.exec(n);
+        if (e) {
+            n = this.value = e[1];
+        }
+
+        // Eventually, this will xhr to /projects/{{this.value}}/ and
+        // change color based on whether the response is 404 or 200.
+        $('#project-id, #address-hint').toggleClass('error', isNaN(n));
+    });
+
+    // Focus the actual input when the user clicks on the URL hint
+    $('#address-hint').click(function() {
+        $('#project-id').select();
+    });
 
     // Go project button behavior
-    $('#go_project').click(function() {
-        window.location = "#" + parseInt($('#project_id').val());
+    $('#go-project').click(function() {
+        window.location = '#' + parseInt($('#project-id').val());
         window.location.reload(true);
     });
 
     // Green flag behavior
-    $('#trigger_green_flag, #greenSlide').click(function() {
-        $('#greenSlide').css('display', 'none');
+    $('#trigger-green-flag, #overlay').click(function() {
+        if (!runtime.projectLoaded) return;
+        $('#overlay').css('display', 'none');
         runtime.greenFlag()
     });
 
     // Stop button behavior
-    $('#trigger_stop').click(function() {
+    $('#trigger-stop').click(function() {
         runtime.stopAll();
     });
 
diff --git a/player.css b/player.css
index d8797e6..a8be2e9 100644
--- a/player.css
+++ b/player.css
@@ -1,28 +1,13 @@
-body {
-    background: #fff;
-    color: #333;
-    margin: 0;
-    padding: 0px;
-    font-family: sans-serif;
-}
 /* Wrapper wraps the entire player, and the text below and above. Ideally,
    all CSS selectors would be descendants of #wrapper so that the player
    is embeddable.
 */
- #wrapper {
-    width: 540px;
-    height: 420px;
-    margin: auto;
-}
-/* Container is the Stage */
- #container {
-    border: none;
-    cursor: default;
-    width: 480px;
-    height: 360px;
-    overflow: hidden;
+#player-container {
     position: relative;
-    float: left;
+    width: 482px;
+    padding: 48px;
+    margin: 0 auto;
+    font-family: sans-serif;
     /* Before, we accomplished this with e.preventDefault
      * on the context div.  But, we'd like to use those click events
      * for some things like reporter sliders.
@@ -34,102 +19,251 @@ body {
     -ms-user-select: none;
     user-select: none;
 }
-/* The pane over a project with the green flag on startup. */
- #greenSlide {
-    position: absolute;
-    float: left;
-    z-index: 500;
-    /* Hmm, will this break after the 501st sprite? */
-    margin-left: 30px;
-}
-#greenSlideFg {
-    background-color: rgba(0,0,0,0.4);
-    padding: 140px 202px;
-}
-/* iPad arrow key frame */
 
-/*  This is the frame around the stage with various buttons. */
- #ui-top {
-    width: 540px;
-    height: 30px;
-    clear: both;
-    background-color: #eee;
+/*  Control bar above the stage */
+#player-header {
+    width: 480px;
+    height: 38px;
+    position: relative;
+    background: linear-gradient(#fff, #e6e6e6);
+    border: 1px solid #d1d1d1;
+    border-bottom: 0;
+    border-radius: 7px 7px 0 0;
 }
-#up {
-    padding-top: 10px;
-    width: 540px;
-    height: 30px;
-    clear: both;
-    background-color: #eee;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
+
+/* Button styling */
+#player-header button {
+    border: 0;
+    background: center center no-repeat;
+    width: 33px;
+    height: 38px;
+    float: right;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+#player-header-preload {
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    background: url(img/fullScreenOn.png), url(img/greenFlagOn.png), url(img/stopOn.png);
+}
+button#toggle-fullscreen {
+    background-image: url(img/fullScreenOff.png);
+    background-position: 10px 8px;
+    width: 40px;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+button#trigger-green-flag {
+    background-image: url(img/greenFlagOff.png);
+}
+button#trigger-green-flag:hover {
+    background-image: url(img/greenFlagOn.png);
+}
+button#trigger-stop {
+    background-image: url(img/stopOff.png);
+}
+button#trigger-stop:hover {
+    background-image: url(img/stopOn.png);
+}
+
+/* Version number */
+#player-header-version {
+    position: absolute;
+    top: 28px;
+    left: 0;
+    width: 45px;
     text-align: center;
-    color: #ccc;
+    color: rgba(0, 0, 0, .4);
+    font: 9px sans-serif;
 }
-#left {
-    float: left;
-    width: 30px;
+
+/* Wrapper for the Stage */
+#player-content {
+    position: relative;
+    border: 1px solid #d1d1d1;
+    border-top: 0;
+    width: 480px;
     height: 360px;
-    background-color: #eee;
-    line-height: 360px;
-    color: #ccc;
+}
+
+/* The Stage */
+#container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 480px;
+    height: 360px;
+    cursor: default;
+    overflow: hidden;
+}
+
+/* Pane over the Stage with the green flag on startup */
+#overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 480px;
+    height: 360px;
+    z-index: 10000;
+    background: url(img/playerStartFlag.png) rgba(0, 0, 0, .26) center center no-repeat;
+}
+
+/* Preloader */
+#preloader {
+    position: absolute;
+    z-index: 10001;
+    top: 50%;
+    left: 50%;
+    margin-left: -156px;
+    margin-top: -61px;
+    width: 309px;
+    height: 119px;
+    border: 1px solid rgb(208, 209, 210);
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 4px 4px 6px rgba(0, 0, 0, .5);
+    cursor: default;
+}
+#preloader-progress {
+    margin: 24px 30px 14px 29px;
+    background: rgb(185, 187, 189);
+    border-radius: 5px;
+    height: 22px;
+}
+#preloader-progress-bar {
+    height: 22px;
+    background: rgb(0, 161, 216);
+    border-radius: 5px;
+    width: 0;
+}
+#preloader-caption,
+#preloader-details {
+    margin: 14px 0 0 8px;
     text-align: center;
+    font-size: 18px;
+    color: rgba(0, 0, 0, .65);
+}
+#preloader-details {
+    margin: 6px 0 0 4px;
+    font-size: 12px;
+}
+
+/* iPad arrow key frame */
+.arrow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 578px;
+    height: 400px;
+    text-align: center;
+    font: 24px/48px sans-serif;
+    color: rgba(0, 0, 0, .2);
+    cursor: default;
+}
+.arrow.vertical {
+    height: 48px;
+}
+.arrow.horizontal {
+    width: 48px;
+    top: 48px;
+    line-height: 400px;
 }
 #right {
-    float: left;
-    width: 30px;
-    height: 360px;
-    background-color: #eee;
-    line-height: 360px;
-    color: #ccc;
-    text-align: center;
+    left: 530px;
 }
 #down {
-    padding-top: 10px;
-    width: 540px;
-    height: 30px;
-    background-color: #eee;
+    top: 448px;
+}
+#up::before {
+    content: '\25b2';
+}
+#down::before {
+    content: '\25bc';
+}
+#left::before {
+    content: '\25c0';
+}
+#right::before {
+    content: '\25b6';
+}
+
+/* Panel for project ID input */
+#project-picker {
+    margin: 16px 0;
     text-align: center;
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
-    color: #ccc;
+    font-size: 16px;
+    line-height: 18px;
 }
-#ui-bottom {
-    width: 480px;
-    height: 30px;
-    background-color: #eee;
-    padding-left: 30px;
-    padding-right: 30px;
-    clear: both;
-    text-align: right;
+#project-id,
+#address-hint {
+    border: 1px solid #aaa;
+    padding: 6px;
 }
-.playerContainer {
-    display: inline-block;
-    text-align: center;
+#project-id {
+    box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, .3);
+    background: 0;
+    padding-left: 0;
+    border-left: 0;
+    margin: 0;
+    font: inherit;
+    width: 6em;
 }
+#project-id.error {
+    background: #fee;
+    box-shadow: inset 0 3px 3px -3px rgba(100, 0, 0, .3);
+}
+#address-hint {
+    box-shadow: inset 3px 3px 3px -3px rgba(0, 0, 0, .3);
+    padding-right: 0;
+    border-right: 0;
+}
+#address-hint.error {
+    background: #fee;
+    box-shadow: inset 3px 3px 3px -3px rgba(100, 0, 0, .3);
+}
+#go-project {
+    padding: 6px;
+    margin: 0;
+    border: 1px solid #aaa;
+    border-left: 0;
+    font: inherit;
+    background: linear-gradient(#fff, #ddd);
+    box-shadow: inset 0 -1px rgba(255, 255, 255, .2);
+    cursor: pointer;
+}
+#go-project:active {
+    background: linear-gradient(#ddd, #eee);
+    box-shadow: inset 0 1px rgba(255, 255, 255, .3), inset 0 2px 5px rgba(0, 0, 0, .1);
+}
+
+
 /* Reporter styles */
- .reporter-normal {
+.reporter-normal {
     display: inline-block;
-    padding: 2px 5px 2px 5px;
+    padding: 2px 7px 3px 5px;
     background-color: rgb(193, 196, 199);
-    border: 1px solid rgb(130, 126, 126);
-    border-radius: 4px;
-    font-family: sans-serif;
-    font-size: 11px;
-    font-weight: bold;
+    border: 1px solid rgb(148, 145, 145);
+    border-radius: 6px;
+    font: bold 11px/15px sans-serif;
     color: #000;
     position: absolute;
 }
 .reporter-inset {
     display: inline-block;
-    min-width: 40px;
-    margin-left: 5px;
+    vertical-align: top;
+    min-width: 38px;
+    margin-left: 6px;
     padding: 1px;
     border: 1px solid #fff;
-    border-radius: 4px;
-    -webkit-box-shadow: inset 0 0 3px #fff;
-    box-shadow: inset 0 0 3px #fff;
+    border-radius: 6px;
+    -webkit-box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.7), inset 1px 1px 2px rgba(0, 0, 0, 0.35);
+    box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.7), inset 1px 1px 2px rgba(0, 0, 0, 0.35);
     text-align: center;
+    font: bold 9px/11px sans-serif;
     color: #fff;
 }
 .reporter-large {
@@ -139,9 +273,7 @@ body {
     border-radius: 4px;
     -webkit-box-shadow: 0 -3px 3px -3px #fff inset, -3px 0 3px -3px #fff inset, 0 3px 3px -3px #000 inset, 3px 0 3px -3px #000 inset;
     box-shadow: 0 -3px 3px -3px #fff inset, -3px 0 3px -3px #fff inset, 0 3px 3px -3px #000 inset, 3px 0 3px -3px #000 inset;
-    font-family: sans-serif;
-    font-size: 15px;
-    font-weight: bold;
+    font-family: bold 15px sans-serif;
     text-align: center;
     color: #fff;
     position: absolute;
@@ -271,83 +403,3 @@ body {
     height: 19px;
     background: url(img/think-bottom.png) transparent no-repeat;
 }
-
-#info {
-    float: left;
-    margin-left: 30px;
-    height: 24px;
-    padding: 3px;
-    color: #aaa;
-    font-size: 12px;
-}
-/* Button styling */
- button {
-    background-color: #ddd;
-    border-radius: 3px;
-    cursor: pointer;
-    border-style: none;
-    font-family: sans-serif;
-    width: 24px;
-    padding: 3px;
-    margin: 3px;
-    margin-top: 0px;
-    height: 24px;
-    background: -webkit-gradient(linear, top left, bottom left, from(#ddd), to(#ccc));
-    background: -webkit-linear-gradient(#ddd, #ccc);
-    background: linear-gradient(#ddd, #ccc);
-}
-button:hover {
-    background-color: #ccc;
-    background: -webkit-gradient(linear, top left, bottom left, from(#ccc), to(#bbb));
-    background: -webkit-linear-gradient(#ccc, #bbb);
-    background: linear-gradient(#ccc, #bbb);
-}
-#trigger_green_flag, #trigger_stop {
-    padding-top: 0px;
-    font-size: 20px;
-    width: 24px;
-    margin: 3px;
-    float: right;
-}
-#trigger_green_flag {
-    color: #050;
-}
-#trigger_stop {
-    color: #F33;
-    margin-right: 30px;
-    margin-left: 0px;
-}
-#clearer {
-    clear: both;
-}
-input[type=text] {
-    display: inline-block;
-    border-style: none;
-    border-radius: 4px;
-    font-family: sans-serif;
-    background-color: #ddd;
-    font-size: 14px;
-    padding: 3px;
-    height: 18px;
-    margin: 3px;
-    width: 100px;
-}
-input[type=text]:focus {
-    outline: none;
-    background-color: #ccc;
-}
-#project_id {
-    text-align: center;
-}
-#address-hint {
-    font-size: 12px;
-}
-#go_project {
-    display: table-cell;
-    height: 24px;
-    padding: 0px;
-    margin-right: 0px;
-    margin-left: 0px;
-    margin-top: 3px;
-    margin-bottom: 0px;
-}
\ No newline at end of file