/*Designed by JJ.Ying
http://IconMoon.com
July. 2011*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
	margin:0;
	padding:0;
	border:0;
	font-size: 100%;
	vertical-align: baseline;
	outline:none;
}

html{
	background:#fff url('images/main2.png') repeat-x 0 -378px;
}
body{
	font-size:14px;
	font-family:Cabin, Calibri, 'Lucida Sans', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, Verdana;
	text-align:center;
	color:#30384c;
	background:url('images/bg.jpg') no-repeat center top;
}
a{
	text-decoration:none;				
	color:#30384c;
}
a:hover{
	color:#5b0cc2;
	text-decoration:underline;
}
ul{
	list-style-position:inside;
	margin-left:20px;
	list-style-type:circle;
}
ol{
	list-style-position:outside;
	margin-left:30px;
}
hr{
	height:3px;
	border:none;
    border-bottom:3px dotted #dde6ee;	
}
acronym{
	text-decoration:none;
	border-bottom:1px dotted #898B98;
	cursor:help;
}
::selection,
::-moz-selection{ 
	background:#F0E7F8;
	background:transparent;
	color:#5B0CC2;
	text-shadow:none;
}
/*Common*/
.big-f{
	font-size:1.3em;
	font-style:italic;
	color:#0e1216;
}
.red-f,
.red{
	color:#ac0000;
}
.icon{
	display:inline-block;
	overflow:hidden;
	text-indent:-9910px;
}
/*h2, h5, */
h2, h3, h6,
#about #inner-content,
.commentbox-title,
.commentbox-admin-name,
#blog-side-cate strong,
.add-reply-title,
#faves .post p,
#nav a{
	font-family: "Cabin Condensed", 'Microsoft Yahei', '微软雅黑', arial, serif;
}
/*Main*/
#wrapper{
	width:950px;
	margin:0 auto;
	background:url('images/bg.jpg') no-repeat center top;
}
.blog #wrapper{
	background:url('images/blog-bg.jpg') no-repeat center top;
}
/*Header*/
#header{
	width:950px;
	height:115px;
	display:block;
	position:relative;
	margin:0 auto;
}
#logo{
	position:absolute;
	left:100px;
	top:0;
	display:block;
	width:300px;
	height:98px;
    overflow:hidden;
	-webkit-animation:fadein 0.7s ease-out;
}
#logo a{
	display:block;
	width:333px;
	height:98px;
	background:url('images/main.png') no-repeat;
}
#logo a:hover{
	background-position:-300px 0;
}
h1{
	font-size: 1px;
	line-height: 1px;
	text-indent: -9999px;
}
#nav{
	height:98px;
	position:absolute;
	right:103px;
	top:0;
}
@-webkit-keyframes fadein{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-webkit-keyframes slidein{
	0%{
		padding-top:10px;
		opacity: 0;
	}
	100%{
		padding-top:51px;
		opacity: 1;
	}
}

#nav ul{
	list-style:none;
	margin:0;
	padding:0;
}
#nav li{
	float:left;
}
/*
#nav a{
	display:block;
	font-size:17px;
	height:47px;
	font-weight:400;
	padding:51px 12px 0 13px;
	line-height:22px;
	text-align:center;
	-webkit-animation:fadein 0.4s ease-out;
}
	#nav a:hover,
	#current{
		background:url('images/main.png') -622px 0;
		text-decoration:none;
		background:#f0f;
	}
*/

#nav a{
	display:block;
	font-size:17px;
	font-weight:400;
	margin:50px 4px 0 8px;
	line-height:22px;
	text-align:center;
	padding:1px 7px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-webkit-animation:fadein 0.4s ease-out;
}
	#nav a:hover,
	#current{
		text-decoration:none;
		background:#3e4861;
		background:-moz-linear-gradient(top,  #3e4861,  #2b3244);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3e4861), color-stop(1, #2b3244));
		color:#e6e9f2;
		text-shadow:0 1px 0 #000;
		text-decoration:none;
		box-shadow:0 1px 0 #eef0f2;
	}

#nav #current{
	-webkit-animation:none;
}

/*content*/
#portfolio #content{
	height:380px;
}
.blog #content{
	width:740px;
	float:left;
	text-align:left;
	margin-top:20px;
}
/*footer*/
#footer{
	clear:both;
	margin:0 auto;
	width:950px;
	background:url('images/about-bg.jpg') no-repeat 0 -3520px;
	height:167px;
	position:relative;
	padding:20px 0;
	font-size:12px;
}
	#portfolio #footer{
		background:url('images/main.png') no-repeat 0 -154px;
		padding:0;
	}
#inner-footer{
	text-align:center;
	padding-top:60px;
	color:#505970;
	line-height:30px;
	text-shadow:0 1px 0 #d4d8e3;
}
#portfolio #inner-footer{
	padding-top:100px;
}
#inner-footer a{
	color:#505970;
	font-weight:400;
	padding-bottom:2px;
}
#inner-footer a:hover{
	color:#5b0cc2;
	text-decoration:none;
	border-bottom:1px dotted #5b0cc2;
}
.footer-current{
	color:#aab0bf;
	font-weight:400;
	text-shadow:0 1px 0 #fff;
}
#inner-footer b{
	font-weight:400;
	color:#d1d5e1;
	margin:0 19px;
	text-shadow:none;
}
.intouch{
	position:absolute;
	top:23px;
	left:563px;
}
.intouch a{
	float:left;
	width:30px;
	height:31px;
}
.intouch a:hover{
	background:url('images/main.png') no-repeat -338px -104px;
}
.intouch .intouch-flickr:hover{ background-position:-368px -104px;}
.intouch .intouch-dribbble:hover{	background-position:-398px -104px;}
.intouch .intouch-linkedin:hover{	background-position:-428px -104px;}
.intouch .intouch-rss:hover{ background-position:-458px -104px;}
.intouch .intouch-message:hover{ background-position:-488px -104px;}
.intouch .intouch-sina:hover{ background-position:-518px -104px;}
.intouch span{ display:none;}

/* Back to Top*/
.back2top{
	display:block;
	height:30px;
	width:110px;
	margin:0 auto;
	margin-bottom:20px;
}
.back2top a{
	background:url('images/main.png') no-repeat -900px 0;	
	display:block;
	height:30px;
	width:110px;
	padding-left:12px;
}
#footer #inner-footer .back2top a:hover{
	background:url('images/main.png') no-repeat -900px -40px;
	border:none;
}
/*Portfolio*/
#portfolio-showcase{
	width:763px;
	height:339px;
	display:block;
	position:relative;
	margin:0 auto;
	margin-top:11px;
	background:url('images/main2.png') no-repeat -22px 0;
}
.showcase-prev{display:none;
	display:static;
	width:80px;
	height:35px;
	position:absolute;
	left:20px;
	top:15px;
	background:#ff0;
}
.showcase-prev a{
	width:80px;
	height:35px;
	background:#0f0;
}
.showcase-next{
	width:80px;
	height:35px;
	position:absolute;
	right:20px;
	top:15px;
}
.showcase-next a{
	background:url('images/main.png') no-repeat 0 -98px;
	width:80px;
	height:35px;
	cursor:pointer;
}
.showcase-next a:hover{
	background-position:-90px -98px;
}
.showcase-next a:active{
	background-position:-180px -98px;
}
.scrollable{
	position:relative;
	overflow:hidden;
	width:719px;
	height:360px;
	margin:0 auto;
}
#about .scrollable{
	width:500px;
	height:355px;
}
.showcase-bg-img{
	margin-top:15px;
	width:719px;
	height:339px;
	border:none;
}
.scrollable .items{
	width:20000em;
	position:absolute;
}
.items div{
	float:left;
	position:relative;
}
.navi-wrapper{
	position:absolute;
	right:84px;
	top:24px;	
	height:24px;
	background:url('images/main2.png') repeat-x 0 -344px;
}
.testimonial-text-2 .navi-wrapper{
	top:210px;
	right:190px;
	background:none;
}
.navi-corner{
	float:left;
	width:16px;  
	height:24px;
	background:url('images/main.png') no-repeat -271px -99px;
}
.navi{
	height:24px;
	float:left;
	padding:0 14px 0 0;
}

.navi a{
	width:22px;
	height:24px;
	float:left;
	background:url('images/main2.png') no-repeat;
	display:block;
	font-size:1px;
}
.navi a:hover{
	background-position:0 -20px;
}

.navi a.active,
.navi a:active{
	background-position:0 -40px;
}
h3{
	padding:17px 30px 0 16px;
	letter-spacing:0.045em;
	font-size:1.5em;
	font-weight:400;
	color:#9ca5ba;
	text-shadow:0 1px 0px #fff;
	vertical-align:top;
}
#portfolio h3{
	position:absolute;
	left:0;
	top:6px;
	height:26px;
}
h3 strong{
	color:#394259;
	font-weight:400; 
	vertical-align:top;
}
#portfolio .showcase-action{
	position:absolute;
	right:0;
	bottom:0;
}
.showcase-action a{
	width:100px;
	height:100px;
}
/*About*/
#about-content{
	width:950px;
	margin:0 auto;
	position:relative;
	background:url('images/about-bg.jpg') no-repeat;
	height:3160px;
}
#about #inner-content{
	text-align:center;
	height:3160px;
	overflow:hidden;
}
#about #inner-content p,
#about #inner-content ul{
	font-size:32px;
	line-height:40px;
	display:block;
	color:#596480;
	position:absolute;
	text-align:left;
	text-shadow:0 1px 0 #fff;
}
#about #inner-content p strong{
	font-weight:700;
}
#about #inner-content p a{
	color:#596480;
	font-weight:700;
	border-bottom:1px dotted #898B98;
	padding-bottom:1px;
	text-decoration:none;
	-webkit-transition-property:color, border; 
	-webkit-transition-duration: 0.3s, 0.3s;
	-webkit-transition-timing-function: ease-in, ease-in;
}
#about #inner-content p a:hover{
	color:#5B0CC2;
	border-bottom:1px solid #5B0CC2;
	text-decoration:none;
}
#about #inner-content .testimonial-text-2 strong{
	color:#596480;
}
#about #inner-content .testimonial-text-2 strong a{
	color:#596480;
	text-decoration:underline;
}
#about #inner-content ul,
#about #inner-content .testimonial-text-2{
	list-style:none;
	line-height:29px;
	color:#a5aec4;
	font-weight:400;
	font-size:21px;
}
#about #inner-content li{
	height:29px;
}
#about #inner-content ul a,
#about #inner-content .testimonial-text-2 a{
	color:#a5aec4;
	-webkit-transition-property:color, margin; 
	-webkit-transition-duration: 0.3s, 0.3s;
	-webkit-transition-timing-function: ease-in, ease-in;
}
#about #inner-content ul a:hover,
#about #inner-content .testimonial-text-2 a:hover{
	color:#5b0cc2;
	margin-left:5px;
	text-decoration:none;
}
#about #inner-content .testimonial-text-2 a:hover{
	margin:0;
}
.intro-text{ width:510px; height:140px; left:314px; top:53px;}
.location-text{	width:622px; height:308px; left:119px; top:384px;}
.award-text{ width:518px; height:107px; left:39px; top:579px;}
.award-list{ width:262px; height:337px;	left:40px; top:623px;}
.testimonial-text{ width:443px;	height:320px; left:451px; top:820px;}
#about #inner-content .testimonial-text-2{ width:500px; height:340px; left:455px; top:885px; font-size:24px; line-height:27px; text-align:center; position:absolute;}
.testimonial-text-2 strong{ font-size:19px;}
.testimonial-single{ width:495px; font-size:18px; line-height:26px; letter-spacing:1px; text-align:left;}
.testimonial-single strong{letter-spacing:0;float:right;margin-right:20px;font-size:14px;}
.football-text{	width:840px; height:200px; left:42px; top:1143px;}
.football-text .red{ color:#b80000;}
.football-text b{ margin:220px;	font-weight:100;}
.photography-text{ width:528px;	height:100px; left:120px; top:1485px;}
.knowmore-text{	width:712px; height:160px; left:405px; top:1911px;}
.gui-text{ width:672px; height:117px; left:171px; top:2316px;}
.gui-list{ width:552px; height:236px; left:162px; top:2428px;}
.contact-text{ width:502px; height:117px; left:235px; top:2929px;}

.about-photo,
.contact-link{
	position:absolute;
	top:1609px;
	width:190px;
	height:175px;
	display:block;
}
.contact-link{
	top:3013px;
	width:136px;
	height:130px;	
}
.about-photo a,
.contact-link a{
	width:190px;
	height:175px;
	display:block;
	text-indent:-9999px;
	-webkit-transition:none;
}
.contact-link a{
	width:136px;
	height:130px;
}
.about-photo a:hover,
.contact-link a:hover{
	background:url('images/about-bg.jpg') no-repeat;
}
.about-photo-maggie{ top:1456px; left:688px; width:130px; height:99px;}
.about-photo-maggie a{ width:120px; height:99px; background-position:20px -3276px;}
.about-photo-maggie a:hover{ background-position:-9px -3277px;}
.about-photo-1{ left:186px;}
.about-photo-2{ left:376px;}
.about-photo-3{	left:566px;}
.about-photo-4{	left:756px;}
.about-photo-1 a:hover{	background-position:-186px -3159px;}
.about-photo-2 a:hover{	background-position:-376px -3159px;}
.about-photo-3 a:hover{	background-position:-566px -3159px;}
.about-photo-4 a:hover{	background-position:-756px -3159px;}

.contact-link-message{ left:122px;}
.contact-link-twitter{ left:258px;}
.contact-link-flickr{ left:394px;}
.contact-link-dribbble{ left:530px;}
.contact-link-linkedin{ left:666px;}
.contact-link-message a:hover{ background-position:-122px -3343px;}
.contact-link-twitter a:hover{ background-position:-258px -3343px;}
.contact-link-flickr a:hover{ background-position:-394px -3343px;}
.contact-link-dribbble a:hover{ background-position:-530px -3343px;}
.contact-link-linkedin a:hover{ background-position:-666px -3343px;}

.about-ul-icon{
	width:25px;
	height:29px;
	background:url('images/about-bg.jpg') no-repeat;
}
.tutorial9-icon{ background-position:0 -3160px;}
.smashing-icon{ background-position:-25px -3160px;}
.guic-icon{ background-position:-50px -3160px;}
.sixrevisions-icon{ background-position:-75px -3160px;}
.maxthon-icon{ background-position:-100px -3160px;}
.cssawards-icon{ background-position:0 -3189px;}
.cssmania-icon{ background-position:-125px -3160px;}
.da-icon{ background-position:-50px -3189px;}
.wc-icon{ background-position:-75px -3189px;}
.customize-icon{ background-position:-100px -3189px;}
.skinbase-icon{ background-position:-125px -3189px;}
/* hack */
.clear{
	border-top:1px solid transparent !important;
	margin-top:-1px !important;
	border:none;
	margin:0;
	padding:0;
	clear:both;
	visibility:hidden;
}
/*Blog*/
.blog #wrapper{
	width:1024px;
}
.blog #mainWrapper{
	margin-top:70px;
}
.blog #mainWrapper a{
	-webkit-transition-property:color, background; 
	-webkit-transition-duration: 0.3s, 0.3s;
	-webkit-transition-timing-function: ease-in, ease-in;
}
/*sidebar*/
.sidebar{
	float:right;
	width:270px;
	height:100%;
	text-align:left;
	margin-top:25px;

}
#innerSidebar{
	margin:0;
}
/* Panels*/
.panel{
	margin:20px 7px 0 0;
}
h5{
	text-align:left;
	font-size:17px;
	font-weight:700;
	padding:7px;
	text-indent:1em;
	text-shadow:0 1px 0 #fff;
}
.panel h5{
	color:#7987A8;
    background:#edf0f6;
	padding:2px 0;
	-moz-border-radius:13px;
	-khtml-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:17px;
	border-bottom:3px solid #ced8eb;
	width:219px;
}
.panel .panel-content{
	margin:6px 4px 27px 13px;
	line-height:180%;
	color:#8792ab;
}
.panel .panel-content li,
.panel .panel-content a{
	color:#8792ab;
}
.panel .panel-content a:hover,
.panel-content a strong,
.panel-content a:hover strong{
	color:#5b0cc2;
}
.panel-content ul{
	margin:0;
	color:#c2d3e4;
	list-style-position:outside;
}
.panel-content ul li{
    list-style:none;
	text-indent:15px;
	background:url('images/blog.gif') no-repeat -260px 0;
}
.sidebar .panel-content .ul-non-list-style li,
.panel-content ol{
	margin:0;
	list-style-position:inside;
	color:#c2d3e4;
}
/* login form */
#loginForm {
	width:80%;
}
/* page links */
.pages{
	margin:0 0 22px 0;
	color:#94A1BF;
}
.pages .pagebar-mainbody a{
	margin:0 3px;
}
.page-total{
	display:none;
}
.listbox {
	padding:20px;
}
.listbox-table {
	width:99%;
}
.listbox-header {
	font-weight:700;
	padding-left:10px;
	background-color:#E2E3E7;
	border:1px solid #A1A3B3;
	height:30px;
}
.listbox-entry {
	padding:5px;
	color:#4E5067;
}
.listbox-entry a{
	color:#4E5067;
}

/* text box */
.textbox{
	margin:20px 20px 37px 15px;
	background:#fff;
	-moz-border-radius:13px;
	-khtml-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	border:6px solid #fff;
	-moz-box-shadow:0 0 17px rgba(31, 40, 61, 0.07);
	-webkit-box-shadow:0 0 17px rgba(31, 40, 61, 0.07);
	box-shadow:0 0 17px rgba(31, 40, 61, 0.07);
}
.textbox:hover{
	-moz-box-shadow:0 0 17px rgba(31, 40, 61, 0.15);
	-webkit-box-shadow:0 0 17px rgba(31, 40, 61, 0.15);
	box-shadow:0 0 17px rgba(31, 40, 61, 0.15);
}
.blog #mainWrapper .btn a,
.blog #mainWrapper .blog-work-bar a{
	-webkit-transition:none;
}
.textbox-title,
.textbox-title-top{
	height:80px;
	position:relative;
	color:#a7bacd;
}
.textbox-title-top{
	height:35px;
}
.title-label{
	display:block;
	font-size:12px;
	clear:left;
	color:#9ba2b2;
	text-align:left;
	margin:4px 13px 7px 23px;
	padding:4px 0 0;
	font-weight:400;
}
.title-label a{
	color:#9ba2b2;
	text-decoration:none;
	padding:0 3px;
}
.title-label a:hover{
	text-decoration:none;
}
h2{
	margin:10px 15px 3px;
	display:inline;
	float:left;
	padding-right:30px;
	font-size:27px;
	letter-spacing: -0.05em;
	color:#394259;
	font-weight:700; 
	z-index:50;
}
h2 a{
	color:#394259;
	padding:0 7px;
	-moz-border-radius:7px;
	-khtml-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
}
h2 a:hover{
	text-decoration:none;
	padding:0 7px;
	-moz-border-radius:7px;
	-khtml-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	color:#5b0cc2;
	background:#f0e7f8;
}
.textbox-content{
	color:#4a4f5e;
	margin:6px 20px 15px 22px;
	clear:both;
	line-height:21px;
	font-size:14px;
	position:relative;
	z-index:5;
}
.textbox-content-single{

}
.textbox-content img{
	color:#44586e;
	font-weight:700;
	max-width:100%;
}
.textbox-content .banner{
	position:absolute;
	z-index:5;
}
.textbox-content .space{
	display:block;
	width:100%;
}
.textbox-content em a{
	padding:0;
}
.textbox-content a{
	font-weight:400;
	color:#232b3d;
	text-decoration:underline;
	padding:0 3px;
	background-color:#fff;
	-moz-border-radius:4px;
	-khtml-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	text-shadow:0 1px 0 #fff;
}
.textbox-content strong, .textbox-content b{
	color:#394259;
}
.title-label a:hover,
.textbox-content a:hover{
	text-decoration:none;
	color:#5b0cc2;
	background-color:#f0e7f8;
	-moz-border-radius:4px;
	-khtml-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	text-shadow:0 1px 0 #fff;
}
.textbox-content dt{
	font:normal normal bold 16px/26px 'times';
	color:#d7420e;
}
.textbox-content dt a:hover{
	margin-left:4px;
	border:none;
	text-decoration:underline;
}
.textbox-content h6{
	font-weight:700;
	font-size:24px;
	line-height:24px;
	color:#7987a8;
	text-shadow:0 1px 1px #fff;
}
.textbox-extra{
	display:block:
	font-size:14px;
	color:#7987A8;
	overflow:hidden;
	padding:15px 0 7px;
}
.textbox-extra a{
	color:#7987A8;
	font-weight:400;
}
.textbox-extra b{
	display:inline;
	margin:0 20px 0 0;
	font-weight:400;
}
.textbox-extra a{
	text-decoration:none;
}
.tags{
	text-align:right;
}
.tags a{
	text-decoration:none;
}
.single-tag{
	margin-right:10px;
	display:inline-block;
}
.textbox-adminbar{
	width:150px;
	opacity:0;
	-webkit-transition-property:opacity; 
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
}
.textbox:hover .textbox-adminbar{
	opacity:1;
}
/* comments top box */
.comment-pages{
	display:none;
}
/* commnets*/
.commentbox{
	margin:3px 0 11px;
	padding:1px 20px 18px 14px;
	text-align:left;
	display:block;
}
.commentbox-title{
	font-size:21px;
	padding:4px;
	font-weight:700;
	display:block;
	color:#4d5d7d;
	width:620px;
	float:left;
	text-shadow:0 1px 0 #fff;
}
.commentbox-title a {
	color:#4d5d7d;
}
.commentbox-title a:hover {
	color:#5b0cc2;
	text-decoration:none;
}
.commentbox-title .commentbox-label{
	font-size:10px;
	font-weight:400;
	color:#95a0b6;
	float:right;
}
.commentbox-content{
	background:#fefeff;
	float:left;
	display:block;
	width:620px;
	line-height:21px;
	font-size:14px;
	border:5px solid #e9ecf2;
	-moz-border-radius:8px;
	-khtml-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	-webkit-transition-property:-webkit-transform; 
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
}
.commentbox-content:hover{
	border-color:#dfe4ed;
	-webkit-transform:rotate(0deg) scale(1.05);
}
.commentbox-inner-content{
	padding:13px;
}
.commentbox-admin{
	margin:4px 0 0;
	background:#e9ecf2;
	-webkit-border-top-left-radius:8px;
	-webkit-border-top-right-radius:8px;
	-moz-border-radius-topleft:8px;
	-moz-border-radius-topright:8px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
.commentbox-admin-name{
	font-weight:400;
	padding:7px 0 7px 7px;
	font-size:17px;
	color:#4d5d7d;
	text-shadow:0 1px 0 #fff;
}
.commentbox-admin-content{
	padding:10px;
	background:#fff;
	margin:0 9px 9px;
	-moz-border-radius:6px;
	-khtml-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
.commentbox-edit{
	font-size:10px;
	font-weight:400;
	margin:7px 0 0 4px;
	float:left;
	clear:left;
}
.commentbox-edit a{
	color:#fff;
}
.commentbox:hover .commentbox-edit a{
	color:#5B0CC2;
}
.commentbox-edit textarea{
	width:300px;
	height:150px;
	padding:10px;
	margin:25px 0;
}
.gravatar{
	padding:2px;
	border:2px solid #f1f2ff;
}
/*Add comment*/
.box{
	margin:5px 15px 30px 20px;
	display:block;
}
.inner-box{
	padding:4px;
}
.box-title{ 
	font-size:15px;
	font-weight:700;
	display:block;
	color:#4A4F5E;
	overflow:hidden;
	text-align:left;
}
.formbox-rowheader {
	padding:5px;
	font-weight:700;
}
.formbox-content {
	padding:14px;
	color:#425f7d;
}
.add-reply-title{
	font-size:21px;
	padding:4px;
	font-weight:700;
	display:block;
	color:#4d5d7d;
	padding:0 4px 8px;
	text-shadow:0 1px 0 #fff;
}
.add-reply-content{
	color:#8793AD;
	font-size:14px;
}
.add-reply-content-left,
.add-reply-content-right{
	width:290px;
	display:block;
	float:left;
	margin:0 0 15px;
}
.add-reply-content-url{
	clear:both;
	margin:15px 0;
}
#commentForm{
	padding:14px;
}
#v_replier,
#v_repemail,
#v_repurl,
#v_content{
	width:230px;
	font-size:17px;
	padding-left:30px;
	margin:1px;
	border:1px solid #778299;
	height:28px;
	line-height:26px;
	font-family:Georgia;
	color:#4A4F5E;
	background:#fff url('images/mini-icon.gif') no-repeat -10px -110px;
	border-radius:6px;
}
#v_repemail{
	background-position:-10px -150px;
}
#v_repurl{
	background-position:-10px -190px;
	width:520px;
}
#v_content{
	height:180px;
	padding-top:4px;
	background-position:-10px -230px;
	width:520px;
}
#v_replier:hover,
#v_repemail:hover,
#v_repurl:hover,
#v_content:hover{
	border:2px solid #a4abba;
	margin:0;
}
#v_replier:focus,
#v_repemail:focus,
#v_repurl:focus,
#v_content:focus{
	border:2px solid #a4abba;
	margin:0;
}
/*UBB*/
.code,
.quote {
	margin:10px;
	background:url('images/blog.gif') no-repeat -247px -240px;
	padding:8px;
	color:#7c8496;
	font-size:1.5em;
	line-height:26px;
	font-family:'Times New Roman', Georgia, sans-serif;
	font-style:italic;
}
.quote{
	padding:8px 8px 8px 27px;
}
.downloadbox,
.download{
	background:#fff url('images/blog.gif') no-repeat -240px -169px;
	border:none;
}
.download{
	padding:14px 8px 8px 33px;
	margin:9px;
}

.code{
	background-image:none;
}
.quote-title{
	color:#a5b9cc;
	text-indent:-9999em;
	display:none;
}
.quote-content{
	padding:5px; 
}
/*Link*/
.linkover{
	margin-bottom:6px;
	clear:both;
}
.linkbody{
	padding:5px;
	width:280px;
	text-align:left;
}
.linkdesc{
	color:#9ab;
	margin:0 0 0 10px;
}
.linkgroup{
	font-weight:700;
	font-size:18px;
	color:#626576;
	margin:0 0 6px 10px;
}
.linkgroupcontent{
	margin:10px 0 40px 10px;
}
/*tag list*/
.taglist a{
	text-decoration:none;
}
/*Form*/
form{
	display:inline;
}
input.text{
	height:20px;
	padding:1px;
	border:1px solid #696B78;
	color:#393B48; 
	background:#fff;
}
input.button,
.pages a,
.faves-pagi a,
.blog-bottom-link a{
	cursor:pointer;
	padding:1px 9px 3px;
	font-size:21px;
	font-weight:400;
	border:1px solid #2b3244;
	background:#3e4861;
	background:-moz-linear-gradient(top,  #3e4861,  #2b3244);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3e4861), color-stop(1, #2b3244));
	color:#e6e9f2;
	-moz-border-radius:7px;
	-khtml-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	text-shadow:0 1px 0 #000;
	text-decoration:none;
	-webkit-transition-property:*;
	-webkit-transition-duration:0.2s;
	-webkit-transition-timing-function: ease-in;
	vertical-align:baseline;
}
	input.button:hover,
	.pages a:hover,
	.faves-pagi a:hover,
	.blog-bottom-link a:hover{
		color:#fff;
		text-shadow:0 1px 0 #000;
		box-shadow:0 0 6px #7412c1;
		-moz-border-radius:7px;
		-khtml-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		border:1px solid #7412c1;
		text-decoration:none;
		background:#2d357f;
		background:-moz-linear-gradient(top,  #7412c1,  #2d357f);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #7412c1), color-stop(1, #2d357f));
	}
.sec-btn a{
	border:1px solid #cacdd9;
	background:#f4f5f8;
	background:-moz-linear-gradient(top,  #fff,  #eeeff2);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #eeeff2));
	color:#424b5e;
	text-shadow:0 1px 0 #fff;
}
	.sec-btn a:hover{
		border:1px solid #cacdd9;
		background:#f4f5f8;
		background:-moz-linear-gradient(top,  #fff,  #eeeff2);
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #eeeff2));
		color:#424b5e;
		text-shadow:0 1px 0 #fff;
		box-shadow:0 0 6px #cacdd9;
	}
textarea{ 
	border:1px solid #9FA4B2;
	background:#fff;
	color:#393B48; 
	}
select{ 
	color:#696B78; 
	background:#FBFCFD;
	border:1px solid #696B78;
}
/*Blog-Topbar*/
#blog-top-bar{
	position:absolute;
	width:700px;
	height:50px;
	display:block;
	top:144px;
	left:220px;
}
#inner-blog-top-bar{
	position:relative;
	width:700px;
	height:50px;
}

#blog-top-bar .intouch{
	top:12px;
	left:179px;
}
/*Blog-sidebar*/
#blog-side-cate{
	margin:0 0 22px;
	text-shadow:0 1px 0 #fff;
}
#blog-side-cate .panel-content{
	margin:0 0 0 4px;
}
#blog-side-cate strong{
	color:#7987A8;
	font-size:21px;
	font-weight:700;
	line-height:25px;
}
#blog-side-cate li{
	background:url('images/blog.gif') no-repeat -257px -50px;
}
#blog-side-cate .blog-cate-last{
	background:url('images/blog.gif') no-repeat -257px -101px;
}
#blog-side-cate-en,
#blog-side-cate-cn{
	float:left;
	overflow:hidden;
}
#blog-side-cate-cn{
	padding-left:20px;
}
.blog .blog-sidebar-friends li{
	background:url('images/mini-icon.gif') no-repeat -17px 0;
}
.blog .blog-sidebar-popular li,
#sidebar_entries li{
	background:url('images/mini-icon.gif') no-repeat -17px -60px;
}
#sidebar_replies li{
	background:url('images/mini-icon.gif') no-repeat -17px -30px;
	width:193px;
	overflow:hidden;
	height:25px;
}
#sidebar_replies li strong{
	color:#7987A8;
}
#blog-sidebar-dribbble li{
	list-style:none;
	background:none;
	float:left;
	margin:0;
}
#blog-sidebar-dribbble img{
	width:80px;
	height:60px;
}
.g-search{
	text-align:left;
}
.inner-g-search{
	position:relative;
}
.g-search input{
	text-align:left;
	border:none;
	height:34px;
	background:none;
}
.g-search .g-input{
	font-weight:700;
	position:absolute;
	background:none;
	top:0;
	left:0;
	font-size:14px; 	
	color:#566688;
	width:210px;
	padding:0 15px;
	line-height:34px;
	background:url('images/blog.gif') no-repeat -10px -188px;
}
.g-search .g-input:hover{
	background-position:-10px -62px;
	cursor:text;
}
.g-search .g-input:focus{
	background-position:-10px -98px;
	cursor:text;
}
.g-search .g-btn{
	cursor:pointer;
	width:1px;
}
/*Blog Portolio*/
.blog-work-intro{
	width:450px;
	padding:0 10px 5px 6px;
}
.blog-work-bar{
	float:right;
	width:110px;
}
.blog-work-bar a:hover{
	border:none;
	background-color:#fff;
}
.blog-work-block-right{
	margin:0 0 0 70px;
}
.blog-work-block-right ul{
	list-style:disc;
	list-style-position:outside;
}
.blog-work-block-left{
	float:left;
	width:60px;
	text-align:center;
}
.blog-price{
	text-align:center;
	margin:0 auto;
	font-size:18px;
	line-height:36px;
	font-weight:700;
	width:104px;
	padding:0 2px 10px;
	color:#973500;
	background:#f8fafc;
	border:1px solid #c3d3e3;
	-moz-border-radius:8px;
	-khtml-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
.blog-bottom-link{
	margin:0 auto;
	text-align:center;
}
.blog-bottom-link a{
	margin:4px 8px;
}
/*misc*/
.common-relative{
	position:relative;
}
.left{
	float:left;
}
.right{
	float:right;
}
.center-align{
	text-align:center;
}
.right-align{
	text-align:right;
}
/*btns*/
.btn{
	display:block;
	text-indent:-9911px;
    overflow: hidden;
}
.btn a{
	display:block;
	text-indent:-9911px;
    overflow: hidden;
}
.blog-work-portfolio,
.blog-work-zoom,
.blog-work-download,
.blog-work-skin{
	text-indent:-9911px;
	overflow:hidden;
}
.blog-work-portfolio a,
.blog-work-zoom a,
.blog-work-download a,
.blog-work-skin a{
	height:23px;
	width:110px;
	display:block;
	background:#fff url('images/btn.gif') no-repeat 0 -315px;
}
.blog-work-portfolio a:hover{
	background-position:0 -345px;
}
.blog-work-zoom a{
	background-position:-110px -315px;
}
.blog-work-zoom a:hover{
	background-position:-110px -345px;
}
.blog-work-download a{
	background-position:-220px -315px;
}
.blog-work-download a:hover{
	background-position:-220px -345px;
}
.blog-work-skin a{
	background-position:-330px -315px;
}
.blog-work-skin a:hover{
	background-position:-330px -345px;
}
.blog-readmore{
	padding:0 0 0 260px;
	background:url('images/blog.gif') repeat-x 0 -134px;
}
.blog-readmore a{
	background:url('images/blog.gif') no-repeat 0 0;
	padding:0;
	height:23px;
	width:70px;
}
.blog-readmore a:hover{
	background:url('images/blog.gif') no-repeat 0 -30px;
}
/*Blog Image Drop Shadow*/
.drop-shadow img{
	margin-top:5px;
	border:5px solid #fefefe;
   -webkit-box-shadow:0 5px 13px #bfbfbf;
   -moz-box-shadow:0 5px 13px #bfbfbf;
   box-shadow:0 5px 13px #bfbfbf;
}
.drop-shadow a img{
	-webkit-transition-property:-webkit-box-shadow; 
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
}

.drop-shadow a:hover img{
   -webkit-box-shadow:0 5px 13px #6c6c6c;
   -moz-box-shadow:0 5px 13px #6c6c6c;
   box-shadow:0 5px 13px #6c6c6c;
}
/*faves*/
#faves #wrapper{
	width:950px;
	margin:0 auto;
}
.faves-content{
	margin:0 auto;
	background:#f0f;
	margin-top:10px;
	width:852px;
	padding:0;
}

#faves .post{
	float: left;
	width: 256px;
	height: 219px;
	overflow: hidden;
	margin: 11px 8px;
	position: relative;
	background:#fff;
	display: inline;
	-moz-border-radius:11px;
	-khtml-border-radius:11px;
	-webkit-border-radius:11px;
	border-radius:11px;
	border:6px solid #fff;
	-moz-box-shadow:0 0 13px rgba(31, 40, 61, 0.07);
	-webkit-box-shadow:0 0 13px rgba(31, 40, 61, 0.07);
	box-shadow:0 0 13px rgba(31, 40, 61, 0.07);
	-webkit-transition-property:*;
	-webkit-transition-duration: 0.2s, 0.2s;
	-webkit-transition-timing-function: ease-in, ease-in;

}
	#faves .post:hover{
		-moz-box-shadow:0 3px 17px rgba(40, 54, 88, 0.35);
		-webkit-box-shadow:0 3px 17px rgba(40, 54, 88, 0.35);
		box-shadow:0 3px 17px rgba(40, 54, 88, 0.35);	
	}
	#faves .post img{
		border:0;
		-moz-border-radius:7px;
		-khtml-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
	}

	#faves .postInfo{
		position:absolute;
		bottom:0;
		right:2px;
		color:#94a1bf;
	}
	#faves .postDate{
		position:absolute;
		bottom:2px;
		opacity:0;
		left:3px;
		font-size:11px;
		color:#94a1bf;
		-webkit-transition-property:*;
		-webkit-transition-duration: 0.2s, 0.2s;
		-webkit-transition-timing-function: ease-in, ease-in;
	}
	#faves .post:hover .postDate{
		opacity:1;
	}
	#faves .postInfo a{
		font-weight:400;
		color:#30384c;
		text-decoration:none;
		padding:0 4px;
		background:#EDF0F6;
		-moz-border-radius:7px;
		-khtml-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		border-bottom:1px dotted #fff;

	}
	#faves .postInfo a:hover{
		text-decoration:none;
		color:#5b0cc2;
		background:#f0e7f8;
		-moz-border-radius:7px;
		-khtml-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		text-shadow:0 1px 0 #fff;
	}
	#faves .postlink{
		display:table;
	}
	#faves .post p{
		display:table-cell;
		height: 192px;
		width:248px;
		vertical-align:middle;
		font-size:1.5em;
		text-align:center;
	}
	#faves .post p a{
		padding:0 0 1px;
	}
	#faves .post:hover p a{
		border-bottom:1px dotted #30384c;
		-webkit-transition-property:*;
		-webkit-transition-duration:0.2s, 0.2s;
		-webkit-transition-timing-function:ease-in, ease-in;
	}
	#faves .post:hover p a:hover{
		text-decoration:none;
		border-bottom:1px solid #5b0cc2;
	}
	.postlink-icon{
		display:inline-block;
		width:24px;
		height:24px;
		background:url('images/main.png') no-repeat -563px -103px;
		overflow:hidden;
	}
.faves-current{
	margin-right:24px;
	color:#94A1BF;
}

.faves-pagi{
	margin:15px 85px 0 0;
	height:40px;
}
		
#whitebox{
	top: 0;
	left: 0;
	display: none;
	position: absolute;
	padding: 10px;
	margin: -12px 0 0 -12px;
	background: #fff url('images/loading.gif') no-repeat scroll center center;
	border: 1px solid #eee;
}
#whitebox img{
	border: 1px solid #eee;
	cursor: pointer;
}
/*Small Size
@media screen and (max-device-width: 480px){}
@media screen and (-webkit-min-device-pixel-ratio: 2){}
*/

@media screen and (max-width: 1050px) {

	.blog,
	#wrapper,
	.blog #wrapper,
	#faves #wrapper,
	#inner-wrapper,
	#content,
	#inner-content,
	#header,
	#mainWrapper,
	#footer{
		width:100%;
	}
	#blog-top-bar{
		display:none;
	}
	.blog #wrapper{
		background:none;
	}
	.blog #mainWrapper{
		width:920px;
		margin:0 auto;
	}
    .blog #header,
	.blog #logo{
		height:80px;
	}
    .blog #content{
		width:650px;
		overflow:hidden;
		float:left;
		margin:0;
    }
	.textbox{
		width:600px;
	}
	#portfolio #content{
		height:350px;
	}
	#header{
		height:115px;
	}
	#sidebar{
		float:left;
	}
	#logo{
		position:static;
		float:left;
		margin:0 0 0 60px;
	}
	#logo a{
		background-position:0 -17px;
		height:71px;
	}
	#logo a:hover{
		background-position:-300px -17px;
		height:71px;
	}
	#nav{
		position:static;
		float:right;
		margin:0px 70px 0 0;
		height:60px;
	}
	#nav li{
		position:static;
		float:none;
		display:inline-block;
		height:60px;
		line-height:30px;
	}
	#nav a{
		margin:36px 0 0 10px;
		font-size:17px;
	}
	#footer{
		background:none;
	}
	#inner-footer{
		padding-top:80px !important;
	}
	#portfolio-showcase{
		margin-top:1px;
	}

}

@media screen and (max-width: 950px) {

	.faves-content{
		width:620px;
		padding:0;
		margin:0 auto;
	}

	#faves .post{
		margin: 11px 20px;
	}
	.blog #sidebar{
		clear:both;
	}
	.blog #content{
		width:100%;
	}
	.textbox{
		width:80%;
		margin:0 auto;
		margin-top:30px;
	}
}

@media screen and (max-width: 800px) {
	#header{
		height:150px;
		padding-top:10px;
	}
	#logo{
		position:static;
		margin:0 auto;
		float:none;
	}
	.blog #logo{
		height:98px;
	}
    .blog #header{
		height:150px;
	}
	#nav{
		position:static;
		margin:0 auto;
		float:none;
		margin-top:1px;
	}
	#nav li{
		position:static;
		float:none;
		display:inline-block;
		height:30px;
		line-height:30px;
	}
	#nav a{
		font-size:20px;
		margin:0 13px;
	}
	#nav #current,
	#nav a:hover{
	}
	.mygallery{
		-moz-transform: scale(0.8);
		-webkit-transform: scale(0.8);
		margin:0 auto;
	}
	.footer-nav{
		display:none;
	}
}
@media screen and (max-width: 620px) {
	.faves-content{
		width:300px;
	}

	#faves .post{
		margin: 11px 20px;
	}
}
@media screen and (max-width: 520px) {
	#header{
		height:110px;
		padding-top:15px;
	}
	#logo{
		height:80px;
	}
	#logo a{
		background-position:0 -26px;
	}
	#logo a:hover{
		background-position:-300px -26px;
	}
	#nav li{
		position:static;
		float:none;
		display:inline-block;
		height:30px;
		line-height:30px;
	}
	#nav a{
		margin:0 8px;
		font-size:17px;
	}
}
/* iPhone 4 */
@media screen and (max-device-width: 480px){
	#header{
		height:190px;
		padding-top:30px;
	}
	#logo{
		position:static;
		margin:0 auto;
		float:none;
	}
	#nav{
		position:static;
		margin:0 auto;
		float:none;
		margin-top:20px;
	}
	#nav li{
		position:static;
		float:none;
		display:inline-block;
	}
	#nav a{
		margin:0 12px;
		font-size:37px;
		padding:8px 8px 14px;
	}
	#portfolio-showcase{
		background:none;
		width:100%;
	}
	#portfolio #footer{
		background:none;
		margin-top:30px;
	}

	.showcase-prev, .showcase-next{
		width:80px;
		height:135px;
		position:absolute;
		top:115px;
	}
		.showcase-prev{
			left:10px;
					top:15px;
			display:static;
		}
		.showcase-next{
			right:20px;
		}
	.showcase-next a, .showcase-prev a{
		width:80px;
		height:135px;
	}
		.showcase-prev a{
		}

	#portfolio h3{
		display:block;
		left:0;
		width:100%;
		top:-23px;
		font-size:37px;
		height:40px;
		color:#9ca5ba;
	}
	h3 strong{
		color:#9ca5ba;
		font-weight:400; 
	}	
	.navi-wrapper{
		top:340px;
		left:100px;
	}

	#footer{
		font-size:1.5em;
		padding:0 0 30px;
	}
	.footer-nav{
		display:none;
	}
	.intouch{
		text-align:center;
		position:static;
		margin:0 auto;
		width:80%;
		font-size:28px;
		height:320px;
	}
	.intouch span{
		display:block;
		margin:0 0 30px;
		font-size:33px;
		font-weight:700;
	}
	.intouch a{
		text-indent:0;
		width:41%;
		float:left;
		height:55px;
		padding:9px 0 0;
		margin:17px 4% 0;
		border-radius:13px;
		border:2px solid #cacdd9;
		background:#f4f5f8;
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #eeeff2));
		color:#424b5e;
		text-shadow:0 3px 0 #fff;
	}
	.intouch a:hover{
		color:#fff;
		text-shadow:0 3px 0 #000;
		border:2px solid #fff;
		text-decoration:none;
		background:#2d357f;

}
	#about-content,
	.about-photo a:hover,
	.about-ul-icon,
	.contact-link a:hover,
	#about #inner-content{
		background:none;
	}
}