<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title>Submarine Notecards, Pins, and Prints</title>

<style type="text/css">
body {
    font-family: Georgia, Times New Roman, Times, Serif;
    background-color: #000066;
    color: #000000;
}
a {
    text-decoration: none;
}

a:hover {
    color:red; text-decoration:underline;
}
.col1 {
    background-color: #8DB6CD;
    vertical-align: top;
    text-align: right;
}
.col2 {
    background-color: #A4D3EE;
    vertical-align: top;
}
.col3 {
    background-color: #B0E2FF;
    vertical-align: top;
}
div.centered {
    text-align: center;
}
div.centered table {
    margin-left: auto; 
    margin-right: auto; 
    text-align: left;
}
</style>

</head>
<body>
<div class="centered">
<div style="font-size: 200%; font-weight: bold; color: #FFE1FF;">Submarine Notecards, Pins, and Prints</div>
<div style="font-size: 150%; color: #FFE1FF;">by Lovelyn Voorhees</div>
<br />

<table width="600" border="0" cellpadding="6" cellspacing="1">

<xsl:for-each select="submarine_notecards_pins_prints/item">
  <tr> 
    <td class="col1" rowspan="6"><xsl:apply-templates select="image"/></td>
    <td class="col2">Name:</td>
    <td class="col3" width="64%"><b><xsl:value-of select="name"/></b></td>
  </tr>

  <tr> 
    <td class="col2">Category:</td>
    <td class="col3"><xsl:value-of select="category"/></td>
  </tr>

  <tr> 
    <td class="col2">Description:</td>
    <td class="col3"><xsl:value-of select="description"/></td>
  </tr>

  <tr> 
    <td class="col2">Dimensions:</td>
    <td class="col3"><xsl:value-of select="dimensions"/></td>
  </tr>

  <tr> 
    <td class="col2">Price:</td>
    <td class="col3"><xsl:value-of select="price"/>, <xsl:value-of select="unit"/></td>
  </tr>

  <tr> 
    <td class="col2">More Info:</td>
    <td class="col3"><xsl:apply-templates select="webpage/html:a"/></td>
  </tr>

  <tr>
    <td colspan="3"><br /></td>
  </tr>

</xsl:for-each>

</table>
</div>

</body>
</html>
</xsl:template>

<xsl:template match="image">
    <img>
        <xsl:attribute name="src">
            <xsl:value-of select="location"/>
        </xsl:attribute>
        <xsl:attribute name="width">
            <xsl:value-of select="width"/>
        </xsl:attribute>
        <xsl:attribute name="height">
            <xsl:value-of select="height"/>
        </xsl:attribute>
    </img>
</xsl:template>

<xsl:template match="webpage/html:a">
    <a>
        <xsl:attribute name="href">
            <xsl:value-of select="./@href"/>
        </xsl:attribute>
        Webpage Link
    </a>
</xsl:template>

</xsl:stylesheet>
