.has-heroes-tooltip {
	
}

.has-heroes-tooltip:hover .heroes-tooltip {
	display: block !important;
}

.heroes-tooltip {
	display: none;

    pointer-events: none;
    position: absolute;

	left: 0;
	max-width: 300px;
	padding: 5px 20px 11px 1px;

	border: 1px solid rgba(48, 60, 100, 1);

	font: 13px/18px Arial, sans-serif;
	text-decoration: none;

	background: 
		#07080b 
		url(http://heroes.ingame.de/inheroes/images/sidebar_widget_body_ornament_2.jpg)
		right top
		no-repeat;
	color: #72839f;

	opacity: 0;
	transition: opacity 400ms;
	box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
}

.heroes-tooltip--is-visible {
	display: block;
	opacity: 1;
}

.heroes-tooltip--is-hidden {
	display: none;
}

.heroes-tooltip__icon {
	float: left;
	margin-top: 3px;
}

.heroes-tooltip--hero .heroes-tooltip__icon {
	margin: 2px 5px;
}

.heroes-tooltip__textwrapper {
	float: left;
	margin-left: 10px;
	max-width: 200px;
}

.heroes-tooltip__textwrapper > span,
.heroes-tooltip__textwrapper > strong {
	display: block;
}

.heroes-tooltip__title {
	margin-top: 5px;
	font-size: 15px;
	text-shadow: 0 0 6px rgba(82, 82, 255, 0.75);
	color: #fff;
}

.heroes-tooltip__subtitle {
	margin-bottom: 5px;
	text-shadow: 0 0 6px rgba(82, 82, 255, 0.75);
	color: #b7bfcb;
}



.heroes-tooltip__attribute--hp {
	color: rgb(200,255,0);
}

.heroes-tooltip__attribute--energy {
	color: rgb(100,150,255);
}

.heroes-tooltip__attribute--damage {
	color: rgb(230,25,45);
}