/*====================================================
CSS Tooltips by Adam Whitcroft
https://github.com/AdamWhitcroft/CSS.Tooltips
====================================================*/
/*==================================================*/

/*  $Tooltips                                       */

/*==================================================*/

[data-tip] {
	cursor: help;
	position: relative;
}

[data-tip]:before {
	border: 5px solid #1a1a1a;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	/* 4 border technique to create the arrow */
	border-top-color: #1a1a1a;
	content: '';
	/* hides the tooltip when not hovered */
	display: none;
	font-size: 0;
	height: 0;
	left: 10px;
	line-height: 0;
	position: absolute;
	top: -7px;
	width: 0;
	z-index: 8;
}

[data-tip]:after {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background: #1a1a1a;
	border-radius: 3px;
	color: #fff;
	content: attr(data-tip);
	display: none;
	font-size: 1em;
	height: 18px;
	left: 0px;
	line-height: 18px;
	padding: 5px 8px;
	position: absolute;
	top: -35px;
	white-space: nowrap;
	word-wrap: normal;
	z-index: 9;
}

[data-tip]:hover:before,
[data-tip]:hover:after { display: block; }
/*==================================================*/
/*  $Coloured Tooltips                              */
/*==================================================*/
/* Help tooltip */

.help { color: #00b7d8; }

.help[data-tip]:before {
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: #00b7d8;
}

.help[data-tip]:after {
	background: #00b7d8;
	color: #fff;
}
/* Success tooltip */

.success { color: #51bd6a; }

.success[data-tip]:before {
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: #51bd6a;
}

.success[data-tip]:after {
	background: #51bd6a;
	color: #fff;
}
/* Alert tooltip */

.alert { color: blue ; }

.alert[data-tip]:before {
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: #f9ca64;
}

.alert[data-tip]:after {
	background: #f9ca64;
	color: #574d36;
}
/* Error tooltip */

.error { color: #e1473e; }

.error[data-tip]:before {
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: #e1473e;
}

.error[data-tip]:after {
	background: #e1473e;
	color: #fff;
}
/*==================================================*/
/*  $Gravity                                        */
/*==================================================*/

.tip-below[data-tip]:after {
	left: 0px;
	top: 23px;
}

.tip-below[data-tip]:before {
	border-bottom-color: #1a1a1a;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	left: 10px;
	top: 13px;
}

.tip-below.help[data-tip]:before {
	border-bottom-color: #00b7d8;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
}

.tip-below.success[data-tip]:before {
	border-bottom-color: #51bd6a;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
}

.tip-below.alert[data-tip]:before {
	border-bottom-color: #f9ca64;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
}

.tip-below.error[data-tip]:before {
	border-bottom-color: #e1473e;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
}