/* ------------------------------------------
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 
------------------------------------------ */

/* NOTE: Some declarations use longhand notation so that it can be clearly
explained what specific properties or values do and what their relationship
is to other properties or values in creating the effect */

/* ============================================================================================================================
== GENERAL STYLES
** ============================================================================================================================ */

.talkcontent p {
    margin:0.5em 0;
}

.talkcontent h2 {
    margin:0.5em 0em  0.65em 0; 
}
.talkcontent blockquote {
    margin:1em 0;
}

.talkcontent blockquote p {
    margin:0; 
    font-size:1em;
}

.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;
}

/* ============================================================================================================================
== BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

.example-right {
    position:relative;
    padding:15px 30px;
    margin:0;
    color:#555;
    background:#ebebeb; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ebebeb));
    background:-moz-linear-gradient(#f2f2f2, #ebebeb);
    background:-o-linear-gradient(#f2f2f2, #ebebeb);
    background:linear-gradient(#f2f2f2, #ebebeb);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-right + p {margin:15px 0 1em 45px; font-style:italic; font-size:0.76em;}

/* creates the triangle */
.example-right:after {
    content:"";
    position:absolute;
    bottom:-50px;
    left:20px;
    border-width:0 20px 50px 0px;
    border-style:solid;
    border-color:transparent #ebebeb;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}