*  { box-sizing: border-box; }

body {
    font-family:	Verdana;
    background-color:	#d7f1f0;
    margin:		1em;
}

table, th, td {
    border:		1px solid black;
    border-spacing:	0px;
    padding:		2px;
}

th {
    cursor:		pointer;
    background-color:	#8b4513;
    color:		#fefefe;
}

tr:nth-child(even) {
    background-color:	#e0f4fe;
    color:		#000000;
}

tr:nth-child(odd) {
    background-color:	#fee0e0;
    color:		#000000;
}

/* Define some classes */
.black { color:#000000; }
.blue  { color:#2018c8; }
.red   { color:#c81820; }
.ul    { text-decoration: underline; }
.f8    { font-size:	 	8pt; }
.f10   { font-size:		10pt; }
.f12   { font-size:		12pt; }
.f14   { font-size:		14pt; }
.f16   { font-size:		16pt; }
.f18   { font-size:		18pt; }
.f20   { font-size:		20pt; }
.f24   { font-size:		24pt; }
.f32   { font-size:		32pt; }
.b     { font-weight:		bold; }

.header { 
    border:		3px solid blue;
    padding:		15px;
    background-color:	gray;
}

.column {
    float:		left; 
    width:		240px;
    margin:		2px;
    padding-bottom:	2em;
}

.twocol {
    float:  left;
    width:  480px;
    margin: 1px;
    border: 1px solid rbg(75 70 74);
    column-count:	2;
    column-gap:		2px;
    column-rule-style:	solid;
    column-rule-width:	1px;
    column-rule-color:  black; 
}

.threecol {
    float:  left;
    width:  480px;
    margin: 1px;
    border: 1px solid rbg(75 70 74);
    column-count:	3;
    column-gap:		2px;
    column-rule-style:	solid;
    column-rule-width:	1px;
    column-rule-color:  black; 
}

.fourcol {
    float:  left;
    width:  480px;
    margin: 1px;
    border: 1px solid rbg(75 70 74);
    column-count:	4;
    column-gap:		2px;
    column-rule-style:	solid;
    column-rule-width:	1px;
    column-rule-color:  black; 
}


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

.footer {
  color:		black;
  background-color:	lightblue;
  clear:		left;
  text-align:		left;
  width:		100%;
  margin:		2em 0em;
}

/* Navbar Container */
.topnav {
    background-color:	blue;
    /* overflow:	none; */
}

.topnav a {
    float:		left;
    display:		block;
    color:		#f2f2f2;
    background-color:	blue;
    text-align:		left;
    padding:		14px 16px;
    text-decoration:	none;
}

.topnav a:hover {
    background-color:	#ddd;
    color:		blue;
}

.topnav a:active {
   background-color:	#4C50AC;
   color:		white;
}

/* Define The hamburger menu icon ID's */
#menu-icon {
  /* display:	hidden; */
  display:	none;
  width:	80px;
  height:	80px;
  background:	#f2f2f2 url(menu-icon.png) center;
}

#hdrimg {
   margin:		0;
   padding:		0;
   float:		left;
}

/* max-width ( Npx or less  ) */
@media screen and (max-width: 639px) {
  /* Responsive layout  makes cols vertical instead of horiz*/
  .column { width: 		100%; }

  #menu-icon {
    float:		right;
    display:		block;
  }
}