Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
jdh
12,334 PointsEmail Design for Outlook
Fabio Carneiro or anyone!
Hi all,
I followed the HTML email design course and then used it as a template to create a very similar layout however, when emailing to Outlook (specifically Outlook 365) there are a ton of issues. The font doesn't render the same, there are some white spaces in the "call to action" blocks and the rounded border-radius property doesnt render.
Is there any fix for this?
Also, just a general MailChimp question but I noticed that you can zip a package to the code yourself area. Does this mean you can use external stylesheets?
Appreciate your time
2 Answers
Chris Shaw
26,676 PointsHi jdh,
There are a ton of different things you can do to get emails working and looking right in Outlook but it's hard to say which fixes you need to use without seeing the code.
For general white space issues however you can fix that by setting an inline style of line-height: 0; which voids white space in Outlook based clients.
Also, just a general MailChimp question but I noticed that you can zip a package to the code yourself area. Does this mean you can use external stylesheets?
During development you can use an external stylesheet to build the email template but it's not quite that simple when you're at the step of sending it out as clients such as Hotmail and Outlook ignore external stylesheets therefore everything must be put inline.
I've never personally used Mailchimp so I'm not sure if they do this automatically for you because I typically put all my styles in the same HTML file and then use the Ink Inliner tool by ZURB which takes all the classes and id's and places the styles inline without any effort.
jdh
12,334 PointsHi Chris Upjohn,
Thanks for the response. That Ink Inliner tool is awesome - I wasn't aware of that before.
I've posted some of the code below. Can you please help me with the fixes for Outlook? I've followed Fabios course pretty thoroughly and the layout is identical to the course document.
The issue I am having are: 1) border-radius property not being rendered by Outlook 2) the border under the buttons not being rendered in Outlook 3) font not being rendered properly in Outlook 4) the contacts section is off-center in Outlook 5) Spacing is not rendering properly
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outlook Issues</title>
<!--
This email is based on the idea that the most common design
patterns seen in email can be placed in modular blocks and
moved around to create different designs.
The same principle is used to build the email templates in
MailChimp's Drag-and-Drop email editor.
This email is optimized for mobile email clients, but does not
support the Android of iOS Gmail App, which do not support
Media Queries.
For more information on HTML email design and development,
visit http://templates.mailchimp.com
-->
<style type="text/css">
/*
Except for the reset, client-specific, and media query
styles, all CSS in this email has been inlined. It can be
tedious to adjust email styling when inlining has been done,
so it's easier to write all CSS in the head, then use
a CSS inliner to inline the styles once you've finished.
MailChimp provides a stand-alone CSS inliner at
http://beaker.mailchimp.com/inline-css
*/
/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important; min-width: 100%;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
p{margin: 1em 0;}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// MOBILE STYLES //////*/
/*
CSS selectors are written in attribute
selector format to prevent Yahoo Mail
from rendering media query styles on
desktop.
*/
@media only screen and (max-width: 480px){
/*////// RESET STYLES //////*/
td[id="introductionContainer"], td[id="callToActionContainer"], td[id="eventContainer"], td[id="merchandiseContainer"], td[id="footerContainer"]{padding-right:10px !important; padding-left:10px !important;}
table[id="introductionBlock"], table[id="callToActionBlock"], table[id="eventBlock"], table[id="merchandiseBlock"], table[id="footerBlock"]{max-width:480px !important; width:100% !important; min-width: 100% !important;}
/*////// CLIENT-SPECIFIC STYLES //////*/
body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
/*////// GENERAL STYLES //////*/
h1{font-size:34px !important;}
h2{font-size:30px !important;}
h3{font-size:24px !important;}
img[id="heroImage"]{height:auto !important; min-width:100% !important; width:100% !important;}
td[class="introductionLogo"], td[class="introductionHeading"]{display:block !important;}
td[class="introductionHeading"]{padding:40px 0 0 0 !important;}
td[class="introductionContent"]{padding-top:20px !important;}
td[class="callToActionContent"]{text-align:left !important;}
table[class="callToActionButton"]{width:100% !important;}
td[id="eventBlockCell"]{padding-right:20px !important; padding-left:20px !important;}
table[class="eventBlockCalendar"]{width:100px !important;}
td[id="merchandiseBlockCell"]{padding-right:10px !important; padding-left:10px !important;}
td[class="merchandiseBlockHeading"] h2{text-align:center !important;}
td[class="merchandiseBlockLeftColumn"], td[class="merchandiseBlockRightColumn"]{display:block !important; padding:0 0 20px 0 !important; width:100% !important;}
td[class="footerContent"]{font-size:15px !important;}
td[class="footerContent"] a{display:block;}
}
</style>
</head>
<body style="margin: 0;padding: 0;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #424145;height: 100%;width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;background-color: #424145;height: 100%;width: 100%;">
<center>
<tr>
<td align="center" valign="top" id="bodyCell" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;height: 100%;width: 100%;">
<!-- // BEGIN EMAIL -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="emailContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;width: 100%;">
<tr>
<td align="center" valign="top" id="heroImageContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #000000;">
<!-- // BEGIN HERO BLOCK -->
<img src="img/hero_img.png" alt="" height="229" width="520" id="heroImage" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;">
<!-- END HERO BLOCK // -->
</td>
</tr>
<!-- START: Intro Block / Option Two -->
<tr>
<td align="center" valign="top" id="introductionContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #Ffffff;padding: 40px;">
<table border="0" cellpadding="0" cellspacing="0" width="520" id="introductionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #Ffffff;">
<tr>
<td style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" class="introductionLogo" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<a href="#" target="_blank" title="square gallery" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"><img src="img/logo.jpg" alt="square gallery" height="71" width="165" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; margin-top: 30px;"></a>
</td>
<td align="left" valign="middle" class="introductionHeading" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #808080;font-size: 14px;font-weight: bold;line-height: 150%;padding-left: 40px;">
Welcome
<br>
<h1 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #e87511;font-size: 44px;font-weight: 100;line-height: 115%;text-align: left;">To Jake's Email</h1>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="introductionContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 18px;line-height: 150%;padding-top: 40px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
</table>
</td>
</tr>
<!-- END: INTRO BLOCK // -->
<!-- // BEGIN CALL-TO-ACTION BLOCK -->
<tr>
<td align="center" valign="top" id="callToActionContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #76A23F;padding: 40px;">
<table border="0" cellpadding="0" cellspacing="0" width="520" id="callToActionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #76A23F;">
<tr>
<td align="center" valign="top" class="callToActionContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #FFFFFF;font-size: 16px;line-height: 150%;padding-bottom: 40px;text-align: left;">
<h3 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #FFFFFF;font-size: 30px;font-weight: 100;line-height: 115%;text-align: center;">Call to Action Title</h3>
<br>
</td>
</tr>
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="callToActionButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #Ffffff;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="top" class="callToActionButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;padding-top: 20px;padding-right: 40px;padding-bottom: 20px;padding-left: 40px;color: #e87511;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="square gallery" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #565a5c;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">Button #1</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; padding-top: 10px;">
<table border="0" cellpadding="0" cellspacing="0" class="callToActionButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #Ffffff;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="top" class="callToActionButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;padding-top: 20px;padding-right: 40px;padding-bottom: 20px;padding-left: 40px;color: #e87511;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="square gallery" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #565a5c;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">Button #2</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; padding-top: 10px;">
<table border="0" cellpadding="0" cellspacing="0" class="callToActionButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #Ffffff;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="top" class="callToActionButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;padding-top: 20px;padding-right: 40px;padding-bottom: 20px;padding-left: 40px;color: #e87511;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="square gallery" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #565a5c;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">Button #3</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- //END CALL-TO-ACTION BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="eventContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;padding: 40px;">
<!-- // BEGIN EVENT BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="eventBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #Ffffff;border-top: 1px solid #565a5c;border-bottom: 1px solid #565a5c;">
<tr>
<td align="center" valign="top" id="eventBlockCell" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding: 40px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="left" valign="top" class="eventBlockHeading" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-bottom: 40px;">
<h2 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #565a5c;font-size: 34px;font-weight: 100;line-height: 100%;text-align: left;">IMPORTANT DATE</h2>
</td>
</tr>
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="110" class="eventBlockCalendar" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border: 1px solid #Dcdcdc;">
<tr>
<td align="center" valign="top" class="eventBlockMonth" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: #e87511;color: #FFFFFF;font-size: 18px;font-weight: bold;line-height: 100%;padding: 10px;">
Sept
</td>
</tr>
<tr>
<td align="center" valign="top" class="eventBlockDay" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: #FFFFFF;color: #404040;font-size: 48px;font-weight: bold;line-height: 100%;padding: 15px;">
15
</td>
</tr>
</table>
</td>
<td align="left" valign="top" class="eventContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 125%;padding-left: 20px;">
<h3 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #e87511;font-size: 30px;font-weight: 100;line-height: 115%;text-align: left;">Event Title</h3>
<strong>Your invited to this awesome event on September 15.</strong>
<br>
Hosted at 123 Seasame Street.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END EVENT BLOCK // -->
</td>
</tr>
<!-- Start: Blue Section -->
<tr>
<td align="center" valign="top" id="callToActionContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #005AC9;padding: 40px;">
<!-- // BEGIN CALL-TO-ACTION BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="520" id="callToActionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #005AC9;">
<tr>
<td align="center" valign="top" class="callToActionContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #FFFFFF;font-size: 16px;line-height: 150%;padding-bottom: 40px;text-align: left;">
<h3 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #FFFFFF;font-size: 30px;font-weight: 100;line-height: 115%;text-align: center;">WHATS INCLUDED?</h3>
<br>
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>
</td>
</tr>
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="callToActionButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #Ffffff;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="top" class="callToActionButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;padding-top: 20px;padding-right: 40px;padding-bottom: 20px;padding-left: 40px;color: #e87511;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="square gallery" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #565a5c;display: block;font-size: 24px;font-weight: bold;line-height: 100%;letter-spacing: -1px;text-align: center;text-decoration: none;">Register Now</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- //END CALL-TO-ACTION BLOCK -->
</td>
</tr>
<!-- END: Orange Section -->
<!-- // START: Contacts BLOCK -->
<tr>
<td align="center" valign="top" id="merchandiseContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #Ffffff;padding-right: 40px;padding-bottom: 40px;padding-left: 40px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="merchandiseBlock" style="border-collapse: separate;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border-radius: 4px;">
<tr>
<td align="center" valign="top" id="merchandiseBlockCell" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding: 40px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="left" valign="top" class="merchandiseBlockHeading" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-bottom: 20px;">
<h2 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 34px;font-weight: 100;line-height: 100%;text-align: center;">CONTACTS</h2>
</td>
</tr>
<!-- START: CONTACTS Section / Part: One-->
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" width="50%" class="merchandiseBlockLeftColumn" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img src="img/it.png" height="130" width="130" class="merchandiseImage" style="border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;">
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 110%;padding-left: 10px;">
Contact #1
<br>
<strong>Text about Contact #1</strong>
<br>
<ul>
<li>Stuff they do #1</li>
<li>Stuff they do #2</li>
<li>Stuff they do #3</li>
<li>Stuff they do #4</li>
</ul>
<br>
<br>
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #0098C3;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #Ffffff;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">Contact</a>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
<!-- END: CONTACTS Section / Part: One -->
<!-- START: CONTACTS Section / Part: Two -->
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" width="50%" class="merchandiseBlockLeftColumn" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img src="img/fieldops.png" height="130" width="130" class="merchandiseImage" style="border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; padding-top: 20px;">
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 110%;padding-left: 10px; padding-top: 20px;">
Contact #2
<br>
<strong>Text about Contact #2</strong>
<br>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<br>
<br>
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #C83000;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #Ffffff;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">Contact</a>
</td>
</tr>
</table>
</tr>
</table>
</td>
<!-- END: CONTACTS Section / Part: One -->
<!-- START: CONTACTS Section / Part: Two -->
</tr>
<!-- START: CONTACTS Section / Part: Three-->
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" width="50%" class="merchandiseBlockLeftColumn" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img src="img/fielden.png" height="130" width="130" class="merchandiseImage" style="border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; padding-top: 20px;">
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 110%;padding-left: 10px; padding-top: 20px">
Contact #3
<br>
<strong>Text about Contact #3</strong>
<br>
<ul>
<li>Stuff they do #1</li>
<li>Stuff they do #2</li>
<li>Stuff they do #3</li>
<li>Stuff they do #4</li>
</ul>
<br>
<br>
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #76A23F;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #Ffffff;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">Contact</a>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
<!-- END: CONTACTS Section / Part: Three-->
<!-- START: CONTACTS Section / Part: Four-->
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" width="50%" class="merchandiseBlockLeftColumn" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img src="img/karen.png" height="130" width="130" class="merchandiseImage" style="border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; padding-top: 20px;">
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 110%;padding-left: 10px; padding-top: 20px">
Contact #4
<br>
<strong>Text about Contact #4</strong>
<br>
<ul>
<li>Stuff they do #1</li>
<li>Stuff they do #2</li>
<li>Stuff they do #3</li>
<li>Stuff they do #4</li>
</ul>
<br>
<br>
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #005AC9;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #Ffffff;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">Contact</a>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
<!-- END: CONTACTS Section / Part: Four-->
</table>
<!-- END: CONTACTS Section / Part: Two -->
</td>
</tr>
</table>
</td>
</tr>
<!-- // BEGIN CALL-TO-ACTION BLOCK -->
<tr>
<td align="center" valign="top" id="callToActionContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #00A3AE;padding: 40px;">
<table border="0" cellpadding="0" cellspacing="0" width="520" id="callToActionBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #00A3AE;">
<tr>
<td align="center" valign="top" class="callToActionContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #FFFFFF;font-size: 16px;line-height: 150%;padding-bottom: 20px;text-align: left;">
<h3 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #FFFFFF;font-size: 30px;font-weight: 100;line-height: 115%;text-align: center;">Tools</h3>
<br>
</td>
</tr>
<!-- test -->
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" width="50%" class="merchandiseBlockLeftColumn" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 10px; background-color: white;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 110%;padding-left: 10px;">
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #0098C3;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
</tr>
</table>
</tr>
<!-- end test -->
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="callToActionButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #Ffffff;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc; margin-top: 10px;">
<tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- //END CALL-TO-ACTION BLOCK -->
</table>
</td>
</tr>
<!-- // START: Contacts BLOCK -->
<tr>
<td align="center" valign="top" id="merchandiseContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #Ffffff;padding-right: 40px;padding-bottom: 20px;padding-left: 40px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="merchandiseBlock" style="border-collapse: separate;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border-radius: 4px;">
<tr >
<td align="center" valign="top" id="merchandiseBlockCell" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="left" valign="top" class="merchandiseBlockHeading" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-bottom: 20px;">
<h2 style="margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 34px;font-weight: 100;line-height: 100%;text-align: center;">COURSES</h2>
</td>
</tr>
<!-- START: CONTACTS Section / Part: One-->
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" width="50%" class="merchandiseBlockLeftColumn" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img src="img/it.png" height="100" width="100" class="merchandiseImage" style="border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; padding-top: 10px">
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 110%;padding-left: 10px;">
<b>Course #1</b>
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ul>
<br>
<br>
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #0098C3;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #Ffffff;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 5px;text-align: center;text-decoration: none;">Register</a>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
<!-- END: CONTACTS Section / Part: One -->
<!-- START: CONTACTS Section / Part: Two-->
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" width="100%" class="merchandiseBlockLeftColumn" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 10px; padding-top: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img src="img/it.png" height="100" width="100" class="merchandiseImage" style="border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; padding-top: 15px;">
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 110%;padding-left: 10px; padding-top: 10px;">
<b>Course #2</b>
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ul>
<br>
<br>
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #0098C3;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #Ffffff;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 5px;text-align: center;text-decoration: none;">Register</a>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
<!-- END: CONTACTS Section / Part: Two -->
<!-- START: CONTACTS Section / Part: Two-->
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" width="100%" class="merchandiseBlockLeftColumn" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 10px; padding-top: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img src="img/it.png" height="100" width="100" class="merchandiseImage" style="border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; padding-top: 15px;">
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #606060;font-size: 16px;line-height: 110%;padding-left: 10px; padding-top: 10px;">
<b>Course #3</b>
<ul>
<li>Course #1</li>
<li>Course #2</li>
<li>Course #3</li>
</ul>
<br>
<br>
</td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #0098C3;border-radius: 4px;box-shadow: 0 5px 0 #dcdcdc;">
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #Ffffff;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 10px;text-align: center;text-decoration: none;">
<a href="#" target="_blank" title="" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #F0F0F0;font-size: 16px;font-weight: bold;line-height: 100%;letter-spacing: -1px;padding: 5px;text-align: center;text-decoration: none;">Register</a>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
<!-- END: CONTACTS Section / Part: Two -->
</table>
</td>
</tr>
</table>
<!-- END Contacts BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="footerContainer" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding: 10px;">
<!-- // BEGIN FOOTER BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="footerBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="top" class="footerContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #ffffff;font-size: 13px;line-height: 150%;padding-bottom: 10px;">
<strong>As always, if you have any questions,
<br>
please do not hesitate to contact us.</strong>
</td>
</tr>
<tr>
<td align="center" valign="top" class="footerContent" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #ffffff;font-size: 13px;line-height: 100%;padding-bottom: 10px;">
© 2014. • 123 Sesame Street • Waterloo, Ontario
<br>
<br>
<a href="#" target="_blank" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #ffffff;text-decoration: none;">Contact JDH</a> <a href="#" target="_blank" style="-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #ffffff;text-decoration: none;">View in Browser</a>
</td>
</tr>
</table>
<!-- END FOOTER BLOCK // -->
</td>
</tr>
</table>
<!-- END EMAIL // -->
</td>
</tr>
</table>
</table></table></table></table></table></table></table></center>
</table></body>
</html>
Chris Shaw
26,676 Points1) border-radius property not being rendered by Outlook
The border-radius property is part of the CSS3 spec which wasn't around when Outlook was built, even though Outlook 365 was it still doesn't support it.
For more information about supported CSS properties refer to the Campaign Monitor will it work CSS guide.
2) the border under the buttons not being rendered in Outlook
Again this is the same as above, the box-shadow property isn't supported.
3) font not being rendered properly in Outlook
This is a well known problem and the only solution I've found is to use whole and even numbers which even still isn't perfect, the reason it happens is because the Word text processing engine doesn't use the W3C standards but instead Microsoft used their own.
Your last points are mainly due to a large amount of invalid markup, unclosed tags and missing tags, you will need to fix these before testing again and you can check what the errors are by putting your code into the W3C Validator.