Amazing iSoft Order Forms

appearance.css

@import "https://s3.amazonaws.com/BUCKET/webfonts/ss-gizmo.css";
/* Layout: Two Column
Theme: Basic Grey

Appearance.css contains the costmetic properties for your order
form, such as fonts, colors, background images and borders.

NOTE: There are additional classes that are not listed here
because they currently have no attributes. You can locate
these by downloading and using Firebug.
===============================================================*/

/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
This is the correct location for import, remove import link in layout.css when ready
*/


/* #1 Reset and @fontface
================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1.4;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* font face */
@font-face {
    font-family: 'salvo';
    src: url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansLight.eot');
    src: url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansLight.eot?#iefix') format('embedded-opentype'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansLight.woff') format('woff'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansLight.ttf') format('truetype'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansLight.svg#salvo') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'salvo';
    src: url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansLightItalic.eot');
    src: url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansLightItalic.eot?#iefix') format('embedded-opentype'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansLightItalic.woff') format('woff'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansLightItalic.ttf') format('truetype'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansLightItalic.svg#salvo') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'salvo';
    src: url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansBold.eot');
    src: url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansBold.eot?#iefix') format('embedded-opentype'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansBold.woff') format('woff'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansBold.ttf') format('truetype'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansBold.svg#salvo') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'salvo';
    src: url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansBoldItalic.eot');
    src: url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansBoldItalic.eot?#iefix') format('embedded-opentype'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansBoldItalic.woff') format('woff'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansBoldItalic.ttf') format('truetype'),
    url('https://s3.amazonaws.com/BUCKET/webfonts/SalvoSansBoldItalic.svg#salvo') format('svg');
    font-weight: bold;
    font-style: italic;
}

/* END font face */


/* #2 Main and Structure
================================================== */

body {
    font-family: 'salvo', sans-serif;
    color: #333;
    background: #f9f9f9;
}

.header {
    background: #fff;
    margin-bottom: 1.875em;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,.15);
    border-top: 4px #000 solid;
}

.header-wrap {
    max-width: 58.75em;
    margin: 0px auto;
}

.logo {
    width: 190px;
    max-width: 48%;
    height: 39px;
    display: block;
    float: left;
    margin: 1em 0px;
}

.header-text {
    max-width: 50%;
    float: right;
    margin: 1.5625em 0px 0px;
    display: block;
    text-align: right;
}

.header-text p {
    font-size: 1.375em;
}


.headline {
    margin-bottom: 3em;
    padding-top: 3em;
}

.headline .from-me {
    font-size: 1.125em;
    font-style: italic;
}

.headline .from-ramit strong {
    color: inherit;
    font-weight: bold;
}

.inner-wrap {
    padding: 0px .625em;
}

.main {
    margin-bottom: 2.75em;
}

#content {
    width: 65.96%;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.08);
}

#content .inner-wrap {
    padding: 1.25em 1.875em 2em;
}

#content .product-header {
    background: #fcfcfc;
    border-bottom: solid 1px #eeeeee;
    padding: .5em 1.875em;
    margin: -1.25em -1.875em 1.75em -1.875em;
}

#content .product-header h2 {
    font-size: 1.125em;
    font-weight: bold;
    margin-bottom: 0px;
}

#content .product-thumb {
    margin-left: 1em;
    max-width: 120px;
}

#content .input-wrap {
    max-width: 60%;
}

#content .input-aid {
    width: 34%;
}

.single {
    width: 80%;
}

#rightCol .panel {
    background: #fff;
    margin-bottom: 1.875em;
}
.panel-inner-wrap {
    padding: .875em 1.25em .625em;
}

.panel .customer-support {
    background: url("https://s3.amazonaws.com/BUCKET/images/customer-service.png") bottom right no-repeat;
    min-height: 135px;
    font-size: 1.285714286em;
    padding-left: 1.25em;
    padding-top: 1em;
}

.panel .customer-support p {
    margin-bottom: 0px;
    line-height: 1.4em;
}

.panel a.button {
    border: solid 1px #dedede;
    border-radius: 3px;
    margin-top: .5em;
    display: inline-block;
    font-size: .777777778em;
    text-decoration: none;
    padding: 0px 10px;
    color: #333;
    font-weight: bold;
    background: #f9f9f9;
}

.panel a:hover.button {
    color: #0095e6;
}

#rightCol h3 {
    display: block;
    font-size: 1.125em;
    font-weight: bold;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: .5em;
    margin-bottom: 1em;
}

#rightCol .media .testimonial .from {
    display: block;
}

.orange {
    color: #e85429;
}


.footer {
    background: #000;
    margin-top: 1.875em;
    color: #fff;
    padding-bottom: 1px;
    position: absolute;
    left: 0;
    right: 0;
}

.footer .inner-wrap {
    max-width: 60em;
    margin: 0px auto;
    padding: .625em 0px;
}

.footer .inner-wrap p {
    font-size: .75em;
    margin-bottom: 0px;
    margin-left: .625em;
}

/* #3 Typography
================================================== */

h1 {
    font-weight: bold;
    font-size:  1.5em;
    margin-bottom: .3em;
    letter-spacing: 0px;
    line-height: 1.2em;
}

h1 strong {
    font-weight: 900;
    color: #6fbb11;
}

h2 {
    font-family: "salvo", sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 1em;
}

#content h3 {
    font-family: "salvo", sans-serif;
    font-weight: bold;
    font-size: 1.1255em;
    margin-bottom: 1em;
    color: #0095e6;
}

#content h4 {
    font-size: .875em;
    font-weight: bold;
    display: block;
    margin: 2em 0px;
}

.case-studies a img:hover {
    box-shadow:  0px 0px 4px 1px rgba(0,0,0,.25);
}

p, ul, ol {
    font-size: .875em;
    margin-bottom: 1.2em;
    line-height: 1.6em;
}

.nospam {
    text-align: center;
    margin-top: 1em;
    font-size: .75em;
    font-style: italic;
    margin-bottom: 0px;
}

.feature-in p {
    font-size: .625em;
    text-align: center;
    position: absolute;
    top: -10px;
    display: inline-block;
    width: 100%;
    margin: 0px auto;
    color: #7b7b7b;
}

.feature-in p .backing {
    background: #fff;
    display: inline-block;
    padding: 0px .625em;
}

.copyright p {
    font-size: .75em;
    display: block;
    border-top: 1px solid #f5f5f5;
    padding-top: 3em;
}

strong { font-weight: bold;}
em { font-style: italic;}
a { color: #0095e6; }

ul, ol {
    margin-left: 3em;
}

li strong {
    font-weight: bold;
}

ol li {
    list-style-type: decimal;
}

ul li {
    list-style-type: disc;
}

.highlight {
    background-color: #e85429;
    padding: 4px 12px;
    color: #fff;
}

/* Start brand colors */

.green { color: #6fbb11; }
.round {
    width: 1.666666667em;
    height: 1.555555556em;
    display: inline-block;
    border-radius: 9999px;
    background-color: #0095e6;
    color: #fff;
    text-align: center;
    padding-top: 2px;
}







/* PRODUCT GRID
===============================================================*/

.priceBold {
    /* Price subtotal on bottom right of product grid */
    font-weight: bold;
}

.discountedPrice {
    text-decoration: line-through;
}

.totalPrice {
    /* Subtotal label on bottom left of product grid */
    font-weight: bold;
}

.optionChosen {
    font-style: italic;
    color: #999;
    font-size: 14px;
}

.updateCart {
    /* Link to update quantity */
    font-size: 10px;
}

.promoField {
    /* Text fields for promo code */
    border: 1px solid #ddd;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    font-size: 13px;
}



/* FORMS
===============================================================*/

.checkout, .checkoutShort, .checkoutShortTop, .checkoutShortBottom, .checkoutShortest, .checkoutBottom, .checkoutTop, .qtyField, .optionsDrop  {
    /* Form fields used in checkout forms */
    border: 1px solid #ddd;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    font-size: 13px;
    color: #222;
}

.checkoutDone, .checkoutTopDone, .checkoutBottomDone {
    /* Form fields used on confirmation page */
    font-size: 13px;
    color: #222;
}

.viewCart, .shippingTable, .billingTable, .paymentMethodTable, .shipMethodTable, .payplanTable, .orderSummary {
    /*outline: 1px solid #ddd;*/
    border-collapse: collapse;
}

.viewCart th, .payPlan th, .summaryCart th, .shippingInfo th, .billingInfo th, .billingTable th, .shippingTable th, .paymentInfo th, .signinTable th, .paymentMethodTable th, .shipMethodTable th, .payplanTable th, .orderSummary th {
    /*background: #eee;*/
    /*background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));*/
    /*background: -moz-linear-gradient(top,  #ffffff,  #dddddd);*/
    /*filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd');*/
}

.viewCart td, .viewCartShort td, .payPlan td, .summaryCart td, .shippingInfo td, .billingInfo td, .paymentInfo td, .orderSummary td {
    /*border-top: 1px solid #ddd;*/
}

.subtotal {
    background-color: #f5f5f5;
    font-weight: bold;
}

.cartDiscount {
    /* Discount text */
    color: #f00;
}

.paymentDate, .paymentAmount, .financeDate, .financeAmount { /* Shown in payplan pay schedule box */
    /*font-size: 12px;*/
}

.payplanSummaryHeader { /* Header for payplan pay schedule box */
    font-size: 12px;
    font-weight: bold;
}



/* UPSELLS
===============================================================*/

#upsellContainer {
    overflow: hidden;
}

#upsellContainer img {
    border: 1px solid #ddd;}

.upsell {
    background-color: #fcfbe9;
    border: 1px solid #f1edb4;
}

.upsellRegPrice {
    font-style: italic;
}

/* LINKS AND BUTTONS
===============================================================*/

a {
    color: #1675a2;
}

a:hover {
    color: #1675a2;
}

.codeButton, .continueButton  {
    margin: 0em;
    font: -webkit-small-control;

    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;

    align-items: flex-start;
    text-align: center;
    background: #e85429;
    border: none;
  border: 1px solid #e24e23;
    font-size: 1em;
    font-weight: bold;
    color: #FFFFFF;
    border-radius: 3px;
    padding: .75em;
    cursor: pointer;
    margin-bottom: 1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,.25);

}

.upsellButton  {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    border: solid 1px #666;
    background: #444;
    background: -webkit-gradient(linear, left top, left bottom, from(#777777), to(#444444));
    background: -moz-linear-gradient(top,  #777777,  #444444);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#777777', endColorstr='#444444');
}

.codeButton:hover, .continueButton:hover, .upsellButton:hover {
    background: #e24e23;
    color: #fff;
    text-decoration: none;
}

.codeButton:active, .continueButton:active, .upsellButton:active {
    position: relative;
    top: 1px;
}



/* MISC
===============================================================*/

.errorMessage {
    color: #dd4949;
}


/* PAYMENT PLANS
===============================================================*/
#PAYMENT_PLANS {display:none}

footer.html

/***************** CONFIG *********************/
            var iwtProductName = 'Zero To Launch';
            var iwtButtonText = 'Join Zero To Launch';
            var iwtPrice = '$299 / month for 12 months';
            /***************** /CONFIG ********************/

			if (window._iwt_get_parameter) {
				// Already defined the get parameter function
			}
			else {
				window._iwt_get_parameter = function (sParam) {
				    var sPageURL = window.location.search.substring(1);
				    var sURLVariables = sPageURL.split('&');
				    for (var i = 0; i < sURLVariables.length; i++) {
				        var sParameterName = sURLVariables[i].split('=');
				        if (sParameterName[0] == sParam) {
				            return unescape(sParameterName[1]);
				        }
				    }
				}
			}

            var _iwt_custom_field_names = [
                'ProductsTitle',
                'ProductsDescription',
            	'PaymentType',
            	'PromotionType',
            	'PromotionBaseProduct',
            	'PromotionStartYear',
            	'PromotionStartMonth',
            	'PromotionIdentifier',
            	'TestVariation',
            	'Property',
            	'UTMMedium',
            	'UTMSource',
            	'UTMCampaign',
            	'UTMContent',
            	'SalesPageURL',
            	'SalesPageButtonInstance',
            	'ProductLaunchIdentifier',
            	'PurchasedTag',
            	'CustomerTag',
            	'IWTSStartTag'
            ];

			var _iwt_reorder_cart = function () {
							
							// Look for the payment plan section, if it exists, select the last option, which should be the payment plan unless there was a param specifying 1pay
							if (jQuery('table.payplanTable').length > 0) {
							    if (_iwt_get_parameter('_PaymentType') == '1 Pay') {
							    	jQuery('.choosePlan').filter('[type="radio"]').filter('[name="payPlanId"]').first().attr('checked', true);
							    }
							    else {
							    	jQuery('.choosePlan').filter('[type="radio"]').filter('[name="payPlanId"]').last().attr('checked', true);
							    }
							}


							// Do nothing if it looks like we have already run
							if (jQuery('table.viewCart').is(':visible') && jQuery('div.iwt-viewcart').length == 0) {
								// Magically Reorg the Products
								jQuery('table.viewCart').hide();
								
								// Select the right payment type to pull the price description
								jQuery('table.viewCart').each(function(index){

									//if(index == 0){ return; }
									var $el = jQuery(this);
									var img = $el.find('img.cartThumb').attr('src');
									var title = $el.find('h1').text();

									if(img == undefined || title == ''){
										return;
									}

									var desc = $el.find('p.productDescription').text();
									var price = jQuery('input[name=payPlanId]:checked').parent().text()
									if (price == undefined || price == ''){
										price = $el.find('span.price').text();
									}
                                  if (window.iwtPrice != undefined && iwtPrice != '') {
                                    price = iwtPrice;
                                  }
									jQuery('#ORDER_FORM_PRODUCT_LIST').prepend(
											'<div class="iwt-viewcart"><img class="product-thumb right" src="' + img + '" alt="">' +
											'<h1>' + title + '</h1><p class="price">' + price + '</p><p>' + desc + '</p><hr/></div>');
								});
							}
							
							if (jQuery('div.product-header').length == 0) {
								jQuery('#ORDER_FORM_PRODUCT_LIST').prepend('<div class="product-header"><h2>You\'re just 60 seconds away from securing your spot in ' + iwtProductName + '</h2></div>');
							}

							_iwt_add_custom_fields();
			};
			
			var _iwt_add_custom_fields = function () {
				for (var i=0; i < _iwt_custom_field_names.length; i++) {
					var field_name = '_' + _iwt_custom_field_names[i];
					if (jQuery('#orderForm').find('#' + field_name).length == 0) {
						jQuery('#orderForm').append('<input type="hidden" id="' + field_name + '" name="Order0' + field_name + '" />');
					}

					var field_value = _iwt_get_parameter(field_name);
					if (field_value != undefined) {
						jQuery('#orderForm').find('#' + field_name).val(field_value);
					}
				}
			}
			
            jQuery(function(){

                // User Re-organization
                jQuery("#INSERT_USER_INPUT").insertBefore("#orderFormBillingEntry");
                jQuery('#orderFormBillingEntry').hide();
                jQuery('#firstName').appendTo('#input-first_name');
                jQuery('#lastName').appendTo('#input-last_name');
                jQuery('#company').appendTo('#input-company');
                jQuery('#phoneNumber').appendTo('#input-phone');
                jQuery('#emailAddress').appendTo('#input-email');

                // Billing Re-organization
                jQuery("#INSERT_BILLING_INPUT").insertBefore("#PAYMENT_SELECTION");
                jQuery('#PAYMENT_SELECTION').hide();
                jQuery('#addressLine1').appendTo('#input-address1');
                jQuery('#addressLine2').appendTo('#input-address2');
                jQuery('#city').appendTo('#input-city');
                jQuery('#state').appendTo('#input-state');
                jQuery('#zipCode').appendTo('#input-zip');
                jQuery('#country').appendTo('#input-country');

                jQuery('#cardType').appendTo('#input-cc_type');
                jQuery('#cardNumber').appendTo('#input-cc_number');
                jQuery('#expirationMonth').appendTo('#input-cc_month');
                jQuery('#expirationYear').appendTo('#input-cc_year');
                jQuery('#verificationCode').appendTo('#input-cc_ccv');

                jQuery('#INSERT_SUPPORT').appendTo('.checkoutLinks');
                jQuery('.continueButton').text(iwtButtonText);

				_iwt_reorder_cart();
				
				jQuery('table.viewCart').hide();

                ct_q = document.URL.split('?')[1];
                ct_url = '//ct.zerotolaunchsystem.com/sc/new?' + (ct_q == undefined ? '' : ct_q); 
                jQuery.ajax({url:ct_url, dataType: 'script', success: function () {}}); 
				
				// Watch for the viewCart being re-rendered (which InfusionSoft does when someone enters a zip code and tabs out of that field)
				jQuery("#ORDER_FORM_PRODUCT_LIST").bind("DOMSubtreeModified", function() {
				    if (jQuery(this).find("table.viewCart").is(':visible') && jQuery('div.iwt-viewcart').length == 0) {
				    	console.log("viewcart is visible, running_iwt_reorder_cart");
				    	_iwt_reorder_cart();
				    }
				});
				
                


                // Add the support click handler
                jQuery('#live-support').click(function(e){
                    e.preventDefault();
                    jQuery('#zenbox_tab').click();
                });
            });

        </script>

footer2.html

<p>It can take up to 30 seconds to process your order, so please be patient.</p>
            <img src="https://s3.amazonaws.com/cdn.earn1k.com/sales-images/checkout-page/images/authorize-dot-net.png" alt="">
            <img src="https://s3.amazonaws.com/cdn.earn1k.com/sales-images/checkout-page/images/mc-afee.png" alt="">
          <p style="font-size:.75em;margin-top: 1em;color: #999;"><em>I authorize I Will Teach You To Be Rich to charge me for the order total. I further affirm that the name and personal information provided on this form are true and correct. I further declare that I have read, understand and accept I Will Teach You To Be Rich's business terms as published on their website. By pressing the order button, I agree to pay I Will Teach You To Be Rich.</em></p>
        </div>

        <div class="footer">
            <div class="inner-wrap">
                <p>Copyright I Will Teach You To Be Rich &copy; 2015</p>
            </div>
        </div>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-237785-27']); // IWTStudents
  _gaq.push(['_setDomainName', 'none']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

  if(typeof(_vis_opt_GA_track) == "function") { _vis_opt_GA_track(); }

  (function() {
	 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>


        <script type="text/javascript" src="//assets.zendesk.com/external/zenbox/v2.5/zenbox.js"></script>
        <style type="text/css" media="screen, projection">
            @import url(//assets.zendesk.com/external/zenbox/v2.5/zenbox.css);
            #zenbox_tab{ display: none !important;}
        </style>
        <script type="text/javascript">
            if (typeof(Zenbox) !== "undefined") {
                Zenbox.init({
                    dropboxID:   "20140132",
                    url:         "https://iwillteachyoutoberich.zendesk.com",
                    tabID:       "Support & Live Chat",
                    tabColor:    "#6FBB11",
                    tabPosition: "Left"
                });
            }
        </script>
<!--Start of Zopim Live Chat Script-->
<script type="text/javascript">
	window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
		d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
		_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8');
		$.src='//v2.zopim.com/?2CpoG7wheL9h9n4iWu0BIB186WqpktBa';z.t=+new Date;$.
			type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');
</script>
<!--End of Zopim Live Chat Script-->


</div>

header.html

<div id="customHeader">
     <div class="header-wrap group">
                <div class="logo">
                    <img src="https://s3.amazonaws.com/cdn.earn1k.com/sales-images/checkout-page/images/iwt-logo-black.png" alt="">
                </div>
                <div class="header-text">
                    <p><i class="ss-icon">&#x1F512;</i>Secure Checkout</p>
                </div>
            </div>

</div>

layout.css

#wrapper,
.wrap {
    padding-bottom: 2.5em;
    max-width: 58.7em;
    margin: 0px auto;
    margin-top: 120px;
}

#header {
    /* The top area that contains your banner or logo */
    background: #fff;
    margin-bottom: 1.875em;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,.15);
    border-top: 4px #000 solid;
    position: absolute;
    top: 0; left:0; right: 0;
}

#content {
    /* Content wrapper for main column */
    float: left;
    width: 59.6%;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,.08);
    padding: 1.25em 1.875em 2em;
}

#rightCol {
    /* Content wrapper for right column/HTML area */

    float: right;
    clear: both;
    width: 32%;
    position: relative;
}

/* Removing items
===============================================================*/
#IMAGE{ display: none; }


/* PRODUCT GRID
===============================================================*/

.productImage {
    /* Image in the product grid */
    margin: 8px 0 10px 0;
    border: 1px solid #eee;
}

.price {
    /* Price in the right column of the product grid */
    display: block;
}

.productDescription {
    /* Paragraph for short product description in order form */
    margin-bottom: 13px;
}

.optionsDrop {
    /* Dropdown for product options */
    padding: 4px 4px 4px 6px;
    margin-bottom: 13px;
    width: 200px;
    line-break-after: right;
}

.subscriptionPlan {
    display: block;
}

.qtyField {
    /* Quantity field in product grid */
    padding: 4px 4px 4px 6px;
    width: 30px;
    display: block;
    text-align: right;
    margin: 0 auto;
    margin-bottom: 5px;
}



/* HTML AREAS (Insert custom HTML by going to the HTML area tab)
===============================================================*/

#topCustomHTML {
    /* HTML area below header image. */
    margin: 35px 0 15px 0;
}

#middleCustomHTML {
    /* HTML area below product grid. */
    margin: 35px 0 60px 0;
    clear: both;
}

#bottomCustomHTML {
    /* This is your footer. */
    width: 960px;
    margin: 40px auto 20px auto;
    padding: 15px;
    text-align: center;
    clear: both;
}



/* FORMS
===============================================================*/

input {
    margin: 0 0 7px 0;
}

.paymentLabel {
    /* Labels for payment method table */
    display: block;
}

.choosePlan {
    /* Radio buttons used to choose pay plan or shipping option */
    margin-right: 5px;
}



/* Form fields and labels
---------------------------------------------*/

/*.checkout, .checkoutDone {*/
    /* Form fields used in checkout forms */
    /*padding: 4px 4px 4px 6px;*/
    /*margin: 0;*/
    /*width: 135px;*/
/*}*/

/*.checkoutBottom, .checkoutBottomDone {*/
    /* Provides bottom padding for last form field in a form */
    /*padding: 4px 4px 4px 6px;*/
    /*margin: 0 0 20px 0;*/
    /*width: 135px;*/
/*}*/

/*.checkoutTop, .checkoutTopDone {*/
    /* Provides top padding for first form field in a form */
    /*padding: 4px 4px 4px 6px;*/
    /*margin: 10px 0 0 0;*/
    /*width: 135px;*/
/*}*/

/*.checkoutLabel {*/
    /* Checkout form label */
    /*padding: 0 0 -3px 0;*/
    /*margin: 0 0 -3px 0;*/
/*}*/

/*.checkoutShort {*/
    /* Smaller form field */
    /*padding: 4px 4px 4px 6px;*/
    /*margin: 0;*/
    /*width: 135px;*/
/*}*/

/*.promoField {*/
    /* Smaller form field */
    /*padding: 4px 4px 4px 6px;*/
    /*margin: 0 0 0 10px;*/
    /*width: 120px;*/
/*}*/


/*.checkoutShortTop {*/
    /* Smaller form field */
    /*padding: 4px 4px 4px 6px;*/
    /*margin: 10px 0 0 0;*/
    /*width: 135px;*/
/*}*/

/*.promoLabel {*/
    /*padding-top: 3px;*/
/*}*/

/*.checkoutShortest {*/
    /* Even smaller form field */
    /*padding: 5px;*/
    /*margin: 0;*/
    /*width: 70px;*/
/*}*/

/*.checkoutShortBottom {*/
    /*padding: 4px 4px 4px 6px;*/
    /*margin-bottom: 30px;*/
    /*width: 135px;*/
/*}*/

/*.addressTableInfo {*/
    /*margin-bottom: 0px;*/
/*}*/

/*.paymentIcon {*/
    /* Credit card, pay pal and check icons in payment information table */
    /*margin: 0 7px -5px 4px;*/
/*}*/


/* Tables
---------------------------------------------*/

.viewCart {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 60px 0;
    float: left;
    border-radius: 4px;
}

.viewCart th, .billingTable th, .shippingTable th, .shipMethodTable th, .paymentMethodTable th, .payplanTable th, .orderSummary th {
    padding: 10px 10px 10px 15px;
    text-align: left;
}

.viewCart td, .shipMethodTable td, .paymentMethodTable td, .payplanTable td, .orderSummary td {
    padding: 10px 10px 10px 15px;
    vertical-align: top;
}

.billingTable td, .shippingTable td {
    padding: 8px 0 0 15px;
    vertical-align: top;
}

.billingTable {
    /* Table for entering billing address */
    width: 355px;
    border-collapse: collapse;
    margin: 0 20px 20px 0;
    text-align: left;
    float: left;
    height: 500px;
}

.shippingTable {
    /* Table for entering shipping address */
    width: 355px;
    border-collapse: collapse;
    margin: 0 0 20px 0;
    text-align: left;
    float: right;
    height: 500px;
}

.orderSummary {
    /* Table for order form summary */
    position: relative;
    width: 355px;
    border-collapse: collapse;
    margin-bottom: 20px;
    text-align: left;
    float: right;
    clear: right;
}

.shipMethodTable {
    /* Table for shipping options */
    width: 355px;
    border-collapse: collapse;
    margin-bottom: 20px;
    margin-right: 20px;
    text-align: left;
    float: left;
    clear: left;
}

.payplanTable {
    /* Table for choosing pay plan */
    width: 355px;
    border-collapse: collapse;
    margin-bottom: 20px;
    text-align: left;
    float: left;
}

#shipPaymentContainer {
    width: 355px;
    float: left;
}

.tableOption {
    /* Paragraph for shipping or pay plan option */
    margin: 0 0 11px 0;
}

.payplanSummary { /* Box that shows payment schedule for payment plan */
    background-color: #fff;
    width: 200px;
    margin: -12px 0 15px 0;
}

.paymentDate { /* Date shown in .paypanSummary box */
    width: 100px;
    display: inline-block;
    border-bottom: 1px dashed #ddd;
}

.paymentAmount { /* Payment amount shown in .paypanSummary box */
    width: 65px;
    text-align: right;
    display: inline-block;
    border-bottom: 1px dashed #ddd;
}

.financeDate { /* Finance charge label shown in .paypanSummary box */
    color: #777;
    font-style: italic;
    width: 100px;
    display: inline-block;
}

.financeAmount { /* Finance charge amount shown in .paypanSummary box */
    color: #777;
    font-style: italic;
    width: 65px;
    text-align: right;
    display: inline-block;
}

.promoCode {
    /* Table for promo code field */
    width: 453px;
    border-collapse: collapse;
    margin-left: 15px;
}

.promoCode td {
    height: 30px;
}

.paymentMethodTable {
    /* Table for entering payment method */
    width: 730px;
    border-collapse: collapse;
    margin: 40px 0 20px 0;
    text-align: left;
    float: left;
}

td.pay1 {
    /* First column in .paymentMethodTable */
    width: 150px;
    padding-bottom: 20px;
}

td.pay2 {
    /* First column in .paymentMethodTable */
    width: 162px;
    padding-bottom: 20px;
}

td.pay3 {
    /* First column in .paymentMethodTable */
    width: 158px;
    padding-bottom: 20px;
}

td.pay4 {
    /* First column in .paymentMethodTable */
    padding-bottom: 20px;
}

td.rightAlign {
    text-align: right;
    vertical-align: top;
    padding-top: 10px;
    height: 20px;
    width: 140px;
}

.productCell {
    width: 80%; !important
}

.qtyCell {
    width: 10%; !important
}

.priceCell {
    width: 10%; !important
}

th.rightAlign {
    text-align: right;
}

th.rightAlignTop {
    text-align: right;
    vertical-align: top;
    padding-top: 20px;
    width: 150px;
}

td.rightAlignTop {
    text-align: right;
    padding-top: 20px;
    width: 150px;
    height: 20px;
}

td.rightAlignBottom {
    text-align: right;
    vertical-align: top;
    padding: 10px 10px 20px 0;
    width: 150px;
}

th.leftAlign {
    text-align: left;
    height: 15px;
}

td.leftAlign {
    text-align: left;
}

td.centerAlign, th.centerAlign {
    text-align: center;
}

td .rightCell {
    text-align: right;
}

/*.checkoutLinks {*/
    /* Container for 'Checkout' and 'Continue Shopping' buttons */
    /*width: 300px;*/
    /*height: 30px;*/
    /*margin: 0 0 40px 0;*/
    /*text-align: right;*/
    /*float: right;*/
/*}*/



/* UPSELLS
===============================================================*/

#upsellContainer {
    /* Contains all upsells */
    width: 750px;
    margin: 0 0 40px 0;
    clear: both;
}

.upsell {
    /* Box that contains single upsell */
    width: 328px;
    float: left;
    margin: 0 20px 20px 0;
    padding: 10px 10px 12px 15px;
}

.upsellImage {
    float: left;
    margin: 6px 15px 0 0;
}

.upsellItem {
    /* Product name */
    font-weight: bold;
    margin-right: 10px;
}

.upsellAdd {
    /* Add to cart button for upsells */
    float: right;
    margin: 7px 7px 0 0;
}

.upsellPrice {
    margin-left: 9px;
}


/* TYPOGRAPHY
===============================================================*/

/*h1 {*/
    /* Used for product names */
    /*margin: 2px 0 2px 0;*/
/*}*/

/*h2 {*/
    /* Used for upsell product names */
    /*margin-right: 10px;*/
    /*display: inline;*/
/*}*/

/*#upsellContainer h2 {*/
    /* Used for upsell product names */
    /*margin: 5px 12px 0 0;*/
    /*display: inline-block;*/
/*}*/

/*h3 {*/
    /* Used for upsell headline */
    /*margin: 0 0 5px 0;*/
    /*padding-bottom: 3px;*/
/*}*/



/* LINKS AND BUTTONS
===============================================================*/

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*.codeButton {*/
    /*padding: 3px 15px 3px 15px;*/
    /*margin: 0 0 0 3px;*/
    /*cursor: pointer;*/
    /*float: right;*/
/*}*/

/*.continueButton {*/
    /*padding: 3px 15px 3px 15px;*/
    /*margin: 10px 0 20px 10px;*/
    /*cursor: pointer;*/
/*}*/

/*.upsellButton {*/
    /*margin: 0 0 0 1px;*/
    /*padding: 2px 8px 2px 8px;*/
    /*cursor: pointer;*/
/*}*/


/* #4 Form
================================================== */

input[type="text"] {
    font-family: 'salvo', sans-serif;
    width: 100%;
    margin-bottom: .625em;
    font-size: .875em;
    padding: .285714286em;
    border: solid 1px #ccc;
    background: #fff;
    box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,.1);
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

input[type="text"]:focus {
    outline: none;
    box-shadow: 0px 0px 4px 0px rgba(255,196,0,0.75);
    border: 1px solid #ccaa01;
}

select {
    margin-bottom: .75em;
}

select.full, span.full select {
    width: 100%;
}
span.half input{
    width: 50%; margin-right: 10px;
}
#verificationCode{
    width: 50%; margin-right: 10px;
    float: left;
}

select:focus {
    outline: none;
    box-shadow: 0px 0px 4px 0px rgba(255,196,0,0.75);
    border: 1px solid #ccaa01;
}

input[type="submit"],
.cta {
    background: #ffd401;
    border: none;
    border-bottom: 2px solid #ccaa01;
    font-size: 1em;
    font-weight: bold;
    color: #000;
    border-radius: 3px;
    padding: .75em;
    cursor: pointer;
    margin-bottom: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

a.cta {
    margin: 0px auto 1em;
    display: inline-block;
    text-decoration: none;
}

input[type="submit"]:hover,
.cta:hover {
    background: #dbb706;
}

.submit:focus,
.cta:focus {
    outline: none;
}

.submit:active,
.cta:active {
    position: relative;
    top: 1px;
    right: 0px;
    box-shadow: inset 0px 1px 10px 0px rgba(0,0,0,.3);
}

.cta-wraper {
    margin: 0px auto;
    width: 60%;
    max-width: 100%;
}

label {
    font-size: .875em;
    /*font-weight: bold;*/
}

label .optional {
    color: #999;
}

.optin-error {
    color: red;
    display: none;
    font-size: .888888889em;
}

.small {
    font-style: italic;;
    color: #999;
    margin-top: -5px;
    margin-bottom: .625em;
    font-size: .75em;
}

.small a {
    color: inherit;
    float: left;
    line-height: 2.916666667em;
    text-decoration: underline;
}

hr {
    background: #f5f5f5;
    height: 4px;
    border: none;
    margin: 2em 0px;
}

img.credit-cards {
    margin-top: 1em;
}

.side-by-side-inputs {
    width: 48%;
    float: left;
}

.side-by-side-inputs:first-child {
    margin-right: 4%;
}




/* #6 Clearing and Misc
================================================== */

img {
    max-width: 100%;
}

.center {
    text-align: center;
}

.left {
    float: left;
}

.right {
    float: right;
}

.centered {
    margin-right: auto;
    margin-left: auto;
}


/* Media Object */

.media { margin: 0px; }
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .media-image { float: left; margin-right: 20px; }
#rightCol .media .media-image img {
    border-radius: 9999px;
}
.media .media-image img { display: block; }
.media .media-imageExt { float: right; margin-left: 20px; }


/* Self Clearing Floats */

.group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* html .group { /* for IE6 */
    height: 1%
}
*:first-child+html .group { /* IE7 */
    min-height: 1px
}


/* KEITH EDITS
===============================================================*/

/* Move around the Product list to be more stylish */
/*#ORDER_FORM_PRODUCT_LIST{ position: relative; visibility: hidden; }*/
/*#ORDER_FORM_PRODUCT_LIST .cartThumb{*/
    /*position: absolute;*/
    /*top: 0; right: 0;*/
    /*visibility: visible;*/
    /*max-width: 120px;*/
/*}*/
/*#ORDER_FORM_PRODUCT_LIST h1{*/
    /*position: absolute;*/
    /*top: 0; left: 0;*/
    /*visibility: visible;*/
    /*width: 400px;*/
/*}*/
/*#ORDER_FORM_PRODUCT_LIST .productDescription{*/
    /*position: absolute;*/
    /*top: 80px;*/
    /*left: 0;*/
    /*visibility: visible;*/
    /*width: 400px;*/
/*}*/
/*#ORDER_FORM_PRODUCT_LIST .price{*/
    /*position: absolute;*/
    /*top: 35px;*/
    /*left: 0;*/
    /*visibility: visible;*/

    /*font-size: 1.125em;*/
    /*line-height: 1.6em;*/
/*}*/

/* Remove all traces of being a table */
.billingTable{ display: block; }
.billingTable tr, .billingTable td, .billingTable th{ display: inline; }

/* Remove Unneeded items */
#ORDER_FORM_SUMMARY{
    display: none;
}

rightpanel.html

<div class="panel">
                <img src="https://s3.amazonaws.com/iwt-website/assets/ramit-headshot-300x193.jpg" alt="ramit">
                <div class="panel-inner-wrap">
                    <p>I look forward to showing you my step-by-step system to start an online business -- and how you can get paid to share your passion with the world. Thanks for joining.</p>
                    <p><img src="https://s3.amazonaws.com/cdn.earn1k.com/sales-images/checkout-page/images/ramits-signature.png" alt=""></p>
                </div>
            </div>
            <p class="center"><img src="https://s3.amazonaws.com/cdn.earn1k.com/sales-images/checkout-page/images/60-day-guarantee.png" alt=""></p>
            <div class="panel">
              <!--  
              <div class="customer-support">
                    <p><strong>Need Help?</strong><br>
                        We’re here<br>
                        for you.</p>
                    <p><a id="live-support" class="button" href="#">Live Chat</a></p>
                </div>-->
            </div>
            <h3>Testimonials</h3>
                       <div class="media">
                <div class="media-image">
                    <img src="https://s3.amazonaws.com/cdn.earn1k.com/sales-images/checkout-page/images/nagina.jpg" alt="">
                </div>
                <div class="bd">
                    <p class="testimonial">
                        I launched my website, resulting in 105 subscribers from my first post. I have guest posted and now have 530 subscribers (in 1.5 months). I have also clearly branded myself and it is easier for me to reach out to others and get more interest and support in me writing guest posts.
                        <span class="from">- Nagina A.</span>
                    </p>
                </div>
            </div>

            <div class="media">
                <div class="media-image">
                    <img src="https://s3.amazonaws.com/cdn.earn1k.com/sales-images/checkout-page/images/primoz.jpg" alt="">
                </div>
                <div class="bd">
                    <p class="testimonial">
                        This course is awesome, it's really lifechanging. Everything is super clear to me now and I am able to move into the target market that I always wanted to work with, but just didn't know how to get into it.
                        <span class="from">- Primoz B.</span>
                    </p>
                </div>
            </div>

            <div class="media">
                <div class="media-image">
                    <img src="https://s3.amazonaws.com/cdn.earn1k.com/sales-images/checkout-page/images/maria.jpg" alt="">
                </div>
                <div class="bd">
                    <p class="testimonial">
                        I now know exactly who I need to contact. I also know exactly how to approach and talk to my audience. Not to mention, that I think I'll love my business a lot more in 2014!
                        <span class="from">- Maria B.</span>
                    </p>
                </div>
            </div>

</div>
    </div>