
/* reservoir */
.reservoir_block {float:left;margin-top:20px;margin-left:5px;margin-right:5px;width:122px;height:230px;}
.reservoir_block .res_damname {float:left;padding-left:7px;margin-bottom:5px;width:115px;height:50px;line-height:25px;font-size:18px;text-align:left;font-family:'·L³n¥¿¶ÂÅé','Microsoft JhengHei',Verdana;}
.reservoir_block .res_update {float:left;width:122px;height:25px;line-height:20px;font-size:13px;color:#666666;text-align:right;font-family:'·L³n¥¿¶ÂÅé','Microsoft JhengHei',Verdana;}
.reservoir_block .reservoir {float:left;width:122px;height:145px;border-bottom:2px #d0d0d0 solid;}
.reservoir_block .reservoir .res_dam	{float:top;margin:0 auto;width:114px;height:145px;background:#d0d0d0;border-top-left-radius:7px;border-top-right-radius:7px;border-bottem:5px #d0d0d0 solid;}
.reservoir_block .reservoir .res_dam  .res_scale    {float:right;margin-right:3px;margin-top:20px;width:4px;height:120px;background:#ffffff;}
.reservoir_block .reservoir .res_dam  .res_scale    .res_scale_1 {float:top;width:100%;background:#3283cf;}
.reservoir_block .reservoir .res_dam  .res_scale    .res_scale_2 {float:top;width:100%;background:#32cf45;}
.reservoir_block .reservoir .res_dam  .res_scale    .res_scale_3 {float:top;width:100%;background:#f3f151;}
.reservoir_block .reservoir .res_dam  .res_scale    .res_scale_4 {float:top;width:100%;background:#e94b4b;}
.reservoir_block .reservoir .res_dam  .res_scale_arr    {float:right;margin-right:3px;margin-top:0px;width:10px;height:120px;}
.reservoir_block .reservoir .res_dam  .res_scale_arr .arrblock {float:top;margin-top:15px;font-size:16px;color:#ffffff;}

.reservoir_block .reservoir .res_dam  .res_wlevel	{float:right;width:80px;height:140px;border:1px #d0d0d0 solid;border-bottom-left-radius:20px;border-bottom-right-radius:0px;border-right:1px #d0d0d0 solid;border-top:0px #ffffff solid;background:#3283cf;}
.reservoir_block .reservoir .res_dam  .res_wlevel .res_emp	{float:top;width:100%;height:1px;background:#ffffff;}
.reservoir_block .reservoir .res_dam  .res_wlevel .res_empstr {float:top;width:100%;height:20px;background:#ffffff;line-height:20px;font-size:13px;}
.reservoir_block .reservoir .res_dam  .res_wlevel .res_fillstr {float:top;width:100%;height:20px;line-height:20px;font-size:20px;color:#ffffff;font-family:Arial, Clean,Verdana;font-weight:bold;}


/*.water_box { position: relative; bottom: 0px; top:0px;left: 0; margin-left: -114px; width: 160px; clear: both; display: block; height: 25px; border-top: none; overflow: hidden; }*/

/* safari 3+, chrome 1+, opera9+ */
body:nth-of-type(1) .water_box { position: relative; bottom: 0px; top:0px;left: 0; margin-left: -34px; width: 80px; clear: both; display: block; height: 31px; border-top: none; overflow: hidden; }
/* safari 3+, chrome 1+, opera9+ */
<!--[if IE]> 
.water_box { position: relative; bottom: 0px; top:0px;left: 0; margin-left: -34px; width: 80px; clear: both; display: block; height: 31px; border-top: none; overflow: hidden; }
<![endif]--> 

.water_box svg { position: absolute; top: 0px; margin-left: 0px;}

.waveShape { -webkit-animation-name: waveAction; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 0.5s; -ms-animation-name: waveAction; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -ms-animation-duration: 0.5s; animation-name: waveAction; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 1.5s; width: 200px; height: 50px; fill: #3283cf; position: absolute; }
@-webkit-keyframes fillAction {  0% {
 -webkit-transform: translate(0, 145px);
 transform: translate(0, 145px);
}
 100% {
 -webkit-transform: translate(0, -5px);
 transform: translate(0, -5px);
}
}
@-moz-keyframes fillAction {  0% {
 -webkit-transform: translate(0, 145px);
 transform: translate(0, 145px);
}
 100% {
 -webkit-transform: translate(0, -5px);
 transform: translate(0, -5px);
}
}
@-webkit-keyframes waveAction {  0% {
 -webkit-transform: translate(-150px, 0);
 transform: translate(-150px, 0);
}
 100% {
 -webkit-transform: translate(0px, 0);
 transform: translate(0px, 0);
}
}
@-moz-keyframes waveAction {  0% {
 -webkit-transform: translate(-150px, 0);
 transform: translate(-150px, 0);
}
 100% {
 -webkit-transform: translate(0px, 0);
 transform: translate(0px, 0);
}
}
