.questionset, .intro-page, .questionset-results { overflow: hidden; } .questionset.hidden { display: none; } .questionset .h5p-multichoice > .h5p-show-solution { display: none; } .questionset > .title { font-size: 2em; margin: 0.5em 0.16em 0.16em; } .dots-container { text-align: center; } .progress-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #494949; margin: 0 3px; cursor: pointer; } .progress-dot.answered { background: #494949; } .progress-dot.current { box-shadow: 1px 1px 4px #494949; margin: -1px 4px 1px 2px; } .intro-page { } .intro-page .title { font-size: 2em; line-height: 2em; font-weight: bold; text-align: center; } .intro-page .introduction { font-size: 1.25em; margin: 0 1em; } .intro-page .buttons { margin: 3em auto; text-align: center; } .qs-footer { overflow: hidden; } .qs-footer .button, .qs-startbutton, .qs-finishbutton, .questionset-results .button, .video-container > .button { display: block; line-height: 1.25em; padding: 0.25em 1em; border-radius: 0.75em; cursor: pointer; color: #fff; box-shadow: 0 0 0.5em #aebdc9; margin: 0.5em; background: #267ec9; background-image: -webkit-linear-gradient(top, #3999ea, #267ec9); background-image: -moz-linear-gradient(top, #3999ea, #267ec9); background-image: -o-linear-gradient(top, #3999ea, #267ec9); background-image: -ms-linear-gradient(top, #3999ea, #267ec9); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3999ea', endColorstr='#267ec9',GradientType=0); } .qs-footer .button:hover, .qs-startbutton:hover, .questionset-results .button:hover, .video-container > .button:hover { text-decoration: none; color: #fff; box-shadow: 0 0 0.5em #267ec9; } .qs-startbutton { display: inline-block; font-size: 2.5em; } .qs-footer > .prev, .qs-solutionbutton { float: left; } .qs-footer > .next, .qs-footer > .finish, .qs-finishbutton { float: right; } .questionset-results .qs-finishbutton { display: none; } .video-container { position: relative; } .video-container > video { background-color: #000; } .video-container > .button { position: absolute; top: 0.5em; right: 0.5em; } .qs-progress { text-align: center; line-height: 1.5em; } .questionset-results { text-align: center; } .questionset-results .greeting { margin: 1em; } .questionset-results .score { font-size: 1.5em; margin: 1em; } .questionset-results .resulttext { text-align: left; font-size: 1.25em; line-height: 1.25em; margin: 1em 3em; padding-left: 3em; min-height: 3em; background-repeat: no-repeat; background-position: left center; } .questionset-results .resulttext.fail { background-image: url(img/mark-fail.png); } .questionset-results .resulttext.fail em { font-style: normal; color: #b9272d; } .questionset-results .resulttext.success { background-image: url(img/mark-pass.png); } .questionset-results .resulttext.success em { font-style: normal; color: #6aa81b; }