#tempel-menue {max-width:850px;}
	@media (min-width:  1px) and (max-width:868px) { #tempel-menue {max-width:425px;} }
	/* @media (min-width:768px) and (max-width:991px) { #main .container {width:870px;} } */
	.tempel-small {float:left; width:85px; height:85px; border:0px solid lightgrey;}	/*transition:all 0.0s linear; transition:all 0.2s ease;*/
	.tempel-small:hover {background-position:0 -85px; cursor:pointer;}
	.tempel-small.active {background-position:0 -85px;}
	.tempel-small.active:focus, .tempel-small.active:hover {transform: scale(1.2)}
/* TEMPEL */
	.tempel-small.feuer  {background-image:url(/static/tempeln/small_feuer.png);}	/* Beinhaltet 2 Grafiken (Color/SW) */
	.tempel-small.natur  {background-image:url(/static/tempeln/small_natur.png);}
	.tempel-small.erde 	 {background-image:url(/static/tempeln/small_erde.png);}
	.tempel-small.donner {background-image:url(/static/tempeln/small_donner.png);}
	.tempel-small.wasser {background-image:url(/static/tempeln/small_wasser.png);}
	.tempel-small.licht  {background-image:url(/static/tempeln/small_licht.png);}
	.tempel-small.dunkel {background-image:url(/static/tempeln/small_dunkel.png);}
	.tempel-small.magie  {background-image:url(/static/tempeln/small_magie.png);}
	.tempel-small.metall {background-image:url(/static/tempeln/small_metall.png);}
	
	#tempeltext {font-weight:700;}
	#tempeln {}
	.tempel-table {display:none; max-width:568px; margin-bottom:20px;}
/* table */
	.table-text {display:none; padding:10px 0; border:0px solid red;}
	.tempel-text-bold {display:none; height:17px; font-weight:bold; text-align:center; border:0px solid red;}
	.feuer .tempel-text-bold::before 	{content:"Feuer"}
	.natur .tempel-text-bold::before 	{content:"Natur"}
	.erde .tempel-text-bold::before 	{content:"Erde"}
	.donner .tempel-text-bold::before 	{content:"Donner"}
	.wasser .tempel-text-bold::before 	{content:"Wasser"}
	.licht .tempel-text-bold::before 	{content:"Licht"}
	.dunkel .tempel-text-bold::before 	{content:"Dunkel"}
	.magie .tempel-text-bold::before 	{content:"Magie"}
	.metall .tempel-text-bold::before 	{content:"Metall"}
	
	.table {display:none; border:2px solid darkgrey; box-shadow:8px 8px 5px lightgrey;}
	.tr {display:table-row; text-align:center;}
	.td {display:table-cell; word-break:break-word; border:1px solid lightgrey;}
	.h6 {padding-right:0px !important; font-weight:bold; text-align:center !important; background-color:#ccc; border-color:grey;}
	.sp0 {width: 71px;}
	.sp1 {width:106px;}
	.sp2 {width:118px; text-align:right; padding-right:28px;}
	.sp3 {width:119px; text-align:right; padding-right:28px;}
	.sp4 {width: 94px; text-align:right; padding-right:28px;}
	.sp5 {width: 56px;}
	.sp6 {}
	.sp7 {}
	.td[class*=sp] {height:24px; vertical-align:middle;}
	.gold 	  {background-position:95%;}
	.futter   {background-position:95%;}
	.goldstar {background-position:95%;}
	.bluestar {background-position:95%;}
	.time 	  {background-position:95%;}
/* TEMPEL */
/* gilt für alle Tabellen */
	.color .row00.sp0::before {content:"Level";}
	.color .row00.sp1::before {content:"Available";}
	.color .row00.sp2::before {content:"Price";}
	.color .row00.sp3::before {content:"XP";}
	.color .row00.sp4::before {content:"Time";}
	.color .row00.sp5::before {content:"Size";}
	.color .row00.sp6::before {content:"";}
	.color .row00.sp7::before {content:"";}

	.db .sp1::before {content:"Level ";}
	
@media (max-width:530px) {
	.goldstar, .bluestar, .time {text-align:center; background-image:none;padding-right:0;}
	.color .row00.sp0::before {content:"Lv";}
	.color .row00.sp1::before {content:"Av";}
	.color .row00.sp2::before {content:"Pr";}
	.color .row00.sp4::before {content:"T";}
	.color .row00.sp5::before {content:"S";}
	.db .sp1::before {content:"Lv ";}
	.sp2 {padding-right:24px;}
}


@media {/* beispiel zur info */
	.beispiel::before    {white-space:pre-wrap; content:"text1. \A";}
	.beispiel::after     {content:"text2.";}
}