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

img { border: 0; }
a { text-decoration: none; }
body { margin: 0; padding: 0; background: #0F501A; }
object { outline: none; }

.wrapper { width: 950px; margin: 0 auto; overflow: hidden; }
#banner { height: 210px; overflow: hidden; margin-top: -41px; }
#header {
	background: transparent url(../img/headerbg.jpg) 0 0 repeat-x;
	}
#header .wrapper { 
	background: transparent url(../img/topbg.jpg) 0 30px no-repeat;
	height: 274px;
	padding: 30px 0 0 0;
	}
#header #lang { 
	float: right;
	width: 210px;
	color: #87E897;
	font-style: italic;
	font-size: 10px;
	font-family: arial, "sans serif";
	line-height: 18px;
	margin: -19px 30px 0 0;
	height: 18px;
	}
#lang a { 
	background: #036513 url(../img/langbg.jpg) 0 0 no-repeat;
	width: 78px;
	height: 22px;
	line-height: 22px;
	display: block;
	float: right;
	text-align: center;
	margin-top: -4px;
	color: #FFF;
	font-weight: bold;
	font-style: normal;
	position: relative;
	}
	#lang a:hover { background-position: 0 -22px; }
#header h1 { 
	margin: 0 0 0 10px;
	height: 84px;
	width: 330px;
	}
#header h1 a { 
	background: transparent url(../img/logo.png) 0 0 no-repeat;
	height: 84px;
	width: 330px;
	display: block;
	text-indent: -999px;
	position: relative;
	}
#menu { 
	overflow: hidden;
	margin: -35px 0 0 320px;
	height: 35px;
	list-style: none;
	padding: 0 33px 0 41px;
	background: transparent url(../img/menu.png) 0 0 no-repeat;
	position: relative;
	_height: 34px;
	_margin-top: -34px;
	}
#menu li  { 
	float: left;
	padding: 3px 0 0 0;
	margin-right: 12px;
	}
#menu li a {
	background: transparent url(../img/menu.png) -41px -3px no-repeat;
	display: block;
	width: 91px;
	height: 33px;
	overflow: hidden;
	text-indent: -999px;
	}
	#menu li#aboutus a { background-position:-41px -3px; }
	#menu li#product a { background-position:-144px -3px; }
	#menu li#tutorial a { background-position:-247px -3px; }
	#menu li#contactus a { background-position:-350px -3px; }
	
	#menu li#aboutus a:hover, #menu li#aboutus.now a { background-position:-41px -39px; }
	#menu li#product a:hover, #menu li#product.now a { background-position:-144px -39px; }
	#menu li#tutorial a:hover, #menu li#tutorial.now a { background-position:-247px -39px; }
	#menu li#contactus a:hover, #menu li#contactus.now a { background-position:-350px -39px; }
	
	#menu li#aboutus a:active { background-position:-41px -75px; }
	#menu li#product a:active { background-position:-144px -75px; }
	#menu li#tutorial a:active { background-position:-247px -75px; }
	#menu li#contactus a:active { background-position:-350px -75px; }


#main { 
	background: #F7F1D9;
	padding: 20px 0;
	border-top: solid 1px #FFF;
	}
#category {
	width: 240px;
	float: left;
	background: #FFF url(../img/catebt.jpg) 0 bottom no-repeat;
	overflow: hidden;
	}
#category h2 { 
	background: transparent url(../img/catetop.jpg) 0 0 no-repeat;
	height:42px;
	margin: 0;
	text-indent: -999px;
	overflow: hidden;
	}
#category ul { margin: 0 11px; padding: 0; list-style: none; width: 218px; }
#category .catetitle {
	margin: 10px 0;
	display: block;
	}
#category .catetitle a {
	background: transparent url(../img/catehead.jpg) 0 0 no-repeat;
	display: block;
	width: 218px;
	height: 24px;
	overflow: hidden;
	text-indent: -999px;
	}
	#category #c2.catetitle a { background-position:-218px -24px; }
	#category #c3.catetitle a { background-position:-436px -48px; }
	#category #c4.catetitle a { background-position:-654px -72px; }
	#category #c5.catetitle a { background-position:-873px -96px; }
#category .catetitle ul { margin: 10px 0; display: none; }
#category .catetitle ul li { 
	padding: 0 0 0 20px;
	width: 198px;
	background: transparent url(../img/submenu_arrow.gif) 10px 7px no-repeat;
	}
#main #category li.catetitle ul li a { 
	text-indent: 0;
	font-size: 12px;
	width: 176px;
	padding-right: 22px;
	line-height: 22px;
	height: 22px;
	background: none;
	display: inline-block;
	color: #585836;
	}
	#main #category li.catetitle ul li a:hover { color: #747447; }
#main #category li.catetitle ul li a.new { background: transparent url(../img/sub_new.gif) right top no-repeat; }
#main #category li.catetitle ul li a.top { background: transparent url(../img/sub_top.gif) right top no-repeat; }
#category p {
	margin: 10px;
	padding: 12px 6px;
	background: #FFC url(../img/plus.png) 170px center no-repeat;
	font-weight: bold;
	font-size: 0.9em;
	border: dotted 1px #333;
	color: #444;
	cursor: default;
	}
#container {
	width: 702px;
	float: right;
	overflow: hidden;
	}
	.containertop, .containerbottom { height: 5px; background: transparent url(../img/containerframe.jpg) 0 0 no-repeat; _font-size:0;}
	.containerbottom { background-position: 0 bottom; }
	

#main.prod1 li#c1 ul { display:block; }	
#main.prod2 li#c2 ul { display:block; }	
#main.prod3 li#c3 ul { display:block; }	
#main.prod4 li#c4 ul { display:block; }	
#main.prod5 li#c5 ul { display:block; }	


#content { 
	background: #FFF;
	min-height: 300px !important;
	_height: 300px;
	padding: 0 20px 30px 42px;
	}
#content h2 {
	background: transparent url(../img/contenthead.gif) 0 0 no-repeat;
	height: 40px;
	margin: 0 0 20px -22px;
	text-indent: -999px;
	overflow: hidden;
	}

#main.prod1 #content h2 { background-position: 0 0; }
#main.prod2 #content h2 { background-position: 0 -40px; }
#main.prod3 #content h2 { background-position: 0 -80px; }
#main.prod4 #content h2 { background-position: 0 -120px; }
#main.prod5 #content h2 { background-position: 0 -280px; }
#main.aboutus #content h2 { background-position: 0 -160px; }
#main.tutorial #content h2 { background-position: 0 -200px; }
#main.contactus #content h2 { background-position: 0 -240px; }

a.gotop { color:#154784; font-weight: bold;}
a.gotop:hover { color:#3984DF; }

.prodHolder ul.pstxt { list-style: none; margin-left: 6px; padding: 0; }
ul.pstxt li { 
	background: transparent url(../img/pstxt.gif) 0 6px no-repeat;
	padding-left: 18px;
	}

	
div.pg { margin: 10px 0; }
div.pg a { margin-right: 10px; }
div.pg img { border: solid 1px #DDD; }
/*About us*/
.aboutus #content {
	background: #FFF url(../img/aboutbg.jpg) right bottom no-repeat;
	padding-bottom: 160px;
	}
.aboutus #content p {
	font-size: 15px;
	line-height: 1.8em;
	}
.aboutus #content ul { 
	margin: 30px 380px -60px 0;
	padding: 10px;
	list-style: none;
	font-size: 13px;
	background: #f2f2f2;
	}
.aboutus #content ul li {
	line-height: 2em;
	}

/**/
.tutorial #content {
	background: #FFF url(../img/tutobg.jpg) right bottom no-repeat;
	padding-bottom: 300px;
	}

/*Product*/
.prodHolder { 
	font-size: 12px;
	color: #555;
	overflow: hidden;
	border-bottom: dashed 1px #F8F0D9;
	padding: 0 20px 20px 42px;
	margin: 0 -20px 0 -42px;
	}
.prodHolder h3 { color: #860001; font-size: 17px; }
.prodHolder div.prodimg { 
	float: right;
	margin: 0 0 30px 30px;
	text-align: center;
	}
.prodHolder div.prodimg span { display: block; text-align: center; margin: 6px auto 0 auto; font-weight: bold; width: 200px; }
.prodHolder strong { display: block; color: #333; }
.prodHolder p { line-height: 1.9em; }
.prodHolder a.gotop { display: block; text-align: right; margin: 10px 0 0 0; }
.prodHolder ol, .prodHolder ul { margin-left: 24px; padding: 0; line-height: 1.9em; }
.prodHolder table.reference { border-collapse: collapse; margin: 14px 0; }
.prodHolder table.reference tbody { border: solid 1px #666; } 
.prodHolder table.reference td, .prodHolder table.reference th { padding: 10px; border: solid 1px #998660; text-align: center; }
.prodHolder table.reference th { background: #FEED9B; }
.prodHolder table.reference td { background: #FCFAF1; }
.prodHolder table.reference thead th { background: #F7B500; color: #FFF; }

	
/*Contact Us*/
.contactus form { margin: 0; padding: 0; overflow: hidden; }
.contactus #content ul { margin: 0; padding: 0; list-style: none; }
.contactus #content ul li { overflow: hidden; _zoom:1; padding: 4px 0; }
.contactus #content ul li.last { padding-left: 100px; }
.contactus #content { font-size: 12px; }
.contactus #content input, .contactus #content textarea {
	display: block;
	width: 400px;
	border: solid 1px #ddd;
	border-top: solid 1px #999;
	float: left;
	}
.contactus #content input { 
	width: 200px;
	padding: 2px 3px;
	vertical-align: middle;
	}
.contactus #content input.focus, .contactus #content textarea.focus { background: #FFC; }
.contactus #content input.btn {
	width: 72px;
	height: 26px;
	background: transparent url(../img/btn.gif) 0 0 no-repeat;
	border: none;
	float: left;
	margin: 20px 8px 0 0;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
	}
.contactus #content input.btn.hover { background-position: 0 -26px; }
.contactus #content label {
	line-height: 30px;
	font-weight: bold;
	display: block;
	text-indent: 4px;
	color: #444;
	float: left;
	width: 100px;
	}
.contactus #content textarea {
	height: 150px;
	font-size: 12px;
	padding: 2px 3px;
	}
#footer {
	background: transparent url(../img/footerbg.jpg) 0 0 repeat-x;
	color: #B7E8BB;
	font-size: 11px;
	overflow: hidden;
	min-height: 110px !important;
	_height: 110px;
}
#footer .wrapper { padding: 0 10px; width: 930px; }
#footer p {
	float: left;
	width: 300px;
	margin-top: 20px;
	line-height: 16px;
	}
#footer p#copyright {
	float: right;
	width: 500px;
	text-align: right;
	}
#footer p a {
	color: #FFF;
	font-weight: bold;
	}

/*Paper*/
body.paper { margin: 20px; text-align: center; }

/*index*/
#index { 
	text-align: center;
	margin: 20px 0 0 0;
	}
#index p {
	font-size: 11px;
	color: #B7E8BB;
	}
#index p a {
	color: #FFF;
	}
#indexMenu {
	position: absolute;
	left: 50%;
	top: 350px;
	margin-left: -300px;
	text-align: left;
	}
#indexMenu a {
	color: #FFF;
	margin-right: 20px;
	font-weight: bold;
	}

/*English Version*/
body.en #category h2 { background-image: url(../img/catetop_en.jpg); }
body.en #menu { background-image: url(../img/menu_en.png); }
body.en #menu li a { background-image: url(../img/menu_en.png); }
body.en #category .catetitle a { background-image: url(../img/catehead_en.jpg); }
body.en #content h2 { background-image: url(../img/contenthead_en.gif); }
body.en #category #c1.catetitle a, body.en #category #c2.catetitle a { height: 41px; }
body.en #main #category li.catetitle ul li a { height: auto; }