Switch to side-by-side view

--- a/ForgeTracker/forgetracker/templates/lib.html
+++ b/ForgeTracker/forgetracker/templates/lib.html
@@ -3,23 +3,33 @@
       xmlns:xi="http://www.w3.org/2001/XInclude">
 
   <py:def function="display_comment(comment)">
-    <div id="comment-${comment._id}"
-         style="padding-left: 10px; border-left: 1px solid grey">
-      Posted by <em>comment.author().display_name</em> at ${comment.timestamp}
-      <a py:if="c.user._id and comment.author_id==c.user._id"
-         href="comments/$comment._id/delete">[X]</a>
-      <br/>
-      <p py:content="comment.text"/>
-      <div class="reply">
-        <h3>Reply</h3>
-        <form class="hidden" method="post" action="comments/$comment._id/reply">
-          <textarea rows="4" cols="60" name="text"></textarea><br/>
-          <input type="submit"/>
-        </form>
+    <div id="comment-${comment._id}">
+      <div class="forge_comment_body">
+        <div class="user_info">
+          <img src="/images/error.png" alt="icon" width="50" height="50"/>
+          <br/>
+          ${comment.author().display_name}
+        </div>
+        <a py:if="c.user._id and comment.author_id==c.user._id"
+           href="comments/$comment._id/delete">[X]</a>
+        <br/>
+        ${Markup(g.markdown.convert(comment.text))}
+        ${comment.posted_ago}
+        <div class="reply title-pane closed">
+          <a class="title" href="#">Reply</a>
+          <div class="content">
+            <form method="post" action="comments/$comment._id/reply">
+              <textarea rows="4" cols="60" name="text"></textarea><br/>
+              <input type="submit" value="Save Comment"/>
+            </form>
+          </div>
+        </div>
       </div>
-      <py:for each="cc in comment.replies()">
-        ${display_comment(cc)}
-      </py:for>
+      <div class="forge_comment_replies">
+        <py:for each="cc in comment.replies()">
+          ${display_comment(cc)}
+        </py:for>
+      </div>
     </div>
   </py:def>