.BOTTONI_GRA, .BOTTONI_MED, .BOTTONI_PIC { /* BOTTONE STANDARD SELEZIONABILE */
	font-family: helvetica,arial,verdana,sans-serif;
	font-size: 9pt; /*11px;*/
	text-decoration: none;
	color:  White; /*#bcfb3f;#99cc33;cambiato in uno più vivace*/
	font-weight: bold;
	background-image: url('../Images/bottoneBLU.jpg');
	border-style: solid;
	border-color: #039cd5; /*#3a7d1f;*/
	border-width: 1px;
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	background-color: #E2E7E3; /*#335d1b; White;*/
	background-repeat: no-repeat;
	border-radius: 10px;
	-moz-border-radius: 10px;

}

.BOTTONI_GRA {
	width: 125px;
	height: 27px; 
	/*
	l'immagine è alta 26, ma c'è il border a 1 quindi dovrei dare 28 di altezza,
	ma invece visivamente viene giusto dando 27 (con 28 lascia 1 pixel bianco) 
	e in teoria dovrei dare 102 di larghezza o fare un immagine da 98, ma non c'è 
	problema perchè i 2 pixel (o 1) in più vengono tagliati 
	*/
}

.BOTTONI_MED {
	width: 100px; /* 95px;*/
	height: 27px; 
}

.BOTTONI_PIC {
	width: 65px;
	height: 27px; 
}

.BOTTONI_GRADIS, .BOTTONI_MEDDIS, .BOTTONI_PICDIS { /* BOTTONE STANDARD NON SELEZIONABILE (PER PAGINA ATTIVA) */
	font-family: helvetica,arial,verdana,sans-serif;
	font-size: 9pt; /*11px;*/
	text-decoration: underline;
	color:#039cd5; /*006600;*/
	font-weight: bold;
	background-image: url('../Images/bottonebianco.jpg');
	border-style: solid;
	border-color: #039cd5;/*#7d8fa1;*/
	border-width: 1px;
	cursor: default;
	padding: 0px;
	margin: 0px;
	background-color: white;
	background-repeat: no-repeat;
	border-radius: 10px;
	-moz-border-radius: 10px;
}

.BOTTONI_GRADIS {
	width: 125px;
	height: 27px;
}

.BOTTONI_MEDDIS {
	width: 100px; /*95px;*/
	height: 27px;
}

.BOTTONI_PICDIS {
	width: 65px;
	height: 27px;
}

.BOTTONI_GRA:hover, .BOTTONI_MED:hover, .BOTTONI_PIC:hover {
	color: #d6f3fe;/*#535659; #bcfb3f; #ffd83f;*/
	text-decoration: none;
}

/* ############## MENU A TENDINA

/* BOTTONI PER MENU A TENDINA 
Ce ne sono 2 per far vedere come gestirli il caso in cui serva
creare più menu a tendina con caratteristiche in parte simili
in parte diverse. Alcune proprietà dei 2 menu restano in
comune alle 2 tendine, mentre altre possono essere diversificate.
Si può diversificare o lasciare in comune quello che si vuole, è
solo un esempio.
*/

.BOTTONI_TENPIC, .BOTTONI_TENMED, .BOTTONI_TENGRA {
	/* BOTTONE STANDARD SELEZIONABILE */
	font-family: helvetica,arial,verdana,sans-serif;
	font-size: 8pt; /*11px;*/
	text-decoration: none;
    color: #003300; /*Default=#000000;*/
	font-weight: normal;
	background-color: transparent;/*#FAFBFE;#E0E0E0;*/
	background-repeat: repeat;
	background-image: none;
	border-style: solid;
	border-color: #48adbf; /*#707070;*/
	border-width: 0px 2px 2px 1px;
	cursor: pointer;
	height: 24px;
	margin: -1px 0 0 0;
    text-align: center;
	
    /*
    per i menu a tendina più semplici c'è il problema del BORDER, che non posso mettere sia sul TOP
    che sul BOTTOM perchè se no tra un bottone e l'altro i due border si sommano e risultano diversi
    visivamente da tutti gli altri BORDER (in pratica quelli del contorno). Allora si può dare a 
    tutti i border lo stesso valore e poi dare margin -1px (o quello che è il border) sul TOP. Così
    viene mangiato il border del top di tutti gli elementi, tranne che il primo che si mangia 1px (o
    quello che è dal MARGIN del PANEL che contiene i bottoni. Dunque va impostato margin 1px 0 0 0 nel
    PANEL se non si vuole alcune margine, oppure un px (o quello che è il border) in più di quello
    che si vuole ottenere.
    */
}

.BOTTONI_TENPIC {
    width: 65px;
}

.BOTTONI_TENMED {
    width: 100px;
    border-radius: 8px;
	-moz-border-radius: 8px;
 }

.BOTTONI_TENGRA {
    width: 125px;
}

.BOTTONI_TENGRA:hover, .BOTTONI_TENMED:hover, .BOTTONI_TENPIC:hover {
    background-color: #EFEDFC; /*#707070;*/
	color: #535659; /*#000000;*/
}

/* STILE PER IL PANEL CHE FA DA SFONDO ALLA TENDINA */

.PANEL_TENDINA {
    width: auto;
    background-color: transparent;
    /* vedi la nota suoi BOTTONI_TEN per la reale impostazione da dare al MARGIN */
    margin-top: 2px;/*5px;*/
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    overflow: visible;
    /* da qui si può impostare solo il MARGIN. Se i bottoni contenuti
    hanno misura diversa da quella che prende il PANEL vanno in overflow 
    e si vedono correttamente, ma il border e il padding del PANEL stesso
    perdono di significato e danno un risultato errrato, Forse in qualche
    caso si può usare in qualche modo anche il PADDING.
    */
}

/* mettendo dentro il panel una div con questa classe, in cui poi si inseriscono i bottoni,
si può ottenere un bordo gestibile per effetti estetici. 
Tutto il resto resta ugiale, basta metter o non mettere la div per avere a disposizione un
area attorno ai bottoni
*/

.AREA_TENDINA_PIC, .AREA_TENDINA_MED, .AREA_TENDINA_GRA {
	/* ATTENZIONE: Il border va data esattamente con questa sintassi*/
    border-left: solid 1px #000000;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #000000;
	border-right: solid 1px #000000;
    /* o se no fa cose stranissime...*/
    padding-top: 11px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 10px;
	background-color:  Transparent;/*#E2E7E3; #E0E0E0;*/   
	    
    /* 
    senza mettere margin:auto; non si riesce a centrare la DIV nel Panel.
    Probabilmetne capita sempre così quando non si riesce a centrare una DIV,
    bisogna mettere margin auto.
    */
	margin: auto;
/* questa riga (e quella dopo che è lì solo per compatibilità con vecchie versioni di Firefox)
    serve ad arrotondare gli angoli di una div. Non funziona con IE7 e IE8, funziona perfettamente
    con IE9 e tutti gli altri. Essendo una cosa solo estetica va benissimo così. E' inutile impazzire
    a trovare soluzioni solo per IE7 e IE8.*/
    border-radius: 10px;
	-moz-border-radius: 10px;
}

.AREA_TENDINA_PIC {
    width: 65px; 
    /* è la larghezza dei bottoni, a cui si somma il padding e il border per avere la larghezza reale */
}

.AREA_TENDINA_MED {
    width: 110px; 
   
    /* è la larghezza dei bottoni, a cui si somma il padding e il border per avere la larghezza reale */
}

.AREA_TENDINA_GRA {
    width: 125px; 
    /* è la larghezza dei bottoni, a cui si somma il padding e il border per avere la larghezza reale */
}
.BOTTONI_MEDFREC, .BOTTONI_MEDFREC_GIU  {
	/* BOTTONE con freccia SELEZIONABILE */
	font-family: helvetica,arial,verdana,sans-serif;
	font-size: 9pt; /*11px;*/
	text-decoration: none;
	color: White; /*#99cc33;cambiato in uno più vivace;*/
	font-weight: bold;
	background-image: url('../Images/bottoneBLUFR.jpg');
	border-style: solid;
	border-color: #039cd5;
	border-width: 1px;
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	background-color: #E2E7E3; /*#335d1b; White;*/
	background-repeat: no-repeat;
	border-radius: 10px;
	-moz-border-radius: 10px;
	width: 100px;
	height: 27px; 
}
.BOTTONI_MEDFREC {
	background-image: url('../Images/bottoneBLUSX.jpg');
}
.BOTTONI_MEDFREC_GIU {
	background-image: url('../Images/bottoneBLUGIU.jpg');
}

.BOTTONI_MEDFREC:hover {
	/* BOTTONE con freccia SELEZIONABILE */
	font-family: helvetica,arial,verdana,sans-serif;
	font-size: 9pt; /*11px;*/
	text-decoration: none;
	color: White; /*#99cc33;cambiato in uno più vivace;*/
	font-weight: bold;
	background-image: url('../Images/bottoneBLUGIU.jpg');
	border-style: solid;
	border-color: #039cd5;
	border-width: 1px;
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	background-color: #E2E7E3;/*#335d1b; White;*/
	background-repeat: no-repeat;
	border-radius: 10px;
	-moz-border-radius: 10px;
}

.BOTTONI_GRAFRECDIS, .BOTTONI_MEDFRECDIS, .BOTTONI_PICFRECDIS { /* BOTTONE con freccia NON SELEZIONABILE (PER PAGINA ATTIVA) */
	font-family: helvetica,arial,verdana,sans-serif;
	font-size: 9pt; /*11px;*/
	text-decoration: underline;
	color:#006600;
	font-weight: bold;
	background-image: url('../Images/bottonebianco.jpg');
	border-style: solid;
	border-color: #039cd5;/*#7d8fa1;*/
	border-width: 1px;
	cursor: default;
	padding: 0px;
	margin: 0px;
	background-color: white;
	background-repeat: no-repeat;
	border-radius: 10px;
	-moz-border-radius: 10px;
}

.BOTTONI_MEDFRECDIS {
	width: 100px; /*95px;*/
	height: 27px;
}