.crColorRoller {
	overflow:auto;
	width:290px;
	height:120px;
	background-color:silver;
	position:relative;
	z-index: 100;
}
.crColorRoller  span{
	display:inline-block;
}
.crHead{
	background-image: -moz-linear-gradient(top, white, silver);
	height:10px;
}
.crBox {
	cursor:crosshair;
	position:relative;
	margin:10px;
	float:left;
	position:relative;
	width:80px;
	height:80px;
}
.crBoxSel{
	position:absolute;
	width:1px;
	height:1px;
}
.crBoxSel div{
	position:absolute;
	top:-2px;
	left:-2px;
	height:4px;
	width:4px;
	border:1px solid;
	overflow:hidden;
	-moz-border-radius:50%;
}
.crBar{
	float:left;
	width:10px;
	height:80px;
	margin:10px;
	background-image: -moz-linear-gradient(top, white, black);
	position:relative;
}
.crBarSel{
	position:absolute;
	left:-1px;
	margin-top:-2px;
	top:50%;
	height:5px;
	width:100%;
	background-color:#fff;
	border:1px solid black;
}
.crNums{
	float:right; 
	width:135px
}
.crNums span{
	padding-right:3px;
	text-align:right;
	width:10px;
}
.crNums .crHex,.crNums input{
	width:25px;
}
 .crNums .crIHex{
	width:60px;
}
.crNums .crView{
	width:25px; 
	height:15px; margin-left:3px;
	vertical-align:middle;
}
.crShade{
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	border:0;
	zoom:1;
}
.crImg, .crImgIE{
	width:100%;
	height:100%;
	position:absolute;
}
.crBoxImg{
	background-image: -moz-linear-gradient (left, rgb(0,0,0), rgb(255,255,255));
	width:100%;
	height:100%;
}

.crHide{
	display:none
}

.crCancel, .crComplete {
	width:80px; float:right; cursor:pointer; height: 30px; font-size: 20px;
}

.crRound, .crRound *{
	-moz-border-radius:50%; /* Firefox 3.5+ */
	-webkit-border-radius:40px; /*Webkit 3.0+ */
	-ms-border-radius:50%; /* IE9+ (cruel joke) */
	border-radius:50%; /* Opera 10.5+ */
}

.crGradientBW {
	background-image: url('gradient.png');
	background-image: linear-gradient(left, black, white);
	background-image: -moz-linear-gradient(left, black, white);
	background-image: -webkit-gradient(linear, left center, right center, from(black), to(white));
	    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='black', EndColorStr='white');
	-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='black', EndColorStr='white');
}
.crAlphaGradient {
		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=100,  FinishX=100, StartY=0, FinishY=100);
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=100,  FinishX=100, StartY=0, FinishY=100);
}
.crShow{
	height:22;
	vertical-align:top;
}

.crCircle{
	position:relative;
	overflow:hidden;
}

.crCircle div{
	position:absolute;
	width:80px;
	height:80px;
	border:10px solid silver;
}
.crTriangle div{
	position:absolute;
	border-bottom:80px dotted transparent;
	width:0;
	height:0;
	bottom:0;
	right:0;
}

.crTri1{
	left:0;
	border-left:40px solid silver;
}

.crTri2{
	right:0;
	border-right:40px solid silver;
}

.xcrRight{
	border-bottom:80px solid transparent;
	border-left:80px solid silver;
	position:absolute;
	width:0;
	height:0;
	bottom:0;
	right:0;
}

.crType,
.crSpace {
	display: none;
}
