﻿<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
	<xsl:include href="TourWizard.xslt"/>
	<xsl:output method="xml" indent="yes"/>

	<xsl:template match="/">
		<xsl:variable name="TemplateURL" select="normalize-space(AjaxRequest/TemplateURL)"></xsl:variable>
		<xsl:variable name="HostName" select="normalize-space(AjaxRequest/HostName)"></xsl:variable>
		
		<xsl:call-template name="LifespaceTourWizard">
			<xsl:with-param name="HostName" select="$HostName"></xsl:with-param>
			<xsl:with-param name="SelectedLink">
				<xsl:text>your superpage</xsl:text>
			</xsl:with-param>
		</xsl:call-template>
		<div style="padding-left:40px;padding-right:30px;padding-top:30px;padding-bottom:10px;">
			<div class="padding10">
				<span class="wizardMessageNarrow">
					View, update and
					<span style="color:#288597;">track</span> your goals.
				</span>
				<span class="wizardMessageBold"> All in one place.</span>
			</div>
			<table class="tableMaster padding10" cellpadding="0" cellspacing="0">
				<tr>
					<td width="48%">
						<div>
							<span class="labelWizard verticallyMiddle">
								Your Superpage
							</span>
							<img class="verticallyMiddle" src="{$TemplateURL}Web/Images/Ver_2_0/arrow_small.png" alt=""></img>
						</div>
						<div class="yourSuperpageText paddingBottom20">
							Basically, your dashboard on steroids.
						</div>
						<div class="templateMemoText paddingBottom20">
							Now you can see all your goals on one “Superpage” anytime you want.
							View, update and track your progress with easy checklists, quick-glance
							progress bars, email updates and friendly reminders.
						</div>
						<div>
							<span style="font-family:'PT Sans';">
								Stay focused.
							</span>
							<span class="templateMemoText">
								All your goals are grouped into your lifespaces so you
								can easily see how you're doing in the different areas of your life.
							</span>
						</div>
					</td>
					<td width="52%" class="textRight marginLeft10">
						<img src="{$TemplateURL}Web/Images/Ver_2_0/screenshot_1.png" alt=""></img>
					</td>
				</tr>
			</table>
			<table class="tableMaster padding10" cellpadding="0" cellspacing="0">
				<tr>
					<td width="64%">
						<div>
							<img src="{$TemplateURL}Web/Images/Ver_2_0/goalRowSetup.png" alt=""></img>
						</div>
						<div style="width:55%;">
							<div class="labelWizard">
								See how you’re doing
							</div>
							<div class="templateMemoText">
								Quick glance progress bars and percentages let you see
								in seconds how far you are from finishing your goal.
							</div>
						</div>
					</td>
					<td width="36%" class="paddingLeft10 paddingRight10">
						<div class="labelWizard">
							Your vision
						</div>
						<div class="templateMemoText">
							Why are you setting goals? What will come out of
							achieving them? You can add a vision statement for
							each lifespace so you can constantly be reminded
							why it's so important to stay motivated and finish
							what you started.
						</div>
					</td>
				</tr>
				<tr>
					<td width="64%" rowspan="2" style="padding-top:30px;">
						<img src="{$TemplateURL}Web/Images/Ver_2_0/expansionPanels.png" alt=""></img>
					</td>
					<td style="vertical-align:top;padding-top:30px;">
						<div class="labelWizard">
							Track your progress
						</div>
						<div class="templateMemoText">
							Stay on track! You can easily see everything you've
							completed, where you've fallen behind, and how far
							you have to go with at-a-glance lists and calendar
							views. Simply check off what you've done, update your
							key numbers and watch that progress bar grow.
						</div>
					</td>
				</tr>
				<tr>
					<td style="vertical-align:bottom;">
						<div class="labelWizard" style="padding-top:50px;">
							Make the most of it
						</div>
						<div class="templateMemoText">
							Add detailed notes, write journal entries, upload related
							files, add people to your goals, start discussions, post
							questions, and more.
						</div>
						<div align="center">
							<img align="absmiddle" src="{$TemplateURL}Web/Images/Ver_2_0/featureTools.png" alt=""></img>
						</div>
					</td>
				</tr>
			</table>
			<div align="center" class="margin20">
				<table style="padding-top:30px;">
					<tr>
						<td class="textCenter getStarted boxShadow verticallyMiddle" onclick="DisplaySignUpPopUp('signup','getstarted','');">
							<span>
								Get Started!
							</span>
						</td>
					</tr>
				</table>
			</div>
			<table class="tableMaster">
				<tr>
					<td class="paddingBottom10 marginRight20 textLeft">
						<a href="http://{$HostName}/StartAGoal.aspx">
							<img border="0" class="onMouseOver verticallyMiddle" src="{$TemplateURL}Web/Images/Ver_2_0/BT_back.png" alt=""
								 onmouseover="this.src='{$TemplateURL}Web/Images/Ver_2_0/BT_back_hover.png';"
								 onmouseout="this.src='{$TemplateURL}Web/Images/Ver_2_0/BT_back.png';"></img>
						</a>
					</td>
					<td class="paddingBottom10 marginRight20 textRight">
						<a href="http://{$HostName}/GetConnected.aspx">
							<img border="0" class="onMouseOver verticallyMiddle" src="{$TemplateURL}Web/Images/Ver_2_0/BT_next.png" alt=""
								 onmouseover="this.src='{$TemplateURL}Web/Images/Ver_2_0/BT_next_hover.png';"
								 onmouseout="this.src='{$TemplateURL}Web/Images/Ver_2_0/BT_next.png';"></img>
						</a>
					</td>
				</tr>
			</table>
		</div>
	</xsl:template>

</xsl:stylesheet>
