/*
 * X-Upload HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/

@-moz-document url-prefix() 
{
    acidjs-xupload img:-moz-loading 
    {
        visibility: hidden;
    }
    
    acidjs-xupload img:-moz-broken 
    {
        -moz-force-broken-image-icon: 0;
    }
}

acidjs-xupload button:-moz-focus-inner
{
    margin: 0;
    border: 0;
    padding: 0;
    outline: none;
}

acidjs-xupload button::-moz-focus-inner
{
    margin: 0;
    border: 0;
    padding: 0;
    outline: none;
}

acidjs-xupload[hidden],
acidjs-xupload [hidden],
acidjs-xupload img[src=""],
acidjs-xupload .acidjs-xupload-filelist-hidden div ,
acidjs-xupload[nofiles] > div > div,
acidjs-xupload[nofiles] label button
{
    display: none;
}

acidjs-xupload img,
acidjs-xupload li span,
acidjs-xupload label span,
acidjs-xupload li::before,
acidjs-xupload li span:first-child::before
{
    vertical-align: middle;
}

acidjs-xupload,
acidjs-xupload *,
acidjs-xupload::before,
acidjs-xupload *::before,
acidjs-xupload::after,
acidjs-xupload *::after
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

acidjs-xupload,
acidjs-xupload img,
acidjs-xupload label span,
acidjs-xupload li span:first-child::before
{
    display: inline-block;
}

acidjs-xupload label span,
acidjs-xupload li::before,
acidjs-xupload li span:last-child
{
    font-size: .8em; 
}

acidjs-xupload label,
acidjs-xupload button
{
    cursor: pointer;
}

acidjs-xupload label span,
acidjs-xupload label button
{
    color: #fff;
}

acidjs-xupload > div > div,
acidjs-xupload label button
{
    position: absolute;
}

acidjs-xupload[disabled],
acidjs-xupload[nofiles] label button
{
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}

acidjs-xupload label,
acidjs-xupload:hover > div > div
{
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

acidjs-xupload:hover label,
acidjs-xupload > div:not(.acidjs-xupload-filelist-hidden) label
{
    background: #e44d26;
}

acidjs-xupload:hover > div > div,
acidjs-xupload  > div:not(.acidjs-xupload-filelist-hidden) div
{
    border-color: #e44d26;
}

acidjs-xupload li span,
acidjs-xupload li::before
{
    display: table-cell;
}

acidjs-xupload
{
    color: #333;
    visibility: visible;
    cursor: default;
    font-family: Arial, Helvetica, Sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-xupload .acidjs-xupload-filelist-hidden label button::before
{
    content: "\25bc";
}

acidjs-xupload label button::before
{
    content: "\25b2";
}

acidjs-xupload button
{
    background: none transparent;
    text-align: center;
    font: bold .8em Arial, Helvetica, Sans-serif;
}

acidjs-xupload label button
{
    right: .5em;
    margin: .1em 0 0 .5em;
    line-height: 2.5em;
}

acidjs-xupload li button
{
    color: #e44d26;
    font-size: 1.5em;
}

acidjs-xupload label
{
    display: block;
    padding: 0 .5em;
    line-height: 2em;
    background: #0091c0;
    white-space: nowrap;
}

acidjs-xupload
{
    counter-reset: files;
}

acidjs-xupload > div > div
{
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);
}

acidjs-xupload label span
{
    padding: 0 1.5em 0 0;
}

acidjs-xupload[disabled]
{
    opacity: .5;
}

acidjs-xupload ul:empty
{
    display: none;
}

acidjs-xupload img
{
    margin: 0 .5em 0 0;
    width: 1em;
    height: 1em;
}

acidjs-xupload ol
{
    display: table;
    width: 100%;
}

acidjs-xupload li
{
    display: table-row;
    font-size: .75em;
}

acidjs-xupload li::before
{
    padding: 0 0 0 .5em;
    width: 5%;
    counter-increment: files;
    content: counter(files, decimal-leading-zero)". ";
}

acidjs-xupload li span
{
    padding: .25em .5em;
}

acidjs-xupload li span:last-child
{
    text-align: right;
    width: 20%;
}

acidjs-xupload li span:first-child
{
    width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

acidjs-xupload li span:first-child::before
{
    content: "";
    width: 32px;
    height: 32px;
    background: url("images/file.svg") no-repeat center;
    background-size: cover;
    margin: 0 .25em;
}

acidjs-xupload > div
{
    position: relative;
    min-width: 100px;
}

acidjs-xupload > div > div
{
    z-index: 30;
    width: 250%;
    border: solid 2px #0091c0;
    max-height: 7.5em;
    background: #fff;
    overflow: auto;
}

acidjs-xupload li[class$="css"] span:first-child::before,
acidjs-xupload li[class$="scss"] span:first-child::before,
acidjs-xupload li[class$="sass"] span:first-child::before
{
    background-image: url("images/css.svg");
}

acidjs-xupload li[class$="js"] span:first-child::before,
acidjs-xupload li[class$="json"] span:first-child::before
{
    background-image: url("images/js.svg");
}

acidjs-xupload li[class$="asp"] span:first-child::before,
acidjs-xupload li[class$="aspx"] span:first-child::before
{
    background-image: url("images/aspx.svg");
}

acidjs-xupload li[class$="avi"] span:first-child::before
{
    background-image: url("images/avi.svg");
}

acidjs-xupload li[class$="bmp"] span:first-child::before
{
    background-image: url("images/bmp.svg");
}

acidjs-xupload li[class$="doc"] span:first-child::before,
acidjs-xupload li[class$="docx"] span:first-child::before
{
    background-image: url("images/doc.svg");
}

acidjs-xupload li[class$="doc"] span:first-child::before,
acidjs-xupload li[class$="docx"] span:first-child::before
{
    background-image: url("images/doc.svg");
}

acidjs-xupload li[class$="html"] span:first-child::before,
acidjs-xupload li[class$="xhtml"] span:first-child::before
{
    background-image: url("images/html.svg");
}

acidjs-xupload li[class$="jpg"] span:first-child::before,
acidjs-xupload li[class$="jpeg"] span:first-child::before
{
    background-image: url("images/jpg.svg");
}

acidjs-xupload li[class$="png"] span:first-child::before,
acidjs-xupload li[class$="apng"] span:first-child::before
{
    background-image: url("images/png.svg");
}

acidjs-xupload li[class$="gif"] span:first-child::before
{
    background-image: url("images/gif.svg");
}

acidjs-xupload li[class$="md"] span:first-child::before,
acidjs-xupload li[class$="txt"] span:first-child::before
{
    background-image: url("images/txt.svg");
}

acidjs-xupload li[class$="pdf"] span:first-child::before
{
    background-image: url("images/pdf.svg");
}

acidjs-xupload li[class$="mp3"] span:first-child::before
{
    background-image: url("images/mp3.svg");
}

acidjs-xupload li[class$="mp4"] span:first-child::before,
acidjs-xupload li[class$="mpg"] span:first-child::before,
acidjs-xupload li[class$="mpeg"] span:first-child::before
{
    background-image: url("images/mpg.svg");
}

acidjs-xupload li[class$="mid"] span:first-child::before,
acidjs-xupload li[class$="midi"] span:first-child::before
{
    background-image: url("images/midi.svg");
}