<div>
	<style type="text/css">
		.isValidCell {
			text-align: center;
		}
		.editablePathCell {
		}
		.actionCell {
			height: 22px !important;
			padding: 1px 1px 4px 1px;
		}
		.actionCell .commandLink {
			margin: 0;
		}
		.dojoxGridRow .workspacePathCell, .dojoxGridRowOdd .workspacePathCell {
			background-color: #eee;
		}
		td.dojoxGridCellFocus, th.dojoxGridCellFocus {
			/* Remove annoying dashed border, but keep the width to avoid jiggling */
			border: 1px solid transparent !important;
		}
		.dojoxGridRowOver .dojoxGridCell, .dojoxGridRowEditing .dojoxGridCell {
			background-color: inherit !important;
		}
		.mappingsGridTable {
			font-size: 9pt !important;
		}
	</style>
	<div dojoAttachPoint="containerNode">
		<div dojoType="dijit.form.Form" id="siteForm">
			<table>
				<tr>
					<td style="padding: 5px; text-align: left;">
						<label dojoAttachPoint="siteConfigNameLabel" for="${id}_name">${siteConfigNameLabelText}</label>
					</td>
					<td style="padding: 10px 5px 10px 5px; text-align: left;">
						<input dojoType="dijit.form.ValidationTextBox" dojoAttachPoint="name" id="${id}_name"
							required="true" value=""
							style="display: inline-block; width: 15em;">
					</td>
				</tr>
				
				<tr>
					<td style="padding: 5px; vertical-align: top">
						<label dojoAttachPoint="mappingsLabel" for="${id}_mappings">${mappingsLabelText}</label>
					</td>
					<td style="padding: 10px 25px 10px 5px; text-align: left; width:100%;">
						<div dojoType="orion.widgets.MappingsGrid" dojoAttachPoint="mappings"
								class="mappingsGridTable"
								autoHeight="true" singleClickEdit="true" selectionMode="none"
								selectable="true">
						</div>
						<div style="padding: 5px 0 0 5px;">
							<div dojoAttachPoint="addMappingToolbar" id="${id}_addMappingToolbar"></div>
						</div>
					</td>
				</td>
				
				<tr>
					<td style="padding: 5px;">
						<label dojoAttachPoint="hostHintLabel" for="${id}_hostHint" style="text-align: left;">${hostHintLabelText}</label>
					</td>
					<td style="padding: 10px 5px 10px 5px; text-align: left;">
						<input dojoType="dijit.form.ValidationTextBox" dojoAttachPoint="hostHint" id="${id}_hostHint"
							required="false" value=""
							style="display: inline-block; width: 12em;">
					</td>
				</tr>
				
				<tr>
					<td style="padding: 5px;">
						<label dojoAttachPoint="hostingStatusLabel" style="text-align: left;">${hostingStatusLabelText}</label>
					</td>
					<td style="padding: 10px 5px 10px 5px; text-align: left;">
						<p dojoAttachPoint="hostingStatus"></p>
						<p dojoAttachPoint="siteStartedWarning" style="display: none;">
						(Changes you make here won't affect the running copy.)
						</p>
					</td>
				</tr>
				
			</table>
		</div>
	</div>
</div>