body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: black;
	color: white;
	overflow: hidden;
}
iframe {
	display: block;
	border: 0;
	width: 100%;
	height: 100%;
}
.box,
.posts {
	position: absolute;
	left: 0;
	right: 0;
	border: 0;
	-webkit-overflow-scrolling: touch;
	//overflow-y: scroll;
}

.box {
	top: 0;
	height: 230px;
}
.posts {
	top: 230px;
	bottom: 0;
}

.popup {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	bottom: 50%;
}

.popup button,
.sidebar button {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 20;
	background: none;
	border: none;
	color: white;
	width: 40px;
	height: 40px;
	font-size: 2em;
	line-height: 24px;
}

.sidebar button {
	cursor: pointer;
	right: 17px;
    background-color: rgba(0, 0, 0, 0.5);
}


@media (min-width:800px) {
	.sidebar {
		position: absolute;
		top: 230px;
		left: 50%;
		width: 50%;
		bottom: 0;
	}

	.has-sidebar .posts {
		left: 0;
		width: 50%;	
	}
}

@media (max-width:500px) {
	.box, .posts, .popup {
		-webkit-overflow-scrolling: touch;
		overflow-y: scroll;
	}

	.mobile-chat .box {
		height: 80px;
	}
	.mobile-chat .posts {
		top: 80px;
	}
	
	.has-popup .posts {
		top: 50%;
	}
	
	.has-popup .box {
		display: none;
	}
	
	.mobile-menu {
		display: none;
		position: fixed;
		z-index: 10;
		top: 80px;
		left: 0;
		background: #222;
		padding: 5px;
		margin: 0;
		font-family: Verdana, sans-serif;
	}
	.mobile-menu li {
	}
	.mobile-menu li a {
		display: block;
		height: 40px;
		line-height: 40px;
		color: white;
		text-decoration: none;
		padding: 0 1em;
	}
}