/* NumberSpinner - namespace "dijitSpinner"
 * 
 * Styling NumberSpinner mainly includes:
 * 
 * 1. Arrows
 * 		Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner  - for border, padding and position
 * 		Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton
 * 		Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image
 * 
 * 2. Hover state
 * 		.dijitUpArrowButtonHover|.dijitDownArrowButtonHover .*  - for background color|image
 * 
 * 3. Active state
 * 		.dijitUpArrowButtonActive|.dijitDownArrowButtonActive .*  - for border, padding, margin and background color|image
 * 
 * 4. Focused state
 * 		.dijitSpinnerFocused .* - for background color|image
 * 
 * 5. Disabled state
 * 		.dijitSpinnerDisabled .* - for background color|image
 */
.claro .dijitSpinnerButtonContainer {
  overflow: hidden;
  position: relative;
  width: auto;
  padding: 0;
  border-left-color: #ddd;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(0,0,0,0.05);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(0,0,0,0.05);
}
.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner {
  border-width: 1px 0;
/* reserve space to match the claro combobox button border with border and not padding to make IE happier */
  border-style: solid none;
}
/* button */
.claro .dijitSpinner .dijitArrowButton {
  width: auto;
  background-color: #e6e6e6;
  background-image: url("images/buttonEnabled.png");
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background-image: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background-image: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background-image: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  overflow: hidden;
  left: auto;
  right: 0;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(0,0,0,0.05);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(0,0,0,0.05);
  padding: 0 8px;
}
.dj_iequirks .claro .dijitSpinner .dijitArrowButton {
  overflow: visible;
/* 0 height w/o this */
}
.claro .dijitSpinner .dijitSpinnerButtonInner {
  width: 24px;
  padding: 3px;
  margin: 0;
}
.claro .dijitSpinner .dijitUpArrowButton {
  border-top-right-radius: 4px;
}
.claro .dijitSpinner .dijitDownArrowButton {
  border-bottom-right-radius: 4px;
  border-top-color: #ddd;
  border-top-color: rgba(0,0,0,0.1);
}
/* up & down button icons */
.claro .dijitSpinner .dijitArrowButtonInner {
  height: 0;
  width: 0;
  margin-top: 4px;
/* for up arrow */
  border-left: 4px solid transparent;
  border-bottom: 4px solid #000;
  border-right: 4px solid transparent;
  border-top: 0;
/* override button.css (TODO: move to Common.css since ComboBox needs this too) */
  display: block;
}
.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,
.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,
.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,
.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {
  margin-top: 0;
/* since its bottom aligned */
}
.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner {
  width: 19px;
}
.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
  border-left: 4px solid transparent;
  border-bottom: 0;
  border-right: 4px solid transparent;
  border-top: 4px solid #000;
}
.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField {
  padding: 0;
}
/** hover & focused status **/
.claro .dijitSpinner .dijitUpArrowButtonHover,
.claro .dijitSpinner .dijitDownArrowButtonHover {
  background-color: #e6e6e6;
  background-image: none;
  color: #333;
  transition: background-position 0.1s linear 0s;
}
/*.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {
	background-position:-174px;
}
.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner {
	background-position:-69px;
}*/
.claro .dijitSpinnerFocused {
  background-color: #fff;
  background-image: none;
}
/* mouse down status */
.claro .dijitSpinner .dijitDownArrowButtonActive,
.claro .dijitSpinner .dijitUpArrowButtonActive {
  background-image: none;
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.15) inset, 0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.15) inset, 0 1px 2px rgba(0,0,0,0.05);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) inset, 0 1px 2px rgba(0,0,0,0.05);
}
/*.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner {
	background-position:-173px;
}
.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
	background-position:-68px;
}*/
/* disabled */
.claro .dijitSpinnerDisabled .dijitButtonNode {
  background-image: none;
  background-color: #e6e6e6;
  border: solid 1px #ccc;
  color: #999;
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
  -moz-box-shadow: 0 0 0 rgba(0,0,0,0);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  opacity: 0.65;
  _background-image: none;
}
.claro .dijitSpinnerDisabled .dijitArrowButtonInner {
  background-color: #e6e6e6;
}
.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {
  background-position: -104px;
}
.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner {
  background-position: 1px;
}
/** hacks for browsers **/
/* for IE 7, when div is enlarged, 
 * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/
.dj_ie7 .claro .dijitSpinner {
  overflow: visible;
}