/* ***** IMPOSTAZIONI DELLA STRUTTURA DELLA PAGINA ******** */
body{
	/* azzera il punto iniziale della viewport */
	margin: 0;height:100%;width: 100%;
}

#container
	{
		position:relative;
		
		top:10px; bottom:10px; 
		height: calc(100% - 2*(5px + 0px) - 10px - 10px);
		
		/* versione larghezza variabile in base alla viewport */
		margin:auto 10px;		
		/* versione larghezza fissa centrato */
		/* width:900px; */
		/* margin:auto auto; */
		
		/* border:5px solid yellow; */
		border:5px solid transparent;
	}
	
#BGimg
	{
		width: inherit;
		height: calc(100% - 5px);
	}
	
#header
	{
		position:absolute;
		height:100px;
		left:0; right:0;
		/* versione con la dimensione */
		/* width:calc(100% - ((5px + 0px)*2)); */
		top:0px;
		border:5px solid transparent;
		/* border:5px solid lime; */
		/* padding:5px; */
		overflow:auto;
	}
	
#footer
	{
		position:absolute;
		height:20px;
		left:0; right:0;
		/* versione con la dimensione */
		/* width:calc(100% - ((5px + 0px)*2)); */
		bottom:0px;
		padding:10px;
		/* border:5px solid red; */
		border:5px solid transparent;
	}	
	
#nav
	{
		position:absolute;
		overflow:auto;
		/* right:0; in caso navigazione a destra */
		left:0;
		width:200px;padding:5px; /* real width 210px */
		
		top:calc(100px + (5px + 0px)*2  + 10px );
		/* se no c'è il header metti :*/
		/* top:0; */
		
		bottom:calc( 20px + ( 5px + 10px )*2 + 10px ); /* il primo parametro 		/* se no c'è il footer metti :*/
		/* bottom:0; */
		
		/* versione con le dimesioni */
		/* height:calc( 100% - 2*(5px +  0px) - 1*(100px + 2*(5px + 0px)) - 0*(100px + 2*(5px + 10px)) ); */
		

		/* border:5px solid pink; */
		border:5px solid transparent;
	}	
		
#content
	{	position:absolute;
		overflow:auto;
		z-index:5;
	
		top:calc( 100px + 2*(5px + 0px) + 10px ); /* aggiungo un extra margine di 10px */
		/* se no c'è il header metti :*/
		/* top:0; */
		
		/* in base se vuoi nav a destra o a sinistra scambia right con left */
		right:0;		left:calc( 200px + 2*( 5px + 5px ) + 5px);
		/* se no c'è il nav metti :*/
		/* left:0;		right:0; */
		

		bottom:calc( 20px + (5px + 10px)*2 + 10px ); 
		/* se no c'è il footer metti :*/
		/* bottom:0; */
		
		/* versione con le dimesioni */
		/* height:calc( 100% - 2*(5px + 10px) - 1*(100px + 2*(5px + 0px)) - 0*(100px + 2*(5px + 10px)) ); */
		/* width:calc( 100% - 2*(5px + 10px) - 0*(200px + 2*(5px + 10px)) );  */
		
		padding:10px;
		/* border:5px solid CornflowerBlue;  */
		border:5px solid transparent; 
	}
	
/* ***** PERSONALIZZAZIONE ESTETICA ******** */

body{	/* ************* */
	font:normal 14px tahoma;
	color:black;
	background:url('../IMG/wall_grey_stone.jpg') repeat top left;
	/* background-color:#006652; */
}	
	#coverbody{ 
		position:absolute;
		width: inherit;
		height:inherit;
		background-color:lightblue;
		opacity:0.2;
		}

	#container{
		/* background-color:white; */
		/* border-color:#006652; */
	}
	#BGimg
	{
		/* background-color:white; */
		/* background:url('../IMG/sfondo.gif') repeat top left; */
		/* opacity:0.5; */
	}

	#header{
		background:url('../IMG/casetta_dipinta_bianca_mini.gif') no-repeat top right /5% rgba(128,128,128,0.9) ;
		color:white;
		text-align:center; line-height:50px; font-size:200%; 
		text-transform: uppercase;
		font-family:Comic Sans Ms;/* color: teal; */
	}
	#LOGOimg
	{
		/* height:50px; width:50px; position:absolute;right:0;top:0; */
		/* background: url('../IMG/TimeLOG_logo.gif') top right; */
	}

	#footer{
		background-color:rgba(128,128,128,0.8);
		color:white;
		color:white;text-align:center;line-height:30px;font-size:150%;font-variant:small-caps;font-weight:normal;
		}
	
	#nav{background-color:rgba(245,245,245,0.9);color:navy;}
	#nav ul{padding-top:0px;font-variant:small-caps;list-style-type:none;}
	#nav ul>span{display:inline-block;font-weight:bold; padding-bottom: 10px;}
	/*vertical-align:top;*/
	/*line-height:40px; */ 
	#nav ul a, #nav ul a:visited {color:inherit;}
	#nav li{padding-left:2px; font-size:100%;}
	#nav li.pgcorrente{font-weight:bold;background-color:yellow;}
	#nav li:not(.pgcorrente):hover{font-size:120%;color:CornflowerBlue;}
	#nav li:before {content: "\2756\A0\A0";font-weight:normal;color:red;}
	#nav li[class="pgcorrente"]:before {color:transparent;}
	#nav ul a{padding-right:3px;padding-left:3px;}
	
	#content{
		/* border-color:CornflowerBlue; */
		/* background-color:#E0EAFB; */
		background-color:rgba(245,245,245,0.7); color: navy;
	}
	
lbl{font-variant:small-caps;}
txt{font-family:calibri, sans-serif;color:black;
	display:inline-block;background-color:white;padding:0 5px;}
hr.ruler{border:hidden;border-top:4px dotted #404040;margin:10px 0 5px;height:10px;}
hr.left {float:left; width:30%;}
hr.right{float:right;width:30%;}
hr.mid  {clear:both; width:100%;}
center.ruler{line-height:20px;font-variant:small-caps;font-weight:bold;color:#404040;}
p.center_stop{ height:0px;clear:both;}

div.ruler_stop{clear:both;height:0px;background-color:red;width:100%}
hr.stop{clear:both; border:hidden;width:100%;}
hr.red{border-color:red;}
center.red{font-size:140%;}
.dateclassIT{ display:inline-block;
	color:red;background-color:black;line-height:30px;font-family:inherit;
	font-size:inherit;border-radius:5px;height:30px;text-align:center;width:120%;}
.b {font-weight:bold;}
bold{font-weight:bold;}

div.linesep{position:relative; height: 18px; width: 100%;overflow:hidden;}
div.linesep div{}
div.linesep div:nth-of-type(1)::after {content:attr(car);}
div.linesep div:nth-of-type(1){position:absolute;top:0;left:0px;text-align:center;width:100%;z-index:1;}
div.linesep div:nth-of-type(2){position:absolute;top:0;left:0px;text-align:center;width:100%;z-index:2;left:auto;right:auto;}
div.linesep div:nth-of-type(2)span span{display:inline-block;padding-left:15px;padding-right:15px;background:white;}

dbg{display:block;position:fixed;top:10px;left:calc(20%);
background:white;z-index:10;min-width:50px; resize:both;overflow-y:auto; padding:5px;}