/* @font-face kit by Fonts2u (http://www.fonts2u.com) */
@font-face {
	font-family : "Mustache";
	src         : url("../fonts/mustache.ttf");
	font-weight : normal;
	font-style  : normal;
}

html {
	height : 100%;
}
body {
	font-size  : 100%;
	text-align : center;
	height     : 100%;
}
button {
	font-family : Neucha;
}
i {
	font-style : italic;
}
b {
	font-weight : 700;
}
aside {
	color : #151515;
	display : block;
}
em {
	background-color : #7DB599;
	box-shadow       : 0 0 16px #88C6AA;
	display          : block;
	font-family      : "Courier New";
	letter-spacing   : 0;
	word-spacing     : 0;
}
.bg-color {
	background-color : #E6E6E6;
}
.fg-color {
	background-color : #83B572;
}
.info-font {
	font-size : 1.3em;
}
.base-font {
	font-family    : Neucha;
	letter-spacing : 0.05em;
	word-spacing   : 0.1em;
}

.bg-clickable       { cursor           : pointer; }
.bg-clickable:hover { background-color : white;   }

.fg-clickable       { cursor           : pointer; }
.fg-clickable:hover { background-color : #B2D184; }
.fg-clickable:hover em {
	background-color : #B2D184;
	box-shadow       : none;
}

.top-exterior {
	position : absolute;
	height   : 3.5em;
	top      : -3.5em;
	width    : 49em;
}
.right-exterior {
	position : absolute;
	overflow : visible;
	width    : 0em;
	height   : 30em;
	right    : 0em;
}
.title {
	font-size      : 3em;
	text-align     : left;
	vertical-align : baseline;
	white-space    : nowrap;
	width          : 0%;
}
.money-total {
	text-align     : right;
	vertical-align : baseline;
	white-space    : nowrap;
	width          : 100%;
}
.hat {
	margin-bottom : 0.5em;
	width         : 5em;
}
.player-items {
	left     : 0.5em;
	position : absolute;
}
.moustache {
	font-family : Mustache;
	font-size   : 2em;
}
.buttons {
	align-items  : center;
	display      : flex;
	flex-flow    : row nowrap;
	padding-left : 0.5em;
	position     : absolute;

	top      : 0;
	right    : 0;
	left     : 0;

	height   : 3em;
}
.buttons > button {
	background-color : #83B572;
	border           : 1px solid black;
	cursor           : pointer;
	display          : inline-block;
	font-size        : 1em;
	height           : 1.6em;
	line-height      : 1.0em;
	margin-right     : 0.5em;
	padding          : 0.2em 1em;
}
.buttons > button:hover {
	background-color : #B2D184;
}
.menu {
	border      : 1px solid black;
	display     : inline-block;
	font-family : inherit;
	font-size   : 1em;
	height      : auto;
	padding     : 0.5em;
	position    : absolute;
	text-align  : left;
	white-space : nowrap;
	z-index     : 1;
}
.menu > button {
	background-color : #83B572;
	border           : 1px solid black;
	cursor           : pointer;
	display          : block;
	font-size        : 1em;
	margin-top       : 0.5em;
	width            : 100%;
}
.menu > button:hover {
	background-color : #B2D184;
}
.menu > button[disabled]:hover {
	background-color : #83B572;
	cursor           : default;
}
.menu label {
	display : block;
}
.menu label.checked {
	background-color : #B2D184;
}
.menu label.disabled {
	color : #444;
}
.game {
	margin          : 0em;
	border-collapse : separate;
	border-spacing  : 0.5em;
	position        : absolute;

	left           : 50%;
	top            : 4em;
	transform      : translateX(-50%);

	width           : 49em;
	height          : 30em;
}
.location {
	overflow : hidden;
	position : absolute;

	top    : 3em;
	right  : 0;
	bottom : 0;
	left   : 0;
}

/* dialog */

.dialog {
	border         : 1px solid black;
	border-radius  : 1em;
	color          : #006;
	line-height    : 1.1em;
	margin         : 0 auto;
	min-height     : 2em;
	padding        : 1em;
	position       : absolute;
	text-align     : left;
	width          : 30em;

	left           : 50%;
	top            : 50%;
	transform      : translateX(-50%) translateY(-50%);
}
.dialog-speaker {
	position : absolute;

	left     : 1.5em;
	top      : -1.5em;
}
.queue-text {
	background-color : #94BF78;
	margin-bottom    : 1em;
	padding          : 0.5em;
}
.dialog-replies {
	list-style-type     : decimal;
	list-style-position : outside;
	padding : 0.5em 0.5em 0.5em 1.5em;
}

/* about menu */

.about {
	border        : 1px solid black;
	border-radius : 50%;
	position      : absolute;
	line-height   : 1.1em;

	bottom        : -1.1em;
	right         : -1.1em;

	width         : 1.1em;
	height        : 1.1em;
}
.about-menu {
	bottom   : 0em;
	display  : none;
	position : absolute;
}
.about-menu p {
	margin      : 0.2em;
	text-align  : left;
	white-space : nowrap;
}

/* save view */

.game-container {
	position : absolute;

	left     : 0em;
	top      : 0em;

	width    : 64em;
	height   : 35.1em;
}
.dev {
	background-color : #F0F0F0;
	box-shadow       : 0 0 4px #808080;
	position         : absolute;

	left             : 64.5em;
	right            : 0.5em;
	top              : 4em;
}
#dev-contents {
	text-align : left;
}
#dev-contents table {
	border-collapse : separate;
	border-spacing  : 0.4em;
	vertical-align  : top;
}
#dev-contents table td {
	border-collapse : separate;
	vertical-align  : top;
	font-size       : 0.9em;
}
#dev-contents td.key {
	font-weight : bold;
}
#dev-contents td.value {
	background-color : white;
	white-space      : pre;
	width            : 100%;
}

/* home */

#home {
	border-collapse : separate;
	border-spacing  : 0.5em;

	width           : 100%;
	height          : 100%;
}
#home-header {
	height  : 2em;
	z-index : 0;
}
#home-body {
	position : relative;
}
#home-view {
	border         : 1px solid black;
	font-family    : "Courier New",monospace;
	height         : 100%;
	letter-spacing : 0em;
	position       : relative;
	text-align     : left;
	vertical-align : top;
	white-space    : pre;
	word-break     : break-all;
	word-spacing   : 0;

	width          : 100%;
	z-index        : 0;
}
#home-dialog {
	z-index : 2;
}
#home-view .character {
	cursor      : pointer;
	font-family : inherit;
	margin      : 0;
	padding     : 0;
	position    : relative;
	text-align  : center;
}
#home-view .character:hover {
	background-color : #B2D184;
}
#home-view .character-name {
	display  : none;
	position : absolute;
	left     : 50%;
	top      : 2em;
	transform      : translateX(-50%);

	z-index  : 1;
}
#home-view .character:hover .character-name {
	display : inline;
}
#home-view .player {
	color : #006;
}

/* queue */

.queue-ticket {
	background-color : white;
	padding          : 0.2em;
	position         : absolute;

	left : -7em;

	width  : 6em;
	height : 6em;
}
.queue-ticket .number {
	font-size   : 2em;
	padding-top : 0.3em;
}
.my-ticket {
	bottom : 6.5em;
}
.current-ticket {
	bottom : 0em;
}
.queue-people {
	background : url("../svg/highlight.svg") 0 0 / 100% 100%;
	display  : inline-block;
	position : absolute;
	width    : 16em;

	top    : 0;
	bottom : 0;
	left   : 0;
}
.queue-person {
	display     : block;
	font-size   : 1.3em;
	height      : 1.1em;
	line-height : 1.1em;
}
.queue-character.enabled {
	cursor : pointer;
}
.queue-character.enabled:hover {
	text-decoration : underline;
}
.queue-player {
	color : #006;
}
.queue-spacer {
	background : url("../img/crease.png") 0 0 / 100% 100%;
	display  : inline-block;
	position : absolute;
	width    : 0.5em;

	top    : 0;
	bottom : 0;
	left   : 16em;
}
.queue-body {
	display  : inline-block;
	position : absolute;

	top      : 0;
	right    : 0;
	bottom   : 0;
	left     : 16.5em;
}

/* store */

#store {
	border-collapse : separate;
	border-spacing  : 0.5em;
	table-layout    : fixed;

	width           : 100%;
	height          : 100%;
}
#store-items {
	align-content   : flex-start;
	background      : url("../svg/holly.svg") 0 0 / 100% 100%;
	display         : flex;
	flex-flow       : row wrap;
	justify-content : center;
	list-style      : none;
	padding         : 2em;
	position        : absolute;

	top             : 0;
	right           : 0;
	bottom          : 0;
	left            : 0;
}
#store-items.empty {
	text-align  : center;
	align-items : center;
	font-size   : 1.3em;
}
#store-items li {
	border      : 1px solid black;
	display     : inline-block;
	height      : 4em;
	margin      : 0.5em;
	padding     : 0.5em;
	white-space : nowrap;
}
#store-items li.disabled {
	color : #606060;
}