Solving Email-specific Code Problems
Table Based Layout
Building a responsive HTML email requires specialized knowledge in how to construct layouts using HTML and CSS. We have to build these layouts without the use of CSS layout and positioning properties (which email platforms do not support.) Instead, HTML emails use tables for layout (how retro!). Creating a responsive layout with tables involves a quirky nesting system.
Cross-client Testing
Email clients vary wildly in how they display CSS. There are a great many more email clients in use than there are web browsers. Approximately 50% of people view their emails on their mobile devices. Testing methodically across email clients and devices is essential for a successful HTML email.
I researched pricing and features of various email testing clients and settled on Email on Acid, which provided the broadest tests and most flexible pricing options.
HTML emails require nested tables to create layouts. This section creates a simple horizontal line with left and right margins.
HTML email newsletter with example content.
Designing a Flexible Template
Providing Layout Variants
If you select the following image, you can see that the finished template appears quite long. This is due to the wide range of layout variations requested by our clients. However, when this template is uploaded in Mailchimp as an email template, the areas representing variants (layout options for a particular section) appear collapsed, showing only the first variant option. Mailchimp displays variants with a dropdown select list that the author can select from.
Mailchimp's Template API
The templating options that Mailchimp provides to developers can be nested to create a highly flexible tool for authors. Sections can be denoted as hideable if they are optional, as repeatable if more than one may be used, or as variants if they have multiple layout options. Individual text and image elements can be denoted as editable so that placeholder text and images can be easily replaced.
Emails are also required to follow CAN-SPAM rules. Specific sender information and an unsubscribe option must be provided. Mailchimp will add these automatically if none is detected in the email. To ensure this information is styled correctly and detectable by Mailchimp, specific tags from the API must be used.
The final code for this flexible template is quite long and takes some work to maintain. It is essential to keep the code well organized and documented to ensure longevity of use.
The above snippet represents a repeatable variant template section denoted with a mc:variant tag.
The author has the option to remove this section due to the mc:hideable tag.
Text and images use the mc:edit tag so that placeholder content can be replaced.
A demonstration of a template variant region.
HTML Email Template Code
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>Georgia Tech - Newsletter</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
</head>
<body>
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: 'Source Sans Pro', sans-serif !important;}
</style>
<![endif]-->
<!-- START LIQUID WRAPPER -->
<!--[if gte mso 9]>
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="650">
<![endif]-->
*|MC_PREVIEW_TEXT|*
<!--*|IF:MC_PREVIEW_TEXT|*-->
<!--[if gte mso 9]>
<style type="text/css">
<span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height: 0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">/
</style>
<![endif]-->
<!--*|END:IF|*-->
<br />
<a href="*|ARCHIVE|*" style="font-family: 'Source Sans Pro', sans-serif; font-size: 14px; text-decoration: none; color: #A7934B; margin: 0px !important; padding: 0px !important;">View this email in your browser</a>
<!-- ==================== OUTTER WRAPPER TABLE BEGINS ==================== -->
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="wrapper-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr>
<td width="650" style="width: 650px;">
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== NESTED TABLE with TWO COLUMNS==================== -->
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="logo-date-header basic-table two-column-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100%; max-width: 650px !important;"
>
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td width="650">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td width="160" valign="bottom" align="right">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<!--horizontal margin 5px-->
<tr valign="top">
<td class="horiz-margin" width="300" height="5" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<!--logo-->
<td valign="bottom" align="left" width="150" style="vertical-align: bottom;">
<div class="light-img">
<img class="gt-logo" src="images/gt-logo.jpg" alt="Georgia Institute of Technology Logo" style="float: left !important; display: block; width: 150px !important; height: auto;" />
</div>
<!--[if !mso]><! -->
<div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
<img src="images/gt-logo-drk-mode.jpg" alt="Georgia Institute of Technology Logo" style="float: left !important; display: block; width: 150px !important; height: auto;" />
</div>
<!--<![endif]-->
</td>
</tr>
<!--horizontal margin 5px-->
<tr valign="top">
<td class="horiz-margin" width="300" height="10" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<td class="spacer" width="20" style="font-size: 1px;"> </td>
<td width="440" valign="bottom" align="right">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<!--dateline-->
<td
valign="bottom"
align="right"
height="50"
class="date"
style="vertical-align: bottom !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; text-align: right !important;"
>
<div class="mcedit" mc:edit="date">
<p style="font-family: 'Source Sans Pro', sans-serif; font-size: 16px;line-height: 18px; text-align: right !important; margin-bottom: 0px !important; color: #525252;">
Xxxxxxx 2021
</p>
</div>
</td>
</tr>
<!--horizontal margin 5px-->
<tr valign="top">
<td class="horiz-margin" width="300" height="10" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
<!-- ==================== TWO COL TABLE ENDS ==================== -->
<!-- ==================== ==================== ==================== ==================== -->
</td>
</tr>
<tr>
<td width="650" style="width: 650px;">
<!-- ===== SECOND HEADING TABLE: NEWSLETTER HEADLINE ===== -->
<!-- ==================== ==================== ==================== ==================== -->
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="bluebg basic-table title-heading"
align="center"
bgcolor="#003057"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important; background-color:#003057;"
>
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" bgcolor="#003057" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td width="600">
<!--nested table-->
<table border="0" cellpadding="0" cellspacing="0" align="center" class="nested-basic-table one-column-table" style="border-collapse: collapse; width: 100% !important;">
<!--horizontal line as a spacer for Outlook/Nexus-->
<tr>
<td width="600" height="25" style="width: 600px;">
<img src="images/spacer.gif" style="width:100% !important; max-width: 600px; height: 1px; display: none;" />
</td>
</tr>
<tr>
<td
width="600"
style="width: 600px; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 20px; margin:0px; padding: 0px; "
>
<div class="heading1">
<p
class="mcedit"
mc:edit="newsletter_title_upper"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 20px; margin:0px; padding: 0px; margin-bottom: 5px !important; color: #ffffff;"
>
Name of Department or College
</p>
</div>
</td>
</tr>
<tr>
<td
width="600"
style="width: 600px; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin: 0; padding: 0; margin-top: 0px; line-height: 38px; font-size: 38px; color: #333333;"
>
<div class="heading2">
<h1
class="mcedit"
mc:edit="newsletter_title"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif !important; font-weight: 600; margin: 0; padding: 0; margin-top: 0px; line-height: 38px; font-size: 38px; color: #B3A369;"
>
Georgia Tech Newsletter Title
</h1>
</div>
</td>
</tr>
<!--horizontal margin-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
<!--end nested table-->
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" bgcolor="#003057" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
<!-- ===== END NEWSLETTER HEADING TABLE ===== -->
</td>
</tr>
<tr>
<td width="650">
<!-- ===== HEADER STRIPED LINE TABLE ===== -->
<table
border="0"
cellpadding="0"
cellspacing="0"
width="650"
align="center"
class="headerline"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr valign="top">
<td width="650" class="longline" style="width: 650px; background-color:#ffffff; vertical-align: top;">
<div class="light-img">
<img style="display:block; width: 100% !important;height: auto !important; vertical-align: top;" src="images/stripe-line-light.jpg" alt="" />
</div>
<!--[if !mso]><! -->
<div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
<img src="images/stripe-line-dark.jpg" alt="" style="display:block; width: 100% !important;height: auto !important; vertical-align: top;" />
</div>
<!--<![endif]-->
</td>
</tr>
<!--horizontal margin-->
<tr valign="top">
<td class="horiz-margin" width="25" height="15" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
<!-- ===== END HEADER STRIPED LINE TABLE ===== -->
</td>
</tr>
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== HEADLINE STORY VARIATIONS ==================== -->
<tr>
<td width="650">
<!-- ==================== Variant: HEADLINE STORY WITH LARGE IMAGE==================== -->
<table
class="headline-story-large"
mc:repeatable="headline-story"
mc:variant="headline story with large image"
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="headline-story basic-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr valign="top">
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td width="600">
<!--nested table-->
<table border="0" cellpadding="0" cellspacing="0" align="center" class="nested-basic-table one-column-table" style="border-collapse: collapse; width: 100% !important;">
<!--horizontal margin 5px-->
<tr valign="top">
<td
width="100"
height="5"
class="margin"
style="margin:0px; padding: 0px; vertical-align: bottom;
line-height: 1px;font-size:1px;"
>
</td>
</tr>
<tr valign="top">
<td class="top-story-image" width="100%">
<div>
<img
class="mcedit"
mc:edit="top-story-image1"
border="0"
alt="Image"
src="images/placeholder-large.jpg"
style="display:block; width:100% !important; max-width: 600px; height: auto !important;"
/>
</div>
</td>
</tr>
<!--horizontal margin 10px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="15" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td
class="story-heading"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; text-align: left; padding: 0; font-size: 32px; line-height: 30px; color: #003057;"
>
<h1
class="mcedit"
mc:edit="top-story-title1"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 5px !important; text-align: left; padding: 0; font-size: 32px; line-height: 30px; color: #003057;"
>
Headline Story
</h1>
</td>
</tr>
<tr>
<td style="font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; color: #525252; line-height: 19px;padding: 0px;margin: 0px;margin-bottom: 10px;">
<div>
<p class="mcedit" mc:edit="top-story_content1">
Xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxxx xxxxxxx xxx xxxxx xxxxx. Xxxxxx xx x xxxx x xxxxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx
xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxxxxxx xxxxx. Xxxxx xxxxxx xxxx xx xxxx xxxxxxx xxx <a href="#">Test Link</a>xxxxxxxxx xxxxxxxxxxx xx xx xxxxx. Xxxxx xxxxxx xxxx xx
xxxx xxxxxxx xxx xxxxxxxxx xxxxxxxxxxx xx xx.
</p>
</div>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<!--horizontal line-->
<tr>
<td width="650" colspan="3" style="max-width: 650px !important;">
<table
border="0"
cellspacing="0"
cellpadding="0"
width="100%"
class="hr-line"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100%; max-width: 650px;"
>
<tr>
<td>
<img src="images/hr.gif" style="width: 100%; height: 1px;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--end nested table-->
</td>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
<!-- ==================== Variant: HEADLINE STORY WITH LARGE IMAGE==================== -->
<table
class="headline-story-large"
mc:repeatable="headline-story"
mc:variant="headline story with large image and button"
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="headline-story basic-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr valign="top">
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td width="600">
<!--nested table-->
<table border="0" cellpadding="0" cellspacing="0" align="center" class="nested-basic-table one-column-table" style="border-collapse: collapse; width: 100% !important;">
<!--horizontal margin 5px-->
<tr valign="top">
<td width="100" height="5" class="margin" style="margin:0px; padding: 0px; vertical-align: bottom; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr valign="top">
<td class="top-story-image" width="100%">
<div>
<img
class="mcedit"
mc:edit="top-story-image2"
border="0"
alt="Image"
src="images/placeholder-large.jpg"
style="display:block; width:100% !important; max-width: 600px; height: auto !important;"
/>
</div>
</td>
</tr>
<!--horizontal margin 10px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="15" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td
class="story-heading"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; text-align: left; padding: 0; font-size: 32px; line-height: 30px; color: #003057"
>
<h1
class="mcedit"
mc:edit="top-story-title2"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 5px !important; text-align: left; padding: 0; font-size: 32px; line-height: 30px; color: #003057;"
>
Headline Story with Link
</h1>
</td>
</tr>
<tr>
<td style="font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; color: #525252; line-height: 19px;padding: 0px;margin: 0px;margin-bottom: 10px;">
<div>
<p class="mcedit" mc:edit="top-story-content2">
Xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxxx xxxxxxx xxx xxxxx xxxxx. Xxxxxx xx x xxxx x xxxxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx
xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxxxxxx xxxxx. Xxxxx xxxxxx xxxx xx xxxx xxxxxxx xxx xxxxxxxxx xxxxxxxxxxx xx xx xxxxx. Xxxxx xxxxxx xxxx xx xxxx xxxxxxx xxx
xxxxxxxxx xxxxxxxxxxx xx xx.
</p>
</div>
</td>
</tr>
<!-- START BUTTON -->
<tr>
<td class="buttonwrapper" align="right">
<div class="mchide button-wrapper-1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!---horizontal margin 10px-->
<tr valign="top">
<td
width="50"
height="10"
class="margin"
style="margin:0px; padding: 0px;
line-height: 1px;font-size:1px;"
>
</td>
</tr>
<tr>
<td align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td
class="button"
align="right"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #00529c; text-transform: uppercase; font-weight: bold; vertical-align: middle; display: block;"
>
<div
class="button-link"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #00529c; padding: 5px; padding-left: 2px; padding-right: 0; text-transform: uppercase; font-weight: bold; font-weight: 600; vertical-align: middle;"
>
<div class="mcedit" mc:edit="button1" style="display: inline; float: left;">Read More</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<!-- END BUTTON -->
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<!--horizontal line-->
<tr>
<td width="650" colspan="3" style="max-width: 650px !important;">
<table
border="0"
cellspacing="0"
cellpadding="0"
width="100%"
class="hr-line"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100%; max-width: 650px;"
>
<tr>
<td>
<img src="images/hr.gif" style="width: 100%; height: 1px;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--end nested table-->
</td>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
<!-- ==================== Variant: HEADLINE STORY WITH MEDIUM IMAGE==================== -->
<table
style="width: 100%;"
class="headline-story-medium"
mc:repeatable="headline-story"
mc:variant="headline story with medium image"
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="headline2-story basic-table two-column-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td class="pattern" width="650" align="center">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td class="col col-left" width="290" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td align="left">
<div class="margin-col" style="margin-left: 10px;">
<img
class="mcedit top-two-column-story-image"
mc:edit="top-left-story-image3"
src="images/placeholder-medium.jpg"
style="display:block; width: 100%; max-width: 285px;height: auto; float: left;"
border="0"
alt="Image"
/>
</div>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<td class="spacer" width="20" style="font-size: 1px;"> </td>
<td class="col col-right" width="290" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td
class="story-heading"
align="left"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; text-align: left; padding: 0; font-size: 32px; line-height: 30px; color: #003057;"
>
<div class="margin-col" style="margin-right: 10px;">
<!--gives gutter space between columns-->
<h1
class="mcedit"
mc:edit="top-story-title3"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 5px !important; text-align: left; padding: 0; font-size: 32px; line-height: 30px; color: #003057;"
>
Headline Story with Medium Image
</h1>
</div>
</td>
</tr>
<tr>
<td align="right" style="font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; color: #525252; line-height: 19px;padding: 0px;margin: 0px;margin-bottom: 10px;">
<div class="margin-col" style="margin-right: 10px;">
<!--gives gutter space between columns-->
<p class="mcedit" mc:edit="top-story_content3">Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx.</p>
</div>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<!--horizontal rule-->
<tr>
<td>
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="5" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td width="600">
<img src="images/hr.gif" style="width: 100%; height: 1px;" />
</td>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="5" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
<!-- ==================== Variant: HEADLINE STORY WITH MEDIUM IMAGE==================== -->
<table
style="width: 100%;"
class="headline-story-medium"
mc:repeatable="headline-story"
mc:variant="headline story with medium image and button"
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="headline2-story basic-table two-column-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td class="pattern" width="650" align="center">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td class="col col-left" width="290" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td
class="story-heading"
align="left"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; text-align: left; padding: 0; font-size: 32px; line-height: 30px; color: #003057;"
>
<div class="margin-col" style="margin-right: 10px;">
<!--gives gutter space between columns-->
<h1
class="mcedit"
mc:edit="top-story-title4"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 5px !important; text-align: left; padding: 0; font-size: 32px; line-height: 30px; color: #003057;"
>
Headline Story with Medium Image and Link
</h1>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; color: #525252; line-height: 19px;padding: 0px;margin: 0px;margin-bottom: 10px;">
<div class="margin-col" style="margin-right: 10px;">
<!--gives gutter space between columns-->
<p class="mcedit" mc:edit="top-story-content4">Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx.</p>
</div>
</td>
</tr>
<!-- START BUTTON -->
<tr>
<td class="buttonwrapper" align="right">
<div class="mchide button-wrapper-2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!---horizontal margin 10px-->
<tr valign="top">
<td
width="50"
height="10"
class="margin"
style="margin:0px; padding: 0px;
line-height: 1px;font-size:1px;"
>
</td>
</tr>
<tr>
<td align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td
class="button"
align="right"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #00529c; text-transform: uppercase; font-weight: bold; vertical-align: middle; display: block;"
>
<div
class="button-link"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #00529c; padding: 5px; padding-left: 2px; padding-right: 0; text-transform: uppercase; font-weight: bold; font-weight: 600; vertical-align: middle;"
>
<div class="mcedit" mc:edit="button2" style="display: inline; float: left;">Read More</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<!-- END BUTTON -->
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<td class="spacer" width="20" style="font-size: 1px;"> </td>
<td class="col col-right" width="290" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td align="right">
<div class="margin-col" style="margin-left: 10px;">
<img
class="mcedit top-two-column-story-image"
mc:edit="top_left-story-image4"
src="images/placeholder-medium.jpg"
style="display:block; width: 100%; max-width: 285px;height: auto; float: left;"
border="0"
alt="Image"
/>
</div>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<!--horizontal rule-->
<tr>
<td>
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="5" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td width="600">
<img src="images/hr.gif" style="width: 100%; height: 1px;" />
</td>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="5" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== HEADLINE STORY VARIATIONS ENDS ==================== -->
<tr>
<td width="650">
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== DARK NESTED TABLE with TWO COLUMNS==================== -->
<div class="mchide" mc:hideable="diptych">
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="bluebg dark-stories basic-table two-column-table"
align="center"
bgcolor="#003057"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important; background-color:#003057;"
>
<!--horizontal margin 25px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td class="pattern" width="650" align="center">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td class="col col-left" width="290" valign="top" style="max-width: 290px;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td>
<div class="margin-col" style="margin-right: 10px;">
<img
class="mcedit two-column-story-image"
mc:edit="left-story-image4"
src="images/placeholder-medium.jpg"
style="display:block; width: 100%; max-width: 285px;height: auto;"
border="0"
alt="Image"
/>
</div>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<td class="spacer" width="20" style="font-size: 1px;"> </td>
<td class="col col-right" width="290" valign="top" style="max-width: 290px;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td
class="story-heading-navy-bg"
align="left"
width="285"
color="#BFB37C"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; padding: 0; font-size: 24px; line-height: 22px; color: #BFB37C !important; font-weight: 600 !important;"
>
<div class="margin-col" style="margin-left: 10px;">
<!--gives gutter space between columns-->
<h2
color="#BFB37C"
class="mcedit"
mc:edit="right_story_title"
style="margin-bottom: 5px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; padding: 0; font-size: 26px; line-height: 26px; color: #BFB37C !important; font-weight: 600 !important;"
>
Small Story with Dark Background
</h2>
</div>
</td>
</tr>
<tr>
<td
align="left"
width="285"
style="font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; color: #FFFFFF; line-height: 19px;padding: 0px;margin: 0px;margin-bottom: 10px;"
>
<div class="margin-col story_paragraph" style="margin-left: 10px;">
<!--gives gutter space between columns-->
<p class="mcedit" mc:edit="right_story_content" style="color: #FFFFFF;">
Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx.
Xxxxxxxx xxxxx.Xxxx xxx xxxxxxxx xxxxxxx xx..
</p>
</div>
</td>
</tr>
<!-- START BUTTON -->
<tr>
<td class="buttonwrapper" align="right">
<div class="mchide button-wrapper-3">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!---horizontal margin 10px-->
<tr valign="top">
<td
width="50"
height="10"
class="margin"
style="margin:0px; padding: 0px;
line-height: 1px;font-size:1px;"
>
</td>
</tr>
<tr>
<td align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td
class="button"
align="right"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #ffffff !important; text-transform: uppercase; font-weight: bold; vertical-align: middle; display: block;"
>
<div
class="button-link"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #ffffff !important; padding: 5px; padding-left: 2px; padding-right: 0; text-transform: uppercase; font-weight: bold; font-weight: 600; vertical-align: middle;"
>
<div class="mcedit" mc:edit="button3" style="display: inline; float: left;">Read More</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<!-- END BUTTON -->
</table>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</div>
<!-- ==================== TWO COL TABLE ENDS ==================== -->
<!-- ==================== ==================== ==================== ==================== -->
</td>
</tr>
<!--horizontal margin 10px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="10" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== SMALL STORY VARIATIONS ==================== -->
<tr>
<td width="650">
<!-- ==================== SMALL STORY ==================== -->
<table
class="small-story-container-basic"
mc:repeatable="small-story-container"
mc:variant="small story - basic"
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="small-story-container basic-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr valign="top">
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td width="600">
<!--nested table-->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="nested-basic-table one-column-table" style="border-collapse: collapse; width: 100% !important;">
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td
class="story-heading"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 0px !important; padding: 0; font-size: 24px; line-height: 22px; color: #003057;"
>
<div>
<h2
class="mcedit"
mc:edit="small-story-container-title-1"
style="margin-bottom: 5px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 5px !important; padding: 0; font-size: 26px; line-height: 26px; color: #003057;"
>
Small Story
</h2>
</div>
</td>
</tr>
<tr>
<td style="font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; color: #525252; line-height: 19px;padding: 0px;margin: 0px;margin-bottom: 10px;">
<div>
<p class="mcedit" mc:edit="small-story-container-content-1">
Xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxxx xxxxxxx xxx xxxxx xxxxx. Xxxxxx xx x xxxx x xxxxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx
xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxxxxxx xxxxx.
</p>
</div>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
<!--horizontal line-->
<tr>
<td width="650" colspan="3" style="max-width: 650px !important;">
<table
border="0"
cellspacing="0"
cellpadding="0"
width="100%"
class="hr-line"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100%; max-width: 650px;"
>
<tr>
<td>
<img src="images/hr.gif" style="width: 100%; height: 1px;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--end nested table-->
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
<!-- ==================== SMALL STORY WITH BUTTON ==================== -->
<table
class="small-story-container-button"
mc:repeatable="small-story-container"
mc:variant="small story with button"
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="small-story-container basic-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr valign="top">
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td width="600">
<!--nested table-->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="nested-basic-table one-column-table" style="border-collapse: collapse; width: 100% !important;">
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td
class="story-heading"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 0px !important; padding: 0; font-size: 24px; line-height: 22px; color: #003057;"
>
<div>
<h2
class="mcedit"
mc:edit="small-story-container-title-2"
style="margin-bottom: 5px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 5px !important; padding: 0; font-size: 26px; line-height: 26px; color: #003057;"
>
Small Story with Link
</h2>
</div>
</td>
</tr>
<tr>
<td style="font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; color: #525252; line-height: 19px;padding: 0px;margin: 0px;margin-bottom: 10px;">
<div>
<p class="mcedit" mc:edit="small-story-container-content-2">
Xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxxx xxxxxxx xxx xxxxx xxxxx. Xxxxxx xx x xxxx x xxxxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx
xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxxxxxx xxxxx.
</p>
</div>
</td>
</tr>
<!-- START BUTTON -->
<tr>
<td class="buttonwrapper" align="right">
<div class="mchide button-wrapper-4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!---horizontal margin 10px-->
<tr valign="top">
<td
width="50"
height="10"
class="margin"
style="margin:0px; padding: 0px;
line-height: 1px;font-size:1px;"
>
</td>
</tr>
<tr>
<td align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td
class="button"
align="right"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #00529c; text-transform: uppercase; font-weight: bold; vertical-align: middle; display: block;"
>
<div
class="button-link"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #00529c; padding: 5px; padding-left: 2px; padding-right: 0; text-transform: uppercase; font-weight: bold; font-weight: 600; vertical-align: middle;"
>
<div class="mcedit" mc:edit="button4" style="display: inline; float: left;">Read More</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<!-- END BUTTON -->
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
<!--horizontal line-->
<tr>
<td width="650" colspan="3" style="max-width: 650px !important;">
<table
border="0"
cellspacing="0"
cellpadding="0"
width="100%"
class="hr-line"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100%; max-width: 650px;"
>
<tr>
<td>
<img src="images/hr.gif" style="width: 100%; height: 1px;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--end nested table-->
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
<!-- ==================== SMALL STORY WITH IMAGE ==================== -->
<table
class="small-story-container-image"
mc:repeatable="small-story-container"
mc:variant="small story with image"
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="small-image-story-container basic-table sidebar-column-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td class="pattern2" width="650" align="center">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td class="col col-left" width="175" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td align="left" style="width: 150px;">
<div class="margin-col" style="margin-right: 10px;">
<!--gives gutter space between columns-->
<img class="mcedit" mc:edit="small-story-container-image" src="images/placeholder-sm.jpg" style="width: 150px !important; height: auto; display:block; float: left;" />
</div>
</td>
</tr>
<!--horizontal margin 10px -->
<tr valign="top">
<td class="horiz-margin" width="10" height="10" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<td class="spacer" width="10" style="width: 10px; font-size: 1px;"> </td>
<td class="col col-right" width="400" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td
class="story-heading"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 0px !important; padding: 0; font-size: 24px; line-height: 22px; color: #003057;"
>
<div>
<h2
class="mcedit"
mc:edit="small-story-container_title_3"
style="margin-bottom: 5px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 5px !important; padding: 0; font-size: 26px; line-height: 26px; color: #003057;"
>
Small Story with Image
</h2>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; color: #525252; line-height: 19px;padding: 0px;margin: 0px;margin-bottom: 10px;">
<div>
<p class="mcedit" mc:edit="small-story-container_content_3">Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx.</p>
</div>
</td>
</tr>
</table>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
<!--horizontal rule-->
<tr>
<td>
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="5" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td width="600">
<img src="images/hr.gif" style="width: 100%; height: 1px;" />
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="5" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ==================== SMALL STORY WITH IMAGE AND BUTTON ==================== -->
<table
class="small-story-container-image-button"
mc:repeatable="small-story-container"
mc:variant="small story with image and button"
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="small-image-story-container basic-table sidebar-column-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td class="pattern2" width="650" align="center">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td class="col col-left" width="175" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td align="left" style="width: 150px;">
<div class="margin-col" style="margin-right: 10px;">
<!--gives gutter space between columns-->
<img class="mcedit" mc:edit="small-story-container-image" src="images/placeholder-sm.jpg" style="width: 150px !important; height: auto; display:block; float: left;" />
</div>
</td>
</tr>
<!--horizontal margin 10px -->
<tr valign="top">
<td class="horiz-margin" width="10" height="10" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<td class="spacer" width="10" style="width: 10px; font-size: 1px;"> </td>
<td class="col col-right" width="400" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td
class="story-heading"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 0px !important; padding: 0; font-size: 24px; line-height: 22px; color: #003057;"
>
<div>
<h2
class="mcedit"
mc:edit="small-story-container_title_4"
style="margin-bottom: 5px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; margin-top: 0; margin-bottom: 5px !important; padding: 0; font-size: 26px; line-height: 26px; color: #003057;"
>
Small Story with Image and Link
</h2>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; color: #525252; line-height: 19px;padding: 0px;margin: 0px;margin-bottom: 10px;">
<div>
<p class="mcedit" mc:edit="small-story-container_content">Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx. Xxxx xxx xxxxxxxx xxxxxxx xx. Xxxxxxxx xxxxx.</p>
</div>
</td>
</tr>
<!-- START BUTTON -->
<tr>
<td class="buttonwrapper" align="right">
<div class="mchide button-wrapper-5">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!---horizontal margin 10px-->
<tr valign="top">
<td
width="50"
height="10"
class="margin"
style="margin:0px; padding: 0px;
line-height: 1px;font-size:1px;"
>
</td>
</tr>
<tr>
<td align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td
class="button"
align="right"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #00529c; text-transform: uppercase; font-weight: bold; vertical-align: middle; display: block;"
>
<div
class="button-link"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #00529c; padding: 5px; padding-left: 2px; padding-right: 0; text-transform: uppercase; font-weight: bold; font-weight: 600; vertical-align: middle;"
>
<div class="mcedit" mc:edit="button5" style="display: inline;float: left;">Read More</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<!-- END BUTTON -->
</table>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
<!--horizontal rule-->
<tr>
<td>
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="5" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td width="600">
<img src="images/hr.gif" style="width: 100%; height: 1px;" />
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="5" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- ==================== SMALL STORY VARIATIONS ENDS ==================== -->
<!-- ==================== ==================== ==================== ==================== -->
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="20" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td width="650" style="width: 650px;">
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== EVENTS TABLE with DATE ICON ==================== -->
<div class="mchide" mc:hideable="events-section">
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="calendar-title basic-table two-column-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr>
<td class="events-header-background" width="650" style="width: 650px; background-color: #d6dbd4;">
<table
border="0"
cellpadding="0"
cellspacing="0"
class="nested-basic-table"
style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; margin: 0 auto !important; background-color: #d6dbd4;"
>
<!--horizontal margin 10px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="10" style="min-height: 10px; margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="5" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td
width="600"
style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none; margin: 0 auto; font-family: 'Source Sans Pro', sans-serif !important; font-size: 19px;color: #003057; margin: 0px !important; font-weight: 600;"
>
<div>
<h3 class="mcedit" mc:edit="calendar-title">Important Dates</h3>
</div>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="5" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<!--horizontal margin 10px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="10" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td class="events-background" width="650" align="center" style="width: 650px; background-color: #eff1ee;">
<div class="mcrepeat" mc:repeatable="event_listing">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="650"
class="calendar-events nested-basic-table"
bgcolor="#eff1ee"
style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; background-color: #eff1ee;"
>
<!--horizontal margin 20px-->
<tr valign="top">
<td
class="horiz-margin"
width="25"
height="20"
style="margin:0px; padding: 0px;
line-height: 1px;font-size:1px;"
>
</td>
</tr>
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<!--Left Column-->
<td align="left" valign="top" width="50">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="10" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td class="event-date" width="50" align="left" bgcolor="#003057" style="border-radius: 3px; overflow: hidden; color: #eff1ee; text-align:center; text-transform: uppercase;">
<div
style="background-color: #003057; border-radius: 3px; padding: 10px 10px; border: 6px solid #003057; display: inline-block; max-width: 50px; min-width: 50px; overflow: hidden; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 5px; text-align:center; text-transform: uppercase; color: #eff1ee;"
>
<div style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 16px; line-height: 16px;text-align:center; text-transform: uppercase; color: #eff1ee;">
<p
class="mcedit"
mc:edit="calendar_month"
style="background-color: #003057; font-family: 'Source Sans Pro', sans-serif !important; font-size: 16px; line-height: 16px; margin: 0px; padding: 0px; margin-bottom: 3px !important;text-align:center; text-transform: uppercase; color: #eff1ee;"
>
Nov
</p>
</div>
<div
style="font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; font-size: 32px; line-height: 30px; text-align:center; text-transform: uppercase; color: #eff1ee;"
>
<p
class="mcedit"
mc:edit="calendar_day"
style="font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important; font-size: 32px; line-height: 30px; margin: 0px; padding: 0px; margin-bottom: 2px !important; text-align:center; text-transform: uppercase; color: #eff1ee;"
>
15
</p>
</div>
</div>
</td>
<!--vertical margin-->
<td class="vert-margin" align="left" width="10" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<!--horizontal margin 10px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="10" style="margin:0px; padding: 0px;line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<!--Left Column Ends-->
<td class="spacer" width="20" style="width: 20px; font-size: 1px;"> </td>
<td class="col" align="left" width="500" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td
align="left"
class="event-title"
style="color: #333333 !important; margin: 0px !important; padding: 0px !important; text-decoration: none; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; text-align:left; font-weight: 600;"
>
<h4
class="mcedit"
mc:edit="calendar_event-title"
style="color: #333333 !important; margin: 0px !important; padding: 0px !important; margin-bottom: 2px !important; text-decoration: none; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; text-align:left; font-weight: 600;"
>
<a href="http://gatech.edu" style="color: #333333;">Event Title and Link</a>
</h4>
</td>
</tr>
<tr>
<td
align="left"
style="color: #333333; margin: 0px !important; margin-bottom: 10px !important; margin-top: 0px !important; padding: 0px !important; text-decoration: none; font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px !important;text-align:left; color:#525252;line-height: 16px;"
>
<p class="mcedit" mc:edit="calendar_event_description">Xxxxx xxxxxx xxxx xx xxxx xxxxxxx xxx xxxxxxxxx xxxxxxxxxxx xx xx xxxxx.</p>
</td>
</tr>
<!--horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" height="20" style=" margin:0px; padding: 0px; line-height: 1px;font-size:1px;">
<hr />
</td>
</tr>
</table>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<!-- ==================== EVENTS TABLE ENDS ==================== -->
<!-- ==================== ==================== ==================== ==================== -->
</td>
</tr>
<tr>
<td width="650">
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== MORE EVENTS BUTTON TABLE ==================== -->
<div class="mchide" mc:hideable="events-section_button">
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="calendar-button basic-table two-column-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important; background-color: #eff1ee;"
>
<!-- START BUTTON -->
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td class="buttonwrapper" align="right">
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!---horizontal margin 10px-->
<tr valign="top">
<td
width="50"
height="10"
class="margin"
style="margin:0px; padding: 0px;
line-height: 1px;font-size:1px;"
>
</td>
</tr>
<tr>
<td align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td
class="button"
align="right"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #00529c; text-transform: uppercase; font-weight: bold; vertical-align: middle; display: block;"
>
<div
class="button-link"
style="font-size: 16px; line-height: 1; font-family: 'Source Sans Pro', sans-serif; color: #00529c; padding: 5px; padding-left: 2px; padding-right: 0; text-transform: uppercase; font-weight: bold; font-weight: 600; vertical-align: middle;"
>
<div class="mcedit" mc:edit="button6" style="display: inline;">More Events</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!---horizontal margin 20px-->
<tr valign="top">
<td class="horiz-margin" width="50" height="20" style="height: 20px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</div>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<!-- END BUTTON -->
</table>
</div>
<!-- ==================== MORE EVENTS BUTTON TABLE ENDS ==================== -->
<!-- ==================== ==================== ==================== ==================== -->
</td>
</tr>
<tr>
<td width="650">
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== NESTED TABLE with THREE COLUMNS==================== -->
<div class="mcvar" mc:repeatable="links_section" mc:variant="3 Column Links Section">
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="links-3col basic-table three-column-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td class="pattern" width="600">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<td class="col col-left" width="190" align="left" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<!--horizontal margin 25px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left">
<table
border="0"
cellpadding="0"
cellspacing="0"
style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;"
>
<tr>
<td align="left">
<div>
<h5
class="mcedit"
mc:edit="links-header-1"
style="letter-spacing: .002em;font-family: 'Source Sans Pro', sans-serif; font-size: 16px; color: #333333;margin-top: 0px; margin: 0px; padding: 0px !important; margin-bottom: 2px;"
>
Xxxxxx Xxxxx
</h5>
</div>
</td>
</tr>
<tr>
<td align="left">
<div
class="mcedit"
mc:edit="link-list-1"
style="margin-bottom: 5px; min-width: 180px; font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;"
>
<p
style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;margin: 0px !important; padding: 0px !important; margin-bottom: 2px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<a style="color: #004f9f;" href="http://gatech.edu">Link Text</a>
</p>
<p
style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;margin: 0px !important; padding: 0px !important;margin-bottom: 2px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<a style="color: #004f9f;" href="http://gatech.edu">Link Text</a>
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--horizontal margin 25px - collapses on mobile-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<td class="spacer" width="20" style="font-size: 1px;"> </td>
<td class="col col-mid" width="190" align="left" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<!--horizontal margin 25px - collapses on mobile-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left">
<table
border="0"
cellpadding="0"
cellspacing="0"
style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;"
>
<tr>
<td align="left">
<table
border="0"
cellpadding="0"
cellspacing="0"
style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;"
>
<tr>
<td align="left">
<div>
<h5
class="mcedit"
mc:edit="links-header-2"
style="letter-spacing: .002em;font-family: 'Source Sans Pro', sans-serif; font-size: 16px; color: #333333;margin-top: 0px; margin: 0px; padding: 0px !important; margin-bottom: 2px;"
>
Xxxxxx Xxxxx
</h5>
</div>
</td>
</tr>
<tr>
<td align="left">
<div
class="mcedit"
mc:edit="link-list-2"
style="margin-bottom: 5px; min-width: 180px; font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;"
>
<p
style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;margin: 0px !important; padding: 0px !important; margin-bottom: 2px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<a style="color: #004f9f;" href="http://gatech.edu">Link Text</a>
</p>
<p
style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;margin: 0px !important; padding: 0px !important;margin-bottom: 2px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<a style="color: #004f9f;" href="http://gatech.edu">Link Text</a>
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--horizontal margin 25px - collapses on mobile-->
<tr valign="top">
<td class="horiz-margin" align="left" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<td class="spacer" width="20" style="font-size: 1px;"> </td>
<td class="col" width="190" align="left" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<!--horizontal margin 25px - collapses on mobile-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left">
<table
border="0"
cellpadding="0"
cellspacing="0"
style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;"
>
<tr>
<td align="left">
<div style="min-width: 180px;">
<h5
class="mcedit"
mc:edit="links-header-3"
style="letter-spacing: .002em;font-family: 'Source Sans Pro', sans-serif; font-size: 16px; color: #333333;margin-top: 0px; margin: 0px; padding: 0px !important; margin-bottom: 2px;"
>
Xxxxxx Xxxxx
</h5>
</div>
</td>
</tr>
<tr>
<td align="left">
<div
class="mcedit"
mc:edit="link-list-3"
style="margin-bottom: 5px; min-width: 180px; font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;"
>
<p
style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;margin: 0px !important; padding: 0px !important; margin-bottom: 2px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<a style="color: #004f9f;" href="http://gatech.edu">Link Text</a>
</p>
<p
style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;margin: 0px !important; padding: 0px !important;margin-bottom: 2px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<a style="color: #004f9f;" href="http://gatech.edu">Link Text</a>
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--horizontal margin 25px-->
<tr valign="top">
<td class="horiz-margin" align="left" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</div>
<!-- ==================== THREE COL TABLE ENDS ==================== -->
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== NESTED TABLE with TWO COLUMNS==================== -->
<div class="mcvar" mc:repeatable="links_section" mc:variant="2 Column Links Section">
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="links-2col basic-table two-column-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px; width: 100% !important; max-width: 650px !important;"
>
<tr>
<td class="pattern" width="600" align="center">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td class="col col-left" width="290" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<!--horizontal margin 25px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left">
<table
border="0"
cellpadding="0"
cellspacing="0"
style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;"
>
<tr>
<td align="left">
<div style="min-width: 180px;">
<h5
class="mcedit"
mc:edit="links-header-4"
style="letter-spacing: .002em;font-family: 'Source Sans Pro', sans-serif; font-size: 16px;
color: #333333;margin-top: 0px; margin: 0px; padding: 0px !important; margin-bottom: 2px;"
>
Xxxxxx Xxxxx
</h5>
</div>
</td>
</tr>
<tr>
<td align="left">
<div
class="mcedit"
mc:edit="link-list-4"
style="margin-bottom: 5px; min-width: 180px; font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;"
>
<p
style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;margin: 0px !important; padding: 0px !important; margin-bottom: 2px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<a style="color: #004f9f;" href="http://gatech.edu">Link Text</a>
</p>
<p
style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;margin: 0px !important; padding: 0px !important;margin-bottom: 2px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<a style="color: #004f9f;" href="http://gatech.edu">Link Text</a>
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--horizontal margin 25px - collapses on mobile-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<td class="spacer" width="20" style="font-size: 1px;"> </td>
<td class="col col-right" width="290" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;">
<!--horizontal margin 25px - collapses on mobile-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left">
<table
border="0"
cellpadding="0"
cellspacing="0"
style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; mso-cellspacing: 0px; mso-padding-alt: 0px;"
>
<tr>
<td align="left">
<div style="min-width: 180px;">
<h5
class="mcedit"
mc:edit="links-header-5"
style="letter-spacing: .002em;font-family: 'Source Sans Pro', sans-serif; font-size: 16px; color: #333333;margin-top: 0px; margin: 0px; padding: 0px !important; margin-bottom: 2px;"
>
Xxxxxx Xxxxx
</h5>
</div>
</td>
</tr>
<tr>
<td align="left">
<div
class="mcedit"
mc:edit="link-list-5"
style="margin-bottom: 5px; min-width: 180px; font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;"
>
<p
style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;margin: 0px !important; padding: 0px !important; margin-bottom: 2px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<a style="color: #004f9f;" href="http://gatech.edu">Link Text</a>
</p>
<p
style="font-family: 'Source Sans Pro', sans-serif !important; font-size: 12px; text-align:left; color:#525252;margin: 0px !important; padding: 0px !important;margin-bottom: 2px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<a style="color: #004f9f;" href="http://gatech.edu">Link Text</a>
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--horizontal margin 25px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- ==================== TWO COL TABLE ENDS ==================== -->
<!-- ==================== ==================== ==================== ==================== -->
</td>
</tr>
<tr>
<td width="650">
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== footer TABLE ==================== -->
<table
width="650"
border="0"
cellpadding="0"
cellspacing="0"
class="footer basic-table footer-table"
align="center"
style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; width: 100% !important; max-width: 650px !important;"
>
<tr valign="top">
<td width="650" class="longline" style="width: 650px; background-color:#ffffff; vertical-align: top;">
<div class="footerline light-img">
<img style="display:block; width: 100% !important;height: auto !important; vertical-align: top;" src="images/stripe-line-light.jpg" alt="" />
</div>
<!--[if !mso]><! -->
<div class="footerline dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
<img src="images/stripe-line-dark.jpg" alt="" style="display:block; width: 100% !important;height: auto !important; vertical-align: top;" />
</div>
<!--<![endif]-->
</td>
</tr>
<tr>
<td class="bluebg pattern footer-background" width="650" align="center" bgcolor="#003057">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0; background-color:#003057;">
<tr>
<!--vertical margin-->
<td class="vert-margin" align="left" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
<td class="col col-left" width="400" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0;">
<!--horizontal margin 25px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td
class="footertext"
width="300"
style="margin: 0px; padding: 0px; font-size: 10px !important;
mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<div style="font-size: 10px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
<p
style="font-family: 'Source Sans Pro', sans-serif; font-size: 10px !important; text-align: left;
line-height: 13px;color: #ffffff;text-decoration: none; margin-bottom: 10px !important; mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;"
>
<span style="font-size: 10px;">*|LIST:DESCRIPTION|*<br /></span>
<span style="font-size: 10px;">
To stop receiving these emails to *|EMAIL|*, <a style="color: #ffffff; font-weight: bold; font-size: 10px;" href="*|UNSUB|*">unsubscribe here.</a> <br />
</span>
<span style="font-size: 10px;">*|LIST:ADDRESS|*<br /></span>
<span style="font-size: 10px;">Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* <br /></span>
<span style="font-size: 10px;">All rights reserved.<br /></span>
</p>
</div>
</td>
</tr>
<!--horizontal margin 25px - collapses on mobile-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<td class="spacer" width="20" style="font-size: 1px;"> </td>
<td class="col col-right" width="200" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0;">
<!--horizontal margin 25px - collapses on mobile-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr valign="top">
<td class="footertext" align="right" width="200" valign="top" style="vertical-align: top; margin-bottom: 15px;">
<img class="gt-logo" src="images/gt-logo-white.jpg" alt="Georgia Institute of Technology Logo" style="width: 180px !important; height: auto; float: right;" />
</td>
</tr>
<!--horizontal margin 5px-->
<tr valign="top">
<td class="horiz-margin" width="300" height="10" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
<tr>
<td
class="footertext"
align="right"
width="200"
valign="top"
style="vertical-align: top; width: 200px; height: auto; font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; text-align: right; font-weight: bold; line-height: 18px;"
>
<a
class="mcedit"
mc:edit="website-address"
style="font-family: 'Source Sans Pro', sans-serif !important;font-size: 16px; text-align: right; color: #ffffff !important; font-weight: bold;"
href="http://gatech.edu"
>
gatech.edu
</a>
</td>
</tr>
<!--horizontal margin 25px-->
<tr valign="top">
<td class="horiz-margin" width="25" height="25" style="margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
<!--vertical margin-->
<td class="vert-margin" align="right" width="25" height="25" style="width: 25px; min-width: 25px; margin:0px; padding: 0px; line-height: 1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ==================== END footer TABLE ==================== -->
<!-- ==================== ==================== ==================== ==================== -->
</td>
</tr>
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== ==================== ==================== ==================== -->
<!-- ==================== ==================== ==================== ==================== -->
</table>
<!-- ==================== OUTTER WRAPPER TABLE ENDS ==================== -->
<!--[if gte mso 9]>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
<![endif]-->
<!-- END LIQUID WRAPPER -->
<style>
body {
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
}
@viewport {
width: device-width;
}
/********************** TABLE STYLING **********************/
table {
border-collapse: collapse;
mso-table-lspace: 0px !important;
mso-table-rspace: 0px !important;
max-width: 650px !important;
}
tr {
margin: 0px !important;
padding: 0px !important;
}
td {
margin: 0px !important;
padding: 0px !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly !important;
}
div {
mso-line-height-rule: exactly !important;
}
/********************** TYPOGRAPHY **********************/
h1, h2, h3, h4, h5, h6, p, a {
mso-line-height-rule:exactly !important;
-webkit-text-size-adjust:none !important;
-ms-text-size-adjust:none !important;
-moz-osx-font-smoothing: grayscale;
}
h1, h1 a {
font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important;
font-weight: 500 !important;
font-size: 32px !important;
line-height: 32px !important;
margin-bottom: 5px !important;
margin-top: 0px !important;
padding: 0px !important;
}
.headline-story h1, .headline-story h1 a, .headline2-story h1, .headline2-story h1 a,
.dark-stories h2, .dark-stories h2 a
.small-image-story-container h2,.small-image-story-container h2 a,
.small-story-container h2,.small-story-container h2 a, {
color: #003057;
}
h2, h2 a {
font-family: 'Source Sans Pro', sans-serif; font-weight: 600 !important;
font-weight: 600 !important;
line-height: 26px !important;
margin-bottom: 5px !important;
font-size: 26px !important;
text-align: left !important;
margin-top: 0px !important;
padding: 0px !important;
}
h3, h3 a {
font-family: 'Source Sans Pro', sans-serif !important;
font-weight: 600 !important;
font-size: 19px !important;
line-height: 20px !important;
margin-bottom: 0px !important;
margin-top: 0px !important;
padding: 0px !important;
}
h4, h4 a {
font-family: 'Source Sans Pro', sans-serif !important;
font-weight: 600 !important;
font-size: 18px !important;
margin-bottom: 5px !important;
margin-top: 0px !important;
padding: 0px !important;
}
h5, h5 a {
font-family: 'Source Sans Pro', sans-serif !important;
font-weight: 600 !important;
font-size: 16px !important;
margin-bottom: 3px !important;
text-align:left !important;
margin-top: 0px !important;
padding: 0px !important;
}
.links-2col h5, .links-2col h5 a, .links-3col h5, .links-3col h5 a {
color: #003057 !important;
}
p {
font-family: 'Source Sans Pro', sans-serif !important;
font-size: 16px;
text-align: left;
color: #525252;
line-height: 19px;
padding: 0px !important;
margin-top: 0px !important;
margin-bottom: 10px;
}
a, a:visited {
transition: all 200ms ease-in;
color: #00529c !important;
font-weight: 600;
text-decoration: underline;
text-decoration-color: #0C71CD;
}
a:hover,
a:focus {
color: #0C71CD !important;
font-weight: 600;
text-decoration-color: #4391EC;
}
span {
mso-line-height-rule:exactly;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
font-size: inherit;
}
h1 strong, h2 strong, h3 strong, h4 strong {
font-weight: 400 !important;
}
/********************** CALENDAR **********************/
.calendar-events p {
font-size: 14px;
}
.calendar-events a, .calendar-events h5{
color: #333333 !important;
}
.event-title, .event-title a, .event-title a:visited {
color: #333333 !important;
text-decoration: none;
}
.event-title a, .event-title a:visited {
border-bottom: 1px solid #333333 !important;
}
/********************** IMAGES **********************/
img {
max-width: 100%;
height: auto;
border: 0 !important;
outline: none !important;
}
/********************** LAYOUTS **********************/
.two-column-table .col-left, .two-column-table .col-right{
min-width: 45% !important;
}
.three-column-table .col-left, .three-column-table .col-mid, .three-column-table .col-right, {
min-width: 29% !important;
}
/********************** HEADER AND HEADER TYPOGRAPHY **********************/
.heading1 p {
font-family: 'Source Sans Pro', sans-serif !important;
font-weight: 400 !important;
color: #ffffff !important;
font-size: 20px !important;
line-height: 22px !important;
margin-bottom: 10px !important;
}
.heading2 h1{
font-family: 'Source Sans Pro', sans-serif !important;
font-weight: 600 !important;
font-size: 38px !important;
line-height: 38px !important;
color: #B3A369 !important;
font-weight: 400;
}
.date-heading span, .date span, .header-heading span, .top-story span, .double-story-column span, .bottom-story span, .events span {
font-size: inherit !important;
color: inherit !important;
font-family: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
}
.date-heading strong, .date strong, .header-heading strong, .top-story strong, .double-story-column strong, .bottom-story strong, .events strong {
font-size: inherit !important;
color: inherit !important;
font-family: inherit !important;
line-height: inherit !important;
}
.date, .date p {
text-align: right !important;
}
/********************** BUTTONS **********************/
.button,
.button a,
.button a:visited,
.button a:active,
.button-link,
.button-link a,
.button-link a:visited,
.button-link a:active {
transition: all 200ms ease-in;
text-align: center;
color: #00529c !important;
font-size: 14px;
font-family: 'Source Sans Pro', sans-serif;
display: inline-block;
text-transform: uppercase;
font-weight: bold;
text-align: center;
}
.button:hover,
.button a:hover,
.button-link:hover,
.button-link a:hover,
.button:focus,
.button a:focus,
.button-link:focus,
.button-link a:focus {
background-color: transparent !important;
border-color: transparent !important;
color: #0C71CD !important;
cursor: pointer;
}
.button-link:hover,
.button-link a:hover,
.button-link:focus,
.button-link a:focus {
text-decoration: underline;
cursor: pointer;
}
.bluebg .button,
.bluebg .button a,
.bluebg .button a:visited,
.bluebg .button a:active,
.bluebg .button-link,
.bluebg .button-link a,
.bluebg .button-link a:visited,
.bluebg .button-link a:active{
color: #ffffff !important;
}
.bluebg .button:hover,
.bluebg .button a:hover,
.bluebg .button-link:hover,
.bluebg .button-link a:hover,
.bluebg .button:focus,
.bluebg .button a:focus,
.bluebg .button-link:focus,
.bluebg .button-link a:focus {
color: #BFB37C !important;
}
/********************** DIPTYCH STORY SECTION **********************/
.dark-stories .story_paragraph a, dark-stories .story_paragraph a:visited {
color: #b3a369 !important;
}
.story_paragraph a:hover {
color: #ffffff !important;
}
.story_paragraph p {
color: #ffffff;
}
.dark-stories h2, .dark-stories h2 a {
color: #BFB37C !important;
}
.diptyck_story_title {
color: #b3a369 !important;
}
/********************** footer **********************/
.footer-table a, .footer-table a:link, .footer-table a:visited {
color: #BFB37C !important;
border: none;
}
.footertext a, .footertext a:link .footertext a:visited {
color: #BFB37C !important;
}
.footertext a:hover, .footertext a:focus, .footertext a:link:hover .footertext a:visited:hover {
background-color: transparent !important;
color: #ffffff !important;
text-decoration: underline;
}
/********************** iPhone Corrections **********************/
/*fix blue apple links-this needs to be placed after the style tag AND after the media query tag*/
a[x-apple-data-detectors] {
color: inherit !important;
font-size: inherit !important;
font-family: inherit !important;
line-height: inherit !important;
}
/********************** GENERAL RESPONSIVENESS **********************/
@media only screen and (max-width: 599px){
.wrapper-table, .basic-table, .nested-basic-table {
max-width: 100% !important;
width: 100% !important;
}
.vert-margin {
width: 10px !important;
max-width: 10px !important;
min-width: 10px !important;
}
.two-column-story-image, .top-two-column-story-image {
max-width: 100% !important;
}
.margin-col {
margin-right: 0px !important;
margin-left: 0px !important;
}
h1 {
font-size: 30px !important;
line-heigth: 30px !important;
}
h2 {
font-size: 23px !important;
line-heigth: 23px !important;
}
}
/********************** RESPONSIVE SECTION LAYOUTS **********************/
/* Consoldate horizontal margins */
@media only screen and (max-width: 599px) {
.horiz-margin {
height: 10px !important;
max-height: 10px !important;
min-height: 10px !important;
}
.vert-margin-collapse {
width: 0px !important;
max-width: 0px !important;
min-width: 0px !important;
display: none !important;
}
}
/* 2 Equal-Width Columns V2 Layout Pattern CSS */
@media only screen and (max-width: 599px) {
td[class="pattern"] .spacer {
display: none; }
td[class="pattern"] .col{
width: 100%;
display: block;
max-width: 100% !important;
}
}
/* 3 equal-width columns Layout Pattern CSS */
@media only screen and (max-width: 599px) {
td[class="pattern"] .col{
width: 100%;
display: block;
}
td[class="pattern"] .col-left,
td[class="pattern"] .col-mid {
margin-bottom: 20px;
}
}
/********************** RESPONSIVENESS FOR HEADER **********************/
@media only screen and (max-width: 599px) {
.date-heading {
max-width: 100% !important;
width: 100% !important
}
.gt-logo {
width: 120px !important;
max-width: 120px !important;
height: auto;
}
.title-heading {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
.heading1 {
height: auto !important;
max-height: 200px !important;
overflow: visible !important;
}
.heading2 {
height: auto !important;
max-height: 250px !important;
overflow: visible !important;
}
.heading2 h1 {
font-size: 30px !important;
line-height: 30px !important;
}
.heading1 p {
font-size: 13px !important;
line-height: 16px !important;
}
.headerline .longline {
background: url("images/stripe-line-short.jpg");
content: " ";
background-size: 100% auto;
background-repeat: no-repeat;
height: 10px;
width: 100%;
min-width: 100%;
}
.headerline .longline img {
display: none !important;
}
.footerline img {
display: none !important;
}
.footerline {
background: url("images/stripe-line-short.jpg");
content: " ";
background-size: 100% auto;
background-repeat: no-repeat;
height: 10px;
width: 100%;
min-width: 100%;
}
}
@media (prefers-color-scheme: dark) {
.wrapper-table,
.logo-date-header,
.headerline,
.headline-story-large,
.headline-story-medium,
.small-story-container-basic,
.small-story-container-button,
.small-story-container-image,
.small-story-container-image-button,
.links-3col,
.links-2col {
background-color: #232327 !important;
}
.logo-date-header,
.footer-background,
.event-date,
.event-date div,
.dark-stories {
background-color: #003057 !important;
}
.title-heading,
.title-heading .vert-margin {
background-color: #003967 !important;
}
.heading2,
.heading2 h1,
h1,
h5,
.links-2col h5,
.links-2col h5 a,
.links-3col h5,
.links-3col h5 a,
.story-heading {
color: #B3A369 !important;
}
td,
p {
color: #f1f1f1 !important;
}
a, a:visited {
color: #4391EC !important;
font-weight: 600;
text-decoration-color: #0C71CD;
}
a:hover,
a:focus {
color: #ffffff !important;
text-decoration-color: #4391EC;
}
h2,
.button,
.button-link {
color: #B3A369 !important;
}
.button:hover,
.button a:hover,
.button-link:hover,
.button-link a:hover,
.button:focus,
.button a:focus,
.button-link:focus,
.button-link a:focus {
color: #ffffff !important;
}
.events-header-background,
.events-header-background table {
background-color: #565a56 !important;
background-color: #444744 !important;
}
.events-background,
.calendar-events,
.calendar-button {
background-color: #565a56 !important;
}
.event-title a,
.event-title a:visited,
.events-header-background h3,
.event-title,
.event-title h4,
.event-title h4 a,
.heading1,
.heading1 p,
.footer-background p {
color: #ffffff !important;
}
.event-title a, .event-title a:visited {
border-bottom: 1px solid #ffffff !important;
}
.dark-img {
display:block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height:inherit !important;
max-width:inherit !important;
line-height: auto !important;
margin-top:0px !important;
visibility:inherit !important;
}
.light-img {
display:none !important;
}
.headerline .longline {
background: url("images/stripe-line-short-dark.jpg");
}
.footerline {
background: url("images/stripe-line-short-dark.jpg");
}
}
[data-ogsc] .bluebg {
background-color: #003057 !important;
}
[data-ogsc] .story-heading {
color: #B3A369 !important;
}
[data-ogsc] .dark-img {
display:block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height:inherit !important;
max-width:inherit !important;
line-height: auto !important;
margin-top:0px !important;
visibility:inherit !important;
}
[data-ogsc] .light-img {
display:none;
display:none !important;
}
[data-ogsc] .headerline .longline {
background: url("images/stripe-line-short-dark.jpg");
}
[data-ogsc] .footerline {
background: url("images/stripe-line-short-dark.jpg");
}
</style>
</body>
</html>
