/*html { height: 100% }*/

::selection {
	color: #fff;
	text-shadow:none;
	background: black; /* Safari */
}
::-moz-selection {
	color: #fff;
	text-shadow:none;
	background: black; /* Firefox */
}

body { height: 100%; margin: 0; padding: 0 ; overflow:hidden}
#contenitore-mappa { z-index: 1; width:100vw;/*era 100%*/ height: 100vh;}
/* prima l'unico css era html, body, #contenitore-mappa { width:90%; height: 600px; margin: 0; padding: 0}*/
		

#intestazione {
	position: fixed; top:0; left:0;
	width:100%; height:20px; z-index:4;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:25px;
	font-variant:small-caps;
	text-align:center;
	text-shadow:0px 0px 3px yellow;
	letter-spacing:2px;
	line-height:0.7;
}

#intestazione span {
	font-family:"Arial Black", Gadget, sans-serif;
	font-style:italic;
	font-weight:normal;
	font-size:50%;
	text-align: center;
	font-variant:normal;
	letter-spacing:normal;
}

#info {
	display: none;
	font-family:Verdana, Geneva, sans-serif;
	position:fixed;	bottom:0vh;	left:1vw;
	background:black;
	color:#FFF;
	text-shadow:0 0 1px black;
	
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	
	text-align:center;
	
	-webkit-box-shadow: 0px 0px 37px 17px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 37px 17px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 37px 17px rgba(0,0,0,0.5);
	
	transition-property: all; /*standard*/
	transition-duration: 0.4s;
	
	-webkit-transition-property: all; /*Safari e Chrome */
	-webkit-transition-duration: 0.4s;
		 
	-o-transition-property: all;      /*Opera*/
	-o-transition-duration: 0.4s;
		 
	-moz-transition-property: all;    /*Firefox*/
	-moz-transition-duration: 0.4s;
	
	padding:0 4px;
	width:200px; height:20px;
	z-index:6; /* era 3 e sbucava di 30 px;*/
}

#info:hover, #info:active {
/*	z-index:6;
*/	height:60px;
}

#info span {
	font-variant:small-caps;
	text-shadow:0 0 1px #5B5E00;
}

#selezione {
	position: absolute; top:100px; left: 60px;
	width:0px; height:0px;
	z-index:6;
	/*background-color:red;*/
}

#crediti {
	position: fixed; bottom:0; left:0;
	width:100%; height:20px; z-index:5;
	/*opacity:0.5;*/
	text-align:center;
	
	
	
	
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 43%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(43%,rgba(255,255,255,0.8)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 43%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 43%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 43%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 43%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

#crediti a{
	color:inherit;
	text-decoration: none; font-variant:small-caps; letter-spacing:2px;
	text-shadow:0px 0px 1px white, 0px 0px 3px white, 0px 0px 6px white;
}

#direzione {
	position: fixed; bottom:0; left:0;
	width:100%; height:20px; z-index:5;
	text-align:center;
	padding-top:3px;
	padding-bottom:3px;
	font-weight:bold;
	text-shadow:1px 1px 1px white, -1px 1px 1px white, -1px -1px 1px white, 1px -1px 1px white;
	border-top:solid 3px;
}

/* PULSANTI AGGIUNTI */


#pulsanti {
	position: fixed; bottom:30px; right: 1vw; /* dopo era bottom:1vh; right: 1vw; | prima era top:50px; right: 5px;*/
	/*width:10px; height:10px;
	background-color:red;*/
	z-index:6;/*
	background:red;*/
}
/*
#aggiorna {
	position: fixed; bottom:1vh; right: 1vw;
	z-index:6;
}
#torna {
	position: fixed; bottom:1vh; right: 1vw;
	z-index:6;
}
*/

input {
	outline: none; /* rimuoviamo il contorno (tipicamente una linea tratteggiata) associato ai link e ai pulsanti quando sono attivi. */
	cursor: pointer; /* Impostiamo il cursore perché assuma la tipica forma della manina (pointer) quando passiamo con il mouse sul bottone.*/
	text-align: center; /* Centriamo il testo */
	text-decoration: none; /* rimuoviamo da esso qualunque tipo di decorazione */
	font-size:15px;
	font-family:Verdana, Geneva, sans-serif;
	font-variant:small-caps;
	font-weight:bold;
	color: #fff;
	padding: 10px 20px; /* aggiungiamo del padding e un sottile bordo */
	border: solid 1px #0076a3;
	
	background-color: #0095cd;/* colore di sfondo. */
	background-color: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background-color: -webkit-linear-gradient(top,  #00adee,  #0078a5);
	background-color: -moz-linear-gradient(top,  #00adee,  #0078a5);
	background-color: -ms-linear-gradient(top,  #00adee,  #0078a5);
	background-color: -o-linear-gradient(top,  #00adee,  #0078a5);
	
	/* bordi arrotondati */
	   -moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	        border-radius: 8px;
	
	/* ombreggiatura pulsante */
	   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	min-width:200px;
	/*width:90%;*/
	
	margin-top:10px;
	
	transition-property: background; /*standard*/
	transition-duration: 2s;
	
	-webkit-transition-property: background; /*Safari e Chrome */
	-webkit-transition-duration: 2s;
		 
	-o-transition-property: background;      /*Opera*/
	-o-transition-duration: 2s;
		 
	-moz-transition-property: background;    /*Firefox*/
	-moz-transition-duration: 2s;
}

input[disabled] {
	opacity:0.4;
	background: #666;
	cursor:not-allowed;
}/*

input:hover {
}
*/
input:active {/*
	position: relative;
	top: 1px;*/
	opacity:0.8;
	background-color: #0095cd;
	background-color: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background-color: -webkit-linear-gradient(top,  #0078a5,  #00adee);
	background-color: -moz-linear-gradient(top,  #0078a5,  #00adee);
	background-color: -ms-linear-gradient(top,  #0078a5,  #00adee);
	background-color: -o-linear-gradient(top,  #0078a5,  #00adee);
	background-color: linear-gradient(top,  #0078a5,  #00adee);
	/*min-width:240px;*/
}

#aggiorna_old {/* bisogna scrivere Aggiorna nel pulsante */
	background-image: url(icone/ricarica.png);
	background-position:center center;
	background-repeat:no-repeat;
	text-shadow: 0 0 1px #000;
	min-width:80px;
	width:90px;
	padding: 10px 20px;/* per avere quello rotondo devi mettere 30px al primo numero; 20 px per far entrare bene tutto */
	
	-webkit-border-radius: 60;
	   -moz-border-radius: 60;
			border-radius: 60px;
}

#torna_old {/* bisogna scrivere Torna nel pulsante */
	background-image: url(icone/torna.png);
	background-position:center center;
	background-repeat:no-repeat;
	text-shadow: 0 0 1px #000;
	min-width:80px;
	width:90px;
	
	-webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  
  padding: 10px 20px;/* per avere quello rotondo devi mettere 30px al primo numero; 20 px per far entrare bene tutto */
}

#aggiorna {	
	background-image: url(icone/ricarica.png);
	background-position:center center;
	background-repeat:no-repeat;
	text-shadow: 0 0 1px #000;
	min-width:80px;
	width:90px;
	
	-webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  
  padding: 30px 20px;
}

.tasto {
	background-position:center center;
	background-repeat:no-repeat;
	text-shadow: 0 0 1px #000;
	padding:0; min-height:0; min-width:0;
	width:50px; height:50px;
	
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
	
	-webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.75);
	   -moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.75);
		    box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.75);
}
#aggnew {	
	background-image: url(icone/ricarica40.png);
}

#tornew {
	background-image: url(icone/torna30.png);
}

#aggiorna_small {
	background-image: url(icone/ricarica_small.png);
	background-position:center center;
	background-repeat:no-repeat;
	text-shadow: 0 0 1px #000;
	min-width:30px;
	max-width:30px;
	width:10px;
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding: 3px 3px;
	margin-left:4px;
}

#torna {
	background-image: url(icone/torna.png);
	background-position:center center;
	background-repeat:no-repeat;
	text-shadow: 0 0 1px #000;
	min-width:80px;
	width:90px;
	
	-webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  
  padding: 30px 20px;
}

.popup a{
	color:#fe4a5d;
	text-decoration: none;
}	
.popup h2{
	margin:0;
	padding:0;
}
.popup #berlin{
	width:220px;
	height:40px;
	text-indent: -9999px;
}

div.riquadro {
	text-align:center;
	min-width: 300px;
	background:rgba(158, 158, 158, 0.5);/*#CCC o yellow */
	-webkit-box-shadow: inset 0px 0px 25px 13px rgba(255,255,255,1);
	   -moz-box-shadow: inset 0px 0px 25px 13px rgba(255,255,255,1);
			box-shadow: inset 0px 0px 25px 13px rgba(255,255,255,1);
}

div.riquadro strong {
	font-size:1.2em;
	color:#900;
}

div.riquadro p.nomestazione {
	letter-spacing:1px;
	font-weight:bold;
	/*border: solid 1px;*/
	margin: 0;
	line-height: 1.5em;
}

div.riquadro p.orariofermata {
	line-height: 0%;
	font-size:150%;
	/*border: solid 1px;*/
	margin: 0;
	line-height: 1.5em;
}

div.riquadro p.ultimorilevamento {
	font-weight:bold;
	font-variant:small-caps;
}
div.riquadro p.ultimorilevamento:before {content:"Ultimo Rilevamento alle ";}

div.riquadro p:last-child {
	text-align:right;
	font-size:0.8em;
	color: grey
}

div.riquadro p:last-child:before {content:"Coordinate: ";}