@charset "utf-8";

body { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; }
#wrap { width: 800px; margin: 0 auto 80px; }
#wrap form { margin-bottom: 30px; }
h1 { font-size: 40px; }
h3 span { font-weight: normal; }
progress { display: none; }
#no-items { margin-left: -38px; list-style: none; }
#file-list li { margin-bottom: 10px; }
article ul li { margin-bottom: 20px; }
li p { margin: 0; }
hr { margin: 30px 0; }

/*
 * tables
 */
table { margin: 5px 0 0; width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0; }
table th,
table td { padding: 8px 10px; line-height: 18px; }
table th { background: #DBE9F7; }  
.table-stripe { border: solid 1px #ccd5dc; }
.table-stripe th,
.table-stripe td { border: solid 1px #ccd5dc; }
.table-stripe tr:nth-child(even) { background: #EEF3F8; }

/*
 * dropzone
 */
#dropzone { 
  padding: 20px; width: 760px; height: 100%; min-height: 188px; 
  overflow: hidden; border: solid 2px #bbb; border-radius: 3px; background: #eee; font-size: 12px;
  box-shadow: inset 0 0 7px 5px rgba(0,0,0,0.1); cursor: pointer;
}
#dropzone.hasfile #info { display: none; }
#dropzone.dragover { border: solid 2px #139FF7; }
#info { margin: 80px 0 0; font-weight: bold; font-size: 40px; text-align: center; }
.preview-wrap { 
  position: relative; float: left; width: 100px; padding: 5px; margin: 10px; border: solid 1px #acacac;
  border-radius: 3px; background: #fff;
  -webkit-box-shadow: 0px 1px 11px rgba(50, 50, 50, 0.5);
  -moz-box-shadow:    0px 1px 11px rgba(50, 50, 50, 0.5);
  box-shadow:         0px 1px 11px rgba(50, 50, 50, 0.5); 
}
.preview-wrap:hover img { opacity: 0.2; }

#dropzone .progress { 
  position: absolute; top: 97px; left: 5px; width: 100px; height: 8px; z-index: 1;
  background: #ccc; 
}
#dropzone .progress span { width: 70%; height: 100%; background: green; vertical-align: top; }
#dropzone .name { margin-bottom: 4px; padding: 5px; width: 90px; height: 90px; background: #ebebeb; word-wrap: break-word; text-overflow: ellipsis; }
/* #dropzone .name.icon-file { background:  } */
#dropzone .size { margin-bottom: 3px; }
#dropzone img { position: absolute; top: 5px; left: 5px; width: 100px; height: 100px; }
#dropzone input[type=file] { opacity: 0; }
#dropzone button {
  display: block; margin: 0 auto 3px auto; padding: 4px 8px; border-radius: 2px; border: 1px solid #bbb; text-decoration: none; 
  cursor: pointer; text-align: center; color: #aaa;        
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #eee));
  background-image: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
  background-image: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
  background-image: -o-linear-gradient(top, #fafafa 0%, #eee 100%);
  background-image: -ms-linear-gradient(top, #fafafa 0%, #eee 100%);
  background-image: linear-gradient(top, #fafafa 0%, #eee 100%);
  -webkit-border-radius: 2px;
}
#dropzone button:hover { color: #666; }

.progress > span {
  display: block;
  height: 100%;
  background-color: rgb(43,194,83);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(43,194,83)),
    color-stop(1, rgb(84,240,84))
   );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
   );
  -webkit-box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  -moz-box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.progress > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: 
     -webkit-gradient(linear, 0 0, 100% 100%, 
        color-stop(.25, rgba(255, 255, 255, .2)), 
        color-stop(.25, transparent), color-stop(.5, transparent), 
        color-stop(.5, rgba(255, 255, 255, .2)), 
        color-stop(.75, rgba(255, 255, 255, .2)), 
        color-stop(.75, transparent), to(transparent)
     );
  background-image: 
    -moz-linear-gradient(
      -45deg, 
        rgba(255, 255, 255, .2) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, .2) 50%, 
        rgba(255, 255, 255, .2) 75%, 
        transparent 75%, 
        transparent
     );
  z-index: 1;
  -webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  background-size: 20px 20px;
  -webkit-animation: move 2s linear infinite;
  -moz-animation: move 2s linear infinite;
  overflow: hidden;
}

@-webkit-keyframes move {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

@-moz-keyframes move {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}