{% if isHeaders is defined and isHeaders == true %}
<div id="content">         
    <div id="headerwithbanner">
        <link rel="stylesheet" href="{{ asset('css/jcarousel.ajax.css') }}" type="text/css" />
        <div class="wrapper">
            <div class="jcarousel-wrapper">
                <div class="jcarousel"{% if idHeader is defined and idHeader != '' %} id="{{ idHeader }}"{% endif %}>
                    <div class="loading">Chargement...</div>
                </div>
                <div class="jcarousel-control-prev" style="position:absolute;margin-top:-487px;margin-left:15px;">
                    <a href="#"><</a></div>
                    <div class="jcarousel-control-next" style="position:absolute;margin-top:-487px;margin-left:860px;"><a href="#">></a></div>
            </div>
        </div>
    </div>
    <script src="{{ asset('js/jquery.jcarousel.min.js') }}" ></script>
    <script src="{{ asset('js/jcarousel.ajax.js') }}" ></script>
    <style>
        #primary {
            margin-top:80px;
        }
    </style>
{% elseif banner is defined and  banner != '' %}
    <header id="header">
        <div id="titlezone">
            <hgroup id="logo" class="color{{ header.color|default(1) }} movable" style="left: {{ header.left }}px; top: {{ header.top }}px;z-index:10;">
                <h1><a href="{{ default_url }}{{ path('index') }}">Stiletto</a></h1>
                <h2>Coups de foudre, coups de cœur, coups de talon</h2>
            </hgroup>
        </div>
    </header>
    <div id="accroche" class="color{{ header.color|default(1) }} movable" style="left: {{ header.accrocheLeft }}px; top: {{ header.accrocheTop }}px;">
        <div id="accrocheTitle" style="position: relative;">{{ header.accrocheTitle }}</div>
        <div id="accrocheDesc" style="position: relative;">{{ header.accrocheDescription }}</div>
    </div>
    <div id="content"> {# div fermé dans le modèle #}
        <div id="headerwithbanner">
            <div class="fb-like" data-href="https://www.facebook.com/stilettomagazine" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" style="position:absolute;top:10px;right:10px;padding:5px;"></div>
            <div style="position:absolute;top:10px;right:70px;padding:5px;z-index:50;">
                <a href="https://twitter.com/share" class="twitter-share-button" data-related="stilettofr" data-lang="fr" data-count="vertical" data-url="{{ url('index') }}">Tweet</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            </div>
            <img src="{{ asset(banner) }}" alt="bannière" id="banner" style="max-width: 900px; max-height: 760px"/>
            {% if header.copyright is not empty %}
            <div id="accrocheCopyright" style="position:absolute;bottom:3px;right:3px;padding:5px;color:#{{ header.backgroundColor|reverseColor }}">
                {{ header.copyright }}
            </div>
            {% endif %}
        </div>
{% else %}
    <div id="content">       {# div fermé dans le modèle #}
{% endif %}