/*
* login.php
*/

body{
	background: rgb(240,240,240);
	font-size: 12pt;
}
#loginFrame{
	display: block;
	width: 30em;
	height: 17em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3em;
	padding: 1em 2em;
	
	text-align: center;
	
	background: white;
	box-shadow: .5em .5em .5em rgb(223, 223, 223);
	
	font-family: sans-serif;
}
#loginFrame h1{
	font-size: 2em;
	letter-spacing: .075em;
}
#loginFrame input[type=password]{
	margin: 1em 0em;
	font-size: 2em;
	letter-spacing: .025em;
}
#loginFrame input[type=submit]{
	font-size: 1.75em;
	padding: .5em;
	letter-spacing: .05em;
}
#loginFrame #error{
	display: block;
	position: relative;
	top: -11em;
	color: red;
	letter-spacing: .05em;
}

@media screen and (max-width: 35em) {
	#loginFrame{
		width: 15em;
		height: 18em;
	}
	#loginFrame h1{
		font-size: 1.5em;
	}
	#loginFrame input[type=password]{
		font-size: 1.5em;
		width: 10em;
	}
}


/*
* index.php	[nav]
*/

#menu{
	display: block;
	width: 98%;
	position: absolute;
	top: 0px;
	text-align: center;
	padding: 0%;
}
#menu a{
	font-family: sans-serif;
	line-height: 2rem;
	font-size: 1.7rem;
	letter-spacing: .025em;
	text-decoration: none;
	color: rgb(144,144,144);
	transition: color .2s;
	margin: 0px 15px 0px 15px;
}
/*
@media screen and (orientation:portrait) and (max-width: 930px) {
	#menu a{
		line-height: 3.45rem;
		font-size: 3rem;
	}
}
*/
#menu a:hover{
	color: rgb(0,0,0);
}
#menu a:active{
	color: rgb(255,0,0);
}
#menu .currentPage{
	font-weight: bold;
}
#menu #logout{
	display: block;
	position: absolute;
	right: 1%;
	top: 1px;
	margin: 0px;
}


/*
* index.php	[Live feed from cameras]
*/


video{
	border: red dotted gray;
	
	position: relative;
	top: 30px;
	float: left;
	margin: 1px;
	width: 49%;
	
	background: transparent url('./icon/loading.gif') 50% 50% / cover no-repeat ;
}
@media screen and (orientation:portrait) {
	video{
		width: 98%;
	}
}




.videoMenu{
	position: fixed;
	z-index: 50;	
	display: none;
	width: 242px;
	height: 150px;		/*  126px without reset button  */
	
	top: 50px;
	left: 50px;
	
	opacity: 0.8;
	background: white;
	border: 1px gray solid;
	
	box-shadow: 2px 2px 2px rgb(64, 64, 64);
	
	text-align: center;
}
.videoMenu .icon{
	position: absolute;
	width: 24px;
	height: 24px;
	left: 6px;
}
.videoMenu .box{
	position: absolute;
	left: 36px;
	height: 12px;
	width: 200px;
	border: 1px solid black;
	background: linear-gradient(90deg, white, black);
	cursor: pointer;
}
.videoMenu .slider{
	position: absolute;
	width: 7px;
	margin-left: -6px;
	height: 20px;
	background: white;
	border: 1px solid black;
	top: -4px;
}

.videoMenu .iconbrightness{
	top: 6px;
}
.videoMenu .boxbrightness{
	top: 12px;
}

.videoMenu .iconcontrast{
	top: 36px;
}
.videoMenu .boxcontrast{
	top: 42px;
}

.videoMenu .iconsaturation{
	top: 66px;
}
.videoMenu .boxsaturation{
	top: 72px;
}

.videoMenu .iconsharpness{
	top: 96px;
}
.videoMenu .boxsharpness{
	top: 102px;
}

.videoMenu .resetButton{
	display: block;
	position: relative;
	top: 124px;
	
	font-family: sans-serif;
	font-size: 10pt;
	cursor: pointer;
}




/*
* index.php	[Storage]
*/


img.clipThumbnail{
	position: relative;
	top: 80px;
	float: left;
	margin: 2px;
	width: 33%;
}
@media screen and (orientation:portrait) {
	img.clipThumbnail{
		width: 49%;
	}
}

div.cameraSelector{
	position: absolute;
	width: calc( 99% - 8px );
	top: 40px;
	background: black;
	text-align: center;
}
@media screen and (orientation:portrait) {
	div.cameraSelector{
		width: calc( 98% - 8px );
	}
}
div.cameraSelector span{
	font-family: sans-serif;
	font-size: 12pt;
	cursor: pointer;
	margin: 3px 10px;
	color: white;
	transition: color .1s;
}
div.cameraSelector span:hover{
	color: rgb(200,200,200);
}
div.cameraSelector span.selected{
	font-weight: bold;
}

div.dateSelector{
	position: absolute;
	width: calc( 99% - 8px );
	top: 65px;
	background: black;
	text-align: center;
}
@media screen and (orientation:portrait) {
	div.dateSelector{
		width: calc( 98% - 8px );
	}
}
div.dateSelector span{
	font-family: sans-serif;
	font-size: 12pt;
	cursor: pointer;
	margin: 3px 10px;
	color: white;
	transition: color .1s;
}
div.dateSelector span:hover{
	color: rgb(200,200,200);
}
div.dateSelector span.selected{
	font-weight: bold;
}