Merge branch 'redesign'

Conflicts:
	templates/public/download.html

8 files changed, 386 insertions, 298 deletions

diff --git a/templates/packages/details.html b/templates/packages/details.html
index 78209d83..19a4b2bc 100644
--- a/templates/packages/details.html
+++ b/templates/packages/details.html
@@ -1,134 +1,166 @@
 {% extends "base.html" %}
 {% block title %}Arch Linux - {{ pkg.pkgname }} {{ pkg.pkgver }}-{{ pkg.pkgrel }} - Package Details{% endblock %}
+
 {% block content %}
-    <div class="box">
-        <h2 class="title">{{ pkg.pkgname }} {{ pkg.pkgver }}-{{ pkg.pkgrel }}</h2>
-        <div style="float:right" class="listing">
-            <ul class="small">
-                <li><a href="{{ pkg.get_arch_svn_link }}">SVN Entries ({{pkg.repo|lower}}-{{pkg.arch}})</a></li>
-                <li><a href="{{ pkg.get_trunk_svn_link }}">SVN Entries (trunk)</a></li>
-                <li><a href="{{ pkg.get_bugs_link }}">Bug Reports</a></li>
-                <li>
+<div id="pkgdetails" class="box">
+
+    <h2>Package Details: {{ pkg.pkgname }} {{ pkg.pkgver }}-{{ pkg.pkgrel }}</h2>
+
+    <div id="actionlist" class="listing">
+
+        <ul class="small">
+            <li><a href="{{ pkg.get_arch_svn_link }}" title="View PKGBUILD
+                files for {{ pkg.pkgname }} in the {{pkg.repo|lower}}-{{pkg.arch}}
+                subversion branch">SVN Entries ({{pkg.repo|lower}}-{{pkg.arch}})</a></li>
+            <li><a href="{{ pkg.get_trunk_svn_link }}" title="View PKGBUILD
+                files for {{ pkg.pkgname }} in the subversion trunk">SVN Entries (trunk)</a></li>
+            <li><a href="{{ pkg.get_bugs_link }}" title="View existing bug
+                tickets for {{ pkg.pkgname }}">Bug Reports</a></li>
+            <li>
             {% if pkg.needupdate %}
-                <span style="font-size:x-small"><em>This package has been flagged out-of-date</em></span>
+                <span class="flagged">This package has been flagged out-of-date</span>
                 {% if user.is_authenticated %}
-                <br />&nbsp; &nbsp; <a href="/packages/unflag/{{ pkg.id }}/">Click here to unflag</a>
+                <br />&nbsp; &nbsp; <a href="/packages/unflag/{{ pkg.id }}/"
+                    title="Unflag this package">Click here to unflag</a>
                 {% endif %}
             {% else %}
-                <a href="/packages/flag/{{ pkg.id }}/">Flag Package Out-of-Date</a>
-                <a href="/packages/flaghelp/" onclick="return !window.open('/packages/flaghelp','FlagHelp','height=350,width=450,location=no,scrollbars=yes,menubars=no,toolbars=no,resizable=no');"><span style="font-size:x-small">(?)</span></a>
+            <a href="/packages/flag/{{ pkg.id }}/" title="Flag {{ pkg.pkgname }} as out-of-date">Flag Package Out-of-Date</a>
+            <a href="/packages/flaghelp/"
+                title="Get help on package flagging"
+                onclick="return !window.open('/packages/flaghelp','FlagHelp',
+                'height=350,width=450,location=no,scrollbars=yes,menubars=no,toolbars=no,resizable=no');">(?)</a>
             {% endif %}
-                </li>
-                {% if user.is_authenticated %}
-                  <li>&nbsp;</li>
-                  <li>
-                  <form name="devaction" method="post" action="/packages/update/">
-                      <input type="hidden" name="pkgid" value="{{ pkg.id }}" />
-                      <input type="submit" style="background: #e1e3e6;" name="adopt" value="Adopt Package" />
-                      <input type="submit" style="background: #e1e3e6;" name="disown" value="Disown Package" />
-                  </form>
-                  </li>
-                {% endif %}
+            </li>
+        </ul>
+
+        {% if user.is_authenticated %}
+        <form id="pkg-action" method="post" action="/packages/update/">
+            <div><input type="hidden" name="pkgid" value="{{ pkg.id }}" /></div>
+            <p><input title="Adopt this package" type="submit" class="adopt" name="adopt" value="Adopt" />
+            &nbsp;&nbsp;<input title="Orphan this package" type="submit" class="disown" name="disown" value="Disown" /></p>
+        </form>
+        {% endif %}
+
+    </div><!-- #actionlist -->
+
+    <table id="pkginfo">
+        <tr>
+            <th>Architecture:</th>
+            <td><a href="/packages/?arch={{ pkg.arch.name }}"
+                    title="Browse packages for {{ pkg.arch.name }} architecture">{{ pkg.arch.name }}</a></td>
+        </tr><tr>
+            <th>Repository:</th>
+            <td><a href="/packages/?repo={{ pkg.repo.name|capfirst }}"
+                    title="Browse the {{ pkg.repo.name|capfirst }} repository">{{ pkg.repo.name|capfirst }}</a></td>
+        </tr><tr>
+        </tr>{% ifnotequal pkg.pkgname pkg.pkgbase %}<tr>
+            <th>Base Package Name:</th>
+            <td>{{ pkg.pkgbase }}</td>
+        </tr>{% endifnotequal %}<tr>
+            <th>Description:</th>
+            <td>{% if pkg.pkgdesc %}{{ pkg.pkgdesc }}{% endif %}</td>
+        </tr><tr>
+            <th>Upstream URL:</th>
+            <td>{% if pkg.url %}<a href="{{ pkg.url }}">{{ pkg.url }}</a>{% endif %}</td>
+        </tr><tr>
+            <th>License:</th>
+            <td>{{ pkg.license }}</td>
+        </tr><tr>
+            <th>Maintainers:</th>
+            {% with pkg.maintainers as maints %}
+            <td>{% if maints %}
+                {% for m in maints %}
+                {{ m.get_full_name }}<br/>
+                {% endfor %}
+                {% else %}Orphan{% endif %}
+            </td>
+            {% endwith %}
+        </tr><tr>
+            <th>Package Size:</th>
+            <td>{{ pkg.compressed_size|filesizeformat }}</td>
+        </tr><tr>
+            <th>Installed Size:</th>
+            <td>{{ pkg.installed_size|filesizeformat }}</td>
+        </tr><tr>
+            <th>Build Date:</th>
+            <td>{{ pkg.build_date }} UTC</td>
+        </tr><tr>
+            <th>Last Updated:</th>
+            <td>{{ pkg.last_update|date:"Y-m-d" }}</td>
+        </tr>
+    </table>
+
+    <div id="metadata">
+
+        {% with pkg.get_depends as deps %}
+        <div id="pkgdeps" class="listing">
+
+            <h3 title="{{ pkg.pkgname }} has the following dependencies">
+                Dependencies ({{deps|length}})</h3>
+
+            {% if deps %}
+            <ul>
+            {% for depend in deps %}
+            {% ifequal depend.pkg None %}
+                <li>{{ depend.dep.depname }} (virtual)</li>
+            {% else %}
+                <li><a href="{{ depend.pkg.get_absolute_url }}"
+                    title="View package details for {{ depend.dep.depname }}">{{ depend.dep.depname }}</a>
+                    {{ depend.dep.depvcmp }}{% if depend.pkg.repo.testing %}
+                    <span class="testing-dep">(testing)</span>{% endif %}</li>
+            {% endifequal %}
+            {% endfor %}
             </ul>
-        </div>
-        <table class="listing">
-            <tr>
-                <th>Architecture:</th>
-                <td>{{ pkg.arch.name }}</td>
-            </tr><tr>
-                <th>Repository:</th>
-                <td>{{ pkg.repo.name|capfirst }}</td>
-            </tr>{% ifnotequal pkg.pkgname pkg.pkgbase %}<tr>
-                <th>Base Package Name:</th>
-                <td>{{ pkg.pkgbase }}</td>
-            </tr>{% endifnotequal %}<tr>
-                <th>Description:</th>
-                <td>{% if pkg.pkgdesc %}{{ pkg.pkgdesc }}{% endif %}</td>
-            </tr><tr>
-                <th>Upstream URL:</th>
-                <td>{% if pkg.url %}<a href="{{ pkg.url }}">{{ pkg.url }}</a>{% endif %}</td>
-            </tr><tr>
-                <th>License:</th>
-                <td>{{ pkg.license }}</td>
-            </tr><tr>
-                <th>Maintainer:</th>
-                {% with pkg.maintainers as maints %}
-                <td>{% if maints %}
-                    {% for m in maints %}
-                    {{ m.get_full_name }}<br/>
-                    {% endfor %}
-                    {% else %}Orphan{% endif %}
-                </td>
-                {% endwith %}
-            </tr><tr>
-                <th>Package Size:</th>
-                <td>{{ pkg.compressed_size|filesizeformat }}</td>
-            </tr><tr>
-                <th>Installed Size:</th>
-                <td>{{ pkg.installed_size|filesizeformat }}</td>
-            </tr><tr>
-                <th>Build Date:</th>
-                <td>{{ pkg.build_date }} UTC</td>
-            </tr><tr>
-                <th>Last Updated:</th>
-                <td>{{ pkg.last_update|date:"Y-m-d" }}</td>
-            </tr>
-        </table>
-        <br />
-        <table width="100%">
-            <tr>
-                <td valign="top" width="50%">
-                    {% with pkg.get_depends as deps %}
-                    <div class="listing">
-                        <h4>Dependencies ({{deps|length}}):</h4>
-                        {% if deps %}
-                        <ul style="font-size:small;list-style:none">
-                        {% for depend in deps %}
-                          {% ifequal depend.pkg None %}
-                            <li>{{ depend.dep.depname }} (virtual)</li>
-                          {% else %}
-                            <li><a href="{{ depend.pkg.get_absolute_url }}">{{ depend.dep.depname }}</a>{{ depend.dep.depvcmp }}{% if depend.pkg.repo.testing %} (testing){% endif %}</li>
-                          {% endifequal %}
-                        {% endfor %}
-                        </ul>
-                        {% endif %}
-                    </div>
-                    {% endwith %}
-                </td>
-                <td valign="top">
-                    {% with pkg.get_requiredby as rqdby %}
-                    <div class="listing">
-                        <h4>Required By ({{rqdby|length}}):</h4>
-                        {% if rqdby %}
-                        <ul style="font-size:small;list-style:none">
-                        {% for req in rqdby %}
-                        <li><a href="{{req.get_absolute_url}}">{{ req.pkgname }}</a>{% if req.repo.testing %} (testing){% endif %}</li>
-                        {% endfor %}
-                        </ul>
-                        {% endif %}
-                    </div>
-                    {% endwith %}
-                </td>
-            </tr>
-        </table>
-        <div class="listing" id="filelist">
-            <h4>Files:</h4>
-            <p style="padding: 10px 20px;">
-                <a id="filelink" href="files/">View File List</a>
-            </p>
-        </div>
-    </div>
+            {% endif %}
+
+        </div><!-- #pkgdeps -->
+        {% endwith %}
+
+        {% with pkg.get_requiredby as rqdby %}
+        <div id="pkgreqs" class="listing">
+
+            <h3 title="Packages that require {{ pkg.pkgname }}">
+                Required By ({{rqdby|length}})</h3>
+
+            {% if rqdby %}
+            <ul>
+                {% for req in rqdby %}
+                <li><a href="{{req.get_absolute_url}}"
+                    title="View package details for {{ req.pkgname }}">{{ req.pkgname }}</a>
+                    {% if req.repo.testing %} (testing){% endif %}</li>
+                {% endfor %}
+            </ul>
+            {% endif %}
+
+        </div><!-- #pkgreqs -->
+        {% endwith %}
+
+        <div id="pkgfiles" class="listing">
+
+            <h3 title="Complete list of files contained within this package">
+                Package Contents</h3>
+
+            <div id="pkgfilelist">
+                <p><a id="filelink" href="files/"
+                    title="Click to view the complete file list for {{ pkg.pkgname }}">
+                    View the file list for {{ pkg.pkgname }}</a></p>
+            </div>
+
+        </div><!-- #pkgfiles -->
+
+    </div><!-- #metadata -->
+</div><!-- #pkgdetails -->
+
 {% load cdn %}{% jquery %}
 <script type="text/javascript">
 function ajaxifyFiles() {
     $('#filelink').click(function(event) {
         event.preventDefault();
         $.get(this.href, function(data) {
-            $('#filelist').html(data);
+            $('#pkgfilelist').html(data);
         });
     });
 }
 $(document).ready(ajaxifyFiles);
 </script>
 {% endblock %}
-
diff --git a/templates/packages/files-list.html b/templates/packages/files-list.html
index dee18ecd..c45e0f10 100644
--- a/templates/packages/files-list.html
+++ b/templates/packages/files-list.html
@@ -1,10 +1,9 @@
-<h4>Files:</h4>
 {% if files.count %}
-<ul style="font-size:small;list-style:none">
-{% for file in files %}
-<li>{{ file.path }}</li>
-{% endfor %}
+<ul>
+    {% for file in files %}
+    <li>{{ file.path }}</li>
+    {% endfor %}
 </ul>
 {% else %}
-<p style="padding: 10px 20px;">No filelist available.</p>
+<p>No file list available.</p>
 {% endif %}
diff --git a/templates/packages/files.html b/templates/packages/files.html
index 2f951062..7dc111b4 100644
--- a/templates/packages/files.html
+++ b/templates/packages/files.html
@@ -1,14 +1,16 @@
 {% extends "base.html" %}
 {% block title %}Arch Linux - {{ pkg.pkgname }} {{ pkg.pkgver }}-{{ pkg.pkgrel }} - Package File List{% endblock %}
+
 {% block content %}
-    <div class="box">
-        <h2 class="title">{{ pkg.pkgname }} {{ pkg.pkgver }}-{{ pkg.pkgrel }}</h2>
-        <p style="padding: 10px 20px;">
-            <a href="{{ pkg.get_absolute_url }}">Back to Package</a>
-        </p>
-        <div class="listing" id="filelist">
+<div id="pkgdetails" class="box">
+
+    <h2>Package File List: {{ pkg.pkgname }} {{ pkg.pkgver }}-{{ pkg.pkgrel }}</h2>
+    <p><a href="{{ pkg.get_absolute_url }}">Back to Package</a></p>
+
+    <div id="metadata">
         {% include "packages/files-list.html" %}
-        </div>
     </div>
+
+</div>
 {% endblock %}
 
diff --git a/templates/packages/flag.html b/templates/packages/flag.html
index 1071fdf8..1e85be89 100644
--- a/templates/packages/flag.html
+++ b/templates/packages/flag.html
@@ -2,28 +2,40 @@
 {% block title %}Arch Linux - Flag Package - {{ pkg.pkgname }}{% endblock %}
 
 {% block content %}
-<div>
-    {% if confirmed %}
-	<p>Thank you. Maintainers have been notified.</p>
-    {% else %}
-	<p>If you notice that one of Arch's packages is out of date (ie, there is a
-    newer <b>stable</b> release available), then please notify us using the
-	form below.</p>
-	<p>The message box portion of the flag utility is optional, and meant for
-	short messages only. If you need more than 200 characters for your
-	message, then file a bug report, email the maintainer directly, or send an
-	email to the arch-general mailing list with your additional text.</p>
-
-	<p><b>Note:</b> Please do <i>not</i> use this facility if the package is
-	broken!  Use the <a href='http://bugs.archlinux.org'>bug tracker</a>
-	instead.</p>
+<div id="pkg-flag" class="box">
+{% if confirmed %}
+    <h2>Package Flagged</h2>
+
+    <p>Thank you, the maintainers have been notified about <strong>{{ pkg.pkgname }}</strong>.</p>
+
+    <p>You can return to the package details page for
+    <a href="{{ pkg.get_absolute_url }}" title="Package details for {{pkg.pkgname}}">{{pkg.pkgname}}</a>.</p>
+{% else %}
+    <h2>Flag Package: {{ pkg.pkgname }}</h2>
+
+    <p>If you notice a package is out of date (i.e., there is a newer
+    <strong>stable</strong> release available), then please notify us using
+    the form below.</p>
+
+    <p>The message box portion of the flag utility is optional, and meant
+    for short messages only. If you need more than 200 characters for your
+    message, then file a bug report, email the maintainer directly, or send
+    an email to the <a href="http://mailman.archlinux.org/mailman/listinfo/arch-general"
+        title="Visit the arch-general mailing list">arch-general mailing list</a>
+    with your additional text.</p>
+
+    <p><strong>Note:</strong> Please do <em>not</em> use this facility if the
+    package is broken!  Use the <a href="http://bugs.archlinux.org"
+        title="Arch Linux Bugtracker">bug tracker</a> instead.</p>
+
     <p>Please confirm your flag request for {{pkg.pkgname}}:</p>
-	<form method="post" action=".">
-		<table>
-			{{form}}
-		</table>
-		<input type="submit" value=" Confirm " />
-	</form>
-    {% endif %}
+
+    <form id="flag-pkg-form" method="post" action=".">
+        <fieldset>
+            {{ form.as_p }}
+        </fieldset>
+		<p><label></label> <input title="Flag {{ pkg.pkgname }} as out-of-date" type="submit" value="Flag Package" /></p>
+    </form>
+{% endif %}
 </div>
 {% endblock %}
diff --git a/templates/packages/flagged.html b/templates/packages/flagged.html
index 3461bbda..7d5e1c60 100644
--- a/templates/packages/flagged.html
+++ b/templates/packages/flagged.html
@@ -2,7 +2,14 @@
 {% block title %}Arch Linux - Flag Package - {{ pkg.pkgname }}{% endblock %}
 
 {% block content %}
-    <p>
-    {{pkg.pkgname}} has already been flagged out of date.
-    </p>
+<div id="pkg-flagged-error" class="box">
+
+    <h2>Error: Package already flagged</h2>
+
+    <p><strong>{{pkg.pkgname}}</strong> has already been flagged out-of-date.</p>
+
+    <p>You can return to the package details page for
+    <a href="{{ pkg.get_absolute_url }}" title="Package details for {{pkg.pkgname}}">{{pkg.pkgname}}</a>.</p>
+
+</div>
 {% endblock %}
diff --git a/templates/packages/flaghelp.html b/templates/packages/flaghelp.html
index c376175e..d8ca643b 100644
--- a/templates/packages/flaghelp.html
+++ b/templates/packages/flaghelp.html
@@ -1,27 +1,37 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-	<head>
-		<title>Flagging Packages</title>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	</head>
-	<body>
-		<div style="font-family: sans-serif;">
-			<p>If you notice that one of Arch's packages is out of date (ie,
-			there is a newer <b>stable</b> release available), then please
-			notify us by using the <b>Flag</b> button in the <i>Package
-				Details</i> screen. This will notify the maintainer responsible
-			for that package so they can update it.</p>
+    <head>
+        <title>Flagging Packages</title>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <style  type="text/css" media="screen, projection">
+            <!--
+                body { background: #eef; color: #444; font-family: sans-serif; }
+                a { color: #07b; text-decoration: none; }
+                a:hover { text-decoration: underline; }
+            -->
+        </style>
+    </head>
+    <body>
 
-			<p>The message box portion of the flag utility is optional, and
-			meant for short messages only. If you need more than 200 characters
-			for your message, then file a bug report, email the maintainer
-			directly, or send an email to the arch-general mailing list with
-			your additional text.</p>
+        <h3>Flagging Packages</h3>
 
-			<p><b>Note:</b> Please do <i>not</i> use this facility if the
-			package is broken! Use the
-			<a target="_blank" href='http://bugs.archlinux.org'>bugtracker</a> instead.</p>
-		</div>
-	</body>
+        <p>If you notice that a package is out-of-date (i.e., there is a newer
+        <strong>stable</strong> release available), then please notify us by
+        using the <strong>Flag</strong> button in the <em>Package Details</em>
+        screen.  This will notify the maintainer(s) responsible for that
+        package so they can update it.</p>
+
+        <p>The message box portion of the flag utility is optional, and meant
+        for short messages only. If you need more than 200 characters for your
+        message, then file a bug report, email the maintainer directly, or send
+        an email to the <a target="_blank" href="http://mailman.archlinux.org/mailman/listinfo/arch-general"
+            title="Visit the arch-general mailing list">arch-general mailing list</a>
+        with your additional text.</p>
+
+        <p><strong>Note:</strong> Please do <em>not</em> use this facility if the
+        package is broken! Use the <a target="_blank" href="http://bugs.archlinux.org"
+            title="Arch Linux Bugtracker">bugtracker</a> instead.</p>
+
+    </body>
 </html>
diff --git a/templates/packages/search.html b/templates/packages/search.html
index 4f7bc776..2c85f0bc 100644
--- a/templates/packages/search.html
+++ b/templates/packages/search.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% load package_extras %}
-{% block title %}Arch Linux - Package Search{% endblock %}
+{% block title %}Arch Linux - Package Database{% endblock %}
+
 {% block head %}
 <link rel="stylesheet" type="text/css" href="/media/admin_media/css/widgets.css" />
 <script type="text/javascript" src="/jsi18n/"></script>
@@ -9,129 +10,145 @@
 {% endblock %}
 
 {% block content %}
-    <div class="greybox">
-        <h4 style="text-align: right">Search Criteria</h4>
-        <form method="get" action="/packages/">
-            <input type="hidden" name="sort" value='{{sort}}' />
-            <table width="100%">
-                <tr>
-                    <td><span class="smalltext">Arch</span></td>
-                    <td><span class="smalltext">Repository</span></td>
-                    <td><span class="smalltext">Keywords</span></td>
-                    <td><span class="smalltext">Maintainer</span></td>
-                    <td><span class="smalltext">Last Update</span></td>
-                    <td><span class="smalltext">Flagged</span></td>
-                    <td><span class="smalltext">Per Page</span></td>
-                </tr>
-                <tr>
-                    {% td_input search_form.arch %}
-                    {% td_input search_form.repo %}
-                    {% td_input search_form.q %}
-                    {% td_input search_form.maintainer%}
-                    {% td_input search_form.last_update %}
-                    {% td_input search_form.flagged %}
-                    {% td_input search_form.limit %}
-                    <td><input type="submit" value="Search" /></td>
-                </tr>
-            </table>
-        </form>
+<div id="pkglist-search" class="box">
+
+    <h2>Package Database</h2>
+
+    <h3>Package Search</h3>
+
+	<form id="pkg-search" method="get" action="/packages/">
+		<p><input type="hidden" name="sort" value='{{sort}}' /></p>
+		<fieldset>
+			<legend>Enter search criteria</legend>
+			<div><label title="Limit results a specific CPU architecture">
+					Arch</label>{{ search_form.arch }}</div>
+			<div><label title="Limit results to a specific respository">
+					Repository</label>{{ search_form.repo }}</div>
+			<div><label title="Enter keywords as desired">
+					Keywords</label>{{ search_form.q }}</div>
+			<div><label title="Limit results to a specific maintainer">
+					Maintainer</label>{{ search_form.maintainer}}</div>
+			<div><label title="Limit results to a date after the date entered">
+					Last Update</label>{{ search_form.last_update }}</div>
+			<div><label title="Limit results based on out-of-date status">
+					Flagged</label>{{ search_form.flagged }}</div>
+			<div><label title="Select the number of results to display per page">
+					Per Page</label>{{ search_form.limit }}</div>
+			<div ><label>&nbsp;</label><input title="Search for packages using this criteria"
+				type="submit" value="Search" /></div>
+		</fieldset>
+	</form>
+
+</div><!-- #pkglist-search -->
+
+{% if package_list %}
+<div id="pkglist-results" class="box">
+
+    {% if paginator %}
+    <div id="pkglist-stats-top">
+
+        <p>{{paginator.count}} packages found.
+        Page {{page_obj.number}} of {{paginator.num_pages}}.</p>
+
+        <p class="pkglist-nav">
+            {% if page_obj.has_previous %}
+            <a class="prev" href="/packages/{{page_obj.previous_page_number}}/{{current_query}}"
+                title="Go to previous page">&lt; Prev</a>
+            {% else %}
+            <span class="prev">&lt; Prev</span>
+            {% endif %}
+            {% if page_obj.has_next %}
+            <a class="next" href="/packages/{{page_obj.next_page_number}}/{{current_query}}"
+                title="Go to next page">Next &gt;</a>
+            {% else %}
+            <span class="next">Next &gt;</span>
+            {% endif %}
+        </p>
+
     </div>
-    <br /><br />
+    {% endif %}
+
+    <form id="pkglist-results-form" method="post" action="/packages/update/">
 
-    {% if package_list %}
-    <div class="greybox">
-        <form method="post" action="/packages/update/">
-        <table class="results" width="100%">
-            {% if paginator %}
+        <table class="results">
+            <thead>
                 <tr>
-                    <td colspan="{% if user.is_authenticated %}5{% else %}4{% endif %}">
-                        {{paginator.count}} packages found.
-                        Page {{page_obj.number}} of {{paginator.num_pages}}.
-                    </td>
-                    <td>
-                        {% if page_obj.has_previous %}
-                        <a href="/packages/{{page_obj.previous_page_number}}/{{current_query}}">
-                            &lt;&lt;&lt; Previous
-                        </a>
-                        {% else %}
-                            &lt;&lt;&lt; Previous
-                        {% endif %}
-                    </td>
-                    <td>
-                        {% if page_obj.has_next %}
-                        <a href="/packages/{{page_obj.next_page_number}}/{{current_query}}">
-                            Next &gt;&gt;&gt;
-                        </a>
-                        {% else %} 
-                            Next &gt;&gt;&gt;
-                        {% endif %}
-                    </td>
+                    {% if user.is_authenticated %}
+                    <th>&nbsp;</th>
+                    {% endif %}
+                    <th><a href="/packages/{% buildsortqs "arch" %}"
+                            title="Sort packages by architecture">Arch</a></th>
+                    <th><a href="/packages/{% buildsortqs "repo" %}"
+                            title="Sort packages by repository">Repo</a></th>
+                    <th><a href="/packages/{% buildsortqs "pkgname" %}"
+                            title="Sort packages by package name">Name</a></th>
+                    <th>Version</th>
+                    <th>Description</th>
+                    <th><a href="/packages/{% buildsortqs "-last_update" %}"
+                            title="Sort packages by last update">Last Updated</a></th>
                 </tr>
-            {% endif %}
-            <tr>
-                {% if user.is_authenticated %}
-                <th>&nbsp;</th>
-                {% endif %}
-                <th><a href="/packages/{% buildsortqs "arch" %}">Arch</a></th>
-                <th><a href="/packages/{% buildsortqs "repo" %}">Repo</a></th>
-                <th><a href="/packages/{% buildsortqs "pkgname" %}">Name</a></th>
-                <th>Version</th>
-                <th>Description</th>
-                <th><a href="/packages/{% buildsortqs "-last_update" %}">Last Updated</a></th>
-
-            </tr>
+            </thead>
+            <tbody>
             {% for pkg in package_list %}
-                <tr class="{% cycle pkgr2,pkgr1 %}">
+                <tr class="{% cycle 'odd' 'even' %}">
                     {% if user.is_authenticated %}
                     <td><input type="checkbox" name="pkgid" value="{{ pkg.id }}" /></td>
                     {% endif %}
                     <td>{{ pkg.arch.name }}</td>
                     <td>{{ pkg.repo.name|capfirst }}</td>
-                    <td><a href="{{ pkg.get_absolute_url }}">{{ pkg.pkgname }}</a></td>
-                {% if pkg.needupdate %}
-                    <td><span style="color:red">{{ pkg.pkgver }}-{{ pkg.pkgrel }}</span></td>
-                {% else %}
+                    <td><a href="{{ pkg.get_absolute_url }}"
+                            title="View package details for {{ pkg.pkgname }}">{{ pkg.pkgname }}</a></td>
+                    {% if pkg.needupdate %}
+                    <td><span style="flagged">{{ pkg.pkgver }}-{{ pkg.pkgrel }}</span></td>
+                    {% else %}
                     <td>{{ pkg.pkgver }}-{{ pkg.pkgrel }}</td>
-                {% endif %}
-                    <td>{{ pkg.pkgdesc }}</td>
+                    {% endif %}
+                    <td class="wrap">{{ pkg.pkgdesc }}</td>
                     <td>{{ pkg.last_update|date:"Y-m-d" }}</td>
                 </tr>
             {% endfor %}
-            {% if paginator %}
-                <tr>
-                    <td colspan="{% if user.is_authenticated %}5{% else %}4{% endif %}">
-                        {{paginator.count}} packages found.
-                        Page {{page_obj.number}} of {{paginator.num_pages}}.
-                    </td>
-                    <td>
-                        {% if page_obj.has_previous %}
-                        <a href="/packages/{{page_obj.previous_page_number}}/{{current_query}}">
-                            &lt;&lt;&lt; Previous
-                        </a>
-                        {% else %}
-                            &lt;&lt;&lt; Previous
-                        {% endif %}
-                    </td>
-                    <td>
-                        {% if page_obj.has_next %}
-                        <a href="/packages/{{page_obj.next_page_number}}/{{current_query}}">
-                            Next &gt;&gt;&gt;
-                        </a>
-                        {% else %} 
-                            Next &gt;&gt;&gt;
-                        {% endif %}
-                    </td>
-                </tr>
-            {% endif %}
+            </tbody>
         </table>
-        {% if user.is_authenticated %}
-        <div id="adoptbox">
-            <input type="submit" name="adopt" value="Adopt Packages">
-            <input type="submit" name="disown" value="Disown Packages">
+
+        {% if paginator %}
+        <div id="pkglist-stats-bottom">
+
+            <p>{{paginator.count}} packages found. Page {{page_obj.number}} of {{paginator.num_pages}}.</p>
+
+                <p class="pkglist-nav">
+                    {% if page_obj.has_previous %}
+                    <a class="prev" href="/packages/{{page_obj.previous_page_number}}/{{current_query}}"
+                        title="Go to previous page">&lt; Prev</a>
+                    {% else %}
+                    <span class="prev">&lt; Prev</span>
+                    {% endif %}
+                    {% if page_obj.has_next %}
+                    <a class="next" href="/packages/{{page_obj.next_page_number}}/{{current_query}}"
+                        title="Go to next page">Next &gt;</a>
+                    {% else %}
+                    <span class="next">Next &gt;</span>
+                    {% endif %}
+                </p>
+
         </div>
         {% endif %}
-        </form>
-    </div>
-    {% endif %}
-{% endblock %}
 
+        {% if user.is_authenticated %}
+        <p><input title="Adopt selected packages" type="submit" id="adopt-btn"
+        name="adopt" value="Adopt Packages" />
+        <input title="Orphan selected packages" type="submit" id="disown-btn"
+        name="disown" value="Disown Packages" /></p>
+        {% endif %}
+
+    </form>
+
+</div><!-- #pkglist-results -->
+
+<div id="pkglist-about" class="box">
+    <p>You are browsing the Arch Linux package database. From here you can find
+    detailed information about packages located in the official supported repositories.
+    For unsupported packages, browse the <a href="http://aur.archlinux.org/"
+        title="AUR package database">Arch User Repository (AUR).</a></p>
+</div>
+{% endif %}
+{% endblock %}
diff --git a/templates/packages/signoffs.html b/templates/packages/signoffs.html
index cb6a848e..930b606e 100644
--- a/templates/packages/signoffs.html
+++ b/templates/packages/signoffs.html
@@ -2,9 +2,13 @@
 {% block title %}Arch Linux - Package Signoffs{% endblock %}
 
 {% block content %}
-    {% if packages %}
-    <div class="greybox">
-        <table class="results" width="100%">
+{% if packages %}
+<div id="dev-signoffs" class="box">
+
+    <h2>Package Signoffs</h2>
+
+    <table id="signoffs" class="results">
+        <thead>
             <tr>
                 <th>Arch</th>
                 <th>Package</th>
@@ -14,28 +18,33 @@
                 <th>Approved</th>
                 <th>Signoff</th>
             </tr>
-        {% for pkg,target in packages %}
-        <tr class="{% cycle pkgr2,pkgr1 %}">
+        </thead>
+        <tbody>
+            {% for pkg,target in packages %}
+            <tr class="{% cycle 'odd' 'even' %}">
                 <td>{{ pkg.arch.name }}</td>
-                <td><a href="{{ pkg.get_absolute_url }}">{{ pkg.pkgname }}</a></td>
+                <td><a href="{{ pkg.get_absolute_url }}"
+                        title="View package details for {{ pkg.pkgname }}">{{ pkg.pkgname }}</a></td>
                 <td>{{ pkg.pkgver }}-{{ pkg.pkgrel }}</td>
                 <td>{{ pkg.last_update }}</td>
                 <td>{{ target }}</td>
-                <td class="signoff_{{pkg.approved_for_signoff|yesno}}">{{ pkg.approved_for_signoff|yesno:"Yes,No" }}</td>
+                <td class="signoff-{{pkg.approved_for_signoff|yesno}}">
+                    {{ pkg.approved_for_signoff|yesno:"Yes,No" }}</td>
                 <td>
                     <ul>
-                    {% for signoff in pkg.signoffs %}
-                    <li>{{signoff.packager}}</li>
-                    {% endfor %}
-                    <li>
-                    <a href="/packages/signoff_package/{{pkg.arch}}/{{pkg.pkgname}}/">Signoff</a>
-                    </li>
+                        <li><a href="/packages/signoff_package/{{pkg.arch}}/{{pkg.pkgname}}/"
+                            title="Signoff {{pkg.pkgname}} for {{pkg.arch}}">Signoff</a>
+                        </li>
+                        {% for signoff in pkg.signoffs %}
+                        <li class="signed-username" title="Signed off by {{signoff.packager}}">
+                        {{signoff.packager}}</li>
+                        {% endfor %}
                     </ul>
                 </td>
             </tr>
         {% endfor %}
-        </table>
-    </div>
-    {% endif %}
+        </tbody>
+    </table>
+</div>
+{% endif %}
 {% endblock %}
-