started styling category.tpl, and added a fail plus sign to header, will revisit in the AM

public/css/style.less

@@ -32,7 +32,7 @@ body {
 	display: block;
 }
 .badge {
-	vertical-align: 15%;
+	vertical-align: 17%;
 }
 .nav .badge {
 	vertical-align: 10%;
@@ -111,34 +111,73 @@ footer.footer {
 	}
 }
 
+
 .topic-container {
-	list-style-type: none;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  margin-top: 10px;
+}
+.topic-container a:nth-child(odd) li.topic-row {
+  background-color: #fdfdfd;
+}
+.topic-container a:nth-child(even) li.topic-row {
+  background-color: #fff;
+}
+.topic-container a {
+	margin-bottom: 10px;
+	display: block;
+	border: 1px solid #ddd;
+	border-radius: 5px;
+	text-decoration: none;
+	color: #333;
+}
+.topic-container li.topic-row {
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+  border-radius: 5px;
+}
+.topic-container li:last-child {
+  border-bottom: 0;
+}
+.topic-container .row {
+	
+}
+.topic-row-icon, .topic-row-content {
+	}
+.topic-row-icon {
+	border-radius: 5px 0 0 5px;
+	height: 75px;
+	background: #0059B2;
+	color: white;
+	line-height: 105px;
+	min-width: 75px;
+}
+
+@media (max-width: 767px) 
+{
+	.topic-row-icon {
+		border-radius: 5px 5px 0 0;
+	}
+}
+
+.top-posters {
+	float: right;
+	padding-top: 2px;
+}
+
+.topic-row-content {
+	width: 80%;
+}
+
+.topic-row-content h3 {
 	padding: 0;
 	margin: 0;
-	border: 1px solid #eee;
-	margin-top: 50px;
+	margin-top: 4px;
+}
 
-	a:nth-child(odd) li.topic-row {
-		background-color:#fdfdfd;
-	}
-
-	a:nth-child(even) li.topic-row {
-		background-color:#fff;
-	}
-
-	li.topic-row {
-		cursor: pointer;
-		border-bottom: 1px solid #eee;
-		padding: 10px;
-	}
-
-	li:last-child {
-		border-bottom: 0;
-	}
-
-	li.topic-row:hover {
-		background-color: #eee;
-	}
+.topic-row-content h3 small {
+	vertical-align: 3px;
 }
 
 .post-container {

public/templates/category.tpl

@@ -6,15 +6,35 @@
 	</ul>
 </div>
 
-<button id="new_post" class="btn btn-primary btn-large {show_topic_button}">New Topic</button>
 <ul class="topic-container">
 <!-- BEGIN topics -->
 <a href="../../topic/{topics.slug}"><li class="topic-row">
-	<h4><i class="{topics.pin-icon}"></i><i class="{topics.lock-icon}"></i> {topics.title}</h4>
-	<p>Posted {topics.relativeTime} ago by <span class="username">{topics.username}</span>. {topics.post_count} posts.</p>
+	<div class="row">
+		<div class="span1 topic-row-icon">
+			<i class="icon-lock icon-4x"></i>
+			<i class="{topics.pin-icon}"></i><i class="{topics.lock-icon}"></i>
+		</div>
+		<div class="span11 topic-row-content">
+			<div class="top-posters">
+				<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=60" class="img-polaroid" />
+				<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=60" class="img-polaroid" />
+				<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=60" class="img-polaroid" />
+			</div>
+			<div>
+				<h3><span class="badge badge-important">3</span> {topics.title} <small>24<i class="icon-star"></i></small></h3> 
+				<p> Posted {topics.relativeTime} ago by 
+					<span class="username">{topics.username}</span>. {topics.post_count} posts.</p>
+			</div>
+		</div>
+	</div>
 </li></a>
 <!-- END topics -->
 </ul>
+
+<hr />
+<button id="new_post" class="btn btn-primary btn-large {show_topic_button}">New Topic</button>
+
+
 <script type="text/javascript">
 var new_post = document.getElementById('new_post');
 new_post.onclick = function() {

public/templates/header.tpl

@@ -38,6 +38,7 @@
 	                    </li>
 					</ul>
 					<ul class="nav pull-right" id="right-menu">
+						<li><i class="icon-plus icon-2x" style="color:#999;"></i></li>
 						<li><a href="/users" id="user_label"></a></li>
 					</ul>
 				</div>