/* basic font formatting stuff */

body {
  font-family: Ubuntu, sans-serif;
  line-height: 1.4;
  background-color: Black;
  color: White;
}

a { color: White; }
a:link { color: #8080ff; }
a:visited { color: #6060b0; }
a:active { color: #ffffff; }

li { margin-bottom: 0; }

div.news:first-line { font-weight:bold }
div.news {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

.center { text-align: center;  }
.top    { vertical-align: top; }

/* code formatting */

code {
  border: 1px dashed #6060B0;
  background-color: #181830;
  color: #C0C0FF;
}

pre > code {
  overflow: hidden;
}

/* futile attempt to make pre auto-hide the first empty line after the tag */
/* pre > code::first-line { text-indent: 100%; vertical-align: top; white-space: nowrap; line-height: 0; background: white; margin-top: -10px; } */

/* table formatting */

table.border {
	border: 1px solid;
	border-collapse: collapse;
}

table.border td, th {
	border: 1px solid;
	padding: 4px;
}

/* publication table */

div.tblhead {
	padding: 5px;
	margin: 10px 0;
	background-color: #404040;
}

tbody td {
    border-bottom: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

a.title {
	font-weight: bold;
}

td.icons {
	vertical-align: top;
	width: 50px;
}

/* footer */

footer {
  text-align: center;
  border-top-style: solid;
  border-top-width: 2px;
  padding-top: 5px;
  margin-top: 10px;
}

h1, h2, h3 {
	font-size: 200%;
	font-weight: bold;
	text-align: left;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	padding-top: 10px;
	padding-bottom: 15px;
	margin-bottom: 20px;
  clear: right;
}

h2, h3 {
	font-size: 120%;
	padding-top: 0px;
	padding-bottom: 15px;
	margin-bottom: 10px;
}

h3 {
  border-bottom-style: none;
}

/* menu positioning and interactive stuff */

.slide {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}

.slide.show {
  opacity: 1;
  max-height: 1000px;
}

ul.menu {
  cursor: pointer;
  font-weight: bold;
  list-style-type: none;
}

ul.menu > li {
  padding-left: 1em;
}

ul.menu > li::before {
  font-size: 75%;
  vertical-align: text-top;
  content: "▼ ";
}

ul.menu div {
  cursor: default;
  display: block;
  font-weight: normal;
  overflow: hidden;
}

/* tooltip stuff from https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/ */

.tooltip {
  position: relative; /* making the .tooltip span a container for the tooltip text */
  border-bottom: 1px dashed #fff; /* little indicator to indicate it's hoverable */
}

.tooltip:before {
  content: attr(data-text); /* here's the magic */
  position: absolute;
  
  /* vertically center */
  top: 50%;
  transform: translateY(-50%);
  
  /* move to right */
  left: 100%;
  margin-left: 15px; /* and add a small left margin */
  
  /* basic styles */
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  background: #004;
  color: #fff;
  text-align: center;

  display: none; /* hide by default */
}

.tooltip:after {
  content: ""; /* create an arrow by abusing the margin borders */
  position:absolute;

  /* position tooltip correctly */
  left:100%;
  margin-left:-5px;

  /* vertically center */
  top:50%;
  transform:translateY(-50%);

  /* the arrow */
  border:10px solid #004;
  border-color: transparent #004 transparent transparent;

  display:none;
}

.tooltip:hover:before, .tooltip:hover:after {
  display:block; /* show the tooltip when hovering */
}

/* stolen from jekyll/minima */

.svg-icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  fill: currentColor;
  vertical-align: text-bottom;
}