{% block content %}
    <div class="wrapper">
        <div class="content">
            <form action="." method="POST">
                <table align="center">
                    <tr>
                        <td colspan="3">
                            <input type="text" name="username" placeholder="Логин" class="fill" autocomplete="off" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="password" name="password" placeholder="Пароль" class="fill"  />
                        </td>
                        <td align="right">
                            <a href="#" class="fill">Забыли пароль?</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <input type="checkbox">Запомнить меня</input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="submit" value="Войти" class="fill">
                        </td>
                        <td align="center">
                            или
                        </td>
                        <td>
                            <a href="signup" class="fill-space">Зарегистрироваться</a>
                        </td>
                    </tr>
                    {% if error %}
                    <tr>
                        <td colspan="3" align="center">
                            <table cols="2">
                                <tr>
                                    <td align="center">
                                        {% load staticfiles %}
                                        <img src="{% static 'error.png' %}" />
                                    </td>
                                    <td>
                                        <a class="error">Неверный логин или пароль</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    {% endif %}
                </table>
            </form>
        </div>
    </div>
{% endblock %}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
body {
    margin:0;
    padding:0;
    background: #ECECEC;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
}
div.wrapper {
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display:table;
}
div.content {
    display:table-cell;
    vertical-align: middle;
}
input.fill {
    width: 100%;
}
input[name=username], input[name=password] {
    border: 1px solid #606060;
    border-radius: 24px;
    height: 24px;
    color: #353535;
    vertical-align: middle;
    padding-left: 28px;
    padding-right: 5px;
}
input[name=username] {
    background: url('user.png') 8px 5px no-repeat, #FFFFFF;
}
input[name=password] {
    background: url('lock.png') 8px 5px no-repeat, #FFFFFF;
}
input[name=username]:focus {
    outline: none;
    background: url('user.png') 8px 5px no-repeat, #FFFFFF;
}
input[name=password]:focus {
    outline: none;
    background: url('lock.png') 8px 5px no-repeat, #FFFFFF;
}
a.error {
    width: 100%;
    color: #505050;
}

input.fill {
    width: 100%;
}