body {
  background-color: grey;
  font-family:sans-serif;
  opacity: 1;
  padding: 0px;
  margin: 2px;
}

#PhotoContainer {
  background-color: rgb(200,200,200);
}

#layoutTable {
  table-layout:fixed;
  border-collapse: collapse;
  border: none;
  margin: 0px;
  padding: 0px;
}

#layoutTable td {
  margin:0px;
  padding:0px;
}

#tdTop {
  width:100%;
  background-color:lightgrey;
}

#tdLeft {
  vertical-align:top;
} 

#tdMid {
}

#folderInfo {
  position:relative;
  color: black;
  font-weight:normal;
  text-align:left;
  font-size:12pt;
  overflow-y:scroll;
  background-color:white;
  padding:8px;
  border-radius:4px 4px 4px;
}

#containerMid {
  position:relative;
}

#tdRight {
  vertical-align:top;
}

#containerMid {
  position:relative;
}

#bigImage {
  position:absolute;
  border-radius:10px;
  box-shadow: 10px 10px 20px rgb(20,20,20);
}

#containerRight {
  overflow-y:scroll;
}

#containerLeft {
  overflow-y:scroll;
}

div.folder {
  font-size:9pt;
  color: white;

  padding:10px;

  background-color:#1090F0;

  margin-bottom:10px;

  border: 2px solid white;
  border-radius: 10px;
 
  cursor:pointer;
  text-shadow: none;
  box-shadow: 3px 3px 6px rgb(20,20,20);
}
#folderInfo {
  padding:0px;
  margin:0px;
}
#containerRight div.thumbnail {
  width:136px;
  height:136px;
  background-color:white;
  border-radius:10px;
  padding:5px;
  text-align:center;
  margin-bottom:10px;
  position:relative;
  box-shadow:4px 4px 4px rgba(240,240,240,0.3);
}

#containerRight img.thumbnail {
  max-height:128px;
  max-width:128px;
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
  border:3px inset black;
  border-radius:10px;
  box-shadow:4px 4px 4px rgba(40,40,40,0.7);
}

.folder.currentItem{
  background-color:white;
  color:black;
  border-color: rgb(90,90,90);
}

/* ----------------- ARROWS --------------------*/

#arrowLeft, #arrowRight {
  position:absolute;
  opacity:0.1;
  z-index:1000;
}