3 files changed, 35 insertions, 13 deletions
diff --git a/www/css/index.css b/www/css/index.css
index 2768d76..ffd2f9f 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -28,17 +28,22 @@ body {
   background: gray;
   font: 22px/27px Playtime, sans-serif;
 }
+#all {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
 h2 {
   font: 20px/24px Playtime; /* yes, h2 has *smaller* font */
   font-weight: bold;
 }
 
 /* warnings */
-#warn-container {
+#interstitial {
   visibility: hidden;
   cursor: auto;
 }
-html.no-js #warn-container {
+html.no-js #interstitial {
   visibility: visible;
 }
 #warn {
@@ -71,7 +76,7 @@ html.no-js #gotit {
   display: none;
 }
 
-/* wooo, the real content */
+/* pre-content */
 #container, #vid {
   cursor: url("../dump/ui/mousecursor.png"), default;
   position: absolute;
@@ -98,9 +103,26 @@ html.no-js #gotit {
   opacity: 0.5;
   z-index: 10;
 }
+
+/* dialogs */
 #dialogs {
   z-index: 50;
+  width: 504px;
+  height: 395px;
+  background: url(../dump/ui/bg-config.png);
+  margin-left: -252px;
+  margin-top: -197.5px;
 }
+#options {
+  padding: 10px 20px;
+}
+#return {
+  position: absolute;
+  bottom: 15px;
+  right: 20px;
+}
+
+/* content */
 #show {
   height: 100%;
 }
diff --git a/www/index.html b/www/index.html
index 721a803..ed976ba 100644
--- a/www/index.html
+++ b/www/index.html
@@ -27,8 +27,8 @@
     <script src="js/imachine.js"></script>
     <script src="js/i18n.js"></script>
   </head>
-  <body><div id="all" style="height: 100%; position: absolute; width: 100%;">
-    <div id="warn-container">
+  <body><div id="all">
+    <div id="interstitial">
       <div id="warn">
         <h2>We use a lot of new features in this; your browser seems to have some issues...</h2>
         <ul id="warns">
@@ -68,13 +68,13 @@
           <div class="options-button main_menu_config button"></div>
           <div class="quit button main_menu_quit disabled"></div>
         </div>
-        <div id="version" style="">
+        <div id="version">
           Katawa Shoujo v1.1
           <br>
           HTML5KS 0.1.0
         </div>
       </div>
-      <div id="dialogs" style="display: none; width: 504px; height: 395px; background: url(dump/ui/bg-config.png); margin-left: -252px; margin-top: -197.5px;" class="centered">
+      <div id="dialogs" class="centered" style="display: none;">
         <div id="options" style="padding: 10px 20px;">
           <h2>Options</h2>
           <label class="button"><input type="checkbox" class="option" id="hdisable"> <span class="hdisabled_label"></span></label>
@@ -89,7 +89,7 @@
           <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="soundVolume"> <span class="tr config_sfxvol_label"></span> <span id="test-sound" class="button config_sfxtest_label"><img src="dump/ui/bt-musicplay.png" alt="Play"></span></label>
         </div>
         <div id="return" class="button" style="position: absolute; bottom: 15px; right: 20px;">
-          <img src="dump/ui/bt-return.png" alt="">
+          <img src="dump/ui/bt-return.png">
           Return
         </div>
       </div>
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 9ca2bde..c7aba9b 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -179,12 +179,12 @@ window.html5ks = {
   },
   warnUnsupported: function () {
     if (!html5ks.persistent.gotit) {
-      var warn = document.getElementById("warn-container");
+      var interstitial = document.getElementById("interstitial");
       document.getElementById("gotit").addEventListener("mouseup", function () {
-        warn.style.mozAnimation = "0.5s dissolveout";
-        warn.style.webkitAnimation = "0.5s dissolveout";
-        warn.style.animation = "0.5s dissolveout";
-        warn.style.opacity = 0;
+        interstitial.style.mozAnimation = "1s dissolveout";
+        interstitial.style.webkitAnimation = "1s dissolveout";
+        interstitial.style.animation = "1s dissolveout";
+        interstitial.style.opacity = 0;
         html5ks.persistent.gotit = true;
         html5ks.start();
       }, false);