make legend on home page more helpful by moving and restyling

style "Maroon" in the legend like the labs items it refers to

make the legend stand apart from the list more

and refactor the .labs-example styles

The `<b>` element is perfectly legitimate here: http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element . I am making the '*'s stand out more without conveying extra importance or alternate voice or mood.

style legend with a grey border

to show that it's a different type of content from the lists above

also changed from a `div` with `p`s to a `ul`, as that matches semantics more closely

move legend under the first app list

and remove grey border around legend, since the legend is prominent enough now without it

done at request of https://github.com/tastejs/todomvc/pull/675#issuecomment-23901896

index.html

@@ -147,6 +147,10 @@
 							<a href="labs/architecture-examples/sapui5/" data-source="http://scn.sap.com/community/developer-center/front-end" data-content="SAPUI5 is SAP's HTML5-based UI technology that allows you to build rich, interactive Web applications.">SAPUI5</a>
 						</li>
 					</ul>
+					<ul class="legend">
+						<li><b>*</b> <span class="label">R</span> = App also demonstrates routing</li>
+						<li><b>*</b> <span class="labs-example">Maroon</span> = App requires further work to be spec-compliant</li>
+					</ul>
 					<hr>
 					<h2>Compile To JavaScript</h2>
 					<ul class="applist ctojs">
@@ -251,8 +255,6 @@
 							<a href="architecture-examples/jquery/" data-source="http://jquery.com" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">jQuery</a>
 						</li>
 					</ul>
-					<p>* <span class="label">R</span> = App also demonstrates routing</p>
-					<p>* Maroon = App requires further work to be spec-compliant</p>
 				</div>
 			</div>
 			<hr>

site/css/main.css

@@ -170,12 +170,12 @@ header nav a:not(:last-child) {
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 
-.applist .labs a{
-	color:#582C42;
+.applist .labs a, .labs-example {
+	color: #582C42;
 }
 
 .applist .label,
-p .label {
+.legend .label {
 	position: relative;
 	top: -3px;
 	font-size: 9px;
@@ -196,6 +196,23 @@ p .label {
 	columns: 2;
 }
 
+.legend {
+	margin-top: 20px;
+	margin-left: 0;
+	list-style-type: none;
+}
+
+.legend li {
+	margin-bottom: 0.5em;
+}
+.legend li:last-child {
+	margin-bottom: 0;
+}
+
+.labs-example {
+	font-weight: bold;
+}
+
 .collapsed {
 	overflow: hidden;
 	max-height: 0;