4300512abe7cd0b989d9b966c431415cbc0f4c86
[civicrm-core.git] /
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" />
4 <title></title>
5
6 <style type="text/css">
7 {literal}
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;}
11
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;}
17 a img {border:none;}
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;}
23
24 /*STYLES*/
25 table[class=full] { width: 100%; clear: both; }
26
27 /*IPAD STYLES*/
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;}
41 }
42
43 /*IPHONE STYLES*/
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;}
47
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;}
59 }
60
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;}
66 }
67
68 @media only screen and (max-width: 640px) {
69 .desktop-spacer {display:none !important;}
70 }
71 {/literal}
72 </style>
73
74 <body>
75 <!-- Start of preheader --><!-- Start of preheader -->
76 <table bgcolor="#89c66b" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" width="100%">
77 <tbody>
78 <tr>
79 <td>
80 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
81 <tbody>
82 <tr>
83 <td width="100%">
84 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
85 <tbody><!-- Spacing -->
86 <tr>
87 <td height="20" width="100%">&nbsp;</td>
88 </tr>
89 <!-- Spacing -->
90 <tr>
91 <td>
92 <table align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner" width="310">
93 <tbody>
94 <tr>
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>
96 </tr>
97 </tbody>
98 </table>
99
100 <table align="right" border="0" cellpadding="0" cellspacing="0" class="emhide" width="310">
101 <tbody>
102 <tr>
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>
104 </tr>
105 </tbody>
106 </table>
107 </td>
108 </tr>
109 <!-- Spacing -->
110 <tr>
111 <td height="20" width="100%">&nbsp;</td>
112 </tr>
113 <!-- Spacing -->
114 </tbody>
115 </table>
116 </td>
117 </tr>
118 </tbody>
119 </table>
120 </td>
121 </tr>
122 </tbody>
123 </table>
124 <!-- End of main-banner-->
125
126 <table bgcolor="#d8d8d8" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" st-sortable="left-image" width="100%">
127 <tbody>
128 <tr>
129 <td>
130 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
131 <tbody>
132 <tr>
133 <td width="100%">
134 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
135 <tbody><!-- Spacing -->
136 <tr>
137 <td height="20" width="100%">
138 <table align="center" border="0" cellpadding="2" cellspacing="0" width="93%">
139 <tbody>
140 <tr>
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">&nbsp;</h6>
144 </td>
145 </tr>
146 <tr>
147 <td align="right">
148 <h5 style="font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial, sans-serif; color:#136388;">&nbsp;</h5>
149 </td>
150 </tr>
151 </tbody>
152 </table>
153 </td>
154 </tr>
155 <tr>
156 <td>
157 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
158 <tbody>
159 <tr>
160 <td width="100%">
161 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
162 <tbody><!-- /Spacing -->
163 <tr>
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>
165 </tr>
166 <!-- Spacing -->
167 <tr>
168 <td>
169 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner" width="650">
170 <tbody><!-- hero story -->
171 <tr>
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>
174 </td>
175 </tr>
176 <!-- /hero image --><!-- Spacing -->
177 <tr>
178 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%">&nbsp;</td>
179 </tr>
180 <!-- /Spacing -->
181 <tr>
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>
183 </tr>
184 <!-- Spacing -->
185 <tr>
186 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%">&nbsp;</td>
187 </tr>
188 <!-- /Spacing --><!-- content -->
189 <tr>
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>
193 </td>
194 </tr>
195 <tr>
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>
197 </tr>
198 <!-- /button --><!-- Spacing -->
199 <tr>
200 <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
201 </tr>
202 <!-- Spacing --><!-- end of content -->
203 </tbody>
204 </table>
205 </td>
206 </tr>
207 </tbody>
208 </table>
209 </td>
210 </tr>
211 </tbody>
212 </table>
213 </td>
214 </tr>
215 </tbody>
216 </table>
217 </td>
218 </tr>
219 </tbody>
220 </table>
221 </td>
222 </tr>
223 </tbody>
224 </table>
225 <!-- end of hero image and story --><!-- story 1 -->
226
227 <table bgcolor="#d8d8d8" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" st-sortable="left-image" width="100%">
228 <tbody>
229 <tr>
230 <td>
231 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
232 <tbody>
233 <tr>
234 <td width="100%">
235 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
236 <tbody><!-- Spacing -->
237 <tr>
238 <td>
239 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
240 <tbody>
241 <tr>
242 <td width="100%">
243 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
244 <tbody>
245 <tr>
246 <td>
247 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner" width="650">
248 <tbody><!-- image -->
249 <tr>
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>
252 </td>
253 </tr>
254 <!-- /image --><!-- Spacing -->
255 <tr>
256 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%">&nbsp;</td>
257 </tr>
258 <!-- /Spacing -->
259 <tr>
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>
261 </tr>
262 <!-- Spacing -->
263 <tr>
264 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%">&nbsp;</td>
265 </tr>
266 <!-- /Spacing --><!-- content -->
267 <tr>
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>
270 </td>
271 </tr>
272 <tr>
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>
274 </tr>
275 <!-- /button --><!-- Spacing -->
276 <tr>
277 <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
278 </tr>
279 <!-- Spacing --><!-- end of content -->
280 </tbody>
281 </table>
282 </td>
283 </tr>
284 </tbody>
285 </table>
286 </td>
287 </tr>
288 </tbody>
289 </table>
290 </td>
291 </tr>
292 </tbody>
293 </table>
294 </td>
295 </tr>
296 </tbody>
297 </table>
298 </td>
299 </tr>
300 </tbody>
301 </table>
302 <!-- /story 2--><!-- banner1 -->
303
304 <table bgcolor="#d8d8d8" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" st-sortable="left-image" width="100%">
305 <tbody>
306 <tr>
307 <td>
308 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
309 <tbody>
310 <tr>
311 <td width="100%">
312 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
313 <tbody><!-- Spacing -->
314 <tr>
315 <td>
316 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
317 <tbody>
318 <tr>
319 <td width="100%">
320 <table align="center" bgcolor="#89c66b" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
321 <tbody>
322 <tr>
323 <td>
324 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner" width="650">
325 <tbody><!-- image -->
326 <tr>
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>
329 </td>
330 </tr>
331 <!-- /image --><!-- content --><!-- Spacing -->
332 <tr>
333 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%">&nbsp;</td>
334 </tr>
335 <!-- /Spacing -->
336 <tr>
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>
339 </td>
340 </tr>
341 <!-- /button --><!-- white button -->
342 <!-- /button --><!-- Spacing --><!-- end of content -->
343 </tbody>
344 </table>
345 </td>
346 </tr>
347 </tbody>
348 </table>
349 </td>
350 </tr>
351 </tbody>
352 </table>
353 </td>
354 </tr>
355 </tbody>
356 </table>
357 </td>
358 </tr>
359 </tbody>
360 </table>
361 </td>
362 </tr>
363 </tbody>
364 </table>
365 <!-- /banner 1--><!-- banner 2 -->
366
367 <table bgcolor="#d8d8d8" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" st-sortable="left-image" width="100%">
368 <tbody>
369 <tr>
370 <td>
371 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
372 <tbody>
373 <tr>
374 <td width="100%">
375 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
376 <tbody><!-- Spacing -->
377 <tr>
378 <td>
379 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
380 <tbody>
381 <tr>
382 <td width="100%">
383 <table align="center" bgcolor="#136388" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
384 <tbody>
385 <tr>
386 <td>
387 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner" width="650">
388 <tbody><!-- image -->
389 <tr>
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>
392 </td>
393 </tr>
394 <!-- /image --><!-- content --><!-- Spacing -->
395 <tr>
396 <td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;" width="100%">&nbsp;</td>
397 </tr>
398 <!-- /Spacing -->
399 <tr>
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>
402 </td>
403 </tr>
404 <!-- /button --><!-- white button -->
405 <tr>
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>
407 </tr>
408 <!-- /button --><!-- Spacing --><!-- end of content -->
409 </tbody>
410 </table>
411 </td>
412 </tr>
413 </tbody>
414 </table>
415 </td>
416 </tr>
417 </tbody>
418 </table>
419 </td>
420 </tr>
421 </tbody>
422 </table>
423 </td>
424 </tr>
425 </tbody>
426 </table>
427 </td>
428 </tr>
429 </tbody>
430 </table>
431 <!-- /banner2 --><!-- footer -->
432
433 <table bgcolor="#d8d8d8" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" st-sortable="footer" width="100%">
434 <tbody>
435 <tr>
436 <td>
437 <table align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
438 <tbody>
439 <tr>
440 <td width="100%">
441 <table align="center" bgcolor="#89c66b" border="0" cellpadding="0" cellspacing="0" class="devicewidth" width="650">
442 <tbody><!-- Spacing -->
443 <tr>
444 <td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
445 </tr>
446 <!-- Spacing -->
447 <tr>
448 <td><!-- logo -->
449 <table align="left" border="0" cellpadding="0" cellspacing="0" width="250">
450 <tbody>
451 <tr>
452 <td width="20">&nbsp;</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>
454 </tr>
455 <tr>
456 <td width="20">&nbsp;</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>
458 </tr>
459 </tbody>
460 </table>
461 <!-- end of logo --><!-- start of social icons -->
462
463 <table align="right" border="0" cellpadding="0" cellspacing="0" height="40" vaalign="middle" width="60">
464 <tbody>
465 <tr>
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>
468 </td>
469 <td align="left" style="font-size:1px; line-height:1px;" width="10">&nbsp;</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>
472 </td>
473 <td align="left" style="font-size:1px; line-height:1px;" width="20">&nbsp;</td>
474 </tr>
475 </tbody>
476 </table>
477 <!-- end of social icons --></td>
478 </tr>
479 <!-- Spacing -->
480 <tr>
481 <td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
482 </tr>
483 <!-- Spacing -->
484 </tbody>
485 </table>
486 </td>
487 </tr>
488 </tbody>
489 </table>
490 </td>
491 </tr>
492 </tbody>
493 </table>
494
495 </body>
496 </html>