:root {
  --background-color: snow;
  --foreground-color: black;
  --highlight-color: #f26d20;
  --background-high: seashell;
}
@media (prefers-color-scheme: dark) {
:root {
  --background-color: black;
  --foreground-color: snow;
  --highlight-color: #f26d20;
  --background-high: chocolate;
}
}


body {
    background: var(--background-color);
    background-color: var(--background-color);
    color: var(--foreground-color);
}

a {

	color: var(--highlight-color);
	text-decoration: none;
	border: none;
}

a:hover {

	padding: 0px;
	color: var(--foreground-color);
	text-decoration: underline;
}

a.header {
	color: var(--background-color);
	text-decoration: none;
}

a.header:hover {

	padding: 0px;
	color: var(--highlight-color);
	text-decoration: none;
}

hr { 

	height: 0; 

	border: solid var(--background-high)  0; 
	border-top-width: thin;
	border-color: #c0c0c0;

	margin-left:0pt;
	margin-right:0pt;
}

body, h3 {

	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 20px;

	font-size: 12pt;
	font-family: Arial, Helvetica, sans-serif;
	text-indent: 0cm;
}

h1 {

	border-bottom: 1px solid #c0c0c0;
	padding-bottom: 2pt;

	font-size: 18pt;
}

h2 {

	font-size: 14pt;
}

h3 {
	font-weight: bold;
	text-decoration: underline;
}

small {
	color: #808080;
}

blockquote {
	color: #808080;
	font-style: italic;
	border-left: 2pt solid #808080;
}

label {
	position:absolute;

	margin-top: -45px;
	margin-left: -20px;

	border-top: 1px solid white;
	border-bottom: 1px solid white;
	border-right: 4px solid #f26d20;
	border-left: 4px solid #f26d20;

	padding-top: 4px;
	padding-bottom: 2px;
	padding-left: 15px;
	padding-right: 15px;

	background-color: var(--background-color);

	font-size: 16pt;
	font-weight: bold;
	color: var(--foreground-color);
}

#wrapper{

 	margin-top:30px;

	border-left:130px solid var(--background-color);
	border-right:30px solid var(--background-color);
}

#simplewrapper{

 	margin-top:30px;

	border-left:130px solid var(--background-color);
	border-right:30px solid var(--background-color);
}

#content {

	border-top: 1px solid black;
	border-bottom: 0px solid white;
	border-left: 1px solid black;
	border-right: 10px solid #f26d20;

	padding-top: 30px;	
	padding-left: 60px;
	padding-right: 40px;
	padding-bottom: 20px;

	background: var(--background-color);
	text-align: justify;
}

#footer{

	border-top: 1px solid black;
	border-left: 5px solid black;

	padding-left:10px;
	padding-top:1px;

	text-align:right;
	font-size:10pt;
}

#sidebar {

	position: absolute;
        top: 150px;
	left: 15px; 

	border-top: 1px solid #f26d20;
	border-bottom: 1px solid #f26d26;
        border-right: 1px solid white;
	border-left: 1px solid white;

	background-color: var(--background-color);

	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 3px;
	padding-right: 3px;
}
.infobox{
	display:block; 
	float:left;
	position:relative;
	border:1px solid #000; 
	background-color:#CCC;
	width:19px;
	height:15px;
}
.infobox .more{
	display:none;
}
.infobox:hover .more{
	clear:both;
	display:block;
	position:absolute;
	z-index:1;
	left:-1px;
	top:-1px;
	width:800px;
	border:1px solid #900;
	background-color:#CCC;
	margin-top:15px;
}

    .poptarget {
      border: 1px darkmagenta dashed;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      padding: 1px;
      position: relative;
      margin: 0.5em;
      padding: 2px;
    }
    .popcontent pre {
      margin: 0px;
    }
    .poptarget .popcontent {
      visibility: hidden;
      top: 5px;
      left: 5px;
      width: 800px;
      max-height: 500px;
      background-color: blanchedalmond;
      padding: 2px;
      border: 1px solid darkorange;

      /* Position the tooltip text - see examples below! */
      position: absolute;
      z-index: 1;
      overflow: scroll;
    }
    .popcontent textarea {
      width: 100%;
      min-height: 400px;
      background-color: rgba(255,255,255,255);
    }

    .poptarget:hover .popcontent {
      visibility: visible;
    }
/*-- added 2019-2-22 for publications --*/
nav.side {
  background-color: var(--background-color);
  position: fixed;
  top: 100px;
  right: 5px;
  text-align: center;
}
nav.side a, nav#sidebar a{
  display: block;
  border-bottom: 2pt solid darkorange;
  padding: 0.3em;
  transition: background-color 0.5s ease,
                color 1s ease;
}
nav.side a:first-child, nav#sidebar a:first-child {
  border-top: 2pt solid darkorange;
}
nav.side a:hover, nav#sidebar a:hover {
  background-color: var(--highlight-color);
  color: var(--background-color);
  text-decoration: none;
  transition: background-color 0.1s ease,
                color .5s ease;
}

    summary {
        color: darkgrey;
    }
    details textarea {
        width: 70%;
        height: 10em;
    }
    details .abstract {
        background-color: var(--background-high);
        border: 1pt solid purple;
        border-radius: 5px;
        padding: 0.7em;
    }

table {
    border-top: 2px solid var(--highlight-color);
    border-bottom: 2px solid var(--highlight-color);
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    vertical-align: middle;
    padding: 2px 1em;
    color: var(--foreground-color);
    background-color: var(--background-color);
}

table td, table th {
    padding: 0.3em 0.5em;
}

table tr:first-child {
  border-bottom: 1px solid orange;
}

table tr:nth-child(2n+2) {
    background-color: var(--background-high);
}