/* 
 * umbrUI number input by @simurai
 */

@import url(http://fonts.googleapis.com/css?family=VT323);


/* -------------- number -------------- */


span[type="number"] {
	-webkit-appearance:	none;
	outline: none;
	position: relative;
	z-index: 1;
	display: inline-block;
	
	min-width: 100px;
	height: 40px;
    /*border-radius: 40px / 60px;    */
	border-radius: 3px / 3px;
	padding: 0 10px;
	
	font-family: 'VT323', cursive;
	font-size: 36px;
	line-height: 40px;
	text-align: center;
	-webkit-font-smoothing: none;
	color: hsl(200,100%,50%);
	text-shadow: 0 -1px 0px hsla(200,100%,70%,1), 0 1px 0px hsla(0,0%,0%,.8), 0 0 13px hsl(200,100%,50%);
	
	border: 0;
	
	background-color: hsl(200,10%,12%);
	background-size: 4px 4px;
	background-image: 	-webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ),
								-webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% );	
		
	-webkit-box-shadow: inset 0 0 0 4px hsla(0,0%,0%,1),
						inset 0 0 20px 5px hsla(0,0%,0%,.5),
						0 0px 0px 1px hsla(0,0%,0%,.4),
						0 1px 0 hsla(0,0%,100%,.25);																				
}

span[type="number"].red {
	color: hsl(0,90%,50%);
	
	text-shadow: 0 -1px 0px hsla(0,100%,70%,1), 0 1px 0px hsla(0,0%,0%,.8), 0 0 13px hsl(0,100%,50%);
}

span[type="number"].green {
	color: hsl(94,100%,47%);
	text-shadow: 0 -1px 0px hsla(94,100%,67%,1), 0 1px 0px hsla(0,0%,0%,.8), 0 0 13px hsl(94,100%,47%);
}

span[type="number"].t_orange {
	color: black;
	text-shadow: 0 -1px 0px rgba(255, 159, 15, 1), 0 1px 0px #F60, 0 0 13px #E67711;
	background-color: none;
	background-size: 4px 4px;
	background-image: none;
	-webkit-box-shadow: none;
	background: none;
}


span[type="number"].t_blue {
	color: black;
	text-shadow: 0 -1px 0px rgba(0, 166, 231, 1), 0 1px 0px rgba(45, 83, 109, .8), 0 0 13px #67ACEC;
	background-color: none;
	background-size: 4px 4px;
	background-image: none;
	-webkit-box-shadow: none;
	background: none;
}



input[type="number"] {
	-webkit-appearance:	none;
	outline: none;
	position: relative;
	z-index: 1;
	
	width: 100px;
	height: 50px;
    border-radius: 40px / 60px; 
	
	
	font-family: 'VT323', cursive;
	font-size: 36px;
	line-height: 40px;
	text-align: center;
	-webkit-font-smoothing: none;
	color: hsl(200,100%,50%);
	text-shadow: 0 -1px 0px hsla(200,100%,70%,1), 0 1px 0px hsla(0,0%,0%,.8), 0 0 13px hsl(200,100%,50%);
	
	border: 0;
	
	background-color: hsl(200,10%,12%);
	background-size: 4px 4px;
	background-image: 	-webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ),
								-webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% );	
		
	-webkit-box-shadow: inset 0 0 0 4px hsla(0,0%,0%,1),
						inset 0 0 20px 5px hsla(0,0%,0%,.5),
						0 0px 0px 1px hsla(0,0%,0%,.4),
						0 1px 0 hsla(0,0%,100%,.25);																				
}


/* Outer spin only works in Safari, so lets hide it */
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }


/* Spin button */
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    width: 32px;
    /*border-radius: 40px / 60px;    */
    border: 4px solid #000;
    cursor: ns-resize;
    
    -webkit-box-shadow: inset 0px 0px 3px 1px hsla(0,0%,0%,.6),
    					inset 0px 6px 1px -2px hsla(0,0%,100%,.30),
    					inset 0px -7px 1px -1px hsla(0,0%,0%,.5);
    
    background-color: hsl(0,0%,20%);
    background-image: 
    				
    				-webkit-radial-gradient( 50% 5%, contain, 	hsla(0,0%,100%,0.2) 0%, hsla(0,0%,0%,0) 70% ),
    				-webkit-radial-gradient( 50% 86%, contain, 	hsla(0,0%,100%,.05) 0%, hsla(0,0%,0%,0) 80% ),
    				-webkit-linear-gradient( -90deg, 	hsl(0,0%,15%) 0%, 
    													hsl(0,0%,18%) 48%,
    													hsl(0,0%,10%) 48%,
    													hsl(0,0%,27%) 52%, 
    													hsl(0,0%,20%) 52%, 
    													hsl(0,0%,34%) 100% );
        													
    -webkit-transition: border-color .2s ease-in-out;
}


/* :active */

input[type="number"]:active::-webkit-inner-spin-button {
	border-color: hsla(200,100%,50%,1);
	-webkit-box-shadow: inset 0px 0px 3px 1px hsla(200,100%,20%,.6),
						inset 0px 6px 1px -2px hsla(200,100%,70%,.4),
						inset 0px -7px 1px -1px hsla(200,100%,10%,.5),
						0px 0px 4px 3px hsla(200,100%,50%,.3);
    
    -webkit-transition: none;													
}


span[type="number"].small{
	height: 28px;
	font-size: 24px;
	line-height: 27px;
	min-width: 0px;
}