Merge lp:~dylanmccall/harvest/ubuntu-branding into lp:harvest

[Dylan McCall]

Big update to the templates. Sorry I didn't tell anyone in advance about this; I got carried away and did it all at once :P

This covers a few things. First, of course, it brings us a little more in line with the official Ubuntu brand. I went through the branding guide and borrowed some bits and pieces. Then cjohnston kindly pointed me to the wonderful Django template that already existed, but I was already almost done, so…

The main reason behind this change was to improve accessibility. The “edit” button beside each opportunity is now more visible (only 0.4 opacity instead of 0.1), and the secondary text describing an opportunity's status is a little darker. The funny green highlights are gone.
Those Edit buttons are still pretty bad, but to fix them nicely (making them NOT miles away from their corresponding opportunities) we should make the Edit buttons simpler; a single little button. For that to work we should get editing to happen via ajax, which is a different job.

I changed some copy. “N packages have no matching opportunities” is now “N selected packages have no matching opportunities.”

I changed two bits of behaviour: Edit buttons only appear when logged in and the package name filter disables itself when the edit field is cleared.

We still deviate from the official guidelines, and I'll cover the more blatant differences I am aware of:

The layout is fluid instead of fixed. This is intentional; the original redesign paid a lot of attention to flexibility.

The orange header has the username / login / logout button, in this case presented as a normal link (because a big button to the right side didn't feel proper). The current brand guidelines don't really cover login stuff, so the closest example I could find was the wiki which puts that in secondary navigation. In Harvest's case there is no reason for secondary navigation — and login affects the whole site anyway —, so where primary navigation might go seems the right place.

The footer has a few external links spanning horizontally instead of a sitemap that runs vertically.

[lp:~dylanmccall/harvest/ubuntu-branding]

308. By Dylan McCall on 2011-05-04

Improved readability of statistics in welcome page, removed colour change for FAQ.
Correct heading types specified in CSS.
Source package names in filter results changed to h3.

309. By Dylan McCall on 2011-05-05

Removed unused images.

310. By Dylan McCall on 2011-05-05

Removed custom keynav focus outline.
Removed reset rule for A elements, enabling default focus behaviour.

[Daniel Holbach (dholbach)]

Great work! :)

review: Approve

=== added file 'harvest/media/css/background-dotted.png'
Binary files harvest/media/css/background-dotted.png	1970-01-01 00:00:00 +0000 and harvest/media/css/background-dotted.png	2011-05-05 18:46:15 +0000 differ
=== renamed file 'harvest/media/css/style.css' => 'harvest/media/css/base.css'
--- harvest/media/css/style.css	2011-05-02 00:20:31 +0000
+++ harvest/media/css/base.css	2011-05-05 18:46:15 +0000
@@ -1,10 +1,12 @@
 body {
-	background-color:rgb(255,255,255);
-	color:rgb(51,51,51);
-	
-	font-family:'Ubuntu', 'UbuntuBeta', 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
-	font-size:14px;
-	line-height:1.2em;
+	background-color:#FFFFFF;
+	background-image:url('background-dotted.png');
+	font-family:'Ubuntu', 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
+	font-size:13px;
+	line-height:1.5em;
+	color:#333333;
+	padding:0px 30px;
+	min-width:600px; /* this is mainly for #results, but applied across the site for consistency */
 }
 
 .bottom {
@@ -12,111 +14,152 @@
 	clear:both;
 }
 
+p {
+	margin-bottom:8px;
+}
+
 strong, b {
-	color:rgb(0,0,0);
+	color:#000000;
 	font-weight:bold;
 }
 small, .small {
-	color:rgb(80,80,80);
+	color:#505050;
 	font-size:smaller;
 }
 em, i {
 	font-style:italic;
 }
 
-/* outline selected item for keyboard navigation */
-*:focus {
-	outline:rgb(244,116,33) dashed 1px;
-}
-a:active {
-	outline:none;
-}
 
 a {
-	color:rgb(110,64,84);
-	text-decoration:inherit;
+	color:#DD4814;
+	text-decoration:none;
+	font-weight:inherit;
 }
 a:hover,
 a:focus {
-	/*color:rgb(162,129,143);*/
 	text-decoration:underline;
 }
 
 input.placeheld {
 	/* only used in browsers that don't already do placeholder text */
-	color:rgb(180,180,180);
+	color:#B4B4B4;
 }
 
 form label {
 }
 form .error input, form .error textarea, form .error input#new_note  {
-	border:solid 2px rgb(140,0,0);
+	border:solid 2px #8C0000;
 }
 form ul.errorlist {
 	font-size:smaller;
-	color:rgb(140,0,0);
+	color:#8C0000;
 }
 
 
 
-#container {
+#wrapper {
 	display:block;
-	position:absolute;
-	width:100%;
-	min-width:600px;
-	min-height:100%;
+	position:relative;
+	background-color:#F7F6F5;
+	z-index:2;
+	
+	-moz-box-shadow:0px 0px 2px #BBB;
+	-webkit-box-shadow:0px 0px 2px #BBB;
+	box-shadow:0px 0px 2px #BBB;
+	-moz-border-radius:0px 0px 4px 4px;
+	border-radius:0px 0px 4px 4px;
 }
 
 
 
 #header {
 	display:block;
-	width:100%;
-	min-height:80px;
-	padding-top:12px;
 }
 
-#header #sitetitle {
+#extheader {
+	display:block;
+	background-color:#FFFFFF;
+}
+#extheader > ul {
+	margin:0px;
+	padding:0px;
+	height:20px;
+	list-style-type:none;
+	text-align:right;
+}
+#extheader > ul > li {
 	display:inline;
-	position:static;
-	margin-left:40px;
-	margin-right:40px;
-	margin-bottom:10px;
+	padding:3px 0px;
+	margin-right:14px;
+	font-size:10px;
+	line-height:14px;
+}
+#extheader a {
+	color:#333333;
+}
+
+#mainheader {
+	height:72px;
+	
+	background-color:#D05630;
+	background-image:url('orangeheader-stripes.png');
+	background-repeat:repeat-x;
+	background-position:top left;
+	-moz-border-radius:0px 0px 4px 4px;
+	border-radius:0px 0px 4px 4px;
+	color:#FFFFFF;
+	
+	padding:0px 20px;
+}
+
+#mainheader #sitetitle {
+	display:block;
+	float:left;
+	margin-top:24px;
 	
 	text-transform:lowercase;
 	text-decoration:none;
-	color:rgb(0,0,0);
-	font-family:'Molengo', 'Ubuntu', 'UbuntuBeta', 'DejaVu Sans', 'Bitstream Vera Sans', sans-serif;
-}
-#header #sitetitle #sitelogo {
-	width:auto; /* line up with #sitename font-size */
+	color:#FFFFFF;
+}
+#mainheader #sitetitle #sitename {
+	display:inline;
+	font-size:36px;
+}
+#mainheader #sitetitle #releasename {
+	display:inline;
+	font-size:12px;
+	vertical-align:sub;
+}
+
+#mainheader #userdata {
+	display:block;
+	float:right;
+	margin-top:24px;
+	
+	text-align:right;
+	font-size:16px;
+	line-height:24px;
+}
+#header #userdata .username {
+	font-style:italic;
+}
+#header #userdata .useraction {
+}
+.useraction a {
+	color:inherit;
+	text-transform:lowercase;
+}
+.useraction > ul {
+	display:inline;
+	margin:0px;
+	padding:0px;
 	height:36px;
-}
-#header #sitetitle #sitename {
-	display:inline;
-	position:static;
-	
-	font-size:36px;
-}
-#header #sitetitle #releasename {
-	display:inline;
-	position:static;
-	
-	font-size:12px;
-	vertical-align:sub;
-}
-
-#header #userdata {
-	float:right;
-	margin-top:12px;
-	margin-left:40px;
-	margin-right:40px;
-	
-	text-align:right;
-}
-#header #userdata .username {
-}
-#header #userdata .loginbutton {
+	list-style-type:none;
+}
+.useraction > ul > li {
+	display:inline;
+	margin-left:6px;
 }
 
 #header > #messages {
@@ -124,537 +167,95 @@
 	margin:10px 0px;
 	padding:5px 10px;
 	font-size:18px;
-	background-color:rgb(242,151,93);
-	color:rgb(255,255,255);
+	background-color:#F2975D;
+	color:#FFFFFF;
 }
 
 
-#content {
+#container {
 	clear:both;
-	padding:0px 20px 140px 20px;
-	padding-bottom:140px;
-}
-
-.sectiontitle {
-	max-width:30em;
-	letter-spacing:-0.1em;
+	padding:32px 16px 64px 16px;
+}
+
+h1 {
+	font-size:36px;
+	line-height:40px;
+	color:#333333;
+}
+#content > h1 {
+	/* header at top of page */
+	margin-bottom:32px;
+	padding:0px 8px;
+}
+
+h1 .subsection {
+	color:#AEA79F;
+}
+
+h2 {
 	font-size:24px;
-	margin-bottom:12px;
-	color:rgb(80,80,80);
-}
-
-#content > .one_column {
-	max-width:60em;
-}
-
-
-
-
-#content_welcome > #start {
-	display:table-cell;
-	padding-right:60px;
-	padding-bottom:60px;
-	width:400px;
-	min-width:300px;
-}
-
-#content_welcome #introduction {
+	line-height:28px;
+	margin-bottom:32px;
+	padding:0px 8px;
+	color:#333333;
+}
+
+h3 {
 	font-size:16px;
-	line-height:1.2em;
+	line-height:20px;
+	font-weight:normal;
+	color:#333333;
+	margin-top:16px;
+	margin-bottom:8px;
 }
 
-#content_welcome #start_links {
-	margin:20px 0px 10px 0px;
-}
-#content_welcome #start_links a {
-	display:inline-block;
-	padding:8px 10px;
-	background-color:rgb(221,72,20);
-	border:rgb(229,116,77) solid 2px;
+#content .main {
+	display:block;
+	padding:8px 16px;
+	background-color:#FFFFFF;
+	-moz-box-shadow:0px 1px 2px #CCC;
+	-webkit-box-shadow:0px 1px 2px #CCC;
+	box-shadow:0px 1px 2px #CCC;
 	-moz-border-radius:4px;
-	border-radius:4px; /* round border on bottom as well */
-	
-	font-size:20px;
-	color:rgb(255,255,255);
-}
-#content_welcome #start_links a:hover,
-#content_welcome #start_links a:focus {
-	background-color:rgb(184,58,15);
-	border-color:rgb(173,83,52);
-}
-
-#content_welcome #statistics {
-	font-size:10px;
-	color:rgb(180,180,180);
-}
-#content_welcome #statistics * {
-	font-style:italic;
-}
-
-#content_welcome #faq {
-	display:table-cell;
-	width:430px;
-	min-width:430px;
-	color:rgb(80,80,80);
-}
-
-#faq > div {
-	display:table-cell;
-	width:200px;
-	padding-right:15px;
-}
-
-#faq li {
-	margin-bottom:2em;
-}
-#faq .question {
-	font-weight:bold;
-	font-style:italic;
-}
-
-
-
-#filters {
-	display:block;
-	position:relative;
-	float:left;
-	min-width:160px;
-	
-	padding-right:20px;
-	font-size:12px;
-	line-height:1.4em;
-	color:rgb(51,51,51);
-}
-#filters ul {
-	display:block;
-	margin-left:20px;
-	width:100%;
-}
-#filters ul li {
-	display:block;
-	width:100%;
-}
-
-
-#filters a.item-toggle {
-	display:inline-block;
-	height:100%;
-	
-	color:inherit;
-	text-decoration:inherit;
-	font-style:inherit;
-}
-
-#filters .checkbox {
-	/* checkbox element should always be the same size */
-	display:inline-block;
-	width:12px;
-	color:inherit;
-}
-
-#filters .setfilter > .filter-value > ul > li:not([data-selected]) > .filter > .filter-value {
-	/* parent filter is turned off */
-	color:rgb(140,140,140);
-}
-
-#filters .setfilter > .filter-value > ul > li.prelight-off > .checkbox {
-	/* prelight for an item about to be deselected */
-	color:rgb(140,140,140);
-	text-decoration:line-through;
-}
-#filters .setfilter > .filter-value > ul > li.prelight-on > .checkbox {
-	/* prelight for an item about to be selected */
-	color:inherit;
-}
-
-#filters .setfilter > .filter-value > ul > li.prelight-off > .filter > .filter-value {
-	/* parent filter is about to be turned off */
-	color:rgb(140,140,140);
-}
-#filters .setfilter > .filter-value > ul > li.prelight-on > .filter > .filter-value {
-	/* parent filter is about to be turned on */
-	color:inherit;
-}
-
-
-
-#filters > .filtergroup {
-	/* a top-level filter group */
-	display:block;
-	margin-bottom:4em;
-}
-#filters > .filtergroup > .filter-label {
-	/* titles for groups of filters ("Packages" and "Opportunities") */
-	display:block;
-	margin-bottom:8px;
-	letter-spacing:-0.1em;
-	color:rgb(80,80,80);
-	font-size:16px;
-}
-#filters > .filtergroup > .filter-value > ul {
-	margin-left:0px;
-}
-#filters > .filtergroup > .filter-value > ul > li {
-	margin-bottom:5px;
-}
-
-#filters > .filtergroup > .filter-value > ul > li a.help {
-	vertical-align:top;
-	margin-left:1em;
-	font-weight:bold;
-}
-
-#filters .editfilter input {
-	width:8em;
-	border:none;
-	border-bottom:1px solid rgb(180,180,180);
-	
-	padding:0px 2px 0px 2px;
-	background-color:inherit;
-	color:inherit;
-	font:inherit;
-}
-#filters .editfilter input.placeheld {
-	color:rgb(180,180,180);
-}
-
-
-
-#results-pane {
-	display:block;
-	min-width:250px;
-	max-width:1000px;
-	overflow:auto;
-}
-
-#results-pane > #results-status {
-	position:relative;
-	display:none;
-	z-index:10;
-	text-align:center;
-	background-image:url('results-status-shadow.png');
-	background-repeat:repeat-x;
-}
-#results-pane > #results-status > div {
-	min-height:30px; /* lines up height of #results-status background-image */
-}
-
-#results > .results-message {
-	margin:2em auto;
-	padding-left:20px;
-	max-width:30em;
-	
-	text-align:justify;
-	font-size:24px;
-	line-height:1.5em;
-	color:rgb(180,180,180);
-}
-
-#results > ul {
-	margin-left:20px;
-	margin-bottom:10px;
-}
-
-.sourcepackage {
-	display:block;
-	font-size:14px;
-	line-height:21px;
-}
-li.sourcepackage {
-	margin-top:5px;
-	margin-bottom:10px;
-	border:1px solid rgb(200,200,200);
-	-moz-border-radius:3px;
-	border-radius:3px; /* round border on bottom as well */
-}
-.sourcepackage > .sourcepackage-header {
-	display:block;
-	padding:8px 20px 8px 20px;
-}
-li.sourcepackage > .sourcepackage-header {
-	-moz-border-radius:3px 3px 0px 0px;
-	border-radius:3px 3px 0px 0px; /* lines up with li.sourcepackage's border */
-}
-a.sourcepackage-header {
-	color:inherit;
-	text-decoration:none;
-}
-.sourcepackage-header > .sourcepackage-name {
-	display:inline;
-	margin-right:10px;
-	color:rgb(0,0,0);
-	font-size:16px;
-}
-.sourcepackage-header > .status {
-	display:none; /* harvest.js will override this where necessary */
-}
-.sourcepackage-header > .status img {
-	width:16px;
-	height:16px;
-}
-.sourcepackage-header > .sourcepackage-summary {
-	display:inline;
-	float:right;
-	text-align:right;
-	font-size:10px;
-}
-/* prelights */
-a.sourcepackage-header:hover,
-a.sourcepackage-header:focus {
-	background-color:rgb(240,255,243);
-}
-a.sourcepackage-header:hover .sourcepackage-name,
-a.sourcepackage-header:focus .sourcepackage-name {
-	text-decoration:underline;
-}
-
-.sourcepackage-details {
-	display:block;
-	/* inner padding should be left:20px, right:20px and bottom:5px */
-}
-
-/* collapsed state. (expanded is the default) */
-li.sourcepackage.collapsed {
-	margin-bottom:5px;
-	border-color:rgb(250,250,250);
-	-moz-border-radius:3px 3px 0px 0px;
-	border-radius:3px 3px 0px 0px;
-}
-.sourcepackage.collapsed > .sourcepackage-details {
-	display:none;
-}
-
-.sourcepackage-details > .extra {
-	margin-top:20px;
-	padding:2px 20px 2px 20px;
-	color:rgb(80,80,80);
-	font-size:12px;
-	border-top:1px solid rgb(250,250,250);
-	/*background-color:rgb(200,200,200);*/
-}
-.sourcepackage-details > .extra > .actions {
-	float:right;
-	text-align:right;
-	text-transform:lowercase;
-}
-.sourcepackage-details > .extra > .actions > a {
-	margin:0px 0.25em;
-}
-
-
-li.sourcepackage > .sourcepackage-details > .opportunity-list {
-	padding-left:20px;
-	margin-bottom:5px;
-}
-
-.opportunity-list > .opportunity-list-title {
-	display:block;
-	color:rgb(80,80,80);
-	font-size:12px;
-	letter-spacing:-0.1em;
-}
-.opportunity-list > .opportunity-list-title > .opportunity-list-summary {
-	margin-left:5px;
-}
-
-.opportunity-list > ul {
-	margin-bottom:10px;
-	padding-left:20px;
-	list-style-image:url('opportunity-normal.png');
-}
-li.opportunity {
-	padding:2px 20px 8px 5px;
-}
-li.opportunity:hover {
-	background-color:rgb(250,250,250);
-}
-li.opportunity[data-opportunity-experience='1'] {
-	list-style-image:url('opportunity-experience-1.png');
-}
-li.opportunity[data-opportunity-experience='2'] {
-	list-style-image:url('opportunity-experience-2.png');
-}
-li.opportunity[data-opportunity-experience='3'] {
-	list-style-image:url('opportunity-experience-3.png');
-}
-
-.opportunity > .opportunity-header {
-	display:block;
-	line-height:1em;
-}
-.opportunity[data-opportunity-irrelevant] > .opportunity-header > .opportunity-description,
-.opportunity[data-opportunity-applied] > .opportunity-header > .opportunity-description {
-	text-decoration:line-through;
-}
-.opportunity-header > a.opportunity-description {
-	color:rgb(0,0,0);
-	font-size:16px;
-}
-.opportunity-header > .actions {
-	float:right;
-	text-align:right;
-	font-size:12px;
-	text-transform:lowercase;
-}
-li.opportunity > .opportunity-header > .actions {
-	opacity:0.1; /* color:rgb(241,236,238) */
-}
-li.opportunity:hover > .opportunity-header > .actions {
-	opacity:1;
-}
-.opportunity-goaway-button {
-	font-size:10px;
-}
-.opportunity-header > .opportunity-summary {
-	margin-left:10px;
-	color:rgb(180,180,180);
-	font-size:12px;
-	text-transform:lowercase;
-}
-
-li.opportunity > .opportunity-details {
-	display:block;
-	margin-left:10px;
-}
-li.opportunity > .opportunity-details.edit {
-	background-color:rgb(255,255,240);
-}
-
-.opportunity-notes {
-	display:block;
-	width:100%;
-	max-width:35em;
-	font-size:12px;
-	line-height:1em;
-}
-.opportunity-notes input#new_note {
-	width:100%;
-	border:none;
-	border-bottom:1px solid rgb(180,180,180);
-	
-	padding:2px 5px;
-	background-color:inherit;
-	color:inherit;
-	font:inherit;
-}
-.opportunity-notes > ul {
-	margin:10px 5px;
-	max-height:10em;
-}
-.opportunity-notes > ul > li {
-	margin-bottom:1em;
-}
-.opportunity-notes > ul > li:last-child {
-	margin-bottom:0em;
-}
-.opportunity-notes > ul > li > .signature {
-	display:inline-block;
-	margin-left:1em;
-	vertical-align:sub;
-	color:rgb(80,80,80);
-	font-style:italic;
-	font-size:10px;
-}
-
-
-
-.opportunity-details.edit > form > div.opportunity-notes {
-	float:left;
-	margin-right:4em;
-	margin-bottom:2em;
-}
-
-.opportunity-details.edit > form > ul.opportunity-switches {
-	float:left;
-}
-.opportunity-details.edit > form > ul.opportunity-switches > li {
-	white-space:nowrap;
-	margin-bottom:0.5em;
-}
-.opportunity-details.edit > form > ul.opportunity-switches > li.separate-top {
-	margin-bottom:2em;
-}
-
-.opportunity-details.edit > form > .actions {
-	clear:both;
-	padding-top:1em;
-}
-
-
+	border-radius:4px;
+}
 
 #footer {
 	display:block;
-	position:absolute;
-	left:0px;
-	right:0px;
-	bottom:0px;
-	min-height:100px;
-	
-	overflow:visible;
-	background-image:url('footer-pattern.png');
-	background-position:left bottom;
-	background-repeat:repeat-x;
-	
-	padding-left:32px;
-	padding-right:32px;
+	position:relative;
+	z-index:1;
+	padding:16px;
+	background-color:#F7F6F5;
 }
+
 #footnav {
 	display:block;
-	height:20px;
-	
-	padding:2px;
-	white-space:nowrap;
-	background-color:rgb(255,255,255);
-	font-size:16px;
+	font-size:14px;
+	line-height:16px;
+	padding-bottom:40px;
+}
+#footnav > ul {
+	display:block;
+	margin-bottom:16px;
+	padding:0px;
+	list-style-type:none;
+}
+#footnav > ul > li {
+	display:inline;
+	padding:0px;
+	margin-right:14px;
+}
+#footnav > ul > li.toplevel {
+	font-weight:bold;
 }
 #footnav a {
-	margin-left:1em;
-	margin-right:1em;
-	color:rgb(0,0,0);
-}
-#footnav a:last-child {
-}
-#footnav .title {
-	margin-left:0em;
-	margin-right:4em;
-	text-decoration:none;
+	color:#333333;
 }
 
-#smallprint {
-	margin-top:40px;
-	bottom:3px;
-	left:8px;
-	right:8px;
-	
-	color:rgb(120,120,120);
+#footer #copyright,
+#footer #techdetails {
+	margin:8px 0px;
 	font-size:10px;
-	line-height:1.2em;
-}
-#smallprint #techdetails,
-#smallprint #copyright {
-	max-width:200px;
-	
-	padding:5px;
-	overflow:hidden;
-	white-space:nowrap;
-	text-overflow:ellipsis;
-	background-color:rgb(255,255,255);
-}
-#smallprint:hover #techdetails,
-#smallprint:hover #copyright,
-#smallprint:focus #techdetails,
-#smallprint:focus #copyright {
-	max-width:none;
-	overflow:visible;
-}
-#smallprint #copyright {
-	float:left;
-	
-	text-align:left;
-}
-#smallprint #techdetails {
-	float:right;
-	
-	text-align:right;
-	text-transform:lowercase;
+	line-height:14px;
+	color:#AEA79F;
 }

=== removed file 'harvest/media/css/footer-pattern.png'
Binary files harvest/media/css/footer-pattern.png	2010-07-03 05:45:47 +0000 and harvest/media/css/footer-pattern.png	1970-01-01 00:00:00 +0000 differ
=== added file 'harvest/media/css/opportunities.css'
--- harvest/media/css/opportunities.css	1970-01-01 00:00:00 +0000
+++ harvest/media/css/opportunities.css	2011-05-05 18:46:15 +0000
@@ -0,0 +1,378 @@
+#filters {
+	display:block;
+	position:relative;
+	float:left;
+	min-width:160px;
+	
+	padding-right:16px;
+	font-size:12px;
+	line-height:1.4em;
+	color:#333333;
+}
+#filters ul {
+	display:block;
+	margin-left:16px;
+	width:100%;
+}
+#filters ul li {
+	display:block;
+	width:100%;
+}
+
+
+#filters a.item-toggle {
+	display:inline-block;
+	height:100%;
+	
+	color:inherit;
+	text-decoration:inherit;
+	font-style:inherit;
+}
+
+#filters .checkbox {
+	/* checkbox element should always be the same size */
+	display:inline-block;
+	width:12px;
+	color:inherit;
+}
+
+#filters .setfilter > .filter-value > ul > li:not([data-selected]) > .filter > .filter-value {
+	/* parent filter is turned off */
+	color:#8C8C8C;
+}
+
+#filters .setfilter > .filter-value > ul > li.prelight-off > .checkbox {
+	/* prelight for an item about to be deselected */
+	color:#8C8C8C;
+	text-decoration:line-through;
+}
+#filters .setfilter > .filter-value > ul > li.prelight-on > .checkbox {
+	/* prelight for an item about to be selected */
+	color:inherit;
+}
+
+#filters .setfilter > .filter-value > ul > li.prelight-off > .filter > .filter-value {
+	/* parent filter is about to be turned off */
+	color:#8C8C8C;
+}
+#filters .setfilter > .filter-value > ul > li.prelight-on > .filter > .filter-value {
+	/* parent filter is about to be turned on */
+	color:inherit;
+}
+
+
+
+#filters > .filtergroup {
+	/* a top-level filter group */
+	display:block;
+	margin-bottom:32px;
+}
+#filters > .filtergroup > .filter-label {
+	/* titles for groups of filters ("Packages" and "Opportunities") */
+	display:block;
+	margin-bottom:8px;
+	letter-spacing:-0.1em;
+	color:#505050;
+	font-size:16px;
+}
+#filters > .filtergroup > .filter-value > ul {
+	margin-left:0px;
+}
+#filters > .filtergroup > .filter-value > ul > li {
+	margin-bottom:5px;
+}
+
+#filters > .filtergroup > .filter-value > ul > li a.help {
+	vertical-align:top;
+	margin-left:8px;
+	font-weight:bold;
+}
+
+#filters .editfilter input {
+	width:8em;
+	border:none;
+	border-bottom:1px solid #ccc1c1;
+	padding:0px 2px 0px 2px;
+	background-color:inherit;
+	color:#333333;
+	font:inherit;
+}
+#filters .editfilter input.placeheld {
+	color:#B4B4B4;
+}
+
+
+
+#results-wrapper {
+	position:relative;
+	display:block;
+	overflow:auto;
+}
+
+#results-status {
+	position:relative;
+	width:100%;
+	display:none;
+	margin-top:8px;
+	z-index:10;
+	text-align:center;
+	background-image:url('results-status-shadow.png');
+	background-repeat:repeat-x;
+}
+#results-status > div {
+	min-height:19px; /* lines up height of #results-status background-image */
+}
+
+#results {
+	padding:8px;
+}
+
+#results > .results-message {
+	display:block;
+	margin-bottom:12px;
+	text-align:center;
+	font-size:16px;
+	line-height:24px;
+	color:#AEA79F;
+}
+
+#results > ul {
+	margin-left:0px;
+	margin-bottom:10px;
+}
+
+#results > .results-footnote {
+	display:block;
+	font-style:italic;
+	padding:8px 16px;
+}
+
+
+.sourcepackage {
+	display:block;
+	font-size:14px;
+	line-height:21px;
+}
+li.sourcepackage {
+	margin-top:5px;
+	margin-bottom:10px;
+	border-bottom:1px dotted #CCC;
+}
+.sourcepackage > .sourcepackage-header {
+	display:block;
+	padding:8px 16px;
+}
+li.sourcepackage > .sourcepackage-header {
+	-moz-border-radius:3px 3px 0px 0px;
+	border-radius:3px 3px 0px 0px; /* lines up with li.sourcepackage's border */
+}
+a.sourcepackage-header {
+	color:inherit;
+	text-decoration:none;
+}
+.sourcepackage-header > h3.sourcepackage-name {
+	display:inline;
+	margin:0px;
+	margin-right:10px;
+	color:#000000;
+}
+.sourcepackage-header > .status {
+	display:none; /* harvest.js will override this where necessary */
+}
+.sourcepackage-header > .status img {
+	width:16px;
+	height:16px;
+}
+.sourcepackage-header > .sourcepackage-summary {
+	display:inline;
+	float:right;
+	text-align:right;
+	font-size:10px;
+}
+
+.sourcepackage-details {
+	display:block;
+	padding:0px 16px 4px 16px;
+}
+
+/* collapsed state. (expanded is the default) */
+li.sourcepackage.collapsed {
+	margin-bottom:5px;
+	border-color:#FAFAFA;
+	box-shadow:none;
+	-moz-border-radius:3px 3px 0px 0px;
+	border-radius:3px 3px 0px 0px;
+}
+.sourcepackage.collapsed > .sourcepackage-details {
+	display:none;
+}
+
+/* prelights */
+.sourcepackage.expanded > a.sourcepackage-header, 
+.sourcepackage > a.sourcepackage-header:hover,
+.sourcepackage > a.sourcepackage-header:focus {
+	background-image:url('sourcepackage-header-stripes.png');
+	background-color:#DDDDDD;
+}
+a.sourcepackage-header:hover .sourcepackage-name,
+a.sourcepackage-header:focus .sourcepackage-name {
+	text-decoration:underline;
+}
+
+.sourcepackage-details > .extra {
+}
+.sourcepackage-details > .extra > .actions {
+	float:right;
+	text-align:right;
+	text-transform:lowercase;
+	color:#000000;
+	font-size:12px;
+}
+.sourcepackage-details > .extra > .actions > a {
+	margin:0px 16px;
+}
+
+.opportunity-list > h4.opportunity-list-title {
+	display:block;
+	color:#505050;
+	font-size:12px;
+	letter-spacing:-0.1em;
+}
+.opportunity-list > .opportunity-list-title > .opportunity-list-summary {
+	margin-left:5px;
+}
+
+.opportunity-list > ul {
+	margin-bottom:8px;
+	padding-left:16px;
+	list-style-image:url('opportunity-normal.png');
+}
+li.opportunity {
+	padding:4px 16px 4px 4px;
+}
+li.opportunity:hover {
+	background-color:#FAFAFA;
+}
+li.opportunity[data-opportunity-experience='1'] {
+	list-style-image:url('opportunity-experience-1.png');
+}
+li.opportunity[data-opportunity-experience='2'] {
+	list-style-image:url('opportunity-experience-2.png');
+}
+li.opportunity[data-opportunity-experience='3'] {
+	list-style-image:url('opportunity-experience-3.png');
+}
+
+.opportunity > .opportunity-header {
+	display:block;
+	line-height:1em;
+}
+.opportunity[data-opportunity-irrelevant] > .opportunity-header > .opportunity-description,
+.opportunity[data-opportunity-applied] > .opportunity-header > .opportunity-description {
+	text-decoration:line-through;
+}
+.opportunity-header > a.opportunity-description {
+	color:#000000;
+	font-size:16px;
+}
+.opportunity-header > .actions {
+	float:right;
+	text-align:right;
+	font-size:12px;
+	text-transform:lowercase;
+}
+li.opportunity > .opportunity-header > .actions {
+	opacity:0.4; /* color:#F1ECEE */
+}
+li.opportunity:hover > .opportunity-header > .actions {
+	opacity:1;
+}
+.opportunity-goaway-button {
+	font-size:10px;
+}
+.opportunity-header > .opportunity-summary {
+	margin-left:10px;
+	color:#707070;
+	font-size:12px;
+	text-transform:lowercase;
+}
+
+li.opportunity > .opportunity-details {
+	display:block;
+	margin-left:10px;
+}
+li.opportunity > .opportunity-details.edit {
+	background-color:#FFFFF0;
+}
+
+.opportunity-notes {
+	display:block;
+	width:100%;
+	max-width:35em;
+	font-size:12px;
+	line-height:1em;
+}
+.opportunity-notes input#new_note {
+	width:100%;
+	border:none;
+	border-bottom:1px solid #B4B4B4;
+	
+	padding:2px 5px;
+	background-color:inherit;
+	color:inherit;
+	font:inherit;
+}
+.opportunity-notes > ul {
+	margin:10px 5px;
+	max-height:10em;
+}
+.opportunity-notes > ul > li {
+	margin-bottom:1em;
+}
+.opportunity-notes > ul > li:last-child {
+	margin-bottom:0em;
+}
+.opportunity-notes > ul > li > .signature {
+	display:inline-block;
+	margin-left:1em;
+	vertical-align:sub;
+	color:#505050;
+	font-style:italic;
+	font-size:10px;
+}
+
+
+
+.opportunity-details.edit > form > div.opportunity-notes {
+	float:left;
+	margin-right:4em;
+	margin-bottom:2em;
+}
+
+.opportunity-details.edit > form > ul.opportunity-switches {
+	float:left;
+}
+.opportunity-details.edit > form > ul.opportunity-switches > li {
+	white-space:nowrap;
+	margin-bottom:0.5em;
+}
+.opportunity-details.edit > form > ul.opportunity-switches > li.separate-top {
+	margin-bottom:2em;
+}
+
+.opportunity-details.edit > form > .actions {
+	clear:both;
+	padding-top:1em;
+}
+
+
+
+.main#results-wrapper {
+	max-width:1000px;
+}
+.main.sourcepackage-details {
+	max-width:1000px;
+}
+.main.opportunity-details {
+	max-width:1000px;
+}

=== added file 'harvest/media/css/orangeheader-stripes.png'
Binary files harvest/media/css/orangeheader-stripes.png	1970-01-01 00:00:00 +0000 and harvest/media/css/orangeheader-stripes.png	2011-05-05 18:46:15 +0000 differ
=== modified file 'harvest/media/css/reset.css'
--- harvest/media/css/reset.css	2010-07-27 02:56:27 +0000
+++ harvest/media/css/reset.css	2011-05-05 18:46:15 +0000
@@ -1,6 +1,6 @@
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
+abbr, acronym, address, big, cite, code,
 del, dfn, em, font, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
@@ -33,11 +33,6 @@
 	content: none;
 }
 
-/* remember to define focus styles! */
-:focus {
-	outline: 0;
-}
-
 /* remember to highlight inserts somehow! */
 ins {
 	text-decoration: none;

=== added file 'harvest/media/css/sourcepackage-header-stripes.png'
Binary files harvest/media/css/sourcepackage-header-stripes.png	1970-01-01 00:00:00 +0000 and harvest/media/css/sourcepackage-header-stripes.png	2011-05-05 18:46:15 +0000 differ
=== added file 'harvest/media/css/welcome.css'
--- harvest/media/css/welcome.css	1970-01-01 00:00:00 +0000
+++ harvest/media/css/welcome.css	2011-05-05 18:46:15 +0000
@@ -0,0 +1,69 @@
+#welcome {
+	padding:16px;
+	max-width:1000px;
+}
+
+#welcome #start {
+	display:table;
+}
+
+#welcome #introduction {
+	display:table-cell;
+	width:100%;
+	font-size:16px;
+	line-height:1.2em;
+	padding:8px;
+}
+#welcome #introduction p {
+	max-width:400px;
+}
+
+#welcome #statistics {
+	display:table-cell;
+	text-align:right;
+	min-width:250px;
+	padding:8px 8px 32px 8px;
+	font-size:10px;
+	color:#707070;
+}
+
+#start_links {
+	margin:20px 0px 10px 0px;
+}
+#start_links a {
+	display:inline-block;
+	padding:8px 10px;
+	background-color:#DD4814;
+	border:#E5744D solid 2px;
+	-moz-border-radius:4px;
+	border-radius:4px; /* round border on bottom as well */
+	
+	font-size:20px;
+	color:#FFFFFF;
+}
+#start_links a:hover,
+#start_links a:focus {
+	background-color:#B83A0F;
+	border-color:#AD5334;
+}
+
+#welcome #faq {
+	display:table;
+	margin:32px 0px;
+}
+
+#welcome #faq ul {
+	display:table-row;
+}
+
+#welcome #faq li {
+	display:table-cell;
+	margin:16px;
+	padding:8px 8px 32px 8px;
+}
+#welcome #faq h3.question {
+	display:block;
+	font-weight:bold;
+	font-size:inherit;
+	margin:0px;
+}

=== removed file 'harvest/media/img/logo_humanity-search-icon.png'
Binary files harvest/media/img/logo_humanity-search-icon.png	2010-07-03 05:45:47 +0000 and harvest/media/img/logo_humanity-search-icon.png	1970-01-01 00:00:00 +0000 differ
=== modified file 'harvest/media/js/harvest.js'
--- harvest/media/js/harvest.js	2010-08-12 05:42:46 +0000
+++ harvest/media/js/harvest.js	2011-05-05 18:46:15 +0000
@@ -158,6 +158,14 @@
 		}
 	}
 	
+	this.force_disable = function () {
+		/* Tells the parent (if there is one) to disable this item. */
+		parent_filter = this.get_parent_filtergroup();
+		if ( parent_filter && parent_filter.item_is_selected(this.container) ) {
+			parent_filter.disable_item(this.container);
+		}
+	}
+	
 	
 	/* Callback functions */
 	this.enabled = function() {} /* called when this filter is enabled */
@@ -290,9 +298,15 @@
 		var edit_field = this.value_node.children('input');
 		
 		
-		this.edit_field_changed = function() {
-			this.force_enable();
-			this.value_changed();
+		this.edit_field_changed = function(event) {
+			if (event.target.value == "") {
+				/* Automatically disable when input is cleared. */
+				/* This may cause a problem with some filters in the future */
+				filter.force_disable();
+			} else {
+				filter.force_enable();
+			}
+			filter.value_changed();
 		}
 		
 		this.get_value_serialized = function () {
@@ -304,7 +318,7 @@
 		}
 		
 		/* we could handle 'change' instead of 'input' to only check value when typing has stopped */
-		edit_field.bind('input', function () { filter.edit_field_changed(); } );
+		edit_field.bind('input', filter.edit_field_changed);
 	}
 	
 	
@@ -436,7 +450,7 @@
 
 
 function Results (dom_node) {
-	/* Attached to the single #results-pane in the document. Receives
+	/* Attached to the single #results-wrapper in the document. Receives
 	   new query parameters from Filter objects, grabs and displays new
 	   results in the contained #results element. */
 	
@@ -456,8 +470,8 @@
 	this.future_query = {};
 	
 	this.container = $(dom_node);
-	this.output = $(dom_node).children('#results');
-	this.status_bubble = $(dom_node).children('#results-status');
+	this.output = $('#results');
+	this.status_bubble = $('#results-status');
 	
 	this.packages = {};
 	this.expanded_pkgs = [];
@@ -656,7 +670,7 @@
 }
 
 function create_results () {
-	return new Results($('#results-pane'));
+	return new Results($('#results-wrapper'));
 }
 
 

=== modified file 'harvest/templates/404.html'
--- harvest/templates/404.html	2009-09-13 15:20:17 +0000
+++ harvest/templates/404.html	2011-05-05 18:46:15 +0000
@@ -2,9 +2,12 @@
 
 {% load i18n %}
 
-{% block title %}{% trans "Page Not Found" %} - {{ block.super }}{% endblock %}
+{% block title %}{{ block.super }}: {% trans "Page Not Found" %}{% endblock %}
 
 {% block content %}
-    <h2>{% trans "Page Not Found" %}</h2>
-    <p>{% trans "The requested page could not be found." %}</p>
+<h1>{% trans "Page Not Found" %}</h1>
+<div class="main">
+	<p>{% blocktrans %}The page you requested could not be found.</p>
+	<p>If you were linked here from somewhere else, chances are you're looking for the <a href="/opportunities">opportunities browser</a>.{% endblocktrans %}</p>
+</div>
 {% endblock %}

=== modified file 'harvest/templates/500.html'
--- harvest/templates/500.html	2009-09-13 15:20:17 +0000
+++ harvest/templates/500.html	2011-05-05 18:46:15 +0000
@@ -2,9 +2,11 @@
 
 {% load i18n %}
 
-{% block title %}{% trans "Server Error" %} - {{ block.super }}{% endblock %}
+{% block title %}{{ block.super }}: {% trans "Server Error" %}{% endblock %}
 
 {% block content %}
-    <h2>{% trans "Server Error" %}</h2>
-    <p>{% trans "A server error has occurred." %}</p>
+<h1>{% trans "Server Error" %}</h1>
+<div class="main">
+	<p>{% blocktrans %}A server error has occurred.{% endblocktrans %}</p>
+</div>
 {% endblock %}

=== modified file 'harvest/templates/base.html'
--- harvest/templates/base.html	2010-10-18 10:01:45 +0000
+++ harvest/templates/base.html	2011-05-05 18:46:15 +0000
@@ -8,10 +8,9 @@
 	
 	<link rel="stortcut icon" href="{{ MEDIA_URL }}img/favicon.ico" type="image/x-icon" />
 	
-	<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css' />
-	
 	<link rel="stylesheet" href="{{ MEDIA_URL }}css/reset.css" />
-	<link rel="stylesheet" href="{{ MEDIA_URL }}css/style.css" />
+	<link rel="stylesheet" href="{{ MEDIA_URL }}css/base.css" />
+	{% block extracss %}{% endblock %}
 
 	<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.4.2.min.js"></script>
 	<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui-effects-1.8.2.min.js"></script>
@@ -23,24 +22,36 @@
 </head>
 
 <body>
-<div id="container">
+
+<div id="wrapper">
 
 <div id="header">
-	<a id="sitetitle" href="{% url home %}" class="quiet">
-		<img id="sitelogo" src="{{ MEDIA_URL }}img/logo_humanity-search-icon.png" />
-		<h1 id="sitename">{% trans "Harvest" %}</h1>
-		{% if harvest_version_name %}<span id="releasename">{{harvest_version_name}}</span>{% endif %}
-	</a>
-	
-	<span id="userdata">
-		{% if user.is_authenticated %}
-			<span class="username">{{ user.username }}</span><br />
-			<a class="loginbutton" href="/logout" tabindex="1">Log out</a>
-		{% else %}
-			<span class="username"></span><br />
-			<a class="loginbutton" href="/openid/login">Log in</a>
-		{% endif %}
-	</span>
+	<div id="extheader">
+		<ul>
+		<li><a href="http://www.ubuntu.com">Ubuntu.com</a></li>
+		<li><a href="http://www.ubuntu.com/community">Community</a></li>
+		<li><a href="http://www.ubuntu.com/support">Support</a></li>
+		<li><a href="http://www.ubuntu.com/partners">Partners</a></li>
+		</ul>
+	</div>
+	
+	<div id="mainheader">
+		<a id="sitetitle" href="{% url home %}" class="quiet">
+			<span id="sitename">{% trans "Harvest" %}</span>
+			{% if harvest_version_name %}<span id="releasename">{{harvest_version_name}}</span>{% endif %}
+		</a>
+	
+		<span id="userdata">
+			<span class="username">{{ user.username }}</span>
+			<span class="useraction"><ul>
+				{% if user.is_authenticated %}
+				<li><a href="/logout">{% trans "Log out" %}</a></li>
+				{% else %}
+				<li><a href="/openid/login">{% trans "Log in" %}</a></li>
+				{% endif %}
+			</ul></span>
+		</span>
+	</div>
 	
 	{% if messages %}
 		<div id="messages"><ul>
@@ -51,32 +62,36 @@
 	{% endif %}
 </div>
 
-<div id="content">
+<div id="container">
+	<div id="content">
 	{% block content %}{% endblock %}
+	</div>
 	<div class="bottom"></div>
 </div>
 
+</div>
+
 <div id="footer">
-	<div id="footnav"><nav>
-		<a class="title" href="{% url home %}" tabindex="2">{% trans "Harvest" %}</a> <a href="http://answers.launchpad.net/harvest" target="_blank" tabindex="2">{% trans "Help" %}</a> <a href="http://bugs.launchpad.net/harvest" target="_blank" tabindex="2">{% trans "Bugs" %}</a> <a href="http://code.launchpad.net/harvest" target="_blank" tabindex="2">{% trans "Code" %}</a>
-	</nav></div>
+	<div id="footnav">
+		<ul>
+		<li class="toplevel"><a href="{% url home %}">{% trans "Harvest" %}</a></li>
+		<li><a href="http://answers.launchpad.net/harvest" target="_blank">{% trans "Help" %}</a></li>
+		<li><a href="http://bugs.launchpad.net/harvest" target="_blank">{% trans "Bugs" %}</a></li>
+		<li><a href="http://code.launchpad.net/harvest" target="_blank">{% trans "Code" %}</a></li>
+		</ul>
+	</div>
 	
-	<div id="smallprint" tabindex="3">
-		<span id="copyright">
+	<div id="copyright">
 		&copy; 2008-2010 Canonical Ltd., Ubuntu Community
 		<br />Ubuntu and Canonical are registered trademarks of Canonical Ltd.
-		</span>
-		
-		<span id="techdetails">
+	</div>
+	
+	<div id="techdetails">
 		{% trans "Harvest" %} {{ harvest_version }}
 		<br /><span id="requeststats"></span>
-		</span>
-		
-		<div class="bottom"></div>
 	</div>
 </div>
 
-</div>
 </body>
 
 </html>

=== modified file 'harvest/templates/index.html'
--- harvest/templates/index.html	2010-10-12 02:55:53 +0000
+++ harvest/templates/index.html	2011-05-05 18:46:15 +0000
@@ -2,65 +2,61 @@
 
 {% load i18n %}
 
+{% block extracss %}<link rel="stylesheet" href="{{ MEDIA_URL }}css/welcome.css" />{% endblock %}
+
 {% block content %}
 
-<div id="content_welcome">
+<h1>{% trans "Welcome to Harvest" %}</h1>
 
+<div id="welcome" class="main">
 
 <div id="start">
 	<div id="introduction">
-		<h2 class="sectiontitle">{% trans "Welcome to Harvest" %}</h2>
 		<p>{% blocktrans %}Harvest makes it easy to find low-hanging opportunities in Ubuntu. It aggregates the mass of todo lists we use every day so it's simple to find and coordinate work.{% endblocktrans %}</p>
+		<div id="start_links"><nav>
+			<a href="{% url opportunities.views.filter %}">{% trans "Find opportunities" %}</a>
+		</nav></div>
 	</div>
 	
-	<div id="start_links"><nav>
-		<a href="{% url opportunities.views.filter %}">{% trans "Find opportunities" %}</a>
-	</nav></div>
-	
 	<div id="statistics">
-	<ul>
-		<li>{% blocktrans count opportunities as counter %}{{ counter }} opportunity{% plural %}{{ counter }} opportunities{% endblocktrans %} {% blocktrans count sourcepackages as counter %}in {{ counter }} source package{% plural %}in {{ counter }} source packages{% endblocktrans %}</li>
-		<li>{% blocktrans count opportunitylists as counter %}{{ counter }} opportunity list{% plural %}{{ counter }} opportunity lists{% endblocktrans %}</li>
-		<li>{% blocktrans count notes as counter %}{{ counter }} note{% plural %}{{ counter }} notes{% endblocktrans %}</li>
-		<li>{% blocktrans count users as counter %}{{ counter }} user{% plural %}{{ counter }} users{% endblocktrans %}</li>
-	</ul>
+		<ul>
+			<li>{% blocktrans count opportunities as counter %}{{ counter }} opportunity{% plural %}{{ counter }} opportunities{% endblocktrans %} {% blocktrans count sourcepackages as counter %}in {{ counter }} source package{% plural %}in {{ counter }} source packages{% endblocktrans %}</li>
+			<li>{% blocktrans count opportunitylists as counter %}{{ counter }} opportunity list{% plural %}{{ counter }} opportunity lists{% endblocktrans %}</li>
+			<li>{% blocktrans count notes as counter %}{{ counter }} note{% plural %}{{ counter }} notes{% endblocktrans %}</li>
+			<li>{% blocktrans count users as counter %}{{ counter }} user{% plural %}{{ counter }} users{% endblocktrans %}</li>
+		</ul>
 	</div>
 </div>
 
 <div id="faq">
-	<div>
 	<ul>
 		<li>
-		<span class="question">{% trans "What can I do with Harvest?" %}</span>
+		<h3 class="question">{% trans "What can I do with Harvest?" %}</h3>
 		<p>{% blocktrans %}Harvest helps find bugs that could be easy to address, as well as changes that can improve packages. When updating your packages, take a look at the available opportunities to get a feel for what's new both in and outside Ubuntu.{% endblocktrans %}</p>
 		</li>
 		
 		<li>
-		<span class="question">{% trans "Why should I log in?" %}</span>
-		<p>{% blocktrans %}You can log in with your Launchpad account to help us organise opportunities in Harvest. Click an opportunity's Edit button to review it, then mark it Irrelevant if it doesn't apply to us or Applied if it's been handled.{% endblocktrans %}</p>
+		<h3 class="question">{% trans "Why should I log in?" %}</h3>
+		<p>{% blocktrans %}You can log in with your Launchpad account to help us organise opportunities in Harvest. Click an opportunity's Edit button to review it, then mark it Applied if it has been handled or Irrelevant if it doesn't relate to us.{% endblocktrans %}</p>
 		<li>
 		</li>
 		
 		<li>
-		<span class="question">{% trans "What are Notes?" %}</span>
+		<h3 class="question">{% trans "What are Notes?" %}</h3>
 		<p>{% blocktrans %}Notes are short messages you can stick to opportunities for other Harvest users to see. They don't use much space, so just add them whenever they might help. For example, if you mark an opportunity Irrelevant, you can add a note explaining why.{% endblocktrans %}</p>
 		</li>
 	</ul>
-	</div>
-	
-	<div>
 	<ul>
 		<li>
-		<span class="question">{% trans "Why is Harvest the way it is?" %}</span>
+		<h3 class="question">{% trans "Why is Harvest the way it is?" %}</h3>
 		<p>{% blocktrans %}Harvest is based on a simple design: let others do the hard work of assembling lists. Harvest just knows packages, lists and opportunities. It doesn't know what an open or fixed bug is or who upstream is.{% endblocktrans %}</p>
 		</li>
 
 		<li>
-		<span class="question">{% trans "I found a bug. What do I do?" %}</span>
+		<h3 class="question">{% trans "I found a bug. What do I do?" %}</h3>
 		<p>{% blocktrans %}If it's about the UI or the functionality of the site, please file a bug on <a href="http://bugs.launchpad.net/harvest/+filebug">harvest</a> in Launchpad. If it's about some piece of data in Harvest, it's likely a script that fetches it. In that case, please file your bug on <a href="http://bugs.launchpad.net/harvest-data/+filebug">harvest-data</a> instead. The <a href="http://bazaar.launchpad.net/~harvest-dev/harvest/trunk/annotate/head:/HACKING">hacking guide</a> explains more.{% endblocktrans %}</p>
 		</li>
 	</ul>
-	</div>
 </div>
 
 </div>

=== removed file 'harvest/templates/one_column.html'
--- harvest/templates/one_column.html	2010-08-31 06:29:10 +0000
+++ harvest/templates/one_column.html	1970-01-01 00:00:00 +0000
@@ -1,10 +0,0 @@
-{% extends "base.html" %}
-{% load i18n %}
-
-{% block content %}
-<div class="one_column">
-	<h2 class="sectiontitle">{% block pagetitle %}{% endblock %}</h2>
-	{% block content_main %}{% endblock %}
-</div>
-{% endblock %}
-

=== modified file 'harvest/templates/opportunities/filter.html'
--- harvest/templates/opportunities/filter.html	2011-05-02 02:39:20 +0000
+++ harvest/templates/opportunities/filter.html	2011-05-05 18:46:15 +0000
@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% load i18n %}
 
+{% block extracss %}<link rel="stylesheet" href="{{ MEDIA_URL }}css/opportunities.css" />{% endblock %}
+
 {% block extrahead %}
 <link rel="alternate" type="application/rss+xml" title="{% blocktrans %}25 newest opportunities{% endblocktrans %}" href="{% url rss_newest_opportunities %}" />
 {% endblock %}
@@ -14,7 +16,7 @@
 	{{filters_opp.render}}
 </div>
 
-<div id="results-pane">
+<div id="results-wrapper" class="main">
 	<div id="results-status"></div>
 	<div id="results">
 	{% include "opportunities/include/filter_results.html" %}

=== modified file 'harvest/templates/opportunities/include/filter_results.html'
--- harvest/templates/opportunities/include/filter_results.html	2010-08-13 22:09:49 +0000
+++ harvest/templates/opportunities/include/filter_results.html	2011-05-05 18:46:15 +0000
@@ -15,7 +15,7 @@
 	{% for package in packages_list.get_visible_packages %}
 	<li data-package-id="{{ package.real.id }}" class="sourcepackage {% if package.expanded %}expanded{% else %}collapsed{% endif %}">
 		<a class="sourcepackage-header" href="{{ package.get_expand_toggle_url }}">
-			<h2 class="sourcepackage-name">{{ package.real.name }}</h2>
+			<h3 class="sourcepackage-name">{{ package.real.name }}</h3>
 			<span class="status"></span>
 			{% comment %}<span class="sourcepackage-summary"></span>{% endcomment %}
 			<div class="bottom"></div>
@@ -27,20 +27,20 @@
 		</div>
 	</li>
 	{% endfor %}
-	
-	{% with packages_list.get_hidden_packages|length as hidden_count %}
-	{% if hidden_count %}
-	<li><small>
-		{% blocktrans count hidden_count as counter %}
-		{{ counter }} package has no matching opportunities
-		{% plural %}
-		{{ counter }} packages have no matching opportunities
-		{% endblocktrans %}
-	</small></li>
-	{% endif %}
-	{% endwith %}
 </ul>
 
+<div class="results-footnote">
+{% with packages_list.get_hidden_packages|length as hidden_count %}
+{% if hidden_count %}
+	{% blocktrans count hidden_count as counter %}
+	{{ counter }} selected package has no matching opportunities
+	{% plural %}
+	{{ counter }} selected packages have no matching opportunities
+	{% endblocktrans %}
+{% endif %}
+{% endwith %}
+</div>
+
 {% else %}
 
 <div class="results-message">

=== modified file 'harvest/templates/opportunities/include/opportunity.html'
--- harvest/templates/opportunities/include/opportunity.html	2010-10-05 13:31:20 +0000
+++ harvest/templates/opportunities/include/opportunity.html	2011-05-05 18:46:15 +0000
@@ -3,9 +3,11 @@
 <div class="opportunity-header">
 	<a href="{{opportunity.url}}" class="opportunity-description" target="_blank">{{ opportunity.description }}</a>
 	<span class="actions">
+		{% if user.is_authenticated %}
 		<a href="{% url opportunity_edit opportunity.id %}?next={{request.get_full_path}}" target="_blank" class="opportunity-edit-button">{% trans 'edit' %}</a>
 		(<a href="{% url opportunity_applied opportunity.id %}?next={{request.get_full_path}}" class="opportunity-goaway-button" title="{% trans 'mark opportunity as applied' %}">{% trans 'applied' %}</a>
 		<a href="{% url opportunity_irrelevant opportunity.id %}?next={{request.get_full_path}}" class="opportunity-goaway-button" title="{% trans 'mark opportunity as irrelevant' %}">{% trans 'irrelevant' %}</a>)
+		{% endif %}
 	</span>
 	<span class="opportunity-summary">
 		{{ opportunity.summary|join:', ' }}

=== removed file 'harvest/templates/opportunities/include/package.html'
--- harvest/templates/opportunities/include/package.html	2010-07-30 21:45:23 +0000
+++ harvest/templates/opportunities/include/package.html	1970-01-01 00:00:00 +0000
@@ -1,14 +0,0 @@
-{% load i18n %}
-
-<a class="sourcepackage-header" href="{{ package.get_expand_toggle_url }}">
-	<h2 class="sourcepackage-name">{{ package.real.name }}</h2>
-	<span class="status"></span>
-	{% comment %}<span class="sourcepackage-summary"></span>{% endcomment %}
-	<div class="bottom"></div>
-</a>
-<div class="sourcepackage-details">
-	{% if package.expanded %}
-	{% include "opportunities/include/package_details.html" %}
-	{% endif %}
-</div>
-

=== modified file 'harvest/templates/opportunities/include/package_details.html'
--- harvest/templates/opportunities/include/package_details.html	2011-05-02 00:20:31 +0000
+++ harvest/templates/opportunities/include/package_details.html	2011-05-05 18:46:15 +0000
@@ -3,11 +3,11 @@
 {% regroup package.get_visible_opportunities by opportunitylist as opportunities %}
 {% for opplist in opportunities %}
 <div class="opportunity-list {% if opplist.grouper.featured %}featured{% endif %}">
-<h3 class="opportunity-list-title">{{ opplist.grouper }}
+<h4 class="opportunity-list-title">{{ opplist.grouper }}
 <span class="opportunity-list-summary">
 	{% if opplist.grouper.featured %}<img src="/media/img/opplist-featured.png" alt="{% trans 'featured' %}" title="{% trans 'featured' %}" />{% endif %}
 </span>
-</h3>
+</h4>
 <ul>
 	{# FIXME: use |dictsort:'experience'|dictsort:'description' here (see comment in wrappers.py) #}
 	{% for opportunity in opplist.list %}
@@ -17,15 +17,20 @@
 </div>
 {% endfor %}
 
+{% with package.get_hidden_opportunities.count as hidden_count %}
+{% ifnotequal hidden_count 0 %}{% ifnotequal hidden_count '' %}
+<div class="opportunity-list">
+<h4 class="opportunity-list-title">
+{% blocktrans count hidden_count as counter %}{{ counter }} hidden opportunity{% plural %}{{ counter }} hidden opportunities{% endblocktrans %}
+</h4>
+</div>
+{% endifnotequal %}{% endifnotequal %}
+{% endwith %}
+
 <div class="extra">
 	<div class="actions">
 		<a href="{% url single_package package.real.name %}" target="_blank">{% trans "Permalink" %}</a>
 		<a href="{% url rss_single_package package.real.name %}" target="_blank">{% trans "RSS" %}</a>
 	</div>
-	{% with package.get_hidden_opportunities.count as hidden_count %}
-	{% ifnotequal hidden_count 0 %}
-	{% blocktrans count hidden_count as counter %}{{ counter }} opportunity hidden{% plural %}{{ counter }} opportunities hidden{% endblocktrans %}
-	{% endifnotequal %}
-	{% endwith %}
 	<div class="bottom"></div>
 </div>

=== modified file 'harvest/templates/opportunities/opportunity_edit.html'
--- harvest/templates/opportunities/opportunity_edit.html	2010-08-14 18:09:31 +0000
+++ harvest/templates/opportunities/opportunity_edit.html	2011-05-05 18:46:15 +0000
@@ -1,15 +1,13 @@
-{% extends "one_column.html" %}
+{% extends "base.html" %}
 {% load i18n %}
 
+{% block extracss %}<link rel="stylesheet" href="{{ MEDIA_URL }}css/opportunities.css" />{% endblock %}
+
 {% block title %}{{ block.super }}: {{ opportunity.description }}{% endblock %}
 
-{% block pagetitle %}
-Opportunity <a href="{{opportunity.url}}" class="opportunity-description" target="_blank">{{ opportunity.description }}</a> in {% with opportunity.sourcepackage.name as pkgname %}<a href="{% url single_package pkgname %}">{{ pkgname }}</a>{% endwith %}
-{% endblock %}
-
-{% block content_main %}
-<div class="opportunity-details edit">
+{% block content %}
+<h1>Opportunity <a href="{{opportunity.url}}" class="opportunity-description" target="_blank">{{ opportunity.description }}</a> in {% with opportunity.sourcepackage.name as pkgname %}<a href="{% url single_package pkgname %}">{{ pkgname }}</a>{% endwith %}</h1>
+<div class="main opportunity-details edit">
 	{% include "opportunities/include/opportunity_details_edit.html" %}
 </div>
 {% endblock %}
-

=== modified file 'harvest/templates/opportunities/single_package.html'
--- harvest/templates/opportunities/single_package.html	2011-05-02 01:22:44 +0000
+++ harvest/templates/opportunities/single_package.html	2011-05-05 18:46:15 +0000
@@ -1,17 +1,17 @@
-{% extends "one_column.html" %}
+{% extends "base.html" %}
 {% load i18n %}
 
+{% block extracss %}<link rel="stylesheet" href="{{ MEDIA_URL }}css/opportunities.css" />{% endblock %}
+
 {% block extrahead %}
 <link rel="alternate" type="application/rss+xml" title="{% blocktrans with package.real.name as name %}Opportunities for {{name}}{% endblocktrans %}" href="{% url rss_single_package package.real.name %}" />
 {% endblock %}
 
 {% block title %}{{ block.super }}: {{ package.real.name }}{% endblock %}
 
-{% block pagetitle %}{{ package.real.name }}{% endblock %}
-
-{% block content_main %}
-<div class="sourcepackage-details">
+{% block content %}
+<h1>{{ package.real.name }}</h1>
+<div class="main sourcepackage-details">
 	{% include "opportunities/include/package_details.html" %}
 </div>
 {% endblock %}
-