<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
img {
border: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
body {
background-color:#CCCCCC;
}
.wrapper {
width: 600px;
}
.nested {
width: 100%;
}
.backgroundTable {
background-color:#CCCCCC;
}
h1 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
h2 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
h3 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
h4 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
h5 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
h6 {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
p {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
td {
vertical-align:top;
}
.topArea {
background-color: #ffffff;
}
.mastheadArea {
background-color: #ffffff;
}
.topArea {
padding:20px;
}
.topArea {
color: #000000;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
text-align:left;
}
.topArea a {
text-decoration: underline;
color: #6c8b9e;
}
.firstAreaWrapper {
background-color: #ffffff;
padding:20px;
}
.firstArea {
color: #000000;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
text-align:left;
}
.firstArea a {
text-decoration: underline;
color: #6c8b9e;
}
.secondAreaWrapper {
background-color: #ffffff;
padding:20px;
}
.secondArea {
color: #000000;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
text-align:left;
}
.secondArea a {
text-decoration: underline;
color: #6c8b9e;
}
.thirdAreaWrapper {
background-color: #ffffff;
padding:20px;
}
.thirdArea {
color: #000000;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
text-align:left;
}
.thirdArea a {
text-decoration: underline;
color: #6c8b9e;
}
.contentBorder {
border: 1px none #ffffff/* @editable */;
}
.heading_1 {
color: #333333;
font-size: 20px;
font-family: Tahoma;
font-weight: bold;
font-style: normal;
}
.heading_2 {
color: #6c8b9e;
font-size: 16px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
}
.previewArea {
background-color: #ffffff;
border-top:0px none;
border-bottom:0px none;
text-align: center;
padding:5px;
}
.previewArea {
color: #12347A;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
}
.previewArea a {
text-decoration: none;
color: #6c8b9e;
}
.mastheadArea {
text-align: center;
}
.mastheadArea img {
border:none;
display:block;
}
.footerArea {
border-top: 1px none #ffffff;
background-color: #ffffff;
text-align: center;
}
.footerArea {
color: #000000;
font-size: 12px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
}
.footerArea a {
text-decoration: none;
color: #6c8b9e;
}
.bodySettings {
font-size:12px;
margin:0 0 0 0;
padding:0 0 0 0;
}
@media only screen and (max-width: 600px) {
table[class="wrapper"] {
width: 95% !important;
}
table[class="col-3"] {
width: 100% !important;
}
img {
width: 100% !important;
}
td[class="firstAreaWrapper"] {
display: block;
}
td[class="secondAreaWrapper"] {
display: block;
}
td[class="thirdAreaWrapper"] {
display: block;
}
td[class="firstAreaWrapper"] img {
float: right;
margin-left: 10px;
}
td[class="secondAreaWrapper"] img {
float: right;
margin-left: 10px;
}
td[class="thirdAreaWrapper"] img {
float: right;
margin-left: 10px;
}
td[class="mastheadArea"] img {
height:auto !important;
width:100% !important;
}
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" class="backgroundTable">
<tr>
<td valign="top" align="center">
<table class="wrapper" cellspacing="0" cellpadding="0">
<tr>
<td class="contentBorder">
<table class="nested" cellpadding="0" cellspacing="0">
<tr>
<td class="previewArea">
<div mm:edit="header">
<p style="text-align: center;">Having trouble reading this email?
<a href="#[ONLINEVIEW]# ">View it in your browser.</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="mastheadArea">
</td>
</tr>
</table>
<table class="nested" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="topArea">
<div> </div>
<div mm:edit="top">
<p>
<span class="heading_1">Heading</span>
</p>
<p> </p>
<p>Normal text.</p>
<p> </p>
<p><span class="heading_2">Sub-Heading</span></p>
<p> </p>
<p>Normal text.</p>
</div>
</td>
</tr>
</table>
<table class="nested" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="firstAreaWrapper">
<table class="col-3" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="firstArea">
<div> </div>
<div mm:edit="first">
<p>
<span class="heading_1">Heading</span>
</p>
<p> </p>
<p>Normal text.</p>
<p> </p>
<p><span class="heading_2">Sub-Heading</span></p>
<p> </p>
<p>Normal text.</p>
</div>
</td>
</tr>
</table>
</td>
<td valign="top" class="secondAreaWrapper">
<table class="col-3" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="secondArea">
<div> </div>
<div mm:edit="second">
<p>
<span class="heading_1">Heading</span>
</p>
<p> </p>
<p>Normal text.</p>
<p> </p>
<p><span class="heading_2">Sub-Heading</span></p>
<p> </p>
<p>Normal text.</p>
</div>
</td>
</tr>
</table>
</td>
<td valign="top" class="thirdAreaWrapper">
<table class="col-3" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="thirdArea">
<div> </div>
<div mm:edit="third">
<p>
<span class="heading_1">Heading</span>
</p>
<p> </p>
<p>Normal text.</p>
<p> </p>
<p><span class="heading_2">Sub-Heading</span></p>
<p> </p>
<p>Normal text.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="nested" cellpadding="20" cellspacing="0">
<tr>
<td class="footerArea" colspan="2">
<div mm:footer="footer">
#[SENDER_COMPANY]#
<br>
#[SENDER_ADDRESS]#
<br>
This email was sent to: <a href="mailto:#[USER_EMAIL]#">#[USER_EMAIL]#</a>
<br>
<a href="#[UNSUB_LINK]#">Unsubscribe</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
