@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i|Noto+Sans:400,700&subset=latin-ext');
DIV.Comment, MAIN ARTICLE  {font-family: Lora, Volkhov, Average, Freeserif, serif; font-variant-ligatures: none;}
DIV. Comment {font-size: 16px; line-height: 115%;}
FIGCAPTION, H1, H2, H3, H4, H5, H6, DIV.commentgroup>HEADER, .tag {font-family: "Noto Sans", "Segoe UI", sans-serif; text-rendering: optimizeLegibility; line-height: 1.1em;}
H1 {margin-right: auto; margin-left: auto;}
LI {line-height: 115%;}
BODY {
	background-color: #fffff0;
	padding-left: 0.25in;
	padding-right: 0.25in;
	max-width: 100%;
	text-rendering: geometricPrecision;
}

H1 {
	text-align: center;
}

A:link {
	color: blue;
}

A:visited {
	color: #083194;
}

A.term {
        color: blue;
        font-style: normal;
        text-decoration: none;
}

A:visited.term {
        color: blue;
        font-style: normal;
        text-decoration: none;
}


A.download {
	font-style: monospace;
}

A:link.extern {
        font-style: normal;
        font-family: "Noto Sans", sans-serif;
}

A:visited.extern {
        color: #524a18;
        font-style: normal;
        font-weight: 400;
        font-family: "Noto Sans", sans-serif;
}

A:hover {
	color:darkred;
}

SPAN.author {
	font-style: italic;
}

SPAN.editor {
	font-style: italic;
}

SPAN.date {
	font-style: italic;
}

DIV.menu, .fineprint, SPAN.navlink, SPAN.rateit, SPAN.shortcomment, SPAN.longcomment {
	font-family: "Noto Sans", "arial", "helvetica", "sans-serif";
	font-size: smaller;
}

.fineprint {
	font-family: "Noto Sans", "arial", "helvetica", "sans-serif";
	font-size: smaller;
}

SPAN.navfolder {
	font-family: "arial", "helvetica", "sans-serif";
	font-size: smaller;
}

SPAN.navlink {
	font-family: "arial", "helvetica", "sans-serif";
	font-size: smaller;
}

SPAN.rateit {
	font-weight: bold;
	color: green;
}

SPAN.shortcomment {
        font-size: 80%;
}

SPAN.longcomment {
        font-size: 70%;
}

SPAN.fixedfont {
        font-family: "Courier", "Courier New", "fixed";
}

SPAN.ratingtitle {
	font-size: larger;
}

SPAN.obsolete {
	text-decoration: line-through;
}
q {
  quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}
@media only screen and (max-width: 480px) {
	IMG {max-width: 480px;}
}
/*
body { background-color: olive; background-image: url('/cvp-background.png'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
*/
/*
.site-container {
  max-width: 980px;
  padding: 0 2% 0;
  margin: 0px auto;
  background: #fffff0;
}
*/
.mobile { display: none; }
@media screen {
	ASIDE a[href^='http']:not( [href*='chessvariants.com'] ):not( [href*='chessvariants.org'] ):after {content:url('');}
	MAIN>A[href^='http']:not( [href*='chessvariants.com'] ):not( [href*='chessvariants.org'] ):after {content:url('http://play.chessvariants.com/img/icon_external.gif');}
	MAIN A[href^='http://astore.amazon.']  {font-style: italic;}
	ASIDE {display: block-inline;}
}

ASIDE.middle, MAIN {max-width: 100%; margin-left: auto; margin-right: auto;}
ASIDE.leftcol, ASIDE.rightcol {display: none;}
MAIN ARTICLE {float: none; font-family: Lora, Volkhov, Georgia, FreeSerif, serif; font-size: 18px; font-variant-ligatures: none; overflow-x: auto; overflow-y: hidden; max-width: 100%; line-height: 130%;}
I, EM {font-family: inherit; font-style: italic;}
MAIN ARTICLE BLOCKQUOTE {font-size: 16px; line-height: 1.1em;}
:lang(ko), :lang(zh), :lang(ja), :lang(ja-jp) {font-family: "Noto Sans", sans-serif}
:lang(ko-Latn), :lang(zh-Latn), :lang(ja-jp-Latn), :lang(zh-yue-Latn) {font-family: inherit;}
.mobile { display: inline-block; }

@media screen and (min-width: 600px) {
	MAIN ARTICLE {font-size: 18px;}
}
@media screen and (orientation: portrait) {
	BODY {max-width: 98vw; margin: 1vw; padding: 0;}
}	
@media screen and (orientation: landscape) and (min-width: 961px) {
	BODY {max-width: 98vw; margin: 1vw; padding: 0;}
	ASIDE.middle, MAIN, BODY>HEADER {margin: 0; padding: 0;}
	MAIN ARTICLE {font-size: 18px;}
}
@media only screen and (orientation: landscape) and (min-width: 1241px) {
	ASIDE.middle, MAIN { max-width: 960px; max-width: calc(100% - 200px); margin-left: 1ex; margin-right: auto; overflow-x: auto;}
	ASIDE.rightcol { float:right; max-width:160px; text-align:right; display: inline-block; padding-top: 1ex;}
	.mobile { display: none; }
}
@media only screen and (orientation: landscape) and (min-width: 1331px) {
	ASIDE.middle, MAIN { max-width: 960px; max-width: calc(100% - 340px); margin-left: auto; margin-right: 1ex; overflow-x: auto;}
	ASIDE.leftcol { float:left; max-width: 300px; text-align:left; min-height:600px; height:600px; width: 300px; display: block; visibility: visible; padding-top: 1ex;}
	ASIDE.rightcol {display: none;}
}
@media only screen and (orientation: landscape) and (min-width: 1536px) {
	ASIDE.middle, MAIN { max-width: 960px; max-width: calc(100% - 600px); margin-left: 345px; margin-right: 330px; display:block; z-index:500000;}
	ASIDE.rightcol { float:right; max-width:300px; width: 300px; text-align:right; display: inline-block; padding-top: 1ex;}
}


@media print {
	.noprint {display: none}
	ASIDE, HEADER, FOOTER, NAV {display: none;}
	MAIN ARTICLE {width: 100%; font-size: 12pt;}
}
IMG {max-width: 98%; height:auto;}
DIV.comments {background-color: darkkhaki; width: 100%; margin-bottom: 1em;}
FIGURE {float: left; border: 0px #FFFFF0 solid;}
FIGCAPTION {background-color: darkkhaki; text-align:center; text-decoration:smallcaps; font-weight: bold; }
DIV.piece FIGURE, FIGURE.piece {float: left; display: table-cell; margin-right: 1ex; text-align:center; border-width: 0px; vertical-align: top;}
DIV.piece FIGURE FIGCAPTION, FIGURE.piece FIGCAPTION {background-color: darkkhaki; text-align:center; font-weight: bold; display: table-caption; caption-side: bottom; text-decoration: none; width:100%;}
DIV.piece P {display: table-cell; padding-top: 1em;}
DIV.piece {clear: both; float: none;}
BLOCKQUOTE { margin-left: 1em; padding-left: 1ex; line-height: 1.1em; font-size: 16px;}
DIV.Comment {border: 2px darkkhaki solid; background-color: beige; padding: 1ex; clear: both; overflow-y: hidden; clear: both; column-count: 1; display: flow-root;}
DIV.Comment BLOCKQUOTE { border-left: olive solid thick; margin-left: 1em; padding-left: 1ex;}
DIV.Comment HEADER {display: flex; justify-content: space-between; background-color: beige; margin: 0px; padding: 0 1em;}
DIV.Comment DIV {padding: 0 1em; margin: 0; background-color: beige;}
DIV.Comment FOOTER {display: flex; justify-content: flex-end; background-color: beige; margin: 0px; padding: 0 1em;}

TABLE.legend {font-size: initial; line-height: initial; clear: right;}
TABLE.legend TR TD {vertical-align: top; padding: 0px; margin: 0px;}
TABLE.legend TR TD H4 {margin: 0px; padding: 0px;}
TABLE.legend TR TD UL LI {margin-left: -20px; padding-left: 0px;}

ASIDE.rightcol {font-size: initial; line-height: initial;}
@viewport {
	width: device-width;
	zoom: 1;
}
.tag, .tag:link, .tag:visited {background-color: beige; border: thin olive solid; padding: 0 .5ex; font-weight: bold; text-decoration: none;}
.tag::before {content: '#'}
.deletetag {color: red; text-decoration: none;}

.okay {background-color: #303030; color: #B1FB17; display: table;}
.okay::before {content: "\002713\00a0"; font-weight: bold; display: table-cell; width: 2rem;}

.error {background-color: #303030; color: #F62217; display: table;}
.error::before {content: "\2297\00a0"; display: table-cell; width: 2rem;}

.warning {background-color: #303030; color: #FDFD17; display: table;}
.warning::before {content: "\0026A0\00a0"; display: table-cell; width: 2rem;}

.alertbox {margin: 1em; padding: 1em;}
.alertbox::before {font-size: 2em;}

.notice {background-color: #303030; color: plum; display: table;}
.notice::before {content: "\1f4cc\00a0"; display: table-cell; width: 2rem;}

.point {background-color: #303030; color: beige; display: table;}
.point::before {content: "\261E"; font-size: 150%; display: table-cell; width: 2rem;}

.blackbox {background-color: #303030; color: beige; padding: 1ex; width: 100%;}
.blackbox>HEADER {background-color: beige; color: black; font-weight: bold;}
.blackbox A:link, .okay A:link, .error A:link, .warning A:link, .notice A.link {color: #BDEDFF;}
.blackbox A:visited, .okay A:visited, .error A:visited, .warning A:visited, .notice A.link {color: #FFBDED;}
.blackbox BUTTON {color: blue; font-weight: bold;}
.blackbox P {margin: 0; padding: 0;}

DIV.container {display: inline-block; flex-flow: row wrap; max-width: 100%;}
DIV.container DIV.blackbox {flex-grow: 1;}