--- a/messages/views.py	Wed Sep 28 20:25:29 2016 -0500
+++ b/messages/views.py	Tue Oct 04 20:26:34 2016 -0500
@@ -74,6 +74,7 @@
         'page': page,
         'inbox_pct': pct_used,
         'outbox_pct': None,
+        'V3_DESIGN': True,
         })
 
 
@@ -91,6 +92,7 @@
         'page': page,
         'inbox_pct': None,
         'outbox_pct': pct_used,
+        'V3_DESIGN': True,
         })
 
 
@@ -106,6 +108,7 @@
         'page': page,
         'inbox_pct': None,
         'outbox_pct': None,
+        'V3_DESIGN': True,
         })
 
 
@@ -129,6 +132,7 @@
     return render(request, 'messages/options.html', {
         'tab': 'options',
         'form': form,
+        'V3_DESIGN': True,
         })
 
 
@@ -157,6 +161,7 @@
     return render(request, 'messages/compose.html', {
         'tab': 'compose',
         'compose_form': compose_form,
+        'V3_DESIGN': True,
         })
 
 
@@ -178,7 +183,9 @@
     else:
         if msg.sender != request.user and msg.receiver != request.user:
             django_messages.error(request,
-                    "You don't have permission to read that message.")
+                                  "You don't have permission to read that message.",
+                                  extra_tags="alert")
+
             return redirect('messages-inbox')
 
         initial_data = {
@@ -206,6 +213,7 @@
         'msg': msg,
         'form': form,
         'msg_flag': msg_flag,
+        'V3_DESIGN': True,
         })
 
 
@@ -278,7 +286,7 @@
     if count > 0:
         django_messages.success(request, msg)
     else:
-        django_messages.error(request, msg)
+        django_messages.error(request, msg, extra_tags="alert")
 
 
 def _undelete_pms(user, msg_ids):
@@ -334,14 +342,16 @@
     """
     msg = get_object_or_404(Message.objects.select_related(), pk=msg_id)
     if msg.receiver != request.user:
-        django_messages.error(request, "You can't report this message.")
+        django_messages.error(request, "You can't report this message.",
+                              extra_tags="alert")
         return redirect('messages-inbox')
     try:
         msg.flag
     except Flag.DoesNotExist:
         pass
     else:
-        django_messages.error(request, "This message has already been reported.")
+        django_messages.error(request, "This message has already been reported.",
+                              extra_tags="alert")
         return redirect('messages-inbox')
 
     if request.method == 'POST':
@@ -360,6 +370,7 @@
     return render(request, 'messages/report_message.html', {
         'msg': msg,
         'form': form,
+        'V3_DESIGN': True,
         })
 
 
@@ -405,4 +416,4 @@
     if count > 0:
         django_messages.success(request, msg)
     else:
-        django_messages.error(request, msg)
+        django_messages.error(request, msg, extra_tags="alert")

--- a/sg101/templates/messages/compose.html	Wed Sep 28 20:25:29 2016 -0500
+++ b/sg101/templates/messages/compose.html	Tue Oct 04 20:26:34 2016 -0500
@@ -1,23 +1,46 @@
 {% extends 'messages/messages_base.html' %}
 {% load core_tags %}
 {% load script_tags %}
-{% block custom_js %}
-{% script_tags 'jquery-ui' %}
-{% script_tags 'markitup' %}
-{% endblock %}
+{% load static from staticfiles %}
 {% block messages_content %}
 <h3>Compose Private Message</h3>
 <p>Use this form to send a new private message to another user.</p>
 <form action="." method="post" id="msg_compose_form">{% csrf_token %}
-<table>
-{{ compose_form.as_table }}
-<tr>
-   <td>&nbsp;</td>
-   <td>
-      {% comment_dialogs %}
-      <input type="submit" name="submit_button" value="Send" />
-   </td>
-</tr>
-</table>
+   {{ compose_form.non_field_errors }}
+   {{ compose_form.receiver.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ compose_form.receiver.id_for_label }}">
+            {{ compose_form.receiver.label }}
+            {{ compose_form.receiver }}
+         </label>
+      </div>
+   </div>
+   {{ compose_form.subject.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ compose_form.subject.id_for_label }}">
+            {{ compose_form.subject.label }}
+            {{ compose_form.subject }}
+         </label>
+      </div>
+   </div>
+   {% post_box compose_form.message %}
+   {{ compose_form.attach_signature.errors }}
+   <div class="row">
+      <div class="columns">
+         {{ compose_form.attach_signature }}
+         <label for="{{ compose_form.attach_signature.id_for_label }}">
+            {{ compose_form.attach_signature.label }}
+         </label>
+      </div>
+   </div>
+   {{ compose_form.parent_id }}
+   <input type="submit" name="submit_button" value="Send"
+      class="button" />
 </form>
+{% include 'core/v3/post_box_modals.html' %}
 {% endblock %}
+{% block custom_js %}
+<script src="{% static "js/v3/post_box.js" %}"></script>
+{% endblock %}

--- a/sg101/templates/messages/inbox.html	Wed Sep 28 20:25:29 2016 -0500
+++ b/sg101/templates/messages/inbox.html	Tue Oct 04 20:26:34 2016 -0500
@@ -1,24 +1,23 @@
 {% extends 'messages/messages_base.html' %}
 {% load static from staticfiles %}
-{% block custom_js %}
-<script src="{% static "js/messages.js" %}"></script>
-{% endblock %}
 {% block messages_content %}
-<h3>Inbox <small>(Page {{ page.number }} of {{ page.paginator.num_pages }})</small></h3>
+<h3>Inbox <small>{{ inbox_pct }}% used</small></h3>
 <p>
 This is your inbox. It contains messages sent to you by others. Messages in <strong>bold</strong> are unread.
 Messages in <em>italics</em> indicate you have replied to the message.
 </p>
 {% if page.object_list %}
-   {% include "messages/pagination.html" %}
+   {% include "core/v3/pagination.html" %}
    <form action="{% url 'messages-bulk' %}" method="post">{% csrf_token %}
-   <table class="messages">
+   <table class="sg101-stack">
+   <thead>
    <tr>
       <th>From</th>
       <th>Subject</th>
       <th>Date</th>
       <th><input type="checkbox" onclick="tabMasterCheckClick(this, 'pm_ids');" /></th>
    </tr>
+   </thead>
    {% for msg in page.object_list %}
    <tr>
       <td><a href="{% url 'bio-view_profile' msg.sender.username %}">
@@ -31,19 +30,24 @@
       <td><input type="checkbox" name="pm_ids" value="{{ msg.id }}" /></td>
    </tr>
    {% endfor %}
-   <tr>
-      <td colspan="4">
-         <input type="submit" name="action" value="Email Checked Messages" onclick="return bulkMsgAction('email');" />
-         <input type="submit" name="action" value="Delete Checked Messages" onclick="return bulkMsgAction('delete');" />
-      </td>
-   </tr>
    </table>
    <input type="hidden" name="src" value="inbox" />
    <input type="hidden" name="page" value="{{ page.number }}" />
+   <div class="row">
+      <div class="columns">
+         <input type="submit" name="action" value="Email Checked Messages"
+            class="secondary button" onclick="return bulkMsgAction('email');" />
+         <input type="submit" name="action" value="Delete Checked Messages"
+            class="alert button" onclick="return bulkMsgAction('delete');" />
+      </div>
+   </div>
    </form>
-   {% include "messages/pagination.html" %}
+   {% include "core/v3/pagination.html" %}
 {% else %}
    <p><em>Your Inbox is empty.</em></p>
 {% endif %}
 {% include 'messages/usage_graph.html' with pct_used=inbox_pct box_name='inbox' %}
 {% endblock %}
+{% block custom_js %}
+<script src="{% static "js/messages.js" %}"></script>
+{% endblock %}

--- a/sg101/templates/messages/messages_base.html	Wed Sep 28 20:25:29 2016 -0500
+++ b/sg101/templates/messages/messages_base.html	Tue Oct 04 20:26:34 2016 -0500
@@ -1,31 +1,33 @@
-{% extends 'base.html' %}
+{% extends 'v3/base.html' %}
 {% load static from staticfiles %}
 {% load script_tags %}
-{% block custom_css %}
-<link rel="stylesheet" type="text/css" href="{% static "css/messages.css" %}" />
-{% endblock %}
 {% block content %}
 <h2>Your Private Messages</h2>
 
-{% if messages %}
-<ul class="user-messages">
 {% for message in messages %}
-   <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
+   <div class="{{ message.tags }} callout">
+      {{ message }}
+   </div>
 {% endfor %}
+
+<ul class="vertical medium-horizontal menu">
+   <li{% if tab == 'inbox' %} class="active"{% endif %}>
+      <a href="{% url 'messages-inbox' %}">Inbox</a>
+   </li>
+   <li{% if tab == 'compose' %} class="active"{% endif %}>
+      <a href="{% url 'messages-compose' %}">Compose</a>
+   </li>
+   <li{% if tab == 'outbox' %} class="active"{% endif %}>
+      <a href="{% url 'messages-outbox' %}">Outbox</a>
+   </li>
+   <li{% if tab == 'trash' %} class="active"{% endif %}>
+      <a href="{% url 'messages-trash' %}">Trash</a>
+   </li>
+   <li{% if tab == 'options' %} class="active"{% endif %}>
+      <a href="{% url 'messages-options' %}">Options</a>
+   </li>
 </ul>
-{% endif %}
 
-<div>
-<ul id="messages_menu">
-   <li>{% if tab != 'inbox' %}<a href="{% url 'messages-inbox' %}">{% endif %}Inbox{% if tab != 'inbox' %}</a>{% endif %}
-      {% if inbox_pct %}({{ inbox_pct }}% used){% endif %}</li>
-   <li>{% if tab != 'compose' %}<a href="{% url 'messages-compose' %}">{% endif %}Compose new message{% if tab != 'compose' %}</a>{% endif %}</li>
-   <li>{% if tab != 'outbox' %}<a href="{% url 'messages-outbox' %}">{% endif %}Outbox{% if tab != 'outbox' %}</a>{% endif %}
-      {% if outbox_pct %}({{ outbox_pct }}% used){% endif %}</li>
-   <li>{% if tab != 'trash' %}<a href="{% url 'messages-trash' %}">{% endif %}Trash{% if tab != 'trash' %}</a>{% endif %}</li>
-   <li>{% if tab != 'options' %}<a href="{% url 'messages-options' %}">{% endif %}Options{% if tab != 'options' %}</a>{% endif %}</li>
-</ul>
-</div>
 <hr />
 
 {% block messages_content %}{% endblock %}

--- a/sg101/templates/messages/options.html	Wed Sep 28 20:25:29 2016 -0500
+++ b/sg101/templates/messages/options.html	Tue Oct 04 20:26:34 2016 -0500
@@ -1,16 +1,28 @@
 {% extends 'messages/messages_base.html' %}
 {% block messages_content %}
-<h3>Private Message Options</h3>
+<h3>Options</h3>
 <p>Set your private message preferences here.</p>
 <form action="." method="post">{% csrf_token %}
-<table>
-{{ form.as_table }}
-<tr>
-   <td>&nbsp;</td>
-   <td>
-      <input type="submit" name="submit_button" value="Save" />
-   </td>
-</tr>
-</table>
+   {{ form.non_field_errors }}
+   <div class="row">
+      <div class="columns">
+         {{ form.attach_signature.errors }}
+         {{ form.attach_signature }}
+         <label for="{{ form.attach_signature.id_for_label }}">
+            {{ form.attach_signature.label }}
+         </label>
+      </div>
+   </div>
+   <div class="row">
+      <div class="columns">
+         {{ form.notify_email.errors }}
+         {{ form.notify_email }}
+         <label for="{{ form.notify_email.id_for_label }}">
+            {{ form.notify_email.label }}
+         </label>
+      </div>
+   </div>
+   <input type="submit" name="submit_button" value="Save"
+      class="button" />
 </form>
 {% endblock %}

--- a/sg101/templates/messages/outbox.html	Wed Sep 28 20:25:29 2016 -0500
+++ b/sg101/templates/messages/outbox.html	Tue Oct 04 20:26:34 2016 -0500
@@ -1,18 +1,16 @@
 {% extends 'messages/messages_base.html' %}
 {% load static from staticfiles %}
-{% block custom_js %}
-<script src="{% static "js/messages.js" %}"></script>
-{% endblock %}
 {% block messages_content %}
-<h3>Outbox <small>(Page {{ page.number }} of {{ page.paginator.num_pages }})</small></h3>
+<h3>Outbox <small>{{ outbox_pct }}% used</small></h3>
 <p>
 This is your outbox. It contains messages you have sent to other members. Messages in <strong>bold</strong> are unread
 by the recipient. Messages in <em>italics</em> have been replied to by the receiver.
 </p>
 {% if page.object_list %}
-   {% include "messages/pagination.html" %}
+   {% include "core/v3/pagination.html" %}
    <form action="{% url 'messages-bulk' %}" method="post">{% csrf_token %}
-   <table class="messages"> 
+   <table class="sg101-stack"> 
+   <thead>
    <tr>
       <th>To</th>
       <th>Subject</th>
@@ -20,6 +18,7 @@
       <th>Received</th>
       <th><input type="checkbox" onclick="tabMasterCheckClick(this, 'pm_ids');" /></th>
    </tr>
+   </thead>
    {% for msg in page.object_list %}
    <tr>
       <td><a href="{% url 'bio-view_profile' msg.receiver.username %}">
@@ -33,19 +32,24 @@
       <td><input type="checkbox" name="pm_ids" value="{{ msg.id }}" /></td>
    </tr>
    {% endfor %}
-   <tr>
-      <td colspan="5">
-         <input type="submit" name="action" value="Email Checked Messages" onclick="return bulkMsgAction('email');" />
-         <input type="submit" name="action" value="Delete Checked Messages" onclick="return bulkMsgAction('delete');" />
-      </td>
-   </tr>
-   </table>
    <input type="hidden" name="src" value="outbox" />
    <input type="hidden" name="page" value="{{ page.number }}" />
+   </table>
+   <div class="row">
+      <div class="columns">
+         <input type="submit" name="action" value="Email Checked Messages"
+            class="secondary button" onclick="return bulkMsgAction('email');" />
+         <input type="submit" name="action" value="Delete Checked Messages"
+            class="alert button" onclick="return bulkMsgAction('delete');" />
+      </div>
+   </div>
    </form>
-   {% include "messages/pagination.html" %}
+   {% include "core/v3/pagination.html" %}
 {% else %}
    <p><em>Your Outbox is empty.</em></p>
 {% endif %}
 {% include 'messages/usage_graph.html' with pct_used=outbox_pct box_name='outbox' %}
 {% endblock %}
+{% block custom_js %}
+<script src="{% static "js/messages.js" %}"></script>
+{% endblock %}

--- a/sg101/templates/messages/report_message.html	Wed Sep 28 20:25:29 2016 -0500
+++ b/sg101/templates/messages/report_message.html	Tue Oct 04 20:26:34 2016 -0500
@@ -13,11 +13,25 @@
 {% include "messages/message.html" %}
 
 <form action="." method="post" id="report_form">{% csrf_token %}
-<fieldset>
+<fieldset class="fieldset">
 <legend>Report Message</legend>
-{{ form.as_p }}
-<input type="submit" name="submit" value="Submit Report" />
+   {{ form.non_field_errors }}
+   {{ form.comments.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.comments.id_for_label }}">
+            {{ form.comments.label }}
+            {{ form.comments }}
+         </label>
+      </div>
+   </div>
+   <div class="row">
+      <div class="columns">
+         <a href="{% url "messages-view" msg.id %}" class="secondary button">Cancel</a>
+         <input type="submit" name="submit" value="Submit Report"
+            class="alert button" />
+      </div>
+   </div>
 </fieldset>
 </form>
-<p><a href="{% url "messages-view" msg.id %}">Cancel report and return to message</a></p>
 {% endblock %}

--- a/sg101/templates/messages/trash.html	Wed Sep 28 20:25:29 2016 -0500
+++ b/sg101/templates/messages/trash.html	Tue Oct 04 20:26:34 2016 -0500
@@ -1,10 +1,7 @@
 {% extends 'messages/messages_base.html' %}
 {% load static from staticfiles %}
-{% block custom_js %}
-<script src="{% static "js/messages.js" %}"></script>
-{% endblock %}
 {% block messages_content %}
-<h3>Trash <small>(Page {{ page.number }} of {{ page.paginator.num_pages }})</small></h3>
+<h3>Trash</h3>
 <p>
 This is your trash folder. It contains messages that you have deleted. The messages will be gone
 forever when the other party deletes their copies. Until that happens you can undelete them to move
@@ -14,9 +11,10 @@
 Messages in <strong>bold</strong> are unread.  Messages in <em>italics</em> have been replied to.
 </p>
 {% if page.object_list %}
-   {% include "messages/pagination.html" %}
+   {% include "core/v3/pagination.html" %}
    <form action="{% url 'messages-undelete' %}" method="post" onsubmit="return bulkMsgAction('undelete');">{% csrf_token %}
-   <table class="messages">
+   <table class="sg101-stack">
+   <thead>
    <tr>
       <th>From</th>
       <th>To</th>
@@ -24,6 +22,7 @@
       <th>Date</th>
       <th><input type="checkbox" onclick="tabMasterCheckClick(this, 'pm_ids');" /></th>
    </tr>
+   </thead>
    {% for msg in page.object_list %}
    <tr>
       <td><a href="{% url 'bio-view_profile' msg.sender.username %}">
@@ -38,12 +37,20 @@
       <td><input type="checkbox" name="pm_ids" value="{{ msg.id }}" /></td>
    </tr>
    {% endfor %}
-   <tr><td colspan="5"><input type="submit" value="Undelete Checked Messages" /></td></tr>
    </table>
    <input type="hidden" name="page" value="{{ page.number }}" />
+   <div class="row">
+      <div class="columns">
+         <input type="submit" value="Undelete Checked Messages"
+            class="primary button" />
+      </div>
+   </div>
    </form>
-   {% include "messages/pagination.html" %}
+   {% include "core/v3/pagination.html" %}
 {% else %}
    <p><em>Your Trash is empty.</em></p>
 {% endif %}
 {% endblock %}
+{% block custom_js %}
+<script src="{% static "js/messages.js" %}"></script>
+{% endblock %}

--- a/sg101/templates/messages/usage_graph.html	Wed Sep 28 20:25:29 2016 -0500
+++ b/sg101/templates/messages/usage_graph.html	Tue Oct 04 20:26:34 2016 -0500
@@ -1,6 +1,8 @@
-<div>
-You are using {{ pct_used }}% of your {{ box_name }}.
-<div style="width: 200px; height: 20px; border: 1px solid black;">
-   <div style="width: {{ pct_used }}%; height: 100%; background-color: #87b6d9;"></div>
+<p>
+You are using {{ pct_used }}% of your {{ box_name }}:
+</p>
+<div class="row">
+   <div class="columns">
+      <progress max="100" value="{{ pct_used }}"></progress>
+   </div>
 </div>
-</div>

--- a/sg101/templates/messages/view_message.html	Wed Sep 28 20:25:29 2016 -0500
+++ b/sg101/templates/messages/view_message.html	Tue Oct 04 20:26:34 2016 -0500
@@ -2,43 +2,66 @@
 {% load static from staticfiles %}
 {% load core_tags %}
 {% load script_tags %}
-{% block custom_js %}
-   {% if form %}
-      {% script_tags 'jquery-ui' %}
-      {% script_tags 'markitup' %}
-   {% endif %}
-{% endblock %}
 {% block messages_content %}
 <h3>View Private Message</h3>
 {% include "messages/message.html" %}
 
 {% if form %}
 <form action="." method="post" id="msg_compose_form">{% csrf_token %}
-<fieldset>
+<fieldset class="fieldset">
 <legend>Compose Reply</legend>
-<table>
-{{ form.as_table }}
-<tr>
-   <td>&nbsp;</td>
-   <td>
-      {% comment_dialogs %}
-      <input type="submit" name="submit_button" value="Send Reply" />
-   </td>
-</tr>
-</table>
+   {{ form.non_field_errors }}
+   {{ form.receiver.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.receiver.id_for_label }}">
+            {{ form.receiver.label }}
+            {{ form.receiver }}
+         </label>
+      </div>
+   </div>
+   {{ form.subject.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ form.subject.id_for_label }}">
+            {{ form.subject.label }}
+            {{ form.subject }}
+         </label>
+      </div>
+   </div>
+   {% post_box form.message %}
+   {{ form.attach_signature.errors }}
+   <div class="row">
+      <div class="columns">
+         {{ form.attach_signature }}
+         <label for="{{ form.attach_signature.id_for_label }}">
+            {{ form.attach_signature.label }}
+         </label>
+      </div>
+   </div>
+   {{ form.parent_id }}
+   <input type="submit" name="submit_button" value="Send Reply"
+      class="button" />
 </fieldset>
 </form>
 {% endif %}
 
 {% if msg_flag %}
-<div class="error">
+<div class="warning callout">
    You reported this message to the admin on {{ msg_flag.flag_date|date:"F d, Y" }}.
 </div>
 {% else %}
-<div class="notice">
-   <img src="{% static "icons/flag_red.png" %}" alt="Report this message" />
+<div class="alert callout">
+   <i class="fi-flag size-24"></i>
    <a href="{% url "messages-report" msg.id %}">Report this message for spam or abuse</a>.
 </div>
 {% endif %}
 
+{% include 'core/v3/post_box_modals.html' %}
 {% endblock %}
+
+{% block custom_js %}
+{% if form %}
+   <script src="{% static "js/v3/post_box.js" %}"></script>
+{% endif %}
+{% endblock %}