:root{
	--accentColourBright: #40c65a;
	--accentColourDark: #33a149;
	--HeaderTextColour: var(--accentColourDark);
	--linkColour: #259c1f;
	--HeaderAccentColour: #d1e3ff;
}
	
html{
	margin:0;
	padding:0;
	width:100%;
	min-height:100%;
	font-size:16px;
}

body{
	margin:0;
	padding:0;
	width:100%;
	min-height:100%;
	!background: linear-gradient(red, #ebfff7);

}

button:focus, input:focus {
	outline:0;
}

header{
	width:100%;
	min-height:10vh;
	margin-bottom:10px;
	border-bottom:1px dotted grey;
	
	/*
	background-color: white;
	*/
	background: linear-gradient(var(--HeaderAccentColour), white);

	position: sticky;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	top:0px;
/********
	top:-250px;
	to get the image in the right place -> Task: get the page to load from very top
********/
}

/********
only for image Tests in Research-Kopie
********/

#imgMain{
	margin-left:45%;
}

/****************
General
****************/

a{
}

a:visited {
	color: blue;
}

/*	not working (needed for DualCoxeterFiles in Research)	*/
.NoVisitedChange a{
	colour:red;
}



/****************
Top
****************/

h1{
	!add  if needed(no margin at top): margin-top:0;
	margin-top:0;
}

/****************
Navigation
****************/

#Top {
	!background-color:#d6d6d6;
	/********
changed for image Tests in Research-Kopie

	background: linear-gradient(#f5b473, white);
********/
}

#Navigation {
}


#Navigation img{
	position:relative;
	margin-left:60px;
}

#Navigation ul{
	list-style-type: none;
	margin-left: 0px;
	padding: 0;
	margin:0;
	margin-bottom:0.3em;
	position:relative;
	text-align:center;
}	

#Navigation ul li{
	font-size:1.25em;	
	padding:1em 0 1em 0;
	display:inline-block;
	border: 2px solid transparent;
	margin:0 0.4em 0 0.4em;
}


#Navigation ul li a{
	padding:1em 0.6em 1em 0.6em;
}

#Navigation ul li a, visited {
	text-decoration: none;
	color: black;
}


#Navigation ul li:hover{
	border: 2px dashed var(--accentColourBright);
	border-radius: 15px;

}
#Navigation ul li:hover a{
	color: var(--accentColourBright);
}

#Navigation #current{
	border: 2px solid var(--accentColourBright);
	border-radius: 15px;
}

#Navigation #current a{
	color: var(--accentColourDark);
}



/****************
Content
****************/


#Middle {
	
}

#Left{
	float:left;
	width:50%;
}

#Right{
	float:right;
	width:50%;
}

.Content{
	margin:100px;
	margin-top:20px;
	margin-bottom:20px;
}

.Content ul{
	list-style:circle;
}

a{
	text-decoration:none;
	color:var(--linkColour);
}

a:hover{
}

#SpacerDiv{
	height:10em;
}

table {
  border-spacing: 2em;
}

table th {
	text-align:left;
	color: white;
	background-color: var(--accentColourBright);
	padding-left:10px;
	font-size: 1.35em;
	margin-bottom:0.8em;
}

/* use 	
text-align:justify; 
for longer texts
*/

h2{
	font-size: 1.75em;
	color: var(--accentColourDark);
	text-align: center;
}

h3{
	color: white;
	background-color: var(--accentColourBright);
	padding-left:10px;
	font-size: 1.35em;
	margin-bottom:0.8em;
}

h5{
	color: var(--HeaderTextColour);
	font-size: 1.2em;
	margin-bottom:0.7em;
}

iframe{
	border:none;
	width:100%;
	min-height:1600px;
}
#SummerFrame{
		min-height:3100px;
}

#AttentionLink{
	border:2px dashed;
	border-radius:8px;
	padding:0.8em;
	margin:0.8em;
	margin-left:25%;
	width:50%;
	text-align:center;
}


/****************
Footer
****************/

#Bottom {
	padding-top:10px;
	border-top:1px dotted grey;
	font-size:0.8em;
	font-family:Liberation Mono;
	text-align:center;
	clear:both;


}