<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css?r=3662">
        <script src="js/vendor/modernizr-2.6.1.min.js"></script>

        <script type="text/javascript" src="//use.typekit.net/ron5khw.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    </head>
    <body style="">
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->
        <div class="wrap">

        <div class="curtain"></div>

        <header>
            <a href="/" id="logo"><img src="/wp-content/themes/boilerplate/images/logo-new.png"></a>
        </header>
        <div class="gift-title">You are making a generous gift to: TEXAS Hurricane Harvey Relief</div>
<div class="outer">
        <div class="image-header" >
        <div class="inside">
          <p>
            <span class="project-title">TEXAS Hurricane Harvey Relief</span><br>
            <span class="project-id">Project ID: <span class="project-number">765-0036-052</span></span>
          </p>
        </div>
      </div>
    <div class="main-container">

    <div id="selector-wrap">
      <div class="row full-width" style="text-align:center;">Please choose how you would like to give:</div>
      <div class="row">
        <div class="one-half"><a href="#" id="btn-cc"><img src="images/pay-creditcard.png" alt="Pay with a Credit Card" height="60"></a></div>
        <div class="one-half"><a href="#" id="btn-paypal"><img src="images/pay-paypal.png" alt="Pay with Paypal" height="60"></a></div>
      </div>
    </div>

        <div id="paypal-cont" class="form-wrap">

      <form id="paypal-form">
      <p style="font-style:italic;text-align:center;">You will enter your personal information and donation amount through PayPal on the next screen.</p>
        <div class="divider"></div>
        <div class="row full-width">
          <span>Project number or comments to describe your gift:<sup>*</sup></span><br>
          <textarea id="gift-comments" data-field="comments" name="comments"></textarea>
        </div>
        <div class="row full-width">
          <div class="checkbox-wrap"><span class="checkbox-text">Is this gift in memory of someone?</span></div>
            <div class="hidden-input-wrap" id="input-wrap-memory"><input data-field="Memory of" id="memory-person" placeholder="Who is this gift in memory of?" type="text"></div>
        </div>
        <div class="row full-width">
          <div class="checkbox-wrap"><span class="checkbox-text">Is this gift in honor of someone?</span></div>
            <div class="hidden-input-wrap" id="input-wrap-honor"><input data-field="Honor of" id="honor-person" placeholder="Who is this gift in honor of?" type="text"></div>
        </div>
        <br>
        <div class="divider"></div>
        <div class="row full-width">
          <h3>World Missions Information</h3>
        </div>
        <div class="row full-width">
          <span>Church Name</span>
          <input data-field="ChrNme" type="text" id="paypal-church-name" value="">
        </div>
        <div class="row full-width">
          <span>Church City</span>
          <input data-field="ChrCty" type="text" id="paypal-church-city" value="">
        </div>
        <div class="row full-width">
          <span>Church State/Region</span>
          <input data-field="ChState" type="text" id="paypal-church-state" value="">
        </div>
        <div class="row full-width">
          <span>Church Phone</span>
          <input data-field="ChrPhone" type="text" id="paypal-church-phone" value="">
        </div>

      </form> 

      <script language="javascript">
          function trim(mystring) {
            return mystring.replace(/^\s*/, "").replace(/\s*$/, "");
          }
          
          function check(){
              
              var paypal_value = "";

              if (trim($(".project-number").text()) != "") {
                paypal_value += "PrjtNo=" + $(".project-number").text() + ",";
              }

              $('#paypal-form input,#paypal-form textarea').each(function(i,e){
                if ($(this).attr('data-field') != '') {
                  paypal_value += $(e).attr('data-field') + '=' + $(e).val() + ',';
                }
              });

              $("#item_name").val(paypal_value);

              return true;

            }
          
        </script>

      <div style="padding:20px 0;text-align:center;">
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="return check();">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="NL4CRHAR2AKVE">
          <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" onclick="return check();">
          <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
          <input type="hidden" name="item_name" id="item_name" value="">
        </form>
      </div>

    </div>
    <div class="form-cont form-wrap" id="cc-wrap"><form id="pay-form" action="" method="post">
        
        <input type="hidden" name="project-ID" value="765-0036-052">
        <input type="hidden" name="project-title" value="TEXAS Hurricane Harvey Relief">


<!--       <div class="divider"></div>
 -->      <div class="row full-width">
        <p style="font-size: 0.7em; padding-top: 0px; margin-top: 0px;"><i>Fields marked with an * are required</i></p>
        <span>Your Name<sup>*</sup><span>
        <div class="sub-msg">(as it appears on your credit card)</div>
        <input type="text" name="cardname">
      </div>
      <div class="divider"></div>
      <div class="row full-width">
        <span>Address<sup>*</sup></span>
        <div class="sub-msg">(your credit card billing address)</div>
        <input type="text" name="addy">
      </div>
      <div class="row">
        <div class="one-half">
          <span>City<sup>*</sup></span>
          <input class="city" type="text" name="city">
        </div>
        <div class="one-fourth">
           <span>State<sup>*</sup></span>
           <input class="state" type="text" name="state" maxlength="2">
        </div>
        <div class="one-fourth">
            <span>Zip Code<sup>*</sup></span>
           <input class="small" type="text" name="zip">
        </div>
      </div>
      <div class="divider"></div>
      <div class="row full-width">
        <span>Billing Phone #<sup>*</sup></span>
        <div class="sub-msg">(Please include your area code)</div>
        <input type="text" name="phone">
      </div>
      <div class="row full-width">
        <span>E-Mail Address<sup>*</sup></span>
        <input type="text" name="email">
      </div>
      <div class="divider"></div>

        <div class="row full-width">
          <span>Project number or comments to describe your gift:<sup>*</sup></span><br>
          <textarea id="gift-comments" name="comments"></textarea>
        </div>
        <div class="row full-width">
          <div class="checkbox-wrap"><span class="checkbox-text">Is this gift in memory of someone?</span></div>
            <div class="hidden-input-wrap" id="input-wrap-memory"><input id="memory-person" placeholder="Who is this gift in memory of?" type="text" name="memoryperson" ></div>
        </div>
        <div class="row full-width">
          <div class="checkbox-wrap"><span class="checkbox-text">Is this gift in honor of someone?</span></div>
            <div class="hidden-input-wrap" id="input-wrap-honor"><input id="honor-person" placeholder="Who is this gift in honor of?" type="text" name="honorperson"></div>
        </div>

      <div class="divider"></div>
        <div class="row full-width">
          <h3>World Missions Information</h3>
        </div>
        <div class="row full-width">
          <span>Church Name</span>
          <input type="text" id="cc-church-name" name="ChName" >
        </div>
        <div class="row full-width">
          <span>Church City</span>
          <input type="text" id="cc-church-city" name="ChCity" >
        </div>
        <div class="row full-width">
          <span>Church State/Region</span>
          <input type="text" id="cc-church-state" name="ChState" >
        </div>
        <div class="row full-width">
          <span>Church Phone</span>
          <input type="text" id="cc-church-phone" name="ChPhone" >
        </div>
      <div class="divider"></div>
      <div class="row full-width">
        <span>Credit Card Number<sup>*</sup></span>
        <div class="sub-msg">(Please enter numbers only – no spaces or dashes)</div>
        <input type="text" name="cardnum" >
        <p class="cardtype"></p>
      </div>
      <div class="row">
        <div class="one-half"></div>
        <div class="one-fourth">
          <span>Expiration<sup>*</sup></span>
          <input class="expdate" type="text" maxlength="2" name="month" placeholder="MM">
        </div>
        <div class="one-fourth">
          <span>&nbsp;</span>
          <input class="expdate" type="text" maxlength="2" name="year" placeholder="YY">
        </div>
        <!-- <div class="one-half">
          <span>Security Code (CVV2)</span><br>
          <input type="text" name="CVV2" value="" />
        </div> -->
        
        
      </div>
      <div class="divider"></div>
      <div class="donate row">
        <span class="dollar">$</span><input type="text" placeholder="0.00" name="donation">
      </div>
      <div class="captcha row">
        <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LerxOESAAAAAGccVj_YdNtNAhnHVkMFGfclrwwX"></script>

	<noscript>
  		<iframe src="https://www.google.com/recaptcha/api/noscript?k=6LerxOESAAAAAGccVj_YdNtNAhnHVkMFGfclrwwX" height="300" width="500" frameborder="0"></iframe><br/>
  		<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  		<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
	</noscript>      </div>
      <div class="submit-row">
        <div><input type="submit" value="Submit Donation"></div>
      </div>
    </form></div>
  </div>
  
</div>

<div class="seal-container">
    <!-- GeoTrust QuickSSL [tm] Smart  Icon tag. Do not edit. -->
    <script language="javascript" type="text/javascript" src="//smarticon.geotrust.com/si.js"></script>
    <!-- end  GeoTrust Smart Icon tag -->
  </div>

</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
        <script src="js/plugins.js?r=7192"></script>
        <script src="js/main.js?r=1870"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID.
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
         -->

    </body>
</html>