/* Animate a rectangle fashioned out of front tire of a car; only tire is shown */

<style>
body
{
	padding: 0;
	margin: 0;
}

@keyframes carAnimation
{
   /* 0% { left: 1100px; } */	/* Initial position */
   /* 100% { left: -340px; } */	/* Final position */
    0% { left: 50px; }	        /* Initial position */
    100% { left: 50px; }	/* Final position */

}

@-webkit-keyframes carAnimation
{
   /*  0% { left: 1100px; } */
   /* 100% { left: -340px; } */
   
    0% { left: 50px; }	 /* Initial position */
    100% { left: 50px; } /* Final position */
}

@-moz-keyframes carAnimation
{
    /* 0% { left: 1100px; } */
    /* 100% { left: -340px; } */

    0% { left: 50px; }	 /* Initial position */
    100% { left: 50px; } /* Final position */
}

@-ms-keyframes carAnimation
{
   
   /* 0% { left: 1100px; } */
  /*  100% { left: -340px; } */
   
    0% { left: 50px; }	/* Initial position */
    100% { left: 50px; }	/* Final position */
}


@keyframes tyreAnimation
{
    0% { transform: rotate(1800deg); }	  /* Initial angle */
	100% { transform: rotate(0); }	  /* Final angle */
}

@-webkit-keyframes tyreAnimation
{
    0% { -webkit-transform: rotate(1800deg); }
	100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes tyreAnimation
{
    0% { -moz-transform: rotate(1800deg); }
	100% { -moz-transform: rotate(0); }
}

@-ms-keyframes tyreAnimation
{
    0% { -ms-transform: rotate(1800deg); }
  100% { -ms-transform: rotate(0); }
}

#container
{
    position: relative;	/* Relative pos. - just that we can place absolute divs in there */
    width: 100%;	/* Yes this will get the whole page width */
    height: 200px;	/* changed from  600px height */
    overflow: hidden;	/* Really important */
}

#car
{
    position: absolute;	    /* We position the car absolute in the container */
    width: 150px;		/* The total width (changed from 400px) */
    height: 210px;		/* The total height incl. tires and chassis */
    z-index: 1;			/* car is in front of the grass */
    top: -70px; /*300px*/      /* distance from the top (y-coordinate) */
    left: 30px;			/* distance to the left (x-coordinate) */
	
    -webkit-animation-name: carAnimation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count:  1; /* infinite; */
    -webkit-animation-timing-function: linear;
	
    -moz-animation-name: carAnimation;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: 1; /* infinite; */
    -moz-animation-timing-function: linear;
	
    -ms-animation-name: carAnimation;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: 1;  /* changed from infinite; */
    -ms-animation-timing-function: linear;
	
    animation-name: carAnimation;
    animation-duration: 5s;
    animation-iteration-count: 1; /* infinite; */
    animation-timing-function: linear;
}

#chassis
{
	position: absolute;   /* This defines the space of our car w/o tires */
	width: 400px;			/* The total width */
	height: 130px;			/* The height of the chassis */
	background: #FF9900;		/* Some color */
	border: 2px solid #FF6600;	/* Some thick border */
}

.tire
{
	z-index: 1;		/* Always in front of the chassis */
	position: absolute;     /* Absolute positioned */
	bottom: 0;		/* Will be placed at the bottom of the car */
	border-radius: 60px;	/* And there is our radius ! */
	 height: 120px;		/* 2 * radius = height */
	width: 120px; 		/* 2 * radius = width */
        /* background: #FFFFFF;*/	/*  #0099FF; The filling color */
        /* background: transparent; */
        /* border: 1px solid #3300FF; */ /* And the border color and width */

        /* opacity:0.4; */
        /* filter:alpha(opacity=40); */ /* For IE8 and earlier */
	
	-webkit-animation-name: tyreAnimation;
        -webkit-animation-duration: 5s;
        -webkit-animation-iteration-count: 1; /* infinite; */
        -webkit-animation-timing-function: linear;
	
	-moz-animation-name: tyreAnimation;
        -moz-animation-duration: 5s;
        -moz-animation-iteration-count: 1; /* infinite; */
        -moz-animation-timing-function: linear;
	
	-ms-animation-name: tyreAnimation;
        -ms-animation-duration: 5s;
        -ms-animation-iteration-count: 1; /* infinite; */
        -ms-animation-timing-function: linear;
	
	animation-name: tyreAnimation;
        animation-duration: 5s;
        animation-iteration-count: 1;   /* infinite; */
        animation-timing-function: linear;
}

#fronttire
{
     right: 20px; /* Positions the right tire with some distance to the edge */
}

#backtire
{
    left: 20px; /* Positions the left tire with some distance to the edge */
}

#grass
{
     position: absolute;   /* Grass is absolut positioned in the container */
	width: 100%;		/* Takes all the width */
	height: 180px;		/* And some height (changed from 130px)*/
	bottom: 0;		/* 0 distance to the bottom */
	background: -webkit-linear-gradient(bottom, #919148, #ebebd6);
	background: -moz-linear-gradient(bottom, #919148, #ebebd6);
	background: -ms-linear-gradient(bottom, #919148, #ebebd6); */
	background: linear-gradient(bottom, #919148, #ebebd6); /* Currently we need all of them */
}

.hr, .vr  /* Rules for both: hr and vr */
{
	position: relative; /* absolute;*//* Want to position them absolutly */
	background: url(../images/speakingintongues5s.jpg);  /* red; #3300FF;*/     /* The border color */
        
        /* opacity:1.0; */
        /* filter:alpha(opacity=100); */ /* For IE8 and earlier */

        /* add rounded corners for the cross */
    	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-khtml-border-radius: 10px;
    	border-radius: 10px;
}

.hr
{
	height: 100px;	/* Linewidth of 1 Pixel */
	width: 100%;	/* Just a straight line (horizontal) */
	left: 0;        /* 0 */
	top: 40px;	/* Remember 60px was the radius ! */
                        /* set to 80px for eliptical trajectory */
}       

/*
.vr
{
	width: 40px;		// Linewidth of 1 Pixel  
	height: 100%;	        // Just a straight line (vertical) 
	left: 40px;		// Remember 60px was the radius ! 
	top: -40px;             // set to 0 for eliptical trajectory  
}
*/
</style>