/* ================================================ *
== GENERAL STYLES
* ================================================ */
/*
body {
  padding:0;
  margin:0;
  font:1em/1.4 Cambria, Georgia, sans-serif;
  color:#333;
  background:#fff;
}

a:link,
a:visited {
  border-bottom:1px solid #c55500;
  text-decoration:none;
  color:#c55500;
}

a:visited {
  border-bottom:1px solid #730800;
  color:#730800;
}

a:hover,
a:focus,
a:active {
  border:0;
  color:#fff;
  background:#c55500;
}

a:visited:hover,
a:visited:focus,
a:visited:active {
  color:#fff;
  background:#730800;
}

#container {
  width:500px;
  padding:0 0 50px;
  margin:0 auto;
}
/*
h1 {
  margin:1em 0 0;
  font-size:2.5em;
  font-weight:normal;
  line-height:1.2;
  text-align:center;
}
*/
/*
h2 {
  margin:0.5em 0 1.5em;
  font-size:1.25em;
  font-weight:normal;
  font-style:italic;
  text-align:center;
}
*/
p {
  margin:1em 0;
}
/*
.content h2 {
  margin:2em 0 0.75em;
  font-size:2em;
  font-weight:bold;
  font-style:normal;
  text-align:left;
}
*/
blockquote {
  margin:1em 0;
}

blockquote p {
  margin:0;
  font-size:2em;
}

.follow {
  clear:both;
  margin-top:2em;
  font-size:1.125em;
}

.follow span {
  font-weight:bold;
}


/*
 Should you want to set a background colour on a containing element
 certain types of bubble effect may require you to include these
 style declarations.
 */
.content {
  position:relative;
  z-index:1;
}

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

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

.bubble {
  position:relative;
  padding:15px;
  margin:1em 0; /* margin:1em 0 3em;*/
  color:#f6f7f8; /* #fff */
  text-shadow: 1px 1px 2px white,  /* outline emojis */
/*    -1px -1px 1px white,
/*    -1px 1px 1px white,
/*    0 0 1px white,
/*    1px -1px 1px white; */
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

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

.bubble.left {
  margin-right:50px; /*  margin-left:30px; */
  left: 0; /* added alignment for bubble */
  background:#6f7f8f; /* #555555; */
  border:5px solid #6f7f8f; /* #555555; */
}

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

.bubble.right {
  margin-left:50px; /* margin-right:30px; */
  right: 0; /* added alignment for bubble */
  background:#687169; /* 444444; */
  border:5px solid #687169; /* 444444; */
}

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

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

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

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

/* creates the larger triangle */
.bubble.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 */
.bubble.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 */
.bubble.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 #6f7f8f; /* #555555; */
/*  background:#555555; */
}

/* creates the smaller  triangle */
.bubble.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 #6f7f8f; /* #555555; */
/*  background:#555555; */
}

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

/* creates the larger triangle */
.bubble.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 #687169; /* 444444; */
/*  background:#444444; */
}

/* creates the smaller  triangle */
.bubble.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 #687169; /* 444444; */
/*  background:#444444; */
}