<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" indent="yes" encoding="utf-8"/>
<xsl:template match="/">
	<html><head><title>Famous Bridges</title></head>
	<body bgcolor="#f4f4f4">
	<div style="color:#8e2323; font-family:Arial, sans-serif;">
	<h1 align="center">Famous Bridges</h1>
	</div>
	<xsl:for-each select="famous_bridges/bridge">
		<p align="center">
			<xsl:apply-templates select="picture"/>
		</p>

		<table border="2" font-size="12pt" align="center" text-align="center" font-family="Times new roman" width="90%" cellspacing="2" cellpadding="2">
			<tr style="background-color:#008b8b; color:#eaeaae; align:center; cellspacing:2;">
				<th>Bridge</th>
				<th>Type</th>
				<th>Location</th>
				<th>Length (m)</th>
				<th>Year Completed</th>
			</tr>
				<tr style="background-color:#fffff0; color:#23238e; text-align:center;">
				<td style="color:#8e2323;"><b><xsl:apply-templates select="name"/></b></td>
				<td><xsl:apply-templates select="type"/></td>
				<td><xsl:value-of select="location"/></td>
				<td><xsl:value-of select="length/total_length[@unit='meter']"/></td>
				<td><xsl:value-of select="completion_year"/></td>
			</tr>
			<tr style="background-color:#008b8b; color:#eaeaae;">
				<th>Designers</th>
				<th>Materials</th>
				<th colspan="3">Facts</th>
			</tr>
			<tr style="background-color:#fffff0; color:#23238e; text-align:center;">
				<td><xsl:apply-templates select="designer"/></td>
				<td><xsl:apply-templates select="construction_materials"/></td>
				<xsl:for-each select="facts/fact">
				<td style="font-size:9pt;"><xsl:value-of select="."/></td>
				</xsl:for-each>
			</tr>
		</table>
		</xsl:for-each>
	</body>
</html>
</xsl:template>
<xsl:template match="picture">
	<img>
	<xsl:apply-templates select="@*"/>
	</img>
</xsl:template>
<xsl:template match="picture/@filename">
	<xsl:attribute name="src"><xsl:value-of select="."/>
	</xsl:attribute>
</xsl:template>
<xsl:template match="picture/@x">
	<xsl:attribute name="x">
		<xsl:value-of select="ceiling(.div 2)"/>
	</xsl:attribute>
</xsl:template>
<xsl:template match="picture/@y">
	<xsl:attribute name="y">
		<xsl:value-of select="ceiling(.div 2)"/>
	</xsl:attribute>
</xsl:template>
</xsl:stylesheet>
