.qq-uploader { position:relative; width: 100%;}


.qq-upload-button {
		margin-bottom:12px; /*Make space between this and list of uploads*/
    display:block; /* or inline-block */
    width:105px;/*width: 105px; padding: 7px 0; text-align:center;    
    background:#880000; border-bottom:1px solid #ddd;color:#fff;*/
}
/*
 * Use Archetype styled button.
.qq-upload-button-hover {background:#cc0000;}
.qq-upload-button-focus {outline:1px dotted black;}
*/
.qq-upload-drop-area {
    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
    background:#FF9797; text-align:center; 
}
.qq-upload-drop-area span {
    display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
}
.qq-upload-drop-area-active {background:#FF7171;}

.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;}
.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
    margin-right: 7px;
}

.qq-upload-file {}
.qq-upload-spinner {display:inline-block; background: url("loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
.qq-upload-size,.qq-upload-cancel {font-size:11px;}

.qq-upload-failed-text {display:none;}
.qq-upload-fail .qq-upload-failed-text {display:inline;}


/** CUSTOM **/

.qq-upload-list
		{
			list-style:none;
			margin:0;
		}
		.qq-upload-size
		{
			color: rgba(0, 0, 0, 0.5);
		}
		
		.qq-progress-bar-bg
		{
			
			background: none repeat scroll 0 0 #EFEFEF;
			border: 1px solid rgba(0, 0, 0, 0.2);
			border-radius: 1em;
			margin: 0 0 2px;
			overflow: hidden; /* progress bar sticks out at 0% or so. */
			/* Bar which is placed behind the progress */
			/* Usual setup stuff */
			
			/* Pad right so we don't cover the borders when fully progressed */
			padding-right: 2px;
			
			/* For browser that don't support gradients, we'll set a blanket background colour */
			background-color: #abb2bc;
			
			/* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */
			/* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress */
			border-radius: 35px;
			-moz-border-radius: 35px;
			-webkit-border-radius: 35px;
			
			/* Webkit background gradient */
			background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
			/* Mozilla background gradient */
			background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
			
			/* Give it the inset look by adding some shadows and highlights 
			-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px #FFF;
			-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px #FFF;*/
			box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px #FFF;
			
		}
		
		
		/* Webkit animation keyframes */
		@-webkit-keyframes animate-stripes {
			from {
				background-position: 0 0;
			}
			
			to {
			 background-position: 44px 0;
			}
		}
		
		.qq-progress-bar
		{
			white-space:nowrap;
			overflow:visible;
			/*background: none repeat scroll 0 0 #e4e4e4;*/
			border-radius: 1em;
			padding: 2px 0 0 4px;
			
   /*  background: -moz-repeating-linear-gradient(left top -30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 15px, rgba(255, 255, 255, 0) 15px, rgba(255, 255, 255, 0) 30px) repeat scroll 0 0%, -moz-linear-gradient(#9BDD62 0%, #74D04C 100%) repeat scroll 0 0 transparent;
    border: 1px solid #4C8932;
    border-radius: 35px 35px 35px 35px;
    box-shadow: 0 1px 0 0 #DBF383 inset, 0 -1px 1px #58C43A inset;
    display: block;
    height: 33px;
   overflow: hidden;
    position: relative;		*/
	 
		/* Progress part of the progress bar */
		
			/* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */
			/* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress-bar */
			-moz-border-radius: 35px;
			-webkit-border-radius: 35px;
			border-radius: 35px;
			
			/* Set the background size so the stripes work correctly */
			-webkit-background-size: 44px 44px; /* Webkit */
			
			/* For browser that don't support gradients, we'll set a blanket background colour */
			background-color: #74d04c;
			
			/* Webkit background stripes and gradient */
			background: -webkit-gradient(linear, 0 0, 44 44,
				color-stop(0.00, rgba(255,255,255,0.17)),
				color-stop(0.25, rgba(255,255,255,0.17)),
				color-stop(0.26, rgba(255,255,255,0)),
				color-stop(0.50, rgba(255,255,255,0)),
				color-stop(0.51, rgba(255,255,255,0.17)),
				color-stop(0.75, rgba(255,255,255,0.17)),
				color-stop(0.76, rgba(255,255,255,0)),
				color-stop(1.00, rgba(255,255,255,0))
			), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
			
			/* Mozilla (Firefox etc) background stripes */
			/* Note: Mozilla's support for gradients is more true to the original design, allowing gradients at 30 degrees, as apposed to 45 degress in webkit. */
			background: -moz-repeating-linear-gradient(top left -30deg, 
				rgba(255,255,255,0.17), 
				rgba(255,255,255,0.17) 15px, 
				rgba(255,255,255,0) 15px, 
				rgba(255,255,255,0) 30px
			), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
			
			/* Webkit embossing */
			-webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
			/* Mozilla embossing */
			-moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
			/* IE9 and Opera embossing */
			box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
			
			/* Give it a higher contrast outline */
			border: 1px solid #4c8932;
			
			/* Webkit magic */
			-webkit-animation: animate-stripes 2s linear infinite;
			
			/* TODO: Wait for Mozilla to support animation, then implement */	 
		}
		
		.qq-upload-success .qq-progress-bar, .qq-upload-fail .qq-progress-bar
		{
			/* Progress bar on SUCCESSful upload */
			/* Progress bar on FAILed upload */
			background:none;
			border-color:rgba(0,0,0,0);
			box-shadow:none;
		}
		
		.qq-upload-success .qq-progress-bar-bg
		{
			/* Progress bar on SUCCESSful upload */
			background:#9bdd62;
			/* Webkit background gradient */
			background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
			/* Mozilla background gradient */
			background: -moz-linear-gradient(#74d04c 0%, #9bdd62 100%);
		}
		
		.qq-upload-fail .qq-progress-bar-bg
		{
			/* Progress bar on FAILed upload */
			background:#fcc;
			/* Webkit background gradient */
			background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EBA1A1), color-stop(1, #fcc));
			/* Mozilla background gradient */
			background: -moz-linear-gradient(#EBA1A1 0%, #fcc 100%);
		}
		
		.qq-progress-bar-inner
		{
			padding:2px 0px 2px 6px;
		}
		
		.qq-upload-cancel
		{
			position: absolute;
			right: 0px;
		}
		
		.qq-upload-fail .qq-upload-failed-text
		{
			padding: 0 6px;
			position: absolute;
			right: 0;
				
			color: #CC0000;
			font-weight: bold;
			padding: 2px 6px;
			position: absolute;
			right: 0;
			text-shadow: 1px 1px 0 #FFE4E4;				
		}