--- a/engine-runner.js	Wed May 21 20:32:48 2008 -0700
+++ b/engine-runner.js	Wed May 21 22:00:48 2008 -0700
@@ -35,6 +35,18 @@
   // video and bold). In these, changing to Roman should turn off all
   // the other styles currently set.
 
+  // From section 8.3.1 of the Z-Spec:
+  // -1 =  the colour of the pixel under the cursor (if any)
+  // 0  =  the current setting of this colour
+  // 1  =  the default setting of this colour
+  // 2  =  black   3 = red       4 = green    5 = yellow
+  // 6  =  blue    7 = magenta   8 = cyan     9 = white
+  // 10 =  darkish grey (MSDOS interpreter number)
+  // 10 =  light grey   (Amiga interpreter number)
+  // 11 =  medium grey  (ditto)
+  // 12 =  dark grey    (ditto)
+  // Colours 10, 11, 12 and -1 are available only in Version 6.
+
   onSetStyle: function(textStyle, foreground, background) {
   },
 

--- a/parchment.css	Wed May 21 20:32:48 2008 -0700
+++ b/parchment.css	Wed May 21 22:00:48 2008 -0700
@@ -1,3 +1,83 @@
+.fg-default {
+    color: black;
+}
+
+.fg-default-reversed {
+    color: white;
+}
+
+.fg-black {
+    color: black;
+}
+
+.fg-red {
+    color: red;
+}
+
+.fg-green {
+    color: green;
+}
+
+.fg-yellow {
+    color: yellow;
+}
+
+.fg-blue {
+    color: blue;
+}
+
+.fg-magenta {
+    color: magenta;
+}
+
+.fg-cyan {
+    color: cyan;
+}
+
+.fg-white {
+    color: white;
+}
+
+.bg-default {
+    background: white;
+}
+
+.bg-default-reversed {
+    background: black;
+}
+
+.bg-black {
+    background: black;
+}
+
+.bg-red {
+    background: red;
+}
+
+.bg-green {
+    background: green;
+}
+
+.bg-yellow {
+    background: yellow;
+}
+
+.bg-blue {
+    background: blue;
+}
+
+.bg-magenta {
+    background: magenta;
+}
+
+.bg-cyan {
+    background: cyan;
+}
+
+.bg-white {
+    background: white;
+}
+
 body {
     font-family: palatino, georgia, verdana, arial, sans-serif;
     text-align: center;
@@ -31,16 +111,10 @@
 }
 
 .finished-input {
-    color: gray;
+    opacity: 0.5;
 }
 
 .z-roman {
-    color: #000000;
-}
-
-.z-reverse-video {
-    color: #ffffff;
-    background: #000000;
 }
 
 .z-bold {

--- a/web-zui.js	Wed May 21 20:32:48 2008 -0700
+++ b/web-zui.js	Wed May 21 22:00:48 2008 -0700
@@ -7,6 +7,9 @@
   this._activeWindow = 0;
   this._inputString = "";
   this._currentCallback = null;
+  this._foreground = "default";
+  this._background = "default";
+  this._reverseVideo = false;
   this._currStyles = ["z-roman"];
 
   if (logfunc) {
@@ -234,9 +237,10 @@
         break;
       case 0:
         this._currStyles = ["z-roman"];
+        this._reverseVideo = false;
         break;
       case 1:
-        this._currStyles.push("z-reverse-video");
+        this._reverseVideo = true;
         break;
       case 2:
         this._currStyles.push("z-bold");
@@ -250,6 +254,22 @@
       default:
         throw new Error("Unknown style: " + textStyle);
       }
+
+      var colorTable = {0: null,
+                        1: "default",
+                        2: "black",
+                        3: "red",
+                        4: "green",
+                        5: "yellow",
+                        6: "blue",
+                        7: "magenta",
+                        8: "cyan",
+                        9: "white"};
+
+      if (colorTable[foreground])
+        this._foreground = colorTable[foreground];
+      if (colorTable[background])
+        this._background = colorTable[background];
     },
 
     onSetWindow: function(window) {
@@ -261,6 +281,9 @@
     },
 
     onEraseWindow: function(window) {
+      // Set the background color.
+      document.body.className = "bg-" + self._background;
+
       if (window == -2) {
         self._console.clear();
         self._eraseBottomWindow();
@@ -325,12 +348,29 @@
     },
 
     onPrint: function(output) {
-      var styles = self._currStyles.join(" ");
+      var fg = self._foreground;
+      var bg = self._background;
+
+      if (self._reverseVideo) {
+        fg = self._background;
+        bg = self._foreground;
+        if (fg == "default")
+          fg = "default-reversed";
+        if (bg == "default")
+          bg = "default-reversed";
+      }
+
+      var colors = ["fg-" + fg, "bg-" + bg];
+      var styles = colors.concat(self._currStyles).join(" ");
 
       self._log("print wind: " + self._activeWindow + " output: " +
                 output.quote() + " style: " + styles);
 
       if (self._activeWindow == 0) {
+        // Ensure any text input, cursor, etc. inherits the proper
+        // style.
+        $("#content").attr("class", styles);
+
         var lines = output.split("\n");
         for (var i = 0; i < lines.length; i++) {
           var addNewline = false;