body
{
    background-color: #4E4226;
}

#container {
    position: relative;
    height: 700px;
    width: 500px;
    margin: 10px auto;
    overflow: hidden;
    border: 4px solid #5C090A;
    background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;
}

/* Defines the position and dimensions of the leafContainer div */
#leafContainer 
{
	position: absolute;
	width: 500px;
	height: 440px;
	left: 394px;
	top: 59px;
	overflow: hidden;
	z-index: 12;
}

/* Defines the appearance, position, and dimensions of the message div */
#message
{
    position: absolute;
    top: 160px;
    width: 100%;
    height: 300px;
    background:transparent url('images/textBackground.png') repeat-x center;
    color: #5C090A;
    font-size: 220%;
    font-family: 'Georgia';
    text-align: center;
    padding: 20px 10px;
    -webkit-box-sizing: border-box;
    -webkit-background-size: 100% 100%;
	box-sizing: border-box;
    background-size: 100% 100%;
    z-index: 1;
}

p {
  margin: 15px;
}

a
{
  color: #5C090A;
  text-decoration: none;
}

/* Sets the color of the "Dino's Gardening Service" message */
em 
{
    font-weight: bold;
    font-style: normal;
}

.phone {
  font-size: 150%;
  vertical-align: middle;
}

/* This CSS rule is applied to all div elements in the leafContainer div.
   It styles and animates each leafDiv.
*/
#leafContainer > div 
{
    position: absolute;
    width: 60px;
    height: 15px;
    
    /* We use the following properties to apply the fade and drop animations to each leaf.
       Each of these properties takes two values. These values respectively match a setting
       for fade and drop.
    */
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
	animation-iteration-count: infinite, infinite;
    animation-direction: normal, normal;
    animation-timing-function: linear, ease-in;
}

/* This CSS rule is applied to all img elements directly inside div elements which are
   directly inside the leafContainer div. In other words, it matches the 'img' elements
   inside the leafDivs which are created in the createALeaf() function.
*/
#leafContainer > div > img {
     position: absolute;
     width: 60px;
     height: 15px;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-transform-origin: 50% -100%;
	 animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
     transform-origin: 50% -100%;
}


/* Hides a leaf towards the very end of the animation */
@-webkit-keyframes fade
{
    0%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes fade
{
    0%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Makes a leaf fall from -300 to 600 pixels in the y-axis */
@-webkit-keyframes drop
{
    0%   { -webkit-transform: translate(0px, -50px); }
    100% { -webkit-transform: translate(0px, 650px); }
}
@keyframes drop
{
    0%   { transform: translate(0px, -50px); }
    100% { transform: translate(0px, 650px); }
}
/* Rotates a leaf from -50 to 50 degrees in 2D space */
@-webkit-keyframes clockwiseSpin
{
    0%   { -webkit-transform: rotate(-50deg); }
    100% { -webkit-transform: rotate(50deg); }
}
@keyframes clockwiseSpin
{
    0%   { transform: rotate(-50deg); }
    100% { transform: rotate(50deg); }
}
/* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
@-webkit-keyframes counterclockwiseSpinAndFlip 
{
    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}
@keyframes counterclockwiseSpinAndFlip 
{
    0%   { transform: scale(-1, 1) rotate(50deg); }
    100% { transform: scale(-1, 1) rotate(-50deg); }
}