/* body styles */
body {

	/* 	we'll give it a black background with a centered loading gif spinner.
		this way it will cover up the loading gif with the three js starts */
	/* background: #000000 url('img/loading.gif') center no-repeat;  */

	/* loading gif idea was kinda shitty. I'll work it it later */
	background: #000;

	margin: 0px;
	overflow: hidden;
}

/* absolutely postion our gmiller.net logo, abso-lutely */
#imgGmillerLogo {

	/* fixed positioning should make it always be in the bottom right of the screen */
	position: fixed;
	right: 10px;
	bottom: 10px;

	/* size */
	width: 155px;
	height: 68px;

	/* background image for logo */
	background: url('img/gmiller_logo.png') 0 0 no-repeat;

}

#imgGmillerLogo:hover {

	/* background image for logo */
	background: url('img/gmiller_logo_hover.png') 0 0 no-repeat;
}

/* absolutely position our helper graphic, abso-lutely */
#imgInstructions {

	/* prevent this from being interacted with. It should disolve as soon as soneone touched the pano player anyway */
	pointer-events: none;

	/* fixed positioning should make it always be in the bottom right of the screen */
	position: fixed;
	left: 50%;
	top: 50%;

	/* use hackish transforms post-processing to truely center it ... */
	-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);

}

/* for image tags to force the browser to preload them, but don't display on screen */
.preload {

	/* not visible */
	visibility: none;

	/* always stuck top left */
	position: fixed;
	top: 0px;
	left: 0px;

	/* and taking no space **/
	height: 0px;
	width: 0px;
}