/* HT, http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css */

/* Usage: 
			<blockquote class="speech-bubble">
				<p>It is not what you look at that matters, it is what you see.</p>
			</blockquote>
			*/

.speech-bubble-green {
	position:relative;
	padding:15px 30px;
	margin:0;
	color:#000;
	background:#11cc33; /* default background for browsers without gradient support */
	/* css3 */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#aaffee), to(#11cc33));
	background:-moz-linear-gradient(#aaffee, #11cc33);
	background:-o-linear-gradient(#aaffee, #11cc33);
	background:linear-gradient(#aaffee, #11cc33);
	/* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
	-webkit-border-top-left-radius:25px 50px;
	-webkit-border-top-right-radius:25px 50px;
	-webkit-border-bottom-right-radius:25px 50px;
	-webkit-border-bottom-left-radius:25px 50px;
	-moz-border-radius:25px / 50px;
	border-radius:25px / 50px;
	border-radius: 18px;
}

/* creates the larger triangle */
.speech-bubble-green:before {
	content:"";
	position:absolute;
	bottom:-30px;
	left:50px;
	border-width:0 0 30px 50px;
	border-style:solid;
	border-color:transparent #11cc33;
	/* reduce the damage in FF3.0 */
	display:block; 
	width:0;
}

/* creates the smaller triangle */
.speech-bubble-green:after {
	content:"";
	position:absolute;
	bottom:-30px;
	left:50px; 
	border-width:0 0 30px 20px;
	border-style:solid;
	border-color:transparent #fff;
	/* reduce the damage in FF3.0 */
	display:block; 
	width:0;
}



.speech-bubble-red {
	position:relative;
	padding:15px 30px;
	margin:0;
	color:#000;
	background:#ff5599; /* default background for browsers without gradient support */
	/* css3 */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#ffdddd), to(#ff5599));
	background:-moz-linear-gradient(#ffdddd, #ff5599);
	background:-o-linear-gradient(#ffdddd, #ff5599);
	background:linear-gradient(#ffdddd, #ff5599);
	/* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
	-webkit-border-top-left-radius:25px 50px;
	-webkit-border-top-right-radius:25px 50px;
	-webkit-border-bottom-right-radius:25px 50px;
	-webkit-border-bottom-left-radius:25px 50px;
	-moz-border-radius:25px / 50px;
	border-radius:25px / 50px;

}

/* creates the larger triangle */
.speech-bubble-red:before {
	content:"";
	position:absolute;
	bottom:-30px;
	left:50px;
	border-width:0 0 30px 50px;
	border-style:solid;
	border-color:transparent #ff5599;
	/* reduce the damage in FF3.0 */
	display:block; 
	width:0;
}

/* creates the smaller triangle */
.speech-bubble-red:after {
	content:"";
	position:absolute;
	bottom:-30px;
	left:50px; 
	border-width:0 0 30px 20px;
	border-style:solid;
	border-color:transparent #fff;
	/* reduce the damage in FF3.0 */
	display:block; 
	width:0;
}

