@charset "utf-8";

:root {
	--siteDefaultFontColor: #000;
	--siteDefaultFontSize: 10px;
	--siteDefaultLineHeight: 1.2em;
	--urlColor: #000;
	--urlColorActive: #009ac5;

	--imageBackgroundColor: #ccc;
	--imageFontSize: 12px;
	--imageFontSizeYear: 16px;
	--imageTextColor: #000;
	--imageTextBackground: rgba(255, 255, 255, 0.7);
	--imageTextShadow: -1px 0 2px #222, 1px 0 2px #222, 1px 0 2px #222, -1px 0 2px #222;
	--imageShadow: 1px 1px 4px #888;
	--imageShadowOver: 1px 1px 10px #444;
	--imageShadowOndrag: 1px 1px 20px #00a;
	--imageScaleOver: scale(1.2);
	--buttonBackgroundColor: rgba(242, 181, 28, 1);
	--buttonFontColor: #000;
	--buttonFontSize: 18px;
	--buttonBackgroundColorOver: rgba(242, 181, 28, 0);
	--buttonBackgroundColorDisabled: #aaa;
	--timerFontColor: #000;

	--endGameTitleFontSize: 18px;

	--rulesHeaderFontColor: #000;
	--rulesHeaderFontSize: 18px;
	--rulesContentFontColor: #000;
	--rulesContentFontSize: 16px;
}

body {
	margin: 0px; padding: 0px; background: #FFF; -webkit-text-size-adjust:none;
	color: var(--siteDefaultFontColor); font-size: var(--siteDefaultFontSize); line-height: var(--siteDefaultLineHeight); text-decoration:none;
	box-sizing: border-box;
}
body * {
	box-sizing: border-box;
}
img {
	outline: none; border: none; vertical-align:middle;
}
a {
	color: var(--urlColor); text-decoration:none; outline: none; border: none;
	transition: color 0.3s ease-in;
}
* [draggable="true"] {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.gameContainer {
	width: 100%; max-width: 900px; height: 100%; margin: auto;
}
.gameContainer > .header {
	text-align: center; margin: 0;
}
.gameContainer > .header img {
	max-width: 100%;
}


#lstgame140 {
	margin: 0; padding: 0; width: 100%; height: 100%;
	display: grid; grid-template-rows: 60px 1fr;
}

#lstgame140 > .images {
	display: grid; width: 100%; height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
}
#lstgame140 > .images > div {
	background-color: var(--imageBackgroundColor); background-size: cover; background-position: center center; position: relative;
	box-shadow: var(--imageShadow); opacity: 0.5;
	transition: opacity 0.5s, transform 0.5s, box-shadow 0.5s;
}
#lstgame140 > .images > div img {
	width: 100%;
}
#lstgame140 > .images.start > div {
	opacity: 1; cursor: move;
}
#lstgame140 > .images.start > div:hover {
	transform: var(--imageScaleOver); z-index: 998; box-shadow: var(--imageShadowOver);
}
#lstgame140 > .images.start > div.ondrag {
	opacity: 0.5; transform: scale(1); box-shadow: var(--imageShadowOndrag);
}
#lstgame140 > .images.start > div.dragover {
	transform: var(--imageScaleOver); z-index: 998; box-shadow: var(--imageShadowOver);
}
#lstgame140 > .images > div > div {
	position: absolute; bottom: 0; text-align: center; width: 100%;
}
#lstgame140 > .images > div > div > .year {
	display: block; padding: 2px 5px 0 5px;
	color: var(--imageTextColor); font-size: var(--imageFontSizeYear); background: var(--imageTextBackground); text-align: center; line-height: 1.3em;
}
#lstgame140 > .images > div > div > .content {
	display: block; padding: 5px 10px;
	color: var(--imageTextColor); font-size: var(--imageFontSize); background: var(--imageTextBackground); text-align: center; line-height: 1.3em;
}


#lstgame140 > .buttons {
	text-align: center; padding: 10px 0 10px 0; position: relative;
}
#lstgame140 > .buttons > .button {
	width: auto; display: inline-block; padding: 10px 20px; cursor: pointer;
	color: var(--buttonFontColor); font-size: var(--buttonFontSize); background: var(--buttonBackgroundColor); border: var(--buttonBackgroundColor) 2px solid;
	transition: color 0.5s, background 0.5s;
}
#lstgame140 > .buttons > .button:hover {
	background: var(--buttonBackgroundColorOver);
}
#lstgame140 > .buttons > .button.disabled {
	color: var(--buttonFontColor); background: var(--buttonBackgroundColorDisabled);
}
#lstgame140 > .buttons > .button.disabled:hover {
	color: var(--buttonFontColor); background: var(--buttonBackgroundColorDisabled);
}
#lstgame140 > .buttons > .timer {
	width: auto; display: inline-block; padding: 10px 20px;
	position: absolute; right: 10px; font-size: var(--buttonFontSize); color: var(--timerFontColor);
}



#lstgame140Success {
	padding: 20px; font-size: var(--endGameTitleFontSize); line-height: 1.5em;
}

#lstgame140formTimeDiv {
	padding: 20px; font-size: var(--endGameTitleFontSize); line-height: 1.5em;
}

#lstgame140Select {
	position: absolute; z-index: 999;
}
#lstgame140Select > div {
	background-color: var(--imageBackgroundColor); background-size: cover; background-position: center center; position: relative;
	box-shadow: var(--imageShadow); opacity: 0;
	transition: opacity 0.5s, transform 0.5s, box-shadow 0.5s;
}
#lstgame140Select > div.ondrag {
	opacity: 1; transform: scale(1.2);
}
#lstgame140Select > div > div {
	position: absolute; bottom: 0; text-align: left; padding: 10px; line-height: 1.5em; font-size: var(--imageFontSize); background: var(--imageTextBackground); width: 100%;
}


.formContent > .hr {
	height: 60px;
}
.formContent > .message {
	padding: 20px; font-size: var(--endGameTitleFontSize); line-height: 1.5em;
}

.lstgame140Buttons {
	display: flex; flex-flow: row wrap; align-content: flex-start; justify-content: center;
}
.lstgame140Buttons > div {
	padding: 10px 20px; margin: 10px; cursor: pointer; border-radius: 3px;
	color: var(--buttonFontColor); font-size: var(--buttonFontSize); background: var(--buttonBackgroundColor); border: var(--buttonBackgroundColor) 2px solid;
	transition: color 0.5s, background 0.5s;
}
.lstgame140Buttons > div:hover {
	background: var(--buttonBackgroundColorOver);
}


.lstgame140rules {
	padding: 20px 10px;
}
.lstgame140rules > .header {
	text-align: center; color: var(--rulesHeaderFontColor); font-size: var(--rulesHeaderFontSize); line-height: 1.5em; font-weight: bold;
}
.lstgame140rules > .content > .subheader {
	text-align: left; color: var(--rulesHeaderFontColor); font-size: var(--rulesHeaderFontSize); line-height: 1.5em; font-weight: bold; padding: 20px 0 0 0;
}
.lstgame140rules > .content {
	color: var(--rulesContentFontColor); font-size: var(--rulesContentFontSize); line-height: 1.8em;
}