span.bubble.wrapper, span.bubble.wrapper, span.bubble.wrapper .inner, span.bubble.wrapper.shadow .outer {
  display: block;
}

span.bubble.wrapper {
  width: 100%;
}

span.bubble.wrapper .point {
  border-left-color: #ffffff;
  border-left-style: solid;
  border-left-width: 8px;
  border-right-color: #ffffff;
  border-right-style: solid;
  border-right-width: 8px;
  float: right;
  font-size: 0px;
  line-height: 0%;
  margin-right: 16px;
  width: 0px;
}

span.bubble.wrapper.bottom .top { display: none; }
span.bubble.wrapper.top .bottom { display: none; }

span.bubble.wrapper.top .top .point {
  border-bottom-style: solid;
  border-bottom-width: 16px;
}

span.bubble.wrapper.bottom .bottom .point {
  border-top-style: solid;
  border-top-width: 16px;
}

span.bubble.wrapper .inner { border-left-style: solid; border-left-width: 1px; height: auto; padding: 5px; }
span.bubble.wrapper.top .inner { border-bottom-style: solid; border-bottom-width: 1px; }
span.bubble.wrapper.bottom .inner { border-top-style: solid; border-top-width: 1px; }

span.bubble.wrapper.shadow .outer .inner.content { border: 0 !important; }
span.bubble.wrapper.shadow.top .outer, span.bubble.wrapper.shadow.top .inner { bottom: 2px; left: 2px; position: relative; }
span.bubble.wrapper.shadow.bottom .outer, span.bubble.wrapper.shadow.bottom .inner { top: 2px; left: 2px; position: relative; }

/* colors */

span.bubble.wrapper.gray .inner { background: #d8dad4; border-bottom-color: #c9cbc4; border-left-color: #c9cbc4; border-top-color: #c9cbc4;}
span.bubble.wrapper.gray .point { border-bottom-color: #d8dad4; border-top-color: #d8dad4; }
span.bubble.wrapper.gray.shadow .outer { background: #c9cbc4; }

span.bubble.wrapper.slate .inner * { color: #ffffff !important; }
span.bubble.wrapper.slate .inner { background: #484848; border-bottom-color: #6a6a6a; border-left-color: #6a6a6a; border-top-color: #6a6a6a;}
span.bubble.wrapper.slate .point { border-bottom-color: #484848; border-top-color: #484848; }
span.bubble.wrapper.slate.shadow .outer { background: #6a6a6a; }

span.bubble.wrapper.blue .inner { background: #99b6d3; border-bottom-color: #88a5c2; border-left-color: #88a5c2; border-top-color: #88a5c2; }
span.bubble.wrapper.blue .point { border-bottom-color: #99b6d3; border-top-color: #99b6d3; }
span.bubble.wrapper.blue.shadow .outer { background: #88a5c2; }

span.bubble.wrapper.purple .inner { background: #c8a8e3; border-bottom-color: #b797d2; border-left-color: #b797d2; border-top-color: #b797d2; }
span.bubble.wrapper.purple .point { border-bottom-color: #c8a8e3; border-top-color: #c8a8e3; }
span.bubble.wrapper.purple.shadow .outer { background: #b797d2; }

span.bubble.wrapper.green .inner { background: #bedd98; border-bottom-color: #adcc87; border-left-color: #adcc87; border-top-color: #adcc87; }
span.bubble.wrapper.green .point { border-bottom-color: #bedd98; border-top-color: #bedd98; }
span.bubble.wrapper.green.shadow .outer { background: #adcc87; }

span.bubble.wrapper.yellow .inner { background: #e4df99; border-bottom-color: #d3ce88; border-left-color: #d3ce88; border-top-color: #d3ce88; }
span.bubble.wrapper.yellow .point { border-bottom-color: #e4df99; border-top-color: #e4df99; }
span.bubble.wrapper.yellow.shadow .outer { background: #d3ce88; }

span.bubble.wrapper.red .inner { background: #d48080; border-bottom-color: #bb7272; border-left-color: #bb7272; border-top-color: #bb7272; }
span.bubble.wrapper.red .point { border-bottom-color: #d48080; border-top-color: #d48080; }
span.bubble.wrapper.red.shadow .outer { background: #bb7272; }

span.bubble.wrapper.orange .inner { background: #f2b471; border-bottom-color: #e1a360; border-left-color: #e1a360; border-top-color: #e1a360; }
span.bubble.wrapper.orange .point { border-bottom-color: #f2b471; border-top-color: #f2b471; }
span.bubble.wrapper.orange.shadow .outer { background: #e1a360; }