html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

html { -webkit-font-smoothing: antialiased; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.25), 
	only screen and ( min-device-pixel-ratio: 1.25), 
	only screen and ( min-resolution: 200dpi), 
	only screen and ( min-resolution: 1.25dppx) {
	-webkit-font-smoothing: subpixel-antialiased;
} 


#helpContent {position: absolute;top: 100px;bottom: 0;left: 0;right: 0;background: grey;padding: 2em;z-index: 3;}

.intro p {line-height:1.3;margin-bottom:2ex;}
.intro h2 {line-height:1.3}

.help a.hide {display:none!important;}
.help span {display:inline-flex;align-items:center;justify-content:center;text-align:center;}

i.closed {transform:rotate(270deg);}

i.pre-poll {background:url('../icon/pre-poll.png') no-repeat;}
i.pre-poll-accessible {background:url('../icon/pre-poll-accessible.png') no-repeat;}
i.polling {background:url('../icon/standard.png') no-repeat;}
i.polling-accessible {background:url('../icon/standard-accessible.png') no-repeat;}
.legend i {display:inline-block;width:calc(42px / 2);height:calc(47px / 2);background-size:contain;vertical-align:middle;}

.findmylocation {background: url('../icon/find-my-location.png') center center no-repeat;background-size: contain;border-radius: 2px;}
#map_wrapper .findmylocation {cursor: pointer;text-align: center;margin: 0px 9px 0px 0px;width: 29px;height: 29px;}

@keyframes load{
    0% { opacity:0.3; }
    50% { opacity:0.6; }
    100% { opacity:0.3; }
}

#map_wrapper>div,
#map_wrapper>div>div {height:100%;}
#map_wrapper:empty::before,
#map_wrapper>div>div:empty::before {
	content: 'Loading map and electoral district information. \A\A  Please wait...';
	text-align:center;white-space:pre;display: flex;align-items: center;justify-content: center;height: 100%;opacity: 0.6;
	-webkit-animation: 2s ease 0s normal forwards infinite load;
	animation: 2s ease 0s normal forwards infinite load;
}
#map_wrapper.error-loading:empty::before, #map_wrapper.error-loading>div>div:empty::before {
	content: 'Failed to load district map. \A\A Please wait a moment and refresh the page.';
	text-align: center;
	white-space: pre;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	opacity: 0.6;
	-webkit-animation: none;
	animation: none;
}

select:focus::-ms-value {background-color: white;color:#000;}

	.grid {min-height:100vh;transform:translateZ(0);}
	.grid:after {/*content: "";*/display: table;clear: both;} /* might be messing with grid */

	.header {
		grid-area: header;
		
		background: rgb(41,115,176);
		background: -moz-linear-gradient(top, rgba(41,115,176,1) 0%, rgba(36,102,165,1) 100%);
		background: -webkit-linear-gradient(top, rgba(41,115,176,1) 0%,rgba(36,102,165,1) 100%);
		background: linear-gradient(to bottom, rgba(41,115,176,1) 0%,rgba(36,102,165,1) 100%);
		
	}
	.header {
		display:flex;
		flex-direction:row;
		align-items:center;
	}
	.footer>* {flex:1 1 auto;}

	@media only screen and (max-width:767px) {
		.footer {display:block;text-align:center;line-height:1.6;}
		.footer>:last-child {margin-top:1em;text-align:center;}
		.findmylocation {width: 40px;height: 40px;}
	}

	.header>* {flex: 1 1 auto;}
	@media only screen and (min-width:1024px) {

		.footer {
			display:flex;flex-direction:row;align-items:center;
		}
		.footer>:last-child {text-align:right;}
	}
		.search {background: rgba(0,0,0,0.25);max-width: 33.33%;min-width: 33.33%;}
		.help {text-align:right;white-space:nowrap;z-index: 1;}
		.help a i {display: inline-flex;align-items: center;justify-content: center;font-size: 150%;font-weight: bold;padding: 0ex;width: 2em;height: 2em;vertical-align: middle;margin: 0em 0 0em 1ex;border-radius:50%;box-shadow:0 0 1px white;background-size: 3ex;}
		.help a {border:none;margin-left:auto;height: 3em;cursor: pointer;display: inline-flex;align-items: center;justify-content: flex-end;width: 9em;}
		.help a i {background-color: transparent;transition:background-color 250ms linear;}
		.help a:hover i {background-color: rgba(255,255,255,0.1);transition:background-color 250ms linear;}
		
	.left {
		grid-area: left;
		position:relative;
		padding: 0!important;
	}
		.content {/* margin-bottom: 11em!important; */padding: 1em;overflow: auto;flex: 1 0 auto;/* max-height:calc(100% - 11em); */}
		.legend {padding:1em;flex:none;/* position:absolute; */bottom:1em;margin-top:auto;}
	.map {grid-area: map;min-height: 60vh;}
	.right {grid-area: right;
		display:flex;
		flex-direction:column;
	}
	.left,.right,#helpContent {
		background: rgb(46,46,46);
		background: -moz-linear-gradient(top, rgba(46,46,46,1) 0px, rgba(105,105,105,1) 400px);
		background: -webkit-linear-gradient(top, rgba(46,46,46,1) 0px,rgba(105,105,105,1) 400px);
		background: linear-gradient(to bottom, rgba(46,46,46,1) 0px,rgba(105,105,105,1) 400px);
		text-shadow: 0 1px 3px rgba(0,0,0,0.4);
		overflow: auto;
	}
	.footer {grid-area: footer;background:#f5f5f4;color:#636360;font-size:0.8em;}
	.footer a, .footer a:visited {color:#636360;font-weight:bold;}
	.footer a+a {margin-left:1em;}
	
	.intro span[class] {display:none;}
	
/* layout */
	/* if no grid (ie11, edge15) */
		@media only screen and (max-width:767px) {
			.grid {padding-top:115px;} /* ie11/edge15 do this differnently */
			.grid>* {min-width:100%;}
			.header {position:absolute;top:0;height: 155px;flex-direction:  column;text-align: center;align-items: initial;}
			.map { position:relative; /* top:115px; */min-height:40vh;top: 40px;}/* top for ie */
			.search {position: absolute;top: 80px;height: 75px;left:0;right: 0;min-width:100%;max-width:100%;padding: 15px;}
			.search label {width: calc(100% - 9.3em);}
			.help {display: flex;align-items: center;justify-content: flex-end;align-self:flex-end;height: calc(2.8em + 30px);padding-top: 15px;padding-bottom: 15px;margin-bottom: -16px;}
			.logo img {max-width: 70vw;}
			.logo div {font-size: 3.2vw;}
			.footer {background:#7a7a77;color:#fff;}
			.footer a {color:#fff!important;white-space:nowrap;}
			.map {height:80vw!important;} /* Safari fix */
			#helpContent {top:155px;}
			.intro span.mobile {display:inline;}
		}
		@media only screen and (max-width:435px) {
			.search label {width: 100%;}
			.help a {width: 3em;}
			.help a i {box-shadow:none;margin: 0 0 0 0.5ex;}
			.help span {display:none;}
			.header {height:unset;display: flex;flex-wrap: wrap;flex-direction: row;padding-bottom: 0!important;}
			.logo {padding-bottom:10px;}
			.search {position:unset;margin-left: -1em;flex: 1 0 auto;}
			span.help {height: unset;flex: 0 1 auto;margin-bottom: 0;margin-right: -1em;padding-right: 1em;background: rgba(0,0,0,0.25);}
		}
		@media only screen and (max-width:360px) {
			.help a {width: 1em;overflow:hidden;}
			.showHelp .help a {width:3ex;}
			.help a i {margin: 0 0 0 0.5ex;}
			.logo div {font-size: 4vw;}
			.right .districts h3>span {float:none!important;line-height:2}
		}
		@media only screen and (max-width:323px) {
			.search input[type="text"] {font-size: 3.3vw!important;padding-top: 12px;padding-bottom: 12px;line-height: 12px;}
			.search {/* top: calc(3.2vw * 5.5); *//* padding: 2.5vw!important; *//* height: calc(3.2vw + 24px); */}
		}
		@media only screen and (min-width:480px) and (max-width:767px) {
			.logo div {font-size:inherit;}
		}

		@media only screen and (min-width:768px) and (max-width:1023px) {
			.header,
			.search,
			.footer {width:100%;} /* edge15 didn't like min-width:100%; */
			.header {height:100px;}
			.logo {flex:1 1 30%;}
			.search {flex:1 1 50%;max-width: 40%;}
			.help {flex: 0 1 auto;margin-left:1em;}
			.map {position:relative;width:100%;height:calc(((2 / 3) * 100vh) - 100px - 60px);min-height:calc(((2 /3) * 100vh) - 100px - 60px);}
			.left {/* width:66.66%; *//* position:absolute; *//* top:calc(((2 / 3) * 100vh) - 0em - 60px); */}
			.right {width:33.33%;width:100%;}
			.left,
			.right {/* float:right!important; *//* height:calc(((1 / 3) * 100vh) - 0em); */}
			
			.footer {display:block;text-align:center;line-height:1.6;height:60px;}
			.intro span.tabletportrait {display:inline;}
		}
		@media only screen and (max-width:767px) and (orientation:portrait) {
			.intro span.mobile {display:inline;}
		}
		@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
			.intro span.tabletportrait {display:inline;}
		}
		@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
			.intro span.tabletlandscape {display:inline;}
		}
		@media only screen and (min-width:1024px) {
			.header {height:100px;}
			.header,
			.footer {min-width:100%;}
			.search {min-width:50%;}
			body .right {float:right;}
			.left,
			.right {width:25%;}
			.map {width:50%;position:absolute;left:25%;top:100px;}
			.left,
			.map,
			.right {height:calc(100vh - 100px - 2.4em);}
		}
		@media only screen and (min-width:1025px) {
			.intro span.desktop {display:inline;}
		}
		@media only screen and (min-width:768px) and (max-width:1200px) {
			.logo {flex:1 1 30%;}
			.search {flex:1 1 50%;max-width: 40%;}
			.help {flex: 0 1 auto;margin-left:1em;}
		}
		@media only screen and (min-width:1440px) {
			.header>* {flex: 1 1 25%;}
			.header>.search {flex:1 1 50%;margin-right: -1em;max-width: 25%;}
			.header>.logo {flex:1 1 50%;}
		}
		@media only screen and (min-width:1920px) {
			.grid .header>* {flex: 1 1 33.33%;}
			.left,.right {width:480px;}
			.map {width:calc(100vw - (480px * 2));left:480px;}
		}

	/* all other cool browsers */
		@supports (display:grid) {
			.grid {
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: min-content minmax(70vw,auto) repeat(3,min-content);
				grid-template-areas: "header" "map" "left" "right" "footer";
				padding-top:unset;
				position: relative;
				z-index: 3;
			}
			/* unset */
			.header,
			.search,
			.footer,
			.grid>* {min-width:unset;}
			.header {position:unset;}
			.map,.left,.right {position:unset;top:unset;width:unset;height:unset;min-height: unset;}
		}
		@media only screen and (min-width:768px) {
			.grid {height: 100%;}
			@supports (display:grid) {
				.grid {
					/* grid-template-columns: 2fr 1fr; */
					grid-template-rows: auto minmax(40vh, 1fr) min-content auto;
					/* grid-template-areas: "header header" "map map" "left right" "footer footer"; */
				}
			}
		}
		@media only screen and (min-width:1024px) {
			@supports (display:grid) {
				.grid {
					grid-template-columns: 1fr 2fr 1fr;
					grid-template-rows: 100px calc(100vh - 100px - 0.8em - 24px) auto;
					grid-template-areas: "header header header" "left map right" "footer footer footer";
				}
				.map {/* width:50%; */position:unset;left:unset;top:unset;}
			}
		}
		@media only screen and (min-width:1920px) {
			.grid {grid-template-columns: 480px 2fr 480px;}
		}
		
		/* Enforce mobile layout on all portrait devices */
		/* Portrait tablets including iPad Pro Portrait */
		@media only screen
			and (min-device-width : 768px)
			and (max-device-width : 1024px) 
			and (min-device-height : 1024px) 
			and (max-device-height : 1366px) 
			and (min-width: 768px) 
			and (max-width: 1024px)
			and (orientation:portrait) {
			.grid {
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: min-content minmax(66vw,auto) repeat(3,min-content);
				grid-template-areas: "header" "map" "left" "right" "footer";
				padding-top:unset;
				position: relative;
				z-index: 3;
			}
			/* unset */
			.header,
			.search,
			.footer,
			.grid>* {min-width:unset;}
			.header {position:unset;}
			.map,.left,.right {position:unset;top:unset;width:unset;height:unset;min-height: unset;}
		}
		@media only screen and (min-width:1024px) and (max-width:1050px) { /* 1024x768 space for icons */
			.left .accordion+.accordion .accordion_heading span {font-family:"Arial Narrow", sans-serif;font-stretch: condensed;}
		}
		
	.grid>* {float: left;padding: 1em;}

body,a,a:visited {font-family:Arial, Helvetica, sans-serif;color:#fff;text-decoration:none;}
body {background:#2e2e2e;font-size:93.75%;position: relative;}
a {text-decoration:none;border-bottom:1px solid #c5c5c4;}
h2 {text-transform:uppercase;font-weight:bold;margin: 1ex 0 1ex;}
.gm-style-iw h2 {text-transform:unset;}
.gm-style-iw .error {color:#2e2e2e;}
.intro h2 {margin-top: 2.5ex;}
p+p {margin-top:1.5ex;}
.hide {display:none;}

.grid.showHelp .header~* {opacity:0;pointer-events:none;}

.district_info>p:first-child {font-weight:bold;}

.logo {padding-right:1em;text-transform:uppercase;}
.logo a {border:none;}
.logo div {margin-top:1ex;}
.logo img {max-width:468px;width: 100%;}
img {max-width:100%; height:auto;}

/* search */
	.search label {position:relative;display:block;}
	.search label i {position:absolute;right: 2px;top: 2px;padding: calc(2.5ex - 0.5px);opacity: 0.65;border:none;height: 0;pointer-events: none;transition:600ms;}
	.search label i.search_icon {background: white url(ic_search_black_24px.svg) no-repeat center center;}
	.search label i.clear,
	.search label input.notEmpty ~ i.clear,
	.close {pointer-events:initial;cursor:pointer;background: white url(ic_close_black_24px.svg) no-repeat center center;}
	input[type=text]::-ms-clear {display: none;}
	.search label input.notEmpty ~ i.search_icon,
	.search label input:not(.notEmpty) ~ i.clear {opacity:0;transition:600ms;}
	.close {background-image:url(ic_close_white_24px.svg);}
	input[type="text"],select {padding: 1em;width:100%;color:#484844;}
	.search input[type="text"] {padding-right:2.2em;border: 2px solid transparent;}
	.search input[type="text"]:focus{outline: none;border: 2px solid #c7daeb;}
	.search_results {position: absolute;background: white;color: #484844;box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
	.district_result { padding:1rem 3rem 1rem 1rem; }
	.district_result h3 { color:#276dab;margin-bottom:1em;font-weight:bold;font-size:0.8em; }
	.district_result p { font-size:0.9em; padding: 0.5rem 1rem;margin: 0rem -1rem;width: calc(100% + 4rem);text-align:left;}
	.district_result p:hover { background-color:bisque;}
	.district_result p span:first-child { font-weight:bold; }
	.district_result:not(:last-child) {border-bottom:1px solid #cfcfcf;}

/* left */
	.left .address_district {margin: -1em -1em 1em;padding: 1.5em 1em;width: calc(100% + 2em);background:rgba(0,0,0,0.6);position: relative;}
	.left .district_details {margin: -1em -1em -1em;padding: 1em;width: calc(100% + 2em);background:rgba(255,255,255,0.2);}
	.left .district_details p {font-size: 0.9em;line-height: 1.8;}
	.left .accordion {margin:1em -1em;background:#464646;position: relative;}
	.left .accordion_heading {padding:1em;background:#3d3d3d;}
	.left .accordion_heading span {vertical-align:middle;}
	.left .address_district>p:first-child::before,
	.left .accordion_heading div::after {margin-left: 16.3ex;margin-left: 4ex;content:'';display:inline-block;position:absolute;margin-top: -0.5ex;height: 3ex;width: 3ex;background:url('../icon/standard-accessible.png') center center no-repeat;background-size:contain;filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));}
	.left .accordion + .accordion .accordion_heading div::after {background-image:url(../icon/pre-poll-accessible.png);}
	.left .accordion_heading span::after {margin-left: 1ex;content:'';display:inline-block;position:absolute;margin-top: -0.5ex;height: 3ex;width: 3ex;background:url('../icon/standard.png') center center no-repeat;background-size:contain;filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));}
	.left .accordion+.accordion .accordion_heading span::after {background-image:url('../icon/pre-poll.png');}
	.left .address_district>p:first-child::before {background-image:url('../icon/home-pin.png');padding-right:1em;margin-left:0;left:0;width: 44px;height: 44px;}
	.left .address_district {padding-left:4em;}
	.left table {width:100%;}
	.left .booth {cursor:pointer;}
	.left .booth_info {padding: 10px 1em 10px 5ex;position: relative;background: #5d5d5d;border-top:1px solid rgba(105,105,105,1);border-bottom: 1px solid #545454;line-height: 1.2;cursor: pointer;}
	.left .booth_details {padding: 1em 0 1em 1em;border-top:1px solid rgba(105,105,105,1);font-size:0.8em;line-height: 1.75;background: #696969;overflow: auto;}
	.left .booth_details td:first-child {padding-right:0.5ex;width:45%;}
	.left .accordion_heading i {float:right;padding-left:1em;}
	.left .accordion_booths i {float:left;padding-right:1em;}
	.left .accordion::after {
		content:'';
		width: 0;
		height: 0;
		border-style: solid;
		transform:rotate(270deg);
		transition:transform 250ms;
		border-width: 6px 6px 0 6px;
		border-color: #ffffff transparent transparent transparent;
		position: absolute;
		right: 1em;
		top: calc(10px + 1ex);
	}
	.left .accordion.open::after {
		transform:rotate(360deg);
		transition:transform 250ms;
	}
	.left .booth_info::before {
		content:'';
		width: 0;
		height: 0;
		border-style: solid;
		transform:rotate(270deg);
		transition:transform 250ms;
		border-width: 6px 6px 0 6px;
		border-color: #ffffff transparent transparent transparent;
		position: absolute;
		left: 1em;
		top: calc(10px + 0.5ex);
	}
	.left .booth.open .booth_info::before {
		transform:rotate(360deg);
		transition:transform 250ms;
	}

	/* accordion open/close animations */
		.intro b.moreinfo {font-weight:bold;display:inline-block;background:grey;}
		
		.booths .accordion>.accordion_booths,
		.booths .accordion_booths>*,
		.booths .booth>*,
		.intro b.moreinfo,
		.intro div.moreinfo {max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0;overflow:hidden;transition: 600ms;}
		.booths .booth>.booth_info {max-height:initial;padding-top:10px;padding-bottom:10px;}
		_:-ms-fullscreen, :root .booths .booth>.booth_info {max-height:50vh;}
		.intro div.moreinfo.open {max-height:45em;}
		.booths .accordion.open>.accordion_booths {max-height:50vh;max-height: min-content;transition: 600ms;}
		.intro b.moreinfo.open {margin-bottom:2ex;padding:1ex;}
		.intro b.moreinfo.open,
		.booths .accordion_booths.open>*,
		.booths .booth.open>* {max-height: 200px;}
		.booths .booth.open>* {padding-top:10px;padding-bottom:10px;}
		@media only screen and (min-width:1025px) {
			.intro b.moreinfo {display:none;}
			.intro div.moreinfo {max-height: 45em!important;}
		}
			.intro div.moreinfo>h2:first-child {margin-top:0;}

	.district_booth_distance {float:right;margin-top: 0.2em;margin-left: 1ex;font-size: 0.7em;vertical-align:baseline;opacity:0.8;}
	
	.legend>* {margin-top:0.5rem;}
	
/* right */
	.right {border-left:1px solid #747474;padding-bottom: 0;}
	.right .districts {margin:0 -1em;padding:1em;}
	.right .districts+.districts {border-top:1px solid #747474;}
	.right .districts h3 {margin-bottom:0.5ex;font-weight:bold;font-size:1.2em;line-height: 1.2;vertical-align: baseline;}
	.right .districts label {display:block;margin-bottom:0.5rem;}
	.right label.checkbox,
	.right select,
	.search input {font-size:0.8em;}
	
	.right .districts h3>span {font-size:0.75rem;padding-top: 0.25rem;float: right;font-weight:100;pointer-events:none;display: inline-block;}
	.right .districts h3>span::before {content: '';display: inline-block;width: 1.5ex;height: 1.5ex;border-radius: 50%;margin-right:1ex;margin-left:0.2ex; box-shadow: 0 1px 4px rgba(0,0,0,0.4);}
	.right .districts:first-child h3>span::before {background-color: #f5282b;}
	.right .districts:nth-child(2) h3>span::before {background-color: #2b62fd;}