File: trivia/trivia.css

#trivia {
 position:relative;
 width:35em;
 min-height:22em;
 margin:1em auto;
 background:#bcdeef;
 border:1px solid blue;
 padding:.1em;
 font-family:"Calibri",sans-serif;
}
#trivia #tcateg {
 margin:0 28% .2em 1em;
 font-weight:800;
}
#trivia #quiz {
 position:relative;
 min-height:21em;
 margin:0 26% 0 0;
 background:#fbfbfd;
 -moz-border-radius:.8em;
 -webkit-border-radius:.8em;
 -khtml-border-radius:.8em;
 border-radius:.8em;
 padding:.3em;
}
#trivia #quiz h3 {
 margin:.2em auto;
 text-align:center;
}
#trivia #quiz #tquestion {
 margin:2em .1em 1.5em .1em;
}
#trivia #quiz #sctimer {
 position:absolute;
 top:.3em;
 right:.5em;
 background:yellow;
 border:1px dashed #00d001;
 padding:0 .2em;
 font-size:1.2em;
 font-weight:800;
 color:#00d001;
}
#trivia #quiz #qnr {
 margin:0 2em 0 1.5em;
 padding:0;
 font-size:.9em;
 font-style:italic;
}

#trivia #quiz #qansw {
 margin:0 .1em;
 background:#f4f5fe;
 -moz-border-radius:.6em;
 -webkit-border-radius:.6em;
 -khtml-border-radius:.6em;
 border-radius:.6em;
 padding:.2em .4em;
}
#trivia #quiz .qanswer {
 margin:.1em;
 border:1px solid #333;
 background-image: -ms-linear-gradient(top, #efeff0, #fbfbfb);     /* IE10 */
 background-image:-moz-linear-gradient(top, #efeff0, #fbfbfb 95%);     /* Mozilla */
 /* for Safari, Chrome */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #efeff0), color-stop(0.9, #fbfbfb));
 background-image: -o-linear-gradient(top, #efeff0, #fbfbfb);          /* Opera 11.1+ */
 background: linear-gradient(top, #efeff0, #fbfbfb);          /* W3C Markup */
 -moz-border-radius:.3em;
 -webkit-border-radius:.3em;
 -khtml-border-radius:.3em;
 border-radius:.3em;
 padding:.1em;
 font-size:1.05em;
 cursor:pointer;
}
#trivia #quiz .qanswer:before {
 content:'• '
}
#trivia #quiz .qanswer:hover {
 margin:.1em;
 border:1px solid green;
 background:#dafbda;
 background-image: -ms-linear-gradient(top, #fbfbfb, #dafbda);     /* IE10 */
 background-image:-moz-linear-gradient(top, #fbfbfb, #dafbda 95%);     /* Mozilla */
 /* for Safari, Chrome */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbfbfb), color-stop(0.9, #dafbda));
 background-image: -o-linear-gradient(top, #fbfbfb, #dafbda);          /* Opera 11.1+ */
 background: linear-gradient(top, #fbfbfb, #dafbda);          /* W3C Markup */
 -moz-border-radius:0;
 -webkit-border-radius:0;
 -khtml-border-radius:0;
 border-radius:0;
 font-size:1.05em;
}
#trivia #quiz #nextq {
 display:block;
 margin:1em auto 1em 30%;
 cursor:pointer;
}

#trivia #answered {
 position:absolute;
 top:.3em;
 right:.1em;
 width:25%;
 height:4em;
 background:#eeefef;
 -moz-border-radius:.5em;
 -webkit-border-radius:.5em;
 -khtml-border-radius:.5em;
 border-radius:.5em;
 padding:.1em 0 .1em .1em;
 font-size:.9em;
}
#trivia #answered h4 {
 margin:.1em 0 0 1em;
}
#trivia #answered #ntotalq {
 font-size:1.1em;
 text-decoration:underline;
}
#trivia #answered #nqansw, #trivia #answered #nca, #trivia #quiz #canswer {
 color:#0001fe;
 font-weight:800;
 font-size:1.1em;
}
#trivia #answered #nia, #trivia #quiz #iansw {
 color:#fe0001;
 font-weight:800;
 font-size:1.1em;
}
#trivia #qdata {
 position:absolute;
 top:7em;
 right:.1em;
 width:25%;
 background:#fefeed;
}
#trivia #qdata h4 {
 margin:.4em 1px 0 1px;
 text-align:center;
}
#trivia #qdata label, #trivia #qdata button {
 display:block;
 margin:.3em 0;
 cursor:pointer;
}
#trivia #qdata #startqn {
 margin:0 0 0 1em;
 font-size:.85em;
 color:#0001ed;
}
#trivia #qdata #nquiz {
 width:2em;
 height:.9em;
 font-size:.85em;
}
#trivia #qdata button {
 margin:.3em 0 .3em 25%;
 font-size:.85em;
}
#trivia #tfrom {
 margin:1em auto .3em auto;
 text-align:center;
}