* {box-sizing: border-box;}

*,*:before,*:after {box-sizing:inherit;}

html {width: 100%;}

body 
{
	font-family: verdana, geneva, helvetica, sans-serif;
	font-weight: normal;
    font-size: 13px;
    /*background: #7f7f7f url("https://upperthames-butterflies.org.uk/images/bkg9.png") repeat-y top center;*/
    background-color: #777777;
    margin: 0px 0px 0px 0px;
    padding: 0px;  
}

.mycontainer 
{
  display: grid;
  grid-template-columns: repeat(16, [col-start] 1fr);
  gap: 0px;
}

.col-md-16 
{
  	flex: 0 0 100%;
  	max-width: 100%;
}
  
img.img-fluid 
{
  	max-width: 100%;
  	padding: 0px 0px 0px 0px;
  	text-align: center;
  	vertical-align: center;
}

img.rc2 {height: 65px; width: 65px;}

img.socialpadding {padding: 5px 10px 0px 10px;}

img.graph {vertical-align: bottom;}

img.family {vertical-align: middle;}

.p1 
{
  	text-align: justify; 
  	color: #000000; 
  	font-size: 13.5px; 
  	margin-top: 0px;
}

.p1c 
{
  	text-align: center; 
  	color: #000000; 
  	font-size: 13.5px; 
  	margin-top: 0px;
}

.p1cr {
  	text-align: center; 
  	color: red; 
  	font-size: 13.5px; 
  	margin-top: 0px;
}

.p1ci {
  	text-align: center; 
  	color: #000000; 
  	font-size: 13.5px; 
  	margin-top: 0px;
  	font-style: italic;
}

.p1w {
  	text-align: justify; 
  	color: #000000; 
  	font-size: 13.5px; 
  	margin-top: 0px;
  	margin-left: auto;
  	margin-right: auto;
  	max-width: 800px;
}

.p1x {
  	text-align: justify; 
  	color: #000000; 
  	font-size: 13.5px; 
  	margin: 2px auto 2px auto;
  	max-width: 900px;
}

.p1y {
  	text-align: justify; 
  	color: #000000; 
  	font-size: 13.5px; 
  	margin: 4px auto 2px auto;
  	max-width: 900px;
}

.p1-850 {
  	text-align: justify; 
  	color: #000000; 
  	font-size: 13.5px; 
  	margin-top: 0px;
  	margin-left: auto;
  	margin-right: auto;
  	max-width: 850px;
}

.p1-400 {
  	text-align: center; 
  	color: #000000; 
  	font-size: 13.5px; 
  	margin: 2px auto 2px auto;
  	max-width: 400px;
}

.p2 {
  	text-align: justify; 
  	color: #006666; 
  	font-size: 13.5px; 
  	margin-top: 0px;
}
  
.p3 {
  	text-align: center; 
  	color: #006666; 
  	font-size: 18px;
  	font-weight: bold;
  	padding: 0px;
}
  
.p4 {
  	text-align: center; 
  	color: #000000;
  	font-size: 9px;
}
  
.p5 {
  	text-align: left; 
  	color: #006666;
  	font-size: 14px;
  	font-style: italic;
  	font-weight: bold;
}

.p6 {
	text-align: center;
	font-size: 10px;
	font-weight: normal;
	color: grey;
	padding-top: 1px;
	padding-bottom: 0px;
}

.p7 {
	text-align: left;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	padding-top: 1px;
	padding-bottom: 3px;
}

.p8 {
	text-align: left;
	font-size: 9px;
	font-weight: normal;
	color: #000000;
	padding-top: 0px;
	padding-bottom: 0px;
}

.p9
{
	font-size: 10pt;
	font-weight: bold;
	color: #006666;
	text-align: left;
	padding-top: 0px;
}

.p10c {
  	text-align: center; 
  	font-weight: bold;
  	color: #006666; 
  	font-size: 14.5px; 
  	margin-top: 0px;
}

.p10cr {
  	text-align: center; 
  	font-weight: bold;
  	color: red; 
  	font-size: 14.5px; 
  	margin-top: 0px;
}

.p11 {
  	text-align: left; 
  	color: #006666; 
  	font-size: 14px;
  	font-weight: bold;
  	padding: 0px 2px 5px 2px;
}

.p12 {
	text-align: left;
	font-size: 11.5px;
	font-weight: normal;
	color: #000;
	padding-top: 1px;
	padding-bottom: 0px;
}

.p12b {
	text-align: left;
	font-size: 11.5px;
	font-weight: bold;
	color: #000;
	padding-top: 1px;
	padding-bottom: 0px;
}

.p13 {
  	text-align: center; 
  	font-weight: bold;
  	color: #006666; 
  	font-size: 13px; 
  	margin-top: 10px;
}

.p14 {
  	text-align: center; 
  	color: #000000;
  	font-size: 11px;
}

.p15 
{ 
	color: #00A653;
	text-decoration: underline; 
}

.p16
{
	color: #006666; 
	font-weight: normal;
}

.p17a
{
	text-align: left;
	font-size: 11px;
	font-weight: normal;
	color: #00A653;
}

.p17b
{
	text-align: left;
	font-size: 11px;
	font-weight: bold;
	color: #00A653;
}

.p17c
{
	text-align: left;
	font-size: 11px;
	font-weight: normal;
	color: red;
}

.p17d
{
	text-align: left;
	font-size: 11px;
	font-weight: bold;
	color: red;
}

.p18
{
	text-align: left;
	font-size: 14px;
	color: #006666;
	font-weight: bold;
}

.p19
{
	font-size: 13px;
	color: #000000;
	font-weight: bold;
}

.p20
{
	font-size: 6px;
	font-weight: normal;
	color: #000000;
}

.p21 
{
	color: red; 
	font-weight: bold;
}

/* main_index */

a.border1, a.border1:link 
{
  background-color: white;
  color: #006666;
  border: 2px solid #006666;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 2px;
  border-radius: 5px;
}

a.border2, a.border2:link 
{
  background-color: #006666;
  color: white;
  padding: 12px 2px 0px 2px;
  height: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 1px;
  border-radius: 5px;
}

a.border2:hover 
{
	background-color: white;
	color: #006666;
	border: 1px solid #006666;
	border-radius: 5px;
}

a.border3:link, a.border3:visited 
{
  background-color: white;
  color: #006666;
  border: 2px solid #006666;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 2px;
  width: 360px;
  border-radius: 5px;
}

a.border4, a.border4:link 
{
  background-color: white;
  color: #006666;
  border: 2px solid #006666;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 2px;
  border-radius: 5px;
  width: 80%;
}

a.border1:hover, a.border3:hover, a.border4:hover 
{
	background-color: #006666;
	color: white;
}

a.intext
{
	color: #006666 ; 
	text-decoration: underline; 
}

div.corners {
	border: 1px solid #888;	
	border-radius: 10px;	
	padding: 5px;
	background-color: #ffffff;	
	margin: 0px auto 4px auto;
	max-width: 850px;
}

div.corners850 {
	border: 1px solid #888;	
	border-radius: 10px;	
	padding: 5px;
	background-color: #ffffff;	
	margin: 0px auto 10px auto;
	max-width: 850px;
}

div.corners400 {
	border: 1px solid #888;	
	border-radius: 10px;	
	padding: 5px;
	background-color: #ffffff;	
	margin: 0px auto 10px auto;
	max-width: 400px;
}

div.corners400-noborder {
	border: 0px solid #888;	
	padding: 5px;
	background-color: #ffffff;	
	margin: 0px auto 10px auto;
	max-width: 400px;
}

div.corners850-066 {
	border: 1px solid #888;	
	border-radius: 10px;	
	padding: 5px;
	background-color: #006666;	
	margin: 0px auto 5px auto;
	max-width: 850px;
}

div.corners850-noborder {
	border: 0px solid #888;	
	padding: 5px;
	background-color: #ffffff;	
	margin: 0px auto 10px auto;
	max-width: 850px;
}

div.sightings {
	margin: 0px 0px 6px 0px;
}

div.centered {
	text-align: center;
}

div.centered1 {
	text-align: center;
	padding-top: 5px;
}

div.tablecontainer {overflow-x: auto;}

a.header 
{ 
	color: #ffffff; 
	text-decoration: none; 
	background-color: #006666;
	text-align: center;
	font-weight: bold;
}

.headersocials
{ 
	color: #ffffff; 
	text-decoration: none; 
	background-color: #006666;
	text-align: center;
	font-weight: bold;
	padding: 0px 0px 2px 0px;
	border-radius: 5px; 
}

a.event 
{ 
	color: #00A653;
	text-decoration: underline; 
}

a.eventred
{ 
	color: red;
	text-decoration: underline; 
}

.emailfnt
{
	font-size: 13px;
	color: blue;
	font-weight: normal;
	font-style: normal;
}

/*  used to obfuscate email addresses */

.emailfnt b 
{
	display: none;
}

a.smallu, a.smallu:link, a.smallu:visited, a.smallu:hover, a.smallu:active
{
	font-size: 11px;
	text-align: left;
	font-weight: normal;
	font-style: normal;
	color: #006666;
	padding-bottom: 3px;
	text-decoration: underline;
}

.caption {
    font-size: 17px;
    padding: 0.10em 0em 0.20em 0em;
    text-align: center;
	background-color: #ffffff;
	color: #006666;
	font-weight: bold;
}

.captionr {
    font-size: 17px;
    padding: 0.10em 0em 0.20em 0em;
    text-align: center;
	background-color: #ffffff;
	color: red;
	font-weight: bold;
}

.caption14 {
    font-size: 14px;
    padding: 0.10em 0em 0.20em 0em;
    text-align: center;
	background-color: #ffffff;
	color: #006666;
	font-weight: bold;
}

.caption14l {
    font-size: 14px;
    padding: 0.10em 0em 0.10em 0em;
    text-align: left;
	background-color: #ffffff;
	color: #006666;
	font-weight: bold;
}

.caption13l {
    font-size: 13px;
    padding: 0.10em 0em 0.10em 0em;
    text-align: left;
	background-color: #ffffff;
	color: #006666;
	font-weight: bold;
}

.maxw {
  max-width: 550px;
  margin: auto;
  border: 1px solid #333;
  background-color: #dedede;
  margin-bottom: 8px;
}

.maxw2 {
  max-width: 800px;
  margin: auto;
  background-color: #ffffff;
  margin-bottom: 5px;
  padding-top: 5px;
  display: flex;
}

.maxw2 select {
  background-color: white;
  color: blue;
  font-weight: bold;
  padding: 6px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.maxw3 {
  max-width: 950px;
  margin: auto;
  background-color: #ffffff;
  margin-bottom: 5px;
  padding-top: 5px;
  display: flex;
}

.maxw3 select {
  background-color: white;
  color: blue;
  font-weight: bold;
  padding: 6px;
  margin-right: 4px;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.maxw3 input[type=submit] {
  background-color: white;
  color: blue;
  font-weight: bold;
  padding: 3px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.maxw3 form {
  display: flex;
  flex-flow: row nowrap;
}

/* flying_tonight */

.maxw5 {
	background-color: #fff;
}

.maxw5 input[type=submit] {
  background-color: #fff;
  color: #006666;
  font-weight: bold;
  padding: 6px;
  margin: 0;
  border: 2px solid #006666;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

/* for secondary menubar in contact.pl */

.flexcontainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  background-color: #006666;
}

.flexcontainer div {
  background-color: #006666;
  margin: 5px;
  padding: 0px;
}

.flexcontainer a {
	color: white;
	text-decoration: none;
}

/* for sidebar items on home page */

.flexcontainer2 {
  display: flex;
  flex-flow: column wrap;
}

.flexcontainer2 div {
  background-color: #fff;
  margin: 1px;
  padding: 0px;
}

/* for home page images & butterflies.pl related species*/

.flexcontainer3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flexcontainer3 div {
  background-color: #fff;
  margin: 0px;
  padding: 2px;
}

/* for contacts */

.flexcontainer4 {
  display: flex;
  flex-flow: column wrap;
  border: 1px black solid;
  max-width: 450px;
  margin: auto;
  border-radius: 4px;
}

.flexcontainer4 div {
  background-color: #fff;
  margin: 0px;
  padding: 0px;
}

/* for publications */

.flexcontainer5 {
  display: flex;
  flex-flow: column wrap;
  border: none;
  max-width: 400px;
  margin: auto;
}

.flexcontainer5 div {
  background-color: #fff;
  margin: 0px;
  padding: 0px;
}

/* for news */

.flexcontainer6 {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: auto;
}

.flexcontainer6 div {
  font-size: 12.5px;
  margin: 0px;
  padding-bottom: 5px;
  border-style: solid solid none solid;
  border-width: 0.5px 0.5px 0px 0.5px;
}

.flexcontainer6 img {
  	height: auto; 
  	width: 70%;
  	padding: 5px;
}

/* butterfly_sightings */

.flexcontainer7 {
  display: flex;
  max-width: 950px;
  margin: auto;
}

.flexcontainer7 div {
  background-color: #fff;
  margin: 0px;
  padding: 1px;
}

/* for newsletter.pl*/

.gridcontainer {
  display: grid;
  grid-template-columns: repeat(3,auto);
  padding: 1px;
  gap: 3px;  
  justify-content: space-evenly;
}

.gridcontainer div {
  background-color: #fff;
  color: #000;
  padding: 5px;
  font-size: 11px;
  text-align: center;
}

/* for add_announcement.pl */

.gridcontainer1 {
  display: grid;
  grid-template-columns: repeat(5,auto);
  padding: 1px;
  gap: 1px;  
  justify-content: space-evenly;
}

.gridcontainer1 div 
{
  color: #000;
  padding: 5px;
  font-size: 11px;
  text-align: left;
  border-style: solid solid none solid;
  border-width: 0.5px 0.5px 0px 0.5px;
}

/* for events.pl */

.gridcontainer2 {
  display: grid;
  grid-template-columns: repeat(2,auto);
  padding: 1px;
  gap: 1px;  
  max-width: 650px;
  margin: auto;
}

.gridcontainer2 div, .gridcontainer2a div {
  color: #000;
  padding: 5px;
  font-size: 13px;
  text-align: left;
  border-style: solid solid none solid;
  border-width: 0.5px 0.5px 0px 0.5px;
  background-color: #fff;
}

.gridcontainer2a {
  display: grid;
  grid-template-columns: repeat(3,auto);
  padding: 1px;
  gap: 1px;  
  max-width: 650px;
  margin: auto;
}

.gridcontainer2b {
  display: grid;
  grid-template-columns: repeat(2,auto);
  background-color: #fff;
  padding: 1px;
  gap: 1px;  
  max-width: 650px;
  margin: auto;
}

.gridcontainer2b div {
  color: #000;
  padding: 5px;
  font-size: 13px;
  text-align: left;
  border-style: solid solid solid solid;
  border-width: 0.5px 0.5px 0.5px 0.5px;
  background-color: #fff;
}

/* for events.pl header*/

.gridcontainer3 {
  display: grid;
  grid-template-columns: repeat(3,auto);
  padding: 1px;
  gap: 3px;  
  max-width: 650px;
  margin: auto;
  justify-content: space-evenly;
}

.gridcontainer3 div {
  background-color: #fff;
  color: #000;
  padding: 5px;
  font-size: 11px;
  text-align: center;
}

.gridcontainer3 input[type=submit] {
  background-color: white;
  color: blue;
  font-weight: bold;
  padding: 6px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.gridcontainer3 select {
  background-color: white;
  color: blue;
  font-weight: bold;
  padding: 6px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

/* for calendar*/

.gridcontainer4 {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  padding: 5px;
  gap: 0px;  
  max-width: 900px;
  margin: auto;
  grid-template-rows: auto minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr);
}

.gridcontainer4 div {
  background-color: #fff;
  color: #000;
  padding: 5px;
  font-size: 12px;
  text-align: left;
  border: 1px solid #000;
}

.gridcontainer4 div.diva {
  background-color: #006666;
  color: #fff;
  padding: 5px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  border: 0px solid #000;
}

.gridcontainer5 {
  display: grid;
  grid-template-columns: 5% 90% 5%;
  padding: 5px;
  gap: 0px;  
  max-width: 900px;
  margin: auto;
}

.gridcontainer5 div {
  background-color: #fff;
  color: #000;
  padding: 5px;
  border: 0px solid #000;
  color: #006666;
}

/* for members day programme */

.gridcontainer6 {
  display: grid;
  grid-template-columns: repeat(3,auto);
  padding: 5px;
  gap: 0px;  
  max-width: 650px;
  margin: auto;
}

.gridcontainer6 div {
  color: #000;
  padding: 5px;
  border: 0.5px solid #000;
  background-color: #fff;
}

/* for online_events.pl */

.gridcontainer7 {
  display: grid;
  grid-template-columns: repeat(5,auto);
  padding: 1px;
  gap: 1px;  
  justify-content: space-evenly;
  max-width: 800px;
  margin: auto;
}

.gridcontainer7 div {
  padding: 5px;
  font-size: 13px;
  text-align: left;
  border-style: solid solid none solid;
  border-width: 0.5px 0.5px 0px 0.5px;
}

.gridcontainer8 {
  display: grid;
  grid-template-columns: repeat(4,auto);
  padding: 1px;
  gap: 1px;  
  justify-content: space-evenly;
  max-width: 800px;
  margin: auto;
}

.gridcontainer8 div {
  padding: 5px;
  font-size: 13px;
  text-align: left;
  border-style: solid solid none solid;
  border-width: 0.5px 0.5px 0px 0.5px;
}

/* for butterfly species */

.gridcontainer9 {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  padding: 5px;
  gap: 0px;  
  max-width: 850px;
  margin: auto;
}

.gridcontainer9 div {
  background-color: #fff;
  color: #000;
  padding: 1px;
  text-align: center;
  border: 0px solid #000;
}

.gridcontainer10 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 5px;
  gap: 0px;  
  max-width: 950px;
  margin: auto;
}

.gridcontainer10 div {
  background-color: #fff;
  color: #000;
  padding: 1px;
  text-align: center;
  border: 0px solid #000;
}

/* 10k square champs */

.gridcontainer11 {
  display: grid;
  grid-template-columns: repeat(3,33%);
  padding: 5px;
  gap: 5px;  
  max-width: 850px;
  margin: auto;
}

.gridcontainer11 div {
  background-color: #fff;
  color: #000;
  padding: 5px;
  text-align: left;
  font-size: 13.5px;
  border: 1px solid #000;
}

/* sites */

.gridcontainer12 {
  display: grid;
  grid-template-columns: 25% 75%;
  padding: 5px;
  gap: 5px;  
  max-width: 850px;
  margin: auto;
}

.gridcontainer12 div {
  background-color: #fff;
  color: #000;
  padding: 5px;
  text-align: left;
  font-size: 13.5px;
  border: 0.5px solid #000;
}

/* forms */

.my-responsive-form1 form {
  display: flex;
  flex-flow: wrap;
}

.my-responsive-form1 {
  max-width: 850px;
  width: 100%;
  margin: auto;
  border-radius: 10px;
  border: 1px solid #04AA6D;;
  background-color:  #f2f2f2;
  padding: 5px;
}

.my-responsive-form1 label {
  min-width: 45%;
  margin-bottom: 5px;
  padding-left: 10px;
}

.my-responsive-form1 input[type=file], input[type=text], input[type=number], input[type=date], input[type=time], input[type=url], input[type=email], input[type=password], select {
  min-width: 50%;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 3px;
}

.my-responsive-form1 input[type=checkbox] {
  margin-bottom: 5px;
  padding: 3px 3px 3px 0px;
  width: 20px;
}

.my-responsive-form1 textarea {
  min-width: 50%;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

.my-responsive-form1 input[type=submit] {
  min-width: 43%;
  background-color: #04AA6D;
  color: white;
  padding: 4px;
  margin: 5px;
  border: none;
  border-radius: 4px;
}

.my-responsive-form1 input[type=reset] {
  min-width: 43%;
  background-color: red;
  color: black;
  padding: 4px;
  margin: 4px;
  border: none;
  border-radius: 4px;
}

/* for login script */

.my-responsive-form2 {
  max-width: 400px;
  width: 100%;
  margin: auto;
  border-radius: 10px;
  border: 1px solid #04AA6D;;
  background-color:  #f2f2f2;
  padding: 5px;
}

.my-responsive-form2 input[type=text], input[type=password], input[type=file] {
  min-width: 95%;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px;
}
.my-responsive-form2 input[type=radio] {
  padding: 5px;
  margin: 10px;
  border: none;
}

.my-responsive-form2 input[type=submit] {
  min-width: 95%;
  background-color: #04AA6D;
  color: white;
  padding: 4px;
  margin: 5px;
  border: none;
}

span.simulate
{
	min-width: 51%;
	border: 1px solid #ccc;
  	border-radius: 4px;
  	margin-bottom: 5px;
}

/* butterfly_1st_sightings, flying_tonight, gardening, wcbs */

#resp-table {
	max-width: 100%;
	width: 95%;
	display: table;
	font-size: 13px;
}

#resp-table-header {
	display: table-header-group;
	background-color: #006666;
	font-weight: bold;
	color: #fff;
}

#resp-table-body {
	display: table-row-group;
	text-align: left;
}

.table-header-cell {
	display: table-cell;
	padding: 5px;
	text-align: left;
	width: 12%;
}

.table-header-cell-dt {
	display: table-cell;
	padding: 5px;
	text-align: left;
	width: 8%;
}

.table-header-cell-loc {
	display: table-cell;
	padding: 5px;
	text-align: left;
	width: 15%;
}

.table-header-cell-loc2 {
	display: table-cell;
	padding: 5px;
	text-align: left;
	width: 30%;
}

.resp-table-row {
	display: table-row;
}

.table-body-cell {
	display: table-cell;
	border: 0.5px solid #ccc;
	padding: 5px;
}

/* flying_tonight */

#table2 {
	max-width: 100%;
	width: 100%;
	display: table;
	font-size: 12px;
	text-align: center;
	overflow-x: auto;
}

#table2-header {
	display: table-header-group;
	background-color: #006666;
	font-weight: bold;
	color: #fff;
}

#table2-body {
	display: table-row-group;
	text-align: center;
}

.table2-header-cell {
	display: table-cell;
	padding: 5px;
	text-align: center;
	width: 12%;
}

.table2-header-cell-dt {
	display: table-cell;
	padding: 5px;
	text-align: center;
	width: 5%;
}

.table2-header-cell-loc {
	display: table-cell;
	padding: 5px;
	text-align: center;
	width: 20%;
}

.table2-body-cell {
	display: table-cell;
	border: 0.5px solid #ccc;
	padding: 5px;
}

.table2-body-cell-bottom-center {
	display: table-cell;
	border: 0px solid #ccc;
	padding: 5px;
	width: 33%;
	text-align: center;
}

.table2-body-cell-bottom-left {
	display: table-cell;
	border: 0px solid #ccc;
	padding: 5px;
	width: 33%;
	text-align: left;
}

.table2-body-cell-bottom-right {
	display: table-cell;
	border: 0px solid #ccc;
	padding: 5px;
	width: 33%;
	text-align: right;
}

.table2-body-cell-b {
	display: table-cell;
	border: 0.5px solid #ccc;
	padding: 5px;
	font-weight: bold;
}

.table2-body-cell-t {
	display: table-cell;
	border: 0.5px solid #ccc;
	padding-top: 26px;
	vertical-align: top;
}

/* flying_tonight */

#table3 {
	max-width: 100%;
	width: 98%;
	display: table;
	border: 1px solid #ccc;
}

#table3-body {
	display: table-row-group;
}

.table3-body-cell {
	display: table-cell;
	border: 0px solid #ccc;
	padding: 0px;
	text-align: center;
	vertical-align: bottom;
}

/* 10km_champions.pl */

#table4 {
	max-width: 100%;
	width: 95%;
	display: table;
	border: 0px solid #ccc;
	padding: 0px 10px 0px 10px;
	border-spacing: 0px;
}

#table4-body {
	display: table-row-group;
}

.table4-body-cell {
	display: table-cell;
	border: 0px solid #ccc;
	padding: 0px;
	text-align: center;
	vertical-align: center;
}

#indent 
{
	padding-left: 2em;
}

.bold {font-weight: bold;}
.italic {font-style : italic;}
.black {color: #000000; font-size: 13.5px; font-weight: normal;}
.blue {color: #0000FF;}
.white {color: #FFFFFF;}
.grey {color: #999999;}
.boldblue {color: #0000FF; font-weight: bold;}
.bold666 {color: #006666; font-weight: bold;}
.small666 {color: #006666; font-weight: normal; font-size: 12px; font-style: italic;}
.ital666 {color: #006666; font-style: italic; font-weight: bold;}
.courier {color: #000000; font-weight: normal; font-family: courier; font-size: 12.5px;}
.red {color: #FF0000;}
.red13 {color: #FF0000; font-size: 13.5px;}
.boldred {color: #FF0000; font-weight: bold;}
.boldred13 {color: #FF0000; font-weight: bold; font-size: 13.5px;}
.boldblack {color: #000000; font-weight: bold; font-size: 20px;}
.orange {color: #ff9900; font-weight: normal; font-size: 13.5px;}
.boldorange {color: #ff9900; font-weight: bold; font-size: 13.5px;}
.yellow {color: #ffff00; font-size: 13.5px;}
.apricot {color:#ff6666; font-size: 11px; font-weight: normal;}
.boldgreen {color: #33cc00; font-weight: bold;}
.green {color: #33cc00; font-weight: normal;}
.purple {color: #e333ff;}
.brown {color: #bf8040;}
.blk {color: #000000;}
.ornge {color: #ff9900;}

/* generates down arrow in header items */

.fa-caret-down {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/*#map1 {width: 275px; height: 275px;}*/
#map2 {width: 600px; height: 360px;}
#map3 {width: 600px; height: 600px;}
#map4 {width: 600px; height: 600px;}

/* Mobile first */

.mycontainer > * {

  border: 1px solid green;
  background-color: #ffffff;
  padding: 4px;
  grid-column: col-start / span 16;
}

/* If screen is at least 650px wide, do this instead (ie not a mobile in portrait mode) */

@media (min-width: 650px) {

  .mycontent {
    grid-column: col-start 3 / span 9;
    grid-row: 3;
    border-style: none none solid solid;
    border-width: 0px 0px 1px 1px;
    border-color: green;
    padding-bottom: 5px;
    overflow-x: auto;
  }
  
  .mysidebar {
    grid-column: col-start 12 / span 3;
    grid-row: 3;
    border-color: green;
    border-style: none solid solid solid;
    border-width: 0px 1px 1px 0.5px;
    padding-bottom: 5px;
  }
  
  .mycontent2 {
    grid-column: col-start 3 / span 12;
    grid-row: 3;
    border-color: green;
    border-style: none solid solid solid;
    border-width: 1px;
    padding-bottom: 5px;
    overflow-x: auto;
  }
  
   .mynavbar {
    grid-column: col-start 3 / span 12;
    grid-row: 2;
    border-style: none;
    border: 0;
    background-color: #006666;
    font-size: 12px;
  }
  
  .mynavbar2 {
    grid-column: col-start 3 / span 12;
    border-style: none;
    border: 0;
	padding: 0;
    background-color: #006666;
    display: flex;
    font-size: 12px;
  }
  
  .myfooter {
    grid-column: col-start 3 / span 12;
    border-style: none solid solid;
    border-width: 0px 1px 1px 1px;
    border-color: green;
    padding: 1px;
  }
  
  .myhead {
    grid-column: col-start 3 / span 12;
    padding: 0px;
    border-style: none;
  }
  
  .gridcontainer {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    background-color: #fff;
    padding: 1px;
    gap: 3px;  
    justify-content: space-evenly;
  }
} 

/* for mobiles in landscape mode */

@media (min-width: 650px) and (max-width: 1200px) and (orientation: landscape) {

.gridcontainer {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    background-color: #fff;
    padding: 1px;
    gap: 3px;  
    justify-content: space-evenly;
  } 
  
.gridcontainer9 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  background-color: #fff;
  padding: 5px;
  gap: 0px;  
  max-width: 950px;
  margin: auto;
}

.p4a {
  	text-align: center; 
  	color: #000000;
  	font-size: 9px;
  	padding-left: 0px;
}

.maxw3 {
  max-width: 96%;
  width: 100%;
  margin: auto;
  background-color: #ffffff;
  margin-bottom: 5px;
  padding-top: 5px;
  display: flex;
  flex-flow: row wrap;
}

.maxw3 select {
  background-color: white;
  min-width: 96%;
  color: blue;
  font-weight: bold;
  padding: 4px;
  margin-right: 3px;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 13px;
}

.maxw3 form {
  display: flex;
  flex-flow: row wrap;
  margin-right: 14px;
}
  
}

/* don't display gridcontainer3 on a small screen in portrait orientation*/

@media (max-width: 650px) and (orientation: portrait) {
	
.gridcontainer3 {display: none!important;}
	
.table-header-cell {
	display: table-cell;
	padding: 5px;
	text-align: left;
}
	
.table-header-cell-dt {
	display: table-cell;
	padding: 5px;
	text-align: left;
}

.table-header-cell-loc {
	display: table-cell;
	padding: 5px;
	text-align: left;
}

.table-header-cell-loc2 {
	display: table-cell;
	padding: 5px;
	text-align: left;
}
	
.my-responsive-form1 {
  max-width: 96%;
  width: 100%;
  margin: auto;
  border: 0.5px solid #04AA6D;;
  background-color:  #f2f2f2;
  padding: 5px;
}

.my-responsive-form1 input[type=text], input[type=date], input[type=email], select {
  min-width: 96%;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  padding: 3px;
}

.my-responsive-form1 file {
  min-width: 96%;
  margin-bottom: 10px;
  padding: 3px;
}

.my-responsive-form1 textarea {
  min-width: 96%;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}

.my-responsive-form1 input[type=submit] {
  width: 96%;
  background-color: #04AA6D;
  color: white;
  padding: 4px;
  margin: 5px 0;
  border: none;
}

.my-responsive-form1 input[type=reset] {
  width: 96%;
  background-color: red;
  color: black;
  padding: 4px;
  margin: 5px 0;
  border: none;
  }

.my-responsive-form1 label {
  min-width: 96%;
  margin-bottom: 5px;
  font-weight: bold;
}

.gridcontainer9 {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  background-color: #fff;
  padding: 5px;
  gap: 0px;  
  max-width: 700px;
  margin: auto;
}

.gridcontainer11 {
  display: grid;
  grid-template-columns: repeat(3,33%);
  background-color: #fff;
  padding: 5px;
  gap: 1px;  
  max-width: 700px;
  margin: auto;
}

.p4a {
  	text-align: center; 
  	color: #000000;
  	font-size: 9px;
  	padding-left: 0px;
}

.maxw3 {
  max-width: 96%;
  width: 100%;
  margin: auto;
  background-color: #ffffff;
  margin-bottom: 5px;
  padding-top: 5px;
  display: flex;
  flex-flow: row wrap;
}

.maxw3 select {
  background-color: white;
  min-width: 96%;
  color: blue;
  font-weight: bold;
  padding: 4px;
  margin-right: 3px;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 13px;
}

.maxw3 input[type=submit] {
  background-color: white;
  color: blue;
  font-weight: bold;
  padding: 3px;
  margin-top: 2px;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 13px;
}

.maxw3 form {
  display: flex;
  flex-flow: row wrap;
  margin-right: 14px;
}

.table2-body-cell-t {
	display: table-cell;
	border: 0.5px solid #ccc;
	padding-top: 5px;
	vertical-align: top;
}

.gridcontainer12 {
  display: grid;
  grid-template-columns: 100%;
  padding: 5px;
  gap: 5px;  
  max-width: 700px;
  margin: auto;
}

#map2 {width: 335px; height: 295px; overflow: hidden;}
#map3 {width: 335px; height: 335px; overflow: hidden;}
#map4 {width: 335px; height: 335px; overflow: hidden;}


}