.colorpicker { width: 356px; height: 176px; overflow: hidden; position: absolute; background: url(../images/widgets/colorpicker/custom_background.png); font-family: Arial, Helvetica, sans-serif; display: none; z-index:1500; } .colorpicker_color { width: 150px; height: 150px; left: 14px; top: 13px; position: absolute; background: #f00; overflow: hidden; cursor: crosshair; } .colorpicker_color div { position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: url(../images/widgets/colorpicker/colorpicker_overlay.png); } .colorpicker_color div div { position: absolute; top: 0; left: 0; width: 11px; height: 11px; overflow: hidden; background: url(../images/widgets/colorpicker/colorpicker_select.gif); margin: -5px 0 0 -5px; } .colorpicker_hue { position: absolute; top: 13px; left: 171px; width: 35px; height: 150px; cursor: n-resize; } .colorpicker_hue div { position: absolute; width: 35px; height: 9px; overflow: hidden; background: url(../images/widgets/colorpicker/custom_indic.gif) left top; margin: -4px 0 0 0; left: 0px; } .colorpicker_new_color { position: absolute; width: 60px; height: 30px; left: 213px; top: 13px; background: #f00; } .colorpicker_current_color { position: absolute; width: 60px; height: 30px; left: 283px; top: 13px; background: #f00; } .colorpicker input.text { background-color: transparent; border: 1px solid transparent; position: absolute; font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #898989; top: 4px; right: 11px; text-align: right; margin: 0; padding: 0; height: 11px; } .colorpicker_hex { position: absolute; width: 72px; height: 22px; background: url(../images/widgets/colorpicker/custom_hex.png) top; left: 212px; top: 142px; } .colorpicker_hex input { right: 6px; } .colorpicker_field { height: 22px; width: 62px; background-position: top; position: absolute; } .colorpicker_field span { position: absolute; width: 12px; height: 22px; overflow: hidden; top: 0; right: 0; cursor: n-resize; } .colorpicker_rgb_r { background-image: url(../images/widgets/colorpicker/custom_rgb_r.png); top: 52px; left: 212px; } .colorpicker_rgb_g { background-image: url(../images/widgets/colorpicker/custom_rgb_g.png); top: 82px; left: 212px; } .colorpicker_rgb_b { background-image: url(../images/widgets/colorpicker/custom_rgb_b.png); top: 112px; left: 212px; } .colorpicker_hsb_h { background-image: url(../images/widgets/colorpicker/custom_hsb_h.png); top: 52px; left: 282px; } .colorpicker_hsb_s { background-image: url(../images/widgets/colorpicker/custom_hsb_s.png); top: 82px; left: 282px; } .colorpicker_hsb_b { background-image: url(../images/widgets/colorpicker/custom_hsb_b.png); top: 112px; left: 282px; } .colorpicker_focus { background-position: center; } .colorpicker_hex.colorpicker_focus { background-position: bottom; } .colorpicker_submit.colorpicker_focus { background-position: bottom; } .colorpicker_slider { background-position: bottom; } div.ccm-color-swatch-wrapper { position:relative; left:0px; top:0px; height:36px; width:36px; float: left} div.ccm-color-swatch-wrapper div.ccm-color-swatch { position: absolute; top: 0; left: 0px; width: 28px; height: 36px; background: url(../images/widgets/colorpicker/select2.png); cursor: pointer; } div.ccm-color-swatch-wrapper div.ccm-color-swatch div { position: absolute; top: 4px; left: 0px; width: 28px; height: 28px; background: url(../images/widgets/colorpicker/select2.png) center; } // Colorpicker button generic styles input.colorpicker_none, input.colorpicker_submit{ cursor:pointer; position:absolute; display:inline-block; padding:3px 0 5px 0; text-shadow:0 1px 1px rgba(255, 255, 255, 0.75); color:#ffffff; font-size:10px; line-height:13px; border:1px solid #ccc; *border:0; border-bottom-color:#bbb; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); -webkit-transition:0.1s linear all; -moz-transition:0.1s linear all; -ms-transition:0.1s linear all; -o-transition:0.1s linear all; transition:0.1s linear all; } input.colorpicker_none:hover, input.colorpicker_submit:hover{background-position:0 -15px;color:#FFF;text-decoration:none;} input.colorpicker_none:focus, input.colorpicker_submit:focus{outline:0;} input.colorpicker_none:active, input.colorpicker_submit:active{ -webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05); box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05); } :root input.colorpicker_none, :root input.colorpicker_submit{border-radius:0 \0;} .colorpicker input.colorpicker_none::-moz-focus-inner,.colorpicker input.colorpicker_submit::-moz-focus-inner{padding:0;border:0;} input.colorpicker_submit{ background-color:#0064cd; background-repeat:repeat-x; background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); background-image:-moz-linear-gradient(top, #049cdb, #0064cd); background-image:-ms-linear-gradient(top, #049cdb, #0064cd); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); background-image:-webkit-linear-gradient(top, #049cdb, #0064cd); background-image:-o-linear-gradient(top, #049cdb, #0064cd); background-image:linear-gradient(top, #049cdb, #0064cd); filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0)"; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); border-color:#0064cd #0064cd #003f81; border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);left:313px;top:141px;width:32px; } input.colorpicker_none{ background-color:#c43c35; background-repeat:repeat-x; background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35); background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35)); background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image:-o-linear-gradient(top, #ee5f5b, #c43c35); background-image:linear-gradient(top, #ee5f5b, #c43c35); filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0)"; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); border-color:#c43c35 #c43c35 #882a25; border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); left:289px;top:141px; width:20px; padding:2px 0 6px 0; }