/*===================== BASE =====================*/

/* ==================== Global Styles ==================== */
	h1 { font-size: 1.8em; }
	h2 { font-size: 1.6em; }
	h3 { font-size: 1.4em; }
	h4 { font-size: 1.2em; }
	h1, h2, h3, h4, h5 { color: #c15f00; }
	p {
		font-size: 1em;
		padding: 1em 0;
		margin: 0;
	}

	/*===================== Main Layout =====================*/
		#footer {
			width: 938px;
			margin: 20px auto;
			padding: 24px 0;
			overflow: hidden;
			color: #a19893;
			text-align: center;
			background: url(../imgs/bg_footer_en.gif) no-repeat 425px top;
			position: relative;
			z-index: 3;
		}
	
			
		/*============= Nav =============*/
		ul#nav { /* en */
			margin: 0;
			padding: 0;
			height: 35px;
			background: url(../imgs/bg_nav_en.gif) no-repeat -1px 2px;
			float: left;
		}
			ul#nav li {
				margin: 0 40px 0 0;
				padding: 0;
				display: inline;
				height: 35px;
				float: left;
			}
	
				ul#nav li a {
					width: 67px;
					height: 35px;
					text-align: center;
					overflow: hidden;
					text-indent: -1985px;
					float: left;
					display: block;
				}
	
					ul#nav li a.home { width: 40px; }
					ul#nav li a.about { width: 47px; }
					ul#nav li a.portfolio { width: 66px; }
					ul#nav li a.services { width: 67px; }
					ul#nav li a:hover, ul#nav li a.current { background: url(../imgs/bg_nav_li_hover.gif) no-repeat center bottom; }
			
	
	/*======================= Container ====================*/
	
	/*============= page heading =============*/
		#pageHd p {
			overflow: visible;
			text-indent: 0;
			font-size: 18px;
			color: #fff;
			background: none !important;
			line-height: 140%;
			font-weight: normal;
		}


/*======================= HOMEPAGE ====================*/

		/*======================= Container ====================*/
		
		/*============= page heading =============*/
			#homepage #pageHd h1 {
				width: 339px;
				height: 237px;
				background: url(../imgs/homepage/bg_about_hp_en.gif) no-repeat 0 0;
				border-right: 1px solid #1a6abc;
			}
					
				#galleryCol .gallery .pDetail h2.title {
					font-family: "Helvetica", "Lucida Grande";
					font-weight: bold;
					font-size: 14px;
				}
		
					#galleryCol .gallery .pDetail h2.title a {
						background: url(../imgs/ico_outgolink_15x14.gif) no-repeat right center;
						padding: 0 1.5em 0 0 !important;
					}
		
		/*============= slideshow =============*/
		
				/*======== p1 ========*/
				#slideshow .p1 {
					background: url(../imgs/homepage/bg_slideshow_p1_en.gif) no-repeat right -232px;
					/*height: 230px; */
				}
					#slideshow .p1Hover { background: url(../imgs/homepage/bg_slideshow_p1_en.gif) no-repeat right 0px; }
					#slideshow .p1 ul.services {
						margin:  22px 0 0 0;
						padding: 0;
					}
						#slideshow .p1 ul.services li {
							float: left;
							display: block;
							text-align: center;
							position:relative;
							z-index: 25;
						}
							#slideshow .p1 ul.services li .hover {
								position: absolute;	/* must be postion absolute 	*/
								left: 0; 
								top: 0;	
								z-index: 1;		/* display under the Anchor tag	*/
								display: none;	/* hide it by default	*/					
								width: 97px;	/*	width, height, left and top to fill the whole LI item	*/
								height: 180px;
							}
						
							#slideshow .p1 ul.services li.wd {
								margin: 1.5em 10px 0 0;
								padding: 110px 0 0 0;
								width: 97px;
								height: 67px;
								background: url(../imgs/homepage/bg_service_wd_en.gif) no-repeat 0 0;
							}
								#slideshow .p1 ul.services li.wd .hover {
									background: url(../imgs/homepage/bg_service_wd_en_hover.gif) no-repeat 0 0;
								}
							#slideshow .p1 ul.services li.gd {
								margin: 2.5em 20px 0 0;
								padding: 82px 0 0 0;
								width: 103px;
								background: url(../imgs/homepage/bg_service_gd_en.gif) no-repeat 0 0;
							}
								#slideshow .p1 ul.services li.gd .hover {
									width: 103px;
									background: url(../imgs/homepage/bg_service_gd_en_hover.gif) no-repeat 0 0;
								}
							#slideshow .p1 ul.services li.sys {
								margin: 3em 14px 0 0;
								padding: 115px 0 0 0;
								width: 94px;
								background: url(../imgs/homepage/bg_service_sys_en.gif) no-repeat 0 0;
							}
								#slideshow .p1 ul.services li.sys .hover {
									background: url(../imgs/homepage/bg_service_sys_en_hover.gif) no-repeat 0 0;
								}
							#slideshow .p1 ul.services li.mag {
								margin: 1.5em 0 0 0;
								padding: 112px 0 0 0;
								width: 134px;
								background: url(../imgs/homepage/bg_service_mag_en.gif) no-repeat 0 0;
							}
								#slideshow .p1 ul.services li.mag .hover {
									width: 134px;/* en */
									background: url(../imgs/homepage/bg_service_mag_en_hover.gif) no-repeat 0 0;
								}
		
								#slideshow .p1 ul.services li a {
									display: block;
									margin: 0 0 8px 0;
									padding: 0;
									overflow: hidden;
									text-indent: -1985px;
									z-index: 200;
									position:relative;
								}
									#slideshow .p1 ul.services li a.whatIts {
										height: 26px;
									}
									#slideshow .p1 ul.services li a.goProject {
										height: 30px;	
									}
							
							/* Easy Tooltip */
		
							#easyTooltip {
								/* background: url(../imgs/bg_whatits_hover.png) no-repeat 0 0; */ 
								color: #6d4107;
								z-index: 1000;
								margin-top: 85px;
								margin-left: -40px; 
								border: 1px solid #d4cec9;
								padding: 2px 5px !important;
								-webkit-border-radius: 5px;
								-moz-border-radius: 5px;
								background: none;
								overflow: visible;
								text-indent: 0;
								height: auto;
								width: auto;
							}
						
					#slideshow .p1 ul.sideLink {
						right: 45px;
						top: 2em;
						z-index: 15;
					}
						#slideshow .p1 ul.sideLink li a {
							width: 250px;
							overflow: hidden;
							text-indent: -1985px;
							height: 48px;
							margin-bottom: 1em;
						}
		
		
				/*======== p2 ========*/
				#slideshow .p2 {
					background: url(../imgs/homepage/bg_slideshow_p2_en.gif) no-repeat 0 0;
				}
		
					#slideshow .p2 ol {
						margin: 1em 0 1em 200px;
						padding: 0 0 0 24px;
						background: url(../imgs/homepage/bg_slideshow_p2_ul.gif) no-repeat 0 0;
						list-style: none;
						line-height: 200%;
					}
					
					#slideshow .p2 ul.sideLink {
						right: 0;
						top: 120px;
					}
						#slideshow .p2 ul.sideLink li a {
							margin-bottom: 0px;
							display: inline-block;
						}
		
				/*======== p3 ========*/
				#slideshow .p3 {
					background: url(../imgs/homepage/bg_slideshow_p3_en.gif) no-repeat 0 10px;
				}
					#slideshow .p3 .titleBar {
						position: relative;
					}
						#slideshow .p3 .titleBar h1 {
							margin: 0;
							padding: 0;
							float: left;
							width: 250px;
						}	
							#slideshow .p3 .titleBar h1 a { width: 250px;}
							
						#slideshow .p3 .titleBar ul.contactMore {
							position: absolute;
							left: 300px;
							top: 3.2em;
						}
							#slideshow .p3 .titleBar ul.contactMore li {
								float: left;
								display: inline;
							}
								#slideshow .p3 .titleBar ul.contactMore li a {
									padding: 0 0 0 32px;
									margin: 0;
									display: block;
									float: left;
									height: 25px;
									line-height: 25px;
								}
									#slideshow .p3 .titleBar ul.contactMore li a.quote {
										margin-right: 1em;
										background: url(../imgs/ico_quote_28x25.gif) no-repeat 0 center;
									}
									#slideshow .p3 .titleBar ul.contactMore li a.contactInfo {
										background: url(../imgs/ico_contactInfo_27x25.gif) no-repeat 0 center;
									}
		
							
					#slideshow .p3 .sideLink {
						position: absolute;
						top: .8em;
						right: 1em;
					}
		
		
						#slideshow .pageNav a {
							width: 50px;
							display: block;
							height: 14px;
							background: url(../imgs/homepage/bg_slideshow_p23_pNav_arrows_en.gif) no-repeat 0 0;
							overflow: hidden;
							text-indent: -1985px;
							z-index: 10002;
						}



/* ====================  ARTICLE ================== */
	
	/* ==================== about page ================== */

		#about #pageHd h1 {
			background: url(../imgs/about/bg_pageHd_about_h1_en.gif) no-repeat 0 0;
		}
		

			ul.menu li.aboutUs[class] a {
				margin-top: -10px;
				width: 220px;
				height: 57px;
				background: url(../imgs/about/bg_menu_ul_li_aboutUs_en.png) no-repeat right bottom;
			}
			ul.menu li.whyChooseUs[class] a {
				margin-top: -5px;
				width: 205px;
				height: 49px;
				background: url(../imgs/about/bg_menu_ul_li_whyChUs_en.png) no-repeat right bottom;
			}
			
				ul.menu li.aboutUs[class] a:hover, ul.menu li.aboutUs[class] a.active {
					background: url(../imgs/about/bg_menu_ul_li_aboutUs_en_hover.png) no-repeat;
				}
				ul.menu li.whyChooseUs[class] a:hover, ul.menu li.whyChooseUs[class] a.active {
					background: url(../imgs/about/bg_menu_ul_li_whyChUs_en_hover.png) no-repeat;
				}



				#about #content ul.titlebar li a {
					height: 37px;
					background: url(../imgs/about/bg_titlebar_ul_li_about_en.gif) no-repeat 0 0;
				}
					#about #content ul.titlebar li.studio a { width: 106px;  background-position: 0 0; }
					#about #content ul.titlebar li.team a { width: 94px; background-position: right 0;}
					#about #content ul.titlebar li.sixReasons a { margin-left: .5em; width: 170px; background-position: 0 bottom; }
					
						#about #content ul.titlebar li a:hover, #about #content ul.titlebar li a.current {
							background-position: 0 -38px;
						}
						#about #content ul.titlebar li.studio a:hover {
							background-position: 0 -38px;
						}
						#about #content ul.titlebar li.team a:hover, #about #content ul.titlebar li.team a.current {
							background-position: right -37px;
						}
						#about #content ul.titlebar li.sixReasons a:hover, #about #content ul.titlebar li.sixReasons a.current {
							background-position: 0 bottom;
						}
					
					/* ====== why us page ===== */
					#about #content ul.titlebar li a.studio { width: 106px; }
					#about #content ul.titlebar li a.team { width: 94px; background-position: right 0;}
					#about #content ul.titlebar li a.sixReasons { margin-left: .5em; width: 170px; background-position: 0 bottom; }
					
						#about #content ul.titlebar li a:hover, #about #content ul.titlebar li.current a {
							background-position: 0 -38px;
						}
						#about #content ul.titlebar li a.team:hover, #about #content ul.titlebar li.current a.team {
							background-position: right -37px;
						}
						#about #content ul.titlebar li a.sixReasons:hover, #about #content ul.titlebar li.current a.sixReasons {
							background-position: 0 bottom;
						} 



			.body p.contactNote {
				margin: 2.5em 0 2em 0;
				padding: 0 0 20px 70px;
				overflow: hidden;
				line-height: 150%;
			}
				.body p.contactNote a { display: block; }
				

		/* ========== sixReasonsList ========= */
		.sixReasonsList {
			width: 370px;
			float: left;
		}
			.sixReasonsList h2 {
				font-size: 28px;
				margin: .5em 0 .8em 0;
			}
			
			.sixReasonsList ul {}
				.sixReasonsList ul li {
					padding: 0 0 0 30px;
					margin-bottom: 5px;
					overflow: hidden;
				}
					.sixReasonsList ul li#first { background: url(../imgs/about/whyus/bg_about_whyus_p01_en.gif) no-repeat 0 0;}
					.sixReasonsList ul li#sec { background: url(../imgs/about/whyus/bg_about_whyus_p02_en.gif) no-repeat 0 0;}
					.sixReasonsList ul li#third { background: url(../imgs/about/whyus/bg_about_whyus_p03_en.gif) no-repeat 0 0;}
					.sixReasonsList ul li#forth { background: url(../imgs/about/whyus/bg_about_whyus_p04_en.gif) no-repeat 0 0;}
					.sixReasonsList ul li#fifth { background: url(../imgs/about/whyus/bg_about_whyus_p05_en.gif) no-repeat 0 0;}
					.sixReasonsList ul li#sixth { background: url(../imgs/about/whyus/bg_about_whyus_p06_en.gif) no-repeat 0 0;}
						.sixReasonsList li h3 { display: block; height: 20px; overflow: hidden; text-indent: -1985px; }
				

		/* ==================== services page ================== */

		#services #pageHd h1 {
			background: url(../imgs/services/bg_pageHd_services_h1_en.gif) no-repeat 0 0;
		}

			/* ====== title bar ========= */
			#services #content ul.titlebar {
				position: relative;
				background: url(../imgs/services/bg_titlebar_services_en.gif) no-repeat 40px 0;
			}

				#services #content ul.titlebar li {
					background: url(../imgs/services/bg_titlebar_ul_li_services_en.gif) no-repeat 0 0;
				}

				#services #content ul.titlebar li a {
					height: 32px;
					background: url(../imgs/portfolio/bg_titlebar_ul_li_portfolio_en.gif) no-repeat 0 0;
					position: absolute;
				}
					#services #content ul.titlebar li.wd a { 
						width: 112px; 
						background-position: 0 0;
						left: 353px;
						top: 31px;
					}
					#services #content ul.titlebar li.gd a { 
						width: 139px; 
						background-position: right 0;
						left: 467px;
						top: 31px;
					}
					#services #content ul.titlebar li.sysdev a { 
						width: 111px;
						background-position: 0 -63px; 
						left: 353px;
						top: 59px;
					}
					#services #content ul.titlebar li.mag a { 
						width: 136px; 
						background-position: right -63px;
						left: 470px;
						top: 59px;
					}
					
						#services #content ul.titlebar li a:hover, #services #content ul.titlebar li a.current {
							background-position: 0 -32px;
						}
						#services #content ul.titlebar li.gd a:hover, #services #content ul.titlebar li.gd a.current {
							background-position: right -32px;
						}
						#services #content ul.titlebar li.sysdev a:hover, #services #content ul.titlebar li.sysdev a.current {
							background-position: 0 bottom;
						}
						#services #content ul.titlebar li.mag a:hover, #services #content ul.titlebar li.mag a.current {
							background-position: right bottom;
						} 


		/* ======== web design ===== */
			#services #wd h2 { background: url(../imgs/bullet_cycle_20x21.gif) no-repeat 0 7px; padding: 0 0 0 28px; }
		

		/* ======== system develop ===== */
				#services ul.sysdevList {
					padding: 0;
				}
					#services ul.sysdevList li {
						background: none;
						padding: 0;
						margin: 0 0 5px 0;
					}
						#services ul.sysdevList li a {
							font-size: 16px;
							padding: 0 55px 0 0;
							background: url(../imgs/services/bg_more_en.gif) no-repeat right 0;
						}
						#services ul.sysdevList li a.active {
							background: url(../imgs/services/bg_less_en.gif) no-repeat right 0;
						}
						#services ul.sysdevList li p {
							margin: 0 !important;
							padding: 5px 0 1em 34px;
						}
	
		
		
		/* ==================== portfolio page ================== */
		
		#portfolio #pageHd h1 {
			background: url(../imgs/portfolio/bg_pageHd_portfolio_h1_en.gif) no-repeat 0 0;
		}
			
			/* ====== title bar ========= */
			#portfolio #content ul.titlebar {
				position: relative;
				background: url(../imgs/portfolio/bg_titlebar_portfolio_en.gif) no-repeat 20px 0;
			}
				#portfolio #content ul.titlebar li {
					background: url(../imgs/portfolio/bg_titlebar_ul_li_portfolio_en.gif) no-repeat 0 0;
				}
				#portfolio #content ul.titlebar li a {
					height: 32px;
					background: url(../imgs/portfolio/bg_titlebar_ul_li_portfolio_en.gif) no-repeat 0 0;
					position: absolute;
				}
					#portfolio #content ul.titlebar li.wd a { 
						width: 112px; 
						background-position: 0 0;
						left: 353px;
						top: 31px;
					}
					#portfolio #content ul.titlebar li.gd a { 
						width: 139px; 
						background-position: right 0;
						left: 467px;
						top: 31px;
					}
					#portfolio #content ul.titlebar li.sysdev a { 
						width: 111px;
						background-position: 0 -63px; 
						left: 353px;
						top: 59px;
					}
					#portfolio #content ul.titlebar li.mag a { 
						width: 136px; 
						background-position: right -63px;
						left: 470px;
						top: 59px;
					}
					#portfolio #content ul.titlebar li.all a { 
						width: 38px;
						height: 31px;
						background: url(../imgs/portfolio/bg_titlebar_ul_li_portfolio_tag-all_en.gif) no-repeat 0 0;
						left: 710px;
						top: 39px;
					}
					
						#portfolio #content ul.titlebar li a:hover, #portfolio #content ul.titlebar li a.current {
							background-position: 0 -32px;
						}
						#portfolio #content ul.titlebar li.gd a:hover, #portfolio #content ul.titlebar li.gd a.current {
							background-position: right -32px;
						}
						#portfolio #content ul.titlebar li.sysdev a:hover, #portfolio #content ul.titlebar li.sysdev a.current {
							background-position: 0 bottom;
						}
						#portfolio #content ul.titlebar li.mag a:hover, #portfolio #content ul.titlebar li.mag a.current {
							background-position: right bottom;
						} 
						#portfolio #content ul.titlebar li.all a:hover, #portfolio #content ul.titlebar li.all a.current {
							background-position: 0 bottom;
						} 


		
		/* ==================== contacts page ================== */

		#contacts #pageHd h1 {
			background: url(../imgs/contacts/bg_pageHd_contacts_h1_en.gif) no-repeat 0 0;
		}
		
			#contacts #content ul.titlebar {
				background: url(../imgs/contacts/bg_titlebar_contacts_en.gif) no-repeat 50px 0;
			}
				#contacts #content ul.titlebar li {
					background: url(../imgs/contacts/bg_titlebar_ul_li_contacts_en.gif) no-repeat 0 0;
				}
				#contacts #content ul.titlebar li a {
					height: 44px;
					background: url(../imgs/contacts/bg_titlebar_ul_li_contacts_en.gif) no-repeat 0 0;
				}
					#contacts #content ul.titlebar li.feedback a { width: 103px; background-position: 0 0; }
					#contacts #content ul.titlebar li.quote a { width: 103px; background-position: right 0; }
					
						#contacts #content ul.titlebar li a:hover, #contacts #content ul.titlebar li a.current {
							background-position: 0 bottom;
						}
						#contacts #content ul.titlebar li.quote a:hover, #contacts #content ul.titlebar li.quote a.current {
							background-position: right bottom;
						}

		#sidebar ul li ul.process {
			font-size: 10px;
		}