body,html {font-family:Arial;  font-size:16px }
.nm {width:205px; }
div {max-width:1200px;}
h1 {color:black; margin-top:0px; margin-bottom:0px; }
td,.num {font-size:16px}
div.p {margin-top:10px; margin-bottom:6px;  max-width:800px; float:left}
p     {margin-top:10px; margin-bottom:6px;  max-width:800px; background:white; }
div.z {margin-top:10px; margin-bottom:6px;  max-width:800px; float:left}

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    zbackground-color:#ffffaa;
    color: #111;
    font-size: 100%;
    font-family: Arial;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

@media only screen and (max-width: 1100px) {
  body {zbackground-color:salmon; max-width:100%;  font-size:16px}
  div {max-width:1050px;}
  .nm {width:205px; }
  td, .num {font-size:16px}
}

@media only screen and (max-width: 1000px) {
  body {zbackground-color:violet; max-width:100%;  font-size:15px}
  div {max-width:980px;}
  .nm {width:200px; }
  td, .num {font-size:15px}
}

@media only screen and (max-width: 900px) {
  body {zbackground-color:magenta; max-width:100%;  font-size:14px}
  div {max-width:880px;}
  .nm {width:205px; }
  td, .num {font-size:14px}
}

@media only screen and (max-width: 800px) {
  body {zbackground-color:yellow; max-width:100%;  font-size:13px}
  div {max-width:780px;}
  .nm {width:200px; }
  td, .num {font-size:13px}
}

@media only screen and (max-width: 700px) {
  body {zbackground-color:lightgreen; max-width:100%; font-size:13px }
  div {max-width:680px;}
  .nm {width:190px; }
  td, .num {font-size:13px}
}

@media only screen and (max-width: 600px) {
  body {zbackground-color:beige; max-width:100%; font-size:13px }
  div {max-width:580px;}
  .nm {width:180px; }  
  td, .num {font-size:13px}
}

@media only screen and (max-width: 580px) {
  body {zbackground-color:cyan; max-width:100%; font-size:13px }
  div {max-width:560px;}
  .nm {width:170px; }  
  td, .num {font-size:13px}
}

@media only screen and (max-width: 560px) {
  body {zbackground-color:lightblue; max-width:100%; font-size:13px }
  div {max-width:550px;}
  .nm {width:160px; }  
  td, .num {font-size:13px}
}

@media only screen and (max-width: 550px) {
  body {zbackground-color:orange; max-width:100%; font-size:12px }
  div {max-width:540px;}
  .nm {width:150px; }  
  td, .num {font-size:12px}
}

@media only screen and (max-width: 540px) {
  body {zbackground-color:lemon; max-width:100%; font-size:12px }
  div {max-width:530px;}
  .nm {width:150px; }  
  td, .num {font-size:12px}
}

@media only screen and (max-width: 520px) {
  body {zbackground-color:pink; max-width:100%; font-size:12px }
  div {max-width:500px;}
  .nm {width:125px; }  
  td, .num {font-size:12px}
}

@media only screen and (max-width: 500px) {
  body {zbackground-color:lemon; max-width:100%; font-size:12px }
  div {max-width:490px;}
  .nm {width:120px; }  
  td, .num {font-size:12px}
}

@media only screen and (max-width: 480px) {
  body {zzbackground-color:lime; max-width:100%; font-size:10px }
  div {max-width:475px;}
  .nm {width:95px; }
  td, .num {font-size:10px}
}

div.p {margin-top:10px; margin-bottom:6px; background:white; max-width:800px}
div.z {margin-top:10px; margin-bottom:6px; background:white; max-width:800px}
p {margin-top:10px; margin-bottom:6px; max-width:800px}