<vbox>
    <style>
        @gridSelectorPane,
        @wheelSelectorPane {
            position: absolute;
            top: 0px;
            left: 0px;
        }
        @modeViewContainer {
            position: relative;
            overflow: visible;
        }
        @wheelImageWrapper {
            justify-content: center;
        }
        @wheelImage {
            width: 140px;
            height: 140px;
            box-sizing: content-box;
            background: url(css/images/color-wheel-70.png) no-repeat 50% 50%;
            position: relative;
        }
        @wheelOverlay {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }
        @pin {
            position: absolute;
            width: 10px;
            height: 10px;
            top: 50%;
            left: 50%;
        }
        @pin:after {
            position: absolute;
            content: " ";
            display: block;
            top: -5px;
            left: -5px;
            width: 100%;
            height: 100%;
            border: solid 1px #FFF;
            box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);
            background: rgba(255, 255, 255, 0.3);
        }
        @hue,
        @sat,
        @bright {
            width: 3.5em;
        }
        @brightnessContainer {
            padding-top: 1em;
            align-items: center;
        }
        @brightnessContainer > * + * {
            margin-left: 0.5em;
        }
        label {
            margin-top: 0px;
            margin-bottom: 0px;
        }
        vbox > input + label {
            margin-top: 0.3em;
        }

        @previewContainer {
            background: url(css/images/checked-bg.png);
            margin-top: 1ex;
        }
        @previewBox {
            box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
        }
        @gridSelectorPane > vbox > vbox > label {
            margin-bottom: .2em;
        }
        @gridSelectorPane > vbox > vbox > hbox {
            padding-left: 1em;
        }
        @gridSelectorPane > vbox > vbox + vbox {
        }
        @gridSelectorPane toolbarbutton.ClearButton {
            list-style-image: url(moz-icon://stock/edit-clear?size=menu);
            padding: 0px;
        }
        .colorpickertile {
        	width: 20px;
        	height: 20px;
        	margin: 1px;
        	border-left: 1px solid #DDD;
        	border-top: 1px solid #DDD;
        	border-right: 1px solid #EEE;
        	border-bottom: 1px solid #EEE;
            position: relative;
            opacity: 0.9999;
        }
        .colorpickertile::before {
            content: "";
            z-index: -1;
            background: url(css/images/checked-bg.png);
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
        }
        .colorpickertile::after {
            content: "";
            z-index: 1;
            background: inherit;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
        }
        .colorpickertile:hover {
        	border: 1px dotted #FFFFFF;
        }

        .cp-light:hover {
        	border: 1px dotted #909090;
        }

        .colorpickertile[selected="true"] {
        	border: 1px solid #FFFFFF;
            box-shadow: 0px 0px 0.2em rgba(0, 0, 0, 1);
        }

        .cp-light[selected="true"] {
        	border: 1px solid #606060;
        }
        @modeTabContainer {
            padding-bottom: 0.5em;
        }
        @modeTabContainer .Tab {
            padding: 0.3ex 1ex;
        }
        @htmlCodeInput {
            flex-basis: 0em;
            min-width: 9ex;
        }
        @pickerButton {
            padding: 0em 0.45em;
            margin-left: 0.2ex;
        }
        
        body[color-picker-active] .ColorPopup {
            visibility: hidden !important;
        }
        body[color-picker-active="true"],
        body[color-picker-active="true"] * {
            cursor: url("css/images/eyedropper.png") 0 32, pointer !important;
        }
        body[color-picker-active="picking"],
        body[color-picker-active="picking"] * {
            cursor: none !important;
        }
        
        body[color-picker-active] > * {
            pointer-events: none;
        }
        
        .ColorPane .PaneTitle {
            margin: 0.5em 0 0.3em 0;
        }
        
        @documentPalettePane {
            margin-top: 0.5em;
            border-bottom: solid 1px #00000022;
            padding-bottom: 0.5em;
        }
        @documentPalettePane .colorpickertile {
            width: 40px;
        }
        @documentPalettePane.NoDocument {
            display: none;
        }
        
        @documentPalettePane @noColorMessage {
            opacity: 0.35;
        }
        
        @documentPalettePane:not(.Empty) @noColorMessage {
            display: none;
        }
        
        @documentPalettePane button {
            height: auto;
            line-height: 1em;
            padding: 0.3em 0.6em;
            margin-left: 0.5em;
        }
        hbox.ContainerWrapper {
            align-items: flex-start;
            overflow: hidden;
        }
        hbox.ContainerWrapper vbox {
            overflow: hidden;
            flex-wrap: wrap;
            flex-basis: 10em;
            width: 10em;
        }
        hbox.ContainerWrapper vbox {
            overflow: hidden;
            flex-wrap: wrap;
            flex-basis: 10em;
            width: 10em;
        }
        @documentPaletteContainer {
            flex-wrap: wrap;
        }
    </style>
    <hbox flex="1">
        <ui:TabPane>
            <vbox anon-id="gridSelectorPane" tab-title="Grid">
                <vbox flex="1" anon-id="gridSelectorContainer">
                    <hbox style="margin-top:1px;">
                        <vbox>
                            <hbox>
                              <div class="colorpickertile cp-light" style="background-color: #FFFFFF" color="#FFFFFF"/>
                              <div class="colorpickertile cp-light" style="background-color: #FFCCCC" color="#FFCCCC"/>
                              <div class="colorpickertile cp-light" style="background-color: #FFCC99" color="#FFCC99"/>
                              <div class="colorpickertile cp-light" style="background-color: #FFFF99" color="#FFFF99"/>
                              <div class="colorpickertile cp-light" style="background-color: #FFFFCC" color="#FFFFCC"/>
                              <div class="colorpickertile cp-light" style="background-color: #99FF99" color="#99FF99"/>
                              <div class="colorpickertile cp-light" style="background-color: #99FFFF" color="#99FFFF"/>
                              <div class="colorpickertile cp-light" style="background-color: #CCFFFF" color="#CCFFFF"/>
                              <div class="colorpickertile cp-light" style="background-color: #CCCCFF" color="#CCCCFF"/>
                              <div class="colorpickertile cp-light" style="background-color: #FFCCFF" color="#FFCCFF"/>
                            </hbox>
                            <hbox>
                              <div class="colorpickertile" style="background-color: #CCCCCC" color="#CCCCCC"/>
                              <div class="colorpickertile" style="background-color: #FF6666" color="#FF6666"/>
                              <div class="colorpickertile" style="background-color: #FF9966" color="#FF9966"/>
                              <div class="colorpickertile cp-light" style="background-color: #FFFF66" color="#FFFF66"/>
                              <div class="colorpickertile cp-light" style="background-color: #FFFF33" color="#FFFF33"/>
                              <div class="colorpickertile cp-light" style="background-color: #66FF99" color="#66FF99"/>
                              <div class="colorpickertile cp-light" style="background-color: #33FFFF" color="#33FFFF"/>
                              <div class="colorpickertile cp-light" style="background-color: #66FFFF" color="#66FFFF"/>
                              <div class="colorpickertile" style="background-color: #9999FF" color="#9999FF"/>
                              <div class="colorpickertile" style="background-color: #FF99FF" color="#FF99FF"/>
                            </hbox>
                            <hbox>
                              <div class="colorpickertile" style="background-color: #C0C0C0" color="#C0C0C0"/>
                              <div class="colorpickertile" style="background-color: #FF0000" color="#FF0000"/>
                              <div class="colorpickertile" style="background-color: #FF9900" color="#FF9900"/>
                              <div class="colorpickertile" style="background-color: #FFCC66" color="#FFCC66"/>
                              <div class="colorpickertile cp-light" style="background-color: #FFFF00" color="#FFFF00"/>
                              <div class="colorpickertile cp-light" style="background-color: #33FF33" color="#33FF33"/>
                              <div class="colorpickertile" style="background-color: #66CCCC" color="#66CCCC"/>
                              <div class="colorpickertile" style="background-color: #33CCFF" color="#33CCFF"/>
                              <div class="colorpickertile" style="background-color: #6666CC" color="#6666CC"/>
                              <div class="colorpickertile" style="background-color: #CC66CC" color="#CC66CC"/>
                            </hbox>
                            <hbox>
                              <div class="colorpickertile" style="background-color: #999999" color="#999999"/>
                              <div class="colorpickertile" style="background-color: #CC0000" color="#CC0000"/>
                              <div class="colorpickertile" style="background-color: #FF6600" color="#FF6600"/>
                              <div class="colorpickertile" style="background-color: #FFCC33" color="#FFCC33"/>
                              <div class="colorpickertile" style="background-color: #FFCC00" color="#FFCC00"/>
                              <div class="colorpickertile" style="background-color: #33CC00" color="#33CC00"/>
                              <div class="colorpickertile" style="background-color: #00CCCC" color="#00CCCC"/>
                              <div class="colorpickertile" style="background-color: #3366FF" color="#3366FF"/>
                              <div class="colorpickertile" style="background-color: #6633FF" color="#6633FF"/>
                              <div class="colorpickertile" style="background-color: #CC33CC" color="#CC33CC"/>
                            </hbox>
                            <hbox>
                              <div class="colorpickertile" style="background-color: #666666" color="#666666"/>
                              <div class="colorpickertile" style="background-color: #990000" color="#990000"/>
                              <div class="colorpickertile" style="background-color: #CC6600" color="#CC6600"/>
                              <div class="colorpickertile" style="background-color: #CC9933" color="#CC9933"/>
                              <div class="colorpickertile" style="background-color: #999900" color="#999900"/>
                              <div class="colorpickertile" style="background-color: #009900" color="#009900"/>
                              <div class="colorpickertile" style="background-color: #339999" color="#339999"/>
                              <div class="colorpickertile" style="background-color: #3333FF" color="#3333FF"/>
                              <div class="colorpickertile" style="background-color: #6600CC" color="#6600CC"/>
                              <div class="colorpickertile" style="background-color: #993399" color="#993399"/>
                            </hbox>
                            <hbox>
                              <div class="colorpickertile" style="background-color: #000000" color="#000000"/>
                              <div class="colorpickertile" style="background-color: #330000" color="#330000"/>
                              <div class="colorpickertile" style="background-color: #993300" color="#993300"/>
                              <div class="colorpickertile" style="background-color: #663333" color="#663333"/>
                              <div class="colorpickertile" style="background-color: #333300" color="#333300"/>
                              <div class="colorpickertile" style="background-color: #003300" color="#003300"/>
                              <div class="colorpickertile" style="background-color: #003333" color="#003333"/>
                              <div class="colorpickertile" style="background-color: #000066" color="#000066"/>
                              <div class="colorpickertile" style="background-color: #330099" color="#330099"/>
                              <div class="colorpickertile" style="background-color: #330033" color="#330033"/>
                            </hbox>
                        </vbox>
                    </hbox>
                </vbox>
            </vbox>vbox
            <vbox anon-id="wheelSelectorPane" tab-title="Wheel">
                <hbox>
                    <hbox anon-id="wheelImageWrapper" flex="1"><div anon-id="wheelImage"><div anon-id="pin"></div><div anon-id="wheelOverlay"></div></div></hbox>
                    <vbox>
                        <label>Hue:</label>
                        <input type="number" min="0" max="359" anon-id="hue" />
                        <label>Sat:</label>
                        <input type="number" min="0" max="100" anon-id="sat"/>
                    </vbox>
                </hbox>
                <hbox anon-id="brightnessContainer">
                    <label>Brightness:</label>
                    <input type="range" anon-id="brightScale" flex="1" min="0" max="100" />
                    <input type="number" anon-id="bright" min="0" max="100" />
                </hbox>
            </vbox>
        </ui:TabPane>
        <vbox style="margin-left: 1em; width: 16ex;">
            <label for="htmlCodeInput">HTML code:</label>
            <hbox>
                <input type="text" anon-id="htmlCodeInput" maxlength="7" flex="1"/>
                <button anon-id="pickerButton"><i>colorize</i></button>
            </hbox>
            <hbox style="padding-top: 1ex;">
                <label for="opacity" flex="1">Opacity:</label>
                <label anon-id="opacityText">12%</label>
            </hbox>
            <input type="range" anon-id="opacity" min="0" max="100" />
            <hbox anon-id="previewContainer" flex="1">
                <div flex="1" anon-id="previewBox"></div>
            </hbox>
        </vbox>
    </hbox>
    <vbox anon-id="documentPalettePane" class="ColorPane">
        <hbox class="PaneTitle">
            <label flex="1" anon-id="paletteTitle">Document palette:</label>
        </hbox>
        <hbox class="ContainerWrapper">
            <vbox flex="1">
                <hbox anon-id="documentPaletteContainer" class="ColorContainer">
                </hbox>
                <label flex="1" anon-id="noColorMessage">No colors defined.</label>
            </vbox>
            <button anon-id="addToPaletteButton" title="Add currently selected color to document palette.">Add</button>
        </hbox>
    </vbox>
    <vbox class="ColorPane">
        <hbox class="PaneTitle">
            <label value="recently-used-colors.label;">Recently used colors:</label>
        </hbox>
        <hbox>
            <hbox anon-id="recentlyUsedColor" class="ColorContainer">
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
              <div class="colorpickertile" style="background-color: #FFFFFF" color="#FFFFFF"/>
            </hbox>
        </hbox>
    </vbox>
</vbox>
