.zoombutton
{
    background-color: #1c87c9;
    border: none;
    border-radius: 15px 15px 15px 15px;
    color: white;
    padding: 20px 34px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 150%;
    margin: 4px 2px;
    cursor: pointer;
}
.boxbutton
{
    background-color: lightyellow;
    font-size: 12pt;
    border: 1px black solid;
    padding: 3px 10px;
    margin: 0px;
    text-align: center;
    text-decoration: none;
}

.boxcontent {
    width: 97%;
    padding: 5px 10px;       /*5px 10px;*/
    background-color: lightyellow;
    margin: 0px;
    border: 1px black solid;
}

#topmenu {
  /*  position: fixed; */
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 1000;
    overflow: hidden;
    background-color: lightyellow;
    border-bottom: black 1px solid;
}
a.mainmenu
{
    background-color: #eeeeee;
    color: #000000;
    padding: 5px 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 3px;
    margin-bottom: 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight:normal;
    border: 1px solid black;
    border-radius: 10px 10px 0px 0px;
    font-size: initial;
}
a.mainmenu:hover
{
    background-color: #dddddd;
    color: black;
}
a.current
{
    background-color: lightblue;
    color: black;
}
/* hr.dotted{border: 5px dotted black;} */

hr.mythick{border: 2px solid black;}

div.mytitle{
    font-weight:bold;
    font-size:130%;
    margin-top:-6px;
    margin-left:-12px;
    display:table;
    background-color: lightblue;
    color:black;
    padding:10px;    
}

body{background-color:white}
h3{color:black;font-size:180%}
h3{color:darkgreen;font-size:140%}

dl {border: 3px double #ccc; padding: 0.5em;}

dl.mylinks {border: 1px  #ccc; padding: 0.5em;}

dt {float: left;
    clear: left;
    width: 120px;
    text-align: right;
    font-weight: bold;
    color: black;
   }

.mylinks dt {float: left;
    clear: left;
    width: 120px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px black solid;
    background-color: lightyellow;
    color: black;
   }
dt::after {content: ":";}

.mylinks dt::after {content: " ";}

dd {margin: 0 0 0 130px; padding: 0 0 0.5em 0;}

dd.mylinks {margin: 0 0 0 130px; padding: 0 0 1em 0;}

dt.wide {float: left;
    clear: left;
    width: 145px;
    text-align: right;
    font-weight: bold;
    color: black;
   }
dd.wide {margin: 0 0 0 155px; padding: 0 0 0.5em 0;}
            
ul{margin:15px}
ul li{padding: 0 0 0.5em 0;}
ol{margin:15px}
ol li{padding: 0 0 0.5em 0;}
      
table {border-collapse: collapse; margin-left:15pt; margin-top:10pt;}
th, td {text-align:left; padding:6px; border-bottom:1px solid; border-top:1px solid;}
th{text-align:center; font-weight:bold;}
.C{text-align:center;}
.L{text-align:left;vertical-align:text-top; padding-left:1em;}

hr{height:0px;border: 1px solid green;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: none; /* 2px solid black;  /*#ccc;*/
  background-color: white; /*#f1f1f1;*/
  border-bottom: 0px green solid;
}

/* Style the buttons inside the tab */
.tab button {
   background-color: inherit;
  float: left;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-top: 2px solid black;
  border-right: 2px solid black;
  outline: none; 
  cursor: pointer;
  padding: 6px 10px;
  transition: 1s;
  font-size: 19px;
  margin-right:5px;
  margin-bottom:4px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: lightblue; /*#ddd;*/
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: lightblue;  /*#ccc;*/
    color: black;
 /*   border-bottom: 2px solid yellow; */
    font-weight: bold;
}

/* Style the tab content */
.tabcontent {
    display: none;
  padding: 6px 12px;
  border: 2px solid black;
  animation: fadeEffect .5s;
}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}