/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-isosceles {
	position:relative;
	padding:15px;
	margin:15px 0px 0px 0px;
	color:#000;
	background:#f3961c; /* default background for browsers without gradient support */
	/* css3 */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
	background:-moz-linear-gradient(#f9d835, #f3961c);
	background:-o-linear-gradient(#f9d835, #f3961c);
	background:linear-gradient(#f9d835, #f3961c);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-isosceles.top {
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
	background:-moz-linear-gradient(#f3961c, #f9d835);
	background:-o-linear-gradient(#f3961c, #f9d835);
	background:linear-gradient(#f3961c, #f9d835);
}

/* Variant : for left/right positioned triangle
------------------------------------------ */



/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles:after {
	content:"";
	position:absolute;
	bottom:-15px; /* value = - border-top-width - border-bottom-width */
	left:50px; /* controls horizontal position */
	border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#f3961c transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

/* Variant : top
------------------------------------------ */

.triangle-isosceles.top:after {
	top:-15px; /* value = - border-top-width - border-bottom-width */
	right:50px; /* controls horizontal position */
	bottom:auto;
	left:auto;
	border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
	border-color:#f3961c transparent;
}

/* Variant : left
------------------------------------------ */

.chat-bubble {
background-color:#EDEDED;
border:2px solid #666666;
font-size:15px;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
border-color: transparent transparent #666666 transparent ;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-22px;
left:30px;
}

.chat-bubble-arrow {
border-color: transparent transparent #EDEDED transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-19px;
left:30px;
}

/*IE fix */

.chat-bubble-arrow-2 {
_border-left-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}