@font-face {
    font-family: HelveticaNeueRoman;
    src: url('../../fonts/HelveticaNeue-Roman.eot');
	src: url('../../fonts/HelveticaNeue-Roman.eot?#iefix') format('embedded-opentype'),
		 url("../../fonts/HelveticaNeue-Roman.ttf") format("truetype");
}

@font-face {
    font-family: HelveticaNeueLtCn;
    src: url('../../fonts/HelveticaNeueLTStd-LtCn.eot');
	src: url('../../fonts/HelveticaNeueLTStd-LtCn.eot?#iefix') format('embedded-opentype'),
		 url("../../fonts/HelveticaNeueLTStd-LtCn.otf") format("truetype");
}

@font-face {
    font-family: HelveticaMedCd;
    src: url('../../fonts/helvetica-67-medium-condensed.eot');
	src: url('../../fonts/helvetica-67-medium-condensed.eot?#iefix') format('embedded-opentype'),
		 url("../../fonts/helvetica-67-medium-condensed.ttf") format("truetype");
}

@font-face {
    font-family: HelveticaNeueLt;
    src: url('../../fonts/HelveticaNeueLTStd-Lt.eot');
	src: url('../../fonts/HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'),
		 url("../../fonts/HelveticaNeueLTStd-Lt.otf") format("opentype");
}

* {
	padding: 0;
	margin: 0;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body {
	background: #CCC;

	font-family: "Arial Narrow", sans-serif;
	color: #FFF;

	overflow: hidden;
}

#container {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#guide_top {

}

#guide_bottom {

}

#debug {
	text-shadow: 1px 1px 0px rgba(0,0,0, 0.3);
}


#world {
	height: 460px;
}

#layerFade {

}

#layerFade #loading {
	width: 100px;
	height: 100px;

	text-align: center;

	position:fixed;
	left:370px; top:170px;
}

	@-webkit-keyframes spin {
		from { -webkit-transform: rotate(0); }
		to { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
		from { transform: rotate(0); }
		to { transform: rotate(360deg); }
	}

	#layerFade .spin {
		-webkit-animation: spin 1s infinite linear;
		animation: spin 1s infinite linear;
	}

#layerUI {
	z-index: 500;

	width: 840px;
	height: 460px;

	background: transparent url('../images/vignette.png');
	background-size: 100%;

	-webkit-perspective: 800px;
	-webkit-perspective-origin: center center;

	perspective: 800px;
	perspective-origin: center center;
    overflow:hidden;
	
}

	#layerUI .window {
		position: absolute;

		width: 240px;
		width: 290px;

		left: 70px;
		top: 90px;

		font-size: 14px;

		text-shadow: 1px 1px 0px rgba(0,0,0, 0.6);

		-ms-transition: -ms-transform .3s ease-out;
		-webkit-transition: transform .3s ease-out;
		-moz-transition: transform .3s ease-out;
		-o-transition: transform .3s ease-out;
		transition: transform .3s ease-out;

		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

#layerUI .window header {
			font-weight: bold;
			font-size: 1.8em;
            font-family: HelveticaNeueLtCn;
            line-height: 1.1em ;
            margin-bottom: 0.4em;

        }

        #layerUI .window .tSm {
			font-size: 0.7em;
        }

        #layerUI .window .tMd {
        	font-size: 1.1em;
        }

        #layerUI .window p {
			/*font-weight: bold;*/
			font-size: 0.95em;
            font-family: HelveticaNeueRoman;
            line-height: 1.4em ;
            margin-bottom: 0.4em;

        }

		#layerUI .windowClosed {

			-ms-transform:scale(0,1);
			-webkit-transform:scale(0,1);
			transform:scale(0,1);
		}

		#layerUI .popup {
			position: absolute;

			top: 40px;
			left: 200px;

			width:250px;
			height:152px;

			background: url('../images/popup_bg_sm.png');

			opacity: 0;
			
			-webkit-transform-origin:center bottom;
			-ms-transform-origin:center bottom;
			transform-origin:center bottom;

			-ms-transform:scale(0.5,0.5);
			-webkit-transform:scale(0.5,0.5);
			transform:scale(0.5,0.5);
		}

			#layerUI .popup .closeButton {
				position: absolute;
				right: 6px;
				top:16px;
				width: 20px;
				height: 20px;
				text-align: center;

				background: url('../images/popup_close.png');
				background-repeat: no-repeat;
				background-position: center center;

				-ms-transition: transform .1s ease-out;
				-webkit-transition: transform .1s ease-out;
				-moz-transition: transform .1s ease-out;
				-o-transition: transform .1s ease-out;
				transition: transform .1s ease-out;
			}

				#layerUI .popup .content {
					width: 210px;
					height: 115px;
					margin: 15px;
				}

				#layerUI .popup .closeButton:hover {
					background: url('../images/popup_close_over.png');
				}

			#layerUI .popup #location {
				font-weight: bold;
				color: #f7b62b;
				font-size: 18px;
				width:199px;
				
				background: rgba(247, 182, 43, 0.1);

				padding-left: 6px;
				display: block;
			}

			#layerUI .popup #info {
				font-size: 14px;
				padding-top: 8px;
				display: block;
			}

#layerDots {
	z-index: 101;
	position: absolute;
	background-color: red;
}

	.dotLayer {
		z-index: 101;
		position: absolute;
		background-color: red;
	}

		.dotLayer .dot {
			position: absolute;

			width:40px;
			height:40px;
			background: url('../images/canvas_dot.png');
		}

#layerViz {
	z-index: 100;
	background: url('../images/canvas_bg.jpg');
	background-size: 100%;
}

.layer {
	position: absolute;
}

@media screen and (max-device-width:640px) and (max-device-height: 960px) {

    #layerUI .window{
        font-size: 0.75em;
        top:3em;
        left:2em;
        font-size: 0.5em;
    }

    #layerUI .window p {
		font-size: 0.35em;
        line-height: 1.3em;
        margin-bottom: 0.4em;
	}

    #layerUI .popup #info {
        font-size: 12px;
        font-size: 0.3em;
    }

    #layerFade #loading {
		top:60px;
	}
}

@media screen and (min-device-width:768px) and (min-device-height: 1024px) {

    #layerUI .window{
        font-size: 0.75em;
        top:8em;
        left:4em;
    }

    #layerUI .popup #info {
        font-size: 12px;
    }

    #layerFade #loading {
		top:200px;
	}
}

/*Samsung Galaxy S4*/
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) {

	#layerUI .window{
        font-size: 0.5em;
        top:8em;
        left:4em;
    }

    #layerUI .window p {
		font-size: 0.35em;
        line-height: 1.3em;
        margin-bottom: 0.4em;
	}
	
}

/*Note Pro*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width:1200px) and (max-device-width:2560px) {

	#layerUI .window{
        top:8em;
        left:4em;
    }
	
}