body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
}

a:link, a:visited {
	font-weight: bold;
	color:#036886;
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	color:#036886;
	margin-left:10px;
	margin-top:0px;
}

h2 {
font-size:1.2em;
display:inline;
margin-bottom:0;
}

h3{
  color:#CC9999;
	color:#036886;
}

h5 {
  color:#036886;
  font-size:1.5em;
  font-weight:lighter;
  font-family:"Trebuchet MS";
  padding-bottom:5px;
  margin:0;
}

.subhead {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color:#036886;
}

.nav-down {
        z-index: max;
      
        position: sticky;
        top:0;
        transition: 0.2s ease-in-out;
        background-color: #FFFFFF; 
}

.nav-up {
        top: -68.67px;
}

.menubar, .menubar a:link, .menubar a:visited {
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	text-decoration:none;
}

.menubar a:hover {
	font-weight: bold;
	color: #23E9F9;
	text-align: center;
	text-decoration:none;
}



.boldblue {
	font-weight: bold;
	color:#036886;
}

p {
margin-left:10px;
margin-right:10px;
}

table.main{
  width:500px;
  background-color:white;
  margin-top:0;
}

.container {
	color:blue;
  position: absolute; 
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:99;
	margin:0 0 0 0;
}

.center {
  /* take element out of the normal page flow! */
  position: relative;
  /* position the element vertically using top or bottom
     and define width as you like:                       */
  width: 400px;   
	height: 400px;
  /* set left and right to the same value! */
  /* adding auto-margins left and right will
     center the element horizontally!         */
  margin-left: auto;
	margin-top: 100px;
  margin-right: auto;
  /* mark this element visually prominent */
  background:white;
}
.blueLink {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}
.grayed {
	color: silver;
}

.shield {
	color:blue;
  position: absolute; 
	width:100%;
	height:100%;
	top:0;
	left:0;
	margin:0 0 0 0;
	background-color:white;
	opacity:.5;
	filter:alpha(opacity=50);
}


#container {
  border: 2px solid #036886;
  width: 799px;
  margin: 0 auto;

}

#container2{
  padding:10px;
}

#headerLinks {
  display: flex;
  justify-content: space-around;
  background-color: #3FA559;
}

#animalDiv {
}

#welcomeDiv {
}

#wrapper {
  display:flex;
  width:100%;
  padding-bottom: 10px;
  justify-content: space-around;
}

#leftSpan {
  display:flex;
  flex-direction:column;
} 

#rightSpan {
  display:flex;
  flex-direction:column;
}


/* styles added for smallview/maps */
.dropdown {background-color:#00FF66;color:white;font-size:1em;font-weight:bold;}
.inputContainer{position:relative;margin:0 0 0 0;}
.innerInput{position:absolute;}
.hidden{border:thin solid black;background-color:white;position:absolute;max-width:300px;width:140px;top:1.6em;display:none;overflow:auto;max-height:300px;z-index:100}
.info{margin-left:20;}
.label{width:auto;height:auto}
.input{padding:0 0 0 0;width:100px;height:25px;}
/*******************************/

/* Styles for recent uploads Flickr replacement */
#recent-uploads {
  width:415px;
  height:196px;
  overflow:auto;
  border:solid 2px #CCCCCC;
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}
#recent-uploads img {
  margin: 4px;
  height: 90px;
  width: 90px;
  transition: width 1s, height 1s;
  position:relative;
}

/*
 * this allows images to pop out
*/
 
.image-pop-container {
  position:fixed;
  height: 100%;
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;  
  top:0;
  left:0;
  z-index:12;
}

.modal-curtain {
  height:100%;
  width:100%;
  position: absolute;
  z-index-11;
  background-color:black;
  opacity:.5;

}

.image-pop-image {
  max-height:90%;
  max-width: 90%;
  position: absolute;
  z-index: 12;
}
.imgPop {
  cursor:pointer;
}



/************************************************/

#feedDiv {
  border:solid #CCC
}
.uw-sc-cardcont {
  height:100%;
  overflow:auto;
}
div.uw-sc-controls {
  display:none;
}
div.fieldDiv {
  margin:5px;
}
.fieldList {
  display:none;
  border:black 1px solid;
  list-style-type:none;
  padding:3px;
  margin: 2px 0 0 0;
  position:absolute;
  z-index:100;
  background-color:white;
  overflow:auto;
}
.fieldList>li {
  cursor:pointer;
}
.fieldList>li:hover {
  background-color:#E2E8F5;
}
li.placeholder:hover {
  background-color:white;
}
li.placeholder {
  color: gray;
  font-size: smaller;
  padding: 0 5px;
  cursor: default;
}
li.criteriaClear {
  font-size:15px;
  color:#bb5d5d;
}
#searchForm {
  display:flex;
  flex-direction:column;
}
#searchForm>span {
  align-items:flex-end;
}
.buttonInput {
  background-color:white;
  color:gray;
}
div#fg-widget-e9c66d9decbeac8861507c443 {
  width: 750px;
  height:300px;
}
#features {
  display:flex;
  align-items:center;
  justify-content:space-around;
  width:100%;
}
.featuredImgLink {
  display:block;
}
#featuredLinksDiv {
  width:480px;
}