/* 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;
}