body {
  color: #777777;
  text-align: center;
  -user-select; none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.inactive {
  opacity: .4;
}
.active {
  opacity: 1;
}
.container {
  display: inline-block;
  width: 90%;
  max-width: 80em;
}
.container > h1 {
  font-size: 4em;
  font-weight: bold;
  color: #777777;
  margin: .6em 0;
}
.container > ul {
  font-weight: bold;
  list-style: none;
  margin: 0 auto 2em;
  padding: 0;
  width: 18em;
}
.container > p {
  margin: 1.5em auto;
  display: block;
  width: 50em;
}
.servicesContainer {
  margin: 3em 0 2em;
}
.servicesContainer > div {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 7em;
}
.servicesContainer span {
  display: none;
  width: 6em;
}
.servicesContainer div:hover > span,
.servicesContainer span:hover{
  background-color: white;
  box-shadow: 0 0 .5em rgba(0,0,0,.5);
  border-radius: .4em;
  display: inherit;
  left: .4em;
  margin: auto;
  opacity: .8;
  padding: .1em;
  position: absolute;
  top: 1.7em;
}
.servicesContainer img {
  margin: 0 .8em;
  width: 5em;
}
.servicesContainer div:hover > .inactive{
  opacity: .65;
}
.statusContainer {
  height: 18.5em;
}
.toolbar > div,
#mapButton{
  border: solid 1px grey;
  border-radius: .4em;
  box-shadow: .1em .1em .1em rgba(0,0,0,.5);
  cursor: pointer;
  display: inline-block;
  margin: .5em;
  padding: .5em;
  padding-left: 3em;
  text-align: right;
  transition: all .1s ease-in;
}
.toolbar > div:hover,
#mapButton:hover{
  background-color: rgba(0,0,0,.1);
}
.toolbar > div:active,
#mapButton:active{
  box-shadow: none;
}
.toolbar.disabled {
  visibility: hidden;
}
#downloadButton {
  background-image: url("img/download.png");
  background-repeat: no-repeat;
  background-position: .5em;
  background-size: 2em;
}
#createFolderButton {
  background-image: url("img/createFolder.png");
  background-repeat: no-repeat;
  background-position: .5em;
  background-size: 1.6em;
  padding-left: 2.5em;
}
#renameButton {
  background-image: url("img/rename.png");
  background-repeat: no-repeat;
  background-position: .5em;
  background-size: 1.5em;
  padding-left: 2.5em
}
#deleteButton {
  background-image: url("img/delete.png");
  background-repeat: no-repeat;
  background-position: .5em;
  background-size: 1.6em;
  padding-left: 2.5em;
}
#uploadButton {
  background-image: url("img/upload.png");
  background-repeat: no-repeat;
  background-position: .5em;
  background-size: 2em;
}
.disabled,
.disabled:hover,
.disabled:active{
  background-color: white !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: .5;
}
.downloadContainer,
.uploadContainer{
  border: solid .15em #666;
  box-shadow: .2em .2em 1em rgba(0, 0, 0, .5);
  border-radius: .5em;
  display: table;
  float: left;
  margin: 0 .8em;
  height: 15em;
  padding: .6em;
  width: 45%;
}
#treeState {
  opacity: 0;
  position: absolute;
  z-index: -10;
}
.gwt-Tree {
  overflow: auto;
  height: 15em;
}
.selectedItem {
  background-color: rgba(0, 100, 255, .3);
  border-radius: .5em
}
.downloadContainer img {
  width: 18px;
}
.downloadContainer .gwt-Label {
  margin-left: .5em;
  margin-top: .15em;
}
.downloadContainer > p,
.uploadContainer > p{
  display: table-cell;
  font-size: 1.2em;
  vertical-align: middle;
}
.uploadContainer {
  vertical-align: middle;
}

#mapButton {
  background: url("img/GoogleMaps.png") no-repeat .5em;
  background-size: 3em;
  margin: 1em;
  padding: 1em 2em;
  padding-left: 4.5em;
}
.map {
  border: solid 2px white;
  border-radius: .5em;
  box-shadow: 0 0 0 .4em #999, .3em .3em 2em rgba(0, 0, 0, .5);
  display: none;
  height: 50em;
}
.imageTittle {
  display: block;
  font-size: 18px;
  font-weight: bold;
  margin: .5em;
}
.largeThumbnail {
  border-radius: .5em;
  box-shadow: 1em .2em 1em rgba(0, 0, 0, .5);
  display: block;
  max-height: 480px;
  max-width: 640px;
}

#mapCanvas.mapVisible {
  height: 30em;
  width: 100%;
}

.navMenu {
   margin-top: 3em;
}