@font-face{
	font-family: Wonderlism;
	src: local(Wonderlism), url("fonts/Wonderlism.ttf") format("truetype");
}
@font-face{
	font-family: Iconic;
	src: local(Iconic), url("fonts/Iconic.ttf") format("truetype");
}

html
{
}

body
{
	background: #000;
	color: #fff;
	font-family: sans-serif;
	font-size: 11pt;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
#sections
{
	width: 100%;
	height: 100%;
}

#section-canvas
{
	
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#trans
{
	display: none;
}

section, .mobile-section {
	position: relative;
	width: 400px;
	height: 460px;
	top: 0;
	left: -80px;
	background-repeat: no-repeat;
	background-position: top left;
	margin: 0;
}

.mobile-section-natural {
	height: auto;
}

	.mobile-section-natural-contents {
		margin-left: 80px;
	}

@media screen and (orientation: landscape) {

	section, .mobile-section {
		left: 0;
		width: 480px;
	}

	.mobile-section-natural-contents {
		margin-left: 0;
	}

}

	.section-contents {
		position: absolute;
	}

.overlay
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 199;
	background: #000;
}
#progress-bar
{
	position: relative;
	top: 150px;
	margin: auto;
	width: 193px;
	height: 26px;
	display: none;
}
	#progress-overlay {
		z-index: 800;
		
	}

	#progress-bar-percent
	{
		height: 100%;
		width: 0%;
		background: #fff;
	}
	
	#progress-bar-text {
		position: absolute;
		top: 120%;
		width: 100%;
		text-align: center;
		font-family: Wonderlism,sans-serif;
	}

	#progress-bar-mask {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 801;
		width: 100%;
		height: 100%;
		background: url(images/graphics/loading-mask.png) no-repeat center center;
	}
	
	


nav ul
{
	list-style: none;
}

	section nav {
		display: none;
	}
	
	#home nav {
		display: block;
	}

a
{
	color:  #288add;
	text-decoration: none;
}

h1,h2,h3{
	font-family: Wonderlism;
	font-weight: normal;
	text-transform: lowercase;
	font-size: 17px;
}

h1.placement, h2.placement, h3.placement {
	padding: 0;
	margin: 0;
}

h1 a, h2 a, h3 a {
	color: #fff;
}

.back-to-top{
	width: 150px;
	font-size: 15px;
	color: #fff;
	font-family: Wonderlism;
	text-decoration: none;
}
	.back-to-top a {
		color: #fff;
	}

.placement {
	position: absolute;
	top: 0;
	left: 0;
/*	background: pink;*/
	text-shadow: -2px 2px 4px #000000;
	filter: dropshadow(color=#000000, offx=-2, offy=2);
	
}

	a.placement {
		color: #fff;
		font-family: Wonderlism;
		text-decoration: none;
	}

	.inline-placement {
		position: static !important;
	}
	
	.placement-image
	{
		border: none;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-backface-visibility: hidden;
	}


	
.dialog {
}

	.dialog-mobile {		
		background-color: rgb(100, 0, 0);
		background-color: rgba(100, 0, 0, 0.65);
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		-o-border-radius: 20px;
		border-radius: 20px;
		-moz-box-shadow: 0 4px 20px 3px #000;
		-webkit-box-shadow: 0 4px 20px 3px #000;
		-o-box-shadow: 0 4px 20px 3px #000;
		box-shadow: 0 4px 20px 3px #000;
		padding: 14px;
		position: relative;
		z-index: 200;
		top: 20px;
		margin: auto;
	}
	
	.dialog-close {
		position: absolute;
		top: -8px;
		right: 18px;
		left: auto;
		display: block;
		cursor: pointer;
	}
	
	#dialog-overlay{
		opacity: 0.80;
		filter: alpha(opacity=80);
		display: none;
		height: 416px;
	}
	
section ol
{
	list-style-type: none;
}


.video-container iframe
{
	display: block;
	width: 100%;
	height: 100%;
}
	
.music-control {
	cursor: pointer;
}

#home-links ul {
	list-style-type: none;
}

#lofipeople {
	position: absolute;
	top : 390px;
	left: 370px;
}
	
#music-indicators{
	position: absolute;
	top: 10px;
	right: 10px;
	height: 25px;
	line-height: 25px;
}
	.music-indicator {
		cursor: pointer;
		position: static;
		left: auto;
		right: auto;
		float: right;
		margin-left: 5px;
	}
		.music-indicator img {
			position: static;
		}
	
	#music-indicator-pause{
		display: none;
	}
	
	#music-indicator-buffering{
		display: none;
	}
	
	#music-indicator-current{
		font-size: 8pt;
		color: #999;
		opacity: 0;
		float: right;
	}
	
	#music-playlist .audio:before {
		content: '\e047';
		font-family: Iconic;
		margin-right: 10px;
	}

	#music-playlist .activated {
		color: #bf5747;
	}
	
		#music-playlist .activated:before {
			content: '\e049' !important;
		}

	
#app-desc {
	font-size: 13.5px;
	line-height: 1.2em;
	padding: 0 10px 10px 10px;
}

#app-nav-iphone {
	position : absolute;
	font-family : Iconic;
	font-size : 28px;
	left : 223px;
	top : 244px;
	width : 50px;
	height : 50px;
	display : block;
	text-align : center;
	line-height : 50px;
	background : rgba(127,127,127,0.3);
}

#app-support {
	width: 220px;
	font-size: 14px;
}

#app-iphone .video-container
{
	width: 100%;
	height: 100%;	
}

#app .video-container iframe
{
	margin: auto;
}

#app-iphone
{
	width: 240px;
	height: 180px;	
}

#app-arcade
{
	width: 265px;
	font-size: 13px;
}

	#app-arcade-info {
		margin-top: 10px;
	}

	#app-arcade .video-container
	{
		width: 240px;
		height: 135px;
		margin: auto;
	}

		#app .video-container iframe
		{
			margin: auto;
		}


#video-info {
	width: 265px;
	font-size: 13px;
}
		
#home-facebook
{
	font-family: Wonderlism;
	text-align: center;
	width: 270px;
	padding-left: 5px;
	padding-right: 5px;
}

	#home-facebook #fb-link
	{
/*		font-family: sans-serif;*/
		font-size: 9pt;
	}


	#home-facebook .fb-like
	{
		background-color: #fff;
		margin-left: auto;
		margin-right: auto;
		padding: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-o-border-radius: 10px;
		border-radius: 10px;
	}

	
#home-news {
	background-color: rgba(100, 0, 0, 0.65);
}
		#home-news .dialog-close {
			display: none
		}
		
		#home-news h3 {
			margin: 25px 0 10px 0
		}
		
	#news-feed {
		padding: 14px;
	}
		#news-item-list-ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		
		.news-item {
			background-color: rgb(0, 0, 0);
			background-color: rgba(0, 0, 0, 0.65);
			margin: 10px 0 0 0;
			padding: 10px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
			-o-border-radius: 15px;
			border-radius: 15px;
			font-size: 10pt;
		}
		
			.news-item img {
				max-width: 100%;
			}
			
			.news-item-title {
				margin: 0 0 6px 0;
				font-family: sans-serif;
				font-weight: bold;
				font-size: 13pt;
			}
			
			.news-item-content {
				margin-bottom: 15px;
			}
			
			.news-item-dateAndCreator {
				font-size: 8pt;
				padding-bottom: 5px;
				border-bottom: 1pt dashed #333;
			}

#instagram {
	position: absolute;
	display: none;
	bottom: 10px;
	z-index: 149;
	top: 0;
	left: 0;
	width: 320px;
	height: 416px;
	overflow: hidden;
	
}

	@media screen and (orientation: landscape) {
		#instagram {
			width: 480px;
		}
		
	}

	#instagram img {
		max-width: 300px;
		max-height: 300px;
		display: block;
		position:relative;
		margin: auto;
		bottom:0;
		-webkit-backface-visibility: hidden;
		-webkit-transform-style:preserve-3d;
		-webkit-transform:  rotate(0.1deg);
		-moz-box-shadow: 0 4px 20px 3px #000;
		-webkit-box-shadow: 0 4px 20px 3px #000;
		-o-box-shadow: 0 4px 20px 3px #000;
		box-shadow: 0 4px 20px 3px #000;
	}

	#instagram-overlay
	{
		display: none;
	}