DIV.pid_body, DIV.pid_body P, DIV.pid_body TABLE { font-size: 11pt; }

tbody
{
	border-style: none;
}

.section-header
{
	font-weight: bold;
	font-size: 150%;
}

.sub-header
{
	font-weight: bold;
	font-size: 120%;
	font-style: italic;
}

.third-header
{
	font-weight: bold;
}

.fourth-header
{
	font-style: italic;
}

.trademark
{
}


.stat_table_title
{
}
.stat_table, .stat_header_cell, .stat_data_cell
{
	border-style: solid;
	border-color: #75a534;
}
.stat_table
{
	border-width: 0 1px 1px 0;
	border-spacing: 0;
}
.stat_header_cell, .stat_data_cell
{
	border-width: 1px 0 0 1px;
	padding: 0.35em;
}
.stat_header_row
{
	font-weight: bold;
	background-color: #8dc63f;
}
.stat_data_row_odd
{
	background-color: #edfbda;
}
.stat_data_row_even
{
	background-color: #d6f6aa;
}

tr.stat_data_row {
	background-color: #edfbda;
}
tr.stat_data_row:nth-child(even) {
	background-color: #d6f6aa;
}

.menu-desktop
{
	display: block;
}
.menu-handheld
{
	display: none;
}
.popup-content
{
}
.popup-title
{
	font-weight: bold;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

.modal-header {
  padding: 4px 4px 6px 4px;
  margin: 0;
  background-color: #77a63b;
  color: white;
}

.modal-title {
  padding: 0;
  text-align: center;
  font-weight: bold;
}

.modal-body {
	padding: 10px 10px;
}

/* The Close Button */
.modal-close {
  float: right;
  font-size: 150%;
  font-weight: bold;
  margin-right: 0.5em;
  color: black;
}

.modal-close:hover,
.modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media handheld, screen and (max-device-width: 480px), screen and (min-resolution: 250px)
{
	.contentwidth, .content { width: 95% }

	.menu-desktop
	{
		display: none;
	}
	.menu-handheld
	{
		display: block;
	}
	.popup-content
	{
		font-size: smaller;
	}
	.popup-title
	{
		font-weight: normal;
	}
}

/*
the glorious solution to lay out items into a responsive grid AND centering any odd items in the last row!

https://stackoverflow.com/questions/52129703/how-to-perfectly-center-grid-items-while-using-css-grid-auto-fit-property
*/
.presented-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem 5rem;

}

.presented-grid > div {
  text-align: center;
}

.sponsor-logo-header {
  border-bottom: 5px solid #f0f0f0;
  padding: 5px 0;
  margin: 10px 0;
}

.sponsor-1 {
	float: left;
	padding-right: 2em;
}

.sponsor-2 {
	float: right;
}

.sponsor-image {
	padding: 0 1em
}

.sponsor-image-platinum {
	padding: 0 3em
}

.event-grant {
  float:right;
  padding: 0 1em;
  text-align:center;
  font-weight:bold;
  font-size:larger
}

@media only screen and (max-width: 768px) and (min-width: 0px) {
	.sponsor-1, .sponsor-2, .event-grant {
		float: none;
		padding: 0
	}
	
	.sponsor-image, .sponsor-image-platinum {
		padding: 0
	}
}