* {
  box-sizing: border-box;
}

h {
  color              : green;
  margin-left        : 100px;
  font-size          : 25px;
} 

.metaTable {
  position           : relative;
  float              : left;
  width              : 800px;
  margin-left        : 0px;
  margin-bottom      : 4px;
  margin-top         : 4px;
}

hr {
  border             : none;
  margin-bottom      : 40px;
}

body {
  height             : 100%;
  font-family        : Roboto, "Open Sans", sans-serif;
  font-size          : 15px;
  font-weight        : 300;
  text-rendering     : optimizeLegibility;
  background         : #e6e6e6;
}

.imagesClass {
  margin-bottom      : 5px;
  border             : none;
}

.metaScreen {
  position           : relative;
  width              : 360px;
  z-index            : 35;
}

.divImageClass {
  margin-bottom      : 10px;
  background         : #e5e7e9;
  border-style       : none;
}

.metadata {
  display            : none;
  border             : 1px solid black;
  background-color   : #c8c9cc;
  z-index            : 35;
}

.mdlexifhdr, .fszexifhdr {
  padding-left       : 5px;
  font-size          : 15px;
  color              : blue;
}

.exif, .mdlexif, .fszexif {
  table-layout       : fixed;
  font-family        : Calibri, Arial, Helvetica, sans-serif;
  font-size          : 13px;
  font-weight        : bold;
  color              : black;
  margin-top         : 5px;
  border-collapse    : separate;
  border-spacing     : 0px;
}

.exifblk {
  padding            : 5px;
  border-collapse    : collapse;
}

.exif td, .exif th {
  padding-left       : 10px;
  padding-right      : 10px;
  text-align         : left;
  background-color   : #e6fff7;
}

.exifa {
  width              : 200px ;
}

.exifb {
  width              : 260px ;
}

.exifColgroup {
  width              : 500px ;
}

/* =============================== */
/* Modal Window                    */
.myModals {
  position           : relative;
  float              : left;
}

.modal {
  position           : relative;
  z-index            : 20;
}

button{
  background         : grey;
  border             : none;
}
  
@keyframes move{
  from{
    transform: translate(0%);
  }
  50%{
    transform: translate(-40%);
  }
  to{
    transform: transform(0%);
  }
}

/* Header Menu Items */
#hdrMenu {
  overflow           : hidden;
}

#myMenu {
  position           : fixed;
  top                : 0px;
  left               : 0px;
  height             : 50px;
  width              : 180px;
  margin-left        : 0px;
  background-image   : url(icons/iconMenu4.png);
  background-repeat  : no-repeat;
  background-color   : white;
  z-index            : 46;
  overflow           : none;
}

/* Home button */
#homeButton {
  position           : fixed;
  top                : 0px;
  margin-left        : 5px;
  height             : 50px;
  width              : 42px;
 }

/* Refresh button */
#refreshButton {
  position           : fixed;
  top                : 0px;
  margin-left        : 84px;
  height             : 50px;
  width              : 42px;
 }

/* Help button */
#helpButton {
  position           : fixed;
  top                : 0px;
  margin-left        : 123px;
  height             : 50px;
  width              : 46px;
 }

button {
  background         : none;
  border             : none;
}

/* Image entry box */
.dropzone {
  position           : fixed;
  top                : 0px;
  margin-left        : 42px;
  height             : 50px;
  width              : 46px;
  z-index            : 46;
 }

.dropzone input {
  position           : fixed;
  height             : 50px;
  width              : 46px;
  z-index            : 47;
  opacity            : 0;
 }

/* Tool tips */
.tooltip {
  position           : relative;
  display            : inline-block;
  border-bottom      : 1px dotted black;
}

.tooltip .tooltiptext {
  visibility         : hidden;
  width              : 120px;
  background-color   : none;
  color              : white;
  text-align         : center;
  border-radius      : 6px;
  padding            : 5px 0;
  opacity            : .8;
  font               : bold;

  /* Position the tooltip */
  position           : absolute;
  z-index            : 1;
  top                : 100%;
  left               : 50%;
  margin-top         : 50px;
  margin-left        : 30px;
}

.tooltip:hover .tooltiptext {
  visibility         : visible;
}

#hdrCont {
  position           : absolute;
  top                : 0;
  left               : 0;
  height             : 100%;
  width              : 100%;
  display            : flex;
}

#hdrMain {
  width              : 50%;
  margin-top         : 10px;
  margin-left        : 260px;
  color              : green;
  font-size          : 25px;
  z-index            : 49;
}

#hdrMiddle1 {
  position           : absolute;
  width              : 250px;
  margin-top         : 120px;
  margin-left        : 10px;
  border             : 1px solid black;
  padding            : 5px;
  background-color   : #e6fff7;
  opacity            : 0.5;
  z-index            : 47;
}

#hdrMiddle2 {
  position           : absolute;
  width              : 250px;
  margin-top         : 200px;
  margin-left        : 10px;
  border             : 1px solid black;
  padding            : 5px;
  background-color   : #e6fff7;
  opacity            : 0.5;
  z-index            : 47;
}

#hdrNotes {
  position           : absolute;
  width              : 250px;
  margin-top         : 300px;
  margin-left        : 10px;
  border             : 1px solid black;
  padding            : 5px;
  background-color   : #e6fff7;
  opacity            : 0.5;
  z-index            : 47;
}

#hdrHelp {
  width              : 45%;
  margin-top         : 30px;
}