diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less
index 0936b46e30abe..8a127a5bf3c8a 100644
--- a/client/stylesheets/base.less
+++ b/client/stylesheets/base.less
@@ -21,7 +21,9 @@
 	}
 }
 
-* {
+*,
+*:before,
+*:after {
 	.box-sizing(border-box);
 }
 
@@ -174,19 +176,19 @@ q {
 	-webkit-overflow-scrolling: touch;
 }
 
-.rocket-form{
+.rocket-form {
 	max-width: 620px;
 	width: 90%;
 	padding: 25px 0;
-	legend{
+	legend {
 		margin-bottom: 23px;
 		position: relative;
 		width: 100%;
 		display: block;
-		h3{
+		h3 {
 			margin-bottom: 5px !important;
 		}
-		&:after{
+		&:after {
 			content: " ";
 			height: 1px;
 			background-color: #DFDFDF;
@@ -197,11 +199,11 @@ q {
 			left: 0;
 		}
 	}
-	fieldset{
+	fieldset {
 		display: block;
 		margin-bottom: 40px;
 	}
-	.submit{
+	.submit {
 		margin-top: 20px;
 		text-align: right;
 	}
@@ -234,8 +236,8 @@ q {
 	input[type='text'] {
 		display: block;
 	}
-	&.double-col{
-		> label{
+	&.double-col {
+		> label {
 			width: 30%;
 			float: left;
 			margin-bottom: 0;
@@ -244,17 +246,17 @@ q {
 			line-height: 15px;
 			padding: 10px 20px 10px 0;
 		}
-		> div{
+		> div {
 			float: left;
 			width: 70%;
-			label{
+			label {
 				display: inline-block;
 				margin-right: 4px;
 				line-height: 35px;
-				&:nth-last-child(1){
+				&:nth-last-child(1) {
 					margin-right: 0;
 				}
-				input{
+				input {
 					margin-right: 4px;
 				}
 			}
@@ -1112,7 +1114,7 @@ a.github-fork {
 		.custom-scroll(transparent, rgba(255, 255, 255, 0.05));
 		.transition-delay(.135s);
 		background-color: @primary-background-color;
-		&.no-shadow{
+		&.no-shadow {
 			box-shadow: 0 0 0;
 		}
 		> .wrapper {
@@ -1136,7 +1138,8 @@ a.github-fork {
 			margin-bottom: 0;
 			color: inherit;
 		}
-		input[type='text'], select {
+		input[type='text'],
+		select {
 			border-width: 0 0 1px 0;
 			border-color: @tertiary-font-color;
 			background-color: transparent;
@@ -1568,16 +1571,16 @@ a.github-fork {
 }
 
 .page-static {
-	.content{
-		> div{
+	.content {
+		> div {
 			margin-bottom: 25px;
-			&:nth-last-child(1){
+			&:nth-last-child(1) {
 				margin-bottom: 0;
 			}
 		}
 		p {
 			margin-bottom: 12px;
-			&:nth-last-child(1){
+			&:nth-last-child(1) {
 				margin-bottom: 0;
 			}
 		}
@@ -1916,18 +1919,32 @@ a.github-fork {
 		&.new-day {
 			margin-top: 60px;
 		}
-		&.new-day:before {
-			content: attr(data-date);
-			display: block;
-			position: absolute;
-			top: -30px;
-			left: 0;
-			width: 100%;
-			font-size: 12px;
-			font-weight: 600;
-			text-align: center;
-			border-top: 1px solid #ddd;
-			color: @secondary-font-color;
+		&.new-day {
+			&:before {
+				content: attr(data-date);
+				display: block;
+				position: absolute;
+				top: -30px;
+				left: 0;
+				font-size: 12px;
+				font-weight: 600;
+				text-align: center;
+				.calc(left, ~"50% - 70px");
+				color: @secondary-font-color;
+				z-index: 10;
+				padding: 0 10px;
+				background-color: #FFF;
+				min-width: 140px;
+			}
+			&:after {
+				content: " ";
+				display: block;
+				position: absolute;
+				top: -20px;
+				left: 0;
+				width: 100%;
+				border-top: 1px solid #ddd;
+			}
 		}
 		.edit-message {
 			display: none;
@@ -1991,15 +2008,19 @@ a.github-fork {
 				}
 			}
 		}
-		.system {
-			display: inline-block;
-			background-color: #EFEFEF;
-			border-radius: 4px;
-			padding: 8px 12px;
-			font-size: 12px;
-			color: @secondary-font-color;
-			i {
-				margin-right: 5px;
+		&.s,
+		&.p,
+		&.f,
+		&.r,
+		&.au,
+		&.ru,
+		&.ul,
+		&.nu,
+		&.wm,
+		&.uj {
+			.body {
+				color: @secondary-font-color;
+				font-style: italic;
 			}
 		}
 		.avatar-initials {
@@ -2999,12 +3020,12 @@ a.github-fork {
 	}
 }
 
-.rocket-team{
+.rocket-team {
 	display: block;
-	li{
+	li {
 		display: inline-block;
 	}
-	a{
+	a {
 		display: inline-block;
 		width: 50px;
 		height: 50px;
diff --git a/client/views/app/message.html b/client/views/app/message.html
index 1384e7270368d..585eeecab57a0 100644
--- a/client/views/app/message.html
+++ b/client/views/app/message.html
@@ -1,5 +1,5 @@
 <template name="message">
-	<li id="{{_id}}" class="message {{own}} {{type}}" data-username="{{u.username}}" data-date="{{date}}">
+	<li id="{{_id}}" class="message {{own}} {{t}}" data-username="{{u.username}}" data-date="{{date}}">
 		<a class="thumb user-card-message" href="#" data-username="{{u.username}}" tabindex="1">{{> avatar username=u.username}}</a>
 		<a class="user user-card-message" href="#" data-username="{{u.username}}" tabindex="1">{{u.username}}</a>
 		<span class="info">
@@ -15,7 +15,7 @@
 				<textarea class="input-message-editing" dir="auto">{{msg}}</textarea>
 			</div>
 		{{else}}
-			<div dir="auto">
+			<div class="body" dir="auto">
 				{{{message}}}
 				{{#each urls}}
 					{{> oembed url=this}}