/* Example Style-sheet for cafmap.html 
   (C)2024 Electoral Calculus, licensed to Charities Aid Foundation
*/

	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'); 
	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'); 
	
	HTML { font-size: 100%; }
	
	:root {
		--hjsdarkgrey: #212529;
		--hjsgreen: #146E04;
		--hjsgrey2: #575756;
		--hjsgrey3: #6F6F6E;
		--hjsgrey4: #959595;
		--hjsgrey5: #dcddd8;
		--hjsgrey5b: #efefef;
		--hjsgrey6: #F3F3F3;
		--darkgreen: #0B3818;
		--medgreen: #27C407;
		--orange: #C35721;
		--lightgreen: #DDFCE3;
		--verydarkgrey: #101828;
		--legendborder: #D0D5DD;
		
		--lightblue: #007BFF;
		--blue: #0054AD;
		
		--bodybackground: white;
		--darkblue: #6C7BAD;
		--darkgrey: #373F41;
		--faintgrey: #EFF1F4;
		--lightergrey: #C0BBCE;
		--lightgrey: #968FA5;
		--tint: #C35721;
		
		--maincontentwidth: 1116px;
		--mainmargin: 162px;
		--mainwidth: 1440px;
		--twocolwidth: 739px;
		--onecolwidth: 361px;
		
		--extrawidth: calc(max(0px, 50vw - 0.5 * var(--mainwidth)));
		--negextrawidth : calc(0px - var(--extrawidth));

		
		/* New fonts */
		
		--font11: normal normal 400 11px/15px Roboto;		/* Footer */
		--font12bold: normal normal 700 12px/18px Roboto;	/* TH */
		--font13: normal normal 400 13px/22px Roboto;		/* Map copyright */
		--font14: normal normal 400 14px/21px Roboto;		/* Body small */
		--font14bold: normal normal 700 14px/22px Roboto;	/* Bold small text */
		--font16: normal normal 400 16px/24px Roboto;		/* Body text */
		--font16bold: normal normal 700 16px/24px Roboto;	/* Bold text */
		--font18bold: normal normal 700 18px/28px Roboto;	/* Table title */
		--font24bold: normal normal 700 24px/28.8px Roboto;	/* Footer text */
		
		--font12: normal normal 400 12px/18px Roboto;		/* H5 text */
		--font20: normal normal 700 20px/23px Roboto;		/* H4 text */
		--font28: normal normal 700 28px/32px Roboto;		/* H3 text */
		--font32: normal normal 500 32px/37px Roboto;		/* H2 text */
		--font40: normal normal 700 40px/46px Roboto;		/* H1 text */
	}
	
	/* Responsive sizes */
@media screen and (max-width: 1250px) {
	:root {
		--mainwidth: 100vw;
		--mainmargin: 30px;
		--maincontentwidth: calc(100vw - 2 * var(--mainmargin));
		--twocolwidth: var(--maincontentwidth);
		--onecolwidth: calc(0.5 * var(--maincontentwidth) - 15px);
		--extrawidth: 0;
		--negextrawidth: 0;
	}
}

@media screen and (max-width: 780px) {
	:root {
		--onecolwidth: var(--maincontentwidth);
	}
}

@media screen and (max-width: 400px) {
	:root {
		--mainmargin: 10px;
	}
}
	
	* { box-sizing: border-box; }
	

	
	.census1 { background-color: #D7191C;}
	.census2 { background-color: #FDAE61;}
	.census3 { background-color: #FFFFC0;}
	.census4 { background-color: #A6D96A;}
	.census5 { background-color: #1A9641;}
	
	.winner_None { background-color: #875BF7; color: white; }
	.winner_Christian { background-color: #2E90FA; color: white; }
	.winner_Muslim { background-color: #669F2A; color: white; }
	.winner_Hindu { background-color: #F63D68; color: white; }
	.winner_Sikh { background-color: #EF6820; color: white; }
	.winner_Buddhist { background-color: #EAAA08; color: white; }
	.winner_Jewish { background-color: #06AED4; color: white; }
	.winner_Other { background-color: #85888E; color: white; }

	.ge_CON { background-color: #3366ff; color: white; }
	.ge_LAB { background-color: #ff3300; color: white; }
	.ge_LIB { background-color: #ffc000; color: white; }
	.ge_UKIP { background-color: #9933ff; color: white; }
	.ge_Green { background-color: #00b050; color: white; }
	.ge_NAT { background-color: #ffff00; color: white; }
	.ge_SNP { background-color: #fcea49; color: black; }
	.ge_Plaid { background-color: #cbe522; color: black; }
	.ge_MIN { background-color: #fcd5b4; color: black; margin-right: 12px !important;}
	.ge_OTH { background-color: #ffffff; color: black; border-style: solid; border-width: 1px; }
	.ge_DUP { background-color: #5B7AFF; color: white; }
	.ge_UUP { background-color: #4499FF; color: white; }
	.ge_SDLP { background-color: #FF3300; color: white; }
	.ge_SF { background-color: #33c764; color: white; }
	.ge_All { background-color: #eebb0d; color: white; }
	.ge_TUV { background-color: #9933ff; color: white; }
	.ge_Reform { background-color: #BFF1F9; color: black; }
	
	#legend DIV {
		border-style: solid;
		border-width: 1px 1px 1px 0px;
		border-color: var(--legendborder);
		text-transform: uppercase;
	}
	#legend DIV:first-child { border: none; }
	#legend DIV:nth-child(2) { border-width: 1px; }
	
	.legend_none0 { background-color: #ffffff; color: black; }
	.legend_none1 { background-color: #DDD6FE; color: black; }
	.legend_none2 { background-color: #C3B5FD; color: black; }
	.legend_none3 { background-color: #A48AFB; color: black; }
	.legend_none4 { background-color: #875BF7; color: white; }
	.legend_none5 { background-color: #7839EE; color: white; }
	.legend_christian0 { background-color: #ffffff; color: black; }
	.legend_christian1 { background-color: #B2DDFF; color: black; }
	.legend_christian2 { background-color: #84CAFF; color: black; }
	.legend_christian3 { background-color: #53B1FD; color: black; }
	.legend_christian4 { background-color: #2E90FA; color: white; }
	.legend_christian5 { background-color: #1570EF; color: white; }
	.legend_muslim0 { background-color: #ffffff; color: black; }
	.legend_muslim1 { background-color: #CEEAB0; color: black; }
	.legend_muslim2 { background-color: #ACDC79; color: black; }
	.legend_muslim3 { background-color: #86CB3C; color: black; }
	.legend_muslim4 { background-color: #669F2A; color: white; }
	.legend_muslim5 { background-color: #4F7A21; color: white; }
	.legend_hindu0 { background-color: #ffffff; color: black; }
	.legend_hindu1 { background-color: #FECDD6; color: black; }
	.legend_hindu2 { background-color: #FEA3B4; color: black; }
	.legend_hindu3 { background-color: #FD6F8E; color: black; }
	.legend_hindu4 { background-color: #F63D68; color: white; }
	.legend_hindu5 { background-color: #C01048; color: white; }
	.legend_sikh0 { background-color: #ffffff; color: black; }
	.legend_sikh1 { background-color: #F9DBAF; color: black; }
	.legend_sikh2 { background-color: #F7B27A; color: black; }
	.legend_sikh3 { background-color: #F38744; color: black; }
	.legend_sikh4 { background-color: #EF6820; color: white; }
	.legend_sikh5 { background-color: #B93815; color: white; }
	.legend_buddhist0 { background-color: #ffffff; color: black; }
	.legend_buddhist1 { background-color: #FEEE95; color: black; }
	.legend_buddhist2 { background-color: #FDE272; color: black; }
	.legend_buddhist3 { background-color: #FAC515; color: black; }
	.legend_buddhist4 { background-color: #EAAA08; color: white; }
	.legend_buddhist5 { background-color: #CA8504; color: white; }
	.legend_jewish0 { background-color: #ffffff; color: black; }
	.legend_jewish1 { background-color: #A5F0FC; color: black; }
	.legend_jewish2 { background-color: #67E3F9; color: black; }
	.legend_jewish3 { background-color: #22CCEE; color: black; }
	.legend_jewish4 { background-color: #06AED4; color: white; }
	.legend_jewish5 { background-color: #088AB2; color: white; }
	.legend_other0 { background-color: #ffffff; color: black; }
	.legend_other1 { background-color: #ECECED; color: black; }
	.legend_other2 { background-color: #CECFD2; color: black; }
	.legend_other3 { background-color: #A1A2A6; color: black; }
	.legend_other4 { background-color: #85888E; color: white; }
	.legend_other5 { background-color: #61646C; color: white; }


	/* explanation blocks */
	.exp_hidden { display: none; }
	.exp_show { display: inline; }
	
	
	body {
		margin: 0;
		background-color: var(--bodybackground);
		
		font: var(--font16);
		color: var(--hjsdarkgrey);
		letter-spacing: 0em;
		text-align: left;
	}
	P {
		margin-top: 0px;
		margin-bottom: 15px;
	}
	
	body B {
		font: var(--font16bold);
	}
	
	#wholepage {
		width: var(--mainwidth);
		margin: auto;
		margin-top: 0;
		position: relative;
	}
	
	/* Top */

	/* Header bar */
	#header {
		height: 100px;
		line-height: 0px;
	}
	#header IMG {
		margin:  20px 0 20px 0;
		height: 40px;
	}
	#header > HR {
		border: none;
		color: var(--hjsgrey5);
		background-color: var(--hjsgrey5);
		height: 1px;
		margin: 0;
	}
	
	/* Frame 450 */

	#navbar {
		font: var(--font12);
		text-transform: uppercase;
		color: var(--hjsdarkgrey);
	}
	#navbar > DIV, #navbar > SPAN { margin-right: 20px; }
	#navbar A {
		color: var(--hjsgreen);
		font: var(--font12);
		text-decoration: underline;
	}
	
	#sidebox {
		background-color: var(--hjsgrey5);
		padding: 24px;
		font: var(--font14);
	}
	#sidebox P { margin-bottom: 8px; }
	#sidebox HR {
		border: none;
		color: var(--hjsgrey3);
		background-color: var(--hjsgrey3);
		height: 1px;
		margin: 24px 0 24px 0;
	}
	
	#mapsidebox {
		font: var(--font14);
		background-color: var(--hjsgrey5b);
		padding: 12px;
	}
	#mapsidebox P { margin-bottom: 5px; }
	
	#poptotal {
		font: var(--font14);
		padding-left: 10px;
	}
	#poptotal B { font: var(--font14bold); }
	#explanation {
		font: var(--font14);
		margin-top: 12px;
	}
	#explanation B {
		font: var(--font14bold);
	}
	
	#footers { position: relative; }
	
	#footer1 {
		background-color: var(--hjsgrey3);
		color: white;
		font: var(--font24bold);
		padding: 20.5px 0 20.5px var(--mainmargin);
	}
	
	#footer1:before {
		content: '';
		height: 70px;
		width: var(--extrawidth);
		position: absolute;
		top: 0;
		left: var(--negextrawidth);
		background-color: var(--hjsgrey3);
	}
	
	#footer1:after {
		content: '';
		height: 70px;
		width: var(--extrawidth);
		position: absolute;
		top: 0;
		left: var(--mainwidth);
		background: var(--hjsgrey3);
	}
	
	
	#footer2  {
		font: var(--font11);
		color: black;
		padding: 24px var(--mainmargin) 24px var(--mainmargin);
	}
	#footer2 P { margin-botton: 15px; }
	
	.col350, .onecolwidth {
		width: var(--onecolwidth);
	}
	.twocol730, .twocolwidth {
		width: var(--twocolwidth);
	}
	
	H1 {
		font: var(--font32);
		letter-spacing: -0.02em;
		text-align: left;
		color: var(--hjsdarkgrey);
		margin-bottom: 36px;
	}
	H2 {
		font: var(--font20);
		color: var(--hjsdarkgrey);
	}
	
	H4 {
		font: var(--font20);
		color: var(--hjsdarkgrey);
		text-align: left;
		text-transform: uppercase;
		margin: 0 0 24px 0;
	}
	H5 { 
		font: var(--font12);
		color: var(--hjsdarkgrey);
		text-align: left;
		text-transform: uppercase;
		margin: 0 0 16px 0;
	}
	
	/* 4. LINKS */
	A {
		font-weight: 500;
		letter-spacing: 0em;
		text-align: left;
		color: var(--lightblue);
		text-decoration: none;
		word-wrap: break-word;
	}
	H1 A, H2 A, H3 A, H4 A {
		text-decoration: none;
		color: currentColor;
	}
	A:hover {
		color: var(--blue);
		text-decoration: underline;
		text-decoration-color: var(--blue);
		text-decoration-thickness: 1px;
		text-underline-offset: 2px;
	}
	
	.flexrow {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.flexrow.aligntop {
		align-items: flex-start;
	}
	.nojustify {
		justify-content: flex-start;
	}
	
	.main_outer {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0px var(--mainmargin) 10px var(--mainmargin);
	}
	
	#main {
		margin-right: 30px;
		position: relative;
		width: var(--twocolwidth);
	}
	#main.wide {
		width: var(--maincontentwidth);
		margin-right: 0px;
	}
	
	
	
	/* stripes class, used on table.html and seatdetail.py */
	TABLE.stripes TR:nth-child(2n+3) { background-color: white); }
	TABLE.stripes TR:nth-child(even) { background-color: var(--lightgreen); }
		
	/* header row */
	TABLE.stripes TH {
		background-color: var(--hjsgrey6);
		color: var(--hjsgrey3);
		font: var(--font12bold);
		height: 44px;
		padding: 5px 5px 5px 5px;
	}
	TABLE.stripes TR TH:first-child { padding: 5px 24px 5px 24px; }
	
	TABLE.stripes TD {
		font: var(--font14);
		text-align: center;
		padding: 0 10px 0 10px;
	}
	TABLE.stripes TR TD:first-child {
		padding: 15px 10px 15px 24px;
		text-align: left;
	}
	
	/* versions with bold first and second columns respectively */
	TABLE.bold1 TR TD:first-child {
		font: var(--font14bold);
	}
	TABLE.bold2 TR TD:nth-child(2) {
		font: var(--font14bold);
	}
	
	/* styles for topthree ol-popup on nationalmap page */
	TABLE.topthree {
		border: none;
		border-collapse: collapse;
		width: 100%;
		}
	TABLE.topthree TR:nth-child(2n+3) { background-color: white); }
	TABLE.topthree TR:nth-child(even) { background-color: var(--lightgreen); }
	TABLE.topthree TH {
		background-color: var(--hjsgrey6);
		color: var(--hjsgrey3);
		font: var(--font12bold);
		height: 26x;
		padding: 4px 4px 4px 4px;
		text-align: center;
	}
	TABLE.topthree TH:first-child {
		padding-left: 12px;
		text-align: left;
	}
	TABLE.topthree TH:nth-child(4) { padding-right: 12px; }
	TABLE.topthree TH.nobold { font: var(--font12); }
	
	TABLE.topthree TD {
		font: var(--font12);
		text-align: center;
		padding: 4px;
		height: 28px;
	}
	TABLE.topthree td:first-child {
		text-align: left;
		padding-left: 12px;
	}
	
	TABLE.topthree TR.title TH {
		font: var(--font14bold);
		color: white;
		background-color: var(--darkgreen);
		height: 29px;
	}
	
	/* title of table */
	TR.title TH { 
		background-color: var(--darkgreen);
		color: white;
		font: var(--font18bold);
		padding: 5px 24px 5px 24px;
	}
	
	/* main table on table.html */
	#rtable TR TD:first-child {
		width: 300px;
	}
	#rtable A {
		font: var(--font14bold);
		color: var(--verydarkgrey);
		text-decoration: underline;
	}
	#rtable TD { width: 93px; }
	
	.idx {
		font: var(--font12);
		color: var(--hjsgrey2);
		padding-right: 8px;
	}
	
	TH.sort, TH.sortup, TH.sortdown {
		padding-right: 20px !important;
		background-repeat: no-repeat;
		background-position: 90% 45%;
	}
	TH.sort:hover, TH.sortup:hover, TH.sortdown:hover {
		color: var(--verydarkgrey);
	}
	TH.sort {
		background-image: url("Images/sort_neutral.svg");
	}
	TH.sort:hover {
		background-image: url("Images/sort_dark.svg");
	}
	TH.sortup {
		background-image: url("Images/sort_up.svg");
	}
	TH.sortdown {
		background-image: url("Images/sort_down.svg");
	}
	
	

	/* used on seat pop-us on both national map and seat details pages */
	.subbox {
		font: var(--font12);
		color(--hjsdarkgrey);
		background-color: var(--hjsgrey5);
		padding: 8px 8px 8px 12px;
		line-height: 20px;
	}
	
	
	
	/* INPUTS */
	INPUT {
	}
	INPUT:focus {
		outline: none;
	}
	
	INPUT {
		-webkit-appearance: none;
		appearance: none;
	}

	.button, INPUT[type="button"] {
		display: inline-block;
		position: relative;
		height: 40px;
		width: 83px;
		padding: 10px 35px 7px 35px;
		margin: 0;
		background: var(--orange);
		font: var(--font14bold);
		text-transform: uppercase;
		letter-spacing: 0px;
		text-align: center;
		color: white;
		transition: background 0.3s;
	}
	.button.tight, .button2.tight {
		padding-left: 10px;
		padding-right: 10px;
	}

	.finger A, .button A, .button2 A {
		text-decoration: none;
		color: currentColor;
		font: inherit;
	}

	.button:hover, .button.hover, INPUT[type="button"]:hover {
		background: var(--hjsgreen);
		cursor: pointer;
	}
	.button:focus, .button.focus, INPUT[type="button"]:focus {
		background: var(--blue);
		outline: none;
	}
	.button:disable, .button.disable, INPUT[type="button"]:disable {
		background: var(--faintgrey);
		color: var(--lightergrey);
	}
	.button > IMG {
		position: absolute;
		top: 10px;
		left: 17px;
		height: 17px;
	}
	


	B {
		font-weight: 500;
	}
	.smaller {
		font: var(--font13);
		color: var(--hjsdarkgrey);
		letter-spacing: 0em;
		text-align: left;
	}
	P.smaller { margin-bottom: 8px; }
	
	
	.input_button {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.input_button.std {
		width: 293px;
	}
	.input_button > INPUT:not([type="submit"]) {
		border-radius: 0;
	}
	.input_button .button, .button.small {
		padding: 10px 19px;
	}
	
	input[type="radio"], input[type="checkbox"] {
		opacity: 0;
		position: absolute;
		width: 0;
	}
	input[type="radio"] + label, input[type="checkbox"] + label {
		display: inline-block;
		cursor: pointer;
	}

	.radiogrid {
		display: grid;
		grid-template-columns: auto auto auto;
	}
	.radiogrid input[type="radio"] + label {
		padding: 5px 10px 5px 10px;
		height: auto;
		font: var(--font12);
		letter-spacing: 0em;
		text-align: center;
		text-transform: uppercase;
		color: var(--hjsdarkgrey);
		background: white;
		border: 1px solid var(--hjsgreen);
		border-radius: 2px;
		background-image: none;
	}	
	.radiogrid input[type="radio"]:checked + label {
		background-image: none;
		background: var(--tint);
		border-color: var(--tint);
		color: white;
	}
	
	.viewgrid LABEL {
		width: 164px;
		margin-bottom: 8px;
		margin-right: 8px;
	}
	.viewgrid INPUT[type="radio"] { display: none; }
	
	
	.viewgrid {
		display: grid;
		grid-template-columns: auto auto;
	}
	.viewgrid input[type="radio"] + label {
		padding: 8px 10px 5px 35px;
		height: 34px;
		font: var(--font12);
		letter-spacing: 0em;
		text-align: left;
		text-transform: uppercase;
		color: var(--hjsdarkgrey);
		background: white;
		border: 1px solid var(--hjsgrey4);

		background-image: url('Images/checkbox_off.svg');
		background-repeat: no-repeat;
		background-position: 12px 50%;
	}	
	.viewgrid input[type="radio"]:checked + label {
		background-image: none;
		background: var(--darkgreen);
		border-color: var(--darkgreen);
		color: white;
		
		background-image: url('Images/checkbox_on.svg');
		background-repeat: no-repeat;
		background-position: 12px 50%;
	}

	.pills {
		display: flex;
		flex-direction: row;
		margin-bottom: 12px;
	}
	.pills.flexwrap { margin-bottom: -5px; }
	.pills input[type="radio"] + label {
		padding: 8px 12px 8px 12px;
		height: 34px;
		font: var(--font12);
		letter-spacing: 0em;
		text-align: center;
		text-transform: uppercase;
		background-color: white;
		color: var(--hjsdarkgrey);
		border-width: 1px 1px 1px 0;
		border-color: var(--hjsgrey4);
		border-style: solid;
	}
	.pills > DIV:first-child {
		border-width: 0 0 0 1px;
		border-color: var(--hjsgrey4);
		border-style: solid;
	}
	.pills input[type="radio"]:checked + label {
		background-color: var(--darkgreen);
		color: white;
	}

	
	/* PAGE SPECIFIC STYLES */
	.radiogrid LABEL { width: 113px; margin-bottom: 5px; }
	.radiogrid INPUT[type="radio"] { display: none; }
	

	#legend {
		font: var(--font12);
		margin-bottom: 23px;
	}
	#legend > DIV { 
		padding: 2px 10px 2px 10px;
		margin: 0;
	}
	
	.PostcodeButton {
		width: 175px;
		height: 40px;
		background-color: white;
		border: 1px solid var(--hjsgrey4);
	}
	.PostcodeButton INPUT {
		width: 140px;
		padding: 8px;
		border: none;
	}
	.PostcodeButton IMG { margin-top: 7px; }
	
	.SeatInputs {
		
	}
	#SeatText {
		width: 100%;
	}
	#SeatText INPUT {
		height: 40px;
		border: 1px solid var(--hjsgrey4);
		padding: 11px 7px 12px 7px;
		width: 100%;
	}
	#SeatFive DIV {
		height: 32px;
		padding: 4px 7px 2px 7px;
		border: 1px solid var(--hjsgrey4);
		border-top: none;
		background-color: white;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
	#SeatFive DIV:hover {
		background-color: var(--hjsgrey6);
		cursor: pointer;
		}
	.seat_hidden { display: none; }
	.seat_show { display: block; }
	
	#labels_box + LABEL {
		font: var(--font12);
		padding-bottom: 5px;
		margin-bottom: 5px;
	}
	

	/* Tablet (2-col view) */
@media screen and (max-width: 1250px) {
	
	/* cancel right-hand margin on #main */
	#main {
		margin-right: 0;
	}
	
	div.verywidetable {
		overflow-x: auto;
	}
	div.verywidetable > TABLE {
		width: var(--maxwidth);
	}
	
}