@font-face {
    font-family: 'chulabhorn_r';
    src: url('public/chulabhornlikittext-regular.woff2') format('woff2'),
         url('public/chulabhornlikittext-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'chulabhorn_l';
    src: url('public/chulabhornlikittext-light.woff2') format('woff2'),
         url('public/chulabhornlikittext-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'chulabhorn_m';
    src: url('public/chulabhornlikittext-medium.woff2') format('woff2'),
         url('public/chulabhornlikittext-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'chulabhorn_b';
    src: url('public/chulabhornlikittext-bold.woff2') format('woff2'),
         url('public/chulabhornlikittext-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'cs_prajadregular';
    src: url('public/csprajad-webfont.woff2') format('woff2'),
         url('public/csprajad-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'supermarketregular';
    src: url('public/supermarket-webfont.woff2') format('woff2'),
         url('public/supermarket-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {margin: 0; padding: 0;}
body{font: 16px cs_prajadregular;
 background: #476fb8;}
header{width: 720;
	margin: auto;}
nav{width: 720; 
    margin: auto;
    clear:both;}
section{width: 720; 
	margin: auto;
	clear:both;}
footer{width: 720;
	margin: auto;
	clear:both;}

A:link {
    color: #0000ff; text-decoration: none;
}
A:visited {
    color: #0000ff; text-decoration: none;
}
A:hover {
    color: #ff0000; font-style: italic;
}
legend{
    font: 18px cs_prajadregular;
}
select{font: 14px cs_prajadregular;
}
input {font: 16px cs_prajadregular;
    border-right: #0099ff 1px solid; border-top: #0099ff 1px solid; background: #ffebd7; border-left: #0099ff 1px solid; color: #0000ff; border-bottom: #0099ff 1px solid; 
    border-radius: 5px; padding: 0px 3px;
}
textarea {font: 16px cs_prajadregular;
    border-right: #0099ff 1px solid; border-top: #0099ff 1px solid; background: #ffebd7; border-left: #0099ff 1px solid; color: #0000ff; border-bottom: #0099ff 1px solid;
}

#box360left{width: 360;
    float: left;}
#box360right{width: 360;
    float: right;}
#group360left{padding: 2px 2px;
	width: 356;
	background: white; 
	border-radius: 4px;
	float: left;}
#group360right{padding: 2px 2px;
    width: 356;
    background: white; 
    border-radius: 4px;
    float: right;}
#data100p{padding: 2px 2px;
	background:white;
	width: 100%;
	border-radius: 4px;
	float: left;}
#txtHead{font: 24px supermarketregular;
	color: white;}
#txtBox{padding: 2px 2px;
	float: left;}

.TextWrap{
	float: left;
	margin: 10px;
	border-radius: 5px;
}

.table {border:#000000 1px solid;background-color:#dddddd}
.td{border:#bbbbbb 1px solid; background-color:#ffffff}

.button {font: 14px cs_prajadregular;
	background:white;
	padding: 0px 3px;
	border-radius: 5px;
}
.button:hover {background-color: #ddd}
.button:active {
  background-color: #ff0;
  transform: translateY(4px);
}

.dropbtn {font: 16px cs_prajadregular;
  background-color: #4064a5;
  color: white;
  min-width: 68px;
  border: none;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 5px;
}
.dropdown-content a {
  color: black;
  padding: 5px 0px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #395993;}

.drpLanguage {
  position: relative;
  display: inline-block;
}
.drpLngContent {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 40px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 5px;
}
.drpLngContent a {
  color: black;
  padding: 5px 0px;
  text-decoration: none;
  display: block;
}
.btnLanguage {font: 16px cs_prajadregular;
  background-color: #444444;
  color: white;
  min-width: 30px;
  border: none;
  border-radius: 5px;
}
.drpLngContent a:hover {background-color: #ddd;}
.drpLanguage:hover .drpLngContent {display: block;}
.drpLanguage:hover .btnLanguage {background-color: #666666;}

@media only screen and (max-width: 720px) {
	header{width: 360;
	margin: auto;}
    nav{width: 360;
    margin: auto;}
	section{width: 360; 
	margin: auto;}
	footer{width: 360; 
	margin: auto;}
}