﻿@import url(reset.css);
html, body{
	font-size: 100%;
	height: 100%;
}
html { 
	overflow-y: scroll; /* force scrollbars */
}
.clear {clear:both;}
body{
	font-family:"Lucida Grande",Tahoma,Verdana,sans-serif;
	background: #5d86af;	
	color: #fff;
	line-height: 1.4;
	font-size: 0.9em;

}
h1,h2,h3,h6{
	color: #FFEF6C;
}
h6 {padding:0 0 0 5px;}
strong{
	color: #333;
}
h1,h3{
	margin: 0 0 0.75em 0;
}
h1{
	font-size: 1.4em;	
}
h2{
	font-size: 1.1em;
}
h2 a {
	color:#FFEF6C;
}
h3{
	font-size: 1em;
}
h6{
	font-size: 1em;
}
small{
	font-size: 0.75em;
}
a:link{
	color: #FFFFAF;
	text-decoration: none;
}
a:visited{
	color: #FFFFAF;
	text-decoration: none;
}
p{
	margin: 1em 0;
}
/* @end */

/* @group Site */

#site{
	height: 100%;
	text-align:center;
	margin:0 auto;
	padding:0;
}

/* @end */
/* @group Common Classes */

.section p:first-child{
	margin-top: 0;
}
.section p:last-child{
	margin-bottom: 0;
}
.sect{
	font-style: normal;
}
/* @end */

/* @group Card */

#card{
	width: 470px;
	margin: 0 auto;
	padding: 2em 0 2em 0;
	position: relative;
	z-index: 2;
}


/* @group Header */

#header{
	background: url(images/bg.png) 0 0 no-repeat;
	padding:2em 0 0 0;
	text-align:left;

}
#header .content{
	padding: 0  40px 0 30px;
	position: relative;
	left:10px;
	min-height: 56px;
	height: 56px;
	border-bottom: 0;

}
#header .logo{
	background: url(images/logo.png) 0 0 no-repeat;
	float:left;
	width:59px;
	height:53px;
	color:#ccc;
	margin:2px 0 0 0;
}
#header h1{
	font-size:15px;
	margin: 0;
	padding:5px 0 0 0;
}
#header .title{
	font-size: 11px;
	color:#fff;
}
#header .beta{
	font-size: 9px;
	color:#7298bf;
}
#header .rss {
	font-size: 9px;
	color:#7298bf;
	float:right;
}
/* @end */

/* @group Main */

#main{
	background:#5d86af url(images/main_content_repeat_y.png) 0 0px repeat-y;
	border-top: 0;
	padding:0 18px 0 29px;
	overflow: hidden;
	text-align:left;
}

#main_content{
	padding: 0px 10px 0 0px;	
	margin:0;
}
.error4 {font-size:12px;}
#main_content #blog ul,#main_content #about ul,#main_content #contact dl,#main_content #works ol{
	height:26px;
	background: url(images/nav_bg.png) 0 0 repeat-x;
}

#main_content #blog li,#main_content #about li,#main_content #contact dl dt,#main_content #works ol li {
	background: url(images/subject_selected_left_cap.gif) 0 0 no-repeat !important;
	display: block;
	float: left;
	height: 26px;
	padding-left: 5px;
	margin:0 6px 0 2px;
}
#main_content #blog li a,#main_content #about li a,#main_content #contact dl a,#main_content #works ol li a{
	background: url(images/subject_selected_right.gif) right 0 no-repeat !important;
	display: block;
	float: left;
	height: 26px;
	padding:6px 5px 0 0px;
	margin-right: 6px;
	font-weight: bold;
	font-size:11px;
	color:#666666;
}
#main_content #works ol a:hover {
	color:#fff;
}
/* @group About */

#blog{
	width: 412px; /* fix for jQuery height */
	color:#fff;
}
.section{
	 padding: 6px;
}
#blog #sytao {margin:3px 0 0 10px;font-size:10px;}
#stat a{display:none;}
/* @end */

/* @group About */
#about{
	width: 412px; /* fix for jQuery height */
	color:#fff;
}
#about .section{
	 padding: 10px;
}

/* @group About */
#4error{
	width: 412px; /* fix for jQuery height */
	color:#fff;
}
#4error .section{
	 padding: 10px;
}

/* @group Contact */

#contact{
	width: 413px; /* fix for jQuery height */
	
}
#contact .section{
padding: 6px;
}
#contact p,#about p{
	display:none;

}
#contact dl{
	padding:0;
	margin:0;
}
#contact li div{
	padding: 3px 10px;	
 	position: relative;
}
#contact li div div{
	padding: 0;
	border: 0;
}
#contact li div a{
	display: block;
}
#contact li div strong{
	display: block;
	width: 20px;
	text-indent: -9000px;
	float: left;
	margin-right: 7px;
	height: 20px;
	opacity: 0.3;
	-moz-opacity:0.3;
	overflow: hidden;
}
#contact .personal,#contact .work {
	color: white;
}
#contact li.address .fn, 
#contact li.address .org{
	color: white;
	font-weight: bold;
	
}
.fn a {font-size:0.8em;}
#contact li.address .fn strong, 
#contact li.address .org strong{
	background: url(images/contact_location_icon.png) 0 0 no-repeat;
	position: relative;
	top: 2px;
}
#contact li.address .fn strong{
	background: url(images/contact_person_icon.png) 0 0 no-repeat;	
	top: 0;
}
#contact li.address .adr{
	padding-left: 27px;
}
#contact li.tel div strong{
	background: url(images/contact_phone_icon.png) 0 0 no-repeat;	
}
#contact li.url div strong{
	background: url(images/contact_url_icon.png) 0 0 no-repeat;	
}
#contact li.email div strong{
	background: url(images/contact_email_icon.png) 0 0 no-repeat;	
}
#contact li.resume div strong{
	background: url(images/contact_resume_icon.png) 0 0 no-repeat;	
}
#contact li.qq div strong{
	background: url(images/contact_im_icon.png) 0 0 no-repeat;	
}
#contact li.yim div strong{
	background: url(images/contact_yim_icon.png) 0 0 no-repeat;	
}
#contact li.gtalk div strong{
	background: url(images/contact_gtalk_icon.png) 0 0 no-repeat;	
}
#contact li div:hover strong{
	opacity: 1;
	-moz-opacity:1;
}


/* @end */


/* @group works */

#works{
	width: 413px; /* fix for jQuery height */
}

ul.entry_c {float:left;}
ul.entry_c li img{
	margin:0;
	padding:0;
	list-style:none;
	border:0;
	text-decoration:none;
	position:absolute;
	width:80px;
	height:80px;

}
ul.entry_c li{
	margin:15px 0px 0px 0;
	float:left;
	position:relative;
}
ul.entry_c li a{
	display:block;
	position:relative;
	float:left;	
	width:80px;
	height:80px;
	text-indent:-1000em;
	overflow:hidden;
	z-index:1;						
}
ul.entry_c li.miniature img{
	width:65px;
	height:63px;
	top:7px;
	left:15px;
}			
ul.entry_c li.miniature a{
	background:url(images/miniature.png) 0 0 no-repeat;
	width:90px;
	height:82px;

	
}
ul.entry_c li.miniature{
	background:url(images/blank_insert.gif) 12px 3px no-repeat;	

}



.entry_c  p {
				border:2px solid #d7e1ed;

}

#works .thumb {float:left; width:270px;font-size: 12px;padding:15px 0 0 0;}
#works .d {text-align: right;width:270px;padding:10px 0 0 0 ;margin:0 auto;}
#works li h2 {float:float;;width:270px;}
#works p {
	text-indent: 1em;
	font-size: 12px;
}

/* @end */

/* @group Nav */

#nav{
	background: url(images/bg.png) -29px -84px no-repeat;
	height: 40px;
	white-space: nowrap;
	padding:0 0 0 10px;
}
#nav a{
	color: #222;
	text-decoration: none;
	display: block;
	height: 39px;
	line-height: 40px;
	white-space: nowrap;
	float: left;
	font-weight: bold;
	font-size: 12px;
	padding:0;
	padding-right: 10px;
}
#nav li{
	display: block;
	float: left;
	height: 39px;
	padding-left: 10px;
	margin-right: 6px;
}
#nav li.current{
	background: url(images/nav_selected_left_cap.gif) 0 0 no-repeat !important;
}

#nav li.current a{
	background: url(images/nav_selected_right.gif) right 0 no-repeat !important;
	cursor:pointer;
}

#nav li a:active span{
	position: relative;
	top: 1px;
}
#nav li:hover{
	background: url(images/nav_selected_left_cap.gif) 0 -40px no-repeat;
	cursor:pointer;
}
#nav li:hover a{
	background: url(images/nav_selected_right.gif) right -40px no-repeat;
	cursor:pointer;
}

/* @end */

.entry {
	font:normal 12px "Lucida Grande",Verdana,Arial;
	line-height:22px;
	padding:5px 5px 5px 5px;
}

.entry p {line-height:18px; }
.emtry li {list-style-type:none;
}
.entry strong {
	color:#FFEF6C;
}
.entry strong.white {
	color:#fff;
}
.entry img {
	border:2px solid #d7e1ed;
	display:block;
}
.wp-smiley img {
	border:none;
}
.entry-meta {
	font-size:9px;
	color:#FFEF6C;
}
.post{margin-bottom:8px;text-align:left;}
.post small {padding:0 0 0 5px;}
.post .more-link{clear:both;font-size:10px;text-decoration: underline;padding:0 0 2px 0 ;}
.post h3 {padding:0;margin:0;}
.post h3 a {border-bottom:2px solid #FFEF6C;color:#FFEF6C;}
.postmetadata {margin:0;clear:both;height:20px;background:url(images/line.jpg) no-repeat 0 0;font-size:0.75em;text-align:center;}
.work_line {margin:0;clear:both;height:5px;background:url(images/work_line.png) no-repeat 0 0;font-size:0.75em;text-align:center;}

#prefix {
	color:#fff;
	margin:0 3px;
	padding:2px 0px 2px 3px;
	_padding:3px -2px 1px 2px;
	*padding:3px 0px 1px 4px;
}

.pages {
	font-size:11px;
    color:#fafafa;
    height:16px;
    margin:5px 0;
    overflow:hidden;
	padding:0 0 0 0px;
}

.pages em {
    font-style:normal;
    height:14px;
	display:none;
}

.pages a,.pages em {
    float:left;
    line-height:14px;
    margin:0 2px;
    padding:0 2px;

    text-decoration:none;
}

.pages a:hover {
	color:#FFEF6C;
}

.pages strong {
    float:left;
    color:#fff;
    line-height:12px;
    margin:0 2px;
    padding:0 2px;
    background:#E5B429;
    border-top:1px solid #f59e80;
    border-left:1px solid #f59e80;
    border-right:1px solid #A46F07;
    border-bottom:1px solid #A46F07;
}


#stat {
	font-size:12px;
	color:#fafafa;
	line-height:30px;
	text-align:center;
margin: 0px 10px 0 0px;	

}
#stat strong {
    color:#fff;
    margin:0 1px;
    padding:0px 2px 2px 2px;
    background:#E5B429;
    border-top:1px solid #f59e80;
    border-left:1px solid #f59e80;
    border-right:1px solid #A46F07;
    border-bottom:1px solid #A46F07;

}

/* @group Footer */

#footer{
	background: url(images/bg.png) 0 -345px no-repeat;
	height: 46px;	
	padding: 0 10px;
	color: #fff;
	text-shadow:0 -1px 1px black;
	text-decoration: none;	
	font-size: 0.85em;
	line-height: 26px;
	text-align: center;
}
#footer .yahoo {display:none;}

/* @end */

/* @group Script enabled styles */

body.script #blog,
body.script #contact,
body.script #works,
{
	display: none;
}

/* @end */







 .alt {

	border-left: 1px solid #FFFFAF;
}
/* Begin comments*/
.commentlist li, #commentform input, #commentform textarea {
	font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}
.commentlist li ul li {
	font-size: 1em;
}

.commentlist li {
	font-weight: bold;
}

.commentlist li .avatar { 
	float: right;
	border: 1px solid #eee;
	background: #fff;
	}

.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: .9em;
	}
.says {font-size: .8em;}
.commentlist p {
	font-weight: normal;
	line-height: 1.2em;
	text-transform: none;
	}

#commentform p {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

.commentmetadata {
	font-size:.8em;
	font-weight: normal;
	}


h3#comments ,#respond h3{
	padding: 0 5px;
	}
#commentform input {
	width: 160px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}

#commentform {
	margin: 5px 10px 0 5px;
	}
#commentform textarea {
	width: 100%;
	padding: 2px;
	}

#respond {padding:0 5px 0 0;margin:0 0 10px 0;}
#respond:after {
		content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;
	}
#commentform #submit {
	margin: 0 0 15px auto;
	float: right;
	}
/* End Form Elements */



/* Begin Comments*/
.alt {
	margin: 0;
	padding: 10px;
	}

.commentlist {
	width:400px;
	padding: 0 5px;
	text-align: justify;
	}

.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 10px;
	list-style: none;

	}
.commentlist li ul li { 
	margin-right: -5px;
	margin-left: 10px;
}

.commentlist p {
	margin: 10px 5px 10px 0;
}
.children { padding: 0; }

#commentform p {
	
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentmetadata {
	margin: 0;
	display: block;
	}
/* End Comments */
/* End comments */
/* post navi */
#post-navi {height:20px;font-size:12px;padding:0 5px 0 5px; }
#post-navi .prevnavi { float:left; }
#post-navi .nextnavi { float:right; }


.link-entry {

    margin:10px auto 10px;
    padding:0 5px;

    list-style:none;
}
.link-entry h3 {font-size:14px;padding:0 0 0 2px;}
.link-entry ul li{

    list-style:none;
}
.blogroll {margin:0 0 20px 0;}.blogroll {margin:0 0 20px 0;}
.blogroll li {font-size:12px;}
.blogroll li a {font-size:14px;font-weight: bold;color:#FFEF6C;}