/* NumberSpinner */

/* the namespace is ".lucid .dijitSpinner .dijitInputLayoutContainer" */

/********* hacks ************/

/* 
 * in .dijitValidationIcon the padding is: 0 2px;
 * but lucid Common.css change this to padding: 2px;
 * this cause the div calculate its height error (minus 4px)
 */
/*
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitValidationIcon {
	padding-top: 0;
	padding-bottom: 0;
}
/** end hacks **/

.lucid .dijitSpinner {
	border: 1px solid #bcc8dd;
}

.lucid .dijitSpinner .dijitInputLayoutContainer {
	background-color: #fff;
	background-image: url("images/textBox_back.png");
	background-repeat: repeat-x;
}

.dj_ie6 .lucid .dijitSpinner .dijitInputLayoutContainer {
	background-image: none;	/* ie6 doesn't support transparent background image */	
}

.lucid .dijitSpinner .dijitSpinnerButtonContainer {
	float: right;
	width: 21px;
	overflow: hidden;
	position: relative;
	height: 100%;
	padding: 2px 0px;
}

/* button */
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitArrowButton {
	height: 50%;
	width: 20px;
	background-color: #f6f7fa;
	background-image: url("images/menubutton_back.png");
	overflow: hidden;
	
	/* override Button.css */
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}

.lucid .dijitSpinner .dijitInputLayoutContainer .dijitUpArrowButton {
	border-left: 1px solid #bcc8dd;
	
}

.lucid .dijitSpinner .dijitInputLayoutContainer .dijitDownArrowButton {
	border-left: 1px solid #bcc8dd;
	border-top: 1px solid #bcc8dd;
	position: absolute;
	top: 50%;
}


/* up&down button */
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitUpArrowButton .dijitArrowButtonInner,
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitDownArrowButton .dijitArrowButtonInner {
	border: 1px solid #fff;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	padding: 2px 4px;

	/* for up arrow */
	background-image: url("images/arrowup.png");

	/* for hack button.css */
	display: block;
	width: auto;
	height: 100%;
	margin: 0;
	margin-top: -1px;	/* here we set -1 to fix the position of the arrow button (because it has a border-top of dijitArrowButtonInner) */
	padding:0;
}

.lucid .dijitSpinner .dijitInputLayoutContainer .dijitDownArrowButton .dijitArrowButtonInner {
	background-image: url("images/arrowdown.png");
}


/** hover status **/
.lucid .dijitSpinnerHover,
.lucid .dijitUpArrowButtonActive,
.lucid .dijitDownArrowButtonActive {
/*.lucid .dijitSpinnerUpArrowActive,
.lucid .dijitSpinnerDownArrowActive,
.lucid .dijitSpinnerFocusedUpArrowHover,
.lucid .dijitSpinnerFocusedDownArrowHover {*/
	border:1px solid #769dc0;	
}


/*.lucid .dijitSpinner .dijitInputLayoutContainerHover*/
.lucid .dijitSpinnerHover .dijitInputLayoutContainer{
	background-color: #eef7ff;
	background-image: url("images/textBox_back_hover.png");
}

/*
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitDownArrowButtonHover,
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitUpArrowButtonHover {
	border-color: #769dc0;
	background-color: #abd6ff;
	background-image: url("images/white_grad.png");
}
*/

/*
.lucid .dijitSpinnerHover .dijitInputLayoutContainer .dijitDownArrowButton,
.lucid .dijitSpinnerHover .dijitInputLayoutContainer .dijitUpArrowButton,
*/
/*
.lucid .dijitSpinnerUpArrowActive .dijitInputLayoutContainer .dijitUpArrowButton,
.lucid .dijitSpinnerDownArrowActive .dijitInputLayoutContainer .dijitDownArrowButton,
.lucid .dijitSpinnerFocusedUpArrowHover .dijitInputLayoutContainer .dijitUpArrowButton,
.lucid .dijitSpinnerFocusedDownArrowHover .dijitInputLayoutContainer .dijitDownArrowButton {
*/	
.lucid .dijitUpArrowButtonActive,
.lucid .dijitDownArrowButtonActive {
	border:1px solid #769dc0;
	background-image: url("images/white_grad.png");
	background-color:#abd6ff;
}

.lucid .dijitSpinner .dijitInputLayoutContainer .dijitUpArrowButtonHover,
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitDownArrowButtonHover {
	background-image: url("images/white_grad.png");
	background-color: #abd6ff;
}

.lucid .dijitSpinner .dijitInputLayoutContainer .dijitUpArrowButtonHover .dijitArrowButtonInner  {
	background-image: url("images/arrowup_active.png");
}
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitDownArrowButtonHover .dijitArrowButtonInner  {
	background-image: url("images/arrowdown_active.png");
}

/* mouse down status */
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitDownArrowButtonActive,
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitUpArrowButtonActive {
	border-color: #769dc0;
	background-color: #7dbefa;
	background-image: url("images/white_grad_shadow.png");
}
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitUpArrowButtonActive .dijitArrowButtonInner  {
	background-image: url("images/arrowup_active.png");
	border-color: transparent;
}
.lucid .dijitSpinner .dijitInputLayoutContainer .dijitDownArrowButtonActive .dijitArrowButtonInner  {
	background-image: url("images/arrowdown_active.png");
	border-color: transparent;
}

/* disabled */
.lucid .dijitSpinnerDisabled {
	border: 1px solid #d3d3d3;
}
.lucid .dijitSpinnerDisabled .dijitInputLayoutContainer {
	background-color: #efefef;
	background-image: none;
	color: #818181;
}

.lucid .dijitSpinnerDisabled .dijitInputLayoutContainer .dijitUpArrowButton .dijitArrowButtonInner  {
	background-image: url("images/arrowup_disabled.png");
	border-color: #efefef;
}
.lucid .dijitSpinnerDisabled .dijitInputLayoutContainer .dijitDownArrowButton .dijitArrowButtonInner  {
	background-image: url("images/arrowdown_disabled.png");
	border-color: #efefef;
}

/* checked */
.lucid .dijitSpinnerFocused .dijitInputLayoutContainer {
	background-color: #fff;
	background-image: none;
}

/* input field */
.lucid .dijitSpinner input {
	display:block;
}

/** hacks for browsers **/

.dj_ie .lucid .dijitSpinner .dijitInputField {
	padding: 0 0;
	vertical-align: middle;
}
.dj_ie .lucid .dijitSpinner .dijitInputField input{
	padding: 2px 2px;
}

.dj_ie6 .lucid .dijitSpinner .dijitInputField input {
	padding: 2px 0;
}

/* for IE 7, when div is enlarged, 
 * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/
.dj_ie7 .lucid .dijitSpinner .dijitInputLayoutContainer{
	overflow:visible;
}