{% load i18n %}
{% if messages %}
<style>
ul.user-messages {
	position: absolute;
	top: 25px;
	left: 300px;
	right: 300px;
    /*margin: auto 0;*/
    z-index: 999;
    background: transparent;
    border: none;
    list-style: none;
}

ul.user-messages li {
    padding: 5px;
	border: solid 2px #000;
    border-radius: 4px;
	background: #eee;
	opacity: 0.95;
	font-weight: bold;
}

ul.user-messages li, ul.user-messages li a {
    color: #000;
}

ul.user-messages li.error {
	color: #f44;
}

ul.user-messages li.success {
	color: #6c3;
}

ul.user-messages li.warning {
	color: #da2;
}

ul.user-messages li a.close-message {
    float: right;
    color: #000;
    text-decoration: none;
}

ul.user-messages li a.close-message:hover {
    color: #000;
    text-decoration: underline;
}

</style>
<ul class="user-messages">
    {% for m in messages %}
      <li class="{{m.tags}}">
        <span class="{{m.tags}}">{{m}}</a>
        <a href="" class="close-message">{% trans "close" %}</a>
      </li>
    {% endfor %}
</ul>
<script>
    $(function() {
        $('a.close-message').live('click', function() {
            $(this).parent().hide('slow');
            return false;
        })
        setTimeout(function() {$('.user-messages').hide('slow')}, 5000);
    });
</script>
{% endif %}