html, body {
  padding: 0; margin: 0;
  overflow: hidden;
  height:100%;
  width:100%;
  position:relative;
}
#content{
  position:relative;
  height:98%;
}
#legendcontcont {
  z-index:2;
  overflow: hidden;
  position:absolute;
  top:0;
  bottom:4px;
  display: flex;
  flex-flow: column;
}
#params {
  z-index:3;
  flex: 0 1 auto;
  background:rgba(255,255,255,0.5);
}
#legendcont {
  z-index:2;
  flex: 1 1 auto;
  overflow-y: hidden;
  overflow-x: hidden;
}

#legendcont:hover {
  overflow-y: scroll;
  background:rgba(255,255,255);
}

#legend {
  user-select: none;
  cursor:default;
  overflow-y: auto;
  top:12px;
  left:5px;
  border-spacing:0;
  line-height:12px;
  font-size:12px;
}
#params table td{
  vertical-align:middle;
}

#legendcont:hover tr:nth-child(4n+2), #legend:hover tr:nth-child(4n+1) {
  background: rgba(255,255,255);
}
#legendcont:hover tr:nth-child(4n+3), #legend:hover tr:nth-child(4n+4) {
  background: rgba(220,220,220);
  /*background:linear-gradient(to bottom, rgba(220,220,220), rgba(255,255,255) )*/
}
#legendcont th{
  background: rgba(200,200,200);
  border-left: 1px solid black;
}

#legendcont:hover td, #legendcont:hover th, #legendcont:hover tr {
  color:rgba(0,0,0,0.8);
  opacity: 1;
}

#legendcont:hover tr:hover td, #legendcont:hover tr:hover  th {
  color:rgba(0,0,0,1.0);
}

.max80{
  max-width:80px;
}

#legend td{
  color:rgba(0,0,0,0.1);
  opacity: 0.1;
}

#legend tr.sel td, #legend tr.sel td,#legend th {
  color:rgba(0,0,0,0.8);
  opacity: 1;
}

#legend tr.sel td{
  overflow: hidden;
}

#slidercont{
  z-index:3;
  width:96%;
  height:30px;
  position:absolute;
  bottom:0;
  right:2%;
  padding-left: 10px;
  padding-right: -10px;
}

#tslider{
  z-index:3;
  height:15px;
}

.p5Canvas{
  z-index:0;
  position:absolute;
  top:0;
  left:0;
}

.ui-widget-header {
  background:#3baae3 url(libraries/images/ui-bg_glass_50_3baae3_1x400.png) 50% 50% repeat-x;
}