img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body {font-family: Quicksand, sans-serif;font-size: 12pt;background: #8c3310;} h1, h2 {display: inline-block;vertical-align: middle;width: 50%;text-align: center;margin: 0;} h1 {font-family: Original Surfer, serif;color: #f8b500;text-shadow: #000 0 0 0.1em;} #mainTitle {font-size: 400%;width: 100%;display: block;} h2 {font-family: Original Surfer, serif;color: #f1e767;margin-right: 5%;width: 45%;} .dice {font-size: 200%;border: 0.1em solid #222;border-radius: 0.25em;text-align: center;width: 1.5em;height: 1.25em;padding: 0.25em 0 0 0;display: inline-block;color: #555;background: #ffe;background-size: cover;vertical-align: middle;margin: 0.1em;font-weight: bold;} .fox{background-image: url(fox1.svg);}.fox.blink{background-image: url(fox2.svg);}.elephant{background-image: url(elephant1.svg);}.elephant.blink{background-image: url(elephant2.svg);}.owl{background-image: url(owl1.svg);}.owl.blink{background-image: url(owl2.svg);}.panda{background-image: url(panda1.svg);}.panda.blink{background-image: url(panda2.svg);}.lion{background-image: url(lion1.svg);}.lion.blink{background-image: url(lion2.svg);}.goat{background-image: url(goat1.svg);}.goat.blink{background-image: url(goat2.svg);}.sittingPanda{background-image: url(sitting-panda1.svg);}.sittingPanda.blink{background-image: url(sitting-panda2.svg);}.fox,.owl,.goat,.panda,.elephant,.lion{color: rgba(0,0,0,0);} .dice.rolling {transform: rotate(360deg);-webkit-transform: rotate(360deg);transition: 1s ease-in-out;-webkit-transition: 1s ease-in-out;background-size: cover;} .held {border-color: #ffd;} .hold {display: none;color: #ff0;font-weight: bold;} .active td {text-align: center;min-height: 2em;} .scoring .dice {font-size: 100%;} .roll, .keep, .back {border: 0.25em solid #090;border: 0;border-radius: 0.5em;font-family: Quicksand, sans-serif;color: #ff0;background: #090;padding: 0.25em;margin: 0.5em 0 0.5em 0;outline: none;} .roll strong, .keep strong, .back strong {border-radius: 0.25em;font-variant: small-caps; font-family: Original Surfer, serif;font-weight: normal;font-size: 150%;background: #0a0;display: block;width: 100%;margin: 0 0 0.1em 0;} .roll.noleft, .keep.nogo {background: #600} .roll.noleft strong, .keep.nogo strong {background: #700;} table {border-collapse: collapse;} .scoring, #highscores {margin: 0.25em 0 0.25em 0;} .scoring tr, #highscores tr {background: #f8b500;border: 0.25em solid #fceabb;} .scoring tr.score, #highscores tr.me {background: #9dd53a;} tr.scored {background: #ff7400;} .active, .scoring, .roll, .keep, .back {width: 100%;} .total {text-align: center;font-weight: bold;} .grand {font-size: larger;} .iosroundingbug {background: #f8b500;} h3 {color: #f1e767;} #credits h3 + p {margin-top: -1em;} #credits p {background: #f8b500;border-radius: 0.5em;padding: 0.5em;} .glyph {width: 10%;margin: 1em 0 0.25em 45%;} #sound {position: absolute;right: 0.5em;width: 5%;} #gameover, #awardAchievement {text-align: center;width: 90%;background: #600;position: absolute;top: 20%;left: 0;color: #ff0;box-shadow: #000 0 0 16px;display: none;padding: 1em 5% 1em 5%;} #gameover p, #awardAchievement p {font-size: 200%;} #highscores {width: 100%;display: none;} .deco {margin: 2em auto 1em auto;width: 6em;height: 9em;background-size: 100%;background-repeat: no-repeat;} .deets {text-align: center;}.deets a {color: #ff0;} * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} #achievements dt, #achievements dd {background: #f8b500;padding: 0.5em;margin: 0;} #achievements dt {border-radius: 0.5em 0.5em 0 0;padding-bottom: 0;font-family: Original Surfer, serif;font-size: larger;margin-top: 1em;} #achievements dd {border-radius: 0 0 0.5em 0.5em;padding-top: 0;margin-bottom: 0.5em;} #achievements .done, #achievements .done + dd {background: #9dd53a;}