body{
	font-size: 14px;
	font-weight: bold;
	font-family: sans-serif;
	margin: 10px;
}

.typ-icon {
	display: inline-block;
	min-width: 56px;
	text-align: center;
	font-weight: bold;
	color: white;
	border-radius: 0.5em;
	box-sizing: border-box;
	background-color: black;
	border: rgba(255, 255, 255, .5) solid 2px;
}

.typ-icon[title="Normal"] {
	background-color: #bbbbaa;
}
.typ-icon[title="Kampf"] {
	background-color: #bb5544;
}
.typ-icon[title="Flug"] {
	background-color: #96caff;
}
.typ-icon[title="Gift"] {
	background-color: #9553cd;
}
.typ-icon[title="Boden"] {
	background-color: #a67439;
}
.typ-icon[title="Gestein"] {
	background-color: #bbaa66;
}
.typ-icon[title="Käfer"] {
	background-color: #92c12a;
}
.typ-icon[title="Geist"] {
	background-color: #6e4370;
}
.typ-icon[title="Stahl"] {
	background-color: #aaaabb;
}
.typ-icon[title="Feuer"] {
	background-color: #ff421c;
}
.typ-icon[title="Wasser"] {
	background-color: #2c9be3;
}
.typ-icon[title="Pflanze"] {
	background-color: #62bc5a;
}
.typ-icon[title="Elektro"] {
	background-color: #ffdc00;
	text-shadow: 0px 0px 2px #999;
}
.typ-icon[title="Psycho"] {
	background-color: #ff6380;
}
.typ-icon[title="Eis"] {
	background-color: #74cfc0;
}
.typ-icon[title="Drache"] {
	background-color: #5670be;
}
.typ-icon[title="Unlicht"] {
	background-color: #4e4545;
}
.typ-icon[title="Fee"] {
	background-color: #ec8fe6;
}

.column{
	display:inline-grid;
}

.details{
	margin-left: 20px;
	background-color: lightgrey;
	position: absolute;
	top: 40px;
}

.list-div{
	max-height: calc(100vh - 50px);
	overflow-y: auto;
}

.search-div{

height: 30px;
}

.eintrag{

height: 40px;

position: relative;

width: 450px;
}

.eintrag:hover{
	cursor: pointer;
	background-color: grey;
}

.grey{
	background-color: lightgrey;
}

.num{
	display: inline-grid;
	margin: auto;
	top: 12px;
	position: absolute;
	left: 5px;
}

.sprite{
	display: inline-grid;
	position: absolute;
	top: 0px;
	left: 40px;
}

.name{
 display: inline-grid;
 position: absolute;
 top: 12px;
 left: 90px;
}

.name2{
 display: inline-grid;
 position: absolute;
 top: 12px;
 left: 200px;
}

.type{
	display: flex;
	position: absolute;
	top: 12px;
	left: 325px;
}

.image-small{
	width: 40px;
}
.num-big{
	display: inline-grid;
	margin: auto;
	top: 32px;
	position: absolute;
	left: 5px;
}
.name-big{
 display: inline-grid;
 position: absolute;
 top: 32px;
 left: 140px;
}
.name-big2{
 display: inline-grid;
 position: absolute;
 top: 50px;
 left: 140px;
}
.image-big{
	width: 80px;
}

.sprite-big{
	display: inline-grid;
	position: absolute;
	top: 0px;
	left: 50px;
}
#search{
	width: 185px;
}

.weaknesses{

}

#bezeichnung{
	height: 80px;
}

.spanbutton{
	cursor: pointer;
	margin: 5px;
	float:left;
}

.spanbutton:hover span{
	background-color: black;
}