*
{
	margin: 2px;
	padding: 2px;
	font-family: sans-serif;
	color: #2f2f2f;
	border-radius: 2px;
}

@font-face
{
	font-family: 'Raleway';
	src: url('fonts/Walkway_UltraBold.ttf');
	font-display: swap;

}

html 
{
	min-height: 100%;
}

body
{
	background: #505050; /* For browsers that do not support gradients */
    background: linear-gradient(135deg, #ccc, #555); /* Standard syntax */
}

header
{
	background-image: url("images/dna3.jpg");
	background-position: 0% 55%; 
	background-size: cover;
	min-height: 7em;
}


img
{
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

dt
{
	font-weight: bold;
	margin-top: 1rem;
}

dd
{
	line-height: 140%;
	margin-left: 1.5rem;
}

ul li
{
	margin: 2;
	list-style-position: inside;
}

h1, h2, h3, h4, h5, h6
{
	margin-top: 1rem;
}

p
{
	margin-top: 1rem;
	line-height: 140%;
}

#container
{
	background-color: #ffffff;
	padding: 1em;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	width: 90%;
	box-shadow: 2px 2px 2px #000;
}


nav
{	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 4px;
	border-radius: 4px;
	background-color: #dedede;
	line-height: 2em;
	display: none;
}

.menubutton
{
	color: #2f2f2f;
	padding: 0.5em;
}

footer
{
	background-color: #dedede;
	text-align: center;
	vertical-align: middle;
	padding-bottom: 0.25em;
	margin-bottom: 0.5em;
	border-radius: 4px;
}

a
{
	color: #2f2f2f;
}

a:hover
{
    background: #303030; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(350deg, #505050, #303030); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(350deg, #505050, #303030); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(350deg, #505050, #303030); /* For Firefox 3.6 to 15 */
	background: linear-gradient(350deg, #505050, #303030);
	color: #f0f0f0;
}

.highcharts
{
  margin-left: auto;
  margin-right: auto;
  width: 76vw;
  display:block;
}

.q_glyph
{
	margin-left: auto;
	margin-right: 0px;
	margin-bottom: -10px;
	z-index: 10;
	float: right;
	width: 50px;
}

.q_modal:hover
{

}


.headline
{
	font-family: Raleway;
	color: #ffffff;
	font-size: 310%;
	text-shadow: 0px 0px 7px #ff8d23;
	letter-spacing: 0.2rem;
}

.subheadline
{
	font-family: Raleway;
	color: #ffffff;
	text-shadow: 0px 0px 7px #ff8d23;
	letter-spacing: 0.2rem;
	text-align: right;
}

.tile_row
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	
}

.tile
{
	display: flex;
	flex-direction: column;
	flex: auto;
	flex-basis: 0;
	align-items: stretch;
	margin-left: 4px;
	margin-right: 4px;
	background-color: #e0e0e0;
	box-shadow: 2px 2px 2px #666;
}

.tile_blank
{
	display: flex;
	flex-direction: column;
	flex: auto;
	flex-basis: 0;
	align-items: stretch;
	margin-left: 4px;
	margin-right: 4px;
	background-color: #ffffff;
	box-shadow: 0px 0px 0px #fff;
}

.tile_heading
{
	color: #202020;
	background-color: #e0e0e0;
}

.tile_content
{
	margin: auto;
}

/* Styles for responsive design */
.header { grid-area: header; }
.nav { grid-area: nav;}
.left { grid-area: left;}
.centre { grid-area: centre;}
.right { grid-area: right;}
.footer { grid-area: footer;}

.col2-container
{
  display: grid;
  grid-auto-columns: 1fr; /* Will spread the columns evenly in the grid*/
  grid-template-areas:
    'header header'
    'nav nav'
    'left left'
	'right right'
    'footer footer';
    
  grid-gap: 10px;
  padding: 10px;
}

.col1-container
{
  display: grid;
  grid-auto-columns: 1fr; /* Will spread the columns evenly in the grid*/
  grid-template-areas:
    'header'
    'nav'
    'centre'
    'footer';
    
  grid-gap: 10px;
  padding: 10px;
}

@media only screen and (min-width: 760px) {
	.col2-container {
		grid-template-areas:
		'header header'
		'nav nav'
		'left right'
		'footer footer'
		;
	}
	nav{display: flex;}
	.highcharts
		{
		  width: 37vw;
		  display:block;
		}
}