Invision Profile

        <div id="perfil" style="display: none;">
            <div id="user_link_menucontent" class="ipsHeaderMenu clearfix boxShadow" style="position: absolute; left: 56%; top: 12.5%; padding: 25px; background: rgba(238, 238, 238, 100); border-radius: 0px 0px 10px 10px; z-index: 9999; border: 1px solid #343434; color: rgb(34, 34, 34); display: block;">
                <a href="#" title="Your Profile" class="ipsUserPhotoLink left">
                    <div id="avatar"></div>
                </a>
                <div class="left">
                    <ul id="links">
                        <li id="user_name" style="width: 100%;font-weight: bold;padding-bottom: 5px;">{USERNAME}</li>
                        <li id="user_profile"><a href="/profile?mode=editprofile" title="">Edit Profile</a>
                        </li>
                        <li id="user_ucp"><a href="/profile?mode=editprofile&page_profil=preferences" title="">My Settings</a>
                        </li>
                        <li id="user_content"><a href="/spa/{USERNAME}" title="">My Posts</a>
                        </li>
                        <li id="user_content"><a href="/st/{USERNAME}" title="">My Topics</a>
                        </li>
                        <li id="user_content"><a href="/search?search_id=watchsearch" title="">Content to Follow</a>
                        </li>
                        <li id="user_pm"><a href="/profile?mode=editprofile&page_profil=friendsfoes">My Friends/Foes</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <script>
            jQuery(document).ready(function () {
                jQuery.get('/profile?mode=editprofile&page_profil=avatars', function (data) {
                    link = jQuery('.frm dl dd img', data).attr('src');
                    if (link) {
                        jQuery('#avatar').html('<a href="/profile?mode=editprofile&page_profil=avatars"><img src="' + link + '" alt="" /></a>');
                    } else {
                        jQuery('#avatar').html('');
                    }
                });
            });
        </script>
        <style>
            #avatar img {
                height: 50px;
                width: 50px;
                padding: 1px;
                border: 1px solid #d5d5d5;
                background: #fff;
                -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
                -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
            }
            #avatar img:hover {
                border-color: #a1a1a1;
                -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
            }
            #user_link_menucontent>div {
                margin-left: 15px;
                width: 265px;
                text-align: left;
                top: 50px;
            }
            #user_link_menucontent #links li {
                width: 50%;
                float: left;
                margin: 3px 0;
                text-shadow: 0px 1px 0 rgba(255, 255, 255, 1);
                white-space: nowrap;
        list-style: none !important;
            }
        </style>