@media (max-width:767px) {
      .highlight-border{border:0px solid !important}
  }

@font-face {
  font-family: 'CSChatThai';
  src: url('CSChatThai.eot?#iefix') format('embedded-opentype'),  url('CSChatThai.woff') format('woff'), url('CSChatThai.ttf')  format('truetype'), url('CSChatThai.svg#CSChatThai') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CSChatThaiUI';
  src: url('CSChatThaiUI.eot?#iefix') format('embedded-opentype'),  url('CSChatThaiUI.woff') format('woff'), url('CSChatThaiUI.ttf')  format('truetype'), url('CSChatThaiUI.svg#CSChatThaiUI') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  color: #444444;
  font-family: 'CSChatThaiUI' !important;
  background: url("background2.jpg") no-repeat center 100% fixed;
  background-size: cover;
}

.highlight-border{border-right:2px solid;border-color:#d1ecf8;}

.table-nonfluid {
   width: auto !important;
}

.table-center
{
  margin: 0 auto !important;
  float: none !important;
}

.table-nomargin-bottom table {
	margin-bottom: 0px;
}

.nobordertop tr, .nobordertop td, .nobordertop th {
    border-top: none !important;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

.blockframe{
	background: rgba(255, 255, 255, 0.4)!important;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:5px;
}

.photoframe{
  border: 1px solid #ddd;
  padding: 7px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.smphotoframe{
  border: 1px solid #ddd;
  padding: 3px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

.topicframe{
	padding: 10px;
	background-color: #134379;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	font-family: 'Kanit', sans-serif;
	font-size: 16px;
	color: #fff; 
}

.highlight-topic{
	color: #1d4379;
	font-family: 'Kanit', sans-serif;
	font-size: 18px;
	border-bottom: 1px solid #1d4379;
}

.highlight-subtopic{
	color: #4abeec;
	text-decoration: underline;
	font-weight: bold;
	font-size: 14px;
}
a.highlight-subtopic:link { color: #4abeec; text-decoration: none}
a.highlight-subtopic:visited {  color: #4abeec; text-decoration: none}
a.highlight-subtopic:hover { color: red; text-decoration: underline}
a.highlight-subtopic:active { color: #4abeec; text-decoration: none}

.highlight-list{
	padding: 10px;
	border-bottom: 1px dotted #1d4379;
}


.column-topic{
	color: #1d4379;
	font-family: 'Kanit', sans-serif;
	font-size: 32px;
	border-bottom: 2px solid #1d4379;
}

.column-subtopic{
	color: #1d4379;
	font-family: 'Kanit', sans-serif;
	font-size: 22px;
	border-bottom: 2px solid #1d4379;
}

.column-parttopic{
	color: #1d4379;
	font-family: 'Kanit', sans-serif;
	font-size: 18px;
	border-bottom: 2px solid #1d4379;
}

.column-parttopic-noline{
	color: #1d4379;
	font-family: 'Kanit', sans-serif;
	font-size: 18px;
}

.column-blocktopic{
	font-family: 'Kanit', sans-serif;
	font-size: 18px;
}




.top5 { margin-top:0px; }
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top20 { margin-top:20px; }
.top30 { margin-top:30px; }
.top40 { margin-top:40px; }
.top50 { margin-top:50px; }
.top60 { margin-top:60px; }
.top70 { margin-top:70px; }
.top80 { margin-top:80px; }
.top90 { margin-top:90px; }
.top100 { margin-top:100px; }
.top150 { margin-top:150px; }

.bottom0 { margin-bottom:5px; }
.bottom5 { margin-bottom:5px; }
.bottom7 { margin-bottom:7px; }
.bottom10 { margin-bottom:10px; }
.bottom15 { margin-bottom:15px; }
.bottom17 { margin-bottom:17px; }
.bottom20 { margin-bottom:20px; }
.bottom30 { margin-bottom:30px; }
.bottom40 { margin-bottom:40px; }
.bottom50 { margin-bottom:50px; }
.bottom60 { margin-bottom:60px; }
.bottom70 { margin-bottom:70px; }
.bottom80 { margin-bottom:80px; }
.bottom90 { margin-bottom:90px; }
.bottom100 { margin-bottom:100px; }
.bottom150 { margin-bottom:150px; }

.left5 { margin-left:5px; }
.left7 { margin-left:7px; }
.left10 { margin-left:10px; }
.left15 { margin-left:15px; }
.left17 { margin-left:17px; }
.left20 { margin-left:20px; }
.left25 { margin-left:25px; }
.left30 { margin-left:30px; }
.left35 { margin-left:35px; }
.left40 { margin-left:40px; }
.left45 { margin-left:45px; }
.left50 { margin-left:50px; }
.left60 { margin-left:60px; }
.left70 { margin-left:70px; }
.left80 { margin-left:80px; }
.left90 { margin-left:90px; }
.left100 { margin-left:100px; }

.round5 {border-radius: 5px;}
.round10 {border-radius: 10px;}

.pointarea { cursor: pointer;}


.panel-transparent {
    background: none;
	border: none;	
 }

.panel-transparent .panel-body{
	background: rgba(255, 255, 255, 0.7)!important;
	padding-bottom:0;
}

.panel-noborder{
	border: none;
}

.panel-noborder .panel-body{
	padding-bottom:0;
}

.webtitle-text{
	color: #2e5787;
	font-family: 'Kanit', sans-serif;
	font-size: 24px;
}

.websupport-text{
	color: #2e5787;
	font-family: 'Kanit', sans-serif;
	font-size: 14px;
}

.book-text{
	color: #ec8f71;
	font-family: 'Kanit', sans-serif;
	font-size: 24px;
}

.footer-text{color:#fff;}
a.footer-text:link { color: #fff; text-decoration: none}
a.footer-text:visited {  color: #fff; text-decoration: none}
a.footer-text:hover { color: red; text-decoration: underline}
a.footer-text:active { color: #fff; text-decoration: none}

.navbar-default{
	font-family: 'Kanit', sans-serif;
	font-size: 16px;
	background-color:#2d66b1;
	border-color:#2d66b1;
	border-radius:0;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus{
	color:#fff;
}
.navbar-default .navbar-nav>li>a{
	color:#fff;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus{
	color:#92b0db;
	background-color:#2d66b1;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus{
	color:#fff;
	background-color:#92b0db;
}
.navbar-default .navbar-text{
	color:#fff;
}
.navbar-default .navbar-text:hover,
.navbar-default .navbar-text:focus{
	color:#92b0db;
}
.navbar-default .navbar-toggle{
	border-color:#92b0db;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
	background-color:#92b0db;
}

.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


.SmallText {font-size: 12px;}
.BlueText {color: blue}
.ErrorText {font-size: 12px;color: red}
.RedText {color: red}
.WhiteText {color: white}
A.WhiteText:link	{color: white; text-decoration: none } 
A.WhiteText:visited	{color: yellow; text-decoration: none} 
A.WhiteText:active	{color: yellow; text-decoration: none} 
A.WhiteText:hover	{color: yellow; text-decoration: underline}
.MediumText {font-size: 18px;}
.MiddleText {font-size: 16px;}
.BigText {font-size: 22px;}
.BigWhiteText {font-size: 22px; color: white;}
.BigGreyText {font-size: 22px; color: #666666;}
.GiantText font-size: 28px;}
.TitleText {font-size: 32px; color: black;}
.Counter {font-size: 16px; color: white; background-color: black}
.BoardText {color: black}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}


.img-coin{border-radius: 50%;}
.img-coin-block {
  position: relative;
  text-align: center;
}
.img-coin-text {
	font-family: 'Kanit', sans-serif;
	font-size: 20px;
	color: white;
	background-color: black;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.img-nocoin-text {
	font-family: 'Kanit', sans-serif;
	font-size: 20px;
}

#dhtmlgoodies_tooltip{
		background-color:#EEE;
		border:1px solid #000;
		position:absolute;
		display:none;
		z-index:20000;
		padding:2px;
		font-size:10pt;
		-moz-border-radius:6px;	/* Rounded edges in Firefox */
		font-family: "Tahoma", "MS Sans Serif", "Microsoft Sans Serif";
	}

	#dhtmlgoodies_tooltipShadow{
		position:absolute;
		background-color:#555;
		display:none;
		z-index:10000;
		opacity:0.7;
		filter:alpha(opacity=70);
		-khtml-opacity: 0.7;
		-moz-opacity: 0.7;
		-moz-border-radius:6px;	/* Rounded edges in Firefox */
	}


/* Tab Navigation */
.nav-tabs {
    margin: 0;
    padding: 0;
    border: 0;    
}
.nav-tabs > li > a {
    background: #DADADA;
    border-radius: 0;
    box-shadow: inset 0 -8px 7px -9px rgba(0,0,0,.4),-2px -2px 5px -2px rgba(0,0,0,.4);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    background: #F5F5F5;
    box-shadow: inset 0 0 0 0 rgba(0,0,0,.4),-2px -3px 5px -2px rgba(0,0,0,.4);
}

/* Tab Content */
.tab-pane {
    border-radius: 1px;
    padding: 10px;
}