<div id="flyoutExample" class="lotusFlyout" aria-hidden="false" role="dialog" aria-labelledby="flyoutExampleHeader">
	<div class="lotusWrapper">
		<!-- header is an HTML5 element. Use div if you are using HTML4. -->
		<header class="lotusFlyoutHeader">
			<ul class="lotusInlinelist">
				<li id="flyoutExampleHeader" class="lotusFirst"><span class="lotusPerson">Alex Kay</span> shared a file</li>
				<li class="lotusMeta">Updated 10:31 AM</li>
			</ul>
			<span id="flyoutClose" class="lotusBtnImg lotusClose" title="Close"><input type="image" alt="Close" src="../../css/images/blank.gif" /><a href="javascript:;" class="lotusAltText">X</a></span>
		</header>
		<div class="lotusFlyoutContent lotusStyledScroll">
			<div class="lotusFlyoutContentArea">
				<div class="lotusFlyoutInner">
					<div class="lotusTabContainer lotusTabCondensed" role="tablist">
						<ul class="lotusTabs">
							<li><div><a id="tab1id" role="tab" href="javascript:;">Comments (3)</a></div></li>
							<li class="lotusSelected"><div><a id="tab2id" role="tab" selected="true" href="javascript:;"><strong>Sharing</strong></a></div></li>
							<li><div><a id="tab3id" role="tab" href="javascript:;">History</a></div></li>
					 	</ul>
					</div><!--end tab container-->
					<div role="tabpanel" aria-labelledby="tab2id" aria-hidden="false">
						
						<div class="lotusMessage2 lotusSuccess" role="alert">
							<img class="lotusIcon lotusIconMsgSuccess" src="../../css/images/blank.gif" alt="Success" /><span class="lotusAltText">Success:</span> <div class="lotusMessageBody">The file was shared successfully.</div><a href="javascript:;" class="lotusDelete" role="button" title="Close"><img alt="Close" src="../../css/images/blank.gif" /><span class="lotusAltText">X</span></a>
						</div>
						
						<table class="lotusVertTable lotusChunk" border="0" summary="table summary goes here...">
							<tr>
								<th>Readers:</th>
								<td><span role="list"><span role="listitem"><a href="javascript:;" class="lotusPerson">Alex Kay</a></span>, <span role="listitem"><a href="javascript:;" class="lotusPerson">Andreas Berzat</a></span>, <span role="listitem"><a href="javascript:;" class="lotusPerson">Robert Lai</a></span></span><span class="lotusDivider" role="presentation">|</span><a class="lotusAction" href="javascript:;" role="button">Add</a></td>
							</tr>
							<tr>
								<th>Editors:</th>
								<td>None</td>
							</tr>
							<tr>
								<th>Owner:</th>
								<td><a href="javascript:;" class="lotusPerson">Sheila Durgan</a></td>
							</tr>
						</table>

						<form class="lotusForm2" method="post" action="javascript:;" aria-live="assertive">
							<!-- header is an HTML5 element. Use div if you are using HTML4. -->
							<header class="lotusFormTitle">
								<h2 class="lotusHeading2" aria-describedby="formDesc">Share</h1>
								<div id="formDesc" class="lotusMeta">Add people or communities as readers</div>
							</header>
							<div class="lotusFormBody">
								<div class="lotusFormField">
									<label for="shareChooser">Share with:</label>
									<div class="lotusFieldWrapper">
										<select id="shareChooser" name="shareChooser" style="width:auto;"><option value="1">a Person</option><option value="2">a Community</option></select>
										<input id="share" class="lotusText" value="" name="share" aria-label="Person name or email" placeholder="Person name or email..." style="width:170px;"></input>
									</div>
								</div>
								<div class="lotusFormField">
									<label for="message">Message:</label>
									<div class="lotusFieldWrapper">
										<a href="javascript:;" role="button">Add an optional message</a>
										<textarea id="message" class="lotusText" cols="20" rows="5" name="message" style="display:none;"></textarea>
									</div>
								</div>
							</div>
							<div class="lotusFormFooter">
								<ul class="lotusInlinelist lotusActions"><li class="lotusFirst"><a href="javascript:;" role="button"><strong>Share</strong></a></li><li><a href="javascript:;" role="button">Cancel</a></li></ul>
							</div>
						</form>
						
					</div><!--end tab panel-->
				</div><!--end lotusFlyoutInner-->
			</div>
		</div>
	</div><!--end lotusWrapper-->
</div><!--end lotusFlyout-->
<div id="flyoutConnector" class="lotusFlyoutConnector" role="presentation"></div>