body, html {
  height: 100%;
  margin: 0;
}

body {
  background-image: url("imag/cloud_clear.gif"); background-attachment: fixed;
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body:hover {
  background-image: url("imag/cloud_cloudy.jpg"); background-attachment: fixed;
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#background { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;}
#background img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; }
.tlc	{ position: fixed; top: 0; left: 0; width: 20px; height: 20px; background-image: url("imag/tlc.gif"); background-attachment: fixed;}
.t		{ position: fixed; top: 0; left: 20px; right: 20px; width: auto; height: 20px; background-image: url("imag/t.gif"); background-repeat: repeat-x; background-attachment: fixed;}
.trc	{ position: fixed; top: 0; right: 0; width: 20px; height: 20px; background-image: url("imag/trc.gif");}
.l		{ position: fixed; top: 20px; bottom: 20px; left: 0; width: 20px; height: auto; background-image: url("imag/l.gif"); background-attachment: fixed;}
.r		{ position: fixed; top: 20px; bottom: 20px; right: 0; width: 20px; height: auto; background-image: url("imag/r.gif");}
.blc	{ position: fixed; bottom: 0; left: 0; width: 20px; height: 20px; background-image: url("imag/blc.gif");}
.b		{ position: fixed; bottom: 0; left: 20px; right: 20px; width: auto; height: 20px; background-image: url("imag/b.gif"); background-repeat: repeat-x;}
.brc	{ position: fixed; bottom: 0; right: 0; width: 20px; height: 20px; background-image: url("imag/brc.gif");}

.navigation { position: fixed; top: 20px; left: 20px; width: calc(50% - 30px); height:96px;  background-attachment: fixed; overflow:auto; color: red; text-align: center;} 

.bottom_left { position: fixed; top: 117px; left: 21px; bottom: 21px; height: auto; width: calc(50% - 30px);overflow-y: scroll;} 

.m		{ position: fixed; top: 20px; bottom: 20px; left: calc(50% - 10px); width: 20px; height: auto; background-image: url("imag/m.gif");  background-repeat: repeat-y;}

.table {
 direction: ltr; 
 border: 0;
 width: 100%; 
 padding: 3px;
}

.deci, .u-a, .l-a, .u-r, .l-r, p, .li, input, label {
  margin-left : 15px;
  margin-right : 12px;
}

.deci {
  list-style-type: decimal;
}

.u-a {
  list-style-type: upper-alpha;
}

.l-a {
  list-style-type: lower-alpha;
}

.u-r {
  list-style-type: upper-roman;
}

.l-r {
  list-style-type: lower-roman;
}

.upper_right { 
position: fixed;  
top: 20px; 
right: 10px; 
width: calc(50% - 30px); 
bottom: 20px;
overflow-y: scroll;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  margin-left: 2px;
  margin-right : 2px;
}

td {
  padding: 5px;
}

p {
direction: ltr;
font-weight: bold;
text-align : left;
}

.nobla {
color : brown;
font-style : italic;
font-weight : normal;
}

.JsLastModified {
text-align : center;
color : teal;
}

.bottom_left, .upper_right {
direction: ltr;
font-weight : bold;
margin-left : 0px;
margin-right : 10px;
text-align : left;
color : black;
}

.h1 {
text-align: center;
color : #4B0082;
}

.h2 {
border : none;
margin-left : auto;
margin-right : auto;
text-align : center;
color : #006400;
}

.h3 {
border : none;
margin-left : 40px;
margin-right : 12px;
text-align : left;
color : #008700;
text-decoration: underline double;
}

.h4 {
border : none;
margin-left : 15px;
margin-right : 12px;
text-align : left;
color : maroon;
}

.note, .JsLastModified {
color : teal;
font-size : 10px;
}

p:hover, td:hover, span:hover, h2:hover, h3:hover, h4:hover, note:hover, .navigation {
background-color: silver;
}

.u {
  border-bottom: 2px solid black;
}