html { height: 100%;} body { height: 100%; font-family: Roboto-Regular, verdana; background: #222; font-size: 0px; color: #333;} #canvas_handler { display: inline-block; vertical-align: top; position: absolute; left: 256px; z-index: 2; width: calc(100% - 512px); height: 100%;} #main_canvas { display: block; position: absolute; z-index: 1; width: 100px; height: 100px; background-image: url("../img/canvas_bg.png"); cursor: url("../img/cursor.png");} #informations_div { display: block; position: absolute; z-index: 2; left: 50%; bottom: 0; height: 24px; margin-left: auto; margin-right: auto; padding: 0px 8px; box-shadow: 0px 0px 1px #000; background: #333; font-size: 0px; color: #eee; transform: translate(-50%, 0); cursor: pointer;} #informations_div:hover { box-shadow: 0px 0px 2px #000;} #informations_div span { display: inline-block; vertical-align: top; height: 24px; line-height: 24px; text-align: center; font-size: 12px;} #informations_div_x, #informations_div_y, #informations_div_w { margin-right: 8px; padding-right: 8px; border-right: 1px solid #111;} #left_aside { display: inline-block; vertical-align: top; position: absolute; left: 0px; z-index: 3; width: 256px; height: 100%; box-shadow: 0px 0px 4px #000; background: #eee; overflow: auto;} #right_aside { display: inline-block; vertical-align: top; position: absolute; right: 0px; z-index: 3; width: 256px; height: 100%; box-shadow: 0px 0px 4px #000; background: #eee; overflow: auto;} #left_aside section, #right_aside section { display: block; overflow: hidden;} #left_aside section h2, #right_aside section h2 { display: block; height: 24px; line-height: 24px; padding-left: 8px; border-bottom: 1px solid #222; color: #eee; font-weight: normal; font-size: 14px; background: #333;} #left_aside section h2 span, #right_aside section h2 span { display: inline-block; float: right; width: 24px; height: 24px; line-height: 24px; border-left: 1px solid #222; color: #eee; text-align: center; cursor: pointer;} #project_view_section {} #project_view_section .zoom { width: 256px; margin-top: 8px; padding: 0px 16px;} #project_view_section .zoom p { display: inline-block; vertical-align: top; width: 100px; height: 32px; line-height: 32px; margin: 0px; font-size: 14px;} #project_view_section .zoom input { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 4px 0px; border: 1px solid #ddd; background: #fafafa; font-size: 14px; cursor: pointer;} #project_view_section .zoom span { display: inline-block; vertical-align: top; width: 50px; height: 32px; line-height: 32px; font-size: 14px; text-align: center;} #project_view_section .grid { padding: 0px 16px;} #project_view_section .grid p { display: inline-block; vertical-align: top; width: 100px; height: 32px; line-height: 32px; margin: 0px; font-size: 14px;} #project_view_section .grid input { display: inline-block; vertical-align: top; height: 24px; cursor: pointer;} #project_view_section .rules { padding: 0px 16px;} #project_view_section .rules p { display: inline-block; vertical-align: top; width: 100px; height: 32px; line-height: 32px; margin: 0px; font-size: 14px;} #project_view_section .rules input { display: inline-block; vertical-align: top; height: 24px; cursor: pointer;} #project_view_section .informations { padding: 0px 16px;} #project_view_section .informations p { display: inline-block; vertical-align: top; width: 100px; height: 32px; line-height: 32px; margin: 0px; font-size: 14px;} #project_view_section .informations input { display: inline-block; vertical-align: top; height: 24px; cursor: pointer;} #project_view_section .background { margin-bottom: 8px; padding: 0px 16px;} #project_view_section .background p { display: inline-block; vertical-align: top; width: 100px; height: 32px; line-height: 32px; margin: 0px; font-size: 14px;} #project_view_section .background input { display: inline-block; vertical-align: top; width: 64px; height: 32px; padding: 0px; border: none; background: #fff; font-size: 14px; cursor: pointer;} #tools_section {} #tools_section .tool_handler { display: inline-block; position: relative; width: 20%; height: 20%; cursor: pointer; overflow: hidden;} #tools_section .tool_handler:hover { background: #eee;} #tools_section .tool_handler#selected_tool { box-shadow: 0px 0px 2px #777 inset; background: #ddd;} #tools_section .tool_handler img { display: block; width: 64%; margin: 18%;} #tools_section .tool_handler:hover span { display: block; position: absolute; bottom: 0px; right: 0px; width: 16px; height: 16px; line-height: 16px; font-size: 12px; background: #fff; box-shadow: 0px 0px 2px #777; text-align: center;} #tools_section .tool { display: none; padding-bottom: 8px;} #tools_section .tool > p { display: inline-block; vertical-align: top; width: 128px; height: 32px; line-height: 32px; margin: 0px; margin-left: 16px; font-size: 14px;} #tools_section .tool > span { display: inline-block; vertical-align: top; height: 32px; line-height: 32px; font-size: 14px;} #tools_section .tool > input { display: block; width: 84%; margin: 0% 8%; padding: 0px;} #tools_section .tool > div { display: block; width: 84%; margin: 0% 8%; padding-top: 8px;} #tools_section .tool > div p { display: inline-block; vertical-align: top; box-sizing: border-box; width: calc(50% - 8px); height: 80px; margin: 0; padding: 8px; border: 1px solid #aaa; font-size: 14px; text-align: center; cursor: pointer;} #tools_section .tool > div p.selected { border: none; background: #ddd; box-shadow: 0px 0px 2px #777 inset;} #tools_section .tool > div p:nth-child(1) { margin-right: 8px;} #tools_section .tool > div p:nth-child(2) { margin-left: 8px;} #tools_section .tool .legend { width: auto; height: auto; line-height: 16px; margin: 0px 16px; font-size: 12px; color: #777; font-style: italic;} #tool_option_pen { display: block} #tools_section .symetry_div { display: block; width: 84%; padding: 2% 8%; border-top: 1px solid #aaa;} #tools_section .symetry_div p { display: inline-block; vertical-align: top; width: 150px; height: 32px; line-height: 32px; font-size: 14px;} #tools_section .symetry_div input { display: inline-block; vertical-align: top; height: 32px; line-height: 32px; } #palettes_section {} #palettes_section .colors { box-shadow: 1px 0px 1px 1px #000 inset; background-image: url("../img/canvas_bg.png"); cursor: pointer;} #palettes_section .color { display: inline-block; vertical-align: top; width: calc(12.5% - 1px); height: 31px; margin: -1px -1px 0px 0px; border: 1px solid #000;} #palettes_section .default_black { background: #000000;} #palettes_section .default_white { background: #ffffff;} #palettes_section .selected { display: block; padding: 8px; text-align: center;} #palettes_section .selected .input_handler { display: inline-block; vertical-align: top; width: calc(50% - 18px); margin: 8px; border: 1px solid #333; background-image: url("../img/canvas_bg.png"); cursor: pointer;} #palettes_section .selected input { display: inline-block; vertical-align; top; width: 100%; height: 64px; margin: 0px; padding: 0px; border: none; opacity: 0; cursor: pointer;} #palettes_section .selected span { display: inline-block; vertical-align; top; width: 50%; height: 32px; font-size: 12px;} #preview_section {} #preview_section canvas { background: #222;} #layers_section {} #add_layer { display: block; box-sizing: border-box; width: 100%; height: 50px; line-height: 50px; border-bottom: 1px solid #aaa; text-align: center; font-size: 14px; cursor: pointer;} #add_layer:hover { background: #ddd;} #layers_handler { display: block; max-height: 250px; overflow: auto;} #layers_handler .layer { display: block; box-sizing: border-box; width: 100%; height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; cursor: pointer;} #layers_handler .layer:last-child { border-bottom: 1px solid #aaa;} #layers_handler .layer span { display: inline-block; vertical-align: top; width: 50px; height: 50px;} #layers_handler .layer span.visible { background-image: url("../img/icons/visible.svg"); background-size: 16px 16px; background-repeat: no-repeat; background-position: 50% 50%;} #layers_handler .layer span.invisible { background-image: url("../img/icons/invisible.svg"); background-size: 16px 16px; background-repeat: no-repeat; background-position: 50% 50%;} #layers_handler .layer p { display: inline-block; vertical-align: top; box-sizing: border-box; width: calc(100% - 50px); height: 50px; line-height: 50px; padding-left: 10px; border-left: 1px solid #ccc; font-size: 14px; overflow: hidden;} #selected_layer p { color: #32785f;} #layers_handler .layer input { display: none; vertical-align: top; box-sizing: border-box; width: calc(100% - 50px); height: 49px; padding: 0px 0px 0px 10px; border: none; border-left: 1px solid #ccc; color: #333; font-size: 14px; overflow: hidden;} #layers_actions { display: block; width: 100%; height: 25px; border-bottom: 1px solid #aaa;} #layers_actions span { display: inline-block; vertical-align: top; box-sizing: border-box; width: 25%; height: 25px; line-height: 25px; border-left: 1px solid #ccc; font-size: 12px; text-align: center; cursor: pointer;} #layers_actions span:hover { background: #ddd;} #export_section {} #export_section .export { display: block; box-sizing: border-box; width: 100%; height: 50px; line-height: 50px; border-bottom: 1px solid #aaa; text-align: center; font-size: 14px; cursor: pointer;} #export_section .export:hover { background: #ddd;} #export_section div span { } #export_section div { padding-top: 10px; padding-left: 20px;} #export_section div p { display: inline-block; vertical-align: top; width: 110px; height: 32px; line-height: 32px; margin: 0px; font-size: 14px;} #export_section div input { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 4px 0px; border: 1px solid #ddd; background: #fafafa; font-size: 14px; cursor: pointer;} #export_section div span { display: inline-block; vertical-align: top; width: 40px; height: 32px; line-height: 32px; font-size: 14px; text-align: center;} #export_section .legend { line-height: 16px; margin: 16px; font-size: 12px; color: #777; font-style: italic;}