body {
	background-color: #eee;
}

#login_wrapper {
	top: 2rem;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
}

.parentlink {
	display: 			block;
	position: 			fixed;
	top:				0;
	left:				0;
	right:				0;
	font-size:			1em;
	text-align: 		center;
	background-color: 	#ebd823;
	color:				#1f4979;
	border-radius:		0 0 0.3em 0.3em;
	box-shadow: 		0px 1px 4px rgba(0,0,0,0.2);
	z-index: 			999;
}
	.parentlink a {
		display: 			block;
		padding:			0.5em 1.5em;
		text-decoration: 	none;
	}
		.parentlink a .fa {
			margin-left:	0.5em;
		}
		.parentlink span {
			display: 		none;
		}
.data-view .parentlink {
	display: 			none;
}
.main-window {
	top:				2rem;
}

.tab-webview-frame {
	top:				2rem;
}

#gban-banner {
	background-color: #285587;
	color: 			#fff;
	text-align: 	center;
	padding:		2em;
	background-image: url('http://theme.mappler.net/images/banner/gban-banner-sponsors-mobile.gif');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	min-height: 		10em;
	max-height: 		20em;
	height: 			30vh;
}
	#gban-banner h1, #gban-banner h2, #gban-banner p {
		display: 		none;
	}
#site-header, #site-banner {
	background-color: #285587 !important;
	color: 			#fff;
}	
a.guest-sign-in, input.sign-in {
	border:				0;
	color:				#fff;
	display:			block;
	padding:			0.7em 1em;
	font-size: 			1em;
	border-radius: 		0.3em;
	margin-top:			0.5em;
	text-decoration: 	none;
	text-align: 		center;
}

a.guest-sign-in {
	background-color: 	rgba(0,0,0,0.1);
	color:				#222;
}

.about-gban {
	font-size: 	10pt;
	line-height: 1.5;
	padding:	1em 2em;
	text-indent: 2em;
	color: 		#333;
}
	.about-gban .logo {
		display: 	block;
		margin:		0 auto 1em auto;
		padding-right: 2em;
	}
	.about-gban p{
		margin-bottom: 1em;
		text-indent: 0;
	}
	.about-gban h2 {
		line-height: 1.2;
		margin-bottom: 1em;
		font-size: 1.3em;
	}
	.about-gban ul {
		list-style: disc;
		text-indent: 0;
	}
	.about-gban ul {
		padding: 0 20px;
		margin-bottom: 1em;
	}
	
.add-button {
	position: 	fixed;
	width: 		auto !important;
	left:		0;
	right:		0;
	bottom:		0;
	font-size:	0;
	line-height: 17pt;
	padding: 	8pt 6pt 6pt 6pt;
	height:		50px;
	z-index: 	8;
}
	.add-button .fa {
		font-size:	15pt;
		display: 	inline;
		padding-right: 0.5em;
		vertical-align: middle;
		margin-bottom: 0.4em;
	}
	.add-button::after {
		content: 	"Report Pollution";
		font-size:	11pt;
	}
	
#tab-navigation {
	table-layout: auto;
}
.tab {
	width:	25%;
}

.tab-frame.map-view {
}
.tab-frame {
	padding-bottom: 3.3em;
}

.image-section {
	display: table-footer-group;
}

#login-signup a {
	background-color: #285587;
	color: #fff;
}

.tab-content h3 {
	line-height: 1.2;
	margin-bottom: 0.5em;
}

@media screen 
and (max-device-height : 500px) {
	#gban-banner{
		padding: 	0;
		min-height: 40px !important;
		height:		40px !important;
		background-size: 330px !important;
		background-position: center 68% !important;
	}
	.login-tab {
		padding: 	0.5em 2em;
		font-size:	0.9em;
	}
	#mobile-login-form {
		margin-top:	0.5em;
	}
}
@media screen 
and (min-device-height: 501px) and (max-device-height : 600px) {
	#gban-banner{
		padding: 	0;
		min-height: 60px !important;
		height:		60px !important;
		background-size: 330px !important;
		background-position: center 68% !important;
		border-top:	10px solid #285587;
		border-bottom:	10px solid #285587;
	}
}

#map-wrapper .map-navigation {
	padding-bottom: 150px;	
}

#mobile-site-about {
	background-color: #b9c9e0;
	line-height:1.3;
	font-size:10.5pt;
	padding:	1.5em;
}
	#mobile-site-about h2 {
		display: 	none;
	}
	#mobile-site-about p {
		margin-bottom: 0.5em;
	}
	#mobile-site-about section {
	}
	#mobile-site-about aside {
		color: #285587;
		padding:2em;
		text-align: center;
	}
		#mobile-site-about aside img {
			width: 70%;
			min-width: 200px;
			display: block;
			margin: 0 auto;
		}


.survey:before {
		white-space: pre-wrap;
		content: "1. Move the map around to position the red dot on desired location. \A 2. Fill out form as accurately as possible \A 3. Press SUBMIT when finished";
		display: 	block;
		font-size: 10pt;
		line-height: 1.4;
		background-color: #FAF7CA;
		padding: 0.7em 1.2em;
}
.survey tbody:nth-of-type(8)::before {
	content:	"While optional to include, contact information is used by authorities for further clarification of reports. This information is kept confidential.";
	display: block;
	background-color: #FAF7CA;
	font-size: 10pt;
	line-height: 1.4;
	padding: 10px 13px;
	border-top: rgba(0,0,0,0.3);
}
.survey tbody:nth-of-type(8), .survey tbody:nth-of-type(9), .survey tbody:nth-of-type(10){
	background-color: #FAF7CA;
}

.help-view {
	background-color: #b7c7e1;
	overflow-y: 	hidden;
	padding-bottom:	0;
	position: 		relative;
}
.help-view iframe {
	width:		100%;
	height:		150vh;
}
	.help-view iframe {
		overflow-y: 	auto;
	}
.survey-end {
	display:	none;
}
.survey::after {
	content:	"End of report";
	display: 	block;
	font-size: 0.9em;
	text-align: center;
	padding: 1em;
}