/* ------------------------------------------
PURE CSS SPEECH BUBBLES by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/
Created: 02 March 2010   Version: 1.2 (03 March 2011)
------------------------------------------ */

/* THE BUBBLE DEFAULT AND PUBLIC */

.triangle-border {
   position:relative;
   padding:15px;
   margin: 1em 0 1em;
   /* border:5px solid #FF9640; */
   border: 5px solid #dedede;
   color:#333;
   background:#fff;
   /* css3 */
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
   line-height: 2; }

/* Variant : for left positioned triangle  */
.triangle-border.left {
   margin-left:30px;
   margin-right: 4.5em; }

/* Variant : for right positioned triangle  */
.triangle-border.right {
   margin-right: 4.5em;
   margin-left: 2.5em; }

/* THE TRIANGLE  */
.triangle-border:before {
   content:"";
   position:absolute;
   bottom:-20px; /* value = - border-top-width - border-bottom-width */
   left:40px; /* controls horizontal position */
   border-width: 20px 20px 0;
   border-style:solid;
   border-color: #dedede 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:#fff transparent;
   /* reduce the damage in FF3.0 */
   display:block; 
   width:0; }


/* Variant : left  */

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

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


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

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



/* THE BUBBLE PRIVATE */

.triangle-border-private {
   position:relative;
   padding:15px;
   margin: 1em 0 1em;
   /* border:5px solid #FF9640; */
   border: 5px solid #FFFED6;
   color:#333;
   background:#FFFEEE;
   /* css3 */
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
   line-height: 2; }

/* Variant : for left positioned triangle  */

.triangle-border-private.left {
   margin-left:30px;
   margin-right: 4.5em; }

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

/* creates the smaller  triangle */
.triangle-border-private: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:#fff transparent;
   /* reduce the damage in FF3.0 */
   display:block; 
   width:0; }


/* Variant : left  */

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

/* creates the smaller  triangle */
.triangle-border-private.left:after {
   top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
   bottom:auto;
   left:-21px; /* value = - border-left-width - border-right-width */
   border-width:9px 21px 9px 0;
   border-color:transparent #FFFEEE; }


/* Variant : right  */

/* creates the larger triangle */
.triangle-border-private.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 #FFFED6; }

/* creates the smaller  triangle */
.triangle-border-private.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 #fff; }