.hint, [data-hint] {  
  position: relative;  
  display: inline-block;
}

.hint:before, .hint:after, [data-hint]:before, [data-hint]:after {  
  position: absolute;  
  transform: translate3d(0px, 0px, 0px);  
  visibility: hidden;  -webkit-opacity: 0;
  opacity: 0;  
  z-index: 1000000;  
  pointer-events: none;  -o-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {  
  visibility: visible;  -webkit-opacity: 1;
  opacity: 1;
}

.hint:before, [data-hint]:before {  
  content: "";  
  position: absolute;  
  background-color: transparent;  
  background-image: none;  
  background-repeat: repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;  
  border-top-width: 6px;  
  border-right-width: 6px;  
  border-bottom-width: 6px;  
  border-left-width: 6px;  
  border-top-style: solid;  
  border-right-style: solid;  
  border-bottom-style: solid;  
  border-left-style: solid;  
  border-top-color: transparent;  
  border-right-color: transparent;  
  border-bottom-color: transparent;  
  border-left-color: transparent;  
  z-index: 1000001;
}

.hint:after, [data-hint]:after {  
  content: attr(data-hint);  
  background-color: black;  
  background-image: none;  
  background-repeat: repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;  
  color: white;  text-shadow: 0px -1px 0px black;  
  padding-top: 8px;  
  padding-right: 10px;  
  padding-bottom: 8px;  
  padding-left: 10px;  
  font-size: 12px;  
  line-height: 12px;  
  white-space: nowrap;  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

.hint--top:before {  
  border-top-color: black;
}

.hint--top:before {  
  margin-bottom: -12px;
}

.hint--top:after {  
  margin-left: -18px;
}

.hint--top:before, .hint--top:after {  
  bottom: 100%;  
  left: 50%;
}

.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {  
  transform: translateY(-8px);
}

.hint--bounce:before, .hint--bounce:after {
}

#imagecontainer {  
  margin-left: auto;  
  margin-right: auto;  
  width: auto;  
  height: auto;
}

#imagecontainer img {  
  max-width: 100%;  
  height: auto;  
  margin-bottom: 10px;
}

#thumbscontainer {  
  padding-top: 0px;  
  padding-right: 0px;  
  padding-bottom: 0px;  
  padding-left: 0px;
}

#myimage {  
  max-width: 500px;  
  max-height: 500px;
}

#thumbscontainer img {  
  border-top-width: 0px;  
  border-top-style: none;  
  border-top-color: white;  
  border-right-width: 0px;  
  border-right-style: none;  
  border-right-color: white;  
  border-bottom-width: 0px;  
  border-bottom-style: none;  
  border-bottom-color: white;  
  border-left-width: 0px;  
  border-left-style: none;  
  border-left-color: white;  
  max-width: 80px;  
  max-height: 80px;
}

#thumbscontainer a {  
  display: block;  
  float: left;  
  max-width: 80px;  
  max-height: 80px;  
  margin-top: 0px;  
  margin-right: 10px;  
  margin-bottom: 0px;  
  margin-left: 0px;  
  text-decoration: none;  
  border-top-color: white;  
  border-right-color: white;  
  border-bottom-color: white;  
  border-left-color: white;  
  border-top-width: 1px;  
  border-right-width: 1px;  
  border-bottom-width: 1px;  
  border-left-width: 1px;  
  border-top-style: solid;  
  border-right-style: solid;  
  border-bottom-style: solid;  
  border-left-style: solid;  
}

#thumbscontainer a:hover {  -webkit-opacity: 0.7;
  opacity: 0.7;  
  border-top-color: #663366;  
  border-right-color: #663366;  
  border-bottom-color: #663366;  
  border-left-color: #663366;  
  border-top-width: 1px;  
  border-right-width: 1px;  
  border-bottom-width: 1px;  
  border-left-width: 1px;  
  border-top-style: solid;  
  border-right-style: solid;  
  border-bottom-style: solid;  
  border-left-style: solid;
}

#thumbscontainer a:active, #thumbscontainer a:focus {  -webkit-opacity: 0.7;
  opacity: 0.7;
  border-top-color: #e6a223;  
  border-right-color: #e6a223;  
  border-bottom-color: #e6a223;  
  border-left-color: #e6a223;
}

#th-cen {  
  margin-left: auto;  
  margin-right: auto;  
  text-align: center;  
  display: table;  
  height: auto;
}

@media handheld, only screen and (max-width: 780px) {
  #thumbscontainer img { max-width: 50px; max-height: 50px; }
  #thumbscontainer a { max-width: 50px; max-height: 50px; }
}