1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
3 <meta content="width=device-width, initial-scale=1.0" name="viewport" />
6 <style type="text/css">
8 /* Client-specific Styles */
9 #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
10 body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
12 /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
13 .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
14 .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
15 #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
16 img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
18 .image_fix {display:block;}
19 p {margin: 0px 0px !important;}
20 table td {border-collapse: collapse;}
21 table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
22 a {text-decoration: none;text-decoration:none;}
25 table[class=full] { width: 100%; clear: both; }
28 @media only screen and (max-width: 640px) {
29 a[href^="tel"], a[href^="sms"] {text-decoration: none;color:#136388;pointer-events: none;cursor: default;}
30 .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration: default;color:#136388;pointer-events: auto;cursor: default;}
31 table[class=devicewidth] {width: 440px!important;text-align:center!important;}
32 table[class=devicewidthmob] {width: 416px!important;text-align:center!important;}
33 table[class=devicewidthinner] {width: 416px!important;text-align:center!important;}
34 img[class=banner] {width: 440px!important;auto!important;}
35 img[class=col2img] {width: 440px!important;height:auto!important;}
36 table[class="cols3inner"] {width: 100px!important;}
37 table[class="col3img"] {width: 131px!important;}
38 img[class="col3img"] {width: 131px!important;height: auto!important;}
39 table[class="removeMobile"]{width:10px!important;}
40 img[class="blog"] {width: 440px!important;height: auto!important;}
44 @media only screen and (max-width: 480px) {
45 a[href^="tel"], a[href^="sms"] {text-decoration: none;color: #136388;pointer-events: none;cursor: default;}
46 .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration: none;color:#136388;pointer-events: auto;cursor: default;}
48 table[class=devicewidth] {width: 280px!important;text-align:center!important;}
49 table[class=devicewidthmob] {width: 260px!important;text-align:center!important;}
50 table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
51 img[class=banner] {width: 280px!important;height:100px!important;}
52 img[class=col2img] {width: 280px!important;height:auto!important;}
53 table[class="cols3inner"] {width: 260px!important;}
54 img[class="col3img"] {width: 280px!important;height: auto!important;}
55 table[class="col3img"] {width: 280px!important;}
56 img[class="blog"] {width: 280px!important;auto!important;}
57 td[class="padding-top-right15"]{padding:15px 15px 0 0 !important;}
58 td[class="padding-right15"]{padding-right:15px !important;}
61 @media only screen and (max-device-width: 800px)
62 {td[class="padding-top-right15"]{padding:15px 15px 0 0 !important;}
63 td[class="padding-right15"]{padding-right:15px !important;}}
64 @media only screen and (max-device-width: 769px) {
65 .devicewidthmob {font-size:16px;}
68 @media only screen and (max-width: 640px) {
69 .desktop-spacer {display:none !important;}
75 <!-- Start of preheader --><!-- Start of preheader -->
76 <table bgcolor="#89c66b" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" width="100%">
80 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
84 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
85 <tbody><!-- Spacing -->
87 <td height="20" width="100%"> </td>
92 <table align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner" width="310">
95 <td align="left" style="font-family: Helvetica, arial, sans-serif; font-size: 16px; line-height:120%; color: #f8f8f8;padding-left:15px; padding-bottom:5px;" valign="middle">Organization or Program Name Here</td>
100 <table align="right" border="0" cellpadding="0" cellspacing="0" class="emhide" width="310">
103 <td align="right" style="font-family: Helvetica, arial, sans-serif; font-size: 16px;color: #f8f8f8;padding-right:15px; text-align:right;" valign="middle">Month and Year</td>
111 <td height="20" width="100%"> </td>
124 <!-- End of main-banner-->
126 <table bgcolor="#d8d8d8" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" st-sortable="left-image" width="100%">
130 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
134 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
135 <tbody><!-- Spacing -->
137 <td height="20" width="100%">
138 <table align="center" border="0" cellpadding="2" cellspacing="0" width="93%">
141 <td rowspan="2" style="padding-top:10px; padding-bottom:10px;" width="38%"><img src="https://civicrm.org/sites/default/files/civicrm/custom/images/civicrm-logo-transparent.png" alt="Replace with your own logo" width="220" border="0" /></td>
142 <td align="right" width="62%">
143 <h6 class="collapse"> </h6>
148 <h5 style="font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial, sans-serif; color:#136388;"> </h5>
157 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
161 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
162 <tbody><!-- /Spacing -->
164 <td style="font-family: Helvetica, arial, sans-serif; font-size: 23px; color:#f8f8f8; text-align:left; line-height: 32px; padding:5px 15px; background-color:#136388;">Headline Here</td>
169 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner" width="650">
170 <tbody><!-- hero story -->
172 <td align="center" class="devicewidthinner" width="100%">
173 <div class="imgpop"><a href="#"><img alt="" border="0" class="blog" height="auto" src="https://civicrm.org/sites/default/files/civicrm/custom/images/650x396.png" style="display:block; border:none; outline:none; text-decoration:none; padding:0; line-height:0;" width="650" /></a></div>
176 <!-- /hero image --><!-- Spacing -->
178 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%"> </td>
182 <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; text-align:left; line-height: 26px; padding:0 15px; color:#89c66b;"><a href="#" style="color:#89c66b;">Your Heading Here</a></td>
186 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%"> </td>
188 <!-- /Spacing --><!-- content -->
190 <td style="padding:0 15px;">
191 <p style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #7a6e67; text-align:left; line-height: 26px; padding-bottom:10px;">{contact.email_greeting}, </p>
192 <p style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #7a6e67; text-align:left; line-height: 26px; padding-bottom:10px;"><span class="padding-right15" style="font-family: Helvetica, arial, sans-serif; font-size: 14px; color: #7a6e67; text-align:left; line-height: 24px;">Replace with your text and images, and remember to link the facebook and twitter links in the footer to your pages. Have fun!</span></p>
196 <td class="padding-right15" style="font-family: Helvetica, arial, sans-serif; font-size: 16px; font-weight:bold; color: #333333; text-align:left;line-height: 24px; padding-top:10px; padding-left:15px;"><a href="#" style="color:#136388;text-decoration:none;font-weight:bold;" target="_blank" title="read more">Read More</a></td>
198 <!-- /button --><!-- Spacing -->
200 <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
202 <!-- Spacing --><!-- end of content -->
225 <!-- end of hero image and story --><!-- story 1 -->
227 <table bgcolor="#d8d8d8" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" st-sortable="left-image" width="100%">
231 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
235 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
236 <tbody><!-- Spacing -->
239 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
243 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
247 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner" width="650">
248 <tbody><!-- image -->
250 <td align="center" class="devicewidthinner" width="100%">
251 <div class="imgpop"><a href="#" target="_blank"><img alt="" border="0" class="blog" height="250" src="https://civicrm.org/sites/default/files/civicrm/custom/images/banner-image-650-250.png" style="display:block; border:none; outline:none; text-decoration:none; padding:0; line-height:0;" width="650" /></a></div>
254 <!-- /image --><!-- Spacing -->
256 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%"> </td>
260 <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; text-align:left; line-height: 26px; padding:0 15px;"><a href="#" style="color:#89c66b;">Your Heading Here</a></td>
264 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%"> </td>
266 <!-- /Spacing --><!-- content -->
268 <td style="padding:0 15px;">
269 <p style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #7a6e67; text-align:left; line-height: 26px; padding-bottom:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
273 <td class="padding-right15" style="font-family: Helvetica, arial, sans-serif; font-size: 16px; font-weight:bold; color: #333333; text-align:left;line-height: 24px; padding-top:10px; padding-left:15px;"><a href="#" style="color:#136388;text-decoration:none;font-weight:bold;" target="_blank" title="read more">Read More</a></td>
275 <!-- /button --><!-- Spacing -->
277 <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
279 <!-- Spacing --><!-- end of content -->
302 <!-- /story 2--><!-- banner1 -->
304 <table bgcolor="#d8d8d8" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" st-sortable="left-image" width="100%">
308 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
312 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
313 <tbody><!-- Spacing -->
316 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
320 <table align="center" bgcolor="#89c66b" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
324 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner" width="650">
325 <tbody><!-- image -->
327 <td align="center" class="devicewidthinner" width="100%">
328 <div class="imgpop"><a href="#" target="_blank"><img alt="" border="0" class="blog" height="auto" src="https://civicrm.org/sites/default/files/civicrm/custom/images/banner-image-650-250.png" style="display:block; border:none; outline:none; text-decoration:none; padding:0; line-height:0;" width="650" /></a></div>
331 <!-- /image --><!-- content --><!-- Spacing -->
333 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%"> </td>
337 <td style="padding:15px;">
338 <p style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #f0f0f0; text-align:left; line-height: 26px; padding-bottom:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
341 <!-- /button --><!-- white button -->
342 <!-- /button --><!-- Spacing --><!-- end of content -->
365 <!-- /banner 1--><!-- banner 2 -->
367 <table bgcolor="#d8d8d8" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" st-sortable="left-image" width="100%">
371 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
375 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
376 <tbody><!-- Spacing -->
379 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
383 <table align="center" bgcolor="#136388" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
387 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner" width="650">
388 <tbody><!-- image -->
390 <td align="center" class="devicewidthinner" width="100%">
391 <div class="imgpop"><a href="#" target="_blank"><img alt="" border="0" class="blog" height="auto" src="https://civicrm.org/sites/default/files/civicrm/custom/images/banner-image-650-250.png" style="display:block; border:none; outline:none; text-decoration:none; padding:0; line-height:0;" width="650" /></a></div>
394 <!-- /image --><!-- content --><!-- Spacing -->
396 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%"> </td>
400 <td style="padding: 15px;">
401 <p style="font-family: Helvetica, arial, sans-serif; font-size: 16px; color: #f0f0f0; text-align:left; line-height: 26px; padding-bottom:10px;">Remember to link the facebook and twitter links below to your pages!</p>
404 <!-- /button --><!-- white button -->
406 <td class="padding-right15" style="font-family: Helvetica, arial, sans-serif; font-size: 16px; font-weight:bold; color: #333333; text-align:left;line-height: 24px; padding-top:10px; padding-bottom:10px; padding-left:15px;"><a href="#" style="color:#ffffff;text-decoration:none;font-weight:bold;" target="_blank" title="read more">Read More</a></td>
408 <!-- /button --><!-- Spacing --><!-- end of content -->
431 <!-- /banner2 --><!-- footer -->
433 <table bgcolor="#d8d8d8" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" st-sortable="footer" width="100%">
437 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
441 <table align="center" bgcolor="#89c66b" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
442 <tbody><!-- Spacing -->
444 <td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
449 <table align="left" border="0" cellpadding="0" cellspacing="0" width="250">
452 <td width="20"> </td>
453 <td align="left" height="40" width="250"><span style="font-family: Helvetica, arial, sans-serif; font-size: 13px; text-align:left; line-height: 26px; padding-bottom:10px;"><a href="{action.unsubscribeUrl}" style="color: #f0f0f0; ">Unsubscribe | </a><a href="{action.subscribeUrl}" style="color: #f0f0f0;">Subscribe |</a> <a href="{action.optOutUrl}" style="color: #f0f0f0;">Opt out</a></span></td>
456 <td width="20"> </td>
457 <td align="left" height="40" width="250"><span style="font-family: Helvetica, arial, sans-serif; font-size: 13px; text-align:left; line-height: 26px; padding-bottom:10px; color: #f0f0f0;">{domain.address}</span></td>
461 <!-- end of logo --><!-- start of social icons -->
463 <table align="right" border="0" cellpadding="0" cellspacing="0" height="40" vaalign="middle" width="60">
466 <td align="left" height="22" width="22">
467 <div class="imgpop"><a href="#" target="_blank"><img alt="" border="0" height="22" src="https://civicrm.org/sites/default/files/civicrm/custom/images/facebook.png" style="display:block; border:none; outline:none; text-decoration:none;" width="22" /> </a></div>
469 <td align="left" style="font-size:1px; line-height:1px;" width="10"> </td>
470 <td align="right" height="22" width="22">
471 <div class="imgpop"><a href="#" target="_blank"><img alt="" border="0" height="22" src="https://civicrm.org/sites/default/files/civicrm/custom/images/twitter.png" style="display:block; border:none; outline:none; text-decoration:none;" width="22" /> </a></div>
473 <td align="left" style="font-size:1px; line-height:1px;" width="20"> </td>
477 <!-- end of social icons --></td>
481 <td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>