/*
	Tutorial fornito da upCreative.net e YourInspirationWeb.com 
	13/03/2014 - Giacomo Freddi - Http://www.upcreative.net
*/

/******************* stili generali della pagina **********************/

body, html{
	height: 100%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 100;
	overflow: hidden;
	color: #FFF;
}

h1{
	color:#FFFFFF;
	font-weight: 100;
	text-align: center;
}

p{
	text-align: center;
}

a{
	color:#FFF;
}

a:hover,
a:active{
	text-decoration: none;
}

/* impostiamo uno sfondo diverso per ognuna delle 3 tab */
#tab1{
	background: #35C2D2;
}
#tab2{
	background: #FAC162;
}
#tab3{
	background: #F96A62;
}


/* stili generali per l'header e la tabbar: facciamo in modo che siano fixed, e che si adattino alla larghezza della pagina;  */
nav {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: 45px;
  padding-right: 10px;
  padding-left: 10px;

  background: #2759A3;
}

/*stili per l'header*/
	
	/* 
		Il titolo viene centrato nella barra di navigazione, e largo quanto l'elemento nav che lo contiene
		In altre parole copre interamente il suo contenitore
	*/
	nav.header .title {
	  position: absolute;
	  top: 0;
	  left: 0;
	  display: block;
	  margin:0;
	  width: 100%;
	  font-size: 18px;
	  font-weight: 100;
	  line-height: 45px;
	  color: #F4F4F4;
	  text-align: center;
	  white-space: nowrap;
	}
		
	/* stili per il pulsanti dell'header: facciamo in mdo; */
	nav.header button, 
	nav.header a{	  

		/* button ed anchor sono impostati in modo assoluto all'interno della navbar */
	
	  position: relative;
	  top: 7px;
	
	  /* impostaiamo lo z-index per visualizzare i pulsanti sopra l'elemento del title */
	  z-index: 20;
	  
	  /*impostiamo uno stile flat*/
	  padding: 6px 12px 7px; /*aumentiamo l'area per il tap sull'elemento con il padding */
	  border:none;	
	  color: #FFF;
	  background: transparent;
	  text-decoration: none;	

	  outline: 0;  
	}
	
	/* posizioniamo i pulsanti con classe 'right' e 'left' rispettivamente a destra o sinistra */
	nav.header a.right,
	nav.header button.right{
		float: right;;
		margin-left: 10px;
		right:0;
	}
	nav.header a.left,
	nav.header button.left {
		float: left;
		margin-right: 10px;
		left:0;
	}

	/*stili per l'hover dei pulsanti*/
	nav.header button:hover, nav a:hover{	
		color: #FFF;
	}
	
/* stili per il footer (la tabbar) */

nav.footer{
	display: table; /* siccome tutti i pulsanti contenuti nella tab devono occupare assieme il 100% della latghezza, usiamo lo steso 'display' del tag <table> */
	bottom: 0;      /*posizioniamo la tabbar in fondo al documento*/
	height: 50px;   /* aumentiamo l'altezza a 50px */
	padding: 0;		/*azzeriamo il padding per fare in modo che tutto lo spazio sia occupato dai pulsanti*/
	table-layout: fixed; /*impostaiamo un tipo di layout fisso per il display*/
}

	/*stili per i pulsanti della tabbar*/

	nav.footer > a{
		display: table-cell; /* visto che per il contenitore abbiamo usato il dispay del tag <table>, di conseguenza per i pulsanti usiamo quello della cella */
		width: 1%; 			 /* piccolo hach per fare in modo che il borwser attribuisca una larghezza ai pulsanti */
		height: 50px;	     /*stessa altezza del contenitore*/
		vertical-align: middle;
		color: #FFFFFF;
		text-align: center;
	}
	nav.footer > a.active{
		background: #1A397B;
	}

/* stili per il conteuto, che viene posizionato in modo da adattarsi al 100% del contenitore */

.content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: #4895D9;

  /*abilitiamo lo scrolling nativo*/
  -webkit-overflow-scrolling: touch;
}

/* nel caso in cui nel markup sia presente l'header prima del contenuto attribuiamo un padding-bottom a quest'ultimo */
nav.header ~ .content {
  padding-top: 44px;
}

/* nel caso in cui nel markup sia presente la tabbar prima del contenuto attribuiamo un padding-bottom a quest'ultimo */
nav.footer ~ .content {
  padding-bottom: 50px;
}

	/*stili delle tab all'interno del contenuto: facciamo in modo che si adattino alla grandezza del contenitore */

	.content .tab{
		position: absolute;
		top: 0;
		left: 0;
		bottom:0;
		right:0;
		visibility: hidden;		/*tutte le tab sono inizialmente nasoste*/
		overflow: hidden;

		/*preveniamo il rendering per la parte posteriore della tab, in modo da alleggerire il carico di lavoro */
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;

		/* 
		forziamo la tecnica dell'accelerazione hardware impostando come 'transition' la proprietà 'translate3d', 
		in modo da delegare le animazioni alla GPU (memoria grafica) del dispositivo ed ottenendo un effetto fluido
		*/
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);

		/* facciamo in modo che anche gli elementi che si trovano all'interno di ogni tab mantegano le trasofrmazioni 3d applicate alla tab stessa */
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	/*anche per le tab modifichiamo la posizione, nel caso in cui siano presenti header e footer*/	
	nav.header ~ .content .tab{
		top:44px;
	}
	nav.footer ~ .content .tab{
		bottom:50px;
	}

	/*la tab con classe 'active', ovvero quella che deve essere mostrata diventa visibile e tramite 'z-index' posizionata sopra le altre*/
	.content .tab.active{ 
		visibility: visible;
		z-index: 2;
	}

	/*definiamo la classe per  dare il via alll'animazione  di uscita della tab da nascondere*/
	.exit {
		-webkit-animation: exit .6s ease both;
		-moz-animation: exit .6s ease both;
		animation: exit .6s ease both;
	}
	/*definiamo la classe per  dare il via alll'animazione  di entrata della tab da visualizzare*/
	.enter {
		-webkit-animation: enter .6s ease both;
		-moz-animation: enter .6s ease both;
		animation: enter .6s ease both;
	}

/*
dichiarazione delle animazioni di entrata e di uscita per le tab.
Si tratta di animaizoni fluide e performanti, in quanto sfruttano la proprietà 'translate' e, siccome funzionano muovendo 
l’elemento sull’asse delle ascisse, insieme alla definizione della durata dell’animazione danno vita ad un effetto ‘slide’
*/

	/* animazione di uscita (dalla posizione attuale, l'elemento viene traslato verso sinistra per una distanza pari alla sua larghezza ) */

	@-webkit-keyframes exit {
		to { -webkit-transform: translateX(-100%); }
	}
	@-moz-keyframes exit {
		to { -moz-transform: translateX(-100%); }
	}
	@keyframes exit {
		to { transform: translateX(-100%); }
	}

	/* animazione di entrata (dalla posizione attuale, l'elemento viene traslato verso destra per una distanza pari alla sua larghezza ) */

	@-webkit-keyframes enter {
		from { -webkit-transform: translateX(100%); }
	}
	@-moz-keyframes enter {
		from { -moz-transform: translateX(100%); }
	}
	@keyframes enter {
		from { transform: translateX(100%); }
	}