/***
  Styles below are only required if you're using <iframe> fallback in
  addition to HTML5 drag & drop (only working in Firefox/Chrome/Opera 15+).
 ***/

/* Essential FileDrop zone element configuration: */
.fd-zone {
    max-width: 600px;
    position: relative;
    overflow: hidden;
    /* The following are not required but create a pretty box: */
    margin: 0 auto;
    text-align: center;
}

/* Hides <input type="file"> while simulating "Browse" button: */
.fd-file {
    opacity: 0;
    font-size: 118px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    padding: 0;
    margin: 0;
    cursor: pointer;
    filter: alpha(opacity=0);
    font-family: sans-serif;
}

/* Provides visible feedback when user drags a file over the drop zone: */
.fd-zone.over {
    border-color: maroon;
    background: #eee;
}

.fd-smp .progress span {
    animation: progress .7s linear infinite;
    -moz-animation: progress .7s linear infinite;
    -webkit-animation: progress .7s linear infinite;
    -o-animation: progress .7s linear infinite;
    display: block;
    width: 0;
    height: 31px;
    background: url(images/progress.gif);
}

@keyframes progress {
    from {
        background-position: left top;
    }

    to {
        background-position: 30px top;
    }
}

@-moz-keyframes progress {
    from {
        background-position: left top;
    }

    to {
        background-position: 30px top;
    }
}

@-webkit-keyframes progress {
    from {
        background-position: left top;
    }

    to {
        background-position: 30px top;
    }
}

@-o-keyframes progress {
    from {
        background-position: left top;
    }

    to {
        background-position: 30px top;
    }
}