body,html,table
	{
		margin:0;
		padding:0;

		color:#fff;
		background-color:#000;
		font-family: Retro;
		font-size:5.5px;
		-webkit-font-smoothing: subpixel-antialiased; 
		touch-action: none;
		user-select: none;
		-webkit-user-select: none;
		-webkit-touch-callout: none;

	}
	body
	{
		image-rendering:pixelated;
	}
	body.blurtastic {
		image-rendering:initial;
	}
	*
	{
		touch-action: none;
		user-select: none;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
	}
	a, a:visited
	{
		color: #b0b0b0;
		font-size: 9pt;
		text-decoration: none;
	}
	a:hover
	{
		color: #fff;
	}
	h1,h2,h3,h4,h5
	{
		font-weight: normal;
	}
	
	button
	{
		background-color: #000;
		border: solid 1px #ccc;
		color:#fff;
		font-family: Retro;
	}
	.container
	{
		position: relative;
		width:100vw;
		height:100vh;
		height:100%;
		overflow: hidden;
	}

	.modal
	{
		position: absolute;
		top:0;
		left:0;
		display: block;
		width: 100vw;
		height:100vh;
		background: rgba(0,0,0,0.5);
		z-index: 100;
		display: none;
	}
	.modal.uimodal
	{
		z-index: 3;
	}
	.ui
	{
		display:none;
		position: absolute;
		transform:scale(1);
		transform-origin:0 0;
		z-index: 10;
		width:100vw;
		/* height: 100vh; */
		backface-visibility: hidden;
	}


	.viewport
	{
		position: relative;

		background: #000;

		margin:0 0 400px 0;
		 
		/* transform:scale(2); */
		/* transform:scale(2) translate(-16px, -16px); */
		transform:scale(2) translate(0px, 0px);
		transform-origin:0 0;

		overflow:hidden;



	}

	

	.tile, .overlay, .effect 
	{
		position: relative;
		display:block;
		width: 16px;
		height: 16px;
		z-index:1;


		color:#fff;
		font-family: Retro;
		font-size:7px;

		/* text-shadow: #000 10px 10px 10px, #000 2px 2px 0px, #000 -1px -1px 0px, ; */
		/* text-shadow: #000 2px 2px 0px, #000 -2px -2px 0px ; */
		text-shadow: #000 1px 1px 0px, #000 -1px -1px 0px, #000 -1px 1px 0px, #000 1px -1px 0px ;

	}
	.overlay {
		z-index: 2;
	}
	.effect {
		position: absolute;
		pointer-events: none;
		background: transparent url(../images/tiles.gif);
		z-index:500;
	}
	.tile
	{
		float:left;
		clear:none;
		background: #000 url(../images/tiles.gif);
		background-position:-16px 0;
		color:#fff;
		/* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
		font-size: 6px;

	}
	.overlay.people, .tile.people
	{
		background: transparent url(../images/people.gif);
		z-index: 4;
	}
	.overlay.above
	{
		z-index: 4;
	}
	.overlay.people.party
	{
		background: transparent;
		z-index: 5;
	}
	.overlay > .bar, .effect > .bar {
		position: absolute;
		width:100%;
		height:2px;
		background:#ccc;
		border:solid 1px #000;
		margin-left:-1px;
		margin-top:-1px;
	}
	.overlay > .bar.healthbar, .effect > .bar.healthbar {
		top:-6px;
	}	
	.overlay > .bar.cooldown, .effect > .bar.cooldown {
		top:18px;
	}
	.overlay > .bar.stamina, .effect > .bar.stamina {
		top:-10px;
		background: rgba(252,144,0,1);
	}
	.overlay > .bar.enemy, .effect > .bar.enemy {
		background:red;
	}
	.overlay > .bar.friend, .effect > .bar.friend {
		background:#00a400;
	}

	.overlay > .name {
		font-size: 4;
		width:64px;
		left:-24px;
		top:-13px;
		position: absolute;
		text-align: center;
		/* background: #0070fc; */
	}

	.overlay > .hotkey {
		position: relative;
		z-index: 3;
	}
	.overlay > .damage {
		z-index: 2;
	}

	.overlay.fightable
	{
		/* border: solid 1px red; */
		/* background-color: #e69806; */
		/* border-bottom:dashed 4px #e69806; */
		/* rgba(252,144,0,1) */
		/* animation: sparklebackground 2s infinite; */

		border: solid 2px rgba(252,144,0,1);
		margin-left:-2px;
		margin-top:-2px;

		/* background-repeat: no-repeat; */

	}
	.overlay.breakable
	{
		/* border: solid 1px #0070fc; */
		/* background-color: #0070fc; */
		/* border-bottom:dashed 4px #0070fc; */
		/* animation: sparklebackground 2s infinite; */

		border: solid 2px rgba(0,112,252,1);
		margin-left:-2px;
		margin-top:-2px;

	}
	.overlay.interactable, .overlay.pickable
	{


		/* border-bottom:dashed 4px #ccc; */
		/* border-bottom:dashed 4px #00a400; */
		/* background-color: #00a400; */


		/* border: solid 4px #00a400; */
		border: solid 2px rgba(0,176,0,1);
		margin-left:-2px;
		margin-top:-2px;

		animation: sparklebackground 2s infinite;

	}

	.overlay.double
	{
		width:32px;
		height:32px;
		margin-left:-8px;
		margin-top:-8px;
	}

	/* NOTE: this technically works, but it's ugly on boats, etc.  We should use health instead. */
	.overlay.double .damage
	{
		margin:8px 8px;
		transform: scale(2)!important;
	}
/* 
	.overlay.indicator {
		transform: scale(0.5) translate(0px, 8px);
		transform-origin: top right;
	}
 */

	.tile.normal, .overlay.normal
	{
		filter:brightness(1.0);
	}
	.tile.lit, .overlay.lit
	{
		filter:brightness(1.0);
	}
	.tile.dim, .overlay.dim
	{
		filter:brightness(0.3);
	}
	.tile.hidden, .overlay.hidden
	{
		/* filter:brightness(0.0); */
		opacity: 0.0;
	}

	.tile.unbuildable
	{
		background-color: #333;
		background-blend-mode: screen;
	}

/* 
	.viewport.notool .tile:hover::before, .viewport.notool .overlay:hover::before
	{
		content:"";
		position: absolute;
		display: block;
		width:16px;
		height: 16px;
		z-index: 200;

		background: rgba(0,0,0,0.5) url(../images/tiles.gif);
		background-position:-640px 0;
		cursor: none;

	} 
*/

	.viewport.notool .overlay.stuff:hover
	{
		border: solid 2px rgba(0,176,0,1);
		margin-left:-2px;
		margin-top:-2px;
	}

	.viewport.notool .overlay.people:hover
	{
		border: solid 2px rgba(252,144,0,1);
		margin-left:-2px;
		margin-top:-2px;
	}

	.overlay.double.stuff:hover
	{
		margin-left:-8px;
		margin-top:-8px;
	}

	.overlay.double.interactable, .overlay.double.pickable, .overlay.double.fightable,
	.tile.overlay.double.interactable:hover, .overlay.double.pickable:hover, .overlay.double.fightable:hover
	, .viewport.notool .overlay.double.stuff:hover
	{
		margin-left:-10px;
		margin-top:-10px;
	}

	.tile.cargo
	{
		position:absolute;
		left:0;
		top:0;
		z-index:11;
		transform: scale(3);
		transform-origin: 0 0;
		pointer-events: none;
	}

	.touchcontrol.fight
	{
		border: solid 4px #e69806;
	}
	.touchcontrol.break
	{
		border: solid 4px #0070fc;
	}
	.touchcontrol.interact
	{
		border: solid 4px #ccc;
		border: solid 4px #00a400;
	}

	.viewport > .tile {
		position:absolute;
		z-index:0;
		left:0;
		top:0;
	}

	.tile.falling
	{
		/*
		animation-name: falling;
		animation-duration: 8s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
			*/
		/*background: green url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABACAYAAABcIPRGAAAB+0lEQVRoQ+1ZQY6DMAw0Up67Bw77jD1w2OcisUI0EIwdO8RZUtW9VCUBMvGM7UkHAFig5DPO59lTGEput547wDjTAKagfdfDALgIXHeaA9QpALzcCOgamTcBEAG5BrTS0s1bw0+LmKcMfnLnFJLF3DkATszxutcBHddzOTyvgWOnvQ7U7TV9N5+FuLd5HbCNg9cBAPA6UEMq9wPvQyH3AzVM5+/9AA3I5r7zNOp+oA3341M/QAPuB1pTyM9Ge+1G/VyoLff3NDrPsMAvAHwB3Poet0eth/HpPwe53+lYeEV6/rkCDt/yJgwWAE4LegGhrqVA43gEsI6lIDSLX++pBhDGbef3BTGRwOMUgAhCu/gNwATLbfqstHv9kaMFgKMAuNcSWLNGKQVoDgDrQaRSAQCKYk0AUFyPG3uhkhIAJ/LmADgwnAZyDKIj8EAaPYFSRiACu2rgAQApjTgR44VykTFPoyJlUJ1I60C6y7tmhGJmDoCrwCV1AO92ri6YiFhKlbmoUBQqqcjNAEigpCyk10BlJQ6BbuK0lZnSgNzCHTNMIyA1dVIzd68X+oc0SkWjm24U3A8cNqgk+5g5MvcD1b1QZRrFhsb9AFME3A+wvvlGGnU/kNDMvJ12P1B4QmfazGlSKG743A/Unsy5H0CthNaJmTVzmna6pR/4AxMfx7+BmaJ8AAAAAElFTkSuQmCC);*/
		/*background: green url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAB10lEQVRoQ+1ZQW4DIQz0SjwkD+xhD31GDjnkuUitaCDyujY2mE0byblEWRICw3gYhg0AvmDktefDt/M1AdwB4APm3vdHdwkAcM+9z7gt1fHk6+9JpE99YhvsmQfgVv5Gf+UyaicAhwlVILhnGKjW3gAobRgEy+TLbzaRAWSlQQDEC0DaHyv/nJDABNrOAdBAsE6+DwBd/AYIASLfHPQvZVOJZgWAsgDoQimkLSzBAMkMkDqiGnBJ8/XPAED1QC2FAQC4EvFrwGIGNNytjMAa0Ft8SSR1DVDEcHUJUAA44Ts8czNA2wYVMfSKIExsg7MAcCLp14A/9AE/+ikwgIqdVB5+DXD6ALoNqpQnPoHTgBE/oGtAg+6NfABd7Z4vsJfAiT5A2+p6rOBKYA0DXugDVllhPOTXaYDTB6TEH4JW+wBZBKVtUKA87WiFD+AmOwuAdeXbPHQN+Ac+oAsQGt9I7dsBkA5F9XnkAU4fUJzgKhFcy4DIAwj3T/QB0j5vcYWRB7hPg95M0OkDaCIUeUBFwCqM1kCkHYWfANfE+C18AI3JIg9AR+LIAxgRHPEDkQeYr8ZO9AGRB6DboN7BhzNG0i5gPRX6M0GnD4g8IPH3gpEHGMvCezv8Da0Zn5/6gqxGAAAAAElFTkSuQmCC);*/
	
		background-position-y: -16px;
	}

/* 	TODO: color/existence based on selected tool
	.tile:hover
	{
		border: solid 1px #333;
		margin:-1px -1px;
		z-index: 2;
	} */

	.viewport > .over 
	{
		z-index:10;
		background-color: transparent;
	}

	.overlay
	{
		position:absolute;
		background: transparent url(../images/tiles.gif);
		background-position:-16px 0;

	}

	.hotbar, .chestcontainer
	{

		display:table-row;
		position:absolute;
		width: 170px;
		/* height: 16px; */
		/* min-height: 16px; */
		background:#000;
		top:16px;
		left:16px;
		border:solid 1px #e69806;
		border:solid 1px #0070fc;
		border-right:none;
		border-bottom:none;
		border-collapse: collapse;

		transform:scale(3);
		transform-origin:0 0;

		z-index: 10;
		
	}



	.hotbar > .tile, .chestcontainer > .tile, .ingredientList > .tile, .mapmenu > .tile
	{
		position: relative;
		z-index: 1;
		display:table-cell;
		margin: -1px 0 0 -1px;
		border:solid 1px #0070fc;
	}	

	.ingredientList > .tile.borderless
	{
		border:solid 1px #000;
	}	
	
	.hotbar > .tile.selected, .mapmenu > .tile.selected
	{
		margin: -2px -1px -1px -2px;
		border:solid 2px #fff;
		z-index: 10;
	}
	.tile > .quantity
	{
		position: relative;
		font-size: 5px;
		line-height: 5px;
		margin-top:11px;
		margin-right:1px;
		text-align: right;
	}
	.tile > .heldquantity
	{
		position: absolute;
		font-size: 5px;
		line-height: 5px;
		top:18px;
		width:18px;
		text-align: center;
	}
	.hotbar > .tile.equipped
	{
		background-color:rgba(0,112,252,0.8)
	}
	.hotbarhandle
	{
		position: absolute;
		left: 536px;
		top: 30px;
		top: 2px;
		border: solid rgba(0,0,0,0) 6px;
		border-left:none;
		background-clip: padding-box;
		z-index: 2;
		background-position-x: -512px;
		background-color: transparent;

		transform:scale(3);
		transform-origin:0 0;

	}


	.menubutton
	{
		display:none;
		position: absolute;
/* 
		left: 536px;
		top: 2px; */

		right:50px;
		right:306px;
		bottom:50px;
		border: solid rgba(0,0,0,0) 6px;
		background-clip: padding-box;
		/* border-style: hidden; */
		z-index: 2;
		background-position-x: -592px;
		background-color: transparent;

		transform:scale(3);
		transform-origin:0 0;

	}



	.chestcontainer
	{
		top:236px;
		top:272px;
		display:none;
	}

	.chestheader
	{
		border-right:solid 1px #0070fc;
		padding:2px;
		height: 8px;
	}

	.chesttakeall
	{
		border: solid 1px #0070fc;
		border: solid 1px #fff;
		position: absolute;
		z-index: 10;
		right: 0px;
		top: -1px;
		padding: 2px;
		width: 29px;
		height: 7px;
		text-align: center;
		/* background-color: #002350; */
	}
	.chesttakeall:hover {
		background-color: #00367c;
	}

	.inventoryfooter
	{
		/* display: none; */
		clear:both;
		border:solid 1px #0070fc;
		border-left:none;
		border-top:none;
		padding:2px;
		height: 7px;
	}

	.right 
	{
		float:right;
	}

	.mapcontainer
	{
		position:relative;
		width:84vw;
		height:84vh;
		margin:8vh 0 0 8vw;
		padding:0;
		overflow:hidden;
		border: solid 8px rgba(0,112,252,1);

	}
	.worldmap, .minimap
	{
		background: #000;
	}

	.mapmenu
	{

		position:absolute;
		width: 16px;
		min-height: 16px;
		background:#000;
		right:32px;
		bottom:32px;
		/* border:solid 1px #0070fc; */
		border-collapse: collapse;

		transform:scale(3);
		transform-origin:bottom right;

		z-index: 10;
		
	}
	.menucontainer
	{
		display:block;
		position:absolute;
		width:160px;
		height: 16px;
		left:50%;
		margin-left: -320px;
		top:100px;
		/* background:#f00; */

		transform:scale(4);
		transform-origin:0 0;
	}

	.menucontainer .tile.menu
	{
		position: relative;
		z-index: 1;
		margin: -1px 0 0 -1px;
		border:solid 1px #0070fc;

	}	
	.menucontainer .tile.menu.selected
	{
		margin: -2px -1px -1px -2px;
		border:solid 2px #fff;
		z-index: 10;
	}

	/* .menucontainer.gamemenucontainer */
	.gamemenu
	{
		transform:scale(2);
		transform-origin:0 0;

		position: absolute;
		z-index:100;

		width: 190px;
		height:158px;
		border: solid 1px #b0b0b0;
		left:50%;
		top:50%;
		margin-left:-190px;
		margin-top:-158px;

		background: rgba(0,0,0,0.7);
		color: #b0b0b0;
		font-size: 9pt;

		padding:4px;
	}

	.gamemenu>a, .gamemenu>div {
		display: block;
		margin-top: 8px;
		margin-left: 8px;
	}
	.gamemenu>hr {
		border:none;
		border-bottom: solid 1px #b0b0b0;;
	}

	.gamemenu input 
	{
		background: rgba(0,0,0,0.7);
		color: #b0b0b0;
		border: solid 1px #b0b0b0;
		font-family: Retro;
		width: 100%;
		margin-bottom: 16px;
		/* margin-left:5%; */
		/* margin-top: 8px; */
	}
	.gamemenu input[type=button]:hover
	{
		background: rgba(255,255,255,0.3);
		color:#fff;
	}
	.gamemenu input[type=button]
	{
		margin-bottom: 0;
	}


	.shopcontainer
	{
		display:block;
		position:absolute;
		width:200px;
		height:initial;
		left:50%;
		margin-left: -200px;
		top:100px;

		border:solid 3px #0070fc;
		background: #000;
		display:none;

		transform:scale(2);
		transform-origin:0 0;
	}

	/* .tile.menu.unavailable {
		color:#333;
	} */

	.infowindow 
	{
		position: absolute;
		z-index: 2;
		width: 120px;
		width: 240px;
		/* height: 25vh; */
		right: 0px;
		top:0px;
		border:solid 8px #0070fc;
		background: #000;

		display: flex;
		flex-direction: column;
		height: calc(100vh - 16px);


	}

	/*
	.container:before {
		content: " ";
		position: absolute;
		z-index: 100;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		border:solid 16px #0070fc;
		border-radius: 32px;
	}

	.container:after {
		content: " ";
		position: absolute;
		z-index: 100;
		top: 16px;
		left: 16px;
		right: 272px;
		bottom: 16px;
		border: 2px solid #fff;
	}

	.infowindow:before  {
		content: " ";
		position: absolute;
		z-index: 101;
		top: -2px;
		left: -2px;
		right: -2px;
		bottom: -2px;
		border: 2px solid #b0b0b0;
		border: 2px solid #fff;
	}
*/	

	.minimap
	{
		background: #000;


		position: relative;
		width: 240px;
		height: 160px;
		transform:scale(1);
		transform-origin:0 0;


		margin-bottom: 0px;

	}

	/* .uicontainer, .statuscontainer, .consolecontainer */
	.statuscontainer, .consolecontainer
	{
		/* transform:scale(0.5);
		transform-origin:0 0; */
		width:100%;
		width:238px;
		color:#fff;
		position: relative;
		font-family: Retro;
		font-size:5.5px;
		font-size:12pt;
		padding: 0 2px 2px 2px;
		-webkit-font-smoothing: subpixel-antialiased;
		backface-visibility: hidden;
	}
	.statuscontainer
	{
		border-top:solid 8px #0070fc;
		/* border-bottom:solid 8px #0070fc; */
		min-height:128px;
		/* background: rgba(0,0,0,1); */
	}
	.statuscontainer > div 
	{
		margin-bottom: 8px;
	}
	.foodcontainer
	{
		position: absolute;
		margin-top:208px;
		right:22px;

		
		transform:scale(2);
		transform-origin:0 0;
	}
	.foodcontainer > .tile {
		display: block;
		float:none;
		clear: both;
		border:solid 1px  #0070fc;
		margin:-1px 0 -1px 1px;
		margin:-1px 0;
	}
	.consolecontainer
	{
		border-top:solid 8px #0070fc;
		height:196px;
		overflow: hidden;
		overflow-y: scroll;
		scrollbar-width: none;
		/* background: rgba(0,0,0,1); */
		flex-grow: 1;
	}
	.consolecontainer .message, .conversationMessageContainer .message {
		margin-bottom:16px;
		white-space: pre-wrap;
	}	
	.consolecontainer .message .keyword, .conversationMessageContainer .keyword {
		color:#0070fc;
	}
	.conversationMessageContainer .message.keyword{
		color:#0070fc;
		margin-top:2px;
		margin-bottom:2px;
	}
	.consolecontainer a, .chatsuggestions a {
		font-size: 12pt;
		color:rgb(255, 200, 128);
	}
	.consolecontainer a:hover, .chatsuggestions a:hover {
		font-size: 12pt;
		color:rgba(252,144,0,1);
	}
	.chatcontainer
	{
		border-top:solid 8px #0070fc;
		overflow: hidden;
		display:none;
	}

	.chatsuggestions
	{
		border-bottom:solid 8px #0070fc;
		padding:2px;
	}

	.chatsuggestions a {
		margin-right: 8px;
		display:inline-block;
	}

	.inventorytabs
	{
		position: absolute;
		z-index: 3;
		width: 205px;
		right: 205px;
		top:0px;
		border:none;
		background: #000;
		display:none;

		/* border-left:solid 1px #0070fc; */
		/* border-bottom:solid 4px #0070fc; */

		transform:scale(2);
		transform-origin:0 0;
	}

	.tab
	{
		clear:none;
		float:left;
		border:solid 1px #0070fc;
		border-bottom:none;
		/* border-left:none; */
		height:19px;
		padding:0 7px;
		line-height: 21px;
		margin-left:-1px;
	}

	.tab.tabbed
	{
		border:solid 4px #0070fc;
		border-bottom:none;
		height:16px;
		line-height: 16px;
		padding:0 4px;
	}

	tr.townheader > td {
		border:none;
		padding-top:8px;
		padding-bottom:4px;
	}

	.crafting, .conversationlog
	{
		position: absolute;
		z-index: 3;
		width: 200px;
		/* height: 25vh; */
		/* height:257px; */
		right: 206px;
		top:0px;
		top:32px;
		top:40px;
		border:solid 3px #0070fc;
		border-top:none;
		background: #000;
		display:none;


		transform:scale(2);
		transform-origin:0 0;
	}
	.craftingHeader, .shopHeader
	{
		border:solid 1px #0070fc;
		border-bottom: none;
		padding:2px;

	}
	.crafting table, .shopcontainer table, .conversationlog table
	{
		border:solid 1px #0070fc;
		border-collapse: collapse;
	}

	.craftingOuter 
	{
		width:100%;
	}
	.craftingOuter td
	{
		vertical-align: top;
	}

	.craftingright
	{
		height:256px;
	}

	.craftingscrollwrapper
	{
		height:256px;
		overflow: hidden;
		overflow-y: scroll;
		scrollbar-width: none;	
	}

	.conversationMessageContainer
	{
		width:115px;
		padding:0px 2px;
		font-size:5.5px;
		font-size:8px;
	}
	.conversationMessageContainer a {
		font-size: 8px;
		color:rgb(255, 200, 128);
	}
	.conversationMessageContainer a:hover {
		font-size: 8px;
		color:rgba(252,144,0,1);
	}

	.itemList
	{
		width:100%;
		/* height: 100%; */
		font-size:5.5px;
	}
	.itemList tr.selected
	{
		/* margin: -2px -1px -1px -2px; */
		border:solid 2px #fff;
		/* border:solid 1px #fff; */
		padding:0px;
		z-index: 10;
	}
	.itemList tr.selected td
	{
		padding-top:0px;
		padding-bottom:0px;
	}
	.itemList tr.unavailable
	{
		color:#333;
	}
	.itemList tr.unavailable .tile
	{
		opacity: 0.3;
	}
	.itemList td
	{
		padding-top:1px;
		padding-bottom:1px;
		vertical-align: middle;
	}	
	.itemList td.itemSection
	{
		border:none;
		padding-top:8px;
		padding-left:4px;
		font-size:8px;
	}
	.itemList td:first-child
	{
		width:16px;
	}	

	.itemDescription
	{
		/* height:200px; */
		height:196px;
		width:115px;
		padding:0px 2px;
	}
	.ingredientList
	{
		padding:2px;
	}
	.ingredientList > .tile 
	{
		margin:2px;
	}
	.itemInfoTooltip >.ingredientList
	{
		position: absolute;
		bottom: 4px;
	}

	.itemInfoTooltip
	{
		position: absolute;
		transform:scale(2);
		transform-origin:0 0;

		height:100px;
		width:115px;
		padding:0px 2px;
		border:solid 1px #0070fc;
		background-color: #000;
		left:0;
		top:0;
		z-index:100;
	}

	.consoleContainer > .itemInfoTooltip 
	{
		border:none;
		padding-left:4px;
		transform: none;
		position: relative;
		width:auto;	
	}
	.consoleContainer > .itemInfoTooltip h1 
	{
		font-size: 22px;	
	}

	.consoleContainer > .itemInfoTooltip >.ingredientList
	{
		transform: scale(2);
		transform-origin: 0 0;
		left:-4px;
	}

	.craftingButton
	{
		margin:8px 4px 4px 4px;
		width:106px;
	}

	#tiles
	{
		display: none;
	}

	.touchcontrols
	{
		position: absolute;
		z-index: 10;
		left:0;
		bottom:0;
		height:300px;

		display:none;
	}
	.touchcontrols.showbuildmenu
	{
		height:400px;
	}

	.touchcontrol
	{
		border:solid 4px #ccc;
		background-color: rgba(255,255,255,0.2);
		background-color: rgba(0,0,0,0.8);
		width:160px;
		height:80px;
		line-height: 80px;
		margin:8px;
		padding:0 0 0 8px;
		font-size: 12pt;

	}
	

	.touchcontrol:active
	{
		background-color: rgba(100,100,100,0.8);
	}

	.touchcontrol.buildmenu
	{
		display:none;
	}
	.touchcontrols.showbuildmenu > .touchcontrol.buildmenu
	{
		display:block;
	}

	.hintscontainer
	{
		position: absolute;
		z-index: 100;
		left:0;
		bottom:0px;
		/* height:300px; */
		background:rgba(0,0,0,0.4);
		/* padding:8px 8px 16px 8px; */
		padding:16px 16px 32px 16px;

		white-space: pre;
		font-size: 11px;
		/* font-size: 14px; */

	}
	
	.bingle, .mobingle
	{
		position:absolute;
		width:60px;
		margin-left: -30px;
		text-align: center;
		z-index: 10;
		text-shadow: #000 1px 1px;
		animation: bingle 2s forwards ease-out;
	}
	.bingle.mobingle
	{
		animation: mobingle 2s forwards ease-out;
	}
	.bingle.info
	{
		color:#fff;
	}
	.bingle.good, .uicontainer .good
	{
		color:rgba(252,144,0,1);
	}
	.bingle.normal
	{
		color:#fff;
	}
	.bingle.less
	{
		color:#ccc;
	}
	.bingle.bad, .uicontainer .bad
	{
		color:#f00;
	}	


	



	.uicontainer .good
	{
		color:#60ff60;
	}
	.uicontainer .bad, .bad
	{
		color:#ff6060;
	}
	.uicontainer .notice
	{
		color:#ffff60;
	}
	.uicontainer .warn
	{
		color:rgba(252,144,0,1);
	}

	input, textarea 
	{
		background: rgba(0,0,0,0.7);
		color: #b0b0b0;
		border: solid 1px #b0b0b0;
		font-family: Retro;
		width: 100%;
	}
	input[type=button]:hover
	{
		background: rgba(255,255,255,0.3);
		color:#fff;
	}
	input[type=button]
	{
		margin-bottom: 0;
	}

	input.chatinput
	{
		clear:none;
		float: left;
		width:207px;
		height: 31px;
		border:none;
		color: #fff;
		line-height: 32px;
		font-size: 12pt;
		padding-left:8px;
	}
	input.chatbutton
	{
		width:16px;
		height:16px;
		border:none;
		background: #000 url(../images/tiles.gif);
		background-position:-592px 17px;

		transform:scale(2);
		transform-origin:0 0;
	}

	.gamemenu textarea {
		height:86px;
		margin-bottom: 8px;
		scrollbar-width: thin;
		scrollbar-color: #b0b0b0 transparent;
	}

	.signMessage {
		margin-right: 8px;
		white-space: pre-wrap;
		max-height: 108px;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: #b0b0b0 transparent;
	}

	input:focus-visible, textarea:focus-visible {
		outline: none;
	}


	.icon {
		position: relative;
		display:block;
		width: 16px;
		height: 16px;
		background: transparent url(../images/tiles.gif);
		background-position:-16px 0;
	}

	.icon.bin {
		background-position:-2048px 0;
	}

	.container.mobilechat #infowindow
	{
		/* display:block; */
		position: absolute;
		box-sizing: border-box;
		left:0;
		/* top:0; */
		/* bottom:0; */
		/* width:calc(100vw - 16px); */
		top:50vh;
		width:100vw;
		height:50vh;
		z-index: 1000;
		background-color: #000;
	}


	.container.mobilechat #consolecontainer
	{
		/* display:block; */
		box-sizing: border-box;
		position: absolute;
		left:0;
		top:0;
		width:100%;
		height:calc(100% - 200px);
		z-index: 1000;
		border:solid 8px #0070fc;
		border:none;

		font-size: 22px;
	}
	.container.mobilechat #chatcontainer
	{
		display:block;
		box-sizing: border-box;
		position: absolute;
		left:0;
		bottom:0;
		width:100%;
		height:200px;

		border:none;
		border-top:solid 8px #0070fc;
		border-bottom:solid 16px #0070fc;

		z-index: 1001;
	}
	.container.mobilechat #chatsuggestions 
	{
		padding:8px;
	}
	.container.mobilechat #chatinput
	{
		width:calc(100% - 64px);
		height:124px;
	}
	.container.mobilechat #chatbutton
	{
		transform: scale(4);
		margin-top:24px;
	}
	.container.mobilechat #consolecontainer, .container.mobilechat #consolecontainer a, .container.mobilechat #chatcontainer, .container.mobilechat #chatcontainer a, .container.mobilechat #chatcontainer input
	{
		font-size: 22px;
		background-color: #000;
	}

	.container.mobilechat .hintscontainer, .container.mobilechat #touchcontrols
	{
		display:none!important;
	}

	.viewportcanvas 
	{
		border:solid;
		transform: scale(3);
		transform-origin: top left;
	}


@keyframes sparkle {
0%		{  }
10%		{ border-color:#ccc }
20%		{  }
/* 49%		{  }
50%		{ border-color:#ccc }
51%	{  } */
100%	{  }
}

@keyframes sparklebackground {
0%		{  }
50%		{ background-color:rgba(0,0,0,0); }
100%	{  }
}

@keyframes bingle {
0%		{ opacity: 1; transform: translate(0px, 0px);}
50%		{ opacity: 1; }
100%	{ opacity: 0; transform: translate(0px, -8px);}
}

@keyframes mobingle {
0%		{ margin-top:0px;}
100%	{ margin-top:-8px;}
}


@font-face {
	font-family: "Retro";
	src:
		local("Retro"),
		url("../images/retrogaming.woff") format("woff");
}

/* @media (orientation: portrait)	 */
@media (max-aspect-ratio: 1/1.3)	
{

	.hotbar
	{
		top:232px;
		left:auto;
		right:calc(170px * 2 + 16px);
	}

	.hotbarhandle
	{
		top: 218px;
		left:auto;
		right:570px;
		border: solid rgba(0,0,0,0) 6px;

	}


	.chestcontainer
	{
		top:452px;
		top:492px;
		left:inherit;
		right:358px;
	}
	.infowindow
	{
		left:0;
		width:calc(100% - 16px);
		height:200px;

		display: block;
	}
	.infowindow > *
	{
		position:relative;
		clear:none;
		float:left;
		width:calc(33% - 8px);
		height:100%;
		margin:0;
		border:0;
		border-left:solid 8px #0070fc;
	}
	.infowindow > .foodcontainer {
		position:absolute;
		width:0;
		left:calc(66% - 40px);
		height:50%;
		margin:0;
		border:0;
		margin-top:32px;
		border-left:none;
	}
	.infowindow > canvas.minimap
	{
		width:32%;
		height:100%;
		border:0;
	}
	.menubutton
	{
		right:50px;
	}
	.crafting, .conversationlog
	{
		top:452px;
		top:492px;
		top:532px;
		right:222px;

	}
 	.inventorytabs
	{
		top:452px;
		top:492px;
		right:221px;
	}
}

@media (min-width:1260px) and ( min-aspect-ratio: 1/1.3)
{
	.infowindow {
		border:solid 16px #0070fc;
		height: calc(-32px + 100vh);
	}
		
	.statuscontainer {
		border-top: solid 16px #0070fc;
		padding:4px;
	}

	.consolecontainer {
		border-top: solid 16px #0070fc;
		padding:4px;
	}

	.foodcontainer {
		margin-top: 224px;
	}

	.crafting, .conversationlog
	{
		right:454px;
		right:470px;
		border:solid 7px #0070fc;

	}
 	.inventorytabs
	{
		right:468px;
		right:492px;
		width:190px;
	}

	.menubutton
	{
		right:322px;
	}

}