/*
 * Small File Uploader 
 * by DenonStudio
 * http://codecanyon.net/item/small-file-uploader/220176
 * v2.0
 */

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

.smalluploader { background: #e9e9e9; padding: 15px; overflow: hidden; font-family: 'Droid Sans', arial, san-serif; border-bottom: 0.9px dotted #C0C0C0; }

.uploadspace { margin: 20px 0; }
.dragspace { border: 5px dashed #88C425; padding: 10px; border-radius: 5px; text-align: center; }
.dragspace.hover { border-color: #fff; }
.dragspace .zonemessage { font-size: 12pt; color: #333; font-weight: bold; text-shadow: 0px 1px #FFF; margin: 0; } 
.dragspace .message { font-size: 10pt; font-weight: normal; text-transform: lowercase; color: #676767; margin: 0; text-shadow: 0px 1px #FFF;padding-top: 5px;} 
.buttons { display: block; overflow: hidden;}  

.addbutton { position: relative; }
.addbutton, .startbutton, .clearbutton { cursor: pointer; border: none; display: block; float: left; overflow: hidden; margin-right: 10px; }
.addbutton:hover { background-position: 0px -36px; }
.startbutton { background-position: -88px 0px; }
.startbutton:hover { background-position: -88px -36px; }
.clearbutton { background-position: -178px 0px; float: right; margin: 0; }
.clearbutton:hover { background-position: -178px -36; }

.startbutton.hidden, .addbutton.hidden, .clearbutton.hidden, .hidden { display: none; }

.file { position: relative; padding: 8px 8px 8px 60px; background: #fff url(res/icons.png) no-repeat 18px 11px; margin-bottom: 1px; color: #000; }
p.failedupload { position: relative; padding: 5px 5px 5px 60px; background-color: #FF714B; border-top: 1px solid #FF511B; margin-bottom: 5px; margin-top: -1px; color: #fff; font-size: 13px; font-weight: bold; }
.file .title { font-size: 12pt; font-weight: bold; line-height: 1.2em; margin-right: 40px; overflow: hidden; white-space: pre; }
.file .info { font-size: 10pt; padding: 5px 0 0 0; margin: 0;}
.file .info span { margin-right: 20px;  }
.file .info .meta { color: #6c6c6c; margin-right: 3px; }

.jpg  { background-position: 18px -737px } 
.jpeg { background-position: 18px -737px } 
.png  { background-position: 18px -238px } 
.gif  { background-position: 18px -404px }
.bmp  { background-position: 18px -488px }
.txt  { background-position: 18px -653px }
.zip  { background-position: 18px -155px }
.rar  { background-position: 18px -1071px }
.exe  { background-position: 18px -71px }
.psd  { background-position: 18px -571px }
.pdf  { background-position: 18px -904px }
.html { background-position: 18px 12px }
.htm  { background-position: 18px 12px }
.unknown { background-position: 18px -1154px }
.xsl, .xslx { background-position: 18px -986px }
.doc, .docx { background-position: 18px -821px }
.pps, .ppsx { background-position: 18px -322px }
.csv { background-position: 18px -1154px }
.close { position: absolute; height: 16px; width: 16px; right: 10px; top: 10px; text-decoration: none; display: block; background: url(res/close.png) no-repeat; }
.indicator { position: absolute; height: 16px; width: 16px; right: 10px; top: 10px; display: block; background: url(res/loading_waiting.gif) no-repeat; }
.uploading { background: url(res/loading.gif) no-repeat; }
.failed { background: url(res/failed.png) no-repeat center center; }
.done { background: url(res/done.png) no-repeat center center; }

.ie6 { right: 30px; }

.smalluploader .addbutton input[type="file"] {
    -moz-transform: translate(-300px, 0pt) scale(4);
    border-color: transparent;
    border-style: solid;
    border-width: 0 0 100px 200px;
    cursor: pointer;
    direction: ltr;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0; 
    filter: Alpha(opacity=0.0);
}

.smalluploader  input[type="file"] {
    height: 28px;
    line-height: 28px;
    box-shadow: none;
    width: auto;
}

.offscreen { position: absolute; top: -9000; left: -90000; } 

.greenbutton {

	background-color:rgb(0, 145, 72);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:3px;
	display:inline-block;
	color:#ffffff;
	font-size:15px;
	font-weight:bold;
	padding:6px 15px;
	text-decoration:none;
    height: 20px;
}

.greenbutton:hover {
  background:rgb(0, 180, 72);
  color:#ffffff;
  text-decoration: none;
}

.greenbutton:active {
	position:relative;
	top:1px;
}

.redbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fab3ad;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fab3ad;
	box-shadow:inset 0px 1px 0px 0px #fab3ad;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fa665a), color-stop(1, #d34639) );
	background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
	background-color:#fa665a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:3px;
	border:1px solid #d83526;
	display:inline-block;
	font-size:15px;
	font-weight:bold;
	padding:6px 15px;
	color:#ffffff;
	text-decoration:none;
	text-shadow:1px 1px 0px #98231a;
    height: 20px;
}

.redbutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d34639), color-stop(1, #fa665a) );
	background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
	background-color:#d34639;
	color:#ffffff;
	text-decoration:none;
}

.redbutton:active {
	position:relative;
	top:1px;
}