/*
css for mikrotax. NB THe dropdownmenus use tables and are messed up if table settings are changed here.
The alternative is to use a class for tables one wants to change - see INA css.

§Basic HTML selectors*/
body {
	margin: 0px auto;
	padding: 0;
	width: 92%; /*this leaves rest of page width as clean white margins*/
	font-family: Geneva, Tahoma, sans-serif;
	font-size: 85%;
	background: white;}


p {
  margin-top: 0em;
  margin-bottom: 1em;
}
ul {
 margin-top: 0em;
	}
ol {
 margin-top: 0em;
	}

h1 {
	font: normal 320%/100%  sans-serif;
	margin: 20px 0 5px 0;
	letter-spacing: -2px;}
/* h2 controls page title */

h2 {font: normal,  sans-serif;
	margin: 20px 0 5px 0;
	letter-spacing: 0px;}

h3 {font: normal,  sans-serif;
	color: darkblue;
	margin: 20px 0 5px 0;
	letter-spacing: 0px;}

h4 {font: normal,  sans-serif;
	margin: 20px 0 5px 0;
	letter-spacing: 0px;}

img {border: 25px;}

input[type='number']{
    width: 80px;
}

input[type='submit'] {
  background-color: lemonchiffon;
  cursor: pointer;
  border-radius: 6px;
 border: 1px solid #222222;
 color: black;
}


/*§buttons */
.button-12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  border-radius: 6px;
  border: none;

  background: #6E6D70;
  box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
  color: #DFDEDF;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-12:focus {
  box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
  outline: 0;
}



a {color: blue; text-decoration: none}
a:hover{color: blue; text-decoration: underline;}

/*§table*/
table {color: black; font-size: 1em; border-collapse:collapse;}


table.stdtable {
  font-size: small;
  text-align: left;
  font-family: sans-serif;
  #background-color: #B3B3B3;
  vertical-align: middle;
  border: 2px solid;
}
ttableh.stdtable tr {
  padding: 10px;
  text-align: left;

}
table.stdtable td {
  border-color: black;
  padding: 10px;
  background-color: #DEE;
  border: 1px solid;
}
table.stdtable th {
  border-color: black;
  padding: 10px;
  background-color: khaki;
  border: 1px solid;
}

.newcomb {background-color: green;}

/*§Vertical captions for tables */
.sidewaystext {
  writing-mode: sideways-lr;
}

.sidewaystext {
/* from https://stackoverflow.com/questions/1080792*/
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

td.input{
 background-color: khaki;
}

/*§Rotated text on Neptune species tables --*/

table.neptable {color: black;
border-collapse: collapse;
font-size: 6pt;
tr: {background-color:yellow};
}


th.rotate {
  /* Something you can count on */
  font-weight: normal;
  height: 140px;
  white-space: nowrap;
}

th.rotate  div {
  transform:
    /* Magic Numbers - these shift the block of sloping text left-right and up-down */
    translate(12px, 55px)
    /* 315 = 360 - 45 */
    rotate(315deg);
  width: 20px;
}
th.rotate  div span {
  border-bottom: 1px solid #ccc;
  padding: 5px 5px;
}

/*§color coding of occurrences on neptune tables */
.neptuneabove{
/*RED text & fill*/
text-align: center;
color: red;
font-weight: bold;
border: 0.5px gray solid;
padding: 0;
background-color: #FFF0F0;
}

.neptune{
/*black text & green fill*/
text-align: center;
color: black;
border: 1px black solid;
padding: 0;
background-color: #EFFBEF;
}

.neptunebelow{
/*purple text & grey fill*/
text-align: center;
color: Magenta;
font-weight: bold;
border: 0.5px gray solid;
padding: 0;
background-color: #ECECEC;
}

.neptuneindet{
/*black text & white fill*/
text-align: center;
color: black;
border: 0.5px gray solid;
padding: 0;
background-color: white;
}

.neptuneneutral{
text-align: center;
color: black;
border: 1px black solid;
padding: 0;
}

.CASCmeta{
/*black text & white fill*/
text-align: center;
color: black;
border: 0.5px gray solid;
padding: 0;
background-color: lightyellow;
}


/*formatting for Amos' SEM chart*/
.SEMabsent{
/*grey text & fill*/
text-align: center;
color: grey;
border: 0.5px gray solid;
padding: 0;
background-color: #F2F2F2;
}

.SEMrare{
/*green background*/
text-align: center;
border: 0.5px gray solid;
padding: 0;
background-color: #EFFBEF;
}

.SEMcommon{
/*blue background*/
text-align: center;
border: 0.5px gray solid;
padding: 0;
background-color: #CEECF5;
}

.SEMabundant{
/*lilac background*/
text-align: center;
border: 0.5px gray solid;
padding: 0;
background-color: #F2E0F7;

}

.bgyellow{
background-color: #FFFFE0;
}

.bggreen{
background-color: #EFFBEF;
}

.bgblue{
background-color: #E0FFFF;
}

.bgviolet{
background-color: #F8F8FF;
}

/* §ID selectors ;*/

#map { height: 100%; }


#bottom {color: #FFF;
	border: 0;
	border-top: solid 1px #ccc;}

#page_nav {
	color: #999;
	clear:both;
	text-align: center;}
#page_nav a:link, #page_nav a:visited, #page_nav a:hover, #page_nav a:visited:hover {
	text-decoration: none;
	color: #222;}

#breadcrumb_nav {color: #999;}
#breadcrumb_nav a:link, #breadcrumb_nav a:visited, #breadcrumb_nav a:hover, #breadcrumb_nav a:visited:hover {
	text-decoration: none;
	color: indigo;}


#container {
	overflow: auto;
	width: 100%}

#topbar {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	padding-top: 5px;
	border: none;
	float: none;
	width: 100%;
	height: 25px;
	text-align: center;
	background-color: grey;
	border-bottom: 1px solid #DDD;}
	#topbar a:link, #breadcrumb_nav a:visited, #breadcrumb_nav a:hover, #breadcrumb_nav a:visited:hover {
	text-decoration: none;
	color: black;}

#topbar img{
	position: absolute;
	right: 6;
	top: 6;
	vertical-align: middle;}

#refs { font-size: .85em;  padding-left: 4em ; text-indent: -4em ;}
#refs p { margin: 0em; margin-bottom: 0.5em; margin-left: 0em;}

#popup {
    height : 130px;
    background-color:Cornsilk;
}

/* §Class Selectors */
.backlink a {	font-size: 10px; text-decoration: none; color: #AAA;}
.backlink a:hover,
.backlink a:visited:hover {	color: #000;}
.refs { font-size: .85em;  padding-left: 4em ; text-indent: -4em ;}

/* .credits is class controlling sub-title */
.credits {border-bottom: solid 1px #ccc; padding-bottom: 5px;text-align: center; margin: 0 0 20px 0; font: 120% Garamond, Georgia, serif;}
.credits em {color: #999;}

.bold {font-weight: bold; ; font-size: 16px;}
.taxon_s {font-style: italic; font-size: 11px;}
.taxon_m {font-style: italic; font-size: 12px;}
.taxon_l {font-style: italic; font-size: 14px;}

.smallcaps {font-variant: small-caps;}
.smallcaps_s {font-variant: small-caps; font-size: 12px; }
.smallcaps_m {font-variant: small-caps; font-size: 14px; }
.smallcaps_l {font-variant: small-caps; font-size: 16px; }

.advert {text-align: center; margin: 0 0 30px 0; font: normal, sans-serif; color: purple;}

.noteQ {font-size: 10px; color: gray;}

/* §classes for character matrix table on pforam pages */
.char-matrix {background-color: rgb(205,205,205); width: 100%;}
.char-matrix-caption {background-color: rgb(210,210,210); color: rgb(80,80,80); font-size: 11px; text-align: right;}
.char-matrix-data {background-color: rgb(210,210,210); color: green; font-size: 11px; text-align: left;}
.char-matrix-dataB {background-color: rgb(190,190,210); color: green; font-size: 11px; text-align: left;}
.char-matrix-header {background-color: rgb(210,210,210); color: rgb(0,0,0); font-size: 11px; text-align: left;}

/* classes for time control */
.outofrange{ color: olive;}
.outofrange a{ color: olive; text-decoration: none;}
.outofrange a:hover{color: blue; text-decoration: underline;}


.unsetrange{ color: grey;}
.unsetrange a{ color: grey; text-decoration: none;}
.unsetrange a:hover{ color: blue; text-decoration: underline;}


.inrange{ color: darkblue;}
.inrange a{color: darkblue; text-decoration: none;}
/*.inrange a{color: blue; text-decoration: none; font-weight: bold;}*/
.inrange a:hover{color: blue; text-decoration: underline;}

.GDscroll
{
     max-height: 150px;
    overflow: auto;
}

/* §classes for general use */

.hidden {
	visibility: hidden;
	position:absolute;
	top:0;
	left:0;
	display:inline;}

.green{ color: green;}
.blue{ color: blue;}
.maroon{ color: maroon;}
.magenta{ color: magenta;}
.red{ color: red;}
.reply{ margin-left: 50px;}
.warning{ color: maroon; font-weight: bold;}
.greyed{ color: gray; font-size: 80%;}

.largertext{font-size: 110%;}

.fad{ background-color:white;}
.divide{ background-color: #AAA;}

.highlight{ background-color:LemonChiffon;}


.homotypicsyns ul {
	position: relative;
	list-style: none;
	margin-left: 3em;
	padding-left: 1.2em;
}
.homotypicsyns ul li:before {
	content: "=";
	position: absolute;
	left: 0;
}


.columns {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}



/* §-- styles for show more/less */
.morecontent span {
    display: none;
}
.morelink {
    display: inline;
}

.redText {
    background-color:#F00;
}


.taxonimage{
positon: relative;
color: maroon;
border: 2px solid gray;
background-color: silver;
}

.taxonicon{
color: maroon;
border: 2px solid maroon;
background-color: seashell;
}

.subtaxon{
color: green;
border: 2px solid green;
background-color: honeydew;
}

.catalogimage{
color: green;
border: 2px solid blue;
background-color: azure;
}

/* §-- style to use vertical text in table header --*/
.vrt-header th {
  writing-mode: vertical-lr;
  min-width: 50px; /* for firefox */
}


/* §Gallery class styles
 --these control display of images on most taxon pages - image ratio 1:1 --------------------- */

.imagegallery
{	overflow: auto;
	width: 100%;
	word-wrap: break-word;
	}

.imagegallery img {
	background: #fff;
	border: solid 1px #888;
	padding: 5px;
}

.imagegallery li:hover img {
	border-color: #000;
	background: #ddd;
}

.gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
}
.gallery li {
	padding: 10px;
	margin: 0;
	float: left;
	position: relative;
	width: 130px;
	height: 160px;
	overflow:hidden;
}
.gallery a {
	text-decoration: none;
}
.gallery a:hover em {
	color: #666;
}

/* ---------- the dinogallery class styles start here --these control display of images on FCPdinos pages - image ratio 1:1.4-------------------- */
.dinogallery {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dinogallery li {
	padding: 10px;
	margin: 0;
	float: left;
	position: relative;
	width: 168px;
	height: 140px;
	overflow:hidden;
}

.dinogallery img {
	background: #fff;
	border: solid 0px #000;
	padding: 5px;
}

.dinogallery li:hover img {
	border-color: #000;
	background: #bbb;
}


/* ---------- the pfgallery class styles start here --these control display of images on p foram pages - image ratio 2-------------------- */
.pfgallery {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pfgallery li {
	padding: 10px;
	margin: 0;
	float: left;
	position: relative;
	width: 250px;
	height: 160px;
	overflow:hidden;
}
.pfgallery li:hover img {
	border-color: #000;
	background: #ddd;
}
.pfgallery img {
	background: #fff;
	border: solid 1px #888;
	padding: 5px;
}

.pfgallery iframe {
	background: #fff;
	border: solid 1px #888;
	padding: 5px;
}


/**
/*§Tooltip styles
- from https://chrisbracco.com/a-simple-css-tooltip/ */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition:
      opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  width: 250px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 12px;
  line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
  bottom: 100%;
  left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #000;
  border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px);
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform:    translateX(-12px);
  transform:         translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: auto;
}

.tooltip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #000;
  border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px);
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
  -webkit-transform: translateX(12px);
  -moz-transform:    translateX(12px);
  transform:         translateX(12px);
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}

/*§Searchbox */

.SearchBox1 {
    position:absolute;
    background:grey url('/system/graphics/magnifying_glass.gif') no-repeat scroll left center;
    left:840px;
    margin-top:-26px;
}*/

/* searchbox (copied from stackoverflow - used for search on all pages)*/
.searchbox {
    display: inline-block;
    vertical-align: top;
    margin-top: 2px
}

.searchbox input[type=search] {
    background:white url('/system/graphics/magnifying_glass.gif') no-repeat scroll left center;
    margin:0;
    max-width:230px;
    padding-left:16px;
}

.searchbox input[type=search]:hover {
    background-color: #fafafb;
    border-color: rgba(0, 149, 255, 0.5);
    box-shadow: inset 0 1px 2px #e4e6e8, 0 0 2px rgba(0, 119, 204, 0.1)
}

.searchbox input[type=search]:focus {
    outline: 0;
    color: #3b4045;
    background-color: #FFF;
    border-color: #0095ff;
    box-shadow: inset 0 2px 2px #fafafb, 0 0 5px rgba(0, 119, 204, 0.5)
}

.searchbox form {
    margin: 0;
    padding: 0
}

/* §Check box images for advanced search

- unchecked version */
.image-checkbox-container input[type="checkbox"]{
    display: none;
}

.image-checkbox-container img{
    border: 4px solid white;
}

/* check box images for advanced search - checked version */
.image-checkbox-container1 input[type="checkbox"]{
    display: none;
}

.image-checkbox-container1 img{
    border: 4px solid gold;
}

/* check box images for advanced search - checked version */
.image-checkbox-container2 input[type="checkbox"]{
    display: none;
}

.image-checkbox-container2 img{
    border: 4px solid red;
}