﻿/*-----------------------------------------------------------------------------------------------------
Customize the input file with CSS
You can fully customize the look and feel of your file input in two ways:
-----------------------------------------------------------------------------------------------------*/


/* By using the same CSS code to stylize all your File Input elements through the following classes */

/* .NFI-wrapper {} */ /*the container div*/
/* .NFI-button {} */ /*the button div element*/
/* .NFI-button:hover {} */
/* .NFI-filename {} */ /*the text input element which collects and shows the value*/
/* .NFI-current {} */

/* Or setting the class atribute of the input file element you want to stylize individually */
/*
    // define a class on your HTML file input element
    // <input type="file" class="nice" />
    // so you can now write your CSS code as follows:
*/

.nice {
	font-family: arial;
	font-size: 12px;
	-webkit-box-shadow: 0px 1px 0px #fff, 0px -1px 0px rgba(0,0,0,.1);
	-moz-box-shadow: 0px 1px 0px #fff, 0px -1px 0px rgba(0,0,0,.1);
	box-shadow: 0px 1px 0px #fff, 0px -1px 0px rgba(0,0,0,.1); 
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.nice .NFI-button {
	-moz-border-radius-topleft: 3px; 
	-moz-border-radius-bottomleft: 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	border-top-left-radius: 3px; 
	border-bottom-left-radius: 3px;

	background-color: #0192DD;

	background-image: linear-gradient(bottom, #1774A3 0%, #0194DD 56%);
	background-image: -o-linear-gradient(bottom, #1774A3 0%, #0194DD 56%);
	background-image: -moz-linear-gradient(bottom, #1774A3 0%, #0194DD 56%);
	background-image: -webkit-linear-gradient(bottom, #1774A3 0%, #0194DD 56%);
	background-image: -ms-linear-gradient(bottom, #1774A3 0%, #0194DD 56%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #1774A3),
		color-stop(0.56, #0194DD)
	);
	text-shadow: 0px -1px 0px #0172bd;
	border: solid #0172bd 1px;
	border-bottom: solid #00428d 1px;
	
	-webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.2);
	-moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.2);
	box-shadow: inset 0px 1px 0px rgba(255,255,255,.2); 	
	
	color: #fff;
	width: 100px;
	height: 25px;
	line-height: 25px;
}
.nice .NFI-button:hover {
	background: #333;
	text-shadow: 0px -1px 0px #111;
	border: solid #000 1px;
	
}
.nice .NFI-filename {
	-moz-border-radius-topright: 3px; 
	-moz-border-radius-bottomright: 3px;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	border-top-right-radius: 3px; 
	border-bottom-right-radius: 3px;

	/*width: 200px;*/
	border: solid #777 1px;
	border-left: none;
	height: 25px;
	line-height: 25px;
	
	background: #fff;
	-webkit-box-shadow: inset 0px 2px 0px rgba(0,0,0,.05);
	-moz-box-shadow: inset 0px 2px 0px rgba(0,0,0,.05);
	box-shadow: inset 0px 2px 0px rgba(0,0,0,.05); 

	color: #777;
	text-shadow: 0px 1px 0px #fff;
}



.amcStyle .NFI-button{
	background-color: #DD9201; /* 1774A3, 0192DD : A37417, DD9201 */ 
	background-image: linear-gradient(bottom, #A37417 0%, #DD9201 56%);
	background-image: -o-linear-gradient(bottom, #A37417 0%, #DD9201 56%);
	background-image: -moz-linear-gradient(bottom, #A37417 0%, #DD9201 56%);
	background-image: -webkit-linear-gradient(bottom, #A37417 0%, #DD9201 56%);
	background-image: -ms-linear-gradient(bottom, #A37417 0%, #DD9201 56%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #A37417),
		color-stop(0.56, #DD9201)
	);
	text-shadow: none;
	border: solid #bb7200 1px;
	border-bottom: solid #995200 1px;
}
.amcStyle .NFI-button:hover {
	background: #bb7200;
	text-shadow: none;
	border: solid #995200 1px;	
}
.amcStyle .NFI-filename {
	border: solid #eee 1px;
	color: #777;
    width: 550px;
}