{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0">    <!-- So that mobile webkit will display zoomed in -->
    <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->

    <style type="text/css">
        /* Resets: see reset.css for details */
        .ReadMsgBody { width: 100%; background-color: #ebebeb;}
        .ExternalClass { width: 100%; background-color: #ebebeb;}
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
        body {
            margin:0;
            padding:10px 0;
        }
        table {border-spacing:0;}
        table td {border-collapse:collapse;}
        .container-pre-header {
            background-color: #ffffff;
            padding-left: 30px;
            padding-right: 30px;
            font-size: 14px;
            line-height: 20px;
            font-family: Open Sans, sans-serif;
            color: #333;
            border-top: 10px solid #1AA1E0;
            border-radius: 5px;
        }
        .container-header {
            padding-left: 30px;
            padding-right: 30px;
            font-size: 14px;
            line-height: 20px;
            font-family: Open Sans, sans-serif;
            color: #333;
            background-color: #f3f3f3;
            border-top: 1px solid #cccccc;
            border-bottom: 1px solid #eeeeee;
        }
        .container-body{
            background-color: #ffffff;
            padding-left: 30px;
            padding-right: 30px;
            font-size: 13px;
            line-height: 20px;
            font-family: Open Sans, sans-serif;
            color: #333;
            border-radius: 5px;
        }
        .container-footer{
            padding-left: 30px;
            padding-right: 30px;
            font-size: 13px;
            line-height: 20px;
            font-family: Open Sans, sans-serif;
            color: #002D40;
            background-color: #f3f3f3;
        }
        .yshortcuts a {border-bottom: none !important;}
        /* Constrain email width for small screens */
        @media screen and (max-width: 600px) {
            table[class="container"] {
                width: 95% !important;
            }
            table[class="columns-container"] {
                width: 100%;
            }
        }
        /* Give content more room on mobile */
        @media screen and (max-width: 480px) {
            td[class="container-padding"] {
                padding-left: 12px !important;
                padding-right: 12px !important;
            }
         }
        /* Styles for forcing columns to rows */
        @media only screen and (max-width : 600px) {
            /* force container columns to (horizontal) blocks */
            td[class="force-col"] {
                display: block;
                padding-right: 0 !important;
            }
            table[class="col-2"] {
                /* unset table align="left/right" */
                float: none !important;
                width: 100% !important;
                /* change left/right padding and margins to top/bottom ones */
                margin-bottom: 12px;
                border-bottom: 1px solid #eeeeee;
            }
            /* remove bottom border for last column/row */
            table[id="last-col-2"] {
                border-bottom: none !important;
                margin-bottom: 0;
            }
            /* adjust text sizing for email type */
            td[class="email-type"] {
                line-height: 30px;
            }
            table[class="col-2-actions"] {
                /* unset table align="left/right" */
                float: none !important;
                width: 100% !important;
                /* change left/right padding and margins to top/bottom ones */
                margin-bottom: 20px;
            }
            table[class="col-2-edx"] {
                /* unset table align="left/right" */
                float: none !important;
                width: 100% !important;
                /* change left/right padding and margins to top/bottom ones */
                margin-bottom: 20px;
            }
        }

        /* Credit Notification: basic css for credit notifications */
        .cn-container {
            font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
            width: 600px;
            font-size: 14px;
            line-height: 150%;
            border: 2px solid #eeeeee;
            margin: 0 auto;
        }
        .cn-container .cn-body {
            padding: 20px;
        }
        .cn-img-wrapper {
            padding: 9px 0;
        }
        .cn-img-wrapper .cn-img {
            float: left;
            width: 80px;
        }
        .cn-content-clear {
            padding: 0px 18px 18px;
            border-top: 3px solid #1d9fd9;
        }
        .cn-content-clear .cn-footer {
            border-top-width: 6px;
        }
        .cn-content p {
            padding: 5px 0;
        }
        .cn-footer-content p {
            padding: 5px 0;
        }
    </style>

</head>
<body style="font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:14px;line-height:150%;margin:auto">

<br>
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="padding: 5px;">
    <tr>
        <td align="center" valign="top">
            <!-- 600px container (white background) -->
            <table class="cn-container">
                {% block body %}
                {% endblock body %}
                {% block footer %}
                <!-- Copyright and Address -->
                <tr>
                    <td class="container-padding" bgcolor="#ffffff" style="padding-left: 30px; padding-right: 30px; font-size: 14px; line-height: 20px; font-family: Open Sans, sans-serif; color: #333; background-color: #ffffff; border-bottom: 1px solid #cccccc; border-radius: 5px;">

                        <table border="0" cellpadding="0" cellspacing="0" class="columns-container">
                          <tr>
                            <td class="force-col" style="padding-right: 20px;" valign="middle">

                                <!-- ### COLUMN 1 - COPYRIGHT AND ADDRESS ### -->
                                <table border="0" cellspacing="0" cellpadding="0" width="250" align="left" class="col-2-edx">
                                <tr>
                                    <td align="left" valign="top" style="font-size: 10px; color: #767676; font-style: italic;">
                                        <br>
                                        {% now 'Y' as year %}
                                        {% blocktrans %}Copyright © {{ year }} {{ platform_name }}. All rights reserved.{% endblocktrans %}
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top" style="font-size: 10px; color: #767676;">
                                        141 Portland St, Cambridge, MA 02142
                                        <br><br>
                                    </td>
                                </tr>
                                </table>

                            </td>
                          </tr>
                        </table><!--/ end .columns-container-->
                    </td>
                </tr>
                {% endblock footer %}
            </table>
        </td>
    </tr>
</table>
<img src="{{tracking_pixel}}"/>
</body>
</html>

