/* Original views/styles.sass from 91852cd, compiled to CSS. Asset paths are
   relative for GitHub Pages. Only nonvisual accessibility/animation helpers follow. */
body { background-color: #EEE; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
#main { width: 850px; margin: 0 auto; text-align: center; color: #662222; font-size: 140%; }
#main #logo { margin-top: 20px; }
#main #explanation { text-align: left; margin-top: 20px; }
#main #explanation .blue { color: #0c2433; }
#main #small { text-align: left; font-size: 60%; margin-top: 10px; color: #0c2433; }
#main #search { margin-top: 20px; font-size: 200%; }
#main #search #startat { margin-top: -8px; }
#main #search #start { margin-top: 40px; }
#main #search #start input { border: 3px solid #0c2433; font-size: 100%; width: 450px; background-color: #DDD; margin-top: -10px; }
#main #results { margin-top: 20px; margin-bottom: 30px; list-style-type: none; }
#main #results li { margin-bottom: 10px; }
#main #results li a { text-decoration: none; color: #662222; }
#main #results li a.end1 { color: #0c2433; font-weight: bold; }
.bottom { font-size: 60%; color: #666; padding: 10px; }
.bottom a { color: #333; }
#bottomright { position: fixed; right: 0; bottom: 0; text-align: right; line-height: 14px; }
#loading { display: none; }
#side { display: none; position: fixed; top: 40%; right: 20px; font-size: 70%; padding-left: 26px; background-image: url('./assets/looparrow.png'); background-repeat: no-repeat; background-position: bottom left; }
#side span { display: block; }
#side .initialLength, #side .loopLength { padding: 11px 0; color: #666; font-weight: bold; background-image: url('./assets/downarrow.png'); background-repeat: no-repeat; background-position: 50% 0; }
#languages { position: absolute; top: 0; right: 0; padding-right: 10px; }
#languages a { color: #666; font-size: 50%; }

[hidden] { display: none !important; }
#loading:not([hidden]), #side:not([hidden]) { display: inline-block; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
#results li { animation: appear 300ms; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }