<div>
	<style type="text/css">
		.siteEditorTable td, .siteEditorTable th {
			padding: 10px 10px 5px 10px;
		}
		/* Style leftmost column of siteEditorTable */
		.siteEditorTable>tbody>tr>td:first-child {
			vertical-align: top;
			min-width: 10em;
			/*background-color: #fafafa;*/
		}
		.siteEditorTable>tbody>tr>td {
			/*border-bottom: 1px solid #ddd;*/
			padding-bottom: 20px;
			vertical-align: middle;
		}
		.navColumn {
			font-weight: bold;
		}
		.isValidColumn {
			min-width: 32px;
			width: 40px;
		}
		.isValidCell {
			text-align: center;
			vertical-align: middle;
		}
		.pathInput, .serverPathInput {
			min-width: 20em;
		}
		.addMappingToolbar {
			padding-top: 15px;
		}
		.siteForm {
			display: table;
		}
	</style>
	<div dojoAttachPoint="containerNode">
		<div dojoType="dijit.form.Form" id="siteForm" class="siteForm">
			<table class="siteEditorTable">
				<tr>
					<td>
						<label dojoAttachPoint="siteConfigNameLabel" for="${id}_name">${siteConfigNameLabelText}</label>
					</td>
					<td>
						<input dojoType="dijit.form.ValidationTextBox" dojoAttachPoint="name" id="${id}_name"
							required="true" value=""
							style="display: inline-block; width: 15em;">
					</td>
				</tr>
				
				<tr>
					<td>
						<label dojoAttachPoint="hostHintLabel" for="${id}_hostHint">${hostHintLabelText}</label>
					</td>
					<td>
						<input dojoType="dijit.form.ValidationTextBox" dojoAttachPoint="hostHint" id="${id}_hostHint"
							required="false" value=""
							style="display: inline-block; width: 12em;"><br />
						<em>Optional; used to determine the URL where a started site can be accessed.</em>
					</td>
				</tr>
				
				<tr>
					<td>
						<label dojoAttachPoint="hostingStatusLabel">${hostingStatusLabelText}</label>
					</td>
					<td>
						<span dojoAttachPoint="hostingStatus"></span>
						<span dojoAttachPoint="siteStartedWarning" style="display: none;"><br />
						<em>Changes you make here won't affect the running site.</em>
						</span>
					</td>
				</tr>

				<tr>
					<td>
						<label dojoAttachPoint="mappingsLabel" for="${id}_mappings">${mappingsLabelText}</label>
					</td>
					<td style="padding: 10px 25px 10px 5px; width:100%;">
						<div dojoAttachPoint="mappingsPlaceholder" class="mappingsGridTable" id="${id}_mappingsPlaceholder"></div>
						<div dojoAttachPoint="addMappingToolbar" id="${id}_addMappingToolbar" class="addMappingToolbar"></div>
					</td>
				</tr>
				
				<tr>
					<td>
						<div dojoAttachPoint="convertToolbar" id="${id}_convertToolbar"></div>
					</td>
				</tr>
				
			</table>
		</div>
	</div>
</div>