html,body{
	margin:0px;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	height:100%;
	min-height:100%;
}

tr,td,th,body,caption,input,option,textarea,select,div {
	font-family: 'Kanit-Regular',tahoma,arial,verdana;
	text-decoration:none;
	color:#999999;
	font-size:14px;
}






a, a:focus{
	color:#666666;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}
a:hover { color:#bcbcbc; text-decoration:none;}





.normaltext {color:#999999;}
.yellowtext { color:#ffec0e;}
.bluetext { color:#2741aa;}
.whitetext { color:#ffffff;}
.greytext { color:#666666;}
.greytext2 { color:#bcbcbc;}
.redtext { color:#a60000;}


.bg-blue{ background-color: #2741aa;}




.bluelink, .bluelink:focus {
	color:#2741aa;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
}
.bluelink:hover, .bluelink.active {color:#3058F9; text-decoration: underline; }

.bluelink2, .bluelink2:focus {
	color:#2741aa;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
}
.bluelink2:hover, .bluelink2.active {color:#2741aa; text-decoration: underline; }


.whitelink, .whitelink:focus {
	color:#FFFFFF;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}
.whitelink:hover, .whitelink.active {color:#9dd2fd; text-decoration: underline; }


.whitelink2, .whitelink2:focus {
	color:#FFFFFF;
	transition: 0.5s color; /*animates for 1 second*/
	-moz-transition: 0.5s color; /*For Firefox < 16.0*/
	-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	text-decoration:none;
}
.whitelink2:hover, .whitelink2.active {color:#9dd2fd; text-decoration: none; }



.m-t-5{ margin-top: 5px !important; }
.m-t-10{ margin-top: 10px !important; }
.m-t-15{ margin-top: 15px !important; }
.m-t-20{ margin-top: 20px !important; }
.m-l-5{ margin-left: 5px !important; }
.m-l-10{ margin-left: 10px !important; }
.m-l-15{ margin-left: 15px !important; }
.m-l-20{ margin-left: 20px !important; }
.m-r-5{ margin-right: 5px !important; }
.m-r-10{ margin-right: 10px !important; }
.m-r-15{ margin-right: 15px !important; }
.m-r-20{ margin-right: 20px !important; }
.m-b-5{ margin-bottom: 5px !important; }
.m-b-10{ margin-bottom: 10px !important; }
.m-b-15{ margin-bottom: 15px !important; }
.m-b-20{ margin-bottom: 20px !important; }




.bold {font-weight:bold;}
.underline { text-decoration: underline;}
.italic{ font-style: italic; }

.size10 {font-size:0.8em;}
.size11 {font-size:0.9em;}
.size12 {font-size:1em;}
.size13 {font-size:1.1em;}
.size14 {font-size:1.2em;}
.size15 {font-size:1.3em;}
.size16 {font-size:1.4em;}
.size17 {font-size:1.5em;}
.size18 {font-size:1.6em;}
.size20 {font-size:1.8em;}
.size22 {font-size:2em;}
.size24 {font-size:2.2em;}
.size26 {font-size:2.4em;}
.size28 {font-size:2.6em;}
.size30 {font-size:2.8em;}
.size32 {font-size:3em;}
.size34 {font-size:3.2em;}
.size36 {font-size:3.4em;}
.size38 {font-size:3.6em;}
.size40 {font-size:3.8em;}



.lineheight14 {line-height:1em;}
.lineheight16 {line-height:1.1em;}
.lineheight18 {line-height:1.2em;}
.lineheight20 {line-height:1.3em;}
.lineheight22 {line-height:1.4em;}
.lineheight24 {line-height:1.5em;}
.lineheight26 {line-height:1.6em;}
.lineheight28 {line-height:1.7em;}
.lineheight30 {line-height:1.8em;}



.texttop { vertical-align:top; }
.textmiddle { vertical-align:middle; }
.textbottom { vertical-align:bottom; }
.textleft { text-align:left; }
.textright { text-align:right; }
.textcenter { text-align:center; }
.textjustify { text-align:justify; }

.fleft{ float:left; }
.fright{ float:right; }
.clear { clear:both; }

.noborder { border:none; }



.pointer { cursor:pointer;}

.textbox {
	border: 2px solid #fff;
	background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, .5);
	padding:0px 10px 0px 10px;
}
.textbox.error {
	border: 2px solid #ff0000;
	/*background-image:url(../images/icon/notvalid.png);*/
	background-repeat:repeat-y;
	background-position:right center;
}
.error {
	margin-right:15px;
	color:#F11111;
}
span.error{font-size: 12px;}
.valid {
	/*background-image:url(../images/icon/valid.png);*/
	background-repeat:repeat-y;
	background-position:right center;
}

::-webkit-input-placeholder{ color:#999999 !important; }
:-moz-placeholder{ color:#999999 !important; }
::-moz-placeholder{ color:#999999 !important; }
:-ms-input-placeholder{ color:#999999 !important; }





.textbox_height {height:40px;}
.select_height {height:30px;}


.hideobj{ opacity:0; }
.hideobj2{ display:none;}




.content { width:100%; }

.header { width:100%; }

	.content.login{ height: 100%; min-height: 100vh; background-image: url(/resources/rtafTemplate/images/login/bg_login.jpg); background-position: top center; background-repeat: no-repeat; background-size: cover; }
	
	.content.login .header{ padding-top: 2%;}
	.content.login .header .logo{ display: block; width: 130px; margin: auto;}
	.content.login .header .websitename{ display: block; margin: auto; text-align: center; line-height:1.5em; margin-top: 10px; }
	.content.login .header .websitename .th{ display: block; font-size: 1.4em;}
	.content.login .header .websitename .en{ display: block; font-size: 1.1em;}
	
	.loginarea{ width: 300px; margin: auto; background: rgba(255,255,255,0.6); padding: 20px 0px; margin-top: 20px; border-radius: 4px;}
	.loginarea .text-center{ width: 75%; margin: auto; }

	.content.login .menuarea{ display: none; }



	.content.all{ height: auto; }
	
	.content.all .header{ background-image: url(/resources/rtafTemplate/images/template/bg_head.jpg); background-position: top center; background-repeat: no-repeat; padding: /*1.5% chai*/0.5%;}
	.content.all .header .logo{ float: left; width: /*120px chai*/100px; margin-right: 1.5%; }
	.content.all .header .websitename{ float: left; margin-top: 12px;}
	.content.all .header .websitename .th{ display: block; font-size: 1.8em;}
	.content.all .header .websitename .en{ display: block; font-size: 1.4em;}
	
	.content.all .menuarea,.content.all .menuarea-mobile{ float: right; width: 50%; text-align: right; margin-top: /*0% chai*/0.5%;}
	.content.all .menuarea a,.content.all .menuarea-mobile a{ font-size: 1.3em; margin-left: 5%; }
	.content.all .menuarea .username,.content.all .menuarea-mobile .username{ margin-top: /*3% chai*/0.5%; font-size: 1.3em;  }
	.content.all .menuarea .username .avatar,.content.all .menuarea-mobile .username .avatar{ width: 45px; margin-right: 8px; }

	.content.all .menuarea .username.admin{ margin-top: 0px; }
	.content.all .menuarea .username.admin .titleposition,.content.all .menuarea-mobile .username.admin .titleposition{ margin-top: -23px; font-size: 1.0em; }
	.content.all .menuarea .username.admin .avatar,.content.all .menuarea-mobile .username.admin .avatar{ width: 45px; margin-right: 8px; margin-top: 18px; }


	#overlay{ display: none; }
	#linemenu{
		font-size: 2em;
		color: #fff;
		display: none;
		transition: 0.5s color; /*animates for 1 second*/
		-moz-transition: 0.5s color; /*For Firefox < 16.0*/
		-webkit-transition: 0.5s color; /*For WebKit (Chrome, Safari)*/
	}
	#linemenu:hover{ color: #ffec0e; }
	#menuarea-mobile{ display: none; }
	#closebtn{
		position: absolute;
		top: 0;
		right: 0;
		font-size: 3em;
		display: none;
	}


	.overlay{
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 9998;
		top: 0;
		left:0;
		background-color: rgba(0,0,0, 0.9);
		overflow-y: auto;
		overflow-x: hidden;
		text-align: center;
		opacity:0;
		transition: opacity 1s;
	}


	.content.all .searcharea{ width: 100%; background-color: #d2ecfb; padding: /*3% 0% chai*/ 0.9% 0%; }
	.content.all .searcharea .searchobj,.content.all .searcharea .searchhistory{ position: relative; width: 500px; margin: auto; }
	.content.all .searcharea .form-control{
	  display: inline-block;
	  height: 50px;
	  padding: 6px 12px;
	  font-size: 1.4em;
	  width: 70%;
	  border-top-right-radius: 0px !important;
	  border-bottom-right-radius: 0px !important;
	}
	.content.all .searcharea .btn{
	  position: absolute;
	  height: 50px;
	  font-size: 1.4em;
	  width: 30%;
	  border-top-right-radius: 4px !important;
	  border-bottom-right-radius: 4px !important;
	  border-top-left-radius: 0px !important;
	  border-bottom-left-radius: 0px !important;
	}
	.content.all .searcharea .searchhistory{ margin-top: 5px; }
	.content.all .searcharea .searchhistory a{ margin: 0px 3px; }


	.content.all .resultarea{ }
	.content.all .resultarea .keyword{ margin-top: 3%; }
	.content.all .resultarea .keyword .sound{ width: 30px; margin-left: 1%; }
	.content.all .resultarea .result{ margin-top: 1%; margin-bottom: 2%; }
	.content.all .resultarea .result .detailarea{ margin: /*2% 5% chai*/2% 2%; }

	.btn-open{}
	.btn-close{ background-image: url(/resources/rtafTemplate/images/template/arrow_up.png); background-position: top center; background-repeat: no-repeat; width: 45px; height: 25px; text-align: center; margin: auto;}

	.content.all .resultarea .result .moredetail{ margin-bottom: 0%; display: none;}
	.content.all .resultarea .result .moredetail img{ width: 100%; }
	.content.all .resultarea .result .moredetail .gallery{ margin-bottom: 3%; }
	.content.all .resultarea .result .moredetail .vdo{ margin-bottom: 3%; }

	.content.all .buttonarea{ margin-top: 4%; text-align: center;}
	.content.all .buttonarea .btn{ width: 140px; height: 45px; }
	.content.all .buttonarea img{ width: 25px; }






	.content.all .reviewarea,
	.content.all .logoutarea,
	.content.all .useradminarea,
	.content.all .vocabarea,
	.content.all .checkreviewarea,
	.content.all .discussarea,
	.content.all .discussarea2,
	.content.all .discusseditarea
	{ padding-top: 2%;}
	.content.all .reviewarea .addnew_btn,
	.content.all .useradminarea .addnew_btn,
	.content.all .vocabarea .addnew_btn,
	.content.all .checkreviewarea .addnew_btn,
	.content.all .discussarea .addnew_btn,
	.content.all .discussarea2 .addnew_btn
	{ padding-top: 2%; }
	.content.all .reviewarea .addnew_btn img,
	.content.all .useradminarea .addnew_btn img,
	.content.all .vocabarea .addnew_btn img,
	.content.all .discussarea .addnew_btn img,
	.content.all .discussarea2 .addnew_btn img
	{ width: 25px; }
	.content.all .reviewarea .body,
	.content.all .useradminarea .body,
	.content.all .vocabarea .body,
	.content.all .checkreviewarea .body,
	.content.all .discussarea .body,
	.content.all .discussarea2 .body,
	.content.all .discusseditarea .body
	{ padding-top: 1%; padding-bottom: 3%; }
	.content.all .reviewarea .body .table-head,
	.content.all .useradminarea .body .table-head,
	.content.all .vocabarea .body .table-head,
	.content.all .checkreviewarea .body .table-head,
	.content.all .discussarea .body .table-head,
	.content.all .discussarea2 .body .table-head,
	.content.all .discusseditarea .body .table-head
	{ background-color: #2741aa; padding: 1%; }
	.content.all .reviewarea .body .table-head div,
	.content.all .useradminarea .body .table-head div,
	.content.all .vocabarea .body .table-head div,
	.content.all .checkreviewarea .body .table-head div,
	.content.all .discussarea .body .table-head div,
	.content.all .discussarea2 .body .table-head div,
	.content.all .discusseditarea .body .table-head div
	{ color: #fff;}
	.content.all .reviewarea .body .table-head .col1,.content.all .reviewarea .body .table-head .col2,.content.all .reviewarea .body .table-head .col3{ color: #fff;}
	.content.all .reviewarea .body .col1{ width: 4%; float: left; }
	.content.all .reviewarea .body .col2{ width: 20%; float: left; }
	.content.all .reviewarea .body .col3{ width: 75%; float: left; }

	.content.all .useradminarea .body .col1{ width: 20%; float: left; }
	.content.all .useradminarea .body .col2{ width: 22%; float: left; }
	.content.all .useradminarea .body .col3{ width: 22%; float: left; }
	.content.all .useradminarea .body .col4{ width: 15%; float: left; }
	.content.all .useradminarea .body .col5{ width: 11%; float: left; text-align: center; }
	.content.all .useradminarea .body .col6{ width: 5%; float: left; text-align: center; }
	.content.all .useradminarea .body .col7{ width: 5%; float: left; text-align: center;}

	.content.all .vocabarea .body .col1{ width: 4%; float: left; }
	.content.all .vocabarea .body .col2{ width: 20%; float: left; }
	.content.all .vocabarea .body .col3{ width: 67%; float: left; }
	.content.all .vocabarea .body .col31{ width: 10%; float: left; }
	.content.all .vocabarea .body .col32{ width: 57%; float: left; }
	.content.all .vocabarea .body .col4{ width: 4%; float: left; text-align: center; }
	.content.all .vocabarea .body .col5{ width: 4%; float: left; text-align: center; }

	.content.all .checkreviewarea .body .col1{ width: 5%; float: left; text-align: center; }
	.content.all .checkreviewarea .body .col2{ width: 20%; float: left; }
	.content.all .checkreviewarea .body .col3{ width: 60%; float: left; }
	.content.all .checkreviewarea .body .col3 span{ display: block; width: 100%; }
	.content.all .checkreviewarea .body .col4{ width: 15%; float: left; text-align: center; }

	.content.all .discussarea .body .col1{ width: 4%; float: left; text-align: center; }
	.content.all .discussarea .body .col2{ width: 21%; float: left; }
	.content.all .discussarea .body .col3{ width: 70%; float: left; }
	.content.all .discussarea .body .col3 span{ display: block; width: 100%; }
	.content.all .discussarea .body .col4{ width: 5%; float: left; text-align: center; }

	.content.all .discussarea2 .body .col1{ width: 4%; float: left; text-align: center; }
	.content.all .discussarea2 .body .col2{ width: 21%; float: left; }
	.content.all .discussarea2 .body .col3{ width: 75%; float: left; }
	.content.all .discussarea2 .body .col3 span{ display: block; width: 100%; }

	.content.all .discusseditarea .body .mainvocab{ padding-top: 2%; padding-bottom: 2%; }
	.content.all .discusseditarea .body .col1{ width: 4%; float: left; text-align: left; }
	.content.all .discusseditarea .body .col2{ width: 96%; float: left; }
	.content.all .discusseditarea .body .col2 span{ display: block; width: 100%; }

	.content.all .useradminarea .body .table-row button{ margin-top: -4px; margin-bottom: -4px;}
	.content.all .reviewarea .body .table-row,
	.content.all .useradminarea .body .table-row,
	.content.all .vocabarea .body .table-row,
	.content.all .checkreviewarea .body .table-row,
	.content.all .discussarea .body .table-row,
	.content.all .discussarea2 .body .table-row,
	.content.all .discusseditarea .body .table-row
	{padding: 1%; }
	.content.all .reviewarea .body .table-row.even,
	.content.all .useradminarea .body .table-row.even,
	.content.all .vocabarea .body .table-row.even,
	.content.all .checkreviewarea .body .table-row.even,
	.content.all .discussarea .body .table-row.even,
	.content.all .discussarea2 .body .table-row.even,
	.content.all .discusseditarea .body .table-row.even,
	.content.all .vocabarea .body .item.even
	{padding: 1%; background-color: #ededed; }
	.content.all .reviewarea .body .table-row .added_name img,
	.content.all .useradminarea .body .table-row .col5 img,
	.content.all .useradminarea .body .table-row .col6 img,
	.content.all .vocabarea .body .table-row .col4 img,
	.content.all .vocabarea .body .table-row .col5 img,
	.content.all .checkreviewarea .body .table-row .col4 img,
	.content.all .discussarea .body .table-row .col4 img,
	.content.all .discussarea2 .body .table-row .col4 img,
	.content.all .vocabarea img.imgbutton,
	#panel-vocab-edit img.del
	{ width: 25px; }

	.content.all .reviewarea .body .table-row .col1 img,
	.content.all .vocabarea .body .table-row .col1 img,
	.content.all .discussarea .body .table-row .col1 img,
	.content.all .discussarea2 .body .table-row .col1 img,
	.content.all .discusseditarea .body .table-row .col1 img
	{ width: 65%;}




	.content.all .reviewarea .body .colleft,.content.all .useradminarea .body .colleft,.content.all .discussformarea .colleft,.content.all .vocabarea .colleft,#panel-vocab .colleft,#panel-vocab-edit .colleft{ margin-bottom: 2%;}

	.content.all .vocabarea .item.colleft{ margin-bottom: 1%;}

	.content.all .reviewarea .body .colright,.content.all .useradminarea .body .colright,.content.all .discussformarea .colright,.content.all .vocabarea .colright,#panel-vocab .colright,#panel-vocab-edit .colright{ margin-bottom: 2%;}

	.content.all .vocabarea .item.colright{ margin-bottom: 1%;}

	.content.all .reviewarea .body .colright img,.content.all .useradminarea .body .colright img,.content.all .discussformarea .colright img,.content.all .vocabarea .colright .img,#panel-vocab .colright .img,#panel-vocab-edit .colright .img{ width: 100%; }

	.content.all .vocabarea .colright .subject{ margin-top: 2%;}
	.content.all .vocabarea .colright .gallery{ margin-top: 1%;}

	.content.all .reviewarea .body .colright button,.content.all .useradminarea .body .colright button,.content.all .discussformarea .colright button,.content.all .vocabarea .colright button,#panel-vocab .colright button,#panel-vocab-edit .colright button{ margin-top: 2%; width: 120px; height: 38px;}

	.content.all .reviewarea .body .colright .edit{ width: 50%; position: relative; }
	.content.all .reviewarea .body .colright .delete_btn{
		background-color: #a60000; width: 25px; position: absolute; right: 4px; top: 4px; color: #fff; text-align: center; padding-top: 3px; padding-bottom: 3px;
		border-radius:4px;
		-webkit-border-radius:4px; 
	}

	.content.all .reviewarea.complete .body{ padding-top: 10%; padding-bottom: 10%; text-align: center;}


	.content.all .historyarea { padding-top: 2%;}
	.content.all .historyarea .body{ padding-top: 1%; padding-bottom: 3%; }
	.content.all .historyarea .body .table-head{ background-color: #2741aa; padding: 1%; }
	.content.all .historyarea .body .table-head div{ color: #fff;}
	.content.all .historyarea .body .table-head .col1,.content.all .historyarea .body .table-head .col2,.content.all .historyarea .body .table-head .col3{ color: #fff;}
	.content.all .historyarea .body .col1{ width: 4%; float: left; }
	.content.all .historyarea .body .col2{ width: 20%; float: left; }
	.content.all .historyarea .body .col3{ width: 75%; float: left; }
	.content.all .historyarea .body .table-row{padding: 1%; }
	.content.all .historyarea .body .table-row.even{padding: 1%; background-color: #ededed; }
	
	.content.all .historyarea .body .table-row .col1 img{ width: 65%;}




	.content.all .logoutarea .body{ padding-top: 10%; padding-bottom: 10%; text-align: center;}





	/*Admin*/
	.content.all .adminmenuarea{ width: 100%; background-color: #d2ecfb; padding: /*0.8% 0% chai*/0.4% 0%; }
	.content.all .adminmenuarea a{ font-size: 1.2em; font-weight: bold; margin-left: 3%; margin-right: 1%;}

	.content.all.discussedit .chat{ padding: 2%; background-color: #f3f3f3; margin-top: 5%; }
	.content.all.discussedit .chat .chatarea{ max-height: 500px; overflow-y: auto; }

	.content.all.discussedit .chat .chatarea .avatar{ width: 30px; margin-right: 8px; }

	.content.all.discussedit .chat .chatarea .yourquotearea{ margin-bottom: 2%; }
	.content.all.discussedit .chat .chatarea .yourquotearea .name{ text-align: right; margin-bottom: 8px; }
	.content.all.discussedit .chat .chatarea .yourquotearea .word{ background-color: #d2ecfb; width: fit-cotent; min-width: 80px; max-width: 300px; min-height: 35px; float: right; padding: 1% 2% 1% 2%; text-align: left;
	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
	box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.125);
    border-radius:4px;
	-webkit-border-radius:4px; 
	}
	.content.all.discussedit .chat .chatarea .yourquotearea .word img{ width: auto; max-width: 100%; margin-top: 8px; padding: 0% 0% 2% 0%; }
	.content.all.discussedit .chat .chatarea .yourquotearea .icon{ float: right;}
	.content.all.discussedit .chat .chatarea .yourquotearea .icon img{ width: 30px;}


	.content.all.discussedit .chat .chatarea .otherquotearea{ margin-bottom: 2%; }
	.content.all.discussedit .chat .chatarea .otherquotearea .name{ text-align: left; margin-bottom: 8px; }
	.content.all.discussedit .chat .chatarea .otherquotearea .word{ background-color: #ffffff; width: fit-cotent; min-width: 80px; max-width: 300px; min-height: 35px; float: left; padding: 1% 2% 1% 2%; text-align: left;
	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
	box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.125);
    border-radius:4px;
	-webkit-border-radius:4px; 
	}
	.content.all.discussedit .chat .chatarea .otherquotearea .word img{ width: auto; max-width: 100%; margin-top: 8px; padding: 0% 0% 2% 0%; }
	.content.all.discussedit .chat .chatarea .otherquotearea .icon{ float: left;}
	.content.all.discussedit .chat .chatarea .otherquotearea .icon img{ width: 30px;}


	.content.all.discussedit .discussform{ padding: 2%; background-color: #cccccc; margin-top: 0%; }


	.content.all.discussedit .discussbutton{ padding: 4%; background-color: #ffffff; margin-top: 0%; text-align: center;  }
	.content.all .discussbutton button{ width: 32%; max-width: 160px; height: 38px;}

	.content.all.discussedit .footer{ margin-top: 0%;}

	.tableform{ width: 100%; }
	.tableform .head{ background-color: #ececec; }
	.tableform td{ padding: 5px; }

	
	/*Admin*/







	.footer{ width: 100%; background-color: #5d5d5d; padding: 2.5%; margin-top: 3%;}




	.modal .btn{ width: 70px;}



	.panel-danger{border-color:#a60000}
	.panel-danger>.panel-heading{color:#fff;background-color:#a60000;border-color:#a60000}
	.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}
	.panel-danger>.panel-heading .badge{color:#fff;background-color:#a60000}
	.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#a60000}
	.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}


	.pagearea{ text-align: center; }
	.pagearea .page{
		display: inline-block; color:#fff; background-color: #bcbcbc; padding: 2px 4px; min-width: 25px;
		transition: background-color 0.5s linear; /*animates for 1 second*/
		-moz-transition: background-color 0.5s linear; /*For Firefox < 16.0*/
		-webkit-transition: background-color 0.5s linear; /*For WebKit (Chrome, Safari)*/
	}
	.pagearea .page:hover,.pagearea .page.active{ color:#fff; background-color: #2741aa;  }


	
@media screen and (max-width: 1200px) {	
	.content.all .reviewarea .body .table-row .col1 img{ width: 70%;}
	.content.all .historyarea .body .table-row .col1 img{ width: 70%;}
	
	.content.all .discussarea .body .table-row .col1 img{ width: 70%;}
	
	.content.all .discussarea2 .body .table-row .col1 img{ width: 70%;}
	
	.content.all .discusseditarea .body .table-row .col1 img{ width: 70%;}
}

@media screen and (max-width: 1023px) {
	.content.all .header .logo{ float: left; width: 110px; }
	.content.all .header .websitename{ float: left; margin-top: 6px;}
	.content.all .header .websitename .th{ display: block; font-size: 1.6em;}
	.content.all .header .websitename .en{ display: block; font-size: 1.2em;}
	
	.content.all .reviewarea .body .table-row .col1 img{ width: 80%;}
	
	.content.all .historyarea .body .table-row .col1 img{ width: 80%;}
	
	
	
	.content.all .useradminarea .body .col1{ width: 25%; float: left; }
	.content.all .useradminarea .body .col2{ width: 25%; float: left; }
	.content.all .useradminarea .body .col3{ width: 25%; float: left; }
	.content.all .useradminarea .body .col4{ width: 13%; float: left; text-align: center; }
	.content.all .useradminarea .body .col5{ width: 6%; float: left; text-align: center; }
	.content.all .useradminarea .body .col6{ width: 6%; float: left; text-align: center;}



	.content.all .vocabarea .body .col1{ width: 4%; float: left; }
	.content.all .vocabarea .body .col2{ width: 20%; float: left; }
	.content.all .vocabarea .body .col3{ width: 65%; float: left; }
	.content.all .vocabarea .body .col31{ width: 10%; float: left; }
	.content.all .vocabarea .body .col32{ width: 55%; float: left; }
	.content.all .vocabarea .body .col4{ width: 5%; float: left; text-align: center; }
	.content.all .vocabarea .body .col5{ width: 5%; float: left; text-align: center; }
	
	.content.all .discussarea .body .table-row .col1 img{ width: 80%;}
	
	.content.all .discussarea2 .body .table-row .col1 img{ width: 80%;}
	
	.content.all .discusseditarea .body .table-row .col1 img{ width: 80%;}
}

@media screen and (max-width: 767px) {
	.content.login .header .logo{ width: 110px;}
	
	.content.all .header{ background-image: url(/resources/rtafTemplate/images/template/bg_head.jpg); background-position: top center; background-repeat: no-repeat; padding: 1.5%;}/*chai*/
	.content.all .header .logo{ float: left; width: 70px; }
	.content.all .header .websitename{ float: left; margin-top: 0px;}
	.content.all .header .websitename .th{ display: block; font-size: 1.4em;}
	.content.all .header .websitename .en{ display: block; font-size: 1.0em;}

	.content.all #menuarea{ display: none; }
	
	.content.all #overlay{ display: block; }
	.content.all #linemenu{ float: right; display: inline-block;}
	.content.all #menuarea-mobile{ display: block; }
	.content.all .menuarea-mobile{
		float: none;
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 9999;
		top: 0;
		right: 0;
		background-color: #111;
		overflow-x: hidden;
		transition: 0.3s;
		padding-top: 60px;
	}
	.content.all .menuarea-mobile a{ display: block; margin-top: 3%; margin-left: 0%; margin-right: 25px;  }
	.content.all .menuarea-mobile .username{ margin-top: 3%; font-size: 1.3em; margin-right: 25px;  }
	.content.all .menuarea-mobile .username .avatar{ width: 45px; margin-right: 8px; }
	.content.all #closebtn{ display: block; }


	.content.all .searcharea{ width: 100%; background-color: #d2ecfb; padding: 3% 0%; }
	.content.all .searcharea .searchobj,.content.all .searcharea .searchhistory{ width: 350px; margin: auto;}
	.content.all .searcharea .form-control{
	  display: inline-block;
	  height: 45px;
	  padding: 6px 12px;
	  font-size: 1.4em;
	  width: 60%;
	}
	.content.all .searcharea .btn{
	  position: absolute;
	  height: 45px;
	  font-size: 1.4em;
	  width: 40%;
	  border-top-right-radius: 4px !important;
	  border-bottom-right-radius: 4px !important;
	}
	.content.all .searcharea .searchhistory{ margin-top: 2px; }
	.content.all .searcharea .searchhistory a{ margin: 0px 3px; }
	
	
	
	.content.all .resultarea .result .moredetail img{ width: 100%; margin-bottom: 5%; }
	.content.all .manageEnglishArea .result .moredetail img{ width: 100%; margin-bottom: 5%; }

	.content.all .buttonarea .btn{ width: 120px; height: 40px; }
	.content.all .buttonarea img{ width: 23px; }
	
	.content.all .reviewarea .body .table-head .col1{ width: 1%; float: left; }
	.content.all .reviewarea .body .table-head .col2{ width: auto; float: left; }
	.content.all .reviewarea .body .table-head .col3{ width: auto; float: left; }
	.content.all .reviewarea .body .table-row .col1{ width: 0%; float: left; }
	.content.all .reviewarea .body .table-row .col2{ width: 100%; float: left; }
	.content.all .reviewarea .body .table-row .col3{ width: 100%; float: left; }
	.content.all .reviewarea .body .table-row .col1 img{ display: none;}
	
	.content.all .historyarea .body .table-head .col1{ width: 1%; float: left; }
	.content.all .historyarea .body .table-head .col2{ width: auto; float: left; }
	.content.all .historyarea .body .table-head .col3{ width: auto; float: left; }
	.content.all .historyarea .body .table-row .col1{ width: 0%; float: left; }
	.content.all .historyarea .body .table-row .col2{ width: 100%; float: left; }
	.content.all .historyarea .body .table-row .col3{ width: 100%; float: left; }
	.content.all .historyarea .body .table-row .col1 img{ display: none;}
	
	.content.all .useradminarea .body .table-head .col1{ width: 69%; float: left; }
	.content.all .useradminarea .body .table-head .col2{ display:none; width: 0%; float: left; }
	.content.all .useradminarea .body .table-head .col3{ display:none; width: 0%; float: left; }
	.content.all .useradminarea .body .table-head .col4{ width: 15%; float: left; text-align: center; }
	.content.all .useradminarea .body .table-head .col5{ width: 8%; float: left; text-align: center; }
	.content.all .useradminarea .body .table-head .col6{ width: 8%; float: left; text-align: center;}
	
	.content.all .useradminarea .body .table-row .col1{ width: 69%; float: left; }
	.content.all .useradminarea .body .table-row .col1 span{ width: 100%; }
	.content.all .useradminarea .body .table-row .col2{ display:none; width: 0%; float: left; }
	.content.all .useradminarea .body .table-row .col3{ display:none; width: 0%; float: left; }
	.content.all .useradminarea .body .table-row .col4{ width: 15%; float: left; text-align: center; }
	.content.all .useradminarea .body .table-row .col5{ width: 8%; float: left; text-align: center; }
	.content.all .useradminarea .body .table-row .col6{ width: 8%; float: left; text-align: center;}

	.content.all .useradminarea .body .table-row button{ margin-top: -0px; margin-bottom: -0px;}



	.content.all .vocabarea .body .col1{ width: 0%; float: left; }
	.content.all .vocabarea .body .col2{ width: 87%; float: left; }
	.content.all .vocabarea .body .table-row .col2 span{ width: 100%; }
	.content.all .vocabarea .body .col3{ display: none; width: 0%; float: left; }
	.content.all .vocabarea .body .col31{ display: none; width: 0%; float: left; }
	.content.all .vocabarea .body .col32{ display: none; width: 0%; float: left; }
	.content.all .vocabarea .body .col4{ width: 6%; float: left; text-align: center; }
	.content.all .vocabarea .body .col5{ width: 6%; float: left; text-align: center; }



	.content.all .checkreviewarea .body .col1{ width: 8%; float: left; }
	.content.all .checkreviewarea .body .col2{ width: 72%; float: left; }
	.content.all .checkreviewarea .body .table-row .col2 span{ display: block; width: 100%; }
	.content.all .checkreviewarea .body .col3{ display: none; width: 0%; float: left; }
	.content.all .checkreviewarea .body .col4{ width: 15%; float: left; text-align: center; }



	.content.all .discussarea .body .col1{ display: none; width: 0%; float: left; }
	.content.all .discussarea .body .col2{ width: 95%; float: left; }
	.content.all .discussarea .body .table-row .col2 span{ display: block; width: 100%; }
	.content.all .discussarea .body .col3{ display: none; width: 0%; float: left; }



	.content.all .discussarea2 .body .col1{ display: none; width: 0%; float: left; }
	.content.all .discussarea2 .body .col2{ width: 95%; float: left; }
	.content.all .discussarea2 .body .table-row .col2 span{ display: block; width: 100%; }
	.content.all .discussarea2 .body .col3{ display: none; width: 0%; float: left; }



	.content.all .discusseditarea .body .col1{ display: none; width: 0%; float: left; }
	.content.all .discusseditarea .body .col2{ width: 100%; float: left; }
	.content.all .discusseditarea .body .table-row .col2 span{ display: block; width: 100%; }
}

@media print{
	.non-print{ display: none !important; }
}




.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  will-change: opacity, transform;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  -ms-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  pointer-events: none;
}
.waves-effect.waves-light .waves-ripple {
  background-color: rgba(255, 255, 255, 0.45);
}
.waves-effect.waves-red .waves-ripple {
  background-color: rgba(244, 67, 54, 0.7);
}
.waves-effect.waves-yellow .waves-ripple {
  background-color: rgba(255, 235, 59, 0.7);
}
.waves-effect.waves-orange .waves-ripple {
  background-color: rgba(255, 152, 0, 0.7);
}
.waves-effect.waves-purple .waves-ripple {
  background-color: rgba(156, 39, 176, 0.7);
}
.waves-effect.waves-green .waves-ripple {
  background-color: rgba(76, 175, 80, 0.7);
}
.waves-effect.waves-teal .waves-ripple {
  background-color: rgba(0, 150, 136, 0.7);
}
.waves-notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}
.waves-circle {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  -webkit-mask-image: none;
}
.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom;
}
.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}
.waves-block {
  display: block;
}





/*เปลี่ยนเป็นสีน้ำเงิน*/
.btn-default,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open > .dropdown-toggle.btn-default {
  background-color: #2741aa !important;
  border: 1px solid transparent !important;
  color: #fff;
}
/*เปลี่ยนเป็นสีน้ำเงิน*/

.btn-blue,
.btn-blue:active,
.btn-blue:focus,
.btn-blue:hover,
.btn-blue.active,
.btn-blue.focus,
.btn-blue:active,
.btn-blue:focus,
.btn-blue:hover,
.open > .dropdown-toggle.btn-blue {
  background-color: #84bcea !important;
  border: 1px solid transparent !important;
  color: #fff;
}


.btn-danger,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.btn-danger.active,
.btn-danger.focus,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.open > .dropdown-toggle.btn-danger {
  background-color: #a60000 !important;
  border: 1px solid transparent !important;
  color: #fff;
}


.btn-white,
.btn-white:active,
.btn-white:focus,
.btn-white:hover,
.btn-white.active,
.btn-white.focus,
.btn-white:active,
.btn-white:focus,
.btn-white:hover,
.open > .dropdown-toggle.btn-white {
  background-color: #fff !important;
  border: 1px solid #bcbcbc !important;
  color: #999999;
}



.btn-online,
.btn-online:active,
.btn-online:focus,
.btn-online:hover,
.btn-online.active,
.btn-online.focus,
.btn-online:active,
.btn-online:focus,
.btn-online:hover,
.open > .dropdown-toggle.btn-online {
  background-color: #01cc01 !important;
  border: 0px solid transparent !important;
  color: #fff;
}



.btn-offline,
.btn-offline:active,
.btn-offline:focus,
.btn-offline:hover,
.btn-offline.active,
.btn-offline.focus,
.btn-offline:active,
.btn-offline:focus,
.btn-offline:hover,
.open > .dropdown-toggle.btn-offline {
  background-color: #cc0001 !important;
  border: 0px solid transparent !important;
  color: #fff;
}



.btn-grey,
.btn-grey:focus,
.btn-grey:hover,
.btn-grey.focus,
.btn-grey:focus,
.btn-grey:hover,
.open > .dropdown-toggle.btn-grey {
  background-color: #fff !important;
  border: 1px solid #cccccc !important;
  color: #cccccc;
}
.btn-grey.active,.btn-grey.active:hover {
  background-color: #fff !important;
  border: 1px solid #85bbe9 !important;
  color: #85bbe9;
}
.btn.active{
	-webkit-box-shadow:inset 0px 0px 0px rgba(0,0,0,.125);box-shadow:inset 0px 0px 0px rgba(0,0,0,.125)
}



.customSelect{ 
	display:block;
	width:100%;
	height: 37px;
	padding:6px 12px;
	font-size:14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image:none;
	border:1px solid rgba(204,204,204,0.5);
    border-radius:4px;
	-webkit-border-radius:4px; 
	
	 -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

	-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s
} 
.customSelect:focus{
	border:1px solid rgba(0,0,0,0.3);
}

/*-------------manageEnglishPageTranslate------------------*/	
.content.all .manageEnglishArea{ }
.content.all .manageEnglishArea .keyword{ margin-top: 3%; }
.content.all .manageEnglishArea .keyword .sound{ width: 30px; margin-left: 1%; }
.content.all .manageEnglishArea .result{ margin-top: 1%; margin-bottom: 2%; }
.content.all .manageEnglishArea .result .detailarea{ margin: /*2% 5% chai*/2% 2%; }
.content.all .manageEnglishArea .result .moredetail{ margin-bottom: 0%; display: none;}
.content.all .manageEnglishArea .result .moredetail img{ width: 100%; }
.content.all .manageEnglishArea .result .moredetail .gallery{ margin-bottom: 3%; }
.content.all .manageEnglishArea .result .moredetail .vdo{ margin-bottom: 3%; }
.content.all .manageEnglishArea .body .colleft{ margin-bottom: 2%;}
.content.all .manageEnglishArea .body .colright{ margin-bottom: 2%;}