/*
html, body {
    background-color: #111;
    margin: 0;
    height: 100%;
    overflow: hidden;
}
*/
.toaster {
    position: absolute;
    width: 64px;
    height: 64px;
    background-image: url("toaster-sprite.gif");
}

.toast {
    position: absolute;
    width: 64px;
    height: 64px;
    background-image: url("toast1.gif");
}

/**
        * Toaster Animations
        *
        * There are several kinds of toaster animations, marked as t1, t2, & t3.
        *
        * T1 is fastest speed
        * T2 is mid speed & flaps out of sequence with T1
        * T3 is the common speed
        * T4 is a deleyd batch going at the fastest speed
        * T5, T6, T7, T8, & T9 are a delayed batch of toasters going at the common speed
        */
.t1 {
    -webkit-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
    -moz-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
    -ms-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
    -o-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
    animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
}

.t2 {
    -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
    -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
    -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
    -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
    animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
}

.t3 {
    -webkit-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
    -moz-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
    -ms-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
    -o-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
    animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
}

.t4 {
    -webkit-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
    -moz-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
    -ms-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
    -o-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
    animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
}

.t5 {
    -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
    -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
    -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
    -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
    animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
}

.t6 {
    -webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
    -moz-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
    -ms-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
    -o-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
    animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
}

.t7 {
    -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
    -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
    -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
    -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
    animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
}

.t8 {
    -webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
    -moz-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
    -ms-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
    -o-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
    animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
}

.t9 {
    -webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
    -moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
    -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
    -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
    animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
}
/**
        * Toast Animations
        *
        * There are several kinds of toaster animations, marked as ts1, ts2, & ts3.
        *
        * Tst1 is fast
        * Tst2 is mid speed
        * Tst3 is the common speed
        * Tst4 is a delayed batch of toast going at the common speed
        */
.tst1 {
    -webkit-animation: fly 10s linear infinite;
    -moz-animation: fly 10s linear infinite;
    -ms-animation: fly 10s linear infinite;
    -o-animation: fly 10s linear infinite;
    animation: fly 10s linear infinite;
}

.tst2 {
    -webkit-animation: fly 16s linear infinite;
    -moz-animation: fly 16s linear infinite;
    -ms-animation: fly 16s linear infinite;
    -o-animation: fly 16s linear infinite;
    animation: fly 16s linear infinite;
}

.tst3 {
    -webkit-animation: fly 24s linear infinite;
    -moz-animation: fly 24s linear infinite;
    -ms-animation: fly 24s linear infinite;
    -o-animation: fly 24s linear infinite;
    animation: fly 24s linear infinite;
}

.tst4 {
    -webkit-animation: fly 24s 12s linear infinite;
    -moz-animation: fly 24s 12s linear infinite;
    -ms-animation: fly 24s 12s linear infinite;
    -o-animation: fly 24s 12s linear infinite;
    animation: fly 24s 12s linear infinite;
}

/**
        * Starting positions of objects (both toast & toasters).
        *  - There is a different position for each object to prevent overlapping.
        *  - We use percentages in order to accomodate for all window dimensions.
        *  - Use -6% as the smallest amount for remaining off-screen.
        *  - Organized into reverse "L" shaped batches to keep a constant flow.
        */
/* Batch 1 (-10% to -20%) */
/* Top edge, from right to left */
.p6 {
    right: -2%;
    top: -10%;
}

.p7 {
    right: 10%;
    top: -12%;
}

.p8 {
    right: 20%;
    top: -18%;
}

.p9 {
    right: 30%;
    top: -13%;
}

.p10 {
    right: 40%;
    top: -17%;
}

.p11 {
    right: 50%;
    top: -11%;
}

.p12 {
    right: 60%;
    top: -20%;
}
/* Right side, from top to bottom */
.p13 {
    right: -10%;
    top: 10%;
}

.p14 {
    right: -13%;
    top: 20%;
}

.p15 {
    right: -17%;
    top: 30%;
}

.p16 {
    right: -15%;
    top: 50%;
}

.p17 {
    right: -20%;
    top: 70%;
}

/* Batch 2 (-20% to -40%) */
/* Top edge, from right to left */
.p18 {
    right: 0%;
    top: -26%;
}

.p19 {
    right: 10%;
    top: -20%;
}

.p20 {
    right: 20%;
    top: -36%;
}

.p21 {
    right: 30%;
    top: -24%;
}

.p22 {
    right: 40%;
    top: -33%;
}

.p23 {
    right: 60%;
    top: -40%;
}
/* Right side, from top to bottom */
.p24 {
    right: -26%;
    top: 10%;
}

.p25 {
    right: -36%;
    top: 30%;
}

.p26 {
    right: -29%;
    top: 50%;
}

/* Batch 3 (-40% to -60%)*/
/* Top edge, from right to left */
.p27 {
    right: 0;
    top: -46%;
}

.p28 {
    right: 10%;
    top: -56%;
}

.p29 {
    right: 20%;
    top: -49%;
}

.p30 {
    right: 30%;
    top: -60%;
}
/* Right side, from top to bottom */
.p31 {
    right: -46%;
    top: 10%;
}

.p32 {
    right: -56%;
    top: 20%;
}

.p33 {
    right: -49%;
    top: 30%;
}

/* Flapping animation */
@-webkit-keyframes flap {
    from {
        background-position: 0px;
    }

    to {
        background-position: -256px;
    }
}

@-moz-keyframes flap {
    from {
        background-position: 0px;
    }

    to {
        background-position: -256px;
    }
}

@-o-keyframes flap {
    from {
        background-position: 0px;
    }

    to {
        background-position: -256px;
    }
}

@keyframes flap {
    from {
        background-position: 0px;
    }

    to {
        background-position: -256px;
    }
}

/* Gliding animation using translate */
/* Moving 1600px, to accomodate for large screens */
@-webkit-keyframes fly {
    from {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    to {
        -webkit-transform: translate(-2460px, 2460px);
        -moz-transform: translate(-2460px, 2460px);
        -o-transform: translate(-2460px, 2460px);
        -ms-transform: translate(-2460px, 2460px);
        transform: translate(-2460px, 2460px);
    }
}

@-moz-keyframes fly {
    from {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    to {
        -webkit-transform: translate(-2460px, 2460px);
        -moz-transform: translate(-2460px, 2460px);
        -o-transform: translate(-2460px, 2460px);
        -ms-transform: translate(-2460px, 2460px);
        transform: translate(-2460px, 2460px);
    }
}

@-o-keyframes fly {
    from {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    to {
        -webkit-transform: translate(-2460px, 2460px);
        -moz-transform: translate(-2460px, 2460px);
        -o-transform: translate(-2460px, 2460px);
        -ms-transform: translate(-2460px, 2460px);
        transform: translate(-2460px, 2460px);
    }
}

@keyframes fly {
    from {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    to {
        -webkit-transform: translate(-2460px, 2460px);
        -moz-transform: translate(-2460px, 2460px);
        -o-transform: translate(-2460px, 2460px);
        -ms-transform: translate(-2460px, 2460px);
        transform: translate(-2460px, 2460px);
    }
}