ios_comment_bubbles.css

/*Shiny buble*/
.com-con .comment:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 3px;
    right: 3px;
    border-radius: 5px;
    height: 6px;
    padding: 3px 0;
    background: rgba(255,255,255,0.75);
    background: -webkit-gradient(linear, 0% 0%, 0% 95%, from(white), to(rgba(255, 255, 255, 0.4)));
    background: -webkit-linear-gradient(white, rgba(255, 255, 255, 0.4));
    background: -moz-linear-gradient(white, rgba(255, 255, 255, 0.4));
}

/*Border of arrow tip - left & right*/
.com-con .comment:before {
    content: '';
    border-color: transparent rgba(0,0,0,0.55) transparent transparent;
    border-style: solid;
    border-width: 6px;
    height:0;
    width:0;
    position:absolute;
    bottom:-3px;
    left:-5px;
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
}
.com-con.right .comment:before {
    border-color: transparent transparent transparent rgba(0,0,0,0.55);
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    left: auto;
    right: -5px;
}

/*Colour of arrow tip - left & right*/
.com-con .comment p:after {
    content: '';
    border-color: transparent #A5FF45 transparent transparent;
    border-style: solid;
    border-width: 6px;
    height:0;
    width:0;
    position:absolute;
    bottom:-1px;
    left:-3px;
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
}
.com-con.right .comment p:after {
    border-color: transparent transparent transparent #A5FF45;
    border-style: solid;
    border-width: 6px;
    left: auto;
    right: -3px;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
}

/*Grey arrow tip to the grey bubble - left & right*/
.com-con.grey .comment p:after {
    border-color: transparent rgb(242, 242, 242) transparent transparent;
}
.com-con.right.grey .comment p:after {
    border-color: transparent transparent transparent rgb(242, 242, 242);
}

/*Theme: Azure */
.com-con.azure .comment {
    background-color: lightblue;
}
.com-con.azure .comment p:after {
    border-color: transparent lightblue transparent transparent;
}
.com-con.azure.right .comment p:after {
    border-color: transparent transparent transparent lightblue;
}

/*Theme: Sunlit */
.com-con.sunlit .comment {
    background-color: #CFF09E;
}
.com-con.sunlit .comment p:after {
    border-color: transparent #CFF09E transparent transparent;
}
.com-con.sunlit.right .comment p:after {
    border-color: transparent transparent transparent #CFF09E;
}

/*Theme: Orange */
.com-con.orange .comment {
    background-color: #fecea8;
}
.com-con.orange .comment p:after {
    border-color: transparent #fecea8 transparent transparent;
}
.com-con.orange.right .comment p:after {
    border-color: transparent transparent transparent #fecea8;
}

/*Theme: Sea */
.com-con.sea .comment {
    background-color: #A8DBA8;
}
.com-con.sea .comment p:after {
    border-color: transparent #A8DBA8 transparent transparent;
}
.com-con.sea.right .comment p:after {
    border-color: transparent transparent transparent #A8DBA8;
}