BODY {

}

/* Main frame */
#excMain {
	width: 200px;
	border: 2px solid #8c8c8c;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	background-color: #a6a6a6;
	background-image: url('img/background.png');
	background-repeat: repeat-y;
}

#excMain A {
	font-family: sans-serif;
	font-size: 12px;
}

/* Picker selector */
#excPSelector {
	padding: 0px 5px;
	background-image: url('img/upgradient.png');
	background-repeat: repeat-x;
	border-bottom: 2px solid #737373;
}

#excPSelector IMG {
	cursor: pointer;
	padding: 1px 0 0 0;
	margin-right: 4px;
	-background-image: url('img/bgc.png');
	-background-repeat: no-repeat;
}

#excPickers {
	position: relative;
	overflow: hidden;
}

.excHSlider {
	width: 128px;
	height: 6px;
	position: relative;
}

.excHSlider .excHandle {
	margin-top:-5px;
	width: 16px;
	height: 15px;
	background-image: url('img/shandle.png');
	opacity: 0.9;
	z-index: 2;
}
.excHSlider:hover .excHandle {
	opacity: 1;
}

/* HSB Picker */
#excHSBPicker,
#excRGBPicker {
	position: absolute;
	top: 0px;
	width: 190px;
	padding: 10px 3px 10px 7px;
}

#excBlack {
	width: 128px;
	height: 6px ;
	display: block;
	position: absolute;
	font-size: 5px;
	top: 0px;
	left: 0px;
	background-color: black;
	z-index: 1;
}

#excHSBPicker INPUT,
#excRGBPicker INPUT {
	font-size: 9px;
	float: right;
	font-family: sans-serif;
	border-width: 0;
	padding: 1px;
	text-align :right;
	background-color: transparent;
	-background-image: url('img/50w.png');
}

#excHSBPicker INPUT:hover,
#excHSBPicker INPUT:focus,
#excRGBPicker INPUT:hover,
#excRGBPicker INPUT:focus {
	border: 1px solid #ccc;
	padding: 0;
	background-color: white;
}

.excUnit {
	float: right;
	width: 10px;
	font-family: sans-serif;
	font-size: 9px;
	padding: 1px 0px;
	-background-image: url('img/50w.png');
}

#excHue, #excSat, #excBri,
#excRed, #excGreen, #excBlue {
	clear: both;
	margin-bottom: 7px;
	font-size: 8px;
}

#excHue .excHSlider,
#excSat .excHSlider, 
#excBri .excHSlider,
#excRed .excHSlider,
#excGreen .excHSlider,
#excBlue .excHSlider {
	border: 1px solid black;
	float: left;
}

#excHue .excHSlider {
	background-image: url('img/hue.png');
}

#excSat .excHSlider {
	background-image: url('img/saturation.png');
}

#excRed .excHSlider,
#excGreen .excHSlider,
#excBlue .excHSlider,
#excBri .excHSlider {
	background-image: url('img/brightness.png');
}

#excRed .excHSlider {
	background-color: red;
}
#excGreen .excHSlider {
	background-color: green;
}
#excBlue .excHSlider {
	background-color: blue;
}

/* Bottom summary */
#excSum {
	width: 100%;
	height: 22px;
}

/* Current color, visual*/
#excVColor {
	width: 36px;
	height: 15px;
	margin: 2px 0px 0px 2px;
	float: left;
	border: 1px solid gray;
	background-color: yellow; /* white TODO */
}

/* Current color, hexadecimal */
#excHColor {
	padding: 0 2px;
	float: left;
	margin: 2px 0px 0px 7px;
	border: 1px solid gray;
	font-family: monospace;
	font-size: 12px;
	height: 15px;
}