@charset "utf-8";
body {
	margin: 0px;
	padding: 0px; 
	text-align:justify;
	}

TD {
	FONT-SIZE: 12px; 
	FONT-FAMILY: tahoma,Helvetica,sans-serif;
	COLOR:#5B5851;
}

HR {
height: 1px;
}
/* Link /////////////////////////////////*/

a {
FONT-SIZE: 13px; 
COLOR:#0099FF;
text-decoration: none;
font-family:Tahoma, Geneva, sans-serif;



}
a.link_head:hover{
	FONT-SIZE: 13px; 
}

a.link_blue{
FONT-SIZE: 12px; 
COLOR:blue;
text-decoration: none;
}
a.link_blue:hover{
FONT-SIZE: 12px; 
COLOR:#ff6600;
text-decoration: underline;
}

a.link_small{
	FONT-SIZE: 11px; 
}
a.link_small:hover{
	FONT-SIZE: 11px; 
}



a.line_menu{
FONT-SIZE: 11px; 
COLOR:#3e3e3e;
text-decoration: none;
}
a.line_menu:hover{
FONT-SIZE: 11px; 
COLOR:#3e3e3e;
text-decoration: none;
}

a.link_footer {
FONT-SIZE: 11px; 
COLOR:#5D3766;
text-decoration: none;
font-weight:bold;	
}

a.link_footer:hover
{
	FONT-SIZE: 11px; 
	color: white;
	text-decoration: underline;
font-weight:bold;		
}
a.link_footer_2{
FONT-SIZE: 11px; 
COLOR:#E0D1A6;
text-decoration: none;
}

a.link_footer_2:hover
{
	FONT-SIZE: 11px; 
	color: #E0D1A6;
	text-decoration: underline;
}

a.link_red{
FONT-SIZE: 11px; 
COLOR:red;
text-decoration: none;
}

a.link_red:hover
{
	FONT-SIZE: 11px; 
	color: #cc3300;
	text-decoration: underline;
}

.font_title_head{
	FONT-SIZE: 14px; 
	font-weight:bold;	
	COLOR:#ffffff;
}

.font_date{
	FONT-SIZE: 11px; 
	font-weight:bold;	
	COLOR:gray;
}

.font_footer_red{
	FONT-SIZE: 11px; 
	color: red;
}

.font_title_head2{
	FONT-SIZE: 13px; 
	font-weight:bold;	
	COLOR:#000000;
}

.font_small{
	FONT-FAMILY: tahoma;	
	FONT-SIZE: 11px; 
}


.title_h{
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;	
	FONT-SIZE: 16pt; 
	font-weight:none;	
	COLOR:#0E1A26;
	padding-top:5px;
	padding-left:0px;	
}

.font_price{
	FONT-SIZE: 13px; 
	font-weight:bold;	
	COLOR:#E95200;
}

.div_error{
	FONT-SIZE: 13px; 
	FONT-FAMILY: tahoma,Arial, Verdana;	
	COLOR: #121212; 
	BACKGROUND: #ffffcc; 	
	BORDER: #CCCCCC 1px solid; 
	WIDTH:100%;
	HEIGHT:26px;	
	padding:1px 1px;	
}

#crumb ul {
	height:1.1em;
	padding-bottom:20px;
	margin:0;
	padding:0;	
	}
#crumb li {
	font:bold 13px Arial,Helvetica,sans-serif;
	display:block;
	float:left;
	color:#34363e;
	margin:0;
	padding:0;	
	}
#crumb li a {
	padding:0 20px 0 0;
	margin:0 10px 0 0;
	background:url(../../images/crumb.gif) no-repeat right center;
	font:bold 13px Arial,Helvetica,sans-serif;	
	}	
#crumb li a:link,
#crumb li a:visited {
	color:gray;
	text-decoration:none;
	}	
#crumb li a:hover,
#crumb li a:focus {
	color:#ff9900;
	}		
	
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

	.font_big{
	font:bold 14pt  "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	}

	.font_big2{
	font:bold 11pt "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	color:#008040;	
	}	
	
	.tbl_head{
	font:bold 13px  "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	}
	
	.font_h1{
	font:bold 10pt "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;

	}		
	
	.font_h{
	font:bold 14px tahoma,Helvetica,sans-serif;
	/*color:#F4793A;*/
	color:#DD4909;

	}			
	
	.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#E6DCAA;
color:#000000;
width:140;
padding:3px;
text-align:left;
font-weight:bold;
border-left:5px solid red;
padding-left:10px;
/*border-bottom:1px solid red;*/
}

.submenu{
margin-bottom: 15px;
padding-left:10px;
}
#links ul {
margin: 0 0 0 5px;
padding: 0 0 0 0;
list-style-type: none;
text-align: left;
}

#links ul li a {
background: url(../../images/CarreGrisVide.gif) left center no-repeat;
padding-left: 15px;
color: gray;
}
#links ul li a:hover {
background: url(../../images/puceCarreRouge.gif) left center no-repeat;
padding-left: 15px;
color: black;
}
#links ul li#current a {
background: url(../../images/CarreGrisPlein.gif) left center no-repeat;
padding-left: 15px;
color: black;
}
/* ######### menu ################################# */


.div_img{
BORDER: #C1C0C0 1px solid; 
PADDING:5px;
background-color: white;
}


.arrowlistmenu{
width: 150px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 13px tahoma,Helvetica,sans-serif;
color: #666666;
/*background: black url(titlebar.png) repeat-x center left;*/
border-left:5px solid #B5CFD9;
background-color:#DEEFFA;
margin-bottom: 5px; /*bottom spacing between header and rest of content*/
/*text-transform: uppercase;*/
padding: 3px; /*header text is indented 10px*/
padding-left:10px;
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
margin-bottom: 5px; 
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0px; /*bottom spacing between each UL and rest of content*/
margin-bottom: 10px; 
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
padding-left: 15px;
color: gray;
}

.arrowlistmenu ul li a{
/*background: url(arrowbullet.png) no-repeat center left; custom bullet list image*/
background: url(../../images/CarreGrisVide.gif) left center no-repeat;
display: block;
padding: 1px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
border-bottom: 0px solid #f8f8f8;
padding-left: 15px;
color: gray;
font: 13px tahoma,Helvetica,sans-serif;
}

.arrowlistmenu ul li a:visited{
color: gray;
font: 13px tahoma,Helvetica,sans-serif;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
background: url(../../images/puceCarreRouge.gif) left center no-repeat;
padding-left: 15px;
font: 13px tahoma,Helvetica,sans-serif;
color: #2366A8;
background-color:#E8F3FB;
}

.arrowlistmenu ul li#current a {
background: url(../../images/puceCarreRouge.gif) left center no-repeat;
padding-left: 15px;
color: #2366A8;
}
/* ######### menu ################################# */



 /* ----------- NAVIGATION starts ----------------- */
.lavaLampNoImage {
	position: relative;
	background: url(../images/tape.gif);
	
	background-color: #faeaa2;
	padding: 4px 5px 8px 10px;
	margin: 0px auto 20px auto;
	overflow: hidden;
	border: 1px solid #e9d6a7;
	width: 98%;
	line-height: normal;
}
.lavaLampNoImage li {
	float: left;
	list-style: none;
}
.lavaLampNoImage li.back {
	background-color: #ffc48c;
	width: 5px;
	height: 22px;
	z-index: 8;
	position: absolute;
}
.lavaLampNoImage li a:link, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited, .lavaLampNoImage li a:hover {
	font-size: 15px;
	font-weight: normal;
	text-decoration: none;
	color: #8c684d;
	letter-spacing: 0.1em;
	z-index: 10;
	display: block;
	position: relative;
	overflow: hidden;
	margin: auto 10px;
	padding: 0 0px 0 3px;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
	border: none;
}
/* -------------- NAVIGATION ends ---------------- */

/***fancy menu***/
#fancymenu{
display:inline;
clear:both;
position:relative;
height:32px;
width:100%;
/*border: 1px solid #000;*/
overflow:hidden;
float:left;
}

#fancymenu ul{padding:0px 0px 0px 0px;margin:0;}
  
#fancymenu ul li{float:left;list-style:none;}

#fancymenu ul li a{
text-indent:-10em;
z-index:10;
display:block;
float:left;
height:32px;
position:relative;
overflow:hidden;
color:#fff;
padding:0px 0px 0px 7px;
}

#menu_home a{width:94px;background:url(../../images/menu_home.png) top left no-repeat;}
#menu_about a{width:87px;background:url(../../images/menu_about.png) top left no-repeat;}
#menu_helpdesk a{width:145px;background:url(../../images/menu_helpdesk.png) top left no-repeat;}
#menu_board a{width:136px;background:url(../../images/menu_board.png) top left no-repeat;}
#menu_article a{width:95px;background:url(../../images/menu_article.png) top left no-repeat;}
#menu_contact a{width:98px;background: url(../../images/menu_contact.png) top left no-repeat;}
#menu_service a{width:128px;background: url(../../images/menu_service.png) top left no-repeat;}
#menu_partner a{width:93px;background: url(../../images/menu_partner.png) top left no-repeat;}

#fancymenu li.background {
background:url(../../images/bg_menu_right.jpg) no-repeat top right;
z-index:8;
position:absolute;
visibility:hidden;}
  
#fancymenu .background .left {
background:url(../../images/bg_menu.jpg) no-repeat top left;height:32px;}

/* ---------- gallery_menu styles start here ----------------------- */
.gallery_menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gallery_menu li {
	padding: 10px;
	margin: 0;
	position: relative;
	text-shadow: Gray;
}
.gallery_menu li:hover img {
	border-color: #9EC3ED;
}
.gallery_menu img {
	background: #fff;
	border: solid 1px #FFFFFF;
	padding: 5px;
}
.gallery_menu em {
	background: #fff url(../images/grey-gradient.gif) repeat-y;
	color: red;
	font-style: normal;
	font-size:12pt;
	padding: 2px 10px;
	display: block;
	position: absolute;
	top: 140px;
	left: 9px;
	border: 1px solid #9EC3ED;
	border-left-color: #888;
}
.gallery_menu a {
	text-decoration: none;
}
.gallery_menu a:hover em {
	background: #ffdb01 url(../images/orange-gradient.gif) repeat-y;
	border-color: #F69;
}

#body_bg{
BACKGROUND-IMAGE: url(../images/bg-h01.jpg);
background-repeat: repeat-x;
background-position: top;
}
/* BUTTON */

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

a.squarebutton{
background: transparent url(../../images/bg_btn_left.jpg) no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #ffffff; /*button text color*/
font: normal 12px Arial; /* Change 12px as desired */
}

a.squarebutton span{
background: transparent url(../../images/bg_btn_right.jpg) no-repeat top right;
display: block;
padding: 3px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
font: normal 13px Arial; /* Change 12px as desired */
 font-weight:bold;
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
font: normal 13px Arial; /* Change 12px as desired */
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: #ffffff;
font: normal 13px Arial; /* Change 12px as desired */
 font-weight:bold;
}

.button{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
}

/*+++++++++ Product */
.img_product_hot {
	list-style: none;
	margin: 0;
	padding: 0;
}
.img_product_hot li {
	padding: 10px;
	margin: 0;
	position: relative;
	text-shadow: Gray;
	background: #fff;
	border: solid 1px #C1C0C0;
	padding: 5px;	
}
.img_product_hot li:hover img {
	border-color: #000;
}
.img_product_hot img {
	border: solid 0px #888;
	padding: 0px;
}
.img_product_hot em {
	color: red;
	font-style: normal;
	display: block;
	position: absolute;
	top: -10px;
	padding-left: 150px;
}
/*+++++++++ Product */

.div_sale{
	position: absolute;
	top: 20px;
	padding-left: 35px;
}

.img_alpha {filter:alpha(opacity=20);}
/* BUTTON */

#menu_left{
width:100%;
}
#menu_left ul{
list-style:none;
width:100%;
margin:0;
padding:0;
}
#menu_left li{
list-style:none;
display:block;
text-indent:10px;
height: 30px;
}
#menu_left li a{
display:block;
color:#960;
text-transform:uppercase;
font-size:13px;
text-decoration:none;
height:30px;
line-height:27px;
}
#menu_left li a:hover{
height:30px;
line-height:27px;
color:#C60;
text-decoration:none;
}
#menu_left li a.current, #menu li a:hover.current{
list-style:none;
display:block;
background:url(../images/bg_menu_h.jpg) no-repeat;
color:#3e3e3e;
text-transform:uppercase;
font-size:13px;
text-decoration:none;
height:30px;
line-height:27px;			
}

/* INPUT */
.input_box {
	FONT-FAMILY: tahoma,Helvetica,sans-serif;
	FONT-SIZE:13px; 	
	COLOR: #5b5b5b; 
	padding:2px;
	WIDTH:100%;
	border:1px solid #c1c1c1;
	font-weight:normal;	
	background-color:white;
	margin:0px;
	text-align:inherit;
	height:24px;
	text-align:left;
}

.input_box_read {
	FONT-FAMILY: tahoma,Helvetica,sans-serif;
	FONT-SIZE:13px; 	
	COLOR: #5b5b5b; 
	padding:2px;
	WIDTH:100%;
	border:1px solid #c1c1c1;
	font-weight:normal;	
	background-color:#f7f7f7;
	margin:0px;
	text-align:left;
	height:24px;
}


.input_box_select {
	FONT-FAMILY: tahoma,Helvetica,sans-serif;
	FONT-SIZE:14px; 	
	COLOR: #5b5b5b; 
	padding:3px;
	WIDTH:100%;
	border:1px solid #c1c1c1;
	font-weight:normal;	
	background-color:white;
	margin:0px;
	text-align:inherit;
	height:26px;
	text-align:left;	
}

.input_box_white{
	FONT-SIZE: 13px; 
	FONT-FAMILY: tahoma,Helvetica,sans-serif;
	COLOR: #5b5b5b; 
	HEIGHT: 22px; 
	WIDTH:100%;
	padding:1px 1px;
	border:1px solid white;
	font-weight:bold;	
}




.input_box_center {
	FONT-SIZE: 13px; 
	FONT-FAMILY: tahoma,Helvetica,sans-serif;
	COLOR: #5b5b5b; 
	HEIGHT: 22px; 
	WIDTH:100%;
	padding:1px 1px;
	border:1px solid #c1c1c1;
	text-align: center;	
}

.input_box_read_center {
	FONT-SIZE: 13px; 
	FONT-FAMILY: tahoma,Helvetica,sans-serif;
	COLOR: #5b5b5b; 
	HEIGHT: 22px; 
	WIDTH:100%;
	padding:1px 1px;
	border:1px solid #c1c1c1;
	text-align: center;	
	background-color:#f7f7f7;	
}

.input_box_number {
	FONT-SIZE: 14px; 
	FONT-FAMILY: tahoma,Helvetica,sans-serif;
	COLOR: #3366cc; 
	HEIGHT: 22px; 
	WIDTH:100%;
	padding:1px 1px;
	border:1px solid #c1c1c1;
	font-weight:bold;	
	text-align: right;	
	padding-right:5px;
	BACKGROUND-IMAGE: url(../../images/thai_currency.gif);
	background-repeat: no-repeat;
	background-position: top left;	
}

.input_box_number_read {
	FONT-SIZE: 14px; 
	FONT-FAMILY: tahoma,Helvetica,sans-serif;
	COLOR: #3366cc; 
	HEIGHT: 22px; 
	WIDTH:100%;
	padding:1px 1px;
	border:1px solid #c1c1c1;
	font-weight:bold;	
	text-align: right;	
	padding-right:5px;
	BACKGROUND-IMAGE: url(../../images/thai_currency.gif);
	background-repeat: no-repeat;
	background-position: top left;	
	background-color:#f7f7f7;
}

.input_box_calendar{
	FONT-SIZE: 14px; 
	FONT-FAMILY: tahoma,Helvetica,sans-serif;	
	COLOR: #5b5b5b; 
	WIDTH:96%;
	padding:2px;
	border:1px solid #c1c1c1;
	text-align: left;	
	BACKGROUND-IMAGE: url(../../images/icon/calendar-blue.png);
	background-repeat: no-repeat;
	background-position: top right;	
	background-color:white;	
	height:20px;	
}

.input_box_calendar_dis{
	FONT-SIZE: 14px; 
	FONT-FAMILY: tahoma,Helvetica,sans-serif;	
	COLOR: #5b5b5b; 
	WIDTH:96%;
	padding:2px;
	border:1px solid #c1c1c1;
	text-align: left;	
	BACKGROUND-IMAGE: url(../../images/icon/ico_calendar_dis.gif);
	background-repeat: no-repeat;
	background-position: top right;	
	background-color:white;	
	height:20px;
}
#td_label{
background-color:#FBFBFB;
padding-left:10px;
border-bottom:1px solid #EEEEEE
}