html, body {
	   height: 100%; 
	   overflow: hidden;
	   margin: 0px;
	}
	body { font-family: "Segoe UI", sans-serif; }
	#image-container img { 
	   max-width: 100%;
	   max-height: 100%;
	   height: auto;      
	   width: auto;
	   position: absolute;
	}
	#image-container {
	   height: 60%;
	   display: flex;
	   flex-direction: column;
	   padding: 4px;
	   box-sizing: border-box;
	   position: relative;
	}
	#description-container { 
	   position: relative;
	   height: 40%;
	   overflow-y: hidden; 
	   padding: 4px;
	   box-sizing: border-box;
	}
	#header {
	   display: flex;
	   justify-content: flex-end;
	}
	.diagram-container { 
	   position: relative; 
	   flex: 1;

	   display: flex;
	   justify-content: center;
	}
	.descriptions table { border-collapse: collapse;}
	.descriptions table td,
    .descriptions table th	{ border: 1px solid black; }
	
  .descriptions table {
     display: block;
     table-layout: fixed;
  }
  .descriptions table > thead {
     display: inline-block;
  }
  .descriptions table {
     height: 100%;
  }
  .descriptions table > tbody {
     display: inline-block;
     position: relative;
	   overflow-y: scroll; 
	   scroll-behavior: smooth;   
     height: calc(100% - 3ex);
  }
  .descriptions table > tbody {
     width:  100%;
  }
  .descriptions table > thead {    
     width:  100%;
  }
  .descriptions table > tbody > tr,
  .descriptions table > thead > tr  {
      width: 100%;
  }
  .descriptions table .col-symbol {
      min-width: 8em;
      max-width: 8em;
  }
  .descriptions table .col-variable {
      min-width: 22em;
      max-width: 22em;
  }
  .descriptions table .col-description {
      width: 100%;
  }
	.descriptions table > tbody > tr:hover, 
	.descriptions table > tbody > tr.highlight, 
	div.highlightable.highlight,
	div.highlightable:hover 
	{
        background-color: #ffff99;
    }
	div.highlightable.highlight, 
	div.highlightable:hover
	{
		border: 2px solid #cccc77;	
	}
  div.highlightable.highlight-flash {
    background-color: #ffd700;
		border: 3px solid #ffc000;	
    opacity: 0.75;
    -webkit-transition: background-color opacity 0s step-start;
    -moz-transition: background-color opacity 0s step-start;
    -o-transition: background-color opacity 0s step-start;
    transition: background-color opacity 0s step-start;
	}
  
    div.highlightable {
		position: absolute; 
		opacity: 0.4;
		border-radius: 3px;
		margin-top: -2px;
		margin-left: -2px;
		cursor: pointer;
    
  }
    
  .descriptions table > tbody > tr,
  div.highlightable {
	  -webkit-transition: background-color 0.1s ease-out;
    -moz-transition: background-color 0.1s ease-out;
    -o-transition: background-color 0.1s ease-out;
    transition: background-color 0.1s ease-out;    
	}