{% load layout i18n fb_versions cyclope_utils %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
# Cyclope 3 GPL
# Neutronix Workflow Design
# Layouts: 4 & 5 Elements
# Copyright 2010-2013 Código Sur Sociedad Civil.
# All rights reserved.
# This file is part of Cyclope 3.
# Cyclope is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
# Development: Codigo Sur www.codigosur.org
# Less CSS based www.lesscss.org
# 960 Grid System Based www.960.gs
# Neutronix is developed by Santiago Hoerth Moura
 -->

{% join CYCLOPE_BASE_URL CYCLOPE_THEME_MEDIA_URL as base_theme_media_url %}

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  <head>
    <title>{{ newsletter.name }}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      body {color:#000;margin:0;padding:0;}
      .newsletter_teaser  {width:95%;margin:0 auto;display:block;}
      .newsletter_teaser a {text-decoration:none;}
      .newsletter_teaser .title {font-family:Arial,Helvetica,sans-serif;font-size:22px;padding:0 0 0;margin:0;color:#000;}
      .newsletter_teaser .author {font-family:Arial,Helvetica,sans-serif;font-size:16px;padding:0 0 0;margin:0;}
      .newsletter_teaser .summary {font-family:Arial,Helvetica,sans-serif;padding:0 0 0;margin:5px 0;color:#666;text-align:left;font-size:14px;}
      .newsletter_teaser .content {font-weight:700;font-size:16px;}
      .newsletter_teaser p {font-family:Arial,Helvetica,sans-serif;padding:0;margin:0;}
      .newsletter_teaser p img {display:block;margin:10px auto;width:450px;}
      .newsletter_teaser .newsletter_image {padding:5px 0 10px 15px;float:right;display:block;}
      .newsletter_teaser hr {border:none;border-top:2px solid #ccc;margin:15px 0;}
      .newsletter_teaser .pretitle {color:#000;font-family:Arial,Helvetica,sans-serif;font-size:12px;padding:5px 0;background:transparent;text-transform:uppercase;}
      .newsletter_teaser .pretitle a {color:#000;text-decoration:none;}
      .newsletter_teaser.text {color:#666;font-family:Arial,Helvetica,sans-serif;font-size:16px;}
      #newsletter_menu td {background-color: #fff;border:none;pading:0;margin:0;}
      .mask {color:#000;padding:0 50px;background-color:#ccc;}
      .newsletter_menuitems {display:block;padding:0;color:#000;margin:5px 0;font-family: Arial,Helvetica,sans-serif;text-align:right;width:720px;}
      .newsletter_menuitems a {padding:5px;color:#333;font-size:12px;text-decoration:none;}
      .category_name {padding:0 0 0 10px;color:#666;font-size:13px;display:block;margin:5px 0 0;top:0;float:left;font-family: Arial,Helvetica,sans-serif;font-weight:700;}
      .header {background-color: #fff;}
      .header td {background: #ccc url({% if newsletter.head_image %}http://{{ CYCLOPE_SITE_SETTINGS.site.domain }}{{ MEDIA_URL }}{{ newsletter.head_image }}{% else %}{{ base_theme_media_url }}images/boletin/cabezal.png{% endif %}) no-repeat 0 0;}
      .header .title {color:#fff;text-align:center;font-family: Arial,Helvetica,sans-serif;font-size:30px;padding:5px 10px 0;margin:0;}
      .header .summary {text-align:center;font-family: Arial,Helvetica,sans-serif;color:#fff;display:block;}
      #container {background-color: #fff;}
      .middling {padding:15px 0 0;}
      .table_of_contents {font-family: Arial,Helvetica,sans-serif;border:1px solid #333;margin:20px auto;padding:10px;background-color: #fff;width:95%;}
      .table_of_contents .toc_title {font-family: Arial,Helvetica,sans-serif;font-weight:700;}
      .table_of_contents .title {font-size:14px;}
      .show-ToC {margin:0;padding:0;overflow:auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;}
      .show-ToC a {margin:0 0;padding:0;display:block;text-align:left;font-family:Arial,Helvetica,sans-serif;}
      .download_link {font-family: Arial,Helvetica,sans-serif;background:#000;width:100px;font-size:11px;text-align:center;margin:5px 0;}
      .download_link a {display:block;padding:5px;color:#fff;}
      .top_content {background:#eee;margin:0;padding:5px;}
      .top_content .title {font-size:28px;}
      .top_content .summary {font-size:16px;padding:5px 0 0;}
      .top_content .newsletter_image {width:250px;}
      .central_content .teaser {border-bottom:1px dotted #ccc;margin:0 0 20px;padding:0 0 10px;display:block;overflow:auto;width:auto;}
      .central_content .detail {border-bottom:1px dotted #ccc;margin:0 0;}
      .lateral_content {width: 220px;border-left:1px dotted #ccc;}
      .lateral_content .teaser {border-bottom:1px dotted #ccc;padding:5px 0 5px 5px;margin:0 0 5px;}
      .lateral_content .title {font-size:16px;}
      .lateral_content .summary {font-size:12px;}
      .lateral_content .author {font-size:12px;}
      .lateral_content .newsletter_image {width:65px;float:left;margin:8px 5px 0 0;padding:0:}
      .footer {text-align:center;padding:10px 0;color:#fff;font-size:13px;display:block;margin:0;font-family: Arial,Helvetica,sans-serif; background-color: #666;}
      .footer a {color:#fff;text-decoration:none;}
    </style>
  </head>
  <body leftmargin="0" topmargin="0">
    {% region 'header' %}
    <a name="up"></a>

    <table class="mask" align="center">
      <tr>
        <td>

          <!-- start newsletter_menu -->
          <table id="newsletter_menu" align="center" border="0" cellpadding="0" cellspacing="0" width="720">
            <tr>
              <td valign="middle">
                <span class="category_name">{{ newsletter.content_category.name }}</span>
                <span class="newsletter_menuitems"><a href="{% url index %}">{% trans "Visit our website" %}</a> <a href="{% url collection newsletter.content_category.collection.slug %}">{% trans "View archives" %}</a> <a href="http://listas.codigosur.org/mailman/listinfo">{% trans "Subscription options" %}</a>
                </span>
              </td>
            </tr>
          </table>
          <!-- end newsletter_menu -->

          <!-- header -->
          <table class="header" align="center" border="0" cellpadding="0" cellspacing="0" width="720">
            <tr>
              <td height="124" valign="middle">
                <h1 class="title">{{ newsletter.name }}</h1>
                <span class="summary">{{ newsletter.header|smart_style }}</span>
              </td>
            </tr>
          </table>
          <!-- /header -->

          {% region 'before_content' %}

          <!-- start content-table -->
          <table id="container" align="center"  border="0" cellpadding="0" cellspacing="0" width="720" class="middling">
            <tr>
              <td valign="top">

                {% if newsletter.show_ToC %}

                <!-- category_description -->
                <table width="530" border="0" align="left" cellpadding="0" cellspacing="0" class="category_description">
                  <tr>
                    <td valign="top">
                      <div class="mask">
                      {% if newsletter.content_category.image %} <img src="{% version  newsletter.content_category.image.path 'medium' %}" hspace="0" vspace="0" align="top" width="170px" style="float:left;margin:0 10px 0 0;"/> {% endif %}
                        <span class="summary">
                          {{ newsletter.content_category.description|smart_style }}
                        </span>
                      </div>

                    </td>
                  </tr>
                </table>
                <!-- /category_description -->

                <!-- table_of_contents -->
                <table class="table_of_contents" align="center" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td valign="top">
                      <!-- ToC-->

                      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                          <td class="content">
                            <div class="toc_title"><a name="ToC">{% trans "Table of Contents" %}</a></div>
                            {% for categorization in categorizations %}
                            {% alias categorization.content_object as 'article' %}
                            <a href='#{{ categorization.content_type.model }}__{{ article.slug }}' class="title">{{ article.name }}</a>
                            {% endfor %}
                          </td>
                        </tr>
                      </table>
                      <!-- /ToC-->
                    </td>
                  </tr>
                </table>
                <!-- /table_of_contents -->
             {% else %}

<!-- category_description -->
                <table width="720" border="0" align="left" cellpadding="0" cellspacing="0" class="category_description">
                  <tr>
                    <td valign="top">
                      <div class="mask">
                      {% if newsletter.content_category.image %} <img src="{% version  newsletter.content_category.image.path 'medium' %}" hspace="0" vspace="0" align="top" width="170px" style="float:left;margin:0 10px 0 0;"/> {% endif %}
                        <span class="summary">
                          {{ newsletter.content_category.description|smart_style }}
                        </span>
                      </div>

                    </td>
                  </tr>
                </table>
                <!-- /category_description -->
             {% endif %}

                <div class="clear"></div>

                <!-- block_content -->
                      {% block content%}{% endblock %}
                <!-- /block_content -->


                <!-- end content-table -->
              </td>
            </tr>
             <tr>
            <td valign="top" colspan="2" height="15px">
            </td>
        </tr>
          </table>

          {% region 'after_content' %}

          <!-- start footer -->
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="720">
            <tr>
              <td height="80" valign="top">
                <span class="footer">
                  Una Publicación de .<br/>
                  Boletín realizado con <a href="http://cyclope.codigosur.org" >Cyclope3 GPL</a>. Hecho por <a href="http://codigosur.org" >Código Sur</a>. <br/>
                  Los contenidos de este sitio web están bajo una <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.es_CO" >Licencia Creative Commons</a>.<br/>
                  Para desuscribirse <a href="http://listas.dominio.org/mailman/listinfo/" >ingresar aquí</a>.
                </span>
              </td>
            </tr>
          </table>
          <!-- end footer -->
        </td>
      </tr>
    </table>

  </body>
</html>
