| .ui-colorpicker, | 
| .ui-dialog.ui-colorpicker { | 
|     width:                    auto; | 
|     white-space:            nowrap; | 
|   | 
|     -webkit-touch-callout:    none; | 
|     -webkit-user-select:    none; | 
|     -khtml-user-select:        none; | 
|     -moz-user-select:        none; | 
|     -ms-user-select:        none; | 
|     user-select:            none; | 
| } | 
|   | 
| .ui-colorpicker-inline { | 
|     position:                static; | 
| } | 
|   | 
| .ui-colorpicker-buttonset { | 
|     float:                    left; | 
|     margin-left:            .4em; | 
| } | 
|   | 
| .ui-colorpicker-buttonset .ui-button { | 
|     margin:                    .5em 0 .5em 0; | 
|     cursor:                    pointer; | 
| } | 
|   | 
| .ui-colorpicker-buttonpane { | 
|     background-image:        none; | 
|     margin:                    .7em 0 0 0; | 
|     padding:                0 .2em; | 
|     border-left:            0; | 
|     border-right:            0; | 
|     border-bottom:            0; | 
| } | 
|   | 
| .ui-colorpicker-buttonpane button { | 
|     float:                    right; | 
|     margin:                    .5em .2em .4em; | 
|     cursor:                    pointer; | 
|     padding:                .2em .6em .3em .6em; | 
|     width:                    auto; | 
|     overflow:                visible; | 
| } | 
|   | 
| .ui-colorpicker-buttonpane button.ui-colorpicker-current { | 
|     float:                    left; | 
| } | 
|   | 
| .ui-colorpicker table { | 
|     font-size:                100%; /* Reset browser table font-size */ | 
|     margin:                    0; | 
| } | 
|   | 
| .ui-colorpicker table td { | 
|     vertical-align:            top; | 
| } | 
|   | 
| .ui-colorpicker-padding-left { | 
|     padding-left:            10px; | 
| } | 
| .ui-colorpicker-padding-top { | 
|     padding-top:            10px; | 
| } | 
|   | 
| .ui-colorpicker-border { | 
|     border:                    1px inset; | 
|     display:                inline-block; | 
| } | 
|   | 
| /* Bar & map */ | 
| .ui-colorpicker-map > *, | 
| .ui-colorpicker-bar > * { | 
|     position:                absolute; | 
|     cursor:                    crosshair; | 
| } | 
|   | 
| .ui-colorpicker-map-pointer, | 
| .ui-colorpicker-bar-pointer { | 
|     position:                absolute; | 
| } | 
| /* Map */ | 
| .ui-colorpicker-map, | 
| .ui-colorpicker-map > * { | 
|     display:                block; | 
|     width:                    256px; | 
|     height:                    256px; | 
|     overflow:                hidden; | 
| } | 
|   | 
| .ui-colorpicker-map-layer-1, | 
| .ui-colorpicker-map-layer-2 { | 
|     background:                url(images/map.png) no-repeat; | 
| } | 
|   | 
| .ui-colorpicker-map-layer-alpha { | 
|     background:                url(images/map-opacity.png); | 
| } | 
|   | 
| .ui-colorpicker-map-pointer { | 
|     display:                inline-block; | 
|     width:                    15px; | 
|     height:                    15px; | 
|     background:                url(images/map-pointer.png) no-repeat; | 
| } | 
|   | 
| /* Bar */ | 
| .ui-colorpicker-bar, | 
| .ui-colorpicker-bar > * { | 
|     display:                block; | 
|     width:                    20px; | 
|     height:                    256px; | 
|     overflow:                hidden; | 
|     background-repeat:        repeat-x; | 
| } | 
|   | 
| .ui-colorpicker-bar-layer-1, | 
| .ui-colorpicker-bar-layer-2, | 
| .ui-colorpicker-bar-layer-3, | 
| .ui-colorpicker-bar-layer-4 { | 
|     background:                url(images/bar.png) repeat-x; | 
| } | 
|   | 
| .ui-colorpicker-bar-layer-alpha { | 
|     background:                url(images/bar-opacity.png); | 
| } | 
|   | 
| .ui-colorpicker-bar-layer-alphabar { | 
|     background:                url(images/bar-alpha.png); | 
| } | 
|   | 
| .ui-colorpicker-bar-pointer { | 
|     display:                inline-block; | 
|     width:                    20px; | 
|     height:                    7px; | 
|     background:                url(images/bar-pointer.png) no-repeat; | 
| } | 
|   | 
| /* Preview */ | 
| .ui-colorpicker-preview { | 
|     text-align:                center; | 
| } | 
|   | 
| .ui-colorpicker-preview-initial { | 
|     cursor:                    pointer; | 
| } | 
|   | 
| .ui-colorpicker-preview-initial, | 
| .ui-colorpicker-preview-current { | 
|     width:                    50px; | 
|     height:                    20px; | 
|     display:                inline-block; | 
| } | 
|   | 
| .ui-colorpicker-preview-initial-alpha, | 
| .ui-colorpicker-preview-current-alpha { | 
|     width:                    50px; | 
|     height:                    20px; | 
|     display:                inline-block; | 
|     background:                url(images/preview-opacity.png) repeat; | 
| } | 
|   | 
| /* Inputs */ | 
| .ui-colorpicker-rgb label, | 
| .ui-colorpicker-hsv label, | 
| .ui-colorpicker-hsl label, | 
| .ui-colorpicker-lab label, | 
| .ui-colorpicker-cmyk label, | 
| .ui-colorpicker-alpha label { | 
|     width:                    1.5em; | 
|     display:                inline-block; | 
| } | 
|   | 
| .ui-colorpicker-number { | 
|     margin:                    .1em; | 
|     width:                    4em; | 
| } | 
|   | 
| /* Hex */ | 
| .ui-colorpicker-hex { | 
|     text-align:                center; | 
| } | 
|   | 
| /* Swatches */ | 
| .ui-colorpicker-swatches { | 
|     width:                    84px; | 
|     height:                    256px; | 
|     overflow:                auto; | 
|     background-color:        #f8f8f8; | 
| } | 
|   | 
| .ui-colorpicker-swatch { | 
|     cursor:                    pointer; | 
|     float:                    left; | 
|     width:                    11px; | 
|     height:                    11px; | 
|     border-right:            1px solid black; | 
|     border-bottom:            1px solid black; | 
| } |