.result-list {
  margin: -5px -5px 0 -5px;
}

.record-item {
  width: 112px;
  position: relative; /* Tried to not use this because of Edge (see #196) but it is needed */
  padding: 5px !important;
  margin: 5px 0 0 5px;
  border: 1px solid transparent;
  border-color: #ddd;
  border-radius: 4px;
  text-align: center;
}

.record-item:hover, .record-item.highlighted {
  background-color: #e6e6e6;
  border-color: #adadad;
}

.record-item.selected-for-download {
  border-color: red;
}

.record-item a {
  display: block;
  height: 100px;
}

.record-item img {
  max-width: 100px;
  max-height: 100px;
  min-height: 50px;
  margin: 0;
  padding: 0;
}

.record-item img.fade-in {
  -webkit-animation: fadein 1s;
     -moz-animation: fadein 1s;
      -ms-animation: fadein 1s;
       -o-animation: fadein 1s;
          animation: fadein 1s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.record-item input[type="checkbox"] {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.record-item button.record-info {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
}

.record-item:hover button {
  display: block !important;
}