.quiz-container { bottom: 0; display: none; left: 0; position: absolute; right: 0; top: 0; z-index: 30; } .clearfix:before, .clearfix:after{ display: block; } .qq-logo{ position: relative; } .qq-logo::before { background: transparent url("../images/logo.png") no-repeat scroll center center; content: ""; display: block; height: 56px; position: absolute; right: 20px; top: 20px; width: 59px; } .quick-quiz-panel { background: #13321e url("../images/bg.jpg") no-repeat scroll center 0; color: #fff; line-height: 1.25; margin: 0 auto; max-width: 100%; position: relative; } .quick-quiz-panel input, .quick-quiz-panel select, .quick-quiz-panel button{ color: #020202; } .qq-page-content { bottom: 60px; left: 0; overflow-y: auto; position: absolute; right: 0; top: 0; } .qq-page-body { font-size: 18px; font-weight: 300; padding: 50px 70px 75px; position: relative; } .qq-que-index { font-size: 20px; margin: 0 0 10px; } .qq-qtext { font-size: 16px; font-weight: 400; margin: 0 0 15px; } .qq-prompt { font-size: 16px; } .qq-qtext img{ background: #FFF; } .qq-actions { background: #000 url("../images/ft.png?v=2") repeat-x scroll center 0; bottom: 0; height: 60px; left: 0; padding: 10px 85px 10px 250px; position: absolute; right: 0; text-align: right; } .qq-actions::before { background: transparent url("../images/books.png") no-repeat scroll 0 0; bottom: 0; content: ""; display: block; height: 100px; left: 15px; position: absolute; width: 130px; background-size: contain; } .qq-answer { margin: 10px 0; padding: 0; } .qq-answer > li { list-style: outside none none; margin-bottom: 5px; } .qq-que-input-wr { display: none; float: left; margin-right: 10px; } .qq-label { display: inline; margin: 0; } .qq-que.multichoice .qq-que-label-wr { padding-left: 25px; } .qq-que input { max-width: 100%; outline: medium none !important; } .qq-button { background: #fffc00 none repeat scroll 0 0; border: medium none; border-radius: 8px; color: #000; display: inline-block; font-size: 14px; font-weight: 400; height: 38px; padding: 8px 25px; vertical-align: middle; } .qq-ablock{ position: relative; width: 100%; } .qq-que.shortanswer .qq-prompt { float: left; font-size: 22px; font-weight: 400; padding: 8px 0; width: 175px; } .qq-que.shortanswer .qq-answer { float: left; margin: 0 0 0 -175px; width: 100%; } .qq-que.shortanswer .qq-ansin{ margin-left: 175px; } .qq-que.shortanswer input[type="text"] { border: 1px solid #333; border-radius: 15px; color: #020202; font-size: 22px; font-weight: 300; height: 46px; padding: 5px 15px; width: 300px; } .qq-select-list > li { background: #fff none repeat scroll 0 0; color: #020202; font-size: 16px; margin-bottom: 10px; padding: 10px 15px; } .qq-select-list > li.ui-selected { background: #fffc00 none repeat scroll 0 0; } .qq-que.truefalse .qq-select-list { margin-top: 60px; text-align: center; } .qq-que.truefalse .qq-select-list > li { border-radius: 6px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); display: inline-block; line-height: 28px; margin: 0 20px; min-width: 225px; padding: 9px 20px 5px; text-align: center; text-transform: uppercase; } .qq-que.truefalse label{ font-weight: bold; } .qq-que-mta-txt { margin: 0 5px; } /** * Drag and drop question answer */ .dadm-que-list { float: left; } .dadbox { background-color: #fff; color: #020202; height: 66px; padding: 10px 20px; position: relative; } .dadm-que { float: left; margin-right: 25px; width: 390px; } .dadm-que::before { background: transparent url("../images/que-ar.png") no-repeat scroll 0 center; content: ""; display: block; height: 50px; margin-top: -25px; position: absolute; right: -25px; top: 50%; width: 25px; } .dadm-ans-choose { float: left; height: 70px; list-style: outside none none; margin-left: -26px; padding: 0; width: 300px; } .dadm-ans { margin-left: 28px; width: 360px; } .dadm-ans::before { background: transparent url("../images/ans-ar.png?v=1") no-repeat scroll center center; content: ""; display: block; height: 52px; left: -25px; margin-top: -26px; position: absolute; top: 50%; width: 25px; } .dadm-que-inner, .dadm-ans-inner { height: 100%; overflow-x: visible; overflow-y: auto; } .dadm-ans-inner::after, .dadm-ans-inner::before{ background: #fff none repeat scroll 0 0; content: ""; display: block; left: -25px; position: absolute; width: 25px; } .dadm-ans-inner::after { top: 50%; margin-top: 26px; bottom: 0; } .dadm-ans-inner::before { bottom: 50%; margin-bottom: 26px; top: 0; } .dadm-ans-list { float: left; } .dads-que, .dads-ans { background: #fff none repeat scroll 0 0; color: #020202; font-size: 18px; } .dads-que { border-radius: 27px; font-weight: bold; height: 53px; padding: 15px 10px; text-align: center; width: 53px; } .dads-ans{ padding: 15px 25px; } .qq-answer.dads-que-list { float: left; margin-right: 10px; } .qq-answer.dads-ans-list { float: left; margin-left: -63px; padding-left: 63px; width: 100%; } /** * Waitting and result page */ .qq-next-bt.qq-button { background-color: #fff; } .qq-waitting-page { background: #005563 url("../images/bgwelcome.jpg") no-repeat scroll center 0; bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .qq-waitting-page .qq-actions::before { background-image: url("../images/person.png"); height: 375px; width: 310px; background-size: contain; left: 10px; } .qq-waitting-body { padding: 35px 70px; } .qq-waitting-text { border: 3px solid #fff; border-radius: 50%; font-size: 28px; font-weight: 400; margin: 25px auto 70px; padding: 30px 35px; text-align: center; width: 420px; } .qq-start-bt.qq-button { background: rgba(0, 0, 0, 0.2) url("../images/load.png") no-repeat scroll 2px center; border-radius: 48px; color: #fff; display: block; font-size: 26px; font-weight: 300; height: 70px; margin: 0 auto; padding-left: 70px; position: relative; text-transform: uppercase; width: 255px; z-index: 99; background-size: contain; font-weight: bold; } .qq-result-body { padding: 100px 70px 50px 140px; text-align: center; } .qq-result-label { font-size: 28px; font-weight: 300; } .qq-result-text { font-size: 26px; margin: 55px 0 60px; } .qq-que-suggestion { font-size: 22px; margin: 25px 0; padding-left: 50px; } .qq-que-result { color: #fefb00; font-size: 26px; font-weight: 900; margin: 0 0 20px; padding: 20px 0 5px 50px; position: relative; } .qq-que-result::before { content: ""; display: block; height: 45px; left: 0; position: absolute; width: 60px; } .qq-que-result.qq-que-sure::before { background: transparent url("../images/sure.png") no-repeat scroll 0 bottom; bottom: 10px; } .qq-que-result.qq-que-fail::before { background: transparent url("../images/fail.png") no-repeat scroll 0 bottom; bottom: 0; } .qq-close { border: 1px solid #fff; border-radius: 15px; color: #fff; display: none; font-size: 20px; font-weight: 300; height: 30px; left: 10px; line-height: 28px; position: absolute; text-align: center; top: 10px; width: 30px; z-index: 9; } a.qq-close:hover, a.qq-close:active, a.qq-close:focus{ color: #fff; } .quiz-container .qq-close{ display: block; }