<div id="flyoutExample" class="lotusFlyout" aria-hidden="false" role="dialog" aria-labelledby="flyoutExampleHeader">
<div class="lotusWrapper">
<header id="flyoutExampleHeader" class="lotusFlyoutHeader">
<ul class="lotusInlinelist">
<li id="flyoutExampleHeader" class="lotusFirst"><span class="lotusPerson">Alex Kay</span> shared an update</li>
<li class="lotusMeta">Updated 10:31 AM</li>
<li><a href="javascript:;" role="button">Repost</a></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 id="flyoutExampleContent" class="lotusFlyoutContent lotusStyledScroll" style="height:300px;">
<div class="lotusFlyoutContentArea">
<div class="lotusFlyoutInner">
<div class="lotusChunk">
<div class="lotusFlyoutImage">
<img class="yourProductSprite yourProductSprite-NoPhotoPerson48" alt="" src="../../css/images/blank.gif"/>
</div>
<div class="lotusStatus">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate pellentesque lobortis.</div>
</div>
<div class="lotusChunk">
<div class="lotusLike">
<a class="lotusLikeCount" href="javascript:;" role="button" aria-haspopup="true" title="12 people like this" aria-label="12 people like this">
<img class="lotusIconLike" src="../../css/images/blank.gif" alt="" /><span class="lotusAltText">Likes:</span>
<div class="lotusLikeText">12</div>
<div class="lotusLikeConnector"></div>
</a>
<span aria-live="assertive">
<span class="lotusLikeDescription">You like this</span>
<span class="lotusDivider" role="presentation">-</span>
<a class="lotusLikeAction" role="button" href="javascript:;">Unlike</a>
</span>
</div>
</div>
<div class="lotusTabContainer lotusTabCondensed" role="tablist">
<ul class="lotusTabs">
<li class="lotusSelected"><div><a id="tab1id" role="tab" selected="true" href="javascript:;"><strong>Comments (5)</strong></a></div></li>
<li><div><a id="tab2id" role="tab" href="javascript:;">History</a></div></li>
</ul>
</div>
<div class="lotusBoard" role="tabpanel" aria-labelledby="tab1id" aria-hidden="false">
<div class="lotusActions"><a href="javascript:;" role="button">Add a comment</a></div>
<ul class="lotusCommentList">
<li class="lotusCommentItem"><a href="javascript:;" class="lotusMeta" role="button">Show previous comments</a></li>
<li class="lotusCommentItem">
<article class="lotusPost" role="article">
<div class="lotusPostAuthorInfo">
<div class="lotusPostAvatar">
<img class="yourProductSprite yourProductSprite-NoPhotoPerson32" alt="" src="../../css/images/blank.gif"/></div>
</div>
<div class="lotusPostContent">
<div class="lotusMeta"><a class="lotusPerson" href="javascript:;">Samantha Daryn</a> 10:04 AM</div>
<div class="lotusPostDetails">
<p>Ut caecus quis enim in ea consequat antehabeo.</p>
</div>
</div>
</article>
</li>
<li class="lotusCommentItem"><article class="lotusPost" role="article">
<div class="lotusPostAuthorInfo">
<div class="lotusPostAvatar"><img class="yourProductSprite yourProductSprite-NoPhotoPerson32" alt="" src="../../css/images/blank.gif"/></div>
</div>
<div class="lotusPostContent">
<div class="lotusMeta"><a class="lotusPerson" href="javascript:;">Gail Chao</a> 10:04 AM</div>
<div class="lotusPostDetails">
<p>Fatua quidem roto, velit si, gilvus erat cogo. Si nulla autem ea tristique, blandit adsum nulla in secundum obruo vel abluo. </p>
</div>
</div>
</article>
</li>
<li class="lotusAddComment">
<form class="lotusForm2 lotusStreamUpdate">
<div class="lotusFieldEmphasis"><textarea class="lotusText lotusTextCollapsed" aria-label="Add a comment" placeholder="Add a comment"></textarea></div>
<div class="lotusActions" style="display:none;"><ul class="lotusInlinelist"><li class="lotusFirst"><a href="javascript:;" role="button"><strong>Post</strong></a></li><li><a href="javascript:;" role="button">Cancel</a></li></ul></div>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="flyoutConnector" class="lotusFlyoutConnector" role="presentation"></div>