/*
* @website : Thai ESCO
* @update  : 21-April-2013
* @author  : khunhok@gmail.com
* @tel     : 089-770-0792
*/

@charset "UTF-8";

img99 {
-webkit-filter: grayscale(100%); 
filter: grayscale(100%);
}
html99 {
-webkit-filter: grayscale(100%);
}

img999 {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}
html999 {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}

* { margin: 0px; padding: 0px; }
html { border: 0px; overflow: -moz-scrollbars-vertical; overflow-x: auto; -ms-overflow-y : scroll; }
html, body { width: 100%; height: 100%;  }
body, td, th, input, textarea, select { font-family: "Tahoma", "Verdana", "MS Sans Serif" , " Arial", "Helvetica" , "sans-serif" , "CordiaUPC" , "BrowalliaUPC" , "AngsanaUPC"; line-height:18px; font-size: 14px; color: #4a4a4a; }
body { background: #fff; padding: 0px; margin: 0px; }
.loginsend {margin:0px 20px 20px; float:right}
.keyword {background: none; color: #343434; font-size: 13px; border: none;}
.chkChoice input { padding-right: 1px;}
.chkChoice label { padding-left: 4px;}
.chkChoice td {padding-left: 1px; }
.xColumn {
	   font-weight:bold; font-size:12px; text-align:center; color:White
}
.solidbox { width: 210px; height: 26px; padding: 0px; margin: 0px 0px 0px; background: #49841A; border: 1px solid #a1cd7c; color: #ffffff; line-height: 26px;cursor:pointer;              
                    display: inline-block;
                    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
                    *display: inline;
                    font: 13px/100% Arial, Helvetica, sans-serif;
                    vertical-align: baseline;
                    margin: 0 2px;
                    outline: none;     
                     text-shadow: 0 1px 1px rgba(0,0,0,.3);
                    -webkit-border-radius: .5em; 
                    -moz-border-radius: .5em;
                    border-radius: .5em;
                    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
                    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
                    box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cursor {cursor:pointer;}
.searchpadd {padding: 5px;}
/* ------------------REGULAR LINK------------------ */
a { font-family: "Tahoma", "Verdana", "MS Sans Serif" , " Arial", "Helvetica" , "sans-serif" , "CordiaUPC" , "BrowalliaUPC" , "AngsanaUPC"; text-decoration: none; }
a:link { color: #000000; }
a:visited { color: #000000; }
a:active { color: #000000; }
a:hover { color: #391800; }

#language {
	width: 360px;
	height: auto;
	padding: 0px;
	float: right;
	display: block;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

/* ------------------SPECIAL LINK------------------ */
.linkdarkgray:link { color: #7d7d7d; }
.linkdarkgray:visited { color: #7d7d7d; }
.linkdarkgray:active { color: #7d7d7d; }
.linkdarkgray:hover { color: #391800; }

.linkdarkbrown:link { color: #4a1f00; }
.linkdarkgray:visited { color: #4a1f00; }
.linkdarkgray:active { color: #4a1f00; }
.linkdarkgray:hover { color: #d23900; }

.linkwhite:link { color: #ffffff; }
.linkwhite:visited { color: #ffffff; }
.linkwhite:active { color: #ffffff; }
.linkwhite:hover { color: #000000; }

SPAN.currpage {
	background-color: #75B344;
	border: 1px solid silver;
	padding: 0px 5px;
	color: #FFFFFF;
}
.page_order a {
	 margin:0; padding:0px 5px; color:#000000;border: 1px solid silver;
	}
.page_order a:hover {
	background-color:#75B344; color:#ffffff;
	}
.page_order a.active { background-color:#eae5e2; color:#666; font-weight:bold; cursor:default; }

/* ------------------PHOTO------------------ */
img { border: 0px; }
.png { behavior: url('../styles/iepngfix.htc'); }


/* ------------------TABLE, FORM------------------ */
form { margin: 0px; padding: 0px; }
input, textarea, select { padding: 0px; margin: 0px; color: #000000; }
textarea { overflow: auto; }
select option { padding-left: 15px; }
p { margin: 0 0 1.12em 0; }
div.clear { clear: both; }


/* ------------------FONT SIZE------------------ */
@font-face {
	font-family: 'Conv_Supermarket';
	src: url('../fonts/Supermarket.eot')  /* EOT file for IE */;
	src: local('☺'), url('../fonts/Supermarket.woff') format('woff'), url('../fonts/Supermarket.ttf')/* TTF file for CSS3 browsers */ format('truetype'), url('../fonts/Supermarket.svg') format('svg');
	font-weight: normal ;
	font-style: normal;
}

@font-face {
	font-family: 'Conv_Kunlasatri';
	src: url('../fonts/Kunlasatri.eot')  /* EOT file for IE */;
	src: local('☺'), url('../fonts/Kunlasatri.woff') format('woff'), url('../fonts/Kunlasatri.ttf')/* TTF file for CSS3 browsers */ format('truetype'), url('../fonts/Kunlasatri.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Conv_Circular';
	src: url('Circular.eot');
	src: local('☺'), url('Circular.woff') format('woff'), url('Circular.ttf') format('truetype'), url('Circular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Conv_LilyUPC';
	src: url('LilyUPC.eot');
	src: local('☺'), url('LilyUPC.woff') format('woff'), url('LilyUPC.ttf') format('truetype'), url('LilyUPC.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Conv_thaisanslite';
	src: url('thaisanslite.eot');
	src: local('☺'), url('thaisanslite.woff') format('woff'), url('thaisanslite.ttf') format('truetype'), url('thaisanslite.svg') format('svg');
	font-weight: lighter;
	font-style: normal;
}

.sizeSSS { font-size: 9px; }
.sizeSS { font-size: 10px; }
.sizeS { font-size: 11px; }
.sizeM { ont-size: 12px; }
.sizeL { font-size: 14px; }
.sizeLL { font-size: 26px; }
.sizeLLL { font-size: 25px;}
.sizeBanner { font-size: 24px; display:block; margin-bottom:12px; margin-top:5px; }

/* ------------------ETC.------------------ */
.textwhite { color: #ffffff; }
.textblack { color: #000000; }
.textlightgray { color: #b2b1b1; }
.textdarkgray { color: #343434; }
.textorange { color: #ff9e14; }
.textyellow { color: #ffe158; }
.textgreen { color: #8be842; }

.bgcolordrakbrown { background: #8d440f; }
.bgcolorbrown { background: #d37c00; }
.bgcolordrakgreen { background: #49841a; }
.bgcolorgreen { background: #C9E2B4; }
.bgcolororange { background: #d34f00; }
.bgcolorgray { background: #8a8885; }
.bgcoloryellow { background: #ebc92a; }
.bgcolorwhite { background: #ffffff; }

.alignleft { width: auto; height: auto; float: left; text-align: left; }
.aligncenter{
	width: 200px;
	height: auto;
	float: none;
	text-align: center;
}
.alignright { width: auto; height: auto; float: right; text-align: right; }


/* ------------------WEB RANGE------------------ */
#rangefullwidth { width: 100%; height: auto; margin: 0px; padding: 0px; background: url(../images/bg_main02.jpg) top center no-repeat;  overflow: visible; position: relative; display: table;  }
.rangefullwidth { width: 100%; height: 1500px; margin: 0px; padding: 0px; overflow: visible; position: relative; display: block;  }
#range1280 { width: auto !important; min-width: 250px; max-width: 1280px; height: auto; margin: 0px auto; padding: 0px;  overflow: visible; position: relative; top: 0px; left: auto; display: table;  }
#range1280_block { width: auto !important; min-width: 250px; max-width: 1280px; height: auto; margin: 0px auto; padding: 0px;  overflow: visible; position: relative; top: 0px; left: auto; display: block;  }
#range960px { width: 960px; height: auto; margin: 0px auto; padding: 0px;  overflow: visible; position: relative; top: 0px; left: auto; display: table;  }


/* ------------------HEADER AREA------------------ */
.header { width: 960px; height: auto; margin: 0px auto; padding: 0px;  overflow: visible; position: relative; top: 0px; left: auto; display: block;  }
.header h1{ width: 500px; height: 73px; margin: 15px 0px 0px 35px; padding: 0px; background: url(../images/logo1.jpg) top center no-repeat; text-indent: -999em !important; display: block; float: left; }

#search { width: 217px; height: 45px; margin: 0px; padding: 10px 10px 10px 30px; line-height: 27px; background: url(../images/bg_search_gray01.png) no-repeat top left; float: right; position: absolute; top: 9px; right: 0px; }
#slideshow { width: 710px; height: 376px; margin: 0px; padding: 0px; position: absolute; top: 69px; left: 250px; float: left; }
#slideshow #mask { width: 710px; height:350px; margin: 0px; padding: 0px; float: left; position: absolute; top: 0px; left: 0px;}
#slideshow #photo { width: 710px; height:350px; margin: 0px; padding: 0px; float: left; position: absolute; top: 0px; left: 0px;}
#slideshow #photo ul { list-style-type: none; padding: 0px; margin: 0px; }
#slideshow #photo ul li {}
#slideshow #page { width: auto; height:25px; margin: 0px; padding: 0px; float: right; position: absolute; top: 351px; right: 0px;}
#slideshow #page ul { list-style-type: none; padding: 0px; margin: 0px; float: left; }
#slideshow #page ul li { width: 25px; height: 25px; margin: 0px 0px 0px 1px; padding: 0px 0px 0px 10px; text-align: center; background: url(../images/ph_pagenumber_orange01.png) no-repeat center; float: left; }
#slideshow #page ul li a { width: 25px; height: 30px; text-align: center; display: block;}
#slideshow #page ul li a:hover { width: 25px; height: 25px; text-align: center; display: block;}

/* ------------------NAVIGATOR AREA------------------ */
.nav { width: 960px; height: auto; margin: 0px auto; padding: 0px;  overflow: visible; position: relative; top: 0px; left: auto; display: block;  }

.nav#menu_bottom ul { list-style-type: none; padding: 0px; margin: 0px; }
.nav#menu_bottom ul li { width: 199px; height: auto; margin: 0px; padding: 0px 18px; border-left: solid 1px #c6c6c6; float: left; }
.nav#menu_bottom ul li h2 { font-family:"AngsanaUPC"; font-weight: bold; font-size: 18px; }
.nav#menu_bottom ul li a { line-height: 22px; font-size: 13px; font-weight: lighter; }


.nav#menu_left ul { height: 465px; height:405px; list-style-type: none; padding: 0px; margin: 0px; background:url(../images/bg_menuleft_orange02.png) repeat-y left; overflow:hidden; }
.nav#menu_left ul li { width: 270px; height: auto; margin: 0px; padding: 0px;}
.nav#menu_left ul li a { width: 250px; height: 26px; font-family: 'arial'; font-weight:lighter; line-height: 26px; font-size: 16px; text-indent: 20px; border-bottom: solid 1px #e16233; display: block; }
.nav#menu_left ul li a:hover { width: 250px; height: 26px; font-family: 'arial'; font-size: 16px; display: block; background: #ffbb29; }



/* ------------------FOOTER AREA------------------ */
.footer { width: 750px; height: auto; margin: 0px auto; padding: 0px; line-height:16px;  overflow: visible; position: relative; top: 0px; left: auto; display: block;  }
.footer h3 { font-weight: bold; margin: 0px 0px 5px}


/* ------------------HOMEPAGE AREA------------------ */
#homepagelayout { width: 960px; height: auto; margin: 35px 0px 0px; padding: 0px; background: url(../images/bg_floor_column01_green02.gif) repeat-y left; float: left; display: table; }
#homepagelayout .topic { width: 100%; height: 35px; margin: 0px; padding: 0px; font-family:  "AngsanaUPC"; font-size: 22px; font-weight:lighter; line-height: 35px; text-indent: 20px; float: left; }
#homepagelayout .topic2 { height: 40px; margin: 0px; padding: 0px; font-family: "AngsanaUPC"; font-size: 26px; font-weight:bold; line-height: 40px; text-indent: 26px; float: left; }

#homepagelayout #column01 { width: 250px; height: auto; margin: 0px 20px 0px 0px; padding: 35px 0px 20px; float: left; display: table; }
#homepagelayout #column01 ul { list-style-type: none; padding: 0px; margin: 0px; }
#homepagelayout #column01 ul li { width: 250px; height: auto; margin: 0px; padding: 0px; float: left; }
#homepagelayout #column01 .solidlist { width: 210px; height: 27px; padding: 0pxx; margin: 0px 20px 5px; background: #a1cd7c; border: 1px solid #a1cd7c; color: #3d760f; line-height: 27px; }
#homepagelayout #column01 .solidbox { width: 180px; height: 27px; padding: 0pxx; margin: 0px 0px 5px; background: #a1cd7c; border: 1px solid #a1cd7c; color: #3d760f; line-height: 27px; }
#homepagelayout #column01 .outline { width: 210px; height: 27px; padding: 0px; margin: 0px 20px 5px; background: #77b843; border: 1px solid #a1cd7c; color: #d4ffb1; line-height: 27px;  }
#homepagelayout #column01 .button { width:90px; height:25px; padding-right:20px; margin:0px 20px; color:#fff; line-height:25px; text-align:center; font-weight:bold; }
#homepagelayout #column01 h2 { font-family: "AngsanaUPC"; font-weight:lighter; font-size:18px;}

#homepagelayout #column02 {
	width: 690px;
	height: auto;
	padding: 0px;
	float: left;
	display: inline-block;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}
#homepagelayout #column02 h1 {
	margin: 10px 0px 0px;
	font-family:"AngsanaUPC";
	font-size: 37px;
	color: #000;
}
#homepagelayout #column02 hr { margin: 0px 0px 10px; }
#homepagelayout #column02 #detail { width: 650px; float: right;}
#homepagelayout #column02 #equalcolumn { width: 225px; height: auto; margin: 0px 7px 0px 0px; padding: 0px; float: left; display: inline-block; }
#homepagelayout #column02 #equalcolumn ul { list-style-type: none; float:left;}
#homepagelayout #column02 #equalcolumn ul li { width: 225px; height: auto; margin: 0px; padding: 0px; }
#homepagelayout #column02 #equalcolumn ul li.paddingl20r20 { width: 185px; padding: 7px 20px 8px; background: url(../images/li_horizontal_back_transaparent20.png) repeat-x bottom; }
#homepagelayout #column02 #equalcolumn ul li.paddingl20r20last { width: 185px; padding: 7px 20px 25px; }
#homepagelayout #column02 #equalcolumn ul li.photo { height:160px;}
#homepagelayout #column02 #equalcolumn .showallleft { width:90px; height:25px; padding:0px 20px 0px 0px; margin:0px 0px 0px 20px; background: url(../images/bg_showallleft_orange01.png) no-repeat; text-align:center; line-height:25px; font-weight:bold; position:relative; top:-6px; float:left;}
#homepagelayout #column02 #equalcolumn .showallleft a { color:#fff;}
#homepagelayout #column02 #equalcolumn .showallleft a:hover { color:#000;}
#homepagelayout #column02 #equalcolumn .showallright { width:90px; height:25px; padding:0px 0px 0px 20px; margin:0px 20px 0px 0px; background: url(../images/bg_showallright_orange01.png) no-repeat; text-align:center; line-height:25px; font-weight:bold; position:relative; top:-6px; right: 0px; float: right; }
#homepagelayout #column02 #equalcolumn .showallright a { color:#fff;}
#homepagelayout #column02 #equalcolumn .showallright a:hover { color:#000;}
#homepagelayout #column02 #equalcolumn .showallcenter { width:90px; height:25px; padding:0px; margin:0px auto; background: url(../images/bg_showallcenter_orange01.png) no-repeat; text-align:center; line-height:25px; font-weight:bold; position:relative; top:-6px; left:68px; float:left;}
#homepagelayout #column02 #equalcolumn .showallcenter a { color:#fff;}
#homepagelayout #column02 #equalcolumn .showallcenter a:hover { color:#000;}

#homepagelayout #column02 #bannerbottom { width: 690px; height: auto; margin: 20px 0px 0px; padding: 0px; }
#homepagelayout #column02 #bannerbottom .shadegray { background: url(../images/bg_banner_gray01.png) repeat-x top; }


/* ------------------ALL PAGE AREA------------------ */
#allpagelayout { width: 940px; min-height: 205px; height: auto !important; margin: 31px 15px 0px; padding: 0px; background: url(../images/bg_header_white01.gif) no-repeat top center #FFF;  float: left; z-index: 2}
/* ------------------BORDER------------------ */
.borderradius {
  border-radius: 5px 20px 5px 20px; /* top left, top right, bottom right, bottom left */
  background: #BADA55;
}
.bordergreen {
  border-radius: 10px;
  border: 3px solid #008000;
}
/* Gradient transparent - color - transparent */
		
.hrgradient {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}
/* Single-direction drop shadow */
		
.hrdropshadow {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}
.border-radius1 {
  border-radius: 5px;
  background: #F8E08F;
}
.border-radius2 {
  border-radius: 10px;
  border: 3px solid #F1930C;
}
.border-language {
  border: 1px solid #F1930C;
}
/*------------- button ---------------  */
.button1 {
   border-top: 1px solid #c0f78f;
   background: #5c8a36;
   background: -webkit-gradient(linear, left top, left bottom, from(#629c32), to(#5c8a36));
   background: -webkit-linear-gradient(top, #629c32, #5c8a36);
   background: -moz-linear-gradient(top, #629c32, #5c8a36);
   background: -ms-linear-gradient(top, #629c32, #5c8a36);
   background: -o-linear-gradient(top, #629c32, #5c8a36);
   padding: 10px 5px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 11px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button1:hover {
   border-top-color: #335c11;
   background: #335c11;
   color: #ccc;
   }
.button1:active {
   border-top-color: #335c11;
   background: #335c11;
   }
 .table1 {
	padding: 2px;
	padding-left:5px;
	background-color:#FDF7E1;
}

.table2 {
	padding: 2px;
	padding-left:5px;
	background-color:#DCECCE;
}