@charset "utf-8";
/* global css */
html,body {height:100%;}
body{background:url(../images/bgimage.png) repeat-x #000;}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,th,img,div,blockquote,dl,dt,dd,blockquote, pre,object,textarea,input{margin:0;padding:0}
body,select,input,textarea{font:12px/15px Arial, Helvetica, sans-serif; color: #66410B;}	
input,select,img{vertical-align:middle}
h1,h2,h3,h4,h5,h6{font-size: 12px; font-weight: normal;}
dfn,em,cite,address,caption{font-style:normal}
fieldset,img,abbr {border: 0;} 
img,object,embed{vertical-align: top;}
ul,ol{list-style-type:none;}
table{border-collapse:collapse;;width:100%; border-spacing:0;}
caption,th{text-align:left;}
table th{line-height:25px;height:25px;}

a{color: #3F2606;text-decoration:none;}
a:hover{color: #835313;}

#featured,#case_2 h2,#case_3 h2{text-indent: -2000px; overflow: hidden;}

#main:after,#explain:after,.case_wrapper:after{content:''; display: block; clear:both}

/* header */
#main_wrapper{width:900px;margin:0px auto;min-height:86.80%;}
#main_wrapper2{width:900px;margin:0px auto;min-height:86.35%;}
#header{
	width: 883px;
	margin: 0 auto;
	height: 174px;
	position: relative;
}

p strong{color:red;}

#logo{
	padding: 0 0 10px 11px;
}

#site_intro{
	position: absolute;
	top: 65px;
	right: 0;
	font-size: 14px;
	line-height: 13px;
	color: #ccc;
	text-align: center;
}

#site_intro strong{
color:#fff;
font-size:14px;
}

#livechat{
	position: absolute;
	top: 13px;
	right: 0;
}	

#navsearch{
	height: 68px;
	background: url(../images/mainnavsearch-trans.png) no-repeat;
	width:883px;
}

#mainnav{
	padding: 25px 0 0;
	width:883px;
}
#mainnav,#mainnav ul,#mainnav li{
	float: left;
}
#mainnav li{
	width: 144px;
	font-size: 11px;
	position: relative;
	text-align: center;
}
#mainnav ul ul{
	display: none;
}
#mainnav ul.c{
	position: absolute;
	top: 15px;
	left: 0;
	width:144px;	
	display: block;
}
#mainnav ul.c li{
	width: auto;
	float: none;
}
#mainnav li a,#subnavarea a{
	color: #999;
}

#mainnav li a:hover,#mainnav li.on a,#subnavarea a:hover{
	color: #FAF9F9;
}

#topsearch{
	float: right;
	width: 195px;
	position: relative;
	padding: 20px 15px 0 0;
}
#topsearch legend{
	display: none;
}
#topsearch input{
	background: none;
	border: 0;
	width: 140px;
	display: none;
	margin-right:10px;
	padding-top: 2px;
}
#topsearch input.click_none{
	float: left;
	display: block;
	margin-top: 5px;
}
#topsearch input.btn1{
	width: 40px;
	height: 27px;
	font-size: 100em;
	overflow: hidden;
	cursor: pointer;
	margin:0;
	padding: 0;
	display: block;
	float: left;
}

/* center */
#main{
	width: 883px;
	margin: 0 auto;
	padding-bottom: 25px;
}

#subnavarea{
	width:100%;
	margin-bottom: 17px;
	font-size: 11px;
	position: relative;
}
#pathnav{
	height: 28px;
	width: 507px;
	color: #999;
	padding: 11px 0 0 15px;	
	background: url(../images/bc-trans.png) no-repeat;
}
#pathnav p{
	position: relative;
}
#pathnav span{
	margin: 0 15px;
}
#subnav{
	position: absolute;
	top: 11px;
	right: -22px;
}
#subnav h2{
	color: #FAF9F9;
	font-size: 11px;
}
#subnav ul,#subnav h2,#subnav li{
	float: left;
	display: inline;
}
#subnav h2,#subnav li{
	margin-right: 22px;
}

/* Welcome to ProDesigning Web Development */
#explain{
	width: 100%;
	padding: 6px 0 28px;
}
#explain_side{
	float: left;
	width: 323px;
	height: 264px;
	padding: 8px;
	position: relative;
	background: url(../images/explain_side.gif) #3D3933 no-repeat;
}
#explain_side{
	width: 323px;
	height: 264px;
}

#explain_side .image_slide{
z-index:0;
}

#featured{
	position: absolute;
	top:-6px;
	right:-7px;
	width: 151px;
	height: 152px;
	background: url(../images/featured.png) no-repeat;
	z-index:1;
	}

#explain_content{
	float: right;
	width: 490px;
	font-size: 13px;
	line-height: 16px;
}
#explain_content h2{
	font-size: 19px;
	line-height: 23px;
	color: #fff;
}
#explain_content p{
	margin-bottom: 15px;
}
p#founder{
	color: #fff;
	text-align:right;
	padding-right: 20px;
	margin: -15px 0 0;
}

/* Random Working */
#random_working{
	width: 890px;
	height: 115px;
	margin-left: -7px;
	position: relative;
	background: url(../images/random_working.gif) no-repeat;
}
#random_working h2{
	color: #ccc;
	width: 195px;
	float: left;
	line-height: 18px;
	text-align: center;
	padding: 43px 0 0 65px;
}
#random_working h2 a{
	color:#660;
	text-decoration:none;
}
#random_working h2 a:hover{
	color:#660;
	text-decoration:underline;
}
#random_working ul{
	float: right;
	width: 585px;
	margin: 19px 11px 0 0;
	display: inline;
	padding: 5px 0 5px 8px;
	background: #706352;
}
#random_working li{
	float: left;
	width: 109px;
	height: 72px;
	margin-right: 8px;
	display: inline;
	background: #fff;
}

/* footer */
#footer{
	width:100%;
	margin: 0 auto;
	height: 66px;
	padding-top: 44px;
	background: url(../images/footer-trans.png) no-repeat;
}
#footer_wrap{width:900px;margin:0px auto;}
#footer_nav{
	float: left;
	width: 430px;
	padding-top: 20px;
	position: relative;
}
#footer_nav p{
	text-align: center;
}
#footer_nav ul{
	height: 11px;
	font-size: 11px;
	line-height: 11px;
	overflow: hidden;
	margin: 0 0 8px -11px;
}
#footer_nav ul li{
	float: left;
	padding-left: 10px;
	margin:0 10px 0 -1px;
	border-left: 1px solid #3F2606;
}
#footer_info{
	float: right;
	width: 300px;
	text-align: right;
	font-size: 13px;
	position: relative;
}
#site_author{
	font-size: 10px;
	color: #F00;
	margin: 8px 0 5px;
}
#site_author img{
	margin-left: 3px;
}
#declare{
	font-weight: bold;
}
#declare strong{
	color: #77480C;
	font-weight: normal;
}

.case_wrapper{
	width: 100%;
	margin-bottom: 30px;
}
.case_wrapper h2{
	color: #fff;
	font-size: 18px;
	margin-bottom: 25px;
	line-height: 22px;
}

.case_list1,.case_list2,.case_list3{
	width:950px;
	margin:0 -70px 0 0;
}
.case_list1 li,.case_list2 li,.case_list3 li{
	float: left;
	margin-right: 56px;
	position: relative;
	background: #fff;
}

.case_list1 span.cn_t,.case_list2 span.cn_t,.case_list3 span.cn_t{
	top: 0;
	left: 0;
	width: 28px;
	height: 24px;
	position: absolute;
	background: url(../images/cn_t.png) no-repeat;
}
.case_list1 span.cn_b,.case_list2 span.cn_b,.case_list3 span.cn_b{
	bottom: 0;
	right:0;
	width: 23px;
	height: 20px;
	position: absolute;
	background: url(../images/cn_b.png) no-repeat;
}

.case_list1 li,.case_list1 li img{
	width: 178px;
	height: 124px;
}
.case_list2 li,.case_list2 li img{
	width:100px;
	height: 79px;
}
.case_list3 li,.case_list3 li img{
	width:131px;
	height: 50px;
}
.case_list3 span.cn_b{
	right:-1px;
}


#case_2 h2{
	height: 15px;
	background: url(../images/title.gif) no-repeat;
}
#case_3 h2{
	height: 18px;
	background: url(../images/title.gif) 0 -15px no-repeat;
}

/**/
h1{
	font-size:18px;
	line-height: 22px;
	color: #fff;
}
#mainbar{
	float: left;
	width: 940px;
	padding-top: 10px;
}
#mainbar p{
	margin-bottom: 15px;
}
html #mainbar {
	position: relative;
}

#sidebar{
	float: right;
	width: 240px;
	margin-top: 23px;
}
.box{
	width: 100%;
	color: #515151;
	margin-bottom: 17px;
	background: url(../images/box.gif) -240px 0 repeat-y;
}
.box h2{
	color: #fff;
	position: relative;
	top: -4px;
	padding: 12px 8px 7px ;
	background: url(../images/box.gif) 0 -26px no-repeat;
}
.box .bb{
	padding: 10px 13px;
	margin: 0 1px;
	border-top: 1px solid #2B251C;
	background: url(../images/box_b.gif) left bottom no-repeat;
}

#website_service .bb{
	padding: 0 1px;
}
#website_service ul{
	padding-bottom:3px;
}
#website_service li{
	padding:4px 4px 5px;
	margin-top: -1px;
	border-top:1px solid #2B251C;
}
#website_service li a{
	color: #515151;
	height: 26px;
	line-height: 26px;
	display: block;
	padding: 0 9px;
}
#website_service li a:hover{
	color: #fff;
	background: url(../images/box.gif) no-repeat;
}

.small{
	font-size: 10px;
}
.readmore{
	height: 21px;
}
.readmore a{
	float: right;
	width:65px;
	height: 20px;
	color: #fff;
	font-size: 9px;
	line-height: 20px;
	padding-top: 1px;
	text-align: center;
	background: url(../images/readmore.gif) no-repeat;
}
.readmore a:hover{
	color: #515151;
}

/* contact */
#contact{
	color: #ccc;
}
#contact ul{
	float: left;
	width: 345px;
	margin-top: 24px;
}
#contact li{
	width: 100%;
	height: 35px;
	font-size: 0;
	margin-bottom: 15px;
}
#contact .form_l{
	float:left;
	width:93px;
	color: #794D11;
	font-size: 14px;
	line-height: 35px;
}
#contact input,#contact select,#contact textarea{
	font-size: 16px;
	color: #794D11;
	line-height: 16px;
}
#contact .form_l span{
	color: #ccc;
}
#contact .form_r{
	float: left;
	height: 35px;
	width: 250px;
	background: url(../images/form_e.gif) no-repeat;
}
#contact .form_r input{
	background: none;
	border: 0;
	width: 230px;
	margin: 10px 0 0 8px;
}
#contact .tt_info{
	width: 496px;
	height: 147px;
	margin-bottom: 15px;
	background-position: 0 -70px;
}
#contact .tt_info textarea{
	width: 480px;
	height: 137px;
	background: none;
	border:0;
	padding-right: 8px;
	margin: 4px 0 4px 8px;
}
#contact .select_bg{
	position: relative;
	background-position: 0 -35px;
}
.btn{
	width: 100%;
	clear: both;
}
#contact .btn input{
	height: 28px;
	border: 0;
	font-size: 150em;
	overflow: hidden;
	cursor: pointer;
	background: url(../images/form_e.gif) no-repeat;
}
#contact .btn input.sub_btn{
	width: 83px;
	margin:0 28px 0 93px; 
	background-position: 0 -217px;
}
#contact  .btn input.reset_btn{
	width: 112px;
	position: relative;
	background-position:-112px -217px;
}

.contact_info{
	float: right;
	width: 464px;
}
.contact_info h2{
	font-size: 14px;
	line-height: 16px;
	color: #794C11;
	margin-bottom: 3px;
}
.contact_info p{
	margin-bottom: 17px;
}

#contact #myselectbox_container{
	position: absolute;
	top: 35px;
	left: 0;
	color:#794D11;
	border: 1px solid #ccc;
	background: #fff;
}
#contact .select_bg ul{
	float: none;
	margin: 0;
	width: auto;
}
#contact .select_bg ul li{
	font-size: 14px;
	height:auto;
	margin: 0;
	width: auto;
	padding: 3px;
	cursor: pointer;
}
#contact #myselectbox_container ul li.selected{
	background-color: #EAF2FB;
}
#myselectbox_input{
	cursor: pointer;
}
ul#portfolio-filter{ margin: -20px 0; padding: 0; height: 64px; line-height: 64px;}
ul#portfolio-filter li{ display: inline; }
ul#portfolio-filter a{ margin-right: 0.5em; padding: 0.5em 1em; background: #724B10; color: #CCC; font-weight: bold; text-decoration: none; }
ul#portfolio-filter a:hover, ul#portfolio-filter a.current{ color: #FFF; }
ul#portfolio-filter a.current{ background-color: #251501; }

ul#portfolio-list{ margin: 36px 0 0 0; padding: 0; list-style: none; }
ul#portfolio-list li{ width: 165px; height: 160px; display: block; float: left; margin-right: 18px; overflow: hidden; }
ul#portfolio-list li a{ display: block; width: 163px; height: 120px; overflow: hidden; border: 1px solid #CDCDCD; background: #eee; }
ul#portfolio-list li p{ font-size: 11px; line-height: 15px; color: #AAA; margin: 5px 0; }