<div id="registration">

<div class="shadowFrame">

<h2 class="floatLeft head">Register your account</h2>

<div class="floatRight" style="padding-top: 4px;">

Already have an account? <a href="#login/" class="button bold orange">Log in</a>

</div>

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

<form action="" method="post" style="margin-top: 15px;">

<fieldset>

<div class="fields">

<div class="field">

<label>Email address</label>

<input type="text" name="email" data-validator="registrationEmail" />

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

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

</div>

<div class="field">

<label>First name</label>

<input type="text" name="givenName" data-validator="name" />

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

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

</div>

<div class="field">

<label>Last name</label>

<input type="text" name="familyName" data-validator="name" />

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

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

</div>

<div class="field">

<label>Mobile phone number</label>

<input type="text" name="phoneNumber" data-validator="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="" data-validator="password" data-validator-event="keyup" />

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

</div>

<div class="field">

<label>Confirm Password</label>

<input type="password" name="passwordConfirm" value="" data-validator="passwordConfirm" data-validator-event="keyup" />

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

</div>

</div>

<div class="groupFieldErrors floatRight radious">

<div class="groupFieldErrorsRule">

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

<label data-for-validator="password">At least one capital letter</label>

</div>

<div class="groupFieldErrorsRule">

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

<label data-for-validator="password">At least one number</label>

</div>

<div class="groupFieldErrorsRule">

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

<label data-for-validator="password">At least 8 characters</label>

</div>

<div class="groupFieldErrorsRule">

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

<label data-for-validator="password">Cannot match login</label>

</div>

<div class="groupFieldErrorsRule">

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

<label data-for-validator="passwordConfirm">Confirmation matches password</label>

</div>

</div>

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

<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" data-validator="required"></select>

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

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

</div>

<div class="field">

<label>Security answer</label>

<input type="text" name="securityAnswer" data-validator="required" />

<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 class="ContentFlow" id="siteImageFlow">

<div class="loadIndicator"><div class="indicator"></div></div>

<div class="flow">

<img class="item" src="images/passphrase/mail.png" data-site-image="mail.png" />

<img class="item" src="images/passphrase/user.png" data-site-image="user.png" />

<img class="item" src="images/passphrase/report.png" data-site-image="report.png" />

<img class="item" src="images/passphrase/twitter.png" data-site-image="twitter.png" />

</div>

<div class="scrollbar"><div class="slider"></div></div>

</div>

<div class="field">

<label>Site Phrase</label>

<input type="text" name="passPhrase" data-validator="passPhrase" />

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

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

</div>

</div>

<div class="field">

<input type="checkbox" class="check" name="terms" value="yes" data-validator="termsOfUse" data-validator-event="click" />

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

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

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

</div>

</div>

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

<div class="inputValidationMessage">Form contains validation errors</div>

</fieldset>

</form>

</div>

</div>

&nbsp;