#pageLandingContainer {
	width		: 100%;
	height		: 100%;

	position	: absolute;
	top		: 0px;
	left		: 0px;
	
	color		: white;
	z-index	: 200; /* ensure above canvas and OSD */
}

#pageLandingContainer .subContainer {
	position	: relative;
	width		: 100%;
	height		: 100%;
}


/********************************************************************************/
/*		.pageTitle							*/
/********************************************************************************/

#pageLandingContainer .chromeWebstoreInstall {
	position	: absolute;
	bottom		: 0px;
	right		: 0px;

	background-color	: #CCC;
	font-weight		: bolder;
	padding			: 8px;
	border-top-left-radius	: 5px;

}

#pageLandingContainer .chromeWebstoreInstall.installed {
	color	: #222;	
}

#pageLandingContainer .chromeWebstoreInstall.toInstall {
	color	: #f22;
}

#pageLandingContainer .chromeWebstoreInstall:hover {
	cursor	: pointer;
}

/********************************************************************************/
/*		.pageTitle							*/
/********************************************************************************/

#pageLandingContainer .pageTitle {
	text-align	: center;
	font-family	: arial;
	font-weight	: bold;
	text-shadow	: 0 0 0.2em #F88, 0 0 1em red;
	font-size	: 400%;
	margin-top	: 1.5em;
	margin-bottom	: 0.5em;
}

#pageLandingContainer .pageTitle a {
	color		: red;
	text-decoration	: none;
}

/********************************************************************************/
/*		.jqmWindow							*/
/********************************************************************************/

#pageLandingContainer .jqmWindow {
    left	: 50% !important;
    top	: min(30vh, 220px) !important;
    transform: translateX(-50%) !important;
    position: fixed !important;
    z-index: 3000 !important;
}


#pageLandingContainer .jqmWindow h3 {
	text-align	: center;
}

#pageLandingContainer .jqmWindow a {
	text-decoration	: none;
}

#pageLandingContainer .jqmWindow a:hover {
	text-decoration	: underline;
}

/********************************************************************************/
/*		.menuDialog							*/
/********************************************************************************/

#pageLandingContainer .menuDialog {
    width       : 26em;
    height      : auto;
    /* Guarantee visibility: responsive horizontal centering and safe top offset */
    margin      : 0;
    /* Ensure visible even if jqModal plugin is missing */
    position    : fixed;
    z-index     : 3000;
    /* inherit left/top/transform from .jqmWindow */
    background-color: #EEE;
    color       : #333;
    padding     : 12px;
    border-radius   : 20px;
    box-shadow  : 0px 0px 12px black;
    box-sizing  : border-box;
    max-width   : 90vw;
}

#pageLandingContainer .menuDialog div.button {
	width		: 100%;
	font-size	: 300%;
	margin-top	: 0.2em;
	border-style	: solid;
	border-width	: 5px;
	border-radius	: 5em;
	text-align	: center;
}

#pageLandingContainer .menuDialog div.button:hover {
	background	: red;
}

#pageLandingContainer .menuDialog div.button.disable {
	background	: grey;
	cursor		: default;
}

/********************************************************************************/
/*		.tutorialDialog							*/
/********************************************************************************/


#pageLandingContainer .nowebglDialog {
	width	: 30em;
	height	: 26em;
	margin	: -13em 0 0 -15em;
	display: none !important;
}

#pageLandingContainer .tutorialDialog {
    width	: 20em;
    height	: 12em;
    margin	: 0 !important;
    display: none;
    position: fixed;
    left	: 50% !important;
    top	: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 3000;
    background-color: #EEE;
    color	: #333;
    padding	: 12px;
    border-radius: 20px;
	box-shadow: 0 0 12px black;
	box-sizing: border-box;
	max-width: 90vw;
}

#pageLandingContainer .aboutDialog {
	width	: 20em;
	height	: 12em;
	margin	: -6em 0 0 -10em;
}