/********  program starts ********/
#content{padding:0 1.75em;}
#practise-content {background: #fbfbfb;border: rgba(195, 194, 190, 0.96) solid;border-width: 1px;border-top-width: 0;border-bottom-width: 0;border-radius: 2px;padding: 0em 7em 1em;position:relative;clear:both;margin:0;}
.pinyin-trial-title{text-align:center;font-size:30px;font-family:Courier, Monaco, monospace;}
#practise-hr-line{display:none;}
#practise-wrapper{margin:10px;}
/**play content body start here **/
.play-content-header{margin-top:-10px;background:#444 none repeat scroll 0% 0%;font-size: 20px;font-weight: 500;color: #fff;font-family: arial;}
.play-content-header{padding:0.1em 0.5em;}
.play-header-left{display:inline-block;width:49%;vertical-align:top;margin-right:0;text-align:left;}
.play-header-right{display:inline-block;width:49%;vertical-align:top;margin-left:0;text-align:right;}
.play-header-child{display:inline-block;}
.play-header-var-color{color:#e9df1c;}
.range-menu-toggle,.range-mobile-view,.menu-mobile-view{display:none;}
.play-content-body-left,.play-content-body-mid,.play-content-body-right{display:inline-block;vertical-align:top;height:550px;box-shadow: 3px 0 5px #777;}
.play-content-body-left{width:20%;background: #d8d8d8;text-align:center;overflow-y:auto;box-shadow: 3px 0 5px #777;}
.play-content-body-mid {width: 63%;line-height:2.5em;font-size:16px;background: #eee;padding:0;margin:0;box-shadow: 3px 0 5px #777;}
.play-content-body-right{width:16.2%;text-align:center;background: #d8d8d8;padding:5px 0;margin-left:-1px;box-shadow: 0 1px 5px #777;}
.play-content-ep-right button[disabled]{max-height:50px;overflow:hidden;line-height: 0.75;}
.play-content-child{margin-bottom:5px;}
.play-content-body-left-title{font-size:20px;margin-bottom:15px;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}
.play-content-body-left-subtitle{font-size:20px;border-bottom:1px solid #999;margin-bottom:5px;}
.play-content-body-right-title{font-size:20px;margin-top:-4px;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}
.play-child-left{display:inline-block;width:25%;text-align:right;vertical-align: middle;}
.play-child-right{display:inline-block;width:72.5%;vertical-align:middle;margin:0 2px 0 5px; font-weight: bold;}
.play-child-right>input{font-weight:normal;}
.play-content-eng-right{font-size:20px;line-height: 1.5em;text-align:justify;}
.input-field{display:inline-block;width: 55% !important;vertical-align:top;}
.enter-button{display:inline-block;font-size:40px;width:18%;vertical-align:top;padding:0;margin-left:-5px;background: #777;border-color: #777;overflow: hidden;white-space: nowrap;}
.enter-button:hover{background: #444;border-color: #444;}
.play-content-ep>.play-child-left{line-height:1.5em;padding-left:5px;} 
.play-content-ep-right button[disabled]:hover{padding:0;max-height: 50px;}
.play-content-ep-right button{padding:0;max-height: 50px;}
.input-pinyin-field,.icon-group,.enter-button{height:50px;}
.icon-group{display:inline-block;font-size:35px;border: #cfd08a solid 1px;border-radius: 5px;width:12%;text-align:center;vertical-align: middle;background: #b2b2b2;}
.icon-group:hover{background: #999;}
.color-icon{background: #3c90e4;}
.pinyin_sound {height: 1.2em !important;width: 1.2em !important;margin: 0 !important;vertical-align: -0.35em ;padding: 0.0em !important;}
.background-pinyin-sound-icon{background:#3c90e4;}
.background-me-sound-icon{background:#3c90e4;}
.question-icon{padding: 0.2em !important;}
.showHints {font-size: 11px;font-style: italic;vertical-align:middle;}
.play-content-ch{margin:20px 0;}
.play-content-ch-right{font-size:30px;color:#1a1a1a;}
.hilight{color:#13c413;font-weight:600;}
.gap-box {display: initial;border: 1px solid rgb(19, 196, 19);color: rgb(19, 196, 19); margin-top: 5px; padding:5px;}
.message-icon-green,.message-icon-red{height:20px;vertical-align: middle;}
.firstHide{visibility:hidden;}
.pinyinMessage_container {padding-left:25%;position: relative;}
.pinyinMessage{padding-left:5px;font-size: 15px;}
.pinyinMessage_first{font-size: 12px;line-height: 1.25em;font-style:italic;}
.play-content-pytone-left{vertical-align: middle;line-height: 1.5em;}
.play-content-pytone-right{font-size:20px;vertical-align:middle;line-height: 1.4em;}
.play-content-me{margin:0;}
.play-content-me-right {vertical-align:top;margin-top:10px;}
.play-content-me-right table {margin-bottom: 0;line-height: 1.5em;}
.example-left-control{width:88%;}
.example-right-control{width:10%;font-size:30px;margin:0;padding:0.1em;text-align:center;}
.me_pinyin_sound {height: 1.2em !important;width: 1.2em !important;margin: 0 !important;padding: 0.0em !important;}
#example-pytone,#example-eng{width: 20px;height: 20px;margin-left:8px;background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);}
.continue-button{width:100%;height:50px;text-align:center;background: #777;border-color: #777;margin: 10px 0;font-size:15px;border-radius: 5px;line-height: 1.5em;}
.continue-button:hover{background: #444;border-color: #444;}
.play-content-body-mid-general-span{display:block;text-align:center;line-height: 1.8em !important;}
.layout-finshed-range span span{display:inline-block;}
.play-content-body-mid-finish a{border: 1px solid #5f5f5f;border-radius: 5px;padding: 3px;background: #2ac03c;color: #000000;padding: 5px 15px;}
.play-content-body-mid-finish{text-align: center;padding-top: 20px;}
.play-content-range-view-list{margin:0;width:100%;}
.play-content-range-view-list li{list-style-type: none;padding-right: 5px;height: 35px;} 
.play-content-range-list-left{width:40%;float:left;text-align: left;padding-left:5px;padding-top: 2px;font-size:13px;}
.play-content-range-list-right{width:60%;float:right;text-align: right;}
.play-pinyin-range-test-now{cursor:pointer;font-size: 13px;margin: 3px 0;padding:0;text-align: center;background: #777;border:1px solid #777;border-radius: 4px;color: #ddd;float: right;width: 100%;}
.play-pinyin-range-test-now:hover{background: #444;}
.play-pinyin-range-test-restart{background:#444 none repeat scroll 0% 0%;color:#fff;border:1px solid #444;}
.play-pinyin-range-test-restart:hover{background: #222;}
.play-pinyin-range-test-restart>img{padding: 3px 5px;}
.play-content-range-li-right-retry{background: #b2b2b2;cursor: pointer;border-radius: 5px;border: 1px solid #2c2929;font-weight: bold; text-align: right;padding: 0 3px;color: #000000;}
.rangeSuccess_score,.rangeTotalNumberOfTrail{color:#2ac03c;}
.rangeSuccess_score{font-size:14px;}
.play-pinyin-range-list-r-left{display: table-cell;width: 15%;}
.play-pinyin-range-list-r-left>span{color:#2ac03c;vertical-align: middle;padding-left: 2px;}
.play-pinyin-range-list-r-middle{display: table-cell;width: 60%;font-size: 17px;}
.play-pinyin-range-list-r-right{display: table-cell;width: 25%; padding-top: 3px;}
.range-list-active-link{color:#000000;font-weight:bold;}
.range-list-other-link {color:#424242;}
.play-content-menu-view-list{margin:0;}
.play-content-menu-view-list li {list-style-type: none;border: #b7b49b solid 2px;border-radius: 10px;margin:20px 10px;line-height:2em;font-size:20px;text-align:center;background: #e6e6dc;}
.play-content-menu-view-list li a{display:block;}
.play-content-menu-view-list li a:hover{color:#ddd;}
.play-content-menu-view-list li:hover {border: #b7b49b solid 2px;background: #666;}
.time-spent{text-align:center;}
.time-spent-var-color{color:#34678a;}
.claigraphy-image-pinyin{height:35px;width:35px;padding:3px;background:#b2b2b2; border:1px solid #5f5f5f;border-radius:5px;}
/*caligraphy popup csss*/
.play-caligraphy-popup {display:none;position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 1000;overflow-x: auto;overflow-y: scroll;background: rgba(0, 0, 0, 0.46);transition: opacity 0.3s ease 0s;padding-top: 250px;}
.play-caligraphy-popup-inner {border-radius: 4px;background: #FFF none repeat scroll 0% 0%;width:465px;margin-left: auto;margin-right: auto;margin-bottom: 0;height: 380px;box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);}
.pinyinStroke{position: absolute;top:250px; display: none;z-index: 100;margin-left: 32px;}
.pinyinStrokeForSentence{position: absolute;top:250px;z-index: 100;margin-left: 32px;}
.strokePrev{position: relative;height: 40px;width: 40px;left: 0;top: 180px;z-index: 1000;cursor: pointer;}
.strokeNext{position: relative;height: 40px;width: 40px;top: 140px;z-index:1000;float:right;transform: rotateY(180deg);cursor: pointer;right: 0;}
.stroke1{z-index: 100;display: block;}
.ended{opacity: 0.2;}
.pinyinStroke p,.pinyinStrokeForSentence p{margin-left: auto;margin-right: auto;width: 400px;text-align: center;margin-top: 150px;font-size: 13px;}
embed, iframe, object, video {width: 400px;height: 380px;margin-bottom: 0;max-width: 100%;vertical-align: middle;}
.flash-detect-msg{padding:5px;color:#ff0000; text-align:center;font-size:14px;padding-top:100px;}
#unordered-sentence-con{width: 100%;margin:0;padding: 5px;}
#ordered-sentence-con{width: 100%;margin:0;padding:0;}
#unordered-sentence-con{border-bottom: #bbb 1px solid;height:140px;line-height: 2.0em;position: relative;}
#unordered-sentence-con li{list-style-type: none;text-align: center;display: inline-block;}
#ordered-sentence-con li{list-style-type: none;height: 40px;width: 100%; border-bottom:1px solid rgba(0, 121, 60, 0.29);}
#unordered-sentence-con li span {border: 1px solid #817e7e;line-height: 1.7em;padding: 4px;border-radius: 5px;cursor: move;}
.order-num{width:10%;float: left;display: inline-block;text-align: center;}
.ordered-sen{width: 89%;float: right;display: inline-block;height: 40px;text-align: left;}
.ordered-sen .unordered-sen{z-index: 10;}
.reorder-audio-content{text-align: center;border-bottom:1px solid #bbb;}
.un-sen-con-li{height: 105px;}
.unordered-pinyin{border: 1px solid #5f5f5f;padding: 2px;border-radius: 5px;margin:2px; list-style-type:none;line-height: 1.4em;}
.message-icon-green, .message-icon-red {height: 14px;width: 14px;vertical-align: middle;}
.show-pinyin {border: 1px solid #5c5555;padding: 3px;border-radius: 5px;width: 72px;display: block;color: #000000;line-height: 1em;height: 27px;cursor: pointer;font-size: 14px;}
.signPnn{font-size:19px;color:#ef830a;font-weight: bold;vertical-align: 0em;display: inline-block;}
.ui-droppable-hover{background: #efeab3;border-bottom:1px solid rgba(0, 121, 60, 0.29);}
.ui-draggable-dragging{box-shadow:0px 0px 10px  #888888;border: 1px solid #817e7e;line-height: 1.7em;padding: 4px;border-radius: 5px;} 
.viewPinyinParagraph{height: auto;padding: 5px;position: absolute;background: rgb(255, 255, 255) none repeat scroll 0% 0%;text-align: center;z-index: 100;opacity: 0.9;width: 77%;float: right;left: 23%;}
.match-answer-ch-left {width: 50%;float: left;text-align: right;padding-right: 10px;font-weight: bold;padding-top: 3px;}
.match-answer-ch-right {width: 50%;float: right;text-align: left;padding-left: 10px;font-weight: bold;}
.caligraphy-gif .pinyinStroke img,.pinyinStrokeForSentence .caligraphy-gif img {margin-left: 10px;height: 375px;}
.active-listen-topic {
    font-size: 17px;
    font-weight: bolder;
}
 @media screen and (max-width: 1200px) {
    .play-content-body-right ul li {font-size:16px;}
    #practise-content {padding:0 4em 1em;margin:0;}
    #practise-title{font-size: 28px;margin-bottom: 5px;}
    #practise-wrapper{margin:1px;padding:0;}
    .play-content-range-list-left{font-size: 11px;}
    .play-pinyin-range-test-now{font-size: 12px;}
    .play-child-left{font-size: 15px;}
    .input-field{font-size:16px;}
    .icon-group{font-size:25px;}
    .play-content-pytone-right{font-size:18px;}
    .continue-button{font-size:14px;}
    .play-content-body-mid{margin-left:-1px;}
    .play-content-body-right{width:16.1%}
    
}
@media screen  and (max-width: 1023px) {
    #content{padding:0em;}
    .play-content-body-right ul li {font-size:13px;}
    #practise-content {padding:0 0 1em;margin:0;}
    #practise-title{font-size: 25px;margin-bottom: 5px;}
    .play-content-header{height:1.4em;}
    .play-header-left{font-size: 14px;}
    .play-header-right{font-size: 14px;}
    .play-content-body-left-title{font-size:16px;}
    .play-child-left{font-size: 12px;}
    .input-field{font-size:16px;height:45px;}
    .enter-button{height:45px;}
    .icon-group{font-size:35px;height:45px;}
    .play-content-pytone-right{font-size:18px;vertical-align: top;}
    .continue-button{font-size:16px;}
}
@media screen and (max-width: 735px) {
    #practise-title{font-size: 20px;margin-bottom: 5px;}
    .play-header-left{font-size: 13px;}
    .play-header-right{font-size: 13px;}
    .play-content-body-mid{width: 100%;box-shadow: 2px 0 0px #777;padding:5px;}
    .play-content-range-list-left{text-align: center;font-size: 12px;}
    .play-content-range-list-right{text-align:right;}
    .play-child-left{font-size: 13px;}
    .input-field{font-size:12px;}
    .enter-button{font-size:40px;}
    .icon-group{font-size:30px;}
    .play-content-pytone-right{font-size:18px;}
    .play-content-me{margin-top:-5px;}
    .example-left-control{font-size: 15px;}
    .continue-button{font-size:11px;}
    .pinyinStroke,.pinyinStrokeForSentence{top: 190px;margin-left: 32px;}
    .play-caligraphy-popup{padding-top: 190px;}
    .pinyin_sound {vertical-align: -0.20em ;}
    .strokeNext{top: 125px;}
    .strokePrev{top: 140px;}
    .signPnn{float:right;}
    .show-pinyin{font-size:14px;height:23px;}
    .play-content-ch {margin: 0 0 20px 0;}
    /* handling the mobile view for range & menu options */
    .play-content-body-left,.play-content-body-right{display:none;}
    .range-menu-toggle{display: block;}
    .switch-range,.switch-menu{cursor:pointer;height: 30px;text-align: left;padding: 0 5px;width: 50%;float: left;background:#ddd;border-bottom: 1px solid #eee;}
    .switch-range{border-right:#777 1px solid;}
    .range-sw-sign,.menu-sw-sign{color:#e07746;font-weight:bold;font-size:25px;text-align: center;width:15%;line-height: 1.1em;}
    .range-mobile-view,.menu-mobile-view{position: absolute;margin-top:30px;height:auto;width:49.8%;border-top: 1px solid #fff;background: #f1f1f1;box-shadow: 0 2px 2px #444;opacity: 0.96;z-index: 1000;}
    .play-content-range-view-list {line-height: 1.4em;padding-right:10px;}
    .play-content-body-left-title,.play-content-body-right-title{display:none;}
    .menu-mobile-view{float: right;right: 0;} 
	.play-content-menu-view-list li{width: 60%;font-size:16px;margin-left:auto;margin-right:auto;}
}
@media screen and (max-width: 567px) {
    #practise-title{font-size: 16px;}
    .play-content-header{height:50px;}
    .play-header-left{display:block;width: 100%;font-size: 14px;text-align:center;}
    .play-header-right{display:block;width: 100%;font-size: 14px;text-align:center;}
    .play-content-body-mid{display:block;width:100%;box-shadow:none;width: 100%;padding:2px;}
    .pinyinMessage {font-size:11px;}
    .play-child-left{font-size: 14px;}
    .play-content-pytone-right{font-size:14px;}
    .continue-button{font-size:12px;}
    .pinyinStroke,.pinyinStrokeForSentence{top: 40px;}
    .play-caligraphy-popup{padding-top: 40px;}
    .match-answer{font-size: 12px;}
	#unordered-sentence-con{height: 170px;}
	.un-sen-con-li{height: 135px;}
	.ordered-sen{width: 87%;}
	.order-num{width:12%;}	
	.show-pinyin{width:65px;font-size:12px;height:22px;}
	#ordered-sentence-con{padding:0 5px;}
	.s-pin{font-size: 13px;line-height: 1.3em;}
     #breadcrumb-list{padding-left:2px;padding-right:2px;font-size:12px;}
     #breadcrumb-list .wrapper{padding-left:0;padding-right:0;}
}
@media screen and (max-width: 479px) {
    .play-child-left{font-size: 9px;}
    .play-child-right{width:72%;}
    .input-pinyin-field{width:50% !important;}
    .question-icon{width: 15% !important;}
    .enter-button{font-size:30px;}
    .icon-group{font-size:20px;}
    .showHints {font-size: 9px;}
    .play-content-pytone-right{font-size:14px;}
    .play-content-me-right{display:block;width:100%;margin-top: -5px;}
    .continue-button{font-size:18px;line-height: 1em;padding:0.3em;}
    .play-content-continue-right{display:block;width:100%;margin-top: -40px;}
}
/* inclueding iphone 6 plus max-width:414px; nexus 6p max-width:412px; iphone 6 max-width:375px; */
@media screen and (max-width: 414px) {
    .pinyinStroke,.pinyinStrokeForSentence{margin-left: 20px;}
    .pinyin_sound{vertical-align: -0.23em ;}
    .strokeNext{top: 90px;}
    .strokePrev{top: 100px;}
    .pinyinStroke p,.pinyinStrokeForSentence p{width: 290px;margin-top: 130px;}
    .strokePrev img,.strokeNext img{width: 20px;}
    .play-caligraphy-popup-inner{width: 310px;height: 300px;}
    embed, iframe, object, video {width: 270px;height: 300px;} 
    .caligraphy-gif .pinyinStroke img,.pinyinStrokeForSentence .caligraphy-gif img{margin-left: -10px;height: 300px;}
    /* handling mobile view for range & menu */
    .play-content-range-view-list{padding:0;margin:0;}
    .play-content-range-list-left{padding: 0;margin:0;}
    .play-content-range-list-right{padding:0;margin:0;}
    .play-content-range-list-left{font-size: 10px;}
    .play-pinyin-range-test-now{font-size: 11px;line-height: 1.75em;}
    .play-content-menu-view-list li{width: 80%;margin-left:auto;}
}