#recordme{
  position:absolute;
  top:0px;
  left:0px;
  visibility:hidden;
  text-align:center;
}
#gum{
  position:absolute;
  top:0px;
  left:0px;
  width:480px;
}
.theButtons button{
  visibility:hidden;
}

#recorded{
  position:absolute;
  top:0px;
  left:0px;
  width:480px;
  height:360px;

  background: rgba(0,0,255,1);
  background: -moz-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,255,1)), color-stop(100%, rgba(0,255,0,1)));
  background: -webkit-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: -o-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: linear-gradient(135deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#00ff00', GradientType=1 );
  visibility:hidden;
}

#output{
  position:absolute;
  top:0px;
  left:0px;
  width:480px;
  height:360px;
  visibility:hidden;


  background: rgba(0,0,255,1);
  background: -moz-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,255,1)), color-stop(100%, rgba(0,255,0,1)));
  background: -webkit-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: -o-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: linear-gradient(135deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#00ff00', GradientType=1 );

}
.theButtons{
  position:absolute;
  top:0px;
  left:0px;
  width: 480px;
  height:360px;

}
.decompte1{
  margin:0 auto;
  width:50px;
  height:43px;
  border-radius: 150px;

  background: rgba(0,0,255,1);
  background: -moz-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,255,1)), color-stop(100%, rgba(0,255,0,1)));
  background: -webkit-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: -o-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  background: linear-gradient(135deg, rgba(0,0,255,1) 0%, rgba(0,255,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#00ff00', GradientType=1 );

  text-align:center;
  color: #FFFFFF;
  font-size: 25px;
  font-family: DinProBold;
  padding-top: 7px;
  position: absolute;
  top: 280px;
  left: 220px;
}
#deleteRecord{
   background-image: url("../imgs/poubelle.png") ;
   background-repeat:no-repeat;
   width:69px;
   height:60px;
  position:absolute;
  bottom: 18px;
  left: 330px;
  visibility:hidden;
 }
#saveRecord{
  background-image: url("../imgs/valide.png") ;
  background-repeat:no-repeat;
  width:69px;
  height:49px;
  position:absolute;
  bottom: 20px;
  left: 405px;
  visibility:hidden;
}
.decompte2{

  font-size: 18px;
  font-family: DinProBold;
  padding-top: 8px;
  padding-left: 20px;
  text-align:left;
  color:#FFFFFF;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#toggleRecord{
  visibility:hidden;
  opacity:1;
  position:absolute;
  top:300px;
  left:20px;
}
#preview{
  visibility:hidden;
  opacity:1;
  position:absolute;
  top:30px;
  right:20px;
}

#begin{
  visibility:hidden;
  opacity:1;
  position:absolute;
  top:300px;
  left:20px;
}