Log_In Form HTML

<!--LOG-IN-->
<div id="template">
<div id="customer">

<div class="template_header">
<h2 class="title" style="margin-left:16px;">Sign-In</h2>
</div>

<div id="LoginWindow">
    {% form 'customer_login' %}

  	<center><img src="XXXX" style="margin-bottom:16px;"></center>
	{{ form.errors | default_errors }}

    <div id="login_email" class="clearfix large_form" style="margin-left:16px;">
    <label for="customer_email" class="login" style="color:#333333;">Email Address</label>
    <input type="email" value="" name="customer[email]" id="customer_email" class="large" size="30" style="width:calc(100% - 16px);"/>
    </div>

    {% if form.password_needed %}

    {% comment %}
    Customer Account Login
    {% endcomment %}

    <div id="login_password" class="clearfix large_form" style="margin-left:16px;">
    <label for="customer_password" class="login">Password</label>
    <input type="password" value="" name="customer[password]" id="customer_password" class="large password" size="16" style="width:calc(100% - 16px);" />
    <div id="forgot_password">
    <a href="#" onclick="showRecoverPasswordForm();return false;">Forgot your password?</a>
    </div>
    </div>

    {% endif %}

  	<!--SUBMISSION FOOTER-->
  	<center>
    <div class="action_bottom">
    <input class="btn" type="submit" value="Sign In" />
    <span class="note">or <a href="{{ shop.url }}">Return to Store</a></span>
    </div>
    <div><p>Don't have an account? Register <a href="XXXX">HERE</a></p></div>
  	</center>
	{% endform %}
</div>

  	<!--PASSWORD RESET FORM-->
  	<div id="PassResetWindow">
    <div id="recover-password" style="display:none;">
    <div class="template_header">
    <center><img src="XXXX" style="margin-bottom:16px;"></center>
    <h2 class="title" style="margin-left:16px;">Reset Password</h2>
    <p class="note" style="margin-left:16px;">We will send you an email to reset your password.</p>
    </div>

    {% form 'recover_customer_password' %}
    {{ form.errors | default_errors }}

    <div id="recover_email" class="clearfix large_form" style="margin-left:16px;">
    <label for="email" class="large">Email</label>
    <input type="email" value="" size="30" name="email" id="recover-email" class="large" style="width:calc(100% - 16px);" />
    </div>

    <div class="action_bottom">
    <center>
    <input class="btn" type="submit" value="Submit" />
    <span class="note">or <a href="#" onclick="hideRecoverPasswordForm();return false;">Cancel</a></span>
    </center>
    </div>


    {% endform %}
  	</div>

  	{% comment %}
    Guest Login form for shops with optional customer accounts. This form is displayed only when users click on the checkout link
    on the cart page.
  	{% endcomment %}

	{% if shop.checkout.guest_login %}
	<div id="guest">
	<div class="template_header">
	<h3 class="title">Guest Login</h3>
	</div>
	{% form 'guest_login' %}
	<input class="btn" type="submit" value="Continue as Guest" />
	{% endform %}
	</div>
	{% endif %}
</div>
  </div>
</div>

<script type="text/javascript">
  function showRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'inline-block';
    document.getElementById('LoginWindow').style.display='none';
  }

function hideRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'none';
    document.getElementById('LoginWindow').style.display = 'inline-block';
  }


  if (window.location.hash == '#recover') { showRecoverPasswordForm() }
</script>