<hbox>
    <style>
        @mainArea {
            overflow: hidden;
            background:
                linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 20em,rgba(255,255,255,0) 100%),
                url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
        }

        @contentHeader {
            padding: 0.7em;
            box-shadow: 0px 0px 1.5em 0.4em #FFF;
            border-bottom: solid 1px darken(@app_bg, 10%);
        }
        @contentHeader > vbox > * + * {
            margin-top: 0.5em;
        }
        @contentHeader > vbox > .widget_ScrollableView > @content > * + * {
            margin-left: 0.4em;
        }
        @contentBody {
            background: darken(@app_bg, 10%);
        }
        @contentBody > .CanvasScrollPane {
            text-align: center;
            overflow: auto;
            background: darken(@app_bg, 10%);
            box-shadow: inset 0px 0px 1ex rgba(0, 0, 0, 0.3);
            align-items: center;
        }
        @contentBody > .CanvasScrollPane > * {
            text-align: left;
        }
        @contentBody > .CanvasScrollPane[overflowx='false'] {
            justify-content: center;
        }
        @contentBody > .CanvasScrollPane[overflowy='false'] {
            align-items: center;
        }
        .CanvasWrapper {
            padding: 10px;
            box-sizing: content-box;
            margin: auto;
            vertical-align: middle;
            display: inline-block;
            position: relative;
        }
        .CanvasWrapper .widget_StencilShapeCanvasToolbar {
            position: absolute;
            bottom: 0em;
            height: 2.5em;
            left: 10px;
            right: 8px;
            display: none;
        }

        @contentBody[stencil-dev-mode='true'] .widget_StencilShapeCanvasToolbar {
            display: flex;
        }
        @contentBody[stencil-dev-mode='true'] .CanvasWrapper {
            padding-bottom: 3em;
        }
        @contentBody[stencil-dev-mode='true'] .widget_ShapeTestCanvasPane .CanvasWrapper {
            padding-bottom: 0em;
        }

        .Canvas {
            background: #FFF;
            border: solid 1px #AAA;
            box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
            line-height: 1px;
            outline: none;
            overflow: hidden;
            display: inline-block;
        }
        .CanvasWrapper:focus {
            outline: none;
        }
        .CanvasWrapper:focus > .Canvas {
            outline: solid 1px fadeout(@selected_bg, 30%);
            outline-offset: -1px;
        }
        .Canvas svg {
            line-height: 1.428;
        }

        .widget_SharedPropertyEditor {
            overflow-x: hidden;
        }

        @contentHeader {
            font-size: 0.85em;
            background: @app_bg;
        }
        @contentHeader button,
        @contentHeader hbox.ButtonGroup {
        }
        @contentHeader button {
            padding-left: 0.7em;
            padding-right: 0.7em;
        }
        @contentHeader .widget_ComboManager @selectContainer > button {
            padding-right: 0.3em;
        }
        @contentHeader > hbox > * {
            margin-left: 1em;
            white-space: nowrap;
        }
        @contentHeader > hbox > *:first-child {
            margin-left: 0em;
        }
        @contentHeader input[type='number'] {
            text-align: center;
        }
        @contentHeader @menuIcon {
            @iconify();
            opacity: 1;
            font-size: 2.5em;
            padding: 0.3em;
            border-radius: 1em;
            cursor: pointer;
        }
        @contentHeader @menuIcon:hover {
            background: #FFF;
            color: @selected_bg;
        }
        @contentHeader @appName i {
            @iconify();
            font-size: 1.3em;
            opacity: 1;
        }
        @logoBox {
            padding-right: 3em;
            align-items: center;
        }
        @appName {
            font-size: 2em;
            color: darken(saturate(#da8500, 20%), 0%);
            cursor: default;
        }
        @appName * {
            vertical-align: middle;
        }
        @documentContainer {
            min-width: 0px;
            flex: 1 1 auto;
        }
        @toolbarContainer {
            flex-wrap: wrap;
            xmargin-top: -1.2ex;
        }
        @toolbarContainer > * + * {
            margin-left: @toolbar_gap;
            margin-top: @toolbar_gap;
        }
        @toolbarContainer *[label] {
            position: relative;
        }
        @toolbarContainer *[label]:after {
            display: block;
            content: attr(label);
            position: absolute;
            left: 0px;
            right: 0px;
            top: -0.3em;
            text-align: center;
            color: darken(@app_bg, 15%);
            text-shadow: 1px 1px 0px lighten(@app_bg, 5%);
            font-size: 0.8em;
            text-transform: uppercase;
        }
        @toolbarContainer *[label]:hover:after {
            color: darken(@app_bg, 45%);
        }
        @toolbarContainer *[label] {
            padding-top: 1em;
            padding-bottom: 0.8em;
        }
        @contentSection {
            position: relative;
            padding-right: 3em;
            padding-left: 3em;
            transform: translateZ(0);
        }

        body:not(.Fullscreen) @contentSection > .widget_CollapseablePanel:not([float='true']):first-child {
            margin-left: -3em;
        }
        body:not(.Fullscreen) @contentSection > * + .widget_CollapseablePanel:not([float='true']) {
            margin-right: -3em;
        }

        body.Fullscreen @contentSection > .widget_CollapseablePanel,
        body @contentSection > .widget_CollapseablePanel[float='true'] {
            position: absolute;
            top: 0px;
            bottom: 0px;
            z-index: 1;
        }

        body.Fullscreen @contentSection > .widget_CollapseablePanel:first-child,
        body @contentSection > .widget_CollapseablePanel[float='true']:first-child {
            left: 0px;
        }
        body.Fullscreen @contentSection > * + .widget_CollapseablePanel,
        body @contentSection > * + .widget_CollapseablePanel[float='true'] {
            right: 0px;
        }

        body @contentSection .widget_CollapseablePanel[float='true']:not([closed='true']),
        body.Fullscreen @contentSection .widget_CollapseablePanel:not([closed='true']) {
            box-shadow: 0em 0em 0.5em 0.3em rgba(0, 0, 0, 0.15);
        }

        @shapeTestPane {
            position: absolute;
            top: 2em;
            left: 2em;
            bottom: 2em;
            right: 2em;
        }


        @media screen and (max-width: 1000px), screen and (max-height:650px)  {
            @logoBox {
                padding-right: 0.2em;
            }
            @appName {
                margin-left: 0.2em !important;
            }
            @toolbarContainer *[label]:after {
                display:none;
            }
            @contentHeader {
                padding: 0px;
            }
            @toolbarContainer *[label] {
                padding:0px;
                padding-bottom:0.4em;
            }
            @contentHeader @menuIcon {
                padding:0.2em;
            }
        }
    </style>

    <vbox flex="1" anon-id="mainArea">
        <hbox anon-id="contentHeader" style="align-items: center;">
            <hbox anon-id="logoBox">
                <i anon-id="menuIcon">menu</i>
                <div anon-id="appName">
                    <strong>PENCIL</strong>
                </div>
            </hbox>
            <vbox flex="1">
                <ui:ScrollableView anon-id="toolBarSrollView" flex="1">
                    <hbox anon-id="toolbarContainer">
                        <ui:FileToolbar label="" />
                        <ui:EditToolbar label="Edit" anon-id="editToolbar"/>
                        <ui:ZoomToolbar anon-id="zoomToolbar" label="100%" />
                        <ui:AlignmentToolbar label="Alignment"/>
                        <ui:SizeToolbar label="Same sizes &amp; Spaces"/>
                        <ui:SharedFontEditor anon-id="sharedFontEditor" label="Text style" />
                        <ui:ColorEditor label="Colors" />
                        <ui:SharedBorderStyleEditor label="Line style" />
                        <ui:SharedGeomtryEditor />
                    </hbox>
                </ui:ScrollableView>
            </vbox>
        </hbox>
        <hbox flex="1" style="overflow: hidden; position: relative; " anon-id="contentSection">
            <ui:CollapseablePanel orient="horizontal" name="left_pane" anon-id="leftSidePane" controls-location="top">
                <ui:CollectionPane anon-id="collectionPane"/>
                <ui:MyCollectionPane anon-id="myCollectionPane"/>
                <ui:OpenClipartPane anon-id="openClipartPane"/>
            </ui:CollapseablePanel>
            <vbox flex="1" anon-id="documentContainer">
                <hbox anon-id="contentBody" flex="1" style="position: relative;">
                    <ui:StartUpDocumentView anon-id="startupDocumentView" flex="1" />
                    <ui:ShapeTestCanvasPane anon-id="shapeTestPane" />
                </hbox>
                <ui:PageListView anon-id="pageListView" />
            </vbox>
            <ui:CollapseablePanel orient="horizontal" name="right_pane" anon-id="rightSidePane" float="true">
                <ui:SharedPropertyEditor anon-id="sharedPropertyEditor" />
            </ui:CollapseablePanel>
        </hbox>
    </vbox>
</hbox>
