/* layout with footer */
@media screen {
	html {
		height: 100%;
	}
	html > body {
		background-color: #FFFFFF;
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}
	html > body > main {
		flex: 1;
	}
}

/* clearing some defaults */
body, header, footer, main, nav, div, form, html > body > header > h1 {
	margin: 0;
	padding: 0;
}
html > body {
	font: 100% sans-serif;
}
html > body > header, html > body > main, html > body > footer {
	padding-left: 4%;
	padding-right: 4%;
}

/* the presenation of header */
html > body > header {
	border-bottom: 2px solid #000000;
	font-size: 100%;
	color: #FFFFFF;
	background-color: #303030;
	box-shadow: 0 0 0.2em 0 #A0C0FF;
	margin-top: 0;
	padding-bottom: 1ex;
	margin-bottom: 1ex;
	border-top: 1ex solid #303030;

	display: flex;
	align-items: baseline;
	flex-direction: row;
}
h1 {
	font: bolder 160% Verdana, sans-serif;
}
html > body > header > h1 {
	font: bolder 160% Verdana, sans-serif;
}
html > body > header > nav {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	justify-content: space-between;
	flex: 1;
}

html > body > header > nav > ul {
	margin: 0;
	padding: 0;
	flex: 1;
	list-style-type: none;
	display: inline;
}
html > body > header > nav > ul > li {
	display: inline;
}
html > body > header > nav > ul > li.home-link {
	display: none;
}
html > body > header > nav > ul > li:before {
	content: " /\a0";
}
html > body > header > nav > form {
	margin-left: 0.5em;
	display: inline;
	font-size: 80%;
}

@media screen and (max-width: 40em) {

  /* hide menu by default */
  html > body > header > nav > ul,
  html > body > header > nav > form {
	display: none;
  }

  html > body > header > nav > form {
  	padding-top: 1ex;
  }

  html > body > header > nav > ul > li,
  html > body > header > nav > ul > li.home-link {
	display: block;
	margin-left: 0;
	padding-top: 0.5ex;
	padding-bottom: 0.5ex;
  }
  html > body > header > nav > ul > li:before {
	content: "";
  }
  html > body > header > nav > ul > li > a,
  html > body > header > nav > ul > li > a:visited {
	color: white;
	display: block;
	text-decoration: none;
	padding: 0 0.3em;
  }

  html > body > header > nav > form {
	margin-left: 0;
  }

  /* put menu to top right corner */
  html > body > header {
	position: relative;
  }
  html > body > header > nav {
	margin-right: 4%;
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	padding: 0 0.7em;
	border-radius: 0.3ex;
  }

  /* menu icon */
  html > body > header > nav:before {
	display: block;
	font-size: 160%;
	width: 100%;
	content: "\2261";
	text-align: right;
  }


  /* display items on hover */
  html > body > header > nav:hover > ul,
  html > body > header > nav:hover > form {
	display: block;
  }
  html > body > header > nav:hover {
	display: block;
	max-width: 80%;
	min-width: 7em;
	/* add bottom padding to form nice frame */
	padding-bottom: 0.5em;
	background-color: grey;
  }
  html > body > header > nav:hover:before {
  	color: black;
  }
  html > body > header > nav > ul > li > a:hover {
	color: white;
	background-color: black;
  }

  html > body > footer {
  	display: none;
  }
}

#adelton-logo {
	color: #000000;
	font-style: italic;
}
header #adelton-logo * {
	color: white;
}
#adelton-logo:after {
	content: "\25cf";
	color: #F00000;
	position: relative;
	bottom: 0.25em;
	font-style: normal;
}
#adelton-logo a {
	text-decoration: none;
}




/* the presenation of footer */
footer {
	clear: both;
	margin-top: 3ex;
	padding-top: 1ex;
	padding-bottom: 1ex;
	overflow: auto;
	border-top: 2px solid #000000;
	background-color: #303030;
}
footer * {
	font-size: 80%;
	text-decoration: none;
	color: #F0F0F0;
}
footer a:link, footer a:visited {
	color: #F0F0F0;
}
footer a:hover {
	color: #FFFFFF;
}
footer div {
	padding-right: 3%;
	width: 17%;
	min-width: 10em;
	float: left;
}
footer h3 {
	margin: 0;
}
/* end of the presenation of header and footer lines */

p#subtitle {
	margin: 0;
	padding: 0 3em 0.6em;
	background-color: #FFF;
}



div#software, div#tutoring, div#people {
	width: 30%;
	margin-right: 4%;
	float: left;
}
div#people {
	margin-right: 0;
}
section > h1, h2 {
	font-size: 120%;
	margin: 0.8em -0.4em 0 -0.66em;
	padding: 0.6em 0 0 0.66em;
	border-top: 0.2em solid #F7F8FF;
}
hr {
	border: none;
	border-top: 0.2em solid #F7F8FF;
	margin: 0 -0.4em 0 -0.66em;
	color: white;
}
section > section > section > h1 {
	font-size: 100%;
	border-top: 0;
}
footer ul {
	list-style: none;
	margin: 0;
	padding: 0.1em 0;
}
footer ul li {
	margin: 0;
	padding: 0;
}

a:link {
	color: #202020;
}
a:visited {
	color: #000000;
}

header > nav a:link, header > nav a:visited {
	color: white;
}

img.titlelogo {
	float: right;
	background-color: white;
	padding: 0.5em;
	margin-right: 3em;
}

img {
	max-width: 100%;
}

p, dd {
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}

pre {
	background-color: #F7F8FF;
	margin-left: -0.8em;
	margin-right: -0.4em;
	padding: 0.4em 0 0.4em 0.8em;
	overflow: auto;
	border-bottom-right-radius: 0.4em;
	border: 1px solid #E0E4FF;
	font-size: 110%;
}
code {
	background-color: #F7F8FF;
	padding: 0 0.2em;
	border-bottom: 1px solid #E0E4FF;
}
h2 code, h3 code, ul.toc code {
	background-color: inherit;
	padding: 0;
	border: inherit;
	font-weight: normal;
}
pre code {
	border: none;
	padding: 0;
}
pre code.prompt {
	color: #505050;
}
dt {
	font-size: 110%;
}

div.homepage {
	clear: both;
	flex: 1;
}
div.homepage ul li {
	padding: 0.4em 0;
}
@media (min-width: 50em) {
	div.homepage {
		font-size: 110%;
	}
	div.homepage div {
		padding-right: 3%;
		min-width: 10em;
		float: left;
		width: 30%;
	}
	div.homepage ul {
		list-style: none;
		margin: 0;
		padding: 0.1em 0;
	}
	div.homepage ul li {
		padding: 0.2em 0;
	}
}

dl + dl {
	border-top: 0.1em solid #EEE;
	padding-top: 0.5em;
}
section section dl {
	border-top: none;
	padding-top: 0;
}

q:lang(cs) {
	quotes: "\201E" "\201C" "\00BB" "\00AB";
}
q:lang(en) {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

li p:first-child {
	margin-top: 0;
	margin-bottom: 0;
}
dd {
	margin-left: 3em;
}
ul { 
	padding-left: 3em;
}
li { 
	list-style-position: outside;
	padding-left: 0em;
}
@media (max-width: 400px) {
	dt {
		display: list-item;
		list-style: outside;
		font-size: inherit;
		margin-left: 1em;
	}
	dd {
		margin-left: 1em;
	}
	ul { 
		padding-left: 2em;
	}
}
div.informalfigure, table {
	display: block;
	max-width: 100%;
	overflow: auto;
}
code.command {
	white-space: nowrap;
}
pre .rootcommand:before {
	content: "# ";
	color: #808080;
}
pre > title {
	background-color: #E0E4FF;
	display: block;
	margin-left: -0.8em;
	padding: 0.4em 0 0.4em 0.8em;
	position: relative;
	top: -0.4em;
}
pre[title]:before {
	content: attr(title);
	background-color: #E0E4FF;
	display: block;
	margin-left: -0.8em;
	padding: 0.4em 0 0.4em 0.8em;
	position: relative;
	top: -0.4em;
}

div > div.revhistory > table {
	border: 0px;
}
div > div.revhistory > table th {
	display: none;
}

@media print {
	html > body > header, html > body > footer {
		display: none;
	}
	a, a:visited {
		text-decoration: none;
	}
}