* {box-sizing: border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
body{margin:0px; padding:0px; font-family:Helvetica,Arial; font-size:16px; font-weight:bold; color:#58595b; background:url("../imgs/tileBG.png") repeat; }
.data{position:absolute; visibility:hidden;}
.shim{position:relative; width:100%; height:12px; background-color:transparent;overflow:hidden;}
.hbar,.hbarTitleBar{position:relative; width:100%; height:4px; border-top:1px solid black; background-color:#666; margin-top:2px;}

#layoutContainer{position:relative; width:100vw; height:100vh; max-height:calc(100vh - calc(100vh - 100%)); padding-right:300px;}
	#mediaContainer{position:absolute; margin:auto; top:0px; bottom:122px; width:calc(100vw - 300px); height:calc(calc(100vw - 278px) * calc(5 / 8)); max-height:calc((calc(100vh - calc(100vh - 100%))) - 122px); min-height:140px; border:8px solid transparent; /*background-color:red;*/}
		#mediaBorder{position:absolute; margin:auto; width:100%; height:100%; top:0px; left:0px; right:0px; bottom:0px; border:1px solid black;  }
			#mediaDisplay{position:absolute; margin:auto; width:100%; height:100%; top:0px; left:0px; right:0px; bottom:0px; border:4px solid #666; background-color:#c4c3c9;}
				.media{position:absolute; margin:auto; width:100%; height:100%; top:0px; left:0px; right:0px; bottom:0px; padding:6px; outline:none; display:none;}
		#controlsPanel{position:absolute; width:100%; height:82px; bottom:-90px; margin-top:0px; overflow:visible;}
		#infoPanel{position:absolute; top:0px; right:-300px; width:292px; height:100%;}
			.infoBox1,.infoBox2{position:relative; width:100%; height:124px; overflow:visible; margin-bottom:10px;}
			.infoBox2{height:calc(100% - 134px); min-height:84px; margin-bottom:0px;}
			.textPanel1,.textPanel2{position:relative; width:calc(100% - 16px); height:calc(100% - 52px); font-size:13px; font-weight:normal; margin-top:6px; float:right; overflow:hidden; background:rgba(17, 17, 17, 0.04);}
			.textPanel2{height:calc(100% - 30px); overflow-y:auto; text-align:justify; margin-top:6px;}
			.descText{position:absolute; width:100%; height:100%; padding:1px; padding-left:3px; padding-right:3px;}
			.launchBtn{position:relative; display:none; float:right; text-align:right; padding-top:0px; padding-right:20px; padding-left:4px; margin-top:4px; width:calc(100% - 16px); height:20px; background:url("../imgs/tri16_R.png") right 2px no-repeat #555; cursor: pointer; color:#ccc; line-height:20px; font-size:15px; overflow:hidden;}
			.iBarInfTbl{width:100%; border-spacing:0; border-collapse:collapse;}
			.iBarInfCol1{vertical-align:top; text-align:left; border:1px solid transparent; padding:0px; font-size:12px; font-weight:bold; color:#801f30; width:47px;}
			.iBarInfCol2{vertical-align:top; text-align:left; border:1px solid transparent; padding:0px; font-size:13px; font-weight:normal;}
		

#logoPanel{position:absolute; left:0px; bottom:0px; width:100%; height:40px; overflow:hidden;}
	#logoWrapper{position:absolute; left:8px; top:0px; width:96px; height:100%; background-color:#ea3834;}
	#logo{position:absolute; width:100%; height:100%; border:0px solid #666; background-color:#801f30; color:#fff; font-size:18px; font-weight:bold; line-height:15px; padding-top:5px; padding-left:5px;}
	.hbarTitleBar{top:8px; width:calc(100% - 120px); float:right; margin-right:8px;}
	#title{position:absolute; top:17px; right:8px; font-size:18px; font-weight:bold; color:#444; }

#copyright{position:absolute; top:0px; right:14px; width:50px; height:16px; background-color:#c4c3c9; font-size:12px; font-weight:normal; color:#999; text-align:center; padding-top:1px;}

/* carousel */
.carouselWrapper{position:relative; width:100%; left:0px; top:0px; height:78px; z-index:200;}
.carousel{position:absolute; width:80%; height:100%; left:0px; right:0px; margin:auto;}
.carouselBracketL{position:absolute; width:8px; height:78px; border:2px solid #888; border-right:0px; left:0px;}
.carouselBracketR{position:absolute; width:8px; height:78px; border:2px solid #888; border-left:0px; right:0px;}
.carouselTriR{position:absolute; width:8px; height:100%; right:-10px; background:url("../imgs/tri_R.png") center no-repeat; z-index:1000;}
.carouselTriL{position:absolute; width:8px; height:100%; left:-10px; background:url("../imgs/tri_L.png") center no-repeat; z-index:1000;}
.carouselMask{position:absolute; top:0px; left:4px; right:4px; bottom:0px; overflow:hidden; }
.carouselMount{position:absolute; overflow:visible;}
.carouselFrame,.carouselFrame_SEL{position:relative; float:left; width:64px; height:74px; z-index:101; overflow:visible; opacity:0.85; background:url("../vids/gammaCamThumb.png") center 5px/64px 64px no-repeat;}
.carouselFrame:hover{background-position:center 3px;}
.carouselFrame_SEL{background-position:center 5px; border-bottom:3px solid #801f30;}
@media(hover:none){
	.carouselFrame:hover{background-position:center 5px;}
}


/* H condensed view */
@media only screen and (orientation:portrait), (max-width:600px), (max-height:299px){
	#layoutContainer{position:relative; padding-right:0px; width:100%; height:auto; min-height:100vh; overflow:hidden; overflow-y:auto;}
		#mediaContainer{position:relative; margin-top:46px; top:0px; left:0px; bottom:auto; width:100%; height:calc(100vw * calc(5 / 8)); min-height:140px; max-height:calc(100vw * calc(5 / 8)); border:8px solid transparent;}
			#mediaBorder{position:relative;}
				#mediaDisplay{position:relative; width:100%; min-height:200px; padding:4%; top:0px; transform:none;}
		#controlsPanel{position:relative; width:100%; height:82px; bottom:auto; top:0px; margin-top:8px; overflow:visible;}
		#infoPanel{position:relative; top:0px; right:auto; width:100%; height:auto; margin-top:10px; overflow:hidden;}
			.infoBox1,.infoBox2{position:relative; width:100%; height:auto; }
			.descText{position:relative; height:auto;}
			.textPanel1,.textPanel2{position:relative; height:auto; min-height:60px; font-size:14px; margin-bottom:10px;}
			.iBarInfCol1{font-size:13px;}
			.iBarInfCol2{font-size:14px;}

	#logoPanel{position:absolute; top:0px;}
		#logoWrapper{top:0px; width:90px; height:40px; }
		#logo{position:absolute; font-size:17px; line-height:14px; padding-top:5px; padding-left:5px;}
		#title{font-size:18px; color:#666; top:5px;}
		.hbarTitleBar{position:relative; height:4px; top:19px; width:calc(100% - 116px); float:right; margin-right:8px; border-top:1px solid black; background-color:#666; margin-top:9px;}

	#copyright{top:40px; right:8px; height:12px;}
}