body {
	background: #DDD url("/style/back.jpg");
	font-family: Calibri, 'Trebuchet MS', sans-serif;
}

.container {
	display: block;
	max-width: 1200px;
	margin: 0 auto;
}

footer {
	text-align: center;
}

hr {
	border: #BBB solid 1px;
}

img {
	vertical-align: sub;
}

.small-block {
	display: block;
	font-size: 0.7em;
}

/* Navbar */
nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	background: #333;
	border: #111 solid 2px;
	border-radius: 10px/20px;
	padding: 0 5px;
}

nav img {
	padding: 5px;
}

nav a {
	display: flex;
	background: #333;
	color: white;
	text-decoration: none;
	text-align: center;
	padding: 0 10px;
	height: 3em;
	justify-content: center;
	flex-direction: column;
}

nav a:hover {
	background: #555;
}

/* Window */
.table-window {
	display: flex;
	justify-content:space-evenly;
	flex-wrap: wrap;
}

.table-window .window {
	flex: 1 0 300px;
}

.window {
	display: block;
	border: #148 solid 1px;
	border-radius: 4px;
	margin: 5px;
	flex-grow: 1;
	background: #CCEEEECC;
	color: black;
}

.window .head {
	border-radius: 3px 3px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 10px;
	background: #2A7B9B;
	background: linear-gradient(44deg, rgba(42, 123, 155, 1) 6%, rgba(81, 182, 184, 1) 27%, rgba(42, 123, 155, 1) 54%);
	color: #FFE;
	font-weight: bold;
	font-size: 1.5em;
}

.window .head a {
	color: #FFE;
}

.window .head .detail {
	font-size: 0.55em;
	color: #111;
	background: #CCEEEECC;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 7px;
	padding: 2px 7px;
}

.window .body {
	border-radius: 0 0 3px 3px;
	display: block;
	padding: 5px 10px;
}

.window.red {
	border: #841 solid 1px;
	background: #eecccccc;
	color: black;
}
.window.red .head {
	background: #992020;
	background: linear-gradient(44deg, rgba(153, 32, 32, 1) 6%, rgba(224, 58, 58, 1) 27%, rgba(153, 32, 32, 1) 54%);
	color: #EFF;
}
.window.red .head .detail {
	background: #eecccccc;
	color: #111;
}

.window.green {
	border: #2a690d solid 1px;
	background: #b3e2a0cc;
	color: black;
}
.window.green .head {
	background: #287018;
	background: linear-gradient(44deg, rgb(40, 112, 24) 6%, rgb(91, 183, 48) 27%, rgb(40, 112, 24) 54%);
	color: #FEF;
}
.window.green .head .detail {
	background: #b3e2a0cc;
	color: #111;
}

.window.yellow {
	border: #69540d solid 1px;
	background: #e7df91cc;
	color: black;
}
.window.yellow .head {
	background: #695D12;
	background: linear-gradient(44deg, rgba(105, 93, 18, 1) 6%, rgba(179, 159, 32, 1) 27%, rgba(105, 93, 18, 1) 54%);
	color: #EEF;
}
.window.yellow .head .detail {
	background: #e7df91cc;
	color: #111;
}

.window.purple {
	border: #690d40 solid 1px;
	background: #e791c3cc;
	color: black;
}
.window.purple .head {
	background: #69123F;
	background: linear-gradient(44deg, rgba(105, 18, 63, 1) 6%, rgba(179, 32, 113, 1) 27%, rgba(105, 18, 63, 1) 54%);
	color: #EFE;
}
.window.purple .head .detail {
	background: #e791c3cc;
	color: #111;
}

/* Button */
.button {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	background: #2A7B9B;
	border: none;
	border-radius: 3px;
	color: #EEE;
	font-size: 1.2em;
	padding: 5px 10px;
	margin: 5px;
}

.button:hover {
	background: #256c88;
}

.button:active {
	background: #1d5469;
	outline: #111 solid 1px;
}

.button img {
	vertical-align: sub;
}

.grey .button {
	background: #202020;
	color: #EEE;
}
.grey .button:hover {
	background: #474747;
}
.grey .button:active {
	background: #000000;
}

.blue .button {
	background: #415fff;
	color: #FFE;
}
.blue .button:hover {
	background: #364ed4;
}
.blue .button:active {
	background: #273fc4;
}

.red .button {
	background: #e63838;
	color: #EFF;
}
.red .button:hover {
	background: #c73232;
}
.red .button:active {
	background: #ac2222;
}

.yellow .button {
	background: #eabc34;
	color: #001;
}
.yellow .button:hover {
	background: #e0ac0e;
}
.yellow .button:active {
	background: #c59a17;
}

.green .button {
	background: #49a82d;
	color: #FEF;
}
.green .button:hover {
	background: #3f7c23;
}
.green .button:active {
	background: #336815;
}

.purple .button {
	background: #a82d75;
	color: #FEF;
}
.purple .button:hover {
	background: #88245e;
}
.purple .button:active {
	background: #742051;
}


/* Game List */
.table-game {
	display: flex;
	flex-direction: column;
	border: black 1px solid;
	border-radius: 3px;
}

.table-game .game img {
	margin-right: 5px;
}

.table-game .game.grey {
	background: #DDD;
	border-bottom: #AAA 1px solid;
}
.table-game .game.grey:hover {
	background: #CCC;
}

.table-game .game.blue {
	background: #BCF;
	border-bottom: #77A 1px solid;
}
.table-game .game.blue:hover {
	background: #ABE;
}

.table-game .game.yellow {
	background: #FE9;
	border-bottom: #A92 1px solid;
}
.table-game .game.yellow:hover {
	background: #ED8;
}

.table-game .game.green {
	background: #adff99;
	border-bottom: #32aa22 1px solid;
}
.table-game .game.green:hover {
	background: #90ee88;
}

.table-game .game .game-main {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
}

@media (max-width: 640px) {
.table-game .game .game-main {
	display: flex;
	flex-direction: column;
}
}

.table-game .game .game-main .game-label {
	display: flex;
	align-items: center;
	padding: 2px;
	padding-left: 5px;
	flex-grow: 1;
}

.game-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.table-game .game .game-main .game-buttons {
	justify-content: end;
}

.game-extra {
	display: none;
	margin: 10px;
}

/* Table Game Image List */
.table-game-big {
	display: flex;
	justify-content: space-evenly;
	flex-direction: row;
	flex-wrap: wrap;
	font-weight: bold;
	text-align: center;
}

.table-game-big .entry {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	padding: 5px;
	margin: 5px;
	border-top: 5px #3f3f3f solid;
	border-bottom: 5px #3f3f3f solid;
	border-radius: 16px/12px;
	background: #8a8a8a80;
	text-decoration: none;
}

.table-game-big .img {
	position: relative;
	border: #3f3f3f solid 2px;
	border-radius: 10px;
	margin-bottom: 5px;
	image-rendering: auto;
	width: 256px;
	height: 224px;
}

.table-game-big .img img {
	border-radius: 8px;
}

.table-game-big .img .hidden {
	position: absolute;
	opacity: 0;
	text-align: left;
	border-radius: 8px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 5px;
	background: #222222C0;
	color: #FFF;
	text-shadow: black 1px 1px;
}

.table-game-big .img .hidden:hover {
	opacity: 100%;
}

.table-game-big .desc {
	width: 256px;
	flex-grow: 2;
	align-content: start;
}

.table-game-big .button {
	background: #EEE;
	color: #000;
	font-size: 0.9em;
}

.table-game-big .button:hover {
	background: #DDD;
}

.table-game-big .button:active {
	background: #AAA;
}