silverstripe-userforms/css/FieldEditor.css

/**
 * User Defined Form Builder CSS
 *
 */

/* Add a Field Menu 
---------------------------------------- */
.MenuHolder {
	color: #999;	
}
	.MenuHolder ul {
		background: #e7e7e7;
		border: 1px solid #c6c6c6;
		padding: 8px;
	}
		.MenuHolder li {
			display: inline;
			font-size: 11px;
			padding: 2px 0;
		}
			.MenuHolder li a {
				padding: 5px 4px 3px 4px;
				font-weight: bold;
				border: 1px solid transparent;
				text-decoration: none;
			}
				.MenuHolder li a:hover {
					background: #f4f4f4;
					border: 1px solid #c6c6c6;
				}
			.MenuHolder li.addField {
				background: url(../../cms/images/add.gif) no-repeat center left;
				padding-left: 20px;
				text-transform: uppercase;
			}

/* Options / Settings Area 
---------------------------------------- */
.FormOptions {
	padding: 10px 0 0 0;
}

/* Field Listing
---------------------------------------- */	
#Fields_fields {
	padding: 10px 0;
}

	#Fields_fields .EditableFormField {
		margin: 2px;
		padding: 3px;
		border-top: 1px dotted #ccc;
		overflow: hidden;
	}
		#Fields_fields .EditableFormField * {
			display: inline;
			vertical-align: middle;
		}
		#Fields_fields .EditableFormField .fieldHandler,
		#Fields_fields .EditableFormField .handle {
			cursor: move;
		}
		#Fields_fields .EditableFormField .fieldInfo {
			float: left;
			padding-right: 10px;
		}
		#Fields_fields .EditableFormField .fieldActions {
			float: left;
			margin-top: 10px;
		}
			#Fields_fields .EditableFormField .fieldActions a {
				padding: 0 5px 5px 20px;
				font-size: 12px;
			}
				#Fields_fields .EditableFormField .moreOptions {
					background: url(../../cms/images/edit.gif) no-repeat top left;
				}
					#Fields_fields .EditableFormField .moreOptions.showing {
						color: #666;
						text-decoration: none;
					}
				#Fields_fields .EditableFormField .delete {
					background: url(../../cms/images/delete.gif) no-repeat top left;
				}
	
		#Fields_fields .EditableFormField input {
			width: 250px;
			margin-left: 0px;
		}
	
		/** Field Options **/
		
		#Fields_fields .EditableFormField div.extraOptions {
			display: block;
			overflow:hidden;
			margin: 3px 0px 3px 38px;
			background-color: #eee;
			padding: 3px;
			clear: both;			
		}
			#Fields_fields .EditableFormField .extraOptions * {
				display: block;
			}
			
				#Fields_fields .EditableFormField .extraOptions .handle {
					float: left;
					margin-right: 3px;
				}
				#Fields_fields .EditableFormField .extraOptions ul {
					padding: 5px 0;
				}
					#Fields_fields .EditableFormField .extraOptions li {
						padding: 3px 0;
						overflow: hidden;
					}
				#Fields_fields .EditableFormField .extraOptions input {
					font-size: 11px;
					padding: 2px;
					float: left;
				}
				#Fields_fields .EditableFormField .extraOptions .deleteOption {
					width: 20px;
					margin: 4px 0 0 4px;
					background: none;
					height: 20px;
					float: left;
					display: block;
				}
			#Fields_fields .EditableFormField .middleColumn {
				background: none;
			}
			/* CHECKBOX */
			#Fields_fields .EditableFormField .checkbox { }
			
				#Fields_fields .EditableFormField .checkbox input {
					float: left;
					margin: 0 8px 0 0;
				}
			
	
		#Fields_fields li.EditableFormField .hidden {
			display: none;
		}

		/* Holder to prevent form from collapsing */
		#Fields_fields .removed-form-field {
			height: 40px;
			display: block;
			overflow: hidden;
		}