/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 26 jan. 2021, 17:29:11
    Author     : Wim
*/


html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    font-family: "Arial";
    background-color: #DDEEEE;
}

body { 
    margin-top:0px;
/*    max-width:  1350px;*/
}

h1 { 
    color: darkslategray;
    text-align: center; 
    font-size: 2em;
}

h2 { color: darkslategray;
text-align: center ;
margin-top: 0px;
margin-bottom: 3px;
font-size: 16px;
}

h3 { color: seagreen;
padding-left: 20px; 
margin-top: 0px;
margin-bottom: 0px;
}

h4 { color: seagreen;
padding-left: 20px; 
margin-top: 5px;
margin-bottom: 5px;
}

/*div.header{height: 44px;}*/

div.header span.h1 { 
    color: darkslategray;
    padding-left: 20px;
    font-size: 16pt;
    font-weight: bold;
    min-width: 200px;
}

span.copyright {
    text-align: right;
    font-size: 8pt;
/*    display: block;
    float:right;*/
}
/* responsive and layout */
* {
  box-sizing: border-box;
}


/*---------------  taxonomic tree  -----------------*/

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  width: 200px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */


button.collapsible:after {
    content: '\002B';
    color: #04049f;
/*    font-weight: bold;*/
    float: right;
    margin-right: 5px;
}
*, *:before, *:after {
    box-sizing: inherit;
}

button.collapsible.active:after {
    content: "\2212";
    font-weight: normal;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding-left: 10px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

div.family { display: block; }

button.family {
    font-style: italic;
    font-weight: normal;
    font-size: 13pt;
    padding-bottom: 6px;  

}
button.family:after {
    content: "\2212";
}    

button.genus {
    font-style: italic;
    font-weight: normal;
    font-size: 11pt;
    color: #04049f;
    padding-bottom: 4px;     
    width: 190px;
}

button.species {
    font-style: italic;
    font-weight: normal;
    font-size: 10pt;
    color: blue;
    padding-bottom: 2px;     
    width: 180px;
}

button.collapsible.active {
/*    font-weight: bold;*/
    background-color: #d6eef5;
}

.collapsible:hover {
  background-color: #ccc;
}

/*---------  species list ------------------*/

div.species-main{
    overflow-y: scroll;
    height: calc(100vh - 110px);
/*    float: left;*/
    font-size: 10pt;
    background-color: #EEFFFF;
}

div.species-footer{
  margin-top:4px;
}    

div.species-list{
    overflow-y: scroll;
    max-width: 230px;
    height: calc(100vh - 110px);
    float: left;
    font-size: 10pt;
    background-color: #EEFFFF;
}

table.species_list {
    width: 100%;
/*            border: 1px solid seagreen ;*/
    font-size:9pt;
    color: darkslategray;
    font-family:"Calibri",sans-serif;
    line-height: 1.0;
}

table.species_list tr:nth-child(even){background-color: #f2ffff;}
table.species_list td.td_image { color: darkblue; font-size:10pt; cursor: pointer;}
table.species_list td.mvsign { color: darkblue; font-size:12pt; font-weight:800;font-family: monospace;}
table.species_list tr.lastimg td { border-bottom: 1px solid blue;}
div.image-right{
/*    width: calc(100vw - 320px);*/
    height: calc(100vh - 110px);
/*    float: left;*/
    font-size: 10pt;
    background-color: #eeffff;
    overflow-y: scroll;
}
div.species-image{
    width: 100%;
/*    float: left;*/
    font-size: 10pt;
    background-color: #eff7f7;
}
div.legend{
    width: 100%;
/*    float: left;*/
    font-size: 10pt;
    background-color: #c0e7e7;
}

span.species-name{
    font-size: 14pt;
    float:left;
    font-style: italic;
}

span.species-sex{
    font-size: 13pt;
    display: block;
    float:left;
    padding-left: 10px;
}

span.species-legend{
    font-size: 13pt;
    padding-left: 100px;
}

div.specimenid{
    font-size: 11pt;
}

div.specimenlabel{
    float:left;
    width: 200px;
    text-align: center ;
    font-size: 10pt;
    background-color: white;
    border-top: 1px solid darkgray;
    border-left: 1px solid darkgray;
    border-bottom: 2px solid darkgray;
    border-right: 2px solid darkgray;
    display: none;
    margin-left: 8px;
    margin-top : 5px;
}

div.specimenlabel p {
    line-height: normal;
    padding-bottom : 0px;
    padding-top : 5px;
    margin-top : 0px;
    margin-bottom : 0px;
    padding-left : 10px;
}

p.legend {
    line-height: normal;
    padding-bottom : 1px;
    padding-top : 2px;
    margin-top : 0px;
    margin-bottom : 0px;
    padding-left : 10px;
}

img.zoomedout {
     max-width:800px;
     cursor: zoom-in;
 }     

 img.zoomedin {
     cursor: zoom-out;
     max-width:none;     
 }     



.img-modal{z-index:3;display:none;

         position:fixed;
         left:200px;
         top:100px;
/*         width:300px;
         height:100%;*/
         overflow:auto;
         background-color:rgb(0,0,0);
         background-color:rgba(0,0,0,0.4);
         border: 1px solid blue;
}
.img-modal-content{
    margin:auto;
    background-color:#fff;
    position:relative;
    padding:0;
    outline:0;
    max-width:800px;
    max-height:600px;
    height: auto;
    width:auto;
    cursor: zoom-out;
}
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
 /*  border-bottom: 1px dotted black; If you want dots under the hoverable text */
}


  .tooltip-right {

    left: 125%;
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 125%;
  margin-left: -60px;
  
/*  top: -5px;*/
    
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}


/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}