/*---------------------*\
|   Pure CSS tooltips   |
\*---------------------*/



/* element
----------------------------*/

[data-tip-tl],
[data-tip-tr],
[data-tip-tm],
[data-tip-bl],
[data-tip-br],
[data-tip-bm] {
	position: relative;
	overflow: visible;
}



/* triangle
----------------------------*/

[data-tip-tl]:before,
[data-tip-tr]:before,
[data-tip-tm]:before,
[data-tip-bl]:before,
[data-tip-br]:before,
[data-tip-bm]:before {
	display: none;
	content: "";
	width: 0;
	border: solid transparent;
	position: absolute;
	z-index: 99;
}

/* top */
[data-tip-tl]:before,
[data-tip-tr]:before,
[data-tip-tm]:before {
	border-top-color: black;
	bottom: 100%;
}

[data-tip-tl]:before {
	border-width: .625em 0 0 .875em;
	right: 50%;
}

[data-tip-tr]:before {
	border-width: .625em .875em 0 0;
	left: 50%;
}

[data-tip-tm]:before {
	border-width: .625em .4375em 0;
	left: 50%;
	margin-left: -.4375em;
}

/* bottom */
[data-tip-bl]:before,
[data-tip-br]:before,
[data-tip-bm]:before {
	border-bottom-color: black;
	top: 100%;
}

[data-tip-bl]:before {
	border-width: 0 0 .625em .875em;
	right: 50%;
}

[data-tip-br]:before {
	border-width: 0 .875em .625em 0;
	left: 50%;
}

[data-tip-bm]:before {
	border-width: 0 .4375em .625em;
	left: 50%;
	margin-left: -.4375em;
}



/* rounded rectangle
----------------------------*/

[data-tip-tl]:after,
[data-tip-tr]:after,
[data-tip-tm]:after,
[data-tip-bl]:after,
[data-tip-br]:after,
[data-tip-bm]:after {
	display: none;
	
	/* type & style */
	font: normal 1em/1 sans-serif;
	white-space: nowrap;
	text-shadow: none;
	color: white;
	background: black;
	border-radius: .25em;
	
	/* position & size */
	position: absolute;
	z-index: 99;
	padding: .375em .5em;
}

[data-tip-tm]:after,
[data-tip-bm]:after {
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

/* top */
[data-tip-tl]:after,
[data-tip-tr]:after,
[data-tip-tm]:after {
	bottom: 100%;
	margin-bottom: .6em;
}

[data-tip-tl]:after {
	content: attr(data-tip-tl);
	border-bottom-right-radius: 0;
	right: 50%;
}

[data-tip-tr]:after {
	content: attr(data-tip-tr);
	border-bottom-left-radius: 0;
	left: 50%;
}

[data-tip-tm]:after {
	content: attr(data-tip-tm);
}

/* bottom */
[data-tip-bl]:after,
[data-tip-br]:after,
[data-tip-bm]:after {
	top: 100%;
	margin-top: .6em;
}

[data-tip-bl]:after {
	content: attr(data-tip-bl);
	border-top-right-radius: 0;
	right: 50%;
}

[data-tip-br]:after {
	content: attr(data-tip-br);
	border-top-left-radius: 0;
	left: 50%;
}

[data-tip-bm]:after {
	content: attr(data-tip-bm);
}



/* hover
----------------------------*/

/* triangle */
[data-tip-tl]:hover:before,
[data-tip-tr]:hover:before,
[data-tip-tm]:hover:before,
[data-tip-bl]:hover:before,
[data-tip-br]:hover:before,
[data-tip-bm]:hover:before,

/* rounded rectangle */
[data-tip-tl]:hover:after,
[data-tip-tr]:hover:after,
[data-tip-tm]:hover:after,
[data-tip-bl]:hover:after,
[data-tip-br]:hover:after,
[data-tip-bm]:hover:after {
	display: inline-block;
}