/* ============================================================================================================================
== BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

.popupDivStyle
{
    position: absolute; 
    width: 320px;
    font-size: 12px;
    z-index: 9000;
}

.speachbubble 
{
	position:relative;
	padding:10px 10px 13px 15px;
	margin:0;
	color:#000000;
	background:#ffffff; /* default background for browsers without gradient support */
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;

    border:4px solid #0181ca;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.speachbubble + p 
{
    margin:15px 0 2em 85px; 
    font-style:italic;
}

/* creates the triangle Background (default:left) */
.speachbubble:before 
{
	content:"";
	position:absolute;
	bottom:-50px;
	left:50px;
	border-width:0px 20px 50px 0px;
	border-style:solid;
	border-color:transparent #0181ca;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the triangle Inner (default:left) */
.speachbubble:after 
{
	content:"";
	position:absolute;
	bottom:-36px;
	left:49px;
	border-width:0px 18px 50px 0px;
	border-style:solid;
	border-color:transparent #ffffff;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the triangle Background (middle) */
.speachbubble.middle:before 
{
	content:"";
	position:absolute;
	bottom:-50px;
	left:150px;
	border-width:0px 20px 50px 0px;
	border-style:solid;
	border-color:transparent #0181ca;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the triangle Inner (middle) */
.speachbubble.middle:after 
{
	content:"";
	position:absolute;
	bottom:-36px;
	left:149px;
	border-width:0px 18px 50px 0px;
	border-style:solid;
	border-color:transparent #ffffff;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the triangle Background (right) */
.speachbubble.right:before 
{
	content:"";
	position:absolute;
	bottom:-50px;
	left:250px;
	border-width:0px 20px 50px 0px;
	border-style:solid;
	border-color:transparent #0181ca;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the triangle Inner (right) */
.speachbubble.right:after 
{
	content:"";
	position:absolute;
	bottom:-36px;
	left:249px;
	border-width:0px 18px 50px 0px;
	border-style:solid;
	border-color:transparent #ffffff;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}