@font-face {
    font-family: gallaudet;
    src: url(../font/GALLAUDET.ttf);
}

.ASL {
    font-family: gallaudet, Monospace;
}

#detail .ASL {
    font-size: 20em;
    line-height: .75em;
}

ul.detail-nav, .detail-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.detail-nav li:first-child a {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.detail-nav li:last-child a {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.detail-nav a {
    display: block;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-top: 0px;
}

.detail-nav li:first-child a {
    border-top: 1px solid #ddd;
}

.active {
    font-weight: bold;
    background-color: rgba( 0, 0, 255, .5);
    border: 1px dotted rgba( 0, 0, 255, .75);

}
.detail-nav a { color: #000000;}
.active.correct {
    font-weight: bold;
    background-color: rgba( 0, 128, 0, .5);
    border: 1px dotted rgba( 0, 128, 0, .75);
    ;
}

.active.wrong, img.active {
    background-color: rgba( 255, 0, 0, .5);
    border: 1px dotted rgba( 255, 0, 0, .75);
    ;
}

button img {
    min-height: 100px;
}

.detail-nav a[title='10'] span {display:inline-block; width:1px; height: 1px; overflow: hidden;}
.detail-nav a[title='10']:before {content: attr(title);}

.shake:hover {
    display: inline-block;
animation: shake 0.5s;
  animation-iteration-count: 1;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}