/* 
 * http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/
 */

.triangle {
	position:relative;
	padding:15px;
	margin:0;
	color:#000;
	background: #EEEEEE;
}

/* creates triangle */
.triangle:after {
	content:"\00a0";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	z-index:-1;
	bottom:-30px; /* value = - border-top-width - border-bottom-width */
	left:50px; /* controls horizontal position */
	width:0;
	height:0;
	border-width:15px 15px; /* vary these values to change the angle of the vertex */
	border-style:solid;
}


/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle.left {
	margin-left:50px;
}

/* creates triangle */
.triangle.left:after {
	top:12px; /* controls vertical position */
	left:-50px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:15px 30px;
}

.triangle.top {
}

/* creates triangle */
.triangle.top:after {
	top:-30px; /* value = - border-top-width - border-bottom-width */
	right:50px; /* controls horizontal position */
	bottom:auto;
	left:auto;
}