.spinInput, .spinContainer
{
  /* Change this to modify the default spin control background color*/
  background-color: #FFFFFF;
}

.spinLeftRightEdge, .spinTopBottomEdge
{
  position: absolute;
  overflow: hidden;
  /* Change this to modify the default spin control border color*/
  background-color: #A5ACB2;
}
  
.spinContainer
{
  position: relative;
  font-size: 0px;
  height: 20px;
}

.spinLeftRightEdge
{
  height: 20px;
  width: 1px;
}

.spinTopBottomEdge
{
  height: 1px;
  left: 1px;
}

.spinInput
{
	position: absolute;
	top: 1px;
	left: 2px;
	height: 14px; /*changes the height of the gray box but not the border*/
	border: 0px;
	/* Change this to modify the default spin control font, font color, and font size*/
	color: White;
	font-size: 12px;
	font-weight: bolder;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

.spinUpBtn, .spinUpBtnHover, .spinUpBtnPress, .spinDownBtn, .spinDownBtnHover, .spinDownBtnPress
{
  position: absolute;
  width: 15px;
  height: 8px;
  right: 2px;
  background-image: url('spin_control_buttons.png');
  background-repeat: no-repeat;
  /* Change this to modify the default button color*/
  background-color: #000000;
}

.spinUpBtn, .spinUpBtnHover, .spinUpBtnPress
{
  top: 2px;
}

.spinDownBtn, .spinDownBtnHover, .spinDownBtnPress
{
  top: 10px;
}

.spinUpBtn
{
  background-position:0px 0px;
}

.spinUpBtnHover
{
  background-position:0px -16px;
}

.spinUpBtnPress
{
  background-position:0px -32px;
}

.spinDownBtn
{
  background-position:0px -8px;
}

.spinDownBtnHover
{
  background-position:0px -24px;
}

.spinDownBtnPress
{
  background-position:0px -40px;
}