.slider{font-family:Verdana;display:block;position:relative;z-index:1;margin:.5em .5em 1em .5em}.slider .title,.slider .control,.slider .value{vertical-align:middle;display:inline-block}.slider .title{min-width:2em;width:8em;overflow:hidden;text-overflow:ellipsis;position:relative;padding-right:.5em;text-align:right;text-shadow:1px 1px rgba(0,0,0,0.5)}.slider input{display:block;width:100%;cursor:pointer;margin:0;position:relative;z-index:5}.slider input,.slider .control,.slider .control .ruler,.slider .control .marks{box-sizing:border-box}.slider .value{width:3em;overflow:hidden;text-overflow:ellipsis;padding-left:.5em;text-align:left;text-shadow:1px 1px rgba(0,0,0,0.5)}.slider .control{width:12em;position:relative;top:.5em}.slider .ruler{position:absolute;top:.8em;left:3px;right:3px;height:6px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAIAAABvrngfAAAABnRSTlMAAAAAAAEZoTcHAAAAH0lEQVR4nGNgYmJiYGBkYGBEMBgwAF6hf//+E6EKDgCSZwMWgWq9dQAAAABJRU5ErkJggg==") top left repeat-x;opacity:.3;z-index:2}.slider .marks{position:relative;width:100%;z-index:2}.slider .marks td{font-size:.8em;width:33.3%;text-align:center;color:#a0a0a0}.slider .marks td:first-child{padding-left:2px;text-align:left}.slider .marks td:last-child{padding-right:2px;text-align:right}.slider .marks .left,.slider .marks .middle,.slider .marks .right{cursor:pointer}.slider .marks .left:hover,.slider .marks .middle:hover,.slider .marks .right:hover{color:#000}
.ctrlTipLeft,.ctrlTipRight,.ctrlTipTop,.ctrlTipBottom{display:inline-block;position:relative;border-radius:.2em;-webkit-box-shadow:2px 2px 1px rgba(0,0,0,0.30);box-shadow:2px 2px 1px rgba(0,0,0,0.30);z-index:10}.ctrlTipLeft,.ctrlTipRight{padding:5px}.ctrlTipTop,.ctrlTipBottom{padding:5px}.ctrlTipLeft,.ctrlTipRight,.ctrlTipTop,.ctrlTipBottom,.ctrlTipLeft .ugol div,.ctrlTipRight .ugol div,.ctrlTipTop .ugol div,.ctrlTipBottom .ugol div{background-color:#fff;color:#000;border:solid 1px #000;box-sizing:border-box}.ctrlTipLeft .ugol,.ctrlTipRight .ugol,.ctrlTipTop .ugol,.ctrlTipBottom .ugol{position:absolute;overflow:hidden}.ctrlTipLeft .ugol div,.ctrlTipRight .ugol div,.ctrlTipTop .ugol div,.ctrlTipBottom .ugol div{position:absolute;width:20px;height:20px}.ctrlTipLeft{margin-right:15px}.ctrlTipLeft .ugol{top:0;right:-14px;width:14px;height:100%}.ctrlTipLeft .ugol div{top:0;margin-top:16px;left:-10px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:2px 2px 1px rgba(0,0,0,0.30);box-shadow:2px 2px 1px rgba(0,0,0,0.30)}.ctrlTipRight{margin-left:14px}.ctrlTipRight .ugol{top:0;left:-14px;width:14px;height:100%}.ctrlTipRight .ugol div{top:0;margin-top:16px;left:5px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:2px 2px 1px rgba(0,0,0,0.30);box-shadow:2px 2px 1px rgba(0,0,0,0.30)}.ctrlTipTop{margin-bottom:14px}.ctrlTipTop .ugol{bottom:-14px;left:0;width:100%;height:14px}.ctrlTipTop .ugol div{top:-10px;left:0;margin-left:16px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:2px -2px 1px rgba(0,0,0,0.30);box-shadow:2px -2px 1px rgba(0,0,0,0.30)}.ctrlTipBottom{margin-top:14px}.ctrlTipBottom .ugol{top:-14px;left:0;width:100%;height:14px}.ctrlTipBottom .ugol div{top:5px;left:0;margin-left:16px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-box-shadow:2px 2px 1px rgba(0,0,0,0.30);box-shadow:2px 2px 1px rgba(0,0,0,0.30)}.ctrlTipTop,.ctrlTipBottom,.ctrlTipLeft,.ctrlTipRight,.ctrlTipTop .ugol div,.ctrlTipBottom .ugol div,.ctrlTipLeft .ugol div,.ctrlTipRight .ugol div{-webkit-box-shadow:0 0 2px 1px #c0c0c0;box-shadow:0 0 2px 1px #c0c0c0;border-color:#b8b6b7}


.colorPicker {
	position: relative;
	display: inline-block;
	font-family: Verdana;
	font-size: 16px;
}

.colorPicker.colorPickerNoMouseEvent {
	pointer-events: none;
}

.colorPickerCaptured,
.colorPickerCaptured * {
	cursor: pointer !important;
}

.colorPicker * {
	box-sizing: border-box;
	vertical-align: top;
}

.colorPicker input[type=text],
.colorPicker input[type=number],
.colorPicker textarea {
	display: inline-block;
	background-color: #FFFFFF;
	color: #000000;
	border-radius: 2px;
	box-shadow: inset 0 0 2px #000000;
	border: none !important;
	padding: 0 0.2em;
	margin: 0;
	font-family: inherit;
	font-size: 0.9em;
	height: 1.6em;
}

.colorPicker input[type=number] {
	padding-right: 2px;
}

.colorPicker input[type=radio],
.colorPicker input[type=checkbox],
.colorPicker select,
.colorPicker label {
	cursor: pointer;
}

.colorPicker select {
	display: inline-block;
	background-color: #FFFFFF;
	color: #000000;
	border-radius: 2px;
	box-shadow: inset 0 0 2px #000000;
	border: none !important;
	margin: 0;
	font-family: inherit;
	font-size: 0.9em;
}

.colorPicker .map {
	position: relative;
	display: inline-block;
	width: 256px;
	height: 256px;
	margin: 2px;
	cursor: pointer;
	z-index: 1;
}

.colorPicker .map .cursor {
	position: absolute;
	z-index: 10;
	width: 16px;
	height: 16px;
	border: solid 1px #000000;
	padding: 1px;
	border-radius: 8px;
	margin: -8px 0 0 -8px;
}
.colorPicker .map .cursor:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 12px;
	height: 12px;
	border-radius: 7px;
	border: solid 1px #FFFFFF;
}


.colorPicker .bar,
.colorPicker .alphaBar {
	position: relative;
	display: inline-block;
	width: 20px;
	margin-left: 5px;
	height: 256px;
	margin: 2px;
	z-index: 1;
	margin-left: 12px;
	cursor: pointer;
}

.colorPicker .bar .cursor,
.colorPicker .alphaBar .cursor {
	position: absolute;
	margin: -2px 0 0 0;
	z-index: 10;
	height: 5px;
	left: -3px;
	right: -3px;
	border: solid 1px #000000;
}
.colorPicker .bar .cursor:before,
.colorPicker .alphaBar .cursor:before {
	content: "";
	position: absolute;
	top: 0px;
	height: 1px;
	left: 0px;
	right: 0px;
	border: solid 1px #FFFFFF;
}

.colorPicker .map,
.colorPicker .bar,
.colorPicker .alphaBar {
	box-shadow: 0 0 1px 1px #FFFFFF;
	cursor: pointer;
}
.colorPicker .map:before,
.colorPicker .bar:before,
.colorPicker .alphaBar:before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	bottom: -2px;
	right: -2px;
	z-index: 1;
	border: solid 1px #A0A0A0;
}

.colorPicker .map,
.colorPicker .bar,
.colorPicker .alphaBar,
.colorPicker .color .layers,
.ctrlBind.colorPickerField > .bt {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12Ng+I8V4RIGAH6/D/EIQoVRAAAAAElFTkSuQmCC);
	background-repeat: repeat;
}

.colorPicker .map .layers,
.colorPicker .bar .layers,
.colorPicker .alphaBar .layers,
.colorPicker .color .layers {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.colorPicker .alphaBar .layers {
	background-image: url( "colorPickerBars.png" );
	background-repeat: repeat-x;
	background-position: 0 -3855px;
}

.colorPicker .map:hover:before,
.colorPicker .bar:hover:before,
.colorPicker .alphaBar:hover:before,
.colorPicker .map.captured:before,
.colorPicker .bar.captured:before,
.colorPicker .alphaBar.captured:before {
	border-color: #000000;
}

.colorPicker .map .layers > div,
.colorPicker .bar .layers > div {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.colorPicker .map .layers > div {
	background-image: url( "colorPickerMaps.png" );
}

.colorPicker .bar .layers > div {
	background-image: url( "colorPickerBars.png" );
	background-repeat: repeat-x;
}

.colorPicker .map .layers > .map-h {
	background-position: 0 0;
}
.colorPicker .bar .layers > .bar-h {
	background-position: 0 0;
}

.colorPicker .map .layers > .map-s {
	background-position: 0 -257px;
}
.colorPicker .map .layers > .map-s-ovl {
	background-position: 0 -514px;
	z-index: 2;
}
.colorPicker .bar .layers > .bar-s {
	background-position: 0 -257px;
}

.colorPicker .map .layers > .map-v {
	background-position: 0 -771px;
}
.colorPicker .bar .layers > .bar-v {
	background-position: 0 -514px;
}

.colorPicker .map .layers > .map-r-min {
	background-position: 0 -1028px;
}
.colorPicker .map .layers > .map-r-max {
	background-position: 0 -1285px;
	z-index: 2;
}
.colorPicker .bar .layers > .bar-r-bl {
	background-position: 0 -771px;
}
.colorPicker .bar .layers > .bar-r-br {
	background-position: 0 -1028px;
	z-index: 2;
}
.colorPicker .bar .layers > .bar-r-tr {
	background-position: 0 -1542px;
	z-index: 3;
}
.colorPicker .bar .layers > .bar-r-tl {
	background-position: 0 -1285px;
	z-index: 4;
}

.colorPicker .map .layers > .map-g-min {
	background-position: 0 -1542px;
}
.colorPicker .map .layers > .map-g-max {
	background-position: 0 -1799px;
	z-index: 2;
}
.colorPicker .bar .layers > .bar-g-bl {
	background-position: 0 -1799px;
}
.colorPicker .bar .layers > .bar-g-br {
	background-position: 0 -2056px;
	z-index: 2;
}
.colorPicker .bar .layers > .bar-g-tr {
	background-position: 0 -2570px;
	z-index: 3;
}
.colorPicker .bar .layers > .bar-g-tl {
	background-position: 0 -2313px;
	z-index: 4;
}

.colorPicker .map .layers > .map-b-min {
	background-position: 0 -2056px;
}
.colorPicker .map .layers > .map-b-max {
	background-position: 0 -2313px;
	z-index: 2;
}
.colorPicker .bar .layers > .bar-b-bl {
	background-position: 0 -2827px;
}
.colorPicker .bar .layers > .bar-b-br {
	background-position: 0 -3084px;
	z-index: 2;
}
.colorPicker .bar .layers > .bar-b-tr {
	background-position: 0 -3598px;
	z-index: 3;
}
.colorPicker .bar .layers > .bar-b-tl {
	background-position: 0 -3341px;
	z-index: 4;
}

.colorPicker .controls {
	display: inline-block;
	margin-left: 12px;
	width: 6.5em;
}

.colorPicker .controls > .control {
	display: block;
	margin: 0.1em 0;
	padding: 0.08em 0.3em;
	border-radius: 3px;
	white-space: nowrap;
}

.colorPicker .controls > .control * {
	vertical-align: middle;
	display: inline-block;
}

.colorPicker .controls > .control:first-child {
	margin-top: 0;
}

.colorPicker .controls > .control:last-child {
	margin-bottom: 0;
}

.colorPicker .controls > .control.v,
.colorPicker .controls > .control.b {
	margin-bottom: 0.5em;
}

.colorPicker .controls > .control:hover {
	background-color: #F0F0F0;
}

.colorPicker .controls > .control > input[type=radio] {
	margin: 0 0 0 0.2em;;
	padding: 0;
	display: inline-block;
	width: 1em;
}

.colorPicker .controls > .control > input[type=number] {
	width: 3.6em;
	display: inline-block;
}

.colorPicker .controls > .control > label {
	display: inline-block;
	cursor: pointer;
	width: 1.6em;
	text-align: center;
	font-weight: bold;
	color: #505050;
}

.colorPicker .controls > .control.color {
	position: relative;
	width: 100%;
	height: 1.3em;
	margin-bottom: 0.5em;
	cursor: pointer;
	border: solid 1px #A0A0A0;
	background-color: #FFFFFF;
	border-radius: 0;
}

.colorPicker .controls > .control.color .c {
	top: 1px;
	left: 1px;
	right: 50%;
	bottom: 1px;
}

.colorPicker .controls > .control.color .s {
	top: 1px;
	left: 50%;
	right: 1px;
	bottom: 1px;
}

.colorPicker .controls > .control.color .c > div,
.colorPicker .controls > .control.color .s > div {
	width: 100%;
	height: 100%;
}

.colorPicker .controls > .control.color .c:before,
.colorPicker .controls > .control.color .s:after {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	right: 1px;
	border: solid 1px #FFFFFF;
	box-shadow: 0 0 0 1px #000000, 0 0 0 2px #FFFFFF;
	z-index: 1;
	display: none;
}

.colorPicker .controls > .control.color .c:hover:before,
.colorPicker .controls > .control.color .s:hover:after {
	display: block;
}

.colorPicker .controls > .control.color {
	margin-bottom: 0.45em;
}

.colorPicker .controls > .control.a > label {
	margin-left: 1em;
	cursor: default;
}

.colorPicker .controls > .control.result {
	padding: 0;
	margin-top: 0.45em;
}

.colorPicker .controls > .control.result > input {
	width: 100%;
}

.colorPicker .controls > .control.color:hover,
.colorPicker .controls > .control.result:hover	{
	background-color: transparent;
}

.colorPicker.noAlpha .alphaBar,
.colorPicker.noAlpha .controls .control.a,
.colorPicker.noRes .controls > .control.result {
	display: none;
}

.colorPicker.noAlpha .controls > .control.color,
.colorPicker.noRes .controls > .control.color {
	height: 3.3em !important;
}

.colorPicker.noAlpha.noRes .controls > .control.color {
	margin-bottom: 0.75em !important;
}

.colorPicker.noAlpha.noRes .controls > .control {
	margin: 0.3em 0 !important;
}

.colorPicker.noAlpha.noRes .controls > .control.v {
	margin-bottom: 0.75em !important;
}

.ctrlBind.colorPickerField > .bt {
	position: absolute;
	top: 2px;
	right: 3px;
	bottom: 2px;
	border: solid 1px #000000;
	width: 16px;
	cursor: pointer;
	overflow: hidden;
}
.ctrlBind.colorPickerField > .bt > div {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.ctrlBind.colorPickerField > input {
	padding-right: 24px;
	position: relative;
}

.ctrlBind.colorPickerField > .ctrlTip {
	width: 28.5em;
}

/* scale 0.5 */
/*
.colorPicker .map {
	width: 128px;
	height: 128px;
}
.colorPicker .map .layers {
	top: 0;
	left: 0;
	width: 256px;
	height: 256px;
	transform: scale( 0.5 ) translate( -50%, -50% );
}

.colorPicker .bar {
	height: 128px;
	width: 10px;
}
.colorPicker .bar .layers {
	top: 0;
	left: 0;
	width: 20px;
	height: 256px;
	transform: scale( 0.5 ) translate( -50%, -50% );
}
*/