speechbubble.less

/**
 * CSS Speech Bubble
 */

/* Credit : http://nicolasgallagher.com */

/* Requires LESS Elements to be included */

.skewX(@deg: -15deg) {
	-webkit-transform:skewX(@deg);
       -moz-transform:skewX(@deg);
        -ms-transform:skewX(@deg);
         -o-transform:skewX(@deg);
            transform:skewX(@deg);
}

.quote(@speechBubbleText: #fff, @speechBubbleBackground : #245991, @padding: 25px, @bubblePointHeight: 20px, @bubblePointPadding: 0px, @bubblePointAngle: -15deg)
{
    position:relative;
    width: 100%;
    padding: @padding - (@padding*.75) @padding @padding - (@padding*.5);
    margin: 20px auto;
    font-family: 'Open Sans Condensed', sans-serif; 
    color: @speechBubbleText;
    background: @speechBubbleBackground;
	margin-bottom: @bubblePointHeight + @bubblePointPadding;
	.drop-shadow(2px, 2px, 2px, 0.2);
	
	:after {
		content:"";
		position: absolute;
		top: 100%;
		right: 25px;
		border-width: @bubblePointHeight @bubblePointHeight 0 0;
		border-style: solid;
		border-color: @speechBubbleBackground transparent;
		/* css3 extras */
		.skewX(@bubblePointAngle);
	}
	
	.credit {
		margin:1em 0 0;
		font:14px/1.2 Arial, sans-serif;
		
		:before {
			content:"— ";
		}
	}

	blockquote, p {
		border: 0;
		padding:0; 
		margin:0;
	}
}