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

#conversation {
  height: 450px;
  border: #F8E0F7 1px solid;
  background-color: #ffffff;
  overflow:scroll;
  padding: 5px;
  margin-left: 10px;
}
.emaildesign {
  clear:both;

}
.emailMessageL{
  padding-top: 10px;
  margin-top: 7px;
  margin-left: 17px;
  position: relative;
  float:left; 
}

.emailMessageR{
  padding-top: 10px;  
  margin-top: 7px;
  margin-right: 17px;
  position: relative;
  float:right;  
  
  
}
.emailReadL{  
  padding-top: 5px;
  margin-left: 22px;  
  position: relative;

    color:#808080;  
  float:left;    
}
.emailReadR{
  padding-top: 5px;
  margin-right: 22px; 
  position: relative;

    color:#808080;  
  float:right;    
}


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

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




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

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

.triangle-right {
  position:relative;
  padding:15px;

  color:#fff;
  background:#FFFFFF; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#FFFFFF));
  background:-moz-linear-gradient(#FFFFFF, #FFFFFF);
  background:-o-linear-gradient(#FFFFFF, #FFFFFF);
  background:linear-gradient(#FFFFFF, #FFFFFF);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

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

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

/* Variant : for left positioned triangle  USED BY fsm
------------------------------------------ */

.triangle-right.left {
  margin-left:40px;
  background:#222222;
}

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

.triangle-right.right {
  margin-right:40px;
  background:#222222;
}

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

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

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

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

/* Variant : left USED BY fsm
------------------------------------------ */

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

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

.triangle-right.right:after {
  top:16px;
  right:-40px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  left:auto;
  border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
  border-color:transparent #222222 ;
}



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

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

.triangle-right-pink {
  position:relative;
  padding:15px;

  color:#fff;
  background:#FFFFFF; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#FFFFFF));
  background:-moz-linear-gradient(#FFFFFF, #FFFFFF);
  background:-o-linear-gradient(#FFFFFF, #FFFFFF);
  background:linear-gradient(#FFFFFF, #FFFFFF);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

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

.triangle-right-pink.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#FFFFFF));
  background:-moz-linear-gradient(#FFFFFF, #FFFFFF);
  background:-o-linear-gradient(#FFFFFF, #FFFFFF);
  background:linear-gradient(#FFFFFF, #FFFFFF);
}

/* Variant : for left positioned triangle  USED BY fsm
------------------------------------------ */

.triangle-right-pink.left {
  margin-left:40px;
  background:#239b0f;
}

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

.triangle-right-pink.right {
  margin-right:40px;
  background:#239b0f;
}

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

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

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

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

/* Variant : left USED BY fsm
------------------------------------------ */

.triangle-right-pink.left:after {
  top:16px;
  left:-15px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:15px 15px 0 0; /* vary these values to change the angle of the vertex */
  border-color:transparent #239b0f;
}

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

.triangle-right-pink.right:after {
  top:16px;
  right:-40px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  left:auto;
  border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
  border-color:transparent #239b0f ;
}













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

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

.triangle-left {
  position:relative;
  padding:15px;
  color:#fff;
  background:#000000; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#000000));
  background:-moz-linear-gradient(#000000, #000000);
  background:-o-linear-gradient(#000000, #000000);
  background:linear-gradient(#000000, #000000);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

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

.triangle-left.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#000000));
  background:-moz-linear-gradient(#000000, #000000);
  background:-o-linear-gradient(#000000, #000000);
  background:linear-gradient(#FFFFFF, #FFFFFF);
}

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

.triangle-left.left {
  margin-left:40px;
  background:#239b0f;
}

/* Variant : for right positioned triangle USED BY fsm
------------------------------------------ */

.triangle-left.right {
  margin-right:40px;
  background:#239b0f;
}

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

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

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

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

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

.triangle-left.left:after {
  top:16px;
  left:-15px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:15px 15px 0 0; /* vary these values to change the angle of the vertex */
  border-color:transparent #239b0f;
}

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

.triangle-left.right:after {
  top:16px;
  right:-14px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  left:auto;
  border-width:15px 0 0 14px; /* vary these values to change the angle of the vertex */
  border-color:transparent #239b0f ;
}


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

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

.triangle-left-blue {
  position:relative;
  padding:15px;
  color:#fff;
  background:#000000; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#000000));
  background:-moz-linear-gradient(#000000, #000000);
  background:-o-linear-gradient(#000000, #000000);
  background:linear-gradient(#000000, #000000);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

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

.triangle-left-blue.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#000000));
  background:-moz-linear-gradient(#000000, #000000);
  background:-o-linear-gradient(#000000, #000000);
  background:linear-gradient(#FFFFFF, #FFFFFF);
}

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

.triangle-left-blue.left {
  margin-left:40px;
  background:#222222;
}

/* Variant : for right positioned triangle USED BY fsm
------------------------------------------ */

.triangle-left-blue.right {
  margin-right:40px;
  background:#222222;
}

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

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

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

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

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

.triangle-left-blue.left:after {
  top:16px;
  left:-15px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:15px 15px 0 0; /* vary these values to change the angle of the vertex */
  border-color:transparent #222222;
}

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

.triangle-left-blue.right:after {
  top:16px;
  right:-14px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  left:auto;
  border-width:15px 0 0 14px; /* vary these values to change the angle of the vertex */
  border-color:transparent #222222 ;
}