/*demo��ʽ*/
#picker {
    display: inline-block;
    line-height: 1.428571429;
    vertical-align: middle;
    margin: 0 12px 0 0;
}
#picker .webuploader-pick {
    padding: 6px 12px;
    display: block;
}


.thumbnail {
    width: 110px;
    height: 110px;
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.428571429;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.thumbnail a img {
    width: 100%;
    height: 100%;
    vertical-align: middle; 
    border: 0; 
    cursor: pointer;
}
.uploader-list {
    width: 100%;
    overflow: hidden;
}
.file-item {
    float: left;
    position: relative;
    margin: 0 20px 0px 0;
    padding: 4px;
}
.file-item .error {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    background: red;
    color: white;
    text-align: center;
    height: 20px;
    font-size: 14px;
    line-height: 23px;
}
.file-item .info {
    position: absolute;
    left: 4px;
    bottom: 4px;
    right: 4px;
    height: 20px;
    line-height: 20px;
    text-indent: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow : ellipsis;
    font-size: 12px;
    z-index: 10;
}
.upload-state-done:after {
    content:"\f00c";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 32px;
    position: absolute;
    bottom: 0;
    right: 4px;
    color: #4cae4c;
    z-index: 99;
}
.file-item .progress {
    position: absolute;
    right: 4px;
    bottom: 4px;
    height: 3px;
    left: 4px;
    height: 4px;
    overflow: hidden;
    z-index: 15;
    margin:0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.file-item .progress span {
    display: block;
    overflow: hidden;
    width: 0;
    height: 100%;
    background: #d14 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMjgwMTE3NDA3MjA2ODExODA4M0E4MzgzMTAzRTZGOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCRjFGMDIxRDFEMEIxMUUzQUExRkU5NjcxMEMxOEM3QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCRjFGMDIxQzFEMEIxMUUzQUExRkU5NjcxMEMxOEM3QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDQ4MDExNzQwNzIwNjgxMTgwODNBODM4MzEwM0U2RjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMTgwODNBODM4MzEwM0U2RjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz62XI8XAAABI0lEQVR42oSTf0vDMBCGkyajTBmOwXR+Bb//9/EvnT+GTkXGbJv4XImlS3MuEK5prs+99ya1IYQ7a+3cTEfouu6euM83yDfsGb7t11XbtltiLEAqkm+IzpQqJECfyGLP/CglVlV1SVjn72OM/RxXi0lNKHDYttfEetyKqJA4QFI80OOromZG2ORKTnL+3qPmhc2jAloSFucgMn40k5HukxqX+5FD5NjeSPhS1CyArXI/JhAxuWmarVEcliOniJ8UyHvk+RtFOwVUO+c2RUh+DfDmSTwqgYCsaO3i5J6Y8jgCelZu8gzQrQg7BzFAdlQ7KCZfAVoO6/y4Rv0HTH5Qaljv/aBGVZJ+sk9MfleKzMVkEfEvRO4DbT2S2Comr2mt/hVgANU+nayGWj9TAAAAAElFTkSuQmCC) repeat-x;
    -webit-transition: width 200ms linear;
    -moz-transition: width 200ms linear;
    -o-transition: width 200ms linear;
    -ms-transition: width 200ms linear;
    transition: width 200ms linear;
    -webkit-animation: progressmove 2s linear infinite;
    -moz-animation: progressmove 2s linear infinite;
    -o-animation: progressmove 2s linear infinite;
    -ms-animation: progressmove 2s linear infinite;
    animation: progressmove 2s linear infinite;
    -webkit-transform: translateZ(0);
}
@-webkit-keyframes progressmove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 17px 0;
    }
}
@-moz-keyframes progressmove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 17px 0;
    }
}
@keyframes progressmove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 17px 0;
    }
}
.file-panel {
    position: absolute;
    height: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
    background: rgba( 0, 0, 0, 0.5 );
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 300;
}

.file-panel span {
    width: 24px;
    height: 24px;
    display: inline;
    float: right;
    text-indent: -9999px;
    overflow: hidden;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAoCAYAAAChDJfXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExODIyQTg3ODcxNkNBOEMyQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowNjYxRTBFRjI5MDUxMUUzOERBNkExNjY3QTI5NkMyNyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNjYxRTBFRTI5MDUxMUUzOERBNkExNjY3QTI5NkMyNyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDREVCQjAyNjIwNjgxMTgyMkE4Nzg3MTZDQThDMkEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTgyMkE4Nzg3MTZDQThDMkEiLz4gPC9yZGY6RGVzY3Jp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) no-repeat;
    margin: 5px 1px 1px;
    cursor: pointer;
}

.file-panel span.rotateLeft {
    background-position: 0 -24px;
}
.file-panel span.rotateLeft:hover {
    background-position: 0 0;
}

.file-panel span.rotateRight {
    background-position: -24px -24px;
}
.file-panel span.rotateRight:hover {
    background-position: -24px 0;
}

.file-panel span.cancel {
    background-position: -48px -24px;
}
.file-panel span.cancel:hover {
    background-position: -48px 0;
}