body[appview="1"]
{
	background-color: #666666;
	/*background-image: url(/images/webapp-background.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;*/
}
#appview
{
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	
	/*-webkit-border-radius: 1vw;
	-moz-border-radius: 1vw;
	-ms-border-radius: 1vw;
	-o-border-radius: 1vw;
	border-radius: 1vw;*/
	
	/*-webkit-box-shadow: 0px 0px 16px #000000;
	-moz-box-shadow: 0px 0px 16px #000000;
	-ms-box-shadow: 0px 0px 16px #000000;
	-o-box-shadow: 0px 0px 16px #000000;
	box-shadow: 0px 0px 16px #000000;*/
}
body[mobile="1"] #appview
{
	width: 100vw;
	height: auto;
	max-width: 100vw;
	max-height: none;

	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;

	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}
body[mobile="1"] #appview > iframe#appview_main
{
	width: 100%;
}
body:NOT([mobile="1"]) #appview
{
	left: 50%;
	top: 50%;
	width: 45vh;
	height: 90vh;
	max-width: 90vw;
	max-height: 180vw;
	/* background-color: #000000; */
	
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);

	-webkit-transition: width 0.8s ease-in-out;
	-moz-transition: width 0.8s ease-in-out;
	-ms-transition: width 0.8s ease-in-out;
	-o-transition: width 0.8s ease-in-out;
	transition:  width 0.8s ease-in-out;
}
#appview[doubleview="1"]
{
	width: 91vh !important;
}
#appview > div.C_MOBILE_LANDSCAPE
{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
#appview > div.C_MOBILE_LANDSCAPE > img
{
	position: absolute;
	left: 50%;
	top: 50%;
	max-width: 30vw;

	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
#appview > iframe
{
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;

	width: 45vh;
	height: 100%;
	border: 0px;

	/*-webkit-border-radius: 1vw;
	-moz-border-radius: 1vw;
	-ms-border-radius: 1vw;
	-o-border-radius: 1vw;
	border-radius: 1vw; */
}
body:NOT([mobile="1"]) #appview > iframe
{
	-webkit-transition: right 0.8s ease-in-out;
	-moz-transition: right 0.8s ease-in-out;
	-ms-transition: right 0.8s ease-in-out;
	-o-transition: right 0.8s ease-in-out;
	transition: right 0.8s ease-in-out;
}
@media screen and (orientation:landscape)
{
	body[mobile="1"]
	{
		background-color: #8000FF;
	}
	body[mobile="1"] #appview > iframe
	{
		display: none !important;
	}
	body[mobile="1"] #appview > div.C_MOBILE_LANDSCAPE
	{
		display: block;
	}
}
#appview > iframe#appview_main
{
	left: 0px;
	background-color: #8000FF;
	z-index: 1;
}
#appview[doubleview="1"] > iframe#appview_main
{
	right: 50%;
}
#appview > iframe#appview_sub1
{
	display: none;
	left: auto;
	background-color: #FFFFFF;
}
#appview[doubleview="1"] > iframe#appview_sub1
{
	display: block;
}
