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

.bubble {
	position:relative;
 top:100px;
 left:20px;
	padding:15px;
	margin:1em 0 3em;
	background-color: #fff;
	border: 4px solid #f00;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
 
 line-height:24px;
	font-family:'Cabin', Helvetica, Arial, sans-serif;
 font-size: 0.9em;
 line-height:1.4em;
 font-weight:400;
}

/* Variant : for top positioned triangle */
.bubble.top {
	background-color: #fff;
	border: 4px solid #f00;
}

/* Variant : for left/right positioned triangle */
.bubble.left {
	margin-left:50px;
	background:#fff;
}

/* Variant : for right positioned triangle */
.bubble.right {
	margin-right:50px;
	background:#fff;
}

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

/* creates triangle */

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


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

/* Variant : left */
.bubbles.left:after {
	top:16px; /* controls vertical position */
	left:-20px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:10px 20px 10px 0;
	border-color:transparent #f00;
}

/* Variant : right */
.bubble.right:after {
	top:16px; /* controls vertical position */
	right:-20px; /* value = - border-left-width - border-right-width */
	bottom:auto;
 left:auto;
	border-width:10px 0 10px 20px;
	border-color:transparent #f00;
}