/* 
  # Dark Theme for Genki Study Resources
  1. FONT COLORS
  2. BACKGROUND COLORS
  3. BORDER COLORS
  4. EXCEPTIONS
*/

/* 1. FONT COLORS */
.spoiler { color:#000; }

input[type="text"]::placeholder, input[type="number"]::placeholder, textarea::placeholder, input.writing-zone-input::placeholder, .fill-quiz .writing-zone-input::placeholder {
  color:#444;
}

.secondary-answer.furigana-only, a.anchor, #exercise-title:after, .quiz-item:before {
  color:#666;
}

.writing-quiz .quiz-item:before, .helper-present #question-list .quiz-item:before {
  color:#888;
}

body, input[type="text"], input[type="number"], textarea, select, input[type="text"]:disabled, input[type="number"]:disabled, textarea:disabled, select:disabled, input.writing-zone-input:disabled, #exercise-list .lesson-title, #exercise-list li a:before, .quiz-multi-answer  {
  color:#AAA;
}

#quiz-progress-text {
  color:#FFF;
}

a, code {
  color:#69A;
}


/* 2. BACKGROUND COLORS */
.kanji-canvas, .spoiler { background-color:#000; }

body, #quick-jisho-window { background-color:#161616; }

code, input[type="text"], input[type="number"], textarea, select, .table td, .quiz-multi-answer, .text-block .sub-section, .show-bg .problem-answer, .show-bg .secondary-answer, input.writing-zone-input, .genki_pseudo_checkbox, .genki_pseudo_radio {
  background-color:#1A1A1A;
}

.quiz-column-title, .verb-quiz .quiz-answer-zone:not(:empty), .quiz-item, #exercise-list, .text-block, #study-tool-ui .item-row.question-row, #result-list, #genki-modal-body, .question-block, .lesson-summary {
  background-color:#222;
}

.writing-quiz .quiz-item:before, .helper-present #question-list .quiz-item:before, .genki_pseudo_radio:before, .sectionNumber3rd, .dark-mode .button.opt-off:focus, .dark-mode .spoiler-mode .vocab-spoiler:after {
  background-color:#333;
}

.button.opt-off:hover {
  background-color:#444;
}

.button.opt-off {
  background-color:#555;
}


/* 3. BORDER COLORS */
code, input[type="text"], input[type="number"], textarea, select, .table td, .quiz-column-title, .verb-quiz .quiz-answer-zone:not(:empty), .verb-quiz.quiz-over [data-mistakes="0"], #quick-search-results, .dict-search-results, .quiz-item, .quiz-answer-zone:empty, #exercise-list, #exercise-list .lesson-title, #exercise-list ul, .quiz-over [data-mistakes="0"] .quiz-item, input.writing-zone-input, .writing-quiz.quiz-over [data-mistakes="0"], .question-block, .quiz-multi-question, .quiz-multi-question .lesson-image img, .quiz-multi-answer, .text-block, .text-block .sub-section, .show-bg .problem-answer, .show-bg .secondary-answer, #result-list, .result-row, #study-tool-ui .item-row.question-row, .genki_pseudo_checkbox, .genki_pseudo_radio, #quick-jisho-window, .lesson-summary, .kanji-canvas, .random-exercise-list {
  border-color:#333;
}

.fill-quiz .writing-zone-input, .vocab-key, .vocab-key > *:last-child, .vocab-key > *:first-child, .vocab-key:before {
  border-color:#444;
}

input[type="text"]::placeholder, input[type="text"]:hover, input[type="number"]:hover, textarea:hover, select:hover, input.writing-zone-input:hover, hr, .sectionNumber3rd {
  border-color:#555;
}

.fill-quiz .writing-zone-input:hover {
  border-color:#666;
}

.section-number, .ul-double:after {
  border-color:#AAA;
}

input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus, input.writing-zone-input:focus, .fill-quiz .writing-zone-input:focus {
  border-color:#F93;
}


/* 4. EXCEPTIONS */
img, .kanji-stroke-order .button, .drawing-quiz .kanji-canvas-actions .button { 
  opacity:0.85;
}

img:hover, a:focus img,
.kanji-stroke-order .button:hover, .kanji-stroke-order .button:focus,
.drawing-quiz .kanji-canvas-actions .button:hover, .drawing-quiz .kanji-canvas-actions .button:focus {
  opacity:1;
}

.taking-a-break #genki-modal-body {
  background-color:rgba(34, 34, 34, 0.7);
}

.show-bg .problem-answer, .show-bg .secondary-answer {
  background-color:rgba(26, 26, 26, 0.5);
  border-color:rgba(51, 51, 51, 0.7);
}

.text-block　.sub-section .sub-section {
  background-color:rgba(255, 255, 255, 0.02);
  border-color:rgba(255, 255, 255, 0.05);
}

/* scrollbar */
::-webkit-scrollbar {
  width:17px;
  height:17px;
}

::-webkit-scrollbar-track { background:#1A1A1A; }
::-webkit-scrollbar-thumb {
  background-color:#333;
  border:2px solid #1A1A1A;
}

/* scrollbar buttons */
::-webkit-scrollbar-button:single-button {
  background:url(../images/general/webkit-arrows.gif) no-repeat 0 0 #333;
  height:17px;
  width:17px;
}

::-webkit-scrollbar-button:single-button:vertical:increment { background-position:-17px 0 }
::-webkit-scrollbar-button:single-button:horizontal:decrement { background-position:-34px 0 }
::-webkit-scrollbar-button:single-button:horizontal:increment { background-position:-51px 0 }

/* hover / active scrollbar colors */
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-button:hover { background-color:#444; }
::-webkit-scrollbar-thumb:active, ::-webkit-scrollbar-button:active { background-color:#555; }