@charset "UTF-8";

/* @kinslowdian simonkinslow.com */

@font-face 
{
    font-family: 'MetamorphousRegular';
    src: url('../_font/Metamorphous-Regular-webfont.eot');
    src: url('../_font/Metamorphous-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_font/Metamorphous-Regular-webfont.woff') format('woff'),
         url('../_font/Metamorphous-Regular-webfont.ttf') format('truetype'),
         url('../_font/Metamorphous-Regular-webfont.svg#MetamorphousRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face 
{
    font-family: 'goudy_bookletter_1911regular';
    src: url('../_font/goudybookletter1911-webfont.eot');
    src: url('../_font/goudybookletter1911-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_font/goudybookletter1911-webfont.woff') format('woff'),
         url('../_font/goudybookletter1911-webfont.ttf') format('truetype'),
         url('../_font/goudybookletter1911-webfont.svg#goudy_bookletter_1911regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@import url(_Reset.css);
@import url(_Info.css);
@import url(_Cloudy.css);
@import url(_GodMove.css);
@import url(_Air.css);
@import url(_Crow.css);
@import url(_Map.css);
@import url(_Particle.css);
@import url(_Ground.css);
@import url(_Description.css);



html, body
{
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

:root
{
	/* MEDIA QUERY BG */
	
	background: #000;
}

.darkOverlay
{
	width: 320px;
	height: 460px;
	
	/* MEDIA QUERY BG */
}

.h1-top
{
	font-size: 11px;
	line-height: 1em;
}

.h1-mid
{
	font-size: 66px;
	line-height: 1.5em;

}

.h1-btm
{
	font-size: 11px;
	line-height: 0;

}

.textShadow
{
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}


#wrapper
{
	position: relative;
	margin: 0 auto;
	padding: 0;
	
	width:320px;
}

#content
{
	width:320px;
	height: 460px;
	margin: 0 auto;
	padding: 0;
	
	background: rgb(0, 0, 0);

	text-rendering: optimizeLegibility;
	
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	
	user-select: none;
	touch-callout: none;
	
	overflow: hidden;

	opacity: 0;
	
	z-index: 0;
}

#mapImg
{
	width: 320px;
	height: 460px;
	
	margin: 0;
	padding: 0; 
}

#mapCont
{
	width: 320px;
	height: 460px;
	
	margin: 0;
	padding: 0;
	
	position: absolute;

	overflow: hidden; 
}

#startScreen, #infoScreen, #endScreen, #sceneGod, #sceneMap
{
	width: inherit;
	height: inherit;
	
	position: absolute;
	
	top: 0;
	left: 0;
}


#startScreen, #infoScreen, #endScreen
{
	font-family: 'MetamorphousRegular', Palatino, serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	
	color: #fff;
}

#startScreen
{
	z-index: 2;
}

#infoScreen
{
	z-index: 3;
}

#endScreen
{
	z-index: 4;
}

#sceneGod
{
	z-index: 1;
	
	/* overflow: hidden; */
}

#sceneMap
{
	z-index: 0;
	
	/* overflow: hidden; */
}


#globalBlack
{
	width: inherit;
	height: inherit;
	
	position: absolute;
	
	visibility: hidden;
	
	top: 0;
	left: 0;
	
	z-index: 5;
}

#globalBlackObj
{
	width: inherit;
	height: inherit;

	background: #000;

	opacity: 0;
}


#startBlack
{
	width: inherit;
	height: inherit;

	position: absolute;

	top: 0;
	left: 0;
	
	z-index: 4;
	
	background-color: #000;
}

#startScreen #startScreenDisplay, #infoScreen #windScreenDisplay, #endScreen #endScreenDisplay
{
	width:	inherit;
	height: inherit;
	
	position: absolute;
	
	top: 0;
	left: 0;
	
	z-index: 1;
}

#startScreenTitle, #endScreenTitle
{

	letter-spacing: 0;
	text-align: center;
	
	width: 320px;
	margin: 30px 0 30px 0;
	
	opacity: 0;
}

#startScreenCopy
{
	font-size: 11px;
	letter-spacing: 0;
	word-spacing: 0;
	line-height: 3ex;
	text-align: justify;
	
	width: 230px;
	margin: 0 auto 30px auto;
	
	opacity: 0;
}

#startScreen #startScreenBG, #infoScreen #infoScreenBG, #endScreen #endScreenBG
{
	width:	inherit;
	height: inherit;
	
	position: absolute;
	
	top: 0;
	left: 0;
	
	z-index: 0;
}

#infoScreen #infoScreenBG, #endScreen #endScreenBG
{
	opacity: 0;
}


#startScreen #startButton
{
	width: 135.5px;
	height: 32px;
	
	margin: 0 auto;
	
	/* MEDIA QUERY BG */
	
	position: relative; 
	
	opacity: 0;
}

#startButton #opt_Find
{
	width: 62px;
	height: 25px;
	
	display: block;
	
	position: absolute;
	
	top: 12px;
	left: 4px;
	
	cursor: pointer;
}

#startButton #div_or
{
	width: 20px;
	height: 20px;
		
	display: block;
	
	position: absolute;
	
	left: 58px;
	top: 2px;
}

#startButton #div_or > p
{
	width: inherit;
	height: inherit;
	
	text-align: center;
	font-variant: normal;
	font-size: 11px;
	letter-spacing: 0;	
	line-height: 3ex;
}

#startButton #opt_Hide
{
	width: 62px;
	height: 25px;
	
	display: block;
	
	position: absolute;
	
	top: 12px;
	right: 4px;
	
	cursor: pointer;
}

#startButton #opt_Hide > p, #startButton #opt_Find > p
{
	width: inherit;
	text-align: center;
	font-variant: normal;
	font-size: 13px;
	letter-spacing: 0;
	line-height: 0;
}

#_windWarning
{
	font-size: 34px;
	line-height: 1em;
	letter-spacing: 0;
	text-align: center;
	font-weight: lighter;
	
	width: 320px;
	margin: 200px 0 20px 0;

	opacity: 0;
}

#_windSpeed
{
	width: 320px;
	margin: 0 0 15px 0;
	line-height: 1em;
	text-align: center;
	
	opacity: 0;
}

#_windSpeed #_speed
{
	font-size: 24px;
	letter-spacing: 0.1em;
}

#_windSpeed #_units
{
	font-size: 14px;
	letter-spacing: 0.1em;
}


#_windNotice
{
	font-size: 11px;
	letter-spacing: 0;
	word-spacing: 0;
	line-height: 3ex;
	text-align: center;
	
	width: 230px;
	margin: 0 auto 25px auto;
	
	opacity: 0;
}

#_windContinue
{
	opacity: 0;
	
	cursor: pointer;
}


#endScreenCopy
{
	font-size: 11px;
	letter-spacing: 0;
	word-spacing: 0;
	line-height: 4ex; /* 3ex */
	text-align: center;
	
	width: 230px;
	margin: 0 auto 30px auto;
	
	opacity: 0;

	color: #fff;
}

#endScreenCopy a:link, #endScreenCopy a:visited
{
	text-decoration: none;
	border-bottom: 1px solid rgb(255, 100, 100);
	outline: 0;
	
	color: #fff;
}

#prayAgain
{
	width: 135.5px;
	height: 32px;

	opacity: 0;
	
	cursor: pointer;
}

.opt_Pray, .opt_Again
{
	width: 62px;
	
	text-align: center;
	font-variant: normal;
	font-size: 13px;
	letter-spacing: 0;
	
	position: absolute;

	top: 6px;
}

.opt_Pray
{
	left: 5px;
}

.opt_Again
{
	left: 68px;
}


.continueButton, .replayButton
{
	width: 135.5px;
	height: 32px;
	
	display: block;
	
	margin: 0 auto;
	
	/* MEDIA QUERY BG */
	
	position: relative;
}

.continueButton .opt_ok
{
	width: 120px;
	height: 20px;
	
	margin: 0 auto;
	
	position: inherit;
}

.continueButton .opt_ok p
{
	text-align: center;
	font-variant: normal;
	font-size: 13px;
	letter-spacing: 3.5em;
	line-height: 1.9em;
	
	margin: 0 auto 0 28px;
	
	position: inherit;
	
}


.webRoll
{
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

.webRoll:hover
{
	opacity: 0.4;
}

.webRoll_continueButton > .opt_ok
{
 	opacity: 1;
 	
 	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

.webRoll_continueButton:hover > .opt_ok
{
	opacity: 0.4;
}

.webRoll_replayButton div
{
 	opacity: 1;
 	
 	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;	
}

.webRoll_replayButton:hover div
{
	opacity: 0.4;
} 

#land0
{
	width: 320px;
	height: 111px;
	
	/* background: url(../_img/land_0.png) no-repeat top left; */
	/* background-size: 100% 100%; */
	
	position: absolute;
	
	bottom: 0;
	left: 0;
	
	z-index: 6;
}

#land1
{
	width: 320px;
	height: 131px;
	
	background: url(../_img/land_1.png) no-repeat top left;
	background-size: 100% 100%;
	
	position: absolute;
	
	bottom: 0;
	left: 0;
	
	z-index: 5;
}

#land2
{
	width: 320px;
	height: 136px;
	
	background: url(../_img/land_2.png) no-repeat top left;
	background-size: 100% 100%;
	
	position: absolute;
	
	bottom: 0;
	left: 0;
	
	z-index: 4;
}

#land3
{
	width: 320px;
	height: 176px;
	
	background: url(../_img/land_3.png) no-repeat top left;
	background-size: 100% 100%;
	
	opacity: 0.8;
	
	position: absolute;
	
	bottom: 0;
	left: 0;
	
	z-index: 1;
}





/*

	MEDIA QUERIES:::

	device-width 	== screen / display size of the unit
	width			== browser size			

*/


/* 

	IPHONE:: 
	
*/


@media all and (orientation:portrait) and (device-width:320px) and (device-height:480px)
{
	:root
	{
		background: #000;
	}
	
	#wrapper
	{
		width:320px;
		padding: 0;
	}
	
	#content
	{
		border: none;
		
		-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
		box-shadow: 		0 1px 2px rgba(0, 0, 0, 0); 
	}
	
	#descript
	{
		visibility: hidden;
	}
	
	#land0
	{
		background: url(../_img/land_0.png) no-repeat top left;
		background-size: 100% 100%;
	}
}

@media all and (orientation:landscape) and (device-width:320px) and (device-height:480px)
{
	:root
	{
		background: url(../_img/landscape_BG_grad.png) repeat-x top left, url(../_img/rebel_@2X.png) repeat top left;
		background-size: 480px 540px, 160px 360px;		
	}
	
	#wrapper
	{
		width:340px;
		padding: 20px 0;
	}
	
	#content
	{
		border: 10px solid white;
		
		-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
		box-shadow: 		0 1px 2px rgba(0, 0, 0, 0.8);
	}
	
	#descript
	{
		visibility: hidden;
	}
	
	#land0
	{
		background: url(../_img/land_0.png) no-repeat top left;
		background-size: 100% 100%;
	}
}

/* 

	IPHONE 5:: 
	
*/

@media all and (device-width:320px) and (device-height:568px)
{
	#land0
	{
		background: url(../_img/_iphone5/land_0_ip5.png) no-repeat top left;
		background-size: 100% 100%;
	}
}

@media all and (orientation:landscape) and (device-width:320px) and (device-height:568px)
{
	:root
	{
		background: url(../_img/landscape_BG_grad.png) repeat-x top left, url(../_img/rebel_@2X.png) repeat top left;
		background-size: 480px 540px, 160px 360px;		
	}
	
	#wrapper
	{
		width:340px;
		padding: 20px 0;
	}
	
	#content
	{
		border: 10px solid white;
		
		-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
		box-shadow: 		0 1px 2px rgba(0, 0, 0, 0.8);
	}
	
	#descript
	{
		visibility: hidden;
	}
}


@media all and (min-device-width:768px)
{
	:root
	{
		background: #000;
	}
	
	#wrapper
	{
		width:768px;
		height: 100%;
	
		display: -webkit-box;
		display: box;
		
		-webkit-box-orient: vertical;
		-webkit-box-align: center;
		-webkit-box-pack: center;	
		
		box-orient: vertical;
		box-align: center;
		box-pack: center;	
	}
	
	#content
	{
		width:768px;
		height: auto;
		
		/* MEDIA QUERY BG */
	}
	
	#mapImg, #PRELOADER
	{
		padding: 238px 0 0 226px;
	}
	
	#descript
	{
		visibility: visible;
	}
	
	#endScreenCopy a:link, #endScreenCopy a:visited
	{
		-webkit-transition: border-bottom 0.3s ease;
		transition: border-bottom 0.3s ease;	
	}
	
	
	#endScreenCopy a:hover 
	{
		border-bottom: 1px solid rgb(255, 255, 255);
	}
	
	#land0
	{
		background: url(../_img/land_0.png) no-repeat top left;
		background-size: 100% 100%;
	}
}


/*

	IMAGES::

*/

/*
	RETINA PIXEL:
*/


@media all and (-webkit-max-device-pixel-ratio: 2), all and (max-device-pixel-ratio: 2)
{
	.darkOverlay
	{
		background: url(../_img/overlay.png) no-repeat top left;
		background-size: 100% 100%;
	}

	#startScreen #startButton
	{	
		background: url(../_img/book_nav_or.png) no-repeat top left;
		background-size: 100% 100%;
	}

	.continueButton, .replayButton
	{	
		background: url(../_img/book_nav.png) no-repeat top left;
		background-size: 100% 100%;
	}
}

@media all and (min-device-width:768px) and (-webkit-max-device-pixel-ratio: 2), all and (min-device-width:768px) and (max-device-pixel-ratio: 2)
{
	#content
	{
		background: url(../_img/iPad-BG_1536x1832.jpg) no-repeat top left;
		background-size: 768px 916px;
	}
}

/*
	DEFAULT PIXEL:
*/

@media all and (-webkit-max-device-pixel-ratio: 1), all and (max-device-pixel-ratio: 1)
{
	.darkOverlay
	{
		background: url(../_img/_non-retina/overlay.png) no-repeat top left;
	}

	#startScreen #startButton
	{	
		background: url(../_img/_non-retina/book_nav_or.png) no-repeat top left;
	}

	.continueButton, .replayButton
	{	
		background: url(../_img/_non-retina/book_nav.png) no-repeat top left;
	}
}

@media all and (min-device-width:768px) and (-webkit-max-device-pixel-ratio: 1), all and (min-device-width:768px) and (max-device-pixel-ratio: 1)
{
	#content
	{
		background: url(../_img/iPad-BG_768x916.jpg) no-repeat top left;
	}
}