/* ©2023 dotguide.co.uk  v31.010  Yorkshire.guide wide stylesheet  */

/* Stylesheet order: STYLES+buttonpics+pictures>WIDE>small>smallwide>tablet */

div#toolbar {visibility: visible; position: fixed; display: inline-block; background-color: rgba(50,50,120,0.6); float: right; top: 152px; right: 28px; margin: 0px 10px 0px 0px; padding: 8px 20px 0px 10px; height: 36px; z-index: 20; }

phonehide {visibility: visible;}

body {width: 100vw; height: 100vh; background: skyblue; background-image: url('graphics/background2662sq.png'); background-size: 100%, 100vw; background-attachment: fixed; color:white; z-index: -2; overflow-y: hidden; font-family: arial, verdana, sans-serif; font-size: 100%;}

body#scrollwide {width: 100%; height: 100%; background: skyblue; background-image: url('graphics/background2662sq.png'); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; color:white; z-index: -2; overflow-y: hidden; font-family: arial, verdana, sans-serif; font-size: 100%;}

body#noscroll {width: 100%; height: 100%; background: skyblue; background-image: url('graphics/background2662sq.png'); background-size: 100%, 100vw; background-attachment: fixed; color:white; z-index: -2; overflow: hidden; font-family: arial, verdana, sans-serif; font-size: 100%;}

/* -- sections ---   */

section, subsection, flyer, post, memorial, wrap, notice, warning, railtpe, seaside, festive, york, election, hunk {width: 98%;}

/* -------   */

cap650, cap650xc, cap320, cap320w, cap320xc, cap320xxc, cap650s, cap650sxc {font-size: 0.5em; }

img980 {display: inline-block; position: relative; float: right; right: -9px; width: 980px; height: 320px; margin: 0px 2px 10px 8px; background-position: center;}

gfx980 {display: inline-block; position: relative; float: right; right: -9px; width: 980px; height: 686px; contain: paint; margin: 0px 2px 32px 10px;}
gfx980 buttons {display: inline-block; position: absolute; top: 650px; left: 0px; float: right; width: 959px; height: 36px; background-color: white; color: black; padding: 0px 10px 0px 10px; border: 0px; z-index: 200}
img.gfx980 {width: 980px; height: 650px;}

#bigmap {left: 200px; }

#halfmap {z-index: 3; display: block; position: fixed; top: 20px; left: 400px; right: 20px; bottom: 40px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; border-radius: 20px;}

div#text {left: 200px; padding: 0px 28px 5px 9px; right: 18px; font-size: 1.5em;}


/* Flexible table elements */

gn0 {position: relative; display:inline-block; width: 8px; text-align: right; font-size: 100%; padding-right: 2px; margin: 4px 4px 10px 0px;}
gn1 {position: relative; display:inline-block; width: 14px; text-align: right; font-size: 100%; padding-right: 2px; top: 2px; margin: 4px 4px 10px 0px;}
gn2 {position: relative; display:inline-block; width: 70px; text-align: right; font-size: 100%; padding-right: 2px; margin: 4px 4px 10px 0px;}
gn3 {position: relative; display:inline-block; width: 96px; text-align: right; font-size: 100%; padding-right: 2px; margin: 4px 8px 10px 0px;}
gn4 {position: relative; display:inline-block; width: 164px; text-align: right; font-size: 100%; padding-right: 2px; margin: 4px 8px 10px 0px;}
gn5 {position: relative; display:inline-block; width: 270px; text-align: right; font-size: 100%; padding-right: 2px; margin: 4px 8px 10px 0px;}

gt0 {position: relative; display:inline-block; width: 8px;  text-align: left; font-size: 100%; padding-left: 1px; margin: 4px 4px 10px 0px;}
gt1 {position: relative; display:inline-block; width: 14px;  text-align: left; font-size: 100%; padding-left: 1px; top: 2px; margin: 4px 4px 10px 0px;}
gt2 {position: relative; display:inline-block; width: 70px;  text-align: left; font-size: 100%; padding-left: 1px; margin: 4px 4px 10px 0px;}
gt3 {position: relative; display:inline-block; width: 96px;  text-align: left; font-size: 100%; padding-left: 1px; margin: 4px 8px 10px 0px;}
gt4 {position: relative; display:inline-block; width: 164px;  text-align: left; font-size: 100%; padding-left: 1px; margin: 4px 8px 10px 0px;}
gt5 {position: relative; display:inline-block; width: 270px;  text-align: left; font-size: 100%; padding-left: 1px; margin: 4px 8px 10px 0px;}
gt6 {position: relative; display:inline-block; width: 380px;  text-align: left; font-size: 100%; padding-left: 1px; margin: 4px 8px 10px 0px;}
gt6 {position: relative; display:inline-block; width: 480px;  text-align: left; font-size: 100%; padding-left: 1px; margin: 4px 8px 10px 0px;}




h2, subsection h2, post h2, notice h2, memorial h2, warning h2, railtpe h2, seaside h2, festive h2, york h2 {font-size: 1.5em;}

mapbox h2 {font-size: 1.6em;}

h3, subsection h3, post h3, memorial h3, section h3, wrap h3, flyer h3, railtpe h3, seaside h3, festive h3, york h3 {font-size: 1.4em;}

mapbox {position:fixed; display:inline-block; top: 140px; left: 8px; right: auto; width: 650px; max-width: 90%; height: auto; margin: 0px 0px 0px 0px; background-color: rgba(255, 255, 255, 0.8); color: black; padding: 0px 10px 4px 10px; border-radius: 12px; border: 0px solid #334477; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black;z-index: 200;}

div#mapboxbuttons {position: relative; top: -40px; } /* ------- container for mapbox buttons -------------  */

div#gaz-a, div#gaz-b, div#gaz-c, div#gaz-d, div#gaz-e, div#gaz-f, div#gaz-g, div#gaz-h, div#gaz-i, div#gaz-j, div#gaz-k, div#gaz-l, div#gaz-m, div#gaz-n, div#gaz-o, div#gaz-p, div#gaz-q, div#gaz-r, div#gaz-s, div#gaz-t, div#gaz-u, div#gaz-v, div#gaz-w, div#gaz-x, div#gaz-y, div#gaz-z, div#gaz-district {display: none; position: relative; width: 100%; font-size: 1.0em;} /* gazetteer alphabet sections initially hidden */

gaz-buttons {font-size: 1.0em; }

div.buttonblock {float: right; width: 660px;}

a.button {padding: 5px 10px 5px 10px; min-width: 360px; }


a.keybuttonsmall {display: inline-block; background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-size: 1.2em; font-weight: bold; padding: 0px 6px 10px 6px; border: solid 1px darkblue; margin: 0px 3px 12px 5px; text-decoration: none; text-align: center; vertical-align: middle; height: 24px; min-width: 24px; border-radius: 2px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; }
a.keybuttonsmall:hover {background-color: chartreuse;}

/* webcam */

div.smallcamimgdiv {width: 240px; height: 160px; margin: 0px 10px 20px 0px; }
img.smallcamimg {width: 240px; height: 160px; object-position: 57% 71%; } 

div.webcamtime {left: 148px; }


candidates postponed {width: 350px;}
candidates title {width: 350px;}
candidates lab {width: 350px;}
candidates labcoop {width: 350px;}
candidates con {width: 350px;}
candidates lab {width: 350px;}
candidates libdem {width: 350px;}
candidates greenp {width: 350px;}
candidates ukip {width: 350px;}
candidates yorks {width: 350px;}
candidates engdem {width: 350px;}
candidates reform {width: 350px;}
candidates noc {width: 350px;}
candidates lab {width: 350px;}
candidates ind {width: 350px;}
candidates party {width: 350px;}
candidates await {width: 350px;}


/* --- */

/* Home button */
a#home {position: relative; height: 400px; top: 0px; left: 0px; background-image: url('buttonpics/york.jpg'); background-position: center 50px; background-size: auto; width: 156px; border-radius: 20px 20%; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black;}
a#home:before {display: block; position: static; top: 10px; text-align: left; font-size: 1.6em; content:"Home";}
a#home:after {display: block; position: relative; top: 260px; text-align: left; font-size: 1.2em; content: "Click here for the main menu";}
a#home:hover {background-image: url('buttonpics/york.jpg'); background-position: center 50px; background-size: auto; }


/* Go back button */
a.mapback {position: absolute; top: 420px; left: 0px; width: 156px;}  

/* Menu button */
a#menu {height: 80px; width: 80px; } 

br.spacer {display: none;}

td {font-size: 1.1em;}

/* mapbox */

mapboxcontainer {position:fixed; display: inline-table; left: 20px; top: 142px; background-color: rgba(255, 255, 255, 0.9); color: black; width: 340px ; height: 540px; padding: 0px 10px 5px 10px; border-radius: 12px; border: 0px solid #334477; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; z-index: 200; font-family: arial, verdana, sans-serif; font-size: 100%;}

mapboxcontainer div#buttons {position: absolute; display: table-cell; background: transparent; left: 10px; top: 480px; width: 320px; height: 50px; z-index: 201;}
mapboxcontainer div#mapboxdistrict {position: absolute; display: table-cell; background: transparent; left: 10px; top: 66px; min-width: 360px; height: 40px; z-index: 203;}
mapboxcontainer div#mapboxtext {position: absolute; display: table-cell; background: transparent; left: 10px; top: 344px; width: 300px; height: 40px; vertical-align: middle; z-index: 201;}

mapboxcontainer div#mapboxblobs {position: absolute; display: inline-block; left: -20px; top: 106px; width: 320px; height: 100px; background: rgba(180,180,180, 0);  float: left ; font-size: 0.7em; vertical-align: top; z-index: 201;}  *
mapboxcontainer h2 {position: absolute; display: inline-block; background: rgba(50,50,120, .5); color: white; font-size: 1.6em; padding: 3px 3px 3px 10px; vertical-align: middle;  top: 0px; height: 34px; width: 330px; z-index: 201;}
mapboxcontainer h3 {position: absolute; display: inline-block; background: transparent; color: cyan; font-size: 1.2em; padding: 1px 0px 3px 8px; vertical-align: middle; top: 5px; left: 345px; width: 320px; z-index: 202;}

mapboxcontainer img {position: absolute; display: table-cell; left: 20px; top: 180px; width: 320px; height: 155px;}

mapboxcontainer img.tinyblob{display: inline-block; position: relative; top: 3px; left: 0px; margin: 0px 0px 0px 0px; max-width: 24px; max-height: 24px;}
mapboxcontainer img.blob {position: relative; left: 0px; width: 48px; height: 48px; float: left;}
mapboxcontainer div#mapboxblobs img {width: 48px; height: 48px; float: left;} 

mapboxcontainer a.mapboxdistrict {display: inline-block; float: left; color: white; background-color: rgba(96, 182, 42, 0.9); font-size: 1.2em; font-weight: bold; border-width: 1px; border-style: solid; border-color: #ddddee; padding: 0px 12px 1px 4px; vertical-align: top; min-width: 324px;}
mapboxcontainer a.mapboxdistrict:hover {background-color: chartreuse;}

mapboxcontainer a.shortbutton img {position: relative; top: 0px; left: 0px; width: 120px; height: 32px;}
mapboxcontainer a.button img {position: relative; top: 0px; left: 0px; width: 120px; height: 32px;}

mapboxcontainer h2 a {visibility: hidden;} /* used to hide close button */

mapboxcontainer blf {display: block; position: relative; left: -316px; top: 30px; z-index: 205; } 



/* leaflet custom amendments */

/* general typography */
.leaflet-container {
	font: 14px arial, verdana, sans-serif;
	font-weight: normal;
	}
	
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.5;
	font-size: 15px;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}	
	
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {

	font-size: 40px;

	}