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

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

.speech-bubble{
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#FFF; /* default background for browsers without gradient support */
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:2px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.1);
}

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