@charset "UTF-8";
/* CSS Document */
/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1em;
}
/* Layout */
body {
    width: 100%;
    overflow-x: hidden;
    background: url("../img/bg.png") repeat;
    background-color: #F4F1EC;
    font-family: "pt-sans-pro", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.5em;
    margin: 0;
}
#wrap {
    width: 100%;
    max-width: 1024px;
    margin: auto;
    overflow: hidden;
}
#header {
    height: 60px;
    width: calc(100% - 60px);
    overflow: hidden;
}
.border-dots, .border-dots-small, .border-curly {
    border: 0;
    height: 20px;
    width: 100%;
    clear: both;
}
.border-dots {
    background: url("../img/border-dots.png") center center repeat-x;
}
.border-dots-small {
    background: url("../img/border-dots-small.png") center center repeat-x;
}
.border-curly {
    background: url("../img/border-curly.png") center center repeat-x;
}
/* Typography */
h1, h2, h3, h4, h5, h6, #page, #percent, #totalScore {
    font-family: "permanent-marker", sans-serif;
    opacity: 0.8;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
h1 {
    margin-top: 10px;
    font-size: 1.25em;
    width: 100%;
    line-height: 0.85em;
    text-shadow: 3px 3px 0px #da98d5;
}
h2, #page {
    font-size: 1.5em;
    line-height: 0.85em;
    text-shadow: 3px 3px 0px #97c9e9;
}
b, strong {
    background: url("../img/bg-green.png") center center no-repeat;
    background-size: cover;
}
.question p {
    width: 95%;
    margin: 2% auto 2% auto;
}
.imgctr img, .center, .questionPic img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Options */
#questionWrap ul {
    padding: 0;
    margin: 0;
    max-width: 960px;
}
#questionWrap li {
    list-style: none;
    overflow: hidden;
}

/* Pagination */
#pagination {
    width: 100%;
    height: 50px;
}
#prevBox, #nextBox {
    width: 50px;
    height: 50px;
    float: left;
}
#page {
    width: calc(100% - 100px);
    float: left;
    text-align: center;
    padding-top: 6px;
}
#prevQuestion, #nextQuestion, #submit {
    width: 50px;
    height: 50px;
    text-indent: -999em;
}
#prevQuestion, #nextQuestion, #submit, .optionA, .optionB, .optionC, .optionD {
    cursor: pointer;
}
#prevQuestion {
    background: url("../img/arrow-left.png") no-repeat center center;
}
#nextQuestion, #submit {
    background: url("../img/arrow-right.png") no-repeat center center;
}
.optionA {
    background: url("../img/optionA.png") no-repeat center center;
}
.optionB {
    background: url("../img/optionB.png") no-repeat center center;
}
.optionC {
    background: url("../img/optionC.png") no-repeat center center;
}
.optionD {
    background: url("../img/optionD.png") no-repeat center center;
}
.optionA, .optionB, .optionC, .optionD {
    width: 100%;
    background-size: contain;
    position: relative;
    padding-bottom: 25.08%;
}
.optionA span, .optionB span, .optionC span, .optionD span {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    display: block;
}
.optionA span, .optionC span {
    width: 92%;
    margin-top: 5%;
    margin-left: 7%;
    overflow: hidden;
    text-align: left;
    vertical-align: middle;
}
.optionB span, .optionD span {
    width: 91%;
    margin-top: 5%;
    margin-left: 3%;
    overflow: hidden;
    text-align: right;
    vertical-align: middle;
}
.hide {
    display: none;
}
.dim {
    opacity: 0.3;
}
/* Score */
#scoreBox {
    width: 100%;
    height: 250px;
    padding-top: 75px;
}
#percent, #totalScore {
    padding: 0;
    margin: 0;
    line-height: 1em;
}
#percent {
    font-size: 5em;
    text-shadow: 6px 6px 0px #ffdb3e;
}
#totalScore {
    font-size: 2em;
    text-shadow: 3px 3px 0px #97c9e9;
    display: none;
}
/* Review */
.reviewBorder {
    width: 100%;
}
.reviewQ {
    width: 95%;
    margin: auto;
}
.reviewU {
    margin: 20px 0 20px 0;
    padding: 0 5% 0 5%;
    width: 90%;
    background: url("../img/bg-purple.png") center center no-repeat;
    background-size: cover;
    overflow: hidden;
    display: inline-block;
}
.reviewU span, .reviewU img {
    vertical-align: middle;
}
.reviewA {
    width: 95%;
    margin: auto;
    font-family: "john-doe", sans-serif;
}
#review, .reviewBorder, .reviewQ, .reviewU, .reviewA {
    display: none;
}
/* Footer */
#moreQuizzes {
    margin: auto;
    clear: both;
    background: url("../img/click_more-quizzes-s.gif");
    cursor: pointer;
    width: 400px;
    height: 125px;
}
#moreQuizzes a {
    display: block;
    text-indent: -999em;
    width: 400px;
    height: 125px;
}
#menuLink a {
    cursor: pointer;
    display: block;
    background: url("../img/bg-answer.png") center center no-repeat;
    border: dashed #000 2px;
    border-radius: 5px;
    width: 35%;
    text-align: center;
    font-family: "john-doe", sans-serif;
    color: antiquewhite;
    margin: 4px auto 4px auto;
}
#footer {
    width: 100%;
}
#footer p {
    text-align: center;
}
/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /*h1 {
        font-size: 1.75em;
    }*/
    .optionA {
        background: url("../img/optionA-large.png") no-repeat center center;
    }
    .optionB {
        background: url("../img/optionB-large.png") no-repeat center center;
    }
    .optionC {
        background: url("../img/optionC-large.png") no-repeat center center;
    }
    .optionD {
        background: url("../img/optionD-large.png") no-repeat center center;
    }
    .optionA, .optionB, .optionC, .optionD {
        width: 100%;
        background-size: contain;
        position: relative;
        padding-bottom: 12%;
    }
    .optionA span, .optionC span {
        width: 92%;
        margin-top: 2%;
        margin-left: 7%;
    }
    .optionB span, .optionD span {
        width: 88%;
        margin-top: 2%;
        margin-left: 3%;
    }
}
/* Large screen */
@media only screen and (min-width: 1024px) {
    h1 {
        font-size: 1.75em;
    }
    .optionA {
        background: url("../img/optionA-large.png") no-repeat center center;
    }
    .optionB {
        background: url("../img/optionB-large.png") no-repeat center center;
    }
    .optionC {
        background: url("../img/optionC-large.png") no-repeat center center;
    }
    .optionD {
        background: url("../img/optionD-large.png") no-repeat center center;
    }
    .optionA, .optionB, .optionC, .optionD {
        width: 100%;
        background-size: contain;
        position: relative;
        padding-bottom: 12%;
    }
    .optionA span, .optionC span {
        width: 92%;
        margin-top: 2%;
        margin-left: 7%;
    }
    .optionB span, .optionD span {
        width: 88%;
        margin-top: 2%;
        margin-left: 3%;
    }
    #moreQuizzes {
        background: url("../img/click_more-quizzes-l.gif");
        width: 500px;
        height: 157px;
    }
    #moreQuizzes a {
        width: 500px;
        height: 157px;
    }
}