Viafoura - New Template

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 / Upload</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,...