/* global start */

	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: #333333;
	    text-decoration: none;
	    border-bottom: 1px dotted #333333;
	    padding-bottom: 1px;
	}

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

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

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

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

	body {
	    background: #e7e1da;
	    color: #333333;
	    font-family: Merri, heiTiMy;
	    font-size: 1em;
	    line-height: 180%;
	    margin-bottom: 2em;
	    padding: 1em;
	    /* background: #007b91; */
	    /* background: #DD4814;
	/* true ubuntu */
	    /* background: #e7e1da; */
	    /* background: #E95420;
	/* ubuntu bright */
	    /* hyphenate-limit-chars: 5 2 2; */
	    /* hyphens: auto; */
	    /* -moz-hyphenate-limit-chars: 5 2 2; */
	    /* -moz-hyphens: auto; */
	    /* -ms-hyphenate-limit-chars: 5 2 2; */
	    /* -ms-hyphens: auto; */
	    /* text-align: justify; */
	    /* text-justify: newspaper; */
	    /* -webkit-hyphenate-limit-chars: 5 2 2; */
	    /* -webkit-hyphens: auto; */
	}

	p {
	    text-indent: 2em;
	    line-height: 180%;
	    margin: 0em;
	}

	img {
	    filter: opacity(.7);
	    -webkit-filter: opacity(.7);
	    margin-top: 1em;
	}

	th {
	    border: 0px;
	    padding: 0px 8px;
	    font-family: MerriBold;
	    line-height: 180%;
	    font-weight: normal;
	}

	td {
	    border: 0px;
	    padding: 0px 2px;
	    line-height: 180%;
	    vertical-align: baseline;
	    font-family: Merri, fangSongMy;
	}

	table {
	    border: 0px solid #333333;
	    border-collapse: collapse;
	    margin: 1em;
	}

	.cTable {
	    border-top: 3px double #333333;
	    border-bottom: 3px double #333333;
	}

	.cTH {
	    border: 1px solid #333333;
	    padding: 3px 5px;
	    color: #ffffff;
	    background: #333333;
	}

	.cTDLeft {
	    border-left: 0px;
	    border-right: 1px solid #333333;
	    border-bottom: 1px solid #333333;
	    padding: 3px 5px;
	}

	.cTDRight {
	    border-right: 0px;
	    border-left: 0px solid #333333;
	    border-bottom: 1px solid #333333;
	    padding: 3px 5px;
	}

	.cTD {
	    border: 1px solid #333333;
	    padding: 3px 5px;
	}

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

	u {
	    text-decoration: none;
	    border-bottom: 1.5px solid #333333;
	    padding-bottom: 2px;
	}

	i {
	    font-family: MerriIt;
	    font-style: normal;
	}

	.ipa {
	    font-family: timesMy;
	    font-size: 120%;
	    color: #333333;
	    word-break: keep-all;
	}

	ul {
	    list-style-type: square;
	    margin: 0px auto;
	}

	ol {
	    margin: 0px auto;
	}

	.roles {
	    font-variant: small-caps;
	    white-space: nowrap;
	    text-align: right;
	}

	.r {
	    text-align: right;
	}

	.zeroIndent {
	    text-indent: 0px;
	}

	.part {
	    text-indent: 0px;
	    font-size: 2em;
	    font-family: MerriBold;
	    text-align: center;
	}

	.chapter {
	    text-indent: 0px;
	    font-size: 1.5em;
	    font-family: MerriBold;
	    margin-top: 2em;
	}

	.hintBar {
	    position: absolute;
	    top: 0em;
	    left: 0em;
	    width: 98%;
	    height: 21px;
	    padding: 5px;
	    vertical-align: middle;
	    /* background: #E95420; ubuntu */
	    background: #e7e1da;
	    box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
	    -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
	    -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
	    -ms-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
	    filter: opacity(0.8);
	    -moz-filter: opacity(0.8);
	    -webkit-filter: opacity(0.8);
	    -ms-filter: opacity(0.8);
	    z-index: 1;
	}

	.hintInfoNew {
	    text-transform: uppercase;
	    font-size: 70%;
	    margin: 0em 2em 0em 2em;
	    text-indent: 0em;
	    text-align: right;
	    /* color: #333333; */
	}

	.avDiv {
	    width: 100%;
	    height: 100%;
	    overflow-y: scroll;
	    /* has to be scroll, not auto */
	    -webkit-overflow-scrolling: touch;
	    /* overflow: -moz-scrollbars-vertical; */
	    z-index: 0;
	}

	.audioCell {
	    height: 2em;
	}

	.spanChap {
	    background: #999999;
	    color: #ffffff;
	    padding: 5px 25px;
	}

	.chapEng {
	    font-size: 1.2em;
	    text-indent: 0px;
	    text-align: center;
	    margin-top: 1em;
	    font-family: MerriBold;
	}

	.chapCN {
	    font-size: 1.2em;
	    text-indent: 0px;
	    text-align: center;
	    font-family: heiTiMy;
	    margin-bottom: 1em;
	}

	div.intro,
	.activities {
	    background: #999999;
	    color: #ffffff;
	    padding: 10px 20px 10px 20px;
	    margin-bottom: 1em;
	    margin-top: 1em;
	    box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
	    -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
	    -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
	    border: 1px solid #ffffff;
	    border-radius: 8px;
	}

	.section {
	    text-indent: 0px;
	    font-size: 1.2em;
	    font-family: MerriBold;
	    margin-top: 2em;
	    margin-bottom: 1em;
	}

	.spanSection {
	    border: 2px solid #333333;
	    padding: 5px 20px;
	    border-radius: 10px;
	    margin: 1em 0em;
	    color: #333333;
	}

	.secEngTitle,
	.medDiaEng {
	    text-indent: 0px;
	    text-align: center;
	    font-family: MerriBold;
	}

	.secCNTitle,
	.medDiaCN {
	    text-indent: 0px;
	    text-align: center;
	    font-weight: bold;
	    font-family: heiTiMy;
	}

	.TermsPhrasesTitle {
	    text-indent: 0px;
	    text-align: center;
	    font-family: handwriting;
	    font-size: 1.3em;
	    margin: 1em 0em 0em 0em;
	}

	.directions {
	    font-family: MerriBoldIt;
	    text-indent: -1em;
	    margin-left: 1em;
	}

	.TermsPhrasesIntro {
	    font-family: MerriBoldIt;
	}

	.textTitle,
	.reviewOfTerms {
	    font-family: handwriting;
	    font-size: 1.5em;
	    text-indent: 0px;
	    margin: 1em 0em 0em 0em;
	    text-align: center;
	}

	.textIntro {
	    background: #999999;
	    color: #ffffff;
	    padding: 10px 20px;
	    margin: 1em 0em;
	}

	.textSubTitle {
	    font-family: MerriBold, fangSongMy;
	    text-indent: 0px;
	    text-align: center;
	    margin-top: 1em;
	}

	.subTitle {
	    font-family: MerriBold, heiTiMy;
	    margin-top: 1em;
	    margin-left: 3.3em;
	    text-indent: -1.3em;
	}

	.inLineTitle {
	    font-family: MerriIt, fangSongMy;
	    margin-top: 1em;
	    margin-left: 3.3em;
	    text-indent: -1.3em;
	}

	.textInLineSubTitle {
	    font-family: MerriBold, fangSongMy;
	}

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

	.diaIntro {
	    font-family: MerriIt;
	}

	.exercises {
	    text-indent: 0px;
	    font-family: MerriBold;
	    margin-top: 1em;
	    margin-bottom: .5em;
	    border-bottom: 5px dashed #999999;
	    padding-bottom: 3px;
	}

	.alignRight {
	    text-indent: 0px;
	    text-align: right;
	}

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

	.figureDesc::before {
	    content: url(triangle.svg);
	    padding-right: 3px;
	}

	.figureDesc {
	    font-family: MerriIt;
	    font-size: 85%;
	    text-indent: 0px;
	    text-align: center;
	    line-height: 160%;
	    color: #888888;
	    margin-top: .5em;
	    margin-bottom: 1em;
	}

	/* font-face related; global properties */
	.tt_underline {
	    display: block;
	    font-family: Merri;
	    border-bottom: 1px solid #333333;
	}

	.show {
	    margin-left: 15px;
	    text-indent: 0px;
	    font-family: MerriIt;
	    margin-top: 16px;
	    margin-bottom: 8px;
	}

	.keys {
	    color: #e7e1da;
	}

	.yiW {
	    font-family: timesMy, fangSongMy;
	}

	.levelOne {
	    text-indent: 0em;
	    font-family: MerriBold, heiTiMy;
	    margin-top: 2em;
	    font-size: 1.5em;
	    text-align: center;
	}

	.levelTwo {
	    margin-left: 7.5em;
	    text-indent: -7.5em;
	    font-family: MerriBoldIt, heiTiMy;
	    margin-top: 2em;
	}

	.levelThree {
	    margin-left: 6em;
	    text-indent: -5em;
	    font-family: MerriBold, heiTiMy;
	    margin-top: .5em;
	}

	.levelFour {
	    margin-left: 3em;
	    text-indent: -1.0em;
	    font-family: timesMy, fangSongMy;
	    font-size: 110%;
	}

	.chapSpan {
	    font-family: MerriBold;
	    font-size: 130%;
	}

	@font-face {
	    font-family: Merri;
	    src: url("../../../COMMON/FONTS/MerriweatherSans-Regular.woff") format("woff");
	}

	@font-face {
	    font-family: MerriIt;
	    src: url("../../../COMMON/FONTS/MerriweatherSans-Italic.woff") format("woff");
	}

	@font-face {
	    font-family: MerriBold;
	    src: url("../../../COMMON/FONTS/MerriweatherSans-Bold.woff") format("woff");
	}

	@font-face {
	    font-family: MerriBoldIt;
	    src: url("../../../COMMON/FONTS/MerriweatherSans-BoldItalic.woff") format("woff");
	}

	@font-face {
	    font-family: fangSongMy;
	    src: url("../../../COMMON/FONTS/fangSong.woff") format("woff");
	}

	@font-face {
	    font-family: heiTiMy;
	    src: url("../../../COMMON/FONTS/FZ LanTing Pro-gb18030-light.woff") format("woff");
	}

	@font-face {
	    font-family: handwriting;
	    src: url("../../../COMMON/FONTS/bradleyhanditcttbold.woff") format("woff");
	}

	@font-face {
	    font-family: timesMy;
	    src: url("../../../COMMON/FONTS/times.woff2") format("woff2");
	}

	@font-face {
	    font-family: timesItMy;
	    src: url("../../../COMMON/FONTS/timesi.woff2") format("woff2");
	}