/* Layout */
html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
body {background-color: white;}
header {position: absolute; top: 0; height: 30px; width: 100%; border-top: 2px solid #ddd;}
main {width: 100%; height: calc(100% - 57px); padding-top: 32px; padding-bottom: 25px; background-color: #4d0026; color: white;}
#mapcontainer {width: 100%; height: 100%;}
nav {position: fixed; z-index: 500; top: 32px; right: 0; bottom: 25px; width: 300px; background-color: #4d0026; color: white; padding: 20px 30px; opacity: 0.95; overflow-y: auto;}
footer {position: absolute; width: 100%; height: 25px; bottom: 0; padding: 0; overflow: hidden;}

/* Typography */
body, input, select, textarea {font-family: 'Varela Round', Arial, Helvetica, sans-serif; font-size: 1em;}
p.smaller {font-size: 0.73em;}
p.right {float: right;}

/* Links */
:target {webkit-animation: none; animation: none;}	/* Reset from generic.css */
h2 a {text-decoration: none;}

/* Global properties navigation */
header {background-color: gray;}
header p, header ul {margin: 0; padding: 0; position: relative; top: -2px; font-size: 0.93em; overflow: hidden;}
header p, header ul li a {color: white; text-decoration: none;}
header p {float: left; color: white; padding: 4px 11px 0;}
header ul {height: 100%; margin-left: 200px;}
header ul li {height: 100%; float: left; margin: 0; padding: 0; list-style: none;}
header ul li a {display: block; height: 28px; padding: 2px 20px; margin: 0; border-top: 2px solid white;}
header ul li.cyclestreets a {border-color: LightGoldenRodYellow;}
header ul li.cyclestreets a:hover {background-color: LightGoldenRodYellow; color: gray;}
header ul li.widenmypath a {border-color: #683047;}
header ul li.widenmypath a:hover {background-color: #4d0026;}
header ul li.widenmypath.selected a {background: #4d0026;}
header ul li.cyclescape a {border-color: green;}
header ul li.cyclescape a:hover {background-color: green;}
header ul li.streetfocus a {border-color: lightblue;}
header ul li.streetfocus a:hover {background-color: lightblue;}
header ul li.bikedata a {border-color: purple;}
header ul li.bikedata a:hover {background-color: purple;}
header ul li.urbancycleparking a {border-color: #cc2900;}
header ul li.urbancycleparking a:hover {background-color: #cc2900;}
header ul li.blog a {border-color: #999;}
header ul li.blog a:hover {background-color: #999;}

/* Global properties hiding */
body.noproperties header {display: none;}
body.noproperties main {height: calc(100% - 25px); padding-top: 0;}
body.noproperties nav {top: 0;}

/* Footer */
footer {background-color: gray;}
footer p {margin: 5px 20px 5px 5px; padding: 0; text-align: right; color: #eee; font-size: 0.78em; white-space: nowrap;}
footer p a {color: #ccc; text-decoration: none;}

/* Background map design feature */
#backgroundmap {position: relative; width: 100%; height: 100%; z-index: 1;}
#backgroundmap::before {position: absolute; left: 0; width: 100%; height: 100%; opacity: 0.1; z-index: -1; background: url('/images/map.jpg'); background-position: center; content: '';}

/* Home page */
body.home main {background-image: url('/images/landscape.svg'); background-size: auto 200px; background-position: bottom; background-repeat: repeat-x; margin-bottom: 0;}
body.home nav {width: 200px;}
body.home #backgroundmap {margin-right: 400px;}
body.home #content {position: absolute; width: calc(100% - 340px); padding: 20px 300px 40px 40px;}
body.home h1 {padding-top: 0; font-size: 3em; margin-top: 20px; margin-bottom: 20px;}
body.home nav #homepages {opacity: 0.7;}
body.home nav h2 {padding-top: 10px;}
body.home nav p a {color: white; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
body.home #photos {float: right; width: 200px; padding-top: 20px; margin-left: 20px;}
body.home #photos img {width: 210px; height: 150px; border: 0;}
body.home #socialmedia {margin-top: 30px;}
body.home #socialmedia img {width: 30px; height: 30px; vertical-align: middle;}
body.home #socialmedia a {margin-left: 3px; border-bottom: 0;}
body.home #socialmedia a:first-child {margin-left: 5px;}
body.home #socialmedia img.instagram {width: 24px; height: 24px; padding-left: 2px;}

/* Home page main geocoder and geolocation */
body.home #where {margin-top: 40px;}
body.home #geocoder {height: 50px;}
body.home #geocoder input[type="search"] {width: calc(100% - 220px - 50px); max-width: 320px; margin-left: 0; height: 50px; border-style: solid; border-color: #c1c1c1; border-width: 2px 0; padding: 8px 15px; font-size: 17px;}
body.home #browsemap a {color: white; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}

/* Map active area, for centring purposes */
.activearea {position: absolute; top: 32px; right: 360px; bottom: 25px; left: 0;}

/* General pages */
body main.general #content {padding: 40px; height: calc(100% - 80px); overflow: scroll;}
body main.general h1 {font-size: 2.05em; height: 80px; display: inline-block; float: right; margin: 0; padding-bottom: 30px;}
body main.general h1 {background-image: url('/images/landscape-transparent.svg'); background-size: auto 40px; background-position: left 40px; background-repeat: repeat-x; margin-bottom: 0;}
body main.general h1 a {color: white; text-decoration: none;}
body main.general h2 {clear: both; margin-top: 50px;}
body main.general h3 {margin-top: 2.2em;}
body main.general a {color: white;}
body main.general ul li {margin-bottom: 6px;}
body main.general table td {padding-bottom: 10px;}

/* Areas page */
body.areas #content li a {color: white; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); font-size: 0.87em;}
body.areas ul.inline {margin: 25px 0;}
body.areas ul.inline li:first-child {padding-left: 0;}
body.areas #areas {width: auto; max-width: 600px;}
body.areas #areas h3 {margin-top: 40px; border-top: 1px solid gray; padding-top: 20px; margin-bottom: 10px;}
body.areas table {border-spacing: 0;}

/* Areas page search */
body.areas #areasearch {margin: 30px 0;}
body.areas #areasearch input {-webkit-appearance: none; -moz-appearance: none; border: 0; padding: 5px 10px; margin-right: 20px; width: 15em; margin-bottom: 15px;}
body.areas #areasearch a {text-decoration: none;}

/* Suggest page title */
body.suggest h1 {margin-top: 0; font-size: 2.05em; text-align: right; width: auto; margin-left: 12px; margin-bottom: 2px;}
body.suggest h1 a {text-decoration: none;}
body.suggest p#city {margin-top: 2px; padding: 0; text-align: right; font-size: 0.9em;}
body.suggest #lobby {margin-top: 20px; padding: 12px; background-color: rgba(255, 255, 255, 0.2); border-radius: 15px;}

/* Map */
#loading {position: absolute; z-index: 1000; top: 130px; left: 10px; width: 30px; height: 30px; background-color: white; opacity: 1; border: 2px solid #bbb; border-radius: 4px;}
.leaflet-control-attribution {display: none; /* attribution is present in the main site footer instead */}
#mapcontainer #attribution {position: absolute; display: block; height: 20px; width: 65px; left: 10px; bottom: 10px; text-indent: -9999px; z-index: 99999; overflow: hidden; background-image: url('/images/mapbox.svg'); background-repeat: no-repeat; background-position: 0 0; background-size: 65px 20px;}
body #mapcontainer #helptext {bottom: 40px;}

/* Popups */
body .leaflet-container {font: inherit;}
body .leaflet-popup-content-wrapper {width: 300px; padding-top: 10px;}
body .leaflet-popup-content-wrapper, body .leaflet-popup-tip {background-color: #683047; color: white; font-size: 0.82em;}
/*
.leaflet-popup .hasphoto {min-height: 270px;}
.leaflet-popup .hasphoto img {margin-top: 7px;}
*/
.leaflet-popup .hasphoto img {display: none;}
.leaflet-popup .hasphoto #likes img {display: inline;}
.leaflet-popup #likes {margin: 0 0 5px 10px; padding: 2px;}
.leaflet-popup .id {display: none;}
.leaflet-popup.suggest .leaflet-popup-content-wrapper {width: 210px;}
body .leaflet-container .leaflet-popup a {color: white;}
body .leaflet-container a[target=_blank]:link, body .leaflet-container a[target=_blank]:visited {background-image: none; padding-right: 0;}

/* Filters */
body #mapcontainer #filters {left: 90px;}
#mapcontainer #filters select {font-size: 0.9em;}
body #mapcontainer #overlay {left: 325px;}

/* Form styling */
#introduction {color: #4d0026; font-weight: bold; padding: 12px; background-color: rgba(255, 255, 255, 0.8); border-radius: 15px; margin-top: 1.4em; margin-bottom: 2em;}
#inputs p {margin: 25px 0 7px;}
#inputs input, #inputs textarea {-webkit-appearance: none; -moz-appearance: none;}
#inputs #form_caption {width: 90%; height: 60px; padding: 10px; border-radius: 7px;}
#inputs div.mapsetting {width: auto; height: 40px; padding: 5px; background-color: rgba(255, 255, 255, 0.125); border-radius: 7px;}
#inputs div.mapsetting:hover {cursor: -webkit-zoom-in;}
#inputs div.mapsetting span, #inputs .geolocate-button a {color: white;}
#inputs div.mapsetting span {font-size: 32px;}
#inputs div.mapsetting .geolocate-button a {font-size: 20px; background-color: rgba(255, 255, 255, 0.1); width: 20px; height: 20px; padding: 6px; border-radius: 50%;}
#inputs div.mapsetting span.close {float: right; font-size: 24px; padding: 2px 2px 0 0; line-height: 10px; display: none;}
#inputs div.mapsetting span.close a {text-decoration: none; cursor: pointer;}
#inputs div.mapsetting span.tick {display: block; width: 20px; height: 20px; border: 1px dashed #666; margin: 8px 0 0 10px; float: left; vertical-align: top; line-height: 20px;}
#inputs div.mapsetting.set {background-color: rgba(255, 255, 255, 0.5);}
#inputs div.mapsetting p {margin: 5px 0 0 45px; padding: 0; line-height: 1em; vertical-align: middle;}
#inputs .geolocate-button {display: none; float: right; margin: 4px 10px 0 0;}
#inputs .geolocate-button a {text-decoration: none;}
#inputs div.category {position: relative; width: 100%; margin: 0 0 20px; padding: 0;}
#inputs div.category br {display: none;}
#inputs div.category input {position: relative; display: inline-block; width: 30% /* though this results in slightly less visible width */; height: 75px; margin: 0 6px 6px 0; padding: 0; background-repeat: no-repeat; background-size: 35px auto; background-position: center 7px; background-color: rgba(255, 255, 255, 0.125); border-radius: 7px;}
#inputs div.category input:hover, #inputs div.category label {cursor: cell;}
#inputs div.category input:active, #inputs div.category input:checked {background-color: rgba(255, 255, 255, 0.5);}
#inputs div.category input[value="cycleways"]    {background-image: url('https://www.cyclestreets.net/images/categories/iconsets/cyclestreets/svg/cycleways_bad.svg');}
#inputs div.category input[value="track"]        {background-image: url('https://www.cyclestreets.net/images/categories/iconsets/cyclestreets/svg/track_bad.svg');    }
#inputs div.category input[value="closure"]      {background-image: url('https://www.cyclestreets.net/images/categories/iconsets/cyclestreets/svg/closure_bad.svg');  }
#inputs div.category input[value="bikeshare"]    {background-image: url('https://www.cyclestreets.net/images/categories/iconsets/cyclestreets/svg/bikeshare_bad.svg');  }
#inputs div.category input[value="cycleparking"] {background-image: url('https://www.cyclestreets.net/images/categories/iconsets/cyclestreets/svg/cycleparking_bad.svg');}
#inputs div.category input[value="congestion"]   {background-image: url('https://www.cyclestreets.net/images/categories/iconsets/cyclestreets/svg/congestion_bad.svg');}
#inputs div.category label {position: absolute; top: 50px; width: 30%; margin: 0; text-align: center;}
#inputs div.category label:nth-of-type(1) {left: 0;}
#inputs div.category label:nth-of-type(2) {left: calc(30% + 10px);}
#inputs div.category label:nth-of-type(3) {left: calc(60% + 20px);}
/* Four categories - single row, 25% each */
body.categories4 #inputs div.category input {width: 22%; margin-right: 3px;}
body.categories4 #inputs div.category label {font-size: 0.77em;}
body.categories4 #inputs div.category label:nth-of-type(1) {left: calc(-5% + 3px);}
body.categories4 #inputs div.category label:nth-of-type(2) {left: calc(19% + 5px);}
body.categories4 #inputs div.category label:nth-of-type(3) {left: calc(41% + 10px);}
body.categories4 #inputs div.category label:nth-of-type(4) {left: calc(64% + 15px);}
/* Five or six categories - two rows, width as per three categories */
body.categories5 #inputs div.category label, body.categories6 #inputs div.category label {font-size: 0.77em;}
body.categories5 #inputs div.category label:nth-of-type(4), body.categories6 #inputs div.category label:nth-of-type(4) {left: 0; top: 134px; /* 75px+50px+6px+adjustment */}
body.categories5 #inputs div.category label:nth-of-type(5), body.categories6 #inputs div.category label:nth-of-type(5) {left: calc(30% + 10px); top: 134px;}
body.categories6 #inputs div.category label:nth-of-type(6) {left: calc(60% + 20px); top: 134px;}
#inputs input[type="submit"] {margin-top: 0; margin-bottom: 3em; padding: 6px 8px; width: 100%; border: 0; border-radius: 10px; color: #4d0026; font-weight: bold;}
.notification.error {width: 100%; margin-right: 340px; /* i.e. avoid nav panel */}
p#thankyou {margin-top: 4em;}
nav a {color: white;}

/* About page */
body.about ul.parameters tt {text-decoration: underline;}

/* Export */
#legal, #export {font-size: 0.67em;}
#export a[target=_blank] {background-image: none; padding: 0;}

/* Batch upload */
div.graybox p {color: black;}
body main.general div.confirmationmap a {color: black; /* i.e. reset to Leaflet.js style .leaflet-bar a */}

/* IE10+ workarounds; see: https://paper-leaf.com/blog/2014/09/targeting-ie-10-11-browsers-css/ */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
	#backgroundmap::before {opacity: 1; background-image: none; background-color: #4d0026;}
	body.home #geocoder input[type="search"] {padding: 0 5px;}
	/* Disable image-based radio buttons, by resetting all properties */
	#inputs div.category input {position: static; display: inline; width: auto; height: auto; background: none;}
	#inputs div.category label {position: static; top: 0; width: auto; text-align: left;}
	#inputs div.category br {display: block;}
	main {position: fixed; top: 32px; height: calc(100% - 57px); padding-top: 0;}
}


/* Mobile styles; see: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions */
@media only screen and (min-width: 320px) and (max-width: 768px) {
	header {height: 25px; font-size: 0.83em;}
	header ul {margin-left: 80px;}
	header ul li a {padding: 2px 5px;}
	main {height: calc(100% - 62px); padding-top: 25px;}
	nav {position: relative; top: auto; right: auto; bottom: auto; width: auto; height: 800px; margin-top: -110px; overflow-y: auto; padding: 15px;}
	body #mapcontainer #helptext {bottom: 120px;}
	.activearea {position: static; top: auto; right: auto; bottom: auto; left: auto;}
	body.home nav {height: 350px; width: auto; margin-top: 0; opacity: 1;}
	body.home #content {width: calc(100% - 30px); padding: 15px;}
	body.home main {background-size: auto 80px;}
	body.home h1 {margin-top: 10px; font-size: 2.4em;}
	body.home #photos {display: none;}
	body.home #where {margin-top: 20px; font-weight: bold;}
	body.home #geocoder input[type="search"] {width: 280px;}
	body.home nav h2 {padding-top: 0;}
	body main.general #content {padding-left: 20px; padding-right: 20px;}
	body main.general h1 {float: none; padding-bottom: 0;}
	body.suggest h1 {height: 40px; font-size: 1.7em;}
	body .leaflet-popup-content-wrapper {width: 275px;}
	.notification.error {margin-right: 0;}
	#inputs div.mapsetting .geolocate-button {display: block;}
	#mapcontainer #attribution {bottom: 120px;}
	body #mapcontainer #filters {bottom: 120px;}
}