@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);
body, html {margin:0; padding:0; width:100%; font-size:16px;}
h1{background:#005680; font-size:22px; padding:10px 0px; width:100%; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center;}
h2{background:#E0E0E0; font-size:18px; padding:5px 20px; width:98%; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center;}
#menubar{display:none;width:99%; padding:0.5%; background:#005680;} 
#left-head{width:93%; float:left; background:#005680;display:inline-block; color:#fff; font-weight:bold;}
#button{width:6%;font-size:32px; color:#fff; font-weight:bold; float:left; text-align:right; cursor:pointer; padding-right:0.5%;background:#005680;display:inline-block; vertical-align:5px;}
.subbtn{padding:10px 10px; font-size:18px; font-family:Lato; margin-left:5px; display:inline-block; float:left; font-weight:bold; cursor:pointer;border:thin solid #FF8080;  background-image: linear-gradient(#B0B0B0, #F5F5F5, #B0B0B0); border-radius:15px; box-shadow:0px 2px 5px; margin-left:15px;}
.subbtn:hover{color:#FF7171;border:thin solid #5A9CE4;}
#twenty p, span, strong {font-size:16px;font-family:Lato;}
.center{width:100%; margin:0 auto; vertical-align:top;}
#eighty{width:74%; padding:0.5%; float:left; display:inline-block; }
#twenty{width:22%; padding:1%; float:right; display:inline-block; }
.sixty{width:28%; padding:1%; float:right; display:inline-block; }
.sixty-sixty{width:28%; float:right;}
.twenty-one{width:23%; float:left; display:inline-block; }
.sixty-one{width:58%; float:left; display:inline-block; }
.button-save{background:#00699B; padding:8px 20px; color:#fff; font-weight:bold; cursor:pointer; float:right; border-radius:10px;background-image: linear-gradient(#9797FF, #00699B, #9797FF);}
.button-save:hover{background:#00699B;}
.button-normal{background:#0984FF; padding:8px 20px; color:#fff; font-weight:bold; cursor:pointer; border-radius:10px; background-image: linear-gradient(#00CACA, #0984FF, #00CACA);}
.button-normal:hover{background:#0984FF;}
.clear{clear:both}
.subject, .timebox{ background:#E4E4E4; padding:5px 5px; background-image: linear-gradient(#C4C4C4, #F5F5F5, #C4C4C4); margin:0px;}
#knock ul{margin-left:0px; list-style-type:none; padding:0px;}
.menu-button {list-style:none; text-decoration:none;display:inline-block;}
.menu-button a {padding:10px 10px; background:#004080; color:#fff; margin-right:5px; font-weight:bold; cursor:pointer; font-family: Lato!important;}
h6 p, span{font-size:18px; text-shadow:0px 5px 5px #CCC;}
#time-out, #show-time{font-size:20px; text-shadow:0px 5px 5px #CCC; text-align:center;}
#button_box {margin-top:10px; background:#EAEAEA; width:100%;}
#button_box p span {margin-left:10px; padding:10px 0px;}
.normal_button{
   border: 1px solid #96d1f8;
   background: #70787d;
   background: -webkit-gradient(linear, left top, left bottom, from(#e1e5e8), to(#70787d));
   background: -webkit-linear-gradient(top, #e1e5e8, #70787d);
   background: -moz-linear-gradient(top, #e1e5e8, #70787d);
   background: -ms-linear-gradient(top, #e1e5e8, #70787d);
   background: -o-linear-gradient(top, #e1e5e8, #70787d);
   padding: 3px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #050405;
   font-size: 14px;
   font-family: Lato;
   text-decoration: none;
   text-align:center;
   width:35px;
   display:inline-block;
   vertical-align: middle;
   margin:4px;
   outline: none;
   cursor:pointer;
   }
/* padding:3px 5px; border-radius:8px; cursor:pointer; text-align:center; display:inline-block; background:#F5F5F5; width:35px; height:25px; font-size:14px; color:#999999;font-weight:bold; margin:2px;}*/

.red_button{
 border: 1px solid #07407d;
   background: #6b0303;
   background: -webkit-gradient(linear, left top, left bottom, from(#b50707), to(#6b0303));
   background: -webkit-linear-gradient(top, #b50707, #6b0303);
   background: -moz-linear-gradient(top, #b50707, #6b0303);
   background: -ms-linear-gradient(top, #b50707, #6b0303);
   background: -o-linear-gradient(top, #b50707, #6b0303);
   padding: 3px;
   border-radius:0px 0px 20px 20px;
   -webkit-border-radius: 0px 0px 20px 20px;
   -moz-border-radius: 0px 0px 20px 20px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #fff;
   font-size: 14px;
   font-family: Lato;
   text-decoration: none;
   text-align:center;
   width:35px;
   display:inline-block;
   vertical-align: middle;
   margin:4px;
 }
 /*
   outline: none;padding:3px 5px; border-radius:0px 0px 20px 20px; cursor:pointer; text-align:center; display:inline-block; background:#EC0000; width:35px; height:25px; font-size:14px; color:#fff;font-weight:bold; margin:2px;}
 */
.green_button{
  border: 1px solid #07407d;
   background: #073001;
   background: -webkit-gradient(linear, left top, left bottom, from(#1fad09), to(#073001));
   background: -webkit-linear-gradient(top, #1fad09, #073001);
   background: -moz-linear-gradient(top, #1fad09, #073001);
   background: -ms-linear-gradient(top, #1fad09, #073001);
   background: -o-linear-gradient(top, #1fad09, #073001);
   padding: 3px;
    border-radius:20px 20px 0px 0px;
   -webkit-border-radius: 20px 20px 0px 0px;
   -moz-border-radius: 20px 20px 0px 0px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #fff;
   font-size: 14px;
   font-family: Lato;
   text-decoration: none;
   text-align:center;
   width:35px;
   display:inline-block;
   vertical-align: middle;
   margin:4px;
   outline: none;
 }
 /*
padding:3px 5px; border-radius:20px 20px 0px 0px; cursor:pointer; text-align:center; display:inline-block; background:#00A600; width:35px; height:25px; font-size:14px; color:#fff;font-weight:bold; margin:2px;}
*/
.blue_button{
   border: 1px solid #07407d;
   background: #27006e;
   background: -webkit-gradient(linear, left top, left bottom, from(#6422f2), to(#27006e));
   background: -webkit-linear-gradient(top, #6422f2, #27006e);
   background: -moz-linear-gradient(top, #6422f2, #27006e);
   background: -ms-linear-gradient(top, #6422f2, #27006e);
   background: -o-linear-gradient(top, #6422f2, #27006e);
   padding: 4px 6px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #fff;
   font-size: 14px;
   font-family: Lato;
   text-decoration: none;
   text-align:center;
   width:35px;
   display:inline-block;
   vertical-align: middle;
   margin:4px;
   outline: none;
 }
 /*
background:#6633FF; border:1px solid #000; color:#fff; border-radius:50%; padding:5px 8px;; margin:2px; height:30px; text-align:center; display:inline-block; }
*/
.answer_review{
border: 1px solid #07407d;
   background: #27006e;
   background: url(../online-css/Marked_reviews.png) no-repeat;
   /*
   background: -webkit-gradient(linear, left top, left bottom, from(#24baf0), to(#27006e));
   background: -webkit-linear-gradient(top, #24baf0, #27006e);
   background: -moz-linear-gradient(top, #24baf0, #27006e);
   background: -ms-linear-gradient(top, #24baf0, #27006e);
   background: -o-linear-gradient(top, #24baf0, #27006e);
   */
   padding: 4px 6px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #fff;
   font-size: 14px;
   font-family: Lato;
   text-decoration: none;
   text-align:center;
   width:35px;
   display:inline-block;
   vertical-align: middle;
   margin:4px;
   outline: none;
}
/*
background:#2291FF; border:2px solid #00FF00; color:#fff; border-radius:50%; padding:5px 8px;; margin:2px; height:30px; text-align:center; display:inline-block; } 
*/
/*.answer_review:after{content: "\2713"; color:#00FF00; font-weight:bold; font-size:26px; position:relative; z-index:501; top:-20px; left:10px;}*/
.current_button{padding:3px 5px; border-radius:8px; cursor:pointer; text-align:center; display:inline-block; background:#0F87FF; width:35px; height:25px; font-size:14px; color:#fff; font-weight:bold; margin:2px;}
#show-time{display:none;}
p, h1, h2, h3, h4, h5, h6, h7, h8 {line-height:30px; margin:0;}
.put{vertical-position:middle; float:left; }
label{font-size:16px; cursor:pointer;}
label p{display:inline-block; vertical-align:baseline; cursor:pointer;}
label p img{display:inline-block; vertical-align:super; float:left;}
.myquiz{cursor:pointer; font-size:16px; margin:15px 0px; display:block; border:1px solid transparent;width:100%;}
.myquiz input[type="radio"] {
   width:24px;
   height:24px;
}
.score_board input[type="button"]:hover {border:1px solid #0058B0; opacity:0.8; color:#FFFF00;}
#button-boxes{background:transparent; width:100%; display:block; margin:0px; border:1px solid #000;}
.myquiz label{vertical-align:top; font-size:18px; font-family:Lato; width:100%; display:block;}
.display-question p{ font-size:18px;font-family:Lato;}
.myquiz:hover{border:1px solid #E0E0E0;}
.lost {display:block; float:left;}
.lost a {padding:2px; background:#00ABFD; margin: 5px 1px;border:1px solid #000; font-size:14px; color:red;}
.current {float:left;z-index:10;}
.current a{padding:2px; background:red; margin: 5px 1px;border:1px solid #000; font-size:14px; color:#fff;}
.currentSubject{background-color:#FF0000;};