This template is really all we need:
<xsl:template match="t:tideinfo">
<html>
<head>
<title>Tide Info</title>
<link rel="stylesheet" type="text/css" href="site.css"/>
</head>
<body>
<xsl:variable name="time" select="date:time()"/>
<p class="title"><xsl:value-of select="@today"/> at <xsl:value-of select="$time"/></p>
<div>
<xsl:variable name="current" select="number(substring-before($time,':'))"/>
<xsl:variable name="low" select="number(substring-before(@low-at,':'))"/>
<xsl:choose>
<xsl:when test="($current - $low)=0">
<xsl:attribute name="class">green</xsl:attribute>
<p>Hudson, beach OK!</p>
</xsl:when>
<xsl:when test="($current - $low)=1">
<xsl:attribute name="class">yellow</xsl:attribute>
<p>Hudson, MAYBE.</p>
</xsl:when>
<xsl:when test="($current - $low)= -1">
<xsl:attribute name="class">yellow</xsl:attribute>
<p>Hudson, MAYBE.</p>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="class">red</xsl:attribute>
<p>Hudson, NO beach</p>
</xsl:otherwise>
</xsl:choose>
</div>
<p>Low: <xsl:value-of select="substring-before(@low-at,'-')"/></p>
<p>High: <xsl:value-of select="substring-before(@high-at,'-')"/></p>
</body>
</html>
</xsl:template>
Note how we use the current time in the stylesheet to control the display of red, yellow, or green boxes.
We really need to add durations to get this absolutely correct but that extension function isn't available in this implementation.