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

CSS Document

Coded by: Kefan Xie
xiekefan@gmail.com

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

body {
	margin: 10px 0;
	padding: 0;
}

a img {
	border: none;
}

a {
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

#wrapper {
	width: 879px;
	margin: 10px auto 10px;
}

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

Header

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

#header_home {
	position: relative; 
	width: 879px; 
	height: 314px; 
	margin-bottom: 18px; 
	background: url(../images/bg/bg_nav_home.gif) no-repeat 0 bottom;
}

#header {	
	position: relative; 
	width: 879px; 
	height: 125px; 
	margin-bottom: 18px; 
	background: url(../images/bg/bg_nav.gif) no-repeat 0 bottom;
}

#logo { 
	float: left; 
} 

#short_nav { 
	float: right; 
} 

#short_nav ul { 
	margin-top: 10px; 
	margin-right: 24px; 
} 

#short_nav ul li { 
	display: inline; 
	font: bold 0.7em arial; 
}

#short_nav ul li a { 
	color: #666666; 
}

#support_status { 
	position: absolute; 
	top: 90px; 
	right: 30px; 
} 

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

Navigation

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

#navi {
	clear: both; 
}

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

#navi ul li { 
	float: left; 
	margin-top: 5px; 
	padding-right: 2px; 
	background: url(../images/bg/bg_nav_tic.gif) no-repeat right 12px; 
} 

#navi ul li a { 
	float: left; 
	display: block; 
	height: 39px; 
	font: bold 1em "arial narrow";
	text-decoration: none; 
	color: #67a1bd; 
	text-indent: -9999px; 
} 

#nav1 {
	width: 57px; 
	margin-left: 5px; 
	background: url(../images/nav/nav1.gif) no-repeat; 
}

#nav2 {
	width: 70px; 
	background: url(../images/nav/nav2.gif) no-repeat; 
}

#nav3 {
	width: 111px; 
	background: url(../images/nav/nav3.gif) no-repeat; 
}

#nav4 {
	width: 92px; 
	background: url(../images/nav/nav4.gif) no-repeat; 
}

#nav5 {
	width: 117px; 
	background: url(../images/nav/nav5.gif) no-repeat; 
}

#nav6 {
	width: 77px; 
	background: url(../images/nav/nav6.gif) no-repeat; 
}

#nav7 {
	width: 73px; 
	background: url(../images/nav/nav7.gif) no-repeat; 
}

#nav1:hover {
	background: url(../images/nav/nav1_over.gif) no-repeat; 
}

#nav2:hover {
	background: url(../images/nav/nav2_over.gif) no-repeat; 
}

#nav3:hover {
	background: url(../images/nav/nav3_over.gif) no-repeat; 
}

#nav4:hover {
	background: url(../images/nav/nav4_over.gif) no-repeat; 
}

#nav5:hover {
	background: url(../images/nav/nav5_over.gif) no-repeat; 
}

#nav6:hover {
 	background: url(../images/nav/nav6_over.gif) no-repeat; 
}

#nav7:hover {
	background: url(../images/nav/nav7_over.gif) no-repeat; 
}

#nav1.selected {
	background: url(../images/nav/nav1_on.gif) no-repeat; 
}

#nav2.selected {
	background: url(../images/nav/nav2_on.gif) no-repeat; 
}

#nav3.selected {
	background: url(../images/nav/nav3_on.gif) no-repeat; 
}

#nav4.selected {
	background: url(../images/nav/nav4_on.gif) no-repeat; 
}

#nav5.selected {
	background: url(../images/nav/nav5_on.gif) no-repeat; 
}

#nav6.selected {
 	background: url(../images/nav/nav6_on.gif) no-repeat; 
}

#nav7.selected {
	background: url(../images/nav/nav7_on.gif) no-repeat; 
}

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

Content

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

#content {
}

#leftcol_home { 
	width: 286px; 
	float: left; 
}

.leftcol_box_home { 
	padding-bottom: 20px; 
	margin-bottom: 10px; 
	background: url(../images/bg/bg_box_left_home.gif) no-repeat 0 bottom; 
} 

.leftcol_box_home h2 { 
	width: 286px; 
	w\idth: 266px; 
	height: 45px; 
	he\ight: 35px; 
	margin: 0; 
	padding-top: 10px; 
	padding-left: 20px; 
	font: bold 1em "arial narrow"; 
	color: #666666; 
	background: url(../images/bg/bg_box_left_home_head.gif) no-repeat; 
} 

.leftcol_box_home p { 
	margin: 0 0 0 20px; 
	padding-right: 15px; 
	font: normal 0.8em arial; 
	color: #666666;
	line-height: 20px; 
} 

.leftcol_box_home form { 
	margin-top: 20px; 
} 

.leftcol_box_home blockquote { 
	position: relative; 
	margin: 0 20px 10px;
	padding-left: 25px; 
	font: normal 0.9em arial; 
	color: #555555; 
	line-height: 20px; 
	background: url(../images/quotation_small.gif) no-repeat right bottom; 
} 

.leftcol_box_home blockquote img { 
	position: absolute; 
	left: 0; 
	margin-right: 5px; 
} 

.leftcol_box_home span { 
	display: block; 
	margin-left: 20px; 
	font: normal 0.7em arial; 
} 

.leftcol_box_home span a { 
	font-style: italic; 
	text-decoration: none; 
	color: #3283a9; 
} 

.leftcol_box_home form { 
	width: 250px !important; 
} 

.form_label_home { 
	display: display; 
	float: left; 
	width: 50px; 
	margin-left: 20px; 
	font: bold 0.7em arial; 
	color: #666666; 
} 

.form_text_home { 
	width: 196px; 
	w\idth: 191px; 
	height: 22px; 
	padding-left: 5px; 
	margin-bottom: 4px; 
	background: url(../images/bg/bg_form_line.gif) no-repeat; 
	border: none; 
} 

.form_select_home { 
	width: 196px; 
	margin-bottom: 5px; 
} 

.form_textarea_home { 
	width: 240px; 
	height: 130px; 
	margin-left: 20px; 
	margin-bottom: 5px; 
	background: url(../images/bg/bg_form_box.gif) no-repeat; 
	border: none; 
} 

.button_submit_home { 
	margin-left: 17px; 
} 

.button_reset_home { 
	margin-left: 104px; 
} 

#leftcol { 
	float: left; 
	width: 241px; 
} 

.leftcol_box { 
	width: 241px; 
	margin-bottom: 10px; 
	padding-bottom: 20px; 
	background: url(../images/bg/bg_box_left.gif) no-repeat 0 bottom; 
} 

.leftcol_box h2 { 
	width: 241px; 
	w\idth: 221px; 
	height: 45px; 
	he\ight: 35px; 
	margin: 0; 
	padding-top: 10px; 
	padding-left: 20px; 
	font: bold 1em "arial narrow"; 
	color: #666666; 
	background: url(../images/bg/bg_box_left_head.gif) no-repeat; 
} 

.leftcol_box h3 { 
	width: 201px; 
	height: 32px; 
	he\ight: 27px; 
	margin: 0 auto; 
	padding-top: 5px; 
	font: bold 0.7em arial; 
	color: #333333; 
	text-align: center; 
	background: url(../images/bg/bg_menu_heading.gif) no-repeat; 
} 

.leftcol_box ul { 
	width: 200px; 
	margin: 0 auto 20px; 
	padding: 0; 
	list-style: none; 
} 

.leftcol_box ul li a { 
	display: block; 
	width: 200px; 
	w\idth: 180px; 
	padding: 4px 0 4px 20px; 
	font: normal 0.9em arial; 
	color: #3283a9; 
	text-decoration: none; 
	border-bottom: 1px solid #666666;
	background: url(../images/sidebar_bullet.gif) no-repeat 0 6px; 
} 

#service_ad { 
	display: block; 
	text-align: center; 
} 

#leftcol p { 
	margin: 0 0 0 20px; 
	font: normal 0.8em arial; 
	color: #666666; 
	line-height: 20px; 
} 

#leftcol form { 
	margin-top: 20px; 
} 

.form_label { 
	display: display; 
	float: left; 
	width: 45px; 
	margin-left: 20px; 
	font: bold 0.7em arial; 
	color: #666666; 
} 

.form_label_long { 
	display: display; 
	float: left; 
	margin-left: 20px; 
	font: bold 0.7em arial; 
	color: #666666; 
	width: 150px; 
} 

.form_text { 
	width: 155px; 
	w\idth: 150px; 
	height: 22px; 
	padding-left: 5px; 
	margin-bottom: 4px; 
	background: url(../images/bg/bg_form_line_short.gif) no-repeat; 
	border: none; 
} 

.form_textarea { 
	width: 199px; 
	height: 80px; 
	margin-left: 20px; 
	margin-bottom: 5px; 
	background: url(../images/bg/bg_form_box_short.gif) no-repeat; 
	border: none; 
} 

.button_submit { 
	margin-left: 17px; 
} 

.button_reset { 
	margin-left: 64px; 
} 

#rightcol_home { 
	float: right; 
	width: 593px; 
} 

.home_box { 
	float: left; 
	display: inline; 
	width: 286px; 
	height: 221px; 
	margin-left: 10px; 
	margin-bottom: 10px; 
	background: url(../images/bg/bg_front_box.gif) no-repeat; 
} 

.home_box h2 { 
	margin: 0; 
	padding-top: 10px; 
	padding-left: 15px; 
	font: bold 1em "arial narrow"; 
	color: #3283a9; 
} 

.home_box p { 
	padding: 0 15px; 
	margin: 10px 0 10px 0; 
	font: normal 0.8em arial; 
	color: #666666; 
	line-height: 20px; 
} 

.home_box img { 
	float: left; 
	margin: 0 10px 15px 15px; 
} 

.home_box span { 
	padding-right: 20px; 
	font: normal 0.7em arial; 	
} 

.home_box a { 
	display: block; 
	clear: both; 
	width: 246px; 
	height: 30px; 
	margin: auto; 
	padding-top: 10px; 
	text-align: center; 
	font: bold 0.7em arial; 
	color: #666666;
	text-decoration: none; 
	background: url(../images/bg/bg_view_port.gif) no-repeat; 
} 

.home_box a:hover { 
	text-decoration: underline; 
} 


#home_content { 
	clear: both; 
	width: 582px; 
	margin: 10px 0 10px 10px; 
	padding-bottom: 20px; 
	background: url(../images/bg/bg_content_home.gif) no-repeat 0 bottom; 
} 

#home_content h2 { 
	height: 40px; 
	he\ight: 30px; 
	margin: 0; 
	padding-top: 10px; 
	padding-left: 20px; 
	font: bold 1em "arial narrow"; 
	color: #3283A9; 
	background: url(../images/bg/bg_content_home_head.gif) no-repeat; 
} 

#home_content p { 
	margin: 0 20px 0px; 
	font: normal 0.85em arial; 
} 

#home_content p a { 
	color: #666666; 
} 

#home_content p a:hover { 
	color: #3283a9; 
	text-decoration: none; 
}

#rightcol { 
	float: right; 
	width: 638px; 
	margin-bottom: 10px; 
} 

#main { 
	float: right; 
	width: 627px; 
	padding-bottom: 20px; 
	background: url(../images/bg/bg_content.gif) no-repeat 0 bottom; 
} 

#main h2 { 
	height: 50px; 
	he\ight: 35px; 
	margin: 0; 
	padding: 15px 20px 0; 
	font: bold 1em "arial narrow";
	color: #666666;
	background: url(../images/bg/bg_content_head.gif) no-repeat; 
} 

#main h2 span { 
	float: right; 
	color: #666666; 
} 

#main h2 span em { 
	padding-left: 10px; 
	font-style: normal; 
	color: #3283a9; 
} 

#inner_img { 
	float: left; 
	display: inline; 
	margin: 0 20px; 
} 

#inner_p { 
	float: left; 
	width: 350px; 
	margin: 10px 0 0 0; 
	font: normal 0.7em arial; 
	color: #666666; 
	line-height: 20px; 
} 

#inner_p strong { 
	display: block; 
	margin-bottom: 5px; 
	font: normal 1.2em arial; 
	color: #666666;
} 

#main h3 { 
	clear: both; 
	margin: 0; 
	padding: 15px 20px; 
	font: bold 1em "arial narrow";
} 

#portfolio_imgs { 
	margin-left: 10px; 
	margin-bottom: 10px; 
} 

#portfolio_imgs img { 
	float: left; 
	display: inline; 
	margin-left: 10px; 
	padding: 4px; 
	background: url(../images/bg/bg_portfolio.gif) no-repeat; 
} 

.boxed_span { 
	display: block; 
	clear: both; 
	width: 580px; 
	w\idth: 570px; 
	height: 23px; 
	he\ight: 19px; 
	margin-left: 20px; 
	padding-top: 4px; 
	padding-left: 10px; 
	font: normal 0.7em arial; 
	border: 1px solid #cccccc; 
} 

.boxed_span a {
	font-weight: bold; 
	color: #3283a9; 
	text-decoration: none; 
} 

.boxed_span a:hover { 
	text-decoration: underline; 
} 

.main_p { 
	width: 580px; 
	margin: 10px 0 0 20px; 
	font: normal 0.7em arial; 
	color: #666666; 
	line-height: 20px; 
} 

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

Footer

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

#footer {
	clear: both; 
	width: 879px; 
	height: 71px; 
	background: url(../images/bg/bg_footer.gif) no-repeat; 
}

#footer ul{
	margin: 0 auto; 
	padding: 0; 
	list-style: none; 
	display:table;
	white-space:nowrap;
}

#footer ul li{
	display:table-cell;
}

#footer ul a{
	display: block;
	margin: 20px 10px 0; 
	font: bold 0.7em "arial narrow"; 
	color: #666666; 
	text-decoration: none; 
}

#footer ul a:hover { 
	text-decoration: underline; 
} 

#footer span { 
	display: block; 
	margin-top: 5px; 
	font: normal 0.7em arial; 
	color: #666666; 
	text-align: center; 
} 

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

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 */