#colorPickerGradient {
	background-color: #f00;
	background-image: url('../images/colorPickerGradient.png');
	background-repeat: no-repeat;
	border: 1px solid rgba(0, 0, 0, 1);
	cursor: default;
	display: inline-block;
	height: 256px;
	overflow: hidden;
	position: relative;
	width: 256px;
	
	> span {
		border: 1px solid rgba(0, 0, 0, 1);
		border-radius: 10px;
		display: block;
		height: 10px;
		left: -4px;
		position: absolute;
		top: -4px;
		width: 10px;
		
		> span {
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: 10px;
			display: block;
			height: 8px;
			width: 8px;
		}
	}
} 

#colorPickerBar {
	background-image: url('../images/colorPickerBar.png');
	background-repeat: repeat-x;
	border: 1px solid rgba(0, 0, 0, 1);
	cursor: default;
	display: inline-block;
	height: 256px;
	margin-left: 10px;
	position: relative;
	width: 16px;
	
	> span {
		display: inline-block;
		height: 1px;
		left: 0;
		position: absolute;
		top: 27px;
		width: 16px;
		
		&::after,
		&::before {
			content: "";
			display: block;
			height: 0;
			position: absolute;
			top: 0;
			width: 0;
		}
		
		&::after {
			border-bottom: 5px solid transparent;
			border-right: 5px solid rgba(0, 0, 0, 1);
			border-top: 5px solid transparent;
			right: -7px;
			top: -5px;
		}
		
		&::before {
			border-bottom: 5px solid transparent;
			border-left: 5px solid rgba(0, 0, 0, 1);
			border-top: 5px solid transparent;
			left: -7px;
			top: -5px;
		}
	}
}

#colorPickerForm {
	display: inline-block;
	margin-left: 20px;
	position: relative;
	text-align: center;
	width: 100px;

	> .colors {
		> .new,
		> .old {
			border: 1px solid rgba(0, 0, 0, 1);
			display: block;
			height: 24px;
		}
		
		> .old {
			border-top-width: 0;
		}
	}
	
	> .hex {
		margin-top: 21px;
	}
	
	> .rgba {
		margin-top: 21px;
		
		> li.a {
			margin-top: 7px;
		}
	}
	
	> .rgba > li,
	> .hex > li {
		text-align: right;
		
		input {
			margin-left: 7px;
			width: 80px;
		}
	}
}