Balloon 1

• bottom
• top
• left
• right

/* balloon-1 bottom */
#balloon-1-bottom {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	line-height: 34px;
	color: #19283C;
	text-align: center;
	background: #F6F6F6;
	border: 3px solid #19283C;
	z-index: 0;
}
#balloon-1-bottom:before {
	content: "";
	position: absolute;
	bottom: -8px; left: 50%;
	margin-left: -9px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 0 9px;
	border-color: #F6F6F6 transparent transparent transparent;
	z-index: 0;
}
#balloon-1-bottom:after {
	content: "";
	position: absolute;
	bottom: -12px; left: 50%;
	margin-left: -10px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #19283C transparent transparent transparent;
	z-index: -1;
}
/* balloon-1 top */
#balloon-1-top {
	color: #19283C;
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	line-height: 32px;
	text-align: center;
	background: #F6F6F6;
	border: 3px solid #19283C;
	z-index: 0;
}
#balloon-1-top:before {
	content: "";
	position: absolute;
	top: -8px; left: 50%;
	margin-left: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 9px 9px 9px;
	border-color: transparent transparent #F6F6F6 transparent;
	z-index: 0;
}
#balloon-1-top:after {
	content: "";
	position: absolute;
	top: -12px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #19283C transparent;
	z-index: -1;
}
/* balloon-1 left */
#balloon-1-left {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	line-height: 34px;
	color: #19283C;
	text-align: center;
	background: #F6F6F6;
	border: 3px solid #19283C;
	z-index: 0;
}
#balloon-1-left:before {
	content: "";
	position: absolute;
	top: 50%; left: -8px;
	margin-top: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 9px 0;
	border-color: transparent #F6F6F6 transparent transparent;
	z-index: 0;
}
#balloon-1-left:after {
	content: "";
	position: absolute;
	top: 50%; left: -12px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #19283C transparent transparent;
	z-index: -1;
}
/* balloon-1 right */
#balloon-1-right {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	line-height: 34px;
	color: #19283C;
	text-align: center;
	background: #F6F6F6;
	border: 3px solid #19283C;
	z-index: 0;
}
#balloon-1-right:before {
	content: "";
	position: absolute;
	top: 50%; right: -8px;
	margin-top: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 0 9px 9px;
	border-color: transparent transparent transparent #F6F6F6;
	z-index: 0;
}
#balloon-1-right:after {
	content: "";
	position: absolute;
	top: 50%; right: -12px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #19283C;
	z-index: -1;
}
		

Balloon 2

• bottom
• top
• left
• right

/* balloon-2 bottom */
#balloon-2-bottom {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	color: #F6F6F6;
	line-height: 40px;
	text-align: center;
	background: #19283C;
	z-index: 0;
}
#balloon-2-bottom:after {
	content: "";
	position: absolute;
	bottom: -10px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #19283C transparent transparent transparent;
}
/* balloon-2 top */
#balloon-2-top {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	color: #F6F6F6;
	line-height: 40px;
	text-align: center;
	background: #19283C;
	z-index: 0;
}
#balloon-2-top:after {
	content: "";
	position: absolute;
	top: -10px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #19283C transparent;
}
/* balloon-2 left */
#balloon-2-left {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	color: #F6F6F6;
	line-height: 40px;
	text-align: center;
	background: #19283C;
	z-index: 0;
}
#balloon-2-left:after {
	content: "";
	position: absolute;
	top: 50%; left: -10px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #19283C transparent transparent;
}
/* balloon-2 right */
#balloon-2-right {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	color: #F6F6F6;
	line-height: 40px;
	text-align: center;
	background: #19283C;
	z-index: 0;
}
#balloon-2-right:after {
	content: "";
	position: absolute;
	top: 50%; right: -10px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #19283C;
}

Balloon 3

• bottom-left
• bottom-right
• top-left
• top-right

/* balloon-3 bottom-left */
#balloon-3-bottom-left {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	color: #F6F6F6;
	line-height: 40px;
	text-align: center;
	background: #19283C;
	z-index: 0;
}
#balloon-3-bottom-left:after {
	content: "";
	position: absolute;
	bottom: -15px; left: 0;
	margin-left: 0;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 20px 15px 0;
	border-color: transparent #19283C transparent transparent;
	z-index: -1;
}
/* balloon-3 bottom-right */
#balloon-3-bottom-right {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	color: #F6F6F6;
	line-height: 40px;
	text-align: center;
	background: #19283C;
	z-index: 0;
}
#balloon-3-bottom-right:after {
	content: "";
	position: absolute;
	bottom: -15px; right: 0;
	margin-left: 0;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 15px 20px 0 0;
	border-color: #19283C transparent transparent transparent;
	z-index: -1;
}
/* balloon-3 top-left */
#balloon-3-top-left {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	color: #F6F6F6;
	line-height: 40px;
	text-align: center;
	background: #19283C;
	z-index: 0;
}
#balloon-3-top-left:after {
	content: "";
	position: absolute;
	top: -15px; left: 0;
	margin-left: 0;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 0 15px 20px;
	border-color: transparent transparent #19283C transparent;
	z-index: -1;
}
/* balloon-3 top-right */
#balloon-3-top-right {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	color: #F6F6F6;
	line-height: 40px;
	text-align: center;
	background: #19283C;
	z-index: 0;
}
#balloon-3-top-right:after {
	content: "";
	position: absolute;
	top: -15px; right: 0;
	margin-left: 0;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 15px 0 0 20px;
	border-color: transparent transparent transparent #19283C;
	z-index: -1;
}
		

Balloon 4

• bottom-left
• bottom-right
• top-left
• top-right

/* balloon-4 bottom-left */
#balloon-4-bottom-left {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 70px;
	color: #F6F6F6;
	line-height: 70px;
	text-align: center;
	background: #19283C;
	border-radius: 60%;
}
#balloon-4-bottom-left:before {
	content: "";
	position: absolute;
	bottom: -10px; left: 20px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #19283C;
	border-radius: 0 30px 0 30px;
	z-index: -1;
}
#balloon-4-bottom-left:after {
	content: "";
	position: absolute;
	bottom: -5px; left: 30px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #FFF;
	border-radius: 0 30px 0 30px;
	z-index: -1;
	-webkit-transform: rotate(30deg);
	   -moz-transform: rotate(30deg);
	    -ms-transform: rotate(30deg);
	     -o-transform: rotate(30deg);
	        transform: rotate(30deg);
}
/* balloon-4 bottom-right */
#balloon-4-bottom-right {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 70px;
	color: #F6F6F6;
	line-height: 70px;
	text-align: center;
	background: #19283C;
	border-radius: 60%;
}
#balloon-4-bottom-right:before {
	content: "";
	position: absolute;
	bottom: -10px; right: 20px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #19283C;
	border-radius: 30px 0 30px 0;
	z-index: -1;
}
#balloon-4-bottom-right:after {
	content: "";
	position: absolute;
	bottom: -5px; right: 30px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #FFF;
	border-radius: 30px 0 30px 0;
	z-index: -1;
	-webkit-transform: rotate(-30deg);
	   -moz-transform: rotate(-30deg);
	    -ms-transform: rotate(-30deg);
	     -o-transform: rotate(-30deg);
	        transform: rotate(-30deg);
}
/* balloon-4 top-left */
#balloon-4-top-left {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 70px;
	color: #F6F6F6;
	line-height: 70px;
	text-align: center;
	background: #19283C;
	border-radius: 60%;
}
#balloon-4-top-left:before {
	content: "";
	position: absolute;
	top: -10px; left: 20px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #19283C;
	border-radius: 30px 0 30px 0;
	z-index: -1;
}
#balloon-4-top-left:after {
	content: "";
	position: absolute;
	top: -5px; left: 30px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #FFF;
	border-radius: 30px 0 30px 0;
	z-index: -1;
	-webkit-transform: rotate(-30deg);
	   -moz-transform: rotate(-30deg);
	    -ms-transform: rotate(-30deg);
	     -o-transform: rotate(-30deg);
	        transform: rotate(-30deg);
}
/* balloon-4 top-right */
#balloon-4-top-right {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 70px;
	color: #F6F6F6;
	line-height: 70px;
	text-align: center;
	background: #19283C;
	border-radius: 60%;
}
#balloon-4-top-right:before {
	content: "";
	position: absolute;
	top: -10px; right: 20px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #19283C;
	border-radius: 0 30px 0 30px;
	z-index: -1;
}
#balloon-4-top-right:after {
	content: "";
	position: absolute;
	top: -5px; right: 30px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #FFF;
	border-radius: 0 30px 0 30px;
	z-index: -1;
	-webkit-transform: rotate(30deg);
	   -moz-transform: rotate(30deg);
	    -ms-transform: rotate(30deg);
	     -o-transform: rotate(30deg);
	        transform: rotate(30deg);
}
		

Balloon 5

• bottom-left
• bottom-right
• top-left
• top-right

/* balloon-5 bottom-left */
#balloon-5-bottom-left {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 50px;
	color: #F6F6F6;
	line-height: 50px;
	text-align: center;
	background: #19283C;
	border-radius: 60px;
	z-index: 0;
}
#balloon-5-bottom-left:before {
	content: "";
	position: absolute;
	bottom: -17px; left: 15px;
	margin-left: 0;
	display: block;
	width: 15px;
	height: 15px;
	background: #19283C;
	border-radius: 50%;
	z-index: 0;
}
#balloon-5-bottom-left:after {
	content: "";
	position: absolute;
	bottom: -25px; left: 25px;
	margin-left: 0;
	display: block;
	width: 8px;
	height: 8px;
	background: #19283C;
	border-radius: 50%;
	z-index: 0;
}
/* balloon-4 bottom-right */
#balloon-5-bottom-right {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 50px;
	color: #F6F6F6;
	line-height: 50px;
	text-align: center;
	background: #19283C;
	border-radius: 50px;
}
#balloon-5-bottom-right:before {
	content: "";
	position: absolute;
	bottom: -17px; right: 15px;
	margin-right: 0;
	display: block;
	width: 15px;
	height: 15px;
	background: #19283C;
	border-radius: 50%;
	z-index: 0;
}
#balloon-5-bottom-right:after {
	content: "";
	position: absolute;
	bottom: -25px; right: 25px;
	margin-right: 0;
	display: block;
	width: 8px;
	height: 8px;
	background: #19283C;
	border-radius: 50%;
	z-index: 0;
}
/* balloon-4 top-left */
#balloon-5-top-left {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 50px;
	color: #F6F6F6;
	line-height: 50px;
	text-align: center;
	background: #19283C;
	border-radius: 50px;
	z-index: 0;
}
#balloon-5-top-left:before {
	content: "";
	position: absolute;
	top: -17px; left: 15px;
	margin-right: 0;
	display: block;
	width: 15px;
	height: 15px;
	background: #19283C;
	border-radius: 50%;
	z-index: -1;
}
#balloon-5-top-left:after {
	content: "";
	position: absolute;
	top: -25px; left: 25px;
	margin-right: 0;
	display: block;
	width: 8px;
	height: 8px;
	background: #19283C;
	border-radius: 50%;
	z-index: -1;
}
/* balloon-4 top-right */
#balloon-5-top-right {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 50px;
	color: #F6F6F6;
	line-height: 50px;
	text-align: center;
	background: #19283C;
	border-radius: 50px;
	z-index: 0;
}
#balloon-5-top-right:before {
	content: "";
	position: absolute;
	top: -17px; right: 15px;
	margin-right: 0;
	display: block;
	width: 15px;
	height: 15px;
	background: #19283C;
	border-radius: 50%;
	z-index: -1;
}
#balloon-5-top-right:after {
	content: "";
	position: absolute;
	top: -25px; right: 25px;
	margin-right: 0;
	display: block;
	width: 8px;
	height: 8px;
	background: #19283C;
	border-radius: 50%;
	z-index: -1;
}