/* ------------------------------------------
PURE CSS SPEECH BUBBLES
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 02 March 2010
Version: 1.2 (03 March 2011)

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

/* 
 Should you want to set a background colour on a containing element
 certain types of bubble effect may require you to include these 
 style declarations.
 */
.content {
    position:relative;
    z-index:1;
}


/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

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

.speechBubble {
	width: 425px;
	margin-top:20px !important;
	margin-bottom:10px !important;

	font-size: 15px;
	line-height: 23px;
	position:relative;
	padding:30px;
	padding-bottom:35px;
	color:#000;
	background: none; /* default background for browsers without gradient support */
	/* css3 */
	
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	border: none;
	
	 -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
}

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

.speechBubble.top {
	background:#FFFFFF;
	}

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

.speechBubble.left {
	float:right;
	background:#FFFFFF;
	margin-right: 5px;
}

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

.speechBubble.right {
	float:left;
	background:#FFFFFF;
	margin-left: 5px;

}

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

/* creates triangle */
.speechBubble: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:#FFFFFF transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

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

.speechBubble.top:after {
	top:-10px; /* value = - border-top-width - border-bottom-width */
	right:265px; /* controls horizontal position */
	bottom:auto;
	left:auto;
	border-width:0 10px 10px; /* vary these values to change the angle of the vertex */
	border-color:#FFFFFF transparent;
	
}

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

.speechBubble.left:after {
	top:65px; /* controls vertical position */
	left:-10px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:10px 10px 10px 0;
	border-color:transparent #FFFFFF;
	
	
}

/* Variant : right
------------------------------------------ */

.speechBubble.right:after {
	top:65px; /* controls vertical position */
	right:-10px; /* value = - border-left-width - border-right-width */
	bottom:auto;
    left:auto;
	border-width:10px 0 10px 10px;
	border-color:transparent #FFFFFF;
}