@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    width: 100%;
    height: 100%;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#011111+0,011616+50,011111+100 */
	background: #011111; /* Old browsers */
}

body {
	background: -moz-linear-gradient(left, #011111 0%, #011616 50%, #011111 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #011111 0%,#011616 50%,#011111 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #011111 0%,#011616 50%,#011111 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#011111', endColorstr='#011111',GradientType=1 ); /* IE6-9 */
}

*, *:before, *:after {
    box-sizing: border-box;
}

table {
    margin: 0;
    padding: 0;
}

.roundBorderTL {
    border-top-left-radius: 5px;
}
.roundBorderBL {
    border-bottom-left-radius: 5px;
}
.roundBorderTR {
    border-top-right-radius: 5px;
}
.roundBorderBR {
    border-bottom-right-radius: 5px;
}
.break20 {
	height:20px;
}
.break30 {
	height:30px;
}


.popup-start-menu {
    max-width: 980px;
    margin: 0 auto;
    min-height: 100%;
    padding: 10px 50px;
}
.popup-start-menu td {
    color: #ffffff;
    /*border-radius: 5px;*/
}
.main-menu-logo {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.main-menu-recession-text {
	font-size: 55px;
}

.main-container {
	display: flex;
	max-width: 980px;
	margin: 0 auto;
}

.menu-container {
	flex: 0 0 340px;
	color: #ffffff;
}
.menu-container.has-menu-open {
	height: 100%;
}
.main-menu {
	height: 60px;
	background-color: #0e7171;
	display: flex;
	flex: 0 0 auto;
}
.main-menu button {
	width: 20%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	outline: none;
	border: 0;
	padding: 7px;
}
.main-menu button img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.main-menu button.active {
	background-color: #011111;
}

.menu-panel {
	display: none;
	padding: 0 10px;
	-webkit-overflow-scrolling: touch;
	overflow: auto;
}
.menu-panel.active {
	display: block;
}

.menu-panel-title {
	width:100%;
	text-align:center;
	line-height:0.1em;
	display: flex;
	padding-top: 15px;
	padding-bottom: 10px;
	text-transform: lowercase;
	font-variant: small-caps;
	font-size: 20px;
}
.menu-panel-title > span:first-child {
	border-top: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	height: 10px;
	border-top-left-radius: 3px;
	flex-grow: 1;
}
.menu-panel-title > span:last-child {
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	height: 10px;
	border-top-right-radius: 3px;
	flex-grow: 1;
}
.menu-panel-title > span:nth-child(2) {
	flex-shrink: 1;
	padding: 0 10px;
}
.menu-panel-content {
	margin: 0 10px 0 10px;
}

.menu-icon {
	position: relative;
}
.menu-icon img {

}

.stat-bar {
	display: flex;
	margin-bottom: 6px;
	align-items: center;
}
.stat-bar .name {
	width: 50%;
	margin-right: 10px;
	text-align: right;
	font-weight: 300;
	font-size: 20px;
}
.stat-bar .bar-container {
	border: 1px solid #ffffff;
	margin-left: 10px;
	width: 50%;
	height: 15px;
	margin-top: 3px;
}

.stat-bar .bar {
	height: 100%;
	background-color: #ba1615;
}

.equipped-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20px;
}
.equipped-item .icon {
	width: 60px;
	height: 60px;
	background-color: #421026;
	border: 2px solid #ff3d93;
}
.equipped-item .desc {
	flex-grow: 1;
	padding-left: 15px;
}
.equipped-item .desc > div:first-child {
	border-bottom: 1px solid #ffffff;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
.equipped-item .desc > div:last-child {
	font-weight: 300;
}

.item-list-container .items .item {
	display: flex;
	padding: 5px;
}
.item-list-container .items .item img {
	max-width: 100%;
	height: auto;
	align-self: center;
}

.game-container {
	flex: 1 0;
	display: flex;
	flex-direction: column;
    min-height: 100%;
	height: 100%;
    color: #ffffff;
    border-top: 5px solid #0e7171;
    overflow: hidden;
}

.game-content {
    padding: 10px 10px 50px 10px;

	flex-grow: 3;

	overflow-y: scroll;
}


/* Header */
.header {
	flex-shrink: 1;
}

.header table {
    background-color: #000202;
    font-size: 16px;
    padding: 5px;
    color: #ffffff;
    width: 100%;
}
.header .money-label, .header .datetime-label {
    font-size: 12px;
}
.header-border {
    width: 100%;
    height: 1px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d1d1d1+0,aaaaaa+50,d1d1d1+100 */
    background: #d1d1d1; /* Old browsers */
    background: -moz-linear-gradient(left, #d1d1d1 0%, #aaaaaa 50%, #d1d1d1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #d1d1d1 0%,#aaaaaa 50%,#d1d1d1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #d1d1d1 0%,#aaaaaa 50%,#d1d1d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#d1d1d1',GradientType=1 ); /* IE6-9 */
}


/* Suspicion Bar */
.suspicion-bar-container {
    background-color: #000202;
    color: #ffffff;
    padding: 5px 0;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.suspicion-bar-container > div:first-child {
    flex-shrink: 0;
    margin-left: 10px;
}
.suspicion-bar-container > div:last-child {
    flex-grow: 0;
    margin: 0 10px 0 10px;
    width: 100%;
    height: 18px;
    background-color: #370706;
}
.suspicion-bar {
    background-color: #ba1615;
    width: 50%;
    height: 100%;
}
.suspicion-bar-border {
    width: 100%;
    height: 1px;
}


.item-desc-container {
	width: 100%;
	height: 150px;
	border: 2px solid #073737;
	display: flex;
}
.item-desc-container > .item-desc {
	width: 100%;
}
.item-desc-container > .item-desc > .title {
	padding: 5px;
	background-color: #421026;
}
.item-desc-container > .item-desc > .desc {
	padding: 5px;
	font-size: 14px;
}

.item-list-container {
	width: 100%;
	height: 70px;
	margin-top: 10px;
	border: 2px solid #073737;
	display: flex;
}
.item-list-container > .arrow {
	height: 100%;
	width: 25px;
	text-align: center;
	font-size: 30px;
	background-color: #0f7475;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.item-list-container > .items {
	height: 100%;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.item-list-container > .items > .item {
	width: 55px;
	height: 55px;
	background-color: #421026;
	border: 2px solid #ff3d93;
}
.item-list-container > .items > .item:nth-child(1),
.item-list-container > .items > .item:nth-child(5) {
	width: 35px;
	height: 35px;
}
.item-list-container > .items > .item:nth-child(2),
.item-list-container > .items > .item:nth-child(4) {
	width: 45px;
	height: 45px;
}


.quests-log {

}
.quest-item {

}
.quest-item .name {
	font-weight: bold;
	font-size: 20px;
}
.quest-item .step {
	font-weight: 300;
	text-decoration: line-through;
	color: #b8b8b8;
	padding-left: 5px;
}
.quest-item .step:last-child {
	color: #ffffff;
	text-decoration: none;
}
.quest-item .step::before {
	content: '\00BB \00a0';
}


.world-map .map-image > img {
	width: 100%;
	padding: 0;
	margin: 0;
}

.map-buttons {
	display: flex;
	justify-content: space-between;
}

.map-buttons .map-button {
	position: relative;
	width: 100%;
	background-color: #0f7475;
	border: 2px solid #073737;
	color: #ffffff;
	padding: 5px;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	margin: 10px 0 0 0;
	float: left;
	font-size: 16px;
}

.small-corner-tri::after {
	content: '';
	position: absolute;
	bottom: 0; right: 0;
	border-bottom: 15px solid #e91b1a;
	border-left: 15px solid transparent;
	width: 0;
}


/* Location Card */
.popup-location-card {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #333333;

    display: none;
}
.popup-location-card .location-label {
    width:100%;
    text-align: center;
    color: #ffffff;
    font-size: 30px;
    margin-top: 100px;
}
.popup-location-card .datetime-label {
    width:100%;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    margin-top: 10px;
}


/* Dialog Line */
.dialog-line {
    margin-bottom: 20px;
    font-weight: 300;
}

.dialog-line-name {
    background-color: #98b779;
    color: #000000;
    padding: 2px 0 5px 10px;
    margin-top: 20px;
    font-variant: small-caps;
    font-size: 18px;
    font-weight: 700;
	text-transform: lowercase;
	width: 300px;
	baseline-shift: baseline;
}
.dialog-line.has-name {
    border: 1px solid #98b779;
    background-color: rgba(0,0,0,0);
    color: #ffffff;
    padding: 5px;
    margin-bottom: 20px;
    font-weight: 500;
}


/* Dialog Option */
.dialog-choice {
    width: 100%;
    background-color: #0f7475;
    border: 2px solid #073737;
    color: #ffffff;
    padding: 10px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    max-width: 600px;
    margin: 30px auto 0 auto;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.main-menu-choice {
    width: 100%;
    background-color: #0f7475;
    border: 2px solid #073737;
    color: #ffffff;
    padding: 10px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    max-width: 600px;
    margin: 30px auto 0 auto;
}


/* Dialog Input */
.dialog-input {
    font-size: 16px;
    width: 100%;
    padding: 5px;
}


@media (max-width: 760px)
{
	.main-container {
		display: block;
		position: relative;
	}
	.menu-container {
		position: fixed;
		width: 100%;

		/*height: 100%;*/
		/*min-height: 100%;*/
		display: flex;
		flex-direction: column;
	}

	.menu-panel {
		/*height: 100%;*/
		flex-grow: 2;
		overflow: auto;

		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#011111+0,011616+50,011111+100 */
		background: #011111; /* Old browsers */
		background: -moz-linear-gradient(left, #011111 0%, #011616 50%, #011111 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #011111 0%,#011616 50%,#011111 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #011111 0%,#011616 50%,#011111 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#011111', endColorstr='#011111',GradientType=1 ); /* IE6-9 */
	}

	.game-container {
		padding-top: 60px;
		border: 0;
		overflow: initial;
	}
	.game-content {
		overflow: initial;
	}

	.game-content.has-menu-open {
		display: none;
	}

	.main-menu-recession-text {
		font-size: 40px;
	}
}