1 files changed, 51 insertions, 8 deletions

diff --git a/css/chat.css b/css/chat.css
index 0b38d70..f612887 100644
--- a/css/chat.css
+++ b/css/chat.css
@@ -3,15 +3,34 @@
 	font-family: 'Trebuchet MS1', 'Trebuchet MS', sans-serif;
 	border: 1px solid gray;
 	background-color:#999;
-	width: 700px;
-	margin: 7px;
+	width: 680px;
+	margin: 7px 3px;
 	padding: 2px;
 	border-radius: 10px;
 	border-bottom-right-radius: 20px;
 	border-top-right-radius: 20px;
 }
 .chatButton {
-	margin: 4px;
+	margin: 0px;
+	width: 50px;
+}
+
+#chatMute {
+	display:inline-block;
+	border:1px solid gray;
+	width:17px;
+	height:17px;
+	background-size: 100%;
+	position: relative;
+    top: 5px;
+	margin-right: 5px;
+}
+
+.chatMute_true {
+	background-image:	url(../images/Sound.png);
+}
+.chatMute_false {
+	background-image:	url(../images/Mute.png);
 }
 
 #chatContainer {
@@ -29,17 +48,30 @@
 
 .chatBadge { 
 	height:100%;
+	z-index:2;
 	float:left;
 }
 .chatUsername {
 	font-family: 'Trebuchet MS1', 'Trebuchet MS', sans-serif;
 	font-size: 17px;
-	text-overflow: ellipsis;
+	text-overflow: clip;
 	overflow:hidden;
 	float: left;
 	padding-top: 5px;
 	width: 115px;
 }
+.chatUsername:after {
+	content:":";
+}
+.chatUsername.me {
+	text-align:right;
+}
+.chatUsername.me:after {
+	content:"";
+}
+.chatUsername.me:before {
+	content:"*";
+}
 .chatText {
 	font-family: 'Trebuchet MS1', 'Trebuchet MS', sans-serif;
 	font-size: 16px;
@@ -53,12 +85,13 @@
    word-wrap: break-word;      /* IE */
 }
 .chatTimestamp {
-	font-family:"Times New Roman", Times, serif;
+	font-family: Trebuchet MS1, Trebuchet MS, sans-serif;
+	font-size: 1em;
 	float:left;
-	padding: 5px 3px 3px 3px;
-	min-width:70px;
+	padding: 5px 0px 3px 0px;
+	width:83px;
 	overflow:hidden;
-	text-overflow: ellipsis;
+	text-overflow: clip;
 	white-space:nowrap;
 }
 .chatColumn1 {
@@ -95,6 +128,16 @@
 	background-color: #844;
 }
 
+.chatText.spoiler {
+	color:transparent;
+}
+.chatText.spoiler:before {
+	content: " Click to reveal Spoiler ";
+	color:#7AF;
+	font-style: italic;
+}
+
+
 .chatContainer2 {
 	background-color: #222;
 	padding:10px;