|
|
- <!DOCTYPE html>{% load humanize hc_extras %}
- <html>
- <head>
- <title>{% block title %}{% endblock %}</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <style type="text/css">
- /* CLIENT-SPECIFIC STYLES */
- body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
- table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
- img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
-
- /* RESET STYLES */
- img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
- table{border-collapse: collapse !important;}
- body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
-
- /* iOS BLUE LINKS */
- a[x-apple-data-detectors] {
- color: inherit !important;
- text-decoration: none !important;
- font-size: inherit !important;
- font-family: inherit !important;
- font-weight: inherit !important;
- line-height: inherit !important;
- }
-
- /* MOBILE STYLES */
- @media screen and (max-width: 525px) {
-
- /* ALLOWS FOR FLUID TABLES */
- .wrapper {
- width: 100% !important;
- max-width: 100% !important;
- }
-
- /* ADJUSTS LAYOUT OF LOGO IMAGE */
- .logo img {
- margin: 0 auto !important;
- }
-
- /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
- .mobile-hide {
- display: none !important;
- }
-
- .img-max {
- max-width: 100% !important;
- width: 100% !important;
- height: auto !important;
- }
-
- /* FULL-WIDTH TABLES */
- .responsive-table {
- width: 100% !important;
- }
-
- /* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
- .padding {
- padding: 10px 5% 15px 5% !important;
- }
-
- .padding-meta {
- padding: 30px 5% 0px 5% !important;
- text-align: center;
- }
-
- .no-padding {
- padding: 0 !important;
- }
-
- .section-padding {
- padding: 50px 15px 50px 15px !important;
- }
-
- /* ADJUST BUTTONS ON MOBILE */
- .mobile-button-container {
- margin: 0 auto;
- width: 100% !important;
- }
-
- .mobile-button {
- padding: 15px !important;
- border: 0 !important;
- font-size: 16px !important;
- display: block !important;
- }
-
- }
-
- /* ANDROID CENTER FIX */
- div[style*="margin: 16px 0;"] { margin: 0 !important; }
- </style>
- </head>
- <body style="margin: 0 !important; padding: 0 !important;">
- <table border="0" cellpadding="0" cellspacing="0" width="100%">
- <tr>
- <td bgcolor="#F2F4F6" align="center">
- <!--[if (gte mso 9)|(IE)]>
- <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
- <tr>
- <td align="center" valign="top" width="600">
- <![endif]-->
- <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" class="wrapper">
- <tr>
- <td align="center" valign="top" style="padding: 15px 0;" class="logo">
- <img alt="Logo" src="{% site_root %}/static/img/[email protected]" width="200" height="50" style="display: block; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 16px;" border="0">
- </td>
- </tr>
- </table>
- <!--[if (gte mso 9)|(IE)]>
- </td>
- </tr>
- </table>
- <![endif]-->
- </td>
- </tr>
- <tr>
- <td bgcolor="#ffffff" align="center" style="padding: 50px 15px 70px 15px;" class="section-padding">
- <!--[if (gte mso 9)|(IE)]>
- <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
- <tr>
- <td align="center" valign="top" width="600">
- <![endif]-->
- <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" class="responsive-table">
- <tr>
- <td>
- <!-- HERO IMAGE -->
- <table width="100%" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td>
- <table width="100%" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td style="padding: 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding">
- {% block content %}{% endblock %}
- </td>
- </tr>
- </table>
- </td>
- </tr>
- {% if button_text %}
- <tr>
- <td align="center">
- <table width="100%" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td align="center" style="padding-top: 25px; padding-bottom: 15px;" class="padding">
- <table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
- <tr>
- <td align="center" style="border-radius: 3px;" bgcolor="#22BC66"><a href="{{ button_url }}" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; border-radius: 3px; padding: 15px 25px; border: 1px solid #22BC66; display: inline-block;" class="mobile-button">{{ button_text }}</a></td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- {% endif %}
- <tr>
- <td>
- <table width="100%" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td style="padding: 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding">
- {% block content_more %}{% endblock %}
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- <!--[if (gte mso 9)|(IE)]>
- </td>
- </tr>
- </table>
- <![endif]-->
- </td>
- </tr>
-
- <tr>
- <td bgcolor="#ffffff" align="center" style="padding: 20px 0px;">
- <!--[if (gte mso 9)|(IE)]>
- <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
- <tr>
- <td align="center" valign="top" width="600">
- <![endif]-->
- <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="max-width: 600px;" class="responsive-table">
- <tr>
- <td align="center" style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;">
- © 2018 {% site_name %}. All rights reserved.
- {% block unsub %}{% endblock %}
- </td>
- </tr>
- </table>
- <!--[if (gte mso 9)|(IE)]>
- </td>
- </tr>
- </table>
- <![endif]-->
- </td>
- </tr>
- </table>
- </body>
- </html>
|
