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

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

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

  border:2px solid #ffffff;

}

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

.triangle-isosceles.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
  background:-moz-linear-gradient(#f3961c, #f9d835);
  background:-o-linear-gradient(#f3961c, #f9d835);
  background:linear-gradient(#f3961c, #f9d835);
}

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

.triangle-isosceles.left {
  margin-left:50px;
  background:#f3961c;
}

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

.triangle-isosceles.right {
  margin-right:50px;
  background:#f3961c;
}

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

.triangle-isosceles:before {  /* This is the "outside" triangle, or the white border */
  content:"";
  position:absolute;
  bottom:-17px; /* value = - border-top-width - border-bottom-width */
  left:10px; /* controls horizontal position */
  border-width:15px 15px 0;
  border-style:solid;
  border-color:#ffffff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.triangle-isosceles:after {   /* This is the "inside" smaller triangle.  Necessary to have 2 triangles to create border effect */
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:9px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:16px 16px 0;
  border-style:solid;
  border-color:#79a6c4 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}   

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

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

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

.triangle-isosceles.left:after {
  top:16px; /* controls vertical position */
  left:-50px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:10px 50px 10px 0;
  border-color:transparent #f3961c;
}

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

.triangle-isosceles.right:after {
  top:16px; /* controls vertical position */
  right:-50px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  left:auto;
  border-width:10px 0 10px 50px;
  border-color:transparent #f3961c;
}