@charset "utf-8";
/* CSS Document */
:root {
	--backcolor: #fff;
	--titlecolor: #99dfd9;
	--rulecolor: #538d88;
	--h1size: 1.75em;
	--serifsc: "Songti SC","Times New Roman",Times,serif;
	--sanssc: "PingFang SC","Helvetica Neue",Arial,sans-serif;
}
/* @font-face {
	font-family: "ChineseFont";
	src: url("https://sharpgiving.com/SuShi/fonts/Kaiti.ttf");
} */
div.image {
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
}
span.title {
	font-family: "STKaitiTC-Bold", var(--serif);
}
span.title0 {
	display: block;
	font-size: 4em;
	font-size: 10vw;
	line-height: 90%;
	margin-top: 0;
	margin-bottom: 0;
	letter-spacing: -.05em;
}
.outlined {
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
span.title1 {
	display: block;
	color: var(--titlecolor);
	font-size: 4em;
	font-size: 10vw;
	line-height: 90%;
	margin-top: 0;
	margin-bottom: 0;
}
span.byTom {
	display: block;
   font-family: var(--sans);
	font-size: 2.5em;
   font-size: max(1em, 3.5vw);
	font-style: italic;
	font-weight: 400;
}
h1.toctitle {
	text-align: left;
	font-family: var(--serif);
	font-style: italic;
	color: var(--titlecolor, #000);
	margin-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--rulecolor, #000);
	margin-bottom: 5px;
	letter-spacing: .1em;
	font-weight: 550;
}
span.poemtitle {
	display: inline-block;
	font-family: var(--serif);
	font-size: 1.1em;
	font-style: italic;
	font-weight: 700;
	line-height: 1.5;
   min-width: 14em;
}
span.zhs-title {
    font-family: var(--sans);
    font-size: .9em;
    padding-left: 5em;
    text-indent: -1em;
}
span.language {
	float: right;
	vertical-align: top;
}
img.cover {
	width: 75%;
	/* border: solid #000 4px; */
}
img.conver {
	width: 33%;
	/* border: solid #000 2px; */
}
span.viewed {
	color: var(--rulecolor);
}
.smallcaps {
	font-variant: small-caps;
}

li.sectionhead {
	display: block;
	margin-top: 1.5em;
}
li.sectionhead span {
	font-weight: 700;
	letter-spacing: .2rem;
	text-decoration: underline;
	color: var(--rulecolor);
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}
div.columncontainer {
	display: flex;
	flex-direction: row;
	margin-left: 2em;
	text-indent: -2em;
	margin-top: 0;
	margin-bottom: 0;
}
div.column50 {
	flex: 50%;
	margin-right: 4em;
}
@media screen and (max-width: 850px) {
	div.columncontainer {
		display: flex;
		flex-direction: column;
	}
	div.column50 {
		flex: 100%;
		margin-right: 1em;
	}
}
h1.bothtitle-sc {
   text-align: left;
	font-family: var(--serifsc);
	/* font-style: italic; */
	font-size: var(--h1size, 1.75em);
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	page-break-before: auto;
}
h1.bothtitle {
   text-align: left;
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--h1size, 1.75em);
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	page-break-before: auto;
}
span.attribution {
	display: block;
   font-family: var(--sans);
	font-size: 2em;
   font-size: max(1em, 3vw);
	font-style: normal;
	font-weight: 400;
	margin-top: .5em;
}
span.author {
	display: block;
	font-size: .55em;
	font-style: normal;
	font-weight: 400;
	margin-left: 8em;
}
p.poem-sc {
	font-family: var(--sanssc);
	font-size: 1em;
	margin-left: 2em;
	margin-top: 0;
	padding-left: 2em;
	text-indent: -2em;
	margin-right: 0;
	letter-spacing: .04em;
	margin-bottom: 22pt;
}
p.both-sc {
	font-family: var(--sanssc);
	font-size: 1em;
	margin-left: 2em;
	margin-top: 0;
	/* padding-left: 2em; */
	text-indent: -2em;
	margin-right: 0;
	letter-spacing: .04em;
	margin-bottom: 22pt;
}
p.both {
	font-family: var(--sans);
	font-size: 1em;
	margin-left: 2em;
	margin-top: 0;
	/* padding-left: 2em; */
	text-indent: -2em;
	margin-right: 0;
	letter-spacing: .04em;
	margin-bottom: 22pt;
}
span.rtl {
	direction: rtl;
}
span.bio {
   display: block;
   font-family: var(--serif);
   padding-left: 3em;
   text-indent: 0em;
}
span.intro {
	display: block;
	text-align: left;
	margin-top: .7em;
	padding-bottom: .7em;
	text-indent: 0;
	font-style: italic;
}
ol li {
	font-family: var(--serif);
}
span.context {
	display: block;
	margin-top: 1em;
	margin-left: 2em;
	font-style: italic;
	font-size: 90%;
	text-indent: 0;
}
span.scnumber {
	margin-top: .7em;
	margin-left: 4em;
	margin-bottom: .7em;
	font-weight: 700;
}
span.literalnumber {
	margin-top: .7em;
	margin-left: 6em;
	margin-bottom: .7em;
	font-weight: 700;
}
span.enumber {
	margin-top: .7em;
	margin-left: 6em;
}
/* https://codeconvey.com/pure-css-popover-on-hover/ */
div.infobox  {
	position: relative;
	display: block;
	transform: translate(0px, -15px); 
}
div.infohtml {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	left: -150px;
	transform: translate(0, 10px);
	background-color: #dfdfdf;
	padding-left: .3em;
	padding-right: .3em;
	margin: 0;
	border: solid 1px #000;
	width: max(300px, 50vw);
}
div.infobox:hover div.infohtml {
	z-index: 10;
	opacity: 1;
	visibility: visible;
	transform: translate(150px, 0);
}
p.info, ol.info {
	margin-block-start: .3em;
	margin-block-end: .3em;
}