body {
	background-color: #D9DFE2;
//	overflow: auto;
	margin: 0px;
}

#progress {
		top: 13px;
	    position:absolute;
	    display: block;
	    background-color:#86bf3f;
        width:0%;
        height:162px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		-ms-border-radius: 8px;
		border-radius: 8px;
	    opacity: 1;
            
            /* CSS3 Stripes */
            background-image: linear-gradient(135deg,#86bf3f 25%,#a0cc60 25%,#a0cc60 50%,#86bf3f 50%,#86bf3f 75%,#a0cc60 75%,#a0cc60 100%);
            background-image: -moz-linear-gradient(135deg,#86bf3f 25%,#a0cc60 25%,#a0cc60 50%,#86bf3f 50%,#86bf3f 75%,#a0cc60 75%,#a0cc60 100%);
            background-image: -ms-linear-gradient(135deg,#86bf3f 25%,#a0cc60 25%,#a0cc60 50%,#86bf3f 50%,#86bf3f 75%,#a0cc60 75%,#a0cc60 100%);
            background-image: -o-linear-gradient(135deg,#86bf3f 25%,#a0cc60 25%,#a0cc60 50%,#86bf3f 50%,#86bf3f 75%,#a0cc60 75%,#a0cc60 100%);
            background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #a0cc60),color-stop(.25, #86bf3f),color-stop(.5, #86bf3f),color-stop(.5, #a0cc60),color-stop(.75, #a0cc60),color-stop(.75, #86bf3f),color-stop(1, #86bf3f));
            background-image: -webkit-linear-gradient(135deg,#86bf3f 25%,#a0cc60 25%,#a0cc60 50%,#86bf3f 50%,#86bf3f 75%,#a0cc60 75%,#a0cc60 100%);
            background-size: 40px 40px;

            /* Background stripes animation */
            animation: bganim 3s linear 2s infinite;
            -moz-animation: bganim 3s linear 2s infinite;
            -webkit-animation: bganim 3s linear 2s infinite;
            -o-animation: bganim 3s linear 2s infinite;
            -ms-animation: bganim 3s linear 2s infinite;            
}

@keyframes bganim {
        from {background-position:0px;} to { background-position:40px;}
}
@-moz-keyframes bganim {
        from {background-position:0px;} to { background-position:40px;}
}
@-webkit-keyframes bganim {
        from {background-position:0px;} to { background-position:40px;}
}
@-o-keyframes bganim {
        from {background-position:0px;} to { background-position:40px;}
} 
@-ms-keyframes bganim {
        from {background-position:0px;} to { background-position:40px;}
} 

#dropZone {
	position: absolute;
    color: #808080;
    font: 24px Arial, sans-serif;
    text-align: center;
    overflow: hidden;
	top:13px;

    width:394px;
    height:13px;

    padding: 65px 0px 80px 0px;
	margin-bottom: 10px;

    border: 3px dashed;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	-ms-border-radius: 10px;
    border-radius: 10px;
	
	/* DROPZONE HOVER EXIT TRANSITION */
	-webkit-transition-property:color, border;
	-webkit-transition-duration: 0.2s ,0.2s;
	-webkit-transition-timing-function: linear, ease-in;
	-moz-transition-property:color, border;
	-moz-transition-duration: 0.2s, 0.2s;
	-moz-transition-timing-function: linear, ease-in;
	-ms-transition-property:color, border;
	-ms-transition-duration: 0.2s, 0.2s;
	-ms-transition-timing-function: linear, ease-in;  
	transition-property:color, border;
	transition-duration: 0.2s, 0.2s;
	transition-timing-function: linear, ease-in;
}

#dropZone.hover {
    color:#404040;
	border: 3px dashed #404040;
	-moz-box-shadow: 0 0 30px #FFC700;
	-webkit-box-shadow: 0 0 30px #FFC700;
	-ms-box-shadow: 0 0 50px 10px rgba(255,199,0, .5);
	box-shadow: 0 0 30px 5px rgba(255,255,255, .5) inset, 0 0 30px 5px rgba(255,255,255, .5);
	
	/* DROPZONE HOVER TRANSITION */
	-webkit-transition-property:color, border;
	-webkit-transition-duration: 0.2s ,0.2s;
	-webkit-transition-timing-function: linear, ease-in;
	-moz-transition-property:color, border;
	-moz-transition-duration: 0.2s, 0.2s;
	-moz-transition-timing-function: linear, ease-in;
	-ms-transition-property:color, border;
	-ms-transition-duration: 0.2s, 0.2s;
	-ms-transition-timing-function: linear, ease-in;  
	transition-property:color, border, box-shadow;
	transition-duration: 0.2s, 0.2s;
	transition-timing-function: linear, ease-in;  
}

#dropZone.error {
    font-size: 1.2em;
	color: red;
    padding: 30px 10px 120px 10px;
}

#dropZone.drop {
    color: #404040;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
    border: 3px solid #808080;
    background:url("../img/progress_pixel.png") repeat-y;    
    background-size: 0%;
}

#dropZone.done {
    color: #404040;
    background-size: 100%;
    background: #FFF;
    border: 3px solid #404040;
}