* {
  box-sizing: border-box;
}

:root {
  --bg: #606060;
  --bg-hdr: #222222;
  --bg-nav: #CCCCCC;
  --bg-nav-tbl: #AAAAAA;
  --bg-nav-btn: #CCCCCC;
  --bg-nav-btn-act: #BBBBBB;
  --bg-nav-txt: black;
  --bg-nav-hov: #BDAE8F;
  --bg-submenu: #f5f5f5;
  --text: #000000;
  --text-tbl-dark: #111111;
  --text-tbl-light: #DDDDDD;
  --hover: #d0d0d0;
  --bg-tbl-hdr: #21534C;
  --bg-tbl-row-th: #E66C3C;
  --bg-tbl-row-hg: #7AB7C1;
  --bg-tbl-row-ds: #C7D4CA;
  --bg-tbl-row-da: #7AB7C1;
  --bg-tbl-btn: #C7D4CA;
  --bg-btn-large: #C7D4CA;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
  section {
	-webkit-flex-direction: column;
	flex-direction: column;
  }
}

@media (prefers-color-scheme: dark) {
	:root {
	  --bg: #303030;
	  --bg-hdr: #371F17;
	  --bg-nav: #5E3E2E;
	  --bg-nav-tbl: #371F17;
	  --bg-nav-btn: #5E3E2E;
	  --bg-nav-btn-act: #371F17;
	  --bg-nav-txt: DDDDDD;
	  --bg-nav-hov: #BDAE8F;
	  --bg-submenu: #f5f5f5;
	  --text: #000000;
	  --text-tbl-dark: #DDDDDD;
	  --text-tbl-light: #DDDDDD;
	  --hover: #d0d0d0;
	  --bg-tbl-hdr: #5E3E2E;
	  --bg-tbl-row-th: #936538;
	  --bg-tbl-row-hg: #5F6D6C;
	  --bg-tbl-row-ds: #6D6A46;
	  --bg-tbl-row-da: #5F6D6C;
	  --bg-tbl-btn: #6D6A46;
	  --bg-btn-large: #BDAE8F;
	}
}


body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text-tbl-light); 
  background-color: var(--bg);
}

/* Style the header - bg= #777 */
header {
  background-color: var(--bg-hdr);
  padding: 2px;
  text-align: center;
  font-size: 15px;
  color: white;
}

/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}

/* Style the navigation menu */
nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  background: var(--bg-nav);
  padding: 15px;
}

/* Style the table inside the menu */
.nav-table {
  boarder: 1px solid;
  border-collapse: separate;
  background-color: var(--bg-nav-tbl);
  padding: 5;
}

/* Style the table inside the menu */
.nav-th {
  boarder: 1px solid;
  background-color: var(--bg-nav-btn);
  border-radius: 6px;
  padding: 10px;
}

.nav-th a {
  color: var(--bg-nav-txt);
  padding: 10px;
  text-decoration: none;
}

.nav-th a:hover {
  background-color: var(--bg-nav-hov);
}

.nav-th-sel {
  boarder: 1px solid;
  color: var(--bg-nav-txt);
  background-color: var(--bg-nav-btn);
  border-radius: 6px;
  padding: 10px;
}

.nav-th-sel a {
  color: var(--bg-nav-txt);
  padding: 10px;
}

/* Style the list inside the menu NOT RELEVANT */
nav ul {
  list-style-type: none;
  padding: 0;
}

/* Button and related styles */
.site-btn {
	width: 160px; 
	height: 30px; 
	background-color: var(--bg-btn-large); 
	margin: 2px
}
.large-btn {
	width: 200px; 
	height: 35px; 
	background-color: var(--bg-btn-large);
	margin: 2px
}

.sel-area {
	width: 400px;
	color: var(--text-tbl-light);
	background-color: var(--bg);
}

/* Measurement data table styles */
.mmrow-hdr	{color: var(--text-tbl-light); background-color: var(--bg-tbl-hdr);}
.mmrow-th	{color: var(--text-tbl-dark); background-color: var(--bg-tbl-row-th);}
.mmrow-hg	{color: var(--text-tbl-dark); background-color: var(--bg-tbl-row-hg);}
.mmrow-ds	{color: var(--text-tbl-dark); background-color: var(--bg-tbl-row-ds);}
.mmrow-da	{color: var(--text-tbl-dark); background-color: var(--bg-tbl-row-da);}
.mmrow-btn	{color: var(--text-tbl-dark); background-color: var(--bg-tbl-btn);}

/* Event data table styles */
.evrow-tbl	{color: var(--text-tbl-light); background-color: var(--bg-tbl);}
.evrow-hdr	{color: var(--text-tbl-light); background-color: var(--bg-tbl-hdr);}
.evrow-da	{color: var(--text-tbl-dark); background-color: var(--bg-tbl-row-da);}
.evrow-btn	{color: var(--text-tbl-dark); background-color: var(--bg-tbl-btn);}


/* Old table styles */
.td_right {text-align: right;}
.genrow-hdr { 
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	font-weight: bold;
	font-style : normal;
	background-color: rgb(176,209,226);
	color : #000000;
	text-align : left;
}

/* Style the content */
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}

/* Style the footer */
footer {
  background-color: var(--bg-hdr);
  padding: 1px;
  text-align: center;
  color: var(--text-tbl-light);
}