/* File:        header.css */
/* Descrizione: stili per elementi intestazione */
/* Versione:    00 draft */
/* Data:        2017-11-18 */
/* Proprietà:   Q-Ation S.R.L. */

/* PROMEMORIA */

/*  1) considerare sempre l'annidamento degli oggetti sia per quanto concerne i posizionamenti, sia per quanto concerne gli stili */
/*  2) nel posizionamento relativo: */
/*        a) la posizione corrente verticale è data dalla somma delle altezze (non delle spaziature) degli oggetti inseriti precedentemente; */
/*        b) anche lo spessore degli eventuali bordi è conteggiato nella posizione corrente verticale; */
/*        c) i div agiscono da andata a capo, quindi la posizione corrente orizzontale è sempre azzerata. */

@charset "utf-8";

/* CLASSE PER SFONDO INTESTAZIONE */
/* Stile per la fascetta fissa superiore di sfondo  */
.headerbkgnd
	{
		position:fixed; /* posizionamento fisso rispetto alla viewport */
		z-index: 10;				
		
		width:100%; /* tutta la larghezza della viewport */
		height:122px; /* 112px per logo animato + 10px totali per margini superiore e inferiore */
			
		top:0px; /* ancorato al bordo superiore della viewport */
		left:0px; /* ancorato al bordo sinistro della viewport */
				
        background-image:url(../Images/BkGnd_Hdr.jpg);
		background-repeat:repeat;	
		
		box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.54);/*box-shadow: 0px 0px 2px 2px rgba(255,255,255,0.7);*/
	}

/* CLASSE PER BOX LOGO ANIMATO */
/* Stile per contenitore logo animato*/
.logobox
	{
		position:fixed; /* posizionamento fisso rispetto alla viewport */
		z-index:20;
		width:276px; /* larghezza del logo animato */
		height:112px; /* altezza del logo animato 112*/
		top:5px; /* 5px dal bordo superiore della viewport */
		overflow:hidden;
	}

/* CLASSE PER SFONDO CALENDARIO */
/* Stile per la disposizione dell'ombra del calendario (composto da tre elementi distinti) */
.calendarbkgnd
	{
		position:relative; /*relative*/
		z-index:20;
				
		width:100px;
		height:100px;
				
		top:3px; /* 11px di top del logo dal bordo superiore */
				
		border-radius:5px;	
		box-shadow:0px 2px 6px 4px rgba(0,0,0,0.15); /* 0.25 */
				
		background-color:rgba(70,70,70,0.25);
	}
	
/* CLASSE PER  BOX ANNO */	
/* Stile per riquadro dell'anno */
.yearbox
	{
		position:relative;
		z-index:30;
				
		width:63px;
		height:36px;
				
		top:-97px; /* -89 // 11px posizione calendarbkgnd - 100px altezza calendarbkgnd */
				
		border-radius:5px 0px 0px 0px; /* solo angolo superiore sinistro */

		background-color:rgba(210,210,210,0.20); /*0.75*/
		
		color:rgba(255,255,255,0.7);
		font-family:'Fira Sans Condensed';
		font-weight:400;/*500*/
		font-size:24px;
		line-height:35px; /*31*/
		text-align:center;
		text-shadow:1px 1px 2px rgba(0,0,0,0.9);	
	}
			
/* CLASSE PER BOX GIORNO */
/* Stile per riquadro del giorno */
.daybox
	{
		position:relative;
		z-index:30;
				
		width:63px;
		height:63px;
				
		top:-96px; /* -88 // 11px posizione calendarbkgnd - 100px altezza calendarbkgnd +1px interspazio */
				
		border-radius:0px 0px 0px 5px;
				
		background-color:rgba(210,210,210,0.35); /* 1 */
			
		color:rgba(255,255,255,0.75);
		font-style:italic;
		font-family:'Fira Sans Condensed';/*font-family:'Raleway';*/
		font-weight:400;/*500*/
		font-size:40px;
		line-height:60px; /*54*/
		text-align: center;
		text-shadow:1px 1px 2px rgba(0,0,0,0.9);	
	}
			
/* CLASSE PER BOX MESE */
/* Stile per riquadro del mese*/
.monthbox
	{
		position:relative;
		z-index:30;
				
		width:100px; 
		height:36px;
				
		top:-96px; /* -88 // 11px posizione calendarbkgnd - 100px altezza calendarbkgnd +1px interspazio */
				
		border-radius:0px 0px 5px 5px;
				
		background-color:rgba(210,210,210,0.20); /* 0.75 */
		
		margin-right:3px;
		margin-bottom:1px;
		
		color:rgba(255,255,255,0.7);
		font-family:'Fira Sans Condensed';/*font-family:'Raleway';*/
		font-weight:400;/*600*/
		font-style:italic;
		font-size:18px;
		line-height:36px; /* serve per la centratura nel riquadro */
		letter-spacing:1px;
		text-align:center;
		text-shadow:-1px 1px 2px rgba(0,0,0,0.9);		
		
		transform-origin:left top;
		transform:rotate(-90deg);
	}

/* CLASSE PER INCISIONE DI STACCO SUPERIORE */
/* Stile per separatore pre-footer/footer */
.upperengraving
	{
		position:fixed; /* posizionamento fisso rispetto alla viewport */
		z-index:15;
			
		width:100%; /* tutta la larghezza della viewport */
		height:2px;
				
		top:123px; /* 122 */
		left:0px; /* necessario per la centratura */
		background:rgba(140,140,140,0.5); /*0.3 <---- decidere .... */
		box-shadow: 0px 2px 2px 0px rgba(255,255,255,0.65);
		
	}

/* CLASSE PER FASCETTA POST-INTESTAZIONE */
/* Stile per sfondo barra navigazione */
.postheader
	{
		position:fixed; /* posizionamento fisso rispetto alla viewport */
		z-index:10;
			
		width:100%; /* tutta la larghezza della viewport */
				
		top:126px; /* 122 */
		left:0px; /* necessario per la centratura */

		background:rgba(25,151,240,0.355); /* NUOVO COLORE OK 0.325*/
		box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
	}