<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                version="1.0">
  <xsl:output method="html" />

  <xsl:template match="rss/channel">
    <html>
      <head>
	<title><xsl:value-of select="title" /></title>
	<style type="text/css">
	  .item { border: 2px solid black; margin: 1em; }
	  .title { background-color: #eeeeee; margin: 0; padding: 0.25em; }
	  .category { margin: 0.5em; font-weight: bolder; font-size: smaller; }
	  .description { margin: 0.5em; }
	  .pubDate { text-align: right; margin: 0.5em;
                     font-size: smaller; color: #7f7f7f; }
	</style>
	<xsl:if test="system-property('xsl:vendor')='Transformiix'">
	  <!-- Mozilla ignores disable-output-escaping -->
	  <script type="text/javascript">
	    window.onload = function() {
	        var elements = document.getElementsByTagName('div');
	        for (var i = 0; i &lt; elements.length; i++) {
	            var el = elements[i];
	            if (el.className == 'description') {
	                el.innerHTML = el.firstChild.data;
	            }
                }
	    };
	  </script>
	</xsl:if>
      </head>
      <body>
	
	<h1><xsl:value-of select="title" /></h1>

	<xsl:apply-templates select="description" />

	<xsl:apply-templates select="item" />
      </body>
    </html>
  </xsl:template>

  <xsl:template match="item">
    <div class="item">
      <h2 class="title"><xsl:value-of select="title" /></h2>
      <xsl:if test="category">
	<div class="category">
	  Category:
	  <xsl:value-of select="category" />
     	</div>
      </xsl:if>
      <xsl:apply-templates select="description" />
      <div class="pubDate">
	Published
	<xsl:value-of select="pubDate" />
      </div>
    </div>
  </xsl:template>

  <xsl:template match="description">
    <div class="description">
      <xsl:value-of select="." disable-output-escaping="yes" />
    </div>
  </xsl:template>

</xsl:stylesheet>
