span.mark { background-color: #ffff88; background: linear-gradient(top, #ffffee, #ffff88); /* padding: 2px 6px; */ /* border: 1px solid #660; */ border-radius: 5px; position: relative; } span.reason { position: absolute; display: inline-block; border: none; width: 100%; height: 100%; border-radius: 5px; overflow: hidden; background: transparent; color: transparent; top: -1px; left: -1px; padding: 2px 6px; overflow: hidden; } span.reason:hover { border: 1px solid green; width: 200px; background: #eeffee; height: auto; color: inherit; z-index: 1000; cursor: pointer; } span.wg-oice { background-color: #fcc; } span.wg-iage { background-color: #ccf; } span.wg-eded { background-color: #8ff; } span.wg-ning { background-color: #f8f; } span.wg-iche { background-color: #cfc; } span.wg-ated { background-color: #ff8; } span.wg-word { background-color: #eee; } div#writegood { z-index: 999; position: fixed; bottom: 5px; right: 5px; width: 250px; border: 1px solid gray; background-color: rgba(255,255,255,0.8); border-radius: 5px; padding: 5px 10px; } div#writegood h4 { margin-top: 10px; } table#writegoodtd { margin: 0; font-family: Open Sans, Arial; width: 100%; } table#writegoodtd td:nth-child(1) { text-align: right; } table#writegoodtd td { font-family: Open Sans, Arial; padding: 1px 2px; } Write-Good