/* votesmatter.org.uk/index.css SAME AS votesmatter.co.uk/index.css Valid index.css 31 DEC 2020 */
/* Variable Declarations */
:root {
	--black: #000000;
	--green: #99cc33;
	--orange: #ff6600;
	--beige: #ffff99;
}

/* -----	Reset Styles start (from meyerweb.com) ----- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
a, em, font, img, ul, li,
table {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-family: inherit; }
	table {border-collapse: collapse; border-spacing: 0;}
* {text-decoration:none; box-sizing: border-box;}
/* -----	Reset Styles end (from meyerweb.com) ----- */

body {
  	 font-family: Tahoma, Georgia, Verdana, serif;
  	 color: var(--black);
		 background: var(--green);
		 font-size: 16px;}

#wrapper {
		position: relative;
		width: 98%;
    margin: 1em auto;
		/* below centres page block */
		text-align: left;}
@media screen and (min-width: 600px)  {#wrapper {width:70%;} }
@media screen and (min-width: 960px)  {#wrapper {width:60%;} }
@media screen and (min-width: 1280px) {#wrapper {width:40%;} }

#wrappernotd {
		position: relative;
		width: 95%;
    margin: 1em auto;
		/* below centres page block */
		text-align: left;
		}
/* Samsung S7 Landscape 
@media screen and (max-width: 640px) {#wrapper {width: 98%;}}
*/

.header {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
		width: 300px;
		margin: 0 auto;}
		
.footer {		
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;}

/* ----------------- footer ----------------- */
.footer1 {padding-top: 1em; text-align: center;}
.footer1 a {display: inline; text-decoration: underline;}				
		

/* ---------- index.php constituencysearch1.php constituencysearch2.php ---------- */
.container1 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100%;
    grid-template-areas:
               "content"}
							 
.content1, constituencysearch1, constituencysearch2 {grid-area: content;}
.constituencysearch1 p {text-align: center;}

.constituencysearch2 {
		margin-top: 2em;								 
		padding: 1em;
		font-size: 1.1em;
		text-align: justify;
		background:var(--beige);
		border: 3px solid var(--orange);
		border-radius: 2em;}
		
.generaltext {
    margin-top: 0;
		padding: 1em 0.5em;
		font-size: 1.1em;
		text-align: justify;}		

.results p {margin-top: 1.5em; text-align: justify;}		

/* --------- input select (constituencysearch1) --------- */
input, select	{
		background: #ffff99 ;			
		height: 3em ;
		width: 15em;
		border: 2px solid #ff6600 ;
		border-radius: 12px;
		margin-top: 1em;
		padding: 4px;
    /* ------ prevent background colour leak out ----- */
    background-clip: padding-box;}
		
.width1 {width: 90%; margin: 1em auto 0;}
.width1 p {text-align: justify;}		
.width1 p:last-child {margin-top: 1em;}
.width2 {width: 50%; margin: 0 auto;}
.width2 p {text-align: justify;}		


/* ---------- menu page ---------- */
.menu {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(7em, 1fr ));
    grid-auto-rows: 7em;
		margin-top: 1em;
		justify-items: center;}
 				
/* ---------- from the past ---------- */
.motd {
			 background:var(--beige);
			 border: 3px solid var(--orange);
			 border-radius:2em;
			 text-align:  justify;
			 padding: 1em;}
			 
.motd a {text-decoration: underline;}
.motd:hover a {box-shadow:0 0 3em #ffce94 inset;}
.motd p {margin-bottom: 20px;}			 

/* ----------------- brexit ----------------- */
.brexit{
		display: grid;
    grid-gap: 10px;
		text-align: justify;}

.brexit a {text-decoration: underline;}
.brexit:hover a {box-shadow:0 0 3em #ffce94 inset;}
.brexit table {border: 3px solid var(--orange);}
.bordertop {border-top: 3px solid var(--orange); border-radius: 15px; padding-bottom: 10px;} 

/* ----------------- images auto resize to container ----------------- */
img {max-width: 100%; height: auto;}	

/* -------------------- anchors  -------------------- */
a:link 		    {color: var(--black); background: transparent;}	 			 	/* unvisited link */		
a:visited 	  {color: var(--black); background: transparent;}				 	/* visited link */ 
a:hover 		  {color: var(--orange); background: transparent;} 				/* mouse over link */
a:active 		  {color: var(--black); background: transparent;}				 	/* selected link */
a							{text-decoration: none; display: block; width: 100%; height: 100%;}

.underline:hover {text-decoration:underline;}
.bold, .resultstextright a {font-weight: bold; text-decoration: underline;}

/* ----------------- buttons ----------------- */
.button1 {
			 background:#ffff99;
			 border: 3px solid #ff6600;
			 text-align:center;
			 width:8em;
			 height:8em;
			 border-radius:8em;
			 margin: -4em auto 0 auto;}
.sdbutton {font-family: SDScript;}
.menubutton {
			 background:#ffff99;
			 border: 3px solid #ff6600;
			 text-align:center;
			 width:7em;
			 height:7em;
			 border-radius:7em;}
.button1:hover, .menubutton:hover {box-shadow:0 0 3em var(--orange) inset;}
.button1 p {font-size: 0.8em; padding: 15px 5px 0 5px;}
.sdbutton p {margin-top: 10px;}
.menubutton p {font-size: 0.95em; padding: 20px 10px 0 10px;}
@media screen and (min-width: 1024px) {.button1 p {padding: 20px 15px 0 15px;} }

/* --------- spacers and margins  --------- */
.spacer10 {height: 10px;}

/* -------------------- fonts  -------------------- */
p {margin-bottom: 1em;}
p.margin1 {margin: 1em 0; text-align: center;}
.quote	 {font-style: italic;}
.quoteorange {color: var(--orange);}
.number  {font-size: 1.2em; margin-bottom: 0;}
.center	 {text-align: center;}

@font-face {
    font-family: 'SDScript';
    src: url('fonts/Gondola_SD-webfont.eot');
    src: url('fonts/Gondola_SD-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Gondola_SD-webfont.woff') format('woff'),
         url('fonts/Gondola_SD-webfont.ttf') format('truetype'),
         url('fonts/Gondola_SD-webfont.svg#GondolaSDRegular') format('svg');
    font-weight: normal;
    font-style: normal;}

h1 {font-family: Tahoma, Georgia, Verdana, serif;}
h1.font1 {font-family: SDScript, Tahoma, Georgia, Verdana, serif; font-size: 1.5em; margin: 2em 0 1em 0; text-align: center;} /* new index */
h1.font3 {font-family: Tahoma, Georgia, Verdana, serif; font-size: 1.2em; text-align: center; text-decoration: underline; margin: 0.5em 0;} /* new constituencysearch2 */
h1.font5 {font-family: SDScript, Tahoma, Georgia, Verdana, serif; font-size: 1.1em; text-decoration: underline;}
		
h2 {font-family: Tahoma, Georgia, Verdana, serif;} 
h2.font1 {font-family: SDScript, Tahoma, Georgia, Verdana, serif; font-size: 1.2em; font-weight: bold; text-align: center; margin-bottom: 1em;} /* new motd */
h2.font2 {font-family: SDScript, Tahoma, Georgia, Verdana, serif; font-size: 1.4em; margin: 1em 0 0.5em 0; text-align: center;} /* new constituencysearch1 */
h2.font3 {font-family: Tahoma, Georgia, Verdana, serif; font-size: 1.4em; font-weight: 100;text-decoration: underline;}
h2.font4 {font-family: Tahoma, Georgia, Verdana, serif; font-size: 1.4em; font-weight: 100;}
h2.font5 {font-family: SDScript, Tahoma, Georgia, Verdana, serif; font-size: 1.1em;} /* numbers game */
h2.font6 {font-family: Tahoma, Georgia, Verdana, serif; font-size: 1.2em; font-weight: bold; text-align: center; margin: 1em 0;} /* new constituencysearch2 */
h2.font7 {font-family: SDScript, Tahoma, Georgia, Verdana, serif; font-size: 1em;}  /* new generaltext */
h2.font8 {font-family: Tahoma, Georgia, Verdana, serif; font-size: 1.5em;}
h3 {font-family: Tahoma, Georgia, Verdana, serif;} 
h3.font1 {font-family: SDScript, Tahoma, Georgia, Verdana, serif; font-size: 0.8em; font-weight: bold;  margin-bottom: 1em;} 
h3.font2 {font-family: Tahoma, Georgia, Verdana, serif; font-size: 1em; margin-bottom: 1em; text-align: center;} 
h4 {font-family: Tahoma, Georgia, Verdana, serif;}
h5 {font-family: Tahoma, Georgia, Verdana, serif;}
h6 {font-family: Tahoma, Georgia, Verdana, serif;}

/* --------- table --------- */
table {
			table-layout: auto;
			width: 100%;
			border: 5px double #ff6600;			
			background: #ffff99;
			border-collapse: collapse;
			font-size: 14px;
			}
table th		{padding: 5px; border: 1px solid #ff6600;}
table tr td {width: 33%; padding: 5px; border: 1px solid #ff6600;}

/* --------- governmentministers.php --------- */
table.govmins {margin-top: 20px;}
table.govmins tr td {padding: 5px; border: 1px solid #ff6600;}
table.govmins tr td:nth-of-type(1) {width: 30%; vertical-align: top;}
table.govmins tr td:nth-of-type(2) {width: 70%;}

/* ---------- magazine layout ---------- */
.archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1em;
  grid-auto-flow: dense;
}

.article:not(:first-child) {
			 background:var(--beige);
			 border: 3px solid var(--orange);
			 border-radius:2em;
			 text-align:  justify;
			 padding: 2em 1em 1em 1em;
}	
/* Extra-wide grid-posts */ 
 						.article:nth-child(40n + 1) {
  					grid-column: 1 / -1;
						}

/*The section below is not required
.article:nth-child(16n + 2) {
  grid-column: -3 / -1;
}
.article:nth-child(16n + 10) {
  grid-column: 1 / -2;
}
*/

/* Single column display for phones */
@media (max-width: 459px) {
  .archive {
    display: flex;
    flex-direction: column;
  }
}				

/* ---------- borders for testing ---------- */
.bordertest1 {border: 1px solid #0000ff ;}	    /* Blue */
.bordertest2 {border: 1px solid #000000 ;}	 		/* Black */
.bordertest3 {border: 1px solid #ff0000 ;}	 		/* Red */
.bordertest4 {border: 1px solid #00ffff ;}	 		/* Cyan */