.XXspinner {
    -webkit-animation: spin 24s linear infinite;
    -moz-animation: spin 24s linear infinite;
    animation: spin 24s linear infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;

    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;
    -o-animation-play-state:running; 
    animation-play-state:running;

 }

.XXantispinner {
  -webkit-animation:antispin 24s linear infinite;
  -moz-animation:antispin 24s linear infinite;
  animation:antispin 24s linear infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;

    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;
    -o-animation-play-state:running; 
    animation-play-state:running;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes antispin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes antispin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes antispin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }


/*iframe {
height:50px;
}*/

div {
/*height:700px;*/
width:610px;

}

img {
  left: 0;
  width: 600px;
  vertical-align:middle;
  position: relative;
  z-index: 1;
  margin: auto;
}

.active{
    /*filter: brightness(1.5);
      -webkit-filter: brightness(1.5);
    filter: contrast(1.5);
        -webkit-filter: contrast(1.5);*/
  visibility:hidden;
}

.activel{
  color:black !important;
}


.inactive{
visibility:visible !important;
}
.ml{
visibility:hidden;
}

.paused{
    -webkit-animation-play-state:paused  !important;
    -moz-animation-play-state:paused  !important;
    -o-animation-play-state:paused  !important; 
    animation-play-state:paused  !important;
    /*-webkit-animation: none !important;*/

}

#wheel{
    position:absolute;
    z-index:0;
    /*left: 8px;*/
    /*   transform:scale(1) rotate(16.768rad);*/
  -webkit-filter: drop-shadow(2px 2px 2px #666666);
  filter: drop-shadow(2px 2px 2px #666666);
-webkit-backface-visibility: hidden;
}

#index {
  /*height:320px;*/
  z-index:9999;
}

.index-letter {
top:-8px;
z-index:1000;
position:absolute;
text-align:center;
font-size:40px;
color:white;
font-family: Quicksand;
    font-weight: bolder;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #aaa, 1px 1px 0 #aaa;

}

.index-letter:hover {
 /*color:white;
    text-shadow: -2px -2px 0 #666, 2px -2px 0 #666, -2px 2px 0 #666, 2px 2px 0 #666;*/
}

.thumb {
  width:42.853px;
  height:42.853px;
  max-width:42.853px;
}
.wthumb {
  width:46.153px;
  max-width:46.153px;
}
.cthumb {
  width:300px;
  max-width:300px;
}

#history {
  position:absolute;
  top:0;
  left:605px;
  border:none;
  border-color: white;

}

td#dirlist {
  border: 1px solid black;
}

.index:hover { 
  /*background-color: purple;*/
}

a:visited {
  /*color: purple;*/
}

a {
  color: blue;
  /*text-decoration: none;*/
}

p{
text-align:left;
margin-bottom:10px;
}

#page {

  -webkit-filter: drop-shadow(2px 2px 2px #666666);
  filter: drop-shadow(2px 2px 2px #666666);
  
 }
 
#gridcontainer {
  margin: 0 auto;
 }
 
.hand { cursor: pointer; }
 
#index {
  text-align: center;
  font-size: large;
  max-width: 600px 
}

#image {
  margin:0 auto;
}

#container {
  position:absolute;
  /*top:8px;*/
}

/* relevant styles */
.img__wrap {
  position: relative;
  height: 46.153px;
  width: 46.153px;
 float:left;
 }

.img__description {
 font-size:xx-large;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #000;
  visibility: hidden;
  opacity: 0;
  z-index:1;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}




.containerdiv { float: left; position: relative; width:200px;} 
.cornerimage { position: absolute; top: 0; right: 0; width:200px;height:200px;} 
.innerimage { position: relative top: 0; right: 0; width:200px;height:200px} 

.containerdiv-s { float: left; position: relative; width:42.853px;} 
.cornerimage-s { position: absolute; top: 0; right: 0;width:42.853px;height:42.853px; } 
.innerimage-s { left: 0;width: 42.853px;height:42.853px;}