/*
File: MoFalling.css

Abstract: Defines CSS properties for the WithCSSExtensions sample.
          Applies animations to falling Mo instanes. Defines the appearance, position, and dimensions of 
          all div elements on the "Falling Mo  -- Using CSS Animations and Transforms" page.
          
Version: 1.0

Feb 20 modified from Leaves.css
Feb 21 expanded 


*/

body
{
/*    background: #416EB2; */
    background: #FFFFFF;

    width: 500px;
    height: 800px;
    margin: 0px;
}


/* Defines the position and dimensions of the MoContainer div */
#MoContainer 
{
    position: absolute;
    top: 0px;
    width: 500px;
    height: 800px;
    z-index: 0;
    overflow: hidden;
}


/* Defines the appearance, position, and dimensions of the message div */
#message
{
    position: relative;
    width: 360px;
    margin: 100px auto 0px auto;
    background: rgba(255, 255, 255, 0.0);
    /* Create a round layout */
    -webkit-border-radius: 30px;
    font-size: 180%;
    font-family: 'Arial Rounded MT Bold';
    text-align: center;
    padding: 2px 2px;
}


/* Sets the color of the "Coming Soon" message 
em 
{
    color: #000000;
    font-weight: bold;
} */


/* This CSS rule is applied to all div elements in the MoContainer div.
   It styles and animates each MoDiv.
*/
#MoContainer > div 
{
    position: absolute;
    width: 100px;
    height: 150px;
    
    /* We use the following properties to apply the fade and drop animations to each Mo.
       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;
}

/* This CSS rule is applied to all img elements directly inside div elements which are
   directly inside the MoContainer div. In other words, it matches the 'img' elements
   inside the MoDivs which are created in the createAMo() function.
*/
#MoContainer > div > img {
     position: absolute;
     width: 100px;
     height: 150px;

    /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpin
       animations on each Mo.
       The createAMo function in the MoFalling.js file determines whether a Mo has the 
       clockwiseSpin or counterclockwiseSpin animation.
    */
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-transform-origin: 50% -100%;
}


/* Hides a Mo towards the very end of the animation */
@-webkit-keyframes fade
{
    /* Show a Mo while into or below 95 percent of the animation and hide it, otherwise */
    0%   { opacity: 1; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 1; }
}


/* Makes a Mo fall from -300 to 600 pixels in the y-axis */
@-webkit-keyframes drop
{
    /* Move a Mo to -300 pixels in the y-axis at the start of the animation */
    0%   { -webkit-transform: translate(0px, -150px); }
    /* Move a Mo to 600 pixels in the y-axis at the end of the animation */
    100% { -webkit-transform: translate(0px, 800px); }
}

/* Rotates a Mo from -10 to 10 degrees in 2D space */
@-webkit-keyframes clockwiseSpin
{
    /* Rotate a Mo by -10 degrees in 2D space at the start of the animation */
    0%   { -webkit-transform: rotate(-10deg); }
    50%   { -webkit-transform: rotate(10deg); }
    /*  Rotate a Mo by 10 degrees in 2D space at the end of the animation */
    100% { -webkit-transform: rotate(-10deg); }
}


/* Mo and rotates it from 15 to -15 degrees in 2D space */
@-webkit-keyframes counterclockwiseSpin 
{
    /* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */
 /*   0%   { -webkit-transform: scale(-1, 1) rotate(15deg); }  - Remove the Flip*/
    0%   { -webkit-transform:  rotate(15deg); }
    40%   { -webkit-transform:  rotate(-8deg); }
    60%   { -webkit-transform:  rotate(8deg); }
    /* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */
/*    100% { -webkit-transform: scale(-1, 1) rotate(-15deg); } */
    100% { -webkit-transform: rotate(-15deg); }
}