.palette-color-picker-button{
	position:relative;
	display:inline-block;
	width:28px;
	height:28px;
	margin-right:8px;
	background-image: url("/images/color_icon_btn.png");
/*	
<!---
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#f5c86c" d="M2 2h8v8H2z"/><path fill="#f56c6c" d="M12 2h8v8h-8z"/><path fill="#f46ac6" d="M22 2h8v8h-8z"/><path fill="#c3f167" d="M2 12h8v8H2z"/><path fill="#f3f3f3" d="M12 12h8v8h-8z"/><path fill="#c76cf5" d="M22 12h8v8h-8z"/><path fill="#69e369" d="M2 22h8v8H2z"/><path fill="#6bc6f4" d="M12 22h8v8h-8z"/><path fill="#6b6bf5" d="M22 22h8v8h-8z"/><path d="M9 3v6H3V3h6m1-1H2v8h8V2zm9 1v6h-6V3h6m1-1h-8v8h8V2zm9 1v6h-6V3h6m1-1h-8v8h8V2zM9 13v6H3v-6h6m1-1H2v8h8v-8zm9 1v6h-6v-6h6m1-1h-8v8h8v-8zm9 1v6h-6v-6h6m1-1h-8v8h8v-8zM9 23v6H3v-6h6m1-1H2v8h8v-8zm9 1v6h-6v-6h6m1-1h-8v8h8v-8zm9 1v6h-6v-6h6m1-1h-8v8h8v-8z" opacity=".25"/></svg>') center center no-repeat;
--->
*/
	background-size:cover;
	cursor:pointer;
	/*box-shadow:0 0 0 1px #bbb;*/
	border: 1px solid #fff;
	box-shadow:          1px 1px 3px 1px rgba(0,0,0,0.65);	
	-webkit-box-shadow:  1px 1px 3px 1px rgba(0,0,0,0.65);	
	-moz-box-shadow:     1px 1px 3px 1px rgba(0,0,0,0.65)
	/*	
	-moz-box-shadow:     0px 1px 4px 1px rgba(0,0,0,0.65)

  	box-shadow: 
    inset 0 2px 3px rgba(255,255,255,0.3),
    inset 0 -2px 3px rgba(0,0,0,0.3),
    0 1px 1px rgba(255,255,255,0.9);
	
border:1px solid #fff
	*/
	
	}

.palette-color-picker-bubble{
	display:none;
	margin:12px 0; /* pointer distance to color button */
	position:absolute;
	bottom:100%;
	width:760px; /*control bubble width, IE browser showing at once */
	padding:10px 8px 8px 8px;
	border:1px solid #bbb;
	border-radius:3px;
	background-color:#fff
	}
	
.palette-color-picker-bubble:after,
.palette-color-picker-bubble:before
{
	top:100%;
	left:14px;
	border:solid transparent;
	/*background: #F4F4F4; 
	box-shadow: 2px 2px 5px #888888;*/
	content:' ';
	height:0;
	width:0;
	position:absolute;
	pointer-events:none
	}
	
.palette-color-picker-bubble:after{
	border-color:transparent;
	border-top-color:#E0E0E0; 
	/*box-shadow: 2px 2px 5px #4E4E4E;*/
	border-width:8px;
	margin-left:-8px
	}

/*trangle pointer line*/
.palette-color-picker-bubble:before{
	border-color:transparent;
	border-top-color:#bbb;
	border-width:9px;
	margin-left:-9px
	}

.palette-color-picker-bubble.downside{
	bottom:auto;
	top:100%
	}

.palette-color-picker-bubble.downside:after,
.palette-color-picker-bubble.downside:before{
	top:auto;
	bottom:100%
	}

.palette-color-picker-bubble.downside:after{
	border-top-color:transparent;
	border-bottom-color:#fff
	}

.palette-color-picker-bubble.downside:before{
	border-top-color:transparent;
	border-bottom-color:#bbb
	}

.palette-color-picker-bubble 
.swatch{
	position:relative;
	display:inline-block;
	font:0/0 a;
	width:28px; /*12.66%;*/
	padding-top:27px;/*11.00%;*/
	margin:2px 2px;/*1% 2%; khe: Gap between colors  */
	outline:0px solid #808080;
	border:1px solid #fff; 
	border-radius:0px;
	cursor:pointer;
	overflow:hidden}

/*color selected highlight box*/
.palette-color-picker-bubble 
.swatch.active{
	outline-color:#555;
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.65);
	-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,0.65);
	-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,0.65)
	/*
	-webkit-box-shadow:1px 1px 5px 1px rgba(0,0,0,0.75);
	-moz-box-shadow:1px 1px 5px 1px rgba(0,0,0,0.75);
	box-shadow:1px 1px 5px 1px rgba(0,0,0,0.75)*/
	}

.palette-color-picker-bubble 
.swatch.clear{
	background-color:#fff
	}

.palette-color-picker-bubble 
.swatch.clear:before{
	position:absolute;
	content:'';
	display:block;
	top:-1px;
	left:0;
	width:99px;
	height:3px; /*2px*/
	/*background-color:#e00; background-image: url("/images/clear_btn.png");Clear btn, red line*/
	transform-origin:0 0;
	transform:rotate(45deg)
	}

.palette-color-picker-bubble.double 
.swatch{
	width:29.30%;
	padding-top:11.00%;
	margin:1% 2%}

.palette-color-picker-bubble.double 
.swatch.clear:before{
	transform:rotate(22.5deg)
	}

.palette-color-picker-bubble.wide 
.swatch{
	width:96.2%;
	padding-top:11.00%;
	margin:1% 2%}

.palette-color-picker-bubble.wide 
.swatch.clear{
	width:15.66%}