<xen:require css="lightbox.css" />
<xen:require js="js/xenforo/lightbox.js" />

<div class="formOverlay" data-overlayClass="lightBox" id="LightBox">

        <div class="userInfo" id="LbUpper">
                <span class="avatar" id="LbAvatar"><img alt="" /></span>

                <div class="userText">
                        <div class="userTextUpper">
                                <h2 id="LbUsername">{xen:phrase n_a}</h2>
                                <div class="gadgets">
                                        <a id="LbNewWindow" target="_blank" title="{xen:phrase open_in_new_window}"><span>&uarr;</span></a>
                                        <a class="OverlayCloser" title="{xen:phrase close}"><span>X</span></a>
                                </div>
                        </div>

                        <div class="userTextLower muted">
                                <a id="LbDateTime" class="OverlayCloser">{xen:phrase n_a}</a>
                                <a id="LbContentLink" class="OverlayCloser">{xen:phrase show_in_original_location}</a>
                        </div>
                </div>
        </div>

        <div class="imageContainer">
                <img id="LbImg" class="LbImg" alt="" />
                <a class="imageNav" id="LbPrev"><span class="ctrl"><span><</span></span></a>
                <a class="imageNav" id="LbNext"><span class="ctrl"><span>></span></span></a>
                <div class="imageCount"><span id="LbSelectedImage">1</span>/<span id="LbTotalImages">1</span></div>
        </div>

        <div class="nav" id="LbLower">
                <div class="thumbsContainer">
                        <ul id="LbThumbs" data-thumbheight="65">
                                <li id="LbThumbTemplate"><a class="LightboxThumb"><img alt="" /></a></li>
                        </ul>
                        <div id="LbReveal"></div>
                </div>
        </div>

        <!--<a class="close"></a>-->

</div>