.contact-summary { margin: 5px 10px; display: inline-block; vertical-align: top; h2, p { margin: 0; } .section { margin-bottom: 24px; } li { display: inline-block; margin-right: 1em; } .title { width: 275px; text-align: center; margin: 15px 0 10px; h2 { font-weight: bold; } h3 { margin: 1px 0 0; font-size: 21px; .user-link { color: inherit; } } } .profpic { position: relative; display: inline-block; .hexagon-275 { z-index: 10; } .hexTop, .hexBottom { outline: 5px solid #eee; } } .totem { position: relative; width: 275px; height: 318px; .corner { position: absolute; z-index: 5; display: block; width: 130px; height: 100px; background: #282C32; color: #2778E2; border-radius: 2px; font-family: @font-family-monospace; font-size: 21px; .corner-inner { position: absolute; } &:hover:after { content: attr(data-overlay); position: absolute; background: inherit; border-radius: 2px; width: 100%; font-family: @font-family-sans-serif; font-size: 15px; } } .topleft { top: 10px; left: 10px; .corner-inner { left: 9px; top: 4px; } &:hover:after { top: 0; left: 0; padding: 4px 6px 50px; } } .topright { top: 10px; right: 10px; .corner-inner { right: 11px; top: 4px; } } .botleft { bottom: 10px; left: 10px; .corner-inner { left: 9px; top: 68px; } &:hover:after { bottom: 0; left: 0; padding: 50px 6px 4px; } } .botright { bottom: 10px; right: 10px; .corner-inner { right: 11px; top: 68px; } &:hover:after { bottom: 0; right: 0; padding: 50px 6px 4px; text-align: right; } } .glyphicon { font-size: 12px; margin: 0 3px; } } .relations { margin: 0 0 0 10px; .user-hexagon { opacity: 1; } } }