body
{
background-color:#f2f2f2;
background-repeat:no-repeat;
background-position:center top;
}


a 
{ text-decoration:none; color:#01245b;}

a:link 
{color:#006973;}   

a:visited 
{color:#006973;}
  
.body
{
background-color:ffffff;
position:relative;
}

h1
{
font-family:"Copperplate Gothic Light";
}

.homelist ul 
{
  margin: 10; 
  padding: 10;
}
.homelist li
{
  list-style: none;
  text-align: center;
}

.aboutlist ul {margin: 10; padding: 10;}

.aboutlist ll
{list-style-type: square;}

#header
{
text-align:left;
color: #006973 ;
font-size:1em;
background-color:#ffffff;
font-family: 'Open Sans', sans-serif;
padding-bottom:10px;
}

#menubar
{
padding-top:10px;
text-align:center;
}

.menu
{
color:#006973;
font-family: 'Open Sans', sans-serif;
font-size:1em;
padding-top:20px;
padding-bottom:10px;
vertical-align:middle;
border-top: 1px;
border-color: #006973;
border-top-style: solid;
float:center;
}

#logo
{
color:#006973;
font-family: 'Open Sans', sans-serif;
font-size:1.5em;
font-weight:bold;
text-align:center;
border-top: 1px;
border-color: #006973;
border-top-style: solid;
padding-top:10px;
}

#footer
{
clear:both;
margin-left:auto;
margin-right:auto;
text-align:center;
color: #ffffff;

font-size:1em;
background-color:#006973;
font-family: 'Open Sans', sans-serif;
padding:10px;
}

#ribbon
{
background-color:#006973;
height: 10px;
}

.mission
{
font-family: 'Open Sans', sans-serif;
font-size: 1em;
text-align:left;
}

#content2
{
background-color:lightgray;
}

#homeimage
{
background-color:#ffffff;
padding-top:0;
}

.tricol
{
color:#01245b;
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
}

img
{
max-height: 100%;    
max-width: 100%;    
width: auto;
}



div.dropdown-menu
{
padding-left:10px;
width:200px;
margin:auto;
}

a.dropdown-item
{
color:#006973;
}

a.dropdown-toggle
{
color:#006973;
font-size:1.25em;
}

a.dropdown-item:hover
{
background-color:#fffdaf;
decoration: none;
}

#pagecontent
{
text-align:center;
vertical-align:middle;
font-size:1em;
min-height: 500px;
}

ol li
{
padding: 5px;
}

.infobox
{
display:none;
background-color:#00d2e6;
border-style:solid;
border-width:1px;
border-color:#000000;
border-radius: 25px;
padding:15px;
font-size:1em;
width:90%
}

.chart 
{
width:100%; height:400px
}

.req
{
color:red;
}

.vidtext
{
font-size:1em;
}

.vidlinks
{
font-size:1em;
}

.reg tr td
{
padding:5px;
}

.regleft
{
text-align:right;
padding-right:5px;
font-size:1em;
}

.regright
{
text-align:left;
padding-left:5px;
font-size:1em;
}

.biotext
{
font-size:1em;
}

.bio tr td{
vertical-align:top;
padding:10px;
padding-top:20px;
}

.admin tr td{
vertical-align:top;
padding:10px;
padding-top:20px;
text-align:center;
}

.statements
{
text-align:left;
/*padding-left:5px;*/
font-size:1em;
font-weight:bold;
font-style:italic;
}

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

.cimg {
object-fit: cover;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

@media screen and (max-width: 990px) {
.item {
height: 300px;
}
}