/* Layout */
html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
body {background-color: white;}
#globalsites {position: fixed; height: 30px; z-index: 9999; width: 100%; border-top: 2px solid #ddd;}
main {position: fixed; width: 100%; height: calc(100% - 32px - 25px); top: 32px;}
main form {width: 100%; height: 100%;}
nav {position: absolute; right: 0; width: 335px; height: 100%; z-index: 1000;}
header {position: relative; left: -8px; padding: 5px 8px 20px; margin: 0; background: rgba(255,255,255,0.2);}
footer {position: fixed; width: 100%; height: 25px; z-index: 9999; bottom: 0; padding: 0;}

/* Font definitions */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(//fonts.gstatic.com/s/raleway/v11/bIcY3_3JNqUVRAQQRNVteQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(//fonts.gstatic.com/s/raleway/v11/JbtMzqLaYbbbCL9X6EvaIy3USBnSvpkopQaUR-2r7iU.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: local('Raleway Italic'), local('Raleway-Italic'), url(//fonts.gstatic.com/s/raleway/v11/IIm-lPOtfVKQy0GMiczF_6CWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 700;
  src: local('Raleway Bold Italic'), local('Raleway-BoldItalic'), url(//fonts.gstatic.com/s/raleway/v11/lFxvRPuGFG5ktd7P0WRwKonF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}

/* Typography */
body, input, textarea {font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 1em;} /* https://www.google.com/fonts */
p.smaller {font-size: 0.73em;}
p.right {float: right;}

/* Header */
header h1 {padding-top: 0; font-weight: normal; margin-top: 15px; margin-bottom: 5px;}
header p {margin: 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;}

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

/* Main controls */
nav {color: white;}
nav a {color: white; text-decoration: none; border-bottom: 1px solid gray;}
#map .mapboxgl-ctrl-attrib {margin-right: 335px;}

/* Layer-specific popup styling */
#map .mapboxgl-popup.trafficcounts .mapboxgl-popup-content {min-width: 500px; max-width: 500px;}
#map .mapboxgl-popup.trafficcounts table td, #map .mapboxgl-popup.trafficcounts table th {font-size: 0.83em;}
#map .mapboxgl-popup.trafficcounts table th {text-align: left; line-height: 2em;}
#map .mapboxgl-popup.trafficcounts table td {text-align: right;}

/* Form styling */
input[type=checkbox] {margin-right: 5px;}


h2 {margin-bottom: 2px; padding-bottom: 0;}


#selector {float: left; width: 95px; height: 100%; background-color: #333; opacity: 0.85; overflow-y: auto;}

#selector ul {height: 100%; list-style: none; width: 100%; margin: 0; padding: 0;}
#selector ul li {margin-left: auto; margin-right: 0; border-top: 1px solid gray; border-left: 4px solid gray; position: relative;}
#selector ul li:first-child {border-top: 0;}
#selector ul li:last-child {border-bottom: 1px solid gray;}
#selector ul li.selected {background-color: black; border-left: 4px solid brown;}
#selector ul li a {font-size: 0.9em; padding: 17px 7px; display: block; text-align: center;}
#selector ul li:hover {background-color: #111;}
#selector ul li.selected:hover {background-color: black;}
#selector ul li a img {width: 40px;}

#selector input {position: absolute; left: 6px; top: 6px;}

/* Toolbar */
#sections {width: 200px; height: calc(100% - 20px); position: absolute; right: 0; background-color: black; opacity: 0.85; margin-top: 0; padding: 0 20px 20px; font-size: 0.92em; overflow: scroll;}

/* Sections */
#sections #compare > div {opacity: 0.5;}
#sections #compare div.enabled {opacity: 1;}
#sections #compare div p {margin-bottom: 4px;}
#sections #compare div .controls label {width: 45px; display: inline-block;}
#sections ul {margin: 5px; padding: 5px;}
#sections ul li {margin-bottom: 7px;}

#sections div.filters {background: rgba(255,255,255,0.1); padding: 0 0 5px; margin: 20px 0 15px;}
#sections div.filters h3 {background-color: rgba(255,255,255,0.2); padding: 2px 5px; margin: 0; font-size: 1.1em;}
#sections div.filters p {margin: 0;}
#sections div.filters > div {padding: 5px 5px;}
#sections div.filters > h4 {padding-left: 5px; padding-right: 5px;}
#sections h4 {font-size: 1em; font-weight: normal; padding: 0; margin: 12px 0 2px;}
#sections .controls {padding: 0; margin: 0;}
#sections div.filters ul {list-style: none; margin: 0; padding: 0;}
#sections div.filters ul li {margin-bottom: 0;}		/* Reset main rule above */

/* Legend */
#legend {background-color: #515151; color: #ffffff; padding: 15px; border-radius: 10px; opacity: 0.85; width: auto; max-width: 140px;}

/* Tabs */
ul.tabs {margin-left: 0; padding-left: 0; }
ul.tabs li {display: inline; margin-right: 5px;}
ul.tabs li a {padding: 2px 10px; color: gray; border: 1px solid white; border-bottom: 0;}
ul.tabs li.ui-state-active a {background-color: #333; color: white;}

/* Embed view */
.embed header, .embed footer {display: none;}
.embed #map .leaflet-control-layers {right: calc(335px - 95px);}
.embed nav {width: 240px;}

/* Autocomplete */
.ui-autocomplete-loading {background: white url("/images/ui-anim_basic_16x16.gif") right center no-repeat;}

/* Mobile styles; see: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions */
#nav-mobile {display: none;}
@media only screen and (min-width: 320px) and (max-width: 768px) {
	#nav-mobile {display: block; cursor: pointer; position: absolute; top: 40px; right: 10px; background: white url(../images/hamburger.svg) no-repeat center center; opacity: 0.9; height: 10px; width: 10px; padding: 17px; border-radius: 20px; box-shadow: 5px 5px 5px #aaa;}
	#geocoder {top: 14px; right: 80px;}
	#geocoder input {width: 100%;}
	footer {overflow-x: auto;}
	nav {display: none;}	/* Default, toggled in JS */
	nav {width: 260px; z-index: 1002;}
	#selector {width: 90px;}
	#selector ul li a {font-size: 0.83em;}
	#sections {width: 150px; padding: 0 10px 20px; font-size: 0.83em;}
	#map .mapboxgl-ctrl-attrib {margin-right: 10px /* default */;}
}