ginger
/
squarepay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
							<!doctype html>
<html>
  <head>
	<meta name="viewport" content="width=device-width" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>The Grand Expedition Order Confirmation</title>
	<style>
	  /* -------------------------------------
		  GLOBAL RESETS
	  ------------------------------------- */
	  
	  /*All the styling goes here*/
	  
	  img {
		border: none;
		-ms-interpolation-mode: bicubic;
		max-width: 100%; 
	  }

	  body {
		background-color: #f6f6f6;
		font-family: sans-serif;
		-webkit-font-smoothing: antialiased;
		font-size: 14px;
		line-height: 1.4;
		margin: 0;
		padding: 0;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%; 
	  }

	  table {
		border-collapse: separate;
		mso-table-lspace: 0pt;
		mso-table-rspace: 0pt;
		width: 100%; }
		table td {
		  font-family: sans-serif;
		  font-size: 14px;
		  vertical-align: top; 
	  }

	  /* -------------------------------------
		  BODY & CONTAINER
	  ------------------------------------- */

	  .body {
		background-color: #f6f6f6;
		width: 100%; 
	  }

	  /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
	  .container {
		display: block;
		Margin: 0 auto !important;
		/* makes it centered */
		max-width: 580px;
		padding: 10px;
		width: 580px; 
	  }

	  /* This should also be a block element, so that it will fill 100% of the .container */
	  .content {
		box-sizing: border-box;
		display: block;
		Margin: 0 auto;
		max-width: 580px;
		padding: 10px; 
	  }

	  /* -------------------------------------
		  HEADER, FOOTER, MAIN
	  ------------------------------------- */
	  .main {
		background: #0f193c;
		border-radius: 3px;
		width: 100%; 
	  }

	  .wrapper {
		box-sizing: border-box;
		padding: 40px; 
	  }

	  .content-block {
		padding-bottom: 10px;
		padding-top: 10px;
	  }

	  .footer {
		background: #0f193c;
		clear: both;
		Margin-top: 10px;
		text-align: center;
		width: 100%; 
	  }
		.footer td,
		.footer p,
		.footer span,
		.footer a {
		  color: #999999;
		  font-size: 12px;
		  text-align: center; 
	  }

	  /* -------------------------------------
		  TYPOGRAPHY
	  ------------------------------------- */
	  h1,
	  h2,
	  h3,
	  h4 {
		color: #eeeeee;
		font-family: sans-serif;
		font-weight: 400;
		line-height: 1.4;
		margin: 0;
		margin-bottom: 30px; 
	  }

	  h1 {
		font-size: 35px;
		font-weight: 300;
		text-align: center;
		text-transform: capitalize; 
	  }

	  p,
	  ul,
	  ol {
		color: #eeeeee;
		font-family: sans-serif;
		font-size: 14px;
		font-weight: normal;
		margin: 0;
		margin-bottom: 15px; 
	  }
		p li,
		ul li,
		ol li {
		  list-style-position: inside;
		  margin-left: 5px; 
	  }

	  a {
		color: #3498db;
		text-decoration: underline; 
	  }

	  td {
		 color: #eeeeee;
	  }

	  /* -------------------------------------
		  OTHER STYLES THAT MIGHT BE USEFUL
	  ------------------------------------- */
	  .last {
		margin-bottom: 0; 
	  }

	  .first {
		margin-top: 0; 
	  }

	  .align-center {
		text-align: center; 
	  }

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

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

	  .clear {
		clear: both; 
	  }

	  .mt0 {
		margin-top: 0; 
	  }

	  .mb0 {
		margin-bottom: 0; 
	  }

	  .preheader {
		color: transparent;
		display: none;
		height: 0;
		max-height: 0;
		max-width: 0;
		opacity: 0;
		overflow: hidden;
		mso-hide: all;
		visibility: hidden;
		width: 0; 
	  }

	  .powered-by a {
		text-decoration: none; 
	  }

	  hr {
		border: 0;
		border-bottom: 1px solid #f6f6f6;
		Margin: 20px 0; 
	  }

	  /* -------------------------------------
		  RESPONSIVE AND MOBILE FRIENDLY STYLES
	  ------------------------------------- */
	  @media only screen and (max-width: 620px) {
		table[class=body] h1 {
		  font-size: 28px !important;
		  margin-bottom: 10px !important; 
		}
		table[class=body] p,
		table[class=body] ul,
		table[class=body] ol,
		table[class=body] td,
		table[class=body] span,
		table[class=body] a {
		  font-size: 16px !important; 
		}
		table[class=body] .wrapper,
		table[class=body] .article {
		  padding: 10px !important; 
		}
		table[class=body] .content {
		  padding: 0 !important; 
		}
		table[class=body] .container {
		  padding: 0 !important;
		  width: 100% !important; 
		}
		table[class=body] .main {
		  border-left-width: 0 !important;
		  border-radius: 0 !important;
		  border-right-width: 0 !important; 
		}
		table[class=body] .btn table {
		  width: 100% !important; 
		}
		table[class=body] .btn a {
		  width: 100% !important; 
		}
		table[class=body] .img-responsive {
		  height: auto !important;
		  max-width: 100% !important;
		  width: auto !important; 
		}
	  }

	  /* -------------------------------------
		  PRESERVE THESE STYLES IN THE HEAD
	  ------------------------------------- */
	  @media all {
		.ExternalClass {
		  width: 100%; 
		}
		.ExternalClass,
		.ExternalClass p,
		.ExternalClass span,
		.ExternalClass font,
		.ExternalClass td,
		.ExternalClass div {
		  line-height: 100%; 
		}
		.apple-link a {
		  color: inherit !important;
		  font-family: inherit !important;
		  font-size: inherit !important;
		  font-weight: inherit !important;
		  line-height: inherit !important;
		  text-decoration: none !important; 
		}
		.btn-primary table td:hover {
		  background-color: #34495e !important; 
		}
		.btn-primary a:hover {
		  background-color: #34495e !important;
		  border-color: #34495e !important; 
		} 
	  }

	</style>
  </head>
  <body class="">
	<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
		<tr>
			<td>&nbsp;</td>
			<td class="container">
				<div class="content">

					<!-- START CENTERED WHITE CONTAINER -->
					<span class="preheader">The Grand Expedition Order Confirmation</span>
					<table role="presentation" class="main">
						<!-- START MAIN CONTENT AREA -->
						<tr>
							<td class="wrapper">
								<table role="presentation" border="0" cellpadding="0" cellspacing="0">
									<tr>
										<td align="center">
											<img src="https://www.thegrandexpedition.co.uk/theme/grandexpedition/assets/images/sprites/balloon.png" width="15%" style="float: right; margin-right: 30px">
											<img src="https://www.thegrandexpedition.co.uk/theme/grandexpedition/assets/images/sprites/shining-star-2.png" width="25%" style="float: left">
										</rd>
									</tr>
									<tr>
										<td align="center">
											<img src="https://www.thegrandexpedition.co.uk/theme/grandexpedition/assets/images/type/type-gingerline.png" width="35%" style="margin-bottom: 10px"><br>
											<img src="https://www.thegrandexpedition.co.uk/theme/grandexpedition/assets/images/type/type-the-grand-expedition.png" width="100%">
											<br>
											<br>
											<br>
										</td>
									</tr>
									<tr>
										<td>

											<br>

											<p>Dear {{ name }},</p>
											<p>Thank you for your order.</p>
											<p>We look forward to seeing you on The Grand Expedition.</p>
											
											<br>

											<table role="presentation" border="0" cellpadding="3" cellspacing="1" bgcolor="#777777">
												<tbody>
													{% for line in basket %}
														<tr bgcolor="#0f193c">
															<td color="#eeeeee" align="left">{{ line.quantity }} x {{ line.name }}</td>
															<td color="#eeeeee" align="right">£{{ (line.total / 100) | number_format(2, '.', ',') }}</td>
														</tr>
													{% endfor %}
													<tr bgcolor="#0f193c">
														<td colspan="2" color="#eeeeee" align="right"><b>£{{ (total / 100) | number_format(2, '.', ',') }}</b></td>
													</tr>
												</tbody>
											</table>

											<br>

											<p>
											Booked by {{ booker }} for {{ date | date("F jS Y") }}.
											</p>

										</td>
									</tr>
								</table>
							</td>
						</tr>
						<!-- END MAIN CONTENT AREA -->
					</table>

					<!-- START FOOTER -->
					<div class="footer">
						<table role="presentation" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td class="content-block">
									<span class="apple-link">Gingerline, IBEX House, 162-164 Arthur Road, Wimbledon, London, SW19 8AQ</span>
								</td>
							</tr>
						</table>
					</div>
					<!-- END FOOTER -->

		  	<!-- END CENTERED WHITE CONTAINER -->
			</div>
		</td>
		<td>&nbsp;</td>
		</tr>
	</table>
</body>
</html>