.camWrap {  
    position:relative; /* to support contained abs pos elements */
	width:100%;
	height:100%;
	/* border: red solid 1px;  */
}


.camImageLoader {
	display:block;  
	position:absolute;
	top:0px;
	left:0px;		
    background: url(../../widgetImageCache/loadingAnims/131-50x50LiteGrey.GIF) center center no-repeat; 
	opacity:.7;
	width:100%;
	height:100%; /* to cover webcamm image fully - NOTE somewhere up chair of containers, there must be a container that sets a HEIGHT or BG image will have no height and not show up */ 	
}

.camImageWrap {
	position:relative;  /* was absolute - took this out of flow -> no effect on outer dims */
	top:0px;
	left:0px;	
    background-color:#000000;
	width: calc(100% - 10px);  /* room for 5px margins */
	height:100%;	
	/* width of image 100% scaled in tabbox widget is 591x385 - need some margin so.. 
	width:585px; 
	height:370px;
	*/
	min-height:300px; /* this "holds open" a space for the loader to sit in on INITIAL page load, else its under the cam controls div since that is the min-height when no image loaded. */

}

.camImageWrap img {
	width: 100%;  /* responsive */
	height:auto; 
	margin:0;
	padding:0; 
	border:none;
}

.camControlWrap {
	position:relative;
	top:10px;
	left:10px;
}

/* FUTURE: 
   layer holding scrolling desc of what's going on in this cam TODAY 
   ideally and SSI that someone can edit WITHOUT need for html editting
   is what shows up here. */
.camDesp {
	display: none; /* display turned on/off via controls */
	width:90%;
	height:90%;
	position:absolute;
	top:0px;
	left:0px;
	overflow:scroll;
}


.camMessage {
	width:97%; /* leave room to not overlap  borders on outer container */
	opacity:0.7; 
	background:url(../../widgetImageCache/blackTrans50.png) repeat;
	color:#cccccc;
	position:absolute; 
	bottom:8px; /* shift up slightly */ 
	left:0%;
	padding:4px 8px;
	margin-left:0px;
}

.camMessage:hover {
	opacity:1.0;
	background:url(../../widgetImageCache/blackTrans75.png) repeat;
}