/* Variables */
:root {
  --primary-color: #0078d4; --secondary-color: #f3f2f1; --text-color: #333;
  --colDolby:#0680a2; --colMedical:#ccccce;
  --VivGreen:#84b618; --VivLGreen:#d6eb99;
  --ff: 'Segoe UI', Arial, sans-serif;
}

/* 	[ T R B L ] | [ TB  RL ] 	*/
/* Default Styles */
	*	 { margin:0; padding:0; box-sizing: border-box; }
	body { font-family:var(--ff); color: var(--text-color); font-size: 10pt; line-height: 1.2rem; margin:4px; }	
	h1	 { font-size:1.2em; color:white;            padding: 0.3em 0.8em 0.2em 0.8em; background-color:#00677A; }
	h2	 { font-size:1em;   color: var(--VivGreen);   padding: 0.2em 0.8em 0.1em 0.8em; background-color: var(--VivLGreen); }
	h3	 { font-size:1em;   color: var(--text-color); padding: 0.1em 0.8em; }
	p    { padding:0.2em 1em; }
	ul   { padding:0.2em 1em; }
	ol   { margin-left: 20px; padding:0.2em 1em; }
	li   { padding:0.2em 1em; }


	a 		{ text-decoration:underline; text-align: left; color: black; }
	a:hover { background: #a4a4a4; scale: 1.05; }
	
	#content { /* Stops table styles messing with masthead */
		table	{ border-collapse: collapse; margin: 0 1em;} 
		th		{ padding: 2px 2px 2px 2px; border: 1px #ccc solid; text-align: left;  vertical-align: middle; 
					background-color: #83B819; color: white; font-weight: bold; font-size:10pt;  }
		td		{ padding: 2px 2px 2px 2px; border: 1px #ccc solid; text-align: left;  vertical-align: top; }
	}

	

	footer p { font-size: 7pt; }
	.hide { display:none; }


	#container { 
		display: grid;
		grid-template-columns: 140px auto 350px;
		grid-template-rows: auto;
		grid-template-areas: 
		'header header header'
		'menu   main   right'
		'footer footer footer';
		gap: 10px;
	}
	header { grid-area: header; }
	menu   { grid-area: menu;   }
	main   { grid-area: main;   }
	right  { grid-area: right;  }
	footer { grid-area: footer; }

	@media (min-width: 600px) {
	.cards { grid-template-columns: repeat(2, 1fr); }
	}
	@media (min-width: 900px) {
	.cards { grid-template-columns: repeat(3, 1fr); }
	}
	@media (min-width: 1200px) {
	.cards { grid-template-columns: repeat(4, 1fr); }
	}


	.cards {
		display: grid;
		max-width: 1200px;
		margin: 0 auto; gap: .5rem;
		justify: center;

		h1 {  grid-column: 1/-1; margin: 0.8em 0 0 0; }
	}
	.card { background-color: rgb(233, 237, 238); padding: 0.4rem; 	}
	.card	h2  { margin: 0.1em 0.2em 0em 0.2em; }
	.card	img { height:75px; margin:4px; justify-self: center; }
	.card	hr  { height:2px; margin: 0 0.2em; padding: 1px 0 0 0; } 
	.card	p	{ margin: 0; padding: 0.6ch;}
	.card	li	{ margin: 0 0 0 20px; }