Fire JS Bin - twendy

$(document).ready(function () {
  $.geekGaTrackPage('UA-17956893-1');
  twndAPI = "http://api.twitter.com/1/trends/";
  sAPI = "http://search.twitter.com/";
  uLat = "37.775";
  uLon = "-122.4183333";

if (navigator.geolocation) navigator.geolocation.getCurrentPosition(gQ, eH, {
    timeout: 8000
  });
  else tQ(1);

$(".twnd").live("click", function () {
    $("#twtHdr h1").html($(this).find("h3").html());
    twtQ($(this).attr("data-sQ"));
    $.geekGaTrackEvent("Twends", "View", $(this).attr("data-sQ"), "");
  });
  $(".twtBk").click(function () {
    $(".twt, #twtHdr h1, #twtHdr h2, #twtHdr h3").fadeOut("medium");
    $("#twends").animate({
      top: "0px",
      opacity: "toggle"
    }, 200);
    $.geekGaTrackEvent("Back To Twends", "Click", "", "");
  });
});

function eH(eC) {
  tQ(1);
}

function tmDisp(twTm) {
  var rtNw = new Date();
  var twTm = new Date(twTm);
  twTm = rtNw.getTime() - twTm.getTime();

if (twTm >= 1000 * 60 * 60 * 24) return (Math.ceil(twTm / (1000 * 60 * 60 * 24)) + " days ago");
  else if (twTm >= 1000 * 60 * 60) return (Math.ceil(twTm / (1000 * 60 * 60)) + " hours ago");
  else if (twTm >= 1000 * 60) return (Math.ceil(twTm / (1000 * 60)) + " minutes ago");
  else return (Math.ceil(twTm / (1000)) + " seconds ago");
}

<!DOCTYPE HTML>
<html>
  
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Twendy - What's Hot, Right Now</title>
  </head>
  
  <body>
    <header>
      <h1>twendy</h1>
      <div id="locHdr">
        <h2>Check out the latest <strong></strong> twends.</h2>
        <menu id="locs"></menu>
      </div>
    </header>
    <section>
      <div id="progress">
        <div class="msg">
          <h4><big>{</big></h4>
          <h3>Loading...</h3>
        </div>
      </div>
      <nav id="twends"></nav>
      <nav id="twtHdr">
        <h3 class="twtBk">∧ Back To Twends</h3>
        <h2>Selected Twend ∨</h2>
        <h1></h1>
      </nav>
      <nav id="tweets"></nav>
    </section>
    <footer>
      <a href="http://get-relative.com" title="Position: Relative"><address>{<strong>p:</strong><em>r</em>}</address></a>
    </footer>
    <script src="http://platform.twitter.com/anywhere.js?id=5YMC3v604UdxVQwcB62PQ&v=1" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
  </body>

</html>

html, body, div, span, h1, h2, h3, h4, h5, p, abbr, address, em, img, big, small, strong, b, i, ol, ul, li, fieldset, form, label, caption, tbody, tfoot, thead, tr, th, td, article, footer, header, menu, nav, section { position:relative; /*** Recognize, BITCHES ***/ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { background-color:#f1ece6; color:#000; padding:80px 20px 0 20px; }
h1, h2, h3, h4, h5, h6, #locHdr { display:inline; }
h1 { font:normal 47px Georgia, serif; text-shadow:0px 2px 1px #fbfaf8; }
h2 { font:normal 14px Arial, sans-serif; color:#808080; }
h2 strong { cursor:pointer; padding:0 0 4px 0px; border-bottom:1px dotted #f26522; }
h5 { font:bold 11px Arial, sans-serif; display:block; padding-top:10px; }
h5 small { font-weight:normal; padding-left:7px; }
a { text-decoration:none; }
header, #twends, #tweets, #progress, #twtHdr, footer { width:700px; display:block; margin:0 auto 30px auto; }
header h1 { padding:32px 0 0 0; margin:0 85px 0 0; background:url("/attach/ti.png") no-repeat 16px 0px; cursor:pointer; }
ul, ol, menu { list-style:none; }
#locs, .twt { display:none; }
#twends, #progress { margin-top:80px; }
.twnd, .twt, .msg, #tweets header { margin:0 120px 50px 240px; padding:12px 20px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; cursor:pointer; }
.twnd:nth-child(1), .msg { margin-bottom:60px; }
.twnd:nth-child(odd), .twt:nth-child(odd), .msg { background-color:#f8f5f2; color:#3f3d3e; }
.twnd:nth-child(even), .twt:nth-child(even) { background-color:#eae3d9; }
.twnd h3, .twt h3, .msg h3 { font:normal 15px Georgia, serif; }
.twnd h4, .msg h4 { width:210px; position:absolute; top:-5px; left:-240px; text-align:right; color:#d4c5b0; font:normal 40px Georgia, serif; }
.twnd h4 small { font-size:11px; top:-17px; padding-right:2px; }
.twnd h4 big { }
.twnd:nth-child(1) h3, .msg h3 { font-size:38px; color:#000; }
.twnd:nth-child(1) h4, .msg h4 { font-size:96px; top:-30px; }
.twnd:nth-child(1) h4 small { font-size:28px; top:-33px; }
.twnd:nth-child(1) h4 big, .msg h4 big { font-size:90px; color:#f26522; top:1px; padding:0 0 0 25px; }
#twtHdr h1, #twtHdr h2 { margin-left:242px; display:block; }
#twtHdr h1, #twtHdr h2, #twtHdr h3 { display:none; }
#twtHdr h1 { font:normal 21px Georgia, serif; color:#000; padding-top:5px; }
#twtHdr h2, #twtHdr h3 { font:normal 13px Arial, sans-serif; color:#555452; text-transform:lowercase; }
#twtHdr h3 { float:right; margin-right:120px; }
.twtBk { z-index:100; cursor:pointer; }
.dArr { background:url("/attach/da.png") no-repeat; width:36px; height:31px; position:absolute; bottom:-31px; left:170px; }
.twtAv { position:absolute; top:12px; left:-100px; width:48px; height:48px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }
.twt { min-height:24px; }
.twt:nth-child(1) { margin:0 0 60px 0; background:#f26522 url("/attach/da.png") no-repeat; box-shadow:1px 1px 1px #f0c8b1; -webkit-box-shadow:1px 1px 1px #f0c8b1; }
.twt:nth-child(1) .twtAv { display:none; }
.twt:nth-child(1) h3 { font:normal 24px Georgia, serif; color:#f8f5f2; }
.twt:nth-child(1) h5 { color:#f8f5f2; font-size:14px; }
address, address strong, address em { font:normal 14px Arial, sans-serif; color:#928e8b; }
address strong { color:#e34d1a; }
address em { color: #131111; }