html {
  box-sizing: border-box;
  font-size: 100%;
}

body {
  background: #0e0e0e;
  color: #fff;
  font-family: sans-serif;
}

h1 {
  max-width: 37.25rem; 
  margin: 0 auto;
  padding: .5rem 0;
  text-align: center;
}

h2 {
  max-width: 37.25rem; 
  font-size: 1.3rem; /* may want to re-size headings later */
  /* margin: 0 auto; */
  padding: .5rem 0;
  /* text-align: center; */ /* not used for updates at this time */
}

h3 {
  font-size: 1rem;
  margin: 0 auto;
}

h4 {
  font-size: 1.1rem;
  font-family: monospace;
  margin: 0 auto;
}

.header {
  margin-top: .75rem;
}

p {
  line-height: 1.5;
  padding-bottom: 16px;
}

section {
  max-width: 46rem;
  margin: 0 auto;
  border: 0;
}

.divider {
  width: 85%;
  border-top: 1px solid #0099CC;
  margin-top: 3rem;
}

/* Table Styles */
/*Responsive table*/
table {
  width: 100%;
  border-collapse: collapse;
  background: #3355aa;
  color: #f3f3f3;
  border-radius: 8px; /* Can't make this work... */
  margin-bottom: 2rem; /* space between elements */
}

/* alternate background for tables (or other elements) to create visual difference */
.alt_color_bg {
  background: #667788;
}

td.td_dwg_no {
  width: 20%; /* 1st column width */
}

td.td_dwg_desc {
  width: 80%; /* 2nd column width */
}

td.td_dwg_desc, td.category, td.td_desc {
  line-height: 2.3;
}

td, th {
  padding: 8px;
  text-align: left;
}

/* this causes rounded corners on table cells & not just the table itself in Chrome and Edge */
/* however, removing it causes ugly line breaks in links in narrower displays =( */
td {
  border-radius: 5px;
}

/* offset for headings to keep alignment of data */
.td_desc, .td_dwg_desc {
  padding-left: 0; /* CSS giveth, and CSS taketh away. This is dumb. I know. */
  text-align: left;
  text-transform: uppercase;
}

/* Zebra striping */
tr:nth-of-type(odd) {
  background: #335577;
}

th {
  background: #2c3e50;
  font-weight: bold;
}

.alt_th_bg {
  background: #7777ff;
}

td a {
  text-decoration: none;
  color: #fff;
  padding: 8px;
  border-radius: 5px;
}

.td_desc a:hover {
  background-color: #114466;
}

.td_dwg_desc a:hover {
  background-color: #114466;
}

.menu {
  padding: 1rem 0;
  text-align: center;
  background-color: #0e0e0e;
  border: rgb(255, 255, 255) solid 1px;
  border-radius: 8px;
  margin-top: .5rem;
}

.menu_noborder {
  padding: 1rem 0;
  text-align: center;
  background-color: #0e0e0e;
  border-radius: 8px;
  margin-top: .5rem;
}

.menu h6 { /* Menu blurb text */
  margin: 0;
}

.menu_item1 {
  display: inline-block;
  color: white;
  padding: 5px 8px;
  border-radius: 8px;
  background-color: #1a75ff; /* was #2196f3 */
  margin-top: 8px;
  font-size: 85%;
}

.menu_item2 {
  display: inline-block;
  color: white;
  padding: 5px 8px;
  border-radius: 8px;
  background-color: #00997a;
  margin-top: 8px;
  font-size: 80%;
}

.menu_item3 {
  display: inline-block;
  color: white;
  padding: 5px 8px;
  border-radius: 8px;
  background-color: #005791;
  margin-top: 8px;
  font-size: 80%;
}

.menu_link1 {
  color: white;
  text-decoration: none;
}

.menu_item1:hover {
  background-color: #0052cc;
}

.menu_link2 {
  color: white;
  text-decoration: none;
}

.menu_item2:hover {
  background-color: #006652;
}

.menu_link3 {
  color: white;
  text-decoration: none;
}

.menu_item3:hover {
  background-color: #0099ff;
}

/* Menu arrow button section */
/* The following code borrowed from https://codepen.io/vickyleong "Button with pointed end", and modified for my needs */
.arrow_button1 {
	text-align: center;
  white-space: nowrap;
  font-weight: bold;
	padding: 5px 8px;
  margin-top: 0;
  margin-right: 13px;
  margin-bottom: 0;
  margin-left: 0;
	background: #003380; /* was #3737ff */
	color: #FFFFFF;
  position: relative;
  border-radius: 8px 0 0 8px;
}

.arrow_button1::after {
  content: ""; /* empty content to display arrow "point" */
  position: absolute;
  border-color: transparent #3737FF;
  border-style: solid;
  border-width: 14px 0px 14px 14px; /* 3 borders make the arrow "point" */
  top: 0;
  left: 100%;
}

.arrow_button2 {
	text-align: center;
  white-space: nowrap;
  font-weight: bold;
	padding: 5px 8px;
  margin-top: 0;
  margin-right: 13px;
  margin-bottom: 0;
  margin-left: 0;
	background: #004d39; /* was #3737ff, #006652 */
	color: #FFFFFF;
  position: relative;
  border-radius: 8px 0 0 8px;
}

.arrow_button2::after {
  content: ""; /* empty content to display arrow "point" */
  position: absolute;
  border-color: transparent #008060; /* 3737ff; */
  border-style: solid;
  border-width: 14px 0px 14px 14px; /* 3 borders make the arrow "point" */
  top: 0;
  left: 100%;
}

.arrow_button3 {
	text-align: center;
  white-space: nowrap;
  font-weight: bold;
	padding: 5px 8px;
  margin-top: 0;
  margin-right: 13px;
  margin-bottom: 0;
  margin-left: 0;
	background: #0046c7; 
	color: #FFFFFF;
  position: relative;
  border-radius: 8px 0 0 8px;
}

.arrow_button3::after {
  content: ""; /* empty content to display arrow "point" */
  position: absolute;
  border-color: transparent #0046c7;
  border-style: solid;
  border-width: 14px 0px 14px 14px; /* 3 borders make the arrow "point" */
  top: 0;
  left: 100%;
}

.nav_item {
  display: inline-block;
  color: white;
  padding: 5px 8px;
  border-radius: 8px;
  background-color: #ff8000;
  margin-top: 8px;
}

.nav_item_link {
  color: white;
  text-decoration: none;
}

.nav_item:hover {
  background-color: #0052cc;
}

a.ext_link {
  text-decoration: none;
  color: #00FF99;
}

a.int_link {
  text-decoration: none;
  color: #00FF99;
}

.leftpad8px { /* just as silly as it sounds */
  padding-left: 8px;
}

.indent_1rem {
  text-indent: 1rem;
}

.banner_text {
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 1px 1px 2px black, 0 0 8px #00CC44, 0 0 5px #00CCFF, 3px 3px 4px #00CCFF;
  color: white;
  text-align: center;
  margin: 0 auto;
}

/* Always drawing attention to itself - highlighted text */
.highlight {
  font-weight: bolder;
  background-color: #3355aa;
  border-radius: 3px;
  padding: 2px;
}

/*
.about {
  for later use
}
*/

.text-center {
  text-align: center;
}

.intro {
  margin-top: 1.5rem;
}

.dedications {
  font-style: oblique;
  color: lightblue;
  margin-top: .75rem;
}

/* formatting for articles text */
.updates_article {
  color: #00b395;
}

/* change text color for article dates etc. to white */
.update_date_format {
  color: white;
}

.update_heading {
  color: #00ff99;
}

/* for verbal emphasis */
.emph {
  font-style: italic;
  font-weight: bold;
}

/* plain old italic text */
.italic_plain {
  font-style: italic;
}

/* for visual emphasis - not in tone */
.italic {
  font-style: italic;
  color: #f4f16c;
}

/* plain old bold text */
.bold {
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.lt_gray_text {
  color: #999999;
}

.lt_blue_text {
  color: #3d74db;
}

/* Bold, red "look at me" text */
.notice {
  font-weight: bold;
  color: #ff4444;
}

/* for general footnote-style text in small size font in light green */
.note {
  font-size: .75rem;
  font-weight: bold;
  color: #00ff99;
}

.footer {
  padding: 5px 0;
  text-align: center;
  background-color: #0e0e0e;
  color: #ffffff;
  font-size: .75rem;
  border-radius: 5px;
}

a.ifb {
  text-decoration: none;
  font-weight: bold;
  color: #00ff99;
  font-family: Arial;
}

/* cursor styling dammit! */
/* red circle with a line through it */
.nope_cursor {
  cursor: not-allowed;
}