body {
		background: rgb(255,255,255);
		color: rgb(0,0,0);
		font-family: Arial, serif;
		padding: 0;
		margin: 0;
		overflow: hidden;
		}

		/*
		Es gibt ein Problem mit dem Text außerhalb des Spiel-Canvas: Sobald im Canvas geklickt wird, besteht die Chance, dass der Text außerhalb selektiert wird.
		Das schadet nichts, aber es sieht blöd aus.
		Deshalb binden wir hier eine neue Klasse ein, die unser DIV #umschalten dann zusätzlich erhält.
		Diese neue Klasse .deselect wird dahingehend angelegt, dass markierter Text keine neue Färbung und einen transparenten Hintergrund erhält - ergo für uns unsichtbar markiert wird.
		Der Trick stammt von http://frontend.pro/css/textmarkierung-deaktivieren.
		*/
		
		.deselect ::selection {
		background: transparent;
		color: inherit;
		}
		
		.deselect ::-moz-selection {
		background: transparent;
		color: inherit;
		}

		.deselect {
		-ms-user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		}

		canvas {	
		background-color: white;
		background-image: url(../images/items/loading.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 160px 160px;
		margin: 0 auto;
		border: 0;
		z-index: 0; /* Der Canvas liegt quasi "ganz unten", damit alle anderen Elemente ggf. "darüber" positioniert werden können - hilfreich für ein per HTML und CSS gestaltetes Inventory und andere Elemente */
		}
				
		#inventory {
		display: block;
		width: auto;
		height: auto;
		background-color: transparent;
		position: fixed;
		left: 120px;
		right: 120px;
		top: 16px;
		z-index: 1;
		text-align: center;
		margin: 0;
		padding: 0;
		}
		
		.inventoryItem {
		height: 64px;
		width: auto;
		}
		
		#inventory div {
		display: inline-block;
		width: 32px;
		height: 32px;
		margin: 0 32px;
		vertical-align: middle;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		}
		
		#inventory div:first-of-type {
		height: 64px;
		width: 64px;
		border: 0;
		margin: 0 32px 0 0;
		}
		
		#inventory div:last-of-type {
		margin: 0 0 0 32px;
		}

		#inventory div button {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		background-color: #fff;
		width: 100%;
		height: 100%;
		border: 1px solid black;
		border-radius: 2px;
		outline: none;
		box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
		margin: 0;
		padding: 0;
		}
		
		#inventory div button:hover {
		cursor: pointer;
		background-color: rgb(255,150,0);
		}
		
		#showHelp,#showAusweis,#showJacke,#showTasche,#showTascheBuecher,#showFlyer,#showGeld,#showMuenzen,#showListe,#showBuch1,#showBuch2,#showBuch3,#showKarteEG,#showKarteUG1,#showTeleporterZettel,#showTeleporterBuch1,#showTeleporterBuch2,#showWerkzeug,#showGummimaus,#showSchirm,#showPlutonium,#showPaste,#showGarderobe,#showAggregat,#showEnergie {
		display: none;
		}
		
		#showHelp,#showAusweis,#showJacke,#showTasche,#showTascheBuecher,#showFlyer,#showGeld,#showMuenzen,#showListe,#showBuch1,#showBuch2,#showBuch3,#showKarteEG,#showKarteUG1,#showTeleporterZettel,#showTeleporterBuch1,#showTeleporterBuch2,#showWerkzeug,#showGummimaus,#showSchirm,#showPlutonium,#showPaste,#showGarderobe,#showAggregat,#showEnergie h1,h2,h3,h4,h5,h6 {
		margin-top: 48px;
		}
		
		#clock {
		background-image: url(../images/messages/uhr/00.png);
		}
		
		#showHelp {
		background-image: url(../images/inventory/help_big.png);
		}

		#showAusweis {
		background-image: url(../images/inventory/ausweis_big.png);
		}

		#showJacke {
		background-image: url(../images/inventory/jacke_big.png);
		}

		#showTasche {
		background-image: url(../images/inventory/tasche_big.png);
		}
		
		#showFlyer {
		background-image: url(../images/inventory/flyer_big.png);
		}	

		#showGeld {
		background-image: url(../images/inventory/geld_big.png);
		}
		
		#showMuenzen {
		background-image: url(../images/inventory/kleingeld_big.png);
		}		

		#showListe {
		background-image: url(../images/inventory/liste_big.png);
		}
		
		#showBuch1 {
		background-image: url(../images/inventory/buch01_big.png);
		}		

		#showBuch2 {
		background-image: url(../images/inventory/buch02_big.png);
		}

		#showBuch3 {
		background-image: url(../images/inventory/buch03_big.png);
		}
		
		#showKarteUG1 {
		background-image: url(../images/inventory/karteUG1_big.png);
		}
	
		#showKarteEG {
		background-image: url(../images/inventory/karteEG_big.png);
		}	
		
		#showTeleporterBuch1 {
		background-image: url(../images/inventory/teleporterBuch1_big.png);
		}

		#showTeleporterBuch2 {
		background-image: url(../images/inventory/teleporterBuch2_big.png);
		}
		
		#showTeleporterZettel {
		background-image: url(../images/inventory/teleporterZettel_big.png);
		}
		
		#showWerkzeug {			
		background-image: url(../images/inventory/null.png);
		}
		
		#showGummimaus {			
		background-image: url(../images/inventory/null.png);
		}
		
		#showSchirm {
		background-image: url(../images/inventory/abschirmung_big.png);
		}
		
		#showPlutonium {
		background-image: url(../images/inventory/null.png);
		}

		#showGarderobe {
		background-image: url(../images/inventory/null.png);
		}

		#showAggregat {
		background-image: url(../images/inventory/aggregat_big.png);
		}

		#showEnergie {
		background-image: url(../images/inventory/energieversorgung_big.png);
		}
		
		#showPaste {
		background-image: url(../images/inventory/null.png);
		}
		
		.closeInventory {
		opacity: 0.35;
		width: 32px;
		height: 32px;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url(../images/messages/closeHelp.png);
		background-size: contain;
		background-color: transparent;
		border: none;
		outline: none;
		margin: 0;
		padding: auto;
		position: fixed;
		top: 30px;
		right: 80px;	
		color: #fff;
		}

		.closeInventory:hover {
		cursor: pointer;
		opacity: 1;
		}
		
		
		#help,#ausweis,#jacke,#tasche,#flyer,#geld,#muenzen,#liste,#buch1,#buch2,#buch3,#teleporterBuch1,#teleporterBuch2,#teleporterZettel,#tascheBuecher,#karteUG1,#karteEG,#werkzeug,#gummimaus,#schirm,#plutonium,#paste,#garderobe,#aggregat,#energie {
		background-color: white;
		color: black;
		display: none;
		margin: 0;
		padding: 0.5em 1em;
		font-size: medium;
		overflow: auto;
		z-index: 2;
		position: fixed;
		top: 10px;
		right: 20px;
		bottom: 10px;
		left: 20px;
		border: 5px solid rgb(55,55,55);		
		box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
		}

		#help ol {
		display: block;
		padding: 0;
		margin: 0 0 0 1em;
		line-height: 1.5em;
		}
		
		#help ol li {
		padding-bottom: 0.5em;
		}
		
		#help ul {
		display: block;
		padding: 0;
		margin: 0 0 0 1em;	
		list-style: none;
		line-height: 1.5em;
		}
		
		#help ul li {
		padding-bottom: 0.5em;
		}
		
		#help ul li img {
		margin-right: 1em;
		vertical-align: text-top;
		float: left; 
		height: 40px;
		width: auto;
		}
		
		.wichtig {
		font-style: italic;
		font-size: medium;
		font-weight: bold;
		}
		
		#ulbgameUnavailable {
		z-index: 999;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: white;
		color: black;
		padding: 0.5em;
		text-align: center;
		font-size: medium;
		}
	
		#zoomBar {
		vertical-align: middle;
		font-size: small;
		display:block;
		width: auto;
		height: 36px;
		z-index: 1;
		padding: 2px;
		text-align: center;
		margin: 0 auto;
		position: fixed;
		bottom: 16px;
		left: 120px;
		right: 120px;
		background-color: rgba(255,255,255,0.5);
		/* border-top: 1px solid black;
		border-right: 1px solid black;
		border-bottom: 0;
		border-left: 1px solid black; */
		border: 1px solid black;
		}
		
@media screen and (max-width: 640px) {
		canvas {	
		background-size: 100px 100px !important;
		}
		#inventory {
		left: 0 !important;
		right: 48px !important; /* um bei Textmeldungen das Gesicht des Sprechers nicht zu verdecken */
		top: 0 !important;
		}	
		#zoomBar {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;	
		border-top: 1px solid black !important;
		background-color: #fff !important;
		border-right: none !important;
		border-bottom: none !important;		
		border-left: none !important;
		font-size: xx-small !important;
		height: 20px !important;
		}		
		#zoomBar input {
		height: 100% !important;
		}		
		#inventory div {
		width: 24px !important;
		height: 24px !important;
		margin: 0 2px !important;
		}		
		#inventory div:first-of-type {
		width: 32px !important;
		height: 32px !important;
		margin: 0 !important;
		}	
		#inventory div:last-of-type {
		margin: 0 !important;
		}	
		#inventory div button {
		background-color: transparent !important;
		border: none !important;
		box-shadow: none !important;
		}		
		/* Hintergrundbilder für Inventory-Items auf kleinen Displays */
		#showHelp {
		background-image: url(../images/inventory/item_help.png) !important;
		}
		#showAusweis {
		background-image: url(../images/inventory/item_ausweis.png) !important;
		}
		#showJacke {
		background-image: url(../images/inventory/item_jacke.png) !important;
		}
		#showTasche {
		background-image: url(../images/inventory/item_tasche.png) !important;
		}
		#showFlyer {
		background-image: url(../images/inventory/item_flyer.png) !important;
		}
		#showGeld {
		background-image: url(../images/inventory/item_geld.png) !important;
		}
		#showMuenzen {
		background-image: url(../images/inventory/item_kleingeld.png) !important;
		}		
		#showListe {
		background-image: url(../images/inventory/item_liste.png) !important;
		}
		#showBuch1 {
		background-image: url(../images/inventory/item_buch01.png) !important;
		}		
		#showBuch2 {
		background-image: url(../images/inventory/item_buch02.png) !important;
		}
		#showBuch3 {
		background-image: url(../images/inventory/item_buch03.png) !important;
		}	
		#showKarteUG1 {
		background-image: url(../images/inventory/item_karteUG1.png) !important;
		}
		#showKarteEG {
		background-image: url(../images/inventory/item_karteEG.png) !important;
		}			
		#showTeleporterBuch1 {
		background-image: url(../images/inventory/item_teleporterBuch1.png) !important;
		}
		#showTeleporterBuch2 {
		background-image: url(../images/inventory/item_teleporterBuch2.png) !important;
		}		
		#showTeleporterZettel {
		background-image: url(../images/inventory/item_teleporterZettel.png) !important;
		}		
		#showSchirm {
		background-image: url(../images/inventory/item_abschirmung.png) !important;
		}		
		#showAggregat {
		background-image: url(../images/inventory/item_aggregat.png) !important;
		}
		#showEnergie {
		background-image: url(../images/inventory/item_energieversorgung.png) !important;
		}		
		#showPaste {
		background-image: url(../images/inventory/null.png) !important;
		}	
		#showWerkzeug {			
		background-image: url(../images/inventory/null.png) !important;
		}		
		#showGummimaus {			
		background-image: url(../images/inventory/null.png) !important;
		}	
		#showPlutonium {
		background-image: url(../images/inventory/null.png) !important;
		}
		#showGarderobe {
		background-image: url(../images/inventory/null.png) !important;
		}
		.closeInventory {
		background-image: url(../images/inventory/closeHelp.png) Qimportant;
		}		
}
		
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1280px),
					screen and (min-resolution: 192dpi) and (max-width: 1280px),
					screen and (min-resolution: 2dppx) (and max-width: 1280px) {
		
		#inventory {
		left: 0 !important;
		right: 48px !important; /* um bei Textmeldungen das Gesicht des Sprechers nicht zu verdecken */
		top: 0 !important;
		}

		#zoomBar {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;	
		border-top: 1px solid black !important;
		border-right: none !important;
		border-bottom: none !important;		
		border-left: none !important;
		}
		
		#inventory div {
		width: 24px !important;
		height: 24px !important;
		margin: 0 2px !important;
		}		
		#inventory div:first-of-type {
		width: 32px !important;
		height: 32px !important;
		margin: 0 !important;
		}
		#inventory div:last-of-type {
		margin: 0 !important;
		}
}

@media screen and (	-webkit-min-device-pixel-ratio: 2) and (min-width: 1280px), 
					screen and (min-resolution: 192dpi) and (min-width: 1280px),
					screen and (min-resolution: 2dppx) and (min-width: 1280px) {
		
		#inventory {
		left: 0 !important;
		right: 128px !important; /* um bei Textmeldungen das Gesicht des Sprechers nicht zu verdecken */
		top: 0 !important;
		}

		#zoomBar {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;	
		border-top: 1px solid black !important;
		border-right: none !important;
		border-bottom: none !important;		
		border-left: none !important;
		}
		
		#inventory div {
		width: 48px !important;
		height: 48px !important;
		margin: 0 8px !important;
		}		
		#inventory div:first-of-type {
		width: 64px !important;
		height: 64px !important;
		margin: 0 8px 0 0 !important;
		}
		#inventory div:last-of-type {
		margin: 0 0 0 8px !important;
		}
}