body {font-size: 2em !important; font-family:PingFang SC,STHeitiSC-Medium,STHeitiTC-Medium !important;}
.navbar {margin-bottom: 5px !important;}
.navbar-collapse {padding-left: 0 !important; padding-right: 0 !important;}
.navbar-nav li {font-size: 1.25em !important; vertical-align: middle !important;}
.navbar-nav li a {line-height: 1.25em !important;}
.navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {border:1px solid silver;}
div.row {margin-bottom: 2.5em !important;}
a.profile {color: #000099 !important;}
a.logout {color: #990000 !important;}
audio.hidden {display: none;}
.lessonHeaderLeft {width: 28% !important;float: left; text-align: right; padding: 0.05em .25em 0.05em 0.05em !important; margin-top:70px !important; margin-bottom: 0px !important; font-size: 110%;}
.lessonHeaderRight {width: 72% !important;float: left; text-align: left; padding: 0 0 0 0.25em !important; margin-top:70px !important; margin-bottom: 0px !important;}
.box {margin: 0.75% 0.75% 0.25em 0.75%; padding: 0.25%; text-align: center; display: inline-block; font-size: 1.5em;}
.btn-huge {font-size: 100% !important; margin: .25em; min-width: 3em !important;}
h1,h2,h3,h4,h5 {display: block;}
h2 {margin: 0 !important;}
h4.sublesson {width: 100%; border-bottom: 1px solid silver; clear: both; padding-top: 0.25em; padding-bottom: 0.25em;background-color: #F0F8FF;}
h4.sublessonHeader {width: 100%; border-top: 1px solid silver; clear: both; margin-top: 0.25em; margin-bottom: 0.25em; padding-top: 0.25em; padding-bottom: 0.25em; background-color: #F0F8FF; padding-left:0.25em; clear: both; font-size: 115%;}
img {width: 100%; display:block;}
div.right {text-align: right;}
div.tones {text-align: center; margin: auto;}
div.dash {border-top: 2px dashed #000; margin-top: 0.5em; width: 99%; clear: both; margin-left:auto; margin-right:auto;}
div.dashlite {border-bottom: 1px dashed silver; padding-top: 1em; margin-bottom: 1em; width: 99%; clear: both; margin-left:auto; margin-right:auto;}
table th{background-color: #DCDCDC; text-align: center;}
.warmupform {float: left; clear: both; margin-top: 0.25em; margin-bottom: 0.25em;}
.warmup {padding: .5em; margin-top: 1em;}
.warmupans {clear: both; margin-top: 0.5em; margin-bottom: 0.5em;}
.gameDiv {float: left; padding-left: 5%;}
#tone1, #tone2, #tone3, #tone4 {width: 240px !important; height: 120px !important; border:1px solid #000;}
.input-group {margin-bottom: 1em !important;}
.table-centered td {text-align: center;}
.table-centered td img {display: block; margin-left: auto; margin-right: auto;}
.img {display: block;}
@media all and (min-width:737px){
	img.lessonImg {margin: .25em; width: 70%;}
	.lessonHeaderRight {padding-top: 0.5em;} 
	qSplit {display: none;}
	table.L1-L4 {width: 25%;}
	audio {margin-top: .5em;}
	div.lessonMenu {width: 48%; float: left;}
}
@media all and (max-width:736px){
	img.lessonImg {margin: .25em; display:block; width: 95%;}
	qSplit {display: block; height: 0.01em;}
	table.L1-L4 {width: 100%;}
	h2 {font-size: 18px !important;}
	audio {clear: both; margin-top: .5em; width: 65%;}
	div.container-fluid {padding: .25em !important}
}
#time {text-align: center;}
button.cd {margin-left: .25em;}
span.masked{color: #fff;}
img.strokeOrder {height: 2.5em !important; width: 2.5em !important;}
span.illustration {font-size: 3em; border: 1px dotted silver;}
.borderless td, .borderless th {border: none;}
div.lessonMenu {padding: .5%; margin: .5%; border: 1px solid silver; }
#leveltitle{border: 1px solid silver; line-height: 1.25em; color: #777; padding: 15px;display: block;background-color: transparent; font-size: 1.25em;font-family:PingFang SC,STHeitiSC-Medium,STHeitiTC-Medium !important;}
/*.custom-nav{border: 1px solid silver; line-height: 1.125em; color: #777; padding: 15px;display: block;background-color: transparent; font-size: 1.125em;font-family:PingFang SC,STHeitiSC-Medium,STHeitiTC-Medium !important;}*/
#custom-nav a{margin-top: .5em;}
#custom-nav {padding:.25em;}
span.txtNum {font-size: 150%;}
h4.textSection {padding: .5em; background-color: #d3f8d3; font-size: 105%; clear: both;}
.col {padding-left:2px; padding-right:2px;}
a.custom-nav2 {width: 50px !important;}
a.custom-nav3 {width: 80px !important;}
a.custom-nav4 {width: 100px !important;}
a.custom-nav5 {width: 120px !important;}
a.custom-nav6 {width: 175px !important;}
table.table-SCC tr > td:first-child {font-size: 200%;}
.pyn {display: none; color:purple;}
.eng {display: none; color:green;}
.xhan {display: none; color: maroon;}
.pynD {color:purple;}
.engD {color:green;}
.xhanD {color: maroon;}
.container-fluid li {padding-bottom: 0.25em;}
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}
p.indent {padding: 1em; margin: 1em; border: 1px dashed silver;}
span.time {font-size: 1.75em; font-family: Courier;}
div.clock {text-align: center;}
#L1 img{width:300px; height:195px;}
#warmup img{width:300px; height:195px;}
ol.listX li{padding-bottom: 5px;}
a.btn {font-family: Arial, Helvetica, sans-serif !important;}
#L4-warmup img{width:115px; height:173px;}
div.text-indent {text-align: left; padding-left: 5%;}
.centered {text-align: center}
.col button {float:right; margin-right:0.25em !important; padding-left: 0.01em;padding-right: 0.01em;margin-bottom: 0.25em !important;}
.col img {width:100% !important;}