/* header */
.navContainer{
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
}

.timenavContainer{
    max-width: 750px;
    height:25px;
    line-height: 25px;
    margin: 0 auto;
    padding: 0;
    background-image:url("../images/line_bk.gif");
}

.timebar{
    font-family: Arial;
    font-size: 1rem; 
    text-decoration: none; 
    color:silver; 
    text-align: right;
}

.timebar span{
    background-color:#008080;
}

nav a{
    color:#008080 !important;
}
a.active{
    background-color: #008080 !important;
    color: #ffffff !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: unset !important;
}

a.dropdown-item:active{
    background-color: unset !important;

}

/* middle */
body{
    max-width: 750px;
    margin:0 auto;
}

/* samplesPage */
.samplesContainer{
    width: 100%;
    margin: 0;
}

.samplesContainerTry{
    background-color: #008080;
    margin-bottom: 5px;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 20px;

}

.samplesContainerTry h5{
    margin: 0 auto;
    color: #ffffff;
}

.courseLevelContainer{
    margin: 0;
    border: 1px solid #008080;

}
.CourseLevel1,
.CourseLevel2,
.CourseLevel3,
.CourseLevel4{
    color: #ffffff;
    margin: 15px 0;

}
.CourseLevel1 a {
    text-align: center;
    color: #008080;
    text-decoration-line: underline;
}

.CourseLevel2 a {
    text-align: center;
    color: #ca9481;
    text-decoration-line: underline;
}

.CourseLevel3 a {
    text-align: center;
    color: #7e7eae;
    text-decoration-line: underline;
}

.CourseLevel4 a {
    text-align: center;
    color: #fa8400;
    text-decoration-line: underline;
}

.td4lesson{
    color: #ffffff;
}
.lessonMenuContent{
    background-color:#ffffff;
}

.lessonChooseMenu ul li a{
    color: #008080;
}

.lessonChooseMenu tr td{
    vertical-align: middle;
}

.lessonChooseMenu .pagination{
    flex-wrap: wrap;
} 

.td4lesson{
    background-color:#008080;
}

.td4LessonChoose{
    background-color:#dff4f4;
}

.td4Exercise,
.td4ExerciseChoose{
    background-color:#eeeeee;
    color: #008080;
}

.td4Vocabulary{
    background-color:#008080;
    color:#ffffff;
}

.td4VocabularyChoose{
    background-color:#dff4f4;
}

/* CertificatesAndPrice */
.courseCertificatesAndPriceContainer{
    margin: 30px auto 0px auto;
    text-align: center;

}

.courseCertificatesAndPriceContainer a img {
    margin:5px;
}



/* footer */
footer{
    max-width: 750px;
    margin: 30px auto 0 auto;
}

.footerContainer{
    width: 100%;
    margin: 0 auto;
    /* height:30px;  */
    padding: 0;
    /* background-image:url("../images/footer.jpg"); */

    /* background-repeat: no-repeat; */
    background-color: #c9f9f9;
}

.footerContainer .companyInfo{
    /* line-height:30px; 
    line-height: 100%;
    color:#008080;
    text-align: right; */
}

/* lessonPage */
.lessonContainer{
    max-width: 750px;
    min-height: 400px;
    background-image:url("../images/pinyin_bk.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    
}
.lessonContainer1{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    padding:20px;
}
.lessonContainer1 p {
    font-size: 0.5em;
}
.infoContainer{
    width:100%;
    margin-top: 30px;
}
.pinyincontainer{
    padding: 1px;
    width: 130px;
    height:100px;
    box-sizing: border-box;
    margin-top: 30px;
    
}
.pinyincontainer p{
    font-size:10px;
    color: red;
    display:none;
}
.pinyincontainer .pinyinSpanButton{
    display: inline-block;
    width: 45px;
    height: 120px;
    vertical-align: middle;
    cursor: pointer;
}

.pinyinSpanButton1{
    background-image: url("../images/a-d.png");
    background-position-x: 0;
}

.pinyinSpanButton2{
    background-image: url("../images/a-d.png");
    background-position-x: 315px;
}

.pinyinSpanButton3{
    background-image: url("../images/a-d.png");
    background-position-x: 170px;
}

.pinyinSpanButton4{
    background-image: url("../images/a-d.png");
    background-position-x: 42px;
}

.pinyinSpanButton5{
	background-image: url("../images/e-h.png");
    background-position-x: 0;
}

.pinyinSpanButton6{
	background-image: url("../images/e-h.png");
    background-position-x: 328px;
}

.pinyinSpanButton7{
	background-image: url("../images/e-h.png");
    background-position-x: 185px;
}

.pinyinSpanButton8{
	background-image: url("../images/e-h.png");
    background-position-x: 50px;
}

.pinyinSpanButton9{
	background-image: url("../images/i-l.png");
    background-position-x: 0;
}

.pinyinSpanButton10{
	background-image: url("../images/i-l.png");
    background-position-x: 315px;
}

.pinyinSpanButton11{
	background-image: url("../images/i-l.png");
    background-position-x: 175px;
}

.pinyinSpanButton12{
	background-image: url("../images/i-l.png");
    background-position-x: 42px;
}

.pinyinSpanButton13{
	background-image: url("../images/m-p.png");
    background-position-x: 0;
}

.pinyinSpanButton14{
	background-image: url("../images/m-p.png");
    background-position-x: 328px;
}

.pinyinSpanButton15{
	background-image: url("../images/m-p.png");
    background-position-x: 180px;
}

.pinyinSpanButton16{
	background-image: url("../images/m-p.png");
    background-position-x: 50px;
}

.pinyinSpanButton17{
	background-image: url("../images/q-t.png");
    background-position-x: 0;
}

.pinyinSpanButton18{
	background-image: url("../images/q-t.png");
    background-position-x: 320px;
}

.pinyinSpanButton19{
	background-image: url("../images/q-t.png");
    background-position-x: 180px;
}

.pinyinSpanButton20{
	background-image: url("../images/q-t.png");
    background-position-x: 45px;
}

.pinyinSpanButton21{
	background-image: url("../images/u-x.png");
    background-position-x: 0;
}

.pinyinSpanButton22{
	background-image: url("../images/u-x.png");
    background-position-x: 315px;
}

.pinyinSpanButton23{
	background-image: url("../images/u-x.png");
    background-position-x: 170px;
}

.pinyinSpanButton24{
	background-image: url("../images/u-x.png");
    background-position-x: 42px;
}

.pinyinSpanButton25{
	background-image: url("../images/y-z.png");
    background-position-x: -10px;
}

.pinyinSpanButton26{
	background-image: url("../images/y-z.png");
    background-position-x: 42px;
}

.pinyincontainer video{
    width:60px;
    vertical-align: middle;
    display:none;
}
.pinyincontainer:hover > video{
    display:inline-block;
}
.pinyincontainer:hover > p{
    display:block;
}

.pinyinInfoContainer{
    margin-top:40px;
    margin-left: 10px;
}

.combinationsTable{
    text-align:center;
}

.combinationsTable tr{
    border-bottom: 2px solid #008080;
}

.soundButtonGroup button{
    border: 1px solid #ffffff;
}
.instrucorDiv{
    /* background-image:url('../images/instructor_bk.jpg'); */
    /* background-size:cover; */
    padding: 40px 0;
    margin: 0;
    /* padding-top: 40px; */
}


@media screen and (max-width: 500px) {
    .combinationsTable .soundButtonGroup,
    .pinyinRulesTable .soundButtonGroup{
        display: flex;
        flex-wrap: wrap;
    }

    .instrucorDiv{
        border: 1px solid #008080;
        background-image: none;
        padding-top: 20px;
    }
}


.wordColor1{
    color: #008080;
}

form div label{
    display:inherit;
}

rt{
    font-size:85%;
}

.webMask{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 998;
    background-color: rgba(0,0,0,0.3);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
}

.basix_bookmark_div {
	position: fixed;
	text-align:center;
	padding:25px;
	font-family:arial;
	font-size:15px;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	border:1px solid #dff4f4;
	border-radius:6px;
	box-shadow: ##dff4f4 1px 2px;
	display:none;
	z-index: 999;
    background-color: #008080;
    top: 150px;
    color:#ffffff;
}

.basix_bookmark_div .bookmark_title{
	font-size:1.2rem;
	padding:10px;
}

.basix_bookmark_div .bookmark_content{
	margin-bottom:10px;
}