<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp "&#160;">
]>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns="http://www.w3.org/TR/xhtml1/strict">

<xsl:output method="html"/>

<xsl:template match="/invisiclues">
<html><head><title>InvisiClues for the PXC Card Catalog Trail</title>
<style>
.body {
    font-family: sans-serif;
}

.questionQ {
    font-size:150%;
    font-weight:bold;
}

.question {
    font-size:100%;
    font-weight:bold;
}

.answer {
    
}

table.answer {
    margin: 2px;
    border: solid #cccccc 2px;
}

td.answer {
    background-color:#eeeeee;
}

</style>
<script language="JavaScript">

function getStyleObject(objectId) {
    // checkW3C DOM, then MSIE 4, then NN 4.
    //
    if(document.getElementById &#38;&#38; document.getElementById(objectId)) {
	   return document.getElementById(objectId).style;
    } else if (document.all &#38;&#38; document.all(objectId)) {  
	   return document.all(objectId).style;
    } else if (document.layers &#38;&#38; document.layers[objectId]) { 
	   return document.layers[objectId];
    } else {
	   return false;
    }
}

function toggleObjectVisibility(objectId) {
    // first get the object's stylesheet
    var styleObject = getStyleObject(objectId);

    // then if we find a stylesheet, set its visibility
    // as requested
    //
    if (styleObject) {
        if (styleObject.visibility == 'hidden') {
            styleObject.visibility = 'visible';
            styleObject.position = 'relative';
        } else {
            styleObject.visibility = 'hidden';
            styleObject.position = 'absolute';
        }
        return true;
    } else {
        return false;
    }
}


</script>
</head><body>
    <xsl:apply-templates select="header" />
    <xsl:apply-templates select="question" />
    <xsl:apply-templates select="footer" />
</body></html>
</xsl:template>

<xsl:template match="header">
    <xsl:copy-of select="*" />
</xsl:template>

<xsl:template match="footer">
    <xsl:copy-of select="*" />
</xsl:template>

<xsl:template match="question">
    <span class="questionQ">Q:&nbsp;</span><span class="question"><xsl:value-of select="questionText/text()" /></span>
    <xsl:apply-templates select="answer[1]" />
    <br />
</xsl:template>


<xsl:template match="answer">
    <table border="0" cellspacing="0" cellpadding="0" class="answer"><tr>
        <td valign="top"><a href="#"><xsl:attribute name="onclick">toggleObjectVisibility('id<xsl:value-of select="count(current()/preceding::answer)" />'); return false;</xsl:attribute>[&gt;&gt;]</a>&nbsp;</td>
        <td valign="top" id="{concat('id', count(current()/preceding::answer))}" style="visibility: hidden; position:absolute;"><div >
            <xsl:copy-of select="." />

            <xsl:apply-templates select="following-sibling::answer[position()=1]" />
        </div></td>
    </tr></table>
</xsl:template>


</xsl:stylesheet>
