div, textarea {
	box-sizing: border-box;
}
video, audio {
	display: block;
	max-width: 100%;
}
#SearchContainer {
	width: 27em;
	text-align: center;
	margin: auto;
	margin-top: calc(50vh - 8.5em); /*Half viewport height, minus half this div's height*/
	height: 17em;
	border-radius: 4px;
	border: 1px solid #ccc;
	padding: 15px;
}
#SearchContainer img {
	display:block;
	margin: auto;
}
#ImageCount {
	font-size: 1.3em;
}
input {
	width: 100%;
	box-sizing: border-box;
	margin: 4px 0;
	border-radius: 4px;
	border: 1px solid #ccc;
	padding: 2px 5px;
	font-size: 1em;
}
input[type="file"] {
	background-color: initial;
}
#splashForm input {
	margin: 8px 0;
	padding: 7px 20px;
	font-size: 1.5em
}
input[type=submit] {
	border: none;
	cursor: pointer;
}
input[type="radio"]{
	width: auto;
	margin: 4px 4px;
}
form {
	width:100%;
}
li {
	display:block;
	list-style: none;
}
ul {
	padding: 0px;
	margin: 5px;
}
#HeadMenu {
	width:100%;
	height:2em;
	text-align: center;
}
#HeadMenu ul {
	font-size: 1.25em;
}
#HeadMenu ul li {
	margin-right: 5px;
	border-right: solid 1px black;
	display: inline-block;
	padding-right: 5px;
}
#HeadMenu ul li:last-child {
	border-right: none;
}
#SideMenu {
	float:left;
	width: 192px;
	padding-left: 10px;
	font-size: .8em;
}
#SideMenu li {
	text-transform: capitalize;
}
#ImageGridContainer {
	float:left;
	width: calc(100% - 192px); /*192 is Same as SideMenu width*/
	padding: 10px;
}
#ImageGridContainer > h4 {
	word-wrap: break-word; /*For long image titles*/
}
#ImageGridContainer > img {
	max-width: calc(100% - 1em);
	display:inline-block;
	max-height: calc(100vh - 5em); /*Full screen except top menu size and size of DL button*/
	vertical-align: top;
}
#ImageGridContainer.SlideShowMode {
	float:none;
	width: 100%;
	padding: 0px;
}
#ImageGridContainer.SlideShowMode > img {
	max-width: 100%;
	display:inline-block;
	max-height: calc(100vh - 1.2em); /*Full screen except footer*/
	vertical-align: top;
}
.resetHeight {
	max-height: initial !important;
}
#BodyContent {
	width: 100%;
}
#BodyContent:after {
	clear:both;
	content:"";
	display:table;
}
body {
	padding: 0px;
	margin: 0px;
	border: 0px;
	font-size: 20px;
	font-family: serif;
}
#collectionTitle {
	text-align: center;
}
.ImageResultContainer {
	display:block;
	position: relative;
	margin: 5px;
	padding: 5px;
	height: 192px;
	width: 288px;
	background-color: lightgreen;
	border-radius: 4px;
	text-align: center;
	float:left;
	overflow: hidden;
	/*Disable highlighting of stuff*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	box-sizing: border-box;
	/*/Highlighting*/
}
.ImageResultContainer img {
	max-width: 100%;
	max-height: 100%;
	height:100%;
	object-fit: contain;
	display: block;
	margin: auto;
}
.imageResultOverlay {
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
}
.CollectionResultContainer img {
	max-height: calc(100% - 1em);
}
.overlayvideo, .overlayaudio {
	background-image: url("/resources/playicon.svg");
	background-position: center;
	background-repeat: no-repeat;
}
.overlayimage {
	display:none;
}
#PageMenu {
	margin-left: 192px; /*Same as SideMenu width*/
	text-align: center;
	font-size: 1.5em;
}
#Footer {
	text-align: right;
	color: #CECECE;
}
#Footer a {
	color: #CECECE;
}
#Footer ul {
	margin-top: 1px;
	margin-bottom: 0px;
}
#Footer ul li {
	margin-right: 5px;
	border-right: solid 1px #CECECE;
	display: inline-block;
	padding-right: 5px;
}
#Footer ul li:last-child {
	border-right: none;
}
.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
}
td, tr, th {
	text-align: left;
}
.narrowCenteredContainer {
	width:75%;
	margin: auto;
}
h1, h2, h3, h4, h5 {
	margin-top: .33em;
	margin-bottom: .66em;
}
h1 {
	font-size: 2em;  
	border-bottom: solid black 4px;
}

h2 {
	font-size: 1.7em;
	border-bottom: solid black 3px;
}

h3 {
	font-size: 1.5em;
	border-bottom: solid black 2px;
}

h4 {
	font-size: 1.1em;
	border-bottom: solid black 1px;
}
h5 {
	font-size: 1.05em; 
	margin-top: 1em;
	margin-bottom: .1em;
}
h6 {
	font-size: 1em; 
	margin-top: .15em;
	margin-bottom: .05em;
	font-weight: normal;
	text-decoration: gray underline;
	text-decoration-style: dotted;
}
.displayBlock {
	display:block;
}
.displayHidden {
	display:none;
}
#messageContainer {
	background-color: #f9f9aa;
	border-radius: 4px;
	padding: .5em;
}
#downloadButton {
	margin: 5px;
	font-size: 1.2em;
	display:block;
}
#CellMenuButton {
	display: none;
}
.noBreak {
	white-space: nowrap;
}
#filterForm {
	width: 50%;
	margin:auto;
}
table {
	width: 100%;
}
tr:nth-child(odd) {
	background-color: #e4e4e4
}
video, audio {
	margin: auto;
}
.removeCollectionButton {
	position: absolute;
	right: 0px;
	top: 0px;
	background-color:rgb(238, 144, 144);
	color: black;
	width: 1em;
	height: 1em;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	margin: 0px;
	font-size: 1em;
	border: none;
	padding: 0px;
	line-height: 1em;
	cursor: pointer;
}
.removeCollectionButton:not(:hover) span:after {
	content: "X";
}
.removeCollectionButton:hover {
	width: 5em;
}
.removeCollectionButton:hover span:after {
	content: "Remove";
}
a, .buttonasanchor {
	border: none;
	background: none;
	cursor: pointer;
	display: inline;
	padding: unset;
	margin: unset;
	color: rgb(0,0,238);
	text-decoration: underline;
	text-align: start;
	font-family: serif;
	font-size: 1em;
}
.anchorform {
	display: inline;
}
.card {
	width: 66%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
	padding-bottom: 1em;
	border: solid 1px #cccccc;
	margin-top: 1em;
	background-color: #8080801a;
}
.form.card {
	width: 66%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
	padding: 1em;
	border: solid 1px #cccccc;
	margin-top: 1em;
	background-color: #8080801a;
	margin-bottom: 1em;
}
.cardExpander {
	background-image: linear-gradient(#7e7e7e00,#7e7e7e75);
	border-radius: 8px;
}
/*StreamView Stuff*/
.Full.ImageResultContainer {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	height: initial;
	float:none;
}
.Full.ImageResultContainer img {
    max-width: 100%;
    max-height: 100vh;
}

.closedDescriptionBox {
	max-height: 5em;
	overflow: hidden;
}

/*Collection List Stuff*/
.CollectionList {
	margin: 0px;
	padding: 0px;
}

.CollectionList li {
	border-radius: 2px;
	background-color: lightgreen;
	width: 100%;
	margin-bottom: .2em;
	min-height: 2.5em;
	box-sizing: border-box;
	text-align: center;
	position: relative;
}

.nextInCollection, .previousInCollection {
	position: absolute;
	top: 0px;
	vertical-align: middle;
	text-align: center;
	width: 1.2em;
	height:100%;
	border-radius: 2px;
	padding-top: .75em; /*Half of the height which is from .CollectionList li, - .5em*/
}
.previousInCollection {
	left:0px;
	border-right: 1px solid #aaaaaaff;
}
.nextInCollection {
	right: 0px;
	border-left: 1px solid #aaaaaaff;
}

#mainImageSearchForm {
	position: relative;
	text-align: center;
}

#mainImageSearchForm form {
	display: inline-block;
	width: calc(100% - 2.4em); /*Minus next and prev*/
}

#mainImageSearchForm .nextInCollection, #mainImageSearchForm .previousInCollection {
	padding-top: 1.5em;
}

/*Drag n drop stuff*/
.ImageResultContainer.dragging {
	position: fixed;
	pointer-events: none;
	width: 216px;
	height: 144px;
	opacity: 0.8;
	z-index: 100000000; /*Bring on top of everything else*/
}
.proposeReplace {
	border: solid 5px slategray;
}
.highlightedAutoComplete {
	background-color: slategray;
}
/*Cell phone selector*/
@media (max-device-width: 536px), (max-width: 536px) {
	#SearchContainer {
		width: 100%;
		border: none;
		margin: auto;
		margin-top: calc(50vh - 25vh);
		height: 50vh;

	}
	#SearchContainer img {
		width: 66vw;
	}
	#ImageGridContainer > img {
		max-width: 100%;
	}
	#ImageGridContainer{
		width:100%;
		float:none;
		display: block;
		padding: 0px;
	}
	.ImageResultContainer {
		float:none;
		display:block;
		margin-bottom: 20px;
		padding: 20px;
		width: 100% !important;
		border-radius: 4px;
		height: auto;
	}
	.ImageResultContainer img {
		max-width: 100%;
		display: block;
		margin: auto;
		width: 100%;
		max-height: 100% !important;
	}
	#SideMenu {
		float: none;
		width: 100%;
	}
	#HeadMenu ul li {
		display: block;
		border: none;
	}
	#HeadMenu {
		height: auto;
	}
	#PageMenu {
		margin: auto;
	}
	.narrowCenteredContainer {
		width:95%;
	}
	#SideMenu {
		padding: 0px 10px;
	}
	body {
		font-size: 40px;  
	}
	#downloadButton {
		margin: 5px;
		font-size: 1.2em;
		display:block;
		text-align: center;
	}
	.cellDefaultHidden {
		display:none;
	}
	#CellMenuButton {
		display: block;
		padding: .1em;
		width: 1.8em;
		height: 1.8em;
	}
	#CellMenuButton img {
		width: 100%;
		height: auto;
	}
	video, audio {
		width: 100%;
		display: block;
	}
	#filterForm {
		width: 100%;
	}
	.card {
		width: 100%;
	}
}