/* bubble_talk.css */
/* display a comic bubble talk */
/* credits : http://codepen.io/Founts/pen/gmhcl */

/** Minimum html required :
<div class="talk-bubble">
  <div class="talktext">
    <p>CSS Talk Bubble configured by classes. Defaults to square shape, no triangle. Height is auto-adjusting to the height of the text.</p>
  </div>
</div>
**/

/*** Availables options for "talk-bubble" :
* triangle : puts a triangle indicating from where comes the speaker. Must be positioned in on of these position :
  ** left-top
  ** left-in
  ** btm-left
  ** btm-left-in
  ** btm-right
  ** btm-right-in
  ** right-in
  ** right-top
* border : an 8px border around bubble
* round  : rounded borders
* shadow : a light shadow around bubble

*****************************/


/***************
 example of OEF if you want to test it :
****************

\text{A1=slib(text/balloon [Abracadabra ],,200)}
\text{B1=slib(text/balloon [Que vaut \(\frac{1}{2}\) de 6 ? ],lightblue,400,100,
rectangle noshadow triangle=btm-left)}

\text{A2=slib(text/balloon [Abracadabra ],red,,,triangle=btm-right)}
\text{B2=slib(text/balloon [Que vaut \(\frac{1}{2}\) de 6 ? ],lightblue,200,100,
rectangle border triangle=right-in)}

\statement{
<div>Bernadette\A1 Olivier\B1</div>
<div>Aziz\A2 Roberto\B2</div>
}

*********************/

/* talk bubble Main class */
.talk-bubble {
  margin: 0 20px 20px 20px;
  /*display: inline-block;*/
  position: relative;
  /*width: 200px;*/
  height: auto;
  background-color: lightyellow;
}

/* optional styles : border round shadow */
.talk-bubble.border{
  border: 8px solid #666;
  margin: 0 30px 30px 30px;
}
.talk-bubble.round{ border-radius: 30px;}
.talk-bubble.shadow{
  box-shadow: 8px 4px 5px 0 #ccc;
  /*margin-bottom: 10px;*/
}

/* Optional : a triangle indicating who's speaking direction */
.triangle:before, .triangle:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
}

/* Triangle placed top left flush. */
.triangle.border.left-top:before {
  left: -40px;
  right: auto;
  top: -8px;
  bottom: auto;
  border: 32px solid;
  border-color: #666 transparent transparent transparent;
}
.triangle.left-top:after{
  left: -20px;
  right: auto;
  top: 0;
  bottom: auto;
  border: 22px solid transparent;
}

/* Right triangle, left side slightly down */
.triangle.border.left-in:before {
  left: -40px;
  right: auto;
  top: 30px;
  bottom: auto;
  border: 20px solid;
  border-color: #666 #666 transparent transparent;
}
.triangle.left-in:after{
  left: -20px;
  right: auto;
  top: 38px;
  bottom: auto;
  border: 12px solid transparent;
}

/* Triangle, placed bottom left side slightly in*/
.triangle.border.btm-left:before {
  left: -8px;
  right: auto;
  top: auto;
  bottom: -40px;
  border: 32px solid;
  border-color: transparent transparent transparent #666;
}
.triangle.btm-left:after{
  left: 0;
  right: auto;
  top: auto;
  bottom: -20px;
  border: 22px solid transparent;
}

/* Triangle, placed bottom left side slightly in*/
.triangle.border.btm-left-in:before {
  left: 30px;
  right: auto;
  top: auto;
  bottom: -40px;
  border: 20px solid;
  border-color: #666 transparent transparent #666;
}
.triangle.btm-left-in:after{
  left: 38px;
  right: auto;
  top: auto;
  bottom: -20px;
  border: 12px solid transparent;
}

/* Triangle, placed bottom right side slightly in*/
.triangle.border.btm-right-in:before {
  left: auto;
  right: 30px;
  bottom: -40px;
  border: 20px solid;
  border-color: #666 #666 transparent transparent;
}
.triangle.btm-right-in:after{
  left: auto;
  right: 38px;
  bottom: -20px;
  border: 12px solid transparent;
}
/*
  left: -8px;
  right: auto;
  top: auto;
  bottom: -40px;
  border: 32px solid;
  border-color: transparent transparent transparent #666;
  left: 0;
  right: auto;
  top: auto;
  bottom: -20px;
  border: 22px solid;
  border-color: transparent transparent transparent lightyellow;

/* Triangle, placed bottom right side slightly in*/
.triangle.border.btm-right:before {
  left: auto;
  right: -8px;
  bottom: -40px;
  border: 20px solid;
  border-color: #666 #666 transparent transparent;
}
.triangle.btm-right:after{
  left: auto;
  right: 0;
  bottom: -20px;
  border: 12px solid transparent;
}

/* Triangle, right side slightly down*/
.triangle.border.right-in:before {
  left: auto;
  right: -40px;
  top: 30px;
  bottom: auto;
  border: 20px solid;
  border-color: #666 transparent transparent #666;
}
.triangle.right-in:after{
  left: auto;
  right: -20px;
  top: 38px;
  bottom: auto;
  border: 12px solid transparent;
}

/* Triangle placed top right flush. */
.triangle.border.right-top:before {
  left: auto;
  right: -40px;
  top: -8px;
  bottom: auto;
  border: 32px solid;
  border-color: #666 transparent transparent transparent;
}
.triangle.right-top:after{
  left: auto;
  right: -20px;
  top: 0;
  bottom: auto;
  border: 20px solid transparent;
}

/* talk bubble contents */
.talktext{
  padding: 1em;
  text-align: left;
  line-height: 1.5em;
}

/* triangle color */
.triangle:not(.btm-left):after{border-top-color: lightyellow;}

.triangle.left-in:after{     border-right-color: lightyellow;}
.triangle.btm-left:after{    border-left-color:  lightyellow;}
.triangle.btm-left-in:after{ border-left-color:  lightyellow;}

.triangle.btm-right-in:after{border-right-color: lightyellow;}
.triangle.btm-right:after{   border-right-color: lightyellow;}
.triangle.right-in:after{    border-left-color:  lightyellow;}


/* creates the larger circle */
.talk-bubble.thought:before {
  content:"";
  position:absolute;
  bottom:-20px;
  left:50px;
  width:30px;
  height:30px;
  background:#075698;
  /* css3 */
  border-radius:30px;
}

/* creates the smaller circle */
.talk-bubble.thought:after {
  content:"";
  position:absolute;
  bottom:-30px;
  left:30px;
  width:15px;
  height:15px;
  background:#075698;
  /* css3 */
  border-radius:15px;
}

.talk-bubble.thought{margin-bottom:2.5em;}

/* Bubble speaker : display the name of the speaker at the right place (cf slib/balloon) */
.bubble_speaker.left-top,.bubble_speaker.right-top{vertical-align:top}
.talk-bubble.left-top,.talk-bubble.right-top{margin-top:.5em;}
.bubble_speaker.btm-left{left:.5em}
.bubble_speaker.btm-left-in{left:40px}
.bubble_speaker.btm-right-in{right:40px;}
.bubble_speaker.btm-right{ right:.5em;}
/*
.bubble_speaker.right-in{}
.bubble_speaker.left-in{}
*/

/*.talktext p{
  /* remove webkit p margins */
  /*-webkit-margin-before: 0em;
  -webkit-margin-after: 0em;*/
/*}*/