Edit in JSFiddle


              
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,100italic,light,lightitalic,regular,regularitalic,600,600italic,bold,bolditalic|Josefin+Slab:regular,bold|Permanent+Marker' rel='stylesheet' type='text/css'>

<link rel="icon" href="/images/favicon.png" type="image/x-png">
<title>{PageTitle}</title>

<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="dogmeat">
<p>Valid CSS! Posterous theme  by    <a href="http://whatgetsmehot.posterous.com" target="_blank"><img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="Valid CSS!" /><a href="http://whatgetsmehot.posterous.com" target="_blank">Dogmeat</a>

{block:NotSearchOrTag}
<form class="search"><input type="hidden" name="sort" value="{SearchSort}"> <input type="text" name="search" class="text" value="{SearchQuery}" id="search-box"> <input type="submit" value="Search" class="submit c1" id="q"></form>
{block:SearchBox searchbox_button="searchbox_button" searchbox="searchbox"/} {/block:NotSearchOrTag} {block:HasPages}
<ul>
<li class="c2">{block:Pages}</li>
<li><a href="{URL}" class="{Current}" rel="{External}">{Label}</a></li>
<li class="c2">{/block:Pages}</li>
</ul>
{/block:HasPages}
<div class="clear"></div>
{block:HeaderImage}
<h1 class="header_image"><a href="{SiteURL}" title="{Title}" rel="index"><img src="{HeaderImageURL-500}" alt="{Title} - {Description}"></a></h1>
{Else}
<h1><a href="{SiteURL}" title="{Title}" rel="index">{Title}</a></h1>
{block:Description}
<h2>{Description}</h2>
{/block:Description} {/block:HeaderImage}
<div id="post_column">{block:ShowOrList} {block:Show} <a href="{BlogURL}" rel="up">← Back to blog</a> {/block:Show} {/block:ShowOrList} {block:Tag}
<h1>Filed under: <strong>{Tag}</strong></h1>
<div><a href="{GlobalTagURL}" class="c3" id="global_tags">See all posts on Posterous with this tag »</a></div>
{block:ShowOnHover action_id="extra_links" hidden_div="global_tags"/} {/block:Tag} {block:SearchPage}
<h1>{block:SearchResultOne}One result found searching for{/block:SearchResultOne} {block:SearchResultMany}{SearchResultCount} results found searching for{/block:SearchResultMany} {block:SearchResultNone}No results found searching for{/block:SearchResultNone}</h1>
<form class="search"><input type="hidden" name="sort" value="{SearchSort}"> <input type="text" name="search" class="text" id="searchbox" value="{SearchQuery}"> <input type="submit" value="Search" class="submit"> <a href="{CurrentURL}" class="xsmall">clear</a></form>
<ul>
<li>Sort by:</li>
<li>{block:SearchSortBestmatch}Best match{Else}<a href="{CurrentURL}?search={SearchQuery}&amp;sort=bestmatch">Best match</a>{/block:SearchSortBestmatch}</li>
<li>{block:SearchSortRecent}Most recent{Else}<a href="{CurrentURL}?search={SearchQuery}&amp;sort=recent">Most recent</a>{/block:SearchSortRecent}</li>
<li>{block:SearchSortInteresting}Most interesting{Else}<a href="{CurrentURL}?search={SearchQuery}&amp;sort=interesting">Most interesting</a>{/block:SearchSortInteresting}</li>
</ul>
<a href="{PosterousURL}/explore/?search={SearchQuery}" id="search_all" class="xsmall">Search all of Posterous for <strong>{SearchQuery}</strong> »</a> {/block:SearchPage}
<div id="articles">{block:List}
<ul class="post-list">
<li class="c2">{block:Posts}</li>
<li><a href="{Permalink}">{block:PostImage size='180' dimension='width'} <span class="post-brief-image-container post-brief-image"><img src="{PostImageURL}" width='180' alt="** PLEASE DESCRIBE THIS IMAGE **"></span> {Else} {block:BodyExcerpt strip_tags="true"} <span class="post-brief-text">{BodyExcerpt}</span> {/block:BodyExcerpt} {/block:PostImage} <span class="post-title">{Title}</span></a></li>
<li class="c2">{/block:Posts}</li>
</ul>
<div class="clear"></div>
{/block:List} {block:Show} {block:Posts} <iframe src="http://files.martinruiz.com/files/martinruiz-posterous-sidebar-widget.htm?method=posterous&amp;count=15&amp;header=Dogmeat&amp;hostname=whatgetsmehot&amp;" class="c4"></iframe> {block:Private} <a href="{Permalink}" class="tooltip_link"><img src="/images/icons/lock12.png" alt="** PLEASE DESCRIBE THIS IMAGE **"></a>
<div class="private_post_message">
<h1>Private Post</h1>
<p>This post has a secret URL and not linked on your public blog. Send the secret URL to share it with anyone.</p>
</div>
{/block:Private} {block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title} {block:SMS} Posted from my mobile phone (SMS) {/block:SMS}
<div class="editbox">{block:EditBox} {EditBoxContents} {/block:EditBox}</div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwhatgetsmehot.posterous.com%2F&amp;layout=standard&amp;show_faces=true&amp;action=like&amp;" class="c5"></iframe> <a href="http://www.facebook.com/sharer.php?u={Permalink}%2F&amp;t={Title}&amp;language=en" target="_blank"><img class="c6" src="http://whatgetsmehot.posterous.com/images/icons/services/facebook.png" alt="Share on Facebook"></a>
<div class="body">
<div class="inner">{Body}</div>
{EventMap}</div>
{block:ShowOrList} {block:NewDayDate} <a href="{Permalink}">Posted {TimeAgo}</a> {/block:NewDayDate} {block:Author} {block:AuthorUser}
<h1>by <a href="{AuthorURL}" rel="author">{AuthorName}</a></h1>
{/block:AuthorUser} {block:AuthorEmail}
<h1>by email</h1>
{/block:AuthorEmail} {/block:Author} {block:PostLocations}
<h1 id="location_collapsed_{PostID}">from <a href="#" id="post_location_expander_{PostID}" onclick="return false;">{LocationsSummary}</a></h1>
<div class="location_detail c7" id="post_location_expanded_{PostID}">
<div class="map">{MapIframe}</div>
<div class="summary">
<h2>Posted from</h2>
<ul>
<li class="c2">{block:PostLocation uniq_by="summary"}</li>
<li>{LocationSummary}</li>
<li class="c2">{/block:PostLocation}</li>
</ul>
</div>
</div>
{block:ShowOnClick action_id="post_location_expander_{PostID}" hidden_div="post_location_expanded_{PostID}" to_hide_id="location_collapsed_{PostID}"/} {/block:PostLocations} | Viewed {PostViews} times {block:TagList} Filed under: {block:TagListing} <a href="{TagLink}" rel="tag">{TagName}</a>  {/block:TagListing} {/block:TagList} {/block:ShowOrList} {block:Sharing} {block:Tweet /}
<div class="facebook_like">{block:FbLike /}</div>
{/block:Sharing} {block:Responses /} {/block:Posts} {/block:Show}</div>
<!-- /#articles -->
{block:Pagination} {block:PreviousPage} <a href="{PreviousPage}">← Previous</a> {/block:PreviousPage} {CurrentPage} of {TotalPages} {block:NextPage} <a href="{NextPage}">Next →</a> {/block:NextPage} {/block:Pagination}</div>
<!-- /#post_column -->
<div class="column">
<h1><a href="{ProfileLink}" title="{OwnerName}'s profile"><img src="{PortraitURL-75}" alt="{OwnerName}" class="profile_image"></a></h1>
<a href="{ProfileLink}" class="profile-link"><strong>{OwnerName}</strong></a>
<div class="profile">
<p>{Profile}</p>
</div>
<div class="external">{ProfileExternalLinks}</div>
</div>
<div class="column">
<h1>Get Updates</h1>
<div class="subscribe-site">{block:Subscription}{/block:Subscription}</div>
<a href="{RSS}" rel="alternate" type="application/rss+xml">Subscribe via RSS</a> {block:HasLinks} {block:LinkCategories}
<h1>{Label}</h1>
<ul>
<li class="c2">{block:Links}</li>
<li><a href="{URL}" rel="external">{Label}</a></li>
<li class="c2">{/block:Links}</li>
</ul>
{/block:LinkCategories} {/block:HasLinks}</div>
<div class="column">{block:TagList}
<h1>Tags</h1>
<ul>
<li class="c2">{block:TagListing collapsible="true" count="10" action_id="see_more_tags"} {block:TagListingMore}</li>
<li><a href="#" id="see_more_tags">View all {NumTags} tags ↓</a></li>
<li class="c2">{/block:TagListingMore} {block:TagItem}</li>
<li><a href="{TagLink}">{TagName}</a> <span>({TagCount})</span></li>
<li class="c2">{/block:TagItem} {block:TagItemSelected}</li>
<li class="selected"><a href="{TagLink}">{TagName}</a> <span>({TagCount})</span></li>
<li class="c2">{/block:TagItemSelected} {/block:TagListing}</li>
</ul>
{/block:TagList} {block:HasArchives}
<h1>Archive</h1>
<div class="archive_list">{block:ArchiveYear}
<div class="archive"><a href="#" id="{ArchiveYearId}">{ArchiveDateYear}</a> <span>({ArchiveYearCount})</span></div>
<div class="inner c8" id="{ArchiveMonthsId}">{block:Archive}
<div><a href="{ArchiveLink}">{ArchiveMonth}</a> <span>({ArchiveCount})</span></div>
{/block:Archive}</div>
{/block:ArchiveYear}</div>
{/block:HasArchives}</div>
{block:Contributors}
<div class="column c9">
<h1>Contributors</h1>
<ul>
<li class="c2">{block:Contributor collapsible="true" count="10" action_id="see_more_contributors"} {block:ContributorMore}</li>
<li><a href="#" id="see_more_contributors">View all {NumContributors} contributors »</a></li>
<li class="c2">{/block:ContributorMore}</li>
<li><a href="{ContributorProfileLink}" rel="contributor" title="{ContributorName}'s profile"><img src="{ContributorPortraitURL-20}" alt="{ContributorName}"></a> <a href="{ContributorProfileLink}" rel="contributor">{ContributorName}</a></li>
<li class="c2">{/block:Contributor}</li>
</ul>
</div>
{/block:Contributors}
<div class="clear"></div>
</div>
<!-- /.container -->
</body>
</html>

 body {
 max-width : 62.5em;
 margin : 0 auto 0 auto;
 background-color : #dae1b1;
 color : #24251c;
 border : 0.6em double #0099ff;
 outline : #0099ff 0.6em double;
 font-family : 'Josefin Sans', serif;
 font-size : 1em;
 font-style : normal;
 font-weight : 400;
 text-shadow : none;
 text-decoration : none;
 text-transform : none;
 letter-spacing : 0;
 word-spacing : 0;
 line-height : 1.2;
 height : 100%;
 opacity : 1.0;
 padding : 0 1.5em 1.5em;
 }
 abbr {
 text-decoration : none;
 text-underline-style : none;
 border : none;
 }
 html {
 font-family : 'Josefin Slab', serif;
 background-color : #c0ca86;
 border : 0.6em double #0099ff;
 outline : #0099ff 0.6em double;
 padding : 2em;
 }
 header, hgroup, footer, aside, nav, article, section {
 display : block;
 }
 p.note strong {
 font-variant : small-caps;
 font-family : 'Josefin Slab', serif;
 }
 p {
 line-height : 1.25;
 }
 h1, h2, h3, h4, h5, h6, dt, th, h1 + blockquote,  .abstract, .courseid, .affiliation, .author, .date, caption, .caption,  figcaption {
 font-family : 'Josefin Slab', sans-serif;
 }
 code, tt, pre, samp, kbd {
 font-family : 'Josefin Slab', sans-serif;
 font-size : 0.8em;
 }
 h1 code, h2 code, h3 code, h4 code, h5 code, h6 code, dt code, th code, h1 tt, h2 tt, h3 tt, h4 tt, h5 tt, h6 tt, dt tt, th tt {
 font-size : 0.78em;
 }
 pre code, pre tt {
 font-size : 1em;
 }
 pre, dl {
 margin-top : 0.5em;
 margin-bottom : 0.5em;
 }
 dt {
 page-break-after : avoid;
 }
 dd, li {
 page-break-before : avoid;
 page-break-inside : avoid;
 margin-left : 1.5em;
 }
 em, i, var, cite {
 font-style : italic;
 }
 b, strong {
 font-weight : bold;
 font-family : 'Permanent+Marker', monospace;
 }
 div.ruiz {
 display : block;
 }
 .h6 {
 letter-spacing : 0.35em;
 text-transform : uppercase;
 line-height : 0;
 font-size : 0.72em;
 vertical-align : 0.24em;
 font-variant : small-caps;
 }
 h1, h2, h3 {
 font-weight : bold;
 }
 h3, h4 {
 font-size : 1.15em;
 margin-bottom : 0.2em;
 margin-top : 1em;
 }
 h2 {
 font-size : 1.5em;
 margin-bottom : 0.3em;
 margin-top : 1.15em;
 }
 h1 {
 font-size : 2em;
 margin-bottom : 0.3em;
 margin-top : 1.15em;
 font-family : 'Permanent Marker', serif;
 font-style : normal;
 font-weight : 700;
 text-shadow : #aaa 2px 2px 2px;
 text-decoration : none;
 text-transform : capitalize;
 letter-spacing : 0.026em;
 word-spacing : 0.041em;
 line-height : 1.17;
 }
 h1 before {
 content : '???' counter(h1) '.';
 }
 dt {
 margin-bottom : 0.25em;
 margin-top : 0.75em;
 }
 p {
 text-indent : 1.5em;
 text-align : justify;
 }
 :first-child, .note, .log {
 text-indent : 0;
 }
 td, th, dd, li, .footer, footer {
 margin-bottom : 0.5em;
 text-indent : 0;
 }
 blockquote {
 display : block;
 float : left;
 font-size : 150%;
 max-width : 30em;
 text-align : center;
 padding : 0.1em 0.1em 0;
 background : black;
 border : 1em solid;
 margin : 0 0.5em 0.2em 0;
 }
 div.footer, footer {
 margin-bottom : -1em;
 max-width : 50em;
 }
 .footer, footer {
 background-color : #e1e1e1;
 color : #4d4d4d;
 margin-bottom : 0.75em;
 margin-top : 0.75em;
 display : block;
 }
 img {
 border : none;
 vertical-align : top;
 float : right;
 clear : right;
 background-color : #0099ff;
 margin-left : 0.8em;
 }
 video {
 display : block;
 margin : 0 auto;
 border : 1em outset;
 overflow : hidden;
 width : 100%;
 height : auto;
 }
 hr {
 text-align : center;
 font-size : 2em;
 height : 1em;
 }
 hr::before {
 content : '\007';
 text-align : center;
 font-family : 'Permanent Marker', serif;
 }
 sup, sub {
 font-size : 75%;
 }
 :link:focus {
 outline : #164796 0.2em solid;
 }
 :visited:focus {
 outline : #831596 0.2em solid;
 }
 :link {
 color : #164796;
 outline-width : 0;
 outline-offset : 0.1em;
 }
 :visited {
 color : #831596;
 }
 :link:hover, :visited:hover {
 background-color : #ffffcc;
 }
 :link:active {
 color : #687996;
 outline-color : #687996;
 }
 :visited:active {
 color : #8f6796;
 outline-color : #8f6796;
 }
 div.dogmeat {
 font-size : 70%;
 }
 b {
 background-color : #5eb546;
 font-family : 'Permanent Marker', serif;
 }
 youtube {
 background : #0099ff;
 }
 video {
 display : block;
 margin : 0 auto;
 background : #0099ff;
 }
 div.c9 {
 padding-right : 0;
 }
 div.c8 {
 display : none;
 }
 div.c7 {
 display : none;
 }
 img.c6 {
 background-image : url(http://static.ak.fbcdn.net/rsrc.php/v1/zb/r/L6P2fymQtet.png);
 position : relative;
 float : left;
 bottom : 1em;
 background-color : #0099ff;
 height : 50px;
 width : auto;
 overflow : hidden;
 border : 1em outset #0099ff;
 vertical-align : baseline;
 outline : #0099ff 1px dashed;
 padding : 0.5em;
 }
 iframe.c5 {
 height : 80px;
 border : 1em double #0099ff;
 vertical-align : baseline;
 outline : #0099ff 10px double;
 padding : 1.5em;
 }
 iframe.c4 {
 width : 80%;
 height : 300px;
 }
 a.c3 {
 display : none;
 }
 li.c2 {
 list-style : none;
 }
 input.c1 {
 display : none;
 }