.app-content{background-color:#235382;direction: rtl;}

/*************************tabs****************************/

#tabs{width:48.625em; height:2em; margin:1em auto 0; list-style:none; position:relative; stop:.125em; padding:0;
      -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}

#tabs > li{width:20%; height:2em; border-radius: .75em .75em 0 0; position:relative; text-align:center; color:#fff; font-weight:bold; padding-top:.25em; cursor:pointer; float:right; margin-left:.5em;sborder-bottom:.125em solid #fff;
           -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

.en #tabs > li, .vi #tabs > li{float:left; margin-left:0; margin-right:.5em;}

#tabs > li:first-child{background-color:#579F31}
#tabs > li:last-child{background-color:#D28A1E}

#tabs > li::before {
  position: absolute;top: 0;right: 0;  height:2em; width:100%;border-radius: .75em .75em 0 0;  content: "";
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMzIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(top,  rgba(255,255,255,0.33) 0%, rgba(255,255,255,0) 40%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.33)), color-stop(40%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.33) 0%,rgba(255,255,255,0) 40%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(255,255,255,0.33) 0%,rgba(255,255,255,0) 40%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(255,255,255,0.33) 0%,rgba(255,255,255,0) 40%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(255,255,255,0.33) 0%,rgba(255,255,255,0) 40%); /* W3C */
}

#tabs > li.selected{border:2px solid #fff; border-bottom:0;cursor:default; top:2px;}
#tabs > li > span{ font-size:115%;}
.vi #tabs > li > span{ font-size:102%;}

/*********************************************************/

#experiments-content{width:48.625em; height:25.75em; margin:0 auto; border:2px solid #fff; border-radius:.625em 0 .625em .625em; background-color:#4E78A2;
                     -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}

.en #experiments-content, .vi #experiments-content{border-radius: 0 .625em .625em .625em;}
.exp1{display:block;}
.exp2{display:none;}

/***********************activity**********************************/

#activity-content{width:45%; height:23.5em; float:right; margin:1em 1em 1em 0; position:relative;}
.en #activity-content, .vi #activity-content{float:left;margin:0em 0 1em 1em;}

.pitcher{margin:2em 1.5em 0;}
.pitcher > img{width:74%; height:72%;}


#flashlight{width:5.1875em; height:5.0625em; position:absolute; top:0; left:0;}
#light{width:15.375em; height:12.5em; position:absolute; top:2em; left:1em;}
#light > img{opacity:0; width:90%; height:90%;}
#flashlight > img{width:100%; height:100%}

#fill-pace{width:.5625em; position:absolute; bottom:7.5em; right:2.25em; border-radius:.25em;background-color:blue; height:0em;}
#desc-pace{position: absolute;top: 9.75em; right: -3.25em; width:7em; font-weight:bold; color:#fff;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);}

.en #desc-pace{width:9.5em; right: -4.25em; top:10em;}
.vi #desc-pace {width:9.5em; right: -4.25em;}

#desc-air {position: absolute; top:3.75em; left:2.75em; width:5.5em; font-weight:bold;color:#fff;}
#desc-pace > span, #desc-air > span{font-size:80%;}

.canvas-arrows{position:absolute; top:4.835em;left:7.5625em;width: 2em;height: 5.4em;}

#choose-radio{float: right; margin-top:1em;}
.en #choose-radio, .vi #choose-radio{float:left; direction:ltr; margin-top:1.5em;}

#choose-radio > label{display:block; color:#fff; font-weight:400;}
label > span{font-size:70%;}
.cet-radio span.radio-text{padding-right: 1.5em;background-image: url("../content/img/radio.png");
                           -moz-background-size:1.0625em 1.0625em; -o-background-size:1.0625em 1.0625em; -webkit-background-size:1.0625em 1.0625em; background-size:1.0625em 1.0625em;}
.cet-radio-checked span.radio-text{background-image: url("../content/img/radio-checked.png");
                           -moz-background-size:1.0625em 1.0625em; -o-background-size:1.0625em 1.0625em; -webkit-background-size:1.0625em 1.0625em; background-size:1.0625em 1.0625em;}
.en .cet-radio span.radio-text, .vi .cet-radio span.radio-text{background-position:left; padding-right:0; padding-left:1.5em;}

#choose-slider{ margin-top:.125em; float:left; width: 13em; height: 4em; position:relative;}
.en #choose-slider{float:right; margin-top:1.25em;}
.vi #choose-slider{float:right; margin-top:1.25em; margin-right: -1em;}

#slider-desc{text-align:center; color:#fff; position:relative; top: -0.35em;}
#slider-desc > span{font-size: 76%;}
body.ar #slider-desc{left:0.4em;}
body.en #slider-desc{left:-1.2em;}
body.vi #slider-desc{left:-2.2em;}

#exp-btn, #dots-btn{width:5.25em; height:1.375em; background-color:#f37a2a; border-radius:.375em; color:#fff; font-weight:bold; text-align:center; box-shadow:.125em .125em 0 #D28A1E; cursor:pointer;}
#exp-btn{margin:1.5em auto;}
.en #exp-btn, .vi #exp-btn{width:7em;}
.en #dots-btn{width:9em; margin:1em 5.5em 1em auto;}
 .vi #dots-btn{width: 11em;margin:1em 5.5em 1em auto;margin-right: 7%;}
.no-touch #exp-btn:hover,.no-touch #dots-btn:hover{background-color:#fc9450;}
#exp-btn:active{box-shadow:none; margin-top:1.5625em;}
#dots-btn:active{box-shadow:none; margin-top:1.125em;}
#exp-btn > span, #dots-btn > span{font-size:90%;}

.en #exp-btn > span, .en #dots-btn > span, .vi #exp-btn > span, .vi #dots-btn > span{font-size:75%;}

/***********************results**********************************/

#results-content{ border-radius:1em; width:47%; height:23.5em; float:left; margin:1em;}
.en #results-content, .vi #results-content{float:right;}

#results-tabs{height:1.5em;list-style:none; padding:0; margin:0;
      -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
#results-tabs > li{width:25%; height:1.5em; border-radius: .75em .75em 0 0; text-align:center; background-color:#999; color:#D6D6D6; font-weight:bold; padding-top:.125em; cursor:pointer; float:right;
           -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.en #results-tabs > li, .vi #results-tabs > li{float:left;}

#results-tabs > li.selected{cursor:default;color:#424242; background-color:#D6D6D6;}

#results-body{direction: ltr; background-color:#D6D6D6; height:22em;border-radius:.625em; border-top-right-radius:0 !important;}
.en #results-body, .vi #results-body{border-top-right-radius:.625em !important; border-top-left-radius:0 !important;}
#results-body .content{height:18.5em; direction:rtl;}

#dots-btn{margin:1em auto; }

#graph-content{position:relative;}

#graph-title{text-align:center;font-weight:bold; padding-top:.5em;}
#graph-title > span{font-size:90%;}
.vi #graph-title > span{font-size:79%;}

#graph{height:13.5em;width:19em; border-left:1px solid #000;border-bottom:1px solid #000; position:absolute; top:2em; right:1em;}

#graph-footer{position:absolute;top:18.5em; left:0; background-color:#235382; height:3.5em;width:100%; overflow:hidden;border-radius:0 0 .625em .625em;}

.canvas-exp { position: absolute; z-index: 300; bottom: -2%; left: -1.2%;
               -webkit-transform-origin: bottom left; -moz-transform-origin: bottom right; -ms-transform-origin: bottom left; -o-transform-origin: bottom right; transform-origin: bottom left; width: 100%; height: 100%;}


#chir-y{height:13.75em; width:1em; position:absolute; top:2.375em; left:1.25em;}
#chir-x{width:22em; height:1em;position:absolute; bottom:2.125em; left:2.625em;}
#chir-y > div{height:1.3125em; text-align:center;}
#chir-x > .exp1{position:relative;width:100%; height:1.6875em;background:url("../content/img/arrow.png") no-repeat 18.75em .1875em; 
              -moz-background-size:.375em 1.6875em; -o-background-size:.375em 1.6875em; -webkit-background-size:375em 1.6875em; background-size:.375em 1.6875em;}

#chir-x > .exp1 > div{width:1.875em;}
#chir-x > .exp2 > div{width:3.75em;}
#chir-x #last-val{position:absolute; top:3.5em; right:4.5em; color:#A63232;}
.zh #chir-x #last-val{position:absolute; top:2.2em; right:3.1em; color:#A63232;font-size:0.75em;}
.vi #chir-x #last-val{position: absolute; top: 3em; right: 3.2em; color: #A63232; font-size: 65%;}
#chir-y span, #chir-x span{font-size:50%;position:relative; right:-.875em; }
#chir-y span{top:-1.5em}

#desc-y{position: absolute;top: 9em; left: -2.5em; width:7em; font-weight:bold;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);}

.en #desc-y, .vi #desc-y{width:9.5em; left:-4em; top:8.75em;}

#desc-x { position: absolute; bottom: .5em; left:7.5em; width:7em; font-weight: bold; }
.en #desc-x, .vi #desc-x{width:9em; text-align:center;}
#desc-y > span, #desc-x > span{ font-size:80%;}
.vi #desc-y > span, .vi #desc-x > span{ font-size:77%;}

#mikra{color:#fff; position:absolute; right:1.5em; top:.5em;}
.en #mikra, .vi #mikra{right:auto; left:1.5em; direction:ltr;}
#mikra div > span{font-size:60%;}
#high-val:before{content:""; height:.5em; width:.5em; background-color:red; margin:.5em 0 0 .25em; float:right;}
#low-val:before{content:""; height:.5em; width:.5em; background-color:blue; margin:.5em 0 0 .25em; float:right;}

.en #high-val:before, .en #low-val:before, .vi #high-val:before, .vi #low-val:before{float:left; margin:.5em .25em 0 0;}

#table-content.content{padding-top:.625em;}
#header-tbl{width:21em; margin:0 1.25em 0 auto;height:3em;}
.en #header-tbl, .vi #header-tbl{direction:ltr;}
#header-tbl tr{background-color:#D28A1E;}
#header-tbl span{font-size:75%;}
#header-tbl span > span{font-size:90%;}
.en #header-tbl span, .vi #header-tbl span{font-size:55%;}
.en #header-tbl span > span{font-size:100%;}
.vi #header-tbl span > span{font-size:100%;}
#header-tbl th{width:7em;}
#header-tbl th:nth-child(2){border-right:1px solid #d1963e; border-left:1px solid #d1963e;}

.table-holder{direction:ltr;}
.table-holder > div {direction:rtl;}

.scroller {width: 97.6%;height: 18.4em;overflow: auto; direction:ltr;
     -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right;
     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}


.table-exp{width: 94.6%; margin:0 auto 0 0; padding:0;height: 100%;}
.en .table-exp, .vi .table-exp{direction:ltr;}
.table-exp tr{height: 1.9em; padding:0;}
.table-exp tr:nth-child(odd) {background-color:#BECAD6}
.table-exp tr:nth-child(even) {background-color:#C8D2DC}
.table-exp td{width: 9em;text-align:center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding:0; line-height:1em;}
.table-exp span{font-size: 0.8em;}

.sep-lines{position:absolute; z-index:400; left:9.5em; width:7em; border-right:1px solid #000; border-left:1px solid #000; height:3em; display:none;}




/***********************chinese***********************************************************************************************/


.zh #tabs > li{float:left; margin-left:0; margin-right:.5em;}


/*********************************************************/


.zh #experiments-content{border-radius: 0 .625em .625em .625em;}

/***********************activity**********************************/


.zh #activity-content{float:left;margin:0em 0 1em 1em;}


.zh #desc-pace{width:9.5em; right: -4.25em;  top: 8em; }


.zh #choose-radio{float:left; direction:ltr; margin-top:1.5em;}

.zh .cet-radio span.radio-text {
    background-position: left;
    padding-right: 0;
    padding-left: 1.5em;
    font-size: 0.8em;
}


.zh #choose-slider{float:right; margin-top:1.25em;}


body.zh #slider-desc{left:-1.3em; font-size:1.3em;top:-15%;}


.zh #exp-btn{width:7em;}
.zh #dots-btn{width:9em; margin:1em 5.5em 1em auto;}


.zh #exp-btn > span, .zh #dots-btn > span{font-size:80%; font-weight:100;}

/***********************results**********************************/


.zh #results-content{float:right;}


.zh #results-tabs > li{float:left;}


.zh #results-body{border-top-right-radius:.625em !important; border-top-left-radius:0 !important;}




.zh #desc-x{width:9em; text-align:center;direction:ltr;}

.zh #mikra{right:auto; left:0.5em; direction:ltr; font-size:1.2em; top:0.1em}

.zh #high-val:before, .zh #low-val:before{float:left; margin:.5em .25em 0 0;}


.zh #header-tbl{direction:ltr;}

.zh #header-tbl span{font-size:76%;}
.zh #header-tbl span > span{font-size:100%;}



.zh .table-exp{direction:ltr;}





.zh #slider-value {
  left: 7em;
}



.zh .pitcher > img {
 margin-left: 5em;
}

.zh #desc-air {
    left: 2.75em;
}