speech bubbles

public/css/topic.less

@@ -32,6 +32,7 @@
 	}
 
 	.profile-block, .post-block {
+		position:relative;
 		border: 1px solid rgba(0, 0, 0, 0.06);
 		border-radius: 5px;
 		padding: 10px;
@@ -98,12 +99,16 @@
 		}
 	}
 
+	
+
 	&.deleted {
 		-moz-opacity: 0.30;
 		opacity: 0.30;
 	}
 	/*http://stackoverflow.com/questions/11037517/bootstrap-making-responsive-changes-to-layout*/
 	@media (max-width: 979px) {
+
+
 		.span12-tablet {
 			width: 100% !important;
 			margin-left:0px;
@@ -111,6 +116,36 @@
 		}
 	}
 
+	@media (min-width: 979px) {
+		.speech-bubble:after 
+		{
+			content: "";
+			position: absolute;
+			top: 9px;
+			left: -7px;
+			border-style: solid;
+			border-width: 7px 7px 7px 0;
+			border-color: transparent #FFFFFF;
+			display: block;
+			width: 0;
+			z-index: 1;
+		}
+
+		.speech-bubble:before 
+		{
+			content: "";
+			position: absolute;
+			top: 9px;
+			left: -8px;
+			border-style: solid;
+			border-width: 7px 7px 7px 0;
+			border-color: transparent rgba(0, 0, 0, 0.125);
+			display: block;
+			width: 0;
+			z-index: 0;
+		}
+	}
+
 	.main-post {
 		h3 {
 			margin: 0;

public/templates/topic.tpl

@@ -92,7 +92,7 @@
 				<span class="label label-important {posts.show_banned}">banned</span>			
 			</div>
 			<div class="span11 span12-tablet">
-				<div class="post-block">
+				<div class="post-block speech-bubble">
 					<div id="content_{posts.pid}" class="post-content">{posts.content}</div>
 					<div id="images_{posts.pid}" class="post-images">
 						<!-- BEGIN uploadedImages -->