<div id="main" class="palm-hasheader">
	<div class="palm-header left" id="list-header">
	 Depot with editable list
	</div>
</div>
<div>
<div class="palm-group">        
	<div class="palm-group-title"><span x-mojo-loc="">Bucket to save/restore key-val pair</span></div>
		<div class="palm-list">
			<div class='palm-row first'>
				<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
					<div class="title">                            
						<div class="label">Bucket</div>                        
						<div id="bucketTextfield" name="bucketTextfield" x-mojo-element="TextField" ></div>
					</div>
				</div>	                    
			</div>                                                                               
		</div>            
	</div>
</div>	
<div class="palm-group">        
	<div class="palm-group-title"><span x-mojo-loc="">Key associated with saved/restored</span></div>
		<div class="palm-list">
			<div class='palm-row first'>
				<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
					<div class="title">                            
						<div class="label">Key</div>                        
						<div id="keyTextfield" name="keyTextfield" x-mojo-element="TextField" ></div>
					</div>
				</div>	                    
			</div>                                                                                 
		</div>            
	</div>
</div>	
	
    <div id="depotResult" class="info-text"></div>
	
	<div id='editableListContainer'>
		<div id="wordsList" x-mojo-element="List" ></div>
	</div>
	<div class="buttons">
		<table width="100%">
			<tr>
				<td width="33%"><div id="saveButton" class="palm-button affirmative button1">Save</div></td>
				<td width="33%"><div id="restoreButton" class="palm-button button1">Restore</div></td>
				<td width="33%"><div id="removeButton"  class="palm-button negative button1">Delete<div></td>
			</tr>
		</table>	
		<div class="palm-button" id="back_button">Back to main view</div>				
	</div>	
