* {
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}

input.spin {
	font-family:helvetica, arial, tahoma, sans-serif; font-size:12px;
	margin:0px; padding:0px;
	text-align:right;
	width:54px;
	height:21px;
}

button.spin {
	position:relative; 
	display:inline-block;
	width:13px; height:10px; 
	padding:0px;
	border:none;
}

button.spin.up {
	margin-left:1px;
	vertical-align:top;
}
button.spin.down {
	margin-left:-13px;
	vertical-align:bottom; 
}

/* OK without "no-repeat center top" in all desktop browsers, "left top" is better on iPad, but still not correct */
button.spin.up { background: transparent url("arrowUp.gif") no-repeat left top; } 
button.spin.down { background: transparent url("arrowDn.gif") no-repeat left top; } 
button.spin.up:active { background: transparent url("arrowUpP.gif") no-repeat left top; }
button.spin.down:active { background: transparent url("arrowDnP.gif") no-repeat left top; } 


/*button.spin {
	position:relative; 
	display:inline-block;
	width:13px; height:10px; 
	padding:0px;
	border:1px solid #888;
	background:#eee; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc)); background:-moz-linear-gradient(0% 90% 90deg, #ccc, #fff);
}

button.spin.up {
	margin-left:1px;
	vertical-align:top;
	-moz-border-radius-topright:3px; -moz-border-radius-topleft:3px; 
	-webkit-border-top-right-radius:3px; -webkit-border-top-left-radius:3px; 
	-o-border-radius:3px; 
	border-top-right-radius:3px; border-top-left-radius:3px;
}
button.spin.down {
	margin-left:-13px;
	vertical-align:bottom; 
	border-top:1px solid #aaa;
	-moz-border-radius-bottomright:3px; -moz-border-radius-bottomleft:3px; 
	-webkit-border-bottom-right-radius:3px; -webkit-border-bottom-left-radius:3px; 
	-o-border-radius:3px; 
	border-bottom-right-radius:3px; border-bottom-left-radius:3px;
}

button.spin:active { 
	background:#ccc;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#eee)); background:-moz-linear-gradient(0% 90% 90deg, #eee, #ddd);
}

/* arrow images for Mac */
/*button.spin.up:before { content:url("uparrow9.png"); }
button.spin.down:before { content:url("downarrow8.png"); } 
/* Windows requires different versions */
/*button.spin.up.win:before { content:url("uparrow12.png"); } /* was 11 */
/*button.spin.down.win:before { content:url("downarrow11.png"); }  /* was 12 */