body{
  width:100%;  
  font-family:  "Franklin Gothic Book","Gill Sans MT",  Arial, "Helvetica Neue"
          ,"Helvetica", Georgia, "SF Pro Text"
      ,"SF Pro Icons";
    color: rgb(70, 105, 73);
     
       margin:0px;     
} 

* {
  box-sizing: border-box;
}

@media print {
  body{ color:#000; background-color: #fff;}
  #loginmenu, #footer, #header {display:none;}
}
 
table {margin:0 auto; align-self: center; }
table, tr, th, td {border-collapse:collapse;border-spacing:0 ; }  
td {text-align: left; border-left-style: none; border: 1px solid #dedede; }
tr:nth-child(even) {background-color: white ;}
tr:nth-child(odd) {background-color: whitesmoke;}
 
.tdHeader{font-weight:normal; color:rgb(22, 65, 10);background-color:rgb(236, 240, 235);}



/* footer stuff:  https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ */
  
#page {   
position: relative;
min-height: 100vh;  
}

 
#header{ 
  width:100%;    
  text-align: center;     
  justify-content: center;

  border-bottom:  1px solid #dedede;
}
 
#main_menu{ 
  display:inline-block;
  margin: 0 auto; 
  background-color: inherit;
}


#content{    
   /* margin: 0 auto;  
   max-width:800px; 
   justify-content: center;      */
  text-align: center;  
  padding-bottom: 2.5rem;    /* Footer height */   
    
}
#footer{   
  border-top:  1px solid #dedede;
  padding-top: 5px;
  width:100%;
  height: 2.5rem;            /* Footer height */   
  position: absolute;
  bottom: 0; 
  color: gray ;
   
  text-align: center;
  font-weight:thin;
   
}

.ds{    
  margin: 1px; float:left; 
  padding:5px;
  border-radius: 25px;    
  width:170px;
  height:170px; 
  color:silver; 
}

.darkgreen{
  background-color:#003300; 
  
}
.green{
  background-color:#004d00;  
}
.darkblue{
  background-color:#00004d;  
}
.blue{
  background-color:#000066; 
  color:#33cc33;
}
.yellow{
  background-color:#e6e600; 
  color:rgb(68, 67, 67);
}
.darkred{
  background-color:#cc0000;   
}
.red{
  background-color:#ff0000; 
}
 






ul {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  overflow: hidden;
}
ul > li {
padding: 0.10em 0.5em;
}
 
label {
  display: block;
  float: left;
   width: 130px;  
  text-align: right;
  padding-right:10px;
  }

 
/* https://www.w3schools.com/css/tryit.asp?filename=trycss_form_responsive */
.container-login {
  margin:0 auto;  /* center all contents */
  max-width: 300px;
  border-radius: 5px;
  border: 1px solid #dedede;
  padding: 10px;
}

.container-logo {
    margin:0 auto;  /* center all contents */   
    border-radius: 5px;
    border: 1px solid #dedede;
    padding: 10px;
    background-color: rgb(190, 214, 190); 
  }

 
 
.row:after {
  content: "";
  display: table;
  clear: both;
}



input[type=text],input[type=number], select, textarea {
   width: 150px;  
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;   
}
 
input[type=text].list,   select.list  {
 width:90%;
  padding: 5px;
  border: 0;
  border-bottom: 1px solid #ccc;
  /* border-radius: 4px; */
   
}

 
 hr {border-top: 1px dotted rgb(207, 207, 216); height:0px; opacity: 0.10;}  

input[type=text].login, input[type=password].login   {
  width: 90%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;   
  margin: 2px 0;
}

input[type=submit].login,
input[type=reset].login
{
  border: 1px solid #dedede;
  background-color: inherit;     
  padding: 12px;
  margin: 2px 0;
  border-radius: 4px; 
  font-size:x-large;
  color: rgb(35, 35, 68);
  width:100%;
} 


input[type="file"] {
  display: none;
}
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 12px 12px;
  cursor: pointer;
  border-radius: 4px; 
  margin: 5px 0;
}
 

input[type=submit], 
input[type=reset]
{
  border: 1px solid #dedede;
  background-color: inherit;     
  padding: 12px;
  margin: 2px 0;
  border-radius: 4px; 
  font-size:x-large;
  color: green;
}
input[type=submit]:hover,
input[type=reset]:hover
{
  border: 1px solid #dedede;
  background-color: green;
  color:whitesmoke;
  padding: 12px;
  margin: 2px 0;
  border-radius: 4px; 
  font-size:x-large;
   
}
 
/* h2, h3, h4, h5, strong {color: green;} */

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

  
 
img {max-width:100%; height: auto;} 

/* search stuff */
 /* Formatting search box */
 .search-box{
  width: 200px; 
  position: relative;
  display: inline-block;
  font-size: 13px;
 
}
.search-box input[type="text"]{
  padding: 12px;
  border: 1px solid #CCCCCC;
  font-size: 17px;
  border-radius: 4px;  
}
.result{
  padding-top: 40px;
  position: absolute;        
  z-index: 999;
  top: 100%;
  left: 0;
}
.search-box input[type="text"], .result{
  width: 100%;
  box-sizing: border-box;
}
/* Formatting result items */
.result p{
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #CCCCCC;
  border-top: none;
  cursor: pointer;
}
.result p:hover{
   background:rgb(181, 214, 172); 
}

input[type=text].login, input[type=password].login   {
  width: 90%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;   
  margin: 2px 0;
}
fieldset {
  padding-left:10px;  border:1px; border-style:dotted;  
  border-color:rgb(49, 138, 49);
  border-radius:5px; 
 }

fieldset legend {
   background:white;
   color: rgb(150, 167, 150);
   padding: 2px 5px ;  
   border-radius: 5px;
   box-shadow: 0 0 0 2px rgb(228, 233, 220);
   margin-left: 20px;
    
}

/* menu stuff */
ul {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  overflow: hidden;
}

.ul {
    background-color: inherit;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: gray ; 
  text-align: center;
  /*padding: 10px 14px; */
   padding: 2px;

  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: white;
  color:gray ; 
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: rgb(66, 121, 41);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


#container-div {
  width: 100%;
  text-align: center;
  background-color: purple;
}

#inner-div-deepgreen {
  display: inline-block;
   width:200px;height:200px; color:silver;   
  border-radius: 25px;
  margin: 0 auto;
  padding:5px;
  background-color:#004d00;
}
#inner-div-yellow {
  display: inline-block;
  width:200px;height:200px;   
  border-radius: 25px;
  margin: 0 auto;
  padding:5px;
  background-color:#ffff00;
}
#inner-div-red {
  display: inline-block;
   width:200px;height:200px;   
  border-radius: 25px;
  margin: 0 auto;
  padding:5px;
  background-color:#cc0000;
  color: white;
}
#inner-div-blue {
  display: inline-block;
  width:200px;height:200px;   
  border-radius: 25px;
  margin: 0 auto;
  padding:5px;
  background-color:#00004d;
  color: silver;
} 

/* end of menu stuff */