<div id="howToLiveSlider" class="slider" style="height:300px" data-elem="motionslider" data-options="allowDrag:false;">
   <div class="slidesHolder"   style="height:300px" data-elem="slidesHolder" >
      <div class="slide" style="height:300px" data-elem="slide">
         <div class="vehicle" data-motion="{x:680; duration:4; ease:Linear.easeNone}">
            <div class="body" data-motion="{y:-4; duration:0.25},   {y:4; duration:0.5}, {y:0; duration:0.25}" data-motion-options="repeat:3"></div>
            <div class="bigWheel" data-motion="{rotation:780deg; ease:Linear.easeNone; duration:4}"></div>
            <div class="smallWheel" data-motion="{rotation:1300deg; ease:Linear.easeNone; duration:4}"></div>
         </div>
      </div>
   </div>
</div>
<div class="controlHolder">
   <div class="seekControl" data-elem="seek" data-slider="howToLiveSlider" >
      <div class="seekPath">
         <div class="seekPercent" data-elem="percent"></div>
      </div>
      <div class="seekThumb" data-elem="thumb"></div>
   </div>
   <div class="autoplayOn" data-elem="autoplay" data-slider="howToLiveSlider" data-options="onCss:autoplayOn; offCss:autoplayOff"></div>
   <div class="replay controlRight" data-elem="slideThumb" data-slider="howToLiveSlider" ></div>
</div>

.vehicle

{

   width:234px; 

   height:222px; 

   position:absolute; 

   x:0; 

   top:30px;

   border:4px solid transparent;

}


.body

{

   background:url(../assets/body.png) no-repeat;

   width:230px;

   height:174px;

   position:absolute; 

   left:0px; 

   top:0px;

   overflow:hidden; 

}


.bigWheel

{

   background:url(../assets/big_wheel.png) no-repeat;

   width:100px;

   height:100px;

   position:absolute; 

   left:3px; 

   top:120px;

   overflow:hidden; 

}


.smallWheel

{

   background:url(../assets/small_wheel.png) no-repeat;

   width:60px;

   height:60px;

   position:absolute; 

   left:174px; 

   top:159px;

   overflow:hidden; 

}