* {
	margin: 0 auto;
	padding: 0;
}

body {
	background: #f6f6f6;
	width: 100%;
	padding-top:50px;
}

* span {
	color:#aaa;
}

#header {
	background: #fff url("images/logo.png") no-repeat top center;
	padding-top:200px;
	margin-bottom:50px;
	border-top:1px solid #ddd;
	border-bottom:2px solid #ccc;
}

#content {
	background: #f6f6f6;
	width: 100%;
	text-align: center; /* per Internet Explorer */
}

#savingDiv {
	visibility: hidden;
	height: 1px;
	padding: 3%;
	width: 50%;
	margin: 0 auto;
	color: #134E79;
	font: bold 1.5em Arial, Helvetica, sans-serif;
	border:3px solid #eee;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

#savingImage {
	width: 20%;
	padding: 2%;
	margin: 0 auto;
	margin-top: 2%;
}

#inputDiv {
	width: 50%;
	margin-bottom: 5%;
	color: #134E79;
}

.input {
	background-color:#EAE9E9;
	color:#999;
	font:normal 1em Arial, Helvetica, sans-serif;
}

.input:hover {
	background-color:#FFFFDE;
	color:#000;
}

.input:focus {
	background-color:#FFFFDE;
	color:#000;
}

#uploadGrayButtonDiv {
	/*visibility: hidden;*/
	padding-left: 35%;
	padding-right: 35%;
}

#uploadButtonDiv {
	visibility: hidden;
	padding-left: 35%;
	padding-right: 35%;
}

.button {
	width: 70%;
	display: inline-block; /* opzionale */
	outline: none;
	cursor: pointer; /* impostiamo che il cursore diventi mano quando si va sopra il tasto */
	text-align: center; /* allineiamo il testo al centro */
	text-decoration: none;  /* senza decorazioni perchè non ci piace :P */
	font: bold 14px/100% Arial, Helvetica, sans-serif;  /* definiamo il font */
	padding: .5em 2em .55em;  /* un pò di padding */
	text-shadow: 0 1px 1px rgba(0,0,0,.3);  /* attributo css3 per dare un pò di ombra al testo; la "a" di rgba sta per "alfa" con il quale si imposta il livello di trasparenza */

	-webkit-border-radius: .5em;  /* i bordi impostati per i browser che utilizzano il webkit */
	-moz-border-radius: .5em;  /* i bordi impostati per mozilla firefox */
	border-radius: .5em;  /* per tutto il resto (su ie non funziona) */
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);  /* un pò di ombra per i browser webkit */
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);  /* la stessa ombra su firefox */
	box-shadow: 0 1px 2px rgba(0,0,0,.2);  /* idem per gli altri browser (tranne IE) */
}

.grayButton {
	color: gray; /* il colore del testo */
	border: solid 1px #888; /* il bordo del colore che vogliamo */
	background: #999; /* un background di base */
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#999)); /* Ecco la sfumatura, che parte da "left top" e arriva a "left bottom" "from" il colore "to" l'altro colore  */
	background: -moz-linear-gradient(top, #eee, #999); /* stessa cosa per firefox */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#999'); /* questo codice invece funziona per explorer, anche se richiede il lancio di un ActiveX che di default è settato a true sui IE, ma che potrebbe richiedere la conferma da parte dell'utente */
}

/* poi definiamo il css quando si passa sopra il tasto con il mouse */
.grayButton:hover {
	background: #999; /* colore più scuro */
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#888));
	background: -moz-linear-gradient(top, #eee, #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#888');
}
/* infine definiamo il css per quando si clicca il tasto */
.grayButton:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#888));
	background: -moz-linear-gradient(top, #ddd, #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#888');
}

.coloredButton {
	color: white; /* il colore del testo */
	border: solid 1px #056CBA; /* il bordo del colore che vogliamo */
	background: #056CBA; /* un background di base */
	background: -webkit-gradient(linear, left top, left bottom, from(#82A9F0), to(#23326E)); /* Ecco la sfumatura, che parte da "left top" e arriva a "left bottom" "from" il colore "to" l'altro colore  */
	background: -moz-linear-gradient(top, #82A9F0, #23326E); /* stessa cosa per firefox */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#82A9F0', endColorstr='#23326E'); /* questo codice invece funziona per explorer, anche se richiede il lancio di un ActiveX che di default è settato a true sui IE, ma che potrebbe richiedere la conferma da parte dell'utente */
}

/* poi definiamo il css quando si passa sopra il tasto con il mouse */
.coloredButton:hover {
	background: #056CBA; /* colore più scuro */
	background: -webkit-gradient(linear, left top, left bottom, from(#82A9F0), to(#1B2857));
	background: -moz-linear-gradient(top, #82A9F0, #1B2857);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#82A9F0', endColorstr='#1B2857');
}
/* infine definiamo il css per quando si clicca il tasto */
.coloredButton:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#1B2857), to(#82A9F0));
	background: -moz-linear-gradient(top, #1B2857, #82A9F0);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#1B2857', endColorstr='#82A9F0');
}