canvas { cursor: crosshair; }

/* Bubbles */
.wp_bubble { 
	position: absolute; 
	width: 200px; 
	height: 50px;
	padding: 10px; 
	color:#000; 
	margin:1em 0 3em;
	border-radius:10px;   
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	box-shadow: 2px 2px 2px 1px rgba(10,10,10,0.5);
}

.wp_bubble.s1:after { left:150px; bottom:-15px; border-width:15px 15px 0; }
.wp_bubble.s2:after { left:100px; bottom:-15px; border-width:15px 15px 0; }
.wp_bubble.s3:after { left:50px; bottom:-15px; border-width:15px 15px 0; }
.wp_bubble.s4 { margin-right:30px; }
.wp_bubble.s4:after { top:16px; right:-30px; bottom:auto; left:auto; border-width:10px 0 10px 30px; }
.wp_bubble.s5:after { left:100px; top:-15px; border-width: 0 15px 15px; }
.wp_bubble.s6 { margin-left:50px; }
.wp_bubble.s6:after { top:16px; left:-30px; bottom:auto; border-width:10px 30px 10px 0; }
.wp_bubble.s7:after { left:150px; top:-15px; border-width: 0 15px 15px; }
.wp_bubble.s8:after { left:100px; top:-15px; border-width: 0 15px 15px; }
.wp_bubble.s9:after { left:50px; top:-15px; border-width: 0 15px 15px; }

/* YELLOW */
.wp_bubble.yellow { 
	font-family: Arial;
	font-size: 12pt;
	color:#000;
	background:#f3961c; 
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
	background:-moz-linear-gradient(#f9d835, #f3961c);
	background:-o-linear-gradient(#f9d835, #f3961c);
	background:linear-gradient(#f9d835, #f3961c);
	box-shadow: 2px 2px 2px 1px rgba(10,10,10,0.5);
}

.wp_bubble.yellow:after { 
	content:"";
	position:absolute;
	border-style:solid;
	border-color:#f3961c transparent;
	display:block;
	width:0;
}

.wp_bubble.yellow.s4 { background:#f3961c; }
.wp_bubble.yellow.s4:after { border-color:transparent #f3961c; }
.wp_bubble.yellow.s5:after { border-color: #f9d835 transparent; }
.wp_bubble.yellow.s6 { background:#f3961c; }
.wp_bubble.yellow.s6:after { border-color:transparent #f3961c; }
.wp_bubble.yellow.s7:after { border-color: #f9d835 transparent; ; }
.wp_bubble.yellow.s8:after { border-color: #f9d835 transparent; ; }
.wp_bubble.yellow.s9:after { border-color: #f9d835 transparent;  }


/* BLUE */
.wp_bubble.blue { 
	font-family: Arial;
	font-size: 12pt;
	color:#fff;
	background:#f3961c; 
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
	background:-moz-linear-gradient(#2e88c4, #075698);
	background:-o-linear-gradient(#2e88c4, #075698);
	background:linear-gradient(#2e88c4, #075698);
}

.wp_bubble.blue:after { 
	content:"";
	position:absolute;
	border-style:solid;
	border-color:#075698 transparent;
	display:block;
	width:0;
}

.wp_bubble.blue.s4 { background:#075698; }
.wp_bubble.blue.s4:after { border-color:transparent #075698; }
.wp_bubble.blue.s5:after { border-color: #2e88c4 transparent; }
.wp_bubble.blue.s6 { background:#075698; }
.wp_bubble.blue.s6:after { border-color:transparent #075698; }
.wp_bubble.blue.s7:after { border-color: #2e88c4 transparent; ; }
.wp_bubble.blue.s8:after { border-color: #2e88c4 transparent; ; }
.wp_bubble.blue.s9:after { border-color: #2e88c4 transparent;  }

/* RED */
.wp_bubble.red { 
	font-family: Arial;
	font-size: 12pt;
	color:#fff;
	background:#f3961c; 
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f91f1f), to(#a21d1d));
	background:-moz-linear-gradient(#f91f1f, #a21d1d);
	background:-o-linear-gradient(#f91f1f, #a21d1d);
	background:linear-gradient(#f91f1f, #a21d1d);
}

.wp_bubble.red:after { 
	content:"";
	position:absolute;
	border-style:solid;
	border-color:#a21d1d transparent;
	display:block;
	width:0;
}

.wp_bubble.red.s4 { background:#a21d1d; }
.wp_bubble.red.s4:after { border-color:transparent #a21d1d; }
.wp_bubble.red.s5:after { border-color: #f91f1f transparent; }
.wp_bubble.red.s6 { background:#a21d1d; }
.wp_bubble.red.s6:after { border-color:transparent #a21d1d; }
.wp_bubble.red.s7:after { border-color: #f91f1f transparent; ; }
.wp_bubble.red.s8:after { border-color: #f91f1f transparent; ; }
.wp_bubble.red.s9:after { border-color: #f91f1f transparent;  }

/* GRAY */
.wp_bubble.gray { 
	font-family: Arial;
	font-size: 12pt;
	color:#000;
	background:#f3961c; 
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#dcdcdc), to(#808080));
	background:-moz-linear-gradient(#dcdcdc, #808080);
	background:-o-linear-gradient(#dcdcdc, #808080);
	background:linear-gradient(#dcdcdc, #808080);
}

.wp_bubble.gray:after { 
	content:"";
	position:absolute;
	border-style:solid;
	border-color:#808080 transparent;
	display:block;
	width:0;
}

.wp_bubble.gray.s4 { background:#808080; }
.wp_bubble.gray.s4:after { border-color:transparent #808080; }
.wp_bubble.gray.s5:after { border-color: #dcdcdc transparent; }
.wp_bubble.gray.s6 { background:#808080; }
.wp_bubble.gray.s6:after { border-color:transparent #808080; }
.wp_bubble.gray.s7:after { border-color: #dcdcdc transparent; ; }
.wp_bubble.gray.s8:after { border-color: #dcdcdc transparent; ; }
.wp_bubble.gray.s9:after { border-color: #dcdcdc transparent;  }