/* colorpanel */
.colorpanel * { padding: 0; box-sizing: content-box; }
.colorpanel { z-index: 150; padding: 10px; width: 405px; height: 200px; border: 1px solid #bbb; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.5); -moz-box-shadow: 0 0 10px rgba(0,0,0,.5); box-shadow: 0 0 10px rgba(0,0,0,.5); font-size: 12px; moz-user-select: none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; box-sizing: content-box; }
.colorpanel .basePanel { float: left; width: 200px; margin: 0; color: #000; font-size: 12px; }
.colorpanel .basePanel table { margin: 0; border-spacing: 0; }
.colorpanel .basePanel table td { padding: 0 2px; }
.colorpanel .basePanel table td span { display: block; width: 14px; height: 14px; border: 1px solid silver; }
.colorpanel .basePanel table.container { margin-top: 0; border-width: 0 1px; width: 200px; }
.colorpanel .basePanel table.container td span { border-width: 0 1px; }
.colorpanel .basePanel .intro { margin-top: 8px; width: 100%; height: 20px; text-align: left; }
.colorpanel .separateLine { float: left; margin: 0 10px; width: 1px; height: 200px; background: #eee; }
.colorpanel .minicolors { float: left; margin: 5px 0 0 0; }
.colorpanel .colorInfo { float: left; margin: 2px 0 0 0; width: 180px; }
.colorpanel .colorInfo .colorInput { float: left; display: inline; margin: 0 0 0 2px; padding: 3px 10px; width: 110px; height: 20px; outline: 2px solid #a5c7fe; word-spacing: 4px; letter-spacing: 2px; font-size: 17px; font-family: Arial; moz-user-select: text; -moz-user-select: text; -o-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; }
.colorpanel .colorInfo input.invalidFormat { outline: 2px solid red; }
.colorpanel .colorInfo .colorClearer { float: left; margin: 0 0 0 10px; width: 28px; height: 28px; border: 1px solid #ccc; background: url(/share/jquery-minicolors/transparent.png) top center repeat; text-align: center; cursor: pointer; }

.colorselector{display:inline-block;width:28px;height:28px;border:1px solid #ccc;}
.colorselector .colorpreview{display:block;width:100%;height:100%;cursor:pointer;border:0px;}
.colorselector .colorpreview.transparent{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) 100% 100% repeat;}