.bottomArea{
  background-color: #3c3c3c;
  width: 100%;
  height: 45px;
  position: absolute;
  bottom: 0;
}
.controlArea{
  height: 100%;
  position: relative;
  margin: 0 auto;
  bottom: 0;
  background: url(../img/controls/cLogo.png) no-repeat 5px center;
}

.controlArea div{
  vertical-align: top;
}

.playRateBtn{
  font-family: 'S-CoreDream-5Medium';
  font-size: 16.5px;
  color: #fff;
  position: relative;
  width: 75px;
  height: 100%;
  text-align: center;
  line-height: 46px;
  left: 120px;
  display: inline-block;
  cursor: pointer;
}
.playRateBtn:hover{
  background-color: #917772;
  color: #fff6ae;
}
.playRatePop{
  position: absolute;
  width: 75px;
  bottom: -55px;
  left: 120px;
  text-align: center;
  color: #fff;
  background-color: #3c3c3c;
  opacity: 0;
  z-index: -1;
}
.playRatePop div{
  line-height: 33px;
  height: 30px;
  cursor: pointer;
  font-family: 'S-CoreDream-5Medium';
  font-size: 16.5px;
  font-weight: normal;
}
.playRatePop div:hover{
    background-color: #917772;
    color: #fff6ae;
}
.curTime{
  font-family: 'S-CoreDream-5Medium';
  font-size: 18px;
  color: #fff;
  position: relative;
  width: 65px;
  height: 100%;
  text-align: center;
  line-height: 48px;
  left: 120px;
  display: inline-block;
}

.progressBar-main{
  width: 277px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  position: relative;
  top: 19px;
  left: 130px;
  border-radius: 10px;
  display: inline-block;
}
.progressBar-Under{
  width: 0;
  height: 100%;
  background-color: #fff6ae;
  cursor: pointer;
  border-radius: 10px;
}
.progressBar-Pointer{
  background-color: rgb(255, 255, 255);
  background-size: 80%;
  width: 8px;
  height: 26px;
  float: right;
  margin-top: -10px;
  cursor: pointer;
  border-radius: 10px;
}

.totalTime{
  font-family: 'S-CoreDream-5Medium';
  font-size: 18px;
  color: #fff;
  position: relative;
  width: 65px;
  height: 100%;
  text-align: center;
  line-height: 48px;
  left: 140px;
  display: inline-block;
}

.pause{
  background: url(../img/controls/pause.png) no-repeat center;
  position: relative;
  width: 25px;
  height: 100%;
  left: 150px;
  display: inline-block;
  cursor: pointer;
}
.pause:hover{
  background: url(../img/controls/pauseOver.png) no-repeat center;
}
.pause .pauseBubble{
  position: absolute;
  width: 93px;
  height: 42px;
  left: -35px;
}

.play{
  background: url(../img/controls/play.png) no-repeat center;
  position: relative;
  width: 25px;
  height: 100%;
  left: 150px;
  display: inline-block;
  cursor: pointer;
}
.play:hover{
  background: url(../img/controls/playOver.png) no-repeat center;
}
.play .pauseBubble{
  position: absolute;
  width: 93px;
  height: 42px;
  left: -35px;
}

.replay{
  background: url(../img/controls/rePlay.png) no-repeat center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 160px;
  display: inline-block;
  cursor: pointer;
}
.replay:hover{
  background: url(../img/controls/rePlayOver.png) no-repeat center;
}
.replay .rePlayBubble{
  position: absolute;
  width: 93px;
  height: 42px;
  left: -28px;
}

.script{
  background: url(../img/controls/script.png) no-repeat center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 170px;
  display: inline-block;
  cursor: pointer;
}
.script .scriptBubble{
  position: absolute;
  width: 93px;
  height: 42px;
  left: -28px;
}

.volumeOnBtn{
  background: url(../img/controls/volumeOn.png) no-repeat left center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 180px;
  display: inline-block;
  cursor: pointer;
}
.volumeOnBtn:hover{
  background: url(../img/controls/volumeOffOver.png) no-repeat left center;
}
.volumeOnBtn .volumeBubble{
  position: absolute;
  width: 93px;
  height: 42px;
  left: -31px;
}

.volumeOffBtn{
  background: url(../img/controls/volumeOff.png) no-repeat left center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 180px;
  display: inline-block;
  cursor: pointer;
}
.volumeOffBtn:hover{
  background: url(../img/controls/volumeOnOver.png) no-repeat left center;
}
.volumeOffBtn .volumeBubble{
  position: absolute;
  width: 93px;
  height: 42px;
  left: -31px;
}

.volumeBar-main{
  width: 50px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  position: relative;
  top: 19px;
  left: 180px;
  border-radius: 10px;
  display: inline-block;
}
.volumeBar-Under{
  width: 0;
  height: 100%;
  background-color: #fff6ae;
  cursor: pointer;
  border-radius: 10px;
}

.help{
  background: url(../img/controls/help.png) no-repeat left center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 190px;
  display: inline-block;
  cursor: pointer;
}
.help:hover{
  background: url(../img/controls/helpOver.png) no-repeat left center;
}
.help .helpBubble{
  position: absolute;
  width: 93px;
  height: 42px;
  left: -32px;
}

.prevBtn{
  background: url(../img/controls/prev.png) no-repeat center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 200px;
  display: inline-block;
  cursor: pointer;
}
.prevBtn:hover{
  background: url(../img/controls/prevOver.png) no-repeat center;
}
.prevBtn .prevBtnBubble{
  position: absolute;
  width: 93px;
  height: 42px;
  left: -28px;
}

.normal{
  font-family: 'S-CoreDream-6Bold';
  font-size: 27px;
  font-weight: bold;
  color: #fff;
  position: relative;
  width: auto;
  height: 100%;
  text-align: center;
  line-height: 45px;
  left: 210px;
  display: inline-block;
}

.pageNumSlash{
  background: url(../img/controls/pageNumSlash.png) no-repeat center;
  position: relative;
  width: 10px;
  height: 100%;
  left: 210px;
  display: inline-block;
}

.nextBtn{
  background: url(../img/controls/next.png) no-repeat center;
  position: relative;
  width: 35px;
  height: 100%;
  left: 220px;
  display: inline-block;
  cursor: pointer;
}
.nextBtn:hover{
  background: url(../img/controls/nextOver.png) no-repeat center;
}
.nextBtn .nextBtnBubble{
  position: absolute;
  width: 93px;
  height: 42px;
  left: -28px;
}
.endBubble{
  background: url(../img/controls/bubble_next.png) no-repeat right center;
  width: 156px;
  height: 42px;
  position: absolute;
  bottom: -149px;
  right: -37px;
  opacity: 0;
  z-index: -1;
}