/*-------------------------
	FileDrop Element
--------------------------*/

.fd-zone {				/* Essential FileDrop zone element configuration: */
  position: relative;
  overflow: hidden;
  /* The following are not required but create a pretty box: */
  margin: 0 auto;
  width: 15em;
  height: 319px;			/* this setting doesn't seem to affect the object */
  cursor: default;			/* this setting doesn't seem to affect the object */
  text-align: center;
z-index: 2;
}

.fd-file {				/* Hides <input type="file"> while simulating "Browse" button: */
  position: absolute;
  top: 0;
  right: 0;
  height: 319px;			/* this MUST be set to the same height as the wrapper <div>, not 'height: 100%' */
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 118px;
  cursor: pointer;
  opacity: 0;				/* these two lines hide the <input type='file'> */
  filter: alpha(opacity=0);
  z-index: 1;
}

.fd-zone.over { }			/* Provides visible feedback when use drags a file over the drop zone: */


.dropbox {
  display: none;
  position: absolute;
  top: 40px;
/*
  left: 1px;
  right: 1px;
*/
margin-left: 1px;			/* these two statements had to be used instead of the above two for some reason */
width: calc(100% - 4px);
  height: 319px;
  min-height: 150px;
  color: #ccc;
  background-color: rgba(0,0,0,0.8);
  border: 1px solid #fff;
  border-bottom-left-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  overflow: auto; }

.dropbox #imgClose {
  position: absolute;
  right: 10px;
  margin-top: 5px;
  cursor: pointer;
  z-index: 2; }

.dropbox .message {
  position: absolute;
  display: block;
  margin-top: 150px;
  width: 100%;
  font-size: 18px;
  text-align: center;
  z-index: -1; }

.dropbox .message i { color:#aaa; font-size:10px; }

.dropbox .multiple {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2; }

.dropbox .divFileDrop {
  margin: 10px;
  width: 50px;
  height: 50px;
  border: 1px solid #808080;
  border-radius: 0.5em;
  overflow: hidden;
  z-index: 100px; }

.dropbox .divFileDrop img { margin: 0 5px; }


/*-------------------------
	Image Previews
--------------------------*/


/*-------------------------
	Progress Bars
--------------------------*/

.dropbox .divFileDrop .progressBar {
  display: block;
  width: 0;
  height: 10px;
  background-color: #D8D8D8; }













/*-------------------------
	Dropbox Element
--------------------------*/

#dropbox2:before {
  display: block;
  position: absolute;
  top:0;
  left:0;
  content:'';
  height:4px;
  width:100%;
  border-bottom-left-radius: 0.4em;
  border-bottom-right-radius: 0.4em; }

#dropbox2 {
  display: none;
  position: absolute;
  top: 40px;
  left: 1px;
  right: 1px;
  height: 319px;
  min-height: 150px;
  color: #ccc;
  background-color: rgba(0,0,0,0.8);
  border: 1px solid #fff;
  border-bottom-left-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  overflow: auto; }

#dropbox2 #imgClose {
  position: absolute;
  right: 10px;
  margin-top: 5px;
  cursor: pointer; }

#dropbox2 .message {
  display: block;
  padding-top: 160px;
  font-size: 18px;
  text-align: center; }

#dropbox2 .message i {
  color: #aaa;
  font-size: 10px; }


/*-------------------------
	Image Previews
--------------------------*/

#dropbox2 .preview {
  position: relative;
  float: left;
  margin: 55px 0 0 60px;
  width: 245px;
  height: 215px;
  text-align: center; }

#dropbox2 .preview img {
  display: block;
  max-width: 240px;
  max-height: 180px;
  border: 3px solid #fff;
  box-shadow: 0 0 2px #000; }

#dropbox2 .imageHolder {
  display: inline-block;
  position:relative; }

#dropbox2 .uploaded {
  display: none;
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: url('../images/done.png') no-repeat center center rgba(255,255,255,0.5); }

#dropbox2 .preview.done .uploaded { display: block; }



/*-------------------------
	Progress Bars
--------------------------*/



#dropbox2 .progressHolder {
  position: absolute;
  left:0;
  bottom: 0;
  height:12px;
  width:100%;
  background-color:#252f38;
  box-shadow:0 0 2px #000; }

#dropbox2 .progress {
  position: absolute;
  left:0;
  height:100%;
  width:0;
  background-color:#2586d0;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;
  -moz-transition:0.25s;
  -webkit-transition:0.25s;
  -o-transition:0.25s;
  transition:0.25s; }

#dropbox2 .preview.done .progress { width:100% !important; }