img {max-width:100%;}

/*
nav = barra orizzontale contenente il menu 
nav ul = menu livello 1 (tasti orizzontali)
nav ul li = tendina livello 2
nav ul ul = tasti tendina livello 2
nav ul ul li = tasti sottotendina livello 3
*/

#nav ul,#nav ul li{
    margin:0; 
    float:left; 
	}
/* colore dello sfondo del menu (1) e della tendina (2) */
#nav{
	background:#ff9900;
	padding:0;
	}
#nav ul li{
	background:#ff9900;
	border-style:solid;
	border-width:1px;
	width:15rem;       
	text-align:center;
	padding:2px;
	font-size:large;  /*xx-small x-small  small medium large x-large xx-large*/
    height:1.7rem;   /*   */
	}

/* larghezza e altezza della barra menu */
#nav{
    width:100%;
    height:2rem;   /*1.6rem;*/
}
#nav ul{
    padding:0; 
    list-style:none;
}
#nav a{
    display:block; 
    color:#000000; 
    text-decoration:none; 
}
#nav ul ul{
    display:none; 
	position: absolute; 
	margin-left: -3px; 
	margin-top: 2px;
}
#nav ul ul li{
    text-align:left; 
	padding:2;
}
#nav ul ul ul{
	margin-left: 0; 
	margin-top: 0;
}
/**
* Sfrutta l'iterazione automatica delle liste innestate
*  per evitare l'utilizzo di Javascript.
* In questo caso mostra la tendina nascosta in precedenza.
*/
#nav ul li:hover>ul{
    display:block;
}
#nav ul ul li{
    float:none; 
    position:relative;
}
/* Assegna la posizione assoluta (pseudo-indipendente) alla sottotendina e la posiziona sulla destra della tendina dalla quale è stata chiamata. Reimposta la larghezza resettata a causa del posizionamento assoluto. */
#nav ul ul ul{
    position:absolute; 
    top:0;
    left:100%;
    width:100%;
}
p#mini {font-size: 0.75em;}
p#rosso {color: red;}
p#blu {color: blue;}
p#porpora {color: purple;}
p.sizmin {font-size: 0.75em;}
.sizuno {font-size: 0.65em;}
.sizdue {font-size: 0.8em;}
.siztre {font-size: 1.0em;}
.sizqua {font-size: 1.15em;}
.sizcin {font-size: 1.5em;}
.sizsei {font-size: 2.0em;}
.sizset {font-size: 3.0em;}

.pgmtitol {color: #008000; text-align: center; font-weight: bold, italic; font-size: 1.5em; }
.pgmsubti {color: #008000; text-align: center; }
.pgmgiorn {color: #0000FF; text-align: center; font-weight: bold; }
.pgmtappe {color: #800000; text-align: center; font-weight: bold; }

.colros {color: red;}
.colblu {color: blue;}
.colpor {color: purple;}

.sktito {color: #0000FF; text-align: center; font-size: 3.0em; margin-top: 0px; margin-bottom: 0px; }
.sksubt {text-align: center; font-size: 2.0em; font-weight: italic; margin-top: 0px; margin-bottom: 0px; }
.skprop {color: #0000FF; font-size: 1.5em; font-weight: bold; }
.skpros {color: #0000FF; text-align: center; margin-top: 0px; margin-bottom: 0px; }
.skdest {color: #0000FF; text-align: center; font-size: 1.5em; font-weight: bold; }

/******************/
/***** Mobile *****/
/******************/
/* 
 * Quando lo schermo non raggiunge gli 800px:
 */
@media only screen and (max-width:800px){
    #nav ul,#nav ul li,#nav ul ul li{
        /* width:100%; /* imposta la larghezza di tasti, tendina e 			 * sottotendina al 100% */
        float:left; /* li posiziona uno sotto l'altro */
    }

    #nav ul ul ul{
        position:relative; /* reimposta la sottotendina come 						* relativa alla tendina */
        left:0; /* e resetta la sua posizione orizzontale */
    }
}