/* --------------------------------------------------------- */
/* Directive:  com.pykl.fileupload.demo:imgCrop              */
/* --------------------------------------------------------- */

div.cms-modal {
    width: 50%;
    margin-left: -25%;
}

div.cms-modal .modal-body {
    text-align: center;
}

div.cms-modal .modal-body .crop-image {
}

div.cms-modal .modal-footer p {
    position: absolute;
    text-align: left;
    width: 50%;
}


/* --------------------------------------------------------- */
/* Directive:  com.pykl.fileupload.demo:imgUpload            */
/* --------------------------------------------------------- */
/* Primary Container is relatively positioned as it
   is the parent of several div overlays. It has a
   minimum height for when the image is too small
   to support the overlay panels. It also acts as
   clipping bounds for the other panel's animations.
   There is javascript to ensure the parent
   container is at least as large as the target
   image.
*/
div.img-upload {
    background: transparent;
    overflow: hidden;
    position: relative;
    text-align: center;
    font-family: sans-serif;
}

div.img-upload p {
    font-size: 16px;
    color: #eeeeee;
    margin: 1em 0;
}

div.img-upload .btn {
    -moz-box-shadow: inset 0 1px 0 0 #ffffff;
    -webkit-box-shadow: inset 0 1px 0 0 #ffffff;
    box-shadow: inset 0 1px 0 0 #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
    background: -moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ededed', endColorstr = '#dfdfdf');
    background-color: #ededed;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    color: #777777;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 16px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #ffffff;
}

/*
.:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
    background: -moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#dfdfdf', endColorstr = '#ededed');
    background-color: #dfdfdf;
}

.:active {
    position: relative;
    top: 1px;
}
*/

/* All boxes use border-box for sizing and occupy
   the full area of the container. We also want
   a transition on changes to position and opacity.

   Note: See flash exception below
*/
div.img-upload div {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

/* The plupload Flash overlay is injected into the container's DOM
   structure as a div, and this flash component is overlaid on top of
   the browse button, so we can't move it around.
*/
div.img-upload div {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

/* The target image should be vertically and
   horizontally centered in the parent
   container.
*/
div.img-upload > img {
    vertical-align: middle;
    z-index: 0;
}

/* Whenever the drag/drop panel or one of
   the other overlays appear, the image is
   faded out using this overlay. Opacity is
   elevated to 0.8 when :hover is detected
   on the parent container.

   This is also the container for the drop
   zone div, and it includes some padding
   so the grop zone can have a slightly
   inset border.
*/
div.img-upload .fade {
    background: #cccccc;
    opacity: 0;
    position: absolute;
    padding: 8px;
    top: 0;
    left: 0;
    z-index: 1;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/* The drop zone has a dashed border and
   stylized text to let the user know
   that this element accepts a drag/drop
   operation.
*/
div.img-upload .drop {
    border: 3px dashed #666;
    border-radius: 6px;
    color: #333;
    opacity: 0;
    text-align: center;
    z-index: 2;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/* Drop zone text. */
div.img-upload .drop p {
    color: #333;
    display: inline-block;
    margin: 0;
    font-size: 25px;
    vertical-align: middle;
}

/* The browse panel animates up from the bottom
   to ask the user to upload a file. Because the
   height is determined by its contents, the
   bottom is set using a percentage, and ensures
   the non-visible state isn't within the parent
   container.
*/
div.img-upload .browse {
    background: #444444;
    background: rgba(0, 0, 0, 0.6);
    border-top: 2px solid #000;
    bottom: -100%;
    height: auto;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    z-index: 2;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#77000000, endColorstr=#77000000)";
}

/* The error panel animates up from the bottom
   to show an error message with a close button.
*/
div.img-upload .error {
    background: #cc4444;
    background: rgba(204, 0, 0, 0.6);
    border-top: 2px solid #000;
    bottom: -100%;
    height: auto;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    z-index: 2;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#77cc4444, endColorstr=#77cc4444)";
}

/* The error panel has a close button.
*/
div.img-upload .error a.close {
    margin: 0;
    position: absolute;
    right: 7px;
    top: 2px;
    text-decoration: none;
}

/* The progress overlay shows the file
   currently being uploaded, a progress
   indicator and a button to cancel the
   upload process.

   Like the browse overlay, the bottom
   property is exagerated because the
   content height cannot be known at
   runtime.
*/
div.img-upload .working {
    background-color: rgba(0, 0, 0, 0.6);
    border-top: 2px solid #000;
    bottom: -100%;
    color: #ddd;
    font-size: 70%;
    height: auto;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: left;
    z-index: 3;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/* The progress indicator and the cancel button
   are floated right. */
div.img-upload .working div {
    float: right;
    margin: 1em 0.25em;
    width: 50px;
}

div.img-upload .working div.progress .bar {
    margin: 0;
    height: 24px;
    float: left;
}

/* The filename is the only sib,ing element not
   floated, so it gives the parent block its
   content height. Half of the width is devoted
   to the filename, and it can wrap if need be.
*/
div.img-upload .working div.name {
    width: 50%;
    float: none;
    margin: 1em .5em;
}


/* ======    Animations    ======= */

/* Slide the progress overlay up from the bottom.
*/
div.img-upload.inprogress .working {
    bottom: 0;
    opacity: 1;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* Slide the error overlay up from the bottom.
*/
div.img-upload.inerror .error {
    bottom: 0;
    opacity: 1;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* Don't want the browse panel to appear when
   upload is in progress, or there is an error.
*/
div.img-upload.inprogress.hover .browse,
div.img-upload.inerror.hover .browse
{
    opacity: 0 !important;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
}

/* Slide the browse overlay up from the bottom.
*/
div.img-upload.hover .browse {
    bottom: 0;
    opacity: 1;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* The drop zone appears when the dragover class
   is added to the parent container.
*/
div.img-upload.dragover .drop {
    opacity: .5;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

/* The fade layer shows up whenever a hover event
   is detected on the parent container, or when
   the classes for dragover and inprogress are
   detected.
*/
div.img-upload.hover .fade,
div.img-upload.dragover .fade,
div.img-upload.inprogress .fade {
    opacity: 0.8;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

/* ======       Hacks       ======= */

/* A hack for the vertical centering of the
   <p> content inside of the drop block.
*/
div.img-upload .drop:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

/* A hack for the vertical centering of the
   <img> element inside of the parent container..
div.img-upload:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
*/