
{% load i18n %}


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&amp;display=swap" rel="stylesheet">

    <style type="text/css">
        {% block styles %}
            body {
                font-family: Roboto, Arial, sans-serif;
                margin: 0;
                padding: 0;
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%;
                background: #F0F0F0;
            }

            a {
                color: #e59000;
                text-decoration: none;
            }

            a:hover {
                color: #926212;
            }

            table {
                border-spacing: 0;
                width: 100%;
            }

            table td {
                border-collapse: collapse;
            }

            table.wrapper {
                width: 100%;
                height: 100%;
                background: #F0F0F0;
            }

            table.container {
                width:600px;
                max-width:600px;
                background: #fff;
                margin-top: 40px;
            }

            .pull-right {
                float: right !important;
            }

            .header {
                padding: 20px 0 0 0;
                position: relative;
            }

            .header .logo {
                margin: 0 auto;
                display: block;
                max-width: 200px;
                max-height: 100px;
            }

            .content {
                padding: 10px;
            }

            .footer {
                padding: 20px 0 50px 0;
            }

            .title {
                font-family:Helvetica, Arial, sans-serif;
                color:#374550;
                border-bottom: 1px solid #ddd;
                margin: 5px 0;
                padding-bottom: 5px;
            }

            a:hover .title {
                color: #c98d22;
            }

            .half {
                width: 50%;
                float: left;
            }

            .clearfix {
                clear: both;
            }

            .text {
                font-size:14px;
                line-height:20px;
                text-align:left;
                color:#333333;
            }

            .m-t-10 {
                margin-top: 10px;
            }

            .spacer {
                padding-top: 10px;
            }

            .items-table td {
                border-top: 1px solid #ddd;
                padding: 5px;
            }
        {% endblock %}
    </style>
</head>

<body>

    {% block wrapper %}
        <table class="wrapper">
            <tr>
                <td align="center">
                    <table class="container">
                        <tr>
                            <td class="header">
                                {% block header %}
                                    <img src="{% if not debug %}https://{{ site.domain }}{% endif %}/static/img/site-logo.png"
                                         class="logo">
                                {% endblock %}
                            </td>
                        </tr>
                        <tr>
                            <td class="content">
                                {% block content %}{% endblock %}
                            </td>
                        </tr>
                        <tr>
                            <td class="footer">
                                {% block footer %}{% endblock %}
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    {% endblock %}

</body>
</html>
