<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet 
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>

  <xsl:output 
              method="html" 
              encoding="utf-8" 
              doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" 
              doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />



  <!-- Rule for the main node. -->
  
  <xsl:template match="AlbumList">
  
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Album listing</title>
      <style type="text/css">

      .header 
      {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 36px;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        width: 100%;
      }

      .artist 
      {
        font-family: Geneva, Arial, Helvetica, sans-serif; 
        color: #333333;
        font-size: 12px;
      }

      .title 
      {
        font-family: Geneva, Arial, Helvetica, sans-serif; 
        font-size: 14px;
      }

      .year 
      {
        font-family: Arial, Helvetica, sans-serif; 
        color: #666666;
        font-size: 10px; 
      }

      .item 
      {
        width: 190px;
        display: inline-block;
        float: left;
        text-align: center;
        height: 210px;
      }

      </style>

    </head>

    <body>
    
    <div class="header">My album collection:</div>
    <br /><br />

      <xsl:apply-templates/>

    </body>
    </html>

    
  </xsl:template>     
  

  <!-- Album match -->
  

  <xsl:template match="Album">
  
    <div class="item">
    
      <img style="border: 1px solid #CCCCCC" src="{@cover}" width="120px" height="120px" alt="album art" />
      <p>
        <span class="title"><xsl:value-of select="text()" /></span>&#160;<span class="year">(<xsl:value-of select="@year" />)</span><br />
        <span class="artist"><em>by</em> &#160;<xsl:value-of select="../@name" /></span>
      </p>

    </div>      
    
  </xsl:template>


</xsl:stylesheet>
