<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;  
}