html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
}
body {
    background-color: lightblue;
	height:100%;
	display: grid;
	grid-template-columns: 40% 60%;
	grid-template-rows: 15% auto;
	grid-template-areas:
	"header header"
	"leftCol rightCol"
	"footer footer";
	grid-gap: 5px;
 }
 .header{
   grid-area: header;
 }
 .leftCol{
   grid-area: leftCol;
 }
 .rightCol{
   grid-area: rightCol;
 }
  .footer{
   grid-area: footer;
 }
.imgbtn {
  border:0;
  cursor:pointer;
  vertical-align:middle;
  padding: 5px 5px;
}
.btn {font-size:9pt;width:82px;height:26px;cursor:pointer;margin:5px 3px;background:silver}
.btnChar {font-size:12pt;width:60px;cursor:pointer;margin:2px;color:red;text-align:center;}
.bigBtnChar {font-size:18pt;width:60px;cursor:pointer;margin:2px;color:blue;vertical-align:middle;}
h4 {color:navy; font: bold 14pt Helvetica, sans-serif;padding:10px 0px;margin-bottom:10px}
h5 {color:navy; font: bold 12pt Helvetica, sans-serif;}
.signal {color:navy; font: 10pt Helvetica, sans-serif;text-align: center;font-weight: bold;margin-bottom:10px}
legend {color:green;font-weight: bold;font: 11pt Helvetica, sans-serif;}
td, a {font: normal 8pt Arial, Helvetica, sans-serif; padding:2px}
th {font: bold 9pt Arial, Helvetica, sans-serif;text-align: center; padding:2px}
div.centered {text-align: center;}	/* for aligne tables */
div.centered table {
	margin: 0 auto; 
	text-align: left;
}
table.left {text-align: left;}
.listaDati, .CDTable {margin-left:auto;margin-right:auto;}
.ListaDati td, th, .CDTable td, th {border: 1px solid #900;margin: 0 auto;}
.number {padding-right: 3px;text-align:right;}
.fixed {display: inline-block;width:100px}
tr:nth-child(2n+1) {background-color:#eee;}
tr:nth-child(2n+2) {background-color:#fff;}
.center {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
.bold {font-weight:bold}
.div0Height  {overflow:hidden;height:0px}
#js {margin: 0px auto;}
.topright {text-align:right;position:absolute;top:2px;right:0px;}
.PopUp, #PopUp {
      position: absolute;
	  text-align: left;
  	  background-image: url(../images/vertgauche.jpg);
	  z-index:10000;
	  border: outset olive;
	  visibility: hidden;
	  overflow:auto;
      opacity: 0.9;
	  min-width: 300px;
}
#PopUp #texte {padding: 20px;}
.bar {
  text-indent: 5px;
  padding-top:5px;
  background-color: #008080;
  color: #ffffff;
  width: 100%;
  cursor: move;
  font-weight: bold;
  height: 28px;
}
body { 
  background-color: #6cb5a9;
  font: normal 10pt Arial, Helvetica, sans-serif
}
label {cursor:pointer;} 

input[type=checkbox] {
    vertical-align: -2px;
    margin: 5px;
    padding: 5px;
}
.Logo {
	  position: relative;
	  font-size:18pt;
	  color:green;
}
.download {
  color: black;
  border: 2px solid green;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.download:hover {
  background-color: green;
  color: white;
}
#Header {
      text-align: center;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height:15%;
}
#Right {
  position: absolute;
  width: 65%;
  height: 80%;
  top:15%;
  overflow:auto;
  border: 5px;
  right: 0px;
  padding: 5px 15px 0px 0px;
}
#Left {
      position: absolute;
      text-align: left;
      left: 0px;
      top:15%;
      height:80%;
      width: 35%;
 	  border: 0px;
      padding: 0px 5px;
}
.footer {
	position: absolute;
	text-align:right;
	background-color: #60a99d;
	height: 5%;
	top:95%;
	width: 100%;
}