/* link styles */

a:active { color: #00539F; text-decoration: underline; }
a:link    { color: #00539F; text-decoration: underline; }
a:visited { color: #00539F; text-decoration: underline; }
a:hover     { color: #257FC5; text-decoration: underline; }

a.menu:active { color: #000000; text-decoration: none;  font-weight: bold;}
a.menu:link    { color: #000000; text-decoration: none;  font-weight: bold;}
a.menu:visited { color: #000000; text-decoration: none;  font-weight: bold;}
a.menu:hover     { color: #257FC5; text-decoration: none;  font-weight: bold;}

a.submenu { color: #006800; text-decoration: none;}
a.submenu:active { color: #006800; text-decoration: none;}
a.submenu:link    { color: #006800; text-decoration: none;}
a.submenu:visited { color: #006800; text-decoration: none;}
a.submenu:hover     { color: #257FC5; text-decoration: none;}

a.footer:active { color: #ffffff; text-decoration: none; }
a.footer:link { color: #ffffff; text-decoration: none; }
a.footer:visited { color: #ffffff; text-decoration: none; }
a.footer:hover { color: #ffffff; text-decoration: underline; }

/* HEADINGS, TEXT CONTROL AND MISCELLANEOUS STUFF */
.contact {display: none;}

h1, h2, h3, h4, h5, h6 {
display: inline; 
font-weight: bold; 
font-family: allan;
color: #257FC5; 
}

h1  {font-size: 2.0em; font-style: italic;}
h2  {font-size: 1.5em; font-style: italic;}
h3  {font-size: 1.3em; font-style: italic;}
h4  {font-size: 1.1em; font-style: italic;}
h5  {font-size: 1.0em; font-style: italic;}
h6  {font-size: .8em; font-style: italic;}

li.space {margin: 20px 0;}


/*note: all navigation css is in cssmenu/style.css*/

/*body elements*/
.aligned-img {float: right; }/*this is for wrapping an image and making text wrap around it right aligned*/
.aligned-img {filter: drop-shadow(2px 2px 6px rgba(0,0,0,.5));}
.aligned-img2 {filter: drop-shadow(2px 2px 6px rgba(0,0,0,.5));}
.aligned-img2 {float: left; }/*this is for wrapping an image and making text wrap around it right aligned*/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

td.recordings {
border: 2px solid #257FC5; 
padding: 10px; 
width: 25%; 
text-align: center;}

hr.light{
border: 0;
height: 1px;
color: #257FC5;
background-color: #257FC5;
}

ul.list li {
white-space:normal;
list-style-image: url(images/checkbox.png);
}

body{
margin: 0px; 
margin-top: 10px;
padding: 0px;

background-color: #257FC5;
font-family: allan;
font-size: 1.3em;
}

.header img {
 width: 100%;
 height: auto;
 float:left;
}

.header, .container {
width: 100%; 
max-width: 960px;
}

.header{
margin: 0px auto;
padding: 0px;

}

.container {
margin: 0 auto;
padding: 0px;
background-color: #257FC5;

}

.columns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 5px 0;
}


.content {
height: 100%;
display:inline-block;
width: 92.1%;
max-width: 960px;
padding: 4%;
padding-bottom: 1%;
margin: 0 auto;
float: left;
background: #ffffff;
font-size: .85em;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
}

.footer {
padding: 2px 0px 2px 0px;
margin: 0px auto;
margin-left:  auto;
margin-right:  auto;
width: 100%;
max-width: 960px;
clear: both;
text-align: center;
font-size: .8em;
background: #ffffff;
}

.info-box {
color: #ffffff; 
width: 85%;
border: 1px solid black; 
background-color: #61AF73;
background-image: url(images/left-bg.jpg);
background-repeat: no-repeat;
padding: 7px;
margin-left:  auto;
margin-right:  auto;
}

/* BEGIN CSS for 2,3 and 4 column responsive nested divs */

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /*fraction*/
  text-align: left;
}

.row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*fraction*/
  text-align: center;
}

.row4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /*fraction*/
  text-align: center;
}

.column {
  border: 0px solid;
  text-align: center;
}

@media (max-width: 768px) { /*breakpoint*/

 
.column {
  border: 0px solid;
}


.row2 {
    grid-template-columns: none;
  }
  
 .row3 {
    grid-template-columns: none;
  }
  
  .row4 {
    grid-template-columns: none;
  }
}
/* END CSS for both 4 and 3 column responsive nested divs */

td.gallery {padding: 0px 3px 22px 3px;}
td.gallery img {max-width: 95%;} /*this keeps gallery images from floating off screen while still side by side */
.gallery img {max-width: 95%;} /*this keeps gallery images from floating off screen while still side by side within a div vs td */

/* media queries */

/*first we set things to change when secreen dis below 760px */
@media only screen and (max-width:760px) {
.contact {display: block; text-align: center; font-size: 1.2em; padding-top: 10px;}
.center {text-align: center; margin-left: auto; margin-right: auto;}
.header, .footer  {display: none;}/*hide the header and footr for phones to save space*/
.container {max-width: 100%;}

.content {
max-width: 90%;
padding: 5%;
float: none;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
}

.flex-container {
display: column;
}

.info-box { display: none;}/*hide the info box below the navigation menu for phones to save space*/
.aligned-img { text-align: center; float: none; margin-left:  auto; margin-right:  auto;} /*make the image float 
make side bar become vertically aligned under header*/
.aligned-img img {max-width: 90%;}
.home-img img {max-width: 90%;}
.home-img  {text-align: center; float: none; margin-left:  auto; margin-right:  auto; }
}

@media screen and (min-width:480px) and (max-width:760px) {
  .container, .header, .content, .footer {width: 95%;}

.info-box { display: none;}/*hide the info box below the navigation menu for phones to save space*/
}

/*finally we address just the smallest screen sizes*/


@media screen and (max-width:479px) {
.content, .sidebar {
float: none;
width: auto;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
}

.showlist {display: block;}
  
.flex-container {
display: column;
}

.form table, td, tr {
display: block;
padding-bottom: 2%;
}

td.recordings {
border: 0px solid #257FC5; 
padding: 2%; 
margin: 2%;
width: 95%; 
display: block;
text-align: justify;}

.contact {display: block; text-align: center; font-size: 1.2em; padding-top: 10px;}
.home-img img {max-width: 90%;}
.home-img  {max-width: 90%;}
}