.paperscript .button, .paperscript .explain { display: none; position: relative; /* position (top / right) relative to paperscriptcontainer */ float: right; /* align right as block */ font-size: 11px; line-height: 16px; padding: 2px 6px; margin-bottom: -20px; /* move canvas up by 16px (height) + 2 * 2px (padding) */ border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; z-index: 1; top: 8px; /* margin to top */ } .paperscript .button { right: 8px; /* margin to right */ background: #eee; } .paperscript .explain { display: block; right: 64px; /* margin to right */ background: #e3f4fc; margin-bottom: -36px; /* (height) + 2 * 2px (padding) */ } .paperscript:hover .button { display: block; } .paperscript .button:hover { background: #ddd; cursor: pointer; } .paperscript .source { overflow: auto; border: 1px solid #999; } .paperscript .CodeMirror { margin: 0 !important; /* Override any potential margins again */ } .paperscript .CodeMirror-gutter-text, .paperscript .CodeMirror-lines { padding-top: 10px; padding-bottom: 10px; } .paperscript .canvas { line-height: 0; /* prevent weird 5px padding under canvas elements */ } .paperscript .canvas.border canvas { border: 1px solid #999; } .paperscript.split .canvas { border: 1px solid #999; border-top: 0; }