<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<xsl:strip-space elements="*"/>
	<xsl:output method="html" indent="yes" encoding="utf-8"/>
	
	<xsl:template match="STEP-OVERVIEW" name="STEP">	
		<table cellspacing="0" cellpadding="0" border="0" style="border-width:0px;height:100%;width:100%;border-collapse:collapse;">
			<tr>
				<td align="center" style="border-width:0px;width:20%;" border="0">
					<table class="sb-overview-table-inside" style="cursor: pointer; cursor: hand; height: 100%;" cellspacing="0" cellpadding="0" width="100%" border="0" onclick="">
						<xsl:attribute name="onclick">sbNavigationObject.go('<xsl:value-of select="@ACTION"/>');</xsl:attribute>
						<tr>
							<td style="width: 10px; height: 7px; vertical-align: top;">
								<img src="{$skinPath}/images/over_left_top_corner.gif" style="border-width:1px;height:7px;" />
							</td>
							<td style="background-repeat: repeat-x; background-position: top right;" background="{$skinPath}/images/over_top_line.gif">
								<div style="width: 130px; height: 1px;"><span></span></div>
							</td>
							<td style="width: 10px; vertical-align: top;">
								<img src="{$skinPath}/images/over_right_top_corner.gif" style="border-width:0px;height:7px;" />
							</td>
						</tr>
						<tr>
							<td>
								<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 100%; background-image: url('{$skinPath}/images/over_left_line.gif'); background-repeat: repeat-y;">
									<tr>
										<td>
											<img src="{$skinPath}/images/empty.gif" style="border-width:0px;">
												<xsl:if test="position() != 1">
													<xsl:attribute name="src"><xsl:value-of select="$skinPath"/>/images/over_left_arrow.gif</xsl:attribute>					
												</xsl:if>
											</img>
										</td>
									</tr>
								</table>
							</td>
							<td height="100%" valign="middle" style="background-repeat: no-repeat; background-position: center left;">
								<xsl:if test="position() != 1">
									<xsl:attribute name="background"><xsl:value-of select="$skinPath"/>/images/over_left_end_arrow.gif</xsl:attribute>					
								</xsl:if>
								<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 100%;">
									<tr><td height="15%"></td></tr>
									<tr>							
										<td height="50%" class="sb-overview-title" align="center" valign="top">
											<img style="border-width:0px;" >
												<xsl:attribute name="src"><xsl:value-of select="$skinPath"/>/images/<xsl:value-of select="@ICON"/></xsl:attribute>
											</img>
										</td>							
									</tr>
									<tr>						
										<td height="20%" align="center" valign="top">
											<table cellpadding="0" cellspacing="0" border="0">
												<tr>
													<td><div style="width: 0; height: 80px;"><span></span></div></td>
													<td align="center" valign="top" style="vertical-align: top; padding: 5px;">
														<span class="sb-overview-title"><xsl:value-of select="@TITLE"/></span>
														<div style="width: 0; height: 10px;"><span></span></div>
														<span class="sb-overview-bg sb-text"><xsl:value-of select="@DESCRIPTION"/></span>
													</td>
												</tr>
											</table>
										</td>							
									</tr>
									<tr><td height="15%"></td></tr>
								</table>
							</td>
							<td>
								<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 100%; background-image: url('{$skinPath}/images/over_right_line.gif'); background-repeat: repeat-y;">
									<tr>
										<td>
											<img src="{$skinPath}/images/empty.gif" style="border-width:0px;">
												<xsl:if test="position() != last()">
														<xsl:attribute name="src"><xsl:value-of select="$skinPath"/>/images/over_right_arrow.gif</xsl:attribute>					
												</xsl:if>
											</img>
										</td>										
									</tr>
								</table>
							</td>							
						</tr>
						<tr>
							<td style="vertical-align: bottom;">
								<img src="{$skinPath}/images/over_left_bottom_corner.gif" style="border-width:0px;height:7px;width:10px;" />
							</td>
							<td style="background-repeat: repeat-x; background-position: bottom right;" background="{$skinPath}/images/over_bottom_line.gif"><div style="width: 0; height: 1px;"><span></span></div></td>
							<td style="vertical-align: bottom;">
								<img src="{$skinPath}/images/over_right_bottom_corner.gif" style="border-width:0px;height:7px;width:10px;" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</xsl:template>

	<xsl:template match="DONT-SHOW">
		<table class="sb-overview-table" cellpadding="6" cellspacing="0" style="width:100%">
			<tr>
				<td>
					<table class="sb-overview-table-inside" style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td style="height: 28px;padding-left:3px">
								<input type="checkbox" onchange="sbApplyChangesObject.registerChange();top.sbApplyChangesObject.registerForcedSaving();" value="1" name="{@NAME}" id="{@NAME}"/>
								<label for="{@NAME}">
									<xsl:value-of select="@TITLE"/>
								</label>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</xsl:template>
	
	<xsl:template match="VIEW-CONTENT">
		<table border="0" cellpadding="0" cellspacing="0" style="height: 100%;width:100%" align="center">
			<tr>
				<td style="height: 100%; vertical-align: middle;padding: 5px 6px 5px 6px" align="center" >
					<table cellspacing="0" cellpadding="0" border="0" style="border-width:0px;height:100%;width:100%;border-collapse:collapse;">
						<tr>
							<xsl:for-each select="STEP-OVERVIEW">
								<td align="center" style="border-width:0px;width:20%;">
									<xsl:call-template name="STEP"/>
								</td>
							</xsl:for-each>
						</tr>
					</table> 
				</td>
			</tr>
			<tr>
				<td style="vertical-align: top; padding: 0px 15px 16px 15px">
					<xsl:apply-templates select="DONT-SHOW"/>
				</td>
			</tr>
		</table>
	</xsl:template>
	
</xsl:stylesheet>
