/* ------------------------------------------
PURE CSS SPEECH BUBBLES
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 02 March 2010
Version: 1.2 (03 March 2011)

Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
------------------------------------------ */

/* Quote author
------------------------------------------ */
/*
.triangle-border + p {
  padding-left: 45px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 12px;
  margin-top: -25px;
}
*/

.com_client {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 12px;
  padding-top: 10px;
}

.triangle-border.com_found {
  border: 1px solid #ff9f2e;
  background-color: #ffe4c4;
}

.triangle-border.com_found.left:before {
  border-color: transparent #ff9f2e; 
}
.triangle-border.com_found.left:after {
  border-color:transparent #ffe4c4;
}

.triangle-border.officiel {
  border: 1px solid #61ff2e;
  background-color: #d2ffc4;
}

.triangle-border.officiel.left:before {
  border-color: transparent #61ff2e; 
}
.triangle-border.officiel.left:after {
  border-color:transparent #d2ffc4;
}
.triangle-border p { padding: 0; margin: 0; }

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

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

.triangle-border {
  position:relative;
  padding:15px;
  margin: 0 0 15px 0;
  border: 1px solid #CCCCCC;
  background:#f8f8f8;

  font-family: 'Roboto Condensed', cursive;

  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

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

.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-14px; /* value = - border-top-width - border-bottom-width */
  left:46px; /* controls horizontal position */
  border-width:14px 14px 0;
  border-style:solid;
  border-color:#CCCCCC transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#f8f8f8 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

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

/* creates the larger triangle */
.triangle-border.top:before {
  top:-20px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:40px; /* controls horizontal position */
  border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
  top:-13px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
  border-width:0 13px 13px;
}

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

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

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

/* 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 #CCCCCC;
}

/* 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 #f8f8f8;
}



/* ============================================================================================================================
== TWITTER
** ============================================================================================================================ */

.example-twitter {
  position:relative;
  padding:15px;
  margin:100px 0 0.5em;
  color:#333;
  background:#eee;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.example-twitter p {font-size:28px; line-height:1.25em;}

/* this isn't necessary, just saves me having to edit the HTML of the demo */
.example-twitter:before {
  content:url(twitter-logo.gif);
  position:absolute;
  top:-60px;
  left:0;
  width:155px;
  height:36px;
  /* reduce the damage in FF3.0 */
  display:block;
}

/* creates the triangle */
.example-twitter:after {
  content:"";
  position:absolute;
  top:-30px;
  left:50px;
  border:15px solid transparent;
  border-bottom-color:#eee;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-twitter + p { padding-left:15px; font-size: 11px; }