body { background: #fcfcfc; padding: 20px 50px; margin: 0px; } /* textarea */ textarea { background: transparent; border: 0px; color: #000; padding: 0px; width: 100%; height: 100%; font-family: monospace; outline: none; resize: none; font-size: 13px; margin-top: 0; margin-bottom: 0; } /* the line numbers */ #linenos { color: #7d7d7d; z-index: -1000; position: absolute; /* top: 20px; */ left: 0px; width: 30px; /* 30 to get 20 away from box */ font-size: 13px; font-family: monospace; text-align: right; user-select: none; } /* code box when locked */ #box { padding: 0px; margin: 0px; width: 100%; border: 0px; outline: none; font-size: 13px; overflow: inherit; background: #fcfcfc; } #box code { padding: 0px; background: transparent !important; /* don't hide hastebox */ } /* key */ #key { display: flex; justify-content: space-between; width: 100%; position: sticky; flex-wrap: row; } #box1 { padding: 5px; text-align: center; background: #fcfcfc; } #box2 { display: flex; justify-content: right; background: #fcfcfc; font-size: 0px; padding: 0px 5px; } a.logo, a.logo:visited { display: inline-block; background: url(logo.png); width: 126px; min-width: 126px; height: 42px; } a.logo:hover { background-position: 0 bottom; } #box2 .function { background: url(function-icons.png); width: 32px; height: 37px; display: inline-block; position: relative; } #box2 .link embed { vertical-align: bottom; /* fix for zeroClipboard style */ } #box2 .function.enabled:hover { cursor: hand; cursor: pointer; } #pointer { display: block; height: 5px; width: 10px; background: url(hover-dropdown-tip.png); bottom: 0px; position: absolute; margin: auto; left: 0px; right: 0px; } #box3, #messages li { position: absolute; right: 100px; background: #fcfcfc; font-family: Helvetica, sans-serif; font-size: 12px; line-height: 14px; padding: 10px 15px; user-select: none; } #box3 .label { color: #000; font-weight: bold; } #messages li { color: #FFF; right: 50px; } #box3 .shortcut { color: #c4dce3; font-weight: normal; } #box2 .function.save { background-position: -5px top; } #box2 .function.enabled.save { background-position: -5px center; } #box2 .function.enabled.save:hover { background-position: -5px bottom; } #box2 .function.new { background-position: -42px top; } #box2 .function.enabled.new { background-position: -42px center; } #box2 .function.enabled.new:hover { background-position: -42px bottom; } #box2 .function.duplicate { background-position: -79px top; } #box2 .function.enabled.duplicate { background-position: -79px center; } #box2 .function.enabled.duplicate:hover { background-position: -79px bottom; } #box2 .function.raw { background-position: -116px top; } #box2 .function.enabled.raw { background-position: -116px center; } #box2 .function.enabled.raw:hover { background-position: -116px bottom; } #box2 .function.twitter { background-position: -153px top; } #box2 .function.enabled.twitter { background-position: -153px center; } #box2 .function.enabled.twitter:hover { background-position: -153px bottom; } #box2 .button-picture{ border-width: 0; font-size: inherit; } #messages { margin:0; padding:0; } #messages li { background:rgba(252,252,252,0.8); margin:0 auto; list-style:none; } #messages li.error { background:rgba(102,8,0,0.8); }