Merge lp:~fougner/ubuntu-packaging-guide/retheming into lp:ubuntu-packaging-guide

[Alexander Fougner]

more Ubuntu-ish Sphinx theme!

[Daniel Holbach (dholbach)]

The diff is not as bad as it looks. I'm quite happy with the changes (for a first start with the retheming). I would like to get somebody else's opinion though.

 - daniel@miyazaki:~$ wget -q http://loco.ubuntu.com/media/css/newstyle.css
   daniel@miyazaki:~$ diff -u newstyle.css bzr/ubuntu-packaging-guide.retheming/themes/ubuntu/static/newstyle.css
   daniel@miyazaki:~$

 - Actual theme changes: http://paste.ubuntu.com/642710/ (compared to standard sphinx theme)

 - Changes in the CSS:
   daniel@miyazaki:~$ bzr branch lp:ubuntu-website/light-django-theme
   Branched 31 revision(s).

   daniel@miyazaki:~$ diff -u light-django-theme/media/css/default.css bzr/ubuntu-packaging-guide.retheming/themes/ubuntu/static/light-django-theme.css
   --- light-django-theme/media/css/default.css 2011-07-12 17:29:45.334779000 +0200
   +++ bzr/ubuntu-packaging-guide.retheming/themes/ubuntu/static/light-django-theme.css 2011-07-12 17:26:58.420591381 +0200
   @@ -876,11 +876,11 @@
    }

    #page-footer {
   - background: url("../images/footer.png") repeat-x scroll 0 0 #EEECEA
   + background: url("footer.png") repeat-x scroll 0 0 #EEECEA
    }

     #page-footer .container {
   - background: url("../images/footer.png") repeat-x scroll 0 0 #EEECEA;
   + background: url("footer.png") repeat-x scroll 0 0 #EEECEA;
         padding: 0px 10px;
         width: 960px;
     }
   daniel@miyazaki:~$

[Daniel Holbach (dholbach)]

Thanks a lot Alexander! Fantastic work!

[Alexander Fougner (fougner)]

> Thanks a lot Alexander! Fantastic work!

You're welcome! Just give me a ping if there's more web stuff to do :)

[Daniel Holbach (dholbach)]

I feel what we still need to do is:

 - adding copyright/license/location information
 - remove the website links for now, as they're not really relevant to an HTML offline guide,
   and replace them with a <!-- website links --> HTML comment, which can be replace with actual
   HTML (for website links) for the more official location by a script

If you can think of anything else, please comment. :)

[Iain Lane (laney)]

(I re-merged your branch with trunk before looking)

Cheers for this! Looks very nice :-)

Comments:

  - I see "¶" at the end of headings that probably shouldn't be there.
  - "Index" in the main orange bar seems to go nowhere and the other index link leads to a page with only one entry. Do we plan on fleshing this out?
  - Looking at http://www.ubuntu.com/ubuntu, if that's what we're trying to be consistent with, the links at the top above the orange bar should be /in/ it. (Also there's no Ubuntu logo/text on the right hand side)
  - What's the login link for?
  - Is it possible to indent the code blocks a bit and/or give them a slightly shaded background?
  - Code blocks should probably have a fixed width font. For example, indentation matters when writing debian/changelog entries, and this should be clear on the page. See debian-dir-overview for examples of this.

Cheers!
Iain

review: Needs Fixing

[Daniel Holbach (dholbach)]

I'm very happy with the changes that Alexander got in. Do we want to merge this, go ahead with the current approach and file bugs for the rest of the issues or do we want to fix all of this before merging?

[Stefano Rivera (stefanor)]

I'm happy with either approach. If Alexander is prepared to do a few rounds of review, we can try and get this all in shape now, but I think it's pretty much mergeable as is.

Issues I see:
* Double copyright footer.
* What's the plan for the top bar? I assume it'll be static links to other related resources?
* The knowledge base articles have an odd link to the knowledge base section, in the second bar.
* The knowledge base page's nested lists don't look great.
* Licencing:
  - We are adding some BSD licensed code that refers to a non-existent LICENCE file.
    + Add such a file, add this to debian/copyright too.
  - Adding a new CC-BY-SA copyright holder.
    + Add the copyright holder to debian/copyright.
  - I guess our articles should get decent copyright attribution headers at some point, but that's out of the scope for this merge.
* Searching doesn't work, but it didn't seem to work before, either.

[Daniel Holbach (dholbach)]

Maybe we should remove all the Javascript bits for now and remove the search bits and file a bug for it, so we can follow up on that later on (and hopefully avoid duplicating jquery bits).

[lp:~fougner/ubuntu-packaging-guide/retheming]

53. By Alexander Fougner on 2011-07-22

remove duplicate copyright text, some styling

[Daniel Holbach (dholbach)]

Can we
 - remove all the javascript files for now? are they needed? (if not, we don't have to add them in the license/copyright overviews, etc.)
 - remove all links to search including the search.html page?

Apart from that I'm very happy with this.

Great work!

[lp:~fougner/ubuntu-packaging-guide/retheming]

54. By Alexander Fougner on 2011-07-22

removed all unchanged templates, inherits from basic theme instead

55. By Alexander Fougner on 2011-07-22

merged dholbach's js removals and fixes

[Daniel Holbach (dholbach)]

Approve. Great work!

Stefano Rivera was basically with this as well, Adnane Belmadiaf gave his OK regarding CSS/theme stuff as well. This should be a good basis for the theming.

review: Approve

Unmerged revisions

=== added file 'BORROWED-CODE'
--- BORROWED-CODE	1970-01-01 00:00:00 +0000
+++ BORROWED-CODE	2011-07-22 14:59:30 +0000
@@ -0,0 +1,7 @@
+themes/ubuntu/static/newstyle.css
+themes/ubuntu/static/images/*
+	From http://loco.ubuntu.com/media/css/newstyle.css
+	     http://loco.ubuntu.com/media/images
+
+themes/ubuntu/static/light-django-theme.css
+	From lp:ubuntu-community-webthemes/light-django-theme

=== modified file 'conf.py'
--- conf.py	2010-11-19 12:07:36 +0000
+++ conf.py	2011-07-22 14:59:30 +0000
@@ -101,7 +101,7 @@
 
 # The theme to use for HTML and HTML Help pages.  See the documentation for
 # a list of builtin themes.
-html_theme = 'default'
+html_theme = 'ubuntu'
 
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the
@@ -109,7 +109,7 @@
 #html_theme_options = {}
 
 # Add any paths that contain custom themes here, relative to this directory.
-#html_theme_path = []
+html_theme_path = ['themes']
 
 # The name for this set of Sphinx documents.  If None, it defaults to
 # "<project> v<release> documentation".

=== modified file 'debian/copyright'
--- debian/copyright	2011-04-19 08:27:41 +0000
+++ debian/copyright	2011-07-22 14:59:30 +0000
@@ -341,3 +341,44 @@
  this trademark restriction does not form part of the License.
  .
     Creative Commons may be contacted at http://creativecommons.org/.
+
+Files: themes/ubuntu/static/newstyle.css
+       themes/ubuntu/static/images/*
+Copyright: 2009-2011 LoCo Directory Hackers <[e-mail]>
+License: AGPL-3
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+ .
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+ .
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Files: themes/ubuntu/static/light-django-theme.css
+Copyright: Ubuntu Community Web Themes Developers (https://launchpad.net/~ubuntu-community-webthemes)
+License: GPL-2+
+ This program 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 2 of the License, or (at your option) any later
+ version.
+ .
+ This program is distributed in the hope that it will be
+ useful, but WITHOUT ANY WARRANTY; without even the implied
+ warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
+ PURPOSE.  See the GNU General Public License for more
+ details.
+ .
+ You should have received a copy of the GNU General Public
+ License along with this package; if not, write to the Free
+ Software Foundation, Inc., 51 Franklin St, Fifth Floor,
+ Boston, MA  02110-1301 USA
+ .
+ On Debian systems, the full text of the GNU General Public
+ License version 2 can be found in the file
+ `/usr/share/common-licenses/GPL-2'.

=== modified file 'index.rst'
--- index.rst	2011-07-19 13:13:58 +0000
+++ index.rst	2011-07-22 14:59:30 +0000
@@ -45,4 +45,8 @@
 ==================
 
 * :ref:`genindex`
+<<<<<<< TREE
 * :ref:`search`
+=======
+* :ref:`modindex`
+>>>>>>> MERGE-SOURCE

=== added directory 'themes'
=== added directory 'themes/ubuntu'
=== added file 'themes/ubuntu/layout.html'
--- themes/ubuntu/layout.html	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/layout.html	2011-07-22 14:59:30 +0000
@@ -0,0 +1,223 @@
+{#
+    ubuntu/layout.html
+    ~~~~~~~~~~~~~~~~~
+
+    Ubuntu layout template for Sphinx themes.
+
+    :copyright: Copyright 2007-2010 by the Sphinx team, see AUTHORS.
+    :license: BSD, see LICENSE for details.
+#}
+{%- block doctype -%}
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+{%- endblock %}
+{%- set reldelim1 = reldelim1 is not defined and ' &raquo;' or reldelim1 %}
+{%- set reldelim2 = reldelim2 is not defined and ' |' or reldelim2 %}
+{%- set render_sidebar = (not embedded) and (not theme_nosidebar|tobool) and
+                         (sidebars != []) %}
+{%- set url_root = pathto('', 1) %}
+{%- if url_root == '#' %}{% set url_root = '' %}{% endif %}
+        
+
+{%- macro relbar() %}
+  <aside id="page-related">
+    <div class="container" id="sub-nav-container" > 
+       <nav id="sub-nav"> 
+        {%- for rellink in rellinks %}
+	        <a class="sub-nav-item" {% if loop.first %}style="margin-right: 10px"{% endif %} 
+	        href="{{ pathto(rellink[0]) }}" title="{{ rellink[1]|striptags|e }}"
+	        {{ accesskey(rellink[2]) }}>{{ rellink[3] }}</a>
+        {%- endfor %}
+        {%- block rootrellink %}
+        <a class="sub-nav-item" href="{{ pathto(master_doc) }}">{{ shorttitle|e }} {{ reldelim1 }}</a>
+        {%- endblock %}
+        {%- for parent in parents %}
+          <a class="sub-nav-item" href="{{ parent.link|e }}" {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }} {{ reldelim1 }}</a>
+        {%- endfor %}
+        {%- block relbaritems %} {% endblock %}
+      </nav>
+    </div>
+</aside> 
+{%- endmacro %}
+
+{%- macro sidebar() %}
+      {%- if render_sidebar %}
+      <div class="sphinxsidebar">
+        <div class="sphinxsidebarwrapper">
+          {%- block sidebarlogo %}
+          {%- if logo %}
+            <p class="logo"><a href="{{ pathto(master_doc) }}">
+              <img class="logo" src="{{ pathto('_static/' + logo, 1) }}" alt="Logo"/>
+            </a></p>
+          {%- endif %}
+          {%- endblock %}
+          {%- if sidebars != None %}
+            {#- new style sidebar: explicitly include/exclude templates #}
+            {%- for sidebartemplate in sidebars %}
+            {%- include sidebartemplate %}
+            {%- endfor %}
+          {%- else %}
+            {#- old style sidebars: using blocks -- should be deprecated #}
+            {%- block sidebartoc %}
+            {%- include "localtoc.html" %}
+            {%- endblock %}
+            {%- block sidebarrel %}
+            {%- include "relations.html" %}
+            {%- endblock %}
+            {%- block sidebarsourcelink %}
+            {%- include "sourcelink.html" %}
+            {%- endblock %}
+            {%- if customsidebar %}
+            {%- include customsidebar %}
+            {%- endif %}
+            {%- block sidebarsearch %}
+            {%- include "searchbox.html" %}
+            {%- endblock %}
+          {%- endif %}
+        </div>
+      </div>
+      {%- endif %}
+{%- endmacro %}
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset={{ encoding }}" />
+    {{ metatags }}
+    {%- if not embedded and docstitle %}
+      {%- set titlesuffix = " &mdash; "|safe + docstitle|e %}
+    {%- else %}
+      {%- set titlesuffix = "" %}
+    {%- endif %}
+    {%- block htmltitle %}
+    <title>{{ title|striptags|e }}{{ titlesuffix }}</title>
+    {%- endblock %}
+    <link rel="stylesheet" href="{{ pathto('_static/' + style, 1) }}" type="text/css" />
+    <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1) }}" type="text/css" />
+    {%- for cssfile in css_files %}
+    <link rel="stylesheet" href="{{ pathto(cssfile, 1) }}" type="text/css" />
+    {%- endfor %}
+    {%- if not embedded %}
+    <script type="text/javascript">
+      var DOCUMENTATION_OPTIONS = {
+        URL_ROOT:    '{{ url_root }}',
+        VERSION:     '{{ release|e }}',
+        COLLAPSE_INDEX: false,
+        FILE_SUFFIX: '{{ '' if no_search_suffix else file_suffix }}',
+        HAS_SOURCE:  {{ has_source|lower }}
+      };
+    </script>
+    {# %- for scriptfile in script_files %}
+    <script type="text/javascript" src="{{ pathto(scriptfile, 1) }}"></script>
+    {%- endfor % #}
+    {%- if use_opensearch %}
+    <link rel="search" type="application/opensearchdescription+xml"
+          title="{% trans docstitle=docstitle|e %}Search within {{ docstitle }}{% endtrans %}"
+          href="{{ pathto('_static/opensearch.xml', 1) }}"/>
+    {%- endif %}
+    {%- if favicon %}
+    <link rel="shortcut icon" href="{{ pathto('_static/' + favicon, 1) }}"/>
+    {%- endif %}
+    {%- endif %}
+{%- block linktags %}
+    {%- if hasdoc('about') %}
+    <link rel="author" title="{{ _('About these documents') }}" href="{{ pathto('about') }}" />
+    {%- endif %}
+    {%- if hasdoc('genindex') %}
+    <link rel="index" title="{{ _('Index') }}" href="{{ pathto('genindex') }}" />
+    {%- endif %}
+    {%- if hasdoc('search') %}
+    <link rel="search" title="{{ _('Search') }}" href="{{ pathto('search') }}" />
+    {%- endif %}
+    {%- if hasdoc('copyright') %}
+    <link rel="copyright" title="{{ _('Copyright') }}" href="{{ pathto('copyright') }}" />
+    {%- endif %}
+    <link rel="top" title="{{ docstitle|e }}" href="{{ pathto('index') }}" />
+    {%- if parents %}
+    <link rel="up" title="{{ parents[-1].title|striptags|e }}" href="{{ parents[-1].link|e }}" />
+    {%- endif %}
+    {%- if next %}
+    <link rel="next" title="{{ next.title|striptags|e }}" href="{{ next.link|e }}" />
+    {%- endif %}
+    {%- if prev %}
+    <link rel="prev" title="{{ prev.title|striptags|e }}" href="{{ prev.link|e }}" />
+    {%- endif %}
+{%- endblock %}
+{%- block extrahead %} {% endblock %}
+  </head>
+  <body id="home">
+
+<!--
+<aside id="top-nav"> 
+  <div class="container">
+    
+    <section id="top-login"> 
+      <a class="top-login-item" href="/openid/login?next=/events/" title="Login">Login</a>
+    </section>
+    <nav id="top-related"> 
+      <a class="top-nav-item" href="http://www.ubuntu.com">Ubuntu.com</a> 
+      <a class="top-nav-item" href="http://www.ubuntu.com/community">Community</a>
+      <a class="top-nav-item" href="http://www.ubuntu.com/support">Support</a>
+      <a class="top-nav-item" href="http://www.ubuntu.com/partners">Partners</a>
+    </nav>
+  </div> 
+</aside>
+-->
+
+<header id="page-header"> 
+  <div class="container" > 
+    <nav id="main-nav"> 
+      <a class="main-nav-item " title="Index" href="index.html">Index</a> 
+    </nav> 
+  </div> 
+</header>
+
+{%- block header %}{% endblock %}
+
+{%- block relbar1 %}{{ relbar() }}{% endblock %}
+
+{%- block content %}
+  {%- block sidebar1 %} {# possible location for sidebar #} {% endblock %}
+
+     <section id="main-section">
+  {%- block document %}
+      <div class="container" > 
+      {%- if render_sidebar %}
+        <section id="content"> 
+      {%- endif %}
+          <div class="body">
+		{%- block sidebar2 %}{{ sidebar() }}{% endblock %}          	
+    {% block body %} {% endblock %}
+	<div class="divide"></div>
+
+          </div>
+      {%- if render_sidebar %}
+        </section>
+      {%- endif %}
+      </div>
+  {%- endblock %}
+    </section>
+{%- endblock %}
+
+{%- block footer %}
+   <footer id="page-footer"> 
+   <div class="container">
+   	<div class="copyright"> 
+    {%- if show_copyright %}
+      {%- if hasdoc('copyright') %}
+        {% trans path=pathto('copyright'), copyright=copyright|e %}&copy; <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}
+      {%- else %}
+        {% trans copyright=copyright|e %}&copy; Copyright {{ copyright }}.{% endtrans %}
+      {%- endif %}
+    {%- endif %}
+    {%- if last_updated %}
+      {% trans last_updated=last_updated|e %}Last updated on {{ last_updated }}.{% endtrans %}
+    {%- endif %}
+    {%- if show_sphinx %}
+      {% trans sphinx_version=sphinx_version|e %}Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> {{ sphinx_version }}.{% endtrans %}
+    {%- endif %}
+	</div> 
+    </div>
+    </footer>
+{%- endblock %}
+  </body>
+</html>

=== added file 'themes/ubuntu/searchbox.html'
--- themes/ubuntu/searchbox.html	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/searchbox.html	2011-07-22 14:59:30 +0000
@@ -0,0 +1,24 @@
+{#
+    basic/searchbox.html
+    ~~~~~~~~~~~~~~~~~~~~
+
+    Sphinx sidebar template: quick search box.
+
+    :copyright: Copyright 2007-2010 by the Sphinx team, see AUTHORS.
+    :license: BSD, see LICENSE for details.
+#}
+{%- if pagename != "search" %}
+<div id="searchbox" style="display: none">
+  <h4>{{ _('Quick search') }}</h4>
+    <form class="search" action="{{ pathto('search') }}" method="get">
+      <input type="text" name="q" size="18" />
+      <input type="submit" value="{{ _('Go') }}" />
+      <input type="hidden" name="check_keywords" value="yes" />
+      <input type="hidden" name="area" value="default" />
+    </form>
+    <p class="searchtip" style="font-size: 90%">
+    {{ _('Enter search terms or a module, class or function name.') }}
+    </p>
+</div>
+<!--<script type="text/javascript">$('#searchbox').show(0);</script>-->
+{%- endif %}

=== added directory 'themes/ubuntu/static'
=== added file 'themes/ubuntu/static/default.css_t'
--- themes/ubuntu/static/default.css_t	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/static/default.css_t	2011-07-22 14:59:30 +0000
@@ -0,0 +1,62 @@
+/*
+*   License: GPLv2
+*   Author : Alexander Fougner <fougner89 at gmail dot com>
+*   Source : http://loco.ubuntu.com/media/css/newstyle.css
+*            https://code.launchpad.net/~ubuntu-website-community/ubuntu-website/light-django-theme
+*/
+
+@import url("light-django-theme.css");
+@import url("newstyle.css");
+
+body {
+    background: url("images/dotted.png") repeat scroll 0 0 #FFFFFF;
+}
+
+#page-header {
+    background: url("images/header.png") repeat-x scroll 0 0 #DD4814;
+}
+
+div.sphinxsidebar {
+    float:right;
+    background: #f5f5f5;
+    border: 1px solid #ddd;
+    padding: 15px;
+    margin: 10px;
+    width: 230px;
+background: #F7F7F7;
+border-radius: 8px;
+}
+
+div.sphinxsidebar ul {
+    margin-left: 10px;
+}
+
+pre {
+	font-family: monospace;
+	border: 1px solid #ddd;
+	background: #f5f5f5;
+	margin: 5px;
+	padding: 5px;
+}
+
+a.headerlink {
+	visibility: hidden;
+}
+
+h1:hover > a.headerlink,
+h2:hover > a.headerlink, 
+h3:hover > a.headerlink, 
+h4:hover > a.headerlink, 
+h5:hover > a.headerlink, 
+h6:hover > a.headerlink, 
+dt:hover > a.headerlink {
+visibility: visible;
+}
+
+form.search_form input, #searchbox {
+height: auto;
+}
+
+#page-footer .container div.copyright {
+padding: 10px;
+}

=== added directory 'themes/ubuntu/static/images'
=== added file 'themes/ubuntu/static/images/dotted.png'
Binary files themes/ubuntu/static/images/dotted.png	1970-01-01 00:00:00 +0000 and themes/ubuntu/static/images/dotted.png	2011-07-22 14:59:30 +0000 differ
=== added file 'themes/ubuntu/static/images/favicon.ico'
Binary files themes/ubuntu/static/images/favicon.ico	1970-01-01 00:00:00 +0000 and themes/ubuntu/static/images/favicon.ico	2011-07-22 14:59:30 +0000 differ
=== added file 'themes/ubuntu/static/images/footer.png'
Binary files themes/ubuntu/static/images/footer.png	1970-01-01 00:00:00 +0000 and themes/ubuntu/static/images/footer.png	2011-07-22 14:59:30 +0000 differ
=== added file 'themes/ubuntu/static/images/header.png'
Binary files themes/ubuntu/static/images/header.png	1970-01-01 00:00:00 +0000 and themes/ubuntu/static/images/header.png	2011-07-22 14:59:30 +0000 differ
=== added file 'themes/ubuntu/static/images/search.png'
Binary files themes/ubuntu/static/images/search.png	1970-01-01 00:00:00 +0000 and themes/ubuntu/static/images/search.png	2011-07-22 14:59:30 +0000 differ
=== added file 'themes/ubuntu/static/light-django-theme.css'
--- themes/ubuntu/static/light-django-theme.css	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/static/light-django-theme.css	2011-07-22 14:59:30 +0000
@@ -0,0 +1,1265 @@
+/*-  LICENSE
+-------------------------------------------------------------------------------------------------------- */
+/*
+    Author: Matteo Lissandrini - kuzeko http://www.kuzeko.com
+
+//    Licensed under the Creative Commons Attribution-Share Alike 3.0 License - http://creativecommons.org/licenses/by-sa/3.0/
+//      - Free for use in both personal and commercial projects
+//      - Attribution requires leaving author name, author link, and the license info intact.
+*/
+
+/*-  reset
+-------------------------------------------------------------------------------------------------------- */
+
+/*
+Reset derived and adapted from
+html5doctor.com Reset Stylesheet
+v1.4.1
[phone]
+Author: Richard Clark - http://richclarkdesign.com
+*/
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
+    background: transparent;
+    border: 0;
+    font-family: inherit;
+    font-weight: inherit;
+    font-style: inherit;
+    font-size: 100%;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    vertical-align: baseline;
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+    content: ''
+}
+
+nav ul {
+    list-style: none
+}
+
+td li, li li {
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+:focus  /* remember to define focus styles! */ {
+    outline: 0
+}
+
+body {
+    line-height: 1
+}
+
+article, aside, details, dialog, figure, footer, header, hgroup, nav, section {
+    display: block
+}
+
+ol, ul {
+    list-style-position: inside
+}
+
+blockquote, q {
+    quotes: none
+}
+
+a {
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    color: #DD4814;
+    vertical-align: baseline;
+    background: transparent;
+    text-decoration: none;
+}
+
+ins {
+    background-color: #ff9;
+    color: #000;
+    text-decoration: none;
+}
+
+mark {
+    background-color: #ff9;
+    color: #000;
+    font-style: italic;
+    font-weight: bold;
+}
+
+del {
+    text-decoration: line-through
+}
+
+abbr[title], dfn[title] {
+    border-bottom: 1px dotted #000;
+    cursor: help;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #cccccc;
+    margin: 1em 0;
+    padding: 0;
+}
+
+input, select {
+    vertical-align: middle
+}
+
+textarea {
+    overflow: auto
+}
+
+/* ----------------------------------------------------------------------------------------------------- */
+
+/*-  Typography
+-------------------------------------------------------------------------------------------------------- */
+
+body {
+    font-family: 'Ubuntubeta','Ubuntu','Bitstream Vera Sans','DejaVu Sans', Tahoma, sans-serif;
+    font-size: 100%;
+    line-height: 1.5em;
+}
+
+h1, h2, h3 {
+    color: #333333;
+    font-weight: normal;
+    margin: 0px;
+}
+
+h1 {
+    font-size: 36px;
+    line-height: 40px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+h2 {
+    font-size: 24px;
+    line-height: 28px;
+    font-weight: normal;
+    margin-top: 16px;
+    margin-bottom: 8px;
+}
+
+h3 {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: normal;
+    margin-top: 16px;
+    margin-bottom: 8px;
+}
+
+p {
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+dt {
+    font-size: 0.75em;
+    font-weight: bold;
+    /* 16x0.75 =12 */
+}
+
+li {
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+strong {
+    font-weight: bold
+}
+
+em {
+    font-style: italic
+}
+
+table.basic {
+    font-size:0.75em;
+    line-height:1.3333em; /* 16x0.75 =12 */
+}
+table.basic thead th, table.basic thead a {
+    font-weight:bold;
+}
+
+table.basic thead a , table.basic tfoot a {
+    text-decoration:underline;
+}
+
+#top-logo {
+    font-size: 0.875em;
+    /* 16x0.75 =12 */
+}
+
+#top-nav { 
+    font-size:0.625em; 
+    /* 16x0.625=10 */ 
+}
+
+#main-nav {
+    font-size: 0.875em;
+    /* 16x0.875=14 */
+}
+
+#sub-nav {
+    font-size: 0.75em;
+    /* 16x0.75 =12 */
+}
+
+/* Form typography */
+form .smalltext {
+    font-size:0.625em; 
+    line-height: 1.4em;
+}
+
+legend span.supporting, label, form .error {
+    font-size: 0.75em;
+    line-height: 1.2em;
+}
+
+legend {
+    font-size: 1em;
+    line-height: 1em;
+}
+
+input[type="text"], input[type="password"], select {
+    font-size: 0.75em;
+}
+
+input[type="submit"] {
+    font-size: 1em;
+    line-height: 1.25em;
+}
+/* END Form typography */
+
+.showcase-text {
+    font-size: 0.875em;
+    /* 16x0.875=14 */
+}
+
+.footer-item {
+    font-size: 0.75em;
+    /* 16x0.625=12 */
+}
+
+/*-  Layout
+-------------------------------------------------------------------------------------------------------- */
+
+.container {
+    clear: both;
+    margin: 0 auto;
+    padding: 0;
+    position: relative;
+    width: 980px;
+}
+
+#top-nav { 
+    margin:0 auto; 
+    line-height: 2em; 
+    height: 20px;
+}
+
+.top-nav-item { 
+    display:inline-block; 
+    margin-right: 14px; 
+    line-height:2em; 
+}
+
+#top-login { 
+    display:inline-block; 
+    margin-left:15px; 
+}
+
+.top-login-item { 
+    display:inline-block; 
+    padding:0 8px; 
+    line-height:2em; 
+}
+
+#top-related { 
+    float:right; 
+    margin-right:2px; 
+}
+
+#main-nav {
+    float: left;
+    width: 770px;
+}
+
+.main-nav-item {
+    margin: 5px 10px;
+    padding: 10px;
+}
+
+.main-nav-item, .main-nav-item:visited {
+    border-right: 1px solid #EF7149;
+    border-bottom: 0;
+    border-top: 0;
+    color: #fff;
+    display: block;
+    float: left;
+    height: 70px;
+    line-height: 70px;
+    margin: 0px;
+    padding: 0 15px;
+    text-shadow: 1px 1px 1px #333;
+}
+
+.main-nav-item.current, .main-nav-item:hover, .main-nav-item:active, .main-nav-item:focus {
+    background: url(../images/mainnav.png) 0 0 repeat
+}
+
+#top-logo {
+    float: right;
+    margin: 5px 10px 5px 0px;
+    padding: 10px 10px 0px 0px;
+    width: 180px;
+}
+
+#page-related {
+    background-image: none;
+    margin: 0 auto;
+    padding: 0 10px 10px;
+    position: relative;
+    width: 960px;
+}
+
+#sub-nav-container {
+    height: 40px;
+    margin: 0 10px;
+    width: 940px;
+}
+
+ #sub-nav-container  /* progressive */ {
+     -webkit-border-bottom-left-radius: 8px;
+     -webkit-border-bottom-right-radius: 8px;
+     -moz-border-radius-bottomleft: 8px;
+     -moz-border-radius-bottomright: 8px;
+     -webkit-box-shadow: 0px 1px 1px #ccc;
+     -moz-box-shadow: 0 1px 1px #DFDFDF;
+ }
+
+#sub-nav {
+    float: left;
+    padding: 0px 10px;
+}
+
+.sub-nav-item {
+    margin: 5px 10px;
+    padding-right: 10px;
+}
+
+.sub-nav-item, .sub-nav-item:visited {
+    color: #333;
+    display: block;
+    float: left;
+    line-height: 40px;
+    margin: 0px;
+    padding: 0 15px;
+}
+
+.sub-nav-item.current, .sub-nav-item:hover, .sub-nav-item:active, .sub-nav-item:focus {
+    background-color: #efefef;
+    color: #DD4814;
+}
+
+#pop-up-container {
+    float: left;
+    padding: 10px;
+}
+
+#pop-up-text {
+    float: left
+}
+
+#login-container {
+    float: left;
+    width: 620px;
+}
+
+table.basic {
+    width:542px;
+    text-align:left;
+    padding:0 8px;
+    margin:20px auto;
+}
+
+table.basic.wide {
+    width:100%;
+}
+
+table.basic td, table.basic th {
+    padding:4px 8px;
+}
+
+#searchbox-container {
+    float: right;
+    margin: 0px 10px 5px 0px;
+    padding: 0 0 0 10px;
+    width: auto;
+}
+
+/* Form Layout */
+form {
+    width: 542px;
+    margin: 0 auto;
+}
+
+form ul.errorlist { 
+    display: inline-block;
+    line-height: 1em;
+    vertical-align: top;
+}
+
+form .error {
+    width: 184px; /* 224 - 30 */
+    height: 20px;
+    display: inline-block;
+    padding-left: 30px;
+    line-height: 1em;
+    vertical-align: top;
+    padding-top: 4px;
+}
+
+form .help {
+    position: absolute;
+    z-index: 10;
+    right: 16px;
+    width: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 4px;
+}
+
+label.inline {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+legend {
+    width: 100%;
+    position: relative;
+    padding: 8px;
+    margin: 0 -8px;
+}
+
+legend span.supporting {
+    position: absolute;
+    right: 8px;
+}
+
+fieldset {
+    position: relative;
+    margin-bottom: 16px;
+    padding: 8px;
+}
+
+input[type="text"], input[type="password"], select, textarea {
+    width: 286px;
+    height: 20px;
+    margin-right: 16px;
+    margin-bottom: 8px;
+}
+
+textarea, select[multiple="multiple"] {
+    min-width: 286px;
+    max-width: 286px;
+    min-height: 20px;
+    height: 100px;
+}
+
+input[type="checkbox"], input[type="radio"] {
+    margin-top: 0px;
+    margin-bottom: 8px;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+    width: 284px;
+    height: 18px;
+}
+
+input[type="text"].small, input[type="password"].small, select.small {
+    width: 134px;
+}
+
+input[type="text"].small:focus, input[type="password"].small:focus, select.small:focus {
+    width: 132px;
+}
+
+input[type="submit"] {
+    padding: 10px 8px;
+}
+/* END Form Layout */
+
+.showcase-item {
+    float: left;
+    margin: 5px 10px;
+    padding: 10px;
+    width: 280px;
+}
+
+.showcase-heading {
+    margin: 5px 0px 10px;
+    width: 280px;
+}
+
+.showcase-subheading {
+    margin: 5px 0px 10px;
+    width: 280px;
+}
+
+.showcase-text {
+    margin: 5px 0px 10px;
+    width: 280px;
+}
+
+.showcase-figure {
+    float: left;
+    margin: 5px 10px;
+    padding: 10px;
+    position: relative;
+    width: 600px;
+}
+
+.showcase-img {
+    display: block;
+    margin: 0px;
+    padding: 0px;
+    position: relative;
+    width: 600px;
+}
+
+.showcase-caption {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    margin: 0px 10px 10px;
+    padding: 10px;
+    width: 580px;
+}
+
+#showcase-nav {
+    clear: both;
+    margin: 5px 10px;
+    padding: 0px 10px;
+    width: 920px;
+}
+
+ #showcase-nav /* progressive */ {
+     -webkit-border-radius: 8px;
+     -moz-border-radius: 8px;
+     -moz-box-shadow: 0px 1px 1px  #dfdfdf;
+     -webkit-box-shadow: 0px 1px 1px #ccc;
+ }
+
+.showcase-nav-item {
+    padding-right: 10px
+}
+
+.showcase-nav-item, .showcase-nav-item:visited {
+    color: #333;
+    display: block;
+    float: left;
+    line-height: 40px;
+    margin: 0 1px;
+    padding: 0 15px;
+}
+
+.showcase-nav-item:hover, .showcase-nav-item:active, .showcase-nav-item:focus {
+    border: 1px solid #ddd;
+    border-top: 0px solid;
+    border-bottom: 0px solid;
+    background-color: #efefef;
+    color: #DD4814;
+    margin: 0;
+}
+
+.main-content {
+    clear: both;
+    float: left;
+    margin: 5px 10px;
+    padding: 10px;
+    width: 920px;
+}
+
+.minor-content {
+    float: left;
+    margin: 5px 10px;
+    padding: 10px;
+    width: 440px;
+}
+
+.side-content {
+    float: left;
+    margin: 5px 10px;
+    padding: 10px;
+    width: 280px;
+}
+
+.sub-content {
+    float: left;
+    margin: 5px 10px;
+    padding: 10px;
+    width: 120px;
+}
+
+p {
+    padding: 5px 0px 10px
+}
+
+.divide {
+    border: 0px solid;
+    clear: both;
+    font-size: 0px;
+    height: 1px;
+    margin: -1px 0px 0px;
+}
+
+.divide-showcase {
+    border: 0px solid;
+    clear: both;
+    font-size: 0px;
+    height: 1px;
+    margin: -1px 0px 25px;
+}
+
+#blog-posts {
+    float: left;
+    margin: 5px 10px;
+    padding: 10px;
+    width: 600px;
+}
+
+.blog-post {
+    clear: both;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+}
+
+.post-figure {
+    float: right;
+    margin: 10px 0px 10px 10px;
+    padding: 0px;
+    position: relative;
+    width: 260px;
+}
+
+.post-img {
+    display: block;
+    margin: 0px;
+    padding: 0px;
+    position: relative;
+    width: 260px;
+}
+
+.post-img-caption {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    padding: 10px;
+    width: 240px;
+}
+
+.comments-count {
+    clear: both;
+    display: block;
+    font-style: italic;
+    color: #999;
+    text-align: right;
+}
+
+#blog-aside {
+    float: left;
+    margin: 5px 10px;
+    padding: 0px;
+    width: 300px;
+}
+
+.widgets-aside {
+    float: left;
+    margin: 5px 0px 15px;
+    padding: 10px;
+    width: 280px;
+}
+
+ .widgets-aside /* progressive */ {
+     -webkit-border-radius: 8px;
+     -moz-border-radius: 8px;
+     -moz-box-shadow: 0px 1px 1px  #dfdfdf;
+     -webkit-box-shadow: 0px 1px 1px #ccc;
+ }
+
+.pagination {
+    clear: both;
+    text-align: center;
+}
+
+.footer-content {
+    float: left;
+    margin: 5px 10px;
+    padding: 10px;
+    width: 120px;
+}
+
+ .footer-content dd {
+     margin-bottom: 15px
+ }
+
+.foot-note {
+    clear: both;
+    margin: 15px 10px 0px;
+    padding: 10px;
+    width: 920px;
+}
+
+.plugin {
+    margin: 0 -10px;
+    padding: 0px;
+    width: 980px;
+}
+
+/*-  Decoration
+-------------------------------------------------------------------------------------------------------- */
+
+body {
+    background: url("../images/dotted.png") repeat scroll 0 0 #FFFFFF;
+    color: #333333;
+}
+
+#top-nav { 
+    background-color:#ffffff; 
+}
+
+.top-nav-item, .top-nav-item:visited { 
+    color:#333333; 
+}
+
+.top-nav-item:hover { 
+    text-decoration: underline; 
+}
+
+.top-login-item { 
+    color:#dd4814; 
+}
+
+.top-login-item:hover { 
+    text-decoration: underline; 
+}
+
+#page-header {
+    background: url("../images/header.png") repeat-x scroll 0 0 #DD4814;
+    height: 70px;
+}
+
+ #page-header .container {
+     background: url("../images/header.png") repeat-x scroll 0 0 #DD4814
+ }
+
+#top-logo {
+    color: #fff;
+    line-height: 1.5em;
+    text-align: right;
+}
+
+#the-logo {
+    background: url("http://www.ubuntu.com/sites/default/themes/ubuntu10/logo.png");
+    width: 118px;
+    height: 27px;
+    display: block;
+    clear: both;
+    float: right
+}
+
+#loco {
+    clear: both;
+    display: block;
+    float: right;
+    color: #fff;
+}
+
+#main-nav {
+    border-left: 1px solid #EF7149;
+    z-index: 10;
+}
+
+#page-related {
+    background-color: #FFFFFF
+}
+
+#sub-nav-container {
+    background-color: #F7F7F7;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+#pop-up-text {
+    font-weight: bold;
+    line-height: 20px;
+    padding: 0px 5px;
+}
+
+.login-label {
+    height: 16px;
+    margin: 7px 0px 7px 9px;
+    padding: 3px;
+}
+
+#username, #password {
+    background-color: #f0f0f0;
+    border: 1px solid #CCCCCC;
+    height: 16px;
+    margin: 7px 0px 7px 9px;
+    padding: 3px;
+    width: 110px;
+}
+
+#login {
+    background-color: #f0f0f0;
+    border: 1px solid #CCCCCC;
+    height: 24px;
+    margin: 7px 9px 7px 7px;
+    padding: 2px;
+}
+
+#login:hover {
+    background-color: #f7f7f7;
+    border: 1px solid #DD4814;
+}
+
+#join:hover, #join:active, #join:focus {
+    color: #DD4814;
+    text-shadow: 1px 1px 2px #999;
+}
+
+#join, #join:visited {
+    color: #333
+}
+
+/* Form decoration */
+form ul {
+    list-style-type: none;
+}
+
+form .error {
+    background-image: url('../images/error.png');
+    background-repeat: no-repeat;
+}
+
+form .help {
+    background-image: url('../images/help.png');
+    background-repeat: no-repeat;
+}
+
+form .smalltext {
+    color: #333333;
+}
+
+label {
+    color: #333333;
+}
+
+label.required:after {
+    color: #DD4814;
+    content: " *";
+}
+
+legend {
+    background-color: #aea79f;
+    color: #ffffff;
+}
+
+legend span.supporting {
+    color: #ffffff;
+}
+
+legend span.supporting:before {
+    color: #DD4814;
+    content: "* ";
+}
+
+fieldset {
+    background-color: #dfdcd9;
+}
+
+input[type="text"], input[type="password"], select, textarea {
+    color: #333333;
+    border: 1px solid #ccc1c1;
+    background-color: white;
+}
+
+input[type="submit"][disabled="disabled"], input[type="submit"][disabled="disabled"]:hover { 
+    background-color:#AEA79F;
+    text-shadow: none;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+    border: 2px solid #dd4814;
+    color: #333333;
+}
+
+select:focus {
+    border: 2px solid #dd4814;
+    color: #333333;
+}
+
+input[type="text"].error, input[type="password"].error, select.error {
+    border: 2px solid #dd4814;
+    color: #dd4814;
+}
+
+input[type="submit"] {
+    border-radius: 4px;
+    background: #dd4814 url('../images/gradient.png') repeat-x;
+    color: #ffffff;
+    border: none;
+    text-shadow: black 0px 1px 2px;
+}
+
+input[type="submit"]:hover {
+    background-color: #b83a0f;
+}
+
+input[type="submit"]:active {
+    background-color: #962d0c;
+}
+/* END Form decoration */
+
+
+FORM.search_form INPUT, #searchbox {
+    background-color: #f0f0f0;
+    border: 1px solid #CCCCCC;
+    height: 16px;
+    margin: 7px 0px 7px 9px;
+    padding: 3px;
+    width: 180px;
+}
+
+FORM.search_form INPUT, #searchbox:focus {
+    background-color: #f7f7f7;
+    border: 1px solid #DD4814;
+}
+
+#go-search {
+    background-color: #f0f0f0;
+    border: 1px solid #CCCCCC;
+    height: 24px;
+    margin: 7px 9px 7px 0px;
+    padding: 2px;
+}
+
+#go-search:hover {
+    background-color: #f7f7f7;
+    border: 1px solid #DD4814;
+}
+
+#more-search:hover, #more-search:active, #more-search:focus {
+    background-color: #f7f7f7;
+    border: 1px solid #DD4814;
+    color: #DD4814;
+    text-shadow: 1px 1px 2px #999;
+}
+
+#more-search, #more-search:visited {
+    background-color: #f0f0f0;
+    border: 1px solid #CCCCCC;
+    color: #333;
+    height: 16px;
+    margin: 7px 7px 7px 0px;
+    padding: 1px 3px;
+}
+
+table.basic thead { 
+    background-color:#aea79f;
+}
+
+table.basic tfoot, table.basic tr.subsection {
+    background-color:#dfdcd9;
+}
+
+table.basic tbody tr {
+    border-bottom:1px dotted #cccccc;
+}
+
+table.basic thead th {
+    color:#ffffff;
+}
+
+table.basic tfoot td, table.basic tbody td {
+    color:#333333;
+}
+
+table.basic thead a {
+    color:#ffffff;
+}
+
+table.basic tfoot a {
+    color:#333333;
+}
+
+table.basic tbody a {
+    color:#dd4814;
+}
+
+.showcase-caption {
+    background-color: #000;
+    background-color: rgba(0,0,0,0.4);
+    color: #fff;
+}
+
+#showcase-nav {
+    background-color: #f7f7f7;
+    border-radius: 8px;
+    box-shadow: 0px 1px 1px  #dfdfdf;
+    height: 40px;
+}
+
+#main-section .container {
+    background-color: #fff;
+    background-image: none;
+    padding: 0px 10px 10px;
+    position: relative;
+    width: 960px;
+}
+
+.alone, .leading, .aggregator {
+    background-color: #f7f7f7;
+    border-radius: 8px;
+    box-shadow: 0px 1px 1px  #dfdfdf;
+    float: left;
+}
+
+ .alone, .leading, .aggregator /* progressive */ {
+     -webkit-border-radius: 8px;
+     -moz-border-radius: 8px;
+     -moz-box-shadow: 0px 1px 1px  #dfdfdf;
+     -webkit-box-shadow: 0px 1px 1px #ccc;
+ }
+
+ .aggregator .first {
+     margin-left: 0px
+ }
+
+ .aggregator .last {
+     margin-right: 0px
+ }
+
+.aggregator {
+    margin: 5px 10px
+}
+
+.post-header {
+    border-bottom: 1px dotted #333333;
+    margin-bottom: 10px;
+    padding-bottom: 5px;
+}
+
+.post-meta {
+    color: #999;
+    font-size: 0.85em;
+    font-style: italic;
+}
+
+.post-title-link:hover, .post-title-link:active, .post-title-link:focus {
+    color: #DD4814;
+    text-shadow: 1px 1px 2px #999;
+}
+
+.post-title-link, .post-title-link:visited {
+    color: #333
+}
+
+.post-img-caption {
+    background-color: #000;
+    background-color: rgba(0,0,0,0.4);
+    color: #fff;
+}
+
+.pagination {
+    border-top: 1px solid #333;
+    color: #fff;
+    margin-top: 15px;
+    padding-top: 15px;
+}
+
+.pagination-item {
+    border-bottom: 1px solid #333;
+    color: #333;
+    margin-right: 5px;
+    padding: 2px 6px;
+}
+
+.pagination-item:hover {
+    border-bottom: 1px solid #DD4814;
+    background-color: #f7f7f7;
+    color: #DD4814;
+}
+
+.pagination-item.current {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #333;
+    color: #333;
+    font-weight: bold;
+}
+
+.widgets-aside {
+    background-color: #f7f7f7;
+    border-radius: 8px;
+    box-shadow: 0px 1px 1px  #dfdfdf;
+}
+
+.widget-links {
+    list-style: none
+}
+
+.a-item {
+    display: block;
+    margin-top: 3px;
+}
+
+.side-link:hover, .side-link:active, .side-link:focus {
+    background-color: #fff;
+    border-right: 3px solid #DD4814;
+    color: #DD4814;
+    text-decoration: none;
+}
+
+.side-link, .side-link:visited {
+    color: #333333;
+    display: block;
+    padding-right: 3px;
+}
+
+#login-widget {
+    text-align: center
+}
+
+#page-footer {
+    background: url("../images/footer.png") repeat-x scroll 0 0 #EEECEA
+}
+
+ #page-footer .container {
+     background: url("../images/footer.png") repeat-x scroll 0 0 #EEECEA;
+     padding: 0px 10px;
+     width: 960px;
+ }
+
+  #page-footer .container div.copyright {
+      font-size: 10px;
+      line-height: 14px;
+      color: #aea79f;
+  }
+
+.footer-links {
+    list-style: none
+}
+
+.footer-item {
+    border-bottom: 1px dotted #333;
+    display: block;
+    margin-top: 3px;
+}
+
+.foot-note {
+    color: #999;
+    font-style: italic;
+}
+
+.footer-link:hover, .footer-link:active, .footer-link:focus {
+    color: #DD4814;
+    text-decoration: underline;
+}
+
+.footer-link, .footer-link:visited {
+    color: #333333
+}
+
+.footer-link-main:hover, .footer-link-main:active, .footer-link-main:focus {
+    color: #DD4814;
+    text-decoration: underline;
+}
+
+.footer-link-main, .footer-link-main:visited {
+
+}
+
+/*-  Forum Decoration [Demo]
+-------------------------------------------------------------------------------------------------------- */
+
+.forum-title {
+    background-color: #efefef;
+    margin: 10px 0px;
+    padding: 20px;
+}
+
+.forum-item {
+    border-top: 1px dotted #999
+}
+
+.cat-title, .sub-sections {
+    font-size: 0.75em;
+    /* 16x0.75  =12 */
+}
+
+.latest, .post-count {
+    font-size: 0.75em;
+    /* 16x0.75  =12 */  line-height: 1.2em;
+}
+
+.cat-title, .post-count, .latest {
+    padding: 10px;
+    vertical-align: middle;
+}
+
+.forum-title-link:hover, .forum-title-link:active, .forum-title-link:focus {
+    color: #DD4814;
+    text-shadow: 1px 1px 2px #999;
+}
+
+.forum-title-link, .forum-title-link:visited {
+    color: #333
+}
+
+.status {
+    background-color: #efefef;
+    padding: 10px 5px;
+    vertical-align: middle;
+    width: 30px;
+}
+
+.latest {
+    width: 180px
+}
+
+.post-count {
+    width: 120px
+}
+
+.sub-sections {
+    background-color: #efefef;
+    padding: 5px 10px 10px;
+}
+
+.post-count {
+    background-color: #efefef
+}
+
+.count {
+    display: block;
+    font-style: italic;
+}
+
+/* KuZeKo [e-mail]
+-------------------------------------------------------------------------------------------------------- */

=== added file 'themes/ubuntu/static/newstyle.css'
--- themes/ubuntu/static/newstyle.css	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/static/newstyle.css	2011-07-22 14:59:30 +0000
@@ -0,0 +1,592 @@
+/*
+ * newstyle.css
+ *
+ * Base style for the LoCo Directory. This is an implementation
+ * of the ( at the time of this writing ) new Ubuntu branding.
+ *
+ *  Author: Michael Hall      ( mhall119 )
+ *  Author: Paul Tagliamonte ( paultag  )
+ */
+
+h1.centered {
+    text-align: center;
+}
+
+a {
+    color:      #DD4814;
+}
+
+a:visited {
+    color:      #b12a10;
+}
+
+th.form-item-label {
+    vertical-align: top;
+}
+
+td.no-wrap {
+    white-space: nowrap;
+}
+
+/*
+label {
+    font-weight:    bold;
+    white-space:    nowrap;
+}
+*/
+
+.minor-content.venue-map {
+    min-height: 350px;
+    margin-top: 60px;
+}
+
+#main-content {
+    margin-right:   20px;
+}
+
+li.col_left {
+    float:          left;
+    width:          45%;
+    clear:          left;
+}
+
+li.col_right {
+    float:          right;
+    width:          45%;
+    clear:          right;
+}
+
+li.approved {
+    list-style-image: url(../img/approved.png);   /* Colorful Ubuntu Logo */
+}
+
+li.unapproved {
+    list-style-image: url(../img/unapproved.png); /* Grey Ubuntu Logo */
+}
+
+ol.agenda-list, .agenda-list ol, .agenda-list li {
+    padding: 2px 10px !important;
+}
+
+.relative {
+    position: relative;
+}
+
+br.clear {
+    clear:          left;
+}
+
+#main-content .object-detail {
+    -moz-border-radius:    15px;
+    -webkit-border-radius: 15px;
+
+    border:         2px solid #ccc;
+    border-bottom:  4px solid #bbb;
+    border-right:   4px solid #bbb;
+    border-top:     2px solid #ddd;
+    min-height:     500px;
+    text-align:     left;
+}
+
+#main-content .object-detail #options-left ul {
+    position:       relative;
+    left:           -60px;
+}
+
+#main-content .object-detail #options-right ul {
+    position:       relative;
+}
+
+#main-content .object-detail #options-left li {
+    float:          left;
+    margin-left:    5px;
+    display:        inline;
+}
+
+#main-content .object-detail #options-right li {
+    float:          right;
+    margin-right:   5px;
+    text-align:     right;
+    display:        inline;
+}
+    
+#main-content .object-detail .option {
+    width:           32px;
+    height:          32px;
+    display:         block;
+    text-decoration: none;
+}
+
+#main-content .object-detail a.goback {
+    background: transparent url('../img/goback.png')    no-repeat scroll top right;
+}
+
+#main-content .object-detail a.edit {
+    background: transparent url('../img/edit.png')      no-repeat scroll top right;
+}
+
+#main-content .object-detail a.delete {
+    background: transparent url('../img/delete.png')    no-repeat scroll top right;
+}
+
+#main-content .object-detail a.add-team-event {
+    background: transparent url('../img/new_event.png') no-repeat scroll top right;
+}
+
+#main-content .object-detail a.add-comment {
+    background: transparent url('../img/comment.png')   no-repeat scroll top right;
+}
+
+.resource {
+    width:           32px;
+    height:          32px;
+    padding:         2px;
+    margin-top:      4px;
+    margin-bottom:   3px;
+    float:           left;
+    border:          1px white solid;
+}
+
+#main-content .resource:hover {
+    border:          1px #eee solid;
+}
+
+#page-footer .container div.copyright {
+    font-size:       0.75em;  
+    line-height:     1.5em;
+}
+
+#page-footer .container div.loggedin {
+    font-size:       0.75em;  
+    line-height:     1.5em;
+    float:           left;
+    width:           400px;
+    margin-bottom:   10px;
+    margin-top:      5px;
+}
+
+#page-footer .container div.lang_switcher {
+    font-size:       0.75em;  
+    line-height:     1.5em;
+    float:           right; 
+    margin-bottom:   10px;
+    margin-top:      5px;
+    margin-right:    14px;
+}
+
+.team-event-nav {
+    border-bottom:   1px gray solid;
+    list-style:      none;
+    padding:         1px 0px 1px 5px;
+    margin:          5px 0px 5px 0px;
+}
+
+.team-event-nav li {
+    list-style:      none;
+    margin:          -1px 2px 0px 3px;
+    padding:         0px;
+    display:         inline; 
+}
+
+.message .content-shim {
+    margin:                      0px; /* buffer the bulb in */
+    padding:                     5px; /* un-suck the text */
+    background-repeat:           no-repeat;
+    background-image:            url(../img/infobox-icon.png);
+    padding-left:                30px; /* infobox icon is 22x22 */
+}
+
+.message {
+    width:                       70%;
+    margin-left:                 auto;
+    margin-right:                auto;
+    background-color:            #FFFFB6;
+    border-radius:               0px;
+    box-shadow:                  0px 1px 1px #FFE4B6;
+}
+
+.message { /* noncss 3. XXX: remove me in 20 years. */
+    -webkit-border-radius:       8px;
+    -moz-border-radius:          8px;
+    -moz-box-shadow:             0px 0px 1px #FFE4B6;
+    -webkit-box-shadow:          0px 0px 1px #FFE4B6;
+}
+
+/* UI Errors ( To yell at the user when they don't fill out a form ) */
+
+/*
+ul.errorlist {
+    margin:           0px;
+    padding:          0px;
+}
+
+.errorlist li {
+    color:            red;
+    font-weight:      bold;
+    display:          block;
+    font-size:        1.1em;
+    margin:           0px 0px 3px;
+    padding:          4px 5px;
+}
+*/
+
+
+/* Flickr Feed for Global Event */
+
+.thumbs {
+    margin:          0px;
+    padding:         0px;
+    overflow:        hidden;
+}
+
+.thumbs li {
+    list-style:         none;
+    float:              left;
+    margin:             5px;
+    padding:            3px;
+    background:         #eee;
+    -moz-box-shadow:    0px 0px 4px #444;
+    -webkit-box-shadow: 0px 0px 2px #000;
+}
+
+.thumbs li a     { }
+.thumbs li img   { display: block; }
+.thumbs li a img { border: none;}
+
+aside#top-nav {
+    width:           980px;
+}
+
+header#page-header {
+    width:           960px;
+    margin:          0px auto;
+    padding:         0px 10px;
+    position:        relative;
+}
+
+footer#page-footer {
+    width:           960px;
+    margin:          0px auto;
+    padding:         0px 10px;
+    position:        relative;
+}
+
+#page-footer div.container { width: 940px; }
+
+
+
+/*#venue-list ul,*/
+.venue-list{
+    overflow:auto;
+}
+
+
+.venue-list h3 {
+    color: #333;
+    padding: 10px 0px 10px 10px;
+    background: white url(/ubuntu-website/media/images/dotted.png) repeat scroll 0px 0px;
+    margin-bottom: 0;
+}
+
+.venue-list ul {
+    display: block;
+    float: left;
+    list-style-image: none;
+    list-style-type: none;
+    padding: 4px 0px 5px 5px;
+    text-indent: 0px;
+    width: 915px;
+    background-color:#F7F7F7;
+}
+
+.venue-list ul li {
+    list-style-image: none;
+    list-style-type: none;
+    text-indent: 0px;
+    width: 200px;
+    margin-right: 22px;
+    margin-bottom: 5px;
+    padding-left: 5px;
+    float: left;
+    font-size:12px;
+}
+
+.venue-list ul li h3{
+    padding: 0px;
+    background:#f7f6f5;
+    margin: 0px;
+    color: #333;
+    padding: 4px 0px;
+}
+
+
+.venue-list ul li p{
+    font-size: 12px;
+    line-height: 16px;
+    margin: 0px;
+    padding: 0px;
+}
+
+.venue-list ul li p a{
+   border-bottom: 1px dotted #333;
+   clear: both;
+   display: block;
+   float: none;
+   padding: 5px 0px 3px;
+}
+
+#site_search_form {
+    width: auto;
+}
+#site_search_form input#id_q {
+    background-color: #F0F0F0;
+    border: 1px solid #CCCCCC;
+    height: 16px;
+    margin: 7px 0 7px 9px;
+    padding: 3px;
+    width: 180px;
+}
+
+form[name="lang-switcher"] {
+    width: auto;
+}
+
+select[name="lang"] {
+    background: auto;
+    border: auto;
+    width: auto;
+    height: auto;
+    font-size: 1em;
+    margin: 0;
+}
+
+/* TODO: date_begin and date_end should have class .small */
+#id_date_begin_0, #id_date_begin_1, #id_date_end_0, #id_date_end_1 {
+    width: 134px;
+}
+#id_date_begin_0:focus, #id_date_begin_1:focus, #id_date_end_0:focus, #id_date_end_1:focus {
+    width: 132px;
+}
+/*
+.form {
+	width: 500px;
+        float:left;
+}
+
+.form div{
+        padding-top:2px;
+        padding-bottom:2px;
+}
+
+.form div span.help{
+        font-size:20px;
+        color: #DD4814;
+	cursor:pointer;
+	vertical-align: top;
+	display:inline;
+
+}
+
+.form input[type="text"], .form textarea, .form select {
+	padding: 5px;
+	width: 200px;
+	margin: 0px 0px 5px 0px;
+	border: 1px solid #ccc;
+}
+
+.form input[type="text"] {
+	margin-right: 10px;
+}
+
+.form input[type="checkbox"] {
+	width: 200px;
+	height:35px;
+	margin: 0px 0px 5px 0px;
+}
+
+.form div div.field {
+        float: left;
+	padding-top: 5px;
+}
+
+.form div.approved, .form div.approved_date, .form div.expires_date {
+        height:30px;
+}
+
+.form span.extra {
+        float: left;
+	padding-top: 5px;
+	font-size:0.8em;
+}
+
+.form div div.field label{
+	float: left;
+	padding-right: 10px;
+	width: 170px;
+	font-size: 0.8em;
+	text-align: right;
+        font-weight:normal;
+}
+
+.form div span.required { 	
+        font-size:20px;
+	color: red;
+	margin-left:5px;
+	vertical-align: top;
+	display:inline;
+}
+
+.form textarea {
+	height: 90px;
+	width: 270px;
+}
+
+
+.form select:focus, .form textarea:focus, .form input:focus {
+	border: 1px solid #900;
+}
+
+.form input.submit-button {
+	padding-left: 20px;
+	padding-right: 20px;
+	float: right;
+	margin-right: 50px;
+}
+
+.form ul.errorlist {
+	margin: 0px;
+	padding: 0px;
+}
+
+.form .errorlist li {
+	color: red;
+	font-weight: bold;
+	display: block;
+	font-size: 0.8em;
+	margin: 0px 130px 3px;
+	padding: 4px 5px;
+}
+*/
+
+.attendee-cell {
+	padding-top:10px;
+}
+
+.attendee-mugshot {
+	vertical-align: middle;
+}
+
+.agenda-list {
+    list-style-type: decimal;
+}
+
+.agenda-list .agenda-list {
+    margin-left: 20px;
+    list-style-type: lower-alpha;
+}
+
+.agenda-list .agenda-list .agenda-list {
+    list-style-type: lower-roman;
+}
+
+.agenda-list .agenda-list .agenda-list .agenda-list {
+    list-style-type: circle;
+}
+
+.agenda-title {
+    font-weight: bold;
+}
+
+.agenda-description {
+    margin-left: 30px;
+    font-size: 0.9em;
+}
+
+#webchat {
+    display: none;
+    width: 900px;
+    margin: 0 auto;
+}
+
+#ircchat {
+    display: block;
+    width: 900px;
+    margin: 0 auto;
+}
+
+#locobranding {
+    width: 96px; 
+    height: 96px; 
+    position: absolute; 
+    right: 10px;
+}
+
+/* My Teams style */
+h2.dynamic-width { 
+    display: inline-block; 
+    margin-bottom: 0; 
+}
+
+.resources { 
+    font-size: 0.75em; 
+    float: right; 
+    margin-top: 21px;
+}
+
+.resources a {
+    margin-left: 8px;
+}
+
+.photo a {
+    display: inline-block; 
+    padding: 7px;
+}
+
+.photo img {
+    width: 75px;
+}
+
+.main-content-split {
+    width:450px; 
+    margin-top: 15px;
+}
+
+.main-content-split.left {
+    float: left;
+}
+
+.main-content-split.right {
+    float: right;
+}
+
+.main-content-split.left .title {
+    font-size: 0.875em;
+}
+
+.main-content-split.left .new {
+    float: right;
+    font-size: 0.75em;
+}
+
+.event-summary {
+    margin-top:15px;
+}
+
+hr.no-top {
+    margin: 0 0;
+}
+
+img.bottom {
+    vertical-align: bottom;
+}
+
+ul.indent {
+    list-style: none;
+    background-color: #F7F7F7;
+    padding: 2px 2px 2px 15px;
+}
+
+ul.indent li {
+    line-height:1.2em;
+    margin: 0.5em 0;
+}

=== added file 'themes/ubuntu/theme.conf'
--- themes/ubuntu/theme.conf	1970-01-01 00:00:00 +0000
+++ themes/ubuntu/theme.conf	2011-07-22 14:59:30 +0000
@@ -0,0 +1,9 @@
+[theme]
+inherit = basic
+stylesheet = default.css
+pygments_style = none
+
+[options]
+rightsidebar = false
+stickysidebar = false
+externalrefs = false