@font-face {
font-family: dfKai;
src: url('kaiu.ttf'),
     url('kaiu.eot'); /* IE9 */
}
/* only for chrome ============================== */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #share_option{ top: 68px !important;}
    #container_omr{ height: 316px !important; }
    #box_omr_sheet{height:480px !important;}
}
/* end of chrome ================================ */

.popup
{
	font-size:15px;
	display:none;
	margin-top:20px;
	margin-bottom:20px;
	text-align:center;
}
.box_top
{
	background-color: #D8D8D8;
	height:9px;
	width:100%;
	position:absolute;
	top:0px;
}
.main_content
{
	text-align:center;
	font-size:20px;
	margin-top:100px;
}
.button_default
{	
	width:120px;
	cursor:pointer;
	font-family:Arial;
}
.button_ginie
{
	z-index:99999;
	position: fixed;
	left: 0;
	margin: 0px;
	bottom:0px !important;
}
#dock {
	
}
.menu_icon
{
	
}
.dock_worksheet_review
{
	top:40% !important;
}
.dock_worksheet_review td
{
	height:90px;
	padding-left:10px;
}


#omr_sheet {
	position:fixed;
	right:20px;
	top:0px;
        z-index: 700;
        padding: 15px;
        background-color: white;
        -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
	content: "";
	
        
	
/*	-moz-transform: skew(-4deg) rotate(-4deg);
	-webkit-transform: skew(-4deg) rotate(-4deg);
	transform: skew(-4deg) rotate(-4deg);*/
        
}

.shaded{
	background-color:#333;
	color:#333;
	color:black !important;
	cursor:default;
}
.shaded:hover {
	background-color:#333;
	color:#333;
}
.clear
{
	clear:both;
}
.error, .lbl_required
{
	color: red;
}
.ui-corner-all
{
	-webkit-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	border-radius: 10px !important;	
}
.ui-dialog-buttonpane
{
	border:0px !important;
}

.ui-state-hover
{
	

}
.ui-state-default
{
	/*background: none !important;
    border: 1px solid #CCCCCC;
    color: #1C94C4;
    font-weight: bold;
	*/
	
	/*border-color: #c5c5c5 !important;
	border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25)  !important;*/
	
	color: #ffffff  !important;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #00BEE6  !important;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00BEE6), to(#228FAB)) !important;
	background-image: -webkit-linear-gradient(top, #00BEE6, #228FAB) !important;
	background-image: -o-linear-gradient(top, #00BEE6, #228FAB) !important;
	background-image: linear-gradient(to bottom, #00BEE6, #228FAB) !important;
	background-image: -moz-linear-gradient(top, #00BEE6, #228FAB) !important;
	background-repeat: repeat-x;
	/*border-color: #00BEE6 #00BEE6 #228FAB !important;;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;;*/
	border:0px !important;
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00BEE6', endColorstr='#228FAB', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
	
.container_editor
{
    background-color:#CCCCCC;
}
.btn_mini
{
    width:100px !important;
}
.btn_blue {
	text-align:center;
    padding-bottom:3px;
    height:30px;
    width:150px;
    border:none;
    border-radius:3px;
    border: 1px solid #005580;
    color:white;
    font-size:80%;
    font-weight:bold;
    font-family:  "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial;
    cursor:pointer;
    background: -moz-linear-gradient(top, #1d92cc 0%, #1c709a 50%, #005b89 51%, #003c5a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d92cc), color-stop(50%,#1c709a), color-stop(51%,#005b89), color-stop(100%,#003c5a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1d92cc 0%,#1c709a 50%,#005b89 51% ,#003c5a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1d92cc 0%,#1c709a 50%,#005b89 51%,#003c5a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1d92cc 0%,#1c709a 50%,#005b89 51%,#003c5a 100%); /* IE10+ */
    background: linear-gradient(top, #1d92cc 0%,#1c709a 50%,#005b89 51%,#003c5a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d92cc', endColorstr='#003c5a',GradientType=0 ); /* IE6-9 */
}
.btn_green
{
    padding-bottom:3px;
    height:28px;
    width:150px;
    border:none;
    border-radius:3px;
    border: 1px solid #006b3b;
    color:white;
    font-size:80%;
    font-weight:bold;
    font-family:  "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial;
    cursor:pointer;
    background: -moz-linear-gradient(top, #1dcc7d 0%, #1c9961 50%, #00884a 51%, #005931 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1dcc7d), color-stop(50%,#1c9961), color-stop(51%,#00884a), color-stop(100%,#005931)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1dcc7d 0%,#1c9961 50%,#00884a 51%,#005931 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1dcc7d 0%,#1c9961 50%,#00884a 51%,#005931 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1dcc7d 0%,#1c9961 50%,#00884a 51%,#005931 100%); /* IE10+ */
    background: linear-gradient(top, #1dcc7d 0%,#1c9961 50%,#00884a 51%,#005931 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1dcc7d', endColorstr='#005931',GradientType=0 ); /* IE6-9 */
	text-align:center;
}
.btn_orange {
    padding-bottom:3px;
    height:30px;
    width:150px;
    border:none;
    border-radius:3px;
    border: 1px solid #D35434;
    color:white;
    font-size:80%;
    font-weight:bold;
    font-family:  "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial;
    cursor:pointer;    
    
background: #ff9e66; /* Old browsers */
background: -moz-linear-gradient(top,  #ff9e66 0%, #d35434 50%, #c72200 54%, #c64329 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9e66), color-stop(50%,#d35434), color-stop(54%,#c72200), color-stop(100%,#c64329)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff9e66 0%,#d35434 50%,#c72200 54%,#c64329 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff9e66 0%,#d35434 50%,#c72200 54%,#c64329 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff9e66 0%,#d35434 50%,#c72200 54%,#c64329 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff9e66 0%,#d35434 50%,#c72200 54%,#c64329 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9e66', endColorstr='#c64329',GradientType=0 ); /* IE6-9 */

}
.btn_gray
{
    padding-bottom:3px;
    height:28px;
    width:150px;
    border:none;
    border-radius:3px;
    border: 1px solid #3f3f3f;
    color:white;
    font-size:80%;
    font-weight:bold;
    font-family:  "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial;
    cursor:pointer;

background: #6f6f6f; /* Old browsers */
background: -moz-linear-gradient(top,  #6f6f6f 0%, #707070 50%, #414141 51%, #414141 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6f6f6f), color-stop(50%,#707070), color-stop(51%,#414141), color-stop(100%,#414141)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #6f6f6f 0%,#707070 50%,#414141 51%,#414141 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6f6f6f 0%,#707070 50%,#414141 51%,#414141 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6f6f6f 0%,#707070 50%,#414141 51%,#414141 100%); /* IE10+ */
background: linear-gradient(to bottom,  #6f6f6f 0%,#707070 50%,#414141 51%,#414141 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f6f6f', endColorstr='#414141',GradientType=0 ); /* IE6-9 */
	text-align:center;
}
h3, h2, h1
{
    margin-top:5px !important;
    margin-bottom:5px !important;
}
#dialog_ginie_question
{
    border:1px solid black;    
    position:fixed;
    top:10%; 
    bottom:10%;
    left:15%;
    right:15%;
    z-index:1000;
    background-color:white; 
    border:1px solid #cbcbcb; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px;
    -moz-box-shadow: 0 0 150px 50px  #bdbdbd;
    -webkit-box-shadow: 0 0 150px 50px #bdbdbd;
    box-shadow: 0 0 150px 50px #bdbdbd;
     
}

.img_student_answer
{
    text-align:center; 
    margin-top:15px;
    margin-bottom:15px;
}
.img_student_answer img
{
     
}
.rotate
{
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}

/* START : page saving_worksheet_existing ====================================== */
.box_question_detail
{
    display:block;
    color:#979797;
}
.box_question_master
{
    font-weight:bold; 
    color:#1D86BA; 
    font-size:12px; 
    margin-top:3px;
}
.bubble_ws
{
    border:1px solid #DE6640;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 1px 4px 1px 6px;
    background-color:#F4DBD0;
    font-weight:normal;
    color: black;
}
.lbl_order_no
{
    position:absolute; 
    right:-55px; 
    top:5px; 
    font-size:24px; 
    color:#C3C3C3;
    text-align:left;
    width:50px;
}

/* END : page saving_worksheet_existing ===========================================*/



.btn_prev, .btn_next
{
    position:absolute;
    top:20px;
    opacity:0.1;
    filter:alpha(opacity=10); 
    background-repeat:no-repeat;
    cursor:pointer;
    padding-top:200px;
    z-index: 500;
    height:100%;
    vertical-align:middle;
    display:table-cell;
    margin-top:80px;
    margin-right:190px;
 
}
.btn_prev
{
    left:110px;
    width:30%;
    
    /*background-image:url(../icons/prev.png);
    background-position:center left;*/
}
.btn_next
{
    text-align:right;
    right:50px;
    width:45%;
    /*background-image:url(../icons/next.png);
    background-position:center right;*/
}
.btn_prev:hover, .btn_next:hover
{
    opacity:0.6;
    filter:alpha(opacity=40); 
}
.btn_big_blue
{
    background: url("../icons/btn_big_blue.png") no-repeat ;
    width: 300px;
    height:46px;
    text-align:center;
    margin:auto;
    padding-top:10px;
    color:#ffffff;
    font-size:20px;
    cursor:pointer;
}
.btn_big_blue_2
{
    background: url("../icons/btn_big_blue.png") no-repeat ;
    width: 285px;
    height:46px;
    text-align:center;
    padding-top:5px;
    color:#ffffff;
    font-size:20px;
    cursor:pointer;
}



a.omr_arrow_up img, a.omr_arrow_down img {
    opacity: 0.2;
}
.omr_arrow_up img {
    height: 30px;
    transform: rotate(270deg);
    -ms-transform:rotate(270deg); 
    -moz-transform:rotate(270deg); 
    -webkit-transform:rotate(270deg); 
    -o-transform:rotate(270deg); 
}
.omr_arrow_down img {
    height: 30px;
    transform: rotate(90deg);
    -ms-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 
}
a.omr_arrow_up:hover img, a.omr_arrow_down:hover img {
    opacity: 0.7;
}



.clm_no
{
    background-color: #D7656D;
    font-size:11px;
    width:40px;
    color:#ffffff;
    font-weight:bold;
    text-align:center;
    height:4px; 
    padding:1px !important;
    cursor:pointer;
}
.clm_no_gray
{
    background-color: #D7656D;
    font-size:11px;
    width:40px;
    color:#D69398;
    font-weight:bold;
    text-align:center;
    height:4px; 
    padding:1px !important;
}
.clm_bubble, .clm_bubble_2
{
    background:url('../icons/bg_option.png') no-repeat ;
     background-position:center center;
    width:20px; 
    height:20px;
    text-align:center;
    font-size:11px;
    color: #D7656D;
    cursor:pointer;
}
.clm_bubble_2
{
	background:url('../icons/bg_option.png') no-repeat ;
    background-position:center center;
    width:20px; 
    height:20px;
    text-align:center;
    font-size:11px;
    color: #D7656D;
    cursor:default;
	
}
.clm_bubble_gray
{
    background:url('../icons/bg_option_gray.png') no-repeat ;
     background-position:center center;
    width:20px; 
    height:20px;
    text-align:center;
    font-size:11px;
    color: #CCCCCC;
}
.clm_bubble_black
{
    background:url('../icons/bg_option_black.png') no-repeat ;
     background-position:center center;
    width:20px; 
    height:20px;
    text-align:center;
    font-size:11px;
    color: black;
}

/*used on student attemp worksheet for menu left */
.menu_left
{
    margin-left:10px;
    margin-bottom:10px;
    cursor:pointer;
}

.structured_answer{ 
    resize:none;
    border:none;
    border: 1px solid #CCC;
    border-radius:3px;
    z-index:501;
    position:fixed; 
    bottom:-1px;
    right:35px; 
    height:60px;
    width:90%;
    background-color: #F7F7F7;
    padding:5px;
    left:105px;
}

.answer_title
{
	font-size:23px;
	color:#777777;
	margin-top:30px;
	
}
.answer_mark
{
	color:#000000; 
	font-size:14px; 
	padding-bottom:3px;
}
.anwser_content
{
	border:1px solid #CCCCCC;
	padding:5px;
	min-height: 130px; 
   	height:auto !important; 
   	height: 130px; 
	
}
.solution_title
{
	font-size:19px;
	font-weight:bold;
	margin-top:30px;
}
.solution_content
{
	margin-bottom:80px;
}

.comment
{
	background-color: #EDEDED;
	padding:3px;
	margin:2px 0px 2px 0px;
	font-size:14px;
}

.clm_comment_left
{
	float:left;
	color: #999999;
	font-size:13px;
}

.clm_comment_right
{
	float:left;
	font-size:13px;
}
.btn_delete_comment
{
	cursor:pointer;
}
.txt_from, .txt_to
{
	width:90px;
	font-size:12px;
}


.wbClosed {
    cursor: pointer;
    background-image: url(../icons/folder-close.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: contain;
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-left: 10px;
}
.wbOpened {
    cursor: pointer;
    background-image: url(../icons/folder-open.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: contain;
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-left: 10px;
}