/*  -*- coding: utf-8 -*- */
* {
    box-sizing:	border-box;
}

body {
    background-position:	right top;
    background-repeat:		no-repeat;
    background-color:		#000;
    background-size:		100%;
}

body, h1, p {
    font-family:	"Jost";
    font-weight:	400; 
    color:		#FDD504;
    margin:		0;
    padding:		0;
}

input, select, textarea {
    color:		#FDD504;
    background-color:	#000;
    font-family:	"Jost";
    font-size:		inherit;
}

td label {
    padding:		5px;
}

td.formlabel * {
    float:		right;
}

td.formvalue * {
    float:		left;
}

body, h1 {
    text-align:		center;
}

p {
    text-align:		left;
}

.button {
    text-align:		center;
    border-radius:	6px;
    padding:		4px;
    margin-top:		4px;
    margin-bottom:	4px;
    margin-left:	4px;
    margin-right:	4px;
    background-color:	#353535;
    color:		#FDD504;
}

.button:hover {
    background-color:	#33465a;
}

li {
    text-align:	left;
}

.button-icon {
    height:	0.9em;
    padding:	1px;
    background:	#FDD504;
}

.visualization-screenshot {
    width:	90%;
}

.sample-figure {
    width:	80%;
}

.header {
    background:		linear-gradient(90deg, #111111, #556655);
    padding:		5px;
    padding-top:	8px;
}

.smallheader {
    background:		linear-gradient(90deg, #111111, #333333);
    padding-top:	1.5em;
    font-size:		large;
}

.header img {
    width:	100%;
}

a.homelink {
    position:		absolute;
    left:		5px;
    top:		5px;
    vertical-align:	middle;
}

img.homelinklogo {
    height:	20px;
    float:	left;
}

.column {
    float:	left;
    padding:	5px 10px 0px 10px;
}

.row {
    padding:	5px 10px 0px 10px;
}

.tall-list {
    display:		inline-block;
    vertical-align:	top;
    margin-bottom:	auto;
}

.clearfix::after {
    content:	"";
    clear:	both;
    display:	table;
}
.menu {
    width:	90%;
    float:	none;
}
.rowmenu {
    width:	max-content;
    display:	block;
    margin:	auto;
}
.columnmenu {
    width:	auto;
    margin:	auto;
}
.content {
    width:		90%;
    margin-left:	2em;
}
.cover {
    width:		100%;
}
.cover-image {
    width:		90%;
}
.menu ul, .rowmenu ul, .columnmenu ul {
    list-style-type:	none;
    margin:		0;
    padding:		0;
}
.columnmenu ul {
    display:	inline-block;
}
.menu li, .rowmenu li {
    padding:	0.5em;
}

ul.narrative li {
    list-style-type:	"\25B6 ";
    padding-left:	0.5em;
    text-align:		left;
}

ul.level2 li {
    font-size:	0.85em;
}

.footnote {
    font-size:	x-small;
    color:	lavender;
}

h1 {
  font-size:	1.4em;
  font-weight:	300;
  margin:	0 0 8px 0;
}

p {
  margin:	0 0 10px;
}

.textgraphic {
    height:	1.0em;
    position:	relative;
    bottom:	-0.08em;
}

.textgraphic:hover {
    background-color:	#aaccff;
}

.row:before, .row:after {
    display:	table;
    content:	" ";
}

div.chosen {
   /* display:	none; */
}

p.chosen {
    text-align:	left;
}

p.centered {
    text-align:	center;
}

.address_line {
    display:		block;
    padding-left:	20px;
    text-align:		left;
}

.footer {
    padding:	10px;
    text-align:	center;
}

p.footer {
    font-size:	0.8em;
}

a {
    color:		blue;
    text-decoration:	none;
}

a {
    color:		#3282e6;
}

a:hover {
    color:		blue;
}

.mainmenu-button:hover {
    color:		#FFE544;
    background-color:	#2a404a;
}
.mainmenu-button {
    font-size:	xx-large;
    position:	fixed;
    left:	5px;
    top:	25px;
}

#mainmenu-background {
    display:		none;
    position:		fixed;
    z-index:		1;
    left:		3em;
    top:		3%;
    width:		60%;
    min-width:		15em;
    overflow:		auto;
    background-color:	#2a404a;
    background-color:	rgba(42, 64, 74, 0.95);
    border-radius:	15px;
    -webkit-animation:	fadeIn 1s;
    animation:		fadeIn 1s;
}

#mainmenu {
    margin:		auto;
    padding:		10px;
    -webkit-animation:	fadeIn 1s;
    animation:		fadeIn 1s;
    overflow:		auto;
}

.adopter {
    display:		inline-block;
    padding-inline-end:	3em;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

@media screen and (min-width: 680px) {
    body {
	background-size:	auto;
    }
    
    .smallheader {
	font-size:	x-large;
	padding-top:	5px;
    }

    #mainmenu-background {
	width:		15%;
    }
    
    .menu {
	width:	100%;
	float:	left;
    }
    .content {
	width:		60%;
    }
    .cover {
	width:		35%;
	float:		left;
	padding-top:	10px;
    }
    .cover-image {
	width:		100%;
    }

    .menu li {
	padding:	1em;
	margin-top:	10px;
	margin-bottom:	10px;
    }
    .menulist {
	display:	inline-flex;
    }
    .rowmenu li {
	max-width:	30%;
	padding:	8px;
	margin-left:	10px;
	margin-right:	10px;
    }
    .columnmenu li {
	padding:	8px;
	margin-left:	10px;
	margin-right:	10px;
    }
    .button {
	border-radius:	10px;
    }
    .sample-figure {
	width:		50%;
    }
    h1 {
	font-size:	3.0em;
	margin:		0 0 20px 0;
    }
    p {
	margin:		0 0 10px;
    }
    .header {
	padding:	15px;
	padding-top:	25px;
    }
    .homelinklogo {
	height:		40px;
    }
    .column {
	padding:	10px;
    }
}