body { background: -webkit-radial-gradient(circle, #000, #373737); } /** * Application layout */ .column-wrapper { text-align: center; font-size: 0; position: absolute; left: 104px; top: 10px; right: 0; bottom: 10px; } .left-column { display: inline-block; vertical-align: top; height: 100%; margin-right: 7px; } .main-column { display: inline-block; height: 100%; position: relative; } .drawing-canvas-container { font-size: 0; } .right-column { display: inline-block; vertical-align: top; margin-left: 10px; } .sticky-section { display: table; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; width: 140px; } .sticky-section .wrap { display: table-cell; vertical-align: middle; } /** * Canvases layout */ .canvas { position: relative; z-index: 1; } .canvas-container { position: relative; display: block; } .canvas-container .canvas-background { background: url(../img/canvas_background.png) repeat; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .canvas.canvas-overlay { position: absolute; top: 0; left: 0; z-index: 10; } /** * Animated preview styles. */ .preview-container { border : 0px Solid black; border-radius:5px 0px 0px 5px; box-shadow : 0px 0px 2px rgba(0,0,0,0.2); font-size: 0; } .preview-container canvas { border : 0px Solid transparent; } .display-fps { float: left; color: #aaa; font-size: 12px; min-width: 55px; vertical-align: bottom; line-height: 24px; } .range-fps { overflow: hidden; } .application-actions { margin-top: 35px; } /** * User messages */ .user-message { position: absolute; bottom: 0; left: 25%; background-color: #F9EDBE; padding: 4px 12px; padding-right: 20px; border-top-left-radius: 7px; border-top-right-radius: 7px; border-right: 0; color: #222; border: #F0C36D 1px solid; font-weight: bold; font-size: 13px; z-index: 10000; } .user-message .close { position: absolute; top: 0px; right: 5px; color: gray; font-weight: bold; cursor: pointer; font-size: 18px; } .user-message .close:hover { color: black; }