<div id='registration'>

<h2 class='floatLeft'>{{#admin}}Add user{{/admin}}{{#user}}Register your account{{/user}}</h2>

<div class='clear'></div>

<div class='shadowFrame'>

<form action='' method='post'>

<fieldset>

<div class='fields'>

<div class='field'>

<label>Email address</label> <input type='text' name='email' />

<span class='error'>x</span>

<div class='validationMessage'></div>

</div>

<div class='field'>

<label>First name</label> <input type='text' name='firstName' />

<span class='error'>x</span>

<div class='validationMessage'></div>

</div>

<div class='field'>

<label>Last name</label> <input type='text' name='lastName' />

<span class='error'>x</span>

<div class='validationMessage'></div>

</div>

<div class='field'>

<label>Mobile phone number</label> <input type='text' name='phone' />

<span class='error'>x</span>

<div class='validationMessage'></div>

</div>

<div class="groupField">

<div class="groupFieldInputs floatLeft">

<div class='field'>

<label>Password</label> <input type='password' name='password' value='' />

<span class='error'>x</span>

<div class='validationMessage'></div>

</div>

<div class='field'>

<label>Confirm Password</label>

<input type='password' name='passwordConfirm' value='' />

<span class='error'>x</span>

<div class='validationMessage'></div>

</div>

</div>

<div class="groupFieldErrors floatRight radious">

<div class="groupFieldErrorsRule">

<span class='error'>x</span> <label id="one-capital">At least one capital letter</label>

</div>

<div class="groupFieldErrorsRule">

<span class='error'>x</span> <label id="one-number">At least one number</label>

</div>

<div class="groupFieldErrorsRule">

<span class='error'>x</span> <label id="min-8">At least 8 characters</label>

</div>

<div class="groupFieldErrorsRule">

<span class='error'>x</span> <label id="not-equal-username">Cannot match login</label>

</div>

<div class="groupFieldErrorsRule">

<span class='error'>x</span> <label id="same">Confirmation matches password</label>

</div>

</div>

<div class="clear"></div>

{{#user}}

<p style="width: 400px; margin-left: 220px; margin-bottom: 10px;">The Security Question selected and corresponding Answer provided by you will be used to help identify you in the event that you forget your password.

</p>

<div class="field">

<label>Security question</label>

<select name="securityQuestion"></select>

<span class='error'>x</span>

<div class="validationMessage"></div>

</div>

<div class="field">

<label>Security answer</label> <input type="text" name="securityAnswer"/>

<span class='error'>x</span>

<div class="validationMessage"></div>

</div>

<p style="width: 400px; margin-left: 220px; margin-bottom: 10px;">The Site Image and Phrase selected will be shown to you upon login to confirm that you are logging in to the genuine site</p>

<div id="passphrasePictures" style="text-align: right; margin-right: 0pt;width: 495px; float:left;">

<label>Site Image</label>

<img src="images/passphrase/mail.png" class="pictureSelected" />

<input type="hidden" value="mail.png" />

<img src="images/passphrase/user.png" class="pictureNotSelected" />

<input type="hidden" value="user.png" />

<img src="images/passphrase/report.png" class="pictureNotSelected" />

<input type="hidden" value="report.png" />

<img src="images/passphrase/twitter.png" class="pictureNotSelected" />

<input type="hidden" value="twitter.png" />

</div>

<div class="field">

<label>Site Phrase</label>

<input type="text" name="passphrase"/>

<span class='error'>x</span>

<div class="validationMessage"></div>

</div>

{{/user}}

</div>

{{#user}}

<div class='field'>

<input type='checkbox' class='check' name='terms' value='yes' />

<label class='check'>I agree to the <a href='#' id="termOfUseLink" class='ice' title='terms'>terms of use</a> </label>

<span class='error'>x</span>

<div class='validationMessage validationMessageCheckbox'></div>

</div>

{{/user}}

</div>

<input type='submit' name='register' class='button gray' value='Register' />

</fieldset>

</form>

</div>

</div>

&nbsp;