{{SHOPCART_CSS}}

<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">

$(function() {
	$(".sc_mobi_nav_trigger").click(function() {
		
		$(".sc_mobi_nav_container").toggleClass("sc_mobi_showme");
	});
});
	
</script>

<div id="sc_outer_container">

<!-- ##################################################################################################################### -->

<div id="left_column_">
<div class="sc_cart_summary">
    		Cart - {{MINI_CART}}{{TOTAL_PRODUCTS_COUNT}} Items - <strong>${{SUBTOTAL_LINE}}{{MINI_CART_SUBTOTAL_FORMATTED}}{{/SUBTOTAL_LINE}}</strong>{{/MINI_CART}}
    		
    		<a href="{{SELF_LINK}}?command=viewCart" class="sc_view_cart_button sc_filled_button sc_filled_color">View Cart</a>
    		</div> 
<!-- ##################################################################################################################### -->
<div class="sc_mobi_nav_trigger"><a href="javascript:void(0);">Open/Close Navigation</a></div>
    	<div class="sc_mobi_nav_container">
{{MENU}}
    
    <div id="left_column_menu_level_box">
    	<div id="left_column_category_headers">Product Navigation</div>
        {{LEVEL_1}}
        {{CURRENT_CATEGORY_DATA}}
		{{STANDARD}}
        <div id="left_column_category_content"><a href="{{CATEGORY_LINK}}">{{CATEGORY_NAME}}</a></div>
        {{/STANDARD}}
		{{CURRENT}}
        <div id="left_column_category_content"><a href="{{CATEGORY_LINK}}">{{CATEGORY_NAME}}</a></div>
        {{/CURRENT}}
		{{/CURRENT_CATEGORY_DATA}}
		{{/LEVEL_1}}
    </div>
    
{{/MENU}}
</div>
<!-- LEFT COLUMN CLOSING DIV ########################################################################################## -->

</div>

<!-- ##################################################################################################################### -->

<div id="sc_right_column_">

<!-- ##################################################################################################################### -->

<div id="sc_page_top_information_outer_container">
  
  	
  
    <div id="sc_page_top_breadcrumb"><a href="{{SELF_LINK}}">Home</a> /Shopping Cart / Billing &amp; Shipping /<strong> Payment Information </strong></div>
  
</div>
<div class="clear"></div>
                            
<!-- ################################################################################################################### -->


<SCRIPT>
function checkform()
{
	var msg="";
	
	if(document.billing.CC_Name.value=="") { msg = msg + "Please enter your name, as it appears on your card.\n"; }
	if(document.billing.CC_Number.value=="") { msg = msg + "Please enter your card number, without spaces or dashes.\n"; }
	if(document.billing.Month.value=="") { msg = msg + "Please enter the expiry month for your card.\n"; }
	if(document.billing.Year.value=="") { msg = msg + "Please enter the expiry year for your card.\n"; }
	if(document.billing.AVSREQ.value=="") { msg = msg + "Please enter the CSC/AVSREQ number for your card.\n"; }
	
	if(document.billing.Street.value=="") { msg = msg + "Please enter your billing street address.\n"; }
	if(document.billing.City.value=="") { msg = msg + "Please enter your billing city.\n"; }
	if(document.billing.State.value=="") { msg = msg + "Please enter your billing state.\n"; }
	if(document.billing.Zip.value=="") { msg = msg + "Please enter your billing Zip code.\n"; }
	
	// Javascript email validation.
	if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.billing.Email.value))
	{
		// Email address is fine.
	}
	else
	{
		// Email address is no good.
		msg = msg + "Please enter your correctly formatted email address.\n";
	}


	
	if (msg!="")
	{
		alert(msg);
	}
	else
	{
		document.billing.submit();
	}
}
</SCRIPT>


<form name="billing" method="post" action="{{SELF_LINK}}">
        
{{PAYMENT_BLOCK}}
	<input type="hidden" name="orderID" value="{{ORDERID}}">
	<input type="hidden" name="command" value="{{COMMAND}}">
	<input type="hidden" name="subCommand" value="{{SUBCOMMAND}}">
       <tr>
          <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="sc_featureheaders"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="sc_featured_box">3. Payment Information </td>
                    </tr>
                </table></td>
              </tr>
              <tr>
                <td valign="top"><table width="100%"  border="0" cellspacing="5" cellpadding="0">
                  <tr>
                    <td align="left" valign="top" class="co_bs_header_style"><table width="100"  border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td><img src="photos/shopcart/templates/images/icon-visa.gif" width="43" height="31" /></td>
                        <td><img src="photos/shopcart/templates/images/icon-mastercard.gif" width="42" height="31" /></td>
                        <td><img src="photos/shopcart/templates/images/icon-amex.gif" width="47" height="31" /></td>
                      </tr>
                    </table></td>
                    </tr>
                  <tr>
                    <td valign="top" class="co_info_box">
                    
								<table border="0" cellspacing="5" cellpadding="0">
								<tr valign="top">
									<td class="personalData">*Name on Card</td>
									<td class="personalData">*Credit Card Number</td>
								</tr>
								<tr valign="top">
									<td><input name="CC_Name" type="text" size="30" value="{{FIRST_NAME}} {{LAST_NAME}}" /></td>
									<td class="personalData"><input name="CC_Number" type="text" size="20" maxlength="18" />
										<p>Please, no spaces or dashes.</p></td>
								</tr>
								<tr valign="top">
									<td>&nbsp;</td>
								</tr>
								<tr valign="top">
									<td class="personalData">*Expiration Date (MM/YY)</td>
									<td class="personalData">*CSC</td>
								</tr>
								<tr valign="top">
									<td>
										 <input type="text" name="Month" size="2" maxlength="2" /> / 
										<input type="text" name="Year" size="2" maxlength="2" />
									</td>
									<td class="personalData">
										 <input name="AVSREQ" type="text" size="6" maxlength="4" />
										<p>The three digits in the signature area on the back of your card, or four 
											digits on the front of American Express cards.</p>
									</td>
								</tr>
								
								<tr><td class="personalData" colspan="2">
									<table border="0" cellpadding="5">
									<tr valign="top">
										<td align="right">*Billing&nbsp;Address </td>
										<td><input name="Street" type="text" size="40" maxlength="140"  value="{{BILLING_ADDRESS}}"/></td>
									</tr>
									<tr valign="top">
										<td align="right">*City </td>
										<td><input name="City" type="text" size="25" maxlength="80"  value="{{BILLING_CITY}}"/></td>
									</tr>
									<tr valign="top">
										<td align="right">*State </td>
										<td><input name="State" type="text" size="4" maxlength="2"  value="{{BILLING_PROVINCE}}"/></td>
									</tr>
									<tr valign="top">
										<td align="right">*Zip </td>
										<td><input name="Zip" type="text" size="12" maxlength="11"  value="{{BILLING_POSTAL}}"/></td>
									</tr>
									<tr valign="top">
										<td align="right">*Email Address </td>
										<td><input name="Email" type="text" size="40" maxlength="200"  value="{{BILLING_EMAIL}}"/></td>
									</tr>
									
									</table>
									</td>
								</tr>
								</table>
							
                     </td>
                   </tr>
                </table></td>
              </tr>
          </table></td>
        </tr>
{{/PAYMENT_BLOCK}}
{{SHOP_CART_DISPLAY}}
{{SHOP_CART_TOTALS_LINE}}
        <tr>
          <td><table width="100%"  border="0" cellspacing="5" cellpadding="0">
            <tr>
              <td><table width="100%"  border="0" cellpadding="0" cellspacing="0" class="co_submit_box">
                <tr>
                  <td><table width="100%"  border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="80%" align="right" class="subtotal">Your Subtotal </td>
                        <td width="20%" align="right" class="subtotal">${{SHOP_CART_SUBTOTAL_FORMATTED}}</td>
                      </tr>
                      <tr>
                        <td width="80%" align="right" class="sc_taxes_format">Shipping </td>
                        <td width="20%" align="right" class="sc_taxes_format">${{SHOP_CART_SHIPPING_COST_FORMATTED}}</td>
                      </tr>
                      {{TAXES_LOOP}}
                      <tr>
                        <td align="right" class="sc_taxes_format">{{TAX_NAME}}</td>
                        <td align="right" class="sc_taxes_format">${{TAX_COST_FORMATTED}}</td>
                      </tr>
                      {{/TAXES_LOOP}}
                      <tr>
                        <td align="right" class="total_style_co">Your Total </td>
                        <td align="right" class="total_style_co2">${{SHOP_CART_TOTAL_COST_FORMATTED}}</td>
                      </tr>
                  </table></td>
                  <td align="right" valign="bottom"><table  border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td align="center" valign="middle" class="button_style_grey_bb"><a href="javascript:checkform();">Submit Order </a> </td>
                      </tr>
                  </table></td>
                </tr>
              </table></td>
            </tr>
          </table></td>
        </tr>
{{/SHOP_CART_TOTALS_LINE}}
{{/SHOP_CART_DISPLAY}}
    </table></td>
  </tr>
  </form>
</table>
<p>&nbsp;</p>

<!-- RIGHT COLUMN CLOSING DIV ############################################################################################ -->

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

<!-- OUTER CONTAINER CLOSING DIV ######################################################################################### -->

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