body { background-color: #ccc; font-family: 'Open Sans'; font-size: 15px; } #image { display: block; position: relative; width: calc( 300px - 2*2px); height: calc( 300px - 2*2px); margin: 20px; border: 2px solid #000; } #log { display: block; position: relative; width: calc( 300px - 2*2px - 2*10px); margin: 10px 20px; padding: 10px; border: 2px solid #555; } #log span { display: block; } /*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibGF5b3V0LmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbGF5b3V0LnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSIkaW1hZ2Utc2l6ZTogMzAwcHg7XG5cblxuYm9keXtcblx0YmFja2dyb3VuZC1jb2xvcjogI2NjYztcblxuXHRmb250LWZhbWlseTogJ09wZW4gU2Fucyc7XG5cdGZvbnQtc2l6ZTogMTVweDtcbn1cblxuXG5cbiNpbWFnZXtcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHR3aWR0aDogY2FsYyggI3skaW1hZ2Utc2l6ZX0gLSAyKjJweCApO1xuXHRcdGhlaWdodDogY2FsYyggI3skaW1hZ2Utc2l6ZX0gLSAyKjJweCApO1xuXG5cdG1hcmdpbjogMjBweDtcblxuXHRib3JkZXI6IDJweCBzb2xpZCAjMDAwO1xufVxuXG5cbiNsb2d7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0d2lkdGg6IGNhbGMoICN7JGltYWdlLXNpemV9IC0gMioycHggLSAyKjEwcHggKTtcblxuXHRtYXJnaW46IDEwcHggMjBweDtcblx0cGFkZGluZzogMTBweDtcblxuXHRib3JkZXI6IDJweCBzb2xpZCAjNTU1O1xuXG5cdHNwYW57XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdH1cblxufVxuIgoJXSwKCSJtYXBwaW5ncyI6ICJBQUdBLEFBQUEsSUFBSSxDQUFBO0VBQ0gsZ0JBQWdCLEVBQUUsSUFBSztFQUV2QixXQUFXLEVBQUUsV0FBWTtFQUN6QixTQUFTLEVBQUUsSUFBSztDQUNoQjs7QUFJRCxBQUFBLE1BQU0sQ0FBQTtFQUNMLE9BQU8sRUFBRSxLQUFNO0VBQ2YsUUFBUSxFQUFFLFFBQVM7RUFDbEIsS0FBSyxFQUFFLG9CQUFJO0VBQ1gsTUFBTSxFQUFFLG9CQUFJO0VBRWIsTUFBTSxFQUFFLElBQUs7RUFFYixNQUFNLEVBQUUsY0FBZTtDQUN2Qjs7QUFHRCxBQUFBLElBQUksQ0FBQTtFQUNILE9BQU8sRUFBRSxLQUFNO0VBQ2YsUUFBUSxFQUFFLFFBQVM7RUFDbEIsS0FBSyxFQUFFLDZCQUFJO0VBRVosTUFBTSxFQUFFLFNBQVU7RUFDbEIsT0FBTyxFQUFFLElBQUs7RUFFZCxNQUFNLEVBQUUsY0FBZTtDQU12Qjs7QUFkRCxBQVVDLElBVkcsQ0FVSCxJQUFJLENBQUE7RUFDSCxPQUFPLEVBQUUsS0FBTTtDQUNmIiwKCSJuYW1lcyI6IFtdCn0= */