@charset "UTF-8";

body {
	height: 100%;
	background-color: white;
	font-size: 14px;
}

.headerBlock {
	position: absolute;
	width: 100%; 
	height: 40px;
	left: 0;
	top: 0;
	z-index: 2;
}

.headerBlock div {
	text-align: right;
	padding: 6px;
}

.siteLogo {
	display:block;
	margin:auto;
}

.menuBlock {
	position: fixed;
	height: 100%;
	width: 260px;
	padding: 3px;
	z-index: 3;
	left: 0px;
	top: 0px;
	background: linear-gradient(-45deg, darkgray, white);
	overflow: scroll;
	align-content: baseline;
	border-right: 1px solid black;
}

.menuItemFrame {
	background-image: linear-gradient(to right, gray, darkgrey);
	padding: 2px;
	margin: 4px;
	border-radius: 5px;
}

.menuItem {
	color: navy;
	font-size: 18px;
	background-image: radial-gradient(at bottom right, white, lightgrey);
	text-align: center;
	display: block;
	margin: auto;
	width: 95%;
	border-radius: 5px;
}

.menuItem:hover {
	background-image: radial-gradient(at bottom right, white, skyblue);
}

.menuItem:active {
	background-image: radial-gradient(at bottom right, white, khaki);
}

.mainBlock {
	float: left; 
	position : relative;
	padding: 10px;
	margin-left: 260px;
	top: 50px;
	overflow: hidden;
	/* display: block; */
}

.notationText {
	color: rgb(119, 118, 123);
	font-size: 12px;
	margin: 0px;
}

.formFieldCaption {
	font-weight: bold;
}

.errorText {
	color: red;
}

h1 {
	margin-bottom: 0.5em;
	font-size: 30px;
}

h1 + .notationText {
	margin-top: -1em;
}

h2 {
	margin: 1px;
}

.ratingTable {
	border-collapse: collapse;
	border: 1px solid black;
	background: linear-gradient(to right,white, Cornsilk);
}

.ratingTable td {
	border: 1px solid black;
	text-align: center;
	min-width: 100px;
	padding: 2px;
}

.ratingTable th {
	border: 1px solid black;
	border-bottom: medium solid black;
	font-weight: bold;
	min-width: 100px;
	padding: 2px;
}

.strategyTable {
	border-collapse: collapse;
	border: 1px solid black;
	background: linear-gradient(to right,white, Cornsilk);
}

.strategyTable td {
	border: 1px solid black;
	text-align: center;
	min-width: 100px;
	padding: 4px;
}

.strategyTable th {
	border: 1px solid black;
	border-bottom: medium solid black;
	font-weight: bold;
	min-width: 100px;
	padding: 4px;
}

.strategyTable td.langInfo {
	text-align: left;
}

.strategyForm {
	display: inline-block;
    border: 1px solid black;
    padding: 10px;
    border-top-right-radius: 7px;
    background: linear-gradient(to right,white, Cornsilk);
}

.signInForm {
	display: inline-block;
	border: 1px solid black;
    padding: 10px;
    border-top-right-radius: 7px;
    background: linear-gradient(to right,white, lightgray);
}

.registerForm {
	display: inline-block;
	border: 1px solid black;
    padding: 10px;
    border-top-right-radius: 7px;
    background: linear-gradient(to right,white, lightgray);
}

.editProfileGroup {
	display: inline-block;
}

.editProfileForm {
	display: inline-block;
	border: 1px solid black;
    padding: 10px;
    min-width: 100%;
    border-top-right-radius: 7px;
    background: linear-gradient(to right,white, lightgray);
}

.editProfileForm table {
	width: 100%;
}

.createGameForm {
	display: inline-block;
	border: 1px solid black;
    padding: 10px;
    border-top-right-radius: 7px;
    background: linear-gradient(to right,white, Cornsilk);
}

.createGameForm select {
	min-width: 250px;
}

.strategyTable .pendingStatus,
.strategyTable .quStatus,
.strategyTable .cgStatus {
    background-color: yellow;
    padding: 5px;
    border: 2px khaki solid;
    border-radius: 10px;
}

.strategyTable .okStatus {
    background-color: lightgreen;
    padding: 5px;
    border: 2px green solid;
    border-radius: 10px;
}

.strategyTable .ceStatus,
.strategyTable .sleStatus,
.strategyTable .caStatus {
    background-color: salmon;
    padding: 5px;
    border: 2px darkred solid;
    border-radius: 10px;
}

.strategyTable .rjStatus {
    background-color: orange;
    padding: 5px;
    border: 2px darkorange solid;
    border-radius: 10px;
}

.gameTable {
	border-collapse: collapse;
	border: 1px solid black;
	background: linear-gradient(to right,white, Cornsilk);
}

.gameTable td {
	border: 1px solid black;
	text-align: center;
	min-width: 100px;
	padding: 4px;
}

.gameTable .gameModeCell {
	word-wrap: break-word;
	width: 100px;
}

.gameTable th {
	border: 1px solid black;
	border-bottom: medium solid black;
	font-weight: bold;
	min-width: 100px;
	padding: 4px;
}

.ratingUp {
	color: green;
}

.ratingSame {
	color: darkgrey;
}

.ratingDown {
	color: red;
}

.gameInfoTable {
	border-collapse: collapse;
	border: 1px solid black;
	background: linear-gradient(to right,white, Cornsilk);
}

.playerColorBox {
	width: 16px;
	height: 16px;
	border: 1px solid black;
	display: inline-block;
	vertical-align: middle;
}

.playerStyle0 {
	background-color: #F61600;
}

.playerStyle1 {
	background-color: #43c905;
}

.playerStyle2 {
	background-color: #c9c244;
}

.playerStyle3 {
	background-color: #1f53e3 /* #3584E4 */;
}

.gameInfoTable td.langInfo {
	min-width: auto;
}

.gameInfoTable td {
	border: 1px solid black;
	text-align: center;
	min-width: 100px;
	padding: 4px;
}

.gameInfoTable td.playerInfo {
	text-align: left;
}

.gameInfoTable th {
	border: 1px solid black;
	border-bottom: medium solid black;
	font-weight: bold;
	min-width: 100px;
	padding: 4px;
}

.ratingCanvasStyle {
	width: 800px;
	height: 480px;
	background-color: #dedede;
}

.gameCodeBlock {
	border: 1px;
	background-color: #dedede;
}

tr > tr td.gameFirstRow {
	border-top: double;
}

td.gameLastRow {
	border-bottom: double;
}

.languageIcon {
	width: 48px;
	height: 48px;
}

.smallLanguageIcon {
	width: 32px;
	height: 32px;
}

.ratingPopupDiv {
	background: white;
	border: black solid;
}

.ratingPopupDiv th {
	border-bottom: medium solid black;
	vertical-align: bottom;
}

.ratingPopupDiv td.scoreCol {
	text-align: center;
}

.ratingPopupDiv td.ratingCol {
	text-align: center;
}



/* New Game List Style */
.gameContainer {
	display: flex;
	flex-wrap: wrap;
}

.gameBlock {
	margin: 2px;
	border: 3pt solid lightblue;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	
	/*position: absolute;*/
	width: 400px;
}

.gameInfoDiv {
	flex-grow: 0;
	display: flex;
	border-bottom: 3pt solid lightblue;
	width: 100%;
}

.gameTitle {
	font-weight: bold;
	text-align: center;
}

.gameDescriptionRow {
	font-weight: bold;
}

.gameDescriptionValue {
	font-weight: normal;
}

.gameTableDiv {
	flex-grow: 1;
	padding: 5pt 3pt 8pt;
}

.gameLinkDiv {
	flex-grow: 0;
	text-align: right;
	padding: 2px;
	border-top: 3pt solid lightblue;
}

.gameBlock table {
	border-collapse: collapse;
	width: 100%;
}

.gameBlock td {
	border: 3pt solid lightblue;
}

.gameBlock td:first-child {
	border-left: none;
	border-right: none;
}

.gameBlock td:nth-child(2) {
	border-left: none;
}

.gameBlock td:last-child {
	border-right: none;
}

.gameBlock tr:first-of-type td {
	border-top: none;
}

.gameBlock tr:last-of-type td {
	border-bottom: none;
}

.gameBlock .gameTableTitle td {
	text-align: center;
	font-weight: bold;
	border-bottom: 3pt solid lightblue;
}

.gameScore, .gameRatingDelta {
	width: 4rem;
	text-align: center;
}

.gameParticipantStrategy::before {
	content: "[ ";
}

.gameParticipantStrategy::after {
	content: " ]";
}

.gamePlayerColor {
	vertical-align: top;
	width: 18px;
}

.gamePlayer {
	word-wrap: anywhere;
}

.gameId {
	font-weight: bold;
}

.gameTypeBlock {
	display: inline-block;
	padding: 5px 5px 0px 5px;
	height: 100%;
}

.gameTypeBlock img {
/*	display: block;*/
    margin: auto auto;
	width: 64px;
	height: 64px;
	border: 1pt solid black;
}

.gameDescriptionBlock {
	display: inline-block;
	width: 100%;
	height: 100%;
	border-left: 3pt solid lightblue;
}

.gameTypeDescription {
	text-align: center;
}