/* ---- Styled elements ---- */

/* ---- Standard white content box ---- */

.box {
	background-color: white;
	padding: 10px;
}
.box:after {
	content: "";
	border-top: 1px solid #CCC;
	left: 0; top: 0; right: 0; bottom: 0;
	position: absolute;
	pointer-events: none;
}
.stack>.box { border-top: 1px solid #CCC; }

.box h3 {
	font-weight: normal;
	line-height: 1.2em;
	padding-bottom: 0.6em;
}
.box h3 a:hover { text-decoration: underline; color: #FBAD39; }
.box a { position: relative; z-index: 1; } /* Opera(/IE?) */

.box .date {
	margin-top: -0.5em;
	color: #CCC;
	font-family: PT Sans;
	text-transform: uppercase;
	font-size: 0.7em;
	padding-bottom: 0.6em;
}
.box .date a { color: #CCC; }
.box .date .new { background-color: #DD5A31; color: white; padding: 2px 4px; }
.box .date .new:before { font-family: Verdana; content: "\25CB \25CB"; letter-spacing: 0.2em; }

.box .section { color: #AAA; text-transform: uppercase; font-family: Nevis; letter-spacing: 3px; font-size: 0.7em; }
.box p img { max-width: 100%; }

/* ---- Unboxed body content ---- */

.unboxed { padding-top: 0.5em; padding-bottom: 1em; }
.unboxed h3 { font-weight: normal; }

/* ---- Green-topped content box ---- */

.greenbox {
	background-color: #DEE6D4;
	padding: 0.5em;
	font-family: PT Sans;
}
.greenbox h3 {
	font-weight: normal;
	font-size: 0.9em;
	background-color: #D1DBC3;
	padding: 0.5em ;
	margin: -0.5em -0.5em 0.5em -0.5em;	/* reverse padding */
}
.greenbox:not(.buzz) h3 {
	color: #231F20 !important;
	font-family: Nevis;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.greenbox.borderless { padding: 0; }
.greenbox.borderless h3 { margin: 0; }
.greenbox.borderless .inner { padding: 0.5em; }

/* ---- Buzz ---- */

.greenbox.buzz h3 {
	background-color: #51878B;
	color: white !important;
	text-transform: none;
	font-family: PT Serif;
	font-size: 1.5em;
	padding: 0.1em 0.3em;
	margin: -0.3em -0.3em 0.3em -0.3em;
	width: 100%;
}
.greenbox.buzz h3 a { color: white !important; }
.greenbox.buzz h3 span {
	font-family: PT Sans;
	font-size: 0.5em;
	float: right;
	padding-top: 1em;
	opacity: 0.8;
}
.buzz .date { color: #999; font-family: PT Sans; text-transform: uppercase; font-size: 0.7em; padding-bottom: 0.2em; }
.buzz .date a { color: #999; }
.buzz .date .section { background-color: #FBAD39; color: white; padding: 2px 4px; }
.buzz .date .section:before { font-family: Verdana; content: "\25CB \25CB"; letter-spacing: 0.2em; }
.buzz h4 { padding-bottom: 0.2em; }
.buzz p { font-size: 0.8em; }
.buzz .item { margin-bottom: 0.5em; }

.buzz_week .date { margin-top: 0.3em; }
.buzz_week h4 { font-family: PT Serif; font-size: 1.3em; font-weight: normal; }

/* ---- Blue highlight box ---- */

.highlightbox {
	background-color: #18819B;
	font-family: PT Sans;
	color: white;
}
.highlightbox h3,.highlightbox h3 a {
	font-family: PT Serif;
	color: white !important;
}
.highlightbox a {
	color: white !important;
}
.highlightbox:after {
	border-top: 1px solid #DD5A31;
}

/* ---- Blue-topped intro box ---- */

.introbox h3 {
	color: white !important;
	z-index: 1;
	position: relative;
	padding-bottom: 1em;
}
.introbox>div>*:first-child:before {
	content: "\201C";
	font-size: 5em;
	float: left;
	height: 0.1em;
	padding-right: 0.1em;
	margin-top: 0.4em;
	color: #18819B;
}
.introbox:after {
	content: "";
	border-top: 2.8em solid #18819B;
	left: 0; top: 0; right: 0; bottom: 0;
	pointer-events: none;
}

/* ---- Green-topped feature box ---- */

.featurebox {
	background-color: #343434;
	color: white;
}
.featurebox h3 {
	color: white !important;
	z-index: 1;
	position: relative;
	padding-bottom: 1em;
}
.featurebox h3 a { color: white !important; }
.featurebox .date {
	margin-top: -3.2em;
	margin-bottom: 1em;
	text-align: right;
	z-index: 1;
	position: relative;
	color: white;
}
.featurebox:after {
	/* we use this in preference to the greenbox padding/margin solution, to avoid rounding errors */
	content: "";
	border-top: 2.8em solid #199662;
	left: 0; top: 0; right: 0; bottom: 0;
	pointer-events: none;
}


/* ---- Orange-topped black content box ---- */

.blackbox {
	background-color: black;
	color: white;
	font-size: 1.2em;
	line-height: 1.1em;
	padding: 0.5em 0.5em 0.4em 0.5em;
}
.blackbox .leadout, .blackbox .leadout a {
	color: #FBAD39;
	font-size: 1em;
	font-weight: normal;
}
.blackbox:after {
	content: "";
	border-top: 7px solid #51878B;
	left: 0; top: 0; right: 0; bottom: 0;
	position: absolute;
	pointer-events: none;
}
.stack>.blackbox { border-top: 7px solid #51878B; padding-top: 0.2em; }
.stack>.blackbox:after { border-top-width: 0; }

/* ---- Misc boxes ---- */

.darkgreenbox {
	background-color: #A0AA90;
	padding: 0.5em;
	color: white;
}
.darkgreenbox a {
	color: white;
}

.small_content { font-size: 0.8em; }
.small_content h4 { color: #777 !important; }

/* ---- Unboxed cross headline ---- */

h2.cross { padding: 0.3em 0.3em 0 0.3em; }

/* ---- Trailers for further content ---- */

.trailer { background-color: #DEE6D4; clear: both; }
.trailer>div { width: 100%; }
.trailer>div>div { display: inline-block; }

.trailer .title_strong {
	color: white;
	font-family: Nevis;
	text-transform: uppercase;
	letter-spacing: 3px;
	background-color: #A0AA90;
	padding: 0.5em;
}
.trailer .strong {
	padding: 0 0.5em;
	font-family: PT Sans;
}

.trailer .title_medium {
	font-family: PT Sans Narrow;
	text-transform: uppercase;
	background-color: #D1DBC3;
	padding: 0.5em;
}
.trailer .medium {
 	padding: 0 0.5em;
	font-family: PT Serif;
}

/* Front page top trailer */

.trailer.front_banner>div>div:first-child {
	padding-left: 1em;
	width: 32%;
}
.trailer.front_banner { overflow: hidden; max-height: 2.2em; margin-top: -8px; }
.trailer.front_banner>* { border-top-width: 0; padding-left: 0.3em; }
.trailer.front_banner .topic_date { padding-left: 0.4em; }
.trailer.front_banner .title_medium { margin-left: -0.3em; margin-right: 5px; }

.trailer.front_banner .medium {
	vertical-align: text-bottom;
	max-height: 1.4em;
	display: inline-block;
}
.tag {
	display: inline; 
	font-family: PT Sans Narrow;
	text-transform: uppercase;
	color: white;
	background-color: #A0AA90;
	font-size: 0.9em;
	padding: 0.1em 0.4em; 
}
.tag a { color: white; }
.tag a:hover { text-decoration: underline; }

.trailer .login {
/*	z-index: 1;
	position: relative;*/
	float: right !important;
	display: block;
	font-family: PT Sans Narrow;
	text-transform: uppercase;
	color: #AAA;
	padding: 0.5em 0.5em 0.5em 0;
	background-color: #DEE6D4; 
}

/* ---- Full-width pic header ---- */

#header {
	background-size:cover;
	margin-bottom: 10px;
	background-position: right top;
}
.front #header { margin-bottom: 0; margin-top: 0.5em; }

#header>div {
	position: relative; padding: 0;
}
#header .intro {
	width: 33%;
	min-width: 300px;
	margin: 0.5em;
	padding: 0.5em;
}
.front #header .intro, .city #header .intro { min-height: 0; padding: 0; }
.front #header .intro>div, .city #header .intro>div {
	padding: 0.5em;
	background: white;
	background: rgba(255,255,255,0.93);
}
.login_bar { background-color: #DEE6D4 !important; padding-top: 0.2em !important; }
.login_bar img { vertical-align: bottom; padding-left: 3px; }

#header .coverline {
	position: absolute;
	color: white !important;
	bottom: 0.7em; left: 1em;
	border-width: 0px;
	z-index: 1;
}

/* ---- Full-width banner header ---- */

#banner {
	background: #51878B;
	text-align: center;
	padding: 1em 2em;
	margin-bottom: 10px;
	margin-top: 10px;
}
.city #banner { margin-top: 0; }
#banner h2 { color: white; font-weight: normal; font-size: 1.5em; padding: 0.5em; }
#banner p { color: white; padding: 0.5em; max-width: 40em; }
#banner a { color: white !important; }

.call_to_action { 
	font-family: Nevis; 
	text-transform: uppercase; 
	font-size: 0.7em; 
	letter-spacing: 2px;
}
.call_to_action:before {
	content: url('../site_images/pen.png');
	margin-right: 8px;
	position: relative;
	top: 2px;
}

/* ---- Articles ---- */

.article { padding: 0.5em 1em 0.5em 1em; }
.article img { max-width: 100%; }

.article>h2 {
	font-size: xx-large;
	color: black !important;
	font-weight: normal;
	padding: 0;
}
.article .date {
	background-color: #DEE6D4;
	border-width: 0 8px;
	padding: 0.15em 0.4em;
	width: auto;
	font-family: 'PT Sans Narrow'; text-transform: uppercase; font-size: small;
	display: inline;
}
.article .attrib, .embedded.attrib { color: #999; font-size: 0.8em; padding-top: 0.4em; border-width: 0 8px; font-family: 'PT Sans'; }
.article .attrib a, .embedded.attrib a { color: #999; font-weight: bold; }
.article .meta { border-width: 0 8px; }
.previous_story, .next_story {
	text-align: center;
	width: 45%; 
	max-width: 45%;
	font-family: 'PT Sans';
	font-size: small;
	border-top: 1px solid #CCC;
	padding-top: 0.3em;
	margin-top: 1em;
}

.embedded.attrib { padding-top: 0; padding-bottom: 0.5em; margin-top: -0.5em; }

.journey_trail {
	max-width: 31.6em !important;
	text-align: justify; cursor: pointer;
	border-top: 2px solid #CCC;
	border-bottom: 2px solid #CCC;
	padding: 0.7em;
	background-color: #F3F3F3;
	color: gray;
	min-height: 128px;
	margin: 0.2em 0 0.5em 0;
}
.journey_trail span { display: block; padding-bottom: 0.5em; }
.journey_trail img { display: inline-block; float: left; max-width: 256px !important; max-height: 128px !important; margin-right: 10px; }
.journey_trail span.header { font-size: 1.2em; font-weight: bold; padding-bottom: 0.5em; color: #2F915B; font-family: 'PT Sans';}
.journey_trail span.header:hover { text-decoration: underline; }
.journey_trail a { color: gray !important; }

/* ---- Article decoration ---- */

.story_links {
	width: 100% !important;
	display: inline-block;
}
.previous_story:before, .next_story:before {
	font-family: Verdana;
	content: "\25CB \25CB";
	color: #DD5A31;
	display: block;
	padding-bottom: 3px;
text-align: center;
}
.previous_story { float: left;}
.next_story { float: right; }

.pull_quote {
	float: left;
	margin: 0.2em 0.5em 0.4em 0;
	font-size: large;
	font-family: 'PT Serif';
	font-style: italic;
	color: #51878B;
	width: 40%;
	max-width: 200px;
}
.pull_quote.right { padding-left: 1em; }

/* ---- Summary items ---- */

.summary_image { display: table-cell; vertical-align: top; padding-right: 1em; padding-bottom: 0.5em; }
.summary_text { display: table-cell; vertical-align: top; }

/* ---- Forums ---- */

.pager_nav {
	background-color: #DEE6D4;
	border-top-width: 0; border-bottom-width: 0;
	line-height: 1.5em;
	font-family: 'PT Sans';
}
.pager_nav>.legend, .pager_nav .call_to_action, h3.action .call_to_action {
	display: inline-block;
	height: 100%;
	padding: 2px 0.8em;
	font-family: Nevis;
	text-transform: uppercase;
	font-size: small; 
	letter-spacing: 3px;
}
.pager_nav>.legend { background-color: #D1DBC3; }
.pager_nav .call_to_action, .greenbox h3 .call_to_action {
	float: right;
	color: white;
	background-color: #A0AA90;
}

.pager_nav .option {
	color: #999;
	border-right: 1px solid #AAA; 
	display: inline-block;
	height: 100%;
	padding: 2px 0.4em 2px 0.2em;
}
.pager_nav .option a { color: #999; }
.pager_nav .option.selected {
	color: white;
	background-color: #A0AA90;
	border-right-width: 0;
	padding-left: 0.4em;
}
.pager_nav .option.selected a { color: white; }

.forum_index { 
	width: 100%;
	display: table;
	background-color: white;
	border-top-width: 0; border-bottom-width: 0;
	border-collapse: collapse;
}
.forum_index tr:nth-child(even) {
    background-color: #F2F2F2;
}
.forum_index.unalt tr:nth-child(even) { background-color: white; }
.forum_index td { padding: 1px 6px; }
.forum_index th {
	background-color: white;
	padding: 10px 6px 6px 6px;
	font-family: 'PT Sans Narrow'; text-transform: uppercase; font-weight: normal; color: #CCC; 
	font-size: small;
	text-align: left;
}
.forum_index th h3 { color: black; font-weight: bold; padding-top: 1em; padding-bottom: 0; }
.forum_index tr th:first-child {
	color: #51878B;
	font-weight: bold;
}
.forum_index tr:last-child td {
	padding-bottom: 8px;
}
.forum_index .attrib { font-style: italic; font-size: small; }
.forum_index .count { text-align: center; }
.unboxed>.forum_index { border-width: 0; margin-bottom: 1em; }

/* Table-like call to action for greenbox */
.greenbox h3.action { padding: 0; }
.greenbox h3.action>span { display: inline-block; padding: 0.5em 0 0 0.5em; }
.greenbox h3.action>* { padding: 0.3em; margin: 0; height: 1.5em; }

/* ---- Hero image ---- */

.hero { position: relative; color: white; }
.hero img { border-bottom-width: 0 !important; z-index: 0; }
.hero .coverline {
	position: absolute; bottom: 1em; left: 1.5em;
	border-width: 0px;
	z-index: 1;
}
.hero .slogan {
	position: absolute; bottom: 1.5em; right: 1.5em; 
	text-align: right;
	border-width: 0px;
	z-index: 1;
	line-height: 1;
	text-shadow: #444 2px 2px 2px;
}
.coverline h2, .hero h2 { font-weight: normal; font-size: x-large; color: white !important; padding-bottom: 0; }
.sectionline {
	font-family: PT Sans Narrow;
	text-transform: uppercase;
	font-size: 0.7em;
	font-weight: bold;
	background-color: #51878B; /* *** theme this: city/route/otherwise */
	padding: 2px 5px 1px 5px;
	margin-bottom: 2px;
	display: inline-block;
}

.hero .headline {
	position: absolute; bottom: 0; left: 0;
	border-width: 0px;
	z-index: 1;
	background-color: rgba(255,255,255,0.3);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#50ffffff', endColorstr='#50ffffff');
	text-shadow: #444 1px 1px 1px;
}
.hero .headline h2 {
	font-size: xx-large;
	line-height: 1.2em;
	color: white !important;
	margin: 0.2em 0 0.3em 1em;
}
.tag_inverse.hero .headline h2 { color: black !important; }

/* ---- Remove spacing for run-on pages ---- */

.run_on #header { margin-bottom: 0; border-bottom: 10px solid white; }
.run_on #footer { margin-top: 0; }
.city.run_on .hero img,
.route.run_on .hero img { border-top-width: 0; }
.run_on .hero img { padding-bottom: 0; border-bottom: 10px solid white; }

/* ---- Contribution pages ---- */

#write_intro { max-width: 40em; }

/* ---- City specific ---- */

.city_call { font-size: 1em; line-height: 1.2em; }
.city_action { font-size: 0.9em; }
.city_action span { 
	display: inline-block;
	border-radius: 50%;
	width: 1.1em; height: 1.1em; font-size: 0.8em;
	padding-left: 1px;
	background: #51878B; color: white;
	text-align: center;
	font-family: PT Sans;
	margin-right: 5px;
}
.sans_link { font-family: PT Sans; font-weight: bold; }
.sans_link_small { font-family: PT Sans; font-weight: bold; font-size: 0.8em; }
.ncn_link { padding-bottom: 3px; }
.ncn_list { font-family: PT Sans; font-size: 0.8em; line-height: 1.2em; }
.excursion { font-family: PT Sans; font-size: 0.8em; border-bottom: 1px solid #CCC; padding: 0.3em 0 0.6em 0; margin-bottom: 0.2em; }
.excursion a { font-weight: bold; }
.excursion>img { float: left; }
.excursion>div { margin-left: 50px; }
.excursion_header { color: black; }

.cities_list, .cities_list li { list-style: none; list-style-type: none; padding: 0; margin: 0; }

#city_travelogue { margin-bottom: 0.5em; }
#city_options { padding-left: 1.5em; margin-bottom: 0.5em; font-style: italic; }
#city_options input { margin-left: 1em; }

table.route_summary_list { width: 100%; margin-bottom: 0.7em; }

/* ---- Route guide specific ---- */

/* Intro page */

.narrative { display: block; border-bottom-width: 0; }
.narrative p { max-width: 36em; text-align: justify; }
.narrative div.trail { 
	max-width: 31.6em; /*36em*0.9em-2*0.4em*/ 
	text-align: justify; padding: 0.4em; margin-top: 1em; cursor: pointer;
	background-color:#EB632B; color:white;
}
.narrative div.trail * { color: white }
.narrative .oversize { max-width: 44em; overflow: hidden; }
.narrative ul, .narrative ol { max-width: 33.3em; text-align: justify; }
.narrative.right p { float: right; max-width: auto !important; }
.narrative img { max-width: 100%; max-height: 100%; }

.route_numbers {
	padding-bottom: 0.5em;
}
.route_numbers>span, .ncn_number {
	font-family: Helvetica, Arial;
	font-weight: bold;
	font-size: 0.8em;
	padding: 1px 3px;
	border-radius: 3px;
	-webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box;
	background-color: red;
	color: white;
	border: 1px solid white;
}

/* Guide page */

#stage_number {
	border-left-width: 0;
	position: absolute;
	left: -8px; top: 20px;
}
#stage_number>span {
	background-color: #EEAD2E;
	font-size: x-large;
	padding: 0.7em 1.1em;
	color: white;
}
#stage_description { padding-left: 5em; border-left-width: 0; padding-bottom: 1em; }
#stage_description h3 { font-family: PT Sans; }
#stage_text { border-bottom: 1px solid #CCC; padding-bottom: 1.5em; }
#stage_text p { text-align: justify; }
#stage_text h3 { color: black; }

#stage_shops         { padding-top: 1em; float: left; width: 48%; }
#stage_accommodation { padding-top: 1em; float: right; width: 48%; }

.stage_link { font-family: PT Sans; color: #999; font-size: 0.9em; padding: 0.2em 0; }
.stage_link a { color: #999; }
.stage_link:before {
	font-family: Verdana; 
	content: "\25CB\25CB"; letter-spacing: 0.1em;
	margin-left: -5em; width: 4.8em; padding-right: 0.2em; display: inline-block; text-align: right; 
	color: #DD5A31;
}

.stage { display: none; }

/* Route list */

.index_attrib { color: #999; font-size: 0.8em; padding: 0.4em 0; border-width: 0 8px; font-family: 'PT Sans'; }

/* ---- Splash download page ---- */

.splash { text-align: center; padding: 2em 0; }
.splash>img {
	width: auto;
	display: inline-block;
}
.splash h2 { color: black !important; font-size: x-large; font-weight: normal; }
.splash p { max-width: 40em; }
.splash input[type=button] {
	color: white; background-color: #EEAD2E; width: auto; border-width: 0; font-size: 1.5em;
	padding: 0.5em; 
	font-family: PT Sans;
}

/* ---- Dialogue box-type page ---- */

.dialogue {
	display: table;
	position: absolute;
	top: 0; left: 0;
	height: 100%; width: 100%;
	z-index: -1;
}
.dialogue>div {
	display: table-cell;
	vertical-align: middle; border-width: 0;
}
.dialogue_box {
	max-width: 20em;
	margin-left: auto; margin-right: auto;
	border-top: 1px solid #CCC;
	background-color: white;
	padding: 1em 0.5em;
	text-align: center; 
}
.dialogue_box h3,
.dialogue_box h4,
.dialogue_box p { font-weight: normal; padding-bottom: 1em; }
.dialogue_box h4 { padding-top: 1em; }
#login_form table { margin-left: auto; margin-right: auto; padding-bottom: 0.5em; }
#login_form tr { text-align: left; min-height: 1.8em; }
#login_form td { padding-right: 1em; }

input[type='submit'], button { 
	border: 0; padding: 0.2em 0.5em; 
	color: white; 
	background-color: #FBAD39;
	font-family: 'PT Sans'; font-weight: bold; font-size: small;
	cursor: pointer; 
}
.dialogue_box button { background-color: #2E7993; }

.form_hint { font-size: 0.8em; line-height: 1.4em; font-style: italic; color: #999; padding-bottom: 10px; padding-top: 2px; }

/* ---- Front-page route-planner header ---- */

#planner_trailer>div {
	height: 300px;
	font-family: PT Serif; text-align: center; color: white; font-size: 1.2em;
	text-shadow: #444 0px 0px 8px;
	background-position:center;
}
#planner_trailer h2 {
	font-family: nevis;
	font-size: 1.5em;
	text-transform: uppercase;
	color: white;
	letter-spacing: 5px;
	margin-top: 100px;
}
#planner_trailer input[type=text] {
	width: 110px;
	vertical-align: middle;
	margin-bottom: 5px;
	height: 1.4em;
	font-size: 0.8em;
}
#planner_trailer input[type=submit], #planner_trailer button {
	background-color: #2F915B;
	padding: 1px 0.3em;
	font-size: 0.7em;
	vertical-align: middle;
	margin-bottom: 5px;
	border: 2px solid #7A7;
}
#planner_trailer input[type=submit]:hover, #planner_trailer button:hover { background-color: #7A7; }
#planner_trailer {
	margin-bottom: 8px;
}
#planner_trailer a { color: white; text-decoration: none; }
#inspired_input { margin-top: 10px; }
#inspired_input>div { display: inline-block; vertical-align: middle; line-height: 1.7em; }
#inspired_input>div:first-child { margin-right: 1em; }
#inspired_input button { min-width: 6em; display: inline-block; }

/* ---- User pages ---- */

.profile { border-top-width: 8px; }
.profile .image { display: inline-block; width: 25%; max-width: 18em; vertical-align: top; padding-right: 1em; }
.profile img { width: 100%; }
.profile .description { display: inline-block; width: 70%; }
#preferences_form td { padding-bottom: 4px; padding-right: 10px; }
#preferences_form input[type=number] { width: 40px; }

.user_specific { display: none; } /* overridden by user_123 */
.logged_in { display: none; }
.logged_out { display: block; }
span.logged_out { display: inline; }

/* ---- Styling for narrative sections ---- */

img.float_left  { width: auto; margin: 0em 1em 0.5em 0; float: left; }
img.float_right { width: auto; margin: 0em 0 0.5em 1em; float: right; }

p.float_left  { display: inline; width: auto; margin: 0em 1em 0.5em 0.5em; float: left;  }
p.float_right { display: inline; width: auto; margin: 0em 0.5em 0.5em 1em; float: right; }
p.float_left img, p.float_right img { max-width: 100%; }

/* ---- Forms ---- */

form.sectioned>div {
	padding-top: 1em;
}

input.large {
	font-size: large;
	padding: 0.5em;
	width: 30em;
	max-width: 93%;
}

form.dotted {
	border-left: 1px dashed gray;
	background-color: #F0F9F9;
	padding: 0.5em 0.5em 0.5em 1em;
	font-style: italic;
	margin-bottom: 1em;
}
form.dotted>input[type='submit'] {
	margin-top: 1em;
}
.wym_classes { display: none !important; }

/* ---- Universal text styles ---- */

.from {
	color: #888;
	font-family: Nevis;
	font-size: 0.5em;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* ---- Comments ---- */

#comments {
	padding-top: 2em;
	width: 100% !important;
}

.comment { 
	width: 100%;
	border-top: 1px solid #CCC;
	padding: 0.5em 0 0.5em 0;
}
.comment_attrib { 
	font-family: PT Sans;
	font-size: 0.8em;
	float: left;
	width: 25%;
}
.comment_body { 
	font-family: PT Serif;
	margin-left: 25%;
	vertical-align: top;
	min-height: 3em;
	border-left: 1px solid #CCC;
	padding-left: 1em;
}
.comment_body>* { font-size: 0.8em; line-height: 1.5em; }
.comment_name { font-weight: bold; }
.comment_date { color: #AAA; }

#comment_edit { padding-top: 1em; }
.comment_fragment_edit { border-top: 1px solid #CCC; padding-top: 0.5em; }

/* ---- Search ---- */

.search_results { padding-bottom: 1em; }
.search_results h3 { padding-bottom: 0.2em; }
.box .pager_nav { margin: 0 -10px -10px -10px; }
.search_typo { padding-bottom: 1em; font-style: italic; }
.search_typo a { color: #FBAD39; }
.search_results .section { padding: 0.5em 0 0.1em 0.1em; }

/* ---- Single image (404 etc.) ---- */

.single_image {
	padding: 1em 0;
	text-align: center;
}

/* ---- Listings ---- */

.book_affiliate      { padding: 0.5em 0; font-family: 'PT Sans'; }
.link_nonaffiliate   { padding: 0.2em 0; font-family: 'PT Sans'; font-size: small; }
.book_affiliate a    { background-color: #FBAD39; color: black; padding: 2px 0.3em; margin-right: 10px; }
.link_nonaffiliate a { background-color: #9AA588; color: white; padding: 2px 0.3em; margin-right: 10px; }
a.add_shortlist		 { background-color: #9AA588; color: white; padding: 2px 0.3em; cursor: pointer; }

.listing_description { font-size: small; padding-bottom: 0.5em; }
.listing_town { font-family: 'PT Sans'; font-weight: bold; }
.listing_address, .listing_provides { font-family: 'PT Sans'; font-size: small; }
.listing_address { padding-bottom: 0.5em; }
.listing_provides span { text-transform: capitalize; }
.listing_logos { padding: 0.5em 0; }
.listing_logos img { padding-right: 1em; max-width: 60px; }

.listing_image { float: left; padding-right: 10px; }
.listing_image img { max-width: 200px; max-height: 200px; }

.listing_details div { font-family: 'PT Sans'; font-size: small; }
.listing_details .category { font-weight: bold; }

/* Sidebar listings */

.list { font-size: 0.9em; }
.list .town { font-weight: bold; padding: 0.5em 0; }
.list .item .number { display: block; float: left; }
.list .item .name { display: block; padding-left: 25px; }
.list .item .price { display: block; float: right; color: #999; }

/* Guide page listings */

.summary_list h4 { margin-top: 0.3em; }
.summary_list .item { font-size: 0.9em; font-family: PT Sans; }
.summary_list .item .name { display: block; }
.summary_list .item .info { display: block; float: right; color: #999; }
.summary_list { padding-bottom: 1em; }
.summary_list .row_0 { border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; }
.images_grid { padding-top: 1em; padding-bottom: 0.5em; }

/* Listing pages */

.listing_full_image {
	width: 48%; max-width: 170px; display: inline-block; padding-right: 2%;
}

/* YHA layout */

.ride_list { width: 48%; float: left; }
.ride_list.first { margin-right: 20px; }

/* Shortlist */

.shortlist p { font-size: 0.8em; }

/* ---- Explore ---- */

.loading { background-color: #E3E3E3; text-align: center; }
.loading a { font-weight: bold; font-family: PT Sans; }
#none_found { display: none; }
#none_found div { text-align: center; }
.destination_details, .destination_info { font-family: PT Sans; font-size: 1em; }
.destination_info { border: 4px solid #CCC; }
.destination_details a { font-weight: bold; }
.also_here { font-style: italic; font-size: 0.8em; }
#listing_description { display: none; } /* map page */
/*.destination_details img { float: left; padding-right: 10px; }*/
/*.destination_details>div { margin-left: 50px; }*/
.destination_logo { width: 50px; display: table-cell; vertical-align: top; }
.destination_summary { display: table-cell; }
.explore_map { margin-top: 0.7em; }
.route_rating { display: inline-block; }
#distance_controls, #type_controls { color: white; padding: 0.5em; font-size: 0.9em; }
#refreshButton { margin-left: 1em; }
#distanceSlider { width: 100px; }
#explore_header { margin-bottom: 5px; }
#explore_header_start { font-size: 1.5em; color: white; vertical-align: bottom; padding-right: 8px; }
.explore_place { font-size: 1em; padding: 2px 5px; max-width: 9em; font-family: PT Sans; opacity: 0.95; }

#explore_recs { margin-bottom: 2em; }
#explore_recs div h3 { padding-bottom: 0; font-weight: normal; font-size: 1.5em; }
#explore_recs p.starting { padding-bottom: 12px; }
#explore_recs p.starting span { font-family: Nevis; text-transform: uppercase; }
#explore_recs img { height: 207px; width: 310px; }
#explore_recs .image { height: 207px; width:310px; margin-bottom: 6px; }
#explore_recs .lh { position: absolute; background-color: black;   color: white; padding: 4px; font-family: Nevis; }
#explore_recs .rh { position: absolute; background-color: #DEE6D4; color: black; padding: 4px; font-family: Nevis; right: 7px; }

.crosshead_bleed { margin-bottom: 10px; width: 100%; display: table; }
.crosshead_bleed div.bg { border-width: 0; background-color: #E8E8E8; width: 100%; left: 0; right: 0; position: absolute; height: 45pt; }
.crosshead_bleed h1 { padding-left: 8px; font-size: 1.5em; font-family: Nevis; font-weight: normal; border-width: 0; vertical-align: middle; height: 45pt; display: table-cell; }
.crosshead_bleed span.rh { font-family: PT Serif; font-size: 0.7em; float: right; }

#overnight_start { border: 2px solid white; }

/* Destinations */

.destination_info { background: #E3E3E3; padding: 3px; color: black; }
.destination_info a { font-weight: bold; }
.archies { font-size: 0.8em; }
.archies img { float:left; margin: 0 8px 0 2px; }
.archies a { letter-spacing: 1px; }
.listing_photo { max-width: 150px; max-height: 150px; margin: 2px 10px 2px 3px; float: left; }
.listing_summary { font-size: 0.8em; }
.listing_summary .listing_text { }
.destination_info .book_affiliate a { color: black; font-weight: normal; margin-left: 10px; }

/* ---- Gallery ---- */

.am-wrapper { float:left; position: relative; overflow: hidden; }
.am-wrapper img { position: absolute; outline: none; }
.gallery * { letter-spacing: -3pt; }
#lightbox {
	position: fixed;
	z-index: 10;
	top: 0; left: 0;
	width: 100%; height: 100%; 
	background-color: rgba(0,0,0,0.7);
	text-align: center;
	display: none;
}
#lightbox img {
	width: auto;
	cursor: pointer;
    position: absolute;
    margin: auto;
    left: 0; right: 0;
    top: 0; bottom: 0;  
	box-shadow: 0 0 25px #111;
	-webkit-box-shadow: 0 0 25px #111;
	-moz-box-shadow: 0 0 25px #111;
	max-width: 100%;
	padding: 0;
}

/* ---- Routing (most is in map.css, but this is required for the routeplanner embed) ---- */

.placename_input { width: 100%; }
.pn_prompt { float: left; width: 60px; }

/* ---- Typeahead ---- */

.tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
.tt-hint { color: #999; }
.tt-suggestion { padding: 0px 10px; }
.tt-suggestion.tt-cursor { color: #fff; background-color: #0097cf; cursor: pointer; }

.tt-dropdown-menu {
	font-style: normal !important;
	overflow: visible;
	font-family: PT Sans;
	text-align: left;
	color: black;
	text-shadow: none;
	width: 300px;
	margin: 0;
	padding: 2px 0 0 0;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.acResult {
	border-bottom: 1px solid #BBB;
	margin: 0; padding: 4px 0 4px 0;
}
.acResult .acName {
	font-size: 0.8em;
	line-height: 1em;
	padding-top: 2px;
}
.acResult .acLocation {
	font-size: 0.6em;
	line-height: 0.8em;
	padding-top: 4px;
	color: #999;
}
.acCompact { border-bottom: 1px solid #BBB; margin: 0; padding: 6px 0 4px 0; line-height: 0.9em; }
.acCompact .acName { font-size: 1em; font-weight: normal; }
.acCompact .acLocation { font-size: 0.7em; font-weight: normal; color: #999; }

/* ---- Ads ---- */

.ad_container { }
.ad_container * {
    margin: 0 auto;
    margin-bottom: 8px;
}
.floating_ad_container {
	display: inline-block;
	float: right;
/*	background-color: #EEE; */
    margin-right: 8px; 
	margin-left: 1em; /* keep clear of content */
}

.ad_area { border-width: 0 !important; z-index: 110; }
.ad { text-align: center; } /* centre ad images */
.ad * { max-width: 100% !important; max-height: 100% !important; } /* shrink if necessary [not iframes] */
.ad img { width: auto; height: auto; } /* don't stretch */

/* ---- Utils ---- */

.review_table {
	width: 100%;
}
.review_table td { border-top: 1px solid #CCC; padding: 5px; vertical-align: top; }
.review_table td button { margin: 5px; }
.review_name { font-weight: bold; width: 20%; }
.review_friendly { color: red; }
.review_full { display: none; }

/* ---- New-look front page ---- */

.front2 #top_nav { background-color: transparent; border-top-color: transparent; }
.front2 #sections>span { text-shadow: 0px 0px 5px rgba(0,0,0,0.7); }
#route_input_box {
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
	display: table;
	padding: 1em;
	background-color: rgba(47,145,91,0.8);
}
#route_input_box>div {
	display: inline-block;
	vertical-align: top; 
	text-align: left; 
	color: white; 
	font-family: PT Sans; 
	font-weight: bold; 
	text-shadow: 0px 0px 5px rgba(0,0,0,0.7);
}
.route_fromto {
	font-size: 1.5em;
	padding: 2px 5px;
	max-width: 9em;
}
#route_to_div { margin-right: 2em; }
#route_expander { margin-top: 1em; display: none; }
#route_types { font-size: 1.2em; font-weight: normal; }
#route_expander>button { 
	color: black; font-size: 1.5em; width: 100%;
}
#fp_hero_content {
	position:relative; z-index: 20; margin-top:100px; background-color: none; border-width: 0px; min-height:470px;
}
#fp_headline1 {
	color: white; font-family: Nevis; font-size: 3em; text-shadow: 0px 0px 5px rgba(0,0,0,0.7); text-align: center;
	padding-left: 1em; padding-right: 1em;
	font-weight: 400;
}
#fp_headline2 {
	color: white; font-family: PT Serif; font-style: italic; text-shadow: 0px 0px 5px rgba(0,0,0,1); font-size: 1.5em; margin-top: 0.5em; text-align: center;
	padding-left: 1em; padding-right: 1em;
}
#fp_quote {
	position:absolute; 
	top: 500px; background-color: #F9F7F2; padding-top: 1em; padding-left: 4em; padding-right: 4em; text-align: center;
	left: auto; right: auto; max-width: 800px;
}
#fp_quote>div {
	font-style:italic; font-size: 1.5em; color: #444;
}
#fp_dimmer {
	z-index:10;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display:none;
}
#fp_header_image {
	z-index:-1; height:500px; 
	background-position: bottom; background-size: cover; 
	position: absolute; left: 0px; right: 0px; top: 0px; 
}
/* coast */ .hero1 { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAYACgDASEAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEAwX/xAAoEAACAgIAAwcFAAAAAAAAAAABAgMEABEhMUEFEiIyUXGBNUKRodH/xAAZAQACAwEAAAAAAAAAAAAAAAACBQADBAH/xAAfEQACAgICAwEAAAAAAAAAAAAAAQIDERITMSFBUaH/2gAMAwEAAhEDEQA/AO8afrmMUUM+zC6uF5kZs5RdxPGR2qcPLkktM+mHC0FxZM1Jt+XDNKuQDTOhLLLYj7jTjR561xxq0rRhxF4FXgdqBvXUYoeiltkYp2OGmoC9JJOIY5AWKd8+EcB0xZZbP2yJ+BhqyH0rlXYnjBBPbtR85Ix76wy5W147K3XL2jpih2aAwe6jgjWi6jj8ZilalWsbVxJsDTCRNL0IAJ5YsShFYbGDm35EmgRm28vfHAgGeNdH3ytVpPGC9xUbqBKra/WC1W12dU5GElbsuQ/UR8Ov8wwdYff0m7P/2Q=="); }
/* Kent  */ .hero2 { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAbACgDASEAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAwQAAgUG/8QALBAAAgEDBAEBBgcAAAAAAAAAAQIDAAQRBRIhMUEiExQVYYGhMjRCUXGxwf/EABgBAAMBAQAAAAAAAAAAAAAAAAECAwQA/8QAIREAAgEDBAMBAAAAAAAAAAAAAAECAwQhERITMUFRcZH/2gAMAwEAAhEDEQA/AOijtl+VMJbgftW11DEqYzHEi8nk0yjRj9AqE5NmiEUgu5B0BUqeSuDi4NXu2jDrGGUnG4R8f3TDaleZGHWMDyYs5+9ZJ366Sz9Hja+2XXUrhlLCdCQDlRH19aqur3kaQ72tZDMm9B6kOOeDxjNSVzUlFy9FOKCehSbW9STdstUc9gLID/lSirt+WvwLoLwjJheNE2Ko/hfFGiIlwiszE9+qsO3OrKtroJcXa2iBWhmfkAlEzmkrC2HwgRSqxAJ7zzz3z1V0tIE3mQrJcXOnsPxTQeRu9SfXzUocO7KG5NMMMiL7RhjjA4rU05V91zjnJpX2dFZBqTv7PINWT8wAemU5+dMugIRuQMgYGN2PtUpkFH//2Q=="); }
/* woods */ .hero3 { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAZACgDASEAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAQFAwIB/8QAKhAAAgEDAgUDBAMAAAAAAAAAAQIDAAQREjEFIUFRYRNygRQyM8E0obH/xAAXAQADAQAAAAAAAAAAAAAAAAAAAQID/8QAHBEBAQEBAAIDAAAAAAAAAAAAAAERAgMxEiEi/9oADAMBAAIRAxEAPwCPHLHBD68Y0jZwTv5Hkf3T3DIdEbzzRlpZFOEYZCDHbyP1WW4pol8qLJEzEANkhum1eSXSTQzNHGMOjLpJzuMH5o0J/wBXIbSNBGhTRp1acMSPNFAZxiCa4tYhIyxY1MzJ1xtvV88OSWHEV6MHHMLvjalZaCr8Cle6ErzK6gdORzS13bLaGOJ7pg0kuNJXke4HnmKP1uYchS0tZMsk3qQuCSAwxy+aKnrr7KyqFrbRW6mWXJKjJJP6qhZTBbOIlQCw1Hl3OafF3auz4zGpucb7VI4jLHPcxFwJNDBhqBIX46jxWqZTaX6zxgtjsR5oqLzD1jxD+FJ7DTC/ij9gqfH6V5PbiTY1Nufyr7hWjOubb7G9zf7RQH//2Q=="); }