/* 412px large phones, 360-375px most phones, 320px small phones */

html { overflow-x: hidden; }

.route h2 {
	font-family: Aleo !important; font-style: italic; 
	color: #111; letter-spacing: 0;
}
.route h3 {
	font-family: Aleo !important; font-style: italic; margin-top: 1em;
}

/* Cancel standard c.t block behaviour */

#route_top>*, #route_plan_top>*, #route_navbar>*, #route_intro>*, #route_stages>*, #route_summary>*, #route_review>*, #route_credit>*, #route_map>*, #route_knowledge>*, #gallery>* { 
	border-width: 0;
}
#route_top:after, #route_plan_top:after, #route_navbar:after, #route_intro:after, #route_stages:after, #route_summary:after, #route_review:after, #route_credit:after, #route_map:after, #route_knowledge:after, #gallery:after { 
	content: none; clear: none;
}

/* Remove top spacing */

.new_route #top_nav.wide { margin: 0 !important; }
.new_route #top_nav #title { padding: 0 !important; }

/* Route header/nav */

#route_top {
	z-index:-1; height: 500px; 
	background-position: center; background-size: cover;
	position: absolute; left: 0px; right: 0px; top: 0px; 
}

.trip #route_top { background-color: gray; background-image: url("/site_images/grey_background.png"); height: 156px; }
.trip #route_headline { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; }

#route_headline,#route_subtitle {
	letter-spacing: 0;
	font-size: 3em;
	padding-top: 300px;
	font-family: Aleo;
	font-style: italic;
	color: white;
	text-shadow: #444 2px 2px 2px;
}
#route_subtitle { font-size: 1em; padding-top: 0; }
#route_subtitle:empty { display: none; }

.trip #route_headline { padding-top: 10px; }

#route_summary {
	float: right;
	text-align: right;
	color: white;
	font-family: Aleo;
	font-style: italic;
	line-height: 1.2em;
	max-width: 250px;
}
#route_summary .route_numbers { font-style: normal; }

#route_navbar { }
#route_navbar div {
	color: white;
	font-family: Aleo;
	font-style: italic;
	display: inline-block;
	width: auto;
	margin-top: 1.5em;
	padding-left: 0.2em;
	padding-right: 2em;
	margin-right: 1em;
	padding-bottom: 6px;
	cursor: pointer;
	text-shadow: #444 2px 2px 2px;
}
#route_navbar div.selected {
	border-bottom: 6px solid orange;
}
#route_navbar a { color: white !important; }
.trip #route_navbar { margin-top: -1em; }
.trip #route_navbar .selected { z-index: 8000; }

@media screen and (max-width: 1000px) {
	#route_navbar, #route_subtitle { padding-left: 20px; }
	#route_headline { padding-left: 20px; max-width: 620px; line-height: 0.9em; }
	#route_summary { padding-right: 20px; margin-top: -1em; }

	.trip #route_top { height: 145px !important; }
	#plan_map { top: 145px !important; height: calc(100vh - 145px) !important; }
	#accomm_filter { top: 175px !important; }
}
@media screen and (max-width: 700px) {
	#route_headline { max-width: 420px; }
	#route_navbar div { padding-right: 0.2em; margin-right: 0.5em;}
}
@media screen and (max-width: 41.9999em) {
	#route_headline { padding-top: 250px; }
	#route_summary { display: none; }

	.trip #route_top { height: 136px !important; }
	#plan_map { top: 136px !important; height: calc(100vh - 136px) !important; }
	#accomm_filter { top: 146px !important; }
}
@media screen and (max-width: 34.9999em) {
	.trip #route_top { height: 125px !important; }
	#plan_map { top: 125px !important; height: calc(100vh - 125px) !important; }
	#listing_overlay { display: none; }
	#accomm_filter { top: 155px !important; }
}
#route_navbar>div:last-child { padding-right: 0; }

#route_review {
	margin-top: 1.5em;
	color: #111;
	text-align: center;
	font-family: Aleo;
	font-style: italic;
	font-size: 3em;
	letter-spacing: 0;
}
#route_review a, #route_credit a { color: #111; }
#route_review a:hover, #route_credit a:hover { text-decoration: none; }
#rrsmall { font-size: 0.5em; margin-top: 1em;}

#route_credit {
	text-align: center;
	font-family: Aleo;
	font-style: italic;
	margin-top: 1.5em;
	font-size: 1em;
	letter-spacing: 0;
	color: #111;
	padding: 0 2em;
}

/* Route copy */

#route_intro {
	background-color: #F8F6F2;
	padding: 1em;
	margin-right: 16em;
	margin-top: -6px;
}
#route_intro.unindented { margin-bottom: 1em; padding-left: 0; }
#route_intro p:first-child {
	font-weight: bold;
	font-size: 1em;
}
#route_intro.unindented p:first-child {
	font-size: 0.9em; font-weight: normal;
}
@media screen and (max-width: 800px) {
	#route_intro { margin-right: 0; }
	#route_review { display: none; }
}

.new_route #comments h2 { font-family: Aleo; font-style: italic; font-weight: normal; }

/* Map */

#route_map {
	background-color: gray;
	background-image: url("/site_images/grey_background.png"); 
	background-position: center; background-size: cover;
	overflow: hidden;
}
#route_map_header {
	padding-top: 6px; padding-bottom: 6px;
	padding-left: 15px;
	color: white;
	font-family: Aleo;
	font-style: italic;
	font-size: 2em;
}
@media screen and (min-width: 1000px) {
	#route_map {
		margin-left: calc(-100vw/2 + 1000px/2); /* both these were previously +7px for scrollbar */
		margin-right: calc(-100vw/2 + 1000px/2);
	}
	#route_map_header {
		padding-left: calc(100vw/2 - 1000px/2);
	}
}
#rmap {
	background-color: #DDD;
	min-height: 400px;
	bottom: 0;
}

#plan_map {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 156px;
	height: calc(100vh - 156px);
}
#plan_map .leaflet-control-container { height: calc(100vh - 156px); }

#accomm_filter {
	position: absolute;
	left: 60px; top: 175px;
	background-color: rgba(255,255,255,0.85);
	z-index: 1000;
	padding: 3px;
}
#accomm_filter td { padding-right: 3px; }


/* 'Get the route' icons */

#get_route {
	font-family: Aleo;
	font-style: italic;
	margin: 2em 0 2em 0;
}
#get_route>div {
	display: inline-block;
	text-align: center;
	width: 16%;
}
#get_route>div:first-child {
	text-align: left;
	font-size: 2em;
}
#get_route img {
	width: auto; text-align: center;
}
#get_route a { color: #111; cursor: pointer; }
@media screen and (max-width: 480px) { 
	#get_route_text { display: none !important; }
	#get_route>div { width: 25%; }
}

/* Stage-by-stage taster */

#route_taster {
	margin: 2em 0;
	display: flex;
}
#route_taster>div {
}
#route_taster>div:first-child {
	font-family: Aleo;
	font-style: italic;
	text-align: left;
	font-size: 2em;
	flex-basis: content;
}
#taster_body {
	right: 0;
	background-color: #FFF;
	flex-grow: 2;
	border-top: 1px solid #CCC;
	padding: 8px;
	cursor: pointer;
}
#taster_body img.floater {
	float: left;
	margin-right: 20px;
	max-width: 150px; max-height: 300px; width: auto; height: auto;
}
.taster_more {
	font-family: Aleo;
	font-style: italic;
	font-size: 1.1em;
}
.taster_more:hover { text-decoration: underline; }

/* Knowledge */

#route_knowledge { 
	background-color: gray;
	background-image: url("/site_images/grey_background.png"); 
	background-position: center; background-size: cover;
	overflow: hidden;
}

#route_knowledge_text {
	padding: 20px;
	background-color: #E0E6D6;
}
@media screen and (min-width: 1000px) {
	/* Padding for wide screens */
	#route_knowledge_text {
		padding-left: calc(100vw/2 - 1000px/2 );
		padding-right: calc(100vw/2 - 1000px/2 );
	}
}
@media screen and (min-width: 700px) { 
	/* Two columns for most screens */
	#route_knowledge_text>div { column-count: 2; }
	#route_knowledge_text>div>div {
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}
}

@media screen and (max-width: 480px) { 
	/* All sections visible for phones */
	#route_knowledge_navbar { display: none; }
	#route_knowledge h2 { 
		background-color: gray; /* **** should be a pattern */
		background-image: url("/site_images/grey_background.png"); 
		background-position: center; background-size: cover;
		color: white;
		margin: 20px -20px 15px -20px;
		padding: 0 20px 0 20px;
	}
	#route_knowledge_text { padding-top: 0; }
	#knowledge_1 h2 { margin-top: 0; }
}
@media screen and (min-width: 481px) { 
	/* Section-based for other screens */
	#route_knowledge h2 { display: none; }
	#route_knowledge_text>div { display: none; }
	#route_knowledge_text>div.selected { display: block; }
	#route_knowledge_navbar>div {
		color: white; font-family: Aleo; font-style: italic;
		display: inline-block;
		font-size: 1.5em;
		padding: 4px 8px;
		margin-right: 1em;
		cursor: pointer;
	    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	}
	#route_knowledge_navbar>div:hover {
		background-color: rgba(255,255,255,0.2);
	}
	#route_knowledge_navbar>div.selected {
		background-color: orange;
		color: black;
	}
	#route_knowledge_navbar>div.selected:after {
		content: "";
		position: relative;
		right: calc(50% + 18px);
		margin-right: -36px;
		top: 2em;
		height: 0;
		width: 0;
		z-index: 1;
		border-width: 18px;
		border-style: solid;
		border-color: orange;
		border-left-color: transparent;
		border-bottom-color: transparent;
		border-right-color: transparent;
	}
}
@media screen and (max-width: 700px) {
	/* Less navbar spacing for small screens */
	#route_knowledge_navbar>div { font-size: 1.2em; margin-right: 0.5em; }
}
@media screen and (max-width: 600px) {
	#route_knowledge_navbar>div { margin-right: 0em; }
}
@media screen and (min-width: 1000px) {
	/* Padding for 1000px+ */
	#route_knowledge {
		margin-left: calc(-100vw/2 + 1000px/2);
		margin-right: calc(-100vw/2 + 1000px/2);
	}
	#route_knowledge_navbar { padding-left: calc(100vw/2 - 1000px/2); }
}

/* Gallery */

.gallery {
	margin-top: 2em;
	margin-bottom: 2em;
}
.gallery_more { display: none; }
#route_gallery_more { 
	width: calc(100% - 8px); background-color: #DDD;
	text-align: center; padding: 6px;
	cursor: pointer;
	left: 4px; right: 4px;
}
#route_gallery_more a {
	letter-spacing: 0.2px; color: #444; cursor: pointer;
}
#route_gallery_more:after {
	font-size: x-small;
	color: #888;
	margin-left: 5px;
	content: "▼";
}

/* Comments */

#comments h2 { padding-bottom: 0; }
#comments .comment:first-child { border-top: none; }

/* ------------------------------------------------------------------------------------------------ */

/* Stages page */

#route_stages {
	background-color: #F8F6F2;
	padding: 1em;
	margin-right: 16em;
	margin-top: -6px;
}
@media screen and (max-width: 800px) {
	#route_stages { margin-right: 0; }
}

#route_stages h2 { padding-top: 0.3em; }

#route_stages div.place {
	padding-bottom: 2em;
	line-height: 1.1em;
}

#route_stages span.town, #taster_body span.town {
	color: #D89631;
	font-family: Aleo;
	font-style: italic;
	font-size: 1.2em;
	padding-right: 0.3em;
	cursor: pointer;
}

#route_stages div.accommodation {
	font-size: 0.9em; font-family: PT Sans;
	color: #006331;
	cursor: pointer;
}
#route_stages div.accommodation img { vertical-align: bottom; padding-left: 1em; }
#route_stages div.accommodation img:first-child { padding-left: 0; }

#route_stages img.full_bleed {
	display: block;
	max-width: none;
	padding: 1em 0;
	width: 100vw;
	margin-left: -1em;
}
@media screen and (min-width: 1000px) {
	#route_stages img.full_bleed { margin-left: calc(-100vw/2 + 960px/2); }
}
#route_stages img.floater {
	margin-left: -60px;
	float: left;
	margin-right: 20px;
	max-width: 300px; max-height: 300px; width: auto; height: auto;
}
@media screen and (max-width: 480px) {
	/* display floaters as full-bleed on mobile */
	#route_stages img.floater {
		display: block;
		max-width: none;
		padding: 1em 0;
		width: 100vw;
		margin-left: -1em;
	}
}

div.place>div.accommodation>div>a { color: #006331; }
div.place>div.accommodation>div>a:hover { background-color: #CCC; text-decoration: none; }

.accommodation_expanded {
	font-size: 0.9em; font-family: PT Sans;
	color: #006331;
	line-height: 1.2em;
	border-top: 1px solid #CCC;
	margin-top: 0.2em;
}
.accommodation_expanded>div { padding: 0.2em 0; border-bottom: 1px solid #CCC; }
.accommodation_expanded .description {
	color: #777;
}
.accommodation_expanded .link {
	float: right;
	cursor: pointer;
	font-weight: bold;
}
.accommodation_expanded .link:hover { text-decoration: underline; }

/* Popup map */

#map_bar {
	position: fixed;
	background-color: orange;
	width: 100%;
	bottom: 0; left: 0; right: 0;
	height: 6px;
	cursor: pointer;
	z-index: 10;
}
#map_bar:after {
	position: fixed;
	content: "Show map";
	letter-spacing: 0;
	font-family: Aleo;
	font-style: italic;
	font-size: 1.5em;
	cursor: pointer;
	right: 10%;
	bottom: 0;
	padding: 8px;
	background: orange;
	z-index: 10;
}
#map_bar { --bar-offset: 30vw; }
#map_bar.raised,#map_bar.raised:after { bottom: 30vw; bottom: var(--bar-offset) !important; }
#map_bar.raised:after { content: "Hide map"; }
#popup_map {
	display: none;
	position: fixed;
	width: 100%;
	bottom: 0; left: 0; right: 0;
	height: 30vw;
	z-index: 10;
}
@media screen and (max-height: 1000px) {
	#map_bar { --bar-offset: 300px; }
	#map_bar.raised,#map_bar.raised:after { bottom: 300px; }
	#popup_map { height: 300px; }
}



/* ------------------------------------------------------------------------------------------------ */
/* "Flyer" style */

.flyer { text-align: center; }

.flyer>div { max-width: 700px; text-align: justify; font-size: 1.1em; }
.flyer>div>h2, .flyer>div>h3 { text-align: center; margin-top: 1em; margin-bottom: 0.5em; }

.flyer button {
	border-radius: 25px;
	padding: 13px 20px;
	font-family: Aleo;
	font-style: italic;
	font-size: 1em;
}
.flyer button:hover { background-color: #888; }

.flyer .pbutton { text-align: center; }
.flyer .pimg { text-align: center; }
.flyer .pimg>img { border: 8px solid #CCC; }

/* ------------------------------------------------------------------------------------------------ */
/* Accommodation edit UI */

.found_accommodation { cursor: pointer; color: #51878B; }
.found_accommodation:hover { text-decoration: underline; }

table#accommodation_edit tr>td:first-child { padding-right: 0.5em; }
table#accommodation_edit td { padding-bottom: 0.2em; }
table#accommodation_edit td { vertical-align: top; }
#name_input, #town_input, #address_input, #url_input { width: 300px; }