article{text-align:center}form.upload{background:none;margin-top:20px}#upload-wrap{position:relative;width:320px;height:72px;margin:0 auto;cursor:pointer}#upload-wrap input,#upload-wrap button{width:320px;height:72px;display:block;position:absolute;top:0;left:0;cursor:pointer}#upload-wrap input{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;z-index:2}#upload-wrap button{z-index:1;font-size:220%;padding-top:16px}#drop-helper{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(51,51,51,0.85);padding:20px;z-index:10;opacity:0;display:none;-webkit-transition:200ms opacity linear;-moz-transition:200ms opacity linear;-o-transition:200ms opacity linear;transition:200ms opacity linear}#drop-helper.hover{display:block;opacity:1}#drop-helper .wrap{width:100%;height:100%;border:dashed 8px #777}#drop-helper h1{position:absolute;top:50%;width:100%;text-align:center;font-size:500%;line-height:1;margin-top:-.5em;color:#DDD;text-shadow:3px 3px 2px rgba(0,0,0,0.8);z-index:11}#drop-helper .dropzone{position:fixed;z-index:12;width:100%;height:100%;top:0;left:0}.upload-progress-container,.upload-progress-bar{border-radius:5px}.upload-progress-container{display:none;width:82px;height:250px;position:relative;margin:20px auto 0 auto;border:solid 1px #111;background:#151515;overflow:hidden;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}.upload-progress-container.done{-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 0 2px #0c8112;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 0 2px #0c8112;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 0 2px #0c8112}.upload-progress-container.done .upload-progress-bar{background:#0f9816}.upload-progress-container.done .upload-progress-overlay{display:none}.upload-progress-bar,.upload-progress-overlay{position:absolute}.upload-progress-bar{width:80px;background:#114BAF;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);z-index:1;bottom:0;text-align:center;color:#151515;text-shadow:0 1px 0 rgba(255,255,255,0.25);font-weight:bold;-webkit-transition:background 250ms ease;-moz-transition:background 250ms ease;-o-transition:background 250ms ease;transition:background 250ms ease}@-webkit-keyframes uploadarrow{0%{bottom:0%;border-bottom-color:rgba(255,255,255,0)}50%{border-bottom-color:rgba(255,255,255,0.1)}100%{bottom:100%;border-bottom-color:rgba(255,255,255,0)}}@-moz-keyframes uploadarrow{0%{bottom:0%;border-bottom-color:rgba(255,255,255,0)}50%{border-bottom-color:rgba(255,255,255,0.1)}100%{bottom:100%;border-bottom-color:rgba(255,255,255,0)}}@-o-keyframes uploadarrow{0%{bottom:0%;border-bottom-color:rgba(255,255,255,0)}50%{border-bottom-color:rgba(255,255,255,0.1)}100%{bottom:100%;border-bottom-color:rgba(255,255,255,0)}}@keyframes uploadarrow{0%{bottom:0%;border-bottom-color:rgba(255,255,255,0)}50%{border-bottom-color:rgba(255,255,255,0.1)}100%{bottom:100%;border-bottom-color:rgba(255,255,255,0)}}.upload-progress-overlay{z-index:2;width:0;height:0;bottom:0;left:15px;border:solid 20px transparent;border-width:0 25px 20px 25px;border-bottom-color:rgba(255,255,255,0.25);-webkit-animation:uploadarrow 900ms infinite ease-out;-moz-animation:uploadarrow 900ms infinite linear;-o-animation:uploadarrow 900ms infinite linear;animation:uploadarrow 900ms infinite linear}