<div class="chel">  
   <div style=" position: relative;" class="head">  
   <div class="l_eye"></div>  
   <div class="r_eye"></div>  
   <div class="smile">)</div>  
   </div>  
   <div style=" position: relative;" class="body">  
   <div class="l_arm"></div>  
   <div class="r_arm"></div>  
   <div class="l_leg"></div>  
   <div class="r_leg"></div>  
   </div>  
  </div>

.chel  
  {  
   height: 404px; width: 334px;  
   margin: 0 auto;  
   bottom:-205px;  
   right:-280px;   
   position:absolute;  
  }  
  .head {  
  width: 50px;  
  height: 50px;  
  background: #31527d;  
  border-radius: 100px;  
  -moz-border-radius: 100px;  
  -webkit-border-radius: 100px;  
  }  
  .r_eye {  
   right: 10px;  
  }  
  .l_eye {  
  left: 10px;  
  }  
  .l_eye, .r_eye {  
  background: white;  
  width: 10px;  
  height: 10px;  
  position: absolute;  
  top:15px;  
  border-radius: 10px;  
  -moz-border-radius: 10px;  
  -webkit-border-radius: 10px;  
  }  

     
  .body {  
  width: 10px;  
  height: 75px;  
  top: 0px;  
  background: #31527d;  
  border-radius: 25px;  
  -webkit-border-radius: 25px;  
  -moz-border-radius: 25px;  
  left: 20px;  
  }  

  .l_arm, .r_arm {  
  height: 50px;  
  border-radius: 25px;  
  -moz-border-radius: 25px;  
  -webkit-border-radius: 25px;  
  top: 25px;  
  }  
  .l_arm, .r_arm, .l_leg, .r_leg {  
  width: 7px;  
  position: absolute;  
  background: #31527d;  
  }  

  .l_leg, .r_leg {  
  height: 40px;  
  top: 75px;  
  border-radius: 0 0 25px 25px;  
  -moz-border-radius: 0 0 25px 25px;  
  -webkit-border-radius: 0 0 25px 25px;  
  }  

  .l_arm {  
  left: -8px;  
  -webkit-transform: rotate(9deg) translate(-1px, -8px);  
  -transform: rotate(-5deg) translate(-4px, -8px);  
  -moz-transform: rotate(-5deg) translate(-4px, -8px);  
  }  
  .r_arm {  
  right: -14px;  
  -webkit-transform: rotate(-10deg) translate(-4px, -8px);  
  -transform: rotate(-5deg) translate(-4px, -8px);  
  -moz-transform: rotate(-5deg) translate(-4px, -8px);  
  }  

  .l_leg {  
  left: 12px;  
  -webkit-transform: rotate(-10deg) translate(-4px, -8px);  
  -transform: rotate(-5deg) translate(-4px, -8px);  
  -moz-transform: rotate(-5deg) translate(-4px, -8px);  
   -webkit-transition: all 1s ease-in;  
  }  
  .r_leg {  
  right: 4px;  
  -webkit-transform: rotate(10deg) translate(-4px, -8px);  
  -transform: rotate(-5deg) translate(-4px, -8px);  
  -moz-transform: rotate(-5deg) translate(-4px, -8px);  
   -webkit-transition: all 1s ease-in;  
  }  

  .head:hover {  
   -webkit-transform: rotate(-5deg) translate(-4px, -8px);  
   -transform: rotate(-5deg) translate(-4px, -8px);  
   -moz-transform: rotate(-5deg) translate(-4px, -8px);  
  }  
  .l_arm:hover{  
   -webkit-transform: rotate(20deg) translate(-7px, -7px);  
   -transform: rotate(15deg) translate(-14px, 0);  
   -moz-transform: rotate(15deg) translate(-14px, 0);  
   -webkit-transition: all 0.5s ease-in;   
  }  
  .r_arm:hover{  
   -webkit-transform: rotate(-21deg) translate(1px, -9px);  
   -transform: rotate(-30deg) translate(30px, 0);  
   -moz-transform: rotate(-30deg) translate(30px, 0);  
   -webkit-transition: all 0.5s ease-in;  
  }  

  .smile {  
  color: white;  
  width: 10px;  
  height: 10px;  
  position: absolute;  
  top: 35px;  
  -webkit-transform: rotate(90deg) translate(0px, 2px);  
  -transform: rotate(-30deg) translate(30px, 0);  
  -moz-transform: rotate(-30deg) translate(30px, 0);  
   font-size: 11px;  
  }  
  .smile {  
  left: 25px;  
  }