Index: elements/product_elements.elm.tpl
===================================================================
--- elements/product_elements.elm.tpl	(revision 15040)
+++ elements/product_elements.elm.tpl	(working copy)
@@ -23,7 +23,30 @@
 					<a href="<inp2:ProductLink template='__default__'/>">Reviews</a> (<a href="<inp2:ProductLink template='__default__'/>"><inp2:Field name="CachedReviewsQty"/></a>)&nbsp;&nbsp;&nbsp;
 				</span>
 				<span class="comp">
-					<label><input type="checkbox" class="compare-checkbox" value="<inp2:Field name='ProductId'/>"<inp2:m_if check="InCompare"> checked</inp2:m_if>/><em>Compare</em></label>
+					<label>
+						<input class="left" type="checkbox" class="compare-checkbox" value="<inp2:Field name='ProductId'/>"<inp2:m_if check="InCompare"> checked</inp2:m_if>/>
+						<div class="compare-bubble">
+							<div class="formStatus formSuccess">
+								<div class="formContent">Added to Comparison</div>
+								<div class="formArrow"></div>
+							</div>		
+						</div>
+						<!--
+						<div class="compare-bubble">
+							<div class="formStatus formError">
+								<div class="formContent">Up to 4 products can be compared</div>
+								<div class="formArrow"></div>
+							</div>		
+						</div>
+						<div class="compare-bubble">
+							<div class="formStatus formNeutral">
+								<div class="formContent">Removed from Comparison</div>
+								<div class="formArrow"></div>
+							</div>		
+						</div>
+						-->							
+						<em style="display:block" class="left">Compare</em>
+					</label>
 				</span>
 				</div>
 			</div>
Index: inc/styles.css
===================================================================
--- inc/styles.css	(revision 15040)
+++ inc/styles.css	(working copy)
@@ -21,6 +21,9 @@
 .clear { clear: both !important; }
 .fix { border: 1px solid #f00; }
 
+.left { float:left }
+.right { float: right }
+
 /* Header
 *******************************************************************************/
 #header {
@@ -1333,12 +1336,20 @@
 	font-weight: bold;
 	padding-bottom: 5px;
 }
-.items .item .descr .optional { padding: 5px 0; }
-.items .item .descr .optional .stars { padding: 0 20px 0 0; }
+.items .item .descr .optional { padding: 15px 0 5px 0; }
+.items .item .descr .optional .stars { padding: 0 20px 0 0; display:block; float:left }
+.items .item .descr .optional .reviews { width:auto; padding-top:0px; padding-right:20px; border:0px;  }
 .items .item .descr .optional .comp label em {
 	font-style: normal;
 	text-decoration: underline;
 }
+
+
+
+
+
+
+
 .items .item .descr .optional .comp label input {
 	bottom: -2px;
 	margin: 0 5px 0 0;
@@ -2334,6 +2345,27 @@
 .formStatus.formError .formContent { background: #990000 url(@templates_base@/img/validate/con-error.png) repeat-x 0 0; }
 .formStatus.formError .formArrow { background: url(@templates_base@/img/validate/con-error-arrow.png) no-repeat 0 0; }
 
+.compare-bubble { width:1px; height:1px; position:relative; float:left }
+.compare-bubble .formStatus {
+	top: -37px;
+	left: -42px;
+}
+
+.compare-bubble .formStatus .formContent { width: auto }
+
+.compare-bubble .formStatus .formArrow {
+	margin: 0px 0 0 20px;
+	position: relative;
+}
+
+.compare-bubble .formStatus.formSuccess .formArrow { background: url(@templates_base@/img/validate/con-success-arrow-bottom.png) no-repeat 0 0; }
+.compare-bubble .formStatus.formError .formArrow { background: url(@templates_base@/img/validate/con-error-arrow-bottom.png) no-repeat 0 0; }
+
+.compare-bubble .formStatus.formNeutral .formContent { background: #990000 url(@templates_base@/img/validate/con-neutral.png) repeat-x 0 0; }
+.compare-bubble .formStatus.formNeutral .formArrow { background: url(@templates_base@/img/validate/con-neutral-arrow-bottom.png) no-repeat 0 0; }
+
+
+
 .cart-detail.receipt .items .item-quantity .formStatus { left: 0; }
 
 .cart-detail.receipt dl.total { float: right; padding-right: 30px; }