Viafoura Layout

by darcyclarke

HTML

<!-- widget -->
<div class="viafoura">
    
    <header class="poweredby">
        <h1>Powered by <a href="#" title="" class=""><img src="http://darcyclarke.me/work/viafoura/logo.jpg" alt="Viafoura"></a></h1>
    </header>
    
    <!-- options -->
    <div class="options">
        
        <ul class="tabs clearfix">
            <li class="write"><a href="#" title="Write" class="">Write</a></li>
            <li class="record"><a href="#" title="Record" class="">Record</a></li>
            <li class="debate"><a href="#" title="Debate" class=""><span class="vs">vs</span> Debate</a></li>
        </ul>
        
        <textarea class="description"></textarea>
        
        <input type="submit" value="Submit" class="submit">
        
        <div class="clearBoth"></div>
        
    </div>
    <!-- /options -->
    
    <!------------------------------------------------------->
    
    <!-- replies -->
    <ul class="replies">
        
        <!-- reply -->
        <li class="reply">
            
            <!-- meta -->
            <aside class="meta">
                
                <a href="#" title="" class="avatar"><img...

CSS

html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video 
{   margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }
    
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section 
{    display: block; }

.clearfix:before, 
    .clearfix:after 
{     content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden; }
    
    .clearfix:after 
{    clear: both; }

    .clearfix 
{    zoom: 1; }

.viafoura .clearBoth {
 display: block;
  width: 100%;
  clear: both; 
}
.viafoura strong {
 font-weight: bold;   
}
.viafoura a {
   color: #41a0b7;
}
.viafoura a img {
 border: 1px solid #ccc; 
 padding: 3px;
 background: #fff;
 margin: 0 0 15px 0;
}
.viafoura {
 width: 100%;
 font-family: sans-serif;  
 font-size: 12px;
 line-height: 16px;
  margin: 15px 0 0 0;
    color: #383838;
}

.viafoura header {
    position: absolute;
    right: 2%;
}

.viafoura h1 {
  font-weight: bold;
  font-size: 9px;
  line-height: 12px;
  padding: 0 80px 0 0;
    margin: 8px 0 0 0;
}

.viafoura h1 a {
    position: absolute;
    margin: -20px 0 0 50px;
}

.viafoura h1 a img {
    height: 20px;
    border: none;
    margin: 0;
}

.viafoura p {
 margin: 0 0 15px 0;   
}

.viafoura .tabs li,
.viafoura .loadmore {
    position:relative;
    z-index:1;
    overflow:hidden;
    list-style:none;
    padding:0;
    margin:0 0 0.25em;
}

.viafoura .tabs li a:link, 
.viafoura .tabs li a:visited {
    display:block;
    border:0;
    padding-left:32px;
    color:#383838;
}

.viafoura .tabs li a:hover,...

JavaScript

//
// Viafoura Widget JS - 3.0.0
//
(function(){
    
    //
    // jQuery - 1.6.2
    //
    (function(a,b){function cv(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cs(a){if(!cg[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){ch||(ch=c.createElement("iframe"),ch.frameBorder=ch.width=ch.height=0),b.appendChild(ch);if(!ci||!ch.createElement)ci=(ch.contentWindow||ch.contentDocument).document,ci.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),ci.close();d=ci.createElement(a),ci.body.appendChild(d),e=f.css(d,"display"),b.removeChild(ch)}cg[a]=e}return cg[a]}function cr(a,b){var c={};f.each(cm.concat.apply([],cm.slice(0,b)),function(){c[this]=a});return c}function cq(){cn=b}function cp(){setTimeout(cq,0);return cn=f.now()}function cf(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ce(){try{return new a.XMLHttpRequest}catch(b){}}function b$(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function bZ(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function bY(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bC.test(a)?d(a,e):bY(a+"["+(typeof...