body {
  font-family:Arial;
}


otitle {
  background-color: #000000;
  color: #88FFFF;
  font-family:Arial;
  font-size: 32px;
}

input.input_black {
  color: #000000;
  font-size:16px;
  font-family:Arial;
}



input.input_blue {
  color: #0000FF;
  font-size:16px;
  font-family:Arial;
}
<td style='padding: 4px;text-align: left;border:  1px solid black'>"
input.input_red {
  color: #FF0000;
  font-size:16px;
  font-family:Arial;
}


yellow {
  background-color: #000000;
  color: #FFFF00;
  font-family:Arial;
  font-size: 26px;
}

grey1 {
  color: #888888;
}

font_blue {
  color: #3333FF;
}

font_answer {
  color: #3333FF;
}



font_red {
  color: #FF3333;
}

font_dull_red{
  color: #ad271d;
}

font_dull_blue{
  color: #2b2d75;
}



red_dull_bold{
  color: #ad271d;
  font-weight:bold;
}

blue_dull_bold{
  color: #2b2d75;
  font-weight:bold;
}



monos {
  font-family:courier, monospace;
  }
  
maths {
  font-family:"Times New Roman" !important;
  font-style:italic !important;
  }
  
ital {
  font-style:italic !important;
  }


small_font{
  font-size:10px;
  font-family:Arial;
}

medium_font{
  font-size:16px;
  font-family:Arial;
}

font30{
  font-size:30px;
  font-family:Arial;
}


font28{
  font-size:28px;
  font-family:Arial;
}

font60{
  font-size:60px;
  font-family:Arial;
}

font20 {
  font-family:Arial;
  font-size: 20px;
}

font24 {
  font-family:Arial;
  font-size: 26px;
}

font16 {
  font-family:Arial;
  font-size: 16px !important;
}

font12 {
  font-family:Arial;
  font-size: 12px !important;
}


red_bold {
  background-color: #FFFFFF;
  color: #DD0000;
  font-weight:bold;
}

blue_bold {
  background-color: #FFFFFF;
  color: #0000DD;
  font-weight:bold;
}

green_bold {
  background-color: #FFFFFF;
  color: #008800;
  font-weight:bold;
}


red_bold_big {
  background-color: #FFFFFF;
  color: #DD0000;
  font-weight:bold;
  font-size:24px;
}


cfont_under {
      text-decoration: underline;
      text-underline-position: under;
      font-size:30px;
      font-family:Arial;
}


cfont_under_small {
    text-decoration: underline;
    text-underline-position: under;
}       
        

.eighty {  
  width:60%;
  margin:auto;
  }
  
.centy {  
  text-align:center;
}



table.table1 {
  border-collapse: collapse;
  border: 1px solid black;
  border-spacing: 4px;
}


table.equation1 {
  border-collapse: collapse;
  border: 0px solid black;
  border-spacing: 4px;
  font-size:16px
}


cfont.under {
            text-decoration: underline;
            text-underline-position: under;
        }
         

.table2 {
  border-collapse: collapse;
  border: 1px solid black;
  border-spacing: 4px;
  padding: 4px;
  text-align: center;
}


.td2 {
  padding: 4px;
  text-align: center;
  border: 1px solid black;
}



.td1 {
  padding: 4px;
  text-align: left;
  border: 1px solid black;
}

.tr1 {
  padding: 4px;
  text-align: left;
  border: 1px solid black;
}



.coolpadding{
  padding: 5px 5px;
}


.buttonbar{
   text-align:center;
}

.button {
  background-color:darkblue;
  color:yellow;
  border-radius: 20px;
  text-align:center;
  padding: 6px 6px;
  width:300px;
  font-size: 26px;
  margin-left:50px;
}








.tooltip{
  position:relative;
  display: inline;

}


.tooltip .tooltiptext {
  border: 1px solid black;
  visibility: hidden;
  background-color:white;
  color:black;
  border-radius: 5px;
  position:absolute;
  
  left: -50%;
  top:-5px;
  font-size: 20px;
  text-align:center;
  padding: 2px 2px;
  z-index:1;
  width:200px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}