--- a/client/messages.xml
+++ b/client/messages.xml
@@ -90,16 +90,38 @@
 .header .meta { float: right; padding-left: 2em; text-align: right; color: #999; font-size: 90%; }
 .header .meta .attachments { padding-right: 18px; background: url("chrome://messenger/skin/icons/attachment.png") transparent no-repeat center right; display: none; }
 .header .meta .attachments[count] { display: inline; }
 .header .meta .attachments:before { content: "("; }
 .header .meta .attachments:after { content: ")"; }
 .header .addressing .verb { font-size: 90%; color: #777; }
 .header .addressing .date { color: #999; font-size: 90%; }
 .header .addressing .date:before { content: "\2014  "; }
+
+.recipients { display: inline; color: #222; }
+.recipients .identity:first-child:before { content: ""; }
+.recipients .identity:after { content: ", "; }
+.recipients .identity:last-child:after { content: ""; }
+/* this will limit the number of recipients shown to the first 7
+   also adding an elipsis '...' after the 6th (if exists) */
+.recipients .identity:nth-child(n+7) { display: none; }
+.recipients .identity:nth-child(0n+6):after { content: "..."; }
+.recipients .you { }
+
+:bound-element > .target > .header > .subject { white-space: nowrap; overflow: hidden;
+                                              font-size: 115%; font-weight: bold;
+                                              color: #555; }
+:bound-element > .target > .body { color: #555; padding-left: 1em; }
+
+:bound-element > .target > .tags span { -moz-border-radius: 0.3em; padding: 0em 0.4em; }
+:bound-element > .target > .folder { background-color: #faf0b8; border: 1px solid #ede4af; }
+
+/* REPLIES */
+.replies { padding: 0em 3em; }
+
       ]]></xbl:style>
     </xbl:resources>
     <xbl:implementation><![CDATA[
       ({
         conversation: null,
         setConversation: function(aConversation) {
           this.conversation = aConversation;
           this.shadowTree.getElementById("oldestMessageDate").textContent =
@@ -112,30 +134,43 @@
             makeTimestampFriendly(firstMessage.timestamp);
 
           var replyNodes = this.shadowTree.getElementById("replies");
           for (var iMsg = 1; iMsg < this.conversation.messages.length; iMsg++) {
             var message = this.conversation.messages[iMsg];
             var node = $("<div/>")[0];
             ElementXBL.prototype.addBinding.call(node, "messages.xml#reply");
             node.setMessage(message);
+            replyNodes.appendChild(node);
           }
         },
       })
     ]]></xbl:implementation>
   </xbl:binding>
 
   <xbl:binding id="reply">
     <xbl:template>
       <div class="author">
         <span id="from" class="name"/>
         <span id="date" class="data"/>
       </div>
       <div id="snippet" class="body"/>
     </xbl:template>
+    <xbl:resources>
+      <xbl:style><![CDATA[
+/* REPLY */
+:bound-element { display: list-item; list-style: none; margin: 0.5em 0em; }
+:bound-element:hover { list-style: none outside url("chrome://messenger/skin/icons/arrow/arrow-right.png"); }
+:bound-element { cursor: pointer; }
+
+:bound-element > .author > .date { color: #adb0a9; font-size: 90%; }
+:bound-element > .author > .date:before { content: "\2014 "; }
+:bound-element > .body { padding-left: 1em; color: #666; white-space: nowrap; overflow: hidden;  }
+      ]]></xbl:style>
+    </xbl:resources>
     <xbl:implementation><![CDATA[
       ({
         setMessage: function(aMessage) {
           this.message = aMessage;
           this.shadowTree.getElementById("from").textContent = aMessage.from.name;
           this.shadowTree.getElementById("date").textContent =
             makeTimestampFriendly(aMessage.timestamp);
           this.shadowTree.getElementById("snippet").textContent = aMessage.bodySnippet;

--- a/client/xbl-src.js
+++ b/client/xbl-src.js
@@ -542,17 +542,17 @@ cXBLLanguage.elements.xbl.binding.resour
 		sStyle	= oNode.firstChild.nodeValue;
 	}
 
 	// Create stylesheet
 	if (sStyle) {
 		var sSelectorBoundElement	= ':' + "bound-element";
 		// 2. Setup local context for CSS rules
 		// 	.{class}	-> .xbl-{class}-{binding}
-		sStyle	= sStyle.replace(/\B\.((?:[-\w\[\]="]+:?)+)([\s{+~>,])/g, '.' + "xbl" + '-$1-' + cBinding.id + '$2');
+		sStyle	= sStyle.replace(/\B\.((?:[-\w\[\]()+="]+:?)+)([\s{+~>,])/g, '.' + "xbl" + '-$1-' + cBinding.id + '$2');
 		//	#{id}		-> .xbl-id-{id}-{binding}
 		sStyle	= sStyle.replace(/#([\w-]+)([\s{+~>])/g, '.' + "xbl-id" + '-$1-' + cBinding.id + '$2');
 		//	::{pseudo}	-> .xbl-pseudo-{pseudo}-{binding}
 		sStyle	= sStyle.replace(/::([\w-]+)([\s{+~>])/g, '.' + "xbl-pseudo" + '-$1-' + cBinding.id + '$2');
 		// Shift context "selector {" -> ":bound-element selector {"
 		sStyle	= sStyle.replace(/\s*([^,{\n]+(?:,|{[^}]+}))/g, sSelectorBoundElement + ' ' + '$1\n');
 		// correct result from previous step
 		sStyle	= sStyle.replace(new window.RegExp(sSelectorBoundElement + ' ' + sSelectorBoundElement, 'g'), sSelectorBoundElement);