tessguefen
6/9/2015 - 8:03 PM
BRP Email Templates / Responsive (not in outlook though)
BRP Email Templates / Responsive (not in outlook though)
If you run the basic through a converter for inlined CSS (mailchimp), it will add code to <mvt> items<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<head style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<!-- If you delete this meta tag, Half Life 3 will never be released. -->
<meta name="viewport" content="width=device-width" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<title style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">Blue Rose Pottery - Order Confirmation</title>
<style style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family: Verdana, Geneva, sans-serif; font-size: 12px;}
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
color:#202c3e;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}
.btn {
text-decoration:none;
color: #FFF;
background-color: #666;
padding:10px 16px;
font-weight:bold;
margin-right:10px;
text-align:center;
cursor:pointer;
display: inline-block;
}
p.callout {
padding:15px;
background-color:#f9f9f9;
margin-bottom: 15px;
border: 1px solid #eaeaea;
font-size: 12px;
color: #4d4d4d;
}
p.callout strong {font-size: 14px; color: #202c3e;}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size:12px;
margin-bottom:10px;
text-decoration:none;
color: #FFF;font-weight:bold;
display:block;
text-align:center;
}
a.fb { background-color: #3B5998!important; }
a.tw { background-color: #1daced!important; }
a.gp { background-color: #DB4A39!important; }
a.ms { background-color: #000!important; }
.sidebar .soc-btn {
display:block;
width:100%;
}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap .content {padding:0;}
table.head-wrap { width: 100% !important;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap { width: 100%; clear:both!important;
}
.footer-wrap .column {
width:345px;
color: #fff;
}
.footer-wrap .column-right {width: 225px;}
.small {font-size: 10px; height:22px;}
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-size: 18px; color: #202c3e;}
h2 { font-size: 14px; color: #202c3e;}
h3 { font-size: 27px;}
h4 { font-size: 23px;}
h5 { font-size: 17px;}
h6 { font-size: 14px; text-transform: uppercase; color:#444;}
hr {border-width:1px 0 0 0; border-color: #dddddd;}
.collapse { margin:0!important;}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:12px;
line-height:1.6;
}
p.lead { font-size:14px; }
p.last { margin-bottom:0px;}
ul li {
margin-left:5px;
list-style-position: inside;
}
/* -------------------------------------
SIDEBAR
------------------------------------- */
ul.sidebar {
background:#ebebeb;
display:block;
list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
text-decoration:none;
color: #666;
padding:10px 16px;
/* font-weight:bold; */
margin-right:10px;
/* text-align:center; */
cursor:pointer;
border-bottom: 1px solid #777777;
border-top: 1px solid #FFFFFF;
display:block;
margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* 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!important;
max-width:600px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:15px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }
/* Odds and ends */
.column {
width: 300px;
float:left;
}
.column tr td { padding: 15px; }
.column-wrap {
padding:0!important;
margin:0 auto;
max-width:600px!important;
}
.column table { width:100%;}
.social .column {
width: 280px;
min-width: 279px;
float:left;
}
.column-right tr td {float:right;}
.order-info .column {width:281px;}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
/* -------------------------------------------
PHONE
For clients that support media queries.
Nothing fancy.
-------------------------------------------- */
@media only screen and (max-width: 600px) {
a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
div[class="column"] { width: auto!important; float:none!important;}
table.social div[class="column"] {
width:auto!important;
}
.column-right tr td {float:none;}
}
/* Customization */
.phone-title {color:#4d4d4d; font-size: 14px; margin-bottom: 5px; display: inline-block;}
.phone-number {color:#202c3e; font-size: 14px;}
.strong-colored {font-weight: bold; color: #00538d; text-decoration: none}
.cta {
color:#fff;
background:#d93b11;
display: inline-block;
font-weight: bold;
text-decoration: none;
padding: 10px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top:25px;
}
.order-summary-titles td {
color: #8d8d8d;
font-weight: bold;
border-bottom: 2px solid #11325f;
padding-bottom: 2px;
}
.order-summary {color: #4d4d4d;}
.order-summary tbody {
padding-top: 5px;
}
.order-summary .item td {
border-bottom: 1px solid #dddddd;
}
.item-name a {color: #4d4d4d; text-decoration: none;}
.item-code {color: #8d8d8d; font-size: 10px;}
.lmb {margin-bottom: 5px;}
.spacer {height: 75px;}
.helpful-links,
.helpful-links a {
color: #00538d;
text-decoration: none;
font-weight: bold;
}
.item-image {padding:5px;}
</style>
</head>
<body bgcolor="#FFFFFF" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;color: #202c3e;width: 100%!important;">
<!-- HEADER -->
<table class="head-wrap" bgcolor="#202c3e" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 100% !important;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"></td>
<td class="header container" style="margin: 0 auto!important;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;display: block!important;max-width: 600px!important; width:600px; clear: both!important;">
<div class="content" style="margin: 0 auto;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 600px;display: block;">
<table style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px; width:100%;"></td>
</tr>
</table>
</div>
</td>
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"></td>
</tr>
</table><!-- /HEADER -->
<!-- logo -->
<table class="logo" width="100%" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td class="container" style="margin: 0 auto!important;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;display: block!important;max-width: 600px!important; width:600px; clear: both!important;">
<!-- column 1 -->
<table align="left" class="column" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 300px;float: left;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"><a href="http://dev2.bluerosepottery.com/" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #2BA6CB;"><img src="http://dev2.bluerosepottery.com/mm5/graphics/00000001/logo.png" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 100%;"></a></td>
</tr>
</table><!-- /column 1 -->
<!-- column 2 -->
<table align="left" class="column column-right" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 300px;float: left;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 12px;float: none;"><span class="phone-title" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 14px;color: #4d4d4d;margin-bottom: 5px;display: inline-block;">Need Assistance?</span><br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<strong class="phone-number" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 14px;color: #202c3e;"><img src="http://dev2.bluerosepottery.com/images/email-template/phone-icon.png" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 100%;"> 866-831-8066</strong>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;display: block;clear: both;"></span>
</td>
</tr>
</table><!-- /logo -->
<!-- BODY -->
<table class="body-wrap" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"></td>
<td class="container" bgcolor="#FFFFFF" style="margin: 0 auto!important;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;display: block!important;max-width: 600px!important; width:600px; clear: both!important;">
<div class="content" style="margin: 0 auto;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 600px;display: block;">
<table style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<h1 style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 18px;line-height: 1.1;margin-bottom: 15px;color: #202c3e;">YOUR ORDER CONFIRMATION</h1>
<hr noshade style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;border-width: 1px 0 0 0;border-color: #dddddd; height:1px;">
<p class="lead" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 14px;margin-bottom: 10px;font-weight: normal;line-height: 1.6;">Hello &mvte:order:bill_fname; &mvte:order:bill_lname;,<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">Congratulations! Your order with <a href="http://dev2.bluerosepotter.com/" class="strong-colored" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #00538d;font-weight: bold;text-decoration: none;">Blue Rose Pottery</a> has been received successfully and is in the process of being shipped to you.
</p>
<!-- Callout Panel -->
<p class="callout" style="margin: 0;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 15px;font-weight: normal;line-height: 1.6;background-color: #f9f9f9;border: 1px solid #eaeaea;color: #4d4d4d; margin-top:10px;">
<strong style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 14px;color: #202c3e;">HERE IS YOUR ORDER REFERENCE NUMBER</strong><br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
Order Number: <a href="&mvte:global:Domain:mm_surl;Store_Code=&mvta:global:Store:code;&Screen=ORHL" class="strong-colored" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #00538d;font-weight: bold;text-decoration: none;">&mvt:order:id;</a>
</p><!-- /Callout Panel -->
<!-- order-info -->
<table class="order-info" width="100%" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<!-- column 1 -->
<table align="left" class="column" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 281px;float: left;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"><p style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 10px;font-weight: normal;line-height: 1.6;"><strong style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">Order Information</strong><br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
Total Charged: &mvt:order:formatted_total;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
Date Ordered: &mvt:order:date;</p><br />
<p style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 10px;font-weight: normal;line-height: 1.6;"><strong style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">Billing and Shipping Information</strong><br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
Shipping Method: &mvt:order:ship_data;
</p></td>
</tr>
</table><!-- /column 1 -->
<!-- column 2 -->
<table align="left" class="column column-right" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 281px;float: left;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 12px;float: none;"><p style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 10px;font-weight: normal;line-height: 1.6;"><strong style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">Payment Information</strong><br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
VISA ending in 1234</p><br/><br/>
<p style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 10px;font-weight: normal;line-height: 1.6;">
<a href="&mvte:global:Domain:mm_surl;Store_Code=&mvta:global:Store:code;&Screen=ORHL"><img src="http://dev2.bluerosepottery.com/images/email-template/track-your-order.png" /></a>
</p>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;display: block;clear: both;"></span>
</td>
</tr>
</table><!-- /order-info -->
<hr noshade style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;border-width: 1px 0 0 0;border-color: #dddddd; height:1px;">
<table class="order-info" width="100%" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<!-- column 1 -->
<table align="left" class="column" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 281px;float: left;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"><h2 style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 14px;line-height: 1.1;margin-bottom: 15px;color: #202c3e;">BILLED TO</h2>
<p style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 10px;font-weight: normal;line-height: 1.6;">
<strong style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">&mvte:order:bill_fname; &mvte:order:bill_lname;</strong><br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<mvt:if expr="l.settings:order:bill_addr1 OR l.settings:order:bill_addr2 OR l.settings:order:bill_city OR l.settings:order:bill_state OR l.settings:order:bill_zip OR l.settings:order:bill_cntry">
&mvte:order:bill_addr1;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<mvt:if expr="l.settings:order:bill_addr2">
&mvte:order:bill_addr2; <br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
</mvt:if>
<mvt:if expr="( NOT ISNULL l.settings:order:bill_city ) AND ( NOT ISNULL l.settings:order:bill_state )">
&mvte:order:bill_city;,
<mvt:else>
&mvte:order:bill_city;
</mvt:if>
&mvte:order:bill_state;
&mvte:order:bill_zip;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"> &mvte:order:bill_cntry;
</mvt:if>
<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
&mvte:order:bill_email;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
&mvte:order:bill_phone;
</p>
</td>
</tr>
</table><!-- /column 1 -->
<!-- column 2 -->
<table align="left" class="column column-right" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 281px;float: left;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 12px;float: none;"><h2 style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 14px;line-height: 1.1;margin-bottom: 15px;color: #202c3e;">SHIPPED TO</h2>
<p style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 10px;font-weight: normal;line-height: 1.6;">
<strong style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">&mvte:order:ship_fname; &mvte:order:ship_lname;</strong><br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<mvt:if expr="l.settings:order:ship_addr1 OR l.settings:order:ship_addr2 OR l.settings:order:ship_city OR l.settings:order:ship_state OR l.settings:order:ship_zip OR l.settings:order:ship_cntry">
&mvte:order:ship_addr1;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<mvt:if expr="l.settings:order:ship_addr2">
&mvte:order:ship_addr2; <br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
</mvt:if>
<mvt:if expr="( NOT ISNULL l.settings:order:ship_city ) AND ( NOT ISNULL l.settings:order:ship_state )">
&mvte:order:ship_city;,
<mvt:else>
&mvte:order:ship_city;
</mvt:if>
&mvte:order:ship_state;
&mvte:order:ship_zip;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"> &mvte:order:ship_cntry;
</mvt:if>
<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
&mvte:order:ship_email;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
&mvte:order:ship_phone;
</p>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;display: block;clear: both;"></span>
</td>
</tr>
</table><!-- /order-info -->
<hr noshade style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;border-width: 1px 0 0 0;border-color: #dddddd; height:1px;">
<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<table class="order-summary" width="100%" cellspacing="0" cellpadding="0" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #4d4d4d;width: 100%;">
<tbody style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;padding-top: 5px;">
</tbody><thead style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td colspan="4" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"><h1 style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 18px;line-height: 1.1;margin-bottom: 15px;color: #202c3e;">YOUR ORDER SUMMARY</h1></td>
</tr>
<tr class="order-summary-titles" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td colspan="2" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #8d8d8d;font-weight: bold;border-bottom: 2px solid #11325f;padding-bottom: 2px;">Product</td>
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #8d8d8d;font-weight: bold;border-bottom: 2px solid #11325f;padding-bottom: 2px;">Quantity</td>
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #8d8d8d;font-weight: bold;border-bottom: 2px solid #11325f;padding-bottom: 2px;">Total</td>
</tr>
</thead>
<mvt:foreach iterator="item" array="order:items">
<tr class="item" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td class="item-image" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;border-bottom: 1px solid #dddddd; padding:5px;">
<mvt:if expr="l.settings:item:imagetypes:main">
<img src="http://dev2.bluerosepottery.com/mm5/&mvt:item:imagetypes:main;" alt="&mvt:item:name;" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 100%;">
</mvt:if>
</td>
<td class="item-name" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;border-bottom: 1px solid #dddddd;">
<div class="special-offer" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"><mvt:if expr="l.settings:item:upsold">(Special Offer)</mvt:if></div>
<div class="item-name" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<a href="http://dev2.bluerosepottery.com/&mvt:item:code;.html" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #4d4d4d;text-decoration: none;">&mvt:item:name;</a><br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<span class="item-code" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 10px;color: #8d8d8d;">Product Code: &mvt:item:code;</span>
</div>
<mvt:foreach iterator="option" array="item:options">
<mvt:if expr="l.settings:option:option_id">
&mvt:option:attr_code;: &mvt:option:opt_code;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<mvt:elseif expr="NOT ISNULL l.settings:option:data">
&mvt:option:attr_code;: &mvt:option:data;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
&mvt:option:attr_code;: &mvt:option:data_long;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<mvt:else>
&mvt:option:attr_code;<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
</mvt:if>
</mvt:foreach>
</td>
<td class="item-quantity" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;border-bottom: 1px solid #dddddd;">
&mvt:item:quantity;
</td>
<td class="item-total" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;border-bottom: 1px solid #dddddd;">
&mvt:item:formatted_subtotal;
<mvt:foreach iterator="option" array="item:options">
<mvt:if expr="l.settings:option:price">
&mvt:option:formatted_price;
</mvt:if>
<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
</mvt:foreach>
</td>
</tr>
</mvt:foreach>
<mvt:foreach iterator="charge" array="order:charges">
<tr class="basket-charges" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td colspan="2" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"> </td>
<td class="charge-description" align="right" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
&mvt:charge:descrip;:
</td>
<td class="formatted-charge" align="right" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
&mvt:charge:formatted_disp_amt;
</td>
</tr>
</mvt:foreach>
<tr id="basket-totals" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td colspan="2" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"> </td>
<td class="total-prompt" align="right" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<strong style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">Total:</strong>
</td>
<td class="formatted-total" align="right" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<strong style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">&mvt:order:formatted_total;</strong>
</td>
</tr>
</table>
<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<h1 class="lmb" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 18px;line-height: 1.1;margin-bottom: 5px;color: #202c3e;">CONTACT US</h1>
<hr noshade style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;border-width: 1px 0 0 0;border-color: #dddddd; height:1px;">
<br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<p style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 10px;font-weight: normal;line-height: 1.6;"><strong style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">We're Here To Help</strong><br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
Your satisfaction is important to us! Call or <a href="mailto:blah@blah.com" class="strong-colored" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #00538d;font-weight: bold;text-decoration: none;">email us</a> your questions about products, online orders, store experiences and more.</p><br/>
<p style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 10px;font-weight: normal;line-height: 1.6;"><strong style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">Blue Rose Pottery</strong><br style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
(866) 840-2495 | Toll Free
</p>
<p class="spacer" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 10px;font-weight: normal;line-height: 1.6;height: 75px;"></p>
<p align="center" class="helpful-links" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-bottom: 10px;font-weight: bold;line-height: 1.6;color: #00538d;text-decoration: none;"><a href="#" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #00538d;text-decoration: none;font-weight: bold;">SHOP</a> | <a href="#" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #00538d;text-decoration: none;font-weight: bold;">HELPFUL LINKS</a> | <a href="#" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #00538d;text-decoration: none;font-weight: bold;">CONNECT WITH US</a></p>
</td>
</tr>
</table>
</div><!-- /content -->
</td>
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"></td>
</tr>
</table><!-- /BODY -->
<!-- FOOTER -->
<table class="footer-wrap" bgcolor="#202c3e" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 100%;clear: both!important;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"></td>
<td class="container" style="margin: 0 auto!important;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;display: block!important;max-width: 600px!important; width:600px; clear: both!important;">
<!-- content -->
<div class="content" style="margin: 0 auto;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 600px;display: block;">
<!-- column 1 -->
<table align="left" class="column" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 345px;float: left;color: #fff;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td class="small" style="margin: 0;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 10px;height: 22px;">Copyright © 2015 Blue Rose Pottery, Inc. all rights reserved. </td>
</tr>
</table><!-- /column 1 -->
<!-- column 2 -->
<table align="left" class="column column-right" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;width: 225px;float: left;color: #fff;">
<tr style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;">
<td style="margin: 0;padding: 15px;font-family: Verdana, Geneva, sans-serif;font-size: 12px;float: none;">
<a href="https://www.facebook.com/BlueRosePottery" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #2BA6CB;"><img src="http://dev2.bluerosepottery.com/images/email-template/facebook.png" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 100%;"></a>
<a href="https://twitter.com/bluerosepottery" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #2BA6CB;"><img src="http://dev2.bluerosepottery.com/images/email-template/twitter.png" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 100%;"></a>
<a href="" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #2BA6CB;"><img src="http://dev2.bluerosepottery.com/images/email-template/pinterest.png" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 100%;"></a>
<a href="" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #2BA6CB;"><img src="http://dev2.bluerosepottery.com/images/email-template/instagram.png" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 100%;"></a>
<a href="https://vimeo.com/28555480" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #2BA6CB;"><img src="http://dev2.bluerosepottery.com/images/email-template/vimeo.png" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;max-width: 100%;"></a>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear" style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;display: block;clear: both;"></span>
</div><!-- /content -->
</td>
<td style="margin: 0;padding: 0;font-family: Verdana, Geneva, sans-serif;font-size: 12px;"></td>
</tr>
</table><!-- /FOOTER -->
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- If you delete this meta tag, Half Life 3 will never be released. -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Blue Rose Pottery - Order Confirmation</title>
<style>/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family: Verdana, Geneva, sans-serif; font-size: 12px;}
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
color:#202c3e;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}
.btn {
text-decoration:none;
color: #FFF;
background-color: #666;
padding:10px 16px;
font-weight:bold;
margin-right:10px;
text-align:center;
cursor:pointer;
display: inline-block;
}
p.callout {
padding:15px;
background-color:#f9f9f9;
margin-bottom: 15px;
border: 1px solid #eaeaea;
font-size: 12px;
color: #4d4d4d;
}
p.callout strong {font-size: 14px; color: #202c3e;}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size:12px;
margin-bottom:10px;
text-decoration:none;
color: #FFF;font-weight:bold;
display:block;
text-align:center;
}
a.fb { background-color: #3B5998!important; }
a.tw { background-color: #1daced!important; }
a.gp { background-color: #DB4A39!important; }
a.ms { background-color: #000!important; }
.sidebar .soc-btn {
display:block;
width:100%;
}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap .content {padding:0;}
table.head-wrap { width: 100%;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap { width: 100%; clear:both!important;
}
.footer-wrap .column {
width:345px;
color: #fff;
}
.footer-wrap .column-right {width: 225px;}
.small {font-size: 10px; height:22px;}
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-size: 18px; color: #202c3e;}
h2 { font-size: 14px; color: #202c3e;}
h3 { font-size: 27px;}
h4 { font-size: 23px;}
h5 { font-size: 17px;}
h6 { font-size: 14px; text-transform: uppercase; color:#444;}
hr {border-width:1px 0 0 0; border-color: #dddddd;}
.collapse { margin:0!important;}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:12px;
line-height:1.6;
}
p.lead { font-size:14px; }
p.last { margin-bottom:0px;}
ul li {
margin-left:5px;
list-style-position: inside;
}
/* -------------------------------------
SIDEBAR
------------------------------------- */
ul.sidebar {
background:#ebebeb;
display:block;
list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
text-decoration:none;
color: #666;
padding:10px 16px;
/* font-weight:bold; */
margin-right:10px;
/* text-align:center; */
cursor:pointer;
border-bottom: 1px solid #777777;
border-top: 1px solid #FFFFFF;
display:block;
margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* 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!important;
max-width:600px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:15px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }
/* Odds and ends */
.column {
width: 300px;
float:left;
}
.column tr td { padding: 15px; }
.column-wrap {
padding:0!important;
margin:0 auto;
max-width:600px!important;
}
.column table { width:100%;}
.social .column {
width: 280px;
min-width: 279px;
float:left;
}
.column-right tr td {float:right;}
.order-info .column {width:281px;}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
/* -------------------------------------------
PHONE
For clients that support media queries.
Nothing fancy.
-------------------------------------------- */
@media only screen and (max-width: 600px) {
a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
div[class="column"] { width: auto!important; float:none!important;}
table.social div[class="column"] {
width:auto!important;
}
.column-right tr td {float:none;}
}
/* Customization */
.phone-title {color:#4d4d4d; font-size: 14px; margin-bottom: 5px; display: inline-block;}
.phone-number {color:#202c3e; font-size: 14px;}
.strong-colored {font-weight: bold; color: #00538d; text-decoration: none}
.cta {
color:#fff;
background:#d93b11;
display: inline-block;
font-weight: bold;
text-decoration: none;
padding: 10px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top:25px;
}
.order-summary-titles td {
color: #8d8d8d;
font-weight: bold;
border-bottom: 2px solid #11325f;
padding-bottom: 2px;
}
.order-summary {color: #4d4d4d;}
.order-summary tbody {
padding-top: 5px;
}
.order-summary .item td {
border-bottom: 1px solid #dddddd;
}
.item-name a {color: #4d4d4d; text-decoration: none;}
.item-code {color: #8d8d8d; font-size: 10px;}
.lmb {margin-bottom: 5px;}
.spacer {height: 75px;}
.helpful-links,
.helpful-links a {
color: #00538d;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<!-- HEADER -->
<table class="head-wrap" bgcolor="#202c3e">
<tr>
<td></td>
<td class="header container" >
<div class="content">
<table>
<tr>
<td> </td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /HEADER -->
<!-- logo -->
<table class="logo" width="100%">
<tr>
<td class="container">
<!-- column 1 -->
<table align="left" class="column">
<tr>
<td><a href="http://&mvt:global:domain:name;/"><img src="http://&mvt:global:domain:name;/mm5/graphics/00000001/logo.png" /></a></td>
</tr>
</table><!-- /column 1 -->
<!-- column 2 -->
<table align="left" class="column column-right">
<tr>
<td><span class="phone-title">Need Assistance?</span><br />
<strong class="phone-number"><img src="http://&mvt:global:domain:name;/images/email-template/phone-icon.png" /> 866-831-8066</strong>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear"></span>
</td>
</tr>
</table><!-- /logo -->
<!-- BODY -->
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<div class="content">
<table>
<tr>
<td>
<h1>YOUR ORDER CONFIRMATION</h1>
<hr noshade />
<p class="lead">Hello &mvte:order:bill_fname; &mvte:order:bill_lname;,<br />Congratulations! Your order with <a href="http://dev2.bluerosepotter.com/" class="strong-colored">Blue Rose Pottery</a> has been received successfully and is in the process of being shipped to you.
</p>
<!-- Callout Panel -->
<p class="callout">
<strong>HERE IS YOUR ORDER REFERENCE NUMBER</strong><br />
Order Number: <a href="&mvte:global:Domain:mm_surl;Store_Code=&mvta:global:Store:code;&Screen=ORHL" class="strong-colored">&mvt:order:id;</a>
</p><!-- /Callout Panel -->
<!-- order-info -->
<table class="order-info" width="100%">
<tr>
<td>
<!-- column 1 -->
<table align="left" class="column">
<tr>
<td><p><strong>Order Information</strong><br />
Total Charged: &mvt:order:formatted_total;<br />
Date Ordered: &mvt:order:date;</p>
<p><strong>Billing and Shipping Information</strong><br />
Shipping Method: &mvt:order:ship_data;
</td>
</tr>
</table><!-- /column 1 -->
<!-- column 2 -->
<table align="left" class="column column-right">
<tr>
<td><p><strong>Payment Information</strong><br />
VISA ending in 1234</p>
<p>
<a href="&mvte:global:Domain:mm_surl;Store_Code=&mvta:global:Store:code;&Screen=ORHL" class="cta">TRACK YOUR ORDER</a>
</p>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear"></span>
</td>
</tr>
</table><!-- /order-info -->
<hr noshade />
<table class="order-info" width="100%">
<tr>
<td>
<!-- column 1 -->
<table align="left" class="column">
<tr>
<td><h2>BILLED TO</h2>
<p>
<strong>&mvte:order:bill_fname; &mvte:order:bill_lname;</strong><br />
<mvt:if expr="l.settings:order:bill_addr1 OR l.settings:order:bill_addr2 OR l.settings:order:bill_city OR l.settings:order:bill_state OR l.settings:order:bill_zip OR l.settings:order:bill_cntry">
&mvte:order:bill_addr1;<br />
<mvt:if expr="l.settings:order:bill_addr2">
&mvte:order:bill_addr2; <br />
</mvt:if>
<mvt:if expr="( NOT ISNULL l.settings:order:bill_city ) AND ( NOT ISNULL l.settings:order:bill_state )">
&mvte:order:bill_city;,
<mvt:else>
&mvte:order:bill_city;
</mvt:if>
&mvte:order:bill_state;
&mvte:order:bill_zip;<br /> &mvte:order:bill_cntry;
<mvt:else>
</mvt:if><br />
&mvte:order:bill_email;<br />
&mvte:order:bill_phone;
</p>
</td>
</tr>
</table><!-- /column 1 -->
<!-- column 2 -->
<table align="left" class="column column-right">
<tr>
<td><h2>SHIPPED TO</h2>
<p>
<strong>&mvte:order:ship_fname; &mvte:order:ship_lname;</strong><br />
<mvt:if expr="l.settings:order:ship_addr1 OR l.settings:order:ship_addr2 OR l.settings:order:ship_city OR l.settings:order:ship_state OR l.settings:order:ship_zip OR l.settings:order:ship_cntry">
&mvte:order:ship_addr1;<br />
<mvt:if expr="l.settings:order:ship_addr2">
&mvte:order:ship_addr2; <br />
</mvt:if>
<mvt:if expr="( NOT ISNULL l.settings:order:ship_city ) AND ( NOT ISNULL l.settings:order:ship_state )">
&mvte:order:ship_city;,
<mvt:else>
&mvte:order:ship_city;
</mvt:if>
&mvte:order:ship_state;
&mvte:order:ship_zip;<br /> &mvte:order:ship_cntry;
<mvt:else>
</mvt:if><br />
&mvte:order:ship_email;<br />
&mvte:order:ship_phone;
</p>
</p>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear"></span>
</td>
</tr>
</table><!-- /order-info -->
<hr noshade />
<br />
<table class="order-summary" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<thead>
<tr>
<td colspan="4"><h1>YOUR ORDER SUMMARY</h1></td>
</tr>
<tr class="order-summary-titles">
<td colspan="2">Product</td>
<td>Quantity</td>
<td>Total</td>
</tr>
</thead>
<mvt:foreach iterator="item" array="order:items">
<tr class="item">
<td class="item-image">
<mvt:if expr="l.settings:item:imagetypes:main">
<img src="http://&mvt:global:domain:name;/mm5/&mvt:item:imagetypes:main;" alt="&mvt:item:name;" />
</mvt:if>
</td>
<td class="item-name">
<div class="special-offer"><mvt:if expr="l.settings:item:upsold">(Special Offer)</mvt:if></div>
<div class="item-name">
<a href="http://&mvt:global:domain:name;/&mvt:item:code;.html">&mvt:item:name;</a><br />
<span class="item-code">Product Code: &mvt:item:code;</span>
</div>
<mvt:foreach iterator="option" array="item:options">
<mvt:if expr="l.settings:option:option_id">
&mvt:option:attr_code;: &mvt:option:opt_code;<br />
<mvt:elseif expr="NOT ISNULL l.settings:option:data">
&mvt:option:attr_code;: &mvt:option:data;<br />
<mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
&mvt:option:attr_code;: &mvt:option:data_long;<br />
<mvt:else>
&mvt:option:attr_code;<br />
</mvt:if>
</mvt:foreach>
</td>
<td class="item-quantity">
&mvt:item:quantity;
</td>
<td class="item-total">
&mvt:item:formatted_subtotal;
<mvt:foreach iterator="option" array="item:options">
<mvt:if expr="l.settings:option:price">
&mvt:option:formatted_price;
</mvt:if>
<br />
</mvt:foreach>
</td>
</tr>
</mvt:foreach>
<hr noshade />
<mvt:foreach iterator="charge" array="order:charges">
<tr class="basket-charges">
<td colspan="2"> </td>
<td class="charge-description" align="right">
&mvt:charge:descrip;:
</td>
<td class="formatted-charge" align="right">
&mvt:charge:formatted_disp_amt;
</td>
</tr>
</mvt:foreach>
<tr id="basket-totals">
<td colspan="2"> </td>
<td class="total-prompt" align="right">
<strong>Total:</strong>
</td>
<td class="formatted-total" align="right">
<strong>&mvt:order:formatted_total;</strong>
</td>
</tr>
</tbody>
</table>
<br />
<h1 class="lmb">CONTACT US</h1>
<hr noshade />
<br />
<p><strong>We're Here To Help</strong><br />
Your satisfaction is important to us! Call or <a href="mailto:blah@blah.com" class="strong-colored">email us</a> your questions about products, online orders, store experiences and more.</p>
<p><strong>Blue Rose Pottery</strong><br />
(866) 840-2495 | Toll Free
</p>
<p class="spacer"></p>
<p align="center" class="helpful-links"><a href="#">SHOP</a> | <a href="#">HELPFUL LINKS</a> | <a href="#">CONNECT WITH US</a></p>
</td>
</tr>
</table>
</div><!-- /content -->
</td>
<td></td>
</tr>
</table><!-- /BODY -->
<!-- FOOTER -->
<table class="footer-wrap" bgcolor="#202c3e">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<!-- column 1 -->
<table align="left" class="column">
<tr>
<td class="small">Copyright © 2015 Blue Rose Pottery, Inc. all rights reserved. </td>
</tr>
</table><!-- /column 1 -->
<!-- column 2 -->
<table align="left" class="column column-right">
<tr>
<td>
<a href="https://www.facebook.com/BlueRosePottery"><img src="http://&mvt:global:domain:name;/images/email-template/facebook.png" /></a>
<a href="https://twitter.com/bluerosepottery"><img src="http://&mvt:global:domain:name;/images/email-template/twitter.png" /></a>
<a href=""><img src="http://&mvt:global:domain:name;/images/email-template/pinterest.png" /></a>
<a href=""><img src="http://&mvt:global:domain:name;/images/email-template/instagram.png" /></a>
<a href="https://vimeo.com/28555480"><img src="http://&mvt:global:domain:name;/images/email-template/vimeo.png" /></a>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear"></span>
</div><!-- /content -->
</td>
<td></td>
</tr>
</table><!-- /FOOTER -->
</body>
</html>/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family: Verdana, Geneva, sans-serif; font-size: 12px;}
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
color:#202c3e;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}
.btn {
text-decoration:none;
color: #FFF;
background-color: #666;
padding:10px 16px;
font-weight:bold;
margin-right:10px;
text-align:center;
cursor:pointer;
display: inline-block;
}
p.callout {
padding:15px;
background-color:#f9f9f9;
margin-bottom: 15px;
border: 1px solid #eaeaea;
font-size: 12px;
color: #4d4d4d;
}
p.callout strong {font-size: 14px; color: #202c3e;}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size:12px;
margin-bottom:10px;
text-decoration:none;
color: #FFF;font-weight:bold;
display:block;
text-align:center;
}
a.fb { background-color: #3B5998!important; }
a.tw { background-color: #1daced!important; }
a.gp { background-color: #DB4A39!important; }
a.ms { background-color: #000!important; }
.sidebar .soc-btn {
display:block;
width:100%;
}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap .content {padding:0;}
table.head-wrap { width: 100% !important;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap { width: 100%; clear:both!important;
}
.footer-wrap .column {
width:345px;
color: #fff;
}
.footer-wrap .column-right {width: 225px;}
.small {font-size: 10px; height:22px;}
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-size: 18px; color: #202c3e;}
h2 { font-size: 14px; color: #202c3e;}
h3 { font-size: 27px;}
h4 { font-size: 23px;}
h5 { font-size: 17px;}
h6 { font-size: 14px; text-transform: uppercase; color:#444;}
hr {border-width:1px 0 0 0; border-color: #dddddd;}
.collapse { margin:0!important;}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:12px;
line-height:1.6;
}
p.lead { font-size:14px; }
p.last { margin-bottom:0px;}
ul li {
margin-left:5px;
list-style-position: inside;
}
/* -------------------------------------
SIDEBAR
------------------------------------- */
ul.sidebar {
background:#ebebeb;
display:block;
list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
text-decoration:none;
color: #666;
padding:10px 16px;
/* font-weight:bold; */
margin-right:10px;
/* text-align:center; */
cursor:pointer;
border-bottom: 1px solid #777777;
border-top: 1px solid #FFFFFF;
display:block;
margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* 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!important;
max-width:600px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:15px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }
/* Odds and ends */
.column {
width: 300px;
float:left;
}
.column tr td { padding: 15px; }
.column-wrap {
padding:0!important;
margin:0 auto;
max-width:600px!important;
}
.column table { width:100%;}
.social .column {
width: 280px;
min-width: 279px;
float:left;
}
.column-right tr td {float:right;}
.order-info .column {width:281px;}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
/* -------------------------------------------
PHONE
For clients that support media queries.
Nothing fancy.
-------------------------------------------- */
@media only screen and (max-width: 600px) {
a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
div[class="column"] { width: auto!important; float:none!important;}
table.social div[class="column"] {
width:auto!important;
}
.column-right tr td {float:none;}
}
/* Customization */
.phone-title {color:#4d4d4d; font-size: 14px; margin-bottom: 5px; display: inline-block;}
.phone-number {color:#202c3e; font-size: 14px;}
.strong-colored {font-weight: bold; color: #00538d; text-decoration: none}
.cta {
color:#fff;
background:#d93b11;
display: inline-block;
font-weight: bold;
text-decoration: none;
padding: 10px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top:25px;
}
.order-summary-titles td {
color: #8d8d8d;
font-weight: bold;
border-bottom: 2px solid #11325f;
padding-bottom: 2px;
}
.order-summary {color: #4d4d4d;}
.order-summary tbody {
padding-top: 5px;
}
.order-summary .item td {
border-bottom: 1px solid #dddddd;
}
.item-name a {color: #4d4d4d; text-decoration: none;}
.item-code {color: #8d8d8d; font-size: 10px;}
.lmb {margin-bottom: 5px;}
.spacer {height: 75px;}
.helpful-links,
.helpful-links a {
color: #00538d;
text-decoration: none;
font-weight: bold;
}
.item-image {padding:5px;}