/** Customize the demo canvas */
.qsf-demo-canvas {
	padding: 10px 0px 10px 0px;
}


	.qsf-demo-canvas input {
		font: 12px verdana, arial, helvetica, sans-serif;
	}


	/** Form builder */
	.qsf-demo-canvas .qsf-fb {
		padding: 10px;
		width: 100%;
		border: 1px solid #cccccc;
		background: #f6f7f8;
		-moz-box-shadow: 0 0 2px #cccccc;
		-webkit-box-shadow: 0 0 2px #cccccc;
		box-shadow: 0 0 2px #cccccc;
	}

	.qsf-demo-canvas .qsf-fb-group {
		margin-top: 10px;
		background: #ffffff;
	}

		.qsf-demo-canvas .qsf-fb-group:first-child {
			margin-top: 0;
		}


	/** From / to Fields */
	.qsf-demo-canvas .qsf-fb-from-to {
		padding: 10px 10px 10px 70px;
		background: #e7e6e6;
		background-image: -webkit-linear-gradient( top, #b1ccad 0%, #e7e6e6 100% );
		background-image: -moz-linear-gradient( top, #b1ccad 0%, #e7e6e6 100% );
		background-image: -ms-linear-gradient( top, #b1ccad 0%, #e7e6e6 100% );
		background-image: -o-linear-gradient( top, #b1ccad 0%, #e7e6e6 100% );
		background-image: linear-gradient( top, #b1ccad 0%, #e7e6e6 100% );
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1ccad', endColorstr='#e7e6e6',GradientType=0 );
	}

		.qsf-demo-canvas .qsf-fb-from-to li {
			margin-top: 5px;
			margin-bottom: 0;
			min-height: 22px;
			_height: 22px;
			line-height: 22px;
		}

			.qsf-demo-canvas .qsf-fb-from-to li:first-child {
				margin-top: 0;
			}


		.qsf-demo-canvas .qsf-fb-from-to .riSingle {
			vertical-align: top;
		}

		.qsf-demo-canvas .qsf-fb-from-to .riTextBox {
			border: 1px solid #ffffff;
			vertical-align: top;
		}

			.qsf-demo-canvas .qsf-fb-from-to .riTextBox:focus {
				border: 1px solid #ffffff;
			}

		.qsf-demo-canvas .qsf-fb-from-to .riEmpty {
			color: #888888;
		}


	/** Attachments */
	.qsf-demo-canvas .qsf-fb-attachments {
		position: relative;
		background: transparent;
		float: left;
	}

.RadUpload {
	width: auto;
}



.qsf-demo-canvas .qsf-fb-attachments strong {
	width: 150px;
	padding-left: 15px;
	line-height: 24px;
	display: inline-block;
	display: none;
	vertical-align: bottom;
}

.qsf-demo-canvas .qsf-fb-attachments .allowed-attachments {
	margin-left: -350px;
	color: #888888;
	line-height: 24px;
	font-style: italic;
	display: inline-block;
	vertical-align: bottom;
}

.qsf-demo-canvas .qsf-fb-attachments .ruFakeInput {
	display: none;
}

.qsf-demo-canvas .qsf-fb-attachments label {
	margin-left: 10px;
	width: auto;
	font-weight: bold;
}

.qsf-demo-canvas .qsf-fb-attachments .attachment {
	margin: 0 5px 5px 0;
	padding: 0 0 0 20px;
	background-position: 3px center;
	background-repeat: no-repeat;
	display: inline-block;
}

.qsf-demo-canvas .qsf-fb-attachments .icon-jpg,
.qsf-demo-canvas .qsf-fb-attachments .icon-jpeg {
	background-image: url("/images/discussion/icon-jpg.png");
}

.qsf-demo-canvas .qsf-fb-attachments .icon-png {
	background-image: url("/images/discussion/icon-png.png");
}

.qsf-demo-canvas .qsf-fb-attachments .icon-doc,
.qsf-demo-canvas .qsf-fb-attachments .icon-docx {
	background-image: url("/images/discussion/icon-doc.png");
}

.qsf-demo-canvas .qsf-fb-attachments .icon-xls,
.qsf-demo-canvas .qsf-fb-attachments .icon-xlsx {
	background-image: url("/images/discussion/icon-xls.png");
}

.ruDropZone {
	position: absolute;
	width: 20em;
	height: 6em;
	top: -3.5em;
	left: 0;
}


/** Message body */
.qsf-demo-canvas .qsf-fb-message-body {
	background: none;
}


/** Buttons */
.buttons {
	text-align: right;
	margin: 10px 0 0px 0;
}

.qsf-demo-canvas .qsf-fb .buttons input {
	padding: 0;
	width: 50px;
	height: 50px;
	border: 0;
	color: #ffffff;
	background-color: #497b41;
	background-image: -webkit-linear-gradient( top, #77ad6f 0%, #497b41 100% );
	background-image: -moz-linear-gradient( top, #77ad6f 0%, #497b41 100% );
	background-image: -ms-linear-gradient( top, #77ad6f 0%, #497b41 100% );
	background-image: -o-linear-gradient( top, #77ad6f 0%, #497b41 100% );
	background-image: linear-gradient( top, #77ad6f 0%, #497b41 100% );
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77ad6f', endColorstr='#497b41',GradientType=0 );
}

	.qsf-demo-canvas .qsf-fb .buttons input:hover {
		background: #497b41;
		filter: none;
	}




/** Customize the upload */
.qsf-demo-canvas .RadUpload {
	display: inline-block;
	vertical-align: bottom;
	*display: inline;
	*zoom: 1;
}

	.qsf-demo-canvas .RadUpload .ruInputs li {
		margin: 0;
	}

	.qsf-demo-canvas .RadUpload .ruInputs .file-row {
	}

	.qsf-demo-canvas .RadUpload .ruBrowse {
		text-indent: -999px;
		font-size: 3em;
		height: 1em;
		width: 1em;
		background: transparent;
	}

.ruFileInput {
	cursor: pointer;
}

.RadUpload .ruFileWrap {
	position: relative;
	height: auto;
}

	.RadUpload li:last-child .ruFileWrap:after {
		font-size: 3em;
		top: 0.2em;
		position: absolute;
		left: 50%;
		margin-left: -0.5em;
		content: '\f0c6';
		font-family: FontAwesome;
		cursor: pointer;
		color: #666;
	}

	.RadUpload .ruFileWrap:hover:after {
		color: #222;
	}

.file-row .ruFileWrap:after {
	content: '';
}


.qsf-demo-canvas .RadUpload .ruBrowse.ruButtonHover {
	color: #ffffff;
	filter: none;
	cursor: pointer;
}

.qsf-fb:after {
	content: ' ';
	clear: both;
	display: block;
}

.ruUploadProgress {
	width: 20em;
	overflow: hidden;
	text-overflow: ellipsis;
}