/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

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

.triangle-border {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  border:5px solid #e0e1e2;
  background:#f4f4f4;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

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

.triangle-border.left {
  margin-left:30px;
}

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

.triangle-border.right {
  margin-right:30px;
}

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

.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#e0e1e2 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}
.pinkBorder.triangle-border{ border:5px solid #ef5076;}
.pinkBorder.triangle-border:before{ border-color:#ef5076 transparent; }

.pink.triangle-border{	background:#ef5076;}
.pink.triangle-border:after{ border-color:#ef5076 transparent; }

.blue.triangle-border{	background:#5a98bd;}
.blue.triangle-border:after{ border-color:#5a98bd transparent; }

.green.triangle-border{	background:#7ebb42;}
.green.triangle-border:after{ border-color:#7ebb42 transparent; }

.white.triangle-border{	background:#f4f4f4;}
.white.triangle-border:after{ border-color:#f4f4f4 transparent; }

.speakLeft.triangle-border:before {
	left:40px; /* controls horizontal position */
	/*Medium-large right triangle*/
	left: 57px;
	border-width: 71px 71px 0px 16px;
	bottom: -71px;
}
.speakLeft.triangle-border:after {
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	position:relative;
	/*Medium-large right triangle*/
	border-width:60px 60px 0px 14px; 
	top:75px; 
}

.speakRight.triangle-border:before {
	xleft:640px; /* controls horizontal position */
	/*Medium right triangle*/
	xleft: 655px;
	xborder-width: 51px 51px 0px 12px;
	xbottom: -51px; 
	/*Medium-large right triangle*/
	left: 657px;
	border-width: 71px 71px 0px 16px;
	bottom: -71px;
	/*large right triangle*/
	xleft: 657px;
	xborder-width: 91px 91px 0px 17px;
	xbottom: -91px;
} 
.speakRight.triangle-border:after {
	left:647px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	position:relative;
	/*Medium-large right triangle*/
	border-width:60px 60px 0px 14px; 
	top:75px; 
	margin-top: -60px;

}
.speakRightTop.triangle-border:before {
	/*Medium-large right triangle*/
	left: 657px;
	xborder-width: 71px 71px 0px 16px;
	xbottom: -71px;
	bottom:auto;
	border-width: 0px 16px 71px 71px;
	top:-71px;
} 
.speakRightTop.triangle-border:after {
	left:664px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	xposition:relative;
	/*Medium-large right triangle*/
	xborder-width:60px 60px 0px 14px; 
	xtop:75px; 
	
	bottom:auto;
	border-width:0px 14px 60px 60px;
	top:-60px;
	position:absolute;
}

.speakMiddle.triangle-border:before {
	left:360px; /* controls horizontal position */
	/*Medium-large right triangle*/
	xleft: 57px;
	border-width: 71px 71px 0px 16px;
	bottom: -71px;
}
.speakMiddle.triangle-border:after {
	left:367px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	position:relative;
	/*Medium-large right triangle*/
	border-width:60px 60px 0px 14px; 
	top:75px; 
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
 xbottom:-13px; /* value = - border-top-width - border-bottom-width */
 xborder-width:13px 13px 0;
  border-style:solid;
  border-color:#f4f4f4 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}



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

/* creates the larger triangle */
.triangle-border.top:before {
	bottom:auto;
	border-width: 0px 16px 71px 71px;
	top:-71px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
	bottom:auto;
	border-width:0px 14px 60px 60px;
	top:-60px;
	position:absolute;
}










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

/* creates the larger triangle */
.triangle-border.left:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 30px 15px 0;
  border-color:transparent #5a8f00;
  border-color:transparent #e0e1e2;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 21px 9px 0;
  border-color:transparent #fff;
}

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

/* creates the larger triangle */
.triangle-border.right:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:auto;
  right:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 0 15px 30px;
  border-color:transparent #5a8f00;
  border-color:transparent #e0e1e2;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:auto;
  right:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 0 9px 21px;
  border-color:transparent #fff;
}