<style type="text/css">
/* ------------------------------------------
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 
------------------------------------------ */

/* NOTE: Some declarations use longhand notation so that it can be clearly
explained what specific properties or values do and what their relationship
is to other properties or values in creating the effect */

/* ------------------------------------------------------------------------------------
-- GENERAL STYLES
------------------------------------------------------------------------------------ */


#container {width:500px; padding:0 0 50px; margin:0 auto;}

.content h2 {margin:2em 0 0.75em; font-size:2em; font-weight:bold; font-style:normal; text-align:left;}
blockquote {margin:1em 0;}
blockquote p {margin:0; font-size:2em;}


/* Bubble with a border rather than solid colour
------------------------------------------ */

.triangle-border {
	position:relative;
	padding:15px;
	margin:1em 0 0em;
	border:5px solid #5a8f00;
	color:#333;
	background:#fff;
	
	/* css3 */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

/* creates the larger triangle */
.triangle-border:before {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-40px; /* value = - border-top-width - border-bottom-width */
	left:80px; /* controls horizontal position */
	width:0;
	height:0;
	border:20px solid transparent;
	border-top-color:#5a8f00;
}

/* creates the smaller  triangle */
.triangle-border:after {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-26px; /* value = - border-top-width - border-bottom-width */
	left:87px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	width:0;
	height:0;
	border:13px solid transparent;
	border-top-color:#fff;
}

/* Bubble with a border rather than solid colour
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
	top:-40px; /* value = - border-top-width - border-bottom-width */
	right:40px; /* controls horizontal position */
	bottom:auto;
	left:auto;
	border:20px solid transparent;
	border-bottom-color:#5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
	top:-26px; /* value = - border-top-width - border-bottom-width */
	right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
	bottom:auto;
	left:auto;
	border:13px solid transparent;
	border-bottom-color:#fff;
}


</style>
