<div class="dijitDialog" tabindex="-1" waiRole="dialog" waiState="labelledby-${id}_title">
	<div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
		<span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"></span>
		<span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" dojoAttachEvent="onclick: onCancel" title="${buttonCancel}">
			<span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">x</span>
		</span>
	</div>
	<style>
	.form {
		width: auto;
		list-style-type: none; 
		padding: 0; 
		margin: 0;
		-webkit-padding-start: 0;
		-webkit-margin-before: 0;
	}
	.form li {
		margin: 0;
	}
	.msg {
		clear: both;
		width: 25em;
	}
	.pad1 { padding: 8px 0 0 0; }
	.pad2 { padding: 20px 0 0 0; }
	.field {
		float: left;
		width: 6em;
	}
	.col { float: left; }
	.okButton {
		float: right;
		clear: both;
	}
	</style>
	<div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent">
		<!-- Actual content here -->
		<ul class="form">
			<li class="msg">
				<div>${message}</div>
			</li>
			<li class="pad1">
				<div class="col">
					<button data-dojo-attach-point="browseButton" id="${id}_browseButton"
						class="commandButton">${browseMessage}</button>
					<span data-dojo-attach-point="folderText"></span>
				</div>
			</li>
			<li class="msg pad2">
				<div>${portMessage}</div>
			</li>
			<li class="pad1">
				<input class="field" data-dojo-attach-point="port" id="${id}_port" type="number" />
			</li>
			<li class="msg">
				<button data-dojo-attach-point="okButton" 
					data-dojo-type="dijit.form.Button"
					value="OK"
					data-dojo-props="class:'okButton', type: 'submit'">
				${buttonOk}
				</button>
			</li>
		</ul>
	</div> <!-- content pane -->
</div>
