html    { height: 100vh; }
body    { height: 100vh; padding: 0px; margin: 0px; font-family: verdana; font-weight: bold;}
#table  { height: 100%;}

div.row
{ 
	display:flex;
	height: calc(20vh - 0px);
}

div.cell
{
	border:1px solid #000000;
	border-radius:4px;
	padding:4px;
	margin:8px;

	flex-grow:0;
	width: 20%;
	display:flex;
	flex-direction: column;
	justify-content:space-around;
	cursor: pointer;
	background-color: #ffffff;
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
}

div.keycell
{
	border:1px solid #000000;
	border-radius:4px;
	padding:4px;
	margin:8px;
	flex-grow:0;
	width: 20%;
	display:flex;
	flex-direction: column;
	justify-content:space-around;
	background-color: #ffffff;
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
	text-align: center;
	font-size: 4vw;
}


div.cell_text
{
	flex-grow:0;
	text-align:center;
	font-size: 2vw;
}

div.rotate
{
	transform: rotate(180deg);
}


div#action
{
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	height:100%;
	text-align: center;
}

div.action_text
{
	flex-grow:0;
	font-size: 10vw;
}

div#color_pick
{
	flex-grow:0;
	display:flex;
	width: 100%;
	justify-content: space-around;
	align-content: flex-start;
	align-items: center;
}

div#color_pick>div
{
	width: 10%;
	border: 1px solid #000000;
	border-radius: 4px;
	height: 10vw;
}

div.c_unk
{
	background-color: #ffffff;
	color: #000000;
}

div.c_civ
{
	background-color: #c1ab6a;
	color: #a5925b;
}

div.c_red
{
	background-color: #a84135;
	color: #843229;
}

div.c_blu
{
	background-color: #787ca0;
	color: #626584;
}

div.c_blk
{
	background-color: #444444;
	color: #333333;
}

div.close_action
{
	flex-grow:0;
	font-size: 6vh;
	line-height: 10vh;
	cursor: pointer;
	background-color: #dddddd;
	height: 10vh;
	justify-content: center;
	align-items: center;
}


div.cell.c_unk > div.rotate
{
	color: #aaaaaa;
}


div#selector
{
	display:flex;
	flex-direction: column;
	justify-content: space-around;
	height: 100vh;
	width: 100%;
	text-align: center;
	align-content: center;
}

div#selector>div
{
	border:1px solid #000000;
	border-radius:4px;
	padding:4px;
	margin:8px;
	height: 50%;
	font-size: 6vh;
	line-height: 40vh;
	cursor: pointer;
}

div#select_words
{
	background-color: #787ca0;
}

div#select_key
{
	background-color: #a84135;
}