/* ============================================================================================================================
== BUBBLE WITH A RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

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

.triangle-bubble {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#FFFFFF;
  background:#075698; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
  background:-moz-linear-gradient(#2e88c4, #075698);
  background:-o-linear-gradient(#2e88c4, #075698);
  background:linear-gradient(#2e88c4, #075698);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

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

.triangle-bubble.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
  background:-moz-linear-gradient(#075698, #2e88c4);
  background:-o-linear-gradient(#075698, #2e88c4);
  background:linear-gradient(#075698, #2e88c4);
}

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

.triangle-bubble.left {
	margin-left:40px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#70affa+0,4f81bd+100 */
	background: #70affa; /* Old browsers */
	background: -moz-linear-gradient(top,  #70affa 0%, #4f81bd 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70affa 0%,#4f81bd 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70affa 0%,#4f81bd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70affa', endColorstr='#4f81bd',GradientType=0 ); /* IE6-9 */
}

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

.triangle-bubble.right {
	margin-right:40px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#70affa+0,4f81bd+100 */
	background: #70affa; /* Old browsers */
	background: -moz-linear-gradient(top,  #70affa 0%, #4f81bd 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #70affa 0%,#4f81bd 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #70affa 0%,#4f81bd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70affa', endColorstr='#4f81bd',GradientType=0 ); /* IE6-9 */
}

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

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

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

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

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

.triangle-bubble.left:after {
  top:16px;
  left:-40px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:15px 40px 0 0; /* vary these values to change the angle of the vertex */
  border-color:transparent #4f81bd;
}

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

.triangle-bubble.right:after {
  top:16px;
  right:-40px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  left:auto;
  border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
  border-color:transparent #4f81bd ;
}