html,body{margin: 0;padding:0}
body {
  font-family: arial,sans-serif;
  font-size: 95%; 
  background-color: #ADD8E6;
}
  
.molto_grande {font-size: 150%;}
.grande {font-size: 120%;}
.piccolo {font-size: 80%;}
.molto_piccolo {font-size: 70%;}
.errore {
  font-size: 125%;
  color: red;
}

h1 {
  font-size: 175%;
  font-weight: bold;
  font-style: italic;
}

h2 {
  font-size: 150%;
  font-weight: bold;
  font-style: italic;
}

h3 {
  font-size: 120%;
  font-weight: bold;
}


a img {
  border: none;
}

.fisso {
   max-width: 900px;
   text-align: left;
   margin-left: 0;
}

.leftStorico {
  position: relative;
  left: 50px;
  margin-top: 1px;
  margin-bottom: 5px;
  min-width: 160px;
}


.left {
  text-align: left;
}

.right {
  text-align: right;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.selected {
  text-align: center;
  background-color: yellow;
  color: blue;
  font-size: 80%;
}

.unselected {
  text-align: center;
  background-color: white;
  color: blue;
  font-size: 80%;
}

.unselected:hover {
  color: red;
  background: #ffff99;
  transition: 0.7s;
}

.unselected:active {
  background: #ffff66;
  transition: 0.7s;
}

.unselected a {
  text-decoration: none;
}

.unselected a:hover {
  color: red;
  transition: 0.7s;
}

.selection {
  border-collapse: collapse;
  padding: 2px;
  border: 0;
}

.noexists {
  text-align: center;
  background-color: #D0D0D0;
  font-size: 80%;
}

.nogood {
  text-align: center;
  background-color: white;
  font-size: 80%;
}

.avviso {
  color:red;
  font-size:120%;
  font-weight:bold;
}

.container {
  background-color: #ADD8E6;
}

.header {
  position: fixed;
  background-color: white;
  width: 100%;
  height: 78px;
  top: 0;
  padding: 0;
  text-align: left;
  vertical-align: middle;
  z-index: 1;
}

.content{
  background-color: #ADD8E6;
  position: absolute;
  top: 100px;
  padding: 10px;
//  max-width: 1000px;
  vertical-align: middle;
  z-index: 0;
}

.content img {
}

.footerSpace { 
  min-height: 100px;
}

.footer { 
  position: fixed;
  bottom: 0px;
  /*width: 100%;*/
  width: 88px;
  height: 31px;
  background: white;
  font-size: 65%; 
  opacity: 0.6;
}

.footer:hover { 
  width: 100%;
  height: 80px;
  opacity: 1;
}

/*.contact, .contact ul, .contact li, .#content li{*/
.contact, .contact ul, .contact li {
  margin: 0;
  list-style: none;
} 

.contact ul {
  margin-left: 0;
  padding-left: 40px;
} 
/*
html>body .contact li {
}
*/
.contact li li, .content li li {
  position: relative;
  list-style: disc;
  font-weight: bold;
} 
/*
html>body .contact li li {
}
*/
.contact li li a{
  text-decoration: none;
  color: blue;
} 

.contact li li a:hover{
  background-color: skyblue;
  transition: 0.7s;
}

.contact li li a:active {
  background: yellow;
  transition: 0.7s;
}
/*.contact a, .content a, #content2 a {   */
.contact a, .content a {
  text-decoration: none;
  color: blue;
} 

.contact a:hover, .content a:hover {
/*  background-color: skyblue; */
  color: red;
  transition: 0.7s;
}

.contact a:active, .content a:active {
  background-color: yellow;
  transition: 0.7s;
}

.grafici2 {
  border: 0;
}

.grafici3 {
  border: 0;
  width: 100%;
  padding 3px;
  text-align: center;
  vertical-align: middle;
}

.pdf {
  position: relative;
  left: 10px;
  top: 10px;
  display: inline;
}

.pdf a {
  background-repeat: no-repeat;
}

.pdf img {
  width: 40px;
  height: 40px;
  padding-bottom: 10px;
}

.qr {
  position: relative;
  display: inline;
  top: 10px;
  left: 20px;
}

.qr img {
  width: 40px;
  height: 40px;
  padding-bottom: 10px;
}

.mese {
  background-color: #D0D0D0;
  text-align: center;
  border: 1px solid black;
}

.record {
  background-color: #D0D0D0;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
}

.sommario {
  background-color: #D0D0D0;
  border-collapse: collapse;
  border: 1px solid black;
}

.sensori {
  background-color: #FFFF99;
  border-collapse: collapse;
  border: 1px solid black;
}

.center {
  text-align: center;
}

.ottima {
  background-color: #F0F0F0;
  color: green;
}

.buona {
  background-color: #F0F0F0;
  color: orange;
}

.scarsa {
  background-color: #F0F0F0;
  color: red;
}

.ridotta {
  background-color: white;  
  border-collapse: collapse;
  border: 1px solid dimgray;
}

.completa {
  background-color: #D0D0D0;  
  border-collapse: collapse;
  border: 1px solid dimgray;
}

.estesa {
  background-color: #D0D0D0;  
  border-collapse: collapse;
  border: 1px solid dimgray;
}

.confronto {
  border: 1px solid black;
}

.v1 { background-color: #C0C0C0; }
.v2 { background-color: #B4B4B4; }
.v3 { background-color: #A8A8A8; }
.v4 { background-color: #9C9C9C; }

.m1 { background-color: #A0A0A0; }
.m2 { background-color: #B0B0B0; }
.m3 { background-color: #C0C0C0; }
.m4 { background-color: #D0D0D0; }
.m5 { background-color: #E0E0E0; }

.iconaMeteo {
  float: left;
}

.iconaMeteo img {
  width: 86px;
  height: 86px;
  border: none;
}

.nod {
  text-align: center;
  min-height: 10px;
}

.nod a {
  color: blue;
  text-decoration: none;
}

.nod a:hover{
  color: red;
  transition: 0.7s;
}

.nod a:active {
  background-color: yellow;
  transition: 0.7s;
}

.stemma {
  position: aboslute;
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 70px;
  margin: 2px;
}

.stemma img{
  width: 70px;
  height: 70px;
}

.stazione {
  display: inline-block;
  vertical-align: middle;
}

.ltitolo {
  font-weight: bold;
  font-style: italic;
}

.lvoce {
  font-weight: bold;
}

.lfonte {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

.block {
  display: inline-block;
}

.black {
  color: black;
}

.red {
  color: red;
}

.green {
  color: green;
}

.orange {
  color: orange;
}

.yellow {
  color: yellow;
}

.blue {
  color: blue;
}

.previ {
  width: 900px;
}

.giorno {
  display: block;
  clear: both;
  margin-bottom: 20px;
}

.situazione {
  margin-bottom: 5px;
  text-align: justify;
}

.tendenza {
  margin-bottom: 5px;
  text-align: justify;
}

.titoloSituazione {
  background-color: palegreen;  
  display: inline-block;  
  vertical-align: middle;
  text-align: left;
  font-size: 120%;
  width: 100%;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 5px 0 5px 10px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.Editoriale {
  max-width: 900px;
}

.testoEditoriale {
  margin-bottom: 5px;
  text-align: justify;
}

.titoloEditoriale {
  background-color: white;  
  display: inline-block;  
  vertical-align: middle;
  text-align: left;
  font-size: 120%;
  width: 100%;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 5px 0 5px 10px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.autoreEditoriale {
  margin-bottom: 5px;
  font-size: 80%;
  font-style: italic;
  text-align: right;
}

.data {
  background-color: #80dfff;  
  display: inline-block;  
  vertical-align: middle;
  text-align: left;
  font-size: 120%;
  width: 100%;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 3px;
  padding: 5px 0 5px 10px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.giornoMese {
  font-weight: bold;
  font-size: 150%;
}

.Attendibilita {
  display: block;
}

.titoloAttendibilita {
  display: block;
  font-size: 90%;
  font-weight: bold;
}

.campoAttendibilita {
  text-align: centery;
  display: block;
  margin: 2px;
}

.iconaAttendibilita img {
  width: 32px;
  height: 32px;
}

.iconaCampo {
  display: inline-block;
  vertical-align: middle;
  /*text-align: right;    */
  margin: 5px 5px 5px 0;
}

.testoCampo {
  display: inline-block;
  font-size: 90%;
  /*text-align: justify;  */
}

.Temp {
  display: block;
  margin-top: 5px;
  float: left;
}

.Temp img {
  width: 43px;
  height: 86px;
}

.Temp:after {
    content: "";
    display: table;
    clear: both;
}

.Meteo {
  display: block;
  margin-top: 5px;
}

.Meteo img {
  width: 86px;
  height: 86px;
}

/* Create two equal columns that floats next to each other */
.columnIcone {
    float: left;
    width: 86px;
    padding: 5px;
}

.columnTesto {
    float: left;
    max-width: 780px;
    padding: 5px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.testo {
  display: inline-block;
  max-width: 790px;
}

.campo {
  text-align: justify;
  display: block;
  margin: 5px;
}

.titoloCampo {
  display: inline-block;  
/*  text-align: right;*/
  font-size: 90%;
  font-weight: bold;
}

.iconaCampo {
  display: inline-block;
  vertical-align: middle;
  /*text-align: right;    */
  margin: 5px 5px 5px 0;
}

.testoCampo {
  display: inline;  
  font-size: 90%;
  /*text-align: justify;  */
}

.lettera {
  display: inline-block;
  margin: 2;
  font-weight: bold;
}

a.Attivo {
  color: blue;
  text-decoration: none;
}

a.Attivo:hover {
  color: red;
  text-decoration: none;
  transition: 0.7s;
}

a.Attivo:active {
  background-color: yellow;
  transition: 0.7s;
}

a.nonAttivo {
  color: gray;
}

.dizionario {
  max-width: 900px;
  text-align: justify;
  font-style: italic;
}

.nomeTermine {
  font-size: 120%;
  color: green;
  font-weight: bold;
}

.infoTermine a {
  color: blue;
  text-decoration: none;
}

.infoTermine a:hover {
  color: red;
  text-decoration: none;
  transition: 0.7s;
}

.infoTermine a:active {
  background-color: yellow;
  transition: 0.7s;
}

.legenda {
  min-width: 500px;
  text-align: center;
}

.gruppoLegenda {
  display: block;
  clear: both;
}

.titoloLegenda {
  position: relative;
  top: 20px;
  font-style: italic;
  font-weight: bold;
}

.iconaLegenda {
  float: left;
  font-size: 80%;
  margin: 10px;
  width: 100px;
  height: 120px;
}

.iconaLegenda img {
  max-width: 72px;
  height: 72px;
}
 
.thumbnail span { /*CSS for enlarged image*/
  position: absolute;
  display: none;
  /*visibility: hidden;*/
  color: black;
  text-decoration: none;
  border: 1px solid black;
}

.thumbnail span img { /*CSS for enlarged image*/
  border-width: 0;
  text-decoration: none;
}
                                        
.thumbnail:hover span { /*CSS for enlarged image*/
  display: block;
  z-index: 50;
  text-decoration: none;
  transition: 0.7s;
}

.thumbnail:active span {
  background-color: yellow;
  transition: 0.7s;
}
.divTable{
	display: table;
	/*width: 100%;*/
}

.divSubTable{
	display: table;
	width: 100%;
}

.divTableRow {
	display: table-row;
}

.divTableCol {
  /*border: 1px solid #999999;*/
  border: 0;
  display: table-cell;
  padding: 0;
  vertical-align: middle;
  text-align: center;
}

.divTableCell {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px;
  vertical-align: middle;
  height: 17px;
}

.divTableCellInvisible {
  background-color: #ADD8E6;
  border: 0;
  border-color: #ADD8E6;
  display: table-cell;
  /*visibility: hidden;*/
}

.divTableCellHidden {
  border-color: red;
  border-style: solid;
  border-width: 2px;
  display: table-cell;
  padding: 3px;
  vertical-align: middle;
}

.divTableSuperCell {
  border: 0;
  display: table-cell;
  padding: 0;
  vertical-align: middle;
}

.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px;
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
}

.divTableHeadClear {
	border: 1px;
	display: table-cell;
	padding: 1px;
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
}

.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}

.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}

.divTableBody {
	display: table-row-group;
}

.h1 { height: 100% }
.h2 { height: 50% }
.h3 { height: 33% }
.h4 { height: 25% }
.h5 { height: 20% }
.h6 { height: 17% }
.h7 { height: 14% }

.w100 { width: 100%; }

.w140 { width: 140%; }

.w60 { width: 70%; }

.w50 { width: 50%; }

.w30 { width: 35%; }

.w25 { width: 25%; }

.w80p { width: 80px; }

.w60p { width: 60px; }

.w50pfix { min-width: 50px; }
.w50p { width: 50px; }

.w40p { width: 40px; }

.w20p { width: 20px; }

.vtab { height: 20px; }

.mb5 { margin-bottom: 5px; }

.htab {
  min-width: 30px;
  display: inline-block; 
}


.home {
  display: inline;
  line-height: 30px;
}

.home img {
  position: relative;
  height: 30px;
  width: 30px;
  top: 0px;
}

.rad {
}

.rad img {
  width: 600px;
}

.random {
}

.random img {
  max-width: 800px;
}

.menu {
  position: fixed;
  left: -40px;
  top: 60px;
  /*padding: 2px;*/
  height: 30px;
  width: 100%;
  z-index: 2;
} 


ul.egmenu {  
    background: palegreen; 
    height: 30px;
    width: 100%; 
}

ul.egmenu > li {  
    float: left; 
    position: relative;
    /*width: 110px;*/  
}

ul.egmenu ul {  
    background: palegreen; 
    display: none; 
    position: absolute;
    left: 0; top: 100%;
    width: 180px;
    padding: 0;
    overflow: hidden;
}

ul.egmenu a {
    background: palegreen; 
    text-decoration: none;  
    cursor: pointer; 
    display: block;
    color: black; 
    line-height: 30px;
    left: 0; 
    padding: 0 20px; 
}

ul.egmenu a:hover {
  background: mistyrose;
  transition: 0.7s;
}

ul.egmenu li {
    list-style: none;
    left: 0;
}

ul.egmenu li:hover {
  background: mistyrose;
  left: 0;
  transition: 0.7s;
}

ul.egmenu li:active {
  background-color: yellow;
  transition: 0.7s;
}

ul.egmenu li:hover ul {
  display: block;
  left: 0;
  transition: 0.7s;
}

ul.egmenu li:active ul {
  background-color: yellow;
  transition: 0.7s;
}

.informativa a {
  text-decoration: none;
  color: blue;
} 

.informativa a:hover{
  color: red;
  transition: 0.7s;
}

.informativa a:active {
  background-color: yellow;
  transition: 0.7s;
}

.mobileDisplay {
  display: none;
}

.desktopDisplay {
  /*display: block;*/
}

#nascondi {
}

.mostra_a_richiesta {
  border: 0;
  display: none;
} 

.nascondi_a_richiesta {
  display: block;
}

.tasto {
  background: #eee;
  border-radius: 5px;
}

.tasto:hover {
  background: #fff;
  transition: 0.7s;
}

.tasto:active {
  background: yellow;
  transition: 0.7s;
}

.col92 {
    width: 92%;
    position: relative;
    right: 1px;
}
    
.col50 {
    width: 50%;
    text-align: center;
}

.col25 {
    width: 25%;
    position: relative;
    right: 1px;
}
    
.col08 {
    width: 8%;
    position: relative;
    right: 1px;
}
    
@media all and (max-width: 660px) {
  ul.egmenu a { padding: 0 15px; } 
  .previ { max-width: 600px; }
  .thumbnail span img { max-width: 600px; }
  .footer:hover { height: 85px; }
}


@media all and (max-width: 580px) {
  ul.egmenu a { padding: 0 10px; } 
  .previ { max-width: 520px; }
  .thumbnail span img { max-width: 520px; }
  .footer:hover { height: 90px; }
}


@media all and (max-width: 480px) {

  h2 { font-size: 120%; }
  h3 { font-size: 100%; }
  
  .menu { top: 40px; }

  ul.egmenu > li { float: none; width: 100%; border-bottom: 1px solid #999999; }
  ul.egmenu a { line-height: 25px; }
  ul.egmenu ul { position: relative; }
 
  ul.egmenu li.tap { background: mistyrose;  }
  ul.egmenu li.tap ul { display: block;  }

  .header { height: 55px; }

  .content { top: 160px; }
  
  .previ { max-width: 400px; }

  .columnIcone { width: 100%; }

  .columnTesto { max-width: 400px; }
  
  .pdf { display: inline-block; }
  .qr { display: inline-block; }

  .w50 { width: 100%; }

  .w25 { width: 50%; }

  .data { max-width: 400px; }
  
  .legenda { display: none; }

  .situazione { max-width: 400px; }
    
  .thumbnail span img { max-width: 400px; }

  .mobileDisplay { display: block; }
 
  .desktopDisplay { display: none; }
  
  .Attendibilita { display: inline-block; }
  .PreviMeteo { display: inline-block; }
  .PreviTemp { display: inline-block; }

  .footerSpace { min-height: 140px; }
  .footer:hover { height: 140px; }
}

@media all and (min-width: 481px) {
    ul.egmenu li:hover { background: mistyrose;  }
    ul.egmenu li:hover ul { display: block;  }
}