#tooltip > div,#tooltip > div > .header{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
null{
	-webkit-box-flex: 1;
	flex: 1;
}
#tooltip > div{
	-webkit-box-orient: vertical;
	-webkit-flex-flow: column;
	-moz-flex-flow: column;
	-ms-flex-flow: column;
	flex-flow: column;
	flex-direction: column;
}
#tooltip > div > .header{
	-webkit-box-orient: horizontal;
	-webkit-flex-flow: row;
	-moz-flex-flow: row;
	-ms-flex-flow: row;
	flex-flow: row;
	flex-direction: row;
}

#tooltip{
	position: absolute;
	padding: 10px;
	border-radius: 5px;
	display: block;
	background: rgba(20,20,20,0.95);
	max-width: 300px;
	border: 2px solid rgb(200,200,200);
	z-index: 2;
}
#tooltip.invisible{
	display: none;
}

#tooltip > div{
	max-width: 300px;
}
#tooltip > div > *{
	padding: 4px;
}
#tooltip > div > .header > div.img{
	width: 32px;
	min-width: 32px;
	max-width: 32px;
}
#tooltip > div > .header > div.descriptionWrapper{
	padding-left: 10px;
	text-align: left;
}
#tooltip > .wrapper > .header > .descriptionWrapper > .name{
	font: 15px Arial;
	font: bold 18px Ropa sans;
	text-align: left;
}
#tooltip > div > .header > div.descriptionWrapper > div:nth-child(2){
	color: #CC9933;
	text-align: left;
}
#tooltip > div > .header > div.descriptionWrapper > div:nth-child(2):before{
	content: "Cost: ";
}
#tooltip > div > section > div{
	font: 14px Tahoma;
	text-align: left;
	color: #A1E55D;
}
#tooltip > div > .footer > div{
	text-align: left;
	font: 12px Tahoma;
	padding: 4px;
	padding-bottom: 8px;
}
#tooltip > div > .footer > div.Active:before{
	content: "Activate: ";
	font: bold 14px Tahoma;
	color: rgb(220,220,220);
}
#tooltip > div > .footer > div.Active{
	color: #D9C98B;
}
#tooltip > div > .footer > div.Passive{
	color: #8BB4D9;
}
#tooltip > div > .footer > div.Passive:before{
	content: "Passive: ";
	font: bold 14px Tahoma;
	color: rgb(220,220,220);
}
#tooltip > div > div{
	font: 10px Tahoma;
	text-align: left;
	color: rgb(100,100,200);
}