seandogg/orderConfirmation.html

## orderConfirmation.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width"/>
	<style>
	/**********************************************
	* Ink v1.0.5 - Copyright 2013 ZURB Inc        *
	**********************************************/

	/* Client-specific Styles & Reset */

	#outlook a {
	  padding:0;
	}

	body{
	  width:100% !important;
	  min-width: 100%;
	  -webkit-text-size-adjust:100%;
	  -ms-text-size-adjust:100%;
	  margin:0;
	  padding:0;
	}

	.ExternalClass {
	  width:100%;
	}

	.ExternalClass,
	.ExternalClass p,
	.ExternalClass span,
	.ExternalClass font,
	.ExternalClass td,
	.ExternalClass div {
	  line-height: 100%;
	}

	#backgroundTable {
	  margin:0;
	  padding:0;
	  width:100% !important;
	  line-height: 100% !important;
	}

	img {
	  outline:none;
	  text-decoration:none;
	  -ms-interpolation-mode: bicubic;
	  width: auto;
	  max-width: 100%;
	  float: left;
	  clear: both;
	  display: block;
	}

	center {
	  width: 100%;
	  min-width: 580px;
	}

	a img {
	  border: none;
	}

	p {
	  margin: 0 0 0 10px;
	}

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

	td {
	  word-break: break-word;
	  -webkit-hyphens: none;
	  -moz-hyphens: none;
	  hyphens: none;
	  border-collapse: collapse !important;
	}

	table, tr, td {
	  padding: 0;
	  vertical-align: top;
	  text-align: left;
	}

	hr {
	  color: #d9d9d9;
	  background-color: #d9d9d9;
	  height: 1px;
	  border: none;
	}

	/* Responsive Grid */

	table.body {
	  height: 100%;
	  width: 100%;
	}

	table.container {
	  width: 580px;
	  margin: 0 auto;
	  text-align: inherit;
	}

	table.row {
	  padding: 0px;
	  width: 100%;
	  position: relative;
	}

	table.container table.row {
	  display: block;
	}

	td.wrapper {
	  padding: 10px 20px 0px 0px;
	  position: relative;
	}

	table.columns,
	table.column {
	  margin: 0 auto;
	}

	table.columns td,
	table.column td {
	  padding: 0px 0px 10px;
	}

	table.columns td.sub-columns,
	table.column td.sub-columns,
	table.columns td.sub-column,
	table.column td.sub-column {
	  padding-right: 10px;
	}

	td.sub-column, td.sub-columns {
	  min-width: 0px;
	}

	table.row td.last,
	table.container td.last {
	  padding-right: 0px;
	}

	table.one { width: 30px; }
	table.two { width: 80px; }
	table.three { width: 130px; }
	table.four { width: 180px; }
	table.five { width: 230px; }
	table.six { width: 280px; }
	table.seven { width: 330px; }
	table.eight { width: 380px; }
	table.nine { width: 430px; }
	table.ten { width: 480px; }
	table.eleven { width: 530px; }
	table.twelve { width: 580px; }

	table.one center { min-width: 30px; }
	table.two center { min-width: 80px; }
	table.three center { min-width: 130px; }
	table.four center { min-width: 180px; }
	table.five center { min-width: 230px; }
	table.six center { min-width: 280px; }
	table.seven center { min-width: 330px; }
	table.eight center { min-width: 380px; }
	table.nine center { min-width: 430px; }
	table.ten center { min-width: 480px; }
	table.eleven center { min-width: 530px; }
	table.twelve center { min-width: 580px; }

	table.one .panel center { min-width: 10px; }
	table.two .panel center { min-width: 60px; }
	table.three .panel center { min-width: 110px; }
	table.four .panel center { min-width: 160px; }
	table.five .panel center { min-width: 210px; }
	table.six .panel center { min-width: 260px; }
	table.seven .panel center { min-width: 310px; }
	table.eight .panel center { min-width: 360px; }
	table.nine .panel center { min-width: 410px; }
	table.ten .panel center { min-width: 460px; }
	table.eleven .panel center { min-width: 510px; }
	table.twelve .panel center { min-width: 560px; }

	.body .columns td.one,
	.body .column td.one { width: 8.333333%; }
	.body .columns td.two,
	.body .column td.two { width: 16.666666%; }
	.body .columns td.three,
	.body .column td.three { width: 25%; }
	.body .columns td.four,
	.body .column td.four { width: 33.333333%; }
	.body .columns td.five,
	.body .column td.five { width: 41.666666%; }
	.body .columns td.six,
	.body .column td.six { width: 50%; }
	.body .columns td.seven,
	.body .column td.seven { width: 58.333333%; }
	.body .columns td.eight,
	.body .column td.eight { width: 66.666666%; }
	.body .columns td.nine,
	.body .column td.nine { width: 75%; }
	.body .columns td.ten,
	.body .column td.ten { width: 83.333333%; }
	.body .columns td.eleven,
	.body .column td.eleven { width: 91.666666%; }
	.body .columns td.twelve,
	.body .column td.twelve { width: 100%; }

	td.offset-by-one { padding-left: 50px; }
	td.offset-by-two { padding-left: 100px; }
	td.offset-by-three { padding-left: 150px; }
	td.offset-by-four { padding-left: 200px; }
	td.offset-by-five { padding-left: 250px; }
	td.offset-by-six { padding-left: 300px; }
	td.offset-by-seven { padding-left: 350px; }
	td.offset-by-eight { padding-left: 400px; }
	td.offset-by-nine { padding-left: 450px; }
	td.offset-by-ten { padding-left: 500px; }
	td.offset-by-eleven { padding-left: 550px; }

	td.expander {
	  visibility: hidden;
	  width: 0px;
	  padding: 0 !important;
	}

	table.columns .text-pad,
	table.column .text-pad {
	  padding-left: 10px;
	  padding-right: 10px;
	}

	table.columns .left-text-pad,
	table.columns .text-pad-left,
	table.column .left-text-pad,
	table.column .text-pad-left {
	  padding-left: 10px;
	}

	table.columns .right-text-pad,
	table.columns .text-pad-right,
	table.column .right-text-pad,
	table.column .text-pad-right {
	  padding-right: 10px;
	}

	/* Block Grid */

	.block-grid {
	  width: 100%;
	  max-width: 550px;
	}

	.block-grid td {
	  display: inline-block;
	  padding:10px;
	}

	.two-up td {
	  width:270px;
	}

	.three-up td {
	  width:173px;
	}

	.four-up td {
	  width:125px;
	}

	.five-up td {
	  width:96px;
	}

	.six-up td {
	  width:76px;
	}

	.seven-up td {
	  width:62px;
	}

	.eight-up td {
	  width:52px;
	}

	/* Alignment & Visibility Classes */

	table.center, td.center {
	  text-align: center;
	}

	h1.center,
	h2.center,
	h3.center,
	h4.center,
	h5.center,
	h6.center {
	  text-align: center;
	}

	span.center {
	  display: block;
	  width: 100%;
	  text-align: center;
	}

	img.center {
	  margin: 0 auto;
	  float: none;
	}

	.show-for-small,
	.hide-for-desktop {
	  display: none;
	}

	.right {
		text-align: right;
	}
	.left {
		text-align: left;
	}

	td.lesspadding {
		padding-top: 6px;
	}
	table.columns td.lesspadding, table.column td.lesspadding {
		padding-bottom: 0px;
	}
	p.margintop8 {
		margin-top: 8px;
	}
	td.line hr {
		margin: 0px;
	}

	/* Typography */

	body, table.body, h1, h2, h3, h4, h5, h6, p, td {
	  color: #222222;
	  /* font-family: "Helvetica", "Arial", sans-serif; */
	  font-family: "Georgia", "Times", serif;
	  font-weight: normal;
	  padding:0;
	  margin: 0;
	  text-align: center;
	  line-height: 1.3;
	}

	h1, h2, h3, h4, h5, h6 {
	  word-break: normal;
	  text-align: center;
	}

	h1 {font-size: 40px;}
	h2 {font-size: 36px;}
	h3 {font-size: 32px;}
	h4 {font-size: 28px;}
	h5 {font-size: 24px;}
	h6 {font-size: 20px;}
	body, table.body, p, td {font-size: 14px;line-height:19px;}

	p.lead, p.lede, p.leed {
	  font-size: 18px;
	  line-height:21px;
	}

	p {
	  margin-bottom: 10px;
	  text-align: center;
	  color: #606060;
	}

	small {
	  font-size: 10px;
	}

	a {
	  color: #e85e00;
	  text-decoration: none;
	}

	a:hover {
	  color: #fc7418 !important;
	}

	a:active {
	  color: #fc7418 !important;
	}

	a:visited {
	  color: #fc7418 !important;
	}

	h1 a,
	h2 a,
	h3 a,
	h4 a,
	h5 a,
	h6 a {
	  color: #e85e00;
	}

	h1 a:active,
	h2 a:active,
	h3 a:active,
	h4 a:active,
	h5 a:active,
	h6 a:active {
	  color: #fc7418 !important;
	}

	h1 a:visited,
	h2 a:visited,
	h3 a:visited,
	h4 a:visited,
	h5 a:visited,
	h6 a:visited {
	  color: #fc7418 !important;
	}

	.small {
		font-size: 12px;
		}
	.strong {
		font-weight: bold;
	}
	.emphasis {
		font-style: italic;
	}
	.red {
		color: red;
	}
	.light {
		color: #7d7d7d;
	}

	/* Panels */

	.panel {
	  background: #f2f2f2;
	  padding: 16px !important;
	}

	.sub-grid table {
	  width: 100%;
	}

	.sub-grid td.sub-columns {
	  padding-bottom: 0;
	}

	/* Buttons */

	table.button,
	table.tiny-button,
	table.small-button,
	table.medium-button,
	table.large-button {
	  width: 100%;
	  overflow: hidden;
	}

	table.button td,
	table.tiny-button td,
	table.small-button td,
	table.medium-button td,
	table.large-button td {
	  display: block;
	  width: auto !important;
	  text-align: center;
	  background: #e85e00;
	  color: #ffffff;
	  padding: 14px 0;
	}

	table.tiny-button td {
	  padding: 5px 0 4px;
	}

	table.small-button td {
	  padding: 8px 0 7px;
	}

	table.medium-button td {
	  padding: 12px 0 10px;
	}

	table.large-button td {
	  padding: 21px 0 18px;
	}

	table.button td a,
	table.tiny-button td a,
	table.small-button td a,
	table.medium-button td a,
	table.large-button td a {
	  font-weight: bold;
	  text-decoration: none;
	  font-family: Helvetica, Arial, sans-serif;
	  font-family: Georgia, Times, serif;
	  color: #ffffff !important;
	  font-size: 16px;
	}

	table.tiny-button td a {
	  font-size: 12px;
	  font-weight: normal;
	}

	table.small-button td a {
	  font-size: 16px;
	}

	table.medium-button td a {
	  font-size: 20px;
	}

	table.large-button td a {
	  font-size: 24px;
	}

	table.button:hover td,
	table.button:visited td,
	table.button:active td {
	  background: #fc7418 !important;
	}

	table.button:hover td a,
	table.button:visited td a,
	table.button:active td a {
	  color: #fff !important;
	}

	table.button:hover td,
	table.tiny-button:hover td,
	table.small-button:hover td,
	table.medium-button:hover td,
	table.large-button:hover td {
	  background: #fc7418 !important;
	}

	table.button:hover td a,
	table.button:active td a,
	table.button td a:visited,
	table.tiny-button:hover td a,
	table.tiny-button:active td a,
	table.tiny-button td a:visited,
	table.small-button:hover td a,
	table.small-button:active td a,
	table.small-button td a:visited,
	table.medium-button:hover td a,
	table.medium-button:active td a,
	table.medium-button td a:visited,
	table.large-button:hover td a,
	table.large-button:active td a,
	table.large-button td a:visited {
	  color: #ffffff !important;
	}

	table.secondary td {
	  background: #e9e9e9;
	  border-color: #d0d0d0;
	  color: #555;
	}

	table.secondary td a {
	  color: #555;
	}

	table.secondary:hover td {
	  background: #d0d0d0 !important;
	  color: #555;
	}

	table.secondary:hover td a,
	table.secondary td a:visited,
	table.secondary:active td a {
	  color: #555 !important;
	}

	table.success td {
	  background: #5da423;
	  border-color: #457a1a;
	}

	table.success:hover td {
	  background: #457a1a !important;
	}

	table.alert td {
	  background: #c60f13;
	  border-color: #970b0e;
	}

	table.alert:hover td {
	  background: #970b0e !important;
	}

	table.radius td {
	  -webkit-border-radius: 3px;
	  -moz-border-radius: 3px;
	  border-radius: 3px;
	}

	table.round td {
	  -webkit-border-radius: 500px;
	  -moz-border-radius: 500px;
	  border-radius: 500px;
	}

	/* Outlook First */

	body.outlook p {
	  display: inline !important;
	}

	.preheader{
			margin-top: 8px;
		}

	.header {
		margin-top: 0px;
	}

	/*  Media Queries */

	@media only screen and (max-width: 600px) {

	  table[class="body"] img {
	    width: auto !important;
	    height: auto !important;
	  }

	  table[class="body"] center {
	    min-width: 0 !important;
	  }

	  table[class="body"] .container {
	    width: 95% !important;
	  }

	  table[class="body"] .row {
	    width: 100% !important;
	    display: block !important;
	  }

	  table[class="body"] .wrapper {
	    display: block !important;
	    padding-right: 0 !important;
	  }

	  table[class="body"] .columns,
	  table[class="body"] .column {
	    table-layout: fixed !important;
	    float: none !important;
	    width: 100% !important;
	    padding-right: 0px !important;
	    padding-left: 0px !important;
	    display: block !important;
	  }

	  table[class="body"] .wrapper.first .columns,
	  table[class="body"] .wrapper.first .column {
	    display: table !important;
	  }

	  table[class="body"] table.columns td,
	  table[class="body"] table.column td {
	    width: 100% !important;
	  }

	  table[class="body"] .columns td.one,
	  table[class="body"] .column td.one { width: 8.333333% !important; }
	  table[class="body"] .columns td.two,
	  table[class="body"] .column td.two { width: 16.666666% !important; }
	  table[class="body"] .columns td.three,
	  table[class="body"] .column td.three { width: 25% !important; }
	  table[class="body"] .columns td.four,
	  table[class="body"] .column td.four { width: 33.333333% !important; }
	  table[class="body"] .columns td.five,
	  table[class="body"] .column td.five { width: 41.666666% !important; }
	  table[class="body"] .columns td.six,
	  table[class="body"] .column td.six { width: 50% !important; }
	  table[class="body"] .columns td.seven,
	  table[class="body"] .column td.seven { width: 58.333333% !important; }
	  table[class="body"] .columns td.eight,
	  table[class="body"] .column td.eight { width: 66.666666% !important; }
	  table[class="body"] .columns td.nine,
	  table[class="body"] .column td.nine { width: 75% !important; }
	  table[class="body"] .columns td.ten,
	  table[class="body"] .column td.ten { width: 83.333333% !important; }
	  table[class="body"] .columns td.eleven,
	  table[class="body"] .column td.eleven { width: 91.666666% !important; }
	  table[class="body"] .columns td.twelve,
	  table[class="body"] .column td.twelve { width: 100% !important; }

	  table[class="body"] td.offset-by-one,
	  table[class="body"] td.offset-by-two,
	  table[class="body"] td.offset-by-three,
	  table[class="body"] td.offset-by-four,
	  table[class="body"] td.offset-by-five,
	  table[class="body"] td.offset-by-six,
	  table[class="body"] td.offset-by-seven,
	  table[class="body"] td.offset-by-eight,
	  table[class="body"] td.offset-by-nine,
	  table[class="body"] td.offset-by-ten,
	  table[class="body"] td.offset-by-eleven {
	    padding-left: 0 !important;
	  }

	  table[class="body"] table.columns td.expander {
	    width: 1px !important;
	  }

	  table[class="body"] .right-text-pad,
	  table[class="body"] .text-pad-right {
	    padding-left: 10px !important;
	  }

	  table[class="body"] .left-text-pad,
	  table[class="body"] .text-pad-left {
	    padding-right: 10px !important;
	  }

	  table[class="body"] .hide-for-small,
	  table[class="body"] .show-for-desktop {
	    display: none !important;
	  }

	  table[class="body"] .show-for-small,
	  table[class="body"] .hide-for-desktop {
	    display: inherit !important;
	  }
	}
	</style>
</head>
<body>
  	<table class="body">
	    <tr>
	      	<td class="center" align="center" valign="top">
		        <center>
		        	<table class="container">
						<tr>
							<td>
							<!-- Preheader -->
							<table class="row">
								<tr>
									<td class="wrapper last lesspadding">
										<table class="twelve columns">
											<tr>
												<td class="lesspadding">
												<p class="small">
													Your order has been received.
												</p>
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<!-- Header -->
							<table class="row header">
								<tr>
									<td class="wrapper last header">
										<table class="twelve columns">
											<tr>
												<td>
												<!-- Use either a logo or your shop name as text. -->
												<!-- Shop Name -->
												<!-- ><h1><a href="{{ shop.url }}/?utm_source=notification&utm_medium=email&utm_campaign=order_confirmation">{{ shop.name }}</a></h1>					-->
																		<!-- Logo -->
												<a href="{{ shop.url }}/?utm_source=notification&utm_medium=email&utm_campaign=order_confirmation">{{ 'logo-email.png' | asset_url | img_tag: shop.name }}</a>
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<!-- Order Details -->
							<table class="row header">
								<tr>
									<td class="wrapper last">
										<table class="twelve columns">
											<tr>
												<td>
												<h4 class="center">Thank you for your order.</h4>
												<p class="margintop8">{% if billing_address.first_name %}Hi {{ billing_address.first_name }},<br />{% endif %}This is confirmation that we've received your order. Thank you!<br />Order {{ name }} | {{ date | date: "%B %d, %Y at %I:%M%p" }}</p>
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<!-- Shipping & Billing Address -->
							<table class="row">
								<tr>
									<td class="wrapper">
										<table class="six columns">
											<tr>
												<td class="center">
												<span class="small strong">Shipping Here</span><br />
												{% if requires_shipping %}
												{{ shipping_address.name }}<br />
												{{ shipping_address.street }}<br />
												{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}<br />
												{{ shipping_address.country }}
												{% else %}
												No shipping required.
												{% endif %}
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
									<td class="wrapper last">
										<table class="six columns">
											<tr>
												<td class="center">
												<span class="small strong">Paid By</span><br />
												{{ billing_address.name }}<br />
												{{ billing_address.street }}<br />
												{{ billing_address.city }}, {{ billing_address.province }} {{ billing_address.zip }}<br />
												{{ billing_address.country }}
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<!-- Line -->
							<table class="row">
						        <tr>
						          <td class="wrapper last line">
									  <table class="twelve columns">
										  <tr>
											  <td>
												  <hr />
											  </td>
											  <td class="expander"></td>
										  </tr>
									  </table>
						          </td>
						        </tr>
						    </table>
							<!-- Product Details -->
							<table class="row">
								<tr>
									<td class="wrapper">
										<table class="twelve columns lineitems">
											<tr class="lineitems">
												<td class="two sub-columns small left hide-for-small">
												</td>
												<td class="five sub-columns small left">
												Product
												</td>
												<td class="four sub-columns small">
												Quantity
												</td>
												<td class="one sub-columns last left">
												Price
												</td>
											</tr>

											{% for line in line_items %}
											<tr class="lineitems">
												<td class="two sub-columns hide-for-small">
													{% if line.line_item.product.featured_image %}<img src="{{ line.line_item.product.featured_image | product_img_url: 'thumb' }}" />{% endif %}
												</td>
												<td class="five sub-columns left">

												<!-- If your product has a '-' in the title this will mess it up. -->
												{% assign productTitle = line.title | split: '-' %}
													<strong>{{ productTitle[0] }}</strong><br />
													<span class="light">{{ productTitle[1] }}</span>
												</td>
												<td class="four sub-columns center">{{ line.quantity }}</td>
												<td class="one sub-columns left">{{ line.line_price | money }}</td>
											</tr>
											{% endfor %}

											{% if discounts %}
											<tr>
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns small strong red right">
													Discount
												</td>
												<td class="one sub-columns red left">
													{{ discounts_savings | money }}
												</td>
											</tr>
											<tr>
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns small strong right">
													Subtotal
												</td>
												<td class="one sub-columns left">{{ subtotal_price | money }}</td>
											</tr>
											{% else %}
											<tr>
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns small strong right">
													Subtotal
												</td>
												<td class="one sub-columns left">{{ subtotal_price | money }}</td>
											</tr>
											{% endif %}

											{% for tax_line in tax_lines %}
											<tr >
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns right small strong">
													{{ tax_line.title }}
												</td>
												<td class="one sub-columns left">{{ tax_line.price | money }}</td>
											</tr>
											{% endfor %}

											{% if requires_shipping %}
											<tr >
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns right small strong">
													Shipping
												</td>
												<td class="one sub-columns left">{{ shipping_price | money }}</td>
											</tr>
											{% endif %}

											<tr >
												<td class="two sub-columns hide-for-small"></td>
												<td class="five sub-columns"></td>
												<td class="four sub-columns right">
													<h5 class="right">Total</h5>

												</td>
												<td class="one sub-columns">
													<h5 class="left">{{ total_price | money }}</h5>
												</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<!-- Line -->
							<table class="row">
						        <tr>
						          <td class="wrapper last line">
									  <table class="twelve columns">
										  <tr>
											  <td>
												  <hr />
											  </td>
											  <td class="expander"></td>
										  </tr>
									  </table>
						          </td>
						        </tr>
						    </table>
							<!-- Customer Service -->
							<table class="row">
								<tr>
									<td class="wrapper last">
										<table class="twelve columns">
											<tr>
												<td>
													<p><span class="strong">Questions about your order?</span><br />Simply reply to this email and we'll answer any questions you have.</p>
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							<!-- Footer -->
							<table class="row">
								<tr>
									<td class="wrapper last lesspadding">
										<table class="twelve columns">
											<tr>
												<td class="lesspadding"><p class="emphasis small"><span class="strong"></span><br /><a href="{{ shop.url }}/?utm_source=notification&utm_medium=email&utm_campaign=order_confirmation"> {{ 'xo-angela.jpg' | asset_url | img_tag: shop.name }} </a></p>
												</td>
												<td class="expander"></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
							</td>
						</tr>
					</table>
		        </center>
	      	</td>
	    </tr>
  	</table>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width"/>
	<style>
	/**********************************************
	* Ink v1.0.5 - Copyright 2013 ZURB Inc *
	**********************************************/

	/* Client-specific Styles & Reset */

	#outlook a {
	padding:0;
	}

	body{
	width:100% !important;
	min-width: 100%;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	margin:0;
	padding:0;
	}

	.ExternalClass {
	width:100%;
	}

	.ExternalClass,
	.ExternalClass p,
	.ExternalClass span,
	.ExternalClass font,
	.ExternalClass td,
	.ExternalClass div {
	line-height: 100%;
	}

	#backgroundTable {
	margin:0;
	padding:0;
	width:100% !important;
	line-height: 100% !important;
	}

	img {
	outline:none;
	text-decoration:none;
	-ms-interpolation-mode: bicubic;
	width: auto;
	max-width: 100%;
	float: left;
	clear: both;
	display: block;
	}

	center {
	width: 100%;
	min-width: 580px;
	}

	a img {
	border: none;
	}

	p {
	margin: 0 0 0 10px;
	}

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

	td {
	word-break: break-word;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;
	border-collapse: collapse !important;
	}

	table, tr, td {
	padding: 0;
	vertical-align: top;
	text-align: left;
	}

	hr {
	color: #d9d9d9;
	background-color: #d9d9d9;
	height: 1px;
	border: none;
	}

	/* Responsive Grid */

	table.body {
	height: 100%;
	width: 100%;
	}

	table.container {
	width: 580px;
	margin: 0 auto;
	text-align: inherit;
	}

	table.row {
	padding: 0px;
	width: 100%;
	position: relative;
	}

	table.container table.row {
	display: block;
	}

	td.wrapper {
	padding: 10px 20px 0px 0px;
	position: relative;
	}

	table.columns,
	table.column {
	margin: 0 auto;
	}

	table.columns td,
	table.column td {
	padding: 0px 0px 10px;
	}

	table.columns td.sub-columns,
	table.column td.sub-columns,
	table.columns td.sub-column,
	table.column td.sub-column {
	padding-right: 10px;
	}

	td.sub-column, td.sub-columns {
	min-width: 0px;
	}

	table.row td.last,
	table.container td.last {
	padding-right: 0px;
	}

	table.one { width: 30px; }
	table.two { width: 80px; }
	table.three { width: 130px; }
	table.four { width: 180px; }
	table.five { width: 230px; }
	table.six { width: 280px; }
	table.seven { width: 330px; }
	table.eight { width: 380px; }
	table.nine { width: 430px; }
	table.ten { width: 480px; }
	table.eleven { width: 530px; }
	table.twelve { width: 580px; }

	table.one center { min-width: 30px; }
	table.two center { min-width: 80px; }
	table.three center { min-width: 130px; }
	table.four center { min-width: 180px; }
	table.five center { min-width: 230px; }
	table.six center { min-width: 280px; }
	table.seven center { min-width: 330px; }
	table.eight center { min-width: 380px; }
	table.nine center { min-width: 430px; }
	table.ten center { min-width: 480px; }
	table.eleven center { min-width: 530px; }
	table.twelve center { min-width: 580px; }

	table.one .panel center { min-width: 10px; }
	table.two .panel center { min-width: 60px; }
	table.three .panel center { min-width: 110px; }
	table.four .panel center { min-width: 160px; }
	table.five .panel center { min-width: 210px; }
	table.six .panel center { min-width: 260px; }
	table.seven .panel center { min-width: 310px; }
	table.eight .panel center { min-width: 360px; }
	table.nine .panel center { min-width: 410px; }
	table.ten .panel center { min-width: 460px; }
	table.eleven .panel center { min-width: 510px; }
	table.twelve .panel center { min-width: 560px; }

	.body .columns td.one,
	.body .column td.one { width: 8.333333%; }
	.body .columns td.two,
	.body .column td.two { width: 16.666666%; }
	.body .columns td.three,
	.body .column td.three { width: 25%; }
	.body .columns td.four,
	.body .column td.four { width: 33.333333%; }
	.body .columns td.five,
	.body .column td.five { width: 41.666666%; }
	.body .columns td.six,
	.body .column td.six { width: 50%; }
	.body .columns td.seven,
	.body .column td.seven { width: 58.333333%; }
	.body .columns td.eight,
	.body .column td.eight { width: 66.666666%; }
	.body .columns td.nine,
	.body .column td.nine { width: 75%; }
	.body .columns td.ten,
	.body .column td.ten { width: 83.333333%; }
	.body .columns td.eleven,
	.body .column td.eleven { width: 91.666666%; }
	.body .columns td.twelve,
	.body .column td.twelve { width: 100%; }

	td.offset-by-one { padding-left: 50px; }
	td.offset-by-two { padding-left: 100px; }
	td.offset-by-three { padding-left: 150px; }
	td.offset-by-four { padding-left: 200px; }
	td.offset-by-five { padding-left: 250px; }
	td.offset-by-six { padding-left: 300px; }
	td.offset-by-seven { padding-left: 350px; }
	td.offset-by-eight { padding-left: 400px; }
	td.offset-by-nine { padding-left: 450px; }
	td.offset-by-ten { padding-left: 500px; }
	td.offset-by-eleven { padding-left: 550px; }

	td.expander {
	visibility: hidden;
	width: 0px;
	padding: 0 !important;
	}

	table.columns .text-pad,
	table.column .text-pad {
	padding-left: 10px;
	padding-right: 10px;
	}

	table.columns .left-text-pad,
	table.columns .text-pad-left,
	table.column .left-text-pad,
	table.column .text-pad-left {
	padding-left: 10px;
	}

	table.columns .right-text-pad,
	table.columns .text-pad-right,
	table.column .right-text-pad,
	table.column .text-pad-right {
	padding-right: 10px;
	}

	/* Block Grid */

	.block-grid {
	width: 100%;
	max-width: 550px;
	}

	.block-grid td {
	display: inline-block;
	padding:10px;
	}

	.two-up td {
	width:270px;
	}

	.three-up td {
	width:173px;
	}

	.four-up td {
	width:125px;
	}

	.five-up td {
	width:96px;
	}

	.six-up td {
	width:76px;
	}

	.seven-up td {
	width:62px;
	}

	.eight-up td {
	width:52px;
	}

	/* Alignment & Visibility Classes */

	table.center, td.center {
	text-align: center;
	}

	h1.center,
	h2.center,
	h3.center,
	h4.center,
	h5.center,
	h6.center {
	text-align: center;
	}

	span.center {
	display: block;
	width: 100%;
	text-align: center;
	}

	img.center {
	margin: 0 auto;
	float: none;
	}

	.show-for-small,
	.hide-for-desktop {
	display: none;
	}

	.right {
	text-align: right;
	}
	.left {
	text-align: left;
	}

	td.lesspadding {
	padding-top: 6px;
	}
	table.columns td.lesspadding, table.column td.lesspadding {
	padding-bottom: 0px;
	}
	p.margintop8 {
	margin-top: 8px;
	}
	td.line hr {
	margin: 0px;
	}

	/* Typography */

	body, table.body, h1, h2, h3, h4, h5, h6, p, td {
	color: #222222;
	/* font-family: "Helvetica", "Arial", sans-serif; */
	font-family: "Georgia", "Times", serif;
	font-weight: normal;
	padding:0;
	margin: 0;
	text-align: center;
	line-height: 1.3;
	}

	h1, h2, h3, h4, h5, h6 {
	word-break: normal;
	text-align: center;
	}

	h1 {font-size: 40px;}
	h2 {font-size: 36px;}
	h3 {font-size: 32px;}
	h4 {font-size: 28px;}
	h5 {font-size: 24px;}
	h6 {font-size: 20px;}
	body, table.body, p, td {font-size: 14px;line-height:19px;}

	p.lead, p.lede, p.leed {
	font-size: 18px;
	line-height:21px;
	}

	p {
	margin-bottom: 10px;
	text-align: center;
	color: #606060;
	}

	small {
	font-size: 10px;
	}

	a {
	color: #e85e00;
	text-decoration: none;
	}

	a:hover {
	color: #fc7418 !important;
	}

	a:active {
	color: #fc7418 !important;
	}

	a:visited {
	color: #fc7418 !important;
	}

	h1 a,
	h2 a,
	h3 a,
	h4 a,
	h5 a,
	h6 a {
	color: #e85e00;
	}

	h1 a:active,
	h2 a:active,
	h3 a:active,
	h4 a:active,
	h5 a:active,
	h6 a:active {
	color: #fc7418 !important;
	}

	h1 a:visited,
	h2 a:visited,
	h3 a:visited,
	h4 a:visited,
	h5 a:visited,
	h6 a:visited {
	color: #fc7418 !important;
	}

	.small {
	font-size: 12px;
	}
	.strong {
	font-weight: bold;
	}
	.emphasis {
	font-style: italic;
	}
	.red {
	color: red;
	}
	.light {
	color: #7d7d7d;
	}

	/* Panels */

	.panel {
	background: #f2f2f2;
	padding: 16px !important;
	}

	.sub-grid table {
	width: 100%;
	}

	.sub-grid td.sub-columns {
	padding-bottom: 0;
	}

	/* Buttons */

	table.button,
	table.tiny-button,
	table.small-button,
	table.medium-button,
	table.large-button {
	width: 100%;
	overflow: hidden;
	}

	table.button td,
	table.tiny-button td,
	table.small-button td,
	table.medium-button td,
	table.large-button td {
	display: block;
	width: auto !important;
	text-align: center;
	background: #e85e00;
	color: #ffffff;
	padding: 14px 0;
	}

	table.tiny-button td {
	padding: 5px 0 4px;
	}

	table.small-button td {
	padding: 8px 0 7px;
	}

	table.medium-button td {
	padding: 12px 0 10px;
	}

	table.large-button td {
	padding: 21px 0 18px;
	}

	table.button td a,
	table.tiny-button td a,
	table.small-button td a,
	table.medium-button td a,
	table.large-button td a {
	font-weight: bold;
	text-decoration: none;
	font-family: Helvetica, Arial, sans-serif;
	font-family: Georgia, Times, serif;
	color: #ffffff !important;
	font-size: 16px;
	}

	table.tiny-button td a {
	font-size: 12px;
	font-weight: normal;
	}

	table.small-button td a {
	font-size: 16px;
	}

	table.medium-button td a {
	font-size: 20px;
	}

	table.large-button td a {
	font-size: 24px;
	}

	table.button:hover td,
	table.button:visited td,
	table.button:active td {
	background: #fc7418 !important;
	}

	table.button:hover td a,
	table.button:visited td a,
	table.button:active td a {
	color: #fff !important;
	}

	table.button:hover td,
	table.tiny-button:hover td,
	table.small-button:hover td,
	table.medium-button:hover td,
	table.large-button:hover td {
	background: #fc7418 !important;
	}

	table.button:hover td a,
	table.button:active td a,
	table.button td a:visited,
	table.tiny-button:hover td a,
	table.tiny-button:active td a,
	table.tiny-button td a:visited,
	table.small-button:hover td a,
	table.small-button:active td a,
	table.small-button td a:visited,
	table.medium-button:hover td a,
	table.medium-button:active td a,
	table.medium-button td a:visited,
	table.large-button:hover td a,
	table.large-button:active td a,
	table.large-button td a:visited {
	color: #ffffff !important;
	}

	table.secondary td {
	background: #e9e9e9;
	border-color: #d0d0d0;
	color: #555;
	}

	table.secondary td a {
	color: #555;
	}

	table.secondary:hover td {
	background: #d0d0d0 !important;
	color: #555;
	}

	table.secondary:hover td a,
	table.secondary td a:visited,
	table.secondary:active td a {
	color: #555 !important;
	}

	table.success td {
	background: #5da423;
	border-color: #457a1a;
	}

	table.success:hover td {
	background: #457a1a !important;
	}

	table.alert td {
	background: #c60f13;
	border-color: #970b0e;
	}

	table.alert:hover td {
	background: #970b0e !important;
	}

	table.radius td {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}

	table.round td {
	-webkit-border-radius: 500px;
	-moz-border-radius: 500px;
	border-radius: 500px;
	}

	/* Outlook First */

	body.outlook p {
	display: inline !important;
	}

	.preheader{
	margin-top: 8px;
	}

	.header {
	margin-top: 0px;
	}

	/* Media Queries */

	@media only screen and (max-width: 600px) {

	table[class="body"] img {
	width: auto !important;
	height: auto !important;
	}

	table[class="body"] center {
	min-width: 0 !important;
	}

	table[class="body"] .container {
	width: 95% !important;
	}

	table[class="body"] .row {
	width: 100% !important;
	display: block !important;
	}

	table[class="body"] .wrapper {
	display: block !important;
	padding-right: 0 !important;
	}

	table[class="body"] .columns,
	table[class="body"] .column {
	table-layout: fixed !important;
	float: none !important;
	width: 100% !important;
	padding-right: 0px !important;
	padding-left: 0px !important;
	display: block !important;
	}

	table[class="body"] .wrapper.first .columns,
	table[class="body"] .wrapper.first .column {
	display: table !important;
	}

	table[class="body"] table.columns td,
	table[class="body"] table.column td {
	width: 100% !important;
	}

	table[class="body"] .columns td.one,
	table[class="body"] .column td.one { width: 8.333333% !important; }
	table[class="body"] .columns td.two,
	table[class="body"] .column td.two { width: 16.666666% !important; }
	table[class="body"] .columns td.three,
	table[class="body"] .column td.three { width: 25% !important; }
	table[class="body"] .columns td.four,
	table[class="body"] .column td.four { width: 33.333333% !important; }
	table[class="body"] .columns td.five,
	table[class="body"] .column td.five { width: 41.666666% !important; }
	table[class="body"] .columns td.six,
	table[class="body"] .column td.six { width: 50% !important; }
	table[class="body"] .columns td.seven,
	table[class="body"] .column td.seven { width: 58.333333% !important; }
	table[class="body"] .columns td.eight,
	table[class="body"] .column td.eight { width: 66.666666% !important; }
	table[class="body"] .columns td.nine,
	table[class="body"] .column td.nine { width: 75% !important; }
	table[class="body"] .columns td.ten,
	table[class="body"] .column td.ten { width: 83.333333% !important; }
	table[class="body"] .columns td.eleven,
	table[class="body"] .column td.eleven { width: 91.666666% !important; }
	table[class="body"] .columns td.twelve,
	table[class="body"] .column td.twelve { width: 100% !important; }

	table[class="body"] td.offset-by-one,
	table[class="body"] td.offset-by-two,
	table[class="body"] td.offset-by-three,
	table[class="body"] td.offset-by-four,
	table[class="body"] td.offset-by-five,
	table[class="body"] td.offset-by-six,
	table[class="body"] td.offset-by-seven,
	table[class="body"] td.offset-by-eight,
	table[class="body"] td.offset-by-nine,
	table[class="body"] td.offset-by-ten,
	table[class="body"] td.offset-by-eleven {
	padding-left: 0 !important;
	}

	table[class="body"] table.columns td.expander {
	width: 1px !important;
	}

	table[class="body"] .right-text-pad,
	table[class="body"] .text-pad-right {
	padding-left: 10px !important;
	}

	table[class="body"] .left-text-pad,
	table[class="body"] .text-pad-left {
	padding-right: 10px !important;
	}

	table[class="body"] .hide-for-small,
	table[class="body"] .show-for-desktop {
	display: none !important;
	}

	table[class="body"] .show-for-small,
	table[class="body"] .hide-for-desktop {
	display: inherit !important;
	}
	}
	</style>
	</head>
	<body>
	<table class="body">
	<tr>
	<td class="center" align="center" valign="top">
	<center>
	<table class="container">
	<tr>
	<td>
	<!-- Preheader -->
	<table class="row">
	<tr>
	<td class="wrapper last lesspadding">
	<table class="twelve columns">
	<tr>
	<td class="lesspadding">
	<p class="small">
	Your order has been received.
	</p>
	</td>
	<td class="expander"></td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	<!-- Header -->
	<table class="row header">
	<tr>
	<td class="wrapper last header">
	<table class="twelve columns">
	<tr>
	<td>
	<!-- Use either a logo or your shop name as text. -->
	<!-- Shop Name -->
	<!-- ><h1><a href="{{ shop.url }}/?utm_source=notification&utm_medium=email&utm_campaign=order_confirmation">{{ shop.name }}</a></h1> -->
	<!-- Logo -->
	<a href="{{ shop.url }}/?utm_source=notification&utm_medium=email&utm_campaign=order_confirmation">{{ 'logo-email.png' \| asset_url \| img_tag: shop.name }}</a>
	</td>
	<td class="expander"></td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	<!-- Order Details -->
	<table class="row header">
	<tr>
	<td class="wrapper last">
	<table class="twelve columns">
	<tr>
	<td>
	<h4 class="center">Thank you for your order.</h4>
	<p class="margintop8">{% if billing_address.first_name %}Hi {{ billing_address.first_name }},<br />{% endif %}This is confirmation that we've received your order. Thank you!<br />Order {{ name }} \| {{ date \| date: "%B %d, %Y at %I:%M%p" }}</p>
	</td>
	<td class="expander"></td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	<!-- Shipping & Billing Address -->
	<table class="row">
	<tr>
	<td class="wrapper">
	<table class="six columns">
	<tr>
	<td class="center">
	<span class="small strong">Shipping Here</span><br />
	{% if requires_shipping %}
	{{ shipping_address.name }}<br />
	{{ shipping_address.street }}<br />
	{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}<br />
	{{ shipping_address.country }}
	{% else %}
	No shipping required.
	{% endif %}
	</td>
	<td class="expander"></td>
	</tr>
	</table>
	</td>
	<td class="wrapper last">
	<table class="six columns">
	<tr>
	<td class="center">
	<span class="small strong">Paid By</span><br />
	{{ billing_address.name }}<br />
	{{ billing_address.street }}<br />
	{{ billing_address.city }}, {{ billing_address.province }} {{ billing_address.zip }}<br />
	{{ billing_address.country }}
	</td>
	<td class="expander"></td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	<!-- Line -->
	<table class="row">
	<tr>
	<td class="wrapper last line">
	<table class="twelve columns">
	<tr>
	<td>
	<hr />
	</td>
	<td class="expander"></td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	<!-- Product Details -->
	<table class="row">
	<tr>
	<td class="wrapper">
	<table class="twelve columns lineitems">
	<tr class="lineitems">
	<td class="two sub-columns small left hide-for-small">
	</td>
	<td class="five sub-columns small left">
	Product
	</td>
	<td class="four sub-columns small">
	Quantity
	</td>
	<td class="one sub-columns last left">
	Price
	</td>
	</tr>

	{% for line in line_items %}
	<tr class="lineitems">
	<td class="two sub-columns hide-for-small">
	{% if line.line_item.product.featured_image %}<img src="{{ line.line_item.product.featured_image \| product_img_url: 'thumb' }}" />{% endif %}
	</td>
	<td class="five sub-columns left">

	<!-- If your product has a '-' in the title this will mess it up. -->
	{% assign productTitle = line.title \| split: '-' %}
	<strong>{{ productTitle[0] }}</strong><br />
	<span class="light">{{ productTitle[1] }}</span>
	</td>
	<td class="four sub-columns center">{{ line.quantity }}</td>
	<td class="one sub-columns left">{{ line.line_price \| money }}</td>
	</tr>
	{% endfor %}

	{% if discounts %}
	<tr>
	<td class="two sub-columns hide-for-small"></td>
	<td class="five sub-columns"></td>
	<td class="four sub-columns small strong red right">
	Discount
	</td>
	<td class="one sub-columns red left">
	{{ discounts_savings \| money }}
	</td>
	</tr>
	<tr>
	<td class="two sub-columns hide-for-small"></td>
	<td class="five sub-columns"></td>
	<td class="four sub-columns small strong right">
	Subtotal
	</td>
	<td class="one sub-columns left">{{ subtotal_price \| money }}</td>
	</tr>
	{% else %}
	<tr>
	<td class="two sub-columns hide-for-small"></td>
	<td class="five sub-columns"></td>
	<td class="four sub-columns small strong right">
	Subtotal
	</td>
	<td class="one sub-columns left">{{ subtotal_price \| money }}</td>
	</tr>
	{% endif %}

	{% for tax_line in tax_lines %}
	<tr >
	<td class="two sub-columns hide-for-small"></td>
	<td class="five sub-columns"></td>
	<td class="four sub-columns right small strong">
	{{ tax_line.title }}
	</td>
	<td class="one sub-columns left">{{ tax_line.price \| money }}</td>
	</tr>
	{% endfor %}

	{% if requires_shipping %}
	<tr >
	<td class="two sub-columns hide-for-small"></td>
	<td class="five sub-columns"></td>
	<td class="four sub-columns right small strong">
	Shipping
	</td>
	<td class="one sub-columns left">{{ shipping_price \| money }}</td>
	</tr>
	{% endif %}

	<tr >
	<td class="two sub-columns hide-for-small"></td>
	<td class="five sub-columns"></td>
	<td class="four sub-columns right">
	<h5 class="right">Total</h5>

	</td>
	<td class="one sub-columns">
	<h5 class="left">{{ total_price \| money }}</h5>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	<!-- Line -->
	<table class="row">
	<tr>
	<td class="wrapper last line">
	<table class="twelve columns">
	<tr>
	<td>
	<hr />
	</td>
	<td class="expander"></td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	<!-- Customer Service -->
	<table class="row">
	<tr>
	<td class="wrapper last">
	<table class="twelve columns">
	<tr>
	<td>
	<p><span class="strong">Questions about your order?</span><br />Simply reply to this email and we'll answer any questions you have.</p>
	</td>
	<td class="expander"></td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	<!-- Footer -->
	<table class="row">
	<tr>
	<td class="wrapper last lesspadding">
	<table class="twelve columns">
	<tr>
	<td class="lesspadding"><p class="emphasis small"><span class="strong"></span><br /><a href="{{ shop.url }}/?utm_source=notification&utm_medium=email&utm_campaign=order_confirmation"> {{ 'xo-angela.jpg' \| asset_url \| img_tag: shop.name }} </a></p>
	</td>
	<td class="expander"></td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	</center>
	</td>
	</tr>
	</table>
	</body>
	</html>