/* SEARCH/LIST OF MEDIA ITEMS */
.sharedList { padding:1em 0; overflow:hidden;}
.sharedList a { transition:all .1s;}
.sharedList a:hover { text-decoration:none; color:#45A;}
.sharedList .mediaListItem {
	padding:1em 1.5em;
	overflow:hidden;
	border-radius:1em;
	transition:all .2s;
	float:left;
	border:1px solid rgba(0,0,0,0);
	opacity:.8;
}
.sharedList .mediaListItem:hover { background-color:rgba(221,211,201,.4); opacity:1; }
.sharedList .mediaListItem:active { background-color:rgba(221,211,201,.6); box-shadow: 0 0 .5em #898683;}
.sharedList .thumb {	
	width:50%;
	margin:0 .5em .2em 0;
	background-size:cover;
	float:left;
	transition:all .2s;
	border-radius:1em;
	min-height:6em;
	background-color:#EEE;
}
.sharedList .mediaListItem:hover .thumb { border-radius:.5em; opacity:.9; transform:scale(1.01);}
.sharedList .mediaListItem:active .thumb { opacity:1; box-shadow:.3em .3em 1em rgba(0,0,0,.5);}
.sharedList h4 { font-size:1.1em; margin:0 0 .2em 0; font-weight:900; }
.sharedList .mediaListItem div { color:#555;}

@media screen and (max-width: 84em) {
	.sharedList .thumb { width:100%; }
}
@media screen and (max-width: 66em) {
	.sharedList .thumb { width:50%; }
}
@media screen and (max-width: 48em) {
	.sharedList .thumb { width:100%; }
}
@media screen and (max-width: 30em) {
	.sharedList .mediaListItem { width:100%; clear:both; padding:1em;}
}
@media screen and (min-width: 30em) and (max-width: 66em) {
	.sharedList .mediaListItem { width:50%;}
	.sharedList a:nth-of-type(2n+1) .mediaListItem { clear:both;}
}
@media screen and (min-width: 66em) {
	.sharedList .mediaListItem { width:33%;}
	.sharedList a:nth-of-type(3n+1) .mediaListItem { clear:both;}
}

.galleryTitle { background-color:#EEE; padding:.5em 1em; border-radius:1em; cursor:pointer;}
.galleryTitle h1:before { content:"Gallery: ";}
.galleryIndex { display:inline-block; background-color:#EEE;  border:1px solid #CCC; border-radius:1em; font-size:.9em;}
.galleryNav { float:right; color:#333; font-size:.9em;}
.galleryNav,.galleryIndex { padding:.1em .5em; margin-top:.5em;}
.galleryNav .fa { transform:scale(.8); color:#666;}
.galleryNav span { padding:.1em .4em; cursor:pointer; border-radius:1em; margin:0 .2em; transition:all .1s;}
.galleryNav span:hover, .galleryNav span:hover .fa { color:#369; background-color:#EEE;}
.galleryNav span:active, .galleryNav span:hover .fa { background-color:#DEF;}
#showGalleryItem.active { min-height:16em; }
.galleryShower { display:none; }

#mediaSearch fieldset { background-color:rgba(221,211,201,.2); border:none; border:1px solid #CCC; transition:all .2s; border-radius:.5em; }
#mediaSearch fieldset:hover { background-color:rgba(221,211,201,.3); border-color:#999;}
#mediaSearch legend {
	font-family: Nunito, 'Arial Rounded MT Bold', 'Trebuchet MS';
	font-size:1.5em;
	background-color:rgba(255,255,255,.9);
	padding:0 .5em;
	border-radius:.5em;
	box-shadow:.1em .1em .5em rgba(0,0,0,.5);
	color:#666;
}
#mediaSearch input { width:17em; margin:1em .5em .5em 1em; float:left; font-size:1.2em;}
#mediaSearch select { margin:.7em;}
#mediaSearch .searchSelects { float:right; margin:.5em; width:calc(100% - 24em); text-align:center; }
#mediaSearch .searchSelects div { display:inline;}
@media screen and (max-width: 72em) {
	#mediaSearch select { margin:.5em;}
}
@media screen and (max-width: 68em) {
	#mediaSearch .searchSelects { margin:0;}
	#mediaSearch .searchSelects div { display:block;}
}
@media screen and (max-width: 50em) {
	#mediaSearch .searchSelects { float:left; clear:left; width:100%;}
	#mediaSearch .searchSelects div { display:inline;}
}
@media screen and (max-width: 42em) {
	#mediaSearch .searchSelects div { display:block;}
}
@media screen and (max-width: 30em) {
	#mediaSearch input { width:calc(100% - 3em);}
	#mediaSearch select { margin:.5em auto; display:block;}
}

.tagEditorList { float:left; margin:0 .75em; font-family:"Courier","Courier New"; font-size:.6em; color:#666;}

i.weight { opacity:.5; font-size:.9em;}

figure { width:100%; margin:0; margin-top:1em; font-size:1.1em; }
.extraInfo { color:#666; margin:1em 0; font-size:.75em; border-top:1px solid #CCC; }
.extraInfo p { line-height:1em; margin:.25em 0; display:inline-block; min-width:15em;}

.extra-note { color:#666; margin: 0; font-size:.6em; }
.extra-note pre { display: inline; }
.with-hover { cursor: pointer; }

.mediaFile,.flowplayer { width:100%; display:block; margin:auto; box-shadow:.1em .1em 1em rgba(0,0,0,.8); transition:all .1s; margin-bottom:1em; background:#333;}

.fakeFullscreen {	/* faking full screen for browsers that don't support the fullscreen API */
	height:100%;
	margin:0 auto;
	left:0; top:0; bottom:0; right:0;
	position:fixed;
	z-index:100;
	background-color:rgba(0,0,0,.9);
}

.fakeFullscreen .mediaFile { max-height:100%; margin:0; left:50%; top:50%; position:fixed; transform: translate(-50%,-50%); max-width:100%; width:100%; zoom:2;}

.video-controls {
	text-align:center;
	width:100%;
	box-sizing:border-box;
	position:absolute;
	bottom:0;
	display:none;		/* let JavaScript enable */
	padding-bottom:5px;
	transition:opacity .3s;
	background:rgb(60,60,60);
	background-image: linear-gradient(bottom, rgb(30,30,30) 13%, rgb(100,100,100) 100%);
	color:white;
	user-select: none;
	cursor:pointer;
}
.video-controls.playing { opacity:0; }
.video-controls.notPlaying { opacity:.5; }
.mediaContent:hover .video-controls { opacity: .9; clear:both;}

.seek-bar { width:100%;}
.volume-bar { width:5em;}

.button { padding:5px; display:inline-block;}
.button:hover { text-shadow:0 0 10px rgba(255,255,255,.5); transform:scale(1.1);}
.button:active {text-shadow:0 0 15px #FFC; transform:scale(1.2);}
.full-screen,.mute { font-size:1.5em; padding:.2em;}
.timeCount { float:left; padding:5px; color:white; margin-left:5px; font-size:.8em; letter-spacing:1px; opacity:.9; width:10em;}
.right { float:right; padding:5px; text-align:right;}
.main-control { text-align:middle; position:absolute; width:14em; left:50%; margin-left:-7em; font-size:1.2em;}
.main-control .button { position:relative; bottom:5px;}
.play-pause { font-size:1.5em; top:-1px; padding:5px 10px;}
.range { position:relative; height:15px; margin-bottom:5px;}
.range * { width:100%; position:absolute; top:0; left:0; border:0; height:15px;}

.mute { width:1em; text-align:left; display:inline-block; padding-right:1em;}

.mediaContent:-moz-full-screen { position:fixed; top:0; width:100%; height:100%; background:black;}
.aspect_thin .mediaContent:-moz-full-screen, .aspect_wide .mediaContent:-moz-full-screen { height:auto;}     /* because the zooming in looks weird with changing aspect ratio */
.mediaContent:-moz-full-screen .mediaFile { max-height:100%; margin:0; left:50%; top:50%; position:fixed; transform: translate(-50%,-50%); width:auto; max-width:100%; zoom:2;}
.mediaContent:-moz-full-screen .mediaFile:hover { opacity:1;}

.mediaContent:-webkit-full-screen { position:fixed; top:0; width:100%; height:100%; background:black; }
.aspect_thin .mediaContent:-webkit-full-screen, .aspect_wide .mediaContent:-webkit-full-screen { height:auto;}     /* because the zooming in looks weird with changing aspect ratio */
.mediaContent:-webkit-full-screen .mediaFile { max-height:100%; margin:0; left:50%; top:50%; position:fixed; transform: translate(-50%,-50%); width:auto; max-width:100%; zoom:2;}
.mediaContent:-webkit-full-screen .mediaFile:hover { opacity:1;}

.mediaContent:-ms-fullscreen { position:fixed; top:0; width:100%; height:100%; background:black; }
.mediaContent:-ms-fullscreen .mediaFile { width:auto; max-width:100%; height:auto; max-height:100%; margin:0; left:50%; top:50%; position:fixed; transform: translate(-50%,-50%); zoom:2;}
.mediaContent:-ms-fullscreen .mediaFile:hover { opacity:1;}

.video-container:-webkit-full-screen { position:fixed; top:0; width:100%; background:black; height:100%;}
.video-container:-webkit-full-screen .mediaFile { max-height:100%; margin:0; left:50%; top:50%; position:fixed; transform: translate(-50%,-50%); max-width:100%; width:100%; zoom:2;}
.video-container:-webkit-full-screen .video-controls { position:fixed;}

.recents { background-color:#EEE; margin:auto;}
.recents th { border-bottom:1px solid #999; text-align:left; text-indent:1em;}
.recents th, .recents td { padding:.1em 1em; }

.alternate-player-link {
	display: none;
}

h1 a {
	color: #457;
	font-size: .5em;
	vertical-align: .5em;
	padding-left: 1em;
	transition: all .2s;
	opacity: .75;
}
h1 a:hover {
	text-decoration: none;
	color: #457;
	opacity: 1;
}

.panoviewer > div {
	min-height: 60vh;
	box-shadow: .1em .1em 1em rgba(0,0,0,.8)
}

.uploadTypeToggle { font-size: .75em; display: inline-block; }
.uploadTypeToggle * { display: inline-block; width: auto !important; }
.uploadTypeToggle input { margin-right: .25em; }
.uploadTypeToggle label { padding-right: 2em; }
#videofile { width: auto; display: inline-block; }


@media screen and (min-width: 60em) {
	figure.aspect_normal { display:table;}
	.aspect_normal .mediaContent { display:table-cell; }
	.aspect_normal figcaption { display:table-cell; padding-left:1em; vertical-align:top; }
	.aspect_normal figcaption { width:30%; }
}
@media screen and (min-width: 48em) {
	figure.aspect_thin { display:table;}
	.aspect_thin .mediaContent { display:table-cell; }
	img.mediaFile:hover { box-shadow:.1em .1em 1em rgb(10,20,50); opacity:.95; }
	img.mediaFile:active { box-shadow:.1em .1em 1em rgb(20,40,100); opacity:1; }
	figcaption {
		font-size: .9em;
		line-height:1.4em;
	}
	.aspect_thin figcaption { display:table-cell; padding-left:1em; vertical-align:top; }
	.aspect_wide figcaption { display:block; padding:0; }
	.aspect_thin figcaption { width:50%; }
}

@media screen and (max-width: 48em) {
	.mediaContent, figcaption { display:block; }
	.mediaContent { margin-bottom:-.7em; }
	.extraInfo p { width:40vw; min-width:10em;}
	
	.alternate-player-link { display: block; text-align: center; font-size: .8em; opacity: .8; padding-top: .5em;}
}