/* 
 * Dropper v1.0.1 - 2014-11-25 
 * A jQuery plugin for simple drag and drop uploads. Part of the Formstone Library. 
 * http://formstone.it/dropper/ 
 * 
 * Copyright 2014 Ben Plum; MIT Licensed 
 */

.dropper {
  overflow: hidden;
}
.dropper,
.dropper *,
.dropper *:before,
.dropper *:after {
  box-sizing: border-box;
}
.dropper-dropzone {
  /*background: #ffffff;*/
  border: 3px #E2E2E2 dashed;
  border-radius: 0;
  color: #AFAAAA;
  cursor: pointer;
  font-size: 16px;
  font-weight:normal;
  margin: 0;
  padding: 20px;
  text-align: center;
  position:relative;
  z-index:auto; 
  min-height:100px;
}
.dropper-dropzone:hover {
 /* background: #FCFCFC;
  border: 3px #D2D2D2 dashed;
  
  color: #fff;
  background: #18668f;
  border: 3px #fff dashed;
  
  color: #fff;
  background: #e5e5e5;
  border: 3px #fff dashed;*/
  border: 3px #f5f5f5 dashed;
  background: #e8e8e8;
  
}
.dropper-dropzone:hover .dropper-btn {
  color: #fff;
  background: #337ab7;
  
}
.dropper.dropping .dropper-dropzone,
.no-touch .dropper:hover .dropper-dropzone {
 /* background: #FCFCFC;
  border: 3px #D2D2D2 dashed;
  
  color: #fff;
  background: #18668f;
  border: 3px #fff dashed;*/
  
  color: #fff;
  background: #e5e5e5;
  border: 3px #fff dashed;
  
}




.dropper-input {
  /*position: absolute;*/
  left: 100%;
  opacity: 0;
}
.no-opacity .dropper-input {
  left: -999px;
}

.dropper-btn {
	font-family: sans-serif;
	display:inline-block;
	margin-top: 10px;
	padding: 3px 8px;
	position: relative;
	top: -2px;
	text-decoration: none;
	font-size: 14px;
	color:#999999;
	
	
	border:1px #F1F1F1 solid;
	background-color:#F1F1F1;	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; /* future proofing */
	-khtml-border-radius: 3px; /* for old Konqueror browsers */
}








.filelists { margin: 20px 0; }
.filelists h5 { margin: 10px 0 0; font-size: 16px;color: #333;}

.filelist { margin: 0; padding: 10px 0;}
.filelist li { background: #fff; border-bottom: 1px solid #eee; font-size: 12px; list-style: none; padding-top: 5px;padding-left: 5px;padding-right: 5px;padding-bottom: 2px; vertical-align:top; float:none; }
.filelist li:before { display: none; }
/*.filelist li .file { color: #333; }*/
.filelist li .file {  color: #667; font-size: 11px; display:inline-block; vertical-align:top; padding-top:3px;}
.filelist li .img { width:90px; height:90px; text-align:center; overflow:hidden; display:inline-block; float:none;}
.filelist li .img img { height:90px;}
.filelist li .progress1 { color: #667; float: right; font-size: 10px; text-transform: uppercase; padding-top:3px; }
.filelist li .delete { color: red; cursor: pointer; float: right; font-size: 10px; text-transform: uppercase; }
.filelist li.complete .progress1 { color: green; }
.filelist li.error .progress1 { color: red; }

.filelists2 { margin: 20px 0; }
.filelists2 h5 { margin: 10px 0 0; font-size: 16px;color: #333;}

.filelist2 { margin: 0; padding: 10px 0;}
.filelist2 li { background: #fff; border-bottom: 1px solid #eee; font-size: 12px; list-style: none; padding-top: 5px;padding-left: 5px;padding-right: 5px;padding-bottom: 2px; vertical-align:top; float:none; }
.filelist2 li:before { display: none; }
/*.filelist li .file { color: #333; }*/
.filelist2 li .file {  color: #667; font-size: 11px; display:inline-block; vertical-align:top; padding-top:3px;}
.filelist2 li .img { width:90px; height:90px; text-align:center; overflow:hidden; display:inline-block; float:none;}
.filelist2 li .img img { height:90px;}
.filelist2 li .progress1 { color: #667; float: right; font-size: 10px; text-transform: uppercase; padding-top:3px; }
.filelist2 li .delete { color: red; cursor: pointer; float: right; font-size: 10px; text-transform: uppercase; }
.filelist2 li.complete .progress1 { color: green; }
.filelist2 li.error .progress1 { color: red; }

.filelists3 { margin: 20px 0; }
.filelists3 h5 { margin: 10px 0 0; font-size: 16px;color: #333;}

.filelist3 { margin: 0; padding: 10px 0;}
.filelist3 li { background: #fff; border-bottom: 1px solid #eee; font-size: 12px; list-style: none; padding-top: 5px;padding-left: 5px;padding-right: 5px;padding-bottom: 2px; vertical-align:top; float:none; }
.filelist3 li:before { display: none; }
/*.filelist li .file { color: #333; }*/
.filelist3 li .file {  color: #667; font-size: 11px; display:inline-block; vertical-align:top; padding-top:3px;}
.filelist3 li .img { width:90px; height:90px; text-align:center; overflow:hidden; display:inline-block; float:none;}
.filelist3 li .img img { height:90px;}
.filelist3 li .progress1 { color: #667; float: right; font-size: 10px; text-transform: uppercase; padding-top:3px; }
.filelist3 li .delete { color: red; cursor: pointer; float: right; font-size: 10px; text-transform: uppercase; }
.filelist3 li.complete .progress1 { color: green; }
.filelist3 li.error .progress1 { color: red; }