{% load i18n %}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ STATIC_URL }}authentic2/css/style.css">
    <link rel="shortcut icon" href="{{ STATIC_URL }}authentic2/img/favicon.ico" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="{{ STATIC_URL }}authentic2/css/font-awesome.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{{ STATIC_URL }}authentic2/css/bootstrap.min.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}authentic2/css/bootstrap-theme.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}authentic2/css/slick.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}authentic2/css/app.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}authentic2/css/hack.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}authentic2/css/entrouvert.css" >
        <link rel="stylesheet" href="{{ STATIC_URL }}authentic2/css/surclass.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    <title>{% block title %}User test{% endblock %}</title>
    {{ openid_meta }}
    {% block extra_scripts %}
    {% endblock %}
   
</head>

<body {% block bodyargs %}{% endblock %}  style="background: url({{ STATIC_URL }}authentic2/img/Background-par-defaut.jpg) no-repeat;background-size: 100% auto; background-position: center top;">
  <div class="body">
    <div id="wrap" class="container">
   
     {% include "header.html" %}
                           
    <div class="row">     
    <div id="main-content-wrapper">
         <div id="single-title">Portail citoyen</div>
       
        <!-- colonne gauche -->
        {% include "left-col.html" %}
        <!-- fin colonne gauche -->
       

         <div id="main-content">
            <div id="content" class="large">
                <div id="real-content">
                    {% block messages %}
                      {% if messages %}
                      <ul class="messages">
                          {% for message in messages %}
                          <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                          {% endfor %}
                      </ul>
                      {% endif %}
                    {% endblock %}
                    
                    {% block content %}{% endblock %}
                    
                </div><!-- real content -->
             </div> <!-- content -->
        </div> <!-- main content -->
        <!-- right colonne -->
         {% include "right-col.html" %}
    </div> <!-- #main-content-wrapper -->
 </div></div>
 <div id="footer" class="footer hidden-print">
    {% include "footer.html" %}   
 </div></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="{{ STATIC_URL }}authentic2/js/jquery.stellar.min.js" ></script>
    <script src="{{ STATIC_URL }}authentic2/js/bootstrap.min.js" ></script>
    <script>
     function layouting() {
        if ( window.matchMedia('(min-width: 992px)').matches) {
            $("#nav").detach().insertBefore('#main-content');
            $("#events").detach().appendTo('#col-right > .row');
            $("#promo").detach().insertAfter('#events');
            $("#procedures").detach().appendTo('#header');
            $("#right_bar").detach().insertAfter('#promo');
        } else if ( window.matchMedia('(max-width: 991px)').matches ) {
            $("#nav").detach().insertAfter('#main-content');
            $("#events").detach().insertAfter('#main-content');
            $("#procedures").detach().insertAfter('#navigation');
            $("#right_bar").detach().insertAfter('#access');
            if ( window.matchMedia('(min-width: 481px)').matches ) {
                $("#promo").detach().insertAfter('#right_bar');
            }
        }
    }
    $(function() {
        layouting();
        $(window).resize(function(event) {
            layouting();
        });
        if ( window.matchMedia('(min-width: 768px)').matches ) {
            $('body').stellar({
                horizontalOffset: 0
            });
        }
        $('[data-toggle="collapse"]').on('click', function () {
            if ( $(this).hasClass('active') ) {
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
        });
        $('ul.nav li.dropdown').hover(function() {
            $(this).addClass('open').find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        }, function() {
            $(this).removeClass('open').find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        });
        $('.yamm-content').find('.change-img').find('img').not(':first-child').css('top', '-5000px');
        $('#navigation').find('[data-img]').hover( function () {
            var img = $(this).data('img');
            $(this).parents('.yamm-content').find('.img' + img).css('top', '0').siblings('img').css('top', '-5000px');
        });
    });

    </script>
</body>

</html>
