futzing with new ideas for general site style

7 files changed, 225 insertions, 388 deletions

diff --git a/htdocs/base.css b/htdocs/base.css
index ff84cd1..29fa0f1 100644
--- a/htdocs/base.css
+++ b/htdocs/base.css
@@ -1,341 +1,251 @@
 /*
    Base Style Sheet for the W3C Markup Validation Service.
 
-   Copyright 2000 W3C (MIT, INRIA, Keio). All Rights Reserved.
+   Copyright 2000-2005 W3C (MIT, INRIA, Keio). All Rights Reserved.
    See http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright
 
-   $Id: base.css,v 1.34 2004-11-16 05:19:49 ot Exp $
+   $Id: base.css,v 1.35 2005-01-04 08:37:53 ot Exp $
 */
 
 @import url(results.css); /* CSS for validation results. */
 @import url(navbar.css);  /* CSS for navigation menu. */
 @import url(tips.css);    /* CSS for Quality Tips. */
 @import url(docs.css);    /* CSS for the Documentation. */
-/* the print CSS is at the end of this document, imported after everything else */
 
 
-html, body {
-  line-height:     120%;
-  color:           black;
-  background:      white;
-  font-weight:     normal;
-  font-family: "Bitstream Vera Sans", sans-serif;
-  font-style:      normal;
-  text-decoration: none;
-  margin:  0;
-  padding: 0;
-  border:  0;
+/*                 
+   General styling 
+                   */
+html {
+    background-image:url(images/bg1.gif);
 }
 
-div#main {
-  padding-top: 1em;
-/*   margin-right: 7.6em; */ /* no need for this without the righthand bar */
-  margin: 0;
+body {  
+    margin: auto auto;
+    background-image: url(http://www.w3.org/Icons/logo-WMVS.png);
+    background-attachment: fixed;
+    background-position: 0 20px;
+    background-repeat: no-repeat;
+    color: #33333E;
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 12px;
 }
 
-div#main p, div#main dt {
-  padding-left: 1em;
-  padding-right: 1em;
-}
+/*                                                   
+   Main blocks - see also #menu styled in navbar.css 
+                                                     */
 
-dt {
-  margin-top: 1em;
+#banner {
+    background: white;
+    background-image: url(images/header.jpg);
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-position: top right;
+    padding: 0;
+    margin-top: 20px;
+    margin-left: 72px;
+    margin-right: 0;
+    margin-bottom: 0;
+    height: 50px;
+    width: 780px;
+    border-bottom: 0;
+    border-top: 1px solid #053188;
+    border-left: 1px solid #053188;
+    border-right: 1px solid #053188;
+}
+
+#banner h1 { 
+    height: 50px;
+    vertical-align: middle;
+    font-size: 20px;
+    display: inline;
+}
+
+#main, address { 
+    margin: 0;
+    margin-left: 72px;
+    width: 750px;
+    padding: 15px;
+    background: white;
+    border: 1px solid #053188;
 }
 
-/* Fieldsets in general */
-fieldset {
-  background: #FCFCFC;
-  border: 1px dotted #053188;
-  margin-left:   1em;
-  margin-right:  1em;
-  padding:       1em;
-}
+address {
+    background-color: #eee;
+    background-image: url(images/footer.jpg);
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-position: right;
+    height:50px;
+    padding-top: 0;
+    padding-bottom: 0;
+    clear: right;
 
-fieldset legend {
-  color: #053188;
-  background: #FFF;
-  font-variant: small-caps;
-  padding: .1ex .5ex;
-  border-right: 1px solid gray;
-  border-bottom: 1px solid gray;
-  font-weight: bold;
 }
 
-
+#main {
+    border-bottom: 0;
+}
 
 .intro {
   font-style: italic;
   text-align: justify;
 }
 
-a:link, a:visited {
-  color: blue;
-}
+/* 
+   Headers
+            */
 
-a:hover {
-  color: blue;
-  background-color: #eee;
+h1 { 
+    color: #053188;
+    font-family: "Bitstream Vera Sans", Helvetica, Arial, sans-serif;
+    font-size-adjust: .53;
+    font-weight: bold;
+    font-style: normal;
+    text-decoration: none;
+    font-size: 18px;
 }
 
-a:active {
-  color: red;
-  background-color: yellow;
+h2 { 
+    color: #C65831;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    margin-left: -10px;
+    text-decoration: none;
 }
 
-acronym:hover, abbr:hover {cursor: help}
-abbr[title], acronym[title], span[title], strong[title] {
-  border-bottom: thin dotted;
-  cursor: help;
-}
+h3 {
+    color: #C65831;
+    font-size: 12px;
+    text-decoration: none;
+} 
 
-pre, code, tt {
-  font-family: "Bitstream Vera Sans Mono", monospace;
-  line-height: 100%;
-  white-space: pre;
+h4 {
+    color: #C65831;
+    font-weight: 600;
+    font-style: normal;
+    text-decoration: underline;
+    font-size: 10px;
 }
 
-a:link img, a:visited img {border-style: none}
-a img {color: black} /* The only way to hide the border in NS 4.x */
+/* 
+   General link styling
+                         */
 
-ul.toc {
-  list-style: none;
-}
-
-ol li {
-  padding: .1em;
-}
+a:link, a:visited {
+    color: #00209E;
+    text-decoration: none;
 
-div.issue {
-  padding: 0.5em;
-  border: none;
-  margin-right: 5%;
 }
 
-.hideme {display: none}
+a:hover, a:active {
+  color: #C65831;
+  text-decoration: underline;
 
-#Notice {
-  border: solid;
-  margin: .2em;
-  padding: .5em;
-  text-align: justify;
 }
 
-/* dt a {color: black} */ /* These are usually targets and not links */
-h1 a {color: black} /* These are usually targets and not links */
-h2 a {color: black} /* These are usually targets and not links */
-h3 a {color: black} /* These are usually targets and not links */
-
-img {vertical-align: middle}
 
-a.formoptions {text-decoration: none; color: black; border-bottom: 1px dotted #0000DD}
+/* 
+   Other basic styles 
+                      */
 
-/* done vs. tbc for the TODO list */
-.done { text-decoration: line-through; }
+/* TODO - add ol, li, td here ? */
+p {
 
-address img {
-  float: right;
-  width: 88px;
 }
 
-address {
-  padding-right:    1em;
-  padding-left:     1em;
-  margin-top:       3em;
-  border-top:       1px solid black;
-  background-color: #eee;
-  clear:            right;
+img { 
+    margin:0;
+    padding: 0;
+    vertical-align: middle;
+    border: 0;
 }
 
-address {
-  background-image: url(images/footer.jpg);
-  background-repeat: no-repeat;
-  background-attachment: scroll;
-  height: 50px;
-  background-position: center;
+acronym:hover, abbr:hover {
+    cursor: help;
 }
 
-p.copyright {
-  margin-top:     5em;
-  padding-top:    .5em;
-  font-size:      xx-small;
-  max-width:      85ex;
-  text-align:     justify;
-  text-transform: uppercase;
-  margin-left:    auto;
-  margin-right:   auto;
-  font-family: "Bitstream Vera Sans Mono", monospace;
-  color:          #888;
-  line-height:    120%;
-}
-
-p.copyright a {
-  color: #88f;
-  text-decoration: none;
-}
-
-.stb {clear: left}
-
-div.colophon {
-  margin-left: 2em;
-  font-style: italic;
-}
-
-div.colophon em {
-  font-style: normal;
-}
-
-/* Various header(ish) things. Definitions cribbed from the CORE Styles. */
-h1 {
-  font-family: "Bitstream Vera Sans", sans-serif;
-  font-size-adjust: .53;
-  font-size: 2em;
-  font-weight: bold;
-  font-style: normal;
-  text-decoration: none;
-  color: #053188;
+abbr[title], acronym[title], span[title], strong[title] {
+    border-bottom: thin dotted;
+    cursor: help;
 }
-#banner h1 {font-size: 1.3em;
-display: inline}
 
-#banner {
-background-image: url(images/header.jpg); /* only jpg version - png too big! */
-background-repeat: no-repeat;
-background-attachment: scroll;
-height: 50px;
-background-position: right;
-margin:0; padding:0;
-border-bottom: 1px solid black;
+pre, code, tt {
+    font-family: "Bitstream Vera Sans Mono", monospace;
+    line-height: 100%;
+    white-space: pre;
 }
 
-#banner #versioninfo {
-  font-size: small;
-  color: #053188;
-  
+a:link img, a:visited img {
+    border-style: none;
 }
 
-h1#title {
-/*  background-color: #eee; 
-  border-bottom: 1px solid black; 
-  padding: .25em;*/
-  padding: 0;
-  margin: 0;
-  color: #053188;
-}
+a img {color: black} /* The only way to hide the border in NS 4.x */
 
-/* Used for beta releases. */
-#versioninfo em {
-  color: red;
+ul.toc {
+    list-style: none;
 }
 
-h1, h2, h3, h4, h5, h6, dt {
-  font-family: "Bitstream Vera Sans", sans-serif;
-  font-size-adjust: .53;
-  font-variant: small-caps;
-}
 
-h2 {
-  font-size: 1.5em;
-  text-align: center;
-  font-weight: bold;
-  font-style: normal;
-  text-decoration: none;
-  margin-top : 2em;
-  margin-bottom : 1em;
-  line-height: 120%;  
-}
 
-h3 {
-  font-size: 1.3em;
-  font-weight: normal;
-  font-style: normal;
-  text-decoration: none;
-  background-color: #eee;
-  text-indent: 2em;
-  padding: .2em;
-  border-top: 1px dotted black;
-}
 
-h4 {
-  font-size: 1.1em;
-  font-weight: 600;
-  font-style: normal;
-  text-decoration: underline;
+/*
+   Stuff we don't actually want too visible - or not at all
+                                                            */
+                                                            
+p.copyright {
+  margin-top:     20px;
+  width: 500px;
+  font-size:      9px;
+  text-align:     justify;
+  text-transform: uppercase;
+  margin-left:    222px;
+  font-family: "Bitstream Vera Sans Mono", monospace;
+  color:          #888;
+  line-height:    120%;
 }
 
-h5, dt {
-  font-size: 1em;
-  font-weight: bold;
-  font-style: normal;
+p.copyright a {
+  color: #88f;
   text-decoration: none;
-  text-indent: .5em;
-  margin:0;
 }
 
-h6 {
-  font-size: 1em;
-  font-style: italic;
-  text-decoration: none;
-  color: #666;
-  text-indent: 1em;
-  margin:0;
-}
 
-/* comma tools table */
+.hideme { display: none; }
 
-td.comma-desc {
-  background: #ffeecc;
-  border : 1px solid black;
-  font-family: "Bitstream Vera Sans", sans-serif
-}
 
-td.comma-shortcut {
-  background: #e7e7ff; 
-  border : 1px solid black;
-  font-family: "Bitstream Vera Sans Mono", monospace;
-}
+/*
+   Forms 
+         */
 
-td.comma-tool {
-  background: #e7e7ff;
-  border: 1px solid black;
-}
 
-kbd {
-  font-weight: bold;
+/* Fieldsets */
+fieldset {
+    background: #FCFCFC;
+    border: 1px dotted #053188;
 }
 
-.shout {
-  background: yellow;
-  border: .5ex dotted black;
-  padding: 1em;
+fieldset legend {
+    color: #C65831;
+    padding: .1ex .5ex;
+    border-right: 1px solid gray;
+    border-bottom: 1px solid gray;
+    font-weight: bold;
 }
 
-.shout strong {
-  display: block;
-  color: red;
-}
 
 input {
-  vertical-align: middle;
+    vertical-align: middle;
 }
 
 input.reset {
-  text-align: center;
-  font-family: "Bitstream Vera Sans Mono", monospace;
+    text-align: center;
 }
 
 input.default {
-  text-align: center;
-  font-weight: bold;
-  font-family: "Bitstream Vera Sans Mono", monospace;
-}
-
-div#recent {
-  margin-right: 5em;
-}
-
-div#recent dt {
-  margin-top: 1em;
-}
-
-@import url(print.css) print;
-
+    text-align: center;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/htdocs/docs.css b/htdocs/docs.css
index 6d0c2de..215b582 100644
--- a/htdocs/docs.css
+++ b/htdocs/docs.css
@@ -4,7 +4,7 @@
    Copyright 2003 W3C (MIT, INRIA, Keio). All Rights Reserved.
    See <http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright>
  
-   $Id: docs.css,v 1.2 2004-05-09 15:56:49 link Exp $
+   $Id: docs.css,v 1.3 2005-01-04 08:37:53 ot Exp $
 */
 
 /*
@@ -32,6 +32,10 @@ margin-right: 1em;
 /* documentation - table of contents */
 #toc {
   font-size: .8em;
+  border-top: 1px dashed #053188;
+  border-bottom: 1px dashed #053188;
+  margin-right: -15px;
+  margin-left: -15px;
 }
 
 .doc div#toc ul {
diff --git a/htdocs/header.html b/htdocs/header.html
index 0cc60fd..e03d0a8 100755
--- a/htdocs/header.html
+++ b/htdocs/header.html
@@ -12,13 +12,13 @@
     <meta name="description" content="W3C's easy-to-use
       HTML validation service, based on an SGML parser." />
     <meta name="revision" content="<!--#echo var="revision" -->" />
-    <!-- SSI Template Version: $Id: header.html,v 1.29 2004-09-15 18:20:28 ville Exp $ -->
+    <!-- SSI Template Version: $Id: header.html,v 1.30 2005-01-04 08:37:53 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" /></a>
+	<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.7.0-dev</span>
diff --git a/htdocs/images/bg1.gif b/htdocs/images/bg1.gif
new file mode 100644
index 0000000..70b3cff
--- /dev/null
+++ b/htdocs/images/bg1.gif
diff --git a/htdocs/images/bg2.gif b/htdocs/images/bg2.gif
new file mode 100644
index 0000000..20af936
--- /dev/null
+++ b/htdocs/images/bg2.gif
diff --git a/htdocs/navbar.css b/htdocs/navbar.css
index 3c952b4..d76d632 100644
--- a/htdocs/navbar.css
+++ b/htdocs/navbar.css
@@ -4,129 +4,55 @@
    Copyright 2000-2004 W3C (MIT, INRIA, Keio). All Rights Reserved.
    See http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright
 
-   $Id: navbar.css,v 1.10 2004-09-01 22:00:40 link Exp $
+   $Id: navbar.css,v 1.11 2005-01-04 08:37:53 ot Exp $
 */
 
+
 #menu {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  height: 1.5em;
-  background-color: #eee;
-  border-bottom: solid 1px black;
+        background-color: #053188;
+        background-image:url(images/bg2.gif);
+        width: 780px;
+        margin: 0;
+        padding: 0;
+        margin-left: 72px;
+        padding-top:8px;
+        vertical-align: bottom;
+        font-size: 10px;
+        height: 20px;
+        list-style-type: none;
+        border-left: 1px solid #053188;
+        border-right: 1px solid #053188;
+       
 }
 
 #menu li {
   display: inline;
-  padding: 0;
-  margin: 0;
-}
-
-#menu li a:link, #menu li a:visited {
-  text-decoration: none;
-  text-align: center;
-  float: left;
-  display: block;
-  width: 8em;
-  padding: 2px 0px;
-  margin: 0;
-  background-color: #eee;
-  color: #053188;
-  font-size: smaller;
-  font-variant: small-caps;
-  border-right: solid 1px #bbb;
-  border-bottom: solid 1px black;
-}
-
-#menu li a#selected:link, #menu li a#selected:visited {
-  text-decoration: underline;
-  background-color: #fff;
-  color: #053188;
-}
-
-#menu li a:hover {
-  text-decoration: underline;
-  background-color: #fff;
-  color: #053188;
-}
-
-#menu li a:active {
-  background-color: #fff;
-  color: #053188;
-  border-right: solid 1px #ddd;
 }
 
+#menu li a {
 
-/* link bar  - all pages*/
-
-#misclinks {
-  float:            right;
-  width: 8em;
-  text-decoration:  none;
-  padding:          1ex;
-  background-color: #eee;
-  border-left:     1px solid black;
-  border-bottom:    1px solid black;
-  margin-top:       -1px; 
-  font-size:        smaller;
-}
-
-#misclinks dt {
-  text-align: center;
-  background: #ddd;
-  color:      #053188;
-  font-variant: small-caps;
-}
-#misclinks dd {
-  text-align: right;
-  margin: 0;
-  padding-bottom: 2ex;
-}
-
-#misclinks ul {margin: 0; padding: 0;}
-#misclinks li {
-  list-style-type: none;
-  text-align: right;
-}
-#misclinks ul li a {
-  display: block;
-}
-
-#misclinks li a:link, #misclinks li a:visited, div.jumpbar li a:link, div.jumpbar li a:visited {
-  text-decoration: none;
-  display: block;
-  padding: 1px 0px;
-  margin: 0;
-  background-color: #eee;
-  color: #053188;
-  font-size: smaller;
+  height: 20px;
+  padding-right: 20px;
+  padding-left: 25px;
+  color: white;
 }
 
-#misclinks li a:hover {
-  text-decoration: underline;
-  background-color: #fff;
-  color: #053188;
-}
-
-#misclinks li a#selected:link, div.jumpbar li a#selected:visited {
-  text-decoration: underline;
-}
 
 /* Jump Bar  - results page*/
 
 .jumpbar {
-  float:            right;
-  width: 8em;
-/*  margin-right: -.4em; */ /* FIXME - find the exact value - */
-  text-align:       left;
-  text-decoration:  none;
-  padding:          1ex;
-  background-color: #eee;
-  border-left:     1px solid black;
-  border-bottom:    1px solid black;
-  margin-top:       -1.3em; 
-  font-size:        smaller;
-  font-weight:      bold;
+    background-color: white;
+    float:            right;
+    width: 8em;
+    margin-right: -15px; 
+    text-align:       left;
+    text-decoration:  none;
+    padding:          1ex;
+    border-left:     1px solid black;
+    border-bottom:    1px solid black;
+    margin-top:       -15px; 
+    font-size: 10px;
+    font-weight:      bold;
 }
 
 .jumpbar ul {
@@ -139,8 +65,12 @@
   text-align: right;
 }
 
+div.jumpbar li a {
+  height: 20px;
+  padding-right: 20px;
+  padding-left: 25px;
+}
 div.jumpbar li a:hover {
-  background: #fff;
   text-decoration: underline;
 }
 
@@ -151,10 +81,8 @@ div.jumpbar li a:hover {
   width: 8em;
   padding: 2px 0px;
   margin: 0;
-  background-color: #eee;
-  color: #053188;
   font-size: smaller;
-  border-top: dotted 1px black;
+  border-top: dotted 1px #053188;
 }
 
 .jumpbar li a#selected:link, .jumpbar li a#selected:visited {
diff --git a/htdocs/results.css b/htdocs/results.css
index ae13845..f97b5dd 100644
--- a/htdocs/results.css
+++ b/htdocs/results.css
@@ -1,11 +1,11 @@
 /* style sheet for the validator's results page          */
-/* $Id: results.css,v 1.20 2004-11-15 01:24:21 ot Exp $ */
+/* $Id: results.css,v 1.21 2005-01-04 08:37:53 ot Exp $ */
 
 .input {
   color: black;
   background-color: #eee;
   font-family: "Bitstream Vera Sans Mono", monospace;
-  font-size: small;
+  font-size: 10px;
 }
 
 /* Various Bits of the Table Header */
@@ -19,6 +19,7 @@ fieldset div.moreinfo {
 fieldset div.moreinfo p {
   background: #FFF;
   border: 1px solid #CCC;
+  padding: 10px;
   text-align: justify;
   font-size: smaller;
 }
@@ -54,8 +55,6 @@ fieldset table.header {
 
 .ve p {
   line-height: 100%;
-  font-style: italic;
-  font-size: small;
   margin: 1ex 5em 1ex 1em;
   text-align: justify;
 }
@@ -222,10 +221,20 @@ td {
   border: solid black 1px;
 }
 
-h2.valid {
-  text-align: center;
+div#result {
+  clear: left;
+  padding-top: 1em;
+}
+
+h2.valid, h2.invalid {
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: -15px !important;
+    margin-right: -15px !important;
 }
 
+
 .valid {
   background:		#053188;
   color:		white;
@@ -263,20 +272,6 @@ h2.valid {
   background: yellow;
 }
 
-div#result {
-  clear: left;
-  padding-top: 1em;
-}
-
-h2.valid {
-margin-top: 0;
-margin-bottom: 0;
-}
-h2.invalid {
-  text-align: center;
-  margin-top: 0;
-  margin-bottom: 0;
-}
 
 .invalid {
   background:		#A51C1C;