body { background: -webkit-radial-gradient(circle, #000, #373737); } /** * Application layout */ @toolbar-height: 104px; .column-wrapper { text-align: center; font-size: 0; position: absolute; left: 0; top: @toolbar-height; right: 0; bottom: 0; } .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; } .top-section { position: absolute; bottom: 100%; min-width: 400px; margin-bottom: 5px; } .right-column { display: inline-block; vertical-align: top; background: blue; margin-left: 10px; } /** * 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; } /** * 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; }