
#dropzone{
	display: none;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	/* background: rgba(115, 184, 211, .8) url(../images/drop_icon.png) no-repeat center center; */
	background: rgba(210, 222, 228, .5);
	/* border: 2px solid #07c1ff; */
	z-index: 9999;
	-webkit-box-shadow: inset 0px 0px 300px 0px #b4c4cc;
	box-shadow: inset 0px 0px 300px 0px #b4c4cc;
	
	position: absolute;
	z-index: 600;
	overflow: hidden;
}
#dropzone:before{
	content: "Drop 'em anywhere!";
	display: block;
	position: absolute;
	top: 40%;
	left: 0px;
	right: 0px;
	z-index: 9998;
	text-align: center;
	cursor: default;
	font: 200 4em 'Source Sans Pro',sans-serif;
	color: #7d8f99;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

#uploadsQueue{
	position: absolute;
	width: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	background-color: #e9f2f5;
	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	z-index: 600;
}

	#uploadsQueue .processing{
		position: absolute;
		top: -10px;
		bottom: -10px;
		left: 0;
		right: 0;
		z-index: 999;
		/* background-color: rgba(233, 242, 245, 0.95); */
		background-color: rgba(40, 49, 60, .9);
		/* background-color: #35495c;
		background-color: #374552; */
		-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	}
		#uploadsQueue .processing .inner{
			display: block;
			position: absolute;
			width: 100%;
			top: 45%;
			text-align: center;
		}
			#uploadsQueue .processing .message{
				display: block;
				font: 300 22px 'Open Sans', sans-serif;
				margin: 0 auto 5px;
				padding: 0;
				/* color: #516978; */
				color: #fff;
				white-space: nowrap;
			}
			#uploadsQueue .processing .cancel{
				font: 300 14px 'Open Sans', sans-serif;
				/* color: #516978; */
				color: #b5ddf7;
				cursor: pointer;
				text-decoration: underline;
			}
			#uploadsQueue .processing .cancel:hover{
				text-decoration: underline;
				color: #516978;
			}

	#uploadsQueue .head{		
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 140px;
		background-color: #202e3b;
		/* -webkit-box-shadow: 0 0 5px 2px rgba(32, 62, 74, 0.3);
		box-shadow: 0 0 5px 2px rgba(32, 62, 74, 0.3); */
		z-index: 200;
		overflow: hidden;
	}
			#uploadsQueue .head .stats{
				display: block;
				position: absolute;
				width: 185px;
				left: 135px;
				top: 25px;
				white-space: nowrap;
			}
				#uploadsQueue .head .stats li{
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					cursor: default;
					font: 300 14px 'Open Sans', sans-serif;
					color: #c4dee7;
				}
				#uploadsQueue .head .stats .status{
					font-size: 18px;
				}
			
			#uploadsQueue .head .hide{
				display: block;
				position: absolute;
				width: 25px;
				top: 10px;
				bottom: 10px;
				left: 325px;
				cursor: pointer;
			}
			#uploadsQueue .head .hide:hover{
				background-color: #35495c;
			}
			#uploadsQueue .head .hide:after{
				content: "";
				display: block;
				position: absolute;
				width: 0; 
				height: 0; 
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent; 
				border-left: 10px solid #c4e1e8;
				top: 50px;
				right: 7px;
			}
			#uploadsQueue .head .hide:hover:after{
				border-left-color: #fff;
			}
			
			#uploadsQueue .pie{
				display: inline-block;
				position: relative;
				background-color: #35495C;
			}
				#uploadsQueue .pie .slice1,		
				#uploadsQueue .pie .slice2{
					content: "";
					display: block;				
					/* box-shadow: 0 0 0 2px #202e3b; */
				}	
				#uploadsQueue .pie .slice1,
				#uploadsQueue .pie .slice2{
					position: absolute;
					top: 1px;
					left: 1px;
					/* -webkit-transition: .1s;
					-moz-transition: .1s;
					-o-transition: .1s;
					transition: .1s; */
				}
				#uploadsQueue .pie .slice3{
					position: absolute;
					top: 0;
					left: 0;
				}
				#uploadsQueue .pie .slice3{
					-moz-transform: rotate(180deg);
					-webkit-transform: rotate(180deg);
					-o-transform: rotate(180deg);
					transform: rotate(180deg);
					z-index: 3;
					background-color: #35495C;
				}
				#uploadsQueue .pie .slice1{
					-moz-transform: rotate(-180deg);
					-webkit-transform: rotate(-180deg);
					-o-transform: rotate(-180deg);
					transform: rotate(-180deg);
					
					/* transition: transform .5s;
					-webkit-transition: -webkit-transform .5s; */
					z-index: 2;
				}
				#uploadsQueue .pie .slice2{
					-moz-transform: rotate(-180deg);
					-webkit-transform: rotate(-180deg);
					-o-transform: rotate(-180deg);
					transform: rotate(-180deg);
					z-index: 1;
				}
				#uploadsQueue .pie .value{
					position: absolute;
					text-align: center;
					z-index: 5;
					background-color: #202e3b;
				}

			#uploadsQueue .percentageProgress,
				#uploadsQueue .percentageProgress .slice3{
					width: 100px;
					height: 100px;
					-webkit-border-radius: 50px;
					border-radius: 50px;
					box-shadow: 0 0 0 1px #202e3b inset;
				}
				#uploadsQueue .percentageProgress .slice1,
				#uploadsQueue .percentageProgress .slice2{
					width: 98px;
					height: 98px;
					-webkit-border-radius: 49px;
					border-radius: 49px;
				}
				#uploadsQueue .percentageProgress .slice3{
					clip: rect(0px, 100px, 100px, 50px);
				}
				#uploadsQueue .percentageProgress .slice1,
				#uploadsQueue .percentageProgress .slice2{
					clip: rect(0px, 98px, 98px, 49px);
				}	
			#uploadsQueue .percentageProgress{
				vertical-align: middle;
				position: absolute;
				left: 20px;
				top: 20px;
			}
				#uploadsQueue .percentageProgress .value{
					top: 14px;
					left: 14px;
					right: 14px;
					bottom: 14px;
					-webkit-border-radius: 35px;
					border-radius: 35px;
					font: 300 21px/70px 'Open Sans', sans-serif;
					color: #fff;
				}
				#uploadsQueue .percentageProgress .slice1,
				#uploadsQueue .percentageProgress .slice2{
					background: #fff;
					background: -moz-radial-gradient(center, ellipse cover,  #c1c9d0 0%, #ffffff 100%);
					background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c1c9d0), color-stop(100%,#ffffff));
					background: -webkit-radial-gradient(center, ellipse cover,  #c1c9d0 0%,#ffffff 100%);
					background: -o-radial-gradient(center, ellipse cover,  #c1c9d0 0%,#ffffff 100%);
					background: -ms-radial-gradient(center, ellipse cover,  #c1c9d0 0%,#ffffff 100%);
					background: radial-gradient(ellipse at center,  #c1c9d0 0%,#ffffff 100%);
					
					/* background-repeat: repeat;
					-webkit-background-size: 100% 200%;
					-moz-background-size: 100% 200%;
					background-size: 100% 200%;*/
				}
				/* #uploadsQueue .percentageProgress .slice2{
					background: #fff;
					background: -webkit-linear-gradient(#eee, #fff);
					background: -moz-linear-gradient(#eee, #fff);
					background: -o-linear-gradient(#eee, #fff);
					background: -ms-linear-gradient(#eee, #fff);
					background: linear-gradient(#eee, #fff);
					-webkit-transition: background .5s linear;
					-moz-transition: background .5s linear;
					-o-transition: background .5s linear;
					-ms-transition: background .5s linear;
					transition: background .5s linear;
				} */
			
			#uploadsQueue .filesProgress,
			#uploadsQueue .sizeProgress,
				#uploadsQueue .filesProgress .slice3,
				#uploadsQueue .sizeProgress .slice3{
					width: 70px;
					height: 70px;
					-webkit-border-radius: 35px;
					border-radius: 35px;
					box-shadow: 0 0 0 1px #202e3b inset;
			}
				#uploadsQueue .filesProgress .slice3,
				#uploadsQueue .sizeProgress .slice3{
					clip: rect(0px, 70px, 70px, 35px);
				}
				#uploadsQueue .filesProgress .slice1,
				#uploadsQueue .filesProgress .slice2,
				#uploadsQueue .sizeProgress .slice1,
				#uploadsQueue .sizeProgress .slice2{
					width: 68px;
					height: 68px;
					-webkit-border-radius: 34px;
					border-radius: 34px;
				}
				#uploadsQueue .filesProgress .slice1,
				#uploadsQueue .filesProgress .slice2,
				#uploadsQueue .sizeProgress .slice1,
				#uploadsQueue .sizeProgress .slice2{
					clip: rect(0px, 68px, 68px, 34px);
				}	
			
			#uploadsQueue .filesProgress,
			#uploadsQueue .sizeProgress{
				vertical-align: middle;
				margin-right: 6px;
			}
				#uploadsQueue .filesProgress .value,
				#uploadsQueue .sizeProgress .value{
					top: 8px;
					left: 8px;
					right: 8px;
					bottom: 8px;
					-webkit-border-radius: 26px;
					border-radius: 26px;
					font: 300 14px/14px 'Open Sans', sans-serif;
					color: #f8d601;
					padding-top: 11px;
					overflow: hidden;
				}
					#uploadsQueue .filesProgress .value small,
					#uploadsQueue .sizeProgress .value small{
						font-size: 12px;
					}
				#uploadsQueue .filesProgress .slice1,
				#uploadsQueue .filesProgress .slice2,
				#uploadsQueue .sizeProgress .slice1,
				#uploadsQueue .sizeProgress .slice2{
					background: #f2c802;
					background: -moz-radial-gradient(center, ellipse cover,  #fae513 0%, #f1b202 100%);
					background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fae513), color-stop(100%,#f1b202));
					background: -webkit-radial-gradient(center, ellipse cover,  #fae513 0%,#f1b202 100%);
					background: -o-radial-gradient(center, ellipse cover,  #fae513 0%,#f1b202 100%);
					background: -ms-radial-gradient(center, ellipse cover,  #fae513 0%,#f1b202 100%);
					background: radial-gradient(ellipse at center,  #fae513 0%,#f1b202 100%);
				}

	
/* 		#uploadsQueue .head .status{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font: 300 18px 'Open Sans', sans-serif;
			color: #fff;
			cursor: default;
		}
		#uploadsQueue .head .percentage{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font: 400 30px 'Open Sans', sans-serif;
			color: #fff;
			cursor: default;
		}
		#uploadsQueue .head .progress{
			height: 5px;
			position: absolute;
			bottom: 5px;
			left: 10px;
			right: 10px;
		}
		#uploadsQueue .head .progress > div{
			height: 5px;
			width: 0%;
			background-color: rgba(255, 255, 255, .8);
			-webkit-transition: .5s;
			-moz-transition: .5s;
			-o-transition: .5s;
			transition: .5s;
			-webkit-border-radius: 2px;
			border-radius: 2px;
		}
		#uploadsQueue .head .close{
			display: none;
			position: absolute;
			top: 10px;
			right: 10px;				
			width: 20px;
			height: 20px;
			-webkit-transition    : .2s;
			-moz-transition       : .2s;
			-o-transition         : .2s;
			transition            : .2s;
		}			
		#uploadsQueue:hover .head .close{
			display: block;
		}
		#uploadsQueue .head .close:hover{
			cursor: pointer;
		}
		#uploadsQueue .head .close:hover:after,
		#uploadsQueue .head .close:hover:before{
			background-color: rgba(255, 255, 255, 1);
		}
		#uploadsQueue .head .close:after,
		#uploadsQueue .head .close:before{
			content: "";
			display: block;
			position: absolute;
			background-color: rgba(255, 255, 255, .5);
			width: 16px;
			height: 3px;
			top: 8px;
			left: 2px;
		}			
		#uploadsQueue .head .close:after{
			-moz-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		#uploadsQueue .head .close:before{
			-moz-transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
		} */
	
	#uploadsQueue .list{
		position: absolute;
		top: 141px;
		left: 0px;
		right: 10px;
		bottom: 51px;
		border-left: 1px solid #b3c2cc;
	}
		#uploadsQueue .list .content{
			/* padding: 5px 25px 5px 20px; */
			padding: 5px 5px 5px 0;
			margin-bottom: 10px;
		}
			#uploadsQueue .file{
				display: block;
				border-bottom: 1px dotted #7495a4;
				border-bottom: 1px solid #bfc4c5;
				padding: 10px 25px 10px 20px;
				min-width: 200px;
			}
			#uploadsQueue .file:last-child{
				border-bottom: 0;
			}
				#uploadsQueue .file .wrapper{
					margin: 0 -10px;
					padding: 0 10px;
					-webkit-transition: .5s;
					-moz-transition: .5s;
					-o-transition: .5s;
					transition: .5s; 
					position: relative;
				}
				/* #uploadsQueue .file .wrapper:hover{
					background-color: #2a4a57;
				} */
					/* #uploadsQueue .file .preview{
						position: absolute;
						font: 300 30px 'Open Sans', sans-serif;
						color: #fff;
						left: 10px;
						top: 5px;
						width: 64px;
						height: 64px;
						background-color: rgba(255, 255, 255, .1);
					} */
					#uploadsQueue .file .name{
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: default;
						max-width: 245px;
						font: 300 18px 'Open Sans', sans-serif;
						color: #202e3b;
					}
					#uploadsQueue .file .size{
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: default;
						max-width: 245px;
						/* padding-left: 84px; */
						font: 300 14px 'Open Sans', sans-serif;
						color: #89a6b1;
					}
					#uploadsQueue .file .path{
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: default;
						max-width: 270px;
						font: 300 13px 'Open Sans', sans-serif;
						color: #89a6b1;
					}
						#uploadsQueue .file .path a{
							color: #7d949d;
							text-decoration: none;
						}
						#uploadsQueue .file .path a:hover{
							color: #38B8EA;
							text-decoration: underline;
						}
				#uploadsQueue .file .status{
					display: block;
					position: absolute;
					text-align: right;
					font: 300 10px 'Open Sans', sans-serif;
					text-transform: uppercase;
					color: #89a6b1;
					color: #687a81;
					bottom: 0px;
					right: 10px;
				}
				/* #uploadsQueue .file:hover .size,
				#uploadsQueue .file:hover .status,
				#uploadsQueue .file:hover .path,
				#uploadsQueue .file:hover .path a{
					color: #202e3b;
				} */
				
				#uploadsQueue .file .progress{
					width: 100%;
					-webkit-border-radius: 2px;
					border-radius: 2px;
					background-color: #305b6b;
					background-color: #c9d8de;
					background-color: #d9e6eb;
					margin: 5px 0;
				}
				#uploadsQueue .file .progress div{
					width: 0%;
					height: 5px;
					-webkit-transition: .5s;
					-moz-transition: .5s;
					-o-transition: .5s;
					transition: .5s;
					-webkit-border-radius: 2px;
					border-radius: 2px;
					background-color: #2BA2C2;
				}
					#uploadsQueue .file .cancel{
						display: block;
						position: absolute;
						top: 13px;
						right: 10px;				
						width: 12px;
						height: 12px;
						-webkit-transition: .2s;
						-moz-transition: .2s;
						-o-transition: .2s;
						transition: .2s;
					}
					#uploadsQueue .file .cancel:hover{
						cursor: pointer;
					}
					#uploadsQueue .file .cancel:after,
					#uploadsQueue .file .cancel:before{
						content: "";
						display: block;
						position: absolute;
						background-color: #b9cfd7;
						width: 10px;
						height: 3px;
						top: 8px;
						left: 2px;
					}	
					#uploadsQueue .file .cancel:hover:after,
					#uploadsQueue .file .cancel:hover:before{
						background-color: #4a778a;
					}		
					#uploadsQueue .file .cancel:after{
						-moz-transform: rotate(45deg);
						-webkit-transform: rotate(45deg);
						-o-transform: rotate(45deg);
						-ms-transform: rotate(45deg);
						transform: rotate(45deg);
					}
					#uploadsQueue .file .cancel:before{
						-moz-transform: rotate(-45deg);
						-webkit-transform: rotate(-45deg);
						-o-transform: rotate(-45deg);
						-ms-transform: rotate(-45deg);
						transform: rotate(-45deg);
					}
					
					#uploadsQueue .file.waiting .cancel,
					#uploadsQueue .file.canceled .cancel,
					#uploadsQueue .file.failed .cancel,
					#uploadsQueue .file.exists .cancel,
					#uploadsQueue .file.error .cancel,
					#uploadsQueue .file.duplicate .cancel{
						display: none;
					}
				
				
				#uploadsQueue .file.waiting .progress div{
					background-color: #55c22b;
					background-color: #2ba2c2;
					background-image: 
					   -webkit-gradient( linear, 0 0, 100% 100%, 
						  color-stop(.25, rgba(255, 255, 255, .3)), 
						  color-stop(.25, transparent),
						  color-stop(.5, transparent), 
						  color-stop(.5, rgba(255, 255, 255, .3)), 
						  color-stop(.75, rgba(255, 255, 255, .3)), 
						  color-stop(.75, transparent), to(transparent)
					   );
					background-image: 
						-webkit-linear-gradient(
						  -45deg, 
						  rgba(255, 255, 255, .3) 25%, 
						  transparent 25%, 
						  transparent 50%, 
						  rgba(255, 255, 255, .3) 50%, 
						  rgba(255, 255, 255, .3) 75%, 
						  transparent 75%, 
						  transparent
					   );
					background-image: 
						-moz-linear-gradient(
						  -45deg, 
						  rgba(255, 255, 255, .3) 25%, 
						  transparent 25%, 
						  transparent 50%, 
						  rgba(255, 255, 255, .3) 50%, 
						  rgba(255, 255, 255, .3) 75%, 
						  transparent 75%, 
						  transparent
					   );
					background-image: 
						-ms-linear-gradient(
						  -45deg, 
						  rgba(255, 255, 255, .3) 25%, 
						  transparent 25%, 
						  transparent 50%, 
						  rgba(255, 255, 255, .3) 50%, 
						  rgba(255, 255, 255, .3) 75%, 
						  transparent 75%, 
						  transparent
					   );
					background-image: 
						-o-linear-gradient(
						  -45deg, 
						  rgba(255, 255, 255, .3) 25%, 
						  transparent 25%, 
						  transparent 50%, 
						  rgba(255, 255, 255, .3) 50%, 
						  rgba(255, 255, 255, .3) 75%, 
						  transparent 75%, 
						  transparent
					   );
					-webkit-background-size: 30px 30px;
					-moz-background-size: 30px 30px;
					background-size: 30px 30px;
					
					-webkit-animation: cycle 1s linear infinite;
					-moz-animation: cycle 1s linear infinite;
					animation: cycle 1s linear infinite;
				}
				@-webkit-keyframes cycle{
					0%{ background-position: 0 0; }
					100%{ background-position: 30px 30px; }
				}
				@-moz-keyframes cycle{
					0%{ background-position: 0 0; }
					100%{ background-position: 30px 30px; }
				}
				@-keyframes cycle{
					0%{ background-position: 0 0; }
					100%{ background-position: 30px 30px; }
				}
				
				#uploadsQueue .file.done .wrapper{
					/* background-color: #2a4a57; */
				}
				#uploadsQueue .file.done .progress div{
					background-color: #55c22b;
				}
				
				#uploadsQueue .file.exists .progress,
				#uploadsQueue .file.exists .progress div,
				#uploadsQueue .file.duplicate .progress,
				#uploadsQueue .file.duplicate .progress div{
					/* display: none; */
					background-color: #f8d603;
					background-color: #a1b6c4;
				}
				#uploadsQueue .file.failed .progress,
				#uploadsQueue .file.failed .progress div{
					background-color: #bb4f4f;
					background-color: #e45151;
				}
				
				#uploadsQueue .file.done .cancel,
				#uploadsQueue .file.error .cancel{
					display: none;
				}

				#uploadsQueue .file.exists .wrapper,
				#uploadsQueue .file.duplicate .wrapper{
				    opacity: 0.5;
				}
				#uploadsQueue .file.exists:hover .wrapper,
				#uploadsQueue .file.duplicate:hover .wrapper{
					 opacity: 1;
				}
				
	#uploadsQueue .foot{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		/* border-top: 1px solid #9abfc9; */
		-webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
		box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
		background-color: #202E3B;
		text-align: center;
		height: 30px;
		padding: 10px 0;
	}
		#uploadsQueue .foot span{
			color: #b5d7e3;
			cursor: pointer;
			display: inline-block;
			margin: 0 auto;
			font: 300 14px/30px 'Open Sans',sans-serif;
			padding: 0 10px;
			vertical-align: middle;
			border-right: 1px solid #3B464A; /* #4b5e66; */
		}
		#uploadsQueue .foot span:hover{
			text-decoration: underline;
			color: #fff;
		}
		#uploadsQueue .foot span:last-child{
			border-right: 0;
		}
	
