* {box-sizing: border-box;}
html{margin:0;padding:0;height:100%;}
body {font-family:arial,helvetica,sans-serif;font-size:10px;color:black;background-color:white;margin:0;padding:5px;height:100%;}

h1 {font-size:18pt;color:#000000;font-family:"Arial";font-weight:bold;padding:5px;margin:0;}
h2 {font-size:16pt;color:#0000ff;font-family:"Arial";font-weight:bold;padding:5px;margin:0}
h3 {font-size:14pt;color:#ff0000;font-family:"Arial";font-weight:bold;font-style:normal;}
p,table  {font-size:10pt;color:#000000;font-family:"Arial";font-weight:normal;font-style:normal;}
a  {font-size:12pt;font-family:"Arial";font-weight:normal;font-style:normal;}
table {border:1px solid black;}
td {min-width:50px;padding:2px 6px;}
.ctop1 {padding-right:20px;display:inline-block;}
.cfl {margin-right:20px;display:inline-block;}
.cflspace {width:20px;display:inline-block;}
.cmenu {cursor:pointer;text-decoration: underline;font-size:14px;padding-bottom:3px;}
.cmenu:hover{background-color: #ccc;}
.main_h1 {font-size:18px;font-weight:bold;color:#c00;padding-bottom: 5px;}
.main_h2 {font-size:16px;font-weight:bold;color:#080;padding-bottom: 5px;}
.maintext {font-size:14px;color:#008;padding-top:10px;padding-bottom: 10px;}
.piclabel {font-size:14px;padding-bottom:20px;}
.ctrh {color:white;background-color:#888;padding:20px;}
.ctr {background-color:white;}
.ctd {text-align:right;}
.labels {font-size:14px;}
#mimg {display:none;width:100%;}
#mvideo {display:none;}

.cmodal {display: none;position: fixed;z-index: 1;padding-top: 20px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
.modal-content {background-color: #fefefe;margin: auto;padding: 20px;border: 1px solid #888;width: 95%;height: 95%;}
.close {color: #aaa;float: right;font-size: 36px;font-weight: bold;}
.close:hover,
.close:focus {color: #000;text-decoration: none;cursor: pointer;}

@media only screen
{
  #all
  {
    width: auto;max-width:1000px;
  }
  .cmaindiv
  {
    display:grid;
    grid-template-columns: 250px auto;
    grid-template-areas:
     'head head'
     'top1 top1'
     'menu main';
  }
  .cmaindiv >div 
  {padding:5px;}

  #i_head {background-color:yellow;grid-area: head;}
  #i_top1 {background-color: orange;grid-area: top1;}
  #i_top2 {background-color: #cff;display:none;}
  #i_menu {background-color: #cfc;grid-area: menu;}
  #i_main {background-color: #eee;grid-area: main;}

}

@media only screen and (max-width: 600px)
{
  #all
  {
    width:auto;max-width: 600px;
  }

  .cmaindiv
  {
    display:grid;
    grid-template-columns: auto;
    grid-template-areas:
     'head'
     'top1'
     'top2'
     'main';
  }

  #i_head {background-color:yellow;grid-area: head;}
  #i_top1 {background-color: orange;grid-area: top1;}
  #i_top2 {background-color: #cff;grid-area: top2;display:block;}
  #i_menu {background-color: #cfc;display:none;}
  #i_main {background-color: #eee;grid-area: main;}
}