<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="list-group"> <a href="/user/me" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-user"></i> </h3> <h4 class="list-group-item-heading"> Your Dashboard</h4> <p class="list-group-item-text"> LivWell User Dashboard</p> </a><a href="/messages" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-comments-o"></i> </h3> <h4 class="list-group-item-heading"> Private Messages</h4> <p class="list-group-item-text"> No Unread Message</p> </a><a href="https://login.secureserver.net/" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-envelope-o"></i> </h3> <h4 class="list-group-item-heading "> Mail</h4> <p class="list-group-item-text"> Corporate Webmail</p> </a> <a href="/user/me/settings" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-bullhorn"></i> </h3> <h4 class="list-group-item-heading"> Notifications Settings</h4> <p class="list-group-item-text"> Take Control.</p> </a> </div> <div class="list-group"> <a href="/node/47" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-certificate"></i> </h3> <h4 class="list-group-item-heading"> LivWell University</h4> <p class="list-group-item-text"> Get Badged!</p> </a> <a href="/node/2298" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-usd "></i> </i> </h3> <h4 class="list-group-item-heading"> Price Guide</h4> <p class="list-group-item-text"> Updated Store Prices</p> </a> <a href="/content/license-keys" target="_blank" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-question"></i> </h3> <h4 class="list-group-item-heading"> Ask the Scientist</h4> <p class="list-group-item-text"> Click here for answers</p> </a> <a href="/content/license-keys" target="_blank" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-rocket"></i> </h3> <h4 class="list-group-item-heading"> Colorado Licenses</h4> <p class="list-group-item-text"> Records of Licenses</p> </a> <a href="/node/47" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-key"></i> </h3> <h4 class="list-group-item-heading"> Sales Summary</h4> <p class="list-group-item-text"> Daily Store Records</p> </a> <a href="http://www.livwellstrains.com/" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-leaf"></i> </h3> <h4 class="list-group-item-heading"> LivWell Strains</h4> <p class="list-group-item-text"> Only the best.</p> </a> <a href="/filedepot" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-file-text-o"></i> </h3> <h4 class="list-group-item-heading "> Documents</h4> <p class="list-group-item-text"> Where files are.</p> </a><a href="/livwell-media" class="list-group-item visitor"> <h3 class="pull-right"> <i class="fa fa-globe"></i> </h3> <h4 class="list-group-item-heading "> Media</h4> <p class="list-group-item-text"> All eyes on us.</p> </a> </div>

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"); i.fa { font-size: 50px;text-align: right;position: absolute;top: 7px;right: 27px;outline: none; } a.visitor { transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease; } /* Visitor */ a.visitor i,.visitor h4.list-group-item-heading { color:#0071B3; } a.visitor:hover { background-color:#000000; } a.visitor:hover * {color:#fff; } a.visitor:hover .fa { color:#fff; text-shadow: 0 0 10px #fff, 0 0 20px #0071B3, 0 0 30px #0071B3, 0 0 40px #0071B3, 0 0 70px #0071B3}