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
Merge pull request #675 from roryokane/clarify-legend

clarify legend on home page by restyling