@charset "utf-8";
/* CSS Document */

@font-face {
font-family: 'supermarket';
src: url('../fonts/supermarket.eot');
src: url('../fonts/supermarket.eot?#iefix') format('embedded-opentype'),
url('../fonts/supermarket.woff') format('woff'),
url('../fonts/supermarket.ttf') format('truetype'),
url('../fonts/supermarket.svg') format('svg');
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}

@font-face {
font-family: 'WDBBangna';
src: url('../fonts/WDBBangna.eot');
src: url('../fonst/WDBBangna.eot?#iefix') format('embedded-opentype'),
url('../fonts/WDBBangna.woff') format('woff'),
url('../fonts/WDBBangna.ttf') format('truetype'),
url('../fonts/WDBBangna.svg') format('svg');
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}

@font-face {
font-family: 'THSarabunNew';
src: url('../fonts/THSarabunNew.eot');
src: url('../fonts/THSarabunNew.eot?#iefix') format('embedded-opentype'),
url('../fonts/THSarabunNew.woff') format('woff'),
url('../fonts/THSarabunNew.ttf') format('truetype'),
url('../fonts/THSarabunNew.svg') format('svg');
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}


@font-face {
font-family: 'Kanit-Regular';
src: url('../fonts/Kanit-Regular.eot');
src: url('../fonts/Kanit-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/Kanit-Regular.woff') format('woff'),
url('../fonts/Kanit-Regular.ttf') format('truetype'),
url('../fonts/Kanit-Regular.svg') format('svg');
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}



body{
	margin:0 0 0 0;
	font-family:Kanit-Regular;
	/*background-image:url(../images/bg2.jpg)*/
}



#topbanner {
	height:60px;
	line-height: 18pt;
	padding-left:10px;
	padding-top:10px;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#07213f+0,1361a5+100 */
background: #07213f; /* Old browsers */
background: -moz-linear-gradient(left,  #07213f 0%, #1361a5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #07213f 0%,#1361a5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #07213f 0%,#1361a5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07213f', endColorstr='#1361a5',GradientType=1 ); /* IE6-9 */

}

.logobox{
	float:left;
}

.navybox{
	width:582px;
	position:absolute;
	left: 77px;
	top: 20px;

}


a:link {
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: underline;
}


#topmenubar {
	margin-top:0;
	height:35px;
	width: 100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1361a5+0,07213f+100 */
background: #1361a5; /* Old browsers */
background: -moz-linear-gradient(left,  #1361a5 0%, #07213f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #1361a5 0%,#07213f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #1361a5 0%,#07213f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1361a5', endColorstr='#07213f',GradientType=1 ); /* IE6-9 */
	
}


#topmenubar ul li{
	height:23px;
	font-size:16px;
	display:inline;
	padding-right:10px;
	padding-left:10px;
}
#topmenubar ul li a {
    text-decoration: underline;
    padding:0px 0px 5px 0px;
	
    display:inline;
 /*   
 border-bottom:#DDD 1px solid;
 height: 10px; 
	background-image:url(../images/flag.png);
	
	*/
	vertical-align:top;
	font-size:16px;
	}
 
#topmenubar ul li a:visited {
    color:#999;
}
 
#topmenubar ul li a:hover, .ivetmenu ul li .current {
    color:#FFF;
	text-decoration: underline;
}

#topmenubar li a{
	font-size:16px;
	color:#999;
	display:block;
	font-weight:normal;
	line-height:16px;
	margin:0px;
	padding:0px 0px;
	text-align:center;
	text-decoration:none;
}


.contentbox{ 
	width:1200px;
	margin:auto auto;
	box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
	position:relative;
	top:-15px;
	z-index:5;
	background-color:#FFF;
	
	/*box-shadow: 0px 0px 10px 0px rgba(50,50,50,.4);
	
	font-family:thaisans_neueregular;
	font-size:25px; 
	color:#FFF; 
	border:1px #999 solid;*/
}

.textdetail{
	/*font-family:Kanit-Regular;*/
	font-family:THSarabunNew;
	font-size:22px;
	color:#666;
}

div.polaroid {
  width: 300px;
  height: 300px;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.19);
  /*box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.2), 5px 5px 5px 0px rgba(0, 0, 0, 0.19);*/
  text-align: center;
}

div.polaroid:hover{box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);}

div.polaroid a {text-decoration:none; }

div.container {
  color:#006;		
  padding: 2px;
}
.clear-all{clear:both; line-height:0; height:0; padding-bottom:0px}

.ex_table{background:#FFF}


.ex_table td{ 
	text-align:center;
	/*border:#CCC 1px solid; */
	border-bottom:#BBB 1px dashed;

}

.h_table{ 
	background-color:#06C;
	color:#FFF;
	text-align:center;
	border:none;
}
.h_table td{ border-top:#333 1px solid }

.f_table{ 
	background-color:#66CCFF;
	color:#000;
	text-align:center
}
.f_table td{ border-bottom:#333 1px solid }