<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                version="1.0">

  <xsl:output method="html"
    encoding="iso-8859-1"
    doctype-system="http://www.w3.org/TR/html4/strict.dtd"
    doctype-public="-//W3C//DTD HTML 4.01//EN"
    indent="yes"/>

  <xsl:template match="/images">
    <html lang="en">
      <head>
        <title>The vee.net Bubblegum Crisis image archive</title>
      </head>

      <style type="text/css">
        div.header {
          color: gray;
          background: #404040;
          font: 0.8em sans-serif;
          margin: 0px;
          border: 0px;
          padding: 0.2em;
          width: 100%;
        }

        div.body {
          margin: 10px;
          border: 0px;
          padding: 0.2em;
          width: auto;
        }

        div.footer {
          color: gray;
          background: #404040;
          font: 0.8em sans-serif;
          margin: 0px;
          border: 0px;
          padding: 0.2em;
          width: 100%;
        }

        a.ymmv:link { color: silver }
        a.ymmv:visited { color: silver }
        a.ymmv:hover { color: white }
        a.ymmv:active { color: silver }





        body {
          margin: 0px;
          border: 0px;
          padding: 0px;
          color: black;
          background: #e8f4e7;
        }

        a:link { color: fuchsia  }
        a:visited { color: purple  }
        a:hover { color: red }
        a:active { color: fuchsia }

        h1 {
          font: bold 1.4em sans-serif;
        }

        img {
          border: 0px;
        }

        hr {
          border: 1px solid black;
        }
      </style>

      <body>
        
        <div class="header">
          you are here:
          <a class="ymmv" href="/">web.vee.net</a> /
          <a class="ymmv" href="/media/">media</a> /
          bubblegum
        </div>
        
        <div class="body">
          <p><img src="banner.png" alt="Bubblegum Crisis banner"/></p>

          <h1>The vee.net Bubblegum Crisis image archive</h1>
          
          <p>
            Enjoy.
          </p>
          
          <hr/>
          
          <p>
            Either, <a href="01.html">take the tour</a>
            or go directly to an image using the links below. I recommend
            taking the tour if you haven't visited the archive before.
          </p>

          <div style="float: right; width: 40%">
            <p>
              All righty, this is a new site. Being a standards guru, I'm
              using XHTML and CSS2 for the markup and PNG as the image
              format.
            </p>

            <p>
              Regardless to say, this will mean that this site will look
              like bollocks in older (pre-v5) browsers. So, get your
              Mozilla, your Netscape 6, your IE 5.5 on Windows or your
              IE 5.0 on the Mac. These pages will look like shite otherwise.
            </p>

            <p>
              <a href="mailto:mike@vee.net">email me</a>
              if you care about any of this.
            </p>

            <p>
              Four the curious, have a look at the
              <a href="desc.xml">XML</a> and the XSL for the
              <a href="index.xsl">index</a> and the
              <a href="tour.xsl">tour</a> which is used to
              automagically generate this site.
            </p>
          </div>

          <xsl:for-each select="image">
            <a href="{format-number(position(), '00')}.html">
              <xsl:value-of select="@filename"/>
            </a><br/>
          </xsl:for-each>

        </div>

        <div class="footer">
          Problems with this site?
          <a class="ymmv" href="mailto:webmaster@vee.net">
            Email the webmaster.
          </a>
          Copyright 2000 Michael Gratton. All rights reserved.
        </div>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>




