wanikani-purple-online by yalongwastaken

/* ==UserStyle==
@name         wanikani-purple-online
@version      20231220.18.20
@namespace    ?
==/UserStyle== */

@-moz-document url-prefix("https://sethclydesdale.github.io/genki-study-resources/lessons-3rd/") {
@font-face {
  font-family:FontAwesomeWeb;
  src:url(../fonts/fontawesome-webfont.eot?v=4.7.0);
  src:url(../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'),
  url(../fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2'),
  url(../fonts/fontawesome-webfont.woff?v=4.7.0) format('woff'),
  url(../fonts/fontawesome-webfont.ttf?v=4.7.0) format('truetype'),
  url(../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format('svg');
  font-weight:400;
  font-style:normal
}
.fa {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesomeWeb,FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform:rotate(0);
    transform:rotate(0)
  }
  100% {
    -webkit-transform:rotate(359deg);
    transform:rotate(359deg)
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform:rotate(0);
    transform:rotate(0)
  }
  100% {
    -webkit-transform:rotate(359deg);
    transform:rotate(359deg)
  }
}
::selection {
  color:#fff;
  background-color:#96f
}
::-moz-selection {
  color:#fff;
  background-color:#96f
}
body {
  color:#333;
  background:#fff;
  font-size:14px;
  font-family:'メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,sans-serif;
  padding:0;
  margin:0;
  display:flex;
  min-height:100vh;
  flex-direction:column
}
p {
  font-size:14px
}
ul {
  padding-left:40px
}
hr {
  border:none;
  border-bottom:1px solid #999
}
a {
  color:#039;
  text-decoration:none;
  outline:0
}
a:focus,
a:hover {
  text-decoration:underline
}
img {
  max-width:100%
}
a:focus img {
  outline:1px solid #96f
}
code {
  color:#00f;
  background:#eee;
  border:1px solid #ccc;
  padding:3px
}
.button,
a.button {
  color:#fff;
  background:#96f;
  font-size:14px;
  font-family:'メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,sans-serif;
  text-decoration:none;
  border:none;
  font-weight:700;
  display:inline-block;
  padding:6px 12px;
  margin:3px;
  cursor:pointer;
  outline:0;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.button:hover,
a.button:hover {
  background:#82e
}
.button:focus,
a.button:focus {
  background:#74d
}
.button .fa {
  font-size:18px;
  vertical-align:middle;
  margin-right:6px
}
.button.icon-only {
  height:25px;
  width:25px;
  padding:0;
  margin:3px
}
.button.icon-only i {
  margin:0
}
.button.play-button {
  height:25px;
  width:25px;
  padding:0;
  margin:0;
  border-radius:100%
}
.button.play-button i {
  font-size:14px;
  margin-right:-2px
}
input[type=number],
input[type=text],
select,
textarea {
  font-size:14px;
  font-family:'メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,sans-serif;
  background:#fff;
  border:1px solid #ccc;
  padding:6px;
  outline:0
}
select {
  cursor:pointer
}
input[type=number]:disabled,
input[type=text]:disabled,
select:disabled,
textarea:disabled {
  color:#333
}
input[type=number]::placeholder,
input[type=text]::placeholder,
textarea::placeholder {
  color:#bbb
}
input[type=number]:hover,
input[type=text]:hover,
select:hover,
textarea:hover {
  border-color:#999
}
input[type=number]:focus,
input[type=text]:focus,
select:focus,
textarea:focus {
  border-color:#96f
}
.center {
  text-align:center
}
.right {
  text-align:right
}
.left {
  text-align:left
}
.ul {
  text-decoration:underline
}
.ul-double {
  text-decoration:underline;
  position:relative
}
.ul-double:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  border-bottom:1px solid #333
}
.inline {
  display:inline-block
}
.t-valign-top {
  vertical-align:top
}
.t-red {
  color:red
}
.t-green {
  color:#080
}
.t-blue {
  color:#09f
}
.t-orange {
  color:#96f
}
.t-bold {
  font-weight:700
}
.nomargin {
  margin:0!important
}
.clearfix {
  clear:both
}
.clear:after {
  content:"";
  display:table;
  clear:both
}
.vertical-text {
  -ms-writing-mode:tb-rl;
  -webkit-writing-mode:vertical-rl;
  writing-mode:vertical-rl;
  text-align:left!important;
  max-height:300px
}
.spoiler {
  color:#444;
  background:#444;
  display:inline-block;
  padding:0 3px
}
.spoiler:hover {
  color:#fff
}
.problem-hint .spoiler {
  margin-top:2px
}
.table {
  width:100%;
  border-collapse:collapse
}
.table td {
  background:#fff;
  border:1px solid #ddd;
  padding:3px
}
.example-row td {
  vertical-align:top
}
.example-row div {
  margin:10px 0
}
.define {
  font-size:11px;
  font-style:normal;
  font-weight:700;
  vertical-align:super
}
.lesson-num {
  font-size:12px;
  font-style:normal;
  vertical-align:top
}
.lesson-image img {
  max-width:100%
}
header {
  color:#fff;
  background:url(../images/genki.png) no-repeat 10px 50% #96f;
  padding:15px 15px 15px 140px;
  position:relative;
  overflow:hidden
}
#home-link:before {
  content:"";
  position:absolute;
  height:100px;
  width:110px;
  left:14px;
  top:50%;
  margin-top:-50px
}
.edition-icon:after {
  font-size:14px;
  position:absolute;
  margin-top:40px;
  margin-left:-85px
}
.edition-icon.second-ed:after {
  content:"\A 2nd Edition"
}
.edition-icon.third-ed:after {
  content:"\A 3rd Edition"
}
header h1 {
  font-size:32px
}
header h1 a {
  color:#fff
}
h2 {
  margin:30px 0 0 0
}
a#fork-me {
  color:#fff;
  background:#333;
  font-size:16px;
  font-weight:700;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
  line-height:30px;
  height:30px;
  width:200px;
  transform:rotate(45deg);
  position:absolute;
  right:-55px;
  top:30px;
  transition-property:color,background;
  transition-duration:.3s
}
a#fork-me:focus,
a#fork-me:hover {
  color:#333;
  background:#fff
}
#announcement {
  color:#fff;
  background:#96f;
  border:1px solid #60c;
  border-right:none;
  border-left:none;
  height:110px
}
#announce-inner {
  max-width:1000px;
  margin:0 auto;
  padding:0 30px
}
#announcement .fa {
  font-size:24px;
  vertical-align:middle
}
#announcement a {
  color:#ff0;
  font-weight:700
}
#announcement h3 {
  margin:10px 0 0 0
}
#announcement .announcement {
  font-size:14px;
  height:75px;
  box-sizing:border-box;
  padding:3px 6px;
  overflow-y:auto
}
#announcement .announcement.announce-hidden {
  display:none
}
#announcement .announcement .date {
  color:#fff;
  font-size:11px;
  font-weight:400;
  background:#82e;
  border:1px solid #74d;
  border-radius:3px;
  padding:1px;
  margin-right:3px
}
#announce-list {
  position:relative;
  margin:0 20px
}
#announcement .announce-controls {
  background:rgba(0,0,0,.3);
  text-align:center;
  position:absolute;
  top:50%;
  margin:-15px 0 0 0;
  height:30px;
  width:20px;
  padding:0;
  opacity:.5
}
#announcement .announce-controls i.fa {
  font-size:18px;
  line-height:26px;
  margin:0
}
#announcement .announce-controls:focus,
#announcement .announce-controls:hover {
  opacity:1
}
#announcement .announce-controls.button-left {
  left:-20px
}
#announcement .announce-controls.button-right {
  right:-20px
}
#content {
  flex:1 0 auto
}
.content-block {
  max-width:1000px;
  margin:0 auto;
  padding:30px
}
a.anchor {
  color:#666;
  font-size:16px;
  font-weight:400;
  text-decoration:none;
  text-align:center;
  vertical-align:middle;
  display:inline-block;
  width:25px;
  margin:0 0 0 -25px
}
.anchor-icon {
  display:inline-block;
  transform:rotate(-45deg);
  visibility:hidden
}
.anchor:focus .anchor-icon,
h1:hover .anchor-icon,
h2:hover .anchor-icon,
h3:hover .anchor-icon,
h4:hover .anchor-icon,
h5:hover .anchor-icon,
h6:hover .anchor-icon {
  visibility:visible
}
#page-links {
  margin:15px 0 0 0
}
#link-list {
  font-size:0
}
#link-list span {
  font-size:14px
}
#link-list a {
  color:#fff;
  text-shadow:1px 1px 0 rgba(0,0,0,.3);
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  padding:3px 6px;
  margin:10px 10px 0 0
}
#link-edition {
  background-color:#96f;
  border-bottom:2px solid #74d
}
#link-anki {
  background-color:#05c;
  border-bottom:2px solid #03a
}
#link-help {
  background-color:#39c;
  border-bottom:2px solid #17a
}
#link-report {
  background-color:#f66;
  border-bottom:2px solid #d44
}
#link-download {
  background-color:#9c6;
  border-bottom:2px solid #7a4
}
#link-donate {
  background-color:#c6c;
  border-bottom:2px solid #a4a
}
#link-github {
  background-color:#96f;
  border-bottom:2px solid #74d
}
#link-settings {
  background-color:#666;
  border-bottom:2px solid #444
}
#link-edition:hover {
  background-color:#82e
}
#link-anki:hover {
  background-color:#04b
}
#link-help:hover {
  background-color:#28b
}
#link-report:hover {
  background-color:#e55
}
#link-download:hover {
  background-color:#8b5
}
#link-donate:hover {
  background-color:#b5b
}
#link-github:hover {
  background-color:#85e
}
#link-settings:hover {
  background-color:#555
}
#link-edition:active,
#link-edition:focus {
  background-color:#74d
}
#link-anki:active,
#link-anki:focus {
  background-color:#03a
}
#link-help:active,
#link-help:focus {
  background-color:#17a
}
#link-report:active,
#link-report:focus {
  background-color:#d44
}
#link-download:active,
#link-download:focus {
  background-color:#7a4
}
#link-donate:active,
#link-donate:focus {
  background-color:#a4a
}
#link-github:active,
#link-github:focus {
  background-color:#74d
}
#link-settings:active,
#link-settings:focus {
  background-color:#444
}
#link-list i {
  font-size:16px;
  vertical-align:middle;
  margin-right:6px
}
#link-github i,
#link-help i {
  font-size:18px
}
#quick-actions>div {
  margin:0
}
#quick-actions h2 {
  font-size:20px;
  margin-top:15px
}
#quick-search {
  width:100%;
  box-sizing:bor...