/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Basic Styles */
body {
	background-color: #ffffff;
	font-size:18px;/*13px GOC*/
	font-family:'arial';
	/*-webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;*/
}
a{
	color:#212121;
	
}
nav {
	height: 40px;
	width: 100%;
	background: #455868;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 2px solid #283744;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	/*width: 1100px;*/
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #fff;
	display: inline-block;
	width: 120px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}
nav li a {
	border-right: 1px solid #576979;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #8c99a4;
}
nav a#pull {
	display: none;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #576979;
	}
}

































@import "http://fonts.googleapis.com/css?family=Montserrat:300,400,700";
.rwd-table {
  margin: 1em 0;
  min-width: 300px;
}
.rwd-table tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}



.rwd-table {
  background: #34495E;
  color: #fff;
  border-radius: .4em;
  overflow: hidden;
}
.rwd-table tr {
  border-color: #46627f;
}
.rwd-table th, .rwd-table td {
  margin: .5em 1em;

}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    padding: 1em !important;
  }
}
.rwd-table th, .rwd-table td:before {
  color: #dd5;
}


table{border-collapse:collapse;border-spacing:0}td,th{padding:0}




a{

text-decoration:none;
}


img{
	
	border:0px;
	}
/* btn */

.button-success, .button-error {
background:#3a78b8;
color:#ffffff;
padding:2px;
padding-left:4px;
padding-right:4px;
font-size:13px;
font-family:'arial';
border-radius:4px;
border:1px solid #87b0d9;
margin-bottom:4px;

}

#content{

padding:4px;
}


.searchbox{
padding:4px;
border-radius:4px;
border:1px solid #dddddd;
display:none;
margin-top:8px;
max-width:700px;
 

}

.formbox{
padding:10px;
border-radius:4px;
border:1px solid #dddddd;
margin:8px;
max-width:500px;
 

}


[type="password"]{
width:200px;
height:15px;
padding:4px;
border:1px solid #666666;
border-radius:4px;
margin-bottom:5px;
}

input[type="text"] {
width:100px;
height:15px;
padding:4px;
border:1px solid #666666;
border-radius:4px;
margin-bottom:5px;
}


select{
width:200px;
margin-bottom:5px;
}





div#left_div{
float:left;
}

div.count_btn{
cursor:pointer;
float:left;
width:16px;
height:20px;
background:#212121;
color:#ffffff;
margin:3px;
padding:4px;
font-size:18px;
font-family:'arial';
border-radius:3px;

}

.hidequestion{
visibility:hidden;
display:none;
}
.showquestion{

}


table.showquestion{
border:1px solid #dddddd;
/* height:500px; */
padding:4px;
margin-top:10px;
overflow-x:scroll;
}

.showquestion td{
border-bottom:0px solid #dddddd;
padding:4px;

}
.showquestion tr:hover{

}


table.hidequestion{
border:1px solid #dddddd;
/* height:500px; */
padding:4px;
margin-top:10px;
overflow-x:scroll;
}

.hidequestion td{
border-bottom:0px solid #dddddd;
padding:4px;


}
.hidequestion tr:hover{

}


div.category_box{
border:1px solid #d4e0ed;
width:110px;
padding:4px;
background:#e4edf7;
float:left;
margin-right:5px;
font-size:14px;
color:#000000;
font-family:arial;
font-weight:bold;
cursor:pointer;
}




/* tooltip */
a.tooltip {outline:none; } a.tooltip strong {line-height:30px;} a.tooltip:hover {text-decoration:none;} a.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:20px; margin-left:-125px; width:240px; line-height:16px; } a.tooltip:hover span{ display:inline; position:absolute; border:2px solid #FFF; color:#EEE; background:#000 url(images/css-tooltip-gradient-bg.png) repeat-x 0 0; } .callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;} /*CSS3 extras*/ a.tooltip span { border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 0px 0px 8px 4px #666; -webkit-box-shadow: 0px 0px 8px 4px #666; box-shadow: 0px 0px 8px 4px #666; opacity: 0.8; }

div#qbank{
display:none;
visibility:hidden;
z-index:1000;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background:#ffffff;
overflow-y:scroll;

}

#result{
color:#267F00;
background:#FEF5CD;
padding:10px;
margin:10px;
margin-left:0px;
width:500px;
}
















/* liveclassroom */


.arrow_box {
	position: relative;
	background: #d50f29;
	border: 2px solid #f5e131;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 7%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(213, 15, 41, 0);
	border-bottom-color: #d50f29;
	border-width: 10px;
	margin-left: -10px;
}
.arrow_box:before {
	border-color: rgba(245, 225, 49, 0);
	border-bottom-color: #f5e131;
	border-width: 13px;
	margin-left: -13px;
}


.class_text_board{
width:650px;
height:500px;
float:left;

}
.class_comment_board{
width:300px;
height:470px;
border-radius:10px;
float:right;
padding:5px;
border:1px groove #eee;
}
#comment_box{
width:290px;
height:400px;
overflow-y:scroll;
padding:5px;
}

#username_comment{
color:#666666;
font-size:11px;
}
#comment_send{

    background: white; 
    border: 1px solid #DDD; 
    border-radius: 5px; 
    box-shadow: 0 0 5px #DDD inset; 
    color: #666; 
    outline: none; 
    height:25px; 
    width: 275px; 
 

}
.class_heading{
width:650px;
height:35px;
background:#212121;
font-size:14px;
color:#ffffff;
padding: 5px 25px 0px;
border-radius:8px 8px 0px 0px;
}

#page::after{
content: ' ';
position: absolute;
width: 0px;
height:100%;
top: 0;
left: 20px;
border-left: 1px solid #F8D3D3;
}
#page {
width:650px;
height:400px;
overflow-y:scroll;
line-height: 30px;
font-size: 14px;
padding: 5px 25px 27px;
position: relative;
outline: none;
background: white;
background: -webkit-linear-gradient(top, #dfe8ec 0%, #ffffff 8%) 0 0px;
background: -moz-linear-gradient(top, #dfe8ec 0%, #ffffff 8%) 0 0px;
background: linear-gradient(center top, #dfe8ec 0%, #ffffff 8%) 0 0px;
-webkit-background-size: 100% 30px;
-moz-background-size: 100% 30px;
-ms-background-size: 100% 30px;
background-size: 100% 30px;
}


#page_res{
float:right;
color:#666666;
font-size:12px;
}
.div_exp_corr{
background:#E0FFE0;
display:none;
}
.div_exp_wrong{
background:#FF9D9D;
display:none;
}



#stat_box{
width:210px;
height:100px;
border:0px solid #dddddd;
float:left;
margin-left:20px;
}
#stat_head{
width:210px;
height:30px;
background:#ec5c0d;
font-family:arial;
font-size:16px;
color:#ffffff;
text-align:center;
padding:4px 0px 0px 0px;
border-radius:4px 4px 0px 0px;
}

#stat_val{
width:210px;
height:66px;
background:#eeeeee;
font-family:arial;
font-size:40px;
color:#212121;
text-align:center;
padding:4px 0px 0px 0px;
border-radius:0px 0px 4px 4px;
}