/* global start */

/* global config */

:root {
	--header-h: 33px; /* header height */
	--footer-h: 50px; /* footer height */
}

/* Reset / base */

*, *::before, *::after {
	box-sizing: border-box;
}

/* anchors */

a[href^='https://']:after {
	content: url('../IMGS/256.svg');
	margin: 0 3px;
	/* filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.9)) */
}

a[href^='http://']:after {
	content: url('../IMGS/256.svg');
	margin: 0 3px;
	/* filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.9)) */
}

a:link {
	color: #555555;
	text-decoration: none;
	border-bottom: 1px dotted #555555;
	padding-bottom: 1px;
}

a:link.playButton {
	border-bottom: 0px dotted #555555;
}

a:hover.playButton {
	border-top: 0px dotted #555555;
}

a:visited {
	text-decoration: none;
	border-bottom: 1px dotted #555555;
	color: #555555
}

a:hover {
	color: #555555;
	border-top: 1px dashed #555555;
	border-bottom: 1px dashed #555555;
	padding-bottom: 1px;
}

/* container tags */

html {
	height: 100%;
}

html,
body {
	scrollbar-width: none;
	margin: 0;
	max-width: 100%;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
	/* 高度回退链：这几条在不同年代的浏览器里各有用处，全部保留。
	   height: 100%;                  老浏览器保底（html 已设 height:100%）
	   height: -webkit-fill-available;  老 iOS Safari（支持 100dvh 之前）
	   height: 100dvh;                 现代推荐：随手机地址栏伸缩不跳动  */
	height: 100%;
	height: -webkit-fill-available;
	height: 100dvh;
	padding: 0px;

	display: flex;
	flex-direction: column;
	min-width: 0;                   /* important for flex layouts */

	background: #e1d8cf;
	color: #555555;
	line-height: 180%;              /* 全站统一行高 */
	font-family: "MerriRegular", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	font-size: 1em;
	/* 过时/重复（保留备查）：
	   height: 100vh;              与 html{height:100%}+body{height:100%} 等价，可省
	   line-height: 180%;          与上面的 line-height 重复                */
}

/* 外壳页（body 直接含 .storyContainer）整页不应滚动：正文在 iframe 内部滚动。
   注意 :has() 需较新浏览器（Chrome 105+ / Safari 15.4+），老浏览器会忽略本条。 */
html:has(> body > .storyContainer) {
	overflow: hidden;
}

body.twoEmBody {
	padding: 4em 2em;
}

body > * {
  min-width: 0;
  max-width: 100%;
} /* check the flex children */

/* line properties */

p {
	margin: 0;
	padding: 0;
	text-indent: 1em;
}

tr, td {
	padding: 0px;
}

hr {
	border: 0;
	height: 1px;
	margin: 1em 10%;
	background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}



/* character properties */

i, em {
	font-family: MerriItalic;
	font-style: normal;
}

sup {
	font-style: normal;
	font-family: times new roman;
	font-size: 70%;
}

/* customized */

div.nonDisplay {
	display: none;
}

/* container end */

/* header and footer start */

/* Header */

/* timer part start */

.headerBar {
	display: flex;
	flex: 0 0 auto;                 /* header keeps its size; never shrinks */
	align-items: center;
	flex-wrap: wrap;
	gap: 0px 10px;
	height: var(--header-h);         /* 只保留这一条；height:100% 已过时，见下方注释 */
	padding: 3px 10px;
	margin-top: 0px;
	/* -webkit-box-shadow: ... —— 过时前缀，现代浏览器都支持无前缀 box-shadow */
	box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.22);
	z-index: 4;
	}

div.buttonContainer {
	display: flex;
	gap: 0px 10px;
	margin-top: 0px;
}

button.startButton {
	color: #f7f1f1;
	background: #2e6e5e; 
}

button.stopButton {
	color: #f7f1f1;
	background: #2e6e5e; 
}

.btn {
	width: 40px;
	min-width: 96px;
	padding: 5px 0px;
	border: none;
	border-radius: 4px;
	font-size: 90%;
	font-family: MerriRegular;
	cursor: pointer;
	}

.btn:active { transform: scale(0.97); }

.btn:hover { opacity: 0.88; }

div.timeDisplay {
	font-family: MerriLightItalic;
	font-size: 90%;
	color: #6b5f52;
	letter-spacing: 1px;
	margin-left: auto;
}

/* timer part end */

/* Stats Bar start */

.statsBar {
	display: flex;
	flex: 0 0 auto;                 /* stats bar keeps its size; never shrinks */
	flex-wrap: wrap;
	height: 2rem;
	gap: 2px 6px;
	padding: 3px 8px 3px 8px;
	font-size: 10px;
	font-family: MerriRegular;
	/* -webkit-box-shadow: ... —— 过时前缀，见 headerBar 注释 */
	box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.22);
	z-index: 6;
}

.stat {
	font-family: MerriLightItalic;
	color: #6b5f52;
}

/* Stats Bar end */

/* Story Body start */

.storyContainer {
	flex: 1 1 0%;                   /* grows to fill leftover space between header and footer */
	min-height: 0;                  /* allows shrink; key to stretch in a flex column */
	min-width: 0;                   /* important for flex layouts */
	position: relative;             /* positioning base for the absolutely-filled iframe */
	overflow: hidden;               /* no outer scroll; iframe scrolls internally */
} /* Small screens: reduce header/footer height */

.storyContainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	border: 0px;

	z-index: 1;
}

iframe.storyBody {
	padding: 2em;
	/* 书页边距：缩小 iframe 内部视口，四周形成留白 */
	/* 旧行已确认无效，注释保留：写在 <iframe> 元素上的 overflow 并不会产生滚动条。
	   iframe 的滚动条由其“内部文档”（即 .html 正文页）控制，是浏览器默认行为。 */
	/* overflow: hidden; */
	/* overflow-y: scroll; */
	/* -webkit-overflow-scrolling: touch; */
}

.rtProgress {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	z-index: 2;
	}

.rtProgressBar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #2e6e5e, #4d9b77);
	transition: width .2s ease-out;
	}

/* Story Body end */

/* Footer start */

div.footerBar {
	padding: 8px 12px;
	display: flex;
	flex: 0 0 auto;                 /* footer keeps its size; never shrinks */
	align-items: center;
	width: 100%;
	height: var(--footer-h);
	margin-bottom: 0;
}

audio {
	height: var(--footer-h);
	height: 2em;
	margin-bottom: 1em;
	width: 100%;
}

/* Footer end */

/* header and footer end */


/* fact box start  */

div.factBox {
	border: 1px solid white;
	padding: 20px;
	border-radius: 10px;
	margin: 2em 1em 0.8em 0em;
	box-shadow: 3px 3px 5px #888888;
	width: 180px;
}



p.factBox {
	text-indent: 0px;
	padding-top: 0em;
	padding-bottom: 0px;
	margin-top: 0em;
	font-family: MerriBold;
	}

p.factBoxContents {
	text-indent: -1em;
	margin-left: 2em;
}

/* fact box end  */


/* header start */

.bigTitle, .storyTitle, h1 {
	text-align: center;
	text-indent: 0em;
	font-family: MerriBold;
	line-height: 160%;
	font-size: 1em;
	margin: 1em 0em 0.5em 0em;
}

.easyReadingSubTitle, .subTitle {
	text-indent: 0px;
	text-align: center;
	font-family: MerriBold;
	margin-bottom: 1em;
}


/* the following 3 styles can be applied to page contents */
.hd00 {
	margin-left: 1em;
	text-indent: -1em;
	margin-top: 1em;
	font-family: MerriBold;
}

.hd01 {
	margin-left: 2em;
	text-indent: -1em;
	font-family: MerriItalic;
}

.hd02 {
	margin-left: 3em;
	text-indent: -1em;
}

.hd03 {
	margin-left: 4em;
	text-indent: -1em;
}

/* header end */


/* unique body contents start */


.storyAuthor {
	text-indent: 0px;
	text-align: right;
	font-family: MerriItalic;
	margin-right: 2em;
}

.storyAuthor::before {
	content: url('../IMGS/triangleSilver.svg');
	padding-right: 8px;
}

.styleItalic {
	font-family: MerriItalic;
}
.poem_line {
	text-indent: -20px;
	margin: 0px 0px 0px 20px;
	font-family: MerriItalic;
	font-size: 0.9em;
	}

.danglingIndent {
	margin-left: 2em;
	text-indent: -2em;
}

.letter {
	font-family: 'Typewriter';
}

.i_ar {
	text-transform: lowercase;
	text-align: right;
	font-family: MerriItalic;
}

.c {
	text-indent: 0px;
	text-align: center;
}


.z, .zeroIndent {
	text-indent: 0px;
}

.r {
	text-align: right;
}

.centeredItalic {
	text-indent: 0px;
	text-align: center;
	font-family: MerriItalic;
}

.centeredBold {
	text-indent: 0px;
	text-align: center;
	font-family: MerriBold;
}


.stems {
	margin-left: 3em;
	text-indent: -1.3em;
	font-family: MerriBold;
}

.alternateTDColoring tr { text-align: center }

.alternateTDColoring tr:nth-child(odd) {
	background: #f9f7f7;
}

.alternateTDColoring tr:nth-child(even) {
	background: #e1d8cf;
}



.previewBox {
	border: 1px solid black;
	padding: 16px;
	margin: 1em 0em;
}


.previewQuiz {
	text-indent: 0px;
	font-family: MerriBold;
}

.exampleSentence {
	font-family: MerriItalic;
	text-indent: -1em;
	margin-left: 3em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}


.examples {
	font-family: MerriItalic;
	font-family: MerriBold;
	text-indent: 0px;
	margin: 1em 0em;
}


/* unique body contents end */







/* global character styles start */

.terms {
	font-family: MerriBold;
}

.ipa {
	font-family: NicksIPA;
	/* font-size: 90%; */
}


.smallCapitals {
	font-variant: small-caps;
}

.dropCaps {
	float: left;
	font-size: 3em;
	padding-top: 12px;
	padding-right: 2px;
}

/* global character styles end */


/* font-face definition start; global properties */

@font-face {
	font-family: Typewriter;
	src: url('../../FONTS/English/Tox Typewriter.woff2') format('woff2');
}

@font-face {
	font-family: courierNew;
	src: url('../../FONTS/English/cour.woff2') format('woff2');
}

@font-face {
	font-family: FixedSys;
	src: url('../../FONTS/English/FSEX300.woff2') format('woff2');
}

@font-face {
	font-family: MerriRegular;
	src: url('../../FONTS/English/MerriweatherSans-Regular.woff2') format('woff2');
}

@font-face {
	font-family: MerriLight;
	src: url('../../FONTS/English/MerriweatherSans-Light.woff2') format('woff2');
}

@font-face {
	font-family: MerriLightItalic;
	src: url('../../FONTS/English/MerriweatherSans-LightItalic.woff2') format('woff2');
}

@font-face {
	font-family: MerriBold;
	src: url('../../FONTS/English/MerriweatherSans-Bold.woff2') format('woff2');
}


@font-face {
	font-family: MerriItalic;
	src: url('../../FONTS/English/MerriweatherSans-Italic.woff2') format('woff2');
}

@font-face {
	font-family: MerriBoldItalic;
	src: url('../../FONTS/English/MerriweatherSans-BoldItalic.woff2') format('woff2');
}

@font-face {
	font-family: NickxIPA;
	src: url('../../FONTS/English/NICKXIPA.woff2') format('woff2');
}

@font-face {
	font-family: EnglishBrush;
	src: url('../../FONTS/English/segoeprb.woff2') format('woff2');
}

@font-face {
	font-family: IMFE;
	src: url('../../FONTS/English/FeENrm2.woff2') format('woff2');
}

@font-face {
	font-family: IMFEItalic;
	src: url('../../FONTS/English/FeENit2.woff2') format('woff2');
}

@font-face {
	font-family: handwriting;
	src: url('../../FONTS/English/bradleyhanditcttbold.woff') format('woff'), local('Bradley Hand ITC TT');
}

/* font-face definition end; global properties */




/* college english start */

.historyBack {
	font-family: MerriItalic;
	text-align: right;
	font-variant: small-caps;
	cursor: pointer;
	margin-top: 1em;
}

/* thesaurus */

.thesaurusSubject {
	font-family: MerriBold;
	text-indent: 0px;
	margin-top: 10px;
	/* color: yellow; */
}

/* thesaurus */

.entry {
	font-family: MerriBold;
	text-indent: 0em;
	margin-left: 1em;
}

/* thesaurus */

.definitions {
	margin-left: 2em;
	text-indent: 0em;
}

/* thesaurus definition */

.pos {
	font-size: 85%;
	font-variant: small-caps;
	color: black;
	background: lightgrey;
	padding: 3px 8px 5px 8px;
}

/* thesaurus pos */

/* target start */

.about {
	text-indent: 0px;
	font-family: MerriBold;
}

.firstEntryContents {
	text-indent: 0px;
	font-family: MerriBold;
}

.entryContents {
	text-indent: 0px;
	font-family: MerriBold;
	margin-top: 1em;
}

.syn {
	border: 1px solid black;
	border-radius: 3px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 3px;
	font-variant: small-caps;
}

div.aboutContentsBorder {
	border: 1px solid white;
	padding: 20px;
	border-radius: 10px;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 1em;
	box-shadow: 3px 3px 5px #888888;
}

div.embossed {
	border: 1px solid white;
	padding: 20px;
	border-radius: 10px;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	box-shadow: 3px 3px 5px #888888;
}

/* target end */

/* college english end */




/* family album usa start */

.brac {
	font-size: 80%;
	font-family: MerriItalic;
}

.vMiddle {
	vertical-align: middle;
}

.expc {
	font-family: MerriItalic;
}

.exp {
	font-family: MerriItalic;
}

.tdc {
	width: 75%;
	text-align: left;
}


.roles {
	text-align: right;
	white-space: nowrap;
	vertical-align: baseline;
	font-family: MerriItalic;
	padding-right: 3px;
}

/* family album usa end */