/**********************

CSS Document

Coded by: Kefan Xie
xiekefan@gmail.com

**********************/

body {
	margin: 0;
	padding: 0;
	height: 100%; 
	background: #333333 url(../images/bg/bg_body.gif) repeat-y center 0; 
}

#home_body { 
	background-image: none; 
} 

a img {
	border: none;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#wrapper {
	width: 994px; 
	height: 100%; 
	margin: auto; 
	background: url(../images/bg/bg_body.gif) repeat-y; 
}

/**********************

Header

**********************/

#header {
	width: 994px; 
	height: 254px; 
	background: url(../images/bg/bg_header.jpg) no-repeat; 
}

#header  h1 { 
	margin: 0; 
	padding: 0; 
} 

#logo { 
	float: left; 
	display: inline; 
	width: 200px; 
	height: 150px; 
	padding-top: 10px; 
	margin-left: 100px; 
	text-indent: -9999px; 
} 

#mission_statement { 
	float: left; 
	display: inline; 
	margin: 40px 0 0 37px; 
	padding: 0; 
	color: white; 
	width: 322px; 
	font: normal 0.7em verdana; 
	line-height: 15px; 
	text-align: justify; 
} 

/**********************

Navigation

**********************/

#navi {
	width: 739px;
	height: 32px; 
	padding: 37px 0 0 118px;
}

#navi ul { 
	margin: 0; 
	padding: 0; 
	list-style: none; 
} 

#navi ul li { 
	position: relative; 
	float: left; 
} 

#navi ul li a { 
	display: block; 
	text-indent: -9999px; 
} 

#navi ul li.over { 
	background-color: #e6e8f4; 
} 

#navi ul li ul { 
	position: absolute; 
	top: 32px; 
	left: 0; 
	z-index: 5; 
	display: none; 
	width: 200px; 
} 

#navi ul li:hover ul, #navi ul li.over ul { 
	display: block; 
} 

#navi ul li ul li a { 
	float: none !important; 
	width: 170px; 
	height: 23px; 
	padding: 10px 0 0 30px; 
	font: normal 0.6em verdana !important; 
	color: black !important; 
	text-indent: 0 !important; 
	background: url(../images/bg/bg_nav_sub.gif) no-repeat; 
} 

#navi ul li ul li a:hover { 
	font-weight: bold !important; 
	text-decoration: none;
	background: url(../images/bg/bg_nav_sub.gif) no-repeat 0 -33px; 
} 

#nav_news { 
	width: 90px; 
	height: 32px; 
	background: url(../images/nav/nav_news.jpg) no-repeat; 
} 

#nav_products { 
	width: 121px; 
	height: 32px; 
	background: url(../images/nav/nav_products.jpg) no-repeat; 
} 

#nav_history { 
	width: 101px; 
	height: 32px; 
	background: url(../images/nav/nav_history.jpg) no-repeat; 
} 

#nav_contact { 
	width: 134px; 
	height: 32px; 
	background: url(../images/nav/nav_contact.jpg) no-repeat; 
} 

#nav_community { 
	width: 121px; 
	height: 32px; 
	background: url(../images/nav/nav_community.jpg) no-repeat; 
} 

#nav_news_active, #nav_news:hover { 
	width: 90px; 
	height: 32px; 
	background: url(../images/nav/nav_news.jpg) no-repeat 0 -32px; 
} 

#nav_products_active, #nav_products:hover { 
	width: 121px; 
	height: 32px; 
	background: url(../images/nav/nav_products.jpg) no-repeat 0 -32px; 
} 

#nav_history_active, #nav_history:hover { 
	width: 101px; 
	height: 32px; 
	background: url(../images/nav/nav_history.jpg) no-repeat 0 -32px; 
} 

#nav_contact_active , #nav_contact:hover { 
	width: 134px; 
	height: 32px; 
	background: url(../images/nav/nav_contact.jpg) no-repeat 0 -32px; 
} 

#nav_community_active, #nav_community:hover { 
	width: 121px; 
	height: 32px; 
	background: url(../images/nav/nav_community.jpg) no-repeat 0 -32px; 
} 

/**********************

Content

**********************/

#lang_selection { 
	width: 660px; 
	height: 157px; 
	padding: 183px 0 0 220px; 
	margin: 120px auto 0; 
	background: url(../images/bg/bg_home.jpg) no-repeat; 
}

#lang_en, #lang_ch { 
	float: left;
	width: 160px; 
	height: 33px; 
}

#lang_en { 
	background: url(../images/nav/nav_home_en.gif) no-repeat; 
}

#lang_en:hover { 
	background: url(../images/nav/nav_home_en.gif) no-repeat 0 -33px; 
}

#lang_ch { 
	display: inline;
	margin-left: 20px; 
	background: url(../images/nav/nav_home_ch.gif) no-repeat; 
}

#lang_ch:hover { 
	background: url(../images/nav/nav_home_ch.gif) no-repeat 0 -33px; 
}

#content_wrap {
	width: 994px; 
	background: url(../images/bg/bg_shadow.png) repeat-y; 
}

#content { 
	position: relative; 
	width: 739px; 
	margin-left: 118px; 
	background: url(../images/bg/bg_content.jpg) no-repeat; 
} 

#plant_bottom { 
	position: absolute;
	left: 0; 
	bottom: 0; 
	width: 739px; 
	height: 33px; 
	background: url(../images/footer_plants.png) no-repeat 
} 

#history_img { 
	float: left; 
} 

#history_texts { 
	float: left; 
	margin: 30px 0 0 40px; 
	padding: 0 0 60px 0; 
	color: black; 
	width: 273px; 
	font: normal 0.7em verdana; 
	line-height: 15px; 
	text-align: justify; 
} 

#history_texts p { 
	clear: both; 
	margin: 0; 
} 

#title_history { 
	float: right; 
	width: 156px; 
	height: 43px; 
	margin: 0 0 10px 0; 
	text-indent: -9999px; 
	background: url(../images/title_history.gif) no-repeat;
} 

#contact_left { 
	float: left; 
	display: inline; 
	width: 284px; 
	margin: 20px 0 0 40px; 
} 

#contact_left form { 
	float: right; 
	width: 270px; 
} 

#contact_left label { 
	float: left; 
	width: 98px; 
	text-align: right; 
	margin-right: 10px; 
	font: normal 0.7em verdana; 
	line-height: 22px; 
} 

#contact_form { 
	margin-bottom: 40px; 
}

#error_msg { 
	color: red; 
	font: normal 0.7em verdana; 
	line-height: 18px; 
}

.site_msg { 
	font: normal 0.7em verdana; 
}

.area_label { 
	text-align: left !important; 
	margin-top: 10px; 
} 

.forms { 
	margin:3px; 
	font-family:Arial, Helvetica, sans-serif; 
	left:20px; 
	text-indent:5px; 
	font-weight: bold; 
	font-size: 11px; 
	color:#ffffff; 
	background-image:url(../images/bg/bg_form.gif); border:solid 2px #000000;
}

.forms_area { 
	margin:3px; 
	width: 235px; 
	height: 100px; 
	font-family:Arial, Helvetica, sans-serif; 
	left:20px; 
	text-indent:5px; 
	font-weight: bold; 
	font-size: 11px; 
	color:#ffffff; 
	background-image:url(../images/bg/bg_form.gif); border:solid 2px #000000;
}

.forms:hover, .forms_area:hover {
	border:solid 2px #666666;
}

.forms:focus, .forms_area:focus {
	color:#000000; 
	background-image:url(../images/bg/bg_form_over.gif);
}

#contact_Submit { 
	display: block; 
	margin: 10px 0 0 100px; 
} 

#title_contact { 
	width: 253px; 
	height: 43px; 
	margin: 0 0 30px 0; 
	text-indent: -9999px; 
	background: url(../images/title_contactus.gif) no-repeat;
} 

#contact_right { 	
	float: left; 
	width: 286px; 
	height: 425px; 
	margin-left: 20px; 
	padding: 75px 0 0 80px; 
	background: url(../images/bg/bg_frame_contact.png) no-repeat; 
} 

#contact_right p { 
	margin: 0; 
	font: normal 0.7em verdana; 
	line-height: 25px; 
} 

#title_info { 
	width: 182px; 
	height: 22px; 
	margin: 0 0 15px 0; 
	text-indent: -9999px; 
	background: url(../images/title_callus.gif) no-repeat;
} 

#product_nav { 
	float: left; 
	width: 200px; 
	height: 432px; 
	background: url(../images/bg/bg_menu-products.png) no-repeat; 
} 

#product_nav ul { 
	margin: 90px 0 0 20px; 
	padding: 0; 
	list-style: none; 
} 

#product_nav ul  a { 
	padding-left: 20px; 
	font: normal 0.65em verdana; 
	color: white; 
	background: url(../images/bullet.gif) no-repeat; 
} 

#product_main { 
	float: left;
	width: 539px; 
	padding-bottom: 40px; 
	text-align: center; 
} 

.product_pic { 
	float: left; 
	margin-bottom: 10px; 
}

.product_desc {
	clear: both; 
	font: normal 0.9em verdana; 
	line-height: 20px; 
	padding-right: 20px; 
	text-align: left;
}

.product_desc  a {
	font: normal 1em verdana; 
	color: #888888;
	text-decoration: underline; 
}

.product_desc  a:hover{
	text-decoration: none; 
}

#purchase_form {
	clear: right; 
	margin-right: 20px; 
	text-align: right; 
}

#purchase_form label {
	display: block; 
	font: normal 0.9em verdana; 
	line-height: 25px;
}

#purchase_form input { 
	display: block; 
	text-align: right; 
}

#design_formlabel {
	display: block; 
	font: normal 0.9em verdana; 
	line-height: 25px;
}

#design_form input{
	display: block; 
}

#design_form span { 
	font-size: 0.9em; 
} 

#design_msg {
	color: red;
	text-align: left; 
}

#btn_submit {
	float: right; 
	margin-top: 10px; 
}

#title_ex { 
	float: right; 
	width: 253px; 
	height: 43px; 
	margin: 10px; 
	text-indent: -9999px; 
	background: url(../images/products/ex_h1.png) no-repeat;
} 

#title_ignition { 
	float: right; 
	width: 353px; 
	height: 43px; 
	margin: 10px; 
	text-indent: -9999px; 
	background: url(../images/products/ignition_h1.png) no-repeat;
} 

#title_vshirt { 
	float: right; 
	width: 253px; 
	height: 43px; 
	margin: 10px; 
	text-indent: -9999px; 
	background: url(../images/products/vshirt_h1.png) no-repeat;
} 

#title_design { 
	float: right; 
	width: 265px; 
	height: 40px; 
	margin: 0 0 15px 0; 
	text-indent: -9999px; 
	background: url(../images/title_design.png) no-repeat;
} 

#title_staff { 
	float: right; 
	width: 140px; 
	height: 40px; 
	margin: 0 0 15px 0; 
	text-indent: -9999px; 
	background: url(../images/title_staff.png) no-repeat;
} 

#staff_texts { 
	float: left; 
	margin: 30px 0 0 40px; 
	padding: 0 0 60px 0; 
	color: black; 
	width: 273px; 
	font: normal 0.7em verdana; 
	line-height: 15px; 
	text-align: left; 
} 

#staff_texts p { 
	clear: both; 
	margin: 0; 
} 

/***********************

KGal

***********************/

#kgal { 
	clear: both; 
	position: relative; 
	height: 130px; 
	overflow: hidden; 
} 

#kgal_main { 
	position: absolute; 
	left: 40px; 
	width: 1800px; 
	height: 130px; 
	clip: rect(0px 450px 130px 0px);
	overflow: hidden; 
} 

#kgal_main p { 
	float: left; 
	height: 110px; 
	margin-right: 10px; 
	background: white; 
	border: 2px solid gray; 
}

#kgal_main p a { 
	display: block; 
	padding: 5px;
	background: white; 
} 

#kgal_main img {
	float: left; 
	height: 100px; 
}

#kgal_left { 
	position: absolute; 
	left: 0px; 
	top: 60px; 
} 

#kgal a { 
	cursor: pointer; 
} 

#kgal_right { 
	position: absolute; 
	left: 495px; 
	top: 60px; 
} 

.paypal_input { 
	float: right; 
} 

.paypal_label { 
	clear: right; 
} 

/**********************

Footer

**********************/

#footer {
	width: 994px; 
	height: 71px; 
	background: url(../images/bg/bg_footer.png) no-repeat; 
}

#footer p { 
	margin: 0; 
	color: white; 
	font: normal 0.9em arial; 
	text-align: center; 
} 

#footer p a { 
	color: #999999; 
	font-size: 0.8em; 
} 

#footer p a:hover { 
	color: white; 
} 

.footer_text { 
	float: left; 
	display: inline; 
	margin: 8px 0 0 170px; 
	font: normal 0.6em arial; 
	color: white; 
} 

#footer_credit { 
	float: right; 
	display: inline; 
	margin: 8px 200px 0 0; 
} 

/**********************

Miscellaneous

**********************/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/***********************

lightbox

***********************/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }