/* Chris de Burgh daily quiz - compact version */

#quiz {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    background: #f4f4f4;
    color: #111;
    font-family: inherit;
}

#quiz *, #quiz *:before, #quiz *:after { box-sizing: border-box; }
#quiz h1, #quiz h2, #quiz h3, #quiz p { margin-top: 0; }
#quiz h2 { color: #a050c0; background: none; font-size: 18px; }
#quiz button, #quiz input { font: inherit; }

#quiz .quiz-header { text-align: center; margin: 0px 0 28px; }
#quiz .quiz-header h1 { margin: 0 0 22px; font-size: 27px; line-height: 1.15; }
#quiz .quiz-header p { margin: 0; font-size: 19px; }

#quiz .quiz-button {
    display: inline-block;
    min-height: 40px;
    padding: 9px 24px;
    border: 0;
    border-radius: 8px;
    background: #bbb;
    color: #111;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
}
#quiz .quiz-button:hover { background: #666; color: #fff; }
#quiz .quiz-button-small { min-height: 34px; padding: 6px 12px; font-size: 15px; }
#quiz .quiz-button-secondary { margin-top: 18px; }

#quiz .quiz-loading, #quiz .quiz-error { padding: 55px 5px; text-align: center; }
#quiz .quiz-error p { font-weight: normal; }

#quiz .quiz-player { margin: 0 0 18px; text-align: left; }
#quiz .quiz-player label { display: block; margin-bottom: 5px; font-size: 15px; font-weight: bold; }
#quiz .quiz-player label span { display: block; font-size: 13px; font-weight: normal; color: #666; }
#quiz .quiz-player-row {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
#quiz .quiz-player-row input { display: table-cell; vertical-align: middle; }
#quiz .quiz-player-row .quiz-button { display: table-cell; vertical-align: middle; margin-left: 5px; }
#quiz .quiz-player input, #quiz .quiz-result-name input {
    width: calc(100% - 75px);
    min-width: 0;
    height: 36px;
    padding: 6px 8px;
    border: 1px solid #888;
    border-radius: 0;
    background: #fff;
}

#quiz .quiz-featured { text-align: center; padding: 12px 0 26px; }
#quiz .quiz-featured-label { display: none; }
#quiz .quiz-round-number { margin-bottom: 6px; font-size: 14px; color: #777; }
#quiz .quiz-featured h2 { margin: 0 0 7px; font-size: 21px; line-height: 1.25; }
#quiz .quiz-featured-meta { margin-bottom: 20px; font-size: 14px; color: #666; }
#quiz .quiz-taken { margin-top: 24px; font-size: 13px; }
#quiz .quiz-completed-score { margin: 14px 0; font-size: 17px; }

#quiz .quiz-rounds, #quiz .quiz-overall { margin-top: 22px; }
#quiz .quiz-rounds > h2, #quiz .quiz-overall > h2 {
    margin-bottom: 8px;
    font-size: 19px;
    text-align: center;
}
#quiz .quiz-round-list { border-top: 1px solid #ccc; }
#quiz .quiz-round {
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}
#quiz .quiz-round-main { display: table-cell; vertical-align: middle; min-width: 0; padding-right: 8px; }
#quiz .quiz-round-date, #quiz .quiz-round-top { font-size: 12px; color: #777; }
#quiz .quiz-round h3 { margin: 2px 0; font-size: 15px; line-height: 1.2; }
#quiz .quiz-round-action { display: table-cell; width: 78px; vertical-align: middle; text-align: right; }
#quiz .quiz-score-badge {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 10px;
    background: #4cd261;
    font-size: 14px;
    font-weight: bold;
}
#quiz .quiz-link {
    display: block;
    margin: 3px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: underline;
    font-size: 13px;
    cursor: pointer;
}

#quiz .quiz-play { min-height: 500px; padding-top: 22px; }
#quiz .quiz-progress {
    display: block;
    margin: 0 0 18px;
    text-align: center;
    white-space: nowrap;
}
#quiz .quiz-progress-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 2px;
    vertical-align: middle;
    border-radius: 50%;
    background: #ccc;
}
#quiz .quiz-progress-dot.current { box-shadow: 0 0 0 2px #999; }
#quiz .quiz-progress-dot.right {
    background: #4cd261 url(/img/quiz-right.png) no-repeat top left;
    background-size: 100%;
}
#quiz .quiz-progress-dot.wrong {
    background: #f73830 url(/img/quiz-wrong.png) no-repeat top left;
    background-size: 100%;
}

#quiz .quiz-question {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: bold;
}

#quiz .quiz-answers { display: block; }
#quiz .quiz-answer {
    display: block;
    width: 100%;
    min-height: 42px;
    margin: 0 0 10px;
    padding: 8px 11px;
    border: 1px solid #333;
    border-radius: 0;
    background: transparent;
    color: #111;
    text-align: left;
    font-size: 18px;
    line-height: 1.25;
    font-weight: bold;
    cursor: pointer;
}
#quiz .quiz-answer:not(:disabled):hover { background: #bbb; }
#quiz .quiz-answer:disabled { opacity: 1; cursor: default; }
#quiz .quiz-answer-letter { margin-right: .5em; color: #000; }
#quiz .quiz-answer.right, #quiz .quiz-answer.correct {
    background: #4cd261;
    border-color: #4cd261;
}
#quiz .quiz-answer.wrong {
    background: #f73830;
    border-color: #f73830;
}
#quiz .quiz-next-wrap { min-height: 55px; padding-top: 8px; text-align: center; }

#quiz .quiz-result { text-align: center; padding: 5px 0; }
#quiz .quiz-result-title { font-size: 15px; font-weight: bold; }
#quiz .quiz-result h2 { margin-bottom: 12px; font-size: 21px; }
#quiz .quiz-result-score strong {
    display: block;
    color: #4cd261;
    font-size: 44px;
    line-height: 60px;
}
#quiz .quiz-result-score span, #quiz .quiz-result-percent { font-size: 16px; }
#quiz .quiz-result-name { margin: 22px 0; }
#quiz .quiz-result-name p { font-size: 15px; font-weight: normal; }
#quiz .quiz-result-name .quiz-button { width: 100%; margin-top: 6px; }

#quiz .quiz-leaderboard { margin-top: 22px; text-align: left; }
#quiz .quiz-leaderboard h3 { margin-bottom: 8px; text-align: center; font-size: 18px; }
#quiz .quiz-table {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #ccc;
    border-collapse: collapse;
}
#quiz .quiz-table-row, #quiz .quiz-table-heading {
    display: table-row;
    font-size: 14px;
}
#quiz .quiz-table-row > span,
#quiz .quiz-table-row > strong,
#quiz .quiz-table-heading > span,
#quiz .quiz-table-heading > strong {
    display: table-cell;
    height: 34px;
    padding: 5px 3px;
    vertical-align: middle;
    border-bottom: 1px solid #ccc;
}
#quiz .quiz-table-heading { font-weight: bold; }
#quiz .quiz-position,
#quiz .quiz-table-heading > span:first-child { width: 25px; }
#quiz .quiz-table-score { width: 62px; text-align: right; }
#quiz .quiz-table-rounds { width: 48px; text-align: right; }
#quiz .quiz-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#quiz .quiz-position { color: #777; }
#quiz .quiz-leaderboard-page > h1 { font-size: 22px; text-align: center; }
#quiz .quiz-back {
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

@media (max-width: 360px) {
    #quiz { max-width: none; padding: 15px; }
    #quiz .quiz-header { margin-top: 24px; }
    #quiz .quiz-progress-dot { margin-left: 1px; margin-right: 1px; }
    #quiz .quiz-progress-dot { width: 18px; height: 18px; }
    #quiz .quiz-question { font-size: 19px; }
    #quiz .quiz-answer { font-size: 17px; }
}