/*
 * Ported from old/_idomybiu-testas/media/styles/style.css -- the
 * standalone quiz app's own stylesheet, safe to reuse near-verbatim
 * since every real rule in it is already `.dv-*`-prefixed (no
 * collision risk with the rest of the theme). Two real changes from
 * the source file:
 *
 * 1. Every selector scoped under `.trivia-page` (added here, not in
 *    the legacy markup) -- the legacy app used to run isolated inside
 *    its own <iframe>, so its own generic element resets (a, h1-h6,
 *    form, input, body, #site, ...) never had anything else on the
 *    page to clash with. Ported natively into the same theme now (per
 *    user: "it uses same template as main page, so you dont need to
 *    add different site for it"), those bare resets would otherwise
 *    silently override the rest of the theme's own h1/a/form/input
 *    styling site-wide -- dropped or scoped instead, kept only where
 *    the quiz's own look actually depends on them.
 * 2. `url(../images/...)` paths still resolve the same way (this
 *    file's own asset/css/ -> sibling asset/images/), just pointing at
 *    this module's own copy of the handful of icons the quiz actually
 *    uses, not the legacy app's.
 *
 * Left out entirely (present in the source file, not used by
 * welcome.phtml/klausimai.phtml at all): the `dv-images`/`dv-item`
 * gallery-grid rules, `.zoom`'s background-image icon (this port's
 * own "view full size" link is plain text, not a floating icon
 * button -- see klausimai.phtml's own doc comment), and the leftover
 * `.test`/`.box-edit-info`/`.expo-title`/`.expo-more` rules (unrelated
 * boilerplate, confirmed not referenced by either real template).
 */

.trivia-page h1 { text-transform: uppercase; font-size: 21px; border-bottom: 1px solid #c4c3c0; margin: 0; padding: 6px 0; }
.trivia-page h3 { margin: 12px 0; font-weight: bold; }
.trivia-page .green { color: #479f00; }
.trivia-page .red { color: #b01500; }

.trivia-page .dv-button-big, .trivia-page .dv-slider-items a {
    display: inline-block; color: #ac5525; font-size: 21px; font-weight: bold;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border: 1px solid #dbdad8;
    line-height: 49px; padding: 0 20px; border-radius: 8px;
    background: #f7f7f5;
    background: linear-gradient(to bottom, #feffff 0%, #efeeea 100%);
}
.trivia-page .dv-button-big span { display: inline-block; padding-right: 26px; background: url(../images/arrow-right.png) no-repeat right 17px; }
.trivia-page .dv-button {
    border: none; cursor: pointer; display: inline-block; text-transform: uppercase; color: #fff;
    background: #a94e1f; font-size: 18px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    line-height: 30px; padding: 0 14px; border-radius: 4px;
}
.trivia-page .dv-button[disabled] { opacity: .5; cursor: default; }
.trivia-page .dv-button span { display: inline-block; padding-right: 16px; background: url(../images/right-arrows.png) no-repeat right center; }

.trivia-page .dv-content { padding: 1px 10px; border-top: 1px solid #f9f8f6; }
.trivia-page .dv-simple-content p.big { font-size: 14px; font-weight: bold; }

.trivia-page .dv-question-numbers { position: relative; padding: 15px 0; margin-top: 10px; }
.trivia-page .dv-viewport { width: 560px; max-width: 100%; margin: 0 auto; overflow: hidden; height: 60px; position: relative; }
.trivia-page .dv-slider-items { position: relative; left: 0; top: 0; transition: left .3s; }
.trivia-page .dv-slider-items a { height: 50px; padding: 0; width: 50px; text-align: center; float: left; margin-right: 8px; position: relative; font-size: 24px; }
.trivia-page .dv-slider-items a.dv-active { font-size: 36px; color: #fff; background: #d1c5b2; box-shadow: inset 2px 2px 3px #9b907d; }
.trivia-page .dv-slider-items a .dv-nip { position: absolute; left: 50%; margin-left: -5px; bottom: -7px; background: url(../images/nip-down.png) no-repeat center center; width: 10px; height: 10px; display: none; }
.trivia-page .dv-active .dv-nip { display: inline-block; }
.trivia-page .dv-slider-items a.correct, .trivia-page .dv-slider-items a.incorrect { line-height: 46px; height: 46px; width: 46px; border: 3px solid #d80000; }
.trivia-page .dv-slider-items a.correct { border-color: #67b600; }
.trivia-page .dv-cover-left, .trivia-page .dv-cover-right { display: inline-block; position: absolute; background: url(../images/shadow-left.png) no-repeat left top; width: 11px; height: 93px; z-index: 2; }
.trivia-page .dv-cover-left { left: 35px; top: -4px; }
.trivia-page .dv-cover-right { background-image: url(../images/shadow-right.png); right: 35px; top: -4px; }
.trivia-page .dv-control { display: inline-block; width: 35px; height: 50px; background: url(../images/prev.png) no-repeat left center; position: absolute; top: 20px; left: 0; cursor: pointer; }
.trivia-page .dv-next { right: 0; left: auto; background: url(../images/next.png) no-repeat right center; }

.trivia-page .dv-question { padding: 8px; float: left; width: 200px; box-sizing: border-box; position: relative; }
.trivia-page .dv-image-holder { background-color: #ccc; position: relative; width: 200px; height: 172px; border-radius: 4px; box-shadow: inset 2px 2px 3px #d4d3cf; cursor: pointer; }
.trivia-page .dv-question p { font-size: 12px; }
.trivia-page .dv-image-holder span { display: inline-block; position: absolute; right: 1px; top: 1px; padding: 4px; padding-top: 1px; background: #fff; opacity: .8; border-radius: 0 4px 0 4px; }
.trivia-page .dv-image-holder input { margin: 0; padding: 0; }
.trivia-page .dv-image-holder.dv-question-active { background: #e0dbcf; border-radius: 8px; box-shadow: inset 2px 2px 4px #b9b5ab; }
.trivia-page .dv-image-holder table { width: 100%; height: 100%; border-collapse: collapse; border: none; }
.trivia-page .dv-image-holder table tbody td { text-align: center; vertical-align: middle; border: none; }
.trivia-page .dv-image-holder img { max-width: 199px; width: 199px; max-height: 172px; height: 172px; }
.trivia-page .zoom-link { display: block; margin-top: 4px; font-size: 11px; text-align: center; }

.trivia-page .dv-line { margin-bottom: 15px; }

.trivia-page .dv-bottom-controls { padding-top: 20px; background: url(../images/line-rep.png) repeat-x left top; padding-bottom: 20px; }

.trivia-page .dv-clearfix:before, .trivia-page .dv-clearfix:after { content: ""; display: block; height: 0; visibility: hidden; }
.trivia-page .dv-clearfix:after { clear: both; }