@charset 'UTF-8';
/*
 * jQuery File Upload UI Plugin CSS 5.0.2
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://creativecommons.org/licenses/MIT/
 */

.fileinput-button input {
/* ... was:
     .ui-button input {
   ... but I don't see why we need to apply this to all UI buttons; just the fileinput ones.
*/

  /*
     We need our jQuery 'click here to select file(s)' button to trigger the file INPUT control's file selection dialog, but not show the actual INPUT control (visually, it's being
     replaced by the jQuery button).
     
     How does this work in the 5 major browsers?
     - IE8+: Luckily, we don't have to worry about IE8+ or WebKit-based browsers, because it seems that when the file selector INPUT is a child of the same LABEL as the SPAN that
             we're making into a jQuery button, clicking on that SPAN will trigger the file selection dialog to appear.  We just need to hide the actual INPUT control.
     - Google Chrome: This is WebKit-based, so the above IE8+ rule applies.
     - Apple Safari: This is WebKit-based, so the above IE8+ rule applies.
     - Mozilla Firefox: We need to make the INPUT gigantic - large enough that the 'Browse' button beside the file location textbox is bigger than our jQuery button - then move it far
                        enough to the left that the entire jQuery button is covered by this Browse button.  That way, when the user clicks our jQuery button, it's as if they'd clicked
                        the INPUT control's Browse button and the file selection dialog appears.  We can do this with -moz-transform.
     - Opera: It would be nice if we could use the Firefox trick with Opera, but unfortunately there's no way to get it to display the mouse cursor as a pointer when it's hovered over
              the browse button, even using CSS.  What we can do, though, is move the browse (or 'choose') button out of the jQuery button's area, and then assign a gigantic border to
              it - one big enough to cover the entire jQuery button area.  When the mouse cursor is over this border, it DOES turn to a pointer, and will trigger the file selection
              dialog when clicked.  We can do this by assigning the INPUT a large right border; it will push the file selector out of the way, to the left, and make the right border
              take up the entire jQuery button area.  The large right border shouldn't break things in other browsers, either.
     
     The actual file INPUT control is then hidden via 'opacity' or 'filter', depending on browser, and the cursor is forced into a pointer with 'cursor'.
  */
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-right-width: 400px;
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-transform: translate(-320px, 0) scale(5);
  direction: ltr;
  cursor: pointer !important;
}

.fileinput-button {
  overflow: hidden !important;
}

.fileupload-buttonbar {
  padding: 0.2em 0.4em;
}

.fileupload-buttonbar .ui-button {
  vertical-align: middle;
}

.fileupload-content {
  padding: 0.2em 0.4em;
  border-top-width: 0;
}

.ui-progressbar {
  width: 200px;
  height: 20px;
}

.ui-progressbar-value {
  background: url(images/pbar-ani.gif) !important;
}

.fileupload-progressbar {
  width: 400px;
  margin: 10px 0;
}

.files {
  margin: 10px 0;
  border-collapse: collapse;
}

.files td {
  padding: 5px;
  border-spacing: 5px;
}

.files img {
  border: none;
}

.files .name {
  padding: 0 10px;
}

.files .size {
  padding: 0 10px 0 0;
  text-align: right;
  white-space: nowrap;
}

.gallery-dialog {
  text-align: center;
}

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  background: url(loading.gif);
  z-index: 9999;
}

.ui-state-disabled .ui-state-disabled {
  opacity: 1;
  filter: alpha(opacity=100);
}

.ui-state-disabled input {
  cursor: default;
}