/*
 * Speech-Bubble Tooltip by Jamy Golden
 */
 
a.sbtooltip:hover {
	position: relative; /* Allows the tooltip to be absolutely positioned */
	z-index: 100;
}

/* Speech Bubble */
a.sbtooltip:before {
	background: rgb(62, 173, 226);
	color: #fff;
	content: attr(sbtooltip); /* This takes the content of the attribute named “sbtooltip” and displays it within this element*/
	display: none; /* Hidden until hovered upon */

/* Font, padding, top and right must change depending on the font size you are using on your web page */
	font: 13px 'fjallaoneregular', sans-serif;
	padding: 5px 10px;
	position: absolute;
	top: 26px;
	right: -4px;
 
/* Border radii for different browsers */
	
	

/* Box shadows for different browsers */
	-moz-box-shadow: 0px 0px 4px #333;
	-webkit-box-shadow: 0px 0px 4px #333;
	box-shadow: 0px 0px 4px #333;
	min-width: 100px;
	text-align: center;
	border: 3px solid #3eade2;
}
 
/* Triangle */
a.sbtooltip:after {
	border-width: 12px;
	border-style: solid;
	border-color: transparent transparent rgb(62, 173, 226) transparent;
	content: ""; /* Forces this pseudo-element to appear on hover */
	display: none;
	height: 2px; /* Width and height could  be left out, but I prefer a less 'pointy' triangle */
	width: 2px;
	position: absolute;
	top: 0px;
	right: 4px;
}

/* Display on hover */
a.sbtooltip:hover:after, a.sbtooltip:hover:before {
	display: block; /* The Speech-bubble tooltip and pointer will appear on hover */
}