/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
    position: relative;
    /*padding: 15px;*/
    /*margin: 1em 0 3em;*/
    color: #000;
    /*CINE ARCTIC BLUE*/
    /*Pantone equivalent*/
    background: #8cbae4;
    border-radius: 10px;
    background: linear-gradient(top, #229ad6, #229ad6);
}

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

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

.triangle-obtuse {
    /*position: relative;*/
    /*padding: 15px;*/
    /*margin: 1em 0 3em;*/
    color: #fff;
    background: #c81e2b;
    /* css3 */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f04349), to(#c81e2b));
    background: -moz-linear-gradient(#f04349, #c81e2b);
    background: -o-linear-gradient(#f04349, #c81e2b);
    background: linear-gradient(#f04349, #c81e2b);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}