:root			{--main-media-query: '';
				--position: absolute;
				--white-bg: #fff;
}

body			{font-family:Arial;}
div				{box-sizing:border-box;position:absolute;}

/* defaults with no media query matches */
*.shadow		{box-shadow:30px 30px 30px rgba(40,40,40,0.8);}

div.dialog		{border:1px solid;border-top:27px solid;border-bottom:27px solid;width:20%;color:white;}

div.ticToc1		{background-color:#cc9;}
div.ticToc0		{background-color:#ff3;}
div.menu		{z-index:99;position:fixed;top:0px;height:5vh;vertical-align:middle;left:0px;right:0px;padding:0px;margin:0px;background-color:#aaa;}
div.profileInfo		{position:relative;bottom:-23px;padding:0px;}
div.tail		{margin-bottom:-25px}

div.unselectedCam{z-index:1;position:relative;color:white;background-color:rgba(0,0,0,.0);top:0px;left:0px;right:0px;bottom:0px;}
div.selectedCam	 {z-index:1;position:relative;color:white;background-color:rgba(250,250,250,0.6);top:0px;left:0px;right:0px;bottom:0px;}

div#ticToc		{cursor:pointer;text-align:center;z-index:100;width:7em;top:5px;right:5px;height:1em;background-color:#cc9;}
div#mssg		{z-index:99;position:fixed;top:5vh;height:5vh;vertical-align:middle;left:0px;right:0px;padding:0px;margin:0px;background-color:#f00;border:1px solid black;}
div#request		{box-shadow:10px 10px 10px rgba(40,40,40,0.8);display:none;z-index:101;top:1.5em;background-color:#fff;border:1px solid blue;border-radius:3px;width:75%;max-width:600px;height:85%;max-height:400px;}
div#camInfo		{box-shadow:10px 10px 10px rgba(40,40,40,0.8);display:none;z-index:101;top:2em;background-color:#fff;border:1px solid gray;border-radius:3px;width:30%;max-width:450px;height:85%;max-height:400px;}

span.chkSel		{position:absolute;top:25%;left:35%;font-size:3em;cursor:pointer;}
*.head1			{position:absolute;height:1em;margin-top:-25px;right:0px;top:0px;right:0px;cursor:default;}
*.head1:hover	{background-color:#7ff;}
*.available{font-weight:normal;}
*.available:hover{background-color:#777;color:white;}
*.active	{background-color:forestgreen;font-weight:bold;color:yellow;}
*.active:hover	{background-color:darkseagreen;}
span.tail:hover	{color:#fff;}

button.tail3	{}
button.tail2	{}
button.tail		{margin:0px;padding:2px;}
button.navB		{height:5vh;border:none;background-color:#aaa;margin:auto;}
button.logOut	{position:absolute;right:15%;}
button.X		{position:absolute;top:2px;right:2px;border:none;background-color:#fff;}
button.X:hover	{background-color:#f00;}

tr.hover:hover	{background-color:#eee;}
td.w12			{width:12em;}
td.w24			{width:20em;}

*.head			{position:absolute;margin-top:-26px;}
*.camName		{max-width:8vw;}
*.rt			{text-align:right;}

.ui-resizable-s {bottom:0;height:10px;}
.ui-resizable-e {right:0;width:10px;}
/*div.maximize	{position:absolute;top:0px;left:0px;object-fit:cover;}*/

div.imgDiv		{border:1px solid;border-top:27px solid;border-bottom:27px solid;width:20%;color:white;}
	div.imgDiv	{position:relative;display:inline-block;border:1px solid;border-top:27px solid;border-bottom:27px solid;width:20%;color:white;}

.ui_resizable	{position:absolute !important;}

/*====================================================================

	These CSS are related to mobile (small(er)) devices and depend on
	whether the device is held portrait or landscape

	Portrait - one picture wide, just list the pictures up and down
	Landscape - two pictures wide, not as long a list

  ====================================================================*/
@media screen and (min-resolution: 288dpi) and (orientation:landscape) {
	div.imgDiv	{width:50%;position:relative;float:left;display:inline-block;border:1px solid;border-top:27px solid;border-bottom:27px solid;color:white;}
	.ui_resizable{position:relative !important;}
}
@media screen and (min-resolution: 288dpi) and (orientation:portrait) {
	div.imgDiv	{width:100%;position:relative;display:inline-block;border:1px solid;border-top:27px solid;border-bottom:27px solid;color:white;}
	.ui_resizable{position:relative !important;}
}
@media screen and (min-resolution: 3dppx) {
	div.imgDiv	{position:relative;display:inline-block;border:1px solid;border-top:27px solid;border-bottom:27px solid;width:100%;color:white;}
	.ui_resizable{position:relative !important;}
}


/* TEST TEST TEST TEST TEST TEST
	These allow a desktop browser to act like a cellphone */
	div.imgDiv	{width:50%;position:static;float:left;display:inline-block;border:1px solid;border-top:27px solid;border-bottom:27px solid;color:white;}