#photoViewer
{
  width:100%;
  height:100%;
  position:relative;
  margin: 0 auto;
 }

.PhotoViewerPopUp
{
  width: 90%;
  margin: 1% 5% 0;
}

.AiPhotoEnvelope
{
  width: 100%;
  height: 40em;
  margin: 0 auto;
  position: relative;
}

#photoViewer:hover .AiPhotoArrow
{
  display:block;
}

.AiPhotoThumbnailViewerTileRow
{
  display: inline-block;
  margin-left: 2px;
  white-space: nowrap;
  vertical-align: top;
}

.AiPhotoInfo
{
  display:table;
  width:85%;
  margin: 0 auto;
  padding-top:.4em;
  position: relative;
}

.AiCol
{
  display:table-cell;
}

.AiPhotoInfo span
{
  display:inline-block;
}


#leftArrowMargin
{
  left:-1px;
}

#rightArrowMargin
{
  left:72.1em;
}

#infoTop
{
  height:1.8em;
  border-bottom: 2px solid #5c9ec8;
  background-color:black;
}

#infoBottom
{
  height:3em;
  box-sizing: border-box;
  border-top: 2px solid #5c9ec8;
  background-color: rgba(0,0,0,.8);
  width: 100%;
}

#infoBottomWrap
{
  width: 85%;
  position: relative;
  margin: 0 auto;
}

.AiPhoto
{
  overflow:hidden;
  height:88%;
  width:85%;
  background-color:black;
  display:block;
  margin: 0 auto;
 }

#curViewingPhoto
{
  max-width:85%;
  max-height:100%;
  margin:auto;
  object-fit: cover;
}

.AiPhotoArrow
{
  display:none;
  position:absolute;
  width:5em;
  top:16.25em;
  cursor:pointer;
}


#arrowPrev
{
  left:0.8em;
}


#arrowNext
{
  right: 0.8em;
}

.AiPhotoViewerIcon
{
  height:1.5em;
  cursor:pointer;
  vertical-align:middle;
}

.AiThumbnail
{
  width:50px;
  height:50px;
  cursor:pointer;
  outline:none;
  object-fit: cover;
}


.AiPhotoInfoCol
{
  vertical-align:top;
  display:inline-block;
  height:100%;
  width:32%;
  font-size:110%;
  margin-left:.5em;
  margin-top:1em;

}

#mapMarker
{
  width:3%;
}

#mapMarker img
{
  height: 1.2em;
  cursor: pointer;
  vertical-align: middle;
  padding-left: 1em;
}

#photoInfo
{
  margin-left:1em;
  padding: 0.25em;
}

#photoLocation
{
  width:17%;
  font-size:80%;
  color:gray;
  margin-left:.4em;
}

#photoTitle
{
  text-align: center;
  width: 60%;
  color: #5c9ec8;
  font-size: 110%;
}

#dateGroup
{
  width:20%;
  text-align: right;
  padding-right: 0.5em;
}


#photoDate
{
  font-size:80%;
  color:gray;
  margin-left:.4em;

}

#photoNotes
{
  margin-left:2em;
}


#infoCollapseArrow
{
  left: 49%;
  top: 0.75em;
  visibility: hidden;
  position: absolute;
}

#photoDownload
{
  right: 0.5em;
  position: absolute;
  top: 0.7em;
}

#colorPalette
{
  position: absolute;
  right: 2em;
  vertical-align: middle;
  display: inline-block;
}

#colorPalette div
{
  width: 2em;
  height: 2em;
  border: 2px solid #5c9ec8;
  box-sizing: border-box;
  border-radius: 2em;
  display: inline-block;
  margin: 0 2px;
}

#infoOverlay
{
  width:100%;
  height: 13em;
  top: -13em;
  background-color: rgba(0,0,0,.8);
  position: relative;
  display: none;
  margin: 0 auto;
}

.AiInfoDesc
{
  color:lightgray;
  display:inline-block;
  width:7.5em;
  text-align: right;

}

.AiInfoData
{
  color:white;
  font-weight: bold;
  white-space: nowrap;
}

.AiPhotoInfoCol .AiInfoLine #type
{
  text-transform: uppercase;
}

.AiInfoLine
{
  margin-bottom:1em;
}

.AiThumbnailSelected
{
  border: 1px solid #5c9ec8;
  height: 50px;
  overflow: hidden;
  box-sizing: border-box;
}


#geoData
{
  position:absolute;
  top:0;
  left:8%;
  height:100%;
  width:50%;
  display:none;
  z-index:99999;

}

#mapDisplay
{
  width:100%;
  height:90%;
}

#i18n_postalCode
{
  color:lightgray;

}

#i18n_postalCode::after
{
  content:": ";
}

#postalContainer
{
  background-color:black;
  width:65%;
  margin-top:2px;
}

#thumbNailContainer
{
  width:85%;
  height: 6em;
  border:none;
  position:relative;
  margin: 0.5em auto;
}

#thumbNailViewer
{
  max-width:100%;
  border:none;
  text-align: center;
}

#update
{
  border: 0.2em solid #000;
  border-radius: 0.3em;
  font-size: 90%;
  background: #999;
  cursor: pointer;
  font-weight:bold;
  height:2em;
}