/* Tooltip */

/* Container */
.ttip {
	position: relative;
	display: inline-block;
}

/* Text ELO-Info */
.ttip-eloinfo {
	z-index: 1;
	position: absolute;
	visibility: hidden;
	width: 200px;
	top: -5px;
	right: 110%;
	padding: 4px 0;
	margin-left: 30px;
	color: midnightblue;
	background-color: ghostwhite;
	text-align: center;
	font-family: "Courier New",monospace;
	font-size: 10px;
	font-weight: bold;
	font-style: normal;
	border: 1px outset midnightblue;
	border-radius: 6px;
	opacity: 0;
	transition: opacity 1s;
}
/* Text Dateigröße */
.ttip-size {
	z-index: 1;
	position: absolute;
	visibility: hidden;
	width: 130px;
	top: -5px;
	right: 110%;
	padding: 4px 0;
	margin-left: 30px;
	color: midnightblue;
	background-color: ghostwhite;
	text-align: center;
	font-family: arial,sans-serif;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	border: 1px outset midnightblue;
	border-radius: 3px;
	opacity: 0;
	transition: opacity 0.3s;
}

/* Show bei Mouse over oder Touchscreen */
.ttip:hover .ttip-eloinfo, 
.ttip:hover .ttip-size,
.ttip:active .ttip-eloinfo,	/* Für Touch-Geräte */
.ttip:active .ttip-size,
.ttip:focus .ttip-eloinfo,
.ttip:focus .ttip-size {
	visibility: visible;
	opacity: 1;
}