Merge lp:~sinzui/launchpad/css-rip-0 into lp:launchpad

[Curtis Hovey]

This is my branch to move common styles to the 3.0 CSS.
Don't panic. only 357 lines moved to the new file. The file is reorgainised.
Read style-3-0.css.in after the merge. I think you will agree that it is
much easier to read.

    lp:~sinzui/launchpad/css-rip-0
    Diff size: 3366, (moved 357 lines, reformatted everything)
    Test command: submitted to http://jigsaw.w3.org/css-validator/validator
    Pre-implementation: mars, noodles755
    Target release: 10.04

Move universal styles to the 3.0 CSS
-------------------------------------

Move the basic and common class selectors to the 3.0 CSS. and organise the
file so that it is intelligible.

Rules
-----

    * Move universal selectors to the 3.0 CSS
    * Use consistent formatting for CSS and comment.
    * Reoragnise the CSS into sections that will group similar selectors.
      This allows us to see similar selector. It encourages fixing the
      current rules instead of writing new ones. This also makes it easy
      to find similar and duplicate rules.
    * Remove unused CSS:
      .offscreen
    * Run the updates through http://jigsaw.w3.org/css-validator/validator.
      to identify duplicate rules.
      Combined:
        .narrow-listing with .narrow
      Removed duplicate CSS
        ul.language, li.language
      Used numeric grey because CSS warns that the term is not universal.
    * Note we have two rules for curved borders that are defined in many
      places We should try to define these rules once to minimise validator
      complaints and ensure we really only have two rules.

QA
--

Watch Edge and for issues.

Lint
----

http://jigsaw.w3.org/css-validator/validator.for CSS 3 did the real linting.

Linting changed files:
  lib/canonical/launchpad/icing/style-3-0.css.in
  lib/canonical/launchpad/icing/style.css

Test
----

I ran the changes through http://jigsaw.w3.org/css-validator/validator. It
helped me to find duplicate rules.

[Michael Nelson (michael.nelson)]

Wow, that's an excellent improvement... it's definitely much easier to understand the categories. Hopefully any fallout that we see on Edge from this change will only lead to further improvements in the style-sheet.

{{{
16:29 < sinzui> noodles775, I have an awesome (and I mean that in the historical context) branch that updates CSS. I hope you can find time to review it
16:29 < noodles775> sinzui: great!
16:47 < noodles775> sinzui: In your MP text, you mention removing the duplicate css for ul/li.language, but afaics MP diff just shows those as moved?
16:48 < noodles775> Wow... the re-org. looks excellent.
16:48 < sinzui> noodles775, it was defined twice!
16:50 < noodles775> sinzui: but on your MP, I can see it added (from a move) on lines 340ff, removed on lines 1578ff, ah, right, then removed again at 3228. OK.
16:52 < sinzui> noodles775, I really hope that future additions/changes to the css will be easier with this reorganisation. I lost my evening to an obsessive need to understand all the rules we are using
16:52 < noodles775> sinzui: I think it definitely will... and yes, looking at the organisation I can see why it took an evening!
}}}

review: Approve (code)

=== modified file 'lib/canonical/launchpad/icing/style-3-0.css.in'
--- lib/canonical/launchpad/icing/style-3-0.css.in	2010-04-20 07:03:41 +0000
+++ lib/canonical/launchpad/icing/style-3-0.css.in	2010-04-24 14:37:26 +0000
@@ -1,4 +1,56 @@
-/* Page layout */
+/* A brief introduction to this stylesheet
+   or how not to kill kittens.
+
+   1. This is a global style sheet. Add styles that can be used by all
+      launchpad. Rules for just an application or a page do not belong
+      in this file.
+   2. Do not use IDs because they discourage reuse.
+   3. This style sheet depends on YUI-Font;
+      Only use these font percentages.
+      Pixels  Percent
+      10      77
+      11      85
+      12      93
+      13      100
+      14      108
+      15      116
+      16      123.1
+      17      131
+      18      138.5
+      19      146.5
+      20      153.9
+      21      161.6
+      22      167
+      23      174
+      24      182
+      25      189
+      26      197
+   4. Use these colors when defing using application colors.
+      * Launchpad-Gold: #F8C300
+      * Answers: #3840BE
+      * Blueprints: #3594BB
+      * Bugs: #9F2B33
+      * Code: #D18B39
+      * Translations: #BB3A84
+      * Registry: default (i.e. black)
+   5. Add rules to the appropriate section.
+      * Page layout
+      * Block
+      * Inline
+      * Block-lists
+      * Block-tables
+      * Forms
+      * Common presentations.
+      * Header, footer, side, help
+      * Colors
+      * Sprites
+      * Application or page specifc styles that do not belong in this file.
+*/
+
+/* =========================
+   Universal presentation
+   Page layout
+*/
 .yui-d0 {
     margin: 10px 20px;
     }
@@ -33,8 +85,7 @@
     }
 .footer .sitemessage {
     text-align: right;
-}
-
+    }
 .footer .colophon {
     margin: 3em 3em 1em 3em;
     text-align: center;
@@ -62,84 +113,35 @@
     z-index: 10;
     width: 131%;
     }
-/* The content is already full width; the content should remain full width. */
 .full-page-width .full-page-width {
+    /* The content is already full width. */
     width: 100%;
     }
 .warning.message {
     margin-top: 17px;
     }
-/*
-
-Use percentages when setting font-size.
-
-Pixels  Percent
-10      77
-11      85
-12      93
-13      100
-14      108
-15      116
-16      123.1
-17      131
-18      138.5
-19      146.5
-20      153.9
-21      161.6
-22      167
-23      174
-24      182
-25      189
-26      197
-
-*/
-
-/*
-
-Use the following 'application' colors for table column headings,
-app stats etc.
-
-Launchpad-Gold: #F8C300
-Answers: #3840BE
-Blueprints: #3594BB
-Bugs: #9F2B33
-Code: #D18B39
-Registry: default (i.e. black)
-Translations: #BB3A84
-
-*/
-
-strong.answers-stat {
-    color: #3840BE;
-    }
-strong.blueprints-stat {
-    color: #3594BB;
-    }
-strong.bugs-stat {
-    color: #9F2B33;
-    }
-strong.code-stat {
-    color: #D18B39;
-    }
-strong.registry-stat {
-    }
-strong.translations-stat {
-    color: #BB3A84;
-    }
-.launchpad-gold {
-    color: #F8C300;
-    }
-
-
-/* Default text presentation */
+
+
+/* =========================
+   Universal presentation
+   Block elements.
+*/
 html, body {
-    font-family: bitstream vera sans, dejavu sans, verdana, sans-serif;
+    font-family: "dejavu sans", "bitstream vera sans", verdana, sans-serif;
     font-size: 93%;
     }
 body.private {
     /* It must be obvious to the user that the context is private */
     background: url("/@@/private-y-bg") top left repeat-y;
     }
+* html body {
+    /* stops floats dropping in IE 5.5/6 */
+    word-wrap: break-word;
+    }
+h1, h2, h3, h4, h5, h6 {
+    background: none;
+    clear: left;
+    }
 h1 {
     clear: none;
     padding-top: 6px; /* An offset from the logo. */
@@ -158,64 +160,795 @@
     width: auto;
     margin-bottom: 0.8em;
     }
-p, li, dt, dd, blockquote, .narrow {
-    max-width: 45em; /* Wrap the text before the eye gets lost. */
+p, li, dt, dd, blockquote, .narrow, .narrow-listing {
+    /* Wrap the text before the eye gets lost. */
+    max-width: 45em;
     }
 pre, code, samp, tt, .console {
-  font-size: 116%;
-  margin-bottom: 0.8em;
+    font-size: 116%;
+    margin-bottom: 0.8em;
+    }
+pre.wrap {
+    /* From nice_pre in tales.py */
+    white-space: -moz-pre-wrap;
+    white-space: -o-pre-wrap;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    }
+div.left, div.right {
+    width: 50%;
+    }
+div.left, .cves{
+    clear: both;
+    float: left;
+    }
+div.right {
+    clear: right;
+    float: right;
+    }
+div.three.column.middle {
+    margin-right: 1%;
+    }
+div.three.column.left, div.three.column.middle, div.three.column.right {
+    clear: none;
+    float: left;
+    width: 33%;
+    }
+div.three.column.left, div.three.column.right {
+    margin: 0;
+    }
+hr {
+    display: none;
+    }
+
+
+/* =========================
+   Universal presentation
+   Inline elements.
+*/
+a {
+    outline: none;
+    }
+:link, :visited {
+    /* Links are blue, brighter when clicked, and greyer once visited. */
+    color: #03a;
+    text-decoration: none;
+    }
+:link:hover, :visited:hover {
+    text-decoration: underline;
+    }
+:link:active, :visited:active {
+    color: #36c;
+    }
+a[onclick], .collapsible legend a, a.js-action,
+a[onclick]:active, .collapsible legend a:active, a.js-action,
+a.js-action:active {
+    /* Links that don't open separate pages are green. */
+    color: #093;
+    }
+a.help {
+    border-bottom: 1px dotted #03a;
+    cursor: help;
+    }
+a.help:hover, a.help:hover {
+    text-decoration: none;
+    }
+img, a img {
+    /* No border on images that are links. */
+    border: none;
+    }
+abbr[title], acronym[title] {
+    border-bottom: 1px dotted black; cursor: help;
+    }
+em {
+    font-style: italic;
+    }
+strong {
+    font-weight: bold;
+    }
+strong em {
+    font-style: normal;
+    color: #353535;
+    }
+.title {
+    font-weight: bold;
+    }
+kbd {
+    background-color: #ddd;
+    border: 1px solid;
+    border-color: white gray gray white;
+    color: black;
+    margin: 1px;
+    min-width: 1em;
+    outline: 1px #666;
+    }
+
+/* =========================
+   Universal presentation
+   Block-list elements.
+*/
+dt {
+    margin-bottom: .3em;
+    margin-top: 0.5em;
+    font-weight: bold;
+    }
+dt dfn {
+    font-weight: bold;
+    }
+dd {
+    margin-bottom: .8em;
+    }
+dl.faq dt {
+    font-weight: bold;
+    }
+dl.faq dd {
+    margin: 1em 0 2em 4em;
+    }
+.contributors dt strong {
+    padding-left: 1em;
     }
 ol {
-       margin-left: 1.8em;
+   margin-left: 1.8em;
     }
 ol li {
-       list-style: decimal outside;
-       }
+   list-style: decimal outside;
+   }
 li {
     padding-bottom: .3em;
     }
-dt {
-    margin-bottom: .3em;
-    margin-top: 0.5em;
-    }
-dd {
-    margin-bottom: .8em;
-}
+ul.news, li.news {
+    list-style-type: none;
+    margin-bottom: 1em;
+    }
+ul.architecture, li.architecture {
+    list-style-image: url(/@@/architecture);
+    }
+ul.build-success, li.build-success {
+    list-style-image: url(/@@/build-success);
+    }
+ul.bug.remote, li.bug.remote {
+    list-style-image: url(/@@/bug-remote);
+    }
+ul.language, li.language {
+    list-style-image: url(/@@/language);
+    /* Disable .language sprite. */
+    background: inherit;
+    }
+ul.mail, li.mail {
+    list-style-image: url(/@@/mail);
+    }
+ul.meeting, li.meeting {
+    list-style-image: url(/@@/meeting);
+    }
+ul.rss, li.rss  {
+    list-style-image: url(/@@/rss);
+    }
+ul.translation, li.translation {
+    list-style-image: url(/@@/translation);
+    }
+ul.webref, li.webref {
+    list-style-image: url(/@@/link);
+    }
+ul.iconed {
+    list-style-type: none;
+    padding-left: 0 !important;
+    margin: 0 !important;
+    }
+ul.buttons {
+    /* without !important, gets overridden by the '#maincontent ol' rule */
+    margin: 0.5em 0 0.5em 0 !important;
+    padding: 0 !important;
+    }
+ul.buttons li {
+    display: inline; margin: 0 0 0 0;
+    }
+ul.cross-reference {
+    font-size: 123.1%;
+    }
+.bulleted {
+    margin-bottom: 0.5em;
+    }
+.bulleted li {
+    margin: 0 0 0 2em;
+    list-style-type: disc;
+    }
+.horizontal {
+    margin: 1em 0 0 0;
+    }
+.horizontal li {
+    display: inline;
+    padding: 0 1.5em 0 0;
+    }
+.subordinate {
+    margin-left: 2em;
+    }
+ol.subordinate {
+    margin-left: 4em;
+    }
+.two-column-list dl {
+    width: 48%;
+    float: left;
+    display: inline;
+    margin: 0 0.25em 0.75em 0;
+    }
+.three-column-list dl {
+    width: 31%;
+    float: left;
+    display: inline;
+    margin: 0 0.25em 0.75em 0;
+    }
+.two-column-list li {
+    width: 48%;
+    float: left;
+    display: inline;
+    margin: 0 0.25em 0 0;
+    }
+.three-column-list li {
+    width: 31%;
+    float: left;
+    display: inline;
+    margin: 0 0.25em 0 0;
+    }
+.two-column-list:after,
+.three-column-list:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+    }
+.two-column-list dl.unseen,
+.two-column-list li.unseen,
+.three-column-list dl.unseen,
+.three-column-list li.unseen {
+    /* Keep the abilty to hide list entries. */
+    display: none;
+    }
+.portlet dd {
+    margin-bottom: 0.5em;
+    font-size: 85%;
+    color: #484848;
+    }
+.portlet dl strong {
+    color: #000;
+    font-weight: normal;
+    }
+.related {
+    /* Lists that link to related content. */
+    margin-top: 4em;
+    border-top: 1px solid #cbcbcb; /* matches color of mainarea_* images */
+    padding-top: 1em;
+    }
+.related ul {
+    list-style: none;
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+    text-indent: 0.5em;
+    }
+.related ul.sourcepackage-links li.sourcepackage-not-dev-focus:before {
+    content: "";
+    display: inline-block;
+    width: 1.5em;
+    }
+.related ul.sourcepackage-links li.sourcepackage-dev-focus:before {
+    content: "⇒ ";
+    display: inline-block;
+    width: 1.5em;
+    }
+.related ul li:before {
+    content: "\00BB \0020";
+    }
+.gridflow {
+    /* A list that positions the items in a grid (like a table). */
+    margin: 0.0em;
+    padding: 0.0em;
+    }
+.gridflow ul {
+    margin: 0.5em 0.0em 0.5em 0.0em;
+    padding: 0.5em 0.0em 0.0em 0.0em;
+    }
+.gridflow li {
+    display: inline;
+    margin: 0.0em;
+    padding: 0.2em;
+    }
+.gridflow li span {
+    display: table-cell;
+    display: inline-table;
+    display: inline-block;
+    width: 192px;
+    text-align: center;
+    vertical-align: middle;
+    padding: 1em 1em 1em 0;
+    }
+
+
+/* =========================
+   Universal presentation
+   Block-table elements.
+*/
+caption {
+    caption-side: bottom;
+    text-align: left;
+    }
 th {
     text-align: right;
     }
+th, td {
+    vertical-align: baseline;
+    }
 thead th, tr.thead th {
     text-align: center;
     vertical-align: bottom;
     }
-
+th.icon, td.icon {
+    vertical-align: top;
+    white-space: nowrap;
+    width: 1px;
+    }
+th.icon.left, td.icon.left {
+    padding-right: 0;
+    }
+th.icon.right, td.icon.right {
+    padding-left: 0;
+    }
+th.nowrap, td.nowrap {
+    white-space: nowrap;
+    }
+tfoot th, table.contributions th {
+    text-align: left;
+    }
+tr.white {
+    background-color: #fff;
+    }
+tr.shaded {
+    background-color: #f6f6f6;
+    }
+table .amount {
+    text-align: right;
+    }
+table.contributions th {
+    font-weight: normal;
+    }
+table.contributions td {
+    vertical-align: middle;
+    width: 16px;
+    text-align: left;
+    }
+table.latest th, table.latest td {
+    padding-bottom: 2em;
+    }
+table.duplicate.listing * {
+    color: #999;
+    }
+.table-actions:nth-child(2) {
+    /* text-align only works here because the <li> also has the
+       style display:inline.
+    */
+    text-align: right;
+    }
+.table-actions {
+    margin: 1em 0 0 0;
+    }
+.table-actions li {
+    display: inline;
+    padding: 0 1.5em 0 0;
+    }
+table.compressed {
+    width: auto;
+    }
+table.compressed td {
+    padding: 0.25em 0.5em;
+    }
+table.cozy-listing {
+    width: 20em;
+    background-color: #fff;
+    border: 1px solid #d2d2d2;
+    border-bottom: 1px solid #d2d2d2;
+    }
+table.cozy-listing td {
+    border: 1px #d2d2d2;
+    border-style: dotted none none none;
+    }
+table.sortable a.sortheader {
+    color:#666666;
+    font-weight: bold;
+    text-decoration: none;
+    display: block;
+    }
+table.sortable img.sortarrow {
+    padding-left: 2px;
+    }
+th.ascending {
+    background-image: url(/@@/arrowDown);
+    background-position: center right;
+    background-repeat: no-repeat;
+    }
+th.descending {
+    background-image: url(/@@/arrowUp);
+    background-position: center right;
+    background-repeat: no-repeat;
+    }
+.sortkey, .revsortkey {
+    /* Used to indicate a value to be used to sort cells in a row */
+    display: none;
+    }
+table.listing {
+    margin: 0; width: 100%; font-size: 93%;
+    }
+table.listing, table.listing tbody, table.listing td.end-of-section {
+    border-bottom: 1px solid #d2d2d2;
+    }
+table.listing th {
+    font-weight: bold;
+    }
+table.listing thead, table.listing thead th, table.listing tfoot tr,
+table.listing tr.thead th {
+    border: 1px solid #d2d2d2;
+    background-color: #fff;
+    }
+table.listing tr.category {
+    border-bottom: 1px solid #d2d2d2;
+    }
+table.listing tr.category th, table.listing tr.category td {
+    padding-top: 1em;
+    }
+table.listing thead td,
+table.listing table tbody, table.listing table thead,
+table.listing table thead th, table.listing tfoot tr,
+table.listing table tfoot td, table.listing table td {
+    border: none;
+    }
+table.listing tfoot td {
+    border: 1px solid #d2d2d2;
+    }
+table.listing tr.note {
+    font-size: 77%;
+    }
+table.listing th, table.listing td {
+    padding: 0.25em;
+    }
+table.listing table th, table.listing table td {
+    /* We don't want extra padding on nested tables, like batch navigation. */
+    padding: 0;
+    }
+table.listing thead th, table.listing tr.thead th {
+    font-size: 108%; white-space: nowrap;
+    }
+table.listing td {
+    border: 1px #d2d2d2; border-style: dotted none none none;
+    }
+table.listing tr.note td {
+    border-style: none;
+    }
+table.listing img {
+    vertical-align: middle;
+    }
+table.listing tr.secondary th, table.listing tr.secondary td {
+    border-top: none;
+    }
+table.listing table.simple {
+    margin-left: 2em;
+    }
+table.listing table.simple td {
+    padding: 0.25em;
+    }
+table.listing .section-heading {
+    font-size: 108%;
+    border: none;
+    padding-top: 1.5em;
+    }
+table.summary th, table.summary td,
+table.listing table.summary th, table.listing table.summary td {
+    /* Summary tables present information with subdued headers and a little
+       row spacing. */
+    padding: 0 0.5em 0.5em 0;
+    }
+table.summary th {
+    color: #555;
+    font-weight: normal;
+    }
+table.summary caption {
+    font-style: italic; margin-left: 1em;
+    }
+table.summary ul, table.summary ul li {
+    list-style-position: inside;
+    margin: 0;
+    padding: 0;
+    }
+.batch-navigation-links .next {
+    /* Next links have icons: */
+    background: center right no-repeat;
+    padding-right: 14px;
+    }
+.batch-navigation-links .next {
+    background-image: url(/@@/arrowRight);
+    }
+.batch-navigation-links .next.inactive {
+    background-image: url(/@@/arrowRight-inactive);
+    }
+.batch-navigation-links .inactive {
+    color: #999ea7;
+    }
+.batch-navigation-links .previous, .batch-navigation-links .next,
+.batch-navigation-links .last {
+    /* And all the links have spacing between them: */
+    margin-left: 0.25em;
+    }
+.batch-navigation-links .first, .batch-navigation-links .previous,
+.batch-navigation-links .next {
+    margin-right: 0.25em;
+    }
+
+
+/* =========================
+   Universal presentation
+   Form elements.
+*/
 form {
     margin-bottom: 1em;
-}
+    }
 form h1 {
     margin-bottom: 1em;
     }
-
 form table th, form table td {
     padding: 2px;
     }
 form table tbody th {
     font-weight: bold;
     }
+form table label {
+    font-weight: bold;
+    }
+fieldset {
+    border-width: 2px 0 0;
+    margin: 1em 0;
+    padding: 1em 0 0;
+    }
+label {
+    white-space: nowrap;
+    }
 input[type='image'] {
     vertical-align: middle;
     }
-em {
-    font-style: italic;
-    }
-strong {
-    font-weight: bold;
-    }
-
-.unseen {display: none;}
-
-
-/* Common presentations */
+input {
+    visibility:inherit;
+    }
+input[type=radio] {
+    margin-left: 1em;
+    }
+input.urlTextType {
+    width: 40em;
+    }
+textarea {
+    display: block;
+    width: 90%;
+    max-width: 60em;
+    }
+button {
+    padding:0;
+    }
+.fieldRequired, .fieldOptional {
+    color: #999;
+    }
+.formHelp {
+    margin: 0.2em 0 0.5em 0.2em;
+    color: #777;
+    }
+.listbox {
+    /* a scrolling list of checkboxes or radio buttons */
+    border: 1px solid #8cacbb;
+    display: inline-block;
+    max-height: 12em;
+    overflow: auto;
+    overflow: -moz-scrollbars-vertical;
+    }
+.listbox label {
+    background-color: #f6f6f6;
+    border: solid white;
+    border-width: 0 0 1px 0;
+    display: block;
+    }
+.actions * {
+    /*
+      Action links are those that begin the process of doing something.
+      For example, "Register a branch", "Edit profile", "Link to CVE".
+      When presented inline, they are rendered by launchpad-inline-link.pt.
+
+      Action buttons are those that submit a multi-row form.
+      Often an action button will have an "or _Cancel_" link next to it.
+
+      We want 0.5em horizontal gap between links and buttons in these
+      sections. Using margin-left would cause a bad gap to the left of a
+      leftmost item. Using margin-right would cause a bad gap to the right of
+      a rightmost item. We could fix these problems with :first-child/:last-
+      child, but not in IE. So we do something a little tricky. We go ahead
+      and give each child of the actions container a right margin:
+    */
+    margin-right: 0.5em;
+    }
+.actions * * {
+    /* because ">" doesn't work in IE6 */
+    margin-right: 0;
+    }
+.actions {
+    /* Then in addition to the top/bottom margins of the actions container,
+       we give it a *negative* right margin, cancelling out that of the last
+       child. */
+    margin: 1em -0.5em 1em 0;
+    }
+table.radio-button-widget tr td {
+    /* Opera doesn't use the general tr above for the radio button table */
+    vertical-align: top;
+    }
+table.listing div.field>table {
+    /* Hack to add breathing room to bug status forms: */
+    margin-top: 0.5em;
+    }
+table.listing div.field>label,
+table.listing div.field>div>label,
+table.listing div.actions {
+    display: block; margin-top: 1em;
+    }
+table.form, table.extra-options {
+    /* Many forms are laid out using tables, with appropriate spacing: */
+    /* http://launchpad.dev/firefox/+edit */
+    margin: 1em 0;
+    width: 100%;
+    }
+table.form th {
+    font-weight: normal;
+    }
+table.form th, table.form td,
+table.form table.extra-options td,
+table.form table.extra-options th {
+    padding-bottom: 1em;
+    }
+table.form td td {
+    padding-bottom: 0;
+    }
+.long td {
+    /* Long forms are composed of multiple tables and visible fieldsets */
+    padding-right: 1em;
+    }
+.long fieldset {
+    margin-top: 1em;
+    }
+.long legend {
+    color: #666;
+    font-weight: bold;
+    font-size: 123.1%;
+    }
+fieldset.collapsible {
+    /* Collapsible sections
+       Some page sections are hidden by default, expanded by clicking a link.
+       see launchpad.js:activateCollapsibles() */
+    border: none;
+    margin: 0;
+    padding: 16px 0 0; /* "Add a comment/attachment" form in bug reports */
+    }
+fieldset .collapsed {
+    display: none;
+    }
+fieldset .expanded {
+    display: block;
+    }
+fieldset.collapsible legend {
+    font-weight: normal;
+    }
+.collapsible legend a, .collapsible legend a:hover {
+    text-decoration: none;
+    }
+img.collapseIcon {
+    text-decoration: none; vertical-align: middle;
+    }
+.collapsible legend a span {
+    text-decoration: underline;
+    }
+.collapsed {
+    border: none; margin-bottom: 0;
+    }
+h1 .edit {
+    font-size: 50%;
+    position: relative;
+    top: -3px;
+    margin-left: 0.5em;
+    }
+.yui-ieditor {
+    padding-right: 288px;
+    }
+.lazr-multiline-edit .yui-ieditor {
+    padding-right: 0;
+    }
+.lazr-multiline-edit textarea {
+    max-width: inherit;
+    }
+.lazr-multiline-edit .yui-ieditor-input {
+    padding-right: 5px !important;
+    }
+.widget-hd.js-action {
+    /* The js-action class is also used for non-links, for example, with
+       expand/collapse sections. */
+    color: #093;
+    cursor:pointer
+    }
+.widget-hd.js-action:hover {
+    text-decoration: underline;
+    }
+.error.message, .warning.message, .informational.message {
+    border: solid #666;
+    border-width: 1px 2px 2px 1px;
+    color: black;
+    margin: 0 auto 10px auto;
+    padding: 0 10px 10px 20px;
+    width: 30em;
+    }
+.error.message::before, .warning.message::before,
+.informational.message::before {
+    /* The alerts are preceded with an icon overlaying the top left corner: */
+    display: block; margin: -15px 0 -6px -35px;
+    }
+.error {
+    /* Error messages are pink, with alerts having an error icon: */
+    background: #ffe4e4;
+    }
+.error.message::before {
+    content: url(/@@/error-large);
+    }
+.warning {
+    /* Warning messages are orange, with alerts having a warning icon: */
+    background: #fff59c;
+    }
+.warning.message::before {
+    content: url(/@@/warning-large);
+    }
+.informational {
+    /* Informational messages are blue-to-grey, alerts have an info icon. */
+
+    background: #d4e8ff url(/+icing/blue-fade-to-grey);
+    }
+.informational.message::before {
+    content: url(/@@/info-large);
+    }
+.debugging {
+    /* Debugging messages are white on grey, alerts have an info icon. */
+    background: #666; color: white;
+    }
+.debugging.message::before {
+    content: url(/@@/info-large);
+    }
+.error .message {
+    /* And inside, the error message itself uses a smaller icon. */
+    background: url(/@@/error) center left no-repeat;
+    margin-bottom: 0.25em;
+    padding-left: 18px;
+    }
+table.form .error {
+    /* Form errors override this background color, because the lack of space
+       between the edge of fields and the edge of the color would look bad. */
+    background: none;
+    }
+.inline-warning {
+    /* Warning messages inlined in the page. */
+    color: red;
+    font-weight: bold;
+    }
+.sml-informational {
+    background: #d4e8ff url('/+icing/blue-fade-to-grey');
+    border: solid #666;
+    border-width: 1px 2px 2px 1px;
+    color: black;
+    padding: 5px 5px 5px 5px;
+    width:44em;
+    }
+.sml-informational::before {
+    content: url('/@@/info');
+    }
+
+/* =========================
+   Common presentations
+   These appear to be 3.0 specific.
+*/
 div.see-all {
     font-size: 123.1%; /* Same as a h2 */
     text-align:right;
@@ -232,6 +965,16 @@
     font-size: 72%;
     text-decoration: underline;
     }
+.unseen {
+    display: none;
+    }
+.invisible-link {
+    display:none;
+    }
+.invisible {
+    left:-9999em;
+    display:block;
+    }
 .rss-right {
     background: url(/@@/rss.png) right center no-repeat;
     }
@@ -250,6 +993,15 @@
     clear: both;
     font-size: 100%;
     }
+.application-summary {
+    font-size: 123.1%;
+    }
+.search-results {
+    margin-top: 1em;
+    }
+p.search-results {
+    font-size: 116%;
+    }
 .top-portlet .summary {
     margin: 0 0 1em 0;
     font-size: 138.5%;
@@ -257,179 +1009,147 @@
 .main-portlet {
     margin: 1em 0 1em 0;
     }
-
-/* Common list presentations. */
-.bulleted {
-    margin-bottom: 0.5em;
-    }
-.bulleted li {
-    margin: 0 0 0 2em;
-    list-style-type: disc;
-    }
-.horizontal {
-    margin: 1em 0 0 0;
-    }
-.horizontal li {
-    display: inline;
-    padding: 0 1.5em 0 0;
-    }
 .pre {
     white-space: pre;
     }
-.table-actions:nth-child(2) {
-    /* text-align only works here because the <li> also has the
-       style display:inline.
-    */
-    text-align: right;
-    }
-.table-actions {
-    margin: 1em 0 0 0;
-    }
-.table-actions li {
-    display: inline;
-    padding: 0 1.5em 0 0;
-    }
-.subordinate {
-    margin-left: 2em;
-    }
-ol.subordinate {
-    margin-left: 4em;
-    }
-.two-column-list dl {
-    width: 48%;
-    float: left;
-    display: inline;
-    margin: 0 0.25em 0.75em 0;
-    }
-.three-column-list dl {
-    width: 31%;
-    float: left;
-    display: inline;
-    margin: 0 0.25em 0.75em 0;
-    }
-.two-column-list li {
-    width: 48%;
-    float: left;
-    display: inline;
-    margin: 0 0.25em 0 0;
-    }
-.three-column-list li {
-    width: 31%;
-    float: left;
-    display: inline;
-    margin: 0 0.25em 0 0;
-    }
-/* Keep the abilty to hide list entries. */
-.two-column-list dl.unseen,
-.two-column-list li.unseen,
-.three-column-list dl.unseen,
-.three-column-list li.unseen {
-    display: none;
-    }
-.two-column-list:after,
-.three-column-list:after {
+.clearfix:after {
+    /* use class="clearfix" whenever floats should be enclosed */
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
-}
-dt {
-    font-weight: bold;
-    }
-.portlet dd {
-    margin-bottom: 0.5em;
-    font-size: 85%;
-    color: #484848;
-    }
-.portlet dl strong {
-    color: #000;
-    font-weight: normal;
-    }
-.application-summary {
-    font-size: 123.1%;
-}
-.search-results {
-    margin-top: 1em;
-}
-p.search-results {
-    font-size: 116%;
-}
-
-
-/* Exceptions they may be common. */
-.contributors dt strong {
-    padding-left: 1em;
-    }
-
-/* == Watermark heading styles */
+    }
+* html .clearfix {
+    /* Work around float bug in MSIE */
+    height: 1%;
+    }
+
+
+/* =========================
+   Universal
+   Header
+*/
+.demo {
+    background-color: #fee;
+    }
+#locationbar {
+    /* The following style works around the fact that the locationbar, which
+    is only used of the Login/Register links in 3.0 UI, is accessible on
+    "locationless" pages. It adds extra space at the top of every page in
+    Launchpad but that does actually look quite good ... ;-).*/
+    height: 1em;
+    }
 div.watermark-apps-portlet {
     padding-bottom:1em;
-}
+    }
 div.watermark-apps-portlet img {
     float: left;
     margin: 0 1.5em 0 0;
-}
+    }
 div.watermark-apps-portlet h1, div.watermark-apps-portlet h2 {
     padding-top: 0.1em;
     margin-bottom: 0.8em;
     color: #000000;
     font-weight: bold;
     clear: none;
-}
+    }
 div.watermark-apps-portlet h1 {
     margin-bottom: 0.2em;
     padding-top: 0;
-}
-
-/* === Application buttons === */
-/* In most pages, we present a list of six application buttons: */
+    }
+div.watermark-apps-portlet span img {
+    float: none;
+    margin: 0;
+    }
 .watermark-apps-portlet li {
     display:inline;
     list-style-type: none;
-}
+    }
 .watermark-apps-portlet li a, .watermark-apps-portlet li span {
     padding: 0.3em 0.5em;
     margin-right: 0.4em;
-}
-/* The text of the first tab should align with the heading directly
-   above it */
-.watermark-apps-portlet li:first-child a, .watermark-apps-portlet li:first-child span {
+    }
+.watermark-apps-portlet li:first-child a,
+.watermark-apps-portlet li:first-child span {
+    /* The text of the first tab should align with the heading directly
+       above it */
     margin-left: -0.5em;
-}
+    }
 .watermark-apps-portlet li a:link, .watermark-apps-portlet li a:visited {
     color: #000;
     background-color: #fff;
     text-decoration: none;
-}
+    }
 .watermark-apps-portlet li.active a, .watermark-apps-portlet li.active span {
     font-weight: bold;
     color: #fff;
     background-color: #747474;
-}
+    }
 .watermark-apps-portlet li a:hover {
     color: #000;
     background-color: #f3f3f3;
-}
+    }
 .watermark-apps-portlet li.disabled-tab {
     color: #747474;
-}
-
-/* Facet menu, a.k.a. application tabs */
+    }
 .facetmenu {
+    /* Facet menu, a.k.a. application tabs */
     width: 100%;
     white-space: nowrap;
-}
-/* Registering slot */
+    }
 .registering {
+    /* Registered slot */
     float: right;
     font-size: 85%;
     color: #666;
     position: relative;
     top: 2em;
-}
-
-/* Side content exceptions */
+    }
+.breadcrumbs {
+    margin-left: 0;
+    list-style-type: none;
+    clear: both;
+    margin-bottom: 2em;
+    font-size: 77%;
+    }
+.breadcrumbs li {
+    display:inline;
+    padding: 0;
+    }
+.breadcrumbs li a {
+    color: #494949;
+    }
+.breadcrumbs li:after {
+    content: "\00BB \0020"
+    }
+.breadcrumbs li:last-child {
+    /* The following leaves a small margin in chrome/webkit, but using none
+       doesn't hide the » in webkit either (both work for FF3.5). */
+    font-weight: bold;
+    }
+.breadcrumbs li:last-child:after {
+    content: '';
+    }
+#logincontrol {
+    /* Top right of the page is a link to log in or a button to log out: */
+    float: right;
+    }
+#logincontrol img {
+    /* align the image with the text */
+    margin-bottom: -2px;
+    }
+#logincontrol input[type='submit'] {
+    /* The button lacks the right margin that buttons usually have: */
+    font-size: 77%;
+    margin-right: 0;
+    }
+
+
+/* =========================
+   Universal
+   Side portlets
+*/
 .side {
     padding: 0.5em;
     color: #484848;
@@ -450,7 +1170,10 @@
     color: #484848;
     background: #fbfbfb;
     }
-
+#privacy.private {
+      background: url(/@@/private-bg) top left repeat-x; /* 8px high */
+      padding-top: 12px; /* = 8px + the usual 4px top padding */
+    }
 .downloads li {
     margin: 0;
     padding: 2px 0 0;
@@ -490,15 +1213,12 @@
 .downloads .alternate {
     padding: 0 0 0 1em;
     }
-
 ul.super-add-action {
     margin: 0 auto 1em;
-}
-
+    }
 ul.super-add-action li {
     padding: 0;
-}
-
+    }
 ul.super-add-action li a {
     display: block;
     border: 1px solid black;
@@ -514,7 +1234,6 @@
     font-weight: bold;
     text-decoration: underline;
     }
-
 .involvement li {
     border-top: 1px solid #d0d0d0;
     padding: 0;
@@ -562,7 +1281,6 @@
     text-decoration: none;
     background-color: #eee;
     }
-
 .announcements li {
     margin-bottom: 0.5em;
     }
@@ -581,556 +1299,111 @@
     margin-top: -2px;
     }
 
-/* For the Latest updates portlet
- * at https://launchpad.dev/~cprov/+archive/ppa */
-ul.latest-ppa-updates .duration, ul.latest-ppa-updates .build-details {
-    font-size: 75%;
-}
-ul.latest-ppa-updates li {
-    padding: 3px;
-    background-repeat: no-repeat;
-    background-position:right center;
-}
-table#packages_list tr.superseded {
-    background-color: #eee;
-}
-/* The following could be generalised for use to the following selector:
- * .side .portlet li.nth-child(odd)
- * if needed. */
-ul.latest-ppa-updates li:nth-child(odd) {
-    border-top: 1px solid #dedede;
-    border-bottom: 1px solid #dedede;
-    background-color: #eeeeff;
-}
-ul.latest-ppa-updates li.FULLYBUILT {
-    background-image: url('/@@/yes');
-}
-ul.latest-ppa-updates li.FULLYBUILT_PENDING {
-    background-image: url('/@@/build-success-publishing');
-}
-ul.latest-ppa-updates li.NEEDSBUILD {
-    background-image: url('/@@/build-needed');
-}
-ul.latest-ppa-updates li.FAILEDTOBUILD {
-    background-image: url('/@@/build-failed');
-}
-ul.latest-ppa-updates li.BUILDING {
-    background-image: url('/@@/processing');
-}
-/* From nice_pre in tales.py */
-pre.wrap {
-  white-space: -moz-pre-wrap;
-  white-space: -o-pre-wrap;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-/* ==== Listing tables ==== */
-
-table.listing th {
-    font-weight: bold;
-}
-table.listing {margin: 0; width: 100%; font-size: 93%;}
-table.listing, table.listing tbody, table.listing td.end-of-section {
-    border-bottom: 1px solid #d2d2d2;}
-table.listing thead, table.listing thead th, table.listing tfoot tr,
-table.listing tr.thead th {
-    border: 1px solid #d2d2d2;
-    background-color: #fff;
-}
-table.listing tr.category {border-bottom: 1px solid #d2d2d2;}
-table.listing tr.category th, table.listing tr.category td {padding-top: 1em;}
-table.listing tfoot td {border: 1px solid #d2d2d2;}
-table.listing thead td {border: none;}
-tr.white {background-color: #fff;}
-tr.shaded {background-color: #f6f6f6;}
-table.listing tr.note {font-size: 77%;}
-.amount {text-align: right;}
-table.listing th, table.listing td {padding: 0.25em;}
-/* We don't want extra padding on nested tables, such as batch navigation. */
-table.listing table th, table.listing table td {padding: 0;}
-table.listing thead th, table.listing tr.thead th {
-    font-size: 108%; white-space: nowrap;}
-table.listing td {border: 1px #d2d2d2; border-style: dotted none none none;}
-table.listing tr.note td {border-style: none;}
-table.listing img {vertical-align: middle;}
-table.listing tr.secondary th, table.listing tr.secondary td {border-top: none;}
-table.listing table tbody, table.listing table thead,
-table.listing table thead th, table.listing tfoot tr,
-table.listing table tfoot td, table.listing table td {
-    border: none;
-}
-table.listing table.simple {margin-left: 2em;}
-table.listing table.simple td {padding: 0.25em;}
-table.listing .section-heading {
-  font-size: 108%;
-  border: none;
-  padding-top: 1.5em;
-}
-table.compressed { width: auto }
-table.compressed td { padding: 0.25em 0.5em }
-table.narrow-listing {
-    width: 45em;
-}
-/* ~person/+karma */
-table.cozy-listing {
-    width: 20em;
-    background-color: #fff;
-    border: 1px solid #d2d2d2;
-    border-bottom: 1px solid #d2d2d2;
-}
-table.cozy-listing td {
-    border: 1px #d2d2d2;
-    border-style: dotted none none none;
-}
-
-
-/* ==== Summary tables ==== */
-
-/* Tables presenting summary information have subdued headers and a little
-row spacing: */
-table.summary th, table.summary td,
-table.listing table.summary th, table.listing table.summary td {
-  padding: 0 0.5em 0.5em 0;
-}
-table.summary th {color: #555; font-weight: normal;}
-table.summary caption {font-style: italic; margin-left: 1em;}
-table.summary ul, table.summary ul li {
-  list-style-position: inside;
-  margin: 0;
-  padding: 0;
-}
-
-/* === Collapsible sections === */
-/* Some page sections are hidden by default, expanded by clicking a link. */
-/* see launchpad.js:activateCollapsibles() */
-fieldset.collapsible {
-  border: none;
-  margin: 0;
-  padding: 16px 0 0; /* "Add a comment/attachment" form in bug reports */
-}
-.collapsible legend a, .collapsible legend a:hover {text-decoration: none;}
-img.collapseIcon {text-decoration: none; vertical-align: middle;}
-.collapsible legend a span {text-decoration: underline;}
-.collapsed {border: none; margin-bottom: 0;}
-fieldset .collapsed {display: none;}
-fieldset .expanded {display: block;}
-fieldset.collapsible legend {font-weight: normal;}
-
-
-/* --- Sortable tables --- */
-
-table.sortable a.sortheader {
-  color:#666666;
-  font-weight: bold;
-  text-decoration: none;
-  display: block;
-}
-table.sortable img.sortarrow {
-  padding-left: 2px;
-}
-th.ascending {
-  background-image: url(/@@/arrowDown);
-  background-position: center right;
-  background-repeat: no-repeat;
-}
-th.descending {
-  background-image: url(/@@/arrowUp);
-  background-position: center right;
-  background-repeat: no-repeat;
-}
-
-/* Used to indicate a value to be used to sort cells in a row */
-.sortkey, .revsortkey {display: none;}
-
-/* --- Action links and buttons --- */
-
-/*
-  Action links are those that begin the process of doing something.
-  For example, "Register a branch", "Edit profile", "Link to CVE".
-  When presented inline, they are rendered by launchpad-inline-link.pt.
-
-  Action buttons are those that submit a multi-row form.
-  Often an action button will have an "or _Cancel_" link next to it.
-
-  We want 0.5em horizontal gap between links and buttons in these sections.
-  Using margin-left would cause a bad gap to the left of a leftmost item.
-  Using margin-right would cause a bad gap to the right of a rightmost item.
-  We could fix these problems with :first-child/:last-child, but not in IE.
-  So we do something a little tricky.
-  We go ahead and give each child of the actions container a right margin:
-*/
-.actions * {margin-right: 0.5em;}
-.actions * * {margin-right: 0;} /* because ">" doesn't work in IE6 */
-/*
-  Then in addition to the top/bottom margins of the actions container, we
-  give it a *negative* right margin, cancelling out that of the last child.
-*/
-.actions {margin: 1em -0.5em 1em 0;}
-/*
-  Examples:
-  http://bugs.launchpad.dev/firefox/+bug/1 (after 'Affects' table)
-  http://bugs.launchpad.dev/firefox/+bug/1/+subscribe (bottom button)
-*/
-
-/* --- Batch navigation links --- */
-
-/* Next links have icons: */
-.batch-navigation-links .next {
-  background: center right no-repeat;
-  padding-right: 14px;
-}
-.batch-navigation-links .next {background-image: url(/@@/arrowRight);}
-.batch-navigation-links .next.inactive {
-  background-image: url(/@@/arrowRight-inactive);
-}
-.batch-navigation-links .inactive {color: #999ea7;}
-/* And all the links have spacing between them: */
-.batch-navigation-links .previous, .batch-navigation-links .next,
-.batch-navigation-links .last {
-  margin-left: 0.25em;
-}
-.batch-navigation-links .first, .batch-navigation-links .previous,
-.batch-navigation-links .next {
-  margin-right: 0.25em;
-}
-
-/* --- Other --- */
-
-/* No border on images that are links. */
-a img {
-  border: none;
-}
-/* No border on images that have link maps.
- * There's nothing special for this, as the image and map
- * may be separate.  So, just set no border for all images.
- */
-img {
-  border: none;
-}
-
-ul.language, li.language             {
-  list-style-image: url(/@@/language);
-  /* Disable .language sprite. */
-  background: inherit;
-}
-
-/* === Universal page layout === */
-
-/* === Location hierarchy === */
-ol.breadcrumbs {
-    margin-left: 0;
-    list-style-type: none;
-    clear: both;
-    margin-bottom: 2em;
-    font-size: 77%;
-}
-ol.breadcrumbs li {
-    display:inline;
-    padding: 0;
-}
-ol.breadcrumbs li a {
-    color: #494949;
-}
-ol.breadcrumbs li:after { content: "\00BB \0020" }
-/* The following leaves a small margin in chrome/webkit, but using none
- * doesn't hide the » in webkit either (both work for FF3.5).
- */
-ol.breadcrumbs li:last-child:after { content: ''; }
-ol.breadcrumbs li:last-child {
-    font-weight: bold;
-}
-
-/* === Login control === */
-/* At the top right of the page is a link to log in or a button to log out: */
-#logincontrol {
-    float: right;
-}
-
-/* push image a little bit down to make it line up better with the text */
-#logincontrol img {
-    margin-bottom: -2px;
-}
-/* The 'Log Out' button lacks the right margin that buttons usually have: */
-#logincontrol input[type='submit'] {
-  font-size: 77%;
-  margin-right: 0;
-}
-
-/* === Help pane === */
-/*
-Inline help is contained in a <div> and dynamically positioned by JavaScript.
-
-This should appear above all other content.  Needs to be
-above the Google Maps element on the profile pages, which
-has a z-index of 9999.  See bug #380349.
+
+/* =========================
+   Universal
+   Help pane
 */
 #help-pane {
-  position: absolute;
-  border: 1px solid black;
-  padding: 1px 1px 5px 10px;
-  z-index: 11000; /* Needs to be at least 9999.  See bug #380349. */
-  background-color: #fff;
-  width: 600px; /* based on the help wiki, should change later */
-}
-/* We want the hidden pane to have dimensions so that we can position the
-frame with them.  This works because the element an absolute position, taking
-it out of the page flow. */
+    /* Inline help is dynamically positioned by JavaScript.
+       This should appear above all other content.  Needs to be
+       above the Google Maps element on the profile pages, which
+       has a z-index of 9999.  See bug #380349. */
+    position: absolute;
+    border: 1px solid black;
+    padding: 1px 1px 5px 10px;
+    z-index: 11000;
+    background-color: #fff;
+    width: 600px; /* based on the help wiki, should change later */
+    }
 #help-pane.invisible {
+    /* We want the hidden pane to have dimensions so that we can position the
+       frame with them.  This works because the element an absolute position,
+       taking it out of the page flow. */
     position: absolute;
     visibility: hidden;
     display: block;
     left: 0px;
     top: 0px;
-}
-
+    }
 #help-body {
     background: url(/@@/spinner) no-repeat center center;
-}
-#help-pane iframe {width: 100%; height: 300px; border: 0;}
+    }
+#help-pane iframe {
+    width: 100%; height: 300px; border: 0;
+    }
 #help-pane iframe.invisible {
     visibility: hidden;
     display: block;
-}
+    }
 #help-footer {
-  padding: 3px;
-  border-top: 1px solid #ddd;
-  text-align: right;
-}
+    padding: 3px;
+    border-top: 1px solid #ddd;
+    text-align: right;
+    }
 #help-footer button {
-  margin-bottom: 10px;
-  margin-top: 3px;
-}
-
-span.help {font-weight: normal;}
-
-/* === Public/private status === */
-/* The first portlet on many pages discloses whether the object is private: */
-#privacy.private {
-  background: url(/@@/private-bg) top left repeat-x; /* 8px high */
-  padding-top: 12px; /* = 8px + the usual 4px top padding */
-}
-
-/* Some pages end with links to related items. */
-/* Examples: branch page, bug page. */
-.related {
-  margin-top: 4em;
-  border-top: 1px solid #cbcbcb; /* matches color of mainarea_* images */
-  padding-top: 1em;
-}
-.related ul {
-  list-style: none;
-  margin-left: 0 !important;
-  padding-left: 0 !important;
-  text-indent: 0.5em;
-}
-
-.related ul.sourcepackage-links li.sourcepackage-not-dev-focus:before {
-    content: "";
-    display: inline-block;
-    width: 1.5em;
-}
-.related ul.sourcepackage-links li.sourcepackage-dev-focus:before {
-    content: "⇒ ";
-    display: inline-block;
-    width: 1.5em;
-}
-
-.related ul li:before {content: "\00BB \0020";}
-
-
-
-/* ==== Translations styles ==== */
-
-.translationimportstatusAPPROVED,
-.translationimportstatusAPPROVED a {color: #050;}
-.translationimportstatusIMPORTED,
-.translationimportstatusIMPORTED a {color: green;}
-.translationimportstatusDELETED,
-.translationimportstatusDELETED a {color: black;}
-.translationimportstatusFAILED,
-.translationimportstatusFAILED a {color: red;}
-.translationimportstatusNEEDS_REVIEW,
-.translationimportstatusNEEDS_REVIEW a {color: #f60;}
-.translationimportstatusBLOCKED,
-.translationimportstatusBLOCKED a {color: blue;}
-.translationimportstatusNEEDS_INFORMATION,
-.translationimportstatusNEEDS_INFORMATION a {color: maroon;}
-
-/* ==== Translations hand-made forms ==== */
-
-form.translations div.fields {
-    padding: 1em;
-}
-
-form.translations div.actions {
-    padding: 1em;
-    text-align: left;
-    clear:both;
-}
-
-form.translations input {
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-}
-
-form.translations select {
-    margin-left: 0.5em;
-    padding-right: 0.5em;
-}
-
-form.translations label {
-    padding-left: 0.5em;
-    padding-right: 1em;
-}
-
-form.translations .listbox label {
-    padding: 2px 1em 2px 2px;
-}
-
-/* Provide top-alignment for radio boxes and longer explanations
- * without using tables.
- *
- * Examples:
- *   https://translations.launchpad.dev/evolution/trunk/+pots/evolution-2.2/es/+upload
- *   https://translations.launchpad.dev/evolution/trunk/+pots/evolution-2.2/+export
- */
-form.translations div.alignment .content {
-    float:left;
-}
-form.translations div.alignment .selector {
-    margin-right: 0.5em;
-    float: left;
-    clear: both;
-}
-form.translations div.alignment .content label {
-    padding: 0px;
-    margin: 0px;
-    font-weight: bold;
-}
-form.translations div.alignment .secondary label {
+    margin-bottom: 10px;
+    margin-top: 3px;
+    }
+span.help {
     font-weight: normal;
-    padding: 2px 1em 2px 2px;
-}
-
-/* Templates listing.
- *
- * Examples:
- *   https://translations.launchpad.dev/ubuntu/hoary/+templates
- *   https://translations.launchpad.dev/evolution/trunk/+templates
- */
-
-.inactive-template td {
-    background-color: #fee;
-    color: #855;
-}
-
-
-/* Translations statistics and legend.
- *
- * Examples:
- *   https://translations.launchpad.dev/ubuntu/hoary/+lang/es
- *   https://translations.launchpad.dev/evolution/trunk/+lang/es
- */
-
-div.translations-legend {
-    padding-top: 2em;
-    padding-bottom: 1em;
-}
-table.translation-stats td {
-    text-align:center;
-}
-table.translation-stats td.template-name {
-    text-align:left;
-}
-table.translation-stats tfoot td,
-table.translation-stats tfoot th {
-    background-color: #f7f7f7;
-    border: 0px;
-    border-top: 2px solid #d2d2d2;
-    border-bottom: 2px solid #d2d2d2;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    font-weight: bold;
-}
-table.translation-stats tfoot th {
-    text-align:left;
-}
-table.translation-stats tfoot td {
-    text-align:center;
-}
-
-/* Translations help links.
- *
- * Examples:
- *   https://translations.launchpad.dev/ubuntu/hoary/+source/evolution/+pots/evolution-2.2/
- *   https://translations.launchpad.dev/ubuntu/hoary/+source/evolution/+translations
- *   https://translations.launchpad.dev/ubuntu/hoary/
- *
- */
-div.translation-help-links a {
-  float: right;
-}
-div.translation-help-links div {
-  clear: both;
-}
-
-.gridflow {
-    margin: 0.0em;
-    padding: 0.0em;
-}
-.gridflow ul {
-    margin: 0.5em 0.0em 0.5em 0.0em;
-    padding: 0.5em 0.0em 0.0em 0.0em;
-}
-.gridflow li {
-    display: inline;
-    margin: 0.0em;
-    padding: 0.2em;
-}
-.gridflow li span {
-    display: table-cell;
-    display: inline-table;
-    display: inline-block;
-    width: 192px;
-    text-align: center;
-    vertical-align: middle;
-    padding: 1em 1em 1em 0;
-}
-
-/* Timeline Graph */
-div.yui-timelinegraph-content .yui-timelinegraph-zoom-box {
-  visibility: hidden;
-}
-
-div.yui-timelinegraph-content:hover .yui-timelinegraph-zoom-box {
-  visibility: visible;
-}
-
-.cves {float: right;}
-
-/* == Sprites == */
+    }
+
+
+/* =========================
+   Universal presentation
+   Colors
+*/
+.answers-stat {
+    color: #3840BE;
+    }
+.blueprints-stat {
+    color: #3594BB;
+    }
+.bugs-stat {
+    color: #9F2B33;
+    }
+.code-stat {
+    color: #D18B39;
+    }
+.translations-stat {
+    color: #BB3A84;
+    }
+.launchpad-gold {
+    color: #F8C300;
+    }
+.registry-stat {
+    }
+
+
+/* =========================
+   Universal presentation
+   Sprites
+*/
 .sprite {
     padding: 2px 0 5px 18px;
     line-height: 18px;
-}
+    }
+.sprite-after {
+    padding: 2px 18px 0 0;
+    }
 .icon-only {
     border: 0;
     padding: 0;
     width: 14px;
-}
+    }
 div.icon-only {
     height: 14px;
-}
+    }
 input[type="submit"].icon-only {
     height: 14px;
     background-color: inherit;
     cursor: pointer;
-}
+    }
 span.icon-only {
     padding-right: 14px;
     line-height: 14px;
-}
+    }
 .vertical .sprite {
     /* XXX: EdwinGrubbs 2009-10-29 bug=463032
        The reduced padding is only necessary to prevent parts of the
@@ -1141,571 +1414,845 @@
     display: inline-block;
     min-height: 16px;
     width: 90%;
-}
+    }
 .vertical .sprite:first-line {
     line-height: 12px;
-}
-
-/* XXX: mars 2009-11-22 bug=484848
-  Override the styling in the Bug Subscribers portlet.  Trying to display
-  as inline-block is of little use, as the maximum name width is 20 characters,
-  and we are unlikely to wrap the text. Not to mention that setting the display
-  in this way breaks the icons.
-*/
+    }
 body.tab-bugs #portlet-subscribers .sprite {
+    /* XXX: mars 2009-11-22 bug=484848
+      Override the styling in the Bug Subscribers portlet.  Trying to display
+      as inline-block is of little use, as the maximum name width is 20
+      characters, and we are unlikely to wrap the text. Not to mention that
+      setting the display in this way breaks the icons.
+    */
     display: inline;
-}
-
-.sprite-after {padding: 2px 18px 0 0;}
-
-/* XXX: EdwinGrubbs 2009-07-27 bug=405476
- * Override the .yui-picker-results style, so that the next icon
- * in the sprite file won't appear for tall list items.
- */
+    }
 .yui-picker-results li.sprite {
+    /* XXX: EdwinGrubbs 2009-07-27 bug=405476
+     * Override the .yui-picker-results style, so that the next icon
+     * in the sprite file won't appear for tall list items.
+     */
     padding:2px 0 0 18px;
-}
-
+    }
 .add {
     background-image: url(/@@/add.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .edit {
     background-image: url(/@@/edit.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .remove {
     background-image: url(/@@/remove.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .info {
     background-image: url(/@@/info.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .question {
     background-image: url(/@@/question.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .download-icon {
     background-image: url(/@@/download.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .download {
     background-image: url(/@@/download.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .search-icon {
     background-image: url(/@@/search.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .no {
     background-image: url(/@@/no.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .yes {
     background-image: url(/@@/yes.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .crowd {
     background-image: url(/@@/crowd.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .person {
     background-image: url(/@@/person.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .person-badge {
     background-image: url(/@@/person-badge.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .team {
     background-image: url(/@@/team.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .team-badge {
     background-image: url(/@@/team-badge.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .arrowRight {
     background-image: url(/@@/arrowRight.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .treeCollapsed {
     background-image: url(/@@/treeCollapsed.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .treeExpanded {
     background-image: url(/@@/treeExpanded.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .branch {
     background-image: url(/@@/branch.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .distribution {
     background-image: url(/@@/distribution.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .package-source {
     background-image: url(/@@/package-source.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .milestone {
     background-image: url(/@@/milestone.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .language {
     background-image: url(/@@/language.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .external-link {
     background-image: url(/@@/link.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .mail {
     background-image: url(/@@/mail.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .cve {
     background-image: url(/@@/cve.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug {
     background-image: url(/@@/bug.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug-critical {
     background-image: url(/@@/bug-critical.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug-high {
     background-image: url(/@@/bug-high.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug-medium {
     background-image: url(/@@/bug-medium.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug-low {
     background-image: url(/@@/bug-low.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug-wishlist {
     background-image: url(/@@/bug-wishlist.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .blueprint {
     background-image: url(/@@/blueprint.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .blueprint-essential {
     background-image: url(/@@/blueprint-essential.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .blueprint-high {
     background-image: url(/@@/blueprint-high.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .blueprint-medium {
     background-image: url(/@@/blueprint-medium.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .blueprint-low {
     background-image: url(/@@/blueprint-low.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .blueprint-undefined {
     background-image: url(/@@/blueprint-undefined.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .blueprint-not {
     background-image: url(/@@/blueprint-not.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .rss {
     background-image: url(/@@/rss.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 
 .ubuntu-logo {
     background-image: url(/@@/ubuntu-icon.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .person-inactive {
     background-image: url(/@@/person-inactive.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .person-inactive-badge {
     background-image: url(/@@/person-inactive-badge.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .mentoring {
     background-image: url(/@@/mentoring.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .undecided {
     background-image: url(/@@/maybe.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .error-icon {
     background-image: url(/@@/error.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .cancel {
     background-image: url(/@@/cancel.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .confirm {
     background-image: url(/@@/confirm.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .flame {
     background-image: url(/@@/flame-icon.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug-undecided {
     background-image: url(/@@/bug-undecided.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug-remote {
     background-image: url(/@@/bug-remote.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug-unknown {
     background-image: url(/@@/bug-unknown.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug-dupe {
     background-image: url(/@@/bug-dupe-icon.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bug-tracker {
     background-image: url(/@@/bugtracker-icon.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .package-binary {
     background-image: url(/@@/package-binary.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .retry {
     background-image: url(/@@/retry.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .distribution-badge {
     background-image: url(/@@/distribution-badge.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .project-badge {
     background-image: url(/@@/project-badge.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .project {
     background-image: url(/@@/project.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .product-badge {
     background-image: url(/@@/product-badge.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .product {
     background-image: url(/@@/product.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .read-only {
     background-image: url(/@@/read-only.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .warning-icon, .security {
     background-image: url(/@@/warning.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .private {
     background-image: url(/@@/private.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .meeting {
     background-image: url(/@@/meeting.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .translate-icon {
     background-image: url(/@@/translation.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .translation-file {
     background-image: url(/@@/translation-file.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .translation-template {
     background-image: url(/@@/translation-template.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .trash-icon {
     background-image: url(/@@/trash-icon.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .stop {
     background-image: url(/@@/stop.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .list {
     background-image: url(/@@/list.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bullet {
     background-image: url(/@@/bullet.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .zoom-in {
     background-image: url(/@@/zoom-in.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .zoom-out {
     background-image: url(/@@/zoom-out.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .architecture {
     background-image: url(/@@/architecture.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .ppa-icon {
     background-image: url(/@@/ppa-icon.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .ppa-icon-inactive {
     background-image: url(/@@/ppa-icon-inactive.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 
 .bug-status-expand {
     background-image: url(/@@/bug-status-expand.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .merge-proposal {
     background-image: url(/@@/merge-proposal-icon.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
     padding-left: 22px
-}
+    }
 .build-superseded {
     background-image: url(/@@/build-superseded.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .build-success {
     background-image: url(/@@/build-success.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .build-needed {
     background-image: url(/@@/build-needed.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .build-failure {
     background-image: url(/@@/build-failure.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .build-depwait {
     background-image: url(/@@/build-depwait.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .arrowUp {
     background-image: url(/@@/arrowUp.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .arrowDown {
     background-image: url(/@@/arrowDown.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .arrowStart {
     background-image: url(/@@/arrowStart.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .arrowEnd {
     background-image: url(/@@/arrowEnd.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .arrowTop {
     background-image: url(/@@/arrowTop.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .arrowBottom {
     background-image: url(/@@/arrowBottom.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .arrowLeft {
     background-image: url(/@@/arrowLeft.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .bluebar {
     background-image: url(/@@/blue-bar.png); /* sprite-ref: icon-sprites */
     background-repeat: repeat-x;
-}
+    }
 .greenbar {
     background-image: url(/@@/green-bar.png); /* sprite-ref: icon-sprites */
     background-repeat: repeat-x;
-}
+    }
 .purplebar {
     background-image: url(/@@/purple-bar.png); /* sprite-ref: icon-sprites */
     background-repeat: repeat-x;
-}
+    }
 .redbar {
     background-image: url(/@@/red-bar.png); /* sprite-ref: icon-sprites */
     background-repeat: repeat-x;
-}
+    }
 .favorite-yes {
     background-image: url(/@@/news.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .haspatch-icon {
     background-image: url(/@@/haspatch-icon.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
-
-
-/*large*/
+    }
 .large-branch {
     background-image: url(/@@/branch-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-warning {
     background-image: url(/@@/warning-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-crowd {
     background-image: url(/@@/crowd-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-download {
     background-image: url(/@@/download-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-error {
     background-image: url(/@@/error-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-flame {
     background-image: url(/@@/flame-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-download {
     background-image: url(/@@/download-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-info {
     background-image: url(/@@/info-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-launchpad {
     background-image: url(/@@/launchpad-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-mentoring {
     background-image: url(/@@/mentoring-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-proposal {
     background-image: url(/@@/merge-proposal-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-trash {
     background-image: url(/@@/trash-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .large-private {
     background-image: url(/@@/private-large.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
-
-/*logo*/
+    }
 .logo-launchpad {
     background-image: url(/@@/launchpad-logo.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .logo-distribution {
     background-image: url(/@@/distribution-logo.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .logo-project {
     background-image: url(/@@/project-logo.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .logo-product {
     background-image: url(/@@/product-logo.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .logo-person {
     background-image: url(/@@/person-logo.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 
 .logo-inactive {
     background-image: url(/@@/person-inactive-logo.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .logo-team {
     background-image: url(/@@/team-logo.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .logo-meeting {
     background-image: url(/@@/meeting-logo.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .logo-flame {
     background-image: url(/@@/flame-logo.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
+    }
 .logo-trash {
     background-image: url(/@@/trash-logo.png); /* sprite-ref: icon-sprites */
     background-repeat: no-repeat;
-}
-
-/* Code styles */
-.branchstatusMATURE, .branchstatusMATURE a  {color: #090;}
-.branchstatusDEVELOPMENT, .branchstatusDEVELOPMENT a  {color: #900;}
-.branchstatusEXPERIMENTAL, .branchstatusEXPERIMENTAL a {color: #930;}
-.branchstatusMERGED, .branchstatusMERGED a       {color: #666;}
-.branchstatusABANDONED, .branchstatusABANDONED a    {color: #666;}
-.branchstatusNEW, .branchstatusNEW a          {color: black;}
-
-.voteAPPROVE       {color: green;}
-.voteNEEDS_FIXING  {color: #930;}
-.voteDISAPPROVE    {color: red;}
-.voteRESUBMIT      {color: red;}
-.voteABSTAIN       {color: grey;}
-.votePENDING       {color: #f60;}
-
-.mergestatusWORK_IN_PROGRESS, .mergestatusWORK_IN_PROGRESS a  {color: black;}
-.mergestatusNEEDS_REVIEW, .mergestatusNEEDS_REVIEW a          {color: #f60;}
-.mergestatusCODE_APPROVED, .mergestatusCODE_APPROVED a        {color: green;}
-.mergestatusREJECTED, .mergestatusREJECTED a                  {color: red;}
-.mergestatusMERGED, .mergestatusMERGED a                      {color: green;}
-.mergestatusMERGE_FAILED, .mergestatusMERGE_FAILED a          {color: red;}
-.mergestatusQUEUED, .mergestatusQUEUED a                      {color: black;}
-.mergestatusSUPERSEDED, .mergestatusSUPERSEDED a              {color: grey;}
-
-.codeimportNEW       {color: #930;}
-.codeimportINVALID   {color: red;}
-.codeimportREVIEWED  {color: green;}
-.codeimportSUSPENDED {color: red;}
-.codeimportFAILING   {color: red;}
-
-.distromirrorstatusUP {color: green;}
-.distromirrorstatusONEHOURBEHIND {color: green;}
-.distromirrorstatusTWOHOURSBEHIND {color: green;}
-.distromirrorstatusFOURHOURSBEHIND {color: green;}
-.distromirrorstatusSIXHOURSBEHIND {color: #f60;}
-.distromirrorstatusONEDAYBEHIND {color: #f60;}
-.distromirrorstatusTWODAYSBEHIND {color: red;}
-.distromirrorstatusONEWEEKBEHIND {color: red;}
-.distromirrorstatusUNKNOWN {color: grey;}
+    }
+
+
+/*
+ * YOU HAVE REACHED THE END OF THIS FILE. IF YOU SEE ANYTHING BELOW SPRITES
+ * YOU SHOULD WORK TO GET IT OUT OF THIS GLOBAL STYLE SHEET.
+ */
+
+
+/* ========
+   Registry
+*/
+div.yui-timelinegraph-content .yui-timelinegraph-zoom-box {
+    visibility: hidden;
+    }
+div.yui-timelinegraph-content:hover .yui-timelinegraph-zoom-box {
+    visibility: visible;
+    }
+
+
+/* ====
+   Bugs
+*/
+
+tr.bug-branch-summary td {
+    padding: 0px 6px;
+    }
+tr.bug-branch-summary td.first {
+    padding-left: 0px;
+    }
+
+
+/* =====
+   Soyuz
+*/
+ul.latest-ppa-updates .duration, ul.latest-ppa-updates .build-details {
+    /* For the Latest updates portlet
+      at https://launchpad.dev/~cprov/+archive/ppa */
+    font-size: 75%;
+    }
+ul.latest-ppa-updates li {
+    padding: 3px;
+    background-repeat: no-repeat;
+    background-position:right center;
+    }
+table#packages_list tr.superseded {
+    background-color: #eee;
+    }
+ul.latest-ppa-updates li:nth-child(odd) {
+    /* The following could be generalised for use to the following selector:
+       .side .portlet li.nth-child(odd)
+       if needed. */
+    border-top: 1px solid #dedede;
+    border-bottom: 1px solid #dedede;
+    background-color: #eeeeff;
+    }
+ul.latest-ppa-updates li.FULLYBUILT {
+    background-image: url('/@@/yes');
+    }
+ul.latest-ppa-updates li.FULLYBUILT_PENDING {
+    background-image: url('/@@/build-success-publishing');
+    }
+ul.latest-ppa-updates li.NEEDSBUILD {
+    background-image: url('/@@/build-needed');
+    }
+ul.latest-ppa-updates li.FAILEDTOBUILD {
+    background-image: url('/@@/build-failed');
+    }
+ul.latest-ppa-updates li.BUILDING {
+    background-image: url('/@@/processing');
+    }
+
+
+/* ====
+   Code
+*/
+.branchstatusMATURE, .branchstatusMATURE a {
+    color: #090;
+    }
+.branchstatusDEVELOPMENT, .branchstatusDEVELOPMENT a {
+    color: #900;
+    }
+.branchstatusEXPERIMENTAL, .branchstatusEXPERIMENTAL a {
+    color: #930;
+    }
+.branchstatusMERGED, .branchstatusMERGED a {
+    color: #666;
+    }
+.branchstatusABANDONED, .branchstatusABANDONED a {
+    color: #666;
+    }
+.branchstatusNEW, .branchstatusNEW a {
+    color: black;
+    }
+
+.voteAPPROVE {
+    color: green;
+    }
+.voteNEEDS_FIXING {
+    color: #930;
+    }
+.voteDISAPPROVE {
+    color: red;
+    }
+.voteRESUBMIT {
+    color: red;
+    }
+.voteABSTAIN {
+    color: #bebebe;
+    }
+.votePENDING {
+    color: #f60;
+    }
+
+.mergestatusWORK_IN_PROGRESS, .mergestatusWORK_IN_PROGRESS a {
+    color: black;
+    }
+.mergestatusNEEDS_REVIEW, .mergestatusNEEDS_REVIEW a {
+    color: #f60;
+    }
+.mergestatusCODE_APPROVED, .mergestatusCODE_APPROVED a {
+    color: green;
+    }
+.mergestatusREJECTED, .mergestatusREJECTED a {
+    color: red;
+    }
+.mergestatusMERGED, .mergestatusMERGED a {
+    color: green;
+    }
+.mergestatusMERGE_FAILED, .mergestatusMERGE_FAILED a {
+    color: red;
+    }
+.mergestatusQUEUED, .mergestatusQUEUED a {
+    color: black;
+    }
+.mergestatusSUPERSEDED, .mergestatusSUPERSEDED a {
+    color: #bebebe;
+    }
+
+.codeimportNEW {
+    color: #930;
+    }
+.codeimportINVALID {
+    color: red;
+    }
+.codeimportREVIEWED {
+    color: green;
+    }
+.codeimportSUSPENDED {
+    color: red;
+    }
+.codeimportFAILING {
+    color: red;
+    }
+
+.distromirrorstatusUP {
+    color: green;
+    }
+.distromirrorstatusONEHOURBEHIND {
+    color: green;
+    }
+.distromirrorstatusTWOHOURSBEHIND {
+    color: green;
+    }
+.distromirrorstatusFOURHOURSBEHIND {
+    color: green;
+    }
+.distromirrorstatusSIXHOURSBEHIND {
+    color: #f60;
+    }
+.distromirrorstatusONEDAYBEHIND {
+    color: #f60;
+    }
+.distromirrorstatusTWODAYSBEHIND {
+    color: red;
+    }
+.distromirrorstatusONEWEEKBEHIND {
+    color: red;
+    }
+.distromirrorstatusUNKNOWN {
+    color: #bebebe;
+    }
 
 table.code {
     margin-bottom: 1em;
-}
+    }
 table.code th {
     text-align: left;
     font-weight: bold;
-}
+    }
 table.code th, table.code td {
     padding-right: 3em;
-}
-
-tr.bug-branch-summary td { padding: 0px 6px; }
-tr.bug-branch-summary td.first { padding-left: 0px; }
+    }
+
+
+/* ============
+   Translations
+*/
+
+.translationimportstatusAPPROVED,
+.translationimportstatusAPPROVED a {
+    color: #050;
+    }
+.translationimportstatusIMPORTED,
+.translationimportstatusIMPORTED a {
+    color: green;
+    }
+.translationimportstatusDELETED,
+.translationimportstatusDELETED a {
+    color: black;
+    }
+.translationimportstatusFAILED,
+.translationimportstatusFAILED a {
+    color: red;
+    }
+.translationimportstatusNEEDS_REVIEW,
+.translationimportstatusNEEDS_REVIEW a {
+    color: #f60;
+    }
+.translationimportstatusBLOCKED,
+.translationimportstatusBLOCKED a {
+    color: blue;
+    }
+.translationimportstatusNEEDS_INFORMATION,
+.translationimportstatusNEEDS_INFORMATION a {
+    color: maroon;
+    }
+
+/* ==== Translations hand-made forms ==== */
+
+form.translations div.fields {
+    padding: 1em;
+    }
+form.translations div.actions {
+    padding: 1em;
+    text-align: left;
+    clear:both;
+    }
+form.translations input {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    }
+form.translations select {
+    margin-left: 0.5em;
+    padding-right: 0.5em;
+    }
+form.translations label {
+    padding-left: 0.5em;
+    padding-right: 1em;
+    }
+form.translations .listbox label {
+    padding: 2px 1em 2px 2px;
+    }
+
+/* Provide top-alignment for radio boxes and longer explanations
+ * without using tables.
+ *
+ * Examples:
+ *   https://translations.launchpad.dev/evolution/trunk/+pots/evolution-2.2/es/+upload
+ *   https://translations.launchpad.dev/evolution/trunk/+pots/evolution-2.2/+export
+ */
+form.translations div.alignment .content {
+    float:left;
+    }
+form.translations div.alignment .selector {
+    margin-right: 0.5em;
+    float: left;
+    clear: both;
+    }
+form.translations div.alignment .content label {
+    padding: 0px;
+    margin: 0px;
+    font-weight: bold;
+    }
+form.translations div.alignment .secondary label {
+    font-weight: normal;
+    padding: 2px 1em 2px 2px;
+    }
+
+/* Templates listing.
+ *
+ * Examples:
+ *   https://translations.launchpad.dev/ubuntu/hoary/+templates
+ *   https://translations.launchpad.dev/evolution/trunk/+templates
+ */
+.inactive-template td {
+    background-color: #fee;
+    color: #855;
+    }
+
+
+/* Translations statistics and legend.
+ *
+ * Examples:
+ *   https://translations.launchpad.dev/ubuntu/hoary/+lang/es
+ *   https://translations.launchpad.dev/evolution/trunk/+lang/es
+ */
+
+div.translations-legend {
+    padding-top: 2em;
+    padding-bottom: 1em;
+    }
+table.translation-stats td {
+    text-align:center;
+    }
+table.translation-stats td.template-name {
+    text-align:left;
+    }
+table.translation-stats tfoot td,
+table.translation-stats tfoot th {
+    background-color: #f7f7f7;
+    border: 0px;
+    border-top: 2px solid #d2d2d2;
+    border-bottom: 2px solid #d2d2d2;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    font-weight: bold;
+    }
+table.translation-stats tfoot th {
+    text-align:left;
+    }
+table.translation-stats tfoot td {
+    text-align:center;
+    }
+
+/* Translations help links.
+ *
+ * Examples:
+ *   https://translations.launchpad.dev/ubuntu/hoary/+source/evolution/+pots/evolution-2.2/
+ *   https://translations.launchpad.dev/ubuntu/hoary/+source/evolution/+translations
+ *   https://translations.launchpad.dev/ubuntu/hoary/
+ *
+ */
+div.translation-help-links a {
+    float: right;
+    }
+div.translation-help-links div {
+    clear: both;
+    }
 
=== modified file 'lib/canonical/launchpad/icing/style.css'
--- lib/canonical/launchpad/icing/style.css	2010-04-19 09:29:49 +0000
+++ lib/canonical/launchpad/icing/style.css	2010-04-24 14:37:26 +0000
@@ -22,100 +22,6 @@
 ...
 */
 
-/* == Guidelines == */
-/*
- * Use absolute units (e.g. px, pt) only when image sizes or CSS limitations
-   demand it. Otherwise, use relative units (%, em).
-*/
-.yui-ieditor {padding-right: 288px;}
-.lazr-multiline-edit .yui-ieditor {padding-right: 0;}
-.lazr-multiline-edit textarea {max-width: inherit;}
-.lazr-multiline-edit .yui-ieditor-input {padding-right: 5px !important;}
-
-.demo {background-color: #fee;}
-
-
-/* == Sprites == */
-
-ul.breadcrumbs a.bzr-favicon, ul.breadcrumbs a.person-tabs {
-    padding: 8px 18px 0 23px;
-}
-h1 .edit {
-    font-size: 50%;
-    position: relative;
-    top: -3px;
-    margin-left: 0.5em;
-}
-.offscreen {
-    position: absolute;
-    left: -999em;
-}
-span.invisible-link {display:none;}
-span.invisible {left:-9999em;display:block;}
-
-/* == Things browsers should do but don't == */
-
-.clearfix:after { /* use class="clearfix" whenever floats should be enclosed */
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
-.clearfix {display: inline-table;}
-/* Work around float bug in MSIE for Windows, while hiding from MSIE for Mac \*/
-* html .clearfix {height: 1%;}
-.clearfix {display: block;}
-/* End hiding from MSIE for Mac */
-a {outline: none;}
-abbr[title], acronym[title] {border-bottom: 1px dotted black; cursor: help;}
-* html body {word-wrap: break-word;} /* stops floats dropping in IE 5.5/6 */
-caption {caption-side: bottom; text-align: left;}
-dt dfn {font-style: normal; font-weight: bold;}
-input {visibility:inherit;}
-input[type=radio] {margin-left: 1em;}
-kbd {
-  background-color: #ddd;
-  border: 1px solid;
-  border-color: white gray gray white;
-  color: black;
-  margin: 1px;
-  min-width: 1em;
-  outline: 1px #666;
-}
-label {white-space: nowrap;}
-.long td {
-    padding-right: 1em;
-    }
-.long fieldset {
-    margin-top: 1em;
-    }
-.long legend {
-    color: #666;
-    font-weight: bold;
-    font-size: 123.1%;
-    }
-.listbox { /* a scrolling list of checkboxes or radio buttons */
-  border: 1px solid #8cacbb;
-  display: inline-block;
-  max-height: 12em;
-  overflow: auto;
-  overflow: -moz-scrollbars-vertical;
-}
-.listbox label {
-  background-color: #f6f6f6;
-  border: solid white;
-  border-width: 0 0 1px 0;
-  display: block;
-}
-textarea {display: block;}
-th, td {vertical-align: baseline;}
-
-/* Opera doesn't use the general tr above for the radio button table */
-table.radio-button-widget tr td {vertical-align: top;}
-
-/* == Overall presentation == */
-/* These styles apply to pages regardless of layout or application. */
 
 /* === Fonts and colors === */
 
@@ -129,33 +35,6 @@
   color: #555;
 }
 
-/* Links are blue, brighter when clicked, and greyer once visited: */
-:link, :visited               {color: #03a;    text-decoration: none;}
-:link:hover, :visited:hover   {                text-decoration: underline;}
-:link:active, :visited:active {color: #36c;}
-/* Links that don't open separate pages are green to denote their behavior: */
-a[onclick], .collapsible legend a, a.js-action               {color: #093;}
-a[onclick]:active, .collapsible legend a:active, a.js-action {color: #093;}
-a.js-action:active {color: #093;}
-
-/* The js-action class is also used for non-links, for example, with
- * expand/collapse sections. */
-.widget-hd.js-action {color: #093; cursor:pointer}
-.widget-hd.js-action:hover {text-decoration: underline;}
-
-/* Help links */
-a.help {
-  border-bottom: 1px dotted #03a;
-  cursor: help;
-}
-a.help:hover, a.help:hover {
-  text-decoration: none;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  background: none;
-  clear: left;
-}
 
 .exception {color: #cc0000;}
 .discreet, .lesser, .duplicate-details {font-size: 90%;}
@@ -169,58 +48,6 @@
 .green {color: green;}
 .red {color: red;}
 
-/* === Error, warning, and informational messages === */
-/* Error, warning, and informational alerts are in a centered box: */
-.error.message, .warning.message, .informational.message {
-  border: solid #666;
-  border-width: 1px 2px 2px 1px;
-  color: black;
-  margin: 0 auto 10px auto;
-  padding: 0 10px 10px 20px;
-  width: 30em;
-}
-/* The alerts are preceded with an icon overlaying the top left corner: */
-.error.message::before, .warning.message::before,
-.informational.message::before {
-  display: block; margin: -15px 0 -6px -35px;
-}
-/* Error messages are pink, with alerts having an error icon: */
-.error         {background: #ffe4e4;}
-.error.message::before         {content: url(/@@/error-large);}
-/* Warning messages are orange, with alerts having a warning icon: */
-.warning       {background: #fff59c;}
-.warning.message::before       {content: url(/@@/warning-large);}
-/* Informational messages are blue-to-grey, with alerts having an info icon: */
-.informational {background: #d4e8ff url(/+icing/blue-fade-to-grey);}
-.informational.message::before {content: url(/@@/info-large);}
-/* Debugging messages are white on grey, with alerts having an info icon: */
-.debugging     {background: #666; color: white;}
-.debugging.message::before     {content: url(/@@/info-large);}
-/* Form errors override this background color, because the lack of space
-between the edge of fields and the edge of the color would look bad: */
-table.form .error {background: none;}
-/* And inside, the error message itself uses a smaller icon: */
-.error .message {
-  background: url(/@@/error) center left no-repeat;
-  margin-bottom: 0.25em;
-  padding-left: 18px;
-}
-
-/* Warning messages inlined in the page. */
-.inline-warning {
-    color: red;
-    font-weight: bold;
-}
-.sml-informational {
-  background: #d4e8ff url('/+icing/blue-fade-to-grey');
-  border: solid #666;
-  border-width: 1px 2px 2px 1px;
-  color: black;
-  padding: 5px 5px 5px 5px;
-  width:44em;
-}
-.sml-informational::before {content: url('/@@/info');}
-
 .helpwanted {background-color: #fafca9; color: black; border: 1px solid black;
     padding: 0.5em; font-size: smaller; padding-left: 3em
 }
@@ -232,47 +59,6 @@
   padding-left: 1em;
 }
 
-/* === Forms === */
-
-form table label {font-weight: bold;}
-fieldset {border-width: 2px 0 0; margin: 1em 0; padding: 1em 0 0;}
-button{padding:0;}
-input.urlTextType {width: 40em;}
-.fieldRequired, .fieldOptional {color: #999;}
-.formHelp {margin: 0.2em 0 0.5em 0.2em; color: #777;}
-/* Hack to add breathing room to bug status forms: */
-table.listing div.field>table {margin-top: 0.5em;}
-table.listing div.field>label, table.listing div.field>div>label,
-table.listing div.actions {
-  display: block; margin-top: 1em;
-}
-/* Text fields occupy as much of the page width as possible, minus a safety
-margin for Internet Explorer, and up to a reasonable maximum: */
-textarea {width: 90%; max-width: 60em;}
-
-/* Many forms are laid out using tables, with appropriate spacing: */
-table.form, table.extra-options {margin: 1em 0; width: 100%;} /* http://launchpad.dev/firefox/+edit */
-table.form th {font-weight: normal;}
-table.form th, table.form td,
-table.form table.extra-options td,
-table.form table.extra-options th {padding-bottom: 1em;}
-table.form td td {padding-bottom: 0;}
-
-/* === Tables === */
-table.latest th, table.latest td {padding-bottom: 2em;}
-
-th.icon, td.icon {vertical-align: top; white-space: nowrap; width: 1px;}
-th.icon.left, td.icon.left {padding-right: 0;}
-th.icon.right, td.icon.right {padding-left: 0;}
-th.nowrap, td.nowrap {white-space: nowrap;}
-tfoot th, table.contributions th {text-align: left;}
-table.contributions th {font-weight: normal;}
-table.contributions td {vertical-align: middle; width: 16px; text-align: left;}
-
-/* ==== Listing tables ==== */
-table.duplicate.listing * {color: #999;}
-
-
 form.primary.search {
   margin-bottom: 2em;
 }
@@ -294,10 +80,6 @@
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 }
 
-strong em {
-  font-style: normal;
-  color: #353535;
-}
 .link_img {border: 0;}
 .debug {
   background: none;
@@ -309,9 +91,6 @@
   overflow: hidden;
   display: none;
 }
-hr {
-  display: none;
-}
 
 /* === Official Bug Tag Management === */
 
@@ -416,32 +195,6 @@
   border: 0 !important;
 }
 
-/* --- Various custom list formats --- */
-
-ul.architecture, li.architecture     {list-style-image: url(/@@/architecture);}
-ul.build-success, li.build-success   {list-style-image: url(/@@/build-success);}
-ul.bug.remote, li.bug.remote         {list-style-image: url(/@@/bug-remote);}
-ul.language, li.language             {
-  list-style-image: url(/@@/language);
-  /* Disable .language sprite. */
-  background: inherit;
-}
-ul.mail, li.mail                     {list-style-image: url(/@@/mail);}
-ul.meeting, li.meeting               {list-style-image: url(/@@/meeting);}
-ul.news, li.news {
-  list-style-type: none;
-  margin-bottom: 1em;
-}
-ul.rss, li.rss                       {list-style-image: url(/@@/rss);}
-ul.translation, li.translation       {list-style-image: url(/@@/translation);}
-ul.webref, li.webref                 {list-style-image: url(/@@/link);}
-
-/* --- A list with icons instead of bullets --- */
-ul.iconed {
-  list-style-type: none;
-  padding-left: 0 !important;
-  margin: 0 !important;
-}
 
 /* Various custom link icons */
 
@@ -503,8 +256,6 @@
   border-top: 1px solid #ddd;
 }
 .from-superseded {background-color: #ffffcc;}
-dl.faq dt {font-weight: bold;}
-dl.faq dd {margin: 1em 0 2em 4em;}
 .adminHiddenComment {background-color:yellow;}
 
 /* --- Overview --- */
@@ -531,13 +282,7 @@
 
 /* --- Home --- */
 
-/* The following style works around the fact that the locationbar, which is
-only used of the Login/Register links in 3.0 UI, is accessible on
-"locationless" pages. It adds extra space at the top of every page in
-Launchpad but that does actually look quite good ... ;-).*/
-#locationbar {
-    height: 1em;
-}
+
 /* -- Notices -- */
 
 .important-notice-container {
@@ -936,11 +681,6 @@
   font-size: 120%;
 }
 
-div.watermark-apps-portlet span img {
-    float: none;
-    margin: 0;
-}
-
 .patches-view-cell {
   padding-right: 1em;
 }
@@ -1110,24 +850,6 @@
 img.mugshot {display: block;}
 /* End hiding from MSIE for Mac */
 
-div.left, div.right {width: 50%;}
-div.left {clear: both; float: left;}
-div.right {clear: right; float: right;}
-
-div.three.column.middle {margin-right: 1%;}
-div.three.column.left, div.three.column.middle, div.three.column.right {
-  clear: none;
-  float: left;
-  width: 33%;
-}
-div.three.column.left, div.three.column.right { margin: 0;}
-.title {
-  font-weight: bold;
-}
-ul.buttons {margin: 0.5em 0 0.5em 0 !important; padding: 0 !important;}
-/*- without !important, gets overridden by the '#maincontent ol' etc rule -*/
-ul.buttons li {display: inline; margin: 0 0 0 0;}
-ul.cross-reference {font-size: 1.25em;}
 
 #project-cloud-preview a {
   padding-left: 0.5em;