a.sbtooltip:hover {
	position: relative; /* Allows the tooltip to be absolutely positioned */
	z-index: 100;
}

/* Speech Bubble */
a.sbtooltip:before {
	background: #c4c4c4; /* For browsers that don't support gradients */
	background: -moz-linear-gradient( /* Firefox gradient */
		90deg,
		rgb#c4c4c4 44%,
		rgb#c5c5c5 72%
	);
	background: -webkit-gradient( /* Webkit gradient */
		linear,
		left bottom,
		left top,
		color-stop(0.44, #c4c4c4),
		color-stop(0.72, #c4c4c4)
	);
	color: #b06562;
	content: attr(data-sbtooltip); /* This takes the content of the attribute named "data-sbtooltip" and displays it within this element – We will use jQuery to take care of this to make sure that the document is still valid xHTML*/
	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: 8px 'Pixel',Calibri, Arial, Georgia, sans-serif;
	padding: 5px 10px;
	position: absolute;
	top: 15px;
	right: 0;

/* Border radii for different browsers */
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

/* Box shadows for different browsers */
	-moz-box-shadow: 0px 0px 4px #888;
	-webkit-box-shadow: 0px 0px 4px #888;
	box-shadow: 0px 0px 4px #888;
}

/* Triangle */
a.sbtooltip:after {
	border-width: 4px;
	border-style: solid;
	border-color: transparent transparent #c4c4c4 transparent;
	content: ""; /* Forces this pseudo-element to appear on hover */
	display: none;
	height: 1px; /* Width and height could  be left out, but I prefer a less 'pointy' triangle */
	width: 1px;
	position: absolute;
	top: 7px;
	right: 18px;
}

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