<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>AJAX Forms: {% block head_title %}{% endblock %}</title>
        <link rel="shortcut icon" type="image/ico" href="{{ STATIC_URL }}favicon.ico" />
        <style>
            input, select {
                border: 1px solid #666;
            }
            .valid input,
            .valid select {
                background: #EFE;
            }
            .invalid input,
            .invalid select {
                background: #FEE;
                border-color: #F66;
            }
            .processing input,
            .processing select {
                background: #EEE;
            }
            th {
                text-align: left;
                vertical-align: top;
            }
            form .required {
                padding-left: 0.5em;
                color: red;
            }
            {% block extra_style %}{% endblock %}
        </style>
    </head>
    <body>
        <h1>AJAX Forms Example</h1>

        {% block body %}{% endblock %}

        <!-- Put scripts last as per Yahoo Best Practices @see http://developer.yahoo.com/performance/rules.html#js_bottom -->
        <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script-->
        <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.1.3.min.js"></script>
        {% block javascript %}
        <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.ajax_forms.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.ajax_forms.validation.js"></script>
        {% endblock %}
        {% block extra_body %}{% endblock %}
    </body>
</html>
