*{
	font-family: "Fantasque Sans Mono", "GamerGlyphs";
}

body {

	background-color: var(--color-pagebg);

}

table.nav{

	width: 95%;
/*	position: absolute;*/
/*	top: 1em;*/
/*	left: 2.5%;*/
	margin-top: 1em;
	margin-left: 2.5%;

}

table.board{

	background-color: var(--color-tablebg);
	outline: 1px solid var(--color-blackfg);
	width: 95%;
	margin: auto;

}

td[class^="cell"]{

	outline: 1px solid var(--color-blackfg);
	height: 2em;
	width: 2em;
	margin: auto;
	text-align: center;
	vertical-align: text-top;
	padding: 1em;
	font-size: 1.5em;

}

td.labeltop{

	outline: 1px solid var(--color-blackfg);
	width: 2em;
	height: initial;
	text-align: center;
	vertical-align: text-bottom;
	padding-top: 1em;
	padding-bottom: .5em;
	font-size: .75em;
}

td.labelbottom{

	outline: 1px solid var(--color-blackfg);
	width: 2em;
	height: initial;
	text-align: center;
	vertical-align: text-top;
	padding-top: .5em;
	padding-bottom: 1em;
	font-size: .75em;
}

table.info{

	text-align: left;

}

table.info td[class$=label]{

	vertical-align: text-top;

}

td.newgame{

	text-align: right;

}

td.sameboard{

	text-align: left;

}

div.infobox{

	width: 95%;
	margin: auto;
	padding: .75em;
	background-color: var(--color-infobg);

}

div.debugout{

	background-color: #003B11;
	outline: 2px inset var(--color-blackfg);
	width: 95%;
	position: absolute;
	bottom: 3em;
	left: 2.5%;
	height: 5.5em;
	overflow-y: scroll;

}

button{

	outline-style: solid;
	outline-width: var(--card-button-border);
	outline-color: var(--color-selectedoutline);
	border-width: 0px;
	font-size: 1em;
	display: inline-block;

}

button.red{

	color: var(--color-redfg);

}

button.black{

	color: var(--color-blackfg);

}

form{

	display: inline;

}

span.nonbuttoncard{

	--card-button-border: 0px;

}

span.red{

	color: var(--color-redfg);

}

span.black{

	color: var(--color-blackfg);

}

span.move-tableau{

	color: var(--color-blackfg);
	background-color: var(--color-tablebg);

}

span.move-tableau.second{

	color: var(--color-blackfg);
	background-color: var(--color-borderbg);

}

span.move-q{

	color: var(--color-qfg);
	background-color: var(--color-blackbg);

}

span.move-w{

	color: var(--color-wfg);
	background-color: var(--color-blackbg);

}

span.move-e{

	color: var(--color-efg);
	background-color: var(--color-blackbg);

}

span.move-r{

	color: var(--color-rfg);
	background-color: var(--color-blackbg);

}

span.move-s{

	color: var(--color-blackfg);
	background-color: var(--color-whitebg);

}

span.move-h{

	color: var(--color-redfg);
	background-color: var(--color-whitebg);

}

span.move-c{

	color: var(--color-blackfg);
	background-color: var(--color-whitebg);

}

span.move-d{

	color: var(--color-redfg);
	background-color: var(--color-whitebg);

}

.cardchar{

	display: var(--show-cardchar);

}

.card{

	outline: 0;
	display: inline-block;
	width: calc(var(--card-width) * var(--card-scalefactor));
	height: calc(var(--card-height) * var(--card-scalefactor));
	image-rendering: pixelated;
	background-image: var(--card-spritesheet);
	background-repeat: no-repeat;
	background-clip: padding-box;
	background-origin: padding-box;
	background-size: var(--card-scalefactor-pct);
/*	background-position: calc(
			var(--card-offset-x) * calc(
				var(--card-width) * var(--card-scalefactor)
			) * -1 + var(--card-offset-x) * 1.5 * var(--card-button-border)
		)
		calc(
			var(--card-offset-y) * calc(
				var(--card-height) * var(--card-scalefactor)
			) * -1 + var(--card-offset-y) * 2.4 * var(--card-button-border)
		);*/

	background-position: calc(
			var(--card-offset-x) * calc(
				var(--card-width) * var(--card-scalefactor)
			) * -1
		)
		calc(
			var(--card-offset-y) * calc(
				var(--card-height) * var(--card-scalefactor)
			) * -1
		);

}

.spades{

	--card-offset-x: 0;

}

.hearts{

	--card-offset-x: 1;

}

.clubs{

	--card-offset-x: 2;

}

.diamonds{

	--card-offset-x: 3;

}

.r0{

	--card-offset-y: 0;

}

.r1{

	--card-offset-y: 1;

}

.r2{

	--card-offset-y: 2;

}

.r3{

	--card-offset-y: 3;

}

.r4{

	--card-offset-y: 4;

}

.r5{

	--card-offset-y: 5;

}

.r6{

	--card-offset-y: 6;

}

.r7{

	--card-offset-y: 7;

}

.r8{

	--card-offset-y: 8;

}

.r9{

	--card-offset-y: 9;

}

.r10{

	--card-offset-y: 10;

}

.r11{

	--card-offset-y: 11;

}

.r12{

	--card-offset-y: 12;

}

.r16{

	--card-offset-x: var(--blank-sprite-x);
	--card-offset-y: var(--blank-sprite-y);

}

.tableau .card{

	position: relative;
	top: calc(var(--stack-height) * var(--card-offset));

}

.tableau .buttoncard{

	display: inline-block;
	position: relative;
	--card-pos: calc(.66 * var(--card-offset));
	top: var(--card-pos);

}