1 files changed, 101 insertions, 82 deletions

diff --git a/www/css/index.css b/www/css/index.css
index 2fedd0e..2883101 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -1,3 +1,4 @@
+/* font-face */
 @font-face {
   font-family: "Playtime";
   /* src: url("playtime.ttf"); */
@@ -12,62 +13,55 @@
   src: url("font/GentiumPlus.ttf");
   src: url("font/GentiumPlus.woff");
 }
-body {
-  margin: 0;
-  padding: 0;
-  background: gray;
-  font: 22px/27px Playtime, sans-serif;
-}
+
+/* general styling */
 * {
   -moz-user-select: -moz-none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-#container, #bg, #vid {
-  cursor: url("../dump/ui/mousecursor.png"), default;
-  position: absolute;
+body {
+  margin: 0;
+  padding: 0;
+  background: gray;
+  font: 22px/27px Playtime, sans-serif;
 }
-#container, #bg.scale, #vid.scale {
-  top: 50%;
-  left: 50%;
+h2 {
+  font: 20px/28px Playtime; /* yes, h2 has *smaller* font */
+  font-weight: bold;
 }
-#container {
-  width: 800px;
-  height: 600px;
-  margin-top: -300px;
-  margin-left: -400px;
+
+/* input */
+label {
+  display: block;
 }
-#who {
-  color: black;
-  position: absolute;
-  top: 452px;
-  left: 12px;
-  font-weight: bold;
+.button, h2, label {
+  opacity: 0.4;
 }
-.say {
-  color: white;
+.button-disabled {
+  opacity: 0.1;
 }
-#say {
-  width: 750px;
-  height: 90px;
-  position: absolute;
-  top: 493px;
-  left: 28px;
+.button:not(.button-disabled):hover {
+  opacity: 1;
 }
-#window-image {
-  position: absolute;
-  top: 440px;
-  left: 0;
+input[type="checkbox"] {
+  display: none;
 }
-#gray {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgb(64, 64, 64);
-  background-color: rgba(64, 64, 64, 0.8);
-  z-index: 9;
+input[type="checkbox"] + span:before {
+  display: inline-block;
+  height: 19px;
+  width: 20px;
+  content: "";
+  background-position: left -2px top -3px;
+  background-repeat: no-repeat;
+  background-image: url("../dump/ui/bt-cf-unchecked.png");
+}
+input[type="checkbox"]:checked + span:before {
+  background-image: url("../dump/ui/bt-cf-checked.png");
 }
+
+/* warnings */
 #warn-container {
   visibility: hidden;
   cursor: auto;
@@ -89,61 +83,78 @@ html.no-js #warn-container {
   width: 600px;
   z-index: 10;
 }
-h2 {
-  font: 20px/28px Playtime;
-  font-weight: bold;
-}
-html.no-js          #warn li:not(#js) { display: none; }
+html.no-js          #warn li { display: none; }
+html.js             #warn noscript { display: none; }
                     #warn li#ie { display: none; }
 html.video          #warn li#video { display: none; }
 html.audio          #warn li#audio { display: none; }
 html.fontface       #warn li#fontface { display: none; }
 html.csstransforms  #warn li#csstransforms { display: none; }
 html.csstransitions #warn li#csstransitions { display: none; }
-label {
-  display: block;
-}
-.button, h2, label {
-  opacity: 0.4;
-}
-.button-disabled {
-  opacity: 0.1;
-}
-.button-enabled:hover {
-  opacity: 1;
-}
 #gotit {
   text-align: center;
 }
 html.no-js #gotit {
   display: none;
 }
-#main-menu-buttons .button {
-  margin: 4px;
+
+/* wooo, the real content */
+#container, #vid {
+  cursor: url("../dump/ui/mousecursor.png"), default;
+  position: absolute;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
-input[type="checkbox"] {
-  display: none;
+#container, #vid.scale {
+  top: 50%;
+  left: 50%;
 }
-input[type="checkbox"] + span:before {
-  display: inline-block;
-  height: 19px;
-  width: 20px;
-  content: "";
-  background: url("../dump/ui/bt-cf-unchecked.png") no-repeat left bottom;
+#container {
+  width: 800px;
+  height: 600px;
+  margin-top: -300px;
+  margin-left: -400px;
+  overflow: hidden;
 }
-input[type="checkbox"]:checked + span:before {
-  background: url("../dump/ui/bt-cf-checked.png") no-repeat left bottom;
+#show img {
+  position: absolute;
 }
-#ctc, #nvlctc {
+#window {
+  background: url("../dump/ui/bg-say.png");
+  width: 800px;
+  height: 160px;
   position: absolute;
-  bottom: 20px;
-  right: 10px;
-  -webkit-animation: blink 2s infinite;
-  -moz-animation: blink 2s infinite;
-  animation: blink 2s infinite;
+  top: 440px;
+  left: 0;
 }
-#nvlctc {
-  bottom: 25px;
+#who {
+  color: black;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  font-weight: bold;
+}
+.say {
+  color: white;
+}
+#say {
+  width: 750px;
+  height: 90px;
+  position: absolute;
+  top: 53px;
+  left: 28px;
+}
+#gray {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(64, 64, 64);
+  background-color: rgba(64, 64, 64, 0.8);
+  z-index: 9;
+}
+#main-menu-buttons .button {
+  margin: 4px;
 }
 #nvl {
   position: absolute;
@@ -160,6 +171,17 @@ input[type="checkbox"]:checked + span:before {
   display: block;
   margin: 10px 8px;
 }
+#ctc, #nvlctc {
+  position: absolute;
+  bottom: 20px;
+  right: 10px;
+  -webkit-animation: blink 2s infinite;
+  -moz-animation: blink 2s infinite;
+  animation: blink 2s infinite;
+}
+#nvlctc {
+  bottom: 25px;
+}
 .centered {
   width: 100%;
   text-align: center;
@@ -173,6 +195,3 @@ input[type="checkbox"]:checked + span:before {
   background: url("../dump/ui/bg-choice.png") no-repeat top center;
   height: 35px;
 }
-#show img {
-  position: absolute;
-}