[work in progress]

revamping home page UI based on work made for CSS validator and Unicorn:
- usage of tabtastic for the method (uri, upload) choice
- usage ot toggle scripting for extended options
- menu moved to bottom of page, giving most important page
  real estate to form interface

21 files changed, 1081 insertions, 221 deletions

diff --git a/htdocs/charset-select.html b/htdocs/charset-select.html
new file mode 100755
index 0000000..61fe346
--- /dev/null
+++ b/htdocs/charset-select.html
@@ -0,0 +1,43 @@
+              <select id="<!--#echo var="fieldset_id" -->-charset" name="charset">
+                <option value="(detect automatically)" selected="selected">(detect automatically)</option>
+                <option value="utf-8">utf-8 (Unicode, worldwide)</option>
+                <option value="utf-16">utf-16 (Unicode, worldwide)</option>
+                <option value="iso-8859-1">iso-8859-1 (Western Europe)</option>
+                <option value="iso-8859-2">iso-8859-2 (Central Europe)</option>
+                <option value="iso-8859-3">iso-8859-3 (Southern Europe)</option>
+                <option value="iso-8859-4">iso-8859-4 (North European)</option>
+                <option value="iso-8859-5">iso-8859-5 (Cyrillic)</option>
+                <option value="iso-8859-6-i">iso-8859-6-i (Arabic)</option>
+                <option value="iso-8859-7">iso-8859-7 (Greek)</option>
+                <option value="iso-8859-8">iso-8859-8 (Hebrew, visual)</option>
+                <option value="iso-8859-8-i">iso-8859-8-i (Hebrew, logical)</option>
+                <option value="iso-8859-9">iso-8859-9 (Turkish)</option>
+                <option value="iso-8859-10">iso-8859-10 (Latin 6)</option>
+                <option value="iso-8859-11">iso-8859-11 (Latin/Thai)</option>
+                <option value="iso-8859-13">iso-8859-13 (Latin 7, Baltic Rim)</option>
+                <option value="iso-8859-14">iso-8859-14 (Latin 8, Celtic)</option>
+                <option value="iso-8859-15">iso-8859-15 (Latin 9)</option>
+                <option value="iso-8859-16">iso-8859-16 (Latin 10)</option>
+                <option value="us-ascii">us-ascii (basic English)</option>
+                <option value="euc-jp">euc-jp (Japanese, Unix)</option>
+                <option value="shift_jis">shift_jis (Japanese, Win/Mac)</option>
+                <option value="iso-2022-jp">iso-2022-jp (Japanese, email)</option>
+                <option value="euc-kr">euc-kr (Korean)</option>
+                <option value="ksc_5601">ksc_5601 (Korean)</option>
+                <option value="gb2312">gb2312 (Chinese, simplified)</option>
+                <option value="gb18030">gb18030 (Chinese, simplified)</option>
+                <option value="big5">big5 (Chinese, traditional)</option>
+                <option value="tis-620">tis-620 (Thai)</option>
+                <option value="koi8-r">koi8-r (Russian)</option>
+                <option value="koi8-u">koi8-u (Ukrainian)</option>
+                <option value="iso-ir-111">iso-ir-111 (Cyrillic KOI-8)</option>
+                <option value="macintosh">macintosh (MacRoman)</option>
+                <option value="windows-1250">windows-1250 (Central Europe)</option>
+                <option value="windows-1251">windows-1251 (Cyrillic)</option>
+                <option value="windows-1252">windows-1252 (Western Europe)</option>
+                <option value="windows-1253">windows-1253 (Greek)</option>
+                <option value="windows-1254">windows-1254 (Turkish)</option>
+                <option value="windows-1255">windows-1255 (Hebrew)</option>
+                <option value="windows-1256">windows-1256 (Arabic)</option>
+                <option value="windows-1257">windows-1257 (Baltic Rim)</option>
+              </select>
diff --git a/htdocs/detailed-form.html b/htdocs/detailed-form.html
index d446e69..3212662 100755
--- a/htdocs/detailed-form.html
+++ b/htdocs/detailed-form.html
@@ -1,65 +1,39 @@
-          <tr>
-            <th><label for="charset">Encoding:</label></th>
-            <td>
-              <select id="charset" name="charset">
-                <option value="(detect automatically)" selected="selected">(detect automatically)</option>
-                <option value="utf-8">utf-8 (Unicode, worldwide)</option>
-                <option value="utf-16">utf-16 (Unicode, worldwide)</option>
-                <option value="iso-8859-1">iso-8859-1 (Western Europe)</option>
-                <option value="iso-8859-2">iso-8859-2 (Central Europe)</option>
-                <option value="iso-8859-3">iso-8859-3 (Southern Europe)</option>
-                <option value="iso-8859-4">iso-8859-4 (North European)</option>
-                <option value="iso-8859-5">iso-8859-5 (Cyrillic)</option>
-                <option value="iso-8859-6-i">iso-8859-6-i (Arabic)</option>
-                <option value="iso-8859-7">iso-8859-7 (Greek)</option>
-                <option value="iso-8859-8">iso-8859-8 (Hebrew, visual)</option>
-                <option value="iso-8859-8-i">iso-8859-8-i (Hebrew, logical)</option>
-                <option value="iso-8859-9">iso-8859-9 (Turkish)</option>
-                <option value="iso-8859-10">iso-8859-10 (Latin 6)</option>
-                <option value="iso-8859-11">iso-8859-11 (Latin/Thai)</option>
-                <option value="iso-8859-13">iso-8859-13 (Latin 7, Baltic Rim)</option>
-                <option value="iso-8859-14">iso-8859-14 (Latin 8, Celtic)</option>
-                <option value="iso-8859-15">iso-8859-15 (Latin 9)</option>
-                <option value="iso-8859-16">iso-8859-16 (Latin 10)</option>
-                <option value="us-ascii">us-ascii (basic English)</option>
-                <option value="euc-jp">euc-jp (Japanese, Unix)</option>
-                <option value="shift_jis">shift_jis (Japanese, Win/Mac)</option>
-                <option value="iso-2022-jp">iso-2022-jp (Japanese, email)</option>
-                <option value="euc-kr">euc-kr (Korean)</option>
-                <option value="ksc_5601">ksc_5601 (Korean)</option>
-                <option value="gb2312">gb2312 (Chinese, simplified)</option>
-                <option value="gb18030">gb18030 (Chinese, simplified)</option>
-                <option value="big5">big5 (Chinese, traditional)</option>
-                <option value="tis-620">tis-620 (Thai)</option>
-                <option value="koi8-r">koi8-r (Russian)</option>
-                <option value="koi8-u">koi8-u (Ukrainian)</option>
-                <option value="iso-ir-111">iso-ir-111 (Cyrillic KOI-8)</option>
-                <option value="macintosh">macintosh (MacRoman)</option>
-                <option value="windows-1250">windows-1250 (Central Europe)</option>
-                <option value="windows-1251">windows-1251 (Cyrillic)</option>
-                <option value="windows-1252">windows-1252 (Western Europe)</option>
-                <option value="windows-1253">windows-1253 (Greek)</option>
-                <option value="windows-1254">windows-1254 (Turkish)</option>
-                <option value="windows-1255">windows-1255 (Hebrew)</option>
-                <option value="windows-1256">windows-1256 (Arabic)</option>
-                <option value="windows-1257">windows-1257 (Baltic Rim)</option>
-              </select>
-            </td>
-            <td><label for="fbc"><input id="fbc" name="fbc" type="checkbox" value="1" /> Use Fallback instead of Override</label></td>
-          </tr>
-          <tr>
-            <th><label for="doctype">Doctype:</label></th>
-            <td>
-<!--#include virtual="doctype-select.html" -->
-            </td>
-            <td><label for="fbd"><input id="fbd" name="fbd" type="checkbox" value="1" /> Use Fallback instead of Override</label></td>
+<table>
+  <tr>
+    <th>
+      <label for="<!--#echo var="fieldset_id" -->-charset">Character Encoding</label>
+    </th>
+    <td>
+      <!--#include virtual="charset-select.html" -->
+    </td>
+    <td><input id="<!--#echo var="fieldset_id" -->-fbc" name="fbc" type="checkbox" value="1" /><label for="<!--#echo var="fieldset_id" -->-fbc" title="Use selected Character encoding only if missing in the document">Only if missing</label></td>
+  </tr>
+  <tr>
+    <th>
+        <label for="<!--#echo var="fieldset_id" -->-doctype">Document Type</label>
+    </th>
+    <td>
+        <!--#include virtual="doctype-select.html" -->
+    </td>
+    <td><label for="<!--#echo var="fieldset_id" -->-fbd"><input id="<!--#echo var="fieldset_id" -->-fbd" name="fbd" type="checkbox" value="1" title="Use selected Document Type only if missing in the document" />Only if missing</label></td>
+  </tr>
+  <tr>
+          <td colspan="3"><input type="radio" name="group" id="<!--#echo var="fieldset_id" -->group_no" value="0" checked="checked" /><label for="<!--#echo var="fieldset_id" -->group_no">List Messages Sequentially</label> <input type="radio" name="group" id="<!--#echo var="fieldset_id" -->group_yes" value="1" /><label for="<!--#echo var="fieldset_id" -->group_yes">Group Error Messages by type</label></td>
+
+</tr>
+<tr>
+        <td><label title="Show Page Source" for="<!--#echo var="fieldset_id" -->-ss"><input id="<!--#echo var="fieldset_id" -->-ss" name="ss" type="checkbox" value="1" />Show Source</label></td>
+        <td colspan="2"><input id="<!--#echo var="fieldset_id" -->-st" name="st" type="checkbox" value="1" /><label for="<!--#echo var="fieldset_id" -->-st">Clean up Markup with HTML Tidy</label>
+        </td>
+        
+
+
           </tr>
           <tr>
-            <th rowspan="2">Options (<a title="Explanation for these options" href="docs/users.html#Options">Help</a>):</th>
-            <td><label title="Show Page Source" for="ss"><input id="ss" name="ss" type="checkbox" value="1" /> Show Source</label></td>
-            <td><label title="Show an Outline of the document" for="outline"><input id="outline" name="outline" type="checkbox" value="1" /> Show Outline</label></td>
-          </tr>
-          <tr>
-            <td><label title="Validate also pages for which the HTTP status code indicates an error" for="No200"><input id="No200" name="No200" type="checkbox" value="1" /> Validate error pages</label></td>
-	    <td><label title="Show Verbose Output" for="verbose"><input id="verbose" name="verbose" type="checkbox" value="1" checked="checked" /> Verbose Output</label></td>
-          </tr>
+                  <td><input id="<!--#echo var="fieldset_id" -->-outline" name="outline" type="checkbox" value="1" /><label title="Show an Outline of the document" for="<!--#echo var="fieldset_id" -->-outline">Show Outline</label>
+                  </td>
+                  <td><label title="Validate also pages for which the HTTP status code indicates an error" for="<!--#echo var="fieldset_id" -->-No200"><input id="<!--#echo var="fieldset_id" -->-No200" name="No200" type="checkbox" value="1" /> Validate error pages</label></td>
+
+                  <td><label title="Verbose Output" for="<!--#echo var="fieldset_id" -->-verbose"><input id="<!--#echo var="fieldset_id" -->-verbose" name="verbose" type="checkbox" value="0" />Verbose Output</label></td>
+        </tr>
+</table>
\ No newline at end of file
diff --git a/htdocs/detailed-form_directinput.html b/htdocs/detailed-form_directinput.html
new file mode 100755
index 0000000..20bbb88
--- /dev/null
+++ b/htdocs/detailed-form_directinput.html
@@ -0,0 +1,14 @@
+<tr>
+        <td><label for="<!--#echo var="fieldset_id" -->-doctype">Use Doctype:</label></td>
+<td>            <!--#include virtual="doctype-select.html" --></td>
+<td>            <label for="<!--#echo var="fieldset_id" -->-fbd"><input id="<!--#echo var="fieldset_id" -->-fbd" name="fbd" type="checkbox" value="1" />Only if Doctype is missing</label></td>
+</tr>
+          <tr>
+            <th rowspan="2">Options (<a title="Explanation for these options" href="docs/users.html#Options">Help</a>):</th>
+            <td><label title="Show Page Source" for="<!--#echo var="fieldset_id" -->-ss"><input id="<!--#echo var="fieldset_id" -->-ss" name="ss" type="checkbox" value="1" /> Show Source</label></td>
+            <td><label title="Show an Outline of the document" for="<!--#echo var="fieldset_id" -->-outline"><input id="<!--#echo var="fieldset_id" -->-outline" name="outline" type="checkbox" value="1" /> Show Outline</label></td>
+          </tr>
+          <tr>
+            <td><label title="Validate also pages for which the HTTP status code indicates an error" for="<!--#echo var="fieldset_id" -->-No200"><input id="<!--#echo var="fieldset_id" -->-No200" name="No200" type="checkbox" value="1" /> Validate error pages</label></td>
+	    <td><label title="Show Verbose Output" for="<!--#echo var="fieldset_id" -->-verbose"><input id="<!--#echo var="fieldset_id" -->-verbose" name="verbose" type="checkbox" value="1" checked="checked" /> Verbose Output</label></td>
+          </tr>
diff --git a/htdocs/doctype-select.html b/htdocs/doctype-select.html
index d06d82d..941dfde 100755
--- a/htdocs/doctype-select.html
+++ b/htdocs/doctype-select.html
@@ -1,4 +1,4 @@
-<select id="doctype" name="doctype">
+<select id="<!--#echo var="fieldset_id" -->-doctype" name="doctype">
   <option value="Inline" selected="selected">(detect automatically)</option>
   <option value="XHTML 1.0 Strict">XHTML 1.0 Strict</option>
   <option value="XHTML 1.0 Transitional">XHTML 1.0 Transitional</option>
diff --git a/htdocs/footer.html b/htdocs/footer.html
index 8439da7..bcf817a 100755
--- a/htdocs/footer.html
+++ b/htdocs/footer.html
@@ -1,28 +1,49 @@
-      </div><!-- End of "main" DIV. -->
-
-<address>
-      <a href="<!--#echo var="relroot" -->check?uri=referer"><img
-        src="http://www.w3.org/Icons/valid-xhtml10" height="31" width="88"
-        alt="Valid XHTML 1.0!" /></a>
-      Feedback: 
-	<a title="Send Feedback for the W3C Markup Validation Service"
-        href="<!--#echo var="relroot" -->feedback.html">The W3C Validator Team</a><br />
-      <!--#echo var="date" -->
-      <!-- SSI Template Version: $Id: footer.html,v 1.12 2006-03-31 05:48:01 ot Exp $ -->
-    </address>
-    <p class="copyright">
-      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 1994-2006
-      <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>&reg;
-      (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>,
-      <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
-      <a href="http://www.keio.ac.jp/">Keio</a>),
-      All Rights Reserved.
-      W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
-      <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
-      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
-      and <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
-      rules apply. Your interactions with this site are in accordance
-      with our <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and
-      <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy
-      statements.
-    </p>
+<ul class="navbar" id="menu">
+    <li><span class="hideme"><a href="#skip" accesskey="2" title="Skip past navigation to main part of page">Skip Navigation</a> |</span>
+    <a href="<!--#echo var="relroot" -->" accesskey="1" title="Go to the Home Page for The W3C Markup Validation Service"><strong>Home</strong></a></li>
+    <li><a href="<!--#echo var="relroot" -->about.html" title="Information About this Service">About...</a></li>
+    <li><a href="<!--#echo var="relroot" -->whatsnew.html" title="The changes made to this service recently">News</a></li>
+    <li><a href="<!--#echo var="relroot" -->docs/" accesskey="3" title="Documentation for this Service">Docs</a></li>
+	<li><a href="<!--#echo var="relroot" -->docs/help.html" title="Help and answers to frequently asked questions">Help&nbsp;&amp;&nbsp;<acronym title="Frequently Asked Questions">FAQ</acronym></a></li>
+    <li><a href="<!--#echo var="relroot" -->feedback.html" accesskey="4" title="How to provide feedback on this service">Feedback</a></li>
+</ul>
+
+		<p id="activity_logos">
+			<a href="http://www.w3.org/QA/" title="W3C's Quality Assurance Activity, bringing you free Web quality tools and more">
+
+				<img src="http://www.w3.org/QA/2002/12/qa.png" alt="QA" />
+			</a>
+			<a href="http://www.w3.org/Style/CSS/learning" title="Learn more about Cascading Style Sheets"></a>
+		</p>
+
+		<p id="support_logo">
+			Support this tool, become a<br />
+			<a href="http://www.w3.org/Consortium/supporters">
+				<img src="http://www.w3.org/Consortium/supporter-logos/csupporter.png" alt="W3C Supporter" />
+
+			</a>
+		</p>
+
+		<p class="copyright">
+			<a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 1994-2007
+			<a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>&reg;
+
+			(<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>,
+			<a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
+			<a href="http://www.keio.ac.jp/">Keio</a>),
+			All Rights Reserved.
+			W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
+			<a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
+			<a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
+
+			and <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
+
+			rules apply. Your interactions with this site are in accordance
+			with our <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and
+			<a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy
+			statements.
+		</p>
+
+	</body>
+
+</html>
diff --git a/htdocs/header.html b/htdocs/header.html
index e2258ed..55cd6ca 100755
--- a/htdocs/header.html
+++ b/htdocs/header.html
@@ -1,12 +1,19 @@
-<?xml version="1.0"?>
+<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
-    <title><!--#echo var="title" --></title>
+          <title><!--#echo var="title" --></title>
     <link rev="made" href="mailto:www-validator@w3.org" />
-    <link rev="start" href="<!--#echo var="relroot" -->" title="Home Page" />
-    <style type="text/css" media="all">@import "<!--#echo var="relroot" -->base.css";</style>
+    <link rev="start" href="./" title="Home Page" />
+    <style type="text/css" media="all">@import "<!--#echo var="relroot" -->style/base.css";
+</style>
+    <script type="text/javascript" src="<!--#echo var="relroot" -->scripts/tabtastic/addclasskillclass.js"></script>
+    <script type="text/javascript" src="<!--#echo var="relroot" -->scripts/tabtastic/attachevent.js"></script>
+    <script type="text/javascript" src="<!--#echo var="relroot" -->scripts/tabtastic/addcss.js"></script>
+    <script type="text/javascript" src="<!--#echo var="relroot" -->scripts/tabtastic/tabtastic.js"></script>
+    <script src="<!--#echo var="relroot" -->scripts/toggle.js" type="text/javascript"></script>
+    <meta name="revision" content="$Id: header.html,v 1.44 2007-02-20 01:56:44 ot Exp $" />
     <meta name="keywords" content="HTML, HyperText Markup Language, Validation,
       W3C Markup Validation Service" />
     <meta name="description" content="W3C's easy-to-use
@@ -15,25 +22,14 @@
     <!--#if expr="$feeds = 1" -->
     <link rel="alternate" type="application/atom+xml" href="whatsnew.atom" />
     <!--#endif -->
-    <!-- SSI Template Version: $Id: header.html,v 1.43 2006-11-15 08:02:45 ot Exp $ -->
+    <!-- SSI Template Version: $Id: header.html,v 1.44 2007-02-20 01:56:44 ot Exp $ -->
+
   </head>
 
   <body>
-    <div id="banner">
-      <h1 id="title">
-	<a href="http://www.w3.org/"><img height="48" alt="W3C" id="logo" src="http://www.w3.org/Icons/WWW/w3c_home_nb" /></a>
-        <a href="http://www.w3.org/QA/"><img src="http://www.w3.org/QA/2002/12/qa-small.png" alt="QA" /></a>
-        Markup Validation Service</h1>
-	<span id="versioninfo"><abbr title="version">v</abbr> 0.8-<abbr title="development">dev</abbr> </span>
-    </div>
-    <ul class="navbar" id="menu">
-        <li><span class="hideme"><a href="#skip" accesskey="2" title="Skip past navigation to main part of page">Skip Navigation</a> |</span>
-        <a href="<!--#echo var="relroot" -->" accesskey="1" title="Go to the Home Page for The W3C Markup Validation Service"><strong>Home</strong></a></li>
-        <li><a href="<!--#echo var="relroot" -->about.html" title="Information About this Service">About...</a></li>
-        <li><a href="<!--#echo var="relroot" -->whatsnew.html" title="The changes made to this service recently">News</a></li>
-        <li><a href="<!--#echo var="relroot" -->docs/" accesskey="3" title="Documentation for this Service">Docs</a></li>
-	<li><a href="<!--#echo var="relroot" -->docs/help.html" title="Help and answers to frequently asked questions">Help&nbsp;&amp;&nbsp;<acronym title="Frequently Asked Questions">FAQ</acronym></a></li>
-        <li><a href="<!--#echo var="relroot" -->feedback.html" accesskey="4" title="How to provide feedback on this service">Feedback</a></li>
-    </ul>
+   <div id="banner">
+    <h1 id="title"><a href="http://www.w3.org/"><img height="48" alt="W3C" id="logo" src="http://www.w3.org/Icons/WWW/w3c_home_nb" /></a>
+    <a href="<!--#echo var="relroot" -->"><img src="<!--#echo var="relroot" -->images/markup_validation_service.png" alt="Markup Validation Service" /></a></h1>
+   </div>
+
 
-    <div id="main"><!-- This DIV encapsulates everything in this page - necessary for the positioning -->
diff --git a/htdocs/images/arrow-down.gif b/htdocs/images/arrow-down.gif
new file mode 100644
index 0000000..e8a951f
--- /dev/null
+++ b/htdocs/images/arrow-down.gif
diff --git a/htdocs/images/arrow-right.gif b/htdocs/images/arrow-right.gif
new file mode 100644
index 0000000..4f6dcad
--- /dev/null
+++ b/htdocs/images/arrow-right.gif
diff --git a/htdocs/images/header.jpg b/htdocs/images/header.jpg
index f8ab513..b77170f 100644
--- a/htdocs/images/header.jpg
+++ b/htdocs/images/header.jpg
diff --git a/htdocs/images/lg_gradient.gif b/htdocs/images/lg_gradient.gif
new file mode 100644
index 0000000..051566d
--- /dev/null
+++ b/htdocs/images/lg_gradient.gif
diff --git a/htdocs/images/markup_validation_service.png b/htdocs/images/markup_validation_service.png
new file mode 100644
index 0000000..456e228
--- /dev/null
+++ b/htdocs/images/markup_validation_service.png
diff --git a/htdocs/images/markup_validation_service.psd b/htdocs/images/markup_validation_service.psd
new file mode 100644
index 0000000..5d56022
--- /dev/null
+++ b/htdocs/images/markup_validation_service.psd
diff --git a/htdocs/images/sm_gradient_active.gif b/htdocs/images/sm_gradient_active.gif
new file mode 100644
index 0000000..6676940
--- /dev/null
+++ b/htdocs/images/sm_gradient_active.gif
diff --git a/htdocs/images/sm_gradient_hover.gif b/htdocs/images/sm_gradient_hover.gif
new file mode 100644
index 0000000..02a7ce5
--- /dev/null
+++ b/htdocs/images/sm_gradient_hover.gif
diff --git a/htdocs/index.html b/htdocs/index.html
index 062df42..9e7b475 100755
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -1,121 +1,93 @@
-<!--#set var="revision" value="\$Id: index.html,v 1.79 2006-11-15 08:02:45 ot Exp $"
---><!--#set var="date" value="\$Date: 2006-11-15 08:02:45 $"
+<!--#set var="revision" value="\$Id: index.html,v 1.80 2007-02-20 01:56:44 ot Exp $"
+--><!--#set var="date" value="\$Date: 2007-02-20 01:56:44 $"
 --><!--#set var="title" value="The W3C Markup Validation Service"
 --><!--#set var="relroot" value="./"
 --><!--#include virtual="header.html" -->
 
-     <div id="head">
+<p id="tagline">
+Check the markup (HTML, XHTML) of Web documents
+</p>
 
-        <div id="jumpbar">
-        Validate:
-        <ul>
-          <li><a href="#validate-by-uri" title="validate an online document by entering their URL">by URL</a></li>
-          <li><a href="#validate-by-upload" title="validate a local document by uploading it to the validator">by File Upload</a></li>
-          <li><a href="#validate-by-input" title="validate a local document by pasting its source in a text field">by direct Input</a></li>
-        </ul>
-      </div>
-    
-                                                                                                       
-      </div><!-- end of "head" -->
+<div id="frontforms">
+<ul class="tabset_tabs"><li><a href="#validate-by-uri" class="active">by URI</a></li><li><a href="#validate-by-upload">by File Upload</a></li><li><a href="#validate-by-input">by direct Input</a></li></ul>
+<div id="fields">
 
+<fieldset id="validate-by-uri" class="tabset_content front"><legend class="tabset_label">Validate by URI</legend>
+  <form method="get" action="check">
+    <p class="instructions">
+	Validate a document online:     
+   </p>
+   <p>
+	<label title="Address of page to Validate" for="uri">Address:</label>
+        <input type="text" name="uri" id="uri" size="45" />
+   </p>
+  <fieldset id="extra_opt_uri" class="moreoptions alttoggle closed">
+           <legend class="toggletext">More Options</legend>  
+                <!--#set var="fieldset_id" value="uri"-->
+                <!--#include virtual="detailed-form.html" -->  
+  </fieldset><!-- invisible -->
+        	<p class="submit_button"><label title="Submit file for validation"><input type="submit" value="Check" /></label></p>
+  </form>
+</fieldset>
 
-    <div class="intro">
-      <p><a name="skip" id="skip"></a>
-        This is the W3C Markup Validation Service, a free service that checks Web
-        documents in formats like HTML and XHTML for conformance to W3C Recommendations
-        and other standards.</p>
-      <p>
-        if you wish to validate specific content such as 
+<fieldset id="validate-by-upload"  class="tabset_content front"><legend class="tabset_label">Validate by File Upload</legend>
+<form method="post" enctype="multipart/form-data" action="check">
+  <p class="instructions">Upload a document for validation:</p>
+  <p><label title="Choose a Local File to Upload and Validate" for="uploaded_file">File:</label>
+    <input type="file" id="uploaded_file" name="uploaded_file" size="30" /></p>        
+    <fieldset id="extra_opt_upload" class="moreoptions alttoggle closed">
+    <legend class="toggletext">More Options</legend>
+         <!--#set var="fieldset_id" value="upload"-->
+         <!--#include virtual="detailed-form.html" -->  
+    </fieldset><!-- invisible -->
+   <p class="submit_button"><label title="Submit file for validation"><input type="submit" value="Check" /></label></p>
+</form>
+                <p><strong>Note</strong>: file upload may not work with Internet
+                Explorer on some versions of Windows XP Service Pack 2, see our
+                <a href="http://www.w3.org/QA/2005/01/Validator-IE_WinXP_SP2">information page</a>
+                on the W3C QA Website.</p>
+
+</fieldset>
+      <fieldset id="validate-by-input"  class="tabset_content front"><legend class="tabset_label">Validate by direct input</legend>
+                  <form method="post" enctype="multipart/form-data" action="check">
+                          <p class="instructions"><label title="Paste a complete (HTML) Document here" for="fragment">Enter the Markup (Full Document) to validate</label>:<br />
+                                  
+                      	<textarea id="fragment" name="fragment" rows="12" cols="70"></textarea>
+                        <br /><label for="parsemodel">Treat as:</label>
+                                <select id="parsemodel" name="parsemodel">
+                                        <option value="sgml">HTML</option>
+                                        <option value="xml">XML (and XHTML)</option>
+                                </select>
+                        </p>
+                          <fieldset id="extra_opt_direct" class="moreoptions alttoggle closed">
+                                   <legend class="toggletext">More Options</legend>   
+                                        <table>
+                                        <!--#set var="fieldset_id" value="direct"-->
+                                        <!--#include virtual="detailed-form_directinput.html" -->  
+                                        </table>
+                                </fieldset><!-- invisible -->
+
+                    <p class="submit_button">
+                      <input type="submit" value="Validate this document" />
+                      <input type="reset" value="Reset this form" />
+                    </p>
+
+                  </form>
+                </fieldset>
+  </div><!-- fields -->
+  </div> <!-- frontforms -->
+<div class="intro">
+    <p>
+        This validator checks markup of Web documents in HTML, XHTML, SMIL, MathML, etc.
+        If you wish to validate specific content such as 
         <a href="http://validator.w3.org/feed/">RSS/Atom feeds</a> or
 	<a href="http://jigsaw.w3.org/css-validator/">CSS stylesheets</a>
         or to <a href="http://validator.w3.org/checklink">find broken links</a>, 
  there are <a href="http://www.w3.org/QA/Tools/">other validators and tools</a> available.
       </p>
-    </div>
-
-
-    <div>
-      <h2>Validate Your Markup</h2>
-      
-      <fieldset class="front" id="validate-by-uri"><legend>Validate by URL</legend>
-      <form method="get" action="check">
-        <p>
-          <label title="Address of page to Validate" for="uri">Address:
-            <input id="uri" name="uri" size="40" /></label>
-          <label title="Submit URL for validation"><input type="submit" value="Check" /></label>
-        </p>
-      </form>
-      <p>
-        Enter the <abbr title="Uniform Resource Locator">URL</abbr> of the page
-        you want to check. Advanced options are available from the <a
-          title="Extended Interface to the W3C Markup Validation Service"
-          href="detailed.html">Extended Interface</a>.
-      </p>
-      </fieldset>
-	<br />
-      <fieldset class="front" id="validate-by-upload"><legend>Validate by File Upload</legend>
-      <form method="post" enctype="multipart/form-data" action="check">
-        <p>
-          <label title="Choose a Local File to Upload and Validate" for="uploaded_file">Local File:
-            <input type="file" id="uploaded_file" name="uploaded_file" size="30" /></label>
-          <label title="Submit file for validation"><input type="submit" value="Check" /></label>
-        </p>
-      </form>
-      <p>
-        Select the file you want to upload and check. Advanced options are
-        available from the <a
-          title="File Upload Interface to the W3C Markup Validation Service"
-          href="file-upload.html">Extended File Upload Interface</a>.
-      </p>
-      <p><strong>Note</strong>: file upload may not work with Internet 
-      Explorer on some versions of Windows XP Service Pack 2, see our
-      <a href="http://www.w3.org/QA/2005/01/Validator-IE_WinXP_SP2">information page</a> 
-      on the W3C QA Website.</p>
-      </fieldset>
-    <br />
-    <fieldset class="front" id="validate-by-input"><legend>Validate by Direct Input</legend>
-    <form method="post" enctype="multipart/form-data" action="check">
-    <p>Input the markup you would like to validate in the text area below:</p>
-    <p>
-      <label title="Paste a complete (HTML) Document here" for="fragment">
-      <textarea cols="75" rows="12" name="fragment" id="fragment"></textarea></label><br />
-      <label title="Submit markup for validation"><input type="submit" value="Check" /></label>
-    </p>
-    </form>
-    <p>Only complete documents (along with a 
-    <a href="docs/help.html#faq-doctype">Doctype declaration</a>) will be validated.
-    Advanced options are available from the 
-    <a href="fragment-upload.html">Extended Direct Input Interface</a>.</p>
-    </fieldset>
-
-    </div>
-
-    <div id="recent">
-      <h2>Recent Updates</h2>
-      <dl id="news">
-          
-      <dt><a href="whatsnew.html#t2006-11-14">2006-11-14</a>: Markup Validator v0.7.4 Released</dt>
-      <dd>
-        Maintenance release of the Markup Validator, including bug fixes to the API,
-        documentation updates and the return of the outline feature.
-      </dd>
-      <dt><a href="whatsnew.html#t2006-10-23">2006-10-23</a>: Markup Validator v0.7.3 Released</dt>
-      <dd>
-        Maintenance release of the Markup Validator, including fixes, updates, and adding an 
-        experimental API to interface the validator with other programs and services.
-      </dd>
-
-      </dl>
-      <p class="intro">
-        These are the most recent major changes to this service. See
-        "<a href="whatsnew.html">What's&nbsp;New</a>" for more details. 
-        News for this service are also available as <a href="whatsnew.atom">an ATOM feed</a>.
-      </p>
-   </div>
-
-
+    <p>This is the markup Validator v0.8.0-dev. 
+    Latest Stable release of the validator was 
+    <a href="whatsnew.html#t2006-11-14">version 0.7.4, released 14 Nov, 2006</a>.</p>
+</div>
 <!--#include virtual="footer.html" -->
 
-  </body>
-</html>
-
diff --git a/htdocs/scripts/tabtastic/addclasskillclass.js b/htdocs/scripts/tabtastic/addclasskillclass.js
new file mode 100644
index 0000000..f199fc8
--- /dev/null
+++ b/htdocs/scripts/tabtastic/addclasskillclass.js
@@ -0,0 +1,14 @@
+//*** This code is copyright 2002-2003 by Gavin Kistner and Refinery; www.refinery.com

+//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt

+//*** Reuse or modification is free provided you abide by the terms of that license.

+//*** (Including the first two lines above in your source code satisfies the conditions.)

+

+//***Adds a new class to an object, preserving existing classes

+function AddClass(obj,cName){ KillClass(obj,cName); return obj && (obj.className+=(obj.className.length>0?' ':'')+cName); }

+

+//***Removes a particular class from an object, preserving other existing classes.

+function KillClass(obj,cName){ return obj && (obj.className=obj.className.replace(new RegExp("^"+cName+"\\b\\s*|\\s*\\b"+cName+"\\b",'g'),'')); }

+

+//***Returns true if the object has the class assigned, false otherwise.

+function HasClass(obj,cName){ return (!obj || !obj.className)?false:(new RegExp("\\b"+cName+"\\b")).test(obj.className) }

+

diff --git a/htdocs/scripts/tabtastic/addcss.js b/htdocs/scripts/tabtastic/addcss.js
new file mode 100644
index 0000000..a6c9f42
--- /dev/null
+++ b/htdocs/scripts/tabtastic/addcss.js
@@ -0,0 +1,59 @@
+//*** This code is copyright 2002-2003 by Gavin Kistner, gavin@refinery.com
+//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
+//*** Reuse or modification is free provided you abide by the terms of that license.
+//*** (Including the first two lines above in your source code satisfies the conditions.)
+
+// Add a new stylesheet to the document;
+// url [optional] A url to an external stylesheet to use
+// idx [optional] The index in document.styleSheets to insert the new sheet before
+function AddStyleSheet(url,idx){
+	var css,before=null,head=document.getElementsByTagName("head")[0];
+
+	if (document.createElement){
+		if (url){
+			css = document.createElement('link');
+			css.rel  = 'stylesheet';
+			css.href = url;
+		} else css = document.createElement('style');
+		css.media = 'all';
+		css.type  = 'text/css';
+
+		if (idx>=0){
+			for (var i=0,ct=0,len=head.childNodes.length;i<len;i++){
+				var el = head.childNodes[i];
+				if (!el.tagName) continue;
+				var tagName = el.tagName.toLowerCase();
+				if (ct==idx){
+					before = el;
+					break;
+				}
+				if (tagName=='style' || tagName=='link' && (el.rel && el.rel.toLowerCase()=='stylesheet' || el.type && el.type.toLowerCase()=='text/css') ) ct++;
+			}
+		}
+		head.insertBefore(css,before);
+
+		return document.styleSheets[before?idx:document.styleSheets.length-1];
+	} else return alert("I can't create a new stylesheet for you. Sorry.");
+}
+// e.g. var newBlankSheetAfterAllOthers = AddStyleSheet(); 
+// e.g. var newBlankSheetBeforeAllOthers = AddStyleSheet(null,0);
+// e.g. var externalSheetAfterOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css');
+// e.g. var externalSheetBeforeOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css',0);
+
+
+// Cross-browser method for inserting a new rule into an existing stylesheet.
+// ss       - The stylesheet to stick the new rule in
+// selector - The string value to use for the rule selector
+// styles   - The string styles to use with the rule
+function AddRule(ss,selector,styles){
+	if (!ss) return false;
+	if (ss.insertRule) return ss.insertRule(selector+' {'+styles+'}',ss.cssRules.length);
+	if (ss.addRule){
+		ss.addRule(selector,styles);
+		return true;
+	}
+	return false;
+}
+
+// e.g. AddRule( document.styleSheets[0] , 'a:link' , 'color:blue; text-decoration:underline' );
+// e.g. AddRule( AddStyleSheet() , 'hr' , 'display:none' );
diff --git a/htdocs/scripts/tabtastic/attachevent.js b/htdocs/scripts/tabtastic/attachevent.js
new file mode 100644
index 0000000..eaad7b8
--- /dev/null
+++ b/htdocs/scripts/tabtastic/attachevent.js
@@ -0,0 +1,34 @@
+//*** This code is copyright 2003 by Gavin Kistner, gavin@refinery.com

+//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt

+//*** Reuse or modification is free provided you abide by the terms of that license.

+//*** (Including the first two lines above in your source code satisfies the conditions.)

+

+

+//***Cross browser attach event function. For 'evt' pass a string value with the leading "on" omitted

+//***e.g. AttachEvent(window,'load',MyFunctionNameWithoutParenthesis,false);

+

+function AttachEvent(obj,evt,fnc,useCapture){

+	if (!useCapture) useCapture=false;

+	if (obj.addEventListener){

+		obj.addEventListener(evt,fnc,useCapture);

+		return true;

+	} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);

+	else{

+		MyAttachEvent(obj,evt,fnc);

+		obj['on'+evt]=function(){ MyFireEvent(obj,evt) };

+	}

+} 

+

+//The following are for browsers like NS4 or IE5Mac which don't support either

+//attachEvent or addEventListener

+function MyAttachEvent(obj,evt,fnc){

+	if (!obj.myEvents) obj.myEvents={};

+	if (!obj.myEvents[evt]) obj.myEvents[evt]=[];

+	var evts = obj.myEvents[evt];

+	evts[evts.length]=fnc;

+}

+function MyFireEvent(obj,evt){

+	if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;

+	var evts = obj.myEvents[evt];

+	for (var i=0,len=evts.length;i<len;i++) evts[i]();

+}

diff --git a/htdocs/scripts/tabtastic/tabtastic.js b/htdocs/scripts/tabtastic/tabtastic.js
new file mode 100644
index 0000000..e1ed43e
--- /dev/null
+++ b/htdocs/scripts/tabtastic/tabtastic.js
@@ -0,0 +1,92 @@
+//*** This library is copyright 2004 by Gavin Kistner, gavin@refinery.com
+//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
+//*** Reuse or modification is free provided you abide by the terms of that license.
+//*** (Including the first two lines above in your source code mostly satisfies the conditions.)
+
+//*** Tabtastic -- see http://phrogz.net/JS/Tabstatic/index.html
+//*** Version 1.0    20040430   Initial release.
+//***         1.0.2  20040501   IE5Mac, IE6Win compat.
+//***         1.0.3  20040501   Removed IE5Mac/Opera7 compat. (see http://phrogz.net/JS/Tabstatic/index.html#notes)
+//***         1.0.4  20040521   Added scroll-back hack to prevent scrolling down to page anchor. Then commented out :)
+
+AttachEvent(window,'load',function(){
+	var tocTag='ul',tocClass='tabset_tabs',tabTag='a',contentClass='tabset_content';
+
+
+	function FindEl(tagName,evt){
+		if (!evt && window.event) evt=event;
+		if (!evt) return DebugOut("Can't find an event to handle in DLTabSet::SetTab",0);
+		var el=evt.currentTarget || evt.srcElement;
+		while (el && (!el.tagName || el.tagName.toLowerCase()!=tagName)) el=el.parentNode;
+		return el;
+	}
+
+	function SetTabActive(tab){
+		if (tab.tabTOC.activeTab){
+			if (tab.tabTOC.activeTab==tab) return;
+			KillClass(tab.tabTOC.activeTab,'active');
+			if (tab.tabTOC.activeTab.tabContent) KillClass(tab.tabTOC.activeTab.tabContent,'tabset_content_active');
+			//if (tab.tabTOC.activeTab.tabContent) tab.tabTOC.activeTab.tabContent.style.display='';
+			if (tab.tabTOC.activeTab.prevTab) KillClass(tab.tabTOC.activeTab.previousTab,'preActive');
+			if (tab.tabTOC.activeTab.nextTab) KillClass(tab.tabTOC.activeTab.nextTab,'postActive');
+		}
+		AddClass(tab.tabTOC.activeTab=tab,'active');
+		if (tab.tabContent) AddClass(tab.tabContent,'tabset_content_active');				
+		//if (tab.tabContent) tab.tabContent.style.display='block';
+		if (tab.prevTab) AddClass(tab.prevTab,'preActive');
+		if (tab.nextTab) AddClass(tab.nextTab,'postActive');
+	}
+	function SetTabFromAnchor(evt){
+		//setTimeout('document.body.scrollTop='+document.body.scrollTop,1);
+		SetTabActive(FindEl('a',evt).semanticTab);
+	}
+
+	
+	function Init(){
+		window.everyTabThereIsById = {};
+		
+		var anchorMatch = /#([a-z][\w.:-]*)$/i,match;
+		var activeTabs = [];
+		
+		var tocs = document.getElementsByTagName(tocTag);
+		for (var i=0,len=tocs.length;i<len;i++){
+			var toc = tocs[i];
+			if (!HasClass(toc,tocClass)) continue;
+
+			var lastTab;
+			var tabs = toc.getElementsByTagName(tabTag);
+			for (var j=0,len2=tabs.length;j<len2;j++){
+				var tab = tabs[j];
+				if (!tab.href || !(match=anchorMatch.exec(tab.href))) continue;
+				if (lastTab){
+					tab.prevTab=lastTab;
+					lastTab.nextTab=tab;
+				}
+				tab.tabTOC=toc;
+				everyTabThereIsById[tab.tabID=match[1]]=tab;
+				tab.tabContent = document.getElementById(tab.tabID);
+				
+				if (HasClass(tab,'active')) activeTabs[activeTabs.length]=tab;
+				
+				lastTab=tab;
+			}
+			AddClass(toc.getElementsByTagName('li')[0],'firstchild');
+		}
+
+		for (var i=0,len=activeTabs.length;i<len;i++){
+			SetTabActive(activeTabs[i]);
+		}
+
+		for (var i=0,len=document.links.length;i<len;i++){
+			var a = document.links[i];
+			if (!(match=anchorMatch.exec(a.href))) continue;
+			if (a.semanticTab = everyTabThereIsById[match[1]]) AttachEvent(a,'click',SetTabFromAnchor,false);
+		}
+		
+		if ((match=anchorMatch.exec(location.href)) && (a=everyTabThereIsById[match[1]])) SetTabActive(a);
+		
+		//Comment out the next line and include the file directly if you need IE5Mac or Opera7 support.
+		AddStyleSheet('style/tabtastic.css',0);
+	}
+	Init();
+},false);
\ No newline at end of file
diff --git a/htdocs/scripts/toggle.js b/htdocs/scripts/toggle.js
new file mode 100644
index 0000000..910be74
--- /dev/null
+++ b/htdocs/scripts/toggle.js
@@ -0,0 +1,142 @@
+// toggling event visibility
+// $Id: toggle.js,v 1.1 2007-02-20 01:56:44 ot Exp $
+// v1.0 David Dorward for the W3C CSS Validation Service, 18/12/2006
+// Based on v2.01 Kent Brewster, 6/8/2006 http://www.mindsack.com
+
+// namespace protection: one global variable to rule them all
+var W3C = {};
+W3C.QA = {};
+W3C.QA.Validator = {};
+W3C.QA.Validator.CSS = {};
+W3C.QA.Validator.CSS.toggle = 
+{	
+	init : function(toggle, closed, hidden)
+	{
+		// three class names, fed in from init call
+		this.toggleClass = toggle;
+		this.toggleClosed = closed;
+		this.toggleHidden = hidden;
+		this.toggleText = "toggletext";
+		// crawl through the document, look for toggled elements
+		this.crawl(document.body);
+	},
+	crawl : function(el)
+	{
+		// get this element's next sibling
+		var nextSib = this.getNextSibling(el);
+		
+		// if it has a class name, the class name matches our toggle class
+		if (el.className && el.className.match(this.toggleClass))
+		{
+			// labels are nice, but redundant with the link we are adding
+		 	for (i=0;i<el.childNodes.length;i++)
+		  	{
+		    	  current_child_node=el.childNodes[i];
+			  if (current_child_node.tagName && current_child_node.className && current_child_node.className.match(this.toggleText))
+			  // we only want to match an element with a class
+			  {
+			            current_child_node.className = 'hideme';
+        			    if (current_child_node.tagName.toLowerCase() == "legend")
+        			    {
+        			            var paragraph = document.createElement('p');
+        			    }
+            			    else 
+            			    {
+            		                    var paragraph = document.createElement(current_child_node.tagName.toLowerCase());
+            		            }
+            		            var link = document.createElement('a');
+            			    var text = current_child_node.childNodes[0].nodeValue;
+            			    
+            			    //text = text.replace("_", " ", "g");
+            			    //var text = "Show/Hide extra validation options";
+            			    text = document.createTextNode(text);
+            			    link.appendChild(text);
+            			    link.href="#" + el.id;
+            			    link.onclick = this.newToggleState(this,paragraph,el);
+            			    paragraph.appendChild(link);
+            			    paragraph.className += ' toggle closed';
+            			    el.parentNode.insertBefore(paragraph, el);
+			  }
+			}
+
+
+			// if the next sib ought to be hidden and it isn't already, hide it
+			// you can hard-code class=hidden in the HTML if you like, and avoid the Flash of Unstyled Content
+			if (el.className.match(this.toggleClosed))
+			{
+				el.className += ' ' + this.toggleHidden;
+				//el.parentNode.className += ' ' + this.toggleClosed;
+			}
+		}
+		
+		// is there more to do? Do it, if so:
+		if (el.firstChild) 
+		{
+    			this.crawl(el.firstChild);
+  		}
+		if (nextSib) 
+		{
+			this.crawl(nextSib);
+		}
+	},
+	newToggleState : function(o,element,nextEl) {
+		return function () { return o.toggleState(element,nextEl) };
+	},
+	toggleState : function(el,nextEl)
+	{
+		// there's got to be a way to get this without stating it explicitly
+		var o = W3C.QA.Validator.CSS.toggle;
+				
+		// change the style of the triggering element
+		if(el.className.match(o.toggleClosed))
+		{
+			el.className = el.className.replace(o.toggleClosed, '');
+		}
+		else
+		{
+			el.className = el.className + ' ' + o.toggleClosed;
+		}
+		
+		// yes, we need to check if it's really there; other scripts could have removed it
+		if(nextEl && nextEl.className.match('hidden'))
+		{
+			nextEl.className = nextEl.className.replace(o.toggleHidden, '');
+		}
+		else
+		{
+			nextEl.className += ' ' + o.toggleHidden;
+		}
+		return false;
+	},
+	getNextSibling : function(el)
+	{
+		var nextSib = el.nextSibling;
+		
+		// hack for Gecko browsers
+		if (nextSib && nextSib.nodeType != 1)
+		{
+			nextSib = nextSib.nextSibling;
+		}
+		return nextSib;
+	},
+	getEl : function(v)
+	{
+		var tg = (v) ? v : event;
+		var el = null;
+		if (tg.target) 
+		{
+			el = (tg.target.nodeType == 3) ? tg.target.parentNode : tg.target;
+		} 
+		else 
+		{ 
+			el = tg.srcElement;
+		}
+		return el;
+	}
+};
+
+// feed it the CSS class names of your choice
+window.onload = function()
+{ 
+	W3C.QA.Validator.CSS.toggle.init('alttoggle', 'closed', 'hidden');
+};
diff --git a/htdocs/style/base.css b/htdocs/style/base.css
new file mode 100644
index 0000000..f46869e
--- /dev/null
+++ b/htdocs/style/base.css
@@ -0,0 +1,499 @@
+/*
+   Base Style Sheet for the W3C CSS validation service
+	based on the one for Markup Validation Service.
+
+   Copyright 2000 W3C (MIT, INRIA, Keio). All Rights Reserved.
+   See http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright
+
+   $Id: base.css,v 1.1 2007-02-20 01:56:44 ot Exp $
+*/
+
+/*                 
+   General styling 
+                   */
+html {
+    background-color: white;
+    color: #11111A;
+}
+
+body {  
+    margin: auto auto;
+    padding-left: 6%;
+    padding-right: 6%;
+    background-color: white;
+    color: #11111A;
+    font-family: Helvetica, "Trebuchet MS", Arial, sans-serif;
+    font-size: 1em; /* setting base font to user's prefered size */
+    min-width: 50em;
+}
+p, pre, dt {     
+    line-height: 130%; 
+    padding-left: 20px;
+}
+
+/*                                                   
+   Main blocks - see also ul.navbar 
+                                                     */
+
+#banner {
+    background-color: white;
+    color: #11111A;
+    background-image: url(../images/header.jpg);
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-position: top right;
+    padding: 4px 0 0 0;
+    height: 55px; 
+    margin-bottom: 0;
+    margin-top: 22px;
+    border: 0;
+
+}
+
+#banner h1 { 
+    vertical-align: middle;
+    font-size: 1.5em;
+    display: inline;
+}
+
+p#tagline {
+    font-size: x-small;
+    padding: 0; 
+    line-height: 100%;
+    margin: 0 0 4em .8em;
+    background-color: white;
+    color: #11111A;
+    clear: both;
+}
+
+#main { 
+    padding: 15px 0;
+    background-color: white;
+    margin: 0;
+    color: #11111A;
+}
+
+.intro {
+  font-style: italic;
+  font-size: smaller;
+  text-align: justify;
+}
+
+/* 
+   Headers
+            */
+
+h1 { 
+    font-family: "Gill Sans", Helvetica, sans-serif;
+    font-weight: bold;
+    font-style: normal;
+    text-decoration: none;
+}
+
+h2 { 
+    color: #777742;
+    background: white;
+    padding: 5px 15px;
+    margin-top: 30px;
+    margin-bottom: 20px;
+    font-size: 1.3em;
+    text-align: center;
+    text-decoration: none;
+    font-family: "Gill Sans", sans-serif;
+}
+
+h3 {
+    background-color: #fff;
+    color: #777742;
+    font-size: 1.1em;
+    padding: 2px 10px;
+    border-bottom: 1px dotted #aaaa77;
+    text-decoration: none;
+    font-family: "Gill Sans", sans-serif;
+} 
+
+h4 {
+    color: #777742;
+    background-color: white;
+    font-weight: 600;
+    font-style: italic;
+    text-decoration: none;
+    font-size: 1.0em;
+    padding-left: 15px;
+    font-family: "Gill Sans", sans-serif;
+}
+
+h5,h6 {
+    background-color: white;
+    color: #11111A;
+    font-family: "Gill Sans", sans-serif;
+    font-weight: normal;
+    padding-left: 15px;
+    }
+/* 
+   General link styling
+                         */
+
+a:link, a:visited {
+    color: #005A9C;
+    background-color: transparent;
+    text-decoration: none;
+
+}
+
+a:hover, a:active {
+    color: #005A9C;
+    background-color: transparent;
+    text-decoration: underline;
+}
+
+
+/* 
+   Other basic styles 
+                      */
+
+/* TODO - add ol, li, td here ? */
+p, dt {
+    margin-left: 15px;
+    margin-right: 25px;
+}
+
+dd {
+    margin-left: 35px;
+    margin-right: 25px;
+}
+
+#news dt {
+    font-weight: bold;
+     margin-top: 1em;
+   }
+
+img { 
+    margin:0;
+    padding: 0;
+    vertical-align: middle;
+    border: 0;
+}
+
+acronym:hover, abbr:hover {
+    cursor: help;
+}
+
+abbr[title], acronym[title], span[title], strong[title] {
+    border-bottom: thin dotted;
+    cursor: help;
+}
+
+pre, code, tt {
+    font-family: "Bitstream Vera Sans Mono", Monaco, "Andale Mono", monospace;
+    line-height: 100%;
+    white-space: pre;
+}
+
+a:link img, a:visited img {
+    border-style: none;
+}
+
+ul.toc {
+    list-style: none;
+}
+
+/*
+   Stuff we don't actually want too visible - or not at all
+                                                            */
+.hideme { display: none; }
+
+
+/*
+   Forms on front page, with tabtastic and toggable extra options
+         */
+#frontforms {
+	margin-left: 12%;
+	margin-right: 12%;
+	
+}
+
+
+
+/* Fieldsets */
+
+/* generic style for form fields */
+fieldset {
+    border: 1px solid #005A9C;
+    background-color: transparent;
+    color: #11111A;
+    margin-bottom: 3em;
+    margin-left: 0;
+}
+fieldset legend {
+    font-weight: bold;
+    padding: .5em;
+}
+fieldset.moreoptions legend {
+    font-weight: normal;
+}
+fieldset p { 
+    margin: 0 0  0.8em 0; 
+    padding: 0; 
+}
+
+fieldset div {
+    padding-top: 1em;
+}
+
+fieldset p.instructions {
+    padding-top: 1em;
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
+fieldset p.submit_button {
+    text-align: right;
+    padding-top: .5em;
+}
+fieldset p.submit_button input {
+    font-weight: bold;
+    color: #005A9C;
+    background: #fff;
+    padding: 0.2em 2em;
+    border: 2px outset #005A9C;
+}
+
+/* home page fieldsets */
+
+.tabset_tabs	{ 
+    margin:0; 
+    padding:0; 
+    list-style-type:none; 
+    position:relative; 
+    z-index:2; 
+    white-space:nowrap; 
+}
+
+.tabset_tabs li	{ 
+    margin:0; 
+    padding:0; 
+    display:inline;
+}
+
+.tabset_tabs a	{  
+    border: 0;
+    border-left: 1px solid #ADDBFE; 
+    text-decoration:none; 
+    padding: 0.8em 0.6em 0 0.6em;
+    background: white;
+    font-weight: bold;
+}
+
+.tabset_tabs a:hover	{ 
+    color:#424242 ! important; 
+    background: #E1F0FD url(../images/sm_gradient_hover.gif) 0 0 repeat-x;
+    text-decoration:none;  
+}
+
+.tabset_tabs a.active, .tabset_tabs a.active:hover { 
+    color:#424242 ! important; 
+    background-color: #8FCFFD !important;
+    background: #8FCFFD url(../images/sm_gradient_active.gif) 0 0 repeat-x;
+    border-color: #ADDBFE; 
+    border-left-width:1px; 
+    cursor:default; 
+    border-bottom: white; 
+    padding-top:0.8em; 
+    padding-bottom:1px; 
+    color: #fffff0 !important; 
+ }
+
+.tabset_tabs li.firstchild a, .tabset_tabs li:first-child a { 
+    border-left: 1px solid white; 
+}
+div#fields {
+    background: #8FCFFD url(../images/lg_gradient.gif) bottom left repeat-x;
+    margin: 0;
+    padding: 0;
+}
+.tabset_content	{ 
+    border: none;
+    position:relative; 
+    z-index:1; 
+    padding:0.5em 1em; 
+    border-left: 1px solid white;
+    padding-bottom: 2em;
+}
+
+input {
+    vertical-align: middle;
+}
+input.reset {
+    text-align: center;
+}
+input.default {
+    text-align: center;
+    font-weight: bold;
+}
+
+
+/* the following from http://www.mindsack.com/toggle/ (c) Kent Brewster */
+
+p.toggle
+{
+        background: transparent url('../images/arrow-down.gif')  0 0 no-repeat;
+        text-indent: 20px;
+        cursor:pointer;
+    color: #005A9C;
+    background-color: transparent;
+    margin-bottom: 0;
+}
+
+p.closed
+{
+        background: transparent url('../images/arrow-right.gif') 0 0 no-repeat !important;
+}
+
+
+.hidden
+{
+        display:none;
+}
+fieldset.moreoptions {
+border-color: white;
+border-style: dotted;
+margin-bottom: 0;
+padding-left: .3em;
+}
+fieldset.moreoptions div, fieldset.moreoptions table {
+margin-top: 0;
+margin-left: .5em;
+font-size: smaller;
+}
+
+fieldset.moreoptions td, fieldset.moreoptions th, fieldset.moreoptions table {
+        border: 0 !important;
+}
+fieldset.moreoptions th {
+	background-color: transparent !important;
+	text-align: left;   
+}
+
+
+fieldset.closed {
+border: 0;
+}
+
+
+
+/* IE6 hack, avoid "leaking" of fiedset background into legend 
+(more hacking in tabtastic.css to make the "ghost" of the legend disappear) */
+* html legend { position:absolute; top: -25em !important; left: -25em !important; }
+* html fieldset{ position: relative; margin-top:0 !important; padding-top:0 !important; }
+
+
+
+/* tables in the documentation */
+
+table {
+	border-collapse: collapse;
+	border-right: 1px solid #ccc;
+}
+td, th{
+	border-top: 0px solid #ddd;
+	border-bottom: 1px solid #ccc;
+	border-left: 1px solid #eee;
+	padding: 6px;
+	border-collapse: collapse;
+}
+th {
+	background-color: #eee;
+	color: #11111A;
+	border-right: 1px solid #ccc;
+}
+
+
+/* 
+	Menu Bar
+			*/
+
+ul.navbar {
+        color: #005A9C;
+	border-top: 1px solid #005A9C;
+	border-bottom: 1px solid #005A9C;
+        background-color: white;
+        margin: 3em 0 0 0;
+        padding: 3px 0 3px 0;
+        line-height: 140%;
+        vertical-align: bottom;
+        font-size: 0.9em;
+        list-style-type: none;
+	text-align: center;
+	font-weight: bold;
+}
+
+ul.navbar { padding-left: 1em; padding-right: 1em}
+ul.navbar li {
+  display: inline;
+}
+
+ul.navbar li a {
+  padding-right: 1.2em;
+  padding-left: 1.2em;
+}
+
+/* 
+	legalese and logos beneath the menu bar
+							*/
+
+p#activity_logos {
+float:left; 
+width: 144px; 
+padding: 8px 0 40px 0; 
+}
+
+p#support_logo {
+float: right; width: 180px; padding: 0; margin-top: 12px; font-size: x-small; text-align:center;
+}
+
+                                                            
+p.copyright {
+  margin-top:     20px;
+  margin-left:    210px;
+  margin-right: 240px;
+  font-size:      x-small;
+  text-align:     justify;
+  text-transform: uppercase;
+  font-family: "Bitstream Vera Sans Mono", monospace;
+  color: #888;
+  background-color: white;
+  line-height:    120%;
+}
+
+p.copyright a {
+  color: #88f;
+   background-color: white;
+  text-decoration: none;
+}
+
+
+
+/* 
+		Jump Bar  - results page - based on navbar styling
+(from markup validator - note used in this design yet)
+								*/
+#jumpbar {
+    margin-top:    -1.5em; 
+    margin-bottom: 1em;
+}
+#jumpbar li {
+        color: #11111A !important;   
+}
+/* language selection bar */
+#lang_choice {
+        position: absolute;
+        display: block;
+        width: 50em; 
+        top: 0px; 
+        text-align: right; 
+        right: 75px; 
+	margin-top: 6px;
+        font-size: x-small;
+	list-style: none;
+}
+#lang_choice li { display: inline; padding-left: .5em;}