@CHARSET "UTF-8";

@import 'fa';
@import 'lightbox';
@import 'common';

#map {
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:70%;
	background:#EEE;
	
	.loader {
		position:absolute;
		font-size:3em;
		width:1em;
		height:1em;
		top:calc(50% - 0.5em);
		left:calc(50% - 0.5em);
		color:#666;
		@extend .flicker;
	}
	
	#legend {
		background:white;
		font-family:Roboto,Arial,sans-serif;
		background: rgba(255, 255, 255, 0.5);
		border-radius:3px;
		padding: 1px 0 0 0;
		
		.line {
			display: inline-block;
			border-left: 2em solid;
			line-height: 2px;
			padding-left: 0.5em;
			margin: 1em;
			font-size: 0.8em;
			color: #222;
			
			&.green {
				border-color: #00ff78;
			}
			
			&.blue {
				border-color: #0000ff;
			}
			&.red {
				border-color:#FF7814;
			}
		}
	}
}

#feed {
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	width:30%;
	overflow:auto;
	
	input, button {
		border:none;
		padding:0.5em 1em;
		background:#F7F7F7;
	}
	
	button {
		background:#CCC;
		cursor:pointer;
		font-weight:bold;
	}
	
	button:hover {
		background:#F7F7F7;
	}
	
	#poster {
		padding:1em;
		background:#EEE;
		border-bottom:1px solid #DDD;
		position:fixed;
		width: calc(30% - 2em);
		
		#post {
			margin-bottom:1em;
			width:calc(100% - 2em);
		}
		
		#name {
			width: calc(100% - 6em);
		}
		
		#submit {
			margin-left:1em;
			width: 3em;
		}
	}
	
	#posts {
		font-family: Arial;
		overflow:auto;
		position:absolute;
		top:0;
		bottom:0;
		width:100%;
		
		.post {
			margin:1em;
			background: #B4BDFF;
			color:#323268;
			border-radius: 0.5em;
			
			.message {
				margin:0.3em 0 0 0;
			}
			.signature {
				margin:0.5em 0 0 0;
				text-align: right;
				font-style: italic;
			}
			.header {
				padding: 0.5em 1em;
				font-style: italic;
				font-size:0.8em;
				text-align:right;
			
				.index {
					float:left;
					font-style: normal;
				}
				
				.time {
					cursor:default;
				}
			}
			.body {
				padding: 0em 1em 0.5em;
			}
			&.picture {
				background:#F3EC9F;
				color:#635C28;
				
				a {
					display:inline-block;
					line-height:0;
					margin:0;
				}
				
				img {
					width:100%;
					image-orientation:from-image;
					border: 1px solid white;
					outline:none;
				}
			}
			&.message {
				background: #6DFF58;
				color:#326526;
				
				p {
					font-size:0.9em;
					margin:0.5em 0;
				}
				
				p:first-child {
					margin-top:1em;
				}
			
				.staticmap {
					width: 100%;
					border-radius: 3px;
					cursor: pointer;
				}
			}
		}
		
		.fa.push {
			margin-right:0.5em;
		}
		
		#next_posts {
			margin: 1em;
			display:none;
			
			button {
				border-radius: 0.5em;
				width:100%;
			}
		}
	}
}

/* Info Window */

.info-window h1 {
	font-size: 1.2em;
}
.info-window p {
	font-size: 1.0em;	
}

.info-window i {
	padding-right:0.5em;
	font-size: 1.33333333em;
	line-height: 0.75em;
	vertical-align: -15%;
	@extend .fa-fw;
}

.info-window .battery {
	text-transform: capitalize;
}

/* Upload */

.bar {
	height: 18px;
	background: green;
}

/* Other */