<!DOCTYPE html>
<html>

<!-- BEGIN DOC HEADER -->
<head>
<meta charset='utf-8' />
<title>Object Oriented CSS</title>
<!--[if IE]><script src="http://d2o0t5hpnwv4c1.cloudfront.net/450_ooCss/http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- This makes IE recognize and use the HTML5 elements -->

<!-- BEGIN CSS -->
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/text.css" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<!-- END CSS -->

<!-- BEGIN BODY -->
<body>

<!-- BEGIN CONTAINER -->
<article id="container">

<!-- BEGIN HEADER -->
<header>
<h1>This is my header</h1>
<!-- <h2 class="subtitle">(really just a bunch of best practices and patterns; not a new language)</h2> -->
	
<!-- BEGIN NAVIGATION -->
<!-- <nav>
<ul>
<li><a class="selected" href="index.htm">Home</a></li>
<li><a href="=post.htm">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav> -->
<!-- END NAVIGATION -->

</header>
<!-- END HEADER -->

<!-- BEGIN CONTENT SECTION -->
<section>

<!-- BEGIN POST -->
<article class="post">

<!-- BEGIN POST HEADER -->
<header>
<span class="date">UPDATED: February 18, 2011</span>
<h2><a href="post.htm">We're a really cool band, ready to rock</a></h2>
</header>

<!-- BEGIN POST CONTENT -->
<section>
<img src="img/band.jpg" alt="Work Awesome" width="493px">
<p>Lemonpickels is a Florida-based band who've amassed a huge global following on YouTube, with over 170 million video views so far. 
</p><p>Though they have a silly name, Lemonpickels is a real band* with a real sense of musicality - they play their own music, write all their own songs and consider themselves real music connoisseurs.</p> 
<p>The band started in 2001 when Kyle Marshall and Ricky Cromroot met in line at a grocery store. Ricky was humming "Always" from Bon Jovi, and soon they began singing out loud together. After a few short versus sung out to the benefit of the grocery shoppers, the two laughed and hugged while the shocked audience applauded. It was the start of something big.</p>
<p>A few months later, the boys added guitarist Spencer Blade and drummer Leonardo Fransisco.</p> 
<p>Now, the band is famous throughout the world for their smooth style, original lyrics, and impromptu grocery store concerts.</p>
</section>

<!-- BEGIN POST FOOTER -->
<footer>
<!-- <ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul> -->
</footer>

</article>
<!-- END POST -->

<!-- BEGIN COMMENTS -->
<article class="comments">
<header><h2>Reader Reviews</h2></header>

<section>

<article class="comment">
<header><p>Bill Rockston</p><p class="meta">Feb. 19</p></header>
<section><p>Caught these guys at the Aragon last </p></section>
</article>

<article class="reply comment">
<header><p>Come On Bill!</p><p class="meta">Sept 12</p></header>
<section><p>They weren't that great. They were better before they appeared on Conan. </p></section>
</article>

</section>

<!-- BEGIN COMMENT FORM -->
<footer>
<h2>Post a review</h2>
<form method="post" action="" class="comments-form">
<p><label>Name</label><input type="text" /></p>
<p><label>Email</label><input type="text" /></p>
<p><label>Website</label><input type="text" /></p>
<p><label>Comment</label><textarea></textarea></p>
<p><button type="submit">Submit</button></p>
</form>
</footer>
<!-- END COMMENT FORM -->

</article>
<!-- END POST -->

</section>
<!-- END CONTENT SECTION -->

<!-- BEGIN SIDERAIL -->
<aside>

<!-- BEGIN ARTICLE -->

<article class="side-box">
<header>
<img src="http://www.cmasters.bloxcms.com/content/tncms/live/editorial/editorial-core-base/resources/images/_ads/300_250.gif" alt="Work Awesome">
</header>
</article>

<article class="side-box">
<header>
<h2>Related Videos</h2>
</header>

<section>
<div class="related-item">
<object width="300" height="260px">
<param name="movie" value="http://www.youtube.com/v/vHmz-MHU3kg?f=videos&amp;app=youtube_gdata">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/vHmz-MHU3kg?f=videos&amp;app=youtube_gdata" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="240px" style="visibility: visible; ">
</object>
<div class="clear"></div>
</div>

<ul class="tn-story-extra-links">
<li><a href="/train-drops-of-jupiter-boyce-avenue-acoustic-cover-on-itunes/youtube_5ceacc66-6251-11df-883e-001cc4c002e0.html" title="ayouTube.title">Train - Drops of Jupiter (Boyce Avenue acoustic cover) on iTunes</a></li>
<li><a href="/vertical-horizon-everything-you-want-boyce-avenue-acoustic-cover-on/youtube_66572d9e-6251-11df-a834-001cc4c002e0.html" title="ayouTube.title">Vertical Horizon - Everything You Want (Boyce Avenue acoustic cover) on iTunes</a></li>
<li><a href="/rihanna-disturbia-boyce-avenue-acoustic-cover-on-itunes/youtube_6eef6fa2-6251-11df-ba08-001cc4c002e0.html" title="ayouTube.title">Rihanna - Disturbia (Boyce Avenue acoustic cover) on iTunes</a></li>
<li><a href="/the-goo-goo-dolls-iris-boyce-avenue-acoustic-cover-on/youtube_77263e30-6251-11df-a79a-001cc4c002e0.html" title="ayouTube.title">The Goo Goo Dolls - Iris (Boyce Avenue acoustic cover) on iTunes</a></li>
<li><a href="/chris-brown-forever-boyce-avenue-acoustic-cover-on-itunes/youtube_7c8b8984-6251-11df-86cc-001cc4c002e0.html" title="ayouTube.title">Chris Brown - Forever (Boyce Avenue acoustic cover) on iTunes</a></li>
</ul>
</section>
</article>
<!-- END ARTICLE -->

<!-- BEGIN ARTICLE -->
<article class="pop-out side-box">
<header class="post-it">
<h2>Recent Comments</h2>
<p>see what folks are saying</p>
</header>

<section>
<ul>

<li>
<p>I think oocss is really cool!</p>
<p class="meta">By J. Garret on Sept 12, about "The Intro Post"</p>
</li>

<li>
<p>Are you kidding? CSS can't ever be Object Oriented.</p>
<p class="meta">By Joe Thomas on Sept 11, about "The Intro Post"</p>
</li>

<li>
<p>Envato has done it again; workAwesome is simply awesome!</p>
<p class="meta">By GV on Sept 10, about "Check out WorkAwesome"</p>
</li>

<li>
<p>I really like the site's desing; another work of art from Collis.</p>
<p class="meta">By Anonymous on Sept 10, about "Check out WorkAwesome"</p>
</li>

</ul>
</section>

</article>
<!-- END ARTICLE -->

</aside>
<!-- END SIDERAIL -->

<!-- BEGIN PAGE FOOTER -->
<footer>
<ul>
<li>Standard</li>
<li>Footer</li>
<li>Information</li>
<li>Yada</li>
<li>Yada</li>
</ul>
</footer>
<!-- END PAGE FOOTER -->

</article>
<!-- END CONTAINER -->

</body>
<!-- END BODY -->

</html>
<!-- END DOCUMENT -->