/* CSS Document */
/* HTML 5 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
font-family:"Tahoma", Arial, Helvetica, sans-serif;
}
/* IE 7 */
*+html header{ position:relative; z-index:10; }
*+html header nav ul.menu li ul li a span{ font-size:65%!important; }
*+html header nav ul.menu li a{ font-family:Tahoma, Geneva, sans-serif; }
*+html section#middle.inside .navbar span{ font-family:Aril, Geneva, sans-serif; }
*+html section#middle.inside .navbar span *{ margin:-5px 0px 0px 0px; padding:0px; }
*+html section#middle #highlight .product img{ margin-bottom:-5px }
*+html section#middle #highlight .product a{ margin-bottom:5px }
*+html section#middle #highlight .product div h4{ margin:0px; padding:0px 0px 0px 0px; text-transform:uppercase; font-size:100%; }
*+html section#middle #highlight .product div span{ font-size:90%; padding-top:0px; display:block; }
*+html section#webbody.inside nav ul{ font-family:Aril, Geneva, sans-serif; }
/* MAIN */
body{ font-family:"Tahoma", Arial, Helvetica, sans-serif; font-size:9pt; margin:0px; padding:0px; color:#222222; }
body.bg_01{ background:url(../images/background/01.jpg) no-repeat center top #0d1232;}
body.bg_02{ background:url(../images/background/02.jpg) no-repeat center top #96979d;}
body.bg_03{ background:url(../images/background/03.jpg) no-repeat center top #d5ccc3;}
/* LINK */
a{ color:#555555; text-decoration:none; }
a:hover{ text-decoration:underline; }
a:visited{ text-decoration:none; }
.clear{ clear:both; }
.clearfix{ clear:both; }
img{ border:0px; }
/* TEXT */
.txt_red{ color:#FF0000!important; }
.txt_red_pink{ color:#b90046!important; }
.txt_sky{ color:#009df7!important; }
.txt_blue{ color:#000250!important; }
/* BOX LAYOUT */
.boxTop{ width:690px; height:13px; background:url(../images/box_top.png) no-repeat; clear:both; }
.boxContent{ width:690px; background:url(../images/box_content.png) repeat-y; }
.boxBottom{ width:690px; height:18px; background:url(../images/box_bottom.png) no-repeat; clear:both; margin-bottom:12px; }
/* FORM */
input[type="text"]{ font-size:100%; /*font-family:"CordiaUPC";*/ }
textarea{ font-size:100%; /*font-family:"CordiaUPC";*/ }
input[type="submit"]{ font-size:100%; /*font-family:"CordiaUPC";*/ }
/* SCREEN */
#container{ width:100%; margin:0 auto; padding:0px; }
#container header#header{ width:941px; margin:36px auto 0 auto; padding:55px 30px 0 30px; background:url(../images/bg_header.png) no-repeat top; position:relative; height:59px; }
section#middle{ background:url(../images/bg_content.png) repeat-y top; }
section#middle.home{ width:941px; margin:0 auto; padding:0px 30px 10px 30px; }
section#middle.inside{ width:991px; margin:0 auto; padding:0 5px; }
section#webbody{ width:941px; margin:0 auto; padding:0px 30px 10px 30px; background:url(../images/bg_content.png) repeat-y top; }
section.content_bottom{ width:941px; margin:0 auto; padding:0px 30px 10px 30px; background:url(../images/bg_content_bottom.png) no-repeat bottom; }
footer{ width:941px; margin:0 auto; }
footer .copyright{ font-size:110%; text-align:center; padding:5px 0px; }
/* HEADER */
header .logo{ float:left; margin:-41px 0 0 -3px; }
/* NAVIGATOR TOP */
header nav{ width:775px; height:31px; float:right; }
header nav ul.menu{ margin:0px; padding:5px 0px 0px 0px; position:relative; }
header nav ul.menu li{ list-style:none; float:left; display:block; height:31px; }
header nav.en ul.menu li a{ display:block; color:#2b2c5a; text-transform:uppercase; background:url(../images/bg_navtop.png) no-repeat; height:20px; padding:11px 0 0 0; text-align:center; }
header nav.th ul.menu li a{ display:block; color:#2b2c5a; text-transform:uppercase; background:url(../images/bg_navtop-th.png) no-repeat; height:20px; padding:11px 0 0 0; text-align:center; }
/* EN */
header nav.en ul.menu li a:hover{ text-decoration:none; }
header nav.en ul.menu li.about a{ width:80px; background-position:0 0; }
header nav.en ul.menu li.products a{ width:105px; background-position:-80px 0; }
header nav.en ul.menu li.ir a{ width:134px; background-position:-185px 0; }
header nav.en ul.menu li.csr a{ width:70px; background-position:-319px 0; }
header nav.en ul.menu li.news a{ width:118px; background-position:-389px 0; }
header nav.en ul.menu li.industry a{ width:112px; background-position:-507px 0; }
header nav.en ul.menu li.contact a{ width:86px; background-position:-619px 0; }
header nav.en ul.menu li.careers a{ width:64px; background-position:-705px 0; }
header nav.en ul.menu li.about a:hover{ width:80px; background-position:0 -31px; }
header nav.en ul.menu li.products a:hover{ width:105px; background-position:-80px -31px; }
header nav.en ul.menu li.ir a:hover{ width:134px; background-position:-185px -31px; }
header nav.en ul.menu li.csr a:hover{ width:70px; background-position:-319px -31px; }
header nav.en ul.menu li.news a:hover{ width:118px; background-position:-389px -31px; }
header nav.en ul.menu li.industry a:hover{ width:112px; background-position:-507px -31px; }
header nav.en ul.menu li.contact a:hover{ width:86px; background-position:-619px -31px; }
header nav.en ul.menu li.careers a:hover{ width:64px; background-position:-705px -31px; }
header nav.en ul.menu li.about a.active{ width:80px; background-position:0 -31px; }
header nav.en ul.menu li.products a.active{ width:105px; background-position:-80px -31px; }
header nav.en ul.menu li.ir a.active{ width:134px; background-position:-185px -31px; }
header nav.en ul.menu li.csr a.active{ width:70px; background-position:-319px -31px; }
header nav.en ul.menu li.news a.active{ width:118px; background-position:-389px -31px; }
header nav.en ul.menu li.industry a.active{ width:112px; background-position:-507px -31px; }
header nav.en ul.menu li.contact a.active{ width:86px; background-position:-619px -31px; }
header nav.en ul.menu li.careers a.active{ width:64px; background-position:-705px -31px; }
/* TH */
header nav.th ul.menu li a:hover{ text-decoration:none; }
header nav.th ul.menu li.about a{ width:114px; background-position:0 0; }
header nav.th ul.menu li.products a{ width:98px; background-position:-114px 0; }
header nav.th ul.menu li.ir a{ width:92px; background-position:-212px 0; }
header nav.th ul.menu li.csr a{ width:132px; background-position:-304px 0; }
header nav.th ul.menu li.industry a{ width:113px; background-position:-436px 0; }
header nav.th ul.menu li.news a{ width:93px; background-position:-549px 0; }
header nav.th ul.menu li.contact a{ width:62px; background-position:-642px 0; }
header nav.th ul.menu li.careers a{ width:66px; background-position:-704px 0; }
header nav.th ul.menu li.about a:hover{ width:114px; background-position:0 -31px; }
header nav.th ul.menu li.products a:hover{ width:98px; background-position:-114px -31px; }
header nav.th ul.menu li.ir a:hover{ width:92px; background-position:-212px -31px; }
header nav.th ul.menu li.csr a:hover{ width:132px; background-position:-304px -31px; }
header nav.th ul.menu li.industry a:hover{ width:113px; background-position:-436px -31px; }
header nav.th ul.menu li.news a:hover{ width:93px; background-position:-549px -31px; }
header nav.th ul.menu li.contact a:hover{ width:62px; background-position:-642px -31px; }
header nav.th ul.menu li.careers a:hover{ width:66px; background-position:-704px -31px; }
header nav.th ul.menu li.about a.active{ width:114px; background-position:0 -31px; }
header nav.th ul.menu li.products a.active{ width:98px; background-position:-114px -31px; }
header nav.th ul.menu li.ir a.active{ width:92px; background-position:-212px -31px; }
header nav.th ul.menu li.csr a.active{ width:132px; background-position:-304px -31px; }
header nav.th ul.menu li.industry a.active{ width:113px; background-position:-436px -31px; }
header nav.th ul.menu li.news a.active{ width:93px; background-position:-549px -31px; }
header nav.th ul.menu li.contact a.active{ width:62px; background-position:-642px -31px; }
header nav.th ul.menu li.careers a.active{ width:66px; background-position:-704px -31px; }
/* SUBMENU */
header nav.th ul.menu li ul{ display:none; font-size:140%; line-height:90%; }
header nav.th ul.menu li:hover ul{ display:block; clear:both; }
header nav.th ul.menu li ul{ position:absolute; width:768px; background:url(../images/menu/bg_submenu.jpg) no-repeat; margin:0px; padding:0px; height:143px; margin-top:-2px; left:0px; z-index:10; }
header nav.th ul.menu li ul li{ float:left; width:111px; border-right:1px solid #cdcdcd; height:110px; margin-top:7px; padding:20px 8px 0 8px; }
header nav.th ul.menu li ul li a{ background:none; padding:0px; margin:0px; color:#555555; width:111px; }
header nav.th ul.menu li ul li a img{ border:1px solid #d0d0d0; display:block; }
header nav.th ul.menu li ul li a span{ clear:both; float:left; width:111px; font-size:70%; padding-top:5px; text-align:left; }
header nav.th ul.menu li ul li.last { float:left; width:111px; padding:25px 0px 0 9px; border-right:0px solid #cdcdcd; }
header nav.en ul.menu li ul{ display:none; font-size:140%; line-height:90%; }
header nav.en ul.menu li:hover ul{ display:block; clear:both; }
header nav.en ul.menu li ul{ position:absolute; width:768px; background:url(../images/menu/bg_submenu.jpg) no-repeat; margin:0px; padding:0px; height:143px; margin-top:-2px; left:0px; z-index:10; }
header nav.en ul.menu li ul li{ float:left; width:111px; border-right:1px solid #cdcdcd; height:110px; margin-top:7px; padding:20px 8px 0 8px; }
header nav.en ul.menu li ul li a{ background:none; padding:0px; margin:0px; color:#555555; width:111px; }
header nav.en ul.menu li ul li a img{ border:1px solid #d0d0d0; display:block; }
header nav.en ul.menu li ul li a span{ clear:both; float:left; width:111px; font-size:70%; padding-top:5px; text-align:left; }
header nav.en ul.menu li ul li.last { float:left; width:111px; padding:25px 0px 0 9px; border-right:0px solid #cdcdcd; }
/* LANGUAGE */
header nav .language{ float:right; padding:3px 0px 0 0; font-size:110%; }
header nav .language a{ margin-left:5px; float:left;}
header nav .language a img{ padding-right:5px;}
header nav .language a:hover{ color:#000000; text-decoration:none; }
header nav .language a.fb{margin-left:5px; padding:2px 0 0 0;}
/* MIDDLE */
section#middle.inside .navbar{ width:961px; height:62px; padding:10px 0 0 30px; background-color:#000250; margin:0 auto; color:#ffffff; font-size:110%; }
section#middle.inside .navbar span{ padding:5px 0 0 0; display:block; font-family:'GenevaRegular'; font-size:180%; text-transform:uppercase; }
section#middle.home #banner{ float:left; width:570px; height:300px; padding:0px; margin:0; position:relative; border:1px solid #d1d1d1; border-right:0px; }
section#middle #banner img{ width:570px; overflow: auto; display:none; }
section#middle #banner a { border:0; display:block; }
section#middle #slideHome{ position:relative; width:100%; margin:0px; padding:0px; }
section#middle #slideHome img{ position:absolute; }
section#middle #textHome{ position:absolute; width:236px; height:260px; padding:40px 17px 0 17px; top:0px; right:0px; color:#ffffff; }
section#middle #textHome h1{ font-size:200%; margin:0px; padding:20px 0px 10px 0; }
section#middle #textHome p{ line-height:20px; padding:0px; margin:0px; font-weight:bold; }
section#middle #highlight{ float:left; width:370px; padding:0 0 0 0px; position:relative; }
section#middle #highlight .product{ float:left; width:182px; margin:0 0 0 1px; padding:0px; border:1px solid #d1d1d1; font-family:"Trebuchet MS"; }
section#middle #highlight .product img{ margin:0px; padding:0px; }
section#middle #highlight .product div{ position:relative; display:block; height:34px; padding:3px 0 0 5px; margin:0px; }
section#middle #highlight .product div a{ position:absolute; right:0px; bottom:-7px; color:#ffffff; font-size:230%; font-weight:bold; }
section#middle #highlight .product div a.link { position:static !important; color:#252D52 !important;}
section#middle #highlight .product div a:hover{ text-decoration:none; }
section#middle #highlight .product div h4{ margin:0px; padding:5px 0px 0px 0px; /*text-transform:uppercase;*/ font-size:100%; }
section#middle #highlight .product div span{ font-size:90%; padding-top:2px; display:block; }
section#middle #highlight .product div h4 span { font-size: 90%; float: right; margin-right: 20px;}
section#middle #highlight .product div .txt_white { color:#ffffff; }
section#middle #highlight .product div .txt_blue { color:#252d52; }
section#middle #highlight .product div .txt_gray { color:#585858; }
section#middle #highlight .inter { margin:1px 0px 1px 1px; }
section#middle #highlight .sriracha { margin:1px 0px 1px 1px;}
section#middle #highlight .mahachai div{ background:#000250; }
section#middle #highlight .bangkok div{ background:#c4131a; }
section#middle #highlight .inter div{ background:#d9d9d9; }
section#middle #highlight .sriracha div{ background:#bbbbbb; }
section#middle #highlight .suratthani div{ background:#3ea9e8; }
section#middle #highlight .feed div{ background:#c7de00; }
section#middle #highlight .mahachai div a:hover{ color:#5d61fa; }
section#middle #highlight .bangkok div a:hover{ color:#781015; }
section#middle #highlight .inter div a:hover{ color:#494949; }
section#middle #highlight .sriracha div a:hover{ color:#494949; }
section#middle #highlight .suratthani div a:hover{ color:#1e5474; }
section#middle #highlight .feed div a:hover{ color:#738003; }
/* LEFT MENU */
section#webbody.inside nav{ float:left; width:231px; padding:15px 0px; }
section#webbody.inside nav > ul{ margin:0px; padding:0px; list-style:none; font-family:'GenevaRegular'; }
section#webbody.inside nav > ul > li{ display:block; width:222px; font-size:120%; border-bottom:1px solid #c4cfd5; }
section#webbody.inside nav > ul > li > a{ display:block; width:212px; height:auto; padding:5px; color:#8d8d8d; margin:1px 0px; }
section#webbody.inside nav > ul > li > a:hover{ width:212px; text-decoration:none; background:url(../images/arr_menuleft.png) no-repeat right #000250; color:#ffffff; }
section#webbody.inside nav > ul li a.active{ background:url(../images/arr_menuleft.png) no-repeat right #000250; color:#ffffff; }
section#webbody.inside nav ul ul{ margin:0px; padding:0px; list-style:none; display:none; }
section#webbody.inside nav ul li.current ul{ display:block!important; }
section#webbody.inside nav ul ul li a{ display:block; padding:5px 0 3px 20px; width:202px; height:16px; color:#627b99;}
section#webbody.inside nav ul ul li a:hover{ color:#000250; background:url(../images/menu-L3.jpg) no-repeat right #c9daea; }
section#webbody.inside nav ul ul li a.active{ color:#000250; background:url(../images/menu-L3.jpg) no-repeat right #c9daea;}
/* CONTENT */
section#webbody.home #content{ width:100%; padding:15px 0px; }
section#webbody.inside #content{ float:right; width:690px; padding:20px 10px 15px 10px; line-height:20px; /*font-size:110%; */}
section#webbody.inside #content .titlepage{ clear:both; font-size:90%; padding:5px 0 8px 0px; color:#000250; }
/* FOOTER */
.link_footer{ width: 991px; margin: -5px auto 0; background: #fff; }
/* LIGHTBOX*/
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 1000px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align:center!important;
line-height: 0;
}
#jquery-lightbox a img { border:none; margin:0px 10px 0px 0px; padding:20px 15px 0px 0px; }
#lightbox-container-image-box {
position: relative;
background-color:#fff;
width: 250px;
height: 250px;
margin: 0 auto;
top:-50px;
/*border:1px solid #6db6cd;*/
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align:center!important;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 14px tahoma, Arial, sans-serif;
background-color:none;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width:100%;
clear:both;
position:relative;
float:left;
}
#lightbox-secNav-btnClose img{
position:absolute;
left:-15px;
bottom:-15px;
}