body {
	color: #222222;
	background-color: #eeeeee;
	background-image: url("../img/logo-faded-1.png");
	background-repeat: no-repeat;
	background-size: 140% auto;
	background-position: center;
}

.content {
	margin: -50px auto;
	padding: 2em 2em;
	font-weight: 500;
}

.content.map {
	padding: 3em 0em;
}

.header {
	background-color: #ffffff;
}

.header h2 {
	font-weight: 400;
}

.content h2 {
	margin-top: 2em;
}

#menu a {
	font-size: 1.4em;
	padding: 1em 0 1em 0.7em;
	color: #bbb;
}

#menu .pure-menu-heading {
	background: #191818;
	padding: 0.7em 0.6em 0.6em 0.7em;
}

#menu .pure-menu-selected {
	background: #1f8dd6;
}

#menu .invite-link {
	background: #08cc84;
}

.menu-text small {
	color: #777777;
	font-weight: 200;
	padding: 0em 1em;
}

.pure-menu-heading img {
	width: 100%;
	height: 100%;
}

#map {
  height: 105%;
}

#map.invite {
  height: 60%;
}

.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 30px;
	line-height: 1.75;
	font-weight: 300;
	font-size: 1em;
	text-align: center;
	z-index: 69;
	background-color: #eeeeee;
}

.footer.navigation {
	line-height: 1;
	font-size: 1.5em;
}

.footer span {
	font-weight: 500;
}

.invite .pure-form input {
	width: 100%;
}

.pure-form input[type=date], .pure-form input[type=text] {
	padding: 0.2em 0.1em;
}

.pure-form input[type=time] {
	padding: 0.09em 0.1em;
}

#pickupList {
	background-image: url("../img/dots2.png");
	background-repeat: repeat-y;
	background-position: center;
	background-size: 4% auto;
}

#pickupList .pickup {
	padding: 1.5em 0;
}

#pickupList .pickup .details {
	background-color: #42424f;
	color: #eeeeee;
	margin: 2px;
	border-radius: 5px;
}

#pickupList .pickup.pickup-not-accepted .details {
	background-color: #3a84a7;
}

#pickupList .pickup.pickup-done .details {
	background-color: #7e8285;
}

#pickupList .pickup .number {
  font-weight: 500;
  font-size: 2em;
  text-align: center;
  padding: 0.35em 0;
}

#pickupList .pickup.pickup-done .number {
	text-decoration: line-through;
}

#pickupList .pickup .contact div {
	font-weight: 500;
	padding: 0 5px;
}

#pickupList .pickup .contact .distance {
	font-weight: 300;
	padding: 0 5px;
}

#pickupList .pickup .contact a {
	color: #8ffff0;
}

.pickup-manage {
	font-size: 2em;
	text-align: center;
	padding: 5px 0 0 0;
}

.pickup-manage.accept-pickup {
	color: #12bf02;
}

.pickup-manage.reject-pickup {
	color: #bf0404;
}

.subroute-distance {
	position: absolute;
	left: 55%;
	margin-top: -40px;
}

.map-marker {
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 1.5em;
  padding: 5px 7px;
  position: relative;
}

.map-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.boat-marker {
  background-color: #4285F4;
}

.boat-marker::after {
  border-top: 8px solid #4285F4;
}

.pickup-marker {
  background-color: #30a645;
}

.pickup-marker::after {
  border-top: 8px solid #30a645;
}

#main.invite {
	font-size: 0.9em;
	line-height: 1.2em;
}

#main.invite #status {
	font-size: 1.4em;
}


#loader {
	margin: 0;
	background-color: #FFFFFF99;
	z-index: 9001;
	position: fixed;
	width: 100%;
	height: 100%;
}

.spinner {
	width: 78px;
  height: 78px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -39px;
	margin-left: -39px;
	border-radius: 50%;
	border: 5px solid #eaf5fe;
	border-right-color: #5597d4;
	animation: rotateSpinner 800ms linear infinite;
}

@keyframes rotateSpinner {
	to {
		transform: rotate(360deg);
	}
}