/* ------------------------------------------
PROGRESSIVE ENHANCEMENT: PURE CSS SPEECH BUBBLES
by Nicolas Gallagher
- http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 02 March 2010
Version: 1.01

Dual licensed under MIT and GNU GPLv2 © Nicolas Gallagher 
------------------------------------------ */
/* Type 1
------------------------------------------ */

.testemonialOne {
	position:relative;
	padding:15px 30px;
	margin:0;
	color:#000;
	background:#f3961c; /* default background for browsers without gradient support */
	
	/* css3
	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;
	/* NOTE: webkit gradient implementation is not as per spec */
	background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
	background:-moz-linear-gradient(top, #f9d835, #f3961c);
	background:-o-linear-gradient(top, #f9d835, #f3961c);
	background:linear-gradient(top, #f9d835, #f3961c);
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.testemonialOne + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}

/* creates the larger triangle */
.testemonialOne:before {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-30px;
	right:80px;
	width:0;
	height:0;
	border-width:0 0 30px 50px;
	border-style:solid;
	border-color:transparent #f3961c;
}

/* creates the smaller triangle */
.testemonialOne:after {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-30px;
	right:110px; 
	width:0;
	height:0;
	border-width:0 0 30px 20px;
	border-style:solid;
	border-color:transparent #fff;
}

/* Type 2 */
.testemonialTwo {
	position:relative;
	padding:15px 30px;
	margin:0;
	color:#000;
	background:#3880CA; /* default background for browsers without gradient support */
	
	/* css3
	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;
	/* NOTE: webkit gradient implementation is not as per spec */
	background:-webkit-gradient(linear, left top, left bottom, from(#64B6DC), to(#3880CA));
	background:-moz-linear-gradient(top, #64B6DC, #3880CA);
	background:-o-linear-gradient(top, #64B6DC, #3880CA);
	background:linear-gradient(top, #64B6DC, #3880CA);
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.testemonialTwo + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}

/* creates the larger triangle */
.testemonialTwo:before {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-30px;
	right:80px;
	width:0;
	height:0;
	border-width:0 0 30px 50px;
	border-style:solid;
	border-color:transparent #3880CA;
}

/* creates the smaller triangle */
.testemonialTwo:after {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-30px;
	right:110px; 
	width:0;
	height:0;
	border-width:0 0 30px 20px;
	border-style:solid;
	border-color:transparent #fff;
}