@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

/*******************
SELECTION STYLING
*******************/

/* Rosa: #f676b2 */
/* Blu scuro: #367c8f */
/* Rosso scuro: #900 */
/* Verde vomito: #990 */
/* Giallo senape: #FFC814 (255, 200, 20) */


/*
COLORI MANFREDONIA
#1787C0 blu mare
#40B4E0 blu cielo
#F11533 rosso

*/

::selection {
	color: #fff;
	text-shadow:none;
	background: black; /* Safari */
}
::-moz-selection {
	color: #fff;
	text-shadow:none;
	background: black; /* Firefox */
}

/*******************
BODY STYLING
*******************/

* {
	margin: 0;
	padding: 0;
	border:			none;		/* tolgo i bordi */
	outline:		none;		/* tolgo l'evidenziazione oltre-bordo */
}

body {
	background: rgba(163,163,163,1);	
	background-image: url(../img/2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	text-align: left;
	text-decoration: none;
}

#wrapper {/* Grafica pannellino d'accesso */
	width: 300px; height: 400px; /* dimensioni fisse */
	margin: 70px auto; /* centrato orizzontalmente */
	text-align: center;
}

#logo_fdg { 
	padding-top: 5px;
	width: 150px;
}

#registration_wrapper {/* grafica riservata alla registrazione */
	width: 90vw;
	height: auto;
	margin: 70px auto;
}

/******************\
| MODULO D'ACCESSO |
\******************/

.login-form {
	width: 300px; /* larghezza fissa */
	margin: 0 auto; /* centrato orizzontalmente */
	position: relative; /* flottante */
	
	background: #f3f3f3;
	border: 1px solid #fff;
	border-radius: 5px;
	
	        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/**********************\
| MODULO REGISTRAZIONE |
\**********************/

.register-form {
	width: auto; /* larghezza variabile */
	margin: 0 auto;
	position: relative;
	
	background: #f3f3f3;
	border: 1px solid #fff;
	border-radius: 5px;
	
	background-image:url(../img/registration.png);
	background-position:right;
	background-repeat:no-repeat;
	
	        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.register-form hr {
	height:10px;
}

.acapo {
	background:#fff;
	padding:3px;
	border-style:solid;
	
	/* ombra su box */
	-webkit-box-shadow: inset 0 0 3px black;
	   -moz-box-shadow: inset 0 0 3px black;
			box-shadow: inset 0 0 3px black;
			
	width:250px;
	
	background: rgba(255,255,255,1);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 67%, rgba(120,120,120,1) 81%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(67%, rgba(255,255,255,1)), color-stop(81%, rgba(120,120,120,1)), color-stop(100%, rgba(0,0,0,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 67%, rgba(120,120,120,1) 81%, rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 67%, rgba(120,120,120,1) 81%, rgba(0,0,0,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 67%, rgba(120,120,120,1) 81%, rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 67%, rgba(120,120,120,1) 81%, rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
	
}
.acapo>* {
	display:block;
	position:relative;
	margin:10px auto;
}

#messaggio_registrato {/*
	background-color:white;
	background-color:rgba(213,246,255,0.5);*/
	background: rgba(255,255,255,1);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(213,246,255,0.5) 80%, rgba(213,246,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(80%, rgba(213,246,255,0.5)), color-stop(100%, rgba(213,246,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(213,246,255,0.5) 80%, rgba(213,246,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(213,246,255,0.5) 80%, rgba(213,246,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(213,246,255,0.5) 80%, rgba(213,246,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(213,246,255,0.5) 80%, rgba(213,246,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d5f6ff', GradientType=0 );
	-webkit-box-shadow: 1px 1px 3px 3px rgba(213,246,255,0.5);
	   -moz-box-shadow: 0 1px 3px rgba(213,246,255,0.5);
			box-shadow: 1px 1px 3px 3px rgba(213,246,255,0.5);
	
	padding:1vh 1vw;
	width:80%;
}
#messaggio_registrato p{
	text-align:justify;
	margin:3px 0;
}
#messaggio_registrato p span{
	letter-spacing:1px;
	font-weight:bold;
	padding:0;
}
#messaggio_registrato p span:nth-child(2){
	letter-spacing:0px;
	color:#367c8f;
}

/**********\
| GENERICI |
\**********/


/* bordi arrotondati */
.login-form .content .input,
.register-form .content .input,
.change-form .content .input,
.login-form .footer .button,
.register-form .footer .button,
.pulsante,
.acapo,
#messaggio_registrato,
form > .comparsa,
input + .fieldtip,
select + .fieldtip,
form > .fieldtip,
#diagn_gen h1:hover {
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
}

fieldset.mod,
.mod legend,
.mod input.campo,
.specchietto,
.tabella,
#logout,
#errore,
#buono,
#registrazione_effettuata {
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
	        border-radius: 8px;
}

/* transizioni */
form > .comparsa,
input + .fieldtip,
select + .fieldtip,
form > .fieldtip {
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

acronym {
    cursor: Help;
	text-decoration:none;
}

fieldset.mod {
	border-width:3px;
	border-style:solid;
	border-color:#ce2e2e;
	background-color:#999;
	margin-top:10px;
	margin-bottom:10px;
}

.marcato {
	font-weight:900;
	color: red;
}

.tasto {
    background-color:	#555555; /* grigio */
    border:				none;
    color:				white;
    padding:			15px 32px;
    text-align:			center;
    text-decoration:	none;
    display:			inline-block;
    font-size:			16px;
	cursor:				pointer;
	border-radius:		8px;
	border:				2px solid #e7e7e7; /* grigio chiaro */
	
	-webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
			
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.tasto:hover {
	background-color: black;
    color: yellow;
	border-color:yellow;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.tasto:active {
	background-color: #3e8e41;/* verde carino l'effetto #3e8e41; | senape FF8800 */
	box-shadow: 0 5px #666;
	transform: translateY(4px);
}

.mod legend {
	background-color:#ce2e2e;
	font-family:"MS Serif", "New York", serif;
	font-size:120%;
	padding:6px;
	position:relative;
	margin:0 auto;
	min-width: 380px;
	text-align:center;
}

.mod label {
	width:50%;
	display:inline-block;
	text-align:right;
	height:30px;
}

.mod input.campo {
	display:inline-block;
	background-color:AliceBlue;
	height:30px;
	width:40%;
	text-align:center;
	-webkit-box-shadow:0px 0px 10px 1px #999 inset;
	   -moz-box-shadow:0px 0px 10px 1px #999 inset;
			box-shadow:0px 0px 10px 1px #999 inset;
}
.mod input.campo:focus {
	background-color:Azure;
	-webkit-box-shadow:none;
	   -moz-box-shadow:none;
			box-shadow:none;
}

/***********\
| SPECIFICI |
\***********/

#diagnostica {
	position:fixed;
	top:160px;
	left:10px;
	background: rgba(255,255,255,0.4);
	padding:5px;
}

#diagn_gen {
	position:		fixed;
	top:			60px;
	left:			0;
	background:		rgba(0,0,0,0.8); /* background:#CCC; */
	padding:		5px;
	overflow:		scroll;
	color:			#F9F9F9;
	
	width:			20vw;
	height:			90vh;
	
	
	-webkit-transition: width 0.4s ease;
	-moz-transition: width 0.4s ease;
	-ms-transition: width 0.4s ease;
	-o-transition: width 0.4s ease;
	transition: width 0.4s ease;
	
	z-index:1000;
}
#diagn_gen:hover {
	width:			90vw;
}
#diagn_gen h1 {
	cursor:pointer;
}
#diagn_gen h1:hover {
	background:#333;
}

#diagnostick {
	position:fixed;
	top:160px;
	left:10px;
	height:80vh;
	width:30vw;
	background: rgba(255,255,255,0.4);
	padding:5px;
	overflow:scroll;
}

#diagnostick div {
	background:#333;
	color:white;
	margin:5px;
	overflow:scroll;
	width:96%;
	height:96%;
	max-height:400px;
}

#diagnostick h4,
#diagn_gen h1 {
	color:gold;
	font-size:1.4em;
	text-align:center;
}

#diagnostick h5 {
	color:lightgreen;
	font-style:italic;
	font-size:1.2em;
	text-align:center;
	margin-bottom:5px;
}

#diagnostick h4.assoluto {
	position:absolute;
	right:0;
	background:black;
}

#titolo {
	text-align:center;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-stretch:expanded;
	font-size:200%;
	font-weight:900;
	color:#009;
	text-shadow: 4px 4px 8px rgba(150, 150, 150, 0.4), 0 0 4px rgba(150, 150, 0, 0.6);
	letter-spacing: 2px;
	margin-left:auto;
	margin-right:auto;	/* 	vertical-align:bottom;*/
	/*
	background:grey;
    border-radius: 50%;
	-webkit-box-shadow: 0px 0px 0px 8px rgba(31,33,66,0.5);
	   -moz-box-shadow: 0px 0px 0px 8px rgba(31,33,66,0.5);
		    box-shadow: 0px 0px 0px 8px rgba(31,33,66,0.5);
	*/
}

#titolo1 {
	text-align:center;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-stretch:expanded;
	font-size:200%;
	font-weight:900;
	color:#009;
	text-shadow: 4px 4px 8px rgba(150, 150, 150, 0.4), 0 0 4px rgba(150, 150, 0, 0.6);
	letter-spacing: 2px;
	width: 400px; 
    height: 400px;
	background:grey;/*yellow*/
	margin-top:-340px;
	margin-left:auto;
	margin-right:auto;	/* 	vertical-align:bottom;*/
	line-height:730px;
    border-radius: 50%; /* questo è il fantastico trucco */
	-webkit-box-shadow: 0px 0px 0px 8px rgba(31,33,66,0.5); /* giallo rgba(231,166,26,1) | nero rgba(0,0,0,0.75) | marrone rgba(56,49,36,0.5) */
	   -moz-box-shadow: 0px 0px 0px 8px rgba(31,33,66,0.5);
		    box-shadow: 0px 0px 0px 8px rgba(31,33,66,0.5); /* http://www.cssmatic.com/box-shadow */

	/*
	-webkit-border-radius: 20px;
	   -moz-border-radius: 20px;
		    border-radius: 20px;
	*/
}

#logout,
#errore,
#buono {
	position:					fixed;
	bottom:						75px;
	left:						40vw;
	width:						20vw;
	overflow:					hidden;
	border-bottom-style:		dotted;
	text-align:					center;
	background-color:			rgba(255, 200, 20, .7);
	cursor:						pointer;
	z-index:					100;
	
	/* ombra su box */
	        box-shadow: offset 0 3px 0 rgba(0,0,0,0.15);
	   -moz-box-shadow: offset 0 3px 0 rgba(0,0,0,0.15);
	-webkit-box-shadow: offset 0 3px 0 rgba(0,0,0,0.15);
}

#errore {
	padding:10px 0;
	background-color: rgba(250, 50, 70, .8);
}

#buono {
	padding:10px 0;
	background-color: rgba(92, 255, 38, .8);
}

#registrazione_effettuata {
	position:fixed;
	bottom: 3vh;
	left: 20vw;
	width: 60vw;
	overflow:hidden;
	border-bottom-style:dotted;
	text-align:center;
	padding:10px 0;
	background-color: rgba(50, 250, 70, .8);/* verde chiaro
	background-color: rgba(250, 50, 70, .8); rosso chiaro
	background-color: rgba(250, 250, 70, .8); giallo chiaro*/
	
	
	/* ombra su box */
	        box-shadow: offset 0 3px 0 rgba(0,0,0,0.15);
	   -moz-box-shadow: offset 0 3px 0 rgba(0,0,0,0.15);
	-webkit-box-shadow: offset 0 3px 0 rgba(0,0,0,0.15);
}

.specchietto {
	margin:		10px auto;
	margin-top:	50px;
	padding:	1em;
	border:		3px solid white;
	width:		500px;
	position:	relative;
	background-color:lightgrey;
}

.specchietto:last-child {
	margin-bottom:		50px;
}/*
.specchietto:hover {
	border-color:#FF8800;
	background-color:white;
}
.specchietto:hover h2 {
	background:	#FF8800;
	color:		white;
}*/
.specchietto h2 {
	display:	inline;
	position:	absolute;
	top:		-38px;
	background:	white;
	color:		black;/*lightgray;*/
	margin:		0 5%;
	padding:	4px;	/* se si vuole mettere una larghezza adattabile si può fare padding:4px 10px; in modo da garantire un maggior spazio orizzontale  */
	min-width:	250px; /* larghezza minima fissa */
	min-height:	30px; /* larghezza minima fissa */
	text-align:	center;/*
	font:		bold 120% Georgia, serif;*/
	
	/* bordi arrotondati */
	-webkit-border-radius: 8px 8px 0px 0px;
	   -moz-border-radius: 8px 8px 0px 0px;
			border-radius: 8px 8px 0px 0px;
}
.specchietto p {
	padding:			0.2em;
	text-align:			justify;
}
.specchietto p.referente {
	font-variant:		small-caps;
}
.specchietto p.stato {
	font-style:			italic;
	font-size:			0.7em;
	letter-spacing:		2px;
}
.specchietto p.inciso {
	font-family:		"Lucida Console", Monaco, monospace;
	font-size:			0.7em;
}
.specchietto div {
	padding:			10px;
	margin:				0px;
	overflow:			auto;
}/*#ffc; giallino slavato
.specchietto div:hover {
	background:			rgba(255, 240, 240, 0.05);
	color:				black;
}
*/
.specchietto form label {
	padding:			3px;
	margin:				0 10px 0 10px;
	font-weight:		bold;
}

.specchietto form label>* {
	font-family:		"Courier New", Courier, monospace;
	padding:			4px 7px;
	margin:				0 10px 0 10px;
	display:			inline-block;
	float:				right;
	/*
	position:			absolute;
	right:				0;
	*/
	width:				200px;
	border-radius:6px;
}
.specchietto form label>*:focus {
	background-color:	yellow;
}

.specchietto form div {
	clear:				both;
}

.specchietto form input.tasto {
	display:			block;
	margin:				20px auto 20px auto;
	/*background:			#903;*/
}
.specchietto .esile {
	font-size:70%;
	font-weight:normal;
}

.specchietto fieldset.categoriacompetenza {
	display:block;
	background-color: rgba(215, 201, 92, 0.5);
	padding:10px;
	margin:3px;
	min-height:140px;
	width:25%;
	position:relative;
	float:left;/*
	overflow: hidden;
	text-overflow: ellipsis;	
    -o-text-overflow:ellipsis;
	white-space: nowrap;*/

	

    border:solid 5px #d4ac5b;
    -moz-border-radius-topleft: 22px;
    -moz-border-radius-topright:22px;
    -moz-border-radius-bottomleft:22px;
    -moz-border-radius-bottomright:21px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;
    -webkit-border-bottom-right-radius:21px;
    border-top-left-radius:22px;
    border-top-right-radius:22px;
    border-bottom-left-radius:22px;
    border-bottom-right-radius:21px;
}

.specchietto fieldset.categoriacompetenza legend {
	margin:5px;
	padding:6px 10px;
	background-color:#d4ac5b;
	color:#63502b;/*#7d5736;*/
	

    border:none 5px #d4ac5b;
    -moz-border-radius-topleft: 22px;
    -moz-border-radius-topright:22px;
    -moz-border-radius-bottomleft:22px;
    -moz-border-radius-bottomright:21px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;
    -webkit-border-bottom-right-radius:21px;
    border-top-left-radius:22px;
    border-top-right-radius:22px;
    border-bottom-left-radius:22px;
    border-bottom-right-radius:21px;


}
.specchietto fieldset.categoriacompetenza label {
	display:			inline-block;
	width:				76px;
	overflow:			hidden;
	text-overflow:		ellipsis;	
    -o-text-overflow:	ellipsis;
	white-space:		nowrap;
}

.specchietto .rapporto_mod {
	display:inline-block;
	position:absolute;
	left:0;
}

.specchietto .rapporto_mod:hover {
	background:yellow;
}

.specchietto .rapporto_mod:hover + .acomparsa {
	opacity:1;
	width:100px;
	color:		white;
}

.specchietto .acomparsa {
	position:absolute;
	right:0;
	opacity:0;
	width:0px;
	margin: 0;
	padding: 10px;
	text-align:center;
	background:	#FF8800;
	color:rgba(255,255,255,0);
	font-weight:bold;

	border-radius: 10px 0px 0px 10px;
	-moz-border-radius: 10px 0px 0px 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
	
	-webkit-transition: width 0.2s ease, color 0.4s linear;
	-moz-transition: width 0.2s ease, color 0.4s linear;
	-ms-transition: width 0.2s ease, color 0.4s linear;
	-o-transition: width 0.2s ease, color 0.4s linear;
	transition: width 0.2s ease, color 0.4s linear;
	
}

/********\
| HEADER |
\********/

.login-form .header,
.register-form .header {
	padding: 40px 30px 30px 30px;
}

.login-form .header h1,
.register-form .header h1 {
	font-family: 'Bree Serif', serif;
	font-weight: 300;
	font-size: 28px;
	line-height:34px;
	color: #414848;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	margin-bottom: 10px;
}

.login-form .header span,
.register-form .header span {/* attenzione qui */
	font-size: 11px;
	line-height: 16px;
	color: #678889;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}

header h2#titolopagina,
#titolo {
	color: #2b2b2b;
	font-family: 'Poppins', sans-serif;
	text-align:center;
	text-shadow: 0px 0px 5px #FFFFFF;
}

/*********\
| CONTENT |
\*********/

.login-form .content,
.register-form .content {
	padding: 0 30px 25px 30px;
}

/* Campi di input */
.login-form .content .input,
.register-form .content .input,
.change-form .content .input {
	width: 188px;
	padding: 15px 25px;
	
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	
	background: #fff;
	border: 1px solid #fff;
	
	/* ombra su box */
	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
	   -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
	        box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}

.change-form .content .input {
	margin:3px auto;
}
/*.register-form .content .input {display:block;}*/

/* Campi di input secondari */
.login-form .content .password,
.login-form .content .pass-icon {
	margin-top: 25px;
}

.login-form .content .input:hover,
.register-form .content .input:hover,
.change-form .content .input:hover {
	background: #dfe9ec;
	color: #414848;
}

.login-form .content .input:focus,
.register-form .content .input:focus,
.change-form .content .input:focus {
	background: #dfe9ec;
	color: #414848;
	
	/* ombra su box */
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	        box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

.user-icon,
.pass-icon {
	width: 46px;
	height: 47px;
	display: block;
	position: absolute;
	left: 0px;
	padding-right: 2px;
	z-index: -1;
	
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
}

.user-icon {
	top:153px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
	background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/user-icon.png) no-repeat center;	
}

.pass-icon {
	top:201px;
	background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/pass-icon.png) no-repeat center;
}

.content input:focus + div{
	left: -46px;
}

/* Animation */
.input,
.user-icon,
.pass-icon,
.button,
.register,
.password-reset,
.pulsante,
.tabella,
footer a,
#errore,
#buono,
.mod input.campo,
#diagn_gen h1 {
	        transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
}

.pulsante {
	min-width:200px; /* <--- qui per ridurre lo spazio */
	color:darkblue;
	text-shadow:0 0 3px #fff;
	float:none;
}

.pulsante[disabled] { /* pulsante disabilitato */
	cursor:not-allowed;
	background:grey;
	border:none;
	color:#333;
	
			box-shadow: none;
	   -moz-box-shadow: none;
	-webkit-box-shadow: none;
}

/********\
| FOOTER |
\********/

.login-form .footer,
.register-form .footer {
	padding: 25px 30px 40px 30px;
	overflow: auto;
	
	background: #d4dedf;
	border-top: 1px solid #fff;
	
	        box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
	   -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
	-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}

/* Pulsante ACCEDI */
.login-form .footer .button,
.register-form .footer .button,
.pulsante {/*
	float:right;*/
	padding: 11px 25px;
	
	font-family: 'Bree Serif', serif;
	font-weight: 300;
	font-size: 18px;
	color: #fff;
	text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
	
	background: #56c2e1;
	border: 1px solid #46b3d3;
	
	cursor: pointer;
	
	        box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
	   -moz-box-shadow:	inset 0 0 2px rgba(256,256,256,0.75);
	-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
	margin:0 auto;
	display:inline-block;
}

div.footer {
	text-align:center;
}

.login-form .footer .button:hover,
.register-form .footer .button:hover,
.pulsante:hover {
	background: #3f9db8;
	border: 1px solid rgba(256,256,256,0.75);
	
	        box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
	   -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.login-form .footer .button:focus,
.register-form .footer .button:focus,
.pulsante:focus {
	position: relative;
	bottom: -1px;
	
	background: #56c2e1;
	
	        box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
	   -moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
	-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}

/* pulsante REGISTRATI */
.login-form .footer .register,
.register-form .footer .register {
	display: block;
	float: right;
	padding: 10px;
	margin-right: 20px;
	
	background: none;
	border: none;
	cursor: pointer;
	
	font-family: 'Bree Serif', serif;
	font-weight: 300;
	font-size: 18px;
	color: #414848;
	text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
}

.login-form .footer .register:hover,
.register-form .footer .register:hover {
	color: #3f9db8;
}

.login-form .footer .register:focus,
.register-form .footer .register:focus {
	position: relative;
	bottom: -1px;
	color: #7794D0;/* schiarito */
}

/* Pulsante Ripristina Credenziali */
.password-reset {
	display: block;
	float:left;
	padding-bottom: 3px;
	padding-left: 3px;
	margin-left: auto;
	margin-right:: auto;
	
	background: none;
	border: none;
	cursor: pointer;
	
	font-family: 'Bree Serif', serif;
	font-weight: 100;
	font-size: 12px;
	color: #414848;
	text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
	
	position:absolute;
	bottom: 0px;
}

.password-reset:hover {
	color: #3f9db8;
}

.password-reset:focus {/*
	position: relative;*/
	bottom: -1px;
	color: #7794D0;/* schiarito */
}

/******\
| LOGO |
\******/

#logo_comune {}
#logo_comune a { position:fixed; top: 0; right: 20px; z-index:1000;}
#logo_comune img { border:none; }
#logo_comune div { position:absolute; right:0; bottom:0; display:block; background:rgba(0,0,0,0.8); text-decoration:none; color:white; }

footer {
	position: fixed; bottom:0; left:0;
	width:100%; height:70px; z-index:5;
	background-color: rgb(235, 235, 235);
	display: flex;
	flex-direction: column;
	align-items: center;	
}

footer a {
	font-family:Verdana, Geneva, sans-serif;
	color:inherit;
	text-decoration: none; font-variant:small-caps; letter-spacing:2px;
	text-shadow:0px 0px 1px white, 0px 0px 3px white, 0px 0px 6px white;
}

footer a:hover {
	letter-spacing:4px;
}















/**********************\
| BARRA DI NAVIGAZIONE |
\**********************/
nav {
	position:fixed;
	width:100vw;
	height:40px;
	background-color: rgba(255, 255, 255, .8);
	z-index:50;
	top:0;
	left:0;
}

nav div {
	margin:5px;
	padding:5px;
	float:left;
	cursor: default;
	
	text-decoration:none;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	    -ms-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}

nav div.spazioverticale {
	margin:5px;
	padding:5px;
}
nav div.spazioverticale:after { content:'|';}

nav div:hover {/* evidenziazione delle voci di menu al passaggio del mouse */
	background-color: #1787C0; /* era giallo senape */
	color: white;
	border-radius:3px;
}

nav div span {/* il nome dell'utente */
	/*text-shadow: 0 0 3px #000000;
	color: white;*/
	color: #900; /* era darkgreen */
	font-weight:bold;
	letter-spacing:1px;
}
nav div:hover span {/* il nome dell'utente quando ci passi sopra con il mouse */
	color: white;/*#FFCACA; /*#FF1515;*/
	text-shadow:0 0 3px #900;/*ombra sul testo*/
}

nav div.spazioverticale:hover {/* questo codice rende neutro il passaggio del mouse sui separatori */
	background-color: transparent;
	color: inherit;
}

nav>div:first-child {/* Rendo particolare la prima voce di elenco, cioè il titolo del sito */
	background-color: rgba(255, 255, 255, 1); /* era giallo senape */
	font-variant:small-caps;
	font-weight:bold;
	letter-spacing:1px;
}
nav>div:first-child:hover {
	color: white;/*blu #122162;/*#FFC814 senape | #09364D blu scurissimo */
	background-color: #FF8800; /* colore di sfondo    */
}

#Home {
	background-color: transparent; /* colore di sfondo    */
	border: none; /* bordo dell'elemento */
	color: inherit;               /* colore del testo    */
	font-weight: bold;         /* testo in grassetto  */
	padding: 0;                /* padding             */
	margin: 0;                /* margin             */
	font-variant:small-caps;
	letter-spacing:1px;
	font-size:inherit;
	cursor:pointer;
}

nav a {
	color:#000;
	text-decoration:none;
}

nav a div {/* questo dona un colore di doppia transizione */
	color:inherit;
	text-decoration:none;
	-webkit-transition: all 0.5s linear;
	   -moz-transition: all 0.5s linear;
	    -ms-transition: all 0.5s linear;
	     -o-transition: all 0.5s linear;
	        transition: all 0.5s linear;
}

nav a:last-child div { /* tasto ESCI */
	color:#900;
	font-variant:small-caps;
	font-weight:bold;
}

nav a:hover div {
	text-shadow: 0 0 3px #000000;
	color: white;
	cursor:pointer;
}

nav a:last-child:hover div {
	text-shadow: 0 0 3px #900;/* rosso pomodoro */
}

.distanzaverticale {
	height:50px;/* serve a distanziare la barra funzioni dal corpo del documento */
}





/*********\
| TABELLE |
\*********/

caption {/* Intestazione di tabella */
	font-family:	"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:	bold;
	font-variant:	small-caps;
	text-shadow:	0 0 3px #09364D; /*#106187; /* era rosso #900*/ /*era giallo senape */
	color:			white;/* era bianco white */
	font-size:		150%;
}

.tabella {/* impostazioni di base delle tabelle: forma con bordi arrotondati, spazio interno e spaziatura tra le celle. Bordino bianco. */
	table-layout: auto; /* Specifica il layout da utilizzare per una tabella. Se è "auto" (valore predefinito) utilizza quello previsto dal browser; se è "fixed" usa quello specificato dal tuo CSS */
	text-align:	center;
	position:	relative;
	margin:		10px auto;
	padding:	30px;
	overflow:	auto;
	
	background-color: #d4dedf;
	border: 1px solid #fff;
	
	        box-shadow: offset 0 3px 0 rgba(0,0,0,0.15);
	   -moz-box-shadow: offset 0 3px 0 rgba(0,0,0,0.15);
	-webkit-box-shadow: offset 0 3px 0 rgba(0,0,0,0.15);
	
	/* disposizione tabelle */
	float:	none; /* era float:left; */
	margin:	10px auto; /* era margin:10px; */
	width:	500px; /* larghezza fissa */
	min-height:	260px; /* altezza fissa */
}/*
.tabella:hover {
	background-color:white;
}*/

.tabella thead {
	color: #2C383A;
}

.tabella tbody {
	font-family:	"Lucida Console", Monaco, monospace;
	font-size:		80%;
}

.tabella tfoot {
	font-family:	"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:		100%;
	font-style:		italic;
	text-align:		justify;
	color:			#617D81;
}

.tabella tbody tr td {/* sfumare il cambiamento delle righe al passaggio del mouse */
	-webkit-transition: all 0.5s linear;
	   -moz-transition: all 0.5s linear;
	    -ms-transition: all 0.5s linear;
	     -o-transition: all 0.5s linear;
	        transition: all 0.5s linear;
	padding-top:4px;
	padding-bottom:4px;
}
.tabella tbody tr td:first-child {/* arrotondamenti alla prima e l'ultima cella della riga */
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.tabella tbody tr td:last-child {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.tabella tbody tr:nth-child(even) {background: #CCC};

/* evidenziare tutte le celle della riga evidenziata
.tabella tbody tr:hover>td {
	background-color: #1787C0;  era giallo senape
	color:white; era rosso scuro #900
	letter-spacing:0.8px;
	padding-top:4px;
	padding-bottom:4px;
}*/

.tabella tr:hover .pulsante,
.pulsante:focus,
.pulsante:active {
	text-shadow:none;
	color:white;
}

.voce {
	font-family:			"Lucida Console", Monaco, monospace;
	font-size:				80%;
	font-weight:			inherit;
	background-color:		transparent;		/* colore di sfondo		*/
	border:					none;				/* bordo dell'elemento	*/
	color:					inherit;			/* colore del testo		*/
	font-size:				inherit;			/* dimensione del testo	*/
	padding:				0;					/* padding				*/
	margin:					0;					/* margin				*/
	cursor:					pointer;			/* cursore a manina		*/
}








/* -------------------------- TOOLTIP TEXT ------------------------------------- */

.register-form input,
.register-form textarea { 
  -webkit-font-smoothing: antialiased;
  
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
	  
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
		  
  outline: none; 
}

input + .fieldtip,
select + .fieldtip,
form > .fieldtip {/* si applica all'elemento con classe fieldtip se è immediatamente preceduto da un elemento input */
	visibility: hidden;		/* l'elemento scompare ma continua ad occupare lo spazio. Non funzionano eventi e transizioni */
	position: fixed;
	top: 40px;
	right: 0;
	opacity: 0;				/*l’elemento diventa trasparente, ma continua a mantenere le dimensioni originali, occupando il relativo spazio nella pagina. Questo vuol dire che pur non visualizzandolo, l’elemento andrà ad incidere come farebbe normalmente sul layout della pagina.*/
	content: attr(data-tool);
	height: auto;
	min-width: 100px;
	padding: 5px 8px;
	z-index: 9999;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	background: rgba(0,0,0,0.85);
}

input:focus + .fieldtip,
select:focus + .fieldtip,
form:hover > .fieldtip {
	visibility: visible;
	opacity: 1;
}

form > .comparsa {
	opacity:			0;				/* l’elemento diventa trasparente, ma continua a mantenere le dimensioni originali, occupando il relativo spazio nella pagina. */
	visibility:			hidden;			/* l'elemento scompare ma continua ad occupare lo spazio. NON FUNZIONANO EVENTI E TRANSIZIONI */
	position:			fixed;			/* posizione fissa nella pagina WEB */
	top:				40px;
	right:				0;
	content:			attr(data-tool);
	height:				auto;
	min-width:			100px;
	padding:			5px 8px;
	z-index:			9999;
	color:				#fff;
	font-size:			1.2em;
	text-decoration:	none;
	text-align:			left;
	background:			rgba(0,0,0,0.85);
	
	font-family:Tahoma, Geneva, sans-serif;
		/*max-height:			900px;
		overflow:			scroll;*/
}

form:hover > .comparsa {
	visibility:	visible;
	opacity:	1;
}
	
form > .comparsa div {
	background:		black;
	width:			auto;
	height:			auto;
	display:		block;
	padding:		5px;
	margin:			5px;
	margin-top:		20px;
	cursor:			auto;
}

form > .comparsa h3 {
	text-align:center;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	margin:0;
	font-size:1.4em;
}
	
form > .comparsa h4 {
	font-variant:small-caps;
	margin:0;
}
	
form > .comparsa ul {
	margin-top:5px;
}

form > .comparsa li {
	position:relative;
	margin-left:10px;
}

form > .comparsa .responsabile {
	font-weight:bold;
	text-shadow: 0 0 3px gold;
	text-decoration:underline;
}


/* -------------------------- FINE TOOLTIP TEXT ------------------------------------- */















@media all and (max-width: 780px) { /*cellulari*/
/*@media only screen and (max-width : 640px) {*/
	nav {
		background-color:transparent;
		position:relative;
		width:100%;
		height:auto;
	}
	nav div.spazioverticale {
		display:none;		/* l’elemento viene praticamente eliminato dal rendering della pagina */
	}

	nav div {
		float:none;
		padding:5px 0;
		margin:0;
		width:100%;
		text-align:center;
		background-color: rgba(255, 255, 255, .7); /* era giallo senape */
		text-shadow:0 0 1px #1787C0; /* era giallo senape */
	}
	
	nav a:hover, nav a:focus, nav a:active {
		letter-spacing:1px;
	}

	.distanzaverticale {
		height:0px;/* serve a distanziare la barra funzioni dal corpo del documento */
	}
	
	.tabella {
		float:none;
		margin:10px auto;
		padding:auto;
		width:92vw;
		height:auto;
	}
	
	#utente {
		width:auto;
		/*
		position:relative;
		float:left;
		*/
		position:fixed;
		bottom:0;
		left:0;
		z-index:98;
		padding:5px;
		background-color:transparent;
	}
	#credito{
		width:auto;
		/*
		position:relative;
		float:right;
		*/
		position:fixed;
		bottom:0;
		right:0;
		z-index:99;
		padding:5px;
		background-color:transparent;
	}
	
	.acapo {
		width:auto;
	}
	
	.register-form {
		background-image:none;
	}
	
	#logout, #errore, #buono {
		width:100%;
		left:0;
	}
	
	#messaggio_registrato {
		background:transparent;
		width:100%;
		
		-webkit-box-shadow:none;
	       -moz-box-shadow:none;
		        box-shadow:none;
	}
}

@media all and (max-width: 380px) {

	.mini {
		display:block;
	}
	.esteso {
		display:none;		/* l’elemento viene praticamente eliminato dal rendering della pagina */
		visibility:hidden;	/* l'elemento scompare ma continua ad occupare lo spazio. Non funzionano eventi e transizioni */
		opacity:0;			/* l’elemento diventa trasparente, ma continua a mantenere le dimensioni originali, occupando il relativo spazio nella pagina. Questo vuol dire che pur non visualizzandolo, l’elemento andrà ad incidere come farebbe normalmente sul layout della pagina. */
	}
	
	.tabella table {
		background:white;
	}
}


@media all and (max-width: 1020px) {
	#logo_comune { display:none;}		/* l’elemento viene praticamente eliminato dal rendering della pagina */
}
@media all and (max-width: 480px) {
	footer a { visibility:hidden;}		/* l'elemento scompare ma continua ad occupare lo spazio. Non funzionano eventi e transizioni */
}

.specs {
	font-size: 12px;
}
#form_Elimina1 {
	display:none;
}

tr.brilla:hover,
.tabella tbody tr:nth-child(even):hover {
	background:yellow;
}
/*
tr.brilla:hover #form_Elimina1,
.tabella tbody tr:nth-child(even):hover #form_Elimina1{
	display:table-cell;
	position:absolute;
	background: yellow;
	padding: 3px;
	-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
	min-width:20px;
	min-height:20px;
}*/