/* Main Settings */

html, body {
	font-family: "Times New Roman", Times, serif; /*helvetica, verdana, arial, sans-serif; */
	font-size: 1.5vmin; /*16px; 1vw; */
  height: 100%; width:100%;
  padding: 0px;
  margin: 0px;
  text-align: left;
  background-image: url("images/background.jpg");
	background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
}

a {
  text-decoration: none;
}

th td {
	font-size: 1vw;
}

h1 {
  font-size: 2vw;
  font-weight: bold;
  margin-bottom: 1vw; 
}
h2 {
  display: inline;
  font-size: 1vw;
  font-weight: bold;
}

input[type="text"] {
  border:none;
  border-bottom: 1px solid Gray;
  text-align: right;
  background: transparent;
}

.item_title {
  font-weight: bold;
}

.title {
	font-size: 3vw;
	font-weight: bold;
	margin-bottom: 1vw;
}
.view_title {
  font-size: 2vw;
  font-weight: bold;
   font-style: italic;
  margin-bottom: 1vw;
}

.footer {
    position: fixed;
    bottom: 0;
    right: 10px;
}

#navigation {
  width: 65%;
  height: 100%;
  float: left;
}

#preview {
  width: 35%;
  height: 100%;
  float: right;
}

.main_table {
  float: left;
	margin: 15px 0 0 10px;
  width: 90%;
}

.header_line {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;	
}

#genus_input {
  text-align: left;
}

.thumb {
  float: left;
  width: 20%;
  max-height: 7vh;	
  padding: 5px;
}

/* make the three columns stack on top of each other instead of next to each other 
@media screen and (max-width: 500px) {
  .img_column {
    width: 100%;
  }
}  */                                                                               

/* Clear floats after image containers */
.thumbs_block::after {
  content: "";
  clear: both;
  display: table;
} 
 
 .row {
   width:100%;
 }
 
#content {
  width: 100%;
  height: 100%;
}

.thumbs {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  position: relative;
}

.thumbsItem{
    padding: 3px;
}

.thumbsItem img {
    width: 135px; /* Dimensions chosen to fit more or less */
    height: 90px;
    overflow: hidden;
    object-fit: cover;
}

.content_header {
  width: auto;
  height: 7%;
  font-size: 2vw;
  font-weight: bold;
  padding-left: 20px;
}
 
.content_left {
  width: 29%;
  float: left;
  margin: 0;
  /* position:relative; */
  height:92%;
  overflow: auto;
}

.sample_text_content.a {
  position:absolute;
  bottom: 0;
}

#content_right {
  width:68%;
  height: 92%;
  float: right;  
 margin: 0 0px 0 0;  
 /* border: 5px solid black; */
}

#sample_img {
  height:100%; width:100%;
  margin:0 auto; padding: 0;
  max-width:100%; max-height:100%;
}
               
#scaled_img {  
  max-width:100%;
  max-height:100%; 
	
}
#map {
	position: absolute; 
	top:0;left:29%;
  margin:0; padding: 0;
	/*height:900px; width:100%; */
	max-width:100%;
  display: none;
}

#pagination a, #pagination strong {
	text-align: center;
	background: #e3e3e3;
	padding: 4px 7px;
	text-decoration: none;
	border: 1px solid #cac9c9;
	color: #292929;
	font-size: 13px;
}

#pagination strong, #pagination a:hover {
	font-weight: normal;
	background: #cac9c9
}


#sortable { list-style-type: none; margin: 0; padding: 0; width: 950px; }
#sortable li { margin: 5px 5px 5px 0; float: left; }
#sortable img { margin: 3px 3px 3px 0; padding: 1px; width: 170px; height: 100px; }
 
.taxon {
  color: black;
  background-color:transparent;
} 
.taxoninverted {
  color:white;
  background-color: black;
}

.rTable    { display: table; width: 100%; }
.rTableRow       { display: table-row; background-color: #E0E0E0;}
.rTableHeading    { display: table-header-group; }
.rTableBody    { display: table-row-group; }
.rTableFoot    { display: table-footer-group; }
.rTableCell, .rTableHead  { display: table-cell; }
.rowTitle {
  font-size: 20px;
  font-weight: bolder;
  margin-top: 5px;
}

table.stats td {
   border: 1px solid black;
   margin: 2px;
   padding: 5px;
}

.visible {
  margin: 3px;
  padding: 0;
  background-image: url("images/visible.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 18px 18px;
}

.invisible {
  margin: 3px;
  padding: 0;
  background-image: url("images/invisible.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 18px 18px;
}

.del_image {
  margin: 3px;
  padding: 0;
  background-image: url("images/delete.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px 16px;
}
.star {
  background-image: url("images/star.png");
  margin: 3px;
  padding: 0;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px 16px;
}

.star_empty {
  background-image: url("images/star_empty.png");
  margin: 3px;
  padding: 0;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px 16px;
}

.text {
  margin: 3px;
  padding: 0;
  background-image: url("images/text.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px 16px;
}

.no_text {
  margin: 3px;
  padding: 0;
  background-image: url("images/no_text.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px 16px;
}

.img_deleted {
  opacity: 0.3;
}

.img_type1 {
  margin: 3px;
  padding: 0;
  background-image: url("images/picture.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px 16px;
}

.img_type2 {
  margin: 3px;
  padding: 0;
  background-image: url("images/magnifier.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px 16px;
}
.img_type3 {
  margin: 3px;
  padding: 0;
  background-image: url("images/microscope.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px 16px;
}
.img_type4 {
  margin: 3px;
  padding: 0;
  background-image: url("images/map-marker.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 16px 16px;
}

#selectable { list-style-type: none; margin: 0; padding: 0; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 45px; height: 45px; }

label {
    display: inline-block;
    width: 5em;
  }