ginger
/
squarepay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
							<!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">
										</td>
									</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>