#trivia {
 position:relative;
 width:60%;
 min-height:28em;
 margin:1em auto;
 background:#bcdeef;
 background:white;
 border:0px solid silver;
 padding:.5em;
 font-family:"Calibri",sans-serif;
 border-radius:.8em;
}

#quiz {
 position:relative;
 width:70%;
 min-height:28em;
 margin:10px 35% 5px 5px;
 background-color:white;
  border:1px solid #ffcc99; 
 -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;
}

#qdata {
 position:absolute;
 top:6em;
 right:.5em;
 width:21%;
 height:18em;
 padding:.1em 0 .1em .3em;
 background:#fefeed;
  -moz-border-radius:.8em;
 -webkit-border-radius:.8em;
 -khtml-border-radius:.8em;
 border-radius:.8em;
 padding:.5em;

}

#trivia #answered {
 position:absolute;
 top:.5em;
 right:.5em;
 width:21%;
 height:7.5em;
 background:#eeefef;
 background:white;
 -moz-border-radius:.5em;
 -webkit-border-radius:.5em;
 -khtml-border-radius:.5em;
 border-radius:.5em;
 padding:.1em 0 .1em .3em;
 font-size:.9em;
}


button{
	width: 95%;
	height: 3em;
	margin:30px 0px -10px 10px;
}

#trivia #quiz .qanswer {
 margin:1em;
 margin-left:2%;
 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:.5em;
 font-size:1.1em;
 cursor:pointer;
 width:92%;
}


#trivia #quiz .qanswer:hover {
 margin:1.1em;
 margin-left:2%;
 border:1px solid red;
 background:#6699ff;        /*#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:.3em;
 font-size:1.1em;
 width:92%;
}

select {
	width:95%;
	font-size: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 #tquestion {
 margin:2em .1em 1.5em 2%;
}
#trivia #quiz #qnr {
 margin:0 0 0 2%;
 padding:0;
 font-size:1em;
 font-style:normal;
}



#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;
}













@media screen and (max-width: 992px) {
 

#trivia {
 position:relative;
 width:100%;
 min-height:32em;
 margin:1em auto;
 background:white	;
 border:0px solid blue;
 padding:.1em;
 font-family:"Calibri",sans-serif;
 border-radius:.8em;
}
#trivia #tcateg {
 margin:0 8% .2em .5em;
 font-weight:900;
 width:100%;
 height:3em;
}
#trivia #quiz {
 position:relative;
 width:50%;
 min-height:28em;
 margin:0 25% 0 0;
 background:#fbfbfd;
 -moz-border-radius:.8em;
 -webkit-border-radius:.8em;
 -khtml-border-radius:.8em;
 border-radius:.8em;
 padding:.3em;
}
#trivia #quiz #tquestion {
 margin:2em .1em 1.5em .5em;
}
#trivia #quiz #qnr {
 margin:0 0 0 .5em;
 padding:0;
 font-size:.9em;
 font-style:normal;
}

#trivia #quiz #qansw {
 margin:0 .1em;
 background:#f4f5fe;
 -moz-border-radius:.6em;
 -webkit-border-radius:.6em;
 -khtml-border-radius:.6em;
 border-radius:.6em;
 padding:.5em .4em;
}

#trivia #quiz .qanswer {
 margin:.75em;
 margin-left:0;
 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:.5em;
 font-size:1.1em;
 cursor:pointer;
 width:92%;
}
#trivia #quiz .qanswer:before {
 content:' '
}
#trivia #quiz .qanswer:hover {
 margin:.8em;
 margin-left:0;
 border:1px solid red;
 background:#6699ff;        /*#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:.3em;
 font-size:1.1em;
 width:92%;
}
#trivia #quiz #nextq {
 display:block;
 margin:10em 5em 1em 0;
 cursor:pointer;
 
}

#trivia #answered {
 position:absolute;
 top:.3em;
 right:.1em;
 width:40%;
  height:auto;
 background:#eeefef;
 -moz-border-radius:.5em;
 -webkit-border-radius:.5em;
 -khtml-border-radius:.5em;
 border-radius:.5em;
 padding:.1em 0 .1em .3em;
 font-size:.9em;
}
#trivia #qdata {
 position:absolute;
 top:5em;
 right:.2em;
 width:40%;
 height:auto;
 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 button {
 margin:.3em 0 .5em 0;
 font-size:.85em;
 width:100%;
}
#trivia #qdata #startqn {
 margin:0 0 0 1em;
 font-size:.85em;
 color:#0001ed;
}
#trivia #qdata #nquiz {
 width:2em;
 height:.9em;
 font-size:.85em;
}
#trivia #tfrom {
 margin:1em auto .3em auto;
 text-align:center;
}

#trivia li {
margin-left:-20px;	
}
button{
	width: 100%;
	height: 3em;
	margin-bottom:10px;
}

select {
	width:95%;
	font-size:1.2em;

}


}