/*
 * veripeditus-web - Web frontend to the veripeditus server
 * Copyright (C) 2016, 2017  Dominik George <nik@naturalnet.de>
 * Copyright (C) 2017  mirabilos <thorsten.glaser@teckids.org>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published
 * by the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version, with the Game Cartridge Exception.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

html, body {
	height: 100%;
	width: 100%;
	margin: 0px;
	touch-callout: none;
	user-select: none;
}

div#content-wrapper {
	height: 100%;
	width: 100%;
	overflow: auto;
}

div#content-outer {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

div#map, div#camview {
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	position: fixed;
}

video#cam {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

div#control-overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	pointer-events: none;
	margin: 20px 20px;
	opacity: 0.8;
}

div#control-overlay .control {
	pointer-events: auto;
}

div#control-overlay .control-round {
	width: 64px;
	height: 64px;
	background: url(../img/ui/btn-round.svg);
	background-size: cover;
}

div#control-overlay .control-round .control-round-icon {
	position: relative;
	width: 60%;
	height: 60%;
	left: 20%;
	top: 20%;
	pointer-events: none;
}

div#control-overlay .control-round .control-round-icon-overlay {
	position: relative;
	width: 60%;
	height: 60%;
	left: 20%;
	top: -50%;
	pointer-events: none;
}

div#arview {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	perspective-origin: 50% 50%;
	transform-origin: 50% 50%;
	perspective: 800px;
	pointer-events: none;
}

div#arview img.argameobject {
	transform-style: preserve-3d;
	height: 50%;
	max-width: 95%;
	pointer-events: auto;
	transition: transform 500ms linear;
}

div#arview div.argameobjectwrapper {
	position: absolute;
	height: 100%;
	transform-style: preserve-3d;
	pointer-events: none;
	transition: transform 500ms linear;
}

img.map_popup_image {
	width: 100%;
	height: 80%;
	object-fit: contain;
}

table#inventory-table {
	width: 100%;
}

table#inventory-table td img {
	width: 32px;
}

div#dialog-avatars {
	white-space: nowrap;
}

.avatar-current {
	padding: 1px;
	border: 2px solid green;
	margin: 0px 0.42em;
}

.avatar-available {
	padding: 1px;
	border: 2px dotted blue;
	margin: 0px 0.42em;
}
