/*
Theme Name: Guopeng Liang Design
Theme URI: http://www.guopengliang.com
Description: Guopeng Liang Design official theme
Version: 1.0
Author: Guopeng Liang
Author URI: http://www.guopengliang.com
Tags: portfolio, pictures, images, simple, clean
*/



/* Reset (http://meyerweb.com/eric/tools/css/reset/) | v2.0 | 20110126
------------------------------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, img, strong, 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%;
	font:inherit;
	vertical-align:baseline;
}
#content address { padding: 0 0 20px 0; }
#content abbr, acronym { border-bottom: .1em dotted; }
#content pre, code, tt { font-size: 1.1em; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ol, ul { list-style:none; }
blockquote:before, blockquote:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }



/* Colors

Texts:   #272727
BG:      #eee

Lines:   #ccc

SiteNav: #888 | #369

Search Text & Border: #c3c3c3 | #f6f6f6


*/



/* General
------------------------------------------------------------------------------------------ */

body {
	background:#eee url(img/background.jpg) center top no-repeat;
	font:10px/18px "Lucida Grande", Tahoma, "Trebuchet MS";
	color:#272727;
}

a { color:#272727; text-decoration:none; }
a:hover, a:active { color:#272727; }
#thepost a:hover, footer a:hover { text-decoration:underline; }

.clearer { clear:both; }
.clearer.line { margin:0 auto; width:920px; border-top:1px solid #ccc; }
.clearer.line2 { margin:0 auto; width:920px; border-top:1px dashed #ccc; }

.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.alignleft { float:left; }
.alignright { float:right; }

.right { position:absolute; right:0; }



/* Page & Header #
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#page { margin:0 auto; width:1000px; }

header { position:relative; margin-bottom:10px; padding-top:20px; height:50px; }

#sitelogo {
	float:left;
	width:420px;
	height:50px;
	font-size:3em;
	font-weight:normal;
	text-transform:uppercase;
}
#sitelogo a:hover { color:#369; }

#searchbox {
	float:right;
	position:relative;
	right:40px;
	bottom:20px;
}
#searchbox input {
	padding:2px 5px;
	width:180px;
	height:16px;
	font-size:1.2em;
	color:#c3c3c3;
	border:1px solid #c3c3c3;
	background:transparent;
}
#searchbox input:hover, #searchbox input:focus {
	color:#888;
	border:1px solid #ccc;
	background:#f6f6f6;
}

#sitenav {
	float:right;
	padding:10px 40px 0 0;
	font-size:12px;
	text-transform:uppercase;
	color:#888;
}
#sitenav li { display:inline; float:left; padding-left:15px; }
#sitenav li a { padding:13px 0; line-height:40px; color:#888; }
#sitenav li a:hover { margin-bottom:-1px; color:#369; border-bottom:1px solid #369; }
#sitenav .current_page_item a, #sitenav .current_page_item a:hover {
	padding-bottom:12px;
	color:#369;
	font-weight:bold;
	border-bottom:2px solid #369;
}



/* Coda Slider
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* These 2 lines specify style applied while slider is loading */
.csw { overflow:hidden; width:100%; height:600px; }
.csw .loading { margin:0; text-align:center; }

#coda-slider {
	overflow:hidden;
	position:relative;
	width:920px;
	height:600px;

	box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.coda-nav-left { float:left; }
.coda-nav-right { float:right; }
.coda-nav-left a { display:block; width:40px; background:url(img/arrow_left.png) -40px 50% no-repeat; }
.coda-nav-left a:hover { background:url(img/arrow_left.png) 0 50% no-repeat; }
.coda-nav-right a { display:block; width:40px; background:url(img/arrow_right.png) 0 50% no-repeat; }
.coda-nav-right a:hover { background:url(img/arrow_right.png) -40px 50% no-repeat; }
.index .coda-nav-left a, .index .coda-nav-right a { height:600px; }
.single .coda-nav-left a, .single .coda-nav-right a { height:300px; }



/* Mid
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#mid {
	width:1000px;
	margin:12px auto;
	/* background:transparent url(img/indexbg.png) no-repeat 50% 0; */
}
#mid.single img {
	box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
}

.panel {
	float:left;
	position:relative; 
	width:920px;
	height:600px;
	color:#efefef;
}
.panel-single {
	position:relative; 
	margin:0 auto;
	width:920px;
	height:300px;
}

.project-thumb {
	float:left;
	margin:10px 20px;
	width:200px;
	height:230px;
}
.project-thumb .metadata {
	padding-top:5px;
	width:200px;
	height:25px;
	line-height:15px;
}
.project-thumb a { color:#666; text-shadow:0 1px 1px #fff; }
.project-thumb a:hover { color:#333; }
.project-thumb span { float:right; font-weight:normal; }
.project-thumb img {
	box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.project-thumb a:hover img {
	box-shadow:0 1px 6px rgba(60,120,180,0.75);
	-moz-box-shadow:0 1px 6px rgba(60,120,180,0.75);
	-webkit-box-shadow:0 1px 6px rgba(60,120,180,0.75);
}
.project-thumb a:active img {
	box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
}


.post-title, .entry {
	padding:8px 15px;
	width:880px;
	position:absolute;
	bottom:5px;
	left:5px;
	z-index:100;
	background:transparent url(img/titlebg.png) repeat 0 0;
	font-size:2em;
}
.post-title p {
	margin-top:5px;
	font-size:12px;
	line-height:15px;
}
.post-title span {
	float:right;
	padding-left:10px;
	font-size:0.55em;
	color:#888;
}
.post-title span a { color:#888; }
.post-title span a:hover { color:#ccc; }

.post-title a, .entry a {
	color:#efefef;
}

.entry ul {
	margin:5px 0 10px 0;
	font-size:0.6em;
}
.entry li {
	padding:5px 0 7px 0;
	border-bottom:1px solid #3b3b3b;
}
.entry a:hover { color:#c6c6c6; }
.entry .rss-big {
	padding-right:24px;
	background:transparent url(img/rss.png) no-repeat 100% 60%;
}



/* Content
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

hgroup {
	position:relative;
}
hgroup h1 {
	padding:0 40px 10px;
	font-size:32px;
	line-height:40px;
	text-shadow:0 1px 1px #fff;
}
hgroup h1 a { color:#888; }
hgroup h1 a:hover { color:#666; }

#heading .meta { position:absolute; top:12px; right:40px; font-size:12px; color:#888; }



#content {
	margin:0 auto;
	width:920px;
	font-size:1.2em;
}
#content.portfolio, #content.archive, #content.search { width:960px; }

#content em, #content label {
	font-size:0.8em;
	font-weight:bold;
	font-style:normal;
	text-transform:uppercase;
	color:#888;
}
#content label { font-weight:normal; }
#content label em { font-size:1em; }

#content input, #content textarea, #content select {
	padding:5px;
	font-family:"Lucida Grande", Tahoma, "Trebuchet MS";
	font-size:1em;
	background-color:#f6f6f6;
	border:1px solid #c6c6c6;
}
#content select { padding:4px; }
#content option { margin:7px; }
#content #submit {
	font-size:0.8em;
	font-weight:bold;
	text-transform:uppercase;
	color:#888;
}
#content #submit:hover {
	color:#efefef;
	background-color:#888;
	border:1px solid #888;
}

h2 {
	padding:10px 0;
	color:#bbb;
	font-size:1.5em;
	font-weight:normal;
	text-transform:uppercase;
	text-shadow:0 1px 1px #fff;
}
h2 a { color:#888 !important; }
.portfolio h2, .archive h2, .search h2 {
	margin:25px 20px 10px;
	padding:0;
}
.portfolio h2 span, .archive h2 span, .search h2 span {
	display:block;
	font-size:0.667em;
	text-transform:none;
}



/* Subnav
------------------------------------------------------------------------------------------ */

#subnav {
	margin:0 0 10px;
	width:960px;
	text-align:center;
	text-transform:uppercase;
	color:#888;
	line-height:36px;
	background:#eee;
	z-index:10;
}
#subnav ul { margin:0 20px; padding:10px 0; border-bottom:1px solid #c6c6c6; }
#subnav li { display:inline; }
#subnav li a { padding:10px 20px; color:#888; }
#subnav li a:hover { color:#369; background-color:#e8e8e8; }
#subnav .current_page_item a, #subnav a.current, #subnav a.selected { color:#369; font-weight:bold; background-color:#e3e3e3; }



/* Narrow Column, The Post, Post Meta & Sociable
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#narrow-column { float:left; width:720px; }
#narrow-column h3 { padding-bottom:10px; }
#narrow-column p { padding-bottom:10px; }

#thepost { padding:20px 0; }
#thepost h2 { color:#888; text-transform:none; }
#thepost a { color:#369; }
#thepost p { padding-bottom:10px; }
#thepost img { margin:5px 0; }

.postmetadata, .sociable { margin-top:10px; }
.sociable ul li { display:inline; margin-right:5px; }
.sociable img { width:16px; height:16px; }
.sociable-hovers {
	opacity:.6;
	-moz-opacity:.6;
	filter:alpha(opacity=60);
}
.sociable-hovers:hover {
	opacity:1;
	-moz-opacity:1;
	filter:alpha(opacity=100);
}



/* Comment
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#thecomments { padding:10px 0; border-top:1px solid #ccc; }
#thecomments p a { color:#369; }

#commentlist { margin-bottom:10px; }
#commentlist li { position:relative; padding:15px 0 10px; border-bottom:1px dashed #ccc; }

#commentlist .children { margin:10px 0 0 43px; }
#commentlist .children li { padding-bottom:0; border-top:1px dashed #ccc; border-bottom:none; }

#commentlist .comment-author .fn { font-weight:bold; font-style:normal; }
#commentlist .avatar { float:left; margin-right:7px; padding:3px; }

#commentlist .comment-meta { position:absolute; top:15px; right:50px; font-size:0.9em; color:#888; }
#commentlist .comment-meta a { color:#888; }
#commentlist a:hover, #commentlist a:hover em { color:#369; }

#commentlist .reply { position:absolute; top:15px; right:0; }

#commentlist p { padding:5px 0 0 45px; }

#respond { position:relative; }
#respond p { padding:0 0 10px; }
#respond .author { width:20%; }
#respond .email, #respond .url { padding-left:10px; width:40%; }
#respond .author, #respond .email, #respond .url { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
#comment, #author, #email, #url { width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
#respond .submit { margin-top:-10px; }
#commentlist #respond { margin:10px 0 0 45px; padding-top:10px; border-top:1px dashed #ccc; }
#cancel-comment-reply { position:absolute; top:15px; right:0; }



/* Sidebar #
------------------------------------------------------------------------------------------ */

#sidebar {
	float:right;
	padding:10px 0;
	width:180px;
	color:#888;
}
#sidebar a { color:#888; }
#sidebar a:hover { color:#369; }
.widget { margin-bottom:10px; padding:0 0 20px 0; border-bottom:1px solid #ccc; }

#projectinfo { padding:0 0 10px 0; }
#projectinfo li { margin:0 0 10px 0; line-height:1.25em; }

#projects-nav { overflow:hidden; }
#projects-nav li { float:left; margin:10px 0 0; }
#projects-nav li.next { float:right; }

.nothumb {
	cursor:default;
	padding:20px 5px 5px;
	width:70px;
	height:55px;
	font-size:10px;
	line-height:12px;
	text-align:center;
	text-shadow:0 1px 1px #fff;
	background:#e3e3e3;
}



/* Footer
------------------------------------------------------------------------------------------ */

footer {
	position:relative;
	margin:0 auto;
	padding:10px 0 20px;
	width:920px;
	line-height:1.2em;
	color:#999;
	border-top:1px solid #ccc;
	background:#eee;
	z-index:1;
}
footer a { color:#999; }
footer a:hover { color:#666; }



/* Resume #
------------------------------------------------------------------------------------------ */

.resume strong { font-weight:bold; }
.resume h2 { margin:10px 0 0; }
.resume h3 { margin:20px 0 0 150px; font-size:1.2em; }
.resume #thepost { position:relative; }
.resume #thepost ul { margin:5px 0 15px 168px; list-style:disc; }
.resume #thepost span.time { position:absolute; left:0; font-size:12px; }
.resume #thepost span.title { color:#369; }



/* Contact #
------------------------------------------------------------------------------------------ */

.contact .author { width:24%; }
.contact .email, .contact .url { width:38%; }
.contact .purpose { width:24%; }
.contact .subject { width:76%; }
.contact .email, .contact .url, .contact .subject { padding-left:10px; }
.contact .author, .contact .email, .contact .url, .contact .purpose, .contact .subject, .contact .message { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
.contact #author, .contact #email, .contact #url, .contact #purpose, .contact #subject, .contact #message { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; width:100%; }
.contact textarea { height:300px; }
.contact #submit { margin-top:-10px; }



/* Calendar
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#wp-calendar {
	width:100%;
	background:#ebebeb;
	border:1px solid #ccc;
	margin:0;
	font-size:12px;
	text-align:center;
}
#wp-calendar caption {
	text-align:left;
	margin:10px 0;
	padding-top:10px;
	border-top:1px solid #c6c6c6;
	font-size:18px;
	font-weight:normal;
	text-transform:uppercase;
	color:#ccc;
}
#wp-calendar #today { background:#ccc; }
#wp-calendar a {
	display:block;
	width:100%;
	height:100%;
	border:none;
	padding:0;
}
#wp-calendar a:hover { background:#ccc; }



/* Isotope
------------------------------------------------------------------------------------------ */

.isotope,
.isotope-item {
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	transition-duration:0.5s;
}
.isotope { -webkit-transition-property:height,width; -moz-transition-property:height,width; transition-property:height,width; }
.isotope-item { -webkit-transition-property:-webkit-transform,opacity; -moz-transition-property:-moz-transform,opacity; transition-property:transform,opacity; z-index:2; }
.isotope-hidden.isotope-item { pointer-events:none; z-index:1; }