/***
  Styles below are only required if you're using <iframe> fallback in
  addition to HTML5 drag & drop (only working in Firefox/Chrome/Opera 15+).
  You can @import this file and override individual styles. Drag & drop zone
  can be styled in absolutely any way you want so there are no defaults.
 ***/

.fd-zone {
 overflow: hidden;
 position: relative;
 width: 20em;
 margin: 0 auto;
 text-align: center;
 border: 1px dotted #636a6f;
 border-radius: 10px;
 background-color: #EEEBFF;
}
.fd-zone:hover {
 background-color: #E1DBFF;
 border: 1px solid #636a6f;
}

.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;
}
.fd-zone.over {
 border-color: maroon; background: #eee;
}