body {
    /*min-width: 825px;*/
}

#topNav {
    box-shadow: inset 1px 2px 0px rgba(0, 0, 0, 0.18);
    min-height: 15px;
    width:100%;
    background: #007eba
}

#bottomNav {
    min-height: 15px;
    background: #45aa45;
    width: 100%;
    a { color: #000000; hover: #043962; }

}



/* UCD light blue: #007eba    not #1380B9 */
/* UCD dark blue:  #043962 */
/* UCD green: #45aa45 */
a {
  color:#007eba;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
  text-decoration: none;
}
a:hover { color:#043962; }


a.bottomanchor{ 
  color: white;
 }

a.bottomanchor:hover { color: #043962 } 


#menu { 
  width: 70%;
/*  min-width: 850px;*/
  font-family:'Open Sans', Helvetica, Arial, sans-serif;
  font-weight:normal;
  font-size: 16px;
  letter-spacing: -0.25px;
  line-height: 20px;
  padding:10px;
 }


@-webkit-keyframes bannerFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes bannerFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes bannerFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes bannerFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#mainimage{ 
  display: block;
  width: 1500px;
  height: 475px;
  margin-left: auto;
  margin-right: auto;
}



#banner {
  height: 475px;
  margin-left: auto;
  margin-right: auto;
}

#banner img {
  position:absolute;
}

#banner img {
  -webkit-animation-name: bannerFadeInOut;
  /* -webkit-timing-function: opacity 1s ease-in-out;*/
  webkit-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 24s;

  -moz-animation-name: bannerFadeInOut;
  -moz-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 24s;

  -o-animation-name: bannerFadeInOut;
  -o-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 24s;

  animation-name: bannerFadeInOut;
  timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 24s;
}


#banner img:nth-of-type(1) {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  animation-delay: 18s;
}
#banner img:nth-of-type(2) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}
#banner img:nth-of-type(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#banner img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}

/************ MIN-DEVICE-WIDTH imageoverlay catch  ************/
@media only screen and (min-device-width: 750px) {

#imageoverlaytxt { 
  position: absolute;
  width:33%; 
  left: 40;
  top: 200;
  border-radius: 5px;
  padding: 15px;
  background: #45aa45; 
  opacity: .9;
  color:white;
  font-family:'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 10pt;
 }

#imageoverlaytxt2 { 
  position: absolute;
  width:33%; 
  min-width:300px;
  left: 40;
  top: 200;
  border-radius: 5px;
  padding: 15px;
 /* background: #45aa45; */
  background: #007eba;
  opacity: .9;
  color:white;
  font-family:'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 10pt;
 }

#imageoverlaytxt3 { 
  position: absolute; 
  width:23%;
  left: 480;
  top: 240; 
  border-radius: 5px;
  padding: 15px;
  background: #45aa45;
  opacity: .9;
  color:white;
  font-family:'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 10pt;
 }


#imageoverlaytxt4 { 
  position: absolute; 
  width:33%; 
  left: 100;
  top: 180;
  border-radius: 5px;
  padding: 15px;
  background: #007eba;
  opacity: .9;
  color:white;
  font-family:'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 10pt;
 }


#imageoverlaytxt5 { 
  position: absolute; 
  width:33%;
  left: 10%;
  top: 40%;
  border-radius: 5px;
  padding: 15px;
  background: #45aa45;
  opacity: .9;
  color:white;
  font-family:'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 10pt;
 }

#imageoverlaytxt6 {
  position: absolute;
  width:33%;
  left: 100;
  top: 250;
  border-radius: 5px;
  padding: 15px;
  background: #45aa45;
  opacity: .9;
  color:white;
  font-family:'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 10pt;
 }

#imageoverlaytxt7 {
  position: absolute;
  width:33%;
  left: 100;
  top: 250;
  border-radius: 5px;
  padding: 15px;
  background: #45aa45;
  opacity: .9;
  color:white;
  font-family:'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 10pt;
 }

} /* end media min-device-width*/

#para { 
  font-family:'Open Sans', Helvetica, Arial, sans-serif;
  display :block;
  border-radius: 15px 50px;
  padding: 15px;
 }

#pubsummary{
  border-radius: 0px;
  content: "+";
}


summary::-webkit-details-marker {
/*  display: none*/
}
summary:after {
/*  background: red; */
  border-radius: 5px; 
/*  content: "+"; */
/*  color: #fff; */
  float: left; 
  font-size: 1.5em; 
  font-weight: bold; 
  margin: -5px 10px 0 0; 
  padding: 0; 
  text-align: center; 
  width: 20px;
}
details[open] summary:after {
/*  content: "-";*/
}