#rgbValue, #hslaValue
{
	float: right;
}
.container
{
	overflow: auto;
}
#showPicker
{
	float: left;
}
.colorPicker
{
	background: #E8E6E0;
	border: 1px solid #BBB;
	-moz-border-radius: 0.3em;
	border-radius: .3em;
	margin: 1em;
	display: inline-block;
}
.colorPicker .extras
{
	float: right;
	margin: 0.5em;
}
.colorPicker .extras .currentColorContainer
{
	overflow: hidden;
}
.colorPicker .extras .currentColor
{
	float: right;
	width: 65px;
	height: 30px;
	border: 1px solid #BBB;
	-moz-border-radius: 0.3em;
	border-radius: .3em;
}
.colorPicker .extras .colorFields
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.colorPicker .extras .color
{
	text-align: right;
}
.colorPicker .extras .colorFields INPUT
{
	width: 40px;
	margin-left: 0.5em;
}
.colorPicker .extras .hex
{
	float: right;
}
.colorPicker .extras .hex INPUT
{
	width: 60px;
}
.colorPicker .twod
{
	float: left;
	margin: 0.5em;
}
/*main dimensions*/
.colorPicker .twod, .colorPicker .twod .bg
{
	width: 200px;
	height: 240px;
}
.colorPicker .oned, .colorPicker .oned .bg
{
	height: 240px;
}
.colorPicker .oned, .colorPicker .oned .bg, .colorPicker .oned .pointer .shape
{
	width: 20px;
}
.colorPicker .twod .bg
{
	position: absolute;
	/*These seem to cause issues in some browsers, careful!
border: 1px solid #BBB;
-moz-border-radius: .3em;
border-radius: .3em;
*/
}
.colorPicker .twod .pointer
{
	position: relative;
	z-index: 2;
	width: 8px;
}
.colorPicker .twod .pointer .shape
{
	position: absolute;
}
.colorPicker .twod .pointer .shape1
{
	margin-left: -7px;
	margin-top: -7px;
	width: 10px;
	height: 10px;
	border: 2px solid #000000;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.colorPicker .twod .pointer .shape2
{
	margin-left: -6px;
	margin-top: -6px;
	width: 8px;
	height: 8px;
	border: 2px solid #FFFFFF;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.colorPicker .oned
{
	float: left;
	margin: 0.5em;
}
.colorPicker .oned .bg
{
	border: 1px solid #BBB;
	/*
-moz-border-radius: .3em;
border-radius: .3em;
*/
}
.colorPicker .oned .pointer
{
	position: relative;
	z-index: 2;
}
.colorPicker .oned .pointer .shape
{
	position: absolute;
	margin-left: -1px;
	margin-top: -4px;
	height: 5px;
	border: 2px solid #000000;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
/*gradients, tweak as needed based on which browsers you want to support*/
.colorPicker .oned .bg
{
	background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(17%,#ffff00), color-stop(33%,#00ff00), color-stop(50%,#00ffff), color-stop(66%,#0000ff), color-stop(83%,#ff00ff), color-stop(100%,#ff0000));
	background: -webkit-linear-gradient(top, #ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 66%,#ff00ff 83%,#ff0000 100%);
	background: -o-linear-gradient(top, #ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 66%,#ff00ff 83%,#ff0000 100%);
	background: linear-gradient(to bottom, #ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 66%,#ff00ff 83%,#ff0000 100%);
}
.colorPicker .twod .bg1
{
	z-index: 0;
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
.colorPicker .twod .bg2
{
	z-index: 1;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
}
#hslPicker .twod .bg1
{
	background: -moz-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(17%,#ffff00), color-stop(33%,#00ff00), color-stop(50%,#00ffff), color-stop(66%,#0000ff), color-stop(83%,#ff00ff), color-stop(100%,#ff0000));
	background: -webkit-linear-gradient(left, #ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 66%,#ff00ff 83%,#ff0000 100%);
	background: -o-linear-gradient(left, #ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 66%,#ff00ff 83%,#ff0000 100%);
	background: linear-gradient(to right, #ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 66%,#ff00ff 83%,#ff0000 100%);
}
#hslPicker .twod .bg2
{
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(127,127,127,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(127,127,127,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(127,127,127,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(127,127,127,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(127,127,127,1) 100%);
}
#hslPicker .oned .bg
{
	z-index: 1;
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0),rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
}
#hslPicker .extras
{
	width: 100px;
}
#hslPicker .oned.alpha
{
	margin: 0;
}
#hslPicker .oned.alpha .bg
{
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
	/*FF3.6+*/
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(0,0,0,1)));
	/*Chrome,Safari4+*/
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,1) 100%);
	/*Chrome10+,Safari5.1+*/
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,1) 100%);
	/*Opera 11.10+*/
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(0,0,0,1) 100%);
	/*W3C*/
}
